:root {
  --bg: #12141a; --vlak: #1b1e27; --rand: #2c3140; --tekst: #eef0f4; --zacht: #9aa2b4;
  --accent: #f2b33d; --goed: #5fce8f; --fout: #ef6b6b; --waarschuwing: #f2873d;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tekst); }
body { min-height: 100vh; font-size: 17px; line-height: 1.45; }
a { color: var(--accent); }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.3rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--zacht); font-weight: 600; }
.kop { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--rand); padding: 12px 16px; }
.kop .rij { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zacht { color: var(--zacht); font-size: .9rem; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.8rem; min-width: 5ch; text-align: right; }
.timer.bijna { color: var(--waarschuwing); }
.timer.stil { color: var(--zacht); }
.kaart { background: var(--vlak); border: 1px solid var(--rand); border-radius: 10px; padding: 14px; margin: 12px 0; }
.melding { border-left: 4px solid var(--accent); }
.melding.fout { border-left-color: var(--fout); }
label.vraag { display: block; font-weight: 600; margin-bottom: 8px; }
input[type=text] { width: 100%; font: inherit; color: inherit; background: #0e1015; border: 1px solid var(--rand); border-radius: 8px; padding: 12px; }
input[type=text]:focus { outline: 2px solid var(--accent); border-color: transparent; }
input[disabled] { opacity: .75; }
.opslag { font-size: .85rem; margin-top: 6px; min-height: 1.3em; color: var(--zacht); }
.opslag.ok { color: var(--tekst); }
.opslag.fout { color: var(--fout); font-weight: 600; }
.uitslag { margin-top: 8px; font-size: .95rem; }
.uitslag .goed { color: var(--goed); } .uitslag .mis { color: var(--fout); }
button { font: inherit; font-weight: 600; color: #15130c; background: var(--accent); border: 0; border-radius: 8px; padding: 12px 18px; cursor: pointer; }
button.tweede { background: transparent; color: var(--tekst); border: 1px solid var(--rand); }
button:disabled { opacity: .4; cursor: default; }
.knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rand); }
th { color: var(--zacht); font-weight: 600; }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; }
.band { position: fixed; left: 0; right: 0; bottom: 0; background: var(--fout); color: #fff; font-weight: 700; text-align: center; padding: 10px; display: none; }
.band.aan { display: block; }

/* Zaalscherm */
body.zaal { display: grid; place-items: center; text-align: center; padding: 4vw; }
.zaal .boven { position: fixed; top: 3vh; left: 4vw; right: 4vw; display: flex; justify-content: space-between; font-size: 2.2vw; color: var(--zacht); }
.zaal .groot { font-size: 5.2vw; font-weight: 700; line-height: 1.15; max-width: 22ch; margin: 0 auto; }
.zaal .nummer { font-size: 2.4vw; color: var(--accent); font-weight: 700; margin-bottom: 2vh; }
.zaal .antwoord { font-size: 4vw; color: var(--goed); margin-top: 4vh; font-weight: 700; }
.zaal .timer { font-size: 18vw; text-align: center; }
.zaal table { font-size: 3vw; max-width: 60vw; margin: 0 auto; }