:root{
  --bg:#f3f6f6; --surface:#ffffff; --surface-2:#eef2f1;
  --fg:#16211f; --muted:#5c6b6a; --line:#dce3e2;
  --accent:#5f8d4e; --accent-soft:rgba(95,141,78,.12);
  --good:#3f7d5c; --warn:#a9762a; --risk:#b25138;
  --good-soft:rgba(63,125,92,.12); --warn-soft:rgba(169,118,42,.14); --risk-soft:rgba(178,81,56,.12);
  --disc-rood:#d1495b; --disc-geel:#c6900a; --disc-groen:#3f9d57; --disc-blauw:#2f6fd0;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --maxw:46rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1514; --surface:#161d1c; --surface-2:#1b2322;
  --fg:#e6edec; --muted:#95a5a3; --line:#273130;
  --accent:#9ccb7a; --accent-soft:rgba(156,203,122,.16);
  --good:#6fb58c; --warn:#d6a24f; --risk:#d97c60;
  --good-soft:rgba(111,181,140,.15); --warn-soft:rgba(214,162,79,.16); --risk-soft:rgba(217,124,96,.15);
  --disc-rood:#e2697a; --disc-geel:#e0b03a; --disc-groen:#5fb87a; --disc-blauw:#5b8fe0;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.55;font-size:1rem;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:500;text-wrap:balance;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:var(--accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:2.4rem 4rem}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
header{border-bottom:1px solid var(--line);padding-bottom:1.6rem;margin-bottom:2rem}
h1{font-size:clamp(1.9rem,6vw,2.7rem);line-height:1.05;margin:.5rem 0 .7rem}
.lede{color:var(--muted);max-width:34rem;font-size:1.02rem}
.how{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.how span{font-family:var(--mono);font-size:.72rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem;margin-bottom:1.6rem}
.gmsg{font-size:.85rem;min-height:1.1em;color:var(--muted)}
.gmsg.bad{color:var(--risk)}
.privacy{font-size:.82rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;line-height:1.55;margin:.4rem 0}
.privacy b{color:var(--fg)}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:.35rem .8rem;margin-bottom:.8rem}
.badge b{text-transform:uppercase;letter-spacing:.08em}

.legend{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem;font-size:.82rem;color:var(--muted);line-height:1.6}
.legend b{color:var(--fg)}
.legend .scaleline{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.4rem;font-family:var(--mono);font-size:.74rem}
.legend .num{color:var(--accent);font-weight:600}
.help{border:1px solid var(--accent);background:var(--accent-soft);border-radius:12px;padding:.9rem 1rem;margin-bottom:.6rem;font-size:.88rem;line-height:1.55}
.help b{color:var(--accent)}

.dim{border-top:1px solid var(--line);padding-top:1.6rem;margin-top:1.6rem}
.dim-head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.2rem}
.code{font-family:var(--mono);font-size:.8rem;color:var(--accent);font-weight:500}
.dim h2{font-size:1.25rem}
.dim .sub{color:var(--muted);font-size:.85rem;margin:.25rem 0 1.1rem}
.item{margin-bottom:1.6rem}
.item .stmt{font-size:.98rem;margin-bottom:.3rem}
.voorbeeld{font-size:.82rem;color:var(--muted);margin-bottom:.6rem;line-height:1.45}
.voorbeeld b{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-right:.3rem}
.scalewrap{display:flex;align-items:center;gap:.55rem;max-width:30rem}
.anchor{font-size:.72rem;color:var(--muted);flex:none;line-height:1.1;text-align:center;width:3.3rem}
.scale{display:flex;gap:.4rem;flex:1;min-width:0}
.scale input{position:absolute;opacity:0;width:0;height:0}
.scale label{flex:1;min-width:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.85rem;color:var(--muted);background:var(--surface);border:1.5px solid var(--line);border-radius:50%;cursor:pointer;transition:all .13s ease;user-select:none}
.scale label:hover{border-color:var(--accent);color:var(--fg)}
.scale input:checked+label{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
@media (prefers-color-scheme:dark){.scale input:checked+label{color:#0f1514}}
.scale input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.note{margin-top:.8rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;max-width:34rem}
@media (max-width:560px){.note{grid-template-columns:1fr}}
.note label{display:grid;gap:.3rem;font-size:.76rem;color:var(--muted);font-weight:600}
.note label span{font-weight:400}
textarea,input[type=text],input[type=password],input[type=number],select{font-family:var(--body);font-size:.95rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:.6rem .7rem;width:100%}
.note textarea{font-size:.9rem;min-height:2.6rem;line-height:1.45;resize:vertical}
textarea:focus,input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}

.actions{position:sticky;bottom:0;margin-top:2.4rem;padding:1rem 0 calc(.6rem + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 72%,transparent);display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.count{font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.btn{font-family:var(--body);font-weight:600;font-size:.95rem;border-radius:10px;padding:.7rem 1.3rem;border:1.5px solid var(--accent);cursor:pointer;transition:all .13s ease;background:transparent;color:var(--accent)}
.btn.primary{background:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.btn.primary{color:#0f1514}}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.fld{display:grid;gap:.4rem;font-size:.85rem;color:var(--muted);margin-bottom:.8rem}
.fld .lbl{font-weight:600;color:var(--fg);font-size:.9rem}

#result{margin-top:2rem;scroll-margin-top:1rem}
.empty{border:1px dashed var(--line);border-radius:14px;padding:1.6rem;text-align:center;color:var(--muted);background:var(--surface)}
.empty .eyebrow{display:block;margin-bottom:.5rem}
.err{border:1px solid var(--risk);background:var(--risk-soft);border-radius:12px;padding:1rem 1.1rem;font-size:.92rem}
.ok{border:1px solid var(--good);background:var(--good-soft);border-radius:12px;padding:1rem 1.1rem;font-size:.92rem}
.report{display:grid;gap:1.5rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.3rem}
.panel h3{font-size:.76rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem;font-weight:500}
.beeld{font-family:var(--display);font-size:1.18rem;line-height:1.45}
.profile{display:grid;gap:.7rem}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:.4rem .8rem;align-items:center}
.bar-row .name{font-size:.86rem}
.bar-row .val{font-family:var(--mono);font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.track{grid-column:1/-1;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.fill{height:100%;border-radius:999px}
.theme{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;display:grid;gap:.55rem}
.theme-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.theme-head .tname{font-family:var(--display);font-size:1.08rem;font-weight:500}
.chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;font-weight:600}
.chip.sterk{background:var(--good-soft);color:var(--good)}
.chip.aandacht{background:var(--warn-soft);color:var(--warn)}
.chip.kwetsbaar{background:var(--risk-soft);color:var(--risk)}
.theme .obs{font-size:.93rem;color:var(--muted)}
.theme .tip{font-size:.92rem;padding-left:1.2rem;position:relative}
.theme .tip::before{content:"\2192";position:absolute;left:0;color:var(--accent);font-weight:600}
.cta{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.2rem;display:grid;gap:.7rem}
.cta h3{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500}
.cta p{font-size:.9rem;color:var(--muted)}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:.2rem 0 1rem;flex-wrap:wrap}
.seg button{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;background:transparent;color:var(--muted);border:none;padding:.4rem .9rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.seg button[aria-pressed="true"]{color:#0f1514}}
.quotes{display:grid;gap:.8rem;margin-top:.4rem}
.q{border-left:2px solid var(--line);padding-left:.8rem;font-size:.9rem}
.q .role{font-family:var(--mono);font-size:.68rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem}
.gen textarea{font-family:var(--mono);font-size:.8rem;min-height:5rem}
.listrow{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;margin-bottom:.5rem}
.listrow .meta{font-size:.8rem;color:var(--muted)}
.listrow.active{border-color:var(--accent);background:var(--accent-soft)}
footer{margin-top:2.5rem;font-size:.78rem;color:var(--muted);text-align:center;line-height:1.5}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* Focado-merk */
.brand{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem}
.brand .logo{width:2.1rem;height:2.1rem;flex:none}
.brand .name{font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;color:var(--fg)}
.brand .name b{color:var(--accent);font-weight:600}
/* Grote code-invoer op de startpagina */
.codewrap{display:flex;flex-direction:column;align-items:center;gap:1rem;margin:1.6rem 0 .4rem}
.codebig{font-family:var(--mono);font-size:clamp(1.6rem,7vw,2.2rem);font-weight:500;letter-spacing:.22em;text-transform:uppercase;text-align:center;width:min(100%,18rem);padding:1rem 1.1rem;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--fg)}
.codebig::placeholder{letter-spacing:.1em;color:var(--muted);opacity:.7}
.codebig:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.btn.big{font-size:1.05rem;padding:.85rem 2.2rem;border-radius:14px}
.gate-hero{text-align:center}

/* DISC-kleurentest */
.disc-block .code{color:var(--fg)}
.disc-dot{display:inline-block;width:1.5rem;height:1.5rem;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.disc-dot.sm{width:.8rem;height:.8rem;vertical-align:middle;margin-right:.45rem}
.disc-result .disc-head{display:flex;align-items:center;gap:.8rem}
.disc-result .disc-name{font-family:var(--display);font-size:1.3rem;font-weight:500}
.disc-result p b{color:var(--fg)}

/* Teamblik (hoe zie je dit in het team?) */
.teamblik{margin-top:1.2rem;padding-left:.9rem;border-left:2px solid var(--accent-soft)}
.teamblik-head{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.team-item{margin-bottom:1.2rem}

/* Kleur-interactiematrix (portaal) */
.matrix-wrap{overflow-x:auto;margin-top:.6rem}
.matrix{border-collapse:collapse;font-size:.82rem;min-width:22rem}
.matrix th,.matrix td{border:1px solid var(--line);padding:.45rem .55rem;text-align:center;font-variant-numeric:tabular-nums}
.matrix th{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--muted);white-space:nowrap}
.matrix td.rowhead{text-align:left;font-weight:600;white-space:nowrap}
.matrix .na{color:var(--muted)}
.gap{font-family:var(--mono);font-size:.74rem}
.gap.pos{color:var(--good)} .gap.neg{color:var(--risk)}