:root{
  --bg:#0a0b0f;--panel:#0e1015;--card:#14161e;--elev:#181b25;
  --bdr:#1e2130;--bhi:#2a2f44;
  --blue:#3d9bff;--orange:#ff7a35;--green:#00e589;
  --purple:#aa88ff;--red:#ff4466;--yellow:#ffd84a;
  --text:#e6e8ee;--dim:#8a91a1;--mute:#5a6172;
  --mono:'JetBrains Mono','SF Mono','Fira Code',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--mono);
  font-size:12px;font-variant-numeric:tabular-nums;overflow:hidden;
  background-image:linear-gradient(rgba(0,212,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,212,255,.05) 1px,transparent 1px);background-size:48px 48px}

/* TOPBAR */
.tb{height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;
  background:linear-gradient(180deg,#11141c,#0a0b0f);border-bottom:1px solid var(--bdr);
  position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:8px}
.bmark{color:var(--orange);font-size:16px;letter-spacing:-2px;text-shadow:0 0 6px rgba(255,122,53,.5)}
.bname{font-weight:700;letter-spacing:.18em}
.bver{color:var(--mute);font-size:10px;padding:2px 6px;border:1px solid var(--bhi);border-radius:3px}
/* suite hub link — subtle, sits after the version chip */
.sulink{color:var(--mute);font-size:10px;letter-spacing:.12em;text-decoration:none;
  padding:2px 6px;border-radius:3px;transition:color .2s,background .2s}
.sulink:hover{color:var(--text);background:var(--bhi);text-decoration:none}
.sp{flex:1}
.led{font-size:13px;color:var(--mute);transition:color .2s}
.led.live{color:var(--green);text-shadow:0 0 8px var(--green);animation:pulse 1.4s infinite}
.led.err{color:var(--red);text-shadow:0 0 8px var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.stxt{font-size:10px;color:var(--dim);letter-spacing:.14em;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dvd{width:1px;height:22px;background:var(--bhi);margin:0 3px}
/* ── CONDUCTOR BRIDGE status pill ───────────────────────────────────────────
   Grey/dim while no conductor is broadcasting; green with a slow pulse on the
   diamond once hello heartbeats are arriving. Text becomes "EXT <n>" where n is
   the advertised source count. */
.extpill{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;
  border:1px solid var(--bdr);border-radius:9px;background:var(--elev);
  font-size:8px;letter-spacing:.16em;color:var(--mute);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.extpill:hover{color:var(--text);border-color:var(--text)}
.extpill .extpill-d{font-size:9px;line-height:1}
.extpill.live{color:var(--green);border-color:rgba(0,229,137,.45);
  background:rgba(0,229,137,.08)}
.extpill.live .extpill-d{animation:pulse 1.4s infinite;
  text-shadow:0 0 8px var(--green)}
.fps{font-size:10px;color:var(--mute);min-width:52px;text-align:right}

/* BUTTONS */
.btn{appearance:none;background:var(--card);color:var(--text);font:inherit;font-size:10px;
  letter-spacing:.14em;padding:6px 10px;border:1px solid var(--bhi);border-radius:4px;
  cursor:pointer;transition:background .1s,border-color .1s;user-select:none}
.btn:hover{background:var(--elev);border-color:#3a405a}
.btn:active{transform:translateY(1px)}
.btn.on{color:var(--blue);border-color:var(--blue);box-shadow:0 0 8px rgba(61,155,255,.3) inset}
.btn.prim{color:var(--blue);border-color:var(--blue);background:linear-gradient(180deg,#1c2440,#131829)}
.ibtn{display:flex;align-items:center;gap:6px}
.ithumb{width:22px;height:22px;border-radius:3px;background:var(--elev);border:1px solid var(--bdr);
  overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;color:var(--mute)}
.ithumb img{width:100%;height:100%;object-fit:cover;display:block}
.ibtn.loaded{border-color:var(--blue);color:var(--blue)}

/* LAYOUT */
.layout{display:grid;grid-template-columns:1fr 110px;height:calc(100vh - 44px);gap:10px;padding:12px}
.stage{position:relative;background:#050608;border:1px solid var(--bdr);border-radius:6px;
  overflow:hidden;display:flex;align-items:center;justify-content:center}
#cv{width:100%;height:100%;display:block}

/* OVERLAY — fixed so it always sits above floating panels (z > 250) */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,11,15,.88);backdrop-filter:blur(4px);z-index:300;transition:opacity .25s}
.overlay.gone{opacity:0;pointer-events:none}
/* VISUALS card — FIXED outer size. Tab switches must never change these
   dimensions, so width/height are hard-set (not max-*) and the tab body is the
   only thing that scrolls. */
.ocard{text-align:center;padding:18px 22px;border:1px dashed var(--bhi);border-radius:8px;
  background:rgba(20,22,30,.92);
  width:min(860px,calc(100vw - 28px));
  height:min(78vh,660px);
  max-width:none;max-height:calc(100vh - 60px);
  box-sizing:border-box;
  display:flex;flex-direction:column;gap:6px;overflow:hidden}
/* Header + tab strip never flex — they keep their natural height. */
.ocard>.ocard-drag-handle,.ocard>.otabs{flex:0 0 auto}
.oicon{font-size:36px;color:var(--blue);margin-bottom:10px;text-shadow:0 0 20px rgba(61,155,255,.6)}
.otitle{font-size:13px;letter-spacing:.22em;margin-bottom:6px}
.ohint{font-size:10px;color:var(--dim);margin-bottom:14px;letter-spacing:.1em}
.oactions{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.oor{font-size:9px;color:var(--mute);letter-spacing:.18em;
  display:flex;align-items:center;gap:8px;margin-bottom:10px}
.oor::before,.oor::after{content:'';flex:1;height:1px;background:var(--bhi)}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stile{aspect-ratio:1;border-radius:4px;overflow:hidden;cursor:pointer;border:1px solid var(--bhi);
  background:var(--card);position:relative;transition:border-color .12s,transform .08s}
.stile:hover{border-color:var(--blue);transform:scale(1.05)}
.stile img{width:100%;height:100%;object-fit:cover;display:block}
.stile .sl{position:absolute;bottom:0;left:0;right:0;font-size:8px;letter-spacing:.12em;
  padding:3px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);text-align:center}
.sempty{font-size:10px;color:var(--mute);padding:14px;border:1px dashed var(--bdr);
  border-radius:4px;grid-column:1/-1}

/* OVERLAY TABS — grouped into 3D / IMAGES / UPLOAD sections */
.otabs{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:8px;
  border-bottom:1px solid var(--bhi);padding-bottom:6px}
.otabgrp{display:flex;flex-direction:column;gap:3px;min-width:0}
.otabgrp-lbl{font-size:7px;letter-spacing:.34em;color:var(--mute);text-transform:uppercase;
  padding-left:3px;line-height:1;
  background:linear-gradient(90deg,var(--orange),var(--purple));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:.85}
.otabgrp-row{display:flex;gap:2px;flex-wrap:wrap}
.otabgrp-sep{width:1px;align-self:stretch;margin-top:9px;
  background:linear-gradient(180deg,transparent,var(--bhi) 30%,var(--bhi) 70%,transparent)}
.otab{appearance:none;background:transparent;border:1px solid transparent;color:var(--mute);
  font:inherit;font-size:10px;letter-spacing:.14em;padding:5px 12px;border-radius:4px;
  cursor:pointer;transition:color .1s,border-color .1s,background .1s}
.otab:hover{color:var(--text);background:var(--elev)}
.otab.active{color:var(--blue);border-color:var(--blue);background:rgba(61,155,255,.08)}
.otabgrp:focus-within .otabgrp-lbl,
.otabgrp:hover .otabgrp-lbl{opacity:1}
/* The ONE scroll region. It fills whatever height the fixed-size card leaves
   over, so switching tabs cannot resize the card. Content is top-aligned and
   never stretched — sparse tabs (UPLOAD, 3D) simply leave empty space below. */
.otab-body{flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  align-content:start;align-self:stretch;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:var(--bhi) transparent}
.otab-body::-webkit-scrollbar{width:4px}
.otab-body::-webkit-scrollbar-thumb{background:var(--bhi);border-radius:2px}
.otab-body::-webkit-scrollbar-track{background:transparent}
/* Sparse tabs (UPLOAD / 3D / VARIANTS): normal block flow so their content sits
   at the TOP of the fixed-height scroll region instead of stretching to fill. */
#tab-upload,#tab-3d,#tab-variants{display:block}

/* Keyframe scene grid (larger tiles than samples) */
.skgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sktile{border-radius:5px;overflow:hidden;cursor:pointer;border:1px solid var(--bhi);
  background:var(--card);position:relative;transition:border-color .12s,transform .08s}
.sktile:hover{border-color:var(--blue);transform:scale(1.03)}
.sktile img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.sktile .skl{padding:4px 6px;font-size:8px;letter-spacing:.12em;color:var(--dim);
  display:flex;justify-content:space-between;align-items:center}
.sktile .skmap{font-size:7px;color:var(--orange);letter-spacing:.1em}
.sktile.active-kf{border-color:var(--green);box-shadow:0 0 8px rgba(0,229,137,.2)}

/* STAGE FLASH */
.sflash{position:absolute;inset:0;z-index:15;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(61,155,255,.1);border:2px solid var(--blue);border-radius:6px;
  opacity:0;transition:opacity .1s}
.sflash.on{opacity:1}
.sflash-icon{font-size:32px;color:var(--blue);text-shadow:0 0 16px rgba(61,155,255,.8)}
.sflash-lbl{font-size:12px;letter-spacing:.22em}

/* SWAP BAR */
.swapbar{position:absolute;bottom:0;left:0;right:0;z-index:10;
  background:linear-gradient(0deg,rgba(8,10,18,.92),transparent);
  padding:18px 12px 10px;display:flex;align-items:center;gap:10px;
  opacity:0;transition:opacity .25s}
.stage:hover .swapbar,.swapbar:focus-within{opacity:1}
.sbthumb{width:48px;height:36px;object-fit:cover;border-radius:3px;border:1px solid var(--bhi);flex-shrink:0}
.sbinfo{flex:1;min-width:0}
.sbname{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbhint{font-size:9px;color:var(--mute);margin-top:2px;letter-spacing:.1em}
.rstrip{display:flex;gap:5px}
.rtile{width:40px;height:30px;border-radius:3px;overflow:hidden;cursor:pointer;
  border:1px solid var(--bhi);flex-shrink:0;transition:border-color .1s}
.rtile:hover{border-color:var(--blue)}
.rtile img{width:100%;height:100%;object-fit:cover;display:block}

/* RIGHT COL */
.rc{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding-right:2px}
.rc::-webkit-scrollbar{width:6px}
.rc::-webkit-scrollbar-thumb{background:var(--bhi);border-radius:3px}

/* PANELS */
.panel{background:var(--panel);border:1px solid var(--bdr);border-radius:6px;overflow:hidden}
.pbar{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:linear-gradient(180deg,#181b25,#11141c);border-bottom:1px solid var(--bdr);
  font-size:10px;letter-spacing:.18em;cursor:pointer;user-select:none}
.pbar.nc{cursor:default}
.picon{color:var(--blue)}
.ptitle{color:var(--text);font-weight:600}
.ptog{margin-left:auto;color:var(--mute);font-size:10px}
.pbody{padding:12px;display:flex;flex-direction:column;gap:9px}
.pbody.shut{display:none}

/* SLIDERS */
.kv{display:grid;grid-template-columns:86px 1fr 40px;gap:6px;align-items:center}
.kv label{font-size:9px;color:var(--dim);letter-spacing:.16em}
.kv .ro{font-size:10px;text-align:right}
input[type=range]{-webkit-appearance:none;width:100%;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--text);border:2px solid var(--blue);
  box-shadow:0 0 6px rgba(61,155,255,.6);cursor:pointer}

/* AUDIO */
.srcrow{display:flex;gap:6px}
.srcrow .btn{flex:1}
.srcst{font-size:10px;color:var(--dim);min-height:16px}

/* LIVE INPUT INDICATOR — scope + signal pill */
.sigrow{display:flex;align-items:center;gap:8px;padding:4px 0}
#sigScope{width:160px;height:28px;flex-shrink:0;border:1px solid var(--bdr);border-radius:3px;
  background:var(--card);display:block}
.sigpill{font-size:8px;letter-spacing:.16em;padding:3px 7px;border-radius:10px;
  border:1px solid var(--bhi);color:var(--mute);white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s}
.sigpill.ok{color:var(--green);border-color:var(--green);background:rgba(0,229,137,.08);
  box-shadow:0 0 8px rgba(0,229,137,.25)}
.sigpill.err{color:var(--red);border-color:var(--red);background:rgba(255,68,102,.08);
  box-shadow:0 0 8px rgba(255,68,102,.25);animation:sigblink 1.4s ease-in-out infinite}
.sigpill.idle{color:var(--mute);border-color:var(--bhi);background:transparent}
@keyframes sigblink{0%,100%{opacity:1}50%{opacity:.5}}
.sigwarn{font-size:9px;line-height:1.45;letter-spacing:.05em;color:var(--red);
  border:1px solid var(--red);border-left-width:3px;border-radius:3px;
  background:rgba(255,68,102,.08);padding:6px 8px;margin:2px 0 4px}

/* PERFORMANCE MODE */
.btn.perfbtn{color:var(--purple);border-color:var(--purple)}
.btn.perfbtn:hover{background:rgba(170,136,255,.12);border-color:var(--purple);
  box-shadow:0 0 8px rgba(170,136,255,.35)}
/* With the header + launch strip hidden, the stage takes the whole viewport. */
body.perform-mode .layout{grid-template-columns:1fr;height:100vh;padding:0;gap:0}
body.perform-mode .stage{border-radius:0;border-color:transparent}
#monitorBtn{font-size:10px;padding:5px 10px}
#monitorBtn.on{color:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(0,229,137,.25) inset}
#monitorBtn.off{color:var(--red);border-color:var(--red);opacity:.8}
.deck{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--card);
  border-radius:4px;border:1px solid var(--bdr)}
.dhdr{display:flex;justify-content:space-between;font-size:10px;align-items:center}
.dtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.dtime{color:var(--mute)}
.drow{display:flex;gap:4px}
.drow .btn{font-size:9px;padding:4px 8px}
.drow .btn:first-child{flex:1}
.dlist{list-style:none;max-height:90px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.dlist li{display:flex;gap:6px;align-items:center;padding:3px 6px;background:var(--elev);
  border-radius:3px;cursor:pointer;font-size:10px;border:1px solid transparent}
.dlist li:hover{border-color:var(--bhi)}
.dlist li.cur{color:var(--orange);border-color:var(--orange)}
.dlist .dn{color:var(--mute);min-width:16px;text-align:right}
.dlist .dt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
audio{width:100%;height:32px}

/* METERS */
.meters{display:flex;flex-direction:column;gap:4px}
.meter{display:grid;grid-template-columns:32px 1fr 36px;gap:6px;align-items:center}
.mlbl{font-size:9px;color:var(--dim);letter-spacing:.16em}
.mval{font-size:9px;text-align:right}
.mbar{height:10px;background:var(--card);border:1px solid var(--bhi);border-radius:2px;overflow:hidden;position:relative}
.mbar::after{content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,transparent 0,transparent 6px,rgba(0,0,0,.5) 6px,rgba(0,0,0,.5) 7px);
  pointer-events:none}
.mfill{height:100%;width:0%;background:linear-gradient(90deg,var(--green) 0%,var(--green) 60%,var(--yellow) 78%,var(--red) 100%);
  transition:width .04s linear;box-shadow:0 0 8px rgba(0,229,137,.4)}
.beat-row{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--dim)}
.blbl{color:var(--mute);margin-left:auto;font-size:9px}

/* FX */
.fxrack{display:flex;flex-direction:column;gap:5px}
.fxrow{display:grid;grid-template-columns:20px 70px 1fr 36px 20px 18px;gap:5px;align-items:center;
  padding:4px 6px;background:var(--card);border:1px solid var(--bdr);border-radius:4px;
  transition:border-color .15s}
.fxrow.bnd{border-color:var(--orange);box-shadow:0 0 8px rgba(255,122,53,.15) inset}
.fxrow.manual{border-color:var(--purple);box-shadow:0 0 8px rgba(170,136,255,.18) inset}
.fx-rst{appearance:none;background:transparent;border:1px solid transparent;
  color:var(--mute);width:18px;height:18px;border-radius:3px;cursor:pointer;
  font-size:9px;font-family:var(--mono);line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;transition:color .1s,border-color .1s}
.fx-rst:hover{color:var(--orange);border-color:var(--orange)}
.tgl{width:18px;height:10px;background:#2a2f44;border-radius:5px;position:relative;cursor:pointer;transition:background .12s}
.tgl::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--mute);top:1px;left:1px;transition:left .1s,background .1s}
.tgl.on{background:var(--blue)}
.tgl.on::after{left:9px;background:#fff;box-shadow:0 0 5px rgba(255,255,255,.5)}
.fxname{font-size:10px;letter-spacing:.12em}

/* MAPPING */
.madd{display:grid;grid-template-columns:1fr 14px 1fr 54px;gap:5px;align-items:center}
.arrow{text-align:center;color:var(--dim)}
select{appearance:none;background:var(--card);color:var(--text);border:1px solid var(--bhi);
  border-radius:3px;padding:4px 6px;font:inherit;font-size:10px;width:100%}
/* deprecated rule kept harmless for cascade — real one is below */
.mlist{display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.mcard{padding:6px 8px;background:var(--card);border:1px solid var(--bdr);
  border-radius:4px;font-size:10px;position:relative;display:grid;grid-template-columns:1fr auto;gap:4px}
.mcard.ghost{opacity:.4;font-style:italic}
.mcard .sensrow{grid-column:1/-1;display:grid;grid-template-columns:38px 1fr 30px;gap:5px;align-items:center;margin-top:2px}
.mcard .sensrow label{font-size:8px;color:var(--mute);letter-spacing:.14em}
.mcard .sensrow .sro{font-size:9px;text-align:right;color:var(--dim)}
.fadespd{font-size:9px;color:var(--mute);letter-spacing:.12em;min-width:80px;text-align:right}
.fadespd span{color:var(--orange)}
.arrow-hint{font-size:9px;color:var(--mute);letter-spacing:.12em;padding:3px 0}
.arrow-hint kbd{background:var(--elev);border:1px solid var(--bhi);border-radius:3px;padding:1px 5px;
  font-family:var(--mono);font-size:9px;color:var(--blue)}
.msrc{color:var(--blue)}.mtgt{color:var(--orange)}.mcurve{color:var(--mute);font-size:9px}
.mbar{grid-column:1/-1;height:4px;background:var(--elev);border-radius:2px;overflow:hidden;margin-top:3px}
.mfill{height:100%;background:linear-gradient(90deg,var(--blue),var(--orange));width:0%;transition:width .04s}
.bx{background:transparent;border:1px solid var(--bhi);color:var(--mute);font-size:10px;
  padding:2px 6px;border-radius:3px;cursor:pointer;font-family:var(--mono)}
.bx:hover{color:var(--red);border-color:var(--red)}
.psetbar{display:flex;gap:4px;align-items:center;padding:6px 8px;
  background:var(--card);border:1px solid var(--bdr);border-radius:4px}
.psetbar label{font-size:9px;color:var(--dim);white-space:nowrap;letter-spacing:.14em}
.psetbar select{flex:1}
.psetbar .btn{font-size:9px;padding:4px 8px;white-space:nowrap}

/* REC — IDLE must look clearly idle; only .recording is red/pulsing. */
.rbtn{display:flex;align-items:center;gap:5px;color:var(--dim);border-color:var(--bhi);
  background:transparent;transition:color .12s,border-color .12s,background .12s}
.rbtn:hover:not(:disabled){color:var(--red);border-color:var(--red)}
.rbtn:disabled{opacity:.45;cursor:default}
.rdot{width:8px;height:8px;border-radius:50%;background:var(--bhi);
  box-shadow:none;transition:background .12s,box-shadow .12s}
.rbtn:hover:not(:disabled) .rdot{background:var(--red);box-shadow:0 0 6px var(--red)}
/* ACTIVE state — applied ONLY while MediaRecorder.state === 'recording' */
.rbtn.recording{color:var(--red);border-color:var(--red);background:rgba(255,68,102,.12);
  box-shadow:0 0 10px rgba(255,68,102,.28)}
.rbtn.recording .rdot{background:var(--red);box-shadow:0 0 6px var(--red);animation:pulse .9s infinite}
.rtime{font-size:10px;color:var(--red);min-width:44px}
/* Elapsed-time readout: dim when idle, red + pulsing while actually recording */
#recTime{color:var(--mute);letter-spacing:.1em;white-space:nowrap;transition:color .12s}
#recTime.rec-live{color:var(--red);animation:pulse .9s infinite}

/* TOASTS */
.thost{position:fixed;bottom:14px;right:14px;display:flex;flex-direction:column;gap:5px;z-index:999}
.toast{background:var(--panel);border:1px solid var(--bhi);border-radius:4px;padding:8px 12px;
  font-size:11px;max-width:340px;box-shadow:0 6px 24px rgba(0,0,0,.5);animation:tin .2s ease-out}
.toast.ok{border-color:var(--green);color:var(--green)}
.toast.err{border-color:var(--red);color:var(--red)}
.toast.info{border-color:var(--blue);color:var(--blue)}
@keyframes tin{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

/* ABOUT */
.mbg{position:fixed;inset:0;z-index:500;background:rgba(5,6,10,.8);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:5vh 4vw;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .18s}
.mbg.open{opacity:1;pointer-events:auto}
.mcard{width:100%;max-width:820px;background:var(--panel);border:1px solid var(--bhi);
  border-radius:8px;padding:22px 24px 16px;box-shadow:0 24px 80px rgba(0,0,0,.7)}
.mhdr{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--bdr)}
.mtitle{font-size:15px;font-weight:700;letter-spacing:.2em}
.mcls{appearance:none;background:transparent;border:1px solid var(--bhi);color:var(--mute);
  width:28px;height:28px;border-radius:4px;cursor:pointer;font-size:13px;font-family:var(--mono)}
.mcls:hover{color:var(--red);border-color:var(--red)}
.as h2{font-size:12px;letter-spacing:.2em;color:var(--blue);margin:14px 0 6px;
  padding-bottom:4px;border-bottom:1px solid var(--bdr)}
.as p,.as li{font-size:11px;color:var(--dim);margin:4px 0;line-height:1.55}
.as ul{padding-left:16px;margin:4px 0}
.as li{list-style:none}
.as li::before{content:'▸ ';color:var(--orange)}
.as code{background:var(--card);padding:1px 4px;border-radius:3px;color:var(--purple);font-size:10px}
.fxdocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:7px;margin-top:6px}
.fxdoc{background:var(--card);border:1px solid var(--bdr);border-radius:4px;padding:8px 10px}
.fxdn{font-size:11px;font-weight:700;margin-bottom:3px}
.fxdd{font-size:10px;color:var(--dim)}
.fxdt{font-size:9px;color:var(--mute);margin-top:4px}

/* ── ABOUT › UNDER THE HOOD (tech spec) ── */
.tech{margin:16px 0 2px;border:1px solid var(--bhi);border-radius:6px;
  background:linear-gradient(180deg,#12141d,#0d0f16);overflow:hidden}
.tech[open]{border-color:#39406090;box-shadow:0 0 0 1px rgba(61,155,255,.08) inset}
.tech-sum{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;
  padding:9px 12px;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--blue);
  background:linear-gradient(90deg,rgba(61,155,255,.07),transparent 65%);transition:color .12s,background .12s}
.tech-sum::-webkit-details-marker{display:none}
.tech-sum:hover{color:#7dbcff;background:linear-gradient(90deg,rgba(61,155,255,.14),transparent 70%)}
.tech-arw{color:var(--orange);font-size:10px;display:inline-block;transition:transform .18s ease}
.tech[open] .tech-arw{transform:rotate(90deg)}
.tech-hint{margin-left:auto;font-size:8px;letter-spacing:.24em;color:var(--mute);font-weight:400;
  border:1px solid var(--bdr);border-radius:3px;padding:2px 6px}
.tech-body{padding:4px 12px 12px;border-top:1px solid var(--bdr)}
.tspec{display:grid;grid-template-columns:112px 1fr;gap:0;margin:0}
.tspec dt{font-size:9px;letter-spacing:.18em;color:var(--orange);padding:8px 10px 8px 0;
  border-bottom:1px dotted #1c2030;white-space:nowrap}
.tspec dd{font-size:10.5px;line-height:1.6;color:var(--dim);margin:0;padding:8px 0;
  border-bottom:1px dotted #1c2030}
.tspec dt:last-of-type,.tspec dd:last-of-type{border-bottom:none}
.tspec dd b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.tspec dd a{color:var(--purple);text-decoration:none;border-bottom:1px dashed rgba(170,136,255,.45);
  transition:color .12s,border-color .12s}
.tspec dd a:hover{color:var(--green);border-bottom-color:var(--green)}
.tspec dd a::after{content:'↗';font-size:8px;margin-left:2px;opacity:.6;vertical-align:super}
.tchip{display:inline-block;font-size:8px;letter-spacing:.16em;color:var(--green);
  border:1px solid rgba(0,229,137,.35);border-radius:3px;padding:1px 5px;margin:0 3px 2px 0;
  background:rgba(0,229,137,.06)}
@media(max-width:620px){.tspec{grid-template-columns:1fr}
  .tspec dt{padding-bottom:2px;border-bottom:none}
  .tspec dd{padding-top:2px}}

@media(max-width:800px){.layout{grid-template-columns:1fr}.rc{max-height:45vh}}

/* ── FLOATING PANELS ── */
.fpanel{
  position:fixed;
  z-index:200;
  background:rgba(14,16,21,0.96);
  border:1px solid var(--bhi);
  border-radius:6px;
  box-shadow:0 16px 48px rgba(0,0,0,.7),0 0 0 1px rgba(61,155,255,.06);
  display:flex;flex-direction:column;
  min-width:260px;
  max-width:92vw;
  overflow:hidden;
  backdrop-filter:blur(14px);
  /* no transition on transform/position — must feel instant while dragging */
}
.fpanel.fp-top{z-index:250;}
.fpanel.minimised>.fpanel-body{display:none}
.fpanel.minimised>.fpanel-resize{display:none}
.fpanel-bar{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:linear-gradient(180deg,#1a1e2a,#11141c);
  border-bottom:1px solid var(--bdr);
  font-size:10px;letter-spacing:.18em;
  cursor:grab;user-select:none;flex-shrink:0;
  -webkit-user-select:none;
}
.fpanel-bar.dragging{cursor:grabbing}
.fpanel.minimised .fpanel-bar{border-bottom:none;border-radius:6px}
.fpanel-icon{color:var(--blue);font-size:12px}
.fpanel-title{color:var(--text);font-weight:600;letter-spacing:.16em}
.fpanel-sp{flex:1}
.fpanel-btn{
  appearance:none;background:transparent;border:1px solid transparent;
  color:var(--mute);width:22px;height:22px;border-radius:3px;
  cursor:pointer;font-size:12px;font-family:var(--mono);line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:color .1s,border-color .1s,background .1s;
  padding:0;
}
.fpanel-btn:hover{color:var(--text);border-color:var(--bhi);background:var(--elev)}
.fpanel-btn.cls:hover{color:var(--red);border-color:var(--red)}
.fpanel-body{
  overflow-y:auto;overflow-x:hidden;
  padding:10px 12px 12px;
  display:flex;flex-direction:column;gap:9px;
  /* height is set dynamically via JS */
}
.fpanel-body::-webkit-scrollbar{width:5px}
.fpanel-body::-webkit-scrollbar-thumb{background:var(--bhi);border-radius:3px}
.fpanel-resize{
  position:absolute;bottom:0;right:0;
  width:18px;height:18px;cursor:se-resize;z-index:10;
  /* SE corner grip lines */
  background:
    linear-gradient(135deg,transparent 40%,var(--bhi) 40%,var(--bhi) 46%,transparent 46%),
    linear-gradient(135deg,transparent 55%,var(--bhi) 55%,var(--bhi) 61%,transparent 61%),
    linear-gradient(135deg,transparent 70%,var(--bhi) 70%,var(--bhi) 76%,transparent 76%);
}

/* right-column launch strip */
.rc{
  display:flex;flex-direction:column;gap:5px;
  padding:6px 4px;overflow-y:auto;width:100%;
}
.panel-launch{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:var(--panel);border:1px solid var(--bdr);border-radius:5px;
  font-size:10px;letter-spacing:.14em;cursor:pointer;user-select:none;
  transition:border-color .12s,background .12s,color .12s;white-space:nowrap;
}
.panel-launch:hover{border-color:var(--blue);background:var(--elev);color:var(--blue)}
.panel-launch.open{border-color:var(--blue);color:var(--blue);
  background:rgba(61,155,255,.07);}
.panel-launch .pi{color:var(--blue);width:14px;text-align:center;flex-shrink:0}

/* per-effect reset button */
.fx-reset{
  appearance:none;background:transparent;border:1px solid var(--bdr);
  color:var(--mute);width:18px;height:18px;border-radius:3px;
  cursor:pointer;font-size:10px;font-family:var(--mono);line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  padding:0;transition:color .1s,border-color .1s;
}
.fx-reset:hover{color:var(--orange);border-color:var(--orange)}
.fx-reset:active{color:var(--red)}

/* crossfade overlay canvas — opacity animated by JS */
#xfCanvas{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;}

/* ── OVERLAYS layer ────────────────────────────────────────────────────────── */
/* Above #cv (auto) and #xfCanvas (3); below .swapbar (10) and .fpanel (200+).
   Stays visible in perform mode — it IS the show. Never receives pointer events. */
#overlayFxCanvas{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:4;display:block}

/* OVERLAYS panel rows */
.ovrack{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.ovrow{display:grid;grid-template-columns:20px 84px 56px 1fr 32px;gap:5px;align-items:center;
  padding:4px 6px;background:var(--card);border:1px solid var(--bdr);border-radius:4px;
  transition:border-color .15s,box-shadow .15s}
.ovrow.on{border-color:var(--green);box-shadow:0 0 8px rgba(0,229,137,.14) inset}
.ovname{font-size:10px;letter-spacing:.1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovrow.on .ovname{color:var(--green)}
.ovvar{appearance:none;background:var(--elev);border:1px solid var(--bhi);border-radius:3px;
  color:var(--dim);font-family:var(--mono);font-size:8px;letter-spacing:.08em;
  padding:2px 3px;cursor:pointer;text-align:center;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .1s,border-color .1s}
.ovvar:hover{color:var(--orange);border-color:var(--orange)}
.ovrow.on .ovvar{color:var(--orange);border-color:rgba(255,122,53,.5)}
.ovrow .ro{font-size:9px;color:var(--mute);text-align:right}
.ovrow.on .ro{color:var(--green)}

/* Recent strip: slot number badge */
.rtile{position:relative}
.rtile-num{position:absolute;top:1px;left:2px;font-size:7px;color:var(--blue);
  background:rgba(0,0,0,.7);padding:0 2px;border-radius:2px;line-height:1.4}

/* FX row key hint */
.fxkey{font-size:8px;color:var(--mute);letter-spacing:.08em;margin-left:3px}
.fxrow.bnd .fxkey{color:var(--orange)}

/* Mapping list: grows to fill the panel as it resizes */
/* mapping list: takes all remaining vertical space inside the section */
/* align-content:start keeps rows at their natural height. Without it the grid's
   default stretch inflates each row to fill spare vertical space, which showed
   up as giant gappy rows in the taller detached BINDINGS panel. */
/* SINGLE-SCROLL POLICY: the bindings list grows to fit its cards; the panel's
   .fpanel-body is the only scroll container. Previously this scrolled on its
   own, which stacked a scrollbar inside the panel's scrollbar. */
#mlist.mlist{flex:1 1 auto;min-height:60px;overflow:visible;display:grid;grid-template-columns:1fr;gap:4px;align-content:start}
/* H11: 2-column bindings list when panel is wide (msection-grow provides the container) */
.msection.msection-grow{container-type:inline-size}
@container (min-width:460px){#mlist.mlist{grid-template-columns:1fr 1fr}}

/* MAPPING PANEL SECTIONS — collapsible */
.msection{display:flex;flex-direction:column;background:var(--elev);border:1px solid var(--bdr);
  border-radius:4px;overflow:hidden;flex-shrink:0}
.msection.msection-grow{flex:1 1 auto;min-height:120px}
.msection-hdr{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--card);
  cursor:pointer;user-select:none;font-size:9px;letter-spacing:.18em;
  border-bottom:1px solid var(--bdr);transition:background .12s}
.msection-hdr:hover{background:var(--bhi)}
.msection-hdr.static{cursor:default}
.msection-hdr.static:hover{background:var(--card)}
.ms-chev{font-size:8px;color:var(--blue);transition:transform .15s}
.msection.collapsed .ms-chev{transform:rotate(-90deg)}
.msection.collapsed .msection-body{display:none}
.ms-title{color:var(--text);font-weight:600;flex-shrink:0}
.ms-meta{flex:1;text-align:right;font-size:8px;color:var(--mute);letter-spacing:.12em}
/* SINGLE-SCROLL POLICY: section bodies size to their content and never scroll.
   The panel's own .fpanel-body is the one scroll container for the section
   stack, so the user never sees a scrollbar nested inside another scrollbar
   (and never two side by side, as the wizard columns used to produce). */
.msection-body{padding:6px;display:flex;flex-direction:column;gap:5px;overflow:visible;max-height:none}
.msection.msection-grow > .msection-body{flex:1 1 auto;max-height:none}
.msection.msection-grow > .mlist{margin:5px;padding:0}

/* ── DETACHABLE ACTIVE BINDINGS ──────────────────────────────────────────── */
/* ⧉ button in the ACTIVE BINDINGS header — pops #mlist into #p-bindings. */
.ms-detach{
  appearance:none;background:transparent;border:1px solid transparent;
  color:var(--mute);width:18px;height:18px;border-radius:3px;flex-shrink:0;
  cursor:pointer;font-size:11px;font-family:var(--mono);line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:color .12s,border-color .12s,background .12s;
}
.ms-detach:hover{ color:var(--blue);border-color:var(--blue);background:var(--elev) }

/* Slim placeholder shown in the MAP panel while the list lives elsewhere. */
.mlist-detached-ph{
  margin:5px;padding:8px 10px;border:1px dashed var(--bhi);border-radius:4px;
  background:rgba(61,155,255,.04);color:var(--dim);
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-align:center;
  cursor:pointer;user-select:none;flex-shrink:0;
  transition:border-color .12s,color .12s,background .12s;
}
.mlist-detached-ph:hover{
  border-color:var(--blue);color:var(--blue);background:rgba(61,155,255,.09);
}
.mlist-detached-ph[hidden]{ display:none }
/* When detached the MAP section must not fight for the leftover space. */
#msection-bindings.detached{ flex:0 0 auto;min-height:0 }

/* Host inside #p-bindings — same container-query behaviour as the MAP slot,
   so the 2-column bindings grid still kicks in when the panel is wide. */
#msection-bindings-host{ container-type:inline-size;min-height:80px }
.mlist-host{ display:flex;flex-direction:column;flex:1 1 auto;min-height:0 }
#p-bindings .fpanel-body{ padding:6px 8px 10px }
#p-bindings #mlist.mlist{ margin:0 }

/* Active preset card highlight (when its preset is currently loaded) */
.preset-card.active-preset{
  border-color:var(--green) !important;
  box-shadow:0 0 0 1px var(--green), 0 0 12px rgba(0,229,137,.35);
  background:linear-gradient(180deg, rgba(0,229,137,.08), var(--card));
}
.preset-card.active-preset .pcname{color:var(--green)}

/* Bottom-dock panel (DECK) */
.fpanel-bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  border-radius:6px 6px 0 0;border-bottom:none;
  width:100% !important;
}
.fpanel-bottom .fpanel-body{flex-direction:row;overflow:hidden}

/* FX key hint bar in panel header */
.fx-hint-row{font-size:8px;color:var(--mute);letter-spacing:.1em;
  padding:3px 0 5px;border-bottom:1px solid var(--bdr);margin-bottom:2px}

/* Preset hotkey hint in mapping panel */
.preset-hint{font-size:8px;color:var(--mute);letter-spacing:.1em;
  padding:2px 0 4px;border-bottom:1px solid var(--bdr)}

/* Active/on state for fpanel-btn */
.fpanel-btn.on{color:var(--green);border-color:var(--green);border:1px solid}

/* ── SCENES / COMBOS ─────────────────────────────────────────────────────────
   A combo recalls scene + binding set + FX slide + overlays in one click.
   Cards are compact so the section adds ~2 rows to the MAP panel and never
   needs a scroll region of its own (single-scroll policy). */
.combogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:4px}
.combo-card{
  background:var(--card);border:1px solid var(--bdr);border-radius:4px;
  padding:5px 6px;cursor:pointer;position:relative;
  transition:border-color .12s,background .12s,box-shadow .12s;
}
.combo-card:hover{ border-color:var(--purple);background:var(--elev);
  box-shadow:0 0 8px rgba(170,136,255,.18) }
.combo-card.user-combo{ border-color:rgba(255,122,53,.45) }
.combo-card.active-combo{ border-color:var(--green);
  box-shadow:0 0 0 1px var(--green),0 0 10px rgba(0,229,137,.2) }
.cbname{ font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px }
.combo-card.active-combo .cbname{ color:var(--green) }
.cbmeta{ font-size:7px;color:var(--mute);letter-spacing:.06em;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.cbtag{ font-size:7px;color:var(--purple);letter-spacing:.14em;margin-top:2px }
.combo-card.user-combo .cbtag{ color:var(--orange) }
.cbdel{
  position:absolute;top:2px;right:2px;appearance:none;background:transparent;
  border:none;color:var(--mute);font-family:var(--mono);font-size:10px;
  line-height:1;padding:2px 3px;cursor:pointer;border-radius:2px;
}
.cbdel:hover{ color:var(--red);background:rgba(255,68,102,.12) }
.combobar{ display:flex;gap:5px;flex-wrap:wrap;margin-top:5px }
.combobar .btn{ font-size:9px;padding:4px 7px;letter-spacing:.1em;flex:1 1 auto;
  white-space:nowrap }
.btn.danger{ color:var(--red);border-color:rgba(255,68,102,.45) }
.btn.danger:hover{ background:rgba(255,68,102,.12);border-color:var(--red) }
.btn.danger.armed{ color:#12060a;background:var(--red);border-color:var(--red);
  font-weight:700 }

/* ── Preset grid (Task 1) ── */
#psetgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:5px;margin-bottom:6px}
.preset-card{background:var(--card);border:1px solid var(--bdr);border-radius:4px;
  padding:6px 8px;cursor:pointer;transition:border-color .1s}
.preset-card:hover{border-color:var(--blue)}
.preset-card.user-preset{border-color:var(--orange)}
.pcname{font-size:10px;font-weight:600;display:flex;align-items:center;gap:4px;margin-bottom:2px}
.pckey{font-size:8px;color:var(--blue);background:rgba(61,155,255,.15);
  padding:1px 4px;border-radius:2px;letter-spacing:.1em}
.pcmeta{font-size:8px;color:var(--mute);margin-bottom:4px}
.pccontrols{display:flex;gap:4px;align-items:center}
.pccontrols .btn{font-size:8px;padding:2px 5px}
.pctoggle{display:flex;align-items:center;gap:3px;font-size:8px;color:var(--dim);cursor:pointer}
.pctoggle input{accent-color:var(--orange);width:12px;height:12px}

/* ── Ghost fade bar (Task 2) ── */
.ghostbar{grid-column:1/-1;height:3px;background:var(--elev);border-radius:2px;overflow:hidden;margin-top:2px}
.ghostfill{height:100%;background:var(--orange);width:100%;transition:none;box-shadow:0 0 4px var(--orange)}

/* OVERLAY CLOSE BUTTON */
.obclose{appearance:none;background:transparent;border:1px solid var(--bhi);
  color:var(--mute);width:26px;height:26px;border-radius:4px;cursor:pointer;
  font-size:12px;font-family:var(--mono);transition:color .1s,border-color .1s}
.obclose:hover{color:var(--red);border-color:var(--red)}

/* UPLOAD ZONE */
.oupload-zone{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:24px 16px;border:1px dashed var(--bhi);border-radius:6px;margin:8px 0;
  transition:border-color .15s}
.oupload-zone:hover{border-color:var(--blue)}

/* ───── VARIANTS TAB ───── */
.variants-pane{display:flex;flex-direction:column;gap:10px;padding:8px}
.variants-header{display:flex;align-items:baseline;gap:8px;padding-bottom:6px;
  border-bottom:1px solid var(--bdr)}
.vh-label{font-size:8px;color:var(--mute);letter-spacing:.18em}
.vh-name{font-size:11px;color:var(--text);letter-spacing:.14em;font-weight:600}
.vh-meta{flex:1;text-align:right;font-size:8px;color:var(--mute);letter-spacing:.1em}

.variants-compass{
  display:grid;grid-template-columns:1fr 1.4fr 1fr;
  grid-template-rows:auto auto auto;gap:6px;
  align-items:center;justify-items:center;
  padding:6px;background:var(--card);border-radius:5px;
}
.vc-tile{
  position:relative;width:100%;aspect-ratio:16/9;
  border:2px solid;border-radius:4px;overflow:hidden;
  cursor:default;transition:transform .12s, box-shadow .12s;
}
.vc-tile:hover{transform:scale(1.04);box-shadow:0 0 12px rgba(255,255,255,.15)}
.vc-tile img{width:100%;height:100%;object-fit:cover;display:block}
.vc-tile-label{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;justify-content:space-between;
  padding:3px 6px;font-size:8px;letter-spacing:.14em;font-weight:600;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
}
.vc-tile-pct{color:var(--text);font-variant-numeric:tabular-nums}

.vc-centre{
  position:relative;width:100%;aspect-ratio:16/9;
  border:2px solid var(--green);border-radius:5px;overflow:hidden;
  box-shadow:0 0 16px rgba(0,229,137,.3);
}
.vc-centre img{width:100%;height:100%;object-fit:cover;display:block}
.vc-centre-label{
  position:absolute;bottom:0;left:0;right:0;
  padding:3px 6px;font-size:9px;letter-spacing:.14em;
  background:linear-gradient(0deg,rgba(0,229,137,.6),transparent);
  color:#000;font-weight:600;text-align:center;
}

.variants-sliders{display:flex;flex-direction:column;gap:4px}
.vs-row{
  display:grid;grid-template-columns:18px 60px 1fr 38px 50px;
  gap:6px;align-items:center;
  padding:5px 8px;background:var(--card);border:1px solid var(--bdr);border-radius:4px;
}
.vs-emoji{font-size:11px;text-align:center;color:var(--dim)}
.vs-label{font-size:9px;letter-spacing:.14em;font-weight:600}
.vs-slider{accent-color:var(--orange);height:3px}
.vs-val{font-size:9px;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.vs-use{font-size:8px;padding:3px 5px;letter-spacing:.1em}

.variants-audiobind{
  background:var(--card);border:1px solid var(--bdr);
  border-radius:4px;padding:8px;
}
.vab-title{font-size:8px;color:var(--blue);letter-spacing:.18em;
  margin-bottom:5px;font-weight:600}
.vab-row{display:flex;gap:5px;align-items:center;margin-bottom:5px}
.vab-row select{flex:1;font-size:9px}
.vab-row .btn{font-size:9px;padding:4px 8px;letter-spacing:.14em}
.vab-row .btn.on{color:var(--green);border-color:var(--green);
  box-shadow:0 0 8px rgba(0,229,137,.3)}
.vab-hint{font-size:8px;color:var(--mute);line-height:1.4;letter-spacing:.05em}

/* ── Threshold UI additions ── */
/* Binding card mbar wrapper — allows threshold line to overlay the fill */
.mbar-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  grid-column: 1 / -1;
}
.mbar-wrap .mbar {
  flex: 1;
  height: 8px;
  background: var(--card);
  border: 1px solid var(--bhi);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  cursor: crosshair;
}
.mbar-wrap .mfill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--blue);
  transition: width 60ms linear;
}
.mbar-wrap .mthresh {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--orange);
  cursor: ew-resize;
  box-shadow: 0 0 4px var(--orange);
  z-index: 2;
}
.thresh-val {
  font-size: 7px;
  color: var(--orange);
  letter-spacing: .1em;
  white-space: nowrap;
  min-width: 44px;
}

/* Meters mbar threshold line */
.mthresh-band {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--orange);
  cursor: ew-resize;
  box-shadow: 0 0 4px var(--orange);
  z-index: 2;
  transition: background .1s, box-shadow .1s;
}

/* Slideshow on/active button style (already had .on but reinforcing) */
#ss-shuffle.on, #ss-randxf.on {
  color: var(--green);
  border-color: var(--green);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.1 UI ERGONOMICS PASS
   Panel dragging, compact binding rows, guided binding builder, variants mix.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A) PANEL ERGONOMICS ─────────────────────────────────────────────────── */
/* While dragging/resizing, kill pointer events inside the body so the panel
   never "sticks" to a child element and the cursor can outrun the panel. */
.fpanel.fp-dragging, .fpanel.fp-resizing { user-select:none; }
.fpanel.fp-dragging .fpanel-body,
.fpanel.fp-resizing .fpanel-body { pointer-events:none; }
.fpanel.fp-dragging { box-shadow:0 24px 64px rgba(0,0,0,.85),0 0 0 1px var(--blue); }
.fpanel.fp-dragging .fpanel-bar { cursor:grabbing; }
/* Bigger, easier-to-hit grab surface + affordance dots on the left of the bar */
.fpanel-bar{ touch-action:none; }
.fpanel-bar::before{
  content:'⠿';
  color:var(--bhi);font-size:11px;line-height:1;
  margin-right:-2px;flex-shrink:0;opacity:.7;
}
.fpanel-bar:hover::before{ color:var(--blue);opacity:1 }
.fpanel-bottom .fpanel-bar::before{ display:none }
/* Collapsed panel: only the bar shows, and it reads as a pill */
.fpanel.minimised{ min-width:0;width:auto !important; }
.fpanel.minimised .fpanel-title{ opacity:.75 }
/* Resize grip: bigger hit area, brighter on hover */
.fpanel-resize{ width:22px;height:22px;touch-action:none; }
.fpanel-resize:hover{ filter:brightness(2.2) }
#p-map .fpanel-resize{ width:24px;height:24px }

/* ── A2) COMPACT BINDING ROWS ────────────────────────────────────────────── */
/* Compact mode is the DEFAULT: one line per binding. Click to expand. */
#mlist.mlist.mlist-compact{ grid-template-columns:1fr;gap:2px }
.mlist-compact .mcard{
  padding:0;background:var(--card);border:1px solid var(--bdr);border-radius:3px;
  display:block;position:relative;
}
.mcard .mrow{
  display:grid;
  grid-template-columns:16px minmax(96px,1fr) minmax(46px,1.1fr) 22px 22px;
  gap:5px;align-items:center;
  padding:4px 6px;font-size:10px;cursor:pointer;
  border-radius:3px;transition:background .12s;
}
.mcard .mrow:hover{ background:var(--elev) }
.mrow-exp{
  appearance:none;background:transparent;border:none;color:var(--mute);
  font-family:var(--mono);font-size:9px;line-height:1;cursor:pointer;padding:0;
  transition:transform .15s,color .12s;
}
.mrow-exp:hover{ color:var(--blue) }
.mcard.expanded .mrow-exp{ transform:rotate(90deg);color:var(--blue) }
.mrow-pair{
  display:flex;align-items:center;gap:4px;min-width:0;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.mrow-pair .msrc,.mrow-pair .mtgt{ overflow:hidden;text-overflow:ellipsis }
.mrow-ar{ color:var(--mute);font-size:8px;flex-shrink:0 }
/* Mini live value bar inside the row */
.mcard .mrow-bar{
  position:relative;display:block;height:8px;
  background:var(--elev);border:1px solid var(--bhi);border-radius:2px;
  overflow:hidden;cursor:ew-resize;touch-action:none;grid-column:auto;margin:0;
}
.mcard .mrow-bar .mfill{
  position:absolute;inset:0 auto 0 0;width:0;height:100%;
  background:var(--blue);transition:width 60ms linear;
}
.mcard .mrow-bar .mthresh{
  position:absolute;top:-1px;bottom:-1px;width:2px;
  background:var(--orange);box-shadow:0 0 4px var(--orange);z-index:2;
}
.mrow-mute,.mcard .bx{
  appearance:none;background:transparent;border:1px solid var(--bhi);
  color:var(--mute);border-radius:3px;cursor:pointer;
  font-family:var(--mono);font-size:9px;line-height:1;padding:2px 0;
  width:22px;text-align:center;transition:color .12s,border-color .12s;
}
.mrow-mute.on{ color:var(--green);border-color:rgba(0,229,137,.4) }
.mrow-mute:hover{ color:var(--text);border-color:var(--text) }
.mcard .bx:hover{ color:var(--red);border-color:var(--red) }
.mcard.muted{ opacity:.5 }
.mcard.muted .mrow-pair{ text-decoration:line-through }
/* Expanded detail block */
.mcard .mdetail{ display:none;padding:5px 8px 7px;border-top:1px solid var(--bdr);
  background:var(--elev);border-radius:0 0 3px 3px;
  flex-direction:column;gap:4px }
.mcard.expanded .mdetail{ display:flex }
/* When compact mode is OFF, every row shows its detail permanently */
#mlist.mlist:not(.mlist-compact) .mdetail{ display:flex }
#mlist.mlist:not(.mlist-compact) .mrow-exp{ visibility:hidden }
.mdrow{ display:grid;grid-template-columns:44px 1fr auto;gap:6px;align-items:center;font-size:9px }
.mdrow > label{ font-size:8px;color:var(--mute);letter-spacing:.14em }
.mdrow input[type=range]{ accent-color:var(--orange);height:3px;min-width:0 }
.mdrow select{ font-size:9px;padding:2px 4px }
.mdrow .sro{ font-size:9px;color:var(--dim);text-align:right;min-width:52px;
  font-variant-numeric:tabular-nums }
.mdrow .md-invert{ display:flex;align-items:center;gap:3px;font-size:8px;
  color:var(--mute);letter-spacing:.1em;cursor:pointer }
.mdrow .md-invert input{ accent-color:var(--blue);width:11px;height:11px }
.mdrow-thr .thresh-val{ min-width:52px;text-align:right }
/* RANGE row has two sliders */
.mdrow:has(.md-omin){ grid-template-columns:44px 1fr 1fr auto }
.mdrow-ids{ grid-template-columns:1fr auto 1fr;font-size:7px;color:var(--mute);
  letter-spacing:.06em;opacity:.7 }
.mdrow-ids span{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.mdrow-ids span:last-child{ text-align:right }
/* Newly-created binding flashes so you can see where it landed */
@keyframes mcardFlash{
  0%{ box-shadow:0 0 0 1px var(--green),0 0 16px rgba(0,229,137,.6);
      background:rgba(0,229,137,.14) }
  100%{ box-shadow:none;background:var(--card) }
}
.mcard.mcard-flash{ animation:mcardFlash 1.4s ease-out;border-color:var(--green) }

/* ── A3) COMPACT METERS ──────────────────────────────────────────────────── */
.meters.meters-compact{ gap:2px }
.meters.meters-compact .meter{ grid-template-columns:1fr;gap:0 }
.meters.meters-compact .mlbl,
.meters.meters-compact .mval,
.meters.meters-compact .adapt-btn{ display:none }
.meters.meters-compact .mbar{ height:5px;border-radius:1px }
.meters.meters-compact .mbar::after{ opacity:.4 }

/* ── B) BINDING SETS BAR ─────────────────────────────────────────────────── */
.bsetbar{
  display:flex;gap:5px;align-items:center;flex-wrap:wrap;
  padding:6px 8px;background:linear-gradient(180deg,#1b2030,var(--card));
  border:1px solid var(--bhi);border-radius:4px;flex-shrink:0;
}
.bset-lbl{
  font-size:8px;color:var(--blue);letter-spacing:.2em;font-weight:600;
  white-space:nowrap;
}
.bsetbar select{ flex:1 1 120px;min-width:100px;font-size:9px }
.bsetbar .btn{ font-size:9px;padding:4px 7px;white-space:nowrap;letter-spacing:.1em }
.bsetbar .bset-del{ color:var(--red);border-color:rgba(255,90,90,.4) }
.bsetbar .bset-del:disabled{ opacity:.3;cursor:default;color:var(--mute);
  border-color:var(--bhi) }

/* ── B2) GUIDED BINDING BUILDER ──────────────────────────────────────────── */
.bwiz{ display:flex;flex-direction:column;gap:4px;container-type:inline-size }

/* Stacked is the BASE (narrow) layout — the container query below promotes it
   to two side-by-side columns once the MAP panel is wide enough. */
.bwiz-cols{ display:flex;flex-direction:column;gap:4px;min-width:0 }
.bwiz-cols > .bwiz-step{ min-width:0 }

@container (min-width:380px){
  .bwiz-cols{
    flex-direction:row;align-items:stretch;gap:6px;
  }
  /* SOURCE ~40% · TARGET ~60% (the target side carries more groups + filter) */
  .bwiz-cols > .bwiz-col-src{ flex:0 1 40%;display:flex;flex-direction:column }
  .bwiz-cols > .bwiz-col-tgt{ flex:1 1 60%;display:flex;flex-direction:column }
  /* The ▼ hint rotates to point right, between the two columns */
  .bwiz-cols > .bwiz-arrow{
    display:flex;align-items:center;justify-content:center;flex:0 0 10px;
    transform:rotate(-90deg);
  }
  /* Columns size to content — NEITHER scrolls (single scroll = .fpanel-body) */
  .bwiz-cols > .bwiz-step > .bwiz-groups{ flex:0 0 auto }
}

/* JS fallback for browsers without container queries: .bwiz.bwiz-wide is
   toggled from app.js by a ResizeObserver on the wizard. */
.bwiz.bwiz-wide > .bwiz-cols{ flex-direction:row;align-items:stretch;gap:6px }
.bwiz.bwiz-wide > .bwiz-cols > .bwiz-col-src{ flex:0 1 40%;display:flex;flex-direction:column }
.bwiz.bwiz-wide > .bwiz-cols > .bwiz-col-tgt{ flex:1 1 60%;display:flex;flex-direction:column }
.bwiz.bwiz-wide > .bwiz-cols > .bwiz-arrow{
  display:flex;align-items:center;justify-content:center;flex:0 0 10px;
  transform:rotate(-90deg);
}
.bwiz.bwiz-wide > .bwiz-cols > .bwiz-step > .bwiz-groups{ flex:0 0 auto }

.bwiz-step{
  border:1px solid var(--bdr);border-radius:4px;background:var(--card);
  overflow:hidden;transition:border-color .15s,box-shadow .15s;
}
.bwiz-step.armed{ border-color:rgba(61,155,255,.45) }
.bwiz-step.done{ border-color:rgba(0,229,137,.4) }
.bwiz-hdr{
  display:flex;align-items:center;gap:6px;padding:4px 7px;
  background:var(--elev);border-bottom:1px solid var(--bdr);
  font-size:9px;letter-spacing:.16em;
}
.bwiz-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:var(--bhi);color:var(--text);font-size:8px;font-weight:700;
  letter-spacing:0;transition:background .15s,color .15s;
}
.bwiz-step.done .bwiz-num{ background:var(--green);color:#04120b }
.bwiz-step.armed:not(.done) .bwiz-num{ background:var(--blue);color:#04101e }
.bwiz-t{ color:var(--text);font-weight:600 }
.bwiz-sub{ color:var(--mute);font-size:8px;letter-spacing:.1em;flex:1 }
.bwiz-filter{
  background:var(--card);border:1px solid var(--bhi);color:var(--text);
  font-family:var(--mono);font-size:9px;padding:2px 6px;border-radius:3px;
  width:92px;flex-shrink:0;
}
.bwiz-filter:focus{ outline:none;border-color:var(--blue) }
/* SINGLE-SCROLL POLICY: .bwiz-groups NEVER scrolls. Height is content-driven;
   the enclosing .fpanel-body is the one and only scroll region in the panel.
   (Verified headlessly: scrollHeight === clientHeight on both columns.) */
.bwiz-groups{ display:flex;flex-direction:column;gap:5px;padding:6px 7px;
  max-height:none;overflow:visible }
.bwiz-ghdr{ display:flex;align-items:baseline;gap:6px }
.bwiz-gt{ font-size:8px;color:var(--blue);letter-spacing:.2em;font-weight:600;
  white-space:nowrap }
.bwiz-gh{ font-size:7px;color:var(--mute);letter-spacing:.1em;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.bwiz-chips{ display:flex;flex-wrap:wrap;gap:3px;margin-top:3px }

/* ── SOURCE: dense chip cloud ────────────────────────────────────────────────
   One wrapped flow. Group names ride INLINE as tiny tags rather than taking a
   whole row each, so all ~22 sources fit in ~5 wrapped lines with no scroll. */
.bwiz-cloud{ display:flex;flex-wrap:wrap;align-items:center;gap:3px;
  flex-direction:row;padding:6px 7px }
.bwiz-tag{
  font-size:7px;color:var(--blue);letter-spacing:.16em;font-weight:600;
  white-space:nowrap;opacity:.8;padding:0 3px 0 1px;
  border-left:2px solid rgba(61,155,255,.35);align-self:stretch;
  display:flex;align-items:center;
}
.bwiz-tag:not(:first-child){ margin-left:4px }
/* Compact chip variant used by the cloud — single line, no descriptor row */
.bwiz-cloud .bchip{ flex-direction:row;align-items:baseline;gap:4px;padding:2px 5px }
.bwiz-cloud .bchip .bchip-d{ font-size:6px;max-width:52px;opacity:.65 }

/* ── TARGET: accordion ───────────────────────────────────────────────────────
   Only ONE category body is rendered open at a time, keeping the visible list
   to roughly a dozen chips. No max-height, no overflow — hence no scrollbar. */
.bwiz-acc{ gap:2px }
.bwiz-accgrp{ border:1px solid var(--bdr);border-radius:3px;background:var(--panel);
  overflow:hidden }
.bwiz-accgrp.open{ border-color:rgba(61,155,255,.4) }
.bwiz-acchdr{
  display:flex;align-items:center;gap:6px;width:100%;cursor:pointer;
  appearance:none;background:var(--elev);border:none;border-radius:0;
  padding:3px 6px;font-family:var(--mono);text-align:left;
  transition:background .12s;
}
.bwiz-acchdr:hover{ background:#1d2230 }
.bwiz-accgrp.open > .bwiz-acchdr{ background:rgba(61,155,255,.09) }
.bwiz-accchev{ font-size:7px;color:var(--bhi);width:8px;flex-shrink:0;
  transition:transform .12s }
.bwiz-accgrp.open .bwiz-accchev{ transform:rotate(90deg);color:var(--blue) }
.bwiz-acct{ font-size:8px;color:var(--blue);letter-spacing:.18em;font-weight:600;
  white-space:nowrap }
.bwiz-acch{ font-size:7px;color:var(--mute);letter-spacing:.1em;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.bwiz-accn{ font-size:7px;color:var(--mute);flex-shrink:0;
  background:var(--card);border:1px solid var(--bdr);border-radius:6px;
  padding:0 4px;line-height:12px }
.bwiz-accgrp.open .bwiz-accn{ color:var(--blue);border-color:rgba(61,155,255,.4) }
.bwiz-accgrp.hassel .bwiz-accn{ color:var(--green);border-color:var(--green) }
.bwiz-accbody{ display:none;padding:4px 6px 5px }
.bwiz-accgrp.open > .bwiz-accbody{ display:block }
/* Flat search results mode — group chrome hidden, chips in one cloud */
.bwiz-acc.searching .bwiz-accgrp{ border-color:transparent;background:transparent }
.bwiz-acc.searching .bwiz-acchdr{ display:none }
.bwiz-acc.searching .bwiz-accbody{ display:block;padding:0 }
.bwiz-acc.searching .bwiz-accgrp.nohit{ display:none }
.bwiz-accnone{ font-size:8px;color:var(--mute);letter-spacing:.14em;padding:4px 2px }
.bchip{
  appearance:none;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:1px;
  padding:3px 6px;min-width:0;max-width:100%;
  background:var(--elev);border:1px solid var(--bdr);border-radius:3px;
  font-family:var(--mono);color:var(--text);
  transition:border-color .12s,background .12s,box-shadow .12s;
}
.bchip:hover{ border-color:var(--bhi);background:#1d2230 }
.bchip .bchip-l{ font-size:9px;letter-spacing:.12em;font-weight:600;
  white-space:nowrap }
.bchip .bchip-d{ font-size:7px;color:var(--mute);letter-spacing:.04em;
  max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.bchip-src .bchip-l{ color:var(--blue) }
.bchip-tgt .bchip-l{ color:var(--orange) }
.bchip.sel{
  border-color:var(--green);background:rgba(0,229,137,.1);
  box-shadow:0 0 0 1px var(--green),0 0 10px rgba(0,229,137,.25);
}
.bchip.sel .bchip-d{ color:var(--dim) }

/* ── CONDUCTOR BRIDGE chips (gesture / voice) ────────────────────────────────
   Violet-tinted so external sources are visually distinct from local audio.
   The OFFLINE hint chip is a <span>, not a <button> — inert by construction. */
.bwiz-tag-ext{ color:var(--purple,#b06cff);border-left-color:rgba(176,108,255,.45) }
.bwiz-tag-off{ color:var(--mute);border-left-color:var(--bdr);opacity:.55 }
.bchip-ext .bchip-l{ color:var(--purple,#b06cff) }
.bchip-ext{ border-color:rgba(176,108,255,.28) }
.bchip-ext:hover{ border-color:var(--purple,#b06cff);background:rgba(176,108,255,.08) }
.bchip-hint{
  cursor:default;opacity:.5;background:transparent;border-style:dashed;
  flex-direction:row;align-items:baseline;gap:4px;padding:2px 5px;
  display:flex;border:1px dashed var(--bdr);border-radius:3px;
  font-family:var(--mono);
}
.bchip-hint .bchip-l{ font-size:8px;color:var(--mute);letter-spacing:.12em }
.bchip-hint .bchip-d{ font-size:6px;color:var(--mute);max-width:none;opacity:.8 }
.bwiz-arrow{ text-align:center;font-size:8px;color:var(--bhi);line-height:1 }
.bwiz-confirm{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px 7px;background:var(--card);
  border:1px solid var(--bdr);border-radius:4px;
}
.bwiz-pv{ display:flex;align-items:center;gap:5px;flex:1;min-width:0;font-size:9px;
  letter-spacing:.12em }
.bwiz-pv-src,.bwiz-pv-tgt{ color:var(--mute);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap }
.bwiz-pv-src.set{ color:var(--blue);font-weight:600 }
.bwiz-pv-tgt.set{ color:var(--orange);font-weight:600 }
.bwiz-pv-ar{ color:var(--bhi);flex-shrink:0 }
.bwiz-confirm .btn{ font-size:9px;padding:4px 8px;letter-spacing:.12em }
.bwiz-confirm .btn:disabled{ opacity:.35;cursor:default }
#bwizReset{ width:26px;padding:4px 0;text-align:center }

/* ── C) VARIANTS DISPLAY ─────────────────────────────────────────────────── */
.variants-sec{
  border:1px solid var(--bdr);border-radius:5px;background:var(--elev);
  overflow:hidden;margin-bottom:8px;
}
.vsec-hdr{
  display:flex;align-items:center;gap:6px;padding:6px 9px;
  background:var(--card);cursor:pointer;user-select:none;
  font-size:9px;letter-spacing:.18em;border-bottom:1px solid var(--bdr);
  transition:background .12s;
}
.vsec-hdr:hover{ background:var(--bhi) }
.vsec-chev{ font-size:8px;color:var(--blue);transition:transform .15s }
.variants-sec.collapsed .vsec-chev{ transform:rotate(-90deg) }
.variants-sec.collapsed .vsec-body{ display:none }
.variants-sec.collapsed{ border-bottom:1px solid var(--bdr) }
.vsec-t{ color:var(--text);font-weight:600 }
.vsec-meta{ flex:1;text-align:right;font-size:8px;color:var(--mute);
  letter-spacing:.12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.vsec-body{ padding:8px }

/* Compass tiles become live gauges */
.vc-tile{ cursor:pointer }
.vc-tile-fill{
  position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(0deg,var(--vdir),transparent);
  opacity:.55;pointer-events:none;transition:height 70ms linear;
}
.vc-tile.vc-on{ box-shadow:0 0 10px -2px var(--vdir) }
.vc-tile.vc-dom{ box-shadow:0 0 0 1px var(--vdir),0 0 16px -2px var(--vdir) }
.vc-tile-dom{
  position:absolute;top:3px;left:3px;display:none;
  padding:1px 4px;border-radius:2px;
  background:var(--vdir);color:#05070c;
  font-size:6px;letter-spacing:.18em;font-weight:700;
}
.vc-tile.vc-dom .vc-tile-dom{ display:block }
.vc-tile img{ transition:filter .2s }
.vc-tile:not(.vc-on) img{ filter:grayscale(.55) brightness(.72) }

/* Stacked live-mix mini-bars */
.variants-mix{
  display:flex;flex-direction:column;gap:3px;
  padding:7px 8px;background:var(--card);
  border:1px solid var(--bdr);border-radius:4px;
}
.vmix-hdr{ display:flex;align-items:baseline;gap:8px;margin-bottom:2px }
.vmix-t{ font-size:8px;color:var(--blue);letter-spacing:.2em;font-weight:600 }
.vmix-note{ flex:1;text-align:right;font-size:7px;color:var(--mute);
  letter-spacing:.12em }
.vmix-note.vmix-multi{ color:var(--green) }
.vmix-row{ display:grid;grid-template-columns:64px 1fr 34px;gap:6px;
  align-items:center;opacity:.55;transition:opacity .15s }
.vmix-row.dom{ opacity:1 }
.vmix-l{ font-size:8px;letter-spacing:.12em;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.vmix-bar{ position:relative;display:block;height:6px;border-radius:2px;
  background:var(--elev);border:1px solid var(--bhi);overflow:hidden }
.vmix-fill{ position:absolute;inset:0 auto 0 0;width:0;height:100%;
  transition:width 70ms linear }
.vmix-v{ font-size:8px;color:var(--dim);text-align:right;
  font-variant-numeric:tabular-nums }
.vmix-row.dom .vmix-v{ color:var(--text) }

.vs-actions{ display:flex;align-items:center;gap:8px;margin-top:2px }
.vs-actions .btn{ font-size:8px;padding:3px 7px;letter-spacing:.12em }
.vs-actions-hint{ font-size:7px;color:var(--mute);letter-spacing:.1em;flex:1;
  text-align:right }

/* Binding rows are always block-flow now (the old 2-col grid card is gone) */
#mlist .mcard{
  display:block;padding:0;max-width:none;
  background:var(--card);border:1px solid var(--bdr);border-radius:3px;
}
#mlist .mcard.ghost{ opacity:.4;font-style:italic }
#mlist .mcard .ghostbar{ height:3px;background:var(--elev);overflow:hidden }
#mlist .mcard .ghostfill{ height:100%;width:100%;background:var(--orange);opacity:.6 }

/* ── Trigger mode (mapping binding editor) ─────────────────────────────────── */
.mtrig-badge{ color:var(--orange); font-size:10px; margin-right:2px;
  text-shadow:0 0 6px rgba(255,122,53,.6); flex:0 0 auto }
.mdrow-mode .md-mode-tgl{ font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  padding:3px 10px; background:var(--card); border:1px solid var(--bhi);
  border-radius:3px; color:var(--dim); cursor:pointer }
.mdrow-mode .md-mode-tgl.trig{ color:var(--orange); border-color:var(--orange);
  box-shadow:0 0 8px rgba(255,122,53,.35) }
.mdrow-mode .mode-hint{ font-size:8px; color:var(--mute); text-align:right }
.mdrow-trig.hide{ display:none }
.mdrow-trig .sro{ min-width:52px }
/* v3.2 detector rows (COOLDOWN / LOOKBACK / REL-THR / ATTACK). Those labels are
   wider than the 44px label column allows at the default .14em tracking, so
   tighten tracking on trigger rows only and ellipsise rather than let the text
   shove the slider out of the card. */
.mdrow-trig > label{ letter-spacing:.03em; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap }