:root{--bg:#f2f7f8;--panel:#ffffff;--ink:#12303f;--muted:#5b7280;--line:#dbe7ea;--accent:#0D4868;--accent2:#30B5AE;--light:#99D3D8;--grad:linear-gradient(120deg,#0D4868,#1b7f96 55%,#30B5AE);--danger:#D92C2C;--warn:#E08A00;--ok:#1E8F6E}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}header.app{background:var(--grad);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}header.app .logo{flex-shrink:0;height:38px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}header.app h1{font-size:17px;font-weight:600;letter-spacing:.3px}header.app .sub{font-size:12px;opacity:.85}header.app .spacer{flex:1 1}header.app .who{font-size:12.5px;opacity:.9;text-align:right}main{padding:16px 18px 60px;max-width:1100px;margin:0 auto}main.narrow{max-width:640px}nav.tabs{display:flex;gap:2px;padding:0 18px;border-bottom:2px solid var(--line);background:var(--bg);flex-wrap:wrap}nav.tabs a{border-radius:7px 7px 0 0;background:#dfeaec;padding:8px 16px;font-size:13.5px;color:var(--ink)}nav.tabs a:hover{text-decoration:none;filter:brightness(.97)}nav.tabs a.active{background:var(--panel);font-weight:600;border-bottom:2px solid var(--panel);margin-bottom:-2px;border-top:3px solid var(--accent2);border-left:1px solid var(--line);border-right:1px solid var(--line)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px;margin-top:14px}.panel h2{font-size:15px;margin-bottom:10px;color:var(--accent)}.note{font-size:12.5px;margin-top:10px;line-height:1.5}.muted,.note{color:var(--muted)}.kpibar{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}.kpi{background:var(--panel);border-radius:8px;padding:10px 16px;min-width:130px;border:1px solid var(--line);border-top:3px solid var(--light);flex:1 1}.kpi .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}.kpi .val{font-size:20px;font-weight:700;margin-top:2px;color:var(--accent)}.kpi.good{border-top-color:var(--accent2)}.kpi.good .val{color:var(--accent2)}.kpi.warn{border-top-color:var(--danger)}.kpi.warn .val{color:var(--danger)}.btn,button{cursor:pointer;border:none;border-radius:6px;padding:9px 16px;font-size:14px;background:#e2edef;color:var(--ink);font-family:inherit;display:inline-block;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.btn:hover,button:hover{filter:brightness(.95);text-decoration:none}.btn:active,button:active{transform:scale(.97)}button:disabled{opacity:.45;cursor:not-allowed}.btn.primary,button.primary{background:var(--accent2);color:#fff;font-weight:600}.btn.dark,button.dark{background:var(--accent);color:#fff}.btn.danger,button.danger{background:#f6dcdc;color:#a12020}.btn.small,button.small{padding:4px 10px;font-size:12.5px}input[type=date],input[type=email],input[type=number],input[type=text],select,textarea{border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);width:100%}label.fld{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--accent)}label.fld span{display:block;margin-bottom:4px}form.inline{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}form.inline label.fld{margin-top:0;flex:1 1;min-width:160px}table.data{border-collapse:collapse;width:100%;background:var(--panel)}table.data td,table.data th{border:1px solid var(--line);padding:6px 9px;text-align:left;font-size:13px}table.data th{background:#e8f2f4;font-weight:600;color:var(--accent)}.tbl-wrap{overflow-x:auto}.chapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:12px;gap:12px;margin-top:14px}.chapcard{background:var(--panel);border-radius:9px;padding:14px;border:1px solid var(--line);border-left:5px solid var(--light);display:flex;flex-direction:column;gap:6px}.chapcard.open{border-left-color:var(--accent2)}.chapcard.dicht{opacity:.62}.chapcard h3{font-size:14.5px;color:var(--accent)}.chapcard .meta{font-size:12.5px;color:var(--muted)}.chapcard .scoreline{font-size:13px}.chapcard .actions{margin-top:auto;padding-top:8px}.badge{display:inline-block;border-radius:10px;padding:1px 9px;font-size:11.5px;font-weight:600}.badge.open{background:#e0f4f2;color:var(--ok)}.badge.dicht{background:#eef1f3;color:var(--muted)}.badge.pog{background:#fdf6ea;color:var(--warn)}.vraagcard{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:16px;margin-top:14px}.vraagcard .qnum{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.vraagcard .qtext{font-size:16px;font-weight:600;margin:6px 0 12px}.vraagcard img.figuur{max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px;margin-bottom:12px;background:#fff}.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:8px;padding:11px 12px;margin-top:8px;cursor:pointer;background:#fbfdfd;font-size:15px;width:100%;text-align:left;font-family:inherit;color:var(--ink);touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:transform .05s ease,background-color .05s ease,border-color .05s ease}.opt:hover{border-color:var(--light)}.opt:active{transform:scale(.985)}.opt.gekozen,.opt:active{background:#e9f7f6;border-color:var(--accent2)}.opt.gekozen{font-weight:600}.opt .letter{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#e2edef;color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}.opt.gekozen .letter{background:var(--accent2);color:#fff}.toetsnav{position:-webkit-sticky;position:sticky;bottom:0;background:var(--bg);padding:12px 0;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);margin-top:16px}.voortgang{flex:1 1;font-size:13px;color:var(--muted)}.progressbar{height:6px;background:#e2edef;border-radius:3px;overflow:hidden;margin-top:4px}.progressbar>div{height:100%;background:var(--accent2);transition:width .2s}.scorehero{background:var(--grad);color:#fff;border-radius:12px;padding:24px;text-align:center;margin-top:14px}.scorehero .groot{font-size:44px;font-weight:800;line-height:1.1}.scorehero .pct{font-size:16px;opacity:.9}.foutitem{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:8px;padding:10px 14px;margin-top:10px;background:#fffdf8;font-size:14px}.foutitem .verwijzing{margin-top:6px;font-size:13px;color:var(--accent);font-weight:600}.lb-rij-1 td{background:#fdf9e8}.medal{font-size:15px}.bar-wrap{display:flex;align-items:center;gap:10px}.bar{height:14px;background:#e2edef;flex:1 1;overflow:hidden;min-width:80px}.bar,.bar>div{border-radius:4px}.bar>div{height:100%}.bar.ok>div{background:var(--accent2)}.bar.warn>div{background:var(--warn)}.bar.bad>div{background:var(--danger)}.icoonkeuze{display:flex;flex-wrap:wrap;gap:6px}.icoonkeuze input{display:none}.icoonkeuze span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:21px;border:2px solid var(--line);border-radius:8px;cursor:pointer;background:#fbfdfd}.icoonkeuze input:checked+span{border-color:var(--accent2);background:#e9f7f6}.loginbox{max-width:420px;margin:8vh auto 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px}.loginbox .logo-wrap{text-align:center;margin-bottom:14px}.loginbox img{height:64px}.loginbox h1{font-size:20px;color:var(--accent);text-align:center;margin-bottom:4px}.loginbox .sub{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:18px}.melding{border-radius:8px;padding:10px 14px;margin-top:12px;font-size:13.5px}.melding.ok{background:#e0f4f2;color:#14584a;border:1px solid #bfe5e1}.melding.fout{background:#fdeaea;color:#8c1d1d;border:1px solid #f3caca}@media (max-width:640px){main{padding:12px 12px 80px}header.app{padding:10px 12px}nav.tabs{padding:0 12px}.kpi{min-width:100px;padding:8px 12px}.kpi .val{font-size:17px}.opt{padding:14px 12px;margin-top:10px}.toetsnav button{min-height:46px;padding:9px 18px;font-size:15px}}