/* ===== THEME SYSTEM ===== */
[data-theme="light"] {
    --gold-grad: linear-gradient(135deg, #f6e0b3 0%, #d4af37 100%);
    --green-grad: linear-gradient(135deg, #11694e 0%, #064e3b 100%);
    --bg-grad: linear-gradient(180deg, #fdfbf7 0%, #e8eee9 100%);
    --glass: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.4);
    --gold-dark: #aa8a2e;
    --green-dark: #064e3b;
    --text-main: #2d3436;
    --text-muted: #888;
    --shadow-soft: 0 8px 32px rgba(31, 38, 135, 0.1);
    --shadow-neumorph: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
    --card-bg: linear-gradient(145deg, #ffffff, #f5f5f5);
    --card-border: rgba(238, 238, 238, 0.8);
    --footer-bg: linear-gradient(135deg, #11694e 0%, #064e3b 100%);
    --nav-bg: rgba(6, 78, 59, 0.85);
    --nav-text: rgba(255, 255, 255, 0.6);
    --nav-active: #f6e0b3;
    --search-bg: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
    --filter-bg: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
    --pricing-card-bg: linear-gradient(145deg, #ffffff, #f5f5f5);
    --pricing-card-border: rgba(238, 238, 238, 0.8);
    --pricing-feature-border: rgba(0,0,0,0.04);
    --pricing-feature-text: #555;
    --stat-label: #888;
    --genre-count: rgba(255,255,255,0.7);
    --hero-text: #fff;
    --hero-sub: #f6e0b3;
    --toggle-icon: "🌙";
}

[data-theme="dark"] {
    --gold-grad: linear-gradient(135deg, #d4af37 0%, #f6e0b3 100%);
    --green-grad: linear-gradient(135deg, #1a8a6e 0%, #0d7a5b 100%);
    --bg-grad: linear-gradient(180deg, #121212 0%, #1e1e1e 100%);
    --glass: rgba(42, 42, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --gold-dark: #f6e0b3;
    --green-dark: #4ade80;
    --text-main: #f0f0f0;
    --text-muted: #a0a0a0;
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-neumorph: 6px 6px 12px #0a0a0a, -6px -6px 12px #2a2a2a;
    --card-bg: linear-gradient(145deg, #2a2a2a, #1e1e1e);
    --card-border: rgba(255, 255, 255, 0.06);
    --footer-bg: linear-gradient(135deg, #1a1a1a 0%, #242424 100%);
    --nav-bg: rgba(20, 20, 20, 0.92);
    --nav-text: rgba(200, 200, 200, 0.6);
    --nav-active: #f6e0b3;
    --search-bg: linear-gradient(145deg, rgba(42,42,42,0.9), rgba(36,36,36,0.5));
    --filter-bg: linear-gradient(145deg, rgba(42,42,42,0.8), rgba(36,36,36,0.4));
    --pricing-card-bg: linear-gradient(145deg, #2a2a2a, #1e1e1e);
    --pricing-card-border: rgba(255, 255, 255, 0.06);
    --pricing-feature-border: rgba(255,255,255,0.08);
    --pricing-feature-text: #c0c0c0;
    --stat-label: #a0a0a0;
    --genre-count: rgba(255,255,255,0.65);
    --hero-text: #ffffff;
    --hero-sub: rgba(246, 224, 179, 0.85);
    --toggle-icon: "☀️";
}

/* Theme toggle button */
.theme-toggle {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--glass); backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
}
.theme-toggle:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.theme-toggle::after { content: var(--toggle-icon); }

/* Smooth transition for theme change */
*, *::before, *::after {
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.3s ease;
}

/* Dark mode specific overrides */
[data-theme="dark"] .mgmt-avatar { background: #3a3a3a !important; border-color: #444 !important; }
[data-theme="dark"] .m-mini-card .m-avatar { background: #3a3a3a !important; border-color: #444 !important; }
[data-theme="dark"] #map { border-color: #333 !important; }
[data-theme="dark"] .info-card p,
[data-theme="dark"] .about-card p { color: var(--text-muted) !important; }
[data-theme="dark"] .pricing-features li { color: var(--pricing-feature-text) !important; border-color: var(--pricing-feature-border) !important; }
[data-theme="dark"] .search-box::placeholder { color: var(--text-muted) !important; }
[data-theme="dark"] .stat-card label { color: var(--stat-label); }
[data-theme="dark"] .genre-slide-item .g-count { color: var(--genre-count); }
[data-theme="dark"] .member-stat label { color: var(--stat-label) !important; }
[data-theme="dark"] .member-cell .name { color: #f0f0f0 !important; }
[data-theme="dark"] .rank-table td { border-bottom-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .filter-btn { color: var(--green-dark) !important; }
[data-theme="dark"] .search-box { color: var(--text-main) !important; }
[data-theme="dark"] .vm-card p { color: var(--text-muted) !important; }
[data-theme="dark"] .service-item p { color: var(--text-muted) !important; }
[data-theme="dark"] .tut-steps li { color: var(--text-main) !important; }
[data-theme="dark"] .benefit-card p { color: var(--text-muted) !important; }
[data-theme="dark"] .step-info p { color: var(--text-muted) !important; }
[data-theme="dark"] .contact-item p { color: var(--text-muted) !important; }
[data-theme="dark"] .m-score label { color: var(--stat-label) !important; }
[data-theme="dark"] .no-result { color: var(--text-muted) !important; }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea { color: var(--text-main) !important; background: var(--card-bg) !important; }
[data-theme="dark"] .form-group select option { background: #2a2a2a !important; color: #f0f0f0 !important; }

/* Mobile nav bar dark mode */
[data-theme="dark"] .nav-bar { background: var(--nav-bg) !important; }
[data-theme="dark"] .nav-bar a { color: var(--nav-text) !important; }
[data-theme="dark"] .nav-bar a.active { color: var(--nav-active) !important; }

/* Top header hover states */
.top-header:hover {
    box-shadow: 0 12px 36px rgba(31, 38, 135, 0.14);
}
[data-theme="dark"] .top-header:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .member-cell .name { color: #f0f0f0 !important; }
[data-theme="dark"] .rank-table td { border-bottom-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .filter-btn { color: #c0c0c0 !important; }
[data-theme="dark"] .search-box { color: #f0f0f0 !important; }