:root {
     --bg-badge-multi: #8390fa;
     --bg-badge-new: #44800f;
     --bg-badge-promo: var(--ui-orange-normal);
     --bg-betbuilder-inputfield: var(--surface-contrast);
     --bg-betbuilder-main: var(--surface-moderate);
     --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: #0a0a0a;
     --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: var(--surface-strong);
     --bg-button-numpad-pressed: var(--surface-bold);
     --bg-button-odds-active: var(--ui-brand-100);
     --bg-button-odds-default: #373737;
     --bg-button-odds-disabled: #363636;
     --bg-button-odds-favourite: #8390fa;
     --bg-button-primary-default: var(--ui-brand-100);
     --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: var(--ui-brand-100);
     --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: var(--ui-brand-100);
     --bg-button-topnav-secondary: #323232;
     --bg-button-vision: var(--ui-brand-100);
     --bg-checkbox-active: var(--ui-brand-100);
     --bg-checkbox-default: var(--surface-light);
     --bg-checkbox-disabled: var(--surface-contrast);
     --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-moderate);
     --bg-inputfield-default: var(--surface-contrast);
     --bg-inputfield-disabled: var(--surface-strong);
     --bg-margin: var(--surface-bold);
     --bg-navigation-bottomnav: var(--surface-contrast);
     --bg-navigation-footer: var(--surface-bold);
     --bg-navigation-leftnav-child: var(--bg-navigation-leftnav-main);
     --bg-navigation-leftnav-hover: var(--surface-moderate);
     --bg-navigation-leftnav-main: var(--core-primary);
     --bg-navigation-leftnav-selected: var(--bg-navigation-leftnav-main);
     --bg-navigation-topnav: #000000;
     --bg-navigation-upnext: #1a1a1a;
     --bg-numpad-main: #0a0a0a;
     --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(--core-primary);
     --bg-racenumber-active: var(--ui-brand-100);
     --bg-racenumber-inactive: var(--surface-feather);
     --bg-racerow-inset-container: var(--surface-light);
     --bg-racerow-inset-flucs: var(--surface-contrast);
     --bg-racerow-inset-form: var(--surface-strong);
     --bg-racerow-racelab-leftgradient: var(--surface-contrast);
     --bg-racerow-racelab-rating: var(--surface-light);
     --bg-racerow-racelab-rightgradient: #d9c52c;
     --bg-resultplace-first: #fcd667;
     --bg-resultplace-fourth: #eef0f2;
     --bg-resultplace-second: #c5d0ce;
     --bg-resultplace-third: #deb472;
     --bg-reward-bonus: #9be53b;
     --bg-reward-boost: #8390fa;
     --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(--surface-contrast);
     --bg-signup-topgradient: var(--surface-strong);
     --bg-speedmap-positionbox: var(--surface-moderate);
     --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(--core-primary);
     --bg-sportheader-secondary: var(--ui-brand-100);
     --bg-sportheader-tertiary: var(--core-secondary);
     --bg-story-main: var(--bg-navigation-topnav);
     --bg-story-skeleton: var(--bg-button-topnav-secondary);
     --bg-switch-active: var(--ui-brand-100);
     --bg-switch-default: var(--surface-light);
     --bg-tab-primary: var(--ui-brand-100);
     --bg-tab-secondary: var(--surface-contrast);
     --bg-table-highlight: var(--ui-brand-50);
     --bg-table-main: var(--surface-contrast);
     --bg-table-resulted: var(--surface-moderate);
     --bg-tag-active: var(--ui-brand-100);
     --bg-tag-default: var(--core-primary);
     --bg-timer-alert: var(--ui-red-normal);
     --bg-timer-closed: var(--surface-contrast);
     --bg-timer-live: var(--ui-green-normal);
     --bg-timer-upcoming: var(--surface-feather);
     --bg-toast-alert: var(--ui-red-light);
     --bg-toast-success: var(--ui-green-light);
     --bg-toggle-active: var(--ui-brand-50);
     --bg-toggle-default: var(--core-primary);
     --bg-tooltip: var(--ui-brand-200);
     --bg-widget: var(--surface-bold);
     --border-accordion: var(--ui-brand-200);
     --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-200);
     --border-input-active: var(--text-link);
     --border-leftnav: var(--border-primary);
     --border-odds: var(--core-primary);
     --border-primary: var(--surface-bold);
     --border-progressbar: var(--ui-brand-200);
     --border-secondary: var(--surface-bold);
     --border-story-active: var(--border-widget);
     --border-story-inactive: var(--surface-bold);
     --border-tag-active: var(--ui-brand-200);
     --border-toggle-active: var(--ui-brand-200);
     --border-topnav: var(--border-primary);
     --border-upnext-active: var(--ui-brand-100);
     --border-widget: var(--ui-brand-200);
     --core-primary: #181818;
     --core-secondary: #222222;
     --shadow-color-main: #000000;
     --shadow-color-md: #000000;
     --surface-bold: #252424;
     --surface-contrast: #121212;
     --surface-feather: #393939;
     --surface-light: #363636;
     --surface-moderate: #2c2c2c;
     --surface-strong: #1e1e1e;
     --text-betslipheader: var(--text-black);
     --text-black: var(--surface-contrast);
     --text-button-brand: var(--text-black);
     --text-button-confirm: var(--text-button-brand);
     --text-button-disabled: var(--text-tertiary);
     --text-button-odds-active: var(--text-black);
     --text-button-odds-default: var(--text-primary);
     --text-button-odds-disabled: var(--text-tertiary);
     --text-button-primary: var(--text-black);
     --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-primary);
     --text-button-racenav-previous: var(--text-tertiary);
     --text-button-racenav-selected: var(--text-black);
     --text-button-secondary: var(--text-primary);
     --text-button-success: var(--text-black);
     --text-button-vision: var(--text-black);
     --text-checkbox-active: var(--text-black);
     --text-checkbox-disabled: var(--text-black);
     --text-filter-active: var(--ui-brand-100);
     --text-filter-default: var(--text-primary);
     --text-inverse: var(--surface-contrast);
     --text-link: #e7eb44;
     --text-navigation-betslip-count: var(--text-navigation-topnav-primary);
     --text-navigation-betslip-icon: var(--ui-green-normal);
     --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(--text-primary);
     --text-navigation-topnav-primary: var(--text-black);
     --text-navigation-topnav-secondary: var(--text-white);
     --text-navigation-topnav-tertiary: var(--text-white);
     --text-primary: var(--text-white);
     --text-racenumber-active: var(--text-black);
     --text-racenumber-inactive: var(--text-tertiary);
     --text-search-highlight: var(--text-black);
     --text-secondary: #c5c5c5;
     --text-status-error: var(--text-white);
     --text-status-success: var(--text-black);
     --text-story: var(--text-navigation-topnav-tertiary);
     --text-tab-active: var(--text-black);
     --text-tab-default: var(--text-white);
     --text-tag-active: var(--text-black);
     --text-tag-default: var(--text-primary);
     --text-tertiary: #736f6f;
     --text-timer-alert: var(--ui-white-normal);
     --text-timer-closed: var(--ui-white-normal);
     --text-timer-live: var(--ui-white-normal);
     --text-timer-upcoming: var(--ui-white-normal);
     --text-toast: var(--text-white);
     --text-toggle-active: var(--ui-brand-100);
     --text-toggle-default: var(--text-primary);
     --text-tooltip: var(--text-black);
     --text-white: var(--ui-white-normal);
     --ui-brand-100: #fbff58;
     --ui-brand-200: #fbff58;
     --ui-brand-50: #2a2b00;
     --ui-green-light: #1b2e12;
     --ui-green-normal: #a8e473;
     --ui-orange-light: #541f00;
     --ui-orange-normal: #fc7600;
     --ui-red-light: #430f11;
     --ui-red-normal: #ff5050;
     --ui-white-normal: #f2f2f2;

     --bb-yellow: #f4ff2f;
     --bb-black: #050505;
     --bb-dark: #111111;
     --bb-card: #1b1b1b;
     --bb-grey: #2a2a2a;
     --bb-text: #ffffff;
     --bb-muted: #b8b8b8;
     --bb-border: rgba(244, 255, 47, 0.22);
 }

 .btn-primary,
 .btn-secondary {
     border: 0;
     border-radius: 999px;
     padding: 12px 20px;
     font-weight: 800;
     font-size: 14px;
     cursor: pointer;
     transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
 }

 .btn-primary {
     background: var(--bb-yellow);
     color: #000;
 }

 .btn-secondary {
     background: #2b2b2b;
     color: var(--bb-text);
 }

 .btn-primary:hover,
 .btn-secondary:hover {
     transform: translateY(-1px);
     opacity: 0.92;
 }


 .age-gate {
     position: fixed;
     inset: 0;
     z-index: 9999;
     display: none;
     align-items: center;
     justify-content: center;
     background:
         radial-gradient(circle at top, rgba(244, 255, 47, 0.16), transparent 35%),
         rgba(0, 0, 0, 0.88);
     padding: 20px;
 }

 .age-gate.is-active {
     display: flex;
 }

 .age-card {
     width: 100%;
     max-width: 460px;
     background: linear-gradient(180deg, #171717, #080808);
     border: 1px solid var(--bb-border);
     border-radius: 24px;
     padding: 32px;
     color: var(--bb-text);
     text-align: center;
     box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
 }

 .brand-mark {
     display: inline-block;
     margin-bottom: 22px;
     color: var(--bb-yellow);
     font-size: 26px;
     font-weight: 900;
     letter-spacing: -1px;
     font-style: italic;
 }

 .brand-mark span {
     color: #ffffff;
     font-weight: 500;
 }

 .age-badge {
     width: 86px;
     height: 86px;
     margin: 0 auto 20px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: var(--bb-yellow);
     color: #000;
     font-size: 30px;
     font-weight: 900;
     box-shadow: 0 0 0 8px rgba(244, 255, 47, 0.08);
 }

 .age-card h2,
 .settings-card h2 {
     margin: 0 0 12px;
     font-size: 26px;
     line-height: 1.1;
 }

 .age-card p,
 .settings-card p,
 .cookie-banner p {
     color: var(--bb-muted);
     line-height: 1.5;
 }

 .age-actions {
     display: grid;
     gap: 10px;
     margin: 24px 0 18px;
 }

 .age-card small {
     display: block;
     color: #9d9d9d;
     font-size: 12px;
     line-height: 1.45;
 }

 .age-card a {
     color: var(--bb-yellow);
 }


 .cookie-banner {
     position: fixed;
     left: 24px;
     right: 24px;
     bottom: 24px;
     z-index: 9998;
     display: none;
     background: #111111;
     color: var(--bb-text);
     border: 1px solid var(--bb-border);
     border-radius: 20px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
 }

 .cookie-banner.is-active {
     display: block;
 }

 .cookie-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     padding: 20px;
 }

 .cookie-content h3 {
     margin: 0 0 6px;
     color: var(--bb-yellow);
     font-size: 18px;
 }

 .cookie-content p {
     margin: 0;
     max-width: 760px;
     font-size: 14px;
 }

 .cookie-actions {
     display: flex;
     gap: 10px;
     flex-shrink: 0;
 }


 .cookie-settings {
     position: fixed;
     inset: 0;
     z-index: 10000;
     display: none;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.76);
     padding: 20px;
 }

 .cookie-settings.is-active {
     display: flex;
 }

 .settings-card {
     position: relative;
     width: 100%;
     max-width: 540px;
     background: linear-gradient(180deg, #191919, #080808);
     border: 1px solid var(--bb-border);
     border-radius: 24px;
     padding: 28px;
     color: var(--bb-text);
     box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
 }

 .close-btn {
     position: absolute;
     top: 16px;
     right: 18px;
     width: 34px;
     height: 34px;
     border: 0;
     border-radius: 50%;
     background: #2b2b2b;
     color: #ffffff;
     font-size: 24px;
     line-height: 1;
     cursor: pointer;
 }

 .settings-intro {
     margin-bottom: 20px;
 }

 .cookie-option {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
     padding: 16px 0;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .cookie-option h4 {
     margin: 0 0 5px;
     font-size: 15px;
 }

 .cookie-option p {
     margin: 0;
     font-size: 13px;
 }

 .cookie-option.locked {
     opacity: 0.85;
 }

 .settings-actions {
     margin-top: 22px;
 }

 .settings-actions .btn-primary {
     width: 100%;
 }


 .switch {
     position: relative;
     width: 52px;
     height: 30px;
     flex: 0 0 auto;
 }

 .switch input {
     display: none;
 }

 .switch span {
     position: absolute;
     inset: 0;
     border-radius: 999px;
     background: #3a3a3a;
     cursor: pointer;
     transition: background 0.2s ease;
 }

 .switch span::before {
     content: "";
     position: absolute;
     width: 22px;
     height: 22px;
     top: 4px;
     left: 4px;
     border-radius: 50%;
     background: #ffffff;
     transition: transform 0.2s ease;
 }

 .switch input:checked+span {
     background: var(--bb-yellow);
 }

 .switch input:checked+span::before {
     transform: translateX(22px);
     background: #000000;
 }


 @media (max-width: 768px) {
     .cookie-content {
         flex-direction: column;
         align-items: flex-start;
     }

     .cookie-actions {
         width: 100%;
         flex-wrap: wrap;
     }

     .cookie-actions button {
         flex: 1;
     }

     .cookie-banner {
         left: 12px;
         right: 12px;
         bottom: 12px;
     }

     .age-card,
     .settings-card {
         padding: 24px;
     }
 }