/* Sons d'instrument (page Audio) */
.inst { display: flex; flex-direction: column; gap: 8px; }
.inst button { width: auto; }
.inst-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.inst-midi { display: inline-flex; align-items: center; gap: 6px; color: #9aa6b8; }
.inst-midi i { width: 8px; height: 8px; border-radius: 50%; background: #3a4452; } .inst-midi.on { color: #c7f5dc; } .inst-midi.on i { background: #27c76f; }
.inst-kb { display: flex; height: 86px; position: relative; user-select: none; touch-action: none; max-width: 100%; overflow: hidden; }
.inst-kb .ik { padding: 0; border-radius: 0 0 6px 6px; cursor: pointer; }
.inst-kb .wk { flex: 1 1 0; min-width: 0; background: #f4f1ea; border: 1px solid #1a1f27; height: 100%; }
.inst-kb .bk { flex: 0 0 0; width: 0; position: relative; z-index: 2; border: 0; background: none; }
.inst-kb .bk::after { content: ""; position: absolute; left: -9px; top: 0; width: 18px; height: 54px; background: #11151c; border-radius: 0 0 4px 4px; }
.inst-kb .wk.on { background: #f3c24f; } .inst-kb .bk.on::after { background: #b8902e; }
.inst-credit { font-size: 11px; opacity: .75; }
.inst-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa6b8; min-width: 92px; }
.inst-src, .inst-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inst-src button, .inst-presets button, .inst-steps button { padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.inst-src button.sel, .inst-presets button.sel, .inst-steps button.sel { background: #f3c24f; color: #1a1205; border-color: #f3c24f; font-weight: 700; }
.inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; }
.inst-grid label { display: flex; flex-direction: column; gap: 4px; }
.inst-grid select, .inst-grid input[type=range] { width: 100%; }
.inst-sel { display: flex; gap: 6px; } .inst-sel select { flex: 1; min-width: 0; }
.inst-star { flex: 0 0 auto; width: auto !important; padding: 4px 12px; font-size: 16px; } .inst-star.on { color: #f3c24f; }
.inst-steps { display: inline-flex; gap: 4px; } .inst-steps button { padding: 5px 10px; min-width: 38px; }
.inst-val { min-width: 28px; }
.inst-note { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(39,199,111,.12); color: #c7f5dc; }
.inst-note.warn { background: rgba(243,194,79,.14); color: #f6dd9c; }
.inst-adv { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.inst-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: #9aa6b8; } .inst-stats b { color: #e8edf5; margin-left: 4px; }
.inst-lib { font-size: 12px; } .inst-lib table { width: 100%; border-collapse: collapse; margin-top: 6px; } .inst-lib td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.inst-row input[type=range] { width: 220px; max-width: 100%; flex: 0 1 220px; }