:root { --h-blue: #00a2ff; --h-grey: #606060; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Segoe UI', Roboto, sans-serif; background: #fff; padding-bottom: 80px; }

/* Header & Nav */
.header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; position: sticky; top: 0; background: #fff; border-bottom: 1px solid #f0f0f0; z-index: 1000; }
.logo-img { height: 28px; }
.clicker { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; cursor: pointer; }
.clicker:active { background: rgba(0,0,0,0.05); transform: scale(0.9); }

/* Tab System */
.tab-content { display: none; width: 100%; padding: 15px; }
.active-tab { display: block !important; }

/* Channel UI */
.banner-preview { width: 100%; height: 100px; background: #ddd; border-radius: 12px; object-fit: cover; }
.pfp-preview { width: 80px; height: 80px; background: #eee; border-radius: 50%; border: 3px solid #fff; margin-top: -40px; margin-left: 15px; object-fit: cover; position: relative; }

.channel-stats { display: flex; gap: 15px; font-size: 13px; color: var(--h-grey); margin: 10px 0; }
.channel-info { font-size: 12px; color: #777; line-height: 1.6; }

/* Forms */
.card { background: #f9f9f9; padding: 20px; border-radius: 15px; border: 1px solid #eee; margin-bottom: 15px; }
.h-input { width: 100%; padding: 12px; margin: 8px 0; border-radius: 10px; border: 1px solid #ddd; outline: none; }
.primary-btn { width: 100%; padding: 14px; background: #000; color: #fff; border: none; border-radius: 30px; font-weight: bold; margin-top: 10px; }
.publish-btn { background: var(--h-blue); }

.bottom-nav { position: fixed; bottom: 0; width: 100%; height: 65px; background: #fff; border-top: 1px solid #eee; display: flex; justify-content: space-around; align-items: center; }
.nav-item { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: var(--h-grey); }
.nav-item.active { color: #000; font-weight: bold; }
.hidden { display: none !important; }