:root{
  /* ── TYPOGRAPHY — Brand UI Updates ── */
  --f-display:'Manrope',sans-serif;
  --f-body:'Manrope',sans-serif;
  --f-struct:'Manrope',sans-serif;
  --f-num:'IBM Plex Mono',monospace;
  --f-voice:'Manrope',sans-serif;
  --f-hero:'DM Serif Display',serif;
  --f-notes:'Nunito',sans-serif;
  --f-mono:'JetBrains Mono',monospace;
  --f-achievement:'Cinzel',serif;

  /* ── 8-STEP TYPE SCALE ── */
  --fs-xs:11px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-2xl:30px;
  --fs-3xl:48px;
  --fs-4xl:64px;

  /* ── STRICT 8-POINT SPACING GRID ── */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;

  /* ── LINE HEIGHTS ── */
  --lh-display:1.1;
  --lh-tight:1.3;
  --lh-body:1.7;
  --lh-loose:1.85;

  /* ── BORDER RADIUS — BRAND STANDARD 18-22px ── */
  --r-card:20px;
  --r-pill:9999px;
  --r-chip:14px;
  --r-btn:14px;
  --r-input:14px;
  --r-modal:22px;
  --r10:10px;--r12:12px;--r14:14px;--r18:18px;--r20:20px;--r24:22px;

  /* ── SPRING MOTION PRESETS ── */
  --spring-nav:cubic-bezier(0.34,1.56,0.64,1);
  --spring-expand:cubic-bezier(0.25,1.25,0.5,1);
  --spring-settle:cubic-bezier(0.34,1.3,0.64,1);
  --spring-bounce:cubic-bezier(0.34,1.8,0.64,1);
}


/* ────────────────────────────────────────────────
   MENTORIX PREMIUM DESIGN OVERHAUL CUSTOM STYLES
──────────────────────────────────────────────── */
:root {
  --r-card: 20px;
}
.card, .sc, .sc-card {
  border-radius: var(--r-card) !important;
  background: var(--card) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important; backdrop-filter: blur(20px) saturate(120%) !important;
  border: 1px solid var(--brd) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.card:hover, .sc:hover, .sc-card:hover {
  transform: scale(1.02) !important;
  border-color: rgba(219, 39, 119, 0.35) !important;
  box-shadow: 0 12px 40px rgba(219, 39, 119, 0.08), 0 0 20px rgba(37, 99, 235, 0.05) !important;
}
.btn, .chip, .qa-chip {
  border-radius: 9999px !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.btn:active, .chip:active, .qa-chip:active {
  transform: scale(0.94) !important;
}
.punct-anchor {
  display: inline-block;
  transform: scale(1.25);
  transform-origin: center;
  color: rgba(6, 182, 212, 0.85);
  margin-left: 2px;
}
.dash-layout-container {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .dash-layout-container {
    grid-template-columns: 1fr;
  }
}
.dash-telemetry-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 1024px) {
  .dash-telemetry-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .dash-telemetry-column {
    grid-template-columns: 1fr;
  }
}
.sprint-timer-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}
.sprint-timer-circle {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sprint-timer-svg {
  transform: rotate(-90deg);
  width: 160px;
  height: 160px;
}
.sprint-timer-bg-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 8;
}
.sprint-timer-progress-ring {
  fill: none;
  stroke: url(#timer-grad);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.sprint-timer-digits {
  position: absolute;
  font-family: var(--f-num);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
}
.live-log-container {
  background: rgba(4, 4, 15, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: 16px;
  padding: 16px;
  font-family: var(--f-num);
  font-size: 11px;
  color: var(--cl);
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.live-log-title {
  font-size: 10px;
  color: var(--sub);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(6, 182, 212, 0.2);
  padding-bottom: 4px;
}
.live-log-pulse {
  width: 6px;
  height: 6px;
  background: var(--c);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c);
  animation: logPulse 1s infinite alternate;
}
@keyframes logPulse {
  from { opacity: 0.3; }
  to { opacity: 1; }
}
.live-log-stream {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}
.live-log-item {
  line-height: 1.4;
  opacity: 0.8;
  animation: logLineIn 0.2s ease;
}
@keyframes logLineIn {
  from { transform: translateY(4px); opacity: 0; }
  to { transform: translateY(0); opacity: 0.8; }
}
.circle-progress-container {
  display: inline-block;
  position: relative;
  width: 44px;
  height: 44px;
}
.circle-progress-svg {
  transform: rotate(-90deg);
  width: 44px;
  height: 44px;
}
.circle-progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 4;
}
.circle-progress-fill {
  fill: none;
  stroke: var(--p);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.35s ease;
}
.focus-mode-overlay {
  position: fixed;
  inset: 0;
  background: #04040f;
  z-index: 8000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.focus-mode-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.focus-terminal-container {
  width: 90%;
  max-width: 680px;
  text-align: center;
  position: relative;
  z-index: 8010;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.focus-terminal-input {
  background: transparent;
  border: none;
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  outline: none;
  width: 100%;
  caret-color: var(--c);
}
.focus-terminal-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.3s;
}
.focus-mode-label {
  font-family: var(--f-struct);
  font-size: 13px;
  color: var(--mut);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.focus-minimize-btn {
  position: absolute;
  top: 32px;
  right: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--sub);
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 12px;
  cursor: pointer;
  z-index: 8020;
  transition: all 0.25s ease;
}
.focus-minimize-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.roadmap-svg-canvas {
  width: 100%;
  height: 520px;
  background: rgba(12, 12, 30, 0.3);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.roadmap-svg-canvas:active {
  cursor: grabbing;
}
.roadmap-node-circle {
  cursor: pointer;
  transition: r 0.25s var(--ease-pop), fill 0.25s, stroke 0.25s;
}
.roadmap-node-circle:hover {
  r: 14;
  fill: #fff !important;
}
.roadmap-node-text {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--sub);
  pointer-events: none;
}
.roadmap-node-text.active {
  fill: #fff;
  font-weight: 700;
}
.roadmap-node-line {
  stroke-dasharray: 6 4;
  animation: flowDashes 15s linear infinite;
}
@keyframes flowDashes {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.roadmap-drawer-panel {
  position: absolute;
  bottom: 24px;
  left: 24px;
  width: 340px;
  max-width: calc(100% - 48px);
  background: rgba(12, 12, 30, 0.88);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.roadmap-drawer-panel.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


</style>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── BACKGROUNDS: DIM BLENDED SHADES (NO BRIGHT WHITE) ── */
  --bg: #04040e !important;          /* Deepest unlit navy void */
  --surf: #090918 !important;        /* Deep midnight blue element anchor */
  --card: rgba(10, 10, 26, 0.65) !important; /* Low-brightness frosted glass panel */
  
  /* ── ACCENT SHADES: COOL CHROME BLUE ── */
  --p: #2563eb !important;           /* Deep tactical chrome blue */
  --pl: #3b82f6 !important;          /* Luminous mid-tone blue */
  --pp: #1d4ed8 !important;          /* Shadow command blue */
  --pll: #93c5fd !important;
  
  /* ── ACCENT SHADES: COOL CYBER PINK ── */
  --c: #db2777 !important;           /* Muted laser pink (not neon bright) */
  --cl: #ec4899 !important;          /* Deep rose-pink line tracing */
  --cc: #9d174d !important;          /* Dark crimson pink background accent */

  /* ── INTERFACIAL TEXT & MATH CONSTRAINTS ── */
  --txt: #e2e8f0 !important;         /* Off-white soft slate for high-end readability */
  --sub: #94a3b8 !important;         /* Cool slate gray for secondary labels */
  --mut: #475569 !important;         /* Dark desaturated slate for minimized data */
  --muted2: #1e293b !important;
  
  /* ── BORDERS & SYSTEM SEPARATORS ── */
  --brd: rgba(37, 99, 235, 0.15) !important;   /* Hard blue micro-edge trace */
  --glass-brd: rgba(219, 39, 119, 0.18) !important; /* Hard pink micro-edge trace */
  --brd2: rgba(37, 99, 235, 0.08) !important;
  --brdh: rgba(219, 39, 119, 0.35) !important;
  
  /* ── BACKDROP LAYER MESHES (COOL GRADIENT BLEND) ── */
  --mesh-p: radial-gradient(circle at 10% 15%, rgba(37, 99, 235, 0.12) 0%, transparent 55%) !important;
  --mesh-c: radial-gradient(circle at 90% 85%, rgba(219, 39, 119, 0.08) 0%, transparent 60%) !important;
  --mesh-pk: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%) !important;

  /* ── LAYERED SHADOWS ── */
  --shadow-sm:0 2px 16px rgba(0,0,0,.4);
  --shadow-md:0 8px 32px rgba(0,0,0,.5);
  --shadow-lg:0 20px 64px rgba(0,0,0,.6);
  --shadow-xl:0 32px 80px rgba(0,0,0,.7);
  --shadow-glow:0 8px 40px rgba(139,92,246,.3);
  --shadow-cyan:0 8px 32px rgba(6,182,212,.25);

  /* ── RADIAL MESH BG LAYERS ── */
  --mesh-p:radial-gradient(ellipse 800px 600px at -10% -20%,rgba(109,40,217,0.18) 0%,transparent 60%);
  --mesh-c:radial-gradient(ellipse 700px 500px at 110% 110%,rgba(6,182,212,0.12) 0%,transparent 60%);
  --mesh-pk:radial-gradient(ellipse 500px 400px at 50% 60%,rgba(236,72,153,0.07) 0%,transparent 60%);

  /* ── TIMING ── */
  --fast:.12s;--mid:.22s;--slow:.38s;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --dp1:0 1px 4px rgba(0,0,0,.3);
  --dp2:0 4px 16px rgba(0,0,0,.4);
  --dp3:0 8px 32px rgba(0,0,0,.5);
  --dp4:0 16px 56px rgba(0,0,0,.6);

  /* ── MENTOR THEMES ── */
  --theme-p:#8B5CF6;--theme-pp:#6D28D9;--theme-glow:rgba(139,92,246,.25);
}
/* Friendly mentor — warm amber */
body.theme-friendly{--p:#F59E0B;--pl:#FCD34D;--pp:#B45309;--theme-glow:rgba(245,158,11,.25)}
/* Genius mentor — cool blue */
body.theme-genius{--p:#3B82F6;--pl:#93C5FD;--pp:#1D4ED8;--theme-glow:rgba(59,130,246,.25)}
/* Motivational — vibrant coral */
body.theme-motivational{--p:#EF4444;--pl:#FCA5A5;--pp:#B91C1C;--theme-glow:rgba(239,68,68,.25)}
/* Humorous — playful green */
body.theme-humorous{--p:#10B981;--pl:#6EE7B7;--pp:#047857;--theme-glow:rgba(16,185,129,.25)}
/* ══════════════════════════════════════════════════════════════
   MENTORIX 5-THEME SYSTEM
   1. Dark (default) 2. Light 3. Green 4. Vibrant 5. Playful
   All text visibility verified. No color-on-same-color issues.
══════════════════════════════════════════════════════════════ */

/* ── THEME 1: DARK (default — already in root, no class needed) ── */
/* bg:#060814 · accent:violet · text:#F1F5F9 · visible everywhere */

/* ── THEME 2: LIGHT ── */
/* White canvas, deep navy text, violet accents, full readability */
body.theme-light{
  --bg:#F4F3FF;
  --bg2:#FFFFFF;
  --surf:#FFFFFF;
  --card:rgba(255,255,255,0.97);
  --brd:rgba(109,40,217,0.12);
  --brd2:rgba(109,40,217,0.07);
  --brdh:rgba(109,40,217,0.4);
  --glass-brd:rgba(109,40,217,0.1);
  --glass-brd-top:linear-gradient(135deg,rgba(109,40,217,.18) 0%,rgba(109,40,217,.05) 60%,transparent 100%);
  --txt:#1A1033;
  --sub:#4A3F6B;
  --mut:#8B80A8;
  --muted2:#C4BBDA;
  --mesh-p:radial-gradient(ellipse 700px 500px at -10% -10%,rgba(139,92,246,.08) 0%,transparent 60%);
  --mesh-c:radial-gradient(ellipse 600px 500px at 110% 110%,rgba(109,40,217,.05) 0%,transparent 60%);
  --mesh-pk:radial-gradient(ellipse 400px 300px at 50% 60%,rgba(236,72,153,.04) 0%,transparent 60%);
  --shadow-sm:0 2px 12px rgba(109,40,217,.08);
  --shadow-md:0 6px 28px rgba(109,40,217,.1);
  --shadow-lg:0 16px 56px rgba(109,40,217,.12);
  --shadow-glow:0 0 28px rgba(139,92,246,.18);
}
body.theme-light,body.theme-light #main{color:var(--txt)!important;background:var(--bg)}
body.theme-light::before{background:var(--mesh-p),var(--mesh-c),var(--mesh-pk)}
body.theme-light #orbs{opacity:0.25}
body.theme-light #orbs .o1{background:radial-gradient(circle,rgba(139,92,246,.15),transparent 70%);filter:blur(80px)}
body.theme-light #orbs .o2{background:radial-gradient(circle,rgba(109,40,217,.1),transparent 70%);filter:blur(80px)}
body.theme-light #orbs .o3{display:none}
body.theme-light #particle-canvas{opacity:.08}
/* Sidebar */
body.theme-light #sb{background:rgba(255,255,255,.98)!important;border-right:1px solid rgba(109,40,217,.1)!important;box-shadow:2px 0 20px rgba(109,40,217,.06)}
body.theme-light .sb-logo-tx{background:linear-gradient(90deg,#1A1033,var(--p));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
body.theme-light .nav-grp{color:rgba(74,63,107,.5)}
body.theme-light .ni{color:var(--sub)}
body.theme-light .ni:hover:not(.on){background:rgba(109,40,217,.07);color:var(--p)}
body.theme-light .ni.on,body.theme-light .ni.active{background:linear-gradient(90deg,rgba(109,40,217,.12),rgba(109,40,217,.04));color:var(--p);box-shadow:inset 3px 0 0 var(--p)}
body.theme-light .sb-uname{color:var(--txt)}
body.theme-light .sb-ulvl{color:var(--mut)}
body.theme-light .sb-btn{color:var(--mut)}
body.theme-light .sb-btn:hover{color:var(--sub);background:rgba(109,40,217,.05)}
/* Cards */
body.theme-light .card{background:rgba(255,255,255,.97)!important;border:1px solid rgba(109,40,217,.1)!important;box-shadow:0 2px 16px rgba(109,40,217,.07)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.theme-light .card:hover{border-color:rgba(109,40,217,.25)!important;box-shadow:0 8px 32px rgba(109,40,217,.1)!important}
body.theme-light .card::before{opacity:.3}
body.theme-light .card-glass{background:rgba(255,255,255,.9)!important;border-color:rgba(109,40,217,.1)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important}
body.theme-light .cglow{background:rgba(139,92,246,.06)!important;border-color:rgba(139,92,246,.2)!important}
body.theme-light .sc{background:rgba(255,255,255,.97)!important;border:1px solid rgba(109,40,217,.1)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.theme-light .sc:hover{box-shadow:0 12px 36px rgba(109,40,217,.12)!important}
/* Text */
body.theme-light .h1,body.theme-light .h2,body.theme-light .h3{color:var(--txt)!important;-webkit-text-fill-color:var(--txt)!important}
body.theme-light .sub{color:var(--mut)!important}
body.theme-light .sn{color:var(--txt)!important}
body.theme-light .sl{color:var(--mut)!important}
/* Inputs */
body.theme-light .inp{background:rgba(255,255,255,.95)!important;border-color:rgba(109,40,217,.18)!important;color:var(--txt)!important}
body.theme-light .inp:focus{border-color:var(--p)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(109,40,217,.1)!important}
body.theme-light .inp::placeholder{color:var(--mut)!important}
body.theme-light .auth-inp{background:rgba(255,255,255,.9)!important;border-color:rgba(109,40,217,.18)!important;color:var(--txt)!important}
/* Buttons */
body.theme-light .bgh{background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.1)!important;color:var(--txt)!important}
body.theme-light .bgh:hover{background:rgba(109,40,217,.08)!important;border-color:rgba(109,40,217,.3)!important;color:var(--p)!important}
body.theme-light .bsec{border-color:rgba(109,40,217,.4)!important;color:var(--p)!important}
/* Quiz options */
body.theme-light .qopt{background:rgba(109,40,217,.03)!important;border-color:rgba(109,40,217,.12)!important;color:var(--txt)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.theme-light .qopt:hover:not(.cor):not(.wrg):not(.sel){background:rgba(109,40,217,.07)!important;border-color:rgba(109,40,217,.3)!important;color:var(--p)!important}
body.theme-light .qltr{background:rgba(109,40,217,.1)!important;color:var(--p)!important}
/* Tabs, chips, tags */
body.theme-light .tabs{background:rgba(109,40,217,.06)!important}
body.theme-light .tb{color:var(--sub)!important}
body.theme-light .tb.on{background:#fff!important;color:var(--p)!important;border-color:rgba(109,40,217,.2)!important}
body.theme-light .chip{background:rgba(109,40,217,.06)!important;border-color:rgba(109,40,217,.12)!important;color:var(--sub)!important}
body.theme-light .chip:hover,.chip.on{background:rgba(109,40,217,.12)!important;border-color:var(--p)!important;color:var(--p)!important}
/* Other elements */
body.theme-light .set-row{border-bottom-color:rgba(109,40,217,.08)!important}
body.theme-light ::-webkit-scrollbar-thumb{background:rgba(109,40,217,.18)!important}
body.theme-light .nav-grp{color:rgba(74,63,107,.45)!important}
body.theme-light .tio-bubble{background:rgba(109,40,217,.05)!important;border-color:rgba(109,40,217,.12)!important}
body.theme-light .auth-card{background:rgba(255,255,255,.98)!important;border-color:rgba(109,40,217,.15)!important}
body.theme-light .ob-card{background:rgba(255,255,255,.97)!important;border-color:rgba(109,40,217,.15)!important}
body.theme-light .expl{background:rgba(16,185,129,.06)!important;border-color:rgba(16,185,129,.2)!important;color:#047857!important}
body.theme-light .lhero{background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(6,182,212,.04))!important;border-color:rgba(109,40,217,.15)!important}
body.theme-light .mai{background:rgba(109,40,217,.05)!important;border-color:rgba(109,40,217,.1)!important;color:var(--sub)!important}
body.theme-light .ec{background:#fff!important;border-color:rgba(109,40,217,.1)!important}
body.theme-light .ec:hover{background:rgba(109,40,217,.04)!important}
body.theme-light .ec.on{background:rgba(109,40,217,.07)!important;border-color:rgba(109,40,217,.3)!important}
body.theme-light #particle-canvas{opacity:.06!important}
body.theme-light .live-log-container{background:rgba(248,247,255,.97)!important;border-color:rgba(109,40,217,.12)!important}

/* ── THEME 3: GREEN — All shades and accents of emerald green ── */
/* Deep forest bg, emerald accent, mint text, EVERYTHING green-toned */
body.theme-green{
  --bg:#020D08;
  --bg2:#061410;
  --surf:#0A1F16;
  --card:rgba(8,28,20,0.65);
  --brd:rgba(16,185,129,0.18);
  --brd2:rgba(16,185,129,0.1);
  --brdh:rgba(52,211,153,0.55);
  --glass-brd:rgba(16,185,129,0.2);
  --glass-brd-top:linear-gradient(135deg,rgba(52,211,153,.25) 0%,rgba(16,185,129,.08) 60%,transparent 100%);
  --p:#10B981;
  --pl:#34D399;
  --pp:#047857;
  --pll:#6EE7B7;
  --c:#06B6D4;
  --cl:#67E8F9;
  --cc:#0E7490;
  --pk:#10B981;
  --pkl:#34D399;
  --red:#EF4444;--redl:#FCA5A5;--redk:#B91C1C;
  --ok:#10B981;
  --okl:#34D399;
  --gold:#FCD34D;
  --goldl:#FDE68A;
  --txt:#ECFDF5;
  --sub:#A7F3D0;
  --mut:#065F46;
  --muted2:#022C22;
  --theme-glow:rgba(16,185,129,.3);
  --shadow-glow:0 0 32px rgba(16,185,129,.28);
  --mesh-p:radial-gradient(ellipse 800px 600px at -10% -20%,rgba(4,120,87,.35) 0%,transparent 60%);
  --mesh-c:radial-gradient(ellipse 700px 500px at 110% 110%,rgba(6,182,212,.15) 0%,transparent 60%);
  --mesh-pk:radial-gradient(ellipse 500px 400px at 50% 60%,rgba(16,185,129,.12) 0%,transparent 60%);
  --shadow-sm:0 2px 16px rgba(0,0,0,.5);
  --shadow-md:0 8px 32px rgba(0,0,0,.55);
  --shadow-lg:0 20px 64px rgba(0,0,0,.6);
}
body.theme-green::before{background:var(--mesh-p),var(--mesh-c),var(--mesh-pk)}
body.theme-green #orbs .o1{background:radial-gradient(circle,rgba(4,120,87,.55),transparent 70%)!important;opacity:1!important;filter:blur(90px)!important}
body.theme-green #orbs .o2{background:radial-gradient(circle,rgba(6,182,212,.3),transparent 70%)!important;opacity:1!important;filter:blur(80px)!important}
body.theme-green #orbs .o3{background:radial-gradient(circle,rgba(16,185,129,.2),transparent 70%)!important;opacity:1!important;filter:blur(100px)!important}
body.theme-green #orbs{opacity:1!important}
/* Sidebar — deep forest green */
body.theme-green #sb{background:rgba(2,13,8,.95)!important;border-right:1px solid rgba(16,185,129,.15)!important}
body.theme-green .sb-logo-ic{box-shadow:0 0 20px rgba(16,185,129,.4)!important}
body.theme-green .sb-logo-tx{background:linear-gradient(90deg,#34D399,#67E8F9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
body.theme-green .nav-grp{color:rgba(16,185,129,.4)!important}
body.theme-green .ni{color:rgba(167,243,208,.55)!important}
body.theme-green .ni:hover:not(.on){background:rgba(16,185,129,.1)!important;color:#34D399!important}
body.theme-green .ni.on,body.theme-green .ni.active{background:linear-gradient(90deg,rgba(4,120,87,.3),rgba(6,182,212,.1))!important;color:#34D399!important;box-shadow:inset 3px 0 0 #10B981!important}
body.theme-green .ni.on::before{background:linear-gradient(180deg,#10B981,#06B6D4)!important}
body.theme-green .sb-uname{color:#ECFDF5!important}
body.theme-green .sb-ulvl{color:rgba(16,185,129,.6)!important}
body.theme-green .sb-xpf{background:linear-gradient(90deg,#047857,#10B981,#34D399)!important}
body.theme-green .sb-av{background:linear-gradient(135deg,#10B981,#06B6D4)!important}
body.theme-green .sb-btn{color:rgba(16,185,129,.5)!important}
body.theme-green .sb-btn:hover{color:#34D399!important;background:rgba(16,185,129,.08)!important}
/* Cards */
body.theme-green .card{background:rgba(8,28,20,.65)!important;border-color:rgba(16,185,129,.18)!important}
body.theme-green .card:hover{border-color:rgba(52,211,153,.4)!important;box-shadow:0 8px 36px rgba(16,185,129,.15)!important}
body.theme-green .cglow{background:rgba(16,185,129,.1)!important;border-color:rgba(16,185,129,.35)!important;box-shadow:0 4px 24px rgba(16,185,129,.18)!important}
body.theme-green .sc{background:rgba(8,28,20,.65)!important;border-color:rgba(16,185,129,.18)!important}
body.theme-green .card-hero{background:linear-gradient(135deg,rgba(4,120,87,.2),rgba(6,182,212,.08))!important;border-color:rgba(16,185,129,.3)!important}
/* Buttons */
body.theme-green .bpri{background:linear-gradient(135deg,#047857,#10B981,#34D399)!important;color:#022C22!important;box-shadow:0 4px 20px rgba(16,185,129,.4)!important;font-weight:700!important}
body.theme-green .bpri:hover:not(:disabled){box-shadow:0 12px 36px rgba(16,185,129,.55)!important}
body.theme-green .bsec{border-color:rgba(16,185,129,.5)!important;color:#34D399!important}
body.theme-green .bsec:hover{background:rgba(16,185,129,.1)!important}
body.theme-green .bgh{background:rgba(16,185,129,.05)!important;border-color:rgba(16,185,129,.2)!important;color:#A7F3D0!important}
body.theme-green .bgh:hover{border-color:rgba(52,211,153,.45)!important;color:#34D399!important;background:rgba(16,185,129,.1)!important}
/* Text — ensure visibility on dark green bg */
body.theme-green .h1{color:#ECFDF5!important;-webkit-text-fill-color:#ECFDF5!important}
body.theme-green .h2,body.theme-green .h3{color:#D1FAE5!important;-webkit-text-fill-color:#D1FAE5!important}
body.theme-green .sub{color:rgba(167,243,208,.65)!important}
body.theme-green .sn{color:#34D399!important}
body.theme-green .sl{color:rgba(16,185,129,.6)!important}
/* Inputs */
body.theme-green .inp{background:rgba(16,185,129,.05)!important;border-color:rgba(16,185,129,.2)!important;color:#ECFDF5!important}
body.theme-green .inp:focus{border-color:#10B981!important;background:rgba(16,185,129,.08)!important;box-shadow:0 0 0 3px rgba(16,185,129,.15)!important}
body.theme-green .inp::placeholder{color:rgba(16,185,129,.4)!important}
/* Accent decorations */
body.theme-green .tio-ring{border-color:rgba(16,185,129,.45)!important}
body.theme-green .tio-orb{background:radial-gradient(circle at 35% 35%,#34D399 0%,#10B981 50%,#047857 100%)!important;box-shadow:0 0 20px rgba(16,185,129,.6)!important}
body.theme-green .pf,.pf-xp{background:linear-gradient(90deg,#047857,#10B981,#34D399)!important}
body.theme-green .sb-xpb{background:rgba(16,185,129,.1)!important}
body.theme-green ::-webkit-scrollbar-thumb{background:rgba(16,185,129,.25)!important}
body.theme-green .expl{background:rgba(16,185,129,.1)!important;border-color:rgba(16,185,129,.25)!important;color:#6EE7B7!important}
body.theme-green .lhero{background:linear-gradient(135deg,rgba(4,120,87,.3),rgba(6,182,212,.1))!important;border-color:rgba(16,185,129,.3)!important}
body.theme-green .qopt{background:rgba(16,185,129,.05)!important;border-color:rgba(16,185,129,.15)!important;color:#D1FAE5!important}
body.theme-green .qopt:hover:not(.cor):not(.wrg){border-color:rgba(16,185,129,.4)!important;background:rgba(16,185,129,.1)!important}
body.theme-green .qltr{background:rgba(16,185,129,.15)!important;color:#34D399!important}
body.theme-green .auth-card{background:rgba(2,13,8,.97)!important;border-color:rgba(16,185,129,.2)!important}
body.theme-green .chip{background:rgba(16,185,129,.07)!important;border-color:rgba(16,185,129,.18)!important;color:#A7F3D0!important}
body.theme-green .chip:hover,.theme-green .chip.on{background:rgba(16,185,129,.15)!important;border-color:#10B981!important;color:#34D399!important}
body.theme-green .ni.on .ni-ic{filter:drop-shadow(0 0 6px #10B981)!important}
body.theme-green .tabs{background:rgba(16,185,129,.07)!important}
body.theme-green .tb.on{background:rgba(16,185,129,.18)!important;color:#34D399!important;border-color:rgba(16,185,129,.4)!important}
body.theme-green .dc-card{background:linear-gradient(135deg,rgba(4,120,87,.25),rgba(6,182,212,.1))!important;border-color:rgba(16,185,129,.3)!important}

/* ── THEME 4: VIBRANT — Blue + Pink primary accent combination ── */
/* Deep dark base, electric blue+pink duotone, high energy */
body.theme-vibrant{
  --bg:#05040F;
  --bg2:#090818;
  --surf:#0D0B1F;
  --card:rgba(9,8,24,0.7);
  --brd:rgba(59,130,246,0.18);
  --brd2:rgba(59,130,246,0.1);
  --brdh:rgba(236,72,153,0.5);
  --glass-brd:rgba(59,130,246,0.2);
  --glass-brd-top:linear-gradient(135deg,rgba(236,72,153,.25) 0%,rgba(59,130,246,.12) 60%,transparent 100%);
  --p:#3B82F6;
  --pl:#60A5FA;
  --pp:#1D4ED8;
  --pll:#93C5FD;
  --c:#EC4899;
  --cl:#F9A8D4;
  --cc:#BE185D;
  --pk:#EC4899;
  --pkl:#F9A8D4;
  --red:#EF4444;--redl:#FCA5A5;--redk:#B91C1C;
  --ok:#10B981;
  --okl:#34D399;
  --gold:#FCD34D;
  --txt:#F0F4FF;
  --sub:#A5B4FC;
  --mut:#3730A3;
  --muted2:#1E1B4B;
  --theme-glow:rgba(59,130,246,.35);
  --shadow-glow:0 0 32px rgba(59,130,246,.3);
  --mesh-p:radial-gradient(ellipse 800px 600px at -10% -20%,rgba(29,78,216,.28) 0%,transparent 60%);
  --mesh-c:radial-gradient(ellipse 700px 500px at 110% 110%,rgba(236,72,153,.2) 0%,transparent 60%);
  --mesh-pk:radial-gradient(ellipse 500px 400px at 50% 60%,rgba(99,102,241,.1) 0%,transparent 60%);
}
body.theme-vibrant::before{background:var(--mesh-p),var(--mesh-c),var(--mesh-pk)}
body.theme-vibrant #orbs .o1{background:radial-gradient(circle,rgba(29,78,216,.6),transparent 70%)!important;opacity:1!important}
body.theme-vibrant #orbs .o2{background:radial-gradient(circle,rgba(190,24,93,.45),transparent 70%)!important;opacity:1!important}
body.theme-vibrant #orbs .o3{background:radial-gradient(circle,rgba(99,102,241,.35),transparent 70%)!important;opacity:1!important}
body.theme-vibrant #orbs{opacity:1!important}
/* Sidebar — deep indigo */
body.theme-vibrant #sb{background:rgba(5,4,15,.96)!important;border-right:1px solid rgba(59,130,246,.15)!important}
body.theme-vibrant .sb-logo-ic{box-shadow:0 0 24px rgba(59,130,246,.4)!important}
body.theme-vibrant .sb-logo-tx{background:linear-gradient(90deg,#60A5FA,#F9A8D4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
body.theme-vibrant .nav-grp{color:rgba(59,130,246,.4)!important}
body.theme-vibrant .ni{color:rgba(165,180,252,.55)!important}
body.theme-vibrant .ni:hover:not(.on){background:rgba(59,130,246,.1)!important;color:#60A5FA!important}
body.theme-vibrant .ni.on,body.theme-vibrant .ni.active{background:linear-gradient(90deg,rgba(29,78,216,.25),rgba(236,72,153,.12))!important;color:#60A5FA!important;box-shadow:inset 3px 0 0 #3B82F6!important}
body.theme-vibrant .sb-xpf{background:linear-gradient(90deg,#1D4ED8,#3B82F6,#EC4899)!important}
body.theme-vibrant .sb-av{background:linear-gradient(135deg,#1D4ED8,#EC4899)!important}
body.theme-vibrant .sb-uname{color:#F0F4FF!important}
/* Cards */
body.theme-vibrant .card{background:rgba(9,8,24,.7)!important;border-color:rgba(59,130,246,.18)!important}
body.theme-vibrant .card:hover{border-color:rgba(236,72,153,.4)!important;box-shadow:0 8px 36px rgba(59,130,246,.15)!important}
body.theme-vibrant .card-hero{background:linear-gradient(135deg,rgba(29,78,216,.18),rgba(236,72,153,.1))!important;border-color:rgba(59,130,246,.3)!important}
/* Buttons — blue→pink gradient */
body.theme-vibrant .bpri{background:linear-gradient(135deg,#1D4ED8,#3B82F6,#EC4899)!important;color:#fff!important;box-shadow:0 4px 20px rgba(59,130,246,.4)!important}
body.theme-vibrant .bpri:hover:not(:disabled){box-shadow:0 12px 36px rgba(59,130,246,.55)!important;transform:translateY(-3px) scale(1.02)!important}
body.theme-vibrant .bsec{border-color:rgba(59,130,246,.5)!important;color:#60A5FA!important}
body.theme-vibrant .bgh{background:rgba(59,130,246,.05)!important;border-color:rgba(59,130,246,.2)!important;color:#A5B4FC!important}
body.theme-vibrant .bgh:hover{background:rgba(59,130,246,.1)!important;border-color:rgba(236,72,153,.4)!important;color:#F9A8D4!important}
/* Text */
body.theme-vibrant .h1{color:#F0F4FF!important;-webkit-text-fill-color:#F0F4FF!important}
body.theme-vibrant .h2,body.theme-vibrant .h3{color:#E0E7FF!important;-webkit-text-fill-color:#E0E7FF!important}
body.theme-vibrant .sub{color:rgba(165,180,252,.65)!important}
body.theme-vibrant .sn{color:#60A5FA!important}
/* Inputs */
body.theme-vibrant .inp{background:rgba(59,130,246,.05)!important;border-color:rgba(59,130,246,.2)!important;color:#F0F4FF!important}
body.theme-vibrant .inp:focus{border-color:#EC4899!important;background:rgba(236,72,153,.06)!important;box-shadow:0 0 0 3px rgba(236,72,153,.15)!important}
/* Accent decorations */
body.theme-vibrant .tio-ring{border-color:rgba(59,130,246,.45)!important}
body.theme-vibrant .tio-orb{background:radial-gradient(circle at 35% 35%,#60A5FA 0%,#3B82F6 50%,#1D4ED8 100%)!important;box-shadow:0 0 20px rgba(59,130,246,.6)!important}
body.theme-vibrant .pf,.pf-xp{background:linear-gradient(90deg,#1D4ED8,#3B82F6,#EC4899)!important}
body.theme-vibrant ::-webkit-scrollbar-thumb{background:rgba(59,130,246,.25)!important}
body.theme-vibrant .qopt{border-color:rgba(59,130,246,.15)!important;color:#E0E7FF!important}
body.theme-vibrant .qopt:hover:not(.cor):not(.wrg){border-color:rgba(236,72,153,.4)!important;background:rgba(236,72,153,.07)!important}
body.theme-vibrant .qltr{background:rgba(59,130,246,.15)!important;color:#60A5FA!important}
body.theme-vibrant .auth-card{background:rgba(5,4,15,.97)!important;border-color:rgba(59,130,246,.2)!important}
body.theme-vibrant .chip{background:rgba(59,130,246,.07)!important;border-color:rgba(59,130,246,.18)!important;color:#A5B4FC!important}
body.theme-vibrant .chip:hover{background:rgba(236,72,153,.1)!important;border-color:#EC4899!important;color:#F9A8D4!important}
body.theme-vibrant .tabs{background:rgba(59,130,246,.07)!important}
body.theme-vibrant .tb.on{background:rgba(59,130,246,.18)!important;color:#60A5FA!important;border-color:rgba(59,130,246,.4)!important}
body.theme-vibrant .dc-card{background:linear-gradient(135deg,rgba(29,78,216,.25),rgba(236,72,153,.1))!important;border-color:rgba(59,130,246,.3)!important}
body.theme-vibrant .expl{background:rgba(59,130,246,.08)!important;border-color:rgba(59,130,246,.2)!important;color:#93C5FD!important}

/* ── THEME 5: PLAYFUL — Blue + Pink accents on warm dark base ── */
/* Warmer dark base, bubbly gradients, rounded energy, friendly */
body.theme-playful{
  --bg:#0A0814;
  --bg2:#120F1E;
  --surf:#160D28;
  --card:rgba(18,14,32,0.75);
  --brd:rgba(168,85,247,0.2);
  --brd2:rgba(168,85,247,0.1);
  --brdh:rgba(244,114,182,0.55);
  --glass-brd:rgba(168,85,247,0.22);
  --glass-brd-top:linear-gradient(135deg,rgba(244,114,182,.3) 0%,rgba(168,85,247,.12) 60%,transparent 100%);
  --p:#A855F7;
  --pl:#C084FC;
  --pp:#7C3AED;
  --pll:#DDD6FE;
  --c:#F472B6;
  --cl:#FBCFE8;
  --cc:#BE185D;
  --pk:#F472B6;
  --pkl:#FBCFE8;
  --ok:#34D399;
  --okl:#6EE7B7;
  --gold:#FCD34D;
  --goldl:#FDE68A;
  --txt:#FAF5FF;
  --sub:#DDD6FE;
  --mut:#6D28D9;
  --muted2:#3B0764;
  --theme-glow:rgba(168,85,247,.35);
  --shadow-glow:0 0 32px rgba(168,85,247,.3);
  --mesh-p:radial-gradient(ellipse 800px 600px at -10% -20%,rgba(124,58,237,.3) 0%,transparent 60%);
  --mesh-c:radial-gradient(ellipse 700px 500px at 110% 110%,rgba(244,114,182,.22) 0%,transparent 60%);
  --mesh-pk:radial-gradient(ellipse 500px 400px at 50% 60%,rgba(168,85,247,.12) 0%,transparent 60%);
}
body.theme-playful::before{background:var(--mesh-p),var(--mesh-c),var(--mesh-pk)}
body.theme-playful #orbs .o1{background:radial-gradient(circle,rgba(124,58,237,.6),transparent 70%)!important;opacity:1!important}
body.theme-playful #orbs .o2{background:radial-gradient(circle,rgba(236,72,153,.45),transparent 70%)!important;opacity:1!important}
body.theme-playful #orbs .o3{background:radial-gradient(circle,rgba(168,85,247,.3),transparent 70%)!important;opacity:1!important}
body.theme-playful #orbs{opacity:1!important}
/* Sidebar */
body.theme-playful #sb{background:rgba(10,8,20,.96)!important;border-right:1px solid rgba(168,85,247,.18)!important}
body.theme-playful .sb-logo-ic{box-shadow:0 0 24px rgba(168,85,247,.5)!important}
body.theme-playful .sb-logo-tx{background:linear-gradient(90deg,#C084FC,#F472B6,#C084FC);background-size:200%;animation:btnShimmer 4s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
body.theme-playful .nav-grp{color:rgba(168,85,247,.45)!important}
body.theme-playful .ni{color:rgba(221,214,254,.5)!important}
body.theme-playful .ni:hover:not(.on){background:rgba(168,85,247,.1)!important;color:#C084FC!important}
body.theme-playful .ni.on,body.theme-playful .ni.active{background:linear-gradient(90deg,rgba(124,58,237,.25),rgba(244,114,182,.12))!important;color:#C084FC!important;box-shadow:inset 3px 0 0 #A855F7!important}
body.theme-playful .sb-xpf{background:linear-gradient(90deg,#7C3AED,#A855F7,#F472B6)!important}
body.theme-playful .sb-av{background:linear-gradient(135deg,#7C3AED,#F472B6)!important}
body.theme-playful .sb-uname{color:#FAF5FF!important}
/* Cards */
body.theme-playful .card{background:rgba(18,14,32,.75)!important;border-color:rgba(168,85,247,.2)!important}
body.theme-playful .card:hover{border-color:rgba(244,114,182,.45)!important;box-shadow:0 8px 36px rgba(168,85,247,.18)!important}
body.theme-playful .card-hero{background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(244,114,182,.1))!important;border-color:rgba(168,85,247,.3)!important}
/* Buttons — purple→pink */
body.theme-playful .bpri{background:linear-gradient(135deg,#7C3AED,#A855F7,#F472B6)!important;color:#FAF5FF!important;box-shadow:0 4px 20px rgba(168,85,247,.45)!important}
body.theme-playful .bpri:hover:not(:disabled){box-shadow:0 12px 36px rgba(168,85,247,.6)!important;transform:translateY(-3px) scale(1.02)!important}
body.theme-playful .bsec{border-color:rgba(168,85,247,.5)!important;color:#C084FC!important}
body.theme-playful .bgh{background:rgba(168,85,247,.06)!important;border-color:rgba(168,85,247,.2)!important;color:#DDD6FE!important}
body.theme-playful .bgh:hover{background:rgba(244,114,182,.1)!important;border-color:rgba(244,114,182,.4)!important;color:#FBCFE8!important}
/* Text */
body.theme-playful .h1{color:#FAF5FF!important;-webkit-text-fill-color:#FAF5FF!important}
body.theme-playful .h2,body.theme-playful .h3{color:#F3E8FF!important;-webkit-text-fill-color:#F3E8FF!important}
body.theme-playful .sub{color:rgba(221,214,254,.65)!important}
body.theme-playful .sn{color:#C084FC!important}
/* Inputs */
body.theme-playful .inp{background:rgba(168,85,247,.06)!important;border-color:rgba(168,85,247,.2)!important;color:#FAF5FF!important}
body.theme-playful .inp:focus{border-color:#F472B6!important;background:rgba(244,114,182,.07)!important;box-shadow:0 0 0 3px rgba(244,114,182,.15)!important}
/* Accent */
body.theme-playful .tio-ring{border-color:rgba(168,85,247,.5)!important;border-style:solid!important}
body.theme-playful .tio-orb{background:radial-gradient(circle at 35% 35%,#C084FC 0%,#A855F7 50%,#7C3AED 100%)!important;box-shadow:0 0 20px rgba(168,85,247,.6)!important}
body.theme-playful .pf,.pf-xp{background:linear-gradient(90deg,#7C3AED,#A855F7,#F472B6)!important}
body.theme-playful ::-webkit-scrollbar-thumb{background:rgba(168,85,247,.3)!important}
body.theme-playful .qopt{border-color:rgba(168,85,247,.15)!important;color:#F3E8FF!important}
body.theme-playful .qopt:hover:not(.cor):not(.wrg){border-color:rgba(244,114,182,.4)!important;background:rgba(244,114,182,.08)!important}
body.theme-playful .qltr{background:rgba(168,85,247,.18)!important;color:#C084FC!important}
body.theme-playful .auth-card{background:rgba(10,8,20,.97)!important;border-color:rgba(168,85,247,.2)!important}
body.theme-playful .chip{background:rgba(168,85,247,.07)!important;border-color:rgba(168,85,247,.2)!important;color:#DDD6FE!important}
body.theme-playful .chip:hover{background:rgba(244,114,182,.1)!important;border-color:#F472B6!important;color:#FBCFE8!important}
body.theme-playful .tabs{background:rgba(168,85,247,.07)!important}
body.theme-playful .tb.on{background:rgba(168,85,247,.2)!important;color:#C084FC!important;border-color:rgba(168,85,247,.4)!important}
body.theme-playful .dc-card{background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(244,114,182,.1))!important;border-color:rgba(168,85,247,.3)!important}
body.theme-playful .expl{background:rgba(168,85,247,.08)!important;border-color:rgba(168,85,247,.2)!important;color:#DDD6FE!important}
body.theme-playful .lhero{background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(244,114,182,.1))!important;border-color:rgba(168,85,247,.3)!important}
/* Extra playful touches — more bounce */
body.theme-playful .card:hover{transform:translateY(-5px) scale(1.01)!important}
body.theme-playful .bpri:active{transform:scale(.91) translateY(1px)!important}
body.theme-playful .ni.on .ni-ic{filter:drop-shadow(0 0 6px #A855F7)!important}

/* ── ACCENT COLORS (unchanged) ── */
body.accent-purple{--p:#8B5CF6;--pl:#A78BFA;--pp:#6D28D9;--theme-glow:rgba(139,92,246,.25)}
body.accent-pink{--p:#EC4899;--pl:#F9A8D4;--pp:#BE185D;--theme-glow:rgba(236,72,153,.25)}
body.accent-cyan{--p:#06B6D4;--pl:#67E8F9;--pp:#0891B2;--theme-glow:rgba(6,182,212,.25)}
body.accent-emerald{--p:#10B981;--pl:#6EE7B7;--pp:#047857;--theme-glow:rgba(16,185,129,.25)}
body.accent-orange{--p:#F97316;--pl:#FDBA74;--pp:#C2410C;--theme-glow:rgba(249,115,22,.25)}
body.accent-rose{--p:#F43F5E;--pl:#FDA4AF;--pp:#BE123C;--theme-glow:rgba(244,63,94,.25)}

/* ──────────────────────────────────────────
   FONT SIZE PRESETS
────────────────────────────────────────── */
body.font-sm{font-size:13px}
body.font-sm .h1{font-size:22px!important}
body.font-sm .h2{font-size:17px!important}
body.font-sm .h3{font-size:14px!important}
body.font-md{font-size:15px}
body.font-lg{font-size:17px}
body.font-lg .h1{font-size:30px!important}
body.font-lg .h2{font-size:22px!important}
body.font-lg .h3{font-size:18px!important}
body.font-lg p{line-height:1.9}

/* ──────────────────────────────────────────
   TYPING ANIMATION
────────────────────────────────────────── */
.typewriter{display:inline}
.typewriter-cursor{display:inline-block;width:2px;height:1em;background:var(--pl);margin-left:2px;vertical-align:text-bottom;animation:cursorBlink .75s ease-in-out infinite}
@keyframes cursorBlink{0%,100%{opacity:1}45%,55%{opacity:0}}
.typing-wrap{position:relative;display:inline}

/* ──────────────────────────────────────────
   INTERACTIVE HOVER ANIMATIONS  
────────────────────────────────────────── */
.card-bounce:hover{transform:translateY(-5px) scale(1.01);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.btn-pop:active{transform:scale(.94);transition:transform .1s}
.icon-wiggle:hover{animation:wiggle .4s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.float-up{animation:floatUp .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes floatUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.pulse-ring{animation:pulseRing 2s ease-in-out infinite}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 var(--theme-glow)}50%{box-shadow:0 0 0 8px transparent}}

.rec-pulse-badge {
  background: var(--gold);
  color: #fff;
  padding: 1px 4.5px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: 5px;
  display: inline-block;
  animation: badgePulse 1.2s ease-in-out infinite alternate;
  vertical-align: middle;
}
@keyframes badgePulse {
  from { transform: scale(0.95); box-shadow: 0 0 2px rgba(245, 158, 11, 0.4); }
  to { transform: scale(1.05); box-shadow: 0 0 8px rgba(245, 158, 11, 0.85); }
}

/* ──────────────────────────────────────────
   TIO HOLOGRAPHIC AI ORB (SIDEBAR)
────────────────────────────────────────── */
.tio-sb-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border-bottom: 1px solid var(--brd);
  background: rgba(139, 92, 246, 0.02);
  transition: all 0.25s ease;
  flex-shrink: 0;
}
/* Compact horizontal layout: orb + single-line bubble side by side,
   reclaiming the vertical space the old stacked layout used. */
.tio-sb-container.tio-sb-compact {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.tio-sb-compact .tio-bubble-wrap {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}
.tio-sb-compact .tio-bubble {
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tio-sb-compact .tio-bubble::before {
  top: 50%;
  left: -5px;
  transform: translateY(-50%) rotate(45deg);
}
#sb.col .tio-sb-container {
  padding: 12px 4px;
}
.tio-orb-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
#sb.col .tio-orb-wrapper {
  width: 36px;
  height: 36px;
}
.tio-ring {
  position: absolute;
  width: 90%;
  height: 90%;
  border: 1.5px dashed rgba(236, 72, 153, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.15);
  transition: all 0.25s ease;
}
@media(prefers-reduced-motion:no-preference){
  .tio-ring{animation:tioRingRotate 8s linear infinite}
  @keyframes tioRingRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
}
.tio-orb {
  position: relative;
  width: 58%;
  height: 58%;
  background: radial-gradient(circle at 35% 35%, var(--pl) 0%, var(--p) 50%, var(--pp) 100%);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.6), inset 0 -2px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
@media(prefers-reduced-motion:no-preference){
  .tio-orb{animation:tioOrbFloat 3s ease-in-out infinite}
  @keyframes tioOrbFloat{0%,100%{transform:translateY(0px) scale(1)}50%{transform:translateY(-4px) scale(1.02)}}
}
.tio-core {
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(6, 182, 212, 0.8) 50%, transparent 100%);
  filter: blur(1px);
  animation: tioCoreBreathe 2s ease-in-out infinite;
  opacity: 0.95;
}
@keyframes tioCoreBreathe {
  0%, 100% { transform: scale(0.85); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)); }
}
.tio-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  pointer-events: none;
  z-index: 2;
  transition: all 0.25s ease;
}
.tio-eyes {
  display: flex;
  gap: 6px;
}
.tio-eye {
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: 0 0 4px #fff;
}
.tio-mouth {
  width: 6px;
  height: 2.5px;
  background: #fff;
  border-radius: 0 0 3px 3px;
  transition: all 0.2s ease;
  box-shadow: 0 0 3px #fff;
}
.tio-particles {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  animation: tioRingRotate 12s linear infinite reverse;
}
.tio-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--cl);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--cl);
  opacity: 0.75;
}
.tio-particles .np1 { top: 10%; left: 20%; }
.tio-particles .np2 { bottom: 15%; right: 10%; }
.tio-particles .np3 { top: 60%; left: 80%; }

.tio-orb-wrapper.speaking .tio-ring {
  animation-duration: 3s;
  border-color: var(--pk);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.4);
}
.tio-orb-wrapper.speaking .tio-mouth {
  height: 5px;
  border-radius: 50%;
  animation: tioSpeakingMouth 0.15s ease-in-out infinite alternate;
}
@keyframes tioSpeakingMouth {
  from { transform: scaleY(0.5); }
  to { transform: scaleY(1.3); }
}

.tio-orb-wrapper.happy .tio-orb {
  animation: tioOrbFloat 1.5s ease-in-out infinite;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.8);
}
.tio-orb-wrapper.happy .tio-eye {
  border-radius: 50% 50% 0 0;
  height: 2px;
  transform: scaleY(-1);
}
.tio-orb-wrapper.happy .tio-mouth {
  width: 8px;
  height: 4px;
  border-radius: 0 0 4px 4px;
}

.tio-orb-wrapper.confused .tio-orb {
  transform: rotate(15deg);
  animation: none;
}
.tio-orb-wrapper.confused .tio-ring {
  animation: tioConfusedRing 1s ease-in-out infinite alternate;
}
@keyframes tioConfusedRing {
  from { transform: rotate(0) scale(1); }
  to { transform: rotate(10deg) scale(0.9); }
}
.tio-orb-wrapper.confused .tio-eye.left {
  transform: translateY(-1.5px);
}
.tio-orb-wrapper.confused .tio-mouth {
  width: 5px;
  height: 1.5px;
  border-radius: 1px;
}

.tio-orb-wrapper.thinking .tio-orb {
  animation: tioOrbFloat 6s ease-in-out infinite;
  background: radial-gradient(circle at 35% 35%, var(--cl) 0%, var(--c) 60%, var(--p) 100%);
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.7);
}
.tio-orb-wrapper.thinking .tio-eye {
  height: 1.5px;
  width: 4px;
  border-radius: 1px;
}
.tio-orb-wrapper.thinking .tio-mouth {
  width: 4px;
  height: 2px;
  border-radius: 50%;
}

.tio-bubble-wrap {
  width: 100%;
  margin-top: 10px;
  transition: all 0.25s ease;
}
#sb.col .tio-bubble-wrap {
  display: none;
}
.tio-bubble {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--brd);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--txt);
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}
.tio-bubble::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: rgba(7, 7, 18, 0.95);
  border-left: 1px solid var(--brd);
  border-top: 1px solid var(--brd);
  z-index: 1;
}

/* ──────────────────────────────────────────
   LIVELY FLOATING EMOJI PARTICLES
────────────────────────────────────────── */
.emoji-float{position:fixed;pointer-events:none;z-index:1;font-size:20px;animation:emojiFloat linear forwards;-webkit-user-select: none; user-select: none;opacity:.18}
body.theme-lively .emoji-float{opacity:.35}
@keyframes emojiFloat{0%{transform:translateY(0) rotate(0deg);opacity:.2}100%{transform:translateY(-100vh) rotate(360deg);opacity:0}}

/* ──────────────────────────────────────────
   ENHANCED TIO CHAT BUBBLES
────────────────────────────────────────── */
.msg-ai .mbbl{position:relative;overflow:hidden}
.msg-ai .mbbl::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,.04),transparent);pointer-events:none;border-radius:inherit}
.tio-typing-dots{display:inline-flex;gap:4px;align-items:center;padding:4px 0}
.tio-typing-dots span{width:7px;height:7px;border-radius:50%;background:var(--pl);animation:typingDot .9s ease-in-out infinite}
.tio-typing-dots span:nth-child(2){animation-delay:.2s}
.tio-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ──────────────────────────────────────────
   SPARKLE EFFECT
────────────────────────────────────────── */
.sparkle{position:fixed;pointer-events:none;z-index:9998;width:6px;height:6px;border-radius:50%;animation:sparkleAnim .6s ease-out forwards}
@keyframes sparkleAnim{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}

/* ──────────────────────────────────────────
   ANIMATION REDUCE MODE
────────────────────────────────────────── */
body.anim-none *{animation:none!important;transition:none!important}
body.anim-reduce *{animation-duration:.1s!important;transition-duration:.1s!important}

html,body{min-height:100vh;background:var(--bg);color:var(--txt);font-family:var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,.45)}
input,textarea,button,select{font-family:var(--f-body)}

/* ── MESH GRADIENT BACKGROUND ── */
body::before{content:'';position:fixed;inset:0;background:var(--mesh-p),var(--mesh-c),var(--mesh-pk);pointer-events:none;z-index:0}

/* ── AMBIENT ORBS ── */
#orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:0.06 !important;}
.orb{position:absolute;border-radius:50%;pointer-events:none}
.o1{width:700px;height:700px;background:radial-gradient(circle,var(--pp),transparent 70%) !important;top:-250px;left:-200px;animation:of1 22s ease-in-out infinite}
.o2{width:600px;height:600px;background:radial-gradient(circle,var(--cc),transparent 70%) !important;bottom:-200px;right:-150px;animation:of2 27s ease-in-out infinite}
.o3{width:420px;height:420px;background:transparent !important;top:35%;left:38%;animation:of3 19s ease-in-out infinite}
@keyframes of1{0%,100%{transform:translate(0,0)}40%{transform:translate(60px,40px)}70%{transform:translate(-30px,60px)}}
@keyframes of2{0%,100%{transform:translate(0,0)}45%{transform:translate(-50px,-40px)}75%{transform:translate(40px,-20px)}}
@keyframes of3{0%,100%{transform:translate(0,0)}55%{transform:translate(30px,-50px)}}

/* ── LAYOUT ── */
#app{display:flex;min-height:100vh;position:relative;z-index:1}
#sb{
  width:224px;min-height:100vh;
  background: rgba(4, 4, 12, 0.92) !important;
  border-right: 1px solid var(--brd) !important;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  -webkit-backdrop-filter: blur(32px) saturate(130%); backdrop-filter: blur(32px) saturate(130%);
  flex-shrink:0;
  transition:width .28s var(--spring-nav);
  overflow:hidden;
  box-shadow:4px 0 40px rgba(0,0,0,.4);
}
#sb.col{width:64px}
#main{flex:1;min-height:100vh;overflow-y:auto}

/* ── SIDEBAR ── */
/* ── SIDEBAR LOGO — DOT-MATRIX M MARK ── */
.sb-logo{display:flex;align-items:center;gap:12px;padding:18px 16px;border-bottom:1px solid var(--brd);flex-shrink:0}
.sb-logo-ic{
  width:42px;height:42px;flex-shrink:0;
  position:relative;display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:radial-gradient(ellipse at 40% 30%, #fff 0%, #d4d4d4 40%, #888 100%);
  box-shadow:0 0 20px rgba(255,255,255,.25),0 0 40px rgba(139,92,246,.3),0 4px 12px rgba(0,0,0,.5);
  overflow:hidden;
  transition:box-shadow .3s;
}
.sb-logo-ic::before{
  content:'M';
  font-family:var(--f-display);font-weight:700;font-size:22px;
  background:linear-gradient(135deg,#fff 0%,#aaa 60%,#666 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.8));
  letter-spacing:-1px;
}
.sb-logo-ic::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 35% 25%,rgba(255,255,255,.6) 0%,transparent 60%);
  border-radius:12px;
}
.sb-logo-ic:hover{box-shadow:0 0 30px rgba(255,255,255,.35),0 0 50px rgba(139,92,246,.4)}
@media(prefers-reduced-motion:no-preference){
  .sb-logo-ic{animation:logoPulse 4s ease-in-out infinite}
  @keyframes logoPulse{0%,100%{box-shadow:0 0 20px rgba(255,255,255,.25),0 0 40px rgba(139,92,246,.3),0 4px 12px rgba(0,0,0,.5)}50%{box-shadow:0 0 28px rgba(255,255,255,.4),0 0 60px rgba(139,92,246,.5),0 4px 16px rgba(0,0,0,.5)}}
}
.sb-logo-tx{font-family:var(--f-display);font-weight:700;font-size:15px;background:linear-gradient(90deg,#fff,var(--pl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;line-height:1.1}
.sb-logo-sub{font-family:var(--f-body);font-size:9px;font-weight:500;color:var(--mut);margin-top:2px;letter-spacing:.3px}
#sb.col .sb-logo-tx,.sb-un,#sb.col .nav-lbl,#sb.col .nav-grp,#sb.col .sb-logo-sub{display:none}
.sb-user{padding:14px 12px;border-bottom:1px solid var(--brd);flex-shrink:0;background:rgba(139,92,246,.04)}
.sb-urow{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.sb-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--pk));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;box-shadow:0 0 14px rgba(139,92,246,.35)}
.sb-uname{color:var(--txt);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-ulvl{color:var(--mut);font-size:11px}
.sb-xpb{height:4px;background:var(--brd);border-radius:2px;overflow:hidden}
.sb-xpf{height:100%;background:linear-gradient(90deg,var(--p),var(--c));transition:width .6s cubic-bezier(.4,0,.2,1)}
.sb-nav{flex:1;padding:8px 6px;overflow-y:auto;overflow-x:hidden}
.sb-nav::-webkit-scrollbar{width:3px}
/* Nav group labels */
.nav-grp{padding:10px 12px 4px;color:var(--mut);font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}
.ni{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r10);margin-bottom:2px;cursor:pointer;color:var(--sub);transition:all .18s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative;overflow:hidden}
.ni::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--p),var(--c));opacity:0;transition:opacity .2s;border-radius:var(--r10)}
.ni:hover{background:rgba(139,92,246,.1);color:var(--pl);transform:translateX(2px)}
.ni.on{background:linear-gradient(135deg,rgba(109,40,217,.22),rgba(6,182,212,.1));color:var(--pl);box-shadow:inset 0 0 0 1px rgba(139,92,246,.25)}
.ni::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:linear-gradient(180deg,var(--p),var(--c));border-radius:0 3px 3px 0;transition:height .2s cubic-bezier(.4,0,.2,1)}
.ni.on::before{height:60%}
.ni-ic{font-size:17px;flex-shrink:0;position:relative;z-index:1}
.nav-lbl{font-size:13px;font-weight:500;position:relative;z-index:1}
/* Tooltip for collapsed sidebar */
#sb.col .ni{justify-content:center;padding:10px 0}
#sb.col .ni:hover::before{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:rgba(10,10,26,.96);border:1px solid var(--brd);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:500;color:var(--txt);white-space:nowrap;z-index:999;pointer-events:none;box-shadow:var(--shadow-md)}
.sb-bot{padding:8px 6px;border-top:1px solid var(--brd);flex-shrink:0}
.sb-btn{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r10);cursor:pointer;color:var(--mut);font-size:12px;transition:all .15s;white-space:nowrap}
.sb-btn:hover{color:var(--sub);background:rgba(255,255,255,.04)}

/* ── CARDS — GLASSMORPHIC 24px SYSTEM ── */
.card{
  background:var(--card);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-card);
  padding:20px;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  transition:border-color .2s var(--ease-smooth),box-shadow .2s var(--ease-smooth),transform .22s var(--spring-nav);
  box-shadow:var(--shadow-sm);
  position:relative;
}
/* Gradient micro-border light cast from top-left */
.card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--glass-brd-top);
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;pointer-events:none;z-index:0;opacity:.6;
}
.card:hover{border-color:rgba(139,92,246,.22);box-shadow:var(--shadow-md)}
.card-lift{transition:border-color var(--mid) var(--ease-smooth),box-shadow var(--mid) var(--ease-smooth),transform var(--mid) var(--spring-nav)}
.card-lift:hover{transform:translateY(-4px) scale(1.005);box-shadow:var(--shadow-lg);border-color:rgba(139,92,246,.3)}
.card-accent{background:var(--card);border:1px solid var(--glass-brd);border-radius:var(--r-card);padding:20px;border-left:3px solid var(--p);-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);}
.card-accent-ok{border-left-color:var(--ok)}
.card-accent-gold{border-left-color:var(--gold)}
.card-accent-red{border-left-color:var(--red)}
.card-accent-cyan{border-left-color:var(--c)}
.card-hero{background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(6,182,212,.06));border:1px solid rgba(139,92,246,.25);border-radius:var(--r-card);padding:28px;-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);;box-shadow:0 8px 40px rgba(139,92,246,.15)}
.cglow{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.3);box-shadow:0 4px 24px rgba(139,92,246,.14)}
.cgold{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.25);box-shadow:0 4px 20px rgba(245,158,11,.09)}
.cok{background:rgba(16,185,129,.07);border-color:rgba(16,185,129,.25);box-shadow:0 4px 20px rgba(16,185,129,.09)}
.cteal{background:rgba(6,182,212,.07);border-color:rgba(6,182,212,.25)}
.cpink{background:rgba(236,72,153,.07);border-color:rgba(236,72,153,.25)}
.cred{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.25)}
.card-glass{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow-md)}

/* ── BUTTONS — ASMR SPRING PHYSICS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 24px;font-size:14px;font-weight:600;
  border-radius:var(--r-pill);cursor:pointer;
  transition:all .18s var(--spring-nav);
  border:none;outline:none;letter-spacing:.02em;
  position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select: none; user-select: none;
}
/* Satisfying spring press */
.btn:active{transform:scale(.93) translateY(1px)!important;transition:all .08s var(--ease-smooth)!important}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important;pointer-events:none}
/* Shimmer overlay on all buttons */
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.12) 60%,transparent 90%);opacity:0;transition:opacity .2s;border-radius:inherit;pointer-events:none}
.btn:hover::after{opacity:1}
/* PRIMARY — violet glow pill */
.bpri{background:linear-gradient(135deg,var(--pp),var(--p));color:#fff;box-shadow:0 4px 20px var(--theme-glow,rgba(139,92,246,.35)),0 1px 0 rgba(255,255,255,.15) inset}
.bpri:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:0 12px 36px var(--theme-glow,rgba(139,92,246,.5))}
/* SECONDARY */
.bsec{background:transparent;color:var(--pl);border:1.5px solid rgba(139,92,246,.5)}
.bsec:hover:not(:disabled){background:rgba(139,92,246,.1);transform:translateY(-2px);box-shadow:0 6px 18px rgba(139,92,246,.2)}
/* GHOST */
.bgh{background:rgba(255,255,255,.04);color:var(--sub);border:1px solid var(--brd)}
.bgh:hover:not(:disabled){border-color:rgba(139,92,246,.35);color:var(--pl);background:rgba(139,92,246,.07);transform:translateY(-1px)}
/* SUCCESS */
.bok{background:linear-gradient(135deg,#047857,var(--ok));color:#fff;box-shadow:0 4px 16px rgba(16,185,129,.3)}
.bok:hover:not(:disabled){transform:translateY(-2px) scale(1.01);box-shadow:0 10px 28px rgba(16,185,129,.42)}
.bsm{padding:7px 14px;font-size:12px}
.blg{padding:13px 30px;font-size:16px}
.bxl{padding:15px 38px;font-size:17px;border-radius:14px}
.bfull{width:100%}

/* ── INPUTS — CYAN BREATHING FOCUS ── */
.inp{
  background:rgba(255, 255, 255, 0.03);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:14px;
  padding:13px 16px;
  color:var(--txt);font-size:15px;
  outline:none;width:100%;
  transition:border-color .22s var(--ease-smooth),background .22s,box-shadow .22s,padding .22s var(--spring-settle);
  font-family:var(--f-body);
}
.inp:focus{
  border-color:var(--c);
  background:rgba(255, 255, 255, 0.04);
  box-shadow:0 0 0 3px rgba(6, 182, 212, 0.16);
  padding:13px 16px;
}
.inp::placeholder{color:var(--mut)}
textarea.inp{resize:vertical;line-height:1.7;min-height:100px}
select.inp{cursor:pointer}
.inp-wrap{margin-bottom:16px}
.inp-label{color:var(--sub);font-size:10px;font-weight:700;letter-spacing:.8px;display:block;margin-bottom:7px;text-transform:uppercase;font-family:var(--f-display)}

/* ── TAGS ── */
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.tp{background:rgba(139,92,246,.18);color:var(--pl)}
.tc{background:rgba(6,182,212,.15);color:var(--cl)}
.tgold{background:rgba(245,158,11,.15);color:var(--goldl)}
.tok{background:rgba(16,185,129,.15);color:var(--okl)}
.tpk{background:rgba(236,72,153,.15);color:var(--pkl)}
.tred{background:rgba(239,68,68,.15);color:var(--redl)}
.chip{background:rgba(255,255,255,.05);border:1px solid var(--brd);border-radius:20px;padding:7px 15px;cursor:pointer;color:var(--sub);font-size:13px;transition:all .15s;display:inline-block}
.chip:hover,.chip.on{border-color:var(--p);color:var(--pl);background:rgba(139,92,246,.12);font-weight:600}

/* ── ANIMATIONS ── */
.scr{animation:scIn .32s cubic-bezier(.4,0,.2,1) forwards}
@keyframes scIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.s1{animation-delay:.05s}.s2{animation-delay:.1s}.s3{animation-delay:.15s}.s4{animation-delay:.2s}.s5{animation-delay:.25s}
.spin{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dots span{display:inline-block;width:7px;height:7px;background:var(--pl);border-radius:50%;animation:db .6s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.12s}.dots span:nth-child(3){animation-delay:.24s}
@keyframes db{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ta{0%{opacity:0;transform:translateX(20px) scale(.9)}12%{opacity:1;transform:translateX(0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateX(12px) scale(.95)}}
/* Number count-up animation */
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.count-in{animation:countUp .5s cubic-bezier(.4,0,.2,1) forwards}
/* Shimmer loading skeleton */
.shimmer{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* XP gain flash */
@keyframes xpFlash{0%{opacity:0;transform:translateY(-10px) scale(.8)}30%{opacity:1;transform:translateY(0) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
.xp-pop{animation:xpFlash 1.8s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none;position:fixed;font-family:var(--f-display);font-weight:700;color:var(--goldl);font-size:18px;z-index:9998;text-shadow:0 0 12px rgba(245,158,11,.6)}

/* ── TOAST ── */
#toasts{position:fixed;bottom:22px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{padding:10px 18px;border-radius:22px;font-weight:700;font-size:13px;pointer-events:none;animation:ta 3s cubic-bezier(.4,0,.2,1) forwards;box-shadow:var(--shadow-md)}
.txp{background:linear-gradient(135deg,var(--pp),var(--c));color:#fff;box-shadow:0 4px 20px rgba(139,92,246,.5)}
.tbadge{background:linear-gradient(135deg,#92400e,var(--gold));color:#fff;box-shadow:0 4px 20px rgba(245,158,11,.5)}
.tok2{background:linear-gradient(135deg,#059669,var(--ok));color:#fff}
.terr{background:linear-gradient(135deg,#7f1d1d,var(--red));color:#fff}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);}
.modal-box{background:rgba(10,10,26,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);}
.modal-box{background:rgba(10,10,26,.96);border:1px solid rgba(139,92,246,.2);border-radius:var(--r24);padding:32px;max-width:520px;width:100%;box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto;-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}

/* ── PROGRESS ── */
.pw{height:6px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}

/* ── PROGRESS ── */
.pw{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.pf{height:100%;background:linear-gradient(90deg,var(--p),var(--c));border-radius:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}

/* ── QUIZ ── */
.qopt{background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r10);padding:11px 15px;cursor:pointer;color:var(--sub);font-size:14px;display:flex;gap:10px;align-items:center;margin-bottom:8px;transition:all .15s}
.qopt:hover{border-color:var(--p);background:rgba(139,92,246,.08);color:var(--pl);transform:translateX(2px)}
.qopt.sel{border-color:var(--p);background:rgba(139,92,246,.14);color:var(--pl);font-weight:500}
.qopt.cor{border-color:var(--ok);background:rgba(16,185,129,.12);color:var(--okl)}
.qopt.wrg{border-color:var(--red);background:rgba(239,68,68,.1);color:var(--redl)}
.qltr{width:22px;height:22px;border-radius:5px;background:rgba(255,255,255,.07);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.expl{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:8px;padding:9px 13px;margin-top:6px;color:#86EFAC;font-size:13px;line-height:1.6}

/* ── CHAT ── */
.msg{display:flex;gap:9px;align-items:flex-start;animation:scIn .25s ease}
.muser{justify-content:flex-end}
.mbbl{max-width:75%;padding:12px 16px;font-size:14px;line-height:1.7;white-space:pre-wrap}
.mai{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px 18px 18px 3px;color:#CBD5E1;box-shadow:var(--shadow-sm)}
.mme{background:linear-gradient(135deg,var(--pp),var(--p));border-radius:18px 18px 3px 18px;color:#fff;box-shadow:0 4px 16px rgba(139,92,246,.3)}
.mav{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}

/* ── STAT CARDS ── */
.sc{background:var(--card);border:1px solid var(--glass-brd);border-radius:var(--r18);padding:20px;text-align:center;transition:all .22s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.sc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--p),var(--c));opacity:0;transition:opacity .2s;border-radius:var(--r18)}
.sc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(139,92,246,.3)}
.sc:hover::before{opacity:.04}
.sn{font-family:var(--f-display);font-size:32px;font-weight:700;line-height:1;margin:5px 0 3px;position:relative;z-index:1}
.sl{color:var(--mut);font-size:11px;font-weight:700;letter-spacing:.5px;position:relative;z-index:1;text-transform:uppercase}
.sc-icon{font-size:26px;display:block;margin-bottom:4px;position:relative;z-index:1}

/* ── MISC / LAYOUT ── */
.sw{padding:var(--sp-8) var(--sp-8) var(--sp-10);max-width:960px;margin-left:auto;margin-right:auto}
@media(max-width:768px){.sw{padding:var(--sp-5) var(--sp-4) var(--sp-10)}}
@media(max-width:480px){.sw{padding:var(--sp-4) var(--sp-4) var(--sp-10)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── SPACE GROTESK TYPOGRAPHY ── */
.h1{font-family:var(--f-display);font-size:var(--fs-2xl);font-weight:700;color:#fff;margin-bottom:6px;letter-spacing:-.4px;line-height:var(--lh-tight)}
.h2{font-family:var(--f-display);font-size:var(--fs-xl);font-weight:700;color:#fff;margin-bottom:var(--sp-1);line-height:var(--lh-tight);letter-spacing:-.2px}
.h3{font-family:var(--f-display);font-size:var(--fs-lg);font-weight:600;color:#fff;margin-bottom:var(--sp-1);line-height:var(--lh-tight)}
.sub{color:var(--mut);font-size:var(--fs-md);margin-bottom:var(--sp-5);line-height:var(--lh-body);font-family:var(--f-body);font-weight:400}
.sep{height:1px;background:var(--brd);margin:var(--sp-6) 0}
.flex{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb14{margin-bottom:14px}.mb16{margin-bottom:16px}.mb18{margin-bottom:18px}.mb20{margin-bottom:20px}
.pt12{padding-top:12px}
/* Section divider with label */
.sec-divider{display:flex;align-items:center;gap:12px;margin:24px 0 16px}
.sec-divider-line{flex:1;height:1px;background:linear-gradient(90deg,var(--brd),transparent)}
.sec-divider-lbl{color:var(--mut);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}

/* ── ONBOARDING ── */
.ob{min-height:100vh;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 20px;position:relative;z-index:1}
.ob-card{background:rgba(10,10,26,.92);border:1px solid rgba(139,92,246,.2);border-radius:var(--r-card);padding:36px;width:100%;max-width:520px;-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.ob-step{display:none}.ob-step.on{display:block; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.ob-step{display:none}.ob-step.on{display:block;animation:scIn .3s ease}
.ob-card{background:rgba(10,10,26,.92);border:1px solid rgba(139,92,246,.2);border-radius:var(--r-card);padding:36px;width:100%;max-width:560px;-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.ob-prog{height:8px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.ob-prog{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin-bottom:var(--sp-6);position:relative}
.ob-pf{height:100%;background:linear-gradient(90deg,var(--p),var(--c));border-radius:4px;transition:width .4s var(--ease-smooth);box-shadow:0 0 8px rgba(139,92,246,.5)}
.ob-step-dots{display:flex;gap:5px;justify-content:center;margin-bottom:var(--sp-5)}
.ob-step-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.12);transition:all .3s}
.ob-step-dot.done{background:var(--ok);width:18px;border-radius:3px}
.ob-step-dot.active{background:var(--p);box-shadow:0 0 6px rgba(139,92,246,.6)}
.obtn{display:block;width:100%;background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r10);padding:13px 16px;text-align:left;color:var(--sub);font-size:var(--fs-md);cursor:pointer;margin-bottom:8px;transition:all var(--fast) var(--ease-smooth);font-family:var(--f-body);min-height:48px}
.obtn:hover,.obtn.on{border-color:var(--p);background:rgba(139,92,246,.1);color:var(--pl);font-weight:600}
.obtn.on{box-shadow:0 0 0 3px rgba(139,92,246,.15)}

/* ── TABS ── */
.tabs{display:flex;background:rgba(255,255,255,.04);border-radius:12px;padding:4px;gap:3px;margin-bottom:16px}
.tb{flex:1;padding:9px;text-align:center;border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;color:var(--sub);transition:all .16s}
.tb.on{background:var(--card);color:var(--pl);border:1px solid rgba(139,92,246,.2)}

/* ── SETTINGS ── */
.set-sec{margin-bottom:28px}
.set-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--brd)}
.set-row:last-child{border-bottom:none}
.toggle{position:relative;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.tslider{position:absolute;inset:0;background:rgba(255,255,255,.12);border-radius:12px;transition:all .2s}
.tslider::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;bottom:3px;left:3px;transition:all .2s}
.toggle input:checked+.tslider{background:var(--p)}
.toggle input:checked+.tslider::before{transform:translateX(20px)}

/* ── CAREER CARD ── */
.cc{background:var(--card);border:1px solid var(--brd);border-radius:var(--r18);padding:18px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}
.cc:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.35);box-shadow:0 16px 48px rgba(0,0,0,.4)}

/* ── ROADMAP ── */
.rm{display:flex;gap:14px;margin-bottom:14px}
.rmc{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--pp),var(--p));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
.rml{width:2px;flex:1;background:rgba(139,92,246,.2);margin:4px 0}

/* ── BADGES ── */
.bdg{border-radius:var(--r14);padding:14px;text-align:center;transition:all .2s}
.bdg.earned{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
.bdg.locked{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);opacity:.35;filter:grayscale(.6)}

/* ── EXPLORE CATS ── */
.ec{background:var(--card);border:1px solid var(--brd);border-radius:var(--r18);padding:18px;cursor:pointer;text-align:center;transition:all .2s}
.ec:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(0,0,0,.3)}
.ec.on{border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.08)}

/* ── LESSON ── */
.lhero{background:linear-gradient(135deg,rgba(109,40,217,.28),rgba(6,182,212,.12));border:1px solid rgba(139,92,246,.35);border-radius:var(--r18);padding:22px;margin-bottom:16px}
.ptrow{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px}
.ptnum{width:22px;height:22px;border-radius:50%;background:rgba(139,92,246,.2);color:var(--pl);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ffact{background:rgba(16,185,129,.09);border:1px solid rgba(16,185,129,.25);border-radius:var(--r14);padding:13px 17px}
.ntchip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:6px 14px;color:var(--sub);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.ntchip:hover{border-color:var(--p);color:var(--pl);background:rgba(139,92,246,.1)}

/* ── DAILY CHALLENGE ── */
.dc-card{background:linear-gradient(135deg,rgba(109,40,217,.25),rgba(6,182,212,.1));border:1px solid rgba(139,92,246,.3);border-radius:var(--r18);padding:20px;cursor:pointer}
.dc-card:hover{border-color:rgba(139,92,246,.5)}

/* ── STREAK ── */
.streak-fire{font-size:28px}
@media(prefers-reduced-motion:no-preference){
  .streak-fire{animation:sf 1.5s ease-in-out infinite}
  @keyframes sf{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.1) rotate(3deg)}}
}

/* ── AUTH PAGES — REFERENCE QUALITY ── */
.auth-wrap{min-height:100vh;width:100%;flex:1;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;z-index:1}
.auth-card{background:rgba(5,5,16,.96);border:1px solid rgba(139,92,246,.2);border-radius:28px;padding:36px 32px;width:100%;max-width:440px;-webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px);box-shadow:0 40px 100px rgba(0,0,0,.85),0 0 0 1px rgba(139,92,246,.06);position:relative;overflow:hidden}
.auth-card::before{content:'';position:absolute;inset:-1px;border-radius:29px;background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(6,182,212,.12),rgba(236,72,153,.18));z-index:-1;opacity:.6}
@media(prefers-reduced-motion:no-preference){
  .auth-card::before{animation:borderGlow 4s ease-in-out infinite}
  @keyframes borderGlow{0%,100%{opacity:.5}50%{opacity:1}}
}
/* ── M LOGO HERO ── */
.auth-m-hero{display:flex;flex-direction:column;align-items:center;margin-bottom:24px}
.auth-m-mark{
  width:88px;height:88px;border-radius:20px;
  background:url('logo.png') center/cover no-repeat !important;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;margin-bottom:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 28px rgba(255,255,255,.18),0 0 60px rgba(139,92,246,.4),0 10px 40px rgba(0,0,0,.7);
}
.auth-m-mark::before, .auth-m-mark::after {
  display:none !important;
}
@media(prefers-reduced-motion:no-preference){
  .auth-m-mark{animation:authMGlow 3s ease-in-out infinite}
  @keyframes authMGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 28px rgba(255,255,255,.18),0 0 60px rgba(139,92,246,.4),0 10px 40px rgba(0,0,0,.7)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 48px rgba(255,255,255,.3),0 0 90px rgba(139,92,246,.6),0 10px 50px rgba(0,0,0,.7)}}
}
.auth-wordmark{font-family:var(--f-display);font-size:26px;font-weight:700;background:linear-gradient(135deg,#fff 0%,var(--pl) 50%,var(--cl) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;text-align:center;margin-bottom:3px}
.auth-m-byline{font-size:var(--fs-xs);color:var(--mut);text-align:center;letter-spacing:.3px}
.auth-m-byline strong{color:var(--pl)}
/* Auth tabs */
.auth-tabs{display:flex;background:rgba(255,255,255,.04);border-radius:12px;padding:4px;gap:0;margin-bottom:18px;border:1px solid rgba(255,255,255,.06)}
.auth-tab{flex:1;padding:9px;text-align:center;border-radius:9px;cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--mut);transition:all var(--mid) var(--ease-smooth)}
.auth-tab.on{background:rgba(139,92,246,.2);color:var(--pl);box-shadow:0 2px 8px rgba(0,0,0,.3)}
/* Tio bubble */
.tio-bubble{display:flex;align-items:flex-start;gap:10px;background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.15);border-radius:12px;padding:12px;margin-bottom:18px}
.tio-av{font-size:20px;flex-shrink:0;line-height:1}
.tio-name{font-size:var(--fs-xs);font-weight:700;color:var(--pl);letter-spacing:.5px;margin-bottom:3px}
.tio-txt{font-size:var(--fs-xs);color:var(--sub);line-height:var(--lh-body)}
/* Inputs */
.auth-inp-wrap{position:relative;margin-bottom:12px}
.auth-inp{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:13px 16px;color:var(--txt);font-size:var(--fs-md);outline:none;width:100%;transition:all var(--mid) var(--ease-smooth);font-family:var(--f-body)}
.auth-inp:focus{border-color:var(--p);background:rgba(139,92,246,.07);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.auth-inp.err-inp{border-color:var(--red)!important;animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.auth-inp::placeholder{color:rgba(255,255,255,.25)}
.pw-toggle{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--mut);font-size:16px;padding:4px;transition:color var(--fast);line-height:1}
.pw-toggle:hover{color:var(--pl)}
.pw-strength{height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-top:8px;overflow:hidden}
.pw-sbar{height:100%;border-radius:2px;transition:all .35s var(--ease-smooth)}
/* PW strength colors */
.ps-weak{background:var(--red);width:25%}
.ps-fair{background:var(--gold);width:55%}
.ps-good{background:#3b82f6;width:75%}
.ps-strong{background:var(--ok);width:100%}
/* Errors */
.auth-err{color:var(--redl);font-size:var(--fs-xs);margin-bottom:10px;padding:8px 12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:8px;display:none}
.auth-err.show{display:block}
/* Buttons */
.auth-btn{width:100%;padding:14px;font-size:var(--fs-md);font-weight:700;border-radius:12px;border:none;cursor:pointer;font-family:var(--f-body);transition:all var(--mid) var(--ease-smooth);min-height:50px;letter-spacing:.01em}
.auth-btn-pri{background:linear-gradient(135deg,var(--pp),var(--p),var(--c));color:#fff;box-shadow:0 4px 24px rgba(139,92,246,.4)}
.auth-btn-pri:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 32px rgba(139,92,246,.56)}
.auth-btn-pri:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-switch{text-align:center;color:var(--mut);font-size:var(--fs-xs);margin-top:16px}
.auth-switch a{color:var(--pl);cursor:pointer;font-weight:600;transition:color var(--fast)}
.auth-switch a:hover{color:#fff}
.skip-auth{text-align:center;margin-top:8px}
.skip-auth a{color:var(--mut);font-size:var(--fs-xs);cursor:pointer;transition:color var(--fast)}
.skip-auth a:hover{color:var(--sub)}
/* Loading dots */
.auth-loading{display:inline-flex;gap:5px;align-items:center;justify-content:center}
.auth-loading span{width:7px;height:7px;background:#fff;border-radius:50%;animation:authDot 1.2s ease-in-out infinite}
.auth-loading span:nth-child(2){animation-delay:.15s}.auth-loading span:nth-child(3){animation-delay:.3s}
@keyframes authDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
.success-overlay{position:fixed;inset:0;background:linear-gradient(135deg,rgba(109,40,217,.95),rgba(6,182,212,.9));z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;opacity:0;pointer-events:none;transition:opacity .4s}
.success-overlay.show{opacity:1;pointer-events:all}
.success-check{font-size:72px;animation:popIn .5s cubic-bezier(.34,1.56,.64,1) .2s both}
@keyframes popIn{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
/* Particles */
#particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.part{position:absolute;width:3px;height:3px;border-radius:50%;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .part{animation:partFloat linear infinite}
  @keyframes partFloat{0%{opacity:0;transform:translateY(0) scale(0)}10%{opacity:.7}90%{opacity:.3}100%{opacity:0;transform:translateY(-100vh) scale(1.5)}}
}

/* ── CREATIVE MODE ── */
body.creative .card{background:rgba(255,255,255,.07)}
body.creative .ni.on{background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(6,182,212,.15))}

/* ══════════════════════════════════════════════
   REFERENCE-INSPIRED VISUAL SYSTEM
   Learnify · JEDI · Profico · Travel · SuperHello
══════════════════════════════════════════════ */

/* ── LEARNIFY-STYLE COLORED COURSE CARDS ── */
.course-card-color{
  border-radius:var(--r-card);padding:20px;position:relative;overflow:hidden;
  cursor:pointer;transition:all var(--mid) var(--ease-smooth);
  border:1px solid transparent;
}
.course-card-color:hover{transform:translateY(-3px);filter:brightness(1.06)}
.course-card-color.cc-yellow{background:#F59E0B;border-color:rgba(245,158,11,.5)}
.course-card-color.cc-purple{background:linear-gradient(135deg,#7C3AED,#6D28D9);border-color:rgba(124,58,237,.5)}
.course-card-color.cc-blue{background:linear-gradient(135deg,#2563EB,#1D4ED8);border-color:rgba(37,99,235,.5)}
.course-card-color.cc-teal{background:linear-gradient(135deg,#0891B2,#0E7490);border-color:rgba(8,145,178,.5)}
.course-card-color.cc-pink{background:linear-gradient(135deg,#BE185D,#9D174D);border-color:rgba(190,24,93,.5)}
.course-card-color.cc-green{background:linear-gradient(135deg,#059669,#047857);border-color:rgba(5,150,105,.5)}
.course-card-color .course-cat-pill{
  display:inline-block;background:rgba(0,0,0,.2);border-radius:6px;
  padding:3px 10px;font-size:var(--fs-xs);font-weight:700;color:rgba(255,255,255,.9);
  margin-bottom:10px;letter-spacing:.3px;
}
.course-card-color .cc-title{font-size:var(--fs-lg);font-weight:700;color:#fff;line-height:var(--lh-tight);margin-bottom:8px}
.course-card-color .cc-progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:var(--fs-xs);color:rgba(255,255,255,.75)}
.course-card-color .cc-bar{height:4px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden;margin-bottom:12px}
.course-card-color .cc-bar-fill{height:100%;background:#fff;border-radius:2px;transition:width .6s var(--ease-smooth)}
.cc-continue-btn{
  background:#fff;border:none;border-radius:8px;padding:8px 16px;
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;
  transition:all var(--fast) var(--ease-smooth);
  white-space:nowrap;
}
.cc-continue-btn:hover{transform:scale(1.04);box-shadow:0 4px 12px rgba(0,0,0,.2)}
/* ── COURSE ROADMAP LAYOUT ──────────────────────────────────── */
.chapter-roadmap-card{
  border-radius:var(--r-card);
  transition:border-color var(--mid) var(--ease-smooth),box-shadow var(--mid) var(--ease-smooth),transform var(--mid) var(--ease-smooth);
}
.chapter-roadmap-card:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.chapters-roadmap-list{display:flex;flex-direction:column;gap:4px}
.roadmap-syllabus-container{margin-top:8px}

/* Connector line between chapters in roadmap */
.roadmap-path-connector{
  display:flex;flex-direction:column;align-items:center;
  margin:2px 0;gap:2px;
}
.path-line{
  width:2px;height:20px;border-radius:2px;
  background:var(--brd);
  transition:background var(--mid) var(--ease-smooth);
}
.roadmap-path-connector.active .path-line{background:rgba(139,92,246,.5);}
.roadmap-path-connector.completed .path-line{background:rgba(16,185,129,.5);}

/* Active chapter pulse */
@keyframes pulseChap{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.25)}50%{box-shadow:0 0 0 6px rgba(139,92,246,.0)}}
.pulse-active-chap{animation:pulseChap 2.4s ease-in-out infinite}

/* Course progress bar fill colour */
.pf-course{background:linear-gradient(90deg,var(--p),var(--c))}

/* ── CHAPTER COMPLETION OVERLAY ─────────────────────────────── */
.chapter-complete-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  z-index:99998;
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .3s var(--ease-smooth) both;
  padding:16px;
}
.cc-content{
  background:var(--card);
  border:1px solid rgba(139,92,246,.3);
  border-radius:20px;
  padding:36px 28px;
  max-width:440px;width:100%;
  text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(139,92,246,.1);
  animation:slideUp .35s var(--ease-smooth) both;
}
.cc-badge-wrap{position:relative;display:inline-block;margin-bottom:20px}
.cc-badge-glow{
  position:absolute;inset:-12px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.3) 0%,transparent 70%);
  animation:pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.7}}
.cc-badge{font-size:56px;position:relative;z-index:1;line-height:1.1}
.cc-title{
  font-size:clamp(22px,5vw,30px);font-weight:700;color:#fff;
  letter-spacing:-.5px;margin-bottom:8px;
  background:linear-gradient(135deg,#F59E0B,#FCD34D);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cc-subtitle{font-size:14px;color:var(--sub);line-height:1.6;margin-bottom:24px}
.cc-chapter-card{
  background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.2);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:14px;
  text-align:left;
}
.cc-next-card{
  background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.2);
  border-radius:12px;
  padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--okl);font-weight:600;
}

/* ── JEDI-STYLE PROFILE HERO CARD ── */
.profile-hero-card{
  border-radius:var(--r-card);padding:20px;
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  position:relative;overflow:hidden;
}
.profile-hero-card .ph-avatar{
  width:64px;height:64px;border-radius:16px;
  background:linear-gradient(135deg,var(--p),var(--c));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:28px;font-weight:700;color:#fff;
  box-shadow:0 4px 16px rgba(139,92,246,.4);flex-shrink:0;
}
.profile-stat-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.profile-stat-pill{
  background:rgba(255,255,255,.08);border:1px solid var(--brd);
  border-radius:8px;padding:6px 12px;text-align:center;
}
.profile-stat-pill .psn{font-family:var(--f-num);font-size:16px;font-weight:700;color:#fff;line-height:1}
.profile-stat-pill .psl{font-size:var(--fs-xs);color:var(--mut);margin-top:2px}

/* ── PROFICO-STYLE NUMBERED FEATURE CARDS ── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:var(--sp-8)}
.feature-card{
  background:var(--card);border:1px solid var(--brd);border-radius:var(--r-card);
  padding:20px;position:relative;overflow:hidden;
  transition:all var(--mid) var(--ease-smooth);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:180px;
}
.feature-card:hover{border-color:rgba(139,92,246,.3);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.feature-card-num{
  position:absolute;bottom:16px;right:16px;
  font-family:var(--f-num);font-size:36px;font-weight:700;
  color:rgba(255,255,255,.05);line-height:1;pointer-events:none;
  -webkit-user-select: none; user-select: none;
}
.feature-card-icon{font-size:28px;margin-bottom:12px;line-height:1}
.feature-card-title{font-size:var(--fs-lg);font-weight:700;color:#fff;margin-bottom:6px;line-height:var(--lh-tight)}
.feature-card-desc{font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-body)}

/* ── TRAVEL-SITE ACCENT HEADLINE STYLE ── */
.accent-headline{
  font-family:var(--f-display);font-weight:700;
  color:var(--c);letter-spacing:-.5px;
  line-height:var(--lh-display);text-transform:uppercase;
}
.editorial-section-label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;gap:8px;margin-bottom:var(--sp-3);
}
.editorial-section-label::after{content:'';flex:1;height:1px;background:var(--brd)}

/* ── SUPER HELLO STYLE — LARGE SECTION BREAKS ── */
.section-break{
  border-top:1px solid var(--brd);
  margin:var(--sp-10) 0;
  position:relative;
}
.section-break-label{
  position:absolute;top:-10px;left:0;
  background:var(--bg);padding:0 12px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--mut);
}

/* ── SIDEBAR USER + NAV — V3 ── */
.sb-user{padding:14px 12px;border-bottom:1px solid var(--brd);flex-shrink:0;background:rgba(139,92,246,.03)}
.sb-urow{display:flex;align-items:center;gap:10px}
.sb-av{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--p),var(--pk));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:14px;flex-shrink:0;
  box-shadow:0 0 18px rgba(139,92,246,.4);
  font-family:var(--f-display);
}
.sb-uname{font-size:var(--fs-sm);font-weight:600;color:#fff;line-height:1.2;font-family:var(--f-display)}
.sb-ulvl{font-size:var(--fs-xs);color:var(--mut);margin-top:2px;font-family:var(--f-num)}
.sb-xpb{height:3px;background:rgba(255,255,255,.07);border-radius:2px;margin-top:9px;overflow:hidden}
.sb-xpf{height:100%;background:linear-gradient(90deg,var(--pp),var(--p),var(--c));border-radius:2px;transition:width .7s var(--ease-smooth)}
.sb-nav{flex:1;padding:8px 6px;overflow-y:auto;overflow-x:hidden;}
.sb-nav::-webkit-scrollbar{display:none}
/* Space Grotesk group labels */
.nav-grp{
  font-family:var(--f-display);font-size:9px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.18);padding:12px 10px 4px;margin-top:4px;
}
.sb-bot{padding:8px 6px;border-top:1px solid var(--brd);flex-shrink:0}
.sb-btn{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--mut);font-size:var(--fs-xs);transition:all var(--fast) var(--ease-smooth);white-space:nowrap;font-family:var(--f-body)}
.sb-btn:hover{color:var(--sub);background:rgba(255,255,255,.04)}

/* ── LESSON SECTION TABS — PILL STYLE (Learnify ref) ── */
.lesson-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:var(--sp-5)}
.lesson-tabs::-webkit-scrollbar{display:none}
.tb{
  flex-shrink:0;padding:8px 16px;border-radius:99px;
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--brd);color:var(--mut);
  transition:all var(--fast) var(--ease-smooth);white-space:nowrap;
  display:flex;align-items:center;gap:5px;
}
.tb:hover{border-color:rgba(139,92,246,.3);color:var(--pl)}
.tb.on{background:rgba(139,92,246,.2);border-color:rgba(139,92,246,.4);color:var(--pl);box-shadow:0 0 12px rgba(139,92,246,.2)}

/* ── REVISION CARDS — URGENCY ACCENT BORDERS ── */
.rev-card{
  background:var(--card);border:1px solid var(--brd);border-radius:var(--r-card);
  padding:14px 16px;cursor:pointer;transition:all var(--mid) var(--ease-smooth);
  border-left-width:4px;margin-bottom:8px;
}
.rev-card:hover{transform:translateX(3px);border-color:rgba(139,92,246,.3)}
.rev-card.rev-high{border-left-color:var(--red);background:rgba(239,68,68,.03)}
.rev-card.rev-mid{border-left-color:var(--gold);background:rgba(245,158,11,.03)}
.rev-card.rev-low{border-left-color:var(--ok);background:rgba(16,185,129,.03)}

/* ── NOTEBOOK — SIDEBAR PANEL STYLE ── */
.nb-panel{background:var(--surf);border-right:1px solid var(--brd);display:flex;flex-direction:column}
.nb-note-card{
  padding:12px 16px;border-bottom:1px solid var(--brd);cursor:pointer;
  transition:all var(--fast) var(--ease-smooth);position:relative;
  border-left:3px solid transparent;
}
.nb-note-card:hover{background:rgba(255,255,255,.03)}
.nb-note-card.active{background:rgba(139,92,246,.08);border-left-color:var(--p)}
.nb-note-title{font-size:var(--fs-sm);font-weight:600;color:#fff;margin-bottom:3px;line-height:1.3}
.nb-note-sub{font-size:var(--fs-xs);color:var(--mut)}
.xp-float{position:fixed;top:14px;right:18px;z-index:200;background:rgba(8,8,22,.9);border:1px solid rgba(139,92,246,.35);border-radius:24px;padding:6px 14px;display:flex;align-items:center;gap:8px;-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.xp-float-val{font-family:var(--f-display); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.xp-float-val{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--pl)}
.xp-float-lv{font-size:10px;color:var(--mut)}
.xp-mini-bar{width:52px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.xp-mini-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--c));border-radius:2px}

/* ── EXPERIENCE MODE CARDS ── */
.mode-card{border-radius:18px;padding:20px;cursor:pointer;border:2px solid var(--brd);transition:all .22s}
.mode-card:hover{transform:translateY(-3px)}
.mode-general{background:linear-gradient(135deg,rgba(15,23,42,.9),rgba(30,41,59,.7))}
.mode-general.on{border-color:#3b82f6;box-shadow:0 0 28px rgba(59,130,246,.18)}
.mode-creative{background:linear-gradient(135deg,rgba(88,28,135,.35),rgba(6,78,90,.25))}
.mode-creative.on{border-color:var(--p);box-shadow:0 0 28px rgba(139,92,246,.25)}

/* ── SUBJECT SEARCH ── */
.subj-search{background:rgba(255,255,255,.06);border:1px solid var(--brd);border-radius:12px;padding:11px 15px;color:var(--txt);font-size:14px;outline:none;width:100%;transition:border-color .15s;margin-bottom:11px;font-family:var(--f-body)}
.subj-search:focus{border-color:var(--p)}
.subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px;max-height:240px;overflow-y:auto;padding-right:3px}
.subj-chip{background:rgba(255,255,255,.05);border:1px solid var(--brd);border-radius:10px;padding:12px 10px;cursor:pointer;text-align:center;transition:all var(--fast) var(--ease-smooth);font-size:var(--fs-sm);color:var(--sub);min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.subj-chip:hover,.subj-chip.on{border-color:var(--p);color:var(--pl);background:rgba(139,92,246,.12)}
.subj-chip.on{font-weight:600;box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.subj-chip .si{font-size:20px;display:block;margin-bottom:4px}

/* ── CAREER AI SUGGEST ── */
.csugg-chip{background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.28);border-radius:20px;padding:7px 14px;color:var(--cl);font-size:13px;cursor:pointer;transition:all .15s;font-weight:500;display:inline-block;margin:3px}
.csugg-chip:hover,.csugg-chip.on{background:rgba(6,182,212,.22);border-color:var(--cl);color:#fff}

/* ── DOUBT SOLVER ── */
.doubt-inp-area{background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:14px;padding:14px;margin-bottom:12px;transition:border-color .2s}
.doubt-inp-area:focus-within{border-color:var(--p)}
.doubt-answer{background:linear-gradient(135deg,rgba(109,40,217,.1),rgba(6,182,212,.05));border:1px solid rgba(139,92,246,.22);border-radius:18px;padding:20px;margin-bottom:12px;animation:scIn .3s ease}
.dstep{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.dstep:last-child{border-bottom:none}
.dstep-num{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--pp),var(--p));color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── TIO INLINE HELPER ── */
.tio-inline{display:flex;align-items:flex-start;gap:9px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);border-radius:12px;padding:11px 13px;margin-bottom:12px}
.nxav{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--c));display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;animation:tioPulse 3s ease-in-out infinite}
.ob-tio{display:flex;align-items:center;gap:8px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.16);border-radius:10px;padding:9px 12px;margin-bottom:16px}
.ob-nxav{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--c));display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.ob-nxtxt{color:#C4B5FD;font-size:12px;line-height:1.5}

/* ── SKIP AUTH ── */
.skip-auth{text-align:center;margin-top:12px}
.skip-auth a{color:var(--mut);font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color .15s}
.skip-auth a:hover{color:var(--sub)}

/* ─── RESPONSIVE LAYOUT ─── */
@media(max-width:768px){
  #sb{display:none!important}
  #main{padding-bottom:70px}
  #mob-nav{display:flex!important}
  .sw{padding:16px}
  .xp-float{top:auto;bottom:80px;right:12px}
  .float-tio{bottom:80px!important}
}
@media(min-width:769px) and (max-width:1024px){
  #sb{width:64px!important}
  #sb .sb-logo-tx,#sb .sb-un,#sb .nav-lbl{display:none!important}
}
@media(min-width:1025px){
  #mob-nav{display:none!important}
}

/* ── MOBILE NAV ── */
#mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;background:rgba(7,7,18,.96);border-top:1px solid var(--brd);padding:6px 4px 10px;-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.mob-nav-inner{display:flex; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.mob-nav-inner{display:flex;justify-content:space-around;align-items:center}
.mn-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:10px;cursor:pointer;color:var(--mut);transition:all .15s;min-width:48px}
.mn-item.on{color:var(--pl);background:rgba(139,92,246,.12)}
.mn-item span:first-child{font-size:18px}
.mn-item span:last-child{font-size:9px;font-weight:600;letter-spacing:.3px}

/* ── GLOBAL SEARCH — ENABLED ── */
/* openGlobalSearch() called via Cmd/Ctrl+K or mobile search button */
#gsearch-wrap{display:none;pointer-events:none}
#gsearch-wrap.active{display:flex;pointer-events:all}
.gsearch{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:10px 16px 10px 40px;color:var(--txt);font-size:13px;outline:none;width:100%;transition:all .22s;font-family:var(--f-body);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.gsearch:focus{border-color:var(--p);background:rgba(139,92,246,.1);box-shadow:0 0 0 3px rgba(139,92,246,.12),0 8px 28px rgba(0,0,0,.4)}
.gsearch::placeholder{color:var(--mut)}
.gsearch-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:14px;pointer-events:none}
#gsugg{position:absolute;top:calc(100% + 8px);left:0;right:0;background:rgba(10,10,26,.98);border:1px solid rgba(139,92,246,.25);border-radius:20px;overflow:hidden;display:none;-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);box-shadow:0 16px 48px rgba(0,0,0,.6)}
.gsugg-header{padding:8px 14px 6px;font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--mut);text-transform:uppercase}
.gsugg-item{padding:10px 15px;cursor:pointer;color:var(--sub);font-size:13px;display:flex;align-items:center;gap:10px;transition:background .12s;border-top:1px solid rgba(255,255,255,.04)}
.gsugg-item:first-of-type{border-top:none}
.gsugg-item:hover{background:rgba(139,92,246,.12);color:var(--pl)}
.gsugg-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.gsugg-ic.topic{background:rgba(139,92,246,.18)}
.gsugg-ic.career{background:rgba(6,182,212,.15)}
.gsugg-ic.subject{background:rgba(16,185,129,.15)}
.gsugg-ic.ask{background:rgba(236,72,153,.15)}
.gsugg-action{margin-left:auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.06);color:var(--mut);white-space:nowrap}

/* ── FLOATING TIO BUTTON ── */
.float-tio{position:fixed;bottom:24px;right:22px;z-index:280;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--pp),var(--c));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 20px rgba(139,92,246,.5);transition:all var(--mid) var(--ease-smooth)}
@media(prefers-reduced-motion:no-preference){
  .float-tio{animation:tioPulse 3s ease-in-out infinite}
}
.float-tio:hover{transform:scale(1.12);box-shadow:0 8px 32px rgba(139,92,246,.65)}
.float-tio-badge{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--bg);font-size:8px;display:flex;align-items:center;justify-content:center;color:#000;font-weight:700}

/* ── POMODORO TIMER ── */
.timer-widget{position:fixed;bottom:90px;right:22px;z-index:275;background:rgba(8,8,22,.94);border:1px solid rgba(139,92,246,.28);border-radius:20px;padding:14px 18px;-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);box-shadow:0 12px 40px rgba(0,0,0,.6);min-width:180px;display:none;animation:scIn .25s ease}
.timer-widget.show{display:block}
.timer-display{font-family:var(--f-display);font-size:34px;font-weight:700;color:#fff;text-align:center;letter-spacing:2px;line-height:1}
.timer-label{color:var(--mut);font-size:10px;font-weight:700;letter-spacing:.6px;text-align:center;margin-bottom:10px;text-transform:uppercase}
.timer-ring{width:80px;height:80px;margin:0 auto 10px;position:relative}
.timer-ring svg{transform:rotate(-90deg)}
.timer-ring-track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:4}
.timer-ring-fill{fill:none;stroke:var(--p);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .3s}
.timer-ring-fill.break{stroke:var(--ok)}
.timer-btn-row{display:flex;gap:6px;justify-content:center;margin-top:10px}
/* Timer fab: sits above Tio button, not on top of it */
.timer-fab{position:fixed;bottom:84px;right:22px;z-index:276;width:40px;height:40px;border-radius:50%;background:rgba(10,10,26,.9);border:1px solid rgba(139,92,246,.3);display:none;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.timer-fab.show{display:flex}
.timer-fab:hover{border-color:var(--p);transform:scale(1.1)}
/* Mobile: keep floats above bottom nav (70px) */
@media(max-width:768px){
  .float-tio{bottom:82px!important;right:16px!important;width:46px!important;height:46px!important;font-size:20px!important}
  .timer-fab{bottom:136px!important;right:16px!important}
  .timer-widget{bottom:136px!important;right:16px!important;min-width:160px}
}

/* ── VOICE INPUT ── */
.voice-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(139,92,246,.3);background:rgba(139,92,246,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;font-size:16px}
.voice-btn:hover{border-color:var(--p);background:rgba(139,92,246,.2)}
.voice-btn.listening{border-color:var(--red);background:rgba(239,68,68,.15);animation:voicePulse .8s ease-in-out infinite}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}

/* ── SHARE BUTTON ── */
.share-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);border-radius:20px;padding:6px 14px;color:var(--cl);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.share-chip:hover{background:rgba(6,182,212,.2);border-color:var(--c);transform:translateY(-1px)}
.share-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(10,10,26,.97);border:1px solid rgba(16,185,129,.3);border-radius:12px;padding:10px 18px;color:var(--okl);font-size:13px;font-weight:600;z-index:9999;animation:ta 2.5s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}

/* ── PROGRESS CHART ── */
.chart-wrap{background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r18);padding:18px;position:relative}
.chart-wrap canvas{max-height:220px}
.chart-empty{text-align:center;padding:40px;color:var(--mut);font-size:13px}

/* ── NOTIFICATION BELL ── */
.notif-bell{position:fixed;top:12px;right:18px;z-index:260;width:36px;height:36px;border-radius:50%;background:rgba(10,10,26,.88);border:1px solid rgba(255,255,255,.1);display:none;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .2s;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.notif-bell.show{display:flex}
.notif-bell:hover{border-color:var(--p);transform:scale(1.05)}
.notif-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--red);border:1.5px solid var(--bg);display:none}
.notif-dot.show{display:block}
/* On mobile: notif bell stays top-right, search btn is right of it */
@media(max-width:768px){
  .notif-bell{top:12px;right:62px;bottom:auto}
}

/* ── PWA INSTALL BANNER ── */
.pwa-banner{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:9990;background:linear-gradient(135deg,rgba(109,40,217,.95),rgba(6,182,212,.85));border-radius:20px;padding:14px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 16px 48px rgba(0,0,0,.6);max-width:340px;width:90%;display:none;animation:scIn .3s ease}
.pwa-banner.show{display:flex}
@media(max-width:768px){.notif-bell{top:auto;bottom:80px;right:60px}}

/* ── DIAGNOSTIC / MASTERY ── */
.diag-card{background:linear-gradient(135deg,rgba(109,40,217,.15),rgba(6,182,212,.08));border:1px solid rgba(139,92,246,.3);border-radius:var(--r18);padding:24px}
.diag-opt{background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r10);padding:11px 16px;cursor:pointer;color:var(--sub);font-size:14px;transition:all .15s;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.diag-opt:hover,.diag-opt.on{border-color:var(--p);background:rgba(139,92,246,.1);color:var(--pl);font-weight:500}
.mastery-bar-wrap{height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden;margin:8px 0}
.mastery-bar{height:100%;border-radius:5px;transition:width .8s var(--ease-smooth)}
.mastery-good{background:linear-gradient(90deg,#059669,var(--ok))}
.mastery-ok{background:linear-gradient(90deg,#B45309,var(--gold))}
.mastery-low{background:linear-gradient(90deg,#B91C1C,var(--red))}
.weak-area-card{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.22);border-radius:var(--r14);padding:14px 16px}
.weak-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(239,68,68,.1);font-size:13px;color:var(--redl)}
.weak-item:last-child{border-bottom:none}

/* ── LEARNING PATH VISUALIZATION ── */
.lpath-wrap{background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r18);padding:18px;overflow-x:auto}
.lpath-row{display:flex;align-items:center;gap:0;min-width:max-content;padding:4px 0}
.lpath-node{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 6px}
.lpath-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;flex-shrink:0}
.lpath-dot.done{background:linear-gradient(135deg,var(--ok),#34d399);color:#fff;box-shadow:0 0 16px rgba(16,185,129,.4)}
.lpath-dot.current{background:linear-gradient(135deg,var(--pp),var(--p));color:#fff;box-shadow:0 0 20px rgba(139,92,246,.5);animation:logoPulse 2.5s ease-in-out infinite}
.lpath-dot.next{background:rgba(255,255,255,.08);border:2px solid rgba(139,92,246,.3);color:var(--sub)}
.lpath-dot.locked{background:rgba(255,255,255,.04);border:2px solid var(--brd);color:var(--mut);opacity:.5}
.lpath-label{font-size:10px;color:var(--sub);text-align:center;max-width:64px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpath-arrow{color:var(--mut);font-size:16px;padding:0 2px;align-self:flex-start;margin-top:10px;flex-shrink:0}

/* ── CONFIDENCE SLIDER ── */
.conf-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--gold),var(--ok));outline:none;cursor:pointer}
.conf-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--p);box-shadow:0 0 8px rgba(139,92,246,.5);cursor:pointer;border:2px solid #fff}

/* ── COMPLETION CARD ── */
.completion-card{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(6,182,212,.1));border:1px solid rgba(16,185,129,.3);border-radius:var(--r20);padding:26px;text-align:center;animation:pop .4s cubic-bezier(.34,1.56,.64,1)}
.completion-score{font-family:var(--f-display);font-size:52px;font-weight:700;line-height:1}

/* ── NOTEBOOK ── */
.nb-note-card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r18);padding:18px;cursor:pointer;transition:all .2s;position:relative}
.nb-note-card:hover{border-color:rgba(139,92,246,.35);transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.3)}
.nb-note-card.active{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.06)}
.nb-subj-pill{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.22);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;color:var(--pl);cursor:pointer;transition:all .15s;display:inline-block}
.nb-subj-pill:hover,.nb-subj-pill.on{background:rgba(139,92,246,.25);border-color:var(--p);color:#fff}
.nb-formula{background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.2);border-radius:9px;padding:10px 14px;font-family:monospace;color:var(--cl);font-size:13px;margin-bottom:7px}
.nb-point{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;color:#CBD5E1}
.nb-point:last-child{border-bottom:none}
.nb-point::before{content:'•';color:var(--pl);font-weight:700;flex-shrink:0}
.nb-gen-area{background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r14);padding:16px;margin-bottom:14px}
.nb-empty{text-align:center;padding:48px 20px;color:var(--mut)}
.nb-del{position:absolute;top:10px;right:10px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:6px;padding:3px 8px;font-size:11px;color:var(--redl);cursor:pointer;opacity:0;transition:opacity .15s}
.nb-note-card:hover .nb-del{opacity:1}

/* ── REVISION ── */
.rev-card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r18);padding:18px;transition:all .2s}
.rev-card:hover{border-color:rgba(139,92,246,.25)}
.rev-urgency-high{border-left:3px solid var(--red)!important}
.rev-urgency-mid{border-left:3px solid var(--gold)!important}
.rev-urgency-low{border-left:3px solid var(--ok)!important}
.fc-card{background:linear-gradient(135deg,rgba(109,40,217,.18),rgba(6,182,212,.1));border:1px solid rgba(139,92,246,.3);border-radius:var(--r18);min-height:180px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:24px;text-align:center;transition:all .25s;perspective:600px}
.fc-inner{transition:transform .45s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;width:100%;position:relative}
.fc-card.flipped .fc-inner{transform:rotateY(180deg)}
.fc-front,.fc-back{backface-visibility:hidden;padding:10px}
.fc-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:rotateY(180deg);background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(109,40,217,.12));border-radius:var(--r14)}
.rev-method-btn{background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r14);padding:16px;cursor:pointer;text-align:center;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:6px}
.rev-method-btn:hover{border-color:var(--p);background:rgba(139,92,246,.1);transform:translateY(-2px)}
.days-badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.collapsible{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s}
.collapsible.closed{max-height:0!important;opacity:0}
.coll-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-user-select: none; user-select: none;padding:12px 0}
.coll-arrow{transition:transform .25s;color:var(--mut);font-size:13px}
.coll-arrow.open{transform:rotate(180deg)}

/* ── KNOWLEDGE GRAPH ── */
.kg-wrap{position:relative;background:rgba(0,0,0,.25);border-radius:var(--r18);overflow:hidden;min-height:260px}
.kg-canvas{display:block;width:100%}
.kg-tooltip{position:absolute;background:rgba(10,10,26,.97);border:1px solid rgba(139,92,246,.3);border-radius:10px;padding:8px 13px;font-size:12px;color:#fff;pointer-events:none;z-index:20;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5)}

/* ── SOCRATIC MODE ── */
.socratic-card{background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(139,92,246,.08));border:1px solid rgba(6,182,212,.25);border-radius:var(--r18);padding:20px;margin-bottom:14px;animation:scIn .3s ease}
.socratic-q{color:#fff;font-size:15px;font-weight:600;line-height:1.6;margin-bottom:14px}
.socratic-hint{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:5px 13px;font-size:12px;color:var(--sub);cursor:pointer;transition:all .15s;display:inline-block;margin:3px}
.socratic-hint:hover{border-color:var(--c);color:var(--cl);background:rgba(6,182,212,.08)}

/* ── MNEMONIC CARD ── */
.mnemonic-card{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(236,72,153,.06));border:1px solid rgba(245,158,11,.22);border-radius:var(--r14);padding:13px 16px;margin-bottom:12px}
.mnemonic-tag{display:inline-block;background:rgba(245,158,11,.18);color:var(--goldl);font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:.4px;margin-bottom:6px;text-transform:uppercase}

/* ── PEER STATS ── */
.peer-bar{height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;flex:1}
.peer-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--p),var(--c));transition:width .8s cubic-bezier(.4,0,.2,1)}

/* ── SM2 BADGES ── */
.sm2-due{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;background:rgba(239,68,68,.12);color:var(--redl);border:1px solid rgba(239,68,68,.22)}
.sm2-soon{background:rgba(245,158,11,.1);color:var(--goldl);border:1px solid rgba(245,158,11,.2);display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700}
.sm2-good{background:rgba(16,185,129,.1);color:var(--okl);border:1px solid rgba(16,185,129,.2);display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700}

/* ── ADAPTIVE TEST PROGRESS ── */
.adp-diff-bar{display:flex;gap:3px;margin-bottom:12px}
.adp-seg{flex:1;height:5px;border-radius:3px;transition:all .3s}
.adp-easy{background:rgba(16,185,129,.3)}.adp-easy.done{background:var(--ok)}
.adp-med{background:rgba(245,158,11,.3)}.adp-med.done{background:var(--gold)}
.adp-hard{background:rgba(239,68,68,.3)}.adp-hard.done{background:var(--red)}
.adp-exp{background:rgba(139,92,246,.3)}.adp-exp.done{background:var(--p)}

/* ── MASTERY CERTIFICATE ── */
.cert-wrap{background:linear-gradient(135deg,rgba(109,40,217,.25),rgba(6,182,212,.15),rgba(245,158,11,.1));border:2px solid rgba(245,158,11,.4);border-radius:20px;padding:28px;text-align:center;position:relative;overflow:hidden}
.cert-wrap::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(245,158,11,.03) 8px,rgba(245,158,11,.03) 10px)}
.cert-title{font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:2px;color:var(--goldl);text-transform:uppercase;margin-bottom:8px}
.cert-name{font-family:var(--f-display);font-size:22px;font-weight:700;color:#fff;margin-bottom:6px}
.cert-topic{font-family:var(--f-display);font-size:16px;font-weight:700;background:linear-gradient(90deg,var(--pl),var(--cl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}
.cert-seal{font-size:48px;margin-bottom:8px;animation:pop .5s cubic-bezier(.34,1.56,.64,1)}

/* ── STREAK SHIELD ── */
.streak-shield{display:inline-flex;align-items:center;gap:5px;background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.3);border-radius:20px;padding:5px 13px;font-size:12px;font-weight:700;color:var(--cl)}
.streak-frozen{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.35);color:var(--pl)}

/* ── ELI5 BADGE ── */
.eli5-active{position:fixed;bottom:90px;left:18px;z-index:270;background:linear-gradient(135deg,rgba(245,158,11,.9),rgba(236,72,153,.8));border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;color:#fff;box-shadow:0 4px 16px rgba(245,158,11,.4);cursor:pointer;animation:betaPulse 2s ease-in-out infinite}

/* ── FRIEND CHALLENGE ── */
.challenge-card{background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(139,92,246,.08));border:1px solid rgba(6,182,212,.25);border-radius:var(--r18);padding:18px}

/* ── VOICE READING ── */
.voice-reading{position:fixed;bottom:90px;right:80px;z-index:270;background:rgba(10,10,26,.94);border:1px solid rgba(16,185,129,.3);border-radius:20px;padding:7px 14px;font-size:12px;font-weight:600;color:var(--okl);display:none;align-items:center;gap:7px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.voice-reading.active{display:flex}
.voice-wave{display:flex;gap:2px;align-items:center}
.voice-wave span{width:3px;background:var(--ok);border-radius:2px;animation:thinkWave .6s ease-in-out infinite}
.voice-wave span:nth-child(1){height:6px}.voice-wave span:nth-child(2){height:10px;animation-delay:.1s}.voice-wave span:nth-child(3){height:7px;animation-delay:.2s}
.brand-title{font-family:var(--f-display);font-weight:700;line-height:1.1}
.brand-by{font-size:.52em;font-weight:600;opacity:.7;display:block;letter-spacing:.02em}
.brand-glow{background:linear-gradient(90deg,var(--pl),var(--cl),var(--pkl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.founder-tag{font-size:11px;color:var(--mut);font-weight:500;letter-spacing:.3px;margin-top:3px;display:flex;align-items:center;gap:5px}
.founder-dot{width:3px;height:3px;border-radius:50%;background:var(--mut);display:inline-block}

/* ── BETA BADGE ── */
.beta-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(236,72,153,.1));border:1px solid rgba(245,158,11,.3);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:700;color:var(--goldl);animation:betaPulse 3s ease-in-out infinite}
@keyframes betaPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}50%{box-shadow:0 0 14px 2px rgba(245,158,11,.15)}}
.beta-banner{background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(6,182,212,.06));border:1px solid rgba(139,92,246,.2);border-radius:14px;padding:13px 18px;margin-bottom:18px;display:flex;align-items:flex-start;gap:12px}
.beta-tio-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--c));display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;animation:tioPulse 2.5s ease-in-out infinite}

/* ── PROGRESSIVE REVEAL ── */
.reveal-step{opacity:0;transform:translateY(16px);transition:opacity .38s var(--ease-smooth),transform .38s var(--spring-settle,cubic-bezier(.34,1.3,.64,1))}
.reveal-step.shown{opacity:1;transform:translateY(0)}

/* ── AMBIENT GLOW SHAPES (extra orbs) ── */
.ambient-shape{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px);opacity:.08}
@media(prefers-reduced-motion:no-preference){
  .ambient-shape{animation:ambFloat ease-in-out infinite}
  @keyframes ambFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-20px) scale(1.06)}}
}

/* ── AI THINKING MESSAGES ── */
.tio-thinking{display:flex;align-items:center;gap:10px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);border-radius:12px;padding:11px 14px;margin-bottom:12px}
.think-wave{display:flex;gap:3px;align-items:center}
.think-wave span{width:4px;border-radius:2px;background:var(--pl);animation:thinkWave .8s ease-in-out infinite}
.think-wave span:nth-child(1){height:8px;animation-delay:0s}
.think-wave span:nth-child(2){height:14px;animation-delay:.1s}
.think-wave span:nth-child(3){height:10px;animation-delay:.2s}
.think-wave span:nth-child(4){height:16px;animation-delay:.3s}
.think-wave span:nth-child(5){height:8px;animation-delay:.4s}
@keyframes thinkWave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}

/* ── FOOTER ── */
#mfooter{text-align:center;padding:28px 20px 16px;color:var(--mut);font-size:12px;border-top:1px solid rgba(255,255,255,.04);margin-top:32px}
#mfooter strong{color:var(--sub)}
.footer-wave{background:linear-gradient(90deg,var(--p),var(--c),var(--pk));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}

/* ── LOADING SCREEN — CINEMATIC ── */
#loading-screen{
  position:fixed;inset:0;
  background:var(--bg);
  z-index:99998;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  transition:opacity .5s var(--ease-smooth),transform .5s var(--ease-smooth);
}
#loading-screen.hide{opacity:0;pointer-events:none;transform:scale(1.04)}
/* Animated mesh behind loader */
#loading-screen::before{
  content:'';position:absolute;inset:0;
  background:var(--mesh-p),var(--mesh-c);
  animation:meshShift 4s ease-in-out infinite alternate;
}
@keyframes meshShift{0%{opacity:.6}100%{opacity:1}}
/* M-mark logo — cinematic */
.ls-logo{
  width:80px;height:80px;
  background:radial-gradient(ellipse at 35% 25%,rgba(255,255,255,.9) 0%,rgba(200,180,255,1) 40%,var(--pp) 100%);
  border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:36px;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 50px rgba(139,92,246,.6),0 8px 32px rgba(0,0,0,.6);
  animation:lsLogoPop .7s var(--spring-bounce) both,lsLogoGlow 2.5s ease-in-out .7s infinite;
  position:relative;z-index:1;
  letter-spacing:-2px;
}
@keyframes lsLogoPop{from{transform:scale(0) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes lsLogoGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 50px rgba(139,92,246,.6),0 8px 32px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 80px rgba(139,92,246,.9),0 8px 40px rgba(0,0,0,.6)}
}
/* Progress bar — ultra-thin multi-color */
.ls-bar-wrap{width:200px;height:2px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;position:relative;z-index:1}
.ls-bar-fill{height:100%;background:linear-gradient(90deg,var(--pp),var(--p),var(--c),var(--ok));background-size:300%;animation:lsBarMove 1s var(--ease-smooth) forwards,lsBarShimmer 1.5s ease 0s infinite}
@keyframes lsBarMove{from{width:0;background-position:0%}to{width:100%;background-position:100%}}
@keyframes lsBarShimmer{0%{background-position:0%}100%{background-position:300%}}
.ls-tips{
  color:var(--mut);font-size:13px;font-family:var(--f-body);
  text-align:center;max-width:260px;line-height:1.6;
  animation:lsTipFade .6s var(--ease-smooth) .4s both;
  position:relative;z-index:1;
}
@keyframes lsTipFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── PAGE TRANSITION ── */
@keyframes pageSlideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.page-enter{animation:pageSlideIn .28s cubic-bezier(.4,0,.2,1) forwards}

/* ── GUIDED LESSON FLOW ── */
.lesson-stepper{display:flex;align-items:center;gap:0;margin-bottom:20px;overflow-x:auto;padding:2px 0}
.lsb{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;cursor:pointer;transition:all .2s;position:relative;z-index:1}
.lsb.done{background:linear-gradient(135deg,var(--ok),#34d399);color:#fff;box-shadow:0 0 14px rgba(16,185,129,.4)}
.lsb.active{background:linear-gradient(135deg,var(--pp),var(--p));color:#fff;box-shadow:0 0 20px rgba(139,92,246,.55);animation:logoPulse 2s ease-in-out infinite}
.lsb.todo{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);color:var(--mut)}
.lsb-line{flex:1;height:2px;background:linear-gradient(90deg,rgba(139,92,246,.3),rgba(255,255,255,.06));min-width:14px}
.lsb-line.done{background:linear-gradient(90deg,var(--ok),rgba(16,185,129,.3))}
.lsb-lbl{font-size:9px;color:var(--mut);text-align:center;margin-top:4px;white-space:nowrap;max-width:56px}
.lsb-wrap{display:flex;flex-direction:column;align-items:center;gap:0}
.lesson-prog-bar{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-bottom:18px}
.lesson-prog-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--c));border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ── STEP CARDS ── */
.step-card{border-radius:var(--r18);padding:22px;margin-bottom:14px;animation:stepIn .35s cubic-bezier(.4,0,.2,1) forwards;position:relative;overflow:hidden}
@keyframes stepIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.step-card::after{content:'';position:absolute;inset:0;border-radius:var(--r18);opacity:0;transition:opacity .25s;background:linear-gradient(135deg,var(--p),var(--c))}
.step-card:hover::after{opacity:.03}
.step-type-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.4px;margin-bottom:12px;text-transform:uppercase}

/* ── TUTOR CONTROL BUTTONS ── */
.tutor-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.tc-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--sub);cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:5px;font-family:var(--f-body)}
.tc-btn:hover{border-color:var(--p);color:var(--pl);background:rgba(139,92,246,.1);transform:translateY(-1px)}

/* ── CONFETTI ── */
.confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:9997;overflow:hidden}
.cf{position:absolute;width:8px;height:8px;border-radius:2px;animation:cfFall linear forwards}
@keyframes cfFall{0%{opacity:1;transform:translateY(-20px) rotate(0deg)}100%{opacity:0;transform:translateY(110vh) rotate(720deg)}}

/* ── PERSONALITY CARDS ── */
.pers-card{border-radius:var(--r14);padding:14px 16px;cursor:pointer;border:2px solid var(--brd);transition:all .2s;text-align:center}
.pers-card:hover{transform:translateY(-2px)}
.pers-card.on{border-color:var(--p);box-shadow:0 0 20px var(--theme-glow,rgba(139,92,246,.3))}

/* ── GLOW CARD HOVER ── */
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}50%{box-shadow:0 0 20px 4px rgba(139,92,246,.18)}}
.card-glow-hover:hover{animation:glowPulse .8s ease-in-out}

/* ── RIPPLE ── */
.btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.25);transform:scale(0);animation:rippleOut .5s linear;pointer-events:none}
@keyframes rippleOut{to{transform:scale(4);opacity:0}}

/* ── CELEBRATION OVERLAY ── */
.celebrate-ring{position:absolute;inset:-4px;border-radius:calc(var(--r20) + 4px);border:2px solid transparent;background:linear-gradient(135deg,var(--p),var(--c),var(--pk)) border-box;-webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;animation:ringRotate 2s linear infinite;pointer-events:none}
@keyframes ringRotate{to{filter:hue-rotate(360deg)}}

/* ── TIO TYPING EFFECT ── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor-blink{display:inline-block;width:2px;height:14px;background:var(--pl);margin-left:2px;vertical-align:middle;animation:blink .8s step-start infinite}

/* ── CUSTOM CURSOR — MENTORIX ARROW ── */
body.has-cursor *{cursor:none!important}
/* Allow text selection with custom cursor */
body.has-cursor p,body.has-cursor span,body.has-cursor div,body.has-cursor h1,body.has-cursor h2,body.has-cursor h3,body.has-cursor li,body.has-cursor td,body.has-cursor .mbbl{-webkit-user-select: text!important}

/* ── ARROW CURSOR — polished to be 25% smaller (12×18 logical px) ── */
#cursor-orb{
  position:fixed; -webkit-user-select: text!important; user-select: text!important;}

/* ── ARROW CURSOR — polished to be 25% smaller (12×18 logical px) ── */
#cursor-orb{
  position:fixed;pointer-events:none;z-index:99999;display:none;
  width:10px;height:15px;          /* 20% smaller arrow proportions */
  top:0;left:0;                    /* positioned at exact mouse coords, tip = top-left */
  transform:none;                  /* NO centering — tip IS the hotspot */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24' width='10' height='15'%3E%3Cpath d='M2 1 L2 20 L6 15 L9.5 22 L11.5 21 L8 14 L14 14 Z' fill='white' stroke='%23222' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  border-radius:0;box-shadow:none;animation:none;
  transition:opacity .1s;-webkit-user-select: none; user-select: none;
}
body.has-cursor #cursor-orb{display:block}

/* Hover state — purple tint */
body.cursor-hover #cursor-orb{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24' width='10' height='15'%3E%3Cpath d='M2 1 L2 20 L6 15 L9.5 22 L11.5 21 L8 14 L14 14 Z' fill='%23E9D5FF' stroke='%238B5CF6' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter:drop-shadow(0 0 2px rgba(139,92,246,.45));
}

/* Click state — gold flash */
body.cursor-click #cursor-orb{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24' width='10' height='15'%3E%3Cpath d='M2 1 L2 20 L6 15 L9.5 22 L11.5 21 L8 14 L14 14 Z' fill='%23FCD34D' stroke='%23F59E0B' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter:drop-shadow(0 0 3px rgba(245,158,11,.6));
  transition:filter .05s;
}

/* ── AURA ring — softer opacity and tighter scale ── */
#cursor-aura{
  position:fixed;pointer-events:none;z-index:99998;display:none;
  width:20px;height:20px;          /* 20% smaller aura footprint */
  border-radius:50%;
  transform:translate(-50%,-50%);  /* centered on lag position */
  border:1px solid rgba(139,92,246,.12);
  background:radial-gradient(circle,rgba(139,92,246,.02),transparent 65%);
  transition:width .22s cubic-bezier(.4,0,.2,1),height .22s,border-color .2s,opacity .18s;
  opacity:.35;                     /* softer base opacity */

  top:0;left:0;
}
body.has-cursor #cursor-aura{display:block;}
body.cursor-hover #cursor-aura{width:17px;height:17px;border-color:rgba(139,92,246,.22);opacity:.55;}
body.cursor-click #cursor-aura{width:13px;height:13px;border-color:rgba(245,158,11,.25);opacity:.3;transition:all .05s;}

/* Click ripple */
.cursor-ripple{
  position:fixed;pointer-events:none;z-index:99997;border-radius:50%;
  border:1.5px solid rgba(139,92,246,.5);
  transform:translate(-50%,-50%) scale(0);
  animation:orbRipple .5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes orbRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(3.2);opacity:0}}

/* Trail dots — very subtle */
.cursor-trail-dot{
  position:fixed;pointer-events:none;z-index:99996;
  width:2px;height:2px;border-radius:50%;
  transform:translate(-50%,-50%);
  animation:trailFade .3s ease-out forwards;
}
@keyframes trailFade{0%{opacity:.35;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(0)}}

/* ─── 3D PARTICLE CANVAS ─── */
#particle-canvas{position:fixed;inset:0;pointer-events:none!important;z-index:0;opacity:.45;will-change:transform}

/* ─── ANIMATED PROGRESS BARS ─── */
.pf{animation:barFill .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes barFill{from{width:0}to{width:var(--bar-w,100%)}}
.sb-xpf{animation:none!important;transition:width .9s cubic-bezier(.4,0,.2,1)}
.mastery-bar{animation:barFill .8s cubic-bezier(.4,0,.2,1) .2s forwards}
.lesson-prog-fill{animation:none;transition:width .5s cubic-bezier(.4,0,.2,1)}

/* ─── CONSISTENT CARD RADIUS ─── */
.card,.sc,.nb-note-card,.rev-card,.lhero,.completion-card,.diag-card{border-radius:var(--r-card)!important}
.auth-card{border-radius:22px!important}

/* ─── BUTTON CONSISTENT SIZE ─── */
.btn{min-height:38px}
.btn.bsm{min-height:30px}
.btn.bxl{min-height:52px}

/* ─── CARD HOVER GLOW UPGRADE ─── */
.card{transition:border-color .22s,box-shadow .22s,transform .22s}
.card-lift{transition:border-color .22s,box-shadow .22s,transform .22s}
.card-lift:hover{transform:translateY(-4px);box-shadow:0 20px 56px rgba(0,0,0,.5),0 0 0 1px rgba(139,92,246,.2),0 0 20px rgba(139,92,246,.08)}
.sc:hover{transform:translateY(-5px);box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 28px rgba(139,92,246,.12)}

/* ─── CONSISTENT SECTION SPACING ─── */
.set-sec{margin-bottom:28px}
.set-sec:last-child{margin-bottom:0}
.sw{padding:28px 28px 48px}
@media(max-width:600px){.sw{padding:16px 14px 60px}}

/* ─── SMOOTH PAGE FADE ─── */
#main{animation:pageFadeIn .25s cubic-bezier(.4,0,.2,1) both}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ─── IMPROVED SIDEBAR SPACING ─── */
.sb-nav{padding:10px 8px}
.ni{margin-bottom:3px;padding:10px 14px}
.nav-grp{padding:14px 14px 5px;font-size:9px}

/* ─── SMOOTH CHECKBOX/TOGGLE ─── */
.toggle-knob{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}

/* ─── PROGRESS SCREEN POLISH ─── */
.stat-xp-bar{height:8px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.06)}
.stat-xp-fill{height:100%;background:linear-gradient(90deg,var(--pp),var(--p),var(--c));border-radius:4px;transition:width .9s cubic-bezier(.4,0,.2,1)}

/* ─── FORM INPUTS POLISH ─── */
.inp{transition:border-color .18s,background .18s,box-shadow .18s,transform .1s}
.inp:focus{transform:none}
textarea.inp{line-height:1.65;min-height:80px}

/* ─── CHIP ACTIVE INDICATOR ─── */
.chip.on{background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(6,182,212,.1));box-shadow:0 0 12px rgba(139,92,246,.15)}

/* ─── TOAST POSITION FIX FOR MOBILE ─── */
@media(max-width:768px){#toasts{bottom:80px;right:12px}}

/* ─── LESSON HERO POLISH ─── */
.lhero{background:linear-gradient(135deg,rgba(109,40,217,.22),rgba(6,182,212,.1),rgba(236,72,153,.06));border:1px solid rgba(139,92,246,.3);box-shadow:0 8px 32px rgba(109,40,217,.1)}

/* ─── QUIZ OPTION TRANSITIONS ─── */
.qopt{transition:all .16s cubic-bezier(.4,0,.2,1)}
.qopt.cor{box-shadow:0 0 12px rgba(16,185,129,.2)}
.qopt.wrg{box-shadow:0 0 12px rgba(239,68,68,.15)}

/* ─── SCROLLBAR ON MOBILE HIDE ─── */
@media(max-width:768px){::-webkit-scrollbar{width:0;height:0}}
.num-counter{transition:all .3s}
@keyframes numPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.num-pop{animation:numPop .45s cubic-bezier(.34,1.56,.64,1) forwards}

/* ─── ENHANCED XP BAR ─── */
.sb-xpb{height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;position:relative}
.sb-xpf{height:100%;background:linear-gradient(90deg,var(--pp),var(--p),var(--c));transition:width .9s cubic-bezier(.4,0,.2,1);position:relative}
.sb-xpf::after{content:'';position:absolute;top:0;right:0;bottom:0;width:30px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4));animation:xpShine 2s ease-in-out infinite}
@keyframes xpShine{0%,100%{opacity:0;transform:translateX(-20px)}50%{opacity:1;transform:translateX(10px)}}

/* ─── TIGHTER DASHBOARD CARD GRID ─── */
.dash-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media(max-width:640px){.dash-stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.dash-stat-grid{grid-template-columns:1fr 1fr}}

/* ─── POLISHED SIDEBAR ACTIVE STATE ─── */
.ni.on .ni-ic{filter:drop-shadow(0 0 6px var(--p))}
.ni.on{font-weight:600}
.ni:hover .ni-ic{transform:scale(1.1)}
.ni-ic{transition:transform .15s}

/* ─── CARD CONSISTENT SPACING ─── */
.card+.card,.card+div,.mb14{margin-bottom:14px}
.sw>*+*{margin-top:0}

/* ─── GLASS MORPHISM UPGRADE ─── */
.card{-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);}
.cglow{-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}

/* ─── SCROLLBAR POLISH ─── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,.5)}

/* ─── SMOOTH FOCUS RING ─── */
:focus-visible{outline:2px solid var(--p);outline-offset:3px;border-radius:var(--r10)}

/* ─── SELECTION COLOR ─── */
::selection{background:rgba(139,92,246,.3);color:#fff}

/* ─── CARD CONSISTENT GAPS ─── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
@media(max-width:600px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ─── 3D CARD TILT ─── */
.card-3d{transform-style:preserve-3d;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.card-3d:hover{box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(139,92,246,.15)}

/* ─── FLOATING LABEL POLISH ─── */
.inp-label{text-transform:uppercase;letter-spacing:.7px;font-size:10px;color:var(--mut);font-weight:700;display:block;margin-bottom:6px}

/* ─── FONT SMOOTHING ─── */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* ─── ORBS UPGRADE ─── */
.o1{width:800px;height:800px;background:radial-gradient(circle,var(--pp),transparent 70%);opacity:.12}
.o2{width:700px;height:700px;background:radial-gradient(circle,var(--c),transparent 70%);opacity:.1}
.o3{width:500px;height:500px;background:radial-gradient(circle,var(--pk),transparent 70%);opacity:.09}

/* ── PAGE ENTER ANIMATION ── */
/* duplicate keyframe removed */
/* NOTE: #main animation is controlled by JS only — no CSS rule here to avoid conflicts */

/* ── SIDEBAR GLOW ON HOVER ── */
.sb-logo-ic{animation:logoPulse 4s ease-in-out infinite}

/* ── BUTTON ACTIVE PRESS ── */
.btn:active{transform:scale(.94)!important;transition:transform .08s!important}

/* Mentorix V3 Scroll & Layout Polish */
html, body {
  height: 100%;
  overflow: hidden; /* Prevent body scroll to avoid double scrollbars */
}
#app {
  height: 100%;
  overflow: hidden;
}
#sb {
  height: 100vh;
  overflow-y: auto;
}
#main {
  height: 100vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  
}

</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/mhchem.min.js" crossorigin="anonymous"></script>
</head>
<body class="theme-dark">
<div id="orbs"><div class="orb o1"></div><div class="orb o2"></div><div class="orb o3"></div></div>
<!-- Custom cursor: AI glowing orb -->
<div id="cursor-orb"></div>
<div id="cursor-aura"></div>
<!-- 3D Particle canvas -->
<canvas id="particle-canvas"></canvas>
<div id="particles"></div>
<!-- Ambient glow shapes for extra depth -->
<div class="ambient-shape amb-shape-1"></div>
<div class="ambient-shape amb-shape-2"></div>
<!-- Loading screen -->
<div id="loading-screen">
  <!-- Particle field canvas -->
  <canvas id="splash-canvas" class="sp-canvas-el"></canvas>

  <!-- Orbital rings (behind logo) -->
  <div id="sp-ring3" class="sp-ring-3"></div>
  <div id="sp-ring2" class="sp-ring-2"></div>
  <div id="sp-ring1" class="sp-ring-1"></div>

  <!-- Logo mark -->
  <div id="sp-logo" class="sp-logo-el">
  </div>

  <!-- Wordmark -->
  <div id="sp-wordmark" class="sp-wordmark-el">
    <div class="sp-title-el">Mentorix</div>
    <div id="sp-tagline" class="sp-tagline-el">KNOWLEDGE IS INFINITE. EXPLORE IT.</div>
  </div>

  <!-- Animated tip text -->
  <div id="sp-tip" class="sp-tip-el">
    <div id="sp-tip-text" class="sp-tip-text-el"></div>
  </div>

  <!-- Progress system -->
  <div id="sp-progress" class="sp-progress-el">
    <div class="sp-progress-track">
      <div id="sp-bar" class="sp-progress-fill"></div>
    </div>
    <div id="sp-status" class="sp-status-el">Initialising</div>
  </div>

  <!-- Skip button -->
  <button id="sp-skip" class="sp-skip-el" onclick="splashSkip()">Skip →</button>
</div>
<style>@keyframes loadBar{from{width:0}to{width:100%}}
/* ────────────────────────────────────────────────
   MENTORIX 2.0 — DESIGN SYSTEM OVERHAUL
   Premium Dark · Clean Light · Vibrant Lively
──────────────────────────────────────────────── */

/* ── DEPTH SHADOW ADDITIONS (extends root block 2) ── */
:root{
  --dp1:0 1px 4px rgba(0,0,0,.3);
  --dp2:0 4px 16px rgba(0,0,0,.4);
  --dp3:0 8px 32px rgba(0,0,0,.5);
  --dp4:0 16px 56px rgba(0,0,0,.6);
}

/* ── LIGHT THEME OVERHAUL ── */


body.theme-lively .card{background:#FFFFFF!important;border-color:var(--brd)!important;box-shadow:0 4px 20px rgba(249,115,22,.05)!important;color:var(--txt)!important;}
body.theme-lively .card:hover{border-color:rgba(249,115,22,.35)!important;box-shadow:0 8px 32px rgba(249,115,22,.08)!important;}
body.theme-lively .ni.on, body.theme-lively .ni.active{background:linear-gradient(90deg,rgba(249,115,22,.12),rgba(217,119,6,.05))!important;color:var(--p)!important;}
body.theme-lively #sb{background:#FFEDD5!important;border-right:1px solid rgba(249,115,22,.18)!important;}
body.theme-lively .sb-logo-ic{background:linear-gradient(135deg,#FF6B6B,#FFE66D,#4ECDC4)}
body.theme-lively .brand-glow{
  background:linear-gradient(90deg,#FF6B6B,#FFE66D,#4ECDC4);
  background-size:200%;animation:btnShimmer 4s ease infinite;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
body.theme-lively .h1{
  background:linear-gradient(135deg,#FF9A9A,#FFE66D,#4ECDC4);
  background-size:200%;animation:btnShimmer 5s ease infinite;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
body.theme-lively .tag.tp{background:rgba(255,107,107,.18);border:1px solid rgba(255,107,107,.3);color:#FF9A9A}
body.theme-lively .emoji-float{opacity:.42}

/* ── KEYBOARD ANIMATION ── */
.key-cap{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.2);
  border-bottom:3px solid rgba(0,0,0,.5);
  border-radius:7px;padding:3px 10px;
  font-family:monospace;font-size:12px;font-weight:700;color:var(--txt);
  box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-user-select: none; user-select: none;cursor:default;transition:transform .1s,border-bottom .1s,box-shadow .1s
}
.key-cap.pressed,.key-cap:active{
  transform:translateY(2px);border-bottom-width:1px;
  box-shadow:0 1px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1)
}
@keyframes keyTap{
  0%,100%{transform:translateY(0);border-bottom-width:3px}
  40%{transform:translateY(2px);border-bottom-width:1px}
}
.key-tap{animation:keyTap .2s ease forwards}
.kbd-demo{
  background:rgba(255,255,255,.04);border:1px solid var(--brd);
  border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;
  align-items:center
}
.kbd-row{display:flex;gap:5px;justify-content:center}

/* ── MICRO-INTERACTIONS ── */
/* Satisfying correct answer glow */
@keyframes correctFlash{
  0%{background:rgba(16,185,129,.08);box-shadow:0 0 0 0 rgba(16,185,129,.5)}
  50%{background:rgba(16,185,129,.15);box-shadow:0 0 0 8px rgba(16,185,129,0)}
  100%{background:rgba(16,185,129,.08);box-shadow:none}
}
.qopt.cor{animation:correctFlash .55s ease forwards!important}

/* Wrong answer shake */
@keyframes wrongShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}40%{transform:translateX(8px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(4px)}
}
.qopt.wrg{animation:wrongShake .4s ease forwards!important}

/* Streak fire glow when high */
@keyframes firePulse{
  0%,100%{text-shadow:0 0 8px rgba(239,68,68,.5)}
  50%{text-shadow:0 0 22px rgba(239,68,68,.9),0 0 40px rgba(245,158,11,.5)}
}
.streak-high{animation:firePulse 1.4s ease-in-out infinite}

/* Level up burst */
@keyframes levelUp{
  0%{transform:scale(.5);opacity:0}
  60%{transform:scale(1.15)}
  80%{transform:scale(.97)}
  100%{transform:scale(1);opacity:1}
}
.level-up-pop{animation:levelUp .55s var(--ease-pop) both}

/* XP shine on bar fill */
@keyframes xpBarShine{
  0%{background-position:-100% 0}
  100%{background-position:200% 0}
}
.xp-shining::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  background-size:200%;animation:xpBarShine .7s ease forwards
}
.sb-xp-bar{position:relative;overflow:hidden}

/* Button press feel */
.btn:active{transform:scale(.96)!important}
.btn.bpri:hover{filter:brightness(1.08)}

/* Card entrance */
.card-enter{animation:bounceIn .35s var(--ease-pop) both}
@keyframes bounceIn{
  0%{opacity:0;transform:scale(.9) translateY(8px)}
  60%{opacity:1;transform:scale(1.02)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* Ripple on interactive elements */
.ripple-host{position:relative;overflow:hidden}
.ripple-wave{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.22);transform:scale(0);
  animation:rippleExpand .55s linear;pointer-events:none
}
@keyframes rippleExpand{
  to{transform:scale(4);opacity:0}
}

/* Achievement pop */
@keyframes achievePop{
  0%{transform:scale(0) rotate(-10deg);opacity:0}
  50%{transform:scale(1.2) rotate(3deg)}
  70%{transform:scale(.95)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.achieve-pop{animation:achievePop .6s var(--ease-pop) both}

/* Toast improvements */
.toast-item{
  border-radius:12px!important;
  -webkit-backdrop-filter: blur(20px)!important; backdrop-filter: blur(20px)!important;
  font-weight:600!important;
  animation:toastSlide .3s var(--ease-pop) both!important
}
@keyframes toastSlide{
  from{transform:translateX(110%);opacity:0}
  to{transform:translateX(0);opacity:1}
}

/* ── SETTINGS PAGE FIX — aligned rows ── */
.set-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.05)
}
.set-row:last-child{border-bottom:none}
body.theme-light .set-row{border-bottom-color:rgba(0,0,0,.05)}

/* ══════════════════════════════════════════
   MENTORIX V3 — DASHBOARD ZONE SYSTEM
   Hero · Status · Discovery
══════════════════════════════════════════ */

/* Hero Zone */
.dash-hero-zone{
  padding:var(--sp-8) 0 var(--sp-8);
  position:relative;
  border-bottom:1px solid var(--brd);
  margin-bottom:var(--sp-8);
}
.dash-hero-greeting{
  font-family:var(--f-display);
  font-size:var(--fs-3xl);
  font-weight:700;
  line-height:var(--lh-display);
  background:linear-gradient(135deg,#fff 0%,var(--pl) 40%,var(--cl) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:var(--sp-2);
  letter-spacing:-.5px;
}
@media(max-width:600px){
  .dash-hero-greeting{font-size:36px}
}
.dash-hero-meta{
  display:flex;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;
}
.dash-hero-streak{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.2);
  border-radius:99px;
  padding:var(--sp-1) var(--sp-3);
  font-size:var(--fs-sm);font-weight:700;color:#FCA5A5;
}
.dash-hero-xp{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  background:rgba(139,92,246,.1);
  border:1px solid rgba(139,92,246,.2);
  border-radius:99px;
  padding:var(--sp-1) var(--sp-3);
  font-size:var(--fs-sm);font-weight:700;color:var(--pl);
  font-family:var(--f-num);
}
.dash-hero-cta{
  margin-top:var(--sp-6);
}

/* Status Zone */
.dash-status-zone{
  margin-bottom:var(--sp-8);
}
.dash-status-zone .dash-stat-grid{
  margin-bottom:var(--sp-4);
}

/* Discovery Zone */
.dash-discovery-zone{
  background:rgba(255,255,255,.015);
  border:1px solid var(--brd);
  border-radius:var(--r-card);
  padding:var(--sp-6);
  margin-bottom:var(--sp-8);
}
.dash-zone-label{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--mut);
  margin-bottom:var(--sp-4);
}

/* Progress bar variants */
.pf-xp{background:linear-gradient(90deg,var(--pp),var(--p),var(--c))}
.pf-course{background:linear-gradient(90deg,#0891B2,#10B981)}
.pf-mastery{background:linear-gradient(90deg,#B45309,var(--gold))}
.pf-urgency{background:linear-gradient(90deg,#B91C1C,var(--red))}

/* Section spacers upgraded */
.dash-section-gap{margin-top:var(--sp-8)}
.dash-section-gap-lg{margin-top:var(--sp-10)}

/* Quick actions — horizontal chip scroll */
.quick-actions-row{
  display:flex;
  overflow-x:scroll;
  overflow-y:hidden;
  gap:var(--sp-3);
  flex-wrap:nowrap;
  
  
  padding-bottom:var(--sp-2);
}
.quick-actions-row::-webkit-scrollbar{display:none}
.qa-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  background:var(--card);
  border:1px solid var(--brd);
  border-radius:99px;
  padding:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--sub);
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  min-height:40px;
  transition:all var(--mid) var(--ease-smooth);
}
.qa-chip:hover{
  border-color:var(--p);
  color:var(--pl);
  background:rgba(139,92,246,.08);
  transform:translateY(-1px);
}

/* ── DASHBOARD STAT CARDS — see V3 block for full definition ── */
.dash-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;margin-bottom:16px}
/* .sc base + hover handled in Step10 section — only extend here */
.sc-icon{font-size:20px;display:block;margin-bottom:4px;line-height:1}

/* ── PROGRESS BAR ── */
.pw{background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden;position:relative}
.pf{
  height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--pp),var(--p),var(--c));
  background-size:200%;animation:barFill .9s var(--ease-smooth) forwards,gradShift 3s ease-in-out infinite alternate;
  position:relative
}
@keyframes gradShift{0%{background-position:0%}100%{background-position:100%}}
.pf::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  background-size:200%;
  animation:xpBarShine 1.5s ease 1s forwards
}

/* ── QUIZ OPTION POLISH ── */
.qopt{
  border-radius:10px;padding:12px 14px;margin-bottom:8px;
  border:1.5px solid var(--brd);cursor:pointer;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.03);
  transition:all var(--mid) var(--ease-smooth);
  font-size:14px;color:var(--txt);font-weight:500
}
.qopt:hover:not(.cor):not(.wrg):not(.sel){
  background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.35);
  transform:translateX(3px)
}
.qopt.sel{background:rgba(139,92,246,.12);border-color:var(--p);color:var(--pl)}
.qopt.cor{background:rgba(16,185,129,.1);border-color:var(--ok);color:var(--okl);border-style:solid}
.qopt.cor::after{content:'✓';margin-left:auto;font-size:13px;font-weight:700;color:var(--ok);flex-shrink:0}
.qopt.wrg{background:rgba(239,68,68,.08);border-color:var(--red);color:var(--redl);border-style:dashed}
.qopt.wrg::after{content:'✗';margin-left:auto;font-size:13px;font-weight:700;color:var(--red);flex-shrink:0}
.qltr{
  min-width:24px;height:24px;border-radius:6px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;
  transition:all var(--fast)
}
.qopt.sel .qltr{background:var(--p);border-color:var(--p);color:#fff}
.qopt.cor .qltr{background:var(--ok);border-color:var(--ok);color:#fff}
.qopt.wrg .qltr{background:var(--red);border-color:var(--red);color:#fff}

/* ── ENHANCED EXPLANATION ── */
.expl{
  margin-top:10px;padding:12px 14px;border-radius:10px;
  background:rgba(139,92,246,.08);border-left:3px solid var(--p);
  font-size:13px;color:var(--sub);line-height:1.7;
  animation:bounceIn .3s var(--ease-pop) both
}

/* ── ENHANCED NAV ── */
.ni{
  border-radius:10px;padding:10px 14px;
  transition:all var(--mid) var(--ease-smooth);
  margin-bottom:2px;
  position:relative;
}
.ni:hover:not(.active):not(.on){background:rgba(255,255,255,.05);transform:translateX(2px)}
.ni.active,.ni.on{
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(219, 39, 119, 0.02)) !important;
  box-shadow: inset 3px 0 0 var(--p) !important;
  border-radius:10px;
}
.ni.active::before,.ni.on::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;border-radius:0 3px 3px 0;
  background:var(--p);
}
.nav-ic{font-size:17px;flex-shrink:0}
.nav-lbl{font-weight:600;font-size:13px}

/* ── MOBILE DRAWER ── */
#mob-drawer-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:290;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease-smooth);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#mob-drawer-bg.show{opacity:1;pointer-events:all}
#mob-drawer{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surf);
  border-radius:24px 24px 0 0;
  border-top:1px solid var(--brd);
  z-index:295;
  transform:translateY(100%);
  transition:transform .3s var(--ease-smooth);
  max-height:72vh;
  overflow-y:auto;
  padding:0 0 calc(env(safe-area-inset-bottom) + 16px);
}
#mob-drawer.open{transform:translateY(0)}
.mob-drawer-handle{
  width:40px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.15);
  margin:12px auto 16px;
}
.mob-drawer-title{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--mut);
  padding:0 20px 12px;
  border-bottom:1px solid var(--brd);
  margin-bottom:8px;
}
.mob-drawer-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;padding:12px 16px;
}
.mob-drawer-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 8px;
  background:var(--card);border:1px solid var(--brd);border-radius:12px;
  cursor:pointer;text-align:center;
  transition:all var(--mid) var(--ease-smooth);
  min-height:80px;justify-content:center;
}
.mob-drawer-item:hover,.mob-drawer-item.on{
  border-color:rgba(139,92,246,.4);
  background:rgba(139,92,246,.08);
}
.mob-drawer-ic{font-size:22px;line-height:1}
.mob-drawer-lb{font-size:11px;font-weight:600;color:var(--sub);line-height:1.3}
.mob-drawer-item.on .mob-drawer-lb{color:var(--pl)}
/* More button in mobile nav */
.mn-more{
  display:flex;flex-direction:column;align-items:center;
  gap:2px;cursor:pointer;padding:8px 6px;
  color:var(--mut);font-size:11px;min-height:48px;
  justify-content:center;
}
.mn-more span:first-child{font-size:18px}

/* ── BREADCRUMB ── */
.breadcrumb{
  display:flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);color:var(--mut);
  margin-bottom:var(--sp-4);
  flex-wrap:wrap;
}
.breadcrumb a{color:var(--mut);text-decoration:none;cursor:pointer;transition:color var(--fast)}
.breadcrumb a:hover{color:var(--pl)}
.breadcrumb-sep{color:rgba(255,255,255,.2)}
.breadcrumb-current{color:var(--sub);font-weight:600}

/* ── CUSTOM CONFIRM MODAL ── */
.confirm-modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  z-index:99998;display:flex;align-items:center;justify-content:center;
  padding:20px;-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.confirm-modal{
  background:rgba(10,10,26,.97);
  border:1px solid rgba(139,92,246,.25);
  border-radius:var(--r-card);
  padding:var(--sp-8);
  max-width:380px;width:100%;
  box-shadow:var(--shadow-lg);
  animation:scIn .2s var(--ease-pop);
}
.confirm-modal-title{font-size:var(--fs-lg);font-weight:700;color:#fff;margin-bottom:var(--sp-3)}
.confirm-modal-msg{font-size:var(--fs-sm);color:var(--sub);line-height:var(--lh-body);margin-bottom:var(--sp-6)}
.confirm-modal-btns{display:flex;gap:var(--sp-3);justify-content:flex-end}

/* ── A11Y LIVE REGION ── */
#a11y-announce{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── ENHANCED INPUT — transition only (focus defined in V3 block) ── */
.inp{
  transition:border-color var(--mid),box-shadow var(--mid),background var(--mid),padding var(--mid);
}

/* ── ENHANCED BUTTONS ── */
.btn.bpri{
  background:linear-gradient(135deg,var(--pp),var(--p));
  border:none;position:relative;overflow:hidden
}
.btn.bpri::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.15) 100%);
  opacity:0;transition:opacity var(--mid)
}
.btn.bpri:hover::before{opacity:1}
.btn.bok{background:linear-gradient(135deg,#047857,var(--ok))}

/* ── TIO CHAT POLISH ── */
.tio-typing-dots span{animation:typingDot .8s ease-in-out infinite}
.tio-typing-dots span:nth-child(2){animation-delay:.16s}
.tio-typing-dots span:nth-child(3){animation-delay:.32s}

/* ── RESPONSIVE POLISH ── */
@media(max-width:600px){
  .sc{padding:12px 8px}
  .sn{font-size:20px}
  .dash-stat-grid{gap:8px}
}

/* ── COMPLETION CARD GLOW ── */
.completion-card{
  background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(6,182,212,.08),rgba(16,185,129,.06));
  border:1px solid rgba(139,92,246,.25);
  border-radius:var(--r24);padding:32px;text-align:center;
  position:relative;overflow:hidden
}
.completion-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 0deg,var(--p),var(--c),var(--ok),var(--pk),var(--gold),var(--p));
  opacity:0;animation:ringRotate 2s linear infinite;
  -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#fff 0); mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#fff 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#fff 0)
}
.celebrate-ring{display:none}
.completion-card.show-ring::before{opacity:.6}


/* ────────────────────────────────────────────
   MOBILE FIXES — Comprehensive
──────────────────────────────────────────── */

/* iOS momentum scrolling */
#main{overscroll-behavior-y:contain}
body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
/* Allow text selection */
p,span.selectable,.expl,.cert-name,.cert-topic{-webkit-user-select:text;-webkit-user-select: text}

/* Safe area insets (iPhone notch/home-bar) */
#mob-nav{
  padding-bottom:calc(10px + env(safe-area-inset-bottom)); -webkit-user-select: text; user-select: text;}

/* Safe area insets (iPhone notch/home-bar) */
#mob-nav{
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  padding-bottom:calc(10px + constant(safe-area-inset-bottom));
}
#main{
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
  padding-bottom:calc(70px + constant(safe-area-inset-bottom));
}
/* Safe-area aware floats — moves them above the bottom nav */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .float-tio{bottom:calc(82px + env(safe-area-inset-bottom))!important}
  .timer-fab{bottom:calc(136px + env(safe-area-inset-bottom))!important}
  .timer-widget{bottom:calc(136px + env(safe-area-inset-bottom))!important}
}

/* Auth card — proper mobile padding */
@media(max-width:480px){
  .auth-card{padding:28px 20px!important;border-radius:20px!important}
  .auth-wrap{padding:16px!important;align-items:flex-start;padding-top:40px!important}
}

/* Explore grid — 2 cols on mobile */
@media(max-width:600px){
  .explore-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* Test difficulty bar — 2x2 on mobile */
@media(max-width:500px){
  .test-diff-grid{grid-template-columns:repeat(2,1fr)!important}
  .test-tier-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* Lesson hero — stack on mobile */
@media(max-width:560px){
  .lhero-tags{flex-wrap:wrap;gap:5px}
  .lesson-tabs .tb{padding:9px 12px;font-size:12px}
  .lpath-row{overflow-x:auto;padding-bottom:4px;}
}

/* Tio chat — full width on mobile */
@media(max-width:600px){
  #chat-wrap{height:calc(100vh - 180px)!important}
  .timer-widget{min-width:160px!important}
}

/* Settings — stack rows on mobile */
@media(max-width:500px){
  .set-row{flex-direction:column;align-items:flex-start;gap:10px}
  .set-row>*:last-child{align-self:flex-start}
}

/* Modal — full screen feel on tiny phones */
@media(max-width:400px){
  .modal-box{padding:20px 16px!important;border-radius:16px!important;margin:8px}
  .cert-wrap{padding:20px 14px!important}
}

/* Onboarding — better mobile layout */
@media(max-width:560px){
  .ob-wrap{padding:20px 16px!important}
  .ob-card{padding:22px 16px!important}
  .subj-grid{grid-template-columns:repeat(2,1fr)!important}
  .obtn{padding:12px 10px!important;font-size:12px!important}
}

/* Dashboard stats — clamp minimum at 72px on tiny phones */
@media(max-width:480px){
  .dash-stat-grid{grid-template-columns:repeat(auto-fit,minmax(72px,1fr))!important;gap:8px!important}
  .sc{padding:10px 6px!important}
  .sn{font-size:18px!important}
  .sl{font-size:8px!important}
}

/* Progress peer stats — stack on mobile */
@media(max-width:500px){
  .peer-stat-grid{grid-template-columns:1fr!important}
}

/* Knowledge graph — shorter on mobile */
@media(max-width:600px){
  .kg-wrap{min-height:200px!important}
}

/* Career grid — 1 col on mobile */
@media(max-width:560px){
  .career-grid{grid-template-columns:1fr!important}
}

/* Quiz options — ensure readable on mobile */
@media(max-width:500px){
  .qopt{padding:11px 12px;font-size:13px}
  .qltr{min-width:22px;height:22px;font-size:10px}
}

/* Bottom timer/tio gap on mobile */
@media(max-width:768px){
  .timer-widget{bottom:calc(92px + env(safe-area-inset-bottom))!important}
  .eli5-active{bottom:calc(92px + env(safe-area-inset-bottom))!important;font-size:11px}
  .voice-reading{bottom:calc(92px + env(safe-area-inset-bottom))!important;right:60px!important}
  .pwa-banner{bottom:calc(80px + env(safe-area-inset-bottom))!important}
  .share-toast{bottom:calc(80px + env(safe-area-inset-bottom))!important}
}

/* Swipe hint for lesson tabs */
.lesson-tabs{overflow-x:auto;}
.lesson-tabs::-webkit-scrollbar{display:none}

/* Better tap targets */
.mn-item{min-height:48px;padding:8px 6px}
.nav-item-wrap{min-height:44px}
.qopt{min-height:44px}

/* Prevent horizontal scroll */
body,html{overflow-x:hidden;max-width:100vw}

/* Input zoom prevention (additional) */
select{font-size:16px!important}
textarea{font-size:16px!important}

/* Loading screen mobile */
@media(max-width:500px){
  #loading-screen .ls-logo{font-size:48px!important}
  #loading-screen .ls-title{font-size:28px!important}
}

/* Responsive heading sizes */
@media(max-width:500px){
  .h1{font-size:22px!important}
  .h2{font-size:18px!important}
  .brand-title{font-size:20px!important}
}

/* ───────────────────────────────────────────
   ROADMAP SECTION STYLES
─────────────────────────────────────────── */
.rm-hero{
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(6,182,212,.08));
  border:1px solid rgba(139,92,246,.3);border-radius:var(--r24);
  padding:28px 24px;margin-bottom:18px;position:relative;overflow:hidden
}
.rm-hero::before{
  content:'';position:absolute;top:-50%;right:-20%;width:200px;height:200px;
  background:radial-gradient(circle,rgba(139,92,246,.15),transparent 70%);
  pointer-events:none
}
.rm-exam-card{
  background:var(--card);border:1px solid var(--brd);border-radius:var(--r18);
  padding:18px;margin-bottom:12px;transition:all var(--mid) var(--ease-smooth);
  cursor:pointer;position:relative;overflow:hidden
}
.rm-exam-card:hover{border-color:rgba(139,92,246,.35);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.rm-exam-card .exam-expand{max-height:0;overflow:hidden;transition:max-height .35s ease}
.rm-exam-card.open .exam-expand{max-height:600px}
.rm-exam-card .exam-arrow{transition:transform .3s ease;display:inline-block}
.rm-exam-card.open .exam-arrow{transform:rotate(180deg)}
.rm-timeline{position:relative;padding-left:32px}
.rm-timeline::before{
  content:'';position:absolute;left:12px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--p),var(--c),var(--ok));
  border-radius:2px
}
.rm-phase{
  position:relative;margin-bottom:20px;padding:18px;
  background:var(--card);border:1px solid var(--brd);border-radius:var(--r18);
  transition:all var(--mid) var(--ease-smooth)
}
.rm-phase:hover{border-color:rgba(139,92,246,.3);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.rm-phase-dot{
  position:absolute;left:-26px;top:22px;width:14px;height:14px;
  border-radius:50%;border:2px solid var(--p);
  background:var(--bg);z-index:1
}
.rm-phase-dot.active{background:var(--p);box-shadow:0 0 12px rgba(139,92,246,.5)}
.rm-salary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:600px){.rm-salary-grid{grid-template-columns:repeat(2,1fr)}}
.rm-salary-card{
  background:rgba(255,255,255,.04);border:1px solid var(--brd);
  border-radius:var(--r10);padding:14px 10px;text-align:center;
  transition:all var(--mid)
}
.rm-salary-card:hover{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.06)}
.rm-job-card{
  background:var(--card);border:1px solid var(--brd);border-radius:var(--r10);
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:8px;transition:all var(--mid) var(--ease-smooth)
}
.rm-job-card:hover{border-color:rgba(6,182,212,.3);transform:translateX(3px)}
.rm-demand{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px}
.rm-demand.high{background:rgba(16,185,129,.15);color:var(--okl)}
.rm-demand.medium{background:rgba(245,158,11,.15);color:var(--goldl)}
.rm-demand.low{background:rgba(239,68,68,.12);color:var(--redl)}
.rm-saved-card{
  background:var(--card);border:1px solid var(--brd);border-radius:var(--r10);
  padding:14px 16px;cursor:pointer;transition:all var(--mid) var(--ease-smooth);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px
}
.rm-saved-card:hover{border-color:rgba(139,92,246,.35);background:rgba(139,92,246,.06)}
.rm-input-wizard{
  background:var(--card);border:1px solid var(--brd);border-radius:var(--r24);
  padding:28px 24px;margin-bottom:18px
}
.rm-step-chip{
  display:inline-flex;align-items:center;gap:6px;padding:10px 18px;
  border-radius:12px;border:1.5px solid var(--brd);cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--sub);font-size:13px;
  font-weight:600;transition:all var(--mid) var(--ease-smooth)
}
.rm-step-chip:hover{border-color:rgba(139,92,246,.35);background:rgba(139,92,246,.08)}
.rm-step-chip.on{border-color:var(--p);background:rgba(139,92,246,.14);color:var(--pl)}

/* Page transition enhancement */
/* duplicate keyframe removed */

/* V3 Step 10 — btn:active handled globally in Step10 additions */
.btn.bpri:active{box-shadow:0 2px 8px rgba(139,92,246,.3)!important}

/* V3 Step 10 — card-lift handled globally */

/* Nav item — use the Step10 version, this is a no-op override only for specificity */
.ni.on{box-shadow:inset 3px 0 0 var(--p);background:linear-gradient(90deg,rgba(139,92,246,.15),transparent)}


/* Mentorix V3 Scroll & Layout Polish */
html, body {
  height: 100%;
  overflow: hidden; /* Prevent body scroll to avoid double scrollbars */
}
#app {
  height: 100%;
  overflow: hidden;
}
#sb {
  height: 100vh;
  overflow-y: auto;
}
#main {
  height: 100vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  
}

/* ───────────────────────────────────────────
   MENTORIX V3 PHASE 3 STYLES
─────────────────────────────────────────── */

/* Reduce visual noise on study/learning screens */
body[data-screen="learn"] #particle-canvas,
body[data-screen="learn"] #orbs,
body[data-screen="tests"] #particle-canvas,
body[data-screen="tests"] #orbs {
  opacity: 0.05 !important;
  filter: blur(8px);
}
body[data-screen="learn"] .card {
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}
body[data-screen="learn"] .cglow {
  box-shadow: none !important;
}

/* Dashboard Directive Grid (4 columns) */
.dash-study-console {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media(max-width: 1100px) {
  .dash-study-console {
    grid-template-columns: 1fr 1fr;
  }
}
@media(max-width: 700px) {
  .dash-study-console {
    grid-template-columns: 1fr;
  }
}
.sc-card {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: var(--r18);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.25s ease;
  min-height: 220px;
}
.sc-card.main-card {
  border-color: rgba(139, 92, 246, 0.25);
  background: linear-gradient(135deg, rgba(13, 13, 35, 0.9), rgba(6, 6, 20, 0.9));
}
.sc-card-tag {
  font-family:var(--f-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--pl);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.sc-card-title {
  font-family:var(--f-display);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}
.sc-card-sub {
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 16px;
}
.sc-progress-wrap {
  margin-top: auto;
  padding-top: 12px;
}
.sc-progress-lbl {
  font-size: 11px;
  color: var(--sub);
  font-weight: 500;
}
.sc-progress-val {
  font-size: 11px;
  color: var(--txt);
  font-weight: 700;
}
.sc-weak-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.sc-weak-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--txt);
  font-weight: 500;
}
.sc-weak-item span {
  color: var(--gold);
}
.sc-revision-alert {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--r10);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.sc-revision-alert .alert-icon {
  font-size: 18px;
}
.sc-revision-alert .alert-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--goldl);
}
.sc-revision-alert .alert-sub {
  font-size: 10px;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sc-rec-topic {
  font-family:var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.sc-rec-sub {
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 16px;
  line-height: 1.4;
}
.sc-rec-meta {
  font-size: 11px;
  color: var(--mut);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Spotlight Command Palette Modal */
#gsearch-wrap {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 15, 0.75);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  z-index: 99999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
#gsearch-wrap.active {
  display: flex;
}
.gsearch-box {
  background: #0b0b20;
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: var(--r20);
  width: 90%;
  max-width: 650px;
  box-shadow: var(--shadow-lg), 0 0 40px rgba(139, 92, 246, 0.15);
  overflow: hidden;
  animation: gsearchSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gsearchSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.gsearch-input-wrap {
  position: relative;
  border-bottom: 1px solid var(--brd);
  padding: 14px 18px;
  display: flex;
  align-items: center;
}
.gsearch-icon {
  color: var(--pl);
  font-size: 18px;
  margin-right: 12px;
}
.gsearch {
  background: transparent !important;
  border: none !important;
  color: var(--txt) !important;
  font-size: 16px !important;
  outline: none !important;
  width: 100% !important;
  font-family:var(--f-body) !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.gsearch::placeholder {
  color: var(--mut);
}
.gsearch-results {
  max-height: 450px;
  overflow-y: auto;
  padding: 12px;
}
.search-result-group {
  margin-bottom: 16px;
}
.search-result-group-header {
  font-family:var(--f-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 12px;
  margin-bottom: 4px;
}
.search-result-item {
  padding: 10px 14px;
  border-radius: var(--r10);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.15s ease;
}
.search-result-item:hover {
  background: rgba(139, 92, 246, 0.1);
  color: var(--pl);
}
.search-result-icon {
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-result-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.search-result-meta {
  font-size: 11px;
  color: var(--mut);
  margin-top: 2px;
}
.search-result-action {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--sub);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.search-result-item:hover .search-result-action {
  opacity: 1;
}

/* Global Weak Concept Warning Banner */
.global-weak-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--r12);
  padding: 12px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--txt);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.1);
  animation: slideDownFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.global-weak-banner .banner-icon {
  font-size: 16px;
  animation: pulseWarning 1.5s ease infinite;
}
.global-weak-banner .banner-text {
  flex: 1;
}
.global-weak-banner .banner-btn {
  background: var(--gold);
  color: #000;
  border: none;
  font-family:var(--f-display);
  font-weight: 700;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.global-weak-banner .banner-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
}
@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseWarning {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Chapter Completion Overlay */
.chapter-complete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 15, 0.9);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.4s ease forwards;
}
.cc-content {
  text-align: center;
  max-width: 480px;
  width: 90%;
  padding: 32px;
  background: #0b0b20;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--r24);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(139, 92, 246, 0.2);
  animation: ccZoomIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes ccZoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.cc-badge-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
}
.cc-badge {
  font-size: 50px;
  position: relative;
  z-index: 2;
  animation: badgeSpin 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
}
.cc-badge-glow {
  position: absolute;
  inset: 10px;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  border-radius: 50%;
  filter: blur(6px);
  animation: pulseGlow 1.5s ease infinite alternate;
}
.cc-title {
  font-family:var(--f-display);
  font-weight: 700;
  font-size: 28px;
  background: linear-gradient(135deg, #fff, var(--goldl));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.cc-subtitle {
  font-size: 13px;
  color: var(--mut);
  margin-bottom: 20px;
}
.cc-chapter-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: var(--r14);
  padding: 16px;
  margin-bottom: 20px;
  transform: perspective(600px) rotateX(10deg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}
.cc-chapter-card:hover {
  transform: perspective(600px) rotateX(0deg);
}
.cc-next-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--r10);
  padding: 8px 16px;
  margin-top: 8px;
  color: var(--okl);
  font-weight: 600;
  font-size: 13px;
  animation: unlockPulse 1.8s ease infinite;
}
@keyframes badgeSpin {
  0% { transform: translateY(0) rotate(-5deg); }
  100% { transform: translateY(-5px) rotate(5deg); }
}
/* dup removed */
  100% { opacity: 0.9; transform: scale(1.2); }
}
@keyframes unlockPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
  50% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.2); }
}

/* Animated Progression Path Connectors */
.roadmap-path-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -6px 0;
  position: relative;
  z-index: 5;
}
.roadmap-path-connector .path-line {
  width: 2px;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}
.roadmap-path-connector .path-arrow {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.15);
  margin-top: -2px;
  transition: all 0.3s ease;
}
.roadmap-path-connector.active .path-line {
  background: linear-gradient(180deg, var(--ok), var(--p));
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
  animation: flowLine 1.5s linear infinite;
}
.roadmap-path-connector.active .path-arrow {
  color: var(--pl);
  animation: pulseArrow 1.2s ease-in-out infinite;
}
.roadmap-path-connector.completed .path-line {
  background: var(--ok);
}
.roadmap-path-connector.completed .path-arrow {
  color: var(--ok);
}
@keyframes flowLine {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}
@keyframes pulseArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.pulse-active-chap {
  animation: activeChapBorder 2s infinite alternate;
}
@keyframes activeChapBorder {
  0% { border-color: rgba(139, 92, 246, 0.18); box-shadow: none; }
  100% { border-color: rgba(139, 92, 246, 0.45); box-shadow: 0 0 15px rgba(139, 92, 246, 0.15); }
}

/* ═══════════════════════════════════════════════════════
   MENTORIX STEP 10 — COMPLETE UI/UX REDESIGN ADDITIONS
   Space Grotesk · Glassmorphic · ASMR · Physics
═══════════════════════════════════════════════════════ */

/* ── OVERRIDES: font families everywhere ── */
.h1,.h2,.h3,.h4,
.dash-hero-greeting,.brand-title,.auth-wordmark,
.sb-logo-tx,.sc-card-title,.sc-card-tag,
.cert-title,.cert-name,.cert-topic,
.cc-title,.rm-hero h1,.dash-zone-label,
.search-result-group-header,.confirm-modal-title,
.sc-rec-topic,nav-grp{
  font-family:var(--f-display)!important;
}
body,p,.sub,.card,.btn,.inp,.toast,.modal-box,
.auth-inp,.ob-card,.obtn,.tc-btn,.qa-chip,
.tio-bubble,.mb,.mbbl{
  font-family:var(--f-body)!important;
}
.sn,.xp-float-val,.xp-float-lv,.sb-ulvl,
.dash-hero-xp,.dash-hero-streak,.timer-display,
code,pre,.diag-card{
  font-family:var(--f-num)!important;
}

/* ── SIDEBAR LOGO UPGRADE ── */
.sb-logo{
  display:flex;align-items:center;gap:12px;
  padding:18px 14px;border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}
.sb-logo-ic{
  width:40px;height:40px;flex-shrink:0;border-radius:11px;
  background:url('logo.png') center/cover no-repeat !important;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 24px rgba(139,92,246,.5),0 4px 12px rgba(0,0,0,.5);
  position:relative;overflow:hidden;
  transition:box-shadow .3s var(--ease-smooth);
}
.sb-logo-ic::before, .sb-logo-ic::after {
  display:none !important;
}
@media(prefers-reduced-motion:no-preference){
  .sb-logo-ic{animation:logoPulse 4s ease-in-out infinite}
}
.sb-logo-tx{
  font-family:var(--f-display)!important;font-weight:700;font-size:15px;
  background:linear-gradient(90deg,#fff,var(--pl));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;line-height:1.1;letter-spacing:-.3px;
}
.sb-logo-sub{font-family:var(--f-body)!important;font-size:9px;font-weight:500;color:var(--mut);margin-top:2px;letter-spacing:.3px}
#sb.col .sb-logo-tx,#sb.col .nav-lbl,#sb.col .nav-grp,#sb.col .sb-logo-sub,#sb.col .sb-un{display:none}

/* ── ENHANCED NAV ITEMS — spring hover ── */
.ni{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:12px;margin-bottom:2px;cursor:pointer;
  color:var(--sub);
  transition:all .18s var(--spring-nav);
  white-space:nowrap;position:relative;overflow:hidden;
  font-family:var(--f-body)!important;
}
.ni:hover:not(.on){background:rgba(139,92,246,.09);color:var(--pl);transform:translateX(3px)}
.ni.on{
  background:linear-gradient(90deg,rgba(109,40,217,.22),rgba(6,182,212,.08));
  color:var(--pl);
  box-shadow:inset 3px 0 0 var(--p),0 0 20px rgba(139,92,246,.08);
}
.ni-ic,.nav-ic{font-size:16px;flex-shrink:0;position:relative;z-index:1;line-height:1}
.nav-lbl{font-size:13px;font-weight:500;position:relative;z-index:1;font-family:var(--f-body)!important}
#sb.col .ni{justify-content:center;padding:10px 0}
#sb.col .ni:hover::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%);
  background:rgba(8,8,24,.97);border:1px solid var(--brd);border-radius:10px;
  padding:7px 13px;font-size:12px;font-weight:500;color:var(--txt);
  white-space:nowrap;z-index:999;pointer-events:none;
  box-shadow:var(--shadow-md);
  font-family:var(--f-body);
}

/* ── STAT CARDS — Duolingo-style bounce ── */
.sc{
  background:var(--card);border:1px solid var(--glass-brd);
  border-radius:20px;padding:18px 14px;text-align:center;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition:transform .2s var(--spring-bounce),box-shadow .2s var(--ease-smooth),border-color .2s;
  cursor:pointer;position:relative;overflow:hidden;
}
.sc::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(139,92,246,.12),transparent 65%);
  opacity:0;transition:opacity .2s;
}
.sc:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 14px 44px rgba(0,0,0,.45),0 0 0 1px rgba(139,92,246,.22)}
.sc:hover::before{opacity:1}
.sc:active{transform:translateY(-1px) scale(.99)!important;transition:all .08s!important}
.sc-icon{font-size:20px;display:block;margin-bottom:5px;line-height:1}
.sn{font-family:var(--f-display)!important;font-size:26px;font-weight:700;line-height:1.1;margin-bottom:3px}
.sl{font-size:9px;font-weight:600;letter-spacing:1px;color:var(--mut);text-transform:uppercase;font-family:var(--f-display)!important}

/* ── DASHBOARD HERO — enlarged greeting ── */
.dash-hero-greeting{
  font-family:var(--f-display)!important;
  font-size:var(--fs-3xl);
  font-weight:700;
  line-height:var(--lh-display);
  background:linear-gradient(135deg,#fff 0%,var(--pl) 45%,var(--cl) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:var(--sp-2);letter-spacing:-.5px;
}
@media(max-width:600px){.dash-hero-greeting{font-size:36px}}
.dash-hero-streak,.dash-hero-xp{border-radius:var(--r-pill)!important;font-family:var(--f-display)!important}

/* ── QUICK ACTION CHIPS — pill upgrade ── */
.qa-chip{border-radius:var(--r-pill)!important;font-family:var(--f-body)!important}

/* ── OBTN PILL ── */
.obtn{border-radius:14px!important}

/* ── TOAST UPGRADE ── */
.toast{
  border-radius:var(--r-pill)!important;
  -webkit-backdrop-filter: blur(20px)!important; backdrop-filter: blur(20px)!important;
  font-weight:600!important;
  font-family:var(--f-body)!important;
  padding:10px 20px!important;
  animation:toastSlideV3 .32s var(--spring-nav) both,toastFadeOut .3s var(--ease-smooth) 2.9s both!important;
}
@keyframes toastSlideV3{from{transform:translateX(110%) scale(.9);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes toastFadeOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)}}

/* ── PAGE TRANSITION — spring slide ── */
/* duplicate keyframe removed */
.page-enter{animation:pageSlideIn .3s var(--spring-settle) forwards}
.scr{animation:scIn .32s var(--spring-settle) forwards}

/* ── XP BAR SHINE ── */
.pf,.pf-xp{
  border-radius:8px;
  background:linear-gradient(90deg,var(--pp),var(--p),var(--c));
  background-size:250%;
  animation:gradShift 3s ease-in-out infinite alternate;
  position:relative;
}
.pf::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  background-size:200%;animation:xpBarShine 1.8s ease 1s forwards;
}
/* dup removed */100%{background-position:100%}}

/* ── MODAL UPGRADE ── */
.modal-box{
  background:rgba(8,8,24,.97)!important;
  border-radius:var(--r-modal)!important;
  -webkit-backdrop-filter: blur(32px)!important; backdrop-filter: blur(32px)!important;
  border:1px solid rgba(139,92,246,.2)!important;
}

/* ── AUTH CARD UPGRADE ── */
.auth-card{
  background:rgba(5,5,16,.97)!important;
  border-radius:28px!important;
  -webkit-backdrop-filter: blur(40px)!important; backdrop-filter: blur(40px)!important;
  border:1px solid rgba(139,92,246,.18)!important;
}
.auth-wordmark{font-family:var(--f-display)!important;letter-spacing:-.5px!important}
.auth-inp{border-radius:14px!important;font-family:var(--f-body)!important}
.auth-btn{border-radius:var(--r-pill)!important;font-family:var(--f-display)!important}

/* ── ONBOARDING CARD ── */
.ob-card{border-radius:28px!important;-webkit-backdrop-filter: blur(28px)!important; backdrop-filter: blur(28px)!important}

/* ── RIPPLE — satisfying click ── */
.ripple-host{position:relative;overflow:hidden}
.ripple-wave{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.18);transform:scale(0);
  animation:rippleV3 .55s var(--ease-smooth);pointer-events:none;
}
@keyframes rippleV3{to{transform:scale(5);opacity:0}}

/* ── HYDRATION PROGRESS (top-card thin bar) ── */
.hydration-bar{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pp),var(--p),var(--c),var(--ok));
  background-size:300%;border-radius:inherit;
  animation:hydrationFlow 1.5s linear infinite;
  opacity:.7;
}
@keyframes hydrationFlow{0%{background-position:0%}100%{background-position:300%}}

/* ── LIGHT THEME — V3 updates ── */

body.theme-light .card{
  background:#fff;border:1px solid rgba(109,40,217,.1);
  box-shadow:0 2px 16px rgba(109,40,217,.06);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.theme-light #sb{background:rgba(255,255,255,.96);border-right:1px solid rgba(109,40,217,.08)}
body.theme-light .ni{color:#4A4A6A}
body.theme-light .ni.on{background:linear-gradient(90deg,rgba(109,40,217,.1),rgba(109,40,217,.04));color:var(--p)}
body.theme-light .inp{background:#fff;border-color:rgba(109,40,217,.18);color:var(--txt)}
body.theme-light .inp:focus{border-color:var(--c);box-shadow:0 0 0 3px rgba(6,182,212,.1)}
body.theme-light .sc{background:#fff;border:1px solid rgba(109,40,217,.1);-webkit-backdrop-filter: none; backdrop-filter: none;}
body.theme-light .qopt{background:rgba(109,40,217,.04); -webkit-backdrop-filter: none; backdrop-filter: none;}
body.theme-light .qopt{background:rgba(109,40,217,.04);border-color:rgba(109,40,217,.12);color:var(--txt)}
body.theme-light .qopt:hover{background:rgba(109,40,217,.08);border-color:var(--p)}
body.theme-light .btn.bgh{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:var(--txt)}
body.theme-light ::-webkit-scrollbar-thumb{background:rgba(109,40,217,.18)}
body.theme-light #particle-canvas{opacity:.1}
body.theme-light #orbs{opacity:.3}
body.theme-light .tio-bubble{background:rgba(109,40,217,.06);border-color:rgba(109,40,217,.15)}
body.theme-light .rev-card{background:rgba(255,255,255,.95)}
body.theme-light .ec{background:rgba(255,255,255,.92);border:1px solid rgba(109,40,217,.1)}

/* ── LIVELY THEME — V3 ── */

body.theme-lively .bpri{
  background:linear-gradient(135deg,#FF6B6B,#FFE66D,#4ECDC4);
  background-size:200%;animation:btnShimmer 3s ease infinite;
  color:#0a0820!important;font-weight:700;
}
body.theme-lively .card{background:rgba(255,255,255,.04);border-color:rgba(255,107,107,.14)}
body.theme-lively .card:hover{border-color:rgba(249,115,22,.35)!important;box-shadow:0 8px 32px rgba(249,115,22,.08)!important;}
body.theme-lively #sb{background:#FFEDD5!important;border-right:1px solid rgba(249,115,22,.18)!important;}
body.theme-lively .brand-glow{
  background:linear-gradient(90deg,#FF6B6B,#FFE66D,#4ECDC4);
  background-size:200%;animation:btnShimmer 4s ease infinite;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
body.theme-lively .h1{
  background:linear-gradient(135deg,#FF9A9A,#FFE66D,#4ECDC4);
  background-size:200%;animation:btnShimmer 5s ease infinite;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
@keyframes btnShimmer{0%{background-position:0%}100%{background-position:200%}}

/* ── MENTOR TONE THEMES ── */
body.theme-friendly{--p:#F59E0B;--pl:#FCD34D;--pp:#B45309;--theme-glow:rgba(245,158,11,.25)}
body.theme-genius{--p:#3B82F6;--pl:#93C5FD;--pp:#1D4ED8;--theme-glow:rgba(59,130,246,.25)}
body.theme-motivational{--p:#EF4444;--pl:#FCA5A5;--pp:#B91C1C;--theme-glow:rgba(239,68,68,.25)}
body.theme-humorous{--p:#10B981;--pl:#6EE7B7;--pp:#047857;--theme-glow:rgba(16,185,129,.25)}

/* ── FONT SIZE MODES ── */
body.font-sm{font-size:13px}body.font-sm .h1{font-size:22px!important}body.font-sm .h2{font-size:17px!important}
body.font-md{font-size:15px}
body.font-lg{font-size:17px}body.font-lg .h1{font-size:30px!important}body.font-lg .h2{font-size:22px!important}

/* ── MOBILE NAV — pill active indicator ── */
.mn-item.on{
  color:var(--pl);
  background:rgba(139,92,246,.12);
  border-radius:12px;
}
.mn-item{
  border-radius:12px;
  transition:all .15s var(--spring-nav);
}
.mn-item:active{transform:scale(.9)!important}

/* ── COURSE COLOR CARDS ── */
.course-card-color{border-radius:var(--r-card)!important}
.cc-continue-btn{border-radius:var(--r-pill)!important}

/* ── LESSON TABS ── */
.tb,.lesson-tabs .tb{border-radius:var(--r-pill)!important;font-family:var(--f-body)!important}
.tb.on{background:rgba(139,92,246,.2)!important;border-color:rgba(139,92,246,.4)!important}

/* ── QUIZ OPTIONS ── */
.qopt{border-radius:12px!important;transition:all .16s var(--spring-nav)!important}
.qopt:hover:not(.cor):not(.wrg):not(.sel){transform:translateX(4px)!important}
.qopt.cor{animation:correctFlash .5s var(--ease-smooth) forwards!important}
.qopt.wrg{animation:wrongShake .35s var(--ease-smooth) forwards!important}

/* ── CHIP / TAG ── */
.chip,.tag{border-radius:var(--r-pill)!important}

/* ── TUTOR CONTROL BUTTONS ── */
.tc-btn{border-radius:var(--r-pill)!important;font-family:var(--f-body)!important}

/* ── PULSE & GLOW UTILS ── */
@keyframes tioPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.4)}50%{box-shadow:0 0 0 8px rgba(139,92,246,.0)}}
.pulse-ring{animation:tioPulse 2s ease-in-out infinite}

/* ── FOCUS TERMINAL (Step 10 new screen) ── */
.focus-terminal{
  position:fixed;inset:0;z-index:9990;
  background:rgba(4,4,15,.98);
  -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px);
  display:flex;align-items:center;justify-content:center;
  animation:ftIn .4s var(--spring-settle) both;
}
@keyframes ftIn{from{opacity:0}to{opacity:1}}
.focus-terminal-inner{
  width:100%;max-width:720px;padding:var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-6);
}
.focus-terminal-input{
  background:transparent;border:none;
  border-bottom:1px solid rgba(139,92,246,.25);
  color:#fff;font-size:var(--fs-xl);font-family:var(--f-body);
  padding:var(--sp-4) 0;outline:none;width:100%;
  transition:border-color .3s var(--ease-smooth);
  caret-color:var(--c);
}
.focus-terminal-input:focus{border-color:var(--c)}
.focus-terminal-input::placeholder{color:rgba(255,255,255,.18)}

/* ── CERTIFICATE ── */
.cert-wrap{-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.cert-title{font-family:var(--f-display)!important}
.cert-name{font-family:var(--f-display)!important}

/* ── BETA BADGE ── */
.beta-badge{border-radius:var(--r-pill)!important;font-family:var(--f-display)!important}

/* ── SCROLLBAR TRACK ── */
#main::-webkit-scrollbar{width:4px}
#main::-webkit-scrollbar-track{background:transparent}
#main::-webkit-scrollbar-thumb{background:rgba(139,92,246,.2);border-radius:4px}
#main::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,.4)}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body.anim-none *{animation:none!important;transition:none!important}
body.anim-reduce *{animation-duration:.1s!important;transition-duration:.1s!important}

/* ═══════════════════════════════════════════
   FINAL UX POLISH — Top-tier fluid experience
═══════════════════════════════════════════ */

/* ── Floating label inp-label ── */
.inp-label{
  font-family:var(--f-display)!important;
  font-size:10px!important;font-weight:700!important;
  letter-spacing:1px!important;text-transform:uppercase!important;
  color:var(--mut)!important;
}

/* ── Question options — spring press ── */
.qopt{
  border-radius:12px!important;
  border:1.5px solid rgba(255,255,255,.07)!important;
  background:rgba(255,255,255,.03)!important;
  padding:12px 14px!important;
  margin-bottom:8px!important;
  cursor:pointer;
  transition:all .18s cubic-bezier(.34,1.4,.64,1)!important;
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--sub);
}
.qopt:hover:not(.cor):not(.wrg):not(.sel){
  background:rgba(139,92,246,.09)!important;
  border-color:rgba(139,92,246,.35)!important;
  color:#fff!important;
  transform:translateX(5px)!important;
}
.qopt:active:not(.cor):not(.wrg){transform:scale(.97)!important}
.qopt.sel{
  background:rgba(139,92,246,.14)!important;
  border-color:rgba(139,92,246,.5)!important;
  color:var(--pl)!important;
}
.qopt.cor{
  background:rgba(16,185,129,.12)!important;
  border-color:rgba(16,185,129,.5)!important;
  color:var(--okl)!important;
  animation:correctFlash .4s cubic-bezier(.34,1.56,.64,1)!important;
}
.qopt.wrg{
  background:rgba(239,68,68,.1)!important;
  border-color:rgba(239,68,68,.4)!important;
  color:var(--redl)!important;
  animation:wrongShake .35s cubic-bezier(.36,.07,.19,.97)!important;
}
.qltr{
  width:24px;height:24px;border-radius:7px;
  background:rgba(255,255,255,.07);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:11px;font-weight:700;
  flex-shrink:0;color:var(--sub);
  transition:all .15s;
}
.qopt.sel .qltr{background:rgba(139,92,246,.3);color:var(--pl)}
.qopt.cor .qltr{background:rgba(16,185,129,.3);color:var(--okl)}
.qopt.wrg .qltr{background:rgba(239,68,68,.25);color:var(--redl)}

/* ── Explanation box ── */
.expl{
  background:rgba(139,92,246,.07);
  border:1px solid rgba(139,92,246,.18);
  border-radius:12px;padding:12px 14px;
  color:var(--sub);font-size:13px;line-height:1.7;
  margin-top:10px;
  animation:scIn .3s cubic-bezier(.4,0,.2,1);
}

/* ── Mode chip ── */
.mode-chip{cursor:pointer;transition:all .18s cubic-bezier(.34,1.4,.64,1)!important}
.mode-chip:hover:not(.mode-chip-on){
  transform:translateY(-2px);
  border-color:rgba(139,92,246,.3)!important;
  background:rgba(139,92,246,.07)!important;
}
.mode-chip-on{
  background:rgba(139,92,246,.15)!important;
  border-color:rgba(139,92,246,.5)!important;
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(139,92,246,.2);
}

/* ── Test source cards ── */
.test-src-card:hover{
  border-color:rgba(139,92,246,.3)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(139,92,246,.2)!important;
}

/* ── Smooth screen transitions for all .scr ── */
.scr{animation:pageSlideIn .32s cubic-bezier(.34,1.3,.64,1) both}

/* ── Back button hover ── */
.btn.bgh:hover{color:var(--pl)!important}

/* ── Sticky submit bar shadow ── */
#submit-btn:not([disabled]):hover{
  box-shadow:0 16px 48px rgba(139,92,246,.6)!important;
  transform:translateY(-2px)!important;
}

/* ── Progress bar pulse when full ── */
.pf[style*="width:100"]{animation:gradShift 2s ease infinite,xpBarShine 1.5s ease 0s infinite!important}

/* ── Completion card ── */
.card-hero{background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(6,182,212,.06))!important}

/* ── Stepper button hover ── */
button[onclick*="tsDiffStep"]:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}

/* ── Recent test card hover ── */
.card[onclick*="tsSetSource"]:hover{
  border-color:rgba(139,92,246,.3)!important;
  transform:translateX(4px)!important;
  transition:all .2s cubic-bezier(.34,1.3,.64,1)!important;
}

/* ── Global focus ring ── */
*:focus-visible{
  outline:2px solid var(--c)!important;
  outline-offset:2px!important;
  border-radius:8px!important;
}

/* ── Card entrance stagger via nth-child ── */
.card.mb12:nth-child(1){animation-delay:.02s}
.card.mb12:nth-child(2){animation-delay:.05s}
.card.mb12:nth-child(3){animation-delay:.08s}
.card.mb12:nth-child(4){animation-delay:.11s}
.card.mb12:nth-child(5){animation-delay:.14s}
.card.mb12:nth-child(6){animation-delay:.17s}


/* select dropdown option color override */
select.inp option {
  background: #090916 !important;
  color: #fff !important;
}
body.theme-light select.inp option {
  background: #ffffff !important;
  color: #000000 !important;
}

/* custom range input slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12) !important;
  outline: none;
  transition: background 0.3s;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--p) !important;
  box-shadow: 0 0 10px var(--p);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 16px var(--p);
}


/* tactile button & card press-down states */
.btn:active, .card-lift:active, .sc:active, .ni:active, .obtn:active, .qa-chip:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ── EMERALD THEME — V3 ── */

body.theme-emerald #orbs .o1 {
  background: radial-gradient(circle, rgba(16,185,129,0.25), transparent 65%);
  animation: of1 8s ease-in-out infinite;
  opacity: 1;
}
body.theme-emerald #orbs .o2 {
  background: radial-gradient(circle, rgba(6,182,212,0.2), transparent 65%);
  animation: of2 11s ease-in-out infinite;
  opacity: 1;
}
body.theme-emerald .bpri {
  background: linear-gradient(135deg, #10B981, #06B6D4, #34D399);
  background-size: 200%;
  animation: btnShimmer 3s ease infinite;
  color: #030807 !important;
  font-weight: 700;
}
body.theme-emerald .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(16, 185, 129, 0.14);
}
body.theme-emerald .card:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 8px 36px rgba(16, 185, 129, 0.12);
}
body.theme-emerald #sb {
  background: rgba(3, 8, 7, 0.95);
  border-right-color: rgba(16, 185, 129, 0.12);
}
body.theme-emerald .sb-logo-ic {
  background: linear-gradient(135deg, #10B981, #06B6D4);
}
body.theme-emerald .brand-glow {
  background: linear-gradient(90deg, #10B981, #06B6D4);
  background-size: 200%;
  animation: btnShimmer 4s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-emerald .h1 {
  background: linear-gradient(135deg, #34D399, #06B6D4);
  background-size: 200%;
  animation: btnShimmer 5s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-emerald .tag.tp {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34D399;
}
body.theme-emerald .ni.active {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.1));
  box-shadow: inset 3px 0 0 var(--p);
}


/* CSS classes for eliminating inline style warnings (no !important on animated props so JS transition works) */
.amb-shape-1 { width:300px;height:300px;background:var(--pk);top:20%;right:5%;animation-duration:14s; }
.amb-shape-2 { width:250px;height:250px;background:var(--c);bottom:30%;left:10%;animation-duration:18s;animation-delay:3s; }
.sp-canvas-el { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0; }
.sp-ring-3 { position:absolute;width:300px;height:300px;border-radius:50%;border:1px solid rgba(139,92,246,.1);opacity:0;transform:scale(.3);pointer-events:none;z-index:1; }
.sp-ring-2 { position:absolute;width:210px;height:210px;border-radius:50%;border:1px solid rgba(6,182,212,.18);opacity:0;transform:scale(.3);pointer-events:none;z-index:1; }
.sp-ring-1 { position:absolute;width:150px;height:150px;border-radius:50%;border:1.5px solid rgba(139,92,246,.35);opacity:0;transform:scale(.3);pointer-events:none;z-index:1; }
.sp-logo-el {
  position:relative;z-index:2;
  width:96px;height:96px;border-radius:26px;overflow:hidden;
  background:url('logo.png') center/cover no-repeat;
  opacity:0;transform:scale(0.35) rotate(-12deg);
  box-shadow:0 0 50px rgba(139,92,246,.5),0 12px 48px rgba(0,0,0,.7);
}
.sp-wordmark-el { position:relative;z-index:2;text-align:center;margin-top:24px;opacity:0;transform:translateY(20px); }
.sp-title-el {
  font-family:var(--f-hero);font-weight:700;font-size:38px;letter-spacing:-1px;line-height:1;
  background:linear-gradient(135deg,#fff 0%,#A78BFA 48%,#67E8F9 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:7px;
}
.sp-tagline-el { font-family:var(--f-body);font-size:11px;font-weight:800;color:rgba(255,255,255,.45);letter-spacing:2px;text-transform:uppercase;opacity:0;transform:translateY(8px); }
.sp-tip-el { position:relative;z-index:2;margin-top:18px;opacity:0;transform:translateY(10px);text-align:center;max-width:280px;padding:0 20px; }
.sp-tip-text-el { font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:rgba(255,255,255,.38);line-height:1.7;font-style:italic; }
.sp-progress-el { position:relative;z-index:2;margin-top:44px;width:200px;opacity:0; }
.sp-progress-track { height:2px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;position:relative; }
.sp-progress-fill { height:100%;width:0%;border-radius:2px;background:linear-gradient(90deg,#6D28D9,#8B5CF6,#06B6D4,#10B981);background-size:400%;transition:width .6s cubic-bezier(.4,0,.2,1); }
.sp-status-el { font-family:'Hanken Grotesk',sans-serif;font-size:10px;color:rgba(255,255,255,.2);text-align:center;margin-top:9px;letter-spacing:.8px;text-transform:uppercase; }
.sp-skip-el {
  position:absolute;bottom:28px;right:28px;z-index:10;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:99px;padding:8px 18px;color:rgba(255,255,255,.35);
  font-size:12px;font-family:'Hanken Grotesk',sans-serif;cursor:pointer;
  letter-spacing:.5px;opacity:0;transition:opacity .4s,background .2s,color .2s;
}
.sp-skip-el:hover { background:rgba(255,255,255,.1) !important;color:rgba(255,255,255,.7) !important; }

/* In-app element class definitions */
.sov-title { font-family:var(--f-display) !important;font-size:24px !important;font-weight:700 !important;color:#fff !important; }
.sov-sub { color:rgba(255,255,255,.7) !important;font-size:14px !important; }
.voice-reading-stop { color:var(--mut) !important;font-size:11px !important;cursor:pointer !important; }
.timer-display-text { position:absolute !important;inset:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;font-family:var(--f-display) !important;font-size:20px !important;font-weight:700 !important;color:#fff !important; }
.timer-modes-row { display:flex !important;gap:5px !important;justify-content:center !important;margin-top:8px !important; }
.timer-mode-btn { font-size:10px !important;padding:4px 9px !important; }
.timer-sessions-el { text-align:center !important;color:var(--mut) !important;font-size:10px !important;margin-top:7px !important; }
.pwa-icon { font-size:28px !important; }
.pwa-text { flex:1 !important; }
.pwa-text-title { font-weight:700 !important;color:#fff !important;font-size:13px !important; }
.pwa-text-sub { color:rgba(255,255,255,.7) !important;font-size:11px !important; }
.pwa-install-btn { background:rgba(255,255,255,.2) !important;color:#fff !important;border:1px solid rgba(255,255,255,.3) !important;font-size:12px !important;flex-shrink:0 !important; }
.pwa-close-btn { background:none !important;border:none !important;color:rgba(255,255,255,.5) !important;cursor:pointer !important;font-size:16px !important;padding:4px !important;flex-shrink:0 !important; }

/* Disable horizontal scroll globally */
html, body, #app, #main, .scr {
  overflow-x: hidden !important;
}

/* Cream Theme Variable Defs (Soothing light green/mint palette) */

body.theme-cream #orbs .o1{background:radial-gradient(circle,rgba(16,185,129,.12),transparent 70%);opacity:1;filter:blur(60px)}
body.theme-cream #orbs .o2{background:radial-gradient(circle,rgba(6,182,212,.08),transparent 70%);opacity:1;filter:blur(80px)}
body.theme-cream #particle-canvas{opacity:.08}
body.theme-cream .card{background:var(--card)!important;border-color:var(--brd)!important;box-shadow:0 4px 20px rgba(236,72,153,.08)!important;color:var(--txt)!important;}
body.theme-cream .card:hover{border-color:rgba(236,72,153,.35)!important;box-shadow:0 8px 32px rgba(236,72,153,.15)!important;}


body.theme-cream .ni:hover{background:rgba(16,185,129,.06)}




body.theme-cream .qopt{background:rgba(16,185,129,.04);border-color:rgba(16,185,129,.12);color:var(--txt)}
body.theme-cream .qopt:hover{background:rgba(16,185,129,.08);border-color:var(--p)}
body.theme-cream .btn.bgh{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:var(--txt)}
body.theme-cream ::-webkit-scrollbar-thumb{background:rgba(16,185,129,.18)}
body.theme-cream ::-webkit-scrollbar-track{background:rgba(0,0,0,.03)}
body.theme-cream .h1,body.theme-cream .h2,body.theme-cream .h3{color:var(--txt)}
body.theme-cream .lhero{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(6,182,212,.05))}
body.theme-cream .ffact{background:rgba(16,185,129,.07);border-color:rgba(16,185,129,.2)}
body.theme-cream .expl{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.18)}
body.theme-cream .tag.tp{color:var(--p);background:rgba(16,185,129,.1)}

body.theme-cream .sb-logo-tx .brand-glow{-webkit-text-fill-color:var(--p)}
body.theme-cream .brand-glow{background:linear-gradient(90deg,var(--p),var(--c));-webkit-background-clip:text;-webkit-text-fill-color:transparent}



body.theme-cream .tio-inline{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.15)}
body.theme-cream .beta-banner{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.2)}
body.theme-cream .tio-bubble{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.15)}



body.theme-cream, body.theme-lively, body.theme-light, body.theme-emerald, body.theme-dark, body {
  background-color: var(--bg) !important;
  color: var(--txt) !important;
}


body.theme-light {
  --bg: #F8FAFC !important;       /* Clean slate white background */
  --surf: #FFFFFF !important;     /* Pure white card surfaces */
  --card: #FFFFFF !important;     /* White card background */
  --txt: #0F172A !important;      /* Slate-900 high contrast text */
  --mut: #64748B !important;      /* Slate-500 muted text */
  --sub: #475569 !important;      /* Slate-600 secondary text */
  --brd: rgba(148, 163, 184, 0.18) !important; /* Soft slate border */
  --p: #2563EB !important;        /* Clean blue primary accent */
  --pl: #1D4ED8 !important;       /* Darker blue */
  --pp: #1E40AF !important;       /* Deep navy blue */
  --c: #475569 !important;        /* Slate secondary accent */
  --cl: #334155 !important;       /* Darker slate */
  --cc: #1E293B !important;
  --glass-brd: rgba(148, 163, 184, 0.22) !important;
  background-color: var(--bg) !important;
  color: var(--txt) !important;
}

/* Light Theme Component Overrides to ensure 100% brightness and legibility */
body.theme-light #sb {
  background: #F1F5F9 !important;
  border-right: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 2px 0 24px rgba(0, 0, 0, 0.02) !important;
}
body.theme-light .card, body.theme-light .sc, body.theme-light .sc-card {
  background: #FFFFFF !important;
  border: 1px solid var(--brd) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  color: var(--txt) !important;
}
body.theme-light .card:hover, body.theme-light .sc:hover, body.theme-light .sc-card:hover {
  border-color: rgba(37, 99, 235, 0.25) !important;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.06) !important;
}
body.theme-light .ni {
  color: var(--sub) !important;
}
body.theme-light .ni:hover {
  background: rgba(37, 99, 235, 0.05) !important;
}
body.theme-light .ni.on, body.theme-light .ni.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.05)) !important;
  color: var(--p) !important;
  box-shadow: inset 3px 0 0 var(--p) !important;
}
body.theme-light .inp {
  background: #FFFFFF !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  color: var(--txt) !important;
}
body.theme-light .inp:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
body.theme-light select.inp option {
  background: #FFFFFF !important;
  color: var(--txt) !important;
}
body.theme-light .diag-card, body.theme-light .nb-note-card {
  background: #FFFFFF !important;
  border-color: var(--brd) !important;
}
body.theme-light .rev-card, body.theme-light .ec {
  background: #FFFFFF !important;
  border: 1px solid var(--brd) !important;
}
body.theme-light .ni-ic {
  color: var(--mut) !important;
}
body.theme-light .ni.on .ni-ic, body.theme-light .ni.active .ni-ic {
  color: var(--p) !important;
}
body.theme-light .sb-logo-tx {
  color: var(--txt) !important;
}
body.theme-light .nav-lbl {
  color: var(--txt) !important;
}

/* ─── TYPOGRAPHY BRAND UPGRADES ─── */
/* Hero titles, landing page, vision statements, major section headings */
.ob-card h1, .auth-wordmark, .dash-hero-greeting, .ls-logo, .landing-hero-title, .vision-heading, .ob-card-title, .chapter-title-hero, #sp-wordmark > div, #loading-screen h1, #loading-screen h2 {
  font-family: var(--f-hero) !important;
}

/* Notebook writing areas, editable notes, flashcards, student writing areas */
.notebook-screen, .nb-note-card, .nb-point, .nb-note-title, .nb-note-sub, .nb-gen-area, .notebook-editor, textarea, .flashcard-face, .lesson-notes-content, .note-writing-area {
  font-family: var(--f-notes) !important;
}

/* Code, technical snippets, developer workspace, terminal-style outputs */
.nb-formula, code, pre, .terminal-log, .code-snippet, .focus-terminal-input, .telemetry-log, .monaco-editor-like {
  font-family: var(--f-mono) !important;
}

/* Timers, statistics, XP values, analytics metrics, performance numbers */
.timer-display, .timer-widget, .xp-float-val, .sb-ulvl, .profile-stat-pill .psn, .analytics-num, .streak-num, .backlog-num, .stat-val, .progress-metric, #timer-display {
  font-family: var(--f-num) !important;
}

/* Achievements, legendary streaks, certificates, milestone banners */
.cert-name, .cert-title, .cert-topic, .milestone-banner, .streak-milestone, .achievement-title {
  font-family: var(--f-achievement) !important;
}

/* Subtle background grid texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.005) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: -1;
}