:root {
  --achtergrond: #fbfaf7;
  --vlak: #ffffff;
  --tekst: #1d1f21;
  --zacht: #6b6f73;
  --lijn: #e3e0d9;
  --accent: #2f5d50;
  --accent-tekst: #ffffff;
  --goed: #2f7a4b;
  --slecht: #b3261e;
  --let: #8a5a00;
  --let-vlak: #fff6e0;
  --fout-vlak: #fdecea;
  --ok-vlak: #e9f5ee;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --achtergrond: #16181a;
    --vlak: #1e2124;
    --tekst: #e6e6e3;
    --zacht: #9a9fa4;
    --lijn: #33373b;
    --accent: #7cc1a9;
    --accent-tekst: #10201a;
    --goed: #7cd39c;
    --slecht: #ff8a80;
    --let: #f3c35c;
    --let-vlak: #2d2615;
    --fout-vlak: #3a1d1b;
    --ok-vlak: #18291f;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--achtergrond); color: var(--tekst);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
main { max-width: 64rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.6rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }

.balk { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--lijn);
  background: var(--vlak); }
.merk { font-weight: 700; text-decoration: none; color: var(--tekst); }
.admin { color: var(--zacht); }
.uit { margin-left: auto; display: flex; gap: .75rem; align-items: center; }
.wie { color: var(--zacht); font-size: .9rem; }

button { font: inherit; background: var(--accent); color: var(--accent-tekst); border: 0; border-radius: .4rem;
  padding: .5rem .9rem; cursor: pointer; }
button.tweede { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button.link { background: none; color: var(--accent); padding: 0; text-decoration: underline; }
input { font: inherit; padding: .45rem .6rem; border: 1px solid var(--lijn); border-radius: .4rem;
  background: var(--vlak); color: var(--tekst); max-width: 100%; }

.smal { max-width: 24rem; margin: 2rem auto; }
.stapel { display: flex; flex-direction: column; gap: .9rem; }
.stapel label { display: flex; flex-direction: column; gap: .25rem; }
.upload, .filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 0 0 1.25rem; }
.upload { padding: 1rem; border: 1px dashed var(--lijn); border-radius: .6rem; background: var(--vlak); }
.upload label, .filter label { display: flex; flex-direction: column; gap: .25rem; }
.knoppen { display: flex; gap: .4rem; flex-wrap: wrap; }

.melding { padding: .75rem 1rem; border-radius: .5rem; background: var(--vlak); border: 1px solid var(--lijn);
  margin: 0 0 1rem; }
.melding ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.melding.fout { background: var(--fout-vlak); border-color: transparent; }
.melding.ok { background: var(--ok-vlak); border-color: transparent; }
.melding.let { background: var(--let-vlak); border-color: transparent; }
.waarschuwing { color: var(--let); }

.tabel { width: 100%; border-collapse: collapse; background: var(--vlak); margin: 0 0 1rem; }
.tabel th, .tabel td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel th { font-size: .85rem; color: var(--zacht); font-weight: 600; }
.n { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.af { color: var(--tekst); }
.bij { color: var(--goed); }
.zacht { color: var(--zacht); font-size: .9rem; }
.leeg { color: var(--zacht); padding: 1rem 0; }
.kop { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin: -.5rem 0 1rem; color: var(--zacht); }
.kop strong { color: var(--tekst); }
.kruimel { margin: 0; font-size: .9rem; }
.lijst { padding-left: 1.2rem; }

.label { display: inline-block; font-size: .8rem; padding: .05rem .45rem; border-radius: 1rem;
  border: 1px solid var(--lijn); color: var(--zacht); white-space: nowrap; }
.label.goed { color: var(--goed); border-color: currentColor; }
.label.slecht { color: var(--slecht); border-color: currentColor; }
.label.let { color: var(--let); border-color: currentColor; }

details { margin: 1rem 0; }
summary { cursor: pointer; color: var(--zacht); }

@media (max-width: 40rem) {
  main { padding: .75rem; }
  .tabel th, .tabel td { padding: .45rem .35rem; }
  .regels td:nth-child(4), .regels th:nth-child(4) { display: none; }
  .wie { display: none; }
}