:root{--bg-darkest: #060a12;--bg-main: #0a0f1d;--bg-card: #0f172a;--bg-card-hover: #1e293b;--bg-elevated: #162032;--bg-glass: rgba(15, 23, 42, .75);--bg-glass-card: rgba(30, 41, 59, .45);--grey-900: #0f172a;--grey-800: #1e293b;--grey-700: #334155;--grey-600: #475569;--grey-500: #64748b;--grey-400: #94a3b8;--grey-300: #cbd5e1;--grey-200: #e2e8f0;--grey-100: #f8fafc;--navy-glow: rgba(56, 189, 248, .15);--navy-glow-strong: rgba(56, 189, 248, .35);--accent-cyan: #38bdf8;--accent-ice: #00f2fe;--accent-blue: #60a5fa;--accent-gradient: linear-gradient(135deg, #00f2fe 0%, #38bdf8 50%, #60a5fa 100%);--navy-gradient: linear-gradient(180deg, #0f172a 0%, #0a0f1d 100%);--hero-gradient: linear-gradient(135deg, #1b2a4a 0%, #0f172a 60%, #060a12 100%);--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--sidebar-width: 250px;--player-height: 90px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-darkest);color:var(--grey-200);overflow:hidden;height:100vh;width:100vw;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0f172a99}::-webkit-scrollbar-thumb{background:var(--grey-700);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--grey-500)}.app-container{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:1fr var(--player-height);grid-template-areas:"sidebar main" "player player";height:100vh;width:100vw;background-color:var(--bg-darkest)}.app-container.no-sidebar{grid-template-columns:1fr;grid-template-areas:"main" "player"}.app-container.sidebar-minimized{grid-template-columns:80px 1fr}.glass-panel{background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.07)}.glass-card{background:var(--bg-glass-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);transition:all .25s cubic-bezier(.4,0,.2,1)}.glass-card:hover{background:#1e293bbf;border-color:#38bdf84d;transform:translateY(-4px);box-shadow:0 10px 25px -5px #00000080,0 0 20px var(--navy-glow)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em}.btn-primary{background:var(--accent-gradient);color:#060a12;font-weight:700;border:none;padding:.65rem 1.4rem;border-radius:50px;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-heading);font-size:.95rem;transition:all .2s ease;box-shadow:0 4px 15px #38bdf84d}.btn-primary:hover{transform:scale(1.04);box-shadow:0 6px 20px #38bdf880;filter:brightness(1.1)}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:#33415599;color:var(--grey-200);font-weight:600;border:1px solid var(--grey-600);padding:.6rem 1.2rem;border-radius:50px;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-heading);transition:all .2s ease}.btn-secondary:hover{background:var(--grey-700);border-color:var(--grey-400);color:#fff}.btn-icon{background:transparent;border:none;color:var(--grey-400);padding:.5rem;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.btn-icon:hover{color:var(--accent-cyan);background:#38bdf81a}@keyframes pulseGlow{0%,to{box-shadow:0 0 15px #38bdf833}50%{box-shadow:0 0 30px #38bdf880}}@keyframes eqBar{0%,to{height:4px}50%{height:18px}}.equalizer-bar{width:3px;background:var(--accent-cyan);border-radius:2px;animation:eqBar .8s ease-in-out infinite alternate}.equalizer-bar:nth-child(2){animation-delay:.2s}.equalizer-bar:nth-child(3){animation-delay:.4s}.equalizer-bar:nth-child(4){animation-delay:.1s}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--grey-700);height:4px;border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent-cyan);cursor:pointer;transition:transform .15s ease;box-shadow:0 0 8px var(--accent-cyan)}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.3)}@media (max-width: 1024px){.app-container{grid-template-columns:1fr;grid-template-rows:1fr var(--player-height) 60px;grid-template-areas:"main" "player" "mobile-nav"}.sidebar-container{display:none}}.mobile-only-flex,.desktop-only-flex{display:flex!important}@media (min-width: 1025px){.mobile-only-flex{display:none!important}}@media (max-width: 1024px){.desktop-only-flex{display:none!important}}