/* ═══════════════════════════════════════════════════════════
   SeoCore — globale stijl, 1:1 uit SeoCore.dc.html (prototype-head)
   ═══════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: #05041a; color: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Display typeface for headings & emphasis — bodytext stays Inter, numerals stay JetBrains Mono (inline font-family wins) */
[style*="font-weight: 900"], [style*="font-weight: 800"], [style*="font-weight: 700"] { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
a { color: #8b8ff5; text-decoration: none; }
a:hover { color: #a5a8f8; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); background-clip: padding-box; }
input::placeholder { color: rgba(255,255,255,0.32); }
input, textarea { caret-color: #5DCAA5; }
body { text-wrap: pretty; }
::selection { background: rgba(93,202,165,0.32); color: #fff; }
img { -webkit-user-drag: none; user-select: none; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid #5DCAA5; outline-offset: 2px; border-radius: 10px; box-shadow: 0 0 0 4px rgba(93,202,165,0.18); }
@media (hover: hover) { ::-webkit-scrollbar-thumb { transition: background .2s; } }
/* High-contrast: hoog ALLE laag-opacity witte tekst op (0.2–0.69) naar leesbaar.
   Voorheen alleen 0.45/0.5/0.6 → de laagste (0.3/0.35/0.4) bleven onleesbaar. */
body.hc-mode [style*="rgba(255,255,255,0.6"], body.hc-mode [style*="rgba(255,255,255,0.5"], body.hc-mode [style*="rgba(255,255,255,0.4"], body.hc-mode [style*="rgba(255,255,255,0.3"], body.hc-mode [style*="rgba(255,255,255,0.2"] { color: rgba(255,255,255,0.94) !important; }
body.hc-mode [style*="border: 1px solid rgba(255,255,255,0.0"] { border-color: rgba(255,255,255,0.3) !important; }
body.hc-mode [style*="border-top: 1px solid rgba(255,255,255,0.0"] { border-top-color: rgba(255,255,255,0.28) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE (Upgrade 11)
   De app is volledig opgebouwd met dark-mode INLINE-styles (geen CSS
   custom properties), dus — net als hc-mode — werkt light mode via
   attribuutselectors die de meest voorkomende inline-kleurpatronen
   overschrijven. Dit dekt de kernoppervlakken (achtergrond, tekst,
   panelen, randen, inputs) leesbaar op licht; niet elke tint wordt
   1:1 geraakt, maar het geheel is bruikbaar en consistent.
   Toggle: SC.toggleLightMode() → body.light-mode (app-shell.js). ══ */
body.light-mode { background: #eef0f8; color: #14152a; }
/* Sfeerlagen (sterrenhemel, aurora, vignette, grain) temperen op licht */
body.light-mode #star-canvas { opacity: .1; }
body.light-mode > div[style*="auroraDrift"] { opacity: .16 !important; }
body.light-mode > div[style*="radial-gradient(130%"] { display: none !important; }
body.light-mode > div[style*="feTurbulence"] { opacity: .02 !important; }
/* Hoofd-content: de donkere radial-gradient uit app-shell overschrijven */
body.light-mode main#main-scroll { background: radial-gradient(1200px 760px at 80% -12%, rgba(99,102,241,0.10), transparent 60%), radial-gradient(1000px 640px at 8% 6%, rgba(93,202,165,0.08), transparent 55%), #eef0f8 !important; }
/* Witte tekst → donker */
body.light-mode [style*="color:#fff"], body.light-mode [style*="color: #fff"],
body.light-mode [style*="color:#ffffff"], body.light-mode [style*="color: #ffffff"] { color: #14152a !important; }
body.light-mode [style*="color:rgba(255,255,255,0.9"], body.light-mode [style*="color: rgba(255,255,255,0.9"],
body.light-mode [style*="color:rgba(255,255,255,0.8"], body.light-mode [style*="color:rgba(255,255,255,0.7"] { color: #1f2140 !important; }
body.light-mode [style*="color:rgba(255,255,255,0.6"], body.light-mode [style*="color:rgba(255,255,255,0.5"],
body.light-mode [style*="color:rgba(255,255,255,0.45"], body.light-mode [style*="color:rgba(255,255,255,0.4"],
body.light-mode [style*="color:rgba(255,255,255,0.35"], body.light-mode [style*="color:rgba(255,255,255,0.3"] { color: #565b7e !important; }
/* Donkere paneel-gradients/kaarten (sidebar, topbar, dropdowns, overlays) → wit */
body.light-mode [style*="#0d0b26"], body.light-mode [style*="#0b0a1f"],
body.light-mode [style*="#14122e"], body.light-mode [style*="#0f0d24"],
body.light-mode [style*="#12102a"] { background: #ffffff !important; }
/* Semi-transparante witte oppervlakken → semi-transparant donker op licht */
body.light-mode [style*="background:rgba(255,255,255,0.0"], body.light-mode [style*="background: rgba(255,255,255,0.0"] { background: rgba(20,21,42,0.04) !important; }
body.light-mode [style*="background:rgba(255,255,255,0.1"], body.light-mode [style*="background: rgba(255,255,255,0.1"] { background: rgba(20,21,42,0.06) !important; }
/* Randen */
body.light-mode [style*="1px solid rgba(255,255,255"] { border-color: rgba(20,21,42,0.12) !important; }
/* Inputs, links, selectie */
body.light-mode input, body.light-mode textarea, body.light-mode select { color: #14152a; }
body.light-mode input::placeholder, body.light-mode textarea::placeholder { color: rgba(20,21,42,0.42); }
body.light-mode ::selection { background: rgba(93,202,165,0.3); color: #14152a; }
body.light-mode a { color: #4b4fd6; }
body.light-mode a:hover { color: #3a3ec4; }
/* Scrollbar op licht */
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(20,21,42,0.14); background-clip: padding-box; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* Anti-flikker: onderdruk de fadeUp-entrance bij same-screen re-renders (app-shell
   zet .suppress-enter op #app-root als het scherm NIET wisselde). De !important in
   een stylesheet wint van de inline animation:fadeUp zonder !important. Andere
   animaties (floaty, auraPulse, typingDot, …) blijven gewoon doorlopen. */
#app-root.suppress-enter [style*="fadeUp"] { animation: none !important; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes auraPulse { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: .62; transform: scale(1.05); } }
@keyframes medalRays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes medalSheen { 0% { transform: translateX(-140%) rotate(18deg); } 60%,100% { transform: translateX(140%) rotate(18deg); } }
@keyframes medalPop { 0% { opacity: 0; transform: scale(.4) rotate(-14deg); } 55% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes sparkFloat { 0% { opacity: 0; transform: translateY(6px) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) scale(1.1); } }
@keyframes ribbonSway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes confBurst { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) rotate(540deg); opacity: 0; } }
@keyframes walkAcross { 0% { left: -5%; transform: scaleX(1); } 47% { left: 90%; transform: scaleX(1); } 50% { left: 90%; transform: scaleX(-1); } 97% { left: -5%; transform: scaleX(-1); } 100% { left: -5%; transform: scaleX(1); } }
@keyframes walkBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 25% { transform: translateY(-7px) rotate(0deg); } 50% { transform: translateY(0) rotate(4deg); } 75% { transform: translateY(-7px) rotate(0deg); } }
@keyframes walkShadow { 0%,100% { transform: scaleX(1); opacity: .5; } 25%,75% { transform: scaleX(.65); opacity: .25; } 50% { transform: scaleX(1); opacity: .5; } }
@keyframes typingDot { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
/* Chat-bericht fade-in (Upgrade 11): elk nieuw bericht schuift subtiel omhoog in. */
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg-in { animation: chatMsgIn .2s ease both; }
@keyframes blobDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-20px) scale(1.14); } }
@keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sheen { 0% { left: -60%; } 55%,100% { left: 130%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes auroraDrift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(5vw,3vh) scale(1.08); } 66% { transform: translate(-4vw,-3vh) scale(1.05); } }
@media print {
  body.report-print * { visibility: hidden !important; }
  body.report-print [data-report], body.report-print [data-report] * { visibility: visible !important; }
  body.report-print [data-report] { position: fixed !important; left: 0 !important; top: 0 !important; right: auto !important; max-width: 660px !important; box-shadow: none !important; border: none !important; }
  body.report-print [data-report-overlay] { background: #fff !important; backdrop-filter: none !important; }
}
/* Hover-varianten uit het prototype (style-hover) — als utility-klassen */
.hv-bg045:hover { background: rgba(255,255,255,0.045) !important; }
.hv-bg05:hover { background: rgba(255,255,255,0.05) !important; }
.hv-bg06:hover { background: rgba(255,255,255,0.06) !important; }
.hv-bg07:hover { background: rgba(255,255,255,0.07) !important; }
.hv-bg08:hover { background: rgba(255,255,255,0.08) !important; }
.hv-bg10:hover { background: rgba(255,255,255,0.1) !important; }
.hv-bg12:hover { background: rgba(255,255,255,0.12) !important; }
.hv-bg14:hover { background: rgba(255,255,255,0.14) !important; }
.hv-white:hover { color: #fff !important; }
.hv-up:hover { transform: translateY(-1px); }
.hv-up2:hover { transform: translateY(-2px); }
.hv-up3:hover { transform: translateY(-3px); }
.hv-op9:hover { opacity: 0.9 !important; }
.hv-op1:hover { opacity: 1 !important; }
.hv-logout:hover { color: #fff !important; background: rgba(239,68,68,0.16) !important; border-color: rgba(239,68,68,0.4) !important; }
.hv-danger:hover { background: rgba(239,68,68,0.2) !important; color: #fff !important; }
.hv-danger15:hover { background: rgba(239,68,68,0.15) !important; }
.hv-teal:hover { background: rgba(93,202,165,0.14) !important; color: #5DCAA5 !important; }
.hv-teal-border:hover { background: rgba(93,202,165,0.14) !important; border-color: rgba(93,202,165,0.4) !important; color: #5DCAA5 !important; }
.hv-border-teal:hover { border-color: rgba(93,202,165,0.5) !important; }
.hv-border18:hover { border-color: rgba(255,255,255,0.18) !important; }
.hv-border18-bg:hover { border-color: rgba(255,255,255,0.18) !important; background: rgba(255,255,255,0.06) !important; }
.hv-purple:hover { background: rgba(196,139,255,0.2) !important; }
.hv-purple22:hover { background: rgba(196,139,255,0.22) !important; }
.hv-purple18:hover { background: rgba(196,139,255,0.18) !important; }
.hv-purple10:hover { background: rgba(196,139,255,0.1) !important; }
.hv-indigo:hover { background: rgba(99,102,241,0.22) !important; }
.hv-violet:hover { background: rgba(139,92,246,0.22) !important; }
.hv-violet-card:hover { border-color: #8b5cf6 !important; background: rgba(139,92,246,0.1) !important; }
.hv-gold:hover { background: rgba(245,181,61,0.14) !important; border-color: rgba(245,181,61,0.4) !important; color: #f5b53d !important; }
.hv-lift-border:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18) !important; }
.hv-kpi:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 20px 40px rgba(0,0,0,0.36) !important; }
.hv-agent-border:hover { border-color: var(--hc, #5DCAA5) !important; }
.hv-agent-card:hover { border-color: var(--hc, #5DCAA5) !important; transform: translateY(-7px); box-shadow: 0 22px 40px var(--hs, rgba(93,202,165,0.22)) !important; }
.hv-agent-bg:hover { border-color: var(--hc, #5DCAA5) !important; background: rgba(255,255,255,0.07) !important; }
.hv-color-agent:hover { color: var(--hc, #5DCAA5) !important; }
.hv-row:hover { background: rgba(255,255,255,0.03) !important; }
.hv-border16:hover { border-color: rgba(255,255,255,0.16) !important; }
.hero-cta:hover { transform: translateY(-2px); }
.sheen-btn { position: relative; overflow: hidden; }
.sheen-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); animation: sheen 3.4s ease-in-out infinite; }

/* ── Accessibility (Upgrade 04) ── */
/* Skip-link: onzichtbaar tot hij focus krijgt (Tab als eerste actie). */
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: #5DCAA5; color: #04231b; font-size: 13px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 26px rgba(0,0,0,0.5); transition: top .18s ease; }
.skip-link:focus { top: 12px; color: #04231b; outline: 2px solid #fff; outline-offset: 2px; }
/* Alleen voor schermlezers — visueel verborgen, wel voorleesbaar. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Meldingen/alerts die subtiel van boven binnenschuiven. */
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* Touch-doelen op mobiel minimaal 44×44px (WCAG 2.5.5). */
@media (max-width: 480px) {
  .tap44 { min-width: 44px; min-height: 44px; }
}