:root {
    /* =========================================================
       STIL / STAKE-LIKE THEME
       Base color: #13232d
       ========================================================= */

    /* Logo */
    --header-footer-logo: url("https://vendor-provider.fra1.cdn.digitaloceanspaces.com/6q/assets/images/dark-logo-new.svg");
   # --homepage-entrance-bg-image: url("https://cdn.ebetlab.com/6q/assets/images/hero-bg-2.png");

    /* Brand */
    --brand-primary: #13232d !important;
    --brand-primary-rgb: 19, 35, 45;
    --brand-primary-contrast: #ffffff;
    --brand-secondary: #213743;
    --brand-secondary-rgb: 33, 55, 67;

    --accent: #2f8cff !important;
    --accent-rgb: 47, 140, 255;
    --active: #2f8cff;

    --accent-soft: rgba(var(--accent-rgb), 0.14);
    --accent-soft-2: rgba(var(--accent-rgb), 0.08);
    --accent-soft-3: rgba(var(--accent-rgb), 0.20);
    --accent-soft2: var(--accent-soft-2);
    --accent-soft3: var(--accent-soft-3);
    --accent-border: rgba(var(--accent-rgb), 0.34);
    --accent-border-strong: rgba(var(--accent-rgb), 0.56);
    --accent-glow: rgba(var(--accent-rgb), 0.38);

    /* Surfaces */
    --surface-bg: #071217;
    --surface-bg-rgb: 7, 18, 23;
    --surface-1: #0c1a22;
    --surface-2: #13232d;
    --surface-3: #1a303d;
    --surface-4: #213743;

    --surface-card: #13232d;
    --surface-modal: #0f1e27;
    --surface-elevated: #1a303d;

    --surface-border: rgba(255, 255, 255, 0.12);
    --surface-border-soft: rgba(255, 255, 255, 0.08);
    --surface-border-strong: rgba(255, 255, 255, 0.18);

    /* Legacy aliases */
    --legacy-bg-1: #071217;
    --legacy-bg-2: #0c1a22;
    --legacy-bg-3: #213743;
    --legacy-text-muted: #9fb6c7;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #d5e2ea;
    --text-muted: #9fb6c7;
    --text-soft: rgba(213, 226, 234, 0.58);
    --text-disabled: rgba(213, 226, 234, 0.38);
    --text-on-accent: #ffffff;

    /* States */
    --success: #00e701;
    --success-rgb: 0, 231, 1;
    --warning: #ffb636;
    --warning-rgb: 255, 182, 54;
    --danger: #ff4d4f;
    --danger-rgb: 255, 77, 79;
    --info: #2f8cff;
    --info-rgb: 47, 140, 255;

    --state-success-soft: rgba(var(--success-rgb), 0.14);
    --state-warning-soft: rgba(var(--warning-rgb), 0.16);
    --state-danger-soft: rgba(var(--danger-rgb), 0.14);
    --state-info-soft: rgba(var(--info-rgb), 0.16);

    /* Radius */
    --radius-2xs: 4px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-pill: 999px;

    /* Borders */
    --border-thin: 1px;
    --border-medium: 2px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.40);
    --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.48);
    --shadow-accent-sm: 0 8px 18px rgba(var(--accent-rgb), 0.20);
    --shadow-accent-md: 0 12px 28px rgba(var(--accent-rgb), 0.30);
    --shadow-accent-lg: 0 16px 36px rgba(var(--accent-rgb), 0.38);

    /* Gradients */
    --gradient-primary: linear-gradient(180deg, #3b93ff 0%, #1475e1 100%);
    --gradient-primary-horizontal: linear-gradient(90deg, #1475e1 0%, #2f8cff 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(19, 35, 45, 0.92), rgba(7, 18, 23, 0.95));
    --gradient-surface: linear-gradient(180deg, #1a303d 0%, #13232d 100%);
    --gradient-chip: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    --gradient-withdraw: linear-gradient(90deg, #ff5a6f 0%, #f03b57 35%, #b5122e 100%);

    /* Legacy consumed variables */
    --panel-top: #1a303d;
    --panel-bottom: #071217;
    --panel-bg: #13232d;
    --panel-bg2: #0c1a22;

    --modalbg: linear-gradient(180deg, #13232d 0%, #0c1a22 100%);
    --linearbg: linear-gradient(180deg, #1a303d 0%, #13232d 100%);
    --linearbgreversed: linear-gradient(180deg, #13232d 0%, #071217 100%);
    --lineartooltipbg: linear-gradient(180deg, rgba(31, 54, 68, 0.96), rgba(12, 26, 34, 0.98));

    /* Progress */
    --progressbg: linear-gradient(90deg, #1475e1 0%, #2f8cff 60%, #4ba0ff 100%);

    /* Inputs */
    --input-bg: #213743;
    --input-bg-solid: #213743;
    --input-border: rgba(255, 255, 255, 0.08);
    --input-border-focus: rgba(47, 140, 255, 0.65);
    --input-placeholder: rgba(213, 226, 234, 0.55);

    /* Buttons */
    --btn-primary-bg: #2f8cff;
    --btn-primary-bg-hover: #4ba0ff;
    --btn-primary-bg-active: #1475e1;
    --btn-primary-color: #ffffff;
    --btn-primary-radius: 8px;
    --btn-primary-shadow: none;
    --btn-primary-shadow-active: var(--shadow-accent-sm);
    --btn-primary-disabled-opacity: 0.55;

    --btn-secondary-bg: #213743;
    --btn-secondary-bg-hover: #2f4553;
    --btn-secondary-color: #ffffff;
    --btn-secondary-border: rgba(255, 255, 255, 0.08);

    --btn-ghost-bg: rgba(255, 255, 255, 0.06);
    --btn-ghost-bg-hover: rgba(255, 255, 255, 0.12);
    --btn-ghost-color: #ffffff;

    /* Header */
    --header-register-bg: #2f8cff;
    --header-register-color: #ffffff;
    --wallet-btn-bg-start: #213743;
    --wallet-btn-bg-end: #2f8cff;
    --wallet-btn-gradient: linear-gradient(90deg, #213743 0%, #2f8cff 100%);
    --wallet-btn-color: #ffffff;

    /* Tabs / chips */
    --tab-active-bg: #2f8cff;
    --tab-active-color: #ffffff;
    --tab-active-border: #2f8cff;
    --tab-inactive-bg: transparent;
    --tab-inactive-color: #9fb6c7;
    --tab-inactive-border: rgba(255, 255, 255, 0.08);

    --chip-bg: rgba(255, 255, 255, 0.06);
    --chip-border: rgba(255, 255, 255, 0.10);
    --chip-color: #9fb6c7;
    --chip-active-bg: rgba(var(--accent-rgb), 0.16);
    --chip-active-border: rgba(var(--accent-rgb), 0.50);
    --chip-active-color: #ffffff;

    /* Cards / modals */
    --card-bg: linear-gradient(180deg, #1a303d 0%, #13232d 100%);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-radius: 10px;
    --card-shadow: none;

    --modal-bg: linear-gradient(180deg, #13232d 0%, #0c1a22 100%);
    --modal-border: rgba(255, 255, 255, 0.08);
    --modal-radius: 12px;
    --modal-shadow: var(--shadow-xl);

    /* Wallet */
    --wallet-deposit-bg: #2f8cff;
    --wallet-withdraw-gradient: var(--gradient-withdraw);
    --wallet-footer-btn-bg: #213743;
    --wallet-footer-btn-color: #ffffff;

    /* Game opener */
    --game-opener-border: #2f8cff;
    --game-opener-overlay: linear-gradient(0deg, rgba(7, 18, 23, 0.84), rgba(7, 18, 23, 0.84));
    --game-play-btn-bg: #2f8cff;
    --game-play-btn-color: #ffffff;
    --game-demo-btn-bg: #9fb6c7;
    --game-demo-btn-color: #071217;

    /* Slider */
    --slider-nav-bg: #213743;
    --slider-nav-bg-hover: #2f4553;
    --slider-nav-border: rgba(255, 255, 255, 0.08);
    --slider-nav-color: #ffffff;
    --slider-pagination-dot: rgba(255, 255, 255, 0.35);
    --slider-pagination-dot-active: #2f8cff;

    /* Fonts */
    --font-family-regular: "Rubik", sans-serif;
    --font-family-medium: "Rubik Medium", sans-serif;
    --font-family-semibold: "Rubik SemiBold", sans-serif;
    --font-family-bold: "Rubik Bold", sans-serif;

    /* Search */
    --top-search-form-border: 1px solid rgba(255, 255, 255, 0.08);
    --top-search-form-radius: 10px;
    --top-search-form-margin-top: 24px;
    --top-search-form-margin-bottom: 24px;
    --top-search-form-padding-x: 16px;
    --top-search-form-height: 52px;
    --top-search-form-line-height: 52px;
    --top-search-form-font-size: 0px;
    --top-search-form-bg: #213743;
    --top-search-form-font-family: var(--font-family-medium);

    --top-search-icon-color: #9fb6c7;
    --top-search-input-color: #ffffff;
    --top-search-input-placeholder: rgba(213, 226, 234, 0.65);
    --top-search-focus-radius: 14px;
    --top-search-focus-shadow: 0 22px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(47, 140, 255, 0.22);

    --top-search-layer-radius: 18px;
    --top-search-layer-border: 1px solid rgba(255, 255, 255, 0.10);
    --top-search-layer-border-bottom: 10px solid rgba(255, 255, 255, 0.10);
    --top-search-layer-bg: rgba(7, 18, 23, 0.86);
    --top-search-layer-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
    --top-search-layer-blur: 14px;

    --top-search-recent-wrap-radius: 10px;
    --top-search-recent-wrap-border: 1px solid rgba(47, 140, 255, 0.22);
    --top-search-recent-wrap-bg: linear-gradient(180deg, rgba(31, 54, 68, 0.88), rgba(12, 26, 34, 0.90));
    --top-search-recent-wrap-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
    --top-search-recent-chip-radius: 999px;
    --top-search-recent-chip-border: 1px solid rgba(47, 140, 255, 0.42);
    --top-search-recent-chip-bg: linear-gradient(135deg, rgba(47, 140, 255, 0.22), rgba(47, 140, 255, 0.10));
    --top-search-recent-chip-color: #eff8ff;
    --top-search-recent-chip-font-family: var(--font-family-semibold);
    --top-search-recent-chip-shadow: none;

    /* Lowbar */
    --lb-bg: #13232d;
    --lb-stroke: rgba(255, 255, 255, 0.10);
    --lb-stroke-2: rgba(255, 255, 255, 0.06);
    --lb-text: #ffffff;
    --lb-muted: #9fb6c7;
    --lb-active: #2f8cff;
    --lb-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    --lb-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.35);
    --lb-search-bg: #213743;
    --lb-radius: 22px;
    --lb-radius-sm: 20px;
    --lb-surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    --lb-wallet-ring-color: rgba(47, 140, 255, 0.60);
    --lb-wallet-ring-size: 0.2rem;
    --lb-wallet-glow: radial-gradient(circle, rgba(47, 140, 255, 0.18), transparent 65%);
    --lb-wallet-glow-radius: radial-gradient(circle, rgba(47, 140, 255, 0.22), transparent 62%);
    --lb-chat-bg: linear-gradient(135deg, #2f8cff, #1475e1);
    --lb-chat-border: rgba(47, 140, 255, 0.5);
    --lb-chat-color: #ffffff;
    --lb-chat-shadow: none;
    --lb-chat-shadow-hover: none;

    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-rail-width: 78px;
    --sidebar-z: 2000;
    --sidebar-ease: cubic-bezier(.2, .9, .2, 1);

    --sidebar-bg-open: linear-gradient(180deg, #13232d 0%, #0c1a22 100%);
    --sidebar-bg-collapsed: linear-gradient(180deg, #13232d 0%, #0c1a22 100%);
    --sidebar-bg-active: linear-gradient(180deg, #213743 0%, #1a303d 100%);

    --sidebar-bg-open-accent: rgba(47, 140, 255, 0.14);
    --sidebar-bg-open-secondary: rgba(255, 255, 255, 0.06);
    --sidebar-bg-collapsed-accent: rgba(47, 140, 255, 0.16);
    --sidebar-bg-active-accent: rgba(47, 140, 255, 0.20);
    --sidebar-bg-active-secondary: rgba(255, 255, 255, 0.08);

    --sidebar-stroke: rgba(255, 255, 255, 0.06);
    --sidebar-stroke-strong: rgba(255, 255, 255, 0.10);
    --sidebar-stroke-accent: rgba(47, 140, 255, 0.24);

    --sidebar-text: #ffffff;
    --sidebar-text-muted: #d5e2ea;
    --sidebar-text-soft: #9fb6c7;

    --sidebar-chip: rgba(255, 255, 255, 0.05);
    --sidebar-chip-2: rgba(255, 255, 255, 0.03);
    --sidebar-chip-stroke: rgba(255, 255, 255, 0.08);

    --sidebar-shadow: none;
    --sidebar-shadow-soft: none;
    --sidebar-active-glow: 0 0 0 1px rgba(47, 140, 255, 0.16);
    --sidebar-overlay: rgba(0, 0, 0, 0.60);

    --sidebar-search-bg: #213743;
    --sidebar-search-text: #9fb6c7;

    --sidebar-promo-bg: rgba(255, 255, 255, 0.03);
    --sidebar-promo-border: rgba(255, 255, 255, 0.07);
    --sidebar-promo-item-bg: rgba(0, 0, 0, 0.14);
    --sidebar-promo-item-bg-hover: rgba(0, 0, 0, 0.20);
    --sidebar-promo-dot: #2f8cff;
    --sidebar-promo-dot-glow: rgba(47, 140, 255, 0.15);
    --sidebar-hero-glow: linear-gradient(90deg, #13232d 0%, #2f8cff 100%);

    --sidebar-top-btn-border: rgba(255, 255, 255, 0.06);
    --sidebar-top-btn-bg: linear-gradient(180deg, #213743 0%, #1a303d 100%);
    --sidebar-top-btn-shadow: none;
    --sidebar-top-btn-title: #ffffff;
    --sidebar-top-btn-arrow: #9fb6c7;

    --sidebar-top-btn-hover-border: rgba(47, 140, 255, 0.34);
    --sidebar-top-btn-hover-shadow: none;

    --sidebar-top-btn-active-border: rgba(47, 140, 255, 0.48);
    --sidebar-top-btn-active-bg: linear-gradient(180deg, rgba(47, 140, 255, 0.30), rgba(47, 140, 255, 0.14));
    --sidebar-top-btn-active-shadow: none;

    --sidebar-tab-casino-bg-image: linear-gradient(180deg, #2f8cff 0%, #1475e1 100%);
    --sidebar-tab-sportsbook-bg-image: linear-gradient(180deg, #2f8cff 0%, #1475e1 100%);

    /* Misc sections */
    --bonus-request-tab-bg: var(--tab-inactive-bg);
    --bonus-request-tab-border: var(--tab-inactive-border);
    --bonus-request-tab-text: var(--tab-inactive-color);
    --bonus-request-tab-active-bg: var(--tab-active-bg);
    --bonus-request-tab-active-border: var(--tab-active-border);
    --bonus-request-tab-active-text: var(--tab-active-color);
    --bonus-request-card-bg: var(--card-bg);
    --bonus-request-card-border: var(--card-border);
    --bonus-request-card-shadow: var(--card-shadow);
    --bonus-request-info-bg: rgba(47, 140, 255, 0.14);
    --bonus-request-info-border: rgba(47, 140, 255, 0.35);
    --bonus-request-info-color: #ffffff;
    --bonus-request-button-bg: #2f8cff;
    --bonus-request-button-text: #ffffff;
    --bonus-request-empty-bg: rgba(255, 255, 255, 0.02);
    --bonus-request-empty-border: rgba(255, 255, 255, 0.08);
    --bonus-request-empty-text: #9fb6c7;

    --vip-accent: #2f8cff;
    --vip-accent-rgb: 47, 140, 255;
    --vip-bg0: #071217;
    --vip-bg1: #13232d;
    --vip-card-bg: rgba(255, 255, 255, 0.05);
    --vip-card-border: rgba(255, 255, 255, 0.10);
    --vip-card-border-soft: rgba(255, 255, 255, 0.06);
    --vip-card-hover-bg: rgba(255, 255, 255, 0.06);
    --vip-text: #d5e2ea;
    --vip-muted: #9fb6c7;
    --vip-chip-bg: rgba(255, 255, 255, 0.06);
    --vip-chip-border: rgba(255, 255, 255, 0.10);
    --vip-chip-active-bg: rgba(47, 140, 255, 0.16);
    --vip-chip-active-border: rgba(47, 140, 255, 0.30);
    --vip-tag-bg: rgba(0, 0, 0, 0.18);
    --vip-gift-tag-bg: rgba(47, 140, 255, 0.10);
    --vip-gift-tag-border: rgba(47, 140, 255, 0.18);
    --vip-button-border: rgba(47, 140, 255, 0.28);
    --vip-button-bg: linear-gradient(180deg, rgba(47, 140, 255, 0.22), rgba(47, 140, 255, 0.10));
    --vip-button-border-hover: rgba(47, 140, 255, 0.42);
    --vip-link: #2f8cff;
    --vip-link-border: rgba(47, 140, 255, 0.35);
    --vip-link-border-hover: rgba(47, 140, 255, 0.65);

    --focus-ring: 0 0 0 3px rgba(47, 140, 255, 0.22);
    --divider: rgba(255, 255, 255, 0.08);

    --notif-badge-bg: #2f8cff;
    --notif-badge-border: rgba(255, 255, 255, 0.55);
    --notif-panel-bg: var(--lineartooltipbg);
    --notif-panel-border: rgba(255, 255, 255, 0.08);
    --notif-panel-shadow: var(--shadow-xl);
    --notif-empty-bg: rgba(100, 116, 139, 0.16);
    --notif-empty-border: rgba(255, 255, 255, 0.08);
    --notif-item-bg: rgba(100, 116, 139, 0.14);
    --notif-item-bg-hover: rgba(100, 116, 139, 0.18);
    --notif-item-border: rgba(255, 255, 255, 0.08);
    --notif-item-border-hover: rgba(255, 255, 255, 0.14);
    --notif-track-thumb: rgba(255, 255, 255, 0.10);

    --page-header-radius: 4px;
    --page-header-bg: var(--linearbg);
    --page-header-shadow: none;
    --page-header-top-line: linear-gradient(90deg, rgba(47, 140, 255, 0), rgba(47, 140, 255, 0.55), rgba(47, 140, 255, 0));
    --page-header-title-color: #ffffff;
    --page-header-subtitle-color: rgba(213, 226, 234, 0.70);
    --page-header-icon-color: #071217;

    --promotion-hover-panel-bg: linear-gradient(180deg, #13232d 0%, #0c1a22 100%);
    --promotion-hover-panel-pattern: radial-gradient(620px 240px at 80% 20%, rgba(255, 255, 255, 0.04), transparent 66%);
    --promotion-hover-title-color: #ffffff;
    --promotion-hover-desc-color: #9fb6c7;
    --promotion-bottom-icon-color: #ffffff;
    --promotion-bottom-info-color: #9fb6c7;

  /* === Challenges / Stake-like upgrade === */
--challenge-filter-bg: rgba(33, 55, 67, 0.72);
--challenge-filter-border: rgba(255, 255, 255, 0.08);
--challenge-filter-text: #9fb6c7;
--challenge-filter-text-hover: #ffffff;
--challenge-filter-active-bg: linear-gradient(180deg, #2f4553 0%, #213743 100%);
--challenge-filter-active-text: #ffffff;
--challenge-filter-active-ring: rgba(47, 140, 255, 0.34);

--challenge-card-radius: 12px;

--challenge-card-bg:
    radial-gradient(760px 280px at 12% -12%, rgba(47, 140, 255, 0.18), transparent 58%),
    radial-gradient(520px 260px at 96% 105%, rgba(0, 231, 1, 0.08), transparent 62%),
    linear-gradient(145deg, #213743 0%, #172b36 44%, #13232d 100%);

--challenge-card-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);

--challenge-card-sheen:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 42%),
    repeating-linear-gradient(-35deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 15px);

--challenge-card-overlay-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 -52px 70px rgba(7, 18, 23, 0.44);

--challenge-image-fallback:
    linear-gradient(145deg, #213743 0%, #13232d 100%);

--challenge-title: #ffffff;
--challenge-target: rgba(213, 226, 234, 0.88);
--challenge-label: rgba(159, 182, 199, 0.86);
--challenge-value: #ffffff;
--challenge-author: #d5e2ea;
--challenge-claimed-divider: rgba(255, 255, 255, 0.10);

--challenge-completed-ring: rgba(0, 231, 1, 0.22);
--challenge-completed-bg: linear-gradient(180deg, rgba(0, 231, 1, 0.14), rgba(0, 231, 1, 0.07));

--challenge-control-label: rgba(213, 226, 234, 0.76);
--challenge-control-btn-bg: linear-gradient(180deg, #213743 0%, #13232d 100%);
--challenge-control-btn-border: rgba(255, 255, 255, 0.09);
--challenge-control-btn-text: #ffffff;
--challenge-control-btn-icon: #9fb6c7;

--challenge-control-badge-bg: rgba(47, 140, 255, 0.16);
--challenge-control-badge-border: rgba(47, 140, 255, 0.34);
--challenge-control-badge-text: #9dccff;

--challenge-dropdown-bg: #213743;
--challenge-dropdown-text: #ffffff;
--challenge-dropdown-border: rgba(255, 255, 255, 0.10);
--challenge-dropdown-divider: rgba(255, 255, 255, 0.08);
--challenge-dropdown-item-hover: rgba(255, 255, 255, 0.08);
--challenge-dropdown-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
--challenge-dropdown-active: #2f8cff;

--challenge-provider-pill-bg: linear-gradient(180deg, #3b93ff 0%, #1475e1 100%);
--challenge-provider-pill-text: #ffffff;
  --general-tabs-text: rgba(213, 226, 234, 0.65);
--general-tabs-active-text: #ffffff;
--general-tabs-active-font: "Rubik Bold", sans-serif;
}

/* =========================================================
   GLOBAL BACKGROUND
   ========================================================= */

html,
body,
#app,
main,
main#main,
main#home,
.home-page,
.home-page .container,
.general-container,
.inner-page,
.page-content {
    background: #071217 !important;
}

body.dark-mode {
    background-color: #071217 !important;
    background-image:
        radial-gradient(900px 420px at 50% -20%, rgba(47, 140, 255, 0.08), transparent 60%),
        linear-gradient(180deg, #13232d 0%, #071217 100%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

body.dark-mode main,
body.dark-mode main#home,
body.dark-mode .home-page,
body.dark-mode .page-content,
body.dark-mode .general-container {
    background: transparent !important;
}

/* =========================================================
   HEADER
   ========================================================= */

header#header,
header#header .middle-header {
    background: #13232d !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

header#header div.middle-header div.middle-header-container {
    min-height: 62px !important;
}

header#header div.middle-header div.middle-header-container div.logo img,
header#header div.middle-header div.middle-header-container div.logo svg {
    max-height: 58px !important;
    width: auto !important;
    object-fit: contain !important;
    margin-top: 6px !important;
}

header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.register {
    background: linear-gradient(180deg, #3b93ff 0%, #1475e1 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

header#header div.middle-header div.middle-header-container div.header-buttons div.login-buttons a.button.login {
    background: #213743 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 8px !important;
}

header#header div.middle-header div.middle-header-container div.header-buttons div.wallet-menu div.current-wallet a.wallet-button {
    color: #ffffff !important;
    background: var(--wallet-btn-gradient) !important;
    border-radius: 8px !important;
}

/* =========================================================
   SIDEBAR / RESPONSIVE MENU
   ========================================================= */

.sidebar,
#sidebar,
.responsive-menu,
.sidebar-wrapper,
#responsive-menu.responsive-menu.active-menu {
    background: #13232d !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}

.sb-top-btn,
.sidebar a,
.sidebar-menu a,
.accordion-menu a,
#responsive-menu.responsive-menu.active-menu .menu-body a {
    background: linear-gradient(180deg, #213743 0%, #1a303d 100%) !important;
    border-radius: 8px !important;
    color: #d5e2ea !important;
    box-shadow: none !important;
}

.sb-top-btn:hover,
.sidebar a:hover,
.sidebar-menu a:hover,
.accordion-menu a:hover,
#responsive-menu.responsive-menu.active-menu .menu-body a:hover {
    background: #2f4553 !important;
    color: #ffffff !important;
}

a.sb-top-btn:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.sidebar .menu a.active,
.sidebar .submenu a.active,
.sidebar-menu a.active,
.accordion-menu a.active,
.lowbar .item.active {
    color: #2f8cff !important;
}

.sidebar .menu .active-indicator,
.accordion-menu .active-indicator,
.lowbar .indicator {
    background: var(--gradient-primary-horizontal) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
}

/* Mobile search in responsive menu */
#responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal {
    width: 100% !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 8px 0 10px !important;
    padding: 0 16px !important;
    background: #213743 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal svg,
#responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal i {
    color: #9fb6c7 !important;
    fill: #9fb6c7 !important;
    width: 18px !important;
    height: 18px !important;
}

#responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal span,
#responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal p,
#responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal div {
    color: #d5e2ea !important;
    font-size: 13px !important;
    font-family: var(--font-family-semibold) !important;
}

/* =========================================================
   INPUTS / SEARCH
   ========================================================= */

input,
.form-control,
.top-search-form,
.search-form,
.sidebar-search,
div.search {
    color: #ffffff !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(213, 226, 234, 0.60) !important;
}

.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input,
form.general-form div.form-group div.form-item.form-item-text input,
form.general-form div.form-group div.form-item.form-item-password input,
form.general-form div.form-group div.form-item.form-item-select select,
.phone-input,
.phone-input input {
    background: #213743 !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-text input:focus,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-group div.form-item.form-item-password input:focus,
form.general-form div.form-group div.form-item.form-item-text input:focus,
form.general-form div.form-group div.form-item.form-item-password input:focus,
.phone-input input:focus {
    border-color: rgba(47, 140, 255, 0.65) !important;
    box-shadow: var(--focus-ring) !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.common-form-button .button,
form.general-form div.form-buttons button,
.auth div.auth-box form.auth-form div.form-buttons button,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button {
    background: linear-gradient(180deg, #3b93ff 0%, #1475e1 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border: none !important;
}

.common-form-button .button:hover,
form.general-form div.form-buttons button:hover,
.auth div.auth-box form.auth-form div.form-buttons button:hover,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:hover {
    background: #4ba0ff !important;
}

.common-form-button .button:active,
form.general-form div.form-buttons button:active,
.auth div.auth-box form.auth-form div.form-buttons button:active,
.auth-modal .modal-dialog .modal-content .modal-box form.auth-form div.form-buttons button:active {
    background: #1475e1 !important;
}

/* =========================================================
   CARDS / MODALS
   ========================================================= */

/* =========================================================
   WALLET
   ========================================================= */

#walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.deposit {
    background: #2f8cff !important;
    color: #ffffff !important;
}

#walletModal .modal-dialog .modal-content .modal-body div.wallet-box div.wallet-normal div.wallet-body div.wallet-buttons span.button.withdraw {
    background-image: var(--wallet-withdraw-gradient) !important;
    color: #ffffff !important;
}

#walletModal .modal-dialog .modal-content .modal-body div.wallet-footer a.button {
    background-color: #213743 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* =========================================================
   GAME / CAROUSEL
   ========================================================= */

.game-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.game-item div.game-top,
.game-item figure.game-image {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.game-item div.game-top figure.game-image img,
.game-item .game-top figure.game-image img,
.game-item .game-top figure.game-image img.carousel-skel,
.game-item .game-top figure.game-image img.carousel-skel img {
    border-radius: 8px !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

.game-item div.game-top div.game-opener {
    border-color: #2f8cff !important;
    background: var(--game-opener-overlay) !important;
    border-radius: 10px !important;
}

.game-item div.game-top div.game-opener div.play-buttons span.button,
.game-item div.game-top div.game-opener div.play-buttons a.button {
    background-color: #2f8cff !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.game-item div.game-top div.game-opener div.play-buttons span.button.demo,
.game-item div.game-top div.game-opener div.play-buttons a.button.demo {
    background-color: #9fb6c7 !important;
    color: #071217 !important;
}

.game-item .game-bottom,
.game-item .online,
.game-item .players,
.game-item .game-info {
    color: #d5e2ea !important;
}

.owl-nav button,
.slider-nav,
.carousel-nav,
.section-carousel button {
    background: #213743 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #9fb6c7 !important;
    border-radius: 8px !important;
}

.owl-nav button:hover,
.slider-nav:hover,
.carousel-nav:hover {
    background: #2f4553 !important;
    color: #ffffff !important;
}

a.see-all,
.button.see-all,
.section-head a.button,
.carousel-head a.button {
    background: #213743 !important;
    color: #d5e2ea !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* =========================================================
   TABS / CHIPS / PROGRESS
   ========================================================= */

.simple-bets .nav.nav-pills .nav-link.active,
.simple-bets .nav.nav-pills .nav-link[aria-selected="true"],
.simple-bets ul li button.active,
.simple-bets ul li button[aria-selected="true"] {
    color: #ffffff !important;
    background-color: #2f8cff !important;
    border-color: #2f8cff !important;
}

.faq__chip,
.ato-btn {
    border-color: rgba(255,255,255,0.10) !important;
    background: rgba(255,255,255,0.06) !important;
    color: #9fb6c7 !important;
    border-radius: 999px !important;
}

.faq__chip.is-active,
.ato-btn.is-active {
    border-color: rgba(47, 140, 255, 0.50) !important;
    background: rgba(47, 140, 255, 0.16) !important;
    color: #ffffff !important;
}

.ato-indicator {
    background: linear-gradient(180deg, #3b93ff 0%, #1475e1 100%) !important;
    border: 1px solid rgba(47, 140, 255, 0.35) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

div.progress-bar span,
.progress-fill,
.race-progress .line,
.simple-progress .fill {
    background: var(--progressbg) !important;
}

.progress-circle .progress-svg circle.circle-bg {
    stroke: rgba(159, 182, 199, 0.20);
}

.progress-circle .progress-svg circle.circle {
    stroke: #2f8cff;
}

/* =========================================================
   HERO / CATEGORY / PAGE HEADER
   ========================================================= */

.enterence-box,
.home-enterence,
.hp-hero,
.hero-area {
    background: #0c1a22 !important;
}

div.enterence-box a.simple-category {
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #213743 !important;
    border: none !important;
    box-shadow: none !important;
}

div.enterence-box a.simple-category figure.item-image {
    width: 100% !important;
    height: 230px !important;
    overflow: hidden !important;
    border-radius: 10px 10px 0 0 !important;
}

div.enterence-box a.simple-category figure.item-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

div.enterence-box a.simple-category div.item-title {
    background: #213743 !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    border-radius: 0 0 10px 10px !important;
}

html body .page div.page-header {
    background-image: var(--homepage-entrance-bg-image) !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
    background-size: cover !important;
}

/* =========================================================
   SOC / SPECIAL HERO
   ========================================================= */

body.dark-mode .soc-hero {
    position: relative !important;
    overflow: hidden !important;
    background: var(--homepage-entrance-bg-image) no-repeat left / cover !important;
}

body.dark-mode .soc-hero::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -40%;
    width: 40%;
    height: 140%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.05) 65%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    filter: blur(6px);
    animation: socHeroShine 4.5s ease-in-out infinite;
}

body.dark-mode .soc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at 80% 20%, rgba(47,140,255,0.12), transparent 20%),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.05), transparent 30%);
    animation: socHeroGlow 3s ease-in-out infinite alternate;
}

@keyframes socHeroShine {
    0% { left: -45%; opacity: 0; }
    10% { opacity: 1; }
    60% { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

@keyframes socHeroGlow {
    0% { opacity: 0.4; }
    100% { opacity: 0.9; }
}

body.dark-mode header.ph6q {
    background: var(--homepage-entrance-bg-image) no-repeat left / cover !important;
}

/* =========================================================
   NOTIFICATIONS / UTILS
   ========================================================= */

.notifications .notification-item,
.notification-item {
    background: var(--gradient-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
}

.notifications .notification-item.unread,
.notification-item.unread {
    border-color: rgba(47, 140, 255, 0.34) !important;
    box-shadow: inset 0 0 0 1px rgba(47, 140, 255, 0.08) !important;
}

.theme-bg-primary,
.bg-primary,
[data-theme="primary"] {
    background-color: #2f8cff !important;
    color: #ffffff !important;
}

.theme-surface,
.bg-surface,
[data-theme="surface"] {
    background-color: #213743 !important;
    color: #ffffff !important;
}

.theme-muted,
.text-muted,
[data-theme="muted"] {
    color: #9fb6c7 !important;
}

.faq__bg {
    filter: none !important;
    pointer-events: none;
    background:
        radial-gradient(700px 320px at 10% 0, rgba(47,140,255,0.14), transparent 60%),
        radial-gradient(520px 260px at 100% 30%, rgba(255,255,255,0.06), transparent 62%) !important;
}

/* =========================================================
   EXISTING FIXES
   ========================================================= */

/* User Menu Background Color */
body.dark-mode .user-menu .user-menus ul li div:hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
}

/* Network dropdown fix */
.form-item.form-item-select-2 select#network,
.form-item.form-item-select-2 select#network option {
    background-color: #13232d !important;
    color: #ffffff !important;
}

/* Wallet icon fix */
.user-menus li:nth-child(1) .icon svg {
    display: none !important;
}

.user-menus li:nth-child(1) .icon {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7C3 5.89543 3.89543 5 5 5H19C20.1046 5 21 5.89543 21 7V9H17C15.8954 9 15 9.89543 15 11V13C15 14.1046 15.8954 15 17 15H21V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V7Z' stroke='%239FB6C7' stroke-width='1.5'/%3E%3Cpath d='M17 11H22V13H17C16.4477 13 16 12.5523 16 12C16 11.4477 16.4477 11 17 11Z' stroke='%239FB6C7' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Sticky menu */
.sticky-menu {
    width: 90% !important;
    max-width: 420px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 16px !important;
    background: #13232d !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
}

.sticky-menu .menu-item.wallet .logo img {
    border-radius: 6px !important;
    width: 50px !important;
    height: 50px !important;
    box-shadow: none !important;
    margin-bottom: 7px;
}

/* Latest wins */
.latestWins__card {
    border-radius: 10px !important;
    overflow: hidden !important;
    background: none !important;
    border: none !important;
}

.latestWins__provider {
    display: none !important;
}

.latestWins__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: rgba(7, 18, 23, 0.74) !important;
    transform: none !important;
}

.latestWins__meta {
    position: relative !important;
    background: linear-gradient(180deg, rgba(19, 35, 45, 0.88) 0%, rgba(7, 18, 23, 0.96) 100%) !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
    display: flex !important;
    overflow: hidden !important;
}

.latestWins__meta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: latestwins-shine 3.5s infinite;
    pointer-events: none;
}

@keyframes latestwins-shine {
    0% { left: -75%; }
    100% { left: 130%; }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {
    #responsive-menu.responsive-menu.active-menu {
        background: radial-gradient(520px 300px at 0 0, rgba(47,140,255,0.16), transparent 60%), linear-gradient(180deg, #13232d 0%, #071217 100%) !important;
    }
}

@media (max-width: 768px) {
    .hp-hero.hp-hero--mobile .hp-hero-bg {
        background-image: url("https://cdn.ebetlab.com/6q/assets/images/hero-bg-2.png") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

@media (max-width: 575px) {
    div.cat-carousel div.section-carousel div.owl-carousel a.simple-category div.item-title {
        padding: 4.5px 9px !important;
        background: linear-gradient(180deg, #213743 0%, #13232d 100%) !important;
    }

    header#header div.middle-header div.middle-header-container div.responsive-logo img {
        height: 50px !important;
        width: 100% !important;
        object-fit: contain !important;
    }
}

body.dark-mode {
    background-color: #071217 !important;
    background-image:
        radial-gradient(900px 520px at 18% -10%, rgba(47, 140, 255, 0.16), transparent 62%),
        radial-gradient(760px 460px at 88% 8%, rgba(0, 231, 1, 0.07), transparent 58%),
        radial-gradient(680px 520px at 50% 105%, rgba(47, 140, 255, 0.10), transparent 62%),
        linear-gradient(180deg, #172c38 0%, #0d1d25 42%, #071217 100%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}


body.dark-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(900px 500px at 42% 12%, rgba(47, 140, 255, 0.10), transparent 60%),
        radial-gradient(700px 420px at 75% 20%, rgba(0, 231, 1, 0.055), transparent 58%),
        linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 14px);
    opacity: 0.9;
}

.home-page,
main#home {
    background:
        radial-gradient(900px 420px at 45% 0%, rgba(47, 140, 255, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(19, 35, 45, 0.70) 0%, rgba(7, 18, 23, 1) 100%) !important;
}

.enterence-box,
.home-enterence,
.hp-hero,
.hero-area {
    background:
        radial-gradient(900px 420px at 35% 20%, rgba(47, 140, 255, 0.08), transparent 58%),
        radial-gradient(760px 420px at 85% 12%, rgba(0, 231, 1, 0.045), transparent 58%),
        linear-gradient(135deg, #182833 0%, #101d25 48%, #071217 100%) !important;
}

.sidebar,
#sidebar,
#responsive-menu.responsive-menu.active-menu {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 14px),
        linear-gradient(180deg, #13232d 0%, #0c1a22 100%) !important;
}

header#header,
header#header .middle-header {
    background:
        linear-gradient(180deg, rgba(31, 54, 68, 0.92) 0%, rgba(19, 35, 45, 0.98) 100%) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.20) !important;
}

.game-item div.game-top,
.game-item figure.game-image,
div.enterence-box a.simple-category {
    box-shadow: 0 14px 28px rgba(0,0,0,0.28) !important;
}

.top-search-form,
.search-form,
.sidebar-search,
#responsive-menu.responsive-menu.active-menu .menu-body .to-search-modal {
    background:
        linear-gradient(180deg, rgba(47, 69, 83, 0.92), rgba(33, 55, 67, 0.96)) !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn,
#responsive-menu.responsive-menu.active-menu .sl-acc__section{
border: none !important;
}

.sl-acc__section.is-open .sl-acc__head {
  box-shadow:none !important;
}

#responsive-menu.responsive-menu.active-menu .sb-top-btn.active{
  background: none !important;
}



/* === Challenge grid final polish === */
.challenge-card,
.challenges-card,
.challenge-item {
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px);
}

.challenge-card:hover,
.challenges-card:hover,
.challenge-item:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 42px rgba(0,0,0,0.42),
        0 0 0 1px rgba(47,140,255,0.18),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.challenge-card::before,
.challenges-card::before,
.challenge-item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--challenge-card-sheen);
    opacity: .85;
}

.challenge-card img,
.challenges-card img,
.challenge-item img {
    border-radius: 10px 10px 0 0 !important;
}

.challenge-tabs,
.challenge-filters {
    background: #213743 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

.challenge-tabs button,
.challenge-filters button {
    color: #9fb6c7 !important;
    border-radius: 6px !important;
}

.challenge-tabs button.active,
.challenge-filters button.active {
    background: linear-gradient(180deg, #2f4553, #213743) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(47,140,255,.35) !important;
}