:root{
  /* accent is set per-subject at runtime by app.js */
  --accent:#4FAE95; --accent-soft:rgba(79,174,149,.22); --accent-ink:#8FD4C0;
  --board:#0B221F; --card:#123430; --card2:#0E2A27; --edge:#1C4A44; --edge2:#0E2A27;
  --ink:#F3EAD5; --muted:rgba(243,234,213,.72); --faint:rgba(243,234,213,.46);
  --good:#4FAE95; --good-bg:rgba(79,174,149,.14); --good-line:rgba(79,174,149,.4);
  --bad:#E2685A; --bad-bg:rgba(226,104,90,.14); --bad-line:rgba(226,104,90,.4);
  --warn:#C4842E; --warn-bg:rgba(196,132,46,.14); --warn-line:rgba(196,132,46,.4);
  --paper2:#0A2320;
  --display:"Newsreader",serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html,body{margin:0; overscroll-behavior-y:none;}
/* No general anchor rule existed anywhere in this file — any plain <a> tag
   without its own class (e.g. "Forgot password?", "Register") was falling
   back to the browser's default blue/purple link colors instead of the
   app's own theme. One rule fixes it everywhere this pattern occurs, not
   just the one page it was first noticed on. */
a{color:var(--accent);}
a:visited{color:var(--accent);}
body{font-family:var(--body); color:var(--ink); line-height:1.55;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(79,174,149,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(196,132,46,.05), transparent 55%),
    var(--board);
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
  padding:calc(18px + var(--safe-top)) 0 calc(74px + var(--safe-bot));}
.wrap{max-width:900px; margin:0 auto; padding:0 24px;}

/* ---------- persistent top nav ---------- */
.mainnav{position:sticky; top:0; z-index:60; background:var(--board);
  border-bottom:1px solid var(--edge); box-shadow:0 2px 12px rgba(0,0,0,.2);}
.mainnav-inner{max-width:900px; margin:0 auto; padding:13px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.mainlogo{background:none; border:0; cursor:pointer; padding:0; font-family:var(--display); font-weight:600;
  text-transform:uppercase; letter-spacing:.005em; font-size:19px; color:var(--ink);
  display:flex; align-items:center; gap:8px;}
.mainlogo-img{width:26px; height:26px; object-fit:contain; display:block;}
.mainlogo .u{position:relative; color:var(--accent);}
.mainlinks{display:flex; gap:8px; flex:0 0 auto;}
.navlink{background:none; border:1px solid var(--edge); border-radius:8px; padding:8px 14px; cursor:pointer;
  font-family:var(--mono); font-size:14.5px; color:var(--muted); white-space:nowrap; transition:color .15s,border-color .15s;}
.navlink:hover{color:var(--ink); border-color:var(--accent-soft);}
/* The mic is a distinct, novel capability, not just another utility link
   like Home/Search — it was easy to miss sitting in the same plain-text
   style as everything else next to it. A filled accent circle instead of
   an outlined text button gives it real visual weight without going as
   far as an attention-grabbing animation at rest (that's reserved for the
   actual listening state, see .voicemic.listening below). */
.navlink#navMic{width:38px; height:38px; padding:0; border-radius:50%; border:0;
  background:var(--accent); color:#fff; font-size:18px; display:inline-flex;
  align-items:center; justify-content:center;}
.navlink#navMic:hover{background:var(--accent-ink); border-color:transparent;}
@media(max-width:480px){.mainlinks .navlink{padding:8px 10px; font-size:13px;}}
.navdd{position:relative;}
.navdd-menu{position:absolute; top:calc(100% + 8px); right:0; background:var(--card); border:1px solid var(--edge);
  border-radius:10px; min-width:170px; padding:6px; display:none; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.35);}
.navdd-menu.open{display:block;}
.navdd-item{display:block; width:100%; text-align:left; background:none; border:0; border-radius:7px; padding:9px 12px;
  cursor:pointer; font-family:var(--sans); font-size:16px; color:var(--ink);}
.navdd-item:hover{background:var(--edge2);}
::selection{background:var(--accent-soft);}
button{font:inherit;}

/* ---------- subject tabs (top nav) ---------- */
/* touch-action:pan-x is the actual fix here, not overscroll-behavior — this
   element only claims horizontal pan gestures, so a vertical scroll
   attempt while the cursor happens to be over this sticky bar passes
   straight through to the page instead of getting captured by this strip.
   Course/subject pages are the only place in the app with a horizontal
   scroller like this, which is exactly why the trackpad-scroll issue was
   isolated to them specifically. */
.subtabs{position:sticky; top:var(--navh, 58px); z-index:55; background:var(--board); display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--edge); margin:4px 0 20px; scrollbar-width:none; touch-action:pan-x;}
.subtabs::-webkit-scrollbar{display:none;}
.subtab{flex:0 0 auto; font-family:var(--mono); font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); background:none; border:none; cursor:pointer; padding:11px 14px;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .15s;}
.subtab:hover{color:var(--ink);}
.subtab.on{color:var(--sub); border-bottom-color:var(--sub);}
.subtab.showall{color:var(--accent); opacity:.85;}
.subtab.showall:hover{opacity:1;}

/* ---------- shared bits ---------- */
.eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600;}
h1{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.005em;
   font-size:clamp(36px,10vw,54px); line-height:.94; margin:.1em 0 .12em;}
h1 .u{position:relative; display:inline-block;}
h1 .u::after{content:""; position:absolute; left:-2px; right:-2px; bottom:.07em; height:.13em; background:var(--accent-soft); border-radius:2px;}
.lede{color:var(--muted); font-size:17.5px; max-width:46ch; margin:.4em 0 0;}

.notesbtn{display:inline-flex; align-items:center; gap:6px; margin-top:12px; background:var(--card2);
  border:1px solid var(--edge); border-radius:99px; padding:8px 15px; font-family:var(--mono); font-size:14.5px;
  color:var(--muted); cursor:pointer;}
.notesbtn:hover{color:var(--ink); border-color:var(--accent-soft);}
/* Same reasoning as #navMic above — a distinct capability shouldn't look
   like just another item in a row of plain utility buttons. */
.notesbtn.micbtn{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
.notesbtn.micbtn:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff;}

.hubactions{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.hubactions .notesbtn{margin-top:0;}
.howto-answer{margin-top:16px; padding:16px 18px; background:var(--card); border:1px solid var(--edge);
  border-radius:11px; font-size:17px; line-height:1.6;}
.howto-answer:empty{display:none;}

.fboverlay{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80;
  display:flex; align-items:flex-end; justify-content:center; padding:0;}
@media(min-width:640px){.fboverlay{align-items:center; padding:20px;}}
.fbcard{width:100%; max-width:520px; border-radius:16px 16px 0 0; margin:0;}
@media(min-width:640px){.fbcard{border-radius:14px;}}
.fbcard h3{font-family:var(--display); font-size:20.5px; margin-bottom:12px;}

.checklist{margin-top:26px;}
.clist{list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.citem{background:var(--card); border:1px solid var(--edge); border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0; padding:11px 14px;}
.citem.term{border-left-color:var(--warn);}
.clab{display:block; font-weight:600; font-size:16.5px; margin-bottom:3px;}
.cdet{display:block; font-size:15px; color:var(--muted); line-height:1.5;}

.notepad-wrap{margin-top:30px;}
.notepad-area{width:100%; background:var(--card); border:1px solid var(--edge); border-radius:11px;
  padding:16px; font-family:var(--body); font-size:17.5px; line-height:1.6; color:var(--ink);
  resize:vertical; margin-top:12px;}
.notesaved{display:block; font-family:var(--mono); font-size:13px; color:var(--good); margin-top:8px; height:1.2em;}

.newterms{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:10px;
  padding:13px 15px; font-size:16px; line-height:1.55; color:var(--ink); margin-top:16px;}
.newterms b{color:var(--warn);}
.fwarn{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:10px;
  padding:12px 14px; font-size:15.5px; line-height:1.5; color:var(--ink); margin-top:14px;}

.searchbox{width:100%; background:var(--card); border:1px solid var(--edge); border-radius:11px;
  padding:14px 16px; font-family:var(--body); font-size:18px; color:var(--ink); margin-top:8px;
  -webkit-appearance:none;}
.searchbox:focus{outline:none; border-color:var(--accent);}
.searchresults{display:flex; flex-direction:column; gap:9px; margin-top:16px;}
.sresult{display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--edge);
  border-left:3px solid var(--sub, var(--accent)); border-radius:0 10px 10px 0; padding:12px 15px; cursor:pointer;}
.sresult:hover{border-color:var(--sub, var(--accent));}
.sr-top{display:flex; justify-content:space-between; gap:10px; margin-bottom:4px;}
.srkind{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--sub, var(--accent));}
.srsub{font-family:var(--mono); font-size:12px; color:var(--faint);}
.srlabel{font-weight:600; font-size:17px; margin-bottom:3px;}
.srsnip{font-size:15.5px; color:var(--muted); line-height:1.5;}

.dym{margin-top:10px; font-size:16.5px; color:var(--muted);}
.dymlabel{font-family:var(--mono); font-size:13.5px; color:var(--faint); margin-right:2px;}

.btn{font-family:var(--mono); font-weight:600; font-size:15.5px; letter-spacing:.04em; text-transform:uppercase;
  border-radius:10px; padding:14px 20px; cursor:pointer; border:1px solid var(--accent); width:100%;
  background:var(--accent); color:#fff;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.3; cursor:default;}
.btn.ghost{background:transparent; color:var(--accent);}
.btn+.btn{margin-top:9px;}
/* Used everywhere for button pairs (Cancel/Confirm, Try again, etc.), some
   with genuinely long labels ("Yes, permanently delete everything",
   "Run another assessment") — without wrap, two such buttons side by side
   can force horizontal overflow on a narrow phone. */
.actions{margin-top:15px; display:flex; gap:10px; flex-wrap:wrap;}
.actions .btn{width:auto; flex:1;}
/* For a row of several small peer actions (child management, admin rows) —
   distinct from .actions above, which is for 2-3 equal-width paired buttons
   (Cancel/Confirm). Content-sized and left-aligned instead of stretched,
   so 5-7 buttons of different label lengths read as a compact toolbar
   instead of a stack of oversized blocks. */
.btn-group{display:flex; gap:8px; flex-wrap:wrap;}
.btn-group .btn{width:auto; flex:0 0 auto; padding:9px 15px; font-size:12.5px; margin-top:0;}
.badge.review{background:var(--faint);}

/* ---------- hub ---------- */
.subjects{display:grid; gap:11px; margin-top:22px;}
.subject{display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--edge);
  border-left:5px solid var(--sub); border-radius:12px; padding:16px 16px; cursor:pointer; color:var(--ink);
  transition:border-color .15s, transform .1s;}
.subject:hover{border-color:var(--faint); border-left-color:var(--sub);}
.subject:active{transform:translateY(1px);}
.subject:focus-visible{outline:2px solid var(--sub); outline-offset:2px;}
.subject .row{display:flex; align-items:baseline; gap:10px;}
.subject h2{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:21.5px; margin:0; letter-spacing:.02em;}
.subject .n{font-family:var(--mono); font-size:13px; color:var(--faint); margin-left:auto;}
.subject .stat{font-size:15.5px; color:var(--muted); margin-top:5px;}
.subject .stat b{color:var(--sub); font-weight:600;}
.subject .meter{height:4px; background:var(--edge); border-radius:99px; overflow:hidden; margin-top:9px;}
.subject .meter>i{display:block; height:100%; background:var(--sub); border-radius:99px;}

.hubfoot{margin-top:24px; border-top:1px solid var(--edge2); padding-top:16px;}
.hubfoot h3{font-family:var(--mono); font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 9px;}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{font-family:var(--mono); font-size:13px; background:var(--bad-bg); border:1px solid var(--bad-line); color:var(--bad);
  border-radius:6px; padding:4px 9px;}
.chip.none{background:var(--good-bg); border-color:var(--good-line); color:var(--good);}

/* ---------- subject view ---------- */
.back{font-family:var(--mono); font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:none; border:0; padding:6px 0; cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
.back:hover{color:var(--accent);}
.shead{margin-bottom:18px;}
.shead .back{margin-bottom:6px;}
.shead h2{font-family:var(--display); font-weight:700; font-size:23.5px; margin:0;}

.routine{background:var(--card); border:1px solid var(--edge); border-radius:12px; padding:18px 18px 16px; margin:20px 0 14px;}
.routine h2{font-family:var(--display); text-transform:uppercase; font-weight:500; letter-spacing:.03em; font-size:19.5px; margin:0 0 12px;}
.routine ol{margin:0; padding:0; list-style:none; counter-reset:r; display:grid; gap:11px;}
.routine li{counter-increment:r; position:relative; padding-left:38px; font-size:16.5px; color:var(--muted);}
.routine li::before{content:counter(r); position:absolute; left:0; top:1px; width:24px; height:24px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-family:var(--mono); font-weight:600; border-radius:6px; font-size:13.5px;}
.routine b{color:var(--ink); font-weight:600;}

.cheat{margin:8px 0 4px;}
.cheat>summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px; padding:14px 16px;
  background:var(--card); border:1px solid var(--edge); border-radius:12px; font-family:var(--mono); font-weight:600; font-size:15px;}
.cheat>summary::-webkit-details-marker{display:none;}
.cheat>summary .note{font-family:var(--body); font-weight:400; color:var(--faint);}
.cheat>summary .chev{margin-left:auto; transition:transform .2s; color:var(--accent);}
.cheat[open]>summary .chev{transform:rotate(90deg);}
.cuecard{background:var(--card); border:1px solid var(--edge); border-radius:12px; padding:2px 2px 8px; margin:10px 0;}
.cuecard h3{font-family:var(--display); text-transform:uppercase; font-weight:500; letter-spacing:.04em; font-size:16px; margin:12px 14px 4px; color:var(--accent-ink);}
.cuerow{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.05fr); gap:9px; align-items:center;
  padding:8px 14px; border-top:1px solid var(--edge2); font-size:15.5px;}
.cuerow:first-of-type{border-top:none;}
.cuerow .see{font-weight:600;}
.cuerow .see i{font-style:normal; background:var(--accent-soft); padding:1px 3px; border-radius:3px;}
.cuerow .arr{color:var(--accent); font-family:var(--mono);}
.cuerow .do{color:var(--muted);}

.quizhead{display:flex; align-items:baseline; justify-content:space-between; margin:24px 2px 9px;}
.quizhead h2{font-family:var(--display); text-transform:uppercase; font-weight:600; letter-spacing:.03em; font-size:23.5px; margin:0;}
.score{font-family:var(--mono); font-size:15px; color:var(--muted); border:1px solid var(--edge); background:var(--card); padding:3px 10px; border-radius:99px;}
.bar{height:5px; background:var(--edge); border-radius:99px; overflow:hidden; margin:0 2px 16px;}
.bar>i{display:block; height:100%; width:0; background:var(--accent); transition:width .35s ease;}

/* ---------- question card ---------- */
.card{background:var(--card); border:1px solid var(--edge); border-radius:14px; padding:18px 17px 16px;}
.qnum{font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--faint); text-transform:uppercase;}
.badge{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--accent); border-radius:4px; padding:2px 6px; margin-left:8px;}
.stem{font-size:19.5px; line-height:1.45; margin:12px 0 2px; font-weight:500;}
.stem mark{background-color:transparent; color:inherit;
  background-image:linear-gradient(var(--accent-soft),var(--accent-soft)); background-repeat:no-repeat;
  background-size:0% 44%; background-position:0 86%; padding:0 2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  animation:swipe .5s cubic-bezier(.4,.9,.3,1) forwards;}
@keyframes swipe{to{background-size:100% 44%;}}
.ask{font-family:var(--mono); font-size:14.5px; letter-spacing:.06em; text-transform:uppercase; margin:15px 0 10px; color:var(--accent);}

.opts{display:grid; gap:9px;}
.opt{display:flex; gap:11px; align-items:center; width:100%; text-align:left; cursor:pointer; background:var(--card);
  border:1px solid var(--edge); border-radius:10px; padding:13px; font-size:17px; color:var(--ink);
  transition:border-color .15s, background .15s;}
.opt:hover{border-color:var(--faint);}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
/* Real checkbox rows for multi-select intake questions — a label wrapping
   an actual <input type=checkbox>, not a button that just changes color,
   since a genuine checkbox is a clearer "pick more than one" affordance. */
.opt.checkopt{cursor:pointer;}
.opt.checkopt input[type=checkbox]{width:20px; height:20px; accent-color:var(--accent); cursor:pointer; flex:0 0 auto;}
/* Neutral selection state for assessment mode — deliberately NOT using
   --good/--warn here, since the whole point of this mode is that nothing
   reveals right or wrong until the student actually submits. This only
   ever means "this is what you picked," same visual weight regardless of
   whether it turns out to be correct. */
.opt.picked{background:var(--accent-soft); border-color:var(--accent);}
.opt.picked .key{background:var(--accent); color:#fff;}
.opt .key{flex:0 0 auto; width:24px; height:24px; border-radius:5px; background:var(--edge); color:var(--muted);
  font-family:var(--mono); font-weight:600; font-size:13.5px; display:grid; place-items:center;}
.opt .mk{flex:0 0 auto; width:18px; text-align:center; font-family:var(--mono); font-weight:600; opacity:0;}
.opt.correct{background:var(--good-bg); border-color:var(--good-line);}
.opt.correct .key{background:var(--good); color:#fff;}
.opt.correct .mk{opacity:1; color:var(--good);}
/* Softened from --bad (alarm red) to --warn (the same warm amber already
   used for the word-check quiz's "unsure" wrong state) — a wrong answer
   during learning isn't a system error, and reads a lot less demoralizing
   as "worth a second look" amber than as stop-sign red. Actual system
   errors (failed login, a form that didn't submit) stay on --bad
   elsewhere — this change is scoped to in-quiz wrong-answer feedback only. */
.opt.wrong{background:var(--warn-bg); border-color:var(--warn-line);}
.opt.wrong .key{background:var(--warn); color:#06101e;}
.opt.wrong .mk{opacity:1; color:var(--warn);}
.opt.dim{opacity:.45;}
.opt[disabled]{cursor:default;}

.why{margin-top:13px; padding:13px 14px; border-radius:10px; background:var(--card2); border:1px solid var(--edge); font-size:16.5px; display:none;}
.why.show{display:block; animation:fade .25s ease;}
.why .lab{font-family:var(--mono); font-weight:600; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:5px;}
.why.ok .lab{color:var(--good);}
.why.no .lab{color:var(--warn);}
.why .topic{display:inline-block; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-soft); padding:2px 7px; border-radius:4px; margin-top:9px;}
@keyframes fade{from{opacity:0; transform:translateY(4px);}to{opacity:1; transform:none;}}

/* ---------- summary ---------- */
.done h2{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:27px; margin:0; text-align:center;}
.big{font-family:var(--display); font-size:56px; font-weight:600; line-height:1; color:var(--accent); text-align:center; margin:8px 0 0;}
.big small{font-size:23.5px; color:var(--faint);}
.msg{color:var(--muted); font-size:17px; margin:10px auto 0; max-width:38ch; text-align:center;}
.rev{margin-top:20px; border-top:1px solid var(--edge2); padding-top:16px;}
.rev h3{font-family:var(--mono); font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 9px;}
.rev ul{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.rev li{display:flex; align-items:center; gap:9px; font-size:16px; background:var(--card); border:1px solid var(--edge2); border-radius:8px; padding:9px 11px;}
.rev li .n{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--warn); background:var(--warn-bg); border-radius:4px; padding:2px 6px;}
.rev .clean{font-size:16px; color:var(--good); background:var(--good-bg); border:1px solid var(--good-line); border-radius:8px; padding:10px 12px;}

.coach{margin-top:16px; border:1px solid var(--accent-soft); background:var(--card2); border-radius:12px; padding:15px;}
.coach h3{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:18px; margin:0 0 6px; color:var(--accent-ink);}
.coach p{margin:0; font-size:16.5px;}
.coach .status{font-family:var(--mono); font-size:14.5px; color:var(--muted); display:flex; align-items:center; gap:8px;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:.25;}50%{opacity:1;}}
.coach.err{background:var(--bad-bg); border-color:var(--bad-line);}
.coach .note{font-size:15px; color:var(--muted); margin-top:6px;}

.paste label{font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:block; margin:12px 0 6px;}
.paste textarea{width:100%; min-height:110px; font-family:var(--mono); font-size:13.5px; line-height:1.5; color:var(--ink);
  background:var(--card); border:1px solid var(--edge); border-radius:9px; padding:11px; resize:vertical;}
.paste textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.step{display:flex; gap:9px; align-items:flex-start; font-size:16px; margin:10px 0;}
.step .n{font-family:var(--mono); font-size:12.5px; font-weight:600; color:#fff; background:var(--accent);
  border-radius:4px; padding:2px 7px; flex:0 0 auto; margin-top:2px;}

/* ---------- voice commands ---------- */
.voiceoverlay{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80;
  display:flex; align-items:flex-end; justify-content:center; padding:0;}
@media(min-width:640px){.voiceoverlay{align-items:center; padding:20px;}}
.voicecard{width:100%; max-width:480px; border-radius:16px 16px 0 0; margin:0;}
@media(min-width:640px){.voicecard{border-radius:14px;}}
.voicecard h3{font-family:var(--display); font-size:20.5px; margin-bottom:8px;}
.voicestatus{text-align:center; padding:8px 0 4px;}
.voicemic{display:inline-flex; color:var(--accent);}
.voicemic.listening{animation:voicepulse 1.1s ease-in-out infinite;}
@keyframes voicepulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.55; transform:scale(1.12);}}
.voicelabel{font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:10px 0 4px;}
.voicetranscript{font-size:17.5px; color:var(--ink); min-height:1.4em; margin:0;}
.voicecard .actions{flex-wrap:wrap;}
.voicecard .btn{flex:1; min-width:120px;}

.toast{position:fixed; left:50%; bottom:calc(18px + var(--safe-bot)); transform:translateX(-50%);
  background:var(--card2); border:1px solid var(--edge2); color:#fff; font-family:var(--mono); font-size:14.5px; padding:10px 16px; border-radius:99px;
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:50;}
.toast.show{opacity:1;}

.foot{font-family:var(--mono); color:var(--faint); font-size:13px; text-align:center; margin:26px 8px 0; line-height:1.8;}
.foot a{color:var(--muted);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .stem mark{background-size:100% 44%;}
}

/* ---------- word check ---------- */
.wordcta{background:var(--card); border:1px solid var(--edge); border-left:5px solid var(--accent);
  border-radius:12px; padding:16px 16px 14px; margin:14px 0 4px;}
.wc-head{display:flex; align-items:baseline; gap:10px;}
.wordcta h3{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:19px; margin:0; letter-spacing:.02em;}
.wc-n{font-family:var(--mono); font-size:12.5px; color:var(--faint); margin-left:auto;}
.wordcta p{font-size:16px; color:var(--muted); margin:6px 0 12px;}
.wordcta p b{color:var(--ink);}
.wordcta .btn{padding:12px 18px;}

.term{font-family:var(--display); text-transform:uppercase; font-weight:600; letter-spacing:.02em;
  font-size:27px; line-height:1.1; margin:12px 0 2px; color:var(--accent-ink);}
.opt.unsure{background:transparent; border-style:dashed; color:var(--muted);}
.opt.unsure .key{background:transparent; border:1px solid var(--edge); color:var(--faint);}
.opt.unsure.wrong{background:var(--warn-bg); border-color:var(--warn-line); border-style:solid; color:var(--ink);}
.opt.unsure.wrong .key{background:var(--warn); color:#06101e; border:0;}
.opt.unsure.wrong .mk{color:var(--warn);}

.why .trap{margin-top:10px; padding-top:9px; border-top:1px solid var(--edge2);}
.why .trap span{display:block; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bad); margin-bottom:3px;}
.why .topic+.topic{margin-left:5px;}
.chip.word{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn);}

/* ---------- word usage: tap a topic to see the word in the wild ---------- */
.usewhere{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin:12px 0 7px;}
.tags{display:flex; flex-wrap:wrap; gap:6px;}
.topic.tap{cursor:pointer; border:1px solid var(--accent-soft); background:var(--card2); color:var(--ink);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:5px; display:inline-flex; align-items:center; gap:5px; transition:background .15s;}
.topic.tap::after{content:"+"; font-weight:600; color:var(--accent-ink); opacity:.9;}
.topic.tap:hover{background:var(--accent-soft);}
.topic.tap:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.topic.tap.open{background:var(--accent); color:#fff; border-color:var(--accent);}
.topic.tap.open::after{content:"–";}
.usage{display:none;}
.usage.show{display:block; margin-top:10px; animation:fade .2s ease;}
.unote{margin:0 0 9px; font-size:16px;}
.unote.soft{color:var(--muted); font-size:15px;}
.uex{background:var(--card); border:1px solid var(--edge); border-radius:9px; padding:11px 12px;}
.ulab{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px;}
.ustem{font-size:16.5px; font-weight:500; line-height:1.4;}
.ustem mark{background-color:transparent; background-image:linear-gradient(var(--accent-soft),var(--accent-soft));
  background-repeat:no-repeat; background-size:100% 44%; background-position:0 86%; padding:0 2px; animation:none;}
.umove{margin-top:9px; padding-top:8px; border-top:1px solid var(--edge2); font-size:15.5px; color:var(--muted);}
.umove span{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--good); margin-bottom:2px;}

/* ---------- word check v2: definition reveal ---------- */
.mixup{background:var(--bad-bg); border:1px solid var(--bad-line); border-radius:8px; padding:9px 11px;
  font-size:16px; margin-bottom:10px;}
.mean{font-size:17px; margin-bottom:11px;}
.illus{background:var(--card); border:1px solid var(--edge); border-radius:9px; padding:11px 12px;}
.ilab{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px;}
.ishow{font-family:var(--mono); font-size:16px; background:var(--paper2); border-radius:6px; padding:8px 10px; margin-bottom:8px;}
.isays{font-size:16px; color:var(--muted); line-height:1.45;}
.why .trap{margin-top:11px;}
.mixrow{background:var(--bad-bg) !important; border-color:var(--bad-line) !important;}
.topic.flat{border:1px solid var(--edge); background:transparent; color:var(--muted);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:5px; display:inline-block;}

/* ---------- the review gate ---------- */
.review{margin-top:20px; border-top:1px solid var(--edge2); padding-top:16px;}
.review h3{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:19px; margin:0 0 2px;}
.rsub{font-size:15.5px; color:var(--muted); margin:0 0 12px;}

.ritem{border:1px solid var(--edge); border-radius:10px; margin-bottom:8px; background:var(--card); overflow:hidden;}
.ritem.done{border-color:var(--good-line); background:var(--good-bg);}
.rhead{display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; background:none; border:0;
  padding:12px 13px; cursor:pointer; color:var(--ink); font:inherit;}
.rhead:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.rtick{flex:0 0 auto; width:19px; height:19px; border-radius:5px; border:1.5px solid var(--faint); margin-top:2px;}
.ritem.done .rtick{background:var(--good); border-color:var(--good); position:relative;}
.ritem.done .rtick::after{content:"✓"; color:#fff; font-size:13.5px; position:absolute; inset:0;
  display:grid; place-items:center; line-height:1;}
.rtext{flex:1; font-size:16.5px; line-height:1.4;}
.rkind{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:3px;}
.rchev{flex:0 0 auto; color:var(--faint); transition:transform .2s; font-size:18px; margin-top:1px;}
.ritem.open .rchev{transform:rotate(90deg);}

.rbody{display:none; padding:0 13px 13px 42px;}
.ritem.open .rbody{display:block;}
.rbody p{margin:0 0 11px; font-size:16px; line-height:1.5;}
.rwrong,.rright{font-size:16px; border-radius:8px; padding:9px 11px; margin-bottom:7px;}
.rwrong{background:var(--bad-bg); border:1px solid var(--bad-line);}
.rright{background:var(--good-bg); border:1px solid var(--good-line);}
.rwrong span,.rright span{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:3px;}
.rwrong span{color:var(--bad);} .rright span{color:var(--good);}
.rack{margin-top:6px; font-family:var(--mono); font-size:13.5px; letter-spacing:.04em; text-transform:uppercase;
  background:var(--accent); color:#fff; border:0; border-radius:8px; padding:9px 16px; cursor:pointer;}
.rack:disabled{background:var(--good); cursor:default;}

.rprog{font-family:var(--mono); font-size:13.5px; color:var(--muted); text-align:center; margin:0 0 10px;}

/* ---------- add-to-home-screen bar ---------- */
.installbar{position:fixed; left:12px; right:12px; bottom:12px; z-index:50;
  display:flex; align-items:center; gap:10px; background:var(--card2); border:1px solid var(--edge2); color:#fff;
  border-radius:12px; padding:10px 12px; box-shadow:0 6px 24px rgba(0,0,0,.45);
  max-width:616px; margin:0 auto;}
.installbar .btn{flex:1; width:auto; margin:0; background:var(--accent); border-color:var(--accent);}
.installbar.ios{font-size:15.5px; line-height:1.45; padding:12px 14px;}
.installbar.ios b{color:#fff;}
.installx{flex:0 0 auto; background:transparent; border:0; color:#fff; opacity:.6;
  font-size:17px; cursor:pointer; padding:6px 8px; line-height:1;}
.installx:hover{opacity:1;}
@supports (padding: max(0px)){ .installbar{bottom:max(12px, env(safe-area-inset-bottom));} }

/* ---------- intake ---------- */
.ihead{margin-bottom:14px;}
.ibar{height:4px; background:var(--edge); border-radius:99px; overflow:hidden; margin-top:8px;}
.ibar>i{display:block; height:100%; background:var(--accent); transition:width .3s;}
.iq{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:23.5px; line-height:1.15; margin:0 0 6px;}
.isub{color:var(--muted); font-size:16px; margin:0 0 14px;}
.itest{font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:6px; padding:7px 9px; margin-bottom:14px;}
.iopt{display:block;}
.inote{display:block; font-size:14.5px; color:var(--muted); margin-top:2px;}
.opt.on{background:var(--accent-soft); border-color:var(--accent);}

/* ---------- worked example (experiment arm) ---------- */
.worked{margin-top:12px; padding-top:11px; border-top:1px dashed var(--edge);}
.wlab{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:7px;}
.wstem{font-size:16px; font-weight:500; line-height:1.4; margin-bottom:8px;}
.wstem mark{background-image:linear-gradient(var(--accent-soft),var(--accent-soft)); background-repeat:no-repeat;
  background-size:100% 44%; background-position:0 86%; padding:0 2px; animation:none;}
.wmove{font-size:15.5px; color:var(--ink);}
.wmove span{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--good); margin-bottom:2px;}
.wwhy{font-size:15px; color:var(--muted); margin-top:6px;}

/* ---------- findings ---------- */
.finding{margin-bottom:12px;}
.fhead{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px;}
.flab{font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:18px;}
.fpill{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; flex:0 0 auto;}
.fpill.wait{background:var(--edge2); color:var(--muted);}
.fpill.null{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line);}
.fpill.win{background:var(--good-bg); color:var(--good); border:1px solid var(--good-line);}
.fclaim{font-size:16px; color:var(--muted); margin:0 0 10px;}
.fbar{height:5px; background:var(--edge); border-radius:99px; overflow:hidden; margin-bottom:9px;}
.fbar>i{display:block; height:100%; background:var(--accent);}
.frow{display:flex; align-items:center; gap:10px; font-size:16.5px; padding:8px 0; border-bottom:1px solid var(--edge2);}
.frow span:first-child{flex:1;}
.fnum{font-family:var(--mono); font-weight:600; font-size:17px;}
.fnum.over{color:var(--bad);} .fnum.under{color:var(--accent);}
.fn{font-family:var(--mono); font-size:12.5px; color:var(--faint);}
.fmsg{font-size:16px; margin:10px 0 0; line-height:1.5;}
.fverdict{margin-top:11px; padding:10px 12px; border-radius:9px; font-size:16px;}
.fverdict.right{background:var(--good-bg); border:1px solid var(--good-line);}
.fverdict.wrong{background:var(--bad-bg); border:1px solid var(--bad-line);}
.fverdict.flat{background:var(--warn-bg); border:1px solid var(--warn-line);}
.findlink{display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:14px;
  background:var(--card); border:1px solid var(--accent-soft); border-radius:12px; padding:15px 16px;
  font-family:var(--mono); font-size:14.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent-ink); cursor:pointer;}
.findlink:hover{background:var(--accent-soft);}
.findlink .chev{font-size:19px; opacity:.6;}
.fpill.lean{background:var(--accent-soft); color:var(--accent-ink);}
.frange{font-family:var(--mono); font-size:13.5px; color:var(--muted); margin:8px 0 0; line-height:1.5;}
.challenge{border-left:3px solid var(--accent); padding-left:14px;}
.clab{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px;}
.cask{font-size:17.5px; margin:8px 0 0; line-height:1.5;}
.cwhy{font-size:15.5px; color:var(--muted); margin:10px 0 0; line-height:1.5;}

/* ---------- essay workbench ---------- */
.essaylink{border-color:var(--edge); color:var(--ink);}
.elab{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin:14px 0 5px;}
.elab.hot{color:var(--accent); font-weight:600;}
.etext{width:100%; border:1px solid var(--edge); border-radius:9px; padding:10px 11px; font:inherit;
  font-size:17px; line-height:1.5; background:var(--card); resize:vertical; margin-bottom:16px; color:var(--ink);}
.etext:focus{outline:none; border-color:var(--accent);}
/* input[type=file]'s "Choose File" button is a distinct sub-element
   browsers render natively — setting background/color on .etext itself
   only ever reaches the "No file chosen" text next to it, never the
   button, which is why this kept rendering as a plain white/gray default
   button regardless of .etext being applied. Both selectors needed for
   cross-browser coverage: ::file-selector-button is the modern standard,
   ::-webkit-file-upload-button is the older Safari/Chrome equivalent. */
.etext::file-selector-button, .etext::-webkit-file-upload-button{
  background:var(--card2); color:var(--ink); border:1px solid var(--edge); border-radius:6px;
  padding:6px 12px; font:inherit; font-size:15px; cursor:pointer; margin-right:10px;}
.etext::file-selector-button:hover, .etext::-webkit-file-upload-button:hover{border-color:var(--accent-soft);}

/* Click-to-open calendar — replaces a plain <input type=date>, which on
   some browser/OS combinations rendered as unstyled "yyyy-mm-dd" text
   rather than anything resembling a calendar. */
.dp-wrap{position:relative; margin-bottom:16px;}
.dp-trigger{text-align:left; cursor:pointer; margin-bottom:0;}
.dp-trigger.dp-placeholder{color:var(--faint);}
.dp-popup{position:absolute; top:calc(100% + 6px); left:0; z-index:40; background:var(--card2);
  border:1px solid var(--edge); border-radius:10px; padding:12px; width:280px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);}
.dp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.dp-label{font-family:var(--mono); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.dp-nav{background:none; border:1px solid var(--edge); border-radius:6px; width:28px; height:28px;
  font-size:16px; color:var(--ink); cursor:pointer; line-height:1;}
.dp-nav:hover{border-color:var(--accent-soft); color:var(--accent-ink);}
.dp-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:3px;}
.dp-dow{font-family:var(--mono); font-size:10.5px; color:var(--faint); text-align:center; padding:4px 0;}
.dp-day{background:none; border:1px solid transparent; border-radius:6px; padding:7px 0; font-size:14px;
  color:var(--ink); cursor:pointer;}
.dp-day:hover:not(.dp-disabled){border-color:var(--accent-soft);}
.dp-day.on{background:var(--accent); color:#fff;}
.dp-day.dp-disabled{color:var(--faint); cursor:default; opacity:.35;}
.dp-empty{visibility:hidden;}

.gradepick{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.gradebtn{font-family:var(--mono); font-size:15px; padding:9px 15px; border-radius:8px; border:1px solid var(--edge);
  background:var(--card2); color:var(--muted); cursor:pointer;}
.gradebtn.on{background:var(--accent); color:#fff; border-color:var(--accent);}

.accordion{margin-top:6px;}
.grade-sec{border:1px solid var(--edge); border-radius:10px; margin-bottom:9px; overflow:hidden;}
.grade-head{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:16.5px; background:var(--card2);}
.grade-head .cnt{font-family:var(--mono); font-size:12.5px; color:var(--faint); font-weight:400;}
.grade-body{display:none; padding:4px 16px 12px;}
.grade-sec.open .grade-body{display:block;}
.course-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--edge2);}
.course-row:first-child{border-top:0;}
.course-row input[type=checkbox]{width:17px; height:17px; flex:0 0 auto;}
.course-row label{margin:0; font-weight:500; font-size:16px; cursor:pointer;}
.cnt-inline{font-family:var(--mono); font-size:12.5px; color:var(--muted); font-weight:400;}
.eprompt{background:var(--paper2); border-left:3px solid var(--edge); padding:11px 13px; border-radius:0 8px 8px 0;
  font-size:16.5px; line-height:1.55; margin-bottom:4px;}
.ecalm{background:var(--accent-soft); border-radius:10px; padding:16px; font-size:17px; line-height:1.6;}
.eblock{flex:1; font-size:15px; color:var(--bad); margin:0; line-height:1.45;}
.rubric-analysis{background:var(--paper2); border-left:3px solid var(--edge); padding:16px 18px;
  border-radius:0 8px 8px 0; font-size:16.5px; line-height:1.65; margin-top:8px;}
.ehint{font-size:15px; color:var(--muted); line-height:1.5; margin:8px 0 0;}
.ewarn{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:9px; padding:12px;
  font-size:16px; line-height:1.55; margin-bottom:10px;}
.edraft{background:var(--paper2); border-radius:8px; padding:10px 12px; font-size:16px; margin:12px 0;}
.edraft span{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin-bottom:3px;}

.cap{border:1px solid var(--edge); border-left:3px solid var(--edge); border-radius:9px; padding:12px; margin-bottom:10px;}
.cap.ok{border-left-color:var(--good);}
.capcol{display:block; margin-bottom:10px;}
.capcol:last-child{margin-bottom:0;}
.capcol label{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint); margin:8px 0 3px;}
.capcol textarea{width:100%; border:1px solid var(--edge); border-radius:7px; padding:8px 9px;
  font:inherit; font-size:16px; line-height:1.45; resize:vertical;}
.capdel{background:none; border:0; color:var(--faint); font-size:13.5px; cursor:pointer; margin-top:8px; padding:4px 0;}
.capdel:hover{color:var(--bad);}
.ediscard{font-size:15px; color:var(--good); margin-top:8px;}
.btn.ghost{background:var(--card); color:var(--ink); border:1px dashed var(--edge);}

.pile{border:1px solid var(--edge); border-radius:9px; padding:11px; margin-bottom:9px;}
.pname{width:100%; border:0; border-bottom:1px solid var(--edge); padding:4px 0 6px; font:inherit;
  font-weight:600; font-size:17px; margin-bottom:8px;}
.pname:focus{outline:none; border-color:var(--accent);}
.chip{display:inline-block; background:var(--accent-soft); color:var(--accent-ink); border-radius:6px;
  padding:5px 9px; font-size:15px; margin:0 5px 5px 0; cursor:pointer; line-height:1.35; border:1px solid transparent;}
.chip:hover{border-color:var(--accent-soft);}
/* Missing entirely before this fix — the exam-scheduling day picker's JS
   was correctly toggling this exact class on click (selectedDays tracked
   the state fine), but with no .chip.on rule anywhere, nothing ever looked
   different, so it read as completely broken even though it wasn't. */
.chip.on{background:var(--accent); color:#fff; border-color:var(--accent);}
.loose{margin-top:12px; padding-top:11px; border-top:1px dashed var(--edge);}
.loose h4{font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); margin:0 0 7px; font-weight:400;}
.loosechip{background:var(--warn-bg); color:var(--warn);}

/* These five had no styling at all — the essay workbench (capture, cluster,
   choose, thesis, order steps) was rendering with zero custom layout. */
.captures{display:flex; flex-direction:column; gap:14px; margin:14px 0;}
.cluster{display:flex; flex-wrap:wrap; gap:12px; margin:14px 0;}
.cluster .pile{flex:1 1 240px;}
.choose{display:grid; gap:9px; margin:14px 0;}
.ethree{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.orderlist{display:grid; gap:9px; margin:14px 0;}

.skel{border:1px solid var(--edge); border-radius:10px; padding:13px; margin-bottom:12px;}
.skel h4{font-family:var(--display); text-transform:uppercase; font-size:16px; margin:0 0 8px;}
.skelev{margin-bottom:4px;}
.skelplan{background:var(--paper2); border-radius:8px; padding:10px; margin-bottom:10px;}
.skelplan div{font-size:15.5px; line-height:1.45; margin-bottom:6px;}
.skelplan span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint);}

.ratio{margin:14px 0;}
.rbar{height:12px; background:var(--bad-bg); border-radius:99px; overflow:hidden;}
.rbar>i{display:block; height:100%; background:var(--good);}
.rlab{display:flex; justify-content:space-between; font-family:var(--mono); font-size:13px;
  color:var(--muted); margin-top:6px;}
.audit{display:flex; gap:9px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--edge2);
  font-size:16px; line-height:1.5;}
.amark{flex:0 0 auto; font-weight:700;}
.audit.pass .amark{color:var(--good);}
.audit.fail .amark{color:var(--bad);}

/* ---------- diagnostic: exam paper, not an app ---------- */
.diaglink{border-color:var(--bad-line); color:var(--bad);}
.dmast{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-bottom:2px solid var(--ink); padding-bottom:9px; margin-bottom:10px;}
.dcourse{font-family:var(--mono); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:12.5px; color:var(--ink);}
.dno{font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.05em;}
.dtitle{font-family:var(--display); text-transform:uppercase; font-size:23.5px; line-height:1.15;
  margin:0 0 4px; font-weight:600;}
.dcond{border:1px solid var(--edge); border-left:3px solid var(--bad); padding:13px 15px; margin-top:16px;}
.dcond h3{font-family:var(--mono); text-transform:uppercase; letter-spacing:.09em; font-size:12px;
  color:var(--bad); margin:0 0 8px; font-weight:600;}
.dcond ul{margin:0; padding-left:17px; font-size:16.5px; line-height:1.6;}
.dcond li{margin-bottom:4px;}

.dpaper{background:#fffefb; --ink:#161c22; --muted:#69737c; --faint:#98a1a9; --edge:#e3e7e3; --edge2:#eef1ee; --card2:#161c22; color:var(--ink);}
.dstory{margin-top:14px;}
.dline{display:grid; grid-template-columns:26px 1fr; column-gap:11px; align-items:baseline; margin-bottom:.95em;}
.dline .dn{font-family:var(--mono); font-size:11.5px; color:#b9b4ab; text-align:right; padding-top:.5em;}
.dline p{margin:0; font-size:18.5px; line-height:1.62;}
.dline em{font-style:italic;}
.dsect{font-family:var(--mono); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-size:12px; color:var(--accent); margin:22px 0 11px; padding-left:37px;}

.dprompt{border:1px solid var(--accent); padding:15px 16px; background:var(--accent-soft);}
.dlead{margin:0 0 10px; font-size:17px; line-height:1.55;}
.dtask{margin:0 0 10px; font-size:18px; line-height:1.5;}
.dnote{margin:0; font-size:15.5px; font-style:italic; color:var(--muted);}
.dpromptmini{font-size:16.5px; line-height:1.5; padding:11px 13px; background:var(--paper2);
  border-radius:8px; margin:0 0 14px;}

.dclock{position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  background:var(--card2); border:1px solid var(--edge2); color:#fff; border-radius:10px; padding:9px 13px; margin-bottom:12px;}
.dtime{font-family:var(--mono); font-size:20.5px; font-weight:600; letter-spacing:.04em;}
.dtime.low{color:#ffb4a2;}
.dtime.over{color:#E2685A;}
.dref{background:rgba(255,255,255,.14); border:0; color:#fff; border-radius:7px; padding:6px 12px;
  font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; cursor:pointer;}
.dscratch{margin-bottom:12px;}
.dscratch summary{font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); cursor:pointer; padding:6px 0;}
.dessay{min-height:340px; font-size:18px; line-height:1.7;}
.dcount{font-family:var(--mono); font-size:12.5px; color:var(--faint); text-align:right; margin-top:6px;}

.dmodal{position:fixed; inset:0; background:rgba(20,23,26,.55); z-index:60; overflow-y:auto; padding:16px;}
.dmodalin{max-width:640px; margin:0 auto; background:#fffefb; border-radius:12px; padding:18px;
  --ink:#161c22; --muted:#69737c; --faint:#98a1a9; --edge:#e3e7e3; --edge2:#eef1ee; color:var(--ink);}
.dclose{background:var(--ink); color:#fff; border:0; border-radius:7px; padding:8px 14px;
  font-family:var(--mono); font-size:12.5px; text-transform:uppercase; cursor:pointer; margin-bottom:12px;}

/* ---------- accounts ---------- */
.joincode{font-family:var(--mono); font-size:38px; font-weight:600; letter-spacing:.14em;
  text-align:center; padding:20px; background:var(--accent-soft); color:var(--accent-ink);
  border-radius:12px; margin:14px 0;}
.joininput{font-family:var(--mono); font-size:29px; letter-spacing:.2em; text-align:center;
  text-transform:uppercase; padding:14px;}
.jc{font-family:var(--mono); letter-spacing:.08em;}
.claimnote{background:var(--good-bg); border:1px solid var(--good-line); border-radius:9px;
  padding:12px 14px; font-size:16px; color:var(--ink); text-align:left; margin-top:14px;}
.contract{text-align:left; margin-top:6px;}
.contract h3{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  margin:14px 0 7px; font-weight:600;}
.contract ul{margin:0; padding-left:18px; font-size:16.5px; line-height:1.6;}
.contract .see li{color:var(--ink);}
.contract .nosee li{color:var(--good);}
.cfoot{font-size:16px; line-height:1.55; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--edge2); color:var(--muted);}

/* ---------- watch how (video) ---------- */
.watchhowrow{margin-top:12px;}
.watchhow{font-family:var(--mono); font-size:13.5px; letter-spacing:.03em; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:99px; padding:7px 13px; display:inline-block; text-decoration:none;}
.watchhow:hover{filter:brightness(1.1);}

/* ---------- simplify terminology ---------- */
.simplifyrow{margin-top:12px;}
.simplifylink{font-family:var(--mono); font-size:13.5px; letter-spacing:.03em; color:var(--accent-ink);
  background:var(--accent-soft); border:0; border-radius:99px; padding:7px 13px; cursor:pointer;}
.simplifylink:hover{filter:brightness(1.1);}
.simplifylink:disabled{opacity:.6; cursor:default;}
.simplifyout{margin-top:10px; padding:14px 16px; border-radius:10px; background:var(--card2); border:1px solid var(--edge);}
.simplifyout .slab{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:6px;}
.simplifyout p{color:var(--ink); font-size:16px; line-height:1.55; margin:0;}
.simplifyerr{display:block; margin-top:6px; font-family:var(--mono); font-size:13px; color:var(--muted);}

/* ---------- flag a question ---------- */
.flagrow{margin-top:12px;}
.flaglink{background:none; border:0; font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  color:var(--faint); cursor:pointer; padding:4px 0; text-decoration:underline; text-underline-offset:2px;}
.flaglink:hover{color:var(--muted);}
.flagpicker{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px;}
.flagchip{font-family:var(--mono); font-size:13px; letter-spacing:.03em; color:var(--muted);
  background:var(--card2); border:1px solid var(--edge); border-radius:99px; padding:6px 12px; cursor:pointer;}
.flagchip:hover{border-color:var(--bad); color:var(--ink);}
.flagdone{font-family:var(--mono); font-size:13px; color:var(--good); margin-top:9px;}
.card.daily{border-left:3px solid var(--accent);}
.dailyhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.dailylab{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.dailyskip{background:none;border:0;font-family:var(--mono);font-size:12.5px;color:var(--faint);
  cursor:pointer;padding:4px 0;letter-spacing:.04em;}
.dailyskip:hover{color:var(--ink);}