/* RIGHT HARDWARE LIVE MIRROR */
    aside.hardware-mirror {
      background: var(--bg-surface-1);
      border-left: 1px solid var(--line-subtle);
      display: flex;
      flex-direction: column;
      padding: 8px;
      gap: 8px;
      overflow: hidden;
    }
    .hw-box {
      background: var(--bg-deep);
      border: 1px solid var(--line-subtle);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .hw-header {
      font: 900 9px var(--font-mono);
      letter-spacing: 0.5px;
      display: flex;
      justify-content: space-between;
      color: var(--text-main);
      border-bottom: 1px solid var(--line-subtle);
      padding-bottom: 4px;
    }
    .hw-banks-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
    }
    .hw-bank-btn {
      padding: 3px 2px;
      font-size: 8px;
    }
    /* iPad context mirror: pads ≥40px */
    #hw-mpd-pads {
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      flex: 1 1 auto;
      min-height: 0;
    }
    #hw-mpd-pads .pad-cell {
      min-height: 40px;
      font: 800 9px var(--font-mono);
    }
    .mpd-macro-map {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .mpd-macro-map span {
      padding: 3px 4px;
      border: 1px solid var(--line-subtle);
      color: var(--text-muted);
      font: 700 7px var(--font-mono);
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    /* Spec §6: three horizontal layer legends under MPD pads */
    .mix-layer-legend {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .mix-layer-legend span {
      display: flex;
      align-items: center;
      gap: 6px;
      font: 800 8px var(--font-mono);
      color: var(--text-muted);
      letter-spacing: 0.5px;
    }
    .mix-layer-legend i {
      width: 14px;
      height: 4px;
      flex: 0 0 auto;
      display: inline-block;
    }
    .mix-layer-legend .legend-acid i { background: var(--acid); }
    .mix-layer-legend .legend-orange i { background: var(--orange); }
    .mix-layer-legend .legend-cyan i { background: var(--cyan); }

    /* MIDIMIX STRIPS — flexible height fills remaining mirror space */
    .mixer-strips-deck {
      display: grid;
      grid-template-columns: repeat(9, minmax(0, 1fr));
      gap: 3px;
      flex: 1 1 auto;
      min-height: 120px;
    }
    .mixer-strip {
      background: var(--bg-surface-1);
      border: 1px solid var(--line-subtle);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3px 1px;
      gap: 3px;
      position: relative;
    }
    .mixer-strip.master {
      border-color: var(--line-bright);
      background: #141710;
    }
    .mixer-strip.fx-send-active {
      border-color: var(--red) !important;
      background: rgba(255, 59, 48, 0.08) !important;
    }
    .mixer-strip-name {
      font: 900 7px var(--font-mono);
      color: var(--text-muted);
    }
    .mixer-knob-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #1e2218;
      border: 1px solid var(--line-bright);
    }
    .fader-lane {
      flex: 1;
      width: 10px;
      background: #080a06;
      border: 1px solid var(--line-subtle);
      position: relative;
      cursor: ns-resize;
      touch-action: none;
    }
    .fader-cap {
      width: 14px;
      height: 6px;
      background: #e6e5d8;
      position: absolute;
      left: -2px;
      bottom: 75%;
      border-radius: 1px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.8);
    }
    .mixer-strip.master .fader-cap {
      background: var(--acid);
    }
    .strip-btn {
      width: 100%;
      padding: 0;
      min-height: 22px;
      font-size: 8px;
      font-weight: 900;
      border: 1px solid var(--line-subtle);
      background: var(--bg-surface-2);
      color: var(--text-dim);
      text-align: center;
    }
    .strip-btn.mute.active {
      background: var(--yellow);
      color: #000;
      border-color: var(--yellow);
    }
    .strip-btn.cue.active {
      background: var(--cyan);
      color: #000;
      border-color: var(--cyan);
    }
    .strip-btn.rec.active {
      background: var(--red);
      color: #fff;
      border-color: var(--red);
    }


    /* Per-strip EQ / FILTER sliders (vertical, compact). Double-click resets. */
    .eq-bank {
      display: flex;
      gap: 1px;
      justify-content: center;
      width: 100%;
    }
    .eq-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      font: 800 5px var(--font-mono);
      color: var(--text-muted);
    }
    .eq-slider {
      writing-mode: vertical-lr;
      direction: rtl;
      width: 7px;
      height: 34px;
      margin: 0;
      padding: 0;
      cursor: ns-resize;
      -webkit-appearance: none;
      appearance: none;
      background: #080a06;
      border: 1px solid var(--line-subtle);
      box-sizing: border-box;
    }
    /* Thumb must stay inside the 7px column or neighbouring sliders steal each other's clicks. */
    .eq-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 5px;
      height: 5px;
      background: var(--cyan);
      border-radius: 1px;
    }
    .eq-slider::-moz-range-thumb {
      width: 5px;
      height: 5px;
      border: 0;
      background: var(--cyan);
      border-radius: 1px;
    }
    .eq-slider.eq-filter::-webkit-slider-thumb,
    .mixer-strip.master .eq-slider::-webkit-slider-thumb { background: var(--acid); }
    .eq-slider.eq-filter::-moz-range-thumb,
    .mixer-strip.master .eq-slider::-moz-range-thumb { background: var(--acid); }