:root{
  --hl-blue:#0d2e4e; --hl-blue-2:#16456e; --hl-blue-3:#0a2540;
  --hl-green:#148C4E; --hl-green-dark:#0f6e3d; --hl-green-soft:#e4f3ea;
  --tint:#eef2f6; --line:#1d3e5e; --line-soft:#dde4ec;
  --text:#1f2d3d; --mute:#7c8a9c; --warn:#b3261e; --warn-soft:#fdeceb;
  --radius:14px; --mono:'IBM Plex Mono',ui-monospace,monospace; --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--body);color:var(--text);background:var(--tint);-webkit-font-smoothing:antialiased}
a{color:var(--hl-blue-2)}
button,input,select,textarea{font-family:inherit}
.mono{font-family:var(--mono)}

/* logo */
.logo{display:flex;align-items:center;gap:10px}
.logo .glyph{width:38px;height:38px;border-radius:10px;flex:0 0 auto;background:var(--hl-green);display:grid;place-items:center;position:relative;overflow:hidden}
.logo .glyph::after{content:"";position:absolute;right:-8px;bottom:-8px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22)}
.logo .glyph svg{width:20px;height:20px;position:relative;z-index:1;stroke:#fff}
.logo .l1{font-weight:800;font-size:15px;letter-spacing:-.2px;line-height:1;color:var(--hl-blue)}
.logo .l2{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hl-green-dark);margin-top:3px}

/* gecentreerde kaart (login / invite) */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(900px 600px at 12% -10%,#16456e 0,transparent 58%),radial-gradient(600px 500px at 112% 118%,#12527a 0,transparent 52%),var(--hl-blue-3)}
.card{width:100%;max-width:420px;background:#fff;border-radius:20px;padding:32px 30px 28px;box-shadow:0 30px 70px -28px rgba(0,0,0,.65)}
.card h1{font-weight:700;font-size:21px;color:var(--hl-blue);margin:22px 0 4px;letter-spacing:-.3px}
.card .hint{font-size:13px;color:#62707f;margin:0 0 22px;line-height:1.45}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#7b8696;margin-bottom:6px}
.field input{width:100%;padding:12px 13px;border:1px solid #d7dde5;border-radius:10px;font-size:15px;background:#fff;color:var(--hl-blue);outline:none;transition:.15s}
.field input:focus{border-color:var(--hl-blue);box-shadow:0 0 0 3px rgba(13,46,78,.1)}
.btn{width:100%;margin-top:8px;padding:13px;border:none;border-radius:10px;background:var(--hl-blue);color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--hl-blue-2)}
.btn.green{background:var(--hl-green)}.btn.green:hover{background:var(--hl-green-dark)}
.err{background:var(--warn-soft);color:var(--warn);border:1px solid #f3c9c6;border-radius:10px;padding:11px 13px;font-size:13px;margin-bottom:16px}
.ok{background:var(--hl-green-soft);color:var(--hl-green-dark);border:1px solid #bfe0cc;border-radius:10px;padding:11px 13px;font-size:13px;margin-bottom:16px}
.auth-tag{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--hl-green-dark)}
.foot{margin-top:18px;text-align:center;font-size:11px;color:#9aa6b5;font-family:var(--mono)}

/* topbar voor ingelogde paginas */
.topbar{display:flex;align-items:center;gap:14px;padding:11px 18px;background:var(--hl-blue);color:#fff;border-bottom:3px solid var(--hl-green);padding-top:max(11px,env(safe-area-inset-top))}
.topbar .logo .l1{color:#fff}.topbar .logo .l2{color:#5cc189}
.topbar .logo .glyph{width:34px;height:34px}
.topbar .spacer{flex:1}
.topbar a.nav{color:#cdd9e6;text-decoration:none;font-size:13px;font-weight:600;padding:7px 11px;border-radius:9px}
.topbar a.nav:hover{background:var(--hl-blue-2);color:#fff}
.userchip{display:flex;align-items:center;gap:9px;background:var(--hl-blue-2);border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px}
.userchip .un{font-size:12.5px;font-weight:600;line-height:1.1}
.userchip .ue{font-family:var(--mono);font-size:9.5px;color:#9bb0c6}
.userchip .av{width:30px;height:30px;border-radius:50%;background:var(--hl-green);display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff}

.wrap{max-width:1080px;margin:0 auto;padding:24px 18px 60px}
.h2{font-weight:800;font-size:20px;color:var(--hl-blue);margin:6px 0 14px;letter-spacing:-.3px}

/* verslagenlijst */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.vcard{display:block;text-decoration:none;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:18px;transition:.12s;color:inherit}
.vcard:hover{border-color:var(--hl-green);box-shadow:0 12px 30px -18px rgba(13,46,78,.3)}
.vcard .t{font-weight:700;font-size:15px;color:var(--hl-blue);line-height:1.3}
.vcard .m{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.03em;padding:3px 9px;border-radius:999px;font-weight:500}
.pill.fractie{background:#e7eef6;color:var(--hl-blue-2)} .pill.steun{background:var(--hl-green-soft);color:var(--hl-green-dark)}
.pill.ok{background:var(--hl-green-soft);color:var(--hl-green-dark)} .pill.off{background:#fdeceb;color:var(--warn)}
.pill.concept{background:#eef2f6;color:#56657a}.pill.vastgesteld{background:var(--hl-green-soft);color:var(--hl-green-dark)}.pill.vertrouwelijk{background:#fdeceb;color:var(--warn)}

/* reader */
.reader-bar{display:flex;align-items:center;gap:12px;padding:11px 18px;background:#fff;border-bottom:1px solid var(--line-soft)}
.reader-bar .rt{font-weight:700;font-size:15px;color:var(--hl-blue)}
.reader-bar .spacer{flex:1}
.badge-conf{display:inline-flex;align-items:center;gap:6px;background:var(--warn-soft);color:var(--warn);border:1px solid #f3c9c6;border-radius:999px;padding:5px 11px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.stage{padding:26px 18px 60px;display:flex;justify-content:center}
.doc-wrap{position:relative;width:100%;max-width:760px}
.watermark{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:var(--radius);overflow:hidden;background-repeat:repeat;mix-blend-mode:multiply;opacity:.92}
.doc{position:relative;z-index:1;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:0 24px 50px -28px rgba(13,46,78,.4);padding:46px 50px 56px;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
.doc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--radius) 0 0 var(--radius);background:linear-gradient(var(--hl-blue),var(--hl-green))}
.doc h1,.doc h2{color:var(--hl-blue)} .doc h2{font-size:22px;font-weight:800;margin:.2em 0 .3em}
.doc h3{font-weight:700;font-size:15px;color:var(--hl-blue);border-bottom:1px solid #e6ebf1;padding-bottom:6px;margin:1.4em 0 .5em}
.doc p,.doc li{font-size:14.5px;line-height:1.62;color:#34404f}

/* flash + alert + toast (viewer) */
#flash{position:fixed;inset:0;z-index:58;background:var(--hl-blue);opacity:0;pointer-events:none;transition:opacity .05s}#flash.on{opacity:1}
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);background:var(--hl-blue);color:#fff;padding:12px 16px;border-radius:11px;font-size:13px;font-weight:500;box-shadow:0 16px 40px -14px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.22s;z-index:60;max-width:calc(100% - 32px)}#toast.show{opacity:1;transform:translate(-50%,0)}
#salert{position:fixed;inset:0;z-index:62;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,37,64,.55);backdrop-filter:blur(4px)}#salert.on{display:flex}
#salert .box{width:100%;max-width:400px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
#salert .hd{background:var(--warn);color:#fff;padding:18px 22px;font-weight:800;font-size:16px}
#salert .bd{padding:20px 22px 22px}#salert .bd p{font-size:13.5px;color:#3a4756;line-height:1.5;margin:0 0 16px}
#salert .ok2{width:100%;padding:12px;border:none;border-radius:10px;background:var(--hl-blue);color:#fff;font-weight:700;font-size:14px;cursor:pointer}

/* tabel (admin) */
.panel{background:#fff;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;margin-bottom:18px}
.panel .ph{padding:14px 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px}
.panel .ph h2{font-size:14px;font-weight:700;color:var(--hl-blue);margin:0}.panel .ph .spacer{flex:1}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:500;padding:11px 18px;border-bottom:1px solid var(--line-soft);background:#fafbfc}
td{padding:12px 18px;font-size:13px;border-bottom:1px solid #eef1f5;color:#33414f;vertical-align:middle}
tr:last-child td{border-bottom:none}
.nm{font-weight:600;color:var(--hl-blue)}.em{font-family:var(--mono);font-size:11px;color:var(--mute)}
.mini{background:#fff;border:1px solid var(--line-soft);border-radius:8px;font-size:11.5px;font-weight:600;color:var(--hl-blue);padding:6px 11px;cursor:pointer;text-decoration:none;display:inline-block}
.mini:hover{border-color:var(--hl-blue)}.mini.danger{color:var(--warn)}.mini.danger:hover{border-color:var(--warn)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tab{text-decoration:none;font-size:13px;font-weight:600;color:var(--mute);padding:8px 14px;border-radius:10px;border:1px solid var(--line-soft);background:#fff}
.tab.active{background:var(--hl-blue);color:#fff;border-color:var(--hl-blue)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.stat .v{font-weight:800;font-size:28px;color:var(--hl-blue);margin-top:6px}.stat .v.warn{color:var(--warn)}
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:14px 18px}
.form-row .f{flex:1;min-width:160px}
.form-row label{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin-bottom:5px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:10px 12px;border:1px solid var(--line-soft);border-radius:9px;font-size:14px;color:var(--hl-blue)}
.copybox{display:flex;gap:8px;align-items:center;background:#f4f7fb;border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;margin-top:8px}
.copybox code{font-family:var(--mono);font-size:12px;color:var(--hl-blue);word-break:break-all;flex:1}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.doc{padding:30px 22px 40px}.stage{padding:16px 12px 40px}table{display:block;overflow-x:auto;white-space:nowrap}}