:root{--bg: #121212;--bg-elevated: #181818;--bg-elevated-hover: #1f1f1f;--bg-sidebar: #000000;--bg-card: #181818;--bg-card-hover: #282828;--accent: #1db954;--accent-hover: #1ed760;--text: #ffffff;--text-muted: #b3b3b3;--text-faint: #6a6a6a;--border: #2a2a2a;--radius: 10px;--radius-lg: 16px;--player-h: 92px;--sidebar-w: 248px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-user-select:none;user-select:none}button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:6px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#5e5e5e;background-clip:content-box}.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr var(--player-h);grid-template-areas:"sidebar main" "player player";height:100vh;height:100dvh;gap:8px;padding:8px;padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom));padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}.sidebar{grid-area:sidebar;background:var(--bg-sidebar);border-radius:var(--radius-lg);padding:20px 12px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}.main{grid-area:main;background:linear-gradient(180deg,#1e1e1e 0%,var(--bg) 240px);border-radius:var(--radius-lg);overflow-y:auto;position:relative}.player{grid-area:player;background:var(--bg-elevated);border-radius:var(--radius-lg)}.app.no-player{grid-template-rows:1fr 0}.brand{display:flex;align-items:center;gap:10px;padding:6px 12px 18px;font-weight:800;font-size:20px;letter-spacing:-.5px}.brand svg{width:28px;height:28px}.nav-item{display:flex;align-items:center;gap:16px;padding:10px 12px;border-radius:8px;color:var(--text-muted);font-weight:700;font-size:15px;transition:color .15s,background .15s;text-align:left;width:100%}.nav-item:hover{color:var(--text)}.nav-item.active{color:var(--text);background:var(--bg-elevated)}.nav-item svg{width:22px;height:22px;flex-shrink:0}.sidebar-status{margin-top:auto;padding:12px;font-size:12px;color:var(--text-faint)}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}.status-dot.on{background:var(--accent)}.status-dot.off{background:#e22134}.page{padding:24px 28px 40px}.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}.page-title{font-size:30px;font-weight:800;letter-spacing:-1px}.page-sub{color:var(--text-muted);font-size:14px;margin-top:4px}.btn{background:var(--bg-elevated);color:var(--text);padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;transition:transform .1s,background .15s}.btn:hover{background:var(--bg-elevated-hover);transform:scale(1.03)}.btn-accent{background:var(--accent);color:#000}.btn-accent:hover{background:var(--accent-hover)}.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:9px;flex-shrink:0}.search{width:100%;max-width:360px;background:var(--bg-elevated);border-radius:999px;padding:11px 18px;color:var(--text);font-size:14px;border:1px solid transparent}.search:focus{outline:none;border-color:#3a3a3a}.track-list{display:flex;flex-direction:column}.track-row{display:grid;grid-template-columns:28px 48px 1fr auto auto;align-items:center;gap:14px;padding:8px 10px;border-radius:8px;transition:background .15s;cursor:pointer}.track-row:hover{background:var(--bg-card-hover)}.track-row.playing{background:#1db9541f}.track-index{color:var(--text-muted);font-size:14px;text-align:center;font-variant-numeric:tabular-nums}.track-row.playing .track-index{color:var(--accent)}.track-cover{width:48px;height:48px;border-radius:6px;object-fit:cover;background:#2a2a2a;display:flex;align-items:center;justify-content:center;color:var(--text-faint)}.track-meta{min-width:0}.track-title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row.playing .track-title{color:var(--accent)}.track-artist{font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-quality{font-size:11px;font-weight:700;color:var(--text-muted);border:1px solid var(--border);padding:3px 7px;border-radius:5px;white-space:nowrap}.track-quality.lossless{color:var(--accent);border-color:#1db95480}.track-actions{display:flex;align-items:center;gap:12px;color:var(--text-muted)}.icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--text-muted);transition:color .15s,background .15s,transform .1s}.icon-btn:hover{color:var(--text)}.icon-btn.active{color:var(--accent)}.icon-btn svg{width:18px;height:18px}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty{text-align:center;padding:80px 20px;color:var(--text-muted)}.empty h3{font-size:20px;margin-bottom:8px;color:var(--text)}.playerbar{position:relative;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 16px}.pb-mini{display:none}.pb-track{display:flex;align-items:center;gap:12px;min-width:0}.pb-cover{width:56px;height:56px;border-radius:8px;object-fit:cover;background:#2a2a2a;cursor:pointer;flex-shrink:0}.pb-info{min-width:0}.pb-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pb-artist{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pb-center{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:560px}.pb-controls{display:flex;align-items:center;gap:20px}.pb-play{width:40px;height:40px;border-radius:50%;background:var(--text);color:#000;display:flex;align-items:center;justify-content:center;transition:transform .1s}.pb-play:hover{transform:scale(1.06);background:#fff}.pb-play svg{width:18px;height:18px}.pb-progress{display:flex;align-items:center;gap:10px;width:100%}.time{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:36px;text-align:center}.pb-right{display:flex;align-items:center;justify-content:flex-end;gap:12px}.volume{display:flex;align-items:center;gap:8px;width:140px}.slider{position:relative;height:14px;display:flex;align-items:center;width:100%;cursor:pointer}.slider-track{position:relative;height:4px;width:100%;background:#4a4a4a;border-radius:2px;overflow:hidden}.slider-fill{position:absolute;left:0;top:0;bottom:0;background:var(--text);border-radius:2px}.slider:hover .slider-fill{background:var(--accent)}.slider-thumb{position:absolute;top:50%;width:12px;height:12px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s}.slider:hover .slider-thumb{opacity:1}.now{position:relative;height:100%;overflow:hidden}.now-stage{display:flex;flex-direction:column;align-items:center;gap:16px;height:100%;justify-content:center;padding:24px;max-width:540px;margin:0 auto}.now-head{display:flex;align-items:center;justify-content:space-between;width:100%;position:absolute;top:16px;left:0;padding:0 18px}.now-head-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:700}.now-grip{display:none}.now-close{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:var(--text);flex-shrink:0}.now-close:hover{background:var(--bg-card-hover)}.now-cover{width:min(380px,60vh);height:min(380px,60vh);max-width:100%;aspect-ratio:1;border-radius:var(--radius-lg);object-fit:cover;box-shadow:0 16px 48px #00000080;background:#2a2a2a}.now-meta{width:100%;text-align:center}.now-title{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.2}.now-artist{font-size:16px;color:var(--text-muted);margin-top:6px}.now-badges{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center}.now-progress{display:flex;flex-direction:column;gap:6px;width:100%}.now-times{display:flex;justify-content:space-between;font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}.now-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:2px}.now-ctl{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:var(--text-muted);transition:color .15s,transform .1s}.now-ctl:hover{color:var(--text)}.now-ctl.active{color:var(--accent)}.now-ctl:active{transform:scale(.92)}.now-play{display:flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;background:var(--text);color:#000;transition:transform .1s}.now-play:active{transform:scale(.95)}.now-lyrics-btn{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:11px 22px;border-radius:999px;background:var(--bg-elevated);color:var(--text);font-weight:700;font-size:14px}.now-lyrics-btn:hover{background:var(--bg-elevated-hover)}.now-lyrics-panel{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg);display:flex;flex-direction:column;padding:14px 18px 0;animation:lyrics-slide .25s ease}@keyframes lyrics-slide{0%{transform:translateY(100%)}to{transform:translateY(0)}}.lyrics-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.lyrics-title{font-size:18px;font-weight:800}.lyrics-scroll{overflow-y:auto;min-height:0;flex:1;padding-bottom:40px}.lyric-line{font-size:22px;font-weight:700;line-height:1.35;color:var(--text-faint);padding:7px 0;transition:color .25s,transform .25s,opacity .25s;letter-spacing:-.3px}.lyric-line.synced{cursor:pointer}.lyric-line.active{color:var(--text)}.lyric-line.passed{color:var(--text-muted)}.lyric-translation{font-size:16px;font-weight:500;color:var(--accent);margin-top:2px;margin-bottom:6px;line-height:1.3}.lyrics-empty{color:var(--text-muted);font-size:16px;padding:40px 0;text-align:center}.eq-presets{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}.preset-chip{background:var(--bg-elevated);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-muted);transition:background .15s,color .15s}.preset-chip:hover{background:var(--bg-elevated-hover);color:var(--text)}.preset-chip.active{background:var(--accent);color:#000}.eq-bands{display:flex;justify-content:space-between;gap:8px;background:var(--bg-elevated);border-radius:var(--radius-lg);padding:32px 24px 20px;max-width:760px}.eq-band{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1}.eq-vslider{height:180px;width:100%;display:flex;justify-content:center}.eq-vslider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:6px;height:180px;background:#4a4a4a;border-radius:3px;cursor:pointer;accent-color:var(--accent)}.eq-vslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff}.eq-freq{font-size:11px;color:var(--text-muted);font-weight:600}.eq-gain{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}.eq-toggle{display:flex;align-items:center;gap:10px;font-weight:600}.switch{width:44px;height:24px;border-radius:999px;background:#4a4a4a;position:relative;transition:background .15s}.switch.on{background:var(--accent)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}.switch.on:after{transform:translate(20px)}.setup{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:28px 32px;max-width:720px;line-height:1.6}.setup h3{font-size:20px;margin-bottom:12px}.setup p{color:var(--text-muted);margin-bottom:12px}.setup ol{color:var(--text-muted);padding-left:22px;display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.setup code,.setup .code{background:#000;color:var(--accent);padding:2px 7px;border-radius:5px;font-size:13px}.dl-panel{background:var(--bg-elevated);border-radius:var(--radius);padding:16px 20px;margin-bottom:24px}.dl-title{font-weight:700;margin-bottom:12px}.dl-row{display:grid;grid-template-columns:1fr 220px 64px;align-items:center;gap:14px;padding:6px 0}.dl-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dl-bar{height:6px;background:#4a4a4a;border-radius:3px;overflow:hidden}.dl-bar-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .4s}.dl-state{font-size:12px;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums}@media(max-width:760px){html,body,.app{background:#000}*{scrollbar-width:none}*::-webkit-scrollbar{width:0;height:0;display:none}.app{grid-template-columns:1fr;grid-template-rows:1fr auto auto;grid-template-areas:"main" "player" "sidebar";gap:0;padding:0;padding-top:calc(env(safe-area-inset-top) + 8px)}.main,.player{border-radius:0}.page{padding:14px 14px 24px}.page-head{margin-bottom:16px}.nav-item{padding:4px 6px}.page-title{font-size:24px}.track-row{grid-template-columns:48px 1fr auto auto;gap:10px;padding:7px 6px}.track-index,.track-actions .time{display:none}.track-title{font-size:14.5px}.track-quality{font-size:9px;padding:2px 5px;letter-spacing:.3px}.sidebar{flex-direction:row;justify-content:space-around;align-items:center;padding:8px 6px;padding-bottom:max(6px,calc(env(safe-area-inset-bottom) - 24px));border-radius:0}.brand,.sidebar-status{display:none}.nav-item{flex-direction:column;gap:5px;font-size:12px;padding:6px 4px}.nav-item svg{width:28px;height:28px}.now-grip{display:block;position:absolute;top:7px;left:50%;transform:translate(-50%);width:42px;height:5px;border-radius:3px;background:#ffffff59;z-index:3}.now-stage{gap:14px;padding:26px 18px 14px}.now-head{top:16px}.now-head-label{display:none}.now-cover{width:38vh;height:38vh;max-height:380px}.now-title{font-size:22px}.now-controls{gap:20px}.now-lyrics-panel{padding-top:10px}.lyric-line{font-size:21px}.app.view-now,.app.no-player{grid-template-rows:1fr auto;grid-template-areas:"main" "sidebar"}.app.view-now .player{display:none}.playerbar{grid-template-columns:1fr auto;gap:10px;padding:8px 12px}.pb-mini{display:block;position:absolute;top:0;left:10px;right:10px;height:3px;background:#3a3a3a;border-radius:0 0 2px 2px;overflow:hidden}.pb-mini-fill{height:100%;background:var(--accent)}.pb-track{cursor:pointer}.pb-cover{width:48px;height:48px}.pb-hide-mobile{display:none!important}.pb-center{width:auto}.pb-controls{gap:6px}.pb-play{width:46px;height:46px}.pb-play svg{width:24px;height:24px}.pb-next{width:46px;height:46px}.pb-next svg{width:26px;height:26px}.pb-right{display:none}}