/* Toegang (inloggen, koppelen, toestellen) · zelfde kleuren als de status- en noodpagina */
:root { --grond: #F5F3F0; --kaart: #fff; --tekst: #2D2A26; --gedempt: #6B6560; --lijn: #E5E0DA; --accent: #D4A017; --accent-tekst: #2D2A26; --goed: #2E9E4F; --fout: #C2410C; --info: #3A78D8; }
@media (prefers-color-scheme: dark) {
  :root { --grond: #686052; --kaart: #413D32; --tekst: #fff; --gedempt: #BDB4A4; --lijn: rgba(255,255,255,.09); --accent: #FEC201; --accent-tekst: #2D2A26; --goed: #5DD37B; --fout: #FF9A6B; --info: #7FB2FF; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grond); color: var(--tekst); font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 24px; margin: 0 0 4px; } h1 span { color: var(--accent); }
h2 { font-size: 18px; margin: 0 0 8px; }
.sub { color: var(--gedempt); margin: 0 0 18px; }
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.groot { font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.klein { font-size: 14px; color: var(--gedempt); }
a { color: var(--accent); }
label { display: block; margin: 12px 0 0; font-size: 14px; color: var(--gedempt); }
input, select { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; color: var(--tekst); background: var(--grond); border: 1px solid var(--lijn); border-radius: 8px; }
.knop { display: inline-block; margin-top: 16px; padding: 11px 18px; font: inherit; font-weight: 600; color: var(--accent-tekst); background: var(--accent); border: 0; border-radius: 10px; cursor: pointer; }
.knop[disabled] { opacity: .5; cursor: default; }
.knop.licht { background: transparent; color: var(--tekst); border: 1px solid var(--lijn); }
.knop.klein-knop { margin-top: 8px; padding: 6px 12px; font-size: 14px; font-weight: 500; }
.rij { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.melding { padding: 10px 14px; border-radius: 10px; background: var(--kaart); border: 1px solid var(--lijn); }
.melding.fout { border-color: var(--fout); color: var(--fout); }
.melding.goed { border-color: var(--goed); color: var(--goed); }
.persoon { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.persoon:last-child { border-bottom: 0; }
.persoon-kop { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.naam { font-weight: 600; }
.rol { font-size: 13px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--lijn); color: var(--gedempt); }
.toestellen { list-style: none; margin: 6px 0 0; padding: 0; }
.toestellen li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; padding: 4px 0; color: var(--gedempt); }
.qr { background: #fff; padding: 10px; border-radius: 10px; width: min(240px, 100%); margin: 12px auto; }
.qr svg { display: block; width: 100%; height: auto; }
.link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; color: var(--gedempt); }
[hidden] { display: none !important; }