:root{--bg:#121419;--bg2:#1a1d24;--bg3:#242832;--line:#2f3440;--fg:#e8eaf0;--muted:#8d94a5;--accent:#ff8a28;--accent2:#40c4ff;--danger:#ff5a5f;--topbar-h:56px;--player-h:112px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--fg);overscroll-behavior:none;margin:0;font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0}button:disabled{opacity:.4;cursor:default}svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:24px;height:24px}svg .fill,svg use .fill{fill:currentColor;stroke:none}[hidden]{display:none!important}.muted{color:var(--muted)}.small{font-size:12px}.topbar{height:calc(var(--topbar-h) + var(--safe-t));padding:var(--safe-t) 6px 0;background:var(--bg2);border-bottom:1px solid var(--line);z-index:20;align-items:center;gap:4px;display:flex;position:fixed;inset:0 0 auto}.icon-btn{border-radius:12px;flex:none;place-items:center;width:44px;height:44px;display:grid}.icon-btn:active,.pill-btn:active,.ctl:active{background:var(--bg3)}.icon-btn.on{color:var(--accent)}.icon-btn.on svg{fill:currentColor}.titlebox{flex:1;min-width:0;padding:0 4px}.song-title{white-space:nowrap;text-overflow:ellipsis;font-weight:650;overflow:hidden}.song-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.pill-btn{background:var(--bg3);border-radius:19px;flex:none;align-items:center;gap:6px;max-width:42vw;height:38px;padding:0 12px;display:flex}.pill-btn svg{width:18px;height:18px}.pill-btn span{white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;overflow:hidden}#viewport{top:calc(var(--topbar-h) + var(--safe-t));bottom:calc(var(--player-h) + var(--safe-b));-webkit-overflow-scrolling:touch;background:var(--bg);position:fixed;left:0;right:0;overflow:auto}#at{min-height:100%}#at .at-cursor-bar{background:#40c4ff1f}#at .at-selection div{background:#ff8a2838}#at .at-cursor-beat{background:var(--accent2);width:3px}#at .at-highlight *{fill:var(--accent);stroke:var(--accent)}.welcome{text-align:center;max-width:460px;margin:0 auto;padding:32px 22px}.welcome img{border-radius:22px}.welcome h1{letter-spacing:.5px;margin:10px 0 6px;font-size:24px}.welcome p{color:var(--muted)}.hint{color:var(--muted);font-size:13px}.primary-btn{background:var(--accent);color:#1b1206;border-radius:14px;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:0 20px;font-weight:650;display:inline-flex}.primary-btn.wide{width:100%}.ghost-btn{border:1px solid var(--line);background:var(--bg2);border-radius:14px;min-height:44px;margin:8px 4px;padding:0 18px}.samples{flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 4px;display:flex}.sample-btn{background:var(--bg3);border-radius:20px;padding:9px 14px;font-size:13.5px}.player{height:calc(var(--player-h) + var(--safe-b));padding:6px 8px var(--safe-b);background:var(--bg2);border-top:1px solid var(--line);z-index:20;flex-direction:column;gap:2px;display:flex;position:fixed;inset:auto 0 0}.progress-row{align-items:center;gap:8px;height:34px;display:flex}.time{font-variant-numeric:tabular-nums;color:var(--muted);text-align:center;min-width:38px;font-size:12px}.controls-row{flex:1;justify-content:space-around;align-items:center;display:flex}.ctl{min-width:52px;height:60px;color:var(--muted);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:10.5px;display:flex}.ctl svg{width:22px;height:22px;color:var(--fg)}.ctl.toggle.on,.ctl.toggle.on svg{color:var(--accent)}.ctl.play{background:var(--accent);border-radius:50%;width:62px;min-width:62px;height:62px}.ctl.play svg{color:#1b1206;width:30px;height:30px}.ctl.play:active{background:#ffa04f}input[type=range]{appearance:none;background:0 0;flex:1;height:32px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:var(--line);border-radius:2px;height:4px}input[type=range]::-moz-range-track{background:var(--line);border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border-radius:50%;width:20px;height:20px;margin-top:-8px}input[type=range]::-moz-range-thumb{background:var(--accent);border:0;border-radius:50%;width:20px;height:20px}input[type=range]:disabled::-webkit-slider-thumb{background:var(--muted)}.backdrop{opacity:0;pointer-events:none;z-index:30;background:#00000080;transition:opacity .2s;position:fixed;inset:0}.backdrop.show{opacity:1;pointer-events:auto}.panel{background:var(--bg2);z-index:40;width:min(420px,92vw);padding:calc(8px + var(--safe-t)) 14px calc(14px + var(--safe-b));flex-direction:column;gap:10px;transition:transform .22s;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-102%)}.panel.open{transform:none}.sheet{background:var(--bg2);z-index:40;max-height:82vh;padding:6px 16px calc(16px + var(--safe-b));border-radius:18px 18px 0 0;max-width:640px;margin:0 auto;transition:transform .22s;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(102%)}.sheet.open{transform:none}.sheet-grip{background:var(--line);border-radius:2px;width:40px;height:4px;margin:4px auto 2px}.panel-head{justify-content:space-between;align-items:center;display:flex}.panel-head h2{margin:0;font-size:19px}.search{background:var(--bg3);border-radius:12px;align-items:center;gap:8px;padding:0 12px;display:flex}.search svg{width:18px;height:18px;color:var(--muted)}.search input{height:44px;color:var(--fg);font:inherit;background:0 0;border:0;outline:0;flex:1}.segmented{background:var(--bg3);border-radius:12px;gap:3px;padding:3px;display:flex}.seg{min-height:38px;color:var(--muted);border-radius:9px;flex:1;font-size:13.5px}.seg.active{background:var(--bg);color:var(--fg)}.song-list,.track-list{margin:0;padding:0;list-style:none}.song-item{border-bottom:1px solid var(--line);align-items:center;gap:6px;display:flex}.song-item.current .song-main .t{color:var(--accent)}.song-main{text-align:left;flex:1;min-width:0;padding:10px 2px}.song-main .t{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.song-main .a{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.song-item .icon-btn{width:40px;height:40px;color:var(--muted)}.song-item .icon-btn.on{color:var(--accent)}.song-item .icon-btn.del:active{color:var(--danger)}.empty{color:var(--muted);text-align:center;padding:20px 0}.samples-block{margin-top:6px}.samples-block .samples{justify-content:flex-start;margin-top:6px}.small-title{text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-size:12px}.storage-info{color:var(--muted);margin-top:auto;font-size:12px}.track-item{border-bottom:1px solid var(--line);align-items:center;gap:8px;display:flex}.track-item .track-main{text-align:left;flex:1;align-items:center;gap:10px;min-width:0;padding:12px 2px;display:flex}.track-item .dot{border:2px solid var(--muted);border-radius:50%;flex:none;width:12px;height:12px}.track-item.shown .dot{background:var(--accent);border-color:var(--accent)}.track-item .tn{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-item .ti{color:var(--muted);font-size:12px}.ms-btn{background:var(--bg3);width:40px;height:36px;color:var(--muted);border-radius:10px;flex:none;font-size:14px;font-weight:700}.ms-btn.mute.on{background:var(--danger);color:#fff}.ms-btn.solo.on{color:#222;background:#ffd23f}.check-row{color:var(--muted);align-items:center;gap:10px;padding:14px 2px 4px;display:flex}.check-row input{width:20px;height:20px;accent-color:var(--accent)}.setting{border-bottom:1px solid var(--line);padding:12px 0}.setting:last-child{border-bottom:0}.setting-label{margin-bottom:6px}.setting>input[type=range]{width:100%}.slider-row{align-items:center;gap:10px;display:flex}.mini-btn{background:var(--bg3);border-radius:12px;flex:none;width:40px;height:40px;font-size:20px}.chips{gap:8px;margin-top:8px;display:flex}.chip{background:var(--bg3);border-radius:18px;flex:1;min-height:36px;font-size:13px}.chip.active{background:var(--accent);color:#1b1206}.drop-overlay{z-index:60;border:3px dashed var(--accent);background:#121419d9;place-items:center;font-size:20px;display:none;position:fixed;inset:0}.drop-overlay.show{display:grid}.loader{z-index:50;background:#121419b3;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:fixed;inset:0}.spinner{border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toast{left:50%;bottom:calc(var(--player-h) + var(--safe-b) + 12px);color:#fff;opacity:0;pointer-events:none;z-index:70;text-align:center;background:#000c;border-radius:12px;max-width:90vw;padding:10px 16px;font-size:14px;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%)translateY(20px)}.toast.show{opacity:1;transform:translate(-50%)}@media (orientation:landscape) and (max-height:500px){:root{--topbar-h:46px;--player-h:58px}.icon-btn{width:40px;height:40px}.player{padding-left:max(8px, env(safe-area-inset-left));padding-right:max(8px, env(safe-area-inset-right));flex-direction:row;align-items:center;gap:8px}.progress-row{flex:1;order:2}.controls-row{flex:none;order:1;gap:2px}.ctl{min-width:46px;height:48px}.ctl span{display:none}.ctl.play{width:48px;min-width:48px;height:48px}.ctl.play svg{width:24px;height:24px}.sheet{max-height:92vh}}@media (min-width:900px){.ctl{min-width:72px}}