/* HCAI Engine — Theme CSS v3 (Warm Playful Primary School) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ═══════════════════ TOKENS ═══════════════════ */
:root {
  --bg: #fffbeb;
  --bg2: #fef3c7;
  --surface: #ffffff;
  --border: #fde68a;
  --text: #1e293b;
  --muted: #64748b;
  --accent: #f97316;
  --accent-lt: rgba(249,115,22,.12);
  --teal: #10b981;
  --teal-lt: #d1fae5;
  --purple: #8b5cf6;
  --blue: #3b82f6;
  --blue-lt: #dbeafe;
  --red: #ef4444;
  --red-lt: rgba(239,68,68,.08);
  --green: #10b981;
  --green-lt: rgba(16,185,129,.08);
  --yellow: #eab308;
  --pink: #ec4899;
  --orange: #f97316;
  --amber: #f97316;
  --amber-lt: #fff7ed;
  --r: 16px;
  --sh: 0 2px 8px rgba(30,41,59,.08);
  --sh-md: 0 8px 32px rgba(30,41,59,.12),0 2px 8px rgba(30,41,59,.06);
  --sh-lg: 0 20px 60px rgba(30,41,59,.18),0 4px 16px rgba(30,41,59,.08);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html,body { height:100%; overflow:hidden }

body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  background-image:
    radial-gradient(circle, rgba(249,115,22,.04) 1px, transparent 1px),
    radial-gradient(ellipse at 15% 60%, rgba(16,185,129,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(59,130,246,.08) 0%, transparent 50%);
  background-size: 28px 28px, 100% 100%, 100% 100%;
  display: flex; flex-direction: column;
}

/* ═══════════════════ TOUCH TARGETS ═══════════════════
   The programme ships tablets at 2–3 students per device, so every control is
   finger-driven. WCAG 2.5.5 asks for 44×44 CSS px; the chrome shipped 17×19
   (header back), 28×28 (notes close) and 34×32 (fullscreen).

   `--tap` is the floor. It is applied as min-width/min-height so it CLAMPS the
   deploy-local theme forks (theme-camp / theme-thcs / theme-tieuhoc restate
   these rules with explicit width/height — min-* still wins) without any of
   them needing to be edited.

   The icons keep their old visual size (--tap-icon). Only the hit box grows,
   and the bars absorb it by giving back the padding the smaller buttons
   needed — so the header stays 50px and the slide does not rescale. */
:root {
  --tap: 44px;       /* WCAG 2.5.5 minimum target */
  --tap-icon: 18px;  /* visual glyph size — unchanged from the old character */
}

/* ═══════════════════ HEADER ═══════════════════ */
.hdr {
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
  border-bottom: 2px solid var(--border);
  /* 3px (was 6px) + a 44px control = the same 50px header as before the
     touch-target fix, so the stage keeps its height and nothing rescales. */
  padding: 3px 18px; display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; gap: 10px;
}
/* The header back button previously had NO rule at all — it was a default
   <button> around a '←' character, measuring 17×19. */
.hdr-back {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap, 44px); min-height: var(--tap, 44px);
  padding: 0; flex-shrink: 0;
  background: transparent; border: 1.5px solid transparent; border-radius: 10px;
  color: var(--text); cursor: pointer; transition: background .2s, border-color .2s;
}
.hdr-back:hover { background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.25) }

/* Chrome icons: fixed visual size, independent of the button's hit box. */
.hdr-back .lucide, .fs-btn .lucide, .notes-toggle .lucide, .notes-close .lucide {
  width: var(--tap-icon, 18px); height: var(--tap-icon, 18px);
  stroke-width: 2; flex-shrink: 0;
}
.hdr-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden }
.hdr-badge {
  background: linear-gradient(135deg, var(--accent), #ea580c);
  color: white; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
  font-size: .68em; letter-spacing: .06em; padding: 3px 8px;
  border-radius: 6px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(249,115,22,.28);
  flex-shrink: 0;
}
.hdr-title { font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; font-size: .92em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.hdr-right { display: flex; align-items: center; gap: 8px }
.prog-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 120px }
.prog-bar { height: 4px; background: rgba(249,115,22,.12); border-radius: 99px; overflow: hidden }
.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ea580c);
  border-radius: 99px; transition: width .45s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 6px rgba(249,115,22,.35);
}
.prog-label { font-size: .62em; color: var(--muted); text-align: right; font-family: 'Nunito', system-ui, sans-serif }
.timer { font-family: 'Nunito', monospace; font-size: 1.1em; font-weight: 800; color: var(--accent); letter-spacing: .04em; text-shadow: 0 0 8px rgba(249,115,22,.18); flex-shrink: 0 }
.fs-btn { background: rgba(249,115,22,.08); border: 1.5px solid rgba(249,115,22,.25); color: var(--text); padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: .88em; transition: all .2s; min-height: var(--tap, 44px); min-width: var(--tap, 44px); display: flex; align-items: center; justify-content: center }
.fs-btn:hover { background: rgba(249,115,22,.18) }

/* Hide font theme selector on narrow viewports — not essential for presentation */
@media (max-width: 1100px) {
  .hdr-right .fs-btn[style*="Lexend"] { display: none }
  .prog-wrap { min-width: 90px }
}
@media (max-width: 900px) {
  .hdr-title { display: none }
  .prog-label { display: none }
}

/* ═══════════════════ STAGE & SLIDE ═══════════════════ */
.stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}

.slide {
  background: var(--surface); border-radius: 24px;
  box-shadow: 0 20px 60px rgba(30,41,59,.12), 0 4px 16px rgba(30,41,59,.06), 0 0 0 1px rgba(249,115,22,.08);
  width: 1280px; height: 720px;
  padding: 22px 40px 18px;
  display: none; flex-direction: column; justify-content: flex-start;
  overflow: hidden; position: relative;
  flex-shrink: 0;
  transform-origin: center center;
  font-size: 20px;
}
.slide.active { display: flex }
.slide.measuring { overflow: visible !important }
.slide.cv { justify-content: center; align-items: center }
/* Boxes on cover slides (reflection prompts) — frosted quote card */
.slide.cv .box {
  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
  border: 1px solid rgba(249,115,22,.15);
  border-radius: 16px; padding: 20px 32px;
  text-align: center; max-width: 720px;
  font-size: 1.4em; line-height: 1.7; color: var(--text);
  box-shadow: 0 4px 20px rgba(30,41,59,.06);
}
.slide.cv .box::before {
  display: none;
}
.slide.cv .box-teal, .slide.cv .box-blue, .slide.cv .box-green,
.slide.cv .box-amber, .slide.cv .box-red {
  background: rgba(255,255,255,.7);
}
/* Pin header (tag + h2 + rule) to top; slide-body centers content in remaining space */
.slide-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; gap: 10px; width: 100% }

/* Sparse slides: few/short content — larger text, tighter vertical centering */
.slide.sparse .slide-body { align-items: center; text-align: center }
.slide.sparse .slide-body .box { font-size: 1.8em; max-width: 900px; text-align: center }
.slide.sparse .slide-body .grade-content { width: 100%; max-width: 900px }
/* Sparse slides without slide-body (flow, process, etc.) */
.slide.sparse:not(:has(.slide-body)) { justify-content: center; align-items: center }
.slide.sparse .flow { font-size: 1.5em }

/* Side image for sparse slides: right-side decorative photo */
.slide.has-side-img { flex-direction: row !important; gap: 0 }
.slide.has-side-img .slide-main { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; padding-right: 20px }
.slide.has-side-img .slide-side-img {
  width: 38%; flex-shrink: 0; border-radius: 0 20px 20px 0;
  overflow: hidden; position: relative;
}
.slide.has-side-img .slide-side-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.slide.has-side-img .slide-side-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.15) 0%, transparent 40%);
}
/* When sparse + side-img, center the main content and strip box styling */
.slide.sparse.has-side-img .slide-main { justify-content: center }
.slide.sparse.has-side-img .slide-body { align-items: flex-start; text-align: left }
.slide.sparse.has-side-img .slide-body .box {
  text-align: left; max-width: none;
  background: none; border: none; box-shadow: none;
  font-size: 1.9em; color: var(--text); line-height: 1.6; padding: 0;
}
.slide.sparse.has-side-img .slide-body .box::before { display: none }

/* ─── IMAGE-PAIR: inductive mode ─── */
.img-card.inductive { background: white; box-shadow: 0 4px 14px rgba(0,0,0,.08) }
.img-card.inductive img { flex: 1; min-height: 140px; object-fit: cover }
/* Illustrations: show whole subject, letterbox instead of crop */
.img-card.inductive img.contain { object-fit: contain; background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%); padding: 8px }
.img-card img.contain { object-fit: contain; background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%); padding: 8px }
.img-card.inductive { min-height: 185px }
.img-card.inductive .img-inductive-label { padding: 10px; font-size: 1.05em }
.img-card.inductive .img-inductive-label {
  padding: 10px 10px 4px; text-align: center;
  font-size: 1.05em; font-weight: 700; color: var(--navy);
  background: rgba(255,255,255,.95);
}
/* Behavior hint: neutral description of what the character is doing,
 * shown below the label so kids reason from behavior — no color spoiler. */
.img-card.inductive .img-inductive-hint {
  padding: 0 12px 10px; text-align: center;
  font-size: .92em; font-weight: 500; color: var(--muted);
  background: rgba(255,255,255,.95); line-height: 1.35;
  font-style: italic;
}
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }

.conclusion-strip {
  width: 90%; max-width: 900px; margin: 6px auto 0;
  padding: 0 24px; border-radius: 12px;
  font-size: 1.3em; font-weight: 800; text-align: center;
  line-height: 1.25;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .4s ease, max-height .4s ease, padding .4s ease;
}
.conclusion-strip.revealed { opacity: 1; max-height: 150px; padding: 12px 24px }
.conclusion-strip.nature { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; border: 3px solid #10b981 }
.conclusion-strip.manmade { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4338ca; border: 3px solid #6366f1 }
.conclusion-strip.amber { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border: 3px solid #f59e0b }

/* ─── REVEAL BOX sizing (responsive to slide context) ─── */
.reveal-box { font-size: 1.52em }
.slide.has-side-img .reveal-box { font-size: 1.15em; padding: 10px 14px }
.slide.has-side-img .slide-body:has(.reveal-box ~ .reveal-box ~ .reveal-box) .reveal-box { font-size: 1em; padding: 8px 12px }

/* ─── CURSOR AFFORDANCES (only truly interactive elements show pointer) ─── */
.slide button, .slide a, .slide select,
.slide .mcq-o, .slide .poll-card, .slide .card-tap-card,
.slide .img-card.guess, .slide .reveal-btn,
.slide .story-next-btn, .slide .chip, .slide .checklist-item,
.slide .drag-chip, .slide .sort-item { cursor: pointer }

/* ─── REVEAL GATE (inquiry: pose question, reveal on click) ─── */
.reveal-prompt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 48px 32px; text-align: center;
  flex: 1; min-height: 0;
}
.reveal-prompt.hidden { display: none }
.reveal-prompt-text {
  font-size: 2.3em; font-weight: 700; color: var(--navy);
  line-height: 1.25; letter-spacing: -0.01em; max-width: 1000px;
}
.reveal-btn {
  padding: 16px 36px; font-size: 1.3em; font-weight: 700; letter-spacing: 0.01em;
  border-radius: 14px; border: none; cursor: pointer;
  background: var(--accent, #10b981); color: #fff;
  box-shadow: 0 4px 16px rgba(16,185,129,.28);
  font-family: inherit;
  transition: transform .15s, box-shadow .15s;
}
.reveal-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 24px rgba(16,185,129,.38);
}
.reveal-gate { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0 }
.reveal-gate.hidden { display: none !important }

/* ─── GUARDRAILS: overflow + density ─── */
.slide img { max-width: 100% }
.slide table { max-width: 100%; table-layout: fixed; word-break: break-word }
.mcq-o { max-height: 5em; overflow: hidden }
.poll-card .poll-label { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }

.slide > * { min-height: 0 }
.slide::after {
  content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px;
  background: radial-gradient(circle at top right, rgba(249,115,22,.06) 0%, transparent 65%);
  border-radius: 0 22px 0 0; pointer-events: none;
}
.slide::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 5px;
  background: linear-gradient(180deg, var(--accent), var(--pink), rgba(249,115,22,.2));
  border-radius: 0 5px 5px 0;
  box-shadow: 2px 0 12px rgba(249,115,22,.12);
}

/* ═══════════════════ TYPOGRAPHY ═══════════════════ */
.s-tag {
  font-family: 'Nunito', system-ui, sans-serif; font-size: .78em; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 5px; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(249,115,22,.08), rgba(59,130,246,.04));
  padding: 4px 14px 4px 10px; border-radius: 8px;
}
.s-tag .lucide { width: 14px; height: 14px; stroke: var(--accent) }
.slide h1 { font-family: 'Nunito', 'Inter', system-ui, sans-serif; font-size: 4.4em; font-weight: 900; color: var(--text); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 14px }
.slide h2 { font-family: 'Nunito', 'Inter', system-ui, sans-serif; font-size: 3.2em; font-weight: 800; color: var(--text); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 10px }
.slide-sub { font-size: 1.9em; color: var(--muted); line-height: 1.45; max-width: 800px; font-weight: 500 }
.slide.cv .slide-sub { font-size: 1.7em; color: var(--muted); line-height: 1.5; letter-spacing: 0; font-weight: 500 }
.hero-icon-wrap { font-size: 4.5em; line-height: 1; margin-bottom: 10px; display: flex; justify-content: center }
/* Hero icon on cover: tinted circle background */
.slide.cv .ic-xl {
  background: linear-gradient(135deg, rgba(249,115,22,.1), rgba(59,130,246,.08));
  border-radius: 50%; padding: 16px;
  box-shadow: 0 4px 20px rgba(249,115,22,.12);
}
.rule { width: 48px; height: 4px; background: linear-gradient(90deg, var(--accent), var(--pink)); border-radius: 99px; margin: 5px 0 12px; box-shadow: 0 2px 6px rgba(249,115,22,.2) }
.title-line { width: 64px; height: 5px; background: linear-gradient(90deg, var(--accent), var(--pink)); border-radius: 99px; margin: 4px auto; box-shadow: 0 2px 8px rgba(249,115,22,.25) }

/* ═══════════════════ SECTION-BREAK · ACTIVITY MODE ═══════════════════ */
/* Dedicated "go do this offline activity" slide. Big icon + title + timing
 * badge + instruction + huge CTA button. Lifts the activity hand-off out of
 * a cramped pill on the previous slide. */
.cv-activity-wrap {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 18px; width: 100%; max-width: 900px; margin: 0 auto;
}
.cv-activity-wrap h2 { font-size: 3em; max-width: 100%; }
.activity-timing {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(245,158,11,.12));
  color: var(--accent); border: 2px solid rgba(249,115,22,.3);
  padding: 8px 18px; border-radius: 99px;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.5em;
  box-shadow: 0 2px 8px rgba(249,115,22,.12);
}
.activity-timing .lucide { width: 22px; height: 22px; stroke-width: 2.5 }
.activity-instruction {
  font-size: 1.55em; color: var(--text); line-height: 1.5;
  max-width: 800px; font-weight: 500; margin: 4px 0;
}
.activity-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--accent), #ea580c);
  color: white; text-decoration: none;
  padding: 18px 36px; border-radius: 16px;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.7em;
  box-shadow: 0 8px 24px rgba(249,115,22,.32), 0 2px 6px rgba(30,41,59,.08);
  transition: transform .2s, box-shadow .2s;
  margin-top: 10px;
}
.activity-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(249,115,22,.42), 0 3px 8px rgba(30,41,59,.1) }
.activity-cta:active { transform: translateY(0); }
.activity-cta .lucide { width: 28px; height: 28px; stroke: white; stroke-width: 2.5 }

/* ═══════════════════ LUCIDE HELPERS ═══════════════════ */
.ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }
.ic .lucide { display: block }
.ic-sm .lucide { width: 18px; height: 18px }
.ic-md .lucide { width: 24px; height: 24px }
.ic-lg .lucide { width: 36px; height: 36px }
.ic-xl .lucide { width: 52px; height: 52px }
.ic-teal .lucide { stroke: var(--teal) }
.ic-blue .lucide { stroke: var(--blue) }
.ic-amber .lucide { stroke: var(--amber) }
.ic-green .lucide { stroke: var(--green) }
.ic-red .lucide { stroke: var(--red) }
.ic-navy .lucide { stroke: var(--text) }
.ic-white .lucide { stroke: white }
.ic-muted .lucide { stroke: var(--muted) }

/* ═══════════════════ REVEAL ═══════════════════ */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform }
.rv.show { opacity: 1; transform: translateY(0) }
/* Review mode: show all content immediately, no progressive reveal */
body.review-mode .rv { opacity: 1 !important; transform: none !important; transition: none !important }
.rv.from-left { transform: translateX(-18px) }
.rv.from-left.show { transform: translateX(0) }
.rv.pop { transform: scale(.92) translateY(12px) }
.rv.pop.show { transform: scale(1) translateY(0) }

/* ═══════════════════ REVEAL HINT ═══════════════════ */
.reveal-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  color: var(--accent); opacity: .6;
  animation: revealPulse 1.8s ease-in-out infinite;
  pointer-events: none; z-index: 5;
}
.reveal-hint-arrow { font-size: 1.2em; }
@keyframes revealPulse {
  0%, 100% { opacity: .3; transform: translateX(-50%) translateY(0) }
  50% { opacity: .7; transform: translateX(-50%) translateY(4px) }
}

/* ═══════════════════ BOXES ═══════════════════ */
.box {
  border-radius: 16px; padding: 16px 22px; font-size: 1.6em; line-height: 1.55; margin: 5px 0;
  background: white; border: 2px solid var(--border);
  box-shadow: 0 1px 4px rgba(30,41,59,.04);
  position: relative; overflow: hidden;
}
/* Color accent: colored left border for warmth */
.box::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
  border-radius: 16px 0 0 16px;
}
.box-teal  { color: var(--text) }
.box-teal::before  { background: linear-gradient(180deg, var(--teal), rgba(16,185,129,.3)) }
.box-blue  { color: var(--text) }
.box-blue::before  { background: linear-gradient(180deg, var(--blue), rgba(59,130,246,.3)) }
.box-amber { color: var(--text); text-align: center; border-color: rgba(249,115,22,.25) }
.box-amber::before { background: linear-gradient(180deg, var(--amber), rgba(249,115,22,.3)) }
.box-green { color: var(--text) }
.box-green::before { background: linear-gradient(180deg, var(--green), rgba(16,185,129,.3)) }
.box-red   { color: var(--text) }
.box-red::before   { background: linear-gradient(180deg, var(--red), rgba(239,68,68,.3)) }
.box strong { font-weight: 700 }
.box em { font-style: normal; color: var(--accent); font-weight: 600 }
.box-row { display: flex; align-items: center; gap: 12px }
/* Centered (amber) boxes: stack icon above text to avoid lone-icon-left imbalance */
.box-amber .box-row { flex-direction: column; align-items: center; gap: 10px; text-align: center }
.box-amber .box-row .ic { margin: 0 }

/* ═══════════════════ DISCUSSION CARD ═══════════════════ */
.discussion-card {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fff7ed 100%);
  border: 2px solid rgba(249,115,22,.25); border-radius: 20px;
  padding: 36px 48px; text-align: center; max-width: 900px; margin: 16px auto 0; width: 100%;
  box-shadow: 0 4px 24px rgba(249,115,22,.08);
  position: relative; overflow: hidden;
}
.discussion-card::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(249,115,22,.06);
}
.discussion-card::after {
  content: ''; position: absolute; bottom: -20px; left: -20px;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(16,185,129,.05);
}
.disc-icon { margin-bottom: 12px }
.disc-icon svg { width: 40px; height: 40px; stroke: var(--accent); stroke-width: 1.5 }
.disc-grade { font-size: 1.1em; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px }
.disc-prompt { font-size: 1.5em; line-height: 1.6; color: var(--text); font-weight: 500 }
.disc-prompt-en { font-size: 1.15em; line-height: 1.5; color: var(--muted); margin-top: 14px; font-style: italic }
body[data-lang="vn"] .disc-prompt-en { display: none }
body[data-lang="en"] .disc-prompt { display: none }
body[data-lang="en"] .disc-prompt-en { display: block; font-size: 1.5em; font-style: normal; color: var(--text); font-weight: 500 }

/* ═══════════════════ CARDS & GRIDS ═══════════════════ */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0; min-height: 0 }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 6px 0; min-height: 0 }

.card {
  border-radius: 16px; padding: 16px 16px; font-size: 1.5em; line-height: 1.5;
  border: 2px solid var(--border); background: var(--bg); box-shadow: var(--sh);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-md) }
.card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 16px 16px 0 0 }
.card-teal  { background: var(--teal-lt);  border-color: rgba(16,185,129,.22) }
.card-teal::after  { background: var(--teal) }
.card-blue  { background: var(--blue-lt);  border-color: rgba(59,130,246,.18) }
.card-blue::after  { background: var(--blue) }
.card-green { background: var(--green-lt); border-color: rgba(16,185,129,.18) }
.card-green::after { background: var(--green) }
.card-red   { background: var(--red-lt);   border-color: rgba(239,68,68,.18) }
.card-red::after   { background: var(--red) }
.card-amber { background: var(--amber-lt); border-color: rgba(249,115,22,.18) }
.card-amber::after { background: var(--amber) }
.card h3 { font-family: 'Nunito', system-ui, sans-serif; font-size: 1.05em; font-weight: 800; margin-bottom: 6px; color: var(--text); display: flex; align-items: center; gap: 7px }
.card h3 .lucide { width: 18px; height: 18px }

/* ─── IMG CARD ─── */
.img-card {
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--sh); display: flex; flex-direction: column;
  position: relative;
}
.img-card img {
  flex: 1; min-height: 0;
  width: 100%; object-fit: cover; display: block;
}
.img-card img.contain, .img-card[data-fit="contain"] img {
  object-fit: contain;
  background: linear-gradient(135deg, #fafbff 0%, #f4f6ff 100%);
  padding: 8px;
}
.img-card .img-body {
  flex-shrink: 0; padding: 9px 13px 10px; font-size: 1.22em; line-height: 1.4;
}
.img-card .img-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(30,41,59,.8); backdrop-filter: blur(6px);
  color: white; font-family: 'Nunito', system-ui, sans-serif; font-weight: 700;
  font-size: .7em; letter-spacing: .05em; padding: 4px 10px; border-radius: 8px;
  text-transform: uppercase;
}

/* ─── FLASHCARD FLIP ─── */
.flashcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; perspective: 1200px }
.poll-card.flashcard {
  background: transparent !important; border: none !important; padding: 0 !important;
  min-height: 240px; cursor: pointer; perspective: 1000px;
  display: block;
}
.flashcard-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  min-height: 240px;
}
.poll-card.flashcard.flipped .flashcard-inner { transform: rotateY(180deg) }
.flashcard-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 10px; border-radius: 16px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  overflow: hidden;
}
.flashcard-front {
  background: white; border: 2px solid var(--border, #e5e7eb);
  gap: 6px;
}
.flashcard-front .poll-img { width: 70px; height: 70px; object-fit: cover; border-radius: 10px; flex-shrink: 0 }
.flashcard-front .poll-icon { font-size: 2.2em }
.flashcard-front .poll-label {
  font-weight: 700; font-size: .88em; text-align: center;
  line-height: 1.2; word-break: break-word; overflow-wrap: anywhere;
  max-width: 100%;
}
.flashcard-hint { font-size: .7em; color: var(--muted, #94a3b8); margin-top: 2px; white-space: nowrap }
.flashcard-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #f59e0b;
  gap: 10px; text-align: center;
}
.flashcard-back.yes { background: linear-gradient(135deg, #d1fae5, #a7f3d0); border-color: #10b981 }
.flashcard-back.no { background: linear-gradient(135deg, #fee2e2, #fecaca); border-color: #ef4444 }
.flashcard-answer { display: flex; align-items: center; gap: 6px; font-size: 1.5em; font-weight: 900 }
.flashcard-back.yes .flashcard-answer { color: #059669 }
.flashcard-back.no .flashcard-answer { color: #dc2626 }
.flashcard-answer i { width: 28px; height: 28px }
.flashcard-explanation { font-size: .85em; font-weight: 500; color: #374151; line-height: 1.4 }

/* ─── IMG CARD: 3-STAGE REVEAL (Question → Answer → Explanation) ─── */
/* Stage 1 (guess): image only + "?" hint    — students observe & guess */
/* Stage 2 (answered): image + tag           — answer revealed */
/* Stage 3 (full): image + tag + body        — explanation revealed */
.img-card.stage-guess, .img-card.stage-answered { cursor: pointer }
/* Default hidden states */
.img-card .img-tag { transition: opacity .4s ease, transform .4s ease }
.img-card .img-body {
  transition: opacity .4s ease, max-height .4s ease, padding .4s ease;
}
/* Stage 1: guess — everything hidden except image */
.img-card.stage-guess .img-tag { opacity: 0; transform: translateY(8px); pointer-events: none }
.img-card.stage-guess .img-body {
  opacity: 0; pointer-events: none;
  max-height: 0; padding: 0; border: none; margin: 0; overflow: hidden;
}
.img-card.guess .guess-overlay { opacity: 1 }
/* Stage 2: answered — tag shown, body still hidden */
.img-card.stage-answered .img-body {
  opacity: 0; pointer-events: none;
  max-height: 0; padding: 0; border: none; margin: 0; overflow: hidden;
}
/* Subtle floating hint — image stays fully clear */
.guess-overlay {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px; border-radius: 99px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.guess-badge {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent, #10b981); color: white;
  font-size: .9em; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.guess-hint {
  color: #1f2937; font-size: .72em; font-weight: 700; white-space: nowrap;
}

/* ─── APP CARD ─── */
.app-card {
  border-radius: 16px; overflow: hidden;
  border: 2px solid var(--border); box-shadow: var(--sh);
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.app-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md) }
.app-img { flex: 1; min-height: 0; width: 100%; object-fit: cover; display: block }
.app-body {
  flex-shrink: 0; padding: 8px 12px 9px; background: white;
  display: flex; flex-direction: column; gap: 2px;
}
.app-name { font-family: 'Nunito', system-ui, sans-serif; font-size: .95em; font-weight: 800; color: var(--text); line-height: 1.2 }
.app-desc { font-size: .8em; color: var(--muted); line-height: 1.2 }

/* ─── STACK CARDS ─── */
.stack-card {
  border-radius: 16px; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
  display: flex; flex-direction: column;
}
.stack-card.active { opacity: 1; pointer-events: auto }
.stack-card img { flex: 1; min-height: 0; width: 100%; object-fit: cover; display: block }
.stack-card .img-body { flex-shrink: 0; padding: 14px 18px }

/* ─── ROWS ─── */
.rows { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 8px 0 }
.row-item {
  font-size: 1.6em; line-height: 1.5; padding: 12px 16px;
  border-radius: 12px; background: linear-gradient(135deg, var(--bg), #fffbeb); border-left: 4px solid var(--accent);
  display: flex; align-items: center; gap: 12px; box-shadow: var(--sh);
  transition: transform .15s ease, box-shadow .15s ease;
}
.row-item:hover { transform: translateX(3px); box-shadow: var(--sh-md) }
.row-item .ic .lucide { width: 22px; height: 22px }
.rows.amber .row-item { border-left-color: var(--amber) }
.rows.green .row-item { border-left-color: var(--green) }

/* ═══════════════════ FLOW ═══════════════════ */
.flow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 1.3em; margin: 8px 0 }
.flow-step {
  background: linear-gradient(135deg, var(--accent), #ea580c); color: white; border-radius: 14px;
  padding: 12px 18px; font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700; text-align: center;
  box-shadow: 0 4px 16px rgba(249,115,22,.2), 0 1px 3px rgba(30,41,59,.08);
  display: flex; align-items: center; gap: 8px; justify-content: center;
  transition: transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.flow-step::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.1));
  opacity: .6;
}
.flow-step:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(249,115,22,.25) }
.flow-step .lucide { width: 20px; height: 20px; stroke: white; flex-shrink: 0 }
.flow-arrow .lucide { width: 22px; height: 22px; stroke: var(--accent) }

/* ═══════════════════ COMPARISON TABLE ═══════════════════ */
.cmp { width: 100%; border-collapse: collapse; font-size: 1.6em; margin: 8px 0; border-radius: 16px; overflow: hidden; box-shadow: var(--sh) }
.cmp th { background: var(--accent); color: white; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; padding: 16px 18px; text-align: left }
.cmp td { padding: 18px 18px; border-bottom: 1px solid var(--border) }
.cmp tr:nth-child(even) td { background: var(--bg) }
.cmp td:first-child { font-weight: 600; color: var(--muted) }

/* ═══════════════════ TITLE SLIDES ═══════════════════ */
/* Title & section-break cover slides: warm gradient background + decorative geometry */
.slide.cv {
  background:
    radial-gradient(ellipse at 80% 15%, rgba(249,115,22,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 85%, rgba(59,130,246,.05) 0%, transparent 50%),
    linear-gradient(135deg, #fffbeb 0%, #fff7ed 50%, #fef3c7 100%);
}
.slide.cv::after {
  width: 320px; height: 320px;
  background:
    radial-gradient(circle at 75% 25%, rgba(249,115,22,.08) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(59,130,246,.04) 0%, transparent 60%);
}
/* Decorative circles for cover slides */
.slide.cv::before {
  display: block;
  width: 180px; height: 180px; border-radius: 50%;
  background: none;
  border: 2px solid rgba(249,115,22,.08);
  left: -40px; top: auto; bottom: -40px;
}
/* Geometric accent dots */
.slide.cv > div::before {
  content: '';
  position: absolute; top: 28px; right: 38px;
  width: 48px; height: 48px;
  background-image:
    radial-gradient(circle, rgba(249,115,22,.15) 2px, transparent 2px);
  background-size: 10px 10px;
}

/* Title heading gradient accent */
.slide.cv h1 {
  background: linear-gradient(135deg, var(--text) 0%, #475569 50%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Title line — wider on cover slides */
.slide.cv .title-line {
  width: 80px; height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--pink), var(--accent));
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
}

.meta-row { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 8px }
.meta-chip {
  background: rgba(255,255,255,.9); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 5px 14px; font-size: .98em; font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700; color: var(--muted); box-shadow: var(--sh);
  backdrop-filter: blur(4px);
}

/* ═══════════════════ NAV ═══════════════════ */
.nav {
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
  border-top: 2px solid var(--border);
  /* 1px (was 5px) + a 44px button = 46px, the nav's existing height — so the
     bigger tap target costs the slide no vertical space at all. */
  padding: 1px 22px; display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; gap: 12px;
}
.nav-btn {
  background: var(--accent); border: none;
  color: white; padding: 6px 18px; font-size: .95em; border-radius: 9px;
  cursor: pointer; font-family: 'Nunito', system-ui, sans-serif; font-weight: 700;
  transition: all .2s;
  /* was 34px — the single most-tapped control in the deck, and the one where a
     mis-tap costs a triad their place. Camp/THCS themes already used 48–50px;
     this brings demo + NSPS up to the same floor. */
  min-height: var(--tap, 44px);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 2px 6px rgba(249,115,22,.22);
}
/* Arrow keeps the optical weight the old '◀'/'▶' character had. */
.nav-btn .lucide { width: 1.05em; height: 1.05em; stroke-width: 2.5; flex-shrink: 0 }
.nav-btn .nav-btn-label { line-height: 1 }
.timer-btn .lucide, .btn-icon { width: 1.1em; height: 1.1em; stroke-width: 2.5; vertical-align: -.16em; flex-shrink: 0 }
/* The '▶'/'⏸' characters these replace were SOLID. A stroked outline reads
   noticeably weaker beside 1.3em bold text, so fill the two transport icons —
   and only those (a filled `clock` would be a black disc). */
.btn-icon.lucide-play, .btn-icon.lucide-pause { fill: currentColor; stroke-width: 1.5 }
.nav-btn:hover { background: #ea580c; transform: scale(1.03) }
.nav-btn:disabled { opacity: .25; cursor: not-allowed; transform: none; background: var(--muted) }
.nav-info { display: flex; flex-direction: row; align-items: center; gap: 10px }
.nav-num { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1em; color: var(--text) }
.nav-hint { font-size: .62em; color: var(--muted); letter-spacing: .03em }
@media (max-width: 900px) { .nav-hint { display: none } }

/* ═══════════════════ SORTING GAME ═══════════════════ */
.sort-wrap { display: flex; flex-direction: column; gap: 8px }
.drop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1 }
.drop-zone { border: 2.5px dashed var(--border); border-radius: var(--r); padding: 10px 12px; min-height: 90px; text-align: center; transition: all .2s }
.dz-ai  { border-color: var(--teal); background: var(--teal-lt) }
.dz-not { border-color: var(--red);  background: var(--red-lt) }
.dz-ai.over, .dz-not.over { transform: scale(1.02); opacity: .75 }
.dz-label { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.2em; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text) }
.dz-label .lucide { width: 18px; height: 18px }
.drops { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 6px }
.d-chip { border-radius: 10px; padding: 7px 13px; font-size: 1.15em; font-weight: 600 }
.pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px; background: #fff7ed; border: 2px solid rgba(249,115,22,.28); border-radius: var(--r); min-height: 46px }
.drag-chip { background: white; border: 2px solid rgba(249,115,22,.45); border-radius: 12px; padding: 10px 16px; font-size: 1.4em; cursor: grab; user-select: none; transition: all .2s; touch-action: none; font-family: 'Nunito', system-ui, sans-serif; box-shadow: var(--sh); min-height: 48px }
.drag-chip:hover { background: #fff7ed; transform: scale(1.05) translateY(-2px); box-shadow: var(--sh-md) }
.drag-chip.dragging { opacity: .3 }
/* Photo-first chips — when a drag chip has an image we stack it vertically
 * with a small label underneath. Pre-reader kids (G1) recognise the photo
 * without needing to read the label. */
.drag-chip.has-img { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px }
.drag-chip .chip-img, .d-chip .chip-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px }
.drag-chip .chip-label, .d-chip .chip-label { font-size: .75em; line-height: 1.1; text-align: center; max-width: 100px; word-break: break-word }
/* Dropped chip with photo — same vertical stack, with ✓/✗ mark above. */
.d-chip.has-img { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 10px }
.d-chip.has-img .d-chip-mark { font-size: 1.2em; margin-right: 0 }
.sort-score { font-family: 'Nunito', system-ui, sans-serif; font-size: 1.65em; font-weight: 800; text-align: center; color: var(--accent); min-height: 1.4em }

/* ═══════════════════ MCQ ═══════════════════ */
.mcq-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; flex: 1 }
.mcq-o {
  background: var(--bg); border: 2px solid var(--border); border-radius: var(--r);
  padding: 0 18px; font-size: 1.65em; text-align: center; cursor: pointer; line-height: 1.4;
  transition: all .22s; font-family: 'Nunito', system-ui, sans-serif; box-shadow: var(--sh);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  min-height: 48px;
}
.mcq-o::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform .2s; border-radius: 0 0 var(--r) var(--r) }
.mcq-o:hover { border-color: var(--accent); background: rgba(249,115,22,.06); transform: translateY(-2px); box-shadow: var(--sh-md) }
.mcq-o:hover::before { transform: scaleX(1) }
/* MCQ options with image/icon: lay out as icon-left + text-right so the
 * visual recognition prompt is paired with the label. Works for both
 * small icons (Lucide) and photo thumbs. */
.mcq-o.has-media { justify-content: flex-start; gap: 14px; padding: 10px 16px; text-align: left }
.mcq-o .mcq-o-text { flex: 1 }
.mcq-o.correct { background: var(--green-lt); border-color: var(--green); color: #064E3B }
.mcq-o.wrong   { background: var(--red-lt);   border-color: var(--red);   color: #7F1D1D }
.mcq-res { font-family: 'Nunito', system-ui, sans-serif; font-size: 1.9em; font-weight: 800; text-align: center; margin-top: 10px; min-height: 2em; flex-shrink: 0; display: flex; align-items: center; justify-content: center }

/* ═══════════════════ POLL ═══════════════════ */
.poll-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; margin: 10px 0 }
.poll-card {
  background: var(--bg); border: 2px solid var(--border); border-radius: var(--r);
  padding: 14px 10px; text-align: center; cursor: pointer; transition: all .22s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--sh); position: relative; overflow: hidden; min-height: 48px;
}
.poll-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--accent) }
.poll-icon { font-size: 1.5em }
.poll-img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; margin-bottom: 4px }
.poll-icon i { width: 28px; height: 28px }
.poll-label { font-size: 0.95em; font-weight: 700; color: var(--text); line-height: 1.3 }
.poll-result { font-size: 0.9em; font-weight: 700; min-height: 1.4em; transition: opacity .3s; display: flex; align-items: center; gap: 4px; justify-content: center }
.poll-result svg { width: 18px; height: 18px }
.poll-card.correct .poll-result { color: var(--teal) }
.poll-card.incorrect .poll-result { color: #94a3b8 }
.poll-card.revealed { pointer-events: none }
.poll-card.correct { background: var(--teal-lt); border-color: var(--teal) }
.poll-card.incorrect { background: var(--bg); border-color: var(--border); opacity: .65 }

/* ═══════════════════ EVALUATION ═══════════════════ */
.eval-q {
  background: var(--accent); color: white; border-radius: 16px;
  padding: 18px 24px; margin: 10px 0; display: flex;
  align-items: center; gap: 16px;
}
.eval-num {
  background: white; color: var(--accent); border-radius: 50%;
  min-width: 42px; height: 42px; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 1.25em; flex-shrink: 0;
}
.rubric-row { display: flex; gap: 14px; width: 100%; flex-wrap: wrap; justify-content: center; margin: 20px 0 }
.rubric-chip {
  background: white; border: 3px solid var(--accent); border-radius: 16px;
  padding: 18px 16px; text-align: center; flex: 1; min-width: 140px;
  box-shadow: var(--sh);
}
.rubric-chip .rc-icon { font-size: 1.6em; margin-bottom: 4px }
.rubric-chip .rc-icon svg { width: 28px; height: 28px }
.rc-label { font-size: 1em; font-weight: 800; color: var(--text) }
.rc-desc { font-size: 0.85em; color: var(--muted); margin-top: 4px }

/* ═══════════════════ TIMELINE ═══════════════════ */
.phase-timeline { display: flex; gap: 12px; align-items: stretch; justify-content: center; margin: 20px 0; width: 100% }
.phase-block {
  padding: 28px 24px; border-radius: 16px; text-align: center;
  flex: 1; min-width: 180px; color: white;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.phase-block h3 { margin: 0 0 10px 0; font-size: 1.2em; font-weight: 800; line-height: 1.3; white-space: pre-line }
.phase-block p { font-size: 0.95em; line-height: 1.5; margin: 0; opacity: .9; white-space: pre-line }

/* ═══════════════════ GRADE CONTENT ═══════════════════ */
.grade-content { display: none }
.grade-content.active { display: block }

/* ═══════════════════ INLINE IMAGE ROW ═══════════════════ */
.img-row-card {
  display: flex; gap: 10px; background: white; border-radius: 12px;
  overflow: hidden; flex: 1; min-height: 0;
}
.img-row-card img {
  width: 160px; flex-shrink: 0; object-fit: cover; object-position: left center;
}
.img-row-card .img-row-text {
  padding: 8px 10px; display: flex; flex-direction: column; justify-content: center;
}
.img-row-card .img-row-text strong {
  font-weight: 700; font-size: 1.15em; color: var(--text);
}
.img-row-card .img-row-text span {
  font-size: .95em; color: var(--muted); margin-top: 2px;
}

/* ═══════════════════ PRESENTER NOTES ═══════════════════ */
.notes-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; z-index: 1000;
  background: rgba(255,255,255,.97); backdrop-filter: blur(16px);
  border-left: 2px solid var(--border);
  color: var(--text); font-family: 'Nunito', system-ui, sans-serif;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s ease;
  box-shadow: -8px 0 32px rgba(30,41,59,.1);
}
.notes-panel.open { transform: translateX(0) }
.notes-hdr {
  padding: 14px 18px; border-bottom: 2px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.notes-hdr-title {
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: .95em;
  color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
}
.notes-close {
  background: none; border: 1px solid var(--border); color: var(--text);
  /* was a 28×28 box. The notes header is 58px tall, so 44 fits with no reflow.
     min-* rather than width/height on purpose: theme-camp.css restates this
     rule with an explicit `width:28px;height:28px` and, loading later, would
     win a same-property fight. min-width/min-height is a different property,
     so it clamps the fork up to 44 without the fork needing to be edited. */
  min-width: var(--tap, 44px); min-height: var(--tap, 44px); border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .9em; flex-shrink: 0;
}
.notes-close:hover { background: rgba(249,115,22,.08) }
.notes-body {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  font-size: .95em; line-height: 1.7; color: var(--muted);
}
.notes-body:empty::before {
  content: 'Khong co ghi chu cho slide nay';
  color: rgba(100,116,139,.4); font-style: italic;
}
.notes-body strong { color: var(--accent); font-weight: 700 }
.notes-body em { color: var(--teal); font-style: normal }
.notes-toggle {
  background: rgba(249,115,22,.08); border: 1.5px solid rgba(249,115,22,.25);
  color: var(--text); padding: 4px 10px; border-radius: 8px; cursor: pointer;
  font-size: .85em; transition: all .2s; font-family: 'Nunito', system-ui, sans-serif;
  min-height: var(--tap, 44px); min-width: var(--tap, 44px); display: flex; align-items: center; justify-content: center;
  /* classroom mode appends a "Ghi chú" label via ::after; the old emoji
     carried its own trailing space, an SVG does not. */
  gap: 6px;
}
.notes-toggle:hover { background: rgba(249,115,22,.16) }
.notes-toggle.active { background: rgba(249,115,22,.2); border-color: var(--accent) }

/* Shift stage left when notes open */
body.notes-open .stage { margin-right: 340px; transition: margin-right .3s ease }

/* ═══════════════════ BILINGUAL TOGGLE ═══════════════════ */
.lang-toggle {
  background: rgba(249,115,22,.08); border: 1.5px solid rgba(249,115,22,.25);
  color: var(--text); padding: 4px 10px; border-radius: 8px; cursor: pointer;
  font-size: .85em; font-family: 'Nunito', system-ui, sans-serif; font-weight: 700;
  transition: all .2s; letter-spacing: .03em; min-height: 32px; display: flex; align-items: center;
}
.lang-toggle:hover { background: rgba(249,115,22,.18) }

/* Hide inactive language spans */
body[data-lang="en"] [data-vn] { display: none }
body[data-lang="vn"] [data-en] { display: none }
/* When no lang set, default to Vietnamese — hide English */
body:not([data-lang]) [data-en] { display: none }

/* ═══════════════════ EMBED MODE ═══════════════════ */
body.embed .hdr { display: none }
body.embed .nav { display: none }
/* Reserve embed-bar height (~38px) so the slide centers in the visible
 * area above the toolbar instead of the full viewport. The toolbar is
 * position:fixed so without this padding the stage spans the whole
 * viewport and the slide looks pushed up. */
body.embed .stage { flex: 1; cursor: pointer; padding: 2px 2px 40px }

/* ─── Embed toolbar: slim bar at bottom, visible on hover ─── */
.embed-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-top: 2px solid var(--border);
  padding: 3px 16px; display: flex; align-items: center; gap: 10px;
  opacity: .85; transition: opacity .25s ease;
  /* 44px control + 3px×2 padding + 2px border. The bar is a fixed overlay, so
     the extra 10px covers a little more of the slide but reflows nothing. */
  height: 52px;
}
.embed-bar:hover, body.embed:hover .embed-bar { opacity: 1 }

.eb-prev, .eb-next, .eb-lang, .eb-back, .eb-fs {
  background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.25);
  color: var(--text); border-radius: 8px; cursor: pointer; padding: 4px 10px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; min-height: var(--tap, 44px); min-width: var(--tap, 44px);
}
.eb-back { margin-right: 4px; }
.eb-lang { font-size: .7em; font-weight: 800; font-family: 'Nunito', system-ui, sans-serif; padding: 4px 10px }
.eb-prev:hover, .eb-next:hover, .eb-lang:hover, .eb-back:hover, .eb-fs:hover { background: rgba(249,115,22,.2) }
.eb-prev:disabled, .eb-next:disabled { opacity: .25; cursor: not-allowed }
.eb-prev svg, .eb-next svg, .eb-back svg, .eb-fs svg { width: 16px; height: 16px; stroke: var(--text) }

.eb-prog {
  flex: 1; height: 4px; background: rgba(249,115,22,.12); border-radius: 99px; overflow: hidden;
}
.eb-prog-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--pink));
  border-radius: 99px; transition: width .35s ease;
}

.eb-num {
  font-family: 'Nunito', system-ui, sans-serif; font-size: .75em; font-weight: 700;
  color: var(--muted); white-space: nowrap; min-width: 48px; text-align: center;
}

.eb-jump {
  background: rgba(249,115,22,.08); border: 1px solid rgba(249,115,22,.2);
  color: var(--text); border-radius: 8px; padding: 2px 6px; font-size: .72em;
  font-family: 'Nunito', system-ui, sans-serif; cursor: pointer;
  /* a <select> defaults to ~24px tall; it sits in the same finger-driven row
     as the 44px buttons, so it takes the same floor. */
  min-height: var(--tap, 44px);
}
.eb-jump option { background: white; color: var(--text) }
.eb-grade {
  background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.35);
  color: var(--text); border-radius: 8px; padding: 2px 8px; font-size: .72em;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; cursor: pointer;
}
.eb-grade option { background: white; color: var(--text) }

/* ═══════════════════ DECORATIVE GEOMETRY ═══════════════════ */
/* Bottom-right corner accent for content slides */
.slide:not(.cv)::after {
  width: 160px; height: 160px;
  background:
    radial-gradient(circle at bottom right, rgba(59,130,246,.04) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(249,115,22,.03) 0%, transparent 50%);
  border-radius: 0 0 22px 0;
  top: auto; bottom: 0; left: auto; right: 0;
}

/* Subtle dot pattern in bottom-right corner of content slides */
.slide:not(.cv) .slide-body::after {
  content: '';
  position: absolute; bottom: 12px; right: 18px;
  width: 36px; height: 36px;
  background-image: radial-gradient(circle, rgba(249,115,22,.08) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
  pointer-events: none;
}

/* ═══════════════════ IMAGE LAYOUTS ═══════════════════ */

/* Shared image frame: contain-fit, rounded, subtle shadow */
.img-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(30,41,59,.08), 0 0 0 1px rgba(30,41,59,.04);
  background: var(--bg);
}
.img-frame img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* ─── IMAGE-FULL: full-width image ~60% height ─── */
.img-full-wrap {
  flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0;
}
.img-full-wrap .img-frame {
  flex: 1; min-height: 0; max-height: 62%;
}
.img-caption {
  text-align: center; font-size: 1.15em; color: var(--muted);
  font-style: italic; padding: 2px 0;
}
.img-full-body {
  font-size: 1.3em; color: var(--text); line-height: 1.55;
  padding: 4px 0;
}

/* ─── IMAGE-TOP: image ~40% then text below ─── */
.img-top-wrap {
  display: flex; flex-direction: column; min-height: 0;
}
.img-top-wrap .img-frame {
  height: 260px; flex-shrink: 0;
}
.img-top-wrap + .box {
  flex: 1; margin-top: 8px;
}

/* ─── TEXT-IMAGE (improved): 40/60 two-column ─── */
.g2-img {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 12px;
  margin: 6px 0;
  min-height: 0;
  flex: 1;
  align-items: stretch;
}
.g2-img .img-frame {
  height: 100%;
}
.g2-img .img-frame img {
  /* Fill the frame's height; object-fit:contain (inherited from .img-frame img)
   * keeps aspect ratio so portraits don't stretch. Removed the 380px cap that
   * left big empty space around character portraits in 60%-column layouts. */
  height: 100%;
}

/* ─── IMAGE-ANNOTATED: full image with callout markers + legend ─── */
.img-annotated-wrap {
  flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.img-frame-annotated {
  flex: 1; min-height: 0; position: relative;
}
.ann-marker {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: .85em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(249,115,22,.4), 0 0 0 3px rgba(255,255,255,.85);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.ann-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 1.15em; line-height: 1.4;
  padding: 4px 0;
}
.ann-legend-item {
  display: flex; align-items: center; gap: 6px;
}
.ann-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: white;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800; font-size: .82em;
  flex-shrink: 0;
}

/* ═══════════════════ CONTEXT MODES ═══════════════════ */
/* body[data-context-mode="classroom"] (default) — teacher-led: notes + presenter prompts visible */
/* body[data-context-mode="self-study"] — student at home: notes + .teacher-only hidden, narrate on */
/* Legacy alias: body[data-mode="..."] — kept for back-compat; applyContextMode() writes both. */

/* Self-study: hide every teacher-facing affordance */
body[data-context-mode="self-study"] .notes-toggle,
body[data-mode="self-study"] .notes-toggle,
body[data-context-mode="self-study"] .notes-panel,
body[data-mode="self-study"] .notes-panel,
body[data-context-mode="self-study"] .eb-notes,
body[data-mode="self-study"] .eb-notes,
body[data-context-mode="self-study"] .teacher-only,
body[data-mode="self-study"] .teacher-only { display: none !important }

/* Classroom: hide narration button (teacher facilitates reading) */
body[data-context-mode="classroom"] .narrate-btn,
body[data-mode="classroom"] .narrate-btn { display: none }

/* Mode-switch toggle button (rendered in header by demo-viewer) */
.mode-toggle {
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18);
  color: white; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  font-size: .8em; transition: all .2s; font-family: 'IBM Plex Sans', sans-serif;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
}
.mode-toggle:hover { background: rgba(255,255,255,.16) }
.mode-toggle svg { width: 14px; height: 14px }
body[data-context-mode="self-study"] .mode-toggle,
body[data-mode="self-study"] .mode-toggle {
  background: rgba(20,184,166,.28); border-color: rgba(20,184,166,.55);
}

.duration-pill { font-family: "Nunito", system-ui, sans-serif }

/* ═══════════════════ POLISH LAYER (Gamma-grade visuals) ═══════════════════ */
/* Rainbow ribbon via background strip — keeps .slide::after free for original glow */
.slide {
  background:
    linear-gradient(90deg, #667eea 0%, #764ba2 35%, #f093fb 70%, #feca57 100%) top/100% 4px no-repeat,
    var(--surface);
}
.slide.cv { background: var(--surface) }
.slide.cv h1 {
  background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 50%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(67,56,202,.12));
}
@keyframes hcai-popIn {
  0% { opacity: 0; transform: scale(.85) translateY(8px) }
  60% { transform: scale(1.03) translateY(-2px) }
  100% { opacity: 1; transform: scale(1) translateY(0) }
}
@keyframes hcai-shake {
  0%, 100% { transform: translateX(0) }
  20% { transform: translateX(-8px) }
  40% { transform: translateX(8px) }
  60% { transform: translateX(-4px) }
  80% { transform: translateX(4px) }
}
@keyframes hcai-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes hcai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20,184,166,.5) }
  50% { box-shadow: 0 0 0 12px rgba(20,184,166,0) }
}
@keyframes hcai-drawLine { from { stroke-dashoffset: 400 } to { stroke-dashoffset: 0 } }
.mcq-o.correct, .poll-card.correct, .card-tap-card.correct, .chip.correct {
  background: linear-gradient(135deg, #E8F8F5 0%, #D5F5E3 100%) !important;
  border-color: #10b981 !important;
  animation: hcai-popIn .4s ease-out;
}
.mcq-o.wrong, .poll-card.wrong, .card-tap-card.wrong, .chip.wrong {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important;
  border-color: #ef4444 !important;
  animation: hcai-shake .4s ease-in-out;
}
.mcq-o { position: relative; padding-left: 56px !important; }
.mcq-o::before {
  content: attr(data-letter);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #E0E7FF;
  color: #1e1b4b; font-weight: 800; font-size: .95em;
  border: 1.5px solid #6366f1;
  transition: all .2s ease;
}
.mcq-o:hover::before { background: linear-gradient(135deg, rgba(102,126,234,.25), rgba(118,75,162,.25)); transform: translateY(-50%) scale(1.08) }
.mcq-o.correct::before { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-color: #10b981 }
.mcq-o.wrong::before { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; border-color: #ef4444 }
.poll-card, .card-tap-card, .img-card, .flash-card {
  box-shadow: 0 4px 15px rgba(11,25,41,.08);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
.poll-card:hover, .card-tap-card:hover, .img-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(11,25,41,.14);
}
.rv.show { animation: hcai-popIn .4s cubic-bezier(.4,0,.2,1) }

/* ═══════════════════ PRINT ═══════════════════ */
@media print {
  .hdr, .nav, .notes-panel { display: none }
  .stage { overflow: visible; margin-right: 0 !important }
  .slide { display: flex !important; page-break-after: always; height: auto; min-height: 100vh; transform: none !important }
  .slide::after { display: none }
}

body[data-mode="classroom"] .notes-toggle { background: linear-gradient(135deg, rgba(102,126,234,.22), rgba(118,75,162,.22)); border-color: rgba(102,126,234,.5); padding: 6px 14px 6px 10px; font-weight: 700; }
body[data-mode="classroom"] .notes-toggle::after { content: "Ghi chú"; font-size: .88em }
body[data-mode="classroom"] .notes-toggle.has-note:not(.active) { animation: notes-pulse 2.4s ease-in-out infinite; border-color: rgba(245,158,11,.6); }
@keyframes notes-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.35) } 50% { box-shadow: 0 0 0 6px rgba(245,158,11,0) } }

body[data-mode="self-study"] .chrome-notes-btn { display: none }
.chrome-notes-btn:not(.has-note) { opacity: .55 }
.chrome-notes-btn.has-note { animation: notes-chrome-pulse 2.4s ease-in-out infinite }
@keyframes notes-chrome-pulse { 0%,100% { box-shadow: 0 4px 12px rgba(245,158,11,.22) } 50% { box-shadow: 0 4px 20px rgba(245,158,11,.5) } }
.narrate-btn:hover, .chrome-notes-btn:hover { transform: translateY(-2px) }

body.embed .stage-chrome { bottom: 62px !important } /* embed bar 52px + 10px clearance */

.eb-notes {
  background: rgba(249,115,22,.1); border: 1.5px solid rgba(249,115,22,.28);
  color: var(--text); border-radius: 8px; cursor: pointer; padding: 6px 14px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .82em;
  transition: background .18s, transform .12s; position: relative;
  min-height: var(--tap, 44px);
}
.eb-notes:hover { background: rgba(249,115,22,.18); transform: translateY(-1px) }
.eb-notes:active { transform: translateY(0) }
.eb-notes svg, .eb-notes i[data-lucide] {
  width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0;
}
.eb-notes .eb-notes-label { line-height: 1; }
/* When no note is authored for this slide, dim the fill but keep the button
   clickable and the icon fully legible — the half-opacity variant read as
   "just a dot" at small sizes. */
.eb-notes:not(.has-note) { background: rgba(100,116,139,.08); border-color: rgba(100,116,139,.28) }
.eb-notes:not(.has-note) svg { opacity: .6 }
.eb-notes.has-note::after {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #f59e0b; border: 2px solid var(--surface, #fff);
  box-shadow: 0 0 6px rgba(245,158,11,.5);
}
.eb-notes.active { background: rgba(249,115,22,.28); border-color: rgba(249,115,22,.55) }
body.embed .notes-panel { z-index: 1000 }

body[data-mode="classroom"] .stage-chrome, .stage-chrome:empty { display: none }
.chrome-notes-btn { display: none !important }


/* ═══════════════════ ACCESSIBILITY (WCAG AA) ═══════════════════ */
.mcq-o:focus-visible, .poll-card:focus-visible, .card-tap-card:focus-visible,
.chip:focus-visible, .seq-card:focus-visible, .mem-card:focus-visible,
.hs-dot:focus-visible, .drag-chip:focus-visible, .story-choice-btn:focus-visible,
.fb-chip:focus-visible, .fb-blank:focus-visible, .dm-card:focus-visible,
.checklist-item:focus-visible, .tool-card:focus-visible,
.hdr-back:focus-visible, .fs-btn:focus-visible, .notes-toggle:focus-visible,
.eb-prev:focus-visible, .eb-next:focus-visible, .eb-fs:focus-visible,
.eb-notes:focus-visible, .eb-back:focus-visible, .eb-lang:focus-visible,
.eb-jump:focus-visible, .nav-btn:focus-visible, .reveal-btn:focus-visible,
.story-next-btn:focus-visible, .narrate-btn:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}
.skip-link { position: absolute; left: -9999px; background: #fff; color: var(--navy); padding: 8px 14px; border-radius: 6px; font-weight: 700; z-index: 99999; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.skip-link:focus { left: 8px; top: 8px }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hs-dot, .rv.show, .mcq-o, .poll-card, .eb-notes, .hdr-badge, .notes-toggle { animation: none !important }
}
.flashcard-hint, .nav-hint, .prog-label { color: #334155 }

/* Layout system — common slot styling */
.slide-composed { position: relative }
.layout { width: 100% }
.layout-visual img { border-radius: 18px }
.layout-col-visual { align-items: stretch }
.layout-cell { min-height: 0; display: flex; flex-direction: column; justify-content: center }

/* ═══════════════════ GRAPHIC ORGANIZERS ═══════════════════ */
/* T-chart (compare/contrast) + KWL chart (Know/Want/Learned) */
.organizer-tchart { min-width: 0 }
.organizer-tchart-header { min-width: 0 }
.organizer-tchart-row { min-width: 0 }
.organizer-tchart-row:hover { background: rgba(241,245,249,.45) }

.organizer-kwl { min-width: 0 }
.organizer-kwl-col { min-width: 0 }
.organizer-kwl-header { letter-spacing: .01em }

/* Mobile: stack T-chart vertically; collapse KWL to single column */
@media (max-width: 640px) {
  .organizer-tchart-header { grid-template-columns: 1fr !important; gap: 8px }
  .organizer-tchart > div:last-child { grid-template-columns: 1fr !important }
  .organizer-tchart > div:last-child > div:nth-child(odd) { border-right: none !important }
  .organizer-kwl { grid-template-columns: 1fr !important; gap: 10px !important }
}

/* ═══════════════════ SPACING NORMALIZATION ═══════════════════ */
.slide-composed .layout { padding: 16px 22px 30px !important }
.slide h2 { margin-bottom: 14px }
.slide-composed .layout > * { min-width: 0 }
.slide > .slide-body { padding-top: 2px }
.slide h2 ~ .slot-visual, .slide h2 ~ .slot-narrative { margin-top: 4px }
.layout-hero, .layout-split, .layout-stack, .layout-magazine,
.layout-grid-2x2, .layout-grid-3 { gap: 18px !important }
.layout-sidebar-left { gap: 22px !important }
.slide svg[viewBox] { padding: 6px }

.layout-sidebar-left { padding: 16px 20px 30px !important }
.layout-sidebar-left .layout-rail { padding-bottom: 18px !important }
.layout-sidebar-left .layout-main { padding-bottom: 4px !important; min-height: 0 !important; overflow: hidden !important }
.layout-sidebar-left .layout-main .slot-visual { min-height: 0 !important; max-height: 100%; flex: 1 1 auto }
.layout-sidebar-left .layout-main .slot-visual img { max-height: 100%; height: auto; width: 100%; object-fit: cover }
.layout-stepper { padding: 6px 28px 30px !important }
.layout-full-bleed { padding: 16px 22px 30px !important }

/* ═══ Lesson refs — companion pill (deck-level) + per-slide strip ═══ */
/* Deck-level "Đồng hành / Companions" pill lives in the header chrome
   right-column. Click opens a drawer with one row per ref. */
.refs-companion-pill {
  background: rgba(20,184,166,.12);
  border: 1.5px solid rgba(20,184,166,.35);
  color: var(--text, #1e1b4b);
  border-radius: 999px;
  cursor: pointer;
  padding: 6px 14px 6px 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700; font-size: .82em;
  transition: background .18s, transform .12s;
  min-height: 32px; line-height: 1;
}
.refs-companion-pill:hover { background: rgba(20,184,166,.22); transform: translateY(-1px) }
.refs-companion-pill svg { width: 16px; height: 16px; stroke-width: 2 }
.refs-companion-pill .refs-badge {
  background: var(--accent, #14b8a6); color: #fff;
  padding: 1px 7px; border-radius: 999px;
  font-size: .88em; font-weight: 800;
  min-width: 18px; text-align: center;
}
.refs-companion-drawer {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1.5px solid rgba(15,23,42,.08);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(15,23,42,.12);
  min-width: 260px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 1500;
  animation: refsDrawerIn .18s ease-out;
}
@keyframes refsDrawerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.refs-companion-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  text-decoration: none; color: var(--text, #1e1b4b);
  font: 600 .92em/1.2 'Nunito', sans-serif;
  transition: background .12s;
}
.refs-companion-row:hover { background: rgba(20,184,166,.1); }
.refs-companion-row > i[data-lucide],
.refs-companion-row > svg { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; color: var(--accent, #14b8a6) }
.refs-companion-row > span { flex: 1; min-width: 0 }
.refs-companion-row .refs-companion-arrow {
  width: 14px; height: 14px; color: rgba(15,23,42,.45); flex-shrink: 0;
}

/* Per-slide refs strip — pills below the active slide.
   ═══ CHROME SAFE-ZONE CONVENTION ═══
   Any absolutely-positioned chrome pinned to a slide edge MUST be paired
   with a `.slide:has(<selector>) { padding-<edge>: Npx }` rule so slides
   with full-bleed content reserve room instead of colliding with the chrome.
   Verified by `node scripts/chrome-safe-zone-lint.cjs` in pre-push. */
.slide-refs-strip {
  position: absolute; left: 18px; right: 18px; bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  pointer-events: auto; z-index: 40;
  opacity: .88; transition: opacity .18s;
}
.slide-refs-strip:hover { opacity: 1 }
/* Reserve space so content (two-column bodies, long reveal lists, comparison
   tables) doesn't run under the strip. 48px = 28px pill min-height + 10px
   bottom offset + 10px breathing. */
.slide:has(.slide-refs-strip) { padding-bottom: 48px }
.slide-refs-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  background: rgba(255,255,255,.94);
  border: 1.5px solid rgba(15,23,42,.08);
  border-radius: 999px;
  font: 600 .78em/1 'Nunito', system-ui, sans-serif;
  color: var(--text, #1e1b4b);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
  transition: transform .12s, box-shadow .12s, background .12s;
  min-height: 28px;
}
.slide-refs-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15,23,42,.12);
  background: #fff;
}
.slide-refs-pill svg, .slide-refs-pill i[data-lucide] {
  width: 14px; height: 14px; stroke-width: 2; flex-shrink: 0;
  color: var(--accent, #14b8a6);
}
.slide-refs-pill .slide-refs-timing {
  padding: 1px 7px;
  background: rgba(20,184,166,.1);
  border-radius: 999px;
  font-size: .9em; font-weight: 700;
  color: var(--accent, #14b8a6);
}
.slide-refs-pill-aiTutor { background: linear-gradient(135deg, rgba(20,184,166,.12), rgba(101,65,242,.1)) }
.slide-refs-pill-activity svg { color: #f97316 }
.slide-refs-pill-aiApp svg { color: #8b5cf6 }

/* ═══ lessonBridge V2 primitive polish ═══ */
.v2-lessonbridge .lb-card { transition: border-color .18s }
.v2-lessonbridge .lb-card:hover { border-color: var(--accent, #14b8a6) }
.v2-lessonbridge .lb-open-btn:focus-visible {
  outline: 3px solid #f59e0b; outline-offset: 3px;
}

/* ═══════════════════ TOPIC IDENTITY (chủ điểm) ═══════════════════
   761 decks already declare `topicColor`; the engine ignored every one. These
   rules give a deck the identity of its chủ điểm WITHOUT repainting slides and
   WITHOUT a contrast regression.

   The safety rule: --topic (the raw declared value) is only ever used as a
   GRAPHIC — a progress fill, a rule, an edge — where WCAG 1.4.11 asks 3:1.
   Anything that sits behind or renders as TEXT uses --topic-ink, which
   topic-color.js has already walked along the hue until it clears 4.5:1
   against the real page background. That matters because 11 of the 16 values
   in the estate (87% of declarations, incl. the two most common, #10b981 at
   2.54:1 and #f59e0b at 2.15:1) fail AA as a white-text background.

   Composition with the theme layer: --accent stays the theme's, untouched.
   These rules are scoped `body.has-topic ...` (0,2,1) so they intentionally sit
   above the deploy-local theme forks' single-class rules — but ONLY for these
   four marks. A deck with no topicColor never gets .has-topic and renders
   byte-identically to before this change. */

/* 1. Progress fill — pure graphic, the clearest "which chủ điểm am I in" cue. */
body.has-topic .prog-fill,
body.has-topic .eb-prog-fill {
  background: linear-gradient(90deg, var(--topic-graphic, var(--accent)), var(--topic, var(--accent)));
  box-shadow: 0 0 6px var(--topic-edge, rgba(249,115,22,.35));
}

/* 2. Header chip — tinted fill + derived ink, so it is legible at every value
      instead of white-on-whatever. */
body.has-topic .hdr-badge {
  background: var(--topic-wash, rgba(249,115,22,.12));
  color: var(--topic-ink, var(--text));
  border: 1px solid var(--topic-edge, transparent);
  box-shadow: none;
}

/* 3. Slide kicker — same treatment, but against --topic-ink-slide: the slide
      is a different surface from the header (THCS is dark chrome over light
      slides), so it gets its own separately-derived ink. */
body.has-topic .s-tag {
  background: var(--topic-wash, rgba(249,115,22,.08));
  color: var(--topic-ink-slide, var(--accent));
}
body.has-topic .s-tag .lucide { stroke: var(--topic-ink-slide, var(--accent)) }

/* 4. The rule under the header — a 2px edge already there, now topic-tinted.
      No layout change, so no reflow. */
body.has-topic .hdr { border-bottom-color: var(--topic-edge, var(--border)) }