/* Battrochtek v17 — Oat UI + séquenceur spécialisé */
:root {
    --bt-bg: light-dark(#f5f7fa, #101419);
    --bt-panel: light-dark(#ffffff, #171c22);
    --bt-panel-2: light-dark(#f7f9fb, #1d242c);
    --bt-control: light-dark(#ffffff, #11171d);
    --bt-grid: light-dark(#eef1f4, #11161c);
    --bt-border: light-dark(#d8dee6, #303946);
    --bt-border-strong: light-dark(#adb8c4, #526171);
    --bt-text: light-dark(#14202b, #edf3f8);
    --bt-muted: light-dark(#657382, #8d9aa8);
    --bt-instrument-text: light-dark(#25313d, #edf3f8);
    --bt-tooltip-bg: light-dark(#18212a, #f4f7fa);
    --bt-tooltip-text: light-dark(#f7fafc, #17212b);
    --bt-accent: #39caa5;
    --bt-accent-strong: #16a985;
    --bt-active: #f0b841;
    --bt-active-fg: #201805;
    --bt-danger: #e05663;
    --bt-warning: #d59b24;
    --bt-cell-off: light-dark(#dfe5ea, #28313a);
    --bt-cell-hover: light-dark(#cfd8df, #3a4651);
    --bt-ghost: #596879;
    --bt-soft: #7fc9e8;
    --bt-normal: light-dark(#343b43, #f2f1e8);
    --bt-strong: #ff9e55;
    --bt-accent-step: #ff4f69;
    --bt-control-h: 38px;
    --bt-radius: 7px;
    --bt-gap: 8px;
    --bt-track-width: 10%;
    --bt-slider-width: 9%;
    --bt-grid-width: 80.5%;
    --bt-track-gap: 0.5%;
    --bt-row-h: 22px;
    --bt-max-width: 72rem;
    --bt-kit-color: var(--bt-accent);

    /* Oat tokens : une seule source de vérité pour le thème. */
    --background: var(--bt-bg);
    --foreground: var(--bt-text);
    --card: var(--bt-panel);
    --card-foreground: var(--bt-text);
    --primary: var(--bt-accent-strong);
    --primary-foreground: #fff;
    --secondary: var(--bt-panel-2);
    --secondary-foreground: var(--bt-text);
    --muted: var(--bt-panel-2);
    --muted-foreground: var(--bt-muted);
    --faint: var(--bt-panel-2);
    --border: var(--bt-border);
    --input: var(--bt-border);
    --ring: var(--bt-accent);
    --danger: var(--bt-danger);
}

html {
    min-width: 320px;
    background: var(--bt-bg);
}
body {
    min-height: 100vh;
    padding: 0 0 24px;
    overflow-x: auto;
    background: var(--bt-bg);
    color: var(--bt-text);
}
button,
select,
input {
    font: inherit;
}
button i {
    pointer-events: none;
}
[x-cloak] {
    display: none !important;
}

/* Layout */
#nav-back {
    position: absolute;
    inset: 0 0 auto;
    height: 58px;
    z-index: -1;
    background: var(--bt-panel-2);
    border-bottom: 1px solid var(--bt-border);
}
.drum-machine-container {
    width: min(calc(100% - 24px), var(--bt-max-width));
    min-width: 0;
    margin: 0 auto;
}
.drum-machine-clear {
    clear: both;
}
.bt {
    overflow: hidden;
    border: 1px solid var(--bt-border);
    border-radius: 12px;
    background: var(--bt-panel);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.08);
}

/* Header */
.bt-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 4px 8px;
}
.bt-header h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.18rem;
    letter-spacing: 0.01em;
}
.bt-header-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.groove-search-wrap {
    flex: 1 1 420px;
    max-width: 480px;
    min-width: 220px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}
.groove-search-wrap > i {
    position: absolute;
    left: 11px;
    z-index: 1;
    color: var(--bt-muted);
    font-size: 12px;
    pointer-events: none;
}
.groove-search-wrap input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius);
    background: var(--bt-control);
    color: var(--bt-text);
    font-size: 11px;
}
.groove-search-wrap input::placeholder {
    color: var(--bt-muted);
}
.groove-search-wrap input:focus {
    border-color: var(--bt-accent);
    outline: 2px solid color-mix(in srgb, var(--bt-accent) 24%, transparent);
}

.groove-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: min(440px, 62vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--bt-border);
    border-radius: calc(var(--bt-radius) + 2px);
    background: var(--bt-panel);
    color: var(--bt-text);
    box-shadow: 0 14px 34px rgb(0 0 0 / 0.22);
    backdrop-filter: blur(14px);
}
.groove-search-results[hidden] {
    display: none;
}
.groove-search-result {
    width: 100%;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--bt-radius);
    background: transparent;
    color: var(--bt-text);
    text-align: left;
    cursor: pointer;
}
.groove-search-result:hover,
.groove-search-result.is-active {
    background: color-mix(in srgb, var(--bt-accent) 13%, var(--bt-control));
}
.groove-search-result-main {
    overflow: hidden;
    color: var(--bt-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.groove-search-result-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: var(--bt-muted);
    font-size: 9px;
    line-height: 1.25;
    white-space: nowrap;
}
.groove-search-result-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.groove-search-result-meta span + span::before {
    content: "•";
    margin-right: 7px;
    color: var(--bt-border-strong);
}
.groove-search-empty {
    padding: 13px 10px;
    color: var(--bt-muted);
    font-size: 11px;
    text-align: center;
}

.output-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-icon-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    color: var(--bt-accent-strong);
}
.header-icon-button i {
    font-size: 14px;
}
.master-level-button.volume-off {
    color: var(--bt-muted);
}
.master-level-button.volume-low,
.master-level-button.volume-high {
    color: var(--bt-accent-strong);
}
.master-level-button.volume-high {
    filter: drop-shadow(0 0 4px rgb(57 202 165 / 0.28));
}
.vu-meter-wrap {
    min-width: 205px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vu-label {
    color: var(--bt-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.vu-meter {
    width: 158px;
    height: 12px;
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--bt-border);
    border-radius: 4px;
    background: var(--bt-grid);
}
.vu-segment {
    flex: 1;
    border-radius: 1px;
    background: var(--bt-border);
    opacity: 0.65;
}
.vu-segment.active {
    background: #57c985;
    opacity: 1;
    box-shadow: 0 0 4px #57c985;
}
.vu-segment:nth-child(n + 12).active {
    background: #e2b843;
    box-shadow: 0 0 4px #e2b843;
}
.vu-segment:nth-child(n + 15).active {
    background: #e85b64;
    box-shadow: 0 0 4px #e85b64;
}

/* Oat fields used by the two top toolbars */
.score-toolbar,
.instrument-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.score-toolbar {
    padding: 10px 12px 6px;
}
.score-toolbar .preset-selector {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(210px, 0.9fr) minmax(150px, 0.7fr) minmax(280px, 1.7fr) 38px 38px;
    align-items: stretch;
    gap: var(--bt-gap);
}
.score-toolbar .preset-selector > * {
    align-self: stretch;
}
.score-toolbar .preset-selector > .bt-button {
    height: var(--bt-control-h);
    min-height: var(--bt-control-h);
    margin: 0;
}
.instrument-toolbar {
    justify-content: space-between;
    gap: 18px;
    padding: 4px 12px 15px;
}
.groove-edit-tools {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.groove-edit-tools .variation-button {
    flex: 0 0 auto;
}
.instrument-toolbar > .pattern-shift-pad {
    flex: 0 0 auto;
}
.instrument-toolbar > .groove-edit-center {
    flex: 1 1 auto;
    justify-content: center;
}
.pattern-shift-pad {
    display: grid;
    grid-template-columns: repeat(4, 30px);
    gap: 4px;
}
.pattern-shift-pad .pattern-shift-global {
    width: 30px;
    min-width: 30px;
    padding: 0;
}
.groove-preview.bt-buttondown,
.groove-preview[aria-pressed="true"] {
    background: var(--bt-active);
    color: var(--bt-active-fg);
    border-color: var(--bt-active);
    box-shadow:
        0 0 0 1px rgb(240 184 65 / 0.26),
        0 0 12px rgb(240 184 65 / 0.24);
}
.control-field[data-field] {
    min-width: 0;
    height: var(--bt-control-h);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--bt-gap);
    margin: 0;
    color: var(--bt-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.09em;
}
.control-field[data-field] > span:first-child {
    display: inline-flex;
    align-items: center;
    height: var(--bt-control-h);
    white-space: nowrap;
}
.control-field select {
    margin: 0;
    width: 100%;
    height: var(--bt-control-h);
    min-height: var(--bt-control-h);
    padding: 0 28px 0 9px;
    font-size: 10px;
    font-weight: 700;
}
.instrument-toolbar .kit-selector {
    width: 205px;
    min-width: 205px;
}
.instrument-toolbar .swing-edit {
    width: 126px;
    grid-template-columns: auto 72px;
    gap: 3px;
}
.icon-label {
    width: 18px;
    justify-content: center;
    color: var(--bt-accent-strong);
    font-size: 15px;
}
.percent-edit {
    height: var(--bt-control-h);
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius);
    background: var(--bt-control);
}
.percent-edit input {
    width: 100%;
    height: 100%;
    padding: 0 22px 0 8px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bt-text);
    text-align: right;
    font:
        700 12px/1 ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    appearance: textfield;
}
.percent-edit input::-webkit-inner-spin-button,
.percent-edit input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}
.percent-edit > span {
    position: absolute;
    right: 8px;
    color: var(--bt-muted);
    font-size: 9px;
}
.preset-icon,
.variation-button {
    height: var(--bt-control-h);
    min-height: var(--bt-control-h);
    margin: 0;
}
.preset-icon {
    width: 38px;
    min-width: 38px;
    padding: 0;
}
.variation-button {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Grid / tracks / sliders */
.bt-left,
.bt-grid,
.bt-right {
    float: left;
}
#tracks.bt-left {
    width: var(--bt-track-width);
    margin-right: var(--bt-track-gap);
    padding-left: 5px;
}
.bt-grid {
    width: var(--bt-grid-width);
    height: calc(var(--bt-row-h) * 10);
}
#sliders.bt-right {
    width: var(--bt-slider-width);
    height: calc(var(--bt-row-h) * 10);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.bt-leds {
    float: left;
    width: var(--bt-grid-width);
    margin: 10px 0 8px calc(var(--bt-track-width) + var(--bt-track-gap));
    display: grid;
    grid-template-columns: repeat(var(--step-count, 16), minmax(0, 1fr));
    align-items: center;
    min-height: 10px;
}
.bt-led.beat-led {
    width: auto;
    height: 4px;
    margin: 0 0.1vw;
    border-radius: 999px;
    background: var(--bt-muted);
    opacity: 0.48;
}
.bt-led.beat-led.beat-accent {
    height: 7px;
    background: var(--bt-accent);
    opacity: 0.85;
}
.bt-led.beat-led.bar-accent {
    height: 9px;
    background: #f0b841;
    opacity: 1;
}
.bt-led.beat-led.is-playing {
    background: var(--bt-text);
    opacity: 1;
    box-shadow: 0 0 8px var(--bt-accent);
}
.grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    background: var(--bt-grid);
    border: 1px solid var(--bt-border);
    border-radius: 7px;
    overflow: hidden;
}
.grid .cell {
    height: var(--bt-row-h);
    margin: 0 0.1%;
    border: 0;
    border-radius: 3px;
    background: var(--bt-cell-off);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.04);
    cursor: pointer;
    transition:
        transform 0.06s ease,
        background 0.08s ease,
        box-shadow 0.08s ease;
}
.grid .cell:hover {
    background: var(--bt-cell-hover);
}
.grid .cell.quarto {
    box-shadow: inset 1px 0 0 var(--bt-border-strong);
}
.grid .cell.first,
.grid .cell.capo {
    box-shadow: inset 2px 0 0 var(--bt-accent-strong);
}
.grid .cell.on {
    background: var(--bt-normal);
    transform: scale(0.82);
    box-shadow: 0 0 5px rgb(80 90 100 / 0.35);
}
.grid .cell.on.ghost {
    background: var(--bt-ghost);
    transform: scale(0.56);
}
.grid .cell.on.soft,
.grid .cell.on.weak {
    background: var(--bt-soft);
    transform: scale(0.66);
    box-shadow: 0 0 5px rgb(127 201 232 / 0.5);
}
.grid .cell.on.strong {
    background: var(--bt-strong);
    transform: scale(0.87);
    box-shadow: 0 0 7px rgb(255 158 85 / 0.55);
}
.grid .cell.on.accent {
    background: var(--bt-accent-step);
    transform: scale(0.94);
    box-shadow: 0 0 8px rgb(255 79 105 / 0.55);
}
.grid .cell.ticked {
    outline: 1px solid var(--bt-accent);
    outline-offset: -2px;
}
#tracks .track-row {
    width: 100%;
    height: var(--bt-row-h);
    display: flex;
    align-items: center;
    gap: 3px;
}
#tracks .bt-led.track {
    min-width: 0;
    color: var(--bt-instrument-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: 8px;
    line-height: var(--bt-row-h);
}
.track-controls {
    display: flex;
    gap: 2px;
}
.track-toggle {
    width: 17px;
    min-width: 17px;
    height: 17px;
    padding: 0;
    border-radius: 3px;
    font:
        700 9px/1 system-ui,
        sans-serif;
}
.track-toggle.mute.active,
.track-toggle.solo.active {
    background: var(--bt-active);
    color: var(--bt-active-fg);
    border-color: var(--bt-active);
    box-shadow: 0 0 7px rgb(240 184 65 / 0.22);
}
#sliders .slider-thin {
    width: calc(100% - 10px);
    height: 14px;
    margin: 0 5px;
    accent-color: var(--bt-accent-strong);
}

/* Transport : Oat button styling + layout only */
.transport-bar {
    clear: both;
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border-top: 1px solid var(--bt-border);
    background: var(--bt-panel-2);
}
.transport-button {
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    display: inline-grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
}
.transport-button.icon-only {
    width: 40px;
    padding: 0;
}
.play-toggle {
    width: 48px;
}
.play-toggle i {
    font-size: 16px;
}
.tap-modern {
    min-width: 50px;
    letter-spacing: 0.08em;
}
.tempo-nudge {
    width: 34px;
    min-width: 34px;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
}
.tempo-edit {
    width: 78px;
    height: 40px;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius);
    background: var(--bt-control);
}
.tempo-edit input {
    width: 70px;
    padding: 2px 4px 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bt-text);
    text-align: center;
    font:
        700 20px/1 ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    appearance: textfield;
}
.tempo-edit input::-webkit-inner-spin-button,
.tempo-edit input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}
.tempo-edit span {
    position: absolute;
    bottom: 3px;
    color: var(--bt-muted);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.transport-signature {
    min-width: 74px;
    height: 40px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius);
    background: var(--bt-control);
}
.signature-editor {
    display: flex;
    align-items: center;
    gap: 2px;
}
.signature-editor select {
    width: 31px;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
}
.signature-editor span {
    color: var(--bt-accent-strong);
    font-weight: 700;
}
#play-button.bt-buttondown,
#play-button[aria-pressed="true"],
#metronome-button.bt-buttondown,
#metronome-button[aria-pressed="true"],
#chain.bt-buttondown,
#chain[aria-pressed="true"] {
    background: var(--bt-active);
    color: var(--bt-active-fg);
    border-color: var(--bt-active);
    box-shadow:
        0 0 0 1px rgb(240 184 65 / 0.26),
        0 0 12px rgb(240 184 65 / 0.24);
}
#play-pause-icon:not(.fa-play):not(.fa-pause)::before {
    content: "\f04b";
}

/* Mémoires */
.memory-toolbar {
    clear: both;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 10px 10px;
    border-top: 1px solid var(--bt-border);
    background: var(--bt-panel);
}
#memory .pattern,
#memory .memory-action {
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
}
#memory .pattern span {
    font-size: 10px;
}
#memory .memory-action i {
    font-size: 13px;
}
.memory-separator {
    width: 1px;
    height: 24px;
    margin: 0 5px;
    background: var(--bt-border);
}
#memory .memory-saved {
    opacity: 1;
}
#memory .memory-empty {
    opacity: 0.62;
}
#memory .is-disabled {
    opacity: 0.3;
    pointer-events: none;
}
#cache-clear {
    color: var(--bt-danger);
}

/* Tooltips : placement calculé automatiquement sous le contrôle, ou au-dessus si nécessaire. */
.bt-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    max-width: min(320px, calc(100vw - 20px));
    padding: 6px 9px;
    border: 1px solid var(--bt-border-strong);
    border-radius: 6px;
    background: var(--bt-tooltip-bg);
    color: var(--bt-tooltip-text);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
    font-size: 11px;
    line-height: 1.3;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px);
    transition:
        opacity 0.08s ease,
        transform 0.08s ease;
    z-index: 2000;
}
.bt-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.bt-status-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Restes historiques retirés du layout */
.bottom-controls,
.bottom-control,
#master,
#swing,
#swing-value,
#metronome-tempo-display,
#metronome-bpm {
    display: none !important;
}

/* Kits / samples v17 */
.kit-selector {
    --kit-color: var(--bt-accent);
}
.kit-selector select {
    border-color: var(--kit-color, var(--bt-accent));
    box-shadow: inset 3px 0 0 var(--kit-color, var(--bt-accent));
}
#tracks .bt-led.track {
    display: flex;
    align-items: center;
    line-height: normal;
}
.track-sample-select {
    width: 100%;
    min-width: 0;
    height: 20px;
    padding: 0 14px 0 3px;
    border: 0;
    background: transparent;
    color: var(--bt-instrument-text);
    font-size: 7px;
    text-align: right;
    text-overflow: ellipsis;
}
.track-sample-select:focus {
    outline: 1px solid var(--bt-accent);
    outline-offset: -1px;
}

/* Share dialog */
.share-button {
    color: var(--bt-accent-strong);
}
.share-dialog {
    width: min(92vw, 510px);
    max-width: 510px;
    padding: 0;
    border: 1px solid var(--bt-border);
    border-radius: 14px;
    background: var(--bt-panel);
    color: var(--bt-text);
    box-shadow: 0 24px 70px rgb(0 0 0 / 0.28);
}
.share-dialog::backdrop {
    background: rgb(3 8 13 / 0.62);
    backdrop-filter: blur(2px);
}
.share-dialog-card {
    padding: 18px;
}
.share-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.share-dialog-header > div {
    min-width: 0;
    flex: 1;
}
.share-dialog-header h2 {
    margin: 0 0 5px;
    color: var(--bt-text);
    font-size: 1.05rem;
}
.share-dialog-header p {
    margin: 0;
    color: var(--bt-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}
.share-qr-wrap {
    min-height: 292px;
    display: grid;
    place-items: center;
    margin: 4px 0 16px;
}
#share-qr {
    display: block;
    width: min(280px, 72vw);
    height: auto;
    max-width: 100%;
    border: 1px solid var(--bt-border);
    border-radius: 10px;
    background: #fff;
}
.share-qr-error {
    max-width: 340px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--bt-warning);
    border-radius: var(--bt-radius);
    color: var(--bt-text);
    background: color-mix(in srgb, var(--bt-warning) 11%, var(--bt-panel));
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}
.share-url-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--bt-gap);
    color: var(--bt-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.09em;
}
.share-url-field input {
    width: 100%;
    min-width: 0;
    height: var(--bt-control-h);
    padding: 0 9px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius);
    background: var(--bt-control);
    color: var(--bt-text);
    font:
        600 10px/1.2 ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}
.share-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--bt-gap);
    margin-top: 12px;
}
.share-dialog-actions .bt-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Practice v36 */
#practice-button.bt-buttondown,
#practice-button[aria-pressed="true"] {
    background: var(--bt-active);
    color: var(--bt-active-fg);
    border-color: var(--bt-active);
    box-shadow:
        0 0 0 1px rgb(240 184 65 / 0.26),
        0 0 12px rgb(240 184 65 / 0.24);
}
.practice-panel {
    padding: 12px;
}
.practice-panel[hidden] {
    display: none;
}
.practice-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.practice-panel-header h2 {
    margin: 0 0 2px;
    font-size: 13px;
}
.practice-panel-header h2 i {
    margin-right: 5px;
    color: var(--bt-accent-strong);
}
.practice-panel-header p {
    margin: 0;
    color: var(--bt-muted);
    font-size: 9px;
}
.practice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.practice-field {
    display: grid;
    gap: 4px;
}
.practice-field > span {
    color: var(--bt-muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.practice-field input,
.practice-field select {
    width: 100%;
    min-height: 32px;
    padding: 5px 7px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius);
    background: var(--bt-control);
    color: var(--bt-text);
    font:
        700 10px/1.2 system-ui,
        sans-serif;
}
.practice-number {
    position: relative;
}
.practice-number input {
    padding-right: 34px;
}
.practice-number em {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bt-muted);
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
}
.practice-explainer {
    margin-top: 8px;
    color: var(--bt-muted);
    font-size: 9px;
    line-height: 1.35;
}
.practice-status {
    margin: 0;
    padding: 6px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bt-accent) 10%, transparent);
    color: var(--bt-accent-strong);
    font:
        700 9px/1.2 ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    white-space: nowrap;
}
#tracks .track-row.practice-played {
    background: color-mix(in srgb, var(--bt-accent) 24%, transparent);
    border-radius: 4px;
    box-shadow:
        inset 3px 0 0 var(--bt-accent),
        inset 0 1px 0 color-mix(in srgb, var(--bt-accent) 32%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--bt-accent) 32%, transparent);
}
#tracks .track-row.practice-played .bt-led.track {
    color: var(--bt-text);
    font-weight: 800;
}
.grid .cell.practice-played {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--bt-accent) 48%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--bt-accent) 48%, transparent);
}
.grid .cell.practice-played:not(.on) {
    background: color-mix(in srgb, var(--bt-accent) 22%, var(--bt-cell-off));
}
.grid .cell.practice-played.on {
    outline: 2px solid color-mix(in srgb, var(--bt-accent) 72%, transparent);
    outline-offset: -1px;
}
.grid .cell.practice-played.first,
.grid .cell.practice-played.capo {
    box-shadow:
        inset 2px 0 0 var(--bt-accent-strong),
        inset 0 1px 0 color-mix(in srgb, var(--bt-accent) 55%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--bt-accent) 55%, transparent);
}
#memory .pattern.memory-selected {
    background: var(--bt-active);
    border-color: var(--bt-active);
    color: var(--bt-active-fg);
    opacity: 1;
}
.language-control select {
    min-width: 54px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius);
    background: var(--bt-control);
    color: var(--bt-text);
    font:
        800 9px/1 system-ui,
        sans-serif;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 760px) {
    .practice-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 480px) {
    .practice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Pattern editing / nudge controls */
.score-toolbar .preset-selector {
    grid-template-columns: minmax(210px, 0.9fr) minmax(150px, 0.7fr) minmax(280px, 1.7fr) 38px auto auto;
}
.pattern-shift-controls {
    height: var(--bt-control-h);
    display: flex;
    align-items: stretch;
    gap: 2px;
}
.pattern-shift-controls .pattern-shift-global {
    width: 27px;
    min-width: 27px;
    height: var(--bt-control-h);
    min-height: var(--bt-control-h);
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}
.track-toggle.pattern-shift {
    font-size: 13px;
    font-weight: 800;
    line-height: 15px;
}
.grid.is-pattern-dragging,
.grid.is-pattern-dragging .cell {
    cursor: grabbing;
    user-select: none;
    touch-action: none;
}

#tracks .track-controls {
    gap: 1px;
    flex: 0 0 auto;
}
#tracks .track-toggle {
    width: 14px;
    min-width: 14px;
    height: 17px;
}

/* v19 — édition de grille + mix compact */
:root {
    --bt-track-width: 14%;
    --bt-slider-width: 13.5%;
    --bt-grid-width: 71.5%;
    --bt-track-gap: 0.5%;
    --bt-max-width: 72rem;
}
#tracks .track-row {
    gap: 4px;
}
#tracks .bt-led.track {
    flex: 1 1 auto;
    min-width: 0;
}
.track-shift-controls {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding-right: 2px;
}
.track-toggle.pattern-shift,
.pattern-shift-global {
    color: var(--bt-accent-strong);
    border-color: color-mix(in srgb, var(--bt-accent) 45%, var(--bt-border));
    background: color-mix(in srgb, var(--bt-accent) 7%, var(--bt-control));
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}
.track-toggle.pattern-shift:hover,
.pattern-shift-global:hover {
    color: var(--bt-text);
    border-color: var(--bt-accent);
    background: color-mix(in srgb, var(--bt-accent) 14%, var(--bt-control));
}
#sliders.bt-right {
    justify-content: flex-start;
    padding-left: 5px;
}
.track-mix-row {
    height: var(--bt-row-h);
    min-height: var(--bt-row-h);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
.track-mix-row .track-toggle {
    width: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 4px;
    color: var(--bt-muted);
    background: transparent;
    border-color: transparent;
    font-size: 8px;
    letter-spacing: 0.02em;
}
.track-mix-row .track-toggle:hover {
    color: var(--bt-text);
    border-color: var(--bt-border);
    background: var(--bt-panel-2);
}
.track-mix-row .track-toggle.mute.active,
.track-mix-row .track-toggle.solo.active {
    background: var(--bt-active);
    color: var(--bt-active-fg);
    border-color: var(--bt-active);
    box-shadow: 0 0 7px rgb(240 184 65 / 0.22);
}
.rotary-knob {
    --knob-angle: -135deg;
    position: relative;
    width: 19px;
    min-width: 19px;
    height: 19px;
    padding: 0;
    border: 1px solid var(--bt-border);
    border-radius: 50%;
    background: var(--bt-control);
    color: var(--bt-muted);
    font:
        700 6px/1 system-ui,
        sans-serif;
    text-align: center;
    cursor: ns-resize;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.025);
    touch-action: none;
}
.rotary-knob::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    width: 1px;
    height: 5px;
    border-radius: 999px;
    background: var(--bt-accent-strong);
    transform-origin: 50% 7.5px;
    transform: translateX(-50%) rotate(var(--knob-angle));
    box-shadow: 0 0 2px rgb(57 202 165 / 0.35);
}
.rotary-knob:hover,
.rotary-knob:focus-visible {
    color: var(--bt-text);
    border-color: var(--bt-accent);
    outline: none;
}
.grid.is-pattern-dragging {
    cursor: grabbing;
}

@media (max-width: 900px) {
    :root {
        --bt-track-width: 15%;
        --bt-slider-width: 16%;
        --bt-grid-width: 68%;
    }
    .track-mix-row {
        gap: 2px;
    }
}

/* v36.6 — layout séquenceur verrouillé + aide raccourcis */
.instrument-toolbar .swing-edit {
    width: auto;
    min-width: 0;
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 4px;
}
.instrument-toolbar .swing-edit > span:first-child {
    flex: 0 0 auto;
}
.instrument-toolbar .swing-edit .percent-edit {
    width: 72px;
    flex: 0 0 72px;
}

.sequencer-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(122px, 14fr) minmax(0, 71.5fr) minmax(104px, 13.5fr);
    grid-template-rows: auto calc(var(--bt-row-h) * 10);
    column-gap: 0.5%;
    align-items: start;
}
.sequencer-layout .bt-leds {
    grid-column: 2;
    grid-row: 1;
    float: none;
    width: 100%;
    margin: 10px 0 8px;
}
.sequencer-layout #tracks.bt-left {
    grid-column: 1;
    grid-row: 2;
    float: none;
    width: 100%;
    margin: 0;
    min-width: 0;
}
.sequencer-layout .bt-grid {
    grid-column: 2;
    grid-row: 2;
    float: none;
    width: 100%;
}
.sequencer-layout #sliders.bt-right {
    grid-column: 3;
    grid-row: 2;
    float: none;
    width: 100%;
    padding-left: 0;
}

.shortcut-help {
    margin: 12px 12px 14px;
    border: 1px solid var(--bt-border);
    border-radius: 9px;
    background: var(--bt-panel-2);
    overflow: hidden;
}
.shortcut-help summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    color: var(--bt-text);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.04em;
    list-style: none;
}
.shortcut-help summary::-webkit-details-marker {
    display: none;
}
.shortcut-help summary:hover {
    background: color-mix(in srgb, var(--bt-accent) 5%, transparent);
}
.shortcut-help summary > .fa-keyboard {
    color: var(--bt-accent-strong);
}
.shortcut-chevron {
    margin-left: auto;
    color: var(--bt-muted);
    transition: transform 0.16s ease;
}
.shortcut-help[open] .shortcut-chevron {
    transform: rotate(180deg);
}
.shortcut-help-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 4px 12px 14px;
}
.shortcut-group {
    min-width: 0;
}
.shortcut-group h3 {
    margin: 12px 0 7px;
    color: var(--bt-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.shortcut-item {
    min-height: 29px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--bt-border) 60%, transparent);
    color: var(--bt-text);
    font-size: 9px;
    line-height: 1.25;
}
.shortcut-item:last-child {
    border-bottom: 0;
}
.shortcut-keys {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    flex-wrap: wrap;
}
.shortcut-help kbd {
    min-width: 22px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid var(--bt-border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--bt-control);
    color: var(--bt-text);
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
    font:
        700 8px/1 ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    white-space: nowrap;
}
.shortcut-or {
    color: var(--bt-muted);
    font-size: 8px;
}
.platform-mac .win-only {
    display: none;
}

@media (max-width: 900px) {
    .sequencer-layout {
        grid-template-columns: minmax(108px, 15fr) minmax(0, 68fr) minmax(112px, 16fr);
    }
    .sequencer-layout #sliders.bt-right {
        display: flex;
    }
    .shortcut-help-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* v36.7 — responsive mobile: the page itself never requires a 730 px canvas. */
.drum-machine-container {
    min-width: 0;
}
.velocity-cycle {
    color: var(--bt-muted);
    font-size: 8px;
    text-align: right;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .drum-machine-container {
        width: min(calc(100% - 16px), var(--bt-max-width));
        min-width: 0;
    }
    .bt-header {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding-inline: 2px;
    }
    .bt-header h1 {
        flex: 0 0 auto;
    }
    .groove-search-wrap {
        flex: 1 1 280px;
        min-width: 180px;
        max-width: none;
        order: 2;
    }
    .output-tools {
        margin-left: auto;
        flex-wrap: wrap;
    }
    .vu-meter-wrap {
        min-width: 120px;
    }
    .vu-meter {
        width: 90px;
    }
    .score-toolbar .preset-selector {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px 38px;
    }
    .score-toolbar .preset-selector .source-selector {
        grid-column: 1;
    }
    .score-toolbar .preset-selector > .control-field:nth-child(2) {
        grid-column: 2;
    }
    .score-toolbar .preset-selector .groove {
        grid-column: 1 / span 2;
        grid-row: 2;
    }
    .score-toolbar .preset-selector #groove-preview {
        grid-column: 3;
        grid-row: 2;
    }
    .score-toolbar .preset-selector #groove-add {
        grid-column: 4;
        grid-row: 2;
    }
    .instrument-toolbar {
        justify-content: space-between;
        gap: 10px;
    }
    .instrument-toolbar .kit-selector {
        width: auto;
        min-width: 0;
        flex: 0 1 205px;
    }
    .groove-edit-tools {
        flex: 1 1 auto;
    }
    .sequencer-layout {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
    }
    .shortcut-help-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body {
        min-width: 0;
    }
    .drum-machine-container {
        width: calc(100% - 10px);
    }
    .bt {
        border-radius: 9px;
    }
    .bt-header {
        padding: 6px 2px 8px;
    }
    .bt-header h1 {
        font-size: 1rem;
    }
    .bt-header-logo {
        width: 36px;
        height: 36px;
    }
    .groove-search-wrap {
        order: 3;
        flex: 1 0 100%;
        min-width: 0;
    }
    .output-tools {
        gap: 4px;
    }
    .vu-meter-wrap {
        display: none;
    }
    .score-toolbar {
        padding: 8px 8px 5px;
    }
    .score-toolbar .preset-selector {
        grid-template-columns: minmax(0, 1fr) 36px 36px;
        gap: 5px;
    }
    .score-toolbar .preset-selector .source-selector,
    .score-toolbar .preset-selector > .control-field:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .score-toolbar .preset-selector .groove {
        grid-column: 1;
        grid-row: auto;
    }
    .score-toolbar .preset-selector #groove-preview {
        grid-column: 2;
        grid-row: auto;
        width: 36px;
    }
    .score-toolbar .preset-selector #groove-add {
        grid-column: 3;
        grid-row: auto;
        width: 36px;
    }
    .instrument-toolbar {
        padding: 4px 8px 10px;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .instrument-toolbar > .pattern-shift-pad {
        order: 1;
    }
    .instrument-toolbar > .groove-edit-center {
        order: 2;
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: center;
    }
    .instrument-toolbar .kit-selector {
        order: 3;
        margin-left: auto;
        flex: 0 1 205px;
    }
    .instrument-toolbar .swing-edit {
        margin-left: 0;
    }
    .sequencer-layout {
        width: 100%;
        grid-template-columns: 92px minmax(455px, 1fr);
        grid-template-rows: auto calc(var(--bt-row-h) * 10);
        column-gap: 5px;
        padding: 0 6px 4px;
        box-sizing: border-box;
    }
    .sequencer-layout .bt-leds {
        grid-column: 2;
    }
    .sequencer-layout #tracks.bt-left {
        grid-column: 1;
        position: sticky;
        left: 0;
        z-index: 4;
        background: var(--bt-panel);
    }
    .sequencer-layout .bt-grid {
        grid-column: 2;
        min-width: 455px;
    }
    .sequencer-layout #sliders.bt-right {
        display: none;
    }
    .transport-bar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding-inline: 8px;
    }
    .memory-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        padding-inline: 8px;
    }
    .practice-panel {
        padding: 10px 8px;
    }
    .practice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .practice-status {
        white-space: normal;
    }
    .shortcut-help {
        margin-inline: 8px;
    }
    .shortcut-help-body {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .share-dialog {
        width: min(96vw, 510px);
    }
    .share-dialog-card {
        padding: 14px;
    }
    .share-url-field {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .language-control select {
        min-width: 48px;
    }
    .header-icon-button {
        width: 30px;
        min-width: 30px;
    }
    .groove-edit-tools .swing-edit {
        margin-left: auto;
    }
}

/* v36.9 — navigation de grille à 4 directions */
.instrument-toolbar .pattern-shift-pad {
    display: grid;
    grid-template-columns: repeat(4, 30px);
    align-items: stretch;
    gap: 4px;
}
.instrument-toolbar .pattern-shift-pad .pattern-shift-global {
    width: 30px;
    min-width: 30px;
    font-size: 12px;
}

/* v36.9.1 — flèches de déplacement centrées sous la grille */
.sequencer-layout {
    grid-template-rows: auto calc(var(--bt-row-h) * 10) auto;
}
.grid-shift-under-grid {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
}
.grid-shift-under-grid .pattern-shift-global {
    width: 14px;
    min-width: 14px;
    height: 17px;
    min-height: 17px;
    margin: 0;
    padding: 0;
    font-size: 9px;
    line-height: 1;
}
.grid-shift-under-grid .pattern-shift-global i {
    font-size: 8px;
    line-height: 1;
}
@media (max-width: 680px) {
    .sequencer-layout {
        grid-template-rows: auto calc(var(--bt-row-h) * 10) auto;
    }
    .grid-shift-under-grid {
        grid-column: 2;
    }
}

/* Keep the base capo beat marker identical to first; Practice adds its own higher-specificity row highlight. */
.grid .cell.capo { box-shadow: inset 2px 0 0 var(--bt-accent-strong); }

/* FEEL — musical variation controller (SDRUM/Drummer inspired) */
.feel-panel{margin:8px 12px 12px;padding:12px 14px;border:1px solid var(--bt-border);border-radius:10px;background:color-mix(in srgb,var(--bt-panel-2) 94%,var(--bt-active) 6%);color:var(--bt-text);box-shadow:0 7px 20px color-mix(in srgb,var(--bt-text) 10%,transparent)}
.feel-panel[hidden]{display:none!important}.feel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.feel-auto{flex:0 0 auto;align-self:flex-start;height:30px;padding:0 10px;font-size:.62rem;background:var(--bt-control);color:var(--bt-text);border-color:var(--bt-border)}.feel-auto.active,.feel-auto[aria-pressed="true"]{background:var(--bt-active)!important;border-color:color-mix(in srgb,var(--bt-active) 82%,#8c650d 18%)!important;color:var(--bt-active-fg)!important}.feel-header h2{margin:0;color:var(--bt-text);font-size:.86rem;letter-spacing:.09em}.feel-header h2 i{margin-right:6px}.feel-header p{margin:3px 0 0;color:var(--bt-muted);font-size:.72rem}.feel-body{display:grid;grid-template-columns:minmax(260px,1.55fr) minmax(210px,.85fr);gap:18px;align-items:stretch}.feel-xy-wrap{display:grid;grid-template-columns:26px 1fr;grid-template-rows:1fr 24px;gap:4px}.feel-axis-y{grid-row:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;color:var(--bt-muted);font-size:.58rem;font-weight:800;letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg)}.feel-xy{position:relative;min-height:150px;border:1px solid color-mix(in srgb,var(--bt-border) 76%,var(--bt-active) 24%);border-radius:9px;overflow:hidden;cursor:crosshair;touch-action:none;background:linear-gradient(to top,color-mix(in srgb,var(--bt-control) 92%,var(--bt-grid) 8%),transparent 55%),linear-gradient(to right,transparent,color-mix(in srgb,var(--bt-active) 13%,transparent))}.feel-grid-lines{position:absolute;inset:0;background:linear-gradient(to right,transparent 49.7%,color-mix(in srgb,var(--bt-border-strong) 42%,transparent) 50%,transparent 50.3%),linear-gradient(to bottom,transparent 49.7%,color-mix(in srgb,var(--bt-border-strong) 42%,transparent) 50%,transparent 50.3%)}.feel-dot{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--bt-active);border:3px solid var(--bt-panel);box-shadow:0 1px 8px color-mix(in srgb,var(--bt-text) 35%,transparent);transform:translate(-50%,-50%);left:50%;top:50%;pointer-events:none}.feel-axis-x{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--bt-muted);font-size:.6rem;font-weight:800;letter-spacing:.05em}.feel-axis-x strong{font-size:.64rem;color:var(--bt-warning);white-space:nowrap}.feel-controls{display:flex;flex-direction:column;gap:11px;justify-content:center}.feel-orchestration-row{display:flex;align-items:center;gap:7px}.feel-style{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:0;flex:1;color:var(--bt-text);font-size:.62rem;font-weight:800;letter-spacing:.05em}.feel-style select{min-width:0;width:100%;height:31px;border:1px solid var(--bt-border);border-radius:6px;background:var(--bt-control);color:var(--bt-text);padding:0 7px;font:inherit;letter-spacing:0}.feel-orchestration-auto{width:31px;height:31px;min-width:31px;padding:0;display:grid;place-items:center;background:var(--bt-control);color:var(--bt-text);border-color:var(--bt-border)}.feel-orchestration-auto.active,.feel-orchestration-auto[aria-pressed="true"]{background:var(--bt-active)!important;border-color:color-mix(in srgb,var(--bt-active) 82%,#8c650d 18%)!important;color:var(--bt-active-fg)!important}.feel-orchestration-every{width:44px;height:31px;min-width:44px;padding:0 4px;border:1px solid var(--bt-border);border-radius:6px;background:var(--bt-control);color:var(--bt-text);font:700 .62rem/1 inherit;text-align:center;text-align-last:center}.feel-orchestration-every:disabled{opacity:.42;cursor:not-allowed}
.feel-layer-title{color:var(--bt-muted);font-size:.64rem;font-weight:800;letter-spacing:.09em}.feel-layers{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.feel-layer{min-height:31px;border:1px solid var(--bt-border);border-radius:6px;background:var(--bt-control);color:var(--bt-text);font-size:.62rem;font-weight:800;cursor:pointer}.feel-layer:hover{background:color-mix(in srgb,var(--bt-control) 88%,var(--bt-accent) 12%)}.feel-layer.active,.feel-layer[aria-pressed="true"]{background:var(--bt-active)!important;border-color:color-mix(in srgb,var(--bt-active) 82%,#8c650d 18%)!important;color:var(--bt-active-fg)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bt-panel) 30%,transparent)}.feel-fill{display:grid;grid-template-columns:38px 1fr 36px;align-items:center;gap:8px;color:var(--bt-text);font-size:.62rem;font-weight:800}.feel-fill input{width:100%;accent-color:var(--bt-active)}.feel-fill output{text-align:right;color:var(--bt-muted);font-variant-numeric:tabular-nums}.feel-actions{display:grid;grid-template-columns:1fr;gap:6px}.feel-actions-simple{max-width:190px}.feel-actions .bt-button{height:32px;font-size:.62rem}.variation-button.active,.variation-button[aria-expanded="true"]{background:var(--bt-active)!important;border-color:color-mix(in srgb,var(--bt-active) 82%,#8c650d 18%)!important;color:var(--bt-active-fg)!important}.feel-actions .bt-button.active,.feel-actions .bt-button[aria-pressed="true"]{background:var(--bt-active)!important;border-color:color-mix(in srgb,var(--bt-active) 82%,#8c650d 18%)!important;color:var(--bt-active-fg)!important}
@media(max-width:720px){.feel-body{grid-template-columns:1fr}.feel-xy{min-height:135px}.feel-header p{max-width:260px}.feel-actions{grid-template-columns:1fr}.feel-actions-simple{max-width:none}}


/* v54 — Feel gauche, Swing slider centré, Kit droite */
.instrument-toolbar {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(260px, 1.25fr) minmax(205px, 1fr);
    align-items: center;
    gap: 14px;
}
.instrument-toolbar > .variation-button {
    justify-self: start;
}
.instrument-toolbar > .swing-slider {
    justify-self: center;
    width: min(100%, 330px);
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) 36px;
    align-items: center;
    gap: 8px;
}
.instrument-toolbar > .swing-slider > span:first-child {
    height: auto;
}
.instrument-toolbar > .swing-slider input[type="range"] {
    width: 100%;
    min-width: 0;
    margin: 0;
    accent-color: var(--bt-active, #f0b841);
    cursor: pointer;
}
.instrument-toolbar > .swing-slider output {
    color: var(--bt-text);
    font-size: 9px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.instrument-toolbar > .kit-selector {
    justify-self: end;
}
@media (max-width: 720px) {
    .instrument-toolbar {
        grid-template-columns: auto minmax(180px, 1fr) auto;
        gap: 8px;
    }
    .instrument-toolbar > .swing-slider {
        width: 100%;
        grid-template-columns: auto minmax(90px, 1fr) 32px;
        gap: 5px;
    }
    .instrument-toolbar .kit-selector {
        width: auto;
        min-width: 145px;
        margin-left: 0;
    }
}

/* v58 — FEEL Energy is a single bipolar axis label */
.feel-axis-y { justify-content: center; }
.feel-orchestration-info{margin:-5px 0 0;padding:6px 8px;border-left:2px solid color-mix(in srgb,var(--bt-active) 55%,var(--bt-border));border-radius:3px;background:color-mix(in srgb,var(--bt-control) 72%,transparent);color:var(--bt-muted);font-size:.61rem;line-height:1.35;min-height:2.7em}

/* v29 — sample picker, monitoring and single-note drag */
.sample-picker{position:relative;width:100%;min-width:0}
.sample-search-input{box-sizing:border-box;width:100%;padding-right:20px}
.sample-search-input::-webkit-search-cancel-button{opacity:.45}
.sample-picker-menu{position:absolute;z-index:80;left:0;right:0;top:calc(100% + 3px);max-height:250px;overflow:auto;padding:4px;background:var(--bt-panel);border:1px solid var(--bt-border-strong);border-radius:7px;box-shadow:0 10px 28px color-mix(in srgb,var(--bt-text) 20%,transparent)}
.sample-picker-menu[hidden]{display:none!important}
.sample-picker-heading{position:sticky;top:-4px;z-index:1;padding:5px 7px 3px;background:var(--bt-panel);color:var(--bt-muted);font-size:.55rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.sample-picker-option{display:block;width:100%;border:0;border-radius:4px;background:transparent;color:var(--bt-text);padding:6px 7px;text-align:left;font:600 .66rem/1.2 inherit;cursor:pointer}
.sample-picker-option:hover,.sample-picker-option.active{background:color-mix(in srgb,var(--bt-active) 18%,var(--bt-control));color:var(--bt-text)}
.grid-monitor-separator{display:block;width:1px;height:14px;margin:0 5px;background:var(--bt-border-strong);opacity:.85}
.grid-shift-under-grid .monitoring-toggle{width:20px;min-width:20px}
.grid-shift-under-grid .monitoring-toggle.bt-buttondown,.grid-shift-under-grid .monitoring-toggle[aria-pressed="true"]{background:var(--bt-active);color:var(--bt-active-fg);border-color:var(--bt-active)}
.grid.is-pattern-dragging .cell{cursor:grabbing}
.grid .cell.on{cursor:grab}

/* v30 — instrument browser dialog */
.sample-picker-dialog-trigger{display:block}
.sample-dialog-button{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;cursor:pointer;border:1px solid var(--bt-border);border-radius:5px;background:var(--bt-control);color:var(--bt-text);padding:4px 7px;font:600 .66rem/1.2 inherit}
.sample-dialog-button:hover,.sample-dialog-button:focus-visible{background:color-mix(in srgb,var(--bt-active) 12%,var(--bt-control));border-color:var(--bt-border-strong);outline:none}
.sample-browser-dialog{width:min(900px,calc(100vw - 28px));height:min(620px,calc(100vh - 32px));padding:0;border:1px solid var(--bt-border-strong);border-radius:12px;background:var(--bt-panel);color:var(--bt-text);box-shadow:0 24px 70px rgba(0,0,0,.38)}
.sample-browser-dialog::backdrop{background:rgba(0,0,0,.48);backdrop-filter:blur(2px)}
.sample-browser-shell{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.sample-browser-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;border-bottom:1px solid var(--bt-border)}
.sample-browser-header h2{margin:1px 0 0;font-size:1rem;line-height:1.2}.sample-browser-eyebrow,.sample-browser-column-title{font-size:.58rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:var(--bt-muted)}
.sample-browser-close{width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--bt-muted);font-size:1.35rem;cursor:pointer}.sample-browser-close:hover{background:var(--bt-control);color:var(--bt-text)}
.sample-browser-search-wrap{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin:12px 16px;padding:0 10px;border:1px solid var(--bt-border-strong);border-radius:7px;background:var(--bt-control)}
.sample-browser-search-wrap i{font-size:.72rem;color:var(--bt-muted)}.sample-browser-search{width:100%;min-height:34px;border:0!important;outline:0;background:transparent!important;color:var(--bt-text);font:600 .72rem/1 inherit}
.sample-browser-main{min-height:0;display:grid;grid-template-columns:165px minmax(260px,1fr) minmax(220px,.85fr);border-top:1px solid var(--bt-border);border-bottom:1px solid var(--bt-border)}
.sample-browser-column,.sample-browser-meta{min-width:0;min-height:0;padding:10px}.sample-browser-families,.sample-browser-instruments{border-right:1px solid var(--bt-border)}
.sample-browser-family-list,.sample-browser-instrument-list{margin-top:7px;max-height:100%;overflow:auto;outline:0}.sample-browser-instrument-list{height:calc(100% - 22px)}
.sample-browser-family,.sample-browser-instrument{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;border:0;border-radius:6px;background:transparent;color:var(--bt-text);padding:7px 8px;text-align:left;cursor:pointer;font:650 .69rem/1.15 inherit}
.sample-browser-family:hover,.sample-browser-family[aria-selected="true"],.sample-browser-instrument.active{background:color-mix(in srgb,var(--bt-active) 18%,var(--bt-control))}
.sample-browser-instrument:hover:not(.active){background:color-mix(in srgb,var(--bt-active) 8%,var(--bt-control))}
.sample-browser-family[aria-selected="true"],.sample-browser-instrument.active{box-shadow:inset 2px 0 0 var(--bt-active)}
.sample-browser-instrument small{flex:none;color:var(--bt-muted);font-size:.56rem;font-weight:700}.sample-browser-meta-body{margin-top:8px}.sample-browser-meta-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:9px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--bt-border) 75%,transparent);font-size:.64rem}.sample-browser-meta-row span{color:var(--bt-muted)}.sample-browser-meta-row strong{overflow-wrap:anywhere;font-weight:750}.sample-browser-empty{color:var(--bt-muted);font-size:.65rem}
.sample-browser-footer{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:11px 16px}.sample-browser-hint{margin-right:auto;color:var(--bt-muted);font-size:.58rem}.sample-browser-select{min-width:105px}
@media(max-width:700px){.sample-browser-dialog{width:calc(100vw - 12px);height:calc(100vh - 18px)}.sample-browser-main{grid-template-columns:110px minmax(170px,1fr)}.sample-browser-meta{display:none}.sample-browser-hint{display:none}}


/* v36 — DAW-style grid editing, quantized keyboard record and velocity write palette */
.grid-shift-under-grid{overflow:visible;gap:3px;flex-wrap:wrap}
.grid-shift-under-grid .record-toggle{width:auto;min-width:42px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;gap:3px;font-size:7px;font-weight:900;letter-spacing:.04em}
.record-dot{width:7px;height:7px;border-radius:50%;background:#d84141;box-shadow:0 0 0 1px color-mix(in srgb,#d84141 45%,transparent)}
.record-toggle[aria-pressed="true"]{background:color-mix(in srgb,#d84141 22%,var(--bt-control));border-color:#d84141;color:var(--bt-text)}
.record-toggle[aria-pressed="true"] .record-dot{background:#ff3434;box-shadow:0 0 7px rgba(255,52,52,.8)}
.velocity-write-control{display:inline-flex;align-items:center;gap:2px;height:19px;margin-left:2px}
.velocity-step-button,.velocity-level{height:18px;min-width:18px;padding:0;border:1px solid var(--bt-border);border-radius:4px;background:var(--bt-control);color:var(--bt-text);font:800 8px/1 inherit;cursor:pointer}
.velocity-step-button{min-width:16px;width:16px;font-size:11px}
.velocity-levels{display:flex;align-items:center;gap:2px}
.velocity-level{position:relative;color:transparent;width:18px}
.velocity-level::before{content:"";position:absolute;inset:0;border-radius:inherit}
.velocity-1{background:var(--bt-ghost)}.velocity-2{background:var(--bt-soft)}.velocity-3{background:var(--bt-normal)}.velocity-4{background:var(--bt-strong)}.velocity-5{background:var(--bt-accent-step)}
.velocity-level.active,.velocity-level[aria-pressed="true"]{outline:2px solid var(--bt-text);outline-offset:1px;transform:translateY(-1px)}
.grid .cell.selected{outline:2px solid #ffd400;outline-offset:-1px;box-shadow:0 0 0 1px rgba(255,212,0,.35),0 0 8px rgba(255,212,0,.55)!important}
.grid-selection-box{position:absolute;z-index:8;border:1px solid #ffd400;background:rgba(255,212,0,.10);border-radius:2px;pointer-events:none}
.grid.is-pattern-dragging .cell.selected{cursor:grabbing}
@media(max-width:680px){.record-label{display:none}.grid-shift-under-grid .record-toggle{min-width:22px;width:22px}.velocity-level,.velocity-step-button{min-width:17px;width:17px}}

/* v37 — selection de ligne, memoires reorderables */
.track-row-select-controls{flex:0 0 auto;display:flex;padding-right:2px}
#tracks .track-row-select{width:18px;min-width:18px;height:18px;font-size:9px;color:var(--bt-accent-strong)}
#memory .pattern{cursor:grab;position:relative}
#memory .pattern.memory-dragging{opacity:.45;cursor:grabbing}
#memory .pattern.memory-drop-before::before,#memory .pattern.memory-drop-after::after{content:"";position:absolute;top:-3px;bottom:-3px;width:2px;background:#ffd400;box-shadow:0 0 5px rgba(255,212,0,.65);z-index:5}
#memory .pattern.memory-drop-before::before{left:-3px}
#memory .pattern.memory-drop-after::after{right:-3px}

/* v38 — clearer row-selection affordance */
#tracks .track-row-select{color:#fff!important;border-color:color-mix(in srgb,#fff 28%,var(--bt-border));background:color-mix(in srgb,var(--bt-control) 86%,#000)}
#tracks .track-row-select:hover,#tracks .track-row-select:focus-visible{color:#fff!important;background:color-mix(in srgb,var(--bt-active) 38%,var(--bt-control));border-color:#ffd400}
#tracks .track-row-select i{color:inherit!important}

/* FEEL v44 — performance layers + live controls */
.feel-performance-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.feel-compact-control{display:grid;gap:4px;color:var(--bt-muted);font-size:.6rem;font-weight:800;letter-spacing:.06em}.feel-compact-control select{height:31px;border:1px solid var(--bt-border);border-radius:6px;background:var(--bt-control);color:var(--bt-text);padding:0 7px;font:700 .62rem/1 inherit}.feel-influence{display:grid;grid-template-columns:1fr 1fr;gap:5px}.feel-influence-row{min-height:30px;border:1px solid var(--bt-border);border-radius:6px;background:var(--bt-control);color:var(--bt-text);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;font-size:.61rem;font-weight:800;cursor:pointer}.influence-dots{display:flex;gap:3px}.influence-dot{display:block;width:7px;height:7px;border-radius:50%;border:1px solid var(--bt-muted);background:transparent}.influence-dot.active{background:var(--bt-active);border-color:var(--bt-active)}.feel-live-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.feel-live-actions .bt-button{height:32px;min-width:0;padding:0 5px;font-size:.58rem}.feel-live-actions .bt-button.active{background:var(--bt-warning)!important;color:#111!important;border-color:var(--bt-warning)!important}.feel-live-actions i{margin-right:3px}@media(max-width:720px){.feel-influence{grid-template-columns:1fr}.feel-live-actions{grid-template-columns:repeat(3,1fr)}.feel-performance-grid{grid-template-columns:1fr}}


/* v45 — project header, sequencer card header, sample filters */
.bt-version{align-self:flex-start;margin-top:2px;padding:2px 5px;border:1px solid var(--bt-border);border-radius:999px;background:var(--bt-control);color:var(--bt-muted);font-size:.50rem;font-weight:850;letter-spacing:.04em}
.github-button{text-decoration:none;margin-left:2px}
.sequencer-card-header{display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:4px 9px;margin-top:1px;border-top:1px solid var(--bt-border);border-bottom:1px solid var(--bt-border);background:color-mix(in srgb,var(--bt-control) 82%,var(--bt-panel));}
.sequencer-card-title{color:var(--bt-muted);font-size:.56rem;font-weight:900;letter-spacing:.11em}
.sequencer-output-tools{display:flex;align-items:center;gap:8px}
.sequencer-card-header .vu-meter-wrap{display:flex;margin:0}
.sample-browser-shell{grid-template-rows:auto auto auto minmax(0,1fr) auto}
.sample-browser-filter-bar{display:flex;align-items:center;gap:7px;min-height:29px;padding:0 16px 9px;flex-wrap:wrap}
.sample-browser-filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sample-filter-caption{color:var(--bt-muted);font-size:.56rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.sample-filter-chip{display:inline-flex;align-items:center;gap:4px;min-height:19px;padding:1px 4px 1px 6px;border:1px solid color-mix(in srgb,var(--bt-active) 48%,var(--bt-border));border-radius:999px;background:color-mix(in srgb,var(--bt-active) 12%,var(--bt-control));color:var(--bt-text);font:750 .53rem/1 inherit}
.sample-filter-chip button{display:grid;place-items:center;width:13px;height:13px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--bt-muted);cursor:pointer;font-size:9px;line-height:1}
.sample-filter-chip button:hover{background:color-mix(in srgb,var(--bt-active) 20%,transparent);color:var(--bt-text)}
.sample-browser-meta-row.filterable{cursor:pointer;border-radius:5px;padding-left:4px;padding-right:4px}
.sample-browser-meta-row.filterable:hover{background:color-mix(in srgb,var(--bt-active) 11%,var(--bt-control))}
.sample-browser-meta-row.filterable::after{content:"+ filtre";justify-self:end;grid-column:2;color:var(--bt-active);font-size:.52rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.sample-browser-instrument.hover-preview{background:color-mix(in srgb,var(--bt-active) 8%,var(--bt-control))}
@media(max-width:700px){.sample-browser-filter-bar{padding:0 10px 8px}.sequencer-card-title{display:none}.sequencer-card-header{justify-content:flex-end}}

/* v47 compact FEEL + header layout */
.header-tools-separator{width:1px;height:18px;background:var(--bt-border);margin:0 6px;}
.sequencer-card-header{background:var(--bt-panel-2)!important;border-top:0;margin-top:0;}
.feel-header-actions{display:flex;align-items:center;gap:6px}.feel-view-toggle{width:31px;height:30px;padding:0;display:grid;place-items:center}.feel-view-toggle.active{background:var(--bt-active)!important;color:var(--bt-active-fg)!important;border-color:var(--bt-active)!important}
.feel-limb-summary{margin:-3px 0 8px;padding:5px 8px;border-radius:6px;background:var(--bt-panel-2);color:var(--bt-muted);font-size:.62rem;font-weight:700;letter-spacing:.02em}
.feel-body{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:start!important}.feel-body[data-feel-view="pad"]{grid-template-columns:minmax(240px,.9fr) minmax(300px,1.1fr)!important}.feel-xy-wrap{align-self:start;max-height:190px}.feel-xy{min-height:118px!important;height:118px}.feel-controls{justify-content:flex-start!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}.feel-controls>.feel-orchestration-row,.feel-controls>.feel-orchestration-info,.feel-controls>.feel-layer-title,.feel-controls>.feel-influence,.feel-controls>.feel-live-actions{grid-column:1/-1}.feel-performance-grid{grid-column:1/-1}.feel-fill{margin:0!important}.feel-live-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}.feel-live-actions .bt-button{height:30px}.feel-limb-summary strong{color:var(--bt-text)}
@media(max-width:720px){.feel-body[data-feel-view="pad"]{grid-template-columns:1fr!important}.feel-controls{grid-template-columns:1fr!important}}
.feel-xy-wrap[hidden]{display:none!important}.feel-body[data-feel-view="pad"] .feel-fill:not(.feel-density){display:none!important}


/* v48 — memory-centric FEEL + canonical groove toolbar */
.score-toolbar .preset-selector{display:flex;align-items:end;gap:8px;flex-wrap:nowrap}.score-toolbar .preset-selector .groove{flex:1 1 420px}.score-toolbar .preset-selector .kit-selector{flex:0 1 190px;min-width:150px}.toolbar-separator{width:1px;height:30px;background:var(--bt-border);margin:0 2px;align-self:end}.instrument-toolbar{display:none!important}
.memory-toolbar{gap:5px}.memory-toolbar .feel-memory-button{height:31px;padding:0 10px;font-size:.62rem;font-weight:900;letter-spacing:.08em}.memory-toolbar .memory-separator{margin-inline:3px}
.feel-panel{margin-top:8px}.feel-header{align-items:center}.feel-header-actions{margin-left:auto}.feel-reset{width:31px;height:30px;padding:0;display:grid;place-items:center}.feel-enable-switch{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.62rem;font-weight:900;letter-spacing:.06em;color:var(--bt-text)}.feel-enable-switch input{position:absolute;opacity:0;pointer-events:none}.feel-switch-track{position:relative;width:36px;height:20px;border:1px solid var(--bt-border-strong);border-radius:999px;background:var(--bt-control);transition:.16s}.feel-switch-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--bt-muted);transition:.16s}.feel-enable-switch input:checked+.feel-switch-track{background:var(--bt-active);border-color:var(--bt-active)}.feel-enable-switch input:checked+.feel-switch-track .feel-switch-thumb{left:18px;background:var(--bt-active-fg)}
.feel-body,.feel-body[data-feel-view="pad"]{display:grid!important;grid-template-columns:minmax(230px,.78fr) minmax(340px,1.22fr)!important;gap:14px!important;align-items:start!important}.feel-left-column{min-width:0}.feel-pad-stack{display:flex;flex-direction:column;gap:10px}.feel-slider-stack{display:flex;flex-direction:column;gap:9px}.feel-slider-stack[hidden],.feel-pad-stack[hidden]{display:none!important}.feel-xy-wrap{max-height:none!important}.feel-xy{height:96px!important;min-height:96px!important}.feel-xy-wrap-secondary .feel-xy{height:82px!important;min-height:82px!important}.feel-controls{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}.feel-live-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}.feel-fill{display:grid!important;grid-template-columns:72px minmax(80px,1fr) 42px!important;align-items:center;gap:7px}.feel-fill>span{font-size:.6rem;font-weight:800}.feel-fill output{text-align:right;font-size:.62rem}.feel-panel:not(.is-enabled) .feel-controls,.feel-panel:not(.is-enabled) .feel-left-column{opacity:.72}
@media(max-width:800px){.score-toolbar .preset-selector{flex-wrap:wrap}.score-toolbar .preset-selector .kit-selector{flex:1 1 180px}.feel-body,.feel-body[data-feel-view="pad"]{grid-template-columns:1fr!important}}

/* v50 — accordéons pleine largeur + FEEL simplifié */
.feel-panel,
.shortcut-help{
    width:100%;
    margin:8px 0 0;
    border-left:0;
    border-right:0;
    border-radius:0;
    box-shadow:none;
    overflow:hidden;
}
.feel-panel{background:color-mix(in srgb,var(--bt-panel-2) 92%,var(--bt-active) 8%);border-top:1px solid var(--bt-border);border-bottom:1px solid var(--bt-border)}
.shortcut-help{background:var(--bt-panel-2);border-top:1px solid var(--bt-border);border-bottom:1px solid var(--bt-border)}
.feel-panel summary,
.shortcut-help summary{list-style:none}
.feel-panel summary::-webkit-details-marker,
.shortcut-help summary::-webkit-details-marker{display:none}
.feel-panel summary::marker,
.shortcut-help summary::marker{content:""}
.feel-summary{min-height:46px;display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;user-select:none}
.feel-summary:hover{background:color-mix(in srgb,var(--bt-active) 5%,transparent)}
.feel-summary-title{display:flex;align-items:center;gap:8px;min-width:0;color:var(--bt-text);font-size:.72rem;font-weight:900;letter-spacing:.08em}
.feel-summary-title small{font-size:.64rem;font-weight:600;letter-spacing:0;color:var(--bt-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feel-header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.feel-chevron,.shortcut-chevron{margin-left:4px;color:var(--bt-muted);transition:transform .16s ease}
.feel-panel[open] .feel-chevron,.shortcut-help[open] .shortcut-chevron{transform:rotate(180deg)}
.feel-content{padding:12px 14px 14px;border-top:1px solid var(--bt-border)}
.feel-panel:not(.is-enabled) .feel-controls,.feel-panel:not(.is-enabled) .feel-left-column{opacity:1!important;pointer-events:auto!important;filter:none!important}
.feel-body,.feel-body[data-feel-view="pad"]{display:grid!important;grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr)!important;gap:16px!important;align-items:start!important}
.feel-controls{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(150px,.62fr)!important;gap:9px!important;align-content:start}
.feel-style,.feel-right-hand-control{min-width:0}
.feel-style{display:grid;gap:4px}
.feel-style>span,.feel-right-hand-control>span{color:var(--bt-muted);font-size:.6rem;font-weight:900;letter-spacing:.06em}
.feel-style select,.feel-right-hand-control select{width:100%;height:32px;border:1px solid var(--bt-border);border-radius:6px;background:var(--bt-control);color:var(--bt-text);padding:0 7px;font:700 .62rem/1 inherit}
.feel-advanced{grid-column:1/-1;border-top:1px solid color-mix(in srgb,var(--bt-border) 75%,transparent);padding-top:4px}
.feel-advanced>summary{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--bt-muted);font-size:.62rem;font-weight:850;letter-spacing:.04em}
.feel-advanced>summary::-webkit-details-marker{display:none}.feel-advanced>summary::marker{content:""}
.feel-advanced>summary i{transition:transform .16s ease}.feel-advanced[open]>summary i{transform:rotate(180deg)}
.feel-advanced .feel-influence{margin-top:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
.feel-live-actions{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.feel-limb-summary,.feel-orchestration-info,.feel-performance-grid,.feel-layer-title,.feel-orchestration-auto,.feel-orchestration-every{display:none!important}
@media(max-width:800px){.feel-body,.feel-body[data-feel-view="pad"]{grid-template-columns:1fr!important}.feel-controls{grid-template-columns:1fr!important}.feel-summary-title small{display:none}.feel-header-actions{gap:4px}}

/* v51 — FEEL pads-only, flatter layout */
.feel-panel{
    background:var(--bt-panel)!important;
}
.shortcut-help{
    background:var(--bt-panel-2)!important;
}
.feel-summary{
    background:transparent!important;
}
.feel-summary:hover{
    background:color-mix(in srgb,var(--bt-text) 3%,transparent)!important;
}
.feel-summary-title .feel-enable-switch{
    flex:0 0 auto;
    margin-right:2px;
}
.feel-enable-switch .feel-switch-label{display:none!important}
.feel-header-actions{margin-left:auto}
.feel-chevron,.shortcut-chevron,.feel-view-toggle{display:none!important}
.feel-content{background:transparent!important}
.feel-body,.feel-body[data-feel-view="pad"]{
    grid-template-columns:minmax(320px,.95fr) minmax(360px,1.05fr)!important;
    gap:18px!important;
}
.feel-left-column,.feel-pad-stack,.feel-xy-wrap,.feel-xy{width:100%!important;max-width:none!important}
.feel-xy{height:124px!important;min-height:124px!important}
.feel-xy-wrap-secondary .feel-xy{height:112px!important;min-height:112px!important}
.feel-slider-stack{display:none!important}
.feel-controls{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
}
.feel-style,.feel-right-hand-control{width:100%!important}
.feel-style select,.feel-right-hand-control select{width:100%!important}
.feel-influence-block{
    width:100%;
    padding-top:8px;
    
}
.feel-influence-title{
    margin:0 0 7px;
    color:var(--bt-muted);
    font-size:.6rem;
    font-weight:900;
    letter-spacing:.06em;
}
.feel-influence{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
.feel-live-actions{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.kit-selector .kit-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    color:var(--bt-muted);
    font-size:.78rem;
}
@media(max-width:800px){
    .feel-body,.feel-body[data-feel-view="pad"]{grid-template-columns:1fr!important}
    .feel-influence{grid-template-columns:1fr!important}
}


/* v52 — FEEL placement and help layout polish */
.shortcut-help-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 12px;
}

.feel-panel {
    background: var(--bt-panel)!important;
    padding: 0;
}

.feel-content {
    padding: 12px;
}

.feel-style {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 4px !important;
}
.feel-style > span {
    display: block;
    width: 100%;
}
.feel-style select {
    width: 100% !important;
}
.feel-live-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
    .shortcut-help-body {
        grid-template-columns: 1fr;
    }
}

/* v53 fullscreen + Bell lane */
.fullscreen-toggle{flex:0 0 auto}


/* v54 · FEEL help */
.feel-help{margin-top:12px;border-top:1px solid var(--bt-border)}.feel-help>summary{display:flex;align-items:center;gap:7px;padding:10px 0 4px;cursor:pointer;color:var(--bt-muted);font-size:.66rem;font-weight:800;letter-spacing:.05em;list-style:none}.feel-help>summary::-webkit-details-marker{display:none}.feel-help>summary::after{content:"›";margin-left:auto;font-size:1rem;transform:rotate(90deg)}.feel-help[open]>summary::after{transform:rotate(-90deg)}.feel-help-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;padding:8px 0 2px;color:var(--bt-muted);font-size:.65rem;line-height:1.35}.feel-help-body .feel-help-intro{grid-column:1/-1;margin:0 0 4px;color:var(--bt-text)}.feel-help-body>div{display:grid;gap:2px}.feel-help-body strong{color:var(--bt-text);font-size:.61rem;letter-spacing:.05em}@media(max-width:720px){.feel-help-body{grid-template-columns:1fr}}


/* v57 — FEEL axis clarity + reusable accordion */
.feel-axis-y{gap:8px;justify-content:center!important}
.feel-axis-y strong{color:var(--bt-warning);font-size:.64rem;font-weight:900;letter-spacing:.02em}
.feel-axis-x strong{color:var(--bt-warning)}
.bt-accordion{width:100%;margin-top:12px;border:1px solid var(--bt-border);border-radius:7px;background:var(--bt-control);overflow:hidden}
.bt-accordion-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:8px 10px;cursor:pointer;list-style:none;color:var(--bt-muted);font-size:.68rem;font-weight:850;letter-spacing:.04em;user-select:none}
.bt-accordion-summary::-webkit-details-marker{display:none}.bt-accordion-summary::marker{content:""}
.bt-accordion-summary:hover{background:color-mix(in srgb,var(--bt-text) 3%,transparent)}
.bt-accordion-title{display:flex;align-items:center;gap:7px}.bt-accordion-title i{color:var(--bt-warning)}
.bt-accordion-chevron{transition:transform .16s ease}.bt-accordion[open] .bt-accordion-chevron{transform:rotate(90deg)}
.bt-accordion-body {
    padding: 12px;
}
.feel-help-body{display:grid!important;grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr)!important;gap:16px!important;color:var(--bt-muted);font-size:.65rem;line-height:1.4}
.feel-help-column{display:flex;flex-direction:column;gap:9px;min-width:0}
.feel-help-column>div{display:grid;gap:2px}.feel-help-column strong{color:var(--bt-text);font-size:.61rem;letter-spacing:.05em}
.feel-help-intro{margin:0 0 2px;color:var(--bt-text)}
@media(max-width:800px){.feel-help-body{grid-template-columns:1fr!important}}
/* v57 — old FEEL help pseudo-chevron disabled; bt-accordion owns the affordance. */
.feel-help>summary::after{content:none!important;display:none!important}

/* v58 · FEEL help / shortcuts / fullscreen */
.feel-help>summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px;
    cursor: pointer;
    color: var(--bt-muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    list-style: none;
}
.shortcut-help-outside {
    margin: 20px 0!important;
    padding: 0;
    max-width: 100%;
}
.shortcut-help-outside>.shortcut-help{margin:0}
.bt:fullscreen{width:100vw;min-height:100vh;max-height:100vh;overflow:auto;background:var(--bt-bg);padding-bottom:14px}
.bt:fullscreen .sequencer-card-header{position:sticky;top:0;z-index:40}

/* v59 · simplified FEEL / standalone shortcuts */
.shortcut-help-outside{margin:20px auto 0!important;padding:0 12px 16px;max-width:100%}
.shortcut-help-outside>.shortcut-help{border:1px solid var(--bt-border)!important;border-radius:12px!important;overflow:hidden;background:var(--bt-panel)!important;box-shadow:var(--bt-shadow,0 8px 28px rgba(0,0,0,.08))}
.feel-randomize,.feel-reset,.feel-icon-action{width:31px!important;height:30px!important;min-width:31px!important;padding:0!important;display:grid!important;place-items:center!important}
.feel-break{height:30px!important;padding:0 10px!important;display:flex!important;align-items:center!important;gap:6px!important}
.feel-break i{margin:0!important}.feel-header-actions{flex-wrap:nowrap}

/* v60 · Fullscreen workstation layout */
.bt:fullscreen,
.bt:-webkit-full-screen {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: var(--bt-bg);
    padding-bottom: 126px;
}
.bt:fullscreen .transport-bar,
.bt:-webkit-full-screen .transport-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    margin: 0;
    min-height: 58px;
    box-shadow: 0 -5px 18px rgba(0,0,0,.12);
}
.bt:fullscreen .memory-toolbar,
.bt:-webkit-full-screen .memory-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 58px;
    z-index: 1001;
    box-shadow: 0 -3px 12px rgba(0,0,0,.08);
}
.bt:fullscreen .feel-break,
.bt:-webkit-full-screen .feel-break {
    width: 31px !important;
    min-width: 31px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
}

/* v61 · Break stop sign + shortcut spacing */
.shortcut-help-outside {
    margin: 20px 0!important;
    padding: 0;
    max-width: 100%;
}
.shortcut-help-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 4px 12px 14px;
}
.break-stop-sign {
    width: 15px;
    height: 15px;
    display: block;
    background: currentColor;
    clip-path: polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
}

/* v67 · FEEL explicit CORE commit */
.feel-action-separator{
    width:1px;
    height:22px;
    margin:0 3px;
    background:var(--bt-border);
    flex:0 0 auto;
}