:root { color-scheme:light; --ink:#12334f; --muted:#526b80; --line:#cfdeea; --paper:#fff; --panel:#fff; --panel2:#f7fafc; --cyberwave:#17659a; --aqua:#008068; --green:#008068; }
/* A viewport layer keeps the same blue on short and long portal pages,
   including mobile browsers that do not support fixed background attachment.
   Leave the body's pseudo-elements available for the existing logo bubbles. */
html { min-height:100%; background:#12334f; isolation:isolate; }
html::before {
 content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
 background:linear-gradient(145deg,#12334f,#0070bd);
}
body { min-height:100vh; min-height:100dvh; background:transparent; }
.appbar,.panel,.portaal { background:#fff; box-shadow:0 8px 28px #082a4920; }
.page-heading { color:#fff; }
.page-heading .muted { color:#dcefff; }
input,textarea,select { background:#fff; }
.totp-setup,.question-toolbar,.generator,.game-option,.game-item,.session-card { background:#f2f7fb; }
.game-card.aan { background:#e5f2fc; }
.design-entry { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; border-left:5px solid #0070bd; }
.design-entry h2 { margin:0 0 6px; font-size:1.15rem; }
.design-entry p { margin:0; color:var(--muted); font-size:.8rem; }
.design-entry .btn { flex:none; }
body > main + p a { color:#fff; }
.top{color:#fff}.top .sub{color:#dcefff}
.taal,.top .knop--rand{background:#fff;color:#17659a;border-color:#cfdeea}
.login,.kpi,.tabelbak,.lade__blad,.portaal{background:#fff;color:#12334f}
.login input{background:white;color:#12334f;border-color:#cfdeea}
.panel,.kpi{background:#fff}
.portaal a{color:#17659a}
.tabelbak{border-color:#cfdeea}
@media(max-width:620px) { .design-entry { flex-direction:column; align-items:stretch; padding:18px; } }

/* Shared portal layout: custom games, dashboard, question bank and account forms. */
body { --bg:#12334f; --cipher:#008068; --nova:#6555b4; }
main:not(.wrap) { width:min(1100px,calc(100% - 32px)); max-width:1100px; margin:auto; padding:28px 0 60px; }
.portaal { display:flex; flex-wrap:wrap; max-width:100%; gap:6px; padding:6px; border:1px solid var(--line); border-radius:18px; }
.portaal a { border-radius:12px; padding:10px 16px; font-size:.8rem; font-weight:700; }
.portaal a.hier,.portaal a.hier:hover { background:#0070bd; color:#fff; }
.portaal a:not(.hier):hover { background:#eaf4fb; color:#12334f; }
.panel,.paneel,.login,.kpi,.vraag,.balk,.lade__blad { background:#fff; color:var(--ink); border-color:var(--line); box-shadow:0 8px 28px #082a4914; }
.panel,.paneel,.login { border-radius:22px; }
.balk { backdrop-filter:none; }
.veld,.filter,input,textarea,select { background:#fff; color:var(--ink); border-color:var(--line); }
.veld::placeholder,input::placeholder,textarea::placeholder { color:#647d91; opacity:1; }
.top .wie { color:#dcefff; }
.btn,.knop { border-radius:12px; }
.btn:focus-visible,.knop:focus-visible,.portaal a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #4da6df; outline-offset:3px; }
.knop--rood,.vink--nee,.antwoord__uit b { color:#b62c3e; border-color:#dba4ab; }
.melding--fout { color:#a72235; background:#fff0f2; }
.melding--goed { color:#006c57; background:#eaf8f3; }
.melding--waarschuwing { color:#805213; background:#fff6e7; }
@media(max-width:620px) {
 main:not(.wrap) { padding-top:66px; }
 .portaal { width:100%; }
 .portaal a { flex:1 1 auto; padding:9px 12px; text-align:center; }
 .balk { position:static; }
 .balk .zoek { flex-basis:100%; min-width:0; }
 .balk .filter { min-width:0; flex:1 1 130px; }
}
@media print { html,body { background:#fff; } html::before { display:none; } .top,.top .sub { color:#12334f; } }
.reach-panel { overflow:hidden; margin-bottom:16px; }
#worldMap svg { display:block; width:100%; height:auto; max-height:450px; background:linear-gradient(140deg,#092d4b,#075f93); border-radius:18px; margin:20px 0; }
.map-land { fill:#497993; stroke:#173f58; stroke-width:.6; }
.map-dot { fill:#70eadf; stroke:white; stroke-width:1.5; }
.map-halo { opacity:.22; stroke:none; animation:mapGlow 3s ease-in-out infinite alternate; }
.country-chips { display:flex; gap:8px; flex-wrap:wrap; }
.country-chip { background:#eff7fb; color:#143650; border:1px solid #d1e3ed; border-radius:24px; padding:7px 13px; font-size:14px; }
.country-chip b { margin-left:10px; color:#0074b5; }
#engagementKpis { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
@keyframes mapGlow { to { opacity:.5; } }
@media(prefers-reduced-motion:reduce) { .map-halo { animation:none; } }
@media print { #exportSummary { display:none; } #worldMap svg { print-color-adjust:exact; } }