/* IGOEE Prep — styles. Palette and type follow a clean "board prep" look: navy ink, a bright
   blue accent, pale blue panels, pill buttons; DM Sans for headings and Inter Tight for text. */

@font-face{ font-family:"DM Sans"; font-weight:400 700; font-style:normal; font-display:swap; src:url(../fonts/dm-sans-latin-var.woff2) format("woff2"); }
@font-face{ font-family:"Inter Tight"; font-weight:300 700; font-style:normal; font-display:swap; src:url(../fonts/inter-tight-latin-var.woff2) format("woff2"); }

:root{
  --bg:#f0f7ff; --surface:#ffffff; --surface-2:#f0f7ff; --surface-3:#dde9f8;
  --line:#e1e6ef; --line-strong:#c6d2e3;
  --ink:#00022b; --ink-soft:#525252; --ink-faint:#767676;
  --accent:#0064dc; --accent-strong:#00346b; --accent-soft:#e6f0fd; --accent-line:#99c1f1; --on-accent:#ffffff;
  --navy:#00022b; --deep:#00346b; --orange:#ff5003; --violet:#4242cf; --violet-soft:#e2e2ff;
  --success:#0e7a52; --success-soft:#e6f6ee; --success-line:#9fd8bd;
  --danger:#c73a12; --danger-soft:#fff0ea; --danger-line:#ffb79c;
  --warning:#995400; --warning-soft:#fff4e0; --warning-line:#f3c983;
  --backdrop:rgba(0,2,43,.5);
  --shadow-1:0 1px 2px rgba(0,2,43,.05), 0 1px 3px rgba(0,2,43,.06);
  --shadow-2:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --radius-s:4px; --radius-m:8px; --radius-l:8px; --radius-pill:9999px;
  --font-display:"DM Sans", "Inter Tight", -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Inter Tight", -apple-system, "Segoe UI", sans-serif; /* numbers use tabular figures */
  --z-nav:40; --z-overlay:90; --z-modal:100; --z-popover:2000; --z-toast:3000;
  --tap:44px; --side-w:256px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#00022b; --surface:#0a1240; --surface-2:#101a52; --surface-3:#1a2766;
    --line:#1f2b63; --line-strong:#2f3f82;
    --ink:#f0f7ff; --ink-soft:#b8c4dc; --ink-faint:#8b97b4;
    --accent:#4d9bff; --accent-strong:#9cc7ff; --accent-soft:#0d2a5c; --accent-line:#285aa3; --on-accent:#00022b;
    --violet:#a5a5ff; --violet-soft:#1e1f63;
    --success:#5fd3a0; --success-soft:#0b2e28; --success-line:#1d5a48;
    --danger:#ff8a66; --danger-soft:#3a1610; --danger-line:#7a2e1c;
    --warning:#ffc266; --warning-soft:#33240a; --warning-line:#6b4a14;
    --backdrop:rgba(0,0,0,.65);
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 30px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#00022b; --surface:#0a1240; --surface-2:#101a52; --surface-3:#1a2766;
  --line:#1f2b63; --line-strong:#2f3f82;
  --ink:#f0f7ff; --ink-soft:#b8c4dc; --ink-faint:#8b97b4;
  --accent:#4d9bff; --accent-strong:#9cc7ff; --accent-soft:#0d2a5c; --accent-line:#285aa3; --on-accent:#00022b;
  --violet:#a5a5ff; --violet-soft:#1e1f63;
  --success:#5fd3a0; --success-soft:#0b2e28; --success-line:#1d5a48;
  --danger:#ff8a66; --danger-soft:#3a1610; --danger-line:#7a2e1c;
  --warning:#ffc266; --warning-soft:#33240a; --warning-line:#6b4a14;
  --backdrop:rgba(0,0,0,.65);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--font-body); -webkit-font-smoothing:antialiased; }
button, input, select, textarea{ font:inherit; color:inherit; }
a{ color:var(--accent); text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.12; letter-spacing:-.02em; margin:0; color:var(--ink); }
h1{ font-size:clamp(1.9rem,3.8vw,2.6rem); }
h2{ font-size:1.4rem; }
h3{ font-size:1.08rem; }
p{ margin:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.ic{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- boot ---------- */
.boot{ min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:var(--ink-soft); }
.boot .logo{ width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--on-accent); font:700 28px var(--font-display); }

/* ---------- frame: sidebar ≥ 1080px, top bar + bottom tabs below ---------- */
#frame{ display:contents; } /* lets the sticky top bar stick to the page, not to its wrapper */
.side{ display:none; }
.top{ position:sticky; top:0; z-index:var(--z-nav); display:flex; align-items:center; gap:10px; padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px; background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .spacer{ flex:1; }
.brand{ display:flex; align-items:center; gap:10px; border:0; background:none; padding:4px; cursor:pointer; color:var(--ink); font:700 19px var(--font-display); white-space:nowrap; }
@media (max-width:380px){ .top .days{ display:none; } }
.logo-s{ width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:var(--on-accent); font:700 17px var(--font-display); }
.days{ font:700 12px var(--font-body); font-variant-numeric:tabular-nums; color:var(--accent-strong); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius-pill); padding:4px 9px; white-space:nowrap; }
.icbtn{ width:38px; height:38px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer; padding:0; }
.icbtn:hover{ color:var(--ink); background:var(--surface-2); }
.subnav{ display:flex; gap:6px; overflow-x:auto; padding:10px 16px 0; scrollbar-width:none; }
.subnav::-webkit-scrollbar{ display:none; }
.subnav button{ flex:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:var(--radius-pill); padding:6px 13px; font-size:14px; font-weight:500; cursor:pointer; }
.subnav button[aria-current="page"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.tabs{ position:fixed; z-index:var(--z-nav); left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(6,1fr); background:var(--surface); border-top:1px solid var(--line); padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px)); }
.tabs button{ display:flex; flex-direction:column; align-items:center; gap:2px; border:0; background:none; color:var(--ink-faint); font-size:11.5px; font-weight:600; padding:6px 2px; min-height:var(--tap); cursor:pointer; border-radius:10px; }
.tabs button[aria-current="page"]{ color:var(--accent); }
#view{ padding:18px 16px calc(96px + env(safe-area-inset-bottom,0px)); max-width:1040px; margin:0 auto; min-width:0; }

@media (min-width:1080px){
  .top, .subnav, .tabs{ display:none !important; }
  #app{ padding-left:var(--side-w); }
  #view{ padding:36px 44px 80px; }
  .side{ position:fixed; z-index:var(--z-nav); top:0; bottom:0; left:0; width:var(--side-w); display:flex; flex-direction:column; gap:3px; padding:18px 12px 12px; background:var(--surface); border-right:1px solid var(--line); overflow-y:auto; }
  .side .brand{ margin:0 0 4px 4px; }
  .side .tag{ margin:0 0 14px 8px; font-size:12.5px; color:var(--ink-faint); }
  .searchbtn{ display:flex; align-items:center; gap:9px; width:100%; margin-bottom:14px; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-faint); font-size:14px; cursor:pointer; text-align:left; }
  .searchbtn span{ flex:1; }
  .searchbtn kbd{ font:600 11px var(--font-mono); border:1px solid var(--line-strong); border-radius:5px; padding:1px 5px; background:var(--surface); }
  .grp{ display:flex; flex-direction:column; }
  .gbtn{ display:flex; align-items:center; gap:11px; width:100%; border:0; background:none; color:var(--ink-soft); padding:9px 10px; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; text-align:left; }
  .gbtn:hover{ background:var(--surface-2); color:var(--ink); }
  .grp.on .gbtn{ color:var(--ink); }
  .grp.on.single .gbtn{ background:var(--accent-soft); color:var(--accent-strong); }
  .items{ display:none; flex-direction:column; gap:1px; margin:2px 0 8px 31px; }
  .grp.on .items{ display:flex; }
  .item{ border:0; background:none; text-align:left; padding:6px 10px; border-radius:8px; color:var(--ink-soft); font-size:14px; cursor:pointer; }
  .item:hover{ background:var(--surface-2); color:var(--ink); }
  .item[aria-current="page"]{ background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }
  .side .foot{ margin-top:auto; display:flex; align-items:center; gap:8px; padding:10px 4px 0; border-top:1px solid var(--line); }
}

/* ---------- page furniture ---------- */
.page-h{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 20px; margin:0 0 20px; }
.page-h > div{ flex:1 1 320px; min-width:0; }
.page-h .lede{ margin-top:6px; color:var(--ink-soft); max-width:68ch; }
.eyebrow{ display:inline-block; font:700 12px/1.4 var(--font-body); letter-spacing:1px; text-transform:uppercase; color:var(--accent); background:var(--surface-2); border:1px solid var(--accent-line); border-radius:var(--radius-s); padding:3px 10px; margin-bottom:10px; }
.eyebrow a{ color:inherit; }
.section{ margin:28px 0 0; }
.section > h2{ margin-bottom:10px; }
.section > .lede{ color:var(--ink-soft); margin:-4px 0 14px; max-width:70ch; }
.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.grid.two{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:16px 18px; box-shadow:var(--shadow-1); min-width:0; }
.card h3{ margin-bottom:4px; }
.card .meta{ font-size:13px; color:var(--ink-faint); }
.card.link{ cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit; display:block; }
.card.link:hover{ border-color:var(--accent-line); }
.card.accent{ background:var(--accent); border-color:transparent; color:var(--on-accent); box-shadow:var(--shadow-2); }
.card.accent h3, .card.accent b{ color:inherit; }
.card.accent .muted, .card.accent .meta, .card.accent .faint{ color:color-mix(in srgb,var(--on-accent) 85%,transparent); }
.card.accent .btn{ background:transparent; color:inherit; border-color:currentColor; }
.stat b{ display:block; font:700 2rem/1 var(--font-display); letter-spacing:-.02em; color:var(--accent); font-variant-numeric:tabular-nums; }
.stat span{ font-size:13.5px; color:var(--ink-soft); }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.row.between{ justify-content:space-between; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.note{ border-left:4px solid var(--warning-line); background:var(--warning-soft); padding:10px 14px; border-radius:0 var(--radius-m) var(--radius-m) 0; font-size:14.5px; max-width:80ch; }
.note.info{ border-left-color:var(--accent-line); background:var(--accent-soft); }
.note.ok{ border-left-color:var(--success-line); background:var(--success-soft); }
.note.bad{ border-left-color:var(--danger-line); background:var(--danger-soft); }
.chip{ display:inline-flex; align-items:center; gap:5px; border-radius:var(--radius-s); padding:2px 9px; font-size:12.5px; font-weight:600; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); white-space:nowrap; }
.chip.acc{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-line); }
.chip.ok{ background:var(--success-soft); color:var(--success); border-color:var(--success-line); }
.chip.bad{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger-line); }
.chip.warn{ background:var(--warning-soft); color:var(--warning); border-color:var(--warning-line); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 20px; border-radius:var(--radius-pill); border:2px solid var(--line-strong); background:var(--surface); color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:15px; cursor:pointer; text-decoration:none; }
.btn:hover{ background:var(--surface-2); }
.btn.primary{ background:var(--accent); border-color:rgba(0,2,43,.1); color:var(--on-accent); }
.btn.primary:hover{ background:var(--accent-strong); }
.btn.ghost{ border-color:transparent; background:none; color:var(--ink-soft); }
.btn.danger{ color:var(--danger); border-color:var(--danger-line); }
.btn.sm{ min-height:32px; padding:4px 14px; font-size:13.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* filters / form */
.field{ display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
.field > span, .label{ font-size:13px; font-weight:600; color:var(--ink-soft); }
input[type=text], input[type=password], input[type=search], input[type=number], input[type=date], select, textarea{ width:100%; padding:9px 11px; border-radius:var(--radius-m); border:1px solid var(--line-strong); background:var(--surface); font-size:15px; }
textarea{ min-height:90px; resize:vertical; line-height:1.5; }
.toggles{ display:flex; flex-wrap:wrap; gap:6px; }
.toggles button{ border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:var(--radius-pill); padding:6px 12px; font-size:13.5px; font-weight:500; cursor:pointer; }
.toggles button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.check{ display:flex; gap:10px; align-items:flex-start; padding:5px 0; cursor:pointer; }
.check input{ margin-top:4px; width:17px; height:17px; accent-color:var(--accent); flex:none; }

/* bars */
.bar{ height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--accent); border-radius:99px; }
.bar.ok i{ background:var(--success); }
.bar.bad i{ background:var(--danger); }

/* tables */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-l); background:var(--surface); }
table{ border-collapse:collapse; width:100%; font-size:14.5px; }
th, td{ text-align:left; padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-weight:600; font-size:13px; color:var(--ink-soft); background:var(--surface-2); }
tr:last-child td{ border-bottom:0; }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- question runner (full-screen focus mode) ---------- */
.overlay{ position:fixed; inset:0; z-index:var(--z-overlay); background:var(--bg); display:flex; flex-direction:column; }
.run-h{ display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px; border-bottom:1px solid var(--line); background:var(--surface); }
.run-h .title{ flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clock{ font:700 15px var(--font-mono); padding:4px 12px; border-radius:var(--radius-pill); background:var(--surface-2); font-variant-numeric:tabular-nums; }
.clock.low{ background:var(--danger-soft); color:var(--danger); }
.run-b{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.run-in{ max-width:820px; margin:0 auto; padding:20px 16px 40px; }
.vignette{ background:var(--surface-2); border:1px solid var(--accent-line); border-radius:var(--radius-l); padding:14px 16px; margin:0 0 16px; font-size:15px; }
.vignette h3{ font-size:1rem; margin-bottom:6px; }
.vignette dl{ display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:8px 0 0; }
.vignette dt{ font-weight:600; color:var(--ink-soft); }
.vignette dd{ margin:0; }
.stem{ font-size:17px; line-height:1.55; margin:0 0 16px; }
.opts{ display:flex; flex-direction:column; gap:8px; }
.opt{ display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; padding:12px 14px; border-radius:var(--radius-l); border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-size:15.5px; line-height:1.45; }
.opt:hover:not(:disabled){ border-color:var(--accent-line); }
.opt .k{ flex:none; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:700 13px var(--font-body); background:var(--surface-2); color:var(--ink-soft); }
.opt[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); }
.opt[aria-pressed="true"] .k{ background:var(--accent); color:var(--on-accent); }
.opt.right{ border-color:var(--success); background:var(--success-soft); }
.opt.right .k{ background:var(--success); color:var(--on-accent); }
.opt.wrong{ border-color:var(--danger); background:var(--danger-soft); }
.opt.wrong .k{ background:var(--danger); color:var(--on-accent); }
.opt:disabled{ cursor:default; }
.opt .why{ display:block; margin-top:6px; font-size:14px; color:var(--ink-soft); }
.conf{ margin:18px 0 0; }
.conf p{ font-size:13px; color:var(--ink-soft); margin-bottom:8px; }
.conf .row .btn{ flex:1 1 120px; }
.expl{ margin:18px 0 0; padding:14px 16px; border-radius:var(--radius-l); background:var(--surface); border:1px solid var(--line); }
.expl.ok{ border-color:var(--success-line); }
.expl.bad{ border-color:var(--danger-line); }
.expl h3{ margin-bottom:6px; }
.expl .ref{ margin-top:10px; font-size:13px; color:var(--ink-faint); }
.run-f{ display:flex; align-items:center; gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); background:var(--surface); }
.run-f .spacer{ flex:1; }
.navgrid{ display:flex; flex-wrap:wrap; gap:5px; }
.navgrid button{ width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--surface); font:700 12.5px var(--font-mono); font-variant-numeric:tabular-nums; cursor:pointer; position:relative; color:var(--ink-soft); }
.navgrid button.ans{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-strong); }
.navgrid button.cur{ outline:2px solid var(--ink); outline-offset:1px; }
.navgrid button.flag::after{ content:""; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--warning); }
.navgrid button.r{ background:var(--success-soft); border-color:var(--success-line); color:var(--success); }
.navgrid button.w{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger); }

/* ---------- flashcards ---------- */
.fc{ max-width:720px; margin:0 auto; }
.fc-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:26px 26px 22px; min-height:280px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.fc-card .q{ font:700 clamp(1.2rem,2.6vw,1.5rem)/1.3 var(--font-display); margin:18px 0; }
.fc-card .a{ border-top:1px dashed var(--line-strong); padding-top:16px; font-size:15.5px; }
.fc-card .a ul{ margin:6px 0 0; padding-left:1.15em; }
.grades{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.grades button{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:var(--radius-l); border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-weight:600; }
.grades button small{ font:500 12px var(--font-mono); color:var(--ink-faint); }
.grades .again{ color:var(--danger); border-color:var(--danger-line); }
.grades .hard{ color:var(--warning); border-color:var(--warning-line); }
.grades .good{ color:var(--success); border-color:var(--success-line); }
.grades .easy{ color:var(--accent); border-color:var(--accent-line); }

/* ---------- OSCE ---------- */
.osce{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .osce{ grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); align-items:start; } .osce aside{ position:sticky; top:20px; } }
/* Phones: the clock sits above the conversation, compact, and stays in view. */
@media (max-width:899px){
  .osce aside{ order:-1; position:sticky; top:calc(57px + env(safe-area-inset-top,0px)); z-index:5; }
  .osce aside .bigclock{ padding:10px 14px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; text-align:left; }
  .osce aside .bigclock .t{ font-size:1.9rem; margin:0; grid-row:1 / span 2; grid-column:2; }
  .osce aside .bigclock .phasebar{ grid-column:1 / -1; margin:6px 0 0; }
  .osce aside .bigclock .row{ grid-column:1 / -1; justify-content:flex-start !important; margin-top:8px !important; }
  .osce aside .phases{ display:none; }
}
.door{ background:var(--surface-2); border:1px solid var(--accent-line); border-radius:var(--radius-l); padding:14px 16px; font-size:15px; }
.door h3{ margin-bottom:6px; }
.chat{ display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:14px; min-height:260px; max-height:56vh; overflow-y:auto; }
.msg{ max-width:85%; padding:9px 13px; border-radius:14px; font-size:15px; line-height:1.45; white-space:pre-wrap; }
.msg.me{ align-self:flex-end; background:var(--accent); color:var(--on-accent); border-bottom-right-radius:4px; }
.msg.them{ align-self:flex-start; background:var(--surface-2); border-bottom-left-radius:4px; }
.msg.sys{ align-self:center; background:none; color:var(--ink-faint); font-size:13px; text-align:center; }
.composer{ display:flex; gap:8px; margin-top:10px; }
.composer input{ flex:1; }
.phasebar{ display:flex; height:10px; border-radius:99px; overflow:hidden; background:var(--surface-3); margin:8px 0 4px; }
.phasebar i{ display:block; height:100%; border-right:2px solid var(--surface); }
.phases{ list-style:none; padding:0; margin:0; }
.phases li{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.phases li.on{ font-weight:700; color:var(--accent-strong); }
.bigclock{ background:var(--deep); color:#fff; border-radius:var(--radius-l); padding:18px; text-align:center; box-shadow:var(--shadow-2); }
.bigclock .btn{ background:transparent; color:#fff; border-color:#fff; }
.bigclock .btn.primary{ background:#0064dc; border-color:rgba(255,255,255,.2); }
.bigclock .t{ font:700 clamp(2.6rem,7vw,3.6rem)/1 var(--font-mono); margin:6px 0 12px; font-variant-numeric:tabular-nums; }
.bigclock .t.low{ color:#ff9a66; }
.bigclock .ph{ opacity:.85; min-height:1.5em; }
.rubric fieldset{ border:1px solid var(--line); border-radius:var(--radius-l); padding:10px 14px 6px; margin:0 0 12px; background:var(--surface); }
.rubric legend{ font-weight:700; padding:0 6px; }

/* ---------- selection popup, modal, toast ---------- */
.modal-bg{ position:fixed; inset:0; z-index:var(--z-modal); background:var(--backdrop); display:flex; align-items:flex-start; justify-content:center; padding:10vh 16px 16px; }
.modal{ width:100%; max-width:620px; max-height:78vh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow-2); padding:18px; }
.modal input[type=search]{ font-size:17px; padding:12px 14px; }
.results{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.results button{ width:100%; text-align:left; border:0; background:none; padding:9px 10px; border-radius:9px; cursor:pointer; }
.results button:hover, .results button:focus-visible{ background:var(--surface-2); }
.results small{ display:block; color:var(--ink-faint); font-size:12.5px; }
.toast{ position:fixed; z-index:var(--z-toast); left:50%; bottom:calc(88px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--navy); color:#fff; padding:10px 16px; border-radius:12px; font-size:14.5px; box-shadow:var(--shadow-2); max-width:calc(100vw - 32px); }
@media (min-width:1080px){ .toast{ bottom:28px; } }

.prose{ max-width:72ch; }
.prose p + p, .prose p + ul, .prose ul + p{ margin-top:10px; }
.prose ul{ padding-left:1.2em; margin:8px 0; }
.prose li{ margin:4px 0; }
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li{ counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.steps li::before{ content:counter(s); font:700 1.5rem/1.2 var(--font-display); color:var(--accent); }
.steps li.you{ background:linear-gradient(90deg,var(--accent-soft),transparent); border-radius:8px; }
.steps p{ color:var(--ink-soft); font-size:15px; margin-top:2px; }
.foot-note{ margin:40px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-faint); max-width:80ch; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- exam-day simulator (mirrors the virtual IGOEE platform layout) ---------- */
.mx{ position:fixed; inset:0; z-index:calc(var(--z-overlay) + 10); background:#f4f6f9; color:#1b1f2a; display:flex; flex-direction:column; font-family:var(--font-body); }
:root[data-theme="dark"] .mx{ background:#0d1226; color:#e8ecf6; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mx{ background:#0d1226; color:#e8ecf6; } }
.mx-h{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 14px; background:var(--navy); color:#fff; }
.mx-title{ font:700 15px var(--font-display); margin-right:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mx-tools{ display:flex; gap:4px; flex-wrap:wrap; }
.mx-tools button{ border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; padding:6px 11px; border-radius:6px; font:600 13px var(--font-body); cursor:pointer; }
.mx-tools button[aria-pressed="true"]{ background:#fff; color:var(--navy); }
.mx-badge{ display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--orange); color:#fff; font-size:11px; }
.mx-timer{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.mx-timer span{ font-size:11px; opacity:.75; }
.mx-timer b{ font:700 18px var(--font-body); font-variant-numeric:tabular-nums; }
.mx-timer.low b{ color:#ff9a66; }
.mx-end{ border:0; background:var(--orange); color:#fff; padding:8px 14px; border-radius:6px; font:700 13.5px var(--font-display); cursor:pointer; }
.mx-body{ flex:1; display:flex; min-height:0; position:relative; }
.mx-list{ width:230px; flex:none; overflow-y:auto; background:#fff; border-right:1px solid #dde2ea; padding:10px 8px; }
:root[data-theme="dark"] .mx-list{ background:#111833; border-color:#232c4f; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mx-list{ background:#111833; border-color:#232c4f; } }
.mx-prog{ font-size:12.5px; color:var(--ink-faint); padding:2px 8px 8px; }
.mx-grp{ margin-bottom:6px; }
.mx-case{ display:block; width:100%; text-align:left; border:0; background:none; padding:6px 8px; font:700 13px var(--font-display); color:inherit; cursor:pointer; border-radius:6px; }
.mx-grp.on .mx-case{ background:var(--accent-soft); color:var(--accent); }
.mx-li{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:none; padding:5px 8px 5px 16px; font-size:13.5px; color:inherit; cursor:pointer; border-radius:6px; }
.mx-li:hover, .mx-case:hover{ background:rgba(0,100,220,.08); }
.mx-dot{ width:10px; height:10px; border-radius:50%; border:1.5px solid #9aa6bb; flex:none; }
.mx-li.done .mx-dot{ background:var(--accent); border-color:var(--accent); }
.mx-limk{ margin-left:auto; display:inline-flex; gap:2px; }
.mx-limk .mx-mk{ width:13px; height:13px; }
.mx-main{ flex:1; overflow-y:auto; min-width:0; }
.mx-in{ max-width:860px; margin:0 auto; padding:20px 22px 60px; }
.mx-cht{ font-size:1.25rem; margin-bottom:12px; }
.mx-case-t{ width:100%; border-collapse:collapse; background:#fff; border:1px solid #dde2ea; margin-bottom:18px; font-size:14.5px; }
.mx-case-t th{ width:30%; background:#eef2f8; color:#38425a; font-weight:600; font-size:13.5px; }
.mx-case-t th, .mx-case-t td{ border-bottom:1px solid #dde2ea; padding:8px 12px; }
:root[data-theme="dark"] .mx-case-t, :root[data-theme="dark"] .mx-q{ background:#111833; border-color:#232c4f; }
:root[data-theme="dark"] .mx-case-t th{ background:#18224a; color:#c9d3ea; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mx-case-t, :root:not([data-theme="light"]) .mx-q{ background:#111833; border-color:#232c4f; } :root:not([data-theme="light"]) .mx-case-t th{ background:#18224a; color:#c9d3ea; } }
.mx-q{ background:#fff; border:1px solid #dde2ea; border-radius:6px; padding:14px 16px; margin-bottom:14px; scroll-margin-top:12px; }
.mx-qh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mx-marks{ display:inline-flex; gap:2px; }
.mx-mkbtn{ border:0; background:none; padding:4px; cursor:pointer; color:#9aa6bb; border-radius:6px; }
.mx-mkbtn:hover{ background:rgba(0,100,220,.08); }
.mx-mk{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.mx-mk.on{ fill:var(--orange); stroke:var(--orange); }
.mx-stem{ font-size:16px; line-height:1.55; margin-bottom:10px; }
.mx-opts{ display:flex; flex-direction:column; gap:4px; }
.mx-opt{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:15px; line-height:1.45; }
.mx-opt:hover{ background:rgba(0,100,220,.06); }
.mx-opt.on{ background:rgba(0,100,220,.1); }
.mx-opt input{ margin-top:4px; accent-color:var(--accent); width:16px; height:16px; flex:none; }
.mx-l{ font-weight:700; min-width:18px; }
.mx-clear{ border:0; background:none; color:var(--accent); font-size:13px; cursor:pointer; padding:6px 0 0; text-decoration:underline; }
.mx-nav{ display:flex; gap:8px; margin-top:8px; }
.mx-main.hl-on{ cursor:text; }
.mx-main.hl-on .mx-stem, .mx-main.hl-on .mx-case-t, .mx-main.hl-on .mx-opt span{ cursor:text; }
mark.mx-hl{ background:#ffe766; color:inherit; padding:0 1px; border-radius:2px; }
.mx-panel{ position:absolute; right:16px; top:12px; width:300px; max-height:calc(100% - 24px); overflow:auto; background:#fff; color:#1b1f2a; border:1px solid #cdd5e1; border-radius:8px; box-shadow:var(--shadow-2); padding:12px; z-index:2; }
.mx-ph{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.mx-ph button{ border:0; background:none; font-size:20px; line-height:1; cursor:pointer; color:#59627a; }
.mx-disp{ background:#0b1430; color:#fff; font:600 24px var(--font-body); font-variant-numeric:tabular-nums; text-align:right; padding:10px 12px; border-radius:6px; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; }
.mx-keys{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.mx-keys button{ padding:10px 0; border:1px solid #cdd5e1; background:#f4f6f9; border-radius:6px; font:600 15px var(--font-body); cursor:pointer; color:#1b1f2a; }
.mx-keys button:hover{ background:#e6ecf5; }
.mx-acr{ font-size:13.5px; display:flex; flex-direction:column; gap:4px; max-height:50vh; overflow:auto; }
.mx-chatlog{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto; }
.mx-msg{ padding:7px 10px; border-radius:8px; font-size:14px; background:#eef2f8; color:#1b1f2a; }
.mx-msg.me{ background:var(--accent); color:#fff; align-self:flex-end; }
.mx-msg b{ display:block; font-size:11.5px; opacity:.75; }
.mx-banner{ position:absolute; left:50%; top:64px; transform:translateX(-50%); background:var(--orange); color:#fff; padding:8px 16px; border-radius:8px; font-weight:700; box-shadow:var(--shadow-2); z-index:3; }
.mx-pre{ flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px 40px; }
.mx-card{ width:100%; max-width:680px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-2); padding:24px 26px; }
.mx-card h1{ font-size:1.6rem; }
@media (max-width:899px){
  .mx-list{ display:none; }
  .mx-h{ gap:8px; }
  .mx-tools button{ padding:5px 8px; font-size:12px; }
  .mx-panel{ left:8px; right:8px; width:auto; }
}

/* Today header band */
.hero{ background:var(--deep); color:#fff; border-radius:var(--radius-l); padding:30px 30px 24px; box-shadow:var(--shadow-2); }
.hero h1{ color:#fff; font-size:clamp(2rem,4.6vw,3rem); }
.hero .lede{ color:rgba(255,255,255,.86); margin-top:12px; max-width:62ch; }
.hero .eyebrow{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.3); }
.hero .btn.primary{ background:#0064dc; color:#fff; }
.btn.outline{ background:transparent; color:inherit; border-color:currentColor; }
.hero-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:24px; }
.hero-stats .stat{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-l); padding:14px 16px; }
.hero-stats .stat b{ color:#fff; }
.hero-stats .stat span{ color:rgba(255,255,255,.82); }
@media (max-width:600px){ .hero{ padding:22px 18px 18px; } }
.btn.outline:hover{ background:color-mix(in srgb,currentColor 12%,transparent); }
.hero .btn.primary:hover{ background:#0057c2; }

/* ---------- accounts and membership ---------- */
.auth{ max-width:440px; margin:6vh auto 0; padding:26px 26px 22px; }
.auth h1{ font-size:1.7rem; margin-bottom:12px; }
.auth input[type=email]{ width:100%; padding:9px 11px; border-radius:var(--radius-m); border:1px solid var(--line-strong); background:var(--surface); font-size:15px; }
.auth-alt{ margin-top:14px; font-size:14px; }
.form-err{ color:var(--danger); font-size:14px; min-height:1.4em; margin:4px 0 8px; }
.btn.wide{ width:100%; }
.grid.plans{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.plan{ display:flex; flex-direction:column; }
.plan .price{ font:700 2rem/1.1 var(--font-display); color:var(--ink); margin:6px 0 8px; letter-spacing:-.02em; }
.plan .price span{ font:500 14px var(--font-body); color:var(--ink-faint); letter-spacing:0; }
.plan > .btn, .plan > a.btn{ margin-top:auto; align-self:flex-start; }
.plan > .muted{ margin-bottom:14px; }
.plan.best{ border:2px solid var(--accent); box-shadow:var(--shadow-2); }
.plan .meta{ text-transform:uppercase; letter-spacing:.8px; font-weight:700; font-size:11.5px; }
.card.lock{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; border:1.5px dashed var(--accent-line); background:var(--accent-soft); box-shadow:none; }
.lock-ic{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--accent); flex:none; }
.lock-t{ flex:1 1 260px; min-width:0; }
.chip.lockchip{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-line); }
.chip.lockchip .ic{ width:14px; height:14px; }
.card.locked{ opacity:.78; border-style:dashed; }
.card.locked:hover{ opacity:1; }
.upgrade{ display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; background:var(--accent); color:var(--on-accent); font:700 13.5px var(--font-display); border-radius:var(--radius-pill); padding:7px 14px; white-space:nowrap; }
.upgrade .ic{ width:16px; height:16px; }
.upgrade:hover{ background:var(--accent-strong); }
.side .upgrade{ width:100%; justify-content:center; margin:0 0 12px; padding:9px 12px; }
@media (max-width:520px){ .top .upgrade span{ display:none; } .top .upgrade{ padding:8px 10px; } }
.linkbtn{ border:0; background:none; padding:0; color:var(--accent); cursor:pointer; text-align:left; font:inherit; }
.linkbtn:hover{ text-decoration:underline; }
tr.sel td{ background:var(--accent-soft); }

/* ---------- copy protection ---------- */
body.wm::after{ content:""; position:fixed; inset:0; z-index:calc(var(--z-toast) - 1); pointer-events:none; background-image:var(--wm); opacity:.08; }
body.wm{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
body.wm input, body.wm textarea, body.wm select, body.wm [contenteditable="true"]{ -webkit-user-select:text; user-select:text; }
body.wm img, body.wm svg{ -webkit-user-drag:none; }
@media print{
  body *{ display:none !important; }
  body::before{ content:"Printing is turned off to protect the IGOEE Prep question bank."; display:block; padding:40px; font:16px sans-serif; }
}

/* ---------- notebook ---------- */
.dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:1px; }
.savepop{ margin:0 0 14px; max-width:420px; }
.nbbox{ margin:14px 0 0; padding:12px 14px; border:1px dashed var(--line-strong); border-radius:var(--radius-l); background:var(--surface); }
.nbbox textarea{ min-height:64px; }
.nbstats .stat{ font:inherit; color:inherit; text-align:left; }
.nbitem p{ overflow-wrap:anywhere; }
.nbnote{ white-space:pre-wrap; font-size:14.5px; border-left:3px solid var(--accent-line); padding:2px 0 2px 10px; margin:6px 0 10px; color:var(--ink-soft); }
.nbpage h3{ margin-bottom:6px; }
.nbtext{ white-space:pre-wrap; color:var(--ink-soft); font-size:14.5px; }
.swatch{ width:26px; height:26px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-strong); cursor:pointer; padding:0; }
.swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--ink); }
.barrow{ display:grid; grid-template-columns:minmax(110px,40%) 1fr 28px; align-items:center; gap:10px; margin:8px 0; font-size:14px; }
.barrow b{ text-align:right; font-variant-numeric:tabular-nums; }
.forecast{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; align-items:end; }
.fc-day{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:13px; color:var(--ink-soft); }
.fc-bar{ width:100%; max-width:46px; height:110px; display:flex; align-items:flex-end; background:var(--surface-2); border-radius:6px; overflow:hidden; }
.fc-bar i{ display:block; width:100%; background:var(--accent); min-height:2px; }
.fc-day b{ color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:420px){ .tabs button{ font-size:10.5px; } }
.grid.nbstats{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
a.card.link{ text-decoration:none; color:inherit; }