:root {
  /* ---- color: cool off-white paper, near-monochrome slate, one quiet accent ---- */
  --bg: #f4f5f6;
  --panel: #ffffff;
  --panel-2: #e9ebed;
  --border: rgba(20,22,26,0.12);
  --hairline: rgba(20,22,26,0.07);
  --text: #191b1f;
  --muted: #6b7079;
  --accent: #2c3138;          /* slate near-black: the primary action */
  --link: #3a4a5c;            /* a hair of cool tint so text links stay legible */
  --accent-2: #5e6b7a;        /* muted steel: secondary tags */
  --on-accent: #f4f5f6;
  /* P&L vocabulary — green=correct/profit, red=wrong/loss, and NOTHING else.
     Nudged cooler/more muted to sit with the slate palette, still clearly green/red. */
  --good: #2d7e5e;
  --good-bg: #e6efea;
  --bad: #bd4339;
  --bad-bg: #f5e7e5;
  /* amber = Bloomberg "neutral data highlight": active timer, current round */
  --warn: #a9762a;
  /* difficulty ramp — cool gray, darkening = harder (NEVER red/green; that's P&L) */
  --diff1: #9aa0a8;
  --diff2: #7f8690;
  --diff3: #646b76;
  --diff4: #4a515b;
  --diff5: #313842;
  --topbar: rgba(244,245,246,0.82);
  --chip: #00000000;

  /* ---- type: Inter (UI/prose) + JetBrains Mono (ALL numerals) + serif notes ---- */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* modular type scale (16 · 20 · 25 · 31 · 39 · 49) */
  --t-base: 16px;  --t-1: 20px;  --t-2: 25px;  --t-3: 31px;  --t-4: 39px;  --t-5: 49px;
  --measure: 66ch;            /* editorial prose measure */

  /* ---- radius: two values + a pill + a tiny inline-chip ---- */
  --r-chip: 6px;             /* inline code / micro-badges */
  --r-control: 8px;          /* buttons, inputs, chips, dropdowns */
  --r-panel: 12px;           /* cards, panels, modals */
  --r-pill: 999px;
  --radius: 12px;            /* legacy alias → panel */

  /* ---- space: 8px scale with 4px half-steps ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* ---- one soft shadow, reserved for truly floating elements ---- */
  --shadow-float: 0 10px 28px rgba(20,18,15,0.14);
  --motion: 130ms;           /* fast, functional */
}
:root[data-theme="dark"] {
  /* cool near-black (NOT pure #000 — avoids halation); light accent = filled action */
  --bg: #16181b;
  --panel: #1d2024;
  --panel-2: #23272c;
  --border: rgba(255,255,255,0.10);
  --hairline: rgba(255,255,255,0.07);
  --text: #e7e8ea;
  --muted: #949aa2;
  --accent: #e3e6ea;          /* light slate: a filled button reads on the dark canvas */
  --link: #aab8c9;            /* legible cool link on dark */
  --accent-2: #9aa6b3;
  --on-accent: #16181b;
  --good: #53ad88;
  --good-bg: #15251e;
  --bad: #de7268;
  --bad-bg: #2c1c1a;
  --warn: #d2a93a;
  --diff1: #767d87;
  --diff2: #8c939d;
  --diff3: #a3aab3;
  --diff4: #bcc2ca;
  --diff5: #d7dce1;
  --topbar: rgba(22,24,27,0.82);
  --shadow-float: 0 10px 30px rgba(0,0,0,0.42);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  min-height: 100vh;
  /* lock tabular, lining figures globally — no digit jitter as scores/timers tick.
     The single most trader-credible decision in the system. */
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); }
/* display headings: tight tracking, the Linear/editorial register */
h1, h2, h3 { letter-spacing: -0.01em; }
/* consistent, accessible focus ring (keyboard nav) without stealing mouse focus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-chip);
}

header.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--topbar); backdrop-filter: blur(10px); z-index: 10;
}
.brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brand h1 { font-size: 19px; margin: 0; letter-spacing: 0.3px; white-space: nowrap; }
.brand .sub { color: var(--muted); font-size: 13px; }
/* the page subtitle is decorative once the active nav item names the page —
   drop it on tighter widths so the 10-item nav doesn't collide with the pills */
@media (max-width: 1280px) { .brand .sub { display: none; } }
/* the top bar's right side: just the account zone + theme toggle, no wrapping */
.pills { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.pill { background: transparent; border: none; padding: 6px 0; font-size: 13px; color: var(--muted); }
.pill b { color: var(--text); }
.pill.streak b { color: var(--accent-2); }
a.pill.solvedlink {
  color: var(--muted); text-decoration: none; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; transition: border-color .12s, color .12s, background .12s;
}
a.pill.solvedlink:hover { color: var(--text); border-color: var(--accent); background: var(--panel); }
a.pill.solvedlink:hover b { color: var(--accent); }
a.pill.solvedlink::after { content: " ›"; color: var(--muted); }
a.pill.solvedlink:hover::after { color: var(--accent); }

/* slim page-status bar under the nav (Solved / Streak / Accuracy / Due / Tracker),
   moved out of the cluttered top bar by nav.js. Plain muted text, not boxed pills. */
.qd-subbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 8px 22px; border-bottom: 1px solid var(--hairline); background: var(--bg); font-size: 12.5px; }
.qd-subbar:empty { display: none; }
.qd-subbar .pill { padding: 0; border: none; background: transparent; border-radius: 0; font-weight: 400; color: var(--muted); }
.qd-subbar .pill b { color: var(--text); }
.qd-subbar a.pill { text-decoration: none; }
.qd-subbar a.pill.solvedlink, .qd-subbar a.pill.duelink, .qd-subbar a.pill.ghsync-pill { background: transparent; border: none; padding: 0; font-weight: 400; border-radius: 0; }
.qd-subbar a.pill.solvedlink:hover, .qd-subbar a.pill.ghsync-pill:hover { background: transparent; border-color: transparent; color: var(--text); }
.qd-subbar a.pill.solvedlink::after { content: " ›"; }
.qd-subbar a.pill.duelink, .qd-subbar a.pill.duelink b { color: var(--accent); }
.qd-subbar a.pill.ghsync-pill.on { color: var(--good); }

.layout {
  display: grid; grid-template-columns: 260px minmax(0,1fr) 280px; gap: 18px;
  max-width: 1340px; margin: 20px auto; padding: 0 18px;
}
@media (max-width: 1080px) { .layout { grid-template-columns: 1fr; } }

.panel { background: transparent; border: none; padding: 0; }
.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 0 0 12px; }

.filters label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 5px; }
.filters select, .filters input[type="text"] {
  width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 14px;
}
.diffrow { display: flex; gap: 6px; flex-wrap: wrap; }
.diffrow .dchip {
  cursor: pointer; user-select: none; border: 1px solid var(--border); background: var(--panel-2);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--muted);
}
.diffrow .dchip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.checkline { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); cursor: pointer; }

.count-note { color: var(--muted); font-size: 12px; margin-top: 14px; }

.problem-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { font-size: 12px; border: none; border-radius: 6px; padding: 3px 8px; background: var(--panel-2); color: var(--muted); }
.chip.topic { color: var(--accent); background: transparent; padding-left: 0; font-weight: 600; }
.chip.solved { color: var(--good); border-color: rgba(92,184,122,0.32); background: var(--good-bg); }
.chip.firm { color: var(--accent-2); }
.chip.ext { color: var(--accent-2); }
.extnote { font-size: 12.5px; color: var(--muted); margin: 2px 0 14px; padding: 8px 12px; border-left: 3px solid var(--accent-2); background: var(--panel-2); border-radius: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.extnote .ext-lead { color: var(--accent-2); font-weight: 600; }
.extnote a.basebtn {
  margin-left: auto; white-space: nowrap; text-decoration: none; cursor: pointer; font-weight: 600;
  color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
}
.extnote a.basebtn:hover { filter: brightness(0.93); }
.stars { color: var(--warn); letter-spacing: 2px; font-size: 13px; }
.idtag { margin-left: auto; color: var(--muted); font-size: 12px; font-family: var(--mono); }
.idtag.copyable { cursor: pointer; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; transition: border-color .12s, color .12s; }
.idtag.copyable:hover { color: var(--accent); border-color: var(--border); }

.statement { font-size: 16px; }
.statement p { margin: 0 0 10px; }

.answer-area { margin-top: 18px; }
.answer-area input.ansbox {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 12px 14px; font-size: 16px; font-family: var(--mono);
}
.answer-area input.ansbox:focus { outline: none; border-color: var(--accent); }
.mc-list { display: flex; flex-direction: column; gap: 8px; }
.mc-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: var(--panel-2); cursor: pointer; }
.mc-item.sel { border-color: var(--accent); }
.mc-item input { margin-top: 4px; }

.fmt-help { color: var(--muted); font-size: 12px; margin-top: 6px; }
.fmt-help code { background: var(--panel-2); padding: 1px 5px; border-radius: 6px; font-family: var(--mono); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
button {
  font-family: var(--sans); font-size: 14px; border-radius: 8px; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
button.primary:hover { filter: brightness(0.93); }
button.ghost { background: transparent; }

.feedback { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; display: none; }
.feedback.show { display: block; }
.feedback.correct { background: var(--good-bg); border: 1px solid transparent; color: var(--good); }
.feedback.incorrect { background: var(--bad-bg); border: 1px solid transparent; color: var(--bad); }
.feedback.neutral { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }

.hints { margin-top: 14px; }
.hint { background: var(--panel-2); border-left: 3px solid var(--accent-2); border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.hint .lbl { color: var(--accent-2); font-weight: 600; font-size: 12px; }

.solution { position: relative; margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 14px; display: none; }
.sol-close { position: absolute; top: 12px; right: 0; background: transparent; border: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 3px 7px; border-radius: 6px; }
.sol-close:hover { color: var(--bad); background: var(--panel-2); border-color: transparent; }
.solution.show { display: block; }
.solution h3 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 8px; }
.solution .body { font-size: 15px; background: transparent; border: none; padding: 0; }
.selfgrade { display: none; gap: 10px; margin-top: 12px; }
.selfgrade.show { display: flex; }

/* multi-part (parts reveal) problems */
.parts { margin-top: 18px; }
.part { border: none; border-left: 2px solid var(--border); border-radius: 0; padding: 4px 0 10px 16px; margin: 0 0 14px; background: transparent; }
.part.locked { display: none; }
.part-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent-2); font-weight: 600; margin-bottom: 8px; }
.part-prompt { font-size: 15.5px; }
.part-prompt p { margin: 0 0 8px; }
.part .answer-area { margin-top: 12px; }
.part .actions { margin-top: 12px; }
.part .solution { margin-top: 14px; }
.pmulti { font-size: 11px; color: var(--accent); border: 1px solid var(--accent-2); border-radius: 999px; padding: 2px 8px; flex: none; }

/* curated intro-track selector (Quant 75 / 150 / 250 / All) — custom dropdown (reuses .dd/.ddpanel) */
.tierbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.tierlbl { font-size: 13px; color: var(--muted); font-weight: 600; }
.tierdd .ddpanel { min-width: 210px; }
.tierdd .ddbtn .tsub { color: var(--muted); font-size: 11.5px; }
a.ddopt { text-decoration: none; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
a.ddopt.on { color: var(--accent); font-weight: 600; }
a.ddopt i { font-style: normal; color: var(--muted); font-size: 11.5px; }
.tierhint { font-size: 12px; color: var(--muted); }
.roadmap-tierbar { margin: 6px 0 16px; }

/* per-problem "core idea" link to the concept notes */
.notelink { display: none; font-size: 13px; color: var(--muted); margin: 14px 0 0; padding: 0; background: transparent; border: none; }
.notelink.show { display: block; }
.notelink a { color: var(--accent); text-decoration: none; font-weight: 600; }
.notelink a:hover { text-decoration: underline; }
.notelink .nl-ico { margin-right: 4px; }
.ci-toggle { display: flex; align-items: center; gap: 4px; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--accent); font-weight: 600; cursor: pointer; }
.ci-toggle:hover { border-color: var(--accent); }
.ci-toggle b { color: var(--accent); font-weight: 700; }
.ci-caret { margin-left: auto; color: var(--muted); font-size: 11px; }
.ci-panel { display: none; margin-top: 8px; padding: 4px 14px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; animation: ci-unfold .16s ease; }
.notelink.ci-open .ci-panel { display: block; }
.ci-summary { font-size: 13px; color: var(--muted); margin: 8px 0; font-style: italic; }
.ci-full { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--accent); text-decoration: none; font-weight: 600; }
.ci-full:hover { text-decoration: underline; }
@keyframes ci-unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* related problems (bottom of each problem) */
.related { display: none; margin-top: 22px; border-top: 1px dashed var(--border); padding-top: 14px; }
.related.show { display: block; }
.related h3 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 10px; }
.rel-list { display: flex; flex-direction: column; gap: 2px; }
.rel-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); border: 1px solid transparent; }
.rel-row:hover { background: var(--panel-2); border-color: var(--border); }
.rel-row.solved .rel-title { color: var(--muted); }
.rel-ck { width: 14px; color: var(--good); font-size: 13px; flex: none; }
.rel-star { width: 12px; color: var(--accent-2); font-size: 12px; flex: none; }
.rel-row .dbadge { flex: none; }
.rel-title { flex: 1; font-size: 14px; }
.rel-topic { font-size: 12px; color: var(--muted); flex: none; white-space: nowrap; }
@media (max-width: 560px) { .rel-topic { display: none; } }

/* concept notes page */
.notes-wrap { max-width: 1240px; margin: 0 auto; padding: 20px 22px 60px; }
.notes-intro { color: var(--muted); font-size: 14px; margin: 4px 0 18px; line-height: 1.55; }
.notes-layout { display: grid; grid-template-columns: 248px 1fr; gap: 28px; align-items: start; }
.notes-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; border: none; border-radius: 12px; padding: 6px; background: var(--panel-2); }
.notes-toc .toc-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); font-weight: 700; padding: 4px 8px 8px; }
.toc-link { display: block; font-size: 13px; color: var(--text); text-decoration: none; padding: 5px 8px; border-radius: 6px; }
.toc-link:hover { background: var(--panel-2); }
.toc-link.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.notes-body { min-width: 0; }
.note-section { border-bottom: 1px solid var(--border); padding: 8px 0 22px; margin-bottom: 18px; scroll-margin-top: 14px; }
.note-title { font-size: 19px; margin: 0 0 6px; }
.note-summary { color: var(--accent-2); font-size: 14px; margin: 0 0 12px; font-style: italic; }
.note-body { font-size: 14.5px; line-height: 1.6; }
.note-body h3, .note-body h4 { font-size: 14px; margin: 14px 0 6px; color: var(--text); }
.note-body ul, .note-body ol { margin: 6px 0 10px; padding-left: 22px; }
.note-body li { margin: 3px 0; }
.note-body p { margin: 8px 0; }
.note-body code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; font-size: 13px; }
.note-refs { margin-top: 14px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.note-refs .refs-lbl { color: var(--muted); font-weight: 600; }
.note-ref { color: var(--accent); text-decoration: none; }
.note-ref:hover { text-decoration: underline; }
/* embedded practice question with a reveal-on-click solution */
.note-practice { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 12px 15px; margin: 16px 0; background: var(--panel-2); }
.np-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.np-q { font-size: 14.5px; line-height: 1.6; }
.np-q p:first-child { margin-top: 0; }
.np-q p:last-child { margin-bottom: 0; }
.np-sol { margin-top: 10px; }
.np-sol > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; list-style: none; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.np-sol > summary::-webkit-details-marker { display: none; }
.np-sol > summary::before { content: '▸'; font-size: 11px; }
.np-sol[open] > summary::before { content: '▾'; }
.np-sol > summary:hover { text-decoration: underline; }
.np-solbody { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 14px; line-height: 1.6; }
.np-solbody p:first-child { margin-top: 0; }
@media (max-width: 760px) { .notes-layout { grid-template-columns: 1fr; } .notes-toc { position: static; max-height: none; } }

.stat-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: var(--muted); }
.bar { height: 7px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.topiclist { font-size: 13px; }
.topiclist .t { display: flex; justify-content: space-between; margin: 8px 0 3px; color: var(--muted); }
.reset { margin-top: 14px; }
.reset button { width: 100%; font-size: 13px; }

.empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.empty code { background: var(--panel-2); padding: 2px 6px; border-radius: 6px; font-family: var(--mono); }

/* roadmap */
.navlink { margin-left: 16px; color: var(--muted); font-size: 13px; text-decoration: none; }
.navlink:hover { color: var(--accent); }
.roadmap-wrap { max-width: 920px; margin: 22px auto; padding: 0 18px; }
.roadmap-intro { color: var(--muted); font-size: 14px; line-height: 1.6; }
.roadmap-intro a { color: var(--link); }
.track { position: relative; margin-top: 18px; }
.stage { position: relative; background: transparent; border: none; padding: 4px 0 4px 66px; margin-bottom: 16px; }
.stage .num { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); z-index: 1; }
.stage.done .num { background: var(--good-bg); border-color: transparent; color: var(--good); }
.stage::after { content: ''; position: absolute; left: 32px; top: 52px; bottom: -16px; width: 2px; background: var(--border); }
.stage:last-child::after { display: none; }
.stage h3 { margin: 0 0 4px; font-size: 16px; }
.stage .goal { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.stage .learn { font-size: 13px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.stage .learn a { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; color: var(--accent); text-decoration: none; }
.stage .learn a:hover { border-color: var(--accent); }
.stage .checkpoint { font-size: 12.5px; color: var(--muted); border-left: 3px solid var(--accent-2); padding-left: 10px; margin-bottom: 12px; }
.stage .checkpoint b { color: var(--text); }
.stage .prow { display: flex; align-items: center; gap: 12px; }
.stage .prow .lbl { font-size: 12px; color: var(--muted); min-width: 70px; }
.stage .pbar { height: 7px; background: var(--panel-2); border-radius: 999px; overflow: hidden; flex: 1; }
.stage .pbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.stage .practice { background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; padding: 7px 14px; font-size: 13px; text-decoration: none; white-space: nowrap; }
.stage .practice:hover { filter: brightness(0.93); }

/* roadmap tree (NeetCode-style graph) */
.tree { width: 100%; height: auto; display: block; }
.tree .edge { fill: none; stroke: var(--border); stroke-width: 2; }
.tree .node { cursor: pointer; }
.tree .node rect { fill: var(--panel-2); stroke: var(--border); stroke-width: 1.4; transition: stroke .15s ease, fill .15s ease; }
.tree .node .nt { fill: var(--text); font-size: 14px; font-weight: 600; text-anchor: middle; }
.tree .node .ns { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.tree .node .track { fill: var(--panel-2); }
.tree .node .fill { fill: var(--accent); }
.tree .node:hover rect { stroke: var(--accent); fill: var(--panel); }
.tree .node.started rect { stroke: var(--accent); }
.tree .node.done rect { stroke: var(--good); fill: var(--good-bg); }
.tree .node.done .fill { fill: var(--good); }

/* history */
.hist-wrap { max-width: 920px; margin: 22px auto; padding: 0 18px; }
.hist-summary { display: flex; gap: 26px; flex-wrap: wrap; margin: 8px 0 20px; }
.hist-summary .m { font-size: 13px; color: var(--muted); }
.hist-summary .m b { color: var(--text); font-size: 20px; display: block; font-weight: 700; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hist-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.hist-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.hist-table tr:hover td { background: var(--panel); }
.hist-r { font-weight: 600; }
.hist-r.ok { color: var(--good); }
.hist-r.no { color: var(--bad); }
.hist-empty { color: var(--muted); padding: 32px 0; }

/* problem list (NeetCode-style) */
.list-wrap { max-width: 940px; margin: 18px auto; padding: 0 18px; }
.list-head { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 2px; flex-wrap: wrap; }
.list-head h2 { font-size: 19px; margin: 0; }
.list-head .scope { color: var(--muted); font-size: 13px; }
.list-progress { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.list-progress a { color: var(--link); }
.bucket { border-radius: 12px; margin-bottom: 6px; overflow: hidden; }
.bucket > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.bucket > summary::-webkit-details-marker { display: none; }
.bucket > summary .bt { font-weight: 600; font-size: 14px; }
.bucket > summary .bc { color: var(--muted); font-size: 12px; }
.bucket > summary .bbar { height: 5px; background: var(--panel-2); border-radius: 999px; overflow: hidden; width: 150px; margin-left: auto; }
.bucket > summary .bbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bucket[open] > summary { border-bottom: 1px solid var(--border); }
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); }
.prow:first-of-type { border-top: none; }
.prow:hover { background: var(--panel); }
.prow .ck { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--good); }
.prow.solved .ck { border-color: var(--good); background: var(--good-bg); }
.prow .pstars { color: var(--warn); font-size: 12px; letter-spacing: 1px; min-width: 62px; flex: none; }
.prow .ptitle { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pfirm { font-size: 11px; color: var(--accent-2); flex: none; }
.prow .pext { font-size: 11px; color: var(--accent-2); flex: none; }
.prow .pmark { font-size: 12px; flex: none; }
.prow .pmark.save { color: var(--accent-2); }
.prow .pmark.rev { color: var(--accent); }
.prow .pmark.cnt { color: var(--muted); font-size: 11px; }
.rdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
/* self-rating dot — difficulty, so amber ramp (not P&L red/green) */
.rdot.easy { background: var(--diff2); } .rdot.medium { background: var(--diff3); } .rdot.hard { background: var(--diff4); }
.list-filters { display: block; margin: 8px 0 16px; }
.fgroup { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.fgroup .flabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); width: 74px; flex: none; }
.fchip { cursor: pointer; user-select: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; transition: border-color .12s, background .12s; }
.fchip i { font-style: normal; opacity: 0.55; font-size: 11px; margin-left: 3px; }
.fchip:hover { border-color: var(--accent); }
.fchip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fchip.on i { opacity: 0.85; }
.fsearch { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; min-width: 150px; }
.fsearch:focus { outline: none; border-color: var(--accent); }
.fclear { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.fclear:hover { border-color: var(--bad); color: var(--bad); }
.fcount { font-size: 12.5px; color: var(--text); margin-left: auto; font-weight: 600; }

/* problems page toolbar (overhaul) */
.ptoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 16px; padding: 0; background: transparent; border: none; }
.psearch { flex: 1 1 180px; min-width: 150px; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 12px; font-size: 13px; }
.psearch:focus { outline: none; border-color: var(--accent); }
.dd { position: relative; }
.ddbtn { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ddbtn:hover { border-color: var(--accent); }
.ddbtn b { color: var(--accent); font-weight: 600; }
.ddbtn .caret { color: var(--muted); font-size: 10px; }
.ddbadge { background: var(--accent); color: var(--on-accent); border-radius: 999px; font-size: 11px; padding: 0 6px; min-width: 16px; text-align: center; line-height: 16px; }
.ddbadge:empty { display: none; }
.ddpanel { display: none; position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; min-width: 190px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 5px; box-shadow: 0 10px 28px rgba(20,18,15,0.18); }
.ddpanel.wide { width: 280px; }
.dd[data-dd="company"] .ddpanel { left: auto; right: 0; }
.dd[data-dd="topic"] .ddpanel { width: 320px; left: auto; right: 0; }
.dd.open .ddpanel { display: block; }
.ddopt { padding: 7px 10px; font-size: 13px; border-radius: 8px; cursor: pointer; color: var(--text); }
.ddopt:hover { background: var(--panel-2); }
.ddsearch { width: 100%; box-sizing: border-box; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; margin-bottom: 5px; }
.ddsearch:focus { outline: none; border-color: var(--accent); }
.ddlist { max-height: 280px; overflow-y: auto; }
.ddrow { display: flex; align-items: center; gap: 8px; padding: 6px 9px; font-size: 13px; border-radius: 8px; cursor: pointer; color: var(--text); }
.ddrow:hover { background: var(--panel-2); }
.ddrow span { flex: 1; }
.ddrow i { font-style: normal; color: var(--muted); font-size: 11px; }
.ddrow.on { color: var(--accent); }
.ddrow input { accent-color: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segbtn { padding: 7px 11px; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; border-left: 1px solid var(--border); background: transparent; }
.segbtn:first-child { border-left: none; }
.segbtn:hover { color: var(--text); }
.segbtn.on { background: var(--accent); color: var(--on-accent); }
.ptoggle { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.ptoggle.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pcount { font-size: 13px; color: var(--text); font-weight: 600; margin-left: auto; }
.pclear { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.pclear:hover { border-color: var(--bad); color: var(--bad); }
.prandom { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.prandom:hover { background: var(--accent); color: var(--on-accent); }
.prandom:disabled { opacity: 0.45; cursor: default; border-color: var(--border); color: var(--muted); background: var(--panel-2); }
.flatlist { }
.dbadge { flex: none; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: none; background: var(--panel-2); }
/* difficulty 1→5 as one amber→bronze hue (darkening = harder); never red/green */
.dbadge { font-family: var(--mono); }
.dbadge.d1 { color: var(--diff1); }
.dbadge.d2 { color: var(--diff2); }
.dbadge.d3 { color: var(--diff3); }
.dbadge.d4 { color: var(--diff4); }
.dbadge.d5 { color: var(--diff5); }
.prow .ptopic { color: var(--muted); font-size: 11.5px; flex: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .prow .ptopic { display: none; } .ptoolbar { padding: 8px; } }

/* practice controls: save / rating / attempt stats */
.pcontrols { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 2px; }
.pcontrols button { font-size: 12.5px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.pcontrols button:hover { border-color: var(--accent); }
.pc-save.on { color: var(--accent-2); border-color: var(--accent-2); }
.pc-review.on { color: var(--accent); border-color: var(--accent); }
.pc-rlabel { color: var(--muted); font-size: 12px; margin: 0 2px 0 6px; }
.pc-rate { text-transform: capitalize; }
/* compact icon toggles for the secondary marking actions (save / review / playlist) */
.pc-ico { width: 30px; height: 30px; padding: 0; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.pcontrols .pc-pl { margin-right: 2px; }
/* "how hard for you" self-rating = difficulty → amber ramp, not P&L red/green */
.pc-rate.on.r-easy { color: var(--diff2); border-color: var(--diff2); }
.pc-rate.on.r-medium { color: var(--diff3); border-color: var(--diff3); }
.pc-rate.on.r-hard { color: var(--diff4); border-color: var(--diff4); }
.pc-stats { margin-left: auto; color: var(--muted); font-size: 12px; }
.pc-stats .seq { font-family: var(--mono); letter-spacing: 1px; }
.pc-stats .ok { color: var(--good); } .pc-stats .no { color: var(--bad); }

/* ---- practice player: one centered problem + a slim control bar ---- */
.drill-wrap { max-width: 880px; margin: 18px auto 64px; padding: 0 18px; }
.drillbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: transparent; border: none;
  padding: 4px 0; margin-bottom: 10px;
}
.db-back { color: var(--accent); text-decoration: none; font-size: 13px; white-space: nowrap; }
.db-back:hover { text-decoration: underline; }
.db-mid { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.db-pos {
  font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 11px; white-space: nowrap;
}
.db-sum { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.db-nav button { font-size: 13px; padding: 6px 11px; }
.db-reset {
  color: var(--muted); background: transparent; border: 1px solid transparent;
  padding: 6px 8px; font-size: 15px; line-height: 1; border-radius: 8px;
}
.db-reset:hover { color: var(--bad); background: var(--panel-2); }
@media (max-width: 720px) {
  .drillbar { position: static; }
  .db-sum { flex-basis: 100%; order: 4; }
  .db-nav { width: 100%; }
}

/* ---- list pagination ---- */
.pgsize { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.pgsize select {
  background: transparent; color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px 6px; font-size: 12px; cursor: pointer;
}
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 18px 0 4px; }
.pgbtn {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.pgbtn:hover:not(:disabled) { border-color: var(--accent); }
.pgbtn:disabled { opacity: 0.4; cursor: default; }
.pginfo { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---- learning-path stage outline ---- */
.stagegrp > summary { background: var(--panel); }
.stagegrp > summary .snum {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--accent); font-size: 12px; font-weight: 700;
}
.stagegrp > summary .bt { font-weight: 600; }

/* light/dark toggle */
.theme-toggle { margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--r-pill); cursor: pointer; flex: none; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { display: block; }

/* playlists page */
.pl-wrap { max-width: 880px; margin: 18px auto 64px; padding: 0 18px; }
.pl-intro { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 6px 0 16px; }
.pl-new { display: flex; gap: 10px; margin-bottom: 22px; }
.pl-name-input { flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 13px; font-size: 14px; }
.pl-name-input:focus { outline: none; border-color: var(--accent); }
.pl-card { margin-bottom: 26px; }
.pl-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.pl-titlewrap { flex: 1; min-width: 200px; }
.pl-title { font-size: 17px; margin: 0 0 3px; }
.pl-meta { font-size: 12.5px; color: var(--muted); }
.pl-tag { color: var(--accent); font-weight: 600; }
.pl-tag.fixed { color: var(--muted); }
.pl-actions { display: flex; gap: 8px; align-items: center; }
.pl-practice { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pl-practice:hover { filter: brightness(0.93); }
.pl-empty-note { color: var(--muted); font-size: 12.5px; }
.pl-desc { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 8px 0 10px; }
.pl-rows { margin-top: 8px; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 8px; text-decoration: none; color: var(--text); border-top: 1px solid var(--border); }
.pl-row:first-child { border-top: none; }
.pl-row:hover { background: var(--panel-2); }
.pl-ck { width: 14px; color: var(--good); font-size: 13px; flex: none; }
.pl-rtitle { flex: 1; font-size: 14px; }
.pl-rtopic { font-size: 12px; color: var(--muted); flex: none; white-space: nowrap; }
.pl-x { color: var(--muted); font-size: 13px; flex: none; padding: 0 4px; }
.pl-x:hover { color: var(--bad); }
.pl-row.missing { color: var(--muted); font-size: 13px; }
.pl-miss { color: var(--bad); font-size: 12px; }
.pl-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }
@media (max-width: 560px) { .pl-rtopic { display: none; } }

/* collapsible cards + toolbar + hidden section */
.pl-toolbar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.pl-toolbar button { padding: 5px 11px; font-size: 12.5px; }
.pl-count { color: var(--muted); font-size: 12.5px; }
.pl-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--panel-2); }
.pl-card.collapsed { padding-bottom: 12px; }
.pl-head { align-items: center; }
.pl-toggle { flex: none; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; }
.pl-chev { display: inline-block; transition: transform 0.15s ease; }
.pl-card:not(.collapsed) .pl-chev { transform: rotate(90deg); }
.pl-titlewrap { cursor: pointer; user-select: none; }
.pl-body { margin-top: 4px; }
.pl-card.collapsed .pl-body { display: none; }
.pl-hide:hover, .pl-del:hover { border-color: var(--bad); color: var(--bad); }
.pl-hidden-wrap { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 14px; }
.pl-show-hidden { font-size: 12.5px; color: var(--muted); padding: 5px 11px; }
.pl-hidden-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pl-hidden-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--panel-2); }
.pl-hidden-name { font-size: 13.5px; color: var(--muted); }
.pl-hidden-row .pl-unhide { padding: 4px 10px; font-size: 12px; }

/* syllabus */
.syl-wrap { max-width: 1240px; margin: 18px auto 72px; padding: 0 22px; }
.syl-intro { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 6px 0 18px; max-width: 980px; }
.syl-part { margin-bottom: 30px; scroll-margin-top: 14px; }
.syl-lesson { scroll-margin-top: 14px; }
.syl-ptitle { font-size: 16px; margin: 0 0 3px; }
.syl-pblurb { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.syl-lesson { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--border); }
.syl-lesson:first-of-type { border-top: none; }
.syl-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--accent); }
.syl-lesson.done .syl-num { background: var(--good-bg); border-color: transparent; color: var(--good); }
.syl-main { flex: 1; min-width: 0; }
.syl-ltitle { font-size: 15.5px; margin: 2px 0 3px; }
.syl-learn { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 9px; }
.syl-prow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.syl-bar { height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; flex: 1; max-width: 300px; }
.syl-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.syl-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.syl-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.syl-read { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.syl-read:hover { text-decoration: underline; }
.syl-drill { background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 6px 13px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.syl-drill:hover { filter: brightness(0.93); }
button.syl-read { background: transparent; border: none; padding: 0; cursor: pointer; font-family: var(--sans); }
button.syl-read:hover { border: none; text-decoration: underline; }
.syl-note { display: none; margin: 10px 0 4px; padding: 4px 14px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; }
.syl-note.open { display: block; }

/* collapsible "problems below the section" list (notes + syllabus) */
.sec-prac { margin-top: 12px; }
.note-section .sec-prac { border-top: 1px solid var(--border); padding-top: 12px; }
.sec-prac > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; list-style: none; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.sec-prac > summary::-webkit-details-marker { display: none; }
.sec-prac > summary::before { content: '▸'; font-size: 11px; }
.sec-prac[open] > summary::before { content: '▾'; }
.sec-prac > summary:hover { text-decoration: underline; }
.sec-prac-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 2px; }
.sec-prac-lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.sec-prac-drill { background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sec-prac-drill:hover { filter: brightness(0.93); }
.sec-prac-rows { margin-top: 6px; }

/* ===== learning features: due pill, calibration, SRS, name-the-move, dashboards ===== */
a.pill.duelink { color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 6px 12px; text-decoration: none; font-weight: 600; }
a.pill.duelink b { color: var(--on-accent); }
a.pill.duelink:hover { filter: brightness(0.93); }

/* confidence ("price your answer") strip */
.calibstrip { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calib-lbl { font-size: 12.5px; color: var(--muted); }
.calib-btn { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer; }
.calib-btn:hover { border-color: var(--accent); }
.calib-btn.on { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); font-weight: 600; }

/* SM-2 schedule / self-grade row */
.srsrow { display: none; margin-top: 14px; align-items: center; gap: 8px; flex-wrap: wrap; }
.srsrow.show { display: flex; }
.srs-lbl { font-size: 12.5px; color: var(--muted); }
.srs-btn { font-size: 13px; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; }
.srs-btn:hover { border-color: var(--accent); }
.srs-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.srs-again.on { background: var(--bad); border-color: var(--bad); color: var(--on-accent); }
.srs-skip { color: var(--muted); margin-left: 4px; }
.srs-skip.on { background: var(--panel); border-color: var(--muted); color: var(--muted); font-weight: 600; }
.srs-next { font-size: 12px; color: var(--muted); margin-left: 4px; }
.rv-assess { font-size: 13px; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; text-align: center; line-height: 1.2; }
.rv-assess:hover { border-color: var(--accent); }
.rv-assess .rv-iv { display: block; font-size: 10px; opacity: 0.7; font-weight: 400; margin-top: 1px; }
.rv-assess.on.rv-skipped { background: var(--panel); border-color: var(--muted); color: var(--text); font-weight: 600; }
.rv-assess.on.rv-again { background: var(--bad); border-color: var(--bad); color: var(--on-accent); font-weight: 600; }
.rv-assess.on.rv-hard { background: var(--warn); border-color: var(--warn); color: var(--on-accent); font-weight: 600; }
.rv-assess.on.rv-good { background: var(--good); border-color: var(--good); color: var(--on-accent); font-weight: 600; }
.rv-assess.on.rv-easy { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.srs-note { font-size: 11.5px; color: var(--muted); margin-left: 4px; }

/* review forecast page */
.rv-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 6px 0 16px; }
.rv-stat { font-size: 13px; color: var(--muted); }
.rv-stat b { color: var(--text); font-size: 18px; font-weight: 700; margin-right: 4px; }
.rv-start { margin-left: auto; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 999px; }
.rv-start:hover { filter: brightness(0.93); }
.rv-chart { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 4px; margin-bottom: 8px; }
.rv-cutoff { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.rv-cutoff b { color: var(--text); }
.rv-bar { fill: var(--accent); opacity: 0.85; }
.rv-bar.due { fill: var(--bad); }
.rv-axis { fill: var(--muted); font-size: 10px; font-family: var(--sans); }
.rev-group { border: 1px solid var(--border); border-radius: 12px; margin: 10px 0; overflow: hidden; }
.rev-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--panel-2); font-size: 14px; }
.rev-group > summary::-webkit-details-marker { display: none; }
.rev-group > summary::before { content: '▸'; color: var(--muted); font-size: 11px; }
.rev-group[open] > summary::before { content: '▾'; }
.rev-group.suspended > summary { opacity: 0.75; }
.rv-blabel { font-weight: 600; color: var(--text); }
.rv-bcount { margin-left: auto; color: var(--muted); font-size: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; }
.rev-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); }
.rev-row:hover { background: var(--panel-2); }
.rev-row .dbadge { flex: none; }
.rev-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-topic { color: var(--muted); font-size: 12px; white-space: nowrap; }
.rev-due { color: var(--accent-2); font-size: 12px; font-family: var(--mono); white-space: nowrap; min-width: 64px; text-align: right; }
.rev-note { font-size: 12.5px; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--border); }

/* name-the-move recognition */
.movepicker { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin: 14px 0; background: var(--panel-2); }
.mp-q { font-weight: 600; font-size: 14.5px; margin-bottom: 10px; }
.mp-opts { display: flex; flex-direction: column; gap: 8px; }
.mp-opt { text-align: left; font-size: 13.5px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.mp-opt:hover { border-color: var(--accent); }
.mp-opt.right { border-color: var(--good); background: var(--good-bg); color: var(--good); font-weight: 600; }
.mp-opt.wrong { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.mp-fb { display: none; margin-top: 11px; font-size: 13.5px; line-height: 1.55; }
.mp-fb.show { display: block; }
.mp-fb.ok { color: var(--good); }
.mp-picked { color: var(--muted); }

/* history dashboards */
.dash-panel { margin: 0 0 14px; }
.dash-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 24px 0 12px; }
.dash-line { font-size: 13.5px; color: var(--text); margin: 0 0 12px; line-height: 1.6; }
.dash-hint { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 8px; }
.dash-hint a { color: var(--link); }
.dash-sub { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin: 16px 0 8px; font-weight: 600; }
.dash-dim { color: var(--muted); }
.dash-next { display: inline-block; margin: 0 0 14px; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 8px 14px; font-size: 13.5px; text-decoration: none; font-weight: 600; }
.dash-next:hover { filter: brightness(0.93); }
.dash-next b { color: var(--on-accent); }
.mz-list, .lz-list { display: flex; flex-direction: column; }
.mz-row { display: grid; grid-template-columns: 210px 1fr 42px 128px; gap: 12px; align-items: center; padding: 7px 6px; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); }
.mz-row:first-child { border-top: none; }
.mz-row:hover { background: var(--panel-2); }
.mz-name { font-size: 13.5px; }
.mz-bar { height: 7px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.mz-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.mz-pct { font-size: 12.5px; color: var(--muted); text-align: right; }
.mz-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lz-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); }
.lz-row:hover { background: var(--panel-2); }
.lz-title { flex: 1; font-size: 13.5px; }
.lz-meta { font-size: 12.5px; color: var(--bad); font-family: var(--mono); }
.cz-table { width: 100%; border-collapse: collapse; font-size: 13px; max-width: 580px; }
.cz-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.cz-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.cz-bar { position: relative; display: block; height: 8px; width: 120px; background: var(--panel-2); border-radius: 999px; }
.cz-act { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); border-radius: 999px; }
.cz-said { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--accent-2); }
.cz-over { color: var(--bad); } .cz-under { color: var(--warn); } .cz-ok { color: var(--good); }
.cf-list { margin: 4px 0 0; padding-left: 20px; font-size: 13.5px; }
.cf-list li { margin: 4px 0; }
@media (max-width: 620px) { .mz-row { grid-template-columns: 1fr 60px 40px; } .mz-meta { display: none; } }

/* ===== market-making game ===== */
.mm-wrap { max-width: 720px; margin: 22px auto 72px; padding: 0 18px; }
.mm-intro { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 6px 0 20px; }
.mm-intro b { color: var(--text); font-weight: 600; }
.mm-card { border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; background: var(--panel); }
.mm-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); }
.mm-round { text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }
.mm-pnl { font-family: var(--mono); }
.mm-timerbar { height: 4px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin: 12px 0 18px; }
.mm-timerbar > span { display: block; height: 100%; width: 100%; background: var(--accent); transition: width .1s linear; }
.mm-timerbar > span.low { background: var(--bad); }
.mm-prompt { font-size: 17px; line-height: 1.5; margin-bottom: 18px; }
.mm-quote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-qlabel { font-size: 13px; color: var(--muted); }
.mm-in { width: 92px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 17px; font-family: var(--mono); text-align: center; }
.mm-in:focus { outline: none; border-color: var(--accent); }
.mm-in:disabled { opacity: 0.7; }
.mm-at { font-size: 17px; color: var(--muted); font-weight: 600; }
.mm-err { color: var(--bad); font-size: 13px; min-height: 16px; margin-top: 8px; }
.mm-result { display: none; margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 16px; }
.mm-result.show { display: block; }
.mm-rhead { font-size: 14.5px; font-weight: 600; margin-bottom: 12px; }
.mm-result.held .mm-rhead { color: var(--good); }
.mm-result.bad .mm-rhead { color: var(--bad); }
.mm-rgrid { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13.5px; align-items: baseline; }
.mm-rgrid span { color: var(--muted); }
.mm-rgrid b { font-family: var(--mono); }
.mm-explain { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 14px 0 16px; padding: 10px 12px; background: var(--panel-2); border-radius: 8px; }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.mm-result button, .mm-summary button { margin-top: 4px; }
.mm-summary { text-align: left; }
.mm-sumhead { font-size: 16px; margin-bottom: 6px; }
.mm-sumhead b { font-family: var(--mono); font-size: 22px; }
.mm-verdict { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.mm-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.mm-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.mm-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.mm-table td:last-child, .mm-table th:last-child { text-align: right; font-family: var(--mono); }
.mm-table td:nth-child(3) { font-family: var(--mono); }
.mm-oc { text-transform: capitalize; }
.mm-qcell { white-space: normal; line-height: 1.35; padding-right: 14px; }
.mm-table td:nth-child(3), .mm-table td:nth-child(4), .mm-table td:last-child { white-space: nowrap; vertical-align: top; }
.mm-sumfoot { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.mm-howto { margin-top: 22px; }
.mm-howto > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.mm-howto-body { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-top: 10px; }
.mm-howto-body code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; font-family: var(--mono); font-size: 12.5px; }
.mm-howto-body ul { padding-left: 20px; }

/* add-to-playlist control in the practice player */
.pc-pl { position: relative; }
.pc-plbtn { font-size: 12.5px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.pc-plbtn:hover { border-color: var(--accent); color: var(--accent); }
.pc-plpanel { display: none; position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; min-width: 200px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 5px; box-shadow: 0 10px 28px rgba(20,18,15,0.18); }
.pc-pl.open .pc-plpanel { display: block; }
.pc-plrow { padding: 7px 10px; font-size: 13px; border-radius: 8px; cursor: pointer; color: var(--text); }
.pc-plrow:hover { background: var(--panel-2); }
.pc-plrow.has { color: var(--good); }
.pc-plrow.new { color: var(--accent); border-top: 1px solid var(--border); margin-top: 3px; }
.pc-plempty { padding: 7px 10px; font-size: 12.5px; color: var(--muted); }


/* harder-problems group: same rows as related, with a tag on direct extensions */
.related.harder h3 { color: var(--accent-2); }
.rel-direct { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent-2); border: 1px solid var(--accent-2); border-radius: 999px; padding: 1px 7px; margin-left: 8px; vertical-align: 1px; }

/* ---- Tracker bridge (ghsync.js): status pill + ack toast ---- */
a.pill.ghsync-pill { color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; text-decoration: none; font-weight: 600; cursor: pointer; }
a.pill.ghsync-pill:hover { border-color: var(--accent); background: var(--panel); }
a.pill.ghsync-pill.on { color: var(--good); border-color: var(--good); }

.ghsync-toast { position: fixed; right: 16px; bottom: 16px; z-index: 1000; max-width: 360px; padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--panel); color: var(--text); box-shadow: 0 6px 24px rgba(0,0,0,0.18); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s; }
.ghsync-toast.show { opacity: 1; transform: translateY(0); }
.ghsync-toast.ok { border-color: var(--good); color: var(--good); }
.ghsync-toast.err { border-color: var(--bad); color: var(--bad); }

/* ---- mental-math trainer (arithmetic.html) ---- */
.am-wrap { max-width: 720px; margin: 22px auto 60px; padding: 0 18px; }
.am-intro { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.am-modes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.am-mode { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; color: var(--text); }
.am-mode:hover { border-color: var(--accent); }
.am-mode b { font-size: 16px; }
.am-mode span { font-size: 12px; color: var(--muted); }
.am-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.am-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.am-clock { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--text); }
.am-clock.low { color: var(--bad); }
.am-score { font-size: 13px; color: var(--muted); }
.am-stop { margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.am-stop:hover { border-color: var(--bad); color: var(--bad); }
.am-q { font-size: 34px; font-weight: 600; font-family: var(--mono); text-align: center; margin: 10px 0 18px; letter-spacing: 1px; }
.am-in { width: 100%; box-sizing: border-box; background: var(--panel); border: 2px solid var(--border); color: var(--text); border-radius: 12px; padding: 14px; font-size: 28px; font-family: var(--mono); text-align: center; }
.am-in:focus { outline: none; border-color: var(--accent); }
.am-in.ok { border-color: var(--good); animation: am-pop .14s; }
.am-in.bad { border-color: var(--bad); }
@keyframes am-pop { from { transform: scale(0.99); } to { transform: scale(1); } }
.am-results { text-align: center; }
.am-rscore { font-size: 56px; font-weight: 800; line-height: 1; }
.am-rscore span { font-size: 18px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.am-rsub { font-size: 14px; color: var(--muted); margin: 8px 0 16px; }
.am-dash { background: transparent; }
.am-dash-empty { font-size: 13px; color: var(--muted); padding: 16px; border: 1px dashed var(--border); border-radius: 12px; }
.am-dash-head { display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.am-firsttry { margin-left: auto; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.am-focus { font-size: 13.5px; color: var(--text); margin-bottom: 10px; }
.am-focus b { color: var(--accent); }
.am-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.am-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.am-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.am-table td:nth-child(2), .am-table td:nth-child(3), .am-table td:nth-child(4), .am-table th:nth-child(2), .am-table th:nth-child(3), .am-table th:nth-child(4) { text-align: right; font-family: var(--mono); }
.am-table tr.am-weak td:first-child { font-weight: 700; color: var(--text); }
.am-table tr.am-weak td:first-child::before { content: '▸ '; color: var(--bad); }
.am-reset { margin-top: 12px; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.am-reset:hover { border-color: var(--bad); color: var(--bad); }
.am-progress { margin-top: 22px; }
.am-chart { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 6px; }
.am-best { font-size: 12.5px; color: var(--muted); }
.am-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.am-opt { padding: 16px; font-size: 22px; font-family: var(--mono); border: 2px solid var(--border); background: var(--panel); color: var(--text); border-radius: 12px; cursor: pointer; transition: border-color .1s; }
.am-opt:hover:not(:disabled) { border-color: var(--accent); }
.am-opt:disabled { cursor: default; }
.am-opt.ok { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.am-opt.bad { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.am-skip { display: block; width: 100%; margin-top: 10px; padding: 9px; font-size: 13px; background: transparent; border: 1px dashed var(--border); color: var(--muted); border-radius: 12px; cursor: pointer; }
.am-skip:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* freemium: mark the free-sample problems (Quant 75 tier). */
.pfree { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--good); border: 1px solid var(--good); border-radius: 6px; padding: 1px 4px; margin-left: 6px; opacity: .85; }

/* ============================================================================
   UI OVERHAUL — "quiet terminal": two registers, motion, paywall, landing, pricing
   ============================================================================ */

/* ---- register 1: PROSE — editorial calm (statements, solutions, notes) ---- */
.statement { line-height: 1.62; max-width: var(--measure); }
.solution .body { line-height: 1.62; max-width: var(--measure); }
.note-body { max-width: 72ch; line-height: 1.66; }
.np-q, .np-solbody { max-width: 70ch; }
/* one warm serif touch on note headings — Robinhood "warm intelligence", used sparingly */
.note-title { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; }
.note-summary { font-family: var(--serif); font-style: italic; }

/* ---- motion: fast & functional; respect reduced-motion ---- */
.solution.show { animation: sol-reveal .22s cubic-bezier(.22,.61,.36,1); }
@keyframes sol-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---- shared nav: self-aware active state + a single Upgrade CTA ---- */
.brand h1 a { color: inherit; text-decoration: none; }
/* marketing pages (landing/pricing) use a wordmark LINK, not an <h1>, so the
   page's value-prop headline is the single document <h1> (a11y + SEO) */
.brand .wordmark { font-size: 19px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; color: var(--text); text-decoration: none; }
button.pr-buy { width: 100%; font-family: var(--sans); }
.navlink.on { color: var(--text); font-weight: 600; }
.navlink.on::after { content: ""; display: block; height: 2px; background: var(--accent); border-radius: var(--r-pill); margin-top: 2px; }
/* "More" nav dropdown — groups the organizational pages */
.navmore { position: relative; display: inline-block; margin-left: 16px; }
.navmore-btn { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--sans); font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.navmore-btn:hover { color: var(--text); }
.navmore.on .navmore-btn { color: var(--text); font-weight: 600; }
.navmore-caret { font-size: 9px; color: var(--muted); }
.navmore-menu { display: none; position: absolute; left: 0; top: calc(100% + 9px); min-width: 168px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow-float); padding: 6px; z-index: 40; }
.navmore.open .navmore-menu { display: block; }
.navmore-item { display: block; padding: 8px 10px; font-size: 13.5px; color: var(--text); text-decoration: none; border-radius: var(--r-control); }
.navmore-item:hover { background: var(--panel-2); }
.navmore-item.on { font-weight: 600; }
a.pill.upgrade { color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-pill); padding: 6px 13px; text-decoration: none; font-weight: 600; }
a.pill.upgrade:hover { filter: brightness(0.94); }

/* ---- account control (nav.js renderAccount): sign-in · upgrade · billing ---- */
.qd-acct-wrap { display: inline-flex; align-items: center; gap: 8px; }
.qd-pro-badge { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-pill); padding: 3px 9px; }
.qd-acct { position: relative; display: inline-block; }
.qd-acct-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-pill); padding: 6px 12px; font-family: var(--sans); font-size: 13px; cursor: pointer; transition: border-color var(--motion), color var(--motion); }
.qd-acct-btn:hover { border-color: var(--accent); color: var(--accent); }
.qd-caret { color: var(--muted); font-size: 10px; }
.qd-acct-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 224px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow-float); padding: 6px; z-index: 40; }
.qd-acct-menu.signin { width: 264px; }
.qd-acct.open .qd-acct-menu { display: block; }
.qd-acct-head { font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 8px 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qd-acct-menu.signin .qd-acct-head { display: block; }
.qd-acct-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-chip); padding: 1px 5px; flex: none; }
.qd-acct-tag.pro { color: var(--accent); border-color: var(--accent); }
.qd-acct-item { display: block; width: 100%; box-sizing: border-box; text-align: left; background: transparent; border: none; color: var(--text); font-family: var(--sans); font-size: 13.5px; padding: 8px 10px; border-radius: var(--r-control); cursor: pointer; text-decoration: none; }
.qd-acct-item:hover { background: var(--panel-2); }
.qd-acct-sub { display: block; font-size: 12.5px; color: var(--accent); text-decoration: none; padding: 8px 10px 4px; }
.qd-acct-sub:hover { text-decoration: underline; }
.qd-gbtn { display: flex; justify-content: center; padding: 8px 4px 4px; min-height: 40px; }

/* ---- PAYWALL: locked rows (blurred preview + one Pro badge + unlock) ---- */
.ppro { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--accent-2); border: 1px solid var(--accent-2); border-radius: 6px; padding: 1px 4px; margin-left: 6px; }
.prow.locked .ptitle { filter: blur(3.2px); opacity: .68; user-select: none; }
.prow.locked .ck { color: var(--muted); }
.prow.locked:hover { background: var(--panel); }
.prow.locked .plock { font-size: 12px; color: var(--accent-2); flex: none; }
/* upsell banner — benefit-first, no countdown, no guilt */
.upsell { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-left: 2px solid var(--border); padding: 6px 0 6px 18px; margin: 6px 0 20px; }
.upsell .us-txt { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.upsell .us-txt b { color: var(--text); }
.upsell .us-cta { margin-left: auto; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--r-control); padding: 8px 16px; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.upsell .us-cta:hover { filter: brightness(1.18); }
/* post-win nudge (player) — a quiet card after a milestone solve */
.winnudge { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--panel); box-shadow: var(--shadow-float); padding: 16px 18px; }
.winnudge .wn-h { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.winnudge .wn-p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 12px; }
.winnudge .wn-row { display: flex; gap: 10px; align-items: center; }
.winnudge .wn-go { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--r-control); padding: 8px 15px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.winnudge .wn-go:hover { filter: brightness(0.94); }
.winnudge .wn-dismiss { background: transparent; border: none; color: var(--muted); font-size: 13px; cursor: pointer; }
.winnudge .wn-dismiss:hover { color: var(--text); }

/* ===================== LANDING — open & editorial, no hard boxes ===================== */
.lp { max-width: 1060px; margin: 0 auto; padding: 0 24px 80px; }

/* hero */
.lp-hero { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 60px; align-items: start; padding: 66px 0 56px; }
@media (max-width: 860px) { .lp-hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 0 36px; } }
.lp-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; }
.lp-h1 { font-family: var(--serif); font-size: var(--t-4); line-height: 1.08; letter-spacing: -0.008em; margin: 0 0 24px; font-weight: 500; }
@media (max-width: 860px) { .lp-h1 { font-size: var(--t-3); } }
.lp-lede { font-size: 17px; line-height: 1.62; color: var(--muted); max-width: 48ch; margin: 0 0 30px; }
.lp-cta { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.lp-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.lp-btn.primary { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--r-control); padding: 12px 22px; }
.lp-btn.primary:hover { filter: brightness(1.18); }
.lp-btn.ghost { color: var(--text); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--muted); text-decoration-thickness: 1px; }
.lp-btn.ghost:hover { text-decoration-color: var(--text); }
.lp-free { font-size: 13.5px; color: var(--muted); margin: 20px 0 0; }
.lp-free b { color: var(--text); }

/* worked example — a borderless margin note (real artifact, not a screenshot) */
.lp-eg { border-left: 2px solid var(--border); padding: 4px 0 4px 24px; }
@media (max-width: 860px) { .lp-eg { padding-left: 18px; } }
.lp-eg .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.lp-eg .q { font-size: 16px; line-height: 1.58; color: var(--text); margin: 0 0 18px; }
.lp-eg .a { font-family: var(--mono); font-size: 14px; color: var(--text); padding-top: 16px; border-top: 1px solid var(--hairline); }
.lp-eg .a .lbl { color: var(--muted); }
.lp-eg .a .why { display: block; margin-top: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.6; font-family: var(--sans); }

/* firms — a flowing line of names, not pills */
.lp-firms { padding: 28px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.lp-firms .lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 16px; }
.lp-firmline { font-size: 15.5px; color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 8px; }
.lp-firmline .f { white-space: nowrap; }
.lp-firmline .n { font-family: var(--mono); color: var(--muted); font-size: 13px; margin-left: 5px; }
.lp-firmline .dot { color: var(--border); margin: 0 11px; }

/* stats — an open row of figures, hairline-bounded, no cells */
.lp-stats { display: flex; flex-wrap: wrap; gap: 36px 60px; padding: 44px 0; }
.lp-stat .n { font-family: var(--mono); font-size: var(--t-3); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.lp-stat .k { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* features — editorial rows split by hairlines */
.lp-feats { display: flex; flex-direction: column; }
.lp-feat { display: grid; grid-template-columns: 196px 1fr; gap: 36px; padding: 32px 0; border-top: 1px solid var(--hairline); align-items: start; }
@media (max-width: 720px) { .lp-feat { grid-template-columns: 1fr; gap: 10px; } }
.lp-feat .ft-k { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding-top: 5px; }
.lp-feat h3 { font-size: var(--t-1); margin: 0 0 10px; font-weight: 600; letter-spacing: -0.015em; }
.lp-feat p { font-size: 15.5px; line-height: 1.62; color: var(--muted); margin: 0; max-width: 58ch; }

/* closing CTA + footer — open */
.lp-cta-band { padding: 64px 0 4px; border-top: 1px solid var(--hairline); }
.lp-cta-band h2 { font-family: var(--serif); font-size: var(--t-2); margin: 0 0 12px; letter-spacing: -0.006em; font-weight: 500; }
.lp-cta-band p { color: var(--muted); margin: 0 0 28px; font-size: 16px; }
.lp-foot { border-top: 1px solid var(--hairline); margin-top: 60px; padding: 30px 0 0; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.lp-foot a { color: var(--muted); text-decoration: none; }
.lp-foot a:hover { color: var(--text); }
.lp-foot .sp { margin-left: auto; }

/* ============================ PRICING PAGE ============================ */
.pr { max-width: 1040px; margin: 0 auto; padding: 8px 22px 72px; }
.pr-head { text-align: center; padding: 28px 0 8px; }
.pr-head h1 { font-size: var(--t-3); margin: 0 0 10px; letter-spacing: -0.02em; font-weight: 600; }
.pr-head p { color: var(--muted); font-size: 15px; margin: 0; }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px 0 18px; align-items: start; }
@media (max-width: 820px) { .pr-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.pr-tier { border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--panel); padding: 24px 22px; display: flex; flex-direction: column; }
.pr-tier.best { border: 1px solid var(--accent); box-shadow: 0 8px 24px rgba(20,22,26,0.07); position: relative; }
.pr-badge { position: absolute; top: -11px; left: 22px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: var(--r-pill); padding: 3px 11px; }
.pr-tname { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.pr-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.pr-price .amt { font-family: var(--mono); font-size: var(--t-3); font-weight: 600; letter-spacing: -0.02em; }
.pr-price .per { font-size: 13px; color: var(--muted); }
.pr-sub { font-size: 12.5px; color: var(--muted); min-height: 18px; margin-bottom: 18px; }
.pr-buy { display: block; text-align: center; border-radius: var(--r-control); padding: 10px 16px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; margin-bottom: 18px; }
.pr-buy.primary { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); }
.pr-buy.primary:hover { filter: brightness(0.94); }
.pr-buy.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.pr-buy.ghost:hover { border-color: var(--accent); color: var(--accent); }
.pr-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.pr-feats li { font-size: 13.5px; line-height: 1.45; color: var(--text); padding-left: 22px; position: relative; }
.pr-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.pr-feats li.off { color: var(--muted); }
.pr-feats li.off::before { content: "–"; color: var(--muted); font-weight: 400; }
.pr-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px; }
.pr-faq { max-width: 660px; margin: 44px auto 0; }
.pr-faq h2 { font-size: var(--t-1); text-align: center; margin: 0 0 18px; font-weight: 600; letter-spacing: -0.01em; }
.pr-q { border-top: 1px solid var(--hairline); padding: 16px 2px; }
.pr-q h3 { font-size: 15px; margin: 0 0 5px; font-weight: 600; }
.pr-q p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; }

/* ---- mental-math: Zetamac-style setup screen + inline play ---- */
.zc-card { max-width: 560px; margin: 8px auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 22px 24px; }
.zc-h { font-size: var(--t-1); margin: 0 0 16px; letter-spacing: -0.01em; }
.zc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.zc-row:last-of-type { border-bottom: none; }
.zc-op { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.zc-op input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
.zc-rng { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.zc-rng i { font-style: normal; color: var(--muted); padding: 0 1px; }
.zc-rng b { color: var(--text); padding: 0 3px; font-weight: 600; }
.zc-num { width: 52px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; padding: 5px 4px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--panel-2); color: var(--text); }
.zc-num:focus-visible { border-color: var(--accent); outline: none; }
.zc-inv { font-size: 12.5px; color: var(--muted); font-style: italic; }
.zc-start { margin-top: 18px; width: 100%; }

.zm-card { max-width: 560px; margin: 8px auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 16px 20px 40px; }
.zm-head { display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.zm-head b { color: var(--text); }
.zm-head .zm-score { margin-left: auto; }
.zm-head #am-clock.low { color: var(--bad); }
.zm-stop { margin-left: 12px; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--r-control); padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: var(--sans); }
.zm-stop:hover { border-color: var(--accent); color: var(--text); }
.zm-play { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 46px 8px 10px; flex-wrap: wrap; }
.zm-q { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 34px; letter-spacing: 0.5px; color: var(--text); }
.zm-in { width: 150px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 32px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--panel-2); color: var(--text); }
.zm-in:focus-visible { border-color: var(--accent); outline: none; }
.zm-in.ok { border-color: var(--good); }
.zm-in.bad { border-color: var(--bad); }
@media (max-width: 560px) { .zm-q { font-size: 26px; } .zm-in { font-size: 24px; width: 110px; } }

/* Zetamac: full-screen white takeover — Seconds-left/Score header, full-width grey band */
.zmf { position: fixed; inset: 0; z-index: 9999; background: #ffffff; color: #1a1a1a; display: flex; flex-direction: column; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.zmf-bar { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 30px; font-size: 18px; }
.zmf-bar b { font-weight: 700; }
.zmf-bar #am-clock.low { color: #c0463a; }
.zmf-end { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: transparent; border: none; color: #aaa; font-size: 12px; cursor: pointer; }
.zmf-end:hover { color: #444; }
.zmf-band { margin: auto 0; width: 100%; background: #dcdcdc; padding: 30px 0; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.zmf-q { font-size: 34px; }
.zmf-in { font-size: 30px; width: 190px; padding: 6px 10px; border: 1px solid #888; border-radius: 3px; background: #fff; color: #1a1a1a; }
.zmf-in:focus { outline: 2px solid #4a90d9; outline-offset: 0; border-color: #4a90d9; }
@media (max-width: 560px) { .zmf-q { font-size: 26px; } .zmf-in { font-size: 24px; width: 130px; } }

/* 80-in-8: back link, n/80 counter + timer, accent-topped question card, four option buttons */
.o8-wrap { max-width: 1080px; margin: 4px auto; padding: 0 6px; }
.o8-back { display: inline-block; color: var(--accent); text-decoration: none; font-size: 15px; font-weight: 600; margin-bottom: 16px; cursor: pointer; }
.o8-back:hover { text-decoration: underline; }
.o8-meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; color: var(--text); margin-bottom: 14px; }
.o8-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow-float); min-height: 190px; display: flex; align-items: center; justify-content: center; padding: 36px; margin-bottom: 22px; }
/* 80-in-8 full-screen takeover, in the app theme (not forced white) */
.o8f { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; flex-direction: column; overflow: auto; }
.o8f-bar { display: flex; align-items: baseline; gap: 16px; padding: 16px 24px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--hairline); }
.o8f-bar .o8-back { margin: 0; }
.o8f-bar .o8-time { margin-left: auto; }
.o8f-body { max-width: 1000px; width: 100%; margin: auto; padding: 28px 24px; }
.o8-q { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; color: var(--text); text-align: center; }

/* ---- mock assessment (exam.html) ---- */
.exam-root { max-width: 920px; margin: 18px auto 60px; padding: 0 18px; }
.exam-intro { max-width: 620px; margin: 48px auto; text-align: center; }
.exam-intro h1 { font-size: var(--t-3); margin: 0 0 14px; letter-spacing: -0.02em; }
.exam-lede { color: var(--muted); line-height: 1.6; font-size: 16px; margin: 0 0 18px; }
.exam-note { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.exam-start { padding: 11px 26px; font-size: 15px; }
.exam-modes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.exam-alt { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-control); cursor: pointer; font-family: var(--sans); }
.exam-alt:hover { border-color: var(--accent); }
.ex-top { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 5; }
.ex-title { font-weight: 600; }
.ex-time { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; }
.ex-time #ex-clock.low { color: var(--bad); }
.ex-finish { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-control); padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: var(--sans); }
.ex-finish:hover { border-color: var(--accent); }
.ex-navrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px; }
.ex-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-tab { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: var(--r-control); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; cursor: pointer; position: relative; }
.ex-tab:hover { border-color: var(--accent); }
.ex-tab.done { color: var(--text); background: var(--panel-2); border-color: var(--accent); }
.ex-tab.on { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text); }
.ex-tab.flag::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.ex-att { color: var(--muted); font-size: 13px; font-family: var(--mono); }
.ex-att b { color: var(--text); }
.ex-qhead { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 8px; gap: 12px; }
.ex-qn { font-size: var(--t-1); font-weight: 600; }
.ex-flag { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.ex-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ex-statement { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--text); max-width: var(--measure); margin-bottom: 22px; }
.ex-statement p { margin: 0 0 10px; }
.ex-answer { margin-bottom: 22px; }
.ex-in { width: 100%; max-width: 360px; font-family: var(--mono); font-size: 17px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--panel); color: var(--text); }
.ex-in:focus-visible { border-color: var(--accent); outline: none; }
.ex-fmt { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.ex-fmt code { background: var(--panel-2); padding: 1px 5px; border-radius: var(--r-chip); font-family: var(--mono); }
.ex-mc { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.ex-mc-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--r-control); padding: 12px 14px; cursor: pointer; background: var(--panel); }
.ex-mc-item:hover { border-color: var(--accent); }
.ex-mc-item.sel { border-color: var(--accent); background: var(--panel-2); }
.ex-mc-item p { margin: 0; }
.ex-actions { display: flex; gap: 10px; }
.exam-results { max-width: 720px; margin: 30px auto; }
.ex-score { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 56px; font-weight: 700; text-align: center; color: var(--text); }
.ex-score span { color: var(--muted); font-size: 30px; }
.ex-score-sub { text-align: center; color: var(--muted); margin: 4px 0 18px; }
.ex-again { display: block; margin: 0 auto 26px; }
.ex-review-h { font-size: var(--t-1); margin: 0 0 12px; }
.ex-r-row { border: 1px solid var(--border); border-radius: var(--r-control); margin-bottom: 8px; background: var(--panel); }
.ex-r-row summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.ex-r-row summary::-webkit-details-marker { display: none; }
.ex-r-n { font-family: var(--mono); color: var(--muted); width: 22px; }
.ex-r-t { flex: 1; }
.ex-r-ok { color: var(--good); font-size: 13px; font-weight: 600; }
.ex-r-no { color: var(--bad); font-size: 13px; font-weight: 600; }
.ex-r-blank { color: var(--muted); font-size: 13px; }
.ex-r-body { padding: 4px 16px 16px; border-top: 1px solid var(--hairline); }
.ex-r-st { font-family: var(--serif); line-height: 1.55; margin: 12px 0; }
.ex-r-your { font-family: var(--mono); font-size: 14px; margin-bottom: 10px; }
.ex-r-sol { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.ex-r-open { display: inline-block; margin-top: 10px; font-size: 13px; }
.o8-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.o8-opts .am-opt { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: 0 1px 3px rgba(20,18,15,.06); padding: 22px 10px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.o8-opts .am-opt:hover { border-color: var(--accent); }
.o8-opts .am-opt:disabled { cursor: default; }
.o8-opts .am-opt.ok { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.o8-opts .am-opt.bad { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.o8-skiprow { text-align: center; margin-top: 18px; }
.o8-skip { background: transparent; border: none; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; }
.o8-skip:hover { color: var(--text); }
@media (max-width: 720px) { .o8-opts { grid-template-columns: repeat(2, 1fr); } .o8-q { font-size: 24px; } }

/* ---- locked-problem card (player) + Google-button states ---- */
.lockcard { border: 1px solid var(--border); background: var(--panel); border-radius: var(--r-panel); padding: 32px 28px; text-align: center; margin: 20px 0; }
.lc-badge { display: inline-block; font-family: var(--mono); font-size: 12px; color: var(--accent-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 12px; margin-bottom: 14px; }
.lc-title { font-size: var(--t-1); margin: 0 0 8px; letter-spacing: -0.01em; }
.lc-sub { color: var(--muted); max-width: 46ch; margin: 0 auto 18px; line-height: 1.55; }
.lc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lc-actions .lc-unlock { font-family: var(--sans); font-size: 14px; border-radius: var(--r-control); padding: 9px 18px; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.lc-actions .lc-unlock:hover { filter: brightness(0.94); }
.lc-actions .lc-free { font-size: 14px; border-radius: var(--r-control); padding: 9px 16px; border: 1px solid var(--border); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; }
.lc-actions .lc-free:hover { border-color: var(--accent); }
.lc-foot { color: var(--muted); font-size: 12px; margin-top: 14px; }
.gbtn-loading, .gbtn-err { color: var(--muted); font-size: 12px; }