/* Dezelfde kleuren als ontwerp/webversie_sjabloon.html, zodat deze dunne
   versie later zonder schok in het echte ontwerp opgaat. */
:root{
  --bg:#0d1012;--paneel:#15191c;--verhoogd:#1d2328;--lijn:#2a3238;--lijn-fel:#3b4850;
  --tekst:#e8edf0;--tekst-zacht:#9eaab2;--tekst-vaag:#6a767e;
  --geel:#f5c518;--staal:#59a0d8;--goed:#4fb477;--letop:#e08a3c;--fout:#d9584f;
  --ui:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:10px;color-scheme:dark;
}
*{box-sizing:border-box}
/* .knop zet display, en dat wint anders van het hidden-attribuut */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--tekst);font:15px/1.5 var(--ui)}
.kader{max-width:720px;margin:0 auto;padding:28px 16px 48px}
.merk b{display:block;font-size:22px;letter-spacing:-.3px}
.merk span{color:var(--tekst-vaag);font-size:13px}
.paneel{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);padding:20px;margin-top:18px}
h2{font-size:16px;margin:0 0 6px}
p{margin:0 0 10px;color:var(--tekst-zacht)}
.knop{display:inline-block;background:var(--verhoogd);color:var(--tekst);border:1px solid var(--lijn-fel);
  border-radius:8px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.knop.hoofd{background:var(--geel);color:#111;border-color:var(--geel)}
.knop.klein{padding:6px 11px;font-size:13px}
.knop:disabled{opacity:.5;cursor:default}
input[type=password],input[type=text]{width:100%;background:var(--bg);border:1px solid var(--lijn-fel);
  border-radius:8px;padding:11px 12px;color:var(--tekst);font:inherit;margin:6px 0 14px}
.vak{border:2px dashed var(--lijn-fel);border-radius:var(--r);padding:34px 18px;text-align:center}
.vak.erboven{border-color:var(--geel);background:#1a1a10}
.balk{height:8px;background:var(--verhoogd);border-radius:4px;overflow:hidden;margin:12px 0 8px}
.balk i{display:block;height:100%;width:0;background:var(--geel);transition:width .3s}
.cijfers{font-family:var(--data);font-size:13px;color:var(--tekst-zacht)}
.melding{font-size:13.5px;margin-top:10px}
.melding.fout{color:var(--fout)}.melding.letop{color:var(--letop)}.melding.goed{color:var(--goed)}
.rij{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--lijn)}
.rij:first-child{border-top:0}
.rij b{font-family:var(--data);font-size:13.5px}
.rij span{display:block;color:var(--tekst-vaag);font-size:12.5px}
.vlag{font-size:12px;padding:3px 9px;border-radius:20px;border:1px solid var(--lijn-fel);white-space:nowrap}
.vlag.klaar{color:var(--goed);border-color:var(--goed)}
.vlag.bezig{color:var(--geel);border-color:var(--geel)}
.vlag.fout{color:var(--fout);border-color:var(--fout)}
.alleen-smal{display:none}
@media (max-width:640px){.alleen-breed{display:none}.alleen-smal{display:block}}