:root { 
            --bg-main: #ffffff;
            --bg-grid: #e5e7eb; 
            --accent: #0f172a; 
            --accent-text: #ffffff;
            --text-main: #1a1a1a; 
            --text-muted: #64748b;
            --card-bg: rgba(255, 255, 255, 0.9);
            --border-color: #e5e7eb;
            --input-bg: #ffffff;
        }
        .dark { 
            --bg-main: #171717;
            --bg-grid: #262626; 
            --accent: #facc15; 
            --accent-text: #171717;
            --text-main: #f5f5f5; 
            --text-muted: #a3a3a3;
            --card-bg: rgba(38, 38, 38, 0.9);
            --border-color: #404040;
            --input-bg: #262626;
        }
        
        body { 
            background-color: var(--bg-main); 
            background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
            background-size: 30px 30px;
            color: var(--text-main); 
            font-family: 'Inter', sans-serif;
            transition: all 0.3s ease;
        }
        
        .list-item { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-main); }
        .list-item.playing { border-color: var(--accent); box-shadow: 0 0 15px rgba(250, 204, 21, 0.1); }
        
        .platform-btn { color: var(--text-muted); font-weight: 600; transition: all 0.2s; position: relative; }
        .platform-btn.active { color: var(--accent); font-weight: 800; }
        .platform-btn.active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 3px; background: var(--accent); }
        
        .btn-accent { background: var(--accent); color: var(--accent-text); }
        #side-menu { background: var(--bg-main); color: var(--text-main); transition: transform 0.4s ease; transform: translateX(-100%); }
        #side-menu.active { transform: translateX(0); }
        .social-card { background: var(--card-bg); border: 1px solid var(--border-color); }
        
        input#search-input { background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main); }
        #full-player { transform: translateY(100%); transition: transform 0.4s ease; background: var(--bg-main); }
        #full-player.active { transform: translateY(0); }