:root {
    --primary-bg: #050814;
    --secondary-bg: #111827;
    --accent: #facc15;
    --accent-soft: #fcd34d;
    --accent-danger: #ef4444;
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --card-bg: #111827;
    --border-soft: #1f2937;

    /* NEW – theme helpers */
    --navbar-bg: rgba(15, 23, 42, 0.96);
    --overlay-strong: rgba(15, 23, 42, 0.7);

    --accent-info: #1d4ed8;
    /* blue (Telegram / info) */
    --accent-brand: #f97316;
    /* orange (LP, badges, etc.) */
    --accent-success: #22c55e;
    /* green for balances */
    --accent-balance-side: #16a34a;
    /* green in side menu */

    --panel-bg: #020617;
    /* very dark panel background */

    --telegram-grad-from: #1d4ed8;
    --telegram-grad-to: #7c3aed;

    --provider-card-bg: #2a0b12;
    /* deep wine, very dark */
    --provider-card-border: rgba(239, 68, 68, 0.22);
    /* softer red border */
    --provider-card-border-hover: var(--accent);
    /* keep your hover accent */

    /* NEW for overlay / sidebar */
    --sidebar-bg: #020617;
    --sidebar-header-bg: #050814;
    --sidebar-username: var(--accent-soft);
    --sidebar-item-icon: var(--accent-danger);
    --sidebar-item-active-bg: rgba(239, 68, 68, 0.12);
    --sidebar-item-active-border: var(--accent-danger);
    --sidebar-logout-bg: var(--secondary-bg);
    --sidebar-logout-text: var(--text-main);
    --overlay-bg: rgba(15, 23, 42, 0.7);

    /* NEW color helpers used below */
    --text-muted-strong: #d1d5db;
    --top-strip-text: #e5e7eb;
    --badge-pill-bg: rgba(15, 23, 42, 0.9);

    --hero-card-border-color: rgba(148, 163, 184, 0.2);
    --hero-card-shadow-color: rgba(15, 23, 42, 0.9);
    --hero-badge-bg: rgba(15, 118, 110, 0.2);
    --hero-badge-text: #a7f3d0;
    --hero-stat-bg: rgba(15, 23, 42, 0.9);
    --hero-stat-border-color: rgba(55, 65, 81, 0.8);
    --hero-chip-border-color: rgba(249, 250, 251, 0.08);
    --hero-chip-bg: rgba(15, 23, 42, 0.9);
    --hero-rtp-inner-border-color: rgba(248, 250, 252, 0.1);

    --providers-strip-bg: rgba(15, 23, 42, 0.9);
    --provider-pill-bg: rgba(31, 41, 55, 0.9);
    --provider-pill-border: rgba(55, 65, 81, 0.8);
    --provider-pill-text: #e5e7eb;
    --scrollbar-thumb: #4b5563;

    --badge-hot-bg: rgba(239, 68, 68, 0.9);
    --badge-maxwin-bg: rgba(34, 197, 94, 0.9);
    --badge-buyspin-bg: rgba(59, 130, 246, 0.9);
    --badge-jackpot-bg: rgba(239, 68, 68, 0.9);

    --thumb-overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);

    --footer-bg: #020617;
    --footer-title: #e5e7eb;

    --form-border: #374151;
    --focus-shadow-color: rgba(250, 204, 21, 0.2);

    --auth-border-bottom: rgba(148, 163, 184, 0.2);
    --auth-balance-border: rgba(255, 255, 255, 0.08);
    --auth-level-bg: rgba(255, 255, 255, 0.08);
    --auth-icon-btn-bg: rgba(255, 255, 255, 0.10);
    --auth-icon-btn-alt-bg: rgba(255, 255, 255, 0.08);
    --auth-progress-bar-bg: rgba(255, 255, 255, 0.1);
    --auth-desktop-balance-border: rgba(255, 255, 255, 0.08);

    --overlay-shadow-color: rgba(0, 0, 0, 0.55);

    --provider-card-shadow-color: rgba(0, 0, 0, 0.35);
    --provider-card-shadow-hover-color: rgba(0, 0, 0, 0.5);

    --submenu-border-top: rgba(15, 23, 42, 0.65);
    --auth-side-active-bg: rgba(239, 68, 68, 0.12);
    --auth-side-parent-open-bg: rgba(15, 23, 42, 0.95);

    --mega-border-color: rgba(15, 23, 42, 0.9);


    --result-card-bg: var(--card-bg);
    --result-header-bg: var(--secondary-bg);
    --result-row-bg: rgba(15, 23, 42, 0.92);
    --result-row-alt-bg: rgba(15, 23, 42, 0.85);
    --result-tabs-bg: var(--primary-bg);
    --result-tab-active-bg: var(--secondary-bg);
    --result-tab-active-border: var(--accent);
    --result-pill-bg: rgba(34, 197, 94, 0.12);
    --result-pill-text: var(--accent-success);
    --status-online: var(--accent-success);
    /* green */
    --status-offline: var(--accent-danger);
    /* red */
    --status-maintenance: var(--accent-brand);
    /* orange (optional) */
    --theme-primary: var(--color-primary, #0acffe);
    --theme-secondary: var(--color-secondary, #495aff);

    /* safer accent text color */
    --dl-color-theme-accent1: var(--color-on-primary, #ffffff);

    /* glow for active menu (adjust if too bright) */
    --theme-glow: 0 0 16px rgba(10, 207, 254, 0.4);

    /* fallback font weights (in case not defined earlier) */
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* Provider slider (derived from your existing theme vars) */
    --provider-bar-bg: color-mix(in srgb, var(--provider-card-bg) 55%, var(--panel-bg));
    --provider-bar-bg-2: color-mix(in srgb, var(--provider-card-bg) 35%, var(--primary-bg));
    --provider-bar-border: color-mix(in srgb, var(--provider-card-border) 70%, transparent);
    --provider-bar-inner-glow: color-mix(in srgb, var(--accent-danger) 18%, transparent);

    --provider-arrow-bg: color-mix(in srgb, var(--primary-bg) 70%, transparent);
    --provider-arrow-border: color-mix(in srgb, var(--border-soft) 60%, transparent);

    --provider-item-bg: color-mix(in srgb, var(--secondary-bg) 70%, var(--primary-bg));
    --provider-item-border: color-mix(in srgb, var(--border-soft) 70%, transparent);
    --provider-item-text: var(--text-muted-strong);

    --provider-active-border: var(--accent);
    --provider-active-glow: var(--focus-shadow-color);


    /* logo plate (subtle) */
    --provider-logo-plate-bg: rgba(255, 255, 255, 0.92);
    --provider-logo-plate-shadow: rgba(0, 0, 0, 0.25);

    /* how big the plate is (smaller = better) */
    --provider-logo-plate-inset-y: 14px;
    --provider-logo-plate-inset-x: 26px;
    --provider-logo-plate-bg: rgba(255, 255, 255, 0.92);
    --provider-logo-plate-radius-offset: 6px;


    --provider-mega-plate-bg: rgba(255, 255, 255, 0.92);
    --provider-mega-plate-border: rgba(0, 0, 0, 0.08);
    --provider-mega-plate-shadow: rgba(0, 0, 0, 0.35);
    --provider-mega-plate-radius: 14px;
}