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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

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

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;
}

/* Black Ops One */
@font-face {
  font-family: 'Black Ops One';
  src: url(/static/media/BlackOpsOne-Regular.b8437be32fe8faca71ed.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Oswald */
@font-face {
  font-family: 'Oswald';
  src: url(/static/media/Oswald-Regular.f2cc95793ccbcceb4280.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url(/static/media/Oswald-Medium.5d01dd974e7918403aec.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url(/static/media/Oswald-SemiBold.fdb5a772c0ee83e96b5d.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url(/static/media/Oswald-Bold.c95918c1b2826334480b.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 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;
   }
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-body);
  background: var(--bg-header, var(--bg-body));
  padding: 0 16px;
  height: 35px;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
  z-index: 2224;
  border-bottom: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-header, var(--border-dark));
}


.logo {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
  text-decoration: none;
  padding-bottom: 4px;
  margin-right: 20px;
  flex-shrink: 0;
}

.logo span {
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 15px;
  font-family: 'Proxima Nova', sans-serif;
}

.header-logo-nav {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 1;
}

.header-nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.header-nav-link.hide-mobile {
  display: none;
}

.header-nav-link.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.header-nav-link svg {
  display: none;
}

@media (min-width: 1024px) {
  .header-nav-link.hide-mobile {
    display: flex;
  }
}

/* World Cup 2026 link — always visible (except casino) */
.header-wc-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  text-decoration: none;
  white-space: nowrap;
}

.header-wc-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.header-wc-text {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #D4A843;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (min-width: 1024px) {
  .header-wc-link {
    order: 99;
    gap: 6px;
    padding: 0 10px;
    height: 35px;
    margin-left: 0;
    position: relative;
    transition: opacity 0.2s;
  }

  .header-wc-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 6px;
    right: 6px;
    height: 2.5px;
    background: #D4A843;
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform 0.25s ease;
  }

  .header-wc-link.active::after {
    transform: scaleX(1);
  }

  .header-wc-link:hover {
    opacity: 0.85;
  }

  .header-wc-icon {
    width: 21px;
    height: 21px;
  }

  .header-wc-text {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
  }
}

/* Promotions — desktop nav link (hidden on mobile) */
.header-promo-desktop {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: 'Proxima Nova', sans-serif;
}

@media (min-width: 1024px) {
  .header-promo-desktop {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .header-promo-desktop:hover {
    color: var(--accent-blue-hover);
  }

  .header-promo-desktop svg {
    display: inline-block;
  }
}

/* Promotions — mobile icon in right section (hidden on desktop) */
.header-promo-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.header-promo-mobile:hover {
  color: var(--accent-blue-hover);
}

@media (min-width: 1024px) {
  .header-promo-mobile {
    display: none;
  }
}

.search-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.search-icon {
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.search-icon-link:hover .search-icon {
  color: var(--text-primary);
}

@media (min-width: 1200px) {
  .search-icon-link:hover .search-icon {
    color: var(--text-primary);
  }
  .search-icon-link:hover {
    background: var(--white-8);
  }
}

.logout {
  background-color: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.logout:hover {
  color:   var(--accent-blue-hover);
}

.header-right-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

@media (max-width: 768px) {
  .header-right-section {
    gap: 6px;
  }

  .balance {
    padding: 2px 6px;
    font-size: 13px;
  }

  .login, .register {
    font-size: 12px;
    padding: 1px 6px;
  }

  .register {
    padding: 1px 8px;
  }
}

.auth {
  display: flex;
  gap: 15px;
  color: var(--text-primary);
  align-items: center;
}

.login {
  font-family: 'Proxima Nova', sans-serif;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  border-radius: 2px;
  padding: 1px 8px;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
}

.login:hover {
  color: var(--accent-blue-hover);
}

.register {
  font-family: 'Proxima Nova', sans-serif;
  color: var(--text-on-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-hover) 100%);
  border: none;
  border-radius: 4px;
  padding: 3px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.register:hover {
  filter: brightness(1.1);
}

.balance:hover {
  color:   var(--accent-blue-hover);
}

.balance {
  color: var(--text-primary);
  display: flex;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
  background: transparent;
  padding: 3px 8px;
  text-decoration: none;
}

.balance-update {
  animation: flashBalance 0.8s ease-in-out;
}

@keyframes flashBalance {
  0% {
    color: var(--text-primary);
  }
  50% {
    color: var(--text-tertiary);
  }
  100% {
    color: inherit;
  }
}

/* Header navigation links - desktop only */
.header-nav-links {
  display: none;
}

@media (min-width: 1024px) {
  .header-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
  }

  .header-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    font-family: 'Proxima Nova', sans-serif;
    font-size: 12px;
    font-weight: 600;
    height: 35px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .header-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 6px;
    right: 6px;
    height: 2.5px;
    background: var(--accent-blue);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform 0.25s ease;
  }

  .header-nav-link svg {
    display: inline-block;
    height: 21px;
  }

  .header-nav-link.active {
    color: var(--text-primary);
  }

  .header-nav-link.active::after {
    transform: scaleX(1);
  }

  .header-nav-link:hover {
    color: var(--text-primary);
  }

  .header-live-link {
    position: relative;
  }

  .header-live-icon {
    width: 14px;
    height: 14px;
    color: var(--accent-red);
    background-color: currentColor;
    -webkit-mask: url(/static/media/live.305452975aaea3c5f238.svg) no-repeat center;
            mask: url(/static/media/live.305452975aaea3c5f238.svg) no-repeat center;
    mask-size: contain;
    -webkit-mask: url(/static/media/live.305452975aaea3c5f238.svg) no-repeat center;
    -webkit-mask-size: contain;
  }

  .header-live-text {
    position: relative;
    display: inline-block;
  }

  .header-live-badge {
    position: absolute;
    top: -1px;
    right: -14px;
    background-color: var(--accent-red);
    border-radius: 12px;
    font-size: 8px;
    font-weight: bold;
    color: #fff;
    min-width: 12px;
    min-height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    box-sizing: border-box;
  }

  .header-live-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--accent-red);
    border-radius: 10px;
    margin-left: -2px;
  }

  .header-mybets-link {
    position: relative;
  }

  .header-mybets-icon {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%27/%3E%3Cpolyline points=%2714 2 14 8 20 8%27/%3E%3Cline x1=%2716%27 y1=%2713%27 x2=%278%27 y2=%2713%27/%3E%3Cline x1=%2716%27 y1=%2717%27 x2=%278%27 y2=%2717%27/%3E%3Cpolyline points=%2710 9 9 9 8 9%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .header-mybets-icon:hover {
    color: var(--accent-blue-hover);
  }
}

/* Narrow desktop: hide nav text, show icons only */
@media (min-width: 1024px) and (max-width: 1275px) {
  .header-nav-text {
    display: none;
  }

  .header-nav-link {
    padding: 0 8px;
  }
}

/* ─── Nav overflow: "More" dropdown ─── */
.header-nav-more {
  display: none;
  position: relative;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header-nav-more.visible {
    display: flex;
    align-items: center;
  }
  .header-nav-collapsed .header-nav-collapsible {
    display: none !important;
  }
}

.header-nav-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0 6px;
  height: 35px;
  transition: color 0.2s;
}
.header-nav-more-btn:hover {
  color: var(--text-primary);
}

.header-nav-more-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--white-12);
  border-radius: 8px;
  min-width: 160px;
  overflow: hidden;
  z-index: 9999;
  box-shadow: var(--shadow-card);
  animation: navMoreFadeIn 0.15s ease-out;
}

@keyframes navMoreFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.header-nav-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--white-90);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  text-transform: uppercase;
  text-align: left;
}
.header-nav-more-item:hover {
  background: var(--white-10);
}
.header-nav-more-item.active {
  color: var(--accent-blue);
}
.header-nav-more-item:not(:last-child) {
  border-bottom: 1px solid var(--white-8);
}

/* Deposit button - green style (desktop only) */
.header-deposit-btn {
  display: none;
}

@media (min-width: 1024px) {
  .header-deposit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-hover) 100%);
    color: var(--text-on-accent);
    border: none;
    font-family: 'Proxima Nova', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 4px;
    cursor: pointer;
  }

  .header-deposit-btn:hover {
    filter: brightness(1.1);
  }
}

/* Account icon - desktop only */
.header-account-btn {
  display: none;
}

@media (min-width: 1024px) {
  .header-account-btn {
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
  }

  .header-account-btn:hover {
    color: var(--accent-blue-hover);
  }

  .header-account-btn.active {
    color: var(--accent-blue);
  }

  .header-account-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* MyBets icon - desktop only */
.header-mybets-btn {
  display: none;
}

@media (min-width: 1024px) {
  .header-mybets-btn {
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
  }

  .header-mybets-btn:hover {
    color: var(--accent-blue-hover);
  }

  .header-mybets-btn.active {
    color: var(--accent-blue);
  }

  .header-mybets-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Inbox icon - desktop only */
.header-inbox-btn {
  display: none;
}

@media (min-width: 1024px) {
  .header-inbox-btn {
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
  }

  .header-inbox-btn:hover {
    color: var(--accent-blue-hover);
  }

  .header-inbox-btn.active {
    color: var(--accent-blue);
  }

  .header-inbox-btn svg {
    width: 18px;
    height: 18px;
  }

  .header-inbox-badge {
    position: absolute;
    font-size: 8px;
    font-weight: 700;
    color: var(--text-on-accent);
    background-color: var(--accent-red);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
    top: -3px;
    right: -1px;
    min-width: 12px;
    height: 12px;
    font-size: 8px;
  }
}

/* Chat icon - desktop only */
.header-chat-btn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Proxima Nova', sans-serif;
}

@media (min-width: 1024px) {
  .header-chat-btn {
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--text-secondary);
    border-radius: 4px;
    transition: all 0.2s ease;
  }

  .header-chat-btn:hover {
    color: var(--accent-blue-hover);
  }

  .header-chat-btn.active {
    color: var(--accent-blue);
  }

  .header-chat-btn svg {
    width: 18px;
    height: 18px;
  }

  .header-chat-badge {
    position: absolute;
    font-size: 8px;
    font-weight: 700;
    color: var(--text-on-accent);
    background-color: var(--accent-red);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
    top: -3px;
    right: -1px;
    min-width: 12px;
    height: 12px;
  }
}

/* Vertical divider between header icon groups - desktop only */
.header-divider {
  display: none;
}

@media (min-width: 1024px) {
  .header-divider {
    display: block;
    width: 1px;
    height: 16px;
    background: var(--border-color);
    flex-shrink: 0;
  }
}

/* Hide ThemeSwitcher, OddsFormatSwitcher, Promo on mobile — moved to SettingsPage */
@media (max-width: 1023px) {
  .header-settings-mobile-hide { display: none; }
  .header-promo-mobile { display: none; }
}

.code-input-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 8px 0;
}

.code-input-box {
  width: 44px;
  height: 52px;
  border-radius: 10px;
  border: 1.5px solid var(--separator-light);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', monospace;
  text-align: center;
  caret-color: var(--accent-blue);
  padding: 0;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.code-input-box:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
}

@media (max-width: 380px) {
  .code-input-box {
    width: 38px;
    height: 46px;
    font-size: 20px;
  }

  .code-input-row {
    gap: 6px;
  }
}

/* ===========================================
   Auth Modal - Professional & Beautiful
   Uses same colors as original Login page
   =========================================== */

/* Modal Overlay */
.auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: authFadeIn 0.2s ease-out;
}

@keyframes authFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal Container */
.auth-modal {
  background: var(--bg-elevated);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: authSlideUp 0.3s ease-out;
}

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

/* Modal Header */
.auth-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--white-10);
}

.auth-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.auth-modal-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.15s;
}

.auth-modal-close svg {
  width: 20px;
  height: 20px;
}

.auth-modal-close:hover {
  background: var(--white-10);
  color: var(--accent-red);
}

/* Modal Body */
.auth-modal-body {
  padding: 24px;
  overflow-y: auto;
}

/* Error/Success Message */
.auth-modal-error {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  text-align: center;
}

/* Error styling */
.auth-modal-error:not(:has(✅)) {
  background: var(--accent-red-muted);
  border: 1px solid var(--accent-red-muted);
  color: var(--accent-red);
}

/* Success styling */
.auth-modal-error:has(✅) {
  background: var(--accent-green-muted);
  border: 1px solid var(--accent-green-muted);
  color: var(--accent-green);
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Input Group */
.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin: 0;
}

/* Input Wrapper */
.auth-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 14px;
  transition: all 0.2s;
}

.auth-input-wrapper:focus-within {
  border-color: var(--link-blue-hover);
  background: var(--bg-quaternary);
}

.auth-input-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  fill: var(--text-tertiary);
  flex-shrink: 0;
  transition: fill 0.2s;
}

.auth-input-wrapper:focus-within .auth-input-icon {
  fill: var(--link-blue-hover);
}

.auth-input {
  flex: 1 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  outline: none;
  font-size: 16px; /* Prevents zoom on iOS */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.auth-input::placeholder {
  color: var(--text-quaternary);
}

/* Date input specific styles */
.auth-input-date {
  color-scheme: dark;
  cursor: pointer;
}

.auth-input-date::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* Forgot Password Link */
.auth-forgot-password {
  text-align: right;
  margin-top: -8px;
  margin-bottom: 8px;
}

.auth-forgot-password a,
.auth-forgot-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.auth-forgot-password a:hover,
.auth-forgot-btn:hover {
  color: var(--link-blue-hover);
  text-decoration: underline;
}

/* Forgot Password Subtitle */
.auth-forgot-subtitle {
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px;
  text-align: center;
}

/* Forgot Password Success State */
.auth-forgot-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  text-align: center;
}

.auth-forgot-success-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  color: var(--accent-green);
}

.auth-forgot-success-icon svg {
  width: 100%;
  height: 100%;
}

.auth-forgot-success-text {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 280px;
}

/* Submit Button */
.auth-submit-btn {
  background: var(--btn-auth-bg);
  border: none;
  border-radius: 8px;
  color: var(--link-blue-hover);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  padding: 14px;
  margin-top: 8px;
  transition: all 0.2s;
  position: relative;
}

.auth-submit-btn:hover:not(:disabled) {
  background: var(--btn-auth-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.auth-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.auth-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Loading Spinner */
.auth-loading-spinner {
  display: inline-block;
  animation: authPulse 1s infinite;
}

@keyframes authPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Modal Footer */
.auth-modal-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--white-10);
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary);
}

.auth-switch-btn {
  background: none;
  border: none;
  color: var(--link-blue-hover);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s;
}

.auth-switch-btn:hover {
  color: var(--link-blue);
  text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .auth-modal-overlay {
    padding: 0;
    align-items: flex-start; /* Changed from flex-end to fix positioning */
    padding-top: 20px;
  }

  .auth-modal {
    max-width: 100%;
    max-height: 85vh; /* Reduced from 95vh to ensure it fits on screen */
    border-radius: 16px;
    margin: 0 8px;
    animation: authSlideDown 0.3s ease-out;
  }

  @keyframes authSlideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .auth-modal-header {
    padding: 16px 20px;
  }

  .auth-modal-title {
    font-size: 18px;
  }

  .auth-modal-body {
    padding: 20px;
  }

  .auth-input-wrapper {
    padding: 14px;
  }

  .auth-submit-btn {
    padding: 16px;
    font-size: 17px;
  }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
  .auth-modal {
    max-width: 460px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .auth-modal-overlay,
  .auth-modal,
  .auth-input-wrapper,
  .auth-submit-btn,
  .auth-modal-close {
    animation: none;
    transition: none;
  }
}

/* ============ 2FA Login Step ============ */
.auth-2fa-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-2fa-icon {
  color: #0A84FF;
  color: var(--accent-blue, #0A84FF);
  margin-bottom: 16px;
}

.auth-2fa-icon svg {
  stroke: #0A84FF;
  stroke: var(--accent-blue, #0A84FF);
}

.auth-2fa-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0 0 20px;
}

.auth-2fa-step .code-input-row {
  margin-bottom: 16px;
}

.auth-2fa-email-sent {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
  padding: 10px 16px;
  color: #22c55e;
  font-size: 13px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.auth-2fa-fallback {
  margin-top: 16px;
}

.auth-2fa-email-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-family: 'Proxima Nova', sans-serif;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.auth-2fa-email-btn:hover:not(:disabled) {
  color: #0A84FF;
  color: var(--accent-blue, #0A84FF);
}

.auth-2fa-email-btn:disabled {
  cursor: default;
  color: #22c55e;
}

/* ===========================================
   Deposit Modal - Professional Crypto Design
   =========================================== */

/* Modal Overlay */
.deposit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: depositFadeIn 0.2s ease-out;
}

@keyframes depositFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal Container */
.deposit-modal {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-body) 100%);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: depositSlideUp 0.3s ease-out;
  border: 1px solid var(--white-8);
}

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

/* Modal Header */
.deposit-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(90deg, var(--accent-green-muted) 0%, transparent 100%);
  border-bottom: 1px solid var(--white-5);
}

.deposit-modal-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deposit-modal-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-hover) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.deposit-modal-icon svg {
  width: 22px;
  height: 22px;
  color: var(--text-primary);
}

.deposit-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.deposit-modal-close {
  background: transparent;
  border: none;
  color: var(--text-quaternary);
  cursor: pointer;
  padding: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.15s;
}

.deposit-modal-close svg {
  width: 20px;
  height: 20px;
}

.deposit-modal-close:hover {
  background: var(--white-8);
  color: var(--accent-red);
}

/* Modal Body */
.deposit-modal-body {
  padding: 24px;
  overflow-y: auto;
}

/* Loading State */
.deposit-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
}

.deposit-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--accent-green-muted);
  border-top-color: var(--accent-green);
  border-radius: 50%;
  animation: depositSpin 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes depositSpin {
  to { transform: rotate(360deg); }
}

.deposit-loading p {
  margin: 0;
  font-size: 15px;
}

/* Error State */
.deposit-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--accent-red);
  text-align: center;
}

.deposit-error svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.8;
}

.deposit-error p {
  margin: 0;
  font-size: 15px;
}

/* Network Badge */
.deposit-network-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-green-muted);
  border: 1px solid var(--accent-green-muted);
  color: var(--accent-green);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  margin-bottom: 24px;
}

.deposit-network-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-green);
  border-radius: 50%;
  animation: depositPulse 2s infinite;
}

@keyframes depositPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* QR Code Container */
.deposit-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.deposit-qr-wrapper {
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.deposit-qr-hint {
  margin: 12px 0 0 0;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Address Container */
.deposit-address-container {
  margin-bottom: 24px;
}

.deposit-address-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.deposit-address-box {
  background: var(--bg-body);
  border: 1px solid var(--white-10);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deposit-address-text {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
  line-height: 1.5;
  padding: 12px;
  background: var(--white-3);
  border-radius: 8px;
  text-align: center;
}

.deposit-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-hover) 100%);
  border: none;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 24px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-card);
}

.deposit-copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.deposit-copy-btn:active {
  transform: translateY(0);
}

.deposit-copy-btn.copied {
  background: linear-gradient(135deg, var(--accent-green-hover) 0%, #15803d 100%);
}

.deposit-copy-btn svg {
  width: 18px;
  height: 18px;
}

/* Important Notes */
.deposit-notes {
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.2);
  /* warning colors are intentionally hardcoded */
  border-radius: 12px;
  padding: 16px;
}

.deposit-notes-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent-warning);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.deposit-info-icon {
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent-warning);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  flex-shrink: 0;
}

.deposit-notes-list {
  margin: 0;
  padding: 0 0 0 28px;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.7;
}

.deposit-notes-list li {
  margin-bottom: 4px;
}

.deposit-notes-list li:last-child {
  margin-bottom: 0;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .deposit-modal-overlay {
    padding: 0;
    align-items: flex-start;
    padding-top: 20px;
  }

  .deposit-modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px;
    margin: 0 8px;
    animation: depositSlideDown 0.3s ease-out;
  }

  @keyframes depositSlideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .deposit-modal-header {
    padding: 16px 20px;
  }

  .deposit-modal-icon {
    width: 36px;
    height: 36px;
  }

  .deposit-modal-icon svg {
    width: 18px;
    height: 18px;
  }

  .deposit-modal-title {
    font-size: 18px;
  }

  .deposit-modal-body {
    padding: 20px;
  }

  .deposit-qr-wrapper {
    padding: 12px;
  }

  .deposit-address-text {
    font-size: 12px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .deposit-modal-overlay,
  .deposit-modal,
  .deposit-copy-btn,
  .deposit-modal-close,
  .deposit-spinner,
  .deposit-network-dot {
    animation: none;
    transition: none;
  }
}

/* ===========================================
   Withdraw Modal - Additional Styles
   =========================================== */

/* Withdraw Icon - Orange/Red gradient */
.withdraw-icon {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  box-shadow: var(--shadow-card);
}

/* Balance Display */
.withdraw-balance-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--white-3);
  border: 1px solid var(--white-8);
  border-radius: 12px;
  margin-bottom: 20px;
}

.withdraw-balance-label {
  font-size: 13px;
  color: var(--text-tertiary);
}

.withdraw-balance-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-green);
}

/* Input Groups */
.withdraw-input-group {
  margin-bottom: 20px;
  max-width: 100%;
  overflow: hidden;
}

.withdraw-input-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.withdraw-amount-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-body);
  border: 1px solid var(--white-10);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.withdraw-amount-wrapper:focus-within {
  border-color: var(--accent-green);
}

.withdraw-currency {
  padding: 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.withdraw-input {
  flex: 1 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
}

.withdraw-input::placeholder {
  color: var(--text-quaternary);
}

.withdraw-input::-webkit-outer-spin-button,
.withdraw-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.withdraw-input[type=number] {
  -moz-appearance: textfield;
}

.withdraw-max-btn {
  background: var(--accent-green-muted);
  border: none;
  color: var(--accent-green);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  margin-right: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.withdraw-max-btn:hover {
  background: var(--accent-green-muted);
}

.withdraw-input-hint {
  display: block;
  font-size: 12px;
  color: var(--text-quaternary);
  margin-top: 8px;
}

.withdraw-address-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--bg-body);
  border: 1px solid var(--white-10);
  border-radius: 12px;
  padding: 16px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
}

.withdraw-address-input:focus {
  border-color: var(--accent-green);
}

.withdraw-address-input::placeholder {
  color: var(--text-quaternary);
  font-family: inherit;
}

/* Error Message */
.withdraw-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--accent-red-muted);
  border: 1px solid var(--accent-red-muted);
  border-radius: 10px;
  margin-bottom: 20px;
  color: var(--accent-red);
  font-size: 14px;
}

.withdraw-error svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Submit Button */
.withdraw-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border: none;
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-card);
  /* withdraw orange — intentionally hardcoded */
  margin-bottom: 20px;
}

.withdraw-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.withdraw-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.withdraw-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.withdraw-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--white-30);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: depositSpin 0.8s linear infinite;
}

/* Success State */
.withdraw-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
}

.withdraw-success-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-hover) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

.withdraw-success-icon svg {
  width: 32px;
  height: 32px;
  color: var(--text-on-accent);
}

.withdraw-success h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.withdraw-success p {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.6;
}

.withdraw-done-btn {
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-hover) 100%);
  border: none;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 48px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-card);
}

.withdraw-done-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

/* Bonus Warning */
.deposit-bonus-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  /* warning orange — intentionally hardcoded */
  border-radius: 8px;
  color: var(--accent-orange);
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* Withdraw Bonus Block */
.withdraw-bonus-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
}

.withdraw-bonus-block svg {
  color: var(--accent-red);
}

.withdraw-bonus-block p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.withdraw-bonus-block .bonus-block-hint {
  color: var(--text-tertiary);
  font-size: 11px;
}

/* Language Switcher - Professional & Clean */

.language-switcher {
  position: relative;
  display: inline-block;
}

.lang-current-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 4px 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
  font-family: 'Proxima Nova', sans-serif;
}

.lang-current-btn:hover {
  color: var(--accent-blue-hover);
}

.lang-flag-img {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.lang-code {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}


.lang-flag-img-dropdown {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

/* Dropdown */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tertiary);
  border: 1px solid var(--white-12);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  min-width: 130px;
  overflow: hidden;
  z-index: 1000;
  animation: langDropdownFadeIn 0.15s ease-out;
}

@keyframes langDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--white-90);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: 'Proxima Nova', sans-serif;
  text-align: left;
}

.lang-option:hover {
  background: var(--white-10);
}

.lang-option.active {
  color: var(--accent-blue);
}

.lang-option:not(:last-child) {
  border-bottom: 1px solid var(--white-8);
}

.lang-name {
  font-size: 13px;
  color: var(--white-90);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .lang-current-btn {
    padding: 3px 4px;
    gap: 3px;
  }

  .lang-flag-img {
    width: 16px;
    height: 12px;
  }

  .lang-code {
    display: none; /* Hide code on mobile, just show flag */
  }

  .lang-dropdown {
    min-width: 120px;
  }

  .lang-flag-img-dropdown {
    width: 16px;
    height: 12px;
  }
}


/* Theme Switcher — matches LanguageSwitcher style */

.theme-switcher {
  position: relative;
  display: inline-block;
}

.theme-current-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s;
}

.theme-current-btn:hover {
  color: var(--accent-blue-hover);
}

/* Dropdown */
.theme-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tertiary);
  border: 1px solid var(--white-12);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  min-width: 120px;
  overflow: hidden;
  z-index: 1000;
  animation: themeDropdownFadeIn 0.15s ease-out;
}

@keyframes themeDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--white-90);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: 'Proxima Nova', sans-serif;
  text-align: left;
}

.theme-option:hover {
  background: var(--white-10);
}

.theme-option.active {
  color: var(--accent-blue);
}

.theme-option:not(:last-child) {
  border-bottom: 1px solid var(--white-8);
}

.theme-name {
  font-size: 13px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .theme-current-btn {
    padding: 3px 4px;
  }
}

/* Odds Format Switcher */

.odds-format-switcher {
  position: relative;
  display: inline-block;
}

/* Header button */
.odds-fmt-current-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  padding: 4px 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
  font-family: 'Proxima Nova', sans-serif;
  white-space: nowrap;
}

.odds-fmt-current-btn:hover {
  color: var(--accent-blue-hover);
}

.odds-fmt-current-btn svg {
  flex-shrink: 0;
}

.odds-fmt-header-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: none;
}

/* Dropdown */
.odds-fmt-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--white-12);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  min-width: 190px;
  overflow: hidden;
  z-index: 1000;
  animation: oddsFmtFadeIn 0.15s ease-out;
}

@keyframes oddsFmtFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown option */
.odds-fmt-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--white-90);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: 'Proxima Nova', sans-serif;
  text-align: left;
}

.odds-fmt-option:hover {
  background: var(--white-10);
}

/* Active = blue text, like ThemeSwitcher */
.odds-fmt-option.active {
  color: var(--accent-blue);
}

.odds-fmt-option.active .odds-fmt-name {
  color: var(--accent-blue);
}

.odds-fmt-option.active .odds-fmt-sample {
  color: var(--accent-blue);
  opacity: 0.8;
}

.odds-fmt-option.active .odds-fmt-badge {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: rgba(56, 132, 244, 0.12);
  background: rgba(var(--accent-blue-rgb, 56, 132, 244), 0.12);
}

.odds-fmt-option:not(:last-child) {
  border-bottom: 1px solid var(--white-8);
}

/* Left side: badge + name */
.odds-fmt-option-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Short code badge (EU, US, UK, MY, HK) */
.odds-fmt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid var(--white-20);
  border-radius: 4px;
  color: var(--white-70);
  background: var(--white-6);
  line-height: 1.4;
}

.odds-fmt-name {
  font-size: 13px;
  color: var(--white-90);
  transition: color 0.15s;
}

.odds-fmt-sample {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.6;
  font-weight: 400;
  transition: color 0.15s, opacity 0.15s;
}

/* Mobile */
@media (max-width: 768px) {
  .odds-fmt-current-btn {
    padding: 3px 4px;
  }

.odds-fmt-current-btn svg {
    width: 16px;
    height: 16px;
  }

  .odds-fmt-dropdown {
    right: -10px;
    min-width: 200px;
  }
}

.promo-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: promoFadeIn 0.2s ease-out;
}

@keyframes promoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.promo-modal {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-body) 100%);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  animation: promoSlideUp 0.3s ease-out;
  margin: 0 12px;
}

.promo-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--white-10);
}

.promo-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.promo-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
}

.promo-modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.promo-modal-close:hover {
  color: var(--text-primary);
  background: var(--white-8);
}

.promo-modal-body {
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.promo-bonus-title {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
}

.promo-bonus-subtitle {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-family: 'Proxima Nova', sans-serif;
}

.promo-banner {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 20px;
}

.promo-how,
.promo-terms {
  margin-bottom: 16px;
}

.promo-how h3,
.promo-terms h3 {
  margin: 0 0 10px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
}

.promo-how ol,
.promo-terms ol {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
  font-family: 'Proxima Nova', sans-serif;
}

.promo-how ol li,
.promo-terms ol li {
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  .promo-modal-overlay {
    align-items: flex-start;
    padding-top: 20px;
  }

  .promo-modal {
    max-width: 100%;
    margin: 0 8px;
    max-height: calc(100vh - 40px);
  }

  .promo-modal-body {
    padding: 16px;
  }

  .promo-modal-header {
    padding: 14px 16px;
  }
}

/* BalanceDropdown — popup menu + starry night shimmer */

.balance-dropdown {
  position: relative;
  display: inline-flex;
}

/* Trigger button — matches old .balance link style */
.balance-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
  min-width: 60px;
  height: 22px;
}

.balance-dropdown-trigger:hover {
  color: var(--accent-blue);
}

.balance-dropdown-trigger.balance-update {
  animation: balanceFlash 0.8s ease-out;
}

/* Dropdown menu */
.balance-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--white-12);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  min-width: 210px;
  overflow: hidden;
  z-index: 1000;
  animation: balanceDropdownFadeIn 0.15s ease-out;
}

@keyframes balanceDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Menu items */
.balance-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--white-90);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: 'Proxima Nova', sans-serif;
  text-align: left;
}

.balance-dropdown-item:hover {
  background: var(--white-10);
}

.balance-dropdown-item:not(:last-child) {
  border-bottom: 1px solid var(--white-8);
}

/* Toggle switch */
.balance-dropdown-toggle {
  margin-left: auto;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--white-12);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.balance-dropdown-toggle.active {
  background: var(--accent-blue);
}

.balance-dropdown-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.balance-dropdown-toggle.active .balance-dropdown-toggle-knob {
  transform: translateX(16px);
}

/* ===== Starry Night Shimmer (Header — small) ===== */
.balance-hidden-shimmer {
  display: inline-block;
  min-width: 60px;
  height: 13px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: transparent;
}

/* Star dots — mixed sizes, scattered */
.balance-hidden-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1.2px at 6% 72%, var(--white-45) 0.6px, transparent 1.2px),
    radial-gradient(circle 0.6px at 14% 28%, var(--white-45) 0.3px, transparent 0.6px),
    radial-gradient(circle 1px at 23% 55%, var(--white-45) 0.5px, transparent 1px),
    radial-gradient(circle 0.5px at 31% 15%, var(--white-45) 0.25px, transparent 0.5px),
    radial-gradient(circle 1.3px at 19% 82%, var(--white-45) 0.65px, transparent 1.3px),
    radial-gradient(circle 0.7px at 37% 68%, var(--white-45) 0.35px, transparent 0.7px),
    radial-gradient(circle 1px at 44% 32%, var(--white-45) 0.5px, transparent 1px),
    radial-gradient(circle 0.5px at 52% 78%, var(--white-45) 0.25px, transparent 0.5px),
    radial-gradient(circle 1.1px at 58% 18%, var(--white-45) 0.55px, transparent 1.1px),
    radial-gradient(circle 0.6px at 66% 52%, var(--white-45) 0.3px, transparent 0.6px),
    radial-gradient(circle 1.2px at 73% 85%, var(--white-45) 0.6px, transparent 1.2px),
    radial-gradient(circle 0.8px at 79% 38%, var(--white-45) 0.4px, transparent 0.8px),
    radial-gradient(circle 0.5px at 86% 62%, var(--white-45) 0.25px, transparent 0.5px),
    radial-gradient(circle 1px at 93% 22%, var(--white-45) 0.5px, transparent 1px),
    radial-gradient(circle 0.7px at 48% 45%, var(--white-45) 0.35px, transparent 0.7px);
  animation: shimmerTwinkle 3s ease-in-out infinite alternate;
}

@keyframes shimmerTwinkle {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* Mobile */
@media (max-width: 480px) {
  .balance-dropdown-trigger {
    padding: 5px 8px;
    font-size: 12px;
    min-width: 50px;
  }

  .balance-dropdown-menu {
    min-width: 200px;
  }
}

.bottom-nav {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  width: auto;
  height: 56px;
  border-radius: 30px;
  background: rgb(0 0 0 / 35%);
  backdrop-filter: blur(3px) saturate(150%);
  -webkit-backdrop-filter: blur(3px) saturate(150%);
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--white-20);
  z-index: 2410;
}

[data-theme="day"] .bottom-nav {
  background: rgb(255 255 255 / 25%);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.nav-item.active .nav-text {
  color: var(--accent-blue);
  font-weight: 700;
}

.nav-item.active .nav-icon {
  color: var(--accent-blue);
}

.nav-item .nav-icon {
  color: var(--text-primary);
}

/* Live item special styling - red when active */
.nav-item.live-item.active .nav-icon {
  color: var(--accent-red);
}

.nav-text {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1;
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 600;
  white-space: nowrap;
}

.nav-text-live {
  color: var(--text-on-accent);
  font-size: 10px;
  line-height: 1;
  font-family: 'Proxima Nova', sans-serif;
  background-color: var(--accent-red);
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 700;
  white-space: nowrap;
}

.nav-text.active {
  color: var(--accent-blue);
}

.nav-icon {
  margin-bottom: 2px;
}

/* Icon wrapper for badge positioning */
.nav-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon-wrapper {
  margin-bottom: 2px;
}

.nav-icon-wrapper .nav-icon {
  margin-bottom: 0;
}

/* Red badge dot for notifications */
.nav-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--accent-red);
  border-radius: 50%;
  border: 1.5px solid var(--white-30);
  box-shadow: var(--shadow-card);
}

/* Cookie Consent Banner */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 0 16px 16px;
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-consent--closing {
  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.cookie-consent__container {
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(to bottom, var(--bg-elevated), var(--bg-body));
  border: 1px solid var(--white-8);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.cookie-consent__icon {
  display: flex;
  justify-content: center;
  animation: bounce 1s ease-in-out;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.cookie-consent__content {
  text-align: center;
}

.cookie-consent__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  font-family: 'Proxima Nova', sans-serif;
}

.cookie-consent__text {
  font-size: 13px;
  color: var(--white-70);
  margin: 0;
  line-height: 1.5;
  font-family: 'Proxima Nova', sans-serif;
}

.cookie-consent__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.cookie-consent__btn {
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Proxima Nova', sans-serif;
  border: none;
}

.cookie-consent__btn--accept {
  background: linear-gradient(135deg, var(--bg-quaternary) 0%, var(--separator-light) 100%);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--white-10);
}

.cookie-consent__btn--accept:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--separator-light) 0%, var(--keyboard-key) 100%);
  box-shadow: var(--shadow-card);
}

.cookie-consent__btn--accept:active {
  transform: translateY(0);
}

/* Desktop adjustments */
@media (min-width: 768px) {
  .cookie-consent {
    padding: 0 24px 24px;
  }

  .cookie-consent__container {
    flex-direction: row;
    align-items: center;
    max-width: 800px;
    padding: 20px 28px;
  }

  .cookie-consent__icon {
    flex-shrink: 0;
  }

  .cookie-consent__content {
    text-align: left;
    flex: 1 1;
  }

  .cookie-consent__actions {
    flex-shrink: 0;
  }
}

/* PWA Install Prompt */
.pwa-prompt {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  padding: 0 16px 16px;
  animation: pwaSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pwa-prompt--closing {
  animation: pwaSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pwaSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pwaSlideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}

.pwa-prompt__container {
  max-width: 400px;
  margin: 0 auto;
  background: linear-gradient(to bottom, var(--bg-elevated), var(--bg-body));
  border: 1px solid var(--white-8);
  border-radius: 20px;
  padding: 20px;
  position: relative;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.pwa-prompt__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--white-8);
  border-radius: 50%;
  color: var(--white-70);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pwa-prompt__close:hover {
  background: var(--white-10);
  color: var(--text-primary);
}

.pwa-prompt__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.pwa-prompt__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
}

.pwa-prompt__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pwa-prompt__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pwa-prompt__label {
  font-size: 12px;
  color: var(--white-50);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Proxima Nova', sans-serif;
}

.pwa-prompt__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Proxima Nova', sans-serif;
}

.pwa-prompt__instructions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.pwa-prompt__step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-prompt__step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-quaternary) 0%, var(--separator-light) 100%);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Proxima Nova', sans-serif;
  border: 1px solid var(--white-10);
}

.pwa-prompt__step-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  color: var(--white-85, rgba(255, 255, 255, 0.85));
  line-height: 1.4;
  font-family: 'Proxima Nova', sans-serif;
}

.pwa-prompt__step-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.pwa-prompt__icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 2px;
}

.pwa-prompt__icon-share {
  color: var(--text-primary);
}

.pwa-prompt__icon-menu {
  color: var(--white-70);
}

.pwa-prompt__btn {
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Proxima Nova', sans-serif;
  border: 1px solid var(--white-10);
  background: linear-gradient(135deg, var(--bg-quaternary) 0%, var(--separator-light) 100%);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-card);
}

.pwa-prompt__btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--separator-light) 0%, var(--keyboard-key) 100%);
  box-shadow: var(--shadow-card);
}

.pwa-prompt__btn:active {
  transform: translateY(0);
}

/* Arrow pointing down for iOS Safari */
.pwa-prompt::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--bg-body);
}

/* Push Notification Prompt — matches CookieConsent style */
.push-prompt {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 0 16px 16px;
  animation: pushSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.push-prompt--closing {
  animation: pushSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pushSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pushSlideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}

.push-prompt__container {
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(to bottom, var(--bg-elevated), var(--bg-body));
  border: 1px solid var(--white-8);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.push-prompt__icon {
  display: flex;
  justify-content: center;
  animation: pushBounce 1s ease-in-out;
}

@keyframes pushBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.push-prompt__content {
  text-align: center;
}

.push-prompt__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  font-family: 'Proxima Nova', sans-serif;
}

.push-prompt__text {
  font-size: 13px;
  color: var(--white-70);
  margin: 0;
  line-height: 1.5;
  font-family: 'Proxima Nova', sans-serif;
}

.push-prompt__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.push-prompt__btn {
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Proxima Nova', sans-serif;
  border: none;
}

.push-prompt__btn--enable {
  background: linear-gradient(135deg, var(--bg-quaternary) 0%, var(--separator-light) 100%);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--white-10);
}

.push-prompt__btn--enable:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--separator-light) 0%, var(--keyboard-key) 100%);
  box-shadow: var(--shadow-card);
}

.push-prompt__btn--enable:active {
  transform: translateY(0);
}

.push-prompt__btn--dismiss {
  background: transparent;
  color: var(--white-70);
  padding: 12px 16px;
}

.push-prompt__btn--dismiss:hover {
  color: var(--text-primary);
}

/* Desktop adjustments */
@media (min-width: 768px) {
  .push-prompt {
    padding: 0 24px 24px;
  }

  .push-prompt__container {
    flex-direction: row;
    align-items: center;
    max-width: 800px;
    padding: 20px 28px;
  }

  .push-prompt__icon {
    flex-shrink: 0;
  }

  .push-prompt__content {
    text-align: left;
    flex: 1 1;
  }

  .push-prompt__actions {
    flex-shrink: 0;
  }
}

/* =============================================
   THEME SYSTEM — Dark Night / Night / Day / Dusk
   =============================================
   Usage: <html data-theme="dark-knight|night|day|dusk">
   Default: dark-knight
   ============================================= */

/* ===== NIGHT THEME (default — current design) ===== */
:root,
[data-theme="night"] {
  /* --- Backgrounds --- */
  --bg-body: #29292c;
  --bg-header: #29292c;
  --border-header: #363636;
  --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;
  --sport-icon-inactive: #E5E5EA;

  /* --- 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: #e80123;
  --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: #e80123;
  --color-live-muted: rgba(232, 1, 35, 0.15);
  --live-red: #e80123; /* 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-banner: linear-gradient(270deg, #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-header: #F2F2F7;
  --border-header: #D1D1D6;
  --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;
  --sport-icon-inactive: #3C3C43;

  /* --- 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: #e80123;
  --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: #e80123;
  --color-live-muted: rgba(232, 1, 35, 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-banner: linear-gradient(270deg, #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-header: #1A1A2E;
  --border-header: #2A2A42;
  --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;
  --sport-icon-inactive: #C8C8D0;

  /* --- 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: #e80123;
  --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: #e80123;
  --color-live-muted: rgba(232, 1, 35, 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-banner: linear-gradient(270deg, #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;
}

/* ===== DARK NIGHT THEME (deep black) ===== */
[data-theme="dark-knight"] {
  /* --- Backgrounds --- */
  --bg-body: #111113;
  --bg-header: #111113;
  --border-header: #1f1f23;
  --bg-primary: #111113;
  --bg-secondary: #242429;
  --bg-tertiary: #161618;
  --bg-quaternary: #26262b;
  --bg-odds-btn: #26262b;
  --bg-elevated: #070708;
  --bg-card: #161618;
  --bg-card-bottom: #0e0e10;
  --bg-overlay: rgba(0,0,0,0.85);

  /* --- Text --- */
  --text-primary: #f7f7f8;
  --text-secondary: #dbdbdc;
  --text-tertiary: #8f8f94;
  --text-quaternary: #646468;
  --text-on-accent: #ffffff;
  --sport-icon-inactive: #dbdbdc;

  /* --- 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);

  /* --- Borders --- */
  --border-color: #26262b;
  --border-dark: #1f1f23;
  --separator: #222226;
  --separator-light: #303036;

  /* --- Accents --- */
  --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: #e80123;
  --accent-red-hover: #FF6961;
  --accent-red-muted: rgba(255, 69, 58, 0.15);
  --accent-orange: #FF9F0A;
  --accent-yellow: #FFD60A;
  --accent-gold: #D4A843;
  --accent-gold-border: rgba(247, 181, 0, 0.43);
  --accent-warning: #E5A500;
  --accent-warning-hover: #F5B800;

  /* --- Live / Score --- */
  --live-red: #e80123;
  --color-live: #e80123;
  --color-live-muted: rgba(232, 1, 35, 0.15);
  --color-goal: #30D158;
  --color-ot: #FF9F0A;
  --color-soon: #FFD60A;
  --color-ended: #8f8f94;
  --color-spread-label: rgba(255,255,255,0.05);
  --score-color: color(srgb 0.57 0.7196 1);

  /* --- Odds --- */
  --odds-active: rgba(10, 132, 255, 0.2);
  --odds-hover: rgba(255,255,255,0.08);
  --odds-in-slip: rgba(10, 132, 255, 0.15);
  --odds-up: #30D158;
  --odds-down: #FF453A;

  /* --- Interactive / UI --- */
  --hover-bg: #323239;
  --active-bg: #3a3a41;
  --keyboard-key: #303036;
  --clock-bg: #303036;
  --elapsed-bg: #1f1f23;
  --shimmer-base: #1d1d20;
  --shimmer-highlight: #242429;
  --red-card-bg: rgba(255, 69, 58, 0.12);
  --tag-blue-bg: #1e3a8a;
  --tag-blue-border: rgb(62, 62, 215);

  /* --- Links & Auth --- */
  --link-blue: #73a4ff;
  --link-blue-hover: #a5c4fc;
  --btn-auth-bg: #222c45;
  --btn-auth-bg-hover: #25304b;

  /* --- Gradients --- */
  --gradient-header: linear-gradient(180deg, #070708 0%, #000000 100%);
  --gradient-card: linear-gradient(135deg, #070708 0%, #161618 100%);
  --gradient-fixture: linear-gradient(90deg, #1d1d20 0%, #26262b 100%);
  --gradient-banner: linear-gradient(270deg, #1d1d20 0%, #26262b 100%);
  --gradient-odds-header: linear-gradient(to bottom, #070708, #111113);
  --gradient-top-league: linear-gradient(180deg, #242429 0%, #1a1a1e 100%);
  --gradient-balance-card: linear-gradient(135deg, #1a2a3a 0%, #0d1a26 100%);
  --balance-card-border: #2a3a4a;
}

/* ===== 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: #e80123;
  --accent-red-hover: #FF6961;
  --color-ended: #8E8E93;
  --color-live: #e80123;
  --color-live-muted: rgba(232, 1, 35, 0.15);
}

:root {
  --shadow-card: 0 1px 4px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,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;
  height: 35px;
}

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: 35px;
    max-width: 1450px;
    margin: 0 auto;
  }

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

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

  .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-left: 1px solid var(--border-dark);
    border-right: 1px solid var(--border-dark);
  }

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

.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 */
}

/* Inline sport icon SVG — scales to container, inherits color */
.inline-sport-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Player photo icons (tennis, MMA, snooker, darts, etc.) — gray circle background */
.team-icon-player .team-icon {
  background: #bfbfbf;
  border-radius: 50%;
}

@keyframes betNotifSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes betNotifProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/**
 * 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(63 85 52) 0%, rgb(56 72 52) 100%);
  --sport-1-border: rgb(54 72 45);
  --sport-1-tab: #2f3f26;
  --sport-1-icon: #00c853;

  /* 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;
  --sport-2-icon: #00a0ff;

  /* 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;
  --sport-3-icon: #ff9100;

  /* 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;
  --sport-4-icon: #ffc400;

  /* 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;
  --sport-5-icon: #ff4455;

  /* 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;
  --sport-6-icon: #448aff;

  /* Racing (7) - Red */
  --sport-7-gradient: linear-gradient(90deg, rgb(180 30 30) 0%, rgb(210 45 45) 100%);
  --sport-7-border: rgba(210, 45, 45, 0.4);
  --sport-7-tab: #8b1a1a;
  --sport-7-icon: #ff2020;

  /* 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;
  --sport-8-icon: #4090ff;

  /* 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;
  --sport-9-icon: #737eff;

  /* 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;
  --sport-10-icon: #2e8cff;

  /* Table Tennis (11, 3088) */
  --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-11-icon: #00b0e0;
  --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;
  --sport-3088-icon: #00b0e0;

  /* Rugby (16) - Green (like soccer) */
  --sport-16-gradient: linear-gradient(90deg, rgb(63 85 52) 0%, rgb(56 72 52) 100%);
  --sport-16-border: rgb(54 72 45);
  --sport-16-tab: #2f3f26;
  --sport-16-icon: #00c853;

  /* 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;
  --sport-1429-icon: #00e676;

  /* Futsal (1434) - Green (like soccer) */
  --sport-1434-gradient: linear-gradient(90deg, rgb(63 85 52) 0%, rgb(56 72 52) 100%);
  --sport-1434-border: rgb(54 72 45);
  --sport-1434-tab: #2f3f26;
  --sport-1434-icon: #00c853;

  /* 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;
  --sport-1219-icon: #00d4ff;

  /* 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;
  --sport-11630-icon: #40e040;

  /* 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;
  --sport-11625-icon: #00e0d0;

  /* 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;
  --sport-11624-icon: #ffd000;

  /* 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;
  --sport-11627-icon: #ffa040;

  /* 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;
  --sport-11632-icon: #ff4444;

  /* 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;
  --sport-11634-icon: #00d060;

  /* 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;
  --sport-17591-icon: #ffc400;

  /* 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;
  --sport-17355-icon: #00c0f0;

  /* 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;
  --sport-1891-icon: #c8c840;

  /* 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;
  --sport-29086-icon: #448aff;

  /* 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;
  --sport-37145-icon: #ff4444;

  /* 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;
  --sport-1436-icon: #ff3838;

  /* 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;
  --sport-47041-icon: #ff9100;

  /* 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;
  --sport-1442-icon: #40a0ff;

  /* 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;
  --sport-1441-icon: #b0b0b0;

  /* 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;
  --sport-1440-icon: #00c8ff;

  /* 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;
  --sport-1433-icon: #00d8e8;

  /* 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;
  --sport-11638-icon: #ffd000;

  /* 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;
  --sport-1439-icon: #00d060;

  /* Sumo (54560) - Crimson Red */
  --sport-54560-gradient: linear-gradient(90deg, rgb(96 42 49) 0%, rgb(113 50 58) 100%);
  --sport-54560-border: rgba(125, 55, 64, 0.4);
  --sport-54560-tab: #4e2229;
  --sport-54560-icon: #ff4060;

  /* Chess (1437) - Warm Brown */
  --sport-1437-gradient: linear-gradient(90deg, rgb(82 65 48) 0%, rgb(98 78 56) 100%);
  --sport-1437-border: rgba(110, 88, 62, 0.4);
  --sport-1437-tab: #3d3022;
  --sport-1437-icon: #e0b860;

  /* Golf (11631) - Green (fairway) */
  --sport-11631-gradient: linear-gradient(90deg, rgb(45 82 52) 0%, rgb(53 97 61) 100%);
  --sport-11631-border: rgba(59, 107, 67, 0.4);
  --sport-11631-tab: #244430;
  --sport-11631-icon: #4caf50;

}

/* ========== MATCH DETAILS - LIVE BAR ========== */
.md-live-bar[data-sport="1"] { background: linear-gradient(90deg, rgb(63 85 52) 0%, rgb(56 72 52) 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(180 30 30) 0%, rgb(210 45 45) 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(63 85 52) 0%, rgb(56 72 52) 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(63 85 52) 0%, rgb(56 72 52) 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="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); }
.md-live-bar[data-sport="54560"] { background: linear-gradient(90deg, rgb(96 42 49) 0%, rgb(113 50 58) 100%); background: var(--sport-54560-gradient); }
.md-live-bar[data-sport="1437"] { background: linear-gradient(90deg, rgb(82 65 48) 0%, rgb(98 78 56) 100%); background: var(--sport-1437-gradient); }
.md-live-bar[data-sport="11631"] { background: linear-gradient(90deg, rgb(45 82 52) 0%, rgb(53 97 61) 100%); background: var(--sport-11631-gradient); }

/* ========== MATCH DETAILS - PERIOD TABS (solid colors for sticky star) ========== */
.md-period-tabs[data-sport="1"] { background: #2f3f26; 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: #8b1a1a; 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: #2f3f26; 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: #2f3f26; 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="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); }
.md-period-tabs[data-sport="54560"] { background: #4e2229; background: var(--sport-54560-tab); }
.md-period-tabs[data-sport="1437"] { background: #3d3022; background: var(--sport-1437-tab); }
.md-period-tabs[data-sport="11631"] { background: #244430; background: var(--sport-11631-tab); }

/* ===== STICKY ICONS - per-sport bg (mirrors .md-period-tabs) so scrolling tabs don't bleed through ===== */
.md-period-tabs[data-sport="1"] .md-sticky-icons { background: #2f3f26; background: var(--sport-1-tab); }
.md-period-tabs[data-sport="2"] .md-sticky-icons { background: #283848; background: var(--sport-2-tab); }
.md-period-tabs[data-sport="3"] .md-sticky-icons { background: #56321e; background: var(--sport-3-tab); }
.md-period-tabs[data-sport="4"] .md-sticky-icons { background: #4b3c25; background: var(--sport-4-tab); }
.md-period-tabs[data-sport="5"] .md-sticky-icons { background: #4d2326; background: var(--sport-5-tab); }
.md-period-tabs[data-sport="6"] .md-sticky-icons { background: #1f3451; background: var(--sport-6-tab); }
.md-period-tabs[data-sport="7"] .md-sticky-icons { background: #8b1a1a; background: var(--sport-7-tab); }
.md-period-tabs[data-sport="8"] .md-sticky-icons { background: #273349; background: var(--sport-8-tab); }
.md-period-tabs[data-sport="9"] .md-sticky-icons { background: #242a4d; background: var(--sport-9-tab); }
.md-period-tabs[data-sport="10"] .md-sticky-icons { background: #1c2f54; background: var(--sport-10-tab); }
.md-period-tabs[data-sport="11"] .md-sticky-icons { background: #293847; background: var(--sport-11-tab); }
.md-period-tabs[data-sport="16"] .md-sticky-icons { background: #2f3f26; background: var(--sport-16-tab); }
.md-period-tabs[data-sport="1219"] .md-sticky-icons { background: #204250; background: var(--sport-1219-tab); }
.md-period-tabs[data-sport="1429"] .md-sticky-icons { background: #224e32; background: var(--sport-1429-tab); }
.md-period-tabs[data-sport="1433"] .md-sticky-icons { background: #25464c; background: var(--sport-1433-tab); }
.md-period-tabs[data-sport="1434"] .md-sticky-icons { background: #2f3f26; background: var(--sport-1434-tab); }
.md-period-tabs[data-sport="1891"] .md-sticky-icons { background: #43432e; background: var(--sport-1891-tab); }
.md-period-tabs[data-sport="3088"] .md-sticky-icons { background: #293847; background: var(--sport-3088-tab); }
.md-period-tabs[data-sport="11624"] .md-sticky-icons { background: #4e4522; background: var(--sport-11624-tab); }
.md-period-tabs[data-sport="11625"] .md-sticky-icons { background: #1e4e4a; background: var(--sport-11625-tab); }
.md-period-tabs[data-sport="11627"] .md-sticky-icons { background: #4c3524; background: var(--sport-11627-tab); }
.md-period-tabs[data-sport="11630"] .md-sticky-icons { background: #2a462a; background: var(--sport-11630-tab); }
.md-period-tabs[data-sport="11632"] .md-sticky-icons { background: #4c2525; background: var(--sport-11632-tab); }
.md-period-tabs[data-sport="11634"] .md-sticky-icons { background: #244c2e; background: var(--sport-11634-tab); }
.md-period-tabs[data-sport="17355"] .md-sticky-icons { background: #253e4c; background: var(--sport-17355-tab); }
.md-period-tabs[data-sport="17591"] .md-sticky-icons { background: #4b3c25; background: var(--sport-17591-tab); }
.md-period-tabs[data-sport="29086"] .md-sticky-icons { background: #203250; background: var(--sport-29086-tab); }
.md-period-tabs[data-sport="37145"] .md-sticky-icons { background: #4c2525; background: var(--sport-37145-tab); }
.md-period-tabs[data-sport="1436"] .md-sticky-icons { background: #4c2424; background: var(--sport-1436-tab); }
.md-period-tabs[data-sport="47041"] .md-sticky-icons { background: #56321e; background: var(--sport-47041-tab); }
.md-period-tabs[data-sport="1442"] .md-sticky-icons { background: #283549; background: var(--sport-1442-tab); }
.md-period-tabs[data-sport="1441"] .md-sticky-icons { background: #383838; background: var(--sport-1441-tab); }
.md-period-tabs[data-sport="1440"] .md-sticky-icons { background: #223f4e; background: var(--sport-1440-tab); }
.md-period-tabs[data-sport="1439"] .md-sticky-icons { background: #244c2e; background: var(--sport-1439-tab); }
.md-period-tabs[data-sport="11638"] .md-sticky-icons { background: #4c4624; background: var(--sport-11638-tab); }
.md-period-tabs[data-sport="54560"] .md-sticky-icons { background: #4e2229; background: var(--sport-54560-tab); }
.md-period-tabs[data-sport="1437"] .md-sticky-icons { background: #3d3022; background: var(--sport-1437-tab); }
.md-period-tabs[data-sport="11631"] .md-sticky-icons { background: #244430; background: var(--sport-11631-tab); }


/* ========== FIXTURE CARD - HEADER ========== */
.fc-header[data-sport="1"] { background: linear-gradient(90deg, rgb(63 85 52) 0%, rgb(56 72 52) 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(180 30 30) 0%, rgb(210 45 45) 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(63 85 52) 0%, rgb(56 72 52) 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(63 85 52) 0%, rgb(56 72 52) 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="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); }
.fc-header[data-sport="54560"] { background: linear-gradient(90deg, rgb(96 42 49) 0%, rgb(113 50 58) 100%); background: var(--sport-54560-gradient); }
.fc-header[data-sport="1437"] { background: linear-gradient(90deg, rgb(82 65 48) 0%, rgb(98 78 56) 100%); background: var(--sport-1437-gradient); }
.fc-header[data-sport="11631"] { background: linear-gradient(90deg, rgb(45 82 52) 0%, rgb(53 97 61) 100%); background: var(--sport-11631-gradient); }