/* Colorful theme inspired by PolkDao – vibrant gradients and accents */

:root {
    --primary: #FF0080;
    --primary-dark: #E6007A;
    --primary-light: #FF3399;
    --secondary: #00FFFF;
    --accent: #00C0FF;
    --accent-pink: #FF0080;
    --accent-purple: #a855f7;
    --accent-green: #10b981;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    --bg-primary: #120020;
    --bg-secondary: #1A002E;
    --bg-card: rgba(26, 0, 46, 0.9);
    --bg-gradient: linear-gradient(135deg, #2E004F 0%, #1A002E 50%, #120020 100%);
    --bg-radiant: linear-gradient(160deg, rgba(46, 0, 79, 0.5) 0%, rgba(26, 0, 46, 0.95) 40%, rgba(0, 255, 255, 0.08) 100%);

    --text-primary: #FFFFFF;
    --text-secondary: #E0F0FF;
    --border: rgba(255, 0, 128, 0.25);
    --shadow-glow: 0 0 30px rgba(255, 0, 128, 0.2);
    --shadow-glow-cyan: 0 0 25px rgba(0, 255, 255, 0.2);
}

body {
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(255, 0, 128, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(0, 255, 255, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse 70% 50% at 50% 90%, rgba(255, 0, 128, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #120020 0%, #1A002E 50%, #0f0a1a 100%);
    color: var(--text-primary);
}

/* Hero – dark purple/indigo + magenta/cyan */
.hero-section {
    background: linear-gradient(135deg, #1A002E 0%, #2E004F 25%, #3C006B 50%, #1A002E 75%, #120020 100%);
    position: relative;
}
.hero-section::before {
    background:
        linear-gradient(105deg, transparent 0%, rgba(255, 0, 128, 0.15) 30%, transparent 50%),
        linear-gradient(75deg, transparent 0%, rgba(0, 255, 255, 0.08) 50%, transparent 70%),
        linear-gradient(135deg, transparent 0%, rgba(255, 0, 128, 0.1) 60%, transparent 80%);
}

.hero-monitor {
    background: linear-gradient(145deg, rgba(46, 0, 79, 0.6) 0%, rgba(26, 0, 46, 0.9) 50%, rgba(255, 0, 128, 0.06) 100%);
    border: 1px solid rgba(255, 0, 128, 0.35);
    box-shadow: 0 20px 50px rgba(255, 0, 128, 0.15), 0 0 40px rgba(0, 255, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.08);
}

.hero-title .highlight,
.hero-title .logo-ai,
.package-price {
    background: linear-gradient(90deg, #00FFFF, #FF0080, #FF3399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Primary button – magenta CTA */
.btn-primary {
    background: linear-gradient(135deg, #FF0080 0%, #E6007A 50%, #CC0066 100%);
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px rgba(255, 0, 128, 0.4), 0 0 20px rgba(255, 0, 128, 0.2);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #FF3399 0%, #FF0080 50%, #E6007A 100%);
    box-shadow: 0 12px 32px rgba(255, 0, 128, 0.5), 0 0 30px rgba(0, 255, 255, 0.2);
}

/* Cards – dark purple with magenta/cyan border */
.dashboard-card,
.earning-card,
.plan-card-titan,
.card {
    background: linear-gradient(165deg, rgba(46, 0, 79, 0.5) 0%, rgba(26, 0, 46, 0.98) 100%) !important;
    border: 1px solid rgba(255, 0, 128, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 20px rgba(255, 0, 128, 0.06), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.dashboard-card:hover,
.earning-card:hover,
.card:hover {
    border-color: rgba(255, 0, 128, 0.5) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 24px rgba(255, 0, 128, 0.12), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* Dashboard highlight values – cyan */
#dashboardAvailableROI,
#pendingReferralNew,
#pendingTeamNew,
#currentROI {
    color: #00FFFF !important;
}

/* Dashboard / hero stat cards – colorful */
.dashboard-section .hero-stat,
.hero-stat {
    background: linear-gradient(145deg, rgba(46, 0, 79, 0.5) 0%, rgba(26, 0, 46, 0.9) 100%) !important;
    border: 1px solid rgba(255, 0, 128, 0.3) !important;
    box-shadow: 0 6px 20px rgba(255, 0, 128, 0.1);
}
.dashboard-section .hero-stat .stat-value,
.hero-stat .stat-value {
    color: #00FFFF;
}

/* Section headings – gradient accent on highlighted word only */
.section-heading span {
    background: linear-gradient(90deg, #00FFFF, #FF0080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Earning highlights – colorful boxes */
.earning-highlights-grid {
    gap: 20px;
}
.earning-highlight-box {
    background: linear-gradient(145deg, rgba(46, 0, 79, 0.3) 0%, rgba(26, 0, 46, 0.9) 100%) !important;
    border: 1px solid rgba(255, 0, 128, 0.25) !important;
    box-shadow: 0 8px 24px rgba(255, 0, 128, 0.08);
}
.earning-highlight-box.dashboard-box {
    background: linear-gradient(160deg, #2F1C12 0%, #1f1510 50%, #1a120e 100%) !important;
    border-color: rgba(234, 88, 12, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.earning-highlight-box.dashboard-box:hover {
    box-shadow: 0 14px 36px rgba(0,0,0,0.4), 0 0 20px rgba(234, 88, 12, 0.12);
}
.earning-highlight-box .check {
    color: #00FFFF;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
}
.earning-highlight-box .title {
    color: #00FFFF;
}
.earning-highlight-box.dashboard-box .title {
    color: #fff;
}
.earning-highlight-box.dashboard-box .statement {
    color: rgba(255,255,255,0.85);
}

/* Feature chips – gradient pills */
.feature-chip {
    background: linear-gradient(90deg, rgba(255, 0, 128, 0.2), rgba(0, 255, 255, 0.1)) !important;
    border: 1px solid rgba(255, 0, 128, 0.35) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(255, 0, 128, 0.15);
}

/* Wallet / balance button */
.header-wallet .btn-primary,
.header-wallet .btn-secondary {
    background: linear-gradient(135deg, rgba(255, 0, 128, 0.9) 0%, rgba(0, 255, 255, 0.2) 100%);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}

/* Dashboard monitor grid (stats + chips) */
.dashboard-monitor-stats-grid .dashboard-team-info-boxes .feature-chip {
    background: linear-gradient(90deg, rgba(255, 0, 128, 0.2), rgba(0, 255, 255, 0.1)) !important;
    border-color: rgba(0, 255, 255, 0.3) !important;
}

/* Accent values (USDT, amounts) */
.dashboard-value[id="dashboardAvailableROI"],
.stat-value,
.package-price,
.earning-amount {
    color: #00FFFF !important;
}

/* Claim cards – subtle gradient */
.claim-card,
.roi-claim-card {
    background: linear-gradient(160deg, rgba(46, 0, 79, 0.2) 0%, rgba(26, 0, 46, 0.95) 100%) !important;
    border: 1px solid rgba(255, 0, 128, 0.25) !important;
}

/* Footer – no box, only top divider */
.main-footer {
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 0, 128, 0.15);
    border-radius: 0;
    box-shadow: none;
}
.main-footer .footer-container {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}