/*
 * style.css — Neural Lens SPA
 * ══════════════════════════════════════════════════════════
 *
 * Palette: Charcoal (#111318) · Off-white (#f6f5f2) · Crimson (#c41c1c)
 * Fonts:   Lora (headings/body) · DM Sans (UI labels, nav, buttons)
 *
 * Architecture:
 *  1. CSS Custom Properties
 *  2. Reset & Base
 *  3. SPA Shell — Sidebar + Main layout
 *  4. Page Transitions (Fade & Slide)
 *     ↳ How CSS page transitions work (explained inline)
 *  5. Typography & Prose
 *  6. Buttons
 *  7. Topic Page Components
 *  8. Attention Heatmap
 *  9. Interactive Lab
 * 10. Video Library & Modal
 * 11. Quiz
 * 12. Responsive
 */


/* ══════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ══════════════════════════════════════════════════════════ */
:root {
  /* Palette */
  --ink:         #111318;
  --ink-2:       #3a3d47;
  --ink-3:       #7c808d;
  --bg:          #f6f5f2;
  --surface:     #ffffff;
  --surface-2:   #f0efe9;
  --accent:      #c41c1c;
  --accent-dim:  rgba(196, 28, 28, 0.08);
  --accent-2:    #9b1616;
  --border:      #e2e1db;
  --border-2:    #cbc9c2;
  --green:       #166534;
  --green-bg:    rgba(22, 101, 52, 0.07);
  --red:         #b91c1c;
  --red-bg:      rgba(185, 28, 28, 0.07);

  /* Sidebar */
  --sb-w:        256px;
  --sb-bg:       #111318;
  --sb-text:     #8a8f9c;
  --sb-text-h:   #d0d3da;
  --sb-border:   rgba(255,255,255,0.06);

  /* Fonts */
  --serif: 'Lora', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --mono:  'Courier New', Courier, monospace;

  /* Geometry */
  --r:  3px;          /* border radius */
  --pw: 740px;        /* max prose width */

  /* Shadows */
  --sh1: 0 1px 3px rgba(0,0,0,0.06);
  --sh2: 0 3px 12px rgba(0,0,0,0.09);
  --sh3: 0 8px 32px rgba(0,0,0,0.13);
  --sh4: 0 20px 60px rgba(0,0,0,0.18);

  /* Transition curve — used everywhere */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t:    220ms;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --ink:       #e8eaf0;
  --ink-2:     #9aa0b0;
  --ink-3:     #545b6d;
  --bg:        #0d0f14;
  --surface:   #141720;
  --surface-2: #1b1e28;
  --accent:    #ef4444;
  --accent-dim:rgba(239,68,68,0.1);
  --accent-2:  #dc2626;
  --border:    #1f2330;
  --border-2:  #2a2f3e;
  --sh1: 0 1px 3px rgba(0,0,0,0.3);
  --sh2: 0 3px 12px rgba(0,0,0,0.4);
  --sh3: 0 8px 32px rgba(0,0,0,0.5);
  --sh4: 0 20px 60px rgba(0,0,0,0.65);
}


/* ══════════════════════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { font-size: 16px; scroll-behavior: smooth; }
body  {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a    { color: var(--accent); text-decoration: none; }
img  { display: block; max-width: 100%; }
ul   { list-style: none; }
code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1px 5px;
}


/* ══════════════════════════════════════════════════════════
   3. SPA SHELL
   ══════════════════════════════════════════════════════════ */

/* ── Sidebar ── */
#sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sb-w); z-index: 200;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex; flex-direction: column;
  /* Mobile: translate off-screen by default */
  transition: transform var(--t) var(--ease);
}

/* Brand strip */
.sb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 22px 18px 16px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-logo {
  width: 28px; height: 28px; flex-shrink: 0; color: var(--accent);
}
.sb-brand-name {
  display: block; font-family: var(--serif);
  font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: -0.2px;
}
.sb-brand-sub {
  display: block; font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.6px; color: var(--sb-text); margin-top: 1px;
}

/* Nav scroll area */
.sb-nav {
  flex: 1; overflow-y: auto; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.sb-nav::-webkit-scrollbar { width: 3px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* Nav buttons — shared base */
.nav-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 11px; border-radius: var(--r);
  background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.84rem; font-weight: 500;
  color: var(--sb-text); text-align: left;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-btn:hover  { background: rgba(255,255,255,0.06); color: var(--sb-text-h); }
.nav-btn.active {
  background: rgba(196,28,28,0.15);
  color: var(--accent);
}
[data-theme="dark"] .nav-btn.active { background: rgba(239,68,68,0.13); }

/* Child nav items (topic sub-items) */
.nav-child { padding-left: 22px; font-size: 0.82rem; }

/* Collapsible group */
.nav-group { margin: 4px 0; }
.nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 11px; border-radius: var(--r);
  background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.84rem; font-weight: 500;
  color: var(--sb-text);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-group-toggle:hover { background: rgba(255,255,255,0.06); color: var(--sb-text-h); }
.ngt-left { display: flex; align-items: center; gap: 9px; }
.ngt-left svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-badge {
  font-size: 0.65rem; font-weight: 700; color: var(--accent);
  background: rgba(196,28,28,0.15);
  border-radius: 9px; padding: 1px 6px; margin-left: 4px;
}
.caret {
  width: 14px; height: 14px; flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.nav-group-toggle[aria-expanded="false"] .caret { transform: rotate(-90deg); }

/* Animated children collapse */
.nav-children {
  overflow: hidden;
  max-height: 400px;  /* open state — large enough for all children */
  transition: max-height 0.3s var(--ease), opacity 0.2s ease;
  opacity: 1;
}
.nav-children.collapsed { max-height: 0; opacity: 0; }

/* Sidebar footer */
.sb-footer {
  padding: 10px 8px 14px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}
#theme-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 11px; border-radius: var(--r);
  background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  color: var(--sb-text);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
#theme-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
#theme-btn:hover { background: rgba(255,255,255,0.06); color: var(--sb-text-h); }
.icon-moon   { display: none; }
.moon-lbl    { display: none; }
[data-theme="dark"] .icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: block; }
[data-theme="dark"] .sun-lbl   { display: none; }
[data-theme="dark"] .moon-lbl  { display: inline; }

/* ── Main content area ── */
#main {
  margin-left: var(--sb-w);
  min-height: 100vh;
  /* This is where pages mount — position:relative needed for stacking */
  position: relative;
}

/* ── Mobile header (hidden on desktop) ── */
#topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: 50px; z-index: 190;
  background: var(--sb-bg);
  border-bottom: 1px solid var(--sb-border);
  align-items: center; justify-content: space-between;
  padding: 0 14px;
}
.topbar-title { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; color: #fff; }
#menu-btn, .topbar-theme {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: none; cursor: pointer; color: var(--sb-text);
}
#menu-btn svg, .topbar-theme svg { width: 18px; height: 18px; }

/* Overlay behind mobile sidebar */
#overlay {
  display: none; position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,0.55);
  transition: opacity var(--t) ease;
}
#overlay.visible { display: block; }


/* ══════════════════════════════════════════════════════════
   4. PAGE TRANSITIONS — Fade & Slide

   EXPLANATION (for your professor):
   ──────────────────────────────────
   Every .page element is hidden by default using:
     display: none;
     opacity: 0;
     transform: translateY(12px);

   When switchPage() runs, it removes .active from the old
   page (hiding it instantly) and adds .active to the new one.

   The .page.active rule makes the page visible AND starts the
   CSS animation @keyframes slideIn. This animation runs for
   320ms and uses cubic-bezier(0.4, 0, 0.2, 1) — a curve that
   starts fast and decelerates, mimicking natural motion.

   There is intentionally NO exit animation. A simultaneous
   exit+entry would feel cluttered. The old page disappears
   instantly; the new page "slides up" into the space. This
   asymmetry is the same pattern used by iOS, Material Design,
   and most production SPAs.
   ══════════════════════════════════════════════════════════ */

.page {
  display: none;
  opacity: 0;
  transform: translateY(12px);
}

.page.active {
  display: block;
  animation: slideIn 320ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page content wrapper */
.page-wrap {
  max-width: 840px;
  margin: 0 auto;
  padding: 52px 48px 80px;
}
.page-wrap--narrow {
  max-width: 700px;
}


/* ══════════════════════════════════════════════════════════
   5. TYPOGRAPHY & PROSE
   ══════════════════════════════════════════════════════════ */

.pg-eyebrow {
  display: block; font-size: 0.67rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}

.pg-h1 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  font-weight: 600; line-height: 1.2; color: var(--ink);
  margin-bottom: 20px;
}
.pg-h1 em { color: var(--accent); font-style: italic; }

.pg-lead {
  font-size: 1.05rem; line-height: 1.75; color: var(--ink-2);
  max-width: 630px; margin-bottom: 44px;
}

.page-wrap h2 {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
  color: var(--ink); margin: 36px 0 12px;
}
.page-wrap h2:first-of-type { margin-top: 0; }

.page-wrap p {
  font-size: 0.97rem; line-height: 1.75; color: var(--ink-2);
  max-width: var(--pw); margin-bottom: 16px;
}

/* Callout box */
.callout {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  padding: 14px 18px; margin: 24px 0;
  font-size: 0.93rem; line-height: 1.68; color: var(--ink-2);
  border-radius: 0 var(--r) var(--r) 0;
}
.callout strong { color: var(--accent); font-weight: 600; }
.callout--warn { border-left-color: #b45309; background: rgba(180, 83, 9, 0.07); }
.callout--warn strong { color: #b45309; }

/* Step list */
.step-list { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.step-item {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 0.93rem; line-height: 1.7; color: var(--ink-2);
}
.step-item strong { color: var(--ink); }
.step-n {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 0.76rem; font-weight: 700; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════
   6. BUTTONS
   ══════════════════════════════════════════════════════════ */

.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
  color: #fff; background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r);
  padding: 9px 22px; cursor: pointer;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(196,28,28,0.3);
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
  color: var(--accent); background: transparent;
  border: 1px solid var(--accent); border-radius: var(--r);
  padding: 9px 22px; cursor: pointer;
  transition: background var(--t) var(--ease);
}
.btn-ghost:hover { background: var(--accent-dim); }

/* Page bottom nav (prev/next) */
.page-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 52px; padding-top: 28px;
  border-top: 1px solid var(--border);
  gap: 12px; flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════
   7. TOPIC PAGE COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* Embedded video */
.topic-video { margin-top: 44px; }
.tv-eyebrow {
  font-size: 0.67rem; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
/* Responsive 16:9 iframe wrapper */
.video-responsive {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r); overflow: hidden; background: #000;
  box-shadow: var(--sh3);
}
.video-responsive iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}
.tv-caption {
  font-size: 0.8rem; color: var(--ink-3); margin-top: 9px; font-style: italic;
}

/* Intro home cards */
.home-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 36px 0 32px;
}
.home-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px 18px; cursor: pointer;
  box-shadow: var(--sh1); position: relative;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.home-card:hover {
  transform: translateY(-3px); box-shadow: var(--sh2);
  border-color: var(--border-2);
}
.hc-num {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
  color: var(--border); line-height: 1; margin-bottom: 10px;
}
.home-card h3 {
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
  color: var(--ink); margin-bottom: 8px;
}
.home-card p { font-size: 0.84rem; color: var(--ink-2); margin: 0 0 14px; line-height: 1.6; }
.hc-arrow {
  font-size: 1rem; color: var(--accent);
  transition: transform var(--t) var(--ease);
}
.home-card:hover .hc-arrow { transform: translateX(4px); }
.home-footer-row { display: flex; gap: 12px; flex-wrap: wrap; }


/* ══════════════════════════════════════════════════════════
   8. ATTENTION HEATMAP
   ══════════════════════════════════════════════════════════ */
.heatmap-box { margin: 18px 0 28px; }
.heatmap-sent {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline;
  font-family: var(--serif); font-size: 1.3rem; line-height: 2;
  user-select: none;
}
/* Base word token */
.hw {
  display: inline-block; padding: 2px 5px; border-radius: 3px;
  cursor: pointer; color: var(--ink);
  transition: opacity 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
/* When a word is hovered: parent adds .hovering → dims all .hw */
.heatmap-sent.hovering .hw  { opacity: 0.15; }
/* Classifications override */
.hw.hw-source { opacity: 1 !important; outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.hw.hw-high   { opacity: 1 !important; background: rgba(196,28,28,0.18); color: var(--ink); }
.hw.hw-mid    { opacity: 0.6 !important; background: rgba(196,28,28,0.07); }
.hw.hw-low    { opacity: 0.15 !important; }
.heatmap-hint { font-size: 0.78rem; color: var(--ink-3); font-style: italic; margin-top: 6px; }


/* ══════════════════════════════════════════════════════════
   9. INTERACTIVE LAB
   ══════════════════════════════════════════════════════════ */

.lab-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 28px; margin-top: 28px;
  box-shadow: var(--sh1);
}
.lab-card-head {
  display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px;
}
.lab-num {
  font-family: var(--serif); font-size: 2.2rem; font-weight: 600;
  color: var(--border); line-height: 1; flex-shrink: 0; padding-top: 3px;
}
.lab-card-head h2 {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  color: var(--ink); margin: 0 0 8px;
}
.lab-card-head p { font-size: 0.9rem; color: var(--ink-2); margin: 0; line-height: 1.65; }

/* Tokenizer */
.tokenizer-ui {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.tok-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.tok-input {
  flex: 1; font-family: var(--mono); font-size: 0.92rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 8px 12px; outline: none;
  transition: border-color var(--t) var(--ease);
}
.tok-input:focus { border-color: var(--accent); }
.tok-count {
  font-size: 0.72rem; font-weight: 600; color: var(--ink-3);
  white-space: nowrap; flex-shrink: 0;
}
.tok-output {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 14px 16px; min-height: 56px; align-items: flex-start;
}
@keyframes chipPop {
  from { opacity: 0; transform: scale(0.85) translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.tok-chip {
  font-family: var(--mono); font-size: 0.81rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 3px 9px; white-space: pre;
  animation: chipPop 0.15s var(--ease) both;
}
.tok-empty { font-size: 0.83rem; color: var(--ink-3); font-style: italic; align-self: center; }
.tok-note  { padding: 9px 16px; font-size: 0.77rem; color: var(--ink-3); font-style: italic; border-top: 1px solid var(--border); }

/* Waterfall */
.waterfall-ui    { display: flex; flex-direction: column; gap: 18px; }
.wf-ctx-wrap     { display: flex; flex-direction: column; gap: 5px; }
.wf-label        { font-size: 0.65rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); }
.wf-sentence     { font-family: var(--mono); font-size: 0.93rem; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; line-height: 1.6; min-height: 42px; }
.wf-chosen       { color: var(--accent); font-weight: 600; }
.wf-stage        { display: flex; gap: 10px; min-height: 78px; align-items: flex-end; flex-wrap: wrap; }
.wf-controls     { display: flex; gap: 10px; }

@keyframes wfFall {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: none; }
}
.wf-col {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  animation: wfFall 0.35s var(--ease) both;
}
.wf-col:nth-child(1) { animation-delay: 0ms; }
.wf-col:nth-child(2) { animation-delay: 75ms; }
.wf-col:nth-child(3) { animation-delay: 150ms; }
.wf-bar-track { height: 54px; display: flex; align-items: flex-end; justify-content: center; width: 74px; }
.wf-bar {
  width: 74px; border-radius: var(--r) var(--r) 0 0;
  background: var(--accent-dim);
  border: 1px solid rgba(196,28,28,0.22); border-bottom: none;
  transition: height 0.48s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.wf-bar.win  { background: rgba(196,28,28,0.13); border-color: var(--accent); }
.wf-chip     { font-family: var(--mono); font-size: 0.8rem; padding: 4px 10px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap; transition: border-color var(--t), color var(--t); }
.wf-chip.win { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.wf-pct      { font-size: 0.72rem; font-weight: 600; color: var(--ink-3); }
.wf-pct.win  { color: var(--accent); }


/* ══════════════════════════════════════════════════════════
   10. VIDEO LIBRARY & MODAL
   ══════════════════════════════════════════════════════════ */

/* Netflix-style grid */
.vlib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  gap: 20px; margin-top: 28px;
}
.vcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  box-shadow: var(--sh1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.vcard:hover { transform: translateY(-4px); box-shadow: var(--sh3); border-color: var(--border-2); }
.vcard-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.vcard-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s var(--ease), filter 0.3s ease;
  filter: brightness(0.88);
}
.vcard:hover .vcard-thumb img { transform: scale(1.05); filter: brightness(0.55); }
.vcard-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.vcard-play div {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(196,28,28,0.88); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.8);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.vcard-play svg { width: 17px; height: 17px; margin-left: 3px; }
.vcard:hover .vcard-play div { opacity: 1; transform: scale(1); }
.vcard-body { padding: 14px 16px 18px; }
.vcard-ch   { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.vcard-body h3 { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; line-height: 1.35; }
.vcard-body p  { font-size: 0.83rem; color: var(--ink-2); margin: 0 0 10px; line-height: 1.55; }
.vcard-tag  { font-size: 0.63rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r); padding: 2px 7px; }

/* Video modal */
.modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity 0.24s var(--ease);
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.80); cursor: pointer; }
.modal-box {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); width: 100%; max-width: 860px;
  box-shadow: var(--sh4); overflow: hidden;
  transform: scale(0.93); transition: transform 0.26s var(--ease);
}
.modal.open .modal-box { transform: scale(1); }
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.modal-ch    { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.modal-title { font-family: var(--serif); font-size: 0.97rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.modal-close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; margin-left: 10px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer; color: var(--ink-3);
  transition: border-color var(--t), color var(--t);
}
.modal-close svg { width: 13px; height: 13px; }
.modal-close:hover { border-color: var(--accent); color: var(--accent); }
.modal-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.modal-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }


/* ══════════════════════════════════════════════════════════
   11. QUIZ
   ══════════════════════════════════════════════════════════ */

#quiz-body { display: flex; flex-direction: column; gap: 18px; }
.q-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px; box-shadow: var(--sh1);
}
.q-text { font-weight: 500; font-size: 0.97rem; color: var(--ink); margin-bottom: 14px; line-height: 1.6; }
.q-opts { display: flex; flex-direction: column; gap: 8px; }
.q-opt {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 15px; cursor: pointer;
  font-family: var(--sans); font-size: 0.89rem; color: var(--ink-2); text-align: left;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.q-opt:hover:not(:disabled)     { border-color: var(--accent); color: var(--ink); background: var(--accent-dim); }
.q-opt.correct { border-color: var(--green); background: var(--green-bg); color: var(--green); font-weight: 500; }
.q-opt.wrong   { border-color: var(--red);   background: var(--red-bg);   color: var(--red); }
.q-opt:disabled { cursor: default; }
.q-fb { margin-top: 12px; font-size: 0.86rem; font-weight: 500; line-height: 1.55; min-height: 18px; }
.q-fb.correct { color: var(--green); }
.q-fb.wrong   { color: var(--red); }

.quiz-result {
  margin-top: 28px; padding: 34px 24px;
  background: var(--accent-dim);
  border: 1px solid rgba(196,28,28,0.18);
  border-radius: var(--r); text-align: center;
}
.qr-score {
  font-family: var(--serif); font-size: 3rem; font-weight: 600;
  color: var(--accent); line-height: 1; margin-bottom: 10px;
}
#qr-msg { font-size: 0.97rem; color: var(--ink-2); margin: 0 0 20px; max-width: 340px; margin-inline: auto; }


/* ══════════════════════════════════════════════════════════
   12. RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  /* Move sidebar off-screen; show mobile header */
  #sidebar   { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  #topbar    { display: flex; }
  #main      { margin-left: 0; padding-top: 50px; }

  .page-wrap { padding: 32px 20px 60px; }
  .home-grid { grid-template-columns: 1fr; }
  .vlib-grid { grid-template-columns: 1fr; }
  .lab-card-head { flex-direction: column; }
  .page-nav  { flex-direction: column; align-items: stretch; }
  .page-nav .btn-primary,
  .page-nav .btn-ghost { text-align: center; justify-content: center; }
  .tok-row   { flex-wrap: wrap; }
  .tok-input { width: 100%; }
}