/* ============================================================
   SHUFFLE DRUMMER — Step sequencer : grille, navigation par mesure, save/undo
   ============================================================ */
  /* Seq shuffle per track buttons */
  .seq-shuf-btn { width:16px;height:16px;flex-shrink:0;background:linear-gradient(180deg,#3a3b40,#2a2b30);border:1px solid var(--metal-mid);color:var(--smp-text);font-size:10px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:color 80ms,border-color 80ms;margin-left:3px; }
  /* 82px = aligne la queue des lignes SP/PNO/pads sur celle des pistes drums
     (ts-mini 62+4 + shuf 16+3 = 85 ; clear 82+3 = 85). */
  .seq-clear-row-btn { width:82px;height:16px;flex-shrink:0;background:linear-gradient(180deg,#3a3b40,#2a2b30);border:1px solid #ff504066;color:#ff5040;font-size:9px;letter-spacing:0.12em;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:color 80ms,border-color 80ms;margin-left:3px; }
  .seq-clear-row-btn:hover { color:#ff7060;border-color:#ff5040aa; }
  .seq-shuf-btn:hover { color:#ff9440;border-color:#ff9440aa; }
  .seq-shuf-btn.lit { color:var(--accent-bright);border-color:var(--accent-bright); }
  /* Seq timeshift mini slider per row (agrandi 2026-07 : 48→62px) */
  .seq-ts-mini { width:62px;height:22px;flex-shrink:0;position:relative;cursor:ew-resize;touch-action:none;margin-left:4px; }
  .seq-ts-mini-track { position:absolute;left:4px;right:4px;height:5px;top:50%;margin-top:-2.5px;background:#2a2a2a;border-radius:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.5); }
  .seq-ts-mini-center { position:absolute;left:50%;width:1px;height:12px;background:#666;top:50%;margin-top:-6px; }
  .seq-ts-mini-thumb { position:absolute;top:50%;width:12px;height:18px;margin-top:-9px;margin-left:-6px;background:linear-gradient(180deg,var(--metal-mid),var(--metal-dark));border:1px solid var(--smp-text);border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,0.5); }
  .seq-ts-mini-thumb.active { background:linear-gradient(180deg,#4a9fff,#2266cc);border-color:#88ccff;box-shadow:0 0 5px rgba(74,159,255,0.5); }

  /* Step sequencer — full pane */
  #pane-seq {
    padding: 8px 8px 6px;
  }
  #step-seq {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
  }
  .seq-row {
    display: flex;
    gap: 0;
    align-items: center;
    width: 100%;
  }
  .seq-label {
    width: 13px;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-align: right;
    flex-shrink: 0;
    font-weight: 700;
    padding-right: 5px;
    color: #7a7470;
  }
  .seq-steps-wrap {
    display: flex;
    flex: 1;
    gap: 4px;
  }
  .seq-group {
    display: flex;
    flex: 1;
    gap: 2px;
    background: rgba(0,0,0,0.18);
    border-radius: 5px;
    padding: 2px;
  }
  .seq-step {
    flex: 1;
    height: 24px;
    border-radius: 4px;
    background: linear-gradient(180deg, #302e2b 0%, #252320 100%);
    border: 1px solid #3e3c39;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 3px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: background 70ms, border-color 70ms, box-shadow 70ms, transform 60ms;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    touch-action: none;
  }
  .seq-step:hover:not(.on) {
    background: linear-gradient(180deg, #3a3835 0%, #2e2c29 100%);
    border-color: #5e5c58;
  }
  /* Barre de vélocité (0-127) — hauteur = vélocité, on tire le haut vers le bas */
  .seq-step-fill {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0%;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--track-color, var(--accent-bright)) 85%, white 15%),
      var(--track-color, var(--accent))
    );
    pointer-events: none;
    border-radius: 0 0 3px 3px;
  }
  /* Marqueur de micro-timing (offset en ticks) : fine barre verticale qui
     glisse dans la cellule. Centrée = sur grille (masquée). La barre de
     vélocité (.seq-step-fill) ne bouge pas → coins arrondis préservés. */
  .seq-step-micro {
    position: absolute;
    top: 2px; bottom: 2px;
    width: 2px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1px;
    background: #6adf6a;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 0 3px currentColor;
    transition: left 0.04s ease, opacity 0.1s ease;
  }
  /* Badge ratchet (×2/×3/×4) — molette sur une cellule active. */
  .seq-step-ratchet {
    position: absolute;
    top: 0; right: 1px;
    font-size: 6px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    text-shadow: 0 0 2px #000, 0 0 2px #000;
  }
  .seq-step.on {
    border-color: color-mix(in srgb, var(--track-color, var(--accent)) 60%, transparent 40%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 0 7px color-mix(in srgb, var(--track-color, #ff7a1a) 45%, transparent),
      0 0 2px color-mix(in srgb, var(--track-color, #ff7a1a) 30%, transparent);
  }
  .seq-step.playing {
    transform: scaleY(0.94);
  }
  .seq-step.playing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.18);
    border-radius: 4px;
  }

  /* ── MICRO-TIMING (state.microTiming en ticks) ──
     --mtf = offset en fraction de cellule (-0.5..+0.5), posé par updateSeqCell.
     Les steps décalés se dessinent TOUJOURS décalés (mode TIMING ou pas) —
     le son ET l'œil racontent la même chose. Le mode TIMING ne change que le
     geste (drag ⟷ = édition). .playing garde son scaleY → transforms composés. */
  .seq-step.on {
    transform: translateX(calc(var(--mtf, 0) * 100%));
  }
  .seq-step.on.playing {
    transform: translateX(calc(var(--mtf, 0) * 100%)) scaleY(0.94);
  }
  #step-seq.sd-timing .seq-step.on { cursor: ew-resize; }
  #step-seq.sd-timing .seq-step.on.mt-shifted { border-color: #6adf6a99; }

  /* Bouton TIMING — même gabarit que GRID/2BARS (.seq-top-btn).
     Inactif : FOND orange ; actif : FOND vert. Police foncée en thème clair,
     claire en skin sombre (voir skin-dark.css). Sélecteurs doublés pour
     battre .seq-top-btn défini en fin de fichier — pas de !important (ADR-16). */
  .seq-top-btn.seq-timing-btn {
    background: linear-gradient(180deg,#ff9a3a,#ff7a1a);
    border-color: #b35410;
    color: #1a1108;
  }
  .seq-top-btn.seq-timing-btn:hover {
    background: linear-gradient(180deg,#ffae58,#ff8c34);
    border-color: #8a3f0a;
    color: #000;
  }
  .seq-top-btn.seq-timing-btn.active {
    color: #0c1a0c;
    background: linear-gradient(180deg,#8aef8a,#4cbf4c);
    border-color: #2f7a2f;
    box-shadow: 0 0 6px rgba(106,223,106,0.45);
  }

  /* ── Barre de mesures scrubbable + curseur de lecture ── */
  /* Conteneur invisible — les segments portent seuls leur contour noir
     (le cadre du conteneur faisait un double contour). */
  .seq-bar-strip {
    position: relative;
    display: flex;
    gap: 3px;
    align-items: stretch;
    height: 25px;
    min-width: 140px;
    flex: 1 1 auto;
    cursor: ew-resize;
    touch-action: none;
    background: none;
    border: none;
    padding: 0;
    box-sizing: border-box;
  }
  .seq-bar-strip .seq-bar-pip { display: none; }
  /* Segment inactif : contour noir, fond gris */
  .seq-bar-strip .seq-bar-pip.in-range {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #d8d4cc;
    background: linear-gradient(180deg,#54504a,#3e3b36);
    border: 1px solid #000;
    border-radius: 2px;
    box-sizing: border-box;
    user-select: none;
  }
  .seq-bar-strip .seq-bar-pip.in-range:hover:not(.current) {
    background: linear-gradient(180deg,#64605a,#4e4b46);
  }
  /* Mesure affichée/jouée : contour noir, fond VERT (suivi de lecture) */
  .seq-bar-strip .seq-bar-pip.in-range.current {
    background: linear-gradient(180deg,#8aef8a,#4cbf4c);
    border-color: #000;
    color: #0c1a0c;
  }
  /* Curseur de lecture — animé en continu par rAF sur l'horloge audio
     (_cursorLoop, sequencer.js). PAS de transition CSS : c'est le rAF qui
     fait la fluidité, une transition ne ferait que traîner derrière. */
  .seq-strip-cursor {
    position: absolute;
    top: 1px; bottom: 1px;
    width: 2px;
    left: 0;
    background: #ffffff;
    box-shadow: 0 0 5px rgba(255,255,255,0.7);
    border-radius: 1px;
    pointer-events: none;
    will-change: left;
    z-index: 2;
  }
  /* Lignes lecture seule SEQ : sampler (SP, bleu) / piano (PNO, violet) —
     vélocité éditable, position non éditable. */
  .seq-row-extra { margin-top: 2px; }
  .seq-step-smp .seq-step-fill {
    background: linear-gradient(180deg, #7adfff, #2a9ec0);
  }
  .seq-step-smp.on {
    border-color: rgba(74,159,255,0.6);
    box-shadow: 0 0 7px rgba(74,159,255,0.45), 0 0 2px rgba(74,159,255,0.3);
    cursor: ns-resize;
  }
  .seq-step-smp.on::before { background: #7adfff; }
  .seq-step-pno .seq-step-fill {
    background: linear-gradient(180deg, #e0b8ff, #aa66dd);
  }
  .seq-step-pno.on {
    border-color: rgba(204,136,255,0.6);
    box-shadow: 0 0 7px rgba(204,136,255,0.45), 0 0 2px rgba(204,136,255,0.3);
    cursor: ns-resize;
  }
  .seq-step-pno.on::before { background: #e0b8ff; }
  /* Cases SMP vides : identiques aux cases drum (éditables via popup, ADR-51)
     → pas d'atténuation, curseur cliquable. Seul PNO reste atténué (édition
     de vélocité uniquement sur note existante). */
  .seq-step-pno:not(.on) {
    cursor: default;
    opacity: 0.45;
  }
  .seq-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    gap: 6px;
  }
  .seq-header-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #3a3630;
    flex: 1;
  }
  /* Bar navigation */
  .seq-nav {
    display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
    flex-wrap: wrap;
    /* trait noir fin sous la ligne de contrôles (séparation avec la grille) */
    border-bottom: 1px solid #0a0a0a;
    padding-bottom: 6px;
  }
  .seq-nav-btn {
    width: 28px; height: 28px; border-radius: 5px; flex-shrink: 0;
    background: linear-gradient(180deg,var(--metal-mid),var(--metal-dark));
    border: 1px solid var(--border-color); color: #c0bcb8;
    font-size: 16px; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px var(--shadow-deep);
    user-select: none; line-height: 1;
    transition: color 80ms, border-color 80ms;
  }
  .seq-nav-btn:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
  .seq-nav-btn:active { }
  /* (anciens pips ronds ◀ ●●● ▶ supprimés 2026-07-10 — remplacés par la
     barre de mesures .seq-bar-strip ; leurs règles orange écrasaient le
     vert des segments, même spécificité mais plus bas dans le fichier) */
  .seq-bar-label {
    font-size: 11px; letter-spacing: 0.14em; color: var(--accent-bright);
    font-weight: 700; margin-left: 2px;
  }
  .seq-clear-btn {
    font-size: 10px; letter-spacing: 0.12em;
    background: none; border: 1px solid var(--muted-border);
    border-radius: 3px; padding: 2px 6px;
    cursor: pointer; font-family: inherit; color: #3a3630;
  }
  .seq-clear-btn:hover { color: var(--danger); border-color: var(--danger); }
  .seq-len-btn {
    font-size: 13px; letter-spacing: 0.1em; font-weight: 700;
    background: none; border: 1px solid #5a5654;
    border-radius: 4px; padding: 4px 8px;
    cursor: pointer; font-family: inherit; color: #6a6460;
    transition: color 80ms, border-color 80ms;
  }
  .seq-len-btn:hover { color: #ccc; border-color: #aaa; }
  .seq-len-btn.active { color: var(--success); border-color: var(--success); box-shadow: 0 0 5px rgba(106,223,106,0.3); }
  .seq-beat-nums {
    display: flex;
    padding-left: 13px; /* seq-label width */
    padding-right: 85px; /* seq-ts-mini(62+4) + seq-shuf-btn(16+3) */
    margin-bottom: 2px;
    gap: 4px;
  }
  .seq-beat-group {
    display: flex;
    flex: 1;
    gap: 2px;
    padding: 0 2px;
  }
  /* Numéros 1..16 en NOIR — le blanc ne se lisait pas sur le thème clair.
     (le skin sombre admin les repasse en clair, voir skin-dark.css) */
  .seq-beat-num {
    flex: 1;
    font-size: 11px;
    color: #2e2a24;
    text-align: center;
    letter-spacing: 0;
  }
  .seq-beat-num.downbeat { color: #000000; font-weight: 700; font-size: 13px; }

  /* ── Bouton BREAKLAB (admin) : à droite du « 16 », dans la marge droite de la
     ligne des numéros (au-dessus des mini-sliders timeshift + ⟳). Réserve de
     patterns de BREAK LAB 2, ui/breaklab-pool.js. ── */
  .seq-beat-nums { position: relative; }
  .seq-bl-btn {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    height: 15px; padding: 0 5px; line-height: 13px;
    font-family: inherit; font-size: 8px; font-weight: 700; letter-spacing: 0.08em;
    color: #1a1108; background: linear-gradient(180deg, #ff9a3a, #ff7a1a);
    border: 1px solid #b35410; border-radius: 3px; cursor: pointer;
  }
  .seq-bl-btn:hover { filter: brightness(1.12); }
  html.sd-mobile .seq-bl-btn { display: none !important; }   /* marge droite 29 px sur mobile */

  /* Panneau BREAKLAB POOL : même place et même cadre que SHARE BEAT (collé à
     droite de la machine, position posée par breaklab-pool.js::_dock ; sinon
     tiroir par-dessus son bord droit). Carcasse = dégradé de .machine. */
  #blp-panel {
    position: fixed; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
    padding: 7px 10px 10px;
    background: linear-gradient(180deg, var(--surface-light, #cac6be) 0%, #bfbbb3 8%, var(--surface-light2, #b4b0a8) 100%);
    border: 1px solid var(--border-color, #52545c);
    border-radius: var(--border-radius-machine, 16px);
    box-shadow: 0 26px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
    color: #d8d4cc; font-family: 'Share Tech Mono', 'OCR B', 'Courier New', monospace;
    font-size: 12px; letter-spacing: .04em;
    animation: blp-in .18s ease;
  }
  @keyframes blp-in { from { opacity: 0; } to { opacity: 1; } }
  html.sd-skin-dark #blp-panel {
    background: linear-gradient(180deg, var(--surface-light, #3e3f45) 0%, #393a40 8%, var(--surface-light2, #34353b) 100%);
    box-shadow: 0 26px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  }
  #blp-panel button { font-family: inherit; cursor: pointer; }
  #blp-panel .blp-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 2px; }
  #blp-panel .blp-title { font-size: 17px; letter-spacing: .26em; color: var(--accent, #ff7a1a); }
  #blp-panel .blp-title b { color: var(--text-primary, #eeede8); font-weight: 700; }
  html:not(.sd-skin-dark) #blp-panel .blp-title b { color: #2a2620; }
  #blp-panel .blp-x { width: 26px; height: 26px; border-radius: 50%; background: #2a2c31; border: 1px solid #3a3d43; color: #ccc; font-size: 12px; }
  html:not(.sd-skin-dark) #blp-panel .blp-x { background: #dcd8d0; border-color: #a8a49e; color: #3a342a; }
  /* Encart sombre (comme le TOP BEATS de SHARE) */
  #blp-panel .blp-box {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    background: #23252d; border: 1px solid #16171b; border-radius: 10px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.45); overflow: hidden;
  }
  #blp-panel .blp-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 4px; }
  #blp-panel .blp-count { color: #b9b3a8; font-size: 11px; letter-spacing: .04em; }
  #blp-panel .blp-reload { height: 24px; padding: 0 9px; background: #2b2d34; border: 1px solid #45474f; color: #e9e4da; border-radius: 4px; }
  #blp-panel .blp-reload:hover { border-color: #ff7a1a; color: #ffaa44; }
  #blp-panel .blp-tools { display: flex; gap: 8px; align-items: center; padding: 4px 12px 6px; }
  #blp-panel .blp-search { flex: 1; min-width: 0; height: 28px; padding: 0 8px; background: #121315; border: 1px solid #34363b; color: #eee; border-radius: 4px; font: inherit; font-size: 12px; }
  #blp-panel .blp-search:focus { outline: none; border-color: #ff7a1a; }
  #blp-panel .blp-tools label { display: flex; gap: 4px; align-items: center; color: #9a948a; font-size: 11px; white-space: nowrap; cursor: pointer; }
  #blp-panel .blp-legend { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 0 12px 8px; color: #8a857c; font-size: 10px; }
  #blp-panel .blp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 4px;
    scrollbar-width: thin; scrollbar-color: #4a4d55 transparent; }
  #blp-panel .blp-list:hover { scrollbar-color: #ff7a1a transparent; }
  #blp-panel .blp-list::-webkit-scrollbar { width: 6px; }
  #blp-panel .blp-list::-webkit-scrollbar-track { background: transparent; }
  #blp-panel .blp-list::-webkit-scrollbar-thumb { background: #4a4d55; border-radius: 3px; }
  #blp-panel .blp-list::-webkit-scrollbar-thumb:hover { background: #ff7a1a; }
  #blp-panel .blp-item {
    display: flex; flex-direction: column; gap: 4px; text-align: left; flex-shrink: 0;
    background: #2a2c34; border: 1px solid #34363e; border-radius: 6px; padding: 7px 9px 8px;
    color: #e9e4da; font: inherit;
  }
  #blp-panel .blp-item:hover { border-color: #ff9a3a; background: #30323b; }
  #blp-panel .blp-item.cur { border-color: #ff7a1a; background: rgba(255,122,26,.14); }
  #blp-panel .blp-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
  #blp-panel .blp-name { font-size: 13px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
  #blp-panel .blp-cur { color: #ffaa44; font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
  #blp-panel .blp-info { color: #9a948a; font-size: 10.5px; padding-left: 16px; }
  #blp-panel .blp-usedtxt { color: #ff8a80; }
  #blp-panel .blp-mini { display: block; width: 100%; height: 17px; background: #15161a; border-radius: 3px; image-rendering: pixelated; }
  #blp-panel .blp-empty { color: #9a948a; padding: 16px 8px; text-align: center; line-height: 1.6; }
  .blp-dot { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: #43c95a; box-shadow: 0 0 5px #43c95a88; }
  .blp-item.used .blp-dot, .blp-dot.used { background: #e53935; box-shadow: 0 0 5px #e5393588; }

  /* Save/Load buttons */
  .pattern-actions {
    display: flex; gap: 5px; align-items: center;
  }
  .pact-btn {
    padding: 4px 9px; font-size: 11px; line-height: 15px; white-space: nowrap;
    letter-spacing: 0.14em; font-weight: 700;
    font-family: inherit; cursor: pointer; border-radius: 3px;
    transition: all 0.12s;
  }
  .pact-btn.save {
    background: var(--metal-dark); border: 1px solid var(--accent-dim); color: var(--accent-bright);
  }
  .pact-btn.save:hover { background: #ff7a1a22; border-color: var(--accent); }
  /* NEW (footer) : même fond que SAVE, texte + contour blancs. */
  .pact-btn.new {
    background: var(--metal-dark); border: 1px solid rgba(255,255,255,0.75); color: #fff;
  }
  .pact-btn.new:hover { background: #ffffff22; border-color: #fff; }
  .pact-btn.load {
    background: var(--metal-dark); border: 1px solid #6a9a6a66; color: #6acf6a;
  }
  .pact-btn.load:hover { background: #6acf6a22; border-color: #6acf6a; }

  /* Undo button */
  .undo-btn {
    padding: 3px 8px; font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
    font-family: inherit; cursor: pointer; border-radius: 3px;
    background: var(--metal-dark); border: 1px solid #8a8490; color: #b0acaa;
    transition: all 0.12s;
  }
  .undo-btn:hover { background: #5a5b6022; border-color: #b0acaa; color: #e0dcda; }
  .undo-btn:disabled { opacity: 0.35; cursor: default; }
  /* UNDO est désormais stylé comme le bouton 12 BITS (.pitch-btn, gris,
     en permanence — y compris à l'état disabled). */
  #undo-btn:disabled { opacity: 1; }
  /* Contact — blanc cassé, texte noir */
  #contact-btn { background: #e8e0d4; border-color: #c8c0b0; color: #000; }
  #contact-btn:hover { background: #fff; border-color: #e0d8cc; color: #000; }

  /* ── Gabarit commun de la ligne de contrôle du séquenceur ──
     GRID / TIMING / 2BARS / x2 / x4 : métriques IDENTIQUES à .pact-btn
     (SAVE/LOAD du séquenceur) — boutons uniformes dans tout le pane.
     Défini en FIN de fichier pour prendre le pas sur .seq-len-btn. */
  .seq-top-btn {
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    font-size: 11px;
    line-height: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    background: none;
    border: 1px solid #6a645c;
    border-radius: 3px;
    color: #33302a;
    cursor: pointer;
    font-family: inherit;
    transition: color 80ms, border-color 80ms;
  }
  .seq-top-btn:hover { color: #000; border-color: #3a342e; }
  .seq-len-btn.seq-top-btn.active { color: var(--success); border-color: var(--success); }
  /* CLEAR ALL BARS — tout à droite de la ligne, FOND orange (comme TIMING).
     Police foncée en thème clair, claire en skin sombre (skin-dark.css). */
  .seq-clear-btn {
    box-sizing: border-box; padding: 4px 9px; flex-shrink: 0;
    font-size: 11px; line-height: 15px; font-weight: 700;
    background: linear-gradient(180deg,#ff9a3a,#ff7a1a);
    border-color: #b35410;
    color: #1a1108;
  }
  .seq-clear-btn:hover {
    background: linear-gradient(180deg,#ffae58,#ff8c34);
    border-color: #8a3f0a;
    color: #000;
  }