@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";:root,[data-theme=light]{--bg-primary: #f6f8fc;--bg-surface: #ffffff;--bg-card: rgba(255, 255, 255, .88);--bg-card-hover: #ffffff;--bg-input: #ffffff;--bg-overlay: rgba(255, 255, 255, .96);--glass-border: rgba(0, 0, 0, .08);--glass-border-light: rgba(0, 0, 0, .12);--glass-shadow: 0 4px 20px rgba(0, 0, 0, .04);--glass-shadow-hover: 0 12px 32px rgba(124, 58, 237, .12);--accent-purple: #7c3aed;--accent-purple-glow: rgba(124, 58, 237, .25);--accent-pink: #ec4899;--accent-pink-glow: rgba(236, 72, 153, .25);--accent-indigo: #4f46e5;--accent-cyan: #0284c7;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--header-bg: rgba(255, 255, 255, .88);--sidebar-bg: rgba(255, 255, 255, .92);--player-bg: rgba(255, 255, 255, .94);--mesh-opacity: .12;--table-hover: rgba(124, 58, 237, .05)}[data-theme=dark]{--bg-primary: #07050e;--bg-surface: #0f0c1b;--bg-card: rgba(20, 16, 36, .72);--bg-card-hover: rgba(32, 26, 56, .9);--bg-input: rgba(255, 255, 255, .06);--bg-overlay: rgba(15, 12, 27, .96);--glass-border: rgba(255, 255, 255, .08);--glass-border-light: rgba(255, 255, 255, .16);--glass-shadow: 0 10px 30px rgba(0, 0, 0, .5);--glass-shadow-hover: 0 16px 36px rgba(139, 92, 246, .35);--accent-purple: #8b5cf6;--accent-purple-glow: rgba(139, 92, 246, .4);--accent-pink: #ec4899;--accent-pink-glow: rgba(236, 72, 153, .4);--accent-indigo: #6366f1;--accent-cyan: #06b6d4;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--header-bg: rgba(9, 7, 18, .82);--sidebar-bg: rgba(9, 7, 18, .96);--player-bg: rgba(11, 9, 22, .94);--mesh-opacity: .18;--table-hover: rgba(255, 255, 255, .05)}:root{--font-family: "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--radius-xs: 8px;--radius-sm: 12px;--radius-md: 20px;--radius-lg: 28px;--radius-full: 9999px;--header-height: 74px;--sidebar-width: 270px;--player-height: 90px;--mobile-nav-height: 66px;--transition-fast: .18s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-spring: .4s cubic-bezier(.175, .885, .32, 1.275)}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family);-webkit-font-smoothing:antialiased}body{background-color:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;-webkit-user-select:none;user-select:none;min-height:100vh;transition:background-color var(--transition-normal),color var(--transition-normal)}.bg-mesh{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;background:radial-gradient(circle at 10% 15%,rgba(124,58,237,var(--mesh-opacity)) 0%,transparent 45%),radial-gradient(circle at 88% 55%,rgba(236,72,153,var(--mesh-opacity)) 0%,transparent 45%),radial-gradient(circle at 50% 90%,rgba(79,70,229,var(--mesh-opacity)) 0%,transparent 50%),radial-gradient(circle at 80% 12%,rgba(2,132,199,var(--mesh-opacity)) 0%,transparent 40%);filter:blur(60px)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#7c3aed33;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--accent-purple)}.app-container{display:flex;height:100vh;width:100vw;overflow:hidden}.main-content-area{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;position:relative}.page-scroll-view{flex:1;overflow-y:auto;padding:1.75rem 2.25rem calc(var(--player-height) + 2.5rem) 2.25rem}.glass-panel{background:var(--bg-card);backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--glass-shadow);transition:all var(--transition-normal)}.glass-panel:hover{border-color:#7c3aed40;background:var(--bg-card-hover);box-shadow:var(--glass-shadow-hover)}.glass-button{background:var(--bg-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:var(--radius-full);color:var(--text-primary);padding:.6rem 1.25rem;font-size:.88rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;box-shadow:var(--glass-shadow);transition:all var(--transition-fast)}.glass-button:hover{background:var(--bg-card-hover);border-color:#7c3aed4d;transform:translateY(-1px);box-shadow:var(--glass-shadow-hover)}.glass-button:active{transform:translateY(1px)}.glass-button-primary{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;box-shadow:0 6px 20px var(--accent-purple-glow);color:#fff!important}.glass-button.glass-button-primary:hover,.glass-button-primary:hover{background:linear-gradient(135deg,#8b5cf6,#ec4899)!important;color:#fff!important;box-shadow:0 8px 25px var(--accent-purple-glow),0 0 15px #ec48994d!important;transform:translateY(-2px)}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:1.4rem}.song-card{background:var(--bg-card);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:1rem;cursor:pointer;position:relative;overflow:hidden;box-shadow:var(--glass-shadow);transition:all var(--transition-normal);display:flex;flex-direction:column}.song-card:hover{background:var(--bg-card-hover);border-color:#7c3aed4d;transform:translateY(-5px);box-shadow:var(--glass-shadow-hover)}.song-card-cover-wrapper{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:.85rem;background:#7c3aed0f;box-shadow:0 4px 12px #0000000f}.song-card-cover{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.song-card:hover .song-card-cover{transform:scale(1.05)}.song-card-play-btn{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #7c3aed59;opacity:0;transform:translateY(10px);transition:all var(--transition-spring);cursor:pointer}.song-card:hover .song-card-play-btn{opacity:1;transform:translateY(0)}.song-card-play-btn:hover{transform:scale(1.12)}.song-card-title{font-weight:700;font-size:.95rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.25rem}.song-card-subtitle{font-size:.82rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.75rem}.track-list-container{display:flex;flex-direction:column;gap:.5rem;width:100%}.track-item-row{display:flex;align-items:center;justify-content:space-between;gap:.85rem;padding:.65rem .95rem;background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);position:relative;-webkit-user-select:none;user-select:none}.track-item-row:hover{background:var(--table-hover);border-color:#7c3aed4d;transform:translateY(-1px);box-shadow:0 4px 15px #0000000a}.track-item-row.active-track{background:#7c3aed17!important;border-color:var(--accent-purple)!important;box-shadow:0 4px 16px var(--accent-purple-glow)}.track-item-left{display:flex;align-items:center;gap:.85rem;min-width:0;flex:1 1 0%}.track-item-index{width:24px;font-size:.82rem;font-weight:700;color:var(--text-muted);text-align:center;flex-shrink:0}.track-item-row.active-track .track-item-index{color:var(--accent-purple)}.track-item-cover-wrapper{position:relative;width:44px;height:44px;border-radius:var(--radius-xs);overflow:hidden;flex-shrink:0;background:#7c3aed14;box-shadow:0 2px 8px #00000014}.track-item-cover{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-fast)}.track-item-play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-fast)}.track-item-row:hover .track-item-play-overlay,.track-item-row.active-track .track-item-play-overlay{opacity:1}.track-item-info{min-width:0;flex:1 1 0%;display:flex;flex-direction:column;gap:2px}.track-item-title{font-size:.92rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-item-row.active-track .track-item-title{color:var(--accent-purple)}.track-item-artist{font-size:.78rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-item-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}.track-action-btn{background:none;border:none;cursor:pointer;padding:7px;border-radius:50%;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.track-action-btn:hover{color:var(--text-primary);background:#7c3aed1a;transform:scale(1.12)}.track-action-btn.liked{color:var(--accent-pink)}.track-action-btn.liked:hover{background:#ec48991a}.playlist-menu-wrapper{position:relative}.playlist-dropdown-menu{position:absolute;bottom:calc(100% + 6px);right:0;width:205px;background:var(--bg-surface);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:.5rem;box-shadow:0 12px 32px #00000040;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:70;display:flex;flex-direction:column;gap:.25rem;text-align:left;animation:fadeIn .18s ease-out}.playing-equalizer{display:flex;align-items:flex-end;gap:3px;height:16px}.playing-equalizer span{width:3px;background:linear-gradient(to top,var(--accent-purple),var(--accent-pink));border-radius:2px;animation:equalizerBounce 1.2s infinite ease-in-out}.playing-equalizer span:nth-child(1){height:40%;animation-delay:.1s}.playing-equalizer span:nth-child(2){height:90%;animation-delay:.3s}.playing-equalizer span:nth-child(3){height:60%;animation-delay:.2s}.playing-equalizer span:nth-child(4){height:100%;animation-delay:.4s}@keyframes equalizerBounce{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;border-radius:4px;background:#7c3aed26;outline:none;cursor:pointer;transition:height var(--transition-fast)}input[type=range]:hover{height:7px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-purple);box-shadow:0 2px 8px var(--accent-purple-glow);opacity:0;transition:all var(--transition-fast)}input[type=range]:hover::-webkit-slider-thumb{opacity:1;transform:scale(1.15)}.spinning-vinyl{border-radius:50%;box-shadow:0 15px 45px #0000004d,0 0 35px var(--accent-purple-glow);animation:rotateVinyl 20s linear infinite;animation-play-state:running}.spinning-vinyl.paused{animation-play-state:paused}@keyframes rotateVinyl{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .35s cubic-bezier(.4,0,.2,1)}.filter-pill{padding:.55rem 1.15rem;border-radius:var(--radius-full);border:1px solid var(--glass-border);background:var(--bg-card);color:var(--text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:var(--glass-shadow);transition:all var(--transition-fast)}.filter-pill:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:#7c3aed4d;transform:translateY(-1px);box-shadow:var(--glass-shadow-hover)}.filter-pill.active{background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border-color:transparent;color:#fff!important;box-shadow:0 4px 16px var(--accent-purple-glow)}.filter-pill.active:hover{background:linear-gradient(135deg,#8b5cf6,#ec4899)!important;color:#fff!important;box-shadow:0 6px 20px var(--accent-purple-glow)!important;transform:translateY(-1px)}.app-header{height:var(--header-height);padding:0 2.25rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--header-bg);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:20;box-shadow:0 2px 10px #00000005;transition:background var(--transition-normal),border-color var(--transition-normal)}.header-search-container{position:relative;width:100%;max-width:440px}.header-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none}.header-search-input{width:100%;padding:.72rem 2.8rem .72rem 2.75rem;border-radius:var(--radius-full);background:var(--bg-input);border:1px solid var(--glass-border);color:var(--text-primary);font-size:.9rem;outline:none;box-shadow:0 2px 6px #00000008;transition:all var(--transition-fast)}.header-search-input:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px var(--accent-purple-glow)}.header-search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center}.header-actions{display:flex;align-items:center;gap:.9rem}.header-theme-btn{font-size:.84rem;padding:.45rem .95rem;gap:.5rem;color:var(--text-primary);background:var(--bg-card)}.header-profile-btn{display:flex;align-items:center;gap:.65rem;padding:.35rem .9rem .35rem .35rem;border-radius:var(--radius-full);background:var(--bg-card);border:1px solid var(--glass-border);color:var(--text-primary);cursor:pointer;font-size:.85rem;box-shadow:0 2px 6px #0000000a;transition:all var(--transition-fast)}.header-profile-btn:hover{border-color:var(--accent-purple)}.header-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;box-shadow:0 2px 8px var(--accent-purple-glow)}.header-username{font-weight:600}.mobile-bottom-nav{display:none}@media (max-width: 768px){:root{--player-height: 68px;--header-height: 60px;--mobile-nav-height: 64px}.desktop-sidebar{display:none!important}.app-header{padding:0 .85rem!important;gap:.6rem!important}.header-search-container{max-width:unset!important;flex:1 1 0%!important;min-width:0!important}.header-search-input{padding:.52rem 2.2rem!important;font-size:.82rem!important}.header-search-icon{left:10px!important}.header-search-clear{right:10px!important}.header-actions{gap:.5rem!important;flex-shrink:0!important}.header-theme-btn{padding:.45rem!important;min-width:36px!important;height:36px!important;justify-content:center!important;border-radius:50%!important}.header-theme-btn span{display:none!important}.header-profile-btn{padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}.header-username{display:none!important}.page-scroll-view{padding:1rem .85rem calc(var(--player-height) + var(--mobile-nav-height) + 2rem) .85rem!important}.song-grid{grid-template-columns:repeat(2,1fr)!important;gap:.85rem!important}.song-card{padding:.75rem!important}.song-card-title{font-size:.88rem!important}.song-card-subtitle{font-size:.75rem!important;margin-bottom:.4rem!important}.track-item-row{padding:.52rem .65rem!important;gap:.6rem!important}.track-item-left{gap:.6rem!important}.track-item-index{width:18px!important;font-size:.76rem!important}.track-item-cover-wrapper{width:40px!important;height:40px!important}.track-item-title{font-size:.86rem!important}.track-item-artist{font-size:.74rem!important}.track-item-actions{gap:.2rem!important}.track-action-btn{padding:5px!important}.bottom-player-container{bottom:var(--mobile-nav-height)!important;height:var(--player-height)!important;padding:0 .85rem!important;background:var(--player-bg)!important;border-radius:var(--radius-md) var(--radius-md) 0 0!important;box-shadow:0 -8px 25px #0000001f!important;gap:.65rem!important;z-index:105!important}.bottom-player-left{min-width:0!important;flex:1 1 0%!important;gap:.65rem!important}.bottom-player-shuffle,.bottom-player-repeat,.bottom-player-volume,.bottom-player-timestamp{display:none!important}.bottom-player-center-controls{flex:0 0 auto!important;max-width:unset!important;width:auto!important}.bottom-player-center-controls>div{gap:.65rem!important}.bottom-player-right{min-width:unset!important;gap:.35rem!important}.mobile-bottom-nav{display:flex!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;height:var(--mobile-nav-height)!important;background:var(--header-bg)!important;backdrop-filter:blur(25px)!important;-webkit-backdrop-filter:blur(25px)!important;border-top:1px solid var(--glass-border)!important;justify-content:space-around!important;align-items:center!important;z-index:110!important;padding:0 .5rem!important;box-shadow:0 -4px 20px #0000000f!important}.mobile-nav-item{display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;background:none!important;border:none!important;color:var(--text-muted)!important;cursor:pointer!important;padding:.4rem .7rem!important;border-radius:var(--radius-sm)!important;transition:all var(--transition-fast)!important}.mobile-nav-item.active{color:var(--accent-purple)!important;background:#7c3aed14!important}.fullscreen-player-cover{width:200px!important;height:200px!important}}