/* ============================================================================
   MASTER-RACK.CSS — Step 5 "Master" as a single rack chassis
   ----------------------------------------------------------------------------
   A faithful port of the approved mockup (studio-master-design.html §04
   ".rack.m5"): brushed-metal chassis with corner screws, a nameplate with a
   power LED, a 4-node signal path, four hardware module strips, an output bay
   with a before/after likeness compare, a gate-lamp column, segmented LUFS /
   true-peak meters, and a transport.

   Purely additive — it never renames an id, never changes display of an
   element the JS drives, and never reorders the DOM in a way that changes
   behaviour. Every hook turnkey-ui.js reads is still present.
   ============================================================================ */

/* ---- chassis ------------------------------------------------------------- */
.rk-master{
  position:relative;
  padding:0 !important;
  border:1px solid #07090c !important;
  border-radius:16px;
  background:
    linear-gradient(180deg, #2b313c 0%, #22272f 8%, #1b1f27 46%, #15181e 82%, #12151a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 2px 0 rgba(255,255,255,.03),
    inset 0 -1px 0 rgba(0,0,0,.75),
    inset 1px 0 0 rgba(255,255,255,.025),
    inset -1px 0 0 rgba(0,0,0,.4),
    0 22px 50px -20px rgba(0,0,0,.9),
    0 3px 8px rgba(0,0,0,.55) !important;
  overflow:hidden;
}
/* corner screws */
.rk-master::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:16px; z-index:0;
  background:
    radial-gradient(circle at 13px 13px, #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 13px) 13px, #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px),
    radial-gradient(circle at 13px calc(100% - 13px), #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px);
  opacity:.85;
}
.rk-body{ position:relative; z-index:1; padding:16px 18px 18px; }

/* ---- nameplate ----------------------------------------------------------- */
.rk-nameplate{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:15px 18px 14px;
  border-bottom:1px solid rgba(0,0,0,.65);
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}
.rk-power{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.rk-power i{
  width:8px; height:8px; border-radius:50%;
  background:var(--rk-phos, #35ff9e);
  box-shadow:0 0 10px var(--rk-phos, #35ff9e), inset 0 0 3px #fff;
}
.rk-nm{
  font-size:15px; font-weight:750; letter-spacing:.01em; color:#e8ecf2; line-height:1.2;
}
.rk-nm small{
  display:block; margin-top:2px;
  font:700 10px/1.3 ui-monospace, Menlo, monospace; letter-spacing:.13em;
  text-transform:uppercase; color:#93a0b4;
}
.rk-spacer{ flex:1 1 auto; }
.rk-take{
  font:600 10px/1 ui-monospace, Menlo, monospace; letter-spacing:.1em;
  color:#5c6779; white-space:nowrap;
}
.rk-np-plan{
  font:700 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em;
  text-transform:uppercase; color:#06241a; padding:5px 9px; border-radius:5px;
  background:linear-gradient(180deg,#5cf0b0,#22b877);
  box-shadow:0 1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ---- signal path --------------------------------------------------------- */
.rk-chain{
  list-style:none; display:flex; align-items:stretch; gap:0;
  flex-wrap:wrap; margin:0 0 14px; padding:0;
}
.rk-node{
  flex:1 1 120px; min-width:120px; position:relative;
  padding:12px 14px; border-radius:10px;
  border:1px solid var(--rk-edge, #0a0c10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), inset 0 -1px 0 rgba(0,0,0,.45);
}
.rk-node b{
  display:block; margin-bottom:4px;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#e8ecf2;
}
.rk-node small{ display:block; font-size:11px; line-height:1.45; color:#7d8a9e; }
.rk-node .rk-lamp{
  position:absolute; top:10px; right:11px; width:7px; height:7px; border-radius:50%;
  background:var(--rk-led-off, #333a46);
}
.rk-node.on{ border-color:rgba(53,255,158,.34); }
.rk-node.on .rk-lamp{ background:var(--rk-phos, #35ff9e); box-shadow:0 0 9px var(--rk-phos, #35ff9e); }
.rk-node.dead{ opacity:.42; }
.rk-node.dead b{ color:#7d8a9e; }
.rk-arrow{
  align-self:center; flex:0 0 auto; padding:0 8px;
  color:#39414f; font-size:13px;
}

/* ---- module strips ------------------------------------------------------- */
.rk-mods{ margin:0 0 14px; }
.rk-modrow{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; margin-bottom:8px; border-radius:10px;
  border:1px solid rgba(0,0,0,.5);
  background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(0,0,0,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.rk-modrow .rk-lamp{
  flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--rk-phos, #35ff9e); box-shadow:0 0 9px rgba(53,255,158,.8);
}
.rk-modrow .rk-lamp.off{ background:var(--rk-led-off, #333a46); box-shadow:none; }
.rk-txt{ flex:1; min-width:0; }
.rk-txt b{
  display:block; margin-bottom:2px;
  font-size:12.5px; font-weight:750; letter-spacing:.01em; color:#e8ecf2;
}
.rk-txt small{ display:block; font-size:11px; line-height:1.45; color:#7d8a9e; }

/* hardware switch */
.rk-sw{
  flex:0 0 auto; position:relative; display:block; width:38px; height:21px;
  cursor:pointer; margin:0;
}
.rk-sw input{
  position:absolute; opacity:0; width:0; height:0; margin:0;
}
.rk-sw-track{
  position:absolute; inset:0; border-radius:11px;
  background:#0a0c10; border:1px solid #000;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
  transition:background .15s;
}
.rk-sw-track::after{
  content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:linear-gradient(180deg,#5a6474,#2b313c);
  box-shadow:0 1px 3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.25);
  transition:left .15s, background .15s;
}
.rk-sw input:checked + .rk-sw-track{ background:rgba(31,107,69,.55); }
.rk-sw input:checked + .rk-sw-track::after{
  left:19px; background:linear-gradient(180deg,#5cf0b0,#22b877);
}
.rk-sw input:focus-visible + .rk-sw-track{ outline:2px solid var(--rk-phos, #35ff9e); outline-offset:2px; }

/* blend slider as the fourth strip's control */
.rk-slider{
  flex:0 0 132px; width:132px; height:4px; margin:0; appearance:none; -webkit-appearance:none;
  border-radius:3px; background:#0a0c10; border:1px solid #000;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}
.rk-slider::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:linear-gradient(180deg,#5a6474,#2b313c);
  border:1px solid #000; box-shadow:0 1px 3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.25);
  cursor:pointer;
}
.rk-slider::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%;
  background:linear-gradient(180deg,#5a6474,#2b313c);
  border:1px solid #000; cursor:pointer;
}

/* ---- source drawer ------------------------------------------------------- */
.rk-src{ margin:0 0 14px; }
.rk-src > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:9px;
  font:700 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.11em;
  text-transform:uppercase; color:#93a0b4;
  background:rgba(0,0,0,.28); border:1px solid rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.rk-src > summary::-webkit-details-marker{ display:none; }
.rk-src > summary::before{ content:"\25B8"; color:#5c6779; }
.rk-src[open] > summary::before{ content:"\25BE"; }
.rk-inputs{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;
}
.rk-inputs .upload-card{
  margin:0; padding:11px 13px; border-radius:9px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.2));
  border:1px solid rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.rk-inputs .upload-card h3{ font-size:12px; margin:0 0 6px; }
.rk-inputs .upload-card .small-note{ font-size:10.5px; line-height:1.4; color:#78879b; }

/* ---- output bay ---------------------------------------------------------- */
.rk-outbay{
  border:1px solid var(--rk-edge, #0a0c10); border-radius:11px; padding:14px;
  margin:0 0 14px;
  background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.12));
  box-shadow:inset 0 2px 10px rgba(0,0,0,.55);
}
.rk-ob-hd{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font:700 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rk-phos-dim, #1f6b45);
}
.rk-ob-hd .r{ margin-left:auto; color:var(--rk-phos, #35ff9e); }

/* before / after compare */
.rk-cmp{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.rk-cmp .c{
  border:1px solid rgba(0,0,0,.5); border-radius:9px; padding:10px 12px;
  background:rgba(0,0,0,.25);
}
.rk-cmp .c .k{
  font:700 9px/1.3 ui-monospace, Menlo, monospace; letter-spacing:.1em;
  text-transform:uppercase; color:#7d8a9e; margin-bottom:6px;
}
.rk-cmp .c .v{
  font:700 19px/1.1 ui-monospace, Menlo, monospace; color:var(--rk-phos, #35ff9e);
}
.rk-cmp .c .v.bad{ color:#ff7b6b; }
.rk-cmp .c .n{ font-size:10.5px; color:#7d8a9e; margin-top:3px; }
.rk-cmp .meter-track{
  height:5px; margin-top:8px; border-radius:3px; overflow:hidden;
  background:#0a0c10; box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}
.rk-cmp .meter-fill{
  display:block; height:100% !important; width:0; border-radius:3px;
  background:linear-gradient(90deg,#1f6b45,var(--rk-phos, #35ff9e) 72%,#ffe066) !important;
  box-shadow:0 0 10px -2px rgba(53,255,158,.8);
  transition:width .4s ease;
}
.rk-cmp .meter-fill.before{
  background:linear-gradient(90deg,#6b2a1f,#ff7b6b 72%,#ffb066) !important;
  box-shadow:0 0 10px -2px rgba(255,123,107,.7);
}

.rk-ob-foot{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  padding-top:10px; margin-bottom:12px;
  border-top:1px solid rgba(255,255,255,.05);
}
.rk-ob-foot .meter-model{
  font:600 9.5px/1.4 ui-monospace, Menlo, monospace; letter-spacing:.04em; color:#5c6779;
}
.rk-ob-foot .meter-verdict{
  font-size:11px; line-height:1.45; color:#93a0b4;
}

/* gate lamps + meters */
.rk-ob-row{ display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; }
.rk-lampcol{ display:flex; gap:14px; align-items:flex-end; }
.rk-lampcol .l{ text-align:center; }
.rk-lampcol .l i{
  display:block; width:26px; height:26px; border-radius:50%; margin:0 auto 6px;
  background:radial-gradient(circle at 50% 35%, #2b313c, #14171d);
  border:1px solid #000; box-shadow:inset 0 1px 2px rgba(255,255,255,.1);
}
.rk-lampcol .l.pass i{
  background:radial-gradient(circle at 50% 35%, #5cf0b0, #1a8f5c);
  box-shadow:0 0 14px -2px rgba(53,255,158,.9);
}
.rk-lampcol .l.warn i{
  background:radial-gradient(circle at 50% 35%, #ffb066, #c25a12);
  box-shadow:0 0 14px -2px rgba(255,107,53,.9);
}
.rk-lampcol .l span{
  font:600 8.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.08em;
  text-transform:uppercase; color:#7d8a9e;
}
.rk-meters{ flex:1; min-width:180px; display:grid; gap:8px; }
.rk-meter .top{
  display:flex; justify-content:space-between; margin-bottom:4px;
  font:600 9.5px/1 ui-monospace, Menlo, monospace; color:#7d8a9e;
  text-transform:uppercase; letter-spacing:.06em;
}
.rk-meter .top b{ color:var(--rk-phos, #35ff9e); font-weight:700; }
.rk-meter .bar{
  height:8px; border-radius:4px; overflow:hidden; background:#0a0c10;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
}
.rk-meter .bar i{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#1f6b45,var(--rk-phos, #35ff9e) 72%,#ffe066);
  box-shadow:0 0 10px -2px rgba(53,255,158,.8);
}

/* ---- transport ----------------------------------------------------------- */
.rk-transport{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-top:14px; border-top:1px solid rgba(0,0,0,.6);
  box-shadow:0 -1px 0 rgba(255,255,255,.04);
}
.rk-key{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 17px; border-radius:9px; cursor:pointer;
  font:750 12.5px/1 inherit; letter-spacing:.02em; text-decoration:none;
  border:1px solid var(--rk-edge, #0a0c10);
  background:linear-gradient(180deg,#39414f,#232831);
  color:#e8ecf2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.5);
}
.rk-key:active{ transform:translateY(1px); }
.rk-key.rk-go{
  color:#04121a;
  background:linear-gradient(180deg,#5cf0b0,#22b877);
  border-color:#0d5c3a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 22px -6px rgba(53,255,158,.9), 0 2px 5px rgba(0,0,0,.5);
}
.rk-key.rk-ghost{
  background:linear-gradient(180deg,#262c36,#1a1e25);
  color:#9aa7ba;
}
.rk-key[disabled]{
  opacity:.45; cursor:not-allowed; filter:saturate(.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.5);
}
.rk-key-led{ width:7px; height:7px; border-radius:50%; background:#0a3d28; box-shadow:0 0 6px rgba(10,61,40,.9); }
.rk-sp{ flex:1; }
#tk-result{ display:inline-flex; }

/* ---- footer bits --------------------------------------------------------- */
.rk-master .usage-note,
.rk-master .download-gate,
.rk-master .tk-error,
.rk-master .tk-progress-wrap,
.rk-master .tk-pipeline-status{ margin-top:12px; }
.rk-master .usage-note:empty{ display:none; }
.rk-master .download-gate{ margin-bottom:0; }

/* ---- live pipeline (Route B only — panel-auto is hidden on Route A) ------ */
.rk-live{ margin-top:14px; }
.rk-live > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:9px;
  font:700 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.11em;
  text-transform:uppercase; color:#93a0b4;
  background:rgba(0,0,0,.28); border:1px solid rgba(0,0,0,.5);
}
.rk-live > summary::-webkit-details-marker{ display:none; }
.rk-live > summary::before{ content:"\25B8"; color:#5c6779; }
.rk-live[open] > summary::before{ content:"\25BE"; }
.rk-live .rk-live-body{ padding:10px 2px 0; }
.rk-live canvas{ width:100%; height:auto; display:block; margin-top:8px; border-radius:6px; }
.rk-live h3{ font-size:12px; margin:12px 0 4px; color:#9fb3c8; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:820px){
  .rk-cmp{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .rk-body{ padding:14px 14px 16px; }
  .rk-nameplate{ padding:13px 14px 12px; gap:10px; }
  .rk-nm{ font-size:13.5px; }
  .rk-take{ display:none; }
  .rk-chain{ flex-direction:column; }
  .rk-arrow{ transform:rotate(90deg); padding:2px 0; align-self:flex-start; margin-left:14px; }
  .rk-inputs{ grid-template-columns:1fr; }
  .rk-modrow{ flex-wrap:wrap; }
  .rk-modrow .rk-txt{ flex:1 1 auto; }
  .rk-slider{ flex:1 1 100%; width:100%; margin-top:4px; }
  .rk-ob-row{ gap:16px; }
  .rk-meters{ min-width:140px; }
  .rk-key{ flex:1 1 auto; justify-content:center; }
  .rk-sp{ display:none; }
}

/* ---------------------------------------------------------------------------
   §M.10 -- Step 5 rack modules: Match AI Sound / Vocal Enhancer / Rack Mixer
   + 4-band Rack EQ. Same chassis language as the rest of the rack: brushed
   module face, engraved label, phosphor lamp, rotary knobs (knobs.js upgrades
   the native range inputs in place).
   --------------------------------------------------------------------------- */
.rk-mod{
  margin:0 0 10px; border-radius:10px;
  border:1px solid rgba(0,0,0,.55);
  background:linear-gradient(180deg, rgba(255,255,255,.038), rgba(0,0,0,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.4);
}
.rk-mod-hd{
  display:flex; align-items:center; gap:9px;
  padding:9px 13px 8px;
  border-bottom:1px solid rgba(0,0,0,.5);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
  border-radius:10px 10px 0 0;
}
.rk-mod-hd .rk-lamp{ flex:0 0 auto; }
.rk-mod-hd b{
  font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:#cfd8e4;
}
.rk-mod-hd small{
  margin-left:auto; font-size:10.5px; letter-spacing:.05em; color:#6f7d92;
  font-variant-numeric:tabular-nums;
}
.rk-mod-hd small.on{ color:var(--rk-phos, #35ff9e); }
.rk-mod-body{ padding:12px 13px 13px; }

/* fader bank (lead / backing / bed) */
.rk-faders{ display:flex; gap:10px; align-items:flex-end; }
.rk-fader{ flex:1; min-width:0; text-align:center; }
.rk-fader label{
  display:block; margin-bottom:6px; font-size:10px; font-weight:750;
  letter-spacing:.09em; text-transform:uppercase; color:#8a97ab;
}
.rk-fader .val{
  display:block; margin-top:5px; font-size:11px; color:var(--rk-phos, #35ff9e);
  font-variant-numeric:tabular-nums;
}
.rk-fader input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px;
  border-radius:2px; background:#0a0c10; outline:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}
.rk-fader input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:20px; border-radius:3px;
  background:linear-gradient(180deg,#6d7788,#2f3641);
  border:1px solid #000; box-shadow:0 1px 2px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.3);
  cursor:pointer;
}
.rk-fader input[type=range]::-moz-range-thumb{
  width:14px; height:20px; border-radius:3px;
  background:linear-gradient(180deg,#6d7788,#2f3641);
  border:1px solid #000; box-shadow:0 1px 2px rgba(0,0,0,.8);
  cursor:pointer;
}
.rk-fader .band{ display:block; margin-top:3px; font-size:9.5px; letter-spacing:.06em; color:#5f6c80; }

/* knob rows (vocal enhancer + EQ) */
.rk-knobs{ display:flex; flex-wrap:wrap; gap:6px 4px; justify-content:space-between; }
.rk-knob{ flex:1 1 56px; min-width:52px; text-align:center; }
.rk-knob label{
  display:block; margin-top:2px; font-size:9.5px; font-weight:750;
  letter-spacing:.07em; text-transform:uppercase; color:#8a97ab;
}
.rk-knob .val{
  display:block; font-size:10px; color:var(--rk-phos, #35ff9e);
  font-variant-numeric:tabular-nums;
}
.rk-knob input[type=range]{ width:100%; }
.rk-mod-foot{
  display:flex; align-items:center; gap:8px; margin-top:11px;
  padding-top:10px; border-top:1px solid rgba(0,0,0,.45);
}
.rk-mod-foot .rk-txt small{ font-size:10.5px; }
.rk-note{
  margin:8px 0 0; font-size:10.5px; line-height:1.5; color:#6f7d92;
}

/* ============================================================================
   §N — FINAL MIX BAY
   The real Vocal Enhancer + the Rack Mixer/EQ + the Final Mix player, merged
   into one chassis directly below "Run Automatic Processing".
   ============================================================================ */
#rk-finalmix{
  position:relative; margin:16px 0 4px; padding:15px 15px 16px;
  border-radius:16px;
  border:1px solid #2b3440;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 14%),
    linear-gradient(180deg,#1a2029 0%,#131820 46%,#0c1015 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -30px 60px -40px #000,
    0 26px 60px -34px rgba(0,0,0,.95);
}
#rk-finalmix::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  opacity:.55;
}
.rk-fmx-hd{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px; padding:2px 2px 12px;
  border-bottom:1px solid rgba(0,0,0,.55);
  margin-bottom:13px;
}
.rk-fmx-hd b{
  font-size:12px; font-weight:850; letter-spacing:.16em; text-transform:uppercase;
  color:#e3ebf6; text-shadow:0 0 14px rgba(53,255,158,.25);
}
.rk-fmx-hd small{
  margin-left:auto; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:#6f7d92; font-variant-numeric:tabular-nums;
}
.rk-fmx-chain{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 14px;
}
.rk-fmx-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:#8f9db2; background:linear-gradient(180deg,#1b222b,#12171e);
  border:1px solid #2a333f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.rk-fmx-chip.on{
  color:#8effc4; border-color:#1c4a37;
  background:linear-gradient(180deg,#10241b,#0a1712);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px -4px rgba(53,255,158,.45);
}
.rk-fmx-chip.on::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--rk-phos,#35ff9e); box-shadow:0 0 8px var(--rk-phos,#35ff9e);
}
.rk-fmx-arrow{ color:#3d4857; font-size:13px; line-height:1; }

/* the enhancer panel sits flush inside the bay */
#rk-finalmix .ve-details{ margin:0 0 14px; }
#rk-finalmix .ve-details > summary{ border-radius:12px 12px 0 0; }
#rk-finalmix .ve-root{ max-width:none; border-radius:12px; }
#rk-finalmix .final-mix{ margin:0; }

/* ---------------------------------------------------------------------------
   RACK MIXER — premium channel strips (replaces the flat "beta" look)
   --------------------------------------------------------------------------- */
#rk5-mixer-mod{
  border-radius:13px; overflow:hidden;
  border:1px solid #2c3542;
  background:linear-gradient(180deg,#1d242d,#12171e 60%,#0d1116);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 16px 34px -26px #000;
  margin-bottom:14px;
}
#rk5-mixer-mod .rk-mod-hd{
  padding:11px 15px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.14)),
    linear-gradient(180deg,#252d38,#181e26);
  border-bottom:1px solid #2c3542;
  border-radius:0;
}
#rk5-mixer-mod .rk-mod-hd b{ font-size:11.5px; letter-spacing:.16em; color:#e6eef9; }
#rk5-mixer-mod .rk-mod-body{ padding:16px 15px 14px; }

#rk5-mixer-mod .rk-faders{ gap:13px; align-items:stretch; }
#rk5-mixer-mod .rk-fader{
  position:relative; flex:1; min-width:0; text-align:center;
  padding:13px 11px 10px; border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 26%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#222a34,#161c24 56%,#0f141a);
  border:1px solid #2e3845;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -16px 30px -20px #000,
    0 10px 22px -18px #000;
}
#rk5-mixer-mod .rk-fader::after{
  content:""; position:absolute; left:11px; right:11px; top:8px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(53,255,158,.35), transparent);
  opacity:.5;
}
#rk5-mixer-mod .rk-fader label{
  display:block; margin:0 0 10px;
  font-size:9.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#93a1b6; text-shadow:0 1px 0 rgba(0,0,0,.7);
}
#rk5-mixer-mod .rk-fader input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:26px;
  background:transparent; outline:none; margin:0 0 8px; cursor:pointer;
}
#rk5-mixer-mod .rk-fader input[type=range]::-webkit-slider-runnable-track{
  height:9px; border-radius:6px;
  background:linear-gradient(180deg,#05070a,#1b222b 55%,#0a0e13);
  border:1px solid #0a0e13;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.05);
}
#rk5-mixer-mod .rk-fader input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:27px; margin-top:-10px; border-radius:4px;
  background:linear-gradient(180deg,#f6f9fd 0%,#c8d1dd 34%,#8b96a6 60%,#e8eef6 100%);
  border:1px solid #05070a;
  box-shadow:
    0 2px 6px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(0,0,0,.25),
    0 0 10px rgba(53,255,158,.28);
}
#rk5-mixer-mod .rk-fader input[type=range]:active::-webkit-slider-thumb{
  box-shadow:0 2px 7px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.95),
             0 0 18px rgba(53,255,158,.65);
}
#rk5-mixer-mod .rk-fader input[type=range]::-moz-range-track{
  height:9px; border-radius:6px;
  background:linear-gradient(180deg,#05070a,#1b222b 55%,#0a0e13);
  border:1px solid #0a0e13; box-shadow:inset 0 2px 5px rgba(0,0,0,.95);
}
#rk5-mixer-mod .rk-fader input[type=range]::-moz-range-thumb{
  width:17px; height:27px; border-radius:4px;
  background:linear-gradient(180deg,#f6f9fd,#c8d1dd 34%,#8b96a6 60%,#e8eef6);
  border:1px solid #05070a;
  box-shadow:0 2px 6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.95);
}
#rk5-mixer-mod .rk-fader .val{
  display:inline-block; min-width:50px; padding:3px 7px; border-radius:5px;
  font:700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:#8effc4; background:#06100b; border:1px solid #123024;
  text-shadow:0 0 9px rgba(53,255,158,.6);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.9);
}
#rk5-mixer-mod .rk-fader .band{
  display:block; margin-top:5px; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:#56637a;
}

/* ---- beat-synced fader lighting -------------------------------------------
   The three mixer faders used to read as inert metal. Each now owns a colour
   identity and a 12-segment LED ladder that rides the live master analyser
   (step5-rack.js writes --lit, 0..1, every frame), so the bank visibly pumps
   with the beat and it is obvious the faders are live. Lead = green,
   Backing = blue, Bed = purple. */
/* rack.css carries a global `.val{ color:var(--rk-phos) !important }`, so the
   channel colour is published as --rk-phos as well as --led: the readout then
   follows the fader instead of staying phosphor green. */
#rk5-mixer-mod .rk-fader{ --led:#35ff9e; --led-rgb:53,255,158; --lit:0; --rk-phos:#35ff9e; }
#rk5-mixer-mod .rk-fader[data-ch="backing"]{ --led:#22d3ff; --led-rgb:34,211,255; --rk-phos:#22d3ff; }
#rk5-mixer-mod .rk-fader[data-ch="inst"]{ --led:#a56bff; --led-rgb:165,107,255; --rk-phos:#a56bff; }

#rk5-mixer-mod .rk-fader::after{
  background:linear-gradient(90deg, transparent, rgba(var(--led-rgb),.85), transparent);
  opacity:calc(.22 + var(--lit) * .78);
  transition:opacity .05s linear;
}
#rk5-mixer-mod .rk-fader label{
  text-shadow:0 1px 0 rgba(0,0,0,.7),
              0 0 calc(var(--lit) * 11px) rgba(var(--led-rgb),.85);
}
#rk5-mixer-mod .rk-fader input[type=range]::-webkit-slider-thumb{
  box-shadow:
    0 2px 6px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(0,0,0,.25),
    0 0 calc(4px + var(--lit) * 14px) rgba(var(--led-rgb),.9);
}
#rk5-mixer-mod .rk-fader input[type=range]::-moz-range-thumb{
  box-shadow:0 2px 6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.95),
             0 0 calc(4px + var(--lit) * 14px) rgba(var(--led-rgb),.9);
}
#rk5-mixer-mod .rk-fader .val{
  color:var(--led) !important; background:#05090c;
  border-color:rgba(var(--led-rgb),.38);
  text-shadow:0 0 calc(5px + var(--lit) * 10px) rgba(var(--led-rgb),.75);
}

#rk5-mixer-mod .rk-leds{
  display:flex; gap:2px; height:10px; margin:0 0 9px;
  padding:2px; border-radius:4px;
  background:#05080b; border:1px solid #0a0e13;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.95);
}
#rk5-mixer-mod .rk-leds i{
  flex:1 1 0; min-width:0; border-radius:1.5px;
  background:#0d1218;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
}
#rk5-mixer-mod .rk-leds i.on{
  background:var(--led);
  box-shadow:0 0 5px rgba(var(--led-rgb),.9), 0 0 11px rgba(var(--led-rgb),.5);
}
/* prefers-reduced-motion: hold a steady lit state instead of pumping */
#rk5-mixer-mod .rk-leds.steady i{
  background:var(--led); opacity:.55;
  box-shadow:0 0 5px rgba(var(--led-rgb),.55);
}
#rk5-mixer-mod .rk-knobs{
  margin-top:16px; padding-top:15px; gap:8px 6px;
  border-top:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.5);
}
#rk5-mixer-mod .rk-knob label{ color:#93a1b6; letter-spacing:.1em; }
#rk5-mixer-mod .rk-knob .val{ color:#8effc4; text-shadow:0 0 8px rgba(53,255,158,.45); }
#rk5-mixer-mod .rk-mod-foot{
  margin-top:15px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.055);
}
#rk5-mixer-mod .rk-key.rk-ghost{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px -10px #000;
}

/* ---------------------------------------------------------------------------
   §N.2  4-BAND RACK EQ — response scope + colour-coded hardware knobs
   Replaces the flat four-dial row with a real rack EQ face: a live RBJ
   response curve, engraved frequency legends, per-band accents and a
   machined bezel around each dial.
   --------------------------------------------------------------------------- */
#rk5-mixer-mod .rk-eq{
  margin-top:16px; padding:13px 13px 12px; border-radius:12px;
  border:1px solid #2b3441;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.22)),
    linear-gradient(180deg,#1a212a,#10151b 62%,#0b0f14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -22px 44px -32px #000,
    0 12px 26px -22px #000;
}
#rk5-mixer-mod .rk-eq-hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin:0 0 10px; padding:0 2px 9px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#rk5-mixer-mod .rk-eq-title{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  font-size:10px; font-weight:850; letter-spacing:.18em; text-transform:uppercase;
  color:#dde8f6; text-shadow:0 0 14px rgba(53,255,158,.26);
}
#rk5-mixer-mod .rk-eq-led{
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #d8ffec, #35ff9e 58%, #0c3a25);
  box-shadow:0 0 8px rgba(53,255,158,.9);
}
#rk5-mixer-mod .rk-eq-hint{
  font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  color:#68758a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- response scope ------------------------------------------------------ */
#rk5-mixer-mod .rk-eq-scope{
  position:relative; height:104px; margin:0 0 13px; border-radius:9px; overflow:hidden;
  background:
    radial-gradient(120% 150% at 50% -25%, rgba(53,255,158,.11), transparent 62%),
    linear-gradient(180deg,#060a0e,#0a1016 58%,#070b0f);
  border:1px solid #232c37;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.92), inset 0 0 0 1px rgba(255,255,255,.02);
}
#rk5-eq-curve{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.rk-eq-gl{ stroke:rgba(255,255,255,.055); stroke-width:1; }
.rk-eq-zero{ fill:none; stroke:rgba(53,255,158,.32); stroke-width:1; stroke-dasharray:3 4; }
.rk-eq-area{ fill:url(#rkEqFill); stroke:none; }
.rk-eq-line{
  fill:none; stroke:url(#rkEqLine); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(53,255,158,.55)) drop-shadow(0 0 13px rgba(34,211,255,.22));
}
.rk-eq-dot{ opacity:.5; }
.rk-eq-dot.on{ opacity:1; filter:drop-shadow(0 0 5px rgba(255,255,255,.55)); }

#rk5-mixer-mod .rk-eq-scale{
  position:absolute; left:0; right:0; bottom:3px; display:flex; justify-content:space-between;
  padding:0 7px; pointer-events:none;
  font-size:7.5px; letter-spacing:.07em; font-weight:600;
  color:#4d5a6d; font-variant-numeric:tabular-nums;
}
#rk5-mixer-mod .rk-eq-db{
  position:absolute; top:4px; right:7px; bottom:16px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  pointer-events:none;
  font-size:7.5px; font-weight:600; color:#4d5a6d; font-variant-numeric:tabular-nums;
}

/* ---- knob bank ----------------------------------------------------------- */
#rk5-mixer-mod .rk-eq-knobs{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
  margin-top:2px; padding-top:13px;
  border-top:1px solid rgba(255,255,255,.055);
  justify-content:stretch;
}
#rk5-mixer-mod .rk-eq-knobs .rk-knob{
  flex:1 1 auto; min-width:0; padding:10px 4px 8px; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.20));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
#rk5-mixer-mod .rk-eq-knobs .rk-knob > .val{ display:none; }

/* per-band accents (low = amber, low-mid = green, hi-mid = cyan, high = violet) */
#rk5-mixer-mod .rk-knob.band-low     .avh-knob{ --knob-accent:#ff9a2e; --knob-accent-2:#ff9a2e; --accent-2:#ff9a2e; }
#rk5-mixer-mod .rk-knob.band-lowmid  .avh-knob{ --knob-accent:#35ff9e; --knob-accent-2:#35ff9e; --accent-2:#35ff9e; }
#rk5-mixer-mod .rk-knob.band-highmid .avh-knob{ --knob-accent:#22d3ff; --knob-accent-2:#22d3ff; --accent-2:#22d3ff; }
#rk5-mixer-mod .rk-knob.band-high    .avh-knob{ --knob-accent:#a56bff; --knob-accent-2:#a56bff; --accent-2:#a56bff; }

#rk5-mixer-mod .rk-eq-knobs .avh-knob{ --knob-size:78px; gap:7px; margin:0 auto; }
#rk5-mixer-mod .rk-eq-knobs .avh-knob::before{
  content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:calc(var(--knob-size) + 10px); height:calc(var(--knob-size) + 10px);
  border-radius:50%; z-index:0;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#151b23,#080c11);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -3px 7px rgba(0,0,0,.85),
    0 7px 16px -9px #000;
}
#rk5-mixer-mod .rk-eq-knobs .avh-knob-dial{ position:relative; z-index:1; }
#rk5-mixer-mod .rk-eq-knobs .avh-knob-track{ stroke:#232b36; }
#rk5-mixer-mod .rk-eq-knobs .avh-knob-fill{
  stroke:var(--knob-accent);
  filter:drop-shadow(0 0 4px var(--knob-accent));
}
#rk5-mixer-mod .rk-eq-knobs .avh-knob-face{ stroke:rgba(255,255,255,.10); }
#rk5-mixer-mod .rk-eq-knobs .avh-knob-tick{ stroke:#333c49; }
#rk5-mixer-mod .rk-eq-knobs .avh-knob-tick.major{ stroke:#5d6a7e; }
#rk5-mixer-mod .rk-eq-knobs .avh-knob-needle{
  background:linear-gradient(180deg,#ffffff,var(--knob-accent));
  box-shadow:0 0 7px var(--knob-accent);
}
#rk5-mixer-mod .rk-eq-knobs .avh-knob-val{
  font-size:10px; font-weight:700; font-variant-numeric:tabular-nums;
  min-width:48px; padding:2px 7px; border-radius:5px;
  background:#060a0e; border:1px solid rgba(255,255,255,.09);
  color:var(--knob-accent);
  text-shadow:0 0 9px var(--knob-accent);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}

#rk5-mixer-mod .rk-eq-knobs .rk-knob label{
  display:block; margin:10px 0 4px;
  font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#9aa9bd; text-shadow:0 1px 0 rgba(0,0,0,.75);
}
#rk5-mixer-mod .rk-eq-knobs .rk-knob label em{
  display:block; margin-top:2px; font-style:normal;
  font-size:7.5px; font-weight:600; letter-spacing:.08em; color:#5a6879;
}

/* ============================================================================
   §O — RACK MONITOR, AUTO-BALANCE, EQ PRESETS & LIVE SPECTRUM
   ============================================================================ */

/* ---- monitor transport ---------------------------------------------------- */
.rk-mon{
  position:relative; z-index:1; margin:0 0 13px; border-radius:13px; overflow:hidden;
  border:1px solid #2c3542;
  background:linear-gradient(180deg,#1e2630,#141a22 58%,#0e1319);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -28px #000;
}
.rk-mon-hd{
  display:flex; align-items:center; gap:9px; padding:10px 14px 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.16)),
    linear-gradient(180deg,#262f3a,#181f27);
  border-bottom:1px solid #2c3542;
}
.rk-mon-title{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; color:#e6eef9;
}
.rk-mon-led{
  width:8px; height:8px; border-radius:50%; background:#3a4552;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6); transition:background .2s, box-shadow .2s;
}
.rk-mon-led.on{
  background:var(--rk-phos,#35ff9e);
  box-shadow:0 0 10px var(--rk-phos,#35ff9e), 0 0 22px rgba(53,255,158,.5);
}
.rk-mon-sub{
  margin-left:auto; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#6f7d92;
}
.rk-mon-body{ display:flex; align-items:center; gap:12px; padding:13px 14px 12px; }

.rk-tpt-btn{
  position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; padding:0; cursor:pointer; color:#cfe6d9;
  border:1px solid #39424f;
  background:radial-gradient(circle at 50% 28%, #39434f, #1b222a 62%, #10151b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -6px 12px -6px #000, 0 8px 18px -12px #000;
  transition:transform .12s, box-shadow .18s, color .18s, border-color .18s;
}
.rk-tpt-btn:hover{ color:#8effc4; border-color:#2f6b52; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px -4px rgba(53,255,158,.55); }
.rk-tpt-btn:active{ transform:translateY(1px) scale(.98); }
.rk-tpt-btn svg{ width:20px; height:20px; fill:currentColor; }
.rk-tpt-btn .ico-pause{ display:none; }
.rk-tpt-btn.is-playing .ico-play{ display:none; }
.rk-tpt-btn.is-playing .ico-pause{ display:inline; }
.rk-tpt-btn.sm{ width:34px; height:34px; }
.rk-tpt-btn.sm svg{ width:15px; height:15px; }

.rk-mon-time{
  display:inline-flex; align-items:baseline; gap:4px; font-variant-numeric:tabular-nums;
  font-size:12px; color:#8fa0b4; padding:5px 9px; border-radius:7px;
  background:linear-gradient(180deg,#0b0f13,#10161c); border:1px solid #232b35;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
}
.rk-mon-time b{ color:#c8ffdf; font-weight:700; letter-spacing:.04em; }
.rk-mon-time i{ font-style:normal; color:#5d6b7e; }

.rk-mon-seek{ flex:1 1 auto; min-width:80px; height:26px; display:flex; align-items:center; cursor:pointer; touch-action:none; }
.rk-mon-seek-track{
  position:relative; width:100%; height:8px; border-radius:5px;
  background:linear-gradient(180deg,#0a0e12,#121820); border:1px solid #232b35;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.85);
}
.rk-mon-seek-buf{ position:absolute; top:0; bottom:0; left:0; width:0; border-radius:5px; background:rgba(255,255,255,.09); }
.rk-mon-seek-fill{
  position:absolute; top:0; bottom:0; left:0; width:0; border-radius:5px;
  background:linear-gradient(90deg,#1c7f5a,#35ff9e); box-shadow:0 0 10px rgba(53,255,158,.5);
}
.rk-mon-seek-cap{
  position:absolute; top:50%; left:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%;
  background:radial-gradient(circle at 40% 32%, #f2fff9, #9fe8c4 46%, #2e8f68);
  border:1px solid #0d1a14; box-shadow:0 0 8px rgba(53,255,158,.7), 0 2px 5px rgba(0,0,0,.7);
}
.rk-mon-seek:focus-visible .rk-mon-seek-track{ outline:2px solid rgba(53,255,158,.6); outline-offset:2px; }

.rk-mon-meters{ display:flex; gap:3px; height:34px; align-items:flex-end; }
.rk-mon-meter{
  position:relative; width:6px; height:100%; border-radius:3px; overflow:hidden;
  background:linear-gradient(180deg,#0a0e12,#121820); border:1px solid #232b35;
}
.rk-mon-meter i{
  position:absolute; left:0; right:0; bottom:0; height:0%;
  background:linear-gradient(0deg,#1f9a6a,#35ff9e 62%,#d9ff6b 84%,#ff5a5a);
  transition:height .06s linear;
}
.rk-mon-db{
  min-width:46px; text-align:right; font-size:10.5px; font-variant-numeric:tabular-nums;
  color:#8effc4; padding:4px 7px; border-radius:6px; background:#0b0f13; border:1px solid #232b35;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
}
.rk-mon-foot{ padding:0 14px 12px; font-size:10.5px; line-height:1.5; color:#6f7d92; }
#rk-finalmix #fmx-audio{ display:none; }

/* ---- auto-balance -------------------------------------------------------- */
.rk-bal{
  position:relative; z-index:1; margin:0 0 14px; border-radius:13px; overflow:hidden;
  border:1px solid #2c3542;
  background:linear-gradient(180deg,#1e2630,#141a22 60%,#0e1319);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -28px #000;
}
.rk-bal-hd{
  display:flex; align-items:center; gap:9px; padding:9px 14px 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16)),
    linear-gradient(180deg,#242d37,#171e26);
  border-bottom:1px solid #2c3542;
}
.rk-bal-title{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; color:#dfe9f5;
}
.rk-bal-led{ width:7px; height:7px; border-radius:50%; background:#3a4552; transition:background .2s, box-shadow .2s; }
.rk-bal-led.on{ background:#7fdcff; box-shadow:0 0 9px #22d3ff; }
.rk-bal-sub{ margin-left:auto; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:#6f7d92; }
.rk-bal-body{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 92px;
  gap:14px; align-items:center; padding:13px 14px;
}
.rk-bal-go{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  padding:11px 13px; border-radius:11px;
  border:1px solid rgba(127,220,255,.20);
  background:
    radial-gradient(120% 150% at 18% 0%, rgba(127,220,255,.10), transparent 58%),
    linear-gradient(180deg,#121a22 0%,#0a1016 44%,#05080c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 26px -8px rgba(34,211,255,.42),
    inset 0 -16px 26px -20px rgba(34,211,255,.55),
    0 10px 22px -16px #000;
  color:#cfefff;
  transition:transform .12s, box-shadow .2s, border-color .2s, background .2s;
}
/* the glass: a soft sheen across the top of the panel */
.rk-bal-go::before{
  content:""; position:absolute; inset:0 0 auto 0; height:52%; pointer-events:none; z-index:0;
  border-radius:11px 11px 40% 40%/11px 11px 22px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 78%);
}
.rk-bal-go:hover:not(:disabled){
  border-color:rgba(127,220,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 32px -6px rgba(34,211,255,.62),
    inset 0 -16px 26px -18px rgba(34,211,255,.70),
    0 0 26px -6px rgba(34,211,255,.45),
    0 10px 22px -16px #000;
}
.rk-bal-go:active:not(:disabled){ transform:translateY(1px); }
.rk-bal-go:disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.35); }
.rk-bal-go-ico{
  position:relative; z-index:1;
  font-size:19px; line-height:1; color:#8fe3ff;
  filter:drop-shadow(0 0 8px rgba(34,211,255,.85));
}
.rk-bal-go-txt{ position:relative; z-index:1; display:flex; flex-direction:column; gap:2px; }
.rk-bal-go-txt b{ font-size:12px; letter-spacing:.05em; color:#e6f8ff; }
.rk-bal-go-txt small{ font-size:9.5px; letter-spacing:.03em; color:#7fa6bd; }
.rk-bal-go.is-busy .rk-bal-go-ico{ animation:rkBalSpin 1s linear infinite; }
/* §S.11 -- Auto-Balance is a latch: the button stays lit while it owns the
   balance, so it is obvious the faders are being held at unity. */
.rk-bal-go.is-on{
  border-color:rgba(127,220,255,.75);
  background:
    radial-gradient(120% 150% at 18% 0%, rgba(127,220,255,.22), transparent 60%),
    linear-gradient(180deg,#16242e 0%,#0b1720 46%,#061019 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 34px -4px rgba(34,211,255,.72),
    inset 0 -16px 26px -16px rgba(34,211,255,.80),
    0 0 24px -4px rgba(34,211,255,.50);
}
.rk-bal-go.is-on .rk-bal-go-txt b{ color:#bdeeff; }
.rk-bal-go.is-on .rk-bal-go-txt small{ color:#6fb6d4; }
.rk-bal-go.is-on .rk-bal-go-ico{ filter:drop-shadow(0 0 12px rgba(127,220,255,1)); }
@keyframes rkBalSpin{ to{ transform:rotate(360deg); } }
.rk-bal-status{ margin-top:8px; font-size:10px; line-height:1.45; color:#6f7d92; }
.rk-bal-status.ok{ color:#8effc4; }
.rk-bal-status.error{ color:#ff8a8a; }
.rk-bal-status.busy{ color:#ffc46b; }

.rk-bal-meter{ display:flex; flex-direction:column; gap:7px; }
.rk-bal-row{ display:grid; grid-template-columns:34px minmax(0,1fr) 40px; gap:7px; align-items:center; }
.rk-bal-row span{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#7d8b9e; }
.rk-bal-track{
  position:relative; height:7px; border-radius:4px; overflow:hidden;
  background:linear-gradient(180deg,#0a0e12,#121820); border:1px solid #232b35;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
}
.rk-bal-track i{
  display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#1c7f5a,#35ff9e); box-shadow:0 0 8px rgba(53,255,158,.45);
  transition:width .3s;
}
.rk-bal-row:nth-child(2) .rk-bal-track i{ background:linear-gradient(90deg,#2b5fa8,#22d3ff); box-shadow:0 0 8px rgba(34,211,255,.45); }
.rk-bal-row.ratio .rk-bal-track i{ background:linear-gradient(90deg,#7a4bc4,#a56bff); box-shadow:0 0 8px rgba(165,107,255,.5); }
.rk-bal-row b{ text-align:right; font-size:10px; font-variant-numeric:tabular-nums; color:#c8ffdf; }
.rk-bal-target{ display:flex; justify-content:center; }
.rk-bal-target .rk-knob{ --knob-accent:#7fdcff; width:100%; }

/* ---- run status under the Run button ------------------------------------- */
.rk-runstatus{ margin:12px 0 0; }
.rk-runstatus:empty{ display:none; }
.rk-runstatus .pipeline-status{ margin:0 0 10px; }
.rk-runstatus .tk-progress-wrap{ margin:0 0 2px; }

/* ---- EQ presets ---------------------------------------------------------- */
.rk-eq-presets{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 10px; padding:7px 10px;
  border-radius:9px; border:1px solid #232b35;
  background:linear-gradient(180deg,#0d1217,#121821);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
.rk-eq-presets-lbl{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#6f7d92; }
.rk-eq-select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.03em; color:#8effc4;
  padding:5px 26px 5px 10px; border-radius:7px; border:1px solid #1f4a37;
  background-color:#0a1410;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2335ff9e' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center; background-size:9px 6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 12px -6px rgba(53,255,158,.7);
}
.rk-eq-select:focus-visible{ outline:2px solid rgba(53,255,158,.55); outline-offset:1px; }
.rk-eq-presets-src{ margin-left:auto; font-size:9px; letter-spacing:.02em; color:#5b6879; }

/* ---- live spectrum behind the EQ curve ----------------------------------- */
#rk5-eq-curve .rk-eq-live{ pointer-events:none; }
#rk5-eq-curve .rk-eq-live-bar{ fill:#22d3ff; }

@media (max-width:760px){
  .rk-mon-body{ flex-wrap:wrap; }
  .rk-mon-seek{ order:5; flex-basis:100%; }
  .rk-bal-body{ grid-template-columns:minmax(0,1fr); }
  .rk-bal-target{ justify-content:flex-start; }
  .rk-eq-presets-src{ flex-basis:100%; margin-left:0; }
}

/* ---- honest faders --------------------------------------------------------
   A path with no separate backing stem (the Direct AI route sums one AI
   vocal) still shows three faders. Dim the one that has nothing to move and
   fade its ladder, so it reads as "not applicable" instead of "broken". */
#rk5-mixer-mod .rk-fader.is-nostem{ opacity:.42; }
#rk5-mixer-mod .rk-fader.is-nostem .rk-leds i{ background:#0b1015; box-shadow:none; }
#rk5-mixer-mod .rk-fader.is-nostem input[type=range]{ cursor:not-allowed; }
#rk5-mixer-mod .rk-fader.is-nostem label::after{
  content:' \00b7 no stem'; font-size:8px; letter-spacing:.08em;
  text-transform:uppercase; color:#7c8b97;
}

/* ---- scroll performance ---------------------------------------------------
   The scope and the enhancer repaint every frame while the mix plays. Paint
   containment keeps that repaint inside these boxes, so scrolling the page
   never has to re-render the whole rack. Both already clip their content. */
#rk5-mixer-mod .rk-eq-scope{ contain: layout paint style; }
#rk-finalmix .ve-root{ contain: layout style; }