:root{
  --bg0:#0e1016; --bg1:#161a22; --bg2:#1d222c; --bg3:#262c38;
  --border:#2c3240; --border-strong:#3d4456;
  --text:#eef0f4; --text-dim:#a3aabb; --text-muted:#6b7385;
  --accent:#6c8cff; --danger:#ff5c6c; --record-glow:0 0 16px rgba(255,92,108,.45), 0 0 0 3px rgba(255,92,108,.2);
  --success:#3ddc97;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 20% -10%, #171c28 0%, var(--bg0) 60%);color:var(--text);font-family:-apple-system,Helvetica,Arial,sans-serif;font-size:13px}
button{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:6px 11px;cursor:pointer;font-size:12px;transition:background .12s ease,border-color .12s ease,transform .08s ease}
button:hover{background:var(--bg3);border-color:var(--border-strong)}
button:active{transform:scale(0.97)}
select,input[type=text]{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:5px 8px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:linear-gradient(180deg,var(--bg1),var(--bg0));border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.2px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 8px rgba(108,140,255,.8)}
.tag{font-weight:400;color:var(--text-muted);font-size:11px}
.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.toolbar .sep{width:1px;height:18px;background:var(--border);margin:0 4px}
.toolbar .record{background:linear-gradient(180deg,#ff6a78,var(--danger));border-color:var(--danger);color:#280005;font-weight:600}
.toolbar .record.active{box-shadow:var(--record-glow)}
#btn-split.active{background:var(--accent);border-color:var(--accent);color:#fff}
#tracklist.split-mode .clip{cursor:crosshair}
.chk{display:flex;align-items:center;gap:5px;color:var(--text-dim);font-size:12px}
#zoom-label{color:var(--text-muted);font-size:11px;min-width:34px;text-align:center}

.audiopanel{padding:12px 16px;background:var(--bg1);border-bottom:1px solid var(--border)}
.audiopanel.hidden{display:none}
.audiopanel .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.audiopanel select{width:100%;margin-bottom:8px}
.meter-row{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:11px}
.meter{flex:1;height:6px;border-radius:3px;background:var(--bg0);border:1px solid var(--border);overflow:hidden}
#mic-meter{height:100%;width:0%;background:#3ddc84}

.timeline-scroll{overflow-x:auto;scrollbar-width:none}
.timeline-scroll::-webkit-scrollbar{display:none}
.roller-wrap{padding:6px 16px;background:var(--bg1);border-bottom:1px solid var(--border)}
.roller-wrap input[type=range]{width:100%}
#timeline-inner{position:relative;width:max-content}
#playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff5c5c;left:150px;z-index:6;pointer-events:none;display:none;box-shadow:0 0 6px rgba(255,92,92,.6)}
#ruler-wrap{display:flex;padding:6px 16px 6px 150px;background:var(--bg0);border-bottom:1px solid var(--border);cursor:pointer}
#ruler{display:flex}
#ruler span{font-size:10px;color:var(--text-muted);flex-shrink:0}

.track-row{display:flex;align-items:stretch;border-bottom:1px solid var(--border);background:var(--bg1)}
.track-head{width:150px;flex-shrink:0;padding:10px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--border);background:var(--bg2);position:sticky;left:0;z-index:2}
.track-head .name{font-weight:500;font-size:13px}
.track-controls{display:flex;align-items:center;gap:6px}
.arm-btn{width:26px;height:26px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-strong);background:transparent;color:var(--text-dim)}
.arm-btn.armed{background:var(--danger);color:#1a0000;border-color:var(--danger)}
.gear-btn,.ms-btn{width:26px;height:26px;padding:0;font-size:11px}
.ms-btn.active-mute{background:var(--danger);border-color:var(--danger);color:#1a0000}
.ms-btn.active-solo{background:#3ddc84;border-color:#3ddc84;color:#00190c}

.lane{flex-shrink:0;position:relative;height:64px;margin:8px 10px 8px 0;border-radius:6px;border:1px solid var(--border);background:var(--bg0)}
.live-meter{position:absolute;left:0;top:0;bottom:0;width:0%;background:rgba(255,92,92,.35);border-right:2px solid #ff5c5c;pointer-events:none;transition:width 60ms linear}

.clip{position:absolute;top:6px;bottom:6px;border-radius:5px;display:flex;align-items:center;padding:0 6px;overflow:hidden;cursor:grab;border:1px solid rgba(0,0,0,.25)}
.clip canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.clip .name{position:relative;z-index:1}
.rec-live{position:absolute;top:6px;bottom:6px;left:2%;border-radius:5px;background:rgba(255,92,92,.18);border:1px solid #ff5c5c;overflow:hidden;pointer-events:none}
.rec-live canvas{position:absolute;inset:0;width:100%;height:100%}
.rec-live::after{content:'rec';position:absolute;left:6px;top:2px;font-size:9px;color:#ff5c5c;font-weight:700}
.clip.selected{outline:2px solid var(--accent)}
.clip .name{font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;color:#0d0d0d}
.clip .name.editing{pointer-events:auto;background:rgba(255,255,255,.85);border-radius:3px;padding:0 3px}
.handle{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;background:rgba(0,0,0,.35)}
.handle.left{left:0} .handle.right{right:0}

.fx-panel{display:none;padding:14px 16px;background:var(--bg2);border-bottom:1px solid var(--border)}
.fx-panel.open{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:680px}
.fx-card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:11px;box-shadow:0 1px 0 rgba(255,255,255,.02) inset}
.fx-card h4{margin:0 0 8px;font-size:12px;color:var(--accent);letter-spacing:.2px}
.fx-card label{display:block;font-size:10px;color:var(--text-muted);margin-bottom:2px}
.fx-card input[type=range]{width:100%;accent-color:var(--accent)}
.fx-card-autotune{background:linear-gradient(180deg,#1c2130,var(--bg1))}
.autotune-detected{font-size:10px;color:var(--text-dim);margin-bottom:8px;padding:4px 6px;background:var(--bg2);border-radius:6px;border:1px solid var(--border)}
.autotune-key-row{display:flex;gap:6px;margin-bottom:8px}
.autotune-key-row select{flex:1;font-size:11px;padding:4px 6px}
.load-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border:1px solid var(--border);border-radius:7px;margin-bottom:6px;cursor:pointer}
.load-item:hover{background:var(--bg3)}
.load-item .name{font-size:12px;font-weight:500}
.load-item .date{font-size:10px;color:var(--text-muted)}

.time-tip{position:fixed;z-index:999;font-size:11px;padding:3px 8px;border-radius:6px;background:var(--bg2);border:1px solid var(--border-strong);pointer-events:none;transform:translate(-50%,-130%)}
.hint{font-size:11px;color:var(--text-muted);padding:8px 16px;margin:0;background:var(--bg1)}

.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000}
.confirm-overlay.hidden{display:none}
.confirm-box{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;width:280px}
.confirm-title{font-size:13px;font-weight:600;margin:0 0 4px}
.confirm-sub{font-size:12px;color:var(--text-dim);margin:0 0 14px}
.confirm-actions{display:flex;gap:8px;justify-content:flex-end}

html, body { height: 100%; margin: 0; }
#rotate-wrapper { width: 100%; height: 100%; }

@media screen and (max-width: 900px) and (orientation: portrait) {
  html, body { overflow: hidden; position: fixed; width: 100%; height: 100%; }
  #rotate-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100vh;
    height: 100vw;
    transform: rotate(90deg) translateY(-100vw);
    transform-origin: top left;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #app { min-height: 100%; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .toolbar button, .toolbar .chk, .toolbar select { flex-shrink: 0; }
  .topbar { flex-wrap: nowrap; }
}