:root {
    /* Color Palette */
    --bg-base: #07030A;
    --bg-panel: #12081C;
    --bg-elevated: #1E0F2E;
    --bg-hover: #24123A;
    
    /* Strictly Purple Accents */
    --accent-main: #B026FF;
    --accent-glow: #D073FF;
    --neon-purple: #B026FF;
    --neon-glow: 0 0 20px rgba(176, 38, 255, 0.6);
    
    /* ... rest of your variables remain the same ... */
    
    /* Typography Colors */
    --text-base: #FFFFFF;
    --text-subdued: #a7a7a7;
    --text-bright: #ffffff;
    
    /* Layout Metrics */
    --sidebar-width: 280px;
    --right-panel-width: 320px;
    --player-height: 90px;
    --topbar-height: 64px;
    
    /* Borders & Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--bg-base);
    color: var(--text-base);
    overflow: hidden; /* App-like feel, no whole-page bouncing */
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar Styling for webkits */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}