/* ============================================================
   SHUFFLE DAW — vue arrangement en fenêtre flottante (ui/daw.js)
   Thème : MÊME CODE COULEUR QUE LA MACHINE — carcasse gris clair
   (surface-light → surface-light2), écrans sombres (timeline,
   LCD, VU), boutons métal foncé à texte chaud, accent orange.
   Tout est volontairement GRAND et lisible.
   ============================================================ */

/* Backdrop : la machine reste visible derrière, légèrement assombrie. */
#daw-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(52, 50, 46, 0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  user-select: none;
  -webkit-user-select: none;
  animation: daw-backdrop-in 0.18s ease-out;
}
@keyframes daw-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fenêtre flottante — même carcasse que la machine (.machine) */
.daw-window {
  position: relative; /* ancre du toast de statut (absolu) */
  display: flex;
  flex-direction: column;
  width: min(1680px, 96vw);
  height: min(1040px, 92vh);
  min-width: 780px;
  min-height: 480px;
  max-width: 98vw;
  max-height: 96vh;
  border-radius: var(--border-radius-machine, 16px);
  overflow: hidden;
  resize: both;
  border: 1px solid var(--border-color);
  background: linear-gradient(180deg, var(--surface-light) 0%, #bfbbb3 8%, var(--surface-light2) 100%);
  box-shadow: 0 26px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  color: var(--text-primary);
  font-family: 'Share Tech Mono', 'OCR B', 'Courier New', monospace;
  touch-action: none;
  animation: daw-fade-in 0.22s ease-out;
}
@keyframes daw-fade-in {
  from { opacity: 0; transform: scale(0.985) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Barre supérieure (carcasse claire, comme l'edge de la machine) ── */
.daw-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 58px 8px 14px; /* espace réservé à droite pour le ✕ ancré */
  border-bottom: 1px solid var(--muted-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.03));
  flex-shrink: 0;
  flex-wrap: wrap;
}
.daw-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-primary);
  line-height: 1.1;
}
.daw-logo b {
  color: var(--accent);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 0 12px rgba(255,122,26,0.35);
}
.daw-logo small {
  font-size: 8px;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  font-weight: 700;
}
.daw-cat {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 1px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Boutons — style "pact-btn save" de la machine : métal foncé, texte chaud,
   GRANDS et lisibles. */
.daw-btn {
  background: linear-gradient(180deg, #4a4b50, var(--metal-dark));
  border: 1px solid #2e2f33;
  color: #eee8dc;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 9px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.daw-btn:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}
.daw-btn.on {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  border-color: var(--accent-deep);
  color: #1a1210;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: 0 0 12px rgba(255,122,26,0.55), 0 2px 0 rgba(0,0,0,0.3);
}
.daw-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

.daw-play {
  width: 54px;
  height: 38px;
  font-size: 17px;
  text-align: center;
  padding: 0;
}
.daw-play.playing {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  border-color: var(--accent-deep);
  color: #1a1210;
  box-shadow: 0 0 16px rgba(255,122,26,0.65), 0 2px 0 rgba(0,0,0,0.3);
}
.daw-stop { color: #ffb0a4; }
.daw-stop:hover {
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: 0 0 10px rgba(255,80,64,0.4), 0 2px 0 rgba(0,0,0,0.3);
}
.daw-stop:active {
  background: linear-gradient(180deg, #6a2418, #4a1c14);
  border-color: var(--danger);
  color: #fff;
}

/* LCD — écran de la machine : fond noir chaud, texte orange qui luit */
.daw-lcd {
  background: #150900;
  border: 2px solid #0d0e10;
  border-radius: 6px;
  padding: 5px 14px 7px;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 9px var(--led-shadow);
  letter-spacing: 0.1em;
  min-width: 104px;
  text-align: center;
  cursor: ns-resize;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
}
.daw-lcd small {
  font-size: 9px;
  color: #a8764a;
  display: block;
  letter-spacing: 0.24em;
  text-shadow: none;
  font-weight: 700;
}

.daw-top .daw-spacer { flex: 1; align-self: stretch; }
.daw-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 15px;
  padding: 0;
  text-align: center;
}

/* ── Zone centrale scrollable — le grand ÉCRAN de la machine ── */
.daw-scroll {
  flex: 1;
  overflow: auto;
  position: relative;
  background: #12100c;
  scrollbar-width: thin;
  scrollbar-color: #6a655c #1a1712;
}
.daw-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.daw-scroll::-webkit-scrollbar-thumb { background: #6a655c; border-radius: 6px; }
.daw-scroll::-webkit-scrollbar-track { background: #1a1712; }
.daw-scroll::-webkit-scrollbar-corner { background: transparent; }

.daw-content { position: relative; width: max-content; min-width: 100%; }

/* Rangée règle — bandeau clair (carcasse) au-dessus de l'écran */
.daw-ruler-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 40;
  height: 30px;
}
.daw-corner {
  position: sticky;
  left: 0;
  z-index: 41;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--surface-light2), var(--surface-mid));
  border-bottom: 2px solid #0d0e10;
  border-right: 2px solid #0d0e10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-deep);
}
.daw-ruler {
  position: relative;
  background: linear-gradient(180deg, var(--surface-light2), var(--surface-mid));
  border-bottom: 2px solid #0d0e10;
  cursor: pointer;
  flex-shrink: 0;
}
.daw-ruler-bar {
  position: absolute;
  top: 0; bottom: 0;
  border-left: 1px solid rgba(0,0,0,0.18);
  font-size: 11px;
  font-weight: 700;
  color: #4a4438;
  padding: 6px 0 0 6px;
  pointer-events: none;
  letter-spacing: 0.05em;
}
.daw-ruler-bar.sect { border-left-color: rgba(0,0,0,0.42); color: var(--text-primary); }
.daw-ruler-bar.playing-bar {
  color: var(--accent-deep);
  text-shadow: 0 0 8px rgba(255,122,26,0.55);
}
/* Région de boucle (clic droit + drag sur la règle) */
.daw-loop-region {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(255,122,26,0.22);
  border-left: 2px solid var(--accent-deep);
  border-right: 2px solid var(--accent-deep);
  pointer-events: none;
}

.daw-start-marker {
  position: absolute;
  top: 17px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid var(--accent-deep);
  margin-left: -7px;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255,122,26,0.7));
}

/* ── Rangées piste : header clair (console) + lane sombre (écran) ── */
.daw-row {
  display: flex;
  align-items: stretch;
}
.daw-head {
  position: sticky;
  left: 0;
  z-index: 30;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--surface-light2) 0%, var(--surface-mid) 100%);
  border-bottom: 1px solid var(--muted-border);
  border-right: 2px solid #0d0e10;
  padding: 7px 10px 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}
.daw-head-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.daw-chip {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 7px var(--tc, #888), inset 0 1px 0 rgba(255,255,255,0.4);
  background: var(--tc, #888);
  border: 1px solid rgba(0,0,0,0.3);
}
.daw-head-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}
.daw-head.is-muted .daw-head-name { color: #8a8478; }
.daw-head.is-muted .daw-chip { background: #8a8478; box-shadow: none; }

/* M / S / FX — boutons console clairs, francs et gros */
.daw-ms {
  width: 26px; height: 22px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid var(--muted-border);
  background: linear-gradient(180deg, var(--btn-light), var(--surface-mid));
  color: var(--text-knob);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-family: inherit;
  box-shadow: 0 1px 0 var(--btn-shadow);
}
.daw-ms:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.daw-ms.mute-on {
  background: linear-gradient(180deg, #ff6a58, #d43a28);
  border-color: #a02818;
  color: #fff;
  box-shadow: 0 0 8px rgba(255,80,64,0.55);
}
.daw-ms.solo-on {
  background: linear-gradient(180deg, #ffd54a, #e8ac07);
  border-color: #a07808;
  color: #1a1612;
  box-shadow: 0 0 8px rgba(255,193,7,0.55);
}
.daw-fx-btn {
  width: 34px; height: 22px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* Fader de volume horizontal — glissière sombre dans la console claire */
.daw-vol {
  display: flex;
  align-items: center;
  gap: 8px;
}
.daw-vol-rail {
  flex: 1;
  height: 15px;
  border-radius: 8px;
  background: #2a2620;
  border: 1px solid #0d0e10;
  position: relative;
  cursor: ew-resize;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.7);
}
.daw-vol-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc, #888) 55%, #222), var(--tc, #888));
  box-shadow: 0 0 8px color-mix(in srgb, var(--tc, #888) 50%, transparent);
  border-radius: 8px 0 0 8px;
  pointer-events: none;
}
.daw-vol-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-deep);
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Popup FX de tranche — fenêtre flottante déplaçable/fermable ── */
.daw-fx-popup {
  position: fixed;
  z-index: 10400;
  background: linear-gradient(180deg, var(--surface-light), var(--surface-light2));
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  padding: 0 16px 14px;
  min-width: 300px;
  max-width: 580px;
  color: var(--text-primary);
  animation: daw-panel-pop 0.14s ease-out;
}
.daw-fx-popup-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px 9px 14px;
  margin: 0 -16px 12px;
  border-bottom: 1px solid var(--muted-border);
  cursor: move;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(0,0,0,0.03));
  border-radius: 10px 10px 0 0;
}
.daw-fx-popup-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
}
.daw-fx-popup-close {
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 50%;
  font-size: 12px;
  flex-shrink: 0;
}
.daw-fx-popup-knobs {
  display: flex;
  gap: 10px 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  max-width: 540px;
}
.daw-fx-popup-knobs .daw-knob-dial { width: 34px; height: 34px; }
.daw-fx-popup-knobs .daw-knob-dial::after { height: 13px; transform-origin: 50% 15px; }
.daw-fx-popup-knobs .daw-knob-label { font-size: 10px; white-space: nowrap; }

/* Écran EQ inséré dans le popup FX (SAMPLE / PIANO) — le contenu EQ de la
   machine est conçu pour un fond sombre → encart écran dédié */
.daw-fx-popup-eq {
  margin-top: 12px;
  background: #141210;
  border: 2px solid #0d0e10;
  border-radius: 8px;
  padding: 10px 12px 12px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
  width: 300px;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #e0d8cc;
}

/* Mini popup du potard de filtre par bloc */
.daw-filter-popup {
  position: fixed;
  z-index: 10450;
  background: linear-gradient(180deg, var(--surface-light), var(--surface-light2));
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  padding: 0 18px 12px;
  min-width: 230px;
  color: var(--text-primary);
  animation: daw-panel-pop 0.14s ease-out;
}
.daw-filter-popup .daw-fx-popup-head { margin: 0 -18px 12px; }
.daw-filter-popup-body {
  display: flex;
  justify-content: center;
  padding: 2px 0 6px;
}
.daw-filter-popup-body .daw-knob-dial { width: 52px; height: 52px; }
.daw-filter-popup-body .daw-knob-dial::after { height: 20px; transform-origin: 50% 24px; width: 3px; }
.daw-filter-popup-body .daw-knob-label { font-size: 12px; }
.daw-filter-popup-hint {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

.daw-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: ns-resize;
}
.daw-knob-dial {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), transparent 60%), linear-gradient(180deg, #4a4b50, #2e2f33);
  border: 1px solid #1e1f22;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.daw-knob-dial::after {
  content: "";
  position: absolute;
  left: 50%; top: 2px;
  width: 2.5px; height: 10px;
  background: var(--accent-bright);
  border-radius: 1px;
  transform-origin: 50% 11px;
  transform: translateX(-50%) rotate(var(--rot, 0deg));
  box-shadow: 0 0 4px rgba(255,122,26,0.7);
}
.daw-knob-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-deep);
}
.daw-knob.lit .daw-knob-label { color: var(--accent-deep); }

/* ── Lanes — l'écran sombre (les clips colorés y ressortent) ── */
.daw-lane {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid #262019;
}
.daw-row:nth-child(odd) .daw-lane { background-color: #161310; }
.daw-row:nth-child(even) .daw-lane { background-color: #14110d; }

/* ── Clips ── */
.daw-clip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--tc, #888) 75%, #000);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tc, #888) 30%, #14110d) 0%, color-mix(in srgb, var(--tc, #888) 14%, #14110d) 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.55), inset 0 1px 0 color-mix(in srgb, var(--tc, #888) 30%, transparent);
  cursor: grab;
  overflow: hidden;
  transition: box-shadow 0.1s;
}
.daw-clip:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 0 1px color-mix(in srgb, var(--tc, #888) 60%, transparent); }
.daw-clip.selected {
  border-color: #fff;
  box-shadow: 0 0 0 1px #fff, 0 0 16px color-mix(in srgb, var(--tc, #888) 70%, transparent), 0 2px 10px rgba(0,0,0,0.6);
  z-index: 5;
}
.daw-clip.dragging { opacity: 0.85; cursor: grabbing; z-index: 6; }
.daw-clip canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.daw-clip-label {
  position: absolute;
  top: 2px; left: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--tc, #fff) 80%, #fff);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
  white-space: nowrap;
}
.daw-clip-edge {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 9px;
  cursor: ew-resize;
  border-radius: 0 6px 6px 0;
}
.daw-clip-edge:hover { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tc, #fff) 55%, transparent)); }

/* Curseurs outils */
.daw-scroll.tool-cut  .daw-clip { cursor: col-resize; }
.daw-scroll.tool-erase .daw-clip { cursor: not-allowed; }

/* ── Lasso de sélection ── */
.daw-marquee {
  position: absolute;
  z-index: 25;
  border: 1px dashed rgba(255,148,64,0.9);
  background: rgba(255,122,26,0.12);
  border-radius: 3px;
  pointer-events: none;
}

/* ── Playhead ── */
#daw-playhead {
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 9px rgba(255,122,26,0.85);
  pointer-events: none;
  z-index: 20;
  display: none;
  /* position interpolée en continu (RAF) sur l'horloge audio */
}
#daw-playhead::before {
  content: "";
  position: absolute;
  top: -1px; left: -6px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--accent-bright);
  filter: drop-shadow(0 0 4px rgba(255,122,26,0.8));
}

/* ── Panneau d'édition d'un module master (popup façon machine) ── */
.daw-chain-panel {
  position: fixed;
  z-index: 10400;
  background: linear-gradient(180deg, var(--surface-light), var(--surface-light2));
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 -8px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  padding: 12px 18px 14px;
  min-width: 270px;
  color: var(--text-primary);
  animation: daw-panel-pop 0.14s ease-out;
}
@keyframes daw-panel-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.daw-chain-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.daw-chain-panel-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.daw-chain-panel-hint {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex: 1;
}
.daw-chain-byp { font-size: 11px; padding: 7px 12px; }
.daw-chain-panel-knobs {
  display: flex;
  gap: 18px;
  align-items: flex-end;
}
.daw-chain-panel-knobs .daw-knob-dial { width: 36px; height: 36px; }
.daw-chain-panel-knobs .daw-knob-dial::after { height: 14px; transform-origin: 50% 16px; }
.daw-chain-panel-knobs .daw-knob-label { font-size: 11px; }

/* ── Bandeau MASTER — UNE rangée fine, tout à la suite ── */
.daw-master {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 3px 12px 4px;
  border-top: 2px solid #0d0e10;
  background: linear-gradient(180deg, var(--surface-light2), var(--surface-mid));
}
.daw-master-row {
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  min-height: 30px;
}
.daw-master-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.daw-master .daw-vol { width: 128px; }
.daw-master .daw-knob { flex-direction: row; gap: 4px; }
.daw-master .daw-knob .daw-knob-label { font-size: 9px; text-align: left; white-space: nowrap; }
.daw-master .daw-knob-dial { width: 22px; height: 22px; flex-shrink: 0; }
.daw-master .daw-knob-dial::after { height: 8px; transform-origin: 50% 9px; }
.daw-master .daw-btn { padding: 6px 9px; font-size: 10px; }

.daw-chain {
  display: flex;
  align-items: center;
  gap: 4px;
}
.daw-chain-arrow { color: #5a5248; font-size: 10px; font-weight: 700; }
.daw-chain-block {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(180deg, #4a4b50, var(--metal-dark));
  border: 1px solid #2e2f33;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c8c2b6;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.daw-chain-block:hover { border-color: var(--accent); color: #fff; }
.daw-chain-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #23241f;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.5);
}
.daw-chain-block.active { color: #fff; }
.daw-chain-block.active .daw-chain-led {
  background: var(--accent-bright);
  box-shadow: 0 0 8px rgba(255,122,26,0.95);
}
/* Bouton EXPORT — en bas à droite du bandeau master */
.daw-export {
  margin-left: auto;
  color: var(--accent-bright);
  border-color: var(--accent-dim-strong);
  font-size: 12px;
}
.daw-export:disabled { opacity: 0.6; cursor: wait; }

.daw-vu {
  width: 104px;
  height: 26px;
  background: #150900;
  border: 2px solid #0d0e10;
  border-radius: 5px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
}

/* ── Menu contextuel clip (popup sombre de la machine) ── */
.daw-ctx {
  position: fixed;
  z-index: 10400;
  background: #16161e;
  border: 1px solid #3a3a42;
  border-radius: 7px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.6);
  padding: 5px;
  min-width: 190px;
}
.daw-ctx button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #d8d2c8;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 9px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.daw-ctx button:hover { background: rgba(255,122,26,0.16); color: var(--accent-bright); }
.daw-ctx button.danger:hover { background: rgba(255,80,64,0.16); color: var(--danger); }

/* ── Aide (raccourcis) ── */
.daw-help {
  position: fixed;
  inset: 0;
  z-index: 10300;
  background: rgba(30, 28, 25, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.daw-help-card {
  background: linear-gradient(180deg, var(--surface-light), var(--surface-light2));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px 32px;
  max-width: 560px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
  color: var(--text-primary);
}
.daw-help-card h3 {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  margin: 0 0 14px;
}
.daw-help-row {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  font-size: 12px;
  padding: 5px 0;
  color: var(--text-deep);
}
.daw-help-row b { color: var(--text-primary); font-weight: 700; }

/* ── Barre de progression d'export — au MILIEU du DAW ── */
.daw-progress {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 90;
  width: 380px;
  background: #150900;
  border: 2px solid #0d0e10;
  border-radius: 10px;
  padding: 16px 20px 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.7), 0 0 24px rgba(255,122,26,0.25);
}
.daw-progress-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-shadow: 0 0 8px var(--led-shadow);
  margin-bottom: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daw-progress-rail {
  height: 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.daw-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
  box-shadow: 0 0 10px rgba(255,122,26,0.7);
  transition: width 0.15s ease-out;
}

/* ── Statut — toast flottant en bas à droite, au-dessus du master ── */
.daw-statusbar {
  position: absolute;
  right: 14px;
  bottom: 52px;
  z-index: 60;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  background: rgba(18, 14, 9, 0.88);
  border: 1px solid rgba(255,122,26,0.35);
  border-radius: 5px;
  padding: 5px 11px;
  pointer-events: none;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daw-statusbar:empty { display: none; }