/* =========================
   GAYZZEE — themes.css (v5.1 ULTRA WOW + KICKOFF SMOOTH)
   - 4 vaste identiteiten + kickoff
   - FIX: geen "page jump" meer
   - Kickoff achtergrond beweegt vloeiend (zonder layout transform)
   ========================= */

:root{
  --radius:16px;

  --bg:#05070d;
  --bg2:#0b0f18;

  --txt:#eaf1ff;
  --muted: rgba(234,241,255,.70);

  --panel: rgba(255,255,255,.045);
  --panel2: rgba(255,255,255,.070);
  --line: rgba(255,255,255,.12);

  --accent:#2aa7ff;
  --accentSoft: rgba(42,167,255,.18);
  --accentLine: rgba(42,167,255,.45);

  --danger: rgba(255,70,70,.16);
  --dangerLine: rgba(255,70,70,.44);

  --warn: rgba(255,220,120,.14);
  --warnLine: rgba(255,220,120,.36);

  --ok: rgba(43,210,122,.18);
  --okLine: rgba(43,210,122,.46);

  --shadow: 0 22px 90px rgba(0,0,0,.65);
  --glow:
    0 0 0 1px rgba(255,255,255,.05),
    0 18px 80px rgba(0,0,0,.60);

  --overlayDim: rgba(0,0,0,.74);

  --inputBg: rgba(0,0,0,.30);
  --inputLine: rgba(255,255,255,.16);

  --btnBg: rgba(255,255,255,.07);
  --btnLine: rgba(255,255,255,.16);
  --btnTxt: #fff;

  --badgeBg: rgba(255,255,255,.07);
  --badgeLine: rgba(255,255,255,.14);

  --scene:
    radial-gradient(1200px 700px at 20% -10%, rgba(42,167,255,.18), transparent 65%),
    radial-gradient(900px 520px at 90% 0%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* scrollbar-jump killer */
html{
  scrollbar-gutter: stable;
}

/* ---------- Global base ---------- */
html, body{
  background: var(--bg);
  color: var(--txt);
}

body{
  position:relative;
  background: var(--scene);
  background-attachment: fixed;
  overflow-x:hidden;
}

/* Cinematic scene layers */
body::before{
  content:"";
  position:fixed;
  inset:-30px;
  z-index:-3;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(1100px 700px at 80% 20%, rgba(255,255,255,.04), transparent 65%),
    radial-gradient(1400px 900px at 50% 120%, rgba(0,0,0,.42), transparent 60%);
  filter: blur(0px);
  opacity:1;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 14%, rgba(255,255,255,.09) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 18%, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 34%, rgba(255,255,255,.07) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 78%, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 76%, rgba(255,255,255,.08) 0 1px, transparent 2px),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.012) 0 1px,
      transparent 1px 6px
    );
  opacity:.50;
  mix-blend-mode: overlay;
  pointer-events:none;
}

@keyframes gzFloatSlow{
  0%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(0,-10px,0) }
  100%{ transform: translate3d(0,0,0) }
}
@keyframes gzHue{
  0%{ filter: hue-rotate(0deg) }
  50%{ filter: hue-rotate(12deg) }
  100%{ filter: hue-rotate(0deg) }
}
@keyframes gzShimmer{
  0%{ background-position: 0% 50% }
  100%{ background-position: 140% 50% }
}

/* ---------- Surfaces & depth ---------- */
.hdr{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)),
    rgba(0,0,0,.25) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
}

.kShell, .zbl, .zbr, .panel, .card, .placeholder, .chatMsg, .rowItem, .camBox{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  box-shadow: var(--glow);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
}

.kShell:hover, .panel:hover, .placeholder:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 36px color-mix(in srgb, var(--accent) 12%, transparent),
    0 22px 90px rgba(0,0,0,.65);
}

.kHead, .mHead{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.02),
      rgba(255,255,255,.04)
    ) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.profile .panel{
  background:
    radial-gradient(820px 380px at 0% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--panel) !important;
}

/* ---------- Inputs ---------- */
input.search, input.chatInput, input.inp, #inboxInput, #modDmInput{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--inputBg) !important;
  border: 1px solid var(--inputLine) !important;
  color: var(--txt) !important;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
input.search:focus, input.chatInput:focus, input.inp:focus, #inboxInput:focus, #modDmInput:focus{
  outline: none;
  border-color: var(--accentLine) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent),
    inset 0 0 0 1px rgba(0,0,0,.18);
}
input::placeholder{
  color: color-mix(in srgb, var(--txt) 35%, transparent);
}

/* ---------- Buttons ---------- */
.btn,.btnP,.btnD,.btnW,.miniBtn{
  border-radius: 14px;
  border: 1px solid var(--btnLine) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    var(--btnBg) !important;
  color: var(--btnTxt) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.12),
    0 10px 35px rgba(0,0,0,.26);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover,.btnP:hover,.btnD:hover,.btnW:hover,.miniBtn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.14),
    0 0 30px color-mix(in srgb, var(--accent) 12%, transparent),
    0 18px 60px rgba(0,0,0,.34);
}
.btn:active,.btnP:active,.btnD:active,.btnW:active,.miniBtn:active{
  transform: translateY(0px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18),
    0 8px 24px rgba(0,0,0,.28);
}

.btnP{
  border-color: var(--accentLine) !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.10)),
      color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.06)),
      color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.10))
    ) !important;
  background-size: 220% 100% !important;
  animation: gzShimmer 2.8s linear infinite;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 16%, transparent),
    0 18px 70px rgba(0,0,0,.45);
}
.btnD{
  background:
    linear-gradient(90deg, rgba(255,80,80,.28), rgba(255,255,255,.04), rgba(255,80,80,.28)) !important;
  border-color: var(--dangerLine) !important;
}
.btnW{
  background:
    linear-gradient(90deg, rgba(255,220,120,.22), rgba(255,255,255,.04), rgba(255,220,120,.22)) !important;
  border-color: var(--warnLine) !important;
}

/* ---------- Pills & badges ---------- */
.pill, .badge{
  border-radius: 999px;
  border: 1px solid var(--badgeLine) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    var(--badgeBg) !important;
  color: var(--txt) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.pill.ok{ border-color: var(--okLine) !important; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)), var(--ok) !important; }
.pill.warn{ border-color: var(--warnLine) !important; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)), var(--warn) !important; }
.pill.danger{ border-color: var(--dangerLine) !important; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)), var(--danger) !important; }

.badge.bNew{ border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.15)) !important; }
.badge.bLive{ border-color: var(--dangerLine) !important; }
.badge.bPause{ border-color: var(--warnLine) !important; }

/* ---------- Overlay / modal ---------- */
.overlay{ background: var(--overlayDim) !important; }
.modal{
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 140%, rgba(255,255,255,.10)) !important;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--bg) !important;
  box-shadow: var(--shadow);
  animation: gzFloatSlow 6s ease-in-out infinite;
}

/* ---------- Select / dropdown (readable) ---------- */
select{
  width:100%;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    var(--inputBg) !important;
  color: var(--txt) !important;
  border: 1px solid var(--inputLine) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
}
select:focus{
  outline:none;
  border-color: var(--accentLine) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent),
    inset 0 0 0 1px rgba(0,0,0,.16);
}
select option{
  background: var(--bg) !important;
  color: var(--txt) !important;
}
.toggle input{ accent-color: var(--accent); }

/* =========================================
   THEME: KICKOFF — "FULL 3D NEON STAGE" (SMOOTH)
   - GEEN layout animation meer
   - Alleen background layers bewegen
   ========================================= */
@keyframes gzKickPulse{
  0%{ filter: drop-shadow(0 0 16px rgba(0,229,255,.16)) drop-shadow(0 0 38px rgba(255,0,200,.10)); }
  50%{ filter: drop-shadow(0 0 26px rgba(0,229,255,.24)) drop-shadow(0 0 70px rgba(255,0,200,.16)); }
  100%{ filter: drop-shadow(0 0 16px rgba(0,229,255,.16)) drop-shadow(0 0 38px rgba(255,0,200,.10)); }
}
@keyframes gzKickBG{
  0%{
    background-position:
      10% 0%,
      80% 10%,
      50% 110%,
      0% 0%;
  }
  50%{
    background-position:
      20% 8%,
      70% 0%,
      55% 100%,
      0% 0%;
  }
  100%{
    background-position:
      12% 0%,
      82% 14%,
      48% 112%,
      0% 0%;
  }
}
@keyframes gzKickStars{
  0%{ transform: translate3d(0,0,0); opacity:.40; }
  50%{ transform: translate3d(0,-6px,0); opacity:.55; }
  100%{ transform: translate3d(0,0,0); opacity:.42; }
}
@keyframes gzKickHalo{
  0%{ opacity:.35; }
  50%{ opacity:.65; }
  100%{ opacity:.35; }
}

body[data-theme="kickoff"]{
  color-scheme: dark;

  --bg:#02010a;
  --bg2:#050018;

  --txt:#f3f7ff;
  --muted: rgba(243,247,255,.72);

  --panel: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.13);

  --accent:#00e5ff;
  --accentSoft: rgba(0,229,255,.20);
  --accentLine: rgba(0,229,255,.55);

  --danger: rgba(255,  0, 120,.18);
  --dangerLine: rgba(255,0,120,.46);

  --warn: rgba(255,220,120,.14);
  --warnLine: rgba(255,220,120,.34);

  --inputBg: rgba(0,0,0,.34);
  --inputLine: rgba(0,229,255,.22);

  --btnBg: rgba(255,255,255,.06);
  --btnLine: rgba(0,229,255,.22);

  --badgeBg: rgba(0,229,255,.08);
  --badgeLine: rgba(0,229,255,.22);

  --overlayDim: rgba(0,0,0,.82);

  --glow:
    0 0 0 1px rgba(0,229,255,.12),
    0 0 40px rgba(0,229,255,.10),
    0 0 90px rgba(255,0,200,.10),
    0 22px 110px rgba(0,0,0,.74);

  /* scene zelf beweegt via background-position animatie (smooth) */
  --scene:
    radial-gradient(1200px 760px at 18% -12%, rgba(0,229,255,.30), transparent 60%),
    radial-gradient(1000px 620px at 82% -8%, rgba(255,0,200,.22), transparent 62%),
    radial-gradient(1000px 620px at 50% 110%, rgba(0,180,255,.14), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body[data-theme="kickoff"]{
  background: var(--scene);
  background-attachment: fixed;
  background-size: 120% 120%, 120% 120%, 120% 120%, 100% 100%;
  animation: gzKickBG 18s ease-in-out infinite;
}

/* extra floating haze layer */
body[data-theme="kickoff"]::before{
  inset:-40px;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(0,229,255,.16), transparent 62%),
    radial-gradient(900px 520px at 90% 10%, rgba(255,0,200,.12), transparent 62%),
    radial-gradient(900px 520px at 55% 120%, rgba(0,180,255,.08), transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,.56), transparent 60%);
  animation: gzKickBG 22s ease-in-out infinite;
}

/* stars/scan overlay: alleen translate, fixed => geen layout reflow */
body[data-theme="kickoff"]::after{
  mix-blend-mode: screen;
  opacity:.50;
  animation: gzKickStars 8.5s ease-in-out infinite;
}

/* Kickoff header: halo zonder translate (geen kans op overscroll/jumps) */
body[data-theme="kickoff"] .hdr{
  position:relative;
  overflow:hidden;
  border-bottom-color: rgba(0,229,255,.22) !important;
  box-shadow:
    0 18px 70px rgba(0,0,0,.45),
    0 0 60px rgba(0,229,255,.10);
}
body[data-theme="kickoff"] .hdr::after{
  content:"";
  position:absolute;
  inset:-18px;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 35% 50%, rgba(0,229,255,.14), transparent 70%),
    radial-gradient(520px 220px at 42% 50%, rgba(255,0,200,.10), transparent 72%);
  animation: gzKickHalo 5.8s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* Logo pulse */
body[data-theme="kickoff"] .logoImg{
  animation: gzKickPulse 3.2s ease-in-out infinite;
  transform: translateZ(0);
}

body[data-theme="kickoff"] .btnP{
  box-shadow:
    0 0 0 1px rgba(0,229,255,.26),
    0 0 26px rgba(0,229,255,.18),
    0 0 55px rgba(255,0,200,.12),
    0 18px 70px rgba(0,0,0,.48);
}
body[data-theme="kickoff"] .btnD{
  background: linear-gradient(90deg, rgba(255,0,120,.30), rgba(255,255,255,.04), rgba(255,0,120,.30)) !important;
  border-color: rgba(255,0,120,.52) !important;
}

/* Kickoff dropdown options */
body[data-theme="kickoff"] select option{ background:#02010a !important; color:#f3f7ff !important; }

/* =========================================
   THEME: DARK — "GLOW IN THE DARK" (NEON AURORA)
   ========================================= */
body[data-theme="dark"]{
  color-scheme: dark;

  --bg:#02040a;
  --bg2:#070b14;

  --txt:#eaffff;
  --muted: rgba(234,255,255,.70);

  --panel: rgba(255,255,255,.040);
  --line: rgba(140,255,240,.18);

  --accent:#2cffc9;
  --accentSoft: rgba(44,255,201,.20);
  --accentLine: rgba(44,255,201,.60);

  --danger: rgba(255,70,120,.18);
  --dangerLine: rgba(255,70,120,.46);

  --warn: rgba(255,220,120,.14);
  --warnLine: rgba(255,220,120,.34);

  --inputBg: rgba(0,0,0,.34);
  --inputLine: rgba(140,255,240,.20);

  --btnBg: rgba(255,255,255,.06);
  --btnLine: rgba(140,255,240,.18);

  --badgeBg: rgba(44,255,201,.08);
  --badgeLine: rgba(44,255,201,.22);

  --overlayDim: rgba(0,0,0,.78);

  --glow:
    0 0 0 1px rgba(44,255,201,.10),
    0 0 40px rgba(44,255,201,.10),
    0 0 90px rgba(120,80,255,.10),
    0 22px 100px rgba(0,0,0,.70);

  --scene:
    radial-gradient(1200px 760px at 18% -12%, rgba(44,255,201,.34), transparent 60%),
    radial-gradient(1000px 620px at 82% -8%, rgba(120,80,255,.28), transparent 62%),
    radial-gradient(1000px 620px at 50% 110%, rgba(0,180,255,.14), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body[data-theme="dark"]::before{
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(44,255,201,.18), transparent 62%),
    radial-gradient(900px 520px at 90% 10%, rgba(120,80,255,.16), transparent 62%),
    radial-gradient(900px 520px at 55% 120%, rgba(0,180,255,.08), transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,.48), transparent 60%);
  animation: gzFloatSlow 7.5s ease-in-out infinite, gzHue 9s ease-in-out infinite;
}

body[data-theme="dark"] .btnP{
  box-shadow:
    0 0 0 1px rgba(44,255,201,.22),
    0 0 26px rgba(44,255,201,.18),
    0 0 55px rgba(120,80,255,.12),
    0 18px 70px rgba(0,0,0,.45);
}

/* =========================================
   THEME: LIGHT — "STRAND & ZEE" (SUN + WAVES)
   ========================================= */
body[data-theme="light"]{
  color-scheme: light;

  --bg:#f7fbff;
  --bg2:#fff1d8;

  --txt:#071823;
  --muted: rgba(7,24,35,.62);

  --panel: rgba(255,255,255,.82);
  --line: rgba(7,24,35,.16);

  --accent:#039bff;
  --accentSoft: rgba(3,155,255,.18);
  --accentLine: rgba(3,155,255,.40);

  --ok: rgba(0,170,120,.14);
  --okLine: rgba(0,170,120,.34);

  --warn: rgba(255,180,70,.22);
  --warnLine: rgba(255,180,70,.44);

  --danger: rgba(255,70,70,.14);
  --dangerLine: rgba(255,70,70,.34);

  --inputBg: rgba(255,255,255,.95);
  --inputLine: rgba(7,24,35,.18);

  --btnBg: rgba(255,255,255,.95);
  --btnLine: rgba(7,24,35,.18);
  --btnTxt: #071823;

  --badgeBg: rgba(255,255,255,.95);
  --badgeLine: rgba(7,24,35,.14);

  --overlayDim: rgba(0,0,0,.44);

  --glow:
    0 18px 70px rgba(3,155,255,.12),
    0 12px 28px rgba(0,0,0,.08);

  --scene:
    radial-gradient(900px 520px at 18% -10%, rgba(255,210,120,.72), transparent 62%),
    radial-gradient(1200px 740px at 76% 6%, rgba(3,155,255,.34), transparent 62%),
    radial-gradient(900px 520px at 92% 75%, rgba(0,210,215,.22), transparent 60%),
    radial-gradient(1200px 700px at 20% 115%, rgba(255,220,160,.72), transparent 62%),
    repeating-linear-gradient(
      180deg,
      rgba(3,155,255,.06) 0 10px,
      rgba(255,255,255,0) 10px 28px
    ),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body[data-theme="light"]::after{
  opacity:.28;
  mix-blend-mode: multiply;
}

body[data-theme="light"] .kShell,
body[data-theme="light"] .zbl,
body[data-theme="light"] .zbr,
body[data-theme="light"] .panel,
body[data-theme="light"] .placeholder,
body[data-theme="light"] .card{
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.65),
    0 18px 60px rgba(3,155,255,.10),
    0 10px 26px rgba(0,0,0,.08);
}

body[data-theme="light"] .hdr{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62)) !important;
  border-bottom-color: rgba(7,24,35,.12) !important;
  box-shadow: 0 18px 70px rgba(3,155,255,.10);
}

/* =========================================
   THEME: HALLOWEEN — "MIDNIGHT BLUE HORROR" (FOG + BLOOD)
   ========================================= */
body[data-theme="halloween"]{
  color-scheme: dark;

  --bg:#01020a;
  --bg2:#070a18;

  --txt:#eaf0ff;
  --muted: rgba(234,240,255,.68);

  --panel: rgba(255,255,255,.038);
  --line: rgba(120,160,255,.18);

  --accent:#ff2f2f;
  --accentSoft: rgba(255,47,47,.18);
  --accentLine: rgba(255,47,47,.58);

  --warn: rgba(255,120,40,.18);
  --warnLine: rgba(255,120,40,.46);

  --danger: rgba(255,47,47,.18);
  --dangerLine: rgba(255,47,47,.52);

  --inputBg: rgba(0,0,0,.36);
  --inputLine: rgba(120,160,255,.22);

  --btnBg: rgba(120,160,255,.06);
  --btnLine: rgba(120,160,255,.18);

  --badgeBg: rgba(255,47,47,.08);
  --badgeLine: rgba(255,47,47,.22);

  --overlayDim: rgba(0,0,0,.82);

  --glow:
    0 0 0 1px rgba(120,160,255,.10),
    0 0 70px rgba(120,160,255,.10),
    0 0 110px rgba(255,47,47,.08),
    0 22px 110px rgba(0,0,0,.76);

  --scene:
    radial-gradient(900px 520px at 78% -10%, rgba(120,160,255,.34), transparent 62%),
    radial-gradient(1200px 700px at 40% 30%, rgba(255,255,255,.06), transparent 68%),
    radial-gradient(900px 520px at 12% 70%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(900px 520px at 18% 10%, rgba(255,47,47,.18), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body[data-theme="halloween"]::before{
  background:
    radial-gradient(1200px 700px at 30% 10%, rgba(255,255,255,.07), transparent 68%),
    radial-gradient(1200px 700px at 70% 40%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(900px 520px at 20% 0%, rgba(255,47,47,.14), transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,.52), transparent 60%);
  filter: blur(2px);
  animation: gzFloatSlow 5.5s ease-in-out infinite;
}

body[data-theme="halloween"] .btnD{
  box-shadow:
    0 0 0 1px rgba(255,47,47,.24),
    0 0 28px rgba(255,47,47,.16),
    0 18px 70px rgba(0,0,0,.46);
}

/* =========================================
   THEME: CHRISTMAS — "WARM WINTER LIGHT" (GOLD + SNOW)
   ========================================= */
body[data-theme="christmas"]{
  color-scheme: dark;

  --bg:#04060a;
  --bg2:#0d1016;

  --txt:#fff7ec;
  --muted: rgba(255,247,236,.72);

  --panel: rgba(255,255,255,.045);
  --line: rgba(255,236,210,.18);

  --accent:#ffcc66;
  --accentSoft: rgba(255,204,102,.20);
  --accentLine: rgba(255,204,102,.52);

  --ok: rgba(65,220,150,.16);
  --okLine: rgba(65,220,150,.42);

  --danger: rgba(255,90,90,.18);
  --dangerLine: rgba(255,90,90,.44);

  --inputBg: rgba(0,0,0,.30);
  --inputLine: rgba(255,236,210,.20);

  --btnBg: rgba(255,204,102,.10);
  --btnLine: rgba(255,204,102,.28);

  --badgeBg: rgba(255,204,102,.08);
  --badgeLine: rgba(255,204,102,.22);

  --overlayDim: rgba(0,0,0,.78);

  --glow:
    0 0 0 1px rgba(255,236,210,.08),
    0 0 70px rgba(255,204,102,.12),
    0 22px 110px rgba(0,0,0,.76);

  --scene:
    radial-gradient(900px 520px at 22% -10%, rgba(255,204,102,.40), transparent 62%),
    radial-gradient(900px 520px at 66% 0%, rgba(255,120,80,.16), transparent 62%),
    radial-gradient(1200px 700px at 60% 115%, rgba(180,220,255,.12), transparent 62%),
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 12%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 22%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 38%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 78%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body[data-theme="christmas"]::before{
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(255,204,102,.18), transparent 62%),
    radial-gradient(900px 520px at 80% 20%, rgba(180,220,255,.08), transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,.50), transparent 60%);
  animation: gzFloatSlow 6.8s ease-in-out infinite;
}

/* ---------- Per-theme option backgrounds (hard fix for dropdown) ---------- */
body[data-theme="light"] select option{ background:#ffffff !important; color:#071823 !important; }
body[data-theme="dark"] select option{ background:#02040a !important; color:#eaffff !important; }
body[data-theme="halloween"] select option{ background:#01020a !important; color:#eaf0ff !important; }
body[data-theme="christmas"] select option{ background:#04060a !important; color:#fff7ec !important; }
body[data-theme="kickoff"] select option{ background:#02010a !important; color:#f3f7ff !important; }

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .modal{ animation:none !important; }
  body::before{ animation:none !important; }
  .btnP{ animation:none !important; background-size: 100% 100% !important; }

  body[data-theme="kickoff"]{ animation:none !important; }
  body[data-theme="kickoff"]::before{ animation:none !important; }
  body[data-theme="kickoff"]::after{ animation:none !important; }
  body[data-theme="kickoff"] .logoImg{ animation:none !important; filter:none !important; }
  body[data-theme="kickoff"] .hdr::after{ animation:none !important; opacity:.35 !important; }
}
/* =========================================================
   KICKOFF OVERRIDE (PLAK HELEMAAL ONDERAAN themes.css)
   Doel:
   - 100% zichtbaar verschil (neon stage + grid + moving lights)
   - Vloeiende animatie (geen page jump)
   - Override dashboard.css indien nodig (via !important)
   ========================================================= */

@keyframes gzKickLights {
  0%   { background-position: 0% 0%, 100% 20%, 50% 120%, 0% 0%; filter:hue-rotate(0deg); }
  50%  { background-position: 20% 10%, 70% 0%, 55% 105%, 0% 0%; filter:hue-rotate(10deg); }
  100% { background-position: 0% 0%, 100% 20%, 50% 120%, 0% 0%; filter:hue-rotate(0deg); }
}
@keyframes gzKickGrid {
  0%   { transform: translate3d(0,0,0); opacity:.55; }
  50%  { transform: translate3d(0,-14px,0); opacity:.75; }
  100% { transform: translate3d(0,0,0); opacity:.60; }
}
@keyframes gzKickSweep {
  0%   { transform: translate3d(-12%,0,0) skewX(-14deg); opacity:.0; }
  20%  { opacity:.55; }
  60%  { opacity:.25; }
  100% { transform: translate3d(112%,0,0) skewX(-14deg); opacity:0; }
}
@keyframes gzKickPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(0,229,255,.18), 0 0 26px rgba(0,229,255,.12), 0 0 70px rgba(255,0,200,.10); }
  50%     { box-shadow: 0 0 0 1px rgba(0,229,255,.24), 0 0 36px rgba(0,229,255,.18), 0 0 120px rgba(255,0,200,.18); }
}

/* Kickoff kernkleuren (duidelijk anders dan dark) */
body[data-theme="kickoff"]{
  color-scheme: dark !important;

  --bg:#030015 !important;
  --bg2:#07002a !important;

  --txt:#f6fbff !important;
  --muted: rgba(246,251,255,.72) !important;

  --panel: rgba(255,255,255,.040) !important;
  --panel2: rgba(255,255,255,.070) !important;
  --line: rgba(0,229,255,.20) !important;

  --accent:#00e5ff !important;
  --accentLine: rgba(0,229,255,.60) !important;

  --dangerLine: rgba(255,0,120,.55) !important;
  --warnLine: rgba(255,220,120,.38) !important;

  --overlayDim: rgba(0,0,0,.86) !important;

  /* extreme “stage lights” background */
  background:
    radial-gradient(1200px 800px at 18% -10%, rgba(0,229,255,.38), transparent 60%),
    radial-gradient(1100px 740px at 82% -18%, rgba(255,0,200,.30), transparent 62%),
    radial-gradient(900px 620px at 50% 120%, rgba(160,90,255,.18), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;

  background-size: 140% 140%, 140% 140%, 140% 140%, 100% 100% !important;
  background-attachment: fixed !important;

  /* vloeiend, maar duidelijk */
  animation: gzKickLights 12s ease-in-out infinite !important;

  overflow-x:hidden;
}

/* extra lagen: grid + sweep light — fixed => geen layout “springen” */
body[data-theme="kickoff"]::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events:none;

  /* neon grid vloer + mist */
  background:
    /* mist */
    radial-gradient(900px 520px at 20% 20%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(900px 520px at 80% 20%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,.60), transparent 60%),

    /* grid */
    repeating-linear-gradient(90deg, rgba(0,229,255,.10) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg,  rgba(0,229,255,.08) 0 1px, transparent 1px 34px);

  transform-origin: 50% 100%;
  transform: perspective(900px) rotateX(58deg) translate3d(0,14vh,0);
  filter: blur(.0px);
  opacity:.55;

  animation: gzKickGrid 7.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

body[data-theme="kickoff"]::after{
  content:"";
  position: fixed;
  inset: -20% -30%;
  z-index: -2;
  pointer-events:none;

  /* moving spotlight sweep */
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,229,255,.18) 18%,
      rgba(255,0,200,.14) 50%,
      rgba(0,229,255,.18) 82%,
      transparent 100%
    );

  opacity:0;
  mix-blend-mode: screen;
  animation: gzKickSweep 6.8s ease-in-out infinite;
}

/* Maak “kickoff” panels echt 3D en anders */
body[data-theme="kickoff"] .hdr{
  background: rgba(5,0,25,.42) !important;
  border-bottom: 1px solid rgba(0,229,255,.28) !important;
  box-shadow:
    0 18px 80px rgba(0,0,0,.55),
    0 0 70px rgba(0,229,255,.12),
    0 0 120px rgba(255,0,200,.10) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
}

body[data-theme="kickoff"] .kShell,
body[data-theme="kickoff"] .zbl,
body[data-theme="kickoff"] .zbr,
body[data-theme="kickoff"] .panel,
body[data-theme="kickoff"] .card,
body[data-theme="kickoff"] .placeholder,
body[data-theme="kickoff"] .camBox{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    rgba(10,0,40,.18) !important;

  border: 1px solid rgba(0,229,255,.22) !important;
  box-shadow:
    0 0 0 1px rgba(0,229,255,.10),
    0 0 36px rgba(0,229,255,.10),
    0 0 88px rgba(255,0,200,.08),
    0 30px 120px rgba(0,0,0,.62) !important;

  backdrop-filter: blur(16px) saturate(150%) !important;
  transform: translateZ(0);
  animation: gzKickPulse 4.6s ease-in-out infinite;
}

/* Primary buttons worden “arcade neon” */
body[data-theme="kickoff"] .btnP{
  border-color: rgba(0,229,255,.55) !important;
  background:
    linear-gradient(90deg, rgba(0,229,255,.22), rgba(255,0,200,.14), rgba(0,229,255,.22)) !important;
  box-shadow:
    0 0 0 1px rgba(0,229,255,.20),
    0 0 28px rgba(0,229,255,.20),
    0 0 80px rgba(255,0,200,.12) !important;
}

/* Logo krijgt zichtbaar neon */
body[data-theme="kickoff"] .logoImg{
  filter:
    drop-shadow(0 0 14px rgba(0,229,255,.22))
    drop-shadow(0 0 34px rgba(255,0,200,.14)) !important;
}

/* Dropdown leesbaar */
body[data-theme="kickoff"] select,
body[data-theme="kickoff"] input.search,
body[data-theme="kickoff"] input.chatInput,
body[data-theme="kickoff"] input.inp{
  border-color: rgba(0,229,255,.28) !important;
}
body[data-theme="kickoff"] select option{
  background:#030015 !important;
  color:#f6fbff !important;
}

/* Reduce motion respecteren */
@media (prefers-reduced-motion: reduce){
  body[data-theme="kickoff"]{ animation:none !important; }
  body[data-theme="kickoff"]::before,
  body[data-theme="kickoff"]::after{ animation:none !important; }
  body[data-theme="kickoff"] .kShell,
  body[data-theme="kickoff"] .panel,
  body[data-theme="kickoff"] .placeholder,
  body[data-theme="kickoff"] .camBox{ animation:none !important; }
}
/* =========================================================
   HARD FIX — LIGHT THEME: Inbox/DM tekst is wit/onleesbaar
   Werkt op basis van "inbox"/"dm" in id/class (robust)
   ========================================================= */

body[data-theme="light"] :is(
  [id*="inbox"], [class*="inbox"],
  [id*="Inbox"], [class*="Inbox"],
  [id*="dm"], [class*="dm"],
  [id*="DM"], [class*="DM"]
){
  color: var(--txt) !important;
}

/* Alles binnen die containers ook forceren */
body[data-theme="light"] :is(
  [id*="inbox"], [class*="inbox"],
  [id*="Inbox"], [class*="Inbox"],
  [id*="dm"], [class*="dm"],
  [id*="DM"], [class*="DM"]
) *{
  color: var(--txt) !important;
}

/* Inputs/placeholder in inbox/dm */
body[data-theme="light"] :is(
  [id*="inbox"], [class*="inbox"],
  [id*="Inbox"], [class*="Inbox"],
  [id*="dm"], [class*="dm"],
  [id*="DM"], [class*="DM"]
) input,
body[data-theme="light"] :is(
  [id*="inbox"], [class*="inbox"],
  [id*="Inbox"], [class*="Inbox"],
  [id*="dm"], [class*="dm"],
  [id*="DM"], [class*="DM"]
) textarea{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(7,24,35,.18) !important;
  color: var(--txt) !important;
}

body[data-theme="light"] :is(
  [id*="inbox"], [class*="inbox"],
  [id*="Inbox"], [class*="Inbox"],
  [id*="dm"], [class*="dm"],
  [id*="DM"], [class*="DM"]
) input::placeholder,
body[data-theme="light"] :is(
  [id*="inbox"], [class*="inbox"],
  [id*="Inbox"], [class*="Inbox"],
  [id*="dm"], [class*="dm"],
  [id*="DM"], [class*="DM"]
) textarea::placeholder{
  color: rgba(7,24,35,.45) !important;
}

/* Buttons in inbox/dm blijven leesbaar in light */
body[data-theme="light"] :is(
  [id*="inbox"], [class*="inbox"],
  [id*="Inbox"], [class*="Inbox"],
  [id*="dm"], [class*="dm"],
  [id*="DM"], [class*="DM"]
) button{
  color: #071823 !important;
}

/* Optioneel: maak de inbox modal zelf iets “glass” maar licht */
body[data-theme="light"] :is(
  [id*="inbox"], [class*="inbox"],
  [id*="Inbox"], [class*="Inbox"],
  [id*="dm"], [class*="dm"],
  [id*="DM"], [class*="DM"]
){
  text-shadow: none !important;
}