:root {
  --bg: #f4f1ea; --kaart: #ffffff; --tekst: #1d2321; --stil: #66706c; --lijn: #e3ded3;
  --merk: #1f6f5c; --merk-zacht: #dcebe5; --warm: #c2571a; --warm-zacht: #f8e3d6; --fout: #b3261e;
  --knop: #eceae4; --knop-tekst: #1d2321;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121514; --kaart: #1c201f; --tekst: #ecefed; --stil: #9aa39f; --lijn: #2c3230;
    --merk: #5fbfa3; --merk-zacht: #1f3a33; --warm: #f0995e; --warm-zacht: #3d2618; --fout: #f2b8b5;
    --knop: #2a302e; --knop-tekst: #ecefed;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tekst);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
main { max-width: 560px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
h1 { font-size: 28px; margin: 4px 0 2px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--stil); margin: 0 0 10px; font-weight: 600; }
.kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.stil { color: var(--stil); font-size: 14px; }
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; padding: 14px; margin: 0 0 12px; }
.rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; }
.rij + .rij { border-top: 1px solid var(--lijn); }
.rij .naam { flex: 1; min-width: 0; }
.rij .naam small { display: block; color: var(--stil); font-size: 13px; }
.groot { font-size: 40px; font-weight: 600; line-height: 1; white-space: nowrap; }
.groot small { font-size: 20px; font-weight: 500; color: var(--stil); }
.midden { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
button { font: inherit; border: 0; border-radius: 12px; background: var(--knop); color: var(--knop-tekst);
  min-height: 48px; min-width: 48px; padding: 0 16px; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .5; }
button.aan { background: var(--merk); color: #fff; }
button.warm { background: var(--warm); color: #fff; }
button.breed { width: 100%; min-height: 56px; font-weight: 600; margin-top: 4px; }
button.rond { width: 48px; padding: 0; font-size: 24px; }
.stap { display: flex; align-items: center; gap: 8px; }
.stap .waarde { min-width: 64px; text-align: center; font-weight: 600; }
.schakel { min-width: 76px; }
.melding { background: var(--warm-zacht); color: var(--tekst); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: 15px; }
.fout { color: var(--fout); }
input { font: inherit; color: var(--tekst); background: var(--bg); border: 1px solid var(--lijn); border-radius: 10px;
  min-height: 44px; padding: 0 10px; max-width: 150px; }
input.code { font-size: 28px; letter-spacing: .3em; text-align: center; max-width: none; width: 100%; }
details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "›"; font-size: 24px; color: var(--stil); transition: transform .2s; }
details[open] > summary::after { transform: rotate(90deg); }
details > summary h2 { margin: 0; }
.adres { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; background: var(--bg);
  border-radius: 8px; padding: 8px; margin: 4px 0 8px; }
ol { padding-left: 20px; margin: 6px 0; } li { margin: 4px 0; }
.label { display: inline-block; font-size: 13px; border-radius: 999px; padding: 2px 10px; background: var(--merk-zacht); color: var(--tekst); }
.label.uit { background: var(--knop); }