:root { --bg:#0b0c0f; --fg:#e7e7ea; --muted:#9aa0a6; --accent:#5ac8fa; --border:#2a2d33; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; gap:10px; align-items:center; padding:12px; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(11,12,15,.9); backdrop-filter:blur(6px); }
main { display:grid; grid-template-columns: 1fr 320px; gap:12px; padding:12px; }
.panel { background:#111319; border:1px solid var(--border); border-radius:12px; padding:12px; }
h3 { margin:0 0 8px; font-weight:600; }
.ctrl { display:flex; align-items:center; gap:6px; color:var(--muted); }
.primary, .ghost, button { background:#191b22; color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:6px 10px; cursor:pointer; }
.primary { background:#1e2633; border-color:#2d3644; }
.toggle.active { background:#243145; border-color:#35506e; }
.hint { color:var(--muted); }
.field { margin:10px 0; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.field .inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.slider-control { display:flex; align-items:center; gap:8px; width:100%; }
.slider-control-input { flex:1 1 140px; min-width:120px; }
.slider-control-value {
  min-width:52px;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#1a1d25;
  color:var(--fg);
  font-size:12px;
  font-variant-numeric: tabular-nums;
  text-align:right;
  white-space:nowrap;
  cursor:text;
}
.slider-control-value:focus {
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.slider-control-value[aria-disabled="true"] {
  opacity:0.6;
  cursor:default;
}

.step-inline { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; width:100%; }
.step-inline select { min-width:72px; flex:0 0 auto; }
.step-inline-grid { display:grid; flex:1; grid-template-columns: repeat(auto-fit, minmax(18px, 1fr)); gap:4px; }
.step-inline-grid .mini-step { position:relative; width:100%; min-height:18px; aspect-ratio:1 / 1; border:1px solid var(--border); border-radius:6px; background:#171a21; padding:0; cursor:pointer; transition:background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.step-inline-grid .mini-step.on { background:#1d293c; }
.step-inline-grid .mini-step.playhead { box-shadow:0 0 0 2px var(--accent); }
.step-inline-grid .mini-step:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

.step-detail { flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px; border:1px dashed var(--border); border-radius:10px; background:#14171f; min-height:48px; }
.step-detail.placeholder { justify-content:center; text-align:center; }
.step-detail.placeholder .hint { width:100%; }
.step-param-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:100%; }
.step-param-controls .step-param-slider { flex:1 1 160px; min-width:140px; }
.step-param-controls .step-param-value { width:64px; padding:4px 6px; border-radius:8px; border:1px solid var(--border); background:#1a1d25; color:var(--fg); }
.step-param-controls .step-param-value:focus { outline:2px solid var(--accent); outline-offset:1px; }
.step-param-state { min-width:60px; text-transform:uppercase; font-size:11px; letter-spacing:0.04em; }

.step-fx-controls { display:flex; flex-direction:column; gap:12px; width:100%; }
.step-fx-field { display:flex; flex-direction:column; gap:4px; min-width:150px; align-items:flex-start; }
.step-fx-select, .step-fx-number { padding:4px 6px; border-radius:8px; border:1px solid var(--border); background:#1a1d25; color:var(--fg); }
.step-fx-select:focus, .step-fx-number:focus { outline:2px solid var(--accent); outline-offset:1px; }
.step-fx-delay,
.step-fx-duck,
.step-fx-multiband { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.step-fx-slider { width:100%; flex:1 1 160px; min-width:140px; }
.step-fx-readout { font-size:12px; color:var(--muted); font-variant-numeric: tabular-nums; }
.step-fx-hint { flex:1 1 100%; font-size:11px; color:var(--muted); }

.track-fx-controls { display:flex; flex-direction:column; gap:12px; width:100%; }
.track-fx-toggle { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.track-fx-toggle input { width:16px; height:16px; }
.track-fx-grid { display:flex; flex-direction:column; gap:10px; width:100%; }
.track-fx-grid.track-fx-disabled { opacity:0.55; }
.track-fx-row { display:flex; flex-direction:column; gap:6px; }
.track-fx-label { font-size:12px; color:var(--muted); }
.track-fx-hint { font-size:11px; color:var(--muted); }

.sampler-advanced {
  display:none;
  margin:8px 0 0;
  padding:10px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:#14171f;
}

.sampler-advanced.visible {
  display:block;
}

.wavetable-morph {
  display:none;
  margin:8px 0 0;
  padding:10px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:#14171f;
}

.wavetable-morph.visible {
  display:block;
}

.synth-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0;
}

.synth-tab {
  background:#171a21;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  color:var(--muted);
}

.synth-tab.active {
  background:#243145;
  border-color:#35506e;
  color:var(--fg);
}

.synth-osc-panel {
  display:none;
}

.synth-osc-panel.active {
  display:block;
}

.mod-rack { margin:12px 0; display:flex; flex-direction:column; gap:10px; }
.mod-row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:10px; background:#14171f; border:1px solid var(--border); border-radius:10px; }
.mod-cell { display:flex; flex-direction:column; gap:4px; min-width:120px; }
.mod-cell span { font-size:12px; color:var(--muted); }
.mod-row input, .mod-row select { min-width:110px; }
.mod-row button { align-self:center; }
.mod-actions { display:flex; gap:8px; flex-wrap:wrap; }
.mod-empty { color:var(--muted); font-size:12px; padding:2px 0; }

.arp-panel { margin-top:12px; }
.arp-panel.is-hidden { display:none; }

#sequencer { display:grid; grid-template-columns: repeat(16, minmax(22px,1fr)); gap:6px; }
.cell { position:relative; height:28px; background:#171a21; border:1px solid var(--border); border-radius:8px; }
.cell.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(90,200,250,0.4); }
.cell.on { background:#1d293c; }
.cell.playhead { outline:2px solid var(--accent); }
.vel { position:absolute; bottom:0; left:0; width:100%; background:#4aa3ff66; border-bottom-left-radius:8px; border-bottom-right-radius:8px; }

#chainView .toggle .rep{
  display:inline-block; padding:1px 6px; border:1px solid var(--border);
  border-radius:999px; font-weight:600; transform: translateY(-1px); font-size:12px; opacity:.85;
}