/* ============================================================
   K Club — UI components (theme-agnostic; tokens only)
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-ui);
  background:
    radial-gradient(120% 80% at 50% -10%,#34373f 0%,#202229 45%,#15161a 100%);
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:40px 16px 110px;
}

/* ---------- Phone frame ---------- */
.phone{
  width:390px; height:844px; border-radius:48px; border:10px solid #050506;
  background:var(--color-bg); overflow:hidden; position:relative;
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.04);
}
.app{height:100%; display:flex; flex-direction:column; color:var(--color-text);
  font-size:var(--fs-body); position:relative}

/* ---------- Status bar ---------- */
.statusbar{height:44px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:space-between; padding:0 var(--s6) 0 var(--s6); font-size:13px;
  font-weight:600; color:var(--color-text)}
.statusbar .right{display:flex; gap:6px; align-items:center; font-size:12px}
.notch{position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:120px; height:26px; background:#050506; border-radius:14px; z-index:5}

/* ---------- App bar ---------- */
.appbar{height:54px; flex:0 0 auto; display:flex; align-items:center; gap:var(--s3);
  padding:0 var(--s4)}
.brand{font-weight:800; font-size:18px; letter-spacing:.5px; display:flex; align-items:center; gap:6px;
  white-space:nowrap; flex:0 0 auto}
.brand b{color:var(--color-accent)}
.appbar .spacer{flex:1}
.iconbtn{width:38px; height:38px; border-radius:var(--r-pill); display:flex;
  align-items:center; justify-content:center; background:var(--color-surface);
  border:1px solid var(--color-line); color:var(--color-text); font-size:16px; position:relative}
.coins{display:flex; align-items:center; gap:5px; height:32px; padding:0 12px;
  border-radius:var(--r-pill); background:var(--color-exclusive-soft);
  color:var(--color-text); font-weight:700; font-size:12px; border:1px solid var(--color-line)}
.coins b{color:var(--color-accent)}
.dot-badge{position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%;
  background:var(--color-accent); border:2px solid var(--color-surface)}
.avatar{width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,#6a5acd,#e8b23a); border:1px solid var(--color-line)}

/* ---------- Scroll area ---------- */
.scroll{flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:84px; scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}

/* ---------- Section / rail heads ---------- */
.section{margin-top:var(--s6)}
.rail-head{display:flex; align-items:baseline; justify-content:space-between;
  padding:0 var(--s4); margin-bottom:var(--s3)}
.rail-head h3{font-size:var(--fs-title); font-weight:700}
.rail-head .sub{font-size:var(--fs-caption); color:var(--color-text-muted); font-weight:500; margin-top:2px}
.see-all{font-size:var(--fs-label); color:var(--color-accent); font-weight:600}
.rail{display:flex; gap:var(--s3); overflow-x:auto; padding:0 var(--s4) var(--s2);
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}

/* ---------- Poster art placeholders ---------- */
.art{position:relative; overflow:hidden; background:#222}
.art::after{content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 60px rgba(0,0,0,.5); pointer-events:none}
.art-1{background:radial-gradient(120% 100% at 25% 0,#5a3a16,#140d07),linear-gradient(135deg,#a4651f,#241910)}
.art-2{background:radial-gradient(120% 100% at 70% 0,#123a3a,#06120f),linear-gradient(135deg,#1f7a6e,#0a1a17)}
.art-3{background:radial-gradient(120% 100% at 40% 0,#3a1224,#120608),linear-gradient(135deg,#a41f4e,#1c0d12)}
.art-4{background:radial-gradient(120% 100% at 60% 0,#1c2547,#080a14,#06070d),linear-gradient(135deg,#3a4f99,#10131f)}
.art-5{background:radial-gradient(120% 100% at 30% 0,#2c1247,#0a0612),linear-gradient(135deg,#6a3ca4,#15101c)}
.art-6{background:radial-gradient(120% 100% at 70% 0,#143a1c,#06120a),linear-gradient(135deg,#2f9a4f,#0e1f14)}
.art-7{background:radial-gradient(120% 100% at 35% 0,#47351c,#120d06),linear-gradient(135deg,#b58a3a,#1f1810)}
.art-8{background:radial-gradient(120% 100% at 65% 0,#3a1a12,#120705),linear-gradient(135deg,#a4451f,#1c0e0a)}

/* ---------- Hero spotlight ---------- */
.hero{position:relative; height:468px; margin:var(--s2) 0 0; border-radius:0 0 var(--r-hero) var(--r-hero);
  overflow:hidden}
.hero .art{position:absolute; inset:0}
.hero .scrim{position:absolute; inset:0; background:var(--scrim)}
.hero .top-badges{position:absolute; top:var(--s4); left:var(--s4); right:var(--s4);
  display:flex; gap:var(--s2)}
.hero .content{position:absolute; left:var(--s5); right:var(--s5); bottom:var(--s5)}
.hero .kicker{font-size:var(--fs-caption); letter-spacing:1.5px; text-transform:uppercase;
  color:var(--color-accent); font-weight:700; margin-bottom:var(--s2)}
.hero h1{font-family:var(--font-te); font-size:34px; line-height:1.1; font-weight:700;
  text-shadow:0 2px 18px rgba(0,0,0,.6); color:#fff}
.hero .meta{margin-top:var(--s2); color:rgba(255,255,255,.86); font-size:var(--fs-body); font-weight:500}
.hero .actions{display:flex; gap:var(--s3); margin-top:var(--s4)}
.hero .dots{display:flex; gap:6px; justify-content:center; position:absolute; bottom:10px;
  left:0; right:0}
.dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); display:block; transition:.3s}
.dots i.on{width:18px; border-radius:3px; background:var(--color-accent)}
.playfor{position:absolute; top:var(--s4); right:var(--s4)}

/* ---------- Buttons ---------- */
.btn{height:44px; padding:0 var(--s5); border-radius:var(--r-pill); font-weight:700;
  font-size:var(--fs-body); display:inline-flex; align-items:center; gap:8px; border:none;
  cursor:pointer; font-family:var(--font-ui); transition:transform .08s ease}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--color-accent); color:var(--color-on-accent); box-shadow:var(--glow-accent)}
.btn-outline{background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(6px)}
.btn-sm{height:34px; padding:0 14px; font-size:var(--fs-label)}
.btn-pill-ghost{height:34px; padding:0 14px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.5); color:#fff; font-size:var(--fs-label); font-weight:600;
  border:1px solid rgba(255,255,255,.25); display:inline-flex; align-items:center; gap:6px; backdrop-filter:blur(6px)}

/* ---------- Badges ---------- */
.badge{height:24px; padding:0 10px; border-radius:var(--r-pill); font-size:var(--fs-caption);
  font-weight:700; display:inline-flex; align-items:center; gap:5px}
.badge-excl{background:var(--color-exclusive); color:#fff}
.badge-live{background:var(--color-error); color:#fff}
.badge-cbfc{background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.35); font-weight:600}
.tag-excl{position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  background:var(--color-exclusive); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* ---------- Clip card (9:16) ---------- */
.clip{flex:0 0 auto; width:150px}
.clip .thumb{height:212px; border-radius:var(--r-card); position:relative}
.clip .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.92); font-size:30px; opacity:.9; text-shadow:0 2px 10px rgba(0,0,0,.5)}
.clip .cmeta{position:absolute; left:0; right:0; bottom:0; padding:10px 10px 9px;
  background:var(--scrim); border-radius:0 0 var(--r-card) var(--r-card)}
.clip .ctitle{font-size:var(--fs-label); font-weight:700; color:#fff; line-height:1.2}
.clip .cby{font-size:10px; color:rgba(255,255,255,.78); margin-top:3px; display:flex; gap:5px; align-items:center}
.clip .stats{display:flex; gap:10px; margin-top:6px; color:var(--color-text-muted); font-size:var(--fs-caption)}
.clip .stats b{color:var(--color-text-secondary); font-weight:600}

/* ---------- Character card ---------- */
.char{flex:0 0 auto; width:96px; text-align:center}
.char .ring{width:84px; height:84px; border-radius:50%; margin:0 auto; position:relative;
  padding:3px; background:linear-gradient(135deg,var(--color-accent),var(--color-exclusive))}
.char .pic{width:100%; height:100%; border-radius:50%}
.char .nm{font-size:var(--fs-label); font-weight:700; margin-top:8px; line-height:1.15}
.char .fol{font-size:10px; color:var(--color-text-muted); margin-top:2px}
.char .follow{margin-top:7px; height:26px; width:100%; border-radius:var(--r-pill);
  background:transparent; border:1px solid var(--color-accent); color:var(--color-accent);
  font-size:11px; font-weight:700; cursor:pointer}
.char .follow.on{background:var(--color-accent); color:var(--color-on-accent); border-color:transparent}

/* ---------- Continue watching (16:9) ---------- */
.cw{flex:0 0 auto; width:232px}
.cw .thumb{height:130px; border-radius:var(--r-card); position:relative}
.cw .pbar{position:absolute; left:8px; right:8px; bottom:8px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.3)}
.cw .pbar i{display:block; height:100%; border-radius:2px; background:var(--color-accent)}
.cw .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px; text-shadow:0 2px 10px rgba(0,0,0,.5)}
.cw .lbl{font-size:var(--fs-label); font-weight:600; margin-top:8px; color:var(--color-text)}
.cw .sub2{font-size:var(--fs-caption); color:var(--color-text-muted); margin-top:2px}

/* ---------- Coming up (countdown) ---------- */
.up{flex:0 0 auto; width:200px}
.up .thumb{height:112px; border-radius:var(--r-card); position:relative}
.up .cd{position:absolute; top:8px; left:8px; height:24px; padding:0 10px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; gap:5px;
  border:1px solid rgba(255,255,255,.25)}
.up .lbl{font-size:var(--fs-label); font-weight:600; margin-top:8px}
.up .sub2{font-size:var(--fs-caption); color:var(--color-text-muted); margin-top:2px}

/* ---------- Collection (wide) ---------- */
.col{flex:0 0 auto; width:268px}
.col .thumb{height:150px; border-radius:var(--r-card); position:relative}
.col .ov{position:absolute; inset:0; background:var(--scrim); border-radius:var(--r-card);
  display:flex; flex-direction:column; justify-content:flex-end; padding:14px}
.col .ov h4{font-size:var(--fs-bodyl); font-weight:800; color:#fff}
.col .ov span{font-size:var(--fs-caption); color:rgba(255,255,255,.82); margin-top:3px}

/* ---------- Exclusive nudge ---------- */
.nudge{margin:var(--s3) var(--s4) 0; border-radius:var(--r-sheet); padding:14px 16px;
  background:var(--color-exclusive-soft); border:1px solid var(--color-line);
  display:flex; align-items:center; gap:12px}
.nudge .ic{width:36px; height:36px; border-radius:10px; background:var(--color-exclusive); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto}
.nudge .tx{flex:1}
.nudge .tx b{font-size:var(--fs-label); font-weight:700; display:block}
.nudge .tx span{font-size:var(--fs-caption); color:var(--color-text-secondary)}
.nudge .go{color:var(--color-accent); font-weight:700; font-size:var(--fs-label); white-space:nowrap}

/* ---------- Chips ---------- */
.chips{display:flex; gap:var(--s2); flex-wrap:wrap; padding:0 var(--s4)}
.chip{height:36px; padding:0 16px; border-radius:var(--r-pill); display:inline-flex; align-items:center;
  background:var(--color-surface); border:1px solid var(--color-line); color:var(--color-text-secondary);
  font-size:var(--fs-label); font-weight:600; cursor:pointer}
.chip.on{background:var(--color-accent); color:var(--color-on-accent); border-color:transparent}

/* ---------- Earn banner ---------- */
.earn{margin:var(--s4) var(--s4) var(--s2); border-radius:var(--r-sheet); padding:16px;
  background:linear-gradient(120deg,var(--color-surface),var(--color-surface-2));
  border:1px solid var(--color-line); display:flex; align-items:center; gap:12px}
.earn .ic{font-size:22px; color:var(--color-accent)}
.earn .tx b{font-size:var(--fs-body); font-weight:700; display:block}
.earn .tx span{font-size:var(--fs-caption); color:var(--color-text-muted)}
.earn .spacer{flex:1}
.earn .chev{color:var(--color-text-muted)}

/* ---------- Bottom tab bar ---------- */
.tabbar{position:absolute; left:0; right:0; bottom:0; height:72px; display:flex;
  background:color-mix(in srgb,var(--color-surface) 86%, transparent);
  border-top:1px solid var(--color-line); backdrop-filter:blur(14px); padding-bottom:8px}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--color-text-muted); font-size:10px; font-weight:600; cursor:pointer}
.tab .ti{font-size:20px}
.tab.on{color:var(--color-accent)}

/* ---------- Section label (browse) ---------- */
.section-title{padding:0 var(--s4); margin-bottom:var(--s3); font-size:var(--fs-title); font-weight:700}

/* ---------- Theme switcher (prototype tool, not app UI) ---------- */
.switcher{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:var(--r-pill);
  background:rgba(18,18,22,.92); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.switcher .lab{color:#9aa; font-size:12px; font-weight:600; padding:0 6px}
.sw{height:32px; padding:0 14px; border-radius:var(--r-pill); border:1px solid transparent;
  font-size:12px; font-weight:700; cursor:pointer; color:#ddd; background:rgba(255,255,255,.06)}
.sw.on{color:#0b0b0f}
.sw[data-t="midnight-marquee"].on{background:#E8B23A}
.sw[data-t="mass-spotlight"].on{background:#E8113D; color:#fff}
.sw[data-t="neon-nights"].on{background:#22D3EE; color:#04121A}