[hidden] { display:none !important; }
:root { --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --purple:#6d28d9; --purple-deep:#4c1d95; --purple-light:#7c3aed; --lav:#f3f0ff; --lav-soft:#faf7ff; --ok:#047857; --warn:#b45309; --bad:#b91c1c; --pink:#db2777; }
* { box-sizing:border-box; }
html, body { margin:0; background:#fbfaff; color:var(--ink); font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size:16px; line-height:1.45; }
main { max-width:1180px; margin:0 auto; padding:0 20px 40px; }
h2 { font-size:1.25rem; margin:0 0 6px; color:var(--purple-deep); display:flex; align-items:center; gap:10px; }
.stap { display:inline-flex; width:30px; height:30px; border-radius:50%; background:var(--purple); color:#fff; align-items:center; justify-content:center; font-size:.95rem; }
.kop { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; border-bottom:1px solid var(--line); background:#fff; }
.merk .naam { font-size:1.6rem; font-weight:800; color:var(--purple-deep); letter-spacing:.5px; margin-right:12px; }
.merk .sub { color:var(--muted); }
.civai { font-weight:700; color:var(--purple); }
.banner { max-width:1180px; margin:18px auto 10px; padding:16px 20px; border-radius:14px; background:linear-gradient(135deg, var(--purple-deep), var(--purple-light)); color:#fff; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
.banner .label { display:block; font-size:.8rem; opacity:.85; text-transform:uppercase; letter-spacing:1px; }
.omgeving-knoppen { display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.omgeving-knoppen button { font-size:1.15rem; padding:10px 18px; border-radius:10px; border:2px solid rgba(255,255,255,.6); background:transparent; color:#fff; cursor:pointer; font-weight:600; }
.omgeving-knoppen button.actief { background:#fff; color:var(--purple-deep); border-color:#fff; }
.omgeving-knoppen button:disabled { opacity:.45; cursor:not-allowed; }
.banner-status { display:flex; gap:10px; flex-wrap:wrap; }
.pil { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); padding:8px 12px; border-radius:999px; font-size:1rem; font-weight:600; }
.pil .dot { width:12px; height:12px; border-radius:50%; background:#cbd5e1; }
.pil.ok .dot { background:#4ade80; } .pil.nee .dot { background:#f87171; } .pil.wacht .dot { background:#fbbf24; }
.blok { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:16px 0; }
details.blok summary { list-style:none; cursor:pointer; } details.blok summary::-webkit-details-marker { display:none; }
details.blok summary h2::after { content:"▾"; margin-left:auto; color:var(--muted); } details.blok:not([open]) summary h2::after { content:"▸"; }
.uitleg-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:12px; }
.uitleg-kaart { background:var(--lav); border-left:4px solid var(--purple); border-radius:8px; padding:12px 14px; }
.uitleg-kaart b { display:block; color:var(--purple-deep); margin-bottom:4px; }
.tip { color:var(--muted); margin:4px 0 12px; }
.klein { font-size:.9rem; color:var(--muted); }
.drop { border:2px dashed #c4b5fd; border-radius:12px; padding:22px; text-align:center; background:var(--lav-soft); }
.drop.over { background:var(--lav); border-color:var(--purple); }
.link { background:none; border:none; color:var(--purple); text-decoration:underline; cursor:pointer; font-size:1rem; padding:0; }
.bestanden { list-style:none; padding:0; margin:10px 0; display:flex; flex-wrap:wrap; gap:8px; }
.bestanden li { background:var(--lav); border-radius:8px; padding:6px 10px; font-size:.92rem; display:flex; gap:8px; align-items:center; }
.bestanden button { border:none; background:none; color:var(--bad); cursor:pointer; font-size:1rem; }
.rij { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.knop { padding:10px 18px; border-radius:10px; border:1px solid var(--purple); background:#fff; color:var(--purple-deep); font-weight:600; cursor:pointer; font-size:1rem; }
.knop.primair { background:var(--purple); color:#fff; }
.knop:disabled { opacity:.5; cursor:not-allowed; }
.kaarten { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px; }
.kaart { border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff; }
.kaart img { width:100%; border-radius:8px; border:1px solid var(--line); background:#f8fafc; }
.kaart .meta { font-size:.85rem; color:var(--muted); margin-top:6px; display:flex; flex-wrap:wrap; gap:8px 14px; }
.kaart select, .kaart textarea, .controle textarea, .kopvelden input { width:100%; font:inherit; border:1px solid var(--line); border-radius:8px; padding:8px; margin-top:6px; }
.kaart textarea, .controle textarea { min-height:84px; resize:vertical; }
.kaart .onderdeel b { font-size:.9rem; color:var(--purple-deep); }
.twijfel { display:inline-block; background:#fef3c7; color:#92400e; border-radius:6px; padding:1px 6px; margin:2px 4px 0 0; font-size:.85rem; }
.fout { color:var(--bad); font-weight:600; }
.kopvelden { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; margin-bottom:12px; }
.kopvelden label { font-size:.85rem; color:var(--muted); }
.runs-meta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.run-meta { flex:1; min-width:260px; background:var(--lav); border-radius:10px; padding:10px 12px; font-size:.92rem; }
.run-meta b { color:var(--purple-deep); }
.bundel .pagina { font-size:.85rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:14px 0 6px; }
.vak { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.vak h3 { margin:0 0 6px; font-size:1rem; color:var(--purple-deep); }
.vak .kolommen { display:grid; grid-template-columns:1fr; gap:10px; }
.vak .kolommen.twee { grid-template-columns:1fr 1fr; }
.vak .kolom .bron { font-size:.8rem; color:var(--muted); margin-bottom:2px; }
.vak .tekst { white-space:pre-wrap; }
.vak .leeg { color:#94a3b8; font-style:italic; }
mark.diff { background:#fde68a; border-radius:3px; padding:0 2px; }
.controle .vak label { display:block; font-size:.85rem; color:var(--muted); margin-top:6px; }
.scores table { border-collapse:collapse; margin-top:12px; width:100%; }
.scores th, .scores td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; }
.scores th { background:var(--lav); color:var(--purple-deep); }
.scores .ok { color:var(--ok); font-weight:700; } .scores .warn { color:var(--warn); font-weight:700; } .scores .bad { color:var(--bad); font-weight:700; }
.zorgned { margin-top:12px; display:grid; grid-template-columns:1fr; gap:6px; }
.zorgned .veld { display:grid; grid-template-columns:260px 1fr auto; gap:10px; align-items:start; border-bottom:1px solid var(--line); padding:6px 0; font-size:.95rem; }
.zorgned .veld .naam { color:var(--purple-deep); font-weight:600; }
.zorgned .veld .waarde { white-space:pre-wrap; color:var(--ink); }
.zorgned .veld .waarde.leeg { color:#94a3b8; font-style:italic; }
.voet { text-align:center; color:var(--muted); font-size:.9rem; padding:20px; }
.overlay[hidden] { display:none; }
.overlay { position:fixed; inset:0; background:rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center; z-index:10; }
.login { width:min(420px, 92vw); text-align:center; }
.login input { width:100%; font:inherit; padding:10px; border:1px solid var(--line); border-radius:8px; margin:10px 0; }
@media (max-width:760px) { .vak .kolommen.twee { grid-template-columns:1fr; } .zorgned .veld { grid-template-columns:1fr; } .kop { flex-direction:column; align-items:flex-start; gap:6px; } }