:root {
    --bg-main: #0a0a0a;
    --bg-sidebar: #000000;
    --bg-card: #181818;
    --accent: #ffcc00;
    --text-main: #ffffff;
    --text-dim: #b3b3b3;
    --red: #ff4b4b;
    --player-height: 120px;
}

* { 
    box-sizing: border-box; 
    outline: none; 
}

body { 
    background: var(--bg-main); 
    color: var(--text-main); 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    margin: 0; 
    display: flex; 
    height: 100vh; 
    overflow: hidden; 
}


body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, var(--accent-transparent, transparent), transparent);
    z-index: -1;
    transition: background 1s ease;
    opacity: 0.3;
}