:root { --bg:#0d0d0d; --vlak:#161616; --rand:#2e2e2e; --tekst:#f2f2f2; --grijs:#9a9a9a; --accent:#ffffff; --groen:#4caf50; --rood:#e05252; --oranje:#e0a452; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--tekst); font:16px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust:100%; }
a { color:var(--tekst); }
.top { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--rand); position:sticky; top:0; background:var(--bg); z-index:5; padding-top:max(12px, env(safe-area-inset-top)); }
.top .merk { font-weight:700; letter-spacing:.18em; text-decoration:none; font-size:14px; }
.top nav a { color:var(--grijs); text-decoration:none; font-size:13px; margin-left:12px; }
.inhoud { padding:16px; max-width:760px; margin:0 auto; padding-bottom:60px; }
h1 { font-size:22px; margin:0 0 14px; } h2 { font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--grijs); margin:26px 0 10px; }
.kaart { background:var(--vlak); border:1px solid var(--rand); border-radius:8px; padding:14px; margin-bottom:14px; }
label { display:block; font-size:12px; color:var(--grijs); text-transform:uppercase; letter-spacing:.06em; margin:12px 0 4px; }
input[type=text], input[type=password], input[type=url], input[type=number], textarea, select { width:100%; background:#000; border:1px solid var(--rand); color:#fff; padding:12px; font:inherit; border-radius:6px; }
textarea { resize:vertical; min-height:80px; }
input:focus, textarea:focus, select:focus { outline:none; border-color:#666; }
.rij { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.rij > * { flex:1 1 160px; }
.knop { display:inline-block; background:#fff; color:#000; border:1px solid #fff; padding:12px 16px; border-radius:6px; font:inherit; font-weight:600; text-decoration:none; text-align:center; cursor:pointer; min-height:46px; }
.knop.licht { background:transparent; color:#fff; border-color:#555; }
.knop.gevaar { background:transparent; color:var(--rood); border-color:#5a2a2a; }
.knop.klein { padding:8px 10px; min-height:0; font-size:13px; font-weight:500; }
.knop:disabled { opacity:.5; cursor:default; }
.knoppen { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.knoppen .knop { flex:1 1 auto; }
.hint { color:var(--grijs); font-size:13px; margin:6px 0 0; }
.melding { padding:10px 12px; border-radius:6px; margin:10px 0; font-size:14px; }
.melding.ok { background:#163a1a; border:1px solid #2d6b33; } .melding.fout { background:#3a1616; border:1px solid #6b2d2d; white-space:pre-wrap; } .melding.info { background:#1a2838; border:1px solid #2d4a6b; }
.log { background:#000; border:1px solid var(--rand); border-radius:6px; padding:10px; font:13px/1.4 ui-monospace, Menlo, Consolas, monospace; white-space:pre-wrap; max-height:260px; overflow:auto; color:#ccc; }
.log:empty { display:none; }
.bezig { display:inline-block; width:14px; height:14px; border:2px solid #555; border-top-color:#fff; border-radius:50%; animation:draai .8s linear infinite; vertical-align:middle; margin-right:8px; }
@keyframes draai { to { transform:rotate(360deg); } }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
.foto { position:relative; background:#000; border:1px solid var(--rand); border-radius:6px; overflow:hidden; aspect-ratio:4/3; }
.foto img { width:100%; height:100%; object-fit:cover; display:block; }
.foto .nr { position:absolute; top:4px; left:4px; background:rgba(0,0,0,.7); font-size:11px; padding:2px 6px; border-radius:4px; }
.foto .tag { position:absolute; bottom:4px; left:4px; right:4px; background:rgba(224,164,82,.9); color:#000; font-size:10px; padding:2px 4px; border-radius:4px; text-align:center; font-weight:600; }
.foto.gekozen { outline:3px solid #fff; }
.foto.cover .nr { background:#fff; color:#000; }
.lijst a { display:block; padding:14px; background:var(--vlak); border:1px solid var(--rand); border-radius:8px; text-decoration:none; margin-bottom:8px; }
.lijst small { color:var(--grijs); display:block; }
.doc { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--rand); gap:8px; }
.doc:last-child { border-bottom:none; }
.doc .naam { flex:1; } .doc .status { color:var(--grijs); font-size:13px; }
.doc .status.ja { color:var(--groen); }
.keuze { display:flex; gap:6px; }
.keuze label { margin:0; }
.keuze input { display:none; }
.keuze span { display:block; padding:10px; border:1px solid var(--rand); border-radius:6px; text-align:center; color:var(--grijs); font-size:14px; }
.keuze input:checked + span { background:#fff; color:#000; border-color:#fff; }
.vast { position:sticky; bottom:0; background:var(--bg); padding:10px 0 max(10px, env(safe-area-inset-bottom)); border-top:1px solid var(--rand); margin-top:20px; }
.pill { display:inline-block; padding:2px 8px; border-radius:10px; background:#2a2a2a; font-size:12px; color:#ccc; margin-right:6px; }
.pill.ok { background:#1f4a24; color:#b6f0bc; }
code, .code { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; background:#000; padding:2px 6px; border-radius:4px; word-break:break-all; }
.canvas-wrap { position:relative; background:#000; border:1px solid var(--rand); border-radius:6px; overflow:hidden; touch-action:none; }
.canvas-wrap canvas { width:100%; display:block; }
details summary { cursor:pointer; color:var(--grijs); font-size:14px; padding:6px 0; }
label.knop, .keuze span { text-transform:none; letter-spacing:0; font-size:15px; }
label.knop { color:#000; margin:0; }
label.knop.licht { color:#fff; }