*{box-sizing:border-box;margin:0;padding:0}
/* ── SPLASH SCREEN ────────────────────────────────────── */
#splash-screen{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#f5f6fa;transition:opacity .45s ease}
html.dark #splash-screen{background:#0f1118}
@media(prefers-color-scheme:dark){#splash-screen{background:#0f1118}}
#splash-screen.spl-out{opacity:0;pointer-events:none}
.spl-icon{width:96px;height:96px;border-radius:22px;box-shadow:0 8px 32px rgba(0,0,0,.18);animation:splPop .5s cubic-bezier(.34,1.56,.64,1) both}
.spl-word{font-family:'Bricolage Grotesque','Inter',sans-serif;font-size:30px;font-weight:900;letter-spacing:-.5px;color:#1a1d26;animation:splFade .5s .15s both}
html.dark .spl-word{color:#f0f0f0}
@media(prefers-color-scheme:dark){.spl-word{color:#f0f0f0}}
@keyframes splPop{from{transform:scale(.65);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes splFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Skip-link voor toetsenbordgebruikers */
.skip-link{position:absolute;top:-999px;left:0;z-index:99999;padding:10px 20px;background:var(--or,#e8580c);color:#fff;font-weight:700;font-size:14px;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{top:0}
/* Focus-indicatoren voor toetsenbordnavigatie */
:focus-visible{outline:2px solid var(--or,#e8580c);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:2px solid var(--or,#e8580c);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
:root{
  --bg:#f5f6fa;--bg2:#eef0f5;--s:#FFFFFF;--dk:#1a1d26;
  --mu:#6b7280;--bo:#e2e5ed;--bo2:#d1d5e0;
  /* Neutral accent (no level chosen — welcome screen) */
  --or:#64748b;--orl:#f1f5f9;--bl:#2563eb;--r:14px;
  --or-rgb:100,116,139;
  --cd-bg1:#0f1118;--cd-bg2:#181c28;--cd-bg3:#141820;
  --green:#22c55e;--red:#ef4444;--blue:#2563eb;
  --nav-h:64px;
  --nav-bg:rgba(255,255,255,.95);
  --sam-bg:#f0f5ff;--sam-txt:#1e3a5f;--sam-h:#0d2240;
  --tt-bg:#f5f6fa;--ce-bg:#f5f6fa;
  --font:'Inter',sans-serif;
  --font-head:'Bricolage Grotesque',sans-serif;
  /* Search bar — light mode */
  --sb-bg:var(--s);--sb-text:var(--dk);--sb-ph:var(--mu);
  --sb-mask-col:var(--s);--sb-dk:transparent;--sb-dk2:rgba(0,0,0,0)
}
html.dark{
  --bg:#0f1118;--bg2:#181c28;--s:#1c2030;--dk:#edf0f7;
  --mu:#7a8899;--bo:#272e40;--bo2:#323b50;
  --orl:#1e293b;--bl:#5898F8;
  --nav-bg:rgba(15,17,24,.95);
  --sam-bg:#0D1E33;--sam-txt:#93BDF5;--sam-h:#C8DFFE;
  --tt-bg:#181c28;--ce-bg:#181c28;
  /* Search bar — dark mode */
  --sb-bg:#010201;--sb-text:#ffffff;--sb-ph:#9ca3af;
  --sb-mask-col:#010201;--sb-dk:#000000;--sb-dk2:#1c191c
}
/* ── LEVEL THEMES ─────────────────────────────── */
/* ══════════════════════════════════════════════
   WELCOME / LEVEL-SELECT REDESIGN
   ══════════════════════════════════════════════ */
/* Welcome screen — own indigo accent, dual-aura BG handled in #sc-welcome CSS */
html.level-welcome{
  --or:#6366f1;--orl:rgba(99,102,241,.18);--or-rgb:99,102,241
}
html.level-havo{
  --or:#e8580c;--orl:#fff4ed;--or-rgb:232,88,12;
  --cd-bg1:#1a0600;--cd-bg2:#250c00;--cd-bg3:#1c0900
}
html.dark.level-havo{
  --or:#e8580c;--orl:#2A1500
}
html.level-vwo{
  --or:#8b5cf6;--orl:#f5f3ff;--or-rgb:139,92,246;
  --cd-bg1:#0f0020;--cd-bg2:#1a0540;--cd-bg3:#130030
}
html.dark.level-vwo{
  --or:#a78bfa;--orl:#2D1B69;--or-rgb:167,139,250
}
body{font-family:var(--font);background:var(--bg);color:var(--dk);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;letter-spacing:-.3px}
.sc{display:none;min-height:100vh}.sc.on{display:block;animation:screenIn .38s cubic-bezier(.22,1,.36,1)}
@keyframes screenIn{from{opacity:0;transform:scale(.975) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.w{max-width:960px;margin:0 auto;padding:0 24px}

/* ── NAV ─────────────────────────────────────── */
.nav{height:var(--nav-h);display:flex;align-items:center;border-bottom:1px solid var(--bo);position:sticky;top:0;background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:100;transition:background .25s,border-color .25s;box-shadow:0 1px 0 var(--bo)}
.nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--or-rgb),.25),transparent);pointer-events:none}
.nav-inner{max-width:960px;margin:0 auto;padding:0 24px;width:100%;display:flex;align-items:center;gap:14px}
.logo{font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--dk);cursor:pointer;display:flex;align-items:center;gap:8px;letter-spacing:-.3px;transition:opacity .2s}
.logo:hover{opacity:.8}
.logo-dot{width:9px;height:9px;border-radius:50%;background:var(--or);flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--or) 20%,transparent);animation:logoPulse 3s ease-in-out infinite}
@keyframes logoPulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--or) 20%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--or) 12%,transparent),0 0 14px rgba(var(--or-rgb),.35)}}
.nav-chip{margin-left:8px;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;background:var(--orl);color:var(--or);border:1px solid rgba(var(--or-rgb),.25);letter-spacing:.3px;transition:all .3s}
.nav-btn{margin-left:auto;padding:8px 18px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--bo);background:var(--s);color:var(--dk);transition:all .22s cubic-bezier(.34,1.2,.64,1);font-family:var(--font)}
.nav-btn:hover{background:var(--bg2);border-color:rgba(var(--or-rgb),.45);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.07),0 0 0 1px rgba(var(--or-rgb),.15),0 0 18px rgba(var(--or-rgb),.18)}
/* ── NAV DOCK (icon buttons with tooltip) ──────── */
.nav-dock{display:flex;align-items:center;gap:2px;padding:4px;border-radius:16px;background:color-mix(in srgb,var(--s) 92%,transparent);border:1px solid var(--bo);box-shadow:0 2px 14px rgba(0,0,0,.06);margin-left:auto;transition:box-shadow .25s,border-color .25s}
.nav-dock:hover{border-color:rgba(var(--or-rgb),.3);box-shadow:0 4px 24px rgba(var(--or-rgb),.12),0 2px 14px rgba(0,0,0,.04)}
.dock-btn{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:none;background:transparent;cursor:pointer;color:var(--mu);transition:all .22s cubic-bezier(.34,1.4,.64,1);font-family:var(--font);flex-shrink:0}
.dock-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.dock-btn:hover{background:rgba(var(--or-rgb),.12);color:var(--or);transform:scale(1.15) translateY(-2px)}
.dock-btn:active{transform:scale(.88) translateY(0)}
.dock-divider{width:1px;height:20px;background:var(--bo);margin:0 4px;flex-shrink:0}
.dock-btn::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:4px 10px;background:var(--dk);color:var(--s);font-size:11px;font-weight:600;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;font-family:var(--font);z-index:200;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.dock-btn:hover::after{opacity:1}
.nav-dock .theme-btn{border:none;background:transparent;width:38px;height:38px;border-radius:10px}
.nav-dock .theme-btn:hover{background:rgba(var(--or-rgb),.12);transform:scale(1.15) translateY(-2px)}
.dock-avatar{width:24px;height:24px;border-radius:50%;background:rgba(var(--or-rgb),.18);color:var(--or);font-size:15px;display:flex;align-items:center;justify-content:center;line-height:1;overflow:hidden}
.dock-avatar-ini{font-size:10px;font-weight:800;background:var(--or);color:#fff}
/* ── AVATAR SVG SCALING FIX ──────────────────────
   Animal SVGs have viewBox but no width/height.
   Without this the browser renders them at 300×150px
   and they overflow every container on mobile. */
.anim-svg-wrap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.anim-svg-wrap svg{width:100%;height:100%;display:block;flex-shrink:0}
.lb-pod-avatar .anim-svg-wrap svg,.res-xp-avatar-ring .anim-svg-wrap svg{width:100%;height:100%}
.anim-pick-emoji .anim-svg-wrap{width:36px;height:36px}
.anim-pick-emoji .anim-svg-wrap svg{width:100%;height:100%}
@media(max-width:640px){.nav-dock{display:none!important}}
.bk{color:var(--mu);font-size:14px;cursor:pointer;padding:6px 14px;border-radius:10px;border:1px solid var(--bo);background:var(--s);transition:all .2s;font-family:var(--font)}
.bk:hover{background:var(--bg2)}
.hbg{margin-left:auto;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;background:var(--orl);color:var(--or);border:1px solid var(--or);letter-spacing:.2px;opacity:.9}

/* ── TUTORIAL OVERLAY ───────────────────────── */
.tuto-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
.tuto-card{background:var(--s);border:1px solid var(--bo);border-radius:24px;padding:36px 32px 28px;max-width:440px;width:100%;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.6);animation:tutoIn .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes tutoIn{from{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:none}}
.tuto-skip{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--mu);font-size:13px;cursor:pointer;padding:4px 10px;border-radius:8px;font-family:var(--font);transition:color .15s}
.tuto-skip:hover{color:var(--tx)}
.tuto-slide{display:none;text-align:center;padding:8px 0 24px}
.tuto-slide.active{display:block}
.tuto-icon{font-size:52px;margin-bottom:18px;display:block;line-height:1}
.tuto-slide h2{font-family:var(--font-head);font-size:22px;font-weight:800;margin-bottom:12px;color:var(--tx);letter-spacing:-.3px}
.tuto-slide p{font-size:15px;color:var(--mu);line-height:1.75;max-width:340px;margin:0 auto}
.tuto-slide p strong{color:var(--tx)}
.tuto-dots{display:flex;justify-content:center;gap:8px;margin-bottom:24px}
.tuto-dot{width:8px;height:8px;border-radius:50%;background:var(--bo);cursor:pointer;transition:all .25s}
.tuto-dot.active{background:var(--or);width:24px;border-radius:4px}
.tuto-btn-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tuto-btn-pri{flex:1;padding:13px 20px;background:var(--or);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);transition:opacity .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(var(--or-rgb),.35)}
.tuto-btn-pri:hover{opacity:.85;box-shadow:0 6px 24px rgba(var(--or-rgb),.55),0 0 0 3px rgba(var(--or-rgb),.18)}
.tuto-btn-sec{padding:13px 16px;background:none;border:1px solid var(--bo);color:var(--mu);border-radius:12px;font-size:14px;cursor:pointer;font-family:var(--font);transition:all .2s}
.tuto-btn-sec:hover{color:var(--tx);border-color:var(--mu)}
/* ── CIJFER SPOTLIGHT TUTORIAL ──────────────────── */
.ctuto-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 4px var(--or),0 0 0 9999px rgba(0,0,0,.68);pointer-events:none;z-index:8902;transition:top .32s,left .32s,width .32s,height .32s}
.ctuto-tip{position:fixed;background:var(--s);border:2px solid var(--or);border-radius:16px;padding:18px 20px 14px;max-width:280px;box-shadow:0 8px 40px rgba(0,0,0,.5);z-index:8903;pointer-events:all;animation:tutoIn .3s cubic-bezier(.34,1.56,.64,1)}
.ctuto-tip-title{font-weight:800;font-size:15px;color:var(--tx);margin-bottom:6px}
.ctuto-tip-body{font-size:13px;color:var(--mu);line-height:1.65;margin-bottom:14px}
.ctuto-tip-foot{display:flex;align-items:center;gap:8px}
.ctuto-tip-skip{background:none;border:none;color:var(--mu);font-size:12px;cursor:pointer;font-family:var(--font);padding:4px;white-space:nowrap}
.ctuto-tip-dots{display:flex;gap:5px;align-items:center;flex:1;justify-content:center}
.ctuto-tip-dot{width:6px;height:6px;border-radius:50%;background:var(--bo2);transition:all .2s}
.ctuto-tip-dot.on{background:var(--or);width:18px;border-radius:3px}
.ctuto-tip-next{background:var(--or);color:#fff;border:none;border-radius:9px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap}
@media(max-width:640px){
  .tuto-card{padding:28px 20px 22px;border-radius:20px;margin-bottom:70px}
  .tuto-icon{font-size:44px}
  .tuto-slide h2{font-size:19px}
  .tuto-slide p{font-size:14px}
}
/* ── FOOTER ──────────────────────────────────── */
.site-footer{margin-top:48px;padding:28px 0 36px;border-top:1px solid var(--bo);text-align:center;font-size:13px;color:var(--mu);line-height:2}
.site-footer a{color:var(--mu);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.site-footer a:hover{color:var(--or)}
.footer-sep{margin:0 8px;opacity:.35}

/* ── COOKIE CONSENT ─────────────────────────── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--s);border-top:1px solid var(--bo);padding:18px 24px;z-index:9999;display:none;animation:slideUp .3s ease;box-shadow:0 -4px 24px rgba(0,0,0,.08)}
.cookie-banner.show{display:block}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cookie-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cookie-text{flex:1;min-width:200px;font-size:14px;color:var(--dk);line-height:1.7}
.cookie-text a{color:var(--or);text-decoration:underline}
.cookie-btns{display:flex;gap:10px;flex-shrink:0}
.cookie-btn{padding:10px 22px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--bo);font-family:var(--font);transition:all .2s}
.cookie-accept{background:var(--or);color:#fff;border-color:var(--or)}
.cookie-accept:hover{opacity:.9;transform:translateY(-1px)}
.cookie-decline{background:var(--s);color:var(--dk)}
.cookie-decline:hover{background:var(--bg2)}

/* ── PRIVACY PAGE ───────────────────────────── */
.privacy-content{padding-top:32px;padding-bottom:48px}
.privacy-content h2{font-size:28px;margin-bottom:8px}
.privacy-content .privacy-updated{font-size:13px;color:var(--mu);margin-bottom:32px}
.privacy-content h3{font-size:18px;margin-top:32px;margin-bottom:10px;color:var(--dk)}
.privacy-content p,.privacy-content li{font-size:15px;color:var(--mu);line-height:1.85}
.privacy-content ul{padding-left:22px;margin-bottom:16px}
.privacy-content strong{color:var(--dk)}
.privacy-content a{color:var(--or);text-decoration:underline}

/* ── ADS (subtiel) ───────────────────────────── */
.ad-slot{margin:24px auto;max-width:728px;min-height:90px;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;opacity:.85;transition:opacity .3s}
.ad-slot:hover{opacity:1}
.ad-slot--banner{min-height:90px}
.ad-slot--inline{min-height:100px;margin:20px auto}
.ad-label{display:block;text-align:center;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--mu);opacity:.5;margin-bottom:4px;font-family:var(--font)}
@media(max-width:580px){.ad-slot{min-height:50px;max-width:320px}.ad-slot--banner{min-height:50px}}

/* ── HOME HERO ZONE (full-bleed dark + animated beams) ─── */
.hero-zone{position:relative;overflow:hidden;background:linear-gradient(180deg,#08080f 0%,#0d0d1a 100%)}
.flicker-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55}
.hero-zone::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--or-rgb),.35),transparent);pointer-events:none}
/* Animated light beams — use level color automatically via --or-rgb */
.hero-beam{position:absolute;inset:-60%;pointer-events:none;will-change:transform}
.hb1{background:linear-gradient(108deg,transparent 35%,rgba(var(--or-rgb),.06) 46%,rgba(var(--or-rgb),.18) 50%,rgba(var(--or-rgb),.06) 54%,transparent 65%);filter:blur(22px);animation:hbeam1 11s ease-in-out infinite alternate}
.hb2{background:linear-gradient(121deg,transparent 28%,rgba(var(--or-rgb),.04) 44%,rgba(var(--or-rgb),.13) 50%,rgba(var(--or-rgb),.04) 56%,transparent 68%);filter:blur(30px);animation:hbeam2 15s ease-in-out infinite alternate}
.hb3{background:linear-gradient(94deg,transparent 42%,rgba(var(--or-rgb),.03) 52%,rgba(var(--or-rgb),.09) 57%,rgba(var(--or-rgb),.03) 62%,transparent 72%);filter:blur(40px);animation:hbeam3 20s ease-in-out infinite alternate}
@keyframes hbeam1{from{transform:translateX(-90px) rotate(-4deg)}to{transform:translateX(90px) rotate(4deg)}}
@keyframes hbeam2{from{transform:translateX(70px) rotate(3deg)}to{transform:translateX(-70px) rotate(-3deg)}}
@keyframes hbeam3{from{transform:translateX(-50px) rotate(-1.5deg)}to{transform:translateX(60px) rotate(2deg)}}
.hero{padding:56px 0 44px;text-align:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(var(--or-rgb),.15);color:var(--or);font-size:12px;font-weight:700;padding:5px 14px;border-radius:24px;margin-bottom:22px;border:1px solid rgba(var(--or-rgb),.3);letter-spacing:.2px;backdrop-filter:blur(8px)}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--or);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hero h1{font-size:clamp(32px,6vw,56px);font-weight:800;letter-spacing:-2px;margin-bottom:16px;color:#fff;line-height:1.08}
.hero h1 em{font-style:normal;color:var(--or);text-shadow:0 0 32px rgba(var(--or-rgb),.6),0 0 12px rgba(var(--or-rgb),.35)}
.hero-sub{font-size:15.5px;color:rgba(255,255,255,.5);max-width:440px;margin:0 auto 36px;line-height:1.72;font-weight:400}

/* ── EXAM DATE STRIP ──────────────────────────── */
.date-strip{display:flex;gap:12px;margin-bottom:40px}
.ds-cell{flex:1;background:var(--s);border:1px solid var(--bo);border-radius:16px;padding:18px 20px;box-shadow:0 1px 6px rgba(0,0,0,.04);transition:border-color .2s,box-shadow .2s}
.ds-cell:hover{border-color:rgba(var(--or-rgb),.3);box-shadow:0 4px 20px rgba(var(--or-rgb),.12),0 1px 6px rgba(0,0,0,.04)}
.ds-label{font-size:10px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.9px;margin-bottom:7px}
.ds-val{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--dk)}
.ds-sub{font-size:12px;color:var(--mu);margin-top:3px;font-weight:500}
@media(max-width:580px){.date-strip{flex-direction:column;gap:8px}}

/* ══════════════════════════════════════════════
   HOME REDESIGN — nav, hero, quick-links, tijdvak
   ══════════════════════════════════════════════ */

/* ── MINIMAL TOP NAV ─────────────────────────── */
.hnav{position:sticky;top:0;z-index:200;background:rgba(var(--bg-rgb,255,255,255),.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--bo);transition:background .3s}
.dark .hnav{background:rgba(10,11,18,.82)}
.hnav-inner{max-width:820px;margin:0 auto;padding:0 20px;height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hnav-logo{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.hnav-wordmark{font-family:var(--font-head);font-size:17px;font-weight:800;color:var(--dk);letter-spacing:-.3px}
.hnav-chip{font-size:11px;font-weight:700;color:var(--or);background:rgba(var(--or-rgb),.12);border:1px solid rgba(var(--or-rgb),.25);border-radius:20px;padding:3px 10px;letter-spacing:.2px}
.hnav-right{display:flex;align-items:center;gap:4px}
.hnav-icon-btn{width:36px;height:36px;border-radius:10px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--mu);transition:background .15s,color .15s}
.hnav-icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hnav-icon-btn:hover{background:var(--bo);color:var(--dk)}
.hnav-login-cta{width:auto!important;padding:0 14px!important;border-radius:20px!important;background:var(--or)!important;color:#fff!important;font-size:13px!important;font-weight:700!important;gap:6px!important;box-shadow:0 2px 10px rgba(var(--or-rgb),.35)!important;transition:all .2s!important}
.hnav-login-cta svg{stroke:#fff!important}
.hnav-login-cta:hover{background:color-mix(in srgb,var(--or) 85%,#000)!important;color:#fff!important;transform:translateY(-1px)!important;box-shadow:0 5px 16px rgba(var(--or-rgb),.45)!important}

/* ── Feedback popup ── */
.fb-popup{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);z-index:8500;background:var(--s,#1a1f2e);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:18px 24px 14px;box-shadow:0 12px 48px rgba(0,0,0,.55);width:min(320px,92vw);text-align:center;animation:fbIn .32s cubic-bezier(.34,1.4,.64,1) forwards;pointer-events:all}
@keyframes fbIn{from{opacity:0;transform:translateX(-50%) translateY(30px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.fb-popup.fb-out{animation:fbOut .2s ease forwards}
@keyframes fbOut{to{opacity:0;transform:translateX(-50%) translateY(18px)}}
.fb-title{font-size:13.5px;font-weight:700;color:var(--dk,#e4e8ef);margin-bottom:4px;line-height:1.4}
.fb-sub{font-size:11.5px;color:var(--mu,rgba(255,255,255,.4));margin-bottom:14px}
.fb-stars{display:flex;justify-content:center;gap:4px;margin-bottom:10px}
.fb-star{background:none;border:none;cursor:pointer;font-size:30px;line-height:1;padding:2px 3px;transition:transform .12s,filter .12s;opacity:.28;-webkit-tap-highlight-color:transparent}
.fb-star.lit{opacity:1;filter:drop-shadow(0 0 5px rgba(251,191,36,.7))}
.fb-star:active{transform:scale(.88)}
.fb-skip{background:none;border:none;color:var(--mu,rgba(255,255,255,.38));font-size:11.5px;cursor:pointer;font-family:inherit;padding:5px 10px;transition:color .15s;display:block;margin:0 auto}
.fb-skip:hover{color:var(--dk,#e4e8ef)}
.fb-thanks-wrap{padding:4px 0 2px}
.fb-thanks-wrap .fb-thanks-ico{font-size:32px;margin-bottom:4px}
.fb-thanks-wrap .fb-thanks-txt{font-size:14px;font-weight:700;color:var(--dk,#e4e8ef)}

/* ── HERO SECTION ────────────────────────────── */
.hm-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#07080f 0%,#0d0e1c 50%,#090c16 100%);padding-bottom:0}
.hm-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--or-rgb),.4),transparent)}
.hm-hero-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(ellipse at 50% 30%,rgba(var(--or-rgb),.18) 0%,rgba(var(--or-rgb),.06) 40%,transparent 70%);pointer-events:none}
.hm-hero-inner{padding:52px 20px 44px;text-align:center;position:relative;z-index:1}
.hm-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(var(--or-rgb),.13);color:var(--or);font-size:12px;font-weight:700;padding:5px 14px;border-radius:24px;margin-bottom:20px;border:1px solid rgba(var(--or-rgb),.28);letter-spacing:.3px}
.hm-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.hm-h1{font-family:var(--font-head);font-size:clamp(34px,6.5vw,60px);font-weight:900;letter-spacing:-2.5px;line-height:1.04;color:#fff;margin-bottom:14px}
.hm-h1 em{font-style:normal;background:linear-gradient(135deg,var(--or),color-mix(in srgb,var(--or) 70%,#fff));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 28px rgba(var(--or-rgb),.5))}
.hm-sub{font-size:15px;color:rgba(255,255,255,.45);max-width:400px;margin:0 auto 32px;line-height:1.7;font-weight:400}

/* Countdown inside hero */
.hm-countdown{display:inline-flex;align-items:center;gap:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:16px 24px;margin-bottom:28px;flex-wrap:wrap;justify-content:center;backdrop-filter:blur(10px)}
.hm-countdown .cd-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.35);margin-bottom:6px}
.hm-countdown .cd-title{font-family:var(--font-head);font-size:18px;font-weight:800;color:#fff;letter-spacing:-.3px}
.hm-countdown .cd-sub{font-size:11px;color:rgba(255,255,255,.3);margin-top:3px}
.hm-countdown .cd-left{text-align:left}
.hm-countdown .cd-nums{display:flex;gap:7px}
.hm-countdown .cd-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 13px;text-align:center;min-width:54px}
.hm-countdown .cd-val{font-family:var(--font-head);font-size:24px;font-weight:800;color:#fff;line-height:1;letter-spacing:-1px}
.hm-countdown .cd-unit{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:rgba(255,255,255,.35);margin-top:4px;font-weight:700}
/* Level glow variants */
.hm-countdown.cd-havo{border-color:rgba(var(--or-rgb),.32);box-shadow:0 0 32px rgba(var(--or-rgb),.2),0 0 0 1px rgba(var(--or-rgb),.08) inset;transition:box-shadow .5s,border-color .5s}
.hm-countdown.cd-havo .cd-box:hover{border-color:rgba(var(--or-rgb),.55);box-shadow:0 0 16px rgba(var(--or-rgb),.28),inset 0 0 10px rgba(var(--or-rgb),.06)}
.hm-countdown.cd-vwo{border-color:rgba(139,92,246,.32);box-shadow:0 0 32px rgba(139,92,246,.2),0 0 0 1px rgba(139,92,246,.08) inset;transition:box-shadow .5s,border-color .5s}
.hm-countdown.cd-vwo .cd-box:hover{border-color:rgba(139,92,246,.55);box-shadow:0 0 16px rgba(139,92,246,.28),inset 0 0 10px rgba(139,92,246,.06)}
.hm-countdown.cd-vwo .cd-val{color:#c4b5fd}
.hm-countdown.cd-vwo .cd-label{color:rgba(196,181,253,.5)}
/* ── PANIEKMODUS: <1 dag tot examen ── */
.hm-countdown.cd-panic{border-color:rgba(239,68,68,.65)!important;box-shadow:0 0 48px rgba(239,68,68,.45),0 0 0 1px rgba(239,68,68,.25) inset!important;animation:cd-panic-glow 1s ease-in-out infinite!important;transition:none!important}
.hm-countdown.cd-panic .cd-box{border-color:rgba(239,68,68,.45)!important;animation:cd-panic-shake .55s ease-in-out infinite!important}
.hm-countdown.cd-panic .cd-box:nth-child(2){animation-delay:.07s!important}
.hm-countdown.cd-panic .cd-box:nth-child(3){animation-delay:.14s!important}
.hm-countdown.cd-panic .cd-box:nth-child(4){animation-delay:.21s!important}
.hm-countdown.cd-panic .cd-val{color:#ef4444!important;animation:cd-panic-pulse .9s ease-in-out infinite!important}
.hm-countdown.cd-panic .cd-label{color:#fca5a5!important;font-weight:900!important}
.hm-countdown.cd-panic .cd-sub{color:rgba(252,165,165,.75)!important}
#cd-panic-msg{display:none;width:100%;text-align:center;font-size:11px;font-weight:900;color:#f87171;letter-spacing:.8px;text-transform:uppercase;padding:5px 0 2px;animation:cd-panic-pulse .8s ease-in-out infinite}
@keyframes cd-panic-glow{0%,100%{box-shadow:0 0 28px rgba(239,68,68,.3),0 0 0 1px rgba(239,68,68,.15) inset}50%{box-shadow:0 0 60px rgba(239,68,68,.6),0 0 0 2px rgba(239,68,68,.35) inset}}
@keyframes cd-panic-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.78;transform:scale(1.07)}}
@keyframes cd-panic-shake{0%,100%{transform:translateX(0) translateY(0)}20%{transform:translateX(-2px) translateY(-1px)}40%{transform:translateX(2px) translateY(1px)}60%{transform:translateX(-1px) translateY(0)}80%{transform:translateX(1px) translateY(-1px)}}

/* CTA buttons */
.hm-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hm-cta-primary{display:inline-flex;align-items:center;gap:8px;background:var(--or);color:#fff;font-family:var(--font-head);font-size:15px;font-weight:700;padding:13px 26px;border-radius:14px;border:none;cursor:pointer;letter-spacing:.1px;transition:all .22s cubic-bezier(.34,1.2,.64,1);box-shadow:0 4px 20px rgba(var(--or-rgb),.45)}
.hm-cta-primary:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(var(--or-rgb),.55)}
.hm-cta-primary:active{transform:scale(.97)}
.hm-cta-sec{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);font-family:var(--font-head);font-size:15px;font-weight:700;padding:13px 24px;border-radius:14px;border:1px solid rgba(255,255,255,.15);cursor:pointer;letter-spacing:.1px;transition:all .22s cubic-bezier(.34,1.2,.64,1)}
.hm-cta-sec:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

/* ── QUICK LINK STRIP ────────────────────────── */
.hm-ql{display:none}
/* ── BENTO GRID ──────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 24px 18px;max-width:960px;margin:0 auto}
.bento-cell{background:var(--s);border:1.5px solid var(--bo);border-radius:14px;cursor:pointer;transition:all .18s cubic-bezier(.34,1.2,.64,1);text-decoration:none;overflow:hidden;position:relative;-webkit-tap-highlight-color:transparent;font-family:var(--font)}
.bento-cell:hover{border-color:rgba(var(--or-rgb),.4);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.bento-cell:active{transform:scale(.97)}
.bento-stat{display:flex;flex-direction:column;padding:11px 12px;gap:1px;align-items:center;text-align:center}
.bento-si{font-size:16px;line-height:1;margin-bottom:3px}
.bento-sv{font-family:var(--font-head);font-size:14px;font-weight:800;color:var(--dk);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bento-sl{font-size:10px;color:var(--mu);line-height:1.35;font-weight:500;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bento-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 6px;text-align:center;border-color:var(--bo);background:var(--s)}
.bento-act::after{display:none}
.bento-act svg{stroke:var(--mu);width:20px;height:20px;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s,transform .18s;position:relative;z-index:1}
.bento-cell:hover .bento-act svg{transform:scale(1.15);stroke:var(--dk)}
.bento-al{font-size:11px;font-weight:600;color:var(--mu);letter-spacing:.2px;position:relative;z-index:1}
.bento-streak{border-color:rgba(249,115,22,.4);background:linear-gradient(145deg,rgba(249,115,22,.13) 0%,rgba(249,115,22,.04) 100%)}
.bento-streak::after{content:'';position:absolute;top:-28px;right:-28px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.35) 0%,transparent 70%);pointer-events:none}
.bento-streak .bento-sv{color:#f97316}
.bento-xp{border-color:rgba(234,179,8,.4);background:linear-gradient(145deg,rgba(234,179,8,.13) 0%,rgba(234,179,8,.04) 100%)}
.bento-xp::after{content:'';position:absolute;top:-28px;right:-28px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(234,179,8,.35) 0%,transparent 70%);pointer-events:none}
.bento-xp .bento-sv{color:#eab308}
.bento-badges{border-color:rgba(167,139,250,.4);background:linear-gradient(145deg,rgba(167,139,250,.13) 0%,rgba(167,139,250,.04) 100%)}
.bento-badges::after{content:'';position:absolute;top:-28px;right:-28px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.35) 0%,transparent 70%);pointer-events:none}
.bento-badges .bento-sv{color:#a78bfa}
.bento-avg-ok{border-color:rgba(34,197,94,.4);background:linear-gradient(145deg,rgba(34,197,94,.13) 0%,rgba(34,197,94,.04) 100%)}
.bento-avg-ok::after{content:'';position:absolute;top:-28px;right:-28px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.35) 0%,transparent 70%);pointer-events:none}
.bento-avg-ok .bento-sv{color:#22c55e}
.bento-avg-warn{border-color:rgba(239,68,68,.4);background:linear-gradient(145deg,rgba(239,68,68,.13) 0%,rgba(239,68,68,.04) 100%)}
.bento-avg-warn::after{content:'';position:absolute;top:-28px;right:-28px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(239,68,68,.35) 0%,transparent 70%);pointer-events:none}
.bento-avg-warn .bento-sv{color:#ef4444}
.bento-avg-empty{border-color:var(--bo);border-style:dashed}
.bento-avg-empty .bento-si{opacity:.5}
.bento-groep{border-color:rgba(20,184,166,.4);background:linear-gradient(145deg,rgba(20,184,166,.13) 0%,rgba(20,184,166,.04) 100%)}
.bento-groep::after{content:'';position:absolute;top:-28px;right:-28px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.35) 0%,transparent 70%);pointer-events:none}
.bento-groep .bento-sv{color:#14b8a6}
.bento-dg{border-color:rgba(var(--or-rgb),.35);background:linear-gradient(145deg,rgba(var(--or-rgb),.1) 0%,rgba(var(--or-rgb),.03) 100%)}
.bento-dg::after{content:'';position:absolute;top:-28px;right:-28px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(var(--or-rgb),.28) 0%,transparent 70%);pointer-events:none}
.bento-dg-done{border-color:rgba(34,197,94,.4)!important;background:linear-gradient(145deg,rgba(34,197,94,.13) 0%,rgba(34,197,94,.04) 100%)!important}
.bento-dg-done::after{background:radial-gradient(circle,rgba(34,197,94,.3) 0%,transparent 70%)!important}
.bento-dg-bar{height:5px;background:var(--bo);border-radius:99px;overflow:hidden;margin-top:8px;position:relative;z-index:1}
.bento-dg-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#f97316,#f59e0b);transition:width .4s ease}
.bento-si{position:relative;z-index:1}
.bento-sv{position:relative;z-index:1}
.bento-sl{position:relative;z-index:1}
.bento-at-risk{border-color:rgba(249,115,22,.5)!important;animation:atRiskPulse 2s ease-in-out infinite}
.bento-at-risk .bento-sv{color:#f97316!important}
.bento-xp-urgent{border-color:rgba(234,179,8,.45)!important}
.bento-xp-urgent .bento-sv{color:#ca8a04!important}
.bento-empty{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:13px 14px}
.bento-empty-icon{font-size:22px;flex-shrink:0}
.bento-empty-text{font-size:12px;color:var(--mu);flex:1;line-height:1.4}
.bento-empty-cta{font-size:12px;font-weight:700;color:var(--or);white-space:nowrap;flex-shrink:0}
@media(max-width:480px){.bento{grid-template-columns:repeat(2,1fr);gap:6px;padding:8px 12px 14px}.bento-sv{font-size:13px}.bento-si{font-size:15px}.bento-act{padding:10px 4px}}

/* ── TIJDVAK STRIP ───────────────────────────── */
.hm-tvk{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bo);border:1px solid var(--bo);border-radius:18px;overflow:hidden;margin-bottom:28px}
.hm-tvk-item{background:var(--s);padding:16px 18px;display:flex;align-items:flex-start;gap:12px;transition:background .15s}
.hm-tvk-item:hover{background:var(--bg2)}
.hm-tvk-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px;box-shadow:0 0 8px currentColor}
.hm-tvk-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);margin-bottom:4px}
.hm-tvk-val{font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--dk);letter-spacing:-.2px}
.hm-tvk-sub{font-size:11px;color:var(--mu);margin-top:2px}

/* ── VAKKEN SECTION HEADER ───────────────────── */
.hm-vakken-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;margin-top:4px}
.hm-vakken-h2{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--dk);letter-spacing:-.4px}
.hm-vakken-count{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--or);background:rgba(var(--or-rgb),.12);border:1px solid rgba(var(--or-rgb),.22);border-radius:20px;padding:3px 11px}

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:580px){
  .hm-hero-inner{padding:40px 16px 36px}
  .hm-h1{font-size:36px;letter-spacing:-2px;line-height:1.02}
  .hm-sub{font-size:13px;margin-bottom:22px;color:rgba(255,255,255,.5)}
  .hm-countdown{padding:12px 16px;gap:14px}
  .hm-countdown .cd-title{font-size:15px}
  .hm-countdown .cd-box{min-width:44px;padding:8px 10px}
  .hm-countdown .cd-val{font-size:20px}
  .hm-ctas{flex-direction:column;gap:10px}
  .hm-cta-primary{width:100%;justify-content:center;font-size:16px;padding:16px 24px;border-radius:16px;box-shadow:0 6px 28px rgba(var(--or-rgb),.5)}
  .hm-cta-sec{justify-content:center;font-size:14px;padding:13px 22px;border-radius:14px}
  .hm-ql{grid-template-columns:repeat(4,1fr);gap:8px}
  .hm-ql-btn{padding:12px 4px;font-size:11px;border-radius:14px}
  .hm-tvk{grid-template-columns:1fr}
  .hm-tvk-item{padding:12px 14px}
  .hnav-inner{height:52px;padding:0 14px}
  .hm-stat-n{font-size:20px}
}

/* ── SECTION LABEL ────────────────────────────── */
.sec-label{font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.sec-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--or-rgb),.35),rgba(var(--or-rgb),.08),transparent)}

/* ── ANIMATED GLOWING SEARCH BAR ─────────────── */
.sb-wrap{display:flex;justify-content:center;margin-bottom:24px;position:relative}
.sb-poda{position:relative;display:flex;align-items:center;justify-content:center;height:56px;width:100%}
.sb-gl{position:absolute;overflow:hidden;border-radius:12px}
.sb-gl::before{content:'';position:absolute;z-index:-2;top:50%;left:50%;background-repeat:no-repeat;transition:transform 2000ms ease}
.sb-poda:focus-within .sb-gl::before{transition-duration:4000ms}
.sb-gl1{z-index:-1;width:100%;height:70px;filter:blur(3px)}
.sb-gl1::before{width:999px;height:999px;background:conic-gradient(var(--sb-dk),var(--or) 5%,var(--sb-dk) 38%,var(--sb-dk) 50%,color-mix(in srgb,var(--or) 65%,white) 60%,var(--sb-dk) 87%);transform:translate(-50%,-50%) rotate(60deg)}
.sb-poda:hover .sb-gl1::before{transform:translate(-50%,-50%) rotate(-120deg)}
.sb-poda:focus-within .sb-gl1::before{transform:translate(-50%,-50%) rotate(420deg)}
.sb-gl2,.sb-gl3,.sb-gl4{z-index:-1;width:100%;height:65px;filter:blur(3px)}
.sb-gl2::before,.sb-gl3::before,.sb-gl4::before{width:600px;height:600px;background:conic-gradient(rgba(0,0,0,0),color-mix(in srgb,var(--or) 55%,black),rgba(0,0,0,0) 10%,rgba(0,0,0,0) 50%,color-mix(in srgb,var(--or) 40%,black),rgba(0,0,0,0) 60%);transform:translate(-50%,-50%) rotate(82deg)}
.sb-poda:hover .sb-gl2::before,.sb-poda:hover .sb-gl3::before,.sb-poda:hover .sb-gl4::before{transform:translate(-50%,-50%) rotate(-98deg)}
.sb-poda:focus-within .sb-gl2::before,.sb-poda:focus-within .sb-gl3::before,.sb-poda:focus-within .sb-gl4::before{transform:translate(-50%,-50%) rotate(442deg)}
.sb-gl5{z-index:-1;width:100%;height:63px;filter:blur(2px)}
.sb-gl5::before{width:600px;height:600px;background:conic-gradient(rgba(0,0,0,0) 0%,color-mix(in srgb,var(--or) 55%,white),rgba(0,0,0,0) 8%,rgba(0,0,0,0) 50%,color-mix(in srgb,var(--or) 70%,white),rgba(0,0,0,0) 58%);filter:brightness(1.4);transform:translate(-50%,-50%) rotate(83deg)}
.sb-poda:hover .sb-gl5::before{transform:translate(-50%,-50%) rotate(-97deg)}
.sb-poda:focus-within .sb-gl5::before{transform:translate(-50%,-50%) rotate(443deg)}
.sb-gl6{z-index:-1;width:100%;height:59px;filter:blur(0.5px)}
.sb-gl6::before{width:600px;height:600px;background:conic-gradient(var(--sb-dk2),var(--or) 5%,var(--sb-dk2) 14%,var(--sb-dk2) 50%,color-mix(in srgb,var(--or) 65%,white) 60%,var(--sb-dk2) 64%);filter:brightness(1.3);transform:translate(-50%,-50%) rotate(70deg)}
.sb-poda:hover .sb-gl6::before{transform:translate(-50%,-50%) rotate(-110deg)}
.sb-poda:focus-within .sb-gl6::before{transform:translate(-50%,-50%) rotate(430deg)}
.sb-main{position:relative;z-index:1;width:100%}
.sb-input{background:var(--sb-bg);border:none;width:100%;height:56px;border-radius:10px;color:var(--sb-text);padding:0 52px 0 52px;font-size:16px;font-family:var(--font);outline:none;transition:background .25s,color .25s,box-shadow .25s}
.sb-input::placeholder{color:var(--sb-ph);transition:color .25s}
/* Light mode: subtle inner shadow to define the input edge */
html:not(.dark) .sb-input{box-shadow:inset 0 0 0 1px var(--bo)}
.sb-mask{pointer-events:none;width:100px;height:20px;position:absolute;background:linear-gradient(to right,transparent,var(--sb-mask-col));top:18px;left:70px;transition:background .25s}
.sb-poda:focus-within .sb-mask{display:none}
.sb-pink{pointer-events:none;width:30px;height:20px;position:absolute;background:var(--or);top:10px;left:5px;filter:blur(16px);opacity:.8;transition:opacity 2000ms}
.sb-poda:hover .sb-pink{opacity:0}
/* Pink blob only visible in dark mode */
html:not(.dark) .sb-pink{display:none}
.sb-ring{position:absolute;height:42px;width:40px;overflow:hidden;top:7px;right:7px;border-radius:8px}
.sb-ring::before{content:'';position:absolute;width:600px;height:600px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);background:conic-gradient(rgba(0,0,0,0),color-mix(in srgb,var(--or) 40%,#1a1a2e),rgba(0,0,0,0) 50%,rgba(0,0,0,0) 50%,color-mix(in srgb,var(--or) 40%,#1a1a2e),rgba(0,0,0,0) 100%);filter:brightness(1.35);animation:sbSpin 3s linear infinite}
@keyframes sbSpin{to{transform:translate(-50%,-50%) rotate(450deg)}}
/* ── RACE MODE ── */
/* Race screens always use a dark background — force light text in all color schemes */
#sc-race,#sc-race-res{color:#e8ecf4;--tx:#e8ecf4;--tx2:#b0bdd0;--mu:#8a97aa}
#sc-race{background:linear-gradient(180deg,#0c0d15 0%,#090b11 100%);flex-direction:column;min-height:100vh;padding-bottom:48px}
#sc-race.on{display:flex}
#sc-race-res{background:linear-gradient(180deg,#0A0C10 0%,#141824 100%)}
.race-qmcd{border:1px solid rgba(239,68,68,.4)!important;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(239,68,68,.05),rgba(234,179,8,.04))!important}
.race-qmcd::after{content:'🏁 NIEUW';position:absolute;top:10px;right:10px;font-size:9px;font-weight:900;background:rgba(239,68,68,.85);color:#fff;padding:2px 7px;border-radius:8px;letter-spacing:.5px}
.race-diff-row{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.race-diff-btn{flex:1;min-width:82px;padding:8px 10px;border-radius:22px;border:1px solid rgba(128,128,160,.35);background:rgba(255,255,255,.1);color:#e8ecf4;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s}
html:not(.dark) .race-diff-btn{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.race-diff-btn:hover{background:rgba(239,68,68,.22);border-color:rgba(239,68,68,.55);color:#f87171;transform:scale(1.04)}

/* Topbar */
.race-tb{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;background:rgba(11,12,18,.96);backdrop-filter:blur(20px);z-index:10}
.race-meta{flex:1;font-size:12px;font-weight:700;color:var(--mu);letter-spacing:.3px;text-transform:uppercase}

/* Edge flash */
.race-edge-flash{position:fixed;inset:0;pointer-events:none;z-index:450;opacity:0;transition:opacity .12s}
.race-edge-flash.flash-ok{box-shadow:inset 0 0 80px 24px rgba(74,222,128,.4);opacity:1;animation:raceEdgeFade .55s ease forwards}
.race-edge-flash.flash-no{box-shadow:inset 0 0 80px 24px rgba(248,113,113,.4);opacity:1;animation:raceEdgeFade .55s ease forwards}

/* Tracks */
.race-tracks{padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px}
.race-track-row{display:flex;align-items:center;gap:8px}
.race-track-label{font-size:10px;font-weight:900;color:var(--mu);width:44px;flex-shrink:0;text-align:right;text-transform:uppercase;letter-spacing:.6px}
.race-track{flex:1;height:46px;background:rgba(255,255,255,.04);border-radius:23px;border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden}
.race-track-fill{position:absolute;top:0;left:0;bottom:0;width:0%;border-radius:23px;transition:width .42s cubic-bezier(.34,1.3,.64,1);pointer-events:none}
.race-fill-player{background:linear-gradient(90deg,rgba(var(--or-rgb),.18),rgba(var(--or-rgb),.48))}
.race-fill-bot{background:linear-gradient(90deg,rgba(139,92,246,.18),rgba(139,92,246,.48))}
.race-car{position:absolute;top:50%;transform:translateY(-50%);font-size:22px;left:6px;transition:left .42s cubic-bezier(.34,1.6,.64,1);z-index:3;line-height:1}
.race-car.scored{animation:raceCarBounce .45s cubic-bezier(.34,2,.64,1)}
.race-car-player{filter:drop-shadow(0 0 12px rgba(var(--or-rgb),1)) drop-shadow(0 0 4px rgba(var(--or-rgb),.6))}
.race-car-bot{filter:drop-shadow(0 0 12px rgba(139,92,246,1)) drop-shadow(0 0 4px rgba(139,92,246,.6))}
.race-finish{position:absolute;right:5px;top:50%;transform:translateY(-50%);font-size:20px;z-index:2}
.race-track-score{font-size:14px;font-weight:900;color:var(--tx);width:38px;flex-shrink:0}
.race-track-score.leading{color:var(--or)}

/* Combo bar */
.race-combo-wrap{height:32px;display:flex;align-items:center;justify-content:center;padding:0 16px}
.race-combo{font-size:15px;font-weight:900;letter-spacing:.5px;opacity:0;transition:opacity .2s}
.race-combo.show{opacity:1;animation:raceComboIn .4s cubic-bezier(.34,1.8,.64,1)}

/* Question body */
.race-qbody{padding:10px 14px 0;max-width:640px;margin:0 auto;width:100%;flex:1;box-sizing:border-box}
.race-qring{width:50px;height:50px;position:relative;margin:0 auto 4px;display:flex;align-items:center;justify-content:center}
.race-qctr{text-align:center;font-size:10px;color:var(--mu);font-weight:800;margin-bottom:12px;letter-spacing:1px;text-transform:uppercase}
.race-qq{font-size:16px;font-weight:600;line-height:1.55;color:var(--tx);margin-bottom:14px;padding:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px}

/* Answer options */
.race-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.race-opt{padding:14px 14px;border-radius:14px;border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer;text-align:left;transition:transform .15s,filter .15s,opacity .15s;line-height:1.4;font-family:var(--font)}
.race-opt:nth-child(1){background:linear-gradient(135deg,#c0392b,#e74c3c)}
.race-opt:nth-child(2){background:linear-gradient(135deg,#1e3a8a,#2563eb)}
.race-opt:nth-child(3){background:linear-gradient(135deg,#92400e,#d97706)}
.race-opt:nth-child(4){background:linear-gradient(135deg,#14532d,#16a34a)}
.race-opt:hover:not(:disabled){filter:brightness(1.2);transform:scale(1.03) translateY(-1px)}
.race-opt.correct{background:linear-gradient(135deg,#15803d,#22c55e)!important;transform:scale(1.05)!important;box-shadow:0 6px 30px rgba(34,197,94,.6)!important;animation:optPop .45s cubic-bezier(.34,1.5,.64,1)}
.race-opt.wrong{opacity:.3!important;transform:scale(.96)!important;filter:grayscale(.5)}
.race-opt .opt-lbl{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);font-size:11px;font-weight:900;margin-right:8px;flex-shrink:0;vertical-align:middle}

/* Feedback */
.race-fb{padding:12px 16px;border-radius:14px;margin-bottom:10px;font-size:13px;line-height:1.5;border:1px solid}
.race-fb.fbok{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.28);color:#4ade80}
.race-fb.fbno{background:rgba(248,113,113,.07);border-color:rgba(248,113,113,.28);color:#f87171}
.race-fb .fbt{font-weight:900;margin-bottom:4px;font-size:14px}
.race-fb .fbtx{color:var(--tx2);font-size:12px;line-height:1.5}

/* Power-up panel */
.race-powerup-bar{background:rgba(8,8,14,.85);backdrop-filter:blur(24px);border:1px solid rgba(252,211,77,.22);border-radius:20px;padding:16px 14px;margin-bottom:12px;box-shadow:0 0 40px rgba(252,211,77,.08)}
.race-pu-title{font-size:12px;font-weight:900;color:#fcd34d;margin-bottom:12px;text-align:center;letter-spacing:1.5px;text-transform:uppercase}
.race-pu-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.race-pu-btn{padding:14px 8px;border-radius:16px;border:1px solid rgba(252,211,77,.18);background:rgba(255,255,255,.04);color:var(--tx);cursor:pointer;transition:all .2s;text-align:center;animation:puPop .35s cubic-bezier(.34,1.7,.64,1) both}
.race-pu-btn:nth-child(2){animation-delay:.07s}
.race-pu-btn:nth-child(3){animation-delay:.14s}
.race-pu-btn:hover{background:rgba(252,211,77,.14);border-color:rgba(252,211,77,.45);transform:translateY(-4px) scale(1.05);box-shadow:0 10px 28px rgba(252,211,77,.18)}
.race-pu-btn .pu-icon{font-size:30px;display:block;margin-bottom:7px}
.race-pu-btn .pu-name{font-weight:900;display:block;font-size:12px;color:#fcd34d;margin-bottom:3px}
.race-pu-btn .pu-desc{font-size:10px;color:var(--mu);display:block;line-height:1.35}

/* Toast */
.race-toast{position:fixed;top:68px;left:50%;transform:translateX(-50%) translateY(-12px);background:rgba(14,15,22,.97);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:10px 22px;font-size:14px;font-weight:700;color:var(--tx);pointer-events:none;opacity:0;transition:opacity .22s,transform .22s;z-index:9998;white-space:nowrap;backdrop-filter:blur(20px);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.race-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Floating score popup */
.race-float{position:fixed;font-size:26px;font-weight:900;pointer-events:none;z-index:9997;animation:raceFloatUp .95s cubic-bezier(.22,1,.36,1) forwards;text-shadow:0 0 20px currentColor}

/* Result page */
.race-res-vs{display:flex;gap:14px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.race-res-col{text-align:center;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.07);border-radius:22px;padding:22px 26px;min-width:130px}
.race-res-col.winner{border-color:rgba(var(--or-rgb),.5);background:rgba(var(--or-rgb),.08);box-shadow:0 0 50px rgba(var(--or-rgb),.12)}
.race-res-col .res-emo{font-size:40px;margin-bottom:8px;display:block}
.race-res-col .res-name{font-size:11px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.6px}
.race-res-col .res-sc{font-size:34px;font-weight:900;color:var(--tx);margin:6px 0 2px}
.race-res-col .res-time{font-size:11px;color:var(--mu)}

/* Finish overlay */
.race-finish-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center}
.race-finish-overlay.visible{display:flex}
.rfo-inner{text-align:center;animation:rfoIn .5s cubic-bezier(.34,1.56,.64,1) forwards}
.rfo-flag{font-size:80px;animation:rfoFlag .65s ease-in-out infinite;display:block;margin-bottom:18px}
.rfo-title{font-size:44px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 0 40px rgba(var(--or-rgb),1),0 0 80px rgba(var(--or-rgb),.7),0 0 120px rgba(var(--or-rgb),.3);margin-bottom:12px}
.rfo-sub{font-size:19px;font-weight:700;color:var(--tx2)}
.rfo-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.rfo-dot{position:absolute;width:8px;height:8px;border-radius:2px;animation:rfoDotFall var(--d,1.2s) var(--delay,0s) ease-in forwards}

@keyframes raceEdgeFade{0%{opacity:1}100%{opacity:0}}
@keyframes raceCarBounce{0%{transform:translateY(-50%) scale(1)}40%{transform:translateY(-70%) scale(1.5)}70%{transform:translateY(-45%) scale(1.1)}100%{transform:translateY(-50%) scale(1)}}
@keyframes racePulse{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.3)}}
@keyframes puPop{0%{transform:scale(.55) translateY(20px);opacity:0}75%{transform:scale(1.05) translateY(-3px)}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes rfoIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}55%{transform:translate(-50%,-50%) scale(1.1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes rfoFlag{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(12deg) scale(1.18)}}
@keyframes raceFloatUp{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(.7)}}
@keyframes raceComboIn{0%{transform:scale(.3);opacity:0}65%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
@keyframes rfoDotFall{0%{opacity:1;transform:translateY(-20px) rotate(0)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}
.sb-filter-btn{position:absolute;top:8px;right:8px;z-index:2;width:38px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(to bottom,color-mix(in srgb,var(--or) 25%,#000),#000,color-mix(in srgb,var(--or) 20%,#000));border:none;cursor:pointer}
.sb-filter-btn .sb-clear-icon{display:none}
.sb-poda.sb-has-text .sb-filter-btn .sb-filter-icon{display:none}
.sb-poda.sb-has-text .sb-filter-btn .sb-clear-icon{display:flex}
.sb-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;display:flex}
.sb-noresult{text-align:center;padding:28px 0 4px;color:var(--mu);font-size:14px;display:none}
.sb-noresult.show{display:block}
.sb-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--s);border:1.5px solid var(--bo);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:300;overflow:hidden;max-height:460px;overflow-y:auto}
.sb-res-group{padding:4px 0}
.sb-res-group+.sb-res-group{border-top:1px solid var(--bo)}
.sb-res-label{font-size:10px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.7px;padding:8px 16px 4px}
.sb-res-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background .12s}
.sb-res-item:hover{background:var(--sb-bg)}
.sb-res-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;font-weight:800}
.sb-res-title{font-size:13px;font-weight:700;color:var(--dk);line-height:1.3}
.sb-res-sub{font-size:11px;color:var(--mu);line-height:1.3;margin-top:1px}
mark.sb-res-mark{background:rgba(99,102,241,.18);color:#818cf8;border-radius:3px;padding:0 2px;font-style:normal}
.sb-filter-btn.fp-active{box-shadow:0 0 0 1.5px var(--or),0 0 8px rgba(var(--or-rgb),.4)}
.sb-filter-btn.fp-active .sb-filter-icon path{stroke:var(--or)}
.filter-panel{overflow:hidden;max-height:0;opacity:0;pointer-events:none;transition:max-height .28s cubic-bezier(.4,0,.2,1),opacity .2s,padding .28s}
.filter-panel.open{max-height:200px;opacity:1;padding:10px 2px 6px;pointer-events:auto}
.fp-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.fp-label{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;min-width:64px;flex-shrink:0}
.fp-chips{display:flex;gap:6px;flex-wrap:wrap}
.fp-chip{background:rgba(255,255,255,.06);border:1px solid var(--bo);color:var(--tx2);font-size:12px;font-weight:500;padding:5px 13px;border-radius:20px;cursor:pointer;transition:all .15s;white-space:nowrap}
.fp-chip:hover{background:rgba(var(--or-rgb),.12);border-color:rgba(var(--or-rgb),.35);color:var(--or)}
.fp-chip.active{background:rgba(var(--or-rgb),.18);border-color:rgba(var(--or-rgb),.55);color:var(--or);font-weight:600}
/* Light mode: brighten glow layers slightly */
html:not(.dark) .sb-gl1{filter:blur(4px);opacity:.9}
html:not(.dark) .sb-gl5::before{filter:brightness(1.2)}
html:not(.dark) .sb-gl6::before{filter:brightness(1.0)}

/* ── VAK CARDS ────────────────────────────────── */
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:56px}
@media(max-width:580px){.sg{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:420px){.sg{grid-template-columns:1fr}}
.card{background:var(--s);border:1.5px solid var(--bo);border-radius:22px;padding:22px 20px 18px;cursor:pointer;transition:all .28s cubic-bezier(.34,1.4,.64,1);position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.card::before{content:'';position:absolute;inset:0;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--card-col,var(--or)) 18%,transparent),transparent 55%,color-mix(in srgb,var(--card-col,var(--or)) 8%,transparent));opacity:0;transition:opacity .28s ease;pointer-events:none}
.card::after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg) translateX(0);transition:transform .6s ease;pointer-events:none}
.card:hover{border-color:color-mix(in srgb,var(--card-col) 55%,var(--bo));box-shadow:0 12px 40px color-mix(in srgb,var(--card-col,var(--or)) 18%,rgba(0,0,0,.08)),0 0 0 1px rgba(var(--or-rgb),.1),0 0 30px rgba(var(--or-rgb),.1);transform:translateY(-5px) scale(1.01)}
.card:hover::before{opacity:1}
.card:hover::after{transform:skewX(-20deg) translateX(450%)}
.card-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--card-col,var(--or)) 22%,transparent),color-mix(in srgb,var(--card-col,var(--or)) 8%,transparent));display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0;box-shadow:0 2px 8px color-mix(in srgb,var(--card-col,var(--or)) 20%,transparent)}
.card-icon svg{width:20px;height:20px;stroke:var(--card-col,var(--or));fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-code{display:none}
.card-name{font-size:15px;font-weight:700;color:var(--dk);margin-bottom:4px;letter-spacing:-.2px}
.card-desc{font-size:12px;color:var(--mu);line-height:1.55;margin-bottom:12px}
.card-meta{font-size:11.5px;color:var(--mu);display:flex;align-items:center;gap:5px;font-weight:600}
.card-meta::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--card-col,var(--or));opacity:.5;flex-shrink:0}

/* ── INFO SCREEN ──────────────────────────────── */
.ibox{border:1px solid var(--bo);border-radius:16px;margin-bottom:12px;overflow:hidden;background:var(--s)}
.ihd{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;cursor:pointer;transition:background .15s}
.ihd:hover{background:var(--bg2)}
.ihd h3{font-family:var(--font-head);font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px}
.ibd{display:none;padding:0 22px 20px;font-size:14px;color:var(--mu);line-height:1.85}
.ibd.on{display:block}
.ibd strong{color:var(--dk)}
.ibd ul{padding-left:20px;line-height:2.3}
.ir{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bo);font-size:14px}
.ir:last-child{border:none}

/* ── DETAIL SCREEN ────────────────────────────── */
.sh{border:1px solid var(--bo);border-radius:18px;padding:28px;margin-bottom:24px;background:var(--s)}
.sh h2{font-size:26px;margin-bottom:8px}
.sh p{color:var(--mu);margin-bottom:14px;font-size:14px}
.ce{background:var(--ce-bg);border-radius:10px;padding:14px 16px;font-size:13px;color:var(--mu);border-left:3px solid var(--or)}
.ce strong{color:var(--dk)}
.dl{display:flex;flex-direction:column;gap:10px;margin-bottom:40px}
.dc2{border:1px solid var(--bo);border-radius:16px;overflow:hidden;background:var(--s)}
.dh{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;transition:all .2s}
.dh:hover{background:var(--bg2)}
.dlet{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:16px;flex-shrink:0}
.di{flex:1}
.di h4{font-size:15px;font-weight:700;margin-bottom:4px}
.di p{font-size:12px;color:var(--mu)}
.dom-ce-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.2px;margin:0 0 5px;white-space:nowrap}
.dom-ce-CE{background:#FF6B0018;color:#FF6B00;border:1.5px solid #FF6B0050}
.dom-ce-SE{background:#10b98118;color:#059669;border:1.5px solid #10b98150}
.dom-ce-CESE{background:#8b5cf618;color:#7c3aed;border:1.5px solid #8b5cf650}
.dom-ce-DEELS{background:#f59e0b18;color:#d97706;border:1.5px solid #f59e0b50}
.dbtns{display:flex;gap:6px;flex-shrink:0}
.exb{background:none;border:1px solid var(--bo);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--mu);font-family:var(--font);transition:all .2s}
.exb:hover{background:var(--bg2)}
.qb{background:#1a1d26;color:#fff;border:none;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--font)}
.qb:hover{background:var(--or)}
html.dark .qb{background:#2e3550}
.dtop{display:none;border-top:1px solid var(--bo)}
.dtop.on{display:block}
.tlbl{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.7px;margin:14px 0 9px}
.ttags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tt{background:var(--tt-bg);border:1px solid var(--bo);border-radius:8px;padding:5px 12px;font-size:12px;color:var(--dk)}
.sam{background:var(--sam-bg);border-radius:12px;padding:16px 18px;font-size:13.5px;line-height:1.95;color:var(--sam-txt);border-left:3px solid var(--bl)}
.sam strong{color:var(--sam-h);font-weight:700}
/* ── Domain tab layout ── */
.dtab-bar{display:flex;padding:0 16px;background:var(--bg2);border-bottom:1px solid var(--bo);overflow-x:auto;scrollbar-width:none;gap:2px}
.dtab-bar::-webkit-scrollbar{display:none}
.dtab-btn{background:none;border:none;border-bottom:2.5px solid transparent;padding:10px 14px 8px;font-size:13px;font-weight:600;color:var(--mu);cursor:pointer;font-family:var(--font);transition:color .15s,border-color .15s;white-space:nowrap;flex-shrink:0;margin-bottom:-1px}
.dtab-btn:hover:not(.dtab-active){color:var(--dk)}
.dtab-btn.dtab-active{color:var(--or);border-bottom-color:var(--or);font-weight:700}
.dtab-pane{display:none;padding:16px 20px 22px}
.dtab-pane.dtab-vis{display:block}
.dom-intro{font-size:13px;color:var(--mu);line-height:1.6;padding:10px 14px;background:var(--bg2);border-radius:10px;margin-bottom:2px}
.sam-cta{margin-top:18px;padding-top:14px;border-top:1px solid var(--bo)}
.sam-cta-btn{background:var(--or);color:#fff;border:none;border-radius:10px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);width:100%;transition:opacity .15s}
.sam-cta-btn:hover{opacity:.88}
/* ── Sam visual components ── */
.sam-table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:12.5px}
.sam-table th{background:var(--or);color:#fff;padding:7px 10px;text-align:left;font-weight:700;font-size:11px;letter-spacing:.3px}
.sam-table td{padding:7px 10px;border-bottom:1px solid var(--bo);vertical-align:top;line-height:1.5;font-size:12.5px}
.sam-table tr:last-child td{border-bottom:none}
.sam-table tr:nth-child(even) td{background:rgba(0,0,0,.025)}
.dark .sam-table tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.sam-formula-box{background:rgba(var(--or-rgb),.08);border:1.5px solid rgba(var(--or-rgb),.28);border-radius:12px;padding:12px 14px;margin:8px 0 12px;display:flex;flex-direction:column;gap:5px}
.sam-formula-label{font-size:10px;font-weight:800;color:var(--or);text-transform:uppercase;letter-spacing:.8px}
.sam-formula-eq{font-size:17px;font-weight:700;color:var(--dk);font-family:monospace;line-height:1.4;letter-spacing:.3px}
.sam-formula-note{font-size:12px;color:var(--mu);line-height:1.55}
.sam-tip{background:rgba(34,197,94,.07);border-left:3px solid #22c55e;border-radius:0 8px 8px 0;padding:9px 12px;margin:10px 0 6px;font-size:12.5px;color:var(--dk);line-height:1.55}
.sam-tip::before{content:'💡 Examentip';font-weight:800;color:#16a34a;font-size:10px;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.6px}
.sam-warn{background:rgba(239,68,68,.06);border-left:3px solid #ef4444;border-radius:0 8px 8px 0;padding:9px 12px;margin:10px 0 6px;font-size:12.5px;color:var(--dk);line-height:1.55}
.sam-warn::before{content:'⚠ Veelgemaakte fout';font-weight:800;color:#dc2626;font-size:10px;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.6px}
.sam-val{background:rgba(239,68,68,.06);border:1.5px solid #ef4444;border-radius:10px;padding:11px 13px;margin:12px 0 4px}
.sam-val::before{content:'🪤 Examenvallen';font-weight:800;color:#dc2626;font-size:10px;display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px}
.sam-val ul{margin:0;padding-left:16px}.sam-val li{font-size:12.5px;color:var(--dk);line-height:1.6;margin-bottom:3px}
.sam-binas{background:rgba(59,130,246,.06);border:1.5px solid rgba(59,130,246,.35);border-radius:10px;padding:10px 13px;margin:10px 0 4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sam-binas::before{content:'📐 BINAS / ScienceData';font-weight:800;color:#2563eb;font-size:10px;display:block;width:100%;margin-bottom:4px;text-transform:uppercase;letter-spacing:.6px}
.sam-binas-tag{background:rgba(59,130,246,.12);color:#1d4ed8;border-radius:6px;padding:3px 8px;font-size:11.5px;font-weight:600}
.sam-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}
.sam-compare-col{background:var(--bg2);border-radius:10px;padding:10px 12px;border:1px solid var(--bo)}
.sam-compare-head{font-size:11px;font-weight:800;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;padding-bottom:5px;border-bottom:1px solid var(--bo)}
.sam-compare-col:first-child .sam-compare-head{color:#6366f1}
.sam-compare-col:last-child .sam-compare-head{color:var(--or)}
.sam-compare-col ul{margin:0;padding:0 0 0 12px;font-size:12px;line-height:1.7;list-style:disc}
.sam-compare-col ul li{padding:2px 0;border:none}
.sam-compare-col ul li::before{display:none}
.sam-steps{margin:4px 0 10px;padding-left:0;list-style:none;counter-reset:sam-step}
.sam-steps li{counter-increment:sam-step;padding:8px 10px 8px 40px;position:relative;border-bottom:1px solid var(--bo);font-size:13px;line-height:1.5}
.sam-steps li:last-child{border-bottom:none}
.sam-steps li::before{content:counter(sam-step);position:absolute;left:8px;top:9px;width:22px;height:22px;background:var(--or);color:#fff;border-radius:50%;font-size:11px;font-weight:800;text-align:center;line-height:22px}
@media(max-width:500px){.sam-compare{grid-template-columns:1fr}}
/* ── Sam: definitie card ── */
.sam-definitie{background:rgba(99,102,241,.07);border-left:3px solid #6366f1;border-radius:0 10px 10px 0;padding:10px 14px;margin:8px 0 10px}
.sam-definitie-term{font-size:10px;font-weight:800;color:#6366f1;text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px}
.sam-definitie-body{font-size:13px;line-height:1.6;color:var(--dk)}
/* ── Sam: moet je kennen ── */
.sam-onthoud{background:rgba(168,85,247,.07);border:1.5px dashed rgba(168,85,247,.45);border-radius:10px;padding:10px 14px;margin:10px 0 8px;font-size:13px;line-height:1.6;color:var(--dk)}
.sam-onthoud::before{content:'📌 Moet je kennen';font-weight:800;color:#9333ea;font-size:10px;display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.6px}
/* ── Sam: CE-spotlight ── */
.sam-ce-spot{background:rgba(var(--or-rgb),.06);border:1.5px solid rgba(var(--or-rgb),.3);border-radius:10px;padding:11px 14px;margin:12px 0 6px}
.sam-ce-spot::before{content:'🎯 Zo wordt dit gevraagd op het CE';font-weight:800;color:var(--or);font-size:10px;display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px}
.sam-ce-spot ul{padding-left:0;margin:0}
.sam-ce-spot ul li{font-size:12.5px;line-height:1.65;padding:3px 0 3px 18px;border-bottom:none}
.sam-ce-spot ul li::before{content:'→';color:var(--or);font-size:13px}
.sam .qa{margin:8px 0;border-radius:10px;overflow:hidden;border:1.5px solid var(--bo)}
.sam .q{padding:10px 14px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;user-select:none;color:var(--dk)}
.sam .q::after{content:'▾';font-size:11px;opacity:.45;flex-shrink:0;transition:transform .2s}
.sam .qa.qa-open .q::after{transform:rotate(-180deg)}
.sam .hint{font-size:11.5px;color:var(--mu);padding:4px 14px 6px;background:rgba(var(--or-rgb),.04);font-style:italic;display:none}
.sam .qa.qa-open .hint{display:block}
.sam .a{padding:8px 14px 10px;font-size:13px;line-height:1.6;background:rgba(99,102,241,.06);border-top:1px solid var(--bo);color:var(--dk)}
.sam .a.hidden{display:none}
.sam .qa.qa-open .a{display:block}
/* ── Sam: tijdlijn ── */
.sam-timeline{list-style:none;margin:10px 0 14px;padding:0 0 0 8px;border-left:2px solid rgba(var(--or-rgb),.4)}
.sam-timeline li{padding:5px 0 5px 18px;position:relative;border-bottom:none}
.sam-timeline li::before{content:'';position:absolute;left:-6px;top:11px;width:10px;height:10px;background:var(--or);border-radius:50%}
.sam-timeline-date{font-size:11px;font-weight:800;color:var(--or);margin-bottom:1px}
.sam-timeline-event{font-size:12.5px;color:var(--dk);line-height:1.5}
/* ── Sam: proces-stappen ── */
.sam-proces{display:flex;flex-direction:column;gap:6px;margin:10px 0 12px}
.sam-proces-step{background:var(--bg2);border:1px solid var(--bo);border-radius:8px;padding:8px 12px;display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.55}
.sam-proces-num{width:22px;height:22px;border-radius:50%;background:var(--or);color:#fff;font-size:11px;font-weight:800;text-align:center;line-height:22px;flex-shrink:0;margin-top:1px}
/* ── Sam: inline check-vragen ── */
.sam-check{background:var(--bg2);border:1px solid var(--bo);border-radius:10px;padding:11px 14px;margin:8px 0 14px}
.sam-check-label{font-size:10px;font-weight:800;color:var(--or);text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.sam-check-q{font-size:13px;font-weight:600;color:var(--dk);line-height:1.5;margin-bottom:9px}
.sam-check-opts{display:flex;flex-direction:column;gap:5px}
.sam-check-opt{background:var(--s);border:1.5px solid var(--bo2,var(--bo));border-radius:8px;padding:7px 11px;font-size:12.5px;font-family:var(--font);cursor:pointer;text-align:left;line-height:1.45;color:var(--dk);transition:border-color .15s,background .15s}
.sam-check-opt:hover{border-color:var(--or);background:rgba(var(--or-rgb),.06)}
.ck-done .sam-check-opt{cursor:default;pointer-events:none}
.sam-check-opt.ck-correct{background:rgba(34,197,94,.12)!important;border-color:#22c55e!important;color:#15803d;font-weight:600}
.sam-check-opt.ck-wrong{background:rgba(239,68,68,.08)!important;border-color:#ef4444!important;color:#dc2626}
.sam-check-opt.ck-reveal{background:rgba(34,197,94,.07)!important;border-color:#86efac!important}
.sam-check-fb{font-size:12px;margin-top:8px;padding:7px 10px;border-radius:7px;line-height:1.5;border-left:3px solid transparent}
.sam-check-fb.fb-ok{background:rgba(34,197,94,.09);border-color:#22c55e;color:#15803d}
.sam-check-fb.fb-err{background:rgba(239,68,68,.07);border-color:#ef4444;color:var(--dk)}
/* ── Sam: leesvoortgang (fase 4) ── */
.sam-prog-wrap{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sam-prog-bar{flex:1;height:5px;background:var(--bo);border-radius:3px;overflow:hidden}
.sam-prog-fill{height:100%;background:var(--or);border-radius:3px;transition:width .35s ease}
.sam-prog-wrap.prog-done .sam-prog-fill{background:#22c55e}
.sam-prog-label{font-size:11px;font-weight:700;color:var(--mu);white-space:nowrap;min-width:72px;text-align:right}
.sam-prog-wrap.prog-done .sam-prog-label{color:#16a34a}
.sam-head-ck{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--bo);background:transparent;font-size:10px;cursor:pointer;color:var(--mu);display:inline-flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0;font-family:var(--font);line-height:1;padding:0}
.sam-head-ck:hover{border-color:var(--or);color:var(--or);background:rgba(var(--or-rgb),.07)}
.sam-head-ck.hck-done{background:#22c55e;border-color:#22c55e;color:#fff}
/* ── Sam: auto CE-spotlight (fase 5) ── */
.sam-ce-auto .sam-ce-ex{padding:3px 0 5px}
.sam-ce-bron{font-size:10px;font-weight:700;color:var(--mu);display:block;margin-bottom:3px;opacity:.75}
.sam-ce-v{font-size:12.5px;color:var(--dk);line-height:1.55;font-style:italic}
.sam-ce-sep{height:1px;background:var(--bo);margin:8px 0}
/* ── Sam: print knop (fase 6) ── */
.sam-print-btn{margin-top:8px;background:transparent;color:var(--mu);border:1.5px solid var(--bo);border-radius:10px;padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);width:100%;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.sam-print-btn:hover{border-color:var(--or);color:var(--or);background:rgba(var(--or-rgb),.05)}
.fm{display:inline-block;background:var(--s);border:1px solid #C5D9F5;border-radius:6px;padding:2px 8px;font-family:monospace;font-size:12px;color:#1a56c4;margin:2px 3px}

/* ── THEME TOGGLE ─────────────────────────────── */
.theme-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--bo);background:var(--s);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;line-height:1;color:var(--mu)}
.theme-btn:hover{background:var(--bg2);border-color:var(--bo2);transform:rotate(15deg)}
.theme-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ── SLBL (legacy compat) ─────────────────────── */
.slbl{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
/* ── QUIZ MODE ────────────────────────────────── */
#sc-qmode{background:#07090e;min-height:100vh;position:relative;overflow:hidden}
/* Animated orb background */
.qm-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.qm-orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.qm-orb-1{width:480px;height:480px;background:radial-gradient(circle at center,rgba(251,191,36,.22) 0%,transparent 70%);top:-120px;left:-140px;animation:qmOrb1 11s ease-in-out infinite}
.qm-orb-2{width:420px;height:420px;background:radial-gradient(circle at center,rgba(96,165,250,.18) 0%,transparent 70%);top:60px;right:-140px;animation:qmOrb2 13s ease-in-out infinite}
.qm-orb-3{width:360px;height:360px;background:radial-gradient(circle at center,rgba(167,139,250,.16) 0%,transparent 70%);bottom:-60px;left:30%;animation:qmOrb3 9s ease-in-out infinite}
/* Dot grid overlay */
.qm-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 40%,transparent 100%)}
/* Vignette */
.qm-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 100% 100% at 50% 0%,transparent 40%,rgba(7,9,14,.85) 100%)}
@keyframes qmOrb1{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(30px,24px) scale(1.06)}70%{transform:translate(-18px,14px) scale(.97)}}
@keyframes qmOrb2{0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(-24px,30px) scale(1.04)}65%{transform:translate(16px,-20px) scale(.96)}}
@keyframes qmOrb3{0%,100%{transform:translate(0,0) scale(1)}45%{transform:translate(20px,-26px) scale(1.07)}75%{transform:translate(-14px,18px) scale(.98)}}
.qmw{padding:0 20px 56px;max-width:560px;margin:0 auto;position:relative;z-index:1}
.qmw-header{padding:32px 0 24px}
.qmw-eyebrow{font-size:11px;font-weight:700;color:var(--or);text-transform:uppercase;letter-spacing:1.8px;margin-bottom:10px}
.qmw h2{font-family:var(--font-head);color:#fff;font-size:26px;font-weight:800;margin-bottom:6px;letter-spacing:-.4px;line-height:1.2}
.qmsub{color:rgba(255,255,255,.35);font-size:13px;margin-bottom:0;line-height:1.6}
.qmc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.qmc{grid-template-columns:1fr}}
/* Card base */
.qmcd{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:20px 18px 18px;cursor:pointer;transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s,border-color .18s,background .18s;display:flex;flex-direction:column;position:relative;overflow:hidden}
.qmcd::before{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(ellipse at 0% 0%,var(--qm-glow,rgba(255,255,255,.04)),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.qmcd:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.45),0 0 0 1px var(--qm-border,rgba(255,255,255,.14));border-color:var(--qm-border,rgba(255,255,255,.14));background:rgba(255,255,255,.06)}
.qmcd:hover::before{opacity:1}
/* Icon box */
.qmci{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--qm-icon-bg,rgba(255,255,255,.08));flex-shrink:0;transition:transform .2s}
.qmcd:hover .qmci{transform:scale(1.08)}
.qmci svg{width:20px;height:20px;stroke:var(--qm-color,rgba(255,255,255,.8));fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Card text */
.qmcd h3{font-family:var(--font-head);color:#fff;font-size:16px;margin-bottom:5px;font-weight:700;letter-spacing:-.15px}
.qmcd p{color:rgba(255,255,255,.42);font-size:12px;line-height:1.65;margin:0;flex:1}
/* Tags */
.qm-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.qm-tag{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:7px;color:var(--qm-color,rgba(255,255,255,.55));background:var(--qm-tag-bg,rgba(255,255,255,.07));border:1px solid var(--qm-tag-bd,rgba(255,255,255,.1));white-space:nowrap;letter-spacing:.1px}
/* Arrow */
.qm-arrow{position:absolute;top:18px;right:18px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .18s,border-color .18s}
.qm-arrow svg{width:12px;height:12px;stroke:rgba(255,255,255,.3);stroke-width:2.5;fill:none;transition:stroke .18s}
.qmcd:hover .qm-arrow{background:var(--qm-icon-bg);border-color:var(--qm-border);transform:translate(2px,-2px)}
.qmcd:hover .qm-arrow svg{stroke:var(--qm-color)}
/* Colour themes */
.qm-snel{--qm-color:#fbbf24;--qm-icon-bg:rgba(251,191,36,.14);--qm-border:rgba(251,191,36,.32);--qm-glow:rgba(251,191,36,.07);--qm-tag-bg:rgba(251,191,36,.1);--qm-tag-bd:rgba(251,191,36,.2)}
.qm-oud{--qm-color:#60a5fa;--qm-icon-bg:rgba(96,165,250,.14);--qm-border:rgba(96,165,250,.32);--qm-glow:rgba(96,165,250,.07);--qm-tag-bg:rgba(96,165,250,.1);--qm-tag-bd:rgba(96,165,250,.2)}
.qm-flash{--qm-color:#a78bfa;--qm-icon-bg:rgba(167,139,250,.14);--qm-border:rgba(167,139,250,.32);--qm-glow:rgba(167,139,250,.07);--qm-tag-bg:rgba(167,139,250,.1);--qm-tag-bd:rgba(167,139,250,.2)}
.qm-race{--qm-color:#f87171;--qm-icon-bg:rgba(248,113,113,.14);--qm-border:rgba(248,113,113,.32);--qm-glow:rgba(248,113,113,.07);--qm-tag-bg:rgba(248,113,113,.1);--qm-tag-bd:rgba(248,113,113,.2)}
/* Resume chip */
.qm-resume-chip{background:rgba(var(--or-rgb),.1);border:1px solid rgba(var(--or-rgb),.28);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;color:#fff;font-size:13px;font-weight:600;transition:background .2s}
.qm-resume-chip:hover{background:rgba(var(--or-rgb),.2)}
.qm-resume-info{flex:1;min-width:0}
.qm-resume-label{font-size:11px;color:var(--or);font-weight:700;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}
.qm-resume-bar{height:3px;background:rgba(255,255,255,.08);border-radius:4px;margin-top:6px;overflow:hidden}
.qm-resume-bar-fill{height:100%;background:var(--or);border-radius:4px;transition:width .4s}
.pill{display:inline-block;margin-top:10px;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600}
.ps{background:var(--orl);color:var(--or)}
.po{background:#EDE9FE;color:#7C3AED}
/* ── QUIZ ─────────────────────────────────────── */
#sc-quiz{background:linear-gradient(180deg, #0A0C10 0%, #1a1f2e 100%)}
.qtb{display:flex;align-items:center;gap:9px;padding:15px 16px 0}
.ql{font-family:var(--font-head);font-weight:800;font-size:18px;color:#fff}
.qmeta{color:rgba(255,255,255,.4);font-size:12px;margin-left:auto;text-align:right;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qstp{background:rgba(255,255,255,.1);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer;font-family:var(--font);transition:all .2s}
.qstp:hover{background:rgba(255,255,255,.18)}
.qpb{height:6px;background:rgba(255,255,255,.08);margin:14px 18px 10px;border-radius:3px}
.qpf{height:100%;background:linear-gradient(90deg, var(--or), #f59e0b);border-radius:3px;transition:width 0.5s ease}
.qring{position:relative;width:56px;height:56px;margin:0 auto 8px;filter:drop-shadow(0 0 8px rgba(var(--or-rgb),.6)) drop-shadow(0 0 2px rgba(var(--or-rgb),.4));transition:filter .5s}
.qring svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg);display:block}
.qring circle{fill:none;stroke-width:4}
.trbg{stroke:rgba(255,255,255,.08)}
.trfg{stroke:var(--or);transition:stroke-dashoffset .9s linear,stroke .4s}
.trn{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:18px;color:#fff;text-shadow:0 0 14px rgba(var(--or-rgb),.8);transition:color .4s,text-shadow .4s;line-height:1}
.qbody{padding:28px 24px 36px;max-width:740px;margin:14px auto 0;background:rgba(255,255,255,0.04);border-radius:24px;backdrop-filter:blur(12px)}
.qctr{font-size:14px;font-weight:600;color:rgba(255,255,255,0.5);text-align:center;margin-bottom:10px;letter-spacing:0.3px}
.qctx{background:rgba(255,255,255,.06);border-radius:14px;padding:16px 18px;margin-bottom:18px;font-size:14px;color:rgba(255,255,255,.72);line-height:1.8;border-left:3px solid rgba(139,92,246,.6)}
.qq{font-family:var(--font-head);font-size:clamp(18px,3vw,24px);font-weight:700;color:#fff;text-align:center;margin-bottom:28px;line-height:1.35}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
@media(max-width:440px){.qopts{grid-template-columns:1fr;gap:8px}.opt{width:100%;font-size:16px;padding:18px}}
.opt{border:none;border-radius:14px;padding:18px 20px;font-size:16px;font-weight:600;cursor:pointer;text-align:left;display:flex;align-items:flex-start;gap:10px;line-height:1.45;transition:all 0.2s ease;font-family:var(--font)}
.opt:hover:not(:disabled){filter:brightness(1.1);transform:scale(1.01)}
.opt:disabled{cursor:default}
.oA{background:#e8445a;color:#fff}
.oB{background:#2563eb;color:#fff}
.oC{background:#d97706;color:#fff}
.oD{background:#16a34a;color:#fff}
.oi{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;margin-top:1px}
.opt.correct{background:#22c55e!important;color:#fff;outline:none;transform:scale(1.04);box-shadow:0 8px 32px rgba(34,197,94,0.55);animation:optPop .45s cubic-bezier(.34,1.5,.64,1)}
@keyframes optPop{0%{transform:scale(1)}40%{transform:scale(1.12)}70%{transform:scale(1.02)}100%{transform:scale(1.04)}}
.opt.wrong{opacity:0.35;transform:scale(0.97)}
.opt.was-correct{background:#22c55e!important;color:#fff;opacity:0.65}
.qfb{background:rgba(255,255,255,.07);border-radius:14px;padding:14px 18px;margin-bottom:16px;animation:fi .2s}
.fbt{font-weight:700;font-size:15px;margin-bottom:3px;font-family:var(--font-head)}
.fbtx{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6}
.fbok .fbt{color:#4ADE80}
.fbno .fbt{color:#F87171}
.fbtm .fbt{color:#F59E0B}
.nxt{width:100%;background:var(--or);color:#fff;border:none;border-radius:14px;padding:18px;font-family:var(--font-head);font-size:17px;font-weight:700;cursor:pointer;transition:all 0.2s ease;letter-spacing:-.2px;box-shadow:0 4px 18px rgba(232,92,13,0.3)}
.nxt:hover{background:#d14f09;box-shadow:0 6px 24px rgba(232,92,13,0.4)}
.nxt:active{transform:scale(0.97)}
/* open question */
.open-wrap{grid-column:1/-1}
.open-input{width:100%;min-height:120px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px 18px;font-size:15px;color:#fff;font-family:var(--font);line-height:1.7;resize:vertical;outline:none}
.open-input::placeholder{color:rgba(255,255,255,.28)}
.open-input:focus{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.nakijk-btn{width:100%;margin-top:12px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:16px;font-family:var(--font-head);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s}
.nakijk-btn:hover{background:rgba(255,255,255,.18)}
.model-antwoord{background:rgba(255,255,255,.07);border-radius:14px;padding:18px 20px;margin-bottom:16px;border-left:3px solid #4ADE80;animation:fi .2s}
.ma-label{font-size:11px;font-weight:700;color:#4ADE80;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.ma-text{font-size:14px;color:rgba(255,255,255,.82);line-height:1.8}
.assess-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.7px;text-align:center;margin-bottom:10px}
.assess-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.assess-btn{border:none;border-radius:14px;padding:16px 10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--font)}
.assess-btn:hover{filter:brightness(1.1);transform:scale(1.03)}
.ab-goed{background:#14532d;color:#4ADE80}
.ab-deels{background:#78350F;color:#FCD34D}
.ab-fout{background:#7F1D1D;color:#F87171}
.assess-rubric{font-size:11px;color:var(--mu);text-align:center;margin:-4px 0 14px;line-height:1.8}
.assess-rubric .ar-g{color:#4ADE80;font-weight:700}.assess-rubric .ar-d{color:#FCD34D;font-weight:700}.assess-rubric .ar-f{color:#F87171;font-weight:700}
.exam-res-card{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.exam-res-link{flex:1;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;text-decoration:none;color:var(--dk);border:1px solid var(--bo);background:var(--s);transition:all .22s;min-width:130px}
.exam-res-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.exam-res-link.er-alle{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.07)}.exam-res-link.er-alle:hover{border-color:rgba(59,130,246,.5)}
.exam-res-link.er-blad{border-color:rgba(var(--or-rgb),.25);background:rgba(var(--or-rgb),.06)}.exam-res-link.er-blad:hover{border-color:rgba(var(--or-rgb),.5)}
.er-info{display:flex;flex-direction:column;gap:1px;flex:1}.er-title{font-size:13px;font-weight:700}.er-sub{font-size:10px;color:var(--mu);font-weight:400}
.ce-bundel-btn{display:block;padding:10px 14px;border-radius:12px;background:rgba(var(--or-rgb),.1);border:1px solid rgba(var(--or-rgb),.3);font-size:13px;font-weight:700;color:var(--or);text-decoration:none;margin-bottom:14px;transition:all .2s;text-align:center}
.ce-bundel-btn:hover{background:rgba(var(--or-rgb),.18);border-color:rgba(var(--or-rgb),.55)}
.ce-jaar-blok{margin-bottom:14px}
.ce-jaar-lbl{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}
.ce-tv-row{display:flex;gap:8px;flex-wrap:wrap}
.ce-tv-col{display:flex;flex-direction:column;gap:5px;flex:1;min-width:120px}
.ce-tv-title{font-size:11px;font-weight:600;color:var(--dk);margin-bottom:2px}
.ce-pdf-btn{display:block;padding:7px 10px;border-radius:9px;background:var(--bg2);border:1px solid var(--bo);font-size:12px;font-weight:600;color:var(--dk);text-decoration:none;transition:all .15s;text-align:center;font-family:var(--font);cursor:pointer;width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.ce-pdf-btn:hover{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.4);color:#60a5fa;transform:translateY(-1px)}
.ce-pdf-cv:hover{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.35);color:#4ade80}
.ce-pdf-tb:hover{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.35);color:#a78bfa}
.ce-archief-card.open .ce-archief-body{display:block!important}
.ce-archief-card.open .ce-arr{transform:rotate(180deg)}
/* ── PDF VIEWER MODAL ────────────────────────── */
#pdf-viewer-modal{position:fixed;inset:0;z-index:9800;display:none;flex-direction:column;background:#070a12;animation:pdfFadeIn .2s ease}
#pdf-viewer-modal.open{display:flex}
@keyframes pdfFadeIn{from{opacity:0}to{opacity:1}}
.pdf-modal-bar{display:flex;align-items:center;gap:10px;padding:0 16px;height:54px;background:rgba(7,10,18,.96);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.pdf-modal-title{flex:1;min-width:0;font-family:var(--font-head);font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-modal-close{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:rgba(255,255,255,.7);padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .18s;flex-shrink:0}
.pdf-modal-close:hover{background:rgba(255,255,255,.18);color:#fff}
.pdf-modal-newtab{background:rgba(var(--or-rgb),.12);border:1px solid rgba(var(--or-rgb),.3);border-radius:10px;color:var(--or);padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .18s;flex-shrink:0;text-decoration:none;display:flex;align-items:center;gap:5px}
.pdf-modal-newtab:hover{background:rgba(var(--or-rgb),.22);border-color:rgba(var(--or-rgb),.55)}
.pdf-modal-body{flex:1;position:relative;overflow:hidden}
#pdf-viewer-iframe{width:100%;height:100%;border:none;display:block}
.pdf-modal-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#070a12;pointer-events:none;transition:opacity .3s}
.pdf-modal-loading.hidden{opacity:0}
.pdf-loader-ring{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--or);animation:pdfSpin .75s linear infinite}
@keyframes pdfSpin{to{transform:rotate(360deg)}}
.pdf-loader-txt{font-size:13px;color:rgba(255,255,255,.4);font-weight:600}
.pdf-modal-error{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#070a12;padding:24px;text-align:center}
.pdf-modal-error.show{display:flex}
.pdf-error-icon{font-size:40px;line-height:1}
.pdf-error-title{font-family:var(--font-head);font-size:18px;font-weight:800;color:#fff;margin-bottom:4px}
.pdf-error-sub{font-size:13px;color:rgba(255,255,255,.45);line-height:1.7;max-width:320px}
.pdf-error-btn{margin-top:8px;padding:12px 24px;background:var(--or);border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font-head);transition:all .2s;text-decoration:none;display:inline-block}
.pdf-error-btn:hover{opacity:.88;transform:translateY(-1px)}
/* ── EXAMEN MODUS ────────────────────────────── */
.exam-entry-btn{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border-radius:14px;background:rgba(239,68,68,.07);border:1.5px solid rgba(239,68,68,.22);color:#f87171;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-head);transition:all .22s;margin-bottom:14px;text-align:left}
.exam-entry-btn:hover{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.45);transform:translateY(-2px);box-shadow:0 6px 18px rgba(239,68,68,.15)}
.exam-entry-icon{font-size:22px;line-height:1;flex-shrink:0}
.exam-entry-text{flex:1;min-width:0}
.exam-entry-title{font-size:14px;font-weight:800;letter-spacing:-.2px;margin-bottom:1px}
.exam-entry-sub{font-size:11.5px;opacity:.7;font-weight:500}
.exam-entry-arr{font-size:16px;font-weight:700;flex-shrink:0;opacity:.6}
/* Examen scherm */
#sc-examen{background:#070a12;min-height:100vh;flex-direction:column}
#sc-examen.on{display:flex}
.ex-nav{height:var(--nav-h);display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;background:rgba(7,10,18,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:100;flex-shrink:0}
.ex-nav-inner{max-width:680px;margin:0 auto;padding:0 16px;width:100%;display:flex;align-items:center;gap:10px}
.ex-nav .bk{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.6);flex-shrink:0}
.ex-nav .bk:hover{background:rgba(255,255,255,.12);color:#fff}
.ex-timer{font-size:17px;font-weight:800;font-family:var(--font-head);letter-spacing:.5px;flex:1;text-align:center;transition:color .4s}
.ex-timer.warn{color:#fbbf24}.ex-timer.danger{color:#f87171;animation:exPulse 1s ease-in-out infinite}
@keyframes exPulse{0%,100%{opacity:1}50%{opacity:.5}}
.ex-score-chip{font-size:12px;font-weight:700;color:rgba(255,255,255,.5);flex-shrink:0;font-family:var(--font-head)}
.ex-prog-bar{height:3px;background:rgba(255,255,255,.07);flex-shrink:0}
.ex-prog-fill{height:100%;background:linear-gradient(90deg,#ef4444,#f97316);transition:width .4s;border-radius:0 2px 2px 0}
/* Intro scherm */
.ex-intro{max-width:680px;margin:0 auto;padding:28px 20px;width:100%}
.ex-intro-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700;color:#f87171;letter-spacing:.5px;margin-bottom:20px}
.ex-intro-title{font-size:24px;font-weight:900;color:#fff;font-family:var(--font-head);letter-spacing:-.5px;margin-bottom:6px;line-height:1.2}
.ex-intro-sub{font-size:14px;color:rgba(255,255,255,.5);margin-bottom:24px}
.ex-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px}
.ex-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 12px;text-align:center}
.ex-stat-val{font-size:22px;font-weight:900;color:#fff;font-family:var(--font-head);line-height:1}
.ex-stat-lbl{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.6px;margin-top:4px;font-weight:600}
.ex-info-box{background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.18);border-radius:14px;padding:14px 16px;margin-bottom:24px;font-size:13px;color:rgba(255,255,255,.65);line-height:1.7}
.ex-info-box strong{color:#fbbf24}
.ex-start-btn{width:100%;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:16px;padding:20px;font-family:var(--font-head);font-size:17px;font-weight:800;cursor:pointer;letter-spacing:-.2px;box-shadow:0 6px 24px rgba(239,68,68,.35);transition:all .2s}
.ex-start-btn:hover{box-shadow:0 8px 32px rgba(239,68,68,.5);transform:translateY(-1px)}
/* Quiz scherm */
.ex-body{max-width:680px;margin:0 auto;padding:20px 20px 100px;width:100%;flex:1}
.ex-opgave-banner{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ex-opgave-banner::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07)}
.ex-context{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px 18px;margin-bottom:16px;font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.85;white-space:pre-line}
.ex-bijlage-note{background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.2);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:12px;color:#fbbf24;line-height:1.6}
.ex-q-header{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.ex-q-nr{font-size:13px;font-weight:800;color:rgba(255,255,255,.3);flex-shrink:0;font-family:var(--font-head)}
.ex-q-pts{font-size:11px;font-weight:700;background:rgba(255,255,255,.07);border-radius:6px;padding:2px 7px;color:rgba(255,255,255,.4);flex-shrink:0}
.ex-vraag{font-size:15.5px;font-weight:700;color:#fff;line-height:1.65;font-family:var(--font-head);letter-spacing:-.1px;flex:1}
.ex-textarea{width:100%;min-height:130px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 18px;font-size:14.5px;color:#fff;font-family:var(--font);line-height:1.75;resize:vertical;outline:none;transition:border-color .2s,background .2s;margin-bottom:14px}
.ex-textarea:focus{border-color:rgba(239,68,68,.45);background:rgba(255,255,255,.07)}
.ex-textarea::placeholder{color:rgba(255,255,255,.2)}
/* Nav balk onderaan */
.ex-bot-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(7,10,18,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.07);padding:12px 20px;z-index:200}
.ex-bot-inner{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:10px}
.ex-prev,.ex-next{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 18px;font-size:14px;font-weight:700;color:rgba(255,255,255,.7);cursor:pointer;font-family:var(--font-head);transition:all .18s;flex-shrink:0}
.ex-prev:hover,.ex-next:hover{background:rgba(255,255,255,.14);color:#fff}
.ex-next.primary{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.35);color:#f87171}
.ex-next.primary:hover{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.55);color:#fca5a5}
.ex-qgrid{flex:1;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-height:54px;overflow:hidden}
.ex-qd{width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:9px;font-weight:700;color:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-family:var(--font-head)}
.ex-qd:hover{background:rgba(255,255,255,.12);color:#fff}
.ex-qd.answered{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:#f87171}
.ex-qd.current{background:rgba(239,68,68,.3);border-color:rgba(239,68,68,.6);color:#fff;transform:scale(1.15)}
.ex-qd.bijlage{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.2);color:#fbbf24}
/* ── EXAMEN SPLIT LAYOUT (tekstboekje naast vragen) ──────── */
#ex-quiz.split{display:flex!important;height:calc(100vh - var(--nav-h) - 3px);overflow:hidden}
.ex-tb-panel{width:46%;max-width:760px;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;flex-shrink:0;background:#14161c;overflow:hidden}
.ex-tb-hdr{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.ex-tb-lbl{font-size:12px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.3px;font-family:var(--font-head)}
.ex-tb-ext{font-size:11px;color:rgba(255,255,255,.35);text-decoration:none;padding:3px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.12);font-family:var(--font);transition:.15s;white-space:nowrap}
.ex-tb-ext:hover{color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3)}
.ex-tb-iframe{flex:1;border:none;width:100%;min-height:0;display:block}
/* Inline tekst panel */
.ex-tb-content{flex:1;overflow-y:auto;min-height:0;background:var(--bg);padding:20px 24px}
.ex-tekst-wrapper{max-width:680px;margin:0 auto;padding-bottom:40px}
.ex-tekst-header{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--bo)}
.ex-tekst-deel{font-size:10px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.ex-tekst-titel{font-size:17px;font-weight:800;color:var(--dk);margin:0 0 5px;line-height:1.35;font-family:var(--font-head)}
.ex-tekst-body{color:var(--dk);line-height:1.75;font-size:14px}
.ex-al{margin-bottom:13px;display:flex;gap:9px;align-items:flex-start}
.ex-al p{margin:0}
.ex-aln{display:inline-block;min-width:18px;font-size:10px;font-weight:700;color:#6366f1;background:rgba(99,102,241,.1);border-radius:4px;padding:2px 5px;line-height:1.5;flex-shrink:0;margin-top:3px;text-align:center}
.ex-tekst-bron-voet{font-size:12px;color:var(--mu);margin-top:18px;padding-top:12px;border-top:1px solid var(--bo)}
.ex-tekst-notities{font-size:11.5px;color:var(--mu);margin-top:12px;line-height:1.7;background:var(--s);border-radius:8px;padding:10px 13px}
.ex-bron-hdr{font-size:11px;font-weight:800;color:#6366f1;text-transform:uppercase;letter-spacing:.7px;background:rgba(99,102,241,.07);border-left:3px solid #6366f1;padding:7px 12px;margin:22px 0 12px;border-radius:0 6px 6px 0}
.ex-gedicht{font-size:14px;line-height:2;color:var(--dk);padding:8px 0}
.ex-al-gedicht{margin:0 0 0 24px;padding:0;display:block}
.ex-al-grijs{color:var(--mu);font-size:12px;font-style:italic;margin-bottom:10px;display:block}
.ex-tb-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--mu);font-size:13px;padding:24px;text-align:center;min-height:200px}
.ex-q-col{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#ex-quiz.split .ex-body{flex:1;overflow-y:auto;max-width:none;margin:0;padding-bottom:24px}
#ex-quiz.split .ex-bot-nav{position:relative;left:auto;right:auto;bottom:auto;flex-shrink:0}
#ex-quiz.split .ex-bot-inner{max-width:none}
/* Mobile: PDF boven, vragen scrollen eronder */
@media(max-width:767px){
  #ex-quiz.split{flex-direction:column;height:auto;overflow:visible}
  .ex-tb-panel{width:100%;max-width:none;height:44vh;border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
  #ex-quiz.split .ex-bot-nav{position:fixed;bottom:0;left:0;right:0}
  #ex-quiz.split .ex-body{overflow-y:visible;padding-bottom:100px}
}
/* Resultaat scherm */
.ex-result-wrap{max-width:680px;margin:0 auto;padding:24px 20px 100px;width:100%}
.ex-result-hero{text-align:center;margin-bottom:28px}
.ex-grade-circle{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#dc2626);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 8px 32px rgba(239,68,68,.4)}
.ex-grade-num{font-size:32px;font-weight:900;color:#fff;font-family:var(--font-head);line-height:1}
.ex-grade-lbl{font-size:9px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.ex-result-title{font-size:20px;font-weight:900;color:#fff;font-family:var(--font-head);margin-bottom:4px;letter-spacing:-.3px}
.ex-result-sub{font-size:13px;color:rgba(255,255,255,.45)}
.ex-score-bar-wrap{background:rgba(255,255,255,.05);border-radius:8px;height:10px;margin:16px 0;overflow:hidden}
.ex-score-bar-fill{height:100%;background:linear-gradient(90deg,#ef4444,#f97316);border-radius:8px;transition:width 1s ease}
.ex-self-total{font-size:13px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:24px}
.ex-self-total strong{color:#fff}
/* Per-vraag nakijk kaart */
.ex-rev-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:16px 18px;margin-bottom:12px;transition:border-color .2s}
.ex-rev-card.graded-goed{border-color:rgba(74,222,128,.25);background:rgba(74,222,128,.03)}
.ex-rev-card.graded-deels{border-color:rgba(251,191,36,.2);background:rgba(251,191,36,.02)}
.ex-rev-card.graded-fout{border-color:rgba(248,113,113,.15)}
.ex-rev-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ex-rev-nr{font-size:11px;font-weight:800;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.5px}
.ex-rev-pts-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.4);margin-left:auto}
.ex-rev-vraag{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.85);line-height:1.5;margin-bottom:10px;font-family:var(--font-head)}
.ex-rev-jouw{font-size:11px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.ex-rev-jouw-text{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7;padding:10px 12px;background:rgba(255,255,255,.04);border-radius:10px;white-space:pre-wrap;margin-bottom:10px;font-style:italic;min-height:36px}
.ex-rev-model{font-size:11px;font-weight:700;color:#4ade80;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.ex-rev-model-text{font-size:13px;color:rgba(255,255,255,.7);line-height:1.75;padding:10px 12px;background:rgba(74,222,128,.05);border:1px solid rgba(74,222,128,.12);border-radius:10px;white-space:pre-wrap;margin-bottom:10px}
.ex-rev-rubric{font-size:11.5px;color:rgba(255,255,255,.35);line-height:1.65;padding:8px 12px;background:rgba(255,255,255,.02);border-radius:8px;margin-bottom:12px;border-left:2px solid rgba(255,255,255,.08)}
.ex-rev-grade{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.ex-rev-grade-btn{border:none;border-radius:12px;padding:10px 6px;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--font);opacity:.7}
.ex-rev-grade-btn:hover{opacity:1;transform:scale(1.04)}
.ex-rev-grade-btn.selected{opacity:1;transform:scale(1.06)}
.rg-goed{background:#14532d;color:#4ade80}.rg-deels{background:#78350f;color:#fcd34d}.rg-fout{background:#7f1d1d;color:#f87171}
.ex-rev-bijlage{background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.15);border-radius:10px;padding:10px 12px;font-size:12px;color:#fbbf24;margin-bottom:10px;line-height:1.6}
.ex-done-btn{width:100%;background:rgba(74,222,128,.12);border:1.5px solid rgba(74,222,128,.25);color:#4ade80;border-radius:16px;padding:18px;font-family:var(--font-head);font-size:16px;font-weight:800;cursor:pointer;transition:all .2s;margin-top:10px}
.ex-done-btn:hover{background:rgba(74,222,128,.2);box-shadow:0 6px 24px rgba(74,222,128,.2)}
/* Bijlage knoppen — intro + FAB */
.ex-bijlage-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.ex-bijlage-btn{display:flex;align-items:center;gap:7px;padding:11px 16px;border-radius:12px;border:1.5px solid rgba(249,115,22,.4);background:rgba(249,115,22,.08);color:#fb923c;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-head);transition:all .18s}
.ex-bijlage-btn:hover{background:rgba(249,115,22,.16);border-color:rgba(249,115,22,.7)}
.ex-bijlage-btn.cv{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.07);color:#4ade80}
.ex-bijlage-btn.cv:hover{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.7)}
.ex-bijlage-fab{position:fixed;bottom:88px;right:14px;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.ex-bijlage-fab-btn{display:flex;align-items:center;gap:7px;padding:10px 16px;border-radius:24px;border:none;background:linear-gradient(135deg,#f97316,#fb923c);color:#fff;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--font-head);box-shadow:0 4px 14px rgba(249,115,22,.4);transition:all .18s;white-space:nowrap;pointer-events:auto}
.ex-bijlage-fab-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.55)}
/* ── LEERPAD ──────────────────────────────────── */
/* ══════════════════════════════════════════════
   LEERPAD — FULL REDESIGN (game-map dark theme)
   ══════════════════════════════════════════════ */
#sc-leerpad{background:linear-gradient(180deg,#070a12 0%,#0c1020 50%,#08090f 100%);min-height:100vh}
/* Sticky nav on dark bg */
.lp-nav{height:var(--nav-h);display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;background:rgba(7,10,18,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:100}
.lp-nav-inner{max-width:680px;margin:0 auto;padding:0 20px;width:100%;display:flex;align-items:center;gap:12px}
.lp-nav .bk{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.lp-nav .bk:hover{background:rgba(255,255,255,.12);color:#fff}
.lp-nav #lp-nav-title{color:#fff}
/* ── HERO ─────────────────────────────────── */
.lp-hero{padding:32px 20px 28px;text-align:center;position:relative;overflow:hidden}
.lp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,rgba(var(--or-rgb),.35) 0%,transparent 55%);pointer-events:none}
.lp-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--or-rgb),.3),transparent);pointer-events:none}
/* floating orbs */
.lp-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:.18}
.lp-orb-1{width:300px;height:300px;top:-80px;left:-60px;background:rgba(var(--or-rgb),1);animation:lpOrb1 12s ease-in-out infinite alternate}
.lp-orb-2{width:200px;height:200px;top:0;right:-40px;background:#8b5cf6;animation:lpOrb2 16s ease-in-out infinite alternate}
@keyframes lpOrb1{from{transform:translate(0,0)}to{transform:translate(40px,30px)}}
@keyframes lpOrb2{from{transform:translate(0,0)}to{transform:translate(-30px,20px)}}
.lp-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--or-rgb),.15);color:var(--or);font-size:11px;font-weight:700;padding:5px 14px;border-radius:20px;border:1px solid rgba(var(--or-rgb),.3);margin-bottom:16px;letter-spacing:.5px;position:relative;z-index:1}
.lp-hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s ease-in-out infinite}
.lp-hero-title{font-family:var(--font-head);font-size:26px;font-weight:900;color:#fff;margin-bottom:6px;letter-spacing:-.5px;position:relative;z-index:1}
.lp-hero-sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:22px;position:relative;z-index:1}
/* Stats row */
.lp-hero-stats{display:flex;gap:0;justify-content:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:14px 0;max-width:340px;margin:0 auto;position:relative;z-index:1;backdrop-filter:blur(8px)}
.lp-stat{text-align:center;flex:1}
.lp-stat-num{font-size:26px;font-weight:900;color:var(--or);font-family:var(--font-head);line-height:1;text-shadow:0 0 20px rgba(var(--or-rgb),.5)}
.lp-stat-lbl{font-size:9px;color:rgba(255,255,255,.35);font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-top:3px}
.lp-stat-sep{width:1px;background:rgba(255,255,255,.1);align-self:stretch;flex:0 0 1px}
/* ── CHAMPION BANNER ───────────────────── */
.lp-champion{margin:20px 16px 0;border-radius:20px;padding:24px 20px;background:linear-gradient(135deg,rgba(250,204,21,.18) 0%,rgba(234,179,8,.08) 100%);border:2px solid rgba(250,204,21,.45);text-align:center;animation:champIn .7s cubic-bezier(.34,1.2,.64,1);box-shadow:0 0 40px rgba(250,204,21,.15),0 8px 32px rgba(0,0,0,.3)}
@keyframes champIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.lp-champ-emoji{font-size:52px;display:block;margin-bottom:12px;animation:lpBounce 1.8s ease-in-out infinite;filter:drop-shadow(0 4px 16px rgba(250,204,21,.5))}
@keyframes lpBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.06)}}
.lp-champ-title{font-family:var(--font-head);font-size:20px;font-weight:900;color:#fcd34d;margin-bottom:6px;text-shadow:0 0 20px rgba(252,211,77,.4)}
.lp-champ-sub{font-size:13px;color:rgba(255,255,255,.5)}
/* ── OVERALL PROGRESS ──────────────────── */
.lp-overall{margin:20px 16px 0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:16px 18px;backdrop-filter:blur(8px)}
.lp-overall-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lp-overall-label{font-size:13px;font-weight:700;color:rgba(255,255,255,.7)}
.lp-overall-pct{font-size:16px;font-weight:900;color:var(--or);font-family:var(--font-head);text-shadow:0 0 12px rgba(var(--or-rgb),.5)}
.lp-overall-bar{background:rgba(255,255,255,.08);border-radius:8px;height:12px;overflow:hidden}
.lp-overall-fill{height:100%;background:linear-gradient(90deg,var(--or),#f59e0b,#fcd34d);border-radius:8px;transition:width 1.4s cubic-bezier(.34,1.1,.64,1);position:relative;overflow:hidden;width:0;box-shadow:0 0 12px rgba(var(--or-rgb),.5)}
.lp-overall-fill::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:lpShim 2.2s ease-in-out infinite .8s}
@keyframes lpShim{0%{left:-60%}100%{left:120%}}
/* ── SECTION LABEL ─────────────────────── */
.lp-section-lbl{font-size:10px;font-weight:700;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:1px;padding:20px 20px 12px;text-align:center}
/* ── PATH CONTAINER ────────────────────── */
.lp-path{max-width:560px;margin:0 auto;padding:0 16px 100px;position:relative}
/* ── CONNECTOR ─────────────────────────── */
.lp-conn{display:flex;flex-direction:column;align-items:center;padding:4px 0;position:relative;z-index:1}
.lp-conn-line{width:4px;height:44px;background:rgba(255,255,255,.08);border-radius:3px;position:relative;overflow:hidden}
.lp-conn-fill{position:absolute;inset:0;border-radius:3px;background:linear-gradient(180deg,var(--or),#f59e0b);transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.34,1.1,.64,1) .4s;box-shadow:0 0 8px rgba(var(--or-rgb),.6)}
.lp-conn-fill.done{transform:scaleY(1)}
/* ── NODE ROW ──────────────────────────── */
.lp-node-wrap{opacity:0;transform:translateY(20px);animation:lpNodeIn .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes lpNodeIn{to{opacity:1;transform:translateY(0)}}
.lp-row{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.lp-row.r-left{flex-direction:row}
.lp-row.r-right{flex-direction:row-reverse}
.lp-row-mid{flex:0 0 88px;display:flex;flex-direction:column;align-items:center}
.lp-row-side{flex:1;min-width:0}
/* ── RING ──────────────────────────────── */
.lp-ring-outer{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center}
.lp-ring-svg{overflow:visible;display:block}
.lp-ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:6}
.lp-ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transform-origin:50% 50%;transition:stroke-dashoffset 1.5s cubic-bezier(.34,1.1,.64,1) .25s,stroke .4s}
/* Ring glow for done = green, next = orange pulse */
.lp-ring-glow{position:absolute;inset:-8px;border-radius:50%;pointer-events:none}
.lp-ring-glow-done{box-shadow:0 0 0 3px rgba(74,222,128,.25),0 0 24px rgba(74,222,128,.35),0 0 48px rgba(74,222,128,.12);animation:lpGlowDone 3s ease-in-out infinite}
@keyframes lpGlowDone{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.25),0 0 24px rgba(74,222,128,.35),0 0 48px rgba(74,222,128,.12)}50%{box-shadow:0 0 0 5px rgba(74,222,128,.3),0 0 36px rgba(74,222,128,.5),0 0 60px rgba(74,222,128,.18)}}
.lp-ring-glow-next{box-shadow:0 0 0 3px rgba(var(--or-rgb),.3),0 0 24px rgba(var(--or-rgb),.45);animation:lpGlowNext 1.8s ease-in-out infinite}
@keyframes lpGlowNext{0%,100%{box-shadow:0 0 0 3px rgba(var(--or-rgb),.3),0 0 20px rgba(var(--or-rgb),.4)}50%{box-shadow:0 0 0 6px rgba(var(--or-rgb),.2),0 0 36px rgba(var(--or-rgb),.65),0 0 0 10px rgba(var(--or-rgb),.06)}}
/* % label below ring */
.lp-ring-pct{font-size:11px;font-weight:800;text-align:center;margin-top:5px;height:16px;line-height:16px;letter-spacing:.3px}
/* ── NODE CARD ─────────────────────────── */
.lp-card{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);border-radius:16px;padding:14px 15px 12px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .22s,box-shadow .22s,transform .22s;backdrop-filter:blur(8px)}
.lp-card:hover{border-color:rgba(var(--or-rgb),.45);transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 0 1px rgba(var(--or-rgb),.15)}
.lp-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 60%);pointer-events:none}
.lp-card.s-done{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.07);box-shadow:0 0 20px rgba(74,222,128,.08)}
.lp-card.s-done:hover{border-color:rgba(74,222,128,.6);box-shadow:0 8px 28px rgba(74,222,128,.15)}
.lp-card.s-review{border-color:rgba(249,115,22,.35);background:rgba(249,115,22,.06)}
.lp-card.s-next{border-color:rgba(var(--or-rgb),.55);background:rgba(var(--or-rgb),.07);box-shadow:0 0 0 3px rgba(var(--or-rgb),.12),0 6px 24px rgba(var(--or-rgb),.18)}
.lp-card-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.lp-card-letter{width:30px;height:30px;border-radius:9px;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-head)}
.lp-card-name{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);line-height:1.25;flex:1;min-width:0}
.lp-card-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;margin-bottom:8px;line-height:1.4}
.lp-card-badge.s-done{background:rgba(74,222,128,.18);color:#4ade80;border:1px solid rgba(74,222,128,.25)}
.lp-card-badge.s-started{background:rgba(var(--or-rgb),.18);color:var(--or);border:1px solid rgba(var(--or-rgb),.25)}
.lp-card-badge.s-locked{background:rgba(255,255,255,.06);color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.08)}
.lp-card-badge.s-review{background:rgba(249,115,22,.18);color:#f97316;border:1px solid rgba(249,115,22,.25)}
.lp-card-badge.s-next{background:rgba(var(--or-rgb),.22);color:var(--or);border:1px solid rgba(var(--or-rgb),.4)}
/* Mini bar */
.lp-mini-bar{background:rgba(255,255,255,.08);border-radius:4px;height:5px;margin-bottom:9px;overflow:hidden}
.lp-mini-fill{height:100%;border-radius:4px;transition:width 1.2s cubic-bezier(.34,1.1,.64,1) .35s;width:0}
/* Expand extra */
.lp-card-extra{overflow:hidden;max-height:0;transition:max-height .38s cubic-bezier(.4,0,.2,1)}
.lp-card-extra.open{max-height:220px}
.lp-card-desc{font-size:11.5px;color:rgba(255,255,255,.45);margin-bottom:11px;line-height:1.65;padding-top:6px;border-top:1px solid rgba(255,255,255,.07)}
.lp-card-btns{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:2px}
.lp-qbtn{flex:1;min-width:80px;padding:9px 8px;border-radius:11px;font-size:11.5px;font-weight:700;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);cursor:pointer;font-family:var(--font);transition:all .18s;white-space:nowrap;text-align:center}
.lp-qbtn:hover{background:rgba(var(--or-rgb),.18);border-color:rgba(var(--or-rgb),.45);color:var(--or);transform:translateY(-1px)}
.lp-qbtn.primary{background:linear-gradient(135deg,var(--or),#f59e0b);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(var(--or-rgb),.45);font-size:12px}
.lp-qbtn.primary:hover{box-shadow:0 6px 22px rgba(var(--or-rgb),.65);transform:translateY(-2px)}
/* Pulsing next pill */
.lp-next-pill{position:absolute;top:9px;right:9px;background:linear-gradient(135deg,var(--or),#f59e0b);color:#fff;font-size:9px;font-weight:800;padding:3px 9px;border-radius:10px;letter-spacing:.5px;text-transform:uppercase;animation:lpPulse 2s ease-in-out infinite;box-shadow:0 3px 10px rgba(var(--or-rgb),.5)}
@keyframes lpPulse{0%,100%{box-shadow:0 3px 10px rgba(var(--or-rgb),.5)}50%{box-shadow:0 3px 20px rgba(var(--or-rgb),.8),0 0 0 5px rgba(var(--or-rgb),.12)}}
/* Locked domain card */
.lp-card.lp-locked{opacity:.45;filter:grayscale(.6);cursor:not-allowed;border-color:rgba(255,255,255,.07)!important;box-shadow:none!important}
.lp-card.lp-locked:hover{transform:none!important;border-color:rgba(255,255,255,.07)!important}
.lp-ring-outer.lp-locked-ring svg .lp-ring-bg{stroke:rgba(255,255,255,.06)}
/* Simulatietoets entry button */
.sim-entry-btn{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border-radius:14px;background:rgba(99,102,241,.08);border:1.5px solid rgba(99,102,241,.25);color:#818cf8;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-head);transition:all .22s;margin-bottom:14px;text-align:left}
.sim-entry-btn:hover{background:rgba(99,102,241,.14);border-color:rgba(99,102,241,.45);transform:translateY(-2px);box-shadow:0 6px 18px rgba(99,102,241,.15)}
.sim-entry-icon{width:36px;height:36px;border-radius:10px;background:rgba(99,102,241,.18);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.sim-entry-text{flex:1;min-width:0}
.sim-entry-title{font-size:13px;font-weight:800;color:#818cf8}
.sim-entry-sub{font-size:11px;color:var(--mu);font-weight:500;margin-top:1px;font-family:var(--font)}
.sim-entry-arr{font-size:16px;color:#818cf8;opacity:.6}
/* Simulatietoets result cards */
.sim-dom-card{background:var(--s);border:1px solid var(--bo);border-radius:14px;padding:13px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px}
.sim-dom-letter{width:34px;height:34px;border-radius:10px;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-head)}
.sim-dom-info{flex:1;min-width:0}
.sim-dom-name{font-size:13px;font-weight:700;color:var(--dk)}
.sim-dom-bar-wrap{height:4px;background:var(--bo2);border-radius:3px;margin-top:5px;overflow:hidden}
.sim-dom-bar{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.34,1.1,.64,1)}
.sim-dom-score{font-size:15px;font-weight:900;font-family:var(--font-head);flex-shrink:0}
.sim-opt{padding:14px 16px;border-radius:12px;border:1.5px solid var(--bo);background:var(--s);color:var(--dk);font-size:15px;font-weight:600;cursor:pointer;text-align:left;transition:all .18s;font-family:var(--font);width:100%}
.sim-opt:hover:not([disabled]){border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.06);color:#818cf8}
.sim-opt.correct{border-color:#22c55e;background:rgba(34,197,94,.08);color:#16a34a}
.sim-opt.wrong{border-color:#ef4444;background:rgba(239,68,68,.07);color:#dc2626}
.sim-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.sim-mode-card{border:2px solid var(--bo);border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;background:var(--s);transition:all .18s;user-select:none}
.sim-mode-card:hover{border-color:#818cf8;background:rgba(99,102,241,.05);transform:translateY(-2px)}
.sim-mode-card.selected{border-color:var(--sim-mc-clr,#6366f1);background:rgba(var(--sim-mc-rgb,99 102 241),.08);box-shadow:0 0 0 3px rgba(var(--sim-mc-rgb,99 102 241),.15)}
.sim-mode-card.selected .sim-mode-name{color:var(--sim-mc-clr,#6366f1)}
.sim-mc-oe.selected{--sim-mc-clr:#22c55e;--sim-mc-rgb:34 197 94}
.sim-mc-no.selected{--sim-mc-clr:#6366f1;--sim-mc-rgb:99 102 241}
.sim-mc-ex.selected{--sim-mc-clr:#ef4444;--sim-mc-rgb:239 68 68}
.sim-mode-icon{font-size:26px;margin-bottom:6px}
.sim-mode-name{font-size:13px;font-weight:800;font-family:var(--font-head);color:var(--dk);margin-bottom:3px}
.sim-mode-desc{font-size:10px;color:var(--mu);line-height:1.4;font-weight:500}
.sim-mode-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:20px;margin-top:6px}
.sim-mc-oe .sim-mode-badge{background:rgba(34,197,94,.12);color:#16a34a;border:1px solid rgba(34,197,94,.25)}
.sim-mc-no .sim-mode-badge{background:rgba(99,102,241,.12);color:#818cf8;border:1px solid rgba(99,102,241,.25)}
.sim-mc-ex .sim-mode-badge{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.sim-mode-indicator{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-left:8px}
.sim-mi-oe{background:rgba(34,197,94,.12);color:#16a34a;border:1px solid rgba(34,197,94,.25)}
.sim-mi-no{background:rgba(99,102,241,.12);color:#818cf8;border:1px solid rgba(99,102,241,.25)}
.sim-mi-ex{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.sim-ctx-box{background:var(--s);border-left:3px solid #6366f1;border-radius:0 10px 10px 0;padding:14px 16px;margin-bottom:18px;font-size:14px;line-height:1.65;color:var(--dk);font-style:italic}
.sim-ctx-label{font-size:10px;font-weight:700;color:#818cf8;text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px;font-style:normal}
.sim-open-area{}
.sim-open-ta{width:100%;min-height:120px;border:1.5px solid var(--bo);border-radius:12px;padding:13px 15px;font-size:15px;font-family:var(--font);color:var(--dk);background:var(--s);resize:vertical;line-height:1.6;margin-bottom:12px;box-sizing:border-box}
.sim-open-ta:focus{outline:none;border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.sim-nakijk-btn{width:100%;padding:13px;background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--font-head);margin-bottom:14px}
.sim-model-blok{margin-bottom:18px}
.sim-ma-label{font-size:11px;font-weight:800;color:#818cf8;text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px}
.sim-ma-text{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.18);border-radius:10px;padding:13px 15px;font-size:14px;line-height:1.65;color:var(--dk);margin-bottom:14px;white-space:pre-wrap}
.sim-assess-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sim-ab{padding:11px 8px;border-radius:11px;border:1.5px solid var(--bo);background:var(--s);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-head);display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .18s}
.sim-ab-g{color:#22c55e}.sim-ab-g:not([disabled]):hover{background:rgba(34,197,94,.1);border-color:#22c55e}
.sim-ab-d{color:#f97316}.sim-ab-d:not([disabled]):hover{background:rgba(249,115,22,.1);border-color:#f97316}
.sim-ab-f{color:#ef4444}.sim-ab-f:not([disabled]):hover{background:rgba(239,68,68,.1);border-color:#ef4444}
.sim-type-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:2px 9px;border-radius:20px;margin-bottom:12px}
.sim-type-mc{background:rgba(99,102,241,.1);color:#818cf8;border:1px solid rgba(99,102,241,.2)}
.sim-type-open{background:rgba(249,115,22,.1);color:#f97316;border:1px solid rgba(249,115,22,.2)}
.sim-info-card{background:var(--s);border:1px solid var(--bo);border-radius:12px;padding:14px;text-align:center}
.sim-info-num{font-size:24px;font-weight:900;color:#818cf8;font-family:var(--font-head)}
.sim-info-lbl{font-size:10px;color:var(--mu);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-top:3px}
/* Leerpad entry card on detail screen */
.lp-ec{position:relative;overflow:hidden;border-radius:18px;padding:18px 18px 14px;margin-bottom:16px;cursor:pointer;border:1.5px solid rgba(var(--or-rgb),.28);background:linear-gradient(135deg,var(--cd-bg2),var(--cd-bg1));transition:border-color .22s,box-shadow .22s,transform .22s}
.lp-ec:hover{border-color:rgba(var(--or-rgb),.55);transform:translateY(-2px);box-shadow:0 8px 32px rgba(var(--or-rgb),.18),0 2px 8px rgba(0,0,0,.12)}
.lp-ec-glow{position:absolute;top:-60px;right:-40px;width:240px;height:240px;background:radial-gradient(circle,rgba(var(--or-rgb),.18) 0%,transparent 65%);pointer-events:none;transition:opacity .3s}
.lp-ec:hover .lp-ec-glow{opacity:1.5}
.lp-ec-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;position:relative;z-index:1}
.lp-ec-icon-wrap{width:44px;height:44px;border-radius:13px;background:rgba(var(--or-rgb),.2);border:1px solid rgba(var(--or-rgb),.35);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .22s}
.lp-ec:hover .lp-ec-icon-wrap{transform:scale(1.1) rotate(-5deg)}
.lp-ec-icon{font-size:22px;line-height:1}
.lp-ec-info{flex:1;min-width:0}
.lp-ec-label{font-size:10px;font-weight:700;color:var(--or);text-transform:uppercase;letter-spacing:.8px;opacity:.8;margin-bottom:2px}
.lp-ec-title{font-size:14px;font-weight:800;color:#fff;line-height:1.3;font-family:var(--font-head);letter-spacing:-.2px}
.lp-ec-sub{font-size:11.5px;color:rgba(255,255,255,.45);margin-top:2px;font-weight:500}
.lp-ec-cta{display:flex;align-items:center;flex-shrink:0;background:var(--or);color:#fff;font-size:12px;font-weight:800;padding:7px 14px;border-radius:10px;letter-spacing:.2px;box-shadow:0 3px 12px rgba(var(--or-rgb),.4);transition:box-shadow .2s,transform .2s;font-family:var(--font-head);white-space:nowrap}
.lp-ec:hover .lp-ec-cta{box-shadow:0 5px 20px rgba(var(--or-rgb),.6);transform:translateX(2px)}
/* Domain dots row */
.lp-ec-dots{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;position:relative;z-index:1}
.lp-ec-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.1);transition:background .4s,border-color .4s,transform .3s;flex-shrink:0}
.lp-ec-dot.d-started{background:rgba(var(--or-rgb),.5);border-color:rgba(var(--or-rgb),.7)}
.lp-ec-dot.d-done{background:#4ade80;border-color:#22c55e;box-shadow:0 0 5px rgba(74,222,128,.5)}
.lp-ec-dot.d-review{background:#f97316;border-color:#ea580c}
/* Progress bar */
.lp-ec-bar-wrap{background:rgba(255,255,255,.08);border-radius:6px;height:5px;overflow:hidden;position:relative;z-index:1;margin-bottom:8px}
.lp-ec-bar{height:100%;background:linear-gradient(90deg,var(--or),#f59e0b);border-radius:6px;transition:width 1.2s cubic-bezier(.34,1.1,.64,1);position:relative;overflow:hidden}
.lp-ec-bar::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:lpShim 2.2s ease-in-out infinite .6s}
.lp-ec-foot{font-size:11px;color:rgba(255,255,255,.4);font-weight:600;position:relative;z-index:1}
/* Leerpad dots on home subject cards */
.card-lp-dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}
.card-lp-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);flex-shrink:0;transition:background .3s}
.card-lp-dot.cld-started{background:rgba(var(--or-rgb),.6)}
.card-lp-dot.cld-done{background:#4ade80;box-shadow:0 0 4px rgba(74,222,128,.5)}
.ab-icon{font-size:20px}
.ab-txt{font-size:12px}
/* ── OUD-EXAMEN REDESIGN ─────────────────────── */
/* Split layout wrapper */
.quiz-split{display:flex;flex-direction:column;gap:0;width:100%}
.quiz-lhs,.quiz-rhs{width:100%}
@media(min-width:700px){
  #sc-quiz.oud-mode.has-ctx .quiz-split{flex-direction:row;gap:22px;align-items:flex-start}
  #sc-quiz.oud-mode.has-ctx .quiz-lhs{flex:0 0 46%;max-width:46%}
  #sc-quiz.oud-mode.has-ctx .quiz-rhs{flex:1;min-width:0}
}
/* Oud mode background */
#sc-quiz.oud-mode{background:linear-gradient(160deg,#07090e 0%,#0b1022 55%,#09101f 100%)}
/* Widen the qbody for oud mode */
#sc-quiz.oud-mode .qbody{max-width:1040px;background:transparent;padding:16px 20px 48px}
/* Context passage card */
#sc-quiz.oud-mode .qctx{background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.22);border-left:3px solid #60a5fa;border-radius:18px;padding:52px 18px 18px;margin-bottom:0;position:relative;overflow:hidden;line-height:1.9;white-space:pre-wrap}
#sc-quiz.oud-mode .qctx::before{content:'📄 Tekstfragment';position:absolute;top:0;left:0;right:0;font-size:10px;font-weight:700;color:#60a5fa;text-transform:uppercase;letter-spacing:.9px;padding:14px 18px;border-bottom:1px solid rgba(96,165,250,.15);background:rgba(96,165,250,.05)}
/* On mobile keep margin */
@media(max-width:699px){#sc-quiz.oud-mode .qctx{margin-bottom:16px}}
/* Question counter badge in oud mode */
#sc-quiz.oud-mode #qctr{display:inline-flex;width:auto;font-size:11px;font-weight:800;color:#60a5fa;background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.22);border-radius:20px;padding:4px 14px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:14px}
/* Source badge row */
#sc-quiz.oud-mode #qbron{margin-bottom:8px}
/* Question text card */
#sc-quiz.oud-mode .qq{text-align:left;font-size:clamp(16px,2.4vw,21px);padding:18px 20px;background:rgba(255,255,255,.04);border-radius:16px;border:1px solid rgba(255,255,255,.08);margin-bottom:18px}
/* Open input in oud mode */
#sc-quiz.oud-mode .open-input{border-color:rgba(96,165,250,.2);background:rgba(96,165,250,.04);min-height:130px}
#sc-quiz.oud-mode .open-input:focus{border-color:rgba(96,165,250,.45);background:rgba(96,165,250,.07);box-shadow:0 0 0 3px rgba(96,165,250,.1),0 2px 12px rgba(96,165,250,.12)}
/* Nakijken button */
#sc-quiz.oud-mode .nakijk-btn{background:linear-gradient(135deg,rgba(96,165,250,.18),rgba(139,92,246,.13));border-color:rgba(96,165,250,.32);color:#93c5fd;font-size:15px}
#sc-quiz.oud-mode .nakijk-btn:hover{background:linear-gradient(135deg,rgba(96,165,250,.28),rgba(139,92,246,.2));border-color:rgba(96,165,250,.55);box-shadow:0 4px 22px rgba(96,165,250,.22);color:#bfdbfe}
/* Model answer card */
#sc-quiz.oud-mode .model-antwoord{background:rgba(74,222,128,.06);border-left-color:#4ade80;border-radius:16px}
/* Next button in oud mode */
#sc-quiz.oud-mode .nxt{background:linear-gradient(135deg,#3b82f6 0%,#7c3aed 100%);box-shadow:0 4px 22px rgba(59,130,246,.32)}
#sc-quiz.oud-mode .nxt:hover{background:linear-gradient(135deg,#2563eb 0%,#6d28d9 100%);box-shadow:0 6px 30px rgba(59,130,246,.44)}
/* Oud mode scroll helper on desktop (LHS scrollable) */
@media(min-width:700px){
  #sc-quiz.oud-mode.has-ctx .quiz-lhs{position:sticky;top:16px;max-height:calc(100vh - 120px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(96,165,250,.3) transparent}
}
/* results */
#sc-res{background:linear-gradient(180deg, #0A0C10 0%, #141824 100%)}
.rb{padding:48px 28px;max-width:540px;margin:0 auto;text-align:center}
.remi{font-size:56px;margin-bottom:16px}
.rb h2{font-family:var(--font-head);font-size:34px;color:#fff;margin-bottom:10px}
.rb>p{color:rgba(255,255,255,.45);font-size:15px;margin-bottom:28px}
.sring{width:130px;height:130px;margin:0 auto 32px;position:relative;filter:drop-shadow(0 0 24px rgba(232,92,13,0.3))}
.sring svg{transform:rotate(-90deg)}
.sring circle{fill:none;stroke-width:10}
.srbg{stroke:rgba(255,255,255,.07)}
.srfill{stroke:var(--or);stroke-linecap:round}
.srins{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.srn{font-family:var(--font-head);font-size:36px;font-weight:800;color:#fff;line-height:1}
.srd{font-size:12px;color:rgba(255,255,255,.35);margin-top:3px}
.rbd{background:rgba(255,255,255,.05);border-radius:18px;padding:22px;margin-bottom:24px;text-align:left;box-shadow:0 4px 24px rgba(0,0,0,0.15)}
.rbr{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px;color:rgba(255,255,255,.7)}
.rbr:last-child{border:none}
.rbc{color:#4ADE80;font-weight:700}.rbw{color:#F87171;font-weight:700}.rbs{color:rgba(255,255,255,.3);font-weight:700}
.res-lb-row{background:rgba(var(--or-rgb),.07);border-radius:8px;padding:8px 10px;margin-top:4px;border:1px solid rgba(var(--or-rgb),.2)}
.res-lb-val{font-family:var(--font-head);font-size:20px;font-weight:900;color:var(--or)}
.res-lb-max{font-size:13px;font-weight:600;opacity:.55}
.adaptive-res-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;margin:12px 0;font-size:13px}
.ar-mastery-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ar-mastery-lbl{font-weight:600;color:var(--dk)}
.ar-mastery-val{font-size:12px;color:var(--mu)}
.ar-mastery-bar{height:8px;background:rgba(255,255,255,.08);border-radius:4px;margin-bottom:14px;overflow:hidden}
.ar-mastery-fill{height:100%;border-radius:4px;transition:width .6s ease}
.ar-weak-hdr{font-weight:700;font-size:12px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.ar-weak-list{list-style:none;display:flex;flex-direction:column;gap:6px;padding:0;margin:0}
.ar-weak-item{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:6px 8px;background:rgba(239,68,68,.08);border-radius:8px}
.ar-weak-q{flex:1;color:var(--dk);line-height:1.4;font-size:12px}
.ar-weak-pct{white-space:nowrap;font-weight:700;color:#ef4444;font-size:12px}
.ar-reset-btn{margin-top:12px;font-size:11px;color:var(--mu);background:none;border:1px solid var(--bo);border-radius:6px;padding:4px 10px;cursor:pointer;font-family:var(--font)}
.chal-intro-card{background:linear-gradient(135deg,rgba(var(--or-rgb),.12),rgba(var(--or-rgb),.06));border:1.5px solid rgba(var(--or-rgb),.35);border-radius:20px;padding:24px 20px;margin:16px 0;text-align:center}
.chal-intro-icon{font-size:40px;margin-bottom:10px}
.chal-intro-name{font-family:var(--font-head);font-size:22px;font-weight:900;color:var(--dk);margin-bottom:4px}
.chal-intro-sub{font-size:13px;color:var(--mu);margin-bottom:16px}
.chal-intro-score{font-family:var(--font-head);font-size:42px;font-weight:900;color:var(--or);line-height:1}
.chal-intro-max{font-size:14px;color:var(--mu);margin-bottom:20px}
.chal-accept-btn{background:var(--or);color:#fff;border:none;border-radius:14px;padding:16px 32px;font-family:var(--font-head);font-size:17px;font-weight:800;cursor:pointer;width:100%;margin-bottom:10px}
.chal-decline-btn{background:none;border:none;color:var(--mu);font-size:13px;cursor:pointer;padding:8px}
.chal-vs-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;margin:12px 0;display:flex;align-items:center;gap:0}
.chal-vs-side{flex:1;text-align:center}
.chal-vs-label{font-size:11px;color:var(--mu);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.chal-vs-score{font-family:var(--font-head);font-size:32px;font-weight:900}
.chal-vs-score.win{color:#22c55e}
.chal-vs-score.lose{color:#ef4444}
.chal-vs-score.tie{color:var(--or)}
.chal-vs-divider{font-size:20px;font-weight:900;color:var(--mu);padding:0 12px}
.chal-result-banner{font-family:var(--font-head);font-size:18px;font-weight:900;text-align:center;padding:10px;border-radius:10px;margin-bottom:8px}
.chal-result-banner.win{background:rgba(34,197,94,.15);color:#22c55e}
.chal-result-banner.lose{background:rgba(239,68,68,.1);color:#ef4444}
.chal-result-banner.tie{background:rgba(var(--or-rgb),.12);color:var(--or)}
.chal-daag-btn{background:rgba(var(--or-rgb),.12);border:1.5px solid rgba(var(--or-rgb),.3);color:var(--or);border-radius:12px;padding:12px 16px;font-family:var(--font-head);font-size:14px;font-weight:700;cursor:pointer;width:100%;margin-top:8px}
/* ── GROEP PAGINA ─────────────────────────────────────────────── */
.grp-nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid var(--bo);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.grp-nav-inner{display:flex;align-items:center;gap:12px;padding:0 16px;height:54px;max-width:960px;margin:0 auto}
.grp-nav-back{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--bo);background:var(--s);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--dk);transition:all .18s;flex-shrink:0}
.grp-nav-back:hover{border-color:rgba(var(--or-rgb),.5);color:var(--or);background:rgba(var(--or-rgb),.06);transform:translateX(-2px)}
.grp-nav-title{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--dk)}
.grp-page-wrap{padding:20px 16px 56px;max-width:960px;margin:0 auto}
.grp-hero{background:linear-gradient(140deg,rgba(var(--or-rgb),.11) 0%,rgba(99,102,241,.07) 55%,rgba(20,184,166,.05) 100%);border:1.5px solid rgba(var(--or-rgb),.16);border-radius:28px;padding:40px 24px 32px;text-align:center;margin-bottom:18px;position:relative;overflow:hidden}
.grp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,rgba(var(--or-rgb),.12),transparent 65%);pointer-events:none}
.grp-hero-icon{font-size:54px;margin-bottom:14px;position:relative;filter:drop-shadow(0 4px 14px rgba(var(--or-rgb),.28))}
.grp-hero-title{font-family:var(--font-head);font-size:26px;font-weight:900;color:var(--dk);margin-bottom:8px;letter-spacing:-.5px;position:relative}
.grp-hero-sub{font-size:14px;color:var(--mu);line-height:1.65;max-width:320px;margin:0 auto 18px;position:relative}
.grp-hero-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;position:relative}
.grp-hero-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid var(--bo);background:var(--s);color:var(--mu)}
.grp-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media(max-width:640px){.grp-split{grid-template-columns:1fr;gap:10px}}
.grp-card{background:var(--s);border:1.5px solid var(--bo);border-radius:22px;padding:22px;margin-bottom:14px}
.grp-card-title{font-family:var(--font-head);font-size:12px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.grp-input{width:100%;padding:13px 15px;background:var(--bg2);border:1.5px solid var(--bo);border-radius:13px;color:var(--dk);font-size:15px;font-family:var(--font);margin-bottom:10px;box-sizing:border-box;transition:border-color .18s,box-shadow .18s;text-transform:uppercase;letter-spacing:2px}
.grp-input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(var(--or-rgb),.1)}
.grp-input::placeholder{text-transform:none;letter-spacing:0;color:var(--mu)}
.grp-create-input{text-transform:none;letter-spacing:0}
.grp-join-btn{background:linear-gradient(135deg,var(--or),#f97316);color:#fff;border:none;border-radius:13px;padding:14px;font-family:var(--font-head);font-size:15px;font-weight:800;cursor:pointer;width:100%;transition:opacity .18s,transform .18s;box-shadow:0 4px 16px rgba(var(--or-rgb),.28)}
.grp-join-btn:hover{opacity:.9;transform:translateY(-1px)}
.grp-create-btn{background:rgba(var(--or-rgb),.1);border:1.5px solid rgba(var(--or-rgb),.3);color:var(--or);border-radius:13px;padding:13px;font-family:var(--font-head);font-size:15px;font-weight:800;cursor:pointer;width:100%;transition:all .18s}
.grp-create-btn:hover{background:rgba(var(--or-rgb),.18);transform:translateY(-1px)}
.grp-active-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.grp-active-grid{grid-template-columns:290px 1fr;gap:22px;align-items:start}}
.grp-header-card{background:linear-gradient(150deg,rgba(var(--or-rgb),.13) 0%,rgba(var(--or-rgb),.03) 100%);border:1.5px solid rgba(var(--or-rgb),.2);border-radius:22px;padding:22px;position:relative;overflow:hidden}
.grp-header-card::before{content:'';position:absolute;top:-32px;right:-32px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(var(--or-rgb),.2),transparent 70%);pointer-events:none}
.grp-header-emoji{font-size:34px;margin-bottom:10px;position:relative}
.grp-header-name{font-family:var(--font-head);font-size:20px;font-weight:900;color:var(--dk);margin-bottom:4px;letter-spacing:-.3px;position:relative}
.grp-header-meta{font-size:12px;color:var(--mu);margin-bottom:16px}
.grp-code-label{font-size:10px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.9px;margin-bottom:7px}
.grp-code-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(var(--or-rgb),.1);border:1.5px solid rgba(var(--or-rgb),.25);border-radius:13px;padding:11px 14px;cursor:pointer;transition:all .18s;margin-bottom:10px}
.grp-code-chip:hover{background:rgba(var(--or-rgb),.18);border-color:rgba(var(--or-rgb),.45);transform:scale(1.02)}
.grp-code-value{font-family:var(--font-head);font-size:22px;font-weight:900;color:var(--or);letter-spacing:4px}
.grp-code-btn{font-size:11px;font-weight:700;color:var(--or);opacity:.7;white-space:nowrap}
.grp-header-hint{font-size:11px;color:var(--mu);line-height:1.55;opacity:.8}
.grp-leave-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--bo);color:var(--mu);border-radius:9px;padding:7px 13px;font-size:11px;cursor:pointer;font-family:var(--font);transition:all .15s;margin-top:14px}
.grp-leave-btn:hover{border-color:#ef4444;color:#ef4444}
.grp-score-card{background:var(--s);border:1.5px solid var(--bo);border-radius:22px;padding:22px}
.grp-podium{display:flex;align-items:flex-end;justify-content:center;gap:18px;margin:4px 0 22px;padding:0 4px}
.grp-pod-col{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:default}
.grp-pod-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:900;font-size:17px;border:2.5px solid transparent;flex-shrink:0;transition:transform .2s}
.grp-pod-col:hover .grp-pod-avatar{transform:scale(1.1) translateY(-2px)}
.grp-pod-avatar.first{width:58px;height:58px;font-size:22px;box-shadow:0 6px 20px rgba(234,179,8,.22)}
.grp-pod-name{font-size:11px;font-weight:700;color:var(--dk);text-align:center;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-pod-score{font-family:var(--font-head);font-size:12px;font-weight:800;color:var(--or)}
.grp-pod-bar{border-radius:8px 8px 0 0;width:66px}
.grp-pod-medal{font-size:20px;margin-top:1px;line-height:1}
.grp-pod-medal.first{font-size:26px}
.grp-member-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:12px;transition:background .15s}
.grp-member-row+.grp-member-row{border-top:1px solid var(--bo)}
.grp-member-row:hover{background:var(--bg2)}
.grp-member-row.me{background:rgba(var(--or-rgb),.06)!important}
.grp-member-row.me+.grp-member-row,.grp-member-row+.grp-member-row.me{border-top-color:transparent}
.grp-member-rank{font-family:var(--font-head);font-size:14px;font-weight:900;width:26px;text-align:center;flex-shrink:0;color:var(--mu)}
.grp-member-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:14px;flex-shrink:0;border:2px solid transparent;transition:transform .18s}
.grp-member-row:hover .grp-member-avatar{transform:scale(1.1)}
.grp-member-info{flex:1;min-width:0}
.grp-member-name{font-size:14px;font-weight:700;color:var(--dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-member-vak{font-size:11px;color:var(--mu);margin-top:1px}
.grp-member-score{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--or);flex-shrink:0}
.grp-me-badge{font-size:9px;font-weight:800;color:#fff;background:var(--or);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle;letter-spacing:.2px}
.grp-empty{text-align:center;padding:36px 16px;color:var(--mu);font-size:14px;line-height:1.65}
.grp-no-account{background:rgba(var(--or-rgb),.07);border:1.5px solid rgba(var(--or-rgb),.18);border-radius:16px;padding:14px 18px;font-size:13px;color:var(--mu);margin-bottom:16px;text-align:center;line-height:1.5}
@media(min-width:720px){
  .grp-page-wrap{padding:28px 28px 72px}
  .grp-hero{padding:52px 48px 44px}
  .grp-hero-title{font-size:32px}
  .grp-hero-sub{font-size:15px;max-width:420px}
  .grp-split{max-width:660px;margin:18px auto 0}
  .grp-header-name{font-size:22px}
  .grp-code-value{font-size:24px}
  .grp-member-score{font-size:18px}
}
.lb-toggle-row{display:flex;gap:8px;margin-bottom:14px}
.lb-toggle-btn{flex:1;padding:9px;border-radius:10px;border:1.5px solid var(--bo);background:none;color:var(--mu);font-family:var(--font-head);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
.lb-toggle-btn.active{background:var(--or);border-color:var(--or);color:#fff}
.adapt-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:rgba(255,255,255,.1);border-radius:20px;padding:2px 8px;color:rgba(255,255,255,.7);margin-left:6px;vertical-align:middle}
.rbtns{display:flex;gap:12px;flex-direction:column}
.btnp{background:var(--or);color:#fff;border:none;border-radius:14px;padding:18px;font-family:var(--font-head);font-size:16px;font-weight:700;cursor:pointer;transition:all 0.2s ease;box-shadow:0 4px 18px rgba(232,92,13,0.3)}
.btnp:hover{background:#d14f09;box-shadow:0 6px 24px rgba(232,92,13,0.4)}
.btns{background:rgba(255,255,255,.08);color:#fff;border:none;border-radius:14px;padding:16px;font-size:14px;cursor:pointer;transition:all .2s;font-family:var(--font)}
.btns:hover{background:rgba(255,255,255,.14)}

/* ── COUNTDOWN ───────────────────────────────── */
.countdown{background:linear-gradient(135deg,var(--cd-bg1) 0%,var(--cd-bg2) 40%,var(--cd-bg3) 100%);border-radius:24px;padding:28px 30px;margin-bottom:32px;color:#fff;display:flex;align-items:center;gap:24px;flex-wrap:wrap;box-shadow:0 12px 48px rgba(var(--or-rgb),.28),0 1px 0 rgba(255,255,255,.04) inset;position:relative;overflow:hidden;border:1px solid rgba(var(--or-rgb),.22);transition:box-shadow .5s,border-color .5s}
.countdown::before{content:'';position:absolute;top:-60px;right:-60px;width:300px;height:300px;background:radial-gradient(circle,rgba(var(--or-rgb),.4) 0%,transparent 60%);pointer-events:none;animation:cdGlow 4s ease-in-out infinite alternate}
.countdown::after{content:'';position:absolute;bottom:-80px;left:40px;width:240px;height:240px;background:radial-gradient(circle,rgba(var(--or-rgb),.12) 0%,transparent 65%);pointer-events:none}
@keyframes cdGlow{0%{opacity:.7;transform:scale(1)}100%{opacity:1;transform:scale(1.1)}}
.cd-left{flex:1;min-width:180px;position:relative;z-index:1}
.cd-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.4);margin-bottom:8px}
.cd-title{font-family:var(--font-head);font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.2;color:#fff}
.cd-sub{font-size:13px;color:rgba(255,255,255,.4);margin-top:6px}
.cd-nums{display:flex;gap:8px;position:relative;z-index:1}
.cd-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px 16px;text-align:center;min-width:66px;backdrop-filter:blur(12px);transition:border-color .3s,background .3s}
.cd-box:hover{background:rgba(255,255,255,.1);border-color:rgba(var(--or-rgb),.6);box-shadow:0 0 16px rgba(var(--or-rgb),.3),inset 0 0 12px rgba(var(--or-rgb),.05)}
.cd-val{font-family:var(--font-head);font-size:30px;font-weight:800;line-height:1;color:#fff;letter-spacing:-1px}
.cd-unit{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.35);margin-top:5px;font-weight:700}
@media(max-width:580px){.countdown{flex-direction:column;text-align:center;gap:18px}.cd-nums{justify-content:center}}

/* ── PROGRESS BADGE ON CARDS ─────────────────── */
.card-progress{display:flex;align-items:center;gap:8px;margin-top:12px}
.cp-bar{flex:1;height:5px;border-radius:3px;background:var(--bo);overflow:hidden}
.cp-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--card-col,var(--or)),color-mix(in srgb,var(--card-col,var(--or)) 60%,#fff));transition:width .6s cubic-bezier(.34,1.2,.64,1);position:relative;overflow:hidden;box-shadow:0 0 8px rgba(var(--or-rgb),.5)}
.cp-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmerBar 2s ease-in-out infinite}
@keyframes shimmerBar{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
.cp-pct{font-size:11px;font-weight:700;color:var(--card-col,var(--or));min-width:34px;text-align:right}
.card-progress.no-data .cp-pct{color:var(--mu)}

/* ── GRADE BADGE ON CARD ─────────────────────── */
.card-grade-badge{position:absolute;top:12px;right:12px;font-family:var(--font-head);font-size:13px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.3px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.card{position:relative}
.card-decay-dot{position:absolute;top:10px;left:10px;width:8px;height:8px;border-radius:50%;background:#f97316;box-shadow:0 0 5px rgba(249,115,22,.6);pointer-events:none}
.grade-green{background:#d1fae5;color:#059669}
.grade-orange{background:#fef3c7;color:#d97706}
.grade-red{background:#fee2e2;color:#dc2626}
.dark .grade-green{background:rgba(4,120,87,.25);color:#34d399}
.dark .grade-orange{background:rgba(217,119,6,.22);color:#fbbf24}
.dark .grade-red{background:rgba(220,38,38,.22);color:#f87171}

/* ── GRADE PANEL ON DETAIL SCREEN ────────────── */
.grade-panel{display:flex;align-items:center;gap:0;background:var(--s);border:1px solid var(--bo);border-radius:16px;padding:16px 20px;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.gp-se{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px}
.gp-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--mu)}
.gp-val{font-family:var(--font-head);font-size:28px;font-weight:900;line-height:1}
.gp-div{width:1px;background:var(--bo);align-self:stretch;flex-shrink:0}
.gp-ce{display:flex;flex-direction:column;gap:2px;flex:1;min-width:130px}
.gp-ce-val{font-size:14px;font-weight:700;color:var(--dk)}
.gp-status{width:100%;font-size:12px;color:var(--mu);padding-top:4px;border-top:1px solid var(--bo)}

/* ── GRADE INSIGHT WIDGET (HOME) ─────────────── */
.grade-insight-card{background:var(--s);border:1px solid var(--bo);border-radius:20px;padding:18px 20px 14px;margin-bottom:20px}
.gi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gi-title{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--dk)}
.gi-edit-btn{font-size:12px;font-weight:600;color:var(--or);background:rgba(var(--or-rgb),.1);border:none;border-radius:8px;padding:4px 10px;cursor:pointer}
.gi-warning{background:#fee2e2;color:#dc2626;border-radius:10px;padding:7px 12px;font-size:12px;font-weight:700;margin-bottom:10px}
.dark .gi-warning{background:rgba(220,38,38,.18);color:#f87171}
.gi-rows{display:flex;flex-direction:column;gap:6px}
.gi-row{display:grid;grid-template-columns:10px 1fr 60px 32px auto;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--bo);cursor:pointer;transition:background .15s;border-radius:8px;padding:7px 8px}
.gi-row:last-child{border-bottom:none}
.gi-row:hover{background:var(--bg2)}
.gi-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.gi-naam{font-size:13px;font-weight:600;color:var(--dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gi-bar-wrap{height:5px;background:var(--bo);border-radius:3px;overflow:hidden}
.gi-bar{height:100%;border-radius:3px;transition:width .5s}
.gi-cij{font-family:var(--font-head);font-size:14px;font-weight:800;text-align:right}
.gi-ce{font-size:11px;color:var(--mu);white-space:nowrap;font-weight:500}

/* Verbeterpunten / Focus card */
.focus-card{background:var(--s);border:1.5px solid rgba(var(--or-rgb),.3);border-radius:20px;padding:18px 20px 14px;margin-bottom:20px}
.focus-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.focus-card-title{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--dk)}
.focus-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;margin-bottom:6px;background:var(--bg);border:1px solid var(--bo);transition:background .15s}
.focus-item:last-child{margin-bottom:0}
.focus-urgency{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.focus-urgency.ur-red{background:rgba(239,68,68,.12);color:#ef4444}
.focus-urgency.ur-orange{background:rgba(249,115,22,.12);color:#f97316}
.focus-urgency.ur-yellow{background:rgba(234,179,8,.12);color:#ca8a04}
.focus-urgency.ur-green{background:rgba(34,197,94,.12);color:#16a34a}
.focus-info{flex:1;min-width:0}
.focus-naam{font-size:13px;font-weight:700;color:var(--dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.focus-ce{font-size:11px;color:var(--mu);margin-top:1px}
.focus-quiz-chip{font-size:11px;font-weight:700;padding:2px 7px;border-radius:8px;background:var(--bg2);color:var(--mu);white-space:nowrap;flex-shrink:0}
.focus-btn{font-size:12px;font-weight:700;padding:5px 12px;border-radius:9px;background:var(--or);color:#fff;border:none;cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:var(--font);transition:opacity .15s}
.focus-btn:hover{opacity:.85}
/* Grade panel quiz insight */
.gp-quiz-insight{width:100%;padding-top:8px;margin-top:4px;border-top:1px solid var(--bo);display:flex;flex-direction:column;gap:6px}
.gp-est-ce{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.gp-est-val{font-family:var(--font-head);font-size:14px;font-weight:800}
.gp-weak-domain{display:flex;align-items:center;gap:8px;background:rgba(var(--or-rgb),.07);border:1px solid rgba(var(--or-rgb),.2);border-radius:10px;padding:8px 12px;flex-wrap:wrap}
.gp-weak-txt{flex:1;font-size:12px;color:var(--dk);min-width:0}
.gp-weak-btn{font-size:12px;font-weight:700;padding:5px 12px;border-radius:8px;background:var(--or);color:#fff;border:none;cursor:pointer;font-family:var(--font);white-space:nowrap;flex-shrink:0}
/* Action plan */
.ap-section{margin-bottom:16px}
.ap-section-head{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.ap-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--bo);background:var(--bg);margin-bottom:6px}
.ap-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ap-info{flex:1;min-width:0}
.ap-naam{font-size:13px;font-weight:700;color:var(--dk)}
.ap-detail{font-size:11px;color:var(--mu);margin-top:1px}
.ap-btn{font-size:12px;font-weight:700;padding:5px 12px;border-radius:9px;background:var(--or);color:#fff;border:none;cursor:pointer;white-space:nowrap;font-family:var(--font)}
.ap-empty{text-align:center;padding:24px;color:var(--mu);font-size:13px;line-height:1.8}
.ap-slaag-link{display:block;text-align:center;margin-top:16px;padding:11px;border-radius:12px;background:rgba(var(--or-rgb),.1);border:1px solid rgba(var(--or-rgb),.25);color:var(--or);font-size:13px;font-weight:700;cursor:pointer;transition:background .15s}
.ap-slaag-link:hover{background:rgba(var(--or-rgb),.18)}

/* ── PROGRESS ON DETAIL DOMAINS ──────────────── */
.dom-progress{display:flex;align-items:center;gap:8px;margin-top:6px}
.dp-bar{flex:1;height:5px;border-radius:3px;background:var(--bo);overflow:hidden;max-width:90px}
.dp-fill{height:100%;border-radius:3px;background:var(--or);transition:width .4s}
.dp-txt{font-size:11px;color:var(--mu);font-weight:600}

/* ── PROGRESS OVERVIEW ON DETAIL ─────────────── */
.progress-overview{border:1px solid var(--bo);border-radius:16px;padding:20px 22px;margin-bottom:24px;background:var(--s)}
.po-title{font-family:var(--font-head);font-size:16px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.po-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.po-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--bg2)}
.po-letter{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:14px;flex-shrink:0}
.po-info{flex:1;min-width:0}
.po-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po-score{font-size:12px;color:var(--mu)}
.po-reset{font-size:12px;color:var(--mu);cursor:pointer;border:none;background:none;padding:5px 10px;border-radius:6px;transition:all .2s;font-family:var(--font)}
.po-reset:hover{background:var(--bg2);color:var(--or)}

/* ── FAVORITES STAR ──────────────────────────── */
.fav-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:3px 5px;transition:transform .2s;line-height:1;flex-shrink:0;filter:grayscale(1) opacity(.35)}
.fav-btn:hover{transform:scale(1.2);filter:none}
.fav-btn.active{filter:none}
.fav-section{margin-bottom:36px}
.fav-chips{display:flex;flex-wrap:wrap;gap:8px}
.fav-chip{display:flex;align-items:center;gap:8px;background:var(--s);border:1px solid var(--bo);border-radius:10px;padding:9px 14px;cursor:pointer;transition:all .2s;font-size:13px;font-weight:600}
.fav-chip:hover{border-color:var(--bo2);box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateY(-2px)}
.fav-chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.fav-chip-name{color:var(--dk)}
.fav-chip-sub{color:var(--mu);font-weight:400}

/* ── STREAK CARD ───────────────────────────── */
/* ── STREAK CARD v3 (21st.dev) ───────────────── */
.streak-card{position:relative;overflow:hidden;background:var(--s);border:1px solid var(--bo);border-radius:20px;padding:18px 18px 14px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04)}
.streak-card::before{content:'';position:absolute;top:-30px;right:-30px;width:160px;height:160px;background:radial-gradient(circle,rgba(var(--or-rgb),.12) 0%,transparent 65%);pointer-events:none}
/* Top row */
.streak-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.streak-flame-wrap{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#f97316 0%,#f59e0b 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(var(--or-rgb),.38)}
.streak-flame-big{font-size:22px;line-height:1;animation:flameBob 2.4s ease-in-out infinite;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}
@keyframes flameBob{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.1) rotate(3deg)}}
.streak-count-num{font-family:var(--font-head);font-size:13px;font-weight:900;color:#fff;line-height:1;margin-top:1px}
.streak-count-lbl{font-size:7px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.8)}
/* Meta text */
.streak-meta{flex:1;min-width:0}
.streak-headline{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--dk);line-height:1.2;margin-bottom:2px}
.streak-tagline{font-size:12px;color:var(--mu);line-height:1.4}
/* Inline stats */
.streak-stats{display:flex;gap:6px;margin-top:8px}
.streak-stat{display:flex;align-items:center;gap:5px;background:rgba(var(--or-rgb),.06);border:1px solid rgba(var(--or-rgb),.12);border-radius:8px;padding:4px 9px}
.streak-stat-num{font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--or)}
.streak-stat-lbl{font-size:10px;color:var(--mu);font-weight:500}
/* 7-day circles */
.streak-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:12px}
.streak-day-cell{display:flex;flex-direction:column;align-items:center;gap:5px}
.streak-day-pip{width:36px;height:36px;max-width:100%;border-radius:50%;background:rgba(var(--or-rgb),.06);border:1.5px solid rgba(var(--or-rgb),.1);transition:all .28s cubic-bezier(.34,1.4,.64,1);display:flex;align-items:center;justify-content:center;font-size:14px;color:transparent;margin:0 auto}
.streak-day-pip.active{background:linear-gradient(135deg,#f97316,#f59e0b);border-color:transparent;box-shadow:0 0 0 3px rgba(var(--or-rgb),.15),0 3px 10px rgba(var(--or-rgb),.38);color:#fff}
.streak-day-pip.active.is-today{box-shadow:0 0 0 3px rgba(var(--or-rgb),.3),0 4px 16px rgba(var(--or-rgb),.5)}
.streak-day-pip.today-empty{border:2px dashed rgba(var(--or-rgb),.45);background:transparent;animation:pipPulse 2s ease-in-out infinite}
@keyframes pipPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--or-rgb),.25)}50%{box-shadow:0 0 0 5px rgba(var(--or-rgb),.0)}}
.streak-day-name{font-size:9px;color:var(--mu);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.streak-day-name.act{color:var(--or);font-weight:700}
/* Divider */
.streak-divider{height:1px;background:var(--bo);margin:12px 0 10px}
/* Badges */
.streak-badges-row{display:flex;gap:6px;flex-wrap:wrap}
.badge{position:relative;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--bg2);border:1.5px solid var(--bo);transition:all .25s cubic-bezier(.34,1.4,.64,1);cursor:default}
.badge.earned{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border-color:#F59E0B;box-shadow:0 3px 10px rgba(245,158,11,.28)}
.badge.earned:hover{transform:scale(1.18) rotate(-5deg)}
.badge.unearned{filter:grayscale(1);opacity:.22}
.badge-tooltip{position:relative}
.badge-tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--dk);color:var(--bg);font-size:11px;font-weight:600;padding:4px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.18s;font-family:var(--font);z-index:10}
.badge-tooltip:hover::after{opacity:1}
/* Profile badge section */
.prof-badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px;margin-top:4px}
.prof-badge-cat{margin-bottom:20px}
.prof-badge-cat-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);margin-bottom:10px}
.prof-badge-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:default}
.prof-badge-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--bg2);border:2px solid var(--bo);transition:all .25s cubic-bezier(.34,1.4,.64,1);position:relative}
.prof-badge-circle.earned{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border-color:#F59E0B;box-shadow:0 4px 14px rgba(245,158,11,.32)}
.prof-badge-circle.earned:hover{transform:scale(1.15) rotate(-6deg)}
.prof-badge-circle.unearned{filter:grayscale(1);opacity:.2}
.prof-badge-lbl{font-size:10px;font-weight:600;color:var(--mu);text-align:center;max-width:60px;line-height:1.2}
.prof-badge-lbl.earned{color:var(--tx)}
.prof-badge-rarity{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.prof-badges-summary{font-size:13px;color:var(--mu);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.prof-badges-count{font-weight:700;color:var(--or)}
/* Rarity glows op profielbadge-cirkel (alleen outer glow, geen border-override) */
.prof-badge-circle.rarity-common   {box-shadow:0 0 6px 2px rgba(156,163,175,.5)}
.prof-badge-circle.rarity-rare     {box-shadow:0 0 9px 3px rgba(59,130,246,.6)}
.prof-badge-circle.rarity-epic     {box-shadow:0 0 12px 4px rgba(139,92,246,.7)}
.prof-badge-circle.rarity-legendary{box-shadow:0 0 14px 5px rgba(245,158,11,.8)}
.prof-badge-circle.rarity-mythic   {box-shadow:0 0 18px 6px rgba(239,68,68,.8),0 0 28px 10px rgba(245,158,11,.4);animation:mythicGlow 2s ease-in-out infinite}
@keyframes mythicGlow{0%,100%{box-shadow:0 0 18px 6px rgba(239,68,68,.8),0 0 28px 10px rgba(245,158,11,.4)}50%{box-shadow:0 0 24px 9px rgba(239,68,68,.95),0 0 36px 14px rgba(245,158,11,.6)}}
.prof-badge-circle.rarity-eternal  {animation:eternalGlow 3s linear infinite;border-color:transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,linear-gradient(var(--a,0deg),#f43f5e,#f97316,#eab308,#22c55e,#06b6d4,#8b5cf6,#f43f5e) border-box}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes eternalGlow{to{--a:360deg}}
.prof-badge-circle.selected{outline:3px solid var(--or);outline-offset:2px;transform:scale(1.08)}
.badge-selected-check{position:absolute;bottom:1px;right:1px;font-size:9px;line-height:1;background:var(--or);color:#fff;border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-weight:900}
/* Rarity kleuren op leaderboard badge-overlay */
.lb-av-badge.rarity-common   {border-color:#9CA3AF;box-shadow:0 0 4px 1px rgba(156,163,175,.6)}
.lb-av-badge.rarity-rare     {border-color:#3B82F6;box-shadow:0 0 6px 2px rgba(59,130,246,.7)}
.lb-av-badge.rarity-epic     {border-color:#8B5CF6;box-shadow:0 0 8px 3px rgba(139,92,246,.8)}
.lb-av-badge.rarity-legendary{border-color:#F59E0B;box-shadow:0 0 10px 4px rgba(245,158,11,.85)}
.lb-av-badge.rarity-mythic   {border-color:#EF4444;box-shadow:0 0 12px 5px rgba(239,68,68,.85),0 0 18px 7px rgba(245,158,11,.4);animation:mythicGlow 2s ease-in-out infinite}
.lb-av-badge.rarity-eternal  {animation:eternalGlow 3s linear infinite;border-color:transparent;background:linear-gradient(var(--bg2,#1a1a2e),var(--bg2,#1a1a2e)) padding-box,linear-gradient(var(--a,0deg),#f43f5e,#f97316,#eab308,#22c55e,#06b6d4,#8b5cf6,#f43f5e) border-box;box-shadow:0 0 14px 5px rgba(139,92,246,.6)}
/* Rarity tekst kleuren */
.rarity-txt-common   {color:#9CA3AF}
.rarity-txt-rare     {color:#3B82F6}
.rarity-txt-epic     {color:#8B5CF6}
.rarity-txt-legendary{color:#F59E0B}
.rarity-txt-mythic   {color:#EF4444;animation:mythicGlow 2s ease-in-out infinite}
.rarity-txt-eternal  {background:linear-gradient(90deg,#f43f5e,#f97316,#eab308,#22c55e,#06b6d4,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200%;animation:eternalTxt 3s linear infinite}
@keyframes eternalTxt{0%{background-position:0%}100%{background-position:200%}}
/* CTA */
.streak-cta{margin-top:12px;width:100%;padding:10px;border-radius:11px;border:none;background:linear-gradient(135deg,#f97316,#f59e0b);color:#fff;font-family:var(--font-head);font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.2px;transition:all .22s cubic-bezier(.34,1.2,.64,1);box-shadow:0 3px 12px rgba(var(--or-rgb),.32)}
.streak-cta:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(var(--or-rgb),.42)}
.streak-cta:active{transform:scale(.97)}
@media(max-width:600px){
  .streak-card{padding:16px 14px 12px;border-radius:16px}
  .streak-flame-wrap{width:42px;height:42px;border-radius:12px}
  .streak-flame-big{font-size:19px}
  .streak-headline{font-size:15px}
  .streak-day-pip{width:30px;height:30px}
}

/* ── BRON / SOURCE CHIP ─────────────────────── */
#qbron{text-align:center;margin-bottom:8px}
.q-src{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 11px;border-radius:20px;letter-spacing:.4px;cursor:default}
.q-src-ce{background:rgba(34,197,94,.13);color:#4ade80;border:1px solid rgba(34,197,94,.22)}
.q-src-oef{background:rgba(255,255,255,.06);color:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.1)}
/* ── BRONVERMELDING CARD (detail screen) ─────── */
.bron-card{background:var(--s);border:1px solid var(--bo);border-radius:14px;margin-bottom:18px;overflow:hidden}
.bron-card-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;gap:10px;user-select:none}
.bron-card-title{font-size:13px;font-weight:700;color:var(--dk);display:flex;align-items:center;gap:7px}
.bron-card-arrow{font-size:12px;color:var(--mu);transition:transform .22s}
.bron-card.open .bron-card-arrow{transform:rotate(180deg)}
.bron-card-body{display:none;padding:0 16px 14px;font-size:12px;color:var(--mu);line-height:1.7}
.bron-card.open .bron-card-body{display:block}
.bron-row{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-top:1px solid var(--bo)}
.bron-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
/* ── REVIEW SCREEN ───────────────────────────── */
#sc-review{background:linear-gradient(180deg, #0A0C10 0%, #141824 100%)}
.review-wrap{padding:32px 24px;max-width:660px;margin:0 auto}
.review-wrap h2{font-family:var(--font-head);color:#fff;font-size:26px;margin-bottom:6px}
.review-sub{color:rgba(255,255,255,.4);font-size:14px;margin-bottom:24px}
.review-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;margin-bottom:14px;border-left-width:3px}
.rc-ok-card{border-left-color:#4ADE80}
.rc-half-card{border-left-color:#FCD34D}
.rc-wrong-card{border-left-color:#F87171}
.rc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rc-num{background:rgba(255,255,255,.1);border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700;color:rgba(255,255,255,.5)}
.rc-status{font-size:13px;font-weight:700;margin-left:auto}
.rc-ok{color:#4ADE80}
.rc-half{color:#FCD34D}
.rc-wrong{color:#F87171}
.rc-q{font-family:var(--font-head);font-size:16px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.45}
.rc-answer{font-size:13px;color:rgba(255,255,255,.7);line-height:1.7;padding:10px 14px;background:rgba(255,255,255,.04);border-radius:10px;margin-bottom:8px;display:flex;flex-direction:column;gap:2px}
.rc-answer-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;opacity:.55;margin-bottom:2px}
.rc-answer-correct{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2)}
.rc-answer-correct .rc-answer-lbl{color:#4ADE80;opacity:.9}
.rc-answer-wrong{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2)}
.rc-answer-wrong .rc-answer-lbl{color:#F87171;opacity:.9}
.rc-answer strong{color:rgba(255,255,255,.8)}
.rc-ctx{font-size:12px;color:rgba(255,255,255,.35);line-height:1.6;padding:6px 10px;background:rgba(255,255,255,.03);border-radius:8px;margin-bottom:10px;border-left:2px solid rgba(255,255,255,.1)}
.rc-explanation{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65;padding:10px 14px;background:rgba(255,255,255,.03);border-radius:10px;margin-top:4px;display:flex;gap:8px;align-items:flex-start}
.rc-expl-icon{flex-shrink:0;font-size:14px}
.review-btns{display:flex;gap:10px;flex-direction:column;margin-top:20px}

/* ── WELCOME SCREEN REDESIGN ───────────────────── */
#sc-welcome{background:#07080f;position:relative;overflow-x:hidden;min-height:100vh}
/* top bar */
.wlc-bar{position:sticky;top:0;z-index:200;background:rgba(7,8,15,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.wlc-bar-inner{max-width:880px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between}
.wlc-brand{display:flex;align-items:center;gap:10px}
.wlc-brand-name{font-family:var(--font-head);font-size:18px;font-weight:800;color:#fff;letter-spacing:-.4px}
.wlc-brand-tag{font-size:11px;font-weight:700;color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:3px 10px}
.wlc-theme-btn{width:36px;height:36px;border-radius:10px;border:none;background:rgba(255,255,255,.07);cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);transition:all .15s}
.wlc-theme-btn:hover{background:rgba(255,255,255,.13);color:#fff}
.wlc-theme-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* hero */
.wlc-hero{position:relative;overflow:hidden;text-align:center;padding:88px 20px 68px}
.wlc-orb{position:absolute;border-radius:50%;pointer-events:none}
.wlc-orb1{width:800px;height:800px;top:-300px;right:-200px;background:radial-gradient(circle,rgba(232,92,13,.2) 0%,transparent 65%);filter:blur(60px)}
.wlc-orb2{width:700px;height:700px;bottom:-280px;left:-200px;background:radial-gradient(circle,rgba(139,92,246,.18) 0%,transparent 65%);filter:blur(60px)}
.wlc-orb3{width:500px;height:400px;top:40%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(99,102,241,.08) 0%,transparent 70%);filter:blur(40px)}
.wlc-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:28px}
.wlc-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.wlc-h1{font-family:var(--font-head);font-size:clamp(60px,11vw,96px);font-weight:900;letter-spacing:-4px;line-height:.92;color:#fff;margin-bottom:26px;position:relative;z-index:1}
.wlc-h1-accent{display:block;background:linear-gradient(135deg,#E85C0D 0%,#f9a825 60%,#E85C0D 100%);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradShift 4s ease-in-out infinite alternate;filter:drop-shadow(0 0 48px rgba(232,92,13,.55))}
@keyframes gradShift{from{background-position:0%}to{background-position:100%}}
.wlc-sub{font-size:17px;color:rgba(255,255,255,.4);max-width:500px;margin:0 auto 32px;line-height:1.75;font-weight:400;position:relative;z-index:1}
.wlc-feats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.wlc-feat{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:5px 13px}
.wlc-feat-chk{color:#4ade80;font-weight:800;font-size:11px}
/* picker */
.wlc-picker{max-width:860px;margin:0 auto;padding:0 20px 64px;position:relative;z-index:1}
.wlc-pick-lbl{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.2);text-align:center;margin-bottom:18px}
.wlc-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
/* cards */
.wlc-card{position:relative;overflow:hidden;border-radius:24px;padding:32px 28px 28px;cursor:pointer;transition:transform .28s cubic-bezier(.34,1.2,.64,1),box-shadow .28s,border-color .28s,background .28s;border:1.5px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.wlc-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent)}
.wlc-chavo{border-color:rgba(232,92,13,.3);background:linear-gradient(150deg,rgba(232,92,13,.11) 0%,rgba(232,92,13,.04) 100%)}
.wlc-cvwo{border-color:rgba(139,92,246,.3);background:linear-gradient(150deg,rgba(139,92,246,.11) 0%,rgba(139,92,246,.04) 100%)}
.wlc-chavo:hover,.wlc-chavo:focus-visible{border-color:rgba(232,92,13,.7);background:linear-gradient(150deg,rgba(232,92,13,.2) 0%,rgba(232,92,13,.07) 100%);transform:translateY(-7px);box-shadow:0 28px 72px rgba(232,92,13,.28),0 0 0 1px rgba(232,92,13,.18)}
.wlc-cvwo:hover,.wlc-cvwo:focus-visible{border-color:rgba(139,92,246,.7);background:linear-gradient(150deg,rgba(139,92,246,.2) 0%,rgba(139,92,246,.07) 100%);transform:translateY(-7px);box-shadow:0 28px 72px rgba(139,92,246,.28),0 0 0 1px rgba(139,92,246,.18)}
.wlc-chavo:active{transform:scale(.97);transition:transform .1s}
.wlc-cvwo:active{transform:scale(.97);transition:transform .1s}
.wlc-card-glow{position:absolute;inset:-40%;pointer-events:none}
.wlc-chavo .wlc-card-glow{background:radial-gradient(circle at 25% 15%,rgba(232,92,13,.12) 0%,transparent 55%)}
.wlc-cvwo .wlc-card-glow{background:radial-gradient(circle at 25% 15%,rgba(139,92,246,.12) 0%,transparent 55%)}
.wlc-card-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.wlc-card-lvl{font-family:var(--font-head);font-size:42px;font-weight:900;letter-spacing:-2px;line-height:1}
.wlc-chavo .wlc-card-lvl{color:#E85C0D;text-shadow:0 0 32px rgba(232,92,13,.5)}
.wlc-cvwo .wlc-card-lvl{color:#a78bfa;text-shadow:0 0 32px rgba(167,139,250,.5)}
.wlc-card-pill{font-size:11px;font-weight:700;color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:4px 11px;white-space:nowrap}
.wlc-card-list{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:10px}
.wlc-card-list li{font-size:13.5px;color:rgba(255,255,255,.5);font-weight:500;padding-left:20px;position:relative}
.wlc-card-list li::before{position:absolute;left:0;font-weight:800;font-size:12px}
.wlc-chavo .wlc-card-list li::before{content:'✓';color:#E85C0D}
.wlc-cvwo .wlc-card-list li::before{content:'✓';color:#a78bfa}
.wlc-card-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:15px;font-weight:800;letter-spacing:.2px;transition:gap .25s}
.wlc-chavo .wlc-card-btn{color:#E85C0D}
.wlc-cvwo .wlc-card-btn{color:#a78bfa}
.wlc-card:hover .wlc-card-btn{gap:14px}
/* lc-active state */
.lc-active.wlc-chavo,.lc-active.lc-havo{border-color:rgba(232,92,13,.7)!important;box-shadow:0 0 0 2px rgba(232,92,13,.3),0 16px 48px rgba(232,92,13,.22)!important}
.lc-active.wlc-cvwo,.lc-active.lc-vwo{border-color:rgba(139,92,246,.7)!important;box-shadow:0 0 0 2px rgba(139,92,246,.3),0 16px 48px rgba(139,92,246,.22)!important}
.level-prev-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:rgba(255,255,255,.1);color:rgba(255,255,255,.55);padding:3px 10px;border-radius:20px;margin-top:10px}
/* VMBO bar */
.wlc-vmbo-bar{text-align:center;font-size:12px;color:rgba(255,255,255,.18);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px;margin-bottom:36px;letter-spacing:.3px}
/* footer */
.wlc-foot{text-align:center;border-top:1px solid rgba(255,255,255,.06);padding-top:28px}
.wlc-foot-dates{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.wlc-foot-dates span{font-size:12px;color:rgba(255,255,255,.22);font-weight:500}
.wlc-foot-links{font-size:12px;color:rgba(255,255,255,.16);line-height:2.2}
.wlc-foot-links a{color:rgba(255,255,255,.28);text-decoration:none;transition:color .15s}
.wlc-foot-links a:hover{color:rgba(255,255,255,.6)}
/* keep legacy classes alive for JS (lc-havo, lc-vwo selectors) */
.lc-havo,.lc-vwo,.lc-disabled,.level-card{} .lc-disabled{opacity:.4;cursor:default;pointer-events:none}
.wlc-social-proof{display:inline-block;font-size:13px;color:rgba(255,255,255,.45);margin-top:18px;letter-spacing:.1px}
.wlc-social-proof strong{color:rgba(255,255,255,.7);font-weight:700}
@media(max-width:640px){.how-it-works{display:none}}
@media(max-width:620px){
  .wlc-hero{padding:52px 16px 40px}
  .wlc-h1{font-size:56px;letter-spacing:-3px;line-height:.92}
  .wlc-sub{font-size:14px;margin-bottom:20px}
  .wlc-feats{gap:6px}
  .wlc-feat{font-size:11.5px;padding:4px 11px}
  .wlc-stats{margin-top:24px}
  .wlc-stat-n{font-size:26px}
  .wlc-picker{padding:0 14px 48px}
  .wlc-cards{grid-template-columns:1fr;gap:12px}
  .wlc-card{padding:22px 18px 20px;border-radius:20px}
  .wlc-card-lvl{font-size:38px}
  .wlc-card-list{margin:10px 0 14px}
  .wlc-card-list li{font-size:12.5px;padding:3px 0}
  .wlc-foot-dates{flex-direction:column;gap:6px;align-items:center}
  .wlc-social-proof{font-size:12px}
}

/* ── WELCOME EYE-CATCHER EXTRAS ────────────────── */
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spinAngle{to{--angle:360deg}}
@keyframes orbDrift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-32px) scale(1.06)}}
@keyframes orbDrift2{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(22px) scale(.95)}}
@keyframes fadeUpIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmerSweep{0%{left:-100%}100%{left:220%}}
@keyframes statCountUp{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* Dot-grid overlay */
.wlc-dot-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,black 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,black 30%,transparent 100%);
  opacity:.3}

/* Orb float */
.wlc-orb1{animation:orbDrift 10s ease-in-out infinite}
.wlc-orb2{animation:orbDrift2 13s ease-in-out infinite}

/* Stats row */
.wlc-stats{display:flex;justify-content:center;margin:32px auto 0;max-width:480px;position:relative;z-index:1}
.wlc-stat{flex:1;text-align:center;padding:12px 0;border-right:1px solid rgba(255,255,255,.09)}
.wlc-stat:last-child{border-right:none}
.wlc-stat-n{font-family:var(--font-head);font-size:30px;font-weight:900;letter-spacing:-1.5px;line-height:1;
  background:linear-gradient(135deg,#fff 50%,rgba(255,255,255,.4));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.wlc-stat-l{font-size:10px;color:rgba(255,255,255,.25);font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-top:5px}

/* Spinning gradient border wrapper */
.wlc-card-wrap{position:relative;border-radius:26px;padding:1.5px;transition:padding .28s}
.wlc-card-wrap::before{
  content:'';position:absolute;inset:0;border-radius:26px;
  background:conic-gradient(from var(--angle),transparent 0%,transparent 55%,rgba(232,92,13,.9) 75%,rgba(249,168,37,.9) 82%,rgba(232,92,13,.9) 88%,transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spinAngle 3.5s linear infinite;opacity:0;transition:opacity .35s}
.wlc-cvwo-wrap::before{
  background:conic-gradient(from var(--angle),transparent 0%,transparent 55%,rgba(139,92,246,.9) 75%,rgba(167,139,250,1) 82%,rgba(139,92,246,.9) 88%,transparent 100%)}
.wlc-card-wrap:hover::before,.wlc-card-wrap:has(.lc-active)::before{opacity:1}

/* Shimmer sweep on card CTA */
.wlc-card-btn{position:relative;overflow:visible}
.wlc-card-btn-inner{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px}
.wlc-card-btn-inner::after{content:'';position:absolute;top:-30%;left:-100%;width:45%;height:160%;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  pointer-events:none}
.wlc-card:hover .wlc-card-btn-inner::after{animation:shimmerSweep .55s ease forwards .05s}

/* Entrance stagger animations */
.wlc-eyebrow{animation:fadeUpIn .65s cubic-bezier(.22,1,.36,1) both;animation-delay:.08s}
.wlc-h1{animation:fadeUpIn .75s cubic-bezier(.22,1,.36,1) both;animation-delay:.22s}
.wlc-sub{animation:fadeUpIn .75s cubic-bezier(.22,1,.36,1) both;animation-delay:.36s}
.wlc-feats{animation:fadeUpIn .75s cubic-bezier(.22,1,.36,1) both;animation-delay:.48s}
.wlc-stats{animation:fadeUpIn .75s cubic-bezier(.22,1,.36,1) both;animation-delay:.58s}
.wlc-pick-lbl{animation:fadeUpIn .7s cubic-bezier(.22,1,.36,1) both;animation-delay:.66s}
.wlc-card-wrap:first-child{animation:fadeUpIn .8s cubic-bezier(.22,1,.36,1) both;animation-delay:.74s}
.wlc-card-wrap:last-child{animation:fadeUpIn .8s cubic-bezier(.22,1,.36,1) both;animation-delay:.84s}

/* Pulse ring on the orb dot in eyebrow */
.wlc-dot{position:relative}
.wlc-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(232,92,13,.5);animation:pulse 2s ease-in-out infinite}

/* Card lvl number glow pulse */
.wlc-chavo .wlc-card-lvl{animation:glowPulseO 3s ease-in-out infinite}
.wlc-cvwo .wlc-card-lvl{animation:glowPulseV 3s ease-in-out infinite}
@keyframes glowPulseO{0%,100%{text-shadow:0 0 28px rgba(232,92,13,.4)}50%{text-shadow:0 0 56px rgba(232,92,13,.8),0 0 90px rgba(232,92,13,.3)}}
@keyframes glowPulseV{0%,100%{text-shadow:0 0 28px rgba(167,139,250,.4)}50%{text-shadow:0 0 56px rgba(167,139,250,.8),0 0 90px rgba(139,92,246,.3)}}

/* ── SCHEDULE SCREEN ───────────────────────────── */
.schedule-list{display:flex;flex-direction:column;gap:10px;margin-bottom:40px}
.sch-card{display:flex;align-items:center;gap:16px;background:var(--s);border:1px solid var(--bo);border-radius:16px;padding:18px 22px;transition:all .2s}
.sch-card:hover{border-color:var(--bo2);box-shadow:0 4px 16px rgba(0,0,0,.05)}
.sch-card.sch-mine{border-left:4px solid var(--or)}
.sch-date{font-family:var(--font-head);font-weight:700;font-size:14px;min-width:94px;color:var(--dk)}
.sch-time{font-size:13px;color:var(--mu);min-width:84px}
.sch-name{font-weight:700;font-size:15px;flex:1}
.sch-dur{font-size:12px;color:var(--mu);background:var(--bg2);padding:4px 12px;border-radius:20px;font-weight:600}
.sch-cd{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--or);min-width:84px;text-align:right}
.sch-check{width:20px;height:20px;accent-color:var(--or);cursor:pointer}
.sch-filter{display:flex;gap:12px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.sch-filter label{font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px}
@media(max-width:580px){.sch-card{flex-wrap:wrap;gap:10px}.sch-date{min-width:auto}.sch-cd{min-width:auto;text-align:left}}

/* ── CALCULATOR SCREEN ─────────────────────────── */
.calc-tabs{display:flex;gap:5px;background:var(--bg2);border-radius:14px;padding:5px;margin-bottom:28px;overflow-x:auto}
.calc-tab{padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:none;color:var(--mu);white-space:nowrap;font-family:var(--font);transition:all .2s}
.calc-tab.active{background:var(--s);color:var(--dk);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.calc-panel{display:none}.calc-panel.active{display:block}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
@media(max-width:580px){.calc-grid{grid-template-columns:1fr}}
.calc-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bo)}
.calc-row:last-child{border:none}
.calc-label{font-size:14px;flex:1;font-weight:500}
.calc-input{width:76px;padding:9px 12px;border:1px solid var(--bo);border-radius:10px;font-size:15px;font-family:var(--font-head);font-weight:700;text-align:center;background:var(--s);color:var(--dk);transition:all .2s}
.calc-input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(232,92,13,.12)}
.calc-btn{width:100%;padding:16px;background:#1a1d26;color:#fff;border:none;border-radius:14px;font-family:var(--font-head);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:12px}
.calc-btn:hover{opacity:.85;transform:translateY(-1px)}
html.dark .calc-btn{background:#2e3550}
.calc-result{background:var(--bg2);border-radius:16px;padding:24px;margin-top:20px;text-align:center}
.calc-result h3{font-family:var(--font-head);font-size:22px;margin-bottom:8px}
.calc-result p{font-size:14px;color:var(--mu);line-height:1.7}
.calc-pass{color:#22C55E}.calc-fail{color:#EF4444}.calc-warn{color:#F59E0B}
.calc-result-icon{font-size:52px;margin-bottom:12px}
.calc-detail{text-align:left;margin-top:14px;font-size:13px;color:var(--mu);line-height:2.1}
.calc-detail .ck{color:#22C55E}.calc-detail .cx{color:#EF4444}
.calc-divider{border:none;border-top:1px solid var(--bo);margin:20px 0}
.calc-prefill-note{font-size:11px;color:#22C55E;background:rgba(34,197,94,.1);border-radius:8px;padding:6px 10px;margin-bottom:10px;font-weight:600}
.calc-result-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
/* ── MICRO-INTERACTIONS & LIVE ─────────────────── */
/* Ripple effect */
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}
.ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:rippleAnim .65s ease-out forwards;pointer-events:none;z-index:99}

/* Card 3D tilt & hover glow */
.card{will-change:transform;transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.card:hover{box-shadow:0 16px 48px rgba(0,0,0,.14),0 0 0 1.5px rgba(var(--or-rgb),.18)}

/* Live student counter */
.live-count-wrap{display:flex;align-items:center;gap:10px;background:var(--s);border:1px solid var(--bo);border-radius:16px;padding:11px 16px;margin-bottom:16px;font-size:13px;font-weight:600;color:var(--dk)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0;position:relative}
.live-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:rgba(34,197,94,.3);animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:0}}
.live-num{font-family:var(--font-head);font-size:16px;font-weight:900;color:#22c55e;transition:opacity .25s}
.live-sep{color:var(--mu);font-weight:400;margin:0 2px}
.live-sub{color:var(--mu);font-size:12px;font-weight:500;margin-left:auto}

/* Timer urgency pulse */
@keyframes urgentPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(248,113,113,.55)) drop-shadow(0 0 2px rgba(248,113,113,.4))}50%{transform:scale(1.13);filter:drop-shadow(0 0 18px rgba(248,113,113,.9)) drop-shadow(0 0 6px rgba(248,113,113,.6))}}
.timer-urgent{animation:urgentPulse .5s ease-in-out infinite!important;filter:none!important}
.timer-urgent .trn{color:#F87171!important;text-shadow:0 0 14px rgba(248,113,113,.9)!important}
.timer-urgent .trfg{stroke:#F87171!important}

/* Answer button micro-interaction */
.opt{transition:transform .18s cubic-bezier(.34,1.4,.64,1),filter .15s,opacity .2s,background .2s,box-shadow .2s!important}
.opt:active:not(:disabled){transform:scale(0.91)!important}

/* XP count-up number */
@keyframes numPop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.xp-count-anim{display:inline-block;animation:numPop .4s cubic-bezier(.34,1.4,.64,1)}

/* Quick link button ripple base */
.hm-ql-btn,.hm-cta-primary,.hm-cta-sec,.calc-btn,.wlc-card-btn{position:relative;overflow:hidden}

/* Smooth number transition */
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.num-slide{animation:slideUp .3s cubic-bezier(.22,1,.36,1)}

/* ── GAMIFICATION EXTRAS ───────────────────────── */
/* Floating XP particle */
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-70px) scale(1.2)}}
.xp-float{position:fixed;pointer-events:none;z-index:9999;font-family:var(--font-head);font-size:16px;font-weight:900;color:#22c55e;text-shadow:0 2px 8px rgba(34,197,94,.5);transform:translateX(-50%);animation:floatUp .85s cubic-bezier(.22,1,.36,1) forwards}
/* ── PARTICLES ──────────────────────────────────── */
@keyframes particleFly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--px),var(--py)) scale(0);opacity:0}}
.particle{position:fixed;border-radius:50%;pointer-events:none;animation:particleFly var(--dur,.65s) cubic-bezier(.22,1,.36,1) forwards;z-index:9999}
/* ── HOT STREAK GLOW ────────────────────────────── */
#sc-quiz.hot-streak::after{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,var(--heat,transparent) 0%,transparent 65%);z-index:0;transition:background .9s}
/* ── SPEED BADGE ────────────────────────────────── */
@keyframes speedSlide{0%{transform:translateX(-50%) scale(.5) translateY(12px);opacity:0}60%{transform:translateX(-50%) scale(1.08) translateY(0);opacity:1}100%{transform:translateX(-50%) scale(1) translateY(0)}}
.speed-badge{position:fixed;top:84px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border-radius:24px;padding:8px 22px;font-weight:900;font-size:13px;z-index:9300;animation:speedSlide .3s cubic-bezier(.34,1.5,.64,1),toastOut .35s ease 1.3s forwards;pointer-events:none;box-shadow:0 4px 22px rgba(59,130,246,.55);letter-spacing:.2px}
/* ── LUCKY FLASH ────────────────────────────────── */
@keyframes luckyPulse{0%{opacity:.6}100%{opacity:0}}
.lucky-flash{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(245,158,11,.4),transparent 65%);pointer-events:none;z-index:9200;animation:luckyPulse .7s cubic-bezier(.22,1,.36,1) forwards}
/* ── ANSWER SUSPENSE ────────────────────────────── */
@keyframes suspensePulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.22),0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 5px rgba(255,255,255,.5),0 0 22px rgba(255,255,255,.18)}}
.opt.suspense-pending{animation:suspensePulse .32s ease infinite!important;pointer-events:none;transform:scale(1.015)!important;transition:transform .1s}
/* ── XP SURGE BADGE ─────────────────────────────── */
@keyframes surgeIn{0%{transform:translateX(-50%) scale(.55) translateY(-8px);opacity:0}65%{transform:translateX(-50%) scale(1.1) translateY(0);opacity:1}100%{transform:translateX(-50%) scale(1) translateY(0);opacity:1}}
.surge-badge{position:fixed;top:58px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:28px;padding:8px 20px;font-weight:900;font-size:13px;z-index:9350;box-shadow:0 4px 24px rgba(245,158,11,.65),0 0 0 2px rgba(245,158,11,.3);pointer-events:none;display:flex;align-items:center;gap:8px;animation:surgeIn .38s cubic-bezier(.34,1.3,.64,1);letter-spacing:.2px}
.surge-count{background:rgba(255,255,255,.25);border-radius:20px;padding:2px 9px;font-size:15px;font-weight:900}
/* ── DECAY DOT ──────────────────────────────────── */
.decay-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;vertical-align:middle;margin-left:4px;box-shadow:0 0 6px currentColor}
/* ── DECAY ALERT (home) ─────────────────────────── */
.hm-decay-card{background:rgba(249,115,22,.07);border:1px solid rgba(249,115,22,.2);border-radius:14px;padding:10px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.hm-decay-header{display:flex;align-items:center;justify-content:space-between}
.hm-decay-title{font-size:12px;font-weight:700;color:var(--or);display:flex;align-items:center;gap:5px}
.hm-decay-chips{display:flex;flex-wrap:wrap;gap:6px}
.hm-decay-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:opacity .15s;-webkit-tap-highlight-color:transparent}
.hm-decay-chip:active{opacity:.7}
/* ── RECORD BANNER ──────────────────────────────── */
.record-banner{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-radius:14px;padding:14px 18px;margin-top:14px;text-align:center;font-family:var(--font-head);font-weight:800;font-size:15px;animation:comboIn .5s cubic-bezier(.34,1.2,.64,1);box-shadow:0 4px 20px rgba(34,197,94,.4)}
/* ── COMEBACK TOAST ─────────────────────────────── */
.comeback-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;border-radius:24px;padding:9px 24px;font-weight:900;font-size:14px;z-index:9300;animation:toastIn .28s ease,toastOut .35s ease 1.5s forwards;pointer-events:none;box-shadow:0 4px 20px rgba(139,92,246,.55)}
/* ── ACHIEVEMENT TOAST ──────────────────────────── */
@keyframes achIn{0%{transform:translateX(calc(100% + 20px));opacity:0}65%{transform:translateX(-6px);opacity:1}100%{transform:translateX(0);opacity:1}}
@keyframes achOut{to{transform:translateX(calc(100% + 20px));opacity:0}}
.achievement-toast{position:fixed;right:14px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:18px;padding:13px 18px;max-width:260px;z-index:9400;animation:achIn .5s cubic-bezier(.34,1.1,.64,1);box-shadow:0 8px 32px rgba(245,158,11,.55),0 0 0 3px rgba(245,158,11,.25);pointer-events:none;display:flex;align-items:center;gap:12px}
.achievement-toast.ach-out{animation:achOut .4s cubic-bezier(.9,.07,.84,.16) forwards}
.ach-emoji{font-size:28px;flex-shrink:0}
.ach-body{flex:1;min-width:0}
.ach-label{font-size:10px;opacity:.75;text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px;font-weight:700}
.ach-text{font-size:13px;font-weight:900;line-height:1.3}
/* ── BUTTON RIPPLE ──────────────────────────────── */
.btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.28);pointer-events:none;transform:scale(0);animation:rippleGo .55s linear forwards}
@keyframes rippleGo{to{transform:scale(3.5);opacity:0}}
/* Wrong answer shake */
@keyframes shakeIt{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}35%{transform:translateX(8px)}55%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.shake{animation:shakeIt .45s ease}
/* General toast */
.app-toast{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:9998;padding:11px 22px;border-radius:30px;font-family:var(--font-head);font-size:15px;font-weight:800;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.25);animation:toastIn .3s ease,toastOut .4s ease 2.4s forwards;white-space:nowrap;text-align:center}
/* Daily goal widget */
.dg-card{background:var(--s);border:1px solid var(--bo);border-radius:18px;padding:14px 18px;margin-bottom:16px}
.dg-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dg-ico{font-size:18px}
.dg-lbl{font-size:14px;font-weight:700;flex:1;color:var(--dk)}
.dg-cnt{color:var(--or);font-weight:900}
.dg-bonus{font-size:12px;font-weight:700;color:#22c55e;background:rgba(34,197,94,.1);border-radius:20px;padding:3px 9px}
.dg-dots{display:flex;gap:8px;margin-bottom:10px}
.dg-dot{width:32px;height:8px;border-radius:4px;background:var(--bo2);transition:all .4s cubic-bezier(.34,1.2,.64,1)}
.dg-dot-done{background:var(--or);box-shadow:0 0 10px rgba(232,92,13,.5)}
.dg-bar-wrap{height:4px;background:var(--bo2);border-radius:2px;overflow:hidden}
.dg-bar{height:100%;background:linear-gradient(90deg,var(--or),#f9a825);border-radius:2px;transition:width .6s cubic-bezier(.34,1.2,.64,1)}
.dg-done{font-size:13px;font-weight:700;color:#22c55e;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:14px;padding:10px 16px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.dg-done span{color:var(--dk);font-weight:600}
/* Perfect score banner */
.perfect-banner{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:14px;padding:14px 18px;margin-top:14px;text-align:center;font-family:var(--font-head);font-weight:800;font-size:15px;animation:comboIn .5s cubic-bezier(.34,1.2,.64,1)}
/* Nearly level up nudge */
.xp-nudge{font-size:12px;color:var(--or);font-weight:600;margin-top:4px;opacity:.8}
/* Streak milestone toast */
.streak-toast{background:linear-gradient(135deg,#f59e0b,#E85C0D)}
.calc-result-bar-track{flex:1;height:8px;border-radius:4px;background:var(--bo);overflow:hidden}
.calc-result-bar-fill{height:100%;border-radius:4px;transition:width .5s}

/* ── FLASHCARD v2 — SPACED REPETITION ─────────── */
.fc-card{perspective:800px;width:100%;max-width:480px;margin:0 auto 14px;cursor:pointer;height:210px}
.fc-inner{position:relative;width:100%;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}
.fc-card.flipped .fc-inner{transform:rotateY(180deg)}
.fc-front,.fc-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 28px;text-align:center;line-height:1.5;gap:6px}
.fc-front{background:var(--s);border:1px solid var(--bo);color:var(--dk);font-family:var(--font-head);font-weight:700;font-size:19px;box-shadow:0 4px 20px rgba(0,0,0,.07)}
.fc-front-hint{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--mu);opacity:.55;position:absolute;bottom:12px}
.fc-back{background:linear-gradient(145deg,rgba(var(--or-rgb),.07),rgba(var(--or-rgb),.02));border:1px solid rgba(var(--or-rgb),.18);color:var(--dk);transform:rotateY(180deg);font-size:14px;box-shadow:0 4px 20px rgba(0,0,0,.07)}
.fc-back-term{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--or);margin-bottom:4px}
/* Session header */
.fc-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fc-prog-wrap{flex:1;height:5px;border-radius:3px;background:var(--bo);overflow:hidden}
.fc-prog-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--or),#f59e0b);transition:width .5s cubic-bezier(.34,1.2,.64,1);width:0%}
.fc-counts{display:flex;gap:6px;flex-shrink:0}
.fc-count-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.3px}
.fc-chip-new{background:rgba(99,102,241,.12);color:#818cf8}
.fc-chip-due{background:rgba(var(--or-rgb),.12);color:var(--or)}
/* AI badge */
.fc-ai-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;background:linear-gradient(135deg,rgba(var(--or-rgb),.1),rgba(99,102,241,.08));border:1px solid rgba(var(--or-rgb),.18);border-radius:20px;padding:4px 12px;color:var(--or);margin-bottom:10px;letter-spacing:.3px}
/* 4-button rating row */
.fc-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}
.fc-btn{display:flex;flex-direction:column;align-items:center;padding:9px 6px;border-radius:11px;border:1.5px solid;font-family:var(--font);cursor:pointer;transition:all .18s cubic-bezier(.34,1.2,.64,1);background:var(--s)}
.fc-btn:hover{transform:translateY(-3px)}
.fc-btn:active{transform:scale(.95)}
.fc-btn-label{font-size:12px;font-weight:700;margin-bottom:2px}
.fc-btn-int{font-size:10px;font-weight:600;opacity:.6}
.fc-btn.fc-again{border-color:rgba(239,68,68,.3);color:#ef4444}
.fc-btn.fc-again:hover{background:rgba(239,68,68,.07);border-color:#ef4444;box-shadow:0 5px 14px rgba(239,68,68,.18)}
.fc-btn.fc-hard{border-color:rgba(var(--or-rgb),.3);color:var(--or)}
.fc-btn.fc-hard:hover{background:rgba(var(--or-rgb),.07);border-color:var(--or);box-shadow:0 5px 14px rgba(var(--or-rgb),.18)}
.fc-btn.fc-good{border-color:rgba(34,197,94,.3);color:#22c55e}
.fc-btn.fc-good:hover{background:rgba(34,197,94,.07);border-color:#22c55e;box-shadow:0 5px 14px rgba(34,197,94,.18)}
.fc-btn.fc-easy{border-color:rgba(99,102,241,.3);color:#818cf8}
.fc-btn.fc-easy:hover{background:rgba(99,102,241,.07);border-color:#818cf8;box-shadow:0 5px 14px rgba(99,102,241,.18)}
/* Progress text */
.fc-progress{text-align:center;font-size:12px;color:var(--mu);margin-bottom:6px;font-weight:600}
/* Session summary */
.fc-summary{background:var(--s);border:1px solid var(--bo);border-radius:20px;padding:22px 20px;text-align:center;max-width:480px;margin:0 auto}
.fc-sum-title{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--dk);margin-bottom:3px}
.fc-sum-sub{font-size:12px;color:var(--mu);margin-bottom:16px}
.fc-sum-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.fc-sum-stat{background:var(--bg2);border-radius:12px;padding:10px 6px}
.fc-sum-stat-n{font-family:var(--font-head);font-size:22px;font-weight:800}
.fc-sum-stat-l{font-size:9px;color:var(--mu);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.fc-mastery-wrap{height:7px;border-radius:4px;background:var(--bo);overflow:hidden;margin-bottom:5px}
.fc-mastery-bar{height:100%;border-radius:4px;transition:width .9s cubic-bezier(.34,1.2,.64,1)}
.fc-mastery-lbl{font-size:11px;color:var(--mu);font-weight:600;margin-bottom:14px}
.fc-sum-btn{width:100%;padding:11px;border-radius:11px;border:none;font-family:var(--font-head);font-size:13px;font-weight:700;cursor:pointer;margin-top:6px}
.fc-sum-btn-primary{background:linear-gradient(135deg,var(--or),#f59e0b);color:#fff;box-shadow:0 3px 12px rgba(var(--or-rgb),.3)}
.fc-sum-btn-sec{background:var(--s);color:var(--dk);border:1px solid var(--bo)!important}
.fc-score{margin-top:12px}
/* Mobile */
@media(max-width:600px){
  .fc-card{height:185px}
  .fc-front{font-size:16px}
  .fc-back{font-size:13px}
  .fc-btns{grid-template-columns:repeat(2,1fr);gap:7px}
  .fc-btn{padding:9px 6px}
}

/* ── POMODORO TIMER ────────────────────────────── */
/* ── POMODORO REDESIGN (21st.dev inspired) ───── */
.pomo{position:relative;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--or) 8%,var(--s)),var(--s));border:1px solid color-mix(in srgb,var(--or) 22%,var(--bo));border-radius:28px;padding:32px 24px 24px;margin-bottom:24px;text-align:center;transition:all .3s;box-shadow:0 8px 32px color-mix(in srgb,var(--or) 10%,transparent),0 1px 0 rgba(255,255,255,.04) inset}
.pomo::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--or) 12%,transparent),transparent 70%);pointer-events:none}
.pomo-break{background:linear-gradient(145deg,color-mix(in srgb,#22C55E 8%,var(--s)),var(--s))!important;border-color:color-mix(in srgb,#22C55E 25%,var(--bo))!important}
.pomo-break .pomo-ring-fg{stroke:#22C55E!important}
.pomo-break .pomo-time{color:#22C55E!important}
.pomo-break .pomo-btn.pomo-active{background:#22C55E!important;border-color:#22C55E!important}
.pomo-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.pomo-title{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:1.2px}
.pomo-mode-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;background:color-mix(in srgb,var(--or) 15%,transparent);color:var(--or);border:1px solid color-mix(in srgb,var(--or) 25%,transparent);letter-spacing:.3px}
.pomo-break .pomo-mode-badge{background:color-mix(in srgb,#22C55E 15%,transparent)!important;color:#22C55E!important;border-color:color-mix(in srgb,#22C55E 25%,transparent)!important}
.pomo-ring-wrap{position:relative;width:180px;height:180px;margin:0 auto 20px}
.pomo-ring-wrap svg{position:absolute;inset:0;transform:rotate(-90deg)}
.pomo-ring-bg{fill:none;stroke:color-mix(in srgb,var(--or) 12%,var(--bo));stroke-width:8}
.pomo-ring-fg{fill:none;stroke:var(--or);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.pomo-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.pomo-time{font-family:var(--font-head);font-size:46px;font-weight:800;color:var(--dk);letter-spacing:-3px;line-height:1}
.pomo-label{font-size:12px;color:var(--mu);font-weight:500;letter-spacing:.2px}
.pomo-sessions{display:flex;gap:6px;justify-content:center;margin-bottom:20px}
.pomo-session-dot{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--or) 20%,var(--bo));transition:all .3s}
.pomo-session-dot.done{background:var(--or);box-shadow:0 0 6px color-mix(in srgb,var(--or) 50%,transparent)}
.pomo-btns{display:flex;gap:10px;justify-content:center;margin-bottom:16px}
.pomo-btn{display:flex;align-items:center;gap:7px;padding:11px 26px;border-radius:14px;border:1px solid var(--bo);background:var(--s);color:var(--dk);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s;letter-spacing:.1px}
.pomo-btn:hover{background:var(--bg2);border-color:color-mix(in srgb,var(--or) 30%,var(--bo));transform:translateY(-1px)}
.pomo-btn.pomo-active{background:var(--or);color:#fff;border-color:var(--or);box-shadow:0 4px 16px color-mix(in srgb,var(--or) 35%,transparent)}
.pomo-btn.pomo-active:hover{opacity:.9;transform:translateY(-1px)}
.pomo-info{margin-top:0;border-top:1px solid var(--bo);padding-top:12px;text-align:left}
.pomo-info-toggle{width:100%;background:none;border:none;text-align:left;font-size:12px;font-weight:700;color:var(--mu);cursor:pointer;padding:0;font-family:var(--font);display:flex;justify-content:space-between;align-items:center;transition:color .2s;letter-spacing:.3px}
.pomo-info-toggle:hover{color:var(--or)}
.pomo-info-toggle .pomo-info-arrow{transition:transform .25s;display:inline-block}
.pomo-info-toggle.open .pomo-info-arrow{transform:rotate(180deg)}
.pomo-info-toggle.open{color:var(--or)}
.pomo-info-body{display:none;margin-top:10px;font-size:13px;color:var(--mu);line-height:1.65}
.pomo-info-body.open{display:block}
.pomo-info-body ol{margin:6px 0 8px 20px;padding:0}
.pomo-info-body li{margin-bottom:5px}
.pomo-info-tip{margin-top:9px;font-size:12px;background:var(--bg2);border-radius:10px;padding:10px 12px;color:var(--dk);line-height:1.5;border-left:3px solid var(--or)}
/* ── SAM BULLET LISTS ─────────────────────────── */
.sam ul{margin:2px 0 6px;padding:0;list-style:none}
.sam ul li{padding:5px 0 5px 16px;position:relative;font-size:13.5px;line-height:1.6;border-bottom:1px solid rgba(0,0,0,.06)}
.sam ul li:last-child{border-bottom:none}
.sam ul li::before{content:'›';position:absolute;left:0;color:var(--or);font-weight:800;font-size:15px;line-height:1.45}
.sam .sam-head{font-size:10.5px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin:14px 0 3px;padding-top:12px;border-top:1px solid var(--bo)}
.sam .sam-head:first-child{margin-top:0;padding-top:0;border-top:none}
/* ── SAM-HEAD COLLAPSIBLE ────────────────────────── */
.sam .sam-head{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:6px}
.sam .sam-head::after{content:'▾';font-size:11px;opacity:.45;flex-shrink:0;transition:transform .22s ease}
.sam .sam-head.sh-collapsed::after{transform:rotate(-90deg)}
.sam .sam-ul-hidden{display:none}
.sam .sam-section{margin-bottom:14px}
.sam .sam-section h3{font-size:12px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.7px;margin:0 0 8px;font-family:var(--font-head)}
/* ── TEST JEZELF ────────────────────────────────── */
.tj{margin-top:16px;border-radius:13px;border:1.5px solid var(--bo);overflow:hidden}
.tj-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--s);user-select:none}
.tj-title{font-size:11.5px;font-weight:800;color:var(--dk);display:flex;align-items:center;gap:6px}
.tj-prog{font-size:11px;color:var(--mu);font-weight:600;background:var(--bg2);padding:2px 7px;border-radius:99px}
.tj-body{padding:14px 14px 12px;background:var(--bg)}
.tj-q{font-size:13.5px;font-weight:600;color:var(--dk);line-height:1.55;margin-bottom:12px}
.tj-opts{display:flex;flex-direction:column;gap:6px}
.tj-opt{background:var(--s);border:1.5px solid var(--bo);border-radius:10px;padding:9px 12px;text-align:left;font-size:13px;color:var(--dk);cursor:pointer;transition:all .18s;font-family:var(--font);line-height:1.45}
.tj-opt:hover:not(:disabled){border-color:var(--or);background:rgba(var(--or-rgb),.06)}
.tj-opt.tj-c{background:rgba(34,197,94,.12)!important;border-color:rgba(34,197,94,.5)!important;color:#15803d!important;font-weight:600}
.tj-opt.tj-w{background:rgba(239,68,68,.1)!important;border-color:rgba(239,68,68,.4)!important;color:#dc2626!important}
.tj-opt:disabled{cursor:default}
.tj-feedback{margin-top:10px;font-size:12.5px;color:var(--mu);line-height:1.65;padding:9px 12px;background:var(--s);border-radius:9px;border:1px solid var(--bo)}
.tj-next-btn{margin-top:10px;background:var(--or);color:#fff;border:none;border-radius:10px;padding:8px 18px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .18s;font-family:var(--font)}
.tj-next-btn:hover{opacity:.85}

/* ── SV VIDEO CARD ────────────────────────────── */
.sv-video-card{margin-top:14px;border-radius:14px;overflow:hidden;border:1.5px solid var(--bo);background:var(--s)}
.sv-video-card-head{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;user-select:none}
.sv-video-card-head svg{width:20px;height:20px;flex-shrink:0;color:#ff0000}
.sv-video-card-title{font-size:13px;font-weight:700;color:var(--dk);flex:1}
.sv-video-card-chevron{width:16px;height:16px;color:var(--mu);transition:transform .25s}
.sv-video-card.open .sv-video-card-chevron{transform:rotate(180deg)}
.sv-video-card-body{display:none;padding:0 0 12px}
.sv-video-card.open .sv-video-card-body{display:block}
.sv-video-card-list{display:flex;flex-direction:column;gap:6px;padding:0 12px}
.sv-video-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg2);border-radius:10px;text-decoration:none;border:1px solid var(--bo);transition:border-color .18s}
.sv-video-item:hover{border-color:var(--or)}
.sv-video-thumb{width:56px;height:32px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#000}
.sv-video-thumb-placeholder{width:56px;height:32px;border-radius:6px;background:linear-gradient(135deg,#ff0000,#cc0000);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sv-video-thumb-placeholder svg{width:14px;height:14px;color:#fff}
.sv-video-info{flex:1;min-width:0}
.sv-video-name{font-size:12px;font-weight:600;color:var(--dk);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-video-ch{font-size:11px;color:var(--mu);margin-top:1px}
.sv-video-arr{color:var(--mu);flex-shrink:0}

/* ── QUIZ FEEDBACK INFO TOGGLE ────────────────── */
.fbt-info-btn{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:5px 10px;background:var(--bg2);border:1.5px solid var(--bo);border-radius:8px;font-size:12px;font-weight:600;color:var(--mu);cursor:pointer;font-family:var(--font);transition:all .18s}
.fbt-info-btn:hover{border-color:var(--or);color:var(--or)}
.fbt-info-text{margin-top:6px;font-size:12.5px;color:var(--mu);line-height:1.65;padding:8px 10px;background:var(--s);border-radius:8px;border:1px solid var(--bo);display:none}
.fbt-info-text.show{display:block}
.tj-score-wrap{text-align:center;padding:18px 16px 14px}
.tj-score-num{font-size:32px;font-weight:900;color:var(--or);line-height:1}
.tj-score-lbl{font-size:13px;color:var(--dk);margin-top:5px;font-weight:600}
.tj-retry-btn{margin-top:12px;background:var(--s);border:1.5px solid var(--bo);border-radius:10px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer;color:var(--dk);font-family:var(--font);transition:all .18s;display:inline-block}
.tj-retry-btn:hover{border-color:var(--or);color:var(--or)}

/* ── POMODORO OVERLAY ─────────────────────────── */
.pomo-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
.pomo-overlay.show{opacity:1;pointer-events:auto}
.pomo-overlay-card{background:var(--s);border:1px solid var(--bo);border-radius:24px;padding:40px 32px;text-align:center;max-width:360px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pomoPopIn .4s ease}
@keyframes pomoPopIn{from{transform:scale(.85) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.pomo-overlay-icon{font-size:56px;margin-bottom:12px;animation:pomoBounce 1s ease infinite}
@keyframes pomoBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pomo-overlay-title{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--dk);margin-bottom:8px}
.pomo-overlay-sub{font-size:15px;color:var(--mu);margin-bottom:6px;line-height:1.5}
.pomo-overlay-timer{font-family:var(--font-head);font-size:42px;font-weight:800;color:var(--or);letter-spacing:-1px;margin:16px 0}
.pomo-overlay-bar{width:100%;height:6px;border-radius:3px;background:var(--bg2);margin-bottom:20px;overflow:hidden}
.pomo-overlay-bar-fill{height:100%;border-radius:3px;background:var(--or);transition:width 1s linear}
.pomo-overlay-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pomo-overlay-btn{padding:12px 28px;border-radius:12px;border:none;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s}
.pomo-overlay-btn.primary{background:var(--or);color:#fff}
.pomo-overlay-btn.primary:hover{opacity:.87}
.pomo-overlay-btn.secondary{background:var(--bg2);color:var(--dk)}
.pomo-overlay-btn.secondary:hover{background:var(--bo)}
.pomo-overlay.break-mode .pomo-overlay-timer{color:var(--green)}
.pomo-overlay-btn.mg-btn{background:rgba(var(--or-rgb),.12);color:var(--or);border:2px solid rgba(var(--or-rgb),.3)}
.pomo-overlay-btn.mg-btn:hover{background:rgba(var(--or-rgb),.22);transform:translateY(-1px)}
/* Minigame */
.mg-wrap{width:100%}
.mg-header{font-size:13px;font-weight:700;color:var(--dk);margin-bottom:10px;text-align:center}
.mg-stats{display:flex;gap:24px;justify-content:center;margin-bottom:10px}
.mg-stat{text-align:center}
.mg-stat-val{display:block;font-size:20px;font-weight:800;color:var(--or);font-family:var(--font-head)}
.mg-stat-lbl{font-size:10px;font-weight:700;color:var(--mu);letter-spacing:.4px;text-transform:uppercase}
.mg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}
.mg-card{aspect-ratio:1;border-radius:10px;background:rgba(var(--or-rgb),.1);border:2px solid rgba(var(--or-rgb),.18);cursor:pointer;font-size:0;display:flex;align-items:center;justify-content:center;transition:transform .18s,background .18s,border-color .18s,font-size .12s;user-select:none}
.mg-card:hover:not(.mg-flipped):not(.mg-matched){background:rgba(var(--or-rgb),.2);transform:scale(1.07)}
.mg-card.mg-flipped{font-size:24px;background:var(--bg2);border-color:rgba(var(--or-rgb),.5)}
.mg-card.mg-matched{font-size:24px;background:rgba(34,197,94,.15);border-color:#22c55e;cursor:default;animation:mgPop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes mgPop{0%{transform:scale(.8)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.mg-done-emoji{font-size:48px;margin-bottom:8px;display:block}
.mg-done-title{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--dk);margin-bottom:4px}
.mg-done-sub{font-size:13px;color:var(--mu);margin-bottom:14px}
.mg-done-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pomo-overlay.break-mode .pomo-overlay-bar-fill{background:var(--green)}

/* ── SUBJECT DETAIL EXTRAS ─────────────────────── */
.exam-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.em-chip{font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;background:var(--bg2);color:var(--mu);display:inline-flex;align-items:center;gap:6px}
.em-chip.em-date{background:var(--orl);color:var(--or)}
.yt-card{display:inline-flex;align-items:center;gap:14px;padding:13px 18px;border-radius:14px;background:rgba(255,0,0,.055);border:1px solid rgba(255,0,0,.13);margin-top:16px;text-decoration:none;transition:all .22s cubic-bezier(.34,1.4,.64,1);max-width:100%}
.yt-card:hover{background:rgba(255,0,0,.1);border-color:rgba(255,0,0,.28);transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,0,0,.1)}
.yt-icon{width:40px;height:40px;border-radius:10px;background:#FF0000;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(255,0,0,.3)}
.yt-icon svg{width:22px;height:22px;fill:#fff}
.yt-info{display:flex;flex-direction:column;gap:2px}
.yt-label{font-size:10px;font-weight:700;color:rgba(255,0,0,.6);text-transform:uppercase;letter-spacing:.6px}
.yt-name{font-size:14px;font-weight:700;color:var(--dk)}
.yt-arr{margin-left:8px;color:rgba(255,0,0,.45);font-size:18px;flex-shrink:0;transition:transform .2s}
.yt-card:hover .yt-arr{transform:translateX(3px)}

/* ── MOBILE BOTTOM NAV ────────────────────────── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;padding:0 0 calc(env(safe-area-inset-bottom,6px) + 10px);pointer-events:none;overflow:visible}
/* PWA install banner */
.pwa-banner{position:fixed;bottom:0;left:0;right:0;z-index:8000;padding:12px 16px calc(env(safe-area-inset-bottom,8px) + 12px);background:var(--s);border-top:1px solid var(--bo);box-shadow:0 -8px 32px rgba(0,0,0,.2);display:flex;align-items:center;gap:12px;transform:translateY(100%);transition:transform .35s cubic-bezier(.34,1.1,.64,1);pointer-events:none}
.pwa-banner.show{transform:translateY(0);pointer-events:all}
.pwa-banner-icon{font-size:32px;flex-shrink:0}
.pwa-banner-text{flex:1;min-width:0}
.pwa-banner-title{font-size:14px;font-weight:800;color:var(--dk);margin-bottom:2px}
.pwa-banner-sub{font-size:12px;color:var(--mu);line-height:1.4}
.pwa-banner-btns{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.pwa-banner-install{padding:9px 16px;border-radius:10px;background:var(--or);color:#fff;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap}
.pwa-banner-dismiss{padding:6px 12px;border-radius:10px;background:transparent;color:var(--mu);border:1px solid var(--bo);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap}
.bottom-nav-inner{display:flex;justify-content:center;align-items:flex-end;gap:4px;max-width:360px;margin:0 auto;background:color-mix(in srgb,var(--nav-bg) 88%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--bo);border-radius:28px;padding:8px 12px 10px;box-shadow:0 8px 32px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.08) inset;pointer-events:all;overflow:visible}
.bnav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--mu);font-size:9.5px;font-weight:600;cursor:pointer;padding:7px 12px;border-radius:18px;transition:all .22s cubic-bezier(.34,1.4,.64,1);font-family:var(--font);-webkit-tap-highlight-color:transparent;letter-spacing:.3px;flex:1}
.bnav-btn .bnav-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
.bnav-btn .bnav-icon svg{width:22px;height:22px;stroke:currentColor;transition:stroke .2s}
.bnav-btn.active{color:var(--or);background:color-mix(in srgb,var(--or) 10%,transparent);box-shadow:0 0 16px rgba(var(--or-rgb),.18)}
.bnav-btn.active .bnav-icon{transform:scale(1.15)}
.bnav-btn.active .bnav-icon svg{stroke:var(--or);filter:drop-shadow(0 0 5px rgba(var(--or-rgb),.65))}
.bnav-btn:active .bnav-icon{transform:scale(0.85)}

/* ── BOTTOM NAV CENTER FAB ────────────────────── */
.bnav-fab-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;position:relative;top:-12px}
.bnav-fab{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--or) 0%,#f97316 100%);border:2px solid rgba(255,255,255,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(var(--or-rgb),.55),0 0 0 4px rgba(var(--or-rgb),.15),0 1px 0 rgba(255,255,255,.18) inset;transition:all .22s cubic-bezier(.34,1.4,.64,1);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}
.bnav-fab::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.25),transparent 65%)}
.bnav-fab svg{width:21px;height:21px;fill:#fff;position:relative;z-index:1}
.bnav-fab:active{transform:scale(.86);box-shadow:0 2px 10px rgba(var(--or-rgb),.35)}
.bnav-fab-label{font-size:9.5px;font-weight:700;color:var(--or);letter-spacing:.2px}

/* ── MOBILE HERO STATS STRIP ─────────────────── */

/* ── MOBILE RESPONSIVE ───────────────────────── */
@media(max-width:640px){
  /* Bottom nav visible, top nav buttons hidden */
  .bottom-nav{display:block}
  body{padding-bottom:72px}
  .nav-btn{display:none!important}
  .nav-chip{display:none}
  .prof-nav-btn{display:none!important}
  .nav{height:52px;box-shadow:0 1px 8px rgba(0,0,0,.03)}
  .nav-inner{gap:8px;padding:0 16px}
  .logo{font-size:16px;gap:6px}
  .logo-dot{width:8px;height:8px}
  .theme-btn{width:36px;height:36px;font-size:15px;border-radius:8px}

  /* Wrapper */
  .w{padding:0 16px}

  /* Hero */
  .hero{padding:36px 0 28px}
  .hero-badge{font-size:12px;padding:5px 12px;margin-bottom:16px}
  .hero h1{font-size:28px;letter-spacing:-1px;margin-bottom:12px}
  .hero-sub{font-size:14px;margin-bottom:28px}

  /* Countdown */
  .countdown{border-radius:14px;padding:18px 16px;margin-bottom:24px;gap:12px}
  .cd-label{font-size:10px}
  .cd-title{font-size:19px}
  .cd-sub{font-size:11px}
  .cd-nums{gap:6px}
  .cd-box{border-radius:10px;padding:8px 10px;min-width:52px}
  .cd-val{font-size:22px}
  .cd-unit{font-size:9px}

  /* Date strip */
  .date-strip{margin-bottom:28px;border-radius:14px}
  .ds-cell{padding:14px 16px}
  .ds-val{font-size:14px}

  /* Section labels */
  .sec-label{font-size:11px;margin-bottom:14px}

  /* Cards */
  .sg{gap:10px;margin-bottom:36px}
  .card{padding:18px 18px 16px;border-radius:14px}
  .card-name{font-size:15px;margin-bottom:4px}
  .card-desc{font-size:12px;margin-bottom:8px}

  /* Streak */
  .streak-card{padding:16px 14px 14px;border-radius:18px;margin-bottom:16px}

  /* Pomodoro */
  .pomo{padding:18px 16px;border-radius:14px;margin-bottom:20px}
  .pomo-time{font-size:42px}
  .pomo-btns{gap:8px}
  .pomo-btn{padding:8px 16px;font-size:12px}

  /* Favs */
  .fav-section{margin-bottom:24px}
  .fav-chips{gap:6px}
  .fav-chip{padding:7px 10px;font-size:12px;border-radius:8px}

  /* Info boxes */
  .ibox{border-radius:14px;margin-bottom:10px}
  .ihd{padding:14px 16px}
  .ihd h3{font-size:15px}
  .ibd{padding:0 16px 16px;font-size:13px}
  .ir{font-size:13px;padding:8px 0;flex-wrap:wrap;gap:4px}

  /* Detail */
  .sh{padding:20px 18px;border-radius:14px;margin-bottom:18px}
  .sh h2{font-size:22px}
  .sh p{font-size:13px}
  .ce{padding:10px 14px;font-size:12px;border-radius:8px}
  .dl{gap:8px;margin-bottom:28px}
  .dc2{border-radius:14px}
  .dh{padding:14px 16px;gap:10px}
  .dlet{width:34px;height:34px;font-size:14px;border-radius:8px}
  .di h4{font-size:14px}
  .di p{font-size:11px}
  .dbtns{gap:5px}
  .exb{padding:5px 10px;font-size:11px;border-radius:6px}
  .qb{padding:7px 12px;font-size:12px;border-radius:8px}
  .dtop{padding:0 16px 16px}
  .ttags{gap:5px}
  .tt{padding:4px 10px;font-size:11px}
  .sam{padding:12px 14px;font-size:12px;border-radius:10px}
  .exam-meta{gap:6px;margin-top:10px}
  .em-chip{font-size:11px;padding:4px 10px}

  /* Progress overview */
  .progress-overview{padding:14px 16px;border-radius:14px;margin-bottom:18px}
  .po-title{font-size:14px}
  .po-grid{grid-template-columns:1fr;gap:6px}
  .po-item{padding:8px 10px}

  /* Quiz mode select */
  .qmw{padding:28px 16px}
  .qmw h2{font-size:22px}
  .qmsub{font-size:13px;margin-bottom:22px}
  .qmcd{padding:20px 16px;border-radius:14px}
  .qmci{font-size:26px;margin-bottom:8px}
  .qmcd h3{font-size:16px}
  .qmcd p{font-size:12px}
  .pill{font-size:11px;padding:3px 10px}

  /* Quiz */
  .qtb{padding:10px 14px 0}
  .ql{font-size:15px}
  .qstp{padding:6px 10px;font-size:12px}
  .qpb{margin:10px 14px 8px}
  .qbody{padding:18px 14px 24px;border-radius:18px;margin:10px 8px 0}
  .qctr{font-size:12px;margin-bottom:6px}
  .qctx{padding:12px 14px;font-size:13px;border-radius:10px;margin-bottom:14px}
  .qq{font-size:17px;margin-bottom:20px}
  .qopts{gap:8px;margin-bottom:14px}
  .opt{padding:16px;font-size:15px;border-radius:12px;gap:8px}
  .oi{width:24px;height:24px;font-size:12px;border-radius:6px}
  .qfb{padding:12px 14px;border-radius:12px;margin-bottom:12px}
  .fbt{font-size:14px}
  .fbtx{font-size:12px}
  .nxt{padding:16px;font-size:15px;border-radius:12px}
  .qring{width:48px;height:48px}
  .trn{font-size:15px}

  /* Open questions */
  .open-input{min-height:100px;padding:14px;font-size:14px;border-radius:12px}
  .nakijk-btn{padding:14px;font-size:14px;border-radius:12px}
  .model-antwoord{padding:14px 16px;border-radius:12px}
  .ma-text{font-size:13px}
  .assess-btns{gap:8px;margin-bottom:12px}
  .assess-btn{padding:12px 6px;border-radius:12px;font-size:13px}
  .ab-icon{font-size:18px}

  /* Results */
  .rb{padding:32px 16px}
  .remi{font-size:48px;margin-bottom:12px}
  .rb h2{font-size:26px;margin-bottom:8px}
  .rb>p{font-size:13px;margin-bottom:20px}
  .sring{width:110px;height:110px;margin-bottom:24px}
  .srn{font-size:30px}
  .rbd{padding:16px;border-radius:14px;margin-bottom:18px}
  .rbr{font-size:13px;padding:7px 0}
  .rbtns{gap:8px}
  .btnp{padding:15px;font-size:15px;border-radius:12px}
  .btns{padding:13px;font-size:13px;border-radius:12px}

  /* Review */
  .review-wrap{padding:24px 16px}
  .review-wrap h2{font-size:22px}
  .review-sub{font-size:13px;margin-bottom:18px}
  .review-card{padding:16px;border-radius:14px;margin-bottom:10px}
  .rc-q{font-size:14px}
  .rc-answer{font-size:12px;padding:8px 10px;border-radius:8px}
  .review-btns{gap:8px;margin-top:14px}

  /* Schedule */
  .sch-card{padding:14px 16px;border-radius:14px;gap:8px}
  .sch-date{font-size:13px}
  .sch-time{font-size:12px;min-width:auto}
  .sch-name{font-size:14px}
  .sch-dur{font-size:11px;padding:3px 8px}
  .sch-cd{font-size:12px;min-width:auto}
  .sch-filter{margin-bottom:16px}
  .sch-filter label{font-size:13px}

  /* Calculator */
  .calc-tabs{border-radius:12px;padding:4px;margin-bottom:20px;gap:3px}
  .calc-tab{padding:8px 12px;font-size:12px;border-radius:8px}
  .calc-row{padding:8px 0;gap:10px}
  .calc-label{font-size:13px}
  .calc-input{width:68px;padding:8px 10px;font-size:14px;border-radius:8px}
  .calc-btn{padding:14px;font-size:15px;border-radius:12px}
  .calc-result{padding:18px;border-radius:14px;margin-top:16px}
  .calc-result h3{font-size:20px}
  .calc-result p{font-size:13px}
  .calc-result-icon{font-size:44px;margin-bottom:8px}
  .calc-detail{font-size:12px}

  /* Footer */
  .site-footer{margin-top:32px;padding:20px 0 28px;font-size:12px;margin-bottom:8px}

  /* Cookie banner */
  .cookie-banner{padding:14px 16px;bottom:0}
  .cookie-inner{gap:12px}
  .cookie-text{font-size:13px;min-width:auto}
  .cookie-btns{width:100%;justify-content:stretch}
  .cookie-btn{flex:1;padding:10px 14px;font-size:13px;text-align:center;border-radius:10px}

  /* Privacy */
  .privacy-content{padding-top:24px}
  .privacy-content h2{font-size:24px}
  .privacy-content h3{font-size:16px;margin-top:24px}
  .privacy-content p,.privacy-content li{font-size:14px}

  /* Welcome */
  .welcome-hero{padding:36px 0 28px}
  .welcome-hero h1{font-size:28px;letter-spacing:-1px;margin-bottom:14px}
  .welcome-hero .hero-sub{font-size:14px}
  .welcome-info{gap:8px;margin-bottom:28px}
  .wi-card{padding:14px 16px;border-radius:12px}
  .wi-val{font-size:14px}
  .level-title{margin-bottom:14px;font-size:11px}
  .level-grid{gap:10px;margin-bottom:36px}
  .level-card{padding:22px 18px;border-radius:14px}
  .level-icon{font-size:28px;margin-bottom:10px}
  .level-card h3{font-size:20px;margin-bottom:4px}
  .level-card p{font-size:13px;margin-bottom:10px}
  .level-arrow{bottom:18px;right:18px;font-size:18px}
  .footer-text{font-size:12px;padding:16px 0 28px}

  /* Ads kleiner op mobiel */
  .ad-wrapper{margin:16px 0}
  .ad-slot{max-width:100%;min-height:50px}

  /* Auth scherm */
  .auth-wrap{padding:20px 16px 90px}
  .auth-card{padding:24px 18px;border-radius:18px}
  .auth-logo{margin-bottom:20px}
  .auth-logo h1{font-size:22px}
  .auth-tabs{margin-bottom:20px}
  .auth-input{padding:12px 14px;font-size:15px}
  .auth-btn{padding:14px;font-size:15px}

  /* Cloud status bar in profiel */
  .cloud-status{flex-wrap:wrap;gap:8px;padding:12px 14px;border-radius:14px}
  .cs-info{flex:1;min-width:0}
  .cs-email{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
  .cs-sub{font-size:11px}
  .cloud-setup{font-size:13px;padding:12px 14px;border-radius:12px}

  /* Profiel scherm */
  .prof-wrap{padding:20px 0 80px}
  .prof-page-header{margin-bottom:20px}
  .prof-page-header h2{font-size:22px}
  .prof-page-header p{font-size:13px}
  .prof-section{padding:18px;border-radius:16px;margin-bottom:16px}
  .prof-section-title{font-size:15px}
  .av-preview-row{gap:12px;margin-bottom:16px}
  .av-preview{font-size:42px}
  .cijfer-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}

  /* Leaderboard */
  .lb-wrap{padding:16px 12px 90px}
  .lb-header h2{font-size:22px}
  .lb-filter{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:18px}
  .lb-filter-btn{font-size:11px;padding:6px 12px}
  .lb-podium{gap:6px;margin-bottom:20px}
  .lb-pod-bar{width:50px}
  .lb-pod-avatar{width:46px;height:46px;font-size:24px}
  .lb-pod-name{max-width:56px;font-size:10px}
  .lb-row{padding:10px 12px;gap:10px;border-radius:12px}
  .lb-av{font-size:22px;width:40px;height:40px}
  .lb-av-rank{font-size:9px;min-width:17px;height:17px}
  .lb-name{font-size:13px}
  .lb-meta{font-size:11px}
  .lb-score{font-size:15px}
  .lb-myscore-box{border-radius:14px;padding:14px}
}

/* ══════════════════════════════════════════════
   MOBILE SIMPLIFICATION — less is more
   Alles hieronder geldt ALLEEN op mobiel (≤640px)
   Desktop-layout blijft ongewijzigd.
   ══════════════════════════════════════════════ */
@media(max-width:640px){

  /* ── HOME HERO: strak en to-the-point ──────── */
  .hm-badge{display:none}                       /* "Eindexamen 2026" chip — niet nodig */
  .hm-sub{display:none}                         /* tagline — h1 zegt genoeg */
  .hm-hero-inner{padding:28px 18px 20px;text-align:left}
  .hm-h1{font-size:34px;letter-spacing:-1.8px;margin-bottom:18px}
  #hm-greeting{font-size:15px;margin-bottom:6px}

  /* Countdown: compacte tekstversie, geen grote boxes */
  .hm-countdown{flex-direction:row;align-items:center;justify-content:space-between;padding:12px 16px;gap:8px;border-radius:14px;margin-bottom:16px}
  .cd-title{font-size:14px;font-weight:700}
  .cd-sub{font-size:11px;margin-top:1px}
  .cd-nums{display:none}                        /* D/H/M/S boxes weghalen */

  /* "Snel aan de slag" section header weghalen */
  .hm-hero .home-section-header{display:none}

  /* CTAs: primaire full-width, secundaire (Cijfers) hidden — zit al in bottombar */
  .hm-ctas{gap:10px}
  .hm-cta-primary{font-size:16px;padding:16px 24px;border-radius:16px}
  .hm-cta-sec{display:none}

  /* ── HOME BODY: verberg clutter ────────────── */
  #home-bento{display:none}                     /* bento stats — desktop feature */
  #live-count-home{display:none}                /* "X leerlingen oefenen nu" — vanity */
  #pomo-home{display:none}                      /* pomodoro timer — te complex voor home */
  #grade-insight-home{display:none}             /* cijferanalyse — zit in Cijfers tab */
  .hm-tvk{display:none}                        /* tijdvakken strip — zit in Rooster tab */
  #streak-milestone-banner-home{display:none}   /* streak milestone — te druk */
  #fav-home{display:none!important}             /* favorieten — te veel ruis */

  /* Section headers: compacter, geen subtitle */
  .home-section-header{margin-bottom:10px;margin-top:4px}
  .home-section-header .hsh-sub{display:none}

  /* Vakken header compacter */
  .hm-vakken-hdr{margin-top:4px;margin-bottom:10px}
  .hm-vakken-h2{font-size:18px}

  /* ── DAILY CHALLENGE: strakker ──────────────── */
  .daily-wrap{margin-bottom:8px}

  /* ── VAK DETAIL (sc-detail): simpeler ───────── */
  /* Vak-header: compacter */
  .sh{padding:16px 16px 14px;border-radius:14px;margin-bottom:14px}
  .sh h2{font-size:20px;margin-bottom:4px}
  .sh p{display:none}                           /* lange beschrijving verbergen */
  .ce{padding:9px 12px;font-size:12px;border-radius:8px;margin-top:8px}

  /* Domain cards: beschrijving in header weghalen (staat ook open) */
  .di p{display:none}                           /* domein beschrijving in gesloten card */
  .dh{padding:12px 14px;gap:10px}
  .di h4{font-size:13.5px}

  /* Knoppen in domein card header: kleiner */
  .exb{padding:5px 8px;font-size:11px}
  .qb{padding:7px 14px;font-size:12px;font-weight:700}

  /* ── QUIZ MODE SELECTION: compacter ─────────── */
  .qmw{padding:20px 16px}
  .qmw h2{font-size:20px;margin-bottom:6px}
  .qmsub{font-size:13px;margin-bottom:16px}
  .qmcd{padding:16px;border-radius:14px;margin-bottom:10px}
  .qmci{font-size:22px;margin-bottom:6px}
  .qmcd h3{font-size:15px;margin-bottom:2px}
  .qmcd p{font-size:11.5px}

  /* ── VAK DETAIL EXTRA ───────────────────────── */
  /* Detail tip verbergen (gebruiker snapt het al snel) */
  .detail-tip{display:none}
  /* Leerpad entry card compacter */
  .lp-ec{padding:14px 16px;border-radius:14px;margin-bottom:10px}
  .lp-ec-title{font-size:13px}
  .lp-ec-sub{font-size:11px}
  .lp-ec-dots{margin-top:8px}
  /* Simulatietoets en examen entry buttons compacter */
  .sim-entry-btn,.exam-entry-btn{padding:12px 14px;border-radius:12px;margin-bottom:8px}
  .sim-entry-icon,.exam-entry-icon{font-size:20px}
  .sim-entry-title,.exam-entry-title{font-size:13.5px}
  .sim-entry-sub,.exam-entry-sub{font-size:11px}
  /* Lesmethode filter compacter */
  .meth-filter-wrap{padding:10px 12px;border-radius:12px;margin-bottom:12px}
  /* Domein qb knop: prominenter op mobiel */
  .qb{background:var(--or);color:#fff;border:none;padding:8px 16px;font-size:13px;font-weight:700;border-radius:10px}
  .qb:hover{opacity:.88}

  /* ── RESULT SCHERM: compacter ───────────────── */
  .rbtns{gap:7px}
  .btnp,.btns{font-size:13px;padding:11px 16px}
  .chal-daag-btn,.lb-res-btn{font-size:13px;padding:11px 16px}

  /* ── PROFIEL / XP / AVATAR ───────────────────── */
  .prof-section{padding:16px 14px}
  .prof-page-header{margin-bottom:18px}
  .prof-page-header h2{font-size:22px}
  .anim-evo-card{padding:14px 10px}
  .anim-evo-title{font-size:14px;flex-wrap:wrap;gap:6px}
  .anim-change-btn{font-size:10px;padding:3px 8px}
  .anim-evo-stages{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;gap:0}
  .anim-stage-pip{width:34px;height:34px;font-size:17px}
  .anim-stage.current .anim-stage-pip{width:40px;height:40px;font-size:20px}
  .anim-stage-label{font-size:7.5px;letter-spacing:.2px}
  .anim-stage-req{font-size:7px}
  .anim-pick-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .anim-pick-btn{padding:8px 2px}
  .anim-pick-emoji .anim-svg-wrap{width:30px;height:30px}
  .anim-pick-name{font-size:9px}
}
@media(max-width:375px){
  .hero h1,.welcome-hero h1{font-size:24px}
  .hero-sub,.welcome-hero .hero-sub{font-size:13px}
  .cd-title{font-size:17px}
  .cd-box{padding:6px 8px;min-width:46px}
  .cd-val{font-size:20px}
  .card-name{font-size:14px}
  .qq{font-size:15px}
  .opt{padding:14px;font-size:14px}
  .qmw h2{font-size:20px}
  .rb h2{font-size:22px}
  .sring{width:100px;height:100px}
  .srn{font-size:26px}
  .calc-tab{padding:7px 10px;font-size:11px}
  .level-card h3{font-size:18px}
}

/* ── SUBTLE ANIMATIONS ───────────────────────── */
@keyframes pulseGlow { 0%,100%{box-shadow:0 4px 15px rgba(232,92,13,0.3)} 50%{box-shadow:0 4px 25px rgba(232,92,13,0.5)} }
.opt:active:not(:disabled){transform:scale(0.97)!important;transition:transform .1s}
.card:active{transform:scale(0.98)!important;transition:transform .1s}
.btnp:active,.btns:active,.nxt:active{transform:scale(0.97)!important}
.cookie-accept:active,.cookie-decline:active,.calc-btn:active,.qb:active{transform:scale(0.97)}
.qpf{animation:none}
.opt{will-change:transform,opacity}

/* ── PROFIEL SCREEN ──────────────────────────── */
.prof-wrap{padding:32px 0 72px}
/* Avatar picker */
.avatar-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:10px;margin:16px 0 20px}
.av-opt{width:62px;height:62px;border-radius:16px;border:2.5px solid var(--bo);background:var(--bg);font-size:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;user-select:none}
.av-opt:hover{border-color:var(--or);transform:scale(1.08);background:var(--orl)}
.av-opt.selected{border-color:var(--or);background:var(--orl);box-shadow:0 0 0 3px rgba(var(--or-rgb),.18);transform:scale(1.1)}
.av-preview{width:56px;height:56px;border-radius:16px;background:var(--orl);border:2px solid var(--or);font-size:30px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.av-preview-row{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.av-preview-info{font-size:13px;color:var(--mu);line-height:1.7}
.av-preview-info strong{color:var(--dk);display:block;font-size:15px}
/* ── OE PICKER ── */
.oep-wrap{max-width:560px;margin:0 auto;padding:24px 16px 100px}
.oep-header{margin-bottom:6px}
.oep-header h2{font-size:22px;font-weight:800;color:var(--dk)}
.oep-meta{font-size:13px;color:var(--mu);margin-bottom:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oep-count-pill{background:rgba(var(--or-rgb),.12);color:var(--or);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.oep-group{margin-bottom:24px}
.oep-group-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.oep-jaar{font-family:var(--font-head);font-size:20px;font-weight:900;color:var(--dk)}
.oep-tv{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--bg2);color:var(--mu);border:1px solid var(--bo)}
.oep-tv.tv1{background:rgba(var(--or-rgb),.1);color:var(--or);border-color:rgba(var(--or-rgb),.25)}
.oep-tv.tv2{background:rgba(99,102,241,.1);color:#6366f1;border-color:rgba(99,102,241,.25)}
.oep-card{background:var(--s);border:1.5px solid var(--bo);border-radius:16px;padding:16px 18px;cursor:pointer;transition:all .2s;margin-bottom:8px}
.oep-card:hover{border-color:var(--or);transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--or-rgb),.12)}
.oep-card-domein{font-size:10px;font-weight:800;color:var(--or);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.oep-card-q{font-size:13px;font-weight:600;color:var(--dk);line-height:1.5;margin-bottom:10px}
.oep-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.oep-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.oep-card-tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--bg2);color:var(--mu);border:1px solid var(--bo)}
.oep-card-cta{font-size:11px;font-weight:700;color:var(--or);white-space:nowrap}
.oep-card:hover .oep-card-cta::after{content:' →'}

/* ── LEADERBOARD ── */
.lb-wrap{max-width:520px;margin:0 auto;padding:24px 16px 100px}
.lb-header{text-align:center;margin-bottom:24px}
.lb-header h2{font-size:26px;font-weight:800;margin-bottom:4px}
.lb-header p{color:var(--mu);font-size:13px}
.lb-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;justify-content:center}
.lb-filter-btn{padding:7px 16px;border-radius:20px;border:1.5px solid var(--bo);background:var(--s);color:var(--dk);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .18s}
.lb-filter-btn.active,.lb-filter-btn:hover{border-color:var(--or);background:var(--orl);color:var(--or)}
.lb-podium{display:flex;justify-content:center;align-items:flex-end;gap:8px;margin-bottom:28px}
.lb-pod{display:flex;flex-direction:column;align-items:center;gap:4px}
.lb-pod-medal{font-size:22px}
.lb-pod-avatar{font-size:32px;width:54px;height:54px;border-radius:50%;border:3px solid var(--bo);background:var(--bg2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.lb-pod-avatar.gold{border-color:#F59E0B}
.lb-pod-avatar.silver{border-color:#9CA3AF}
.lb-pod-avatar.bronze{border-color:#CD7C3F}
.lb-pod-bar{border-radius:8px 8px 0 0;width:60px;background:var(--bo);display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font-size:10px;font-weight:800;color:var(--mu)}
.lb-pod-bar.gold{background:linear-gradient(0deg,#F59E0B22,#F59E0B44);border:1px solid #F59E0B44}
.lb-pod-bar.silver{background:linear-gradient(0deg,#9CA3AF22,#9CA3AF44);border:1px solid #9CA3AF44}
.lb-pod-bar.bronze{background:linear-gradient(0deg,#CD7C3F22,#CD7C3F44);border:1px solid #CD7C3F44}
.lb-pod-name{font-size:11px;font-weight:700;color:var(--dk);text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-pod-score{font-size:10px;color:var(--mu)}
.lb-list{display:flex;flex-direction:column;gap:8px}
.lb-row{display:flex;align-items:center;gap:12px;background:var(--s);border:1px solid var(--bo);border-radius:14px;padding:12px 14px;transition:all .18s}
.lb-row.me{border-color:var(--or);background:var(--orl)}
.lb-av-wrap{position:relative;flex-shrink:0}
.lb-av{font-size:28px;width:50px;height:50px;border-radius:50%;background:var(--bg2);border:2.5px solid var(--bo);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s;overflow:hidden}
.lb-row:hover .lb-av{transform:scale(1.1)}
.lb-av-rank{position:absolute;bottom:-3px;right:-3px;min-width:20px;height:20px;border-radius:10px;background:var(--mu);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--s);font-family:var(--font);padding:0 4px;line-height:1}
.lb-row.me .lb-av-rank{background:var(--or)}
.lb-av-badge{position:absolute;bottom:-3px;left:-3px;width:20px;height:20px;border-radius:50%;background:var(--bg2);border:2px solid var(--s);display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.lb-info{flex:1;min-width:0}
.lb-name{font-size:14px;font-weight:700;color:var(--dk);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lb-meta{font-size:11px;color:var(--mu);margin-top:2px}
.lb-score{text-align:right;flex-shrink:0}
.lb-score-num{font-size:18px;font-weight:800;color:var(--or)}
/* Tier + niveau badges */
.lb-tier{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.3px;white-space:nowrap}
.lb-tier-elite{background:#fef3c7;color:#92400e}
.lb-tier-expert{background:#ede9fe;color:#5b21b6}
.lb-tier-gevorderd{background:#dbeafe;color:#1e40af}
.lb-tier-leerling{background:#dcfce7;color:#166534}
.lb-tier-beginner{background:var(--bg2);color:var(--mu)}
.lb-niveau-chip{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;background:rgba(var(--or-rgb),.12);color:var(--or);letter-spacing:.5px}
/* Rank column left of avatar */
.lb-rank-col{width:28px;text-align:center;font-family:var(--font-head);font-size:13px;font-weight:900;color:var(--mu);flex-shrink:0}
.lb-rank-col.top1{color:#F59E0B}
.lb-rank-col.top2{color:#9CA3AF}
.lb-rank-col.top3{color:#CD7C3F}
.lb-score-sub{font-size:10px;color:var(--mu)}
.lb-empty{text-align:center;padding:32px 16px 40px}
.lb-empty-orb{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,rgba(var(--or-rgb),.12),rgba(99,102,241,.12));border:2px solid rgba(var(--or-rgb),.2);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:36px}
.lb-empty-title{font-size:18px;font-weight:900;font-family:var(--font-head);color:var(--dk);margin-bottom:8px;letter-spacing:-.2px}
.lb-empty-sub{font-size:13px;color:var(--mu);line-height:1.6;margin-bottom:20px;max-width:280px;margin-left:auto;margin-right:auto}
.lb-empty-tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:22px;max-width:340px;margin-left:auto;margin-right:auto}
.lb-empty-tier{background:var(--s);border:1.5px solid var(--bo);border-radius:10px;padding:8px 4px;text-align:center}
.lb-empty-tier-icon{font-size:15px;margin-bottom:3px}
.lb-empty-tier-name{font-size:9px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.4px}
.lb-empty-tier-pts{font-size:10px;font-weight:800;color:var(--dk);margin-top:1px}
.lb-empty-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:linear-gradient(135deg,var(--or),#f59e0b);color:#fff;border:none;border-radius:14px;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--font-head);box-shadow:0 4px 16px rgba(var(--or-rgb),.35);transition:all .2s}
.lb-empty-cta:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(var(--or-rgb),.45)}
.lb-row{cursor:pointer}
.lb-row:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.lb-pod-avatar{cursor:pointer}
/* ── LB PROFILE MODAL ── */
.lbp-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.55);backdrop-filter:blur(7px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.lbp-overlay.open{opacity:1;pointer-events:all}
.lbp-card{position:relative;background:var(--s);border-radius:28px 28px 0 0;padding:20px 22px 48px;width:100%;max-width:520px;transform:translateY(100%);transition:transform .38s cubic-bezier(.32,1.1,.46,1);max-height:88vh;overflow-y:auto}
.lbp-overlay.open .lbp-card{transform:translateY(0)}
.lbp-drag{width:40px;height:4px;border-radius:2px;background:var(--bo);margin:0 auto 20px}
.lbp-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;background:var(--bg2);border:1px solid var(--bo);cursor:pointer;font-size:14px;color:var(--mu);display:flex;align-items:center;justify-content:center;transition:all .15s}
.lbp-close:hover{background:var(--bo)}
.lbp-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.lbp-av{font-size:50px;width:68px;height:68px;border-radius:50%;background:var(--bg2);border:3px solid var(--bo);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.lbp-av-wrap{position:relative;flex-shrink:0;width:68px;height:68px}
.lbp-headinfo{flex:1}
.lbp-naam{font-size:20px;font-weight:800;color:var(--dk);margin-bottom:5px}
.lbp-chips{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.lbp-bio{font-size:13px;color:var(--mu);font-style:italic;border-left:3px solid var(--or);padding:6px 0 6px 12px;margin-bottom:18px;line-height:1.55}
.lbp-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:18px}
.lbp-stat{background:var(--bg2);border-radius:14px;padding:13px 15px;border:1px solid var(--bo)}
.lbp-stat-val{font-size:22px;font-weight:900;color:var(--dk);font-family:var(--font-head);line-height:1}
.lbp-stat-lbl{font-size:11px;color:var(--mu);margin-top:3px}
.lbp-section-title{font-size:10px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:1px;margin:18px 0 8px}
.lbp-detail-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--bo);font-size:13px}
.lbp-detail-row:last-child{border-bottom:none}
.lbp-detail-key{color:var(--mu);flex-shrink:0}
.lbp-detail-val{font-weight:700;color:var(--dk);text-align:right}
.lbp-recent-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border-radius:10px;padding:10px 13px;font-size:12px;border:1px solid var(--bo)}
.lbp-badges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lbp-badge-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg2);border:1.5px solid var(--bo);border-radius:12px;padding:10px 6px;text-align:center;transition:transform .15s}
.lbp-badge-item:hover{transform:translateY(-2px)}
.lbp-badge-emoji{font-size:22px;line-height:1}
.lbp-badge-lbl{font-size:9px;font-weight:700;color:var(--mu);letter-spacing:.2px;line-height:1.2}
.lbp-badge-item.rarity-rare{border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.06)}
.lbp-badge-item.rarity-epic{border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.06)}
.lbp-badge-item.rarity-legendary{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)}
.lbp-badge-item.rarity-mythic{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.06)}
.lbp-badge-item.rarity-eternal{border-color:rgba(139,92,246,.5);background:linear-gradient(135deg,rgba(244,63,94,.06),rgba(139,92,246,.06))}
.lbp-featured-badge{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1.5px solid var(--bo);border-radius:14px;padding:14px 16px}
.lbp-featured-badge.rarity-rare{border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.07)}
.lbp-featured-badge.rarity-epic{border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.07)}
.lbp-featured-badge.rarity-legendary{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.07)}
.lbp-featured-badge.rarity-mythic{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.07)}
.lbp-featured-badge.rarity-eternal{border-color:rgba(139,92,246,.5);background:linear-gradient(135deg,rgba(244,63,94,.07),rgba(139,92,246,.07))}
.lbp-recent-vak{font-weight:700;color:var(--dk)}
.lbp-recent-score{font-weight:800;color:var(--or)}
.lbp-bar-wrap{margin-top:4px;background:var(--bo);border-radius:4px;height:5px;overflow:hidden}
.lbp-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--or),color-mix(in srgb,var(--or) 70%,#fff));transition:width .6s .2s}
.lb-my-score{background:var(--orl);border:1.5px solid var(--or);border-radius:16px;padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:14px}
.lb-my-av{font-size:34px;width:52px;height:52px;border-radius:50%;background:var(--bg2);border:2px solid var(--or);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lb-my-info{flex:1}
.lb-my-title{font-size:13px;color:var(--or);font-weight:700;margin-bottom:2px}
.lb-my-name{font-size:16px;font-weight:800;color:var(--dk)}
.lb-my-det{font-size:11px;color:var(--mu);margin-top:4px}
.lb-my-score-box{text-align:right}
.lb-my-score-n{font-size:24px;font-weight:900;color:var(--or)}
.lb-my-score-l{font-size:10px;color:var(--mu)}
.lb-res-btn{width:100%;margin-top:16px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#F59E0B,#EF4444);color:#fff;border:none;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);display:none}
.lb-res-btn:hover{opacity:.9}
/* ── SCORE INFO PANEL ── */
.lb-score-info{border:1px solid var(--bo);border-radius:16px;overflow:hidden;margin-bottom:18px;background:var(--s);transition:border-color .2s}
.lb-score-info:hover{border-color:rgba(var(--or-rgb),.3)}
.lb-score-info-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:none;border:none;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:700;color:var(--dk);gap:10px}
.lb-score-info-btn svg{width:16px;height:16px;flex-shrink:0;color:var(--mu);transition:transform .25s}
.lb-score-info.open .lb-score-info-btn svg{transform:rotate(180deg)}
.lb-score-info-body{display:none;padding:0 16px 16px}
.lb-score-info.open .lb-score-info-body{display:block}
.lb-score-formula{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.lb-score-part{display:flex;align-items:center;gap:10px;background:rgba(var(--or-rgb),.07);border:1px solid rgba(var(--or-rgb),.15);border-radius:12px;padding:10px 14px;flex:1;min-width:130px}
.lb-score-part-icon{font-size:22px;flex-shrink:0}
.lb-score-part-title{font-size:12px;font-weight:700;color:var(--dk)}
.lb-score-part-val{font-size:11px;color:var(--or);font-weight:600;margin-top:2px}
.lb-score-plus{font-size:20px;font-weight:800;color:var(--mu);flex-shrink:0}
.lb-score-example{background:var(--bg2);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:12px}
.lb-score-ex-title{color:var(--mu);margin-bottom:5px;font-weight:600}
.lb-score-ex-calc{color:var(--dk);font-weight:600;font-size:13px}
.lb-score-ex-calc span{color:var(--mu);margin:0 4px}
.lb-score-ex-calc strong{color:var(--or)}
.lb-score-tiers{border-top:1px solid var(--bo);padding-top:12px}
.lb-score-tier-title{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px}
.lb-tier-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--bo);font-size:12px}
.lb-tier-row:last-child{border-bottom:none}
.lb-tier-av{font-size:16px;min-width:52px}
.lb-tier-lbl{font-weight:700;color:var(--dk);min-width:72px}
.lb-tier-pts{color:var(--mu)}
/* ── ANIMAL EVOLUTION ── */
.anim-pick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0 4px}
@media(max-width:480px){.anim-pick-grid{grid-template-columns:repeat(3,1fr)}}
.anim-pick-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;border:2px solid var(--bo);background:var(--bg);cursor:pointer;transition:all .2s cubic-bezier(.34,1.4,.64,1);font-family:var(--font)}
.anim-pick-btn:hover{border-color:var(--or);background:var(--orl);transform:scale(1.06)}
.anim-pick-btn.selected{border-color:var(--or);background:var(--orl);box-shadow:0 0 0 3px rgba(var(--or-rgb),.2)}
.anim-pick-emoji{font-size:26px;line-height:1}
.anim-pick-name{font-size:10px;font-weight:700;color:var(--mu)}
.anim-pick-btn.selected .anim-pick-name{color:var(--or)}
/* Evolution timeline on profile */
.anim-evo-card{background:linear-gradient(135deg,rgba(var(--or-rgb),.08),rgba(var(--or-rgb),.02));border:1px solid rgba(var(--or-rgb),.2);border-radius:20px;padding:20px;margin-bottom:16px}
.anim-evo-title{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--dk);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.anim-evo-locked{font-size:10px;font-weight:700;background:rgba(var(--or-rgb),.15);color:var(--or);padding:2px 8px;border-radius:10px;letter-spacing:.4px}
.anim-change-btn{font-size:11px;font-weight:700;background:rgba(var(--or-rgb),.12);color:var(--or);padding:4px 10px;border-radius:10px;border:1px solid rgba(var(--or-rgb),.3);cursor:pointer;font-family:var(--font);transition:all .2s;flex-shrink:0;margin-left:auto}
.anim-change-btn:hover{background:rgba(var(--or-rgb),.22)}
.anim-evo-subtitle{font-size:12px;color:var(--mu);margin-bottom:16px}
.anim-evo-stages{display:flex;align-items:flex-end;gap:0;margin-bottom:12px}
.anim-stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.anim-stage:not(:last-child)::after{content:'';position:absolute;right:0;top:20px;width:100%;height:2px;background:var(--bo);z-index:0;transform:translateX(50%)}
.anim-stage.done::after{background:var(--or)}
.anim-stage-pip{width:40px;height:40px;border-radius:50%;background:var(--bg2);border:2px solid var(--bo);display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;z-index:1;transition:all .3s}
.anim-stage.done .anim-stage-pip{border-color:var(--or);background:var(--orl)}
.anim-stage.current .anim-stage-pip{border-color:var(--or);background:var(--or);font-size:24px;width:48px;height:48px;box-shadow:0 0 18px rgba(var(--or-rgb),.45);animation:animalPulse 2.5s ease-in-out infinite}
@keyframes animalPulse{0%,100%{box-shadow:0 0 18px rgba(var(--or-rgb),.45)}50%{box-shadow:0 0 28px rgba(var(--or-rgb),.7)}}
.anim-stage-label{font-size:9px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.4px;text-align:center}
.anim-stage.current .anim-stage-label{color:var(--or)}
.anim-stage-req{font-size:8px;color:var(--mu);opacity:.6}
.anim-evo-progress{margin-top:8px}
.anim-evo-prog-bar{height:6px;border-radius:3px;background:var(--bo);overflow:hidden;margin-bottom:4px}
.anim-evo-prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--or),color-mix(in srgb,var(--or) 70%,#f97316));transition:width .6s cubic-bezier(.34,1.2,.64,1)}
.anim-evo-prog-txt{font-size:11px;color:var(--mu);text-align:right}
/* Warning in register */
.anim-warn{font-size:11px;color:var(--mu);background:var(--bg2);border-radius:8px;padding:8px 12px;margin-top:6px;line-height:1.5}
.anim-warn strong{color:var(--dk)}
/* ── AUTH SCREEN ── */
.auth-wrap{max-width:420px;margin:0 auto;padding:48px 24px 100px}
.auth-logo{text-align:center;margin-bottom:32px}
.auth-logo .logo-dot{width:14px;height:14px;border-radius:50%;background:var(--or);display:inline-block;margin-right:6px;vertical-align:middle}
.auth-logo h1{font-size:26px;font-weight:800;display:inline;vertical-align:middle}
.auth-card{background:var(--s);border:1px solid var(--bo);border-radius:24px;padding:32px}
.auth-tabs{display:flex;gap:4px;background:var(--bg2);border-radius:12px;padding:4px;margin-bottom:28px}
.auth-tab{flex:1;padding:10px;border-radius:9px;border:none;background:none;font-size:14px;font-weight:600;color:var(--mu);cursor:pointer;font-family:var(--font);transition:all .2s}
.auth-tab.active{background:var(--s);color:var(--dk);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.auth-field{margin-bottom:16px}
.auth-field label{display:block;font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.auth-input{width:100%;padding:13px 16px;border:1.5px solid var(--bo);border-radius:12px;font-size:15px;font-family:var(--font);background:var(--bg);color:var(--dk);transition:all .2s;outline:none}
.auth-input:focus{border-color:var(--or);box-shadow:0 0 0 3px rgba(var(--or-rgb),.12)}
.auth-btn{width:100%;padding:15px;border-radius:14px;background:var(--or);color:#fff;border:none;font-size:16px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s;margin-top:8px;box-shadow:0 4px 16px rgba(var(--or-rgb),.35)}
.auth-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 8px 28px rgba(var(--or-rgb),.55),0 0 0 3px rgba(var(--or-rgb),.18)}
.auth-btn:disabled{opacity:.7;cursor:default;transform:none}
.auth-btn.loading{display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.auth-btn.loading::after{content:'';flex-shrink:0;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:btnSpin .65s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.auth-err{background:#FEF2F2;border:1px solid #FECACA;border-radius:10px;padding:10px 14px;font-size:13px;color:#DC2626;margin-bottom:16px;display:none}
html.dark .auth-err{background:#2D1515;border-color:#7F1D1D;color:#FCA5A5}
.auth-ok{background:#F0FDF4;border:1px solid #BBF7D0;border-radius:10px;padding:10px 14px;font-size:13px;color:#15803D;margin-bottom:16px;display:none}
html.dark .auth-ok{background:#0F2D1C;border-color:#166534;color:#86EFAC}
.auth-link{text-align:center;margin-top:16px;font-size:13px;color:var(--mu)}
.auth-link button{background:none;border:none;color:var(--or);font-weight:600;cursor:pointer;font-size:13px;font-family:var(--font)}
.auth-panel{display:none}.auth-panel.active{display:block}
.auth-divider{text-align:center;font-size:12px;color:var(--mu);margin:16px 0;position:relative}
.auth-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--bo)}
.auth-divider span{position:relative;background:var(--s);padding:0 10px}
/* Cloud sync status in profile */
.cloud-status{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--bo);border-radius:12px;padding:12px 16px;margin-bottom:20px;font-size:13px}
.cloud-status .cs-icon{font-size:20px;flex-shrink:0}
.cloud-status .cs-info{flex:1}
.cloud-status .cs-email{font-weight:700;color:var(--dk);font-size:14px}
.cloud-status .cs-sub{color:var(--mu);font-size:12px}
.cloud-status .cs-logout{padding:6px 14px;border-radius:8px;border:1px solid var(--bo);background:var(--s);color:var(--dk);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);flex-shrink:0;transition:all .2s}
.cloud-status .cs-logout:hover{border-color:#EF4444;color:#EF4444}
.cloud-setup{background:var(--orl);border:1px solid rgba(var(--or-rgb),.2);border-radius:12px;padding:14px 16px;margin-bottom:20px;font-size:13px;color:var(--or)}
.cloud-setup a{color:var(--or);font-weight:700}
.prof-section-sub{font-size:13px;color:var(--mu);margin-bottom:16px}
.prof-page-header{margin-bottom:32px}
.prof-page-header h2{font-size:28px;font-weight:800;margin-bottom:6px}
.prof-page-header p{color:var(--mu);font-size:15px}
.prof-section{background:var(--s);border:1px solid var(--bo);border-radius:20px;padding:28px 32px;margin-bottom:24px}
.prof-section-title{font-size:17px;font-weight:700;margin-bottom:4px;font-family:var(--font-head)}
.prof-section-sub{font-size:13px;color:var(--mu);margin-bottom:22px}
.prof-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.prof-fields{grid-template-columns:1fr}}
.prof-field label{display:block;font-size:12px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}
.prof-field input,.prof-field select{width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid var(--bo);background:var(--bg);color:var(--dk);font-size:15px;font-family:var(--font);transition:border-color .2s,box-shadow .2s;outline:none}
.prof-field input:focus,.prof-field select:focus{border-color:var(--or);box-shadow:0 0 0 3px rgba(var(--or-rgb),.1)}
.prof-field.full{grid-column:1/-1}
.pf-save-btn{margin-top:20px;padding:12px 28px;border-radius:12px;background:var(--or);color:#fff;border:none;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s}
.pf-save-btn:hover{opacity:.9;transform:translateY(-1px)}
.pf-saved{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:14px;font-weight:600;margin-left:14px;opacity:0;transition:opacity .4s}
.pf-saved.show{opacity:1}

/* Import buttons */
.import-row{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.import-app-btn{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:14px;border:1.5px solid var(--bo);background:var(--bg);cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;color:var(--dk);transition:all .2s}
.import-app-btn:hover{border-color:var(--or);background:var(--orl)}
.import-app-btn.active{border-color:var(--or);background:var(--orl);color:var(--or)}
.import-app-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.import-app-icon.mag{background:#003A70;color:#fff}
.import-app-icon.som{background:#E5171E;color:#fff}
.import-panel{background:var(--bg2);border-radius:16px;padding:20px 22px;margin-bottom:20px;display:none}
.import-panel.show{display:block}
.import-steps{font-size:14px;color:var(--mu);line-height:2;margin-bottom:14px}
.import-steps strong{color:var(--dk)}
.import-steps ol{padding-left:20px}
.import-textarea{width:100%;min-height:110px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--bo);background:var(--s);color:var(--dk);font-size:13px;font-family:var(--font);resize:vertical;outline:none;margin-top:12px;transition:border-color .2s}
.import-textarea:focus{border-color:var(--or)}
.import-go-btn{margin-top:12px;padding:10px 22px;border-radius:10px;background:var(--or);color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s}
.import-go-btn:hover{opacity:.9}
.import-result{margin-top:10px;font-size:13px;font-weight:600;display:none}
.import-result.ok{color:var(--green);display:block}
.import-result.err{color:var(--red);display:block}

/* Grade inputs grid */
.cijfer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:8px}
.cijfer-item{background:var(--bg);border:1px solid var(--bo);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.cijfer-vak{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.cijfer-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cijfer-input{width:100%;padding:9px 12px;border-radius:10px;border:1.5px solid var(--bo);background:var(--s);color:var(--dk);font-size:15px;font-weight:600;text-align:center;font-family:var(--font);outline:none;transition:border-color .2s}
.cijfer-input:focus{border-color:var(--or)}
.cijfer-input.has-val{border-color:var(--green);background:color-mix(in srgb,var(--green) 6%,var(--s))}
.cijfer-label{font-size:11px;color:var(--mu);text-align:center}
.cijfer-save-btn{margin-top:20px;padding:12px 28px;border-radius:12px;background:var(--or);color:#fff;border:none;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s}
.cijfer-save-btn:hover{opacity:.9;transform:translateY(-1px)}

/* Mijn stats grid */
.ms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 18px}
.ms-card{background:var(--bg2);border:1px solid var(--bo);border-radius:14px;padding:14px 15px}
.ms-val{font-size:24px;font-weight:900;font-family:var(--font-head);color:var(--dk);line-height:1}
.ms-lbl{font-size:11px;color:var(--mu);margin-top:3px}
.ms-bar-wrap{margin-top:6px;background:var(--bo);border-radius:4px;height:5px;overflow:hidden}
.ms-bar{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--or),color-mix(in srgb,var(--or) 70%,#fff))}
.ms-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--bo);font-size:13px}
.ms-row:last-child{border-bottom:none}
.ms-key{color:var(--mu)}
.ms-val2{font-weight:700;color:var(--dk)}
.ms-vak-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border-radius:10px;padding:9px 13px;font-size:12px;border:1px solid var(--bo)}
.ms-vak-naam{font-weight:700;color:var(--dk)}
.ms-vak-score{font-weight:800;color:var(--or)}
/* Profile nav pill */
.prof-nav-btn{margin-left:8px;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--bo);background:var(--s);color:var(--dk);transition:all .2s;font-family:var(--font);display:flex;align-items:center;gap:6px}
.prof-nav-btn:hover{background:var(--bg2);border-color:var(--or)}
.prof-nav-btn .pnb-avatar{width:22px;height:22px;border-radius:50%;background:var(--or);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── XP & GAMIFICATION ───────────────────────── */
.combo-badge{position:fixed;top:72px;right:14px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:24px;padding:9px 20px;font-weight:900;font-size:16px;z-index:9300;animation:comboIn .3s cubic-bezier(.34,1.6,.64,1);pointer-events:none;box-shadow:0 6px 28px rgba(239,68,68,.55),0 0 0 3px rgba(245,158,11,.3);letter-spacing:.2px}
.combo-badge.combo-big{font-size:20px;padding:12px 24px;box-shadow:0 8px 36px rgba(239,68,68,.7),0 0 0 4px rgba(245,158,11,.4)}
@keyframes comboIn{from{transform:scale(.2) translateY(-30px) rotate(-8deg);opacity:0}to{transform:scale(1) translateY(0) rotate(0deg);opacity:1}}
/* Sound toggle knop in quiz-balk */
.qtb-snd{background:none;border:none;cursor:pointer;font-size:18px;padding:6px;opacity:.55;transition:opacity .2s;border-radius:8px}
.qtb-snd:hover{opacity:1;background:rgba(255,255,255,.1)}
/* Level-up teaser in resultaten */
.lvl-teaser{background:linear-gradient(135deg,rgba(var(--or-rgb),.1),rgba(var(--or-rgb),.04));border:1px solid rgba(var(--or-rgb),.25);border-radius:16px;padding:14px 18px;margin-top:14px;display:flex;align-items:center;gap:12px;text-align:left}
.lvl-teaser-bar{flex:1}
.lvl-teaser-lbl{font-size:12px;color:var(--mu);margin-bottom:5px;font-weight:600}
.lvl-teaser-fill{height:8px;background:var(--bo2);border-radius:8px;overflow:hidden}
.lvl-teaser-fill-inner{height:100%;background:linear-gradient(90deg,var(--or),#f59e0b);border-radius:8px;transition:width 1s cubic-bezier(.34,1.1,.64,1)}
/* "Eén meer" suggestie-kaart */
.one-more-card{background:var(--s);border:1.5px solid var(--bo);border-radius:18px;padding:18px;margin-top:16px;cursor:pointer;transition:all .2s;text-align:left}
.one-more-card:hover{transform:translateY(-2px);border-color:var(--or);box-shadow:0 6px 22px rgba(var(--or-rgb),.15)}
.one-more-tag{font-size:10px;font-weight:800;color:var(--or);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.one-more-title{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--dk);margin-bottom:4px}
.one-more-sub{font-size:12px;color:var(--mu);margin-bottom:12px}
.one-more-cta{display:inline-block;background:var(--or);color:#fff;border-radius:10px;padding:8px 18px;font-size:13px;font-weight:800;font-family:var(--font)}
/* Quiz verlaat-overlay */
.quit-overlay{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(5px)}
.quit-card{background:var(--bg);border-radius:24px;padding:28px 24px;max-width:340px;width:100%;text-align:center;animation:comboIn .3s cubic-bezier(.34,1.2,.64,1)}
.quit-progress-row{display:flex;gap:8px;justify-content:center;margin:14px 0}
.quit-stat{background:var(--s);border:1px solid var(--bo);border-radius:12px;padding:10px 18px;min-width:80px}
.quit-stat-val{font-size:22px;font-weight:900;color:var(--dk);font-family:var(--font-head)}
.quit-stat-lbl{font-size:10px;color:var(--mu);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.quit-combo-warn{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:12px;padding:10px 14px;font-size:13px;color:#ef4444;font-weight:700;margin-bottom:16px}
@keyframes xpShimmer{0%{left:-60%}100%{left:120%}}
.xp-toast{position:fixed;top:76px;left:50%;transform:translateX(-50%);background:#22c55e;color:#fff;border-radius:20px;padding:7px 20px;font-weight:700;font-size:14px;z-index:300;animation:toastIn .3s ease,toastOut .4s ease 1s forwards;pointer-events:none;box-shadow:0 4px 16px rgba(34,197,94,.45)}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(-50%) translateY(-10px)}}
#offline-banner{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);background:#1e293b;color:#fff;padding:10px 20px;border-radius:40px;font-size:13px;font-weight:600;z-index:9998;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 4px 20px rgba(0,0,0,.4)}
#offline-banner.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.xp-bar-wrap{background:var(--bo);border-radius:10px;height:7px;overflow:hidden;margin:10px 0 4px}
.xp-bar{height:100%;background:linear-gradient(90deg,var(--or),#f59e0b);border-radius:10px;transition:width .8s cubic-bezier(.34,1.2,.64,1)}
.lvl-badge{background:var(--or);color:#fff;border-radius:10px;padding:2px 9px;font-size:11px;font-weight:800;margin-left:6px;letter-spacing:.3px}
.res-xp{background:linear-gradient(135deg,rgba(var(--or-rgb),.08),rgba(var(--or-rgb),.03));border:1px solid rgba(var(--or-rgb),.2);border-radius:18px;padding:18px 20px;margin:16px 0;text-align:center}
.res-xp-num{font-size:32px;font-weight:900;color:var(--or);font-family:var(--font-head);letter-spacing:-.5px}
.res-xp-sub{font-size:12px;color:var(--mu);margin-top:4px}
.res-xp-lvl{font-size:13px;font-weight:700;color:var(--dk);margin-top:12px}
.res-xp-avatar-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:14px}
.res-xp-avatar-ring{width:76px;height:76px;border-radius:50%;background:rgba(var(--or-rgb),.1);border:2px solid rgba(var(--or-rgb),.3);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(var(--or-rgb),.12),0 6px 22px rgba(var(--or-rgb),.3);animation:evoGlow 3s ease-in-out infinite;overflow:hidden}
.res-xp-avatar-lbl{font-size:11px;color:var(--mu);margin-top:7px;font-weight:600;letter-spacing:.2px}
.res-xp-journey-mini{display:flex;align-items:center;margin-top:10px;margin-bottom:2px}
.res-xp-jdot{display:flex;justify-content:center;align-items:center;flex:0 0 auto}
.res-xp-jline{flex:1;height:2px;background:rgba(var(--or-rgb),.18);margin:0 2px}
.res-xp-jline.done{background:linear-gradient(90deg,var(--or),#f59e0b)}
.levelup-banner{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:16px;padding:14px 20px;text-align:center;margin-top:12px;font-weight:800;font-size:16px;animation:comboIn .4s cubic-bezier(.34,1.2,.64,1)}
.daily-wrap{margin-bottom:16px}
.daily-chip{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:20px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;width:100%;justify-content:center;border:none;font-family:var(--font);box-shadow:0 4px 18px rgba(239,68,68,.3);transition:transform .2s,box-shadow .2s}
.daily-chip:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(239,68,68,.4)}
.daily-done{display:inline-flex;align-items:center;gap:8px;background:var(--s);color:var(--mu);border-radius:20px;padding:10px 20px;font-size:13px;font-weight:600;width:100%;justify-content:center;border:1px solid var(--bo)}
/* Daily challenge card (upgrade van button) */
.daily-card{background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(239,68,68,.08));border:1px solid rgba(245,158,11,.3);border-radius:18px;padding:16px 18px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.daily-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(245,158,11,.06),transparent);pointer-events:none}
.daily-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(245,158,11,.2);border-color:rgba(245,158,11,.5)}
.daily-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.daily-card-badge{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:20px;padding:4px 12px;font-size:11px;font-weight:800;letter-spacing:.4px;display:flex;align-items:center;gap:5px}
.daily-card-timer{font-size:11px;color:rgba(255,255,255,.45);font-weight:600}
.daily-card-body{margin-bottom:14px}
.daily-card-title{font-family:var(--font-head);font-size:18px;font-weight:800;color:#fff;margin-bottom:4px}
.daily-card-sub{font-size:13px;color:rgba(255,255,255,.55);line-height:1.4}
.daily-card-foot{display:flex;align-items:center;justify-content:space-between}
.daily-card-cta{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:12px;padding:10px 20px;font-size:14px;font-weight:800;font-family:var(--font);border:none;cursor:pointer;box-shadow:0 3px 14px rgba(239,68,68,.35);transition:all .2s}
.daily-card-cta:hover{box-shadow:0 6px 20px rgba(239,68,68,.5)}
.daily-card-xp{font-size:13px;color:#f59e0b;font-weight:700}
.daily-card-done{background:rgba(74,222,128,.07);border:1px solid rgba(74,222,128,.2);border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:12px}
.daily-card-done-icon{font-size:26px}
.daily-card-done-info{flex:1}
.daily-card-done-title{font-size:14px;font-weight:700;color:#4ADE80;margin-bottom:2px}
.daily-card-done-sub{font-size:12px;color:rgba(255,255,255,.45)}
/* ── ENGAGEMENT HOOKS ────────────────────────── */
/* Floating +XP pop */
.xp-float{font-size:22px;font-weight:800;color:#f59e0b;text-shadow:0 2px 10px rgba(0,0,0,.25);pointer-events:none;user-select:none;font-family:var(--font-head);position:fixed;z-index:9999;white-space:nowrap}
/* Near-miss retry nudge */
.nearmiss-nudge{background:rgba(249,115,22,.1);border:1.5px solid rgba(249,115,22,.3);border-radius:12px;padding:12px 16px;margin:12px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nearmiss-nudge span{font-size:14px;font-weight:600;color:#f97316}
.nearmiss-nudge button{background:#f97316;color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:background .15s}
.nearmiss-nudge button:hover{background:#ea6800}
/* Streak-at-risk pill */
.hsd-at-risk{border-color:#f97316!important;animation:atRiskPulse 2s ease-in-out infinite}
@keyframes atRiskPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 5px rgba(249,115,22,.18)}}
.hsd-at-risk .hsd-val{color:#f97316!important}
.hsd-at-risk .hsd-icon-wrap{animation:flameBounce .8s ease-in-out infinite alternate}
@keyframes flameBounce{0%{transform:scale(1)}100%{transform:scale(1.25)}}
/* Daily challenge pulse */
@keyframes pulseChip{0%,100%{box-shadow:0 0 0 0 rgba(232,92,13,.45)}60%{box-shadow:0 0 0 9px rgba(232,92,13,0)}}
.daily-chip.pulse-chip{animation:pulseChip 2s ease-in-out infinite}
/* Hero greeting */
.hm-greeting{font-size:14px;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:10px;min-height:18px;letter-spacing:.1px}
.hm-greeting.hm-greeting-warn{color:#fbbf24}

/* ── HOME STATS DASHBOARD ─────────────────────── */
.home-stats-dash{display:flex;gap:10px;padding:16px 16px 8px;max-width:680px;margin:0 auto;flex-wrap:wrap}
.hsd-pill{flex:1;display:flex;align-items:center;gap:11px;background:var(--s);border:1.5px solid var(--bo);border-radius:16px;padding:13px 14px;cursor:pointer;transition:transform .15s,box-shadow .15s;min-width:0;text-decoration:none}
html.dark .hsd-pill{background:var(--bg2);border-color:var(--bo2)}
.hsd-pill:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.hsd-icon{font-size:24px;flex-shrink:0;line-height:1}
.hsd-body{min-width:0}
.hsd-val{font-size:18px;font-weight:800;color:var(--dk);line-height:1.15;white-space:nowrap;font-family:var(--font-head)}
.hsd-lbl{font-size:11px;color:var(--mu);margin-top:2px;letter-spacing:.3px;text-transform:uppercase;font-weight:500}
.hsd-streak .hsd-val{color:#f97316}
.hsd-xp .hsd-val{color:#eab308}
.hsd-avg .hsd-val{color:#22c55e}
.hsd-avg-warn .hsd-val{color:#ef4444}
.hsd-badges .hsd-val{color:#a78bfa}
@media(max-width:520px){.hsd-pill{flex:1 1 calc(50% - 5px);min-width:calc(50% - 5px)}}
@media(max-width:400px){.hsd-pill{padding:10px 9px;gap:7px}.hsd-val{font-size:14px}.hsd-icon{font-size:18px}}
.hsd-empty{display:flex;align-items:center;gap:14px;background:var(--s);border:1.5px dashed var(--bo);border-radius:16px;padding:16px 18px;margin:0 16px 8px;cursor:pointer;transition:border-color .2s}
.hsd-empty:hover{border-color:var(--or)}
.hsd-empty-icon{font-size:28px;flex-shrink:0}
.hsd-empty-text{font-size:13px;color:var(--mu);flex:1;line-height:1.4}
.hsd-empty-cta{font-size:12px;font-weight:700;color:var(--or);white-space:nowrap;flex-shrink:0}
.xp-home-bar{position:relative;background:var(--s);border:1.5px solid transparent;border-radius:22px;padding:20px 20px 16px;margin-bottom:16px;overflow:hidden;background-clip:padding-box}
.xp-home-bar::before{content:'';position:absolute;inset:0;border-radius:22px;padding:1.5px;background:linear-gradient(135deg,var(--or),#f59e0b,rgba(var(--or-rgb),.15));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.xp-home-bar::after{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(var(--or-rgb),.1) 0%,transparent 65%);pointer-events:none}
/* top row */
.xp-hb-inner{display:flex;align-items:flex-start;gap:16px;position:relative;z-index:1}
.xp-home-lvl{width:58px;height:58px;border-radius:50%;background:rgba(var(--or-rgb),.08);border:2px solid rgba(var(--or-rgb),.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:30px;box-shadow:0 0 0 3px rgba(var(--or-rgb),.15),0 6px 20px rgba(var(--or-rgb),.35);animation:evoGlow 3s ease-in-out infinite}
@keyframes evoGlow{0%,100%{box-shadow:0 0 0 3px rgba(var(--or-rgb),.2),0 6px 20px rgba(var(--or-rgb),.35)}50%{box-shadow:0 0 0 6px rgba(var(--or-rgb),.12),0 6px 28px rgba(var(--or-rgb),.5)}}
.xp-home-info{flex:1;min-width:0}
.xp-home-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.xp-home-title{font-weight:800;font-size:16px;color:var(--dk);font-family:var(--font-head);letter-spacing:-.3px;display:flex;align-items:center;gap:7px}
.xp-evo-chip{font-size:11px;font-weight:700;color:var(--or);background:rgba(var(--or-rgb),.12);border:1px solid rgba(var(--or-rgb),.25);border-radius:20px;padding:2px 9px;letter-spacing:.2px;text-transform:uppercase}
.xp-home-pct{font-size:14px;font-weight:800;color:var(--or);font-family:var(--font-head);flex-shrink:0}
.xp-home-sub{font-size:12px;color:var(--mu);margin-top:2px}
/* stage journey row */
.xp-evo-journey{display:flex;align-items:center;gap:0;position:relative;z-index:1;margin-bottom:10px}
.xp-evo-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.xp-evo-step-emoji{font-size:20px;line-height:1;filter:grayscale(1) opacity(.35);transition:filter .3s}
.xp-evo-step.done .xp-evo-step-emoji{filter:none}
.xp-evo-step.current .xp-evo-step-emoji{filter:none;font-size:26px;filter:drop-shadow(0 0 8px rgba(var(--or-rgb),.7))}
.xp-evo-step-name{font-size:9px;color:var(--mu);margin-top:3px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.xp-evo-step.done .xp-evo-step-name,.xp-evo-step.current .xp-evo-step-name{color:var(--or)}
.xp-evo-connector{flex:1;height:2px;background:var(--bo2);border-radius:2px;position:relative;overflow:hidden;margin:0 2px;margin-bottom:14px}
.xp-evo-connector.done{background:linear-gradient(90deg,var(--or),#f59e0b)}
/* bar */
.xp-bar-wrap{background:var(--bo2);border-radius:10px;height:10px;overflow:hidden;margin:0;position:relative}
.xp-bar{height:100%;background:linear-gradient(90deg,var(--or),#f59e0b,#fcd34d);border-radius:10px;transition:width .9s cubic-bezier(.34,1.1,.64,1);position:relative;overflow:hidden}
.xp-bar::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:xpShimmer 2.2s ease-in-out infinite 1s}
.xp-evo-foot{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.xp-evo-foot-from{font-size:11px;color:var(--mu)}
.xp-evo-foot-to{font-size:11px;font-weight:700;color:var(--or)}
.how-it-works{max-width:820px;margin:0 auto 40px;padding:0 24px}
.hiw-title{text-align:center;font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--or);margin-bottom:24px}
.hiw-steps{display:flex;align-items:flex-start;gap:8px;justify-content:center;flex-wrap:wrap}
.hiw-step{flex:1;min-width:150px;max-width:200px;text-align:center;padding:20px 16px;background:var(--s);border:1px solid var(--bo);border-radius:16px}
.hiw-icon{font-size:28px;margin-bottom:8px}
.hiw-step-num{display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:var(--or);color:#fff;font-size:11px;font-weight:700;margin-bottom:8px}
.hiw-step-title{font-weight:700;font-size:14px;margin-bottom:6px;color:var(--dk)}
.hiw-step-desc{font-size:12px;color:var(--mu);line-height:1.5}
.hiw-arrow{font-size:20px;color:var(--or);margin-top:40px;flex-shrink:0}
@media(max-width:600px){.hiw-arrow{display:none}.hiw-step{min-width:130px}}
.intro-wrap{max-width:600px;margin:0 auto;padding:32px 24px 80px;text-align:center}
.intro-badge{display:inline-block;padding:4px 14px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.5px;background:var(--orl);color:var(--or);border:1px solid rgba(var(--or-rgb),.25);margin-bottom:20px;text-transform:uppercase}
.intro-title{font-size:clamp(24px,5vw,36px);font-weight:800;margin-bottom:12px}
.intro-sub{font-size:15px;color:var(--mu);line-height:1.6;margin-bottom:32px}
.intro-cards{display:flex;flex-direction:column;gap:12px;text-align:left;margin-bottom:32px}
.intro-card{display:flex;align-items:flex-start;gap:16px;background:var(--s);border:1px solid var(--bo);border-radius:14px;padding:16px 18px}
.intro-card-icon{font-size:24px;flex-shrink:0;margin-top:2px}
.intro-card-title{font-weight:700;font-size:14px;margin-bottom:4px}
.intro-card-desc{font-size:13px;color:var(--mu);line-height:1.5}
.intro-btn{width:100%;padding:16px;border-radius:14px;background:var(--or);color:#fff;font-size:16px;font-weight:700;border:none;cursor:pointer;margin-bottom:16px;font-family:var(--font);transition:opacity .2s}
.intro-btn:hover{opacity:.9}
.intro-tip{font-size:12px;color:var(--mu)}
/* ── INTRO MODAL (overlay) ──────────────────────── */
#sc-intro{position:fixed;inset:0;z-index:9400;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:16px}
.intro-mc{background:var(--s);border:1px solid var(--bo);border-radius:24px;padding:32px 28px 24px;max-width:440px;width:100%;box-shadow:0 24px 80px rgba(0,0,0,.6);animation:tutoIn .35s cubic-bezier(.34,1.56,.64,1);max-height:90vh;overflow-y:auto}
.intro-step{display:none;text-align:center}
.intro-step.on{display:block}
.intro-step-ico{font-size:52px;margin-bottom:14px;display:block}
.intro-step-title{font-size:22px;font-weight:800;margin-bottom:10px;color:var(--tx);font-family:var(--font-head)}
.intro-step-sub{font-size:14px;color:var(--mu);line-height:1.65;margin-bottom:20px}
.intro-feats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:4px}
.intro-feat{display:flex;align-items:center;gap:6px;background:var(--orl);border:1px solid rgba(var(--or-rgb),.2);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--or)}
.intro-tips-list{display:flex;flex-direction:column;gap:10px;text-align:left;margin-bottom:4px}
.intro-tip-row{display:flex;align-items:flex-start;gap:12px;background:var(--bg);border:1px solid var(--bo);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--mu);line-height:1.5}
.intro-tip-ico{font-size:20px;flex-shrink:0}
.intro-animal-hint{font-size:12px;color:var(--mu);margin-top:8px;min-height:18px;transition:color .2s}
.intro-mdots{display:flex;justify-content:center;gap:7px;margin:20px 0 20px}
.intro-mdot{width:8px;height:8px;border-radius:50%;background:var(--bo2);cursor:pointer;transition:all .2s}
.intro-mdot.on{background:var(--or);width:24px;border-radius:4px}
.intro-mbtns{display:flex;gap:10px}
.intro-mbtn-skip{flex:1;padding:13px;background:none;border:1px solid var(--bo);color:var(--mu);border-radius:12px;font-size:14px;cursor:pointer;font-family:var(--font);transition:all .2s}
.intro-mbtn-next{flex:2;padding:13px 20px;background:var(--or);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);box-shadow:0 4px 16px rgba(var(--or-rgb),.35);transition:all .2s}
.intro-mbtn-next:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* ===== ONBOARDING v3 ===== */
#ob-overlay{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:16px}
.ob-box{background:linear-gradient(160deg,#0d1622 0%,#111827 100%);border:1px solid rgba(99,102,241,.3);border-radius:24px;padding:32px 28px 28px;max-width:440px;width:100%;box-shadow:0 24px 80px rgba(0,0,0,.7);animation:tutoIn .4s cubic-bezier(.34,1.56,.64,1);max-height:92vh;overflow-y:auto}
.ob-progress{display:flex;gap:6px;margin-bottom:28px}
.ob-prog-bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .35s,box-shadow .35s}
.ob-prog-bar.done{background:#6366f1}
.ob-prog-bar.active{background:linear-gradient(90deg,#6366f1,#818cf8);box-shadow:0 0 8px rgba(99,102,241,.5)}
.ob-step{display:none;text-align:center}.ob-step.on{display:block}
.ob-head-icon{font-size:48px;margin-bottom:12px;display:block}
.ob-title{font-size:22px;font-weight:800;margin-bottom:8px;color:#f1f5f9;font-family:var(--font-head)}
.ob-sub{font-size:14px;color:rgba(255,255,255,.55);margin-bottom:20px;line-height:1.5}
.ob-features{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;text-align:left}
.ob-feat{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px;cursor:pointer;transition:all .25s;user-select:none;-webkit-user-select:none}
.ob-feat:hover{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.3)}
.ob-feat.tapped{background:rgba(99,102,241,.18);border-color:#6366f1;box-shadow:0 0 12px rgba(99,102,241,.25)}
.ob-feat-ico{font-size:26px;flex-shrink:0;width:36px;text-align:center}
.ob-feat-body{flex:1}
.ob-feat-title{font-size:14px;font-weight:700;color:#f1f5f9;margin-bottom:2px}
.ob-feat-desc{font-size:12px;color:rgba(255,255,255,.45)}
.ob-feat-desc-extra{font-size:12px;color:rgba(255,255,255,.6);margin-top:6px;display:none;line-height:1.5}
.ob-feat.tapped .ob-feat-desc-extra{display:block}
.ob-feat-check{font-size:15px;color:#818cf8;opacity:0;transition:opacity .2s;flex-shrink:0}
.ob-feat.tapped .ob-feat-check{opacity:1}
.ob-animal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;max-height:220px;overflow-y:auto}
.ob-animal-btn{background:rgba(255,255,255,.05);border:2px solid transparent;border-radius:12px;padding:10px 4px;cursor:pointer;text-align:center;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px}
.ob-animal-btn:hover{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.3)}
.ob-animal-btn.selected{background:rgba(99,102,241,.22);border-color:#6366f1;box-shadow:0 0 10px rgba(99,102,241,.3)}
.ob-animal-emoji{font-size:26px;line-height:1}
.ob-animal-name{font-size:10px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ob-animal-hint{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:14px;min-height:18px;transition:color .2s}
.ob-form{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;text-align:left}
.ob-input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:11px 14px;color:#f1f5f9;font-size:14px;outline:none;transition:border-color .2s;box-sizing:border-box;font-family:var(--font)}
.ob-input:focus{border-color:#6366f1}
.ob-input::placeholder{color:rgba(255,255,255,.3)}
.ob-err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fca5a5;border-radius:8px;padding:8px 12px;font-size:13px}
.ob-btn{width:100%;padding:13px;border-radius:12px;border:none;background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:4px;font-family:var(--font)}
.ob-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,.4)}
.ob-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ob-skip-btn{width:100%;padding:9px;border-radius:10px;border:none;background:transparent;color:rgba(255,255,255,.38);font-size:13px;cursor:pointer;margin-top:2px;transition:color .2s;font-family:var(--font)}
.ob-skip-btn:hover{color:rgba(255,255,255,.65)}
.home-section-header{padding:24px 0 8px;display:flex;flex-direction:column;gap:2px}
.hsh-title{font-weight:700;font-size:15px;color:var(--dk)}
.hsh-sub{font-size:12px;color:var(--mu)}
.qmode-desc{font-size:12px;color:var(--mu);margin-top:4px;font-weight:400}
.detail-tip{display:flex;align-items:flex-start;gap:10px;background:var(--orl);border:1px solid rgba(var(--or-rgb),.2);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:var(--mu)}
.dt-icon{flex-shrink:0;font-size:16px}
.lb-scoring-info{background:var(--s);border:1px solid var(--bo);border-radius:12px;overflow:hidden;margin-bottom:16px}
.lb-scoring-header{padding:12px 16px;cursor:pointer;font-size:13px;font-weight:600;color:var(--dk);display:flex;justify-content:space-between}
.lb-scoring-body{display:none;padding:0 16px 14px;font-size:13px;color:var(--mu);line-height:1.6}
.lb-scoring-info.open .lb-scoring-body{display:block}
.lb-scoring-info.open .lb-scoring-toggle{transform:rotate(180deg);display:inline-block}
.lb-tiers-explain{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:8px;font-size:12px}
.auth-value-prop{text-align:center;font-size:13px;color:var(--mu);margin:-8px 0 4px;line-height:1.5}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.flicker-canvas{display:none}.sb-gl,.wlc-orb,.lp-orb,.qm-orb{animation:none!important;opacity:.15}}
/* ── iOS / mobiel fixes ───────────────────────
   1. font-size ≥ 16px op inputs: voorkomt iOS auto-zoom bij focus
      (iOS zoomt in als font-size < 16px → layout breekt in standalone)
   2. backdrop-filter uitschakelen op mobiel: zwaarste GPU-operatie,
      blokkeert soms touch-events op iOS en slopt performance
   3. Zware infinite-animaties uitzetten op mobiel
   ──────────────────────────────────────────── */
@media screen and (max-width:768px){
  input,textarea,select{
    font-size:16px!important;
    touch-action:manipulation!important;
    -webkit-user-select:text!important;
    user-select:text!important}
}
/* ── SKELETON LOADER ─────────────────────────── */
.skel{background:linear-gradient(90deg,var(--bo) 25%,var(--bg2) 50%,var(--bo) 75%);background-size:200% 100%;animation:skelShimmer 1.2s ease-in-out infinite;border-radius:8px}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.quiz-skeleton{padding:24px;display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}
.quiz-skeleton .sk-badge{height:18px;width:180px;border-radius:20px}
.quiz-skeleton .sk-q{height:28px;width:90%}
.quiz-skeleton .sk-q2{height:28px;width:65%}
.quiz-skeleton .sk-opt{height:56px;width:100%;border-radius:14px}
/* ── CONFIRM DIALOG ──────────────────────────── */
.confirm-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.confirm-overlay.show{opacity:1;pointer-events:all}
.confirm-card{background:var(--s);border:1px solid var(--bo);border-radius:20px;padding:28px 24px 22px;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4);transform:scale(.94) translateY(8px);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.confirm-overlay.show .confirm-card{transform:scale(1) translateY(0)}
/* ── DAILY CHALLENGE POPUP ───────────────────── */
#dc-popup{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:0 0 24px;opacity:0;pointer-events:none;transition:opacity .25s}
@media(min-height:580px){#dc-popup{align-items:center;padding:20px}}
#dc-popup.show{opacity:1;pointer-events:all}
.dc-popup-card{background:var(--s);border:1px solid var(--bo);border-radius:24px;padding:24px 22px 20px;max-width:400px;width:calc(100% - 32px);box-shadow:0 24px 64px rgba(0,0,0,.4);transform:translateY(40px);transition:transform .28s cubic-bezier(.34,1.4,.64,1);position:relative}
#dc-popup.show .dc-popup-card{transform:translateY(0)}
.dc-popup-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(var(--or-rgb),.18),rgba(var(--or-rgb),.06));border:1px solid rgba(var(--or-rgb),.3);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700;color:var(--or);letter-spacing:.3px;margin-bottom:12px;text-transform:uppercase}
.dc-popup-title{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--dk);line-height:1.2;margin-bottom:4px}
.dc-popup-sub{font-size:13px;color:var(--mu);margin-bottom:16px;line-height:1.5}
.dc-popup-xp{display:flex;align-items:center;gap:8px;background:rgba(var(--or-rgb),.07);border:1px solid rgba(var(--or-rgb),.18);border-radius:12px;padding:10px 14px;margin-bottom:20px;font-size:13px;font-weight:600;color:var(--dk)}
.dc-popup-btns{display:flex;gap:10px}
.dc-popup-start{flex:1;padding:13px;border-radius:14px;border:none;background:linear-gradient(135deg,#f97316,#f59e0b);color:#fff;font-family:var(--font-head);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.34,1.2,.64,1);box-shadow:0 4px 14px rgba(var(--or-rgb),.3)}
.dc-popup-start:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(var(--or-rgb),.42)}
.dc-popup-start:active{transform:scale(.97)}
.dc-popup-skip{padding:13px 18px;border-radius:14px;border:1.5px solid var(--bo);background:transparent;color:var(--mu);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.dc-popup-skip:hover{border-color:var(--or);color:var(--or)}
.confirm-icon{font-size:36px;margin-bottom:12px;display:block;text-align:center}
.confirm-title{font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--dk);text-align:center;margin-bottom:8px}
.confirm-msg{font-size:14px;color:var(--mu);text-align:center;line-height:1.65;margin-bottom:22px}
.confirm-btns{display:flex;gap:10px}
.confirm-cancel{flex:1;padding:11px;border-radius:11px;border:1px solid var(--bo);background:var(--s);color:var(--dk);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
.confirm-cancel:hover{background:var(--bg2)}
.confirm-ok{flex:1;padding:11px;border-radius:11px;border:none;background:#ef4444;color:#fff;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s}
.confirm-ok:hover{opacity:.85}
/* ── FEATURE 1: STREAK MILESTONE BANNER ─────────────────── */
.streak-milestone-banner{background:linear-gradient(135deg,rgba(var(--or-rgb),.12),rgba(var(--or-rgb),.06));border:1.5px solid rgba(var(--or-rgb),.35);border-radius:16px;padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px;animation:bannerPulse 2.5s ease-in-out infinite}
@keyframes bannerPulse{0%,100%{border-color:rgba(var(--or-rgb),.35)}50%{border-color:rgba(var(--or-rgb),.7)}}
.smb-row{display:flex;align-items:center;gap:10px}
.smb-icon{font-size:24px;line-height:1;flex-shrink:0}
.smb-text{flex:1;font-size:13px;color:var(--dk);line-height:1.5;font-weight:500}
.smb-text strong{color:var(--or)}
.smb-bar-wrap{height:6px;background:var(--bo);border-radius:3px;overflow:hidden}
.smb-bar-fill{height:100%;background:var(--or);border-radius:3px;transition:width .5s}
.smb-bar-lbl{font-size:10px;color:var(--mu);text-align:right;margin-top:3px;font-weight:600}
/* ── FEATURE 2: PERSONAL BEST BANNER ────────────────────── */
.pb-banner{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-radius:12px;padding:10px 16px;text-align:center;font-family:var(--font-head);font-size:15px;font-weight:800;margin-bottom:14px;animation:pbPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pbPop{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.pb-prev{font-size:11px;opacity:.85;margin-top:2px;font-weight:500}
.pb-chip{font-size:10px;font-weight:700;color:#d97706;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);border-radius:6px;padding:1px 6px;margin-left:4px;white-space:nowrap}
/* ── FEATURE 3: SMART NEXT ACTION ───────────────────────── */
.next-action-card{background:var(--s);border:1.5px solid rgba(var(--or-rgb),.25);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;margin-top:12px}
.na-icon{font-size:24px;flex-shrink:0;line-height:1}
.na-info{flex:1;min-width:0}
.na-label{font-size:13px;font-weight:800;color:var(--dk);font-family:var(--font-head)}
.na-sub{font-size:11px;color:var(--mu);margin-top:2px}
.na-btn{padding:8px 14px;background:var(--or);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:opacity .15s}
.na-btn:hover{opacity:.85}
/* ── QUICK CHIP BAR (home) ─────────── */
.hm-quick-scroll{display:flex;gap:8px;overflow-x:auto;padding:10px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-quick-scroll::-webkit-scrollbar{display:none}
.hm-qchip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:24px;font-size:13px;font-weight:700;cursor:pointer;border:1.5px solid var(--bo);background:var(--s);color:var(--dk);font-family:var(--font);transition:all .18s;white-space:nowrap}
.hm-qchip:hover{border-color:var(--or);color:var(--or);background:rgba(var(--or-rgb),.06);transform:translateY(-1px)}
.hm-qchip:active{transform:scale(.97)}
/* ── STATS STRIP (home, boven vakken) ─ */
.hm-stats-strip{display:flex;gap:8px;overflow-x:auto;padding:0 0 4px;margin-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-stats-strip::-webkit-scrollbar{display:none}
.hm-stat-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:20px;background:var(--s);border:1px solid var(--bo);font-size:12px;font-weight:700;color:var(--mu);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.hm-stat-pill:hover{border-color:var(--or);color:var(--or)}
/* ── BREADCRUMB (sc-detail) ────────── */
.det-breadcrumb{font-size:11px;color:var(--mu);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:5px}
.det-bc-home{cursor:pointer;opacity:.7}.det-bc-home:hover{color:var(--or);opacity:1}
.det-bc-sep{opacity:.35}.det-bc-cur{color:var(--dk);opacity:.9}
/* ── NEXT DOMAIN BTN (results) ──────── */
.res-next-dom{display:none;width:100%;padding:13px;border-radius:14px;background:linear-gradient(135deg,var(--or),#f59e0b);color:#fff;border:none;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);margin-bottom:8px;transition:opacity .15s;letter-spacing:.1px}
.res-next-dom:hover{opacity:.88}
/* ── FEATURE 4: COMEBACK CARD ───────────────────────────── */
.comeback-card{background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.22);border-radius:14px;padding:10px 14px 10px 12px;margin-bottom:10px;position:relative;display:flex;align-items:center;gap:10px}
.comeback-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--mu);font-size:14px;cursor:pointer;padding:2px 5px;border-radius:6px;line-height:1}
.comeback-close:hover{background:var(--bg2)}
.comeback-icon{font-size:22px;line-height:1;flex-shrink:0}
.comeback-title{font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--dk);margin-bottom:1px}
.comeback-sub{font-size:11.5px;color:var(--mu);line-height:1.45;max-width:320px;margin:0}
.comeback-xp{display:none}
.comeback-action{display:none}
.qtb-flag{background:none;border:none;cursor:pointer;font-size:17px;opacity:.45;transition:opacity .15s,transform .15s;padding:2px 4px;border-radius:6px;line-height:1}
.qtb-flag:hover{opacity:.8}
.qtb-flag.flagged{opacity:1;transform:scale(1.2)}
.rc-flag{display:inline-block;font-size:11px;background:rgba(239,68,68,.12);color:#f87171;border-radius:6px;padding:2px 7px;margin-left:6px;font-weight:700;vertical-align:middle}
.feat-disc-card{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(99,102,241,.04));border:1.5px solid rgba(99,102,241,.3);border-radius:16px;padding:14px 16px;margin:0 16px 14px;position:relative;display:flex;align-items:center;gap:12px}
.feat-disc-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--mu);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1}
.feat-disc-icon{font-size:28px;flex-shrink:0;line-height:1}
.feat-disc-body{flex:1;min-width:0}
.feat-disc-title{font-size:13px;font-weight:800;color:var(--dk);margin-bottom:2px}
.feat-disc-sub{font-size:12px;color:var(--mu);line-height:1.5}
.feat-disc-btn{flex-shrink:0;padding:7px 12px;background:var(--or);color:#fff;border:none;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap}
/* ── MULTIPLAYER QUIZ ─────────────────────────────────────────── */
.qmcd.qm-multi{background:linear-gradient(135deg,#1a1040,#0e1428);border:1.5px solid rgba(139,92,246,.45);position:relative;overflow:hidden}
.qmcd.qm-multi::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(139,92,246,.18),transparent 70%);pointer-events:none}
.qmcd.qm-multi h3{color:#c4b5fd}
.qmcd.qm-multi p{color:rgba(196,181,253,.65)}
.qmcd.qm-multi .qm-arrow svg{stroke:#a78bfa}
.qmcd.qm-multi:hover{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(139,92,246,.2),0 8px 32px rgba(139,92,246,.18)}

/* overlay & shared */
.mq-overlay{position:fixed;inset:0;z-index:9000;background:linear-gradient(145deg,#07060f 0%,#0c0a1e 50%,#060b14 100%);flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.mq-overlay::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(139,92,246,.12),transparent),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(99,102,241,.1),transparent);pointer-events:none}
.mq-phase{display:none;width:100%;max-width:560px;position:relative;z-index:1}
.mq-phase.on{display:flex;flex-direction:column;align-items:center;animation:mqFadeUp .3s ease}
@keyframes mqFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.mq-close{position:fixed;top:14px;right:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);font-size:13px;font-weight:600;cursor:pointer;padding:7px 13px;border-radius:10px;font-family:var(--font);z-index:10;transition:all .15s;letter-spacing:.2px}
.mq-close:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.22)}

/* card base */
.mq-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:32px 28px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)}

/* entry screen */
.mq-entry-icon{font-size:44px;margin-bottom:12px;display:block;line-height:1;filter:drop-shadow(0 0 20px rgba(139,92,246,.5))}
.mq-entry-title{font-family:var(--font-head);font-size:26px;font-weight:900;color:#fff;margin-bottom:6px;letter-spacing:-.5px}
.mq-entry-sub{font-size:14px;color:rgba(255,255,255,.45);margin-bottom:18px;line-height:1.6}
.mq-entry-vak{display:inline-block;font-size:12px;color:#a78bfa;font-weight:700;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);padding:5px 16px;border-radius:20px;margin-bottom:24px;letter-spacing:.2px}
.mq-btn{display:block;width:100%;padding:15px 20px;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:var(--font);transition:all .18s;margin-bottom:10px;color:#fff;letter-spacing:.1px;position:relative;overflow:hidden}
.mq-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent);pointer-events:none}
.mq-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.mq-btn:active{transform:translateY(0)}
.mq-btn-host{background:linear-gradient(135deg,#7c3aed,#4f1fc7)}
.mq-btn-join{background:linear-gradient(135deg,#1368ce,#0a47a0);flex-shrink:0;width:auto;padding:13px 22px;margin-bottom:0;font-size:14px}
.mq-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:rgba(255,255,255,.2);font-size:12px}
.mq-divider::before,.mq-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.mq-join-row{display:flex;gap:8px;width:100%}
.mq-code-input{flex:1;padding:14px 16px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);border-radius:12px;color:#fff;font-size:22px;font-weight:900;font-family:var(--font);letter-spacing:6px;text-transform:uppercase;text-align:center;outline:none;transition:all .18s}
.mq-code-input:focus{border-color:#a78bfa;background:rgba(139,92,246,.08);box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.mq-code-input::placeholder{color:rgba(255,255,255,.18);letter-spacing:2px;font-size:13px;font-weight:400}

/* lobby */
.mq-lobby-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.35);margin-bottom:10px}
.mq-lobby-code{font-family:var(--font-head);font-size:58px;font-weight:900;letter-spacing:12px;line-height:1;margin-bottom:8px;background:linear-gradient(135deg,#e2d9ff,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 30px rgba(139,92,246,.4))}
.mq-lobby-vak{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:6px}
.mq-lobby-count{font-size:13px;font-weight:700;color:#a78bfa;margin-bottom:16px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);padding:4px 14px;border-radius:20px;display:inline-block}
.mq-players-wrap{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:44px;margin-bottom:20px;width:100%}
.mq-player-chip{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:6px 14px;animation:mqPop .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px rgba(0,0,0,.2)}
@keyframes mqPop{from{opacity:0;transform:scale(.3) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mq-player-av{font-size:18px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}
.mq-player-nm{font-size:13px;font-weight:700;color:#e2e8f0}
.mq-btn-start{background:linear-gradient(135deg,#16a34a,#0f7a35);box-shadow:0 4px 20px rgba(22,163,74,.3)}
.mq-btn-start:hover{box-shadow:0 8px 28px rgba(22,163,74,.45)}
.mq-lobby-hint{font-size:12px;color:rgba(255,255,255,.25);margin-top:8px;letter-spacing:.2px}

/* game screen */
.mq-phase-game.on{flex-direction:column;min-height:calc(100dvh - 40px);width:100%;max-width:680px;justify-content:space-between;padding:0;gap:12px}
.mq-q-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 2px}
.mq-q-meta{display:flex;flex-direction:column;gap:2px}
.mq-q-num{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.35)}
.mq-q-players{font-size:11px;color:rgba(255,255,255,.25)}
.mq-timer-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mq-timer{font-family:var(--font-head);font-size:38px;font-weight:900;color:#fff;line-height:1;min-width:40px;text-align:right;transition:color .3s}
.mq-timer.urgent{color:#ef4444;animation:mqPulse .6s ease-in-out infinite}
@keyframes mqPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.mq-tbar-bg{width:120px;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.mq-tbar{height:100%;background:linear-gradient(90deg,#6d28d9,#a78bfa,#c4b5fd);border-radius:3px;width:100%;transform-origin:left}
.mq-q-text{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:24px 22px;font-size:clamp(16px,2.8vw,22px);font-weight:700;color:#fff;text-align:center;line-height:1.5;width:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.mq-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.mq-opt{padding:20px 16px;border:none;border-radius:18px;color:#fff;font-size:clamp(13px,2vw,15px);font-weight:700;cursor:pointer;font-family:var(--font);text-align:left;line-height:1.4;transition:all .18s;position:relative;overflow:hidden}
.mq-opt::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 60%);pointer-events:none}
.mq-opt:hover:not(:disabled){transform:scale(1.03) translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.mq-opt:active:not(:disabled){transform:scale(.97)}
.mq-opt:disabled{cursor:default}
.mq-opt.correct{outline:3px solid rgba(255,255,255,.9);box-shadow:0 0 0 6px rgba(255,255,255,.15),0 8px 32px rgba(0,0,0,.3);transform:scale(1.03)}
.mq-opt.wrong{opacity:.22;filter:grayscale(.6) brightness(.7)}
.mq-opt.chosen{outline:3px solid rgba(255,255,255,.6);box-shadow:0 0 0 5px rgba(255,255,255,.1)}
.mq-opt.dimmed{opacity:.22;filter:brightness(.7)}
.mq-answered-banner{text-align:center;font-size:13px;font-weight:700;color:rgba(255,255,255,.4);min-height:28px;display:flex;align-items:center;justify-content:center;gap:6px}

/* reveal */
.mq-reveal-result{font-size:32px;font-weight:900;margin-bottom:10px;min-height:40px;animation:mqPop .4s cubic-bezier(.34,1.56,.64,1)}
.mq-reveal-expl{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:16px;line-height:1.6;padding:10px 14px;background:rgba(255,255,255,.04);border-radius:12px;text-align:left}
.mq-lb-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.3);margin-bottom:10px}
.mq-lb-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);margin-bottom:6px;transition:background .2s}
.mq-lb-row:first-child{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.25)}
.mq-lb-pos{font-size:13px;font-weight:800;color:rgba(255,255,255,.35);width:22px;text-align:center}
.mq-lb-av{font-size:18px;line-height:1}
.mq-lb-nm{flex:1;font-size:13px;font-weight:700;color:#e2e8f0;text-align:left}
.mq-lb-pts{font-size:13px;font-weight:800;color:#a78bfa}
.mq-lb-delta{font-size:11px;color:#4ade80;font-weight:700;margin-left:4px}
.mq-reveal-wait{font-size:12px;color:rgba(255,255,255,.25);margin-top:14px;text-align:center;letter-spacing:.3px}

/* final */
.mq-final-title{font-family:var(--font-head);font-size:28px;font-weight:900;color:#fff;margin-bottom:4px;letter-spacing:-.5px}
.mq-final-sub{font-size:13px;color:rgba(255,255,255,.35);margin-bottom:22px}
.mq-final-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);margin-bottom:8px;text-align:left;transition:all .2s}
.mq-final-top{background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(99,102,241,.1));border-color:rgba(139,92,246,.35);box-shadow:0 4px 16px rgba(139,92,246,.15)}
.mq-final-pos{font-size:24px;width:32px;text-align:center}
.mq-final-av{font-size:24px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.mq-final-nm{flex:1;font-size:14px;font-weight:700;color:#e2e8f0}
.mq-final-score{font-size:15px;font-weight:900;color:#a78bfa}

@media(max-width:480px){
  .mq-lobby-code{font-size:42px;letter-spacing:7px}
  .mq-opts{grid-template-columns:1fr}
  .mq-opt{padding:17px 16px}
  .mq-card{padding:24px 18px;border-radius:22px}
}
/* ── FEATURE 5: XP URGENT PILL ──────────────────────────── */
.hsd-pill.hsd-xp-urgent{border-color:rgba(234,179,8,.5);background:linear-gradient(135deg,rgba(234,179,8,.1),rgba(234,179,8,.04))}
.hsd-pill.hsd-xp-urgent .hsd-val{color:#ca8a04}
.hsd-pill.hsd-xp-urgent .hsd-icon{animation:xpUrge 1.5s ease-in-out infinite}
@keyframes xpUrge{0%,100%{transform:scale(1)}50%{transform:scale(1.3) rotate(-10deg)}}
/* ── FEATURE 6: BADGE PROGRESS ──────────────────────────── */
.badge-prog-wrap{width:100%;height:3px;background:var(--bo2);border-radius:2px;margin-top:4px;overflow:hidden}
.badge-prog-fill{height:100%;border-radius:2px;transition:width .5s}
.badge-prog-lbl{font-size:9px;color:var(--mu);text-align:center;margin-top:2px;font-weight:600}
/* ── LESMETHODE FILTER ──────────────────────────────────── */
.mf-card{border:1.5px solid var(--bo);border-radius:14px;background:var(--s);margin-bottom:14px;overflow:hidden}
.mf-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.mf-head-icon{font-size:16px;flex-shrink:0}
.mf-head-txt{flex:1;min-width:0}
.mf-head-title{font-size:13px;font-weight:800;color:var(--dk)}
.mf-head-sub{font-size:11px;color:var(--mu);margin-top:1px}
.mf-head-arr{font-size:11px;color:var(--mu);transition:transform .2s;flex-shrink:0}
.mf-card.open .mf-head-arr{transform:rotate(180deg)}
.mf-body{display:none;padding:0 14px 14px}
.mf-card.open .mf-body{display:block}
.mf-selects{display:flex;gap:8px;flex-wrap:wrap}
.mf-sel{flex:1;min-width:140px;padding:8px 10px;border:1.5px solid var(--bo);border-radius:9px;background:var(--bg);color:var(--dk);font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;padding-right:28px}
.mf-sel:focus{border-color:var(--or);outline:none}
.mf-sel:disabled{opacity:.45;cursor:default}
.mf-chip{display:none;align-items:center;gap:6px;background:rgba(var(--or-rgb),.1);border:1px solid rgba(var(--or-rgb),.3);border-radius:20px;padding:5px 10px;margin-top:10px;font-size:11px;color:var(--or);font-weight:700}
.mf-chip-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-chip-x{background:none;border:none;color:var(--or);cursor:pointer;font-size:14px;padding:0;line-height:1;flex-shrink:0;font-family:var(--font)}

/* ── NOTIFICATION PROMPT ─────────────────────── */
.notif-prompt{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);width:calc(100% - 32px);max-width:420px;background:var(--s);border:1px solid rgba(var(--or-rgb),.3);border-radius:18px;padding:16px 16px 14px;box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(var(--or-rgb),.08) inset;z-index:1200;display:none;animation:notifIn .38s cubic-bezier(.34,1.4,.64,1) forwards}
.notif-prompt.visible{display:block}
@keyframes notifIn{from{transform:translateX(-50%) translateY(16px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.np-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.np-ico{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--or),#f97316);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 4px 14px rgba(var(--or-rgb),.4)}
.np-title{font-size:15px;font-weight:800;color:var(--dk);font-family:var(--font-head);line-height:1.2;flex:1}
.np-title small{display:block;font-size:11px;font-weight:500;color:var(--mu);margin-top:1px}
.np-close{background:none;border:none;font-size:17px;color:var(--mu);cursor:pointer;line-height:1;padding:4px;flex-shrink:0}
.np-body{font-size:13px;color:var(--mu);line-height:1.55;margin-bottom:12px}
.np-btns{display:flex;gap:8px}
.np-allow{flex:1;background:var(--or);color:#fff;border:none;border-radius:11px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.np-allow:active{opacity:.82}
.np-later{padding:12px 14px;background:none;border:1.5px solid var(--bo);border-radius:11px;font-size:13px;color:var(--mu);cursor:pointer;font-family:var(--font);white-space:nowrap}
/* Notification status row in profiel */
.notif-status-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0 0;border-top:1px solid var(--bo);margin-top:12px}

/* ── SOCIAAL SHORTCUTS ───────────────────────────── */
.hm-sociaal-section{padding-top:0;padding-bottom:0}
@media(min-width:720px){.hm-sociaal-section{display:none}}
/* ── Sociaal hub (sc-sociaal) ── */
.soc-hub-wrap{padding:0 0 40px}
.soc-hub-header{padding:28px 0 20px;text-align:center}
.soc-hub-title{font-family:var(--font-head);font-size:26px;font-weight:900;color:var(--dk);letter-spacing:-.5px}
.soc-hub-sub{font-size:14px;color:var(--mu);margin-top:5px}
.soc-hub-cards{display:flex;flex-direction:column;gap:14px}
.soc-hub-card{background:var(--s);border:1.5px solid var(--bo);border-radius:20px;padding:22px 20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;text-align:left}
.soc-hub-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.15)}
.soc-hub-card:active{transform:scale(.98)}
.soc-hub-card-lb{border-color:rgba(251,191,36,.35)}
.soc-hub-card-lb:hover{border-color:rgba(251,191,36,.6);box-shadow:0 12px 32px rgba(251,191,36,.15)}
.soc-hub-card-lb::before{content:'';position:absolute;top:-40px;right:-40px;width:130px;height:130px;background:radial-gradient(circle,rgba(251,191,36,.18),transparent 70%);pointer-events:none}
.soc-hub-card-grp{border-color:rgba(20,184,166,.35)}
.soc-hub-card-grp:hover{border-color:rgba(20,184,166,.6);box-shadow:0 12px 32px rgba(20,184,166,.15)}
.soc-hub-card-grp::before{content:'';position:absolute;top:-40px;right:-40px;width:130px;height:130px;background:radial-gradient(circle,rgba(20,184,166,.18),transparent 70%);pointer-events:none}
.soc-hub-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.soc-hub-icon-lb{background:linear-gradient(135deg,rgba(251,191,36,.28),rgba(251,191,36,.1));box-shadow:0 4px 14px rgba(251,191,36,.2)}
.soc-hub-icon-grp{background:linear-gradient(135deg,rgba(20,184,166,.28),rgba(20,184,166,.1));box-shadow:0 4px 14px rgba(20,184,166,.2)}
.soc-hub-body{flex:1;min-width:0}
.soc-hub-card-title{font-family:var(--font-head);font-size:17px;font-weight:800;color:var(--dk);margin-bottom:4px}
.soc-hub-card-desc{font-size:13px;color:var(--mu);line-height:1.45}
.soc-hub-arrow{font-size:20px;color:var(--mu);flex-shrink:0;opacity:.5;transition:opacity .2s,transform .2s}
.soc-hub-card:hover .soc-hub-arrow{opacity:1;transform:translateX(4px)}
.soc-hub-divider{height:1px;background:var(--bo);margin:8px 0}
/* ── Studieplan homekaart ── */
.sp-home-card{background:linear-gradient(135deg,rgba(var(--or-rgb),.12) 0%,rgba(var(--or-rgb),.04) 100%);border:1px solid rgba(var(--or-rgb),.22);border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;margin-bottom:4px}
.sp-home-card::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:radial-gradient(circle,rgba(var(--or-rgb),.15),transparent 70%);pointer-events:none}
.sp-home-card:active{transform:scale(.985)}
.sp-home-card-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,rgba(var(--or-rgb),.28),rgba(var(--or-rgb),.1));display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 3px 10px rgba(var(--or-rgb),.2)}
.sp-home-card-body{flex:1;min-width:0}
.sp-home-card-title{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--dk);line-height:1.2;margin-bottom:3px}
.sp-home-card-sub{font-size:12px;color:var(--mu);line-height:1.45}
.sp-home-card-arrow{font-size:18px;color:var(--or);flex-shrink:0;opacity:.7}
.hm-sociaal-row{display:flex;gap:10px;margin:0}
.hm-soc-btn{flex:1;padding:13px 14px;border-radius:14px;border:1.5px solid var(--bo);background:var(--s);color:var(--dk);font-family:var(--font-head);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px}
.hm-soc-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.hm-soc-lb{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.07);color:var(--dk)}
.hm-soc-lb:hover{border-color:rgba(251,191,36,.6);background:rgba(251,191,36,.13)}
.hm-soc-grp{border-color:rgba(20,184,166,.35);background:rgba(20,184,166,.07);color:var(--dk)}
.hm-soc-grp:hover{border-color:rgba(20,184,166,.6);background:rgba(20,184,166,.13)}

/* ── WELKOMST SCHERM MOBIEL ──────────────────────── */
@media(max-width:640px){
  /* Hero compacter */
  .wlc-hero{padding:48px 18px 28px}
  .wlc-feats{display:none}
  .wlc-stats{display:none}
  .wlc-social-proof{margin-top:14px;font-size:12px}

  /* Level picker */
  .wlc-picker{padding:0 14px 40px}
  .wlc-pick-lbl{font-size:10px;margin-bottom:14px}

  /* Cards: verticaal gestapeld, groot en makkelijk te tikken */
  .wlc-cards{grid-template-columns:1fr;gap:10px}
  .wlc-card{padding:20px 20px 18px}
  .wlc-card-lvl{font-size:36px;letter-spacing:-1.5px}
  .wlc-card-hd{margin-bottom:10px}
  .wlc-card-list{display:none}
  .wlc-card-btn{font-size:15px;margin-top:4px}

  /* VMBO-bar compact */
  .wlc-vmbo-bar{padding:12px;font-size:11px;margin-bottom:24px;border-radius:12px}

  /* Footer compact */
  .wlc-foot{padding-top:18px}
  .wlc-foot-dates{flex-direction:column;gap:4px;align-items:center}
  .wlc-foot-dates span{font-size:11px}
}

/* ── MOBILE OVERRIDES (na desktop-regels, zodat cascade klopt) ─── */
@media(max-width:640px){
  /* Profiel scherm */
  .prof-section{padding:14px 14px!important}
  .prof-page-header{margin-bottom:16px}
  .prof-page-header h2{font-size:20px}

  /* Avatar & evolutie kaart */
  .anim-evo-card{padding:12px 10px!important;border-radius:14px}
  .anim-evo-title{font-size:13px;flex-wrap:wrap;gap:6px}
  .anim-evo-subtitle{font-size:11px;margin-bottom:10px}
  .anim-change-btn{font-size:10px;padding:3px 8px}

  /* Evolutie-stadia rij: kleinere pips, scrollbaar als noodval */
  .anim-evo-stages{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .anim-stage-pip{width:32px!important;height:32px!important;font-size:16px!important}
  .anim-stage.current .anim-stage-pip{width:38px!important;height:38px!important;font-size:19px!important}
  .anim-stage-label{font-size:7px;letter-spacing:.1px}
  .anim-stage-req{font-size:6.5px}
  .anim-stage:not(:last-child)::after{top:17px}

  /* Dierenkeuze-grid: 4 kolommen i.p.v. 5 */
  .anim-pick-grid{grid-template-columns:repeat(4,1fr)!important;gap:6px}
  .anim-pick-btn{padding:8px 2px}
  .anim-pick-emoji .anim-svg-wrap{width:30px!important;height:30px!important}
  .anim-pick-name{font-size:9px}

  /* XP-kaart na quiz */
  .res-xp{padding:14px 14px}
  .res-xp-avatar-ring{width:60px!important;height:60px!important}
  .res-xp-num{font-size:26px}
  .res-xp-lvl{font-size:12px;word-break:break-word}

  /* Quiz antwoord-opties: altijd 1 kolom op mobiel (lange tekst past niet naast elkaar) */
  .qopts{grid-template-columns:1fr!important}

  /* Resultaat-scherm: verberg minder wichtige knoppen — zitten al in navigatie */
  .rbtns>button:nth-child(6){display:none!important}  /* Andere modus */
  .rbtns>button:nth-child(8){display:none!important}  /* Home */

  /* Domein-kaart: verberg "▼ Leerstof" knop op mobiel — kaartbalk is zelf al klikbaar */
  .dbtns .exb{display:none!important}
}
/* ── RAPPORT MODAL ──────────────────────────────── */
.rapport-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9000;display:none;align-items:flex-end;justify-content:center}
.rapport-modal.open{display:flex}
.rapport-sheet{background:var(--s);border-radius:24px 24px 0 0;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;padding-bottom:40px;border-top:1px solid var(--bo)}
.rapport-handle{width:40px;height:4px;border-radius:2px;background:var(--bo);margin:12px auto 0}
.rapport-hdr{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--bo);position:sticky;top:0;background:var(--s);z-index:1}
.rapport-title{font-family:var(--font-head);font-size:17px;font-weight:800;color:var(--dk)}
.rapport-close-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--bo);background:var(--bg2);color:var(--mu);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.rapport-body{padding:18px 20px 0}
.rp-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.rp-stat{background:var(--bg2);border-radius:14px;padding:14px 10px;text-align:center}
.rp-stat-val{font-family:var(--font-head);font-size:22px;font-weight:900;color:var(--or)}
.rp-stat-lbl{font-size:11px;color:var(--mu);margin-top:2px}
.rp-section-title{font-family:var(--font-head);font-size:12px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin:16px 0 8px}
.rp-domain-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bo)}
.rp-domain-info{flex:1;min-width:0}
.rp-domain-name{font-size:13px;font-weight:700;color:var(--dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-domain-vak{font-size:11px;color:var(--mu)}
.rp-pct-bar{width:58px;height:6px;background:var(--bo);border-radius:3px;overflow:hidden;flex-shrink:0}
.rp-pct-fill{height:100%;border-radius:3px}
.rp-pct-lbl{font-family:var(--font-head);font-size:12px;font-weight:800;width:34px;text-align:right;flex-shrink:0}
.rp-exam-row{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:10px;background:var(--bg2);margin-bottom:6px}
.rp-exam-vak{font-size:13px;font-weight:700;color:var(--dk)}
.rp-exam-date{font-size:11px;color:var(--mu);margin-top:2px}
.rp-share-btn{width:100%;margin-top:22px;padding:14px;background:var(--or);color:#fff;border:none;border-radius:14px;font-family:var(--font-head);font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s}
.rp-share-btn:hover{opacity:.88}
/* ── STUDIEPLAN v2 ──────────────────────────────── */
.sp-section{margin-top:28px}
.sp-hero{background:linear-gradient(135deg,rgba(var(--or-rgb),.1) 0%,rgba(var(--or-rgb),.03) 100%);border:1px solid rgba(var(--or-rgb),.18);border-radius:20px;padding:18px;margin-bottom:16px;position:relative;overflow:hidden}
.sp-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:130px;height:130px;background:radial-gradient(circle,rgba(var(--or-rgb),.12),transparent 70%);pointer-events:none}
.sp-hero-title{font-family:var(--font-head);font-size:18px;font-weight:900;color:var(--dk);margin-bottom:4px;line-height:1.2}
.sp-hero-sub{font-size:12.5px;color:var(--mu);line-height:1.6;margin-bottom:16px}
.sp-gen-btn{width:100%;padding:13px 20px;background:var(--or);color:#fff;border:none;border-radius:14px;font-family:var(--font-head);font-size:14px;font-weight:800;cursor:pointer;transition:opacity .2s;box-shadow:0 4px 16px rgba(var(--or-rgb),.3)}
.sp-gen-btn:hover{opacity:.88}
.sp-gen-btn:active{opacity:.75}
.sp-pref-label{font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:8px}
.sp-pref-days{display:flex;gap:5px;margin-bottom:6px}
.sp-pref-day{flex:1;text-align:center;border-radius:10px;border:1.5px solid var(--bo);background:var(--bg2);cursor:pointer;padding:7px 3px;transition:all .2s;-webkit-tap-highlight-color:transparent;user-select:none}
.sp-pref-day-name{font-size:11px;font-weight:700;color:var(--mu);line-height:1.2}
.sp-pref-day-dot{width:8px;height:8px;border-radius:50%;margin:5px auto 0;background:var(--bo);transition:all .2s}
.sp-pref-day[data-intensity="0"]{opacity:.35}
.sp-pref-day[data-intensity="1"]{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.05)}
.sp-pref-day[data-intensity="1"] .sp-pref-day-dot{background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,.5)}
.sp-pref-day[data-intensity="2"]{border-color:rgba(var(--or-rgb),.3);background:rgba(var(--or-rgb),.05)}
.sp-pref-day[data-intensity="2"] .sp-pref-day-dot{background:var(--or);box-shadow:0 0 5px rgba(var(--or-rgb),.5)}
.sp-pref-day[data-intensity="3"]{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.05)}
.sp-pref-day[data-intensity="3"] .sp-pref-day-dot{background:#ef4444;box-shadow:0 0 5px rgba(239,68,68,.5)}
.sp-pref-hint{font-size:10.5px;color:var(--mu);line-height:1.5;margin-bottom:14px}
.sp-empty{text-align:center;padding:28px 16px;color:var(--mu);font-size:14px;line-height:1.6}
.sp-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.sp-sum-card{background:var(--bg2);border-radius:14px;padding:12px 10px;text-align:center;border:1px solid var(--bo)}
.sp-sum-val{font-family:var(--font-head);font-size:20px;font-weight:900;color:var(--or)}
.sp-sum-lbl{font-size:10px;color:var(--mu);margin-top:2px;line-height:1.3}
.sp-mastery-section{padding:14px 16px;border-bottom:1px solid var(--bo)}
.sp-mastery-title{font-family:var(--font-head);font-size:12px;font-weight:800;color:var(--mu);margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.sp-mastery-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sp-mastery-card{background:var(--s);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;border:1px solid var(--bo)}
.sp-mastery-info{flex:1;min-width:0}
.sp-mastery-name{font-size:11.5px;font-weight:700;color:var(--dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;margin-bottom:3px}
.sp-mastery-row{display:flex;align-items:baseline;gap:4px;margin-bottom:4px}
.sp-mastery-pct{font-family:var(--font-head);font-size:14px;font-weight:900;line-height:1}
.sp-trend-up{color:#22c55e;font-size:10px;font-weight:700}
.sp-trend-down{color:#ef4444;font-size:10px;font-weight:700}
.sp-trend-stable{color:var(--mu);font-size:10px;font-weight:600}
.sp-mastery-bar{height:3px;background:var(--bo);border-radius:2px;overflow:hidden}
.sp-mastery-bar-fill{height:100%;border-radius:2px;transition:width .6s}
.sp-vak-block{margin-bottom:24px;border-radius:16px;overflow:hidden;border:1px solid var(--bo);background:var(--s)}
.sp-vak-header{display:flex;align-items:center;gap:10px;padding:13px 16px;background:var(--bg2);border-bottom:1px solid var(--bo)}
.sp-vak-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sp-vak-name{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--dk);flex:1}
.sp-vak-meta{font-size:12px;color:var(--mu)}
.sp-vak-countdown{font-family:var(--font-head);font-size:12px;font-weight:800;padding:4px 10px;border-radius:20px;flex-shrink:0}
.sp-vak-countdown.urgent{background:rgba(239,68,68,.15);color:#ef4444}
.sp-vak-countdown.soon{background:rgba(249,115,22,.15);color:#f97316}
.sp-vak-countdown.ok{background:rgba(34,197,94,.12);color:#22c55e}
.sp-progress-bar{height:3px;background:var(--bo)}
.sp-progress-fill{height:100%;background:linear-gradient(90deg,var(--or),#f97316);transition:width .6s}
.sp-day-row{display:flex;gap:0;border-top:1px solid var(--bo)}
.sp-day-row.sp-today{background:rgba(var(--or-rgb),.05)}
.sp-day-row.sp-heavy{background:rgba(239,68,68,.03)}
.sp-day-label{width:68px;flex-shrink:0;padding:12px 10px 12px 14px;border-right:1px solid var(--bo);display:flex;flex-direction:column;justify-content:flex-start}
.sp-day-lbl-top{font-family:var(--font-head);font-size:12px;font-weight:800;color:var(--dk);line-height:1.2}
.sp-day-lbl-top.sp-today-txt{color:var(--or)}
.sp-day-lbl-sub{font-size:10px;color:var(--mu);margin-top:2px}
.sp-day-load{font-size:9px;margin-top:3px}
.sp-day-tasks{flex:1;padding:10px 14px;display:flex;flex-direction:column;gap:10px}
.sp-task-item{display:flex;flex-direction:column;gap:4px}
.sp-task-dom{font-size:13px;font-weight:700;color:var(--dk);line-height:1.3}
.sp-task-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.sp-task-pct{font-size:11px;color:var(--mu)}
.sp-task-time{font-size:10px;font-weight:700;color:var(--mu);background:rgba(255,255,255,.05);padding:2px 7px;border-radius:7px}
.sp-act-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:transform .15s,opacity .15s;font-family:var(--font);width:fit-content}
.sp-act-btn:hover{opacity:.8;transform:translateY(-1px)}
.sp-act-btn:active{transform:scale(.97)}
.sp-act-leerstof{background:rgba(99,102,241,.1);color:#6366f1;border-color:rgba(99,102,241,.25)}
.sp-act-quiz{background:rgba(var(--or-rgb),.1);color:var(--or);border-color:rgba(var(--or-rgb),.25)}
.sp-act-flash{background:rgba(20,184,166,.1);color:#14b8a6;border-color:rgba(20,184,166,.25)}
.sp-act-open{background:rgba(139,92,246,.1);color:#8b5cf6;border-color:rgba(139,92,246,.25)}
.sp-act-herhaal{background:rgba(34,197,94,.1);color:#22c55e;border-color:rgba(34,197,94,.25)}
.sp-herhaal-row{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-top:1px solid var(--bo);background:rgba(34,197,94,.04)}
.sp-herhaal-title{font-size:12px;font-weight:800;color:#22c55e;font-family:var(--font-head)}
.sp-herhaal-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.sp-herhaal-chip{font-size:11px;color:#22c55e;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);padding:3px 8px;border-radius:10px;font-weight:600}
.sp-exam-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(135deg,rgba(var(--or-rgb),.1),rgba(var(--or-rgb),.04));border-top:1px solid rgba(var(--or-rgb),.2)}
.sp-exam-icon{font-size:20px}
.sp-exam-name{font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--or);line-height:1.3}
.sp-exam-time{font-size:11px;color:var(--mu)}
/* ── STUDIEPLAN DEDICATED SCREEN ────────────────── */
.splan-page-hero{background:linear-gradient(135deg,rgba(var(--or-rgb),.13) 0%,rgba(var(--or-rgb),.03) 100%);border-bottom:1px solid rgba(var(--or-rgb),.15);padding:20px 16px 18px;margin:-24px -16px 20px;position:relative;overflow:hidden}
.splan-page-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;background:radial-gradient(circle,rgba(var(--or-rgb),.14),transparent 70%);pointer-events:none}
.splan-page-title{font-family:var(--font-head);font-size:24px;font-weight:900;color:var(--dk);margin-bottom:4px;letter-spacing:-.5px}
.splan-page-sub{font-size:13px;color:var(--mu);line-height:1.5;margin-bottom:14px}
.splan-rooster-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--mu);background:rgba(255,255,255,.06);border:1px solid var(--bo);border-radius:10px;padding:5px 12px;cursor:pointer;transition:color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.splan-rooster-link:active{color:var(--or);border-color:rgba(var(--or-rgb),.3)}
/* Vandaag sectie bovenaan plan */
.sp-vandaag{background:linear-gradient(135deg,rgba(var(--or-rgb),.1),rgba(var(--or-rgb),.03));border:1px solid rgba(var(--or-rgb),.2);border-radius:18px;padding:14px 16px;margin-bottom:20px}
.sp-vandaag-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sp-vandaag-title{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--dk)}
.sp-vandaag-badge{font-size:11px;font-weight:700;background:rgba(var(--or-rgb),.15);color:var(--or);padding:2px 9px;border-radius:20px;border:1px solid rgba(var(--or-rgb),.25)}
.sp-vandaag-done-state{text-align:center;padding:8px 0;font-size:13px;color:#22c55e;font-weight:700}
/* Taakkaarten */
.sp-task-card{background:var(--s);border:1px solid var(--bo);border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;transition:opacity .3s}
.sp-task-card.sp-done{opacity:.45}
.sp-task-card.sp-done .sp-task-card-dom{text-decoration:line-through;color:var(--mu)}
.sp-task-card-left{flex:1;min-width:0}
.sp-task-card-vak{font-size:10.5px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.sp-task-card-dom{font-size:13px;font-weight:700;color:var(--dk);line-height:1.3;margin-bottom:5px}
.sp-task-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sp-task-card-time{font-size:10px;color:var(--mu);font-weight:600;background:rgba(255,255,255,.05);padding:2px 7px;border-radius:7px}
.sp-check-btn{width:34px;height:34px;border-radius:50%;border:2px solid var(--bo);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;-webkit-tap-highlight-color:transparent;color:var(--mu)}
.sp-check-btn:hover{border-color:#22c55e;color:#22c55e}
.sp-check-btn.checked{border-color:#22c55e;background:#22c55e;color:#fff}
.sp-check-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Homepage vandaag-widget */
.sp-home-widget{background:linear-gradient(135deg,rgba(var(--or-rgb),.11) 0%,rgba(var(--or-rgb),.04) 100%);border:1px solid rgba(var(--or-rgb),.2);border-radius:18px;overflow:hidden;margin-bottom:4px}
.sp-home-widget.sp-urgent{border-color:rgba(239,68,68,.4);animation:spUrgPulse 3s ease-in-out infinite}
@keyframes spUrgPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 14px 2px rgba(239,68,68,.2)}}
.sp-hw-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 10px;border-bottom:1px solid rgba(var(--or-rgb),.12)}
.sp-hw-title{font-family:var(--font-head);font-size:14px;font-weight:800;color:var(--dk);display:flex;align-items:center;gap:7px}
.sp-hw-link{font-size:12px;font-weight:700;color:var(--or);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-hw-tasks{padding:10px 16px 14px;display:flex;flex-direction:column;gap:7px}
.sp-hw-task{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:4px 0}
.sp-hw-task-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.sp-hw-task-body{flex:1;min-width:0}
.sp-hw-task-dom{font-size:13px;font-weight:700;color:var(--dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-hw-task-sub{font-size:11px;color:var(--mu)}
.sp-hw-task-time{font-size:10px;font-weight:700;color:var(--mu);background:rgba(255,255,255,.05);padding:2px 7px;border-radius:7px;flex-shrink:0}
.sp-hw-done-state{padding:14px 16px;text-align:center;font-size:13px;color:#22c55e;font-weight:700}
.sp-hw-generate{padding:12px 16px 14px}
.sp-hw-gen-btn{width:100%;padding:11px;background:var(--or);color:#fff;border:none;border-radius:12px;font-family:var(--font-head);font-size:13px;font-weight:800;cursor:pointer;transition:opacity .2s;box-shadow:0 3px 12px rgba(var(--or-rgb),.3)}
.sp-hw-gen-btn:active{opacity:.75}
/* ── STUDIEPLAN KALENDER ─────────────────────────── */
.sp-section-title{font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.08em;margin:20px 0 10px}
.sp-cal-day{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;margin-bottom:8px;overflow:hidden;transition:opacity .3s}
.sp-cal-day.sp-done{opacity:.55}
.sp-cal-day-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px}
.sp-cal-day-name{font-size:14px;font-weight:700;color:var(--dk)}
.sp-cal-day-date{font-size:11px;color:var(--mu);margin-top:1px}
.sp-cal-day-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sp-cal-task-count{font-size:12px;font-weight:700}
.sp-cal-mins{font-size:11px;color:var(--mu);background:rgba(255,255,255,.05);padding:2px 7px;border-radius:7px}
.sp-cal-done-badge{font-size:11px;color:#22c55e;font-weight:700;background:rgba(34,197,94,.12);padding:2px 8px;border-radius:8px;border:1px solid rgba(34,197,94,.2)}
.sp-cal-tasks{padding:0 14px 10px;display:flex;flex-direction:column}
.sp-cal-task-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.05)}
.sp-cal-task-row.sp-done .sp-cal-task-dom,.sp-cal-task-row.sp-done .sp-cal-task-vak{text-decoration:line-through;opacity:.5}
.sp-act-badge{font-size:15px;width:26px;text-align:center;flex-shrink:0}
.sp-cal-task-info{display:flex;flex-direction:column;flex:1;min-width:0}
.sp-cal-task-vak{font-size:10px;font-weight:700;color:var(--or);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-cal-task-dom{font-size:12px;color:var(--dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-cal-task-meta{font-size:11px;color:var(--mu);flex-shrink:0}
/* ── TOEGANKELIJKHEID ────────────────────────────── */
.acc-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--bo)}
.acc-row:last-child{border-bottom:none}
.acc-label{font-size:14px;font-weight:600;color:var(--dk)}
.acc-sub{font-size:12px;color:var(--mu);margin-top:2px}
.acc-toggle{position:relative;width:46px;height:26px;flex-shrink:0}
.acc-toggle input{opacity:0;width:0;height:0;position:absolute}
.acc-slider{position:absolute;inset:0;background:var(--bo);border-radius:13px;cursor:pointer;transition:background .2s}
.acc-slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.acc-toggle input:checked+.acc-slider{background:var(--or)}
.acc-toggle input:checked+.acc-slider::before{transform:translateX(20px)}
.dyslexie,.dyslexie *{font-family:'OpenDyslexic',sans-serif!important}
.hoog-contrast{--s:#fff!important;--bg:#f5f5f5!important;--bg2:#e8e8e8!important;--dk:#000!important;--tx:#000!important;--mu:#444!important;--bo:#555!important}
#sw-update-banner{position:fixed;top:0;left:0;right:0;z-index:99999;display:none;align-items:center;justify-content:center;gap:10px;padding:10px 16px;background:linear-gradient(135deg,#f97316,#f59e0b);color:#fff;font-size:13px;font-weight:600;box-shadow:0 2px 12px rgba(0,0,0,.25)}
#sw-update-banner.show{display:flex}
#sw-update-banner button{padding:5px 14px;border-radius:8px;border:none;cursor:pointer;font-size:12px;font-weight:700}
#sw-update-banner .sw-banner-reload{background:#fff;color:#f97316}
#sw-update-banner .sw-banner-dismiss{background:rgba(255,255,255,.2);color:#fff}
#offline-banner{position:fixed;top:0;left:0;right:0;z-index:99998;display:none;align-items:center;justify-content:center;gap:10px;padding:10px 16px;background:linear-gradient(135deg,#374151,#1f2937);color:#fff;font-size:13px;font-weight:600;box-shadow:0 2px 12px rgba(0,0,0,.3)}
#offline-banner.show{display:flex}
#offline-banner .sw-banner-dismiss{background:rgba(255,255,255,.15);color:#fff;padding:4px 10px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:700}

/* ═══════════════════════════════════════════
   NATIVE MOBILE APP FEEL  ≤ 640px
   ═══════════════════════════════════════════ */
@media(max-width:640px){

  /* ── HOME HERO: clean app-look ── */
  .hm-hero{background:var(--bg)!important;padding:0!important}
  .hm-hero::after,.hm-hero-glow,.flicker-canvas{display:none!important}
  .hm-h1,.hm-badge,.hm-sub{display:none!important}
  .home-section-header{display:none!important}
  .hm-hero-inner{padding:10px 16px 12px!important;text-align:center!important}

  /* Groet: klein en secundair boven countdown */
  #hm-greeting{
    font-size:14px!important;
    font-weight:500!important;
    color:var(--mu)!important;
    margin-bottom:14px!important;
    font-family:var(--font)!important;
    line-height:1.3!important;
    min-height:0!important;
  }

  /* ── COUNTDOWN: premium dark hero-kaart ── */
  .hm-countdown{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    background:linear-gradient(160deg,#0c0d1a 0%,#0f1022 55%,#080912 100%)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    border-radius:26px!important;
    padding:22px 20px 18px!important;
    margin-bottom:14px!important;
    gap:0!important;
    backdrop-filter:none!important;
    width:100%!important;
    box-sizing:border-box!important;
    position:relative!important;
    overflow:hidden!important;
    text-align:center!important;
  }
  /* Gloed per niveau */
  .hm-countdown::before{
    content:''!important;
    position:absolute!important;
    top:-60px!important;left:50%!important;
    transform:translateX(-50%)!important;
    width:280px!important;height:180px!important;
    border-radius:50%!important;
    pointer-events:none!important;
    opacity:.5!important;
    z-index:0!important;
  }
  .hm-countdown.cd-havo{border-color:rgba(var(--or-rgb),.22)!important;box-shadow:0 10px 40px rgba(var(--or-rgb),.16),inset 0 1px 0 rgba(255,255,255,.04)!important}
  .hm-countdown.cd-havo::before{background:radial-gradient(ellipse,rgba(var(--or-rgb),.4) 0%,transparent 68%)!important}
  .hm-countdown.cd-vwo{border-color:rgba(139,92,246,.22)!important;box-shadow:0 10px 40px rgba(139,92,246,.16),inset 0 1px 0 rgba(255,255,255,.04)!important}
  .hm-countdown.cd-vwo::before{background:radial-gradient(ellipse,rgba(139,92,246,.4) 0%,transparent 68%)!important}

  /* cd-left: statisch kopje + vaknaam + datum */
  .hm-countdown .cd-left{
    width:100%!important;
    margin-bottom:0!important;
    position:relative!important;
    z-index:1!important;
  }
  /* Statisch "VOLGENDE EXAMEN" kopje via ::before */
  .hm-countdown .cd-left::before{
    content:'VOLGENDE EXAMEN'!important;
    display:block!important;
    color:rgba(255,255,255,.32)!important;
    font-size:9px!important;
    letter-spacing:1.8px!important;
    margin-bottom:5px!important;
    text-transform:uppercase!important;
    font-family:var(--font)!important;
    font-weight:600!important;
  }
  /* cd-label bevat de vaknaam → groot en prominent */
  .hm-countdown .cd-label{
    color:#fff!important;
    font-size:20px!important;
    font-weight:900!important;
    font-family:var(--font-head)!important;
    letter-spacing:-.3px!important;
    line-height:1.2!important;
    margin-bottom:4px!important;
    text-transform:none!important;
    letter-spacing:normal!important;
  }
  /* "Nog XX dagen" verbergen — cd-box toont al de dagen */
  .hm-countdown .cd-title{display:none!important}
  /* cd-sub bevat de datum → klein en gedimpt */
  .hm-countdown .cd-sub{
    color:rgba(255,255,255,.38)!important;
    font-size:11px!important;
    font-weight:400!important;
    font-family:var(--font)!important;
    margin-top:0!important;
    line-height:1.4!important;
  }

  /* Dunne scheidingslijn */
  .hm-countdown .cd-nums{
    width:100%!important;
    flex-wrap:wrap!important;
    flex-direction:row!important;
    gap:8px!important;
    justify-content:center!important;
    position:relative!important;
    z-index:1!important;
    margin-top:16px!important;
    padding-top:16px!important;
    border-top:1px solid rgba(255,255,255,.07)!important;
  }

  /* Dagen-box: vol breed, reuzengetal */
  .hm-countdown .cd-box:first-child{
    width:100%!important;
    background:transparent!important;
    border:none!important;
    padding:0 0 10px!important;
    min-width:0!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    border-radius:0!important;
  }
  .hm-countdown .cd-box:first-child .cd-val{
    font-size:72px!important;
    font-weight:900!important;
    font-family:var(--font-head)!important;
    letter-spacing:-4px!important;
    line-height:1!important;
  }
  .hm-countdown.cd-havo .cd-box:first-child .cd-val{color:var(--or)!important}
  .hm-countdown.cd-vwo .cd-box:first-child .cd-val{color:#c4b5fd!important}
  .hm-countdown .cd-box:first-child .cd-unit{
    font-size:10px!important;
    letter-spacing:2px!important;
    color:rgba(255,255,255,.3)!important;
    text-transform:uppercase!important;
    margin-top:4px!important;
  }

  /* Uren/Min/Sec: drie gelijke pils */
  .hm-countdown .cd-box:not(:first-child){
    flex:1!important;
    background:rgba(255,255,255,.05)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:14px!important;
    padding:9px 6px 8px!important;
    min-width:0!important;
  }
  .hm-countdown .cd-box:not(:first-child) .cd-val{
    font-size:22px!important;
    font-weight:800!important;
    font-family:var(--font-head)!important;
    color:#fff!important;
    letter-spacing:-.5px!important;
    line-height:1!important;
  }
  .hm-countdown .cd-box:not(:first-child) .cd-unit{
    color:rgba(255,255,255,.28)!important;
    font-size:8px!important;
    letter-spacing:.8px!important;
    text-transform:uppercase!important;
    margin-top:4px!important;
  }

  /* CTAs: vol breed onder countdown */
  .hm-ctas{flex-direction:column!important;gap:8px!important;margin-top:0!important}
  .hm-cta-primary{
    width:100%!important;
    font-size:16px!important;
    padding:15px 16px!important;
    border-radius:16px!important;
    justify-content:center!important;
    box-shadow:0 4px 18px rgba(var(--or-rgb),.35)!important;
  }
  .hm-cta-sec{
    display:inline-flex!important;
    width:100%!important;
    font-size:15px!important;
    padding:14px 16px!important;
    border-radius:16px!important;
    background:var(--s)!important;
    border:1.5px solid var(--bo)!important;
    color:var(--dk)!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }

  /* ── HNAV: compacte native app bar ── */
  .hnav,.hnav-inner{height:50px!important}
  .hnav-inner{padding:0 14px!important}
  .hnav-wordmark{font-size:17px!important;font-weight:900!important}
  .hnav-chip{font-size:10px!important;padding:3px 8px!important;border-radius:8px!important}
  .hnav-icon-btn{width:34px!important;height:34px!important;border-radius:9px!important}

  /* ── BENTO: volledig breedte, grotere cellen ── */
  .bento{padding:4px 12px 12px!important;gap:9px!important}
  .bento-cell{border-radius:18px!important;min-height:82px!important}
  .bento-act{border-radius:18px!important;min-height:82px!important}
  .bento-sv{font-size:13px!important;font-weight:800!important}
  .bento-si{font-size:19px!important}
  .bento-sl{font-size:10px!important}

  /* ── STATS STRIP ── */
  .hm-stats-strip{margin-bottom:6px!important}
  .hm-stat-pill{padding:6px 11px!important;font-size:11px!important;border-radius:16px!important}

  /* ── QUICK SCROLL ── */
  .hm-ql-btn{padding:8px 14px!important;font-size:12.5px!important;border-radius:20px!important;height:36px!important}

  /* ── SOCIAAL KNOPPEN ── */
  .hm-soc-btn{padding:15px 12px!important;font-size:14px!important;border-radius:16px!important;font-weight:700!important}

  /* ── BOTTOM NAV: native full-width tab bar ── */
  .bottom-nav{padding:0!important}
  .bottom-nav-inner{
    max-width:100%!important;
    border-radius:0!important;
    margin:0!important;
    padding:6px 8px calc(env(safe-area-inset-bottom,4px) + 6px)!important;
    border:none!important;
    border-top:1px solid var(--bo)!important;
    box-shadow:0 -1px 0 var(--bo)!important;
    background:color-mix(in srgb,var(--nav-bg) 96%,transparent)!important;
    backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
    gap:0!important;
  }
  .bnav-btn{
    padding:5px 10px!important;
    border-radius:10px!important;
    font-size:9px!important;
    flex:1!important;
    gap:2px!important;
  }
  .bnav-btn svg{width:20px!important;height:20px!important}
  .bnav-fab-wrap{flex:1!important;display:flex!important;justify-content:center!important}
  .bnav-fab{width:46px!important;height:46px!important;top:-6px!important}

  /* ── QUIZ: native app schermvullend gevoel ── */
  .qtb{padding:8px 14px 0!important;gap:8px!important}
  .qstp{padding:6px 12px!important;font-size:12px!important;border-radius:10px!important}
  .qpb{margin:6px 14px!important;height:5px!important;border-radius:3px!important}
  .qbody{padding:14px 14px 18px!important;border-radius:22px!important;margin:6px 10px 0!important}
  .qring{width:52px!important;height:52px!important;flex-shrink:0!important}
  .trn{font-size:16px!important}
  .qq{font-size:18px!important;line-height:1.45!important;margin-bottom:16px!important;font-weight:700!important}
  .qopts{gap:9px!important;margin-bottom:14px!important;grid-template-columns:1fr!important}
  .opt{
    padding:16px 14px!important;
    font-size:16px!important;
    border-radius:16px!important;
    min-height:54px!important;
    align-items:center!important;
    font-weight:600!important;
  }
  .nxt{padding:16px!important;font-size:16px!important;border-radius:16px!important;width:100%!important;box-sizing:border-box!important}

  /* ── SCHERMEN: geen website-padding ── */
  body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 58px)!important}
  .w{padding:0 14px!important}
  .sc>.w:first-child,.sc .w:first-of-type{padding-top:4px!important}

  /* ── DETAIL SCREEN: compact native nav + grotere domein tap-targets ── */
  #sc-detail .nav{position:sticky!important;top:0!important;z-index:100!important}
  #sc-detail .nav-inner{height:50px!important;padding:0 14px!important}
  #sc-detail .w[style*="padding-top"]{padding-top:14px!important}
  #sc-detail .det-breadcrumb{display:none!important}
  #sc-detail .sh h2{font-size:20px!important;margin-bottom:4px!important}
  #sc-detail .sh p{font-size:13px!important}
  #sc-detail .ce{padding:10px 12px!important;font-size:12px!important}
  /* Domein-kaart: grotere tap-targets */
  .dc2{border-radius:14px!important}
  .dh{padding:14px 14px!important;gap:10px!important}
  .dlet{width:34px!important;height:34px!important;font-size:14px!important;border-radius:9px!important}
  .di h4{font-size:14px!important}
  .di p{font-size:11.5px!important}
  .dbtns{gap:5px!important;flex-wrap:nowrap!important}
  .exb{padding:9px 10px!important;font-size:12px!important;border-radius:9px!important;min-height:38px!important}
  .qb{padding:9px 14px!important;font-size:13px!important;border-radius:9px!important;min-height:38px!important}

  /* ── FLASHCARD SCREEN: vult scherm, grote knoppen ── */
  #sc-flash.on{
    height:100svh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #sc-flash .qtb{flex-shrink:0!important}
  #sc-flash .qbody{
    flex:1!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .fc-card{
    height:220px!important;
    flex-shrink:0!important;
  }
  .fc-front{font-size:17px!important;line-height:1.55!important}
  .fc-back{font-size:14px!important;line-height:1.6!important}
  /* Grote, app-waardige rating knoppen */
  .fc-btns{
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;
    margin-top:10px!important;
  }
  .fc-btn{
    padding:14px 8px!important;
    border-radius:14px!important;
    min-height:56px!important;
    border-width:1.5px!important;
  }
  .fc-btn-label{font-size:14px!important;font-weight:800!important;margin-bottom:3px!important}
  .fc-btn-int{font-size:11px!important;opacity:.7!important}

  /* ── QMODE: compacte keuzekaarten ── */
  .qmw{padding:12px 0 0!important}
  .qmw-header{padding:0 0 14px!important}
  .qmw h2{font-size:20px!important;margin-bottom:4px!important}
  .qmsub{font-size:12px!important;margin-bottom:14px!important}
  .qmcd{padding:14px 14px 12px!important;border-radius:16px!important;gap:4px!important}
  .qmci svg,.qmci{width:22px!important;height:22px!important;margin-bottom:6px!important}
  .qmcd h3{font-size:15px!important;margin-bottom:3px!important}
  .qmcd p{font-size:12px!important;line-height:1.4!important;margin-bottom:6px!important}
  .qm-tags{gap:4px!important;flex-wrap:wrap!important}
  .qm-tag{font-size:10px!important;padding:3px 8px!important}
  .race-diff-row{gap:5px!important;margin-top:6px!important}
  .race-diff-btn{font-size:11px!important;padding:7px 8px!important;border-radius:8px!important}

  /* ── RESULTATEN: compacter, knoppen in 2 kolommen ── */
  .rb{padding:28px 18px 20px!important}
  .remi{font-size:44px!important;margin-bottom:10px!important}
  .rb h2{font-size:26px!important;margin-bottom:6px!important}
  .rb>p{font-size:13px!important;margin-bottom:18px!important}
  .sring{width:110px!important;height:110px!important;margin-bottom:20px!important}
  .srn{font-size:30px!important}
  .rbd{padding:14px!important;margin-bottom:16px!important;border-radius:14px!important}
  .rbtns{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .btnp{padding:15px 10px!important;font-size:15px!important;border-radius:12px!important;grid-column:1/-1!important}
  .btns{padding:12px 8px!important;font-size:13px!important;border-radius:12px!important}
  .res-next-dom{margin-bottom:10px!important;padding:14px!important;font-size:14px!important;border-radius:12px!important}

  /* ── VAKGRID: 2 kolommen met compactere cards ── */
  .sg{grid-template-columns:1fr 1fr!important;gap:10px!important}
  @media(max-width:420px){.sg{grid-template-columns:1fr 1fr!important}}
  .card{padding:14px 12px 12px!important;border-radius:16px!important}
  .card-name{font-size:14px!important;margin-bottom:3px!important}
  .card-desc{font-size:11px!important;margin-bottom:6px!important;line-height:1.4!important}

  /* ═══════════════════════════════════════
     QUIZ SCREENS — altijd schermvullend
     (bottom nav al verborgen tijdens quiz)
     ═══════════════════════════════════════ */

  /* ── SNELLE QUIZ: flex-kolom, vult precies het scherm ── */
  #sc-quiz.on{
    height:100svh!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #sc-quiz .qtb{flex-shrink:0;padding:10px 14px 0!important;gap:8px!important}
  #sc-quiz .qpb{flex-shrink:0;margin:7px 14px 0!important;height:4px!important}
  #sc-quiz .quiz-skeleton{flex:1}
  #sc-quiz .qbody{
    flex:1!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    min-height:0!important;
    padding:12px 12px 16px!important;
    margin:6px 10px 0!important;
    border-radius:22px!important;
  }
  #sc-quiz .qring{width:46px!important;height:46px!important;margin-bottom:4px!important}
  #sc-quiz .trn{font-size:15px!important}
  #sc-quiz .qq{font-size:17px!important;margin-bottom:12px!important;line-height:1.45!important}
  #sc-quiz .qopts{gap:8px!important;margin-bottom:10px!important;grid-template-columns:1fr!important}
  #sc-quiz .opt{padding:14px 13px!important;font-size:15px!important;min-height:50px!important;border-radius:15px!important}
  #sc-quiz .nxt{padding:14px!important;font-size:15px!important;border-radius:15px!important}

  /* ── BOT RACE: flex-kolom, tracks vast, vraaggebied scrollt ── */
  #sc-race.on{
    height:100svh!important;
    min-height:0!important;
    padding-bottom:0!important;
    overflow:hidden!important;
  }
  #sc-race .race-tb{flex-shrink:0;padding:9px 14px!important;gap:8px!important}
  #sc-race .race-tracks{
    flex-shrink:0!important;
    padding:8px 14px 4px!important;
    gap:7px!important;
  }
  #sc-race .race-track{height:32px!important;border-radius:16px!important}
  #sc-race .race-track-row{gap:7px!important}
  #sc-race .race-track-label{font-size:9.5px!important;width:36px!important}
  #sc-race .race-track-score{font-size:12px!important;width:30px!important}
  #sc-race .race-car{font-size:17px!important}
  #sc-race .race-finish{font-size:16px!important}
  #sc-race .race-combo-wrap{
    flex-shrink:0!important;
    height:22px!important;
    padding:0 12px!important;
  }
  #sc-race .race-combo{font-size:13px!important}
  #sc-race .race-qbody{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    min-height:0!important;
    padding:6px 12px 12px!important;
  }
  #sc-race .race-qring{width:38px!important;height:38px!important;margin-bottom:2px!important}
  #sc-race .race-qctr{font-size:9px!important;margin-bottom:6px!important}
  #sc-race .race-qq{
    font-size:14.5px!important;
    line-height:1.45!important;
    padding:11px 12px!important;
    margin-bottom:8px!important;
    border-radius:12px!important;
  }
  #sc-race .race-opts{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    margin-bottom:8px!important;
  }
  #sc-race .race-opt{
    padding:11px 10px!important;
    font-size:13.5px!important;
    border-radius:13px!important;
    line-height:1.3!important;
  }
  #sc-race .race-fb{
    padding:8px 12px!important;
    font-size:12px!important;
    margin-bottom:7px!important;
    border-radius:11px!important;
  }
  #sc-race .race-fb .fbt{font-size:12.5px!important;margin-bottom:2px!important}
  #sc-race .race-fb .fbtx{font-size:11px!important}
  #sc-race .race-powerup-bar{
    padding:10px 12px!important;
    margin-bottom:8px!important;
    border-radius:14px!important;
  }
  #sc-race .race-pu-title{font-size:11px!important;margin-bottom:6px!important}
  #sc-race .race-pu-btn{padding:10px 6px!important;font-size:10px!important;border-radius:10px!important}
  #sc-race .nxt{padding:13px!important;font-size:15px!important;border-radius:15px!important;margin-top:0!important}
}
/* ── PREMIUM AVATAR RING + FILTER ────────────────────────────── */
/* Gelaagde ring: box-shadow band + draaiend lichtpunt + specular  */
.avo-prem-ring{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;padding:5px;border-radius:22%}
.avo-prem-ring .anim-svg-wrap{
  position:relative;z-index:2;flex-shrink:0;border-radius:16%;overflow:hidden}
/* ::before = draaiend lichtpunt (sweep highlight, extends buiten ring) */
.avo-prem-ring::before{
  content:'';position:absolute;z-index:1;border-radius:22%;pointer-events:none}
/* ::after = statische specular glans linksboven */
.avo-prem-ring::after{
  content:'';position:absolute;top:7%;left:11%;width:38%;height:25%;
  border-radius:50%;transform:rotate(-20deg);z-index:4;pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,255,255,.58) 0%,transparent 65%)}

/* ══ GOUD ════════════════════════════════════════════════════ */
@keyframes _rg{to{transform:rotate(360deg)}}
@keyframes _glow-g{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(20,8,0,.65),0 0 0 4.5px #7a3e00,0 0 0 5px #c8860a,0 0 0 5.5px #ffcf50,0 0 0 6px #9c6200,0 0 0 7px rgba(40,18,0,.3),0 0 14px 5px rgba(255,190,0,.5),0 0 30px 10px rgba(210,130,0,.25),0 0 52px 16px rgba(150,80,0,.12)}
  50%{box-shadow:inset 0 0 0 1px rgba(20,8,0,.65),0 0 0 4.5px #7a3e00,0 0 0 5px #c8860a,0 0 0 5.5px #ffcf50,0 0 0 6px #9c6200,0 0 0 7px rgba(40,18,0,.3),0 0 22px 8px rgba(255,200,0,.72),0 0 46px 16px rgba(220,150,0,.38),0 0 75px 24px rgba(160,95,0,.18)}}
.avo-ring-goud{animation:_glow-g 2.8s ease-in-out infinite}
/* Conic ring: 2 lichtpieken per rotatie voor realistisch metaal */
.avo-ring-goud::before{
  inset:-6px;
  background:conic-gradient(from 0deg,
    #2a1000 0%,#8b4500 5%,#d4930a 10%,#ffd060 15%,#fff5c0 19%,#ffd060 23%,
    #d4930a 28%,#8b4500 33%,#3d2000 40%,#8b4500 47%,
    #d4930a 52%,#ffd060 57%,#fff5c0 61%,#ffd060 65%,
    #d4930a 70%,#8b4500 76%,#2a1000 84%,#8b4500 92%,#2a1000 100%);
  animation:_rg 3.5s linear infinite}
/* SVG filter voor realistische goud-textuur + specular */
.avo-goud{filter:url(#avo-f-goud)}

/* ══ DIAMANT ══════════════════════════════════════════════════ */
@keyframes _rd{to{transform:rotate(-360deg)}}
@keyframes _glow-d{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(0,10,22,.65),0 0 0 4.5px #034e7c,0 0 0 5px #0a87c8,0 0 0 5.5px #68d0f8,0 0 0 6px #0068a8,0 0 0 7px rgba(0,14,28,.3),0 0 16px 6px rgba(30,170,250,.52),0 0 34px 11px rgba(0,135,215,.28),0 0 58px 17px rgba(0,80,160,.13)}
  50%{box-shadow:inset 0 0 0 1px rgba(0,10,22,.65),0 0 0 4.5px #034e7c,0 0 0 5px #0a87c8,0 0 0 5.5px #68d0f8,0 0 0 6px #0068a8,0 0 0 7px rgba(0,14,28,.3),0 0 26px 10px rgba(30,185,255,.78),0 0 52px 18px rgba(0,150,230,.42),0 0 85px 26px rgba(0,90,180,.2)}}
.avo-ring-diamant{animation:_glow-d 2.2s ease-in-out infinite}
.avo-ring-diamant::before{
  inset:-6px;
  background:conic-gradient(from 0deg,
    #061524 0%,#0369a1 6%,#0ea5e9 12%,#7dd3fc 17%,#e2f8ff 21%,#7dd3fc 25%,
    #0ea5e9 30%,#0369a1 35%,#061524 42%,#0369a1 49%,
    #0ea5e9 54%,#7dd3fc 59%,#e2f8ff 63%,#7dd3fc 67%,
    #0ea5e9 72%,#0369a1 78%,#061524 86%,#0369a1 93%,#061524 100%);
  animation:_rd 2.5s linear infinite}
.avo-diamant{filter:url(#avo-f-diamant)}

/* ══ PLATINA ══════════════════════════════════════════════════ */
@keyframes _rp{to{transform:rotate(360deg)}}
@keyframes _glow-p{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(5,10,18,.65),0 0 0 4.5px #2a3444,0 0 0 5px #7a8fa8,0 0 0 5.5px #d8e8f5,0 0 0 6px #5a7090,0 0 0 7px rgba(10,14,22,.3),0 0 18px 6px rgba(190,215,238,.5),0 0 38px 12px rgba(130,158,185,.25),0 0 62px 18px rgba(75,100,130,.11)}
  50%{box-shadow:inset 0 0 0 1px rgba(5,10,18,.65),0 0 0 4.5px #2a3444,0 0 0 5px #7a8fa8,0 0 0 5.5px #d8e8f5,0 0 0 6px #5a7090,0 0 0 7px rgba(10,14,22,.3),0 0 28px 10px rgba(210,230,248,.76),0 0 58px 18px rgba(155,180,205,.38),0 0 90px 28px rgba(90,115,145,.17)}}
.avo-ring-platina{animation:_glow-p 2s ease-in-out infinite}
.avo-ring-platina::before{
  inset:-6px;
  background:conic-gradient(from 0deg,
    #0f172a 0%,#475569 6%,#94a3b8 12%,#e2e8f0 17%,#ffffff 21%,#e2e8f0 25%,
    #94a3b8 30%,#475569 35%,#0f172a 42%,#475569 49%,
    #94a3b8 54%,#e2e8f0 59%,#ffffff 63%,#e2e8f0 67%,
    #94a3b8 72%,#475569 78%,#0f172a 86%,#475569 93%,#0f172a 100%);
  animation:_rp 4.8s linear infinite}
.avo-platina{filter:url(#avo-f-platina)}
/* ── EVOLUTION REVEAL MODAL ───────────────────────────────────── */
@keyframes evo-bg-in{from{opacity:0}to{opacity:1}}
@keyframes evo-card-in{from{transform:scale(.7) translateY(24px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes evo-av-pop{0%{transform:scale(0) rotate(-22deg);opacity:0}70%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes evo-crown-drop{0%{transform:translateY(-20px) scale(.7);opacity:0}60%{transform:translateY(3px) scale(1.1)}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes evo-shine{0%,100%{opacity:.7;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.04)}}
#evo-reveal-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.82);opacity:0;pointer-events:none;transition:opacity .25s;animation:none}
#evo-reveal-modal.open{opacity:1;pointer-events:all}
.evo-reveal-card{background:var(--bg);border-radius:26px;padding:36px 26px 28px;text-align:center;max-width:308px;width:90%;position:relative;overflow:hidden;opacity:0;transform:scale(.7) translateY(24px);transition:none}
#evo-reveal-modal.open .evo-reveal-card{animation:evo-card-in .48s .08s cubic-bezier(.34,1.56,.64,1) forwards}
.evo-reveal-glow{position:absolute;inset:0;border-radius:26px;pointer-events:none;z-index:0}
.evo-reveal-glow-goud{background:radial-gradient(ellipse at 50% 0%,rgba(251,191,36,.28) 0%,rgba(245,158,11,.12) 50%,transparent 75%)}
.evo-reveal-glow-diamant{background:radial-gradient(ellipse at 50% 0%,rgba(56,189,248,.28) 0%,rgba(14,165,233,.12) 50%,transparent 75%)}
.evo-reveal-glow-platina{background:radial-gradient(ellipse at 50% 0%,rgba(226,232,240,.32) 0%,rgba(148,163,184,.14) 50%,transparent 75%)}
.evo-reveal-content{position:relative;z-index:1}
.evo-reveal-crown{font-size:28px;display:block;margin-bottom:8px;animation:evo-crown-drop .5s .55s both cubic-bezier(.34,1.56,.64,1)}
.evo-reveal-badge{font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;padding:4px 14px;border-radius:20px;display:inline-block;margin-bottom:16px}
.evo-rb-goud{background:linear-gradient(90deg,rgba(251,191,36,.18),rgba(245,158,11,.18));color:#b45309;border:1.5px solid rgba(251,191,36,.55)}
.evo-rb-diamant{background:linear-gradient(90deg,rgba(56,189,248,.17),rgba(14,165,233,.17));color:#0284c7;border:1.5px solid rgba(56,189,248,.55)}
.evo-rb-platina{background:linear-gradient(90deg,rgba(226,232,240,.22),rgba(203,213,225,.22));color:#475569;border:1.5px solid rgba(203,213,225,.6)}
.evo-rb-default{background:rgba(99,102,241,.1);color:#818cf8;border:1.5px solid rgba(99,102,241,.28)}
.evo-reveal-av{margin:0 auto 18px;display:flex;justify-content:center;animation:evo-av-pop .6s .22s both cubic-bezier(.34,1.56,.64,1)}
.evo-reveal-divider{height:2px;border-radius:2px;margin:0 auto 18px;width:60px;animation:evo-shine 2.5s ease-in-out infinite}
.evo-divider-goud{background:linear-gradient(90deg,transparent,#fbbf24,transparent)}
.evo-divider-diamant{background:linear-gradient(90deg,transparent,#38bdf8,transparent)}
.evo-divider-platina{background:linear-gradient(90deg,transparent,#cbd5e1,transparent)}
.evo-divider-default{background:linear-gradient(90deg,transparent,#818cf8,transparent)}
.evo-reveal-title{font-size:20px;font-weight:900;color:var(--dk);margin-bottom:8px;font-family:var(--font-head);line-height:1.2}
.evo-reveal-sub{font-size:13.5px;color:var(--mu);margin-bottom:24px;line-height:1.6}
.evo-reveal-btn{width:100%;padding:15px;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:var(--font-head);color:#fff;letter-spacing:.2px}
.evo-btn-goud{background:linear-gradient(135deg,#d97706,#f59e0b,#fbbf24);box-shadow:0 6px 20px rgba(245,158,11,.4)}
.evo-btn-diamant{background:linear-gradient(135deg,#0284c7,#0ea5e9,#38bdf8);box-shadow:0 6px 20px rgba(14,165,233,.4)}
.evo-btn-platina{background:linear-gradient(135deg,#475569,#64748b,#94a3b8);box-shadow:0 6px 20px rgba(100,116,139,.35)}
.evo-btn-default{background:linear-gradient(135deg,#6366f1,#818cf8)}
/* ── LEADERBOARD STAGE CHIP ───────────────────────────────────── */
.lb-stage-chip{font-size:9px;font-weight:800;padding:1px 6px;border-radius:10px;display:inline-block;vertical-align:middle;margin-left:4px}
.lb-sc-goud{background:rgba(245,158,11,.14);color:#d97706;border:1px solid rgba(245,158,11,.35)}
.lb-sc-diamant{background:rgba(96,165,250,.14);color:#3b82f6;border:1px solid rgba(96,165,250,.35)}
.lb-sc-platina{background:rgba(148,163,184,.18);color:#64748b;border:1px solid rgba(148,163,184,.4)}