/* ==========================================================================
   DSA/OS — Stylesheet
   Design language: "the editor and the whiteboard" — a VS-Code-like shell
   (explorer sidebar + tabbed pane) housing whiteboard-style visuals for
   algorithms. Signature element: the live-running array visualizer in the
   hero, styled like a terminal block with a blinking cursor.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* ---- dark (default) palette ---- */
  --bg:            #0B1220;
  --bg-raised:     #101A2E;
  --surface:       #141F38;
  --surface-2:     #1B2844;
  --border:        #263252;
  --border-soft:   #1E2A47;
  --text:          #E7E9F2;
  --text-dim:      #9AA6C4;
  --text-faint:    #6B7594;

  --accent:        #F2B233;   /* terminal amber */
  --accent-ink:    #201502;
  --accent-2:      #4FD1C5;   /* cyan — graphs/trees */
  --accent-3:      #B18CFF;   /* violet — dp/greedy */
  --danger:        #FF6B6B;
  --success:       #52D68A;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.35);
  --sidebar-w: 300px;

  color-scheme: dark;
}

html[data-theme="light"]{
  --bg:            #F3F1E9;
  --bg-raised:     #FBFAF5;
  --surface:       #FFFFFF;
  --surface-2:     #EEEBE0;
  --border:        #DEDACB;
  --border-soft:   #E7E3D6;
  --text:          #1B1A15;
  --text-dim:      #5C5946;
  --text-faint:    #8B8672;

  --accent:        #B4790A;
  --accent-ink:    #FFF7E5;
  --accent-2:      #0E8A80;
  --accent-3:      #6E4FCE;
  --danger:        #C7412F;
  --success:       #1D8F5C;

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; line-height:1.15; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--text-dim); }
a{ color:inherit; }
code, pre, .mono{ font-family:var(--font-mono); }
button{ font-family:var(--font-body); cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---------------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:14px;
  height:60px; padding:0 18px;
  background:var(--bg-raised); border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:17px; white-space:nowrap; }
.brand-mark{
  width:28px; height:28px; border-radius:7px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; color:#0B1220; font-size:13px;
}
.brand small{ font-family:var(--font-mono); font-weight:500; font-size:11px; color:var(--text-faint); }

.hamburger{ display:none; background:none; border:1px solid var(--border); color:var(--text); width:36px; height:36px; border-radius:8px; align-items:center; justify-content:center; }
.hamburger svg{ width:18px; height:18px; }

.global-search{
  flex:1; max-width:440px; position:relative;
}
.global-search input{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:8px 12px 8px 34px; border-radius:8px; font-size:13.5px;
}
.global-search input::placeholder{ color:var(--text-faint); }
.global-search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-faint); }
.search-kbd{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
  border:1px solid var(--border); padding:1px 6px; border-radius:4px;
}
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-2); max-height:340px; overflow:auto; display:none; z-index:80;
}
.search-results.open{ display:block; }
.search-results button{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  background:none; border:0; color:var(--text); padding:10px 14px; text-align:left; font-size:13.5px;
  border-bottom:1px solid var(--border-soft);
}
.search-results button:hover, .search-results button:focus-visible{ background:var(--surface-2); }
.search-results .tag{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); }

.topbar-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.icon-btn{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); display:flex; align-items:center; justify-content:center; position:relative;
}
.icon-btn svg{ width:17px; height:17px; }
.icon-btn:hover{ border-color:var(--accent); }

.xp-pill{
  display:flex; align-items:center; gap:7px; padding:6px 12px 6px 6px; border-radius:20px;
  background:var(--surface); border:1px solid var(--border); font-family:var(--font-mono); font-size:12px;
}
.xp-pill .streak{ display:flex; align-items:center; gap:4px; color:var(--accent); }
.xp-pill .lvl-badge{
  width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-3));
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#0B1220; font-size:11px;
}

/* ------------------------------------------------------------------ app */
.app{ display:flex; min-height:calc(100vh - 60px); }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; border-right:1px solid var(--border);
  background:var(--bg-raised); overflow-y:auto; height:calc(100vh - 60px); position:sticky; top:60px;
  padding:14px 10px 40px;
}
.sidebar-section{ margin-bottom:6px; }
.sidebar-heading{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 8px 6px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint);
}
.nav-link{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:8px;
  background:none; border:0; color:var(--text-dim); font-size:13.5px; text-align:left;
}
.nav-link svg{ width:16px; height:16px; flex-shrink:0; }
.nav-link:hover{ background:var(--surface); color:var(--text); }
.nav-link.active{ background:var(--surface-2); color:var(--text); font-weight:600; box-shadow:inset 2px 0 0 var(--accent); }

.track-group{ margin:6px 0 10px; }
.track-label{ padding:8px 10px 3px; font-size:10.5px; font-family:var(--font-mono); color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.topic-link{
  display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px 7px 18px; border-radius:7px;
  background:none; border:0; color:var(--text-dim); font-size:13px; text-align:left;
}
.topic-link:hover{ background:var(--surface); color:var(--text); }
.topic-link.active{ background:var(--surface-2); color:var(--accent); font-weight:600; }
.topic-check{
  width:14px; height:14px; border-radius:4px; border:1.5px solid var(--border); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.topic-check.done{ background:var(--success); border-color:var(--success); }
.topic-check.done svg{ width:9px; height:9px; color:#08160E; }
.topic-link .og{ margin-left:auto; font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); }

.main{ flex:1; min-width:0; }
.view{ display:none; padding:0; }
.view.active{ display:block; }

.sidebar-backdrop{ display:none; }

/* ---------------------------------------------------------------- hero */
.hero{
  padding:56px 40px 40px; border-bottom:1px solid var(--border);
  display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px;
  color:var(--accent); border:1px solid var(--border); padding:5px 11px; border-radius:20px; margin-bottom:18px;
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.hero h1{ font-size:clamp(30px,4vw,46px); font-weight:800; }
.hero h1 .hl{ color:var(--accent); }
.hero p.lead{ font-size:16px; max-width:52ch; }
.hero-ctas{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:9px; font-weight:600;
  font-size:14px; border:1px solid transparent; transition:transform .12s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-secondary{ background:var(--surface); border-color:var(--border); color:var(--text); }
.btn-ghost{ background:none; border-color:var(--border); color:var(--text-dim); }
.btn-sm{ padding:7px 13px; font-size:12.5px; border-radius:7px; }

.hero-stats{ display:flex; gap:26px; margin-top:30px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-mono); font-size:20px; color:var(--text); }
.hero-stat span{ font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }

/* live visualizer — signature element */
.hero-visual{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-2);
}
.hero-visual-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); }
.hero-visual-head .dots{ display:flex; gap:5px; margin-right:6px; }
.hero-visual-head .dots i{ width:9px; height:9px; border-radius:50%; display:block; }
.hero-visual-head .dots i:nth-child(1){ background:#FF6B6B; }
.hero-visual-head .dots i:nth-child(2){ background:#F2B233; }
.hero-visual-head .dots i:nth-child(3){ background:#52D68A; }
#heroBars{ height:150px; display:flex; align-items:flex-end; gap:3px; }
#heroBars .bar{ flex:1; background:var(--accent-2); border-radius:3px 3px 0 0; transition:height .25s ease, background .2s ease; }
#heroBars .bar.compare{ background:var(--accent); }
#heroBars .bar.sorted{ background:var(--success); }
.hero-visual-caption{ margin-top:12px; font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); display:flex; justify-content:space-between; }

/* ------------------------------------------------------------ sections */
.section{ padding:40px; border-bottom:1px solid var(--border); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.section-head h2{ font-size:22px; }
.eyebrow{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); display:block; margin-bottom:6px; }

.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px;
}
.card h3{ font-size:15px; margin-bottom:6px; }
.card p{ font-size:13px; margin-bottom:10px; }
.badge-row{ display:flex; gap:6px; flex-wrap:wrap; }
.og-badge{
  font-family:var(--font-mono); font-size:10.5px; padding:3px 8px; border-radius:20px; border:1px solid var(--border);
  color:var(--text-dim);
}
.og-badge.time{ color:var(--accent-2); border-color:color-mix(in srgb, var(--accent-2) 40%, var(--border)); }
.og-badge.space{ color:var(--accent-3); border-color:color-mix(in srgb, var(--accent-3) 40%, var(--border)); }

.track-card{ cursor:pointer; }
.track-card .icon{
  width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); margin-bottom:12px; color:var(--accent);
}
.track-card .icon svg{ width:19px; height:19px; }
.track-progress{ height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden; margin-top:12px; }
.track-progress i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }

/* --------------------------------------------------------------- topic */
.topic-header{ padding:34px 40px 0; }
.crumbs{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); margin-bottom:14px; }
.crumbs a{ color:var(--text-faint); }
.crumbs a:hover{ color:var(--accent); }
.topic-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.topic-title-row h1{ font-size:30px; }
.topic-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.diff-dots{ display:inline-flex; gap:3px; align-items:center; }
.diff-dots i{ width:6px; height:6px; border-radius:50%; background:var(--border); }
.diff-dots i.on{ background:var(--accent); }

.topic-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); padding:0 40px; overflow-x:auto; }
.tab-btn{
  background:none; border:0; padding:12px 16px; font-size:13.5px; color:var(--text-dim); white-space:nowrap;
  border-bottom:2px solid transparent; font-weight:500;
}
.tab-btn.active{ color:var(--accent); border-color:var(--accent); font-weight:600; }
.tab-panels{ padding:30px 40px 60px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadein .2s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.analogy-box{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent-2);
  border-radius:var(--radius-md); padding:16px 18px; margin:18px 0;
}
.analogy-box .eyebrow{ color:var(--accent-2); }

.complexity-table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:13.5px; }
.complexity-table th,.complexity-table td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--border-soft); }
.complexity-table th{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; }
.complexity-table td.val{ font-family:var(--font-mono); color:var(--accent-2); }

pre.code-block{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 18px; overflow-x:auto; font-size:12.8px; line-height:1.65; color:var(--text);
}

.lang-tabs{ display:flex; gap:6px; margin-bottom:0; }
.lang-tab{
  background:var(--surface); border:1px solid var(--border); border-bottom:0; color:var(--text-dim);
  padding:8px 14px; font-family:var(--font-mono); font-size:12px; border-radius:8px 8px 0 0;
}
.lang-tab.active{ background:var(--bg-raised); color:var(--accent); }
.code-wrap pre{ border-radius:0 8px 8px 8px; margin:0; }

.list-check{ display:flex; flex-direction:column; gap:10px; }
.list-check li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-dim); }
.list-check li svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--danger); }
.list-check.interview li svg{ color:var(--accent-2); }

/* --------------------------------------------------------------- quiz */
.quiz-card{ max-width:640px; }
.quiz-progress{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); margin-bottom:10px; }
.quiz-q{ font-size:16px; font-weight:600; margin-bottom:16px; }
.quiz-options{ display:flex; flex-direction:column; gap:9px; }
.quiz-opt{
  text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:9px;
  padding:12px 14px; font-size:13.5px; color:var(--text);
}
.quiz-opt:hover{ border-color:var(--accent); }
.quiz-opt.correct{ border-color:var(--success); background:color-mix(in srgb, var(--success) 12%, var(--surface)); }
.quiz-opt.wrong{ border-color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.quiz-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; }
.quiz-result{ text-align:center; padding:30px 10px; }
.quiz-result .score{ font-family:var(--font-mono); font-size:38px; color:var(--accent); }

/* ---------------------------------------------------------- flashcards */
.flash-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; max-width:460px; }
.flashcard{
  width:100%; height:200px; perspective:1200px; cursor:pointer;
}
.flashcard-inner{
  position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d;
}
.flashcard.flipped .flashcard-inner{ transform:rotateY(180deg); }
.flashcard-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
  border:1px solid var(--border); background:var(--surface); font-size:16px; font-weight:600;
}
.flashcard-face.back{ transform:rotateY(180deg); background:var(--surface-2); font-weight:400; font-size:14px; color:var(--text-dim); }
.flash-controls{ display:flex; gap:10px; align-items:center; }
.flash-counter{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }

/* --------------------------------------------------------------- notes */
.notes-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; flex-wrap:wrap; }
.notes-area{
  width:100%; min-height:220px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--text); padding:16px; font-family:var(--font-mono); font-size:13px; resize:vertical;
}
.save-indicator{ font-family:var(--font-mono); font-size:11px; color:var(--success); opacity:0; transition:opacity .3s; }
.save-indicator.show{ opacity:1; }

/* ---------------------------------------------------------- visualizer */
.viz-shell{ display:grid; grid-template-columns:220px 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.viz-controls{ background:var(--bg-raised); border-right:1px solid var(--border); padding:18px; display:flex; flex-direction:column; gap:16px; }
.viz-stage{ background:var(--surface); padding:24px; min-height:380px; display:flex; flex-direction:column; }
.control-group label{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; margin-bottom:8px; }
.select-el, .range-el{ width:100%; }
.select-el{ background:var(--surface); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:7px; font-size:13px; }
.range-el{ accent-color:var(--accent); }
.viz-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.viz-btns .icon-btn{ background:var(--surface); }
#vizArray{ flex:1; display:flex; align-items:flex-end; gap:4px; min-height:260px; }
#vizArray .bar{ flex:1; background:var(--accent-2); border-radius:4px 4px 0 0; display:flex; align-items:flex-end; justify-content:center; color:#08160E; font-family:var(--font-mono); font-size:11px; transition:height .18s ease, background .15s ease; }
#vizArray .bar.compare{ background:var(--accent); }
#vizArray .bar.swap{ background:var(--danger); }
#vizArray .bar.sorted{ background:var(--success); }
#vizArray .bar.pivot{ background:var(--accent-3); }
.viz-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.viz-legend span{ display:flex; align-items:center; gap:6px; }
.viz-legend i{ width:9px; height:9px; border-radius:2px; display:block; }
.viz-status{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); margin-top:14px; min-height:18px; }

.search-viz-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-top:20px; }
.search-viz-row .cell{
  width:42px; height:42px; border:1px solid var(--border); border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-mono); font-size:13px; background:var(--bg-raised); flex-shrink:0;
}
.search-viz-row .cell.mid{ border-color:var(--accent); color:var(--accent); }
.search-viz-row .cell.discard{ opacity:.25; }
.search-viz-row .cell.found{ background:var(--success); color:#08160E; border-color:var(--success); }

/* ------------------------------------------------------------ progress */
.stat-card{ text-align:center; }
.stat-card b{ display:block; font-family:var(--font-mono); font-size:26px; }
.stat-card span{ font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.ring-wrap{ display:flex; align-items:center; gap:22px; }
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; margin-top:14px; }
.badge-tile{ text-align:center; padding:14px 6px; border-radius:12px; border:1px solid var(--border); background:var(--surface); opacity:.35; }
.badge-tile.unlocked{ opacity:1; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.badge-tile .emoji{ font-size:24px; display:block; margin-bottom:6px; }
.badge-tile span{ font-size:10.5px; color:var(--text-dim); }

.leaderboard{ width:100%; border-collapse:collapse; }
.leaderboard th,.leaderboard td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
.leaderboard th{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; color:var(--text-faint); }
.leaderboard tr.you{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.rank-medal{ font-size:15px; }

/* --------------------------------------------------------- companies */
.company-card .co-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.co-logo{ width:34px; height:34px; border-radius:8px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:14px; }

/* ------------------------------------------------------------- chatbot */
.chat-fab{
  position:fixed; bottom:22px; right:22px; z-index:90; width:54px; height:54px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); border:none; box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center;
}
.chat-fab svg{ width:22px; height:22px; }
.chat-panel{
  position:fixed; bottom:88px; right:22px; z-index:90; width:340px; max-width:calc(100vw - 32px); height:440px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
  display:none; flex-direction:column; overflow:hidden;
}
.chat-panel.open{ display:flex; }
.chat-head{ padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.chat-head b{ font-size:13.5px; }
.chat-head span{ font-size:11px; color:var(--text-faint); display:block; }
.chat-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.chat-msg{ max-width:85%; padding:9px 12px; border-radius:10px; font-size:13px; }
.chat-msg.bot{ background:var(--surface-2); align-self:flex-start; border-bottom-left-radius:2px; }
.chat-msg.user{ background:var(--accent); color:var(--accent-ink); align-self:flex-end; border-bottom-right-radius:2px; }
.chat-input-row{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); }
.chat-input-row input{ flex:1; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:9px 11px; color:var(--text); font-size:13px; }
.chat-input-row button{ background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px; width:38px; }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; }
.chat-suggest button{ background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:5px 10px; font-size:11px; color:var(--text-dim); }

/* --------------------------------------------------------------- toast */
.toast-stack{ position:fixed; top:70px; right:20px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.toast{
  background:var(--surface); border:1px solid var(--accent); border-radius:10px; padding:11px 16px;
  font-size:13px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-2); animation:toastIn .25s ease;
  min-width:220px;
}
@keyframes toastIn{ from{ transform:translateX(30px); opacity:0;} to{ transform:none; opacity:1;} }
.toast .xp{ font-family:var(--font-mono); color:var(--accent); font-weight:700; }

/* ------------------------------------------------------------- footer */
footer.site-footer{ padding:30px 40px; color:var(--text-faint); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------------------------------------------------------- utilities */
.flex{ display:flex; }
.gap-8{ gap:8px; }
.mt-16{ margin-top:16px; }
.text-dim{ color:var(--text-dim); }
.hide-mobile{ display:inline-flex; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; padding:36px 22px; }
  .section{ padding:30px 22px; }
  .dash-wrap{ padding:24px 22px 8px; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .topic-header,.tabs,.tab-panels{ padding-left:22px; padding-right:22px; }
  .viz-shell{ grid-template-columns:1fr; }
  .viz-controls{ border-right:0; border-bottom:1px solid var(--border); flex-direction:row; flex-wrap:wrap; }
  .control-group{ flex:1; min-width:140px; }
}
@media (max-width: 760px){
  .hamburger{ display:flex; }
  .global-search{ display:none; }
  .hide-mobile{ display:none; }
  .sidebar{
    position:fixed; left:0; top:60px; bottom:0; z-index:70; transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:var(--shadow-2);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-backdrop{ display:none; position:fixed; inset:60px 0 0 0; background:rgba(0,0,0,.5); z-index:65; }
  .sidebar-backdrop.open{ display:block; }
  .chat-panel{ right:12px; left:12px; width:auto; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .dash-grid{ grid-template-columns:1fr; }
}

.topic-hero-viz{ width:72px; height:72px; border-radius:14px; background:var(--bg-raised); border:1px solid var(--border); padding:10px; flex-shrink:0; }
.topic-title-row .title-flex{ display:flex; gap:16px; align-items:center; }

/* =========================================================================
   DASHBOARD — v2 visual layer
   Signature element: every topic renders as a tiny generative SVG diagram
   (bars / chain / stack / queue / hash grid / tree / graph) instead of a
   plain text tile, so the "map" of the curriculum reads visually.
   ========================================================================= */

body{
  background-image:
    radial-gradient(circle at 1px 1px, var(--border-soft) 1px, transparent 0);
  background-size: 26px 26px;
  background-attachment: fixed;
}

.dash-wrap{ padding:32px 40px 8px; }
.dash-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.dash-greet{ font-size:26px; font-weight:800; font-family:var(--font-display); }
.dash-greet .wave{ display:inline-block; animation:wave 2.4s infinite; transform-origin:70% 70%; }
@keyframes wave{ 0%,60%,100%{transform:rotate(0);} 10%,30%{transform:rotate(14deg);} 20%{transform:rotate(-8deg);} }
.dash-sub{ color:var(--text-faint); font-size:13px; font-family:var(--font-mono); }
.dash-live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; color:var(--accent); border:1px solid var(--border); padding:6px 12px; border-radius:20px; background:var(--surface); }
.dash-live .dot{ width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 1.8s infinite; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.kpi-card{
  background:linear-gradient(165deg, var(--surface) 0%, var(--bg-raised) 100%);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px;
  position:relative; overflow:hidden;
}
.kpi-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, transparent 40%, var(--kpi-glow, transparent) 130%); pointer-events:none; opacity:.5; }
.kpi-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.kpi-icon{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--accent); }
.kpi-icon svg{ width:17px; height:17px; }
.kpi-trend{ font-family:var(--font-mono); font-size:11px; color:var(--success); }
.kpi-num{ font-family:var(--font-mono); font-size:28px; font-weight:700; line-height:1; }
.kpi-label{ font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:6px; }

.dash-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:8px; }
@media (max-width:1080px){ .dash-grid{ grid-template-columns:1fr; } .kpi-grid{ grid-template-columns:repeat(2,1fr); } }

.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.panel-head h3{ font-size:14.5px; margin:0; }
.panel-head .eyebrow{ margin:0; }

.continue-card{ display:flex; gap:16px; align-items:center; }
.continue-viz{ width:96px; height:64px; flex-shrink:0; border-radius:12px; background:var(--bg-raised); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.continue-info{ flex:1; min-width:0; }
.continue-info h4{ margin:0 0 4px; font-size:15.5px; }
.continue-info p{ margin:0 0 10px; font-size:12.5px; }

.chart-row{ display:flex; align-items:flex-end; gap:8px; height:110px; margin-top:6px; }
.chart-bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.chart-bar{ width:100%; max-width:30px; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 40%, transparent)); min-height:4px; }
.chart-bar.today{ background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); }
.chart-day{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint); }

.ring-row{ display:flex; align-items:center; gap:18px; }
.ring-num{ font-family:var(--font-mono); font-size:20px; font-weight:700; }
.ring-svg-wrap{ position:relative; display:inline-flex; }
.ring-svg-wrap .ring-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.ring-center b{ font-family:var(--font-mono); font-size:16px; }
.ring-center span{ font-size:9px; color:var(--text-faint); text-transform:uppercase; }

.mini-badge-row{ display:flex; gap:8px; flex-wrap:wrap; }
.mini-badge{ width:40px; height:40px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:18px; opacity:.3; }
.mini-badge.unlocked{ opacity:1; border-color:var(--accent); }

.mini-leader{ display:flex; flex-direction:column; gap:8px; }
.mini-leader-row{ display:flex; align-items:center; gap:10px; font-size:12.5px; padding:6px 8px; border-radius:8px; }
.mini-leader-row.you{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.mini-leader-row .r{ width:20px; font-family:var(--font-mono); color:var(--text-faint); }
.mini-leader-row .n{ flex:1; }
.mini-leader-row .x{ font-family:var(--font-mono); color:var(--accent-2); }

/* ---------------------------------------------------------- topic viz */
.topic-viz-svg{ width:100%; height:100%; display:block; }
.topic-viz-svg .viz-base{ fill:var(--surface-2); }
.topic-viz-svg .viz-accent{ fill:var(--accent); }
.topic-viz-svg .viz-accent2{ fill:var(--accent-2); }
.topic-viz-svg .viz-node{ fill:var(--surface-2); stroke:var(--border); stroke-width:1.5; }
.topic-viz-svg .viz-line{ stroke:var(--border); stroke-width:1.6; }

.explore-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ font-family:var(--font-mono); font-size:11.5px; padding:7px 14px; border-radius:20px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); }
.chip.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }

.topic-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.topic-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  cursor:pointer; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; position:relative;
}
.topic-tile:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-2); }
.topic-tile .tile-viz{ height:88px; background:
    linear-gradient(180deg, transparent, var(--bg-raised) 120%), var(--bg-raised);
  border-bottom:1px solid var(--border); padding:8px; }
.topic-tile .tile-body{ padding:14px 16px 16px; }
.topic-tile h4{ margin:0 0 6px; font-size:14.5px; }
.topic-tile .tile-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.topic-tile .tile-status{
  position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border);
}
.topic-tile .tile-status.done{ background:var(--success); border-color:var(--success); }
.topic-tile .tile-status.done svg{ width:12px; height:12px; color:#08160E; }
.topic-tile .tile-status svg{ width:11px; height:11px; color:var(--text-faint); }
.topic-tile .tile-full{ position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:9px; color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, var(--surface)); border:1px solid var(--accent); padding:2px 6px; border-radius:10px; }