:root{color-scheme:light;--merk:#1d3b53;--rand:#d7dde3;--zacht:#5b6875}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f4f6f8;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#17212b;padding:24px 16px}
.kaart{width:100%;max-width:400px;background:#fff;border:1px solid var(--rand);border-radius:14px;padding:28px 28px 24px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06)}
.kop{display:flex;gap:14px;align-items:center;margin-bottom:20px}.kop h1{font-size:1.35rem;line-height:1.2;margin:0;overflow-wrap:anywhere}.boven{margin:0;color:var(--zacht);font-size:.85rem}
.letter,.logo{flex:none;width:44px;height:44px;border-radius:10px}.letter{display:grid;place-items:center;background:var(--merk);color:#fff;font-weight:600;font-size:1.2rem}.logo{object-fit:contain}
.knoppen{display:grid;gap:10px}.knop{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid var(--rand);border-radius:10px;background:#fff;color:#17212b;text-decoration:none;font-weight:500}
.knop:hover{background:#f7f9fa;border-color:#b9c2cb}.knop:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid color-mix(in srgb,var(--merk) 40%,transparent);outline-offset:2px}
.of{display:flex;align-items:center;gap:10px;margin:20px 0 14px;color:var(--zacht);font-size:.85rem}.of::before,.of::after{content:"";flex:1;border-top:1px solid var(--rand)}
label{display:block;font-weight:500;margin:0 0 6px}input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #b9c2cb;border-radius:10px;font:inherit}
input[autocomplete=one-time-code]{font-size:1.4rem;letter-spacing:.3em;text-align:center}
button{font:inherit;cursor:pointer}.hoofd{width:100%;min-height:44px;margin-top:12px;border:0;border-radius:10px;background:var(--merk);color:#fff;font-weight:600}.hoofd:hover{filter:brightness(1.08)}
.melding{background:#fff6e5;border:1px solid #f1d39a;border-radius:10px;padding:10px 12px}.melding[role=status]{background:#eef6ff;border-color:#bcd7f5}
.zacht{color:var(--zacht);font-size:.9rem}.voet{color:var(--zacht);font-size:.8rem;margin-top:16px}a{color:var(--merk)}
@media (prefers-reduced-motion:no-preference){.knop,.hoofd{transition:background .15s,border-color .15s,filter .15s}}