@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap";:root{--primary:#6366f1;--primary-hover:#4f46e5;--bg-deep:#050505;--bg-dark:#0f172a;--glass-bg:#1e293bb3;--glass-border:#ffffff1a;--text-main:#f8fafc;--text-dim:#94a3b8;--accent:#10b981;--danger:#ef4444;--nav-height:70px;--player-height:100px;--sidebar-width:260px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background:var(--bg-deep);color:var(--text-main);background-image:radial-gradient(at 0 0,#100f15 0,#0000 50%),radial-gradient(at 50% 0,#2f3e6a4d 0,#0000 50%),radial-gradient(at 100% 0,#72274133 0,#0000 50%);min-height:100vh;font-family:Inter,sans-serif;display:flex;overflow:hidden}.visualizer-container{pointer-events:none;z-index:-1;opacity:.4;width:100%;height:100%;position:fixed;top:0;left:0}.sidebar{width:var(--sidebar-width);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);background:#0f172a80;flex-direction:column;flex-shrink:0;height:100vh;padding:24px;display:flex}.sidebar-logo{background:linear-gradient(90deg,#6366f1,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;align-items:center;gap:10px;margin-bottom:40px;font-size:1.25rem;font-weight:700;display:flex}.sidebar-nav{flex-direction:column;gap:8px;display:flex}.nav-item{color:var(--text-dim);cursor:pointer;border-radius:12px;align-items:center;gap:12px;padding:12px 16px;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{color:#fff;background:#ffffff0d}.nav-item.active{background:var(--primary);color:#fff}.sidebar-label{text-transform:uppercase;color:var(--text-dim);letter-spacing:1px;margin-top:30px;margin-bottom:15px;padding-left:16px;font-size:.75rem}.app-content{flex-direction:column;flex:1;height:100vh;display:flex;overflow-y:auto}header{height:var(--nav-height);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:50;background:#05050566;justify-content:flex-end;align-items:center;padding:0 40px;display:flex;position:sticky;top:0}.search-box{gap:10px;width:100%;max-width:600px;display:flex;position:relative}.search-box input{border:1px solid var(--glass-border);color:#fff;background:#ffffff0d;border-radius:12px;outline:none;flex:1;padding:12px 20px 12px 45px;transition:all .3s}.category-select{border:1px solid var(--glass-border);color:#fff;cursor:pointer;background:#ffffff0d;border-radius:12px;outline:none;padding:0 15px;font-family:inherit;font-size:.9rem;transition:all .3s}.category-select:focus{border-color:var(--primary);background:#ffffff1a}.category-select option{background:var(--bg-dark);color:#fff}.search-box input:focus{border-color:var(--primary);background:#ffffff1a}.search-icon{color:var(--text-dim);position:absolute;top:50%;left:15px;transform:translateY(-50%)}main{padding:20px 40px;padding-bottom:calc(var(--player-height) + 40px)}.track-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;display:grid}.track-card{cursor:pointer;border-radius:16px;padding:12px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.track-card:hover{background:#ffffff0d;transform:translateY(-8px)}.card-actions{opacity:0;gap:8px;transition:opacity .3s;display:flex;position:absolute;top:20px;right:20px}.track-card:hover .card-actions{opacity:1}.btn-icon{border:1px solid var(--glass-border);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172acc;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.btn-icon:hover{background:var(--primary);transform:scale(1.1)}.btn-icon.active{color:#fb7185}.track-art{aspect-ratio:1;object-fit:cover;border-radius:12px;width:100%;margin-bottom:12px}.track-info h3{white-space:nowrap;text-overflow:ellipsis;width:100%;margin-bottom:4px;font-size:1rem;overflow:hidden}.track-info p{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:.85rem;overflow:hidden}.player-bar{-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border-top:1px solid var(--glass-border);z-index:200;background:#0f172af2;flex-direction:column;display:flex;position:fixed;bottom:0;left:0;right:0}.progress-bar-top{cursor:pointer;z-index:210;background:#ffffff0d;width:100%;height:4px;transition:height .2s;position:relative}.progress-bar-top:hover{height:6px}.progress-bar-top .progress-fill{background:linear-gradient(to right, var(--primary), #a855f7);height:100%;position:relative}.progress-bar-top .progress-fill:after{content:"";width:12px;height:12px;box-shadow:0 0 15px var(--primary);opacity:0;background:#fff;border-radius:50%;transition:opacity .2s;position:absolute;top:50%;right:-6px;transform:translateY(-50%)}.progress-bar-top:hover .progress-fill:after{opacity:1}.player-content{justify-content:space-between;align-items:center;gap:20px;padding:12px 40px 24px;display:flex}.current-track{align-items:center;gap:16px;width:300px;min-width:0;display:flex}.current-track img{object-fit:cover;border:1px solid #ffffff1a;border-radius:12px;flex-shrink:0;width:64px;height:64px;box-shadow:0 8px 16px #0006}.current-track-info{flex-direction:column;min-width:0;display:flex}#player-title{white-space:nowrap;text-overflow:ellipsis;color:#fff;letter-spacing:-.01em;margin-bottom:4px;font-size:1.05rem;font-weight:700;overflow:hidden}#player-artist{white-space:nowrap;text-overflow:ellipsis;color:var(--text-dim);font-size:.85rem;font-weight:500;overflow:hidden}.player-controls{flex-direction:column;flex:1;align-items:center;gap:8px;display:flex}.control-btns{align-items:center;gap:28px;display:flex}.time-info{color:var(--text-dim);letter-spacing:.05em;font-family:Montserrat,sans-serif;font-size:.75rem;font-weight:600}.btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.btn:hover{color:#fff;transform:scale(1.15)}.btn.active{color:var(--primary);filter:drop-shadow(0 0 8px var(--primary))}.btn-play{color:#000;background:#fff;border-radius:50%;width:56px;height:56px;box-shadow:0 4px 20px #ffffff40}.btn-play:hover{transform:scale(1.08);box-shadow:0 6px 25px #ffffff59}.player-extra{justify-content:flex-end;align-items:center;gap:20px;width:300px;display:flex}.volume-control-wrapper{background:#ffffff0d;border:1px solid #ffffff0d;border-radius:20px;align-items:center;gap:8px;min-width:180px;padding:6px 12px;display:flex;width:auto!important}.btn-vol{opacity:.6;transition:all .2s;color:#fff!important;background:0 0!important;border:none!important;justify-content:center!important;align-items:center!important;width:32px!important;height:32px!important;padding:0!important;display:flex!important}.btn-vol:hover{opacity:1;border-radius:50%;background:#ffffff1a!important}input[type=range].volume-slider{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;width:100%;height:4px}input[type=range].volume-slider::-webkit-slider-runnable-track{cursor:pointer;background:0 0;width:100%;height:4px}input[type=range].volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px;margin-top:-4px;box-shadow:0 0 10px #00000080}.timer-pill{color:var(--primary);background:#6366f126;border:1px solid #6366f133;border-radius:20px;padding:6px 14px;font-family:Montserrat,sans-serif;font-size:.75rem;font-weight:700}.modal-overlay{z-index:1000;visibility:hidden;opacity:0;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;transition:all .3s;display:flex;position:fixed;top:0;left:0}.modal-overlay.active{visibility:visible;opacity:1}.modal{background:var(--bg-dark);border:1px solid var(--glass-border);border-radius:24px;width:400px;padding:30px}.modal h2{margin-bottom:20px}.modal input{border:1px solid var(--glass-border);color:#fff;background:#ffffff0d;border-radius:8px;width:100%;margin-bottom:20px;padding:12px}.modal-btns{justify-content:flex-end;gap:12px;display:flex}.btn-primary{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:10px 24px}.btn-ghost{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:10px 24px}@media (width<=1024px){.sidebar{z-index:300;position:fixed;left:-100%}.player-content{padding:12px 20px 24px}.current-track,.player-extra{width:auto}}@media (width<=768px){.current-track-info{display:none}.volume-control-wrapper{background:0 0;border:none;width:auto;padding:0}.volume-slider{display:none}.player-extra{gap:12px}.control-btns{gap:20px}}@media (width<=500px){.player-content{flex-direction:column!important;gap:15px!important;padding:12px 10px 18px!important}.current-track{display:none!important}.player-controls{width:100%!important}.control-btns{justify-content:center!important;gap:20px!important;width:100%!important}.player-extra{background:#ffffff08;border-radius:12px;margin-top:5px;padding:8px 0;justify-content:center!important;gap:30px!important;width:100%!important}.volume-control-wrapper{background:0 0!important;border:none!important;width:auto!important;padding:0!important}#sleep-timer-display{font-size:.8rem;display:inline-block!important}.btn-play{width:56px!important;height:56px!important}.btn{z-index:2;justify-content:center;align-items:center;min-width:44px;min-height:44px;display:flex;position:relative}.player-bar{padding-bottom:env(safe-area-inset-bottom,10px);z-index:999!important}}@media (width<=380px){.control-btns{gap:12px!important}.player-extra{gap:15px!important}}.loader{border:5px solid #fff;border-bottom-color:var(--primary);border-radius:50%;width:48px;height:48px;margin:40px auto;animation:1s linear infinite rotation;display:block}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-overlay{background:var(--bg-deep);z-index:2000;visibility:hidden;opacity:0;background-image:radial-gradient(at 0 0,#100f15 0,#0000 50%),radial-gradient(at 50% 0,#2f3e6a4d 0,#0000 50%);justify-content:center;align-items:center;width:100%;height:100%;transition:all .5s;display:flex;position:fixed;top:0;left:0}.login-overlay.active{visibility:visible;opacity:1}.login-card{text-align:center;border-radius:24px;width:100%;max-width:400px;padding:40px}.login-card h2{background:linear-gradient(90deg,#6366f1,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:2rem}.login-card p{color:var(--text-dim);margin-bottom:30px}.login-form{flex-direction:column;gap:15px;display:flex}.login-form input{border:1px solid var(--glass-border);color:#fff;background:#ffffff0d;border-radius:12px;outline:none;padding:14px;transition:all .3s}.login-form input:focus{border-color:var(--primary);background:#ffffff1a}.error-msg{margin-top:10px;font-size:.85rem;color:var(--danger)!important}