* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;

  --background: #101210;
  --panel: #181b18;
  --panel-light: #202420;
  --panel-dark: #171a17;
  --field-dark: #171a17;
  --identity-select-background: #0f110f;
  --log-background: #0b0d0b;

  --border: #343a34;
  --border-soft: rgb(52 58 52 / 78%);
  --border-faint: rgb(52 58 52 / 68%);
  --button-hover-border: #667066;

  --text: #f0f2f0;
  --muted: #a7aea7;
  --accent: #9bc69b;
  --accent-dark: #253425;
  --error: #e0a0a0;

  --surface-alpha-04: rgb(0 0 0 / 4%);
  --surface-alpha-08: rgb(0 0 0 / 8%);
  --surface-alpha-10: rgb(0 0 0 / 10%);
  --surface-alpha-12: rgb(0 0 0 / 12%);
  --surface-alpha-14: rgb(0 0 0 / 14%);
  --heading-alpha-02: rgb(255 255 255 / 2%);

  --mono-font: ui-monospace, SFMono-Regular, Consolas, monospace;
  --inner-radius: 5px;
  --outer-radius: 7px;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--background);
}

body {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 32px 20px 60px;
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 24px;
  font-size: 28px;
}

h2 {
  margin-bottom: 6px;
  font-size: 22px;
}

h3 {
  margin-bottom: 12px;
  font-size: 16px;
}

button,
select {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--panel-light);
  color: var(--text);
  font: inherit;
}

button {
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--button-hover-border);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}


/* Shared UI primitives */

.ui-section,
.combination-section {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alpha-10);
}

.ui-section-header,
.combination-section-header {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  background: var(--heading-alpha-02);
}

.ui-section-content:not([hidden]),
.combination-section-content:not([hidden]) {
  display: block;
  border-top: 1px solid var(--border);
}

.ui-section-content[hidden],
.combination-section-content[hidden] {
  display: none;
}

.ui-section-header h3,
.combination-section-header h3 {
  margin: 0;
  font-size: 14px;
}

.ui-section-toggle,
.combination-section-toggle {
  min-width: 58px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--panel-light);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.ui-section-toggle:hover,
.combination-section-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}

.ui-grid-2,
.program-group-grid,
.combination-zone-double-table,
.combination-effects-panels,
.global-editor-sections {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(300px, 1fr));
  gap: 12px;
  min-width: 0;
}

.ui-subtable,
.program-parameter-group,
.combination-zone-panel,
.combination-effect-panel,
.combination-effect-routing {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--inner-radius);
  background: var(--surface-alpha-12);
}

.ui-subtable-heading,
.program-parameter-group h4,
.combination-zone-panel h4 {
  margin: 0 0 11px;
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.ui-subtable-heading-row,
.combination-effect-panel-header,
.combination-zone-panel h4 {
  border-bottom: 1px solid var(--border);
  background: var(--heading-alpha-02);
}

.ui-subtable-heading-row {
  color: var(--text);
}

.ui-truncate,
.program-field-label,
.combination-zone-panel h4,
.combination-effect-panel-header strong,
.combination-effect-parameter-row label,
.combination-routing-range-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-focus-ring:focus,
.combination-effect-value-select:focus,
.combination-number-narrow:focus,
.combination-zone-number:focus,
.combination-note-select:focus,
.program-editor-identity-select:hover,
.program-editor-identity-select:focus {
  border-color: var(--accent);
  outline: none;
}

@media (max-width: 980px) {
  .ui-grid-2,
  .program-group-grid,
  .combination-zone-double-table,
  .combination-effects-panels {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

#permissionScreen {
  display: grid;
  min-height: 320px;
  place-items: center;
}

.midi-permission-prompt {
  display: grid;
  width: min(100%, 560px);
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.midi-permission-prompt p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

#enableMidi {
  min-width: 220px;
  min-height: 54px;
  font-size: 17px;
}

#permissionScreen[hidden],
#app[hidden],
.tab-panel[hidden] {
  display: none;
}

.connection-panel {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--outer-radius);
  background: var(--panel);
}

.controls {
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    140px
    auto;
  align-items: end;
  gap: 14px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

#loadAllData {
  white-space: nowrap;
}

#status {
  min-height: 22px;
  margin: 14px 0 0;
  color: var(--muted);
  font-family:
    var(--mono-font);
  font-size: 13px;
  white-space: pre-wrap;
}

#status.error {
  color: var(--error);
}

.progress {
  height: 5px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #0b0c0b;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 180ms ease;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-top: 24px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.tab-button {
  min-height: 46px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 5px 5px 0 0;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.tab-button.active {
  border-bottom-color: var(--accent);
  background: var(--panel);
  color: var(--text);
}

.tab-panel {
  padding-top: 24px;
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.empty-state {
  padding: 48px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--outer-radius);
  color: var(--muted);
  text-align: center;
}

.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--outer-radius);
  background: var(--panel);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-light);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: #1e221e;
}

.location {
  width: 90px;
  color: var(--accent);
  font-family:
    var(--mono-font);
}

.mono {
  font-family:
    var(--mono-font);
}

.status-on {
  color: var(--accent);
}

.status-off {
  color: var(--muted);
}

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--outer-radius);
  background: var(--panel);
}

.card-label {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.card-value {
  font-size: 20px;
}

.subsection {
  margin-top: 22px;
}

.kit-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.kit-button.active {
  border-color: var(--accent);
  background: var(--accent-dark);
  color: var(--accent);
}

.scale-grid {
  display: grid;
  grid-template-columns:
    repeat(12, minmax(60px, 1fr));
  gap: 8px;
}

.scale-note {
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--panel);
  text-align: center;
}

.scale-note strong,
.scale-note span {
  display: block;
}

.scale-note span {
  margin-top: 4px;
  color: var(--muted);
  font-family:
    var(--mono-font);
}

@media (max-width: 900px) {
  .controls {
    grid-template-columns: 1fr 1fr;
  }

  #loadAllData {
    width: 100%;
  }

  .scale-grid {
    grid-template-columns:
      repeat(6, minmax(55px, 1fr));
  }
}

@media (max-width: 600px) {
  body {
    padding: 22px 14px 40px;
  }

  .controls {
    grid-template-columns: 1fr;
  }

  .section-heading {
    display: block;
  }

  .section-heading p {
    margin-top: 6px;
  }

  .scale-grid {
    grid-template-columns:
      repeat(4, minmax(50px, 1fr));
  }
}


.log-panel {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--outer-radius);
  background: var(--panel);
}

.log-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.log-heading h2 {
  margin-bottom: 4px;
  font-size: 18px;
}

.log-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

#midiLog {
  min-height: 220px;
  max-height: 420px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--log-background);
  color: #d7ddd7;
  font-family:
    var(--mono-font);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .log-heading {
    align-items: stretch;
    flex-direction: column;
  }

  #clearLog {
    width: 100%;
  }
}


.current-program-editor {
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--outer-radius);
  background: var(--panel);
}

.program-editor-header {
  display: grid;
  grid-template-columns: auto minmax(180px, 360px);
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.program-editor-location {
  color: var(--accent);
  font-family:
    var(--mono-font);
  font-size: 20px;
}

.program-name-input {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--field-dark);
  color: var(--text);
  font: inherit;
  font-size: 18px;
}

.program-editor-sections {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.program-editor-section {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-dark);
}

.program-editor-section h3 {
  margin-bottom: 14px;
}

.program-field {
  display: grid;
  grid-template-columns:
    minmax(120px, 1fr)
    minmax(90px, 1fr)
    44px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.program-field:last-child {
  margin-bottom: 0;
}

.program-field-label {
  color: var(--muted);
  font-size: 12px;
}

.program-field input,
.program-field select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 5px 7px;
}

.program-field input[type="range"] {
  padding: 0;
}

.program-field output {
  color: var(--text);
  font-family:
    var(--mono-font);
  font-size: 12px;
  text-align: right;
}

.program-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.program-list-heading h3,
.program-list-heading p {
  margin: 0;
}

.program-list-heading p {
  color: var(--muted);
  font-size: 12px;
}

.program-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  grid-template-rows:
    repeat(20, auto);
  grid-auto-flow: column;
  gap: 5px;
}

.program-grid[data-count="136"] {
  grid-template-rows:
    repeat(28, auto);
}

.program-slot {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 7px;
  border-radius: 4px;
  text-align: left;
}

.program-slot.selected {
  border-color: var(--accent);
  background: var(--accent-dark);
}

.program-slot-number {
  color: var(--accent);
  font-family:
    var(--mono-font);
  font-size: 11px;
}

.program-slot-name {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .program-editor-sections {
    grid-template-columns: 1fr;
  }

  .program-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    grid-template-rows:
      repeat(34, auto);
  }

  .program-grid[data-count="136"] {
    grid-template-rows:
      repeat(46, auto);
  }
}

@media (max-width: 650px) {
  .program-editor-header {
    grid-template-columns: 1fr;
  }

  .program-field {
    grid-template-columns:
      minmax(100px, 1fr)
      minmax(80px, 1fr)
      40px;
  }

  .program-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    grid-template-rows:
      repeat(50, auto);
  }

  .program-grid[data-count="136"] {
    grid-template-rows:
      repeat(68, auto);
  }
}


.cache-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}

#clearLocalCache {
  min-height: 34px;
  padding: 5px 10px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cache-row {
    align-items: stretch;
    flex-direction: column;
  }

  #clearLocalCache {
    width: 100%;
  }
}


/* Program identity and write workflow */

.program-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.program-editor-identity {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-family:
    var(--mono-font);
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-editor-identity-select {
  width: min(620px, 100%);
  min-height: 42px;
  flex: 1 1 420px;
  padding: 6px 38px 6px 10px;
  border-color:
    color-mix(
      in srgb,
      var(--accent) 45%,
      var(--border)
    );
  background-color: var(--identity-select-background);
  color: var(--accent);
  font-weight: 700;
  text-overflow: ellipsis;
}

.program-editor-identity-select:hover,
.program-editor-identity-select:focus {
  border-color: var(--accent);
  outline: none;
}

.program-editor-identity-select option,
.program-editor-identity-select optgroup {
  background: var(--panel-light);
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
}

.program-write-open {
  flex: 0 0 auto;
  min-width: 96px;
}

.program-write-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow:
    0 24px 80px rgb(0 0 0 / 65%);
}

.program-write-dialog::backdrop {
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(2px);
}

.program-write-form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.program-write-heading h2,
.program-write-heading p {
  margin: 0;
}

.program-write-heading h2 {
  margin-bottom: 5px;
  font-size: 20px;
}

.program-write-heading p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.program-write-field {
  display: grid;
  gap: 7px;
}

.program-write-field > span {
  color: var(--muted);
  font-size: 12px;
}

.program-write-field input,
.program-write-field select {
  width: 100%;
}

.program-write-field input {
  min-height: 42px;
  padding: 8px 10px;
  font:
    17px var(--mono-font);
}

.program-write-destinations {
  min-height: 260px;
  padding: 4px;
  font:
    13px var(--mono-font);
}

.program-write-destinations option {
  padding: 5px 7px;
}

.program-write-status {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--field-dark);
  color: var(--muted);
  font-size: 12px;
}

.program-write-status.error {
  border-color: #7b3434;
  color: #ffb4b4;
}

.program-write-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.program-write-actions button {
  min-width: 92px;
}

@media (max-width: 650px) {
  .program-editor-header {
    align-items: stretch;
    flex-direction: column;
  }

  .program-editor-identity-select {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
  }

  .program-write-open {
    width: 100%;
  }

  .program-write-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .program-write-form {
    padding: 15px;
  }

  .program-write-destinations {
    min-height: 220px;
  }
}


/* Combination editor */

.current-combination-editor {
  padding-bottom: 18px;
}

.combination-editor-body {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.combination-effect-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alpha-12);
}

.combination-effect-controls h3 {
  margin: 0;
  font-size: 14px;
}

.combination-effect-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.combination-effect-fields label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.combination-effect-fields input {
  width: 70px;
}

.combination-effect-fields select {
  min-width: 130px;
}

.combination-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.combination-timbre-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  background: var(--surface-alpha-12);
  font-size: 12px;
}

.combination-timbre-table th,
.combination-timbre-table td {
  padding: 6px 5px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}

.combination-timbre-table tr:last-child > * {
  border-bottom: 0;
}

.combination-timbre-table tr > *:last-child {
  border-right: 0;
}

.combination-timbre-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
}

.combination-timbre-table tbody th {
  color: var(--accent);
  font-family:
    var(--mono-font);
}

.combination-number-heading,
.combination-number-cell {
  width: 28px;
  min-width: 28px;
  padding-inline: 3px !important;
}

.combination-on-heading,
.combination-on-cell {
  width: 34px;
  min-width: 34px;
  padding-inline: 3px !important;
}

.combination-on-cell input {
  margin: 0;
}

.combination-program-select {
  width: 168px;
  font-family:
    var(--mono-font);
}

.combination-channel-select {
  width: 52px;
  min-width: 52px;
  padding-inline: 7px;
}

.combination-send-select {
  width: 74px;
  min-width: 74px;
  padding-inline: 4px;
  font-size: 11px;
}

.combination-number {
  width: 72px;
}

.combination-number-narrow {
  width: 74px;
  min-width: 74px;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--panel-light);
  color: var(--text);
  font:
    12px var(--mono-font);
  text-align: center;
}

.combination-number-narrow:focus {
  border-color: var(--accent);
  outline: none;
}

.combination-filter-cell {
  width: 116px;
  min-width: 116px;
  padding-inline: 4px !important;
}

.combination-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--surface-alpha-14);
}

.combination-filter {
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.combination-filter input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.combination-filter span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #171a17;
  color: var(--muted);
  font:
    11px var(--mono-font);
}

.combination-filter input:checked + span {
  border-color: var(--accent);
  background: rgb(102 211 132 / 16%);
  color: var(--accent);
}

.combination-zone-editor {
  min-width: 720px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alpha-10);
}


.combination-zone-row {
  display: grid;
  grid-template-columns:
    26px
    minmax(0, 1fr)
    minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}


.combination-zone-rows {
  display: block;
}

.combination-zone-row {
  min-height: 38px;
  padding: 3px 9px;
}

.combination-zone-row + .combination-zone-row {
  border-top: 1px solid
    var(--border-faint);
}

.combination-zone-timbre {
  color: var(--accent);
  font:
    11px var(--mono-font);
  text-align: center;
}

.combination-zone-group {
  display: grid;
  grid-template-columns:
    86px
    minmax(54px, 1fr)
    86px;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.combination-zone-mobile-label {
  display: none;
}

.combination-zone-number,
.combination-note-select {
  box-sizing: border-box;
  width: 86px;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--panel-light);
  color: var(--text);
  font:
    10px var(--mono-font);
}

.combination-zone-number {
  text-align: center;
}

.combination-zone-number:focus,
.combination-note-select:focus {
  border-color: var(--accent);
  outline: none;
}

.combination-zone-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #0d0f0d;
}

.combination-zone-bar {
  position: absolute;
  inset-block: 1px;
  left: var(--zone-start);
  width: max(3px, var(--zone-width));
  border-radius: 999px;
  background: var(--accent);
}

@media (max-width: 820px) {
  .combination-zone-editor {
    min-width: 0;
  }

  .combination-zone-row {
    grid-template-columns:
      24px minmax(0, 1fr);
    gap: 5px 8px;
    padding-block: 6px;
  }

  .combination-zone-timbre {
    grid-row: 1 / span 2;
  }

  .combination-zone-group {
    grid-column: 2;
    grid-template-columns:
      64px
      82px
      minmax(45px, 1fr)
      82px;
  }

  .combination-zone-mobile-label {
    display: block;
    color: var(--muted);
    font-size: 10px;
  }

  .combination-zone-number,
  .combination-note-select {
    width: 82px;
  }
}


/* Program bank selector */

.program-list-title {
  min-width: 0;
}

.program-list-title h3,
.program-list-title p {
  margin: 0;
}

.program-list-title p {
  margin-top: 3px;
}

.program-bank-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgb(0 0 0 / 18%);
}

.program-bank-switch button {
  min-height: 32px;
  padding: 5px 12px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.program-bank-switch button:hover {
  color: var(--text);
}

.program-bank-switch button.selected {
  border-color: var(--accent);
  background: rgb(102 211 132 / 15%);
  color: var(--accent);
}

@media (max-width: 650px) {
  .program-list-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .program-bank-switch {
    width: 100%;
  }

  .program-bank-switch button {
    flex: 1;
  }
}


.program-loading-state {
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--muted);
}


.combination-program-cell {
  width: 178px;
  min-width: 178px;
}

.combination-program-select {
  width: 168px;
  min-width: 168px;
}

.combination-channel-cell {
  width: 62px;
  min-width: 62px;
}

.combination-volume-cell {
  width: 154px;
  min-width: 154px;
}

.combination-pan-cell {
  width: 154px;
  min-width: 154px;
}

.combination-transpose-cell,
.combination-detune-cell,
.combination-send-cell {
  width: 84px;
  min-width: 84px;
  padding-inline: 4px !important;
}

.combination-range-control {
  display: grid;
  grid-template-columns:
    minmax(104px, 1fr)
    36px;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.combination-range-control input[type="range"] {
  width: 100%;
  min-width: 104px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.combination-range-control output {
  overflow: hidden;
  color: var(--text);
  font:
    11px var(--mono-font);
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}

.combination-pan-control output {
  min-width: 34px;
}


/* Global editor */

.current-global-editor {
  display: block;
}

.global-editor-toolbar {
  justify-content: flex-end;
}

.global-editor-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.global-edit-status {
  color: var(--muted);
  font-size: 12px;
}

.global-edit-status.dirty {
  color: #f0c86b;
}

.global-edit-status.writing {
  color: var(--accent);
}

.global-editor-sections {
  grid-template-columns:
    repeat(2, minmax(300px, 1fr));
}

.global-editor-sections
.program-field {
  grid-template-columns:
    minmax(125px, 1fr)
    minmax(120px, 1fr)
    minmax(90px, auto);
}

.global-editor-sections
.program-field output {
  min-width: 88px;
}

.global-user-scale {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--inner-radius);
  background: var(--surface-alpha-12);
}

.global-section-heading {
  display: block;
  margin-bottom: 11px;
}

.global-section-heading h4,
.global-section-heading p {
  margin: 0;
}

.global-section-heading p {
  color: var(--muted);
  font-size: 12px;
}

.global-user-scale-grid {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.global-note-field {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--inner-radius);
  background: var(--field-dark);
}

.global-note-field strong {
  color: var(--accent);
  font:
    12px var(--mono-font);
}

.global-note-field input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
}

.global-note-field span {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 980px) {
  .global-editor-sections {
    grid-template-columns: 1fr;
  }

  .global-user-scale-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .global-editor-sections
  .program-field {
    grid-template-columns:
      minmax(100px, 1fr)
      minmax(90px, 1fr)
      minmax(72px, auto);
  }

  .global-user-scale-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .global-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Global double-table alignment */

.global-editor-sections {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(300px, 1fr));
  gap: 12px;
}

.global-user-scale {
  padding: 12px;
}

.global-section-heading {
  display: block;
  margin-bottom: 11px;
}

.global-section-heading h4,
.global-section-heading p {
  margin: 0;
}

@media (max-width: 980px) {
  .global-editor-sections {
    grid-template-columns:
      minmax(0, 1fr);
  }
}


/* Inactive Combination timbres */

.combination-timbre-table
tbody tr.is-off > * {
  background:
    rgb(255 255 255 / 1.5%);
  color:
    color-mix(
      in srgb,
      currentColor 48%,
      transparent
    );
}

.combination-timbre-table
tbody tr.is-off
:is(
  select,
  input:not([type="checkbox"]),
  .toggle-control,
  .combination-filter-group
) {
  opacity: 0.42;
  filter: grayscale(1);
}

.combination-timbre-table
tbody tr.is-off
.combination-on-cell {
  background:
    rgb(255 255 255 / 3%);
  color: inherit;
}

.combination-timbre-table
tbody tr.is-off
.combination-on-cell input {
  opacity: 1;
  filter: none;
}


/* Section-specific content shells */

.combination-section-programs
.combination-table-wrap {
  border: 0;
  border-radius: 0;
}

.editor-section-effects
.combination-effect-controls {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.combination-section-zones
.combination-zone-editor {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* Combination Zones double table layout */

.combination-section-zones
.combination-section-content {
  padding: 14px;
  overflow: visible;
}

.combination-section-zones
.combination-zone-editor {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.combination-zone-double-table {
  min-width: 0;
  overflow: visible;
}


.combination-zone-panel h4 {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--heading-alpha-02);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.combination-zone-panel-row {
  grid-template-columns:
    26px minmax(0, 1fr);
}

.combination-zone-panel
.combination-zone-row {
  padding: 4px 10px;
}

.combination-zone-panel
.combination-zone-row:first-child {
  border-top: 0;
}

.combination-zone-panel
.combination-zone-row:last-child {
  border-bottom: 0;
}

.combination-zone-panel
.combination-zone-row + .combination-zone-row {
  border-top: 1px solid
    var(--border-faint);
}

.combination-zone-panel
.combination-zone-group {
  grid-template-columns:
    86px minmax(54px, 1fr) 86px;
}


/* Shared effect editor nested table layout */

.editor-section-effects
.ui-section-content {
  padding: 14px;
  overflow: visible;
}

.combination-effects-editor {
  display: grid;
  gap: 12px;
  min-width: 0;
}


.combination-effect-panel-header {
  display: grid;
  min-height: 38px;
  grid-template-columns:
    auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--heading-alpha-02);
}

.combination-effect-panel-header strong {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: none;
}

.combination-effect-type-select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--accent);
  font:
    11px var(--mono-font);
  font-weight: 700;
}

.combination-effect-enabled {
  position: relative;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  cursor: pointer;
}

.combination-effect-enabled input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.combination-effect-enabled span {
  width: 11px;
  height: 11px;
  border: 1px solid #7d3434;
  border-radius: 2px;
  background: #341717;
}

.combination-effect-enabled
input:checked + span {
  border-color: #ff5555;
  background: #d62929;
  box-shadow:
    0 0 7px rgb(255 60 60 / 38%);
}

.combination-effect-parameter-rows {
  display: grid;
  grid-template-rows:
    repeat(8, 38px);
}

.combination-effect-parameter-row {
  display: grid;
  grid-template-columns:
    minmax(126px, 0.8fr)
    minmax(120px, 1.5fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 10px;
  border-bottom: 1px solid
    var(--border-faint);
}

.combination-effect-parameter-row.is-blank {
  background: var(--surface-alpha-04);
}

.combination-effect-parameter-row label {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combination-effect-parameter-control {
  display: grid;
  min-width: 0;
  grid-template-columns:
    44px auto minmax(100px, 1fr);
  align-items: center;
  gap: 5px;
}

.combination-effect-value-select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 28px;
  grid-column: 1 / -1;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--text);
  font:
    10px var(--mono-font);
}

.combination-effect-value-select:focus {
  border-color: var(--accent);
  outline: none;
}

.combination-effect-value-output {
  min-width: 44px;
  color: var(--text);
  font:
    10px var(--mono-font);
  text-align: right;
  user-select: none;
  white-space: nowrap;
}

.combination-effect-unit {
  min-width: 22px;
  color: var(--muted);
  font-size: 9px;
}

.combination-effect-slider {
  width: 100%;
  min-width: 60px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}

.combination-effect-dynamic {
  border-top: 1px solid var(--border);
}

.combination-effect-dynamic-row {
  grid-template-columns:
    minmax(126px, 0.8fr)
    minmax(120px, 1.5fr);
}

.combination-effect-dynamic-control {
  grid-template-columns:
    minmax(0, 1fr);
}

.combination-effect-dynamic-inline {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    34px
    minmax(80px, 0.9fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.combination-effect-dynamic-source-select {
  min-width: 0;
  height: 26px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--text);
  font:
    10px var(--mono-font);
}

.combination-effect-dynamic-intensity-label {
  color: var(--muted);
  font-size: 9px;
}

.combination-effect-dynamic-intensity-output {
  color: var(--text);
  font:
    10px var(--mono-font);
  text-align: right;
}

.combination-effect-dynamic-intensity-slider {
  width: 100%;
  min-width: 70px;
  margin: 0;
  accent-color: var(--accent);
}

.combination-effect-panel.is-disabled {
  opacity: 0.62;
}


@media (max-width: 980px) {
  .combination-effects-panels {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .combination-effect-dynamic-inline {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/* FX Routing inner table */

.combination-effect-routing {
  display: grid;
  grid-template-columns:
    minmax(240px, 0.9fr)
    minmax(280px, 1.1fr);
  gap: 12px;
}

.combination-effect-routing-controls {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.combination-effect-routing-controls strong {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.combination-routing-placement {
  display: grid;
  grid-template-columns:
    88px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}


.combination-routing-mode-controls {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.combination-routing-range-field {
  display: grid;
  grid-template-columns:
    88px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.combination-routing-range-label {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combination-routing-range-control {
  display: grid;
  grid-template-columns:
    auto minmax(80px, 1fr) auto 32px;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.combination-routing-endpoint {
  color: var(--muted);
  font-size: 9px;
}

.combination-routing-range-control input {
  width: 100%;
  min-width: 70px;
  margin: 0;
  accent-color: var(--accent);
}

.combination-routing-range-control output {
  color: var(--text);
  font:
    10px var(--mono-font);
  text-align: right;
}

.combination-routing-diagram {
  display: grid;
  min-width: 0;
  min-height: 136px;
  margin: 0;
  padding: 10px;
  border-left: 1px solid var(--border);
  place-items: center;
  background: var(--surface-alpha-08);
}

.combination-routing-diagram img {
  display: block;
  max-width: 100%;
  max-height: 156px;
  object-fit: contain;
}

@media (max-width: 760px) {
  .combination-effect-routing {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .combination-routing-diagram {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}


/* Universal segmented choice controls */

.ui-choice-group {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.ui-choice-button {
  min-width: 0;
  border-color: var(--border);
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--muted);
  line-height: 1;
}

.ui-choice-button:hover:not(:disabled) {
  border-color: var(--button-hover-border);
  color: var(--text);
}

.ui-choice-button.is-selected {
  border-color: var(--accent);
  background: var(--accent-dark);
  color: var(--accent);
  box-shadow:
    inset 0 0 0 1px
    rgb(155 198 155 / 16%);
}

/* FX Routing placement buttons */

.combination-routing-placement-buttons {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.combination-routing-placement-buttons button {
  min-width: 0;
  min-height: 26px;
  height: 26px;
  padding: 2px 6px;
  border-color: var(--border);
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--muted);
  font:
    10px var(--mono-font);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.combination-routing-placement-buttons button:hover:not(:disabled) {
  border-color: var(--button-hover-border);
  color: var(--text);
}

.combination-routing-placement-buttons button.is-selected {
  border-color: var(--accent);
  background: var(--accent-dark);
  color: var(--accent);
  box-shadow:
    inset 0 0 0 1px
    rgb(155 198 155 / 16%);
}

@media (max-width: 760px) {
  .combination-routing-placement-buttons {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* Program editor sections */

.current-program-editor {
  padding-bottom: 18px;
}

.program-editor-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}

.program-section-content {
  padding: 14px;
}

.editor-section-effects
.program-section-content {
  padding: 14px;
  overflow: visible;
}


.program-parameter-group {
  padding: 12px;
}

.program-parameter-group h4 {
  margin: 0 0 11px;
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.program-parameter-group
.program-field {
  grid-template-columns:
    minmax(126px, 0.8fr)
    minmax(120px, 1.5fr)
    44px;
  gap: 8px;
  margin-bottom: 8px;
}

.program-parameter-group
.program-field-select
select {
  grid-column: 2 / 4;
}

.program-parameter-group
.program-field-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-parameter-group
.program-field input[type="range"] {
  accent-color: var(--accent);
}


@media (max-width: 600px) {
  .program-section-content {
    padding: 10px;
  }

  .program-parameter-group {
    padding: 10px;
  }

  .program-parameter-group
  .program-field {
    grid-template-columns:
      minmax(105px, 0.72fr)
      minmax(90px, 1.4fr)
      40px;
  }
}


/* Live Program EG visualisations */

.program-envelope-graph {
  width: 100%;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid
    color-mix(
      in srgb,
      var(--border) 82%,
      transparent
    );
  border-radius: 4px;
  background:
    linear-gradient(
      180deg,
      rgb(155 198 155 / 3%),
      transparent 42%
    ),
    #080b08;
}

.program-envelope-svg {
  display: block;
  width: 100%;
  height: 138px;
}

.program-envelope-grid-line {
  stroke: #1d241d;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.program-envelope-stage-line {
  stroke: #1b211b;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.program-envelope-zero-line {
  stroke: #586358;
  stroke-width: 1;
  stroke-dasharray: 4 5;
  opacity: 0.72;
  vector-effect: non-scaling-stroke;
}

.program-envelope-note-off-line {
  stroke: #718071;
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.82;
  vector-effect: non-scaling-stroke;
}

.program-envelope-path-glow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  opacity: 0.13;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.program-envelope-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.program-envelope-point {
  fill: #0b0e0b;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.program-envelope-phase-label,
.program-envelope-axis-label,
.program-envelope-note-off-label {
  fill: var(--muted);
  font-family:
    var(--mono-font);
  user-select: none;
}

.program-envelope-phase-label {
  font-size: 10px;
  font-weight: 700;
}

.program-envelope-axis-label {
  fill: #707970;
  font-size: 9px;
}

.program-envelope-note-off-label {
  fill: #859085;
  font-size: 8px;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .program-envelope-svg {
    height: 122px;
  }
}


/* Compact Program controls and paired Oscillator sections */

.program-editor-sections {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.program-section-control,
.program-section-effects {
  grid-column: 1 / -1;
}

.program-section-oscillator1,
.program-section-oscillator2 {
  min-width: 0;
}

.program-oscillator-editor.program-group-grid {
  grid-template-columns:
    minmax(0, 1fr);
  gap: 9px;
}

.program-section-content {
  padding: 10px;
}

.program-parameter-group {
  padding: 9px 10px;
}

.program-parameter-group h4 {
  margin-bottom: 8px;
}

.program-parameter-group
.program-field {
  min-height: 30px;
  gap: 6px;
  margin-bottom: 3px;
}

.program-parameter-group
.program-field input,
.program-parameter-group
.program-field select {
  height: 28px;
  min-height: 28px;
  padding: 3px 6px;
}

.program-parameter-group
.program-field input[type="range"] {
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
}

.program-parameter-group
.program-field output {
  line-height: 1;
}

.program-envelope-graph {
  margin-bottom: 8px;
}

@media (max-width: 1050px) {
  .program-editor-sections {
    grid-template-columns: 1fr;
  }

  .program-section-control,
  .program-section-oscillator1,
  .program-section-oscillator2,
  .program-section-effects {
    grid-column: 1;
  }
}


/* Program oscillator pan: OFF, A15…A1, CNT, B1…B15 */

.program-pan-field output {
  min-width: 34px;
  text-align: right;
}


/* Program Oscillator mode-dependent state */

.program-oscillator-pane-2.is-mode-disabled
.combination-section-header h3,
.program-oscillator-pane-2.is-mode-disabled
.program-section-content {
  opacity: 0.38;
  filter: grayscale(0.7);
}

.program-oscillator-pane-2.is-mode-disabled
.program-section-content {
  cursor: not-allowed;
}

.program-oscillator-pane-2.is-mode-disabled
.program-section-content
:is(input, select, button) {
  cursor: not-allowed;
}

.program-osc2-mode-field.is-mode-disabled {
  opacity: 0.38;
  filter: grayscale(0.7);
  cursor: not-allowed;
}

.program-osc2-mode-field.is-mode-disabled
:is(input, select) {
  cursor: not-allowed;
}


/* Control section: two ordered, equal-height columns */

.program-control-editor.program-group-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 9px;
}

.program-control-column {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  gap: 9px;
}

.program-control-column >
.program-parameter-group {
  flex: 1 1 auto;
}

@media (max-width: 980px) {
  .program-control-editor.program-group-grid {
    grid-template-columns: 1fr;
  }

  .program-control-column {
    height: auto;
  }

  .program-control-column >
  .program-parameter-group {
    flex: 0 0 auto;
  }
}


/* Program Polyphony segmented buttons */

.program-parameter-group
.program-field-button-choice {
  align-items: center;
}

.program-button-choice {
  display: grid;
  min-width: 0;
  grid-column: 2 / 4;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.program-button-choice-option {
  min-width: 0;
  min-height: 28px;
  height: 28px;
  padding: 3px 8px;
  border-color: var(--border);
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.program-button-choice-option:hover:not(:disabled) {
  border-color: var(--button-hover-border);
  color: var(--text);
}

.program-button-choice-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-dark);
  color: var(--accent);
  box-shadow:
    inset 0 0 0 1px
    rgb(155 198 155 / 16%);
}


/* Variable-width Program segmented controls */

.program-oscillator-mode-choice
.program-button-choice-option,
.program-octave-choice
.program-button-choice-option {
  padding-inline: 5px;
}

.program-oscillator-mode-choice
.program-button-choice-option {
  font-size: 10px;
}

.program-octave-choice
.program-button-choice-option {
  font-family:
    var(--mono-font);
}


/* One shared Oscillators section with two internal panes */

.program-editor-sections {
  grid-template-columns: minmax(0, 1fr);
}

.program-section-control,
.program-section-oscillators,
.program-section-effects {
  grid-column: 1;
}

.program-oscillators-editor {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.program-oscillator-pane {
  min-width: 0;
}

.program-oscillator-pane-2.is-mode-disabled {
  opacity: 0.38;
  filter: grayscale(0.7);
  cursor: not-allowed;
}

.program-oscillator-pane-2.is-mode-disabled
:is(input, select, button) {
  cursor: not-allowed;
}

/* Graphical MG waveform segmented controls */

.program-waveform-choice
.program-button-choice {
  grid-template-columns:
    repeat(6, minmax(30px, 1fr)) !important;
  gap: 3px;
}

.program-waveform-choice
.program-button-choice-option {
  height: 32px;
  min-height: 32px;
  padding: 4px 5px;
}

.program-waveform-icon {
  display: block;
  width: 100%;
  height: 18px;
  overflow: visible;
}

.program-waveform-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.program-waveform-choice
.program-button-choice-option.is-selected
.program-waveform-icon path {
  stroke-width: 2.2;
}

.program-vdf-mg-oscillator-choice
.program-button-choice-option {
  padding-inline: 4px;
  font-size: 10px;
}

@media (max-width: 1050px) {
  .program-oscillators-editor {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .program-waveform-choice
  .program-button-choice {
    grid-template-columns:
      repeat(3, minmax(38px, 1fr)) !important;
  }
}


/* Application branding */

.app-heading {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.app-heading h1 {
  margin: 0;
}

.x5dr-logo {
  display: block;
  width: auto;
  max-width: min(260px, 42vw);
  height: 54px;
  object-fit: contain;
  object-position: right center;
}

@media (max-width: 600px) {
  .app-heading {
    min-height: 46px;
    gap: 14px;
  }

  .app-heading h1 {
    font-size: 22px;
  }

  .x5dr-logo {
    max-width: 42vw;
    height: 42px;
  }
}


/* Editable Multi setup */

.current-multi-editor {
  display: block;
  padding-bottom: 18px;
}

.multi-editor-body {
  margin-top: 0;
}

.multi-section-tracks
.combination-table-wrap {
  border: 0;
  border-radius: 0;
}

.editor-section-effects
.multi-section-content {
  overflow: visible;
}

.editor-section-effects
.combination-effect-controls {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.multi-track-table-wrap {
  width: 100%;
}

.multi-track-table {
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
  font-size: 11px;
}

.multi-track-table th,
.multi-track-table td {
  padding: 3px 3px;
}

/*
 * Fixed utility columns keep their compact sizing. Level and Pan have
 * no fixed width, so they divide all remaining horizontal space.
 */
.multi-track-table tr > :nth-child(1) {
  width: 34px;
}

.multi-track-table tr > :nth-child(2) {
  width: 145px;
}

.multi-track-table tr > :nth-child(3) {
  width: 48px;
}

.multi-track-table tr > :nth-child(4) {
  width: 100px;
}

.multi-track-table tr > :nth-child(7),
.multi-track-table tr > :nth-child(8),
.multi-track-table tr > :nth-child(9) {
  width: 58px;
}

.multi-track-table tr > :nth-child(10),
.multi-track-table tr > :nth-child(11) {
  width: 68px;
}

.multi-track-table thead th {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
}

.multi-track-table
.combination-program-cell {
  padding-inline: 2px;
}

.multi-track-table
.combination-program-select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 27px;
  padding: 2px 4px;
  font-size: 10px;
}

.multi-track-table
.combination-channel-select {
  box-sizing: border-box;
  width: calc(100% - 4px);
  min-width: 0;
  height: 27px;
  margin-inline: 2px;
  padding: 2px 4px;
  font-size: 10px;
}

.multi-track-table
.combination-filter-cell {
  padding-inline: 2px !important;
}

.multi-track-table
.combination-filter-group {
  justify-content: center;
  gap: 2px;
  padding: 1px 2px;
}

.multi-track-table
.combination-filter span {
  width: 19px;
  height: 23px;
  font-size: 9px;
}

.multi-track-table
.combination-range-control {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns:
    minmax(105px, 1fr)
    32px;
  gap: 4px;
}

.multi-track-table
.combination-range-control
input[type="range"] {
  width: 100%;
  min-width: 105px;
  height: 16px;
}

.multi-track-table
.combination-range-control output {
  min-width: 30px;
  font-size: 10px;
}

.multi-track-table
.combination-transpose-cell,
.multi-track-table
.combination-detune-cell,
.multi-track-table
.multi-bend-cell {
  padding-inline: 3px !important;
}

.multi-track-table
.combination-number-narrow {
  box-sizing: border-box;
  width: 50px;
  min-width: 0;
  height: 27px;
  padding: 2px 4px;
  font-size: 10px;
}

.multi-track-table
.combination-send-cell {
  padding-inline: 4px !important;
}

.multi-track-table
.combination-send-select {
  box-sizing: border-box;
  width: 58px;
  min-width: 0;
  height: 27px;
  padding: 2px 4px;
  font-size: 10px;
}


/* Editable Drum Kits */

.current-drum-editor {
  display: block;
  padding-bottom: 18px;
}

.drum-editor-header {
  align-items: center;
}

.drum-kit-switcher {
  margin: 0;
}

.drum-kit-button {
  min-width: 104px;
}

.drum-editor-body {
  margin-top: 0;
}

.drum-kit-table {
  width: 100%;
  min-width: 1040px;
  table-layout: fixed;
  font-size: 11px;
}

.drum-kit-table th,
.drum-kit-table td {
  padding: 3px;
}

/*
 * Named columns keep the layout stable when the table structure changes.
 * Key and Drum Sound get enough room to read, Level and Pan get proper
 * horizontal controls, and the numeric/send columns remain compact.
 */
.drum-kit-table .drum-col-key {
  width: 96px;
}

.drum-kit-table .drum-col-sound {
  width: 220px;
}

.drum-kit-table .drum-col-level {
  width: 220px;
}

.drum-kit-table .drum-col-pan {
  width: 200px;
}

.drum-kit-table .drum-col-tune,
.drum-kit-table .drum-col-decay {
  width: 72px;
}

.drum-kit-table .drum-col-send {
  width: 64px;
}

.drum-kit-table thead th {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
}

.drum-key-cell {
  color: var(--accent);
  font-family:
    var(--mono-font);
  text-align: center;
}

.drum-index-cell {
  color: var(--accent);
  font-family:
    var(--mono-font);
}

.drum-key-select,
.drum-sound-select,
.drum-send-select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 27px;
  padding: 2px 4px;
  font-size: 10px;
}

.drum-key-select,
.drum-sound-select {
  font-family:
    var(--mono-font);
}

.drum-level-control,
.drum-pan-control {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns:
    minmax(90px, 1fr)
    34px;
  gap: 4px;
}

.drum-level-control input[type="range"],
.drum-pan-control input[type="range"] {
  width: 100%;
  min-width: 90px;
  height: 16px;
}

.drum-level-control output,
.drum-pan-control output {
  min-width: 34px;
  font-size: 10px;
}

.drum-number-cell,
.drum-send-cell {
  padding-inline: 4px !important;
}

.drum-number-input {
  box-sizing: border-box;
  width: 58px;
  min-width: 0;
  height: 27px;
  padding: 2px 4px;
  font-size: 10px;
}

.drum-send-select {
  width: 52px;
  margin-inline: auto;
}

.drum-kit-table
tbody tr.is-off
.drum-sound-cell select {
  opacity: 1;
  filter: none;
}

@media (max-width: 700px) {
  .drum-editor-header {
    align-items: stretch;
  }

  .drum-kit-switcher {
    width: 100%;
  }

  .drum-kit-button {
    flex: 1 1 0;
    min-width: 0;
  }
}

/*
 * Shared spacing for the top-level editor categories.
 *
 * Program:     Control / Oscillators / Effects
 * Combination: Programs / Effects / Zones
 * Global:      Keys & Tuning / MIDI
 *
 * Keep the vertical rhythm defined here rather than separately in each
 * page-specific container class.
 */
.editor-section-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin-top: 18px;
}

/*
 * Global Keys & Tuning layout.
 *
 * This selector is deliberately more specific than the generic
 * .program-editor-sections rules that occur earlier in the stylesheet,
 * so the four Global setting groups remain in two columns.
 */
.program-editor-sections.global-editor-sections {
  grid-template-columns:
    repeat(2, minmax(300px, 1fr));
}

/* Match the green range-control styling used elsewhere in the editor. */
.current-global-editor input[type="range"] {
  accent-color: var(--accent);
}

@media (max-width: 900px) {
  .program-editor-sections.global-editor-sections {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Program dependencies */

.program-section-dependencies
.program-section-content {
  padding: 10px;
}

.program-dependencies {
  min-width: 0;
}

.program-dependencies-summary,
.program-dependencies-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.program-dependencies-summary {
  margin-bottom: 8px;
}

.program-dependencies-list {
  display: grid;
  gap: 5px;
}

.program-dependency {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 9px;
  text-align: left;
}

.program-dependency:hover {
  border-color: var(--accent);
}

.program-dependency-identity {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 9px;
}

.program-dependency-identity strong {
  flex: 0 0 auto;
  color: var(--accent);
  font:
    12px var(--mono-font);
}

.program-dependency-identity > span {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-dependency-timbres {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.program-dependency-timbre {
  display: inline-grid;
  min-width: 28px;
  height: 23px;
  place-items: center;
  padding-inline: 5px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-dark);
  color: var(--accent);
  font:
    10px var(--mono-font);
}

.program-dependency-timbre.is-off {
  border-color: var(--border);
  background: var(--heading-alpha-02);
  color: var(--muted);
  opacity: 0.58;
}

@media (max-width: 600px) {
  .program-dependency {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .program-dependency-timbres {
    justify-content: flex-start;
  }
}

/* Connect page */

.connect-section-stack {
  margin-top: 0;
}

.connect-section-content {
  padding: 12px 14px;
}

.connect-section-description {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.connect-section-header #clearLog {
  width: auto;
  min-width: 76px;
}

.action-buttons {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.action-buttons button {
  white-space: nowrap;
}

#tab-settings #midiLog {
  min-height: 220px;
  max-height: 420px;
}

@media (max-width: 900px) {
  .action-buttons {
    width: 100%;
  }

  .action-buttons button {
    flex: 1;
  }
}

@media (max-width: 600px) {
  .connect-section-content {
    padding: 10px;
  }

  .connect-section-header #clearLog {
    width: auto;
  }

  .action-buttons {
    flex-direction: column;
  }
}

/* Connect outer editor and data-file controls */

.current-connect-editor {
  margin-bottom: 0;
}

.current-connect-editor
.connect-section-stack {
  margin-top: 0;
}

.connect-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.connect-file-actions button {
  min-width: 130px;
}

.connect-file-status {
  min-height: 18px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.connect-file-status.error {
  color: var(--error);
}

@media (max-width: 600px) {
  .connect-file-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .connect-file-actions button {
    width: 100%;
  }
}

/* Unified Connect-page typography */

#tab-settings,
#tab-settings button,
#tab-settings select,
#tab-settings label,
#tab-settings p,
#tab-settings span,
#tab-settings output {
  font-family: inherit;
}

#tab-settings #status {
  min-height: 18px;
  margin-top: 10px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}

#tab-settings #cacheStatus,
#tab-settings .connect-file-status,
#tab-settings .connect-section-description {
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
}

/* The diagnostic byte log is intentionally the only monospace area. */
#tab-settings #midiLog {
  font-family:
    var(--mono-font);
}

/* Program and Combination unsaved-state indicator */

.program-editor-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.editor-unsaved-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #8a672c;
  border-radius: 999px;
  background: #2a2112;
  color: #f3c86b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.editor-unsaved-indicator[hidden] {
  display: none;
}

@media (max-width: 650px) {
  .program-editor-actions {
    width: 100%;
  }

  .program-editor-actions .program-write-open {
    width: auto;
    flex: 1 1 auto;
  }
}

/* Compact VDA time-mod rows */

.program-switch-polarity-row {
  display: grid;
  grid-template-columns:
    minmax(126px, 0.8fr)
    minmax(120px, 1.5fr)
    44px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.program-switch-polarity-controls {
  display: grid;
  grid-column: 2 / 4;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.program-switch-polarity-control {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-width: 0;
  height: 28px;
  padding: 2px 6px;
  border-color: var(--border);
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.program-switch-polarity-control:hover:not(:disabled) {
  border-color: var(--button-hover-border);
  color: var(--text);
}

.program-switch-polarity-stage {
  color: var(--text);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.program-switch-polarity-value {
  justify-self: end;
  min-width: 16px;
  color: var(--accent);
  font-family:
    var(--mono-font);
  font-size: 12px;
  text-align: right;
}

@media (max-width: 600px) {
  .program-switch-polarity-row {
    grid-template-columns:
      minmax(105px, 0.72fr)
      minmax(90px, 1.4fr)
      40px;
  }

  .program-switch-polarity-control {
    padding-inline: 4px;
  }
}

/* Compact VDA direction buttons */

.vda-mod-direction-row button,
.vda-mod-direction-button {
  min-height: 24px;
  height: 24px;
  padding: 1px 7px;
  line-height: 1;
}

/* VDF key-track start row */

.vdf-key-track-row {
  align-items: center;
}

.vdf-key-track-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vdf-key-track-key-select {
  width: 118px;
  min-height: 24px;
  height: 24px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.vdf-key-track-mode-button {
  width: 108px;
  min-height: 24px;
  height: 24px;
  padding: 1px 7px;
  line-height: 1;
}

/* Key-track direction buttons: match octave-button height */

.program-switch-polarity-control,
.program-switch-polarity-button {
  min-height: 24px;
  height: 24px;
  padding-top: 1px;
  padding-bottom: 1px;
  line-height: 1;
}

/* VDF key-track mode button text */

.vdf-key-track-mode-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.vdf-key-track-mode-prefix {
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
}

.vdf-key-track-mode-value {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

/* Effect compact waveform controls */

.combination-effect-waveform-control {
  grid-template-columns:
    44px auto minmax(100px, 1fr);
}

.combination-effect-waveform-button-group {
  grid-column: 3;
  display: grid;
  grid-template-columns:
    repeat(2, 36px);
  gap: 4px;
  align-items: center;
  justify-content: start;
  min-width: 0;
}

.combination-effect-mod-shape {
  grid-template-columns:
    42px 84px minmax(130px, 1fr);
  gap: 10px;
  align-items: center;
}

.combination-effect-mod-shape-buttons {
  display: grid;
  grid-template-columns:
    repeat(2, 38px);
  gap: 4px;
  align-items: center;
}

.combination-effect-waveform-button-group button,
.combination-effect-mod-shape-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 24px;
  height: 24px;
  padding: 1px 5px;
  border-color: var(--border);
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--muted);
  line-height: 1;
  overflow: hidden;
}

.combination-effect-waveform-button-group button.is-selected,
.combination-effect-mod-shape-buttons button.is-selected {
  border-color: var(--accent);
  background: var(--accent-dark);
  color: var(--accent);
}

.waveform-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 12px;
  pointer-events: none;
}

.waveform-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
}

.waveform-icon-sine::before,
.waveform-icon-triangle::before {
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.waveform-icon-sine::before {
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 18'%3E%3Cpath d='M2 9 C8 -1 16 -1 24 9 C32 19 40 19 46 9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 18'%3E%3Cpath d='M2 9 C8 -1 16 -1 24 9 C32 19 40 19 46 9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.waveform-icon-triangle::before {
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 18'%3E%3Cpath d='M2 15 L13 3 L24 15 L35 3 L46 15' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 18'%3E%3Cpath d='M2 15 L13 3 L24 15 L35 3 L46 15' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.combination-effect-mod-shape
.combination-effect-value-output {
  width: 42px;
  text-align: right;
}

.combination-effect-mod-shape
.combination-effect-slider {
  min-width: 130px;
}

/* UI primitive correction: grids are layout only, subtables are shells */

.ui-grid-2,
.program-group-grid,
.combination-zone-double-table,
.combination-effects-panels,
.global-editor-sections {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(300px, 1fr));
  gap: 12px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.ui-subtable,
.program-parameter-group,
.combination-zone-panel,
.combination-effect-panel,
.combination-effect-routing {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--inner-radius);
  background: var(--surface-alpha-12);
}

.editor-section-effects
.combination-effect-controls,
.editor-section-effects
.combination-effects-panels {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

@media (max-width: 980px) {
  .ui-grid-2,
  .program-group-grid,
  .combination-zone-double-table,
  .combination-effects-panels,
  .global-editor-sections {
    grid-template-columns:
      minmax(0, 1fr);
  }
}

/* Controller label tooltips */

.has-controller-tooltip {
  cursor: help;
}

/* Program import/export controls */

.program-utility-button {
  min-width: 78px;
  min-height: 32px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 650px) {
  .program-editor-actions {
    flex-wrap: wrap;
  }

  .program-utility-button {
    flex: 1 1 auto;
  }
}