/* ============================================================
   SHUFFLE DRUMMER — Knobs, faders, drum buttons, wheel, transport, popups volume/pitch
   ============================================================ */
  .knob-pair { display: flex; gap: 10px; justify-content: center; align-items: center; }
  .knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; }
  .knob-body {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #b0aca4, var(--border-color) 72%);
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 8px var(--shadow-deep), inset 0 2px 2px rgba(255,255,255,0.1);
    position: relative; cursor: ns-resize; touch-action: none; flex-shrink: 0;
    width: 40px; height: 40px;
    user-select: none; -webkit-user-select: none;
  }
  .knob-rotor { position: absolute; inset: 0; border-radius: 50%; }
  .knob-mark {
    position: absolute; top: 3px; left: 50%; margin-left: -1.5px;
    width: 3px; height: 10px; border-radius: 2px;
    background: var(--accent); box-shadow: 0 0 5px rgba(255,122,26,0.8);
  }
  .knob-body.lit {
    box-shadow: 0 4px 8px var(--shadow-deep), inset 0 2px 2px rgba(255,255,255,0.1),
                0 0 12px rgba(255,122,26,0.55), 0 0 22px rgba(255,122,26,0.25);
    border-color: var(--accent-bright);
  }
  .knob-value.lit { color: var(--accent-bright); }
  .knob-label { font-size: 10px; letter-spacing: 0.16em; color: var(--text-knob); white-space: nowrap; margin-top: 4px; }
  .knob-value { font-size: 10px; color: var(--text-knob); min-height: 10px; white-space: nowrap; }
  .pitch-btn {
    height: 22px; padding: 0 10px; border-radius: 2px;
    background: linear-gradient(180deg,var(--btn-light),var(--surface-mid));
    border: 1px solid var(--border-color); color: var(--text-knob);
    font-size: 10px; letter-spacing: 0.18em; font-weight: 700; font-family: inherit;
    cursor: pointer; box-shadow: 0 2px 0 var(--btn-shadow);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pitch-btn.on {
    color: #1a0d00;
    background: linear-gradient(180deg,var(--accent-bright),var(--accent));
    border: 1px solid var(--accent-light);
    box-shadow: 0 2px 0 #7a3a08, 0 0 10px var(--accent-glow-40);
  }
  /* Wheel */
  .wheel-col { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; gap: 0; }
  .wheel-outer {
    width: 104px; height: 104px; border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #c0bcb4, var(--surface-mid) 75%);
    border: 3px solid var(--border-color);
    box-shadow: 0 8px 22px var(--shadow-strong), inset 0 2px 4px rgba(255,255,255,0.08);
    position: relative; cursor: pointer; touch-action: none;
    display: flex; align-items: center; justify-content: center;
    user-select: none;
  }
  .wheel-outer:active { }
  .wheel-outer.playing { animation: sd-glow 2.2s ease-in-out infinite; }
  .wheel-ring { position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed var(--border-color); transition: none; }
  .wheel-notch {
    position: absolute; top: -1px; left: 50%; margin-left: -3px;
    width: 6px; height: 14px; border-radius: 3px;
    background: #111; box-shadow: 0 0 4px rgba(0,0,0,0.6);
  }
  .wheel-center {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(180deg,var(--surface-light2),var(--surface-mid2));
    border: 1px solid var(--border-color);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 3px 6px var(--shadow-deep);
    pointer-events: none;
  }
  .ptn-num { color: #111; font-size: 18px; font-weight: 700; line-height: 1; text-shadow: none; }
  .ptn-name { color: var(--text-primary); font-size: 8px; letter-spacing: 0.08em; margin-top: 3px; text-align: center; max-width: 58px; }
  /* ── Mode ÉDITION SEQ (un bloc du SEQUENCER est sélectionné/édité) ── */
  .wheel-outer.wheel-edit {
    border-color: #e53935;
    box-shadow: 0 8px 22px var(--shadow-strong), 0 0 18px rgba(229,57,53,0.55), inset 0 2px 4px rgba(255,255,255,0.08);
  }
  .wheel-outer.wheel-edit .wheel-ring { border-color: #e53935; }
  .wheel-outer.wheel-edit .wheel-center {
    background: linear-gradient(180deg,#3a1414,#260c0c);
    border-color: #e53935;
  }
  .wheel-outer.wheel-edit .ptn-num  { color: #ff7a7a; }
  .wheel-outer.wheel-edit .ptn-name { color: #ffb0b0; }
  /* ── Mode INFINITE SHUFFLE (roll aléatoire total, kits actifs) — violet ── */
  /* Rangée horizontale roue + bouton ∞ ; le spacer gauche (= largeur bouton)
     garde la roue parfaitement centrée sous le label. */
  .wheel-jog-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .wheel-spacer { width: 34px; flex-shrink: 0; }
  .inf-btn {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1; cursor: pointer; user-select: none;
    background: linear-gradient(180deg,#bab6ae,#9a9690);
    border: 1px solid #8a8682; color: #5f5a52;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .inf-btn:hover { color: #1a1612; }
  /* Pas de contour de focus au clic souris (décalait l'UI de ~1px) ;
     on garde l'anneau de focus pour la navigation clavier (accessibilité). */
  .inf-btn:focus { outline: none; }
  .inf-btn:focus-visible { outline: 2px solid #6f8bff; outline-offset: 1px; }
  .inf-btn.lit {
    background: linear-gradient(180deg,#26315f,#182247);
    border-color: #6f8bff; color: #d4e0ff;
    box-shadow: 0 0 16px rgba(74,110,240,0.7), inset 0 1px 0 rgba(150,175,255,0.3);
  }
  .ptn-inf { display: none; }
  .ptn-inf-name { display: none; }
  .wheel-outer.wheel-infinite {
    border-color: #6f8bff;
    box-shadow: 0 8px 22px var(--shadow-strong), 0 0 20px rgba(74,110,240,0.6), inset 0 2px 4px rgba(150,175,255,0.15);
    animation: sd-inf-pulse 2.4s ease-in-out infinite;
  }
  .wheel-outer.wheel-infinite .wheel-ring { border-color: #6f8bff; }
  .wheel-outer.wheel-infinite .wheel-center {
    background: linear-gradient(180deg,#26315f,#182247);
    border-color: #6f8bff;
  }
  /* LCD masqué, ∞ clignotant à la place */
  .wheel-outer.wheel-infinite .ptn-num,
  .wheel-outer.wheel-infinite .ptn-name { display: none; }
  .wheel-outer.wheel-infinite .ptn-inf {
    display: block; color: #aac4ff; font-size: 26px; line-height: 1; font-weight: 700;
    text-shadow: 0 0 12px rgba(110,140,255,0.9);
    animation: sd-inf-blink 1.6s ease-in-out infinite;
  }
  /* Nom du roll chargé sous le ∞ (« i1 », « i2 »…) — bleu clair, ne clignote pas */
  .wheel-outer.wheel-infinite .ptn-inf-name {
    display: block; color: #aac4ff; font-size: 9px; letter-spacing: 0.1em;
    font-weight: 700; margin-top: 1px; line-height: 1; min-height: 9px;
  }
  @keyframes sd-inf-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
  @keyframes sd-inf-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
  /* Hauteur fixe + une seule ligne : le passage SHUFFLE ↔ INFINITE SHUFFLE ∞
     (texte plus long) ne doit pas changer la hauteur et décaler l'UI. */
  .wheel-label { margin-top: 5px; font-size: 10px; letter-spacing: 0.08em; color: var(--text-primary); font-weight: 400; text-align: center; white-space: nowrap; line-height: 14px; height: 14px; }
  .wheel-label .wl-shuf { font-weight: 700; }
  /* Label en mode infinite : « INFINITE » en bleu nuit, « SHUFFLE » reste noir, ∞ bleu clair */
  .wheel-label.inf { letter-spacing: 0.08em; font-size: 10px; }
  .wheel-label.inf .inf-word { color: #5b78ff; }
  .wheel-label.inf .inf-sym  { color: #8fa9ff; }
  /* Transport buttons — style MPC 60 */
  .transport-row {
    margin-top: 7px; display: flex; gap: 4px; width: 108px;
  }
  .trn-btn {
    flex: 1; height: 30px; border-radius: 2px;
    font-family: inherit;
    font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
    cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: center;
    border: none;
    box-shadow: 0 3px 0 var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,0.12);
    text-transform: uppercase;
  }
  .trn-rec {
    /* Inactif : même orange que « SHUFFLE » du titre */
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 3px 0 #7a3408, inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .trn-rec.armed {
    /* Activé : rouge */
    background: #e83020;
    box-shadow: 0 3px 0 var(--rec-shadow), 0 0 10px rgba(220,40,20,0.7), inset 0 1px 0 var(--highlight-20);
    animation: rec-pulse 1s ease-in-out infinite;
  }
  @keyframes rec-pulse {
    0%,100% { box-shadow: 0 3px 0 var(--rec-shadow), 0 0 6px rgba(220,40,20,0.5); }
    50%      { box-shadow: 0 3px 0 var(--rec-shadow), 0 0 14px rgba(220,40,20,0.85); }
  }
  .trn-stop {
    background: #d8d4cc;
    color: var(--text-primary);
    box-shadow: 0 3px 0 #8a8680, inset 0 1px 0 rgba(255,255,255,0.4);
    transition: background 80ms, color 80ms, box-shadow 80ms;
  }
  .trn-stop.flash {
    background: var(--danger);
    color: var(--white);
    box-shadow: 0 3px 0 var(--rec-shadow), 0 0 12px rgba(255,80,64,0.6), inset 0 1px 0 var(--highlight-20);
  }
  .trn-play {
    background: #d8d4cc;
    color: var(--text-primary);
    box-shadow: 0 3px 0 #8a8680, inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .trn-play.on {
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 3px 0 #7a3a08, 0 0 8px rgba(255,122,26,0.5), inset 0 1px 0 var(--highlight-20);
  }
  /* keep old play-btn class for compat */
  .play-btn { display:none; }
  /* Faders */
  .mixer {
    display: flex; justify-content: space-between;
    background: var(--surface-mid); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-panel); padding: 10px 8px 8px; margin-bottom: 8px;
  }
  .channel { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
  .fader-track {
    position: relative; width: 44px; height: 70px;
    display: flex; justify-content: center;
    cursor: ns-resize; touch-action: none;
  }
  .fader-slot { width: 8px; height: 100%; background: var(--fader-slot); border-radius: 0px; box-shadow: inset 0 1px 3px var(--black); }
  .fader-tick { display: none; position: absolute; top: 50%; left: 50%; width: 44px; height: 1px; margin-left: -22px; background: var(--border-color); }
  .fader-thumb {
    position: absolute; left: 50%; margin-left: -20px;
    width: 40px; height: 20px; border-radius: 0px;
    background: linear-gradient(180deg,#d0ccc4 0%,var(--surface-light2) 40%,var(--surface-mid2) 60%,#bcb8b0 100%);
    border: 1px solid var(--border-color);
    box-shadow: 0 3px 6px var(--shadow-55);
  }
  .fader-thumb::after {
    content: '';
    position: absolute;
    top: 50%; left: 20%; right: 20%;
    height: 2px; margin-top: -1px;
    background: rgba(0,0,0,0.25);
  }
  .fader-thumb.pitch {
    background: linear-gradient(180deg,var(--accent-bright) 0%,var(--accent-deep) 40%,#c75508 60%,#ff8a30 100%);
    border: 1px solid var(--accent-light);
    box-shadow: 0 3px 6px var(--shadow-55), 0 0 8px var(--accent-glow-40);
  }
  .fader-thumb.pitch::after {
    background: var(--highlight-20);
  }
  /* Fader envelope — canvas inside thumb */
  .fader-thumb { overflow: visible; position: absolute; }
  .fader-env-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; border-radius: 0px;
  }
  /* Corner drag handles — bottom-left and bottom-right of thumb */
  .fader-corner {
    position: absolute; top: 0;
    width: 8px; height: 8px;
    cursor: ew-resize; z-index: 20;
    display: flex; align-items: flex-start; justify-content: center;
  }
  .pitch-mode .fader-corner { display: none; }
  .pitch-mode .fader-env-canvas { display: none; }
  .fader-corner.atk { left: 0; }
  .fader-corner.dcy { right: 0; }
  .fader-corner-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #6a6a6a; transition: background 100ms;
    flex-shrink: 0;
  }
  .fader-corner.atk.active .fader-corner-dot { background: #4a9fff; box-shadow: 0 0 4px #4a9fffaa; }
  .fader-corner.dcy.active .fader-corner-dot { background: #ff9440; box-shadow: 0 0 4px #ff9440aa; }
  /* Drum btns */
  .drum-btn {
    width: 44px; height: 44px; border-radius: 0px;
    background: linear-gradient(180deg,var(--btn-light),var(--surface-mid));
    border: 1px solid var(--border-color); color: var(--text-primary);
    font-size: 15px; font-weight: 700; font-family: inherit;
    cursor: pointer; touch-action: none;
    box-shadow: 0 3px 0 var(--btn-shadow);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    transition: box-shadow 120ms, border-color 120ms;
    user-select: none; -webkit-user-select: none;
  }
  .drum-btn:active { }
  .drum-btn.muted { color: var(--text-deep); background: linear-gradient(180deg,var(--muted-border),var(--surface-mid)); }
  .led { width: 6px; height: 6px; border-radius: 50%; display: block; transition: transform 0.08s, opacity 0.08s; }
  .led.pulse { animation: led-hit 0.22s ease-out forwards; }
  @keyframes led-hit {
    0%   { transform: scale(2.2); opacity: 1; }
    60%  { transform: scale(1.4); opacity: 0.9; }
    100% { transform: scale(1);   opacity: 1; }
  }
  .drum-name { display: none; }
  .drum-name.pitch {
    color: var(--accent-bright);
    background: #1a0d00;
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  /* Potard de PAN (panoramique par piste) — rond, trait à midi au centre */
  .pan-knob {
    position: relative; width: 18px; height: 18px; border-radius: 50%;
    flex-shrink: 0; cursor: ns-resize; touch-action: none; margin-top: 1px;
    background: radial-gradient(circle at 50% 35%, #6a6660, #3a3834 70%, #2a2824);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.12), 0 1px 2px var(--shadow-55);
  }
  .pan-knob-mark {
    position: absolute; top: 1px; left: 50%;
    width: 2px; height: 7px; margin-left: -1px;
    background: #cfcabf; border-radius: 1px;
    transform-origin: 50% 8px;
    transform: translateX(-50%) rotate(0deg);
  }
  .pan-knob.panned { border-color: var(--accent-light); box-shadow: inset 0 1px 2px rgba(255,255,255,0.12), 0 0 6px var(--accent-glow-40); }
  .pan-knob.panned .pan-knob-mark { background: var(--accent-bright); }
  /* Boutons M (mute) / S (solo) sous chaque piste */
  .ms-row { display: flex; gap: 3px; margin-top: 2px; flex-shrink: 0; }
  .ms-btn {
    width: 20px; height: 20px; padding: 0; border-radius: 3px;
    flex-shrink: 0;
    background: linear-gradient(180deg,#9a968e,#7a766e);
    border: 1px solid var(--border-color); color: #2a2824;
    font-size: 11px; font-weight: 700; font-family: inherit; line-height: 1;
    cursor: pointer; box-shadow: 0 1px 0 var(--btn-shadow);
    display: flex; align-items: center; justify-content: center;
    user-select: none; -webkit-user-select: none;
  }
  .ms-btn.ms-mute.active {
    background: var(--danger); color: var(--white);
    border-color: var(--danger-dim); box-shadow: 0 0 6px rgba(255,80,64,0.6);
  }
  .ms-btn.ms-solo.active {
    background: #ffd24d; color: #2a1c00;
    border-color: #ffe28a; box-shadow: 0 0 6px rgba(255,210,77,0.6);
  }
  /* Bouton EQ dédié au canal SAMPLE */
  .smp-eq-btn {
    width: 36px; height: 17px; padding: 0; margin-top: 3px;
    border-radius: 3px; flex-shrink: 0;
    background: linear-gradient(180deg,#3a1e0a,#251208);
    border: 1px solid #ff7a1a99; color: #ff7a1a;
    font-size: 10px; font-weight: 700; font-family: inherit; line-height: normal;
    cursor: pointer; letter-spacing: 0.1em;
    display: flex; align-items: center; justify-content: center;
    user-select: none; -webkit-user-select: none;
    transition: background 0.15s, box-shadow 0.15s;
  }
  .smp-eq-btn:hover {
    background: linear-gradient(180deg,#5a2e0f,#3a1e0a);
    box-shadow: 0 0 6px rgba(255,122,26,0.5);
  }
  .smp-eq-btn.active {
    background: #ff7a1a; color: #1a0800;
    box-shadow: 0 0 8px rgba(255,122,26,0.7);
  }


  .pitch-btn.filter-btn {
    font-size: 9px; padding: 0 7px;
  }
  .pitch-btn.filter-btn.on {
    color: #04161c;
    background: linear-gradient(180deg,#7adfff,#2a9ec0);
    border: 1px solid #9aefff;
    box-shadow: 0 2px 0 #0a4a5a, 0 0 10px rgba(74,159,255,0.5);
  }
  /* LOW-PASS = bleu plus foncé pour le distinguer du HI-PASS (cyan) */
  #lowpass-btn.filter-btn.on {
    color: #dff1ff;
    background: linear-gradient(180deg,#3a7fd0,#12457f);
    border: 1px solid #5a9fe0;
    box-shadow: 0 2px 0 #08284a, 0 0 10px rgba(40,110,220,0.55);
  }

  /* REC LIVE — voir audio/wav-export.js / ui/transport.js. État repos :
     fond rouge sombre, texte blanc lisible. État armé/en cours :
     fond rouge vif, texte blanc clignotant. */
  .pitch-btn.rec-live-btn {
    font-size: 10px; padding: 0 9px;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 0.18em;
    margin-left: auto;
    /* Inactif : même orange que « SHUFFLE » du titre */
    background: var(--accent);
    border: 1px solid var(--accent-light);
    box-shadow: 0 2px 0 #7a3a08;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  }
  .pitch-btn.rec-live-btn:hover {
    background: var(--accent-bright);
    border-color: var(--accent-light);
  }
  .pitch-btn.rec-live-btn.armed {
    /* Activé : rouge */
    background: linear-gradient(180deg,#ff6a55,#c02018);
    border: 1px solid #ff8a70;
    box-shadow: 0 2px 0 #6a1208, 0 0 10px rgba(255,80,64,0.6);
    animation: rec-live-blink 1s steps(1, end) infinite;
  }
  @keyframes rec-live-blink {
    0%, 49%   { color: #ffffff; }
    50%, 100% { color: #ffb8a8; }
  }
  /* PLAY clignote en rouge quand REC LIVE est armé (état activé = rouge) */
  .trn-play.rec-live-waiting {
    animation: play-rec-blink 0.6s steps(1, end) infinite;
  }
  @keyframes play-rec-blink {
    0%, 49%   { background: #cc1a0a; color: #fff; box-shadow: 0 3px 0 #6a0a04, 0 0 12px rgba(220,40,20,0.8), inset 0 1px 0 rgba(255,255,255,0.2); }
    50%, 100% { background: #d8d4cc; color: var(--text-primary); box-shadow: 0 3px 0 #8a8680, inset 0 1px 0 rgba(255,255,255,0.4); }
  }
  /* Bouton 12 BITS (bitcrusher bus batterie) */
  .crush-btn { font-size: 9px; padding: 0 7px; }
  .crush-btn.crush-on {
    color: #2a1500;
    background: linear-gradient(180deg, #ffb84d, #e08a1a);
    border: 1px solid #ffd28a;
    box-shadow: 0 2px 0 #7a4a08, 0 0 10px rgba(255,148,40,0.5);
  }
  .crush-btn.crush-plus {
    color: var(--white);
    background: linear-gradient(180deg, #ff6a52, var(--danger));
    border: 1px solid #ff9a88;
    box-shadow: 0 2px 0 #7a1a10, 0 0 10px rgba(255,80,64,0.6);
  }
  .fader-thumb.filter {
    background: linear-gradient(180deg,#7adfff 0%,#2a9ec0 40%,#1d7a96 60%,#5ccfe8 100%);
    border: 1px solid #9aefff;
    box-shadow: 0 3px 6px var(--shadow-55), 0 0 8px rgba(74,159,255,0.4);
  }
  .fader-thumb.filter::after {
    background: var(--highlight-20);
  }
  /* Mode LOW-PASS des faders : bleu plus foncé (assorti au bouton) */
  .fader-thumb.filter-lp {
    background: linear-gradient(180deg,#5a9fe0 0%,#2a6fc0 40%,#12457f 60%,#4a8fd8 100%);
    border: 1px solid #6aafe8;
    box-shadow: 0 3px 6px var(--shadow-55), 0 0 8px rgba(40,110,220,0.45);
  }
  .fader-thumb.filter-lp::after {
    background: var(--highlight-20);
  }
  /* Mode SEND des faders (REVERB en vert / DELAY en jaune clair) —
     activé en touchant les lignes REVERB/DELAY de l'onglet FX */
  .fader-thumb.send-reverb {
    background: linear-gradient(180deg,#8aff7a 0%,#3aa83a 40%,#2a8a2a 60%,#7af06a 100%);
    border: 1px solid #a8ffa0;
    box-shadow: 0 3px 6px var(--shadow-55), 0 0 8px rgba(80,220,80,0.45);
  }
  .fader-thumb.send-reverb::after {
    background: var(--highlight-20);
  }
  .fader-thumb.send-delay {
    background: linear-gradient(180deg,#fff6a0 0%,#e8d24a 40%,#c8ad2a 60%,#fff08a 100%);
    border: 1px solid #fffac0;
    box-shadow: 0 3px 6px var(--shadow-55), 0 0 8px rgba(255,230,100,0.45);
  }
  .fader-thumb.send-delay::after {
    background: var(--highlight-20);
  }
  /* Boutons SP / P sous les faders 7 & 8 — gris, pas de clic gauche,
     clic droit = popup de chargement d'un fichier unique */
  .extra-load-btn {
    width: 44px; height: 44px; padding: 0; border-radius: 0px;
    background: linear-gradient(180deg,var(--btn-light),var(--surface-mid));
    border: 1px solid var(--border-color); color: var(--text-primary);
    font-size: 13px; letter-spacing: 0.05em; font-weight: 700; font-family: inherit;
    cursor: context-menu; box-shadow: 0 3px 0 var(--btn-shadow);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    user-select: none; -webkit-user-select: none;
  }
  .extra-load-btn.muted {
    background: linear-gradient(180deg,#5a4040,#3a2828);
    border-color: var(--danger-dim); color: #c89a9a;
  }

  .ssl-knob-wrap { display:flex;flex-direction:column;align-items:center;gap:3px; }
  .ssl-knob, .tape-knob, .tx-knob {
    width:38px;height:38px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--metal-mid), #2a2b30 70%);
    border:2px solid #4a4b50;
    box-shadow:0 4px 8px var(--shadow-darker),inset 0 1px 1px rgba(255,255,255,0.05);
    position:relative;cursor:ns-resize;touch-action:none;user-select:none;
  }
  .ssl-knob.lit, .tape-knob.lit, .tx-knob.lit { border-color:var(--accent-bright);box-shadow:0 4px 8px var(--shadow-darker),0 0 10px rgba(255,148,64,0.4); }
  .ssl-knob-mark { position:absolute;top:3px;left:50%;margin-left:-1.5px;width:3px;height:9px;border-radius:2px;background:var(--accent-bright); }
  .ssl-knob-label { font-size:10px;letter-spacing:0.1em;color:#1a1612;font-weight:700;background:#d8d4cc;padding:2px 5px 1px;border-radius:3px;margin-top:4px; }
  .ssl-knob-val { font-size:11px;color:#1a1612;letter-spacing:0.04em;min-width:36px;text-align:center;font-weight:700; }
  /* Sampler pitch popup */
  /* Volume button top-right */
  .vol-btn {
    width: 32px; height: 24px; border-radius: 4px;
    background: linear-gradient(180deg,var(--btn-light),var(--surface-mid));
    border: 1px solid var(--border-color); color: var(--text-knob);
    font-size: 11px; cursor: pointer; font-family: inherit;
    box-shadow: 0 2px 0 var(--btn-shadow);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.1s; position: relative;
  }
  .vol-btn.muted { color: var(--danger); background: linear-gradient(180deg,#4a3a3a,#3a2a2a); border-color: var(--danger-dim); }
  .vol-popup {
    position: absolute; top: 30px; right: 0; z-index: 9500;
    background: #1a1814; border: 1px solid var(--accent-dim); border-radius: 8px;
    padding: 10px 12px; min-width: 130px;
    box-shadow: 0 8px 24px var(--shadow-darker);
    display: none;
  }
  .vol-popup.open { display: block; }
  .vol-popup-label { font-size: 9px; letter-spacing: 0.16em; color: var(--accent-bright); margin-bottom: 6px; }
  .vol-popup input[type=range] {
    width: 100%; accent-color: var(--accent); cursor: pointer;
  }
  .vol-popup-val { font-size: 9px; color: #e0d8cc; text-align: right; margin-top: 3px; }