
:root {
    --se-layout-max: 1560px;
    --se-layout-gutter: 12px;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-quaternary: #e2e8f0;
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-hover: #f1f5f9;
    --bg-active: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --text-muted: var(--text-tertiary);
    --text-quaternary: #94a3b8;
    --text-inverse: #ffffff;
    --text-disabled: #cbd5e1;
    --text-success: #059669;
    --text-warning: #d97706;
    --text-error: #dc2626;
    --text-info: #0284c7;
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --border-tertiary: #94a3b8;
    --border-focus: #3b82f6;
    --border-error: #ef4444;
    --border-success: #10b981;
    --color-brand: #dc2626;
    --color-brand-rgb: 220, 38, 38; 
    --color-brand-light: #ef4444;
    --color-brand-removed: #b91c1c;
    --color-brand-bg: #fef2f2;
    --color-accent: #3b82f6;
    --color-accent-light: #60a5fa;
    --color-accent-removed: #2563eb;
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-removed: #059669;
    --color-success-bg: #ecfdf5;
    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-warning-removed: #d97706;
    --color-warning-bg: #fffbeb;
    --color-error: #ef4444;
    --color-error-light: #f87171;
    --color-error-removed: #dc2626;
    --color-error-bg: #fef2f2;
    --color-info: #3b82f6;
    --color-info-light: #60a5fa;
    --color-info-removed: #2563eb;
    --color-info-bg: #eff6ff;
    --color-live: #ef4444;
    --color-live-badge: #e02020;
    --color-live-bg: rgba(239, 68, 68, 0.1);
    --color-live-pulse: #ef4444;
    --sport-nfl: #013369;
    --sport-nba: #c9082a;
    --sport-mlb: #132448;
    --sport-nhl: #000000;
    --sport-ufc: #d20a0a;
    --sport-boxing: #b8860b;
    --sport-f1: #e10600;
    --sport-soccer: #00a651;
    --sport-wwe: #d4af37;
    --sport-cfb: #ff6600;
    --sport-ncaab: #003da5;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --img-brightness: 1;
    --img-contrast: 1;
    --img-saturation: 1;
    --img-opacity: 1;
    --logo-filter: none;
    --icon-filter: none;
    --page-bg-soft: #eef2f6;
    --surface-muted: #e8ecf1;
    --surface-subtle: rgba(255, 255, 255, 0.05);
    --surface-inverse-muted: rgba(255, 255, 255, 0.1);
    --surface-black: #000000;
    --slate-deep: #0f1219;
    --slate-band-start: #141824;
    --promo-slot-blue: #1e4a8a;
    --promo-slot-red-dark: #b30d00;
    --ribbon-border-on-dark: rgba(255, 255, 255, 0.07);
    --ribbon-border-on-dark-strong: rgba(255, 255, 255, 0.12);
    --text-on-dark: #f8fafc;
    --text-slate-deep: #1e293b;
    --ink-slate-card: #2c3e50;
    --color-star-gold: #a16207;
    --gold-accent: #ffd700;
    --f1-accent: #e10600;
    --color-violet-strong: #7c3aed;
    --color-violet-soft: #a78bfa;
    --overlay-soft: rgba(0, 0, 0, 0.05);
    --overlay-medium: rgba(0, 0, 0, 0.2);
    --overlay-strong: rgba(0, 0, 0, 0.4);
    --overlay-slate-heavy: rgba(15, 23, 42, 0.98);
    --border-on-inverse-soft: rgba(255, 255, 255, 0.3);
    --border-on-inverse-strong: rgba(255, 255, 255, 0.5);
    --rgb-slate-900: 15, 23, 42;
    --rgb-white: 255, 255, 255;
    --rgb-accent: 59, 130, 246;
    --rgb-success: 16, 185, 129;
    --shadow-slate-micro: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-slate-rise: 0 -2px 16px rgba(0, 0, 0, 0.2);
    --shadow-inset-brand-line: inset -1px 0 rgba(15, 23, 42, 0.1);
    --brand-shadow-sm: 0 4px 12px rgba(220, 38, 38, 0.3);
    --brand-shadow-lg: 0 8px 25px rgba(239, 68, 68, 0.4);
    --brand-shadow-subtle: 0 2px 8px rgba(239, 68, 68, 0.4);
    --accent-shadow-sm: 0 4px 12px rgba(59, 130, 246, 0.3);
    --accent-shadow-md: 0 6px 16px rgba(59, 130, 246, 0.4);
    --accent-shadow-soft: 0 3px 10px rgba(59, 130, 246, 0.3);
    --focus-ring-accent: 0 0 0 3px rgba(59, 130, 246, 0.12);
    --focus-ring-brand: 0 0 0 3px rgba(220, 38, 38, 0.1);
    --focus-ring-accent-tight: 0 0 0 3px rgba(59, 130, 246, 0.1);
    --border-error-soft: rgba(239, 68, 68, 0.25);
    --border-success-soft: rgba(16, 185, 129, 0.25);
    --border-info-soft: rgba(59, 130, 246, 0.2);
    --border-warning-soft: rgba(245, 158, 11, 0.25);
    --border-brand-muted: rgba(220, 38, 38, 0.35);
    --surface-danger-soft: rgba(254, 226, 226, 0.45);
    --surface-success-strong: #15803d;
    --palette-orange-deep: #ea580c;
    --palette-violet-soft-bg: #ede9fe;
    --palette-green-soft-bg: #dcfce7;
    --palette-amber-soft-bg: #fef3c7;
    --palette-peach-soft-bg: #ffedd5;
    --palette-red-soft-bg: #fee2e2;
    --palette-green-badge: #16a34a;
    --neutral-dim: rgba(0, 0, 0, 0.376);
    --shadow-lift-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
    --focus-ring-brand-2: 0 0 0 2px rgba(220, 38, 38, 0.2);
    --text-on-dark-muted: #f1f5f9;
    --text-on-dark-dim: #e2e8f0;
    --text-inverse-faint: rgba(255, 255, 255, 0.82);
    --text-inverse-muted: rgba(255, 255, 255, 0.95);
    --text-ink-strong: #1a1a1a;
    --text-ink-medium: #4a4a4a;
    --text-ink-deep: #020617;
    --text-slate-card-title: var(--ink-slate-card);
    --text-slate-ui: #374151;
    --text-gray-ui: #7f8c8d;
    --text-orange-amber: #9a3412;
    --text-orange-amber-strong: #7c2d12;
    --color-warning-deep: #b45309;
    --text-gray-weak: rgba(0, 0, 0, 0.4);
    --surface-neutral-panel: #f8f9fa;
    --surface-true-black: #0a0a0a;
    --surface-warm-highlight: #fffaf0;
    --surface-team-glass-dark: rgba(30, 41, 55, 0.48);
    --surface-amber-tone: rgba(55, 28, 6, 0.68);
    --surface-overlay-dim: rgba(0, 0, 0, 0.24);
    --surface-overlay-medium-dark: rgba(0, 0, 0, 0.58);
    --surface-overlay-heavy-dark: rgba(0, 0, 0, 0.75);
    --border-inverse-faint: rgba(255, 255, 255, 0.2);
    --border-inverse-soft: rgba(255, 255, 255, 0.22);
    --border-inverse-medium: rgba(255, 255, 255, 0.35);
    --border-inverse-strong: rgba(255, 255, 255, 0.5);
    --border-inverse-ring: rgba(255, 255, 255, 0.36);
    --border-glass-cover: rgba(255, 255, 255, 0.3);
    --border-amber-strong: rgba(251, 191, 36, 0.38);
    --surface-muted-bootstrap: #e9ecef;
    --border-bootstrap: #dee2e6;
    --border-neutral-card: #e6e9ef;
    --text-gray-600: #666666;
    --palette-bootstrap-success: #28a745;
    --palette-bootstrap-danger: #dc3545;
    --player-chrome-921: #121923;
    --zinc-950: #18181b;
    --github-dark-bg: #0d1117;
    --channel-canvas-dark: #080c14;
    --gray-950-ui: #111827;
    --surface-true-black-soft: #0e0e10;
    --accent-coral-orange: #ff6b35;
    --accent-salmon: #ff6b6b;
    --text-strong-muted: #333333;
    --border-soft-gray: #dddddd;
    --neutral-500-ui: #6c757d;
    --neutral-600-ui: #545b62;
    --material-green-500: #4caf50;
    --material-blue-500: #2196f3;
    --material-red-500: #f44336;
    --material-orange-500: #ff9800;
    --info-bootstrap: #17a2b8;
    --palette-blue-soft-a: #e3f2fd;
    --palette-blue-soft-b: #bbdefb;
    --accent-brand-deep-red: #a80010;
    --accent-brand-mid-red: #b40012;
    --accent-brand-muted-red: #8f000e;
    --palette-red-dark-text: #450a0a;
    --palette-purple-wash-a: #faf5ff;
    --palette-purple-wash-b: #f3e8ff;
    --palette-purple-text-soft: #d8b4fe;
    --palette-purple-muted-text: #e2d8f5;
    --discount-text-strong: #3b0764;
    --discount-text-mid: #5b21b6;
    --discount-text-deep: #4c1d95;
    --discount-band-mid: #2d0a5e;
    --discount-band-edge: #1a0533;
    --discount-band-inner: #1e0442;
    --discount-night-edge: #0f0020;
    --accent-bright-blue: #3a8aff;
    --accent-deep-red-alt: #cc1212;
    --multistream-theater-bg: #0d0f1a;
    --border-gray-300: #d1d5db;
    --surface-gray-50: #f3f4f6;
    --border-line-muted: #e3e3e3;
    --gradient-brand-deep-end: #991b1b;
    --gradient-indigo-strong: #4f46e5;
    --gradient-indigo-deep: #3730a3;
    --premium-plate-bg: #1a1a2e;
    --premium-plate-border: #2e2e50;
    --palette-violet-500-text: #8b5cf6;
    --text-error-soft: #fecaca;
    --accent-pink-pop: #f093fb;
    --surface-brand-wash-ultra: rgba(220, 38, 38, 0.07);
    --surface-brand-wash: rgba(220, 38, 38, 0.1);
    --shadow-slate-card: 0 8px 24px rgba(17, 24, 39, 0.06);
    --shadow-slate-card-lg: 0 12px 32px rgba(17, 24, 39, 0.12);
    --shadow-slate-float: 0 12px 40px rgba(15, 23, 42, 0.18);
    --shadow-slate-bar: 0 -10px 40px rgba(15, 23, 42, 0.22);
    --shadow-neutral-card: 0 4px 28px -8px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-drop-violet: 0 2px 8px rgba(102, 126, 234, 0.3);
    --shadow-drop-violet-md: 0 4px 15px rgba(102, 126, 234, 0.3);
    --shadow-drop-violet-lg: 0 6px 20px rgba(102, 126, 234, 0.4);
    --shadow-drop-red-warm: 0 2px 8px rgba(231, 76, 60, 0.4);
    --shadow-drop-black-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-drop-black-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-drop-black-tight: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-inset-dark-hairline: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    --shadow-inset-inverse-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    --shadow-inset-inverse-soft: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    --shadow-glow-warm: 0 0 8px rgba(251, 191, 36, 0.45);
    --shadow-text-slate-tight: 0 1px 1px rgba(15, 23, 42, 0.12);
    --shadow-text-slate-soft: 0 1px 2px rgba(15, 23, 42, 0.18);
    --shadow-text-dark-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-text-dark-md: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-text-dark-strong: 0 1px 2px rgba(0, 0, 0, 0.65);
    --shadow-text-dark-heavy: 0 1px 2px rgba(0, 0, 0, 0.85);
    --shadow-text-brand-warm: 0 1px 2px rgba(180, 83, 9, 0.35);
    --shadow-chip-glow-live: 0 0 2px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.65);
    --shadow-star-idle: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.25);
    --shadow-chip-glow-accent: 0 0 8px rgba(251, 191, 36, 0.45), 0 1px 3px rgba(0, 0, 0, 0.55);
    --shadow-slate-ribbon: 0 1px 3px rgba(15, 23, 42, 0.12);
    --shadow-score-line: 0 2px 8px rgba(0, 0, 0, 0.55);
    --shadow-glass-strong: 0 1px 3px rgba(0, 0, 0, 0.55);
    --gradient-brand-count: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.9));
    --gradient-badge-purple-from: #667eea;
    --gradient-badge-purple-to: #764ba2;
    --gradient-badge-green-from: #27ae60;
    --gradient-badge-green-to: #2ecc71;
    --gradient-badge-orange-from: #e67e22;
    --gradient-badge-orange-to: #f39c12;
    --gradient-badge-violet-deep-from: #8e44ad;
    --gradient-badge-violet-deep-to: #9b59b6;
    --gradient-badge-blue-deep-from: #2980b9;
    --gradient-badge-blue-deep-to: #3498db;
    --gradient-badge-red-warm-from: #e74c3c;
    --gradient-badge-red-warm-to: #c0392b;
    --palette-blue-uefa: #4361ee;
    --surface-blue-wash: #e9efff;
    --border-blue-wash: #d6e3ff;
    --border-slate-ui-faint: rgba(51, 65, 85, 0.35);
    --border-slate-ui-muted: rgba(51, 65, 85, 0.45);
    --text-muted-cool: #9ca3af;
    --color-orange-bright: #f97316;
    --color-sky-bright: #38bdf8;
    --text-on-dark-97: rgba(248, 250, 252, 0.97);
    --text-on-dark-98: rgba(248, 250, 252, 0.98);
    --text-inverse-dimmed: rgba(255, 255, 255, 0.82);
    --filter-drop-elevated: drop-shadow(0 1px 2px rgb(15 23 42 / 0.14));
    --crest-well-inset: inset 0 1px 1px rgb(15 23 42 / 0.09), inset 0 0 0 1px rgb(15 23 42 / 0.03);
    --shadow-glass-card: 0 2px 8px rgba(0, 0, 0, 0.1);
    --surface-slate-hover: rgba(15, 23, 42, 0.06);
    --border-text-primary-soft: rgba(15, 23, 42, 0.12);
    --text-gray-pale: #e5e7eb;
    --uefa-split-home-default: #1e3a5f;
    --uefa-split-away-default: #0b1220;
    --shadow-overlay-slate-soft: 0 0 12px rgba(0, 0, 0, 0.25);
    --shadow-text-drop-deep: 0 1px 3px rgba(0, 0, 0, 0.65);
    --shadow-text-slate-firm: 0 1px 1px rgba(15, 23, 42, 0.18);
    --surface-brand-dark-mix: #1a0505;
    --palette-info-deep: #004085;
    --player-notice-maroon-start: #710000;
    --player-notice-maroon-end: #a30000;
    --player-surface-panel: #1a2133;
    --player-surface-band: #151c2a;
    --player-surface-ink: #141e30;
    --player-surface-veil: #1a1f2e;
    --player-surface-mid: #252f42;
    --player-surface-alt: #2d3a50;
    --player-gradient-navy-a: #1e2c43;
    --player-gradient-navy-b: #314464;
    --player-border-inner: #2a3446;
    --player-border-outer: #3a4b6a;
    --player-border-muted: #4a5b7a;
    --player-blue-950: #0b2a5a;
    --player-blue-900: #0d47a1;
    --player-blue-800: #1565c0;
    --player-blue-700: #1976d2;
    --player-blue-deep: #2d4a85;
    --player-blue-mid-deep: #1e3a72;
    --action-surface-scrim: rgba(15, 23, 42, 0.52);
}

html:not([data-theme="dark"]) {
    --multistream-theater-bg: #dfe3ea;
}

@media (max-width: 1024px) {
    :root {
        --se-layout-gutter: 8px;
    }
}
@media (max-width: 640px) {
    :root {
        --se-layout-gutter: 6px;
    }
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    transition: background-color 0.05s ease, color 0.05s ease;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    transition: color 0.3s ease;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p {
    color: var(--text-secondary);
    margin: 0;
    transition: color 0.3s ease;
}
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}
.btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-secondary);
}
.btn-primary {
    background-color: var(--color-brand);
    color: var(--text-inverse);
    border-color: var(--color-brand);
}
.btn-primary:hover {
    background-color: var(--color-brand-removed);
    border-color: var(--color-brand-removed);
}
.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-secondary);
}
input, textarea, select {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring-accent-tight);
}
input::placeholder, textarea::placeholder {
    color: var(--text-quaternary);
}
img:not(.f1-logo-img):not(.se-chrome__mark-img):not(.se-chrome__burger-img):not(.se-chrome__matches-search-img):not(.se-mob-logo-img):not(.team-logo-normal):not(.m-card__crest-img):not(.m-card__mark) {
    filter: brightness(var(--img-brightness)) 
            contrast(var(--img-contrast)) 
            saturate(var(--img-saturation)) 
            opacity(var(--img-opacity));
    transition: filter 0.3s ease;
}
img.team-logo-normal {
    filter: none;
    opacity: 1;
}
.logo:not(.f1-logo), .brand-logo:not(.f1-logo) {
    filter: var(--logo-filter);
}
.f1-logo,
.se-mob-logo,
.se-chrome__mark-hit {
    filter: none;
}
img.f1-logo-img,
img.se-mob-logo-img,
img.se-chrome__mark-img {
    filter: none;
    opacity: 1;
    transition: none;
}
.icon, .fa, [class*="fa-"] {
    filter: var(--icon-filter);
    transition: filter 0.3s ease;
}
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
@media (max-width: 640px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}
*:not(img) {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
    background: var(--border-tertiary);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-quaternary);
}
::selection {
    background-color: var(--color-brand);
    color: var(--text-inverse);
}
::-moz-selection {
    background-color: var(--color-brand);
    color: var(--text-inverse);
}
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.se-filter-btn:focus-visible {
    outline: none !important;
}
.loading {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: loading 2s infinite;
}
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.fade-in {
    animation: fadeIn 0.5s ease-out;
}
.pulse {
    animation: pulse 2s infinite;
}
@media (prefers-contrast: high) {
    :root {
        --border-primary: #000000;
        --text-tertiary: var(--text-secondary);
    }
    [data-theme="dark"] {
        --border-primary: #ffffff;
        --bg-primary: #000000;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
@media print {
    body {
        background: white !important;
        color: black !important;
    }
} 

