/* =============================================================
   transparency-pass.css v1
   =============================================================
   Owner-Wunsch 2026-05-07: Alle Tabs/Karten transparenter
   damit der Galaxy-Background besser durchscheint.
   AUSGENOMMEN: untere Sidebar (#mobile-bottom-nav) bleibt solid.
   ============================================================= */

/* Match-Cards (Hauptcontent) */
.mc,
.match-card {
  background: rgba(15, 20, 25, .22) !important;
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  border-color: rgba(255, 255, 255, .08) !important;
}
.mc:hover,
.match-card:hover {
  background: rgba(22, 29, 38, .35) !important;
}
.mc.ft,
.match-card.ft {
  background: linear-gradient(135deg,
    rgba(22, 29, 38, .5),
    rgba(0, 230, 118, .06)) !important;
}

/* Match-Group-Header (Liga-Zeile über den Cards) */
.match-group__header {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .06) !important;
}

/* Mini-Stats Boxen oben (Spiele geladen / Trefferquote / xG / Value-Bets) */
.ms,
.sbar > div,
.mini-stat {
  background: rgba(15, 20, 25, .22) !important;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Sidebar-Cards (Self-Learning, Top-Markets, Terminal etc.) */
.sc,
.aside .card,
.sidebar-card {
  background: rgba(15, 20, 25, .25) !important;
  backdrop-filter: blur(7px) saturate(125%);
  -webkit-backdrop-filter: blur(7px) saturate(125%);
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Tab-Buttons oben (Desktop, Mobile hidden) */
.tb,
.tab {
  background: rgba(15, 20, 25, .18) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
.tb.on,
.tab.active {
  background: rgba(0, 230, 118, .14) !important;
  border-color: rgba(0, 230, 118, .35) !important;
}

/* Filter-Bar (Liga-Pills) */
.fb {
  background: transparent !important;
}
.filter-pill {
  background: rgba(15, 20, 25, .4) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Mobile Tag-/Liga-Filterkarte */
.mobile-filter-card {
  background: rgba(15, 20, 25, .22) !important;
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  border-color: rgba(255, 255, 255, .08) !important;
}
.mobile-day-control,
.mobile-league-trigger {
  background: transparent !important;
}

/* Prediction-Boxen innerhalb Match-Card */
.pb {
  background: rgba(30, 40, 54, .35) !important;
  border-color: rgba(255, 255, 255, .06) !important;
}
.pb.h {
  background: linear-gradient(135deg,
    rgba(30, 40, 54, .45),
    rgba(0, 230, 118, .08)) !important;
}

/* Date-Buttons / Day-Switcher */
.db_ {
  background: rgba(15, 20, 25, .22) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Filter-Arrow (rund, Tag-Switcher) */
.filter-arr {
  background: rgba(22, 29, 38, .45) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Team-Logo-Container (matches background of card) */
.tl {
  background: rgba(30, 40, 54, .55) !important;
}

/* Confidence-Bar Hintergrund */
.cb {
  background: rgba(15, 20, 25, .55) !important;
}

/* Costs-Tab / Smart-Kombi Sub-Cards (analoge Surfaces) */
.costs-card,
.smart-card,
.kombi-card,
.sheet-card {
  background: rgba(15, 20, 25, .22) !important;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-color: rgba(255, 255, 255, .08) !important;
}

/* ─── Single-Tip Layout (Full-width, schmal) ──────────────── */
.match-card__predictions--single {
  display: block !important;
  padding-top: 8px !important;
}
.match-card__predictions--single .pred-badge {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  width: 100% !important;
  background: linear-gradient(90deg,
    rgba(0, 230, 118, .1) 0%,
    rgba(0, 230, 118, .04) 60%,
    rgba(0, 230, 118, .12) 100%) !important;
  border: 1px solid rgba(0, 230, 118, .35) !important;
  border-radius: 8px !important;
}
.match-card__predictions--single .pred-badge__label {
  flex: 0 0 auto;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: rgba(255, 255, 255, .92) !important;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, .15);
  padding-right: 12px;
  text-shadow: 0 0 8px rgba(168, 255, 212, .35);
}
.match-card__predictions--single .pred-badge > div {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.match-card__predictions--single .pred-badge__value {
  font-size: 1.15rem !important;
  font-weight: 800;
  letter-spacing: .04em !important;
  white-space: nowrap;
}
.match-card__predictions--single .confidence-bar {
  display: none !important;
}

/* Mobile: kompakter */
@media (max-width: 600px) {
  .match-card__predictions--single .pred-badge {
    padding: 7px 10px !important;
    gap: 10px !important;
  }
  .match-card__predictions--single .pred-badge__label {
    font-size: .78rem !important;
    padding-right: 10px;
  }
  .match-card__predictions--single .pred-badge__value {
    font-size: 1rem !important;
  }
}

/* ─── SCHEIN-Tab / Sidebar einheitliches Layout ────────────
   Nur visuelle Normalisierung — KEINE JS/Logik-Änderung.
   Inline-styles werden via !important überschrieben.
   ============================================================= */

/* NUCLEAR: Alle Elemente in Sidebar-Cards bekommen Default-Typo */
.aside .sc *:not(.st):not(svg):not(svg *):not(.av):not(.mv):not(.scr):not(.scn):not(.scp):not(.scf):not(.sct) {
  font-size: .78rem !important;
  letter-spacing: normal !important;
  line-height: 1.42 !important;
  text-align: left !important;
}

/* Card-Title bleibt Heading-Stil */
.aside .sc .st {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--t3, #8899aa) !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* Bold/Strong behalten Gewicht aber erben Größe */
.aside .sc strong,
.aside .sc b {
  font-weight: 700 !important;
}

/* Sub-Headings (uppercase + letter-spacing 0.05-0.1em + bold) → Heading-Stil */
.aside .sc [style*="letter-spacing:.08em"],
.aside .sc [style*="letter-spacing:.1em"],
.aside .sc [style*="letter-spacing:.12em"],
.aside .sc [style*="letter-spacing:.05em"] {
  font-size: .66rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Stat-Werte (Accuracy-Ring, Mini-Stat) bleiben prominent */
.aside .sc .av,
.aside .sc .mv {
  font-size: 1.5rem !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

/* Standings-Tabelle: Spalten behalten ihre Sub-Klassen-Größen */
.aside .sc .scr,
.aside .sc .scn,
.aside .sc .scp,
.aside .sc .sct { font-size: .72rem !important; }
.aside .sc .scf { font-size: .72rem !important; }

/* Card-Padding + Margin einheitlich */
.aside .sc {
  padding: 14px !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
}

/* Buttons in Sidebar einheitlich */
.aside .sc button {
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  letter-spacing: .04em !important;
}
.aside .sc button.mk-day-btn,
.aside .sc button[data-offset] {
  padding: 5px 10px !important;
  font-size: .68rem !important;
}

/* Inputs einheitlich */
.aside .sc input,
.aside .sc select,
.aside .sc textarea {
  font-size: .78rem !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

/* Innen-Zeilen / Picks: gleiche Padding/Radius */
.aside .sc [style*="background:var(--s2)"],
.aside .sc [style*="background: var(--s2)"] {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
}

/* Kleinere Helper-Texte (Konf: 70% etc.) erlaubt */
.aside .sc [style*="font-size:.6rem"],
.aside .sc [style*="font-size:.62rem"],
.aside .sc [style*="font-size:.65rem"],
.aside .sc [style*="font-size:.68rem"] {
  font-size: .68rem !important;
}

/* Mobile-spezifisch */
@media (max-width: 600px) {
  .aside .sc { padding: 12px !important; margin-bottom: 10px !important; }
  .aside .sc *:not(.st):not(svg):not(svg *):not(.av):not(.mv):not(.scr):not(.scn):not(.scp):not(.scf):not(.sct) {
    font-size: .76rem !important;
  }
  .aside .sc .st { font-size: .64rem !important; margin-bottom: 10px !important; }
  .aside .sc .av, .aside .sc .mv { font-size: 1.3rem !important; }
}
.aside .sc {
  padding: 14px !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
}

/* Card-Title (.st) konsistent */
.aside .sc .st,
.aside .sc > h2,
.aside .sc > h3 {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--t3, #8899aa) !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Body-Text einheitlich + linksbündig */
.aside .sc,
.aside .sc > div:not(.st) {
  text-align: left;
}
.aside .sc p,
.aside .sc span,
.aside .sc div {
  text-align: inherit;
}

/* Default-Body-Schrift auf konsistente Größe — gilt nur
   für reine Container-Divs ohne eigene Klasse, damit existierende
   stat-elements (.av, .mv, .stb etc.) nicht überschrieben werden */
.aside .sc > div:not(.st):not([class]),
.aside .sc > p:not([class]) {
  font-size: .82rem !important;
  line-height: 1.45 !important;
  color: var(--t1, #f0f4f8);
}

/* Sub-Headings im Body ("Markt-Performance", "Liga-Tabelle" etc.) */
.aside .sc h4,
.aside .sc h5,
.aside .sc .sub-title,
.aside .sc [class*="sub-head"],
.aside .sc [class*="section-title"] {
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--t2, #a0aab8) !important;
  margin: 10px 0 6px 0 !important;
  text-align: left !important;
}

/* Buttons in Sidebar-Cards einheitlich */
.aside .sc button {
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  letter-spacing: .04em;
}
.aside .sc button.mk-day-btn,
.aside .sc button[data-offset] {
  padding: 5px 10px !important;
  font-size: .68rem !important;
}

/* Stat-Werte etwas zähmen — riesige Nummern verkleinern */
.aside .sc .av,
.aside .sc .mv,
.aside .sc .pred-conf,
.aside .sc [class*="big-value"],
.aside .sc [class*="huge"] {
  font-size: 1.5rem !important;
  line-height: 1.1 !important;
}

/* Listen / Rows linksbündig + konsistente Höhe */
.aside .sc ul,
.aside .sc ol {
  margin: 0;
  padding-left: 18px;
  text-align: left;
}
.aside .sc li {
  font-size: .8rem;
  line-height: 1.4;
  margin-bottom: 4px;
  text-align: left;
}

/* Generic key-value rows (Label / Wert nebeneinander) */
.aside .sc [class*="row"],
.aside .sc [class*="-line"] {
  font-size: .78rem !important;
  line-height: 1.4;
}

/* Accuracy-Ring zentriert lassen, Rest linksbündig */
.aside .sc .ar { align-items: center !important; }

/* Inputs/Selects einheitlich */
.aside .sc input,
.aside .sc select,
.aside .sc textarea {
  font-size: .78rem !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

/* Mobile-spezifisch noch etwas kompakter */
@media (max-width: 600px) {
  .aside .sc { padding: 12px !important; margin-bottom: 10px !important; }
  .aside .sc .st { font-size: .64rem !important; margin-bottom: 10px !important; }
  .aside .sc > div:not(.st):not([class]) { font-size: .78rem !important; }
  .aside .sc .av,
  .aside .sc .mv { font-size: 1.3rem !important; }
}

/* ─── Bottom-Nav explizit AUSGENOMMEN ──────────────────────── */
/* #mobile-bottom-nav bleibt unangefasst, behält bottom-nav-glass.css */

/* ─── Mobile-spezifisch: noch stärker durchsichtig auf Handy ── */
@media (max-width: 600px) {
  .mc, .match-card,
  .ms, .sbar > div, .mini-stat,
  .sc, .aside .card,
  .mobile-filter-card {
    background: rgba(15, 20, 25, .18) !important;
    backdrop-filter: blur(5px) saturate(115%);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
  }
}

/* ─── Touch-Geräte: kein Press-Highlight auf Karten ──────── */
@media (hover: none), (max-width: 768px) {
  .mc, .match-card,
  .ms, .sbar > div, .mini-stat,
  .sc, .aside .card,
  .mobile-filter-card,
  .pb, .tb, .filter-pill, .db_, .filter-arr {
    -webkit-tap-highlight-color: transparent !important;
  }
  /* :hover auf Touch nicht mehr wirken lassen — Tap würde Hover-State kleben lassen */
  .mc:hover, .match-card:hover {
    background: rgba(15, 20, 25, .18) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .mc:hover::before, .mc:hover::after,
  .match-card:hover::before, .match-card:hover::after {
    transform: none !important;
    opacity: 0 !important;
  }
  .mc:active, .match-card:active,
  .ms:active, .pb:active, .sc:active,
  .mobile-filter-card:active {
    background: rgba(15, 20, 25, .18) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* Reduced Motion: backdrop-filter teuer, weglassen */
@media (prefers-reduced-motion: reduce) {
  .mc, .match-card,
  .ms, .sbar > div, .mini-stat,
  .sc, .aside .card,
  .mobile-filter-card,
  .costs-card, .smart-card, .kombi-card, .sheet-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 20, 25, .65) !important;
  }
}

/* ─── Smart-Tab Mobile-Fix ──────────────────────────────────
   Owner-Wunsch 2026-05-08: Smart-Tab läuft auf Mobile am
   rechten Rand über + System-Header zu fett. */
@media (max-width: 600px) {
  /* NUCLEAR: alles im Smart-Tab darf nie über Viewport hinausragen */
  #smart-kombi-content,
  #smart-kombi-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #smart-kombi-content {
    overflow-x: hidden !important;
  }
  /* Alle Grids → Single-Column Stack auf Mobile */
  #smart-kombi-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Match-Cards in Safe-Bet-Section: enges Padding, full width */
  #smart-kombi-content .match-card {
    width: 100% !important;
    padding: 8px 10px !important;
  }
  /* Single-Tip pred-badge: darf wrappen */
  #smart-kombi-content .match-card__predictions--single .pred-badge {
    flex-wrap: wrap !important;
  }
  /* Heatmap-Badge kleiner */
  #smart-kombi-content .heatmap-badge,
  #smart-kombi-content [class*="heatmap"] {
    transform: scale(.8);
    transform-origin: right center;
  }
  /* Markt-Matrix Header (140px 80px 100px 1fr) → 4× 1fr */
  #smart-kombi-content [style*="140px 80px 100px"] {
    grid-template-columns: repeat(4, 1fr) !important;
    font-size: .55rem !important;
  }
  /* Risk-Slider Lightning-Icon nicht überlaufen lassen */
  #smart-kombi-content [style*="position:absolute"] {
    right: 4px !important;
  }
  #smart-kombi-content [style*="font-family:var(--fm)"],
  #smart-kombi-content [style*="font-family: var(--fm)"] {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  /* System-Header v2.0 — die Math-Equation ist Decoration und auf Mobile zu viel.
     Den ganzen Header schrumpfen + die Equation-Zeile ausblenden. */
  #smart-kombi-content [style*="SMART-KOMBI SYSTEM"] {
    font-size: .62rem !important;
    letter-spacing: .03em !important;
  }
  #smart-kombi-content [style*="font-size:.78rem"][style*="color:var(--a)"] {
    font-size: .62rem !important;
  }
  #smart-kombi-content [style*="font-size:.7rem"][style*="color:var(--t2)"] {
    font-size: .55rem !important;
  }
  /* Equation-Zeile (Σ-Symbol) — auf Mobile aus, ist nur Schmuck */
  #smart-kombi-content [style*="line-height:1.5"][style*="color:var(--t2)"] {
    display: none !important;
  }
  /* System-Header Kasten kompakter */
  #smart-kombi-content > div > div:first-child[style*="padding:12px 16px"],
  #smart-kombi-content > div > div:first-child[style*="padding: 12px 16px"] {
    padding: 8px 10px !important;
  }
  /* Match-Cards full width */
  #smart-kombi-content .match-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* Padding der Sektion-Container reduzieren */
  #smart-kombi-content > div > div[style*="padding:14px"],
  #smart-kombi-content > div > div[style*="padding:12px 16px"] {
    padding: 10px !important;
  }
  /* Flex-Container darf wrappen */
  #smart-kombi-content [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* =============================================================
   Owner-Wunsch 2026-05-09: Neon-Glow auf den 4 Kombi-Karten.
   In glow-accents.css definiert — wird aber von der frueheren
   .sc { border-color: rgba(255,255,255,.08) !important } Regel
   auf Zeile 51 ueberschrieben. Hier mit erhoehter Spezifitaet
   (.aside .sc#kombi-X-card) re-aktivieren — schlaegt jetzt sicher.
   ============================================================= */
.aside .sc#kombi-claude-card,
.aside .sc#kombi-conservative-card,
.aside .sc#kombi-quant-card,
.aside .sc#kombi-aggressive-card {
  border-width: 2px !important;
  border-style: solid !important;
}

.aside .sc#kombi-claude-card {
  border-color: rgba(0, 230, 118, 1) !important;
  box-shadow:
    0 0 18px rgba(0, 230, 118, .45),
    0 0 38px rgba(0, 230, 118, .20),
    inset 0 0 16px rgba(0, 230, 118, .12) !important;
  animation: tmNeonClaude 3.6s ease-in-out infinite;
}
.aside .sc#kombi-conservative-card {
  border-color: rgba(64, 196, 255, 1) !important;
  box-shadow:
    0 0 18px rgba(64, 196, 255, .45),
    0 0 38px rgba(64, 196, 255, .20),
    inset 0 0 16px rgba(64, 196, 255, .12) !important;
  animation: tmNeonConservative 3.6s ease-in-out infinite;
}
.aside .sc#kombi-quant-card {
  border-color: rgba(64, 196, 255, 1) !important;
  box-shadow:
    0 0 20px rgba(64, 196, 255, .50),
    0 0 38px rgba(168, 255, 212, .22),
    inset 0 0 18px rgba(64, 196, 255, .15) !important;
  animation: tmNeonQuant 3.6s ease-in-out infinite;
}
.aside .sc#kombi-aggressive-card {
  border-color: rgba(255, 82, 82, 1) !important;
  box-shadow:
    0 0 18px rgba(255, 82, 82, .45),
    0 0 38px rgba(255, 82, 82, .20),
    inset 0 0 16px rgba(255, 82, 82, .12) !important;
  animation: tmNeonAggressive 3.6s ease-in-out infinite;
}

/* Owner-Iter-4 2026-05-09: Linker ::before-Balken wasserdicht killen.
   Greift unabhaengig von welcher CSS-Datei sonst noch im Spiel ist. */
.aside .sc#kombi-claude-card #claude-kombi-section::before,
.aside .sc#kombi-conservative-card #conservative-kombi-section::before,
.aside .sc#kombi-quant-card #quant-kombi-section::before,
.aside .sc#kombi-aggressive-card #aggressive-kombi-section::before,
#claude-kombi-section::before,
#conservative-kombi-section::before,
#quant-kombi-section::before,
#aggressive-kombi-section::before {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  width: 0 !important;
}
.aside .sc #claude-kombi-section,
.aside .sc #conservative-kombi-section,
.aside .sc #quant-kombi-section,
.aside .sc #aggressive-kombi-section {
  padding-left: 0 !important;
  position: static !important;
}

/* ─────────────────────────────────────────────────────────────────
   2026-05-12 — Top-Glow auf den 4 Kombi-Karten weg.
   Owner-Bug: der `.sc::before` Top-Highlight (Multi-Color-Lichtreflex
   aus ui-polish.css + grüner Akzent aus glow-accents.css) erzeugt
   auf den 4 Neon-Tube-Karten einen sichtbaren Halo nur OBEN, während
   links/rechts sauber die Neon-Border laufen. Wir killen den Pseudo
   nur für diese 4 Karten — Rest-`.sc` behält den dezenten Top-Reflex.
   ─────────────────────────────────────────────────────────────── */
body .aside .sc#kombi-claude-card::before,
body .aside .sc#kombi-conservative-card::before,
body .aside .sc#kombi-quant-card::before,
body .aside .sc#kombi-aggressive-card::before {
  display: none !important;
  content: none !important;
  background: none !important;
  height: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   2026-05-12 Mobile-Fix — Outer-Glow auf den 4 Kombi-Karten weg.
   Owner-Bug: auf Mobile ist `.aside` voll-breit + overflow-x:hidden
   (Schein-Tab Overflow-Fix 09.05.), daher wird der seitliche
   box-shadow-Glow hart geclippt. Oben/unten kann der Glow raus
   → asymmetrischer Top/Bottom-Halo. Lösung: animation pausieren
   und nur inset-Layer behalten — Inner-Glow ist im Container
   gleichmässig sichtbar, kein äusseres Hervortreten mehr.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body .aside .sc#kombi-claude-card,
  body .aside .sc#kombi-conservative-card,
  body .aside .sc#kombi-quant-card,
  body .aside .sc#kombi-aggressive-card {
    animation: none !important;
  }
  body .aside .sc#kombi-claude-card {
    box-shadow: inset 0 0 6px rgba(255,255,255,.85),
                inset 0 0 16px rgba(0,230,118,.85) !important;
  }
  body .aside .sc#kombi-conservative-card {
    box-shadow: inset 0 0 6px rgba(255,255,255,.85),
                inset 0 0 16px rgba(90,209,255,.85) !important;
  }
  body .aside .sc#kombi-quant-card {
    box-shadow: inset 0 0 8px rgba(255,255,255,.95),
                inset 0 0 20px rgba(128,255,212,.85) !important;
  }
  body .aside .sc#kombi-aggressive-card {
    box-shadow: inset 0 0 8px rgba(255,255,255,.85),
                inset 0 0 18px rgba(255,107,107,.85) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   2026-05-12 — Neon-Tube auf Match-Cards (Tipps-Tab + Smart-Tab)
   Farbe Türkis/Teal #26d0ce — kollidiert nicht mit den 4 Kombi-Farben.
   STATISCH (keine Animation) weil 15+ Cards auf einer Seite
   = sonst Flacker-Lichtflut + Mobile-Akku-Killer.
   Featured-Cards (.match-card--featured) und Quant-Cards
   (.match-card--quant) behalten ihre eigenen Glow-Themes
   weil sie höher in der CSS-Cascade definiert sind.
   ─────────────────────────────────────────────────────────────── */
.match-card,
.mc {
  border: 1.5px solid rgba(38, 208, 206, .65) !important;
  box-shadow:
    inset 0 0 4px rgba(255, 255, 255, .55),
    inset 0 0 12px rgba(38, 208, 206, .35),
    0 0 3px rgba(77, 255, 255, .65),
    0 0 9px rgba(38, 208, 206, .35) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 260ms cubic-bezier(.4,0,.2,1) !important;
}
.match-card:hover,
.mc:hover {
  border-color: rgba(77, 255, 255, .85) !important;
  box-shadow:
    inset 0 0 5px rgba(255, 255, 255, .75),
    inset 0 0 16px rgba(38, 208, 206, .55),
    0 0 5px rgba(77, 255, 255, .85),
    0 0 14px rgba(38, 208, 206, .55) !important;
}

/* Mobile (max-width:600px): outer-Glow weg analog zu den Kombi-Karten.
   `.aside`/Match-list haben overflow-x:hidden → seitlicher Glow wäre
   geclippt → Top/Bottom-Asymmetrie. Nur inset-Layer behalten. */
@media (max-width: 600px) {
  .match-card,
  .mc {
    box-shadow:
      inset 0 0 4px rgba(255, 255, 255, .55),
      inset 0 0 12px rgba(38, 208, 206, .35) !important;
  }
  .match-card:hover,
  .mc:hover {
    box-shadow:
      inset 0 0 5px rgba(255, 255, 255, .75),
      inset 0 0 16px rgba(38, 208, 206, .55) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   2026-05-12 — Neon-Tube auf oberen Sektionen (Tipps-Tab Header).
   Farbe Brand-Grün #00e676 — gruppiert visuell als Header-Block,
   sticht von Match-Cards (Türkis) und Kombi-Lanes ab.
   STATISCH wie bei Match-Cards.
   ─────────────────────────────────────────────────────────────── */
.sbar .mini-stat,
.banker-inline,
.mobile-filter-card {
  border: 1.5px solid rgba(0, 230, 118, .6) !important;
  border-radius: 12px;
  box-shadow:
    inset 0 0 4px rgba(255, 255, 255, .55),
    inset 0 0 12px rgba(0, 230, 118, .32),
    0 0 3px rgba(0, 255, 136, .55),
    0 0 9px rgba(0, 230, 118, .30) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

/* Mobile: outer-Glow weg analog zu Match-Cards (overflow-Clip-Asymmetrie). */
@media (max-width: 600px) {
  .sbar .mini-stat,
  .banker-inline,
  .mobile-filter-card {
    box-shadow:
      inset 0 0 4px rgba(255, 255, 255, .55),
      inset 0 0 12px rgba(0, 230, 118, .32) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   2026-05-12 — Match-Card Vertikal-Kompression (Owner-Wunsch "A").
   ~30% kürzere Card, gleiche Infos, gleiche Breite. Gilt für
   Tipps-Tab und Smart-Tab (beide nutzen denselben Klassensatz).
   Türkis-Neon-Border (oben definiert) bleibt aktiv.
   ─────────────────────────────────────────────────────────────── */
.mc,
.match-card {
  padding: 7px 11px !important;
}
.mc .ch,
.match-card .match-card__header {
  margin-bottom: 4px !important;
}
.mc .tr,
.match-card .match-card__teams {
  gap: 8px !important;
  margin-bottom: 4px !important;
}
.mc .tl,
.match-card .match-card__team-logo {
  width: 22px !important;
  height: 22px !important;
  font-size: .7rem !important;
}
.mc .tn_,
.match-card .match-card__team-name {
  font-size: .72rem !important;
  line-height: 1.12 !important;
}
.mc .vs,
.match-card .match-card__vs {
  font-size: .72rem !important;
}
.mc .pr,
.match-card .match-card__predictions,
.match-card .match-card__predictions--single {
  gap: 4px !important;
  padding-top: 5px !important;
}
.mc .pb,
.match-card .match-card__prediction-badge {
  padding: 4px 6px !important;
}
.mc .pv,
.match-card .match-card__prediction-value {
  font-size: .76rem !important;
  line-height: 1.1 !important;
}
.mc .pl,
.match-card .match-card__prediction-label {
  font-size: .5rem !important;
}

/* Mobile: noch etwas enger weil Bildschirmbreite knapper. */
@media (max-width: 600px) {
  .mc,
  .match-card {
    padding: 6px 9px !important;
  }
  .mc .tr,
  .match-card .match-card__teams {
    gap: 6px !important;
  }
  .mc .tl,
  .match-card .match-card__team-logo {
    width: 22px !important;
    height: 22px !important;
  }
  .mc .tn_,
  .match-card .match-card__team-name {
    font-size: .7rem !important;
  }
  .mc .pr,
  .match-card .match-card__predictions,
  .match-card .match-card__predictions--single {
    gap: 3px !important;
    padding-top: 4px !important;
  }
  .mc .pb,
  .match-card .match-card__prediction-badge {
    padding: 3px 5px !important;
  }
  .mc .pv,
  .match-card .match-card__prediction-value {
    font-size: .72rem !important;
  }
  .mc .pl,
  .match-card .match-card__prediction-label {
    font-size: .48rem !important;
  }
}

/* =============================================================================
   ====  PHASE 1 — QUICK WINS (2026-05-12 Owner-Auftrag)  ====================
   ============================================================================= */

/* ─── 1. Tab-Wechsel-Transition (sanftes Fade + minimaler Slide-up) ─── */
.tm-tab-fade-in {
  animation: tmTabFadeIn 220ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes tmTabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-tab-fade-in { animation: none !important; }
}

/* ─── 2. Card-Tap-Feedback (Mobile, kein Hover → braucht active-State) ─── */
@media (hover: none) and (pointer: coarse) {
  .match-card:active,
  .mc:active {
    border-color: rgba(77, 255, 255, 1) !important;
    box-shadow:
      inset 0 0 6px rgba(255, 255, 255, .85),
      inset 0 0 18px rgba(38, 208, 206, .65) !important;
    transition: border-color 60ms ease, box-shadow 60ms ease !important;
  }
}

/* ─── 3. Reveal-Pulse auf Prediction-Values (Türkis-Glow beim ersten Sichtbarwerden) ─── */
.match-card.tm-reveal .match-card__prediction-value,
.mc.tm-reveal .pv {
  animation: tmPredictionValueReveal 1.1s ease-out 80ms both;
}
@keyframes tmPredictionValueReveal {
  0%   { color: rgba(77, 255, 255, 1); text-shadow: 0 0 14px rgba(77, 255, 255, .85), 0 0 4px rgba(255,255,255,.9); }
  60%  { text-shadow: 0 0 8px rgba(77, 255, 255, .35); }
  100% { color: inherit; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .match-card.tm-reveal .match-card__prediction-value,
  .mc.tm-reveal .pv { animation: none !important; }
}

/* ─── 4. Skeleton-Shimmer kräftiger (deutlicher Lichtsweep statt subtiler) ─── */
.skeleton,
.tm-skeleton,
[class*="skeleton"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 100%);
}
.skeleton::after,
.tm-skeleton::after,
[class*="skeleton"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(38, 208, 206, .14) 35%,
    rgba(77, 255, 255, .28) 50%,
    rgba(38, 208, 206, .14) 65%,
    transparent 100%);
  animation: tmSkeletonSweep 1.6s linear infinite;
  transform: translateX(-100%);
  pointer-events: none;
}
@keyframes tmSkeletonSweep {
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after,
  .tm-skeleton::after,
  [class*="skeleton"]::after { animation: none !important; }
}

/* ─── 5. Empty-States mit Charakter (zentrierter Container + Float-Animation) ─── */
.tm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
  color: var(--t3);
  font-size: .78rem;
  line-height: 1.5;
}
.tm-empty-state__icon {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(38, 208, 206, .35));
  animation: tmEmptyFloat 3.4s ease-in-out infinite;
}
.tm-empty-state__title {
  font-weight: 700;
  color: var(--t1);
  font-size: .92rem;
  letter-spacing: .03em;
}
.tm-empty-state__body {
  color: var(--t3);
  font-size: .72rem;
  font-style: italic;
}
@keyframes tmEmptyFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); opacity: .85; }
  50%      { transform: translateY(-6px) rotate(2deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-empty-state__icon { animation: none !important; }
}

/* =============================================================================
   ====  PHASE 2 — DESIGN-SYSTEM (2026-05-12 Owner-Auftrag)  =================
   ============================================================================= */

/* ─── 7. Farb-Hierarchie — Random-Gold/Cyan/Violet außerhalb der Kombi-Lanes
        auf einheitliche Brand-Grün + Türkis-Match-Accent reduzieren.
        Die 4 Kombi-Lane-Karten (Claude/Conservative/Quant/Aggressive)
        bleiben unverändert (Owner-Wunsch). ─── */

/* Body Ambient-Glow auf grün-dominant (war: grün + cyan + violet) */
body::before {
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(0, 230, 118, .14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 85%, rgba(0, 230, 118, .07) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 5% 40%, rgba(38, 208, 206, .05) 0%, transparent 60%) !important;
}

/* Top Accent-Line unter Navbar auf grün-Türkis-only (war: cyan/grün/gold) */
.nb::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(38, 208, 206, .35) 20%,
    rgba(0, 230, 118, .65) 50%,
    rgba(38, 208, 206, .35) 80%,
    transparent 100%) !important;
}

/* ─── 9. Typografie-Skala (Variables — anwenden wo's sicher ist) ─── */
:root {
  /* Klare 6-Stufen-Skala. Bestehende rem-Werte bleiben funktional,
     neue Komponenten sollten diese Variables nutzen. */
  --fs-xs: 0.6875rem;   /* 11px — Mini-Labels */
  --fs-sm: 0.8125rem;   /* 13px — Body small */
  --fs-base: 0.9375rem; /* 15px — Body default */
  --fs-md: 1.125rem;    /* 18px — Heading small */
  --fs-lg: 1.5rem;      /* 24px — Heading */
  --fs-xl: 2.25rem;     /* 36px — Hero numbers */

  /* Fertige line-heights die zur Skala passen */
  --lh-tight: 1.15;
  --lh-base: 1.45;
  --lh-relaxed: 1.6;
}

/* ─── 10. Spacing-Scale (Variables) ─── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

/* ─── 11. Border-Radius-Konsistenz (Variables + sanfte Anwendung) ─── */
:root {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
}
/* .sc-Cards & ähnliche Container auf konsistente 12px statt 10/12/14 mix.
   Die 4 Kombi-Lane-Karten haben ihre Inline-Regeln und bleiben unverändert. */
.sc:not(#kombi-claude-card):not(#kombi-conservative-card):not(#kombi-quant-card):not(#kombi-aggressive-card) {
  border-radius: var(--r-md) !important;
}
.banker-inline,
.mobile-filter-card,
.sbar .mini-stat {
  border-radius: var(--r-md) !important;
}
.match-card,
.mc {
  border-radius: var(--r-md) !important;
}

/* Tip-Box-Pillen + Mini-Pills auf 8px (war 5-8px gemischt) */
.pb,
.match-card__prediction-badge {
  border-radius: var(--r-sm) !important;
}

/* =============================================================================
   ====  PHASE 3 — UX-PATTERNS (2026-05-12 Owner-Auftrag)  ===================
   ============================================================================= */

/* ─── 14. Bottom-Sheet auf Mobile statt Full-Screen-Modal für "Warum dieser Tipp?"
        Modal slidet von unten hoch, drag-Backdrop schließt. Drag-down später möglich. ─── */
@media (max-width: 600px) {
  #why-pick-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #why-pick-modal > div:first-child {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 88vh !important;
    border-radius: 18px 18px 0 0 !important;
    animation: tmBottomSheetIn 320ms cubic-bezier(.22,1,.36,1) both !important;
  }
  /* Drag-Handle-Indikator oben — visueller Hinweis dass's eine Bottom-Sheet ist */
  #why-pick-modal > div:first-child::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25);
    pointer-events: none;
    z-index: 3;
  }
}
@keyframes tmBottomSheetIn {
  from { transform: translateY(100%); opacity: .4; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #why-pick-modal > div:first-child { animation: none !important; }
}

/* ─── 15. Tab-Reveal-Anim sanfter: bessere Easing + Stagger-Cap.
        Owner-Memo: animate-in war 0.4s linear-ish — jetzt smooth-cubic mit
        max-delay cap damit bei 20+ Cards nicht 1.2s gewartet wird. ─── */
.match-card.animate-in,
.mc.animate-in {
  animation: tmMatchCardReveal 500ms cubic-bezier(.22, 1, .36, 1) both !important;
  /* JS setzt animation-delay über inline-style; cap auf 600ms via clamp */
}
@keyframes tmMatchCardReveal {
  0%   { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(3px); }
  60%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .match-card.animate-in,
  .mc.animate-in { animation: none !important; }
}

/* =============================================================================
   ====  PHASE 4 — WISHLIST (2026-05-12 Owner-Auftrag)  ======================
   ============================================================================= */

/* ─── 19. Live-Update-Pulse: Match-Cards mit .badge-live (= fixture.status === 'live')
        pulsieren in Live-Rot. CSS-only via :has() selector — kein JS-Eingriff. ─── */
.match-card:has(.badge-live),
.mc:has(.badge-live) {
  animation: tmLivePulse 1.8s ease-in-out infinite;
  border-color: rgba(255, 82, 82, .75) !important;
}
@keyframes tmLivePulse {
  0%, 100% {
    box-shadow:
      inset 0 0 4px rgba(255, 255, 255, .55),
      inset 0 0 12px rgba(38, 208, 206, .35),
      0 0 4px rgba(255, 82, 82, .45),
      0 0 10px rgba(255, 82, 82, .25) !important;
  }
  50% {
    box-shadow:
      inset 0 0 5px rgba(255, 255, 255, .75),
      inset 0 0 14px rgba(38, 208, 206, .45),
      0 0 8px rgba(255, 82, 82, .85),
      0 0 18px rgba(255, 82, 82, .55) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .match-card:has(.badge-live),
  .mc:has(.badge-live) { animation: none !important; }
}

/* ─── 20. Mini-Form-Sparkline (5 Dots nach Team-Name) ─── */
.match-card__form-sparkline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  vertical-align: middle;
  opacity: .85;
}
.match-card__form-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 3px currentColor;
  /* currentColor wirkt nicht direkt auf background — Glow kommt via filter */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .15));
}
/* Auf Mobile noch kompakter (Cards sind eh sehr eng) */
@media (max-width: 600px) {
  .match-card__form-sparkline { gap: 1.5px; margin-left: 4px; }
  .match-card__form-dot { width: 4px; height: 4px; }
}

/* Phase A v2.3 (2026-05-14) — Saison-Tordurchschnitt-Badge neben Team-Name.
   Sehr dezent damit Card-Compression aus Phase 1-4 nicht gebrochen wird. */
.match-card__af-avg {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  font-size: .58rem;
  font-family: var(--fm);
  font-weight: 600;
  color: rgba(168, 255, 212, .85);
  background: rgba(0, 230, 118, .08);
  border: 1px solid rgba(0, 230, 118, .25);
  border-radius: 4px;
  letter-spacing: .02em;
  vertical-align: middle;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .match-card__af-avg {
    margin-left: 4px;
    padding: 0 3px;
    font-size: .54rem;
  }
}
/* Mobile scroll path: backdrop-filter on repeated cards/stat boxes is one of
   the biggest Android Chrome jank sources. Use solid translucent surfaces on
   touch devices; desktop keeps the glass treatment above. */
@media (hover: none) and (pointer: coarse) {
  .mc,
  .match-card,
  .ms,
  .sbar > div,
  .mini-stat,
  .sc,
  .aside .card,
  .sidebar-card,
  .mobile-filter-card,
  .costs-card,
  .smart-card,
  .kombi-card,
  .sheet-card,
  .nb,
  .mlp-sheet {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .ms,
  .sbar > div,
  .mini-stat,
  .mobile-filter-card {
    background: rgba(10, 14, 21, .96) !important;
  }

  .sc,
  .aside .card,
  .sidebar-card,
  .costs-card,
  .smart-card,
  .kombi-card,
  .sheet-card {
    background: rgba(10, 14, 21, .94) !important;
  }
}