/* BOTTOM TRANSPORT DOCK */
    footer.transport-dock {
      background: var(--bg-surface-1);
      border-top: 1px solid var(--line-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      gap: 10px;
      z-index: 20;
    }
    .transport-actions {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .scenes-group {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .scene-label {
      font: 900 8px var(--font-mono);
      color: var(--text-muted);
      margin-right: 2px;
    }

    /* Drawer positioning tracks the grid columns (72px rail, right mirror) */
    .master-dsp-drawer {
      position: fixed;
      bottom: clamp(60px, 8dvh, 72px);
      left: 72px;
      right: clamp(288px, 23vw, 356px);
      background: rgba(14, 16, 11, 0.97);
      backdrop-filter: blur(12px);
      border: 1px solid var(--acid);
      border-bottom: 0;
      padding: 10px 14px;
      z-index: 35;
      display: none;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 -8px 24px rgba(0,0,0,0.8);
      animation: slide-up 0.15s ease-out;
    }
    .master-dsp-drawer.open {
      display: flex;
    }
    @keyframes slide-up {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    .dsp-drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--line-subtle);
      padding-bottom: 6px;
    }
    .dsp-drawer-title {
      font: 900 11px var(--font-mono);
      color: var(--acid);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .dsp-controls-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
    }
    .dsp-control-box {
      background: var(--bg-surface-2);
      border: 1px solid var(--line-subtle);
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .dsp-label {
      font: 900 8px var(--font-mono);
      color: var(--text-muted);
      text-align: center;
    }
    .dsp-val {
      font: 900 12px var(--font-mono);
      color: #fff;
    }
    .dsp-control-box input[type=range] {
      width: 100%;
      accent-color: var(--acid);
      touch-action: none;
    }
    .dsp-hint {
      font: 800 7px var(--font-mono);
      color: var(--cyan);
    }

    /* LIVE SET PATTERN PRESETS & AI DJ BAR */
    .live-set-bar {
      background: var(--bg-surface-1);
      border: 1px solid var(--line-subtle);
      padding: 5px 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex-shrink: 0;
      border-radius: 2px;
    }
    .live-set-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      flex-wrap: wrap;
    }
    .live-set-title-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .live-set-badge {
      font: 900 8px var(--font-mono);
      color: var(--acid);
      background: #14240a;
      border: 1px solid #233e10;
      padding: 2px 5px;
      letter-spacing: 0.5px;
    }
    .live-set-active-name {
      font: 900 10px var(--font-mono);
      color: #fff;
    }
    .ai-dj-controls-group {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }
    .style-label {
      font: 800 8px var(--font-mono);
      color: var(--text-muted);
      margin-right: 1px;
    }
    .style-selector-buttons {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .style-btn {
      font: 800 8px var(--font-mono);
      padding: 2px 5px;
      background: var(--bg-surface-2);
      border: 1px solid var(--line-subtle);
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.1s ease;
    }
    .style-btn:hover {
      color: var(--text-main);
      border-color: var(--line-bright);
    }
    .style-btn.active {
      background: var(--orange);
      color: #000;
      border-color: var(--orange);
      font-weight: 900;
      box-shadow: 0 0 8px rgba(255, 120, 72, 0.4);
    }
    .acid-glow-btn {
      font: 900 8px var(--font-mono);
      padding: 3px 8px;
      background: var(--acid);
      color: #000;
      border: 1px solid var(--acid);
      cursor: pointer;
      box-shadow: 0 0 8px rgba(216, 255, 69, 0.35);
      transition: all 0.1s ease;
    }
    .acid-glow-btn:hover {
      background: #e6ff66;
      box-shadow: 0 0 12px rgba(216, 255, 69, 0.6);
    }
    .ai-assist-btn {
      font: 800 8px var(--font-mono);
      padding: 3px 6px;
      background: var(--bg-surface-2);
      border: 1px solid var(--cyan);
      color: var(--cyan);
      cursor: pointer;
      transition: all 0.1s ease;
    }
    .ai-assist-btn.active {
      background: var(--cyan);
      color: #000;
      font-weight: 900;
      box-shadow: 0 0 10px rgba(102, 220, 231, 0.4);
    }
    .orange-btn {
      font: 800 8px var(--font-mono);
      padding: 3px 6px;
      background: var(--bg-surface-2);
      border: 1px solid var(--orange);
      color: var(--orange);
      cursor: pointer;
      transition: all 0.1s ease;
    }
    .orange-btn:hover {
      background: var(--orange);
      color: #000;
    }
    .action-btn {
      font: 800 8px var(--font-mono);
      padding: 3px 6px;
      background: var(--bg-surface-2);
      border: 1px solid var(--line-bright);
      color: var(--text-main);
      cursor: pointer;
      transition: all 0.1s ease;
    }
    .action-btn:hover {
      border-color: var(--acid);
      color: #fff;
    }
    .pattern-presets-grid {
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      gap: 3px;
    }
    .pattern-preset-slot {
      background: var(--bg-surface-2);
      border: 1px solid var(--line-subtle);
      padding: 3px 1px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.1s ease;
      min-height: 26px;
      text-align: center;
    }
    .pattern-preset-slot:hover {
      border-color: var(--acid);
      background: var(--bg-surface-3);
    }
    .pattern-preset-slot.active {
      background: var(--acid) !important;
      border-color: var(--acid) !important;
      color: #000 !important;
      box-shadow: 0 0 8px rgba(216, 255, 69, 0.5);
    }
    .pattern-preset-slot.active .slot-num,
    .pattern-preset-slot.active .slot-name {
      color: #000 !important;
      font-weight: 900;
    }
    .pattern-preset-slot .slot-num {
      font: 900 8px var(--font-mono);
      color: var(--text-dim);
      line-height: 1;
    }
    .pattern-preset-slot .slot-name {
      font: 700 7px var(--font-mono);
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      margin-top: 2px;
      line-height: 1;
    }