:root{--bg:#0a0a0b;--bg2:#0d0e10;--card:#10141a;--card2:#12161d;--ink:#e9edf1;--soft:#9aa4b0;--mut:#7d8794;--acc:#9fb9d0;--sand:#c3d2e0;--sand3:#7e9ab5;--line:rgba(233,237,241,.1);--line2:rgba(233,237,241,.22);--sil:rgba(255,255,255,.05);--btnink:#0b0b0d;--beam:195,210,224;--beam2:126,154,181;--hotcol:233,240,247;color-scheme:dark}
html[data-mode=light]{--bg:#f6f8fa;--bg2:#eef2f6;--card:#ffffff;--card2:#f2f5f8;--ink:#0c1420;--soft:#46556a;--mut:#5c6b80;--acc:#2e5d8a;--sand:#142e47;--sand3:#3f6c97;--line:rgba(12,20,32,.13);--line2:rgba(12,20,32,.24);--sil:#e7edf4;--btnink:#ffffff;--beam:20,46,71;--beam2:63,108,151;--hotcol:16,32,52;color-scheme:light}
html{background:var(--bg)}
body{background:transparent;transition:background-color .35s,color .35s}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px 380px at 12% -10%,rgba(var(--beam),.14),transparent 58%),radial-gradient(580px 360px at 88% 108%,rgba(var(--beam2),.12),transparent 58%)}
.grad{background:linear-gradient(92deg,var(--sand),var(--sand3));-webkit-background-clip:text;background-clip:text;color:transparent}
.pwsend .pill{background:linear-gradient(92deg,var(--sand),var(--sand3));color:var(--btnink);border:0;box-shadow:0 12px 30px rgba(var(--beam),.22)}
html[data-mode=light] .pwsend .pill{box-shadow:0 14px 30px rgba(16,35,56,.18)}
#exNum,#exLow,#exHigh,#exHrSaved{background:linear-gradient(92deg,var(--sand),var(--sand3));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-mode=light] .ex-panel{box-shadow:0 14px 34px rgba(16,35,56,.08)}
.mode-btn{font:inherit;width:38px;height:38px;border-radius:999px;border:1px solid var(--line2);background:var(--sil);color:var(--ink);cursor:pointer;display:inline-grid;place-items:center;font-size:15px;line-height:1}
.mode-btn:hover{border-color:var(--acc)}
@media (prefers-reduced-motion: reduce){body{transition:none}}


/* ── Taalwissel (globe · NL actief, EN/DE binnenkort) ── */
.lngw{position:relative;display:inline-flex}
.lngb{height:34px;border-radius:100px;border:1px solid var(--line2);background:var(--sil);display:inline-flex;align-items:center;gap:7px;padding:0 12px;cursor:pointer;color:var(--ink);transition:border-color .2s;font:inherit}
.lngb:hover{border-color:var(--acc)}
.lngb svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lngc{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.06em}
.lngd{position:absolute;top:calc(100% + 10px);right:0;min-width:190px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s;z-index:95;box-shadow:0 18px 38px rgba(0,0,0,.28)}
html[data-mode="light"] .lngd{box-shadow:0 18px 38px rgba(16,35,56,.16)}
.lngw.open .lngd{opacity:1;visibility:visible;transform:none}
.lngo{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--soft);font-size:13px;font-weight:500}
.lngo b{font-family:"Space Mono",monospace;font-size:10.5px;color:var(--mut);width:22px;font-weight:400}
.lngo.on{color:var(--ink)}
.lngo.on b{color:var(--acc)}
.lngk{margin-left:auto;color:var(--acc);font-style:normal}
.lngs{margin-left:auto;font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.08em;color:var(--mut);text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:3px 8px;font-style:normal}
.lngo.dis{opacity:.55}
@media (prefers-reduced-motion: reduce){.lngd{transition:none}}