:root {
  --bg: #f6f7f9; --card: #fff; --ink: #1c2330; --muted: #5d6675; --line: #dde1e8;
  --brand: #1f4fd8; --brand-ink: #fff; --calc: #8a5a00; --calc-bg: #fff2d6; --nocalc: #0b6b3a; --nocalc-bg: #dcf5e6;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12161d; --card: #1b212b; --ink: #e8ecf3; --muted: #9aa5b5; --line: #2c3442;
          --brand: #6d95ff; --brand-ink: #0b1220; --calc: #ffd27a; --calc-bg: #3a2c0b; --nocalc: #7fe0a8; --nocalc-bg: #0f3321; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.top { background: var(--card); border-bottom: 1px solid var(--line); padding: 12px 16px; }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.brand span { color: var(--muted); font-weight: 500; }
main { max-width: 1020px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.6rem; margin: 0 0 4px; }
.lead { color: var(--muted); margin: 0 0 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 14px 0; }
fieldset:first-child { border-top: 0; }
legend { font-weight: 600; padding: 0 8px 0 0; }
legend small { color: var(--muted); font-weight: 400; }
.row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--muted); }
.chip { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); font-size: .95rem; padding: 5px 10px;
        border: 1px solid var(--line); border-radius: 999px; background: var(--bg); cursor: pointer; }
.chip small { color: var(--muted); }
select, input[type=number] { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-width: 180px; }
input[type=number] { min-width: 90px; width: 100px; }
.group { margin: 8px 0 12px; }
.gl { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.match { margin: 12px 0 8px; color: var(--muted); }
.btn { display: inline-block; background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 8px; padding: 10px 18px;
       font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); }
.btn.small { padding: 5px 12px; font-size: .9rem; margin-left: auto; }
.setbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.note { color: var(--muted); font-size: .9rem; }
.q { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 16px; margin: 0 0 18px; }
.qhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.qhead h2 { font-size: 1.1rem; margin: 0 8px 0 0; }
.tag { font-size: .8rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.tag.calc { background: var(--calc-bg); color: var(--calc); border-color: transparent; }
.tag.nocalc { background: var(--nocalc-bg); color: var(--nocalc); border-color: transparent; }
.q img { max-width: 100%; height: auto; display: block; background: #fff; border-radius: 6px; }
.stage { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-height: 120px; overflow-x: auto; }
.stage p { color: #5d6675; }
.fine { color: var(--muted); font-size: .85rem; }
body.ms { -webkit-user-select: none; user-select: none; }
body.ms canvas { -webkit-touch-callout: none; max-width: 100%; }
@media print { body.ms main { display: none; } body.ms::after { content: "Mark schemes can't be printed."; display: block; padding: 24px; } }
@media (max-width: 560px) { select { min-width: 0; width: 100%; } label { width: 100%; } .row .chip { width: auto; } }

/* sign-in, admin */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nav { display: flex; align-items: center; gap: 14px; font-size: .9rem; }
.nav a { color: var(--brand); text-decoration: none; font-weight: 600; }
.nav form { margin: 0; }
.who { color: var(--muted); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-decoration: underline; }
.narrow { max-width: 420px; margin: 24px auto; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack input, textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); width: 100%; }
.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; border: 1px solid var(--line); background: var(--card); }
.flash.error { border-color: #d64545; color: #d64545; }
.flash.ok { border-color: #2f9e62; }
.flash.warn { border-color: #c98a00; }
section.card { margin: 0 0 18px; }
section.card h2 { font-size: 1.1rem; margin: 0 0 8px; }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.rowbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.rowbtns form, form.inline { margin: 0; display: inline; }
.rowbtns .btn.small, .btn.small { margin-left: 0; }
.tag.bad { background: #fde0e0; color: #a31f1f; border-color: transparent; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 4px 0; }
pre { white-space: pre-wrap; background: var(--bg); padding: 10px; border-radius: 6px; font-size: .85rem; }
details { margin: 4px 0; }
code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }
section.card.alert { border-color: #d64545; }