@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Lexend:wght@300;400;600;800&display=swap";
:root{--accent:#8b5cf6;--accent-light:#a78bfa;--accent-gradient:linear-gradient(135deg,#8b5cf6 0%,#d946ef 100%);--bg:#030303;--p-bg:#0a0a0c;--panel:#141419b3;--text:#fff;--text-dim:#94a3b8;--border:#ffffff14;--hover:#ffffff0d;--shadow:0 10px 30px -10px #00000080;--glow:0 0 20px #8b5cf64d;--glass:#ffffff08}.light-theme{--bg:#f8fafc;--p-bg:#fff;--panel:#fffc;--text:#0f172a;--text-dim:#64748b;--border:#0000000d;--hover:#00000005;--shadow:0 4px 20px -5px #0000001a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;height:100vh;font-family:Inter,-apple-system,sans-serif;overflow:hidden}h1,h2,h3{font-family:Lexend,sans-serif}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.main-layout{background:radial-gradient(circle at 50% -20%,#1e1b4b 0%,var(--bg)70%);flex-direction:column;height:100vh;display:flex}.main-layout.light-theme{background:radial-gradient(circle at 50% -20%,#eef2ff 0%,var(--bg)70%)}header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex}.logo{background:var(--accent-gradient);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:800}.content-grid{background:var(--border);flex:1;grid-template-columns:320px 1fr 340px;gap:1px;display:grid;overflow:hidden}.sidebar-library,.center-panel,.sidebar-matching{background:var(--p-bg);flex-direction:column;display:flex;overflow:hidden}.pc-only{display:flex!important}.mobile-only{display:none!important}.panel-head{justify-content:space-between;align-items:center;padding:24px;display:flex}.section-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;font-size:.85rem;font-weight:600}.glass-card{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:16px;margin:12px;padding:16px}.player-bar{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);z-index:1000;cursor:pointer;background:#0f0f14d9;border:1px solid #ffffff1f;border-radius:28px;align-items:center;gap:24px;width:calc(100% - 48px);max-width:1000px;height:96px;padding:0 28px;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 20px 50px #000000b3}.player-bar:hover{background:#141419e6;border-color:#fff3}.control-icon{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.2rem;transition:all .2s;display:flex}.control-icon:hover{color:var(--text);background:var(--hover)}.control-icon.active{color:var(--accent);text-shadow:var(--glow)}.play-btn{background:var(--accent-gradient);color:#fff;cursor:pointer;width:52px;height:52px;box-shadow:var(--glow);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s,box-shadow .2s;display:flex}.play-btn:hover{transform:scale(1.05);box-shadow:0 0 30px #8b5cf680}.play-btn:active{transform:scale(.95)}.eq-container{flex-direction:column;flex:1;padding:0 24px 180px;display:flex;overflow-y:auto}.eq-strips{-webkit-overflow-scrolling:touch;justify-content:center;align-items:flex-end;gap:8px;height:320px;padding:40px 0;display:flex;overflow-x:auto}.eq-strip{flex-direction:column;flex:1;align-items:center;gap:12px;max-width:32px;height:100%;display:flex}.slider-vertical{appearance:none;background:0 0;align-items:center;width:100%;height:240px;display:flex;position:relative}.slider-vertical input{appearance:none;background:var(--border);cursor:pointer;border-radius:2px;width:240px;height:4px;position:absolute;top:118px;transform:rotate(-90deg)}.slider-vertical input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;box-shadow:0 0 10px var(--accent);background:#fff;border-radius:50%;transition:all .2s}.slider-vertical input:hover::-webkit-slider-thumb{background:var(--accent-light);transform:scale(1.2)}.freq-label{color:var(--text-dim);margin-top:5px;font-size:.65rem;font-weight:500;transform:rotate(-45deg)}.track-item{cursor:pointer;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:4px;padding:12px 16px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.track-item:hover{background:var(--hover);transform:translate(4px)}.track-item.active{border-left:3px solid var(--accent);background:#8b5cf61a}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade{animation:.4s forwards fadeIn}@media (max-width:768px){.pc-only{display:none!important}.mobile-only{display:flex!important}.content-grid{flex:1;grid-template-columns:1fr;overflow:hidden}.sidebar-library,.center-panel,.sidebar-matching{-webkit-overflow-scrolling:touch;height:100%;overflow-y:auto;display:none!important}main[data-active-tab=library] .sidebar-library,main[data-active-tab=eq] .center-panel,main[data-active-tab=matching] .sidebar-matching{display:flex!important}.eq-container{padding-bottom:200px!important}.player-bar{border-radius:24px 24px 0 0;flex-direction:column;gap:12px;width:100%;height:auto;padding:12px 20px 24px;bottom:64px;left:0;transform:none;box-shadow:0 -10px 40px #00000080}}.expanded-player{background:var(--bg);z-index:3000;flex-direction:column;padding:40px 24px;animation:.5s cubic-bezier(.16,1,.3,1) slideUp;display:flex;position:fixed;inset:0;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.expanded-header{justify-content:space-between;align-items:center;margin-bottom:40px;display:flex}.close-btn{background:var(--glass);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.5rem;display:flex}.expanded-art{aspect-ratio:1;background:var(--accent-gradient);width:100%;max-width:400px;box-shadow:0 30px 60px #00000080,var(--glow);border-radius:32px;justify-content:center;align-items:center;margin:0 auto 40px;display:flex;position:relative;overflow:hidden}.expanded-art:after{content:"";background:linear-gradient(#0000,#0006);position:absolute;inset:0}.expanded-info{text-align:center;margin-bottom:40px}.expanded-title{margin-bottom:8px;font-family:Lexend,sans-serif;font-size:1.75rem;font-weight:800}.expanded-subtitle{color:var(--accent);letter-spacing:1px;font-size:.9rem;font-weight:600}.expanded-controls{width:100%;max-width:600px;margin-top:auto;margin-left:auto;margin-right:auto;padding-bottom:40px}.expanded-main-controls{justify-content:center;align-items:center;gap:32px;margin-bottom:40px;display:flex}.expanded-play-btn{color:#000;cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:84px;height:84px;padding-left:6px;font-size:2rem;display:flex;box-shadow:0 10px 30px #fff3}.expanded-prev-next{color:var(--text);cursor:pointer;opacity:.8;background:0 0;border:none;font-size:2.5rem;transition:all .2s}.expanded-prev-next:hover{opacity:1;transform:scale(1.1)}.playlist-drawer{background:var(--p-bg);border-top:1px solid var(--border);border-radius:32px 32px 0 0;max-height:60vh;padding:24px;overflow-y:auto}.playlist-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.fx-grid-premium{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:24px 0;display:grid}.fx-section{background:var(--panel);border:1px solid var(--border);border-radius:20px;flex-direction:column;gap:16px;padding:20px;display:flex}.section-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.section-header span{color:var(--accent);text-transform:uppercase;letter-spacing:1px;font-size:.8rem;font-weight:700}.fx-controls{flex-direction:column;gap:12px;display:flex}.fx-item{grid-template-columns:80px 1fr;align-items:center;gap:12px;display:grid}.fx-item label{color:var(--text-dim);text-transform:uppercase;font-size:.7rem;font-weight:600}.fx-item input[type=range]{-webkit-appearance:none;background:var(--border);border-radius:2px;outline:none;width:100%;height:4px}.fx-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:12px;height:12px;box-shadow:0 0 8px var(--accent);background:#fff;border-radius:50%}@media (max-width:768px){.eq-strips{gap:4px;height:240px;padding:20px 0}.eq-strip{max-width:20px}.slider-vertical{height:160px}.slider-vertical input{width:160px;top:78px}.fx-grid-premium{grid-template-columns:1fr}.fx-item{grid-template-columns:70px 1fr}}