:root{--bg: #0f1012;--bg-raised: #151619;--bg-hover: #1c1e22;--bg-active: #23252b;--text: #e7e9ec;--text-muted: #9aa0a8;--accent: #6c8cff;--accent-hover: #86a0ff;--accent-soft: rgba(108, 140, 255, .13);--border: #24272d;--danger: #e5484d;--radius: 8px;--radius-sm: 7px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}@supports (height: 100dvh){html,body,#root{height:100dvh}}body{background:var(--bg);color:var(--text);font-family:Inter,Segoe UI Variable Text,Segoe UI,-apple-system,system-ui,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}h1,h2,h3{font-weight:600;letter-spacing:-.01em}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background-color .12s ease,color .12s ease,border-color .12s ease}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}input[type=text],input[type=password],input[type=url]{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:9px 12px;font:inherit;width:100%;transition:border-color .12s ease}input[type=text]::placeholder,input[type=password]::placeholder,input[type=url]::placeholder{color:var(--text-muted);opacity:.7}input[type=text]:focus,input[type=password]:focus,input[type=url]:focus{outline:none;border-color:var(--accent)}select{font:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2b2e35;border-radius:5px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:#383c45}.dl-btn,.login-submit{background:var(--accent);color:#fff;border-radius:var(--radius-sm);padding:7px 14px;font-weight:500}.dl-btn:hover:not(:disabled),.login-submit:hover:not(:disabled){background:var(--accent-hover)}.ghost-btn,.load-more-btn,.logout-btn{color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 13px}.ghost-btn:hover:not(:disabled),.load-more-btn:hover:not(:disabled),.logout-btn:hover:not(:disabled){color:var(--text);background:var(--bg-hover);border-color:#33363e}.queue-clear{color:var(--text-muted);font-size:13px;padding:4px 8px;border-radius:6px}.queue-clear:hover{color:var(--text);background:var(--bg-hover)}.action-icon-btn,.remove-btn{color:var(--text-muted);width:28px;height:28px;padding:0;border-radius:6px}.action-icon-btn:hover,.remove-btn:hover{color:var(--text);background:var(--bg-active)}.remove-btn:hover{color:var(--danger)}.app-shell{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:6px;padding:10px 20px;background:var(--bg);border-bottom:1px solid var(--border)}.topbar .logo{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:650;letter-spacing:-.01em;color:var(--text);white-space:nowrap;margin-right:18px}.topbar .logo svg{color:var(--accent)}.topbar .spacer{flex:1}.topbar .user{color:var(--text-muted);white-space:nowrap;margin-right:8px;font-size:13px}.topbar .nav-btn{color:var(--text-muted);padding:6px 12px;border-radius:var(--radius-sm);font-weight:500}.topbar .nav-btn:hover{color:var(--text);background:var(--bg-hover)}.topbar .nav-btn.active{color:var(--text);background:var(--bg-active)}.main-content{flex:1;overflow-y:auto;padding:18px 20px 24px}.search-input{max-width:360px}.library-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.library-count{color:var(--text-muted);white-space:nowrap}.status-message{color:var(--text-muted);padding:24px 0;text-align:center}.status-message.error{color:var(--danger)}.track-list{width:100%;border-collapse:collapse}.track-list th{text-align:left;color:var(--text-muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:500;padding:8px 12px;border-bottom:1px solid var(--border)}.track-row td{padding:8px 12px;border-bottom:1px solid transparent}.track-row{cursor:pointer}.track-row:hover td{background:var(--bg-hover)}.track-row.current td{background:var(--accent-soft)}.track-row.current .track-title{color:var(--accent)}.track-title{font-weight:500}.track-artist{color:var(--text-muted);font-size:12.5px;margin-top:1px}.col-num{width:42px;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums}.now-playing-icon{color:var(--accent);vertical-align:-2px}.col-album{color:var(--text-muted)}.col-duration{width:70px;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums}.track-list-empty{color:var(--text-muted);text-align:center;padding:40px 0}.web-search-list{list-style:none;margin:0;padding:0}.web-search-row{display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:var(--radius-sm)}.web-search-row:hover{background:var(--bg-hover)}.web-search-thumb{width:72px;height:40px;border-radius:5px;object-fit:cover;flex-shrink:0}.web-search-thumb.placeholder{display:flex;align-items:center;justify-content:center;background:var(--bg-active);color:var(--text-muted)}.web-search-info{flex:1;min-width:0}.web-search-info .track-title,.web-search-info .track-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.web-search-duration{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:13px}.web-search-action{min-width:120px;display:flex;justify-content:flex-end;flex-shrink:0}.dl-actions{display:inline-flex;align-items:center;gap:4px}.dl-progress{color:var(--accent);font-variant-numeric:tabular-nums;font-size:13px}.dl-done{color:var(--text-muted);font-size:13px}.playlists-layout{display:flex;gap:24px;align-items:flex-start}.playlist-side{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:12px}.playlist-detail{flex:1;min-width:0}.import-form{display:flex;gap:8px}.import-form input{flex:1;min-width:0}.import-status{font-size:13px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg-raised);border:1px solid var(--border);color:var(--text-muted)}.import-status.running{color:var(--accent)}.import-status.failed{color:var(--danger)}.playlist-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.playlist-item{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:var(--radius-sm);text-align:left}.playlist-item:hover{background:var(--bg-hover)}.playlist-item.active{background:var(--bg-active)}.playlist-item-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.playlist-item-meta{color:var(--text-muted);font-size:12.5px}.playlist-detail-header{display:flex;align-items:center;gap:14px;margin-bottom:12px}.playlist-detail-header h2{margin:0;font-size:21px}.playlist-detail-header .spacer{flex:1}.col-remove{width:36px;text-align:center}.track-row .remove-btn{visibility:hidden}.track-row:hover .remove-btn{visibility:visible}.queue-panel{position:fixed;right:20px;bottom:104px;width:380px;max-height:55vh;overflow-y:auto;background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:12px;box-shadow:0 12px 40px #0000008c;z-index:30}.queue-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.queue-header .spacer{flex:1}.panel-title{display:inline-flex;align-items:center;gap:7px}.panel-title svg{color:var(--accent)}.queue-list{list-style:none;margin:0;padding:0}.queue-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer}.queue-row:hover{background:var(--bg-hover)}.queue-row .remove-btn{visibility:hidden}.queue-row:hover .remove-btn{visibility:visible}.queue-row.current .track-title{color:var(--accent)}.queue-row-info{flex:1;min-width:0;display:flex;flex-direction:column}.queue-row-info .track-title,.queue-row-info .track-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quality-select{background:var(--bg-raised);border:1px solid var(--border);border-radius:6px;color:var(--text-muted);padding:4px 6px;font-size:12px}.quality-select:focus{outline:none;border-color:var(--accent)}.recent-section{margin-bottom:20px}.recent-title{margin:0 0 10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:12px}.recent-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}.recent-card{width:130px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;border-radius:var(--radius);background:var(--bg-raised);border:1px solid var(--border);text-align:left}.recent-card:hover{background:var(--bg-hover);border-color:#2e323a}.recent-card .track-title,.recent-card .track-artist{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-cover{width:108px;height:108px;border-radius:6px;object-fit:cover;margin-bottom:4px}.recent-cover.placeholder{display:flex;align-items:center;justify-content:center;background:var(--bg-active);color:var(--text-muted)}.discover-controls{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.discover-select{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:8px 12px;font:inherit}.discover-select:focus{outline:none;border-color:var(--accent)}.source-toggle{display:flex;gap:3px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px}.source-toggle .nav-btn{color:var(--text-muted);padding:5px 11px;border-radius:5px;font-weight:500;font-size:13px}.source-toggle .nav-btn:hover{color:var(--text)}.source-toggle .nav-btn.active{color:var(--text);background:var(--bg-active)}.lastfm-connect{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised)}.lastfm-label{color:#d51007;font-weight:650}.lastfm-auth-link{color:var(--accent);text-decoration:underline}.lyrics-panel{position:fixed;right:20px;bottom:104px;width:460px;max-height:65vh;display:flex;flex-direction:column;background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:12px;box-shadow:0 12px 40px #0000008c;z-index:30}.lyrics-lines{list-style:none;margin:0;padding:20vh 8px;overflow-y:auto;text-align:center}.lyric-line{padding:7px 10px;color:var(--text-muted);font-size:17px;font-weight:600;line-height:1.35;border-radius:var(--radius);cursor:pointer;transition:color .2s,transform .2s}.lyric-line:hover{color:var(--text)}.lyric-line.active{color:var(--accent);transform:scale(1.04)}.lyrics-plain{overflow-y:auto;white-space:pre-wrap;font:inherit;color:var(--text-muted);line-height:1.6;padding:8px 12px;margin:0}@media(max-width:640px){.lyrics-panel{left:8px;right:8px;width:auto;bottom:calc(186px + env(safe-area-inset-bottom));max-height:50vh}}.remote-devices{background:var(--bg-raised);border-top:1px solid var(--border)}.remote-device{display:flex;align-items:center;gap:10px;padding:7px 20px;font-size:13px}.remote-device-name{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;white-space:nowrap}.remote-device-track{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remote-device .spacer{flex:1}.stats-cards{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}.stats-card{flex:1;min-width:150px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:4px}.stats-value{font-size:25px;font-weight:650;letter-spacing:-.02em}.stats-label{color:var(--text-muted);font-size:13px}.stats-section{margin-bottom:24px;min-width:0}.stats-columns{display:flex;gap:28px;flex-wrap:wrap}.stats-columns .stats-section{flex:1;min-width:260px}.stats-list{list-style:none;margin:0;padding:0;counter-reset:rank}.stats-list li{display:grid;grid-template-columns:28px 1fr auto;grid-template-areas:"rank title count" "rank artist count";column-gap:10px;padding:7px 10px;border-radius:var(--radius-sm)}.stats-list li:nth-child(odd){background:var(--bg-raised)}.stats-list li:before{counter-increment:rank;content:counter(rank);grid-area:rank;color:var(--text-muted);align-self:center;text-align:right;font-variant-numeric:tabular-nums}.stats-list .track-title{grid-area:title}.stats-list .track-artist{grid-area:artist}.stats-count{grid-area:count;align-self:center;color:var(--text-muted);font-variant-numeric:tabular-nums}.stats-graph{display:flex;align-items:flex-end;gap:3px;height:90px;padding:8px 10px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius)}.stats-bar{flex:1;background:var(--accent);border-radius:2px 2px 0 0;min-width:4px;opacity:.75}.mobile-nav{display:flex;background:var(--bg);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 7px;color:var(--text-muted);font-size:10.5px;font-weight:500}.mobile-nav button .nav-icon{display:flex;line-height:1}.mobile-nav button.active{color:var(--accent)}.player-bar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(300px,2fr) minmax(120px,1fr);align-items:center;gap:16px;padding:12px 20px;background:var(--bg-raised);border-top:1px solid var(--border)}.player-track{display:flex;align-items:center;gap:12px;min-width:0}.player-cover{width:50px;height:50px;border-radius:6px;object-fit:cover;flex-shrink:0}.player-cover.placeholder{display:flex;align-items:center;justify-content:center;background:var(--bg-active);color:var(--text-muted)}.player-track-info{min-width:0}.player-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{color:var(--text-muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-error{color:var(--danger);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-center{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.player-controls{display:flex;align-items:center;gap:14px}.player-btn{color:var(--text-muted);width:32px;height:32px;padding:0;border-radius:var(--radius-sm)}.player-btn:hover:not(:disabled){color:var(--text);background:var(--bg-hover)}.player-btn.active{color:var(--accent);background:var(--accent-soft)}.player-btn-main{background:var(--text);color:var(--bg);width:38px;height:38px;border-radius:50%}.player-btn-main:hover:not(:disabled){background:#fff;color:var(--bg);transform:scale(1.04)}.player-progress{display:flex;align-items:center;gap:10px;width:100%;max-width:560px}.player-progress input[type=range]{flex:1}.player-time{color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums;min-width:40px;text-align:center}.player-volume{display:flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--text-muted)}.player-volume .volume-icon{display:flex;margin-left:4px}.player-volume input[type=range]{width:100px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:#32363d;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text)}input[type=range]:hover::-webkit-slider-thumb{background:var(--accent)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--text)}input[type=range]:hover::-moz-range-thumb{background:var(--accent)}input[type=range]:disabled{cursor:default}.login-screen{display:flex;align-items:center;justify-content:center;height:100%}.login-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:12px;padding:36px;width:360px;display:flex;flex-direction:column;gap:14px}.login-card h1{margin:0 0 6px;font-size:22px;font-weight:650;letter-spacing:-.02em;color:var(--text);text-align:center}.login-card label{display:flex;flex-direction:column;gap:6px;color:var(--text-muted);font-size:13px}.login-submit{margin-top:8px;padding:11px;font-weight:600}.login-error{color:var(--danger);font-size:13px;text-align:center;min-height:18px}@media(max-width:640px){input[type=text],input[type=password],input[type=url]{font-size:16px}.main-content{padding:10px 12px 16px}.topbar{padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top))}.track-list{table-layout:fixed}.track-list .col-num{width:28px}.track-list .col-duration{width:48px}.track-list .col-album{display:none}.track-list .col-remove{width:40px}.track-row td{padding:8px 6px;overflow:hidden}.track-list .track-title,.track-list .track-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row .remove-btn,.queue-row .remove-btn{visibility:visible}.action-icon-btn,.remove-btn{width:34px;height:34px}.web-search-row{gap:10px;padding:8px 6px}.web-search-thumb{width:54px;height:32px}.web-search-duration{display:none}.web-search-action{min-width:0}.recent-card{width:108px;padding:8px}.recent-cover{width:88px;height:88px}.library-count{display:none}.playlist-detail-header{flex-wrap:wrap;gap:8px}.playlist-detail-header h2{font-size:18px}.discover-controls{gap:8px}.discover-select{flex:1;min-width:0}.player-bar{grid-template-columns:minmax(120px,1fr) auto;gap:4px 10px;padding:8px 10px}.player-cover{width:42px;height:42px}.player-center{grid-row:2;grid-column:1 / -1;gap:2px}.player-bar .player-btn{width:38px;height:38px}.player-bar .player-btn-main{width:44px;height:44px}.player-bar .player-volume{gap:2px}.player-bar .player-volume .volume-icon,.player-bar .player-volume input[type=range]{display:none}.player-progress{max-width:none;gap:8px}.player-progress input[type=range]{height:5px}.player-progress input[type=range]::-webkit-slider-thumb{width:16px;height:16px}.queue-panel{left:8px;right:8px;width:auto;bottom:calc(186px + env(safe-area-inset-bottom));max-height:46vh}.playlists-layout{flex-direction:column}.playlist-side{width:100%}.search-input{max-width:none}.login-screen{padding:16px}.login-screen .login-card{width:100%;max-width:360px;padding:28px 22px}}