/* =============================================================
   StreamPulse Design System
   Unified CSS for all pages — tokens, components, layouts
   ============================================================= */

/* =============================================================
   1. DESIGN TOKENS — dark theme (default)
   ============================================================= */
:root {
  /* Brand palette */
  --accent:         #a368ff;
  --accent-bright:  #c39bff;
  --accent-deep:    #6d31d6;
  --pink:           #ff5caa;
  --blue:           #5b8cff;
  --cyan:           #45e3d3;
  --gold:           #ffb84d;
  --green:          #44e0a0;
  --red:            #ff6b6b;

  /* Dark surfaces */
  --bg:         #07060d;
  --bg-2:       #0b0913;
  --surface-1:  #110e1b;
  --surface-2:  #17131f;
  --surface-3:  #1e1929;
  --hover:      #221c30;
  --line:       rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.13);

  /* Dark text */
  --text:   #f4f1fb;
  --text-2: #b3acc6;
  --text-3: #6f6885;

  /* FX */
  --glow:   rgba(163,104,255,.55);
  --shadow: 0 24px 60px -20px rgba(0,0,0,.75);

  /* Gradients */
  --grad-brand: linear-gradient(118deg,#8257ff 0%,#a368ff 50%,#6f8dff 100%);
  --grad-soft:  linear-gradient(160deg,rgba(163,104,255,.16),rgba(111,141,255,.06));

  /* Atmospheric mesh (bg decoration) */
  --mesh-1: radial-gradient(60% 50% at 14% 0%,   rgba(163,104,255,.24), transparent 70%);
  --mesh-2: radial-gradient(45% 45% at 94% 10%,  rgba(111,141,255,.15), transparent 70%);
  --mesh-3: radial-gradient(55% 60% at 75% 100%, rgba(109,49,214,.13),  transparent 70%);

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-pill:9999px;

  color-scheme: dark;
}

/* =============================================================
   2. LIGHT THEME OVERRIDES
   ============================================================= */
[data-theme="light"] {
  --bg:         #f4f2fa;
  --bg-2:       #ece9f6;
  --surface-1:  #ffffff;
  --surface-2:  #fbfaff;
  --surface-3:  #f3f1fb;
  --hover:      #f0ecff;
  --line:       rgba(20,12,40,.08);
  --line-strong:rgba(20,12,40,.14);
  --text:       #15101f;
  --text-2:     #564f6b;
  --text-3:     #948cab;
  --glow:       rgba(163,104,255,.35);
  --shadow:     0 24px 50px -24px rgba(91,46,160,.30);
  --grad-soft:  linear-gradient(160deg,rgba(163,104,255,.12),rgba(111,141,255,.05));
  --mesh-1: radial-gradient(60% 50% at 14% 0%,   rgba(163,104,255,.17), transparent 70%);
  --mesh-2: radial-gradient(45% 45% at 94% 10%,  rgba(111,141,255,.11), transparent 70%);
  --mesh-3: radial-gradient(55% 60% at 75% 100%, rgba(109,49,214,.08),  transparent 70%);
  color-scheme: light;
}

/* =============================================================
   3. RESET & BASE
   ============================================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Geist', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .5s ease, color .4s ease;
  overflow-x:hidden;
}

/* page shell variants */
body.is-app   { overflow:hidden; }       /* dashboard: full-viewport */
body.is-page  { overflow-x:hidden; }    /* landing / search / channel */

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button, input, select, textarea { font-family:inherit; }
input[type="search"]::-webkit-search-cancel-button { display:none; }

/* =============================================================
   4. SCROLLBAR
   ============================================================= */
::-webkit-scrollbar              { width:10px; height:10px; }
::-webkit-scrollbar-track        { background:transparent; }
::-webkit-scrollbar-thumb        { background:var(--line-strong); border-radius:20px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover  { background:var(--accent); background-clip:padding-box; }

/* =============================================================
   5. ATMOSPHERIC DECORATION
   ============================================================= */
.atmosphere {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--mesh-1), var(--mesh-2), var(--mesh-3);
  transition:background .5s ease;
}
.grain {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.grid-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 75%);
}

/* =============================================================
   6. LAYOUT UTILITIES
   ============================================================= */
.wrap      { position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:0 28px; }
.wrap-lg   { position:relative; z-index:2; max-width:1280px; margin:0 auto; padding:0 28px; }
.wrap-sm   { position:relative; z-index:2; max-width:760px;  margin:0 auto; padding:0 28px; }
.sr-only   { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* =============================================================
   7. KEYFRAME ANIMATIONS
   ============================================================= */
@keyframes breathe    { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.7;transform:scale(1.08)} }
@keyframes pulse      { 0%{box-shadow:0 0 0 0 rgba(255,107,107,.55)} 70%{box-shadow:0 0 0 9px rgba(255,107,107,0)} 100%{box-shadow:0 0 0 0 rgba(255,107,107,0)} }
@keyframes rise       { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes pop        { from{opacity:0;transform:translateY(20px) scale(.98)} to{opacity:1;transform:none} }
@keyframes viewIn     { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes gradShift  { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes blink      { 50%{opacity:0} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes arrowPulse { 0%,100%{opacity:.55;transform:translateX(0)} 50%{opacity:1;transform:translateX(4px)} }
@keyframes toastIn    { from{transform:translateY(120%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes toastOut   { from{transform:translateY(0);opacity:1} to{transform:translateY(120%);opacity:0} }
@keyframes modalIn    { from{opacity:0;transform:scale(.95) translateY(10px)} to{opacity:1;transform:none} }

/* =============================================================
   8. BRAND MARK
   ============================================================= */
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark {
  width:34px; height:34px; border-radius:10px; position:relative;
  background:var(--grad-brand);
  box-shadow:0 0 22px -2px var(--glow), inset 0 0 0 1px rgba(255,255,255,.18);
  display:grid; place-items:center; flex-shrink:0;
}
.brand-mark svg { width:18px; height:18px; }
.brand-mark::after {
  content:''; position:absolute; inset:0; border-radius:10px;
  background:var(--grad-brand); filter:blur(12px); opacity:.5;
  z-index:-1; animation:breathe 4s ease-in-out infinite;
}
.brand-mark--sm { width:28px; height:28px; border-radius:8px; }
.brand-mark--sm svg { width:14px; height:14px; }
.brand-name { font-weight:600; font-size:18px; letter-spacing:-.01em; line-height:1; }
.brand-name b { background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* =============================================================
   9. BUTTONS
   ============================================================= */
.btn {
  font-family:inherit; font-size:14px; font-weight:700;
  border:none; cursor:pointer; border-radius:var(--r-md);
  padding:11px 20px; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s;
  position:relative; text-decoration:none; white-space:nowrap; line-height:1;
}
.btn svg { width:16px; height:16px; flex-shrink:0; }

/* Primary — glow */
.btn-primary {
  color:#fff; background:var(--grad-brand); background-size:160% 160%;
  box-shadow:0 8px 24px -8px var(--glow), inset 0 0 0 1px rgba(255,255,255,.16);
  animation:gradShift 8s ease infinite;
}
.btn-primary::after {
  content:''; position:absolute; inset:-2px; border-radius:14px;
  background:var(--grad-brand); filter:blur(16px); opacity:.45; z-index:-1; transition:opacity .3s;
}
.btn-primary:hover { box-shadow:0 12px 34px -8px var(--glow), inset 0 0 0 1px rgba(255,255,255,.28); }
.btn-primary:hover::after { opacity:.85; }
.btn-primary:active  { transform:scale(.97); }
.btn-primary:focus-visible { outline:2px solid var(--accent-bright); outline-offset:3px; }

/* Ghost */
.btn-ghost {
  background:var(--surface-2); color:var(--text); border:1px solid var(--line-strong);
}
.btn-ghost:hover { border-color:var(--accent); box-shadow:0 0 0 4px rgba(163,104,255,.10), 0 0 22px -10px var(--glow); }
.btn-ghost:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Twitch */
.btn-twitch {
  background:#9146ff; color:#fff;
  box-shadow:0 8px 24px -8px rgba(145,70,255,.6), inset 0 0 0 1px rgba(255,255,255,.18);
}
.btn-twitch:hover { background:#a25fff; box-shadow:0 12px 30px -8px rgba(145,70,255,.75); }
.btn-twitch:focus-visible { outline:2px solid #c39bff; outline-offset:3px; }

/* Danger */
.btn-danger { background:rgba(255,107,107,.14); color:var(--red); border:1px solid rgba(255,107,107,.3); }
.btn-danger:hover { background:rgba(255,107,107,.24); }

/* Sizes */
.btn-lg { padding:14px 26px; font-size:15px; border-radius:14px; }
.btn-sm { padding:8px 14px; font-size:12.5px; border-radius:10px; }
.btn-xs { padding:5px 10px; font-size:11.5px; border-radius:8px; }

/* Icon only */
.icon-btn {
  width:40px; height:40px; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--surface-2);
  border:1px solid var(--line); color:var(--text-2); cursor:pointer;
  transition:.2s; position:relative; flex-shrink:0;
}
.icon-btn:hover { color:var(--text); border-color:var(--line-strong); background:var(--surface-3); }
.icon-btn svg { width:18px; height:18px; }
.icon-btn .ping {
  position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 0 2px var(--surface-1), 0 0 8px var(--pink);
}

/* =============================================================
   10. BADGES & CHIPS & PILLS
   ============================================================= */
.badge {
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  letter-spacing:.05em; padding:3px 9px; border-radius:var(--r-pill);
}
.badge-accent  { color:var(--accent-bright); background:rgba(163,104,255,.14); border:1px solid rgba(163,104,255,.28); }
.badge-green   { color:var(--green); background:rgba(68,224,160,.12); border:1px solid rgba(68,224,160,.28); }
.badge-gold    { color:var(--gold); background:rgba(255,184,77,.12); border:1px solid rgba(255,184,77,.28); }
.badge-red     { color:var(--red); background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.28); }
.badge-blue    { color:var(--blue); background:rgba(91,140,255,.12); border:1px solid rgba(91,140,255,.28); }
.badge-live    { color:#ff8d8d; background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.3); }
.badge-free    { color:var(--green); background:rgba(68,224,160,.10); border:1px solid rgba(68,224,160,.22); }
.badge-pro     { color:#fff; background:var(--grad-brand); }
.badge-partner { color:var(--accent-bright); }

.chip-row { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  font-size:13px; font-weight:600; color:var(--text-2);
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line);
  cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:6px;
}
.chip:hover { color:var(--text); border-color:var(--accent); transform:translateY(-1px); }
.chip.active { color:var(--accent-bright); border-color:rgba(163,104,255,.4); background:rgba(163,104,255,.08); }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; color:var(--accent-bright);
  padding:7px 15px; border-radius:var(--r-pill);
  background:rgba(163,104,255,.10); border:1px solid rgba(163,104,255,.25);
}
.eyebrow .dot-accent {
  width:7px; height:7px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 8px var(--glow);
}

/* =============================================================
   11. LIVE INDICATOR
   ============================================================= */
.dot-live {
  width:8px; height:8px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 rgba(255,107,107,.6); animation:pulse 1.8s infinite; flex-shrink:0;
}
.dot-offline { width:8px; height:8px; border-radius:50%; background:var(--text-3); flex-shrink:0; }
.live-pill {
  display:flex; align-items:center; gap:7px; padding:8px 14px;
  border-radius:var(--r-md); background:rgba(255,107,107,.12);
  border:1px solid rgba(255,107,107,.3); font-size:12.5px; font-weight:700; color:#ff8d8d;
}

/* =============================================================
   12. THEME TOGGLE
   ============================================================= */
.theme-toggle {
  width:54px; height:30px; border-radius:var(--r-pill);
  background:var(--surface-3); border:1px solid var(--line);
  position:relative; cursor:pointer; transition:.3s; flex-shrink:0;
  -webkit-user-select:none; user-select:none;
}
.theme-toggle i {
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--grad-brand); transition:.35s cubic-bezier(.4,1.4,.5,1);
  display:grid; place-items:center; box-shadow:0 0 12px -2px var(--glow);
}
.theme-toggle i svg { width:12px; height:12px; color:#fff; pointer-events:none; }
[data-theme="light"] .theme-toggle i { left:27px; }

/* =============================================================
   13. TOP NAV (landing / search / channel pages)
   ============================================================= */
.topnav {
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--line);
}
.topnav-in {
  display:flex; align-items:center; gap:20px; height:66px;
  max-width:1120px; margin:0 auto; padding:0 28px;
}
.topnav-links { display:flex; gap:24px; }
.topnav-links a { color:var(--text-2); font-size:14px; font-weight:500; transition:color .2s; }
.topnav-links a:hover { color:var(--text); }
.topnav-links a.active { color:var(--text); }
.topnav-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

/* =============================================================
   14. CARDS
   ============================================================= */
.card {
  background:linear-gradient(160deg, var(--surface-1), var(--surface-2));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:20px;
  position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s;
}
.card:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.card-glow::before {
  content:''; position:absolute; top:-40%; right:-20%; width:200px; height:200px;
  background:var(--accent); filter:blur(80px); opacity:0; transition:opacity .4s; border-radius:50%;
}
.card-glow:hover::before { opacity:.13; }
.card-flat { transition:none; }
.card-flat:hover { transform:none; }

/* Section title inside a card */
.card-title { font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:16px; }
.card-kicker { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }

/* =============================================================
   15. STAT WIDGETS
   ============================================================= */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat-card { }
.stat-card .stat-ico { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:16px; }
.stat-card .stat-ico svg { width:19px; height:19px; }
.stat-card .stat-label { font-size:12.5px; color:var(--text-2); font-weight:600; margin-bottom:6px; }
.stat-card .stat-value { font-size:34px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.delta {
  display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700;
  padding:3px 8px; border-radius:var(--r-pill); margin-top:12px;
}
.delta.up   { color:var(--green); background:rgba(68,224,160,.12); }
.delta.down { color:var(--red); background:rgba(255,107,107,.12); }
.delta svg  { width:12px; height:12px; }
.sparkline-wrap { position:absolute; bottom:0; left:0; right:0; height:46px; opacity:.7; }
.sparkline-wrap svg { width:100%; height:100%; }

/* =============================================================
   16. TOAST NOTIFICATIONS
   ============================================================= */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:12px; pointer-events:none; }
.toast {
  width:330px; padding:18px;
  background:linear-gradient(160deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--line-strong); border-radius:var(--r-xl);
  box-shadow:var(--shadow); pointer-events:all;
  animation:toastIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.toast.removing { animation:toastOut .35s cubic-bezier(.5,0,.8,.5) forwards; }
.toast-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.toast-icon { width:30px; height:30px; border-radius:50%; background:var(--grad-brand); display:grid; place-items:center; flex-shrink:0; box-shadow:0 0 14px -3px var(--glow); }
.toast-icon svg { width:14px; height:14px; color:#fff; }
.toast h4 { font-size:13.5px; font-weight:700; flex:1; }
.toast .toast-close { background:none; border:none; cursor:pointer; color:var(--text-3); padding:2px; border-radius:6px; display:grid; place-items:center; }
.toast .toast-close:hover { color:var(--text); }
.toast .toast-close svg { width:16px; height:16px; }
.toast p { font-size:13px; color:var(--text-2); line-height:1.5; margin-bottom:12px; }
.toast.toast-success .toast-icon { background:linear-gradient(135deg,var(--green),var(--cyan)); }
.toast.toast-error   .toast-icon { background:linear-gradient(135deg,var(--red),var(--pink)); }

/* =============================================================
   17. MODAL
   ============================================================= */
.modal-backdrop {
  position:fixed; inset:0; z-index:100; background:rgba(7,6,13,.8);
  backdrop-filter:blur(8px); display:grid; place-items:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal {
  width:100%; max-width:480px; border-radius:var(--r-xl);
  background:var(--surface-1); border:1px solid var(--line-strong);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.9);
  animation:modalIn .4s cubic-bezier(.2,.8,.2,1) both;
}
.modal-head {
  padding:24px 24px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.modal-title { font-size:20px; font-weight:700; }
.modal-sub { font-size:13px; color:var(--text-2); margin-top:4px; }
.modal-close { background:none; border:none; cursor:pointer; color:var(--text-3); padding:4px; border-radius:8px; }
.modal-close:hover { color:var(--text); background:var(--hover); }
.modal-close svg { width:20px; height:20px; }
.modal-body { padding:24px; }
.modal-foot { padding:16px 24px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; }

/* =============================================================
   18. LOCKED / PREMIUM PANELS
   ============================================================= */
.locked-panel {
  background:linear-gradient(160deg, rgba(163,104,255,.08), var(--surface-1) 70%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; position:relative; overflow:hidden;
}
.locked-panel::before { content:''; position:absolute; inset:0; background:var(--grad-soft); opacity:.5; pointer-events:none; }
.locked-panel-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; position:relative; }
.lock-orb {
  width:38px; height:38px; border-radius:11px; background:var(--grad-brand);
  display:grid; place-items:center; flex-shrink:0;
  box-shadow:0 0 18px -3px var(--glow);
}
.lock-orb svg { width:17px; height:17px; color:#fff; }
.locked-panel-head h4 { font-size:15px; font-weight:700; }
.locked-panel-head p  { font-size:12.5px; color:var(--text-3); margin-top:3px; }
.locked-items { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; position:relative; }
.locked-item {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:13px; padding:14px;
}
.locked-item .locked-item-label { font-size:11.5px; color:var(--text-2); font-weight:600; display:flex; align-items:center; gap:6px; }
.locked-item .locked-item-label svg { width:11px; height:11px; color:var(--accent-bright); }
.locked-item .locked-item-value {
  font-size:22px; font-weight:600; margin-top:8px;
  filter:blur(7px); user-select:none; color:var(--accent-bright);
  font-variant-numeric:tabular-nums;
}
.locked-cta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; position:relative; }
.locked-note { font-size:12px; color:var(--text-3); }

/* =============================================================
   19. EMPTY STATE
   ============================================================= */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 20px; min-height:60vh;
}
.empty-orb {
  width:120px; height:120px; border-radius:32px;
  background:var(--grad-soft); border:1px solid var(--line);
  display:grid; place-items:center; position:relative; margin-bottom:28px;
}
.empty-orb::after {
  content:''; position:absolute; inset:-20px; border-radius:50px;
  background:var(--accent); filter:blur(50px); opacity:.18;
  z-index:-1; animation:breathe 5s ease-in-out infinite;
}
.empty-orb svg { width:46px; height:46px; color:var(--accent-bright); }
.empty-state h2 { font-size:24px; font-weight:600; margin-bottom:10px; }
.empty-state p  { color:var(--text-2); font-size:14.5px; max-width:420px; line-height:1.6; margin-bottom:24px; }

/* =============================================================
   20. AI CARD
   ============================================================= */
.ai-card { background:linear-gradient(155deg, rgba(163,104,255,.14), var(--surface-1) 60%); border:1px solid rgba(163,104,255,.2); }
.ai-head  { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.ai-orb {
  width:36px; height:36px; border-radius:50%; background:var(--grad-brand);
  position:relative; box-shadow:0 0 20px -2px var(--glow); flex-shrink:0;
}
.ai-orb::before { content:''; position:absolute; inset:3px; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),transparent 60%); }
.ai-orb.thinking { animation:spin 1.2s linear infinite; }
.ai-label { font-weight:700; font-size:14px; }
.ai-label span { font-size:10.5px; color:var(--accent-bright); font-weight:700; letter-spacing:.08em; text-transform:uppercase; display:block; margin-top:2px; }
.ai-body { font-size:14px; line-height:1.65; color:var(--text-2); min-height:66px; }
.ai-body b { color:var(--text); }
.cursor-blink::after { content:'|'; color:var(--accent); animation:blink .9s steps(2) infinite; }
.ai-foot { display:flex; gap:8px; margin-top:16px; align-items:center; flex-wrap:wrap; }
.confidence { margin-left:auto; font-size:11px; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.conf-bar { width:60px; height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.conf-bar i { display:block; height:100%; background:var(--grad-brand); border-radius:3px; }

/* =============================================================
   21. APP SHELL (dashboard)
   ============================================================= */
.app { position:relative; z-index:2; display:grid; grid-template-columns:248px 1fr; height:100vh; }

/* --- Sidebar --- */
.sidebar {
  display:flex; flex-direction:column; padding:22px 16px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-1), var(--bg-2));
  overflow-y:auto; overflow-x:hidden;
}
.sidebar .brand { padding:6px 10px 24px; }

.nav-label { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); padding:14px 12px 8px; font-weight:700; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px;
  color:var(--text-2); cursor:pointer; font-size:14px; font-weight:500; position:relative;
  transition:color .2s, background .25s; border:1px solid transparent; -webkit-user-select:none; user-select:none;
}
.nav-item svg { width:18px; height:18px; flex-shrink:0; opacity:.85; }
.nav-item:hover { color:var(--text); background:var(--hover); }
.nav-item.active { color:var(--text); background:var(--surface-3); border-color:var(--line); }
.nav-item.active::before {
  content:''; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 4px 4px 0; background:var(--grad-brand); box-shadow:0 0 12px var(--glow);
}
.nav-item.active svg { color:var(--accent-bright); opacity:1; }
.nav-badge { margin-left:auto; font-size:10px; font-weight:700; padding:2px 7px; border-radius:var(--r-pill); background:var(--accent); color:#fff; box-shadow:0 0 12px -2px var(--glow); }

.sidebar-foot { margin-top:auto; padding-top:16px; }
.live-card {
  margin:0 4px 12px; padding:13px; border-radius:14px;
  background:var(--grad-soft); border:1px solid var(--line); position:relative; overflow:hidden;
}
.live-card .lc-row { display:flex; align-items:center; gap:8px; }
.live-card .lc-label { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--text); }
.live-card .lc-num { font-size:22px; font-weight:600; margin-top:8px; font-variant-numeric:tabular-nums; }
.live-card .lc-sub { font-size:11px; color:var(--text-3); margin-top:2px; }

.user-chip { display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; cursor:pointer; transition:background .2s; }
.user-chip:hover { background:var(--hover); }
.avatar { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--accent),#6f8dff); display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); flex-shrink:0; }
.user-chip .uc-name { font-size:13px; font-weight:600; line-height:1.2; }
.user-chip .uc-plan { font-size:11px; color:var(--accent-bright); font-weight:600; }

/* --- Main area --- */
.main { display:flex; flex-direction:column; overflow:hidden; }

/* Dashboard topbar */
.dash-topbar {
  display:flex; align-items:center; gap:14px; padding:14px 28px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-1) 72%, transparent);
  backdrop-filter:blur(18px); position:relative; z-index:20; flex-shrink:0;
}
.dash-search { flex:1; max-width:440px; position:relative; }
.dash-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-3); }
.dash-search input {
  width:100%; padding:11px 14px 11px 40px; border-radius:12px; font-size:13.5px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text); transition:.25s;
}
.dash-search input::placeholder { color:var(--text-3); }
.dash-search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(163,104,255,.13); background:var(--surface-3); }
.dash-search kbd { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--text-3); border:1px solid var(--line); padding:2px 6px; border-radius:6px; }
.channel-switch {
  display:flex; align-items:center; gap:9px; padding:7px 11px 7px 8px;
  border-radius:11px; background:var(--surface-2); border:1px solid var(--line);
  cursor:pointer; transition:.2s; font-size:13px; font-weight:600;
}
.channel-switch:hover { border-color:var(--line-strong); background:var(--surface-3); }
.channel-switch .cs-av { width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--blue),var(--cyan)); flex-shrink:0; }
.channel-switch svg { width:14px; height:14px; color:var(--text-3); }
.dash-topbar-right { display:flex; align-items:center; gap:8px; margin-left:auto; }

/* Content area */
.content { flex:1; overflow-y:auto; padding:28px; }
.view { display:none; animation:viewIn .5s cubic-bezier(.2,.7,.2,1); }
.view.active { display:block; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:16px; }
.page-title { font-size:30px; font-weight:600; letter-spacing:-.02em; }
.page-sub   { color:var(--text-2); font-size:14px; margin-top:4px; }
.page-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* =============================================================
   22. SECTION HEADINGS (landing / public pages)
   ============================================================= */
.section { padding:80px 0; }
.section-kicker { text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:14px; }
.section-h2 { font-size:clamp(28px,4vw,44px); font-weight:600; letter-spacing:-.02em; text-align:center; }
.section-sub { text-align:center; color:var(--text-2); max-width:560px; margin:16px auto 0; font-size:16px; line-height:1.65; }

/* =============================================================
   23. HERO (landing)
   ============================================================= */
.hero { padding:100px 0 50px; text-align:center; }
.hero-title { font-size:clamp(42px,6.5vw,76px); font-weight:600; line-height:1.01; letter-spacing:-.03em; animation:rise .6s both; }
.hero-title em { font-style:normal; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede { font-size:clamp(16px,2vw,19px); color:var(--text-2); max-width:600px; margin:22px auto 0; line-height:1.65; animation:rise .6s .08s both; }

/* Hero search */
.hero-search { max-width:600px; margin:42px auto 0; animation:rise .6s .14s both; }
.search-field {
  display:flex; gap:10px; padding:9px 9px 9px 18px; border-radius:18px;
  background:var(--surface-1); border:1px solid var(--line-strong);
  box-shadow:var(--shadow); position:relative; transition:border-color .25s, box-shadow .25s;
}
.search-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px rgba(163,104,255,.14),var(--shadow); }
.search-at { display:flex; align-items:center; color:var(--text-3); font-size:18px; font-weight:700; }
.search-field input { flex:1; background:none; border:none; color:var(--text); font-family:inherit; font-size:16px; outline:none; padding:10px 4px; }
.search-field input::placeholder { color:var(--text-3); }
.search-chips { display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.search-chip {
  font-size:12.5px; font-weight:600; color:var(--text-2);
  padding:6px 13px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line);
  cursor:pointer; transition:.2s;
}
.search-chip:hover { color:var(--text); border-color:var(--accent); transform:translateY(-1px); }
.search-free-note { font-size:13px; color:var(--text-3); margin-top:14px; }

/* =============================================================
   24. CHANNEL CARD (result / search page)
   ============================================================= */
.rcard {
  background:linear-gradient(160deg, var(--surface-1), var(--surface-2));
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow); animation:pop .5s cubic-bezier(.2,.8,.2,1) both;
}
.rcard-top {
  display:flex; gap:18px; align-items:center; padding:24px;
  border-bottom:1px solid var(--line); position:relative;
}
.rcard-top::before {
  content:''; position:absolute; top:-30%; left:8%; width:240px; height:160px;
  background:var(--accent); filter:blur(90px); opacity:.10; pointer-events:none;
}
/* Avatar — circular with live ring */
.rcard-av-wrap { position:relative; flex-shrink:0; width:72px; height:72px; }
.rcard-avatar-img { width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; border:2px solid var(--line); }
.rcard-avatar-fallback { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:28px; color:#fff; }
.rcard-live-dot { position:absolute; bottom:2px; right:2px; width:14px; height:14px; border-radius:50%; background:#ff4444; border:2px solid var(--surface-1); box-shadow:0 0 8px #ff4444; animation:pulse 1.8s ease-in-out infinite; }

.rcard-info { flex:1; min-width:0; }
.rcard-name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.rcard-name { font-size:22px; font-weight:700; line-height:1.2; }
.rcard-bio  { color:var(--text-2); font-size:13.5px; line-height:1.5; margin-top:2px; max-height:3em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rcard-status { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; font-weight:600; }

.rcard-stats { display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line); }
.rstat { background:var(--surface-1); padding:16px 20px; }
.rstat-label { font-size:11px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.rstat-value { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:4px; letter-spacing:-.02em; }
.rstat-sub   { font-size:11px; color:var(--text-3); margin-top:2px; }

.rcard-stream-info { padding:18px 24px; border-top:1px solid var(--line); background:var(--surface-1); }
.rcard-stream-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; }

.rcard-cta { display:flex; align-items:center; gap:14px; padding:18px 24px; background:linear-gradient(135deg,rgba(163,104,255,.1),rgba(111,141,255,.06)); border-top:1px solid rgba(163,104,255,.25); }
.rcard-cta-icon { font-size:20px; flex-shrink:0; width:38px; height:38px; border-radius:12px; background:var(--grad-brand); display:grid; place-items:center; }
.rcard-cta-body { flex:1; min-width:0; }
.rcard-cta-title { font-size:14px; font-weight:700; color:var(--text); }
.rcard-cta-sub { font-size:12px; color:var(--text-3); line-height:1.5; margin-top:1px; }
.rcard-foot { padding:12px 20px; border-top:1px solid var(--line); }
@media (max-width:600px) { .rcard-cta { flex-wrap:wrap; } .rcard-cta-icon { display:none; } }
.cat-pill { display:inline-flex; align-items:center; gap:8px; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; }
.cat-pill-sq { width:22px; height:30px; border-radius:5px; background:linear-gradient(135deg,var(--accent),var(--blue)); }
.stream-title-preview { font-size:14px; color:var(--text-2); margin-top:12px; line-height:1.5; font-style:italic; }
.spark-wrap { height:64px; }
.spark-wrap svg { width:100%; height:100%; }

/* Verify badge */
.verify-ic { width:18px; height:18px; color:var(--accent-bright); flex-shrink:0; }

/* =============================================================
   25. SEARCH PAGE
   ============================================================= */
.search-page-wrap { padding:40px 0 80px; }
.search-page-bar {
  display:flex; gap:12px; margin-bottom:32px; padding:12px 16px 12px 20px;
  background:var(--surface-1); border:1px solid var(--line-strong);
  border-radius:18px; box-shadow:var(--shadow);
  transition:border-color .25s, box-shadow .25s;
}
.search-page-bar:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px rgba(163,104,255,.13),var(--shadow); }
.search-page-bar .sp-at { font-size:16px; font-weight:700; color:var(--text-3); display:flex; align-items:center; }
.search-page-bar input { flex:1; background:none; border:none; font-family:inherit; font-size:16px; color:var(--text); outline:none; padding:10px 4px; }
.search-page-bar input::placeholder { color:var(--text-3); }

.search-section-title { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.search-section-title::after { content:''; flex:1; height:1px; background:var(--line); }

.channel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.channel-mini {
  background:linear-gradient(160deg, var(--surface-1), var(--surface-2));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:18px;
  cursor:pointer; transition:.3s; display:flex; align-items:center; gap:14px; position:relative;
}
.channel-mini:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.channel-mini-av { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:20px; font-weight:600; color:#fff; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.channel-mini-info { flex:1; min-width:0; }
.channel-mini-name { font-size:15px; font-weight:700; display:flex; align-items:center; gap:7px; }
.channel-mini-cat  { font-size:12.5px; color:var(--text-3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.channel-mini-stats { display:flex; gap:12px; margin-top:8px; }
.channel-mini-stat { font-size:12px; color:var(--text-2); display:flex; align-items:center; gap:5px; }
.channel-mini-stat b { color:var(--text); font-variant-numeric:tabular-nums; }
.channel-mini-live-badge { position:absolute; top:12px; right:12px; }

.filter-bar { display:flex; gap:10px; align-items:center; margin-bottom:24px; flex-wrap:wrap; }
.filter-bar .filter-label { font-size:13px; color:var(--text-3); font-weight:600; }

.recent-tag {
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  padding:7px 13px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line); cursor:pointer; transition:.2s;
}
.recent-tag:hover { border-color:var(--accent); color:var(--text); }
.recent-tag .rt-at { color:var(--text-3); font-weight:700; }
.recent-tag .rt-x { color:var(--text-3); font-size:11px; margin-left:2px; }
.recent-tag .rt-x:hover { color:var(--red); }

/* =============================================================
   26. CHANNEL DETAIL PAGE (public)
   ============================================================= */
.ch-hero {
  padding:36px 0 0; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-1), transparent);
}
.ch-hero-inner { display:flex; gap:24px; align-items:flex-end; padding-bottom:28px; }
.ch-av-wrap { position:relative; flex-shrink:0; }
.ch-av {
  width:100px; height:100px; border-radius:24px; display:grid; place-items:center;
  font-size:42px; font-weight:600; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 40px -10px var(--glow);
}
.ch-live-ring { position:absolute; inset:-4px; border-radius:28px; border:2px solid var(--red); animation:pulse 2s infinite; }
.ch-info { flex:1; min-width:0; }
.ch-name { font-size:clamp(26px,4vw,38px); font-weight:600; letter-spacing:-.02em; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ch-bio  { color:var(--text-2); font-size:15px; margin-top:4px; }
.ch-meta { display:flex; gap:20px; margin-top:14px; flex-wrap:wrap; }
.ch-meta-item { font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.ch-meta-item svg { width:14px; height:14px; color:var(--text-3); }
.ch-actions { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }

.ch-tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); position:sticky; top:66px; z-index:10; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(12px); }
.ch-tab { padding:14px 20px; font-size:14px; font-weight:600; color:var(--text-3); cursor:pointer; border-bottom:2px solid transparent; transition:.2s; }
.ch-tab:hover { color:var(--text-2); }
.ch-tab.active { color:var(--accent-bright); border-bottom-color:var(--accent); }

.ch-body { padding:32px 0 80px; }
.ch-stat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:28px; }
.ch-stat { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; }
.ch-stat-label { font-size:11.5px; color:var(--text-3); font-weight:600; margin-bottom:6px; }
.ch-stat-val { font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.ch-stat-sub { font-size:11px; color:var(--text-3); margin-top:3px; }

/* Stream list */
.stream-list { display:flex; flex-direction:column; gap:10px; }
.stream-row {
  display:flex; align-items:center; gap:16px; padding:14px 16px;
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md);
  cursor:pointer; transition:.2s;
}
.stream-row:hover { border-color:var(--line-strong); background:var(--surface-2); }
.stream-row-thumb { width:60px; height:38px; border-radius:8px; background:linear-gradient(135deg,var(--surface-3),var(--accent-deep)); flex-shrink:0; display:grid; place-items:center; }
.stream-row-thumb svg { width:16px; height:16px; color:rgba(255,255,255,.5); }
.stream-row-info { flex:1; min-width:0; }
.stream-row-title { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stream-row-meta  { font-size:12px; color:var(--text-3); margin-top:3px; display:flex; gap:12px; flex-wrap:wrap; }
.stream-row-stats { display:flex; gap:16px; flex-shrink:0; }
.stream-row-stat  { font-size:12.5px; color:var(--text-2); text-align:right; }
.stream-row-stat b { display:block; font-size:14px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }

/* VOD grid */
.vod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.vod-card {
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; cursor:pointer; transition:.25s;
}
.vod-card:hover { border-color:var(--line-strong); transform:translateY(-3px); box-shadow:var(--shadow); }
.vod-thumb { height:120px; background:linear-gradient(135deg,var(--surface-3),var(--accent-deep)); position:relative; display:grid; place-items:center; }
.vod-play { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; }
.vod-play svg { width:15px; height:15px; color:#15101f; margin-left:2px; }
.vod-dur { position:absolute; bottom:8px; right:8px; font-size:10px; background:rgba(0,0,0,.75); color:#fff; padding:2px 6px; border-radius:5px; font-variant-numeric:tabular-nums; }
.vod-info { padding:12px; }
.vod-title { font-size:13px; font-weight:600; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vod-meta  { font-size:11.5px; color:var(--text-3); margin-top:6px; display:flex; gap:10px; }

/* Category bars */
.cat-bar-list { display:flex; flex-direction:column; gap:10px; }
.cat-bar-row { display:flex; align-items:center; gap:12px; font-size:13px; }
.cat-bar-name { width:140px; color:var(--text-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.cat-bar-track { flex:1; height:7px; border-radius:4px; background:var(--surface-3); overflow:hidden; }
.cat-bar-fill { height:100%; border-radius:4px; transition:width 1s cubic-bezier(.2,.8,.2,1); }
.cat-bar-val { font-size:12px; color:var(--text-3); width:52px; text-align:right; flex-shrink:0; }

/* =============================================================
   27. INTERACTIVE STREAM TIMELINE
   ============================================================= */
.timeline-wrap { background:linear-gradient(160deg,var(--surface-1),var(--bg-2)); border:1px solid var(--line); border-radius:20px; padding:22px; overflow:hidden; }
.tl-toolbar { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.tl-legend { display:flex; gap:14px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.tl-leg { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2); font-weight:600; }
.tl-leg .tl-leg-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.tl-scroll { overflow-x:auto; overflow-y:hidden; padding-bottom:8px; }

/* Scrub stage */
.tl-stage { display:grid; grid-template-columns:280px 1fr; gap:16px; margin-bottom:18px; }
.tl-frame {
  height:158px; border-radius:14px; position:relative; overflow:hidden;
  background:var(--surface-3); border:1px solid var(--line); display:grid; place-items:center;
}
.tl-frame-grad { position:absolute; inset:0; background:linear-gradient(135deg,var(--accent-deep),var(--surface-1) 70%); opacity:.9; transition:background .35s; }
.tl-frame-play {
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92);
  display:grid; place-items:center; position:relative; z-index:2;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.5); cursor:pointer; transition:transform .2s;
}
.tl-frame-play:hover { transform:scale(1.08); }
.tl-frame-play svg { width:18px; height:18px; color:#15101f; margin-left:3px; }
.tl-frame-tc {
  position:absolute; bottom:10px; right:10px; z-index:2;
  font-size:11px; font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.6); color:#fff; padding:3px 8px; border-radius:6px;
}
.tl-frame-label { position:absolute; top:10px; left:10px; z-index:2; font-size:11px; font-weight:700; background:rgba(0,0,0,.55); color:#fff; padding:4px 9px; border-radius:7px; backdrop-filter:blur(4px); max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.tl-readout { display:flex; flex-direction:column; justify-content:center; gap:0; }
.tl-ro-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--text-2); }
.tl-ro-row b { font-size:15px; color:var(--text); font-variant-numeric:tabular-nums; }
.tl-ro-actions { display:flex; gap:8px; margin-top:14px; }

/* Track */
.tl-track { position:relative; min-width:1100px; height:230px; user-select:none; cursor:crosshair; }
.tl-area, .tl-threads { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tl-threads { z-index:5; }
.tl-ruler { position:absolute; top:0; left:0; right:0; height:22px; display:flex; pointer-events:none; }
.tl-ruler-tick { flex:1; font-size:10px; color:var(--text-3); border-left:1px solid var(--line); padding:3px 0 0 6px; font-variant-numeric:tabular-nums; }
.tl-playhead { position:absolute; top:0; bottom:34px; width:2px; background:linear-gradient(var(--accent-bright),transparent); z-index:8; box-shadow:0 0 10px var(--glow); cursor:ew-resize; }
.tl-playhead::before { content:''; position:absolute; top:-1px; left:-5px; width:12px; height:12px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 12px var(--glow); }
.tl-grip { position:absolute; top:-1px; left:-9px; width:20px; height:20px; border-radius:50%; cursor:ew-resize; }
.tl-track.scrubbing .tl-playhead::before { transform:scale(1.3); }

/* Markers */
.tl-marker { position:absolute; transform:translateX(-50%); cursor:pointer; z-index:7; }
.tl-marker .tl-stem { width:2px; height:var(--stem-h,40px); margin:0 auto; opacity:.5; }
.tl-marker .tl-dot { width:13px; height:13px; border-radius:50%; border:2px solid var(--bg); position:relative; transition:transform .2s, box-shadow .2s; margin-top:-3px; }
.tl-marker:hover .tl-dot { transform:scale(1.5); }

/* Hover preview */
.tl-preview {
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  width:190px; background:var(--surface-3); border:1px solid var(--line-strong);
  border-radius:13px; padding:10px; opacity:0; pointer-events:none;
  transition:.25s; box-shadow:var(--shadow); z-index:10;
}
.tl-marker:hover .tl-preview { opacity:1; transform:translateX(-50%) translateY(0); }
.tl-preview-thumb {
  height:74px; border-radius:8px; background:linear-gradient(135deg,var(--surface-1),var(--accent-deep));
  position:relative; display:grid; place-items:center; margin-bottom:8px; overflow:hidden;
}
.tl-preview-play { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; }
.tl-preview-play svg { width:13px; height:13px; color:#15101f; margin-left:2px; }
.tl-preview-tc { position:absolute; bottom:5px; right:5px; font-size:9px; background:rgba(0,0,0,.7); color:#fff; padding:1px 5px; border-radius:4px; font-variant-numeric:tabular-nums; }
.tl-preview-tag { display:inline-block; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:6px; margin-bottom:5px; }
.tl-preview-title { font-size:12.5px; font-weight:700; line-height:1.3; }
.tl-preview-meta  { font-size:10.5px; color:var(--text-3); margin-top:3px; }

/* Event chips below track */
.tl-chips { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.ev-chip {
  font-size:11px; font-weight:700; padding:5px 11px; border-radius:8px;
  cursor:pointer; display:flex; align-items:center; gap:6px; transition:.2s; border:1px solid transparent;
}
.ev-chip:hover { transform:translateY(-2px); }

/* =============================================================
   28. TAG ANALYTICS
   ============================================================= */
.tag-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tag-card { padding:0; overflow:hidden; }
.tag-banner { height:96px; position:relative; display:flex; align-items:flex-end; padding:14px; }
.tag-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent,var(--surface-1)); opacity:.55; }
.tag-emoji { font-size:30px; position:relative; z-index:2; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.tag-name  { position:absolute; bottom:14px; right:14px; z-index:2; font-size:18px; font-weight:600; }
.tag-body  { padding:16px; }
.tag-stat  { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.tag-stat:last-child { border-bottom:none; }
.tag-stat .ts-k { font-size:12px; color:var(--text-2); }
.tag-stat .ts-v { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.tag-stat .ts-v.pos { color:var(--green); }
.minibar { height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; margin-top:14px; }
.minibar i { display:block; height:100%; border-radius:3px; }
.top-clip { margin-top:14px; padding:10px; border-radius:11px; background:var(--surface-3); display:flex; gap:9px; align-items:center; cursor:pointer; transition:.2s; }
.top-clip:hover { background:var(--hover); }
.top-clip .tc-ic { width:30px; height:30px; border-radius:8px; background:var(--grad-brand); display:grid; place-items:center; flex-shrink:0; }
.top-clip .tc-ic svg { width:14px; height:14px; color:#fff; }
.top-clip .tc-tx { font-size:11.5px; font-weight:600; line-height:1.3; }
.top-clip .tc-tx span { color:var(--text-3); font-weight:500; }

/* =============================================================
   29. GAUGE
   ============================================================= */
.gauge { position:relative; width:200px; height:200px; }
.gauge svg { transform:rotate(-90deg); }
.gauge-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-val { font-size:52px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.gauge-lbl { font-size:12px; color:var(--text-3); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }

/* =============================================================
   30. HEATMAP
   ============================================================= */
.heat { display:grid; grid-template-columns:auto repeat(24,1fr); gap:3px; }
.heat-hr  { font-size:9px; color:var(--text-3); display:grid; place-items:center; }
.heat-day { font-size:10px; color:var(--text-3); font-weight:600; display:flex; align-items:center; padding-right:8px; }
.heat-cell { aspect-ratio:1; border-radius:4px; background:var(--accent); cursor:pointer; transition:transform .15s, box-shadow .2s; }
.heat-cell:hover { transform:scale(1.35); box-shadow:0 0 14px var(--glow); z-index:2; position:relative; }
.heat-legend { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-3); margin-top:14px; }
.heat-legend .heat-sc { width:14px; height:14px; border-radius:4px; background:var(--accent); }

/* =============================================================
   31. FOOTER (landing/public)
   ============================================================= */
.site-footer { border-top:1px solid var(--line); padding:48px 0; text-align:center; }
.footer-cta { font-size:clamp(26px,4vw,40px); font-weight:600; letter-spacing:-.02em; margin-bottom:28px; }
.footer-meta { color:var(--text-3); font-size:13px; margin-top:32px; }
.footer-links { display:flex; gap:24px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.footer-links a { color:var(--text-3); font-size:13px; transition:color .2s; }
.footer-links a:hover { color:var(--text-2); }

/* =============================================================
   32. COMPARE TABLE (landing)
   ============================================================= */
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px; }
.compare-col { border-radius:20px; padding:28px; border:1px solid var(--line); }
.compare-col.free { background:var(--surface-1); }
.compare-col.pro {
  background:linear-gradient(160deg,rgba(163,104,255,.14),var(--surface-1) 70%);
  border-color:rgba(163,104,255,.3); position:relative;
}
.compare-col h3 { font-size:20px; font-weight:600; display:flex; align-items:center; gap:10px; }
.compare-col .col-tagline { color:var(--text-3); font-size:13px; margin:6px 0 22px; }
.feat-row { display:flex; align-items:flex-start; gap:11px; padding:10px 0; font-size:14.5px; color:var(--text-2); }
.feat-row svg { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.feat-row.on { color:var(--text); }
.feat-tick { color:var(--green); }
.feat-cross { color:var(--text-3); }
.feat-pro   { color:var(--accent-bright); }
.compare-badge { position:absolute; top:24px; right:24px; font-size:11px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--grad-brand); padding:5px 11px; border-radius:var(--r-pill); box-shadow:0 0 16px -3px var(--glow); }

/* =============================================================
   33. BROWSER TEASER MOCK (landing)
   ============================================================= */
.teaser-wrap { margin-top:46px; border-radius:24px; border:1px solid var(--line-strong); background:linear-gradient(160deg,var(--surface-1),var(--bg-2)); padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.teaser-wrap::before { content:''; position:absolute; top:-20%; left:30%; width:380px; height:240px; background:var(--accent); filter:blur(120px); opacity:.12; pointer-events:none; }
.browser { border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--bg); }
.browser-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.browser-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.browser-url { margin-left:14px; font-size:12px; color:var(--text-3); background:var(--surface-3); padding:4px 12px; border-radius:7px; }
.mock-shell { display:grid; grid-template-columns:54px 1fr; height:300px; }
.mock-sidebar { background:linear-gradient(180deg,var(--surface-1),var(--bg-2)); border-right:1px solid var(--line); padding:14px 0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.mock-icon { width:26px; height:26px; border-radius:8px; background:var(--surface-3); }
.mock-icon.act { background:var(--grad-brand); box-shadow:0 0 12px -2px var(--glow); }
.mock-main { padding:18px; overflow:hidden; }
.mock-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.mock-stat { background:var(--surface-1); border:1px solid var(--line); border-radius:11px; padding:12px; }
.mock-stat-lbl { font-size:9px; color:var(--text-3); }
.mock-stat-val { font-size:20px; font-weight:600; margin-top:4px; }
.mock-tl { background:var(--surface-1); border:1px solid var(--line); border-radius:13px; height:130px; position:relative; overflow:hidden; }
.mock-tl svg { position:absolute; inset:0; width:100%; height:100%; }
.teaser-bottom { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 10px 6px; flex-wrap:wrap; }
.teaser-note { font-size:14px; color:var(--text-2); }
.teaser-note b { color:var(--text); }

/* =============================================================
   34. RESPONSIVE
   ============================================================= */
/* =============================================================
   35. MOBILE SIDEBAR DRAWER
   ============================================================= */
.sidebar-backdrop {
  display:none; position:fixed; inset:0; z-index:49;
  background:rgba(7,6,13,.7); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s;
}
.sidebar-backdrop.open { opacity:1; }

.hamburger {
  display:none; width:40px; height:40px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--text-2); cursor:pointer; place-items:center;
  flex-shrink:0; transition:.2s;
}
.hamburger:hover { color:var(--text); border-color:var(--line-strong); }
.hamburger svg   { width:20px; height:20px; }

@media (max-width:1100px) {
  .stat-grid        { grid-template-columns:repeat(2,1fr); }
  .ch-stat-grid     { grid-template-columns:repeat(3,1fr); }
  .tag-grid         { grid-template-columns:repeat(2,1fr); }
  .tl-stage         { grid-template-columns:1fr; }
  .app              { grid-template-columns:1fr; }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position:fixed; inset:0 auto 0 0; z-index:50;
    width:260px; transform:translateX(-100%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    box-shadow:8px 0 40px rgba(0,0,0,.5);
    border-right:1px solid var(--line-strong);
  }
  .sidebar.open     { transform:translateX(0); }
  .sidebar-backdrop { display:grid; place-items:start; }
  .hamburger        { display:grid; }
}
@media (max-width:800px) {
  .channel-grid     { grid-template-columns:1fr 1fr; }
  .rcard-stats      { grid-template-columns:repeat(2,1fr); }
  .rcard-row        { grid-template-columns:1fr; }
  .compare-grid     { grid-template-columns:1fr; }
  .ch-stat-grid     { grid-template-columns:repeat(2,1fr); }
  .ch-hero-inner    { flex-direction:column; align-items:flex-start; }
  .vod-grid         { grid-template-columns:repeat(2,1fr); }
  .locked-items     { grid-template-columns:repeat(2,1fr); }
  .topnav-links     { display:none; }
}
@media (max-width:540px) {
  .wrap, .wrap-lg, .wrap-sm { padding:0 16px; }
  .channel-grid     { grid-template-columns:1fr; }
  .ch-stat-grid     { grid-template-columns:repeat(2,1fr); }
  .vod-grid         { grid-template-columns:1fr; }
  .tag-grid         { grid-template-columns:1fr; }
  .stat-grid        { grid-template-columns:1fr; }
  .compare-grid     { grid-template-columns:1fr; }
}