/* ══════════════════════════════════════════════════════════════════
   Assess — "Collegiate Blue" design system.
   White field · deep navy accents · elegant serif for headings/questions ·
   monospace for small uppercase labels/meta · lettered A/B/C/D option cards ·
   generous whitespace · soft-shadowed rounded cards.
   Shared by the admin app (index.html) and candidate app (exam.html).
══════════════════════════════════════════════════════════════════ */
:root {
  --paper:#f6f8fc; --surface:#ffffff; --surface-2:#eef2f9;
  --ink:#182031; --muted:#6b7488; --line:#e2e7f1;
  --navy:#1b2d5c; --navy-2:#132146; --navy-3:#0e1a38;
  --gold:#9a6a1a; --green:#1f7a4d; --danger:#b3261e; --warn:#8a6d17;
  --tint:#eef2fb;               /* faint navy fill for selected states */
  --radius:16px; --radius-sm:10px; --radius-xs:8px;
  --shadow:0 1px 2px rgba(20,32,64,.05), 0 10px 34px rgba(20,32,64,.08);
  --shadow-sm:0 1px 2px rgba(20,32,64,.06), 0 4px 14px rgba(20,32,64,.06);
  --serif:"Iowan Old Style",Georgia,"Palatino Linotype","Book Antiqua","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0c1324; --surface:#141d33; --surface-2:#1b2743;
    --ink:#e8ecf6; --muted:#93a0bb; --line:#26324f;
    --navy:#5f8ae0; --navy-2:#4f7ad6; --navy-3:#3f66c0;
    --tint:#18233d; --gold:#d0a24a; --green:#4ade80; --danger:#f2665c; --warn:#d9b24a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="light"]{ --paper:#f6f8fc; --surface:#fff; --surface-2:#eef2f9; --ink:#182031; --muted:#6b7488; --line:#e2e7f1; --navy:#1b2d5c; --navy-2:#132146; --tint:#eef2fb; }
:root[data-theme="dark"]{ --paper:#0c1324; --surface:#141d33; --surface-2:#1b2743; --ink:#e8ecf6; --muted:#93a0bb; --line:#26324f; --navy:#5f8ae0; --navy-2:#4f7ad6; --tint:#18233d; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

h1,h2,h3{ font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.2; margin:0 0 .45em; letter-spacing:-.01em; }
h1{ font-size:2rem; } h2{ font-size:1.4rem; } h3{ font-size:1.12rem; }
a{ color:var(--navy); text-decoration:none; } a:hover{ text-decoration:underline; }
p{ margin:0 0 .8em; }
.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }
.muted{ color:var(--muted); }
.wrap{ max-width:860px; margin:0 auto; padding:28px 22px 90px; }

/* Small uppercase mono labels (the "QUESTION 03 / 30 · TIMED ROUND" vibe) */
.eyebrow,.label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* Cards */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 28px; margin:0 0 20px; }
.card h2{ font-size:1.25rem; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--sans);
  font-weight:600; font-size:.95rem; padding:11px 20px; border-radius:var(--radius-xs);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:filter .12s, background .12s, transform .02s, border-color .12s; }
.btn:hover{ filter:brightness(.985); border-color:#cdd6e6; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-2); border-color:var(--navy-2); filter:none; }
.btn-danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
.btn-danger:hover{ background:color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--surface-2); border-color:transparent; }
.btn-lg{ padding:14px 28px; font-size:1.02rem; }

/* Inputs */
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-xs); padding:11px 13px; width:100%;
  transition:border-color .12s, box-shadow .12s; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 16%, transparent); }
textarea{ min-height:120px; resize:vertical; }
label{ font-weight:600; display:block; margin:0 0 6px; }
.field{ margin:0 0 18px; }

/* Chips / badges (mono, uppercase) */
.chip{ display:inline-block; font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.08em;
  padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line); text-transform:uppercase; }
.chip-navy{ color:#fff; background:var(--navy); border-color:var(--navy); }
.chip-green{ color:#fff; background:var(--green); border-color:var(--green); }
.chip-gold{ color:#fff; background:var(--gold); border-color:var(--gold); }
.chip-blue{ color:#fff; background:var(--navy); border-color:var(--navy); }
.chip-danger{ color:#fff; background:var(--danger); border-color:var(--danger); }

/* Options — lettered A/B/C/D selectable cards (candidate answers) */
.opt{ display:flex; gap:14px; align-items:center; padding:15px 18px; margin:10px 0;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
  cursor:pointer; transition:border-color .12s, background .12s, box-shadow .12s; }
.opt:hover{ border-color:var(--navy); box-shadow:var(--shadow-sm); }
.opt.sel{ border-color:var(--navy); background:var(--tint); box-shadow:0 0 0 1px var(--navy) inset; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt-letter{ flex:0 0 auto; width:30px; height:30px; border-radius:999px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.8rem;
  font-weight:600; color:var(--muted); background:var(--surface); transition:.12s; }
.opt:hover .opt-letter{ border-color:var(--navy); color:var(--navy); }
.opt.sel .opt-letter{ background:var(--navy); border-color:var(--navy); color:#fff; }
.opt-text{ font-family:var(--serif); font-size:1.05rem; font-weight:400; color:var(--ink); }

/* Progress bar (top-of-card sweep) */
.progressbar{ height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.progressfill{ height:100%; background:var(--navy); border-radius:999px; transition:width .3s ease; }

/* Utility */
.brandmark{ font-family:var(--serif); font-weight:600; color:var(--navy); letter-spacing:-.01em; }
.row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.spread{ justify-content:space-between; }
.hidden{ display:none !important; }
.center{ text-align:center; }
.notice{ padding:15px 17px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface-2); }
.notice-danger{ border-color:var(--danger); color:var(--danger); background:color-mix(in srgb, var(--danger) 7%, var(--surface)); }
hr{ border:none; border-top:1px solid var(--line); margin:22px 0; }
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600; }
code,.code{ font-family:var(--mono); font-size:.9em; background:var(--surface-2); padding:2px 6px; border-radius:6px; }