*{box-sizing:border-box}
html,body{margin:0;background:#000;color:#fff;font:13px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root{--cyan:#00d2ff;--panel:#181818;--btn:#2d2d2d;--green:#27ae60;--red:#e74c3c}
.app{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(15rem,auto) auto;gap:6px;padding:6px;max-width:1280px;margin:0 auto}
.deck,.panel{background:var(--panel);border:1px solid #000;min-width:0}
.deck{padding:6px;display:flex;flex-direction:column;gap:8px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.btn{display:flex;align-items:center;justify-content:center;min-height:38px;padding:.3rem .6rem;border:0;border-radius:4px;background:var(--btn);color:#fff;font:700 13px/1.2 inherit;letter-spacing:.02em;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,210,255,.4);user-select:none;text-align:center}
.btn:hover{filter:brightness(1.15);box-shadow:inset 0 0 0 2px var(--cyan)}
.btn:focus-visible,.dial:focus-visible,.wave:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn.small{min-height:28px;font-size:12px;padding:.2rem .7rem}
.play{background:var(--green)}.play.on{background:#ff2a2a}
.loop[aria-pressed=true]{background:orange;color:#000}
.clear{background:#c0392b}
.bpm{display:flex;align-items:center;justify-content:center;font-weight:700}
.dials{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dialbox{display:flex;flex-direction:column;align-items:center;gap:2px}
.dial{width:min(118px,26vw);height:min(118px,26vw);cursor:ns-resize;touch-action:none;border-radius:50%}
.dval{font-size:12px;color:#ccc;background:#111;padding:1px 10px;border-radius:3px;min-width:56px;text-align:center}
.dlab{font-weight:700;font-size:13px}
.tname{text-align:center;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttime{text-align:center;font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums}
.wave{display:block;width:100%;height:90px;background:#181818;border:1px solid #121212;cursor:pointer;touch-action:none}
.deck.drop{outline:2px dashed var(--cyan);outline-offset:-4px}
.cues{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 10px;padding:0 4px}
.cue{position:relative}
.cue>button.main{width:100%;min-height:30px;border:0;border-radius:4px;color:#fff;font:700 12px/1 inherit;cursor:pointer;font-variant-numeric:tabular-nums}
.cue>button.main:hover{filter:brightness(1.2)}
.cue>button.x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:0;background:rgba(0,0,0,.82);color:#fff;font:700 11px/18px inherit;cursor:pointer;padding:0;display:none}
.cue.set>button.x{display:block}.cue>button.x:hover{background:var(--red)}
.panel{display:flex;flex-direction:column;min-height:0}
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px;min-height:34px;flex-wrap:wrap}
.phead h2{margin:0;font-size:14px}
.phctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.phctl select{background:#2d2d2d;color:#fff;border:1px solid #444;border-radius:4px;padding:4px;font:inherit}
.vol{display:flex;align-items:center;gap:4px;font-size:12px}
.vol input{width:70px}
.recbtn{background:#c0392b}.recbtn.on{background:#ff2a2a;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.6}}
.tablewrap{flex:1;overflow:auto;max-height:240px;border-top:1px solid #333}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{position:sticky;top:0;background:#3a3a3a;text-align:left;font-weight:600;padding:5px 6px;white-space:nowrap}
.tbl td{background:#2d2d2d;border-bottom:1px solid #222;padding:3px 6px;white-space:nowrap;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.tbl tr.playing td{background:orange;color:#000}
.tbl tr[draggable=true]{cursor:grab}
.tbl button{border:0;border-radius:3px;color:#fff;font:600 11px/1 inherit;padding:5px 8px;cursor:pointer}
.tbl .p{background:darkgreen}.tbl tr.playing .p{background:#ff2a2a}
.tbl .d{background:#555}.tbl .k{background:#1d4f66;margin-right:3px}
.tbl input[type=range]{width:80px}
.empty{color:#888;text-align:center;padding:1.2rem .5rem;margin:0}
.session{grid-column:1/-1;background:#121212;border:1px solid #000;display:flex;justify-content:center;gap:10px;padding:10px;flex-wrap:wrap}
.session .btn{min-width:12rem;min-height:30px}
.session .btn.on{background:var(--red)}
.toast{position:fixed;left:50%;bottom:4rem;transform:translateX(-50%);background:#222;border:1px solid var(--cyan);padding:.6rem 1rem;border-radius:6px;font-weight:600;z-index:2000;max-width:90vw;text-align:center}
@media (max-width:820px){.app{grid-template-columns:1fr}.session .btn{min-width:0;flex:1}}
@media (pointer:coarse){.tbl button{min-width:34px;min-height:32px}.cue>button.x{width:24px;height:24px;line-height:24px;top:-9px;right:-9px}}