/* ─── RESET & BASE ─────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;transition:background .3s,color .3s;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1;
  line-height:1.6;
  font-size:15px;
  letter-spacing:-0.01em;
}
button{cursor:pointer;font-family:inherit;border:none;outline:none}
input,textarea,select{font-family:inherit;outline:none}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ─── PROFESSIONAL TYPOGRAPHY SYSTEM ───────────────────── */
h1,h2,h3,h4,h5,h6{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.03em;
  color:var(--text);
}
h1{font-size:clamp(32px,5vw,64px);font-weight:800;letter-spacing:-0.04em}
h2{font-size:clamp(22px,3vw,36px);font-weight:700;letter-spacing:-0.03em}
h3{font-size:clamp(18px,2.5vw,24px);font-weight:700;letter-spacing:-0.02em}
h4{font-size:16px;font-weight:600;letter-spacing:-0.01em}
p{line-height:1.7;letter-spacing:-0.01em}
strong{font-weight:700}
small{font-size:12px;letter-spacing:0.02em}
code{
  font-family:'JetBrains Mono',monospace;
  font-size:0.875em;
  font-feature-settings:'zero' 1;
  letter-spacing:-0.02em;
}
pre{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  line-height:1.75;
  letter-spacing:-0.02em;
}
/* Mono label utility */
.mono{
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.02em;
}
/* Display heading utility */
.display{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1.05;
}
/* Caption / overline utility */
.overline{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}
/* Body prose utility */
.prose{
  font-size:15px;
  line-height:1.75;
  letter-spacing:-0.01em;
  color:var(--text2);
}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}

/* ─── DESIGN TOKENS ────────────────────────────────── */
:root{
  --bg:#fafafa;
  --bg2:#ffffff;
  --bg3:#f4f4f6;
  --bg4:#ededf0;
  --text:#0a0a0f;
  --text2:#4a4a5a;
  --text3:#9898a8;
  --border:#e2e2ea;
  --accent:#5b4cf5;
  --accent2:#8b5cf6;
  --accent3:#06b6d4;
  --green:#10b981;
  --amber:#f59e0b;
  --red:#ef4444;
  /* SIGNATURE 3-COLOR PALETTE (purple=progress, amber=streak/time, mint=mastery) */
  --sig-purple:#5b4cf5;
  --sig-amber:#f59e0b;
  --sig-mint:#10b981;
  --sig-purple-soft:rgba(91,76,245,.1);
  --sig-amber-soft:rgba(245,158,11,.1);
  --sig-mint-soft:rgba(16,185,129,.1);
  --shadow:0 1px 12px rgba(0,0,0,.06),0 4px 24px rgba(91,76,245,.06);
  --shadow-lg:0 8px 48px rgba(0,0,0,.1),0 2px 8px rgba(91,76,245,.08);
  --shadow-xl:0 24px 80px rgba(0,0,0,.14),0 4px 16px rgba(91,76,245,.12);
  --radius:20px;
  --radius-sm:14px;
  --radius-xs:9px;
  --glow:0 0 40px rgba(91,76,245,.25);
  /* App-surface tokens (Practice/Mock/Dashboard/Coding/Copilot/Agent/etc.) */
  --surface-1:#f5f5f7;
  --surface-2:#ffffff;
  --surface-3:#f8f8fa;
  --surface-4:#eeeef2;
  --surface-border:rgba(10,10,15,.09);
  --surface-border-strong:rgba(10,10,15,.14);
  --surface-text:#0a0a0f;
  --surface-text-muted:rgba(10,10,15,.62);
  --surface-text-faint:rgba(10,10,15,.42);
  --surface-text-strong:#0a0a0f;
  --header-bg:#ffffff;
  --header-text:#0a0a0f;
  --header-text-muted:rgba(10,10,15,.55);
  --header-border:rgba(10,10,15,.09);
  /* Theme-aware overlays (hover/active/subtle cards) */
  --overlay-soft:rgba(10,10,15,.04);
  --overlay:rgba(10,10,15,.07);
  --overlay-strong:rgba(10,10,15,.12);
}
/* Ocean — deep navy theme with brighter text (between dark and light) */
.ocean{
  --bg:#0a1929;
  --bg2:#12263a;
  --bg3:#1a3550;
  --bg4:#254566;
  --text:#e6edf3;
  --text2:rgba(230,237,243,.7);
  --text3:rgba(230,237,243,.45);
  --border:#2a4a6a;
  --shadow:0 1px 12px rgba(0,10,30,.5),0 4px 24px rgba(91,76,245,.1);
  --shadow-lg:0 8px 48px rgba(0,10,30,.6),0 2px 8px rgba(91,76,245,.15);
  --shadow-xl:0 24px 80px rgba(0,10,30,.7),0 4px 16px rgba(91,76,245,.2);
  --glow:0 0 60px rgba(6,182,212,.25);
  /* App surfaces */
  --surface-1:#0a1929;
  --surface-2:#12263a;
  --surface-3:#1a3550;
  --surface-4:#254566;
  --surface-border:rgba(230,237,243,.12);
  --surface-border-strong:rgba(230,237,243,.2);
  --surface-text:#e6edf3;
  --surface-text-muted:rgba(230,237,243,.65);
  --surface-text-faint:rgba(230,237,243,.4);
  --surface-text-strong:#ffffff;
  --header-bg:#0f2032;
  --header-text:#e6edf3;
  --header-text-muted:rgba(230,237,243,.6);
  --header-border:rgba(230,237,243,.1);
  --overlay-soft:rgba(230,237,243,.05);
  --overlay:rgba(230,237,243,.09);
  --overlay-strong:rgba(230,237,243,.16);
}
/* Ocean-tinted mesh glow (cyan/teal radials) */
.ocean body::before,
.ocean::before{
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%,rgba(6,182,212,.15) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(45,91,180,.14) 0%,transparent 70%),
    radial-gradient(ellipse 40% 60% at 60% 30%,rgba(91,76,245,.1) 0%,transparent 70%);
}

/* Sepia — warm aged-paper theme (easy on eyes for long study sessions) */
.sepia{
  --bg:#f4ecd8;
  --bg2:#faf4e4;
  --bg3:#ede2c5;
  --bg4:#e2d5b3;
  --text:#3d2f1f;
  --text2:#6b5940;
  --text3:#8a7762;
  --border:#d6c9ad;
  --shadow:0 1px 12px rgba(92,69,35,.08),0 4px 24px rgba(91,76,245,.05);
  --shadow-lg:0 8px 48px rgba(92,69,35,.12),0 2px 8px rgba(91,76,245,.06);
  --shadow-xl:0 24px 80px rgba(92,69,35,.18),0 4px 16px rgba(91,76,245,.08);
  --glow:0 0 40px rgba(91,76,245,.2);
  /* App surfaces */
  --surface-1:#f4ecd8;
  --surface-2:#faf4e4;
  --surface-3:#ede2c5;
  --surface-4:#e2d5b3;
  --surface-border:rgba(60,45,30,.14);
  --surface-border-strong:rgba(60,45,30,.22);
  --surface-text:#3d2f1f;
  --surface-text-muted:rgba(60,45,30,.66);
  --surface-text-faint:rgba(60,45,30,.45);
  --surface-text-strong:#2d1f0f;
  --header-bg:#ebe0c4;
  --header-text:#3d2f1f;
  --header-text-muted:rgba(60,45,30,.6);
  --header-border:rgba(60,45,30,.16);
  --overlay-soft:rgba(60,45,30,.04);
  --overlay:rgba(60,45,30,.08);
  --overlay-strong:rgba(60,45,30,.14);
}
/* Softer sepia mesh-background glow */
.sepia body::before,
.sepia::before{
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%,rgba(190,130,70,.08) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(140,100,50,.06) 0%,transparent 70%),
    radial-gradient(ellipse 40% 60% at 60% 30%,rgba(91,76,245,.04) 0%,transparent 70%);
}

.dark{
  --bg:#08090f;
  --bg2:#0f1018;
  --bg3:#13141e;
  --bg4:#1a1b28;
  --text:#f0f0f8;
  --text2:#8888a8;
  --text3:#44445a;
  --border:#1e1f30;
  --shadow:0 1px 12px rgba(0,0,0,.5),0 4px 24px rgba(91,76,245,.1);
  --shadow-lg:0 8px 48px rgba(0,0,0,.6),0 2px 8px rgba(91,76,245,.15);
  --shadow-xl:0 24px 80px rgba(0,0,0,.7),0 4px 16px rgba(91,76,245,.2);
  --glow:0 0 60px rgba(91,76,245,.3);
  --surface-1:#08090f;
  --surface-2:#0f1018;
  --surface-3:#13141e;
  --surface-4:#1a1b28;
  --surface-border:var(--surface-border);
  --surface-border-strong:var(--surface-border-strong);
  --surface-text:#f0f0f8;
  --surface-text-muted:rgba(255,255,255,.6);
  --surface-text-faint:rgba(255,255,255,.35);
  --surface-text-strong:#ffffff;
  --header-bg:#0e0e14;
  --header-text:#ffffff;
  --header-text-muted:rgba(255,255,255,.6);
  --header-border:var(--surface-border);
  /* Theme-aware overlays — darker translucency inverts to light */
  --overlay-soft:var(--surface-border);
  --overlay:var(--surface-border);
  --overlay-strong:var(--surface-border-strong);
}

/* ─── MESH BACKGROUND ──────────────────────────────── */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%,rgba(91,76,245,.07) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(6,182,212,.06) 0%,transparent 70%),
    radial-gradient(ellipse 40% 60% at 60% 30%,rgba(139,92,246,.04) 0%,transparent 70%);
  pointer-events:none;
}
.dark body::before,
.dark::before{
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%,rgba(91,76,245,.15) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(6,182,212,.1) 0%,transparent 70%),
    radial-gradient(ellipse 40% 60% at 60% 30%,rgba(139,92,246,.08) 0%,transparent 70%);
}

/* ─── ANIMATIONS ───────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes slideIn{from{transform:translateX(-10px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(.94)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes timerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes glow-pulse{0%,100%{box-shadow:var(--glow),var(--shadow)}50%{box-shadow:0 0 60px rgba(91,76,245,.4),var(--shadow-lg)}}

/* ─── LAYOUT ───────────────────────────────────────── */
.app{display:flex;flex-direction:column;min-height:100vh}

.header{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);
  border-bottom:1px solid var(--surface-border);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  padding:0 32px;height:68px;flex-shrink:0;
  transition:all .3s;
  gap:16px;
}
.dark .header{background:var(--header-bg)}
body:not(.dark) .header{background:var(--header-bg)}

.logo-btn{
  display:flex;align-items:center;gap:11px;
  background:none;border:none;cursor:pointer;padding:0;
  text-decoration:none;color:inherit;
}
.logo-mark{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  box-shadow:0 4px 14px rgba(91,76,245,.5);
  transition:transform .2s;
}
.logo-btn:hover .logo-mark{transform:scale(1.08) rotate(-3deg)}
/* Legacy emoji logo support (kept harmlessly in case any cached HTML still uses it) */
.logo-icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  box-shadow:0 4px 14px rgba(91,76,245,.5);
}
.logo-wordmark{
  height:24px;width:auto;display:block;
  /* Subtle filter so the dark wordmark adapts to dark themes if you ever add one */
  transition:transform .15s ease;
}
.logo-btn:hover .logo-wordmark{transform:translateY(-1px)}
.logo-version{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;font-weight:600;letter-spacing:.5px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:var(--surface-text-strong);padding:2px 7px;border-radius:20px;
  -webkit-text-fill-color:var(--surface-text-strong);margin-left:2px;
  text-transform:uppercase;
}

/* ── CENTER NAV ─────────────────────────────────────── */
.nav-area{display:flex;gap:2px;align-items:center}
.nav-center{
  display:flex;align-items:center;justify-content:center;gap:2px;
  background:var(--overlay);
  border:1px solid var(--surface-border);
  border-radius:14px;padding:5px;
  width:fit-content;margin:0 auto;
}
.nav-btn{
  background:none;border:none;padding:7px 18px;border-radius:10px;
  font-size:13px;font-weight:600;color:var(--surface-text-muted);
  transition:all .18s;white-space:nowrap;letter-spacing:.01em;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.nav-btn:hover{background:var(--overlay);color:var(--surface-text-strong)}
.nav-btn.active{background:var(--overlay);color:var(--surface-text-strong);font-weight:600}

/* ── RIGHT SIDE ITEMS ───────────────────────────────── */
.nav-right{display:flex;align-items:center;gap:10px;justify-content:flex-end}

.ai-live-pill{
  display:flex;align-items:center;gap:7px;
  background:rgba(91,76,245,.15);
  border:1px solid rgba(91,76,245,.35);
  border-radius:20px;padding:6px 14px;
  font-size:12px;font-weight:600;color:#a78bfa;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.ai-live-pill:hover{background:rgba(91,76,245,.25);border-color:rgba(91,76,245,.5)}
.ai-live-dot{
  width:7px;height:7px;border-radius:50%;
  background:#a78bfa;flex-shrink:0;
  box-shadow:0 0 6px #a78bfa;
  animation:pulse 2s ease-in-out infinite;
}

.settings-btn{
  width:36px;height:36px;border-radius:10px;
  background:var(--overlay);border:1px solid var(--surface-border);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;transition:all .2s;color:var(--surface-text-muted);
}
.settings-btn:hover{background:var(--overlay);color:var(--surface-text-strong)}

.start-btn{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:var(--surface-text-strong);padding:9px 20px;border-radius:10px;
  font-size:13px;font-weight:700;border:none;cursor:pointer;
  transition:all .2s;white-space:nowrap;font-family:inherit;
  box-shadow:0 4px 16px rgba(91,76,245,.45);
  letter-spacing:-.1px;
}
.start-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 24px rgba(91,76,245,.55)}
.start-btn:active{transform:scale(.97)}

/* ── Theme toggle button (header + drawer) ──────────── */
.theme-btn{
  width:36px;height:36px;border-radius:10px;
  background:var(--overlay);border:1px solid var(--surface-border);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;transition:all .2s;
  color:var(--surface-text-strong);flex-shrink:0;padding:0;line-height:1;
  font-family:inherit;
}
.theme-btn:hover{background:var(--overlay);transform:rotate(20deg)}
.theme-btn:active{transform:scale(.95)}

.main{flex:1}

/* Site footer (legal links) */
.site-footer{
  border-top:1px solid var(--surface-border);
  background:var(--surface-2);
  padding:18px 24px;margin-top:40px;
}
.site-footer-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.site-footer-brand{
  font-size:12px;color:var(--surface-text-faint);font-weight:600;
}
.site-footer-nav{display:flex;gap:18px;flex-wrap:wrap}
.site-footer-nav a{
  font-size:12px;color:var(--surface-text-muted);font-weight:600;
  text-decoration:none;transition:color .15s;
}
.site-footer-nav a:hover{color:#a78bfa}
.page{
  max-width:900px;margin:0 auto;padding:40px 24px 64px;
  animation:fadeUp .35s ease;
}
.page-narrow{max-width:700px;margin:0 auto;padding:40px 24px 64px;animation:fadeUp .35s ease}
.page-wide{max-width:1040px;margin:0 auto;padding:40px 24px 64px;animation:fadeUp .35s ease}

/* ─── CARDS ─────────────────────────────────────────── */
.card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s,transform .2s;
}
.card-hover:hover{border-color:rgba(91,76,245,.3);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.cp{padding:28px}
.cp-sm{padding:20px 24px}
.cp-xs{padding:14px 18px}

/* ─── TAGS / BADGES ─────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:0.04em;
  font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;
}
.tag-easy{color:#059669;background:rgba(16,185,129,.12)}.dark .tag-easy{color:#34d399;background:rgba(16,185,129,.15)}
.tag-med{color:#d97706;background:rgba(245,158,11,.12)}.dark .tag-med{color:#fbbf24;background:rgba(245,158,11,.15)}
.tag-hard{color:#dc2626;background:rgba(239,68,68,.12)}.dark .tag-hard{color:#f87171;background:rgba(239,68,68,.15)}
.tag-lang{color:#5b4cf5;background:rgba(91,76,245,.1)}.dark .tag-lang{color:#a78bfa;background:rgba(91,76,245,.18)}
.tag-neutral{color:var(--text2);background:var(--bg3);border:1px solid var(--border)}
.tag-plat{color:var(--surface-text-strong);padding:3px 11px;border-radius:20px;font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace}

/* ─── BUTTONS ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--radius-sm);font-weight:700;
  transition:all .2s;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  letter-spacing:-0.01em;
}
.btn-primary{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:var(--surface-text-strong);padding:13px 30px;font-size:14px;
  box-shadow:0 4px 20px rgba(91,76,245,.4);
  letter-spacing:-0.01em;
}
.btn-primary:hover{opacity:.92;transform:translateY(-2px);box-shadow:0 8px 32px rgba(91,76,245,.5)}
.btn-primary:active{transform:scale(.98);box-shadow:none}
.btn-secondary{
  background:var(--bg3);border:1.5px solid var(--border);
  color:var(--text2);padding:11px 24px;font-size:13px;font-weight:600;
}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:rgba(91,76,245,.05)}
.btn-danger{background:rgba(239,68,68,.1);color:#dc2626;padding:9px 18px;font-size:13px;font-weight:600;border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:rgba(239,68,68,.18)}
.btn-sm{padding:7px 16px;font-size:12px;font-weight:600;border-radius:var(--radius-xs);letter-spacing:0}
.btn-pill{
  padding:6px 18px;border-radius:30px;font-size:12px;font-weight:600;
  border:1.5px solid var(--border);cursor:pointer;transition:all .15s;
  font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:0;
}
.btn-pill.on{background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:var(--surface-text-strong);border-color:transparent;box-shadow:0 2px 12px rgba(91,76,245,.4)}
.btn-pill.off{background:var(--bg3);color:var(--text2)}
.btn-pill.off:hover{border-color:var(--accent);color:var(--accent)}
.btn-icon{
  width:38px;height:38px;border-radius:var(--radius-xs);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;background:var(--bg3);border:1px solid var(--border);
  transition:all .15s;
}
.btn-icon:hover{background:rgba(91,76,245,.08);border-color:var(--accent)}

/* ─── FORM ELEMENTS ─────────────────────────────────── */
.input{
  width:100%;background:var(--bg3);border:1.5px solid var(--border);
  border-radius:var(--radius-xs);padding:12px 16px;
  font-size:14px;color:var(--text);
  transition:border-color .15s;resize:none;
}
.input:focus{border-color:var(--accent)}
input[type=range]{accent-color:#5b4cf5;width:100%}

/* ─── PROGRESS ──────────────────────────────────────── */
.prog-bar{height:4px;background:var(--border);border-radius:4px;overflow:hidden}
.prog-fill{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,#5b4cf5,#8b5cf6,#06b6d4);
  background-size:200% auto;
  animation:shimmer 2s linear infinite;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* ─── HOME ──────────────────────────────────────────── */
.hero{text-align:center;padding:24px 0 56px;position:relative}

/* ─── EDITORIAL HERO (Home) ────────────────────────── */
.hero-editorial{
  text-align:left;padding:24px 0 48px;position:relative;
}
.hero-masthead{
  display:flex;align-items:center;gap:14px;margin-bottom:34px;
  padding-bottom:14px;border-bottom:1px solid var(--surface-border-strong);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--surface-text-muted);flex-wrap:wrap;
}
.hero-vol{color:var(--sig-purple)}
.hero-masthead-title{color:var(--surface-text-strong);letter-spacing:0.06em;font-weight:800}
.hero-masthead-divider{
  flex:0 0 auto;width:16px;height:1px;background:var(--surface-border-strong);
}
.hero-masthead-spacer{flex:1}
.hero-masthead-live{
  display:inline-flex;align-items:center;gap:6px;color:var(--sig-mint);
}
.hero-masthead-live::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--sig-mint);
  box-shadow:0 0 8px var(--sig-mint);animation:pulse 2s ease-in-out infinite;
}

.hero-display{
  font-family:'Outfit',sans-serif;
  font-size:clamp(44px, 9vw, 104px);
  font-weight:900;
  line-height:0.96;
  letter-spacing:-0.05em;
  margin:0 0 28px;
  color:var(--surface-text-strong);
}
.h-line{display:block}
.h-italic{
  display:block;
  font-family:'Fraunces',serif;
  font-weight:400;font-style:italic;
  font-variation-settings:"SOFT" 80, "opsz" 144;
  font-size:.95em;
  letter-spacing:-0.02em;
  color:var(--surface-text-muted);
}
.h-dot{color:var(--sig-purple)}
.h-grad{
  display:block;
  background:linear-gradient(110deg,var(--sig-purple) 0%,#8b5cf6 45%,var(--sig-amber) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  letter-spacing:-0.04em;
  animation:heroGrad 8s ease-in-out infinite;
  background-size:200% 100%;
}
@keyframes heroGrad{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.hero-pullquote{
  font-family:'Fraunces',serif;
  font-size:clamp(17px, 1.9vw, 21px);
  font-weight:400;font-style:italic;
  line-height:1.55;
  letter-spacing:-0.005em;
  color:var(--surface-text-muted);
  max-width:620px;
  margin:0 0 30px;
  padding:4px 0 4px 18px;
  border-left:3px solid var(--sig-purple);
}
.hero-pullquote .quote-mark{
  font-family:'Fraunces',serif;font-weight:700;
  color:var(--sig-purple);font-size:1.3em;
  vertical-align:-0.1em;margin:0 1px;
}

.hero-editorial .hero-cta{
  justify-content:flex-start;
}

.sig-strip{
  display:flex;gap:3px;margin:28px 0 0;
  max-width:240px;
}
.sig-bar{
  flex:1;height:4px;border-radius:3px;
  transition:transform .3s,box-shadow .3s;
}
.sig-bar-purple{background:var(--sig-purple);box-shadow:0 0 12px rgba(91,76,245,.4)}
.sig-bar-amber{background:var(--sig-amber);box-shadow:0 0 12px rgba(245,158,11,.4)}
.sig-bar-mint{background:var(--sig-mint);box-shadow:0 0 12px rgba(16,185,129,.4)}
.sig-strip:hover .sig-bar{transform:scaleY(1.6)}

.hero-trust-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:28px;padding-top:22px;
  border-top:1px solid var(--surface-border);
}
.hero-trust-lbl{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--surface-text-faint);margin-right:6px;
}
.hero-trust-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;background:var(--surface-2);
  border:1px solid var(--surface-border);border-radius:20px;
  font-size:12px;font-weight:500;color:var(--surface-text-muted);
  transition:all .15s;
}
.hero-trust-chip:hover{
  border-color:var(--sig-purple);color:var(--surface-text);
}

/* Mobile: stack masthead and shrink type */
@media (max-width:640px){
  .hero-masthead{font-size:9.5px;gap:10px}
  .hero-masthead-divider{width:10px}
  .hero-display{font-size:clamp(36px,11vw,58px)}
  .hero-pullquote{font-size:15px;padding-left:14px}
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(91,76,245,.08);
  border:1px solid rgba(91,76,245,.2);
  border-radius:30px;padding:8px 20px;
  font-size:11px;font-weight:700;color:var(--accent);
  margin-bottom:32px;animation:fadeIn .6s ease;
  letter-spacing:.08em;font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;
}
.hero h1{
  font-family:'Outfit',sans-serif;
  font-size:clamp(36px,6vw,72px);font-weight:800;
  line-height:1.04;margin-bottom:22px;letter-spacing:-1.5px;
  animation:fadeUp .5s ease .1s both;
}
.hero h1 .grad{
  background:linear-gradient(135deg,#5b4cf5 0%,#8b5cf6 40%,#06b6d4 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;
  animation:shimmer 4s linear infinite;
}
.hero p{
  font-size:17px;color:var(--text2);max-width:540px;
  margin:0 auto 44px;line-height:1.75;font-weight:400;
  animation:fadeUp .5s ease .2s both;
  letter-spacing:-0.01em;
}
.hero-cta{animation:fadeUp .5s ease .3s both;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* floating orbs behind hero */
.hero::before,.hero::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
}
.hero::before{
  width:300px;height:300px;top:-60px;left:50%;transform:translateX(-160%);
  background:radial-gradient(circle,rgba(91,76,245,.12) 0%,transparent 70%);
}
.hero::after{
  width:250px;height:250px;top:0;left:50%;transform:translateX(60%);
  background:radial-gradient(circle,rgba(6,182,212,.1) 0%,transparent 70%);
}

.stat-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;
  margin-bottom:40px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.stat-strip::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(91,76,245,.03),rgba(6,182,212,.03));
  pointer-events:none;
}
.stat-item{text-align:center}
.stat-val{
  font-family:'Outfit',sans-serif;
  font-size:34px;font-weight:800;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;letter-spacing:-1px;
}
.stat-lbl{font-size:11px;color:var(--text3);margin-top:6px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-family:'JetBrains Mono',monospace}

.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.mode-card{
  background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:28px;text-align:left;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.mode-card::before{
  content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(135deg,rgba(91,76,245,.06),rgba(139,92,246,.04));
  transition:opacity .25s;
}
.mode-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.mode-card:hover::before{opacity:1}
.mode-icon{font-size:36px;line-height:1;margin-bottom:4px;animation:float 3s ease-in-out infinite}
.mode-card:nth-child(2) .mode-icon{animation-delay:.5s}
.mode-card:nth-child(3) .mode-icon{animation-delay:1s}
.mode-card:nth-child(4) .mode-icon{animation-delay:1.5s}
.mode-title{font-family:'Outfit',sans-serif;font-size:17px;font-weight:700;color:var(--text);letter-spacing:-0.5px;line-height:1.2}
.mode-desc{font-size:13px;color:var(--text2);line-height:1.7;font-weight:400;letter-spacing:-0.01em}
.mode-footer{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;border-top:1px solid var(--border);
}
.mode-tag{font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.mode-arrow{
  font-size:18px;font-weight:800;color:var(--accent);
  transition:transform .2s;
}
.mode-card:hover .mode-arrow{transform:translateX(4px)}

.features-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;
}
.feature-item{
  text-align:center;padding:24px 16px;
  background:var(--bg2);border-radius:var(--radius);
  border:1px solid var(--border);box-shadow:var(--shadow);
  transition:all .2s;position:relative;overflow:hidden;
}
.feature-item::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(91,76,245,.04),transparent);
  opacity:0;transition:opacity .2s;
}
.feature-item:hover{border-color:rgba(91,76,245,.3);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.feature-item:hover::before{opacity:1}
.feature-num{font-family:'Outfit',sans-serif;font-size:34px;font-weight:800;background:linear-gradient(135deg,#5b4cf5,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1.5px;line-height:1}
.feature-lbl{font-size:10.5px;color:var(--text3);margin-top:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-family:'JetBrains Mono',monospace}

/* ─── PRACTICE LAYOUT ───────────────────────────────── */
.practice-wrap{
  display:flex;min-height:calc(100vh - 68px);background:var(--surface-1);
}

/* LEFT SIDEBAR */
.prac-sidebar{
  width:220px;flex-shrink:0;
  background:var(--surface-2);
  padding:20px 16px;
  display:flex;flex-direction:column;gap:18px;
  /* Sticky so filters stay in view while main content scrolls */
  position:sticky;top:68px;align-self:flex-start;
  height:calc(100vh - 68px);overflow-y:auto;
}

/* Draggable resizer between sidebar and main */
.prac-resizer{
  width:5px;flex-shrink:0;cursor:col-resize;
  background:var(--overlay-soft);
  transition:background .15s;
  position:sticky;top:68px;align-self:flex-start;
  height:calc(100vh - 68px);z-index:5;
}
.prac-resizer:hover{background:rgba(91,76,245,.4)}
.prac-resizer.dragging{background:rgba(91,76,245,.7)}
.prac-resizer::after{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:3px;height:36px;border-radius:3px;
  background:var(--overlay-strong);
  pointer-events:none;transition:background .15s;
}
.prac-resizer:hover::after{background:rgba(167,139,250,.7)}
.prac-progress-ring{
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:14px;padding:16px 14px 14px;text-align:center;
}
.prac-ring-wrap{
  position:relative;width:108px;height:108px;margin:0 auto 10px;
}
.prac-ring-svg{
  display:block;width:100%;height:100%;
  filter:drop-shadow(0 4px 16px rgba(91,76,245,.25));
}
.prac-ring-center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
.prac-ring-label{
  font-size:26px;font-weight:800;
  color:var(--surface-text-strong);
  font-family:'Outfit',sans-serif;
  line-height:1;letter-spacing:-0.04em;
}
.prac-ring-eyebrow{
  font-size:9px;font-weight:700;
  color:var(--surface-text-faint);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.14em;
  margin-top:4px;
}
.prac-ring-sub{
  font-size:11px;color:var(--surface-text-muted);
  margin-top:2px;letter-spacing:-.01em;
}

.prac-streak{
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:10px;padding:12px 14px;
  display:flex;align-items:center;gap:10px;
}
.prac-streak-num{font-size:13px;font-weight:700;color:var(--surface-text-strong)}
.prac-streak-lbl{font-size:11px;color:var(--surface-text-muted);margin-top:1px}

.prac-filter-section{
  display:flex;flex-direction:column;gap:10px;
}
.prac-filter-section + .prac-filter-section{
  padding-top:14px;margin-top:4px;
  border-top:1px solid var(--surface-border);
}
.prac-filter-label{
  font-size:11px;font-weight:700;color:var(--surface-text-muted);
  text-transform:uppercase;letter-spacing:.08em;
  font-family:'JetBrains Mono',monospace;padding:0 2px;
}
.prac-chips{display:flex;flex-wrap:wrap;gap:6px}
.prac-chip{
  padding:6px 13px;border-radius:20px;font-size:12px;font-weight:500;
  border:1px solid var(--surface-border-strong);background:transparent;
  color:var(--surface-text);cursor:pointer;transition:all .15s;
  font-family:inherit;white-space:nowrap;line-height:1.2;
}
.prac-chip:hover{
  border-color:rgba(91,76,245,.55);color:var(--surface-text-strong);
  background:rgba(91,76,245,.08);
}
.prac-chip.active{
  background:rgba(91,76,245,.22);border-color:rgba(91,76,245,.6);
  color:#c4b5fd;font-weight:600;
}
.prac-chip.active-easy{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:#34d399}
.prac-chip.active-medium{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4);color:#fbbf24}
.prac-chip.active-hard{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#f87171}

/* MAIN QUESTION PANEL */
.prac-main{
  flex:1;display:flex;flex-direction:column;
  padding:28px 36px;overflow-y:auto;background:var(--surface-1);
}
.prac-topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;
}
.prac-trial-bar{
  margin-bottom:18px;padding:12px 16px;border-radius:10px;
  background:linear-gradient(135deg,rgba(91,76,245,.08),rgba(139,92,246,.04));
  border:1px solid rgba(91,76,245,.22);
}
.prac-trial-bar.warn{
  background:linear-gradient(135deg,rgba(251,113,133,.1),rgba(251,113,133,.04));
  border-color:rgba(251,113,133,.3);
}
.prac-trial-bar-info{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:8px;flex-wrap:wrap;
}
.prac-trial-bar-label{font-size:13px;color:var(--surface-text-muted);line-height:1.4}
.prac-trial-bar-label strong{color:var(--surface-text-strong);font-weight:700}
.prac-trial-bar.warn .prac-trial-bar-label strong{color:#fb7185}
.prac-trial-bar-cta{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;
  border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:12px;
  padding:7px 14px;border-radius:8px;transition:transform .15s, opacity .15s;
  box-shadow:0 2px 10px rgba(91,76,245,.3);
}
.prac-trial-bar-cta:hover{transform:translateY(-1px);opacity:.92}
.prac-trial-bar-track{
  height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;
}
.prac-trial-bar-fill{
  height:100%;background:linear-gradient(90deg,#5b4cf5,#8b5cf6);
  transition:width .4s ease;
}
.prac-trial-bar.warn .prac-trial-bar-fill{
  background:linear-gradient(90deg,#fb7185,#f87171);
}
.prac-count{font-size:13px;color:var(--surface-text-faint);font-family:'JetBrains Mono',monospace}
.prac-nav{display:flex;align-items:center;gap:8px}
.prac-nav-btn{
  width:32px;height:32px;border-radius:8px;
  background:var(--surface-3);border:1px solid var(--surface-border);
  color:var(--surface-text-muted);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.prac-nav-btn:hover{background:var(--surface-4);color:var(--surface-text-strong)}
.prac-nav-idx{
  font-size:13px;color:var(--surface-text-muted);
  font-family:'JetBrains Mono',monospace;padding:0 6px;
}
.prac-shuffle{
  width:32px;height:32px;border-radius:8px;
  background:var(--surface-3);border:1px solid var(--surface-border);
  color:var(--surface-text-muted);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.prac-shuffle:hover{background:var(--surface-4);color:var(--surface-text-strong)}

/* QUESTION CARD */
.prac-q-card{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:16px;padding:28px;margin-bottom:20px;
}
.prac-q-meta{
  display:flex;align-items:center;gap:8px;margin-bottom:20px;
  font-size:11px;font-family:'JetBrains Mono',monospace;
}
.prac-q-num{color:var(--surface-text-faint)}
.prac-q-badge{
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;
}
.prac-q-badge.easy{background:rgba(16,185,129,.15);color:#34d399}
.prac-q-badge.medium{background:rgba(245,158,11,.15);color:#fbbf24}
.prac-q-badge.hard{background:rgba(239,68,68,.15);color:#f87171}
.prac-q-badge.topic{background:rgba(91,76,245,.15);color:#a78bfa}
.prac-q-badge.role{background:rgba(6,182,212,.12);color:#67e8f9}
.prac-q-bookmark{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:var(--surface-text-faint);font-size:18px;transition:all .2s;padding:0;
}
.prac-q-bookmark:hover{color:#fbbf24}
.prac-q-bookmark.bmactive{color:#fbbf24}
.prac-q-text{
  font-size:16px;font-weight:600;color:var(--surface-text-strong);line-height:1.65;
  letter-spacing:-0.02em;
}

/* OPTIONS */
.prac-opts{display:flex;flex-direction:column;gap:10px;margin-top:0}
.prac-opt{
  display:flex;align-items:center;gap:14px;
  padding:15px 20px;border-radius:12px;
  border:1px solid var(--surface-border);background:transparent;
  cursor:pointer;transition:all .18s;text-align:left;width:100%;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.prac-opt:hover:not(:disabled){
  background:var(--overlay-soft);border-color:var(--surface-text-faint);
}
.prac-opt.correct{background:rgba(16,185,129,.12)!important;border-color:rgba(16,185,129,.4)!important}
.prac-opt.wrong{background:rgba(239,68,68,.1)!important;border-color:rgba(239,68,68,.35)!important}
.prac-opt.dim{opacity:.25;pointer-events:none}
.prac-opt-letter{
  width:30px;height:30px;border-radius:7px;
  background:var(--overlay);border:1px solid var(--surface-border-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--surface-text-muted);
  flex-shrink:0;font-family:'JetBrains Mono',monospace;
  transition:all .15s;letter-spacing:0;
}
.prac-opt.correct .prac-opt-letter{background:rgba(16,185,129,.3);border-color:rgba(16,185,129,.5);color:#34d399}
.prac-opt.wrong .prac-opt-letter{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4);color:#f87171}
.prac-opt-text{font-size:14px;color:var(--surface-text);font-weight:500;line-height:1.5;letter-spacing:-0.01em}
.prac-opt.correct .prac-opt-text{color:var(--surface-text-strong);font-weight:600}

/* EXPLANATION */
.prac-exp{
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:12px;padding:20px;margin-top:16px;
}
.prac-exp-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.prac-exp-tab{
  padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif;border:none;
  letter-spacing:.01em;
}
.prac-exp-tab.on{background:rgba(91,76,245,.3);color:#a78bfa;border:1px solid rgba(91,76,245,.4)}
.prac-exp-tab.off{background:var(--overlay);color:var(--surface-text-faint);border:1px solid transparent}
.prac-exp-tab.off:hover{color:var(--surface-text);background:var(--overlay)}
.prac-exp-text{font-size:14px;color:var(--surface-text-muted);line-height:1.82;letter-spacing:-0.01em}
.prac-fup{
  margin-top:12px;padding:12px 16px;border-radius:9px;
  background:rgba(91,76,245,.1);border:1px solid rgba(91,76,245,.2);
  font-size:13px;color:#a78bfa;line-height:1.65;letter-spacing:-0.01em;
}

/* BOTTOM NAV */
.prac-bottom{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:4px;
}
.prac-prev-btn{
  display:flex;align-items:center;gap:7px;
  padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;
  background:transparent;border:1px solid var(--surface-border-strong);
  color:var(--surface-text-muted);cursor:pointer;transition:all .2s;font-family:inherit;
}
.prac-prev-btn:hover{border-color:var(--surface-text-faint);color:var(--surface-text-strong)}
.prac-next-btn{
  display:flex;align-items:center;gap:7px;
  padding:10px 24px;border-radius:10px;font-size:13px;font-weight:700;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:var(--surface-text-strong);
  border:none;cursor:pointer;transition:all .2s;font-family:inherit;
  box-shadow:0 4px 16px rgba(91,76,245,.4);
}
.prac-next-btn:hover{opacity:.9;transform:translateY(-1px)}

/* ─── CONCEPTUAL (open-ended) QUESTIONS ──────────────── */
.prac-conceptual-prompt{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;border-radius:12px;
  background:linear-gradient(135deg,rgba(91,76,245,.08),rgba(139,92,246,.04));
  border:1px solid rgba(91,76,245,.22);
}
.prac-conceptual-prompt-icon{font-size:24px;line-height:1;flex-shrink:0;margin-top:2px}
.prac-conceptual-prompt-text{flex:1;font-size:14px;line-height:1.6;color:var(--surface-text-muted)}
.prac-conceptual-prompt-text strong{color:var(--surface-text-strong);font-weight:700}
.prac-reveal-btn{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  padding:10px 20px;border-radius:10px;font-size:13px;font-weight:700;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;
  border:none;cursor:pointer;transition:all .2s;font-family:inherit;
  box-shadow:0 4px 16px rgba(91,76,245,.4);
}
.prac-reveal-btn:hover{opacity:.92;transform:translateY(-1px)}

.prac-conceptual-answer{
  padding:20px 22px;border-radius:12px;
  background:rgba(91,76,245,.06);border:1px solid rgba(91,76,245,.2);
}
.prac-conceptual-head{
  font-size:13px;font-weight:700;color:#a78bfa;margin-bottom:12px;
  text-transform:uppercase;letter-spacing:.5px;
}
.prac-conceptual-body{
  font-size:14.5px;line-height:1.75;color:var(--surface-text-strong);
}
.prac-conceptual-body p{margin:0 0 12px 0}
.prac-conceptual-body p:last-child{margin-bottom:0}
.prac-conceptual-body strong{color:var(--surface-text-strong);font-weight:700}
.prac-conceptual-body em{font-style:italic;color:var(--surface-text-muted)}
.prac-md-list{margin:8px 0 12px 0;padding-left:24px}
.prac-md-list li{margin-bottom:6px;line-height:1.7}
.prac-md-code{
  background:rgba(91,76,245,.14);color:#c4b5fd;
  padding:2px 6px;border-radius:4px;font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.92em;
}
.prac-md-pre{
  background:#0d0d18;border:1px solid rgba(91,76,245,.22);border-radius:8px;
  padding:14px 16px;margin:10px 0;overflow-x:auto;
}
.prac-md-pre code{
  background:transparent;color:#e4e4f0;padding:0;
  font-family:'JetBrains Mono','Fira Code',monospace;font-size:13px;line-height:1.65;
  white-space:pre;
}
.prac-conceptual-source{
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(91,76,245,.18);
  font-size:12px;color:var(--surface-text-muted);
}
.prac-conceptual-source a{color:#a78bfa;text-decoration:none}
.prac-conceptual-source a:hover{text-decoration:underline}

@media(max-width:900px){
  .prac-sidebar{display:none}
  .prac-main{padding:20px 16px}
}

/* ─── SETUP ─────────────────────────────────────────── */
.filter-block{margin-bottom:22px}
.filter-label{
  font-size:11px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:9px;
}
.chip-group{display:flex;flex-wrap:wrap;gap:7px}
.avail-box{
  background:linear-gradient(135deg,rgba(91,76,245,.09),rgba(139,92,246,.05));
  border:1.5px solid rgba(91,76,245,.2);border-radius:var(--radius-sm);
  padding:16px 20px;display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.avail-count{font-weight:800;color:var(--accent);font-size:16px}
.avail-sub{font-size:12px;color:var(--text3);margin-top:2px}

/* ─── QUESTION ──────────────────────────────────────── */
.q-topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;gap:12px;
}
.q-text{
  font-size:17px;font-weight:700;color:var(--text);
  line-height:1.65;margin-bottom:22px;
}
.opt-btn{
  width:100%;text-align:left;padding:15px 18px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);background:var(--bg3);cursor:pointer;
  transition:all .15s;display:flex;align-items:flex-start;gap:13px;
  margin-bottom:10px;font-size:14px;font-weight:500;color:var(--text);
  line-height:1.55;font-family:inherit;
}
.opt-btn:hover:not(:disabled){
  border-color:#5b4cf5;background:rgba(91,76,245,.05);
  transform:translateX(2px);
}
.opt-btn.correct{border-color:#10b981!important;background:#f0fdf4!important;color:#166534!important}
.dark .opt-btn.correct{background:#052e16!important;color:#4ade80!important}
.opt-btn.wrong{border-color:#dc2626!important;background:#fee2e2!important;color:#991b1b!important}
.dark .opt-btn.wrong{background:#1c0606!important;color:#fca5a5!important}
.opt-btn.dim{opacity:.3;pointer-events:none}
.opt-badge{
  width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;
  background:var(--bg4);color:var(--text3);
  transition:all .15s;
}
.opt-badge.c{background:#10b981;color:var(--surface-text-strong)}
.opt-badge.w{background:#dc2626;color:var(--surface-text-strong)}

/* ─── EXPLANATION ───────────────────────────────────── */
.exp-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.exp-tab{
  padding:6px 15px;border-radius:20px;font-size:12px;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:inherit;
}
.exp-tab.on{background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:var(--surface-text-strong);box-shadow:0 2px 8px rgba(91,76,245,.3)}
.exp-tab.off{background:var(--bg4);color:var(--text2);border:1px solid var(--border)}
.exp-tab.off:hover{color:var(--accent);border-color:var(--accent)}
.exp-content{
  background:var(--bg3);border-radius:var(--radius-sm);
  padding:18px 20px;font-size:14px;color:var(--text2);
  line-height:1.8;animation:fadeIn .3s ease;
}
.follow-box{
  margin-top:14px;padding:13px 18px;border-radius:10px;
  background:rgba(91,76,245,.08);border:1px solid rgba(91,76,245,.15);
  font-size:13px;color:#5b4cf5;line-height:1.6;
}

/* ─── TIMER ─────────────────────────────────────────── */
.timer-badge{
  padding:8px 18px;border-radius:20px;font-weight:800;font-size:14px;
  font-family:'JetBrains Mono',monospace;border:1.5px solid var(--border);
  background:var(--bg3);color:var(--text2);transition:all .3s;
  min-width:88px;text-align:center;
}
.timer-badge.danger{
  border-color:#dc2626;background:#fee2e2;color:#dc2626;
  animation:timerPulse .6s ease infinite;
}
.dark .timer-badge.danger{background:#1c0606}

/* ─── PROGRESS RING ─────────────────────────────────── */
.ring-wrap{display:flex;align-items:center;justify-content:center}

/* ─── RESULTS ───────────────────────────────────────── */
.res-hero{text-align:center;margin-bottom:36px;animation:pop .4s ease}
.res-emoji{font-size:76px;line-height:1;margin-bottom:12px}
.res-grade{font-size:30px;font-weight:800;margin-bottom:6px}
.res-sub{font-size:15px;color:var(--text2)}
.res-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
.res-card{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:20px;text-align:center;
}
.res-val{font-size:26px;font-weight:800;line-height:1}
.res-lbl{font-size:11px;color:var(--text3);margin-top:5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.review-list{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin-bottom:28px;
}
.review-item{
  padding:15px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;gap:12px;
  transition:background .15s;
}
.review-item:last-child{border-bottom:none}
.review-item:hover{background:var(--bg3)}
.review-icon{font-size:20px;flex-shrink:0;margin-top:1px}
.review-body{flex:1}
.review-q{font-size:13px;font-weight:600;color:var(--text);line-height:1.5;margin-bottom:4px}
.review-a{font-size:12px;color:var(--text3)}
.review-a span{font-weight:600}

/* ─── DASHBOARD ─────────────────────────────────────── */
.dash-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:26px}
.dash-stat{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow);transition:border-color .2s;
}
.dash-stat:hover{border-color:rgba(91,76,245,.25)}
.dash-icon{font-size:26px;margin-bottom:10px}
.dash-val{font-size:30px;font-weight:800;line-height:1}
.dash-lbl{font-size:12px;color:var(--text3);margin-top:5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bar-lbl{font-size:13px;color:var(--text2);width:110px;flex-shrink:0;font-weight:500}
.bar-track{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.bar-pct{font-size:12px;font-weight:700;width:38px;text-align:right;flex-shrink:0}

/* ─── BOOKMARKS ─────────────────────────────────────── */
.bm-item{
  background:var(--bg2);border:1.5px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin-bottom:12px;
  transition:border-color .15s,box-shadow .15s;box-shadow:var(--shadow);
}
.bm-item.open{border-color:rgba(91,76,245,.35);box-shadow:var(--shadow-lg)}
.bm-header{padding:18px 22px;cursor:pointer;display:flex;align-items:flex-start;gap:13px}
.bm-q{flex:1;font-size:14px;font-weight:600;color:var(--text);line-height:1.55}
.bm-caret{color:var(--text3);font-size:14px;flex-shrink:0;margin-top:2px;transition:transform .2s}
.bm-item.open .bm-caret{transform:rotate(180deg)}
.bm-body{padding:16px 22px 20px;border-top:1px solid var(--border);background:var(--bg3)}
.bm-ans{font-size:13px;color:var(--green);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.bm-exp{font-size:13px;color:var(--text2);line-height:1.7}

/* ─── AI COACH ──────────────────────────────────────── */
.coach-wrap{display:flex;flex-direction:column;gap:0}
.chat-window{
  min-height:400px;max-height:500px;overflow-y:auto;
  padding:8px 0;margin-bottom:18px;display:flex;flex-direction:column;gap:14px;
}
.chat-msg{display:flex;gap:10px;align-items:flex-start;animation:slideIn .25s ease}
.chat-msg.user{flex-direction:row-reverse}
.chat-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  box-shadow:0 2px 8px rgba(91,76,245,.3);
}
.chat-bubble{
  padding:13px 18px;border-radius:16px;font-size:14px;line-height:1.75;
  max-width:82%;word-break:break-word;letter-spacing:-0.01em;
}
.chat-bubble.ai{
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:4px 16px 16px 16px;
}
.chat-bubble.user{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:var(--surface-text-strong);
  border-radius:16px 4px 16px 16px;font-weight:500;
}
.chat-input-row{display:flex;gap:10px;align-items:flex-end}
.chat-input{
  flex:1;background:var(--bg3);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 17px;
  font-size:14px;color:var(--text);resize:none;
  transition:border-color .15s;max-height:130px;line-height:1.6;
  letter-spacing:-0.01em;
}
.chat-input:focus{border-color:var(--accent)}
.chat-send{
  width:46px;height:46px;border-radius:var(--radius-xs);
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:var(--surface-text-strong);font-size:20px;border:none;flex-shrink:0;
  transition:opacity .15s,transform .15s;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(91,76,245,.35);
}
.chat-send:hover{opacity:.9;transform:translateY(-1px)}
.chat-send:active{transform:scale(.95)}
.starters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.starter-btn{
  background:var(--bg4);border:1px solid var(--border);
  border-radius:20px;padding:8px 18px;font-size:12px;
  font-weight:600;color:var(--text2);cursor:pointer;
  transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif;
  letter-spacing:-0.01em;
}
.starter-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--bg3)}

/* ─── SECTION TITLES ────────────────────────────────── */
.section-title{
  font-family:'Outfit',sans-serif;
  font-size:22px;font-weight:800;color:var(--text);
  letter-spacing:-0.5px;margin-bottom:6px;line-height:1.2;
}
.section-sub{
  font-size:14px;color:var(--text2);line-height:1.6;
  letter-spacing:-0.01em;margin-bottom:24px;
}

/* ─── FILTER BLOCKS ─────────────────────────────────── */
.filter-block{margin-bottom:22px}
.filter-label{
  font-size:11px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;
  font-family:'JetBrains Mono',monospace;margin-bottom:10px;
}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}


.spinner{
  display:inline-block;width:18px;height:18px;
  border:2px solid rgba(91,76,245,.3);border-top-color:#5b4cf5;
  border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;
}
.spinner-sm{width:14px;height:14px}

/* ─── EMPTY STATE ───────────────────────────────────── */
.empty{text-align:center;padding:64px 24px;background:var(--bg3);border-radius:var(--radius);border:1px dashed var(--border)}
.empty-icon{font-size:56px;margin-bottom:16px}
.empty-text{font-size:15px;color:var(--text2)}

/* ─── DIVIDER ───────────────────────────────────────── */
.divider{height:1px;background:var(--border);margin:24px 0}

/* ─── TOAST ─────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 20px;font-size:13px;font-weight:600;color:var(--text);
  box-shadow:var(--shadow-lg);animation:slideIn .25s ease;
  display:flex;align-items:center;gap:10px;min-width:220px;
}
.toast.success{border-left:4px solid #10b981}
.toast.error{border-left:4px solid #dc2626}
.toast.info{border-left:4px solid #5b4cf5}

/* ─── RESPONSIVE ────────────────────────────────────── */
@media(max-width:900px){
  .nav-center{display:none}
  .header{padding:0 16px}
  .mode-grid{grid-template-columns:repeat(2,1fr)}
  .res-cards{grid-template-columns:1fr}
  .dash-stats{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr;gap:10px}
  .features-row{grid-template-columns:1fr}
  .page,.page-narrow,.page-wide{padding:24px 16px 50px}
  .bank-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .hero h1{font-size:30px}
  .logo-version{display:none}
  .ai-live-pill{display:none}
  .bank-grid{grid-template-columns:1fr}
}

/* ─── AI INTERVIEW ASSISTANT ────────────────────────── */
.ai-wrap{
  display:flex;min-height:calc(100vh - 68px);background:var(--surface-1);
}
.ai-sidebar{
  width:260px;flex-shrink:0;background:var(--surface-2);
  border-right:1px solid var(--surface-border);
  display:flex;flex-direction:column;overflow:hidden;
}
.ai-sidebar-header{padding:20px 18px 16px;border-bottom:1px solid var(--surface-border)}
.ai-sidebar-title{font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;color:var(--surface-text-strong);margin-bottom:10px;display:flex;align-items:center;gap:8px;letter-spacing:-0.4px}
.ai-new-chat-btn{
  width:100%;padding:9px 14px;border-radius:10px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:var(--surface-text-strong);
  border:none;cursor:pointer;font-size:13px;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;
  display:flex;align-items:center;gap:7px;justify-content:center;
  transition:all .2s;box-shadow:0 3px 12px rgba(91,76,245,.4);letter-spacing:-0.01em;
}
.ai-new-chat-btn:hover{opacity:.9;transform:translateY(-1px)}
.ai-modes{padding:14px 12px;border-bottom:1px solid var(--surface-border)}
.ai-modes-label{font-size:10px;font-weight:700;color:var(--surface-text-faint);text-transform:uppercase;letter-spacing:.08em;font-family:'JetBrains Mono',monospace;margin-bottom:8px;padding:0 6px}
.ai-mode-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;border:none;background:none;
  cursor:pointer;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif;text-align:left;margin-bottom:2px;
}
.ai-mode-btn:hover{background:var(--overlay)}
.ai-mode-btn.active{background:rgba(91,76,245,.15);border:1px solid rgba(91,76,245,.25)}
.ai-mode-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.ai-mode-name{font-size:13px;font-weight:600;color:var(--surface-text);letter-spacing:-0.01em}
.ai-mode-btn.active .ai-mode-name{color:var(--surface-text-strong);font-weight:700}
.ai-mode-desc{font-size:11px;color:var(--surface-text-faint);margin-top:1px;letter-spacing:-0.01em}
.ai-history{flex:1;overflow-y:auto;padding:12px}
.ai-history-label{font-size:10px;font-weight:700;color:var(--surface-text-faint);text-transform:uppercase;letter-spacing:.08em;font-family:'JetBrains Mono',monospace;margin-bottom:8px;padding:0 4px}
.ai-history-item{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--surface-text-faint);transition:all .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;letter-spacing:-0.01em}
.ai-history-item:hover{background:var(--overlay);color:var(--surface-text)}
.ai-sidebar-footer{padding:14px 16px;border-top:1px solid var(--surface-border)}
.ai-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--surface-text-faint);letter-spacing:-0.01em}
.ai-status-dot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 6px #10b981;animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.ai-main{flex:1;display:flex;flex-direction:column;background:var(--surface-1);overflow:hidden}
.ai-topbar{
  padding:14px 28px;border-bottom:1px solid var(--surface-border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface-2);flex-shrink:0;
}
.ai-topbar-left{display:flex;align-items:center;gap:12px}
.ai-topbar-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ai-topbar-title{font-family:'Outfit',sans-serif;font-size:16px;font-weight:800;color:var(--surface-text-strong);letter-spacing:-0.5px}
.ai-topbar-sub{font-size:12px;color:var(--surface-text-faint);margin-top:2px;letter-spacing:-0.01em}
.ai-topbar-actions{display:flex;gap:8px}
.ai-topbar-btn{padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;background:var(--overlay);border:1px solid var(--surface-border);color:var(--surface-text-muted);cursor:pointer;transition:all .15s;font-family:inherit}
.ai-topbar-btn:hover{background:var(--overlay);color:var(--surface-text-strong)}
.ai-topbar-btn.danger:hover{background:rgba(239,68,68,.15);color:#f87171;border-color:rgba(239,68,68,.3)}
.ai-messages{flex:1;overflow-y:auto;padding:28px 40px;display:flex;flex-direction:column;gap:20px;scroll-behavior:smooth}
.ai-msg{display:flex;gap:12px;align-items:flex-start;animation:fadeUp .25s ease}
.ai-msg.user{flex-direction:row-reverse}
.ai-msg-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;margin-top:2px}
.ai-msg-avatar.bot{background:linear-gradient(135deg,#5b4cf5,#8b5cf6);box-shadow:0 3px 12px rgba(91,76,245,.4)}
.ai-msg-avatar.user-av{background:var(--overlay);border:1px solid var(--surface-border-strong);font-size:13px;font-weight:700;color:var(--surface-text-strong)}
.ai-msg-bubble{max-width:72%;padding:14px 18px;border-radius:16px;font-size:14px;line-height:1.75;word-break:break-word}
.ai-msg-bubble.bot{background:var(--surface-3);border:1px solid var(--surface-border);color:var(--surface-text);border-radius:4px 16px 16px 16px}
.ai-msg-bubble.user{background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:var(--surface-text-strong);border-radius:16px 4px 16px 16px}
.typing-dots{display:flex;gap:5px;align-items:center;padding:4px 0}
.typing-dot{width:7px;height:7px;border-radius:50%;background:#5b4cf5;animation:typingBounce .8s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}
.ai-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center}
.ai-empty-glow{width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,#5b4cf5,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 20px;box-shadow:0 8px 40px rgba(91,76,245,.5);animation:float 3s ease-in-out infinite}
.ai-empty-title{font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;color:var(--surface-text-strong);margin-bottom:8px;letter-spacing:-.3px}
.ai-empty-sub{font-size:14px;color:var(--surface-text-faint);max-width:380px;line-height:1.7;margin-bottom:28px}
.ai-suggestion-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:600px}
.ai-suggestion{background:var(--surface-3);border:1px solid var(--surface-border);border-radius:12px;padding:14px 16px;cursor:pointer;text-align:left;transition:all .18s;font-family:inherit;border:none}
.ai-suggestion:hover{background:var(--surface-4);outline:1px solid rgba(91,76,245,.3);transform:translateY(-2px)}
.ai-suggestion-icon{font-size:18px;margin-bottom:8px}
.ai-suggestion-text{font-size:13px;font-weight:500;color:var(--surface-text);line-height:1.5}
.ai-input-wrap{padding:14px 28px 18px;border-top:1px solid var(--surface-border);background:var(--surface-2);flex-shrink:0}
.ai-quick-actions{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.ai-quick-pill{padding:5px 13px;border-radius:20px;font-size:12px;font-weight:500;background:var(--overlay);border:1px solid var(--surface-border);color:var(--surface-text-muted);cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}
.ai-quick-pill:hover{background:rgba(91,76,245,.15);border-color:rgba(91,76,245,.35);color:#a78bfa}
.ai-input-box{display:flex;align-items:flex-end;gap:10px;background:var(--surface-3);border:1.5px solid var(--surface-border);border-radius:14px;padding:12px 14px;transition:border-color .2s}
.ai-input-box:focus-within{border-color:rgba(91,76,245,.5)}
.ai-textarea{flex:1;background:none;border:none;outline:none;resize:none;font-size:14px;color:var(--surface-text-strong);line-height:1.6;max-height:150px;font-family:inherit;caret-color:#a78bfa}
.ai-textarea::placeholder{color:var(--surface-text-faint)}
.ai-send-btn{width:36px;height:36px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#5b4cf5,#8b5cf6);border:none;cursor:pointer;color:var(--surface-text-strong);font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 3px 10px rgba(91,76,245,.4)}
.ai-send-btn:hover{opacity:.9;transform:scale(1.05)}
.ai-send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.ai-input-hint{font-size:11px;color:var(--surface-text-faint);margin-top:8px;display:flex;align-items:center;gap:16px}
@media(max-width:900px){.ai-sidebar{display:none}.ai-messages{padding:20px 16px}.ai-input-wrap{padding:12px 16px 16px}.ai-suggestion-grid{grid-template-columns:1fr}}

/* ─── AGENT MODE ─────────────────────────────────────── */
.agent-wrap{
  min-height:calc(100vh - 68px);background:var(--surface-1);
  display:flex;flex-direction:column;
}
/* Top goal bar */
.agent-goalbar{
  background:var(--surface-2);border-bottom:1px solid var(--surface-border);
  padding:16px 32px;display:flex;align-items:center;gap:16px;flex-shrink:0;
}
.agent-goal-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);
  border-radius:20px;padding:4px 13px;font-size:11px;font-weight:700;
  color:#34d399;font-family:'JetBrains Mono',monospace;text-transform:uppercase;
  letter-spacing:.5px;flex-shrink:0;
}
.agent-goal-dot{width:6px;height:6px;border-radius:50%;background:#34d399;
  box-shadow:0 0 6px #34d399;animation:pulse 1.5s ease-in-out infinite}
.agent-goal-input{
  flex:1;background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:10px;padding:10px 16px;font-size:14px;color:var(--surface-text-strong);
  font-family:inherit;transition:border-color .2s;
}
.agent-goal-input:focus{border-color:rgba(16,185,129,.4);outline:none}
.agent-goal-input::placeholder{color:var(--surface-text-faint)}
.agent-start-btn{
  padding:10px 22px;border-radius:10px;font-size:13px;font-weight:700;
  background:linear-gradient(135deg,#10b981,#059669);color:var(--surface-text-strong);
  border:none;cursor:pointer;font-family:inherit;white-space:nowrap;
  box-shadow:0 3px 14px rgba(16,185,129,.4);transition:all .2s;
  display:flex;align-items:center;gap:7px;
}
.agent-start-btn:hover{opacity:.9;transform:translateY(-1px)}
.agent-start-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.agent-stop-btn{
  padding:10px 20px;border-radius:10px;font-size:13px;font-weight:700;
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);
  color:#f87171;cursor:pointer;font-family:inherit;transition:all .2s;
}
.agent-stop-btn:hover{background:rgba(239,68,68,.2)}

/* Main body: sidebar + log */
.agent-body{display:flex;flex:1;overflow:hidden}

/* Left: plan + tools */
.agent-sidebar{
  width:280px;flex-shrink:0;background:var(--surface-2);
  border-right:1px solid var(--surface-border);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:20px 16px;gap:20px;
}
.agent-section-title{
  font-size:10px;font-weight:700;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.8px;
  font-family:'JetBrains Mono',monospace;margin-bottom:8px;
}

/* Plan steps */
.agent-plan{display:flex;flex-direction:column;gap:6px}
.agent-step{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:10px;
  border:1px solid var(--surface-border);background:var(--surface-3);
  transition:all .3s;
}
.agent-step.active{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.06)}
.agent-step.done{border-color:rgba(91,76,245,.25);background:rgba(91,76,245,.06);opacity:.7}
.agent-step.pending{opacity:.4}
.agent-step-icon{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  background:var(--overlay);color:var(--surface-text-faint);margin-top:1px;
}
.agent-step.active .agent-step-icon{background:rgba(16,185,129,.2);color:#34d399}
.agent-step.done .agent-step-icon{background:rgba(91,76,245,.2);color:#a78bfa}
.agent-step-label{font-size:12px;font-weight:500;color:var(--surface-text-muted);line-height:1.4}
.agent-step.active .agent-step-label{color:var(--surface-text-strong)}
.agent-step-spin{
  width:14px;height:14px;border:2px solid rgba(16,185,129,.3);
  border-top-color:#34d399;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;margin-top:4px;
}

/* Tools used */
.agent-tools{display:flex;flex-direction:column;gap:5px}
.agent-tool{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;background:var(--surface-3);
  border:1px solid var(--surface-border);
}
.agent-tool-icon{font-size:14px;flex-shrink:0}
.agent-tool-name{font-size:12px;color:var(--surface-text-muted)}
.agent-tool-status{
  margin-left:auto;font-size:10px;font-family:'JetBrains Mono',monospace;
  padding:2px 7px;border-radius:10px;
}
.agent-tool-status.used{background:rgba(16,185,129,.12);color:#34d399}
.agent-tool-status.idle{background:var(--overlay);color:var(--surface-text-faint)}

/* Stats panel */
.agent-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.agent-stat-mini{
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:10px;padding:12px;text-align:center;
}
.agent-stat-mini-val{font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;color:var(--surface-text-strong)}
.agent-stat-mini-lbl{font-size:10px;color:var(--surface-text-faint);margin-top:3px;
  text-transform:uppercase;letter-spacing:.5px;font-family:'JetBrains Mono',monospace}

/* Right: action log + output */
.agent-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.agent-log{
  flex:1;overflow-y:auto;padding:24px 32px;
  display:flex;flex-direction:column;gap:14px;
}

/* Log entries */
.agent-entry{display:flex;gap:12px;align-items:flex-start;animation:fadeUp .3s ease}
.agent-entry-icon{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:2px;
}
.agent-entry-icon.think{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.25)}
.agent-entry-icon.tool{background:rgba(91,76,245,.15);border:1px solid rgba(91,76,245,.25)}
.agent-entry-icon.result{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25)}
.agent-entry-icon.error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25)}
.agent-entry-icon.user{background:var(--overlay);border:1px solid var(--surface-border-strong)}
.agent-entry-body{flex:1}
.agent-entry-label{
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:5px;display:flex;align-items:center;gap:8px;
}
.agent-entry-label .ts{color:var(--surface-text-faint);font-weight:400;font-size:10px}
.agent-entry-content{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:12px;padding:14px 18px;font-size:13px;line-height:1.75;
  color:var(--surface-text);
}
.agent-entry-content.think-bg{
  background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.12);
  font-style:italic;color:rgba(255,200,80,.7);
}
.agent-entry-content.tool-bg{
  background:rgba(91,76,245,.06);border-color:rgba(91,76,245,.15);
  font-family:'JetBrains Mono',monospace;font-size:12px;
}
.agent-entry-content.result-bg{
  background:rgba(16,185,129,.05);border-color:rgba(16,185,129,.12);
}
.agent-entry-content strong{color:var(--surface-text-strong);font-weight:600}
.agent-entry-content code{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  background:var(--overlay);padding:2px 6px;border-radius:4px;color:#a78bfa;
}

/* Output cards */
.agent-output-card{
  background:var(--surface-3);border:1px solid rgba(16,185,129,.2);
  border-radius:14px;padding:20px 24px;margin-top:4px;
}
.agent-output-title{
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;
  color:#34d399;margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.agent-output-item{
  padding:10px 0;border-bottom:1px solid var(--surface-border);
  font-size:13px;color:var(--surface-text);line-height:1.6;
  display:flex;gap:10px;align-items:flex-start;
}
.agent-output-item:last-child{border-bottom:none;padding-bottom:0}
.agent-output-bullet{color:#34d399;flex-shrink:0;margin-top:2px}

/* Bottom input */
.agent-input-area{
  padding:14px 32px 18px;border-top:1px solid var(--surface-border);
  background:var(--surface-2);flex-shrink:0;
}
.agent-input-row{
  display:flex;gap:10px;align-items:flex-end;
  background:var(--surface-3);border:1.5px solid var(--surface-border);
  border-radius:12px;padding:10px 14px;transition:border-color .2s;
}
.agent-input-row:focus-within{border-color:rgba(16,185,129,.4)}
.agent-textarea{
  flex:1;background:none;border:none;outline:none;resize:none;
  font-size:14px;color:var(--surface-text-strong);line-height:1.6;max-height:100px;
  font-family:inherit;caret-color:#34d399;
}
.agent-textarea::placeholder{color:var(--surface-text-faint)}
.agent-send-btn{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#10b981,#059669);
  border:none;cursor:pointer;color:var(--surface-text-strong);font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;box-shadow:0 3px 10px rgba(16,185,129,.35);
}
.agent-send-btn:hover{opacity:.9;transform:scale(1.05)}
.agent-send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}

/* Empty state */
.agent-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px;text-align:center;
}
.agent-empty-glow{
  width:80px;height:80px;border-radius:24px;
  background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(6,182,212,.15));
  border:1px solid rgba(16,185,129,.3);
  display:flex;align-items:center;justify-content:center;font-size:34px;
  margin:0 auto 20px;box-shadow:0 8px 40px rgba(16,185,129,.25);
  animation:float 3s ease-in-out infinite;
}
.agent-preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:560px;margin-top:24px}
.agent-preset{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:12px;padding:14px 16px;cursor:pointer;text-align:left;
  transition:all .18s;font-family:inherit;
}
.agent-preset:hover{background:var(--surface-3);border-color:rgba(16,185,129,.25);transform:translateY(-2px)}
.agent-preset-icon{font-size:20px;margin-bottom:8px}
.agent-preset-title{font-size:13px;font-weight:600;color:var(--surface-text);margin-bottom:3px}
.agent-preset-desc{font-size:12px;color:var(--surface-text-faint);line-height:1.4}

@media(max-width:900px){
  .agent-sidebar{display:none}
  .agent-log{padding:16px}
  .agent-input-area{padding:12px 16px 16px}
  .agent-goalbar{padding:12px 16px;flex-wrap:wrap}
}


/* ─── DASHBOARD ─────────────────────────────────────── */
.dash-wrap{
  min-height:calc(100vh - 68px);background:var(--surface-1);
  padding:40px 24px 64px;
}
.dash-eyebrow{
  font-size:10.5px;font-weight:700;color:#5b4cf5;
  text-transform:uppercase;letter-spacing:.1em;
  font-family:'JetBrains Mono',monospace;margin-bottom:10px;
}
.dash-heading{
  font-family:'Outfit',sans-serif;font-size:40px;font-weight:800;
  color:var(--surface-text-strong);letter-spacing:-1.5px;line-height:1.02;
}
.dash-reset-btn{
  display:flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;
  background:var(--surface-3);border:1px solid var(--surface-border);
  color:var(--surface-text-muted);cursor:pointer;transition:all .2s;font-family:inherit;
  white-space:nowrap;flex-shrink:0;margin-top:6px;
}
.dash-reset-btn:hover{border-color:var(--surface-text-faint);color:var(--surface-text-strong)}

/* 4-col stat cards */
.dash-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.dash-stat-card{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:16px;padding:24px;transition:border-color .2s,transform .2s;
  position:relative;overflow:hidden;
}
.dash-stat-card:hover{border-color:var(--surface-text-faint);transform:translateY(-2px)}
.dash-stat-card::before{
  content:'';position:absolute;inset:0;opacity:.04;
  background:radial-gradient(circle at 20% 20%,#5b4cf5,transparent 70%);
}
.dash-stat-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;margin-bottom:16px;flex-shrink:0;
}
.dash-stat-label{
  font-size:10px;font-weight:700;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.1em;
  font-family:'JetBrains Mono',monospace;margin-bottom:10px;
}
.dash-stat-val{
  font-family:'Outfit',sans-serif;font-size:34px;font-weight:800;
  color:var(--surface-text-strong);line-height:1;margin-bottom:6px;letter-spacing:-1.5px;
}
.dash-stat-sub{font-size:12px;color:var(--surface-text-faint);letter-spacing:-0.01em;font-weight:500}

/* middle row: 2 panels side by side */
.dash-mid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.dash-panel{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:16px;padding:24px;
}
.dash-panel-title{
  font-size:13px;font-weight:700;color:var(--surface-text-strong);margin-bottom:20px;
  display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;
  text-transform:uppercase;letter-spacing:.05em;font-family:'JetBrains Mono',monospace;
  color:var(--surface-text-muted);font-size:11px;
}
.dash-panel-title-icon{font-size:15px}

/* Topic accuracy bars */
.dash-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dash-bar-row:last-child{margin-bottom:0}
.dash-bar-label{font-size:12px;color:var(--surface-text-muted);width:100px;flex-shrink:0}
.dash-bar-track{flex:1;height:6px;background:var(--overlay);border-radius:3px;overflow:hidden}
.dash-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#5b4cf5,#8b5cf6);transition:width .8s cubic-bezier(.4,0,.2,1)}
.dash-bar-pct{font-size:12px;color:var(--surface-text-faint);width:32px;text-align:right;font-family:'JetBrains Mono',monospace;flex-shrink:0}

/* Activity heatmap */
.heatmap-grid{display:flex;flex-direction:column;gap:4px}
.heatmap-row{display:flex;gap:4px}
.heatmap-cell{
  width:14px;height:14px;border-radius:3px;
  background:var(--overlay);flex-shrink:0;
  transition:background .2s;cursor:default;
}
.heatmap-cell.l1{background:rgba(91,76,245,.25)}
.heatmap-cell.l2{background:rgba(91,76,245,.45)}
.heatmap-cell.l3{background:rgba(91,76,245,.65)}
.heatmap-cell.l4{background:#5b4cf5}
.heatmap-legend{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;color:var(--surface-text-faint)}
.heatmap-legend-cell{width:12px;height:12px;border-radius:2px}

/* Recent mock sessions */
.dash-sessions-panel{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:16px;padding:24px;
}
.dash-sessions-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.dash-sessions-title{font-size:14px;font-weight:700;color:var(--surface-text-strong);display:flex;align-items:center;gap:8px}
.dash-new-session{
  font-size:13px;color:#a78bfa;cursor:pointer;display:flex;align-items:center;gap:4px;
  background:none;border:none;font-family:inherit;font-weight:600;transition:color .2s;
}
.dash-new-session:hover{color:#c4b5fd}
.dash-session-empty{text-align:center;padding:32px 20px}
.dash-session-empty-text{font-size:14px;color:var(--surface-text-faint);margin-bottom:16px}
.dash-session-cta{
  padding:11px 24px;border-radius:10px;font-size:14px;font-weight:700;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:var(--surface-text-strong);
  border:none;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 16px rgba(91,76,245,.4);transition:all .2s;
}
.dash-session-cta:hover{opacity:.9;transform:translateY(-1px)}
.dash-session-item{
  display:flex;align-items:center;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--surface-border);
}
.dash-session-item:last-child{border-bottom:none}
.dash-session-icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(91,76,245,.15);border:1px solid rgba(91,76,245,.2);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.dash-session-info{flex:1}
.dash-session-name{font-size:13px;font-weight:600;color:var(--surface-text-strong);margin-bottom:3px}
.dash-session-meta{font-size:12px;color:var(--surface-text-faint)}
.dash-session-score{
  font-family:'Outfit',sans-serif;font-size:18px;font-weight:800;
  color:#a78bfa;
}

@media(max-width:1100px){
  .dash-stat-grid{grid-template-columns:repeat(2,1fr)}
  .dash-mid{grid-template-columns:1fr}
  .dash-wrap{padding:28px 20px 50px}
}
@media(max-width:600px){
  .dash-stat-grid{grid-template-columns:1fr 1fr}
  .dash-heading{font-size:28px}
}

/* ─── MOCK INTERVIEW LAYOUT ─────────────────────────── */
.mock-wrap{
  min-height:calc(100vh - 68px);background:var(--surface-1);
  display:flex;flex-direction:column;align-items:center;
  padding:40px 24px 60px;
}
.mock-header{
  width:100%;max-width:640px;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;gap:16px;
}
.mock-title-group{flex:1;min-width:0}
.mock-title{
  font-family:'Outfit',sans-serif;font-size:26px;font-weight:800;
  color:var(--surface-text-strong);letter-spacing:-1px;margin-bottom:4px;line-height:1.1;
}
.mock-subtitle{font-size:11px;color:var(--surface-text-faint);font-family:'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mock-timer-ring{
  position:relative;width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:filter .3s;
}
.mock-timer-ring.safe   {filter:drop-shadow(0 4px 16px rgba(16,185,129,.28))}
.mock-timer-ring.caution{filter:drop-shadow(0 4px 16px rgba(91,76,245,.28))}
.mock-timer-ring.warn   {filter:drop-shadow(0 4px 16px rgba(245,158,11,.30))}
.mock-timer-ring.danger {
  filter:drop-shadow(0 4px 18px rgba(239,68,68,.45));
  animation:timerPulse .55s ease-in-out infinite;
}
.mock-timer-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;pointer-events:none;
}
.mock-timer-digits{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:20px;letter-spacing:-0.02em;line-height:1;
  transition:color .3s;
  font-variant-numeric:tabular-nums;
}
.mock-timer-digits.safe   {color:#10b981}
.mock-timer-digits.caution{color:var(--sig-purple)}
.mock-timer-digits.warn   {color:#f59e0b}
.mock-timer-digits.danger {color:#ef4444}
.mock-timer-label{
  font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700;
  letter-spacing:0.16em;color:var(--surface-text-faint);
  margin-top:3px;text-transform:uppercase;
}
.mock-timer-ring.danger .mock-timer-label{color:#ef4444}
.mock-timer-ring.warn .mock-timer-label{color:#f59e0b}

@keyframes timerPulse{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.06)}
}
.mock-timer-dot{
  width:8px;height:8px;border-radius:50%;background:#10b981;
  box-shadow:0 0 8px #10b981;flex-shrink:0;
  animation:pulse 1.5s ease-in-out infinite;
}
.mock-timer.danger{
  border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#f87171;
}
.mock-timer.danger .mock-timer-dot{background:#f87171;box-shadow:0 0 8px #f87171}

.mock-prog{width:100%;max-width:600px;height:3px;background:var(--overlay);border-radius:3px;margin-bottom:28px;overflow:hidden}
.mock-prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#5b4cf5,#8b5cf6);transition:width .4s ease}

.mock-card{
  width:100%;max-width:600px;
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:18px;padding:28px 28px 24px;
  box-shadow:0 8px 40px rgba(0,0,0,.4);
}
.mock-badges{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.mock-badge{
  padding:3px 11px;border-radius:20px;font-size:10.5px;font-weight:700;
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em;
}
.mock-badge.easy{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.25)}
.mock-badge.medium{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.25)}
.mock-badge.hard{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.25)}
.mock-badge.topic{background:rgba(91,76,245,.15);color:#a78bfa;border:1px solid rgba(91,76,245,.25)}
.mock-badge.role{background:rgba(6,182,212,.12);color:#67e8f9;border:1px solid rgba(6,182,212,.2)}

.mock-q-text{
  font-size:16px;font-weight:600;color:var(--surface-text-strong);line-height:1.68;
  margin-bottom:24px;letter-spacing:-0.02em;
}

.mock-opts{display:flex;flex-direction:column;gap:10px}
.mock-opt{
  display:flex;align-items:center;gap:14px;
  padding:15px 20px;border-radius:12px;
  border:1px solid var(--surface-border);background:var(--overlay-soft);
  cursor:pointer;transition:all .18s;text-align:left;width:100%;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.mock-opt:hover:not(:disabled){
  background:var(--overlay);border-color:var(--surface-text-faint);
  transform:translateX(2px);
}
.mock-opt.correct{background:rgba(16,185,129,.1)!important;border-color:rgba(16,185,129,.4)!important}
.mock-opt.wrong{background:rgba(239,68,68,.08)!important;border-color:rgba(239,68,68,.3)!important}
.mock-opt.dim{opacity:.2;pointer-events:none}
.mock-opt-letter{
  width:30px;height:30px;border-radius:7px;
  background:var(--overlay);border:1px solid var(--surface-border-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--surface-text-muted);
  flex-shrink:0;font-family:'JetBrains Mono',monospace;transition:all .15s;letter-spacing:0;
}
.mock-opt.correct .mock-opt-letter{background:rgba(16,185,129,.25);border-color:rgba(16,185,129,.5);color:#34d399}
.mock-opt.wrong .mock-opt-letter{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4);color:#f87171}
.mock-opt-text{font-size:14px;color:var(--surface-text);line-height:1.55;font-weight:500;letter-spacing:-0.01em}
.mock-opt.correct .mock-opt-text,.mock-opt.wrong .mock-opt-text{color:var(--surface-text-strong);font-weight:600}

/* Explanation after answering */
.mock-exp{
  margin-top:20px;padding:18px;border-radius:12px;
  background:rgba(91,76,245,.08);border:1px solid rgba(91,76,245,.15);
  animation:fadeUp .3s ease;
}
.mock-exp-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.mock-exp-tab{
  padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif;border:none;letter-spacing:.01em;
}
.mock-exp-tab.on{background:rgba(91,76,245,.35);color:#c4b5fd;border:1px solid rgba(91,76,245,.4)}
.mock-exp-tab.off{background:var(--overlay);color:var(--surface-text-faint);border:1px solid transparent}
.mock-exp-tab.off:hover{color:var(--surface-text)}
.mock-exp-text{font-size:13.5px;color:var(--surface-text-muted);line-height:1.82;letter-spacing:-0.01em}
.mock-fup{margin-top:10px;padding:10px 14px;border-radius:8px;
  background:var(--overlay-soft);font-size:12px;color:var(--surface-text-faint);line-height:1.65;letter-spacing:-0.01em}

/* Bottom actions */
.mock-actions{
  width:100%;max-width:600px;margin-top:20px;
  display:flex;align-items:center;justify-content:space-between;
}
.mock-exit-btn{
  background:transparent;border:1px solid var(--surface-border-strong);
  color:var(--surface-text-faint);padding:10px 20px;border-radius:10px;
  font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;
}
.mock-exit-btn:hover{border-color:var(--surface-text-faint);color:var(--surface-text-strong)}
.mock-next-btn{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:var(--surface-text-strong);
  padding:11px 26px;border-radius:10px;font-size:14px;font-weight:700;
  border:none;cursor:pointer;transition:all .2s;font-family:inherit;
  box-shadow:0 4px 18px rgba(91,76,245,.45);display:flex;align-items:center;gap:8px;
}
.mock-next-btn:hover{opacity:.9;transform:translateY(-1px)}

/* ─── CODING CHALLENGE PAGE ─────────────────────────── */
.coding-wrap{
  display:flex;flex-direction:column;min-height:calc(100vh - 68px);
  background:var(--surface-1);
}

/* ── Terminal-style top bar (sticky below app header) ── */
.coding-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 20px;border-bottom:1px solid var(--surface-border);
  background:var(--surface-2);flex-shrink:0;gap:20px;
  position:sticky;top:68px;z-index:40;
  backdrop-filter:blur(8px);
}
.coding-topbar-left{display:flex;align-items:center;gap:18px;flex:1;min-width:0}
.coding-topbar-right{display:flex;align-items:center;gap:10px}

.coding-traffic{
  display:flex;gap:7px;align-items:center;flex-shrink:0;
}
.coding-traffic-dot{
  width:12px;height:12px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.coding-traffic-dot.red{background:#ff5f57}
.coding-traffic-dot.amber{background:#febc2e}
.coding-traffic-dot.mint{background:#28c840}

.coding-breadcrumb{
  display:flex;align-items:center;gap:6px;min-width:0;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;
  color:var(--surface-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.coding-bc-segment{color:var(--surface-text-faint)}
.coding-bc-sep{color:var(--surface-text-faint);opacity:.6}
.coding-bc-file{color:var(--surface-text);font-weight:600}
.coding-bc-ext{color:var(--sig-amber);font-weight:700}

.coding-free-pill{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;
  background:var(--sig-amber-soft);color:var(--sig-amber);
  border:1px solid rgba(245,158,11,.25);
}

.coding-progress-mini{
  display:inline-flex;align-items:center;gap:2px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--surface-text-muted);
  padding:6px 12px;border:1px solid var(--surface-border);
  border-radius:7px;background:var(--surface-3);
}
.coding-progress-idx{color:var(--surface-text-strong)}
.coding-progress-sep{color:var(--surface-text-faint);margin:0 3px}
.coding-progress-total{color:var(--surface-text-faint)}

.coding-nav-btn{
  width:30px;height:30px;border-radius:7px;
  background:var(--surface-3);border:1px solid var(--surface-border);
  color:var(--surface-text-muted);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.coding-nav-btn:hover:not(:disabled){
  background:var(--sig-purple-soft);color:var(--sig-purple);
  border-color:var(--sig-purple);
}

.coding-body{display:flex;flex:1;overflow:hidden;min-height:0}

/* ── Practice empty state (no questions for filter) ── */
.prac-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px;max-width:540px;margin:48px auto 0;
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:16px;
}
.prac-empty-icon{
  font-size:48px;margin-bottom:14px;
  filter:grayscale(.4);opacity:.9;
}
.prac-empty-title{
  font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;
  color:var(--surface-text-strong);margin-bottom:10px;letter-spacing:-0.02em;
}
.prac-empty-desc{
  font-size:14px;color:var(--surface-text-muted);line-height:1.65;
  margin-bottom:24px;max-width:420px;letter-spacing:-0.005em;
}
.prac-empty-desc strong{color:var(--surface-text-strong);font-weight:700}
.prac-empty-actions{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:18px;
}
.prac-empty-actions .btn{padding:11px 20px;font-size:13px;border-radius:10px}
.prac-empty-hint{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--surface-text-faint);letter-spacing:.02em;
}
.prac-empty-hint code{
  background:var(--sig-purple-soft);color:var(--sig-purple);
  padding:2px 7px;border-radius:4px;font-weight:700;
}

/* ── Draggable divider between problem panel and editor ─ */
.coding-resizer{
  width:8px;flex-shrink:0;cursor:col-resize;
  background:var(--surface-2);
  border-left:1px solid var(--surface-border);
  border-right:1px solid var(--surface-border);
  transition:background .15s,border-color .15s;
  position:relative;user-select:none;z-index:5;
}
.coding-resizer:hover{background:var(--sig-purple-soft);border-color:var(--sig-purple)}
.coding-resizer.dragging{background:var(--sig-purple);border-color:var(--sig-purple)}
.coding-resizer::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:4px;height:48px;border-radius:4px;
  background:var(--surface-border-strong);
  pointer-events:none;transition:background .15s,transform .15s;
  box-shadow:0 0 0 1px var(--surface-border);
}
.coding-resizer:hover::after{background:var(--sig-purple);transform:translate(-50%,-50%) scaleY(1.15)}
.coding-resizer.dragging::after{background:#fff}

/* ── Vertical resizer: editor / console (prominent grip) ─ */
.coding-console-resizer{
  height:10px;flex-shrink:0;cursor:row-resize;
  background:var(--surface-3);
  border-top:1px solid var(--surface-border);
  border-bottom:1px solid var(--surface-border);
  transition:background .15s,border-color .15s;
  position:relative;user-select:none;z-index:5;
}
.coding-console-resizer:hover{background:var(--sig-purple-soft);border-color:var(--sig-purple)}
.coding-console-resizer.dragging{background:var(--sig-purple);border-color:var(--sig-purple)}
.coding-console-resizer::after{
  content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  height:4px;width:52px;border-radius:4px;
  background:var(--surface-border-strong);
  pointer-events:none;transition:background .15s,transform .15s;
  box-shadow:0 0 0 1px var(--surface-border);
}
.coding-console-resizer:hover::after{background:var(--sig-purple);transform:translate(-50%,-50%) scaleX(1.15)}
.coding-console-resizer.dragging::after{background:#fff}

/* Responsive: stack panels vertically on tablet/mobile */
@media (max-width:1024px){
  .coding-body{flex-direction:column;overflow:visible;min-height:auto}
  .coding-problem{width:100% !important;flex:none;border-right:none;border-bottom:1px solid var(--surface-border);max-height:50vh}
  .coding-editor{min-height:calc(100vh - 68px - 50vh)}
  .coding-topbar{padding:10px 14px;gap:12px}
  .coding-breadcrumb{font-size:11.5px}
  .coding-resizer{display:none}
  .coding-console-resizer{display:none}
}
@media (max-width:640px){
  .coding-bc-segment:not(:last-of-type){display:none}
  .coding-progress-mini{padding:5px 9px;font-size:11px}
  .coding-problem{max-height:40vh;padding:18px 18px}
  .coding-problem-header{margin:-18px -18px 18px;padding:18px 18px 14px}
  .coding-problem-title{font-size:24px}
}

/* LEFT: Problem Panel */
.coding-problem{
  width:48%;flex-shrink:0;overflow-y:auto;padding:20px 22px 24px;
  background:var(--surface-1);
}
/* ── Problem panel header (sticky when scrolling problem) ── */
.coding-problem-header{
  margin:-20px -22px 18px;padding:18px 22px 14px;
  border-bottom:1px solid var(--surface-border);
  position:sticky;top:0;z-index:10;
  background:var(--surface-1);
  backdrop-filter:blur(6px);
}
.coding-problem-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--sig-purple);margin-bottom:8px;
}
.coding-problem-title{
  font-family:'Outfit',sans-serif;font-size:30px;font-weight:800;
  color:var(--surface-text-strong);letter-spacing:-0.045em;
  line-height:1.08;margin:0 0 14px;
}

.coding-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.coding-badge{
  padding:4px 11px;border-radius:6px;font-size:10.5px;font-weight:700;
  font-family:'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
}
.coding-badge.easy  {background:var(--sig-mint-soft);  color:var(--sig-mint);  border:1px solid rgba(16,185,129,.3)}
.coding-badge.medium{background:var(--sig-amber-soft); color:var(--sig-amber); border:1px solid rgba(245,158,11,.3)}
.coding-badge.hard  {background:rgba(239,68,68,.1);    color:#ef4444;           border:1px solid rgba(239,68,68,.3)}
.coding-badge.topic {background:var(--sig-purple-soft);color:var(--sig-purple);border:1px solid rgba(91,76,245,.3)}
.coding-badge.complexity{background:transparent;color:var(--surface-text-faint);font-size:11px;margin-left:auto;text-transform:none;letter-spacing:0}

.coding-desc{font-size:14px;color:var(--surface-text);line-height:1.85;margin-bottom:24px;letter-spacing:-0.01em}
.coding-desc strong{color:var(--surface-text-strong);font-weight:700}
.coding-desc code{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  background:var(--overlay);padding:2px 7px;border-radius:5px;color:#a78bfa;
  letter-spacing:-0.02em;
}

.coding-example{
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:12px;padding:18px;margin-bottom:14px;
}
.coding-example-title{font-size:12px;font-weight:700;color:var(--surface-text-faint);margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.5px}
.coding-example-row{display:grid;grid-template-columns:60px 1fr;gap:4px 12px;align-items:baseline}
.coding-example-label{font-size:12px;color:var(--surface-text-faint);font-family:'JetBrains Mono',monospace}
.coding-example-val{font-size:13px;font-family:'JetBrains Mono',monospace;color:#34d399}
.coding-example-why{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--surface-text-faint)}

.coding-constraints{
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:12px;padding:18px;margin-bottom:14px;
}
.coding-constraints-title{
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;
}
.coding-constraint-item{
  display:flex;align-items:flex-start;gap:8px;margin-bottom:7px;
  font-size:13px;font-family:'JetBrains Mono',monospace;color:var(--surface-text-muted);
}
.coding-constraint-dot{color:#5b4cf5;flex-shrink:0;margin-top:1px}
.coding-complexity{
  display:flex;gap:32px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--surface-border);
}
.coding-complexity-item{font-size:12px;font-family:'JetBrains Mono',monospace}
.coding-complexity-label{color:var(--surface-text-faint);margin-bottom:3px}
.coding-complexity-val{color:#34d399}

.coding-hints{
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:12px;padding:16px 18px;
}
.coding-hints-header{
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
}
.coding-hints-title{font-size:13px;font-weight:600;color:var(--surface-text-muted);display:flex;align-items:center;gap:8px}
.coding-hints-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--surface-text-faint)}
.coding-reveal-btn{
  font-size:12px;font-weight:700;color:#a78bfa;background:none;border:none;cursor:pointer;font-family:inherit;
}
.coding-reveal-btn:hover{color:#c4b5fd}
.coding-hint-text{font-size:13px;color:var(--surface-text-muted);margin-top:12px;line-height:1.7;
  padding:12px;background:rgba(91,76,245,.08);border-radius:8px;display:none}
.coding-hint-text.visible{display:block}
.coding-hints-empty{font-size:13px;color:var(--surface-text-faint);margin-top:10px;font-style:italic}

/* RIGHT: Code Editor Panel */
.coding-editor{
  flex:1;display:flex;flex-direction:column;background:var(--surface-2);
}
/* ── Editor tab bar — VS Code style ───────────────── */
.coding-editor-tabs{
  display:flex;align-items:flex-end;gap:2px;padding:0 10px;
  border-bottom:1px solid var(--surface-border);
  background:var(--surface-1);flex-shrink:0;
  overflow-x:auto;
}
.coding-lang-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;font-size:12px;font-weight:500;cursor:pointer;
  color:var(--surface-text-faint);
  background:transparent;border:1px solid transparent;border-bottom:none;
  border-top-left-radius:7px;border-top-right-radius:7px;
  transition:all .15s;white-space:nowrap;
  font-family:'JetBrains Mono',monospace;letter-spacing:-0.01em;
  position:relative;margin-bottom:-1px;
}
.coding-lang-tab:hover{color:var(--surface-text);background:var(--overlay-soft)}
.coding-lang-tab.active{
  color:var(--surface-text-strong);
  background:var(--surface-2);
  border-color:var(--surface-border);
  border-bottom:1px solid var(--surface-2);
}
.coding-lang-tab.active::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--sig-purple),#8b5cf6);
  border-top-left-radius:7px;border-top-right-radius:7px;
}
.coding-lang-tab-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--surface-text-faint);flex-shrink:0;
  transition:background .15s;
}
.coding-lang-tab.active .coding-lang-tab-dot{background:var(--sig-purple)}
.coding-lang-tab-name{line-height:1}

.coding-editor-actions{display:flex;gap:6px;margin-left:auto;padding:6px 4px}
.coding-action-btn{
  width:30px;height:30px;border-radius:7px;background:var(--overlay-soft);
  border:1px solid var(--surface-border);color:var(--surface-text-muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;
  transition:all .15s;
}
.coding-action-btn:hover{background:var(--sig-purple-soft);color:var(--sig-purple);border-color:var(--sig-purple)}

.coding-editor-area{
  flex:1;min-height:0;overflow:hidden;
  display:flex;padding:0;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;
}
.code-line-numbers{
  flex-shrink:0;padding:16px 10px 16px 18px;
  text-align:right;user-select:none;pointer-events:none;
  color:var(--surface-text-faint);opacity:.55;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;
  border-right:1px solid var(--surface-border);
  white-space:pre;min-width:44px;
  background:var(--surface-2);
  overflow:hidden;
}
.code-editor-textarea{
  flex:1;padding:16px 20px;
  background:transparent;border:none;outline:none;resize:none;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;
  color:var(--surface-text);caret-color:var(--sig-purple);
  white-space:pre;overflow-wrap:normal;
  overflow-x:auto;overflow-y:auto;
}

/* ── Editor footer (status bar) ───────────────────── */
.coding-editor-footer{
  padding:8px 14px;border-top:1px solid var(--surface-border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface-1);flex-shrink:0;gap:12px;
}
.coding-footer-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.coding-footer-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-family:'JetBrains Mono',monospace;
  color:var(--surface-text-faint);white-space:nowrap;
}
.coding-footer-kbd{
  display:inline-flex;align-items:center;
  padding:2px 7px;border:1px solid var(--surface-border);
  border-radius:5px;background:var(--surface-3);
  font-size:10px;font-weight:700;color:var(--surface-text-muted);
  box-shadow:0 1px 0 var(--surface-border);
  font-family:'JetBrains Mono',monospace;line-height:1.2;
}

.coding-run-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:9px;font-size:12.5px;font-weight:700;
  background:linear-gradient(135deg,var(--sig-purple),#8b5cf6);color:#fff;
  border:none;cursor:pointer;font-family:inherit;letter-spacing:-0.01em;
  box-shadow:0 3px 14px rgba(91,76,245,.35);transition:all .2s;
}
.coding-run-btn:hover{transform:translateY(-1px);box-shadow:0 5px 20px rgba(91,76,245,.5)}
.coding-run-btn:active{transform:translateY(0)}
.coding-run-icon{
  font-size:9px;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,.22);
}

/* ── Console / test output panel (height resizable) ─── */
.coding-console{
  background:var(--surface-1);
  flex-shrink:0;height:220px;display:flex;flex-direction:column;
  min-height:80px;
}
.coding-console-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;border-bottom:1px solid var(--surface-border);
  background:var(--surface-2);flex-shrink:0;
}
.coding-console-title{
  display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;color:var(--surface-text-muted);
}
.coding-console-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--surface-text-faint);transition:background .3s;
}
.coding-console.has-output .coding-console-dot{background:var(--sig-mint);box-shadow:0 0 8px var(--sig-mint)}
.coding-console-clear{
  font-size:11px;font-weight:600;color:var(--surface-text-faint);
  background:none;border:none;cursor:pointer;font-family:'JetBrains Mono',monospace;
  padding:3px 8px;border-radius:5px;transition:all .15s;
}
.coding-console-clear:hover{color:var(--surface-text);background:var(--overlay-soft)}

.coding-console-body{
  flex:1;overflow-y:auto;padding:12px 14px;
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.6;
}
.console-empty{
  color:var(--surface-text-faint);font-size:12px;
  padding:12px 2px;letter-spacing:-.01em;
}
.console-warn{
  color:var(--sig-amber);background:var(--sig-amber-soft);
  border:1px solid rgba(245,158,11,.25);border-radius:7px;
  padding:10px 12px;font-size:12.5px;line-height:1.55;
}
.console-warn code{color:var(--sig-amber);background:rgba(245,158,11,.15);padding:1px 5px;border-radius:4px}

.console-section{margin-bottom:12px}
.console-section:last-child{margin-bottom:0}
.console-section-title{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--surface-text-faint);margin-bottom:8px;
}
.console-section-title.pass{color:var(--sig-mint)}
.console-section-title.fail{color:#ef4444}

.console-line{
  padding:4px 10px;border-left:2px solid var(--surface-border);
  color:var(--surface-text);white-space:pre-wrap;word-break:break-all;
  margin-bottom:2px;
}
.console-line.info{border-left-color:var(--sig-purple)}
.console-line.warn{border-left-color:var(--sig-amber);color:var(--sig-amber)}
.console-line.error{border-left-color:#ef4444;color:#ef4444}

.console-error-msg{
  color:#ef4444;background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.25);border-left:3px solid #ef4444;
  padding:10px 12px;border-radius:7px;font-size:12px;line-height:1.55;
  white-space:pre-wrap;
}

.console-test{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:8px;padding:10px 12px;margin-bottom:8px;
}
.console-test.pass{border-left:3px solid var(--sig-mint)}
.console-test.fail{border-left:3px solid #ef4444}
.console-test.err{border-left:3px solid var(--sig-amber)}

.console-test-head{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--surface-text);margin-bottom:6px;
}
.console-test-status{
  padding:2px 7px;border-radius:4px;font-size:9.5px;
  font-weight:800;letter-spacing:.1em;
}
.console-test-status.pass{background:var(--sig-mint-soft);color:var(--sig-mint)}
.console-test-status.fail{background:rgba(239,68,68,.12);color:#ef4444}
.console-test-status.err {background:var(--sig-amber-soft);color:var(--sig-amber)}
.console-test-time{
  margin-left:auto;font-size:10px;font-weight:500;
  color:var(--surface-text-faint);letter-spacing:.02em;
}
.console-test-row{
  display:grid;grid-template-columns:64px 1fr;gap:4px 10px;
  font-size:11.5px;line-height:1.55;margin-bottom:3px;
}
.console-test-lbl{color:var(--surface-text-faint);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding-top:2px}
.console-test-row code{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  color:var(--surface-text);background:var(--overlay-soft);
  padding:2px 7px;border-radius:4px;word-break:break-all;
}
.console-test.pass .console-test-row code{color:var(--sig-mint);background:var(--sig-mint-soft)}
.console-test.fail .console-test-row code{color:#ef4444}

/* ── Reference solution reveal (tight to footer, no divider line) ── */
.coding-solution{
  padding:0 14px 12px;background:var(--surface-1);flex-shrink:0;
}
.coding-solution-btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:9px;padding:10px 13px;cursor:pointer;transition:all .15s;
  font-family:inherit;
}
.coding-solution-btn:hover{
  background:var(--sig-mint-soft);border-color:rgba(16,185,129,.3);
}
.coding-solution-label{
  font-size:13px;font-weight:700;color:var(--surface-text);
  display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;
}
.coding-solution-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:5px;
  background:var(--sig-mint-soft);color:var(--sig-mint);
  font-size:11px;font-weight:700;
}
.coding-solution-hint{font-size:11.5px;color:var(--surface-text-faint);font-family:'JetBrains Mono',monospace}
.coding-solution-code{
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-left:3px solid var(--sig-mint);
  border-radius:9px;padding:16px 18px;margin-top:10px;
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.8;
  color:var(--surface-text);display:none;white-space:pre;
  overflow-x:auto;overflow-y:auto;max-height:280px;
  letter-spacing:-0.01em;
}
.coding-solution-code.visible{display:block;animation:fadeUp .3s ease}

/* ─── AUTH SCREENS ──────────────────────────────────── */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:24px 16px;
  background:var(--surface-1);position:relative;overflow:hidden;
}
.auth-wrap::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 10%,rgba(91,76,245,.18) 0%,transparent 65%),
    radial-gradient(ellipse 50% 50% at 80% 90%,rgba(6,182,212,.12) 0%,transparent 65%),
    radial-gradient(ellipse 40% 40% at 65% 30%,rgba(139,92,246,.08) 0%,transparent 60%);
  pointer-events:none;
}
.auth-wrap-inner{position:relative;z-index:1;width:100%;display:flex;justify-content:center}
.auth-box{
  width:100%;max-width:460px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:28px;overflow:hidden;
  box-shadow:var(--shadow-xl),0 0 0 1px rgba(91,76,245,.08);
  animation:fadeUp .4s cubic-bezier(.16,1,.3,1);
  position:relative;z-index:1;
}
.auth-header{
  padding:40px 40px 32px;text-align:center;
  border-bottom:1px solid var(--surface-border);position:relative;
}
.auth-header::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#5b4cf5,#8b5cf6,#06b6d4);
}
.auth-logo{
  width:62px;height:62px;border-radius:18px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;margin:0 auto 20px;
  box-shadow:0 8px 32px rgba(91,76,245,.5),0 0 0 1px rgba(91,76,245,.3);
  animation:float 3s ease-in-out infinite;
}
.auth-title{font-family:'Outfit',sans-serif;font-size:26px;font-weight:800;color:var(--surface-text-strong);margin-bottom:8px;letter-spacing:-1px;line-height:1.1}
.auth-sub{font-size:14px;color:var(--surface-text-faint);line-height:1.65;letter-spacing:-0.01em}
.auth-body{padding:32px 40px 40px}
.auth-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:28px;
  background:var(--overlay-soft);border-radius:12px;padding:4px;
  border:1px solid var(--surface-border);
}
.auth-tab{
  padding:10px 16px;border-radius:9px;font-size:13px;font-weight:700;
  border:none;cursor:pointer;transition:all .2s;
  color:var(--surface-text-faint);background:none;
  letter-spacing:.01em;font-family:'Plus Jakarta Sans',sans-serif;
}
.auth-tab.active{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:var(--surface-text-strong);box-shadow:0 4px 14px rgba(91,76,245,.4);
}
.field{margin-bottom:18px}
.field-label{
  font-size:11px;font-weight:700;color:var(--surface-text-muted);
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
  text-transform:uppercase;letter-spacing:.08em;font-family:'JetBrains Mono',monospace;
}
.field-input{
  width:100%;background:var(--overlay-soft);
  border:1.5px solid var(--surface-border);
  border-radius:12px;padding:13px 16px;
  font-size:14px;color:var(--surface-text-strong);transition:all .2s;
  letter-spacing:-0.01em;line-height:1.5;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.field-input::placeholder{color:var(--surface-text-faint)}
.field-input:focus{
  border-color:rgba(91,76,245,.6);background:rgba(91,76,245,.06);
  box-shadow:0 0 0 4px rgba(91,76,245,.12);outline:none;
}
.field-input.error{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.05)}
.field-error{font-size:12px;color:#f87171;margin-top:6px;letter-spacing:-0.01em}
.field-hint{font-size:12px;color:var(--surface-text-faint);margin-top:5px;letter-spacing:-0.01em}
.auth-btn{
  width:100%;padding:15px;border-radius:12px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:var(--surface-text-strong);font-size:15px;font-weight:700;border:none;
  cursor:pointer;transition:all .2s;margin-top:8px;
  box-shadow:0 4px 24px rgba(91,76,245,.45);
  font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-0.01em;
}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(91,76,245,.55)}
.auth-btn:active{transform:scale(.98);box-shadow:none}
.auth-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;}
.auth-divider span{font-size:12px;color:var(--surface-text-faint);white-space:nowrap}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--overlay)}
.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:var(--surface-text-faint);letter-spacing:-0.01em}
.auth-switch a{color:#a78bfa;font-weight:700;cursor:pointer;transition:color .15s}
.auth-switch a:hover{color:#c4b5fd;text-decoration:underline}
.pw-wrap{position:relative}
.pw-toggle{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:16px;
  color:var(--surface-text-faint);padding:4px;transition:color .15s;
}
.pw-toggle:hover{color:var(--surface-text)}
.strength-bar{display:flex;gap:4px;margin-top:8px}
.strength-seg{height:3px;flex:1;border-radius:2px;background:var(--overlay);transition:background .3s}
.strength-seg.weak{background:#ef4444}
.strength-seg.fair{background:#f59e0b}
.strength-seg.good{background:#10b981}
.strength-seg.strong{background:#5b4cf5}
.strength-label{font-size:11px;margin-top:5px;font-weight:600;font-family:'JetBrains Mono',monospace;letter-spacing:.02em}
.auth-demo{
  margin-top:20px;padding:14px 16px;
  background:rgba(91,76,245,.08);border:1px solid rgba(91,76,245,.18);
  border-radius:12px;font-size:12.5px;color:var(--surface-text-muted);
  display:flex;align-items:center;gap:10px;
}
.auth-demo strong{color:var(--surface-text);font-weight:600}
.auth-demo-badge{
  background:rgba(91,76,245,.25);color:#a78bfa;
  padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;
  font-family:'JetBrains Mono',monospace;letter-spacing:.05em;flex-shrink:0;
}
.auth-error-box{
  padding:12px 16px;border-radius:10px;margin-bottom:16px;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);
  color:#f87171;font-size:13px;line-height:1.5;letter-spacing:-0.01em;
  display:flex;align-items:flex-start;gap:8px;
}

/* Google Sign-In Button */
.google-btn{
  width:100%;padding:13px 18px;border-radius:12px;
  background:var(--overlay);
  border:1.5px solid var(--surface-border-strong);
  color:var(--surface-text-strong);font-size:14px;font-weight:600;cursor:pointer;
  transition:all .2s;margin-bottom:4px;
  font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-0.01em;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.google-btn:hover{
  background:var(--overlay);border-color:var(--surface-text-faint);
  transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.google-btn:active{transform:scale(.98)}
.google-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.google-btn svg{flex-shrink:0}

/* Social auth separator */
.auth-or{
  display:flex;align-items:center;gap:14px;margin:18px 0;
}
.auth-or span{
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
  font-family:'JetBrains Mono',monospace;
}
.auth-or::before,.auth-or::after{
  content:'';flex:1;height:1px;background:var(--overlay);
}

/* Google profile badge in menu */
.google-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(66,133,244,.15);border:1px solid rgba(66,133,244,.25);
  color:#7eb3ff;padding:1px 7px;border-radius:20px;
  font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;
  letter-spacing:.03em;vertical-align:middle;margin-left:6px;
}


/* ─── USER AVATAR / PROFILE ─────────────────────────── */
.user-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--surface-text-strong);cursor:pointer;
  flex-shrink:0;box-shadow:0 2px 10px rgba(91,76,245,.45);
  transition:all .2s;border:2px solid var(--surface-border-strong);
  font-family:'Outfit',sans-serif;letter-spacing:-0.5px;
}
.user-avatar:hover{transform:scale(1.06);box-shadow:0 4px 16px rgba(91,76,245,.55)}
/* ── Guest auth buttons in header (Sign In / Sign Up) ── */
#authHeaderArea{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
#authHeaderArea > button{flex-shrink:0;white-space:nowrap}

.user-menu{
  position:fixed;top:74px;right:20px;z-index:200;
  background:var(--surface-3);border:1px solid var(--surface-border);
  border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.65);
  padding:8px;min-width:230px;animation:fadeUp .2s cubic-bezier(.16,1,.3,1);
}
.user-menu-header{
  padding:14px 16px 12px;border-bottom:1px solid var(--surface-border);margin-bottom:6px;
  display:flex;align-items:center;gap:12px;
}
.user-menu-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:var(--surface-text-strong);font-family:'Outfit',sans-serif;
}
.user-menu-name{font-size:14px;font-weight:700;color:var(--surface-text-strong);letter-spacing:-0.3px}
.user-menu-email{font-size:12px;color:var(--surface-text-faint);margin-top:2px;letter-spacing:-0.01em}
.user-menu-sep{height:1px;background:var(--overlay);margin:6px 0}
.user-menu-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-radius:10px;font-size:13px;font-weight:600;
  color:var(--surface-text-muted);cursor:pointer;transition:all .15s;
  border:none;background:none;width:100%;text-align:left;
  font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-0.01em;
}
.user-menu-item:hover{background:var(--overlay);color:var(--surface-text-strong)}
.user-menu-item.danger:hover{background:rgba(239,68,68,.12);color:#f87171}

/* ─── QUESTION BANK ─────────────────────────────────── */
.bank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
@media(max-width:900px){.bank-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bank-grid{grid-template-columns:1fr}}
.bank-card{
  background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:22px;cursor:pointer;transition:all .2s;text-align:center;
  box-shadow:var(--shadow);
}
.bank-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.bank-icon{font-size:36px;margin-bottom:12px}
.bank-lang{font-size:17px;font-weight:800;color:var(--text);margin-bottom:6px}
.bank-count{font-size:13px;color:var(--text3);margin-bottom:14px}
.bank-prog{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:12px}
.bank-prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#5b4cf5,#8b5cf6);transition:width .5s}
.bank-gen-btn{
  width:100%;padding:9px;border-radius:var(--radius-xs);font-size:12px;font-weight:700;
  border:none;cursor:pointer;transition:all .2s;font-family:inherit;
}
.bank-gen-btn.ready{background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:var(--surface-text-strong)}
.bank-gen-btn.done{background:#f0fdf4;color:#10b981;border:1px solid #bbf7d0}
.bank-gen-btn.loading{background:var(--bg4);color:var(--text3);cursor:not-allowed}
.lang-detail{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.lang-detail-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px}
.lang-q-item{padding:14px 20px;border-bottom:0.5px solid var(--border);cursor:pointer;transition:background .15s}
.lang-q-item:last-child{border-bottom:none}
.lang-q-item:hover{background:var(--bg3)}
.lang-q-text{font-size:13px;font-weight:600;color:var(--text);margin-bottom:5px}
.lang-q-meta{display:flex;gap:6px;flex-wrap:wrap}
.profile-avatar-lg{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:800;color:var(--surface-text-strong);margin:0 auto 16px;
  box-shadow:0 8px 24px rgba(91,76,245,.35);
}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
@media(max-width:480px){.profile-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE LAYER — hamburger, drawer, tablet/mobile
   Desktop ≥1025px  |  Tablet 641–1024px  |  Mobile ≤640px
═══════════════════════════════════════════════════════ */

/* ── HAMBURGER BUTTON (hidden on desktop) ───────────── */
.hamburger{
  display:none;
  width:40px;height:40px;border-radius:10px;
  background:var(--overlay);
  border:1px solid var(--surface-border);
  cursor:pointer;padding:0;
  align-items:center;justify-content:center;
  flex-direction:column;gap:4px;flex-shrink:0;
  transition:background .2s;
}
.hamburger:hover{background:var(--overlay)}
.hamburger span{
  display:block;width:18px;height:2px;border-radius:2px;
  background:#fff;transition:transform .25s, opacity .2s;
}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── MOBILE DRAWER ──────────────────────────────────── */
.drawer-overlay{
  position:fixed;inset:0;z-index:998;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.drawer-overlay.open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;z-index:999;
  width:min(320px,86vw);height:100vh;
  background:var(--header-bg);
  border-left:1px solid var(--surface-border);
  transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;
  padding:20px 18px;overflow-y:auto;
  box-shadow:-20px 0 50px rgba(0,0,0,.5);
}
.drawer.open{transform:translateX(0)}

.drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:18px;margin-bottom:14px;
  border-bottom:1px solid var(--surface-border);
}
.drawer-title{
  font-family:'Outfit',sans-serif;font-weight:800;
  font-size:18px;color:var(--surface-text-strong);letter-spacing:-.02em;
}
.drawer-close{
  width:36px;height:36px;border-radius:10px;
  background:var(--overlay);border:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.drawer-close:hover{background:var(--overlay)}

.drawer-nav{display:flex;flex-direction:column;gap:4px}
.drawer-btn{
  display:flex;align-items:center;gap:12px;
  background:none;border:none;padding:13px 14px;
  border-radius:10px;color:var(--surface-text);
  font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;text-align:left;width:100%;
  transition:background .18s,color .18s;min-height:44px;
}
.drawer-btn:hover,.drawer-btn:focus-visible{
  background:var(--overlay);color:var(--surface-text-strong);
}
.drawer-btn-icon{font-size:18px;width:22px;text-align:center;flex-shrink:0}
.drawer-sep{height:1px;background:var(--overlay);margin:10px 2px}

.drawer-cta{
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--surface-border);
  display:flex;flex-direction:column;gap:10px;
}
.drawer-cta .start-btn{width:100%;padding:13px;font-size:14px;min-height:48px}
.drawer-pricing-btn{
  background:linear-gradient(135deg,rgba(91,76,245,.2),rgba(139,92,246,.2));
  border:1px solid rgba(139,92,246,.4);
  color:#a78bfa;padding:12px;border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
  min-height:44px;
}
.drawer-pricing-btn:hover{
  background:linear-gradient(135deg,rgba(91,76,245,.35),rgba(139,92,246,.35));
}

/* Prevent body scroll when drawer is open */
body.no-scroll{overflow:hidden}

/* ── COLLAPSIBLE SIDE PANELS (Practice / Agent / Coach) ── */
.side-panel-btn{
  display:none;
  align-items:center;gap:8px;flex-shrink:0;
  background:rgba(91,76,245,.14);
  border:1px solid rgba(91,76,245,.3);
  color:#a78bfa;padding:10px 16px;border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:-.01em;
  transition:all .18s;margin-bottom:14px;align-self:flex-start;
  min-height:40px;
}
.side-panel-btn:hover{background:rgba(91,76,245,.24);border-color:rgba(91,76,245,.5)}
.side-panel-btn-icon{font-size:16px;line-height:1}

.side-panel-overlay{
  position:fixed;inset:0;z-index:150;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.side-panel-overlay.open{opacity:1;pointer-events:auto}

/* ── TABLET (641–1024px) ────────────────────────────── */
@media (max-width:1024px){
  .hamburger{display:flex}
  .nav-center{display:none}
  .header{padding:0 20px;gap:12px}
  .start-btn{padding:8px 14px;font-size:12px}
  .ai-live-pill{padding:6px 11px;font-size:11px}
  .page,.page-narrow,.page-wide{padding:32px 20px 56px}
  .mode-grid{grid-template-columns:repeat(2,1fr)}

  /* Reveal filter/plan trigger buttons */
  .side-panel-btn{display:inline-flex}

  /* Turn sidebars into slide-in drawers */
  .prac-sidebar, .agent-sidebar, .ai-sidebar{
    display:flex !important;
    position:fixed !important;top:68px;left:0;z-index:151;
    width:min(300px,85vw);height:calc(100vh - 68px);
    transform:translateX(-100%);transition:transform .28s ease;
    box-shadow:10px 0 40px rgba(0,0,0,.5);
    border-right:1px solid var(--surface-border);
  }
  .prac-sidebar.open, .agent-sidebar.open, .ai-sidebar.open{
    transform:translateX(0);
  }

  /* Main panels breathe into full width */
  .prac-main, .agent-main, .ai-main{width:100%}

  /* Hide desktop sidebar resizer on tablet/mobile (drawer mode) */
  .prac-resizer{display:none}
}

/* ── MOBILE (≤640px) ────────────────────────────────── */
@media (max-width:640px){
  .header{
    padding:0 14px;height:60px;gap:8px;
    grid-template-columns:auto 1fr auto;
  }
  .logo-icon{width:32px;height:32px;font-size:16px}
  .logo-wordmark{height:21px}
  .logo-version{display:none}
  .ai-live-pill,.settings-btn,.start-btn{display:none}
  .nav-right{gap:6px}

  /* Shrink user menu dropdown */
  .user-menu{right:14px !important;left:14px !important;width:auto !important;max-width:none !important}

  /* Main content density */
  .page,.page-narrow,.page-wide{padding:20px 14px 40px}
  .mode-grid,.res-cards,.dash-stats,.bank-grid,.features-row,.stat-strip{
    grid-template-columns:1fr !important;gap:12px;
  }

  /* Headings a touch smaller */
  .hero h1{font-size:clamp(26px,7vw,36px)}
  h1{font-size:clamp(26px,7vw,42px)}

  /* Touch targets */
  .nav-btn,.drawer-btn,.opt-btn,.chip,.exp-tab{min-height:44px}
  .opt-btn{padding:14px 15px}

  /* Prevent horizontal overflow from wide tables / long URLs */
  body{overflow-x:hidden}
  pre,code{word-break:break-word;white-space:pre-wrap}

  /* Toast fills width cleanly */
  .toast-wrap{left:14px;right:14px}
  .toast{width:100%}
}

/* ── TINY PHONES (≤380px) ───────────────────────────── */
@media (max-width:380px){
  .logo-wordmark{height:18px}
  .hamburger{width:36px;height:36px}
}

/* ── LANDSCAPE PHONES / SHORT VIEWPORTS ─────────────── */
@media (max-height:500px) and (max-width:900px){
  .header{position:relative}
  .drawer{padding-top:14px}
}

/* ═══════════════════════════════════════════════════════
   🎙 VOICE INTERVIEW AGENT
═══════════════════════════════════════════════════════ */
.voice-wrap{
  padding:24px 32px;max-width:1400px;margin:0 auto;
  display:flex;flex-direction:column;gap:18px;
  min-height:calc(100vh - 80px);
}
.voice-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.voice-title{
  font-family:"Outfit",sans-serif;font-size:26px;font-weight:800;
  color:var(--surface-text-strong);letter-spacing:-.5px;
}
.voice-subtitle{font-size:13px;color:var(--surface-text-faint);margin-top:2px}
.voice-status-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:var(--overlay);border:1px solid var(--surface-border);
  font-size:12px;font-weight:700;color:var(--surface-text);
}
.voice-status-dot{
  width:8px;height:8px;border-radius:50%;
  background:#9ca3af;box-shadow:0 0 0 0 rgba(156,163,175,.6);
}
.voice-status-pill.listening{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.45);color:#fb7185}
.voice-status-pill.listening .voice-status-dot{background:#fb7185;animation:vPulse 1.2s infinite}
.voice-status-pill.speaking{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.45);color:#a78bfa}
.voice-status-pill.speaking .voice-status-dot{background:#a78bfa;animation:vPulse 1.2s infinite}
.voice-status-pill.thinking{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.45);color:#93c5fd}
.voice-status-pill.thinking .voice-status-dot{background:#93c5fd;animation:vPulse 1.2s infinite}
@keyframes vPulse{
  0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}
  50%{box-shadow:0 0 0 6px transparent;opacity:.6}
}

.voice-body{
  display:grid;grid-template-columns:320px 1fr;gap:18px;flex:1;min-height:0;
}
.voice-sidebar{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:16px;
  max-height:calc(100vh - 160px);overflow-y:auto;
  /* Thin custom scrollbar so it doesn't visually compete with content */
  scrollbar-width:thin;
  scrollbar-color:rgba(139,92,246,.4) transparent;
}
.voice-sidebar::-webkit-scrollbar{width:6px}
.voice-sidebar::-webkit-scrollbar-track{background:transparent}
.voice-sidebar::-webkit-scrollbar-thumb{
  background:rgba(139,92,246,.3);border-radius:3px;
}
.voice-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,.5)}
/* Sections inside the sidebar — consistent padding/borders for every group */
.voice-sidebar .voice-section{
  display:flex;flex-direction:column;gap:8px;
  padding-bottom:14px;border-bottom:1px solid var(--surface-border);
}
.voice-sidebar .voice-section:last-child{padding-bottom:0;border-bottom:none}
.voice-sidebar .voice-section-title{
  margin-bottom:2px;
}
/* Mode buttons (Engine + Question Source card) — tighten padding for sidebar */
.voice-sidebar .voice-mode-btn{padding:11px 13px}
.voice-sidebar .voice-mode-row{gap:6px}
.voice-main{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px;
  min-height:520px;position:relative;
}
.voice-section{display:flex;flex-direction:column;gap:8px}
.voice-section-title{
  font-family:"Outfit",sans-serif;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;color:var(--surface-text-faint);
}
.voice-chips{display:flex;flex-wrap:wrap;gap:5px}
/* Role chips have long labels ("Full-Stack Engineer") — render them
   as full-width list items in the narrow sidebar so they look intentional
   instead of awkwardly stacked chips. Other chip rows (seniority, focus,
   question count) stay horizontal. */
.voice-sidebar .voice-chips-role{flex-direction:column;gap:4px}
.voice-sidebar .voice-chips-role .voice-chip{
  width:100%;justify-content:flex-start;
  padding:8px 12px;font-size:12.5px;
}
.voice-sidebar .voice-chips-role .voice-chip-icon{font-size:14px;flex-shrink:0}
/* Non-role chips in the sidebar (seniority, focus, question count) — keep
   horizontal but tighten so they wrap cleanly at narrow widths */
.voice-sidebar .voice-chips:not(.voice-chips-role) .voice-chip{
  padding:6px 10px;font-size:11.5px;
}
.voice-sidebar .voice-num-row{gap:5px}
.voice-sidebar .voice-num-row .voice-chip{flex:1;justify-content:center;min-width:0}
.voice-chip{
  background:var(--overlay);border:1px solid var(--surface-border);
  color:var(--surface-text);padding:7px 11px;border-radius:10px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;transition:all .15s;
}
.voice-chip:hover{border-color:rgba(139,92,246,.5);color:var(--surface-text-strong)}
.voice-chip.active{
  background:linear-gradient(135deg,rgba(251,113,133,.25),rgba(244,63,94,.25));
  border-color:rgba(251,113,133,.6);color:#fb7185;
}
.voice-chip-icon{font-size:14px}
.voice-num-row{display:flex;gap:6px}
.voice-num-row .voice-chip{flex:1;justify-content:center}

.voice-history{display:flex;flex-direction:column;gap:6px}
.voice-history-item{
  background:var(--overlay);border:1px solid var(--surface-border);
  padding:10px;border-radius:10px;cursor:pointer;text-align:left;
  font-family:inherit;transition:all .15s;width:100%;
}
.voice-history-item:hover{border-color:rgba(251,113,133,.5);transform:translateY(-1px)}
.voice-history-top{display:flex;align-items:center;gap:10px}
.voice-history-score{
  font-family:"Outfit",sans-serif;font-size:22px;font-weight:900;
  min-width:36px;text-align:center;
}
.voice-history-title{font-size:12px;font-weight:700;color:var(--surface-text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-history-sub{font-size:10px;color:var(--surface-text-faint);margin-top:2px}

/* TRANSCRIPT */
.voice-transcript{
  flex:1;overflow-y:auto;background:var(--overlay);
  border:1px solid var(--surface-border);border-radius:12px;
  padding:18px;display:flex;flex-direction:column;gap:14px;min-height:320px;
}
.voice-transcript.readonly{max-height:420px}
.voice-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 20px;flex:1;
}

/* ═══════════════════════════════════════════════════════
   AI INTERVIEW PRE-FLIGHT WIZARD
   Structured 7-step flow (welcome → terms → brief → system →
   photo → mic → fullscreen). Modeled on professional AI
   interview platforms.
═══════════════════════════════════════════════════════ */
.pq-shell{
  max-width:920px;margin:0 auto;padding:32px 24px 60px;
  display:flex;flex-direction:column;gap:24px;
  animation:fadeUp .35s ease;
}

/* Step indicator strip */
.pq-track{
  display:flex;align-items:center;gap:0;padding:14px 18px;
  border-radius:14px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  overflow-x:auto;
}
.pq-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.pq-step-circle{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:13px;
  background:rgba(255,255,255,.06);color:var(--surface-text-faint);
  border:2px solid transparent;transition:all .2s;
}
.pq-step.done .pq-step-circle{
  background:linear-gradient(135deg,#10b981,#34d399);color:#fff;
}
.pq-step.active .pq-step-circle{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;
  box-shadow:0 0 0 4px rgba(91,76,245,.18);
}
.pq-step-label{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--surface-text-faint);
}
.pq-step.active .pq-step-label{color:var(--surface-text-strong)}
.pq-step.done .pq-step-label{color:#34d399}
.pq-step-line{
  flex:1;height:2px;background:var(--surface-border);min-width:18px;
  margin:0 4px;align-self:flex-start;margin-top:15px;
  transition:background .3s;
}
.pq-step-line.done{background:linear-gradient(90deg,#10b981,#34d399)}

/* Card container */
.pq-card{
  padding:36px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  box-shadow:0 8px 32px rgba(0,0,0,.18);
}
@media(max-width:680px){.pq-card{padding:24px 18px}}

/* Buttons */
.pq-btn-primary,.pq-btn-secondary{
  padding:11px 22px;border-radius:11px;
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:800;letter-spacing:.01em;
  cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.pq-btn-primary{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;border:none;
  box-shadow:0 4px 14px rgba(91,76,245,.35);
}
.pq-btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 22px rgba(91,76,245,.45)}
.pq-btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.pq-btn-secondary{
  background:transparent;color:var(--surface-text-muted);
  border:1px solid var(--surface-border);
}
.pq-btn-secondary:hover{background:rgba(91,76,245,.08);color:var(--surface-text-strong);border-color:rgba(91,76,245,.4)}
.pq-btn-lg{padding:15px 32px;font-size:15px}
.pq-btn-row{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.pq-btn-row .pq-btn-secondary:first-child{margin-right:auto}

/* Step heading */
.pq-step-title{
  font-family:'Outfit',sans-serif;font-size:24px;font-weight:800;
  color:var(--surface-text-strong);margin:0 0 6px;letter-spacing:-.02em;line-height:1.2;
}
.pq-step-sub{
  color:var(--surface-text-muted);font-size:14px;margin:0 0 20px;line-height:1.6;
}

/* WELCOME */
.pq-welcome{text-align:center;padding:20px 10px}
.pq-welcome-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#a78bfa;
  padding:6px 14px;border-radius:999px;
  background:rgba(91,76,245,.12);border:1px solid rgba(139,92,246,.3);
  margin-bottom:18px;
}
.pq-dot{
  width:6px;height:6px;border-radius:50%;background:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.25);animation:pqDot 2.4s infinite;
}
@keyframes pqDot{0%,100%{opacity:1}50%{opacity:.5}}
.pq-welcome-title{
  font-family:'Outfit','Fraunces',sans-serif;
  font-size:clamp(32px,5vw,52px);font-weight:900;
  color:var(--surface-text-strong);margin:0 0 14px;
  letter-spacing:-.025em;line-height:1.05;
}
.pq-grad{
  background:linear-gradient(135deg,#fb7185,#a78bfa,#5b4cf5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pq-welcome-sub{
  font-size:15px;color:var(--surface-text-muted);
  max-width:540px;margin:0 auto 22px;line-height:1.7;
}
.pq-welcome-meta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-bottom:26px;
}
.pq-welcome-meta-item{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;color:var(--surface-text-faint);font-weight:600;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--surface-border);
}
.pq-welcome-tip{
  font-size:11px;color:var(--surface-text-faint);margin-top:14px;
}
.pq-welcome-cta-row{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}

/* Inline-editable Brief selects */
.pq-brief-edit{align-items:center !important}
.pq-inline-select{
  padding:6px 10px;border-radius:7px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;min-width:200px;text-align:right;
  text-align-last:right;
}
.pq-inline-select:hover{border-color:rgba(91,76,245,.5)}
.pq-inline-select:focus{outline:none;border-color:#5b4cf5;box-shadow:0 0 0 3px rgba(91,76,245,.15)}

/* TERMS */
.pq-terms .pq-disclaimer{
  padding:18px 20px;border-radius:11px;
  background:var(--surface-1);border:1px solid var(--surface-border);
  font-size:13px;color:var(--surface-text-muted);line-height:1.7;
  max-height:240px;overflow-y:auto;
}
.pq-terms .pq-disclaimer p{margin:0 0 10px}
.pq-terms .pq-disclaimer p:last-child{margin-bottom:0}
.pq-terms .pq-disclaimer strong{color:var(--surface-text-strong);font-weight:700}
.pq-check-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 16px;border-radius:10px;
  background:rgba(91,76,245,.06);border:1px solid rgba(139,92,246,.25);
  margin-top:16px;cursor:pointer;
  font-size:13px;color:var(--surface-text-strong);line-height:1.5;
}
.pq-check-row input{
  width:18px;height:18px;flex-shrink:0;margin-top:2px;cursor:pointer;
  accent-color:#5b4cf5;
}
.pq-check-row a{color:#a78bfa;text-decoration:underline}

/* BRIEF (interview details) */
.pq-brief-banner{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:11px;
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.04));
  border:1px solid rgba(16,185,129,.3);
  font-size:14px;color:var(--surface-text-strong);
  margin-bottom:20px;
}
.pq-brief-banner strong{color:#34d399}
.pq-brief-icon{font-size:18px}
.pq-brief-body{
  display:flex;gap:20px;align-items:flex-start;
  padding:20px;border-radius:11px;
  background:var(--surface-1);border:1px solid var(--surface-border);
}
@media(max-width:560px){.pq-brief-body{flex-direction:column}}
.pq-brief-avatar{
  width:60px;height:60px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;
  display:flex;align-items:center;justify-content:center;
}
.pq-brief-rows{flex:1;display:flex;flex-direction:column;gap:0}
.pq-brief-row{
  display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--surface-border);
  font-size:13px;
}
.pq-brief-row:last-child{border-bottom:none}
.pq-brief-key{color:var(--surface-text-faint);font-weight:600;flex-shrink:0}
.pq-brief-val{color:var(--surface-text-strong);font-weight:700;text-align:right}
.pq-brief-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.pq-brief-actions .pq-btn-secondary:first-child{margin-right:auto}

/* SYSTEM CHECK */
.pq-system-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin-bottom:20px;
}
.pq-system-card{
  padding:18px 14px;border-radius:11px;text-align:center;
  background:var(--surface-1);border:1px solid var(--surface-border);
  transition:all .2s;
}
.pq-system-card.pq-state-ok{
  background:linear-gradient(180deg,rgba(16,185,129,.08),rgba(16,185,129,.02));
  border-color:rgba(16,185,129,.4);
}
.pq-system-card.pq-state-fail{
  background:linear-gradient(180deg,rgba(251,113,133,.08),rgba(251,113,133,.02));
  border-color:rgba(251,113,133,.4);
}
.pq-system-card.pq-state-checking{border-color:rgba(91,76,245,.4)}
.pq-system-icon{font-size:28px;margin-bottom:6px}
.pq-system-name{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;
  color:var(--surface-text-strong);margin-bottom:6px;
}
.pq-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
}
.pq-status.ok{background:rgba(16,185,129,.18);color:#34d399}
.pq-status.fail{background:rgba(251,113,133,.18);color:#fb7185}
.pq-status.checking{background:rgba(91,76,245,.18);color:#a78bfa}
.pq-status.pending{background:rgba(255,255,255,.06);color:var(--surface-text-faint)}
.pq-spinner{
  width:10px;height:10px;border-radius:50%;
  border:2px solid rgba(167,139,250,.3);border-top-color:#a78bfa;
  animation:pqSpin .8s linear infinite;
}
@keyframes pqSpin{to{transform:rotate(360deg)}}
.pq-warn{
  padding:12px 16px;border-radius:10px;
  background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.3);
  color:#fb7185;font-size:13px;font-weight:600;
  margin-bottom:18px;
}

/* PHOTO CAPTURE */
.pq-photo-stage{
  display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:8px;
}
@media(max-width:680px){.pq-photo-stage{grid-template-columns:1fr}}
.pq-photo-frame{
  position:relative;aspect-ratio:4/3;width:100%;
  border-radius:14px;overflow:hidden;
  background:#0d0d18;border:1px solid var(--surface-border);
}
.pq-photo-frame video{
  width:100%;height:100%;object-fit:cover;
  transform:scaleX(-1);
}
.pq-photo-circle{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:55%;aspect-ratio:1;border-radius:50%;
  border:3px dashed rgba(251,113,133,.7);
  pointer-events:none;transition:border-color .3s;
}
.pq-photo-circle.aligned{border-color:#34d399;border-style:solid}
.pq-photo-status{
  position:absolute;bottom:12px;left:12px;right:12px;
  text-align:center;font-size:12px;font-weight:600;
  padding:7px 12px;border-radius:8px;
  background:rgba(0,0,0,.65);color:#fff;backdrop-filter:blur(6px);
}
.pq-photo-tips{display:flex;flex-direction:column;gap:10px}
.pq-photo-tip{
  display:flex;gap:10px;align-items:flex-start;
  padding:14px 16px;border-radius:11px;
  background:var(--surface-1);border:1px solid var(--surface-border);
  font-size:13px;color:var(--surface-text-muted);line-height:1.5;
}
.pq-photo-tip strong{color:var(--surface-text-strong);font-weight:700}
.pq-tip-icon{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#fff;
}
.pq-tip-icon.ok{background:#10b981}
.pq-tip-icon.no{background:#fb7185}
.pq-photo-preview-wrap{display:flex;justify-content:center;margin:20px 0}
.pq-photo-result{
  width:240px;height:180px;object-fit:cover;
  border-radius:14px;border:3px solid #34d399;
  box-shadow:0 6px 22px rgba(16,185,129,.25);
}

/* MIC TEST */
.pq-mic-stage{
  text-align:center;padding:30px 20px;
  border-radius:14px;background:var(--surface-1);border:1px solid var(--surface-border);
  margin-bottom:8px;
}
.pq-mic-dial{
  width:100px;height:100px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-size:38px;
  position:relative;box-shadow:0 8px 24px rgba(91,76,245,.4);
}
.pq-mic-dial-pulse{
  position:absolute;inset:-6px;border-radius:50%;
  border:3px solid rgba(91,76,245,.4);opacity:0;
}
.pq-mic-dial.listening .pq-mic-dial-pulse{
  animation:pqMicPulse 1.5s infinite;
}
@keyframes pqMicPulse{
  0%{opacity:.6;transform:scale(1)}
  100%{opacity:0;transform:scale(1.4)}
}
.pq-mic-instruction{
  font-size:13px;color:var(--surface-text-faint);font-weight:600;margin-bottom:8px;
}
.pq-mic-phrase{
  margin:0 auto 16px;padding:12px 18px;max-width:480px;
  border-radius:11px;
  background:rgba(91,76,245,.08);border:1px solid rgba(139,92,246,.3);
  color:var(--surface-text-strong);font-size:15px;font-weight:600;
}
.pq-mic-meter{
  display:flex;gap:3px;align-items:flex-end;height:24px;
  max-width:300px;margin:0 auto 14px;justify-content:center;
}
.pq-mic-bar{
  width:9px;border-radius:2px;
  background:rgba(255,255,255,.08);height:30%;
  transition:background .08s, height .08s;
}
.pq-mic-bar.on{background:#34d399;height:90%}
.pq-mic-bar:nth-child(n+10).on{background:#fbbf24}
.pq-mic-bar:nth-child(n+13).on{background:#fb7185}
.pq-mic-status{
  font-size:13px;color:var(--surface-text-muted);font-weight:600;
}

/* FULLSCREEN / GO LIVE */
.pq-fullscreen{text-align:center}
.pq-fullscreen-icon{font-size:48px;margin-bottom:10px}
.pq-prereq-summary{
  display:flex;flex-direction:column;gap:8px;
  padding:18px 22px;border-radius:11px;
  background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(16,185,129,.02));
  border:1px solid rgba(16,185,129,.25);
  margin:18px 0;text-align:left;max-width:480px;
  margin-left:auto;margin-right:auto;
}
.pq-summary-item{
  display:flex;gap:10px;align-items:center;
  font-size:13.5px;color:var(--surface-text-strong);font-weight:600;
}
.pq-summary-icon{font-size:16px}
.pq-fullscreen-warn{
  padding:14px 18px;border-radius:11px;text-align:left;
  background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.3);
  font-size:12.5px;color:var(--surface-text-muted);line-height:1.6;
  max-width:520px;margin:0 auto 18px;
}
.pq-fullscreen-warn strong{color:#fbbf24;font-weight:700}
.pq-fullscreen-warn ul{margin:8px 0 0;padding-left:18px}
.pq-fullscreen-warn li{margin-bottom:4px}

/* ═══════════════════════════════════════════════════════
   AI INTERVIEW STUDIO — premium pre-flight
   Two-column webcam/mic + settings, presets, polished hero
═══════════════════════════════════════════════════════ */
.vs-studio{
  max-width:1140px;margin:0 auto;padding:32px 24px 60px;
  display:flex;flex-direction:column;gap:28px;
  animation:fadeUp .35s ease;
}

/* HERO */
.vs-hero{text-align:center;padding:8px 0 4px}
.vs-hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:#a78bfa;
  padding:6px 14px;border-radius:999px;
  background:rgba(91,76,245,.12);border:1px solid rgba(139,92,246,.3);
  margin-bottom:14px;
}
.vs-hero-dot{
  width:6px;height:6px;border-radius:50%;background:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.25);
  animation:vsHeroDot 2.4s infinite;
}
@keyframes vsHeroDot{0%,100%{opacity:1}50%{opacity:.5}}
.vs-hero-title{
  font-family:'Outfit','Fraunces',sans-serif;
  font-size:clamp(36px,5vw,56px);font-weight:900;
  color:var(--surface-text-strong);margin:0 0 12px;
  letter-spacing:-.03em;line-height:1.05;
}
.vs-hero-sub{
  font-size:16px;color:var(--surface-text-muted);
  max-width:560px;margin:0 auto;line-height:1.6;
}
.vs-hero-sub strong{color:#a78bfa;font-weight:700}

/* PRESETS */
.vs-presets{
  display:flex;flex-direction:column;gap:8px;
}
.vs-presets-label{
  font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--surface-text-faint);text-align:center;
}
.vs-preset-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:8px;
}
.vs-preset{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:11px;text-align:left;
  background:var(--surface-2);border:1px solid var(--surface-border);
  cursor:pointer;font-family:inherit;color:var(--surface-text);
  transition:all .15s;
}
.vs-preset:hover{
  border-color:rgba(91,76,245,.5);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(91,76,245,.12);
}
.vs-preset.active{
  background:linear-gradient(135deg,rgba(91,76,245,.18),rgba(139,92,246,.06));
  border-color:rgba(139,92,246,.6);
}
.vs-preset-icon{font-size:20px;flex-shrink:0}
.vs-preset-body{display:flex;flex-direction:column;min-width:0}
.vs-preset-title{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;
  color:var(--surface-text-strong);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vs-preset-sub{
  font-size:10.5px;color:var(--surface-text-faint);font-weight:600;margin-top:2px;
}

/* MAIN STUDIO CARD */
.vs-studio-card{
  display:grid;grid-template-columns:1fr 1.05fr;gap:24px;
  padding:24px;border-radius:18px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  box-shadow:0 8px 32px rgba(0,0,0,.18);
}
@media(max-width:880px){
  .vs-studio-card{grid-template-columns:1fr;padding:18px}
}

.vs-studio-left{display:flex;flex-direction:column;gap:14px}
.vs-studio-right{display:flex;flex-direction:column;gap:14px}

/* WEBCAM PREVIEW */
.vs-preview-frame{
  position:relative;aspect-ratio:4/3;width:100%;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#1d3ed1,#1730a8);
  border:1px solid var(--surface-border);
  box-shadow:0 8px 24px rgba(29,62,209,.25);
}
.vs-preview-frame video{
  width:100%;height:100%;object-fit:cover;
  transform:scaleX(-1);background:#0d0d18;
}
.vs-preview-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.vs-preview-overlay > *{pointer-events:auto}
.vs-enable-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:11px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .15s;
}
.vs-enable-btn:hover{background:rgba(0,0,0,.75);transform:translateY(-1px)}
.vs-live-badge{
  position:absolute;top:12px;left:12px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:rgba(0,0,0,.65);backdrop-filter:blur(10px);
  font-size:10.5px;font-weight:800;color:#fff;letter-spacing:.06em;
}
.vs-live-dot{
  width:7px;height:7px;border-radius:50%;background:#f87171;
  animation:vsLive 1.5s infinite;
}
@keyframes vsLive{0%,100%{opacity:1}50%{opacity:.4}}
.vs-preview-error{
  position:absolute;bottom:12px;left:12px;right:12px;
  padding:8px 12px;border-radius:8px;
  background:rgba(251,113,133,.9);color:#fff;
  font-size:12px;font-weight:600;
}

/* MIC LEVEL METER */
.vs-mic-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:11px;
  background:var(--surface-1);border:1px solid var(--surface-border);
}
.vs-mic-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;flex-shrink:0;
}
.vs-mic-meter{display:flex;gap:2px;flex:1;height:18px;align-items:flex-end}
.vs-mic-bar{
  flex:1;border-radius:2px;
  background:rgba(255,255,255,.08);
  transition:background .08s, height .08s;
  height:30%;
}
.vs-mic-bar:nth-child(1).on,.vs-mic-bar:nth-child(2).on,.vs-mic-bar:nth-child(3).on{
  background:#34d399;height:55%;
}
.vs-mic-bar:nth-child(4).on,.vs-mic-bar:nth-child(5).on,.vs-mic-bar:nth-child(6).on{
  background:#34d399;height:75%;
}
.vs-mic-bar:nth-child(7).on,.vs-mic-bar:nth-child(8).on{
  background:#fbbf24;height:90%;
}
.vs-mic-bar:nth-child(9).on,.vs-mic-bar:nth-child(10).on{
  background:#fb7185;height:100%;
}

.vs-sample-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:11px;
  background:rgba(91,76,245,.1);border:1px solid rgba(91,76,245,.3);
  color:#a78bfa;font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:all .15s;
}
.vs-sample-btn:hover:not(:disabled){background:rgba(91,76,245,.18);border-color:#5b4cf5;color:#fff}
.vs-sample-btn:disabled{opacity:.7;cursor:wait}

/* RIGHT — SETTINGS */
.vs-field{display:flex;flex-direction:column;gap:6px}
.vs-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vs-field-label{
  font-size:11px;font-weight:800;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;
}
.vs-field-label strong{color:var(--surface-text-strong);font-weight:800;text-transform:none;letter-spacing:0;font-size:13px}
.vs-select{
  padding:10px 13px;border-radius:9px;
  background:var(--surface-1);border:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-family:inherit;font-size:13px;
  cursor:pointer;
}
.vs-select:focus{outline:none;border-color:#5b4cf5;box-shadow:0 0 0 3px rgba(91,76,245,.15)}

.vs-range{
  width:100%;height:5px;border-radius:5px;
  background:rgba(255,255,255,.08);appearance:none;-webkit-appearance:none;cursor:pointer;
}
.vs-range::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  border:2px solid #fff;cursor:pointer;
  box-shadow:0 2px 8px rgba(91,76,245,.4);
}
.vs-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  border:2px solid #fff;cursor:pointer;
}
.vs-range-marks{
  display:flex;justify-content:space-between;
  font-size:10px;color:var(--surface-text-faint);font-weight:600;
}

/* ENGINES (reused styles, tighter for the studio) */
.vs-engines{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vs-engine{
  text-align:left;padding:11px 13px;border-radius:10px;
  background:var(--surface-1);border:1px solid var(--surface-border);
  cursor:pointer;font-family:inherit;color:var(--surface-text);
  transition:all .15s;
}
.vs-engine:hover{border-color:rgba(91,76,245,.5)}
.vs-engine.active{
  background:linear-gradient(135deg,rgba(91,76,245,.18),rgba(139,92,246,.06));
  border-color:rgba(139,92,246,.6);
}
.vs-engine-head{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.vs-engine-icon{font-size:14px}
.vs-engine-name{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:12px;
  color:var(--surface-text-strong);
}
.vs-engine-tag{
  font-size:9px;font-weight:800;letter-spacing:.04em;
  padding:1px 6px;border-radius:999px;text-transform:uppercase;margin-left:auto;
}
.vs-engine-tag.free{background:rgba(16,185,129,.18);color:#34d399}
.vs-engine-tag.paid{background:rgba(245,158,11,.15);color:#fbbf24}
.vs-engine-desc{
  font-size:10.5px;color:var(--surface-text-faint);margin:0;line-height:1.4;
}

/* SUMMARY STATS */
.vs-summary{
  display:flex;align-items:stretch;gap:0;
  padding:14px;border-radius:11px;
  background:linear-gradient(135deg,rgba(91,76,245,.06),rgba(139,92,246,.02));
  border:1px solid rgba(139,92,246,.2);
}
.vs-summary-stat{flex:1;text-align:center;padding:0 8px}
.vs-summary-divider{width:1px;background:rgba(139,92,246,.2)}
.vs-summary-val{
  font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;
  color:var(--surface-text-strong);line-height:1;letter-spacing:-.02em;
}
.vs-summary-val span{font-size:11px;color:var(--surface-text-faint);font-weight:600;margin-left:3px}
.vs-summary-lbl{
  font-size:10px;color:var(--surface-text-faint);font-weight:700;margin-top:5px;
  text-transform:uppercase;letter-spacing:.5px;
}

/* START CTA */
.vs-start-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:15px;border-radius:13px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;border:none;cursor:pointer;
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 6px 22px rgba(91,76,245,.4);transition:all .2s;
}
.vs-start-btn:hover:not(:disabled){
  transform:translateY(-2px);box-shadow:0 12px 32px rgba(91,76,245,.5);
}
.vs-start-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.vs-cta-tip{font-size:11.5px;color:var(--surface-text-faint);text-align:center}
.vs-cta-warn{font-size:11.5px;color:#fb7185;text-align:center}

/* SAMPLE QUESTION */
.vs-sample-details{
  font-size:12px;color:var(--surface-text-muted);
}
.vs-sample-details summary{
  cursor:pointer;font-weight:700;color:#a78bfa;user-select:none;outline:none;
  padding:4px 0;
}
.vs-sample-details summary:hover{color:#c4b5fd}
.vs-sample-quote{
  margin:8px 0 0;padding:10px 14px;
  border-left:3px solid rgba(139,92,246,.5);
  font-size:13px;color:var(--surface-text-strong);font-style:italic;line-height:1.6;
  background:rgba(255,255,255,.03);border-radius:0 8px 8px 0;
}

/* PAST SESSIONS — kept consistent with v1 */
.vs-history{margin-top:8px}
.vs-history-head{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;
}
.vs-history-head h3{
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;
  color:var(--surface-text-strong);margin:0;letter-spacing:-.01em;
}
.vs-history-count{font-size:12px;color:var(--surface-text-faint);font-weight:600}
.vs-history-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
}
.vs-history-card{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  cursor:pointer;font-family:inherit;color:var(--surface-text);
  transition:all .15s;text-align:left;
}
.vs-history-card:hover{border-color:rgba(91,76,245,.5);transform:translateY(-1px)}
.vs-history-score{
  flex-shrink:0;width:42px;height:42px;border-radius:10px;
  background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:18px;
}
.vs-history-meta{flex:1;min-width:0}
.vs-history-title{
  font-weight:700;font-size:13px;color:var(--surface-text-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;
}
.vs-history-sub{
  font-size:11px;color:var(--surface-text-faint);margin-top:3px;font-weight:600;
}

/* (Legacy single-column setup classes kept below, now unused but harmless) */
.vs-shell{
  max-width:880px;margin:0 auto;padding:36px 24px 80px;
  display:flex;flex-direction:column;gap:36px;
  animation:fadeUp .35s ease;
}

/* Header */
.vs-header{text-align:center}
.vs-eyebrow{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:#a78bfa;
  padding:5px 14px;border-radius:999px;
  background:rgba(91,76,245,.12);border:1px solid rgba(139,92,246,.3);
  margin-bottom:14px;
}
.vs-title{
  font-family:'Outfit','Fraunces',sans-serif;
  font-size:clamp(28px,4vw,40px);font-weight:800;
  color:var(--surface-text-strong);margin:0 0 10px;
  letter-spacing:-.025em;line-height:1.1;
}
.vs-sub{
  font-size:15px;color:var(--surface-text-muted);
  max-width:560px;margin:0 auto;line-height:1.6;
}

/* Step block */
.vs-step{display:flex;flex-direction:column;gap:14px}
.vs-step-head{display:flex;align-items:flex-start;gap:14px}
.vs-step-num{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;font-family:'Outfit',sans-serif;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(91,76,245,.3);
}
.vs-step-title{
  font-family:'Outfit',sans-serif;font-size:18px;font-weight:800;
  color:var(--surface-text-strong);margin:0;letter-spacing:-.01em;line-height:1.2;
}
.vs-step-sub{
  font-size:13px;color:var(--surface-text-faint);margin:4px 0 0;line-height:1.5;
}

/* Role grid */
.vs-role-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
}
.vs-role-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 10px 14px;border-radius:13px;text-align:center;
  background:var(--surface-2);border:1px solid var(--surface-border);
  cursor:pointer;font-family:inherit;color:var(--surface-text);
  transition:all .15s ease;
}
.vs-role-card:hover{
  border-color:rgba(91,76,245,.5);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(91,76,245,.12);
}
.vs-role-card.active{
  background:linear-gradient(180deg,rgba(91,76,245,.18),rgba(139,92,246,.05));
  border-color:rgba(139,92,246,.6);
  box-shadow:0 0 0 3px rgba(91,76,245,.15);
}
.vs-role-icon{
  font-size:26px;line-height:1;
  width:44px;height:44px;border-radius:11px;
  background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:2px;
}
.vs-role-card.active .vs-role-icon{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
}
.vs-role-name{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;
  color:var(--surface-text-strong);line-height:1.2;
}
.vs-role-count{font-size:11px;color:var(--surface-text-faint);font-weight:600}
.vs-role-check{
  position:absolute;top:8px;right:8px;
  width:20px;height:20px;border-radius:50%;
  background:#10b981;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;
}

/* Calibration controls */
.vs-controls{display:flex;flex-direction:column;gap:14px;padding-left:46px}
.vs-control{display:flex;flex-direction:column;gap:8px}
.vs-control-label{
  font-size:11px;font-weight:800;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;
}
.vs-pill-row{display:flex;flex-wrap:wrap;gap:6px}
.vs-pill{
  padding:8px 14px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  color:var(--surface-text);font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.vs-pill:hover{border-color:rgba(91,76,245,.5);color:var(--surface-text-strong)}
.vs-pill.active{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(91,76,245,.3);
}

/* Engines */
.vs-engines{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-left:46px;
}
@media(max-width:560px){.vs-engines{grid-template-columns:1fr}}
.vs-engine{
  text-align:left;padding:16px 18px;border-radius:13px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  cursor:pointer;font-family:inherit;color:var(--surface-text);
  transition:all .15s;
}
.vs-engine:hover{border-color:rgba(91,76,245,.5);transform:translateY(-1px)}
.vs-engine.active{
  background:linear-gradient(135deg,rgba(91,76,245,.18),rgba(139,92,246,.06));
  border-color:rgba(139,92,246,.55);
  box-shadow:0 0 0 3px rgba(91,76,245,.15);
}
.vs-engine-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.vs-engine-icon{font-size:18px;line-height:1}
.vs-engine-name{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:14px;
  color:var(--surface-text-strong);
}
.vs-engine-tag{
  font-size:10px;font-weight:800;letter-spacing:.04em;
  padding:2px 8px;border-radius:999px;text-transform:uppercase;
  margin-left:auto;
}
.vs-engine-tag.free{background:rgba(16,185,129,.18);color:#34d399}
.vs-engine-tag.paid{background:rgba(245,158,11,.15);color:#fbbf24}
.vs-engine-desc{
  font-size:12px;color:var(--surface-text-faint);margin:0;line-height:1.5;
}

/* Live preview */
.vs-preview{
  padding:22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(91,76,245,.06),rgba(139,92,246,.02));
  border:1px solid rgba(139,92,246,.22);
}
.vs-preview-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding-bottom:16px;border-bottom:1px solid rgba(139,92,246,.18);
  margin-bottom:14px;
}
@media(max-width:560px){.vs-preview-stats{grid-template-columns:1fr 1fr}}
.vs-preview-stat{text-align:center}
.vs-preview-val{
  font-family:'Outfit',sans-serif;font-size:26px;font-weight:800;
  color:var(--surface-text-strong);line-height:1;letter-spacing:-.02em;
}
.vs-preview-val span{
  font-size:13px;color:var(--surface-text-faint);font-weight:600;margin-left:4px;
}
.vs-preview-lbl{
  font-size:11px;color:var(--surface-text-faint);font-weight:600;margin-top:6px;
  text-transform:uppercase;letter-spacing:.04em;
}
.vs-preview-context{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
}
.vs-context-pill{
  font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:3px 10px;border-radius:999px;text-transform:uppercase;
  background:rgba(91,76,245,.15);color:#a78bfa;
  border:1px solid rgba(139,92,246,.3);
}
.vs-preview-sample{padding-top:4px}
.vs-sample-label{
  font-size:11px;font-weight:800;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;
}
.vs-sample-quote{
  margin:0;padding:10px 14px;border-left:3px solid rgba(139,92,246,.5);
  font-size:13.5px;color:var(--surface-text-strong);font-style:italic;line-height:1.6;
  background:rgba(255,255,255,.03);border-radius:0 8px 8px 0;
}

/* Start CTA */
.vs-cta{display:flex;flex-direction:column;align-items:center;gap:10px}
.vs-start-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 42px;border-radius:13px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;border:none;cursor:pointer;
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 8px 26px rgba(91,76,245,.4);
  transition:all .2s;
}
.vs-start-btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(91,76,245,.5);
}
.vs-start-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.vs-cta-tip{font-size:12px;color:var(--surface-text-faint)}
.vs-cta-warn{font-size:12px;color:#fb7185}

/* Past sessions strip */
.vs-history{margin-top:12px}
.vs-history-head{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;
}
.vs-history-head h3{
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;
  color:var(--surface-text-strong);margin:0;letter-spacing:-.01em;
}
.vs-history-count{font-size:12px;color:var(--surface-text-faint);font-weight:600}
.vs-history-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
}
.vs-history-card{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  cursor:pointer;font-family:inherit;color:var(--surface-text);
  transition:all .15s;text-align:left;
}
.vs-history-card:hover{border-color:rgba(91,76,245,.5);transform:translateY(-1px)}
.vs-history-score{
  flex-shrink:0;width:42px;height:42px;border-radius:10px;
  background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:18px;
}
.vs-history-meta{flex:1;min-width:0}
.vs-history-title{
  font-weight:700;font-size:13px;color:var(--surface-text-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;
}
.vs-history-sub{
  font-size:11px;color:var(--surface-text-faint);margin-top:3px;font-weight:600;
}

@media(max-width:680px){
  .vs-shell{padding:24px 16px 60px;gap:28px}
  .vs-controls,.vs-engines{padding-left:0}
}

/* Polished empty state — replaces the giant orb with cleaner header */
.voice-empty-v2{
  display:flex;flex-direction:column;
  padding:8px 4px 0;flex:1;
}
.voice-empty-header{
  text-align:center;margin-bottom:18px;padding:0 8px;
}
.voice-empty-eyebrow{
  display:inline-block;
  font-size:10.5px;font-weight:800;color:#a78bfa;
  text-transform:uppercase;letter-spacing:.7px;
  padding:4px 12px;border-radius:999px;
  background:rgba(91,76,245,.12);border:1px solid rgba(139,92,246,.3);
  margin-bottom:10px;
}
.voice-empty-title{
  font-family:'Outfit',sans-serif;font-size:24px;font-weight:800;
  color:var(--surface-text-strong);margin:0 0 6px;letter-spacing:-.02em;
  line-height:1.2;
}
.voice-empty-sub{
  color:var(--surface-text-muted);font-size:13px;line-height:1.6;
  max-width:520px;margin:0 auto;
}
.voice-empty-footnote{
  text-align:center;font-size:11.5px;color:var(--surface-text-faint);
  margin-top:14px;padding:0 12px;
}
.voice-empty-footnote strong{color:#a78bfa;font-weight:700}

/* Role Quickstart cards — 3 columns, denser */
.voice-role-track-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;width:100%;
}
.voice-role-track{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  text-align:left;cursor:pointer;font-family:inherit;
  transition:all .15s;color:var(--surface-text);
}
.voice-role-track:hover{
  border-color:rgba(91,76,245,.5);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(91,76,245,.12);
}
.voice-role-track.active{
  background:linear-gradient(135deg,rgba(91,76,245,.18),rgba(139,92,246,.08));
  border-color:rgba(139,92,246,.55);
}
.voice-role-track-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--surface-border);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.voice-role-track.active .voice-role-track-icon{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);border-color:transparent;
}
.voice-role-track-body{flex:1;min-width:0}
.voice-role-track-name{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:13px;
  color:var(--surface-text-strong);line-height:1.2;
}
.voice-role-track-meta{
  font-size:10.5px;color:var(--surface-text-faint);
  margin-top:3px;font-weight:600;
}
.voice-role-track-arrow{
  color:var(--surface-text-faint);font-size:14px;font-weight:700;flex-shrink:0;
}
.voice-role-track.active .voice-role-track-check{
  color:#34d399;font-size:16px;font-weight:800;flex-shrink:0;
}
.voice-orb{
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(251,113,133,.4),rgba(244,63,94,.15));
  border:2px solid rgba(251,113,133,.4);
  display:flex;align-items:center;justify-content:center;font-size:40px;
  box-shadow:0 0 40px rgba(251,113,133,.2);
}
.voice-orb.live{animation:vOrb 2s infinite}
@keyframes vOrb{
  0%,100%{box-shadow:0 0 40px rgba(251,113,133,.2);transform:scale(1)}
  50%{box-shadow:0 0 60px rgba(251,113,133,.5);transform:scale(1.05)}
}

.voice-turn{
  padding:12px 14px;border-radius:10px;border:1px solid var(--surface-border);
  animation:vSlideIn .25s ease-out;
}
.voice-turn.agent{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.3)}
.voice-turn.user{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.3)}
.voice-turn.partial{opacity:.7;border-style:dashed}
.voice-turn-who{
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  margin-bottom:6px;display:flex;align-items:center;gap:8px;
}
.voice-turn-ts{font-size:10px;color:var(--surface-text-faint);opacity:.7;margin-left:auto}
.voice-turn-text{font-size:14px;line-height:1.6;color:var(--surface-text-strong)}
.voice-cursor{animation:vCursor .8s infinite;color:#fb7185;font-weight:900}
@keyframes vCursor{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes vSlideIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* CONTROLS */
/* ═══════════════════════════════════════════════════════
   🎥 VIDEO STAGE — Zoom-style AI + user tile layout
═══════════════════════════════════════════════════════ */
.voice-stage{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;
  background:linear-gradient(135deg,#0a0a14,#0f0a1f,#0a0a14);
  border:1px solid var(--surface-border);border-radius:16px;
  padding:16px;min-height:340px;margin-bottom:14px;
}
.voice-tile{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#1a1530 0%,#0a0a14 80%);
  border:2px solid rgba(255,255,255,.08);border-radius:14px;
  overflow:hidden;min-height:300px;
  transition:border-color .25s,box-shadow .25s;
}
.voice-tile.speaking{
  border-color:rgba(91,76,245,.7);
  box-shadow:0 0 0 4px rgba(91,76,245,.15),0 8px 32px rgba(91,76,245,.25);
}
.voice-tile.listening{
  border-color:rgba(52,211,153,.7);
  box-shadow:0 0 0 4px rgba(52,211,153,.15),0 8px 32px rgba(52,211,153,.25);
}
.voice-tile.thinking{border-color:rgba(167,139,250,.7)}

/* AI tile avatar */
.voice-tile-ai{padding:24px}
.voice-avatar-wrap{
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.voice-avatar{
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#a78bfa,#5b4cf5 70%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 40px rgba(91,76,245,.4);
  position:relative;transition:transform .3s;
}
.voice-avatar.speaking{animation:vSpeak 1.6s ease-in-out infinite}
@keyframes vSpeak{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
.voice-avatar-face{
  font-size:60px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
  user-select:none;
}
.voice-avatar-ring{
  position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(167,139,250,.35);
  animation:vRing 2.4s ease-out infinite;opacity:0;
}
.voice-tile-ai.speaking .voice-avatar-ring{opacity:1}
@keyframes vRing{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.4);opacity:0}
}
.voice-soundbars{
  display:flex;align-items:flex-end;gap:4px;height:24px;
}
.voice-soundbars span{
  width:4px;background:#a78bfa;border-radius:2px;
  animation:vBar 0.9s ease-in-out infinite;
}
.voice-soundbars span:nth-child(1){animation-delay:0s;height:60%}
.voice-soundbars span:nth-child(2){animation-delay:.15s;height:90%}
.voice-soundbars span:nth-child(3){animation-delay:.3s;height:75%}
.voice-soundbars span:nth-child(4){animation-delay:.45s;height:95%}
.voice-soundbars span:nth-child(5){animation-delay:.6s;height:55%}
@keyframes vBar{
  0%,100%{transform:scaleY(.4)}
  50%{transform:scaleY(1)}
}

/* User tile webcam */
.voice-user-video{
  width:100%;height:100%;object-fit:cover;
  transform:scaleX(-1); /* mirror — feels natural like a webcam preview */
  background:#000;
}
.voice-tile-user.camera-off .voice-user-video{display:none}
.voice-tile-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1f2937,#374151);
}
.voice-tile-fallback-circle{
  width:120px;height:120px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  font-family:"Outfit",sans-serif;font-size:42px;font-weight:900;color:#fff;
  box-shadow:0 12px 32px rgba(91,76,245,.5);
}

/* Tile labels */
.voice-tile-name{
  position:absolute;bottom:12px;left:12px;
  background:rgba(0,0,0,.65);backdrop-filter:blur(10px);
  color:#fff;padding:6px 12px;border-radius:8px;
  font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
}
.voice-tile-status-dot{
  width:8px;height:8px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
}
.voice-tile-status-dot.speaking{background:#a78bfa;animation:vDot 1.2s infinite}
.voice-tile-status-dot.listening{background:#34d399;animation:vDot 1.2s infinite}
.voice-tile-status-dot.thinking{background:#fbbf24;animation:vDot 1.2s infinite}
@keyframes vDot{
  0%,100%{box-shadow:0 0 0 0 currentColor}
  50%{box-shadow:0 0 0 6px transparent}
}
.voice-tile-badge{
  position:absolute;top:12px;left:12px;
  background:rgba(91,76,245,.85);color:#fff;
  padding:4px 10px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.voice-tile-caption{
  position:absolute;bottom:50px;left:12px;right:12px;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  color:#fff;padding:8px 12px;border-radius:8px;
  font-size:13px;line-height:1.5;max-height:80px;overflow:hidden;
}

/* Session HUD (REC + timer + question count) */
.voice-stage-hud{
  position:absolute;top:12px;right:12px;
  display:flex;align-items:center;gap:10px;
  background:rgba(0,0,0,.65);backdrop-filter:blur(10px);
  padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:700;color:#fff;
  font-family:"JetBrains Mono",monospace;
}
.voice-hud-rec{
  display:inline-flex;align-items:center;gap:6px;color:#f87171;
}
.voice-hud-dot{
  width:8px;height:8px;border-radius:50%;background:#f87171;
  animation:vDot 1.5s infinite;
}
.voice-hud-time{color:#fff;letter-spacing:.05em}
.voice-hud-q{color:#a78bfa}

/* Active interview context bar (shows role/seniority/focus the AI is filtering by) */
.voice-context-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;border-radius:10px;
  background:linear-gradient(135deg,rgba(91,76,245,.08),rgba(139,92,246,.04));
  border:1px solid rgba(91,76,245,.22);
  margin-bottom:14px;
}
.voice-context-label{
  font-size:11px;color:var(--surface-text-faint);font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
}
.voice-context-pill{
  display:inline-flex;align-items:center;
  padding:4px 12px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
}
.voice-context-pill[data-kind="role"]{
  background:rgba(91,76,245,.18);color:#a78bfa;
}
.voice-context-pill[data-kind="seniority"]{
  background:rgba(245,158,11,.15);color:#fbbf24;
}
.voice-context-pill[data-kind="focus"]{
  background:rgba(16,185,129,.15);color:#34d399;
}
.voice-context-spacer{flex:1}
.voice-context-source{
  font-size:11px;color:var(--surface-text-muted);font-weight:600;
}

/* Pool preview in setup */
/* Question pool card — clean two-row layout */
.voice-pool-card{
  display:flex;flex-direction:column;gap:6px;
  cursor:default;
}
.voice-pool-header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;
}
.voice-pool-filter{
  font-size:10px;color:var(--surface-text-faint);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.4;
}
.voice-pool-badge{
  display:inline-flex;align-items:center;flex-shrink:0;
  font-size:10px;font-weight:800;
  padding:2px 9px;border-radius:10px;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;
}
.voice-pool-badge.ok{background:rgba(16,185,129,.15);color:#34d399}
.voice-pool-badge.low{background:rgba(245,158,11,.15);color:#fbbf24}
.voice-pool-badge.warn{background:rgba(251,113,133,.15);color:#fb7185}
.voice-pool-breakdown{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-top:6px;
  font-size:11px;color:var(--surface-text-faint);font-weight:600;
}
.voice-pool-breakdown span{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid var(--surface-border);
}
.voice-pool-preview{
  margin-top:10px;font-size:12px;color:var(--surface-text-muted);
}
.voice-pool-preview summary{
  cursor:pointer;font-weight:700;color:#a78bfa;
  user-select:none;outline:none;
}
.voice-pool-preview summary:hover{color:#c4b5fd}
.voice-pool-preview ol{
  margin:8px 0 0;padding-left:22px;
}
.voice-pool-preview li{
  margin-bottom:6px;line-height:1.5;
  color:var(--surface-text-strong);
}

/* Captions strip below stage */
.voice-captions{
  background:var(--overlay);border:1px solid var(--surface-border);border-radius:10px;
  padding:14px 18px;margin-bottom:14px;min-height:54px;
  display:flex;align-items:center;
}
.voice-caption-line{
  display:flex;gap:10px;font-size:14px;line-height:1.5;
  color:var(--surface-text-strong);
}
.voice-caption-line.agent{color:var(--surface-text-strong)}
.voice-caption-line.user{color:#34d399}
.voice-caption-who{font-size:18px;flex-shrink:0}
.voice-caption-text{flex:1}

/* Mic / Camera toggle buttons (Zoom-style circle buttons) */
.voice-call-btn{
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--overlay);color:var(--surface-text-strong);
  font-size:20px;display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.voice-call-btn:hover{background:var(--surface-2);transform:scale(1.05)}
.voice-call-btn.off{
  background:#dc2626;color:#fff;
}
.voice-call-btn.off:hover{background:#b91c1c}

/* Responsive — stack tiles on narrow screens */
@media (max-width:780px){
  .voice-stage{grid-template-columns:1fr;min-height:auto}
  .voice-tile{min-height:240px}
  .voice-avatar{width:100px;height:100px}
  .voice-avatar-face{font-size:44px}
}

.voice-controls{
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:14px;border-radius:12px;background:var(--overlay);
  border:1px solid var(--surface-border);
}
/* Start Interview button — purple brand color, less aggressive than full-pink */
.voice-btn-primary{
  min-width:240px;max-width:380px;padding:13px 32px;border-radius:11px;
  font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:.01em;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;border:none;transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin:0 auto;
  box-shadow:0 6px 20px rgba(91,76,245,.35);
}
.voice-btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(91,76,245,.45)}
.voice-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* Mic button — keeps the recording-red color treatment */
.voice-btn-mic{
  flex:1;min-width:200px;padding:14px 20px;border-radius:12px;
  font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#f43f5e,#fb7185);
  color:#fff;border:none;transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
  box-shadow:0 4px 14px rgba(244,63,94,.3);
}
.voice-btn-mic:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(244,63,94,.4)}
.voice-btn-mic:disabled{opacity:.5;cursor:not-allowed;transform:none}
.voice-btn-mic.recording{background:linear-gradient(135deg,#dc2626,#ef4444);animation:vRecGlow 1.5s infinite}
@keyframes vRecGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}
  50%{box-shadow:0 0 0 12px rgba(239,68,68,0)}
}
.voice-mic-pulse{
  width:10px;height:10px;border-radius:50%;background:#fff;
  animation:vPulse 1s infinite;
}
.voice-speak-wave{
  width:12px;height:12px;border-radius:50%;background:#fff;
  animation:vSpeak 1s infinite;
}
@keyframes vSpeak{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:.5}
}
.voice-btn-sec{
  padding:12px 16px;border-radius:10px;font-size:12px;font-weight:700;
  background:var(--surface-2);border:1px solid var(--surface-border);
  color:var(--surface-text);cursor:pointer;font-family:inherit;transition:all .15s;
}
.voice-btn-sec:hover{border-color:rgba(139,92,246,.5);color:var(--surface-text-strong)}
.voice-btn-sec:disabled{opacity:.4;cursor:not-allowed}
.voice-btn-sec.danger:hover{border-color:rgba(244,63,94,.6);color:#fb7185}
.voice-hint{
  font-size:11px;color:var(--surface-text-faint);text-align:center;
  padding:4px 8px;line-height:1.5;
}

/* REVIEW PAGE */
.voice-review-wrap{
  padding:24px 32px;max-width:1200px;margin:0 auto;
  display:flex;flex-direction:column;gap:18px;
}
.voice-review-topbar{
  display:flex;align-items:center;gap:14px;padding:12px;
  background:var(--surface-2);border:1px solid var(--surface-border);border-radius:12px;
}
.voice-review-title{
  font-family:"Outfit",sans-serif;font-size:20px;font-weight:800;
  color:var(--surface-text-strong);
}
.voice-review-sub{font-size:12px;color:var(--surface-text-faint);margin-top:2px}
.voice-review-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.voice-review-scorecard{
  background:var(--surface-2);border:1px solid var(--surface-border);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;
}
.voice-review-big-score{
  font-family:"Outfit",sans-serif;font-size:72px;font-weight:900;line-height:1;
}
.voice-review-big-out{font-size:20px;color:var(--surface-text-faint);font-weight:600;margin-left:4px}
.voice-verdict-pill{
  padding:6px 14px;border-radius:999px;border:1px solid;
  font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}
.voice-review-summary{
  font-size:13px;line-height:1.6;color:var(--surface-text);
  margin-top:6px;max-width:280px;
}

.voice-review-dims{
  background:var(--surface-2);border:1px solid var(--surface-border);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.voice-dim-row{display:grid;grid-template-columns:120px 1fr 40px;align-items:center;gap:10px;font-size:12px}
.voice-dim-label{color:var(--surface-text);font-weight:600}
.voice-dim-bar{background:var(--overlay);border-radius:999px;height:8px;overflow:hidden;border:1px solid var(--surface-border)}
.voice-dim-fill{height:100%;border-radius:999px;transition:width .6s ease}
.voice-dim-val{font-family:"Outfit",sans-serif;font-weight:800;color:var(--surface-text-strong);text-align:right}

.voice-review-col{
  background:var(--surface-2);border:1px solid var(--surface-border);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:8px;
}
.voice-review-bullet{
  padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;
  border:1px solid var(--surface-border);background:var(--overlay);
}
.voice-review-bullet.strength{border-left:3px solid #34d399}
.voice-review-bullet.improve{border-left:3px solid #fbbf24}

.voice-review-section{
  background:var(--surface-2);border:1px solid var(--surface-border);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.voice-review-q{
  padding:14px;border-radius:10px;background:var(--overlay);
  border:1px solid var(--surface-border);margin-bottom:10px;
}
.voice-review-q-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.voice-review-q-num{
  font-family:"Outfit",sans-serif;font-weight:800;font-size:12px;
  padding:4px 8px;border-radius:8px;background:rgba(139,92,246,.15);color:#a78bfa;
}
.voice-review-q-title{flex:1;font-size:14px;font-weight:700;color:var(--surface-text-strong)}
.voice-review-q-score{font-family:"Outfit",sans-serif;font-size:20px;font-weight:900;min-width:40px;text-align:right}
.voice-review-q-sum{font-size:12px;color:var(--surface-text);line-height:1.6;margin-bottom:6px}
.voice-review-q-fb{font-size:12px;color:var(--surface-text-faint);line-height:1.6;font-style:italic}

/* ═══════════════════════════════════════════════════════
   🏠 REDESIGNED HOME PAGE
═══════════════════════════════════════════════════════ */
.home-page{max-width:1280px;margin:0 auto;padding:0 24px 80px}

/* HERO */
.home-hero{padding:80px 0 60px;position:relative}
.home-hero-inner{max-width:880px;margin:0 auto;text-align:center}
.home-hero-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.35);
  color:#fb7185;font-size:12px;font-weight:700;letter-spacing:.04em;
  margin-bottom:28px;
}
.home-hero-pill-dot{
  width:6px;height:6px;border-radius:50%;background:#fb7185;
  box-shadow:0 0 0 0 rgba(251,113,133,.6);animation:homePulse 1.8s infinite;
}
@keyframes homePulse{0%,100%{box-shadow:0 0 0 0 rgba(251,113,133,.6)}50%{box-shadow:0 0 0 5px transparent}}

.home-hero-brand{
  display:flex;justify-content:center;
  margin:0 auto 28px;max-width:680px;
}
.home-hero-brand img{
  width:100%;height:auto;display:block;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(29,62,209,.35), 0 4px 12px rgba(0,0,0,.2);
}
@media(max-width:760px){
  .home-hero-brand{margin-bottom:20px;max-width:100%}
  .home-hero-brand img{border-radius:14px}
}

.home-hero-title{
  font-family:"Fraunces","Outfit",serif;
  font-size:clamp(40px,6vw,72px);font-weight:900;line-height:1.08;
  letter-spacing:-.03em;color:var(--surface-text-strong);
  margin:0 0 24px;
}
.home-hero-lede strong{color:var(--surface-text-strong);font-weight:700}
.home-hero-lede em{font-style:italic;color:#fb7185;font-weight:600}

/* Trust checklist under CTAs */
.home-hero-proof{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:center;
  margin-bottom:36px;
}
.home-hero-proof-item{
  font-size:12px;color:var(--surface-text-faint);font-weight:600;
  letter-spacing:.02em;
}
.home-hero-accent{
  font-style:italic;
  background:linear-gradient(135deg,#fb7185 0%,#8b5cf6 50%,#5b4cf5 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.home-hero-lede{
  font-size:clamp(16px,1.5vw,19px);line-height:1.65;
  color:var(--surface-text);max-width:640px;margin:0 auto 36px;
}

.home-hero-ctas{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:44px;
}
.home-cta-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:14px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;border:none;
  font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;
  box-shadow:0 8px 24px rgba(91,76,245,.4);transition:all .2s;
}
.home-cta-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(91,76,245,.55)}
.home-cta-badge-free{
  font-size:10px;font-weight:900;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.25);letter-spacing:.06em;
}
.home-cta-secondary{
  padding:15px 24px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-size:15px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:all .2s;
}
.home-cta-secondary:hover{border-color:rgba(139,92,246,.5);transform:translateY(-2px)}

.home-hero-trust{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
  max-width:720px;margin:0 auto;
}
.home-hero-trust-lbl{
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  letter-spacing:.1em;text-transform:uppercase;margin-right:6px;
}
.home-hero-trust-chip{
  padding:5px 11px;border-radius:8px;
  background:var(--overlay);border:1px solid var(--surface-border);
  font-size:11px;font-weight:600;color:var(--surface-text);
  font-family:"JetBrains Mono",monospace;
}
.home-hero-trust-more{
  padding:5px 11px;font-size:11px;color:var(--surface-text-faint);font-weight:600;
}

/* RETURNING USER STATS */
.home-stats{margin:20px 0 40px}
.home-stats-inner{
  background:linear-gradient(135deg,rgba(91,76,245,.1),rgba(139,92,246,.06));
  border:1px solid rgba(139,92,246,.25);border-radius:18px;
  padding:24px 28px;display:grid;
  grid-template-columns:1fr auto auto;gap:24px;align-items:center;
}
.home-stats-greeting{font-family:"Outfit",sans-serif;font-size:20px;font-weight:800;color:var(--surface-text-strong)}
.home-stats-sub{font-size:13px;color:var(--surface-text-faint);margin-top:2px}
.home-stats-grid{display:flex;gap:28px}
.home-stat{text-align:center}
.home-stat-val{font-family:"Outfit",sans-serif;font-size:28px;font-weight:900;color:var(--surface-text-strong);line-height:1}
.home-stat-lbl{font-size:11px;color:var(--surface-text-faint);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-top:4px}
.home-stats-cta{
  padding:10px 18px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--surface-border);color:var(--surface-text);
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
}
.home-stats-cta:hover{border-color:rgba(139,92,246,.6);color:#a78bfa}

/* METRICS BAR */
.home-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding:28px 0;border-top:1px solid var(--surface-border);
  border-bottom:1px solid var(--surface-border);margin:8px 0 40px;
}
.home-metric{text-align:center}
.home-metric-val{
  font-family:"Outfit",sans-serif;font-size:clamp(28px,4vw,44px);
  font-weight:900;color:var(--surface-text-strong);
  background:linear-gradient(135deg,#fb7185,#8b5cf6);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1;
}
.home-metric-lbl{font-size:12px;color:var(--surface-text-faint);font-weight:600;margin-top:6px;letter-spacing:.04em}

/* SECTIONS */
.home-section{padding:60px 0;position:relative}
.home-section-dark{
  background:var(--overlay);border-radius:24px;padding:60px 40px;margin:40px 0;
}
.home-section-header{text-align:center;max-width:680px;margin:0 auto 40px}
.home-section-eyebrow{
  display:inline-block;padding:5px 14px;border-radius:999px;
  background:var(--overlay);border:1px solid var(--surface-border);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--surface-text-faint);margin-bottom:16px;
}
.home-section-title{
  font-family:"Outfit",sans-serif;font-size:clamp(28px,4vw,40px);font-weight:900;
  color:var(--surface-text-strong);letter-spacing:-.02em;line-height:1.15;
  margin:0 0 12px;
}
.home-section-sub{font-size:16px;color:var(--surface-text);line-height:1.6;margin:0}

/* FEATURED MODE CARDS */
.home-mode-grid{display:grid;gap:18px}
.home-mode-grid-featured{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.home-mode-grid-support{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.home-mode-card{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:18px;padding:28px;text-align:left;cursor:pointer;
  font-family:inherit;color:var(--surface-text);
  transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;
}
.home-mode-card:hover{
  transform:translateY(-4px);
  border-color:rgba(139,92,246,.5);
  box-shadow:0 20px 60px rgba(91,76,245,.15);
}
.home-mode-card-flagship{
  background:linear-gradient(135deg,rgba(251,113,133,.08),rgba(139,92,246,.05));
  border-color:rgba(251,113,133,.35);
}
.home-mode-badge{
  position:absolute;top:14px;right:14px;padding:4px 10px;border-radius:999px;
  color:#fff;font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
}
.home-mode-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:18px;
}
.home-mode-title{
  font-family:"Outfit",sans-serif;font-size:20px;font-weight:800;
  color:var(--surface-text-strong);margin-bottom:8px;letter-spacing:-.01em;
}
.home-mode-desc{
  font-size:14px;line-height:1.6;color:var(--surface-text);margin-bottom:20px;
}
.home-mode-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;border-top:1px solid var(--surface-border);
}
.home-mode-tag{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;letter-spacing:.1em}
.home-mode-arrow{font-size:18px;color:var(--surface-text-faint);transition:transform .2s}
.home-mode-card:hover .home-mode-arrow{transform:translateX(4px);color:var(--surface-text-strong)}

/* COMPACT MODE CARDS */
.home-mode-card-compact{
  padding:20px;display:flex;gap:16px;align-items:flex-start;
}
.home-mode-icon-compact{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.home-mode-body{flex:1;min-width:0}
.home-mode-card-compact .home-mode-title{font-size:16px;margin-bottom:4px}
.home-mode-card-compact .home-mode-desc{font-size:13px;margin-bottom:10px;line-height:1.5}
.home-mode-tag-inline{font-size:11px;font-weight:700;letter-spacing:.05em}

/* WORKFLOW */
.home-workflow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:1000px;margin:0 auto;
}
.home-workflow-step{
  padding:24px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--surface-border);
}
.home-workflow-num{
  font-family:"Outfit",sans-serif;font-size:36px;font-weight:900;
  background:linear-gradient(135deg,#fb7185,#8b5cf6);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:12px;line-height:1;
}
.home-workflow-title{font-family:"Outfit",sans-serif;font-size:18px;font-weight:800;color:var(--surface-text-strong);margin-bottom:8px}
.home-workflow-desc{font-size:13px;line-height:1.6;color:var(--surface-text)}

/* WHY GRID */
.home-why-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:1100px;margin:0 auto;
}
.home-why-card{
  padding:28px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  transition:all .2s;
}
.home-why-card:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px)}
.home-why-icon{font-size:32px;margin-bottom:14px}
.home-why-title{font-family:"Outfit",sans-serif;font-size:18px;font-weight:800;color:var(--surface-text-strong);margin-bottom:8px}
.home-why-desc{font-size:14px;line-height:1.6;color:var(--surface-text)}

/* FINAL CTA */
.home-cta-block{
  margin:40px 0 20px;padding:60px 40px;border-radius:24px;text-align:center;
  background:linear-gradient(135deg,rgba(91,76,245,.2),rgba(251,113,133,.12));
  border:1px solid rgba(139,92,246,.35);
}
.home-cta-block-inner{max-width:640px;margin:0 auto}
.home-cta-block-title{
  font-family:"Outfit",sans-serif;font-size:clamp(26px,3.5vw,36px);
  font-weight:900;color:var(--surface-text-strong);letter-spacing:-.02em;
  line-height:1.2;margin:0 0 14px;
}
.home-cta-block-sub{font-size:16px;color:var(--surface-text);line-height:1.6;margin:0 0 28px}
.home-cta-block-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.home-cta-block-trust{font-size:12px;color:var(--surface-text-faint)}

/* RESPONSIVE */
@media (max-width:900px){
  .home-hero{padding:50px 0 40px}
  .home-stats-inner{grid-template-columns:1fr;gap:16px;text-align:center}
  .home-stats-grid{justify-content:center}
  .home-metrics{grid-template-columns:repeat(2,1fr);gap:20px}
  .home-section{padding:40px 0}
  .home-section-dark{padding:40px 24px;margin:20px 0}
  .home-cta-block{padding:40px 24px}
}
@media (max-width:500px){
  .home-hero-ctas{flex-direction:column;align-items:stretch;width:100%}
  .home-cta-primary,.home-cta-secondary{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════════
   🤖 AGENT PAGE — professional empty state
═══════════════════════════════════════════════════════ */
.agent-empty-pro{
  max-width:960px;margin:0 auto;padding:24px 16px 60px;
  display:flex;flex-direction:column;gap:48px;
}

/* HERO */
.agent-hero{text-align:center;padding:24px 0 8px}
.agent-hero-orb{
  font-size:64px;margin-bottom:18px;display:inline-block;
  filter:drop-shadow(0 8px 24px rgba(52,211,153,.4));
  animation:agentOrbFloat 4s ease-in-out infinite;
}
@keyframes agentOrbFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.agent-hero-eyebrow{
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);
  color:#34d399;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:18px;
}
.agent-hero-title{
  font-family:"Fraunces","Outfit",serif;
  font-size:clamp(32px,5vw,52px);font-weight:900;line-height:1.1;letter-spacing:-.03em;
  color:var(--surface-text-strong);margin:0 0 18px;
}
.agent-hero-accent{
  font-style:italic;
  background:linear-gradient(135deg,#34d399 0%,#a7f3d0 50%,#5b4cf5 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.agent-hero-lede{
  font-size:16px;color:var(--surface-text);line-height:1.65;
  max-width:600px;margin:0 auto 24px;
}
.agent-hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.agent-hero-trust-item{
  padding:6px 14px;border-radius:999px;
  background:var(--overlay);border:1px solid var(--surface-border);
  font-size:12px;font-weight:600;color:var(--surface-text);
}

/* SECTION EYEBROW */
.agent-section-eyebrow{
  display:inline-block;padding:5px 14px;border-radius:999px;
  background:var(--overlay);border:1px solid var(--surface-border);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--surface-text-faint);margin-bottom:24px;
}

/* HOW IT WORKS */
.agent-how-section{text-align:center}
.agent-how-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;
  text-align:left;
}
.agent-how-step{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:14px;padding:24px 20px;
  transition:all .2s;
}
.agent-how-step:hover{
  border-color:rgba(52,211,153,.4);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(52,211,153,.08);
}
.agent-how-num{
  font-family:"Outfit",sans-serif;font-size:32px;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#34d399,#5b4cf5);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:12px;
}
.agent-how-step-title{
  font-family:"Outfit",sans-serif;font-size:16px;font-weight:800;
  color:var(--surface-text-strong);margin-bottom:6px;
}
.agent-how-step-desc{font-size:13px;line-height:1.6;color:var(--surface-text)}

/* PRESETS */
.agent-presets-section{text-align:center}
.agent-preset-group{margin-bottom:28px;text-align:left}
.agent-preset-group:last-child{margin-bottom:0}
.agent-preset-cat-header{margin-bottom:12px}
.agent-preset-cat-name{
  font-family:"Outfit",sans-serif;font-size:14px;font-weight:800;
  color:var(--surface-text-strong);
}
.agent-preset-grid-pro{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;
}
.agent-preset-pro{
  display:flex;align-items:center;gap:14px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:14px;padding:14px 18px;cursor:pointer;
  font-family:inherit;color:var(--surface-text);text-align:left;
  transition:all .15s;
}
.agent-preset-pro:hover{
  border-color:rgba(52,211,153,.5);
  transform:translateX(2px);
  box-shadow:0 8px 20px rgba(52,211,153,.1);
}
.agent-preset-pro-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:rgba(52,211,153,.12);
}
.agent-preset-pro-body{flex:1;min-width:0}
.agent-preset-pro-title{
  font-family:"Outfit",sans-serif;font-size:14px;font-weight:800;
  color:var(--surface-text-strong);margin-bottom:3px;
}
.agent-preset-pro-desc{font-size:12px;color:var(--surface-text-faint);line-height:1.5}
.agent-preset-pro-arrow{
  flex-shrink:0;color:var(--surface-text-faint);font-size:18px;
  transition:transform .15s;
}
.agent-preset-pro:hover .agent-preset-pro-arrow{
  transform:translateX(3px);color:#34d399;
}

/* SAMPLE OUTPUT */
.agent-sample-section{text-align:center}
.agent-sample-card{
  text-align:left;max-width:600px;margin:0 auto;
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px;
}
.agent-sample-bubble{
  display:flex;gap:12px;padding:14px 16px;border-radius:10px;
  background:var(--overlay);border-left:3px solid;
}
.agent-sample-think{border-left-color:#a78bfa}
.agent-sample-tool{border-left-color:#67e8f9}
.agent-sample-result{border-left-color:#34d399}
.agent-sample-icon{font-size:18px;flex-shrink:0}
.agent-sample-label{
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--surface-text-faint);margin-bottom:4px;
}
.agent-sample-text{
  font-size:13px;line-height:1.55;color:var(--surface-text);
}
.agent-sample-text strong{color:var(--surface-text-strong);font-weight:700}

@media (max-width:700px){
  .agent-empty-pro{padding:16px 12px 40px;gap:32px}
  .agent-hero{padding:8px 0}
  .agent-how-steps{grid-template-columns:1fr}
}

/* ─── Value strip (3 KPIs under trust strip) ─── */
.pricing-value-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
  margin:32px 0 20px;
}
.pricing-value-card{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:14px;padding:24px 20px;text-align:center;
  transition:all .2s;
}
.pricing-value-card:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px)}
.pricing-value-icon{font-size:28px;margin-bottom:10px}
.pricing-value-num{
  font-family:"Outfit",sans-serif;font-size:28px;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#fb7185,#a78bfa,#5b4cf5);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:8px;
}
.pricing-value-lbl{font-size:12px;color:var(--surface-text-faint);line-height:1.5}

/* ─── Narrative / value justification ─── */
.pricing-narrative{
  max-width:760px;margin:48px auto;padding:36px 32px;border-radius:18px;
  background:linear-gradient(135deg,rgba(91,76,245,.08),rgba(251,113,133,.05));
  border:1px solid rgba(139,92,246,.25);position:relative;
}
.pricing-narrative-quote{
  font-family:"Fraunces",serif;font-size:80px;font-weight:900;line-height:0.7;
  color:rgba(139,92,246,.25);position:absolute;top:14px;left:24px;
}
.pricing-narrative-text{
  font-size:16px;line-height:1.7;color:var(--surface-text);
  margin:0 0 14px;padding-left:48px;
}
.pricing-narrative-text:last-of-type{margin-bottom:24px}
.pricing-narrative-text strong{color:var(--surface-text-strong);font-weight:700}
.pricing-narrative-stats{
  display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--surface-border);
}
.pricing-narrative-stats > div{
  text-align:center;font-size:12px;color:var(--surface-text-faint);
}
.pricing-narrative-stats strong{
  font-family:"Outfit",sans-serif;font-size:24px;font-weight:900;
  color:var(--surface-text-strong);line-height:1.2;display:block;margin-bottom:4px;
}

@media (max-width:640px){
  .pricing-narrative{padding:24px 18px;margin:32px 0}
  .pricing-narrative-quote{font-size:56px;top:8px;left:14px}
  .pricing-narrative-text{padding-left:32px;font-size:14px}
}

/* Terms of Service checkbox — clean native-checkbox styling, no JS hacks. */
.terms-checkbox{
  -webkit-appearance:none;
  appearance:none;
  width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--surface-border-strong);
  background:var(--overlay-soft);
  cursor:pointer;flex-shrink:0;margin:1px 0 0;
  transition:background .15s,border-color .15s;
  position:relative;
}
.terms-checkbox:hover{border-color:rgba(139,92,246,.6)}
.terms-checkbox:checked{
  background:#5b4cf5;border-color:#5b4cf5;
}
.terms-checkbox:checked::after{
  content:"✓";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:800;line-height:1;
}
.terms-checkbox:focus-visible{
  outline:2px solid rgba(139,92,246,.5);outline-offset:2px;
}

/* SEO/GEO content — visually hidden, crawler-accessible.
   Standard a11y "visually-hidden" pattern: zero size, clipped, off-screen.
   Screen readers + AI crawlers + Googlebot first-pass DOM parser still see it.
   Do NOT use display:none — that hides it from screen readers AND most AI crawlers. */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ═══════════════════════════════════════════════════════
   📊 DASHBOARD — polish additions
═══════════════════════════════════════════════════════ */
.dash-sub{
  font-size:13px;color:var(--surface-text-faint);margin-top:6px;line-height:1.5;
}
.dash-sub strong{color:var(--surface-text-strong);font-weight:700}

/* Empty state */
.dash-empty-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;margin-top:24px;
}
.dash-empty-card{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:16px;padding:28px 24px;text-align:left;cursor:pointer;
  font-family:inherit;color:var(--surface-text);transition:all .2s;
}
.dash-empty-card:hover{
  transform:translateY(-4px);
  border-color:rgba(139,92,246,.5);
  box-shadow:0 16px 40px rgba(91,76,245,.15);
}
.dash-empty-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:18px;
}
.dash-empty-card-title{
  font-family:"Outfit",sans-serif;font-size:18px;font-weight:800;
  color:var(--surface-text-strong);margin-bottom:6px;
}
.dash-empty-card-desc{
  font-size:13px;line-height:1.6;color:var(--surface-text);
}

/* Insights */
.dash-insights{
  margin:20px 0 24px;padding:20px 24px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--surface-border);
}
.dash-insights .dash-panel-title{margin-bottom:16px}
.dash-insight-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
}
.dash-insight-card{
  background:var(--overlay);padding:16px 18px;border-radius:10px;
  transition:all .15s;
}
.dash-insight-card:hover{background:var(--overlay-soft);transform:translateX(2px)}
.dash-insight-head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.dash-insight-icon{font-size:18px}
.dash-insight-title{
  font-family:"Outfit",sans-serif;font-size:14px;font-weight:800;
  color:var(--surface-text-strong);
}
.dash-insight-desc{font-size:13px;line-height:1.6;color:var(--surface-text);margin-bottom:10px}
.dash-insight-desc strong{color:var(--surface-text-strong);font-weight:700}
.dash-insight-cta{
  background:none;border:none;font-size:12px;font-weight:700;
  cursor:pointer;padding:0;font-family:inherit;letter-spacing:.02em;
}
.dash-insight-cta:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════
   ⭐ BOOKMARKS PAGE
═══════════════════════════════════════════════════════ */
.bm-page{min-height:calc(100vh - 68px);background:var(--surface-1);padding:40px 24px 64px}
.bm-container{max-width:960px;margin:0 auto}

/* HERO */
.bm-hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:28px;padding-bottom:24px;
  border-bottom:1px solid var(--surface-border);
}
.bm-eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;
  color:#fbbf24;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;
}
.bm-title{
  font-family:"Outfit",sans-serif;font-size:clamp(28px,4vw,40px);font-weight:900;
  color:var(--surface-text-strong);letter-spacing:-.02em;margin:0 0 6px;
}
.bm-sub{font-size:14px;color:var(--surface-text-faint);margin:0;max-width:460px}
.bm-hero-actions{display:flex;gap:8px;flex-wrap:wrap}

.bm-cta-primary{
  padding:12px 24px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;
  font-size:14px;font-weight:800;font-family:inherit;
  box-shadow:0 4px 16px rgba(91,76,245,.4);transition:all .2s;
}
.bm-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(91,76,245,.55)}
.bm-cta-secondary{
  padding:10px 18px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  color:var(--surface-text);font-size:13px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:all .15s;
}
.bm-cta-secondary:hover{border-color:rgba(139,92,246,.5);color:var(--surface-text-strong)}
.bm-cta-danger:hover{border-color:rgba(239,68,68,.5);color:#f87171}

/* STATS */
.bm-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;
  margin-bottom:28px;
}
.bm-stat{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:12px;padding:16px;text-align:center;
  transition:border-color .15s;
}
.bm-stat:hover{border-color:rgba(139,92,246,.4)}
.bm-stat-val{
  font-family:"Outfit",sans-serif;font-size:28px;font-weight:900;
  color:var(--surface-text-strong);line-height:1;
}
.bm-stat-lbl{
  font-size:11px;color:var(--surface-text-faint);font-weight:600;
  margin-top:6px;letter-spacing:.04em;text-transform:uppercase;
}

/* FILTERS */
.bm-filters{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:14px;padding:16px 18px;margin-bottom:20px;
  display:flex;flex-direction:column;gap:12px;
}
.bm-search{
  position:relative;display:flex;align-items:center;
  background:var(--overlay);border:1px solid var(--surface-border);
  border-radius:10px;padding:2px 10px;
}
.bm-search:focus-within{border-color:rgba(139,92,246,.5)}
.bm-search-icon{font-size:14px;color:var(--surface-text-faint);margin-right:8px}
.bm-search-input{
  flex:1;background:none;border:none;outline:none;
  color:var(--surface-text-strong);font-size:14px;font-family:inherit;
  padding:10px 0;
}
.bm-search-input::placeholder{color:var(--surface-text-faint)}
.bm-search-clear{
  background:none;border:none;color:var(--surface-text-faint);
  font-size:20px;cursor:pointer;padding:0 6px;
}
.bm-search-clear:hover{color:var(--surface-text-strong)}
.bm-filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bm-filter-label{
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  letter-spacing:.06em;text-transform:uppercase;min-width:72px;
}
.bm-chips{display:flex;gap:6px;flex-wrap:wrap}
.bm-chip{
  padding:6px 12px;border-radius:999px;
  background:var(--overlay);border:1px solid var(--surface-border);
  color:var(--surface-text);font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.bm-chip:hover{border-color:rgba(139,92,246,.5)}
.bm-chip.active{
  background:linear-gradient(135deg,rgba(91,76,245,.25),rgba(139,92,246,.18));
  border-color:rgba(139,92,246,.55);color:#a78bfa;
}

/* RESULT COUNT */
.bm-result-count{
  font-size:12px;color:var(--surface-text-faint);
  margin-bottom:14px;padding:0 4px;
}
.bm-result-count strong{color:var(--surface-text-strong);font-weight:800}

/* CARDS */
.bm-list{display:flex;flex-direction:column;gap:10px}
.bm-card{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:14px;overflow:hidden;transition:all .2s;
}
.bm-card:hover{border-color:rgba(139,92,246,.35)}
.bm-card.open{border-color:rgba(139,92,246,.55);box-shadow:0 8px 28px rgba(91,76,245,.1)}
.bm-card-head{
  width:100%;padding:18px 20px;cursor:pointer;
  background:none;border:none;color:inherit;font-family:inherit;
  display:flex;align-items:flex-start;gap:14px;text-align:left;
}
.bm-card-head:hover{background:var(--overlay-soft)}
.bm-card-main{flex:1;min-width:0}
.bm-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.bm-tag{
  padding:3px 10px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.03em;
  font-family:"JetBrains Mono",monospace;
}
.bm-tag-lang{background:rgba(91,76,245,.12);color:#a78bfa;border:1px solid rgba(91,76,245,.22)}
.bm-tag-topic{background:var(--overlay);color:var(--surface-text-faint);border:1px solid var(--surface-border);font-family:inherit;font-weight:600}
.bm-tag-role{background:var(--overlay);color:var(--surface-text-faint);border:1px solid var(--surface-border);font-family:inherit;font-weight:500}
.bm-card-q{
  font-size:15px;line-height:1.55;color:var(--surface-text-strong);font-weight:500;
}
.bm-card-actions{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.bm-action-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:var(--overlay);color:var(--surface-text-faint);
  font-size:14px;cursor:pointer;transition:all .15s;
}
.bm-action-btn:hover{background:var(--surface-border);color:var(--surface-text-strong)}
.bm-action-danger:hover{background:rgba(239,68,68,.15);color:#f87171}
.bm-chevron{
  color:var(--surface-text-faint);font-size:13px;
  transition:transform .2s;display:inline-block;margin-left:4px;
}
.bm-card.open .bm-chevron{transform:rotate(180deg)}

.bm-card-body{
  padding:16px 20px 20px;border-top:1px solid var(--surface-border);
  background:var(--overlay-soft);display:flex;flex-direction:column;gap:12px;
}
.bm-answer{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;font-weight:700;color:#34d399;
}
.bm-answer-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:6px;
  background:rgba(52,211,153,.2);border:1px solid rgba(52,211,153,.4);
  font-size:11px;flex-shrink:0;
}
.bm-explanation{
  font-size:13px;line-height:1.7;color:var(--surface-text);
  padding:12px 14px;border-radius:10px;
  background:var(--overlay);border:1px solid var(--surface-border);
}
.bm-followup{
  padding:12px 16px;border-radius:10px;
  background:rgba(91,76,245,.08);border:1px solid rgba(91,76,245,.2);
  font-size:13px;color:#a78bfa;line-height:1.6;
}
.bm-followup strong{color:var(--surface-text-strong);font-weight:800}

/* EMPTY STATE */
.bm-empty{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:20px;padding:72px 32px;text-align:center;
}
.bm-empty-icon{
  font-size:64px;margin-bottom:20px;
  filter:drop-shadow(0 4px 20px rgba(251,191,36,.3));
}
.bm-empty-title{
  font-family:"Outfit",sans-serif;font-size:26px;font-weight:900;
  color:var(--surface-text-strong);margin:0 0 10px;
}
.bm-empty-sub{
  font-size:14px;color:var(--surface-text);line-height:1.6;
  max-width:420px;margin:0 auto 28px;
}
.bm-empty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.bm-empty-hint{
  font-size:12px;color:var(--surface-text-faint);
  padding:10px 16px;background:var(--overlay-soft);
  border-radius:10px;display:inline-block;
}

/* NO MATCH */
.bm-no-match{
  background:var(--surface-2);border:1px dashed var(--surface-border-strong);
  border-radius:16px;padding:48px 24px;text-align:center;
}
.bm-no-match-icon{font-size:40px;margin-bottom:14px;opacity:.7}
.bm-no-match-title{
  font-family:"Outfit",sans-serif;font-size:18px;font-weight:800;
  color:var(--surface-text-strong);margin-bottom:6px;
}
.bm-no-match-sub{font-size:13px;color:var(--surface-text-faint);margin-bottom:20px}

@media (max-width:600px){
  .bm-page{padding:24px 12px 48px}
  .bm-hero{flex-direction:column;align-items:flex-start}
  .bm-card-head{padding:14px 16px}
  .bm-card-actions{flex-direction:column;align-items:flex-end}
}

/* ═══════════════════════════════════════════════════════
   💎 PRICING PAGE (redesigned, 4 tiers)
═══════════════════════════════════════════════════════ */
.pricing-page{max-width:1280px;margin:0 auto;padding:0 24px 80px}

/* HERO */
.pricing-hero{text-align:center;padding:60px 16px 40px}
.pricing-hero-pill{
  display:inline-block;padding:6px 16px;border-radius:999px;
  background:rgba(91,76,245,.15);border:1px solid rgba(91,76,245,.35);
  color:#a78bfa;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:20px;
}
.pricing-hero-title{
  font-family:"Fraunces","Outfit",serif;
  font-size:clamp(32px,5vw,56px);font-weight:900;line-height:1.1;letter-spacing:-.03em;
  color:var(--surface-text-strong);margin:0 0 16px;
}
.pricing-hero-accent{
  font-style:italic;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6,#fb7185);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.pricing-hero-lede{
  font-size:16px;color:var(--surface-text);line-height:1.65;max-width:560px;margin:0 auto 32px;
}

.pricing-signup-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.pricing-signup-primary{
  padding:13px 26px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;
  font-size:14px;font-weight:800;font-family:inherit;
  box-shadow:0 4px 20px rgba(91,76,245,.4);transition:all .2s;
}
.pricing-signup-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(91,76,245,.55)}
.pricing-signup-secondary{
  padding:13px 24px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-size:14px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:all .2s;
}
.pricing-signup-secondary:hover{border-color:rgba(139,92,246,.5)}

/* Billing toggle */
.pricing-toggle{
  display:inline-flex;background:var(--overlay);border:1px solid var(--surface-border);
  border-radius:12px;padding:4px;margin-bottom:40px;
}
.pricing-toggle-btn{
  padding:8px 20px;border-radius:9px;border:none;cursor:pointer;
  background:transparent;color:var(--surface-text-faint);
  font-size:13px;font-weight:600;font-family:inherit;transition:all .2s;
  display:inline-flex;align-items:center;gap:6px;
}
.pricing-toggle-btn.active{background:var(--surface-2);color:var(--surface-text-strong)}
.pricing-toggle-save{
  background:#10b981;color:#fff;font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:999px;letter-spacing:.03em;
}

/* CARDS */
.pricing-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;max-width:1200px;margin:0 auto;align-items:stretch;
}
.pricing-card{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:18px;padding:28px 24px;position:relative;
  display:flex;flex-direction:column;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.pricing-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(91,76,245,.15)}
.pricing-card-popular{
  background:linear-gradient(135deg,rgba(91,76,245,.18),rgba(139,92,246,.1));
  border-color:rgba(139,92,246,.55);
  box-shadow:0 0 40px rgba(91,76,245,.18);
}
.pricing-card-free{border-style:dashed;opacity:.95}
.pricing-card-current{
  border-color:#10b981 !important;
  box-shadow:0 0 30px rgba(16,185,129,.18) !important;
}

/* ─── LEADERBOARD ──────────────────────────────────── */
.lb-sort-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:24px;padding:10px 14px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--surface-border);
}
.lb-sort-btn{
  padding:6px 13px;border-radius:7px;
  background:transparent;border:1px solid var(--surface-border);
  color:var(--surface-text-muted);font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.lb-sort-btn:hover{background:rgba(91,76,245,.06);color:var(--surface-text-strong)}
.lb-sort-btn.active{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;border-color:transparent;
  box-shadow:0 2px 10px rgba(91,76,245,.3);
}

.lb-podium{
  display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:14px;
  margin-bottom:28px;align-items:end;
}
.lb-podium-card{
  position:relative;text-align:center;
  padding:22px 16px 20px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  transition:transform .2s;
}
.lb-podium-card:hover{transform:translateY(-2px)}
.lb-podium-1{
  background:linear-gradient(180deg,rgba(245,158,11,.12),rgba(251,191,36,.04));
  border-color:rgba(245,158,11,.4);
  box-shadow:0 0 30px rgba(245,158,11,.15);
  padding-top:32px;padding-bottom:28px;order:2;
}
.lb-podium-2{
  background:linear-gradient(180deg,rgba(156,163,175,.12),rgba(209,213,219,.04));
  border-color:rgba(156,163,175,.4);
  order:1;
}
.lb-podium-3{
  background:linear-gradient(180deg,rgba(202,138,4,.1),rgba(180,83,9,.04));
  border-color:rgba(202,138,4,.4);
  order:3;
}
.lb-medal{font-size:38px;margin-bottom:6px;line-height:1}
.lb-podium-1 .lb-medal{font-size:46px}
.lb-podium-avatar{
  width:64px;height:64px;border-radius:50%;margin:0 auto 10px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;font-weight:800;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--surface-1);overflow:hidden;
}
.lb-podium-1 .lb-podium-avatar{width:78px;height:78px;font-size:26px}
.lb-podium-name{
  font-size:14px;font-weight:700;color:var(--surface-text-strong);
  margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:6px;
}
.lb-podium-points{
  font-family:'Outfit',sans-serif;font-size:24px;font-weight:900;
  color:var(--surface-text-strong);margin:8px 0 6px;line-height:1;
}
.lb-podium-1 .lb-podium-points{font-size:30px;color:#fbbf24}
.lb-podium-points span{font-size:11px;font-weight:600;color:var(--surface-text-faint)}
.lb-podium-stats{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  font-size:11px;color:var(--surface-text-faint);font-weight:600;
}
.lb-podium-stats span{padding:3px 7px;background:rgba(255,255,255,.04);border-radius:5px}

.lb-plan-badge{
  display:inline-block;font-size:9px;font-weight:800;
  padding:2px 7px;border-radius:10px;letter-spacing:.06em;
  margin-top:2px;
}

.lb-table-wrap{
  border-radius:12px;border:1px solid var(--surface-border);
  background:var(--surface-2);overflow:hidden;
}
.lb-table{width:100%;border-collapse:collapse;font-size:13px}
.lb-table thead{background:var(--surface-1)}
.lb-table th{
  text-align:left;padding:12px 16px;
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;
  border-bottom:1px solid var(--surface-border);
}
.lb-table th.lb-num,.lb-table td.lb-num{text-align:right}
.lb-table td{
  padding:14px 16px;border-bottom:1px solid var(--surface-border);
  vertical-align:middle;
}
.lb-table tbody tr:last-child td{border-bottom:none}
.lb-table tbody tr:hover{background:rgba(91,76,245,.04)}
.lb-table tr.lb-current{background:rgba(91,76,245,.08) !important}
.lb-table tr.lb-current td{border-color:rgba(91,76,245,.18)}
.lb-table tr.lb-divider td{
  text-align:center;padding:8px 0;border:none;
  font-size:10px;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.5px;font-weight:700;
}
.lb-table tr.lb-divider span{
  padding:0 14px;background:var(--surface-2);position:relative;
}
.lb-rank{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:16px;
  color:var(--surface-text-muted);
}
.lb-row-user{display:flex;align-items:center;gap:10px}
.lb-avatar-sm{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.lb-row-name{
  font-weight:700;color:var(--surface-text-strong);font-size:13px;
  display:flex;align-items:center;gap:6px;
}
.lb-you{
  font-size:9px;font-weight:800;letter-spacing:.05em;
  background:#10b981;color:#fff;padding:1px 6px;border-radius:8px;
}
.lb-podium-card.lb-current{
  border-color:#10b981 !important;
  box-shadow:0 0 30px rgba(16,185,129,.18);
}

@media(max-width:720px){
  .lb-podium{grid-template-columns:1fr;gap:10px}
  .lb-podium-1,.lb-podium-2,.lb-podium-3{order:initial}
}

/* ═══════════════════════════════════════════════════════
   ADMIN CONSOLE — polished sidebar layout
═══════════════════════════════════════════════════════ */
.adm-shell{
  display:flex;min-height:calc(100vh - 76px);
  background:var(--surface-1);
  animation:fadeUp .35s ease;
}
@media(max-width:760px){
  .adm-shell{flex-direction:column}
}

/* SIDEBAR */
.adm-sidebar{
  width:240px;flex-shrink:0;
  background:var(--surface-2);
  border-right:1px solid var(--surface-border);
  padding:20px 14px;
  display:flex;flex-direction:column;gap:14px;
  position:sticky;top:0;align-self:flex-start;
  max-height:calc(100vh - 76px);
}
@media(max-width:760px){
  .adm-sidebar{
    width:100%;max-height:none;position:static;
    border-right:none;border-bottom:1px solid var(--surface-border);
    padding:14px;
  }
}
.adm-sidebar-brand{
  display:flex;align-items:center;gap:12px;
  padding:8px 10px 14px;border-bottom:1px solid var(--surface-border);
}
.adm-sidebar-logo{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#fb7185,#f87171);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  box-shadow:0 4px 14px rgba(251,113,133,.3);
}
.adm-sidebar-title{
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;
  color:var(--surface-text-strong);line-height:1;
}
.adm-sidebar-sub{
  font-size:10px;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-top:3px;
}
.adm-sidebar-nav{
  display:flex;flex-direction:column;gap:3px;flex:1;
}
.adm-sidebar-footer{
  padding-top:12px;border-top:1px solid var(--surface-border);
  display:flex;flex-direction:column;gap:3px;
}
.adm-nav-item{
  display:flex;align-items:center;gap:11px;
  width:100%;text-align:left;
  padding:9px 12px;border-radius:8px;
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;
  color:var(--surface-text-muted);
  transition:all .15s;
}
.adm-nav-item:hover{background:rgba(91,76,245,.06);color:var(--surface-text-strong)}
.adm-nav-item.active{
  background:linear-gradient(135deg,rgba(91,76,245,.18),rgba(139,92,246,.1));
  color:var(--surface-text-strong);
  box-shadow:inset 3px 0 0 #5b4cf5;
}
.adm-nav-icon{font-size:15px;line-height:1;flex-shrink:0;width:18px;text-align:center}
.adm-nav-badge{
  margin-left:auto;font-size:10px;font-weight:800;
  padding:1px 8px;border-radius:10px;
  background:rgba(91,76,245,.2);color:#a78bfa;
}

/* MAIN PANE */
.adm-main{
  flex:1;min-width:0;
  padding:32px 36px;overflow-x:auto;
}
@media(max-width:760px){.adm-main{padding:20px 16px}}

.adm-pagehead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:28px;
}
.adm-breadcrumb{
  font-size:11px;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;font-weight:700;
  margin-bottom:6px;display:flex;align-items:center;gap:6px;
}
.adm-breadcrumb a{color:var(--surface-text-faint);text-decoration:none}
.adm-breadcrumb a:hover{color:#a78bfa}
.adm-breadcrumb-sep{opacity:.5}
.adm-pagehead-title{
  font-family:'Outfit',sans-serif;font-size:30px;font-weight:800;
  color:var(--surface-text-strong);margin:0;line-height:1.1;letter-spacing:-.02em;
}
.adm-pagehead-sub{
  margin:6px 0 0;font-size:13px;color:var(--surface-text-muted);
}
.adm-pagehead-meta{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--surface-text-faint);font-weight:600;
  padding:6px 12px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--surface-border);
}
.adm-status-dot{
  width:7px;height:7px;border-radius:50%;background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.2);
}

/* KPI ROW */
.adm-kpi-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin-bottom:24px;
}
.adm-kpi-card{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  transition:transform .15s, border-color .15s;
}
.adm-kpi-card:hover{transform:translateY(-1px);border-color:rgba(91,76,245,.25)}
.adm-kpi-icon{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.adm-kpi-body{flex:1;min-width:0}
.adm-kpi-label{
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;
}
.adm-kpi-val{
  font-family:'Outfit',sans-serif;font-size:26px;font-weight:800;
  color:var(--surface-text-strong);line-height:1;letter-spacing:-.02em;
}
.adm-kpi-trend{
  margin-top:6px;font-size:11px;font-weight:600;color:var(--surface-text-faint);
}
.adm-kpi-trend.up{color:#10b981}
.adm-kpi-trend.down{color:#fb7185}

/* TWO-COLUMN ROW */
.adm-row-2col{
  display:grid;grid-template-columns:1.1fr 1fr;gap:18px;
}
@media(max-width:900px){.adm-row-2col{grid-template-columns:1fr}}

.adm-card{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:12px;padding:22px;
}
.adm-card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;gap:10px;
}
.adm-card-title{
  font-family:'Outfit',sans-serif;font-size:16px;font-weight:800;
  color:var(--surface-text-strong);margin:0;letter-spacing:-.01em;
}
.adm-card-sub{
  font-size:12px;color:var(--surface-text-faint);font-weight:600;
}
.adm-card-link{
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;color:#a78bfa;
}
.adm-card-link:hover{color:#c4b5fd}

/* PLAN DISTRIBUTION CHART */
.adm-chart{display:flex;flex-direction:column;gap:14px}
.adm-chart-row{
  display:grid;grid-template-columns:120px 1fr 90px;gap:14px;
  align-items:center;
}
.adm-chart-label{
  display:flex;flex-direction:column;gap:2px;
  font-size:13px;
}
.adm-chart-price{
  font-size:11px;color:var(--surface-text-faint);font-weight:600;
}
.adm-chart-bar-wrap{
  height:10px;background:rgba(255,255,255,.04);
  border-radius:5px;overflow:hidden;
}
.adm-chart-bar{
  height:100%;border-radius:5px;
  transition:width .4s ease;
}
.adm-chart-count{
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;
  color:var(--surface-text-strong);text-align:right;
}
.adm-chart-pct{
  font-size:11px;color:var(--surface-text-faint);font-weight:600;margin-left:4px;
}

/* RECENT SIGNUPS */
.adm-recent-list{display:flex;flex-direction:column;gap:6px}
.adm-recent-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:9px;
  background:transparent;border:1px solid transparent;
  cursor:pointer;transition:all .15s;
}
.adm-recent-item:hover{background:rgba(91,76,245,.06);border-color:rgba(91,76,245,.18)}
.adm-recent-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.adm-recent-name{
  font-size:13px;font-weight:700;color:var(--surface-text-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-recent-email{
  font-size:11px;color:var(--surface-text-faint);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-empty-mini{
  text-align:center;padding:30px 10px;
  font-size:13px;color:var(--surface-text-faint);
}

/* SYSTEM ACTIONS GRID */
.adm-system-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.adm-action-card{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:14px 16px;border-radius:10px;
  background:rgba(91,76,245,.04);border:1px solid var(--surface-border);
  cursor:pointer;font-family:inherit;color:var(--surface-text-strong);
  transition:all .15s;
}
.adm-action-card:hover{
  background:rgba(91,76,245,.1);border-color:rgba(91,76,245,.4);
  transform:translateY(-1px);
}
.adm-action-icon{font-size:24px;line-height:1}
.adm-action-title{font-weight:700;font-size:13px;line-height:1.3}
.adm-action-sub{font-size:11px;color:var(--surface-text-faint);margin-top:3px;font-weight:500}

/* TOOLBAR (Users tab) */
.adm-toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:12px 14px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  margin-bottom:14px;
}
.adm-search{
  flex:1;min-width:240px;
  padding:9px 14px;border-radius:8px;
  background:var(--surface-1);border:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-family:inherit;font-size:13px;
}
.adm-search:focus{outline:none;border-color:#5b4cf5;box-shadow:0 0 0 3px rgba(91,76,245,.15)}
.adm-select{
  padding:8px 12px;border-radius:7px;
  background:var(--surface-1);border:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-family:inherit;font-size:12px;
  cursor:pointer;font-weight:600;
}
.adm-select:focus{outline:none;border-color:#5b4cf5}
.adm-select:disabled{opacity:.5;cursor:not-allowed}
.adm-toolbar-sep{
  width:1px;height:22px;background:var(--surface-border);
}
.adm-toolbar-btn{
  padding:8px 14px;border-radius:7px;
  background:transparent;border:1px solid var(--surface-border);
  color:var(--surface-text-muted);font-family:inherit;font-size:12px;font-weight:700;
  cursor:pointer;transition:all .15s;
}
.adm-toolbar-btn:hover{
  background:rgba(91,76,245,.08);border-color:#5b4cf5;color:var(--surface-text-strong);
}
.adm-toolbar-btn-danger:hover{
  background:rgba(251,113,133,.08);border-color:#fb7185;color:#fb7185;
}

/* BULK ACTION BAR */
.adm-bulk-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-radius:10px;
  background:linear-gradient(135deg,rgba(91,76,245,.12),rgba(139,92,246,.04));
  border:1px solid rgba(91,76,245,.3);
  margin-bottom:14px;
}
.adm-bulk-count{font-size:13px;color:var(--surface-text-strong)}
.adm-bulk-count strong{color:#a78bfa}

/* MODERN TABLE */
.adm-table-wrap{
  border-radius:12px;border:1px solid var(--surface-border);
  background:var(--surface-2);overflow:auto;
}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table thead{background:var(--surface-1);position:sticky;top:0;z-index:1}
.adm-table th{
  text-align:left;padding:14px 16px;
  font-size:10px;font-weight:800;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.7px;
  border-bottom:1px solid var(--surface-border);white-space:nowrap;
}
.adm-th-sortable:hover{background:rgba(91,76,245,.06);color:var(--surface-text-strong)}
.adm-table td{
  padding:14px 16px;border-bottom:1px solid var(--surface-border);
  vertical-align:middle;
}
.adm-table tbody tr:last-child td{border-bottom:none}
.adm-table tbody tr:hover{background:rgba(91,76,245,.03)}
.adm-table tr.adm-row-selected{background:rgba(91,76,245,.08) !important}
.adm-td-check{width:36px;text-align:center}
.adm-td-check input{cursor:pointer;accent-color:#5b4cf5;width:15px;height:15px}
.adm-td-actions{text-align:right;white-space:nowrap;width:140px}
.adm-num{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;
  color:var(--surface-text-strong);
}
.adm-muted{font-size:12px;color:var(--surface-text-faint)}

.adm-user-cell{display:flex;align-items:center;gap:11px;min-width:0}
.adm-user-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.adm-user-name{
  font-weight:700;color:var(--surface-text-strong);font-size:13px;
  display:flex;align-items:center;gap:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-user-email{
  font-size:11px;color:var(--surface-text-faint);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-self-tag{
  font-size:9px;font-weight:800;letter-spacing:.05em;
  background:#10b981;color:#fff;padding:1px 6px;border-radius:8px;
}

.adm-role-pill{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
  letter-spacing:.02em;
}
.adm-role-user{background:rgba(156,163,175,.15);color:var(--surface-text-muted)}
.adm-role-admin{background:linear-gradient(135deg,rgba(251,113,133,.18),rgba(248,113,113,.1));color:#fb7185}

.adm-plan-pill{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
  letter-spacing:.02em;
}

.adm-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:7px;margin-left:4px;
  background:transparent;border:1px solid var(--surface-border);
  color:var(--surface-text-muted);font-size:14px;cursor:pointer;
  transition:all .15s;
}
.adm-icon-btn:hover{background:rgba(91,76,245,.1);border-color:#5b4cf5;color:var(--surface-text-strong)}
.adm-icon-btn.adm-icon-danger:hover{background:rgba(251,113,133,.1);border-color:#fb7185;color:#fb7185}

/* ─── ADMIN PANEL (legacy classes — kept for backwards compat with detail view) ───── */
.admin-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin-bottom:24px;
}
.admin-stat-card{
  padding:14px 16px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  text-align:center;
}
.admin-stat-icon{font-size:20px;margin-bottom:4px}
.admin-stat-val{
  font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;line-height:1;
}
.admin-stat-lbl{
  font-size:10px;color:var(--surface-text-faint);text-transform:uppercase;
  letter-spacing:.5px;margin-top:5px;font-weight:600;
}

.admin-toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:12px 14px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--surface-border);
  margin-bottom:14px;
}
.admin-search{
  flex:1;min-width:220px;
  padding:8px 12px;border-radius:8px;
  background:var(--surface-1);border:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-family:inherit;font-size:13px;
}
.admin-search:focus{outline:none;border-color:#5b4cf5;box-shadow:0 0 0 3px rgba(91,76,245,.15)}
.admin-select{
  padding:7px 10px;border-radius:7px;
  background:var(--surface-1);border:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-family:inherit;font-size:12px;
  cursor:pointer;
}
.admin-select:focus{outline:none;border-color:#5b4cf5}
.admin-select:disabled{opacity:.5;cursor:not-allowed}

.admin-table-wrap{
  border-radius:10px;border:1px solid var(--surface-border);
  background:var(--surface-2);overflow:auto;
}
.admin-table{
  width:100%;border-collapse:collapse;font-size:13px;
}
.admin-table thead{
  background:var(--surface-1);
}
.admin-table th{
  text-align:left;padding:12px 14px;
  font-size:11px;font-weight:700;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;
  border-bottom:1px solid var(--surface-border);
}
.admin-table td{
  padding:12px 14px;border-bottom:1px solid var(--surface-border);
  vertical-align:middle;
}
.admin-table tbody tr:last-child td{border-bottom:none}
.admin-table tbody tr:hover{background:rgba(91,76,245,.04)}

.admin-action-btn{
  padding:6px 12px;border-radius:7px;
  background:transparent;border:1px solid var(--surface-border);
  color:var(--surface-text-muted);font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s;margin-left:6px;
}
.admin-action-btn:hover{
  background:rgba(91,76,245,.08);border-color:#5b4cf5;color:var(--surface-text-strong);
}
.admin-action-danger:hover{
  background:rgba(251,113,133,.08);border-color:#fb7185;color:#fb7185;
}

/* Admin detail view */
.admin-detail-header{
  display:flex;align-items:center;gap:18px;
  padding:20px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,113,133,.06),rgba(91,76,245,.04));
  border:1px solid rgba(251,113,133,.2);
}
.admin-detail-avatar{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);
  color:#fff;font-weight:800;font-size:26px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;border:3px solid var(--surface-1);
}

.admin-detail-table{
  width:100%;border-collapse:collapse;font-size:13px;
}
.admin-detail-table th{
  text-align:left;padding:8px 10px;
  font-size:10px;font-weight:700;color:var(--surface-text-faint);
  text-transform:uppercase;letter-spacing:.6px;
  border-bottom:1px solid var(--surface-border);
  background:transparent;
}
.admin-detail-table th.lb-num,.admin-detail-table td.lb-num{text-align:right}
.admin-detail-table td{
  padding:8px 10px;border-bottom:1px solid var(--surface-border);
  color:var(--surface-text-strong);font-size:13px;vertical-align:top;
  word-break:break-word;
}
.admin-detail-table tr:last-child td{border-bottom:none}
.admin-detail-table code{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  background:rgba(91,76,245,.1);padding:1px 6px;border-radius:4px;
  color:#a78bfa;
}

/* Activity heatmap (14-day strip) */
.admin-activity-grid{
  display:grid;grid-template-columns:repeat(14,1fr);gap:4px;
}
.admin-activity-cell{
  width:100%;aspect-ratio:1;border-radius:3px;
  background:rgba(255,255,255,.04);
}
.admin-activity-cell[data-i="1"]{background:rgba(91,76,245,.25)}
.admin-activity-cell[data-i="2"]{background:rgba(91,76,245,.5)}
.admin-activity-cell[data-i="3"]{background:rgba(139,92,246,.7)}
.admin-activity-cell[data-i="4"]{background:linear-gradient(135deg,#5b4cf5,#8b5cf6)}
.pricing-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  padding:4px 14px;border-radius:999px;
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;
  font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.pricing-icon{font-size:32px;margin-bottom:8px}
.pricing-name{
  font-family:"Outfit",sans-serif;font-size:22px;font-weight:900;
  color:var(--surface-text-strong);margin-bottom:6px;
}
.pricing-desc{font-size:13px;color:var(--surface-text-faint);line-height:1.5;margin-bottom:20px;min-height:40px}
.pricing-price{display:flex;align-items:baseline;gap:6px}
.pricing-price-num{font-family:"Outfit",sans-serif;font-size:44px;font-weight:900;color:var(--surface-text-strong);line-height:1}
.pricing-price-per{font-size:15px;color:var(--surface-text-faint);font-weight:500}
.pricing-billed{font-size:11px;color:var(--surface-text-faint);margin-top:4px;min-height:16px}
.pricing-divider{height:1px;background:var(--surface-border);margin:20px 0}
.pricing-features{
  list-style:none;margin:0 0 20px;padding:0;
  display:flex;flex-direction:column;gap:9px;flex:1;
}
.pricing-features li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;line-height:1.5;color:var(--surface-text);
}
.pricing-check{color:#10b981;flex-shrink:0;margin-top:1px;font-weight:800}
.pricing-cta,.pricing-cta-popular,.pricing-cta-free{
  width:100%;padding:12px;border-radius:12px;border:none;cursor:pointer;
  font-size:14px;font-weight:800;font-family:inherit;transition:all .2s;
  margin-top:auto;
}
.pricing-cta{background:var(--overlay);border:1px solid var(--surface-border);color:var(--surface-text-strong)}
.pricing-cta:hover{border-color:rgba(139,92,246,.6)}
.pricing-cta-popular{
  background:linear-gradient(135deg,#5b4cf5,#8b5cf6);color:#fff;
  box-shadow:0 4px 20px rgba(91,76,245,.4);
}
.pricing-cta-popular:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(91,76,245,.55)}
.pricing-cta-free{
  background:transparent;border:1px dashed var(--surface-border-strong);color:var(--surface-text);
}
.pricing-cta-free:hover{border-style:solid;color:var(--surface-text-strong)}

/* TRUST STRIP */
.pricing-trust{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:center;
  padding:32px 0;margin-top:16px;border-bottom:1px solid var(--surface-border);
}
.pricing-trust-item{font-size:12px;color:var(--surface-text-faint);font-weight:600}

/* SECTIONS */
.pricing-section{padding:60px 0}
.pricing-section-header{text-align:center;max-width:640px;margin:0 auto 36px}
.pricing-section-eyebrow{
  display:inline-block;padding:5px 14px;border-radius:999px;
  background:var(--overlay);border:1px solid var(--surface-border);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--surface-text-faint);margin-bottom:14px;
}
.pricing-section-title{
  font-family:"Outfit",sans-serif;font-size:clamp(26px,4vw,36px);font-weight:900;
  color:var(--surface-text-strong);letter-spacing:-.02em;line-height:1.15;margin:0;
}

/* MATRIX */
.pricing-matrix-wrap{
  overflow-x:auto;border-radius:16px;border:1px solid var(--surface-border);
  background:var(--surface-2);
}
.pricing-matrix{width:100%;border-collapse:collapse;min-width:640px}
.pricing-matrix-head{
  text-align:center;padding:16px 12px;
  font-family:"Outfit",sans-serif;font-size:14px;font-weight:800;
  color:var(--surface-text-strong);
  border-bottom:2px solid var(--surface-border);
  background:var(--overlay);
}
.pricing-matrix-head:first-child{text-align:left}
.pricing-matrix-head-pro{
  background:linear-gradient(135deg,rgba(91,76,245,.2),rgba(139,92,246,.15));
  color:#a78bfa;
}
.pricing-matrix tr:nth-child(even){background:var(--overlay-soft)}
.pricing-matrix tr:hover{background:rgba(139,92,246,.05)}
.pricing-matrix-label{
  padding:13px 16px;font-size:13px;font-weight:700;color:var(--surface-text-strong);
  border-bottom:1px solid var(--surface-border);
}
.pricing-matrix-cell{
  padding:13px 12px;font-size:13px;text-align:center;color:var(--surface-text);
  border-bottom:1px solid var(--surface-border);
}
.pricing-matrix-cell-pro{background:rgba(139,92,246,.08);font-weight:600;color:var(--surface-text-strong)}

/* FAQ */
.pricing-faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.pricing-faq{
  background:var(--surface-2);border:1px solid var(--surface-border);
  border-radius:12px;overflow:hidden;
}
.pricing-faq[open]{border-color:rgba(139,92,246,.5)}
.pricing-faq-q{
  cursor:pointer;padding:16px 20px;list-style:none;
  font-size:14px;font-weight:700;color:var(--surface-text-strong);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.pricing-faq-q::-webkit-details-marker{display:none}
.pricing-faq-q::after{
  content:"+";font-size:20px;font-weight:400;color:var(--surface-text-faint);
  transition:transform .2s;
}
.pricing-faq[open] .pricing-faq-q::after{transform:rotate(45deg)}
.pricing-faq-a{
  padding:0 20px 16px;font-size:13px;line-height:1.65;color:var(--surface-text);
}

/* FINAL CTA */
.pricing-final-cta{
  margin:40px 0 20px;padding:50px 32px;border-radius:24px;text-align:center;
  background:linear-gradient(135deg,rgba(91,76,245,.18),rgba(251,113,133,.1));
  border:1px solid rgba(139,92,246,.3);
}
.pricing-final-cta-title{
  font-family:"Outfit",sans-serif;font-size:clamp(24px,3.5vw,34px);font-weight:900;
  color:var(--surface-text-strong);letter-spacing:-.02em;line-height:1.2;margin:0 0 12px;
}
.pricing-final-cta-sub{font-size:15px;color:var(--surface-text);line-height:1.6;margin:0 0 24px}
.pricing-final-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Sign-in nudge */
.pricing-signin-nudge{
  max-width:400px;margin:24px auto 0;padding:20px;text-align:center;
  background:var(--overlay-soft);border:1px solid var(--surface-border);border-radius:14px;
}
.pricing-signin-nudge p{font-size:13px;color:var(--surface-text-faint);margin:0 0 10px}
.pricing-signin-nudge button{
  padding:9px 20px;border-radius:10px;background:transparent;
  border:1px solid var(--surface-border-strong);color:var(--surface-text);
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
}
.pricing-signin-nudge button:hover{border-color:rgba(139,92,246,.5)}

@media (max-width:700px){
  .pricing-hero{padding:40px 8px 24px}
  .pricing-grid{grid-template-columns:1fr;gap:14px}
  .pricing-section{padding:40px 0}
  .pricing-final-cta{padding:36px 20px}
}

/* Cost badges on mode buttons */
.voice-cost-badge{
  display:inline-block;margin-left:6px;padding:2px 8px;
  border-radius:999px;font-size:10px;font-weight:800;
  letter-spacing:.04em;vertical-align:1px;
}
.voice-cost-badge.free{background:rgba(52,211,153,.18);color:#34d399;border:1px solid rgba(52,211,153,.4)}
.voice-cost-badge.paid{background:rgba(251,191,36,.18);color:#fbbf24;border:1px solid rgba(251,191,36,.4)}
.voice-cost-badge.ai{background:rgba(167,139,250,.18);color:#a78bfa;border:1px solid rgba(167,139,250,.4)}

/* Cost estimate pill at top */
.voice-cost-estimate{
  padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;
  border:1px solid;
}
.voice-cost-estimate.free{background:rgba(52,211,153,.12);color:#34d399;border-color:rgba(52,211,153,.4)}
.voice-cost-estimate.paid{background:rgba(251,191,36,.12);color:#fbbf24;border-color:rgba(251,191,36,.4)}
.voice-cost-estimate strong{font-family:"Outfit",sans-serif;font-weight:900}

/* Mode (engine) picker */
.voice-mode-row{display:flex;flex-direction:column;gap:6px}
.voice-mode-btn{
  background:var(--overlay);border:1px solid var(--surface-border);
  padding:10px 12px;border-radius:10px;text-align:left;
  font-family:inherit;color:var(--surface-text);cursor:pointer;transition:all .15s;
}
.voice-mode-btn:hover{border-color:rgba(139,92,246,.5)}
.voice-mode-btn.active{
  background:linear-gradient(135deg,rgba(251,113,133,.2),rgba(244,63,94,.12));
  border-color:rgba(251,113,133,.6);
}
.voice-mode-title{
  font-family:"Outfit",sans-serif;font-size:13px;font-weight:800;
  color:var(--surface-text-strong);
}
.voice-mode-sub{font-size:10px;color:var(--surface-text-faint);margin-top:2px;line-height:1.4}

/* Responsive */
@media (max-width:900px){
  .voice-body{grid-template-columns:1fr}
  .voice-sidebar{display:none}
  .voice-sidebar.open{
    display:flex;position:fixed;top:0;right:0;bottom:0;width:320px;max-width:90vw;
    z-index:100;max-height:100vh;border-radius:0;
  }
  .voice-wrap{padding:16px}
  .voice-review-wrap{padding:16px}
  .voice-review-big-score{font-size:56px}
}

/* ── ADMIN PENDING PAYMENTS PANEL ─────────────────────── */
.adm-pending-list{display:flex;flex-direction:column;gap:8px}
.adm-pending-row{
  display:grid;
  grid-template-columns:42px minmax(180px,1.4fr) minmax(280px,1.6fr) auto;
  align-items:center;gap:14px;
  padding:12px 14px;
  background:rgba(245,158,11,.04);
  border:1px solid rgba(245,158,11,.18);
  border-radius:10px;
}
.adm-pending-avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#5b4cf5,#a78bfa);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:14px;overflow:hidden;flex-shrink:0;
}
.adm-pending-info{min-width:0}
.adm-pending-name{
  font-weight:700;color:var(--surface-text-strong);font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-pending-email{
  font-size:12px;color:var(--surface-text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-pending-badges{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.adm-pending-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;
  border:1px solid;letter-spacing:.01em;
}
.adm-pending-ago{
  font-size:11px;color:var(--surface-text-faint);font-weight:600;
}
.adm-pending-actions{display:flex;gap:6px;flex-shrink:0}
.adm-pending-actions .btn-sm{
  padding:7px 12px;font-size:12px;font-weight:700;
}
@media (max-width:780px){
  .adm-pending-row{grid-template-columns:42px 1fr;grid-auto-flow:row}
  .adm-pending-badges{grid-column:1/-1}
  .adm-pending-actions{grid-column:1/-1;justify-content:flex-end}
}

/* ── REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}