/* ============================================================
   UNLUCKYBOOST — "ARCTIC FORGE" DESIGN SYSTEM
   Navy-black base · Electric blue primary · Gold CTA · Gaming feel
   ============================================================ */

/* ——— DESIGN TOKENS ——— */
:root {
    --bg-void: #040810;
    --bg-deep: #06090f;
    --bg-base: #0a0f1a;
    --bg-raised: #0f1525;
    --bg-surface: #141c2e;
    --bg-surface-2: #1a2438;

    --accent: #2563eb;
    --accent-rgb: 37, 99, 235;
    --accent-light: #60a5fa;
    --accent-dark: #1d4ed8;
    --accent-glow: rgba(37, 99, 235, 0.35);

    --accent2: #FAB911;
    --accent2-rgb: 250, 185, 17;

    --gold: #FAB911;
    --gold-rgb: 250, 185, 17;
    --gold-light: #FBC333;
    --gold-dark: #E3A500;
    --gold-glow: rgba(250, 185, 17, 0.30);

    --cta: #FAB911;
    --cta-hover: #FBC333;
    --cta-shadow: 0 6px 24px rgba(250, 185, 17, 0.25);
    --cta-shadow-hover: 0 8px 32px rgba(250, 185, 17, 0.4);

    --success: #34d399;
    --success-rgb: 52, 211, 153;
    --danger: #f87171;
    --danger-rgb: 248, 113, 113;
    --warning: #fbbf24;
    --warning-rgb: 251, 191, 36;
    --info: #60a5fa;
    --info-rgb: 96, 165, 250;
    --purple: #a78bfa;
    --purple-rgb: 167, 139, 250;

    --text-primary: #e8ecf4;
    --text-secondary: #7b8ba8;
    --text-muted: #4a5d78;
    --text-faint: #2d3a4f;

    --border: rgba(37, 99, 235, 0.06);
    --border-hover: rgba(37, 99, 235, 0.18);
    --border-accent: rgba(37, 99, 235, 0.12);

    --card-bg: #0c1220;
    --card-radius: 14px;
    --card-shadow: 0 2px 12px rgba(0,0,0,0.4);
    --card-shadow-hover: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(37,99,235,0.08);

    --pill-radius: 100px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ——— GLOBAL RESET ——— */
body {
    background: var(--bg-deep) !important;
    color: var(--text-primary) !important;
}

::selection {
    background: rgba(var(--accent-rgb), 0.25);
    color: #fff;
}

/* ——— SCROLLBAR ——— */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ——— BACKGROUND PATTERNS ——— */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(37,99,235,0.04) 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

.main-background,
.main-background.main-background--csgo-rank,
.main-background.csgo {
    background: var(--bg-deep) !important;
    background-image: none !important;
}

/* Kill old background image */
.main-background {
    background-image: none !important;
    background-color: var(--bg-deep) !important;
}

/* Blackbox calculator - force dark */
.container .blackbox,
.blackbox-calculator-container,
.blackbox {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--card-shadow) !important;
}

/* Booster selection wrapper - remove blue tint */
.booster-selection-wrapper {
    background: var(--bg-base) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
}
.booster-selection-wrapper:hover {
    border-color: rgba(var(--accent-rgb), 0.12) !important;
}

/* Header line */
.header-line {
    background: var(--bg-void) !important;
    background-color: var(--bg-void) !important;
}

/* ——— TOP GLOW ——— */
body::after {
    content: '';
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.header-container {
    background: rgba(4, 8, 16, 0.85) !important;
    backdrop-filter: blur(24px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
    border-bottom: 1px solid var(--border) !important;
    z-index: 100;
}

.header-container.fixed {
    background: rgba(4, 8, 16, 0.95) !important;
    box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 1px 0 var(--border) !important;
}

/* Nav links */
.header-nav .header-page-link {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    transition: all var(--transition) !important;
}
.header-nav .header-page-link:hover {
    color: var(--text-primary) !important;
    background: rgba(255,255,255,0.04) !important;
}

/* Boost trigger */
.header-nav .boost-trigger {
    background: rgba(var(--accent-rgb), 0.08) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
    color: var(--accent) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
.header-nav .boost-trigger:hover {
    background: rgba(var(--accent-rgb), 0.14) !important;
    border-color: rgba(var(--accent-rgb), 0.28) !important;
    color: var(--accent-light) !important;
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.08) !important;
}

/* Boost submenu */
.header-nav .boost-submenu {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7) !important;
    border-radius: 16px !important;
}
.header-nav .boost-submenu-label {
    color: var(--text-muted) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-bottom: 1px solid var(--border) !important;
}
.header-nav .boost-cat-link {
    border-radius: 8px !important;
    transition: all var(--transition) !important;
}
.header-nav .boost-cat-link:hover {
    background: rgba(var(--accent-rgb), 0.06) !important;
    color: var(--text-primary) !important;
}

/* Game selector */
.navigation.gameselect .game-selector-trigger {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
}
.navigation.gameselect .game-selector-trigger:hover {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
.navigation.gameselect .game-submenu {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 16px 50px rgba(0,0,0,0.7) !important;
    border-radius: 14px !important;
}
.navigation.gameselect .game-link.active {
    background: rgba(var(--accent-rgb), 0.08) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
}
.navigation.gameselect .game-link:hover {
    background: rgba(255,255,255,0.04) !important;
}

/* User area */
.member-area .user-avatar {
    border: 2px solid rgba(var(--accent-rgb), 0.3) !important;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.1) !important;
}

.member-area .user-trigger,
.user-trigger {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}
.member-area .user-trigger:hover,
.user-trigger:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* User dropdown */
.user-dropdown .user-menu,
.member-area .user-menu {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6) !important;
    border-radius: 14px !important;
    padding: 6px !important;
}
.user-menu .menu-item,
.member-area .user-menu a.menu-item {
    border-radius: 8px !important;
    transition: all var(--transition) !important;
    color: var(--text-secondary) !important;
}
.user-menu .menu-item:hover,
.member-area .user-menu a.menu-item:hover {
    background: rgba(255,255,255,0.05) !important;
    color: var(--text-primary) !important;
}
.user-menu .menu-divider,
.member-area .user-menu .menu-divider {
    background: var(--border) !important;
}
.member-area .user-menu a.profile-item {
    color: var(--accent) !important;
}
.member-area .user-menu a.profile-item:hover {
    background: rgba(var(--accent-rgb), 0.08) !important;
}

/* Notification bell */
.notification-bell { border-radius: 10px !important; }
.notification-bell:hover {
    background: rgba(255,255,255,0.05) !important;
}

/* Notification dropdown */
.notification-dropdown {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6) !important;
    border-radius: 14px !important;
}
.notification-header {
    border-bottom: 1px solid var(--border) !important;
}
.notification-item {
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    transition: background var(--transition) !important;
}
.notification-item:hover {
    background: rgba(255,255,255,0.03) !important;
}

/* Mobile */
@media (max-width: 1063px) {
    .header-container .header .navigation.header-nav {
        background: rgba(4,8,16,0.98) !important;
        border-top: 1px solid var(--border) !important;
    }
}

/* ============================================================
   BUTTONS — Pill shape, bold, with glow
   ============================================================ */

/* Primary CTA */
.button.top.go,
.button.auth-button,
.auth-button,
.order-button,
.checkout-button,
.button.buy-button,
#order-now-btn,
.button.start-boost-now,
.review-btn-primary,
.withdraw-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
    color: #0a0f1a !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: var(--pill-radius) !important;
    box-shadow: var(--cta-shadow) !important;
    transition: all var(--transition) !important;
    text-shadow: none !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
    overflow: hidden !important;
}
.button.top.go:hover,
.button.auth-button:hover,
.auth-button:hover,
.order-button:hover,
.checkout-button:hover,
.button.buy-button:hover,
#order-now-btn:hover,
.button.start-boost-now:hover,
.review-btn-primary:hover,
.withdraw-btn:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
    box-shadow: var(--cta-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

/* Secondary / Ghost */
.btn-refresh,
.button.secondary,
.review-btn-secondary {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--pill-radius) !important;
    transition: all var(--transition) !important;
}
.btn-refresh:hover,
.button.secondary:hover,
.review-btn-secondary:hover {
    border-color: rgba(var(--accent-rgb), 0.25) !important;
    color: var(--accent) !important;
    background: rgba(var(--accent-rgb), 0.04) !important;
}

/* ============================================================
   CARD SYSTEM — Dark with top accent strip
   ============================================================ */

.blackbox,
.blackbox-calculator-container {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    backdrop-filter: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Accent strip on top of cards */
.blackbox::before,
.card::before,
.order-card::before,
.feature-card::before,
.faq-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--accent), var(--gold), transparent) !important;
    opacity: 0 !important;
    transition: opacity var(--transition) !important;
    z-index: 1 !important;
}

.blackbox:hover::before,
.card:hover::before,
.order-card:hover::before,
.feature-card:hover::before {
    opacity: 1 !important;
}

/* Generic card */
.card,
.summary-card,
.stats-card,
.avatar-card,
.deposit-card,
.payment-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    transition: all var(--transition) !important;
    position: relative !important;
    overflow: hidden !important;
}
.card:hover {
    border-color: var(--border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
}

.card-header {
    border-bottom: 1px solid var(--border) !important;
}
.card-header h3 {
    color: var(--text-primary) !important;
}

/* ============================================================
   FORM INPUTS — Subtle dark with accent focus ring
   ============================================================ */

.booster-rank-selection,
.booster-input-group input,
.booster-input-group select,
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form select,
.profile-form input,
.profile-form select,
.profile-form textarea,
.card-body input,
.card-body select,
.card-body textarea,
#profile-form input,
#profile-form select,
#profile-form textarea,
.region-dropdown,
.chat-input {
    background: var(--bg-base) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    transition: all var(--transition) !important;
    padding: 10px 14px !important;
}

.booster-rank-selection:focus,
.booster-input-group input:focus,
.booster-input-group select:focus,
.auth-form input:focus,
.auth-form select:focus,
.profile-form input:focus,
.profile-form select:focus,
.card-body input:focus,
.card-body select:focus,
#profile-form input:focus,
#profile-form select:focus,
.region-dropdown:focus,
.chat-input:focus {
    border-color: rgba(var(--accent-rgb), 0.4) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08), 0 0 16px rgba(var(--accent-rgb), 0.06) !important;
    outline: none !important;
}

/* Select options */
select option {
    background: var(--bg-raised) !important;
    color: var(--text-primary) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single {
    background: var(--bg-base) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 10px !important;
    height: auto !important;
    padding: 8px 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}
.select2-dropdown {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
}
.select2-results__option {
    padding: 10px 14px !important;
    color: var(--text-secondary) !important;
    border-radius: 6px !important;
    margin: 2px 4px !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgba(var(--accent-rgb), 0.1) !important;
    color: var(--accent-light) !important;
}
.select2-container--default .select2-results__option--selected {
    background: rgba(var(--accent-rgb), 0.06) !important;
    color: var(--accent) !important;
}
.select2-search--dropdown .select2-search__field {
    background: var(--bg-base) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

/* ============================================================
   TAB SYSTEM — Underline style instead of pills
   ============================================================ */

.boost-type-tabs {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    gap: 0 !important;
}

.boost-tab {
    border-radius: 0 !important;
    color: var(--text-muted) !important;
    border-bottom: 2px solid transparent !important;
    padding: 12px 20px !important;
    transition: all var(--transition) !important;
    font-weight: 500 !important;
    background: transparent !important;
    position: relative !important;
}
.boost-tab:hover {
    color: var(--text-secondary) !important;
    background: transparent !important;
}
.boost-tab.active {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.12) !important;
    font-weight: 600 !important;
}

/* Tabs in panels */
.tabs-wrapper .tabs,
.earnings-tabs {
    background: var(--bg-base) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    border: 1px solid var(--border) !important;
    display: inline-flex !important;
    gap: 2px !important;
}
.tab,
.earnings-tab {
    border-radius: 10px !important;
    color: var(--text-muted) !important;
    padding: 8px 18px !important;
    font-weight: 500 !important;
    transition: all var(--transition) !important;
}
.tab.active,
.earnings-tab.active {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2) !important;
    font-weight: 600 !important;
}
.tab:hover:not(.active),
.earnings-tab:hover:not(.active) {
    color: var(--text-secondary) !important;
    background: rgba(255,255,255,0.03) !important;
}

/* ============================================================
   EXTRAS / CHECKBOX OPTIONS — Toggle cards
   ============================================================ */

.extras-grid .extra-option {
    background: var(--bg-base) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    transition: all var(--transition) !important;
    cursor: pointer !important;
}
.extras-grid .extra-option:hover {
    border-color: rgba(255,255,255,0.1) !important;
}
.extras-grid .extra-option.active,
.extras-grid .extra-option.selected {
    border-color: rgba(var(--accent-rgb), 0.35) !important;
    background: rgba(var(--accent-rgb), 0.04) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.1) !important;
}

/* ============================================================
   PRICING / SUMMARY
   ============================================================ */

.price-summary,
.order-summary,
.summary-box {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
}

.price-display,
.total-price {
    color: var(--gold) !important;
    font-weight: 800 !important;
    font-size: 1.4em !important;
    text-shadow: 0 0 20px rgba(var(--gold-rgb), 0.3) !important;
}

/* ============================================================
   ORDER CARDS — With left accent strip
   ============================================================ */

.order-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
    transition: all var(--transition) !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Left accent strip */
.order-card::after {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    bottom: 12px !important;
    left: 0 !important;
    width: 3px !important;
    background: var(--accent) !important;
    border-radius: 0 3px 3px 0 !important;
    opacity: 0 !important;
    transition: opacity var(--transition) !important;
}

.order-card:hover {
    border-color: var(--border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-2px) !important;
}
.order-card:hover::after {
    opacity: 1 !important;
}

.order-card .badge-solo {
    background: rgba(var(--accent-rgb), 0.1) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.2) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}
.order-card .badge-duo {
    background: rgba(var(--purple-rgb), 0.1) !important;
    color: var(--purple) !important;
    border: 1px solid rgba(var(--purple-rgb), 0.2) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.order-card .order-price {
    color: var(--accent) !important;
    font-weight: 800 !important;
    font-size: 1.1em !important;
}

.order-card .claim-btn,
.order-card .view-btn {
    background: var(--accent) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--pill-radius) !important;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2) !important;
    transition: all var(--transition) !important;
    letter-spacing: 0.2px !important;
}
.order-card .claim-btn:hover,
.order-card .view-btn:hover {
    background: var(--cta-hover) !important;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   FEATURE / TRUST CARDS — Icon + text, minimal
   ============================================================ */

.feature-card,
.features-section .trust-card,
.features-section .feature-item {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
    transition: all var(--transition-slow) !important;
    position: relative !important;
    overflow: hidden !important;
}
.feature-card:hover,
.features-section .trust-card:hover,
.features-section .feature-item:hover {
    border-color: var(--border-hover) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--card-shadow-hover) !important;
}

.features-section {
    background: transparent !important;
    position: relative !important;
}

/* ============================================================
   FAQ — Accordion style
   ============================================================ */

.faq-item,
.faq-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    transition: all var(--transition) !important;
    position: relative !important;
    overflow: hidden !important;
}
.faq-item:hover,
.faq-card:hover {
    border-color: rgba(255,255,255,0.08) !important;
}
.faq-item.active,
.faq-card.active {
    border-color: rgba(var(--accent-rgb), 0.15) !important;
}
.faq-item.active::before,
.faq-card.active::before {
    opacity: 1 !important;
}

/* ============================================================
   ORDER DETAIL / CHAT
   ============================================================ */

.order-detail-container,
.order-page {
    background: var(--bg-deep) !important;
}

.order-detail-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
}

.chat-container {
    background: var(--bg-base) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
}

.chat-message.own {
    background: rgba(var(--accent-rgb), 0.08) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.12) !important;
    border-radius: 14px 14px 4px 14px !important;
}
.chat-message.other {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px 14px 14px 4px !important;
}

.chat-input-wrapper {
    background: var(--bg-base) !important;
    border-top: 1px solid var(--border) !important;
}

/* ============================================================
   AUTH PAGES
   ============================================================ */

.auth-container {
    background: var(--bg-deep) !important;
    position: relative !important;
}

.auth-box {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 40px rgba(0,0,0,0.5) !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

/* Animated gradient border on auth box */
.auth-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--accent), var(--gold), transparent) !important;
    animation: shimmer 3s ease-in-out infinite !important;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.auth-footer {
    border-top: 1px solid var(--border) !important;
}
.auth-footer a {
    color: var(--accent) !important;
}

.code-input-wrapper input {
    background: var(--bg-base) !important;
    border: 2px solid rgba(var(--accent-rgb), 0.15) !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
}
.code-input-wrapper input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1), 0 0 20px rgba(var(--accent-rgb), 0.08) !important;
}

/* ============================================================
   DASHBOARD PAGES
   ============================================================ */

.booster-dashboard,
.member-dashboard,
.booster-profile,
.orders-container {
    background: var(--bg-deep) !important;
    position: relative !important;
}

.page-header h1,
.orders-header h1 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}
.page-header p,
.orders-header p {
    color: var(--text-muted) !important;
}

/* Section headers */
.section-header h2 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}
.section-count {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 2px 8px !important;
}

/* ============================================================
   EARNINGS SUMMARY CARDS — Colored left border
   ============================================================ */

.earnings-summary .summary-card {
    border-left: 3px solid var(--accent) !important;
}
.earnings-summary .summary-card.green {
    border-left-color: var(--success) !important;
}
.earnings-summary .summary-card.amber {
    border-left-color: var(--warning) !important;
}
.earnings-summary .summary-card.red {
    border-left-color: var(--danger) !important;
}
.earnings-summary .summary-card.purple,
.earnings-summary .summary-card.blue {
    border-left-color: var(--info) !important;
}

/* ============================================================
   STATUS BADGES — Dot + label style
   ============================================================ */

.status-badge,
.badge {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
}

.status-pending {
    background: rgba(var(--warning-rgb), 0.1) !important;
    color: var(--warning) !important;
    border: 1px solid rgba(var(--warning-rgb), 0.15) !important;
}
.status-confirmed, .status-active {
    background: rgba(var(--accent-rgb), 0.1) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
}
.status-in-progress {
    background: rgba(var(--info-rgb), 0.1) !important;
    color: var(--info) !important;
    border: 1px solid rgba(var(--info-rgb), 0.15) !important;
}
.status-completed {
    background: rgba(var(--success-rgb), 0.1) !important;
    color: var(--success) !important;
    border: 1px solid rgba(var(--success-rgb), 0.15) !important;
}
.status-cancelled {
    background: rgba(var(--danger-rgb), 0.1) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(var(--danger-rgb), 0.15) !important;
}

/* ============================================================
   PROFILE
   ============================================================ */

.avatar-upload-btn {
    background: rgba(var(--accent-rgb), 0.08) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
    border-radius: var(--pill-radius) !important;
}
.avatar-upload-btn:hover {
    background: rgba(var(--accent-rgb), 0.14) !important;
    border-color: rgba(var(--accent-rgb), 0.25) !important;
}

.commission-badge {
    background: rgba(var(--accent-rgb), 0.08) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
    border-radius: var(--pill-radius) !important;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.progress-bar,
.order-progress-bar {
    background: var(--bg-surface) !important;
    border-radius: var(--pill-radius) !important;
    overflow: hidden !important;
}
.progress-bar-fill,
.order-progress-fill {
    background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--gold)) !important;
    border-radius: var(--pill-radius) !important;
    position: relative !important;
}
.progress-bar-fill::after,
.order-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
    animation: progress-shine 2s ease-in-out infinite !important;
}
@keyframes progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast-container .toast {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.toast.toast-success { border-left: 3px solid var(--success) !important; }
.toast.toast-error { border-left: 3px solid var(--danger) !important; }
.toast.toast-warning { border-left: 3px solid var(--warning) !important; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    background: var(--bg-void) !important;
    border-top: 1px solid var(--border) !important;
}

.footer-badge {
    border-radius: 12px !important;
}
.footer-badge.quality {
    background: rgba(var(--accent-rgb), 0.06) !important;
    border-color: rgba(var(--accent-rgb), 0.12) !important;
}
.footer-badge.quality svg { color: var(--accent) !important; }
.footer-badge.security {
    background: rgba(var(--success-rgb), 0.06) !important;
    border-color: rgba(var(--success-rgb), 0.12) !important;
}
.footer-badge.trust {
    background: rgba(var(--info-rgb), 0.06) !important;
    border-color: rgba(var(--info-rgb), 0.12) !important;
}

.footer-content .col span:first-child {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}
.footer-content .col a {
    color: var(--text-muted) !important;
    transition: color var(--transition) !important;
}
.footer-content .col a:hover {
    color: var(--accent) !important;
}

.footer .divider .line {
    background: var(--border) !important;
}

/* ============================================================
   COOKIE NOTICE
   ============================================================ */

.cookie-notice {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 -4px 40px rgba(0,0,0,0.5) !important;
}

/* ============================================================
   ANNOUNCEMENT MODAL
   ============================================================ */

.announcement-modal {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
}
.announcement-modal-header {
    border-bottom: 1px solid var(--border) !important;
}
.announcement-modal-footer {
    border-top: 1px solid var(--border) !important;
}
.announcement-modal-body a {
    color: var(--accent) !important;
}

/* ============================================================
   LOADING / SPINNER
   ============================================================ */

.spinner,
.loading-spinner .spinner {
    border-color: rgba(var(--accent-rgb), 0.1) !important;
    border-top-color: var(--accent) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination-controls button,
.pagination button,
.pagination a {
    background: var(--bg-base) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    border-radius: 8px !important;
    transition: all var(--transition) !important;
}
.pagination-controls button:hover,
.pagination button:hover,
.pagination a:hover {
    border-color: rgba(var(--accent-rgb), 0.15) !important;
    color: var(--accent) !important;
}
.pagination-controls button.active,
.pagination .active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* ============================================================
   EMPTY STATES
   ============================================================ */

.empty-state { color: var(--text-muted) !important; }
.empty-state svg { color: var(--text-faint) !important; }

/* ============================================================
   MISC OVERRIDES
   ============================================================ */

/* Poke button */
.poke-btn {
    background: rgba(var(--warning-rgb), 0.08) !important;
    border: 1px solid rgba(var(--warning-rgb), 0.15) !important;
    color: var(--warning) !important;
    border-radius: var(--pill-radius) !important;
}
.poke-btn:hover {
    background: rgba(var(--warning-rgb), 0.14) !important;
    border-color: rgba(var(--warning-rgb), 0.25) !important;
}

/* Earning tooltips */
.earning-tooltip {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

/* By-games notice */
.by-games-notice {
    background: rgba(var(--warning-rgb), 0.06) !important;
    border: 1px solid rgba(var(--warning-rgb), 0.12) !important;
    border-radius: 12px !important;
}

/* Completion modal */
.completion-modal {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
}

/* Screenshot upload */
.screenshot-upload-area {
    background: rgba(var(--accent-rgb), 0.02) !important;
    border: 2px dashed rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    transition: all var(--transition) !important;
}
.screenshot-upload-area:hover {
    border-color: rgba(var(--accent-rgb), 0.2) !important;
    background: rgba(var(--accent-rgb), 0.04) !important;
}

/* Stepper */
.stepper-btn {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    border-radius: 8px !important;
}
.stepper-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.2) !important;
    color: var(--accent) !important;
}
.stepper-input {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
}

/* Static pages */
.static-page, .static-content {
    background: var(--bg-deep) !important;
}
.static-page .content-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
}

/* Review cards */
.review-step .step-num {
    background: var(--bg-surface) !important;
    border: 2px solid rgba(255,255,255,0.08) !important;
}
.review-step.active .step-num {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}
.review-step.completed .step-num {
    background: var(--success) !important;
    border-color: var(--success) !important;
}
.review-step-line {
    background: rgba(255,255,255,0.06) !important;
}
.review-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
}
.review-card-header {
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}
.review-card-header svg { color: var(--accent) !important; }

/* Locked fields */
.locked-label { color: var(--warning) !important; }
.locked-fields-warning {
    background: rgba(var(--warning-rgb), 0.05) !important;
    border: 1px solid rgba(var(--warning-rgb), 0.1) !important;
    border-radius: 10px !important;
    color: var(--warning) !important;
}

/* Addon checkmarks */
.all-checkmark-wrapper .checkmark {
    background: var(--bg-base) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    transition: all var(--transition) !important;
}
.all-checkmark-wrapper .checkmark:hover {
    border-color: rgba(255,255,255,0.1) !important;
}
.all-checkmark-wrapper .checkmark.active,
.all-checkmark-wrapper .checkmark.checked {
    border-color: rgba(var(--accent-rgb), 0.3) !important;
    background: rgba(var(--accent-rgb), 0.04) !important;
}

/* Heading gradient text */
/* Game selection section */
.game-selection-section {
    background: var(--bg-deep) !important;
}

.game-cards-grid .game-card {
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    background-size: cover !important;
    background-position: center !important;
    transition: all var(--transition-slow) !important;
}
.game-cards-grid .game-card--active {
    border-color: rgba(var(--accent-rgb), 0.2) !important;
}
.game-cards-grid .game-card--active:hover {
    border-color: rgba(var(--accent-rgb), 0.4) !important;
    box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.1) !important;
    transform: translateY(-6px) !important;
}
.game-card__soon-badge {
    background: rgba(var(--warning-rgb), 0.12) !important;
    color: var(--warning) !important;
    border: 1px solid rgba(var(--warning-rgb), 0.2) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* Hero */
.top-block h1 { color: var(--text-primary) !important; }
.top-block h1 span {
    background: linear-gradient(135deg, var(--accent-light), var(--gold)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.top-block p { color: var(--text-muted) !important; }

/* Estimated completion */
.est-completion-banner {
    background: rgba(var(--accent-rgb), 0.04) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.08) !important;
    border-radius: 10px !important;
}
.est-completion-value { color: var(--accent) !important; }

/* Title icon */
.title-icon__title span { color: var(--accent) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .earnings-summary { grid-template-columns: 1fr !important; }
    .auth-box { padding: 28px 18px !important; border-radius: 16px !important; }
    .order-card { border-radius: 12px !important; }
}

@media (max-width: 480px) {
    :root { --card-radius: 10px; }
}

/* ============================================================
   GAMING ANIMATIONS — Blue/Gold theme
   ============================================================ */

@keyframes gold-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(250,185,17,0.15), var(--cta-shadow); }
    50% { box-shadow: 0 0 40px rgba(250,185,17,0.3), 0 0 80px rgba(250,185,17,0.1), var(--cta-shadow); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    33% { transform: translate(30px, -20px) scale(1.1); opacity: 0.5; }
    66% { transform: translate(-20px, 15px) scale(0.9); opacity: 0.2; }
}

@keyframes blue-glow-breathe {
    0%, 100% { opacity: 0.04; }
    50% { opacity: 0.08; }
}

/* Gold pulse on primary CTA */
.button.start-boost-now,
.button.top.go {
    animation: gold-pulse 3s ease-in-out infinite !important;
}

/* Animated header bottom border */
.header-container::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.4), rgba(250,185,17,0.3), transparent) !important;
    background-size: 200% 100% !important;
    animation: gradient-shift 8s ease infinite !important;
}

/* Gold shimmer sweep on CTA buttons */
.button.start-boost-now::after,
.button.top.go::after,
.button.auth-button::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    animation: progress-shine 3s ease-in-out infinite !important;
}

/* Blue ambient glow on body */
body::before {
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(37,99,235,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(250,185,17,0.02) 0%, transparent 50%),
        radial-gradient(circle at 1px 1px, rgba(37,99,235,0.04) 1px, transparent 0) !important;
    background-size: 100% 100%, 100% 100%, 32px 32px !important;
}

/* Feature cards glow on hover */
.feature-card:hover,
.game-card--active:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.5),
                0 0 40px rgba(37,99,235,0.06),
                inset 0 1px 0 rgba(37,99,235,0.1) !important;
}

/* Auth page ambient orbs */
.auth-container::before {
    content: '' !important;
    position: absolute !important;
    top: -30% !important;
    left: -15% !important;
    width: 130% !important;
    height: 130% !important;
    background: radial-gradient(ellipse at 30% 30%, rgba(37,99,235,0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 70%, rgba(250,185,17,0.03) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: blue-glow-breathe 6s ease-in-out infinite !important;
}

/* Auth footer link uses gold */
.auth-footer a {
    color: var(--gold) !important;
}
.auth-footer a:hover {
    color: var(--gold-light) !important;
}

/* ============================================================
   LIGHT MODE — Override design tokens
   ============================================================ */
body.light-mode {
    --bg-void: #f0f2f8 !important;
    --bg-deep: #f0f2f8 !important;
    --bg-base: #e8eaf2 !important;
    --bg-raised: #ffffff !important;
    --bg-surface: #eaedf7 !important;
    --bg-surface-2: #f5f6fa !important;

    --text-primary: #1a1f35 !important;
    --text-secondary: #4a5578 !important;
    --text-muted: #8a92a8 !important;
    --text-faint: #b0b8c9 !important;

    --border: rgba(0, 0, 0, 0.08) !important;
    --border-hover: rgba(37, 99, 235, 0.25) !important;
    --border-accent: rgba(37, 99, 235, 0.15) !important;

    --card-bg: #ffffff !important;
    --card-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    --card-shadow-hover: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(37,99,235,0.12) !important;

    background: #f0f2f8 !important;
    color: #1a1f35 !important;
}

/* Light mode scrollbar */
body.light-mode ::-webkit-scrollbar-track { background: #f0f2f8 !important; }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12) !important; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2) !important; }

/* Light mode auth pages */
body.light-mode .auth-container { background: transparent !important; }
body.light-mode .auth-container::before { opacity: 0.3 !important; }
body.light-mode .auth-box { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important; }
body.light-mode .auth-box::before { opacity: 0.2 !important; }
body.light-mode .auth-box h1 { color: #1a1f35 !important; }
body.light-mode .auth-subtitle { color: #4a5578 !important; }
body.light-mode .auth-form label { color: #1a1f35 !important; }
body.light-mode .auth-form input[type="email"],
body.light-mode .auth-form input[type="password"],
body.light-mode .auth-form input[type="text"] { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.12) !important; color: #1a1f35 !important; }
body.light-mode .auth-form input::placeholder { color: #8a92a8 !important; }
body.light-mode .auth-form select { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.12) !important; color: #1a1f35 !important; }
body.light-mode .auth-form select option { background: #ffffff !important; color: #1a1f35 !important; }
body.light-mode .auth-footer { border-top-color: rgba(0,0,0,0.08) !important; }
body.light-mode .auth-footer p { color: #4a5578 !important; }
body.light-mode .checkbox-label span { color: #4a5578 !important; }