:root {
  color-scheme: dark;
  --bg: #0e1014;
  --panel: #151820;
  --panel-2: #1c2029;
  --panel-3: #232833;
  --text: #f3f5f7;
  --muted: #a8b0bd;
  --dim: #737d8c;
  --line: #2b313d;
  --accent: #e44d38;
  --accent-2: #ff745f;
  --good: #43b581;
  --warn: #e7b047;
  --bad: #e05d68;
  --info: #5da8e8;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 14px 40px rgba(0,0,0,.28);
  --max: 980px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { min-height:100vh; }
button, input, select { font:inherit; }
a { color:#8fc8ff; text-underline-offset:3px; }
button { color:inherit; }
.hidden { display:none !important; }
.mobile-only { display:none; }
.topbar {
  position:sticky; top:0; z-index:30; height:68px; display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; border-bottom:1px solid var(--line); background:rgba(14,16,20,.94); backdrop-filter:blur(16px);
}
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--accent); font-weight:900; font-size:13px; letter-spacing:.7px; }
.brand-title { font-weight:800; font-size:15px; line-height:1.15; }
.brand-subtitle { color:var(--muted); font-size:11px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-actions { display:flex; gap:8px; }
.layout { display:grid; grid-template-columns:286px minmax(0,1fr); min-height:calc(100vh - 68px); }
.sidebar { position:sticky; top:68px; align-self:start; height:calc(100vh - 68px); overflow:auto; border-right:1px solid var(--line); padding:16px 12px 24px; background:#10131a; }
.primary-nav, .module-nav { display:flex; flex-direction:column; gap:4px; }
.nav-item, .module-item {
  width:100%; border:0; background:transparent; padding:10px 11px; border-radius:9px; text-align:left; cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:space-between; gap:9px; text-decoration:none;
}
.nav-item:hover, .module-item:hover { background:var(--panel-2); color:var(--text); }
.nav-item.active, .module-item.active { background:var(--panel-3); color:var(--text); }
.module-item { align-items:flex-start; }
.module-code { font-size:11px; font-weight:800; color:var(--accent-2); min-width:31px; padding-top:1px; }
.module-copy { flex:1; min-width:0; }
.module-title { display:block; font-size:12px; line-height:1.35; }
.module-state { display:block; margin-top:3px; font-size:10px; color:var(--dim); }
.sidebar-label { margin:18px 10px 7px; color:var(--dim); font-size:10px; text-transform:uppercase; letter-spacing:.11em; font-weight:800; }
.sidebar-footer { border-top:1px solid var(--line); margin-top:16px; padding:14px 10px 0; }
.text-button { border:0; background:none; color:var(--muted); padding:0; cursor:pointer; font-size:12px; }
.text-button:hover { color:var(--text); }
.pill { min-width:24px; padding:2px 7px; border-radius:999px; background:var(--panel-3); color:var(--muted); font-size:10px; text-align:center; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--dim); }
.status-dot.ready { background:var(--good); }
.main { min-width:0; padding:34px 28px 80px; }
.content { max-width:var(--max); margin:0 auto; }
.loading { color:var(--muted); max-width:var(--max); margin:40px auto; }
.eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--accent-2); font-weight:800; margin-bottom:8px; }
h1 { font-size:clamp(27px,4vw,44px); letter-spacing:-.035em; line-height:1.04; margin:0 0 10px; }
h2 { font-size:20px; letter-spacing:-.01em; margin:0 0 12px; }
h3 { font-size:15px; margin:0 0 8px; }
p { color:#d4d9df; line-height:1.62; margin:0 0 14px; }
.lead { font-size:16px; color:#d7dce3; max-width:780px; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.grid { display:grid; gap:14px; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.card.compact { padding:14px; }
.card.accent { border-color:rgba(228,77,56,.45); background:linear-gradient(180deg,rgba(228,77,56,.08),rgba(21,24,32,1) 55%); }
.metric { font-size:28px; font-weight:850; letter-spacing:-.04em; }
.metric-label { color:var(--muted); font-size:11px; margin-top:4px; }
.progress-track { height:8px; background:#272d38; border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); border-radius:inherit; transition:width .25s ease; }
.progress-fill.good { background:var(--good); }
.section { margin-top:28px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.stack { display:flex; flex-direction:column; gap:10px; }
.module-row { display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; }
.module-row:hover { border-color:#3a4351; }
.module-row .code { color:var(--accent-2); font-weight:850; font-size:12px; }
.module-row-title { font-weight:750; font-size:14px; }
.module-row-meta { color:var(--muted); font-size:11px; margin-top:4px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; background:var(--panel-3); color:var(--muted); font-size:10px; font-weight:750; white-space:nowrap; }
.badge.good { background:rgba(67,181,129,.13); color:#79d9ad; }
.badge.warn { background:rgba(231,176,71,.13); color:#f0c76e; }
.badge.bad { background:rgba(224,93,104,.13); color:#f28b94; }
.badge.info { background:rgba(93,168,232,.13); color:#91c9f8; }
.button { border:1px solid transparent; border-radius:9px; padding:9px 12px; cursor:pointer; background:var(--accent); color:white; font-weight:750; font-size:12px; }
.button:hover { filter:brightness(1.07); }
.button.secondary { background:var(--panel-3); border-color:var(--line); }
.button.subtle { background:transparent; border-color:var(--line); color:var(--muted); }
.button.subtle:hover { color:var(--text); background:var(--panel-2); }
.button:disabled { opacity:.45; cursor:not-allowed; filter:none; }
.icon-button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:23px; line-height:1; padding:7px; border-radius:7px; }
.icon-button:hover { color:var(--text); background:var(--panel-2); }
.action-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.action-row.tight { margin-top:0; margin-bottom:8px; gap:6px; }
.callout { border-left:3px solid var(--info); padding:11px 13px; background:rgba(93,168,232,.08); border-radius:0 9px 9px 0; }
.callout.warn { border-color:var(--warn); background:rgba(231,176,71,.08); }
.callout.bad { border-color:var(--bad); background:rgba(224,93,104,.08); }
.callout.good { border-color:var(--good); background:rgba(67,181,129,.08); }
.callout p:last-child { margin-bottom:0; }
.simple-list { margin:0; padding-left:20px; color:#d4d9df; line-height:1.6; }
.simple-list li + li { margin-top:5px; }
.source-list { display:flex; flex-direction:column; gap:8px; }
.source-link { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:11px 12px; border:1px solid var(--line); border-radius:9px; text-decoration:none; color:var(--text); background:var(--panel-2); }
.source-link:hover { border-color:#485264; }
.source-code { color:var(--accent-2); font-size:10px; font-weight:850; }
.source-title { font-size:12px; flex:1; }
.source-arrow { color:var(--dim); }
.tabbar { display:flex; gap:7px; flex-wrap:wrap; margin:20px 0 18px; }
.tab { border:1px solid var(--line); background:transparent; color:var(--muted); padding:8px 11px; border-radius:9px; cursor:pointer; font-size:12px; }
.tab.active { background:var(--panel-3); color:var(--text); }
.glossary-group { border-top:1px solid var(--line); padding:15px 0; }
.glossary-group:first-child { border-top:0; padding-top:0; }
.term-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.term { background:var(--panel-2); border-radius:9px; padding:11px; }
.term-name { font-weight:800; font-size:12px; }
.term-def { color:var(--muted); font-size:11px; line-height:1.5; margin-top:5px; }
.quiz-shell { max-width:760px; }
.quiz-progress { display:flex; align-items:center; gap:10px; margin:0 0 18px; color:var(--muted); font-size:11px; }
.quiz-progress .progress-track { flex:1; }
.question-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; }
.question-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:750; }
.question { font-size:18px; line-height:1.45; font-weight:760; margin:13px 0 18px; }
.options { display:flex; flex-direction:column; gap:9px; }
.option { display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left; padding:12px 13px; border-radius:10px; border:1px solid var(--line); background:var(--panel-2); cursor:pointer; color:var(--text); }
.option:hover { border-color:#4a5566; }
.option.selected { border-color:var(--accent-2); background:rgba(228,77,56,.10); }
.option.correct { border-color:var(--good); background:rgba(67,181,129,.10); }
.option.wrong { border-color:var(--bad); background:rgba(224,93,104,.10); }
.option-letter { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:#2a303b; font-size:10px; font-weight:900; flex:0 0 auto; }
.option-copy { font-size:13px; line-height:1.45; }
.feedback { margin-top:15px; }
.feedback-title { font-weight:850; font-size:13px; margin-bottom:5px; }
.feedback p { font-size:12px; }
.score-large { font-size:54px; font-weight:900; letter-spacing:-.06em; }
.score-large.good { color:#76d6aa; }
.score-large.warn { color:#efc66a; }
.score-large.bad { color:#ef858f; }
.weakness-item { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--panel); }
.weakness-name { font-weight:800; font-size:13px; }
.weakness-meta { font-size:11px; color:var(--muted); margin-top:4px; }
.report-pre { white-space:pre-wrap; word-break:break-word; background:#0a0c10; border:1px solid var(--line); padding:13px; border-radius:9px; max-height:370px; overflow:auto; font-size:10px; color:#c5ceda; }
.modal { width:min(650px,calc(100vw - 24px)); max-height:86vh; border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--text); padding:0; box-shadow:var(--shadow); }
.modal::backdrop { background:rgba(0,0,0,.68); }
.modal-inner { padding:18px; overflow:auto; max-height:86vh; }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.modal-head h2 { margin:0; }
.input-file { display:block; width:100%; padding:11px; border:1px dashed var(--line); border-radius:9px; color:var(--muted); background:var(--panel-2); }
.toast { position:fixed; z-index:80; left:50%; bottom:24px; transform:translateX(-50%); background:#232a34; border:1px solid #3b4655; color:var(--text); border-radius:10px; padding:10px 13px; font-size:12px; box-shadow:var(--shadow); }
.drawer-scrim { position:fixed; inset:68px 0 0 0; background:rgba(0,0,0,.55); z-index:39; }
.kbd { border:1px solid var(--line); border-bottom-width:2px; background:var(--panel-2); border-radius:5px; padding:1px 5px; font-size:10px; color:var(--muted); }
.exam-warning { display:flex; gap:10px; align-items:flex-start; }
.exam-warning strong { display:block; margin-bottom:4px; }
hr { border:0; border-top:1px solid var(--line); margin:22px 0; }

.visual-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.visual-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.lesson-visual { display:block; width:100%; height:auto; background:var(--panel); }
.visual-caption { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:11px 13px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.45; }
.visual-caption strong { color:var(--text); font-size:12px; }

@media (max-width:900px) {
  .grid.three, .grid.four { grid-template-columns:1fr; }
  .grid.two { grid-template-columns:1fr; }
  .term-list { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  #offline-status { display:none; }
  .mobile-only { display:inline-flex; }
  .brand-subtitle { display:none; }
  .topbar { padding:0 10px; height:62px; }
  .layout { display:block; min-height:calc(100vh - 62px); }
  .sidebar { position:fixed; z-index:40; top:62px; bottom:0; left:0; height:auto; width:min(86vw,310px); transform:translateX(-105%); transition:transform .18s ease; box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .drawer-scrim { inset:62px 0 0 0; }
  .main { padding:25px 16px 70px; }
  .brand-mark { width:34px; height:34px; border-radius:9px; }
  .brand-title { font-size:14px; }
  .button { min-height:40px; }
  .question-card { padding:17px; }
  .question { font-size:16px; }
  .option { padding:12px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }

@media (max-width: 760px) { .visual-grid { grid-template-columns:1fr; } .visual-caption { align-items:flex-start; flex-direction:column; } }

.oreilly-note { margin-top:8px; padding:8px 9px; border-left:2px solid var(--accent); background:rgba(67,181,129,.055); color:var(--text); font-size:10.5px; line-height:1.45; border-radius:0 7px 7px 0; }
.callout.good { border-color:rgba(67,181,129,.34); background:rgba(67,181,129,.07); }

.concept-source { margin-top:7px; font-size:10px; }
.concept-source a { color:var(--accent-2); text-decoration:none; }
.concept-source a:hover { text-decoration:underline; }


/* v2.3.0 MOBILE STRICT-QA HARDENING */
html { min-height:100%; -webkit-text-size-adjust:100%; }
body { min-height:100vh; min-height:100dvh; }
button, a, label { -webkit-tap-highlight-color:transparent; }
button, .button, .nav-item, .module-item, .tab, .source-link, .text-button { touch-action:manipulation; }
.mobile-offline-status { display:none; }
.source-title, .module-copy, .module-row > * { min-width:0; }
.source-title, .module-row-title, .module-row-meta, .term-def, .question, .option-copy { overflow-wrap:anywhere; }
.modal-inner, .report-pre { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

@media (max-width:900px) {
  #offline-status { display:none; }
  .mobile-only { display:inline-flex; }
  .mobile-offline-status { display:inline-flex; align-self:flex-start; margin-bottom:10px; }
  .brand-subtitle { display:none; }
  .topbar {
    height:calc(62px + env(safe-area-inset-top));
    min-height:calc(62px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  }
  .layout { display:block; min-height:calc(100vh - 62px); min-height:calc(100dvh - 62px - env(safe-area-inset-top)); }
  .sidebar {
    position:fixed; z-index:40;
    top:calc(62px + env(safe-area-inset-top)); bottom:auto; left:0;
    width:min(88vw,340px);
    height:calc(100vh - 62px - env(safe-area-inset-top));
    height:calc(100dvh - 62px - env(safe-area-inset-top));
    max-height:calc(100vh - 62px - env(safe-area-inset-top));
    max-height:calc(100dvh - 62px - env(safe-area-inset-top));
    overflow-x:hidden; overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
    transform:translateX(-105%); transition:transform .18s ease; box-shadow:var(--shadow);
  }
  .sidebar.open { transform:translateX(0); }
  .drawer-scrim { inset:calc(62px + env(safe-area-inset-top)) 0 0 0; overscroll-behavior:contain; touch-action:none; }
  body.drawer-open { position:fixed; left:0; right:0; width:100%; overflow:hidden; }
  .main { padding:25px 16px calc(70px + env(safe-area-inset-bottom)); }
  .brand-mark { width:34px; height:34px; border-radius:9px; }
  .brand-title { font-size:14px; }
  .icon-button { min-width:48px; min-height:48px; display:inline-grid; place-items:center; padding:0; }
  .button, .nav-item, .module-item, .tab, .source-link, .text-button { min-height:44px; }
  .nav-item, .module-item { padding:11px 12px; }
  .text-button { display:flex; align-items:center; width:100%; padding:10px 0; }
  .option { min-height:48px; padding:13px; }
  .question-card { padding:17px; }
  .question { font-size:16px; }
  .modal {
    width:min(650px,calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height:calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .modal-inner {
    max-height:calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:16px;
  }
  .toast { bottom:calc(18px + env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); text-align:center; }
}
@media (max-width:900px) and (orientation:landscape) {
  .sidebar { width:min(64vw,360px); }
  .main { padding-top:18px; }
}

/* v2.4.0 — contextual automotive Spanish */
.spanish-term {
  display:inline;
  appearance:none;
  border:0;
  border-bottom:1px dotted rgba(120,190,255,.78);
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
  padding:0 .05em;
  margin:0;
  cursor:pointer;
  text-align:inherit;
  border-radius:3px;
}
.spanish-term::after {
  content:' ES';
  font-size:.58em;
  vertical-align:super;
  letter-spacing:.04em;
  color:#7fc4ff;
  font-weight:800;
}
.spanish-term:hover,.spanish-term:focus-visible { background:rgba(75,150,255,.12); outline:2px solid rgba(100,175,255,.35); outline-offset:1px; }
.spanish-sheet-layer { position:fixed; inset:0; z-index:120; pointer-events:none; }
.spanish-sheet-layer.hidden { display:none; }
.spanish-sheet-scrim { position:absolute; inset:0; background:rgba(0,0,0,.62); opacity:0; transition:opacity .18s ease; }
.spanish-sheet { position:absolute; left:50%; bottom:0; width:min(760px,100%); max-height:min(82vh,760px); max-height:min(82dvh,760px); display:flex; flex-direction:column; transform:translate(-50%,105%); transition:transform .18s ease; background:#111319; border:1px solid #30343e; border-bottom:0; border-radius:20px 20px 0 0; box-shadow:0 -18px 60px rgba(0,0,0,.5); padding-bottom:env(safe-area-inset-bottom); overflow:hidden; }
.spanish-sheet-layer.open { pointer-events:auto; }
.spanish-sheet-layer.open .spanish-sheet-scrim { opacity:1; }
.spanish-sheet-layer.open .spanish-sheet { transform:translate(-50%,0); }
.spanish-sheet-handle-wrap { min-height:28px; display:grid; place-items:center; touch-action:none; }
.spanish-sheet-handle { width:48px; height:5px; border-radius:999px; background:#505663; }
.spanish-sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:2px 20px 14px; border-bottom:1px solid #2b2f38; }
.spanish-sheet-head h2 { margin:3px 0 0; font-size:clamp(20px,4vw,28px); }
.spanish-sheet-content { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:20px 20px calc(26px + env(safe-area-inset-bottom)); }
.spanish-translation { font-size:clamp(25px,6vw,38px); line-height:1.12; font-weight:850; letter-spacing:-.02em; color:#f4f6fb; }
.spanish-variants { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:12px; }
.spanish-source-note { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:14px; }
.spanish-sheet-section { margin-top:24px; }
.spanish-sheet-section h3 { margin:0 0 10px; }
.spanish-example-list { display:grid; gap:9px; }
.spanish-example { border:1px solid #2e333d; background:#181b22; border-radius:12px; padding:12px 14px; }
.spanish-example.reply { border-color:#30453c; background:#17201c; }
.spanish-example-es { font-size:16px; line-height:1.45; font-weight:700; }
.spanish-example-en { margin-top:4px; color:#9ca4b3; font-size:12px; line-height:1.4; }
.spanish-boundary { margin-top:22px; }
body.spanish-sheet-open { position:fixed; left:0; right:0; width:100%; overflow:hidden; }
@media (max-width:600px) {
  .spanish-sheet { max-height:88vh; max-height:88dvh; border-radius:18px 18px 0 0; }
  .spanish-sheet-head { padding-left:16px; padding-right:12px; }
  .spanish-sheet-content { padding:17px 16px calc(22px + env(safe-area-inset-bottom)); }
  .spanish-term { -webkit-tap-highlight-color:rgba(90,165,255,.16); }
}
@media (prefers-reduced-motion:reduce) {
  .spanish-sheet,.spanish-sheet-scrim { transition:none; }
}

/* ============================================================
   v2.5 · Counter search + Spanish listening/drill
   ============================================================ */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.counter-button { display:inline-flex; align-items:center; gap:6px; min-height:40px; }
.audio-chip { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:38px; padding:7px 10px; border:1px solid #3a414d; border-radius:999px; background:#1c2129; color:#eef2f8; font:inherit; font-size:12px; font-weight:750; cursor:pointer; white-space:nowrap; }
.audio-chip:hover,.audio-chip:focus-visible { border-color:#657287; background:#252b35; outline:none; }
.audio-chip.compact { min-height:34px; padding:5px 9px; }
.spanish-translation-row { display:grid; gap:12px; }
.spanish-audio-primary,.drill-audio-row { display:flex; flex-wrap:wrap; gap:8px; }
.audio-pack-status { display:inline-flex; margin-top:10px; padding:5px 8px; border-radius:999px; background:#252831; color:#aeb6c5; font-size:11px; font-weight:700; }
.audio-pack-status.ready { background:#173026; color:#9ce0b9; }
.variant-with-audio { display:inline-flex; gap:5px; align-items:center; }
.spanish-example-row { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }
.spanish-example-row .spanish-example-es { flex:1 1 auto; }

.counter-layer { position:fixed; inset:0; z-index:110; pointer-events:none; }
.counter-layer.hidden { display:none; }
.counter-scrim { position:absolute; inset:0; background:rgba(0,0,0,.68); opacity:0; transition:opacity .18s ease; }
.counter-panel { position:absolute; inset:18px; margin:auto; width:min(940px,calc(100% - 36px)); max-height:calc(100dvh - 36px); display:flex; flex-direction:column; background:#0f1116; border:1px solid #303641; border-radius:18px; box-shadow:0 24px 90px rgba(0,0,0,.6); overflow:hidden; transform:translateY(16px) scale(.985); opacity:0; transition:transform .18s ease,opacity .18s ease; }
.counter-layer.open { pointer-events:auto; }
.counter-layer.open .counter-scrim { opacity:1; }
.counter-layer.open .counter-panel { transform:none; opacity:1; }
.counter-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px 13px; border-bottom:1px solid #272c35; }
.counter-head h2 { margin:3px 0 0; font-size:clamp(20px,4vw,29px); }
.counter-tabs { display:flex; gap:6px; padding:8px 20px; border-bottom:1px solid #272c35; background:#12151b; }
.counter-tab { min-height:38px; padding:7px 13px; border:1px solid transparent; border-radius:9px; background:transparent; color:#a9b1c0; font:inherit; font-weight:750; cursor:pointer; }
.counter-tab.active { background:#222732; color:#fff; border-color:#343b48; }
.counter-body { overflow:hidden; min-height:0; flex:1; }
.counter-pane { height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:16px 20px calc(24px + env(safe-area-inset-bottom)); }
.counter-search-box { position:sticky; top:-16px; z-index:4; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; background:#171b23; border:1px solid #3b4351; border-radius:14px; padding:6px 7px 6px 13px; box-shadow:0 9px 25px rgba(0,0,0,.22); }
.counter-search-icon { font-size:24px; color:#aeb8c8; }
.counter-search-box input { min-width:0; width:100%; min-height:46px; border:0; outline:0; background:transparent; color:#f5f7fb; font:inherit; font-size:16px; }
.counter-search-box input::placeholder { color:#788294; }
.counter-mic-tip { display:flex; gap:8px; align-items:flex-start; margin:10px 4px 16px; color:#939cac; font-size:12px; line-height:1.45; }
.counter-results { display:grid; gap:12px; }
.counter-result-summary { color:#a9b1be; font-size:12px; margin:2px 2px 0; }
.counter-result-card { border:1px solid #2e3541; border-radius:14px; background:#161a21; padding:15px; }
.counter-result-card h3 { margin:2px 0 0; font-size:20px; }
.counter-result-card p { margin:10px 0; color:#c1c7d2; line-height:1.52; }
.counter-result-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.counter-spanish-line { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:11px; font-size:18px; }
.counter-variants { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }
.counter-phrases { display:grid; gap:7px; margin-top:12px; }
.counter-phrase { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:9px 10px; background:#11151b; border:1px solid #282e38; border-radius:10px; }
.counter-phrase div:first-child { display:grid; gap:3px; }
.counter-phrase span { color:#919aaa; font-size:11px; }
.counter-modules { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.counter-module-link { display:inline-flex; padding:7px 9px; border-radius:8px; background:#202630; color:#c9d9ff; font-size:11px; text-decoration:none; }
.counter-boundary { margin-top:13px; padding:10px 11px; border-left:3px solid #e5aa39; background:#2a2418; color:#e8dec8; font-size:11px; line-height:1.45; }
.counter-empty { min-height:180px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:8px; color:#aab2c0; padding:28px 12px; }
.counter-empty strong { color:#eef2f8; font-size:18px; }
.counter-empty span { max-width:620px; line-height:1.55; }
.counter-quick { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:8px; }
.counter-quick button { min-height:36px; border:1px solid #353d49; border-radius:999px; background:#1b2028; color:#d8dee9; padding:7px 11px; cursor:pointer; }
body.counter-open { position:fixed; left:0; right:0; width:100%; overflow:hidden; }

.drill-card { max-width:700px; margin:6px auto; padding:18px; border:1px solid #303743; border-radius:15px; background:#161a21; }
.drill-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.drill-prompt { margin:26px 0 12px; font-size:clamp(30px,7vw,48px); font-weight:850; letter-spacing:-.025em; }
.drill-prompt.spanish { color:#f3f6fb; }
.drill-listen { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:26px 0 10px; }
.drill-big-play { min-height:52px; padding:10px 17px; border:1px solid #566477; border-radius:12px; background:#283343; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.drill-options { display:grid; gap:8px; margin:18px 0; }
.drill-option { width:100%; min-height:48px; text-align:left; border:1px solid #343b47; border-radius:11px; padding:10px 13px; background:#1d222b; color:#e9edf4; font:inherit; cursor:pointer; }
.drill-option.correct { border-color:#427c5d; background:#173022; }
.drill-option.wrong { border-color:#87494c; background:#361c20; }
.drill-feedback { display:grid; gap:3px; margin:13px 0; padding:11px; border-radius:10px; }
.drill-feedback.good { background:#173022; color:#b8e8c8; }
.drill-feedback.bad { background:#361c20; color:#f0c1c4; }
.drill-reveal { display:grid; gap:10px; margin:18px 0; padding:16px; background:#10151c; border:1px solid #303846; border-radius:12px; }
.drill-reveal > strong { font-size:28px; }
.drill-actions { display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width:760px) {
  .topbar-actions { gap:5px; }
  .counter-button span { display:none; }
  .counter-button { min-width:42px; padding-left:10px; padding-right:10px; }
  .counter-panel { inset:auto 0 0 0; width:100%; max-height:94dvh; border-radius:18px 18px 0 0; border-bottom:0; transform:translateY(105%); }
  .counter-layer.open .counter-panel { transform:translateY(0); }
  .counter-head { padding:15px 14px 11px; }
  .counter-tabs { padding:7px 14px; }
  .counter-pane { padding:14px 14px calc(18px + env(safe-area-inset-bottom)); }
  .counter-search-box { top:-14px; }
  .counter-result-top { align-items:flex-start; }
  .counter-result-top .button { min-height:36px; padding:6px 8px; font-size:11px; }
  .counter-phrase { flex-direction:column; }
  .counter-phrase .audio-chip { align-self:flex-start; }
  .spanish-example-row { flex-direction:column; }
  .spanish-example-row .audio-chip { align-self:flex-start; }
}
@media (max-width:380px) {
  .counter-head h2 { font-size:19px; }
  .counter-mic-tip { font-size:11px; }
  .counter-result-card { padding:12px; }
  .audio-chip { min-height:40px; }
}
@media (prefers-reduced-motion:reduce) {
  .counter-panel,.counter-scrim { transition:none; }
}


/* v2.6 public deployment + explicit offline Spanish audio download */
.public-study-note { border-color:#38404e; background:linear-gradient(145deg,#171b22,#12151a); }
.public-study-note h2 { margin:.3rem 0 .7rem; }
.audio-pack-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.audio-pack-row .audio-pack-status { margin-top:0; }
.audio-pack-download:disabled { opacity:.72; cursor:default; }
@media (max-width:600px) { .audio-pack-row { align-items:flex-start; } }