/* 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;
  display: flex;
  align-items: center;
  padding: 0 8px;
  z-index: 2410;
  background: transparent;
}

/* iOS 26 Safari: фон/стекло держим на absolute-ребёнке, не на самом fixed-элементе —
   иначе Safari 26 сэмплит его в тинт нижнего бара. Стекло визуально остаётся. */
.bottom-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: rgb(0 0 0 / 35%);
  backdrop-filter: blur(3px) saturate(150%);
  -webkit-backdrop-filter: blur(3px) saturate(150%);
  border: 1px solid var(--white-20);
  z-index: -1;
}

[data-theme="day"] .bottom-nav::before {
  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);
}

/* ChatPage — mobile full-page chat */
/* Height is set via JS (visualViewport) */

.chat-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}

/* Blue header — same style as desktop widget */
.chat-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--accent-blue);
  color: #fff;
  flex-shrink: 0;
}

.chat-page-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}

.chat-page-header-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.chat-page-header-close:active {
  background: rgba(255, 255, 255, 0.35);
}

/* Messages body */
.chat-page-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Sticky date header */
.chat-date-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 6px 0;
  align-self: center;
}

.chat-date-sticky span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgb(30 30 40 / 43%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  padding: 4px 12px;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

/* Unread messages divider */
.chat-unread-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.chat-unread-divider::before,
.chat-unread-divider::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--accent-blue);
  opacity: 0.4;
}

.chat-unread-divider span {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-blue);
  white-space: nowrap;
}

/* Typing indicator */
.chat-typing {
  align-self: flex-start;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}

.chat-typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.chat-typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--text-quaternary);
  border-radius: 50%;
  animation: chatTypingBounce 1.2s infinite;
}

.chat-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatTypingBounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Input area */
.chat-page-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--separator);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.chat-page-input input {
  flex: 1 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--separator);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

.chat-page-input input:focus {
  border-color: var(--accent-blue);
}

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

.chat-page-input button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-page-input button:disabled {
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════
   Match Stats Modal
   ═══════════════════════════════════════════════════════════ */

.ms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  background: var(--bg-overlay, rgba(0,0,0,0.6));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: msFadeIn 0.2s ease-out;
}

.ms-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  width: 92%;
  max-width: 460px;
  height: 75vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  box-shadow: var(--shadow-card);
  animation: msScaleIn 0.25s ease-out;
}

@media (max-width: 768px) {
  .ms-overlay { align-items: flex-end; }
  .ms-modal {
    margin: 0px 3px;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    height: 80vh;
    animation: msSlideUp 0.3s ease-out;
  }
}

/* ─── Toolbar ─── */
.ms-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 16px 16px 0 0;
  background: var(--bg-elevated);
  /* border-bottom: 1px solid var(--border-dark); */
}

.ms-toolbar-league {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1;
}

.ms-league-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 2px;
}

.ms-league-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  font-family: 'Proxima Nova Cond', sans-serif;
  text-transform: uppercase;
}

.ms-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ms-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(239,68,68,0.15);
  background: var(--red-bg, rgba(239,68,68,0.15));
  color: #ef4444;
  color: var(--red, #ef4444);
  cursor: pointer;
  transition: opacity 0.15s;
}
@media (hover: hover) {
  .ms-close-btn:hover { opacity: 0.8; }
}

.ms-bet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background: #22c55e;
  background: var(--accent-green, #22c55e);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: opacity 0.15s;
}
@media (hover: hover) {
  .ms-bet-btn:hover { opacity: 0.85; }
}

/* ─── Header ─── */
.ms-header {
  flex-shrink: 0;
  background: var(--bg-elevated);
  padding: 4px 3px 12px;
  border-bottom: 1px solid var(--border-dark);
}

.ms-teams {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
}

.ms-team {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}

.ms-serve-icon {
  position: absolute;
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.ms-team-home .ms-serve-icon {
  right: -18px;
}
.ms-team-away .ms-serve-icon {
  left: -18px;
}

.ms-team-name-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  max-width: 140px;
  min-width: 0;
}

.ms-team-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Proxima Nova Cond', sans-serif;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ms-score-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 120px;
}

.ms-match-status {
  font-size: 10px;
  font-weight: 500;
  color: #ef4444;
  color: var(--red, #ef4444);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 16px;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Force all timer children to inherit red color */
.ms-match-status span:not(.ms-var-badge),
.ms-match-status .ms-timer,
.ms-match-status .card-timer,
.ms-match-status .basketball-timer,
.ms-match-status .hockey-timer {
  color: #ef4444 !important;
  color: var(--red, #ef4444) !important;
}

.ms-tennis-points {
  display: flex;
  align-items: center;
  justify-content: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.ms-tp-val {
  min-width: 30px;
  font-size: 13px;
  font-weight: 600;
  color: #f7be0f;
}
.ms-tp-val:first-child {
  text-align: right;
}
.ms-tp-val:last-child {
  text-align: left;
}
.ms-tp-sep {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 13px;
  color: #f7be0f;
  opacity: 0.6;
}

.ms-match-date {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  margin-bottom: 4px;
}

.ms-team-icon-wrap {
  background: #fff;
  border-radius: 10px;
  padding: 5px;
  border: 1px solid var(--white-10);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-main-score {
  font-family: 'Oswald', sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--text-primary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-score-val {
  min-width: 30px;
}
.ms-score-home {
  text-align: right;
}
.ms-score-away {
  text-align: left;
}
.ms-score-sep {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.ms-main-score-tennis {
  line-height: 1;
}

.ms-main-score .score-flash {
  animation: ms-score-flash 1.2s ease-out;
}

@keyframes ms-score-flash {
  0% { opacity: 0; color: #fff; text-shadow: 0 0 20px #fff, 0 0 40px var(--accent); }
  12% { opacity: 1; }
  22% { opacity: 0; }
  34% { opacity: 1; color: var(--accent); text-shadow: 0 0 12px var(--accent); }
  46% { opacity: 0.15; }
  58% { opacity: 1; color: #fff; text-shadow: 0 0 8px var(--accent); }
  72% { opacity: 0.3; }
  85% { opacity: 1; }
  100% { opacity: 1; color: var(--text-primary); text-shadow: none; }
}

/* Red card badge */
.ms-red-card {
  background: #ef4444;
  background: var(--color-live, #ef4444);
  color: #fff;
  font-size: 9px;
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 700;
  margin-left: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* VAR badge */
.ms-var-badge {
  background: #ef4444;
  background: var(--color-live, #ef4444);
  color: #fff !important;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ms-timer {
  display: flex;
  gap: 5px;
  align-items: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* First leg + aggregate for 2-leg ties */
.ms-first-leg {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.ms-first-leg .ms-agg {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

/* Period scores — separate row below teams */
.ms-period-scores {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}

.ms-period-badge {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  background: var(--white-10);
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

/* ─── Period Tabs ─── */
.ms-tabs {
  display: flex;
  gap: 0;
  padding: 0 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--separator-light);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
  background: var(--black-20);
}
.ms-tabs::-webkit-scrollbar { display: none; }

.ms-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ms-tab-active {
  color: #4a9eff;
  color: var(--accent-blue, #4a9eff);
  border-bottom-color: #4a9eff;
  border-bottom-color: var(--accent-blue, #4a9eff);
}

@media (hover: hover) {
  .ms-tab:not(.ms-tab-active):hover {
    color: var(--text-secondary);
  }
}

/* ─── Body ─── */
.ms-body {
  padding: 12px 16px 20px;
  flex: 1 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--white-10) transparent;
}

.ms-loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.ms-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--white-10);
  border-top-color: #4a9eff;
  border-top-color: var(--accent-blue, #4a9eff);
  border-radius: 50%;
  animation: msSpin 0.7s linear infinite;
}

.ms-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
}
.ms-empty-icon {
  color: var(--text-quaternary);
  opacity: 0.5;
}
.ms-empty-text {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ─── Baseball BSO ─── */
.ms-baseball-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 20px;
}
.ms-bso {
  display: flex;
  align-items: center;
  gap: 24px;
}
.ms-bso-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ms-bso-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.ms-bso-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ─── Stats ─── */
.ms-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ms-stat-item {
  border-radius: 6px;
}

.ms-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
}

.ms-stat-value {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 500;
  min-width: 30px;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.ms-stat-value.ms-home {
  color: #4a9eff;
  color: var(--accent-blue, #4a9eff);
}

.ms-stat-value.ms-away {
  color: #ff6b6b;
  color: var(--accent-red, #ff6b6b);
}

.ms-stat-bar-wrap {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ms-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ms-stat-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  gap: 2px;
}

.ms-bar-home {
  background: #4a9eff;
  background: var(--accent-blue, #4a9eff);
  border-radius: 3px;
  min-width: 4px;
  transition: width 0.4s ease-out;
}

.ms-bar-away {
  background: #ff6b6b;
  background: var(--accent-red, #ff6b6b);
  border-radius: 3px;
  min-width: 4px;
  transition: width 0.4s ease-out;
}

/* ─── Animations ─── */
@keyframes msFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes msScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes msSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes msSpin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   Compact stats — ONLY inside MatchDetails (inline panel + desktop
   sidebar). The results-page modal keeps its larger, roomy sizing.
   Scoped by wrapper so the shared .ms-* classes aren't affected there.
   ═══════════════════════════════════════════════════════════ */
.md-charts-panel .ms-body,
.sidebar-stats-panel .ms-body,
.atk-stats-box .ms-body {
  padding: 0px 16px 5px;
  max-height: 125px; /* ~5 bars, then internal scroll (tunable) */
}
/* трекер-стата = оверлей во всё поле → высоту не ограничиваем, скроллим как обычно */
.atk-stats-box .ms-body { max-height: none; margin: 10px 0; }
.md-charts-panel .ms-stats,
.sidebar-stats-panel .ms-stats,
.atk-stats-box .ms-stats {
  gap: 5px;
}
.md-charts-panel .ms-stat-row,
.sidebar-stats-panel .ms-stat-row,
.atk-stats-box .ms-stat-row {
  align-items: end;
  padding: 1px;
}
.md-charts-panel .ms-stat-value,
.sidebar-stats-panel .ms-stat-value,
.atk-stats-box .ms-stat-value {
  font-size: 14px;
  line-height: 1;
}
/* цифры в стат-панели ТРЕКЕРА — адаптивны к теме (тёмная → белые, светлая → тёмные; иначе на белом фоне пропадали) */
.atk-stats-box .ms-stat-value.ms-home,
.atk-stats-box .ms-stat-value.ms-away {
  color: #fff;
  color: var(--white-95, #fff);
}
.md-charts-panel .ms-stat-bar-wrap,
.sidebar-stats-panel .ms-stat-bar-wrap,
.atk-stats-box .ms-stat-bar-wrap {
  gap: 2px;
}
.md-charts-panel .ms-stat-label,
.sidebar-stats-panel .ms-stat-label,
.atk-stats-box .ms-stat-label {
  font-size: 10px;
}
.md-charts-panel .ms-stat-bar,
.sidebar-stats-panel .ms-stat-bar,
.atk-stats-box .ms-stat-bar {
  height: 4px;
  margin-bottom: 1px;
}

.atk-page {
  padding: 16px;
  max-width: 600px;
}
/* контейнер модуля трекера (вёрстку держат дети: scorebar/pitch-wrap) */
.atk-tracker { width: 100%; }
.atk-testrow { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
/* встройка в страницу матча: инлайн-блок (мобилка, на десктопе прячем — там сайдбар) + обёртка в десктоп-сайдбаре */
.md-tracker-panel {
  margin: 10px 3px 0;
  background: var(--bg-odds-btn);
  border-radius: 5px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 5px;
}
@media (min-width: 1024px) { .md-tracker-panel { display: none; } }
.sidebar-tracker-panel {
  position: relative;
  margin: 0 10px 10px;
  background: var(--bg-secondary);
  border-radius: 5px;
  padding: 0 7px 7px;
}
.sidebar-tracker-empty {
  padding: 22px 10px;
  text-align: center;
  font-size: 12px;
  color: #8b949e;
  color: var(--text-secondary, #8b949e);
  line-height: 1.6;
}
.atk-head { margin-bottom: 12px; }
.atk-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e6edf3;
  color: var(--admin-text-primary, #e6edf3);
}
.atk-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: #21262d;
  background: var(--admin-bg-input, #21262d);
  letter-spacing: .02em;
}
.atk-st-live { color: #3fb950; }
.atk-st-stale { color: #d29922; }
.atk-st-error { color: #ff6b6b; }
.atk-st-loading { color: #8b949e; }
.atk-queue {
  font-size: 11px;
  font-weight: 600;
  color: #d29922;
  background: rgba(210, 153, 34, 0.12);
  border: 1px solid rgba(210, 153, 34, 0.4);
  padding: 2px 8px;
  border-radius: 10px;
}
.atk-subtitle {
  color: #8b949e;
  color: var(--admin-text-secondary, #8b949e);
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.atk-subtitle code {
  background: #21262d;
  background: var(--admin-bg-input, #21262d);
  padding: 1px 5px;
  border-radius: 4px;
  color: #58a6ff;
  font-size: 11px;
}
.atk-bar { margin: 12px 0 10px; }
.atk-select {
  width: 100%;
  background: #161b22;
  background: var(--admin-bg-input, #161b22);
  color: #e6edf3;
  color: var(--admin-text-primary, #e6edf3);
  border: 1px solid #30363d;
  border: 1px solid var(--admin-border, #30363d);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}
.atk-scorebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 2px;
  font-weight: 700;
}
.atk-team { flex: 1 1; min-width: 0; }
.atk-home {
  font-size: 10px;
  font-weight: 600;
  color: var(--white-95);
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atk-away {
  text-align: right;
  font-size: 10px;
  font-weight: 600;
  color: var(--white-95);
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atk-score {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  padding: 0px 12px;
  white-space: nowrap;
}
/* мобильный инлайн: скорбар прячем — счёт уже есть в шапке матча */
.md-tracker-panel .atk-scorebar { display: none; }
/* в стате ТРЕКЕРА прячем табы (там только Match, без периодов) — старую стату НЕ трогаем */
.atk-stats-box .ms-tabs { display: none; }
.atk-clock { font-style: normal; font-size: 12px; color: #8b949e; font-weight: 600; }
.atk-poss {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: #e80123;
  background: var(--accent-red, #e80123);
  margin: 6px 0 10px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.atk-poss > div { height: 100%; background: #0A84FF; background: var(--accent-blue, #0A84FF); transition: width .6s ease; }
.atk-xg {
  text-align: center;
  font-size: 11px;
  color: #8b949e;
  margin: -2px 0 8px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.atk-pitch-wrap {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  container-type: inline-size; /* шрифты внутри (clock/центр-текст) считаем в cqw — от ширины ВИДЖЕТА, а не экрана */
  overflow: hidden;            /* для слайда стата-панели (свайп) — прячем уехавшую за край */
}
/* свайп-режим (мобилка): браузер обрабатывает ТОЛЬКО вертикальный скролл (pan-y), горизонтальный жест отдаём нам — не дёргает страницу */
.atk-swipeable { touch-action: pan-y; }
.atk-pitch {
  width: 100%;
  display: block;
}
/* стата-панель поверх поля (тот же дизайн, что md-charts-panel → MatchStatsPanel) */
.atk-stats-box {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2px;
  background: #12161f;
  background: var(--bg-card, #12161f); /* фон от темы; тексты/иконки блока адаптируются через --white-* переменные */
  transform: translateX(100%); /* по умолчанию уехала вправо за край; слайд по statView (JS) */
  will-change: transform;
}
.atk-bars-box { z-index: 6; } /* бары — верхний слой, поверх красивого блока */
.atk-board-box { padding: 0; justify-content: center; } /* блок заполняет площадь поля целиком */
.atk-board-box .lsb { width: 100%; height: 100%; }
.atk-stats-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: rgba(0, 0, 0, .15);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.atk-stats-toggle svg { width: 16px; height: 16px; }
.atk-stats-toggle:hover { background: rgba(0, 0, 0, .35); }
/* на десктопе (мышь) кнопка мешает → показываем только при наведении на поле */
@media (hover: hover) {
  .atk-stats-toggle { opacity: 0; transition: opacity .18s ease; }
  .atk-pitch-wrap:hover .atk-stats-toggle { opacity: 1; }
}

/* десктоп: 3 отдельные кнопки навигации (поле / стат-блок / бары) столбиком справа-сверху — как у тенниса (tt-navbtns) */
.atk-navbtns { position: absolute; top: 8px; right: 8px; z-index: 7; display: flex; flex-direction: column; gap: 5px; }
.atk-navbtn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; padding: 0;
  border: none; border-radius: 5px; background: rgba(0, 0, 0, .15); color: #fff; cursor: pointer; opacity: .6;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.atk-navbtn.active { opacity: 1; background: rgba(0, 0, 0, .42); }
.atk-navbtn svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .atk-navbtns { opacity: 0; transition: opacity .18s ease; }
  .atk-pitch-wrap:hover .atk-navbtns { opacity: 1; }
}

/* «Reconnecting…» — данные провайдера застыли: мягкий оверлей со спиннером поверх замёрзшего мультика (поле видно приглушённо) */
.atk-reconnect {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; pointer-events: none;
  background: rgba(8, 18, 13, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border-radius: 2px; animation: atk-rc-in .25s ease;
}
@keyframes atk-rc-in { from { opacity: 0; } to { opacity: 1; } }
.atk-reconnect-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .22); border-top-color: #fff;
  animation: atk-rc-spin .8s linear infinite;
}
@keyframes atk-rc-spin { to { transform: rotate(360deg); } }
.atk-reconnect-txt {
  font-size: 13px; font-weight: 700; letter-spacing: .4px; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6); animation: atk-rc-pulse 1.4s ease-in-out infinite;
}
@keyframes atk-rc-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* стата трекера наследует стиль сайдбара (.sidebar-stats-panel) через MatchStatsModal.css — идентичные бары */
.atk-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
/* бейдж стандарта (аут/штраф/угловой) при оптическом трекинге — под минутой, по центру, акцент цветом команды */
.atk-setpiece {
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(9px, 2.6cqw, 12px);
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  background: rgba(13, 17, 23, 0.66);
  padding: 2px 9px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 3;
  animation: atk-sp-in 0.18s ease-out both;
}
.atk-sp-kind { color: #fff; }
.atk-sp-team { font-weight: 800; }
.atk-setpiece-h { box-shadow: inset 0 0 0 1px rgba(121, 192, 255, 0.5); }
.atk-setpiece-a { box-shadow: inset 0 0 0 1px rgba(255, 138, 138, 0.5); }
.atk-setpiece-h .atk-sp-team { color: #79c0ff; }
.atk-setpiece-a .atk-sp-team { color: #ff8a8a; }
@keyframes atk-sp-in { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }

.atk-clock-badge {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgb(230, 237, 243);
  font-size: clamp(9px, 2.6cqw, 12px);
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  pointer-events: none;
  background: rgba(33, 38, 45, 0.35);
  padding: 1px 7px;
  border-radius: 2px;
  white-space: nowrap;
}
/* добавочное время (timer.ta) — красным рядом с часами, секунды основного таймера НЕ теряем */
.atk-addtime {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #ff5a5a;
  font-weight: 800;
}
.atk-addtime svg { display: block; }
.atk-cc { animation: atk-pop .28s ease; display: inline-block; }
.atk-cc-h { text-align: right; border-right: 4px solid #0A84FF; border-right: 4px solid var(--accent-blue, #0A84FF); padding-right: 9px; }
.atk-cc-a { text-align: left; border-left: 4px solid #e80123; border-left: 4px solid var(--accent-red, #e80123); padding-left: 9px; }
/* ВСЕ событийные бейджи (давление + стандарты/удары/фолы/сейвы/угловые) — поднимаем на ОДИН уровень выше центра, чтобы не перекрывали остриё стрелки И мяч (на штрафном/по позиции мяч в центре) */
.atk-cc-attack, .atk-cc-danger, .atk-cc-pass, .atk-cc-safe, .atk-cc-shot, .atk-cc-corner, .atk-cc-restart, .atk-cc-freekick, .atk-cc-foul, .atk-cc-save { animation: none; transform: translateY(clamp(-46px, -11cqw, -26px)); }
.atk-cc-goalbig { text-align: center; animation: atk-goalpop .35s cubic-bezier(.2, 1.4, .4, 1); }
.atk-goalbig-seq { animation: atk-goalpop .4s cubic-bezier(.2, 1.4, .4, 1) .6s both; }
.atk-goal-intro { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.atk-goal-ball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(30px, 11cqw, 56px);
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .8));
  animation: atk-ball-in .7s forwards;
}
@keyframes atk-ball-in {
  0% { transform: translate(-50%, -230%) scale(.12); opacity: 0; animation-timing-function: cubic-bezier(.15, .75, .3, 1); }
  40% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; animation-timing-function: linear; }
  100% { transform: translate(-50%, -50%) scale(6.5); opacity: 0; }
}
.atk-cc-cardbig { text-align: center; animation: atk-goalpop .35s cubic-bezier(.2, 1.4, .4, 1); }
.atk-card-svg { width: clamp(30px, 9cqw, 48px); height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .85)); }
/* карточка/удаление/замена/травма — ИКОНКА СЛЕВА, текст (2 строки) справа, в высоту иконки (чтобы не лезла на слайдер снизу) */
.atk-cc-cardrow { display: flex; flex-direction: row; align-items: center; gap: 11px; text-align: left; }
.atk-cc-cardrow .atk-card-svg { width: auto; height: clamp(36px, 12cqw, 56px); flex-shrink: 0; }
.atk-cc-cardtext { display: flex; flex-direction: column; align-items: flex-start; }
.atk-cc-cardrow .atk-cc-evlabel { margin-top: 0; line-height: 1.05; }
.atk-cc-cardrow .atk-cc-goalteam { margin-top: 2px; }
.atk-cc-goalword {
  font-size: clamp(26px, 9cqw, 46px);
  font-weight: 900;
  color: #ffd11a;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9), 0 0 22px rgba(0, 0, 0, .55);
}
.atk-cc-goalteam {
  font-size: clamp(13px, 3.8cqw, 18px);
  font-weight: 700;
  color: #fff;
  margin-top: 5px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
}
/* слово-название события под иконкой (карточка/удаление/замена/травма) — чтобы было не только иконкой */
.atk-cc-evlabel {
  font-size: clamp(14px, 4.4cqw, 21px);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 7px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
.atk-cc-evlabel + .atk-cc-goalteam { margin-top: 3px; color: #c9d1d9; color: var(--white-95, #c9d1d9); font-weight: 600; }
/* счёт после гола — крупные цифры, забившая въезжает слайдом сверху (спортивное табло) */
.atk-cc-scorebig { text-align: center; animation: atk-goalpop .3s cubic-bezier(.2, 1.4, .4, 1); }
.atk-scoreline { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2cqw, 14px); }
.atk-score-digit {
  display: inline-block; overflow: hidden;
  height: clamp(42px, 15cqw, 76px);
  font-size: clamp(42px, 15cqw, 76px);
  line-height: clamp(42px, 15cqw, 76px);
  font-weight: 900; color: #fff;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .45);
}
.atk-score-digit > span { display: block; }
.atk-score-new > span { animation: atk-score-slide .55s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes atk-score-slide {
  0% { transform: translateY(-115%); }
  62% { transform: translateY(9%); }
  100% { transform: translateY(0); }
}
.atk-score-colon { font-size: clamp(32px, 11cqw, 58px); font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 1px 5px rgba(0, 0, 0, .45); }
@keyframes atk-goalpop {
  0% { transform: scale(.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* коррекция счёта (откат ss) — большой текст, приглушённый (не радостное событие) */
.atk-cc-correction { font-size: clamp(18px, 6.4cqw, 34px); color: #c9d1d9; letter-spacing: 1px; }
.atk-cc-notstarted { color: #ffd11a; }  /* матч не начался — жёлтым (как перерыв) */
.atk-cc-kickoff { color: #ffd11a; }      /* первый свисток — жёлтым */
/* перерыв — большие жёлтые буквы по центру вместо зависшего бейджа */
.atk-cc-ht { text-align: center; animation: atk-goalpop .35s cubic-bezier(.2, 1.4, .4, 1); }
.atk-cc-htword {
  font-size: clamp(24px, 8.5cqw, 44px);
  font-weight: 900;
  color: #ffd11a;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9), 0 0 22px rgba(0, 0, 0, .55);
}
/* VAR-проверка — крупный бейдж по центру (как перерыв), но «телевизионным» белым в рамке и чуть меньше */
.atk-cc-var {
  color: #fff;
  font-size: clamp(16px, 5.8cqw, 30px);
  letter-spacing: 3px;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 3px 12px;
  background: rgba(0, 0, 0, .45);
}
.atk-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
  opacity: 0;
  animation: atk-flash-anim .42s ease-out .52s;
}
@keyframes atk-flash-anim {
  0% { opacity: 1; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}
/* сцена события (мяч/линия/траектория) — плавно появляется, висит до след. апдейта */
.atk-scene { animation: atk-scene-in .28s ease-out both; }
@keyframes atk-scene-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* траектория углового / комета пенальти / фри-кика мягко пульсируют прозрачностью — «ожидание» */
.atk-corner-traj, .atk-comet-pulse { animation: atk-corner-wait 1.7s ease-in-out infinite; }
@keyframes atk-corner-wait {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
/* комета стандарта от РЕАЛЬНОГО мяча (фрикик/аут/угловой/голкик): МЯГКИЙ непрерывный пульс прозрачностью, БЕЗ скачка/моргания.
   key постоянный → при повторном стандарте комета не пересоздаётся, пульс не сбрасывается (юзер: чтоб не моргала). */
.atk-sp-comet { animation: atk-sp-comet-pulse 1.7s ease-in-out infinite; }
@keyframes atk-sp-comet-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* удар (всё на CSS, рестарт по key={current.id}): мяч летит translate'ом, комета-хвост открывается clip-path'ом ровно за ним.
   Первичный СТОП 1с: мяч появляется на старте (fill:both держит 0% кадр во время delay), замирает, потом летит — наглядно */
.atk-shot-ball { animation: atk-shot-fly .35s linear 1s both; }
@keyframes atk-shot-fly {
  0% { transform: translate(var(--p0x), var(--p0y)); }
  25% { transform: translate(var(--p1x), var(--p1y)); }
  50% { transform: translate(var(--p2x), var(--p2y)); }
  75% { transform: translate(var(--p3x), var(--p3y)); }
  100% { transform: translate(var(--p4x), var(--p4y)); }
}
.atk-shot-trail { animation-duration: .35s; animation-delay: 1s; animation-timing-function: linear; animation-fill-mode: both; }
.atk-shot-trail-left { animation-name: atk-trail-rev-l; }
.atk-shot-trail-right { animation-name: atk-trail-rev-r; }
/* инсет в px = от края bbox трейла (дом R=288.5 / гость L=11.5) до позиции мяча по той же дуге → край кометы строго на мяче на каждом кадре */
@keyframes atk-trail-rev-l {  /* дом: открываем слева направо (инсет справа) */
  0% { clip-path: inset(-80px 44.5px -80px -80px); }
  25% { clip-path: inset(-80px 37.25px -80px -80px); }
  50% { clip-path: inset(-80px 26.5px -80px -80px); }
  75% { clip-path: inset(-80px 12.25px -80px -80px); }
  100% { clip-path: inset(-80px -5.5px -80px -80px); }
}
@keyframes atk-trail-rev-r {  /* гость: открываем справа налево (инсет слева) */
  0% { clip-path: inset(-80px -80px -80px 44.5px); }
  25% { clip-path: inset(-80px -80px -80px 37.25px); }
  50% { clip-path: inset(-80px -80px -80px 26.5px); }
  75% { clip-path: inset(-80px -80px -80px 12.25px); }
  100% { clip-path: inset(-80px -80px -80px -5.5px); }
}
/* гол: мяч ВЛЕТАЕТ в ворота рывком, три кометы-полоски вспыхивают за ним («бум, залетел») */
.atk-goal-ball-fly { animation-duration: .24s; animation-timing-function: cubic-bezier(.35, .7, .25, 1); animation-fill-mode: both; }
.atk-goal-ball-h { animation-name: atk-goal-fly-h; }
.atk-goal-ball-a { animation-name: atk-goal-fly-a; }
@keyframes atk-goal-fly-h { from { transform: translateX(-34px); } to { transform: translateX(0); } }
@keyframes atk-goal-fly-a { from { transform: translateX(34px); } to { transform: translateX(0); } }
.atk-goal-trail { animation: atk-goal-trail-in .28s ease-out both; }
@keyframes atk-goal-trail-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }  /* вспыхивают ПОСЛЕ влёта мяча */
/* угловой: ПОДАЧА — мяч летит от флажка по дуге в штрафную (доигрывание перед сменой сцены), к концу гаснет */
.atk-corner-kick-h { animation: atk-corner-pass-h .55s linear both; }
.atk-corner-kick-a { animation: atk-corner-pass-a .55s linear both; }
/* полёт по ДУГЕ траектории (точки реальной дуги atk-corner-traj): мяч уходит вбок вверху и загибается вниз в штрафную */
@keyframes atk-corner-pass-h {  /* флажок (294,6) → дуга → штрафная (~272,57) */
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 4px); }
  45% { transform: translate(-18px, 16px); }
  70% { transform: translate(-22px, 33px); }
  100% { transform: translate(-22px, 51px); opacity: .3; }
}
@keyframes atk-corner-pass-a {  /* флажок (6,6) → дуга → штрафная (~27,57) */
  0% { transform: translate(0, 0); }
  20% { transform: translate(4px, 4px); }
  45% { transform: translate(18px, 16px); }
  70% { transform: translate(22px, 33px); }
  100% { transform: translate(22px, 51px); opacity: .3; }
}
.atk-cc-team {
  font-size: clamp(14px, 4.2cqw, 20px);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8), 0 0 18px rgba(0, 0, 0, .5);
}
.atk-cc-act {
  font-size: clamp(11px, 3.1cqw, 14px);
  font-weight: 500;
  margin-top: 3px;
  color: #fff;
  text-shadow: 0 1px 9px rgba(0, 0, 0, .8), 0 0 16px rgba(0, 0, 0, .5);
}
.atk-feed {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.atk-ev {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 94%;
  padding: 2px 9px;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.5;
  background: rgba(13, 17, 23, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left-width: 3px;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  animation: atk-pop .28s ease;
}
.atk-ev-h { border-left-color: #0A84FF; border-left-color: var(--accent-blue, #0A84FF); }
.atk-ev-a { border-left-color: #f7733a; }
.atk-ev-team {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.atk-ev-act { color: #c9d1d9; white-space: nowrap; }
.atk-ev-danger .atk-ev-act { color: #ff6b6b; font-weight: 700; }
.atk-ev-shot .atk-ev-act { color: #79c0ff; }
.atk-ev-save .atk-ev-act { color: #56d364; }
.atk-ev-card .atk-ev-act { color: #f2cc60; font-weight: 700; }
.atk-ev-safe .atk-ev-act { color: #8b949e; }
.atk-ev-goal {
  background: rgba(63, 185, 80, 0.9);
  border-color: #3fb950;
}
.atk-ev-goal .atk-ev-team, .atk-ev-goal .atk-ev-act { color: #fff; font-weight: 800; }
@keyframes atk-pop {
  from { transform: translateY(-7px); opacity: 0; }
  to { transform: none; }
}
.atk-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin: 12px auto 0;
  max-width: 520px;
}
.atk-cell {
  background: #161b22;
  background: var(--admin-bg-card, #161b22);
  border: 1px solid #30363d;
  border: 1px solid var(--admin-border, #30363d);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.atk-v {
  font-size: 17px;
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: #e6edf3;
  color: var(--admin-text-primary, #e6edf3);
}
.atk-l {
  font-size: 10px;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}
.atk-testbtn {
  font-size: 11px;
  font-weight: 600;
  color: #d2a8ff;
  background: rgba(163, 113, 247, 0.12);
  border: 1px solid rgba(163, 113, 247, 0.4);
  padding: 2px 9px;
  border-radius: 10px;
  cursor: pointer;
}
.atk-test { max-width: 520px; margin: 14px auto 0; }
.atk-test-side { display: flex; gap: 8px; margin-bottom: 8px; }
.atk-test-side button {
  flex: 1 1;
  padding: 7px;
  background: #21262d;
  background: var(--admin-bg-input, #21262d);
  border: 1px solid #30363d;
  border: 1px solid var(--admin-border, #30363d);
  border-radius: 6px;
  color: #8b949e;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.atk-test-side button.atk-ts-on { color: #fff; border-color: #58a6ff; background: rgba(88, 166, 255, 0.12); }
.atk-test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); grid-gap: 6px; gap: 6px; }
.atk-test-ev {
  padding: 7px 8px;
  background: #161b22;
  background: var(--admin-bg-card, #161b22);
  border: 1px solid #30363d;
  border: 1px solid var(--admin-border, #30363d);
  border-radius: 6px;
  color: #e6edf3;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.atk-test-ev:hover { border-color: #58a6ff; }
.atk-raw { max-width: 520px; margin: 16px auto 0; }
.atk-raw-head {
  font-size: 10px;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.atk-raw-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4px 10px; gap: 4px 10px; }
.atk-raw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 9px;
  border-radius: 5px;
  background: #161b22;
  background: var(--admin-bg-card, #161b22);
  border: 1px solid #30363d;
  border: 1px solid var(--admin-border, #30363d);
  font-size: 12px;
  transition: background .6s ease, border-color .6s ease;
}
.atk-raw-k { color: #8b949e; }
.atk-raw-v { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 700; color: #e6edf3; }
.atk-raw-v i { color: #6e7681; font-style: normal; padding: 0 3px; }
.atk-raw-hot {
  background: rgba(88, 166, 255, 0.22);
  border-color: #58a6ff;
}

/* дебаг-панель (админка): пульс фетча + лента показанных (сыгранные сереют, текущий зелёный) + очередь ждущих */
.atk-qview { margin-top: 8px; font-size: 12px; display: flex; flex-direction: column; gap: 5px; }
.atk-qrow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.atk-qlbl { color: #8b949e; color: var(--text-secondary, #8b949e); font-weight: 600; min-width: 62px; }
.atk-qview-empty { color: #6e7681; font-style: italic; }
.atk-qchip {
  padding: 2px 8px; border-radius: 10px; font-size: 11px; white-space: nowrap;
  border: 1px solid transparent; animation: atk-qchip-in .18s ease;
}
.atk-qchip.now { background: rgba(63, 185, 80, .18); border-color: rgba(63, 185, 80, .55); color: #3fb950; font-weight: 700; }
.atk-qchip.done { background: rgba(110, 118, 129, .12); color: #8b949e; }            /* сыграл → серый */
.atk-qchip.wait { background: rgba(47, 129, 247, .15); border-color: rgba(47, 129, 247, .4); color: #58a6ff; } /* ждёт → синий */
.atk-qchip.prio { background: rgba(210, 153, 34, .18); border-color: rgba(210, 153, 34, .5); color: #ffd11a; }  /* приоритет → жёлтый */
@keyframes atk-qchip-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
/* пульс фетча */
.atk-pulse { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: #8b949e; color: var(--text-secondary, #8b949e); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.atk-pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #3fb950; flex-shrink: 0; animation: atk-pulse-flash .9s ease-out; }
@keyframes atk-pulse-flash { 0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, .7); transform: scale(1.5); } 100% { box-shadow: 0 0 0 7px rgba(63, 185, 80, 0); transform: scale(1); } }
.atk-pulse-seg b { color: #e6edf3; color: var(--white-95, #e6edf3); font-weight: 700; }
.atk-pulse-seg.data b { color: #3fb950; }
.atk-pulse-seg.data { animation: atk-data-flash .6s ease-out; } /* вспышка ТОЛЬКО когда ЭТОТ матч обновился */
@keyframes atk-data-flash { 0% { color: #3fb950; } 100% { color: #8b949e; color: var(--text-secondary, #8b949e); } }
.atk-pulse-mut { opacity: .55; font-size: 10px; }
.atk-pulse-sep { color: #30363d; }

/* мини стат-бар снизу поля (выезжает при статовом событии): слайд слева → стоит ~4.5с → уезжает вправо */
.atk-statbar {
  position: absolute;
  left: 8px; right: 8px; bottom: 7px;
  z-index: 4;
  /* фон/подложка убраны (юзер смотрит без них) — читаемость держим тенями на цифрах/полоске */
  padding: 4px 10px 6px;
  animation: atk-statbar-cycle 5.5s ease both;
}
@keyframes atk-statbar-cycle {
  0% { transform: translateX(-112%); opacity: 0; }
  7% { transform: translateX(0); opacity: 1; }
  88% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(116%); opacity: 0; }
}
.atk-sb-label {
  text-align: center; font-size: clamp(9px, 2.5cqw, 11px); font-weight: 700;
  color: #fff; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.atk-sb-row { display: flex; align-items: center; gap: 8px; }
/* цифры белые (как в DevTools у юзера), тень минимальная (была слишком размытая) */
.atk-sb-val { font-size: clamp(15px, 4.5cqw, 22px); font-weight: 800; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; min-width: 24px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .75); }
.atk-sb-h { text-align: left; }
.atk-sb-a { text-align: right; }
/* цвета бара = те же, что в стат-панели (var --accent-blue/red): тёмно-синий #0A84FF и красный #e80123, НЕ розоватый */
.atk-sb-track { flex: 1 1; height: 5px; border-radius: 3px; background: #e80123; background: var(--accent-red, #e80123); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.atk-sb-fill { height: 100%; background: #0A84FF; background: var(--accent-blue, #0A84FF); border-radius: 3px; transition: width .4s ease; }

/* «Красивый» постоянный стат-блок трекера (кольца + полосы + карточки). Размеры в px viewBox (300×150). */
.lsb {
  display: block;
  width: 100%;
  height: 100%;
  /* currentColor для иконок/флага (стрелки, %, угловой) — тянется отсюда, адаптивно к теме */
  color: #fff;
  color: var(--white-95, #fff);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.lsb text { dominant-baseline: alphabetic; }
/* fill всех текстов/иконок — через тема-адаптивные --white-* (тёмная тема → белый, светлая → тёмный) */
.lsb-lbl { fill: #fff; fill: var(--white-95, #fff); font-size: 8px; font-weight: 700; letter-spacing: 0.2px; }
.lsb-num { fill: #fff; fill: var(--white-95, #fff); font-size: 10px; font-weight: 700; }
.lsb-cap { fill: #9fb2c4; fill: var(--white-50, #9fb2c4); font-size: 7px; font-weight: 700; letter-spacing: 0.2px; }
.lsb-bnum { fill: #fff; fill: var(--white-95, #fff); font-size: 8px; font-weight: 700; }
.lsb-cnum { fill: #fff; fill: var(--white-95, #fff); font-size: 7.5px; font-weight: 700; }

/* Play-by-play лента тенниса (FlashScore-style). Тема-адаптив через --white-*; container-type для cqw. */
.tpbp {
  width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #fff;
  color: var(--white-95, #fff); container-type: inline-size;
}
.tpbp-empty { padding: 24px; text-align: center; color: #9fb2c4; color: var(--white-50, #9fb2c4); font-size: 13px; }
.tpbp-tabs { display: flex; gap: 4px; padding: 6px 8px 4px; flex: none; }
.tpbp-tab {
  flex: 1 1; padding: 4px 6px; font-size: clamp(9px, 2.6cqw, 12px); font-weight: 700; cursor: pointer;
  background: rgba(255, 255, 255, .06);
  background: var(--white-08, rgba(255, 255, 255, .06)); color: #9fb2c4; color: var(--white-50, #9fb2c4); border: none; border-radius: 4px;
}
.tpbp-tab.active { background: rgba(255, 255, 255, .14); background: var(--white-15, rgba(255, 255, 255, .14)); color: #fff; color: var(--white-95, #fff); }
.tpbp-title { text-align: center; font-size: clamp(8px, 2.3cqw, 10px); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #9fb2c4; color: var(--white-50, #9fb2c4); padding: 2px 0 4px; flex: none; }
.tpbp-scroll { flex: 1 1; overflow-y: auto; overflow-x: hidden; padding: 0 8px 8px; }
.tpbp-game { padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid var(--white-08, rgba(255, 255, 255, .06)); }
/* счёт геймов ПО ЦЕНТРУ; LOST SERVE / TIE-BREAK — absolute сбоку, счёт не сдвигают */
.tpbp-grow { position: relative; display: flex; align-items: center; justify-content: center; min-height: 20px; }
.tpbp-core { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(12px, 3.4cqw, 16px); font-weight: 700; }
.tpbp-srv { width: 9px; color: #F7BE0F; font-size: .78em; text-align: center; }
.tpbp-gh, .tpbp-ga { color: #fff; color: var(--white-95, #fff); min-width: 11px; text-align: center; } /* счёт — главный белый, адаптив к теме */
.tpbp-gh.win, .tpbp-ga.win { color: #E80123; }
.tpbp-dash { color: rgba(255, 255, 255, .3); color: var(--white-30, rgba(255, 255, 255, .3)); }
.tpbp-side { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: clamp(7px, 2cqw, 9px); font-weight: 800; padding: 1px 5px; border-radius: 3px; letter-spacing: .3px; white-space: nowrap; }
.tpbp-lost { color: #fff; background: #c01029; }
.tpbp-tb { color: #fff; color: var(--white-95, #fff); background: rgba(255, 255, 255, .14); background: var(--white-15, rgba(255, 255, 255, .14)); }
/* очки — переносятся на новую строку, если гейм длинный (не горизонтальный скролл) */
.tpbp-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1px; text-align: center; font-size: clamp(9px, 2.5cqw, 11px); color: rgba(255, 255, 255, .7); color: var(--white-70, rgba(255, 255, 255, .7)); margin-top: 3px; line-height: 1.7; }
.tpbp-pt { white-space: nowrap; }
/* достроенные очки (фид Фонбета терял матч на минуту, восстановлены по однозначному скачку) — приглушены */
.tpbp-filled { opacity: .45; }
/* тай-брейк: очки построчно, мяч у подающего (подача чередуется) */
.tpbp-tbpoints { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 3px; }
.tpbp-tbrow { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: clamp(10px, 2.8cqw, 13px); color: #fff; color: var(--white-95, #fff); }
.tpbp-tbscore { min-width: 30px; text-align: center; font-weight: 600; }
/* боковые слоты тай-брейка (ACE/DF/lost serve со стороны подающего): симметричные → счёт остаётся ровно по центру */
.tpbp-tbls { width: 50px; flex: none; display: flex; align-items: center; justify-content: center; }
.tpbp-tbtag { font-size: .6em; font-weight: 800; letter-spacing: .2px; text-transform: uppercase; white-space: nowrap; line-height: 1.4; }
.tpbp-tblost { color: #d8455a; }
.tpbp-tbace { padding: 0 3px; border-radius: 2px; background: #F7BE0F; color: #000; }
.tpbp-tbdf { padding: 0 3px; border-radius: 2px; background: #888; color: #fff; }
.tpbp-b { font-size: .82em; font-weight: 800; padding: 0 3px; border-radius: 2px; margin-left: 2px; color: #fff; }
.tpbp-ace { background: #F7BE0F; color: #000; }
.tpbp-df { background: #888; }
.tpbp-bp { background: #777; } /* брейк-пойнт — серый */
.tpbp-sp { background: #0A84FF; } /* сет-пойнт — синий */

/* Теннис-мультик: корт + мячик подающего. Дизайн сцен/слайдера/счёта — общий с футболом (LiveTracker). */
.tt-root {
  max-width: 520px;
  margin: 0 auto;
  container-type: inline-size; /* футбольные сцены считают шрифт в cqw — от ширины виджета */
}
.tt-wrap {
  position: relative;
  container-type: inline-size; /* и на самом корте — для cqw сцен/счёта внутри */
  overflow: hidden; /* стат-слой (atk-stats-box) уезжает за правый край — прячем; как у футбольного .atk-pitch-wrap */
  border-radius: 2px;
}
.tt {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
/* мяч ПОДАЁТ: чистая дуга задаётся SVG <animateMotion> в JSX (квадратичная кривая Безье — без изломов).
   комета: tt-trail — отстающие размытые копии мяча (motion-blur хвост); прозрачность задаёт SMIL <animate opacity>. */
.tt-trail { pointer-events: none; }
.tt-trail-1 { filter: blur(.5px); }
.tt-trail-2 { filter: blur(1.1px); }

/* счёт: двоеточие ВСЕГДА по центру корта, цифры по бокам (разная ширина цифр не сдвигает двоеточие).
   top:0 + line-height:1 на всех — чтобы двоеточие и цифры были на одной линии (не висело выше). */
.tt-scoreline { position: relative; height: 1em; line-height: 1; }
.tt-sc-colon { position: absolute; left: 50.33%; top: 0; transform: translateX(-50%); line-height: 1; } /* ровно на центр-линии корта (x=151) */
.tt-sc-h { position: absolute; right: 49.67%; top: 0; padding-right: 0.42em; text-align: right; line-height: 1; }
.tt-sc-a { position: absolute; left: 50.33%; top: 0; padding-left: 0.42em; text-align: left; line-height: 1; }

/* подпись (ACE/GAME/SET) — absolute НАД счётом, чтобы НЕ смещала счёт вниз: счёт остаётся по центру корта */
.tt-wrap .atk-cc-scorebig { position: relative; }
.tt-score-label {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; white-space: nowrap;
  font-size: clamp(11px, 3.4cqw, 17px); font-weight: 800; letter-spacing: 1px;
  color: #fff;
  color: var(--white-95, #fff); text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* контекст «2 set · game 7» — бейджик по ЦЕНТРУ СВЕРХУ, как футбольная минута (atk-clock-badge): полупрозрачный фон, желтоватый текст, тонкий */
.tt-ctx {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  font-size: clamp(8px, 2.3cqw, 11px); font-weight: 600; letter-spacing: 0.03em; white-space: nowrap;
  color: rgba(247, 209, 26, 0.92);
  background: rgba(33, 38, 45, 0.38); padding: 1px 8px; border-radius: 2px;
}
/* брейк-пойнт / сет-пойнт — бейдж по центру под контекстом (SP синий, BP красный). Без пульсации, ниже линии аута. */
.tt-bpsp {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  font-size: clamp(11px, 3.3cqw, 16px); font-weight: 800; letter-spacing: 0.6px; white-space: nowrap;
  color: #fff; padding: 3px 11px; border-radius: 3px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.tt-bpsp-bp { background: #E80123; }
.tt-bpsp-sp { background: #0A84FF; }
/* бейджик подающего: чёрточка (синяя home / красная away) + имя + Serve. Без фона (читаем через тень).
   Левый игрок (home) — НИЖЕ нижней линии аута; правый (away) — ВЫШЕ верхней линии аута (не на линии). */
.tt-serve-badge {
  position: absolute; z-index: 4; pointer-events: none; display: flex; align-items: stretch; gap: 5px;
  font-size: clamp(11px, 3.6cqw, 18px); color: #fff; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.tt-serve-badge-h { top: 14%; left: 8px; }     /* левый (home) — наверху, НИЖЕ верхней линии аута (в поле) */
.tt-serve-badge-a { bottom: 16%; right: 8px; } /* правый (away) — внизу, ВЫШЕ нижней линии аута (в поле) */
.tt-serve-bar { width: 4px; border-radius: 2px; flex: none; }
.tt-serve-badge-h .tt-serve-bar { background: #0A84FF; }
.tt-serve-badge-a .tt-serve-bar { background: #E80123; }
.tt-serve-txt { display: flex; flex-direction: column; line-height: 1.15; }
.tt-serve-name { font-weight: 700; }
.tt-serve-lbl { font-size: 0.78em; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.4px; }
/* теннис: счёт мельче футбольного (у футбола счёт после гола очень крупный); line-height:1 — двоеточие на линии цифр */
.tt-wrap .atk-score-digit,
.tt-wrap .atk-score-colon { font-size: clamp(20px, 7.5cqw, 38px); line-height: 1; }
.tt-wrap .atk-score-colon { text-shadow: none; } /* у двоеточия убираем крупную футбольную тень */

/* плавная смена цифры: при изменении значения новая цифра въезжает сверху (slide), блок НЕ пересоздаётся → нет «прыжка»/двух счётов */
.tt-sc-h, .tt-sc-a { overflow: hidden; }
.tt-digit { display: inline-block; animation: tt-digit-in .55s cubic-bezier(.2, .85, .3, 1) both; }
@keyframes tt-digit-in { from { transform: translateY(-85%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ЭЙС: жёлтая вспышка по всему виджету (под текстом — atk-center идёт позже в DOM) + крупное жёлтое ACE с «попом» */
.tt-flash {
  position: absolute; inset: 0; pointer-events: none; border-radius: 2px;
  background: radial-gradient(circle at 50% 45%, rgba(247, 209, 26, .6), rgba(247, 209, 26, .12) 70%);
  animation: tt-flash .6s ease-out forwards;
}
@keyframes tt-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.tt-ace-word {
  color: #F7BE0F !important;
  font-size: clamp(17px, 6.6cqw, 34px); white-space: nowrap; /* чтобы и короткое ACE, и длинное DOUBLE FAULT влезали в строку */
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6), 0 0 20px rgba(247, 209, 26, .75);
  animation: tt-ace-pop .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes tt-ace-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Стат-слой/кнопка/тема/свайп — переиспользуем футбольные классы (atk-stats-box, atk-board-box, atk-stats-toggle,
   atk-swipeable) из LiveTracker.css, кольца/числа — lsb-* из LiveStatBoard.css.
   Футбольное hover-правило завязано на .atk-pitch-wrap → дублируем для нашего контейнера .tt-wrap. */
@media (hover: hover) {
  .tt-wrap:hover .atk-stats-toggle { opacity: 1; }
}

/* play-by-play слой (3-й экран) — лента сверху вниз, без центрирования */
.tt-pbp-box { padding: 0; justify-content: flex-start; }

/* десктоп: 3 отдельные кнопки навигации (корт / бары / point-by-point) столбиком справа-сверху */
.tt-navbtns { position: absolute; top: 8px; right: 8px; z-index: 7; display: flex; flex-direction: column; gap: 5px; }
.tt-navbtn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; padding: 0;
  border: none; border-radius: 5px; background: rgba(0, 0, 0, .15); color: #fff; cursor: pointer; opacity: .6;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.tt-navbtn.active { opacity: 1; background: rgba(0, 0, 0, .42); }
.tt-navbtn svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .tt-navbtns { opacity: 0; transition: opacity .18s ease; }
  .tt-wrap:hover .tt-navbtns { opacity: 1; }
}

/* Stats panel docked above the betslip in the desktop right sidebar */
.sidebar-stats-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-height: 200px;
  margin: 0 10px 10px;
  background: var(--bg-secondary);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  padding-bottom: 15px;
}

.sidebar-stats-teams {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 2px;
  flex-shrink: 0;
  background: var(--black-20);
}

.sidebar-stats-team {
  font-size: 10px;
  font-weight: 500;
  color: var(--white-95);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-stats-team-away {
  text-align: right;
}

/* 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);
    display: flex;
    flex-direction: column;
  }
  /* When the stats panel is open it takes its own height; the betslip fills the rest
     and scrolls internally instead of pushing/scrolling the whole sidebar. */
  .desktop-right-sidebar > .side-bet-slip-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  .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;
  box-shadow: 0 1px 0 0 var(--bg-primary); /* cover Android sub-pixel sticky gap */
}

/* Скрываем скроллбар глобально, но не ломаем прокрутку */
* {
  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); }