/* SFX Selection (EPIC #4088) — .sx-* namespace. Rides on tokens.css ONLY.
   The aesthetic redo: PT-neutral grey, extreme density, hairlines, 0–2px radii,
   NO glow / NO decorative gradients / NO halos. Teal = meaning only
   (selected, primary action). Timecodes ride PT's muted green counter. */

/* ═══ atoms ═══════════════════════════════════════════════════════════ */

.sx-tc { font-family: var(--mono); font-feature-settings: "tnum" 1; color: var(--tc-green); }

.sx-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); }
.sx-label.tl { color: var(--teal); }

/* flat beveled-subtle rectangle button — PT's control language */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 22px; padding: 0 9px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--btn-grad); color: var(--fg); box-shadow: var(--inset-panel);
  cursor: pointer; font-family: var(--ui); font-size: 11px; white-space: nowrap;
}
.sx-btn:hover { background: var(--btn-grad-h); color: var(--fg-strong); }
.sx-btn:active { transform: translateY(0.5px); }
.sx-btn.pri { border-color: var(--teal-deep); color: var(--teal); }
.sx-btn.pri:hover { border-color: var(--teal); }
.sx-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--fg-dim); }
.sx-btn.ghost:hover { background: var(--bg-sub); color: var(--fg-mute); }
.sx-btn.lg { height: 26px; padding: 0 12px; font-size: 11.5px; }
.sx-btn.full { width: 100%; }
.sx-btn[disabled] { color: var(--fg-faint); border-color: var(--line-soft); cursor: not-allowed; }
.sx-btn .k { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); border: 1px solid var(--line); border-radius: 2px; padding: 0 3px; }

/* square flat audition button */
.sx-play {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--r-1);
  border: 1px solid var(--line); background: var(--btn-grad); color: var(--fg-mute);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--inset-panel);
}
.sx-play:hover { color: var(--fg-strong); background: var(--btn-grad-h); }
.sx-play.on { border-color: var(--teal-deep); color: var(--teal); background: var(--bg-deep); }

/* THE action — Select. A flat toggle rectangle, teal only when it means something. */
.sx-selbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 20px; padding: 0 7px; flex-shrink: 0; min-width: 56px;
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--btn-grad); color: var(--fg-mute); box-shadow: var(--inset-panel);
  cursor: pointer; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
}
.sx-selbtn:hover { color: var(--fg-strong); background: var(--btn-grad-h); }
.sx-selbtn.on { border-color: var(--teal-deep); background: var(--teal-bg); color: var(--teal); box-shadow: none; }

/* waveform — the one place saturation lives */
.sx-wave { display: flex; align-items: center; gap: 1px; overflow: hidden; }
.sx-wave i { flex: 1; min-width: 1px; }

/* confidence — quiet grey bar + mono number */
.sx-conf { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.sx-conf .b { width: 22px; height: 3px; background: var(--bg-deep); overflow: hidden; }
.sx-conf .b i { display: block; height: 100%; background: var(--fg-mute); }
.sx-conf .n { font-family: var(--mono); font-size: 8.5px; color: var(--fg-dim); width: 15px; text-align: right; }

/* UCS chip — compact identity */
.sx-ucs { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); min-width: 0; }
.sx-ucs .b { display: inline-flex; align-items: center; height: 12px; padding: 0 3px; border-radius: 2px;
  background: var(--bg-sub); border: 1px solid var(--line); color: var(--fg-mute); font-size: 7px; font-weight: 700; letter-spacing: .12em; flex-shrink: 0; }
.sx-ucs .c { color: var(--fg); font-size: 8.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; flex-shrink: 0; }
.sx-ucs .s { color: var(--fg-dim); font-size: 8.5px; flex-shrink: 0; }
.sx-ucs .u { color: var(--fg-mute); font-size: 8.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SS namespaced lane badge */
.sx-sst { display: inline-flex; align-items: center; gap: 4px; height: 15px; padding: 0 4px 0 2px; border-radius: 2px;
  border: 1px dashed var(--line-strong); background: var(--bg-deep); font-family: var(--mono); flex-shrink: 0; }
.sx-sst .ss { font-size: 6.5px; font-weight: 700; letter-spacing: .1em; color: var(--fg); background: var(--bg-sub); border-radius: 1px; padding: 1px 3px; }
.sx-sst .n { font-size: 8px; letter-spacing: .08em; color: var(--fg-mute); }
.sx-sst.live { border-style: solid; border-color: var(--teal-deep); }
.sx-sst.live .n { color: var(--teal); }

/* 3-state coverage — open → selected → laid */
.sx-cov { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; flex-shrink: 0; }
.sx-cov .d { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sx-cov.open { color: var(--fg-dim); } .sx-cov.open .d { border: 1px solid var(--fg-dim); }
.sx-cov.selected { color: var(--teal); } .sx-cov.selected .d { background: var(--teal); }
.sx-cov.laid { color: var(--st-resolved); } .sx-cov.laid .d { background: var(--st-resolved); }

/* local-first line */
.sx-local { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-top: 1px solid var(--line-soft); flex-shrink: 0; }
.sx-local svg { color: var(--fg-dim); flex-shrink: 0; }
.sx-local .t { font-family: var(--mono); font-size: 8px; letter-spacing: .05em; color: var(--fg-dim); }
.sx-local .t b { color: var(--fg-mute); font-weight: 500; }

/* ═══ pool row — a suggestion or a library hit. A LIST ROW, not a card. ═══ */
.sx-row {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px;
  border-bottom: 1px solid var(--line-soft); position: relative;
}
.sx-row:hover { background: var(--bg-row-hover); }
.sx-row.issel { background: var(--bg-row-sel); }
.sx-row.issel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--teal); }
.sx-row .nm { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10px; color: var(--fg-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-row .cid { font-family: var(--mono); font-size: 8.5px; color: var(--fg-mute); letter-spacing: .04em; width: 62px; flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-row .rt { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); width: 78px; flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-row .dur { font-family: var(--mono); font-size: 8.5px; color: var(--fg-dim); width: 28px; text-align: right; flex-shrink: 0; }
.sx-row .wv { width: 64px; flex-shrink: 0; }
.sx-row .top { font-family: var(--mono); font-size: 7px; letter-spacing: .16em; color: var(--fg-dim);
  border: 1px solid var(--line); border-radius: 2px; padding: 1px 3px; flex-shrink: 0; }

/* favorite distinction in the pool — pinned at top, teal edge + star */
.sx-row.fav { background: linear-gradient(90deg, rgba(53,197,199,.05), transparent 60%); }
.sx-row.fav::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--teal-deep); }
.sx-row.fav.issel::before { background: var(--teal); }
.sx-row .favmk { flex-shrink: 0; color: var(--teal); display: inline-flex; }

/* unlinked row — saved as favorite/recommendation but not linked to a connected library */
.sx-row.unlinked { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.012) 6px 7px); }
.sx-row.unlinked .nm { color: var(--fg-mute); }
.sx-row.unlinked .favmk { color: var(--fg-dim); }
.sx-row.unlinked .sx-play[disabled] { color: var(--fg-faint); border-color: var(--line-soft); cursor: not-allowed; }
.sx-unlink { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-family: var(--mono); font-size: 7px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cue-amber); border: 1px dashed var(--cue-amber);
  border-radius: 2px; padding: 1px 4px; opacity: .85; }
.sx-unlink svg { flex-shrink: 0; }

/* group label rows inside the pool list */
.sx-grp { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; background: var(--bg-panel);
  border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 1; }
.sx-grp .l { font-family: var(--mono); font-size: 7.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); }
.sx-grp.fav { background: var(--bg-deep); }
.sx-grp.fav svg { color: var(--teal); flex-shrink: 0; }
.sx-grp.fav .l { color: var(--teal); }
.sx-grp .canon { font-family: var(--mono); font-size: 7.5px; color: var(--fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.sx-grp .n { font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); }
.sx-grp .sp { flex: 1; }
.sx-grp .g { border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; font-family: var(--ui); font-size: 9.5px; padding: 0 2px; white-space: nowrap; }
.sx-grp .g:hover { color: var(--teal); text-decoration: underline; }

/* spotted / unspotted status pill on selected rows */
.sx-spotst { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-family: var(--mono);
  font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.sx-spotst .d { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sx-spotst.spotted { color: var(--st-resolved); } .sx-spotst.spotted .d { background: var(--st-resolved); }
.sx-spotst.unspotted { color: var(--cue-amber); } .sx-spotst.unspotted .d { border: 1px solid var(--cue-amber); }

/* ═══ SELECTED region — pinned, never moves ═══════════════════════════ */
.sx-selected { flex-shrink: 0; background: var(--bg-deep); border-bottom: 2px solid var(--line-strong); }
.sx-selected-h { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-bottom: 1px solid var(--line-soft); }
.sx-selected-h .cnt { font-family: var(--mono); font-size: 8.5px; color: var(--fg-dim); }
.sx-selected-h .cnt b { color: var(--teal); font-weight: 500; }
.sx-selected-h .sp { flex: 1; }
.sx-selected-h .pin { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 7.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.sx-selected-h .pin svg { color: var(--fg-faint); }

.sx-selrow { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-bottom: 1px solid var(--line-soft); position: relative; }
.sx-selrow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--teal); }
.sx-selrow.layer::before { opacity: .35; }
.sx-selrow .role { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; color: var(--teal); width: 44px; flex-shrink: 0; }
.sx-selrow.layer .role { color: var(--fg-mute); }
.sx-selrow .nm { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10px; color: var(--fg-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-selrow .dur { font-family: var(--mono); font-size: 8.5px; color: var(--fg-dim); flex-shrink: 0; }
.sx-selrow .auto { font-family: var(--mono); font-size: 7px; letter-spacing: .12em; color: var(--fg-mute);
  border: 1px solid var(--line); border-radius: 2px; padding: 1px 4px; flex-shrink: 0; }
.sx-laid { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-family: var(--mono); font-size: 8px;
  letter-spacing: .1em; color: var(--st-resolved); }
.sx-rm { width: 18px; height: 18px; flex-shrink: 0; border: 0; background: transparent; color: var(--fg-dim);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-1); }
.sx-rm:hover { color: var(--st-danger); background: var(--bg-sub); }

.sx-selected-empty { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.sx-selected-empty .t { font-size: 10.5px; color: var(--fg-dim); line-height: 1.45; }
.sx-selected-empty .t b { color: var(--fg-mute); font-weight: 500; }
.sx-selected-empty svg { color: var(--fg-faint); flex-shrink: 0; }

.sx-addlayer { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; margin: 6px 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-1); background: transparent; color: var(--fg-dim);
  cursor: pointer; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.sx-addlayer:hover { border-color: var(--teal-deep); color: var(--teal); }
.sx-layerhint { margin: 6px 10px; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: var(--teal); }

/* ═══ recurring-cue card — "You selected this before" ═════════════════ */
.sx-prior { border: 1px solid var(--line-strong); background: var(--bg-panel); position: relative; }
.sx-prior::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--teal); }
.sx-prior-h { display: flex; align-items: center; gap: 7px; padding: 7px 10px 5px; }
.sx-prior-h svg { color: var(--teal); flex-shrink: 0; }
.sx-prior-h .t { font-size: 11px; color: var(--fg-strong); font-weight: 500; letter-spacing: .04em; }
.sx-prior-h .canon { margin-left: auto; font-family: var(--mono); font-size: 7px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-mute); border: 1px solid var(--line); border-radius: 2px; padding: 1px 4px; }
.sx-prior-pick { display: flex; align-items: center; gap: 8px; padding: 3px 10px 7px; }
.sx-prior-pick .nm { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10px; color: var(--fg-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-prior-pick .mt { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); flex-shrink: 0; }
.sx-prior-pick .wv { width: 60px; flex-shrink: 0; }
.sx-prior-acts { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.sx-prior-acts .sx-btn.pri { flex: 1; min-width: 96px; }

/* favorite row inside the card — several per canonical cue */
.sx-fav { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-top: 1px solid var(--line-soft); }
.sx-fav:hover { background: var(--bg-row-hover); }
.sx-fav.on { background: var(--bg-row-sel); }
.sx-fav .nm { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10px; color: var(--fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-fav .mt { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); flex-shrink: 0; }
.sx-fav .wv { width: 54px; flex-shrink: 0; }

/* ═══ the panel: PRIOR · SELECTED · POOL ══════════════════════════════ */
.sx-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg-app); }
.sx-panel-head { flex-shrink: 0; padding: 7px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; background: var(--bg-panel); }
.sx-panel-head .r1 { display: flex; align-items: center; gap: 8px; }
.sx-panel-head .r1 .sx-tc { font-size: 10px; }
.sx-panel-head .r1 .sp { flex: 1; }
.sx-panel-head .tx { font-size: 11px; color: var(--fg-mute); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-panel-prior { flex-shrink: 0; padding: 7px 8px 0; }

.sx-pool { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sx-pool-search { flex-shrink: 0; display: flex; align-items: center; gap: 6px; height: 26px; margin: 7px 8px 0; padding: 0 8px;
  border-radius: var(--r-1); background: var(--bg-deep); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.sx-pool-search:focus-within { border-color: var(--teal-deep); }
.sx-pool-search svg { color: var(--fg-dim); flex-shrink: 0; }
.sx-pool-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--fg); font-family: var(--ui); font-size: 11.5px; }
.sx-pool-search input::placeholder { color: var(--fg-dim); }
.sx-pool-search .clr { border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; display: inline-flex; padding: 2px; }
.sx-pool-search .clr:hover { color: var(--fg); }

.sx-pool-h { flex-shrink: 0; display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; margin-top: 2px; }
.sx-pool-h .cnt { font-family: var(--mono); font-size: 8.5px; color: var(--fg-dim); }
.sx-pool-h .sp { flex: 1; }
.sx-pool-h .brain { font-family: var(--ui); font-size: 9.5px; color: var(--fg-dim); }
.sx-pool-h .back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--ui); font-size: 10px; color: var(--teal); padding: 0; }
.sx-pool-h .back:hover { text-decoration: underline; }

.sx-hijack { display: flex; align-items: center; gap: 6px; margin: 0 8px 3px; padding: 4px 8px;
  border: 1px solid var(--line); border-left: 2px solid var(--teal); background: var(--bg-panel);
  font-family: var(--mono); font-size: 8px; letter-spacing: .03em; color: var(--fg-mute); line-height: 1.4; }
.sx-hijack svg { flex-shrink: 0; color: var(--teal); }

.sx-pool-list { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; border-top: 1px solid var(--line-soft); }
.sx-pool-list::-webkit-scrollbar { width: 7px; }
.sx-pool-list::-webkit-scrollbar-thumb { background: var(--line-strong); }
.sx-pool-none { padding: 18px; text-align: center; font-size: 11px; color: var(--fg-dim); }

/* no-category empty */
.sx-nocat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.sx-nocat .mk { width: 34px; height: 34px; border: 1px dashed var(--line-strong); border-radius: var(--r-1);
  display: inline-flex; align-items: center; justify-content: center; color: var(--fg-dim); }
.sx-nocat .t1 { font-size: 11.5px; color: var(--fg-mute); }
.sx-nocat .t2 { font-size: 10.5px; color: var(--fg-dim); line-height: 1.5; max-width: 210px; }

/* ═══ SSPT window shell ═══════════════════════════════════════════════ */
.sx-win { display: flex; flex-direction: column; position: relative; flex-shrink: 0;
  background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--r-2); overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.42); font-family: var(--ui); color: var(--fg); user-select: none; }
.sx-win:focus { outline: none; border-color: var(--line-strong); }

.sx-title { flex-shrink: 0; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 8px;
  background: var(--bg-panel); border-bottom: 1px solid var(--line); }
.sx-mk { width: 17px; height: 17px; border-radius: 2px; flex-shrink: 0; background: var(--bg-deep); border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 7px; font-weight: 700; color: var(--fg-strong); }
.sx-proj { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; border: 1px solid transparent;
  border-radius: var(--r-1); background: transparent; cursor: pointer; font-family: var(--ui); font-size: 11.5px; color: var(--fg-strong); min-width: 0; }
.sx-proj:hover { background: var(--bg-sub); border-color: var(--line); }
.sx-proj .rr { font-family: var(--mono); font-size: 8.5px; color: var(--fg-dim); letter-spacing: .08em; }
.sx-proj .chev { color: var(--fg-dim); display: inline-flex; }

.sx-match { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 6px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--r-1); background: var(--bg-deep);
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); }
.sx-match .d { width: 6px; height: 6px; border-radius: 50%; background: var(--st-resolved); }
.sx-match.bad { border-color: rgba(180,104,104,.5); color: var(--st-danger); }
.sx-match.bad .d { background: var(--st-danger); }

.sx-sp { flex: 1; }

.sx-seg { display: inline-flex; height: 20px; border: 1px solid var(--line); border-radius: var(--r-1); overflow: hidden; background: var(--bg-deep); flex-shrink: 0; }
.sx-seg button { border: 0; background: transparent; cursor: pointer; padding: 0 7px; color: var(--fg-dim);
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.sx-seg button + button { border-left: 1px solid var(--line); }
.sx-seg button:hover { color: var(--fg-mute); }
.sx-seg button.on { background: var(--bg-sub); color: var(--fg-strong); }

.sx-pt { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; flex-shrink: 0;
  border: 1px solid var(--teal-deep); border-radius: var(--r-1); background: transparent; color: var(--teal); cursor: pointer;
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; }
.sx-pt .d { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.sx-pt.off { border-color: var(--line); color: var(--fg-dim); }
.sx-pt.off .d { background: var(--fg-dim); }

.sx-ic { width: 22px; height: 22px; border-radius: var(--r-1); border: 1px solid transparent; background: transparent;
  color: var(--fg-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sx-ic:hover { background: var(--bg-sub); color: var(--fg); }

/* nav row */
.sx-nav { flex-shrink: 0; height: 28px; display: flex; align-items: stretch; gap: 2px; padding: 0 6px;
  background: var(--bg-app); border-bottom: 1px solid var(--line); }
.sx-tab { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; height: 28px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
  color: var(--fg-mute); font-family: var(--ui); font-size: 11px; }
.sx-tab:hover { color: var(--fg); }
.sx-tab.on { color: var(--fg-strong); border-bottom-color: var(--teal); }
.sx-tab .cnt { font-family: var(--mono); font-size: 8.5px; color: var(--fg-dim); }
.sx-navsp { flex: 1; }
.sx-navchip { align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px;
  border: 1px solid var(--line); border-radius: var(--r-1); background: var(--bg-panel); cursor: pointer;
  color: var(--fg-mute); font-family: var(--ui); font-size: 10px; flex-shrink: 0; }
.sx-navchip:hover { border-color: var(--line-strong); color: var(--fg); }
.sx-navchip .st { width: 5px; height: 5px; border-radius: 50%; background: var(--st-resolved); }
.sx-navchip .st.scan { background: var(--teal); }

/* body reflow */
.sx-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.sx-body.h { flex-direction: row; }
.sx-body.v { flex-direction: column; }

/* cue column */
.sx-cues { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sx-body.h .sx-cues { flex: 1; border-right: 1px solid var(--line); }
.sx-body.v .sx-cues { flex: 1 1 auto; min-height: 0; border-bottom: 1px solid var(--line); }
.sx-body.h .sx-panel { width: 336px; flex-shrink: 0; }
.sx-body.v .sx-panel { flex-shrink: 0; max-height: 60%; }

.sx-filter { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-bottom: 1px solid var(--line-soft); }
.sx-search { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-1);
  background: var(--bg-deep); border: 1px solid var(--line); flex: 1; min-width: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.sx-search:focus-within { border-color: var(--teal-deep); }
.sx-search svg { color: var(--fg-dim); flex-shrink: 0; }
.sx-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--fg); font-family: var(--ui); font-size: 11.5px; }
.sx-search input::placeholder { color: var(--fg-dim); }

.sx-list { flex: 1; overflow-y: auto; min-height: 0; }
.sx-list::-webkit-scrollbar { width: 7px; }
.sx-list::-webkit-scrollbar-thumb { background: var(--line-strong); }

/* cue row — dense, hairline-separated, rail carries the category color */
.sx-cue { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  padding: 5px 8px 5px 11px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.sx-cue:hover { background: var(--bg-row-hover); }
.sx-cue.sel { background: var(--bg-row-sel); }
.sx-cue .rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: .8; }
.sx-cue.sel .rail { opacity: 1; }
.sx-cue .cmain { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-cue .crow1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sx-cue .ctc { font-family: var(--mono); font-size: 9.5px; color: var(--tc-green); letter-spacing: .02em; flex-shrink: 0; }
.sx-cue .ctxt { font-size: 11.5px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sx-cue .crow2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sx-cue .cright { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.sx-cue .ncand { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); }
.sx-raw { display: inline-flex; align-items: center; gap: 4px; font-family: var(--ui); font-size: 9.5px; color: var(--fg-dim); }
.sx-raw .rd { width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--fg-faint); }

/* narrow SSPT h-panel (336px): drop the catid + waveform columns so the row's
   fixed content always fits — the Select button must never clip. */
.sx-body.h .sx-panel .sx-row .cid,
.sx-body.h .sx-panel .sx-row .wv { display: none; }
.sx-body.h .sx-panel .sx-row .rt { width: 64px; }
.sx-body.h .sx-panel .sx-prior-acts { gap: 5px; }
.sx-body.h .sx-panel .sx-prior-acts .sx-btn { padding: 0 7px; font-size: 10.5px; }
.sx-body.h .sx-panel .sx-prior-acts .sx-btn.pri { min-width: 76px; }

/* spot strip (SSPT only — the PT actions live here) */
.sx-spot { flex-shrink: 0; padding: 7px 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; background: var(--bg-panel); }
.sx-spot-row { display: flex; align-items: center; gap: 6px; }
.sx-spot-note { font-family: var(--mono); font-size: 8px; letter-spacing: .04em; color: var(--fg-dim); display: flex; align-items: center; gap: 5px; }
.sx-spot-note b { color: var(--fg-mute); font-weight: 500; }

/* ═══ focused-sound waveform pane (DH #491 port 2026-07-06) ═══ */
.sx-wavepane { flex-shrink: 0; background: var(--bg-deep); border-top: 1px solid var(--line-strong); padding: 7px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.sx-wavepane.empty { align-items: center; justify-content: center; padding: 16px; }
.sx-wavepane.empty .t { font-size: 10.5px; color: var(--fg-dim); }
.sx-wavepane-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sx-wavepane-h .role { font-family: var(--mono); font-size: 7px; letter-spacing: .16em; color: var(--fg-dim); flex-shrink: 0; }
.sx-wavepane-h .nm { font-family: var(--mono); font-size: 10px; color: var(--fg-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-wavepane-h .cid { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); flex-shrink: 0; }
.sx-wavepane-h .sp { flex: 1; }
.sx-wpplay { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 9px; flex-shrink: 0; border: 1px solid var(--teal-deep); border-radius: var(--r-1); background: var(--bg-deep); color: var(--teal); cursor: pointer; font-family: var(--ui); font-size: 10.5px; }
.sx-wpplay:hover { background: rgba(53,197,199,.08); }
.sx-wpplay.on { background: rgba(53,197,199,.13); }
.sx-wpws { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; flex-shrink: 0; border: 1px dashed var(--line-strong); border-radius: var(--r-1); background: transparent; color: var(--fg-mute); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.sx-wpws svg { color: var(--fg-dim); flex-shrink: 0; }
.sx-wavepane-wave { position: relative; height: 56px; display: flex; align-items: center; gap: 1px; background: var(--bg-app); border: 1px solid var(--line); border-radius: var(--r-1); padding: 0 2px; overflow: hidden; cursor: crosshair; box-shadow: var(--inset-panel); }
.sx-wavepane.dense .sx-wavepane-wave { height: 44px; }
.sx-wavepane-wave i { flex: 1; min-width: 1px; align-self: center; }
.sx-wavepane-wave .deadmk { position: absolute; top: 0; bottom: 0; left: 0; border-right: 1px dashed var(--line-strong); background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.02) 4px 5px); pointer-events: none; display: flex; align-items: flex-end; }
.sx-wavepane-wave .deadmk .l { font-family: var(--mono); font-size: 6.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); padding: 0 0 2px 3px; }
.sx-wavepane-wave .ph { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--teal); box-shadow: 0 0 0 1px rgba(53,197,199,.2); pointer-events: none; }
.sx-wavepane-wave .ph::before { content: ''; position: absolute; top: -1px; left: -2px; width: 5px; height: 5px; background: var(--teal); }
.sx-wavepane-wave .ph.live { background: var(--wave-played); box-shadow: 0 0 0 1px rgba(169,224,223,.25); }
.sx-wp-noidx { flex: 1; text-align: center; align-self: center; font-family: var(--mono); font-size: 8.5px; color: var(--fg-dim); padding: 0 8px; }
.sx-wavepane-f { display: flex; align-items: center; gap: 5px; }
.sx-wavepane-f .tc { font-family: var(--mono); font-size: 9px; color: var(--tc-green); }
.sx-wavepane-f .sep, .sx-wavepane-f .tot { font-family: var(--mono); font-size: 9px; color: var(--fg-dim); }
.sx-wavepane-f .sp { flex: 1; }
.sx-wavepane-f .hint { font-family: var(--ui); font-size: 9px; color: var(--fg-dim); }
.sx-wavepane-f .hint b { color: var(--fg-mute); font-weight: 500; }
.sx-row.focused { background: var(--bg-row-hover); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sx-row.focused .sx-play { border-color: var(--teal-deep); color: var(--teal); }
.sx-selrow.focused { box-shadow: inset 0 0 0 1px var(--line-strong); }
.sx-selrow { cursor: pointer; }
.sx-wave-hero { flex-shrink: 0; }
.sx-wave-hero .sx-wavepane-wave { height: 60px; }
.sx-body.h .sx-panel .sx-wavepane-h .cid { display: none; }

/* DH #492 waveform region-select */
.sx-wavepane-wave .regmk { position: absolute; top: 0; bottom: 0; background: rgba(53,197,199,.16); border-left: 1px solid var(--teal); border-right: 1px solid var(--teal); pointer-events: none; }
.sx-wavepane-wave .regmk.sel { background: rgba(53,197,199,.24); }
.sx-region { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; color: var(--teal); border: 1px solid var(--teal-deep); border-radius: 2px; padding: 1px 5px; }
.sx-region b { color: var(--teal); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sx-region .rx { border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; font-size: 11px; line-height: 1; padding: 0 0 0 2px; }
.sx-region .rx:hover { color: var(--st-danger); }