:root { --bg:#f7f7f5; --fg:#1d1d1b; --muted:#5d5d58; --card:#fff; --line:#dcdcd6; --accent:#1f5fbf; --ok:#1d7a3a; --bad:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#171716; --fg:#ededea; --muted:#a3a39d; --card:#232321; --line:#3a3a37; --accent:#7aa7ff; --ok:#6fcf8a; --bad:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.5 system-ui,-apple-system,sans-serif; }
main { max-width:560px; margin:0 auto; padding:20px 16px 48px; }
h1 { font-size:1.4rem; margin:0 0 4px; }
.klein { color:var(--muted); font-size:.95rem; margin:6px 0; }
.kaart { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:16px 0; }
pre { font:600 1.2rem/1.5 ui-monospace,Menlo,monospace; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px; margin:8px 0 14px; white-space:pre-wrap; word-break:break-all; }
#sleutel { font-size:.8rem; font-weight:400; }
button { width:100%; font:inherit; font-weight:600; padding:14px; border-radius:10px; border:0; background:var(--accent); color:#fff; cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
.uitslag { margin:10px 0 0; } .ok { color:var(--ok); } .fout { color:var(--bad); }
section { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:16px 0; }
h2 { font-size:1.15rem; margin:0 0 2px; } h3 { font-size:1rem; margin:12px 0 4px; }
section p { margin:4px 0; overflow-wrap:anywhere; } section > p:nth-of-type(1) { color:var(--muted); font-size:.9rem; }
a { color:var(--accent); }