/* ═══════════════════════════════════════════════════════════════
   FONTS — Bebas Neue (Display) · Space Grotesk (Body/UI)
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Electric Lime × Void Black × JARVIS Violet
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Backgrounds ─────────────────────────────────────────── */
    --color-bg:          #06080F;   /* pitch void — not pure black */
    --color-bg-elevated: #0C1018;   /* card surface */
    --color-surface:     rgba(255,255,255,0.045);
    --color-surface-strong: rgba(255,255,255,0.075);

    /* ── Borders ─────────────────────────────────────────────── */
    --color-border:        rgba(255,255,255,0.07);
    --color-border-strong: rgba(255,255,255,0.13);

    /* ── Text ────────────────────────────────────────────────── */
    --color-text:           #EDF2FF;
    --color-muted:          #AFC0E6;   /* dimmed data labels */
    --color-subtle:         #8EA2CF;   /* ghost text, placeholders */
    --color-text-secondary: var(--color-text-secondary);   /* between muted and primary — most secondary text */
    --text-secondary:       #C7D4F6;
    --text-tertiary:        #A9B9E0;

    /* ── Accent — Electric Lime ──────────────────────────────── */
    /* Synthetikrasen unter Flutlicht. Nike Volt. VAR-Linien.    */
    --color-primary:      #C8FF00;
    --color-primary-dim:  rgba(200,255,0,0.10);
    --color-primary-glow: 0 0 28px rgba(200,255,0,0.22);

    /* ── JARVIS — Deep Violet ────────────────────────────────── */
    /* KI-generierte Inhalte bekommen IMMER diese Farbe.         */
    --color-jarvis:      #7C3AED;
    --color-jarvis-soft: #A78BFA;
    --color-jarvis-dim:  rgba(124,58,237,0.14);
    --color-jarvis-glow: 0 0 24px rgba(124,58,237,0.3);

    /* ── Sport Semantics ─────────────────────────────────────── */
    --color-win:  #00FFA3;   /* mint — Sieg */
    --color-draw: #FFD166;   /* Amber — Unentschieden */
    --color-loss: #FF8A4C;   /* Coral — Niederlage */
    --color-home: #00D1FF;   /* Cyan — Home */
    --color-away: #A78BFA;   /* Violet — Away */

    /* ── Legacy aliases (Kompatibilität) ─────────────────────── */
    --color-success: var(--color-win);
    --color-warning: var(--color-draw);
    --color-danger:  var(--color-loss);

    /* ── Typography ──────────────────────────────────────────── */
    --font-display: 'Bebas Neue', system-ui;           /* Scores, Countdown, Hero */
    --font-body:    'Space Grotesk', system-ui;         /* UI, Body, Labels */
    --font-mono:    'Space Mono', 'Courier New', mono;  /* Stats, Wahrscheinlichkeiten */

    /* ── Fluid Type Scale ────────────────────────────────────── */
    --text-2xs: clamp(11px, 1vw,  12px);  /* WCAG: min 11px */
    --text-xs:  clamp(12px, 1.2vw, 13px); /* WCAG: min 12px */
    --text-sm:  clamp(12px, 1.3vw, 13px);
    --text-md:  clamp(13px, 1.4vw, 14px);
    --text-lg:  clamp(15px, 1.6vw, 16px);
    --text-xl:  clamp(18px, 2vw,   20px);
    --text-2xl: clamp(22px, 2.8vw, 28px);
    --text-3xl: clamp(28px, 3.8vw, 42px);
    --text-display: clamp(36px, 6vw, 72px);

    /* ── Spacing (8px base) ──────────────────────────────────── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* ── Legacy spacing aliases ──────────────────────────────── */
    --space-2xs: 4px;
    --space-xs:  6px;
    --space-sm:  10px;
    --space-md:  14px;
    --space-lg:  18px;
    --space-xl:  24px;
    --space-2xl: 32px;

    /* ── Radius ──────────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-card:   0 2px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
    --shadow-soft:   0 22px 70px rgba(0,0,0,0.4);
    --shadow-glow:   var(--color-primary-glow);
    --focus-ring:    0 0 0 3px rgba(200,255,0,0.28);

    /* ── Transitions ─────────────────────────────────────────── */
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --transition-ui: 180ms var(--ease-out);

    /* ── Away Pick Colors ────────────────────────────────────── */
    --color-away-pick:      #FF6B8A;
    --color-away-pick-glow: rgba(255,107,138,0.4);
    --color-away-pick-dim:  rgba(255,107,138,0.15);

    /* ── Accent aliases ──────────────────────────────────────── */
    --color-accent-neon: #00FFA3;
    --color-accent-cyan: #00D1FF;

    /* ── Surface & border tokens (readable) ─────────────────── */
    --surface-readable:       rgba(12,18,32,0.82);
    --surface-readable-hover: rgba(19,29,48,0.92);
    --border-readable:        rgba(175,192,230,0.18);

    /* ── Card tokens ─────────────────────────────────────────── */
    --card-bg:     rgba(255,255,255,0.04);
    --card-border: rgba(255,255,255,0.08);
    --card-radius: 12px;

    /* ── Match Center Card tokens ───────────────────────────── */
    --mc-card-bg:        rgba(14,18,32,0.75);
    --mc-card-blur:      16px;
    --mc-card-radius-lg: 20px;
    --mc-card-radius-sm: 14px;
    --mc-card-border:    rgba(255,255,255,0.07);
    --mc-glow-home:      rgba(0,214,143,0.12);
    --mc-glow-away:      rgba(255,107,138,0.12);
    --mc-seg-bg:         rgba(255,255,255,0.04);
    --mc-seg-home:       rgba(0,214,143,0.22);
    --mc-seg-draw:       rgba(255,209,102,0.22);
    --mc-seg-away:       rgba(255,107,138,0.22);
    --mc-reveal-ease:    cubic-bezier(0.22,1,0.36,1);
    --mc-pick-bounce:    cubic-bezier(0.34,1.56,0.64,1);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    overflow-x: hidden;
    font-size: var(--text-md);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.modal-open {
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 80% 10%, rgba(0, 209, 255, 0.18), transparent 35%),
        radial-gradient(circle at 20% 70%, rgba(0, 255, 163, 0.12), transparent 35%),
        linear-gradient(135deg, var(--color-bg), var(--color-bg-elevated));
    z-index: -2;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, black, transparent);
    z-index: -1;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 16px;
    border-right: 1px solid var(--color-border);
    background: rgba(6,8,15,0.92);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Brand: Hexagon-Logo + Name */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding: 0 8px;
}

.brand-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    /* Hexagon shape via clip-path */
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    background: linear-gradient(145deg, var(--color-primary), #90FF00);
    color: #060810;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0;
    box-shadow: var(--color-primary-glow);
}

.brand strong {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.3px;
}

.brand span {
    font-size: 11px;
    color: var(--color-muted);
    letter-spacing: 0.3px;
}

/* Nav List */
.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 24px;
}

.nav a {
    color: var(--color-muted);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    transition: background var(--transition-ui), color var(--transition-ui);
}
.nav a:hover,
.nav a.active {
    background: rgba(200,255,0,0.08);
    color: var(--color-primary);
}

.sidebar-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-top: auto;
}

.sidebar-card span,
.metric-card span,
.insight-card span {
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.sidebar-card strong {
    display: block;
    color: var(--color-primary);
    margin: 6px 0 4px;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0;
}

.sidebar-card p {
    color: var(--color-muted);
    line-height: 1.5;
    font-size: 12px;
}

/* ── Main Content + Topbar ───────────────────────────────────── */
.main-content {
    padding: 32px 40px 80px;
    min-width: 0;
    position: relative; /* Anker für view-leaving position:absolute */
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
}

/* View-Label über dem H1 */
.tag {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--color-primary);
    margin-bottom: 6px;
    display: block;
}

.topbar h1 {
    font-family: var(--font-body);
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    line-height: 1.15;
}

.topbar-actions {
    display: flex;
    gap: 12px;
}

.topbar-actions input,
.topbar-actions select {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    padding: 14px 16px;
    border-radius: 16px;
    outline: none;
}

.topbar-actions select option {
    background: #0B1020;
}

.hero-panel {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
    gap: 12px;
    align-items: stretch;
    padding: 14px;
    margin-bottom: 10px;
}

.hero-panel > div,
.insight-card {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 90px rgba(0,0,0,0.25);
}

.hero-panel h2 {
    font-size: 38px;
    line-height: 1.05;
    max-width: 720px;
    margin-bottom: 18px;
}

.hero-panel p {
    color: var(--color-text-secondary);
    max-width: 720px;
    line-height: 1.65;
    font-size: 15px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}

button {
    font-family: inherit;
    touch-action: manipulation;
}

.hero-actions button,
.live-header button {
    background: rgba(0,209,255,0.14);
    border: 1px solid rgba(0,209,255,0.28);
    color: #00D1FF;
    padding: 13px 17px;
    border-radius: 14px;
    cursor: pointer;
    transition: 0.25s;
}

.hero-actions button:hover,
.live-header button:hover {
    transform: translateY(-2px);
    background: rgba(0,209,255,0.23);
}

.hero-actions .secondary {
    background: rgba(0,255,163,0.10);
    border-color: rgba(0,255,163,0.26);
    color: #00FFA3;
}

.data-status {
    margin-top: 18px;
    display: inline-block;
    color: var(--color-text-secondary);
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
}

.data-source-info {
    margin-top: 10px;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.82;
}

.data-status.loading {
    color: #FFB800;
    border-color: rgba(255,184,0,0.35);
}

.insight-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.insight-card strong {
    display: block;
    margin-top: 14px;
    font-size: 24px;
    line-height: 1.25;
    color: #00FFA3;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.data-health-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}

.data-health-card {
    border-color: rgba(0,209,255,0.18);
}

.update-health-card {
    border-color: rgba(255,209,102,0.24);
}

.metric-card {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 16px;
}

.metric-card strong {
    display: block;
    font-size: 24px;
    margin-top: 6px;
}

.metric-card p {
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-top: 8px;
}

.ml-ranking-panel,
.ml-quality-panel,
.jarvis-panel,
.intelligence-panel {
    margin-bottom: 34px;
}

.intelligence-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.intelligence-card {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 16px;
    min-height: 108px;
}

.intelligence-card span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-bottom: 8px;
}

.intelligence-card strong {
    display: block;
    color: #00FFA3;
    font-size: 20px;
    line-height: 1.25;
}

.intelligence-card p {
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 8px;
}

.intelligence-list {
    display: grid;
    gap: 8px;
}

.intelligence-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.intelligence-row strong {
    color: #00D1FF;
    font-size: 13px;
}

.jarvis-grid {
    display: grid;
    gap: 14px;
}

.jarvis-section {
    display: grid;
    gap: 10px;
}

.jarvis-section h3 {
    color: #EAF2FF;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.jarvis-section-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.jarvis-card {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 12px;
    min-height: 116px;
}

.prediction-lab-view {
    display: grid;
    gap: 6px;
}

.prediction-lab-match {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    overflow: hidden;
}

.prediction-lab-match summary {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    list-style: none;
}

.prediction-lab-match summary span {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.prediction-lab-match summary::-webkit-details-marker {
    display: none;
}

.prediction-model-table {
    padding: 0 10px 8px;
}

.prediction-model-head,
.prediction-model-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 76px 76px 76px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.prediction-model-head {
    color: var(--color-text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.prediction-model-row strong {
    color: #FFFFFF;
}

.prediction-lab-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 10px 8px;
}

.prediction-lab-meta span {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.challenge-scoreboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.challenge-stat,
.challenge-match,
.market-compare,
.perspective-strip > div {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.045);
    padding: 10px;
}

.challenge-stat span,
.challenge-row span,
.market-compare span,
.perspective-strip span,
.challenge-match-top span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.challenge-stat strong,
.challenge-row strong,
.market-compare strong,
.perspective-strip strong,
.challenge-match-top strong {
    color: #fff;
}

.challenge-controls {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.challenge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.challenge-actions button,
.challenge-pick-buttons button {
    background: rgba(0,209,255,0.12);
    border: 1px solid rgba(0,209,255,0.24);
    color: #00D1FF;
    padding: 9px 11px;
    border-radius: 8px;
    cursor: pointer;
}

.challenge-actions button:hover,
.challenge-pick-buttons button:hover,
.challenge-pick-buttons button.active {
    background: rgba(0,255,163,0.14);
    border-color: rgba(0,255,163,0.28);
    color: #00FFA3;
}

.challenge-pick-buttons button:disabled,
.challenge-score-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.challenge-import-export,
.challenge-score-input {
    width: 100%;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
}

.challenge-view {
    display: grid;
    gap: 10px;
}

.challenge-match.locked {
    opacity: 0.82;
}

.challenge-match-top,
.challenge-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.perspective-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.perspective-status {
    color: #FFB800;
    font-size: 13px;
    margin: 0 0 10px;
}

.market-compare {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.market-compare p {
    grid-column: 1 / -1;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.market-compare.unavailable {
    grid-template-columns: 1fr;
}

.challenge-pick-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}


.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.scenario-card {
    text-align: left;
    color: #fff;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
}

.scenario-card > span,
.scenario-metric span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.scenario-card > strong {
    display: block;
    margin: 6px 0 12px;
    color: #00FFA3;
    font-size: 24px;
}

.scenario-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.scenario-story {
    grid-column: 1 / -1;
    margin: 0 0 10px;
}

.scenario-story p {
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.45;
    margin: 0 0 6px;
}

.scenario-metric {
    min-height: 54px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.07);
}

.scenario-metric strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 15px;
}

.jarvis-card > span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-bottom: 10px;
}

.jarvis-card > strong {
    display: block;
    color: #00FFA3;
    font-size: 28px;
    line-height: 1.15;
}

.jarvis-card p {
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 10px;
}

.trust-card,
.status-high {
    border-color: rgba(0,255,163,0.20);
    background: rgba(0,255,163,0.055);
}

.accent-robust {
    border-color: rgba(0,255,163,0.20);
    background: rgba(0,255,163,0.045);
}

.accent-fragile {
    border-color: rgba(255,82,82,0.24);
    background: rgba(255,82,82,0.055);
}

.accent-surprise,
.accent-cyan {
    border-color: rgba(0,209,255,0.24);
    background: rgba(0,209,255,0.055);
}

.accent-overrated {
    border-color: rgba(255,184,0,0.25);
    background: rgba(255,184,0,0.055);
}

.tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tooltip-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1A1F35;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: #DDE7FF;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    width: max-content;
    max-width: min(280px, 90vw);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 200;
    white-space: normal;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.tooltip-wrap:hover .tooltip-popup,
.tooltip-wrap:focus-within .tooltip-popup,
.tooltip-wrap.tip-open .tooltip-popup {
    opacity: 1;
}

.tooltip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-bottom: 8px;
}

.help-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.07);
    color: #DDE7FF;
    font-size: 11px;
    padding: 0;
    cursor: help;
    flex-shrink: 0;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 12px;
    font-weight: 700;
}

.status-chip.status-bestanden,
.status-chip.status-ok,
.status-chip.agreement-high-agreement,
.status-chip.agreement-hohe-einigkeit,
.status-chip.risk-niedrig {
    color: #00FFA3;
    background: rgba(0,255,163,0.10);
    border-color: rgba(0,255,163,0.28);
}

.status-chip.status-warnung,
.status-chip.agreement-medium-agreement,
.status-chip.agreement-mittlere-einigkeit,
.status-chip.risk-mittel {
    color: #FFD166;
    background: rgba(255,209,102,0.10);
    border-color: rgba(255,209,102,0.28);
}

.status-chip.status-fehler,
.status-chip.agreement-low-agreement,
.status-chip.agreement-geringe-einigkeit,
.status-chip.risk-hoch {
    color: #FF8A4C;
    background: rgba(255,138,76,0.11);
    border-color: rgba(255,138,76,0.30);
}

.compact-header {
    margin-bottom: 18px;
}

.compact-header h2 {
    font-size: 26px;
}

.ml-ranking-list {
    display: grid;
    gap: 12px;
}

.ml-ranking-note {
    margin-bottom: 2px;
}

.ml-ranking-card {
    display: grid;
    grid-template-columns: 42px minmax(150px, 1fr) minmax(92px, auto) minmax(240px, 1.4fr) auto;
    gap: 16px;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px 20px;
    backdrop-filter: blur(18px);
    cursor: pointer;
    transition: transform 160ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.ml-ranking-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(0,209,255,0.10), transparent 40%),
        linear-gradient(135deg, rgba(255,255,255,0.03), transparent);
    pointer-events: none;
}

.ml-ranking-card:hover,
.ml-ranking-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(0,209,255,0.36);
    background: rgba(0,209,255,0.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    outline: none;
}

.ml-ranking-position {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #00D1FF;
    background: rgba(0,209,255,0.10);
    border: 1px solid rgba(0,209,255,0.20);
    font-weight: 800;
}

.ml-ranking-main,
.ml-ranking-score {
    display: grid;
    gap: 5px;
}

.ml-ranking-main strong,
.ml-ranking-score strong {
    color: #00FFA3;
}

.ml-ranking-main span,
.ml-ranking-score span,
.ml-ranking-meta span {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.ml-ranking-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ml-ranking-meta span {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.07);
}

.ml-ranking-score-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.ml-ranking-score-max {
    font-size: 10px;
    color: rgba(184,193,236,0.4);
    font-weight: 400;
}
.ml-ranking-score-bar-wrap {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    margin-top: 2px;
}
.ml-ranking-score-bar {
    height: 100%;
    background: linear-gradient(90deg, #00FFA3, #00D1FF);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.trend-pill {
    justify-self: end;
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.trend-win {
    color: #00FFA3;
    background: rgba(0,255,163,0.10);
    border: 1px solid rgba(0,255,163,0.20);
}

.trend-risk {
    color: #FFB800;
    background: rgba(255,184,0,0.10);
    border: 1px solid rgba(255,184,0,0.22);
}

.trend-open {
    color: var(--color-text-secondary);
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
}

.ml-quality-view {
    display: grid;
    gap: 18px;
}

.ml-quality-fallback {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 20px;
}

.ml-quality-fallback p {
    color: var(--color-text-secondary);
    margin-top: 14px;
}

.ml-quality-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ml-quality-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 18px;
}

.ml-debug-box {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 18px;
}

.ml-debug-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.ml-debug-header h3 {
    color: #00D1FF;
    margin-top: 12px;
}

.ml-debug-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ml-debug-actions button {
    background: rgba(0,209,255,0.12);
    border: 1px solid rgba(0,209,255,0.24);
    color: #00D1FF;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
}

.ml-debug-actions button:hover {
    background: rgba(0,209,255,0.20);
}

.ml-debug-code {
    color: var(--color-text-secondary);
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px;
    overflow-x: auto;
}

.ml-debug-status {
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-top: 10px;
    min-height: 16px;
}

.ml-quality-table,
.ml-disagreement-list {
    display: grid;
    gap: 8px;
}

.ml-quality-table-head,
.ml-quality-table-row,
.ml-disagreement-head,
.ml-disagreement-row {
    display: grid;
    align-items: center;
    gap: 10px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.ml-quality-table-head,
.ml-disagreement-head {
    color: #00D1FF;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.ml-quality-table-head,
.ml-quality-table-row {
    grid-template-columns: 1fr 0.7fr 0.9fr 0.8fr;
}

.ml-disagreement-head,
.ml-disagreement-row {
    grid-template-columns: minmax(150px, 1.4fr) 0.75fr 0.75fr 0.65fr 0.65fr minmax(150px, 1fr) minmax(150px, 1fr);
}

.ml-quality-table-row,
.ml-disagreement-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ml-quality-table-row:last-child,
.ml-disagreement-row:last-child {
    border-bottom: 0;
}

.ml-quality-table-row strong,
.ml-disagreement-row strong {
    color: #00FFA3;
}

.ml-disagreement-row small {
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.35;
}

.quality-level {
    display: inline-block;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.level-strong {
    color: #FFB800;
    background: rgba(255,184,0,0.10);
    border: 1px solid rgba(255,184,0,0.24);
}

.level-medium {
    color: var(--color-text-secondary);
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
}

.content-section {
    margin-top: 70px;
}

.section-header {
    margin-bottom: 26px;
}

.section-header h2 {
    font-size: 32px;
    margin-bottom: 8px;
}

.section-header p {
    color: var(--color-text-secondary);
}

.matches-grid {
    display: grid;
    gap: 18px;
}

.match-day {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    overflow: hidden;
}

.match-day-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    text-align: left;
    background: rgba(255,255,255,0.045);
    border: 0;
    color: white;
    padding: 18px 20px;
    cursor: pointer;
}

.match-day-header strong {
    display: block;
    color: #00D1FF;
    font-size: 18px;
    margin-bottom: 5px;
}

.match-day-header span,
.match-day-header small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.match-day-body {
    display: none;
    grid-template-columns: repeat(2, minmax(430px, 1fr));
    gap: 18px;
    padding: 18px;
}

.match-day.open .match-day-body {
    display: grid;
}

.match-card {
    position: relative;
    overflow: hidden;
}

.match-card > *:not(.match-flag-watermark) {
    position: relative;
    z-index: 1;
}

.match-flag-watermark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
    filter: saturate(1.05);
    pointer-events: none;
    z-index: 0;
}

.match-flag-watermark.home {
    left: 0;
}

.match-flag-watermark.away {
    right: 0;
}

.inline-flag,
.mini-flag,
.code-flag {
    display: inline-block;
    line-height: 1;
    margin-right: 0.35rem;
}

.flag-code {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.flag-img {
    width: 1.45em;
    height: 1em;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.16);
    vertical-align: -0.14em;
}

.code-flag {
    width: 34px;
    height: 22px;
}

.mini-flag {
    width: 22px;
    height: 15px;
}

.modal-flag-img {
    width: 74px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}

.squad-placeholder {
    grid-column: 1 / -1;
}

.squad-placeholder strong {
    white-space: normal;
}

/* match-card definition continues below. */
.match-card {
    position: relative;
    background: rgba(255,255,255,0.052);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 32px;
    padding: 26px;
    backdrop-filter: blur(18px);
    overflow: hidden;
    transition: 0.35s;
}

.match-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0,209,255,0.55);
    box-shadow: 0 0 45px rgba(0,209,255,0.14);
}

.match-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 42%),
        radial-gradient(circle at top right, rgba(0,209,255,0.12), transparent 35%);
    pointer-events: none;
}

.match-card-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.phase-pill,
.group-pill,
.source-pill {
    display: inline-block;
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 12px;
    margin-right: 6px;
}

.phase-pill {
    color: #00D1FF;
    background: rgba(0,209,255,0.10);
    border: 1px solid rgba(0,209,255,0.22);
}

.group-pill {
    color: var(--color-text-secondary);
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
}

.source-pill.local-source {
    color: #FFB800;
    background: rgba(255,184,0,0.10);
    border-color: rgba(255,184,0,0.24);
}

.match-meta {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--color-text-secondary);
    font-size: 13px;
    margin-bottom: 12px;
}

.match-meta span {
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
}

.stadium-line {
    position: relative;
    z-index: 1;
    color: var(--color-text-secondary);
    font-size: 13px;
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #00FFA3;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(0,255,163,0.7);
}

.fav-btn {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--color-text-secondary);
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
}

.fav-btn.active {
    color: #FFB800;
    border-color: rgba(255,184,0,0.35);
    background: rgba(255,184,0,0.12);
}

.teams {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}

.team:last-child {
    text-align: right;
}

.team-code {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0,209,255,0.22), rgba(0,255,163,0.16));
    border: 1px solid rgba(255,255,255,0.12);
    color: #00FFA3;
    font-weight: 800;
    margin-bottom: 12px;
}

.team h3 {
    font-size: 25px;
}

.team-name {
    cursor: pointer;
    transition: 0.25s;
}

.clickable-team {
    cursor: pointer;
}

.clickable-team:hover .team-name,
.team-name:hover {
    color: #00D1FF;
    text-shadow: 0 0 18px rgba(0,209,255,0.35);
}

.vs-block {
    display: grid;
    place-items: center;
    gap: 4px;
}

.vs-block span {
    color: #00D1FF;
    font-weight: 800;
    font-size: 13px;
    padding: 9px 11px;
    border-radius: 999px;
    background: rgba(0,209,255,0.10);
}

.vs-block small {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.chance-labels {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-bottom: 9px;
}

.prediction {
    position: relative;
    z-index: 1;
}

.multi-probability,
.momentum-bar {
    width: 100%;
    height: 11px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    display: flex;
}

.prob-home {
    height: 100%;
    background: linear-gradient(90deg, #00D1FF, #00FFA3);
}

.prob-draw {
    height: 100%;
    background: rgba(255,184,0,0.85);
}

.prob-away {
    height: 100%;
    background: linear-gradient(90deg, #7C5CFF, #00D1FF);
}

.prediction-values {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-secondary);
    margin-top: 12px;
    margin-bottom: 18px;
}

.ai-prediction {
    position: relative;
    z-index: 1;
    background: rgba(0,209,255,0.10);
    border: 1px solid rgba(0,209,255,0.2);
    padding: 15px;
    border-radius: 16px;
    color: #00D1FF;
    font-size: 14px;
    display: grid;
    gap: 5px;
}

.ai-prediction span {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.ai-prediction strong {
    color: #00D1FF;
}

.betting-box {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.betting-box div,
.stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 13px;
    border-radius: 14px;
    text-align: center;
}

.betting-box span,
.stat span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-bottom: 6px;
}

.betting-box strong {
    font-size: 13px;
    color: #00FFA3;
}

.risk-niedrig {
    color: #00FFA3 !important;
}

.risk-mittel {
    color: #FFB800 !important;
}

.risk-hoch {
    color: #ff6b6b !important;
}

.momentum-wrapper {
    position: relative;
    z-index: 1;
    margin-top: 20px;
}

.momentum-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 9px;
    display: flex;
    justify-content: space-between;
}

.momentum-label strong {
    color: #00FFA3;
}

.momentum-fill {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #00FFA3, #00D1FF);
    animation: pulseBar 2s infinite alternate;
}

@keyframes pulseBar {
    from { filter: brightness(1); }
    to { filter: brightness(1.4); }
}

.live-box {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 16px;
}

.live-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: 14px;
    margin-bottom: 12px;
}

.live-header button {
    padding: 8px 12px;
}

.ticker {
    max-height: 118px;
    overflow-y: auto;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.ticker p {
    margin-bottom: 7px;
}

.hover-panel {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
    transform: translateY(16px);
    transition: 0.35s;
}

.match-card:hover .hover-panel {
    opacity: 1;
    transform: translateY(0);
}

.hover-panel h4 {
    margin-bottom: 10px;
    color: #00FFA3;
}

.hover-panel p {
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat strong {
    font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════════
   TOURNAMENT BRACKET
   ═══════════════════════════════════════════════════════════════ */

.tournament-tree {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bracket-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bracket-reset-btn {
    margin-left: auto;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 12px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.bracket-reset-btn:hover {
    background: rgba(255,138,76,0.1);
    border-color: rgba(255,138,76,0.35);
    color: #FF8A4C;
}

.bracket-rounds {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 160px;
    gap: 10px;
    align-items: stretch;
    min-height: 400px;
}

.bracket-round {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Vertical connector line between rounds */
.bracket-round:not(.bracket-round--final)::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 32px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,209,255,0.2) 15%, rgba(0,209,255,0.2) 85%, transparent 100%);
    z-index: 0;
}

.bracket-round-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(184,193,236,0.45);
    text-align: center;
    padding-bottom: 10px;
    font-weight: 600;
}

.bracket-matches {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 0;
}

.bracket-matchup {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 0 4px;
}

/* Horizontal connector: left side (except QF) */
.bracket-round:not(:first-child) .bracket-matchup::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: rgba(0,209,255,0.25);
}

/* Horizontal connector: right side (except Final) */
.bracket-round:not(.bracket-round--final) .bracket-matchup::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: rgba(0,209,255,0.25);
    z-index: 1;
}

.bracket-round--final .bracket-matchup {
    border-color: rgba(0,255,163,0.2);
    background: rgba(0,255,163,0.04);
}

.bracket-team {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #EAF2FF;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
}

.bracket-team:first-child {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.bracket-team.winner {
    background: rgba(0,255,163,0.09);
    color: #00FFA3;
    font-weight: 700;
}

.bracket-team.muted {
    opacity: 0.38;
}

.bracket-team:hover:not(.muted) {
    background: rgba(0,209,255,0.08);
    cursor: pointer;
}

.bracket-team-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bracket-winner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00FFA3;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(0,255,163,0.8);
}

/* Champion column */
.bracket-champion-col {
    display: flex;
    flex-direction: column;
}

.bracket-champion-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(155deg, rgba(0,255,163,0.08), rgba(0,209,255,0.04));
    border: 1px solid rgba(0,255,163,0.22);
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    margin: 0 4px;
}

.bracket-champion-trophy {
    font-size: 26px;
    line-height: 1;
}

.bracket-champion-flag {
    width: 38px !important;
    height: auto !important;
    border-radius: 3px;
}

.bracket-champion-name {
    font-size: 14px;
    color: #00FFA3;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.bracket-champion-prob {
    font-size: 11px;
    color: rgba(184,193,236,0.8);
    background: rgba(0,255,163,0.09);
    border: 1px solid rgba(0,255,163,0.18);
    border-radius: 20px;
    padding: 3px 10px;
}

.bracket-champion-note {
    font-size: 10px;
    color: rgba(184,193,236,0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Impact collapsible */
.bracket-impact {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
}

.bracket-impact > summary {
    padding: 9px 14px;
    font-size: 12px;
    color: var(--color-text-secondary);
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    font-weight: 600;
    letter-spacing: 0.3px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bracket-impact > summary::before {
    content: '▸';
    font-size: 10px;
    color: rgba(184,193,236,0.5);
    transition: transform 0.2s;
}
.bracket-impact[open] > summary::before { transform: rotate(90deg); }
.bracket-impact > summary:hover { background: rgba(255,255,255,0.05); }

.bracket-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px;
    padding: 10px;
}


.favorites-list {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 22px;
    color: var(--color-text-secondary);
}

.favorite-item {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.04);
    color: #FFB800;
}

.error-box {
    background: rgba(255, 184, 0, 0.12);
    border: 1px solid rgba(255, 184, 0, 0.35);
    color: #FFB800;
    border-radius: 18px;
    padding: 22px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: rgba(3, 6, 14, 0.76);
    backdrop-filter: blur(18px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 24px;
    overscroll-behavior: none;
}

.modal-overlay.active {
    display: flex;
}

.modal-card {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    background: rgba(14, 21, 40, 0.92);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 34px;
    padding: 34px;
    position: relative;
    box-shadow: 0 40px 120px rgba(0,0,0,0.5);
    animation: modalIn 0.25s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: white;
    font-size: 22px;
    cursor: pointer;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding-right: 48px;
    flex: 0 0 auto;
}

.modal-scroll-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.team-badge {
    width: 86px;
    height: 58px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #06101B;
    background: linear-gradient(135deg, #00D1FF, #00FFA3);
    font-weight: 800;
    font-size: 18px;
}

.modal-header span {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.modal-header h2 {
    font-size: 30px;
}

.team-compact-kpis {
    display: grid;
    grid-template-columns: 0.55fr 1.45fr;
    gap: 12px;
    margin-bottom: 12px;
}

.team-squad-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.team-squad-kpis > div {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px;
}

.team-squad-kpis span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 11px;
    margin-bottom: 6px;
}

.team-squad-kpis strong {
    color: #00FFA3;
    font-size: 16px;
}

.team-profile-hero {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.045);
    margin-bottom: 12px;
}

.team-profile-flag img,
.profile-flag-fallback {
    width: 160px;
    height: 104px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.24);
}

.team-profile-copy h3 {
    font-size: 28px;
    margin: 3px 0 10px;
}

.team-profile-facts,
.team-phase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.team-profile-facts span,
.team-phase-grid > div,
.roster-group,
.h2h-row,
.match-h2h-summary {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    padding: 9px 10px;
}

.team-phase-grid span,
.roster-group h4 {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-bottom: 4px;
}

.team-phase-grid strong {
    color: #FFFFFF;
}

.roster-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.roster-group p {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.player-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: #FFFFFF;
    padding: 7px 0;
    cursor: pointer;
}

.h2h-list {
    display: grid;
    gap: 6px;
}

.h2h-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.modal-rating {
    background: rgba(0,209,255,0.08);
    border: 1px solid rgba(0,209,255,0.18);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 0;
}

.modal-rating span {
    display: block;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.modal-rating strong {
    font-size: 34px;
    color: #00FFA3;
}

.rating-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 12px;
}

.rating-grid > div,
.modal-analysis,
.strength-grid > div {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px;
}

.rating-grid span {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.rating-grid strong {
    display: block;
    margin: 8px 0 12px;
    font-size: 20px;
}

.mini-bar {
    height: 8px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
}

.mini-bar div {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #00D1FF, #00FFA3);
}

.modal-analysis {
    margin-bottom: 12px;
}

.modal-analysis h3,
.strength-grid h3 {
    color: #00D1FF;
    margin-bottom: 10px;
}

.modal-analysis p,
.strength-grid li {
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.modal-analysis h4 {
    color: #fff;
    font-size: 16px;
    line-height: 1.35;
    margin: 0 0 8px;
}

.story-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.story-columns > div,
.story-note {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    background: rgba(0,0,0,0.14);
    padding: 10px;
}

.story-columns span,
.story-note span {
    display: block;
    color: #00D1FF;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.story-columns strong {
    color: #00FFA3;
    font-size: 14px;
}

.story-list {
    color: var(--color-text-secondary);
    margin: 0;
    padding-left: 18px;
}

.story-list li {
    margin: 4px 0;
    line-height: 1.35;
}

.story-note {
    margin-top: 10px;
}

.story-note p {
    margin: 0;
}

.player-row small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.strength-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.strength-grid ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
    list-style: none;
}

.strength-grid li {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0,209,255,0.08);
    border: 1px solid rgba(0,209,255,0.14);
    font-size: 12px;
}

.team-advanced-data summary {
    color: #00D1FF;
    cursor: pointer;
    font-weight: 700;
}

.compact-advanced-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.groups-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 24px;
}

.group-card {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 22px 24px;
    backdrop-filter: blur(18px);
    transition: 0.3s;
}

.group-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(0,209,255,0.10), transparent 40%),
        linear-gradient(135deg, rgba(255,255,255,0.03), transparent);
    pointer-events: none;
}

.group-card:hover {
    border-color: rgba(0,209,255,0.42);
    background: rgba(0,209,255,0.07);
    box-shadow: 0 0 32px rgba(0,209,255,0.12);
}

.group-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
}

.group-card-top span {
    color: #00D1FF;
    font-size: 14px;
    letter-spacing: 1px;
}

.group-card-top strong {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.group-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    font-size: 28px;
}

.group-card .source-pill {
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
}

.group-favorite {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.group-favorite strong {
    display: block;
    margin-bottom: 4px;
    font-size: 20px;
}

.group-favorite p {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.group-card button {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(0,209,255,0.12);
    border: 1px solid rgba(0,209,255,0.22);
    color: #00D1FF;
    padding: 14px;
    border-radius: 16px;
    cursor: pointer;
    transition: 0.25s;
}

.group-card button:hover {
    background: rgba(0,209,255,0.2);
}

.group-modal-card {
    width: min(980px, calc(100vw - 32px));
}

.group-table-wrap {
    margin-top: 20px;
    overflow-x: auto;
}

.group-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    white-space: nowrap;
}

.group-table thead tr {
    background: rgba(255,255,255,0.06);
}

.group-table th,
.group-table td {
    padding: 16px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.group-table th {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.group-table td {
    font-size: 14px;
}

.group-table tbody tr {
    transition: 0.25s;
}

.group-table tbody tr:hover {
    background: rgba(255,255,255,0.04);
}

.team-table-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.mini-team-code {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(0,209,255,0.22), rgba(0,255,163,0.16));
    border: 1px solid rgba(255,255,255,0.12);
    color: #00FFA3;
    font-weight: 700;
    font-size: 12px;
}

.qualification-pill {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,255,163,0.12);
    border: 1px solid rgba(0,255,163,0.24);
    color: #00FFA3;
    font-size: 12px;
    font-weight: 600;
}

.match-click-area {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.match-modal-card {
    width: min(980px, calc(100vw - 32px));
}

.match-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.detail-stat {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 18px;
    text-align: center;
}

.detail-stat span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 13px;
    margin-bottom: 8px;
}

.detail-stat strong {
    color: #00FFA3;
    font-size: 24px;
}

.data-health-hint:empty,
.ensemble-panel:empty,
.contribution-panel:empty {
    display: none;
}

.data-health-hint {
    margin-bottom: 18px;
}

.health-pill {
    display: inline-block;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.health-pass {
    color: #00FFA3;
    background: rgba(0,255,163,0.10);
    border: 1px solid rgba(0,255,163,0.22);
}

.health-warn {
    color: #FFB800;
    background: rgba(255,184,0,0.10);
    border: 1px solid rgba(255,184,0,0.24);
}

.health-fail,
.risk-high {
    color: #FF6B6B;
    background: rgba(255,107,107,0.10);
    border: 1px solid rgba(255,107,107,0.24);
}

.ensemble-grid,
.contribution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ensemble-item,
.contribution-item {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px;
}

.ensemble-item span,
.contribution-item span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-bottom: 6px;
}

.ensemble-item strong,
.contribution-item strong {
    color: #00FFA3;
}

.match-projection {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 20px;
}

.model-explain {
    margin-bottom: 18px;
    border-color: rgba(0,209,255,0.16);
    background: rgba(0,209,255,0.055);
}

.model-comparison {
    margin-bottom: 18px;
    border-color: rgba(0,255,163,0.16);
    background: rgba(0,255,163,0.045);
}

.analysis-factors,
.team-advanced-data {
    margin-bottom: 18px;
    border-color: rgba(255,184,0,0.16);
    background: rgba(255,184,0,0.045);
}

.match-projection h3 {
    color: #00D1FF;
    margin-bottom: 18px;
}

.analysis-factor-grid {
    display: grid;
    gap: 10px;
}

.analysis-factor-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr);
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.analysis-factor-row:last-child {
    border-bottom: 0;
}

.analysis-factor-row span,
.advanced-data-item span {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.analysis-factor-row strong,
.advanced-data-item strong {
    color: #00FFA3;
    font-size: 14px;
}

.analysis-factor-head strong,
.analysis-factor-head span {
    color: #00D1FF;
}

.advanced-data-item {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.07);
}

.model-comparison-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.45fr) 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.model-comparison-row span {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.model-comparison-row strong {
    color: #00FFA3;
    font-size: 14px;
}

.model-comparison-note {
    color: #FFB800;
    font-size: 13px;
    margin-top: 14px;
}

.model-explain-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.model-explain-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.model-explain-row span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-bottom: 6px;
}

.model-explain-row strong {
    color: #00FFA3;
    font-size: 15px;
}

.model-explain-row p {
    color: var(--color-text-secondary);
    line-height: 1.55;
    font-size: 13px;
}

.projection-row {
    margin-bottom: 18px;
}

.projection-label,
.projection-values {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.projection-label span:last-child,
.projection-values span:last-child {
    text-align: right;
}

.projection-label strong {
    color: white;
}

.projection-values {
    color: #00FFA3;
    font-weight: 700;
}

.projection-bar {
    display: flex;
    height: 9px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,0.08);
}

.projection-home {
    background: linear-gradient(90deg, #00D1FF, #00FFA3);
}

.projection-away {
    background: linear-gradient(90deg, #7C5CFF, #00D1FF);
}

.match-card:hover .match-click-area {
    filter: brightness(1.08);
}

.card,
.card-compact,
.card-premium {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.card-compact {
    padding: var(--space-md);
}

.card-premium {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)),
        rgba(11,16,32,0.72);
    border-color: var(--color-border-strong);
    backdrop-filter: blur(18px);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.card-title,
.card-metric {
    color: var(--color-text);
    font-weight: 800;
}

.card-subtitle {
    color: var(--color-muted);
    font-size: 13px;
}

.status-pill,
.phase-pill,
.group-pill,
.source-pill,
.health-pill,
.status-chip,
.prediction-lab-meta span,
.trend-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

.metric-card,
.insight-card,
.sidebar-card,
.intelligence-card,
.jarvis-card,
.prediction-lab-match,
.challenge-stat,
.challenge-match,
.market-compare,
.perspective-strip > div,
.scenario-card,
.group-card,
.match-card,
.favorites-list,
.modal-analysis,
.match-projection,
.detail-stat,
.team-profile-hero,
.team-squad-kpis > div,
.team-profile-facts span,
.team-phase-grid > div,
.roster-group,
.h2h-row,
.match-h2h-summary,
.rating-grid > div,
.strength-grid > div {
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.032)),
        rgba(11,16,32,0.55);
    box-shadow: 0 16px 46px rgba(0,0,0,0.16);
}

.match-card,
.group-card,
.modal-card,
.team-profile-hero {
    border-radius: var(--radius-xl);
}

.match-card {
    padding: var(--space-xl);
    border-color: rgba(255,255,255,0.12);
    box-shadow: var(--shadow-soft);
}

.match-card:hover,
.group-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,209,255,0.44);
    box-shadow: var(--shadow-soft), var(--shadow-glow);
}

.match-card::before,
.group-card::before {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05), transparent 44%),
        radial-gradient(circle at top right, rgba(0,209,255,0.10), transparent 36%);
}

.match-card-header {
    margin-bottom: var(--space-lg);
}

.match-meta span,
.fav-btn,
.vs-block span {
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.09);
}

.team-code {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
}

.ai-prediction {
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(0,209,255,0.14), rgba(0,255,163,0.06)),
        rgba(0,209,255,0.05);
    border-color: rgba(0,209,255,0.28);
}

.betting-box {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.betting-box div,
.stat,
.scenario-metric,
.story-columns > div,
.story-note {
    border-radius: var(--radius-md);
    border-color: rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.045);
}

.flag-img,
.inline-flag,
.mini-flag,
.code-flag {
    border-radius: 999px;
}

.flag-img {
    width: 1.65em;
    height: 1.65em;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.28),
        0 7px 16px rgba(0,0,0,0.24);
    vertical-align: -0.44em;
}

.mini-flag,
.code-flag {
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.20);
}

.modal-flag-img {
    width: 88px;
    height: 58px;
    border-radius: var(--radius-lg);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.20),
        0 18px 34px rgba(0,0,0,0.25);
}


.jarvis-card > strong,
.scenario-card > strong {
    font-size: clamp(22px, 2vw, 28px);
}

.prediction-lab-view {
    gap: var(--space-sm);
}

.prediction-lab-match {
    background: rgba(255,255,255,0.045);
}

.prediction-lab-match summary {
    min-height: 58px;
    padding: 12px 14px;
    border-left: 3px solid transparent;
    transition: 0.2s ease;
}

.prediction-lab-match[open] summary,
.prediction-lab-match summary:hover {
    border-left-color: var(--color-primary);
    background: rgba(0,209,255,0.055);
}

.prediction-model-table {
    padding: 0 14px 12px;
}

.prediction-lab-meta {
    padding: 0 14px 12px;
}

.modal-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.032)),
        rgba(14,21,40,0.95);
    border-color: rgba(255,255,255,0.16);
    box-shadow: 0 42px 130px rgba(0,0,0,0.56), var(--shadow-glow);
}

.modal-close {
    border-radius: var(--radius-md);
}

.team-badge {
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.20), 0 18px 34px rgba(0,209,255,0.18);
}

.team-profile-hero {
    padding: var(--space-lg);
    background:
        linear-gradient(135deg, rgba(0,209,255,0.10), rgba(0,255,163,0.045)),
        rgba(255,255,255,0.045);
}

.player-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 9px 0;
    text-align: left;
}

.player-row small {
    display: block;
    margin-top: 3px;
}

.player-profile-grid .modal-analysis {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
.team-name:focus-visible,
.player-row:focus-visible,
.match-click-area:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

@media(max-width: 1200px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: relative;
        height: auto;
    }

    .matches-grid,
    .match-day-body,
    .hero-panel,
    .stats-row,
    .data-health-panel,
    .intelligence-summary,
    .jarvis-grid,
    .ensemble-grid,
    .contribution-grid,
    .challenge-scoreboard,
    .challenge-row,
    .market-compare,
    .perspective-strip,
    .challenge-pick-buttons,
    .ml-quality-cards,
    .ml-quality-grid,
    .tournament-tree,
    .rating-grid,
    .strength-grid,
    .groups-grid {
        grid-template-columns: 1fr;
    }

    .match-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .team-compact-kpis,
    .team-squad-kpis {
        grid-template-columns: 1fr;
    }

    .team-profile-hero,
    .team-profile-facts,
    .team-phase-grid,
    .roster-grid {
        grid-template-columns: 1fr;
    }

    .analysis-factor-row,
    .ml-quality-table-head,
    .ml-quality-table-row,
    .ml-disagreement-head,
    .story-columns,
    .ml-disagreement-row {
        grid-template-columns: 1fr;
    }

    .ml-ranking-card,
    .prediction-lab-match summary,
    .prediction-model-head,
    .prediction-model-row,
    .model-explain-row {
        grid-template-columns: 1fr;
    }

    .ml-ranking-position,
    .trend-pill {
        justify-self: start;
    }

    .ml-ranking-meta {
        grid-template-columns: 1fr;
    }

    .ml-debug-header {
        display: grid;
    }

    .ml-debug-actions {
        justify-content: flex-start;
    }

    .modal-overlay {
        padding: 16px;
    }

    .modal-card {
        max-height: calc(100vh - 32px);
        padding: 24px;
        border-radius: var(--radius-xl);
    }
}

/* Phase 51 final cascade override. */
.hero-panel{min-height:0!important;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr)!important;gap:14px!important;margin-bottom:12px!important}
.hero-panel>div,.insight-card,.metric-card{border-radius:8px!important;padding:14px!important}
.hero-panel h2{font-size:30px!important;margin-bottom:10px!important}.hero-panel p{font-size:13px!important;line-height:1.45!important}
.stats-row,.data-health-panel{gap:8px!important;margin-bottom:14px!important}.metric-card strong{font-size:20px!important}
.content-section,.jarvis-panel,.intelligence-panel{margin-top:36px!important;margin-bottom:24px!important}.section-header{margin-bottom:14px!important}.section-header h2{font-size:26px!important}
.jarvis-section-grid{gap:8px!important}.jarvis-card{min-height:0!important;padding:10px!important}.jarvis-card>strong{font-size:20px!important;line-height:1.15!important}
.team-inline{display:inline-flex!important;align-items:center!important;gap:7px!important;min-width:0!important;vertical-align:middle!important}.team-inline>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flag-img,.inline-flag,.mini-flag,.code-flag,.flag-fallback{width:28px!important;height:28px!important;min-width:28px!important;border-radius:999px!important;object-fit:cover!important;display:inline-grid!important;place-items:center!important;margin-right:0!important;background:rgba(255,255,255,.08)!important;color:#EAF2FF!important;font-size:10px!important;font-weight:800!important;vertical-align:middle!important}
.mini-flag{width:18px!important;height:18px!important;min-width:18px!important}.modal-flag-img{width:56px!important;height:56px!important;min-width:56px!important;border-radius:999px!important}.flag-code,.team-code,.mini-team-code{display:none!important}
.lab-day,.challenge-day,.scenario-rest{border:1px solid rgba(255,255,255,.09)!important;border-radius:8px!important;background:rgba(255,255,255,.035)!important;overflow:hidden!important}.lab-day>summary,.challenge-day>summary,.scenario-rest>summary{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:center!important;padding:10px 12px!important;cursor:pointer!important;list-style:none!important}
.lab-day-body,.challenge-day-body{display:grid!important;gap:6px!important;padding:8px!important}.prediction-lab-match summary{grid-template-columns:minmax(280px,1fr) 120px 90px 80px 130px!important;min-height:42px!important;padding:8px 10px!important}.prediction-lab-detail{display:grid!important;gap:8px!important;padding:0 10px 10px!important}
.compact-signal-row{display:grid!important;grid-template-columns:minmax(110px,1fr) 70px 70px 70px!important;gap:8px!important;align-items:center!important;padding:6px 8px!important;border-radius:8px!important;background:rgba(255,255,255,.04)!important;color:var(--color-text-secondary)!important;font-size:12px!important}.compact-signal-row strong{text-align:right!important;color:#fff!important}
.challenge-scoreboard{grid-template-columns:repeat(9,minmax(0,1fr))!important}.challenge-stat,.challenge-match{padding:8px!important}.challenge-teamline{display:grid!important;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)!important;gap:8px!important;align-items:center!important;padding:8px 0!important}.challenge-compact-facts{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}.challenge-compact-facts>div,.challenge-row>div{padding:7px 8px!important;border-radius:8px!important;background:rgba(255,255,255,.04)!important}
.war-room-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}.war-room-card{min-height:0!important}.war-room-list{display:grid!important;gap:5px!important}.war-room-row{display:grid!important;grid-template-columns:24px minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;min-height:30px!important;padding:6px 0!important;border-bottom:1px solid rgba(255,255,255,.06)!important}.war-room-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scenario-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.compact-scenario-card{min-height:0!important;padding:10px!important}.compact-scenario-card>strong{margin:8px 0!important;font-size:21px!important}.scenario-rest{grid-column:1/-1!important}.scenario-rest-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;padding:8px!important}
.group-card{padding:14px!important;border-radius:8px!important}.group-card-top{margin-bottom:8px!important}.group-card h3{font-size:18px!important;margin-bottom:8px!important}.group-team-list{display:grid!important;gap:5px!important;margin:10px 0!important}.group-team-row{display:grid!important;grid-template-columns:minmax(0,1fr) 48px!important;gap:8px!important;align-items:center!important;font-size:13px!important}.group-favorite{padding:8px!important;margin:8px 0 10px!important}.group-card button{min-height:34px!important;padding:8px 10px!important;border-radius:8px!important}
.match-card{padding:14px!important;border-radius:8px!important}.match-flag-watermark{display:none!important}.match-card-header{margin-bottom:10px!important}.stadium-line{margin:8px 0!important}.premium-teams{align-items:center!important;gap:10px!important}.team-name{font-size:18px!important;line-height:1.2!important}.betting-box{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
.tournament-tree{grid-template-columns:repeat(5,minmax(180px,1fr))!important;gap:10px!important;align-items:start!important}.tree-column{padding:12px!important;border-radius:8px!important}.tree-match{display:grid!important;gap:5px!important;margin-bottom:8px!important}.tree-team{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:34px!important;padding:7px 8px!important;border-radius:8px!important;border:1px solid rgba(255,255,255,.09)!important;background:rgba(255,255,255,.04)!important;color:#EAF2FF!important}.tree-team.winner{border-color:rgba(0,255,163,.34)!important;background:rgba(0,255,163,.10)!important;font-weight:800!important}.tree-team.muted{opacity:.72!important}.champion-card{margin-top:10px!important;padding:10px!important;border-radius:8px!important;background:rgba(0,255,163,.10)!important;border:1px solid rgba(0,255,163,.24)!important}
.modal-card{width:min(1080px,calc(100vw - 32px))!important;padding:22px!important;border-radius:12px!important}.modal-header{margin-bottom:12px!important}.modal-header h2{font-size:26px!important}.team-compact-kpis{grid-template-columns:.45fr 1.55fr!important}.team-squad-kpis{gap:6px!important}.team-squad-kpis>div,.team-phase-grid>div,.rating-grid>div{padding:8px!important}.compact-source-status{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:8px 0!important}.compact-source-status span,.compact-empty span{display:inline-flex!important;align-items:center!important;min-height:24px!important;padding:4px 8px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.045)!important;color:var(--color-text-secondary)!important;font-size:11px!important}.compact-empty{padding:8px!important;border-radius:8px!important;border:1px dashed rgba(255,255,255,.14)!important;background:rgba(255,255,255,.025)!important}.compact-empty p{margin-top:6px!important;color:var(--color-text-secondary)!important;font-size:12px!important}
.roster-grid{grid-template-columns:1fr!important}.roster-group{padding:0!important;overflow:hidden!important}.roster-group summary{display:flex!important;justify-content:space-between!important;padding:9px 10px!important;cursor:pointer!important;color:#00D1FF!important;font-weight:800!important;list-style:none!important}.player-row{display:grid!important;grid-template-columns:minmax(160px,1.1fr) minmax(140px,1fr) minmax(110px,auto)!important;gap:10px!important;align-items:center!important;padding:7px 10px!important;border-top:1px solid rgba(255,255,255,.06)!important}.player-row span,.player-row strong,.player-row small{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.player-row strong{color:#EAF2FF!important;font-size:12px!important;text-align:left!important}.player-row small{color:var(--color-text-secondary)!important;font-size:11px!important;text-align:right!important}

/* Phase 52: Design System 2.0 and premium product polish. */
.stats-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.hero-panel{grid-template-columns:minmax(0,1.35fr) minmax(340px,.85fr)!important}
.insight-card{border-left:3px solid rgba(0,255,163,.65)!important;background:linear-gradient(135deg,rgba(0,255,163,.10),rgba(255,255,255,.045))!important}
.insight-card span{color:#00FFA3!important;text-transform:uppercase!important;font-size:11px!important;font-weight:800!important;letter-spacing:0!important}
.data-status,.data-source-info{display:inline-flex!important;max-width:100%;margin:6px 8px 0 0!important;padding:5px 8px!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.09)!important;font-size:11px!important;color:var(--color-text-secondary)!important}
.jarvis-section{gap:8px!important}.jarvis-section h3{display:flex!important;align-items:center!important;gap:8px!important;font-size:12px!important;color:#00D1FF!important}.jarvis-section h3::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.08)}
.jarvis-section-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
.jarvis-card p{font-size:12px!important;line-height:1.35!important}.intelligence-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:4px 0!important}
.lab-day:not([open]){background:rgba(255,255,255,.025)!important}.lab-day>summary strong,.challenge-day>summary strong{font-size:13px!important}.lab-day>summary span,.challenge-day>summary span{color:var(--color-text-secondary)!important;font-size:12px!important}
.prediction-lab-match{box-shadow:none!important}.prediction-lab-match:not([open]) summary{background:transparent!important}.prediction-lab-match summary strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.match-quick-report{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)!important;gap:12px!important}
.match-quick-report h3{font-size:20px!important;margin:5px 0!important;color:#fff!important}.match-quick-report p,.match-quick-report span{color:var(--color-text-secondary)!important;font-size:12px!important}
.match-prediction-hero{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.match-prediction-hero>div{padding:10px!important;border-radius:8px!important;background:rgba(0,209,255,.07)!important;border:1px solid rgba(0,209,255,.15)!important}
.match-prediction-hero strong{display:block!important;margin-top:4px!important;color:#00FFA3!important;font-size:18px!important;line-height:1.15!important}
.match-probability-stack{grid-column:1/-1!important;display:grid!important;gap:6px!important}.advanced-match-section>summary{cursor:pointer!important;list-style:none!important;color:#00D1FF!important;font-weight:800!important}.advanced-match-section>summary::-webkit-details-marker{display:none!important}
.team-badge{display:flex!important;align-items:center!important;gap:4px!important;min-width:64px!important;min-height:64px!important;width:auto!important;padding:4px!important}
.team-profile-hero{grid-template-columns:120px minmax(0,1fr)!important;gap:14px!important;align-items:center!important;padding:12px!important}.team-profile-flag img,.profile-flag-fallback{width:112px!important;height:72px!important;border-radius:8px!important}
.team-profile-copy h3{font-size:24px!important}.team-profile-facts{display:flex!important;flex-wrap:wrap!important;gap:6px!important}.team-profile-facts span{padding:5px 8px!important;border-radius:999px!important;font-size:11px!important}
.roster-tabs{display:grid!important;gap:10px!important}.roster-tabs>input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.roster-tab-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
.roster-tab-list label{display:grid!important;place-items:center!important;min-height:34px!important;border-radius:8px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.04)!important;color:var(--color-text-secondary)!important;font-size:12px!important;font-weight:800!important;cursor:pointer!important}
.roster-tabs input:nth-of-type(1):checked~.roster-tab-list label:nth-child(1),.roster-tabs input:nth-of-type(2):checked~.roster-tab-list label:nth-child(2),.roster-tabs input:nth-of-type(3):checked~.roster-tab-list label:nth-child(3),.roster-tabs input:nth-of-type(4):checked~.roster-tab-list label:nth-child(4){background:rgba(0,209,255,.14)!important;border-color:rgba(0,209,255,.35)!important;color:#00D1FF!important}
.roster-tab-panel{display:none!important}.roster-tabs input:nth-of-type(1):checked~.roster-panel-gk,.roster-tabs input:nth-of-type(2):checked~.roster-panel-def,.roster-tabs input:nth-of-type(3):checked~.roster-panel-mid,.roster-tabs input:nth-of-type(4):checked~.roster-panel-att{display:block!important}
.roster-card-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:8px!important}
.player-card-row{display:grid!important;grid-template-rows:auto auto auto!important;align-content:start!important;min-height:86px!important;padding:10px!important;border-radius:8px!important;border:1px solid rgba(255,255,255,.09)!important;background:rgba(255,255,255,.04)!important;color:#fff!important;text-align:left!important;cursor:pointer!important}
.player-card-row strong,.player-card-row span,.player-card-row small{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.player-card-row span,.player-card-row small{color:var(--color-text-secondary)!important;font-size:12px!important}
.scenario-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}.scenario-chip-row span{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.08)!important}
.match-card::after{background:linear-gradient(135deg,rgba(0,209,255,.07),transparent 42%,rgba(0,255,163,.06))!important}.match-card:hover{transform:translateY(-2px)!important}.match-card .ai-prediction{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important}


/* Phase 53: Precision density repair and logical grouping fixes. */
.lab-day>summary,
.challenge-day>summary{
    justify-content:flex-start!important;
    min-height:44px!important;
    max-height:52px!important;
    padding:9px 12px!important;
}
.lab-day>summary strong,
.challenge-day>summary strong{
    display:inline-flex!important;
    align-items:center!important;
    gap:0!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:13px!important;
    line-height:1.2!important;
}
.lab-day>summary span,
.challenge-day>summary span{
    display:none!important;
}
.prediction-lab-match,
.challenge-match{
    border-radius:8px!important;
    overflow:hidden!important;
}
.prediction-lab-match>summary,
.challenge-match>summary{
    display:block!important;
    grid-template-columns:none!important;
    min-height:0!important;
    padding:8px 10px!important;
    cursor:pointer!important;
    list-style:none!important;
}
.prediction-lab-match>summary::-webkit-details-marker,
.challenge-match>summary::-webkit-details-marker,
.lab-day>summary::-webkit-details-marker,
.challenge-day>summary::-webkit-details-marker{
    display:none!important;
}
.compact-match-card{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:3px!important;
    max-width:680px!important;
}
.compact-match-card strong{
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    min-width:0!important;
    color:#fff!important;
    font-size:13px!important;
    line-height:1.2!important;
}
.compact-match-card span,
.compact-match-card small{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:var(--color-text-secondary)!important;
    font-size:12px!important;
    line-height:1.25!important;
}
.compact-match-card small{
    color:#7F8CB8!important;
    font-size:11px!important;
}
.challenge-detail-zone{
    display:grid!important;
    gap:8px!important;
    padding:0 10px 10px!important;
}
.challenge-compact-facts{
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;
}
.challenge-row{
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important;
    margin-bottom:0!important;
}
.challenge-pick-buttons{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
}
.challenge-pick-buttons button{
    min-height:32px!important;
    padding:6px 10px!important;
    border-radius:8px!important;
}
.challenge-score-input{
    max-width:220px!important;
    min-height:34px!important;
}
.roster-card-grid{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
    align-items:stretch!important;
}
.player-card-row{
    grid-template-rows:20px 18px 16px!important;
    min-height:76px!important;
    height:76px!important;
    gap:3px!important;
    padding:9px 10px!important;
}
.player-card-row strong{
    font-size:13px!important;
    line-height:20px!important;
}
.player-card-row span,
.player-card-row small{
    line-height:16px!important;
}
.roster-tab-list label{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
/* Phase 54: UI density and premium information architecture. */
.main-content{
    padding:24px 32px 56px!important;
}
.hero-copy h2{
    font-size:28px!important;
    line-height:1.08!important;
    margin-bottom:8px!important;
}
.hero-copy p{
    max-width:760px!important;
    margin-bottom:8px!important;
    font-size:13px!important;
    line-height:1.35!important;
}
.hero-actions{
    gap:8px!important;
    margin:8px 0 0!important;
}
.hero-actions button{
    min-height:34px!important;
    padding:7px 12px!important;
}
.insight-card{
    min-height:0!important;
    padding:14px!important;
}
.insight-card strong{
    font-size:22px!important;
    line-height:1.18!important;
}
.stats-row{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:0!important;
    margin:8px 0 10px!important;
    padding:8px 10px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.045)!important;
}
.stats-row .metric-card{
    display:inline-flex!important;
    align-items:baseline!important;
    gap:6px!important;
    min-height:0!important;
    padding:0 12px!important;
    border:0!important;
    border-right:1px solid rgba(255,255,255,.12)!important;
    border-radius:0!important;
    background:transparent!important;
}
.stats-row .metric-card:last-child{
    border-right:0!important;
}
.stats-row .metric-card span{
    margin:0!important;
    font-size:11px!important;
    color:#7F8CB8!important;
    text-transform:uppercase!important;
}
.stats-row .metric-card strong{
    font-size:15px!important;
    line-height:1.1!important;
    color:#EAF2FF!important;
}
.data-health-panel{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    margin:0 0 16px!important;
}
.data-health-card{
    min-height:0!important;
    padding:9px 10px!important;
}
.data-health-card span{
    margin-bottom:4px!important;
    font-size:11px!important;
}
.data-health-card strong{
    display:inline-flex!important;
    margin-right:6px!important;
    font-size:15px!important;
}
.data-health-card p{
    margin-top:4px!important;
    font-size:11px!important;
    line-height:1.25!important;
}
.content-section,
.jarvis-panel,
.intelligence-panel,
.ml-ranking-panel,
.ml-quality-panel{
    margin-top:22px!important;
    margin-bottom:16px!important;
}
.section-header,
.compact-header{
    margin-bottom:8px!important;
}
.section-header h2{
    font-size:22px!important;
    line-height:1.12!important;
}
.section-header p{
    font-size:12px!important;
    line-height:1.3!important;
}
.jarvis-grid{
    gap:8px!important;
}
.jarvis-section-grid{
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
    gap:6px!important;
}
.jarvis-card{
    padding:8px 10px!important;
    min-height:0!important;
}
.jarvis-card>span{
    margin-bottom:6px!important;
    font-size:11px!important;
}
.jarvis-card>strong{
    font-size:16px!important;
}
.jarvis-card p{
    margin-top:5px!important;
    font-size:11px!important;
    line-height:1.25!important;
}
.intelligence-list{
    display:grid!important;
    gap:2px!important;
}
.intelligence-row,
.group-team-row{
    display:grid!important;
    grid-template-columns:auto auto!important;
    justify-content:start!important;
    align-items:center!important;
    gap:8px!important;
    min-height:0!important;
    padding:3px 0!important;
    border-bottom:1px solid rgba(255,255,255,.055)!important;
}
.intelligence-row span,
.group-team-row .team-inline{
    max-width:190px!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.intelligence-row strong,
.group-team-row strong{
    font-size:12px!important;
    color:#00D1FF!important;
}
.lab-day-body,
.challenge-day-body{
    gap:4px!important;
    padding:6px!important;
}
.lab-day>summary,
.challenge-day>summary{
    min-height:38px!important;
    max-height:44px!important;
    padding:7px 10px!important;
}
.prediction-lab-match>summary,
.challenge-match>summary{
    padding:7px 9px!important;
}
.compact-match-card{
    max-width:520px!important;
    gap:2px!important;
}
.compact-match-card strong{
    font-size:12px!important;
}
.compact-match-card span,
.compact-match-card small{
    font-size:11px!important;
}
.prediction-lab-detail,
.challenge-detail-zone{
    gap:6px!important;
    padding:0 9px 8px!important;
}
.compact-signal-row{
    padding:5px 7px!important;
    font-size:11px!important;
}
.prediction-lab-score,
.prediction-lab-meta{
    padding:7px!important;
}
.challenge-scoreboard{
    grid-template-columns:repeat(auto-fit,minmax(86px,1fr))!important;
    gap:6px!important;
}
.challenge-stat{
    min-height:0!important;
    padding:6px 8px!important;
}
.challenge-stat span{
    font-size:10px!important;
}
.challenge-stat strong{
    font-size:15px!important;
}
.live-result-summary{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-content:start!important;
    gap:3px!important;
    max-width:520px!important;
    padding:7px 9px 3px!important;
}
.live-result-summary>span,
.live-result-summary small{
    color:var(--color-text-secondary)!important;
    font-size:11px!important;
}
.live-result-summary strong{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    color:#fff!important;
    font-size:12px!important;
}
.live-result-grid{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    padding:0 9px 8px!important;
}
.live-result-grid label{
    display:inline-grid!important;
    grid-template-columns:auto 56px!important;
    align-items:center!important;
    gap:6px!important;
}
.live-result-grid input,
.live-result-grid select{
    min-height:30px!important;
    padding:5px 7px!important;
}
.groups-grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
    gap:8px!important;
}
.group-card{
    padding:10px!important;
}
.group-card-top{
    display:flex!important;
    justify-content:flex-start!important;
    gap:8px!important;
    margin-bottom:6px!important;
}
.group-team-list{
    gap:0!important;
    margin:7px 0!important;
}
.group-favorite{
    display:none!important;
}
.group-card button{
    min-height:30px!important;
    padding:6px 9px!important;
}
.ml-ranking-list{
    gap:6px!important;
}
.ml-ranking-card{
    grid-template-columns:28px minmax(140px,1fr) auto auto auto!important;
    gap:8px!important;
    min-height:42px!important;
    padding:8px 10px!important;
    border-radius:8px!important;
}
.ml-ranking-position{
    width:24px!important;
    height:24px!important;
    font-size:12px!important;
}
.ml-ranking-main strong{
    font-size:13px!important;
}
.ml-ranking-main span,
.ml-ranking-score span,
.ml-ranking-meta span{
    font-size:10px!important;
}
.ml-ranking-score{
    display:inline-flex!important;
    align-items:baseline!important;
    gap:5px!important;
}
.ml-ranking-score strong{
    font-size:15px!important;
}
.ml-ranking-meta{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
}
.trend-pill{
    min-height:24px!important;
    padding:4px 7px!important;
    font-size:10px!important;
}
.team-modal-tabs{
    display:grid!important;
    gap:10px!important;
}
.team-modal-tabs>input{
    position:absolute!important;
    opacity:0!important;
    pointer-events:none!important;
}
.team-modal-tab-list{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    padding-bottom:4px!important;
    background:#080D19!important;
}
.team-modal-tab-list label{
    display:grid!important;
    place-items:center!important;
    min-height:32px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.045)!important;
    color:var(--color-text-secondary)!important;
    font-size:12px!important;
    font-weight:800!important;
    cursor:pointer!important;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease !important;
}
.team-modal-tab-list label:hover{
    color:var(--color-text)!important;
    border-color:rgba(255,255,255,.22)!important;
    background:rgba(255,255,255,.08)!important;
}
.team-modal-tab-panel{
    display:none!important;
    gap:8px!important;
}
#team-tab-overview:checked~.team-modal-tab-list label:nth-child(1),
#team-tab-roster:checked~.team-modal-tab-list label:nth-child(2),
#team-tab-form:checked~.team-modal-tab-list label:nth-child(3),
#team-tab-history:checked~.team-modal-tab-list label:nth-child(4){
    border-color:rgba(200,255,0,.40)!important;
    background:rgba(200,255,0,.10)!important;
    color:#C8FF00!important;
}
#team-tab-overview:checked~.team-panel-overview,
#team-tab-roster:checked~.team-panel-roster,
#team-tab-form:checked~.team-panel-form,
#team-tab-history:checked~.team-panel-history{
    display:grid!important;
}
.modal-scroll-body{
    display:block!important;
}
.team-profile-hero{
    grid-template-columns:86px minmax(0,1fr)!important;
    gap:10px!important;
    padding:10px!important;
}
.team-profile-flag img,
.profile-flag-fallback{
    width:78px!important;
    height:52px!important;
}
.team-profile-copy h3{
    font-size:20px!important;
}
.team-compact-kpis,
.rating-grid,
.strength-grid{
    gap:6px!important;
}
.team-squad-kpis{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.modal-analysis,
.match-projection,
.strength-grid>div{
    padding:9px 10px!important;
    margin-bottom:8px!important;
    border-radius:8px!important;
}
.modal-analysis h3,
.match-projection h3,
.strength-grid h3{
    margin-bottom:6px!important;
    font-size:13px!important;
}
.modal-analysis p,
.strength-grid li{
    font-size:12px!important;
    line-height:1.3!important;
}
.roster-card-grid{
    grid-template-columns:1fr!important;
    gap:4px!important;
}
.player-card-row{
    display:grid!important;
    grid-template-columns:minmax(160px,1.1fr) minmax(150px,1fr) minmax(110px,auto)!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    height:36px!important;
    min-height:36px!important;
    padding:6px 8px!important;
}
.player-card-row strong,
.player-card-row span,
.player-card-row small{
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.player-card-row small{
    text-align:right!important;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD HERO — Nächstes Spiel + Wichtigste Erkenntnis
   ═══════════════════════════════════════════════════════════════ */

.dashboard-hero {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-6) 0 0;
}

.hnm-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xl);
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.hnm-card.hnm-live {
    border-color: var(--color-win);
    box-shadow: 0 0 24px rgba(0, 214, 143, 0.08);
}

.hnm-eyebrow {
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.hnm-match-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.hnm-team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-xl);
    font-weight: 700;
}

.hnm-team--away {
    flex-direction: row-reverse;
    text-align: right;
    justify-content: flex-start;
}

.hnm-flag {
    width: 32px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.hnm-vs {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-muted);
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.hnm-meta {
    font-size: var(--text-xs);
    color: var(--color-muted);
}

.hnm-probs {
    display: flex;
    gap: var(--sp-2);
}

.hnm-prob {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--sp-3) var(--sp-2);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    min-width: 0;
}

.hnm-prob strong {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    color: var(--color-home);
}

.hnm-prob--draw strong {
    color: var(--color-draw);
}

.hnm-prob--away strong {
    color: var(--color-away);
}

.hnm-prob span {
    font-size: var(--text-2xs);
    color: var(--color-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ── Systemstatus Akkordeon ──────────────────────────────────── */

.dashboard-systemstatus {
    margin: var(--sp-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.dashboard-systemstatus > summary {
    padding: var(--sp-3) var(--sp-5);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-muted);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    user-select: none;
    transition: color var(--transition-ui);
    outline: none;
}

.dashboard-systemstatus > summary::-webkit-details-marker { display: none; }

.dashboard-systemstatus > summary::before {
    content: "▶";
    font-size: 9px;
    transition: transform var(--transition-ui);
    flex-shrink: 0;
}

.dashboard-systemstatus[open] > summary::before {
    transform: rotate(90deg);
}

.dashboard-systemstatus > summary:hover {
    color: var(--color-text);
}

.dashboard-systemstatus .stats-row {
    padding: var(--sp-2) var(--sp-5) var(--sp-4);
}

.dashboard-systemstatus .learning-panel-section {
    padding: 0 var(--sp-5) var(--sp-5);
}

/* ═══════════════════════════════════════════════════════════════
   VIEW TABS — Turnier-View (Lagezentrum / Turnierzentrale)
   ═══════════════════════════════════════════════════════════════ */

.view-tabs {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--sp-6);
}

.view-tab {
    padding: var(--sp-2) var(--sp-5);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: color var(--transition-ui), border-color var(--transition-ui);
    margin-bottom: -1px;
}

.view-tab:hover:not(.view-tab--active) {
    color: var(--color-text);
}

.view-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Phase 54.1: consistent list metrics and content-fit cards. */
.content-grid{
    display:grid!important;
    justify-content:start!important;
    align-items:start!important;
    gap:10px!important;
}

.content-grid--compact{
    grid-template-columns:repeat(auto-fit,minmax(280px,420px))!important;
}

.content-grid--balanced{
    grid-template-columns:repeat(auto-fit,minmax(360px,560px))!important;
}

.content-grid--wide{
    grid-template-columns:minmax(0,min(100%,760px))!important;
}

.content-card{
    width:100%!important;
    max-width:100%!important;
}

.content-card--fit{
    justify-self:start!important;
}

.content-card--wide{
    grid-column:1/-1!important;
    max-width:none!important;
}

.jarvis-section{
    width:100%!important;
    max-width:100%!important;
}

.jarvis-section-grid{
    grid-template-columns:repeat(auto-fit,minmax(280px,420px))!important;
    justify-content:start!important;
}

.groups-grid{
    grid-template-columns:repeat(auto-fit,minmax(280px,420px))!important;
    justify-content:start!important;
}

.group-card{
    max-width:420px!important;
}

.group-card-top{
    min-width:0!important;
}

.group-team-list,
.intelligence-list{
    display:grid!important;
    gap:4px!important;
    width:100%!important;
}

.list-metric-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(118px,150px)!important;
    align-items:center!important;
    column-gap:10px!important;
    min-width:0!important;
    min-height:30px!important;
    padding:5px 0!important;
    border-bottom:1px solid rgba(255,255,255,.055)!important;
}

.list-metric-row:last-child{
    border-bottom:0!important;
}

.list-metric-entity{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
}

.list-metric-rank{
    flex:0 0 18px!important;
    color:#7F8CB8!important;
    font-size:11px!important;
    font-weight:800!important;
    text-align:right!important;
}

.list-metric-label{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#EAF2FF!important;
    font-size:12px!important;
    font-weight:700!important;
}

.list-metric-measure{
    display:grid!important;
    grid-template-columns:minmax(74px,1fr) 42px!important;
    align-items:center!important;
    gap:7px!important;
    min-width:0!important;
}

.list-metric-bar-wrap{
    display:block!important;
    width:100%!important;
    height:7px!important;
    overflow:hidden!important;
    border-radius:999px!important;
    background:rgba(0,209,255,.13)!important;
    box-shadow:inset 0 0 0 1px rgba(0,209,255,.10)!important;
}

.list-metric-bar{
    display:block!important;
    height:100%!important;
    min-width:2px!important;
    border-radius:inherit!important;
    background:linear-gradient(90deg,#00D1FF,#8DEBFF)!important;
    box-shadow:0 0 12px rgba(0,209,255,.34)!important;
}

.list-metric-value{
    min-width:38px!important;
    color:#EAF2FF!important;
    font-size:12px!important;
    font-weight:800!important;
    text-align:right!important;
    white-space:nowrap!important;
}

.ml-ranking-list{
    grid-template-columns:repeat(auto-fit,minmax(420px,560px))!important;
    justify-content:start!important;
}

.ml-ranking-note{
    grid-column:1/-1!important;
    max-width:560px!important;
}

.ml-ranking-card{
    grid-template-columns:28px minmax(140px,1fr) minmax(72px,auto) minmax(170px,220px) auto!important;
    max-width:560px!important;
}

.ranking-metric-cluster{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
}

.ranking-metric-cluster .list-metric-row{
    grid-template-columns:54px minmax(104px,1fr)!important;
    min-height:20px!important;
    padding:1px 0!important;
    border-bottom:0!important;
}

.ranking-metric-cluster .list-metric-label{
    font-size:10px!important;
    color:var(--color-text-secondary)!important;
}

.ranking-metric-cluster .list-metric-measure{
    grid-template-columns:minmax(56px,1fr) 36px!important;
}

.prediction-lab-view,
.challenge-view{
    justify-content:start!important;
}

.lab-day,
.challenge-day{
    max-width:760px!important;
    width:100%!important;
}

.compact-match-card{
    width:min(100%,560px)!important;
}

@media (max-width: 768px){
    .content-grid,
    .content-grid--compact,
    .content-grid--balanced,
    .content-grid--wide,
    .groups-grid,
    .ml-ranking-list,
    .jarvis-section-grid{
        grid-template-columns:1fr!important;
        justify-content:stretch!important;
    }

    .content-card,
    .group-card,
    .ml-ranking-card,
    .lab-day,
    .challenge-day{
        max-width:none!important;
    }

    .list-metric-row{
        grid-template-columns:1fr!important;
        row-gap:4px!important;
    }

    .list-metric-measure{
        grid-template-columns:minmax(90px,140px) 42px!important;
        justify-content:start!important;
        padding-left:24px!important;
    }

    .ml-ranking-card{
        grid-template-columns:28px minmax(0,1fr)!important;
    }

    .ml-ranking-score,
    .ranking-metric-cluster,
    .trend-pill{
        grid-column:2!important;
        justify-self:start!important;
    }

    .ranking-metric-cluster .list-metric-row{
        grid-template-columns:54px minmax(128px,1fr)!important;
    }
}

/* Phase 55: product architecture, context-aware card widths, and dossier surfaces. */
.card-full{
    width:100%!important;
    max-width:none!important;
    grid-column:1/-1!important;
}

.card-medium{
    width:100%!important;
    max-width:560px!important;
}

.card-compact{
    width:100%!important;
    max-width:420px!important;
}

.metric-list-card{
    min-width:0!important;
}

.analysis-panel{
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.04)!important;
}

.content-row{
    min-width:0!important;
}

.product-section-system .jarvis-section-grid,
.product-section-model .jarvis-section-grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,320px))!important;
}

.product-section-team-insights .jarvis-section-grid{
    grid-template-columns:repeat(auto-fit,minmax(300px,420px))!important;
}

.product-section-team-insights .jarvis-card{
    max-width:420px!important;
}

.match-summary-row{
    display:grid!important;
    grid-template-columns:minmax(180px,1fr) minmax(260px,auto) auto!important;
    align-items:center!important;
    gap:10px!important;
    width:min(100%,720px)!important;
    max-width:720px!important;
}

.match-summary-facts{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    min-width:0!important;
}

.match-summary-facts span{
    display:grid!important;
    gap:1px!important;
    min-width:78px!important;
    padding:4px 7px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.04)!important;
    color:#EAF2FF!important;
    font-size:11px!important;
    font-weight:800!important;
}

/* ═══════════════════════════════════════════════════════════════
   VIEW SYSTEM — Navigation & Section Switching
   ═══════════════════════════════════════════════════════════════ */

.app-view {
    display: none;
}

.app-view.view-active {
    display: block;
    animation: viewFadeIn 0.18s ease;
}

@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   JARVIS VISUELLE IDENTITÄT
   Alles KI-generierte bekommt Violet — immer, überall, konsistent.
   ═══════════════════════════════════════════════════════════════ */

/* JARVIS-Badge: das "J" als Hexagon-Signet */
.jarvis-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-jarvis-dim);
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: var(--radius-full);
    padding: 3px 8px 3px 5px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-jarvis-soft);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.jarvis-badge::before {
    content: 'J';
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    background: var(--color-jarvis);
    clip-path: polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
    font-family: var(--font-display);
    font-size: 10px;
    color: #fff;
    flex-shrink: 0;
}

/* KI-generierte Inhalte: subtiler Violet-Glow am linken Rand */
[data-jarvis-content] {
    border-left: 2px solid var(--color-jarvis);
    padding-left: 10px;
}

/* Source Pills: ml-source bekommt Violet */
.source-pill.ml-source {
    background: var(--color-jarvis-dim);
    border-color: rgba(124,58,237,0.3);
    color: var(--color-jarvis-soft);
}

/* Spieltag Critical Badge */
.spieltag-critical-badge {
    background: rgba(255,61,90,0.12);
    border: 1px solid rgba(255,61,90,0.3);
    color: var(--color-loss);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ── View Transition ─────────────────────────────────────────── */
.app-view {
    animation: viewFadeIn 0.2s var(--ease-out) both;
}

/* Nav buttons (replace anchor links) */
.nav-btn {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-muted);
    text-align: left;
    padding: 14px 16px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}

.nav-btn:hover {
    background: rgba(200,255,0,0.07);
    color: var(--color-text);
}

.nav-btn.active {
    background: rgba(200,255,0,0.10);
    color: var(--color-primary);
    font-weight: 600;
}

.nav-secondary {
    margin-top: 12px;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-secondary-btn {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: rgba(138,158,194,0.65);
    text-align: left;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: color 160ms ease, background 160ms ease;
}

.nav-secondary-btn:hover {
    color: var(--color-muted);
    background: rgba(255,255,255,0.04);
}

.nav-secondary-btn.active {
    color: var(--color-primary);
    background: rgba(200,255,0,0.07);
}

/* ═══════════════════════════════════════════════════════════════
   DATA BANNER — Fehler, Warnungen, Status
   ═══════════════════════════════════════════════════════════════ */

.data-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
    border: 1px solid;
    animation: viewFadeIn 0.2s var(--ease-out) both;
}
.data-banner--error {
    background: rgba(255,61,90,0.1);
    border-color: rgba(255,61,90,0.3);
    color: #FF8FAB;
}
.data-banner--warn {
    background: rgba(255,184,0,0.08);
    border-color: rgba(255,184,0,0.25);
    color: #FFD166;
}
.data-banner--ok {
    background: rgba(0,214,143,0.07);
    border-color: rgba(0,214,143,0.2);
    color: #00D68F;
}
.data-banner__icon { font-size: 15px; flex-shrink: 0; }
.data-banner__msg  { flex: 1; }
.data-banner__retry {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: inherit;
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-ui);
}
.data-banner__retry:hover { background: rgba(255,255,255,0.14); }

/* Sidebar Refresh Button */
.sidebar-refresh-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 7px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-ui), border-color var(--transition-ui), color var(--transition-ui);
    text-align: left;
    letter-spacing: 0.2px;
}
.sidebar-refresh-btn:hover {
    background: rgba(200,255,0,0.07);
    border-color: rgba(200,255,0,0.2);
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING BANNER — einmalig, erster Besuch
   ═══════════════════════════════════════════════════════════════ */

.onboarding-banner {
    background: rgba(124, 58, 237, 0.15);
    border-bottom: 2px solid #7C3AED;
    padding: var(--sp-4) var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.onboarding-banner__body {
    flex: 1;
    min-width: 200px;
}

.onboarding-banner__title {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text);
    margin-bottom: 8px;
}

.onboarding-banner__list {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}

.onboarding-banner__list li strong {
    color: #DDE7FF;
}

.onboarding-banner__text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.6;
    min-width: 200px;
}

.onboarding-banner__dismiss {
    padding: var(--sp-2) var(--sp-4);
    background: rgba(124, 58, 237, 0.25);
    border: 1px solid #7C3AED;
    border-radius: var(--radius-md);
    color: var(--color-jarvis-soft);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition-ui);
}

.onboarding-banner__dismiss:hover {
    background: rgba(124, 58, 237, 0.4);
}

.onboarding-banner__dismiss:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   TRUST BANNER — kompakter Vertrauens-Indikator in der Topbar
   ═══════════════════════════════════════════════════════════════ */

.trust-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 0 16px;
    font-size: 12px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 28px;
}

.trust-banner-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}

.trust-banner-item--refresh {
    gap: 7px;
}

.trust-refresh-icon {
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1;
}

.trust-banner-item small {
    color: var(--color-muted);
    font-size: 11px;
}

.trust-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.trust-dot-green { background: #00FFA3; box-shadow: 0 0 6px rgba(0,255,163,0.5); }
.trust-dot-yellow { background: #FFD166; box-shadow: 0 0 6px rgba(255,209,102,0.5); }
.trust-dot-red { background: #FF8A4C; box-shadow: 0 0 6px rgba(255,138,76,0.5); }

/* ═══════════════════════════════════════════════════════════════
   SPIELTAG-BRIEF — Tages-Einstiegs-Ansicht
   ═══════════════════════════════════════════════════════════════ */

.spieltag-section {
    margin-bottom: 28px;
}

.spieltag-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.spieltag-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.spieltag-actions button {
    background: rgba(0,209,255,0.12);
    border: 1px solid rgba(0,209,255,0.26);
    color: #00D1FF;
    padding: 10px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: 0.2s;
}

.spieltag-actions button:hover {
    background: rgba(0,209,255,0.22);
}

.spieltag-actions button.secondary {
    background: rgba(0,255,163,0.08);
    border-color: rgba(0,255,163,0.22);
    color: #00FFA3;
}

.spieltag-brief-grid {
    display: grid;
    gap: 12px;
}

.spieltag-match-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    transition: border-color 0.2s;
}

.spieltag-match-card:hover {
    border-color: rgba(0,209,255,0.2);
}

.spieltag-match-left {
    display: grid;
    gap: 10px;
}

.spieltag-match-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.spieltag-teams {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
}

.spieltag-vs {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 400;
}

.spieltag-prediction {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.spieltag-prob-bar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    width: 120px;
    flex-shrink: 0;
}

.spieltag-prob-home { background: #00D1FF; }
.spieltag-prob-draw { background: rgba(255,255,255,0.22); }
.spieltag-prob-away { background: #00FFA3; }

.spieltag-prob-labels {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.spieltag-jarvis-pick {
    font-size: 13px;
    font-weight: 600;
    color: #EAF2FF;
}

.spieltag-match-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.spieltag-pick-buttons {
    display: flex;
    gap: 6px;
}

.spieltag-pick-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--color-text-secondary);
    padding: 7px 11px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: 0.15s;
    white-space: nowrap;
}

.spieltag-pick-btn:hover {
    background: rgba(0,209,255,0.12);
    border-color: rgba(0,209,255,0.3);
    color: #00D1FF;
}

.spieltag-pick-btn.active {
    background: rgba(0,209,255,0.2);
    border-color: rgba(0,209,255,0.5);
    color: #00D1FF;
    font-weight: 600;
}

.spieltag-pick-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.spieltag-confidence {
    font-size: 12px;
    color: var(--color-text-secondary);
    text-align: right;
}

.spieltag-empty {
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 32px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Mini hero (reduced from full hero) */
.mini-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    margin-bottom: 18px;
}

.insight-card-full {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(7,11,22,0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 8px 4px max(8px, env(safe-area-inset-bottom));
    z-index: 500;
    grid-template-columns: repeat(5, 1fr);
}

/* ── Mobile More Bottom Sheet ─────────────────────────────── */

.mobile-more-sheet {
    position: fixed;
    inset: 0;
    z-index: 600;
    pointer-events: none;
}

.mobile-more-sheet.open {
    pointer-events: auto;
}

.mobile-more-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.25s var(--ease-out);
}

.mobile-more-sheet.open .mobile-more-backdrop {
    opacity: 1;
}

.mobile-more-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border-strong);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s var(--ease-out);
}

.mobile-more-sheet.open .mobile-more-panel {
    transform: translateY(0);
}

.mobile-more-panel::before {
    content: "Weitere Ansichten";
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 0 16px 8px;
}

.mobile-more-handle {
    width: 40px;
    height: 4px;
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    margin: 0 auto var(--sp-5);
    cursor: grab;
}

.mobile-more-nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.mobile-more-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background var(--transition-ui), border-color var(--transition-ui);
}

.mobile-more-btn svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.mobile-more-btn:active,
.mobile-more-btn:focus-visible {
    background: var(--color-primary-dim);
    border-color: var(--color-primary);
    outline: none;
}

.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: rgba(184,193,236,0.6);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    padding: 10px 4px;
    min-height: 44px;
    border-radius: 10px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mobile-nav-btn.active {
    color: #00D1FF;
}

@media (max-width: 1024px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .main-content {
        padding: 18px 16px calc(80px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        display: grid;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }

    .topbar h1 {
        font-size: 26px;
    }

    .topbar-actions {
        width: 100%;
    }

    .topbar-actions input,
    .topbar-actions select {
        flex: 1;
        min-width: 0;
    }


    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-panel,
    .mini-hero {
        grid-template-columns: 1fr;
    }

    .spieltag-match-card {
        grid-template-columns: 1fr;
    }

    .spieltag-match-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TREND ARROWS — Δ im Team Ranking
   ═══════════════════════════════════════════════════════════════ */

.trend-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
}

.trend-delta-up {
    color: #00FFA3;
    background: rgba(0,255,163,0.1);
}

.trend-delta-down {
    color: #FF8A4C;
    background: rgba(255,138,76,0.1);
}

.trend-delta-flat {
    color: var(--color-text-secondary);
    background: rgba(255,255,255,0.05);
}

/* ═══════════════════════════════════════════════════════════════
   TEAM DNA COMPARE — Vergleichs-Modal
   ═══════════════════════════════════════════════════════════════ */

.team-compare-card {
    max-width: 780px;
}

.team-compare-body {
    display: grid;
    gap: 20px;
}

.compare-header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    text-align: center;
}

.compare-team-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.compare-team-col strong {
    font-size: 16px;
}

.compare-vs-label {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.compare-metric-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.compare-metric-row:last-child {
    border-bottom: none;
}

.compare-val {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.compare-val-a { color: #00D1FF; }
.compare-val-b { color: #00FFA3; }
.compare-val-win { opacity: 1; }
.compare-val-lose { opacity: 0.5; }

.compare-bar-wrap {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,0.07);
}

.compare-bar-a {
    background: linear-gradient(90deg, #00D1FF, #0099cc);
    transition: width 0.4s ease;
}

.compare-bar-b {
    background: linear-gradient(90deg, #00cc88, #00FFA3);
    margin-left: auto;
    transition: width 0.4s ease;
}

.compare-label {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.compare-section-title {
    font-size: 12px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    grid-column: 1 / -1;
}

.compare-team-group {
    font-size: 12px;
    color: rgba(184,193,236,0.6);
}

.compare-prediction-box {
    background: rgba(0,209,255,0.06);
    border: 1px solid rgba(0,209,255,0.15);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.compare-prediction-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.compare-prediction-result {
    font-size: 15px;
    display: block;
}
.compare-prediction-odds {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}
.compare-prediction-h2h {
    font-size: 12px;
    color: rgba(184,193,236,0.7);
    margin-top: 6px;
}

.compare-dossier-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.compare-dossier-col {
    background: rgba(255,255,255,0.035);
    border-radius: 10px;
    padding: 14px;
}

.compare-dossier-col h4 {
    font-size: 13px;
    margin-bottom: 8px;
    color: #EAF2FF;
}

.compare-dossier-col ul {
    list-style: none;
    display: grid;
    gap: 4px;
}

.compare-dossier-col ul li {
    font-size: 12px;
    color: var(--color-text-secondary);
    padding-left: 12px;
    position: relative;
}

.compare-dossier-col ul li::before {
    content: "·";
    position: absolute;
    left: 0;
}

/* Compare CTA on dossier cards */
.team-dossier-compare-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--color-text-secondary);
    padding: 5px 10px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    transition: 0.15s;
    margin-top: 6px;
}

.team-dossier-compare-btn:hover {
    border-color: rgba(0,209,255,0.35);
    color: #00D1FF;
    background: rgba(0,209,255,0.07);
}

.team-dossier-compare-btn.compare-selected {
    background: rgba(0,209,255,0.15);
    border-color: rgba(0,209,255,0.5);
    color: #00D1FF;
}

/* Compare team selection banner */
.compare-team-banner {
    background: rgba(0,209,255,0.08);
    border: 1px solid rgba(0,209,255,0.25);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #00D1FF;
}

.compare-team-banner button {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--color-text-secondary);
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   CONSENSUS ANALYSIS — JARVIS vs Markt Karte
   ═══════════════════════════════════════════════════════════════ */

.consensus-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 12px;
}

.consensus-row:last-child {
    border-bottom: none;
}

.consensus-teams {
    font-weight: 600;
    color: #EAF2FF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.consensus-jarvis { color: #00D1FF; }
.consensus-market { color: #FFD166; }

.consensus-gap {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255,138,76,0.15);
    color: #FF8A4C;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   VIEW-SPECIFIC HEADER ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Remove double padding in view containers */
.app-view > .content-section:first-child,
.app-view > .jarvis-panel:first-child,
.app-view > .ml-ranking-panel:first-child,
.app-view > .tournament-center-panel:first-child {
    margin-top: 0;
}

/* Sidebar model status chip */
#sidebarModelStatus {
    font-size: 14px !important;
}

.spieltag-day-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Team Dossier card now has a wrapper div */
.team-dossier-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.team-dossier-inner {
    all: unset;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    width: 100%;
    flex: 1;
}

.team-dossier-inner:focus-visible {
    outline: 2px solid rgba(0,209,255,0.5);
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   DOSSIER CARDS — neugestaltet
   ═══════════════════════════════════════════════════════════════ */

.team-dossiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.dossier-card {
    display: grid;
    grid-template-columns: 36px 1fr 32px;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dossier-card:hover, .dossier-card:focus-visible {
    border-color: rgba(0,209,255,0.35);
    box-shadow: 0 0 0 3px rgba(0,209,255,0.10);
    outline: none;
}
.dossier-card--top {
    border-color: rgba(255,209,102,0.2);
}
.dossier-card--top:hover {
    border-color: rgba(255,209,102,0.45);
    box-shadow: 0 0 0 3px rgba(255,209,102,0.10);
}

.dossier-rank {
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    line-height: 1;
}
.dossier-rank--gold   { color: #FFD166; }
.dossier-rank--silver { color: var(--color-text-secondary); }
.dossier-rank--bronze { color: #FF8A4C; }

.dossier-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.dossier-team-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.dossier-team-name {
    font-size: 14px;
    font-weight: 700;
    color: #EAF2FF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dossier-stat-row {
    display: flex;
    gap: 14px;
    align-items: center;
}
.dossier-stat {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dossier-stat span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(184,193,236,0.5);
    font-weight: 600;
}
.dossier-stat strong {
    font-size: 14px;
    font-weight: 800;
}

.dossier-compare-btn {
    all: unset;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(184,193,236,0.5);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.dossier-compare-btn:hover {
    border-color: rgba(0,209,255,0.4);
    color: #00D1FF;
    background: rgba(0,209,255,0.07);
}

/* ═══════════════════════════════════════════════════════════════
   SCENARIO CARDS — entpackt
   ═══════════════════════════════════════════════════════════════ */

.scenario-team-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #EAF2FF;
}

.scenario-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.scenario-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 5px 8px;
}
.scenario-stat span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(184,193,236,0.5);
    font-weight: 600;
}
.scenario-stat strong  { font-size: 13px; font-weight: 800; color: #EAF2FF; }
.scenario-stat--best strong  { color: #00FFA3; }
.scenario-stat--worst strong { color: #FF8A4C; }
.scenario-stat--base strong  { color: #00D1FF; }

/* ═══════════════════════════════════════════════════════════════
   LAGEZENTRUM HERO
   ═══════════════════════════════════════════════════════════════ */

.lc-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(0,255,163,0.12) 0%, transparent 55%),
        linear-gradient(135deg, rgba(0,255,163,0.07), rgba(0,209,255,0.04));
    border: 1px solid rgba(0,255,163,0.28);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 4px;
    box-shadow: 0 0 0 1px rgba(0,255,163,0.06), 0 12px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(0,255,163,0.12);
}

.lc-hero-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(0,255,163,0.7);
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.lc-hero-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lc-hero-flag {
    width: 48px !important;
    height: auto !important;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.lc-hero-team-name {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 900;
    color: #EAF2FF;
    letter-spacing: -0.5px;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
}

.lc-hero-value {
    font-size: 15px;
    font-weight: 800;
    color: #00FFA3;
    background: rgba(0,255,163,0.10);
    border: 1px solid rgba(0,255,163,0.2);
    border-radius: 20px;
    padding: 3px 12px;
    white-space: nowrap;
}

.lc-hero-copy {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 13px;
    color: rgba(184,193,236,0.8);
    line-height: 1.6;
    max-width: 560px;
}

.lc-hero-copy li {
    position: relative;
    padding-left: 14px;
    color: #DDE8FF;
    font-weight: 750;
}

.lc-hero-copy li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #00FFA3;
    box-shadow: 0 0 12px rgba(0,255,163,0.35);
}

.lc-hero-context {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

.lc-hero-stat {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 14px;
}
.lc-hero-stat span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(184,193,236,0.5);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}
.lc-hero-stat strong {
    font-size: 13px;
    font-weight: 700;
    color: #EAF2FF;
}
.lc-hero-stat--risk { border-color: rgba(255,138,76,0.2); }
.lc-hero-stat--risk span { color: rgba(255,138,76,0.7); }
.lc-hero-stat--critical { border-color: rgba(255,209,102,0.2); }
.lc-hero-stat--critical span { color: rgba(255,209,102,0.7); }

/* ═══════════════════════════════════════════════════════════════
   LAGEZENTRUM — FAVORITEN STRIP & CARDS
   ═══════════════════════════════════════════════════════════════ */

.lc-section {
    margin-top: 4px;
}

.lc-section-hdr {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.lc-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: rgba(184,193,236,0.6);
}
.lc-section-sub {
    font-size: 11px;
    color: rgba(184,193,236,0.35);
}

.lc-fav-strip {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lc-fav-row {
    display: grid;
    grid-template-columns: 22px 22px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-width: 0;
}
.lc-fav-row:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(0,209,255,0.25);
}
.lc-fav-row.lc-fav--gold   { border-color: rgba(255,209,102,0.25); }
.lc-fav-row.lc-fav--silver { border-color: rgba(184,193,236,0.18); }
.lc-fav-row.lc-fav--bronze { border-color: rgba(255,138,76,0.18); }

.lc-fav-rank {
    font-size: 11px;
    font-weight: 800;
    color: rgba(184,193,236,0.45);
    text-align: right;
}
.lc-fav-row.lc-fav--gold   .lc-fav-rank { color: #FFD166; }
.lc-fav-row.lc-fav--silver .lc-fav-rank { color: var(--color-text-secondary); }
.lc-fav-row.lc-fav--bronze .lc-fav-rank { color: #FF8A4C; }

.lc-fav-name {
    font-size: 13px;
    font-weight: 600;
    color: #EAF2FF;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-fav-bar-wrap {
    height: 5px;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
    max-width: 200px;
    width: 100%;
}
.lc-fav-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #00FFA3, #00D1FF);
    transition: width 0.5s ease;
}

.lc-fav-pct {
    font-size: 13px;
    font-weight: 800;
    color: #EAF2FF;
    min-width: 38px;
    text-align: right;
}
.lc-fav-row.lc-fav--gold   .lc-fav-pct { color: #FFD166; }

/* Karten-Grid */
.lc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.lc-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    border-left-width: 3px;
    overflow: hidden;
    transition: box-shadow 180ms ease, border-color 180ms ease;
}
.lc-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.lc-card--up   {
    border-left-color: #00FFA3;
    background: linear-gradient(135deg, rgba(0,255,163,0.07) 0%, rgba(255,255,255,0.03) 60%);
    box-shadow: -3px 0 18px rgba(0,255,163,0.08);
}
.lc-card--risk {
    border-left-color: #FF8A4C;
    background: linear-gradient(135deg, rgba(255,138,76,0.07) 0%, rgba(255,255,255,0.03) 60%);
    box-shadow: -3px 0 18px rgba(255,138,76,0.08);
}
.lc-card--warn {
    border-left-color: #FFD166;
    background: linear-gradient(135deg, rgba(255,209,102,0.07) 0%, rgba(255,255,255,0.03) 60%);
    box-shadow: -3px 0 18px rgba(255,209,102,0.08);
}
.lc-card--ok   {
    border-left-color: #00D1FF;
    background: linear-gradient(135deg, rgba(0,209,255,0.07) 0%, rgba(255,255,255,0.03) 60%);
    box-shadow: -3px 0 18px rgba(0,209,255,0.08);
}
.lc-card--info {
    border-left-color: rgba(167,139,250,0.8);
    background: linear-gradient(135deg, rgba(167,139,250,0.07) 0%, rgba(255,255,255,0.03) 60%);
    box-shadow: -3px 0 18px rgba(167,139,250,0.08);
}

.lc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px 9px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lc-card-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 800;
    color: rgba(184,193,236,0.7);
}
.lc-card-tip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    display: grid;
    place-items: center;
    font-size: 9px;
    color: rgba(184,193,236,0.5);
    cursor: help;
    font-style: italic;
    flex-shrink: 0;
}

.lc-card-list {
    padding: 4px 0;
}

/* Listzeilen mit Details */
.lc-row {
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lc-row:last-child { border-bottom: none; }

.lc-row > summary {
    display: grid;
    grid-template-columns: 18px 20px 1fr 56px 38px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s;
}
.lc-row > summary:hover { background: rgba(255,255,255,0.04); }
.lc-row[open] > summary { background: rgba(255,255,255,0.035); }

.lc-row-rank {
    font-size: 10px;
    font-weight: 700;
    color: rgba(184,193,236,0.35);
    text-align: right;
}
.lc-row-name {
    font-size: 12px;
    font-weight: 600;
    color: #EAF2FF;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lc-row-bar-wrap {
    height: 4px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
    width: 56px;
}
.lc-row-bar {
    height: 100%;
    border-radius: 2px;
    background: rgba(0,209,255,0.5);
    transition: width 0.4s ease;
}
.lc-card--up   .lc-row-bar { background: rgba(0,255,163,0.6); }
.lc-card--risk .lc-row-bar { background: rgba(255,138,76,0.6); }
.lc-card--warn .lc-row-bar { background: rgba(255,209,102,0.6); }
.lc-card--ok   .lc-row-bar { background: rgba(0,209,255,0.6); }

.lc-row-value {
    font-size: 12px;
    font-weight: 700;
    color: #EAF2FF;
    white-space: nowrap;
    text-align: right;
    width: 38px;
}

.lc-why-panel {
    padding: 8px 14px 10px 42px;
    font-size: 11px;
    color: rgba(184,193,236,0.65);
    line-height: 1.5;
    background: rgba(0,0,0,0.12);
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* Match Rows (Modell-Unsicherheit / -Einigkeit) */
.lc-match-row {
    display: grid;
    grid-template-columns: 18px 1fr 52px 40px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lc-match-row:last-child { border-bottom: none; }

.lc-match-pair {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lc-match-team {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #EAF2FF;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lc-match-team--away {
    color: rgba(184,193,236,0.6);
    font-size: 11px;
}
.lc-match-value {
    font-size: 11px;
    font-weight: 700;
    color: #EAF2FF;
    text-align: right;
    white-space: nowrap;
}

/* Group Rows (Schwerste Gruppen) */
.lc-group-row {
    display: grid;
    grid-template-columns: 18px 1fr 52px 40px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lc-group-row:last-child { border-bottom: none; }

.lc-group-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.lc-group-name {
    font-size: 12px;
    font-weight: 700;
    color: #EAF2FF;
}
.lc-group-flags {
    display: flex;
    gap: 3px;
    align-items: center;
}

/* Konsensbruch Rows */
.lc-consensus-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
}
.lc-consensus-row:last-child { border-bottom: none; }
.lc-consensus-match { color: var(--color-text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-consensus-pick  { color: #EAF2FF; font-weight: 600; white-space: nowrap; }
.lc-consensus-gap   { color: #FFD166; font-size: 11px; font-weight: 700; white-space: nowrap; }

/* BRACKET HINT */
.bracket-hint {
    font-size: 11px;
    color: rgba(184,193,236,0.45);
    font-style: italic;
}

/* Favorite item hover */
.favorite-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,209,102,0.15);
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 0.2s;
    cursor: pointer;
}

.favorite-item:hover {
    border-color: rgba(255,209,102,0.3);
}

.favorite-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.favorite-item-star { color: #FFD166; }
.favorite-item-vs {
    color: var(--color-text-secondary);
    font-size: 13px;
}
.favorite-item-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   JARVIS LEARNING PANEL
   ═══════════════════════════════════════════════════════════════ */

.learning-panel-section {
    margin-bottom: 28px;
}

.jarvis-learning-panel {
    display: grid;
    gap: 16px;
}

.learning-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(0,209,255,0.05);
    border: 1px solid rgba(0,209,255,0.15);
    border-radius: 12px;
}

.learning-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.learning-indicator strong {
    color: #EAF2FF;
}

.learning-active .learning-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00FFA3;
    box-shadow: 0 0 0 0 rgba(0,255,163,0.6);
    animation: learningPulse 2s infinite;
    flex-shrink: 0;
}

.learning-ready .learning-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFD166;
    flex-shrink: 0;
}

@keyframes learningPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,255,163,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(0,255,163,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,255,163,0); }
}

.learning-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.learning-explain-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 18px 22px;
}

.learning-explain-box h3 {
    font-size: 13px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.learning-explain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.learning-explain-grid > div {
    display: grid;
    gap: 4px;
}

.learning-explain-grid strong {
    font-size: 13px;
    color: #00D1FF;
}

.learning-explain-grid p {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.learning-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.learning-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px 16px;
}

.learning-section h4 {
    font-size: 12px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.learning-elo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
}

.learning-elo-row:last-child {
    border-bottom: none;
}

.learning-elo-val {
    color: var(--color-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.learning-accuracy-row {
    display: grid;
    grid-template-columns: 1fr 80px auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.learning-accuracy-row:last-child { border-bottom: none; }

.learning-accuracy-row span { color: var(--color-text-secondary); }
.learning-accuracy-row strong { color: #00D1FF; font-size: 13px; }
.learning-accuracy-row small { color: var(--color-text-secondary); opacity: 0.7; }

.learning-acc-bar-wrap {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.learning-acc-bar {
    height: 100%;
    background: linear-gradient(90deg, #00D1FF, #00FFA3);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.learning-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--color-text-secondary);
    padding: 8px 4px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}

.learning-reset-btn {
    background: rgba(255,138,76,0.1);
    border: 1px solid rgba(255,138,76,0.25);
    color: #FF8A4C;
    padding: 5px 14px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: 0.15s;
}

.learning-reset-btn:hover {
    background: rgba(255,138,76,0.2);
    border-color: rgba(255,138,76,0.4);
}

/* Prediction source label in match cards */
.prediction-source-badge {
    display: inline-block;
    font-size: 10px;
    color: #00FFA3;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0,255,163,0.1);
    border: 1px solid rgba(0,255,163,0.2);
    vertical-align: middle;
    margin-left: 4px;
}

@media (max-width: 768px) {
    .learning-results-grid { grid-template-columns: 1fr; }
    .learning-explain-grid { grid-template-columns: 1fr; }
    .learning-status-row   { flex-direction: column; align-items: flex-start; }
}




.match-summary-facts small{
    color:#7F8CB8!important;
    font-size:9px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
}

.prediction-lab-detail.analysis-panel,
.challenge-detail-zone.analysis-panel{
    max-width:760px!important;
    padding:8px 9px!important;
}

.team-profile-copy{
    min-width:0!important;
}

.team-dossier-strip{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:10px!important;
    max-width:620px!important;
}

.team-dossier-strip .list-metric-row{
    grid-template-columns:1fr!important;
    gap:4px!important;
    padding:7px 8px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.04)!important;
}

.team-dossier-strip .list-metric-measure{
    grid-template-columns:minmax(64px,1fr) 54px!important;
}

.team-roster-panel,
.team-phase-panel,
.team-h2h-panel,
.team-scenario-panel,
.team-advanced-data{
    max-width:none!important;
}

.tournament-tree{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
}

@media (max-width: 980px){
    .match-summary-row{
        grid-template-columns:1fr!important;
        align-items:start!important;
    }

    .bracket-rounds {
        grid-template-columns: 1fr 1fr !important;
    }
    .bracket-champion-col {
        grid-column: 1 / -1;
    }
}

/* 580px: Bracket scrollt horizontal (ab 680px greifen die Scroll-Regeln) */

@media (max-width: 768px){
    .card-full,
    .card-medium,
    .card-compact,
    .product-section-team-insights .jarvis-card{
        max-width:none!important;
    }

    .product-section-system .jarvis-section-grid,
    .product-section-model .jarvis-section-grid,
    .product-section-team-insights .jarvis-section-grid{
        grid-template-columns:1fr!important;
    }

.team-dossier-strip{
    grid-template-columns:1fr!important;
}
}

/* Phase 58: explainability and normal-user understanding. */
.explainable-kpi p,
.ranking-explain,
.why-panel,
.insight-reasons{
    color:var(--color-text-secondary)!important;
    font-size:11px!important;
    line-height:1.35!important;
}

.explainable-kpi strong{
    line-height:1.15!important;
}

.insight-reasons{
    display:grid!important;
    gap:5px!important;
    margin-top:10px!important;
}

.insight-reasons>span,
.why-panel>strong{
    color:#00D1FF!important;
    font-size:11px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
}

.why-list,
.insight-reasons ul{
    display:grid!important;
    gap:4px!important;
    margin:0!important;
    padding-left:16px!important;
}

.explainable-list-row{
    border-bottom:1px solid rgba(255,255,255,.055)!important;
}

.explainable-list-row:last-child{
    border-bottom:0!important;
}

.explainable-list-row>summary{
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr) minmax(92px,auto)!important;
    align-items:center!important;
    gap:8px!important;
    min-height:34px!important;
    padding:5px 0!important;
    cursor:pointer!important;
    list-style:none!important;
}

.explainable-list-row>summary::-webkit-details-marker,
.match-center-day>summary::-webkit-details-marker,
.match-center-match>summary::-webkit-details-marker{
    display:none!important;
}

.explainable-value{
    display:grid!important;
    justify-items:end!important;
    gap:1px!important;
    min-width:0!important;
}

.explainable-value small{
    color:#7F8CB8!important;
    font-size:9px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
}

.explainable-value strong{
    color:#EAF2FF!important;
    font-size:12px!important;
    white-space:nowrap!important;
}

.why-panel{
    display:grid!important;
    gap:5px!important;
    margin:0 0 6px 28px!important;
    padding:7px 8px!important;
    border-left:2px solid rgba(0,209,255,.38)!important;
    background:rgba(0,209,255,.045)!important;
    border-radius:0 8px 8px 0!important;
}

.scenario-card strong{
    font-size:14px!important;
    line-height:1.25!important;
}

.scenario-chip-row span{
    white-space:normal!important;
    line-height:1.25!important;
}

.ranking-explain{
    grid-column:2 / -1!important;
    margin:0!important;
}

@media (max-width:760px){
    .explainable-list-row>summary{
        grid-template-columns:20px minmax(0,1fr)!important;
    }

    .explainable-value{
        grid-column:2!important;
        justify-items:start!important;
    }
}

/* Phase 56: information architecture rebuild around user questions. */
.product-priority-section{
    scroll-margin-top:18px;
}

.war-room-panel{
    margin-top:18px;
}

.tournament-center-panel{
    display:grid;
    gap:12px;
}

.tournament-scenario-drawer{
    border:1px solid rgba(255,255,255,.10);
    border-radius:8px;
    background:rgba(255,255,255,.035);
}

.tournament-scenario-drawer>summary,
.match-center-admin>summary{
    cursor:pointer;
    list-style:none;
    padding:10px 12px;
    color:#00D1FF;
    font-size:12px;
    font-weight:800;
}

.match-center-panel{
    display:grid;
    gap:10px;
}

.match-center-tools{
    display:grid;
    gap:8px;
    max-width:980px;
}

.match-center-admin{
    border:1px solid rgba(255,255,255,.09);
    border-radius:8px;
    background:rgba(255,255,255,.03);
}

.match-center-admin .challenge-controls{
    padding:0 10px 10px;
}

.match-center-view{
    display:grid;
    gap:8px;
    max-width:980px;
}

.match-center-day{
    border:1px solid rgba(255,255,255,.09);
    border-radius:8px;
    background:rgba(255,255,255,.035);
    overflow:hidden;
}

.match-center-day>summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:40px;
    padding:8px 11px;
    cursor:pointer;
    list-style:none;
}

.match-center-day>summary strong{
    color:#EAF2FF;
    font-size:13px;
}

.match-center-day-body{
    display:grid;
    gap:5px;
    padding:7px;
}

.match-center-match{
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.035);
}

.match-center-match>summary{
    padding:7px 9px;
    cursor:pointer;
    list-style:none;
}

.match-center-detail{
    margin:0 7px 7px;
    padding:8px;
}


.match-center-result-grid{
    padding:0;
}

.match-center-deep-link{
    justify-self:start;
    min-height:30px;
    padding:6px 10px;
}

.team-dossiers-panel{
    margin-top:22px;
}

.team-dossiers-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,420px));
    justify-content:start;
    gap:10px;
}

.team-dossier-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
    align-items:start;
    padding:10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:8px;
    background:rgba(255,255,255,.045);
    color:#EAF2FF;
    text-align:left;
    cursor:pointer;
}

.team-dossier-card:hover,
.team-dossier-card:focus-visible{
    border-color:rgba(0,209,255,.38);
    box-shadow:0 0 0 3px rgba(0,209,255,.12);
}

.team-dossier-rank{
    color:#00D1FF;
    font-size:12px;
    font-weight:900;
}

.team-dossier-metrics{
    grid-column:1/-1;
    display:grid;
    gap:2px;
}

.team-dossier-metrics .list-metric-row{
    grid-template-columns:minmax(0,1fr) minmax(118px,150px);
    padding:3px 0;
}

.meta-intelligence-panel{
    margin-top:28px;
    border-top:1px solid rgba(255,255,255,.10);
    padding-top:18px;
}

.meta-intelligence-panel>.data-source-info{
    margin-bottom:8px;
}

.meta-quality-drawer{
    margin-top:10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:8px;
    background:rgba(255,255,255,.03);
}

.meta-quality-drawer>summary{
    cursor:pointer;
    list-style:none;
    padding:10px 12px;
    color:#00D1FF;
    font-size:12px;
    font-weight:800;
}

.meta-quality-drawer>.intelligence-summary,
.meta-quality-drawer>.ml-quality-view{
    padding:0 10px 10px;
}

@media (max-width: 768px){
    .team-dossiers-grid{
        grid-template-columns:1fr;
    }

    .team-dossier-metrics .list-metric-row{
        grid-template-columns:1fr;
    }
}

/* Ranking/metric bar repair: one blue bar system across the whole product. */
.list-metric-row,
.explainable-list-row>summary,
.ranking-metric-cluster .list-metric-row,
.team-dossier-metrics .list-metric-row,
.team-dossier-strip .list-metric-row{
    min-width:0!important;
}

.list-metric-bar-wrap{
    height:8px!important;
    border-radius:999px!important;
    background:rgba(0,209,255,.14)!important;
    box-shadow:inset 0 0 0 1px rgba(0,209,255,.16)!important;
}

.list-metric-bar{
    height:100%!important;
    min-width:2px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#00D1FF 0%,#6AE6FF 58%,#B7F5FF 100%)!important;
    box-shadow:0 0 12px rgba(0,209,255,.38)!important;
}

.mini-bar{
    background:rgba(0,209,255,.14)!important;
    box-shadow:inset 0 0 0 1px rgba(0,209,255,.16)!important;
}

.mini-bar div{
    background:linear-gradient(90deg,#00D1FF 0%,#6AE6FF 58%,#B7F5FF 100%)!important;
    box-shadow:0 0 12px rgba(0,209,255,.38)!important;
}

.list-metric-measure{
    grid-template-columns:minmax(96px,1fr) minmax(48px,auto)!important;
    gap:8px!important;
}

.explainable-value{
    min-width:170px!important;
    width:100%!important;
}

.explainable-value .list-metric-measure{
    width:100%!important;
    min-width:150px!important;
}

.ml-ranking-list{
    grid-template-columns:repeat(auto-fit,minmax(560px,760px))!important;
}

.ml-ranking-note{
    max-width:760px!important;
}

.ml-ranking-card{
    grid-template-columns:30px minmax(170px,1fr) minmax(92px,auto) minmax(300px,1.25fr) auto!important;
    max-width:760px!important;
    align-items:center!important;
}

.ranking-metric-cluster{
    gap:3px!important;
    min-width:300px!important;
}

.ranking-metric-cluster .list-metric-row{
    grid-template-columns:minmax(112px,auto) minmax(178px,1fr)!important;
    min-height:24px!important;
    padding:2px 0!important;
}

.ranking-metric-cluster .list-metric-label{
    color:#EAF2FF!important;
    font-size:11px!important;
    font-weight:800!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
}

.ranking-metric-cluster .list-metric-measure{
    grid-template-columns:minmax(118px,1fr) minmax(42px,auto)!important;
}

.ranking-metric-cluster .list-metric-value{
    min-width:36px!important;
}

.ranking-explain{
    grid-column:2 / 5!important;
    max-width:620px!important;
}

@media (max-width: 820px){
    .ml-ranking-list{
        grid-template-columns:1fr!important;
    }

    .ml-ranking-card{
        grid-template-columns:30px minmax(0,1fr)!important;
        max-width:none!important;
    }

    .ml-ranking-score,
    .ranking-metric-cluster,
    .ranking-explain,
    .trend-pill{
        grid-column:2!important;
    }

    .ranking-metric-cluster{
        min-width:0!important;
        width:100%!important;
    }

    .ranking-metric-cluster .list-metric-row{
        grid-template-columns:minmax(104px,auto) minmax(150px,1fr)!important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — Premium Components
   ═══════════════════════════════════════════════════════════════ */



/* Keyframes */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes numFlip {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes barGrow {
    from { width: 0; }
}

/* ── Glassmorphism 2.0 ───────────────────────────────────────── */
.sidebar {
    background: rgba(7,11,22,0.75) !important;
    backdrop-filter: blur(28px) saturate(1.6) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7,11,22,0.88);
    backdrop-filter: blur(22px) saturate(1.4);
    margin: -34px -42px 0;
    padding: 22px 42px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
@media (max-width: 768px) {
    .topbar { margin: -18px -16px 0; padding: 14px 16px 12px; }
}

/* ── Section Header Fluid Typography ────────────────────────── */
.section-header h2, .compact-header h2 {
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 800;
    letter-spacing: -0.5px;
}
.topbar h1 {
    font-size: clamp(20px, 2.5vw, 30px);
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* ── Spieltag Match Card (Premium Redesign) ─────────────────── */
.spieltag-brief-grid {
    display: grid;
    gap: 10px;
}

.st-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0 10px;
}
.st-day-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}
.st-day-date  { font-size: 16px; font-weight: 800; color: #EAF2FF; }
.st-day-count { font-size: 12px; color: var(--color-muted); }
.st-day-nav {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 4px 14px;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.st-day-nav:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
}
.st-day-nav:disabled {
    opacity: 0.2;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   PROGNOSE-KARTE — neu
   Electric Lime · Space Grotesk · Spring Animations
   ═══════════════════════════════════════════════════════════════ */

.st-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-ui),
                box-shadow var(--transition-ui),
                transform var(--transition-ui);
    animation: fadeSlideIn 0.28s var(--ease-out) both;
}
.st-card:hover {
    border-color: rgba(200,255,0,0.22);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), var(--color-primary-glow);
    transform: translateY(-2px);
}
.st-card.st-critical {
    border-color: rgba(255,61,90,0.35);
    box-shadow: 0 0 0 1px rgba(255,61,90,0.12) inset;
}
.st-card.st-locked { opacity: 0.6; }

/* ── Card Header ─────────────────────────────────────────────── */
.st-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    background: rgba(255,255,255,0.018);
    border-bottom: 1px solid var(--color-border);
    gap: 8px;
    font-family: var(--font-body);
}
.st-hdr-chips {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
}
.st-hdr-chip {
    font-size: 10px;
    font-weight: 600;
    border-radius: 5px;
    padding: 2px 7px;
    white-space: nowrap;
}
.st-hdr-chip--group {
    background: rgba(0,209,255,0.10);
    border: 1px solid rgba(0,209,255,0.20);
    color: rgba(0,209,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 9px;
    font-weight: 700;
}
.st-hdr-chip--time {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--color-text);
}
.st-hdr-chip--city {
    background: transparent;
    color: var(--color-muted);
    font-size: 10px;
    padding-left: 2px;
}
.st-hdr-info    { font-size: 10px; color: var(--color-muted); min-width: 0; letter-spacing: 0.3px; }
.st-hdr-badges  { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }

/* Confidence dot */
.st-hdr::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.conf-high   .st-hdr::after { background: var(--color-win);  box-shadow: 0 0 6px rgba(0,214,143,0.7); }
.conf-medium .st-hdr::after { background: var(--color-draw); box-shadow: 0 0 6px rgba(255,184,0,0.6); }
.conf-low    .st-hdr::after { background: var(--color-loss); box-shadow: 0 0 6px rgba(255,61,90,0.6); }

/* ── Card Body: 3-Spalten ────────────────────────────────────── */
.st-body {
    display: grid;
    grid-template-columns: 1fr 150px 1fr;
    align-items: center;
    padding: 18px 16px 12px;
    gap: 0;
}

.st-team { display: flex; flex-direction: column; gap: 4px; }
.st-team-home { align-items: flex-start; }
.st-team-away { align-items: flex-end; text-align: right; }

.st-team-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 115px;
    letter-spacing: -0.2px;
}

/* Große Prozent-Zahl — jetzt mit Display-Font */
.st-team-pct {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 38px);
    letter-spacing: 0;
    color: rgba(255,255,255,0.2);
    transition: color 0.3s var(--ease-out);
    line-height: 1;
}
.st-team-pct.pct-home-fav { color: var(--color-win); }
.st-team-pct.pct-away-fav { color: var(--color-away); }

/* ── Center Column ───────────────────────────────────────────── */
.st-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}
.st-vs-label {
    font-family: var(--font-display);
    font-size: 15px;
    color: rgba(255,255,255,0.15);
    letter-spacing: 3px;
}

/* ── Probability Bar — Spring Animation ──────────────────────── */
.st-prob-strip {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    gap: 2px;
}

/* Spring-Einfahrt: Segmente rollen nacheinander ein */
.st-ph {
    background: linear-gradient(90deg, var(--color-win), #00FFAA);
    border-radius: 5px 0 0 5px;
    transform-origin: left;
    animation: barSpring 0.7s var(--ease-spring) both;
}
.st-pd {
    background: var(--color-draw);
    opacity: 0.9;
    animation: barSpring 0.7s 0.06s var(--ease-spring) both;
}
.st-pa {
    background: linear-gradient(90deg, #CC2255, var(--color-loss));
    border-radius: 0 5px 5px 0;
    animation: barSpring 0.7s 0.12s var(--ease-spring) both;
}

@keyframes barSpring {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* Prozent-Labels unter dem Balken — proportional zu Balkenbreiten */
.st-prob-nums {
    display: flex;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}
.st-prob-nums span { text-align: center; overflow: hidden; }
.st-prob-nums span:nth-child(1) { color: var(--color-win); }
.st-prob-nums span:nth-child(2) { color: var(--color-draw); }
.st-prob-nums span:nth-child(3) { color: #FF6B8A; }

/* ── Markt-Vergleichsbalken (Buchmacher implizite Probs) ─────── */
.st-prob-strip--mkt {
    height: 5px;
    border-radius: 3px;
    margin-top: 3px;
    opacity: 0.55;
    gap: 2px;
}
.st-ph--mkt { background: var(--color-win); border-radius: 3px 0 0 3px; animation: none; }
.st-pd--mkt { background: var(--color-draw); animation: none; }
.st-pa--mkt { background: #FF6B8A; border-radius: 0 3px 3px 0; animation: none; }

.st-prob-nums--mkt {
    display: flex;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    opacity: 0.50;
    margin-top: 1px;
}
.st-prob-nums--mkt span { text-align: center; overflow: hidden; }
.st-prob-nums--mkt span:nth-child(1) { color: var(--color-win); }
.st-prob-nums--mkt span:nth-child(2) { color: var(--color-draw); }
.st-prob-nums--mkt span:nth-child(3) { color: #FF6B8A; }

/* ── Score-Split-Input ────────────────────────────────────────── */
.st-score-split {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.st-score-half {
    width: 44px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 16px;
    font-family: var(--font-mono);
    font-weight: 600;
    padding: 5px 0;
    text-align: center;
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
    appearance: textfield;
}
.st-score-half::-webkit-outer-spin-button,
.st-score-half::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-score-half:focus { border-color: rgba(200,255,0,0.45); }
.st-score-colon {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: rgba(255,255,255,0.45);
    line-height: 1;
}

.st-js-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-jarvis-soft);
    flex-shrink: 0;
}
.st-js-pred {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
}
.st-js-conf {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-muted);
    flex-shrink: 0;
}

/* ── Unified Prediction Panel ────────────────────────────────── */
.st-pred-panel {
    border-top: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
}
.st-pred-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    min-height: 40px;
}
.st-pred-row:last-child { border-bottom: none; }

/* Zeilenfarben */
.st-pred-row--strip  { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 14px 6px; background: rgba(0,0,0,0.15); }
.st-pred-row--jarvis { background: linear-gradient(90deg, rgba(124,58,237,0.20), rgba(0,209,255,0.06)); }
.st-pred-row--market { background: rgba(255,255,255,0.04); }
.st-pred-row--user   { background: linear-gradient(90deg, rgba(200,255,0,0.10), rgba(200,255,0,0.03)); }
.st-pred-row--input  { background: rgba(255,255,255,0.02); flex-wrap: wrap; gap: 6px; padding: 6px 14px; }
.st-pred-h2h {
    font-size: 10px;
    color: rgba(255,255,255,0.32);
    text-align: center;
    margin-top: 2px;
}

/* Badges (linke Pill) — feste Breite damit Score-Werte bündig starten */
.st-pred-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    padding: 2px 5px;
    flex-shrink: 0;
    width: 66px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.st-pred-badge--jarvis {
    color: #a78bfa;
    background: rgba(124,58,237,0.20);
}
.st-pred-badge--user {
    color: #C8FF00;
    background: rgba(200,255,0,0.12);
}

/* Score-Wert */
.st-pred-score {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text);
    flex: 1;
    letter-spacing: 0.04em;
}
.st-pred-score--user { color: #C8FF00; }

/* Odds-Block (MARKT) */
.st-pred-odds {
    display: flex;
    gap: 10px;
    flex: 1;
    font-size: 12px;
    font-family: var(--font-mono);
}

/* Meta rechts */
.st-pred-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.st-pred-meta-text {
    font-size: 10px;
    color: rgba(255,255,255,0.28);
    flex-shrink: 0;
    text-align: right;
}

/* Inline Score-Input */
.st-score-input--inline {
    flex: 1;
    min-width: 80px;
    max-width: 120px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 16px;
    font-family: var(--font-mono);
    padding: 5px 10px;
    outline: none;
    transition: border-color 0.15s;
}
.st-score-input--inline:focus { border-color: rgba(200,255,0,0.4); }

.st-score-save {
    background: rgba(200,255,0,0.12);
    border: 1px solid rgba(200,255,0,0.3);
    border-radius: 8px;
    color: var(--color-primary, #C8FF00);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.st-score-save:hover { background: rgba(200,255,0,0.22); }
.st-score-save:disabled { opacity: 0.35; cursor: default; }

/* ── Pick Buttons ────────────────────────────────────────────── */
.st-picks {
    display: grid;
    grid-template-columns: 1fr 52px 1fr;
    gap: 6px;
    padding: 10px 14px 14px;
}
.st-picks--center { width: 100%; padding: 8px 0 4px; }

.st-pick-btn {
    flex: 1 0 36px;
    min-width: 36px;
    min-height: 44px;
    padding: 9px 6px;
    border-radius: 9px;
    border: 1.5px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-ui);
    text-align: center;
    line-height: 1;
    display: block;
}
.st-pick-btn:hover:not(:disabled) {
    border-color: rgba(200,255,0,0.35);
    background: rgba(200,255,0,0.07);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
/* ── Aktive Pick-Buttons: Glow + Gradient + Pulse ────────────── */
@keyframes pickPulseHome {
    0%, 100% { box-shadow: inset 0 0 18px rgba(0,214,143,0.10), 0 0 14px rgba(0,214,143,0.28); }
    50%       { box-shadow: inset 0 0 26px rgba(0,214,143,0.18), 0 0 26px rgba(0,214,143,0.50); }
}
@keyframes pickPulseDraw {
    0%, 100% { box-shadow: inset 0 0 18px rgba(255,184,0,0.10), 0 0 14px rgba(255,184,0,0.28); }
    50%       { box-shadow: inset 0 0 26px rgba(255,184,0,0.18), 0 0 26px rgba(255,184,0,0.50); }
}
@keyframes pickPulseAway {
    0%, 100% { box-shadow: inset 0 0 18px rgba(255,107,138,0.10), 0 0 14px rgba(255,107,138,0.28); }
    50%       { box-shadow: inset 0 0 26px rgba(255,107,138,0.18), 0 0 26px rgba(255,107,138,0.50); }
}

.st-pick-btn.active-home {
    background: linear-gradient(160deg, rgba(0,214,143,0.20) 0%, rgba(0,214,143,0.06) 100%);
    border-color: rgba(0,214,143,0.65);
    color: #00F5A0;
    font-weight: 700;
    animation: pickPulseHome 2.8s ease-in-out infinite;
    transform: translateY(-1px);
}
.st-pick-btn.active-draw {
    background: linear-gradient(160deg, rgba(255,184,0,0.20) 0%, rgba(255,184,0,0.06) 100%);
    border-color: rgba(255,184,0,0.65);
    color: #FFD040;
    font-weight: 700;
    animation: pickPulseDraw 2.8s ease-in-out infinite;
    transform: translateY(-1px);
}
.st-pick-btn.active-away {
    background: linear-gradient(160deg, rgba(255,107,138,0.20) 0%, rgba(255,107,138,0.06) 100%);
    border-color: rgba(255,107,138,0.65);
    color: #FF6B8A;
    font-weight: 700;
    animation: pickPulseAway 2.8s ease-in-out infinite;
    transform: translateY(-1px);
}
.st-pick-btn:disabled { opacity: 0.28; cursor: not-allowed; transform: none; }
.st-locked-note { font-size: 10px; color: var(--color-muted); padding: 8px; text-align: center; }

/* ── KPI Rings ───────────────────────────────────────────────── */
.kpi-ring-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 18px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: border-color 0.2s, transform 0.15s;
    cursor: default;
}
.kpi-ring-card:hover {
    border-color: rgba(0,209,255,0.2);
    transform: translateY(-1px);
}
.kpi-ring {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: conic-gradient(
        var(--rc, #00D1FF) calc(var(--pct, 0) * 3.6deg),
        rgba(255,255,255,0.07) 0deg
    );
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background 0.6s;
}
.kpi-ring::before {
    content: '';
    position: absolute;
    inset: 9px;
    background: var(--color-bg-elevated);
    border-radius: 50%;
}
.kpi-ring-val {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 900;
    color: #EAF2FF;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}
.kpi-ring-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-muted);
    text-align: center;
}
.kpi-ring-sub {
    font-size: 11px;
    color: var(--color-muted);
    text-align: center;
    line-height: 1.4;
    min-height: 26px;
}

/* ── Form Sparklines ─────────────────────────────────────────── */
.form-spark {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 18px;
}
.spark-b { width: 5px; border-radius: 2px 2px 0 0; }
.spark-w { background: var(--color-win); }
.spark-d { background: var(--color-draw); opacity: 0.85; }
.spark-l { background: var(--color-loss); opacity: 0.7; }

.ranking-sparkline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ranking-sparkline-label {
    font-size: 9px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ── Datenbasis Panel ────────────────────────────────────────── */
.datenbasis-intro {
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: rgba(0,209,255,0.04);
    border: 1px solid rgba(0,209,255,0.1);
    border-radius: 10px;
}

.datenbasis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 900px) { .datenbasis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .datenbasis-grid { grid-template-columns: 1fr; } }

.db-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
}
.db-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--db-accent, var(--color-primary));
}
.db-num   { font-size: clamp(16px, 2.2vw, 22px); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -1px; color: var(--db-accent, var(--color-primary)); line-height: 1.1; }
.db-label { font-size: 12px; font-weight: 600; color: #EAF2FF; margin-top: 2px; }
.db-desc  { font-size: 11px; color: var(--color-muted); line-height: 1.45; margin-top: 4px; }

.data-flow-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 8px;
    font-size: 11px;
    color: rgba(184,193,236,0.5);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.data-flow-divider::before, .data-flow-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.07);
}

/* ── ML Ranking Card Left Border ────────────────────────────── */
.ml-ranking-card {
    position: relative;
    overflow: hidden;
}
.ml-ranking-card::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--color-primary), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}
.ml-ranking-card:hover::after { opacity: 1; }

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 768px) {
    .st-body { grid-template-columns: 1fr 120px 1fr; }
    .st-team-name { max-width: 80px; font-size: 12px; }
    .st-center { padding: 0 6px; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .st-footer { grid-template-columns: 1fr; }
    .st-jarvis-box { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* ═══════════════════════════════════════════════════════════════
   APP FOOTER
   ═══════════════════════════════════════════════════════════════ */

.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 16px 40px;
    border-top: 1px solid var(--color-border);
    background: rgba(255,255,255,0.015);
    font-size: 11px;
    color: var(--color-subtle);
    line-height: 1.5;
    margin-top: auto;
}

.app-footer__sep {
    color: var(--color-border);
}

@media (max-width: 600px) {
    .app-footer { flex-direction: column; gap: 4px; text-align: center; padding: 12px 20px; }
    .app-footer__sep { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMIERUNGEN — 375px / 480px
   ═══════════════════════════════════════════════════════════════ */

/* ── Turnierbaum: horizontales Scrollen statt Kollaps ─────────── */

.bracket-scroll-wrap {
    position: relative;
}

.bracket-scroll-hint {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 0 2px;
    font-size: 11px;
    color: rgba(184,193,236,0.35);
    letter-spacing: 0.3px;
    pointer-events: none;
    user-select: none;
}
.bracket-scroll-hint span:first-child,
.bracket-scroll-hint span:last-child {
    font-size: 14px;
    color: rgba(184,193,236,0.25);
}

@media (max-width: 680px) {
    /* Horizontales Scrollen — Bracket bleibt 4-spaltig und lesbar  */
    .bracket-scroll-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin: 0 -16px;
        padding: 0 16px 8px;
        /* scrollbar dezent stylen */
        scrollbar-width: thin;
        scrollbar-color: rgba(200,255,0,0.2) transparent;
    }
    .bracket-scroll-wrap::-webkit-scrollbar {
        height: 3px;
    }
    .bracket-scroll-wrap::-webkit-scrollbar-track {
        background: transparent;
    }
    .bracket-scroll-wrap::-webkit-scrollbar-thumb {
        background: rgba(200,255,0,0.25);
        border-radius: 2px;
    }

    /* Bracket behält seine 4-Spalten-Breite */
    .bracket-rounds {
        min-width: 660px !important;
        grid-template-columns: repeat(3, minmax(160px, 1fr)) 140px !important;
        min-height: 360px !important;
    }

    /* Connectors bleiben sichtbar */
    .bracket-round::after { display: block !important; }
    .bracket-matchup::before { display: block !important; }

    /* Swipe-Indikator einblenden */
    .bracket-scroll-hint { display: flex; }

    /* Champion-Spalte wieder normal (nicht mehr 1/-1) */
    .bracket-champion-col { grid-column: auto !important; }

    /* Bracket-Karten etwas kompakter */
    .bracket-champion-card { padding: 14px 8px; }
    .bracket-team { padding: 8px 10px; font-size: 11px; }
    .bracket-round-label { font-size: 9px; letter-spacing: 1px; }
}

/* ── Touch-Targets: nur auf Mobile (max-width: 768px) ─────────── */

@media (max-width: 768px) {
    /* Mobile Navigation (sowieso nur auf Mobile sichtbar) */
    .mobile-nav-btn {
        min-height: 44px;
        padding: 8px 4px;
    }

    /* Pick-Buttons auf Spielkarten */
    .st-pick-btn {
        min-height: 44px;
        padding: 12px 6px;
    }

    /* Bracket-Team-Buttons */
    .bracket-team {
        min-height: 40px;
    }

    /* Bracket Reset Button */
    .bracket-reset-btn {
        min-height: 36px;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    /* Spielkarten: Center-Spalte etwas schmaler */
    .st-body { grid-template-columns: 1fr 110px 1fr; }
    .st-center { padding: 0 4px; }

    /* Lagezentrum Hero: Kontext-Stats unter den Hauptinhalt */
    .lc-hero {
        grid-template-columns: 1fr;
    }
    .lc-hero-context {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }
    .lc-hero-stat {
        flex: 1 1 140px;
        padding: 8px 10px;
    }

    /* Team Dossier Stats lesbarer */
    .dossier-stat strong {
        font-size: 12px;
    }

    /* Ranking-Karten: Sparkline + Pill auf eigene Zeile */
    .ml-ranking-card {
        grid-template-columns: 28px 1fr !important;
        grid-template-rows: auto auto auto auto !important;
    }
    .ml-ranking-meta {
        grid-column: 1 / -1;
    }
    .ranking-sparkline-row {
        grid-column: 1 / -1;
    }
    .trend-pill {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .ml-ranking-score {
        grid-column: 2;
    }

    /* Topbar auf sehr kleinen Screens */
    .topbar h1 {
        font-size: 22px;
    }

    /* Scenario-Karten kompakter */
    .scenario-stats-row {
        gap: 4px;
    }
    .scenario-stat {
        padding: 4px 6px;
    }

    /* Lagezentrum Favoriten-Strip */
    .lc-fav-row {
        grid-template-columns: 18px 20px 1fr auto;
        padding: 7px 10px;
    }
    .lc-fav-bar-wrap {
        display: none;
    }

    /* JARVIS Intelligence kompakter */
    .jarvis-section-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Allgemeine Modal-Optimierung auf Mobile ───────────────────── */

@media (max-width: 480px) {
    .modal-card {
        max-height: calc(100svh - 24px);
        border-radius: 16px 16px 0 0;
        margin: auto 0 0;
    }

    /* Gruppen-Modal: Tabellenzeilen kompakter */
    .group-table-row {
        font-size: 11px;
        padding: 5px 8px;
    }

    /* Vergleichs-Modal: Metriken stacken */
    .compare-header-row {
        gap: 8px;
    }
    .compare-bar-wrap {
        height: 4px;
    }
}

/* ── Confidence-Glow auf Match-Karten ───────────────────────── */
.st-card.conf-high   { border-color: rgba(0,209,255,0.22); }
.st-card.conf-medium { border-color: rgba(255,209,102,0.2); }
.st-card.conf-low    { border-color: rgba(255,138,76,0.2); }

.st-card.conf-high:hover   { box-shadow: 0 8px 32px rgba(0,209,255,0.12), 0 0 0 1px rgba(0,209,255,0.15); }
.st-card.conf-medium:hover { box-shadow: 0 8px 32px rgba(255,209,102,0.1), 0 0 0 1px rgba(255,209,102,0.15); }
.st-card.conf-low:hover    { box-shadow: 0 8px 32px rgba(255,138,76,0.1),  0 0 0 1px rgba(255,138,76,0.15); }

/* ── Featured Match Card ─────────────────────────────────────── */
.st-featured-card {
    background: rgba(200,255,0,0.05);
    border: 1px solid rgba(200,255,0,0.2);
    border-radius: 16px;
    margin-bottom: 6px;
    animation: fadeSlideIn 0.25s ease both;
    box-shadow: 0 4px 24px rgba(200,255,0,0.08);
}

.st-featured-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(0,209,255,0.07);
    border-bottom: 1px solid rgba(0,209,255,0.12);
}

.st-featured-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #C8FF00;
    background: rgba(200,255,0,0.15);
    border: 1px solid rgba(200,255,0,0.3);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.st-featured-body {
    display: grid;
    grid-template-columns: 1fr 200px 1fr;
    align-items: center;
    padding: 22px 20px 18px;
    gap: 0;
}

.st-featured-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.st-featured-team-away { align-items: center; }

.featured-flag {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.12);
}

.insight-flag {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.12);
    vertical-align: middle;
    margin-right: 6px;
}

.flag-fallback.insight-flag {
    width: 34px;
    height: 34px;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
}

.flag-fallback.featured-flag {
    width: 52px;
    height: 52px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}

.st-featured-name {
    font-size: 15px;
    font-weight: 800;
    color: #EAF2FF;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-featured-pct {
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1.5px;
    color: rgba(255,255,255,0.35);
    line-height: 1;
    transition: color 0.3s;
}
.st-featured-pct.pct-home-fav { color: var(--color-home); }
.st-featured-pct.pct-away-fav { color: var(--color-away); }

.st-featured-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}

.st-featured-vs {
    font-size: 11px;
    color: rgba(184,193,236,0.4);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.st-featured-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 4px 0;
}
.st-featured-pick span { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-muted); }
.st-featured-pick strong { font-size: 15px; font-weight: 700; color: var(--color-success); }
.st-featured-pick small  { font-size: 10px; color: var(--color-muted); }

@media (max-width: 600px) {
    .st-featured-body { grid-template-columns: 1fr 140px 1fr; }
    .st-featured-name { font-size: 12px; }
    .st-featured-center { padding: 0 8px; }
}

/* Featured H2H line */
.st-featured-h2h {
    font-size: 10px;
    color: rgba(184,193,236,0.5);
    text-align: center;
    letter-spacing: 0.3px;
}

/* ── Pick-Button: Flag + Code — immer kompakt ────────────────── */
.pick-flag {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
}

.flag-fallback.pick-flag {
    width: 14px;
    height: 14px;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    background: none;
}

/* ── Sidebar Live-Countdown ──────────────────────────────────── */
.sidebar-countdown {
    margin-bottom: 12px;
}

.sidebar-countdown-inner {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    gap: 4px;
    transition: border-color 0.3s;
}

.sidebar-countdown-inner.countdown-live {
    border-color: rgba(0,255,163,0.3);
    background: rgba(0,255,163,0.04);
    animation: learningPulse 3s infinite;
}

.countdown-eyebrow {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-muted);
}

.countdown-label {
    font-size: 18px;
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: -0.5px;
    line-height: 1;
}

.countdown-live .countdown-label {
    color: var(--color-success);
}

.countdown-teams {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #EAF2FF;
    flex-wrap: wrap;
    margin-top: 2px;
}

.countdown-teams span {
    color: var(--color-muted);
    font-weight: 400;
    font-size: 10px;
}

.countdown-time {
    font-size: 10px;
    color: var(--color-muted);
    margin-top: 1px;
}

/* Pulsierender Live-Dot neben "Läuft gerade" */
.countdown-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-win);
    vertical-align: middle;
    margin-right: 3px;
    animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 0 0   rgba(0,214,143,0.5); }
    50%       { opacity: 0.8; transform: scale(1.15); box-shadow: 0 0 0 5px rgba(0,214,143,0); }
}

/* ── Group Card: Qualifikations-Highlighting ─────────────────── */
.group-card .group-team-list .list-metric-row:nth-child(1),
.group-card .group-team-list .list-metric-row:nth-child(2) {
    background: rgba(0,255,163,0.04);
    border-radius: 6px;
}
.group-card .group-team-list .list-metric-row:nth-child(3),
.group-card .group-team-list .list-metric-row:nth-child(4) {
    opacity: 0.7;
}

/* ── KPI Ring: font-size adaptiv bei kurzen Werten ───────────── */
.kpi-ring-val {
    font-size: 13px;
    white-space: nowrap;
    max-width: 48px;
    overflow: hidden;
    text-overflow: clip;
    text-align: center;
}

/* ── Card stagger animation ──────────────────────────────────── */
.st-card:nth-child(1) { animation-delay: 0ms; }
.st-card:nth-child(2) { animation-delay: 60ms; }
.st-card:nth-child(3) { animation-delay: 120ms; }
.st-card:nth-child(4) { animation-delay: 180ms; }
.st-card:nth-child(5) { animation-delay: 220ms; }

/* ═══════════════════════════════════════════════════════════════
   READABILITY PASS — contrast repair across JARVIS
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
    background:
        linear-gradient(180deg, rgba(9,14,27,0.96), rgba(7,12,22,0.94)) !important;
    border-right-color: rgba(175,192,230,0.16) !important;
}

.brand span,
.sidebar-card span,
.metric-card span,
.insight-card span,
.kpi-ring-label,
.countdown-eyebrow,
.st-hdr-info,
.st-js-label,
.data-status,
.data-source-info,
.trust-banner,
.trust-banner-item,
.spieltag-day-label,
.section-header p,
.compact-header p {
    color: var(--text-tertiary) !important;
}

.nav-btn {
    color: var(--text-secondary) !important;
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid transparent !important;
    font-weight: 700 !important;
}

.nav-btn:hover,
.nav-btn:focus-visible {
    color: #F4F8FF !important;
    background: rgba(0,209,255,0.10) !important;
    border-color: rgba(0,209,255,0.22) !important;
    outline: none;
}

.nav-btn.active {
    color: #06101A !important;
    background: linear-gradient(135deg, #C8FF00, #77F7FF) !important;
    border-color: rgba(200,255,0,0.45) !important;
    box-shadow: 0 10px 30px rgba(0,209,255,0.12), 0 0 0 1px rgba(255,255,255,0.16) inset;
}

.sidebar-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.04)) !important;
    border-color: var(--border-readable) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.24);
}

#sidebarModelStatus {
    color: #F8FBFF !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    text-shadow: 0 0 18px rgba(0,209,255,0.24);
}

#sidebarModelNote,
.sidebar-card p,
.sidebar-refresh-btn {
    color: var(--text-secondary) !important;
}

.sidebar-refresh-btn {
    background: rgba(255,255,255,0.065) !important;
    border-color: rgba(175,192,230,0.20) !important;
}

.sidebar-refresh-btn:hover {
    color: #06101A !important;
    background: linear-gradient(135deg, #C8FF00, #80F7FF) !important;
    border-color: rgba(200,255,0,0.45) !important;
}

.kpi-ring-card,
.metric-card,
.data-health-card,
.trust-banner-item,
.st-card,
.sidebar-countdown-inner {
    background: var(--surface-readable) !important;
    border-color: var(--border-readable) !important;
}

.kpi-ring-card:hover,
.metric-card:hover,
.st-card:hover {
    background: var(--surface-readable-hover) !important;
    border-color: rgba(0,209,255,0.32) !important;
}

.kpi-ring {
    background: conic-gradient(
        var(--rc, #00D1FF) calc(var(--pct, 0) * 3.6deg),
        rgba(175,192,230,0.18) 0deg
    ) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 10px 28px rgba(0,0,0,0.30);
}

.kpi-ring::before {
    background: #09101D !important;
}

.kpi-ring-val,
.metric-card strong,
.data-health-card strong,
.st-team-name,
.st-js-pred,
.countdown-teams,
.list-metric-label,
.list-metric-value {
    color: #F4F8FF !important;
}

.kpi-ring-sub,
.metric-card p,
.explainable-kpi p,
.data-health-card p,
.st-js-conf,
.st-day-count,
.countdown-time,
.db-desc,
.favorite-item p,
.ml-debug-status,
.perspective-status,
.model-comparison-note,
.compact-empty p {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}

.st-hdr {
    background: rgba(255,255,255,0.045) !important;
    border-bottom-color: rgba(175,192,230,0.16) !important;
}

.st-team-pct {
    color: rgba(244,248,255,0.72) !important;
}

.st-vs-label {
    color: rgba(244,248,255,0.58) !important;
}

.st-pick-btn:not(.active-home):not(.active-draw):not(.active-away) {
    color: #D9E4FF !important;
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(175,192,230,0.22) !important;
}
.st-pick-btn.active-home {
    background: linear-gradient(160deg, rgba(0,214,143,0.20), rgba(0,214,143,0.06)) !important;
    border-color: rgba(0,214,143,0.65) !important;
    color: #00F5A0 !important;
    animation: pickPulseHome 2.8s ease-in-out infinite !important;
}
.st-pick-btn.active-draw {
    background: linear-gradient(160deg, rgba(255,184,0,0.20), rgba(255,184,0,0.06)) !important;
    border-color: rgba(255,184,0,0.65) !important;
    color: #FFD040 !important;
    animation: pickPulseDraw 2.8s ease-in-out infinite !important;
}
.st-pick-btn.active-away {
    background: linear-gradient(160deg, rgba(255,107,138,0.20), rgba(255,107,138,0.06)) !important;
    border-color: rgba(255,107,138,0.65) !important;
    color: #FF6B8A !important;
    animation: pickPulseAway 2.8s ease-in-out infinite !important;
}

.st-pick-btn:hover:not(:disabled) {
    color: #06101A !important;
    background: linear-gradient(135deg, #C8FF00, #80F7FF) !important;
}

.st-pick-btn:disabled,
.st-card.st-locked {
    opacity: 0.72 !important;
}

.st-locked-note {
    color: var(--text-secondary) !important;
}

.group-card .group-team-list .list-metric-row:nth-child(3),
.group-card .group-team-list .list-metric-row:nth-child(4) {
    opacity: 1 !important;
}

.mobile-nav-btn {
    color: var(--text-secondary) !important;
}

.mobile-nav-btn.active {
    color: #77F7FF !important;
}

.app-footer {
    color: var(--text-secondary) !important;
    background: rgba(8,13,24,0.92) !important;
    border-top-color: rgba(175,192,230,0.18) !important;
}

.app-footer__changelog {
    color: #DDE8FF !important;
    font-weight: 700;
}

.app-footer__sep {
    color: rgba(175,192,230,0.45) !important;
}

.health-pill,
.source-pill,
.status-chip {
    color: #F4F8FF !important;
}

small,
.ranking-sparkline-label,
.bracket-scroll-hint,
.bracket-scroll-hint span:first-child,
.bracket-scroll-hint span:last-child,
.lc-card small,
.lc-fav-rank,
.lc-consensus-match {
    color: var(--text-tertiary) !important;
    opacity: 1 !important;
}

.compact-match-card small,
.stats-row .metric-card span,
.match-summary-facts small,
.st-featured-vs,
.st-featured-h2h,
.st-featured-pick span,
.st-featured-pick small,
.ranking-metric-cluster .list-metric-label,
.team-dossier-strip .list-metric-label,
.team-dossier-strip .list-metric-rank,
.team-squad-kpis small,
.team-compact-kpis small,
.scenario-stat span,
.lc-hero-stat span,
.lc-card small {
    color: var(--text-tertiary) !important;
    opacity: 1 !important;
}

.st-featured-pct {
    color: rgba(244,248,255,0.74) !important;
}

.compare-val-lose {
    opacity: 0.82 !important;
}

.match-summary-row,
.prediction-lab-match,
.challenge-match,
.lab-day,
.challenge-day,
.team-dossier-strip .list-metric-row {
    border-color: var(--border-readable) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LAGEZENTRUM GROUP MODERNIZATION
   ═══════════════════════════════════════════════════════════════ */
.war-room-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.war-room-panel .lc-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 12px !important;
}


/* Lagezentrum contrast polish: ranks, headings and secondary team names */
.war-room-panel .lc-section-label,
.war-room-panel .lc-card-title {
    color: #DDE8FF !important;
    font-weight: 900 !important;
    letter-spacing: 1.1px !important;
}

.war-room-panel .lc-section-sub {
    color: var(--text-secondary) !important;
}

.war-room-panel .lc-card-tip {
    color: #EAF2FF !important;
    background: rgba(0,209,255,0.12) !important;
    border-color: rgba(0,209,255,0.28) !important;
    font-weight: 900 !important;
}

.war-room-panel .lc-row-rank {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
    background: rgba(175,192,230,0.12) !important;
    border: 1px solid rgba(175,192,230,0.20) !important;
    color: #DDE8FF !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.war-room-panel .lc-card--up .lc-row-rank {
    color: #00FFA3 !important;
    background: rgba(0,255,163,0.11) !important;
    border-color: rgba(0,255,163,0.24) !important;
}

.war-room-panel .lc-card--risk .lc-row-rank {
    color: #FFB088 !important;
    background: rgba(255,138,76,0.12) !important;
    border-color: rgba(255,138,76,0.24) !important;
}

.war-room-panel .lc-card--warn .lc-row-rank {
    color: #FFD166 !important;
    background: rgba(255,209,102,0.12) !important;
    border-color: rgba(255,209,102,0.26) !important;
}

.war-room-panel .lc-card--ok .lc-row-rank {
    color: #7DEBFF !important;
    background: rgba(0,209,255,0.12) !important;
    border-color: rgba(0,209,255,0.26) !important;
}

.war-room-panel .lc-row-name,
.war-room-panel .lc-match-team,
.war-room-panel .lc-match-team--away,
.war-room-panel .lc-group-name,
.war-room-panel .lc-consensus-match {
    color: #F4F8FF !important;
    opacity: 1 !important;
    font-weight: 750 !important;
}

.war-room-panel .lc-match-team--away {
    color: #C7D4F6 !important;
    font-size: 12px !important;
}

.war-room-panel .lc-row-value,
.war-room-panel .lc-match-value,
.war-room-panel .lc-consensus-pick,
.war-room-panel .lc-consensus-gap {
    color: #F4F8FF !important;
    font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════════════════
   LAGEZENTRUM — COMPACT GROUP STRENGTH GRID
   ═══════════════════════════════════════════════════════════════ */

/* #1 rank badge: larger, more prominent */
.lc-fav-rank--first {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
    background: rgba(255,209,102,0.18) !important;
    border: 1px solid rgba(255,209,102,0.45) !important;
    color: #FFD166 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 0 10px rgba(255,209,102,0.22) !important;
}

.lc-group-compact-section {
    padding: 16px;
    border: 1px solid rgba(175,192,230,0.15);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(0,209,255,0.06), rgba(255,209,102,0.04)),
        rgba(10,16,28,0.76);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.lc-group-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
    margin-top: 10px;
}

.lc-group-compact-row {
    display: grid;
    grid-template-columns: 52px auto 1fr 34px;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    border-bottom: 1px solid rgba(175,192,230,0.09);
    min-width: 0;
}

.lc-group-compact-row:last-child,
.lc-group-compact-row:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.lc-group-compact-name {
    font-size: 11px;
    font-weight: 900;
    color: #DDE8FF;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.lc-group-compact-flags {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.lc-group-compact-bar-wrap {
    height: 5px;
    background: rgba(175,192,230,0.12);
    border-radius: 999px;
    overflow: hidden;
    min-width: 40px;
}

.lc-group-compact-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00D1FF, #7C3AED 80%);
    box-shadow: 0 0 10px rgba(0,209,255,0.15);
}

.lc-group-compact-score {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 900;
    color: rgba(184,193,236,0.65);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 680px) {
    .lc-group-compact-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TURNIERZENTRALE REWORK — KO-Runden- und Titelpfade
   ═══════════════════════════════════════════════════════════════ */
.tournament-center-panel {
    gap: 14px !important;
}

.tournament-scenario-drawer {
    border-color: rgba(175,192,230,0.16) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, rgba(124,58,237,0.08), rgba(0,209,255,0.045)),
        rgba(12,18,32,0.78) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.20);
    overflow: hidden;
}

.tournament-scenario-drawer > summary {
    min-height: 46px;
    padding: 13px 16px !important;
    color: #DDE8FF !important;
    background: rgba(255,255,255,0.035);
    border-bottom: 1px solid rgba(175,192,230,0.12);
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.tournament-center-panel .scenario-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
}

.tournament-center-panel .scenario-rest {
    grid-column: 1 / -1 !important;
    border-color: rgba(175,192,230,0.14) !important;
    border-radius: 12px !important;
    background: rgba(8,13,24,0.60) !important;
}

.tournament-center-panel .scenario-rest > summary {
    min-height: 40px;
    padding: 10px 12px !important;
    color: var(--text-secondary) !important;
    font-weight: 850 !important;
}

.tournament-center-panel .scenario-rest-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
}

.tournament-center-panel .scenario-card {
    display: grid !important;
    grid-template-rows: minmax(34px, auto) 1fr !important;
    align-content: stretch !important;
    min-height: 118px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(175,192,230,0.17) !important;
    background:
        radial-gradient(circle at top right, rgba(124,58,237,0.12), transparent 44%),
        rgba(8,13,24,0.78) !important;
    color: #F4F8FF !important;
    transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}

.tournament-center-panel .scenario-card:hover,
.tournament-center-panel .scenario-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(0,209,255,0.34) !important;
    background:
        radial-gradient(circle at top right, rgba(0,209,255,0.14), transparent 44%),
        rgba(13,21,36,0.92) !important;
    outline: none;
}

.tournament-center-panel .scenario-team-row {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin: 0 0 10px !important;
    color: #F4F8FF !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.tournament-center-panel .scenario-team-row .team-inline {
    min-width: 0;
}

.tournament-center-panel .scenario-team-row .team-inline span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tournament-center-panel .scenario-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-self: end !important;
    height: 100% !important;
}

.tournament-center-panel .scenario-rest-grid .scenario-stats-row {
    grid-template-columns: 1fr !important;
}

.tournament-center-panel .scenario-stat {
    display: grid !important;
    grid-template-rows: 18px 1fr !important;
    align-content: stretch !important;
    min-height: 54px !important;
    padding: 8px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(175,192,230,0.12) !important;
    background: rgba(255,255,255,0.045) !important;
}

.tournament-center-panel .scenario-stat span {
    display: block !important;
    color: var(--text-tertiary) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.55px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

.tournament-center-panel .scenario-stat strong {
    display: flex !important;
    align-items: end !important;
    min-height: 24px !important;
    margin: 0 !important;
    color: #F4F8FF !important;
    font-family: var(--font-mono);
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.tournament-center-panel .scenario-stat--best strong {
    color: #00FFA3 !important;
}

.tournament-center-panel .scenario-stat--base strong {
    color: #77F7FF !important;
}

.tournament-center-panel .scenario-stat--worst strong {
    color: #FFB088 !important;
}

@media (max-width: 620px) {
    .tournament-center-panel .scenario-grid {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
    }

    .tournament-center-panel .scenario-card {
        min-height: 110px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TEAM RANKING REWORK
   ═══════════════════════════════════════════════════════════════ */
.ml-ranking-panel {
    gap: 14px !important;
}

.ml-ranking-panel .ml-ranking-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.ml-ranking-panel .ml-ranking-note {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(175,192,230,0.16) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(135deg, rgba(0,209,255,0.08), rgba(0,255,163,0.04)),
        rgba(8,13,24,0.72) !important;
}

.ml-ranking-panel .ml-ranking-note-text {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    text-align: right;
}

.ml-ranking-panel .ml-ranking-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 46px minmax(180px, 1fr) minmax(150px, 190px) minmax(330px, 1.35fr) minmax(96px, auto) !important;
    grid-template-rows: auto auto !important;
    gap: 10px 14px !important;
    align-items: stretch !important;
    min-height: 112px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 12px !important;
    border: 1px solid rgba(175,192,230,0.16) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at top left, rgba(0,209,255,0.10), transparent 42%),
        rgba(8,13,24,0.80) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.19) !important;
    color: #F4F8FF !important;
    overflow: hidden !important;
}

.ml-ranking-panel .ml-ranking-card--leader {
    border-color: rgba(0,255,163,0.30) !important;
    background:
        radial-gradient(circle at top left, rgba(0,255,163,0.16), transparent 42%),
        radial-gradient(circle at top right, rgba(0,209,255,0.10), transparent 40%),
        rgba(8,13,24,0.84) !important;
}

.ml-ranking-panel .ml-ranking-card:hover,
.ml-ranking-panel .ml-ranking-card:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgba(0,209,255,0.36) !important;
    background:
        radial-gradient(circle at top left, rgba(0,209,255,0.15), transparent 42%),
        rgba(13,21,36,0.94) !important;
    outline: none !important;
}

.ml-ranking-panel .ml-ranking-position {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    align-self: stretch !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: auto !important;
    min-height: 88px !important;
    border: 1px solid rgba(175,192,230,0.18) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,0.055) !important;
    color: #F4F8FF !important;
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
}

.ml-ranking-panel .ml-ranking-card--podium .ml-ranking-position {
    color: #071019 !important;
    background: linear-gradient(135deg, #00FFA3, #77F7FF) !important;
    border-color: rgba(0,255,163,0.42) !important;
    box-shadow: 0 0 28px rgba(0,255,163,0.12) !important;
}

.ml-ranking-panel .ml-ranking-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

.ml-ranking-panel .ml-ranking-main strong {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: #F4F8FF !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.ml-ranking-panel .ml-ranking-main strong span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml-ranking-panel .ml-ranking-main span,
.ml-ranking-panel .ml-ranking-score > span,
.ml-ranking-panel .ranking-sparkline-label {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: 0.55px !important;
    text-transform: uppercase !important;
}

.ml-ranking-panel .ranking-sparkline-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 30px !important;
    margin: 0 !important;
}

.ml-ranking-panel .form-spark {
    height: 28px !important;
}

.ml-ranking-panel .ml-ranking-score {
    grid-column: 3 !important;
    grid-row: 1 / -1 !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    align-content: stretch !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(175,192,230,0.14) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,0.045) !important;
}

.ml-ranking-panel .ml-ranking-score-value {
    display: flex !important;
    align-items: end !important;
    gap: 4px !important;
}

.ml-ranking-panel .ml-ranking-score-value strong {
    color: #F4F8FF !important;
    font-family: var(--font-mono) !important;
    font-size: 26px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

.ml-ranking-panel .ml-ranking-score-max {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.ml-ranking-panel .ml-ranking-score-bar-wrap {
    align-self: center !important;
    width: 100% !important;
    height: 7px !important;
    border-radius: 99px !important;
    background: rgba(255,255,255,0.10) !important;
    overflow: hidden !important;
}

.ml-ranking-panel .ml-ranking-score-bar {
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #00FFA3, #77F7FF) !important;
}

.ml-ranking-panel .ranking-metric-cluster {
    grid-column: 4 !important;
    grid-row: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-self: stretch !important;
    min-width: 0 !important;
}

.ml-ranking-panel .ranking-metric-cluster .list-metric-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    gap: 6px !important;
    min-height: 88px !important;
    padding: 9px !important;
    border: 1px solid rgba(175,192,230,0.13) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.045) !important;
}

.ml-ranking-panel .ranking-metric-cluster .list-metric-entity {
    min-width: 0 !important;
}

.ml-ranking-panel .ranking-metric-cluster .list-metric-rank {
    display: none !important;
}

.ml-ranking-panel .ranking-metric-cluster .list-metric-label {
    color: var(--text-secondary) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.ml-ranking-panel .ranking-metric-cluster .list-metric-measure {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: 1fr auto !important;
    align-items: end !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.ml-ranking-panel .ranking-metric-cluster .list-metric-value {
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    align-self: end !important;
    color: #F4F8FF !important;
    font-family: var(--font-mono) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.ml-ranking-panel .ranking-metric-cluster .list-metric-bar-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 5px !important;
    border-radius: 99px !important;
    background: rgba(255,255,255,0.10) !important;
}

.ml-ranking-panel .ranking-metric-cluster .list-metric-bar {
    background: linear-gradient(90deg, #00D1FF, #00FFA3) !important;
}

.ml-ranking-panel .trend-pill {
    grid-column: 5 !important;
    grid-row: 1 / -1 !important;
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 92px !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 0.45px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

@media (max-width: 1180px) {
    .ml-ranking-panel .ml-ranking-card {
        grid-template-columns: 46px minmax(180px, 1fr) minmax(145px, 180px) minmax(94px, auto) !important;
        grid-template-rows: auto auto auto !important;
    }

    .ml-ranking-panel .ml-ranking-position {
        grid-row: 1 / 3 !important;
    }

    .ml-ranking-panel .ranking-metric-cluster {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    .ml-ranking-panel .trend-pill {
        grid-column: 4 !important;
    }
}

@media (max-width: 768px) {
    .ml-ranking-panel .ml-ranking-note {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .ml-ranking-panel .ml-ranking-note-text {
        text-align: left !important;
    }

    .ml-ranking-panel .ml-ranking-card {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto auto !important;
        gap: 10px !important;
        min-height: 0 !important;
    }

    .ml-ranking-panel .ml-ranking-position {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        min-height: 74px !important;
    }

    .ml-ranking-panel .ml-ranking-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .ml-ranking-panel .ranking-sparkline-row {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .ml-ranking-panel .ml-ranking-score,
    .ml-ranking-panel .ranking-metric-cluster,
    .ml-ranking-panel .trend-pill {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .ml-ranking-panel .ranking-metric-cluster {
        grid-template-columns: 1fr !important;
    }

    .ml-ranking-panel .ranking-metric-cluster .list-metric-row {
        min-height: 58px !important;
    }

    .ml-ranking-panel .trend-pill {
        justify-self: start !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GRUPPENÜBERSICHT DESIGN REWORK
   ═══════════════════════════════════════════════════════════════ */
#groups.content-section {
    gap: 14px !important;
}

#groups .section-header {
    margin-bottom: 4px !important;
}

#groups .groups-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 12px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
}

#groups .group-card {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto auto !important;
    gap: 10px !important;
    align-content: stretch !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
    color: #F4F8FF !important;
    cursor: pointer !important;
    overflow: hidden !important;
    backdrop-filter: blur(18px) !important;
    transition: 0.3s !important;
}

#groups .group-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.055), transparent 36%),
        radial-gradient(circle at bottom left, rgba(0,255,163,0.08), transparent 42%) !important;
    opacity: 0.88 !important;
    pointer-events: none !important;
}

#groups .group-card:hover,
#groups .group-card:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgba(0,209,255,0.36) !important;
    background:
        radial-gradient(circle at top right, rgba(0,209,255,0.17), transparent 42%),
        rgba(13,21,36,0.94) !important;
    box-shadow: 0 22px 54px rgba(0,0,0,0.24), 0 0 30px rgba(0,209,255,0.08) !important;
    outline: none !important;
}

#groups .group-card > * {
    position: relative;
    z-index: 1;
}

#groups .group-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(175,192,230,0.12) !important;
}

#groups .group-card-top span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 6px 9px !important;
    border: 1px solid rgba(0,209,255,0.24) !important;
    border-radius: 999px !important;
    background: rgba(0,209,255,0.10) !important;
    color: #77F7FF !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.6px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

#groups .group-card-top strong {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

#groups .group-card .source-pill {
    justify-self: start !important;
    margin: 0 !important;
    max-width: 100% !important;
}

#groups .group-team-list {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    align-content: start !important;
}

/* ═══════════════════════════════════════════════════════════════
   CHALLENGE WIDGET + TOAST
   ═══════════════════════════════════════════════════════════════ */

#dashboardChallengeWidget {
    padding: 0 var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
}

.cw-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-jarvis, #7C3AED);
    border-radius: var(--radius-card, 12px);
    padding: 12px 16px;
}

.cw-cta-icon {
    font-size: 1.4rem;
    color: var(--color-jarvis, #7C3AED);
    flex-shrink: 0;
    line-height: 1;
}

.cw-cta-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cw-cta-content strong {
    color: var(--color-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

.cw-cta-content span {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.cw-board {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 12px);
    padding: 10px 16px;
}

.cw-stats {
    display: flex;
    gap: 24px;
}

.cw-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.cw-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.cw-of {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.cw-lbl {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.cw-winning {
    color: var(--color-primary, #C8FF00);
}

.cw-accuracy {
    font-size: 0.6rem;
    color: #a78bfa;
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
}

.cw-link {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-ui, all 0.2s);
    flex-shrink: 0;
}

.cw-link:hover {
    border-color: var(--color-primary, #C8FF00);
    color: var(--color-primary, #C8FF00);
}

.st-pick-confirm {
    display: block;
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.6875rem;
    color: var(--color-primary, #C8FF00);
    margin-top: 4px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Score-Tipp Eingabe (Spieltag-Karte) ─────────────────────── */
.st-score-input {
    display: block;
    grid-column: 1 / -1;
    width: 80px;
    margin: 8px auto 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    padding: 5px 10px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}
.st-score-input:focus {
    border-color: var(--color-primary, #C8FF00);
    background: rgba(255,255,255,0.09);
}
.st-score-input::placeholder { color: rgba(255,255,255,0.3); }

/* ── Uhrzeit fett in Karten-Header ──────────────────────────── */
.st-kickoff-time {
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Locked-State: Tipp-Anzeige nach Anpfiff ─────────────────── */
.st-locked-pick {
    display: block;
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary, #C8FF00);
    padding: 4px 0 2px;
}
.st-locked-score {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 1px 6px;
}

/* ── Toast ───────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--color-bg-elevated, #1a1a2e);
    border-left: 3px solid var(--color-primary, #C8FF00);
    color: var(--color-text-primary, #fff);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    white-space: nowrap;
}

.toast--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   JARVIS EXPLANATION PANEL
   ═══════════════════════════════════════════════════════════════ */

.st-explain-btn {
    background: transparent;
    border: 1px solid var(--color-jarvis, #7C3AED);
    color: var(--color-jarvis, #7C3AED);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    line-height: 1;
}

.st-explain-btn:hover {
    background: var(--color-jarvis, #7C3AED);
    color: #fff;
}

.st-explanation {
    border-top: 1px solid rgba(124, 58, 237, 0.25);
    padding: 12px 14px;
    background: rgba(124, 58, 237, 0.07);
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}

.exp-why {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0 0 10px;
    line-height: 1.45;
}

.exp-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exp-drivers li {
    font-size: 0.75rem;
    color: var(--color-text-primary);
    padding-left: 16px;
    position: relative;
}

.exp-drivers li::before {
    content: "▲";
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.5rem;
    color: var(--color-primary, #C8FF00);
}

.exp-risks li {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    padding-left: 16px;
    position: relative;
}

.exp-risks li::before {
    content: "⚠";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.65rem;
    color: var(--color-draw);
}

.exp-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 8px;
}

.exp-features-hdr {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 2px;
}

.exp-feat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exp-feat-lbl {
    font-size: 0.75rem;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.exp-feat-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.exp-feat-bar-wrap {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.exp-feat-bar {
    height: 100%;
    background: var(--color-jarvis, #7C3AED);
    border-radius: 3px;
}

.exp-feat-pct {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.75);
    min-width: 28px;
    text-align: right;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   INTELLIGENCE TEAM FILTER
   ═══════════════════════════════════════════════════════════════ */

.intel-team-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 16px;
}

.intel-team-filter label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-weight: 500;
}

.intel-team-filter select {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 8px;
    padding: 6px 32px 6px 12px;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 200px;
    transition: border-color 0.15s;
}

.intel-team-filter select:focus {
    outline: none;
    border-color: var(--color-primary, #C8FF00);
}

.intel-team-filter select option {
    background: var(--color-bg-surface, #0d0d1a);
}

.intel-no-data {
    padding: 12px 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.intel-team-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════
   SKELETON SCREENS
   ═══════════════════════════════════════════════════════════════ */

@keyframes skel-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skel-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 100%
    );
    background-size: 400px 100%;
    animation: skel-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* ── Ranking Skeleton ──────────────────────────────────────── */
.skel-ranking-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 12px);
    padding: 14px 16px;
}

.skel-pos {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skel-bars {
    width: 90px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.skel-line {
    height: 10px;
    border-radius: 5px;
}

.skel-line--wide  { width: 75%; }
.skel-line--mid   { width: 55%; }
.skel-line--narrow{ width: 40%; }
.skel-line--full  { width: 100%; }
.skel-line--big   { height: 22px; border-radius: 6px; width: 60%; }

/* ── Jarvis Card Skeleton ─────────────────────────────────── */
/* ── Brand Status Dot ────────────────────────────────────────── */
.brand-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 5px;
    flex-shrink: 0;
    transition: background 0.4s, box-shadow 0.4s;
}

.brand-status--loading {
    background: rgba(255,255,255,0.2);
}

.brand-status--green {
    background: var(--color-win);
    box-shadow: 0 0 6px rgba(34,197,94,0.6);
    animation: brand-dot-pulse 2.5s ease-in-out infinite;
}

.brand-status--yellow {
    background: var(--color-draw);
    box-shadow: 0 0 5px rgba(245,158,11,0.5);
}

.brand-status--red {
    background: var(--color-loss);
    box-shadow: 0 0 6px rgba(239,68,68,0.7);
    animation: brand-dot-pulse 1s ease-in-out infinite;
}

@keyframes brand-dot-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.skel-jarvis-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 12px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 90px;
}

#groups .group-team-list .list-metric-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(98px, 116px) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 8px !important;
    border: 1px solid rgba(175,192,230,0.11) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.045) !important;
}

#groups .group-team-list .list-metric-row:nth-child(1),
#groups .group-team-list .list-metric-row:nth-child(2) {
    border-color: rgba(0,255,163,0.20) !important;
    background: rgba(0,255,163,0.055) !important;
}

#groups .group-team-list .list-metric-row:nth-child(3),
#groups .group-team-list .list-metric-row:nth-child(4) {
    border-color: rgba(255,209,102,0.15) !important;
    background: rgba(255,209,102,0.035) !important;
}

#groups .group-team-list .list-metric-entity {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

#groups .group-team-list .list-metric-rank {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    border: 1px solid rgba(175,192,230,0.15) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.055) !important;
    color: #DDE8FF !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-align: center !important;
}

#groups .group-team-list .list-metric-row:nth-child(1) .list-metric-rank,
#groups .group-team-list .list-metric-row:nth-child(2) .list-metric-rank {
    color: #071019 !important;
    background: linear-gradient(135deg, #00FFA3, #77F7FF) !important;
    border-color: rgba(0,255,163,0.34) !important;
}

#groups .group-team-list .list-metric-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #F4F8FF !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

#groups .group-team-list .list-metric-measure {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

#groups .group-team-list .list-metric-bar-wrap {
    width: 100% !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.10) !important;
    overflow: hidden !important;
}

#groups .group-team-list .list-metric-bar {
    height: 100% !important;
    border-radius: inherit !important;
    background: #00D1FF !important;
    box-shadow: 0 0 10px rgba(0,209,255,0.4) !important;
}

#groups .group-team-list .list-metric-value {
    color: #F4F8FF !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#groups .group-favorite {
    display: block !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 11px !important;
    border: 1px solid rgba(0,209,255,0.18) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(135deg, rgba(0,209,255,0.075), rgba(0,255,163,0.045)),
        rgba(255,255,255,0.035) !important;
}

#groups .group-favorite span {
    display: block !important;
    margin-bottom: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.55px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

#groups .group-favorite strong,
#groups .group-favorite .team-inline {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    color: #F4F8FF !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

#groups .group-favorite p {
    margin-top: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

#groups .group-card button {
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(0,209,255,0.24) !important;
    border-radius: 10px !important;
    background: rgba(0,209,255,0.10) !important;
    color: #77F7FF !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.55px !important;
    text-transform: uppercase !important;
}

#groups .group-card:hover button,
#groups .group-card button:hover,
#groups .group-card button:focus-visible {
    border-color: rgba(0,255,163,0.30) !important;
    background: rgba(0,255,163,0.12) !important;
    color: #BFFFF0 !important;
    outline: none !important;
}

.group-modal-card {
    border-color: rgba(175,192,230,0.18) !important;
    background:
        radial-gradient(circle at top right, rgba(0,209,255,0.12), transparent 40%),
        rgba(8,13,24,0.96) !important;
}

.group-table-section {
    border: 1px solid rgba(175,192,230,0.14) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.035) !important;
    overflow: hidden !important;
}

.group-table-label {
    padding: 11px 12px !important;
    border-bottom: 1px solid rgba(175,192,230,0.12) !important;
    background: rgba(255,255,255,0.035) !important;
}

.group-table-label strong {
    color: #F4F8FF !important;
    font-weight: 900 !important;
}

.group-table-label span {
    color: var(--text-secondary) !important;
    font-weight: 750 !important;
}

.group-table {
    overflow: hidden !important;
}

.group-table thead tr {
    background: rgba(0,209,255,0.075) !important;
}

.group-table th {
    color: var(--text-secondary) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.45px !important;
    text-transform: uppercase !important;
}

.group-table td {
    color: #F4F8FF !important;
    font-weight: 750 !important;
}

.group-table tbody tr {
    border-bottom-color: rgba(175,192,230,0.10) !important;
}

.group-table tbody tr:hover {
    background: rgba(0,209,255,0.075) !important;
}

@media (max-width: 768px) {
    #groups .groups-grid {
        grid-template-columns: 1fr !important;
    }

    #groups .group-card {
        min-height: 0 !important;
    }

    #groups .group-team-list .list-metric-row {
        grid-template-columns: 1fr !important;
    }
}

/* Gruppenübersicht: Container ohne eigenen Hintergrund — Karten wirken wie Team-Karten */
#groups.content-section {
    display: grid !important;
    gap: 12px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#groups .section-header {
    margin-bottom: 0 !important;
}

#groups .section-header h2 {
    color: #F4F8FF !important;
}

#groups .section-header p {
    color: var(--text-secondary) !important;
}

#groups .groups-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 10px !important;
}

#groups .group-card {
    min-height: 0 !important;
    padding: 18px 20px !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) !important;
    transition: 0.3s !important;
}

#groups .group-card::before {
    display: block !important;
}

#groups .group-card:hover,
#groups .group-card:focus-visible {
    transform: none !important;
    border-color: rgba(0,209,255,0.42) !important;
    background: rgba(0,209,255,0.07) !important;
    box-shadow: 0 0 32px rgba(0,209,255,0.12) !important;
}

#groups .group-card-top {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}

#groups .group-card-top span {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #F4F8FF !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#groups .group-card-top strong {
    color: #FFD166 !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#groups .group-card .source-pill {
    min-height: 24px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
}

#groups .group-team-list {
    gap: 6px !important;
}

#groups .group-team-list .list-metric-row {
    min-height: 38px !important;
    padding: 7px 8px !important;
    border-color: rgba(175,192,230,0.14) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,0.045) !important;
}

#groups .group-team-list .list-metric-row:nth-child(1),
#groups .group-team-list .list-metric-row:nth-child(2),
#groups .group-team-list .list-metric-row:nth-child(3),
#groups .group-team-list .list-metric-row:nth-child(4) {
    border-color: rgba(175,192,230,0.14) !important;
    background: rgba(255,255,255,0.045) !important;
}

#groups .group-team-list .list-metric-row:hover {
    border-color: rgba(255,209,102,0.24) !important;
    background: rgba(255,209,102,0.07) !important;
}

#groups .group-team-list .list-metric-rank,
#groups .group-team-list .list-metric-row:nth-child(1) .list-metric-rank,
#groups .group-team-list .list-metric-row:nth-child(2) .list-metric-rank {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
    border-radius: 8px !important;
    border-color: rgba(255,209,102,0.24) !important;
    background: rgba(255,209,102,0.12) !important;
    color: #FFD166 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

#groups .group-team-list .list-metric-label {
    color: #EAF2FF !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

#groups .group-team-list .list-metric-bar-wrap {
    height: 7px !important;
    background: rgba(175,192,230,0.14) !important;
}

#groups .group-team-list .list-metric-bar {
    background: #00D1FF !important;
    box-shadow: 0 0 10px rgba(0,209,255,0.4) !important;
}

#groups .group-team-list .list-metric-value {
    color: #F4F8FF !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

/* ── Tabellenstatus-Badges ──────────────────────────────────── */
.source-pill.real-source {
    color: #fff !important;
    background: rgba(0,255,163,0.16) !important;
    border-color: rgba(0,255,163,0.40) !important;
}
.source-pill.sim-source {
    color: rgba(255,255,255,0.82) !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.18) !important;
}

/* ── Gruppenübersicht: Rank-Badges wie Team-Karten ──────────── */
#groups .group-team-list .list-metric-rank {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: center !important;
    border: 1px solid transparent !important;
}
#groups .group-team-list .list-metric-row:nth-child(1) .list-metric-rank {
    color: #C8FF00 !important;
    background: rgba(200,255,0,0.12) !important;
    border-color: rgba(200,255,0,0.28) !important;
}
#groups .group-team-list .list-metric-row:nth-child(2) .list-metric-rank {
    color: #00D1FF !important;
    background: rgba(0,209,255,0.12) !important;
    border-color: rgba(0,209,255,0.28) !important;
}
#groups .group-team-list .list-metric-row:nth-child(n+3) .list-metric-rank {
    color: rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
#groups .group-team-list .list-metric-row:nth-child(n+3) {
    opacity: 0.5 !important;
}

#groups .group-favorite {
    min-height: 0 !important;
    padding: 9px 10px !important;
    border-color: rgba(175,192,230,0.12) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.045) !important;
}

#groups .group-favorite span {
    color: var(--text-tertiary) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

#groups .group-favorite strong,
#groups .group-favorite .team-inline {
    color: #F4F8FF !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

#groups .group-favorite p {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
}

#groups .group-card button {
    min-height: 34px !important;
    padding: 7px 8px !important;
    border-color: rgba(175,192,230,0.14) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,0.045) !important;
    color: #EAF2FF !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#groups .group-card:hover button,
#groups .group-card button:hover,
#groups .group-card button:focus-visible {
    color: #06101A !important;
    background: linear-gradient(135deg, #C8FF00, #80F7FF) !important;
    border-color: rgba(200,255,0,0.45) !important;
}

@media (max-width: 768px) {
    #groups.content-section {
        padding: 12px !important;
    }

    #groups .groups-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Teamprofile an Lagezentrum-Design angleichen */
.team-dossiers-panel {
    display: grid !important;
    gap: 12px !important;
    margin-top: 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(175,192,230,0.16) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, rgba(255,209,102,0.08), rgba(0,209,255,0.045)),
        rgba(12,18,32,0.78) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.22) !important;
}

.team-dossiers-panel .section-header {
    margin-bottom: 0 !important;
}

.team-dossiers-panel .section-header h2 {
    color: #F4F8FF !important;
}

.team-dossiers-panel .section-header p {
    color: var(--text-secondary) !important;
}

.team-dossiers-panel .compare-team-banner {
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255,209,102,0.18) !important;
    border-radius: 10px !important;
    background: rgba(255,209,102,0.07) !important;
    color: #F4F8FF !important;
}

.team-dossiers-panel .compare-team-banner span {
    color: #F4F8FF !important;
    font-weight: 800 !important;
}

.team-dossiers-panel .compare-team-banner button {
    border-color: rgba(175,192,230,0.16) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,0.045) !important;
    color: #EAF2FF !important;
}

.team-dossiers-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    justify-content: stretch !important;
    gap: 10px !important;
    width: 100% !important;
}

.team-dossiers-panel .team-profile-data-card {
    grid-column: 1 / -1 !important;
    display: grid !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(175,192,230,0.15) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(90deg, rgba(0,255,163,0.08), transparent 32%),
        radial-gradient(circle at top right, rgba(124,58,237,0.10), transparent 34%),
        rgba(8,13,24,0.84) !important;
    box-shadow: 0 18px 52px rgba(0,0,0,0.24) !important;
}

.team-dossiers-panel .team-profile-data-head {
    display: grid !important;
    gap: 3px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(175,192,230,0.13) !important;
    text-align: left !important;
    justify-items: start !important;
}

.team-dossiers-panel .team-profile-data-head span {
    color: #A7B8E8 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.team-dossiers-panel .team-profile-data-head strong {
    color: #F4F8FF !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

/* ══════════════════════════════════════════════════════════════
   JARVIS INTELLIGENCE VIEW — komplett neu 2026
   ══════════════════════════════════════════════════════════════ */

/* ── Hero KPI Row ───────────────────────────────────────────── */
.intel-hero-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.intel-hero-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 20px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    backdrop-filter: blur(14px);
    transition: border-color 0.2s;
}
.intel-hero-card:hover {
    border-color: rgba(0,209,255,0.35);
}
.intel-hero-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin: 0;
    line-height: 1.4;
}

/* KPI Ring — large variant */
.kpi-ring--lg {
    width: 76px !important;
    height: 76px !important;
}
.kpi-ring--lg .kpi-ring-val {
    font-size: 14px !important;
}

/* ── Section layout ─────────────────────────────────────────── */
.intel-section {
    margin-bottom: 20px;
}
.intel-section-header {
    margin-bottom: 12px;
}
.intel-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.70);
    margin-bottom: 10px;
}
.intel-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.intel-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 18px 16px;
    backdrop-filter: blur(14px);
}
.intel-card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.70);
    margin-bottom: 10px;
}
.intel-card--full {
    width: 100%;
    box-sizing: border-box;
}
.intel-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 12px 0;
}

/* ── Stat rows ──────────────────────────────────────────────── */
.intel-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    color: rgba(255,255,255,0.80);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.intel-stat-row:last-child { border-bottom: none; }
.intel-stat-row strong { color: #F4F8FF; font-weight: 700; }
.intel-sub { color: rgba(255,255,255,0.58); font-size: 10px; }
.intel-accent-lime { color: #C8FF00; }
.intel-accent-cyan { color: #00D1FF; }
.intel-empty { color: rgba(255,255,255,0.60); font-size: 12px; font-style: italic; margin: 8px 0 0; }

/* ── Composition Bar ────────────────────────────────────────── */
.intel-comp-bar-wrap {
    display: flex;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    margin-bottom: 10px;
}
.intel-comp-seg {
    height: 100%;
    transition: width 0.4s;
}
.intel-comp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 14px;
}
.intel-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    font-style: normal;
}

/* ── Source rows ────────────────────────────────────────────── */
.intel-source-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 11px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
}
.intel-source-row:last-child { border-bottom: none; }
.intel-src-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.intel-src-dot--live     { background: #00D68F; box-shadow: 0 0 5px rgba(0,214,143,0.7); }
.intel-src-dot--fallback { background: var(--color-draw); }
.intel-src-dot--stale    { background: rgba(255,255,255,0.40); }
.intel-source-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intel-source-status { font-size: 10px; color: rgba(255,255,255,0.65); white-space: nowrap; }
.intel-source-age    { font-size: 10px; color: rgba(255,255,255,0.58); white-space: nowrap; min-width: 26px; text-align: right; }

/* ── Learning progress ──────────────────────────────────────── */
.intel-learning-hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.intel-learning-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.70);
    margin: 4px 0 0;
    line-height: 1.5;
}
.intel-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.intel-badge--ready   { background: rgba(200,255,0,0.14); color: #C8FF00; border: 1px solid rgba(200,255,0,0.35); }
.intel-badge--watching { background: rgba(0,209,255,0.10); color: #00D1FF; border: 1px solid rgba(0,209,255,0.28); }
.intel-lp-bar-wrap {
    height: 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
    margin-bottom: 6px;
}
.intel-lp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00D1FF, #C8FF00);
    border-radius: 6px;
    transition: width 0.5s;
}
.intel-lp-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255,255,255,0.70);
    margin-bottom: 12px;
}

/* ── Ring wrap helper ───────────────────────────────────────── */
.intel-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* ── Team Deep Dive ─────────────────────────────────────────── */
.intel-team-sel {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #F4F8FF;
    font-size: 13px;
    padding: 10px 12px;
    outline: none;
    cursor: pointer;
    margin-bottom: 16px;
}
.intel-team-sel:focus { border-color: rgba(0,209,255,0.5); }
.intel-team-sel option { background: #0C1220; color: #F4F8FF; }

.intel-team-panel { animation: fadeIn 0.2s ease; }
.intel-team-hd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.intel-team-nm { font-size: 16px; font-weight: 800; color: #F4F8FF; display: block; }
.intel-team-rnk { font-size: 11px; color: rgba(0,209,255,0.85); display: block; margin-top: 2px; }
.intel-team-dq { font-size: 10px; color: rgba(255,255,255,0.4); display: block; margin-top: 2px; }
.intel-team-rings {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.intel-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.intel-kpi-tile {
    position: relative;
    min-height: 82px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
    overflow: hidden;
}
.intel-kpi-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--intel-tile-accent, #00D1FF);
}
.intel-kpi-tile--lime { --intel-tile-accent: #C8FF00; }
.intel-kpi-tile--cyan { --intel-tile-accent: #00D1FF; }
.intel-kpi-tile--violet { --intel-tile-accent: #8B5CF6; }
.intel-kpi-tile--amber { --intel-tile-accent: var(--color-draw); }
.intel-kpi-tile span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 8px;
}
.intel-kpi-tile strong {
    display: block;
    font-size: 22px;
    line-height: 1;
    color: #F4F8FF;
    margin-bottom: 6px;
}
.intel-kpi-tile small {
    display: block;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(255,255,255,0.65);
}

.intel-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 12px;
}
.intel-mini-row:last-child { border-bottom: none; }
.intel-mini-row span { color: rgba(255,255,255,0.75); }
.intel-mini-row strong { color: #F4F8FF; font-weight: 800; text-align: right; }

.intel-quality-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}
.intel-quality-head strong {
    display: block;
    font-size: 20px;
    color: #F4F8FF;
    margin-bottom: 6px;
}
.intel-quality-head p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255,255,255,0.72);
}

.intel-insight-list {
    display: grid;
    gap: 10px;
}
.intel-insight-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
}
.intel-insight-item strong {
    color: #F4F8FF;
    font-size: 13px;
    line-height: 1.3;
}
.intel-insight-item span {
    align-self: start;
    color: #C8FF00;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.intel-insight-item p {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    line-height: 1.45;
}

.intel-risk-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.intel-risk-row:last-child { border-bottom: none; }
.intel-risk-row strong {
    display: block;
    color: #F4F8FF;
    font-size: 13px;
    margin-bottom: 3px;
}
.intel-risk-row p {
    margin: 0;
    color: rgba(255,255,255,0.48);
    font-size: 11px;
    line-height: 1.45;
}
.intel-risk-row > span {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 4px 8px;
    color: rgba(255,255,255,0.72);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.intel-risk-row--high > span { color: #FF6B6B; border-color: rgba(255,107,107,0.35); }
.intel-risk-row--medium > span { color: var(--color-draw); border-color: rgba(245,158,11,0.35); }
.intel-risk-row--low > span { color: #C8FF00; border-color: rgba(200,255,0,0.35); }

.intel-team-quality-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.intel-team-quality-grid div {
    min-height: 58px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
}
.intel-team-quality-grid span {
    display: block;
    color: rgba(255,255,255,0.42);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.intel-team-quality-grid strong {
    color: #F4F8FF;
    font-size: 16px;
}

.intel-team-signals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.intel-team-signals > div {
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
}
.intel-team-signals span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,0.64);
    font-size: 11px;
    line-height: 1.35;
}

/* ── System Status Grid ─────────────────────────────────────── */
.intel-sys-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.intel-sys-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px;
}
.intel-sys-lbl { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 6px; }
.intel-sys-val { margin-bottom: 6px; }
.intel-sys-note { font-size: 10px; color: rgba(255,255,255,0.60); line-height: 1.4; }

/* ── Governance Erklärungsbox (Konvergenz-Hinweis) ─────────── */
.intel-gov-note {
    margin-top: 10px;
    padding: 9px 12px;
    background: rgba(129,140,248,0.08);
    border-left: 3px solid #818CF8;
    border-radius: 0 6px 6px 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.7);
}
.intel-gov-note strong {
    color: #818CF8;
}

/* ── Team Gov Flags (prediction_context / training_allowed) ─── */
.intel-team-gov-flags {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
}
.intel-team-gov-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}
.intel-gov-lbl {
    color: rgba(255,255,255,0.55);
}
.intel-gov-val {
    color: rgba(255,255,255,0.8);
    font-size: 11px;
}

/* ── Squad meta row ─────────────────────────────────────────── */
.intel-squad-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Source Health / Governance Panel ───────────────────────── */
.intel-gov-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 10px 0 14px;
}
.intel-gov-kpi {
    text-align: center;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 8px 4px;
}
.intel-gov-kpi-val {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}
.intel-gov-kpi-val--ready   { color: #00D68F; }
.intel-gov-kpi-val--ctx     { color: #818CF8; }
.intel-gov-kpi-val--await   { color: #00D1FF; }
.intel-gov-kpi-val--sim     { color: var(--color-draw); }
.intel-gov-kpi-val--meta    { color: #C8FF00; }
.intel-gov-kpi-lbl {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.intel-gov-bars { display: flex; flex-direction: column; gap: 6px; }
.intel-gov-bar-row {
    display: grid;
    grid-template-columns: 200px 1fr 40px;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.intel-gov-bar-label { color: rgba(255,255,255,0.88); white-space: nowrap; }
.intel-gov-bar-track {
    height: 7px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.intel-gov-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.intel-gov-bar-fill--gov-ready   { background: #00D68F; }
.intel-gov-bar-fill--gov-ctx     { background: #818CF8; }
.intel-gov-bar-fill--gov-await   { background: #00D1FF; }
.intel-gov-bar-fill--gov-manual  { background: #C084FC; }
.intel-gov-bar-fill--gov-sim     { background: var(--color-draw); }
.intel-gov-bar-fill--gov-blocked { background: var(--color-loss); }
.intel-gov-bar-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    text-align: right;
}
.intel-gov-bar-total { color: rgba(255,255,255,0.65); font-weight: 400; }
.intel-gov-chip {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
    vertical-align: middle;
}
.intel-gov-chip--ready  { background: rgba(0,214,143,0.2); color: #00D68F; }
.intel-gov-chip--await  { background: rgba(0,209,255,0.15); color: #00D1FF; }
.intel-gov-chip--sim    { background: rgba(245,158,11,0.15); color: var(--color-draw); }
.intel-gov-chip--blocked { background: rgba(239,68,68,0.15); color: var(--color-loss); }
.intel-gov-actions { display: flex; flex-direction: column; gap: 6px; }
.intel-gov-action {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 7px 10px;
}
.intel-gov-action-rank {
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,209,255,0.2);
    color: #00D1FF;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.intel-gov-action-body { flex: 1; min-width: 0; }
.intel-gov-action-cmd {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    font-family: monospace;
    word-break: break-all;
}
.intel-gov-action-impact { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.intel-gov-team-list { display: flex; flex-direction: column; gap: 4px; }
.intel-gov-team-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
}
.intel-gov-team-row--ready { background: rgba(0,214,143,0.05); }
.intel-gov-tier {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    text-align: center;
}
.intel-gov-tier--1 { background: rgba(0,214,143,0.25); color: #00D68F; }
.intel-gov-tier--2 { background: rgba(0,209,255,0.2); color: #00D1FF; }
.intel-gov-tier--3 { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.intel-gov-tname { font-weight: 600; color: rgba(255,255,255,0.9); }
.intel-gov-reason { font-size: 10px; color: rgba(255,255,255,0.65); }
.intel-gov-empty { font-size: 11px; color: rgba(255,255,255,0.65); padding: 8px 4px; }
.intel-gov-more { font-size: 10px; color: rgba(0,209,255,0.80); margin-top: 6px; font-style: italic; }

/* ── Mobile responsive ──────────────────────────────────────── */
@media (max-width: 700px) {
    .intel-hero-row { grid-template-columns: repeat(2, 1fr); }
    .intel-two-col { grid-template-columns: 1fr; }
    .intel-team-rings { grid-template-columns: repeat(3, 1fr); }
    .intel-team-quality-grid { grid-template-columns: repeat(2, 1fr); }
    .intel-team-signals { grid-template-columns: 1fr; }
    .intel-sys-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .intel-hero-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .intel-kpi-grid { grid-template-columns: 1fr; }
    .intel-team-rings { grid-template-columns: repeat(2, 1fr); }
    .intel-team-quality-grid { grid-template-columns: 1fr 1fr; }
    .intel-sys-grid { grid-template-columns: 1fr 1fr; }
}

.team-dossiers-panel .team-profile-data-head p {
    color: #BFD0F4 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.team-dossiers-panel .team-profile-data-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.team-dossiers-panel .team-profile-data-grid div {
    position: relative !important;
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(175,192,230,0.14) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
        rgba(10,15,26,0.72) !important;
    overflow: hidden !important;
}

.team-dossiers-panel .team-profile-data-grid div::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto !important;
    height: 2px !important;
    background: var(--data-accent, #00D1FF) !important;
    box-shadow: 0 0 18px var(--data-glow, rgba(0,209,255,0.28)) !important;
}

.team-dossiers-panel .team-profile-data-grid div:nth-child(1) {
    --data-accent: #00FFA3;
    --data-glow: rgba(0,255,163,0.34);
}

.team-dossiers-panel .team-profile-data-grid div:nth-child(2) {
    --data-accent: #00D1FF;
    --data-glow: rgba(0,209,255,0.34);
}

.team-dossiers-panel .team-profile-data-grid div:nth-child(3) {
    --data-accent: #A78BFA;
    --data-glow: rgba(167,139,250,0.36);
}

.team-dossiers-panel .team-profile-data-grid span {
    color: var(--data-accent, #00D1FF) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
}

.team-dossiers-panel .team-profile-data-grid strong {
    color: #F4F8FF !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.team-dossiers-panel .team-profile-data-grid p {
    color: #C7D4F6 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
}

.team-dossiers-panel .dossier-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    align-items: stretch !important;
    gap: 9px !important;
    min-height: 132px !important;
    padding: 12px !important;
    border: 1px solid rgba(175,192,230,0.17) !important;
    border-radius: 12px !important;
    background:
        radial-gradient(circle at top right, rgba(255,209,102,0.10), transparent 42%),
        rgba(8,13,24,0.78) !important;
    box-shadow: none !important;
    color: #F4F8FF !important;
    cursor: pointer !important;
    transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out) !important;
}

.team-dossiers-panel .dossier-card:hover,
.team-dossiers-panel .dossier-card:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgba(255,209,102,0.34) !important;
    background:
        radial-gradient(circle at top right, rgba(255,209,102,0.15), transparent 44%),
        rgba(13,21,36,0.92) !important;
    box-shadow: none !important;
    outline: none !important;
}

.team-dossiers-panel .dossier-card--top {
    border-color: rgba(255,209,102,0.24) !important;
}

.team-dossiers-panel .dossier-rank {
    display: inline-grid !important;
    place-items: center !important;
    align-self: stretch !important;
    width: 34px !important;
    min-height: 100% !important;
    border: 1px solid rgba(255,209,102,0.24) !important;
    border-radius: 8px !important;
    background: rgba(255,209,102,0.12) !important;
    color: #FFD166 !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.team-dossiers-panel .dossier-body {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    gap: 9px !important;
    min-width: 0 !important;
}

.team-dossiers-panel .dossier-team-row {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.team-dossiers-panel .dossier-team-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #F4F8FF !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.team-dossiers-panel .trend-delta {
    flex: 0 0 auto !important;
}

.team-dossiers-panel .dossier-stat-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-self: stretch !important;
}

.team-dossiers-panel .dossier-stat {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    gap: 4px !important;
    min-height: 60px !important;
    padding: 8px !important;
    border: 1px solid rgba(175,192,230,0.12) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.045) !important;
}

.team-dossiers-panel .dossier-stat span {
    color: var(--text-tertiary) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.team-dossiers-panel .dossier-stat strong,
.team-dossiers-panel .dossier-stat strong[style] {
    display: flex !important;
    align-items: end !important;
    color: #F4F8FF !important;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.team-dossiers-panel .dossier-stat:nth-child(1) strong,
.team-dossiers-panel .dossier-stat:nth-child(1) strong[style] {
    color: #FFD166 !important;
}

.team-dossiers-panel .dossier-stat:nth-child(2) strong,
.team-dossiers-panel .dossier-stat:nth-child(2) strong[style] {
    color: #77F7FF !important;
}

.team-dossiers-panel .dossier-compare-btn {
    display: grid !important;
    place-items: center !important;
    align-self: start !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(175,192,230,0.14) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,0.045) !important;
    color: #EAF2FF !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.team-dossiers-panel .dossier-compare-btn:hover,
.team-dossiers-panel .dossier-compare-btn:focus-visible,
.team-dossiers-panel .dossier-compare-btn.compare-selected {
    color: #06101A !important;
    background: linear-gradient(135deg, #C8FF00, #80F7FF) !important;
    border-color: rgba(200,255,0,0.45) !important;
    outline: none !important;
}

@media (max-width: 768px) {
    .team-dossiers-panel {
        padding: 12px !important;
    }

    .team-dossiers-grid {
        grid-template-columns: 1fr !important;
    }

    .team-dossiers-panel .dossier-card {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    }

    .team-dossiers-panel .dossier-stat-row {
        grid-template-columns: 1fr !important;
    }
}

/* Overflow-Fix für Teamprofile, Gruppenwerte und lange Navigationslabels */
.nav-btn {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
}

.team-dossiers-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

.team-dossiers-panel .dossier-card {
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.team-dossiers-panel .dossier-body,
.team-dossiers-panel .dossier-team-row,
.team-dossiers-panel .dossier-stat-row,
.team-dossiers-panel .dossier-stat {
    min-width: 0 !important;
}

.team-dossiers-panel .dossier-team-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.team-dossiers-panel .dossier-team-row .flag-img,
.team-dossiers-panel .dossier-team-row .inline-flag,
.team-dossiers-panel .dossier-team-row .mini-flag,
.team-dossiers-panel .dossier-team-row .flag-fallback {
    flex: 0 0 auto !important;
}

.team-dossiers-panel .dossier-team-name {
    display: block !important;
    max-width: 100% !important;
}

.team-dossiers-panel .trend-delta {
    max-width: 74px !important;
    min-width: 0 !important;
    padding: 2px 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.team-dossiers-panel .dossier-stat-row {
    grid-template-columns: repeat(3, minmax(74px, 1fr)) !important;
}

.team-dossiers-panel .dossier-stat {
    overflow: hidden !important;
}

.team-dossiers-panel .dossier-stat span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.team-dossiers-panel .dossier-stat strong,
.team-dossiers-panel .dossier-stat strong[style],
#groups .group-team-list .list-metric-value,
.ml-ranking-panel .ranking-metric-cluster .list-metric-value {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#groups .group-team-list .list-metric-measure,
.ml-ranking-panel .ranking-metric-cluster .list-metric-measure {
    min-width: 0 !important;
}

@media (max-width: 1080px) {
    .team-dossiers-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }

    .team-dossiers-panel .dossier-stat-row {
        grid-template-columns: repeat(3, minmax(62px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .team-dossiers-grid {
        grid-template-columns: 1fr !important;
    }

    .team-dossiers-panel .team-profile-data-grid {
        grid-template-columns: 1fr !important;
    }

    .team-dossiers-panel .dossier-stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 430px) {
    .team-dossiers-panel .dossier-card {
        grid-template-columns: 32px minmax(0, 1fr) !important;
    }

    .team-dossiers-panel .dossier-compare-btn {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        width: auto !important;
        min-width: 42px !important;
        padding-inline: 10px !important;
    }

    .team-dossiers-panel .dossier-stat-row {
        grid-template-columns: 1fr !important;
    }
}

/* Finale Label-Kontrastkorrektur für die modernisierten Bereiche */
.team-dossiers-panel .section-header p,
#groups .section-header p,
.team-dossiers-panel .dossier-stat span,
#groups .group-favorite span,
#groups .group-favorite p,
#groups .group-team-list .list-metric-label,
.ml-ranking-panel .ranking-metric-cluster .list-metric-label,
.ml-ranking-panel .ml-ranking-main span,
.ml-ranking-panel .ml-ranking-score > span,
.ml-ranking-panel .ranking-sparkline-label {
    color: #DDE8FF !important;
    opacity: 1 !important;
    font-weight: 850 !important;
}

.team-dossiers-panel .dossier-stat span,
#groups .group-favorite span,
#groups .group-team-list .list-metric-label,
.ml-ranking-panel .ranking-metric-cluster .list-metric-label {
    letter-spacing: 0.55px !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.22);
}

.team-dossiers-panel .dossier-stat,
#groups .group-favorite,
#groups .group-team-list .list-metric-row,
.ml-ranking-panel .ranking-metric-cluster .list-metric-row {
    background: rgba(255,255,255,0.055) !important;
    border-color: rgba(175,192,230,0.16) !important;
}

/* Readability Pass II: graue Felder in Profilen, Gruppen und Ranking */
.team-dossiers-panel,
#groups,
.ml-ranking-panel {
    --text-secondary: #DDE8FF;
    --text-tertiary: #C7D4F6;
}

.team-dossiers-panel small,
.team-dossiers-panel p,
.team-dossiers-panel span,
.team-dossiers-panel .dossier-stat span,
.team-dossiers-panel .compare-team-banner span,
.team-dossiers-panel .dossier-compare-btn,
#groups small,
#groups p,
#groups span,
#groups .source-pill,
#groups .group-card-top strong,
#groups .group-favorite span,
#groups .group-favorite p,
#groups .group-team-list .list-metric-label,
#groups .group-team-list .list-metric-rank,
#groups .group-card button,
.ml-ranking-panel small,
.ml-ranking-panel p,
.ml-ranking-panel span,
.ml-ranking-panel .ml-ranking-note-text,
.ml-ranking-panel .ml-ranking-main span,
.ml-ranking-panel .ml-ranking-score > span,
.ml-ranking-panel .ml-ranking-score-max,
.ml-ranking-panel .ranking-sparkline-label,
.ml-ranking-panel .ranking-metric-cluster .list-metric-label {
    color: #DDE8FF !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

.team-dossiers-panel strong,
.team-dossiers-panel .dossier-team-name,
.team-dossiers-panel .dossier-stat strong,
#groups strong,
#groups .group-team-list .list-metric-value,
#groups .group-favorite strong,
#groups .group-favorite .team-inline,
.ml-ranking-panel strong,
.ml-ranking-panel .ml-ranking-score-value strong,
.ml-ranking-panel .ranking-metric-cluster .list-metric-value {
    color: #F4F8FF !important;
    opacity: 1 !important;
}

.team-dossiers-panel .dossier-rank,
#groups .group-team-list .list-metric-rank,
#groups .group-card-top strong {
    color: #FFD166 !important;
}

.team-dossiers-panel .dossier-stat:nth-child(1) strong,
.team-dossiers-panel .dossier-stat:nth-child(1) strong[style],
#groups .group-team-list .list-metric-bar,
.ml-ranking-panel .ml-ranking-score-bar {
    color: #FFD166 !important;
}

.team-dossiers-panel .dossier-stat:nth-child(2) strong,
.team-dossiers-panel .dossier-stat:nth-child(2) strong[style] {
    color: #77F7FF !important;
}

.team-dossiers-panel .dossier-stat,
#groups .group-favorite,
#groups .group-team-list .list-metric-row,
.ml-ranking-panel .ranking-metric-cluster .list-metric-row,
.ml-ranking-panel .ml-ranking-score {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(175,192,230,0.20) !important;
}

.team-dossiers-panel .source-pill,
#groups .source-pill,
.ml-ranking-panel .source-pill {
    color: #F8FBFF !important;
    border-color: rgba(175,192,230,0.24) !important;
}

/* Teamprofil-Werte farblich an die Datenkarte angleichen */
.team-dossiers-panel .dossier-stat:nth-child(1) strong,
.team-dossiers-panel .dossier-stat:nth-child(1) strong[style] {
    color: #00FFA3 !important;
}

.team-dossiers-panel .dossier-stat:nth-child(2) strong,
.team-dossiers-panel .dossier-stat:nth-child(2) strong[style] {
    color: #00D1FF !important;
}

.team-dossiers-panel .dossier-stat:nth-child(3) strong,
.team-dossiers-panel .dossier-stat:nth-child(3) strong[style] {
    color: #A78BFA !important;
}

/* Sidebar-Karten Rework: klare Flaggen, keine Kürzel, bessere Lesbarkeit */
.sidebar-countdown-inner,
.sidebar-card {
    border-color: rgba(175,192,230,0.20) !important;
    border-radius: 12px !important;
    background:
        radial-gradient(circle at top right, rgba(0,209,255,0.10), transparent 42%),
        rgba(12,18,32,0.86) !important;
}

.countdown-eyebrow,
.sidebar-card > span {
    color: #C7D4F6 !important;
    opacity: 1 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
}

.countdown-label {
    color: #C8FF00 !important;
    font-size: 19px !important;
    line-height: 1.05 !important;
}

.countdown-teams {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 3px !important;
    color: #F4F8FF !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.countdown-team,
.sidebar-status-team {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    color: #F4F8FF !important;
}

.countdown-team strong,
.sidebar-status-team > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #F4F8FF !important;
    font-weight: 900 !important;
}

.countdown-teams > span:not(.countdown-team) {
    color: #DDE8FF !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.sidebar-countdown .mini-flag,
.sidebar-card .mini-flag,
.sidebar-countdown .flag-emoji,
.sidebar-card .flag-emoji {
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.08) !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.countdown-time,
.sidebar-card p,
#sidebarModelNote {
    color: #DDE8FF !important;
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
}

#sidebarModelStatus {
    color: #F4F8FF !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

.sidebar-status-team strong {
    color: #C8FF00 !important;
    font-family: var(--font-mono) !important;
    font-weight: 950 !important;
}

.sidebar-refresh-btn {
    color: #F4F8FF !important;
    border-color: rgba(175,192,230,0.24) !important;
    background: rgba(255,255,255,0.055) !important;
}

.qualification-pill--winner {
    color: #071019 !important;
    background: linear-gradient(135deg, #FFD166, #77F7FF) !important;
    border-color: rgba(255,209,102,0.42) !important;
    font-weight: 950 !important;
}

/* Gruppenmodal: Badge und Teamspalte sauber ausrichten */
.group-modal-card #groupModalBadge {
    display: grid !important;
    place-items: center !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    gap: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
}

.group-modal-card .group-table th:nth-child(2) {
    text-align: left !important;
    padding-left: 14px !important;
}

.group-modal-card .group-table .team-table-cell {
    display: table-cell !important;
    vertical-align: middle !important;
    text-align: left !important;
    padding-left: 14px !important;
}

.group-modal-card .group-table th,
.group-modal-card .group-table td {
    vertical-align: middle !important;
}

.group-modal-card .group-table .team-table-cell .team-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

/* Gruppenkarten: normale Ländernamen vollständig zeigen, nur sehr lange kürzen */
#groups .groups-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

#groups .group-team-list .list-metric-row {
    grid-template-columns: minmax(0, 1fr) minmax(76px, 92px) !important;
    gap: 8px !important;
}

#groups .group-team-list .list-metric-entity {
    min-width: 0 !important;
}

#groups .group-team-list .list-metric-label {
    max-width: 100% !important;
    min-width: 0 !important;
}

#groups .group-team-list .list-metric-measure {
    grid-template-columns: minmax(24px, 1fr) auto !important;
    gap: 5px !important;
}

#groups .group-team-list .list-metric-value {
    min-width: 30px !important;
    text-align: right !important;
}

@media (max-width: 380px) {
    #groups .group-team-list .list-metric-row {
        grid-template-columns: minmax(0, 1fr) 70px !important;
    }

    #groups .group-team-list .list-metric-bar-wrap {
        display: none !important;
    }

    #groups .group-team-list .list-metric-measure {
        grid-template-columns: 1fr !important;
    }
}

/* Spieltag-KPI-Kacheln: sauberer Abstand zwischen den Ringkarten */
#view-dashboard .stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(128px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

#view-dashboard .stats-row .kpi-ring-card {
    min-width: 0 !important;
    border-radius: 14px !important;
}

@media (max-width: 980px) {
    #view-dashboard .stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    #view-dashboard .stats-row {
        grid-template-columns: 1fr !important;
    }
}

/* Lagezentrum: Lageeinschätzung und Titelkandidaten nebeneinander */
.war-room-panel .lc-top-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.war-room-panel .lc-top-grid > .lc-hero,
.war-room-panel .lc-top-grid > .lc-section {
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
}

.war-room-panel .lc-top-grid > .lc-section {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    padding: 16px !important;
    border: 1px solid rgba(175,192,230,0.16) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at top right, rgba(255,209,102,0.10), transparent 42%),
        rgba(8,13,24,0.78) !important;
}

.war-room-panel .lc-top-grid .lc-fav-strip {
    align-content: start !important;
}

@media (max-width: 1120px) {
    .war-room-panel .lc-top-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Team Ranking — KPI Rings ────────────────────────────────── */

.ml-ranking-card {
    grid-template-columns: 42px minmax(160px, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 16px !important;
}

.ml-ranking-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.ml-ranking-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ml-ranking-team-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ml-ranking-main strong {
    font-size: 1rem !important;
    color: #EAF2FF !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ml-ranking-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ml-ranking-info-lbl {
    font-size: 10px;
    color: rgba(184, 193, 236, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.ml-ranking-info-val {
    font-size: 11px;
    font-weight: 700;
    color: #EAF2FF;
}

.ml-rank-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ml-rank-ring .kpi-ring-label {
    font-size: 9px;
    letter-spacing: 0.6px;
}

.ml-ranking-rings {
    display: flex;
    gap: 14px;
    align-items: center;
}

@media (max-width: 768px) {
    .ml-ranking-card {
        grid-template-columns: 42px 1fr !important;
    }
    .ml-rank-ring,
    .ml-ranking-rings,
    .ml-ranking-card .trend-pill {
        grid-column: 2 !important;
        justify-self: start !important;
    }
    .ml-ranking-rings {
        flex-wrap: wrap;
    }
}

/* Ringe in einer Zeile */
.ml-ranking-rings--grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
}

/* Rang-Akzente Top 3 */
.ml-ranking-position.rank--gold   { color: #FFD166; border-color: rgba(255,209,102,0.4); }
.ml-ranking-position.rank--silver { color: var(--color-text-secondary); border-color: rgba(184,193,236,0.3); }
.ml-ranking-position.rank--bronze { color: #FF8A4C; border-color: rgba(255,138,76,0.3); }

/* Ring-Labels in weiß */
.ml-rank-ring .kpi-ring-label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 10px !important;
    letter-spacing: 0.5px;
}

/* ── Datenkarte im Teams-View (ml-ranking-panel) ─────────────── */
.ml-ranking-panel .team-profile-data-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(175,192,230,0.14);
    background:
        linear-gradient(135deg, rgba(0,209,255,0.04) 0%, transparent 60%),
        rgba(8,13,24,0.84);
    box-shadow: 0 18px 52px rgba(0,0,0,0.24);
    margin-bottom: 4px;
}

.ml-ranking-panel .team-profile-data-head {
    display: grid;
    gap: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(175,192,230,0.13);
}

.ml-ranking-panel .team-profile-data-head span {
    color: #A7B8E8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ml-ranking-panel .team-profile-data-head strong {
    color: #F4F8FF;
    font-size: 16px;
    font-weight: 900;
}

.ml-ranking-panel .team-profile-data-head p {
    color: #BFD0F4;
    font-size: 12px;
}

.ml-ranking-panel .team-profile-data-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.ml-ranking-panel .team-profile-data-grid div {
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(175,192,230,0.1);
    background: rgba(10,15,26,0.72);
    overflow: hidden;
}

.ml-ranking-panel .team-profile-data-grid div::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--data-accent, #00D1FF);
    box-shadow: 0 0 18px var(--data-glow, rgba(0,209,255,0.28));
}

.ml-ranking-panel .team-profile-data-grid div:nth-child(1) { --data-accent: #C8FF00; --data-glow: rgba(200,255,0,0.34); }
.ml-ranking-panel .team-profile-data-grid div:nth-child(2) { --data-accent: #7C3AED; --data-glow: rgba(124,58,237,0.34); }
.ml-ranking-panel .team-profile-data-grid div:nth-child(3) { --data-accent: #00D1FF; --data-glow: rgba(0,209,255,0.34); }
.ml-ranking-panel .team-profile-data-grid div:nth-child(4) { --data-accent: #00D68F; --data-glow: rgba(0,214,143,0.34); }
.ml-ranking-panel .team-profile-data-grid div:nth-child(5) { --data-accent: var(--color-draw); --data-glow: rgba(245,158,11,0.34); }

.ml-ranking-panel .team-profile-data-grid span {
    color: var(--data-accent, #00D1FF);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.ml-ranking-panel .team-profile-data-grid strong {
    color: #F4F8FF;
    font-size: 14px;
    font-weight: 900;
}

.ml-ranking-panel .team-profile-data-grid p {
    color: #C7D4F6;
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .ml-ranking-panel .team-profile-data-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .ml-ranking-panel .team-profile-data-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Gruppen Datenkarte (identisch zu Teams-Datenkarte) ─────── */

.group-data-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(175,192,230,0.14);
    background:
        linear-gradient(135deg, rgba(0,209,255,0.04) 0%, transparent 60%),
        rgba(8,13,24,0.84);
    box-shadow: 0 18px 52px rgba(0,0,0,0.24);
    margin-bottom: 8px;
}

.group-data-head {
    display: grid;
    gap: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(175,192,230,0.13);
}

.group-data-head span {
    color: #A7B8E8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.group-data-head strong {
    color: #F4F8FF;
    font-size: 16px;
    font-weight: 900;
}

.group-data-head p {
    color: #BFD0F4;
    font-size: 12px;
}

.group-data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.group-data-grid div {
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(175,192,230,0.1);
    background: rgba(10,15,26,0.72);
    overflow: hidden;
}

.group-data-grid div::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--data-accent, #00D1FF);
    box-shadow: 0 0 18px var(--data-glow, rgba(0,209,255,0.28));
}

/* Reihenfolge: Qualifikation=Cyan, JARVIS Favorit=Violet, Status=Lime, Fortschritt=Amber */
.group-data-grid div:nth-child(1) { --data-accent: #00D1FF; --data-glow: rgba(0,209,255,0.34); }
.group-data-grid div:nth-child(2) { --data-accent: #7C3AED; --data-glow: rgba(124,58,237,0.34); }
.group-data-grid div:nth-child(3) { --data-accent: #C8FF00; --data-glow: rgba(200,255,0,0.34); }
.group-data-grid div:nth-child(4) { --data-accent: var(--color-draw); --data-glow: rgba(245,158,11,0.34); }

.group-data-grid span {
    color: var(--data-accent, #00D1FF);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.group-data-grid strong {
    color: #F4F8FF;
    font-size: 14px;
    font-weight: 900;
}

.group-data-grid p {
    color: #C7D4F6;
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 800px) {
    .group-data-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Gruppen-Karte: farbcodierte Sections ───────────────────── */

.group-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.group-card-name {
    color: #00D1FF;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Spielfortschritt — Amber */
.group-card-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.group-progress-label {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.group-progress-bar-wrap {
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}

.group-progress-bar {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: rgba(255,255,255,0.3);
    transition: width 0.6s ease;
}

/* JARVIS Favorit — kompaktes Horizontal-Strip */
.group-favorite {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.group-favorite-label {
    flex-shrink: 0;
    color: rgba(124,58,237,0.9);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.group-favorite-team {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.group-favorite-team strong {
    font-size: 12px;
    font-weight: 700;
    color: #EAF2FF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-favorite-stats {
    flex-shrink: 0;
    color: rgba(184,193,236,0.6);
    font-size: 10px;
    white-space: nowrap;
}

/* Footer: Source-Pill + Button */
.group-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.group-open-btn {
    background: rgba(0,209,255,0.10);
    border: 1px solid rgba(0,209,255,0.2);
    color: #00D1FF;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.group-open-btn:hover {
    background: rgba(0,209,255,0.2);
}

/* ── Gruppen-Karte: Overrides gegen alte Phase-Regeln ────────── */

/* JARVIS Favorit wieder sichtbar machen (war display:none) */
#groups .group-favorite {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
    padding: 8px 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    background: transparent !important;
}

#groups .group-favorite-label {
    display: block !important;
    color: rgba(124,58,237,0.9) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
}

#groups .group-favorite-team {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

#groups .group-favorite-team strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #EAF2FF !important;
}

#groups .group-favorite-stats {
    flex-shrink: 0 !important;
    color: rgba(184,193,236,0.6) !important;
    font-size: 10px !important;
    white-space: nowrap !important;
}

/* Progress-Span: nicht als cyan-Pill stylen */
#groups .group-card-top span.group-card-progress {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
}

/* Gleiche Spezifität wie #groups .group-card-top span, aber später = gewinnt */
#groups .group-card-top span.group-progress-label {
    color: rgba(255,255,255,0.45) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
}

#groups .group-card-top span.group-progress-bar-wrap {
    border: none !important;
    background: rgba(255,255,255,0.1) !important;
    padding: 0 !important;
    border-radius: 2px !important;
    min-height: auto !important;
    width: 64px !important;
    height: 3px !important;
    display: block !important;
    overflow: hidden !important;
}

#groups .group-progress-bar {
    background: rgba(255,255,255,0.3) !important;
}

/* Footer mit Source-Pill + Button */
#groups .group-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

#groups .group-open-btn {
    background: rgba(0,209,255,0.10) !important;
    border: 1px solid rgba(0,209,255,0.2) !important;
    color: #00D1FF !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    min-height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN-ALIGNMENT: Group Cards = Team Cards (höchste Priorität)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Hintergrund identisch zu Team-Karten */
#groups .group-card {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 22px !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: none !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
    transition: 0.3s !important;
}

/* 2. ::before Radial-Glow wie Team-Karten */
#groups .group-card::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at top right, rgba(0,209,255,0.10), transparent 40%),
        linear-gradient(135deg, rgba(255,255,255,0.03), transparent) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* 3. Hover identisch zu Team-Karten (kein Lift) */
#groups .group-card:hover,
#groups .group-card:focus-visible {
    transform: none !important;
    border-color: rgba(0,209,255,0.42) !important;
    background: rgba(0,209,255,0.07) !important;
    box-shadow: 0 0 32px rgba(0,209,255,0.12) !important;
}

/* 4. Rank-Badge Farben gegen #FFD166-Override */
#groups .group-team-list .list-metric-row:nth-child(1) .list-metric-rank {
    color: #C8FF00 !important;
    background: rgba(200,255,0,0.12) !important;
    border-color: rgba(200,255,0,0.28) !important;
    opacity: 1 !important;
}
#groups .group-team-list .list-metric-row:nth-child(2) .list-metric-rank {
    color: #00D1FF !important;
    background: rgba(0,209,255,0.12) !important;
    border-color: rgba(0,209,255,0.28) !important;
    opacity: 1 !important;
}
#groups .group-team-list .list-metric-row:nth-child(n+3) .list-metric-rank {
    color: rgba(255,255,255,0.35) !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    opacity: 1 !important;
}

/* 5. Plätze 3-4 dezent dimmen — noch gut lesbar */
#groups .group-team-list .list-metric-row:nth-child(n+3) {
    opacity: 0.68 !important;
}

/* 5b. Platz 1+2 Zeilen farblich hinterlegen */
#groups .group-team-list .list-metric-row:nth-child(1) {
    background: rgba(200,255,0,0.07) !important;
    border-radius: 6px !important;
}
#groups .group-team-list .list-metric-row:nth-child(2) {
    background: rgba(0,209,255,0.07) !important;
    border-radius: 6px !important;
}

/* 6. JARVIS Favorit — Violet-Box, vertikal zentriert */
#groups .group-favorite {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border-left: 2px solid rgba(124,58,237,0.8) !important;
    border-top: none !important;
    background: rgba(124,58,237,0.10) !important;
}
#groups .group-favorite-label {
    color: #9D65FF !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    font-family: var(--font-mono) !important;
    opacity: 1 !important;
    margin-bottom: 2px !important;
}
#groups .group-favorite-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    text-align: center !important;
}
#groups .group-fav-flag,
img.group-fav-flag {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    display: block !important;
    flex-shrink: 0 !important;
}
span.group-fav-flag {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}
#groups .group-favorite-body strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #EAF2FF !important;
    opacity: 1 !important;
    display: block !important;
}
#groups .group-favorite-stats {
    color: rgba(184,193,236,0.7) !important;
    font-size: 10px !important;
    opacity: 1 !important;
    display: block !important;
}

/* ── Reduced Motion — Barrierefreiheit ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .st-pick-btn.active-home,
    .st-pick-btn.active-draw,
    .st-pick-btn.active-away { animation: none !important; }

    .st-ph, .st-pd, .st-pa {
        animation: none !important;
        transform: scaleX(1) !important;
        opacity: 1 !important;
    }

    .app-view { animation: none !important; opacity: 1 !important; }
}

/* ── JARVIS Highlights Widget ────────────────────────────────── */
.jarvis-highlights-widget {
    background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(124,58,237,0.04));
    border: 1px solid rgba(124,58,237,0.28);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
#jarvisHighlights:not([hidden]) {
    animation: viewFadeIn 0.3s ease;
}
.jarvis-hl-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.jarvis-hl-icon { font-size: 16px; }
.jarvis-hl-title { font-size: 13px; font-weight: 700; color: #a78bfa; }
.jarvis-hl-sub   { font-size: 10px; color: var(--color-muted); margin-left: auto; }
.jarvis-hl-list  { display: flex; flex-direction: column; gap: 6px; }
.jarvis-hl-item  {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    padding: 5px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 7px;
}
.jarvis-hl-teams { flex: 1; color: var(--color-text); }
.jarvis-hl-pick  { font-family: var(--font-mono); font-weight: 700; color: #C8FF00; }
.jarvis-hl-conf  { font-size: 10px; color: #a78bfa; font-family: var(--font-mono); flex-shrink: 0; }

/* ── Score-Flip Animation beim Speichern ─────────────────────── */
@keyframes scoreSavedPop {
    0%   { transform: scale(1);    background: transparent; }
    30%  { transform: scale(1.06); background: rgba(200,255,0,0.15); box-shadow: 0 0 12px rgba(200,255,0,0.35); }
    100% { transform: scale(1);    background: transparent; }
}
.st-score-saved {
    animation: scoreSavedPop 0.7s ease-out forwards;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .st-score-saved { animation: none !important; }
}

/* ── Spieltag-Tipp-Fortschritt ──────────────────────────────── */
.st-day-hint {
    font-size: 10px;
    color: var(--color-muted);
    background: rgba(255,255,255,0.05);
    border-radius: 99px;
    padding: 2px 8px;
    white-space: nowrap;
}
.st-day-hint--done {
    color: #00D68F;
    background: rgba(0,214,143,0.1);
}

/* ═══════════════════════════════════════════════════════════════
   MATCH CARDS REWORK — mc-* Design System
   ═══════════════════════════════════════════════════════════════ */


/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes mcCardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes mcPickConfirm {
    0%   { box-shadow: 0 0 0   rgba(200,255,0,0);   }
    40%  { box-shadow: 0 0 28px rgba(200,255,0,0.55); }
    100% { box-shadow: 0 0 10px rgba(200,255,0,0.12); }
}
@keyframes mcSavePop {
    0%   { transform: scale(1);    }
    40%  { transform: scale(1.08); }
    70%  { transform: scale(0.96); }
    100% { transform: scale(1);    }
}
@keyframes mcVsPulse {
    0%,100% { opacity: 0.55; }
    50%     { opacity: 1;    }
}

/* ── Featured Card ───────────────────────────────────────────── */
.mc-featured {
    position: relative;
    background: var(--mc-card-bg);
    backdrop-filter: blur(var(--mc-card-blur));
    -webkit-backdrop-filter: blur(var(--mc-card-blur));
    border: 1px solid rgba(200,255,0,0.16);
    border-radius: var(--mc-card-radius-lg);
    margin-bottom: 10px;
    overflow: hidden;
    animation: mcCardIn 0.28s var(--mc-reveal-ease) both;
    box-shadow: 0 4px 32px rgba(200,255,0,0.07), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.mc-featured:hover {
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,255,0,0.22);
    transform: translateY(-1px);
    transition: all 200ms ease;
}

/* Team-Color-Bleeds */
.mc-featured__glow {
    position: absolute;
    top: 0; bottom: 0;
    width: 50%;
    pointer-events: none;
    z-index: 0;
}
.mc-featured__glow--home {
    left: 0;
    background: radial-gradient(ellipse 80% 100% at 0% 50%, var(--mc-glow-home) 0%, transparent 70%);
}
.mc-featured__glow--away {
    right: 0;
    background: radial-gradient(ellipse 80% 100% at 100% 50%, var(--mc-glow-away) 0%, transparent 70%);
}

/* Eyebrow */
.mc-featured__eyebrow {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(200,255,0,0.05);
    border-bottom: 1px solid rgba(200,255,0,0.1);
}

/* Stage: Teams + VS + Strip */
.mc-featured__stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding: 20px 16px 16px;
    gap: 0;
}
.mc-featured__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ── Regular Card ────────────────────────────────────────────── */
.mc-card {
    position: relative;
    background: var(--mc-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--mc-card-border);
    border-radius: var(--mc-card-radius-sm);
    margin-bottom: 8px;
    overflow: hidden;
    animation: mcCardIn 0.25s var(--mc-reveal-ease) both;
    transition: border-color 250ms ease, box-shadow 250ms ease;
}
.mc-card--critical { border-color: rgba(255,138,76,0.32); }
.mc-card--locked   { opacity: 0.72; }
.mc-card--picked-home { border-color: rgba(0,214,143,0.35);  box-shadow: 0 0 20px rgba(0,214,143,0.07); }
.mc-card--picked-draw { border-color: rgba(255,209,102,0.35); box-shadow: 0 0 20px rgba(255,209,102,0.07); }
.mc-card--picked-away { border-color: rgba(255,107,138,0.35); box-shadow: 0 0 20px rgba(255,107,138,0.07); }

.mc-featured--picked-home { border-color: rgba(0,214,143,0.4);  }
.mc-featured--picked-draw { border-color: rgba(255,209,102,0.4); }
.mc-featured--picked-away { border-color: rgba(255,107,138,0.4); }

.mc-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mc-card__badges { display: flex; align-items: center; gap: 6px; }

.mc-card__stage {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding: 14px 12px 10px;
    gap: 0;
}
.mc-card__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* ── Team Block ──────────────────────────────────────────────── */
.mc-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.mc-team--away { align-items: center; }

/* Flag: overrides the global 28px!important blanket rule via higher specificity */
.mc-team-flag.flag-img,
.mc-team-flag.flag-fallback {
    width: 72px !important;
    height: 52px !important;
    min-width: 72px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: unset !important;
    border: 1.5px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    background: rgba(255,255,255,0.07) !important;
}
/* Featured card: etwas größer */
.mc-featured .mc-team-flag.flag-img,
.mc-featured .mc-team-flag.flag-fallback {
    width: 88px !important;
    height: 62px !important;
    min-width: 88px !important;
    border-radius: 10px !important;
    font-size: 34px !important;
    border: 2px solid rgba(255,255,255,0.14) !important;
}

.mc-team__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text, #E8EDF8);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-featured .mc-team__name {
    font-size: 15px;
    font-weight: 700;
}
.mc-team__pct {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-muted);
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 6px;
}
.mc-team__pct--home-fav { color: #00D68F; background: rgba(0,214,143,0.1); }
.mc-team__pct--away-fav { color: #FF6B8A; background: rgba(255,107,138,0.1); }

/* VS */
.mc-vs {
    font-size: 16px;
    font-weight: 900;
    color: rgba(175,192,230,0.7);
    letter-spacing: 3px;
    animation: mcVsPulse 3s ease-in-out infinite;
}

/* H2H */
.mc-h2h {
    font-size: 11px;
    color: rgba(255,255,255,0.42);
    text-align: center;
    white-space: nowrap;
}

/* ── Badges & Chips ──────────────────────────────────────────── */
.mc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.mc-badge--featured {
    color: #C8FF00;
    background: rgba(200,255,0,0.15);
    border: 1px solid rgba(200,255,0,0.28);
    font-size: 10px;
    letter-spacing: 1.5px;
}
.mc-badge--jarvis {
    color: #A78BFA;
    background: rgba(124,58,237,0.22);
    width: 54px;
}
.mc-badge--user {
    color: #C8FF00;
    background: rgba(200,255,0,0.12);
    width: 54px;
}
.mc-badge:not(.mc-badge--featured):not(.mc-badge--jarvis):not(.mc-badge--user) {
    color: rgba(255,255,255,0.38);
    background: rgba(255,255,255,0.07);
    width: 54px;
}

.mc-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mc-chip {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
}
.mc-chip--group { color: #00D1FF; background: rgba(0,209,255,0.1);  }
.mc-chip--time  { color: var(--color-muted); background: rgba(255,255,255,0.06); }
.mc-chip--city  { color: var(--color-muted); background: rgba(255,255,255,0.06); }

/* ── Intel Panel (JARVIS + MARKT + MEIN TIPP) ───────────────── */
.mc-intel {
    border-top: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}
.mc-intel__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    min-height: 38px;
}
.mc-intel__row:last-child { border-bottom: none; }
.mc-intel__row--jarvis {
    background: linear-gradient(90deg, rgba(124,58,237,0.18), rgba(0,209,255,0.04));
}
.mc-intel__row--market { background: rgba(255,255,255,0.04); }
.mc-intel__row--user {
    background: linear-gradient(90deg, rgba(200,255,0,0.09), rgba(200,255,0,0.02));
}

.mc-intel__score {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text);
    flex: 1;
    letter-spacing: 0.04em;
}
.mc-intel__score--user { color: #C8FF00; }

.mc-intel__odds {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}
.mc-odds__home { color: #00D68F; }
.mc-odds__draw { color: #FFD166; }
.mc-odds__away { color: #FF6B8A; }
.mc-odds__sep  { color: rgba(255,255,255,0.2); }

.mc-intel__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.mc-intel__note {
    font-size: 10px;
    color: rgba(255,255,255,0.28);
    flex-shrink: 0;
    text-align: right;
}

/* ── Pick Zone: Segmented Control ───────────────────────────── */
.mc-pick-zone {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Segmented Control — separate proportionale Buttons ────── */
.mc-seg-control {
    display: flex;
    gap: 5px;
    min-height: 52px;
}
.mc-seg__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    border-radius: 11px;
    cursor: pointer;
    font-family: var(--font-body);
    color: rgba(175,192,230,0.65);
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 100ms ease, box-shadow 160ms ease;
    padding: 8px 6px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.mc-seg__label {
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-align: center;
}
.mc-seg__pct {
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-mono);
    opacity: 0.65;
}

/* Hover */
.mc-seg__option--home:hover:not(:disabled) {
    background: rgba(0,214,143,0.1);
    border-color: rgba(0,214,143,0.3);
    color: #00D68F;
}
.mc-seg__option--draw:hover:not(:disabled) {
    background: rgba(255,209,102,0.1);
    border-color: rgba(255,209,102,0.3);
    color: #FFD166;
}
.mc-seg__option--away:hover:not(:disabled) {
    background: rgba(255,107,138,0.1);
    border-color: rgba(255,107,138,0.3);
    color: #FF6B8A;
}

/* Aktiv: Hintergrund + Rand + Glow */
.mc-seg-control--home .mc-seg__option--home {
    background: rgba(0,214,143,0.18);
    border-color: rgba(0,214,143,0.55);
    color: #00D68F;
    box-shadow: 0 0 18px rgba(0,214,143,0.25);
    transform: translateY(-1px);
}
.mc-seg-control--home .mc-seg__option--home .mc-seg__pct { opacity: 1; }

.mc-seg-control--draw .mc-seg__option--draw {
    background: rgba(255,209,102,0.18);
    border-color: rgba(255,209,102,0.55);
    color: #FFD166;
    box-shadow: 0 0 18px rgba(255,209,102,0.25);
    transform: translateY(-1px);
}
.mc-seg-control--draw .mc-seg__option--draw .mc-seg__pct { opacity: 1; }

.mc-seg-control--away .mc-seg__option--away {
    background: rgba(255,107,138,0.18);
    border-color: rgba(255,107,138,0.55);
    color: #FF6B8A;
    box-shadow: 0 0 18px rgba(255,107,138,0.25);
    transform: translateY(-1px);
}
.mc-seg-control--away .mc-seg__option--away .mc-seg__pct { opacity: 1; }

/* Locked */
.mc-seg-control--locked {
    opacity: 0.38;
    pointer-events: none;
}

/* ── Score Reveal ────────────────────────────────────────────── */
.mc-score-reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 280ms var(--mc-reveal-ease),
        opacity 200ms ease 60ms;
}
.mc-score-reveal[data-score-visible="true"] {
    grid-template-rows: 1fr;
    opacity: 1;
}
.mc-score-reveal__inner {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 2px;
    flex-wrap: wrap;
}
.mc-score-reveal__label {
    font-size: 10px;
    color: var(--color-muted);
    flex-shrink: 0;
    min-width: 70px;
}
.mc-score-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.mc-score-half {
    width: 44px;
    height: 44px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: #E8EDF8;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mc-score-half::-webkit-inner-spin-button,
.mc-score-half::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mc-score-half:focus {
    border-color: rgba(200,255,0,0.45);
    box-shadow: 0 0 0 3px rgba(200,255,0,0.1);
}
.mc-score-colon {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    color: rgba(175,192,230,0.5);
}
.mc-score-save {
    background: rgba(200,255,0,0.12);
    border: 1px solid rgba(200,255,0,0.28);
    border-radius: 9px;
    color: #C8FF00;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 14px;
    transition: background 150ms ease, transform 100ms ease;
    flex-shrink: 0;
    height: 40px;
}
.mc-score-save:hover { background: rgba(200,255,0,0.22); transform: translateY(-1px); }
.mc-score-save.mc-save--pop { animation: mcSavePop 0.5s ease both; }
.mc-score-saved-badge {
    font-size: 13px;
    color: #00D68F;
    flex-shrink: 0;
}

/* ── Locked State ────────────────────────────────────────────── */
.mc-locked-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    flex-wrap: wrap;
}
.mc-locked-state--empty { opacity: 0.55; }
.mc-locked-pick {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 4px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    color: var(--color-text);
}
.mc-locked-pick--home { color: #00D68F; background: rgba(0,214,143,0.1); }
.mc-locked-pick--draw { color: #FFD166; background: rgba(255,209,102,0.1); }
.mc-locked-pick--away { color: #FF6B8A; background: rgba(255,107,138,0.1); }
.mc-locked-score {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 6px;
}
.mc-locked-reason {
    font-size: 10px;
    color: var(--color-muted);
}

/* ── Confidence classes (wiederverwendet) ────────────────────── */
.mc-card.conf-high { border-color: rgba(0,209,255,0.18); }
.mc-card.conf-medium { border-color: rgba(255,184,0,0.18); }
.mc-card.conf-low   { border-color: rgba(255,107,0,0.18); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mc-featured__stage  { grid-template-columns: 1fr 1.5fr 1fr; padding: 16px 12px 12px; }
    .mc-card__stage      { grid-template-columns: 1fr 1.5fr 1fr; padding: 12px 10px 8px;  }
    .mc-featured .mc-team-flag.flag-img,
    .mc-featured .mc-team-flag.flag-fallback { width: 72px !important; height: 52px !important; min-width: 72px !important; }
    .mc-card .mc-team-flag.flag-img,
    .mc-card .mc-team-flag.flag-fallback { width: 60px !important; height: 44px !important; min-width: 60px !important; }
    .mc-seg__option      { font-size: 10px; }
    .mc-score-reveal__label { display: none; }
}
@media (max-width: 480px) {
    .mc-featured__stage  { grid-template-columns: 1fr 1.2fr 1fr; }
    .mc-card__stage      { grid-template-columns: 1fr 1.2fr 1fr; }
    .mc-team-flag.flag-img,
    .mc-team-flag.flag-fallback { width: 52px !important; height: 38px !important; min-width: 52px !important; font-size: 22px !important; }
    .mc-featured .mc-team-flag.flag-img,
    .mc-featured .mc-team-flag.flag-fallback { width: 60px !important; height: 44px !important; min-width: 60px !important; }
    .mc-team__name       { font-size: 11px; }
}

/* ── Prob-Strip + H2H: größer in mc-Cards ───────────────────── */
.mc-featured__center .st-prob-strip,
.mc-card__center .st-prob-strip {
    height: 14px;
    border-radius: 7px;
    gap: 3px;
}
.mc-featured__center .st-ph,
.mc-card__center .st-ph { border-radius: 7px 0 0 7px; }
.mc-featured__center .st-pa,
.mc-card__center .st-pa { border-radius: 0 7px 7px 0; }

.mc-featured__center .st-prob-nums,
.mc-card__center .st-prob-nums {
    font-size: 13px;
    font-weight: 800;
    margin-top: 4px;
}
.mc-featured__center .st-prob-nums--mkt,
.mc-card__center .st-prob-nums--mkt {
    font-size: 10px;
    margin-top: 2px;
}
.mc-h2h {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    white-space: nowrap;
}
/* VS Text mit Abstand zum Strip */
.mc-featured__center,
.mc-card__center {
    gap: 10px;
}

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mc-featured, .mc-card  { animation: none !important; }
    .mc-score-reveal         { transition-duration: 50ms !important; }
    .mc-vs                   { animation: none !important; }
    .mc-seg__option          { transition-duration: 50ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MATCH CENTER CARDS — mcc-* Design System
   ═══════════════════════════════════════════════════════════════ */

/* ── Match Center Card ──────────────────────────────────────── */
.mcc-card {
    background: rgba(14,18,32,0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.mcc-card--picked-home { border-color: rgba(0,214,143,0.35); box-shadow: 0 0 16px rgba(0,214,143,0.07); }
.mcc-card--picked-draw { border-color: rgba(255,209,102,0.35); box-shadow: 0 0 16px rgba(255,209,102,0.07); }
.mcc-card--picked-away { border-color: rgba(255,107,138,0.35); box-shadow: 0 0 16px rgba(255,107,138,0.07); }
.mcc-card--locked { opacity: 0.75; }

/* ── Summary (geschlossener Zustand) ────────────────────────── */
.mcc-summary {
    cursor: pointer;
    padding: 12px 16px;
    min-height: 48px;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.mcc-summary::-webkit-details-marker { display: none; }
.mcc-summary:hover { background: rgba(255,255,255,0.02); }

.mcc-summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mcc-summary-teams {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    flex-shrink: 0;
}
.mcc-summary-chips {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

/* ── Chips (Header + Summary) ───────────────────────────────── */
.mcc-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    background: rgba(255,255,255,0.07);
    color: var(--color-muted);
}
.mcc-chip--group { color: #00D1FF; background: rgba(0,209,255,0.1); }
.mcc-chip--time  { color: var(--color-muted); }
.mcc-chip--date  { color: var(--color-muted); font-size: 9px; }
.mcc-chip--venue { color: rgba(175,192,230,0.55); font-size: 9px; }
.mcc-chip--conf  { color: #A78BFA; background: rgba(124,58,237,0.15); }
.mcc-chip--warning {
    color: #FFB400;
    background: rgba(255,180,0,0.15);
    border: 1px solid rgba(255,180,0,0.25);
}
.mcc-chip--pick { font-size: 9px; }
.mcc-chip--pick-home { color: #00D68F; background: rgba(0,214,143,0.12); }
.mcc-chip--pick-draw { color: #FFD166; background: rgba(255,209,102,0.12); }
.mcc-chip--pick-away { color: #FF6B8A; background: rgba(255,107,138,0.12); }
.mcc-chip--pick-status {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}
.mcc-chip--picked     { color: #00D68F; background: rgba(0,214,143,0.15); border-color: rgba(0,214,143,0.25); }
.mcc-chip--not-picked { color: #FF6B8A; background: rgba(255,107,138,0.12); border-color: rgba(255,107,138,0.2); }

/* ── Card Body ──────────────────────────────────────────────── */
.mcc-body {
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
}
.mcc-header {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 16px 4px;
    background: rgba(255,255,255,0.02);
}

/* ── Stage: Teams + Center ──────────────────────────────────── */
.mcc-stage {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding: 16px 14px 10px;
    gap: 0;
}
.mcc-stage__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.mcc-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.mcc-team__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcc-team__pct {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-muted);
    background: rgba(255,255,255,0.06);
    padding: 2px 7px;
    border-radius: 5px;
}
.mcc-team__pct--fav { color: #00D68F; background: rgba(0,214,143,0.1); }
.mcc-vs {
    font-size: 13px;
    font-weight: 900;
    color: rgba(175,192,230,0.55);
    letter-spacing: 3px;
}
.mcc-h2h {
    font-size: 10px;
    color: rgba(255,255,255,0.38);
    text-align: center;
    white-space: nowrap;
}

/* ── Pick Zone (wiederverwendet mc-pick-zone + mc-seg-control) ─ */
.mcc-pick-zone {
    padding: 0 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 10px;
}

/* ── Explain/Analysis Panel ─────────────────────────────────── */
.mcc-explain-panel {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(124,58,237,0.04);
}
.mcc-analysis-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.mcc-analysis-meta span {
    font-size: 11px;
    color: var(--color-muted);
    background: rgba(255,255,255,0.05);
    padding: 3px 8px;
    border-radius: 5px;
}
.mcc-deep-link {
    margin-top: 10px;
    font-size: 11px;
}

/* ── Result Editor (collapsible) ────────────────────────────── */
.mcc-result-editor {
    border-top: 1px solid rgba(255,255,255,0.06);
}
.mcc-result-editor summary,
.mcc-result-editor__toggle {
    padding: 9px 16px;
    min-height: 40px;
    cursor: pointer;
    font-size: 11px;
    color: rgba(175,192,230,0.5);
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 150ms ease;
}
.mcc-result-editor summary::before {
    content: "▶";
    font-size: 8px;
    transition: transform 150ms ease;
}
.mcc-result-editor[open] summary::before { transform: rotate(90deg); }
.mcc-result-editor summary::-webkit-details-marker { display: none; }
.mcc-result-editor summary:hover { color: rgba(175,192,230,0.8); }

/* ── Admin Panels ───────────────────────────────────────────── */
.mcc-admin-panel,
.mcc-live-admin {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}
.mcc-admin-panel summary,
.mcc-live-admin summary {
    padding: 10px 16px;
    min-height: 44px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: rgba(175,192,230,0.45);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, background 150ms ease;
}
.mcc-admin-panel summary:hover,
.mcc-live-admin summary:hover {
    color: rgba(175,192,230,0.75);
    background: rgba(255,255,255,0.03);
}
.mcc-admin-panel summary::-webkit-details-marker,
.mcc-live-admin summary::-webkit-details-marker { display: none; }
.mcc-admin-panel__body,
.mcc-live-admin__body {
    padding: 4px 0 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.mcc-admin-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px 4px;
}
.mcc-admin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 16px;
}
.mcc-admin-textarea {
    width: calc(100% - 32px);
    margin: 4px 16px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 8px 10px;
    resize: vertical;
    min-height: 60px;
}
.mcc-admin-status-msg {
    font-size: 10px;
    padding: 2px 16px 4px;
    opacity: 0.6;
    color: var(--color-muted);
}

/* ── Spieltag Day Accordion ─────────────────────────────────── */
.match-center-day > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    margin-bottom: 6px;
    transition: background 150ms ease;
}
.match-center-day > summary:hover { background: rgba(255,255,255,0.05); }
.match-center-day > summary::-webkit-details-marker { display: none; }
.match-center-day > summary::before {
    content: "▶";
    font-size: 9px;
    color: rgba(175,192,230,0.45);
    transition: transform 150ms ease;
    flex-shrink: 0;
}
.match-center-day[open] > summary::before { transform: rotate(90deg); }
.match-center-day-body { padding-left: 4px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mcc-stage { grid-template-columns: 1fr 1.5fr 1fr; padding: 12px 10px 8px; }
    .mcc-summary { padding: 10px 12px; }
    .mcc-chip   { font-size: 9px; padding: 1px 5px; }
}
@media (max-width: 480px) {
    .mcc-stage { grid-template-columns: 1fr 1.2fr 1fr; }
    .mcc-team__name { font-size: 11px; }
    .mcc-summary-chips { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .mcc-card { transition: none !important; }
    .mcc-result-editor summary::before { transition: none !important; }
}

/* ── Dashboard Top Pair: Wichtigste Erkenntnis + JARVIS ist sich sicher ── */
.dashboard-top-pair {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.dashboard-top-pair .dashboard-hero {
    margin: 0;
    padding: 0;
}
.dashboard-top-pair .insight-card {
    height: 100%;
    box-sizing: border-box;
}
.dashboard-top-pair .jarvis-highlights-widget {
    margin-bottom: 0;
    height: 100%;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    .dashboard-top-pair {
        grid-template-columns: 1fr;
    }
}

/* ── MCC Summary Rework — Spieltag-style flag layout ─────────── */
.mcc-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    transition: background 180ms ease;
    border-radius: 10px 10px 0 0;
}
.mcc-summary:hover { background: rgba(255,255,255,0.04); }
.mcc-card[open] > .mcc-summary { border-bottom: 1px solid rgba(255,255,255,0.07); }

.mcc-sum-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.mcc-sum-team {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.mcc-sum-team--away {
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.mcc-sum-flag.flag-img,
.mcc-sum-flag.flag-fallback {
    width: 44px !important;
    height: 32px !important;
    min-width: 44px !important;
    border-radius: 5px !important;
    object-fit: cover !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0;
}
.mcc-sum-name {
    font-size: 13px;
    font-weight: 700;
    color: #F8FAFC;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcc-sum-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 0 4px;
}
.mcc-sum-vs {
    font-size: 9px;
    font-weight: 900;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.12em;
}
.mcc-sum-group {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.mcc-sum-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .mcc-sum-flag.flag-img,
    .mcc-sum-flag.flag-fallback { width: 32px !important; height: 23px !important; }
    .mcc-sum-name { font-size: 11px; }
    .mcc-chip--time { display: none; }
}


/* ── xG Source Badge (StatsBomb) ─────────────────────────────── */
.xg-source-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(99, 211, 178, 0.18);
    color: #63d3b2;
    border: 1px solid rgba(99, 211, 178, 0.35);
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 4px;
    vertical-align: middle;
    cursor: help;
}


/* ═══════════════════════════════════════════════════════════════
   GAMMA AUDIT — Phase G1: Premium Glassmorphism + Polish
   8 targeted fixes for visual quality, consistency, premium feel
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   FINDING #1 [KRITISCH] — st-card: Echter Glassmorphism
   Problem: background war #0C1018 (opak). Kein backdrop-filter.
   Fix: Transluzentes Glas mit Gradient-Shimmer + Ambient Glow
   ────────────────────────────────────────────────────────────── */
.st-card {
    background: rgba(12, 16, 24, 0.72) !important;
    backdrop-filter: blur(18px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* Innerer Light-Shimmer oben links — signiert den Glaseffekt */
.st-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.045) 0%,
        transparent 45%,
        rgba(0, 209, 255, 0.04) 100%
    );
    pointer-events: none;
    z-index: 0;
}
.st-card > * { position: relative; z-index: 1; }
.st-card:hover {
    border-color: rgba(200, 255, 0, 0.28) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(200, 255, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        var(--color-primary-glow) !important;
    transform: translateY(-3px) !important;
}

/* ──────────────────────────────────────────────────────────────
   FINDING #2 [HOCH] — Nav Active State: Indikator-Balken
   Problem: Aktiver Nav-Button nur per Hintergrundfarbe erkennbar.
   Kein visueller Balken-Indikator wie bei modernen Dashboards.
   ────────────────────────────────────────────────────────────── */
.nav-btn.active {
    background: rgba(200, 255, 0, 0.08) !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--color-primary) !important;
    padding-left: 13px !important; /* 16px - 3px border = optisch gleich */
    box-shadow: inset 2px 0 12px rgba(200, 255, 0, 0.08) !important;
}
/* Inaktive Buttons: klarer left-border-Reset */
.nav-btn:not(.active) {
    border-left: 3px solid transparent !important;
    padding-left: 13px !important;
}
.nav-btn:hover:not(.active) {
    border-left-color: rgba(200, 255, 0, 0.25) !important;
}

/* ──────────────────────────────────────────────────────────────
   FINDING #3 [HOCH] — Spieltag Match-Header: Größere Teamnames
   Problem: .st-team-name max-width: 115px + font-size: 13px.
   Bei langen Ländernamen (Tschechische Republik) wird ellipsis
   zu früh getriggert. Teamname ist zu klein für Premium-Look.
   ────────────────────────────────────────────────────────────── */
.st-team-name {
    font-size: 14px !important;
    max-width: 130px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
}
/* Favorit-Indikator: Name bekommt Akzentfarbe */
.st-card:has(.pct-home-fav) .st-team-home .st-team-name {
    color: rgba(0, 214, 143, 0.92);
}
.st-card:has(.pct-away-fav) .st-team-away .st-team-name {
    color: rgba(255, 107, 138, 0.92);
}

/* ──────────────────────────────────────────────────────────────
   FINDING #4 [HOCH] — Probability Bar: Höhe + Contrast
   Problem: .st-prob-strip ist 10px hoch — visuell zu schwach
   für ein Sports Dashboard. Moderne Score-Apps: 12-16px.
   Die Markt-Bar (5px) ist kaum erkennbar.
   ────────────────────────────────────────────────────────────── */
.st-prob-strip {
    height: 14px !important;
    border-radius: 7px !important;
    gap: 2px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
.st-ph { border-radius: 7px 0 0 7px !important; }
.st-pa { border-radius: 0 7px 7px 0 !important; }
/* Markt-Vergleichsbar: sichtbarer */
.st-prob-strip--mkt {
    height: 6px !important;
    opacity: 0.65 !important;
}
/* Prob-Zahlen: Space Mono, größer */
.st-prob-nums {
    font-size: 11px !important;
    margin-top: 5px !important;
    letter-spacing: 0.02em !important;
}

/* ──────────────────────────────────────────────────────────────
   FINDING #5 [HOCH] — Pick-Buttons: Touch Target + Hover Scale
   Problem: .spieltag-actions button hat kein min-height (ca 38px).
   .st-day-nav hat padding: 4px 14px — unter 44px Touch-Target.
   ────────────────────────────────────────────────────────────── */
.spieltag-actions button {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: all 0.2s var(--ease-out) !important;
}
.spieltag-actions button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 209, 255, 0.2) !important;
}
.st-day-nav {
    min-height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
}

/* ──────────────────────────────────────────────────────────────
   FINDING #6 [MITTEL] — JARVIS Section Headers: Typ-Hierarchie
   Problem: .jarvis-section h3 wird auf font-size: 12px gedrückt.
   Das ist kein Header mehr. Section-Labels brauchen mehr Gewicht.
   Fix: Uppercase-Label-Stil mit Electric-Lime-Linie.
   ────────────────────────────────────────────────────────────── */
.jarvis-section h3 {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--color-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.8px !important;
}
/* Trennlinie: subtiler, behält ::after-Separator */
.jarvis-section h3::after {
    background: linear-gradient(
        90deg,
        rgba(200, 255, 0, 0.25),
        rgba(255, 255, 255, 0.04)
    ) !important;
    height: 1px !important;
}
/* JARVIS-Karten: mehr Tiefe */
.jarvis-card {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: border-color 0.2s var(--ease-out),
                box-shadow 0.2s var(--ease-out) !important;
}
.jarvis-card:hover {
    border-color: rgba(124, 58, 237, 0.35) !important;
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.12) !important;
}

/* ──────────────────────────────────────────────────────────────
   FINDING #7 [MITTEL] — mc-card: Glassmorphism + Hover Feedback
   Problem: .mc-card hat backdrop-filter: blur(12px) aber kein
   Hover-Transform. Karten wirken statisch/flach.
   Fix: Subtle lift + border-glow auf Hover.
   ────────────────────────────────────────────────────────────── */
.mc-card {
    background: rgba(10, 14, 22, 0.70) !important;
    backdrop-filter: blur(16px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
    transition: border-color 220ms ease,
                box-shadow 220ms ease,
                transform 220ms var(--ease-out) !important;
    cursor: pointer !important;
}
.mc-card:hover {
    border-color: rgba(0, 209, 255, 0.30) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 209, 255, 0.08),
        0 0 24px rgba(0, 209, 255, 0.06) !important;
    transform: translateY(-2px) !important;
}
/* Featured Card: stärkerer Glow */
.mc-featured:hover {
    border-color: rgba(200, 255, 0, 0.32) !important;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.65),
        0 0 32px rgba(200, 255, 0, 0.08) !important;
}

/* ──────────────────────────────────────────────────────────────
   FINDING #8 [MITTEL] — Topbar H1: Bebas Neue für Hero-Headlines
   Problem: .topbar h1 nutzt font-family: var(--font-body).
   Space Grotesk ist Body-Font. Display-Headings brauchen
   Bebas Neue für den sportlichen Premium-Charakter.
   ────────────────────────────────────────────────────────────── */
.topbar h1 {
    font-family: var(--font-display) !important; /* Bebas Neue */
    font-size: clamp(26px, 3vw, 38px) !important;
    font-weight: 400 !important; /* Bebas Neue hat kein bold */
    letter-spacing: 0.02em !important;
    line-height: 1.05 !important;
}
/* .tag bleibt Space Grotesk uppercase — ist bereits korrekt */
/* Sektions-Überschriften: konsistente Hierarchie */
.section-header h2,
.compact-header h2 {
    font-family: var(--font-body) !important;
    font-size: clamp(15px, 1.8vw, 20px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
}
/* Daten-Werte: Space Mono konsequent für alle Zahlen-Displays */
.st-team-pct,
.mc-team__pct,
.kpi-ring-value,
.ml-score-val {
    font-family: var(--font-display) !important; /* Bebas Neue für große Zahlen */
}

/* ── Reduced Motion: alle Animationen respektieren ────────────── */
@media (prefers-reduced-motion: reduce) {
    .st-card,
    .mc-card,
    .st-pick-btn,
    .st-ph,
    .st-pd,
    .st-pa {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ALPHA + BETA AUDIT — Design Token & UX Fixes
   ALPHA: Farb-Tokens, JARVIS-Identität, Accessibility
   BETA: Navigation-Konsistenz, Mobile UX, Sidebar-Hierarchie
   ═══════════════════════════════════════════════════════════════ */

/* ── ALPHA #4: JARVIS-Identität wiederherstellen ─────────────── */
/* KI-generierte Inhalte nutzen Violet statt Cyan */
.ai-prediction {
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.12),
        rgba(167, 139, 250, 0.05)
    ) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
}
.jarvis-card > strong,
.jarvis-card h4 {
    color: var(--color-jarvis-soft) !important;
}
.jarvis-section h3 {
    color: var(--color-jarvis-soft) !important;
}
/* JARVIS Intelligence View: Header in Violet */
#view-intelligence .section-header h2 {
    color: var(--color-jarvis-soft) !important;
}

/* ── BETA #2: Mobile Active-State vereinheitlichen ───────────── */
/* Desktop: --color-primary (Lime). Mobile: war #00D1FF (Cyan) → jetzt ebenfalls Lime */
.mobile-nav-btn.active {
    color: var(--color-primary) !important;
}
.mobile-nav-btn.active svg {
    filter: drop-shadow(0 0 4px rgba(200, 255, 0, 0.5)) !important;
}

/* ── Mobile: Onboarding Banner komprimieren + Admin-Buttons ausblenden ── */
@media (max-width: 1024px) {
    .onboarding-banner__list {
        display: none !important;
    }
    .onboarding-banner__body {
        padding-bottom: 0 !important;
    }
    .onboarding-banner__title {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }
    .onboarding-banner {
        padding: 10px 14px !important;
    }
    /* Admin-Buttons (Analysen aktualisieren / Formdaten anpassen) nur auf Desktop */
    .spieltag-actions {
        display: none !important;
    }
}

/* ── BETA #4: Sidebar Nav-Gruppen-Labels ─────────────────────── */
.nav-group-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-subtle);
    padding: 14px 16px 4px;
    pointer-events: none;
    user-select: none;
}
.nav-group-label:first-child {
    padding-top: 6px;
}

/* ── BETA #6: "Mehr"-Button Active-State (CSS-Teil) ─────────── */
/* JS setzt .active via moreViews-Check, CSS gibt das Styling */
#mobileNavMore.active {
    color: var(--color-primary) !important;
}
#mobileNavMore.active svg {
    filter: drop-shadow(0 0 4px rgba(200, 255, 0, 0.45)) !important;
}

/* ── Topbar-Suche: Im Dashboard-View weniger Ablenkung ────────── */
/* Suchfeld bleibt vorhanden, aber kompakter auf Mobile */
@media (max-width: 768px) {
    #view-dashboard.view-active ~ * .topbar-search,
    .view-active[id="view-dashboard"] + .topbar .topbar-search {
        opacity: 0.6;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BETA #5: View-Transition Crossfade
   Verlassende View faded aus (position:absolute, kein Layout-Push)
   während neue View gleichzeitig einblendet.
   ═══════════════════════════════════════════════════════════════ */

@keyframes viewFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-5px); }
}

.app-view.view-leaving {
    display: block !important;   /* bleibt sichtbar während Animation */
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    animation: viewFadeOut 180ms ease-in forwards !important;
    pointer-events: none !important;
    z-index: 0;
}

/* ALPHA #6: nav-btn Konsolidierung — einzige autoritative Definition
   Überschreibt alle früheren Blöcke (4557, 8163, 11368) durch Position + !important.
   Hover: konsistent Lime (nicht Cyan). Active: Lime-Balken (GAMMA-Style). */

.nav-btn {
    display: block !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    color: var(--color-muted) !important;
    text-align: left !important;
    padding: 10px 13px !important;  /* 13px = 16px - 3px border-left optisch gleich */
    border-radius: 0 12px 12px 0 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--font-body) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease !important;
}

.nav-btn:hover:not(.active),
.nav-btn:focus-visible:not(.active) {
    background: rgba(200, 255, 0, 0.07) !important;
    color: var(--color-text) !important;
    border-left-color: rgba(200, 255, 0, 0.25) !important;
    outline: none !important;
}

.nav-btn.active {
    background: rgba(200, 255, 0, 0.09) !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    border-left-color: var(--color-primary) !important;
    box-shadow: inset 2px 0 14px rgba(200, 255, 0, 0.07) !important;
}

/* ── GRP-CARD: Liga-Tabellen-Stil Gruppen-Karten ─────────────────────────────
   Ersetzt .group-card ab DELTA Rework. Neue Klassen: grp-card, grp-header,
   grp-table, grp-row, grp-row--q, grp-divider, grp-footer, groups-summary-bar */

.groups-summary-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    margin-bottom: 4px;
}

.groups-summary-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text, #e0e6f0);
    text-transform: uppercase;
}

.groups-summary-stat {
    font-size: 11px;
    color: var(--color-muted, #8892a4);
}

@media (max-width: 480px) {
    .groups-summary-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .groups-summary-stat {
        display: none;
    }
}

/* Card shell */
.grp-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    user-select: none;
    -webkit-user-select: none;
}

.grp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.grp-card > * { position: relative; z-index: 1; }

.grp-card:hover,
.grp-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(0,209,255,0.36);
    background: rgba(0,209,255,0.05);
    outline: none;
}

/* Header */
.grp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 9px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    gap: 8px;
}

.grp-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #00D1FF;
    white-space: nowrap;
}

.grp-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.grp-progress-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted, #8892a4);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.grp-progress-track {
    width: 52px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.grp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff9a3c, #ffcc02);
    border-radius: 2px;
    transition: width 400ms ease;
    min-width: 0;
}

/* Table rows */
.grp-table {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.grp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    opacity: 0.55;
    transition: opacity 160ms ease;
}

.grp-row--q {
    opacity: 1;
    background: rgba(0,255,163,0.04);
}

.grp-card:hover .grp-row {
    opacity: 0.75;
}

.grp-card:hover .grp-row--q {
    opacity: 1;
}

.grp-divider {
    height: 1px;
    margin: 3px 12px;
    background: rgba(255,255,255,0.12);
}

.grp-rank {
    flex: 0 0 14px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-muted, #8892a4);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.grp-row--q .grp-rank {
    color: rgba(0,255,163,0.8);
}

.grp-flag {
    flex: 0 0 18px;
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
}

.grp-flag.flag-fallback {
    flex: 0 0 18px;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    color: var(--color-muted, #8892a4);
}

.grp-tname {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text, #e0e6f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.grp-row--q .grp-tname {
    font-weight: 600;
    color: #fff;
}

.grp-pts {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text, #e0e6f0);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    white-space: nowrap;
}

.grp-row--q .grp-pts {
    color: #00D1FF;
}

/* Qualification chance bar
   Layout: [track█░░░░] [num]
   .grp-chance-bar = outer flex row (track + number)
   .grp-chance-fill = colored fill inside track, width set via inline style */
.grp-chance-bar {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Track behind the fill */
.grp-chance-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.grp-chance-fill {
    height: 4px;
    border-radius: 2px;
    background: rgba(0,209,255,0.45);
    max-width: 100%;
    min-width: 0;
    transition: width 400ms ease;
}

.grp-row--q .grp-chance-fill {
    background: linear-gradient(90deg, rgba(0,255,163,0.75), rgba(0,209,255,0.9));
}

.grp-chance-num {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-muted, #8892a4);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 26px;
    text-align: right;
    flex-shrink: 0;
}

.grp-row--q .grp-chance-num {
    color: rgba(0,255,163,0.9);
}

/* Footer */
.grp-footer {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px 9px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(180,0,255,0.04);
}

.grp-footer-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(180,100,255,0.7);
    background: rgba(180,100,255,0.12);
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.grp-fav-flag {
    width: 16px;
    height: 11px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.grp-fav-flag.flag-fallback {
    font-size: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 11px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    color: var(--color-muted, #8892a4);
}

.grp-fav-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(210,160,255,0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.grp-fav-pct {
    font-size: 11px;
    font-weight: 700;
    color: rgba(180,100,255,0.85);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Mobile: single column, tighter rows */
@media (max-width: 600px) {
    .grp-card {
        border-radius: 10px;
    }

    .grp-row {
        grid-template-columns: 16px 18px 1fr auto 68px;
        gap: 4px;
        padding: 4px 10px;
    }

    .grp-chance-bar {
        width: 68px;
    }

    .grp-tname {
        font-size: 11px;
    }

    .grp-pts {
        font-size: 11px;
    }
}

/* END GRP-CARD */

/* ═══════════════════════════════════════════════════════════════
   JARVIS DESIGN CONSISTENCY FIX BLOCK — Audit 2026-06-10
   Fixes: Token-Farben · Hover-States · Typographie · A11y
   ═══════════════════════════════════════════════════════════════ */

/* A) JARVIS-Identität (Violett) reparieren — Cyan-Drift entfernen */
.consensus-jarvis { color: rgba(167,139,250,0.9) !important; }
.jarvis-section h3 { color: rgba(167,139,250,0.85) !important; }
.xg-source-badge {
    background: rgba(167,139,250,0.15) !important;
    color: rgba(167,139,250,0.95) !important;
    border-color: rgba(167,139,250,0.25) !important;
}

/* B) tabular-nums für alle Zahl-Elemente */
.lc-fav-pct,
.lc-row-value,
.lc-fav-rank,
.lc-consensus-gap {
    font-variant-numeric: tabular-nums;
}

/* C) lc-card Hover reparieren (translateY fehlte trotz Klickbarkeit) */
.lc-card {
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}
.lc-card:hover { transform: translateY(-2px) !important; }

/* D) Bebas Neue für Gruppen-Namen (visuelle Headline) */
.grp-name {
    font-family: var(--font-display, 'Bebas Neue', sans-serif) !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
}

/* E) modal-close Hover- + Focus-State */
.modal-close:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    transform: scale(1.1) !important;
}
.modal-close:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}

/* F) lc-fav-row Focus-State + Klickbarkeit */
.lc-fav-row {
    cursor: pointer;
}
.lc-fav-row:focus-visible {
    outline: 2px solid var(--color-primary, #C8FF00) !important;
    outline-offset: -2px !important;
    border-radius: 10px !important;
}

/* G) grp-card Focus-State verbessern (kein outline:none mehr) */
.grp-card:focus-visible {
    outline: 2px solid var(--color-primary, #C8FF00) !important;
    outline-offset: 2px !important;
    border-color: var(--color-primary, #C8FF00) !important;
}

/* H) letter-spacing Vereinheitlichung */
.intel-card-title { letter-spacing: 1.2px !important; }
.nav-group-label {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
}

/* I) LC-Zeilen Padding angleichen (14px → 12px horizontal) */
.lc-fav-row { padding: 7px 12px !important; }
.lc-consensus-row { padding: 7px 12px !important; }

/* J) Progress-Bar Gradient vereinheitlichen (grün→cyan) */
.grp-progress-fill {
    background: linear-gradient(90deg, #00FFA3, #00D1FF) !important;
}

/* K) Group-Modal Background an Standard-Modals angleichen */
.group-modal-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.032)),
        rgba(14,21,40,0.95) !important;
    border-color: rgba(255,255,255,0.16) !important;
}

/* ── AUDIT PHASE 2: Teams-View Konsistenz + restliche Audit-Themen ─── */

/* Teams-DATENKARTE: kompakter Details-Toggle */
.team-datenkarte-details {
    grid-column: 1 / -1;
    border: 1px solid rgba(175,192,230,0.12);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.025);
    margin-bottom: 4px;
}
.team-datenkarte-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-muted, #8A9EC2);
    user-select: none;
    transition: color 160ms ease, background 160ms ease;
}
.team-datenkarte-summary::-webkit-details-marker { display: none; }
.team-datenkarte-summary::before {
    content: "›";
    display: inline-block;
    transition: transform 160ms ease;
    font-size: 14px;
    color: var(--color-muted, #8A9EC2);
}
.team-datenkarte-details[open] .team-datenkarte-summary::before { transform: rotate(90deg); }
.team-datenkarte-summary:hover { color: var(--color-text, #EAF2FF); background: rgba(255,255,255,0.03); }
.team-datenkarte-sub {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
    color: rgba(175,192,230,0.5);
}
.team-datenkarte-details .team-profile-data-card {
    border-top: 1px solid rgba(175,192,230,0.1);
    border-radius: 0;
}

/* ml-ranking-card mobile override auch auf 12px */
@media (max-width: 768px) {
    .ml-ranking-card { border-radius: 12px !important; }
}



/* Border-Radius Vereinheitlichung: alle Top-Level-Karten auf 12px (Audit BETA-2) */
.insight-card,
.lc-hero,
.lc-section,
.dashboard-hero .insight-card-full {
    border-radius: 12px !important;
}

/* Section-Header h2 Cascade-Fix: eine autoritative Regel (Audit DELTA-3) */
.section-header.compact-header h2,
.section-header.compact-header h2[id] {
    font-size: clamp(18px, 2.2vw, 22px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.3px !important;
}

/* Transition-Standard: 150ms-Ausreißer auf 160ms (Audit DELTA-5) */
.nav-btn,
.mobile-nav-btn,
.grp-card,
.lc-fav-row,
.source-pill {
    transition-duration: 160ms !important;
}


/* ═══════════════════════════════════════════════════════════════
   VISUAL CONSISTENCY FIX — Synthesized from 4-Agent Screenshot Audit
   2026-06-10
   Fixes: lc-group-compact-section card-pattern, bar-design unification,
   grp-card depth, transition standardization, h2 color consistency
   ═══════════════════════════════════════════════════════════════ */

/* 1. lc-group-compact-section: aus eigenem BG-System in Card-Pattern bringen */
.lc-group-compact-section {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* 2. lc-group-compact-row: Border-Farbe vereinheitlichen */
.lc-group-compact-row {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* 3. Bar-Design vereinheitlichen: alle Balken 5px / radius 3px / mint→cyan */
.lc-group-compact-bar-wrap {
    border-radius: 3px !important;
}
.lc-group-compact-bar {
    background: linear-gradient(90deg, #00FFA3, #00D1FF) !important;
    box-shadow: none !important;
    border-radius: 3px !important;
}
.lc-row-bar-wrap {
    height: 5px !important;
    border-radius: 3px !important;
}
.lc-row-bar {
    border-radius: 3px !important;
}
.lc-fav-bar-wrap {
    height: 5px !important;
    border-radius: 3px !important;
}
.lc-fav-bar {
    border-radius: 3px !important;
}

/* 4. grp-card: backdrop-filter + box-shadow wie ml-ranking-card */
.grp-card {
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14) !important;
}

/* 5. Transitions: alle auf 160ms standardisieren */
.mcc-card {
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
}
.match-center-day > summary {
    transition: background 160ms ease !important;
}
.insight-card {
    transition: border-color 160ms ease, background 160ms ease !important;
}

/* 6. h2-Farbe: konsistent in allen Views */
.section-header h2,
.compact-header h2 {
    color: var(--color-text, #EDF2FF) !important;
}

/* 7. nav-secondary-btn active: sichtbar aber dezenter als nav-btn */
.nav-secondary-btn.active {
    color: var(--color-primary) !important;
    background: rgba(200,255,0,0.08) !important;
}

/* 8. lc-group-compact-section header: border-bottom Separator wie lc-card-header */
.lc-group-compact-section > .lc-section-hdr {
    padding-bottom: 10px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* 9. mcc-card: radius 14px auf 12px angleichen (Konsistenz mit grp-card, ml-ranking-card) */
.mcc-card {
    border-radius: 12px !important;
}

/* 10. match-center-day summary: margin-gap entfernen der Spalt erzeugt */
.match-center-day > summary {
    margin-bottom: 0 !important;
}

/* ─── Ende VISUAL CONSISTENCY FIX ───────────────────────────── */

/* mcc-flag: Flag im expanded mcc-card Body */
.mcc-flag.flag-img,
.mcc-flag.flag-fallback {
    width: 52px !important;
    height: 38px !important;
    min-width: 52px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
}
@media (max-width: 480px) {
    .mcc-flag.flag-img,
    .mcc-flag.flag-fallback { width: 36px !important; height: 26px !important; }
}

/* match-center-day: border-radius auf 12px (= mcc-card Standard) */
.match-center-day {
    border-radius: 12px !important;
}
.match-center-day-body {
    padding: 8px !important;
    gap: 6px !important;
}


/* ══════════════════════════════════════════════════════════════
   ADMIN UPDATE BUTTON (nur sichtbar wenn lokaler Server läuft)
   ══════════════════════════════════════════════════════════════ */

.sidebar-admin-update-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    background: linear-gradient(135deg, rgba(200,255,0,0.12), rgba(128,247,255,0.08));
    border: 1px solid rgba(200,255,0,0.35);
    border-radius: 8px;
    color: #C8FF00;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, border-color 0.2s;
    touch-action: manipulation;
}
.sidebar-admin-update-btn:hover {
    background: linear-gradient(135deg, rgba(200,255,0,0.22), rgba(128,247,255,0.14));
    border-color: rgba(200,255,0,0.6);
}
.sidebar-admin-update-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN UPDATE OVERLAY
   ══════════════════════════════════════════════════════════════ */

.au-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(6,8,16,0.85);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.au-panel {
    background: #0D1117;
    border: 1px solid rgba(200,255,0,0.25);
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,255,0,0.08);
}
.au-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.au-title {
    font-size: 14px;
    font-weight: 700;
    color: #C8FF00;
    letter-spacing: 0.3px;
}
.au-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    touch-action: manipulation;
    transition: color 0.15s;
}
.au-close:hover { color: #fff; }
.au-status {
    padding: 12px 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.au-log {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    line-height: 1.7;
    color: rgba(255,255,255,0.45);
}
.au-log-line { display: block; }
.au-log--start  { color: rgba(200,255,0,0.7); }
.au-log--done   { color: rgba(128,247,255,0.8); font-weight: 600; }
.au-log--success { color: #C8FF00; font-weight: 700; }
.au-log--error  { color: #FF6B6B; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   TRUST BANNER — Neue Daten Chip
   ══════════════════════════════════════════════════════════════ */

.trust-banner-item--new {
    cursor: pointer;
    background: rgba(200, 255, 0, 0.10);
    border: 1px solid rgba(200, 255, 0, 0.40);
    border-radius: 20px;
    padding: 3px 10px 3px 8px;
    color: #C8FF00;
    animation: trust-pulse 2s ease-in-out infinite;
    transition: background 0.2s;
    user-select: none;
    -webkit-user-select: none;
}
.trust-banner-item--new:hover,
.trust-banner-item--new:active {
    background: rgba(200, 255, 0, 0.20);
}

@keyframes trust-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 255, 0, 0.0); }
    50%       { box-shadow: 0 0 0 4px rgba(200, 255, 0, 0.15); }
}

.trust-refresh-icon--spin {
    display: inline-block;
    animation: trust-spin 1.2s linear infinite;
}

@keyframes trust-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   PULL-TO-REFRESH INDIKATOR
   ══════════════════════════════════════════════════════════════ */

.pull-indicator {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(13, 17, 23, 0.92);
    border: 1px solid rgba(200, 255, 0, 0.25);
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    pointer-events: none;
    white-space: nowrap;
}
.pull-indicator--ready {
    border-color: rgba(200, 255, 0, 0.6);
    color: #C8FF00;
}
.pull-indicator__icon {
    font-size: 16px;
    display: inline-block;
    transition: transform 0.2s;
}
.pull-indicator--ready .pull-indicator__icon {
    animation: trust-spin 0.8s linear infinite;
}
.au-log--log    { color: rgba(255,255,255,0.35); }