/* ===== Fonts ===== */
@font-face {
  font-family: "Gilroy";
  src: url("/static/fonts/Gilroy-Regular.5c8b9323.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/static/fonts/Gilroy-Medium.eed193c7.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/static/fonts/Gilroy-SemiBold.5095fde7.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/static/fonts/Gilroy-Bold.0f19cd2e.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/static/fonts/Gilroy-Black.9902b097.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ===== Tokens (BetBoom palette: pure black + lime-yellow) ===== */
:root {
  --bg: #000000;
  --bg-1: #0a0c10;
  --bg-card: #14161c;
  --bg-card-2: #1a1d25;
  --bg-soft: #1f232c;
  --border: #1f2330;
  --text: #ffffff;
  --text-dim: #7a8090;
  --text-mute: #4d5260;
  --accent: #d3ff00;        /* lime yellow */
  --accent-hover: #c1ec00;
  --accent-ink: #0b0b00;
  --red: #ef4146;
  --green: #2ea043;
  --blue: #4e8cff;
  --radius: 10px;
  --radius-lg: 14px;
}

/* ===== Light theme overrides ===== */
.theme-light {
  --bg: #ffffff;
  --bg-1: #f5f6f8;
  --bg-card: #ffffff;
  --bg-card-2: #f5f6f8;
  --bg-soft: #eef0f4;
  --border: #e1e3e8;
  --text: #15171c;
  --text-dim: #6b7280;
  --text-mute: #9aa0aa;
}

/* Плавный переход при переключении темы */
body, .header, .footer, .promo-card, .sport247-card, .top-card,
.live-card, .lc-team .lc-name, .bb-coupon-panel, .bb-coupon-toggle,
.bb-coupon-item, .bb-coupon-modetabs, .footer-rating-card,
.board-side, .board-rows, .board-row, .br-odds .odd, .br-odds .odd-empty,
.br-odds .odd-more, .lc-odds .odd, .odds-form .odd, .chip, .sport-chip,
.btn, .btn-secondary, .form-field input, .form-field select,
.form-field textarea, #bb-coupon-stake, .auth-card, .prof-hero,
.balance-summary-card, .balance-card, .verif-status-card,
.support-item, .alert, .tx-table, .bet-table, .market-pill,
.status-pill, .empty, .footer-partner-logos img, .footer-payments img,
.bb-stake-template, .bb-radio-row, .bb-switch, .auth-tab,
.tabs a, .tabs, .top-scroll-btn, .promo-scroll-btn, .board-side-head,
.board-side-item, .board-side-search input, .footer-col a, .footer-sport-tabs a,
.footer-social a, .nav-main a, .logo, .language-switcher, .language-switcher button, .balance-chip, .user-menu summary,
input, select, textarea {
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, fill .25s ease, filter .25s ease;
}

/* Header / nav / logo */
.theme-light .header { background: #ffffff; border-bottom-color: #e1e3e8; }
.theme-light .logo .bet { color: #0b0b00; }
.theme-light .logo .demo-mark { background: #f0f2f5; color: #6b7280; }
.theme-light .nav-main a { color: #4b5260; }
.theme-light .nav-main a:hover,
.theme-light .nav-main a.is-active { color: #0b0b00; }
.theme-light .theme-toggle { background: #eef0f4; border-color: #e1e3e8; }
.theme-light .theme-toggle::before { background: #d3ff00; }
.theme-light .language-switcher { background: #eef0f4; border-color: #e1e3e8; }
.theme-light .language-switcher button { color: #6b7280; }
.theme-light .language-switcher button.is-active { background: #d3ff00; color: #0b0b00; }
.theme-light .balance-chip { background: #f0f2f5; border-color: #e1e3e8; color: #15171c; }
.theme-light .balance-chip small { color: #6b7280; }
.theme-light .user-menu summary { background: #f0f2f5; color: #15171c; }
.theme-light .user-menu-dropdown { background: #ffffff; border-color: #e1e3e8; box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.theme-light .user-menu-dropdown a,
.theme-light .user-menu-dropdown button { color: #15171c; }
.theme-light .user-menu-dropdown a:hover,
.theme-light .user-menu-dropdown button:hover { background: #f5f6f8; }

/* Карточки и панели — заливаем белым */
.theme-light .promo-card { background: #f5f6f8; }
.theme-light .sport247-card { background: #ffffff; border: 1px solid #e1e3e8; }
.theme-light .sport247-card:hover { background: #f5f6f8; }
.theme-light .sport247-card .text .name { color: #15171c; }

.theme-light .top-card { background: #ffffff; border-color: #e1e3e8; }
.theme-light .top-card:hover { border-color: #cdd1d8; }
.theme-light .top-card .league { color: #6b7280; }
.theme-light .top-card .team { color: #15171c; }
.theme-light .top-card .meta { border-top-color: #e1e3e8; color: #6b7280; }

.theme-light .live-card { background: #ffffff; border-color: #e1e3e8; }
.theme-light .live-card:hover { border-color: #cdd1d8; }
.theme-light .lc-league { color: #6b7280; }
.theme-light .lc-sport { color: #15171c; }
.theme-light .lc-name { color: #15171c; }
.theme-light .lc-foot { color: #9aa0aa; }

/* Кнопки коэф */
.theme-light .lc-odds .odd,
.theme-light .odds-form .odd,
.theme-light .br-odds .odd,
.theme-light .top-card .odds-form .odd {
  background: #f5f6f8; border-color: #e1e3e8; color: #15171c;
}
.theme-light .lc-odds .odd:hover,
.theme-light .odds-form .odd:hover,
.theme-light .br-odds .odd:hover,
.theme-light .top-card .odds-form .odd:hover {
  background: #eef0f4; color: #0b0b00; border-color: #d3ff00;
}
.theme-light .lc-odds .label,
.theme-light .odds-form .label,
.theme-light .br-odds .label { color: #6b7280; }
.theme-light .odd-empty { background: #f5f6f8 !important; color: #9aa0aa !important; border-color: #e1e3e8 !important; }
.theme-light .odd.is-picked,
.theme-light .lc-odds .odd.is-picked,
.theme-light .odds-form .odd.is-picked {
  background: var(--accent) !important; color: var(--accent-ink) !important;
}

/* Чипы фильтра / sport-chips */
.theme-light .chip { background: #ffffff; border-color: #e1e3e8; color: #15171c; }
.theme-light .chip:hover { border-color: #d3ff00; color: #0b0b00; }
.theme-light .sport-chip { background: #ffffff; border-color: #e1e3e8; color: #15171c; }
.theme-light .sport-chip:hover { border-color: #cdd1d8; }
.theme-light .sport-types a { color: #4b5260; }
.theme-light .sport-types a .ico-circle { background: #f0f2f5; }
.theme-light .sport-types a:hover .ico-circle { background: #eef0f4; }
.theme-light .sport-types a .ico-circle .i { color: #4b5260; }

/* Линия / Кибер: сайдбар */
.theme-light .board-side { background: #ffffff; border-color: #e1e3e8; }
.theme-light .board-side-search input { background: #f5f6f8; border-color: #e1e3e8; color: #15171c; }
.theme-light .board-side-search input::placeholder { color: #9aa0aa; }
.theme-light .board-side-head { background: #f5f6f8; color: #15171c; }
.theme-light .board-side-fav { background: #f5f6f8; color: #15171c; }
.theme-light .board-side-item { color: #4b5260; }
.theme-light .board-side-item:hover { background: #f5f6f8; color: #0b0b00; }
.theme-light .board-side-item.is-active { background: #f0f2f5; color: #0b0b00; }
.theme-light .board-side-item .c { background: #eef0f4; color: #6b7280; }
.theme-light .board-mode { background: #ffffff; border-color: #e1e3e8; color: #4b5260; }
.theme-light .board-mode.is-active { background: var(--accent); color: var(--accent-ink); }
.theme-light .board-group-head { background: #f5f6f8; border-color: #e1e3e8; }
.theme-light .board-group-head .g-name { color: #15171c; }
.theme-light .board-group-head .g-count { background: #eef0f4; color: #6b7280; }
.theme-light .board-rows { background: #ffffff; border-color: #e1e3e8; }
.theme-light .board-row { border-bottom-color: #e1e3e8; }
.theme-light .board-row:hover { background: #fafbfc; }
.theme-light .br-status { color: #6b7280; }
.theme-light .br-status .br-time { color: #15171c; }
.theme-light .br-name { color: #15171c; }
.theme-light .br-score { color: #9aa0aa; }
.theme-light .br-logo { background: linear-gradient(135deg, #cdd1d8, #b0b6c0); color: #ffffff; }

/* ===== Купон ===== */
.theme-light .bb-coupon-toggle { background: #ffffff; border-color: #e1e3e8; color: #15171c; }
.theme-light .bb-coupon:not(.has-items) .bb-coupon-count { background: #eef0f4; color: #6b7280; }
.theme-light .bb-coupon-panel { background: #ffffff; border-color: #e1e3e8; box-shadow: 0 24px 60px rgba(0,0,0,.08); }
.theme-light .bb-coupon-toptab { color: #6b7280; }
.theme-light .bb-coupon-toptab.is-active,
.theme-light .bb-coupon-toptab:hover { color: #15171c; }
.theme-light .bb-coupon-toptab:not(.is-active) .bb-coupon-count-pill { background: #eef0f4; color: #6b7280; }
.theme-light .bb-coupon-settings { color: #6b7280; }
.theme-light .bb-coupon-settings:hover { background: #f5f6f8; color: #0b0b00; }
.theme-light .bb-coupon-empty .icon { background: #f5f6f8; }
.theme-light .bb-coupon-empty .icon::before { border-color: #cdd1d8; }
.theme-light .bb-coupon-empty .title { color: #15171c; }
.theme-light .bb-coupon-modetabs { background: #f5f6f8; }
.theme-light .bb-coupon-modetab { color: #6b7280; }
.theme-light .bb-coupon-modetab:hover { color: #15171c; }
.theme-light .bb-coupon-item { background: #f5f6f8; }
.theme-light .bb-coupon-item-event { color: #15171c; }
.theme-light .bb-coupon-item-odds { color: #15171c; }
.theme-light .bb-coupon-clear-row { border-top-color: #e1e3e8; }
.theme-light .bb-coupon-total b { color: #15171c; }
.theme-light #bb-coupon-stake { background: #ffffff; border-color: #e1e3e8; color: #15171c; }
.theme-light .bb-coupon-row > strong { color: #15171c; }
.theme-light .bb-coupon-balance b { color: #15171c; }

/* Настройки купона */
.theme-light .bb-coupon-settings-back { color: #15171c; }
.theme-light .bb-coupon-settings-back:hover { background: #f5f6f8; }
.theme-light .bb-coupon-settings-head h3 { color: #15171c; }
.theme-light .bb-stake-template { background: #f5f6f8; }
.theme-light .bb-stake-template input { color: #15171c; }
.theme-light .bb-settings-add { background: #f0f2f5; }
.theme-light .bb-radio-row { background: #f5f6f8; }
.theme-light .bb-radio-row .bb-radio-dot { border-color: #cdd1d8; }
.theme-light .bb-radio-label { color: #15171c; }
.theme-light .bb-toggle-label { color: #15171c; }
.theme-light .bb-switch { background: #cdd1d8; }

/* Личный кабинет */
.theme-light .account-sidebar { background: #ffffff; border: 1px solid #e1e3e8; }
.theme-light .account-sidebar .who { border-bottom-color: #e1e3e8; }
.theme-light .account-sidebar nav a { color: #4b5260; }
.theme-light .account-sidebar nav a:hover { background: #f5f6f8; color: #0b0b00; }
.theme-light .account-sidebar nav a.is-active { background: #eef0f4; color: #0b0b00; }
.theme-light .account-main { background: #ffffff; border: 1px solid #e1e3e8; }
.theme-light .prof-hero { background: #f5f6f8; border-color: #e1e3e8; }
.theme-light .balance-summary-card { background: #f5f6f8; border-color: #e1e3e8; }
.theme-light .balance-card { background: #f5f6f8; border-color: #e1e3e8; }
.theme-light .balance-card-head { border-bottom-color: #e1e3e8; }
.theme-light .verif-status-card { background: #f5f6f8; border-color: #e1e3e8; }
.theme-light .support-item { background: #f5f6f8; border-color: #e1e3e8; }
.theme-light .balance-display { background: #f5f6f8; }
.theme-light .status-strip span { background: #f5f6f8; border-color: #e1e3e8; color: #15171c; }
.theme-light .quick-amounts .qa { background: #ffffff; border-color: #e1e3e8; color: #4b5260; }
.theme-light .quick-amounts .qa:hover { background: #f5f6f8; }

.theme-light .tx-table th, .theme-light .bet-table th { border-bottom-color: #e1e3e8; }
.theme-light .tx-table td, .theme-light .bet-table td { border-bottom-color: #e1e3e8; }
.theme-light .tx-table tr:hover td, .theme-light .bet-table tr:hover td { background: #f5f6f8; }
.theme-light .tabs { border-bottom-color: #e1e3e8; }
.theme-light .market-pill { background: #eef0f4; border-color: #e1e3e8; color: #15171c; }

/* Авторизация */
.theme-light .auth-card { background: #ffffff; border: 1px solid #e1e3e8; box-shadow: 0 24px 60px rgba(0,0,0,.06); }
.theme-light .auth-tabs { border-bottom-color: #e1e3e8; }
.theme-light .auth-logo .bet { color: #0b0b00; }

/* Формы */
.theme-light .form-field input,
.theme-light .form-field select,
.theme-light .form-field textarea,
.theme-light input[type="text"],
.theme-light input[type="email"],
.theme-light input[type="password"],
.theme-light input[type="number"],
.theme-light input[type="tel"],
.theme-light input[type="date"] {
  background: #ffffff; border-color: #e1e3e8; color: #15171c;
}
.theme-light .form-field label { color: #6b7280; }

/* Кнопки */
.theme-light .btn-secondary { background: #f0f2f5; color: #15171c; border-color: #e1e3e8; }
.theme-light .btn-secondary:hover { background: #e8eaf0; }

/* Промо-кнопки прокрутки */
.theme-light .promo-scroll-btn,
.theme-light .top-scroll-btn { background: rgba(255,255,255,.92); border-color: #e1e3e8; color: #15171c; }
.theme-light .promo-scroll-btn:hover,
.theme-light .top-scroll-btn:hover { background: #f5f6f8; }

/* Live-pulse точка остаётся красной — норм */
/* Аватары команд (gradient) тоже норм */

/* Футер */
.theme-light .footer { background: #f8f9fb; border-top-color: #e1e3e8; color: #6b7280; }
.theme-light .footer-col h4 { color: #15171c; }
.theme-light .footer-col a { color: #4b5260; }
.theme-light .footer-col a:hover { color: #0b0b00; }
.theme-light .footer-col-phone .footer-phone { color: #15171c; }
.theme-light .footer-sport-tabs a { color: #4b5260; }
.theme-light .footer-sport-tabs a.is-active { color: #0b0b00; }
.theme-light .footer-social a { background: #ffffff; border: 1px solid #e1e3e8; color: #4b5260; }
.theme-light .footer-social a:hover { background: #f5f6f8; color: #0b0b00; }
.theme-light .footer-rating-card { background: #ffffff; border: 1px solid #e1e3e8; }
.theme-light .footer-rating-num b { color: #15171c; }
.theme-light .footer-partners-block { border-top-color: #e1e3e8; }
.theme-light .footer-block-label { color: #15171c; }
/* В тёмной теме лого партнёров светлые на тёмном фоне → инвертируем для светлой */
.theme-light .footer-partner-logos img { filter: invert(1) brightness(.85) contrast(1.1); }
.theme-light .footer-payments img { filter: invert(1) brightness(.85) contrast(1.1); }
.theme-light .footer-bottom-row { border-top-color: #e1e3e8; }
.theme-light .footer-copyright { color: #6b7280; }
/* Лого рейтинга и звёзды в рейтинг-карточке (SVG из футера) */
.theme-light .footer-rating-card-logo { filter: invert(1) brightness(.85) contrast(1.1); }
.theme-light .footer-rating-stars-bg img,
.theme-light .footer-rating-stars-fill img { filter: brightness(.95); }

/* Cookie banner */
.theme-light .cookie-banner { background: #ffffff; border-color: #e1e3e8; color: #15171c; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.theme-light .cookie-banner .cookie-text b { color: #15171c; }
.theme-light .cookie-banner .cookie-ico { background: #f0f2f5; }

/* Section-title и пр. */
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4 { color: #15171c; }
.theme-light .section-meta b { color: #15171c; }
.theme-light .section-title-flat { color: #6b7280; }
.theme-light .empty { color: #6b7280; }
.theme-light .pill { background: #ffffff; border-color: #e1e3e8; color: #15171c; }

/* Pager */
.theme-light .pager-btn { background: #ffffff; border-color: #e1e3e8; color: #15171c; }
.theme-light .pager-btn:hover { background: var(--accent); color: var(--accent-ink); }

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* hidden-атрибут должен иметь приоритет над любыми display: flex/grid в CSS */
[hidden] { display: none !important; }
body {
  font-family: "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex; flex-direction: column;
  font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
input, select, textarea { font-family: inherit; }

/* ===== Layout ===== */
.container {
  max-width: 1500px; margin: 0 auto;
  padding: 0 24px; width: 100%;
}
main { flex: 1 0 auto; padding: 22px 0 60px; }

/* ===== Header ===== */
.header {
  background: var(--bg);
  border-bottom: 1px solid #15171c;
  position: sticky; top: 0; z-index: 50;
}
.header .container {
  display: flex; align-items: center; gap: 36px;
  height: 64px;
}
.logo {
  font-size: 24px; font-weight: 900;
  letter-spacing: 0;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.logo .bet { color: #fff; }
.logo .boom { color: var(--accent); }

.nav-main {
  display: flex; gap: 30px; flex: 1; align-items: center;
}
.nav-main a {
  font-weight: 600; font-size: 15px;
  color: #d6d8de;
  transition: color .15s;
  padding: 6px 0;
}
.nav-main a:hover { color: var(--accent); }
.nav-main a.is-active { color: #fff; }

.header-actions { display: flex; gap: 12px; align-items: center; }

.language-switcher {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 3px;
  background: #1c1f26;
  border: 1px solid #232732;
  border-radius: 999px;
  gap: 2px;
}
.language-switcher button {
  width: 32px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}
.language-switcher button.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Theme switch (декоративный, переключает только класс на body) */
.theme-toggle {
  position: relative;
  width: 46px; height: 24px;
  background: #1c1f26; border-radius: 999px;
  cursor: pointer; padding: 2px;
  border: 1px solid #232732;
  display: inline-flex; align-items: center;
  font-size: 11px; color: var(--text-dim);
}
.theme-toggle::before {
  content: ""; width: 18px; height: 18px;
  background: #2a2f3a; border-radius: 50%;
  transition: transform .2s;
}
.theme-toggle.is-light::before { transform: translateX(22px); background: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 20px;
  border-radius: var(--radius);
  font-weight: 700; font-size: 14px;
  transition: background .15s, color .15s, transform .05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: #1a1d25; color: #fff; border: 1px solid #232732; }
.btn-secondary:hover { background: #232732; }
.btn-ghost { background: transparent; color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }

.balance-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  background: #14161c; border: 1px solid #232732;
  border-radius: var(--radius);
  font-weight: 800; color: var(--accent);
}
.balance-chip small { color: var(--text-dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

.user-menu { position: relative; }
.user-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  background: #14161c; border: 1px solid #232732;
  border-radius: var(--radius);
  font-weight: 700;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu[open] .user-menu-dropdown { display: block; }
.user-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg-card); border: 1px solid #232732;
  border-radius: var(--radius); min-width: 220px; padding: 6px;
  display: none; z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.user-menu-dropdown a, .user-menu-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 6px;
  color: #d6d8de; background: transparent;
  font-size: 13px; font-weight: 600;
}
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: #1a1d25; color: var(--accent); }

/* ===== Home layout: main + right "coupon" sidebar ===== */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.home-main { min-width: 0; }

/* ===== Promo carousel ===== */
.promo-row { position: relative; }
.promo-scroll {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.promo-scroll::-webkit-scrollbar { display: none; }
.promo-card {
  flex: 0 0 175px; height: 195px;
  border-radius: 14px; padding: 0;
  position: relative; overflow: hidden;
  display: block;
  color: #fff;
  cursor: pointer;
  transition: transform .15s;
  background: #14161c;
}
.promo-card:hover { transform: translateY(-2px); }

/* Промо: чистая картинка на всю площадь, без оверлеев и текста */
.promo-card.promo-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}
/* Фоллбек, если картинка не загрузилась — показываем alt текстом */
.promo-card.promo-img img[alt]::after {
  content: attr(alt);
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: 16px;
  background: #14161c;
  color: #fff; font-weight: 800; font-size: 14px; line-height: 1.3;
  border-radius: 14px;
}

.promo-scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(20,22,28,.92); color: #fff;
  border: 1px solid #232732;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; z-index: 5;
}
.promo-scroll-btn.left { left: -8px; }
.promo-scroll-btn.right { right: -8px; }
.promo-scroll-btn:hover { background: #232732; color: var(--accent); }

/* ===== Coupon sidebar ===== */
.coupon {
  background: #14161c;
  border-radius: var(--radius-lg);
  padding: 22px 22px 26px;
  position: sticky; top: 84px;
}
.coupon h3 { font-size: 18px; margin-bottom: 18px; }
.coupon-empty {
  text-align: center; padding: 28px 8px 12px;
}
.coupon-empty .icon {
  width: 70px; height: 70px; margin: 0 auto 18px;
  background: #1c1f26; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.coupon-empty .icon::before {
  content: ""; width: 36px; height: 22px;
  border: 3px solid #2a2f3a;
  border-radius: 4px;
  position: relative;
}
.coupon-empty .icon::after {
  content: ""; position: absolute; width: 22px; height: 2px;
  background: var(--accent); top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.coupon-empty .title { font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.coupon-empty .sub { color: var(--text-dim); font-size: 12px; max-width: 220px; margin: 0 auto; line-height: 1.5; }

/* ===== Section heading ===== */
.section-title {
  display: flex; align-items: center; justify-content: space-between;
  margin: 28px 0 14px;
}
.section-title h2 { font-size: 22px; font-weight: 900; }
.section-title .pill {
  background: #14161c; border: 1px solid #232732;
  color: #d6d8de; padding: 6px 14px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.section-title .pill:hover { color: var(--accent); border-color: #3a4050; }

/* ===== Sport 24/7 tiles ===== */
.sport247-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.sport247-card {
  background: #14161c; border-radius: 12px;
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 90px;
  position: relative; overflow: hidden;
  transition: background .15s;
}
.sport247-card:hover { background: #181b22; }
.sport247-card .text .name { font-weight: 800; font-size: 17px; }
.sport247-card .text .price { color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.sport247-card .badge {
  position: absolute; top: 10px; right: 12px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: .04em;
}
.sport247-card .ico {
  width: 64px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sport247-card .ico img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== Топ событий ===== */
.matches-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.match-card {
  background: #14161c; border-radius: 12px;
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.match-card .head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--text-dim); font-weight: 600;
}
.match-card .head .league { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-card .head .flag {
  width: 16px; height: 12px; border-radius: 2px; background: #2a2f3a; flex: 0 0 16px;
  background-size: cover; background-position: center;
}
.match-card .head .icons { display: inline-flex; gap: 6px; color: #555a68; }
.match-card .head .icons .live-dot { color: var(--red); font-size: 10px; }
.match-card .body { display: flex; flex-direction: column; gap: 6px; }
.match-card .team {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  font-size: 13px; font-weight: 600;
}
.match-card .team .tname {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.match-card .team .logo {
  width: 22px; height: 22px; border-radius: 50%;
  background: #2a2f3a; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-dim);
}
.match-card .team .score {
  color: var(--red); font-weight: 800; min-width: 14px; text-align: right;
}
.match-card .team .score-set { color: var(--text-dim); font-weight: 700; min-width: 14px; text-align: right; }
.match-card .meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-dim);
  border-top: 1px solid #1c1f26; padding-top: 8px;
}
.match-card .meta .live-mark { color: var(--red); }
.match-card .meta .live-mark::before { content: "● "; }
.match-card .odds {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  margin-top: 4px;
}
.match-card .odd {
  background: #1a1d25; border-radius: 6px;
  padding: 8px 6px; text-align: center;
  font-weight: 800; font-size: 13px; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  transition: background .15s, color .15s;
}
.match-card .odd:hover { background: #232732; color: var(--accent); }
.match-card .odd .label { font-size: 10px; color: var(--text-dim); font-weight: 600; }
.match-card .odds-form {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 4px;
}
.match-card .odds-form .odd { background: #1a1d25; border: 0; }
.match-card .odd-empty { color: var(--text-mute); cursor: default; }
.match-card .odd-empty:hover { background: #1a1d25; color: var(--text-mute); }
.match-card .live-mark-tag {
  background: rgba(239,65,70,.16);
  border: 1px solid rgba(239,65,70,.28);
  border-radius: 4px; padding: 1px 6px;
  color: var(--red); font-size: 9px; font-weight: 900;
  letter-spacing: .04em;
}

/* ===== Sport types row ===== */
.sport-types {
  display: flex; gap: 4px;
  margin-top: 22px; overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #15171c;
}
.sport-types::-webkit-scrollbar { display: none; }
.sport-types a {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 18px 14px;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  min-width: 92px;
  transition: color .15s, border-color .15s;
}
.sport-types a .ico-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: #14161c; border: 1px solid #1c1f26;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.sport-types a:hover { color: #fff; }
.sport-types a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.sport-types a.is-active .ico-circle { border-color: var(--accent); }

/* ===== Live event single row (after types) ===== */
.live-event {
  background: #14161c; border-radius: 12px;
  padding: 14px 18px; margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto repeat(4, minmax(78px, 1fr));
  gap: 18px; align-items: center;
}
.live-event .lg-info { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); }
.live-event .lg-info .flag { width: 18px; height: 13px; background: #2a2f3a; border-radius: 2px; }
.live-event .teams-mini { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.live-event .teams-mini .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.live-event .teams-mini .row .sc { color: var(--red); font-weight: 800; }
.live-event .odd {
  background: #1a1d25; border-radius: 8px;
  text-align: center; padding: 12px 8px;
  font-weight: 800; cursor: pointer;
}
.live-event .odd:hover { background: #232732; color: var(--accent); }
.live-event .odd .label { font-size: 10px; color: var(--text-dim); font-weight: 600; display: block; margin-bottom: 2px; }
.live-event .odd-more { color: var(--accent); }

/* ===== Stub page ===== */
.stub {
  background: var(--bg-card); border-radius: var(--radius-lg);
  padding: 80px 40px; text-align: center;
  margin-top: 12px;
}
.stub .icon { font-size: 72px; margin-bottom: 18px; }
.stub h1 { font-size: 32px; margin-bottom: 12px; }
.stub p { color: var(--text-dim); font-size: 16px; max-width: 520px; margin: 0 auto 24px; }
.stub .badge {
  display: inline-block; background: #1a1d25;
  color: var(--accent); padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; margin-bottom: 22px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ===== Forms / account ===== */

.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 14px;
  background: #0e1015; color: var(--text);
  border: 1px solid #232732; border-radius: var(--radius);
  font-size: 14px; outline: none; transition: border-color .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent); }
.form-field .errors { color: var(--red); font-size: 12px; margin-top: 4px; }
.field-hint, .helptext { color: var(--text-mute); font-size: 11px; margin-top: 4px; display: block; }

.messages { margin-bottom: 16px; }
.alert {
  padding: 11px 14px; border-radius: var(--radius); margin-bottom: 8px;
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent;
}
.alert.success { background: rgba(46,160,67,.12); color: var(--green); border-color: rgba(46,160,67,.3); }
.alert.error { background: rgba(239,65,70,.12); color: var(--red); border-color: rgba(239,65,70,.3); }
.alert.info { background: rgba(211,255,0,.12); color: var(--accent); border-color: rgba(211,255,0,.3); }
.alert.warning { background: rgba(255,176,19,.12); color: #ffb013; border-color: rgba(255,176,19,.3); }

.account-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 22px; margin-top: 8px;
}
.account-sidebar {
  background: var(--bg-card);
  border-radius: var(--radius-lg); padding: 22px 16px;
}
.account-sidebar .who { border-bottom: 1px solid #1c1f26; padding-bottom: 16px; margin-bottom: 12px; }
.account-sidebar .who .name { font-weight: 800; }
.account-sidebar .who .email { color: var(--text-dim); font-size: 12px; margin-top: 2px; word-break: break-all; }
.account-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.account-sidebar nav a {
  padding: 10px 12px; border-radius: 6px; font-size: 13px; font-weight: 700;
  color: #d6d8de;
}
.account-sidebar nav a:hover { background: #1a1d25; color: var(--accent); }
.account-sidebar nav a.is-active { background: #1a1d25; color: var(--accent); }

.account-main {
  background: var(--bg-card);
  border-radius: var(--radius-lg); padding: 28px 32px;
}
.account-main h1 { font-size: 24px; margin-bottom: 22px; }
.account-main h2 { font-size: 13px; margin: 22px 0 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }

/* ===== Balance page ===== */
.balance-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 6px 0 24px;
}
.balance-summary-card {
  background: #0e1015; border: 1px solid #1c1f26;
  border-radius: var(--radius); padding: 18px 20px;
}
.balance-summary-card .label {
  color: var(--text-dim); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}
.balance-summary-card .amount {
  font-size: 30px; font-weight: 900; color: var(--accent);
  letter-spacing: -0.02em;
}
.balance-summary-card .amount .cur { font-size: 18px; color: var(--text-dim); font-weight: 700; margin-left: 4px; }
.balance-summary-card.bonus .amount { color: #7db7ff; }

.balance-forms-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 24px;
}
.balance-card {
  background: #0e1015; border: 1px solid #1c1f26;
  border-radius: var(--radius); padding: 22px;
}
.balance-card-head {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid #1c1f26;
}
.balance-card-head h2 { font-size: 16px; margin: 0; text-transform: none; letter-spacing: 0; color: #fff; }
.balance-card-head .sub { color: var(--text-dim); font-size: 12px; font-weight: 500; margin-top: 2px; }
.balance-card-head .ico-block {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900;
}
.balance-card-head .ico-block.deposit { background: rgba(46,160,67,.16); color: var(--green); }
.balance-card-head .ico-block.withdraw { background: rgba(239,65,70,.16); color: var(--red); }
.balance-card-link {
  display: inline-flex;
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}
.balance-card-link:hover { color: var(--accent); }

.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.form-row .form-field { margin-bottom: 14px; }

.quick-amounts {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px;
}
.quick-amounts .qa, .quick-amounts .qa-max {
  background: #1a1d25; border: 1px solid #232732;
  color: #d6d8de; padding: 7px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.quick-amounts .qa:hover, .quick-amounts .qa-max:hover {
  background: #232732; color: var(--accent); border-color: var(--accent);
}
.quick-amounts .qa-max { background: rgba(211,255,0,.12); color: var(--accent); border-color: rgba(211,255,0,.3); }

.section-h {
  font-size: 13px; margin: 24px 0 12px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 800;
}

.balance-display {
  display: flex; align-items: center; gap: 18px;
  padding: 22px; background: #0e1015;
  border-radius: var(--radius); margin-bottom: 20px;
}
.balance-display .amount { font-size: 32px; font-weight: 900; color: var(--accent); }
.balance-display .amount.bonus { color: #7db7ff; }
.balance-display .label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.balance-display-split { justify-content: space-between; flex-wrap: wrap; }

.balance-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.demo-notice {
  background: #101820;
  border: 1px solid #27435a;
  border-radius: 8px;
  color: #dcecff;
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
}
.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.status-strip span {
  background: #0e1015;
  border: 1px solid #232732;
  border-radius: 8px;
  padding: 8px 10px;
  color: #d6d8de;
  font-size: 13px;
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}
.refusal-text {
  max-width: 420px;
  white-space: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tx-table, .bet-table {
  width: 100%; border-collapse: collapse; margin-top: 8px;
  font-size: 13px;
}
.tx-table th, .bet-table th {
  text-align: left; padding: 10px 12px;
  color: var(--text-dim); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid #1c1f26;
}
.tx-table td, .bet-table td { padding: 12px; border-bottom: 1px solid #1c1f26; }
.tx-table tr:hover td, .bet-table tr:hover td { background: #0e1015; }
.tx-amount-col,
.tx-amount-cell {
  min-width: 128px;
  white-space: nowrap;
}
.tx-amount-cell b,
.tx-amount-cell .win-amount,
.tx-amount-cell .pot-win {
  white-space: nowrap;
}
.status-pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.status-pill.success, .status-pill.won, .status-pill.completed { background: rgba(46,160,67,.15); color: var(--green); }
.status-pill.pending { background: rgba(211,255,0,.15); color: var(--accent); }
.status-pill.failed, .status-pill.lost, .status-pill.canceled { background: rgba(239,65,70,.15); color: var(--red); }
.status-pill.refund { background: rgba(122,128,144,.15); color: var(--text-dim); }

.empty { text-align: center; padding: 36px 12px; color: var(--text-dim); font-size: 13px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid #1c1f26; margin-bottom: 18px; }
.tabs a {
  padding: 10px 16px; font-weight: 700; font-size: 13px; color: var(--text-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 1100px) {
  .table-wrap {
    overflow-x: visible;
  }

  .tx-table,
  .bet-table,
  .tx-table thead,
  .bet-table thead,
  .tx-table tbody,
  .bet-table tbody,
  .tx-table tr,
  .bet-table tr,
  .tx-table th,
  .bet-table th,
  .tx-table td,
  .bet-table td {
    display: block;
    width: 100%;
  }

  .tx-table thead,
  .bet-table thead {
    display: none;
  }

  .tx-table tr,
  .bet-table tr {
    padding: 12px;
    border: 1px solid #1c1f26;
    border-radius: var(--radius);
    background: #0e1015;
  }

  .tx-table tr + tr,
  .bet-table tr + tr {
    margin-top: 10px;
  }

  .tx-table td,
  .bet-table td {
    display: grid;
    grid-template-columns: minmax(108px, 32%) minmax(132px, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 0;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  .tx-table td::before,
  .bet-table td::before {
    content: attr(data-label);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.25;
  }

  .refusal-text {
    max-width: none;
  }
}


@media (max-width: 480px) {
  .tx-table td,
  .bet-table td {
    grid-template-columns: minmax(88px, 32%) minmax(136px, 1fr);
  }
}

.support-list { display: grid; gap: 12px; }
.support-item {
  background: #0e1015;
  border: 1px solid #232732;
  border-radius: 8px;
  padding: 14px;
}
.support-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.support-item p { color: #d6d8de; margin: 10px 0; }
.support-answer {
  background: rgba(211,255,0,.08);
  border: 1px solid rgba(211,255,0,.18);
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
}

.support-umnico-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #0e1015;
  border: 1px solid #232732;
  border-radius: var(--radius);
  padding: 22px;
}
.support-umnico-card h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
}
.support-umnico-card p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.45;
}
.support-umnico-muted {
  color: var(--text-dim);
  font-weight: 800;
  white-space: nowrap;
}

.live-board { display: grid; gap: 10px; }
.live-row-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 14px;
  align-items: center;
  background: #14161c;
  border: 1px solid #232732;
  border-radius: 8px;
  padding: 14px;
}
.live-row-league,
.live-row-time { color: var(--text-dim); font-size: 12px; font-weight: 700; }
.live-row-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 8px 0;
  font-weight: 800;
}
.live-row-teams span:last-child { text-align: right; }
.live-row-teams strong { color: var(--red); font-size: 20px; }
.live-row-odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 8px;
}
.live-row-odds .odd {
  background: #1a1d25;
  border-radius: 8px;
  padding: 10px 8px;
  font-weight: 900;
}
.live-row-odds .odd .label {
  display: block;
  color: var(--text-dim);
  font-size: 10px;
  margin-bottom: 2px;
}

.live-events {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.live-card {
  background: #14161c;
  border: 1px solid #232732;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}
.live-header .sport {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-badge {
  background: rgba(239,65,70,.16);
  border: 1px solid rgba(239,65,70,.28);
  border-radius: 6px;
  color: var(--red);
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
}
.live-card .match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.live-card .team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-weight: 800;
}
.live-card .team:last-child {
  grid-template-columns: auto minmax(0, 1fr);
}
.live-card .team span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-card .team strong,
.live-card .vs {
  color: var(--red);
  font-size: 20px;
  font-weight: 900;
}
.live-card .time {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}
.live-bet-form {
  display: grid;
  gap: 10px;
}
.stake-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
}
.stake-inline input {
  width: 100%;
  background: #0e1015;
  border: 1px solid #232732;
  border-radius: 8px;
  color: var(--text);
  padding: 9px 10px;
  outline: none;
}
.live-card .odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.live-card .odd {
  background: #1a1d25;
  border: 1px solid #232732;
  border-radius: 8px;
  color: #fff;
  padding: 10px 8px;
  text-align: center;
  transition: background .15s, color .15s, border-color .15s;
}
.live-card .odd:hover {
  background: #232732;
  border-color: #3a4050;
  color: var(--accent);
}
.live-card .odd span {
  display: block;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 2px;
}
.live-card .odd strong {
  font-size: 16px;
  font-weight: 900;
}

/* ===== Live page ===== */
.live-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin: 8px 0 16px;
}
.page-title { font-size: 28px; font-weight: 900; }
.page-sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

.live-pulse {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; background: var(--red); margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(239,65,70, .7);
  animation: bb-pulse 1.6s infinite;
}
@keyframes bb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,65,70, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(239,65,70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239,65,70, 0); }
}

.live-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px;
}
.chip {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: #14161c; border: 1px solid #232732;
  color: #d6d8de; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { color: var(--accent); border-color: #3a4050; }
.chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.live-card {
  background: #14161c; border: 1px solid #1c1f26; border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  transition: border-color .15s;
}
.live-card:hover { border-color: #2a3045; }

.lc-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: 11px;
}
.lc-league { color: var(--text-dim); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-sport { color: #fff; }
.lc-dot { margin: 0 6px; opacity: .6; }
.live-mark-tag {
  background: rgba(239,65,70,.16);
  border: 1px solid rgba(239,65,70,.28);
  border-radius: 4px; padding: 2px 6px;
  color: var(--red); font-size: 10px; font-weight: 900;
  letter-spacing: .04em; white-space: nowrap; flex-shrink: 0;
}
.upcoming-tag {
  background: rgba(211,255,0,.10);
  border: 1px solid rgba(211,255,0,.22);
  border-radius: 4px; padding: 2px 6px;
  color: var(--accent); font-size: 10px; font-weight: 900;
  letter-spacing: .04em; white-space: nowrap; flex-shrink: 0;
}
.lc-upcoming .lc-score { display: none; }
.section-title-flat {
  font-size: 18px; font-weight: 900; margin: 14px 0 12px;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
}

.lc-teams { display: flex; flex-direction: column; gap: 8px; }
.lc-team {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; font-weight: 700; font-size: 14px;
}
.lc-logo {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #2a2f3a, #1a1d25);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #d6d8de;
}
.lc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-score { color: var(--red); font-weight: 900; font-size: 18px; min-width: 18px; text-align: right; }

.lc-bet { display: grid; gap: 8px; }
.lc-odds {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.lc-odds .odd, .odds-form .odd {
  background: #1a1d25; border: 1px solid #232732; border-radius: 8px;
  padding: 10px 6px; text-align: center; color: #fff;
  font-weight: 900; font-size: 14px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.lc-odds .odd:hover, .odds-form .odd:hover {
  background: #232732; border-color: var(--accent); color: var(--accent);
}
.lc-odds .label, .odds-form .label {
  font-size: 10px; color: var(--text-dim); font-weight: 700;
}
.odd-empty { background: #15171c !important; color: var(--text-mute) !important; cursor: default; }
.odd-empty:hover { background: #15171c !important; border-color: #232732 !important; color: var(--text-mute) !important; }

.lc-foot { color: var(--text-mute); font-size: 11px; font-weight: 600; text-align: right; }
.lc-hint { color: var(--text-dim); font-size: 11px; text-align: center; }

.stake-inline {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 10px;
  color: var(--text-dim); font-size: 12px; font-weight: 800;
}
.stake-inline input {
  width: 100%; background: #0e1015; border: 1px solid #232732;
  border-radius: 8px; color: var(--text);
  padding: 9px 10px; outline: none;
}
.stake-inline input:focus { border-color: var(--accent); }

/* ===== Footer (redesigned 1-в-1 с betboom, без секции приложений) ===== */
.footer {
  background: #0a0c10; border-top: 1px solid #15171c;
  padding: 40px 0 24px; margin-top: 36px;
  color: var(--text-dim); font-size: 13px;
}

/* Верх: 4 колонки ссылок + правый сайдбар (соцсети + рейтинг) */
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  padding-bottom: 28px;
}
.footer-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.footer-col h4 {
  color: #fff; font-size: 16px; font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.footer-col a {
  display: block; padding: 5px 0;
  color: var(--text-dim); font-size: 13px;
}
.footer-col a:hover { color: var(--accent); }
.footer-col-noheader { padding-top: 36px; }

.footer-col-phone .footer-phone {
  color: #fff; font-size: 18px; font-weight: 800;
  display: block; margin-bottom: 4px;
  letter-spacing: -0.01em; padding: 0;
}
.footer-col-phone .footer-phone:hover { color: var(--accent); }
.footer-col-phone .footer-phone-sub {
  color: var(--text-dim); font-size: 12px;
}

/* Правый сайдбар: Спорт/Кибер, соцсети, рейтинг */
.footer-side {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 280px;
}
.footer-sport-tabs {
  display: flex; gap: 22px;
}
.footer-sport-tabs a {
  color: var(--text-dim); font-size: 18px; font-weight: 800;
  letter-spacing: -0.01em;
}
.footer-sport-tabs a.is-active { color: #fff; }
.footer-sport-tabs a:hover { color: var(--accent); }

.footer-rating-card {
  background: #14161c; border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start;
  min-width: 220px;
}
.footer-rating-card-logo { height: 28px; width: auto; opacity: .8; }
.footer-rating-stars-wrap {
  position: relative;
  display: inline-block; line-height: 0;
}
.footer-rating-stars-bg,
.footer-rating-stars-fill {
  display: flex; gap: 3px;
}
.footer-rating-stars-bg img,
.footer-rating-stars-fill img {
  height: 14px; width: auto; display: block;
}
.footer-rating-stars-fill {
  position: absolute; top: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
}
.footer-rating-num {
  color: var(--text-dim); font-size: 12px;
}
.footer-rating-num b { color: #fff; font-weight: 800; margin-left: 2px; }

/* Партнёры */
.footer-partners-block {
  padding: 26px 0;
  border-top: 1px solid #15171c;
}
.footer-block-label {
  display: block;
  color: #fff; font-size: 18px; font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.footer-partner-logos {
  display: flex; align-items: center;
  gap: 30px; flex-wrap: wrap;
  opacity: .55;
}
.footer-partner-logos img {
  height: 30px; width: auto;
  transition: opacity .15s;
}
.footer-partner-logos img:hover { opacity: 1; }

/* Низ: способы оплаты + копирайт + 18+ */
.footer-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 24px;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid #15171c;
}
.footer-payments {
  display: flex; align-items: center;
  gap: 16px; flex-wrap: wrap;
  opacity: .5;
}
.footer-payments img { height: 18px; width: auto; }
.footer-copyright {
  color: var(--text-dim); font-size: 12px; line-height: 1.5;
  text-align: right;
}
.footer-age {
  background: rgba(239,65,70,.12); color: var(--red);
  border: 1px solid rgba(239,65,70,.25);
  padding: 4px 9px; border-radius: 6px;
  font-size: 12px; font-weight: 900;
}

/* Адаптив */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-side { min-width: 0; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-col-noheader { padding-top: 0; }
  .footer-bottom-row { grid-template-columns: 1fr auto; }
  .footer-copyright { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 600px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-partner-logos { gap: 20px; }
  .footer-partner-logos img { height: 22px; }
  .footer-payments img { height: 16px; }
}

/* ===== Cookie banner ===== */
.cookie-banner {
  position: fixed; left: 20px; bottom: 20px; z-index: 80;
  display: none; align-items: center; gap: 16px;
  background: #14161c; border: 1px solid #232732;
  border-radius: 14px; padding: 12px 16px;
  max-width: 520px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.cookie-banner.is-show { display: flex; }
.cookie-banner .cookie-ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: #1c1f26; display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex: 0 0 28px;
}
.cookie-banner .cookie-text { font-size: 12px; color: var(--text-dim); flex: 1; line-height: 1.4; }
.cookie-banner .cookie-text b { color: #fff; }
.cookie-banner .btn { height: 32px; padding: 0 16px; font-size: 12px; }

/* ===== Inline SVG icons ===== */
.i { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.i-12 { width: 12px; height: 12px; }
.i-14 { width: 14px; height: 14px; }
.i-16 { width: 16px; height: 16px; }
.i-20 { width: 20px; height: 20px; }
.i-24 { width: 24px; height: 24px; }
.i-28 { width: 28px; height: 28px; }
.i-32 { width: 32px; height: 32px; }
.sport-types a .ico-circle .i { width: 22px; height: 22px; color: #d6d8de; }
.sport-types a.is-active .ico-circle .i { color: var(--accent); }
.sport-chip .ico .i { width: 18px; height: 18px; }

/* ===== Top events horizontal scroll ===== */
.top-row { position: relative; margin-bottom: 14px; }
.top-scroll {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 6px;
}
.top-scroll::-webkit-scrollbar { display: none; }
.top-card {
  flex: 0 0 290px;
  background: #14161c; border: 1px solid #1c1f26;
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  transition: border-color .15s;
}
.top-card:hover { border-color: #2a3045; }
.top-card .head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px; font-size: 11px;
}
.top-card .league {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-weight: 700;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-card .league .i { color: var(--text-dim); }
.top-card .body { display: flex; flex-direction: column; gap: 6px; }
.top-card .team {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  font-weight: 700; font-size: 13px;
}
.top-card .team .logo {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg,#2a2f3a,#1a1d25);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 900;
}
.top-card .team .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-card .team .score { color: var(--red); font-weight: 900; }
.top-card .meta {
  display: flex; justify-content: space-between;
  color: var(--text-dim); font-size: 11px; font-weight: 700;
  border-top: 1px solid #1c1f26; padding-top: 8px;
}
.top-card .meta .live-mark::before { content: "● "; color: var(--red); }
.top-card .odds-form {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.top-card .odds-form .odd, .top-card .odds-form .odd-empty {
  background: #1a1d25; border: 1px solid #232732; border-radius: 8px;
  padding: 8px 4px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  font-weight: 800; font-size: 13px; color: #fff;
  transition: background .15s, color .15s, border-color .15s;
}
.top-card .odds-form .odd:hover { background: #232732; color: var(--accent); border-color: var(--accent); }
.top-card .odds-form .label { font-size: 10px; color: var(--text-dim); font-weight: 700; }
.top-card .odds-form .odd-empty { color: var(--text-mute); cursor: default; }

.top-scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(20,22,28,.92); color: #fff;
  border: 1px solid #232732;
  display: flex; align-items: center; justify-content: center;
  z-index: 5; cursor: pointer;
}
.top-scroll-btn.left { left: -8px; }
.top-scroll-btn.right { right: -8px; }
.top-scroll-btn:hover { background: #232732; color: var(--accent); }
@media (max-width: 768px) { .top-scroll-btn { display: none; } }

/* Контейнер для AJAX-фильтра */
.sport-events { margin-top: 8px; min-height: 200px; }
.sport-events.is-loading { opacity: .5; pointer-events: none; }

/* ===== Board (Линия / Кибер): сайдбар + чипы + строки матчей ===== */
.board {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.board-side {
  background: #14161c; border: 1px solid #1c1f26;
  border-radius: 12px; padding: 12px; min-height: 400px;
  position: sticky; top: 84px;
  align-self: start;
  max-height: calc(100vh - 100px); overflow-y: auto;
}
.board-side-search input {
  width: 100%; padding: 10px 12px;
  background: #0e1015; color: #fff;
  border: 1px solid #232732; border-radius: 8px;
  font-size: 13px; outline: none;
}
.board-side-search input::placeholder { color: var(--text-mute); }
.board-side-fav {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-top: 10px;
  background: #0e1015; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #d6d8de;
}
.board-side-fav:hover { color: var(--accent); }
.board-side-fav > span:first-child { color: var(--accent); }

.board-side-section { margin-top: 14px; }
.board-side-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px; background: #1a1d25; border-radius: 8px;
  font-weight: 800; font-size: 13px; color: #fff;
}
.board-side-head .c {
  background: var(--accent); color: var(--accent-ink);
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 900;
}
.board-side-list { margin-top: 4px; display: flex; flex-direction: column; }
.board-side-item {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 6px;
  font-size: 12px; color: #d6d8de;
}
.board-side-item:hover { background: #1a1d25; color: var(--accent); }
.board-side-item.is-active { background: #1a1d25; color: var(--accent); }
.board-side-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.board-side-item .c {
  background: #232732; color: var(--text-dim);
  padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
  flex-shrink: 0;
}
.board-side-empty {
  padding: 14px 10px; color: var(--text-mute); font-size: 12px; text-align: center;
}

.board-main { min-width: 0; }

/* Чипы видов спорта */
.sport-chips {
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none;
}
.sport-chips::-webkit-scrollbar { display: none; }
.sport-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px;
  background: #14161c; border: 1px solid #1c1f26;
  font-size: 13px; font-weight: 700; color: #fff;
  position: relative;
  white-space: nowrap;
}
.sport-chip:hover { border-color: #3a4050; }
.sport-chip.is-active {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.sport-chip .ico { font-size: 16px; }
.sport-chip .live-dot {
  position: absolute; top: 6px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px #14161c;
}
.sport-chip.is-active .live-dot { box-shadow: 0 0 0 2px var(--accent); }

/* Переключатель Live/Все */
.board-modes {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 12px;
}
.board-mode {
  padding: 7px 14px; border-radius: 8px;
  background: #14161c; border: 1px solid #1c1f26;
  font-size: 12px; font-weight: 800; color: #d6d8de;
}
.board-mode:hover { color: var(--accent); }
.board-mode.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.board-modes-spacer { flex: 1; }
.board-modes-count { color: var(--text-dim); font-size: 12px; font-weight: 700; }

/* Группа матчей */
.board-group { margin-bottom: 14px; }
.board-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #11141a;
  border: 1px solid #1c1f26;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  font-size: 12px; font-weight: 700;
}
.board-group-head .g-flag {
  width: 20px; height: 20px; border-radius: 50%;
  background: #2a2f3a; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}
.board-group-head .g-name { color: #d6d8de; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-group-head .g-count {
  background: #1a1d25; color: var(--text-dim);
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
}

.board-rows {
  background: #14161c; border: 1px solid #1c1f26;
  border-radius: 0 0 10px 10px; overflow: hidden;
}
.board-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 420px;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #1c1f26;
}
.board-row:last-child { border-bottom: 0; }
.board-row:hover { background: #181b22; }

.br-status {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; font-weight: 700; color: var(--text-dim);
}
.br-status .br-live { color: var(--red); font-size: 12px; }
.br-status .br-time { color: #d6d8de; }
.board-row.is-live .br-status .br-time { color: var(--red); }

.br-teams { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.br-team {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  font-size: 13px; font-weight: 700;
}
.br-logo {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #2a2f3a, #1a1d25);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #d6d8de;
}
.br-logo.cyber { background: linear-gradient(135deg, #4e3aff, #2a1d99); color: #fff; }
.br-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-score {
  min-width: 22px; text-align: right;
  font-weight: 900; color: var(--text-mute);
}
.br-score.live { color: var(--red); font-size: 15px; }

.br-odds {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px;
}
.br-odds .odd, .br-odds .odd-empty, .br-odds .odd-more {
  background: #1a1d25; border: 1px solid #232732; border-radius: 8px;
  padding: 8px 6px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  font-weight: 800; font-size: 13px; color: #fff;
  transition: background .15s, color .15s, border-color .15s;
}
.br-odds .odd:hover { background: #232732; color: var(--accent); border-color: var(--accent); }
.br-odds .label { font-size: 9px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; }
.br-odds .odd-more { color: var(--accent); cursor: pointer; }
.br-odds .odd-more:hover { background: #232732; }

/* Пагинатор */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 18px 0 4px;
}
.pager-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: #14161c; border: 1px solid #232732;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 16px;
}
.pager-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pager-btn.is-disabled {
  color: var(--text-mute); background: #0e1015; border-color: #1a1d25;
  cursor: not-allowed; pointer-events: none;
}
.pager-info { color: var(--text-dim); font-size: 12px; font-weight: 700; }

/* Доп заголовок section */
.section-meta { color: var(--text-dim); font-size: 12px; font-weight: 700; }
.section-meta b { color: #fff; }

/* 5 в ряд для главной */
.matches-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sport-types a .tab-live {
  position: absolute; top: 6px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.sport-types a { position: relative; }

/* ===== Promo gate ===== */
.promo-gate { display: flex; justify-content: center; padding: 40px 0; }
.promo-gate-card {
  background: #14161c; border: 1px solid #1c1f26;
  border-radius: 16px; padding: 40px 36px;
  max-width: 560px; text-align: center;
}
.promo-gate-ico {
  width: 72px; height: 72px; border-radius: 50%;
  background: #1a1d25; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.promo-gate-card h1 { font-size: 22px; margin-bottom: 10px; }
.promo-gate-card p { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.promo-gate-status {
  background: #0e1015; border: 1px solid #232732;
  border-radius: 8px; padding: 10px 16px; margin: 12px 0 22px;
  color: var(--text-dim); font-size: 13px; font-weight: 700;
}
.promo-gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.promo-list { margin-top: 22px; }

/* ===== Responsive board ===== */
@media (max-width: 1100px) {
  .board { grid-template-columns: 1fr; }
  .board-side { position: static; max-height: none; }
  .board-row { grid-template-columns: 70px minmax(0, 1fr); }
  .br-odds { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
  .matches-row-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .board-row { padding: 10px; }
  .matches-row-5 { grid-template-columns: 1fr; }
  .br-odds { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .promo-gate-card { padding: 28px 18px; }
}

/* ===== Layout: main + правый сайдбар-купон =====
   Десктоп (>=1280): 2-колоночная сетка, контент слева, купон-аside справа.
   Промо-карусель (block topbar) — ВНЕ сетки, во всю ширину контейнера.
   Меньше: купон не входит в сетку — становится плавающим как раньше.
*/
.page-with-coupon { display: block; margin-top: 18px; }
.page-main { min-width: 0; }
/* На мобиле .page-coupon не скрываем (внутри лежит плавающая
   кнопка-toggle position: fixed) — иначе кнопка купона исчезает.
   Сама aside-обёртка пустая по высоте, layout не ломает. */
.page-coupon { display: contents; }

@media (min-width: 1280px) {
  /* Контейнер тянется на весь viewport, без max-width-центрирования */
  .container { max-width: none; margin: 0; padding: 0 24px; }
  .page-with-coupon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
  }
  /* На auth-страницах купон не нужен — одна колонка во всю ширину */
  .page-with-coupon.no-coupon {
    display: block;
    grid-template-columns: none;
  }
  .page-coupon {
    display: block;
    position: sticky; top: 84px;
    align-self: start;
    max-height: calc(100vh - 100px);
  }
}

/* ===== Floating bet coupon =====
   Десктоп (>=1280): купон встроен как столбец сетки выше.
   Планшет/мобила: плавающая кнопка "Купон N", по клику разворачивается панель.
*/
.bb-coupon {
  position: fixed; right: 16px; top: 84px;
  z-index: 65;
}
@media (min-width: 1280px) {
  /* На десктопе bb-coupon вписан в столбец сетки .page-coupon */
  .bb-coupon { position: static; }
  .bb-coupon-toggle { display: none !important; }
}
.bb-coupon-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--bg-card); border: 1px solid #232732;
  border-radius: 12px; color: #fff; font-weight: 800; font-size: 13px;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: background .15s, color .15s, border-color .15s, transform .05s;
}
.bb-coupon-toggle:hover { border-color: var(--accent); color: var(--accent); }
.bb-coupon-toggle:active { transform: translateY(1px); }
.bb-coupon.has-items .bb-coupon-toggle {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.bb-coupon.has-items .bb-coupon-toggle:hover { background: var(--accent-hover); color: var(--accent-ink); }
.bb-coupon-toggle-ico { font-size: 16px; }
.bb-coupon-count {
  background: rgba(0,0,0,.32); color: inherit;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 900; min-width: 22px; text-align: center;
}
.bb-coupon:not(.has-items) .bb-coupon-count {
  background: #1a1d25; color: var(--text-dim);
}

.bb-coupon-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 380px; max-width: calc(100vw - 32px);
  background: #0d0f14; border: 1px solid #232732;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  display: none; flex-direction: column;
  max-height: calc(100vh - 110px); overflow-y: auto;
}
.bb-coupon.is-open .bb-coupon-panel { display: flex; }

/* Десктоп: панель занимает всю ширину сайдбара .page-coupon */
@media (min-width: 1280px) {
  .bb-coupon-panel {
    position: static;
    width: 100%; max-width: none;
    max-height: calc(100vh - 100px);
    display: flex !important;
  }
}

/* ===== Верхний таб-бар: Купон / История + шестерёнка ===== */
.bb-coupon-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
}
.bb-coupon-toptabs { display: flex; gap: 20px; }
.bb-coupon-toptab {
  background: transparent; border: 0; padding: 0;
  font-size: 18px; font-weight: 900; color: var(--text-dim);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.01em;
}
.bb-coupon-toptab:hover { color: #fff; }
.bb-coupon-toptab.is-active { color: #fff; }
.bb-coupon-count-pill {
  background: var(--red); color: #fff;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 900; min-width: 22px; text-align: center;
}
.bb-coupon-toptab:not(.is-active) .bb-coupon-count-pill { background: #2a2f3a; color: var(--text-dim); }
.bb-coupon-settings {
  width: 30px; height: 30px; border-radius: 8px;
  background: transparent; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bb-coupon-settings:hover { background: #1a1d25; color: var(--accent); }

/* ===== Пустое состояние ===== */
.bb-coupon-empty {
  text-align: center; padding: 30px 16px 24px;
}
.bb-coupon-empty .icon {
  width: 64px; height: 64px; margin: 0 auto 14px;
  background: #1c1f26; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.bb-coupon-empty .icon::before {
  content: ""; width: 30px; height: 18px;
  border: 3px solid #2a2f3a; border-radius: 4px;
}
.bb-coupon-empty .icon::after {
  content: ""; position: absolute; width: 18px; height: 2px;
  background: var(--accent); top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.bb-coupon-empty .title { font-weight: 800; font-size: 15px; margin-bottom: 6px; color: #fff; }
.bb-coupon-empty .sub { color: var(--text-dim); font-size: 12px; max-width: 260px; margin: 0 auto; line-height: 1.5; }

/* ===== Тело купона ===== */
.bb-coupon-body {
  display: flex; flex-direction: column;
  min-height: 0;
}

/* Сегменты Ординар / Экспресс / Система */
.bb-coupon-modetabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; margin: 0 14px 12px;
  background: #14161c; padding: 4px; border-radius: 10px;
}
.bb-coupon-modetab {
  background: transparent; border: 0; padding: 7px 8px;
  border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 800;
  color: var(--text-dim);
}
.bb-coupon-modetab:hover { color: #fff; }
.bb-coupon-modetab.is-active {
  background: var(--accent); color: var(--accent-ink);
}

/* Список селекций */
.bb-coupon-list {
  overflow-y: auto; padding: 0 14px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 320px;
}
.bb-coupon-item {
  background: #14161c; border-radius: 10px;
  padding: 12px 14px; position: relative;
}
.bb-coupon-item-remove {
  position: absolute; right: 8px; top: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: transparent; color: var(--text-mute); font-size: 16px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  line-height: 1;
}
.bb-coupon-item-remove:hover { background: var(--red); color: #fff; }
.bb-coupon-item-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding-right: 22px;
}
.bb-coupon-item-outcome {
  color: var(--text-dim); font-size: 12px; font-weight: 700;
}
.bb-coupon-item-outcome::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
  margin-right: 7px; vertical-align: middle;
}
.bb-coupon-item-odds {
  color: #fff; font-weight: 900; font-size: 15px;
}
.bb-coupon-item-event {
  font-weight: 800; font-size: 14px; color: #fff;
  margin: 6px 0 4px; line-height: 1.3;
  padding-right: 22px;
}
.bb-coupon-item-league {
  color: var(--text-mute); font-size: 11px; font-weight: 600;
}

/* Удалить все… + Общий коэф */
.bb-coupon-clear-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px 8px;
  border-top: 1px solid #1c1f26; margin-top: 12px;
}
.bb-coupon-clear-link {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--text-dim); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.bb-coupon-clear-link:hover { color: var(--red); }
.bb-coupon-total {
  color: var(--text-dim); font-size: 12px; font-weight: 700;
}
.bb-coupon-total b {
  color: #fff; font-size: 14px; font-weight: 900; margin-left: 4px;
}

/* Форма ставки */
.bb-coupon-form {
  padding: 10px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.bb-coupon-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
}
.bb-coupon-row > span { color: var(--text-dim); font-weight: 600; }
.bb-coupon-row > strong { font-weight: 900; color: #fff; }
.bb-coupon-row > strong.bb-coupon-win { color: var(--accent); font-size: 16px; }
#bb-coupon-stake {
  width: 120px; padding: 9px 12px;
  background: #14161c; color: #fff;
  border: 1px solid #232732; border-radius: 8px;
  font-size: 14px; font-weight: 800; text-align: right;
  outline: none;
}
#bb-coupon-stake:focus { border-color: var(--accent); }
.bb-coupon-balance {
  font-size: 12px; color: var(--text-dim); text-align: right; margin-top: 2px;
}
.bb-coupon-balance b { color: #fff; }
.bb-coupon-error {
  background: rgba(239,65,70,.12); border: 1px solid rgba(239,65,70,.3);
  color: var(--red); padding: 9px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 700; text-align: center;
}

/* История внутри купона */
.bb-coupon-history {
  padding: 8px 0 18px;
}

/* Подсветка выбранного коэфа */
.odd.is-picked {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}
.odd.is-picked .label { color: rgba(0,0,0,.55) !important; }

/* Скрываем старый sidebar coupon на главной — заменили на floating */
.home-grid > .coupon { display: none; }
@media (min-width: 1025px) {
  .home-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 1024px) {
  .bb-coupon { top: auto; bottom: 80px; right: 12px; }
  .bb-coupon-panel {
    position: fixed;
    right: 12px; bottom: 56px; top: auto;
    max-height: 70vh;
    width: calc(100vw - 24px); max-width: 360px;
  }
}
@media (max-width: 640px) {
  .bb-coupon { bottom: 14px; right: 10px; }
  .bb-coupon-toggle { padding: 9px 14px; font-size: 12px; }
  .bb-coupon-toggle-label { display: none; }
  .bb-coupon-panel { width: calc(100vw - 20px); }
}

/* ===== Floating chat ===== */
.fab-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  cursor: pointer;
}

/* ===== Responsive ===== */
@media (max-width: 1280px) {
  .container { max-width: 100%; }
  .sport247-grid { grid-template-columns: repeat(3, 1fr); }
  .matches-row { grid-template-columns: repeat(2, 1fr); }
  .live-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: 1fr; }
  .coupon { position: static; }
  .account-layout { grid-template-columns: 1fr; }
  .nav-main { display: none; }
  .sport247-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .container { padding: 0 14px; }
  .promo-card { flex: 0 0 150px; height: 170px; padding: 12px; }
  .promo-card .title { font-size: 13px; }
  .promo-scroll-btn { display: none; }
  .matches-row { grid-template-columns: 1fr 1fr; }
  .sport247-card { padding: 14px; min-height: 80px; }
  .sport247-card .ico { width: 44px; height: 32px; font-size: 18px; }
  .sport247-card .text .name { font-size: 15px; }
  .section-title h2 { font-size: 18px; }
  .page-title { font-size: 22px; }
  .live-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .balance-summary { grid-template-columns: 1fr; }
  .balance-forms-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container { padding: 0 12px; }
  main { padding: 14px 0 40px; }

  /* Header */
  .header .container {
    height: auto; min-height: 58px;
    flex-wrap: wrap;
    padding-top: 10px; padding-bottom: 10px;
    gap: 10px;
  }
  .logo { font-size: 20px; }
  .header-actions { margin-left: auto; gap: 6px; }
  .header-actions .btn { padding: 0 12px; height: 36px; font-size: 12px; }
  .language-switcher { height: 28px; }
  .language-switcher button { width: 30px; height: 20px; font-size: 10px; }
  .balance-chip { display: none; }
  .theme-toggle { display: none; }
  .user-menu summary { height: 36px; padding: 0 10px; font-size: 12px; }

  /* Home blocks */
  .promo-card { flex: 0 0 135px; height: 150px; }
  .sport247-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .matches-row { grid-template-columns: 1fr; }
  .match-card { padding: 12px; }

  /* Sport types: чуть теснее */
  .sport-types a { min-width: 78px; padding: 8px 12px 12px; font-size: 11px; }
  .sport-types a .ico-circle { width: 32px; height: 32px; font-size: 15px; }

  /* Live */
  .live-grid { grid-template-columns: 1fr; }
  .live-card { padding: 14px; }
  .lc-team { font-size: 13px; }
  .lc-score { font-size: 16px; }

  /* Account */
  .account-main { padding: 18px 14px; }
  .account-sidebar { padding: 14px; }
  .account-sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .account-sidebar nav a { background: #1a1d25; text-align: center; }
  .account-sidebar .who { display: none; }
  .account-main h1 { font-size: 20px; margin-bottom: 16px; }
  .account-main h2, .section-h { letter-spacing: 0; }
  .support-umnico-card { flex-direction: column; align-items: stretch; padding: 18px; }
  .support-umnico-card .btn { width: 100%; }
  .balance-summary-card { padding: 14px 16px; }
  .balance-summary-card .amount { font-size: 24px; letter-spacing: 0; }
  .balance-card { padding: 16px; }
  .balance-card-head { align-items: flex-start; margin-bottom: 14px; }
  .balance-card-head h2 { font-size: 15px; }
  .balance-card-head .sub { line-height: 1.35; }
  .balance-display { padding: 16px; gap: 12px; flex-direction: column; align-items: flex-start; }
  .balance-display .amount { font-size: 24px; }
  .tabs { overflow-x: auto; white-space: nowrap; }
  .tabs a { padding: 10px 12px; }
  .table-wrap { margin: 0; padding: 0; border-radius: 0; }
  .tx-table, .bet-table { min-width: 0; }

  /* Cookie banner: на всю ширину снизу */
  .cookie-banner {
    left: 10px; right: 10px; bottom: 10px;
    max-width: none;
    flex-wrap: wrap; padding: 12px;
  }
  .cookie-banner .cookie-text { flex: 1 1 100%; }

  /* Stub */
  .stub { padding: 50px 18px; }
  .stub h1 { font-size: 22px; }
}
@media (max-width: 380px) {
  .sport247-grid { grid-template-columns: 1fr; }
  .lc-odds, .odds-form { grid-template-columns: 1fr 1fr 1fr; }
}

/* ================================================================
   #46 — Auth pages redesign
   ================================================================ */
.auth-page {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 40px 16px 60px; min-height: calc(100vh - 62px);
}
.auth-card {
  background: #14161c; border: 1px solid #1c1f26;
  border-radius: 18px; padding: 32px 32px 28px;
  width: 100%; max-width: 480px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.auth-logo {
  display: inline-block; font-size: 22px; font-weight: 900;
  letter-spacing: -0.03em; margin-bottom: 22px;
}
.auth-logo .bet { color: #fff; }
.auth-logo .boom { color: var(--accent); }

.auth-tabs {
  display: flex; gap: 0; border-bottom: 1px solid #1c1f26; margin-bottom: 22px;
}
.auth-tab {
  flex: 1; text-align: center; padding: 10px 12px;
  font-weight: 800; font-size: 14px; color: var(--text-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-tab:hover { color: #fff; }

.auth-submit { margin-top: 6px; height: 48px; font-size: 15px; }
.auth-footer-note {
  margin-top: 18px; text-align: center;
  font-size: 13px; color: var(--text-dim);
}
.auth-footer-note a { color: var(--accent); font-weight: 700; }

.auth-agree {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 12px 0 14px; cursor: pointer;
  font-size: 13px; color: var(--text-dim); line-height: 1.4;
}
.auth-agree input[type=checkbox] { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.auth-agree a { color: var(--accent); }

.input-pw-wrap { position: relative; }
.input-pw-wrap input { padding-right: 40px; width: 100%; }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--text-mute); cursor: pointer;
  display: flex; padding: 4px;
}
.pw-toggle:hover { color: var(--text-dim); }

.field-opt { color: var(--text-mute); font-weight: 500; font-size: 11px; }

/* ================================================================
   #48 — Profile page redesign
   ================================================================ */
.prof-hero {
  display: flex; align-items: center; gap: 18px;
  background: #0e1015; border: 1px solid #1c1f26;
  border-radius: 14px; padding: 20px 24px; margin-bottom: 22px;
}
.prof-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #d3ff00, #a3cc00);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: #0b0b00;
  flex-shrink: 0;
}
.prof-hero-info { flex: 1; min-width: 0; }
.prof-hero-name { font-size: 18px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-hero-login { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.prof-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.prof-badge-balance {
  background: rgba(211,255,0,.14); color: var(--accent);
  border: 1px solid rgba(211,255,0,.28);
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 900;
}
.prof-badge {
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800;
}
.prof-badge.verified { background: rgba(46,160,67,.14); color: var(--green); border: 1px solid rgba(46,160,67,.28); }
.prof-badge.pending { background: rgba(211,255,0,.12); color: var(--accent); border: 1px solid rgba(211,255,0,.2); }
.prof-badge.unverified { background: rgba(122,128,144,.12); color: var(--text-dim); border: 1px solid rgba(122,128,144,.2); }
.prof-hero-btn { flex-shrink: 0; }

.prof-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
  margin-top: 4px;
}
.prof-form-actions { margin-top: 16px; }

.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

/* Верификация */
.verif-status-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #0e1015; border: 1px solid #1c1f26;
  border-radius: 12px; padding: 18px 20px;
}
.verif-status-card.verif-ok { border-color: rgba(46,160,67,.3); background: rgba(46,160,67,.06); }
.verif-status-card.verif-wait { border-color: rgba(211,255,0,.25); background: rgba(211,255,0,.05); }
.verif-status-card.verif-fail { border-color: rgba(239,65,70,.3); background: rgba(239,65,70,.06); }
.verif-status-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1a1d25; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.verif-ok .verif-status-ico { background: rgba(46,160,67,.18); color: var(--green); }
.verif-wait .verif-status-ico { background: rgba(211,255,0,.12); color: var(--accent); }
.verif-fail .verif-status-ico { background: rgba(239,65,70,.14); color: var(--red); }
.verif-status-title { font-weight: 900; font-size: 15px; }
.verif-status-sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; line-height: 1.4; }
.verif-admin-note {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(211,255,0,.08); border: 1px solid rgba(211,255,0,.15);
  border-radius: 6px; font-size: 12px; color: var(--accent);
}

/* ================================================================
   #48 — History page redesign
   ================================================================ */
.tab-count {
  display: inline-block; background: #1a1d25; color: var(--text-dim);
  padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
  margin-left: 4px; vertical-align: middle;
}
.tabs a.is-active .tab-count { background: rgba(211,255,0,.2); color: var(--accent); }

.bet-date { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.bet-date span { color: var(--text-mute); }
.bet-event-name { font-weight: 700; font-size: 13px; }
.bet-market-detail { color: var(--text-mute); font-size: 11px; margin-top: 2px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.market-pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: #1a1d25; border: 1px solid #232732;
  font-size: 11px; font-weight: 800; color: #d6d8de;
}
.market-pill.express { background: rgba(78,140,255,.12); border-color: rgba(78,140,255,.25); color: #4e8cff; }

.odds-val { font-weight: 900; color: var(--accent); font-size: 14px; }
.win-amount { color: var(--green); font-weight: 900; }
.pot-win { color: var(--text-dim); font-weight: 700; }
.text-mute { color: var(--text-mute); }

.tx-kind-ico {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.tx-deposit { background: var(--green); }
.tx-withdraw { background: var(--red); }
.tx-bet { background: var(--accent); }
.tx-win { background: #4e8cff; }

.tx-plus { color: var(--green); }
.tx-minus { color: var(--red); }

.history-empty {
  text-align: center; padding: 60px 16px;
}
.history-empty-ico { font-size: 48px; margin-bottom: 16px; }
.history-empty-title { font-size: 18px; font-weight: 900; margin-bottom: 8px; }
.history-empty-sub { color: var(--text-dim); font-size: 14px; max-width: 300px; margin: 0 auto; line-height: 1.5; }

/* ================================================================
   Страница «Ответственная игра»
   ================================================================ */
.rg-page { max-width: 1120px; margin: 0 auto; padding: 8px 0 40px; }
.rg-title { font-size: 34px; font-weight: 900; margin-bottom: 28px; letter-spacing: -0.02em; }
.rg-h2 { font-size: 22px; font-weight: 800; margin-bottom: 18px; letter-spacing: -0.01em; }

.rg-intro { margin-bottom: 32px; }
.rg-intro p {
  color: var(--text-dim); font-size: 15px; line-height: 1.6;
  margin: 0 0 16px; max-width: 760px;
}
.rg-intro p.rg-strong { color: #fff; font-weight: 800; }

/* Карточка с принципами */
.rg-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 40px 44px;
  margin-bottom: 40px;
}
.rg-card .rg-h2 { margin-bottom: 28px; }
.rg-principles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 36px 40px;
}
.rg-principle { min-width: 0; }
.rg-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 900;
  margin-bottom: 16px;
}
.rg-principle-title {
  font-size: 17px; font-weight: 800; color: #fff;
  margin-bottom: 12px; line-height: 1.25;
}
.rg-principle-text {
  color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0;
}

/* Тест */
.rg-test { margin-bottom: 36px; }
.rg-test p {
  color: var(--text-dim); font-size: 15px; line-height: 1.6;
  margin: 0 0 16px; max-width: 860px;
}
.rg-questions {
  list-style: none; counter-reset: rgq; padding: 0; margin: 8px 0 0;
}
.rg-questions li {
  color: var(--text-dim); font-size: 15px; line-height: 1.5;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.rg-questions li:last-child { border-bottom: 0; }

/* Итоги */
.rg-results { margin-bottom: 20px; }
.rg-result { margin-bottom: 22px; }
.rg-result-score { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.rg-result-text { color: var(--text-dim); font-size: 15px; line-height: 1.55; max-width: 860px; }

/* Светлая тема */
.theme-light .rg-title,
.theme-light .rg-h2,
.theme-light .rg-intro p.rg-strong,
.theme-light .rg-principle-title,
.theme-light .rg-result-score { color: #15171c; }
.theme-light .rg-card { background: #f5f6f8; }
.theme-light .rg-intro p,
.theme-light .rg-test p,
.theme-light .rg-principle-text,
.theme-light .rg-questions li,
.theme-light .rg-result-text { color: #6b7280; }
.theme-light .rg-questions li { border-bottom-color: #e1e3e8; }

/* Адаптив */
@media (max-width: 900px) {
  .rg-principles { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .rg-card { padding: 28px 22px; }
}
@media (max-width: 560px) {
  .rg-principles { grid-template-columns: 1fr; }
  .rg-title { font-size: 26px; }
  .rg-h2 { font-size: 19px; }
}

/* ================================================================
   Страница «Частые вопросы» (FAQ — аккордеон)
   ================================================================ */
.faq-page { max-width: 1120px; margin: 0 auto; padding: 8px 0 40px; }
.faq-title { font-size: 34px; font-weight: 900; margin-bottom: 26px; letter-spacing: -0.02em; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
}
.faq-q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px;
  font-size: 16px; font-weight: 700; color: #fff;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-chevron { flex-shrink: 0; color: var(--text-dim); transition: transform .2s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-a {
  padding: 0 24px 22px;
  color: var(--text-dim); font-size: 15px; line-height: 1.6;
  max-width: 900px;
}
.theme-light .faq-title { color: #15171c; }
.theme-light .faq-item { background: #f5f6f8; }
.theme-light .faq-q { color: #15171c; }
.theme-light .faq-a { color: #6b7280; }

/* ================================================================
   Страница «Документация» (список PDF-ссылок)
   ================================================================ */
.docs-page { max-width: 1120px; margin: 0 auto; padding: 8px 0 40px; }
.docs-title { font-size: 34px; font-weight: 900; margin-bottom: 26px; letter-spacing: -0.02em; }
.docs-list { display: flex; flex-direction: column; gap: 12px; }
.docs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px;
  background: var(--bg-card); border-radius: 12px;
  font-size: 16px; font-weight: 700; color: #fff;
  transition: background .15s;
}
.docs-row:hover { background: var(--bg-card-2); }
.docs-row-title { min-width: 0; }
.docs-row-arrow { flex-shrink: 0; color: var(--text-dim); }
.docs-row:hover .docs-row-arrow { color: var(--accent); }
.theme-light .docs-title { color: #15171c; }
.theme-light .docs-row { background: #f5f6f8; color: #15171c; }
.theme-light .docs-row:hover { background: #eef0f4; }

@media (max-width: 560px) {
  .docs-title { font-size: 24px; }
  .docs-row { padding: 16px; font-size: 15px; }
}

/* ================================================================
   Документ-страница (Согласие / Персональные данные)
   ================================================================ */
.doc-page { max-width: 1000px; margin: 0 auto; padding: 8px 0 50px; }
.doc-title { font-size: 32px; font-weight: 900; margin-bottom: 22px; letter-spacing: -0.02em; line-height: 1.15; }
.doc-h2 { font-size: 22px; font-weight: 800; margin: 30px 0 14px; letter-spacing: -0.01em; }
.doc-page p {
  color: var(--text-dim); font-size: 15px; line-height: 1.65; margin: 0 0 16px;
}
.doc-link { color: var(--accent); font-weight: 700; text-decoration: underline; }
.doc-link:hover { color: var(--accent-hover); }
.doc-logo { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; margin: 24px 0 22px; }
.doc-logo .bet { color: #fff; }
.doc-logo .boom { color: var(--accent); }
.theme-light .doc-logo .bet { color: #0b0b00; }
.doc-list { margin: 0 0 16px; padding-left: 20px; }
.doc-list li {
  color: var(--text-dim); font-size: 15px; line-height: 1.6;
  margin-bottom: 12px;
}
.doc-list li::marker { color: var(--text-mute); }
.theme-light .doc-title, .theme-light .doc-h2 { color: #15171c; }
.theme-light .doc-page p,
.theme-light .doc-list li { color: #6b7280; }

@media (max-width: 560px) {
  .faq-title, .doc-title { font-size: 24px; }
  .faq-q { padding: 16px 16px; font-size: 15px; }
  .faq-a { padding: 0 16px 18px; }
  .doc-h2 { font-size: 19px; }
}

/* ================================================================
   Responsive additions
   ================================================================ */
@media (max-width: 768px) {
  .prof-form-grid { grid-template-columns: 1fr; }
  .prof-hero { flex-wrap: wrap; gap: 14px; }
  .prof-hero-btn { width: 100%; }
  .footer-org-partners { gap: 14px; }
  .footer-org-partners img { height: 20px; }
  .footer-apps-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .auth-card { padding: 24px 18px; }
}
@media (max-width: 480px) {
  .prof-hero { padding: 16px; }
  .prof-avatar { width: 48px; height: 48px; font-size: 20px; }
  .prof-hero-name { white-space: normal; overflow-wrap: anywhere; }
  .prof-badge, .prof-badge-balance { font-size: 10px; }
  .auth-form-grid { grid-template-columns: 1fr; }
  .account-sidebar nav { grid-template-columns: 1fr; }
  .support-item-head { align-items: flex-start; flex-direction: column; }
  .history-empty { padding: 40px 12px; }
}

/* ================================================================
   Купон → панель Настройки (скрыта, показывается по клику шестерёнки)
   ================================================================ */
.bb-coupon-settings-view {
  padding: 14px 18px 22px;
  display: flex; flex-direction: column; gap: 22px;
}
.bb-coupon-settings-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 4px;
}
.bb-coupon-settings-back {
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0;
}
.bb-coupon-settings-back:hover { background: #1a1d25; color: var(--accent); }
.bb-coupon-settings-head h3 {
  font-size: 18px; font-weight: 900; margin: 0;
  color: #fff;
}

/* Секция */
.bb-settings-section { display: flex; flex-direction: column; gap: 10px; }
.bb-settings-section-head {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-dim); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.bb-settings-add {
  width: 22px; height: 22px; border-radius: 50%;
  background: #1a1d25; color: var(--accent);
  font-size: 16px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bb-settings-add:hover { background: var(--accent); color: var(--accent-ink); }

/* Шаблоны суммы ставки — 2-колоночный grid */
.bb-stake-templates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.bb-stake-template {
  position: relative;
  background: #14161c; border-radius: 10px;
  padding: 10px 38px 10px 12px;
}
.bb-stake-template input {
  width: 100%; background: transparent; border: 0; outline: none;
  color: #fff; font-weight: 800; font-size: 15px;
  padding: 0; margin-bottom: 2px;
}
.bb-stake-template input::-webkit-outer-spin-button,
.bb-stake-template input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.bb-stake-template input { -moz-appearance: textfield; }
.bb-stake-template input::after { content: " ₸"; }
.bb-tpl-label {
  display: block; color: var(--text-mute); font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.bb-tpl-del {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 6px;
  background: transparent; color: var(--text-mute);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bb-tpl-del:hover { background: rgba(239,65,70,.15); color: var(--red); }

/* Радиокнопки тип коэф */
.bb-radio-row {
  display: flex; align-items: center; gap: 12px;
  background: #14161c; border-radius: 10px;
  padding: 12px 14px; cursor: pointer;
  position: relative;
}
.bb-radio-row input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.bb-radio-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #3a4050; flex-shrink: 0;
  position: relative; transition: border-color .15s;
}
.bb-radio-row input[type="radio"]:checked + .bb-radio-dot {
  border-color: var(--accent);
}
.bb-radio-row input[type="radio"]:checked + .bb-radio-dot::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--accent); border-radius: 50%;
}
.bb-radio-label { flex: 1; color: #fff; font-weight: 700; font-size: 14px; }
.bb-radio-sample {
  color: var(--text-dim); font-weight: 700; font-size: 13px;
}

/* Тумблер */
.bb-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 4px; cursor: pointer;
}
.bb-toggle-label { color: #fff; font-size: 13px; font-weight: 600; flex: 1; }
.bb-toggle-row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.bb-switch {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: 999px;
  background: #2a2f3a; transition: background .15s;
}
.bb-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.bb-toggle-row input[type="checkbox"]:checked ~ .bb-switch {
  background: var(--accent);
}
.bb-toggle-row input[type="checkbox"]:checked ~ .bb-switch::after {
  transform: translateX(16px);
}