/* Black-toned frontend palette for both desktop and mobile. No layout rules. */
:root {
    --fl-primary: var(--theme-color, #10c977);
    --fl-primary-dark: var(--theme-color-dark, #0ca86a);
    --fl-cyan: var(--theme-color, #10c977);
    --fl-bg: #0b0f15;
    --fl-bg-soft: #101620;
    --fl-surface: #151d27;
    --fl-surface-2: #192330;
    --fl-surface-3: #202d3b;
}

body,
.main-content,
.fl-earn-page.main-content { background: #0b0f15 !important; }
body::before { opacity: .08; }
.header-container,
.fl-earn-header .header-container { background: #101620 !important; }
.main-content .card { background: #151d27 !important; border-color: #2b3948 !important; }
.fl-live-strip { background: #101620 !important; }
.fl-live-strip .cash_live_1 > .csm-live-badge,
.fl-earn-page .cash_live_1 > .csm-live-badge,
.fl-earn-page .cash_live_1 .user-List-CSM,
.fl-earn-wallet,
.fl-earn-page .csm-platform {
    background: #1b2531 !important;
    border-color: #35465a !important;
    box-shadow: none !important;
}
.fl-live-strip .cash_live_1 > .csm-live-badge .csm-live-dot,
.fl-earn-page .cash_live_1 .csm-live-dot { background: var(--fl-primary) !important; box-shadow: none !important; }

/* Primary accents continue to use Website Theme Color from admin settings. */
.fl-nav-link.is-active,
.csm_btn_log_2,
.fl-button-primary,
.fl-earn-cashout {
    background: var(--fl-primary) !important;
    border-color: var(--fl-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.fl-nav-link.is-active i,
.fl-nav-link.is-active span,
.csm_btn_log_2 i { color: #fff !important; }
.fl-earn-header .fl-earn-nav .fl-nav-link.is-active::after {
    background: var(--fl-primary) !important;
    box-shadow: none !important;
}
.fl-earn-header .fl-earn-nav .fl-nav-link.is-active i,
.fl-earn-wallet-symbol,
.fl-earn-offers-heading > a,
.fl-earn-offers-heading h2 i,
.fl-earn-page .offerwall-section .fea_text i { color: var(--fl-primary) !important; }

/* The existing cards and swiper positions are deliberately untouched. */
.fl-hero,
.fl-signup-card,
.fl-feature-card,
.fl-way-card,
.fl-benefit-panel,
.fl-reward-panel,
.fl-earn-page .offerwall-section {
    background: #151d27 !important;
    border-color: #2b3948 !important;
}
.fl-earn-page .swiper.offerwall-section {
    background: #0d1117 !important;
    border-color: #344254 !important;
}
.fl-home::before,
.fl-home::after,
.fl-hero::before,
.fl-hero::after,
.fl-signup-card::before,
.fl-signup-card::after { opacity: .2; }
.fl-hero h1 span {
    background: none !important;
    color: var(--fl-primary) !important;
    -webkit-text-fill-color: var(--fl-primary) !important;
}
.fl-signup-submit,
.fl-help-tab.is-active,
.fl-support-send {
    background: var(--fl-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.fl-footer,
.fl-earn-footer {
    background: #0d1117 !important;
    border-color: #344254 !important;
}
.fl-earn-footer::before { background: #344254 !important; }
.fl-earn-footer-socials a,
.fl-footer-socials a {
    background: #1b2531 !important;
    border-color: #35465a !important;
    color: #e5edf5 !important;
    box-shadow: none !important;
}
.fl-earn-footer-socials a:hover,
.fl-footer-socials a:hover {
    background: var(--fl-primary) !important;
    border-color: var(--fl-primary) !important;
    color: #fff !important;
}
body .fl-support-dock .fl-support-button {
    background: #1b2531 !important;
    border-color: #35465a !important;
    color: #f5f8fb !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25) !important;
}
body .fl-support-dock .fl-support-button > i { color: #f5f8fb !important; }

/* Desktop footer cards use the existing dark palette. */
@media (min-width: 1024px) {
    .fl-earn-footer {
        width: min(1320px, calc(100% - 56px));
        margin-top: 8px;
        margin-bottom: 16px;
        border-bottom: 1px solid #344254 !important;
        border-radius: 20px;
    }
    .fl-earn-footer-inner { width: calc(100% - 40px); }
    .fl-earn-footer-main { gap: 16px; padding: 20px 0 16px; }
    .fl-earn-footer-brand,
    .fl-earn-footer-column {
        min-width: 0;
        padding: 18px;
        border: 1px solid #344254;
        border-radius: 14px;
        background: transparent;
    }
    .fl-earn-footer-brand p { margin-top: 10px; }
    .fl-earn-footer-actions { margin-top: 14px; }
}

@media (max-width: 768px) {
    body .csm-bottom-nav.fl-mobile-nav ul li a.csm_b_nav_active {
        border-top-color: var(--fl-primary) !important;
        background: #1b2531 !important;
        color: var(--fl-primary) !important;
    }
}