@font-face{font-family:"DM Sans";font-weight:100 1000;font-display:swap;src:url(dmsans.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:100 900;font-display:swap;src:url(fraunces.woff2) format("woff2")}
/* Dezelfde tokens als :root in static/index.html (DESIGN_SYSTEM.md, Inloggen). */
:root{--ground:#F7F1E7;--sheet:#FFFCF7;--sheet-border:#D5D9CF;--ink-text:#20362D;--muted:#62695F;--dash:#7A8576;
--focus:#3E5D7A;--ink-admin:#A33F2D;--ink-admin-vlak:#F4E0D4;--synced:#536748;--ink-family-vlak:#E8EBD9;
--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--r-btn:12px;--knop-h:44px;--woordmerk-b:152px}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;display:flex;background:var(--ground);color:var(--ink-text);font:400 16px/24px "DM Sans",system-ui,sans-serif}
main{width:100%;max-width:400px;margin:auto;padding:var(--s6) var(--s4)}
.merk{display:block;width:var(--woordmerk-b);height:auto;margin-bottom:var(--s6)}
h1{font:600 30px/36px "Fraunces",Georgia,serif;font-variation-settings:"SOFT" 60,"WONK" 1;margin:0 0 var(--s2)}
.zin{margin:0 0 var(--s5);overflow-wrap:anywhere}
label{display:block;font-weight:600;margin-bottom:var(--s2)}
input:not([type=hidden]){display:block;width:100%;height:52px;padding:0 var(--s4);font:inherit;color:inherit;background:var(--sheet);border:1px solid var(--dash);border-radius:var(--r-btn)}
input.code{font-size:26px;letter-spacing:.24em;font-variant-numeric:tabular-nums}
input[aria-invalid=true]{border:2px solid var(--ink-admin)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
button,a.tweede{font:inherit;border-radius:var(--r-btn);min-height:var(--knop-h);cursor:pointer}
.hoofd{display:block;width:100%;height:52px;margin-top:var(--s4);font-weight:600;color:var(--ground);background:var(--ink-text);border:0}
.hoofd[disabled]{opacity:.7;cursor:progress}
.tweede{display:inline-flex;align-items:center;padding:0 var(--s3);color:var(--ink-text);background:none;border:1px solid var(--sheet-border);text-decoration:none}
.tweede[disabled]{color:var(--muted);cursor:default}
.rij{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.rij form{min-width:0}
.stil{margin:var(--s4) 0 0;color:var(--muted);font-size:15px;line-height:22px}
.melding{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-btn);font-size:15px;line-height:22px}
.melding.fout{color:var(--ink-admin);background:var(--ink-admin-vlak)}
.melding.ok{color:var(--synced);background:var(--ink-family-vlak)}
@media (max-width:600px){:root{--knop-h:56px;--woordmerk-b:96px}main{margin:0 auto;padding-top:var(--s5)}.hoofd{height:56px}}