/* Theme variables are in styles/themes.css */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Proxima Nova */
@font-face {
     font-family: 'Proxima Nova';
     src: url(/static/media/ProximaNova-Black.de69aa8511b8014c6d77.woff2) format('woff2'),
          url(/static/media/ProximaNova-Black.fb69a7e3d16027c562f6.woff) format('woff');
     font-weight: 900;
     font-style: normal;
   }
   
   @font-face {
     font-family: 'Proxima Nova';
     src: url(/static/media/ProximaNova-BlackIt.988c717773bb39a451e0.woff2) format('woff2'),
          url(/static/media/ProximaNova-BlackIt.303e3f3e55db565e4d26.woff) format('woff');
     font-weight: 900;
     font-style: italic;
   }
   
   @font-face {
     font-family: 'Proxima Nova';
     src: url(/static/media/ProximaNova-Bold.dc72d7d462eaec3e7a0e.woff2) format('woff2'),
          url(/static/media/ProximaNova-Bold.beccd2bc952ce9ebb229.woff) format('woff');
     font-weight: 700;
     font-style: normal;
   }
   
   @font-face {
     font-family: 'Proxima Nova';
     src: url(/static/media/ProximaNova-BoldIt.f9ffa84de95530fb0d83.woff2) format('woff2'),
          url(/static/media/ProximaNova-BoldIt.da0795943227c7bb39e4.woff) format('woff');
     font-weight: 700;
     font-style: italic;
   }
   
   @font-face {
     font-family: 'Proxima Nova';
     src: url(/static/media/ProximaNova-ExtraBold.4b30a6d99923ffdfe78c.woff2) format('woff2'),
          url(/static/media/ProximaNova-ExtraBold.dfacd88ae84234a9e896.woff) format('woff');
     font-weight: 800;
     font-style: normal;
   }
   
   
   @font-face {
     font-family: 'Proxima Nova';
     src: url(/static/media/ProximaNova-Light.48893dbbfd2baab58ff8.woff2) format('woff2'),
          url(/static/media/ProximaNova-Light.419d23f4a1ef0eb00988.woff) format('woff');
     font-weight: 300;
     font-style: normal;
   }
   
   @font-face {
     font-family: 'Proxima Nova';
     src: url(/static/media/ProximaNova-Regular.9299bdbdebf39afe09f8.woff2) format('woff2'),
          url(/static/media/ProximaNova-Regular.bd7a4f05d21d649628d2.woff) format('woff');
     font-weight: normal;
     font-style: normal;
   }
   
   /* Proxima Nova Condensed */
   @font-face {
     font-family: 'Proxima Nova Cond';
     src: url(/static/media/ProximaNovaCond-Black.fa4f2638b338270679fb.woff2) format('woff2'),
          url(/static/media/ProximaNovaCond-Black.60f7f58ebd23611f3ab0.woff) format('woff');
     font-weight: 900;
     font-style: normal;
   }
   
   @font-face {
     font-family: 'Proxima Nova Cond';
     src: url(/static/media/ProximaNovaCond-BlackIt.c8a15740073068f1e500.woff2) format('woff2'),
          url(/static/media/ProximaNovaCond-BlackIt.7a22f2a8a85bbe099db8.woff) format('woff');
     font-weight: 900;
     font-style: italic;
   }
   
   @font-face {
     font-family: 'Proxima Nova Cond';
     src: url(/static/media/ProximaNovaCond-Bold.550e4761bce4986ef2b5.woff2) format('woff2'),
          url(/static/media/ProximaNovaCond-Bold.22dd738be00ebb74bcd2.woff) format('woff');
     font-weight: 700;
     font-style: normal;
   }
   
   @font-face {
     font-family: 'Proxima Nova Cond';
     src: url(/static/media/ProximaNovaCond-BoldIt.db52de27bea3425b8c46.woff2) format('woff2'),
          url(/static/media/ProximaNovaCond-BoldIt.5e12bb162bbc1c769786.woff) format('woff');
     font-weight: 700;
     font-style: italic;
   }
   
   @font-face {
     font-family: 'Proxima Nova Cond';
     src: url(/static/media/ProximaNovaCond-ExtraBold.fa4f2638b338270679fb.woff2) format('woff2'),
          url(/static/media/ProximaNovaCond-ExtraBold.60f7f58ebd23611f3ab0.woff) format('woff');
     font-weight: 800;
     font-style: normal;
   }
   
   
   @font-face {
     font-family: 'Proxima Nova Cond';
     src: url(/static/media/ProximaNovaCond-Light.68721ceb4f6a57852efc.woff2) format('woff2'),
          url(/static/media/ProximaNovaCond-Light.8cbb1e8b25edd167ad83.woff) format('woff');
     font-weight: 300;
     font-style: normal;
   }
   
   @font-face {
     font-family: 'Proxima Nova Cond';
     src: url(/static/media/ProximaNovaCond-Regular.68721ceb4f6a57852efc.woff2) format('woff2'),
          url(/static/media/ProximaNovaCond-Regular.8cbb1e8b25edd167ad83.woff) format('woff');
     font-weight: normal;
     font-style: normal;
   }
@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block; /* Enable animation */

  background-color: var(--base-color);

  width: 100%;
  border-radius: 0.25rem;
  display: inline-flex;
  line-height: 1;

  position: relative;
  -webkit-user-select: none;
          user-select: none;
  overflow: hidden;
}

.react-loading-skeleton::after {
  content: ' ';
  display: var(--pseudo-element-display);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(
      90deg,
      var(--base-color) 0%,
      var(--highlight-color) 50%,
      var(--base-color) 100%
    );
  background-image: var(
    --custom-highlight-background,
    linear-gradient(
      90deg,
      var(--base-color) 0%,
      var(--highlight-color) 50%,
      var(--base-color) 100%
    )
  );
  transform: translateX(-100%);

  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion) {
  .react-loading-skeleton {
    --pseudo-element-display: none; /* Disable animation */
  }
}

/* =============================================
   THEME SYSTEM — Night / Day / Dusk
   =============================================
   Usage: <html data-theme="night|day|dusk">
   Default: night (matches existing design)
   ============================================= */

/* ===== NIGHT THEME (default — current design) ===== */
:root,
[data-theme="night"] {
  /* --- Backgrounds --- */
  --bg-body: #29292c;
  --bg-primary: #29292c;
  --bg-secondary: #3D3D42;
  --bg-tertiary: #2C2C2E;
  --bg-quaternary: #3A3A3C;
  --bg-odds-btn: #3d3d44;
  --bg-elevated: #1C1C1E;
  --bg-card: #2C2C2E;
  --bg-card-bottom: #252528;
  --bg-overlay: rgba(0, 0, 0, 0.85);

  /* --- Text --- */
  --text-primary: #FFFFFF;
  --text-secondary: #E5E5EA;
  --text-tertiary: #8E8E93;
  --text-quaternary: #636366;
  --text-on-accent: #FFFFFF;

  /* --- White with opacity --- */
  --white-3: rgba(255, 255, 255, 0.03);
  --white-5: rgba(255, 255, 255, 0.05);
  --white-8: rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-90: rgba(255, 255, 255, 0.9);
  --white-95: rgba(255, 255, 255, 0.95);

  /* --- Black with opacity --- */
  --black-20: rgba(0, 0, 0, 0.2);
  --black-25: rgba(0, 0, 0, 0.25);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-80: rgba(0, 0, 0, 0.8);
  --black-85: rgba(0, 0, 0, 0.85);

  /* --- Separators & Borders --- */
  --separator: #38383A;
  --separator-light: #48484A;
  --border-color: #3A3A3C;
  --border-dark: #363636;

  /* --- Accent Colors --- */
  --accent-blue: #0A84FF;
  --accent-blue-hover: #409CFF;
  --accent-blue-muted: rgba(10, 132, 255, 0.15);

  --accent-green: #22A849;
  --accent-green-hover: #28BA52;
  --accent-green-muted: rgba(34, 168, 73, 0.15);

  --accent-red: #FF453A;
  --accent-red-hover: #FF6961;
  --accent-red-muted: rgba(255, 69, 58, 0.15);

  --accent-warning: #E5A500;
  --accent-warning-hover: #F5B800;

  --accent-orange: #FF9F0A;
  --accent-yellow: #FFD60A;
  --accent-gold: #D4A843;
  --accent-gold-border: rgba(247, 181, 0, 0.43);

  /* --- Status Colors --- */
  --color-live: #FF453A;
  --color-live-muted: rgba(255, 69, 58, 0.15);
  --live-red: #FF453A; /* legacy alias */
  --color-goal: #30D158;
  --color-ended: #8E8E93;
  --color-soon: #FFD60A;
  --color-ot: #FF9F0A;
  --color-spread-label: rgba(255, 255, 255, 0.05);

  /* --- Interactive / Odds --- */
  --odds-up: #30D158;
  --odds-down: #FF453A;
  --odds-hover: rgba(255, 255, 255, 0.08);
  --odds-active: rgba(10, 132, 255, 0.2);
  --odds-in-slip: rgba(10, 132, 255, 0.15);
  --keyboard-key: #696971;
  --red-card-bg: rgba(255, 69, 58, 0.12);

  /* --- Gradients --- */
  --gradient-header: linear-gradient(180deg, #1C1C1E 0%, #000000 100%);
  --gradient-card: linear-gradient(135deg, #1C1C1E 0%, #2C2C2E 100%);
  --gradient-fixture: linear-gradient(90deg, #333338 0%, #3d3d44 100%);
  --gradient-odds-header: linear-gradient(to bottom, #1c1c1e, #2a2a2c);
  --gradient-top-league: linear-gradient(180deg, #3D3D42 0%, #2f2f35 100%);

  /* --- Shimmer (skeleton loading) --- */
  --shimmer-base: #303035;
  --shimmer-highlight: #3b3b41;

  /* --- Misc --- */
  --hover-bg: rgba(75, 75, 82, 1);
  --active-bg: rgba(90, 90, 100, 1);
  --tag-blue-bg: #1e3a8a;
  --tag-blue-border: rgb(62, 62, 215);
  --clock-bg: #4e4e4e;
  --elapsed-bg: #323232;
  --score-color: color(srgb 0.57 0.7196 1);
  --link-blue: #73a4ff;
  --link-blue-hover: #a5c4fc;
  --btn-auth-bg: #222c45;
  --btn-auth-bg-hover: #25304b;
  --gradient-balance-card: linear-gradient(135deg, #1a2a3a 0%, #0d1a26 100%);
  --balance-card-border: #2a3a4a;
}

/* ===== DAY THEME (light mode) ===== */
[data-theme="day"] {
  /* --- Backgrounds --- */
  --bg-body: #F2F2F7;
  --bg-primary: #F2F2F7;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #E5E5EA;
  --bg-quaternary: #D1D1D6;
  --bg-odds-btn: #E8E8ED;
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-bottom: #F5F5FA;
  --bg-overlay: rgba(0, 0, 0, 0.4);

  /* --- Text --- */
  --text-primary: #1C1C1E;
  --text-secondary: #3C3C43;
  --text-tertiary: #8E8E93;
  --text-quaternary: #AEAEB2;
  --text-on-accent: #FFFFFF;

  /* --- White with opacity (becomes dark-on-light) --- */
  --white-3: rgba(0, 0, 0, 0.02);
  --white-5: rgba(0, 0, 0, 0.03);
  --white-8: rgba(0, 0, 0, 0.05);
  --white-10: rgba(0, 0, 0, 0.06);
  --white-12: rgba(0, 0, 0, 0.08);
  --white-15: rgba(0, 0, 0, 0.1);
  --white-20: rgba(0, 0, 0, 0.12);
  --white-30: rgba(0, 0, 0, 0.15);
  --white-45: rgba(0, 0, 0, 0.25);
  --white-50: rgba(0, 0, 0, 0.3);
  --white-60: rgba(0, 0, 0, 0.4);
  --white-70: rgba(0, 0, 0, 0.5);
  --white-80: rgba(0, 0, 0, 0.6);
  --white-90: rgba(0, 0, 0, 0.7);
  --white-95: rgba(0, 0, 0, 0.8);

  /* --- Black with opacity (lighter in day theme) --- */
  --black-20: rgba(0, 0, 0, 0.08);
  --black-25: rgba(0, 0, 0, 0.1);
  --black-30: rgba(0, 0, 0, 0.12);
  --black-40: rgba(0, 0, 0, 0.15);
  --black-50: rgba(0, 0, 0, 0.2);
  --black-60: rgba(0, 0, 0, 0.25);
  --black-70: rgba(0, 0, 0, 0.3);
  --black-80: rgba(0, 0, 0, 0.4);
  --black-85: rgba(0, 0, 0, 0.5);

  /* --- Separators & Borders --- */
  --separator: #D1D1D6;
  --separator-light: #E5E5EA;
  --border-color: #C6C6C8;
  --border-dark: #D1D1D6;

  /* --- Accent Colors --- */
  --accent-blue: #007AFF;
  --accent-blue-hover: #0071E3;
  --accent-blue-muted: rgba(0, 122, 255, 0.12);

  --accent-green: #1DA03E;
  --accent-green-hover: #1A9338;
  --accent-green-muted: rgba(29, 160, 62, 0.12);

  --accent-red: #FF3B30;
  --accent-red-hover: #E8332A;
  --accent-red-muted: rgba(255, 59, 48, 0.12);

  --accent-warning: #CC9200;
  --accent-warning-hover: #B88400;

  --accent-orange: #FF9500;
  --accent-yellow: #FFCC00;
  --accent-gold: #B8942E;

  /* --- Status Colors --- */
  --color-live: #FF3B30;
  --color-live-muted: rgba(255, 59, 48, 0.1);
  --color-goal: #28A745;
  --color-ended: #8E8E93;
  --color-soon: #CC9200;
  --color-ot: #FF9500;
  --color-spread-label: rgba(0, 0, 0, 0.04);

  /* --- Interactive / Odds --- */
  --odds-up: #28A745;
  --odds-down: #FF3B30;
  --odds-hover: rgba(0, 0, 0, 0.05);
  --odds-active: rgba(0, 122, 255, 0.15);
  --odds-in-slip: rgba(0, 122, 255, 0.1);
  --keyboard-key: #D1D1D6;
  --red-card-bg: rgba(255, 59, 48, 0.08);

  /* --- Gradients --- */
  --gradient-header: linear-gradient(180deg, #FFFFFF 0%, #F2F2F7 100%);
  --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #F8F8FD 100%);
  --gradient-fixture: linear-gradient(90deg, #FFFFFF 0%, #F8F8FD 100%);
  --gradient-odds-header: linear-gradient(to bottom, #E8E8ED, #F2F2F7);
  --gradient-top-league: linear-gradient(180deg, #FFFFFF 0%, #F5F5FA 100%);

  /* --- Shimmer (skeleton loading) --- */
  --shimmer-base: #E0E0E5;
  --shimmer-highlight: #EBEBF0;

  /* --- Misc --- */
  --hover-bg: rgba(0, 0, 0, 0.06);
  --active-bg: rgba(0, 0, 0, 0.1);
  --tag-blue-bg: #D6E4FF;
  --tag-blue-border: #A0BFFF;
  --clock-bg: #D1D1D6;
  --elapsed-bg: #E5E5EA;
  --score-color: #0055CC;
  --link-blue: #0066CC;
  --link-blue-hover: #004499;
  --btn-auth-bg: #E8F0FE;
  --btn-auth-bg-hover: #D3E3FD;
  --gradient-balance-card: linear-gradient(135deg, #D6E4FF 0%, #E8F0FE 100%);
  --balance-card-border: #B0C8F0;
}

/* ===== DUSK THEME (warm dark) ===== */
[data-theme="dusk"] {
  /* --- Backgrounds --- */
  --bg-body: #1A1A2E;
  --bg-primary: #1A1A2E;
  --bg-secondary: #2D2D44;
  --bg-tertiary: #222238;
  --bg-quaternary: #33334D;
  --bg-odds-btn: #2D2D48;
  --bg-elevated: #16162A;
  --bg-card: #222238;
  --bg-card-bottom: #1E1E32;
  --bg-overlay: rgba(0, 0, 0, 0.85);

  /* --- Text --- */
  --text-primary: #EEEEF0;
  --text-secondary: #C8C8D0;
  --text-tertiary: #8888A0;
  --text-quaternary: #5C5C78;
  --text-on-accent: #FFFFFF;

  /* --- White with opacity --- */
  --white-3: rgba(220, 220, 255, 0.03);
  --white-5: rgba(220, 220, 255, 0.05);
  --white-8: rgba(220, 220, 255, 0.08);
  --white-10: rgba(220, 220, 255, 0.1);
  --white-12: rgba(220, 220, 255, 0.12);
  --white-15: rgba(220, 220, 255, 0.15);
  --white-20: rgba(220, 220, 255, 0.2);
  --white-30: rgba(220, 220, 255, 0.3);
  --white-45: rgba(220, 220, 255, 0.45);
  --white-50: rgba(220, 220, 255, 0.5);
  --white-60: rgba(220, 220, 255, 0.6);
  --white-70: rgba(220, 220, 255, 0.7);
  --white-80: rgba(220, 220, 255, 0.8);
  --white-90: rgba(220, 220, 255, 0.9);
  --white-95: rgba(220, 220, 255, 0.95);

  /* --- Black with opacity --- */
  --black-20: rgba(0, 0, 20, 0.2);
  --black-25: rgba(0, 0, 20, 0.25);
  --black-30: rgba(0, 0, 20, 0.3);
  --black-40: rgba(0, 0, 20, 0.4);
  --black-50: rgba(0, 0, 20, 0.5);
  --black-60: rgba(0, 0, 20, 0.6);
  --black-70: rgba(0, 0, 20, 0.7);
  --black-80: rgba(0, 0, 20, 0.8);
  --black-85: rgba(0, 0, 20, 0.85);

  /* --- Separators & Borders --- */
  --separator: #2E2E48;
  --separator-light: #3A3A56;
  --border-color: #33334D;
  --border-dark: #2A2A42;

  /* --- Accent Colors --- */
  --accent-blue: #5B8DEF;
  --accent-blue-hover: #7BA4F5;
  --accent-blue-muted: rgba(91, 141, 239, 0.15);

  --accent-green: #2EBD5E;
  --accent-green-hover: #36D06A;
  --accent-green-muted: rgba(46, 189, 94, 0.15);

  --accent-red: #F25C54;
  --accent-red-hover: #F57872;
  --accent-red-muted: rgba(242, 92, 84, 0.15);

  --accent-warning: #E5A500;
  --accent-warning-hover: #F5B800;

  --accent-orange: #F5A623;
  --accent-yellow: #FFD84D;
  --accent-gold: #D4AA50;

  /* --- Status Colors --- */
  --color-live: #F25C54;
  --color-live-muted: rgba(242, 92, 84, 0.15);
  --color-goal: #2EBD5E;
  --color-ended: #8888A0;
  --color-soon: #FFD84D;
  --color-ot: #F5A623;
  --color-spread-label: rgba(220, 220, 255, 0.05);

  /* --- Interactive / Odds --- */
  --odds-up: #2EBD5E;
  --odds-down: #F25C54;
  --odds-hover: rgba(220, 220, 255, 0.08);
  --odds-active: rgba(91, 141, 239, 0.2);
  --odds-in-slip: rgba(91, 141, 239, 0.15);
  --keyboard-key: #3A3A56;
  --red-card-bg: rgba(242, 92, 84, 0.12);

  /* --- Gradients --- */
  --gradient-header: linear-gradient(180deg, #16162A 0%, #0A0A1A 100%);
  --gradient-card: linear-gradient(135deg, #16162A 0%, #222238 100%);
  --gradient-fixture: linear-gradient(90deg, #2A2A40 0%, #2D2D48 100%);
  --gradient-odds-header: linear-gradient(to bottom, #16162A, #1E1E32);
  --gradient-top-league: linear-gradient(180deg, #2D2D44 0%, #252538 100%);

  /* --- Shimmer (skeleton loading) --- */
  --shimmer-base: #252540;
  --shimmer-highlight: #30304A;

  /* --- Misc --- */
  --hover-bg: rgba(100, 100, 140, 0.3);
  --active-bg: rgba(100, 100, 140, 0.4);
  --tag-blue-bg: #1e2a5a;
  --tag-blue-border: rgb(70, 70, 200);
  --clock-bg: #3A3A56;
  --elapsed-bg: #2A2A42;
  --score-color: #7BA4F5;
  --link-blue: #7BA4F5;
  --link-blue-hover: #A0BFFF;
  --btn-auth-bg: #1E2A4A;
  --btn-auth-bg-hover: #253358;
  --gradient-balance-card: linear-gradient(135deg, #1a2240 0%, #0d1428 100%);
  --balance-card-border: #2a3450;
}

/* ===== SCOPED OVERRIDES: Sport headers need light text on dark gradients ===== */
/* Sport gradients are solid dark colors — text/icons inside must stay light
   regardless of the active theme. md-sticky-header background stays per-theme. */
[data-theme="day"] .md-sticky-header,
[data-theme="day"] .fc-header,
[data-theme="dusk"] .md-sticky-header,
[data-theme="dusk"] .fc-header {
  --text-primary: #FFFFFF;
  --text-secondary: #E5E5EA;
  --text-tertiary: #8E8E93;
  --text-quaternary: #636366;
  --separator: #38383A;
  --white-3: rgba(255, 255, 255, 0.03);
  --white-5: rgba(255, 255, 255, 0.05);
  --white-8: rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-90: rgba(255, 255, 255, 0.9);
  --white-95: rgba(255, 255, 255, 0.95);
  --black-30: rgba(0, 0, 0, 0.3);
  --score-color: color(srgb 0.57 0.7196 1);
  --link-blue: #73a4ff;
  --accent-blue: #0A84FF;
  --accent-red: #FF453A;
  --accent-red-hover: #FF6961;
  --color-ended: #8E8E93;
  --color-live: #FF453A;
  --color-live-muted: rgba(255, 69, 58, 0.15);
}

html {
  background-color: var(--bg-body);
}

body, #root {
  margin: 0;
  padding: 0;
  background-color: var(--bg-body);
}

body {
  position: relative;
  top: 0;
  left: 0;
}

/* Prevent Safari overscroll bounce from showing different background color */
@media (max-width: 1023px) {
  html, body {
    overscroll-behavior: none;
  }
}


.App.with-padding {
  background-color: var(--bg-body);
  padding-top: 37px;
}

.with-padding {
  padding-top: 37px;
}

 🔇 Отключаем отображение всех скроллбаров на сайте 
* {
  scrollbar-width: none;           
  -ms-overflow-style: none;        
}

*::-webkit-scrollbar {
  display: none;                   
}

.app-frame {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.app-frame-inner {
  margin: 0 auto;
  width: 100%;
}

.app-frame-inner-nav {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  height: 100%;
}

.header-content-global {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: space-between;
  max-width: 1415px;
  margin: 0 auto;
  }

body.bet-slip-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* оставляем фон заблокированным, но не мешаем вложенным скроллам */
}

/* Плавный padding для betslip */
.lp-page,
.horses-page,
.horses-race-page {
  transition: padding-bottom 0.3s ease;
}

/* Mobile: padding когда есть ставки но betslip свёрнут */
@media (max-width: 1023px) {
  body.bet-slip-has-bets:not(.bet-slip-open) .lp-page,
  body.bet-slip-has-bets:not(.bet-slip-open) .horses-page,
  body.bet-slip-has-bets:not(.bet-slip-open) .horses-race-page {
    padding-bottom: 120px;
  }
}

/* PWA standalone: увеличенный padding */
@media (display-mode: standalone) and (max-width: 1023px) {
  body.bet-slip-has-bets:not(.bet-slip-open) .lp-page,
  body.bet-slip-has-bets:not(.bet-slip-open) .horses-page,
  body.bet-slip-has-bets:not(.bet-slip-open) .horses-race-page {
    padding-bottom: 150px;
  }
}

.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }

  .App:not(.admin-path):not(.casino-path) {
    display: flex;
    height: calc(100vh - 45px);
    overflow: hidden;
    gap: 10px;
    padding-top: 38px;
    max-width: 1450px;
    margin: 0 auto;
  }

  .App.casino-path {
    display: flex;
    height: calc(100vh - 45px);
    overflow: hidden;
    padding-top: 38px;
    margin: 0 auto;
  }

  html, body {
    height: 100%;
    overflow: hidden;
  }
  
  .app-frame {
    max-width: 100%;
    overflow-y: auto;
    margin: 0;
    flex-grow: 1;
  }

  .desktop-left-sidebar {
    width: 270px;
    overflow-y: auto;
    z-index: 900;
    flex-shrink: 0;
    border-right: 1px solid var(--border-dark);
  }

  .desktop-right-sidebar {
    flex-shrink: 0;
    width: 350px;
    overflow-y: auto;
    z-index: 900;
    border: 1px solid var(--border-dark);
    border-radius: 5px;
  }

  .bottom-nav, .bet-slip-footer-bar,.bet-slip-wrapper {
    display: none;
  }
  .desktop-left-sidebar,
  .app-frame,
  .desktop-right-sidebar {
    margin-top: 10px;
    top: 0;
  }
}

.site-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2400;
}

/* Скрываем скроллбар глобально, но не ломаем прокрутку */
* {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE и Edge */
}

*::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;          /* Chrome/Safari/Opera */
}
/**
 * Sport Colors - Centralized gradient definitions
 * Used by: MatchDetails LiveBar, MatchDetails Tabs, FixtureCard Header
 *
 * Style: solid opaque gradients (dark → slightly lighter), solid tabs (slightly darker).
 *
 * To add a new sport:
 * 1. Add CSS variables for --sport-{id}-gradient, --sport-{id}-border, --sport-{id}-tab
 * 2. Add selectors for .md-live-bar, .md-period-tabs, .fc-header
 */

:root {
  /* ========== SPORT GRADIENTS (solid) ========== */

  /* Soccer (1) - Green */
  --sport-1-gradient: linear-gradient(90deg, rgb(39 99 61) 0%, rgb(46 117 72) 100%);
  --sport-1-border: rgba(51, 129, 79, 0.4);
  --sport-1-tab: #205132;

  /* Hockey (2) - Steel Blue */
  --sport-2-gradient: linear-gradient(90deg, rgb(49 69 89) 0%, rgb(58 82 105) 100%);
  --sport-2-border: rgba(64, 90, 116, 0.4);
  --sport-2-tab: #283848;

  /* Basketball (3) - Orange */
  --sport-3-gradient: linear-gradient(90deg, rgb(105 62 38) 0%, rgb(122 73 46) 100%);
  --sport-3-border: rgba(146, 88, 55, 0.4);
  --sport-3-tab: #56321e;

  /* Tennis (4) - Amber/Tan */
  --sport-4-gradient: linear-gradient(90deg, rgb(92 74 46) 0%, rgb(109 88 54) 100%);
  --sport-4-border: rgba(120, 96, 60, 0.4);
  --sport-4-tab: #4b3c25;

  /* Baseball (5) - Red */
  --sport-5-gradient: linear-gradient(90deg, rgb(94 43 47) 0%, rgb(112 51 55) 100%);
  --sport-5-border: rgba(122, 56, 61, 0.4);
  --sport-5-tab: #4d2326;

  /* American Football (6) - Blue */
  --sport-6-gradient: linear-gradient(90deg, rgb(39 64 99) 0%, rgb(46 75 117) 100%);
  --sport-6-border: rgba(51, 83, 129, 0.4);
  --sport-6-tab: #1f3451;

  /* Am. Football alt (7) - Brown */
  --sport-7-gradient: linear-gradient(90deg, rgb(91 67 47) 0%, rgb(108 80 55) 100%);
  --sport-7-border: rgba(118, 87, 61, 0.4);
  --sport-7-tab: #4a3726;

  /* Handball (8) - Navy */
  --sport-8-gradient: linear-gradient(90deg, rgb(48 62 89) 0%, rgb(57 74 106) 100%);
  --sport-8-border: rgba(62, 81, 116, 0.4);
  --sport-8-tab: #273349;

  /* Volleyball (9) - Indigo */
  --sport-9-gradient: linear-gradient(90deg, rgb(44 51 94) 0%, rgb(52 61 111) 100%);
  --sport-9-border: rgba(57, 66, 122, 0.4);
  --sport-9-tab: #242a4d;

  /* Bandy (10) - Blue */
  --sport-10-gradient: linear-gradient(90deg, rgb(34 58 103) 0%, rgb(41 69 122) 100%);
  --sport-10-border: rgba(44, 75, 134, 0.4);
  --sport-10-tab: #1c2f54;

  /* Table Tennis (11, 3088) - Muted Blue */
  --sport-11-gradient: linear-gradient(90deg, rgb(50 69 87) 0%, rgb(60 82 104) 100%);
  --sport-11-border: rgba(65, 90, 113, 0.4);
  --sport-11-tab: #293847;
  --sport-3088-gradient: linear-gradient(90deg, rgb(50 69 87) 0%, rgb(60 82 104) 100%);
  --sport-3088-border: rgba(65, 90, 113, 0.4);
  --sport-3088-tab: #293847;

  /* Rugby (16) - Green (like soccer) */
  --sport-16-gradient: linear-gradient(90deg, rgb(39 99 61) 0%, rgb(46 117 72) 100%);
  --sport-16-border: rgba(51, 129, 79, 0.4);
  --sport-16-tab: #205132;

  /* Snooker/Billiard (1429) - Emerald */
  --sport-1429-gradient: linear-gradient(90deg, rgb(42 96 61) 0%, rgb(49 114 72) 100%);
  --sport-1429-border: rgba(55, 125, 79, 0.4);
  --sport-1429-tab: #224e32;

  /* Futsal (1434) - Green (like soccer) */
  --sport-1434-gradient: linear-gradient(90deg, rgb(39 99 61) 0%, rgb(46 117 72) 100%);
  --sport-1434-border: rgba(51, 129, 79, 0.4);
  --sport-1434-tab: #205132;

  /* Water Polo (1219) - Cyan */
  --sport-1219-gradient: linear-gradient(90deg, rgb(40 81 98) 0%, rgb(47 96 116) 100%);
  --sport-1219-border: rgba(52, 105, 127, 0.4);
  --sport-1219-tab: #204250;

  /* Badminton (11630) - Lime Green */
  --sport-11630-gradient: linear-gradient(90deg, rgb(52 86 52) 0%, rgb(61 102 61) 100%);
  --sport-11630-border: rgba(68, 112, 68, 0.4);
  --sport-11630-tab: #2a462a;

  /* Beach Soccer (11625) - Warm Teal (beach/ocean) */
  --sport-11625-gradient: linear-gradient(90deg, rgb(38 95 90) 0%, rgb(45 112 106) 100%);
  --sport-11625-border: rgba(50, 123, 117, 0.4);
  --sport-11625-tab: #1e4e4a;

  /* Beach Volleyball (11624) - Sand/Yellow */
  --sport-11624-gradient: linear-gradient(90deg, rgb(96 85 42) 0%, rgb(113 101 50) 100%);
  --sport-11624-border: rgba(125, 111, 55, 0.4);
  --sport-11624-tab: #4e4522;

  /* Floorball (11627) - Terracotta */
  --sport-11627-gradient: linear-gradient(90deg, rgb(94 65 44) 0%, rgb(111 77 52) 100%);
  --sport-11627-border: rgba(122, 85, 57, 0.4);
  --sport-11627-tab: #4c3524;

  /* Darts (11632) - Red */
  --sport-11632-gradient: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%);
  --sport-11632-border: rgba(121, 59, 59, 0.4);
  --sport-11632-tab: #4c2525;

  /* Cricket (11634) - Green */
  --sport-11634-gradient: linear-gradient(90deg, rgb(45 93 56) 0%, rgb(53 110 66) 100%);
  --sport-11634-border: rgba(59, 121, 73, 0.4);
  --sport-11634-tab: #244c2e;

  /* Padel (17591) - Same as Tennis */
  --sport-17591-gradient: linear-gradient(90deg, rgb(92 74 46) 0%, rgb(109 88 54) 100%);
  --sport-17591-border: rgba(120, 96, 60, 0.4);
  --sport-17591-tab: #4b3c25;

  /* Squash (17355) - Teal */
  --sport-17355-gradient: linear-gradient(90deg, rgb(45 76 93) 0%, rgb(53 90 110) 100%);
  --sport-17355-border: rgba(59, 99, 121, 0.4);
  --sport-17355-tab: #253e4c;

  /* Cycling (1891) - Olive */
  --sport-1891-gradient: linear-gradient(90deg, rgb(82 82 56) 0%, rgb(97 97 66) 100%);
  --sport-1891-border: rgba(107, 107, 73, 0.4);
  --sport-1891-tab: #43432e;

  /* E-sports (29086) - Electric Blue */
  --sport-29086-gradient: linear-gradient(90deg, rgb(39 61 99) 0%, rgb(46 73 117) 100%);
  --sport-29086-border: rgba(51, 79, 129, 0.4);
  --sport-29086-tab: #203250;

  /* MMA (37145) - Red */
  --sport-37145-gradient: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%);
  --sport-37145-border: rgba(121, 59, 59, 0.4);
  --sport-37145-tab: #4c2525;

  /* Boxing (1436) - Crimson */
  --sport-1436-gradient: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%);
  --sport-1436-border: rgba(121, 59, 59, 0.4);
  --sport-1436-tab: #4c2424;

  /* Basketball 3x3 (47041) - Orange (like basketball) */
  --sport-47041-gradient: linear-gradient(90deg, rgb(105 62 38) 0%, rgb(122 73 46) 100%);
  --sport-47041-border: rgba(146, 88, 55, 0.4);
  --sport-47041-tab: #56321e;

  /* Biathlon (1442) - Slate Blue */
  --sport-1442-gradient: linear-gradient(90deg, rgb(49 65 89) 0%, rgb(58 77 106) 100%);
  --sport-1442-border: rgba(64, 85, 116, 0.4);
  --sport-1442-tab: #283549;

  /* Cross Country (1441) - Gray */
  --sport-1441-gradient: linear-gradient(90deg, rgb(69 69 69) 0%, rgb(82 82 82) 100%);
  --sport-1441-border: rgba(90, 90, 90, 0.4);
  --sport-1441-tab: #383838;

  /* Alpine Skiing (1440) - Ice Blue */
  --sport-1440-gradient: linear-gradient(90deg, rgb(42 78 96) 0%, rgb(50 92 113) 100%);
  --sport-1440-border: rgba(55, 101, 125, 0.4);
  --sport-1440-tab: #223f4e;

  /* Curling (1433) - Ice Teal */
  --sport-1433-gradient: linear-gradient(90deg, rgb(45 86 93) 0%, rgb(53 102 110) 100%);
  --sport-1433-border: rgba(59, 112, 121, 0.4);
  --sport-1433-tab: #25464c;

  /* Australian Football (11638) - Gold/Olive */
  --sport-11638-gradient: linear-gradient(90deg, rgb(93 86 45) 0%, rgb(110 101 53) 100%);
  --sport-11638-border: rgba(121, 112, 59, 0.4);
  --sport-11638-tab: #4c4624;

  /* Field Hockey (1439) - Green */
  --sport-1439-gradient: linear-gradient(90deg, rgb(45 93 56) 0%, rgb(53 110 66) 100%);
  --sport-1439-border: rgba(59, 121, 73, 0.4);
  --sport-1439-tab: #244c2e;

  /* ========== BB (BetsAPI) Sport IDs ========== */
  /* BB Tennis (13) - same as FB Tennis (4) */
  --sport-13-gradient: linear-gradient(90deg, rgb(92 74 46) 0%, rgb(109 88 54) 100%);
  --sport-13-border: rgba(120, 96, 60, 0.4);
  --sport-13-tab: #4b3c25;

  /* BB Hockey (17) - same as FB Hockey (2) */
  --sport-17-gradient: linear-gradient(90deg, rgb(49 69 89) 0%, rgb(58 82 105) 100%);
  --sport-17-border: rgba(64, 90, 116, 0.4);
  --sport-17-tab: #283848;

  /* BB Basketball (18) - same as FB Basketball (3) */
  --sport-18-gradient: linear-gradient(90deg, rgb(105 62 38) 0%, rgb(122 73 46) 100%);
  --sport-18-border: rgba(146, 88, 55, 0.4);
  --sport-18-tab: #56321e;

  /* BB Boxing (37) - same as FB Boxing (1436) */
  --sport-37-gradient: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%);
  --sport-37-border: rgba(121, 59, 59, 0.4);
  --sport-37-tab: #4c2424;

  /* BB Volleyball (91) - same as FB Volleyball (9) */
  --sport-91-gradient: linear-gradient(90deg, rgb(44 51 94) 0%, rgb(52 61 111) 100%);
  --sport-91-border: rgba(57, 66, 122, 0.4);
  --sport-91-tab: #242a4d;

  /* BB Table Tennis (92) - same as FB Table Tennis (3088) */
  --sport-92-gradient: linear-gradient(90deg, rgb(50 69 87) 0%, rgb(60 82 104) 100%);
  --sport-92-border: rgba(65, 90, 113, 0.4);
  --sport-92-tab: #293847;

  /* BB Badminton (94) - same as FB Badminton (11630) */
  --sport-94-gradient: linear-gradient(90deg, rgb(52 86 52) 0%, rgb(61 102 61) 100%);
  --sport-94-border: rgba(68, 112, 68, 0.4);
  --sport-94-tab: #2a462a;

  /* BB Beach Volleyball (95) - same as FB Beach Volleyball (11624) */
  --sport-95-gradient: linear-gradient(90deg, rgb(96 85 42) 0%, rgb(113 101 50) 100%);
  --sport-95-border: rgba(125, 111, 55, 0.4);
  --sport-95-tab: #4e4522;

  /* BB E-sports (151) - same as FB E-sports (29086) */
  --sport-151-gradient: linear-gradient(90deg, rgb(39 61 99) 0%, rgb(46 73 117) 100%);
  --sport-151-border: rgba(51, 79, 129, 0.4);
  --sport-151-tab: #203250;

  /* BB MMA (162) - same as FB MMA (37145) */
  --sport-162-gradient: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%);
  --sport-162-border: rgba(121, 59, 59, 0.4);
  --sport-162-tab: #4c2525;
}

/* ========== MATCH DETAILS - LIVE BAR ========== */
.md-live-bar[data-sport="1"] { background: linear-gradient(90deg, rgb(39 99 61) 0%, rgb(46 117 72) 100%); background: var(--sport-1-gradient); }
.md-live-bar[data-sport="2"] { background: linear-gradient(90deg, rgb(49 69 89) 0%, rgb(58 82 105) 100%); background: var(--sport-2-gradient); }
.md-live-bar[data-sport="3"] { background: linear-gradient(90deg, rgb(105 62 38) 0%, rgb(122 73 46) 100%); background: var(--sport-3-gradient); }
.md-live-bar[data-sport="4"] { background: linear-gradient(90deg, rgb(92 74 46) 0%, rgb(109 88 54) 100%); background: var(--sport-4-gradient); }
.md-live-bar[data-sport="5"] { background: linear-gradient(90deg, rgb(94 43 47) 0%, rgb(112 51 55) 100%); background: var(--sport-5-gradient); }
.md-live-bar[data-sport="6"] { background: linear-gradient(90deg, rgb(39 64 99) 0%, rgb(46 75 117) 100%); background: var(--sport-6-gradient); }
.md-live-bar[data-sport="7"] { background: linear-gradient(90deg, rgb(91 67 47) 0%, rgb(108 80 55) 100%); background: var(--sport-7-gradient); }
.md-live-bar[data-sport="8"] { background: linear-gradient(90deg, rgb(48 62 89) 0%, rgb(57 74 106) 100%); background: var(--sport-8-gradient); }
.md-live-bar[data-sport="9"] { background: linear-gradient(90deg, rgb(44 51 94) 0%, rgb(52 61 111) 100%); background: var(--sport-9-gradient); }
.md-live-bar[data-sport="10"] { background: linear-gradient(90deg, rgb(34 58 103) 0%, rgb(41 69 122) 100%); background: var(--sport-10-gradient); }
.md-live-bar[data-sport="16"] { background: linear-gradient(90deg, rgb(39 99 61) 0%, rgb(46 117 72) 100%); background: var(--sport-16-gradient); }
.md-live-bar[data-sport="1219"] { background: linear-gradient(90deg, rgb(40 81 98) 0%, rgb(47 96 116) 100%); background: var(--sport-1219-gradient); }
.md-live-bar[data-sport="1429"] { background: linear-gradient(90deg, rgb(42 96 61) 0%, rgb(49 114 72) 100%); background: var(--sport-1429-gradient); }
.md-live-bar[data-sport="1433"] { background: linear-gradient(90deg, rgb(45 86 93) 0%, rgb(53 102 110) 100%); background: var(--sport-1433-gradient); }
.md-live-bar[data-sport="1434"] { background: linear-gradient(90deg, rgb(39 99 61) 0%, rgb(46 117 72) 100%); background: var(--sport-1434-gradient); }
.md-live-bar[data-sport="1891"] { background: linear-gradient(90deg, rgb(82 82 56) 0%, rgb(97 97 66) 100%); background: var(--sport-1891-gradient); }
.md-live-bar[data-sport="3088"] { background: linear-gradient(90deg, rgb(50 69 87) 0%, rgb(60 82 104) 100%); background: var(--sport-3088-gradient); }
.md-live-bar[data-sport="11624"] { background: linear-gradient(90deg, rgb(96 85 42) 0%, rgb(113 101 50) 100%); background: var(--sport-11624-gradient); }
.md-live-bar[data-sport="11625"] { background: linear-gradient(90deg, rgb(38 95 90) 0%, rgb(45 112 106) 100%); background: var(--sport-11625-gradient); }
.md-live-bar[data-sport="11627"] { background: linear-gradient(90deg, rgb(94 65 44) 0%, rgb(111 77 52) 100%); background: var(--sport-11627-gradient); }
.md-live-bar[data-sport="11630"] { background: linear-gradient(90deg, rgb(52 86 52) 0%, rgb(61 102 61) 100%); background: var(--sport-11630-gradient); }
.md-live-bar[data-sport="11632"] { background: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%); background: var(--sport-11632-gradient); }
.md-live-bar[data-sport="11634"] { background: linear-gradient(90deg, rgb(45 93 56) 0%, rgb(53 110 66) 100%); background: var(--sport-11634-gradient); }
.md-live-bar[data-sport="17355"] { background: linear-gradient(90deg, rgb(45 76 93) 0%, rgb(53 90 110) 100%); background: var(--sport-17355-gradient); }
.md-live-bar[data-sport="17591"] { background: linear-gradient(90deg, rgb(92 74 46) 0%, rgb(109 88 54) 100%); background: var(--sport-17591-gradient); }
.md-live-bar[data-sport="29086"] { background: linear-gradient(90deg, rgb(39 61 99) 0%, rgb(46 73 117) 100%); background: var(--sport-29086-gradient); }
.md-live-bar[data-sport="37145"] { background: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%); background: var(--sport-37145-gradient); }
.md-live-bar[data-sport="1436"] { background: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%); background: var(--sport-1436-gradient); }
.md-live-bar[data-sport="37"] { background: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%); background: var(--sport-37-gradient); }
.md-live-bar[data-sport="47041"] { background: linear-gradient(90deg, rgb(105 62 38) 0%, rgb(122 73 46) 100%); background: var(--sport-47041-gradient); }
.md-live-bar[data-sport="1442"] { background: linear-gradient(90deg, rgb(49 65 89) 0%, rgb(58 77 106) 100%); background: var(--sport-1442-gradient); }
.md-live-bar[data-sport="1441"] { background: linear-gradient(90deg, rgb(69 69 69) 0%, rgb(82 82 82) 100%); background: var(--sport-1441-gradient); }
.md-live-bar[data-sport="1440"] { background: linear-gradient(90deg, rgb(42 78 96) 0%, rgb(50 92 113) 100%); background: var(--sport-1440-gradient); }
.md-live-bar[data-sport="1439"] { background: linear-gradient(90deg, rgb(45 93 56) 0%, rgb(53 110 66) 100%); background: var(--sport-1439-gradient); }
.md-live-bar[data-sport="11638"] { background: linear-gradient(90deg, rgb(93 86 45) 0%, rgb(110 101 53) 100%); background: var(--sport-11638-gradient); }

/* ========== MATCH DETAILS - PERIOD TABS (solid colors for sticky star) ========== */
.md-period-tabs[data-sport="1"] { background: #205132; background: var(--sport-1-tab); }
.md-period-tabs[data-sport="2"] { background: #283848; background: var(--sport-2-tab); }
.md-period-tabs[data-sport="3"] { background: #56321e; background: var(--sport-3-tab); }
.md-period-tabs[data-sport="4"] { background: #4b3c25; background: var(--sport-4-tab); }
.md-period-tabs[data-sport="5"] { background: #4d2326; background: var(--sport-5-tab); }
.md-period-tabs[data-sport="6"] { background: #1f3451; background: var(--sport-6-tab); }
.md-period-tabs[data-sport="7"] { background: #4a3726; background: var(--sport-7-tab); }
.md-period-tabs[data-sport="8"] { background: #273349; background: var(--sport-8-tab); }
.md-period-tabs[data-sport="9"] { background: #242a4d; background: var(--sport-9-tab); }
.md-period-tabs[data-sport="10"] { background: #1c2f54; background: var(--sport-10-tab); }
.md-period-tabs[data-sport="11"] { background: #293847; background: var(--sport-11-tab); }
.md-period-tabs[data-sport="16"] { background: #205132; background: var(--sport-16-tab); }
.md-period-tabs[data-sport="1219"] { background: #204250; background: var(--sport-1219-tab); }
.md-period-tabs[data-sport="1429"] { background: #224e32; background: var(--sport-1429-tab); }
.md-period-tabs[data-sport="1433"] { background: #25464c; background: var(--sport-1433-tab); }
.md-period-tabs[data-sport="1434"] { background: #205132; background: var(--sport-1434-tab); }
.md-period-tabs[data-sport="1891"] { background: #43432e; background: var(--sport-1891-tab); }
.md-period-tabs[data-sport="3088"] { background: #293847; background: var(--sport-3088-tab); }
.md-period-tabs[data-sport="11624"] { background: #4e4522; background: var(--sport-11624-tab); }
.md-period-tabs[data-sport="11625"] { background: #1e4e4a; background: var(--sport-11625-tab); }
.md-period-tabs[data-sport="11627"] { background: #4c3524; background: var(--sport-11627-tab); }
.md-period-tabs[data-sport="11630"] { background: #2a462a; background: var(--sport-11630-tab); }
.md-period-tabs[data-sport="11632"] { background: #4c2525; background: var(--sport-11632-tab); }
.md-period-tabs[data-sport="11634"] { background: #244c2e; background: var(--sport-11634-tab); }
.md-period-tabs[data-sport="17355"] { background: #253e4c; background: var(--sport-17355-tab); }
.md-period-tabs[data-sport="17591"] { background: #4b3c25; background: var(--sport-17591-tab); }
.md-period-tabs[data-sport="29086"] { background: #203250; background: var(--sport-29086-tab); }
.md-period-tabs[data-sport="37145"] { background: #4c2525; background: var(--sport-37145-tab); }
.md-period-tabs[data-sport="1436"] { background: #4c2424; background: var(--sport-1436-tab); }
.md-period-tabs[data-sport="37"] { background: #4c2424; background: var(--sport-37-tab); }
.md-period-tabs[data-sport="47041"] { background: #56321e; background: var(--sport-47041-tab); }
.md-period-tabs[data-sport="1442"] { background: #283549; background: var(--sport-1442-tab); }
.md-period-tabs[data-sport="1441"] { background: #383838; background: var(--sport-1441-tab); }
.md-period-tabs[data-sport="1440"] { background: #223f4e; background: var(--sport-1440-tab); }
.md-period-tabs[data-sport="1439"] { background: #244c2e; background: var(--sport-1439-tab); }
.md-period-tabs[data-sport="11638"] { background: #4c4624; background: var(--sport-11638-tab); }

/* ========== MATCH DETAILS - STICKY STAR (same solid colors) ========== */
.md-period-tabs[data-sport="1"] .md-star { background: #205132; background: var(--sport-1-tab); }
.md-period-tabs[data-sport="2"] .md-star { background: #283848; background: var(--sport-2-tab); }
.md-period-tabs[data-sport="3"] .md-star { background: #56321e; background: var(--sport-3-tab); }
.md-period-tabs[data-sport="4"] .md-star { background: #4b3c25; background: var(--sport-4-tab); }
.md-period-tabs[data-sport="5"] .md-star { background: #4d2326; background: var(--sport-5-tab); }
.md-period-tabs[data-sport="6"] .md-star { background: #1f3451; background: var(--sport-6-tab); }
.md-period-tabs[data-sport="7"] .md-star { background: #4a3726; background: var(--sport-7-tab); }
.md-period-tabs[data-sport="8"] .md-star { background: #273349; background: var(--sport-8-tab); }
.md-period-tabs[data-sport="9"] .md-star { background: #242a4d; background: var(--sport-9-tab); }
.md-period-tabs[data-sport="10"] .md-star { background: #1c2f54; background: var(--sport-10-tab); }
.md-period-tabs[data-sport="11"] .md-star { background: #293847; background: var(--sport-11-tab); }
.md-period-tabs[data-sport="16"] .md-star { background: #205132; background: var(--sport-16-tab); }
.md-period-tabs[data-sport="1219"] .md-star { background: #204250; background: var(--sport-1219-tab); }
.md-period-tabs[data-sport="1429"] .md-star { background: #224e32; background: var(--sport-1429-tab); }
.md-period-tabs[data-sport="1433"] .md-star { background: #25464c; background: var(--sport-1433-tab); }
.md-period-tabs[data-sport="1434"] .md-star { background: #205132; background: var(--sport-1434-tab); }
.md-period-tabs[data-sport="1891"] .md-star { background: #43432e; background: var(--sport-1891-tab); }
.md-period-tabs[data-sport="3088"] .md-star { background: #293847; background: var(--sport-3088-tab); }
.md-period-tabs[data-sport="11624"] .md-star { background: #4e4522; background: var(--sport-11624-tab); }
.md-period-tabs[data-sport="11625"] .md-star { background: #1e4e4a; background: var(--sport-11625-tab); }
.md-period-tabs[data-sport="11627"] .md-star { background: #4c3524; background: var(--sport-11627-tab); }
.md-period-tabs[data-sport="11630"] .md-star { background: #2a462a; background: var(--sport-11630-tab); }
.md-period-tabs[data-sport="11632"] .md-star { background: #4c2525; background: var(--sport-11632-tab); }
.md-period-tabs[data-sport="11634"] .md-star { background: #244c2e; background: var(--sport-11634-tab); }
.md-period-tabs[data-sport="17355"] .md-star { background: #253e4c; background: var(--sport-17355-tab); }
.md-period-tabs[data-sport="17591"] .md-star { background: #4b3c25; background: var(--sport-17591-tab); }
.md-period-tabs[data-sport="29086"] .md-star { background: #203250; background: var(--sport-29086-tab); }
.md-period-tabs[data-sport="37145"] .md-star { background: #4c2525; background: var(--sport-37145-tab); }
.md-period-tabs[data-sport="1436"] .md-star { background: #4c2424; background: var(--sport-1436-tab); }
.md-period-tabs[data-sport="37"] .md-star { background: #4c2424; background: var(--sport-37-tab); }
.md-period-tabs[data-sport="47041"] .md-star { background: #56321e; background: var(--sport-47041-tab); }
.md-period-tabs[data-sport="1442"] .md-star { background: #283549; background: var(--sport-1442-tab); }
.md-period-tabs[data-sport="1441"] .md-star { background: #383838; background: var(--sport-1441-tab); }
.md-period-tabs[data-sport="1440"] .md-star { background: #223f4e; background: var(--sport-1440-tab); }
.md-period-tabs[data-sport="1439"] .md-star { background: #244c2e; background: var(--sport-1439-tab); }
.md-period-tabs[data-sport="11638"] .md-star { background: #4c4624; background: var(--sport-11638-tab); }

/* ========== FIXTURE CARD - HEADER ========== */
.fc-header[data-sport="1"] { background: linear-gradient(90deg, rgb(39 99 61) 0%, rgb(46 117 72) 100%); background: var(--sport-1-gradient); }
.fc-header[data-sport="2"] { background: linear-gradient(90deg, rgb(49 69 89) 0%, rgb(58 82 105) 100%); background: var(--sport-2-gradient); }
.fc-header[data-sport="3"] { background: linear-gradient(90deg, rgb(105 62 38) 0%, rgb(122 73 46) 100%); background: var(--sport-3-gradient); }
.fc-header[data-sport="4"] { background: linear-gradient(90deg, rgb(92 74 46) 0%, rgb(109 88 54) 100%); background: var(--sport-4-gradient); }
.fc-header[data-sport="5"] { background: linear-gradient(90deg, rgb(94 43 47) 0%, rgb(112 51 55) 100%); background: var(--sport-5-gradient); }
.fc-header[data-sport="6"] { background: linear-gradient(90deg, rgb(39 64 99) 0%, rgb(46 75 117) 100%); background: var(--sport-6-gradient); }
.fc-header[data-sport="7"] { background: linear-gradient(90deg, rgb(91 67 47) 0%, rgb(108 80 55) 100%); background: var(--sport-7-gradient); }
.fc-header[data-sport="8"] { background: linear-gradient(90deg, rgb(48 62 89) 0%, rgb(57 74 106) 100%); background: var(--sport-8-gradient); }
.fc-header[data-sport="9"] { background: linear-gradient(90deg, rgb(44 51 94) 0%, rgb(52 61 111) 100%); background: var(--sport-9-gradient); }
.fc-header[data-sport="10"] { background: linear-gradient(90deg, rgb(34 58 103) 0%, rgb(41 69 122) 100%); background: var(--sport-10-gradient); }
.fc-header[data-sport="16"] { background: linear-gradient(90deg, rgb(39 99 61) 0%, rgb(46 117 72) 100%); background: var(--sport-16-gradient); }
.fc-header[data-sport="1219"] { background: linear-gradient(90deg, rgb(40 81 98) 0%, rgb(47 96 116) 100%); background: var(--sport-1219-gradient); }
.fc-header[data-sport="1429"] { background: linear-gradient(90deg, rgb(42 96 61) 0%, rgb(49 114 72) 100%); background: var(--sport-1429-gradient); }
.fc-header[data-sport="1433"] { background: linear-gradient(90deg, rgb(45 86 93) 0%, rgb(53 102 110) 100%); background: var(--sport-1433-gradient); }
.fc-header[data-sport="1434"] { background: linear-gradient(90deg, rgb(39 99 61) 0%, rgb(46 117 72) 100%); background: var(--sport-1434-gradient); }
.fc-header[data-sport="1891"] { background: linear-gradient(90deg, rgb(82 82 56) 0%, rgb(97 97 66) 100%); background: var(--sport-1891-gradient); }
.fc-header[data-sport="3088"] { background: linear-gradient(90deg, rgb(50 69 87) 0%, rgb(60 82 104) 100%); background: var(--sport-3088-gradient); }
.fc-header[data-sport="11624"] { background: linear-gradient(90deg, rgb(96 85 42) 0%, rgb(113 101 50) 100%); background: var(--sport-11624-gradient); }
.fc-header[data-sport="11625"] { background: linear-gradient(90deg, rgb(38 95 90) 0%, rgb(45 112 106) 100%); background: var(--sport-11625-gradient); }
.fc-header[data-sport="11627"] { background: linear-gradient(90deg, rgb(94 65 44) 0%, rgb(111 77 52) 100%); background: var(--sport-11627-gradient); }
.fc-header[data-sport="11630"] { background: linear-gradient(90deg, rgb(52 86 52) 0%, rgb(61 102 61) 100%); background: var(--sport-11630-gradient); }
.fc-header[data-sport="11632"] { background: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%); background: var(--sport-11632-gradient); }
.fc-header[data-sport="11634"] { background: linear-gradient(90deg, rgb(45 93 56) 0%, rgb(53 110 66) 100%); background: var(--sport-11634-gradient); }
.fc-header[data-sport="17355"] { background: linear-gradient(90deg, rgb(45 76 93) 0%, rgb(53 90 110) 100%); background: var(--sport-17355-gradient); }
.fc-header[data-sport="17591"] { background: linear-gradient(90deg, rgb(92 74 46) 0%, rgb(109 88 54) 100%); background: var(--sport-17591-gradient); }
.fc-header[data-sport="29086"] { background: linear-gradient(90deg, rgb(39 61 99) 0%, rgb(46 73 117) 100%); background: var(--sport-29086-gradient); }
.fc-header[data-sport="37145"] { background: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%); background: var(--sport-37145-gradient); }
.fc-header[data-sport="1436"] { background: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%); background: var(--sport-1436-gradient); }
.fc-header[data-sport="37"] { background: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%); background: var(--sport-37-gradient); }
.fc-header[data-sport="47041"] { background: linear-gradient(90deg, rgb(105 62 38) 0%, rgb(122 73 46) 100%); background: var(--sport-47041-gradient); }
.fc-header[data-sport="1442"] { background: linear-gradient(90deg, rgb(49 65 89) 0%, rgb(58 77 106) 100%); background: var(--sport-1442-gradient); }
.fc-header[data-sport="1441"] { background: linear-gradient(90deg, rgb(69 69 69) 0%, rgb(82 82 82) 100%); background: var(--sport-1441-gradient); }
.fc-header[data-sport="1440"] { background: linear-gradient(90deg, rgb(42 78 96) 0%, rgb(50 92 113) 100%); background: var(--sport-1440-gradient); }
.fc-header[data-sport="1439"] { background: linear-gradient(90deg, rgb(45 93 56) 0%, rgb(53 110 66) 100%); background: var(--sport-1439-gradient); }
.fc-header[data-sport="11638"] { background: linear-gradient(90deg, rgb(93 86 45) 0%, rgb(110 101 53) 100%); background: var(--sport-11638-gradient); }

/* BB (BetsAPI) Sport IDs */
.fc-header[data-sport="13"] { background: linear-gradient(90deg, rgb(92 74 46) 0%, rgb(109 88 54) 100%); background: var(--sport-13-gradient); }
.fc-header[data-sport="17"] { background: linear-gradient(90deg, rgb(49 69 89) 0%, rgb(58 82 105) 100%); background: var(--sport-17-gradient); }
.fc-header[data-sport="18"] { background: linear-gradient(90deg, rgb(105 62 38) 0%, rgb(122 73 46) 100%); background: var(--sport-18-gradient); }
.fc-header[data-sport="91"] { background: linear-gradient(90deg, rgb(44 51 94) 0%, rgb(52 61 111) 100%); background: var(--sport-91-gradient); }
.fc-header[data-sport="92"] { background: linear-gradient(90deg, rgb(50 69 87) 0%, rgb(60 82 104) 100%); background: var(--sport-92-gradient); }
.fc-header[data-sport="94"] { background: linear-gradient(90deg, rgb(52 86 52) 0%, rgb(61 102 61) 100%); background: var(--sport-94-gradient); }
.fc-header[data-sport="95"] { background: linear-gradient(90deg, rgb(96 85 42) 0%, rgb(113 101 50) 100%); background: var(--sport-95-gradient); }
.fc-header[data-sport="151"] { background: linear-gradient(90deg, rgb(39 61 99) 0%, rgb(46 73 117) 100%); background: var(--sport-151-gradient); }
.fc-header[data-sport="162"] { background: linear-gradient(90deg, rgb(93 45 45) 0%, rgb(110 53 53) 100%); background: var(--sport-162-gradient); }