:root{
  --bg:#0f1419; --paneel:#171e26; --paneel2:#1f2833; --lijn:#2c3a47;
  --tekst:#e8eef5; --zacht:#9fb0c0; --accent:#3fa7ff; --goed:#3ddc97;
  --fout:#ff6b6b; --let:#ffc857;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tekst); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; background:rgba(15,20,25,.92); border-bottom:1px solid var(--lijn); backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:10px}
.brand strong{display:block; font-size:15px}
.brand small{color:var(--zacht); font-size:12px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.status{display:flex; align-items:center; gap:14px; font-size:14px; color:var(--zacht)}
.timer{font-variant-numeric:tabular-nums; font-weight:600; color:var(--tekst); background:var(--paneel2);
  border:1px solid var(--lijn); border-radius:999px; padding:4px 12px}
.timer.krap{color:var(--fout); border-color:var(--fout)}
main{max-width:900px; margin:0 auto; padding:26px 18px 70px}
h1{font-size:26px; margin:0 0 12px}
h2{font-size:17px; margin:0 0 6px}
.lead{color:var(--zacht); max-width:65ch}
.kaarten{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:22px 0}
.kaart{background:var(--paneel); border:1px solid var(--lijn); border-radius:14px; padding:14px 16px}
.kaart p{margin:0; color:var(--zacht); font-size:14px}
.tips{color:var(--zacht); font-size:14px; padding-left:20px}
.tips li{margin:4px 0}
button{font:inherit; cursor:pointer; border-radius:10px; padding:10px 16px; border:1px solid transparent}
.primair{background:var(--accent); color:#06121f; font-weight:650}
.primair:hover{filter:brightness(1.08)}
.ghost{background:transparent; color:var(--tekst); border-color:var(--lijn)}
.ghost:hover{background:var(--paneel2)}
.klein{color:var(--zacht); font-size:13px}
.vraagkop{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13px; color:var(--zacht)}
.domein{background:var(--paneel2); border:1px solid var(--lijn); border-radius:999px; padding:3px 10px}
.vraagtekst{font-size:19px; line-height:1.6; margin:6px 0 22px; white-space:pre-wrap}
.opties{display:grid; gap:10px}
.optie{display:flex; align-items:flex-start; gap:12px; background:var(--paneel); border:1px solid var(--lijn);
  border-radius:12px; padding:13px 15px; cursor:pointer; transition:border-color .12s, background .12s}
.optie:hover{border-color:#3d5166}
.optie input{margin-top:3px; accent-color:var(--accent)}
.optie.gekozen{border-color:var(--accent); background:#16283a}
.optielabel{font-weight:700; color:var(--zacht); min-width:18px}
.openvak{background:var(--paneel); border:1px solid var(--lijn); border-radius:12px; padding:16px}
.openvak label{display:block; color:var(--zacht); font-size:14px; margin-bottom:8px}
.invoer{display:flex; align-items:center; gap:10px}
.invoer input{background:#0c1116; border:1px solid var(--lijn); color:var(--tekst); border-radius:10px;
  padding:12px 14px; font-size:18px; width:180px; font-variant-numeric:tabular-nums}
.invoer input:focus{outline:2px solid var(--accent); outline-offset:1px}
.eenheid{color:var(--zacht); font-size:17px}
.knoppenrij{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
.knoppenrij .primair{margin-left:auto}
.scoreblok{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:18px 0 24px}
.cijfer{background:var(--paneel); border:1px solid var(--lijn); border-radius:14px; padding:16px; text-align:center}
.cijfer span{display:block; font-size:30px; font-weight:700}
.cijfer small{color:var(--zacht)}
.domeintabel{width:100%; border-collapse:collapse; margin-bottom:22px; font-size:14px}
.domeintabel th,.domeintabel td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--lijn)}
.domeintabel th{color:var(--zacht); font-weight:500}
.filterrij{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.filterrij label{color:var(--zacht); font-size:14px}
.nabespreking{display:grid; gap:14px}
.nabloc{background:var(--paneel); border:1px solid var(--lijn); border-left:4px solid var(--fout); border-radius:12px; padding:16px}
.nabloc.goed{border-left-color:var(--goed)}
.nabloc h3{font-size:15px; margin:0 0 8px; color:var(--zacht); font-weight:500}
.nabloc .vraag{font-size:16px; margin-bottom:12px}
.antwoordregel{display:flex; gap:10px; flex-wrap:wrap; margin:4px 0; font-size:15px}
.antwoordregel b{min-width:120px; color:var(--zacht); font-weight:500}
.jouw{color:var(--fout)}
.jouw.goed{color:var(--goed)}
.uitleg{margin-top:10px; padding-top:10px; border-top:1px dashed var(--lijn); color:#cfe0ef; font-size:15px}
.modal{position:fixed; inset:0; background:rgba(4,8,12,.72); display:flex; align-items:center; justify-content:center; padding:18px; z-index:50}
.modalinhoud{background:var(--paneel); border:1px solid var(--lijn); border-radius:16px; padding:20px; max-width:560px; width:100%}
.raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:8px; margin:14px 0 4px}
.vak{aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--paneel2);
  border:1px solid var(--lijn); border-radius:9px; font-size:14px; color:var(--zacht); cursor:pointer}
.vak.beantwoord{background:#16352a; color:var(--goed); border-color:#265442}
.vak.gemarkeerd{box-shadow:inset 0 0 0 2px var(--let)}
@media (max-width:560px){
  .vraagtekst{font-size:17px}
  main{padding:18px 14px 60px}
  h1{font-size:22px}
}