/* ==================================================================
   glow-accents.css — Hochwertige grüne Akzente + Performance-Polish
   ==================================================================
   WHY: Letzte visuelle Verfeinerung. Jeder Effekt hier ist
   GPU-beschleunigt (nur transform/opacity/filter) und respektiert
   prefers-reduced-motion. Keine JS-Animationen, kein Layout-Thrashing.

   Architektur:
    1. Performance-Regeln (@media reduced-motion + hints)
    2. Global ambient glow (static, kein animation-tick)
    3. Match-Card accents (border glow + featured halo)
    4. Prediction badges (winner glow, highlight glow)
    5. Tab-Bar brand accent (active underline mit breath)
    6. Buttons (hover glow + focus ring)
    7. Modal / Drawer polish
    8. Kombi-Cards (3 Risiko-Lanes konsistent)
    9. Scrollbar styling
   10. Loading skeleton (GPU-only shimmer)
   ================================================================== */

/* ─────────────────────────────────────────────────────────────────
   PERF: Respect user's motion preferences
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   1. Ambient Global Background Glow
   Static gradient orbs — kein animation-tick, nur einmal gerendert.
   Ersetzt die inline body::before Rule mit einer reicheren Variante.
   ───────────────────────────────────────────────────────────────── */
body::before {
  background:
    /* Top green spotlight */
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(0,230,118,.12) 0%, transparent 55%),
    /* Bottom-right cyan glow */
    radial-gradient(ellipse 55% 45% at 92% 85%, rgba(64,196,255,.09) 0%, transparent 55%),
    /* Far-left subtle violet */
    radial-gradient(ellipse 45% 40% at 5% 40%, rgba(179,136,255,.06) 0%, transparent 60%) !important;
}

/* Top-of-page accent line — gradient line right under navbar */
.nb::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(64,196,255,.3) 20%,
    rgba(0,230,118,.55) 50%,
    rgba(255,215,64,.3) 80%,
    transparent 100%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   2. Match Card — Featured Halo + Smooth Hover
   Ersetzt die alte box-shadow-Animation durch GPU-effizientes
   ::before overlay mit opacity transition.
   ───────────────────────────────────────────────────────────────── */
.mc {
  /* GPU hint NUR für hover — sonst Memory-Leak bei 20+ cards */
  transition: transform 260ms cubic-bezier(.4,0,.2,1),
              background-color 260ms ease,
              border-color 260ms ease !important;
}

.mc::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(0,230,118,0) 0%,
    rgba(0,230,118,.18) 50%,
    rgba(64,196,255,0) 100%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
  z-index: -1;
}

.mc:hover::after {
  opacity: 1;
}

/* Featured card (high confidence) — permanenter subtle glow */
.mc.ft,
.mc.match-card--featured {
  border-color: rgba(0,230,118,.35) !important;
  background: linear-gradient(135deg, var(--s1) 0%, rgba(0,230,118,.035) 100%);
  position: relative;
}

.mc.ft::before,
.mc.match-card--featured::before {
  background: linear-gradient(180deg, var(--a) 0%, rgba(0,230,118,.3) 100%) !important;
  transform: scaleY(1) !important;
  filter: drop-shadow(0 0 4px rgba(0,230,118,.6));
}

.mc.ft:hover,
.mc.match-card--featured:hover {
  border-color: rgba(0,230,118,.55) !important;
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────
   3. Prediction Badge — Winner Glow
   Die Highlight-Badge (empfohlener Markt) bekommt subtle green ring.
   ───────────────────────────────────────────────────────────────── */
.pb.h,
.pred-badge--highlight {
  border-color: rgba(0,230,118,.45) !important;
  background: linear-gradient(135deg, var(--s3) 0%, rgba(0,230,118,.10) 100%) !important;
  position: relative;
}

.pb.h::after,
.pred-badge--highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(0,230,118,.25) inset,
              0 0 12px -4px rgba(0,230,118,.4);
  pointer-events: none;
}

/* Winner percentage value brighter */
.pb.h .pv,
.pred-badge--highlight .pred-badge__value {
  color: var(--a) !important;
  text-shadow: 0 0 8px rgba(0,230,118,.35);
}

/* ─────────────────────────────────────────────────────────────────
   4. Tab Bar — Active Tab breathing glow
   Active tab bekommt grünes Underline mit subtiler Atmung (opacity,
   kein size-change = kein repaint).
   ───────────────────────────────────────────────────────────────── */
.tb {
  position: relative;
  overflow: visible;
  transition: color 180ms ease, background-color 180ms ease !important;
}

.tb::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -3px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(0,230,118,0),
    var(--a),
    rgba(0,230,118,0));
  transform: translateX(-50%);
  transition: width 260ms cubic-bezier(.4,0,.2,1), opacity 260ms ease;
  pointer-events: none;
  border-radius: 1px;
}

.tb:hover::after {
  width: 80%;
  opacity: .5;
}

.tb.on {
  background: linear-gradient(180deg, var(--s1) 0%, rgba(0,230,118,.04) 100%) !important;
  border-color: rgba(0,230,118,.25) !important;
  box-shadow: 0 1px 0 0 rgba(0,230,118,.2) inset;
}

.tb.on::after {
  width: 80%;
  opacity: 1;
  animation: tabBreath 3.2s ease-in-out infinite;
}

@keyframes tabBreath {
  0%, 100% { opacity: 1;   filter: brightness(1); }
  50%      { opacity: .75; filter: brightness(1.15); }
}

/* ─────────────────────────────────────────────────────────────────
   5. Buttons — Hover glow + focus ring (global)
   Alle generischen Buttons bekommen konsistentes Feedback.
   ───────────────────────────────────────────────────────────────── */
.bp, .bs, .bkey, .mk-day-btn, .tm-intro__btn {
  position: relative;
  transition: transform 180ms cubic-bezier(.4,0,.2,1),
              background-color 180ms ease,
              color 180ms ease,
              border-color 180ms ease !important;
}

.bp:hover, .mk-day-btn:hover, .tm-intro__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -6px rgba(0,230,118,.5),
              0 0 0 1px rgba(0,230,118,.3) inset;
}

.bp:active, .mk-day-btn:active {
  transform: translateY(0);
}

/* Focus-visible ring (accessibility + modern vibe) */
.bp:focus-visible,
.bs:focus-visible,
.bkey:focus-visible,
.mk-day-btn:focus-visible,
.tb:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,230,118,.4),
              0 0 12px -2px rgba(0,230,118,.6);
  border-radius: 6px;
}

/* Intro-Button CTA upgrade */
.tm-intro__btn {
  position: relative;
  overflow: hidden;
}

.tm-intro__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,.22) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.tm-intro__btn:hover::before {
  transform: translateX(120%);
}

/* ─────────────────────────────────────────────────────────────────
   6. Form Inputs — Green focus glow
   ───────────────────────────────────────────────────────────────── */
.mi {
  transition: border-color 180ms ease, box-shadow 240ms ease !important;
}

.mi:focus {
  border-color: rgba(0,230,118,.6) !important;
  box-shadow: 0 0 0 3px rgba(0,230,118,.12),
              0 0 16px -4px rgba(0,230,118,.4);
}

/* ─────────────────────────────────────────────────────────────────
   7. Sidebar Cards — Subtle top accent
   Alle .sc cards bekommen einen dünnen grünen Akzent-Strich oben.
   ───────────────────────────────────────────────────────────────── */
.sc {
  position: relative;
  transition: border-color 200ms ease !important;
}

.sc::before {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,230,118,.35) 20%,
    rgba(0,230,118,.6) 50%,
    rgba(0,230,118,.35) 80%,
    transparent 100%);
  opacity: .5;
  pointer-events: none;
}

.sc:hover {
  border-color: rgba(0,230,118,.18);
}

/* Section title dot is existing — brighten it */
.st::before {
  background: var(--a) !important;
  box-shadow: 0 0 6px rgba(0,230,118,.6);
}

/* ─────────────────────────────────────────────────────────────────
   8. Confidence Bars — smooth GPU fill animation
   WHY: Die .cb/.cf Bars bekommen eine dezente Shimmer-Overlay —
   rein transform-basiert, keine width-animation.
   ───────────────────────────────────────────────────────────────── */
.cf, .confidence-bar__fill {
  position: relative;
  overflow: hidden;
}

.cf::after,
.confidence-bar__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.15) 50%,
    transparent 100%);
  transform: translateX(-100%);
  animation: cfShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

@keyframes cfShimmer {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}

/* PERF: Shimmer nur wenn Element sichtbar und user animates ok */
@media (prefers-reduced-motion: reduce) {
  .cf::after,
  .confidence-bar__fill::after { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   9. Scrollbar — Subtle green gradient
   ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(0,230,118,.35) 0%,
    rgba(0,200,90,.6) 50%,
    rgba(0,230,118,.35) 100%) !important;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(0,230,118,.5) 0%,
    var(--a) 50%,
    rgba(0,230,118,.5) 100%) !important;
}

/* ─────────────────────────────────────────────────────────────────
  10. Loading Skeleton — Smooth GPU shimmer
   Ersetzt pulse-opacity mit transform-shimmer (günstiger).
   ───────────────────────────────────────────────────────────────── */
.sk {
  position: relative;
  overflow: hidden;
  background: var(--s2) !important;
  background-size: 100% 100% !important;
  animation: none !important;
}

.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,230,118,.08) 35%,
    rgba(0,230,118,.12) 50%,
    rgba(0,230,118,.08) 65%,
    transparent 100%);
  transform: translateX(-100%);
  animation: skeletonSweep 1.6s ease-in-out infinite;
  will-change: transform;
}

@keyframes skeletonSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}

/* ─────────────────────────────────────────────────────────────────
  11. Terminal (agent-terminal) — green frame glow
   ───────────────────────────────────────────────────────────────── */
#agent-terminal,
#agent-terminal-mirror {
  position: relative;
}

#agent-terminal::before,
#agent-terminal-mirror::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(0,230,118,.25),
    transparent 30%,
    transparent 70%,
    rgba(64,196,255,.15));
  opacity: .4;
  pointer-events: none;
  z-index: -1;
}

/* ─────────────────────────────────────────────────────────────────
  12. Modal / Why-Pick Modal Polish
   Zentraler Glas-Effekt statt flach.
   ───────────────────────────────────────────────────────────────── */
.mod, #why-pick-modal {
  background: radial-gradient(ellipse 70% 50% at 50% 30%,
    rgba(0,230,118,.05) 0%,
    rgba(0,0,0,.78) 60%) !important;
}

.mbox {
  border: 1px solid rgba(0,230,118,.2) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.75),
              0 0 0 1px rgba(0,230,118,.15) inset,
              0 0 60px -20px rgba(0,230,118,.3);
}

/* ─────────────────────────────────────────────────────────────────
  13. Kombi-Lane Color-Coding (3 Risiko-Stufen konsistent)
   Conservative (cyan) · Safety (green) · Aggressive (red)
   Jede bekommt einen dezenten linken Balken.
   ───────────────────────────────────────────────────────────────── */
#claude-kombi-section {
  position: relative;
  padding-left: 14px;
}

#claude-kombi-section::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--a),
    rgba(0,230,118,.2));
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(0,230,118,.4);
}

#conservative-kombi-section {
  position: relative;
  padding-left: 14px;
}

#conservative-kombi-section::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--a3),
    rgba(64,196,255,.2));
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(64,196,255,.4);
}

#aggressive-kombi-section {
  position: relative;
  padding-left: 14px;
}

#aggressive-kombi-section::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--lose),
    rgba(255,82,82,.2));
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255,82,82,.4);
}

/* ─────────────────────────────────────────────────────────────────
  14. API-Key Button (navbar) — live-state glow
   ───────────────────────────────────────────────────────────────── */
.bkey.ok {
  background: linear-gradient(135deg,
    rgba(0,230,118,.08) 0%,
    rgba(0,230,118,.15) 100%) !important;
  border-color: rgba(0,230,118,.5) !important;
  box-shadow: 0 0 16px -4px rgba(0,230,118,.4),
              0 0 0 1px rgba(0,230,118,.2) inset;
}

.bkey:hover {
  border-color: rgba(0,230,118,.55) !important;
  box-shadow: 0 0 14px -4px rgba(0,230,118,.5);
}

/* ─────────────────────────────────────────────────────────────────
  15. Badges — live, key, db etc. get subtle glow
   ───────────────────────────────────────────────────────────────── */
.live-tag {
  background: linear-gradient(135deg,
    rgba(0,230,118,.12),
    rgba(0,230,118,.2)) !important;
  box-shadow: 0 0 10px -2px rgba(0,230,118,.4),
              0 0 0 1px rgba(0,230,118,.3) inset;
  animation: liveBreath 2s ease-in-out infinite !important;
}

@keyframes liveBreath {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.02); }
}

.db-tag {
  background: linear-gradient(135deg,
    rgba(255,215,64,.08),
    rgba(255,215,64,.14)) !important;
  box-shadow: 0 0 0 1px rgba(255,215,64,.3) inset;
}

/* ─────────────────────────────────────────────────────────────────
  16. Mini-Stats — subtle lift on hover
   Die 4 Gesamtquote/Letzte10/Vorhersagen/Ausstehend Kacheln im
   Modell-Panel bekommen interaktives Feedback.
   ───────────────────────────────────────────────────────────────── */
.mini-stat {
  transition: transform 220ms cubic-bezier(.4,0,.2,1),
              border-color 220ms ease,
              background-color 220ms ease !important;
}

.mini-stat:hover {
  transform: translateY(-1px);
  border-color: rgba(0,230,118,.3);
  background: linear-gradient(180deg, var(--s1), rgba(0,230,118,.03));
}

.mini-stat__value {
  transition: text-shadow 220ms ease;
}

.mini-stat:hover .mini-stat__value {
  text-shadow: 0 0 14px rgba(0,230,118,.35);
}

/* ─────────────────────────────────────────────────────────────────
  17. Filter Pills (Liga-Filter) — smooth active state
   ───────────────────────────────────────────────────────────────── */
.fp {
  transition: all 180ms cubic-bezier(.4,0,.2,1) !important;
}

.fp:hover {
  transform: translateY(-1px);
}

.fp.on {
  box-shadow: 0 0 12px -2px rgba(0,230,118,.45),
              0 0 0 1px rgba(0,230,118,.4) inset;
}

/* ─────────────────────────────────────────────────────────────────
  18. Toast notifications — slide-up with glow
   ───────────────────────────────────────────────────────────────── */
.toast {
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.7),
              0 0 0 1px rgba(0,230,118,.15) inset,
              0 0 24px -8px rgba(0,230,118,.35) !important;
  border-color: rgba(0,230,118,.3) !important;
}

/* ─────────────────────────────────────────────────────────────────
  19. xG-Strength-Bar — add subtle glow on favored side
   ───────────────────────────────────────────────────────────────── */
.mc .match-card__strength-bar,
.mc [style*="background:var(--s3)"][style*="height:4px"] {
  box-shadow: 0 0 8px -2px rgba(0,230,118,.25);
}

/* ─────────────────────────────────────────────────────────────────
  20. Performance safety — disable animations during scroll
   WHY: Wenn User schnell scrollt, pausieren wir alle nicht-
   essentiellen Effekte via CSS custom property toggle.
   ───────────────────────────────────────────────────────────────── */
@supports (container-type: inline-size) {
  /* Modern browsers — safe to use heavier effects */
  .mc {
    contain: layout style paint;
  }
  .sc {
    contain: layout style;
  }
}

/* Content-visibility für off-screen match cards = massiv schneller */
.ml > .match-group > .match-list > .mc {
  content-visibility: auto;
  contain-intrinsic-size: 130px;
}

/* ==================================================================
   GLOW & GLASS DESIGNER — PREMIUM UPGRADE (10 Effekte)
   Alle GPU-only, respektieren prefers-reduced-motion oben.
   ================================================================== */

/* ─────────────────────────────────────────────────────────────────
  21. NOISE-TEXTUR — Analog-Premium-Tiefe
   Hauchzarte Körnung über dem Body. Static SVG, 0 Performance-Cost.
   WHY: Ohne Noise wirken Dark-UIs "digital flach". Mit Noise
   entsteht ein materieller Depth-Eindruck wie gebürstetes Metall.
   ───────────────────────────────────────────────────────────────── */
body::after {
  /* Noise-Layer ÜBER der Aurora (ui-polish.css body::after ist Aurora) */
  /* Wir nutzen ein anderes Pseudo-Element: wir klinken uns via Outline ein */
}
.pw::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* ─────────────────────────────────────────────────────────────────
  22. Z-DEPTH HIERARCHY — Cards vs Panels vs Modals
   Jede Ebene hat eigenen Blur + Opacity → visuelle Tiefe.
   ───────────────────────────────────────────────────────────────── */

/* Level 1: Match-Cards — leichtestes Glass */
.mc,
.match-card {
  background: var(--glass-l1-bg, rgba(15,20,25,.55)) !important;
  backdrop-filter: var(--glass-l1-blur, blur(8px));
  -webkit-backdrop-filter: var(--glass-l1-blur, blur(8px));
  border-color: var(--glass-l1-border, rgba(255,255,255,.06)) !important;
}

/* Level 2: Sidebar Panels — stärkeres Glass */
.sc,
#betslip-panel,
#model-panel {
  background: var(--glass-l2-bg, rgba(18,24,32,.65)) !important;
  backdrop-filter: var(--glass-l2-blur, blur(16px) saturate(140%));
  -webkit-backdrop-filter: var(--glass-l2-blur, blur(16px) saturate(140%));
  border-color: var(--glass-l2-border, rgba(255,255,255,.09)) !important;
}

/* Level 3: Modals — maximale Tiefe */
.mbox,
#why-pick-modal > div:first-child {
  background: var(--glass-l3-bg, rgba(12,16,22,.80)) !important;
  backdrop-filter: var(--glass-l3-blur, blur(24px) saturate(180%));
  -webkit-backdrop-filter: var(--glass-l3-blur, blur(24px) saturate(180%));
  border-color: var(--glass-l3-border, rgba(255,255,255,.12)) !important;
}

/* ─────────────────────────────────────────────────────────────────
  23. INNER-LIGHT-REFLEX auf Cards
   Oben-links heller, unten-rechts dunkler → 3D-Tiefe ohne box-shadow.
   WHY: Simuliert Umgebungslicht das von oben-links kommt.
   ───────────────────────────────────────────────────────────────── */
.mc::after,
.match-card::after {
  background:
    var(--inner-light, linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.08) 100%)),
    linear-gradient(135deg,
      rgba(0,230,118,0) 0%,
      rgba(0,230,118,.18) 50%,
      rgba(64,196,255,0) 100%) !important;
}

/* ─────────────────────────────────────────────────────────────────
  24. GRADIENT-BORDERS (top=bright, bottom=dim)
   Simuliert Lichteinfall von oben. Rein via border-image.
   ───────────────────────────────────────────────────────────────── */
.sc {
  border-image: var(--border-gradient-white, linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03))) 1 !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 12px !important;
}
/* border-image bricht border-radius in manchen Browsern → Fallback */
@supports not (border-image: linear-gradient(red,blue) 1) {
  .sc { border: 1px solid rgba(255,255,255,.08) !important; }
}

/* ─────────────────────────────────────────────────────────────────
  25. MICRO-TYPOGRAPHY — Tabular Nums + Gradient auf Hero-Zahlen
   WHY: Zahlen in Data-UI müssen "fest" stehen (tabular-nums)
   und die wichtigsten Werte (Accuracy, Quote) leuchten via Gradient.
   ───────────────────────────────────────────────────────────────── */
.mini-stat__value,
.stat-v,
.av,
.pv {
  font-variant-numeric: tabular-nums;
}

/* Gradient-Text auf den großen Stat-Zahlen */
.av,
.stat-v {
  background: linear-gradient(135deg, var(--a) 0%, var(--a3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────────────────────────────
  26. ENTRANCE-STAGGER auf Match-Cards
   Gestaffeltes Erscheinen (50ms delay pro Card) → Premium-Waterfall.
   WHY: Alle Cards gleichzeitig = billig. Kaskade = Awwwards-Level.
   ───────────────────────────────────────────────────────────────── */
.match-list > .mc:nth-child(1)  { animation-delay: 0ms; }
.match-list > .mc:nth-child(2)  { animation-delay: 50ms; }
.match-list > .mc:nth-child(3)  { animation-delay: 100ms; }
.match-list > .mc:nth-child(4)  { animation-delay: 150ms; }
.match-list > .mc:nth-child(5)  { animation-delay: 200ms; }
.match-list > .mc:nth-child(6)  { animation-delay: 250ms; }
.match-list > .mc:nth-child(7)  { animation-delay: 300ms; }
.match-list > .mc:nth-child(8)  { animation-delay: 350ms; }
.match-list > .mc:nth-child(9)  { animation-delay: 400ms; }
.match-list > .mc:nth-child(10) { animation-delay: 450ms; }
.match-list > .mc:nth-child(n+11) { animation-delay: 500ms; }

/* ─────────────────────────────────────────────────────────────────
  27. PREDICTION-BADGE Glass — ALLE Badges (nicht nur Winner)
   WHY: Winner-Badge hat Glow, Nicht-Winner sind visuell tot.
   Jetzt: alle Badges bekommen subtiles Glass, Winner ist stärker.
   ───────────────────────────────────────────────────────────────── */
.pb,
.pred-badge {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: linear-gradient(135deg,
    rgba(30,40,54,.65) 0%,
    rgba(22,29,38,.45) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: border-color 200ms ease, background 200ms ease !important;
}

.pb:hover,
.pred-badge:hover {
  border-color: rgba(255,255,255,.14) !important;
  background: linear-gradient(135deg,
    rgba(35,46,62,.7) 0%,
    rgba(25,32,42,.5) 100%) !important;
}

/* Winner-Badge überschreibt mit stärkerem Glow (behält die bestehende .pb.h Regel) */

/* ─────────────────────────────────────────────────────────────────
  28. KOMBI-SEKTIONEN — Ambient Color-Glow
   Ersetzt die flachen Sektionen durch subtile farbige Aura.
   WHY: Nur ein farbiger Linken-Balken ist zu subtil — jetzt hat
   jede Risiko-Stufe einen hauchzarten Ambient-Hintergrund.
   ───────────────────────────────────────────────────────────────── */
#claude-kombi-section {
  background: linear-gradient(135deg,
    rgba(0,230,118,.03) 0%,
    transparent 50%) !important;
  border-radius: 8px;
}

#conservative-kombi-section {
  background: linear-gradient(135deg,
    rgba(64,196,255,.03) 0%,
    transparent 50%) !important;
  border-radius: 8px;
}

#aggressive-kombi-section {
  background: linear-gradient(135deg,
    rgba(255,82,82,.03) 0%,
    transparent 50%) !important;
  border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────────────
  29. NAVBAR TAGLINE — Staggered Letter-Fade beim Page-Load
   Die Tagline "KI-ANALYSE · POISSON · FORM · H2H…" faded Wort
   für Wort ein. Rein CSS via animation-delay auf dem gesamten
   Element (kein per-letter weil kein JS-Split nötig).
   ───────────────────────────────────────────────────────────────── */
.logo-tagline {
  animation: taglineReveal 1.8s cubic-bezier(.16,1,.3,1) 0.3s both !important;
}

@keyframes taglineReveal {
  0%   { opacity: 0; transform: translateY(4px); filter: blur(4px); letter-spacing: .4em; }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: .22em; }
}

/* ─────────────────────────────────────────────────────────────────
  30. STAT-VALUES COUNTER-FEEL — Number-Glow auf Data-Werten
   Die großen Zahlen im Dashboard (Gesamtquote, Vorhersagen etc.)
   bekommen einen subtilen text-shadow der sie "leuchten" lässt.
   WHY: Zahlen ohne Glow sehen "gedruckt" aus. Mit Glow wirken
   sie wie ein beleuchtetes Display (Dashboard-Ästhetik).
   ───────────────────────────────────────────────────────────────── */
.mini-stat__value {
  text-shadow: 0 0 20px currentColor;
  opacity: .95;
}

/* Costs-Tab KPI-Kacheln */
.stat-v {
  text-shadow:
    0 0 12px rgba(0,230,118,.4),
    0 0 40px rgba(0,230,118,.15);
}

/* Model-Panel Accuracy als leuchtende Anzeige */
.ar .av {
  text-shadow:
    0 0 16px rgba(0,230,118,.5),
    0 0 48px rgba(0,230,118,.2);
  filter: brightness(1.1);
}

/* ─────────────────────────────────────────────────────────────────
   OPTIMISTIC UI — Regen-Overlay + Success-Pulse
   Session 13: Keep old DOM visible while new Kombi loads,
   then reward user with a subtle pulse when fresh data arrives.
   GPU-only (opacity + transform + box-shadow), respects reduced-motion.
   ───────────────────────────────────────────────────────────────── */

/* Regenerating: keep existing DOM, soft-dim + show spinner */
.kombi-regenerating {
  position: relative;
  pointer-events: none;
  transition: opacity .18s ease-out;
}
.kombi-regenerating > *:not(.kombi-regen-overlay) {
  opacity: .45;
  filter: saturate(.7);
  transition: opacity .18s ease-out, filter .18s ease-out;
}
.kombi-regen-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .62rem;
  font-weight: 600;
  color: var(--t2);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(15, 18, 22, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
}
.kombi-regen-overlay::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  animation: kombiSpin .9s linear infinite;
}
@keyframes kombiSpin {
  to { transform: rotate(360deg); }
}

/* Success-Pulse: reward moment after fresh data swap */
.kombi-card-success {
  animation: kombiSuccessPulse .7s cubic-bezier(.2,.8,.2,1);
}
@keyframes kombiSuccessPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(0, 230, 118, 0),
      inset 0 0 0 0 rgba(0, 230, 118, 0);
  }
  30% {
    box-shadow:
      0 0 0 4px rgba(0, 230, 118, .28),
      inset 0 0 22px 0 rgba(0, 230, 118, .10);
  }
  100% {
    box-shadow:
      0 0 0 12px rgba(0, 230, 118, 0),
      inset 0 0 0 0 rgba(0, 230, 118, 0);
  }
}

/* Per-Lane tint: Conservative = cyan, Aggressive = red */
.kombi-card-success.lane-conservative {
  animation-name: kombiSuccessPulseCyan;
}
@keyframes kombiSuccessPulseCyan {
  0%   { box-shadow: 0 0 0 0 rgba(64,196,255,0); }
  30%  { box-shadow: 0 0 0 4px rgba(64,196,255,.28), inset 0 0 22px 0 rgba(64,196,255,.10); }
  100% { box-shadow: 0 0 0 12px rgba(64,196,255,0); }
}
.kombi-card-success.lane-aggressive {
  animation-name: kombiSuccessPulseRed;
}
@keyframes kombiSuccessPulseRed {
  0%   { box-shadow: 0 0 0 0 rgba(255,82,82,0); }
  30%  { box-shadow: 0 0 0 4px rgba(255,82,82,.28), inset 0 0 22px 0 rgba(255,82,82,.10); }
  100% { box-shadow: 0 0 0 12px rgba(255,82,82,0); }
}

@media (prefers-reduced-motion: reduce) {
  .kombi-regenerating > *:not(.kombi-regen-overlay) {
    opacity: .65;
    filter: none;
  }
  .kombi-regen-overlay::before { animation: none; }
  .kombi-card-success { animation: none; }
}