:root {
            --accent: #ef4444;
            --bg: #050505;
            --bg-panel: #0f1118;
            --text: #f5f5f5;
            --muted: #9aa3b1;
            --border: rgba(255,255,255,0.08);
            --panel-overlay: rgba(255,255,255,0.03);
            --theme-button-bg: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
            font-family: 'Outfit', sans-serif;
        }
        :root[data-theme='light'] {
            --accent: #2563eb;
            --bg: #f8fafc;
            --bg-panel: rgba(255,255,255,0.96);
            --text: #0f172a;
            --muted: #64748b;
            --border: rgba(15,23,42,0.08);
            --panel-overlay: rgba(15,23,42,0.04);
            --theme-button-bg: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(255,255,255,0.08));
        }
        :root[data-theme='neon'] {
            --accent: #f472b6;
            --bg: #09070d;
            --bg-panel: rgba(15,12,22,0.95);
            --text: #f8fafc;
            --muted: #c4b5fd;
            --border: rgba(248,113,113,0.2);
            --panel-overlay: rgba(244,114,182,0.08);
            --theme-button-bg: linear-gradient(135deg, rgba(244,114,182,0.3), rgba(255,255,255,0.08));
        }
        :root[data-theme='nebula'] {
            --accent: #9d4edd;
            --bg: #08020f;
            --bg-panel: rgba(12,3,22,0.94);
            --text: #eef2ff;
            --muted: #c7d2fe;
            --border: rgba(157,78,221,0.18);
            --panel-overlay: rgba(157,78,221,0.08);
            --theme-button-bg: linear-gradient(135deg, rgba(157,78,221,0.32), rgba(255,255,255,0.08));
        }
        :root[data-theme='solar'] {
            --accent: #ffb703;
            --bg: #120700;
            --bg-panel: rgba(31,12,1,0.95);
            --text: #fff7d6;
            --muted: #f7d68a;
            --border: rgba(255,183,3,0.24);
            --panel-overlay: rgba(255,183,3,0.08);
            --theme-button-bg: linear-gradient(135deg, rgba(255,183,3,0.28), rgba(255,255,255,0.08));
        }
        :root[data-theme='aurora'] {
            --accent: #38bdf8;
            --bg: #050f12;
            --bg-panel: rgba(7,16,20,0.96);
            --text: #e0f2fe;
            --muted: #94a3b8;
            --border: rgba(56,189,248,0.2);
            --panel-overlay: rgba(56,189,248,0.08);
            --theme-button-bg: linear-gradient(135deg, rgba(56,189,248,0.3), rgba(255,255,255,0.08));
        }
        :root[data-theme='quantum'] {
            --accent: #7c3aed;
            --bg: #06030d;
            --bg-panel: rgba(12,6,22,0.94);
            --text: #f3e8ff;
            --muted: #c4b5fd;
            --border: rgba(124,58,237,0.2);
            --panel-overlay: rgba(124,58,237,0.08);
            --theme-button-bg: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(255,255,255,0.08));
        }
        :root[data-theme='vapor'] {
            --accent: #f472b6;
            --bg: #12081a;
            --bg-panel: rgba(18,8,26,0.96);
            --text: #f8f5ff;
            --muted: #d8b4fe;
            --border: rgba(244,114,182,0.2);
            --panel-overlay: rgba(244,114,182,0.08);
            --theme-button-bg: linear-gradient(135deg, rgba(244,114,182,0.3), rgba(255,255,255,0.08));
        }
        :root[data-theme='prism'] {
            --accent: #22d3ee;
            --bg: #09101b;
            --bg-panel: rgba(10,16,27,0.95);
            --text: #e0f7ff;
            --muted: #99f6e4;
            --border: rgba(34,211,238,0.2);
            --panel-overlay: rgba(34,211,238,0.08);
            --theme-button-bg: linear-gradient(135deg, rgba(34,211,238,0.28), rgba(255,255,255,0.08));
        }
        :root[data-theme='chrome'] {
            --accent: #38bdf8;
            --bg: #061021;
            --bg-panel: rgba(8,16,32,0.95);
            --text: #e2f0ff;
            --muted: #94a3b8;
            --border: rgba(56,189,248,0.18);
            --panel-overlay: rgba(56,189,248,0.06);
            --theme-button-bg: linear-gradient(135deg, rgba(56,189,248,0.24), rgba(255,255,255,0.08));
        }
        * { box-sizing: border-box; }
        html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
        body { font-family: 'Outfit', sans-serif; }
        a { color: inherit; text-decoration: none; }
        button { font: inherit; }
        .page-shell { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; min-height: 100vh; }
        .sidebar { background: var(--bg-panel); border-right: 1px solid var(--border); padding: 32px; display: flex; flex-direction: column; gap: 32px; }
        .sidebar h1 { font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; font-size: 2.3rem; margin: 0; }
        .sidebar p { margin: 0; color: var(--muted); }
        .nav-link { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel-overlay); color: var(--text); transition: transform .2s, border-color .2s, background .2s; }
        .nav-link:hover { transform: translateY(-1px); border-color: var(--accent); background: rgba(239,68,68,0.12); }
        .nav-link span { font-weight: 700; }
        .sidebar .section-title { letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-size: 0.75rem; margin-bottom: 12px; }
        .metric-card { background: var(--panel-overlay); border: 1px solid var(--border); border-radius: 24px; padding: 20px; display: grid; gap: 10px; }
        .metric-card strong { display: block; font-size: 2rem; line-height: 1; color: var(--accent); }
        .metric-card span { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; }
        .main { background: linear-gradient(180deg, rgba(7,8,13,1) 0%, var(--bg) 40%, var(--bg) 100%); padding: 32px; overflow-y: auto; }
        .hero { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
        .hero-panel { border: 1px solid var(--border); background: var(--bg-panel); border-radius: 28px; padding: 26px; position: relative; overflow: hidden; }
        .hero-panel::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at top right, rgba(239,68,68,0.14), transparent 35%); pointer-events:none; }
        .hero-panel > * { position: relative; }
        .hero-panel h2 { margin: 0 0 12px; font-family: 'Playfair Display', serif; font-size: clamp(2.75rem, 3.5vw, 4.5rem); line-height: 0.9; }
        .hero-panel p { margin: 0; color: var(--muted); max-width: 650px; }
        .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
        .section-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
        .section-tab-button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-overlay); color: var(--text); cursor: pointer; transition: transform .2s, background .2s, border-color .2s; }
        .section-tab-button:hover { transform: translateY(-1px); background: rgba(255,255,255,0.1); }
        .section-tab-button.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
        .theme-switcher { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 80; }
        .theme-button { width: 68px; height: 68px; border-radius: 999px; border: 1px solid var(--border); background: var(--theme-button-bg); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 18px 40px rgba(0,0,0,0.25); transition: transform .2s, background .2s, border-color .2s, color .2s; font-size: 1.35rem;
            backdrop-filter: blur(12px);
        }
        .theme-button:hover { transform: translateY(-2px); }
        .theme-menu { display: none; position: fixed; right: 24px; bottom: 102px; min-width: 180px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 24px 68px rgba(0,0,0,0.35); padding: 10px; z-index: 85; }
        .theme-menu.active { display: block; }
        .theme-option { width: 100%; text-align: left; padding: 12px 14px; border: none; background: transparent; color: var(--text); border-radius: 16px; cursor: pointer; transition: background .2s, transform .2s; font-weight: 700; }
        .theme-option:hover { background: rgba(255,255,255,0.08); transform: translateX(4px); }
        .section { margin-bottom: 42px; }
        .section.hidden { display: none; }
        .section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
        .section-header h3 { margin:0; font-size:1.2rem; letter-spacing:0.06em; text-transform: uppercase; }
        .section-header .action-btn { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); background: var(--panel-overlay); cursor: pointer; transition: transform .2s, background .2s; }
        .section-header .action-btn:hover { transform: translateY(-1px); background: rgba(239,68,68,0.14); }
        .card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
        .country-card, .artist-card, .track-card { border: 1px solid var(--border); background: var(--panel-overlay); border-radius: 24px; overflow: hidden; cursor: pointer; transition: transform .2s, border-color .2s; }
        .country-card:hover, .artist-card:hover, .track-card:hover { transform: translateY(-3px); border-color: rgba(239,68,68,0.3); }
        .country-card .cover, .track-card .cover { position: relative; min-height: 130px; background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(17,24,39,0.9)); display: flex; align-items: flex-end; padding: 18px; }
        .country-card .cover img, .track-card .cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity:0.85; }
        .country-card .cover .info, .track-card .cover .info { position: relative; z-index: 1; color: white; }
        .country-card .info, .artist-card .info, .track-card .info { padding: 18px; display: grid; gap: 10px; }
        .country-card .info .label, .artist-card .info .label, .track-card .info .label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
        .country-card .info .title, .artist-card .info .title, .track-card .info .title { font-size: 1rem; font-weight: 800; margin: 0; }
        .country-card .info .value, .artist-card .info .value, .track-card .info .value { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.95rem; }
        .artist-card .avatar { width: 56px; height: 56px; border-radius: 18px; overflow: hidden; background: #111; border: 1px solid rgba(255,255,255,0.12); }
        .artist-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
        .artist-card .artist-top { display: flex; align-items: center; gap: 14px; }
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.82); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 50; }
        .modal-overlay.active { display: flex; }
        .modal-panel { width: min(960px,100%); max-height: min(90vh, 820px); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; }
        .back-button {
            position: fixed;
            top: 24px;
            left: 24px;
            z-index: 80;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(15,16,24,0.9);
            color: white;
            box-shadow: 0 18px 40px rgba(0,0,0,0.35);
            cursor: pointer;
            transition: transform .2s, background .2s, border-color .2s;
        }
        .back-button:hover {
            transform: translateY(-2px);
            border-color: rgba(239,68,68,0.35);
            background: rgba(239,68,68,0.16);
        }
        .back-button svg { width: 18px; height: 18px; }
        @media (max-width: 1100px) {
            .page-shell { grid-template-columns: 1fr; }
            .sidebar { position: static; width: 100%; max-width: none; transform: none; box-shadow: none; }
            .main { order: 1; padding: 24px 24px 32px; }
        }
        .modal-header { padding: 24px 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .modal-header h3 { margin: 0; font-size: 1.4rem; }
        .modal-body { padding: 24px; overflow-y: auto; display: grid; gap: 20px; }
        .modal-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
        .modal-close { border: none; background: rgba(255,255,255,0.05); color: var(--text); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; }
        .loader { height: 4px; width: 100%; background: rgba(255,255,255,0.08); overflow: hidden; border-radius: 999px; margin-bottom: 22px; }
        .loader::before { content: ''; position: absolute; height: 100%; width: 40%; background: linear-gradient(90deg, rgba(239,68,68,0.9), rgba(239,68,68,0.2)); animation: loading 1.5s infinite; }
        @keyframes loading { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
        @media (max-width: 1100px) { .page-shell { grid-template-columns: 1fr; } .sidebar { width: 100%; order: 2; } .main { order: 1; } }
        @media (max-width: 720px) { .sidebar { padding: 24px; } .main { padding: 24px; } }