:root {
  --zc-lijf: #0a0b0d;
  --zc-paneel: #111214;
  --zc-kaart: #17181b;
  --zc-knop: #232529;
  --zc-knop-op: #2c2e33;
  --zc-rand: rgba(255, 255, 255, 0.07);
  --zc-rand-op: rgba(255, 255, 255, 0.14);
  --zc-inkt: #ffffff;
  --zc-gedempt: #a3a5ab;
  --zc-zwak: #6a6c72;
  --zc-accent: #4b8dff;
  --zc-accent-op: #6aa1ff;
  --zc-accent-zacht: rgba(75, 141, 255, 0.12);
  --zc-goed: #4ec98a;
  --zc-let: #e2b14f;
  --zc-gevaar: #e56a6a;
  --zc-r-groot: 14px;
  --zc-r: 10px;
  --zc-r-klein: 8px;
  --zc-schaduw: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 70px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  --zc-letter: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --zc-mono: "JetBrains Mono", Consolas, monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--zc-lijf);
  color: var(--zc-inkt);
  font-family: var(--zc-letter);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.zc-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  background: var(--zc-knop); border: 1px solid var(--zc-rand); border-radius: var(--zc-r);
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.zc-knop:hover { background: var(--zc-knop-op); border-color: var(--zc-rand-op); }
.zc-knop:active { transform: translateY(1px); }
.zc-knop svg { width: 18px; height: 18px; }
.zc-knop.hoofd { background: var(--zc-accent); border-color: transparent; color: #fff; }
.zc-knop.hoofd:hover { background: var(--zc-accent-op); }
.zc-knop.groot { min-height: 52px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
.zc-knop.gevaar { color: var(--zc-gevaar); }
.zc-knop.stil { background: transparent; border-color: transparent; color: var(--zc-gedempt); }
.zc-knop.stil:hover { color: var(--zc-inkt); background: var(--zc-kaart); }
.zc-knop[disabled] { opacity: .45; pointer-events: none; }

.zc-veld {
  width: 100%; min-height: 44px; padding: 0 14px;
  background: var(--zc-lijf); border: 1px solid var(--zc-rand); border-radius: var(--zc-r-klein);
  outline: none; transition: border-color .15s;
}
.zc-veld:focus { border-color: var(--zc-accent); }
textarea.zc-veld { padding: 12px 14px; min-height: 120px; resize: vertical; }
.zc-label { display: block; font-size: 13px; color: var(--zc-gedempt); margin-bottom: 6px; font-weight: 500; }

.zc-kaart {
  background: var(--zc-paneel); border: 1px solid var(--zc-rand); border-radius: var(--zc-r-groot);
}

.zc-merkje {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--zc-knop); color: var(--zc-gedempt);
}
.zc-merkje.accent { background: var(--zc-accent-zacht); color: var(--zc-accent-op); }
.zc-merkje.goed { background: rgba(78, 201, 138, .12); color: var(--zc-goed); }

.zc-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--zc-zwak); flex: none; }
.zc-stip.aan { background: var(--zc-goed); box-shadow: 0 0 0 3px rgba(78, 201, 138, .15); }

.zc-melding {
  padding: 12px 14px; border-radius: var(--zc-r-klein); font-size: 14px;
  background: var(--zc-kaart); border: 1px solid var(--zc-rand);
}
.zc-melding.fout { border-color: rgba(229, 106, 106, .35); color: #f2b2b2; }
.zc-melding.goed { border-color: rgba(78, 201, 138, .35); color: #a9e8c8; }

.zc-schakel { position: relative; width: 42px; height: 24px; flex: none; }
.zc-schakel input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.zc-schakel span {
  position: absolute; inset: 0; border-radius: 999px; background: var(--zc-knop);
  border: 1px solid var(--zc-rand); transition: background .15s;
}
.zc-schakel span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--zc-gedempt); transition: transform .15s, background .15s;
}
.zc-schakel input:checked + span { background: var(--zc-accent); border-color: transparent; }
.zc-schakel input:checked + span::after { transform: translateX(18px); background: #fff; }