:root { --grond: #F2F2F7; --wit: #fff; --inkt: #1D1D1F; --tekst2: #48484D; --grijs: #86868B; --lijn: #E5E5EA; --blauw: #1F6FB2; --rood: #B3362F; }
* { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Inter", "Segoe UI", Helvetica, Arial, sans-serif; background: var(--grond); color: var(--inkt); -webkit-font-smoothing: antialiased; }
.inlog { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; }
.kaart { width: min(420px, 100%); background: var(--wit); border-radius: 20px; padding: 34px; box-shadow: 0 10px 30px rgba(15,46,71,.08); }
.logo { display: block; margin: 0 auto 6px; width: 180px; height: auto; }
h1 { font-size: 26px; margin: 10px 0 4px; text-align: center; letter-spacing: -.02em; }
.uitleg { color: var(--tekst2); font-size: 15.5px; line-height: 1.5; margin: 6px 0 2px; }
label { display: block; font-size: 13px; font-weight: 500; color: var(--grijs); margin: 20px 0 7px; }
input { width: 100%; font: inherit; font-size: 17px; padding: 13px 14px; border: 1px solid var(--lijn); border-radius: 12px; background: #fff; color: var(--inkt); outline: 0; }
input:focus { border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(31,111,178,.18); }
.knop { display: block; width: 100%; margin-top: 22px; padding: 14px; border: 0; border-radius: 12px; background: var(--blauw); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.knop:disabled { opacity: .55; cursor: default; } .knop.licht { background: var(--grond); color: var(--inkt); margin-top: 10px; font-weight: 500; }
.fout { color: var(--rood); font-size: 14.5px; margin: 12px 0 0; min-height: 1.4em; text-align: center; }
.keuze p { color: var(--tekst2); font-size: 15px; margin: 18px 0 4px; }
.klein { text-align: center; font-size: 14.5px; color: var(--grijs); margin: 22px 0 0; } .klein a { color: var(--grijs); }