:root {
     --bg-badge-multi: #fd5d26;
     --bg-badge-new: var(--ui-green-normal);
     --bg-badge-promo: var(--ui-orange-normal);
     --bg-betbuilder-inputfield: #293d62;
     --bg-betbuilder-main: var(--surface-contrast);
     --bg-betslip-betitem: var(--core-primary);
     --bg-betslip-main: var(--bg-body);
     --bg-betslip-placebetbar: var(--surface-contrast);
     --bg-betslip-tray: var(--bg-betslip-placebetbar);
     --bg-body: var(--surface-light);
     --bg-button-brand-default: var(--ui-brand-100);
     --bg-button-confirm-default: var(--bg-button-brand-default);
     --bg-button-disabled-default: var(--surface-moderate);
     --bg-button-numpad-default: #15294e;
     --bg-button-numpad-pressed: #33476c;
     --bg-button-odds-active: #fff700;
     --bg-button-odds-default: var(--surface-moderate);
     --bg-button-odds-disabled: var(--surface-moderate);
     --bg-button-odds-favourite: var(--ui-brand-200);
     --bg-button-primary-default: var(--surface-contrast);
     --bg-button-racenav-app-next: var(--bg-raceheader-app-primary);
     --bg-button-racenav-app-previous: var(--bg-raceheader-app-primary);
     --bg-button-racenav-app-selected: var(--bg-button-racenav-selected);
     --bg-button-racenav-next: var(--bg-raceheader-primary);
     --bg-button-racenav-previous: var(--bg-raceheader-primary);
     --bg-button-racenav-selected: #fff700;
     --bg-button-reward: var(--bg-button-secondary-default);
     --bg-button-secondary-default: var(--surface-light);
     --bg-button-success-default: var(--ui-green-normal);
     --bg-button-topnav-primary: #fff700;
     --bg-button-topnav-secondary: var(--ui-brand-200);
     --bg-button-vision: var(--ui-green-normal);
     --bg-checkbox-active: var(--bg-button-racenav-selected);
     --bg-checkbox-default: var(--core-primary);
     --bg-checkbox-disabled: var(--surface-light);
     --bg-checkbox-hover: var(--ui-brand-50);
     --bg-filter-active: var(--ui-brand-50);
     --bg-filter-default: var(--surface-moderate);
     --bg-flucs-down-active: var(--ui-red-normal);
     --bg-flucs-down-default: var(--ui-red-normal);
     --bg-flucs-up-active: var(--ui-green-normal);
     --bg-flucs-up-default: var(--ui-green-normal);
     --bg-hover: var(--surface-feather);
     --bg-inputfield-default: var(--core-primary);
     --bg-inputfield-disabled: var(--surface-feather);
     --bg-margin: var(--surface-moderate);
     --bg-navigation-bottomnav: var(--ui-white-normal);
     --bg-navigation-footer: var(--surface-moderate);
     --bg-navigation-leftnav-child: var(--bg-navigation-leftnav-main);
     --bg-navigation-leftnav-hover: var(--surface-feather);
     --bg-navigation-leftnav-main: var(--core-primary);
     --bg-navigation-leftnav-selected: var(--bg-navigation-leftnav-main);
     --bg-navigation-topnav: var(--ui-brand-100);
     --bg-navigation-upnext: #07072a;
     --bg-numpad-main: var(--surface-contrast);
     --bg-raceheader-app-dropdown: var(--bg-raceheader-dropdown);
     --bg-raceheader-app-primary: var(--bg-raceheader-primary);
     --bg-raceheader-dropdown: var(--bg-button-topnav-secondary);
     --bg-raceheader-primary: var(--bg-navigation-topnav);
     --bg-racenumber-active: var(--bg-button-odds-active);
     --bg-racenumber-inactive: var(--surface-feather);
     --bg-racerow-inset-container: var(--surface-feather);
     --bg-racerow-inset-flucs: var(--surface-feather);
     --bg-racerow-inset-form: var(--surface-moderate);
     --bg-racerow-racelab-leftgradient: var(--surface-contrast);
     --bg-racerow-racelab-rating: var(--surface-moderate);
     --bg-racerow-racelab-rightgradient: var(--ui-brand-200);
     --bg-resultplace-first: #fcd667;
     --bg-resultplace-fourth: #eef0f2;
     --bg-resultplace-second: #c5d0ce;
     --bg-resultplace-third: #deb472;
     --bg-reward-bonus: #9be53b;
     --bg-reward-boost: #d2afff;
     --bg-reward-depositmatch: #fcc432;
     --bg-reward-moneyback: #4af2d4;
     --bg-search-highlight: #ffd54f;
     --bg-segment-active: var(--core-primary);
     --bg-segment-main: var(--surface-moderate);
     --bg-signup-bottomgradient: var(--ui-brand-200);
     --bg-signup-topgradient: var(--ui-brand-100);
     --bg-speedmap-positionbox: var(--surface-light);
     --bg-speedmap-primary: var(--ui-brand-100);
     --bg-sportheader-app-primary: var(--bg-sportheader-primary);
     --bg-sportheader-app-secondary: var(--bg-sportheader-secondary);
     --bg-sportheader-app-tertiary: var(--bg-sportheader-tertiary);
     --bg-sportheader-primary: var(--bg-navigation-topnav);
     --bg-sportheader-secondary: var(--bg-button-topnav-primary);
     --bg-sportheader-tertiary: var(--ui-brand-200);
     --bg-story-main: var(--bg-button-topnav-secondary);
     --bg-story-skeleton: #3232cd;
     --bg-switch-active: var(--surface-contrast);
     --bg-switch-default: var(--surface-moderate);
     --bg-tab-primary: var(--ui-brand-200);
     --bg-tab-secondary: var(--surface-strong);
     --bg-table-highlight: var(--ui-brand-50);
     --bg-table-main: var(--surface-contrast);
     --bg-table-resulted: var(--surface-light);
     --bg-tag-active: var(--ui-brand-50);
     --bg-tag-default: var(--core-primary);
     --bg-timer-alert: var(--ui-red-light);
     --bg-timer-closed: var(--surface-feather);
     --bg-timer-live: var(--ui-green-light);
     --bg-timer-upcoming: var(--ui-brand-50);
     --bg-toast-alert: var(--surface-contrast);
     --bg-toast-success: var(--surface-contrast);
     --bg-toggle-active: var(--ui-brand-50);
     --bg-toggle-default: var(--core-primary);
     --bg-tooltip: var(--ui-brand-100);
     --bg-widget: var(--ui-brand-200);
     --border-accordion: var(--ui-brand-100);
     --border-app-topnav: var(--border-topnav);
     --border-carousel-active: var(--ui-brand-200);
     --border-carousel-inactive: var(--surface-moderate);
     --border-filter-active: var(--ui-brand-100);
     --border-input-active: var(--ui-brand-100);
     --border-leftnav: var(--border-primary);
     --border-odds: var(--text-white);
     --border-primary: var(--surface-moderate);
     --border-progressbar: var(--ui-brand-200);
     --border-secondary: var(--surface-light);
     --border-story-active: var(--bg-button-topnav-primary);
     --border-story-inactive: var(--surface-bold);
     --border-tag-active: var(--ui-brand-100);
     --border-toggle-active: var(--ui-brand-100);
     --border-topnav: var(--bg-navigation-topnav);
     --border-upnext-active: var(--bg-button-topnav-primary);
     --border-widget: var(--bg-button-odds-active);
     --core-primary: #ffffff;
     --core-secondary: #ffffff;
     --shadow-color-main: rgba(155, 161, 171, 0.10000000149011612);
     --shadow-color-md: rgba(155, 161, 171, 0.11999999731779099);
     --surface-bold: #8792a4;
     --surface-contrast: #0b1830;
     --surface-feather: #f3f7fc;
     --surface-light: #edf1f7;
     --surface-moderate: #dae2eb;
     --surface-strong: #495771;
     --text-betslipheader: var(--text-primary);
     --text-black: var(--surface-contrast);
     --text-button-brand: var(--text-white);
     --text-button-confirm: var(--text-button-brand);
     --text-button-disabled: var(--text-tertiary);
     --text-button-odds-active: var(--text-primary);
     --text-button-odds-default: var(--text-primary);
     --text-button-odds-disabled: var(--text-tertiary);
     --text-button-primary: var(--text-white);
     --text-button-racenav-app-dropdown: var(--text-button-racenav-dropdown);
     --text-button-racenav-app-next: var(--text-button-racenav-next);
     --text-button-racenav-app-previous: var(--text-button-racenav-previous);
     --text-button-racenav-app-selected: var(--text-button-racenav-selected);
     --text-button-racenav-drop-next: var(--text-button-odds-default);
     --text-button-racenav-dropdown: var(--text-white);
     --text-button-racenav-next: var(--text-white);
     --text-button-racenav-previous: #aaaaf5;
     --text-button-racenav-selected: var(--text-primary);
     --text-button-secondary: var(--text-primary);
     --text-button-success: var(--text-white);
     --text-button-vision: var(--text-white);
     --text-checkbox-active: var(--text-primary);
     --text-checkbox-disabled: var(--surface-moderate);
     --text-filter-active: var(--text-primary);
     --text-filter-default: var(--text-primary);
     --text-inverse: var(--ui-white-normal);
     --text-link: var(--ui-brand-100);
     --text-navigation-betslip-count: var(--text-navigation-topnav-primary);
     --text-navigation-betslip-icon: var(--bg-button-odds-active);
     --text-navigation-bottomnav-active: var(--ui-brand-100);
     --text-navigation-bottomnav-default: var(--text-primary);
     --text-navigation-bottomnav-mybets-active: var(--bg-navigation-bottomnav);
     --text-navigation-bottomnav-mybets-default: var(--text-white);
     --text-navigation-leftnav: var(--surface-contrast);
     --text-navigation-topnav-primary: var(--text-primary);
     --text-navigation-topnav-secondary: var(--text-white);
     --text-navigation-topnav-tertiary: var(--text-white);
     --text-primary: var(--surface-contrast);
     --text-racenumber-active: var(--text-primary);
     --text-racenumber-inactive: var(--text-tertiary);
     --text-search-highlight: var(--text-primary);
     --text-secondary: var(--surface-strong);
     --text-status-error: var(--text-white);
     --text-status-success: var(--text-white);
     --text-story: var(--text-navigation-topnav-tertiary);
     --text-tab-active: var(--text-white);
     --text-tab-default: var(--surface-strong);
     --text-tag-active: var(--text-primary);
     --text-tag-default: var(--text-primary);
     --text-tertiary: var(--surface-bold);
     --text-timer-alert: var(--ui-red-normal);
     --text-timer-closed: var(--text-black);
     --text-timer-live: var(--ui-green-normal);
     --text-timer-upcoming: var(--text-link);
     --text-toast: var(--text-white);
     --text-toggle-active: var(--text-primary);
     --text-toggle-default: var(--text-primary);
     --text-tooltip: var(--text-white);
     --text-white: var(--ui-white-normal);
     --ui-brand-100: #0000ff;
     --ui-brand-200: #00009b;
     --ui-brand-50: #ebebff;
     --ui-green-light: #dbfbd9;
     --ui-green-normal: #2fc147;
     --ui-orange-light: #fff8e7;
     --ui-orange-normal: #f09e00;
     --ui-red-light: #ffeff4;
     --ui-red-normal: #e11748;
     --ui-white-normal: #ffffff;
       --bd-navy: #05082e;
      --bd-blue: #0800ff;
      --bd-blue-dark: #0300bd;
      --bd-yellow: #fff200;
      --bd-yellow-soft: #fff86a;
      --bd-bg: #eaf0f8;
      --bd-card: #ffffff;
      --bd-muted: #6f7f95;
      --bd-text: #07142f;
      --bd-line: #d8e1ec;
      --bd-shadow: 0 22px 60px rgba(5, 8, 46, 0.28);
      --radius-xl: 24px;
      --radius-lg: 18px;
      --radius-md: 12px;
 }
   .overlay {
      position: fixed;
      inset: 0;
      z-index: 9998;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(5, 8, 46, 0.72);
      backdrop-filter: blur(10px);
    }

    .overlay.is-open { display: flex; }

    .age-card,
    .cookie-card,
    .cookie-settings {
      width: min(100%, 520px);
      background: var(--bd-card);
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: var(--radius-xl);
      box-shadow: var(--bd-shadow);
      overflow: hidden;
      animation: popIn .22s ease-out;
    }

    @keyframes popIn {
      from { transform: translateY(14px) scale(.98); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }

    .modal-head {
      position: relative;
      padding: 24px 24px 22px;
      color: white;
      background:
        radial-gradient(circle at 88% 16%, rgba(255,242,0,.38), transparent 24%),
        linear-gradient(135deg, var(--bd-blue), #061159 68%, var(--bd-navy));
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      font-weight: 950;
      letter-spacing: -0.04em;
      color: white;
      font-size: 22px;
    }

    .brand-mark {
      position: relative;
      width: 26px;
      height: 26px;
      display: inline-block;
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      top: 3px;
      width: 10px;
      height: 20px;
      background: var(--bd-yellow);
      transform: skewX(-24deg);
      border-radius: 2px;
    }

    .brand-mark::before { left: 2px; }
    .brand-mark::after { left: 14px; }

    .modal-head h2 {
      margin: 0;
      font-size: clamp(28px, 5vw, 42px);
      line-height: .95;
      letter-spacing: -0.06em;
      text-transform: uppercase;
    }

    .modal-head p {
      margin: 12px 0 0;
      max-width: 420px;
      color: rgba(255,255,255,.84);
      line-height: 1.5;
      font-size: 15px;
    }

    .pill-18 {
      position: absolute;
      top: 22px;
      right: 22px;
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--bd-yellow);
      color: var(--bd-navy);
      font-size: 22px;
      font-weight: 950;
      box-shadow: 0 12px 26px rgba(255, 242, 0, .28);
    }

    .modal-body { padding: 24px; }

    .notice {
      display: flex;
      gap: 12px;
      padding: 14px;
      border-radius: var(--radius-md);
      background: #eef4ff;
      border: 1px solid var(--bd-line);
      color: #1b2a45;
      font-size: 14px;
      line-height: 1.45;
    }

    .notice strong { display: block; margin-bottom: 2px; }

    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 20px;
    }

    .btn {
      border: 0;
      border-radius: 999px;
      min-height: 48px;
      padding: 0 20px;
      font-weight: 850;
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
      font-size: 15px;
    }

    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }

    .btn-primary {
      background: var(--bd-yellow);
      color: var(--bd-navy);
      box-shadow: 0 10px 24px rgba(255,242,0,.32);
    }

    .btn-primary:hover { background: var(--bd-yellow-soft); }

    .btn-secondary {
      color: white;
      background: var(--bd-navy);
    }

    .btn-ghost {
      color: var(--bd-navy);
      background: #e8eef7;
    }

    .fineprint {
      margin: 16px 0 0;
      color: var(--bd-muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .cookie-banner {
      position: fixed;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 9997;
      display: none;
      justify-content: center;
      pointer-events: none;
    }

    .cookie-banner.is-open { display: flex; }

    .cookie-card {
      width: min(100%, 940px);
      pointer-events: auto;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 18px;
      padding: 18px;
      border: 1px solid var(--bd-line);
    }

    .cookie-copy {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      align-items: start;
    }

    .cookie-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: var(--bd-navy);
      color: var(--bd-yellow);
      font-size: 22px;
    }

    .cookie-copy h3 {
      margin: 0 0 5px;
      font-size: 18px;
      letter-spacing: -0.03em;
    }

    .cookie-copy p {
      margin: 0;
      color: var(--bd-muted);
      line-height: 1.45;
      font-size: 14px;
    }

    .cookie-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .cookie-actions .btn { min-height: 42px; font-size: 14px; }

    .settings-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(5, 8, 46, .58);
      backdrop-filter: blur(8px);
    }

    .settings-overlay.is-open { display: flex; }

    .cookie-settings { width: min(100%, 620px); }

    .settings-top {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 24px;
      color: white;
      background: linear-gradient(135deg, var(--bd-blue), var(--bd-navy));
    }

    .settings-top h2 {
      margin: 0 0 8px;
      font-size: 26px;
      letter-spacing: -0.04em;
    }

    .settings-top p {
      margin: 0;
      color: rgba(255,255,255,.78);
      line-height: 1.45;
      font-size: 14px;
    }

    .close-btn {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 50%;
      cursor: pointer;
      color: var(--bd-navy);
      background: var(--bd-yellow);
      font-size: 22px;
      line-height: 1;
      font-weight: 900;
    }

    .settings-body { padding: 18px 24px 24px; }

    .cookie-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 16px 0;
      border-bottom: 1px solid var(--bd-line);
    }

    .cookie-option:last-child { border-bottom: 0; }

    .cookie-option h4 {
      margin: 0 0 4px;
      font-size: 16px;
    }

    .cookie-option p {
      margin: 0;
      color: var(--bd-muted);
      line-height: 1.4;
      font-size: 13px;
    }

    .switch {
      position: relative;
      width: 58px;
      height: 32px;
      flex: 0 0 auto;
    }

    .switch input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: #ccd7e5;
      cursor: pointer;
      transition: .18s ease;
    }

    .slider::before {
      content: "";
      position: absolute;
      width: 24px;
      height: 24px;
      top: 4px;
      left: 4px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 3px 8px rgba(5, 8, 46, .25);
      transition: .18s ease;
    }

    .switch input:checked + .slider { background: var(--bd-blue); }
    .switch input:checked + .slider::before { transform: translateX(26px); }
    .switch input:disabled + .slider { opacity: .72; cursor: not-allowed; }

    .settings-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
      flex-wrap: wrap;
    }

    .blocked-message {
      display: none;
      margin-top: 16px;
      padding: 12px 14px;
      border-radius: var(--radius-md);
      background: #fff3f3;
      color: #8a1532;
      border: 1px solid #ffd1d9;
      font-size: 14px;
      line-height: 1.45;
    }

    .blocked-message.is-visible { display: block; }

    /* Login / Sign Up / Forgot Password modals */
    .auth-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(5, 8, 46, .62);
      backdrop-filter: blur(8px);
    }

    .auth-overlay.is-open { display: flex; }

    .auth-modal {
      width: min(100%, 520px);
      max-height: calc(100vh - 36px);
      overflow: auto;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 22px 70px rgba(5, 8, 46, .32);
      padding: 34px 32px;
      animation: popIn .22s ease-out;
    }

    .auth-modal.auth-modal-wide { width: min(100%, 760px); }

    .auth-modal-head {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 24px;
    }

    .auth-modal h2 {
      margin: 0;
      color: var(--bd-text);
      font-size: clamp(24px, 4vw, 34px);
      line-height: 1.1;
      letter-spacing: -0.04em;
      text-align: center;
      font-weight: 900;
    }

    .auth-close {
      position: absolute;
      right: -10px;
      top: -16px;
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 50%;
      background: #eef3fa;
      color: var(--bd-text);
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
      display: grid;
      place-items: center;
    }

    .auth-form { display: grid; gap: 14px; }
    .form-group { display: grid; gap: 7px; }

    .form-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .form-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .auth-form label {
      color: #465575;
      font-size: 14px;
      font-weight: 800;
    }

    .auth-form input {
      width: 100%;
      min-height: 48px;
      border: 1px solid #ccd8e7;
      border-radius: 10px;
      padding: 0 14px;
      color: var(--bd-text);
      font-size: 16px;
      outline: none;
      background: #fff;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .auth-form input:focus {
      border-color: var(--bd-blue);
      box-shadow: 0 0 0 2px rgba(8, 0, 255, .14);
    }

    .password-field { position: relative; }
    .password-field input { padding-right: 44px; }

    .toggle-password {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      border: 0;
      background: transparent;
      cursor: pointer;
      color: var(--bd-text);
      font-size: 16px;
      padding: 5px;
    }

    .helper-text {
      margin: -2px 0 10px;
      color: var(--bd-text);
      font-weight: 800;
      font-size: 14px;
      line-height: 1.35;
    }

    .auth-submit {
      width: 100%;
      min-height: 50px;
      margin-top: 8px;
      border: 0;
      border-radius: 9px;
      background: var(--bd-navy);
      color: white;
      font-weight: 900;
      cursor: pointer;
      text-transform: uppercase;
      font-size: 15px;
      transition: transform .16s ease, background .16s ease;
    }

    .auth-submit:hover { transform: translateY(-1px); background: #0b1736; }

    .auth-links,
    .auth-small-links {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      color: #465575;
      font-size: 14px;
    }

    .auth-small-links {
      justify-content: center;
      flex-wrap: wrap;
      font-size: 15px;
    }

    .auth-links a,
    .auth-small-links a,
    .inline-link {
      color: var(--bd-blue);
      text-decoration: underline;
      cursor: pointer;
      font-weight: 500;
      background: none;
      border: 0;
      padding: 0;
      font: inherit;
    }

    .terms-text {
      margin: 28px 0 0;
      color: #465575;
      font-size: 17px;
      line-height: 1.25;
    }

    .auth-message {
      display: none;
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid #ccebd6;
      background: #eefcf3;
      color: #09672e;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 700;
    }

    .auth-message.is-visible { display: block; }

    @media (max-width: 760px) { 
      .cookie-card { grid-template-columns: 1fr; }
      .cookie-actions { justify-content: stretch; }
      .cookie-actions .btn { flex: 1 1 auto; }
      .actions { grid-template-columns: 1fr; }
      .pill-18 { width: 54px; height: 54px; font-size: 19px; }
    }