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

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary: #06b6d4;
    --accent: #22d3ee;
    --accent-pink: #ec4899;
    --accent-purple: #a855f7;
    --accent-green: #10b981;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    --bg-primary: #0c0a1d;
    --bg-secondary: #1e1b2e;
    --bg-card: rgba(30, 27, 46, 0.85);
    --bg-gradient: linear-gradient(135deg, #1e1b2e 0%, #312e81 40%, #0e7490 80%, #134e4a 100%);
    --bg-radiant: linear-gradient(160deg, rgba(49, 46, 129, 0.4) 0%, rgba(30, 27, 46, 0.95) 40%, rgba(6, 182, 212, 0.15) 100%);

    --text-primary: #f0f9ff;
    --text-secondary: #b4c5d4;
    --border: rgba(99, 102, 241, 0.2);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);
    --shadow-glow-cyan: 0 0 25px rgba(6, 182, 212, 0.2);
}

body {
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(236, 72, 153, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse 70% 50% at 50% 90%, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #0c0a1d 0%, #1e1b2e 50%, #0f172a 100%);
    color: var(--text-primary);
}

/* Hero – vivid gradient like PolkDao */
.hero-section {
    background: linear-gradient(135deg, #1e1b2e 0%, #312e81 25%, #4c1d95 50%, #0e7490 75%, #134e4a 100%);
    position: relative;
}
.hero-section::before {
    background:
        linear-gradient(105deg, transparent 0%, rgba(99, 102, 241, 0.2) 30%, transparent 50%),
        linear-gradient(75deg, transparent 0%, rgba(236, 72, 153, 0.12) 50%, transparent 70%),
        linear-gradient(135deg, transparent 0%, rgba(6, 182, 212, 0.15) 60%, transparent 80%);
}

.hero-monitor {
    background: linear-gradient(145deg, rgba(49, 46, 129, 0.6) 0%, rgba(30, 27, 46, 0.9) 50%, rgba(6, 182, 212, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.4);
    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.2), 0 0 40px rgba(6, 182, 212, 0.1), inset 0 1px 0 rgba(255,255,255,0.08);
}

.hero-title .highlight,
.hero-title .logo-ai,
.package-price {
    background: linear-gradient(90deg, #22d3ee, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Primary button – gradient CTA */
.btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4), 0 0 20px rgba(6, 182, 212, 0.2);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #22d3ee 100%);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.5), 0 0 30px rgba(6, 182, 212, 0.3);
}

/* Cards – subtle gradient borders and glow */
.dashboard-card,
.earning-card,
.plan-card-titan,
.card {
    background: linear-gradient(165deg, rgba(30, 27, 58, 0.95) 0%, rgba(22, 22, 42, 0.98) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 20px rgba(99, 102, 241, 0.06), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.dashboard-card:hover,
.earning-card:hover,
.card:hover {
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 24px rgba(139, 92, 246, 0.12), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* Dashboard highlight values stay cyan */
#dashboardAvailableROI,
#pendingReferralNew,
#pendingTeamNew,
#currentROI {
    color: #22d3ee !important;
}

/* Dashboard / hero stat cards – colorful */
.dashboard-section .hero-stat,
.hero-stat {
    background: linear-gradient(145deg, rgba(49, 46, 129, 0.5) 0%, rgba(30, 27, 46, 0.9) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.1);
}
.dashboard-section .hero-stat .stat-value,
.hero-stat .stat-value {
    color: #22d3ee;
}

/* Section headings – gradient accent on highlighted word only */
.section-heading span {
    background: linear-gradient(90deg, #22d3ee, #a855f7);
    -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(49, 46, 129, 0.3) 0%, rgba(30, 27, 46, 0.9) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 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: #22d3ee;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
}
.earning-highlight-box .title {
    color: #22d3ee;
}
.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(99, 102, 241, 0.25), rgba(236, 72, 153, 0.15)) !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    color: #f0f9ff !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

/* Wallet / balance button */
.header-wallet .btn-primary,
.header-wallet .btn-secondary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(6, 182, 212, 0.9) 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(99, 102, 241, 0.2), rgba(6, 182, 212, 0.15)) !important;
    border-color: rgba(34, 211, 238, 0.3) !important;
}

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

/* Claim cards – subtle gradient */
.claim-card,
.roi-claim-card {
    background: linear-gradient(160deg, rgba(49, 46, 129, 0.2) 0%, rgba(30, 27, 46, 0.95) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

/* Footer / nav – subtle tint */
.main-footer {
    background: linear-gradient(180deg, transparent 0%, rgba(30, 27, 46, 0.8) 100%);
    border-top: 1px solid rgba(99, 102, 241, 0.15);
}