:root{--bg: #0c0b0a;--panel: #141210;--line: #2a2622;--txt: #e8e2d8;--dim: #8a8178;--faint: #5a534b;--accent: #e0a96d;--accent-dim: #7d5f3c}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--txt);font:13px/1.4 ui-monospace,SF Mono,Menlo,Consolas,monospace;display:flex;justify-content:center;padding:24px}#app{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px}#drop{border:1px dashed var(--line);border-radius:8px;padding:22px;text-align:center;color:var(--dim);cursor:default;transition:.15s;user-select:none}#drop.thin{padding:9px;font-size:11.5px;color:var(--faint)}#drop.over{border-color:var(--accent);color:var(--accent);background:var(--panel)}#drop b{color:var(--txt);font-weight:500}#list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden}#list:empty{display:none}.row{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--panel);border-bottom:1px solid var(--line);cursor:default}.row:last-child{border-bottom:0}.row.active{background:#1b1813}.row.drag{opacity:.4}.row.dropbefore{box-shadow:inset 0 2px 0 var(--accent)}.row.dropafter{box-shadow:inset 0 -2px 0 var(--accent)}.handle{color:var(--faint);cursor:grab;letter-spacing:1px;line-height:1}.handle:active{cursor:grabbing}.nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.row.active .nm{color:var(--accent)}.dur{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}.x{color:var(--faint);cursor:pointer;padding:0 2px}.x:hover{color:var(--txt)}.badge{color:var(--accent-dim);font-size:9.5px;border:1px solid var(--accent-dim);border-radius:3px;padding:0 4px}#bar{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:12px}#bar.idle{opacity:.45;pointer-events:none}#ctrls{display:flex;align-items:center;gap:4px}button.t{background:none;border:0;color:var(--dim);cursor:pointer;font-size:16px;padding:5px 8px;border-radius:5px;line-height:1}button.t:hover{color:var(--txt);background:#211d18}button.t:focus-visible{outline:1px solid var(--accent);outline-offset:1px}button.t.on,button.t.on:hover{color:var(--accent)}#ctrls .sp{flex:1}#now{color:var(--dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}#now.error{color:#d98b6a}#seek{position:relative;height:14px;display:flex;align-items:center;cursor:pointer}#track{height:3px;width:100%;background:var(--line);border-radius:2px;overflow:hidden}#fill{height:100%;width:0;background:var(--accent);transition:width .08s linear}#time{display:flex;justify-content:space-between;color:var(--faint);font-size:10.5px;font-variant-numeric:tabular-nums}#dropoverlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:#080706cc;opacity:0;pointer-events:none;transition:opacity .12s ease}#dropoverlay.show{opacity:1}#dropoverlay .inner{border:2px dashed var(--accent);border-radius:12px;padding:40px 64px;color:var(--accent);background:#14121099;letter-spacing:.3px}