:root {
  --inkt: #1f2328;
  --zacht: #59636e;
  --lijn: #d1d9e0;
  --vlak: #f6f8fa;
  --accent: #1f4e8c;
  --slecht: #b42318;
  --goed: #1a7f37;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --inkt: #e6edf3;
    --zacht: #9198a1;
    --lijn: #3d444d;
    --vlak: #151b23;
    --accent: #6ea8fe;
    --slecht: #ff8182;
    --goed: #56d364;
  }

  body { background: #0d1117; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--inkt);
  background: #fff;
}

.pagina {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.merk {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zacht);
}

h1 { margin: 0.25rem 0 1.5rem; font-size: 1.6rem; }

a { color: var(--accent); }

.form .veld { margin-bottom: 1rem; }
.form label { display: block; margin-bottom: 0.25rem; font-weight: 600; }

.form input[type="email"],
.form input[type="password"],
.form input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: inherit;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 6px;
}

.vink { display: flex; gap: 0.5rem; align-items: center; }
.vink label { margin: 0; font-weight: 400; }

.acties { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1.25rem; }

.knop {
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .knop { color: #0d1117; }
}

.knop-rand { color: var(--accent); background: transparent; }

.melding { padding: 0.6rem 0.8rem; border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); }
.melding-slecht { color: var(--slecht); border-color: var(--slecht); }
.melding-goed { color: var(--goed); border-color: var(--goed); }

.hulp { color: var(--zacht); font-size: 0.9rem; }

.code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9rem; overflow-wrap: anywhere; }

.gegevens { margin: 1rem 0; }
.gegevens div { padding: 0.4rem 0; border-bottom: 1px solid var(--lijn); }
.gegevens dt { color: var(--zacht); font-size: 0.85rem; }
.gegevens dd { margin: 0; }

.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { padding: 0.5rem 0.4rem; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.tabel th { color: var(--zacht); font-size: 0.85rem; font-weight: 600; }

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.voet { margin-top: 2rem; color: var(--zacht); font-size: 0.9rem; }

@media (max-width: 560px) {
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; }
  .tabel thead { display: none; }
  .tabel tr { padding: 0.6rem 0; border-bottom: 1px solid var(--lijn); }
  .tabel td { border: 0; padding: 0.15rem 0; }
}