:root { --bg: #f5f4f0; --fg: #1d1d1b; --kaart: #fff; --lijn: #dcdad3; --rood: #b3261e; --groen: #1e7d3c; --zacht: #5f5e58; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg: #171715; --fg: #eeede8; --kaart: #24241f; --lijn: #3a3a33; --rood: #f2726a; --groen: #6fce8f; --zacht: #a8a79e; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 8px 0 16px; }
h2 { font-size: 17px; margin: 0 0 8px; }
.blok { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.rood { border-left: 5px solid var(--rood); } .groen { border-left: 5px solid var(--groen); }
.klein { color: var(--zacht); font-size: 14px; margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; } th, td { padding: 6px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--lijn); font-size: 15px; }
tr:first-child th, tr:first-child td { border-top: 0; } th { font-weight: 500; color: var(--zacht); padding-right: 12px; } td { overflow-wrap: anywhere; }
code { font-size: 14px; } ul { margin: 0; padding-left: 18px; } time { color: var(--zacht); font-size: 14px; }
.ok { color: var(--groen); font-weight: 600; } .nee { color: var(--rood); font-weight: 600; }
button { background: var(--fg); color: var(--bg); border: 0; border-radius: 8px; padding: 12px 18px; font-size: 16px; margin-top: 8px; width: 100%; }
button.stil { background: transparent; color: var(--zacht); border: 1px solid var(--lijn); }
input { display: block; width: 100%; padding: 10px; font-size: 16px; margin-top: 4px; border: 1px solid var(--lijn); border-radius: 6px; background: var(--bg); color: var(--fg); }
label { display: block; margin: 8px 0; font-size: 14px; color: var(--zacht); }
h3 { font-size: 14px; color: var(--zacht); margin: 10px 0 2px; font-weight: 600; }
select { display: block; width: 100%; padding: 10px; font-size: 16px; margin-top: 4px; border: 1px solid var(--lijn); border-radius: 6px; background: var(--bg); color: var(--fg); }
pre { background: var(--bg); border: 1px solid var(--lijn); border-radius: 6px; padding: 8px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.knoppen { display: flex; gap: 8px; }