:root {
  --bg:#f4f6fa; --surface:#fff; --surface-2:#eef1f7; --ink:#1a2233; --ink-soft:#4a5468;
  --ink-faint:#8791a3; --line:#dce1eb; --line-strong:#c3cad9; --accent:#3d5afe; --accent-soft:#e6eaff;
  --good:#0a9d6e; --good-soft:#dcf5ec; --warn:#d98a04; --warn-soft:#fdf0d8; --bad:#e03e52; --bad-soft:#fce4e7;
  --re:#e0731a; --th:#7c4dd6; --ma:#1f7ae0; --tp:#0d9488; --sep:#c2410c; --nm:#6d28d9;
  --shadow:0 1px 2px rgba(20,30,50,.06), 0 6px 20px rgba(20,30,50,.06);
  --radius:14px;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0a0e16; --surface:#141b29; --surface-2:#1d2637; --ink:#eef2f9; --ink-soft:#a7b2c5;
  --ink-faint:#6c7789; --line:#2b3648; --line-strong:#41506c; --accent:#8b9cff; --accent-soft:#1f2748;
  --good:#34d399; --good-soft:#0e3327; --warn:#fbbf24; --warn-soft:#3a2e12; --bad:#fb7185; --bad-soft:#3a2028;
  --re:#ff9d4d; --th:#b78cf7; --ma:#5aa8ff; --tp:#2dd4bf; --sep:#fb923c; --nm:#a78bfa;
  --shadow:0 1px 0 rgba(255,255,255,.045) inset, 0 3px 12px rgba(0,0,0,.45), 0 16px 38px rgba(0,0,0,.34);
} }
:root[data-theme="light"]{
  --bg:#f4f6fa; --surface:#fff; --surface-2:#eef1f7; --ink:#1a2233; --ink-soft:#4a5468;
  --ink-faint:#8791a3; --line:#dce1eb; --line-strong:#c3cad9; --accent:#3d5afe; --accent-soft:#e6eaff;
  --good:#0a9d6e; --good-soft:#dcf5ec; --warn:#d98a04; --warn-soft:#fdf0d8; --bad:#e03e52; --bad-soft:#fce4e7;
  --re:#e0731a; --th:#7c4dd6; --ma:#1f7ae0; --tp:#0d9488; --sep:#c2410c; --nm:#6d28d9;
  --shadow:0 1px 2px rgba(20,30,50,.06), 0 6px 20px rgba(20,30,50,.06);
}
:root[data-theme="dark"]{
  --bg:#0a0e16; --surface:#141b29; --surface-2:#1d2637; --ink:#eef2f9; --ink-soft:#a7b2c5;
  --ink-faint:#6c7789; --line:#2b3648; --line-strong:#41506c; --accent:#8b9cff; --accent-soft:#1f2748;
  --good:#34d399; --good-soft:#0e3327; --warn:#fbbf24; --warn-soft:#3a2e12; --bad:#fb7185; --bad-soft:#3a2028;
  --re:#ff9d4d; --th:#b78cf7; --ma:#5aa8ff; --tp:#2dd4bf; --sep:#fb923c; --nm:#a78bfa;
  --shadow:0 1px 0 rgba(255,255,255,.045) inset, 0 3px 12px rgba(0,0,0,.45), 0 16px 38px rgba(0,0,0,.34);
}

:root{ --meb:#d6336c; --stat:#0891b2; --fm:#0e7490; --ht:#dc2626; --pc:#4f46e5; --saf:#b45309; --des:#15803d; --py:#2563a8; }
@media (prefers-color-scheme: dark){ :root{ --meb:#f472b6; --stat:#22d3ee; --fm:#38bdf8; --ht:#f87171; --pc:#a5b4fc; --saf:#fbbf24; --des:#4ade80; --py:#63b3ed; } }
:root[data-theme="light"]{ --py:#2563a8; }
:root[data-theme="dark"]{ --py:#63b3ed; }
:root[data-theme="light"]{ --meb:#d6336c; --stat:#0891b2; --fm:#0e7490; --ht:#dc2626; --pc:#4f46e5; --saf:#b45309; --des:#15803d; }
:root[data-theme="dark"]{ --meb:#f472b6; --stat:#22d3ee; --fm:#38bdf8; --ht:#f87171; --pc:#a5b4fc; --saf:#fbbf24; --des:#4ade80; }

*{ box-sizing:border-box; }
button{ color:inherit; font-family:inherit; }   /* buttons don't inherit color/font by default → avoid UA black text */
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5; }
.wrap{ max-width:1120px; margin:0 auto; padding:20px 20px 80px; }
sub,sup{ line-height:0; }
.eq{ font-family:var(--mono); font-size:.95em; }

/* header */
header.top{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:6px 2px 20px; }
.brand{ display:flex; flex-direction:column; gap:2px; margin-right:auto; }
.brand h1{ font-size:22px; margin:0; letter-spacing:-.02em; font-weight:700; }
.brand p{ margin:0; color:var(--ink-faint); font-size:12.5px; }
.brand .logo{ color:var(--accent); }
.stat-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 13px;
  display:flex; flex-direction:column; box-shadow:var(--shadow); min-width:74px; }
.chip b{ font-size:18px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.chip span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); }
.iconbtn{ background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); border-radius:10px;
  height:38px; padding:0 14px; cursor:pointer; font-size:13px; font-weight:600; box-shadow:var(--shadow);
  display:inline-flex; align-items:center; gap:7px; }
.iconbtn:hover{ border-color:var(--line-strong); color:var(--ink); }
.iconbtn.active{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.iconbtn.has-due{ border-color:var(--warn); color:var(--warn); }
.badge{ background:var(--warn); color:#fff; border-radius:99px; font-size:11px; padding:1px 7px; font-weight:700; }
.iconbtn.active .badge{ background:var(--accent); }

/* overall + goal */
.overall{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); margin-bottom:16px; display:grid;
  grid-template-columns:1.6fr 1fr; gap:22px; }
@media (max-width:640px){ .overall{ grid-template-columns:1fr; gap:14px; } }
.overall .row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.overall .row b{ font-size:14px; }
.overall .row span{ font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.goal-streak{ color:var(--warn); font-size:12px; margin-left:4px; }
.track{ height:10px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.track.thin{ height:6px; }
.track > i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--good));
  border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.goal-fill{ background:linear-gradient(90deg,var(--warn),var(--good)) !important; }

/* diagnostic CTA */
.diag-cta{ display:none; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:16px; font-size:14px; }
.diag-cta.show{ display:flex; }

/* controls row */
.controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.controls h2{ font-size:18px; margin:0; letter-spacing:-.01em; }

/* tabs */
.tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.tab{ border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); padding:9px 14px;
  border-radius:11px; cursor:pointer; font-weight:600; font-size:13px; display:flex; align-items:center; gap:8px; }
.tab .dot{ width:9px; height:9px; border-radius:50%; }
.tab.active{ color:var(--ink); border-color:var(--line-strong); background:var(--surface-2); }
.tab:hover{ border-color:var(--line-strong); }

/* grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px; }
.empty{ grid-column:1/-1; text-align:center; color:var(--ink-faint); padding:48px 20px; font-size:15px;
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius); }
.card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  cursor:pointer; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:11px;
  transition:transform .12s ease, border-color .12s ease; }
.card:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.card.locked{ opacity:.72; cursor:not-allowed; }
.card.locked:hover{ transform:none; }
.card .subj-tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.card h3{ margin:0; font-size:15px; letter-spacing:-.01em; line-height:1.3; }
.card .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.status{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:99px; }
.st-0{ background:var(--surface-2); color:var(--ink-faint); }
.st-1{ background:var(--bad-soft); color:var(--bad); }
.st-2{ background:var(--warn-soft); color:var(--warn); }
.st-3{ background:var(--accent-soft); color:var(--accent); }
.st-4{ background:var(--good-soft); color:var(--good); }
.mini-track{ height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.mini-track > i{ display:block; height:100%; border-radius:99px; transition:width .4s ease; }
.score-num{ font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; }
.score-num .den{ color:var(--ink-faint); font-weight:500; }
.lock-note{ font-size:11.5px; color:var(--ink-faint); border-top:1px dashed var(--line); padding-top:8px; }
.card.shake{ animation:shake .4s ease; }

/* practice */
.practice{ display:none; }
.practice.show{ display:block; }
#mainView.hide{ display:none; }
.back{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:13.5px; font-weight:600;
  padding:6px 0; display:inline-flex; align-items:center; gap:6px; margin-bottom:8px; }
.back:hover{ color:var(--ink); }
.p-head{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.p-head .titles{ margin-right:auto; }
.p-head h2{ margin:2px 0 4px; font-size:21px; letter-spacing:-.02em; }
.p-head .subj-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.p-acc{ font-size:12.5px; color:var(--ink-faint); }
.smart{ min-width:210px; }
.smart .lab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.smart .lab span{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600; }
.smart .lab b{ font-size:22px; font-variant-numeric:tabular-nums; }
.streak{ font-size:12px; color:var(--ink-faint); margin-top:8px; min-height:16px; }
.layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start; }
@media (max-width:820px){ .layout{ grid-template-columns:1fr; } .smart{ width:100%; } }

.concept{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); }
.concept h4{ margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); }
.concept .body{ font-size:14px; color:var(--ink-soft); }
.concept .body p{ margin:0 0 8px; }
.formula{ background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  font-family:var(--mono); font-size:13px; margin:8px 0; overflow-x:auto; color:var(--ink); line-height:1.7; }

.qcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.qtext{ font-size:16px; line-height:1.6; margin-bottom:12px; }
.given-list{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:3px; }
.given-list li{ font-family:var(--mono); font-size:13.5px; color:var(--ink-soft); }
.answer-row{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
input.ans{ flex:1; min-width:140px; font-size:16px; padding:11px 14px; border-radius:10px;
  border:1.5px solid var(--line-strong); background:var(--surface-2); color:var(--ink); font-family:var(--mono); }
input.ans:focus{ outline:none; border-color:var(--accent); }
.unit{ align-self:center; font-family:var(--mono); color:var(--ink-faint); font-size:14px; }
.btn{ background:var(--accent); color:#fff; border:none; border-radius:10px; padding:0 22px; height:46px;
  font-size:15px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.btn:hover{ filter:brightness(1.06); }
.btn.small{ height:38px; padding:0 16px; font-size:13.5px; }
.btn:disabled{ opacity:.5; cursor:default; }
.choices{ display:flex; flex-direction:column; gap:10px; }
.choice{ text-align:left; background:var(--surface-2); border:1.5px solid var(--line); border-radius:10px;
  padding:12px 15px; cursor:pointer; font-size:15px; font-family:var(--mono); color:var(--ink); }
.choice:hover{ border-color:var(--line-strong); }
.choice.right{ border-color:var(--good); background:var(--good-soft); }
.choice.wrong{ border-color:var(--bad); background:var(--bad-soft); }

.feedback{ margin-top:16px; border-radius:11px; padding:14px 16px; font-size:14px; display:none; }
.feedback.show{ display:block; }
.feedback.ok{ background:var(--good-soft); border:1px solid var(--good); }
.feedback.no{ background:var(--bad-soft); border:1px solid var(--bad); }
.feedback .fb-head{ font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.feedback.ok .fb-head{ color:var(--good); }
.feedback.no .fb-head{ color:var(--bad); }
.solution{ margin-top:8px; color:var(--ink-soft); font-size:13.5px; line-height:1.65; }
.solution .formula{ margin:6px 0; }
.next-row{ display:flex; gap:10px; margin-top:16px; }

/* modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(10,15,25,.55); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal-overlay.show{ display:flex; }
.modal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  width:100%; max-width:560px; padding:20px; }
.modal-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.modal-head .subj-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.diag-progress{ font-size:13px; color:var(--ink-faint); margin-top:2px; }
.modal-body{ margin:16px 0; }
.modal-foot{ display:flex; justify-content:flex-end; }

.footnote{ text-align:center; color:var(--ink-faint); font-size:12px; margin-top:40px; line-height:1.7; }

/* depth chips */
.card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.depth-chip{ font-size:10.5px; font-weight:700; border:1px solid var(--ink-faint); border-radius:6px; padding:1px 6px;
  letter-spacing:.02em; white-space:nowrap; }
.p-sub{ display:flex; align-items:center; gap:10px; margin-top:2px; }

/* resources */
.concept h4{ margin:16px 0 8px; }
.concept h4:first-child{ margin-top:0; }
.res-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.res-list li{ display:flex; flex-direction:column; gap:2px; }
.res-list a{ color:var(--accent); text-decoration:none; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; line-height:1.3; }
.res-list a:hover{ text-decoration:underline; }
.res-d{ font-size:12px; color:var(--ink-faint); padding-left:2px; }
.res-k{ font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; border-radius:5px; padding:1px 5px; flex:none; }
.res-video{ background:var(--bad-soft); color:var(--bad); }
.res-reading{ background:var(--accent-soft); color:var(--accent); }
.res-problems{ background:var(--good-soft); color:var(--good); }
.res-book{ background:var(--warn-soft); color:var(--warn); }   /* printed texts, not open-access */

/* multi-step problems */
.scenario{ font-size:15.5px; line-height:1.6; background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.scenario-tag{ display:inline-block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--accent); margin-right:8px; }
.scenario .formula{ margin-top:10px; }
.steps-wrap{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.step-box{ border:1px solid var(--line); border-radius:11px; padding:14px 15px; background:var(--surface); }
.step-box.active{ border-color:var(--line-strong); box-shadow:var(--shadow); }
.step-box.done-ok{ border-color:var(--good); background:var(--good-soft); }
.step-box.done-no{ border-color:var(--bad); background:var(--bad-soft); }
.step-progress{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--ink-faint); margin-bottom:6px; }
.step-prompt{ font-size:15px; line-height:1.55; margin-bottom:10px; }
.hint-btn{ background:none; border:1px dashed var(--line-strong); color:var(--ink-soft); border-radius:8px;
  padding:4px 10px; font-size:12px; cursor:pointer; margin-bottom:8px; }
.hint-btn:hover{ color:var(--ink); }
.hint{ font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); background:var(--surface-2);
  border-radius:8px; padding:8px 10px; margin-bottom:10px; overflow-x:auto; }
.step-fb{ display:none; margin-top:10px; font-size:13px; line-height:1.55; }
.step-fb.show{ display:block; }
.step-fb.ok{ color:var(--ink-soft); }
.step-fb.no{ color:var(--ink-soft); }
.step-fb b{ margin-right:4px; }
.step-fb .cont-btn{ display:block; margin-top:12px; height:40px; }

/* wide modal + standards table */
.modal.wide{ max-width:760px; max-height:86vh; overflow-y:auto; }
.std-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.std-tbl th,.std-tbl td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.std-tbl th{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); }
.std-tbl td.num,.std-tbl th.num{ text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rub-ex{ color:var(--ink-faint); }
.tbl-scroll{ overflow-x:auto; margin-bottom:6px; }
.cov{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; white-space:nowrap; }
.cov i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
#std-body h5{ font-size:13px; margin:18px 0 8px; letter-spacing:-.01em; }
#std-body h5:first-child{ margin-top:4px; }
.miss-list{ margin:0; padding-left:18px; font-size:13px; color:var(--ink-soft); line-height:1.6; }
.miss-list li{ margin-bottom:5px; }
.std-p,.std-src{ font-size:13px; color:var(--ink-soft); line-height:1.6; }
.std-src a{ color:var(--accent); text-decoration:none; }
.std-src a:hover{ text-decoration:underline; }

/* account / sync chip */
.account{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:7px 13px;
  box-shadow:var(--shadow); margin:-6px 2px 18px; width:fit-content; }
.sync-dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-faint); flex:none; }
.account .acct-email{ color:var(--ink); font-weight:600; }
.account .acct-email:not(:empty)::before{ content:"·"; color:var(--ink-faint); font-weight:400; margin-right:8px; }
.acct-signout{ color:var(--accent); text-decoration:none; font-weight:600; margin-left:2px; }
.acct-signout::before{ content:"·"; color:var(--ink-faint); font-weight:400; margin-right:8px; }
.acct-signout:hover{ text-decoration:underline; }

/* mode switch */
.mode-switch{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:3px; gap:3px; }
.seg{ border:none; background:none; color:var(--ink-soft); font-weight:600; font-size:13px; padding:7px 14px; border-radius:9px; cursor:pointer; }
.seg:hover{ color:var(--ink); }
.seg.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
.browse-title{ font-size:18px; margin:0 0 14px; letter-spacing:-.01em; }
[hidden]{ display:none !important; }

/* path hero */
.path-hero{ background:linear-gradient(135deg, var(--accent-soft), var(--surface)); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); margin-bottom:22px; }
.hero-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--ink-faint); margin-bottom:8px; }
.hero-skill{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.hero-skill .subj-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.hero-skill h3{ margin:0; font-size:20px; letter-spacing:-.02em; width:100%; }
.hero-prog{ font-size:12.5px; color:var(--ink-faint); margin-top:12px; font-variant-numeric:tabular-nums; }

/* path units */
.unit{ margin-bottom:26px; }
.unit-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.unit-num{ flex:none; width:30px; height:30px; border-radius:9px; color:#fff; font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center; }
.unit-titles{ margin-right:auto; }
.unit-titles h4{ margin:2px 0 2px; font-size:16px; letter-spacing:-.01em; }
.unit-titles p{ margin:0; font-size:12.5px; color:var(--ink-faint); max-width:60ch; line-height:1.5; }
.unit-prog{ font-size:13px; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

/* path nodes (vertical stepper) */
.nodes{ display:flex; flex-direction:column; gap:8px; padding-left:14px; border-left:2px solid var(--line); margin-left:15px; }
.node{ display:flex; align-items:center; gap:12px; text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:11px; padding:11px 14px; cursor:pointer; position:relative; box-shadow:var(--shadow); width:100%; }
.node:hover{ border-color:var(--line-strong); }
.node-dot{ flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; border:2px solid var(--line-strong); background:var(--surface-2); color:var(--ink-faint); margin-left:-27px; }
.node-mastered .node-dot{ background:var(--good); border-color:var(--good); color:#fff; }
.node-current .node-dot{ background:var(--accent); border-color:var(--accent); color:#fff; animation:pulse 1.8s ease-in-out infinite; }
.node-locked{ opacity:.6; cursor:not-allowed; }
.node-locked:hover{ border-color:var(--line); }
.node-current{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--shadow); }
.node-body{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.node-name{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.node-meta{ display:flex; align-items:center; gap:10px; }
.depth-chip.sm{ font-size:9.5px; padding:0 5px; }
.node-track{ flex:1; height:6px; background:var(--surface-2); border-radius:99px; overflow:hidden; max-width:200px; }
.node-track > i{ display:block; height:100%; border-radius:99px; }
.node-score{ font-size:12px; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums; min-width:22px; text-align:right; }
.node.shake{ animation:shake .4s ease; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 var(--accent-soft); } 50%{ box-shadow:0 0 0 5px var(--accent-soft); } }

/* lesson mode */
.lp-toggle{ margin-top:10px; }
.lesson{ display:flex; flex-direction:column; }
.lesson-h{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin:4px 0 8px; }
.lesson-h + *{ margin-top:0; }
.lesson-body{ font-size:15px; line-height:1.65; color:var(--ink); margin-bottom:18px; }
.lesson-body p{ margin:0 0 12px; }
.lesson-body b{ color:var(--ink); }
.lesson-graph{ margin:4px 0 20px; display:flex; justify-content:center; }
.chart{ width:100%; max-width:420px; height:auto; }
.chart .axl{ fill:var(--ink-faint); font-size:11px; font-family:var(--sans); }
.chart .axt{ fill:var(--ink); font-size:12px; font-weight:700; font-family:var(--sans); }
.chart .note{ fill:var(--ink-soft); font-size:10.5px; font-family:var(--sans); }
.worked-steps{ margin:0 0 18px; padding-left:20px; display:flex; flex-direction:column; gap:10px; }
.worked-steps li{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.worked-sol{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:16px; }

/* hint on single problems */
.hint-row{ margin-top:12px; }
.hint-row .hint{ margin-top:8px; }

/* focus card */
.focus-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow); margin-bottom:22px; }
.focus-h{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--ink-faint); margin-bottom:10px; }
.focus-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:9px 12px; margin-bottom:7px;
  cursor:pointer; font-size:13.5px; color:var(--ink); text-align:left; }
.focus-item:last-child{ margin-bottom:0; }
.focus-item:hover{ border-color:var(--line-strong); }
.focus-name{ font-weight:600; }
.focus-score{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--warn); flex:none; }

/* courses (UCI plan) */
.courses-intro{ margin-bottom:18px; }
.courses-intro h2{ font-size:20px; margin:0 0 4px; letter-spacing:-.02em; }
.courses-intro p{ margin:0; color:var(--ink-faint); font-size:13.5px; }
.course-track{ margin-bottom:24px; }
.track-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--ink-faint);
  margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.course-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.course-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  cursor:pointer; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px;
  transition:transform .12s ease, border-color .12s ease; }
.course-card:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.course-term{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--accent); }
.course-code{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.course-name{ font-size:13px; color:var(--ink-soft); line-height:1.35; margin-bottom:6px; min-height:34px; }
.course-card .mini-track{ height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.course-card .mini-track > i{ display:block; height:100%; border-radius:99px; transition:width .4s ease; }
.course-meta{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; margin-top:2px; }
.course-avg{ font-weight:700; }
.course-title{ font-size:18px; }
#grid-title .back{ margin:0 10px 0 0; padding:0; }

/* formula reference */
.fref-group{ margin-bottom:20px; }
.fref-subj{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:10px;
  border-bottom:1px solid var(--line); padding-bottom:6px; }
.fref-item{ display:grid; grid-template-columns:1fr 1.4fr; gap:12px; align-items:center; padding:6px 0; }
@media (max-width:600px){ .fref-item{ grid-template-columns:1fr; gap:4px; } }
.fref-name{ font-size:13px; font-weight:600; color:var(--ink); }
.fref-item .formula{ margin:0; }

/* KaTeX-typeset math */
.formula.tex-done{ font-family:inherit; text-align:left; }
.formula .katex-display{ margin:.35em 0; text-align:left; }
.formula .katex-display > .katex{ text-align:left; }
.formula .katex{ font-size:1.06em; white-space:normal; }
.eq.tex-done{ font-family:inherit; }
.solution .formula.tex-done, .step-fb .formula.tex-done, .worked-sol .formula.tex-done, .worked-steps .formula.tex-done{ background:none; border:none; padding:0; margin:.2em 0; }
.worked-steps li .formula.tex-done .katex-display{ text-align:left; margin:.15em 0; }
.katex{ color:inherit; }

/* mastery celebration */
.next-row.mastery{ display:block; }
.mastery-card{ background:var(--good-soft); border:1px solid var(--good); border-radius:12px; padding:16px 18px; }
.mastery-card.pop{ animation:pop .45s cubic-bezier(.34,1.56,.64,1); }
.mastery-badge{ font-size:18px; font-weight:800; color:var(--good); margin-bottom:4px; letter-spacing:-.01em; }
.mastery-sub{ font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; line-height:1.55; }
.mastery-actions{ display:flex; gap:10px; flex-wrap:wrap; }
@keyframes pop{ 0%{ transform:scale(.92); opacity:.4; } 100%{ transform:scale(1); opacity:1; } }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }
.flash-ok{ animation:fok .5s ease; }
.flash-no{ animation:fno .4s ease; }
@keyframes fok{ 0%{ box-shadow:0 0 0 3px var(--good); } 100%{ box-shadow:var(--shadow); } }
@keyframes fno{ 0%,60%{ transform:translateX(0);} 15%{ transform:translateX(-6px);} 30%{ transform:translateX(6px);} 45%{ transform:translateX(-4px);} }
@keyframes shake{ 0%,60%{ transform:translateX(0);} 15%{ transform:translateX(-5px);} 30%{ transform:translateX(5px);} 45%{ transform:translateX(-3px);} }

/* ==================== code problems (Python) ==================== */
.code-wrap{ border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; background:var(--surface-2); margin:14px 0 10px; }
.code-filebar{ font:600 12px/1 var(--mono); color:var(--ink-faint); padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--line); letter-spacing:.02em; }
.code-editor{ display:block; width:100%; box-sizing:border-box; border:0; resize:vertical; min-height:280px;
  font:13px/1.55 var(--mono); tab-size:4; color:var(--ink); background:transparent; padding:12px 14px; outline:none; }
.code-editor:focus{ box-shadow: inset 0 0 0 2px var(--accent-soft); }
.code-static{ margin:0; padding:12px 14px; font:13px/1.55 var(--mono); color:var(--ink-soft); white-space:pre; overflow-x:auto; }
.code-hint-note{ color:var(--ink-soft); font-size:14px; margin:10px 0; }
.code-tests{ margin:2px 0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.code-tests summary{ cursor:pointer; padding:9px 12px; font:600 13px var(--sans); color:var(--accent); user-select:none; }
.code-tests summary:hover{ color:var(--ink); }
.code-tests pre{ margin:0; padding:0 14px 12px; font:12.5px/1.5 var(--mono); color:var(--ink-soft); white-space:pre; overflow-x:auto; }
.code-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.code-status{ font-size:13px; color:var(--ink-faint); }
.code-output{ margin-top:12px; }
.code-output:empty{ display:none; }
.code-outhead{ font:600 14px var(--sans); margin-bottom:6px; }
.code-outhead .ok{ color:var(--good); }
.code-outhead .no{ color:var(--bad); }
.code-output pre{ margin:0; padding:12px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line);
  font:12.5px/1.5 var(--mono); color:var(--ink-soft); white-space:pre-wrap; overflow-x:auto; max-height:340px; overflow-y:auto; }

/* ==================== read-aloud (audio) ==================== */
.lesson-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.listen-row{ margin:2px 0 4px; }
.listen-btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--accent);
  color:var(--accent); background:var(--accent-soft); border-radius:99px; padding:5px 13px;
  font:600 12.5px var(--sans); cursor:pointer; }
.listen-btn:hover{ background:var(--accent); color:#fff; }
.listen-btn.playing{ background:var(--accent); color:#fff; }

/* ==================== TLC brand + domain switcher ==================== */
.tlc-mark{ display:block; }
.brand .logo{ display:inline-flex; align-items:center; }
.domain-switch{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.dom-pill{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  border-radius:12px; padding:9px 15px; font:600 13.5px var(--sans); box-shadow:var(--shadow); }
.dom-pill .dom-ico{ font-size:15px; line-height:1; }
.dom-pill:hover{ border-color:var(--line-strong); color:var(--ink); }
.dom-pill.active{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
@media (max-width:640px){ .dom-pill .dom-nm{ font-size:12.5px; } }

/* ==================== AI safety color ==================== */
:root{ --ais:#0d9488; }
@media (prefers-color-scheme: dark){ :root{ --ais:#2dd4bf; } }
:root[data-theme="light"]{ --ais:#0d9488; }
:root[data-theme="dark"]{ --ais:#2dd4bf; }

/* ==================== learn-first flow (Watch → Learn → Practice) ==================== */
.lesson-flow{ display:flex; align-items:center; gap:8px; margin:0 0 14px; flex-wrap:wrap; }
.lf-step{ font:700 11px var(--sans); text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-faint); padding:4px 10px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); }
.lf-step.lf-current{ color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
.lf-arrow{ color:var(--ink-faint); font-size:13px; }
.watch-card{ display:flex; align-items:center; gap:14px; text-decoration:none; margin:0 0 18px;
  padding:14px 16px; border-radius:var(--radius); border:1px solid var(--line-strong);
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); box-shadow:var(--shadow); }
.watch-card:hover{ border-color:var(--accent); }
.watch-play{ flex:none; width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; padding-left:3px; }
.watch-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.watch-label{ font:700 10.5px var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.watch-title{ font-weight:600; color:var(--ink); font-size:15px; }
.watch-desc{ font-size:12.5px; color:var(--ink-faint); }
.watch-go{ margin-left:auto; flex:none; font:600 12.5px var(--sans); color:var(--accent); }

/* ==================== free-response (self-assessed) ==================== */
.free-editor{ display:block; width:100%; box-sizing:border-box; min-height:150px; resize:vertical;
  margin:6px 0 12px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--surface); color:var(--ink); font:15px/1.6 var(--sans); }
.free-editor:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--accent-soft); }
.free-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0; }
.free-model{ margin:16px 0; padding:14px 16px; border-radius:var(--radius); background:var(--accent-soft);
  border:1px solid var(--accent); }
.free-model-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.free-model-head h4{ margin:0; font-size:14px; color:var(--accent); }
.free-model-body{ margin-top:8px; }
.free-rubric{ margin:14px 0; }
.free-rubric h4{ font-size:14px; margin:0 0 10px; }
.rub-sub{ font-weight:400; color:var(--ink-faint); font-size:12.5px; }
.rub-item{ display:flex; gap:10px; align-items:flex-start; padding:9px 12px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; font-size:14px; }
.rub-item input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--accent); }
.rub-item:hover{ border-color:var(--line-strong); }

/* ==================== voice picker ==================== */
.voice-ctl{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); font-size:13px; }
.voice-ctl select{ border:0; background:transparent; color:var(--ink-soft); font:600 12.5px var(--sans);
  max-width:150px; cursor:pointer; outline:none; }

/* ==================== comp chem color ==================== */
:root{ --cc:#9333ea; }
@media (prefers-color-scheme: dark){ :root{ --cc:#c084fc; } }
:root[data-theme="light"]{ --cc:#9333ea; }
:root[data-theme="dark"]{ --cc:#c084fc; }

/* ==================== flashcards ==================== */
.flash-face{ position:relative; border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:22px 18px 18px; margin:0 0 12px; background:var(--surface); box-shadow:var(--shadow); font-size:16px; line-height:1.6; }
.flash-front{ background:linear-gradient(180deg,var(--surface),var(--surface-2)); }
.flash-back{ border-color:var(--accent); background:var(--accent-soft); }
.flash-side{ position:absolute; top:8px; right:12px; font:700 10px var(--sans); text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-faint); }
.rate-q{ font-size:13px; color:var(--ink-faint); margin-right:4px; align-self:center; }
.listen-inline{ display:inline-block; margin-left:6px; }

/* ==================== mic (dictation) ==================== */
.mic-btn.playing{ background:var(--bad); color:#fff; border-color:var(--bad); }

/* ==================== constellation (star map) ==================== */
.ctrl-right{ display:flex; gap:10px; align-items:center; }
.const-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:12px; }
.const-title{ font-size:20px; margin:0 0 4px; letter-spacing:-.01em; }
.const-sub{ margin:0; color:var(--ink-faint); font-size:13px; max-width:60ch; line-height:1.55; }
.const-legend{ display:flex; gap:12px; flex-wrap:wrap; }
.const-leg{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.const-dot{ width:10px; height:10px; border-radius:50%; }
.const-canvas-wrap{ position:relative; width:100%; height:min(68vh,640px); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  background:radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, var(--surface-2) 100%); }
:root[data-theme="dark"] .const-canvas-wrap{ background:radial-gradient(120% 120% at 50% 0%, #0c1120 0%, #070a12 100%); }
@media (prefers-color-scheme: dark){ .const-canvas-wrap{ background:radial-gradient(120% 120% at 50% 0%, #0c1120 0%, #070a12 100%); } }
#constCanvas{ display:block; width:100%; height:100%; touch-action:none; }
.const-tip{ position:absolute; display:none; max-width:240px; z-index:5; pointer-events:none;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; box-shadow:var(--shadow);
  padding:9px 11px; font-size:12.5px; line-height:1.45; color:var(--ink); }
.const-tip b{ display:block; font-size:13px; margin-bottom:2px; }
.const-tip .tip-dom{ display:block; color:var(--ink-faint); font-size:11.5px; }
.const-tip .tip-m{ display:block; color:var(--accent); font-weight:600; font-size:11.5px; margin-top:2px; }
.const-tip .tip-link{ display:block; font-weight:700; color:var(--accent); margin-bottom:3px; }

/* ==================== mobile app-polish ==================== */
.mobile-nav{ display:none; }

/* bottom settings sheet (used on mobile via the More tab) */
.sheet-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:50; opacity:0; transition:opacity .2s; }
.sheet-scrim.show{ opacity:1; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:51; background:var(--surface);
  border-radius:20px 20px 0 0; padding:8px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 44px rgba(0,0,0,.32); transform:translateY(100%);
  transition:transform .22s cubic-bezier(.4,0,.2,1); max-width:560px; margin:0 auto; }
.sheet.show{ transform:translateY(0); }
.sheet-grab{ width:42px; height:4px; border-radius:99px; background:var(--line-strong); margin:6px auto 12px; }
.sheet-title{ margin:0 0 12px; font-size:15px; }
.sheet-actions{ display:flex; flex-direction:column; gap:8px; }
.sheet-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  min-height:50px; padding:0 15px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2);
  color:var(--ink); font:600 14.5px var(--sans); cursor:pointer; text-align:left; }
.sheet-item:active{ transform:scale(.99); }
.sheet-voice select{ border:0; background:transparent; color:var(--ink-soft); font:600 13px var(--sans); max-width:150px; }
.sheet-danger{ color:var(--bad); }
.sheet-close{ width:100%; min-height:48px; margin-top:14px; border:0; border-radius:13px;
  background:var(--accent); color:#fff; font:700 15px var(--sans); cursor:pointer; }
.flash-front.tappable{ cursor:pointer; }

@media (max-width:640px){
  .wrap{ padding:16px 15px calc(78px + env(safe-area-inset-bottom)); }

  /* bottom tab bar */
  .mobile-nav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--surface); border-top:1px solid var(--line);
    padding:5px 4px calc(5px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 18px rgba(20,30,50,.10); }
  .mnav-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:0; padding:5px 2px; min-height:52px; color:var(--ink-faint); cursor:pointer; }
  .mnav-ic{ font-size:20px; line-height:1; }
  .mnav-lb{ font:600 10.5px var(--sans); letter-spacing:.01em; }
  .mnav-btn.active{ color:var(--accent); }
  .mnav-btn.active .mnav-ic{ transform:translateY(-1px); }

  /* desktop nav + secondary header controls give way to the bottom bar + sheet */
  .controls{ display:none; }
  #formulaBtn, #standardsBtn, #resetBtn, #themeBtn, #voiceCtl{ display:none !important; }

  /* 44px+ tap targets */
  .iconbtn, .seg, .dom-pill, .btn, .choice, .tab, .listen-btn{ min-height:44px; }
  .choice{ padding:12px 14px; }
  .btn{ padding:11px 16px; }

  /* compact header */
  header.top{ padding:4px 0 12px; gap:10px; align-items:center; }
  .brand h1{ font-size:19px; }
  .brand p{ font-size:11.5px; }
  .stat-chips{ gap:6px; }
  .chip{ min-width:56px; padding:6px 9px; }
  .chip b{ font-size:16px; }

  /* domain switch: horizontal scroll rail */
  .domain-switch{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:4px; margin-bottom:12px; scrollbar-width:none; }
  .domain-switch::-webkit-scrollbar{ display:none; }
  .dom-pill{ flex:0 0 auto; }

  /* practice view fills the screen */
  .practice .layout{ grid-template-columns:1fr; }
  .const-canvas-wrap{ height:min(62vh,540px); }
  .const-head{ gap:10px; }
}

/* PWA install affordance in the sheet */
.sheet-install{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:700; }

/* video demoted to an optional supplement (below the authored lesson) */
.watch-card.watch-supp{ background:var(--surface); border-color:var(--line); margin:18px 0 4px; }
.watch-card.watch-supp:hover{ border-color:var(--line-strong); }
.watch-card.watch-supp .watch-play{ width:34px; height:34px; font-size:13px; background:var(--ink-faint); }
.watch-card.watch-supp .watch-label{ color:var(--ink-faint); }

/* ==================== syntax highlighting ==================== */
.tok-kw{ color:#0b5cc4; font-weight:600; }
.tok-str{ color:#0a8f57; }
.tok-com{ color:#8791a3; font-style:italic; }
.tok-num{ color:#c2410c; }
@media (prefers-color-scheme: dark){
  .tok-kw{ color:#7cb7ff; } .tok-str{ color:#7ee0a8; } .tok-com{ color:#79879b; } .tok-num{ color:#ffab6b; }
}
:root[data-theme="light"]{ }
:root[data-theme="dark"] .tok-kw{ color:#7cb7ff; }
:root[data-theme="dark"] .tok-str{ color:#7ee0a8; }
:root[data-theme="dark"] .tok-com{ color:#79879b; }
:root[data-theme="dark"] .tok-num{ color:#ffab6b; }
:root[data-theme="light"] .tok-kw{ color:#0b5cc4; }
:root[data-theme="light"] .tok-str{ color:#0a8f57; }
:root[data-theme="light"] .tok-com{ color:#8791a3; }
:root[data-theme="light"] .tok-num{ color:#c2410c; }

/* code snippet inside a lesson */
.lesson-code{ margin:12px 0; padding:12px 14px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--surface-2); font:13px/1.55 var(--mono); color:var(--ink); white-space:pre; overflow-x:auto; tab-size:4; }

/* live-highlight overlay behind the editor: identical box metrics keep it aligned */
.code-hl-wrap{ position:relative; }
.code-hl, .code-editor-hl{
  font:13px/1.55 var(--mono); padding:12px 14px; margin:0; border:0; tab-size:4;
  white-space:pre; word-wrap:normal; box-sizing:border-box; letter-spacing:0;
}
.code-hl{ position:absolute; inset:0; z-index:0; color:var(--ink); overflow:hidden; pointer-events:none; }
.code-editor-hl{ position:relative; z-index:1; display:block; width:100%; min-height:280px; resize:vertical;
  background:transparent; color:transparent; caret-color:var(--ink); outline:none; overflow:auto; }
.code-editor-hl:focus{ box-shadow:inset 0 0 0 2px var(--accent-soft); }

/* ==================== timed mock countdown ==================== */
.mock-timer{ margin:0 0 14px; padding:11px 15px; border-radius:11px; font:600 14px var(--sans);
  background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent); }
.mock-timer b{ font-variant-numeric:tabular-nums; font-size:15px; }
.mock-timer.low{ background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.mock-timer.over{ background:var(--bad-soft); border-color:var(--bad); color:var(--bad); }
.mock-timer.done{ background:var(--good-soft); border-color:var(--good); color:var(--good); }

/* ==================== graduated hints + misconception tips ==================== */
.hint-box{ display:flex; flex-direction:column; gap:8px; margin:10px 0 0; }
.hint-box:empty{ display:none; }
.hint-item{ background:var(--warn-soft); border:1px solid var(--warn); border-radius:10px; padding:9px 12px; font-size:13.5px; color:var(--ink); line-height:1.5; }
.code-tip{ background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px; padding:9px 12px; margin-bottom:8px; font-size:13.5px; color:var(--ink); line-height:1.5; }
.code-tip code, .hint-item code{ background:var(--surface); padding:.05em .35em; border-radius:4px; font-family:var(--mono); font-size:.88em; }

/* ==================== Focus (weak spots) view ==================== */
.focus-intro{ margin-bottom:18px; }
.focus-title{ font-size:20px; margin:0 0 4px; letter-spacing:-.01em; }
.focus-intro .focus-sub{ margin:0; color:var(--ink-faint); font-size:13px; font-variant-numeric:tabular-nums; }
.focus-sec{ margin-bottom:22px; }
.focus-sec-head{ margin-bottom:10px; }
.focus-h{ font-size:15px; margin:0; }
.focus-hint{ margin:2px 0 0; color:var(--ink-faint); font-size:12.5px; }

/* checkpoint badge on the checkpoint exercise */
.checkpoint-badge{ display:inline-block; margin:0 0 12px; padding:6px 12px; border-radius:99px;
  background:var(--good-soft); border:1px solid var(--good); color:var(--good); font:700 12.5px var(--sans); }

/* ==================== app-native feel ==================== */
/* view transition on every route change */
@media (prefers-reduced-motion: no-preference){
  .view-in{ animation: viewIn .22s cubic-bezier(.32,.72,0,1); }
  @keyframes viewIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
}

/* offline banner */
.offline-bar{ background:var(--warn-soft); border:1px solid var(--warn); color:var(--warn);
  border-radius:11px; padding:9px 14px; margin:0 0 14px; font:600 13px var(--sans); }

/* code editor toolbar — the Tab/bracket keys phone keyboards don't have */
.code-toolbar{ display:none; gap:6px; padding:7px 8px; border-top:1px solid var(--line);
  background:var(--surface); overflow-x:auto; scrollbar-width:none; }
.code-toolbar::-webkit-scrollbar{ display:none; }
.code-toolbar button{ flex:0 0 auto; min-width:40px; min-height:38px; border:1px solid var(--line-strong);
  border-radius:9px; background:var(--surface-2); color:var(--ink);
  font:600 15px var(--mono); cursor:pointer; }
.code-toolbar button:active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

/* show the toolbar where there's no physical Tab key */
@media (max-width:900px), (pointer:coarse){
  .code-toolbar{ display:flex; }
}

/* daily-reminder toggle in the sheet */
.sheet-item#sheetRemind span{ font:600 12.5px var(--sans); color:var(--ink-faint); }
.sheet-item.remind-on{ border-color:var(--good); color:var(--good); }
.sheet-item.remind-on span{ color:var(--good); }

/* ==================== Tutor (the one LLM-backed feature) ====================
   Deliberately visually distinct from authored lesson content: a dashed
   border and a "Tutor" tag, so generated text is never mistaken for the
   curriculum. Absent entirely when /api/tutor has no key. */
.tutor{ margin:14px 0 0; }
.tutor-cue{ margin:14px 0 0; font:600 13px var(--sans); color:var(--ink-faint); }
.tutor-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:stretch; }
.tutor-note{ flex:1 1 240px; min-width:0; padding:9px 12px; border:1px solid var(--line-strong);
  border-radius:10px; background:var(--surface); color:var(--ink);
  font:400 13.5px var(--sans); }
.tutor-note::placeholder{ color:var(--ink-faint); }
.tutor-note:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tutor-btn{ flex:0 0 auto; }
.tutor-out:empty{ display:none; }
.tutor-out{ margin-top:10px; }

.tutor-answer{ border:1px dashed var(--accent); border-radius:12px;
  background:var(--accent-soft); padding:12px 14px; }
.tutor-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tutor-tag{ font:700 11px var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--accent); border-radius:6px; padding:2px 7px; }
.tutor-body{ font-size:14.5px; line-height:1.62; color:var(--ink); }
.tutor-body p{ margin:0 0 .7em; }
.tutor-body p:last-child{ margin-bottom:0; }
.tutor-body code{ background:var(--surface); padding:.05em .35em; border-radius:4px;
  font-family:var(--mono); font-size:.88em; }
.tutor-body pre{ background:var(--surface); border:1px solid var(--line);
  border-radius:9px; padding:10px 12px; overflow-x:auto;
  font:400 13px/1.55 var(--mono); margin:.6em 0; }
.tutor-body ul{ margin:.5em 0; padding-left:1.3em; }
.tutor-body li{ margin:.3em 0; }
.tutor-foot{ margin-top:10px; font:600 11.5px var(--sans); color:var(--ink-faint); }

.tutor-wait{ font:600 13px var(--sans); color:var(--ink-faint); padding:9px 2px; }
.tutor-err{ background:var(--warn-soft); border:1px solid var(--warn); border-radius:10px;
  padding:9px 12px; font:600 13px var(--sans); color:var(--warn); line-height:1.5; }
.tutor-locked{ background:var(--surface-2); border:1px dashed var(--line-strong);
  border-radius:11px; padding:10px 13px; color:var(--ink-faint); }
.tutor-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ==================== Office Hours (explain it back) ==================== */
.seg.locked{ opacity:.55; }
.oh-gate{ text-align:center; padding:26px 18px; }
.oh-gate h4{ margin:0 0 10px; font:700 16px var(--sans); color:var(--ink); }
.oh-gate p{ margin:0 auto; max-width:46ch; font-size:14px; line-height:1.6; color:var(--ink-faint); }

.oh-head{ display:flex; align-items:center; gap:11px; padding-bottom:12px;
  border-bottom:1px solid var(--line); margin-bottom:14px; }
.oh-avatar{ font-size:26px; line-height:1; }
.oh-who{ display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; }
.oh-who b{ font:700 14.5px var(--sans); color:var(--ink); }
.oh-tag{ font:500 12px var(--sans); color:var(--ink-faint); }
.oh-swap{ flex:0 0 auto; font-size:12.5px; padding:5px 10px; }

.oh-msg{ background:var(--surface-2); border:1px solid var(--line);
  border-radius:13px; padding:13px 15px; margin-bottom:12px; }
.oh-opener{ margin:0 0 8px; font-size:14px; line-height:1.6; color:var(--ink-faint); font-style:italic; }
.oh-q{ margin:0; font:600 15.5px/1.6 var(--sans); color:var(--ink); }

.oh-verdict{ border-radius:12px; padding:12px 14px; margin-top:12px; border:1px solid; }
.oh-verdict.ok{ background:var(--good-soft); border-color:var(--good); }
.oh-verdict.mid{ background:var(--warn-soft); border-color:var(--warn); }
.oh-verdict.no{ background:var(--bad-soft); border-color:var(--bad); }
.oh-vhead{ font:700 13.5px var(--sans); margin-bottom:6px; }
.oh-verdict.ok .oh-vhead{ color:var(--good); }
.oh-verdict.mid .oh-vhead{ color:var(--warn); }
.oh-verdict.no .oh-vhead{ color:var(--bad); }
.oh-react{ font-size:14.5px; line-height:1.6; color:var(--ink); }

.oh-rubric{ margin-top:14px; }
.oh-rubric h4{ margin:0 0 8px; font:700 13px var(--sans); color:var(--ink-faint); }
.oh-rubric ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.oh-rubric li{ font-size:13.5px; line-height:1.5; padding:7px 11px; border-radius:9px; }
.rub-hit{ background:var(--good-soft); color:var(--ink); }
.rub-miss{ background:var(--surface-2); color:var(--ink-faint); }

/* Teaching mode: the role inversion has to be visible, not just stated.
   Their question sits left and indented like an incoming message; your
   answer box is full-width and yours. */
.oh-role{ background:var(--accent-soft); border:1px solid var(--accent);
  border-radius:11px; padding:10px 13px; margin-bottom:14px;
  font:500 13.5px/1.6 var(--sans); color:var(--ink); }
.oh-role b{ color:var(--accent); }
.oh-role-chip{ flex:0 0 auto; font:700 10.5px var(--sans); letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent);
  border-radius:6px; padding:2px 7px; }
.oh-incoming{ margin-right:14%; border-bottom-left-radius:4px; }
.oh-from{ display:block; margin-top:8px; font:600 11.5px var(--sans); color:var(--ink-faint); }
@media (max-width:600px){ .oh-incoming{ margin-right:0; } }

/* Review queue: snooze controls. Labelled "not today"/"not now" on purpose —
   these move the due date only; they never record a review that didn't happen. */
.review-bar{ grid-column:1/-1; display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; padding:10px 13px; margin-bottom:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px; }
.review-count{ font:700 13px var(--sans); color:var(--ink); }
.snooze-btn{ position:absolute; top:9px; right:9px; z-index:2;
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink-faint); border-radius:8px; padding:3px 9px;
  font:600 11.5px var(--sans); cursor:pointer; }
.snooze-btn:hover{ border-color:var(--accent); color:var(--accent); }