@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap";:root{--bg-primary:#0f0f23;--bg-secondary:#131328;--bg-elevated:#1a1a3e;--bg-card:#1e1b4b;--bg-card-hover:#2a2766;--bg-highlight:#252352;--text-primary:#f8fafc;--text-secondary:#b8b8d4;--text-subdued:#6b6b8a;--accent:#22c55e;--accent-hover:#2dd96b;--accent-pressed:#1aad50;--secondary:#4338ca;--secondary-light:#5b52d4;--border-subtle:#f8fafc0f;--scrollbar-thumb:#f8fafc1f;--scrollbar-thumb-hover:#f8fafc40;--shadow-card:0 8px 24px #00000080;--shadow-elevated:0 16px 48px #000000b3;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s cubic-bezier(.4, 0, .2, 1);--sidebar-width:280px;--player-height:90px;--font-heading:"Righteous", cursive;--font-body:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::selection{background:var(--accent);color:var(--text-primary)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);flex-direction:column;gap:8px;height:100%;display:flex;overflow:hidden}.sidebar-section{background:var(--bg-secondary);border-radius:8px;padding:12px}.sidebar-nav{flex-shrink:0}.sidebar-library{flex-direction:column;flex:1;display:flex;overflow:hidden}.sidebar-logo{align-items:center;gap:10px;padding:8px 12px 16px;display:flex}.logo-text{font-family:var(--font-heading);letter-spacing:.5px;background:linear-gradient(135deg, var(--accent), #2dd96b);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:22px}.nav-item{width:100%;color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;border-radius:6px;align-items:center;gap:16px;padding:10px 12px;font-family:inherit;font-size:15px;font-weight:600;display:flex}.nav-item:hover{color:var(--text-primary)}.nav-item.active{color:var(--text-primary);background:#f8fafc0f}.library-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.library-title{color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;align-items:center;gap:12px;padding:4px;font-family:inherit;font-size:15px;font-weight:600;display:flex}.library-title:hover{color:var(--text-primary)}.library-list{flex-direction:column;flex:1;gap:2px;padding-right:4px;display:flex;overflow-y:auto}.library-item{cursor:pointer;text-align:left;width:100%;transition:background var(--transition-fast);background:0 0;border:none;border-radius:6px;align-items:center;gap:12px;padding:8px;font-family:inherit;display:flex}.library-item:hover,.library-item.active{background:var(--bg-highlight)}.library-item-cover{width:48px;height:48px;color:var(--text-primary);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.liked-cover{background:linear-gradient(135deg,#4338ca,#6d28d9,#7c3aed)}.top-cover{background:linear-gradient(135deg, var(--accent), #0f9b3d)}.playlist-cover{background:var(--bg-card)}.library-item-info{flex-direction:column;gap:3px;display:flex;overflow:hidden}.library-item-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.library-item-detail{color:var(--text-subdued);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.album-art{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 12px #0006}.album-art-small{border-radius:4px;width:40px;height:40px}.album-art-medium{width:56px;height:56px}.album-art-large{border-radius:8px;width:180px;height:180px;box-shadow:0 8px 32px #0009}.album-art-hero{width:232px;height:232px;box-shadow:var(--shadow-elevated);border-radius:8px}.album-art-empty{background:var(--bg-card)}.album-art-image{object-fit:cover;width:100%;height:100%}.album-art-pattern{width:100%;height:100%;position:absolute;inset:0}.album-art-icon{z-index:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.song-row{cursor:default;transition:background var(--transition-fast);border-radius:6px;grid-template-columns:40px 1fr 1fr 120px;align-items:center;gap:16px;padding:8px 16px;display:grid}.song-row:hover{background:#f8fafc0d}.song-row:hover .song-row-index{display:none}.song-row:hover .song-row-play{display:flex}.song-row:hover .like-btn{opacity:1}.song-row-num{color:var(--text-subdued);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;height:100%;font-size:14px;display:flex}.song-row-index{font-size:14px}.song-row-play{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:none}.song-eq{align-items:flex-end;gap:2px;height:14px;display:flex}.song-eq .eq-bar{width:2.5px}.song-row-title{align-items:center;gap:12px;display:flex;overflow:hidden}.song-row-title-info{flex-direction:column;gap:3px;display:flex;overflow:hidden}.song-row-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.song-row-name.active{color:var(--accent)}.song-row-artist{color:var(--text-subdued);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.song-row-album{color:var(--text-subdued);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.song-row-end{justify-content:flex-end;align-items:center;gap:16px;display:flex}.like-btn{cursor:pointer;opacity:0;transition:opacity var(--transition-fast), transform var(--transition-fast);background:0 0;border:none;align-items:center;padding:4px;display:flex}.like-btn.liked{opacity:1}.like-btn:hover{transform:scale(1.15)}.song-row-duration{color:var(--text-subdued);font-variant-numeric:tabular-nums;text-align:right;min-width:40px;font-size:13px}.song-row.active .song-row-num{color:var(--accent)}.main-content{background:var(--bg-secondary);border-radius:8px;flex:1;position:relative;overflow:hidden}.main-scroll{height:100%;position:relative;overflow-y:auto}.main-gradient{background:linear-gradient(180deg, #1a2a4a 0%, var(--bg-secondary) 100%);pointer-events:none;z-index:0;height:340px;position:absolute;top:0;left:0;right:0}.home-content{z-index:1;padding:24px 32px 120px;position:relative}.home-section{margin-bottom:48px}.section-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.section-title{font-family:var(--font-heading);letter-spacing:.5px;color:var(--text-primary);font-size:26px;font-weight:400}.quick-picks-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.quick-pick-card{cursor:pointer;text-align:left;transition:background var(--transition-fast);background:#f8fafc0a;border:none;border-radius:6px;align-items:center;gap:12px;padding-right:12px;font-family:inherit;display:flex;position:relative;overflow:hidden}.quick-pick-card:hover{background:#f8fafc14}.quick-pick-card:hover .quick-pick-play-overlay{opacity:1;transform:translateY(0)}.quick-pick-card.active{background:#22c55e1f}.quick-pick-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;font-weight:600;overflow:hidden}.quick-pick-playing{align-items:flex-end;gap:2px;height:16px;padding-right:4px;display:flex}.eq-bar{background:var(--accent);border-radius:2px;width:3px;animation:.8s ease-in-out infinite alternate eq-bounce}.eq-bar-1{height:60%;animation-delay:0s}.eq-bar-2{height:100%;animation-delay:.2s}.eq-bar-3{height:40%;animation-delay:.4s}@keyframes eq-bounce{0%{height:30%}to{height:100%}}.quick-pick-play-overlay{background:var(--accent);opacity:0;width:32px;height:32px;transition:all var(--transition-normal);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;right:8px;transform:translateY(8px);box-shadow:0 4px 12px #0006}.card-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px;display:grid}.song-card{background:var(--bg-card);cursor:pointer;text-align:left;transition:background var(--transition-normal);border:none;border-radius:8px;flex-direction:column;gap:16px;padding:16px;font-family:inherit;display:flex}.song-card:hover{background:var(--bg-card-hover)}.song-card:hover .card-play-btn{opacity:1;transform:translateY(0)}.card-cover-wrapper{aspect-ratio:1;width:100%;position:relative}.card-cover-wrapper .album-art-large{width:100%;height:100%}.card-play-btn{background:var(--accent);cursor:pointer;opacity:0;width:48px;height:48px;transition:all var(--transition-normal);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;bottom:8px;right:8px;transform:translateY(8px);box-shadow:0 8px 16px #0006}.card-play-btn:hover{background:var(--accent-hover);transform:scale(1.05)translateY(0)}.card-info{flex-direction:column;gap:6px;display:flex}.card-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.card-subtitle{color:var(--text-subdued);white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.4;overflow:hidden}.mix-cover{aspect-ratio:1;border-radius:8px;justify-content:center;align-items:center;width:100%;display:flex;box-shadow:0 8px 32px #0009}.playlist-header{align-items:flex-end;gap:24px;padding:60px 32px 24px;display:flex}.playlist-header-cover{flex-shrink:0}.liked-hero-cover{width:232px;height:232px;box-shadow:var(--shadow-elevated);background:linear-gradient(135deg,#4338ca,#6d28d9,#7c3aed);border-radius:8px;justify-content:center;align-items:center;display:flex}.top-hero-cover{background:linear-gradient(135deg, var(--accent), #0f9b3d, #065f28);width:232px;height:232px;box-shadow:var(--shadow-elevated);border-radius:8px;justify-content:center;align-items:center;display:flex}.playlist-hero-cover{background:var(--bg-card);width:232px;height:232px;box-shadow:var(--shadow-elevated);border-radius:8px;justify-content:center;align-items:center;display:flex}.playlist-header-info{flex-direction:column;gap:8px;display:flex}.playlist-label{text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:500}.playlist-title{font-family:var(--font-heading);letter-spacing:-1px;margin-bottom:8px;font-size:72px;font-weight:400;line-height:1}.playlist-meta{color:var(--text-secondary);font-size:14px}.playlist-controls{align-items:center;gap:24px;padding:24px 32px 8px;display:flex}.play-btn-large{background:var(--accent);cursor:pointer;width:56px;height:56px;transition:all var(--transition-fast);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 12px #0000004d}.play-btn-large:hover{background:var(--accent-hover);transform:scale(1.06)}.play-btn-large:disabled{opacity:.4;cursor:not-allowed;transform:none}.playlist-search-wrapper{align-items:center;gap:12px;padding:0 32px 16px;display:flex}.playlist-search{background:var(--bg-elevated);border:1px solid var(--border-subtle);width:100%;max-width:360px;transition:border-color var(--transition-fast), background var(--transition-fast);border-radius:8px;align-items:center;gap:10px;padding:10px 14px;display:flex}.playlist-search:focus-within{background:var(--bg-highlight);border-color:#f8fafc33}.search-icon{color:var(--text-subdued);flex-shrink:0}.search-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:14px;font-weight:400}.search-input::placeholder{color:var(--text-subdued)}.search-clear{cursor:pointer;color:var(--text-subdued);transition:color var(--transition-fast);background:0 0;border:none;align-items:center;padding:2px;display:flex}.search-clear:hover{color:var(--text-primary)}.search-results-count{color:var(--text-subdued);white-space:nowrap;font-size:13px}.song-list{padding:0 16px 120px}.song-list-header{border-bottom:1px solid var(--border-subtle);color:var(--text-subdued);text-transform:uppercase;letter-spacing:1px;grid-template-columns:40px 1fr 1fr 80px;gap:16px;margin-bottom:8px;padding:8px 16px;font-size:12px;font-weight:500;display:grid}.song-col-num{text-align:center}.song-col-duration{justify-content:flex-end;align-items:center;display:flex}.song-list-empty{color:var(--text-subdued);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:48px 24px;display:flex}.song-list-empty p{margin-bottom:4px;font-size:15px}.song-list-empty code{background:var(--bg-highlight);color:var(--text-secondary);border-radius:4px;padding:2px 8px;font-size:13px}.song-list-empty-sub{color:var(--text-subdued);margin-top:4px;font-size:13px}.player-bar{height:var(--player-height);background:var(--bg-primary);border-top:1px solid var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.player-left{align-items:center;gap:14px;width:30%;min-width:180px;display:flex}.player-art{box-shadow:0 2px 8px #0000004d}.player-song-info{flex-direction:column;gap:3px;display:flex;overflow:hidden}.player-song-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;cursor:default;font-size:13px;font-weight:500;overflow:hidden}.player-song-title:hover{text-decoration:underline}.player-song-title.empty{color:var(--text-subdued)}.player-song-title.empty:hover{text-decoration:none}.player-song-artist{color:var(--text-subdued);white-space:nowrap;text-overflow:ellipsis;cursor:default;font-size:11px;overflow:hidden}.player-song-artist:hover{color:var(--text-primary);text-decoration:underline}.player-like-btn{cursor:pointer;color:var(--text-subdued);transition:color var(--transition-fast), transform var(--transition-fast);background:0 0;border:none;flex-shrink:0;align-items:center;padding:6px;display:flex}.player-like-btn:hover{color:var(--text-primary);transform:scale(1.1)}.player-like-btn.liked{color:var(--accent)}.player-center{flex-direction:column;align-items:center;gap:8px;width:40%;max-width:722px;display:flex}.player-controls{align-items:center;gap:16px;display:flex}.control-btn{cursor:pointer;color:var(--text-secondary);transition:color var(--transition-fast), transform var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:flex;position:relative}.control-btn:hover{color:var(--text-primary);transform:scale(1.05)}.control-btn.active{color:var(--accent)}.control-btn.active:hover{color:var(--accent-hover)}.control-dot{background:var(--accent);border-radius:50%;width:4px;height:4px;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.play-pause-btn{background:var(--text-primary);cursor:pointer;width:36px;height:36px;transition:transform var(--transition-fast), background var(--transition-fast);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.play-pause-btn:hover{background:#fff;transform:scale(1.06)}.player-progress{align-items:center;gap:10px;width:100%;display:flex}.progress-time{color:var(--text-subdued);text-align:center;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;min-width:36px;font-size:11px}.progress-bar-container{cursor:pointer;flex:1;align-items:center;height:16px;display:flex;position:relative}.progress-bar-bg{background:#f8fafc1a;border-radius:2px;width:100%;height:4px;position:relative;overflow:visible}.progress-bar-fill{background:var(--text-primary);height:100%;transition:background var(--transition-fast);border-radius:2px}.progress-bar-container:hover .progress-bar-fill{background:var(--accent)}.progress-bar-handle{background:var(--text-primary);opacity:0;width:12px;height:12px;transition:opacity var(--transition-fast);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 4px #0000004d}.progress-bar-container:hover .progress-bar-handle{opacity:1}.player-right{justify-content:flex-end;align-items:center;gap:8px;width:30%;min-width:180px;display:flex}.volume-bar-container{cursor:pointer;align-items:center;width:100px;height:16px;display:flex;position:relative}.volume-bar-bg{background:#f8fafc1a;border-radius:2px;width:100%;height:4px;position:relative;overflow:visible}.volume-bar-fill{background:var(--text-primary);height:100%;transition:background var(--transition-fast);border-radius:2px}.volume-bar-container:hover .volume-bar-fill{background:var(--accent)}.volume-bar-handle{background:var(--text-primary);opacity:0;width:12px;height:12px;transition:opacity var(--transition-fast);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 4px #0000004d}.volume-bar-container:hover .volume-bar-handle{opacity:1}.app{background:var(--bg-primary);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.app-body{flex:1;gap:8px;padding:8px 8px 0;display:flex;overflow:hidden}