:root { --accent: #d6177f; --tekst: #1d1d1f; --zacht: #6b6b70; --achter: #f6f5f3; --rand: #dcdad6; --hoek: 14px; }
@media (prefers-color-scheme: dark) { :root { --tekst: #f2f2f3; --zacht: #a3a3a8; --achter: #161618; --rand: #3a3a3f; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--achter); color: var(--tekst); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.kaart { width: 100%; max-width: 380px; padding: 28px; border: 1px solid var(--rand); border-radius: var(--hoek); }
h1 { margin: 0 0 20px; font-size: 1.4rem; }
form, section { display: grid; gap: 10px; }
label { font-weight: 600; font-size: .9rem; }
input { padding: 10px 12px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--rand); border-radius: 10px; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { padding: 11px 14px; font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: 10px; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .6; cursor: progress; }
button.link { color: var(--accent); background: none; padding: 4px 0; font-weight: 500; text-align: left; }
.zacht { color: var(--zacht); }
#melding { min-height: 1.5em; margin: 14px 0 0; color: var(--zacht); }
#melding.fout { color: #c0262d; }