/* ============================================================
   SHUFFLE DRUMMER — Pane SAMPLER (SMP) : pads, waveform, popups pitch
   ============================================================ */
  /* ── SAMPLER ── */
  #pane-sampler { display:none; flex-direction:column; overflow-y:auto; flex:1; }
  #pane-sampler.active { display:flex !important; }
  /* Sampler right-click marker drag highlight */
  .smp-marker-drag { background: rgba(255,255,255,0.15) !important; }
  /* Sampler sequencer pads */
  .smp-seq-pad {
    height: 24px; background:#2a2a36; border:1px solid #44445a;
    border-radius:3px; cursor:pointer; display:flex; flex-direction:column;
    align-items:center; justify-content:center; position:relative;
    user-select:none; -webkit-user-select:none; touch-action:none;
    transition: background 60ms, border-color 60ms;
    overflow:hidden;
  }
  .smp-seq-pad.on { background:#b84818; border-color:#ff7040; box-shadow:0 0 6px #ff602066; }
  .smp-seq-pad.beat-flash { box-shadow:0 0 10px #ff8000ee inset !important; border-color:#ffaa00 !important; }
  /* pads avec slice assignée : fond bleu + texte noir lisible */
  .smp-seq-pad.assigned { background:#1e4a9a; border-color:#4488ee; }
  .smp-seq-pad.on.assigned { background:#3a7aff; border-color:#88bbff; box-shadow:0 0 6px #3a7aff88; }
  /* label principal : numéro de step petit en haut, assignation grande au centre */
  .smp-seq-num { font-size:8px; font-weight:400; color:#55556a; line-height:1; margin-bottom:1px; }
  .smp-seq-pad.on .smp-seq-num { color:#ff9060; }
  .smp-seq-pad.assigned .smp-seq-num { color:#88aadd; }
  .smp-seq-pad.on.assigned .smp-seq-num { color:#000a; }
  .smp-seq-main { font-size:13px; font-weight:700; letter-spacing:0.04em; color:#9090b8; line-height:1; }
  .smp-seq-pad.on .smp-seq-main { color:#ffd0b0; }
  .smp-seq-pad.assigned .smp-seq-main { color:#c8deff; }
  .smp-seq-pad.on.assigned .smp-seq-main { color:#000; }
  /* bouton MUTE par ligne de slot */
  .smp-seq-mute-btn {
    flex-shrink:0; width:20px; background:#2a2a36; border:1px solid #6060aa;
    color:#aaaadd; font-family:inherit; font-size:9px; font-weight:900;
    letter-spacing:0; border-radius:2px; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center; align-self:stretch;
  }
  .smp-seq-mute-btn:hover { background:#3a3a52; border-color:#8888cc; color:#ccccff; }
  .smp-seq-mute-btn.muted { background:#5a0808; border-color:#ff2222; color:#ff6666; }
  /* ligne entière mutée : légèrement transparente */
  .smp-row-muted { opacity:0.35; }
  .smp-row-muted .smp-seq-mute-btn { opacity:1; }
  .smp-tbtn {
    background:#1a1a20; border:1px solid #3a3a42; color:var(--smp-text);
    font-family:inherit; font-size:9px; letter-spacing:0.1em;
    padding:2px 5px; border-radius:2px; cursor:pointer;
    transition:color 80ms, border-color 80ms;
  }
  .smp-tbtn:hover { color:var(--accent-bright); border-color:var(--accent-dim-strong); }
  /* Boutons zoom +/- du séquenceur sampler — mis en avant (accent) */
  .smp-zoom-btn {
    background:#1a1a20; border:1px solid var(--accent-dim-strong); color:var(--accent-bright);
    font-family:inherit; font-size:11px; font-weight:700; letter-spacing:0.1em;
    padding:2px 7px; border-radius:2px; cursor:pointer; line-height:1;
    transition:color 80ms, border-color 80ms, background 80ms;
  }
  .smp-zoom-btn:hover { color:var(--white); border-color:var(--accent-bright); background:var(--accent-dim); }
  .smp-zoom-btn.on { color:var(--white); background:var(--accent); border-color:var(--accent-bright); }
  .smp-slice-btn { padding:2px 10px; font-size:12px; }
  .smp-slice-btn.on { color:#fff; background:#c0392b; border-color:#ff5040; }

  /* ── Barres d'outils du haut du sampler : boutons légèrement agrandis
        (scopé aux 2 conteneurs pour ne PAS toucher le séquenceur qui
        réutilise .smp-zoom-btn / .smp-tbtn) ── */
  #smp-toolbar-left .smp-tbtn,
  #smp-toolbar .smp-tbtn { padding:4px 8px; font-size:11px; }
  #smp-toolbar .smp-zoom-btn { padding:4px 10px; font-size:13px; }
  #smp-toolbar .smp-slice-btn { padding:4px 13px; font-size:14px; }
  /* BROWSE et PITCH portent un padding/font-size inline (ADR-16) →
     !important autorisé uniquement pour surcharger l'inline */
  #smp-toolbar-left .smp-tbtn { padding:6px 15px !important; font-size:12px !important; }
  .smp-pad {
    aspect-ratio:1; background:#141418; border:1px solid #222228;
    border-radius:2px; cursor:pointer; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-size:9px; font-weight:700; letter-spacing:0.08em; color:#6a6a72;
    transition:background 60ms, border-color 60ms;
    overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none;
  }
  .smp-pad.has-slice { border-color:#2e2e38; color:var(--smp-text); }
  .smp-pad.playing { background:#2a1a08; border-color:var(--accent); color:var(--accent-bright); }
  .smp-pad.has-slice:active { background:#1e1e26; }
  .smp-pad-num { font-size:7px; opacity:0.4; position:absolute; top:2px; left:3px; }
  .smp-pad-mini { width:100%; height:20px; position:absolute; bottom:0; opacity:0.5; }

  /* ══ SAMPLE BROWSER MODAL ══════════════════════════════════════ */

  /* Fond semi-transparent qui couvre tout */
  #smp-browser {
    position:fixed; inset:0; z-index:9000;
    background:rgba(4,4,6,0.88);
    display:flex; align-items:center; justify-content:center;
  }

  /* Panneau central */
  #smp-brw-inner {
    display:flex; flex-direction:column;
    width:min(660px, 94vw); height:min(520px, 90vh);
    background:#1e1e22;
    border:1px solid #383840;
    border-radius:4px;
    box-shadow:0 16px 80px rgba(0,0,0,0.9);
    overflow:hidden;
  }

  /* Barre de titre */
  #smp-brw-titlebar {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 18px; background:#252528;
    border-bottom:2px solid #ff9440; flex-shrink:0;
  }
  #smp-brw-title {
    font-size:12px; font-weight:700; color:#ff9440;
    letter-spacing:0.3em;
  }
  #smp-browser-close-btn {
    font-size:10px; padding:4px 12px; background:transparent;
    border:1px solid #44444e; color:#888890; border-radius:2px;
    cursor:pointer; font-family:inherit; letter-spacing:0.12em;
    transition:color 70ms, border-color 70ms;
  }
  #smp-browser-close-btn:hover { color:#ff9440; border-color:#ff9440; }

  /* Barre de navigation / breadcrumb */
  #smp-brw-nav {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 18px; background:#1a1a1e;
    border-bottom:1px solid #2a2a30; gap:10px; flex-shrink:0;
  }
  #smp-browser-crumb {
    display:flex; align-items:center; flex-wrap:nowrap;
    flex:1; overflow:hidden; min-width:0;
  }
  .smp-brw-crumb-seg { font-size:11px; color:#666672; letter-spacing:0.07em; white-space:nowrap; }
  .smp-brw-crumb-sep { font-size:10px; color:#44444e; margin:0 6px; }
  .smp-brw-crumb-cur { font-size:11px; color:#ff9440; letter-spacing:0.1em; font-weight:700; white-space:nowrap; }
  #smp-browser-change-btn {
    font-size:10px; padding:4px 12px; background:#252528;
    border:1px solid #3a3a44; color:#8888a0; border-radius:2px;
    cursor:pointer; font-family:inherit; letter-spacing:0.1em;
    white-space:nowrap; flex-shrink:0;
    transition:color 70ms, border-color 70ms;
  }
  #smp-browser-change-btn:hover { color:#ff9440; border-color:#ff9440; }

  /* Barre de recherche */
  #smp-brw-searchbar {
    display:flex; align-items:center; gap:8px;
    padding:7px 18px; background:#161619;
    border-bottom:1px solid #2a2a30; flex-shrink:0;
  }
  #smp-brw-search-icon { font-size:11px; opacity:0.6; flex-shrink:0; }
  #smp-brw-search {
    flex:1; min-width:0; background:#0e0e10;
    border:1px solid #33333c; border-radius:3px;
    color:#ddd8c8; font-family:inherit; font-size:11px;
    letter-spacing:0.08em; padding:5px 9px; outline:none;
    transition:border-color 70ms;
  }
  #smp-brw-search::placeholder { color:#55555f; letter-spacing:0.1em; }
  #smp-brw-search:focus { border-color:#ff7a1a; }
  #smp-brw-search-clear {
    flex-shrink:0; background:#252528; border:1px solid #3a3a44;
    color:#8888a0; border-radius:2px; cursor:pointer;
    font-family:inherit; font-size:11px; padding:4px 9px;
    transition:color 70ms, border-color 70ms;
  }
  #smp-brw-search-clear:hover { color:#ff9440; border-color:#ff9440; }

  /* Liste des fichiers */
  #smp-browser-list {
    flex:1; overflow-y:auto; display:flex; flex-direction:column;
    scrollbar-width:thin; scrollbar-color:#333338 transparent;
    min-height:0; background:#1e1e22;
  }
  #smp-browser-list::-webkit-scrollbar { width:5px; }
  #smp-browser-list::-webkit-scrollbar-track { background:transparent; }
  #smp-browser-list::-webkit-scrollbar-thumb { background:#333338; border-radius:3px; }
  #smp-browser-list::-webkit-scrollbar-thumb:hover { background:#44444e; }
  .smp-brw-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 18px; cursor:pointer; position:relative;
    border-bottom:1px solid #28282e; flex-shrink:0;
    transition:background 40ms; overflow:hidden;
    user-select:none;
  }
  .smp-brw-item:hover       { background:#252530; }
  .smp-brw-item.smp-brw-sel {
    background:#2a1e08;
    border-left:3px solid #ff9440;
    padding-left:15px;
  }
  .smp-brw-back             { opacity:0.6; }
  .smp-brw-back:hover       { opacity:1; background:#232328; }

  .smp-brw-icon {
    font-size:11px; width:14px; text-align:center; flex-shrink:0;
    color:#44444e;
  }
  .smp-brw-item.smp-brw-sel .smp-brw-icon { color:#ff9440; }
  .smp-brw-dir .smp-brw-icon  { color:#6060b8; }
  .smp-brw-back .smp-brw-icon { color:#666672; }

  .smp-brw-name {
    font-size:11px; letter-spacing:0.04em; color:#aaaabc;
    flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color 40ms;
  }
  .smp-brw-item:hover .smp-brw-name        { color:#ccccdd; }
  .smp-brw-item.smp-brw-sel .smp-brw-name  { color:#ffd08a; }
  .smp-brw-dir .smp-brw-name               { color:#7070c0; }
  .smp-brw-dir:hover .smp-brw-name         { color:#9898d8; }
  .smp-brw-back .smp-brw-name              { color:#888890; font-style:italic; }

  .smp-brw-ext {
    font-size:9px; letter-spacing:0.1em; font-weight:700;
    flex-shrink:0; min-width:34px; text-align:right; opacity:0.85;
  }
  .smp-brw-size {
    font-size:9px; color:#55555e; letter-spacing:0.05em;
    flex-shrink:0; min-width:38px; text-align:right;
    transition:color 40ms;
  }
  .smp-brw-item:hover .smp-brw-size        { color:#888890; }
  .smp-brw-item.smp-brw-sel .smp-brw-size  { color:#aa7744; }

  .smp-brw-bar {
    position:absolute; left:0; bottom:0; height:2px; width:0%;
    background:linear-gradient(90deg,#902800,#ff9440);
    pointer-events:none;
  }

  .smp-brw-loading {
    font-size:11px; color:#555560; padding:30px;
    letter-spacing:0.25em; text-align:center;
    animation:smp-brw-pulse 1s ease-in-out infinite alternate;
  }
  .smp-brw-empty {
    font-size:11px; color:#444450; padding:30px;
    letter-spacing:0.2em; text-align:center;
  }
  @keyframes smp-brw-pulse { from { opacity:0.25; } to { opacity:1; } }

  /* Footer */
  #smp-brw-footer {
    display:flex; align-items:center; gap:14px;
    padding:11px 18px; background:#252528;
    border-top:1px solid #333338; flex-shrink:0;
  }
  #smp-brw-nowplaying {
    display:flex; align-items:center; gap:10px;
    flex:1; min-width:0;
  }
  #smp-brw-np-icon { font-size:11px; color:#ff9440; flex-shrink:0; }
  #smp-brw-np-name {
    font-size:11px; color:#ddddee; letter-spacing:0.05em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    flex:1; min-width:0;
  }
  #smp-brw-np-track {
    width:160px; height:14px; flex-shrink:0;
    display:flex; align-items:center; cursor:pointer; position:relative;
  }
  #smp-brw-np-rail {
    position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
    height:3px; background:#33333a; border-radius:2px; overflow:hidden;
  }
  #smp-brw-np-bar {
    height:100%; width:0%;
    background:linear-gradient(90deg,#902800,#ff9440);
    transition:none;
  }
  #smp-brw-np-thumb {
    position:absolute; top:50%; transform:translate(-50%,-50%);
    width:9px; height:9px; background:#ff9440; border-radius:50%;
    box-shadow:0 0 4px #ff944088; pointer-events:none;
    left:0%; transition:none; opacity:0;
  }
  #smp-brw-nowplaying[style*="visible"] #smp-brw-np-thumb { opacity:1; }
  #smp-brw-np-dur {
    font-size:10px; color:#666672; letter-spacing:0.06em; flex-shrink:0;
  }
  #smp-browser-load-btn {
    font-size:11px; padding:7px 22px; background:#1e1600;
    border:1px solid #ff9440; color:#ff9440; border-radius:3px;
    cursor:pointer; font-family:inherit; letter-spacing:0.15em; font-weight:700;
    white-space:nowrap; flex-shrink:0;
    transition:background 70ms, box-shadow 70ms;
  }
  #smp-browser-load-btn:hover:not(:disabled) {
    background:#2e2000;
    box-shadow:0 0 14px #ff944055;
  }
  #smp-browser-load-btn:disabled { opacity:0.25; cursor:default; }

  #smp-brw-right-controls {
    display:flex; align-items:center; gap:14px;
    margin-left:auto; flex-shrink:0;
  }
  #smp-brw-stop-btn {
    width:28px; height:28px; flex-shrink:0;
    background:#c86000; border:none; border-radius:3px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:10px; color:#fff; padding:0;
    transition:background 70ms;
  }
  #smp-brw-stop-btn:hover { background:#ff8000; }

  #smp-brw-vol-wrap {
    display:flex; align-items:center; gap:6px; flex-shrink:0;
  }
  #smp-brw-vol-icon { font-size:12px; flex-shrink:0; user-select:none; }
  #smp-brw-vol {
    -webkit-appearance:none; appearance:none;
    width:80px; height:3px; border-radius:2px; outline:none; cursor:pointer;
    background:linear-gradient(to right,#ff9440 80%,#333340 80%);
  }
  #smp-brw-vol::-webkit-slider-thumb {
    -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
    background:#ff9440; border:1px solid #ffb870; cursor:pointer;
    box-shadow:0 0 4px #ff944066;
  }
  #smp-brw-vol::-moz-range-thumb {
    width:12px; height:12px; border-radius:50%;
    background:#ff9440; border:1px solid #ffb870; cursor:pointer; border:none;
  }
  #smp-brw-vol::-moz-range-track { height:3px; border-radius:2px; background:#333340; }

  /* Bouton BROWSE dans letat vide */
  .smp-brw-open-btn {
    background:#1a1a1e; border:1px solid #333340; color:#7070a0;
    font-family:inherit; font-size:10px; letter-spacing:0.2em;
    padding:6px 16px; border-radius:2px; cursor:pointer;
    transition:color 80ms, border-color 80ms;
  }
  .smp-brw-open-btn:hover { color:#ff9440; border-color:#ff9440; }

    /* Sampler pitch popup */
  #smp-pitch-popup { display:none;position:fixed;background:#1a1814;border:1px solid var(--accent-dim-strong);border-radius:6px;padding:8px 6px;z-index:9999;width:56px;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 20px rgba(0,0,0,0.8); }
  #smp-pitch-popup.open { display:flex !important; }
  /* Piano roll pitch popup */
  #pr-pitch-popup.open { display:flex !important; }