:root{--bg:#14151a;--panel:#1c1e26;--panel2:#23262f;--line:#2e313c;--fg:#e8e9ee;--dim:#9a9fb0;--acc:#7c5cff;--acc2:#a28bff;--danger:#ff5a6a;--warn:#ffb020}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,-apple-system,"Segoe UI","Noto Sans KR",sans-serif}
[hidden]{display:none!important}
button,.btn,select,input{font:inherit;color:inherit}
button,.btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button:hover,.btn:hover{border-color:var(--acc2)}
button.primary,.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
button.danger{color:var(--danger)}
button.sm{padding:3px 9px}
button.round{width:36px;height:36px;border-radius:50%;padding:0;justify-content:center;font-size:15px}
select,input[type=number],input:not([type]){background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
input[type=number]{width:64px}
.grow{flex:1}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.lbl{color:var(--dim);font-size:12px}

#landing{min-height:100%;display:grid;place-items:center;padding:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:12px}
.card h1{margin:0}.card p{margin:0;color:var(--dim)}.hint{font-size:12px}

#app{display:flex;flex-direction:column;min-height:100vh}
header{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:700;font-size:16px}
.users{color:var(--dim);font-size:12px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs{display:flex;align-items:center;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--line);background:var(--panel)}
.tabs button{border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--dim);padding:8px 16px}
.tabs button.on{background:var(--bg);color:var(--fg);box-shadow:inset 0 2px 0 var(--acc)}
.chk{color:var(--dim);font-size:12px;display:flex;gap:4px;align-items:center;padding-bottom:6px;cursor:pointer}
section{padding:12px 16px;flex:1}
.transport,.prbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;flex-wrap:wrap}
.prbar label{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12px}
.prbar input[type=range]{width:90px}
.time{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}
.master{width:110px}
.meter{width:70px;height:8px;background:var(--panel2);border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3ad29f,#ffd23f 75%,#ff5a6a)}
.empty{padding:60px 16px;text-align:center;color:var(--dim);border:2px dashed var(--line);border-radius:14px}

/* 멀티트랙 */
.mt{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
#ctrls{width:270px;flex:none;border-right:1px solid var(--line);background:var(--panel)}
.chead{height:28px;display:flex;align-items:center;padding:0 12px;color:var(--dim);font-size:12px;border-bottom:1px solid var(--line)}
.tctrl{height:var(--th,72px);border-bottom:1px solid var(--line);padding:6px 10px;display:flex;flex-direction:column;justify-content:space-between;border-left:4px solid var(--c)}
.tname{display:flex;align-items:center;gap:6px;min-width:0}
.tname .idx{color:var(--dim);font-size:11px}
.tname .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.tname .del{padding:0 6px;border:0;background:transparent;color:var(--dim)}
.trow{display:flex;align-items:center;gap:6px}
.trow button{width:26px;height:24px;padding:0;justify-content:center;font-size:12px;font-weight:700}
.trow button.mb.on{background:var(--danger);border-color:var(--danger);color:#fff}
.trow button.sb.on{background:var(--warn);border-color:var(--warn);color:#000}
.trow input[type=range]{flex:1;min-width:0;accent-color:var(--c)}
.trow .pan{flex:0 0 52px}
#timeline{flex:1;overflow-x:auto;overflow-y:hidden;position:relative}
#tl-inner{position:relative;min-width:100%}
#ruler{display:block;height:28px;border-bottom:1px solid var(--line);cursor:pointer}
.lane{height:var(--th,72px);border-bottom:1px solid var(--line);position:relative;background:repeating-linear-gradient(90deg,transparent 0 99px,#ffffff08 99px 100px)}
.lane canvas{display:block}
.lane .loading{position:absolute;left:12px;top:26px;color:var(--dim);font-size:12px}
#playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff4d5e;pointer-events:none;left:0;box-shadow:0 0 6px #ff4d5e88}

/* 피아노롤 */
.prwrap{display:grid;grid-template-columns:56px 1fr;grid-template-rows:24px minmax(160px,calc(100vh - 440px)) 100px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#101116}
.corner{background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
#pr-ruler-wrap{overflow:hidden;background:var(--panel);border-bottom:1px solid var(--line)}
#pr-keys-wrap{overflow:hidden;border-right:1px solid var(--line)}
#pr-grid-wrap{overflow:auto;position:relative}
#pr-inner{position:relative}
#pr-grid{display:block;cursor:crosshair}
#pr-ruler{display:block;cursor:pointer}
#pr-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff4d5e;pointer-events:none}
.prhelp{color:var(--dim);font-size:12px;margin-top:8px}

footer{padding:6px 16px;color:var(--dim);font-size:12px;min-height:28px}
#dropveil{position:fixed;inset:0;background:#7c5cffcc;display:grid;place-items:center;font-size:28px;font-weight:700;z-index:50;pointer-events:none}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--acc);padding:8px 14px;border-radius:8px;animation:in .2s}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
@media(max-width:720px){#ctrls{width:200px}.trow .pan{display:none}.prwrap{grid-template-rows:24px 45vh 90px}}
.amp{width:100px}.amp-v{min-width:34px;font-variant-numeric:tabular-nums}
.panning,.panning *{cursor:grabbing!important}
.vlab{background:var(--panel);border-right:1px solid var(--line);border-top:1px solid var(--line);font-size:11px;color:var(--dim);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.vlab b{color:var(--fg);font-size:16px;font-variant-numeric:tabular-nums}
#pr-vel-wrap{overflow:hidden;border-top:1px solid var(--line)}
#pr-velcv{display:block;cursor:ns-resize}
.seg{display:inline-flex}.seg button{border-radius:0;padding:5px 10px}.seg button:first-child{border-radius:8px 0 0 8px}.seg button:last-child{border-radius:0 8px 8px 0;border-left:0}.seg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
#actlog{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:var(--bg);z-index:100}
#actlog h2{margin:0}#actlog .card{max-width:560px}
#act-log{margin:0;max-height:180px;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px;font:11px/1.5 ui-monospace,monospace;color:var(--dim);white-space:pre-wrap;word-break:break-all}
.act-err{color:var(--danger)!important;font-weight:600}
.modal-back{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:200;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.modal h3{margin:0}.modal p{margin:0;color:var(--dim)}.modal-in{width:100%}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}