:root{--theme-primary:#EB458B;--theme-primary-light:#DD6FA4;--theme-primary-dark:#BB1C76;--theme-primary-darker:#8a1155;--theme-accent-light:#FF6BA9;--theme-accent:#FF8CC5;--theme-rgb:235,69,139;--accent-primary:var(--theme-primary);--accent-secondary:var(--theme-primary-dark);--accent-hover:var(--theme-primary-light);--accent-muted:rgba(var(--theme-rgb), 0.12);--accent-container:rgba(var(--theme-rgb), 0.08);--bg-primary:#fef7ff;--bg-secondary:#f3edf7;--bg-tertiary:#e8def8;--bg-elevated:#ffffff;--bg-hover:rgba(var(--theme-rgb), 0.08);--surface-container:#f3edf7;--surface-container-high:#ece6f0;--surface-container-highest:#e6e0e9;--text-primary:#1d1b20;--text-secondary:#49454f;--text-tertiary:#79747e;--text-muted:#aeaaae;--on-surface-variant:#49454f;--border-color:#cac4d0;--border-subtle:#e7e0ec;--outline-variant:#cac4d0;--sidebar-width:280px;--now-playing-height:80px;--mobile-nav-height:64px;--header-height:64px;--transition-fast:0.1s cubic-bezier(0.2, 0, 0, 1);--transition-normal:0.2s cubic-bezier(0.2, 0, 0, 1);--transition-emphasized:0.3s cubic-bezier(0.2, 0, 0, 1);--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:28px;--radius-full:9999px;--font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}body.dark-mode{--bg-primary:#141218;--bg-secondary:#1d1b20;--bg-tertiary:#2b2930;--bg-elevated:#211f26;--bg-hover:rgba(var(--theme-rgb), 0.12);--surface-container:#211f26;--surface-container-high:#2b2930;--surface-container-highest:#36343b;--text-primary:#e6e0e9;--text-secondary:#cac4d0;--text-tertiary:#938f99;--text-muted:#49454f;--on-surface-variant:#cac4d0;--border-color:#49454f;--border-subtle:#36343b;--outline-variant:#49454f;--accent-secondary:var(--theme-primary-light);--accent-muted:rgba(var(--theme-rgb), 0.16);--accent-container:rgba(var(--theme-rgb), 0.12)}.theme-red{--theme-primary:#E53E3E;--theme-primary-light:#FC8181;--theme-primary-dark:#C53030;--theme-primary-darker:#9B2C2C;--theme-accent-light:#FC8181;--theme-accent:#F56565;--theme-rgb:229,62,62}.theme-blue{--theme-primary:#3182CE;--theme-primary-light:#63B3ED;--theme-primary-dark:#2B6CB0;--theme-primary-darker:#1A365D;--theme-accent-light:#63B3ED;--theme-accent:#4299E1;--theme-rgb:49,130,206}.theme-green{--theme-primary:#38A169;--theme-primary-light:#68D391;--theme-primary-dark:#2F855A;--theme-primary-darker:#1C4532;--theme-accent-light:#68D391;--theme-accent:#48BB78;--theme-rgb:56,161,105}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden}body.music-app{font-family:var(--font-family);font-size:14px;line-height:1.5;color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}button{font-family:inherit;font-size:inherit;background:0 0;border:none;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}input{font-family:inherit;font-size:inherit;background:0 0;border:none;outline:0;color:inherit}img{display:block;max-width:100%}.music-layout{display:flex;height:calc(100vh - var(--now-playing-height));overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--surface-container);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:20px 16px 16px}.sidebar-logo{display:flex;align-items:center;gap:12px;color:var(--text-primary);text-decoration:none;font-size:22px;font-weight:500;letter-spacing:0}.sidebar-logo svg{color:var(--accent-primary)}.sidebar-nav{flex:1;padding:8px 12px;overflow-y:auto}.nav-section{margin-bottom:8px}.nav-section-title{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);padding:16px 16px 8px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border-radius:var(--radius-full);color:var(--on-surface-variant);transition:all var(--transition-fast);text-align:left;font-size:14px;font-weight:500;min-height:48px}.nav-item svg{width:24px;height:24px;flex-shrink:0}.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active{background:var(--accent-container);color:var(--accent-primary)}.nav-item.active svg{color:var(--accent-primary)}.queue-count{margin-left:auto;font-size:12px;color:var(--text-tertiary);background:var(--surface-container-high);padding:2px 8px;border-radius:var(--radius-full);min-width:24px;text-align:center;font-weight:500}.queue-count:empty{display:none}.nav-item-request{color:var(--accent-primary);border:1px solid var(--accent-primary);background:0 0}.nav-item-request:hover{background:var(--accent-container)}.nav-item-request svg{color:var(--accent-primary)}.sidebar-stats{padding:16px;border-top:1px solid var(--border-subtle);font-size:12px;color:var(--text-tertiary);line-height:1.6}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-primary)}.mobile-header{display:none;align-items:center;gap:8px;padding:12px 16px;background:var(--surface-container);border-bottom:1px solid var(--border-subtle)}.mobile-back-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--on-surface-variant);text-decoration:none;transition:background var(--transition-fast)}.mobile-back-btn:active,.mobile-back-btn:hover{background:var(--bg-hover)}.mobile-back-btn svg{width:24px;height:24px}.mobile-logo{display:flex;align-items:center;gap:8px;color:var(--text-primary);text-decoration:none;font-size:18px;font-weight:500}.mobile-logo svg{color:var(--accent-primary)}.search-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;margin:12px 16px;background:var(--surface-container-high);border-radius:var(--radius-full);min-height:48px}.search-bar svg{width:24px;height:24px;color:var(--on-surface-variant);flex-shrink:0}.search-bar input{flex:1;padding:4px 0;font-size:16px;color:var(--text-primary)}.search-bar input::placeholder{color:var(--on-surface-variant)}.search-clear{padding:8px;color:var(--on-surface-variant);border-radius:var(--radius-full);transition:background var(--transition-fast);min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}.search-clear:hover{background:var(--bg-hover)}.view-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;gap:16px;color:var(--text-tertiary)}.spinner{width:40px;height:40px;border:3px solid var(--border-subtle);border-top-color:var(--accent-primary);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.view-header{margin-bottom:24px}.view-title{font-size:28px;font-weight:400;letter-spacing:0;color:var(--text-primary);margin-bottom:4px}.view-subtitle{font-size:14px;color:var(--text-secondary)}.view-back{display:inline-flex;align-items:center;gap:8px;color:var(--accent-primary);margin-bottom:16px;font-size:14px;font-weight:500;padding:8px 12px;margin-left:-12px;border-radius:var(--radius-full);transition:background var(--transition-fast);min-height:40px}.view-back:hover{background:var(--accent-container)}.view-back svg{width:20px;height:20px}.songs-table{width:100%;border-collapse:collapse}.songs-header{display:grid;grid-template-columns:48px 1fr 1fr 0.6fr 72px;gap:16px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);color:var(--text-tertiary);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;background:var(--bg-primary);z-index:10}.song-row{display:grid;grid-template-columns:48px 1fr 1fr 0.6fr 72px;gap:16px;padding:8px 16px;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);align-items:center;min-height:64px}.song-row:hover{background:var(--bg-hover)}.song-row.playing,.song-row:active{background:var(--accent-container)}.song-row.playing .song-title{color:var(--accent-primary)}.song-number{color:var(--text-tertiary);font-variant-numeric:tabular-nums;text-align:center;font-size:14px}.song-row.playing .song-number{color:var(--accent-primary)}.song-row.playing .song-number:not(.playing-indicator),.song-row:hover .song-number:not(.playing-indicator){display:none}.playing-indicator{display:none;color:var(--accent-primary)}.song-row.playing .playing-indicator,.song-row:hover .playing-indicator{display:flex;justify-content:center}.playing-indicator svg{width:20px;height:20px}.equalizer{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:16px}.equalizer-bar{width:3px;background:var(--accent-primary);border-radius:2px;animation:.8s ease-in-out infinite equalizer}.equalizer-bar:first-child{animation-delay:0s}.equalizer-bar:nth-child(2){animation-delay:.2s}.equalizer-bar:nth-child(3){animation-delay:.4s}@keyframes equalizer{0%,100%{height:4px}50%{height:16px}}.song-info{display:flex;align-items:center;gap:12px;min-width:0}.song-art{width:48px;height:48px;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface-container-high);flex-shrink:0}.song-details{min-width:0}.song-title{font-weight:500;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-title-sub{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none;margin-top:2px}.song-album,.song-artist{color:var(--text-secondary);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color var(--transition-fast)}.song-album:hover,.song-artist:hover{color:var(--accent-primary)}.song-duration{color:var(--text-tertiary);font-variant-numeric:tabular-nums;text-align:right;font-size:14px}.albums-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.album-card{cursor:pointer;padding:12px;border-radius:var(--radius-lg);transition:background var(--transition-fast)}.album-card:hover{background:var(--bg-hover)}.album-card:active{background:var(--accent-container)}.album-art-container{position:relative;aspect-ratio:1;margin-bottom:12px;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-container-high)}.album-art{width:100%;height:100%;object-fit:cover}.album-play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-fast)}.album-card:hover .album-play-overlay{opacity:1}.album-play-btn{width:48px;height:48px;border-radius:var(--radius-full);background:var(--accent-primary);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform var(--transition-fast)}.album-play-btn:active{transform:scale(.95)}.album-play-btn svg{width:24px;height:24px;margin-left:2px}.album-name{font-weight:500;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.album-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}.artist-card{cursor:pointer;text-align:center;padding:12px;border-radius:var(--radius-lg);transition:background var(--transition-fast)}.artist-card:hover{background:var(--bg-hover)}.artist-card:active{background:var(--accent-container)}.artist-art-container{position:relative;aspect-ratio:1;margin-bottom:12px;border-radius:var(--radius-full);overflow:hidden;background:var(--surface-container-high)}.artist-art{width:100%;height:100%;object-fit:cover}.artist-name{font-weight:500;font-size:14px;color:var(--text-primary)}.album-detail-header{display:flex;gap:24px;margin-bottom:24px}.album-detail-art{width:200px;height:200px;border-radius:var(--radius-md);object-fit:cover;flex-shrink:0;background:var(--surface-container-high)}.album-detail-info{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}.album-detail-type{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);margin-bottom:8px}.album-detail-title{font-size:28px;font-weight:400;letter-spacing:0;color:var(--text-primary);margin-bottom:4px}.album-detail-artist{font-size:16px;color:var(--accent-primary);margin-bottom:8px;cursor:pointer;font-weight:500}.album-detail-artist:hover{text-decoration:underline}.album-detail-meta{font-size:14px;color:var(--text-tertiary);margin-bottom:16px}.album-detail-actions{display:flex;gap:12px;flex-wrap:wrap}.album-play-all{display:flex;align-items:center;gap:8px;padding:0 24px;height:40px;background:var(--accent-primary);color:#fff;border-radius:var(--radius-full);font-weight:500;font-size:14px;transition:opacity var(--transition-fast)}.album-play-all:hover{opacity:.92}.album-play-all:active{opacity:.88}.album-play-all svg{width:18px;height:18px}.album-shuffle{display:flex;align-items:center;gap:8px;padding:0 24px;height:40px;background:0 0;color:var(--accent-primary);border-radius:var(--radius-full);font-weight:500;font-size:14px;border:1px solid var(--outline-variant);transition:background var(--transition-fast)}.album-shuffle:hover{background:var(--accent-container)}.album-shuffle svg{width:18px;height:18px}.album-tracks .song-row{grid-template-columns:48px 1fr 72px}.album-tracks .song-info{gap:0}.album-tracks .song-art{display:none}.artist-detail-header{display:flex;gap:24px;margin-bottom:24px;align-items:flex-end}.artist-detail-art{width:160px;height:160px;border-radius:var(--radius-full);object-fit:cover;flex-shrink:0;background:var(--surface-container-high)}.artist-detail-info{min-width:0}.artist-detail-type{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);margin-bottom:8px}.artist-detail-name{font-size:36px;font-weight:400;letter-spacing:0;color:var(--text-primary);margin-bottom:8px}.artist-detail-meta{font-size:14px;color:var(--text-tertiary)}.artist-section{margin-top:24px}.artist-section-title{font-size:18px;font-weight:500;margin-bottom:16px;color:var(--text-primary)}.queue-section{margin-bottom:24px}.queue-section-title{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);margin-bottom:12px;padding-left:16px}.queue-empty{text-align:center;padding:48px 20px;color:var(--text-tertiary)}.queue-empty svg{width:48px;height:48px;margin-bottom:16px;opacity:.5}.queue-empty p{font-size:14px}.now-playing-bar{height:var(--now-playing-height);background:var(--surface-container);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;padding:0 16px;gap:16px}.now-playing-info{display:flex;align-items:center;gap:12px;width:280px;min-width:180px;flex-shrink:1}.now-playing-art{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface-container-high);flex-shrink:0}.now-playing-text{min-width:0;overflow:hidden;flex:1}.now-playing-title{display:block;font-weight:500;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.now-playing-artist{display:block;font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-controls{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:640px}.control-buttons{display:flex;align-items:center;gap:8px}.control-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--on-surface-variant);transition:all var(--transition-fast);border-radius:var(--radius-full)}.control-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.control-btn:active{background:var(--accent-container)}.control-btn svg{width:24px;height:24px}.control-btn.active{color:var(--accent-primary)}.control-btn-play{width:48px;height:48px;background:var(--accent-primary);color:#fff!important;margin:0 8px}.control-btn-play:hover{background:var(--accent-primary);opacity:.92}.control-btn-play:active{opacity:.88;transform:scale(.96)}.control-btn-play svg{width:24px;height:24px}.progress-container{display:flex;align-items:center;gap:8px;width:100%}.time-current,.time-total{font-size:12px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;min-width:40px}.time-current{text-align:right}.progress-bar{flex:1;height:4px;background:var(--surface-container-highest);border-radius:var(--radius-full);cursor:pointer;position:relative}.progress-fill{height:100%;background:var(--accent-primary);border-radius:var(--radius-full);width:0%;transition:none}.progress-handle{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--accent-primary);border-radius:var(--radius-full);opacity:0;transition:opacity var(--transition-fast)}.progress-bar:hover .progress-handle{opacity:1}.player-extras{display:flex;align-items:center;gap:4px;width:280px;min-width:180px;flex-shrink:1;justify-content:flex-end}.volume-control{display:flex;align-items:center;gap:4px}.volume-slider-container{width:100px}.volume-slider{height:4px;background:var(--surface-container-highest);border-radius:var(--radius-full);cursor:pointer;position:relative}.volume-fill{height:100%;background:var(--accent-primary);border-radius:var(--radius-full);width:100%}.volume-handle{position:absolute;top:50%;right:0;transform:translate(50%,-50%);width:16px;height:16px;background:var(--accent-primary);border-radius:var(--radius-full);opacity:0;transition:opacity var(--transition-fast)}.volume-slider:hover .volume-handle{opacity:1}.context-menu{position:fixed;background:var(--surface-container);border-radius:var(--radius-xs);padding:8px 0;min-width:200px;z-index:1000;display:none;border:1px solid var(--border-subtle)}.context-menu.visible{display:block}.context-item{display:block;width:100%;padding:12px 16px;text-align:left;color:var(--text-primary);font-size:14px;transition:background var(--transition-fast);min-height:48px;display:flex;align-items:center}.context-item:hover{background:var(--bg-hover)}.context-item:active{background:var(--accent-container)}.context-divider{height:1px;background:var(--border-subtle);margin:8px 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--mobile-nav-height);background:var(--surface-container);border-top:1px solid var(--border-subtle);z-index:100}.mobile-nav-items{display:flex;height:100%;justify-content:space-around;align-items:center;padding:0 8px}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;padding:8px 0;color:var(--on-surface-variant);text-decoration:none;min-height:48px;border-radius:var(--radius-lg);transition:all var(--transition-fast)}.mobile-nav-item svg{width:24px;height:24px}.mobile-nav-item span{font-size:12px;font-weight:500}.mobile-nav-item.active{color:var(--accent-primary)}.mobile-nav-item.active .mobile-nav-icon{background:var(--accent-container)}.mobile-nav-icon{display:flex;align-items:center;justify-content:center;width:64px;height:32px;border-radius:var(--radius-full);transition:background var(--transition-fast)}.mobile-nav-request{color:var(--accent-primary)}.mobile-nav-request .mobile-nav-icon{border:1px solid var(--accent-primary)}.hidden{display:none!important}@media (max-width:1024px){:root{--sidebar-width:80px}.nav-item span,.nav-section-title,.queue-count,.sidebar-logo span,.sidebar-stats{display:none}.sidebar-header{padding:16px 12px;display:flex;justify-content:center}.sidebar-logo{justify-content:center}.nav-item{justify-content:center;padding:12px}.song-row,.songs-header{grid-template-columns:48px 1fr 0.8fr 72px}.song-row .song-album{display:none}.album-detail-header{gap:20px}.album-detail-art{width:160px;height:160px}.album-detail-title{font-size:24px}.now-playing-info,.player-extras{width:200px;min-width:140px}.player-controls{max-width:480px}.volume-slider-container{width:80px}}@media (max-width:768px){:root{--sidebar-width:0px;--now-playing-height:72px}.music-layout{height:calc(100vh - var(--now-playing-height) - var(--mobile-nav-height))}.sidebar{display:none}.mobile-nav{display:block}.mobile-header{display:flex}.search-bar{margin:8px 12px;padding:8px 12px;min-height:40px}.search-bar svg{width:20px;height:20px}.view-container{padding:12px}.view-title{font-size:24px}.songs-header{display:none}.song-row{grid-template-columns:56px 1fr 56px;padding:8px;min-height:72px}.song-art{width:48px;height:48px}.song-row .song-album,.song-row .song-artist{display:none}.song-title-sub{display:block}.albums-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.album-card{padding:8px}.artists-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.artist-card{padding:8px}.album-detail-header{flex-direction:column;align-items:center;text-align:center;gap:16px}.album-detail-art{width:180px;height:180px}.album-detail-info{align-items:center}.album-detail-title{font-size:22px}.album-detail-actions{justify-content:center}.artist-detail-header{flex-direction:column;align-items:center;text-align:center;gap:16px}.artist-detail-art{width:140px;height:140px}.artist-detail-info{align-items:center}.artist-detail-name{font-size:28px}.album-tracks .song-row{grid-template-columns:48px 1fr 56px}.now-playing-bar{padding:8px 12px;gap:8px;justify-content:space-between}.now-playing-info{width:auto;min-width:0;flex:1;max-width:calc(100% - 140px)}.now-playing-art{width:48px;height:48px;flex-shrink:0}.now-playing-text{overflow:hidden}.player-controls{flex:0 0 auto;width:auto;max-width:none;flex-direction:row;gap:0}.control-buttons{gap:2px}.control-btn{width:36px;height:36px;flex-shrink:0}.control-btn svg{width:20px;height:20px}.control-btn-play{width:44px;height:44px;margin:0 4px;flex-shrink:0}#btn-repeat,#btn-shuffle,.player-extras,.progress-container{display:none}}@media (max-width:480px){.albums-grid,.artists-grid{grid-template-columns:repeat(2,1fr)}.album-detail-art{width:150px;height:150px}.album-detail-title{font-size:20px}.artist-detail-art{width:120px;height:120px}.artist-detail-name{font-size:24px}.album-play-all,.album-shuffle{padding:0 16px;font-size:13px}}@media (pointer:coarse){.progress-handle,.volume-handle{opacity:1;width:20px;height:20px}.progress-bar,.volume-slider{height:8px}.control-btn{width:48px;height:48px}.control-btn-play{width:56px;height:56px}}