:root{--bg:#000;--fg:#fff;--dim:#8b8b8b;--faint:#5a5a5a;--line:#232323;--surface:#0d0d0d;--surface-2:#171717;--accent:#fff;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--bar-h:66px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--fg);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,system-ui,sans-serif;font-size:16px;line-height:1.35}body{overscroll-behavior:none}#app{height:100%}.app{height:100dvh;padding-top:var(--safe-top);flex-direction:column;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:12px 16px 10px;display:flex}.topbar__brand{flex:1;min-width:0}.topbar__title{letter-spacing:.02em;font-size:17px;font-weight:600}.topbar__folder{color:var(--dim);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.iconbtn{width:44px;height:44px;color:var(--fg);cursor:pointer;background:0 0;border:0;border-radius:12px;justify-content:center;align-items:center;padding:0;display:inline-flex}.iconbtn:active{background:var(--surface-2)}.iconbtn svg{width:22px;height:22px}.iconbtn--sm{width:36px;height:36px}.iconbtn--sm svg{width:18px;height:18px}.status{color:var(--dim);border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:8px 16px;font-size:12px;display:flex}.status__sep{color:var(--faint)}.notice{border:1px solid var(--line);background:var(--surface);color:var(--dim);border-radius:12px;align-items:flex-start;gap:10px;margin:10px 16px 0;padding:10px 12px;font-size:13px;display:flex}.notice--action{color:var(--fg);cursor:pointer}.notice svg{flex:none;width:18px;height:18px;margin-top:1px}.notice__close{color:var(--faint);flex:none;margin-left:auto}.list{-webkit-overflow-scrolling:touch;padding:8px 12px calc(var(--bar-h) + var(--safe-bottom) + 24px);scrollbar-width:none;flex:1;overflow-y:auto}.list::-webkit-scrollbar{display:none}.row{border-bottom:1px solid var(--line);border-radius:10px;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 6px;display:grid}.row:last-child{border-bottom:0}.row__grip{width:30px;height:44px;color:var(--faint);touch-action:none;cursor:grab;justify-content:center;align-items:center;display:flex}.row__grip svg{width:18px;height:18px}.row__main{min-width:0;padding:4px 0}.row__title{color:var(--fg);white-space:nowrap;text-overflow:ellipsis;font-size:15px;overflow:hidden}.row__sub{color:var(--dim);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.row__time{color:var(--faint);font-variant-numeric:tabular-nums;padding-left:6px;font-size:12px}.row--current .row__title{font-weight:600}.row--current .row__time{color:var(--fg)}.row--playing .row__title:before{content:"▸ ";color:var(--fg)}.row--dragging{background:var(--surface-2);pointer-events:none;border-radius:10px;box-shadow:0 8px 24px #0009}.row__actions{display:none}.empty{padding:32px 28px calc(var(--bar-h) + var(--safe-bottom) + 32px);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;display:flex}.empty svg{width:44px;height:44px;color:var(--faint)}.empty__title{font-size:17px;font-weight:600}.empty__text{color:var(--dim);max-width:300px;font-size:13px}.btn{border:1px solid var(--fg);background:var(--fg);color:#000;cursor:pointer;border-radius:23px;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:0 20px;font-family:inherit;font-size:15px;font-weight:600;display:inline-flex}.btn:active{opacity:.75}.btn svg{width:18px;height:18px}.btn--ghost{color:var(--fg);border-color:var(--line);background:0 0}.bar{padding:8px 14px calc(8px + var(--safe-bottom));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line);z-index:20;background:#0a0a0af0;align-items:center;gap:12px;display:none;position:absolute;bottom:0;left:0;right:0}.bar--visible{display:flex}.bar__info{min-width:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;flex:1;align-items:center;gap:10px;padding:0;display:flex}.bar__art{border:1px solid var(--line);width:42px;height:42px;color:var(--faint);border-radius:8px;flex:none;justify-content:center;align-items:center;display:flex}.bar__art svg{width:18px;height:18px}.bar__text{min-width:0}.bar__title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.bar__sub{color:var(--dim);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.bar__play{border:1px solid var(--fg);background:var(--fg);color:#000;cursor:pointer;border-radius:50%;flex:none;justify-content:center;align-items:center;width:46px;height:46px;display:flex}.bar__play svg{width:20px;height:20px}.bar__play:active{opacity:.75}.sheet{z-index:30;display:none;position:absolute;inset:0}.sheet--open{display:block}.sheet__backdrop{background:#000000b8;position:absolute;inset:0}.sheet__panel{max-height:100%;padding:10px 20px calc(20px + var(--safe-bottom));background:var(--surface);border-top:1px solid var(--line);border-radius:18px 18px 0 0;animation:.22s ease-out sheet-in;position:absolute;bottom:0;left:0;right:0;overflow-y:auto}@keyframes sheet-in{0%{opacity:.4;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.sheet__handle{background:var(--line);border-radius:2px;width:40px;height:4px;margin:0 auto 14px}.sheet__head{align-items:center;gap:12px;margin-bottom:16px;display:flex}.sheet__art{border:1px solid var(--line);width:64px;height:64px;color:var(--faint);border-radius:12px;flex:none;justify-content:center;align-items:center;display:flex}.sheet__art svg{width:26px;height:26px}.sheet__title{white-space:nowrap;text-overflow:ellipsis;font-size:17px;font-weight:600;overflow:hidden}.sheet__sub{color:var(--dim);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.sheet__count{color:var(--faint);margin-top:2px;font-size:11px}.progress{touch-action:none;cursor:pointer;padding:6px 0 2px}.progress__track{background:var(--line);border-radius:2px;height:4px;position:relative}.progress__fill{background:var(--fg);border-radius:2px;width:0;position:absolute;top:0;bottom:0;left:0}.progress__knob{background:var(--fg);border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;position:absolute;top:50%;left:0}.times{color:var(--dim);font-variant-numeric:tabular-nums;justify-content:space-between;padding-top:6px;font-size:11px;display:flex}.transport{justify-content:space-between;align-items:center;margin:18px 0 10px;display:flex}.transport__side{width:44px;height:44px;color:var(--dim);cursor:pointer;background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;display:flex}.transport__side svg{width:22px;height:22px}.transport__side--on{color:var(--fg);border:1px solid var(--line)}.transport__main{background:var(--fg);color:#000;cursor:pointer;border:0;border-radius:50%;justify-content:center;align-items:center;width:66px;height:66px;display:flex}.transport__main svg{width:28px;height:28px}.transport__main:active{opacity:.75}.sheet__row{justify-content:center;align-items:center;gap:28px;padding:4px 0 2px;display:flex}.sheet__error{color:var(--fg);border:1px solid var(--line);text-align:center;border-radius:10px;margin-top:12px;padding:8px 10px;font-size:12px}.overlay{z-index:40;background:#000000db;justify-content:center;align-items:center;padding:24px;display:none;position:absolute;inset:0}.overlay--open{display:flex}.overlay__box{text-align:center;width:100%;max-width:320px}.overlay__title{margin-bottom:6px;font-size:15px;font-weight:600}.overlay__label{color:var(--dim);white-space:nowrap;text-overflow:ellipsis;min-height:16px;margin-bottom:14px;font-size:12px;overflow:hidden}.overlay__track{background:var(--line);border-radius:2px;height:3px;overflow:hidden}.overlay__fill{background:var(--fg);width:0;height:100%;transition:width .12s linear}.menu{z-index:35;display:none;position:absolute;inset:0}.menu--open{display:block}.menu__backdrop{background:#0009;position:absolute;inset:0}.menu__panel{left:12px;right:12px;bottom:calc(12px + var(--safe-bottom));background:var(--surface);border:1px solid var(--line);border-radius:14px;position:absolute;overflow:hidden}.menu__item{border:0;border-bottom:1px solid var(--line);width:100%;color:var(--fg);font:inherit;text-align:left;cursor:pointer;background:0 0;align-items:center;gap:12px;padding:15px 16px;font-size:15px;display:flex}.menu__item:last-child{border-bottom:0}.menu__item:active{background:var(--surface-2)}.menu__item svg{width:19px;height:19px;color:var(--dim)}.menu__item--danger,.menu__item--danger svg{color:#ff6b6b}.menu__cancel{border:1px solid var(--line);background:var(--surface);border-radius:14px;justify-content:center;margin-top:8px;font-weight:600}.toast{left:50%;bottom:calc(var(--bar-h) + var(--safe-bottom) + 16px);border:1px solid var(--line);max-width:88%;color:var(--fg);text-align:center;opacity:0;pointer-events:none;z-index:45;background:#141414f5;border-radius:12px;padding:10px 16px;font-size:13px;transition:opacity .18s,transform .18s;position:absolute;transform:translate(-50%)translateY(8px)}.toast--show{opacity:1;transform:translate(-50%)translateY(0)}.toast--error{border-color:#5a2626}.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}