:root {
  color-scheme: dark;
  --bg: #0c111b;
  --surface: #111927;
  --surface-2: #182234;
  --surface-3: #202c42;
  --page: #eef0e9;
  --text: #f4f6f8;
  --muted: #8f9bad;
  --muted-strong: #b8c0cc;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --cream: #f7e6ad;
  --cyan: #56d9e8;
  --danger: #ff7b68;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  font-size: 16px;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(86, 217, 232, 0.07), transparent 28rem),
    linear-gradient(145deg, #0d1420, #090d15 74%);
  color: var(--text);
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

button,
input,
select {
  font: inherit;
}

button,
label,
select,
input[type="range"],
input[type="color"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
label.button:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.app-shell {
  min-height: 100vh;
  padding: 0 18px 16px;
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  max-width: 1540px;
  margin: 0 auto;
}

.topbar-primary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
}

.brand {
  --brand-height: 38px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

/* The earspasm mark and the PLBK wordmark share one height. The wordmark is
   outlined Futura PT Heavy with its viewBox trimmed to the letters, so the
   height is the cap height. */
.brand img {
  display: block;
  width: auto;
  height: var(--brand-height);
  object-fit: contain;
}

.now-playing {
  display: grid;
  min-width: 0;
  max-width: min(420px, 34vw);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 12px 8px;
  background: linear-gradient(145deg, rgba(32, 44, 66, 0.94), rgba(19, 28, 43, 0.94));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.now-playing span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
}

.now-playing strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Live audio input on/off in the header. The dot is dim green while off
   and lit green while the mic is connected. */
.audio-toggle {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 0 12px;
  background: #182235;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.015em;
  cursor: pointer;
}

.audio-toggle:hover {
  background: #223049;
  border-color: rgba(255, 255, 255, 0.28);
}

.audio-toggle i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2b5a3c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.audio-toggle em {
  min-width: 22px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.audio-toggle.is-on {
  border-color: rgba(111, 211, 157, 0.45);
}

.audio-toggle.is-on i {
  background: #6fd39d;
  box-shadow: 0 0 0 4px rgba(111, 211, 157, 0.16), 0 0 10px rgba(111, 211, 157, 0.55);
}

.audio-toggle.is-on em {
  color: #b7dfc9;
}

.button,
.icon-button,
.transport-button,
.number-stepper button {
  border: 0;
  cursor: pointer;
}

.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.015em;
}

.button svg,
.icon-button svg,
.transport-button svg,
.volume-line svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.button-secondary {
  background: #182235;
  color: var(--text);
}

.button-secondary:hover,
.icon-button:hover {
  background: #223049;
  border-color: rgba(255, 255, 255, 0.28);
}

.button-primary {
  background: var(--cream);
  color: #111722;
}

.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #182235;
  color: var(--muted-strong);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  max-width: 1540px;
  margin: 0 auto;
}

.reader-panel,
.control-panel {
  min-width: 0;
}

.score-stage {
  position: relative;
  display: grid;
  height: calc(100vh - 82px);
  min-height: 620px;
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #101725;
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 720;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

h1 {
  max-width: 780px;
  margin-bottom: 0;
  overflow: hidden;
  font-size: clamp(1.35rem, 2.1vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h2 {
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.visual-metronome {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(86, 217, 232, 0.14);
  border-radius: 50%;
  background: rgba(86, 217, 232, 0.025);
  opacity: 0.72;
}

.visual-metronome i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(86, 217, 232, 0.24);
  box-shadow: 0 0 0 0 rgba(86, 217, 232, 0);
}

.visual-metronome.is-pulsing {
  border-color: rgba(86, 217, 232, 0.48);
  background: rgba(86, 217, 232, 0.09);
  opacity: 1;
  transform: scale(1.025);
}

.visual-metronome.is-pulsing i {
  background: var(--cyan);
  box-shadow: 0 0 22px 5px rgba(86, 217, 232, 0.28);
  transform: scale(1.18);
}

.visual-metronome.is-downbeat.is-pulsing {
  border-color: rgba(247, 230, 173, 0.54);
  background: rgba(247, 230, 173, 0.08);
}

.visual-metronome.is-downbeat.is-pulsing i {
  background: var(--cream);
  box-shadow: 0 0 24px 6px rgba(247, 230, 173, 0.25);
}

.visual-metronome.is-disabled {
  visibility: hidden;
}

/* Undocked metronome: the docked light dims to a placeholder and a floating
   disc takes over. The disc is sized by --metro-size and everything inside
   scales with it (font-size carries the size so em units follow). */
.metro-dock-slot {
  position: relative;
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.metro-dock-hint {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 2px 6px;
  background: #182235;
  color: var(--text);
  font-size: 0.64rem;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.metro-dock-hint svg {
  width: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metro-dock-slot:hover .metro-dock-hint,
.metro-dock-slot:focus-visible .metro-dock-hint {
  opacity: 1;
}

.metro-dock-slot:hover .visual-metronome {
  border-color: rgba(86, 217, 232, 0.6);
}

.transport .visual-metronome.is-undocked {
  opacity: 0.22;
}

.transport .visual-metronome.is-undocked.is-pulsing {
  transform: none;
}

.metro-float {
  --metro-size: 96px;
  position: fixed;
  z-index: 40;
  width: var(--metro-size);
  height: var(--metro-size);
  font-size: var(--metro-size);
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.metro-float.is-dragging {
  cursor: grabbing;
}

.metro-float.is-disabled {
  display: none;
}

.metro-float {
  --metro-opacity: 0.85;
}

.metro-float .visual-metronome {
  width: 100%;
  height: 100%;
  flex: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: var(--metro-opacity);
}

.metro-float .visual-metronome i {
  width: 72%;
  height: 72%;
  background: rgba(86, 217, 232, 0.55);
  transition: none;
}

.metro-float .visual-metronome.is-pulsing {
  transform: none;
  background: transparent;
}

.metro-float .visual-metronome.is-pulsing i {
  background: var(--cyan);
  box-shadow: 0 0 0.35em 0.08em rgba(86, 217, 232, 0.5);
  transform: scale(1.12);
}

.metro-float .visual-metronome.is-downbeat.is-pulsing i {
  background: var(--cream);
  box-shadow: 0 0 0.4em 0.1em rgba(247, 230, 173, 0.45);
}

/* Hover (or tap) tab: size, opacity, flash timing. Kept as small as it
   can be read. Each row's icon turns into a "?" on hover and toggles a help
   line below the slider. */
.metro-float-tab {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  display: grid;
  gap: 3px;
  width: 136px;
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 5px 6px;
  background: rgba(16, 23, 36, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.metro-float.is-flipped .metro-float-tab {
  top: auto;
  bottom: calc(100% + 3px);
}

/* Invisible bridges over the 6px gap, above and below the tab, so moving
   the pointer from the disc onto the tab never counts as leaving. */
.metro-float-tab::before,
.metro-float-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
}

.metro-float-tab::before {
  top: -10px;
}

.metro-float-tab::after {
  bottom: -10px;
}

.metro-float:hover .metro-float-tab,
.metro-float.is-editing .metro-float-tab,
.metro-float:focus-within .metro-float-tab {
  opacity: 1;
  pointer-events: auto;
}

.metro-tab-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 5px;
  cursor: default;
}

.metro-help-toggle {
  position: relative;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted-strong);
  cursor: help;
}

.metro-help-toggle svg {
  width: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The "?" covers the icon on hover and stays while the help is open. */
.metro-help-toggle::after {
  content: "?";
  position: absolute;
  inset: -1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan);
  color: #0c111b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transition: opacity 100ms ease;
}

.metro-help-toggle:hover::after,
.metro-tab-row.is-help-open .metro-help-toggle::after {
  opacity: 1;
}

.metro-help {
  display: none;
  grid-column: 1 / -1;
  margin: 1px 0 2px;
  color: var(--muted-strong);
  font-size: 10px;
  line-height: 1.35;
}

.metro-tab-row.is-help-open .metro-help {
  display: block;
}

.metro-tab-row input[type="range"] {
  height: 14px;
  min-width: 0;
  cursor: ew-resize;
}

.metro-tab-row.has-readout {
  grid-template-columns: 14px 1fr 38px;
}

.metro-tab-row output {
  color: var(--muted-strong);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}


.position-readout span {
  display: grid;
  gap: 1px;
  text-align: left;
}

.position-readout b {
  color: var(--text);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.score-viewport {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 8px 16px 5px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 28px 28px;
}

.page-frame {
  position: relative;
  width: min(100%, calc((100vh - 190px) * 0.77295));
  max-height: 100%;
  aspect-ratio: 640 / 828;
  overflow: visible;
  border-radius: 3px;
  background: var(--page);
  box-shadow: 0 14px 54px rgba(0, 0, 0, 0.48);
  transform: translateZ(0);
}

.page-frame::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(8, 15, 24, 0.16);
  content: "";
  pointer-events: none;
}

#scoreImage {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: contain;
  opacity: 1;
  user-select: none;
  transition: opacity 120ms ease;
}

#scoreImage.is-loading {
  opacity: 0.35;
}

.measure-overlay {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 3px;
  background: rgba(86, 217, 232, 0.34);
  box-shadow: 0 0 0 1px rgba(9, 18, 28, 0.08), 0 2px 11px rgba(5, 19, 24, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: left 90ms linear, top 90ms linear, width 90ms linear, opacity 100ms ease;
}

.measure-overlay.is-visible {
  opacity: 1;
}

.page-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(238, 240, 233, 0.8);
  color: #293142;
  font-size: 0.85rem;
  font-weight: 650;
}

.empty-state {
  max-width: 420px;
  padding: 48px 28px;
  text-align: center;
}

.empty-state .empty-mark {
  display: grid;
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--cream);
  font-size: 2rem;
}

.empty-state h2 {
  margin-bottom: 8px;
  font-size: 1.45rem;
}

.empty-state p {
  margin-bottom: 22px;
  color: var(--muted);
}

.timeline-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.timeline-row span:last-child {
  text-align: right;
}

input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--cyan);
}

.timeline-row input[type="range"] {
  height: 18px;
  cursor: ew-resize;
  touch-action: none;
}

/* Transport bar. One wrapping row: transport buttons, tempo, start measure,
   then the status cluster (measure/page readout, metronome light, master
   volume) pushed to the right. Below 1120px it folds into two rows: buttons
   with the readout and metronome on top, tempo, start measure and volume
   below. Nothing leaves the bar at any width. */
.transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-height: 70px;
  padding: 9px 14px 11px;
  border-top: 1px solid var(--line);
  background: rgba(8, 13, 22, 0.82);
  backdrop-filter: blur(16px);
}

.transport-buttons {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.transport .number-control {
  flex: 0 0 auto;
}

.transport .position-readout {
  margin-left: auto;
}

.transport .volume-control {
  flex: 0 1 200px;
  min-width: 128px;
}

.transport-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
}

.transport-button:hover {
  border-color: var(--cream);
  background: rgba(247, 230, 173, 0.08);
}

.play-button {
  background: var(--cream);
  color: #101622;
}

.play-button:hover {
  background: #fff0bc;
}

.play-button .pause-icon,
.is-playing .play-button .play-icon {
  display: none;
}

.is-playing .play-button .pause-icon {
  display: block;
}

.number-control,
.volume-control {
  display: grid;
  align-items: center;
  gap: 5px;
}

.number-control {
  grid-template-rows: auto 36px;
}

.control-label-row {
  display: flex;
  min-height: 18px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.control-label,
.color-field > span,
.range-field > span,
.select-field > span {
  color: var(--muted-strong);
  font-size: 0.71rem;
  font-weight: 650;
  letter-spacing: 0.025em;
}

.number-stepper {
  display: grid;
  grid-template-columns: 27px minmax(50px, 1fr) 27px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
}

.number-control:not(.start-measure-control) .number-stepper {
  width: 118px;
}

.start-measure-control .number-stepper {
  grid-template-columns: 27px minmax(50px, 1fr) 27px auto;
  width: 196px;
}

.number-stepper .use-current-button {
  border: 0;
  border-left: 1px solid var(--line);
  padding: 0 9px;
  background: transparent;
  color: var(--cream);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
}

.number-stepper .use-current-button:hover {
  background: var(--surface-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.number-stepper button {
  background: transparent;
  color: var(--muted-strong);
  font-size: 1.05rem;
}

.number-stepper button:hover {
  background: var(--surface-3);
  color: var(--text);
}

.number-stepper input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding: 5px 3px;
  background: transparent;
  color: var(--cream);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.position-readout {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.045em;
  line-height: 1.05;
  text-transform: uppercase;
}

.number-stepper input::-webkit-inner-spin-button,
.number-stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.control-unit {
  justify-self: end;
  margin-top: -23px;
  transform: translateX(1px);
  color: var(--muted);
  font-size: 0.64rem;
  pointer-events: none;
}

.control-unit-inline {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.055em;
}

.volume-line {
  display: grid;
  grid-template-columns: 20px minmax(80px, 1fr);
  align-items: center;
  gap: 8px;
}

.volume-line svg {
  color: var(--cream);
}

.control-panel {
  height: calc(100vh - 94px);
  min-height: 680px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 23, 36, 0.94);
  box-shadow: var(--shadow);
  scrollbar-color: #33425a transparent;
}

.side-section {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

/* The Settings accordion: five sections nested inside one, drawn a step
   in and a shade darker so the level reads at a glance. */
.settings-group {
  display: grid;
  margin: 0 -16px -16px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.14);
}

.settings-group > .side-section {
  padding: 13px 16px 13px 26px;
}

.settings-group > .side-section:last-child {
  border-bottom: 0;
}

.settings-group > .side-section .section-heading h2 {
  font-size: 0.92em;
}

.side-section:last-child {
  border-bottom: 0;
}

/* Every side section collapses from its heading. The chevron is the
   control; the heading itself is also clickable except on its own
   switches and pills. */
.side-section[data-section] .section-heading {
  cursor: pointer;
  user-select: none;
}

.section-toggle {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
}

.section-toggle svg {
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.section-toggle:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.side-section.is-collapsed > :not(.section-heading) {
  display: none;
}

.side-section.is-collapsed .section-heading {
  margin-bottom: 0;
}

.side-section.is-collapsed .section-toggle svg {
  transform: rotate(-90deg);
}

/* Setlist strip in the header: only present while a setlist is active. */
.setlist-strip {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 8px 5px 6px;
  background: rgba(19, 28, 43, 0.94);
}

.setlist-nav {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.setlist-nav svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.setlist-nav:hover:not(:disabled) {
  border-color: var(--cream);
  background: rgba(247, 230, 173, 0.08);
}

.setlist-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.setlist-nav.is-armed {
  border-color: #f0b34a;
  background: rgba(240, 179, 74, 0.22);
  color: #ffd98a;
  box-shadow: 0 0 0 3px rgba(240, 179, 74, 0.18);
}

.setlist-position {
  min-width: 46px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.setlist-upnext {
  min-width: 0;
  max-width: 260px;
  overflow: hidden;
  margin-left: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setlist-strip.is-armed .setlist-upnext {
  color: #ffd98a;
}

/* Setlist section. */
.setlist-panel {
  display: grid;
  gap: 10px;
}

.setlist-panel .helper-text {
  margin: 0;
}

.setlist-picker,
.setlist-add-select {
  min-height: 36px;
  border-radius: 8px;
  padding: 0 30px 0 10px;
  font-size: 0.8rem;
}

.setlist-manage,
.setlist-add-row,
.setlist-file-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.setlist-add-row .setlist-add-select {
  flex: 1 1 140px;
  min-width: 0;
}

.setlist-file-row .button {
  flex: 1 1 0;
  min-height: 34px;
  font-size: 0.74rem;
}

.setlist-small-button,
.setlist-icon-button {
  min-height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 9px;
  background: #182235;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.setlist-small-button:hover,
.setlist-icon-button:hover:not(:disabled) {
  background: #223049;
}

.setlist-small-button.is-danger,
.setlist-icon-button.is-danger {
  color: var(--danger);
}

.setlist-icon-button {
  width: 28px;
  padding: 0;
  font-size: 0.85rem;
}

.setlist-icon-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.setlist-entries {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setlist-entries .is-empty {
  color: var(--muted);
  font-size: 0.74rem;
}

.setlist-entry {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 6px 6px 8px;
  background: rgba(255, 255, 255, 0.02);
}

.setlist-entry.is-current {
  border-color: rgba(247, 230, 173, 0.55);
  background: rgba(247, 230, 173, 0.06);
}

.setlist-entry.is-missing {
  opacity: 0.6;
}

.setlist-entry-index {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.setlist-entry.is-current .setlist-entry-index {
  color: var(--cream);
}

.setlist-entry-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.setlist-entry-title {
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.setlist-entry-title:hover:not(:disabled) {
  color: var(--cream);
}

.setlist-entry-title:disabled {
  cursor: default;
}

.setlist-entry-missing {
  color: var(--danger);
  font-size: 0.66rem;
}

.setlist-entry-note {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 5px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 0.7rem;
}

.setlist-entry-note::placeholder {
  color: rgba(143, 155, 173, 0.55);
}

.setlist-entry-note:hover,
.setlist-entry-note:focus {
  border-color: var(--line-strong);
  background: var(--surface-2);
  outline: none;
}

.setlist-entry-actions {
  display: flex;
  gap: 3px;
}

/* MIDI control section. */
.midi-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.midi-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4d5668;
}

.midi-status-pill.is-live {
  color: #b7dfc9;
}

.midi-status-pill.is-live i {
  background: #6fd39d;
  box-shadow: 0 0 0 4px rgba(111, 211, 157, 0.11);
}

.midi-panel {
  display: grid;
  gap: 12px;
}

.midi-panel .helper-text {
  margin: 0;
}

.midi-device-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted-strong);
  font-size: 0.76rem;
}

.midi-device-list li::before {
  content: "● ";
  color: #6fd39d;
  font-size: 0.6rem;
  vertical-align: 2px;
}

.midi-device-list li.is-empty {
  color: var(--muted);
}

.midi-device-list li.is-empty::before {
  content: none;
}

.midi-map-list {
  display: grid;
}

.midi-group-label {
  margin: 8px 0 2px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* One compact row per function: name and buttons on the first line, the
   learned message and (for faders and buttons) the small type dropdown on
   the second. Nothing overlaps because the dropdown lives in its own line. */
.midi-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label actions" "detail detail";
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px 4px;
  background: rgba(255, 255, 255, 0.02);
}

.midi-map-row.is-mapped {
  border-color: rgba(86, 217, 232, 0.28);
}

.midi-map-row.is-learning {
  border-color: var(--cyan);
  background: rgba(86, 217, 232, 0.08);
}

.midi-map-label {
  grid-area: label;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.midi-map-detail {
  grid-area: detail;
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.64rem;
  white-space: nowrap;
}

.midi-map-row:not(.is-mapped):not(.is-learning) .midi-map-detail {
  display: none;
}

.midi-map-row.is-mapped .midi-map-detail {
  color: var(--muted-strong);
}

.midi-map-row.is-learning .midi-map-detail {
  color: var(--cyan);
}

.midi-takeover {
  color: var(--cream);
  font-style: normal;
}

.midi-map-actions {
  grid-area: actions;
  display: flex;
  gap: 3px;
}

.midi-small-button {
  min-height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0 6px;
  background: #182235;
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.midi-small-button:hover {
  background: #223049;
}

.midi-small-button.is-danger {
  color: var(--danger);
}

.midi-feedback-select {
  width: auto;
  max-width: 60%;
  min-height: 30px;
  border-radius: 7px;
  padding: 0 26px 0 8px;
  font-size: 0.72rem;
}

.midi-mode-select,
.midi-test-type {
  width: auto;
  max-width: 100%;
  min-height: 20px;
  border-radius: 5px;
  padding: 0 20px 0 6px;
  font-size: 0.62rem;
  line-height: 1;
}

.midi-map-detail .midi-mode-select {
  flex: 0 1 auto;
  min-width: 0;
}

.midi-map-list {
  gap: 3px;
}

.midi-group-label {
  margin: 6px 0 1px;
}

.midi-file-row {
  display: flex;
  gap: 8px;
}

.midi-file-row .button {
  flex: 1 1 0;
  min-height: 34px;
  font-size: 0.74rem;
}

.midi-test summary {
  color: var(--muted-strong);
  font-size: 0.72rem;
  cursor: pointer;
}

.midi-test-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.midi-test-row label {
  color: var(--muted);
  font-size: 0.66rem;
}

.midi-test-row input[type="number"] {
  width: 50px;
  min-height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 4px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.7rem;
  text-align: center;
}

/* Map-controller mode: every mappable control on screen is outlined and
   clicking it starts learning; the one being learned pulses. */
body.is-midi-mapping [data-midi-target] {
  outline: 2px solid rgba(86, 217, 232, 0.75);
  outline-offset: 2px;
  cursor: crosshair;
}

body.is-midi-mapping [data-midi-target].is-midi-learning {
  outline-color: var(--cyan);
  animation: midi-learn-pulse 900ms ease-in-out infinite;
}

@keyframes midi-learn-pulse {
  50% { outline-color: rgba(86, 217, 232, 0.2); }
}

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

.section-heading h2 {
  margin: 0;
}

.section-heading.compact {
  align-items: flex-start;
}

.ready-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b7dfc9;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ready-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6fd39d;
  box-shadow: 0 0 0 4px rgba(111, 211, 157, 0.11);
}

.ready-pill.is-loading {
  color: var(--cream);
}

.ready-pill.is-loading i {
  background: var(--cream);
  animation: pulse 1s ease-in-out infinite;
}

.ready-pill.is-error {
  color: #ff9f8f;
}

.ready-pill.is-error i {
  background: var(--danger);
}

@keyframes pulse {
  50% { opacity: 0.38; }
}

select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0 35px 0 11px;
  background: var(--surface-2);
  color: var(--text);
}

.helper-text {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

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

.switch span {
  position: relative;
  width: 35px;
  height: 20px;
  border-radius: 999px;
  background: #354157;
  transition: background 140ms ease;
}

.switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  content: "";
  transition: transform 140ms ease;
}

.switch input:checked + span {
  background: var(--cyan);
}

.switch input:checked + span::after {
  transform: translateX(15px);
}

.switch em {
  min-width: 18px;
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 650;
}

.overlay-controls {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 15px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
  color: var(--muted-strong);
  font-size: 0.75rem;
  font-weight: 650;
}

.color-field,
.range-field,
.select-field {
  display: grid;
  gap: 8px;
}

.color-field input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 2px;
  background: var(--surface-2);
  cursor: pointer;
}

.range-field + .range-field,
.select-field {
  margin-top: 16px;
}

.range-field > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

output {
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.mixer-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mixer-live-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #76d99f;
  box-shadow: 0 0 0 4px rgba(118, 217, 159, 0.1);
}

.mixer-preview {
  display: grid;
  height: 82px;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 5px;
  margin: 4px 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 10px 8px;
  background: #0b1019;
}

.mixer-preview i {
  position: relative;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(to top, currentColor 0 7px, #253145 7px 100%);
  color: #377ec2;
}

.mixer-preview i::before {
  position: absolute;
  inset: 9px 48% 14px;
  border-radius: 4px;
  background: #556176;
  content: "";
}

.mixer-preview i::after {
  position: absolute;
  top: var(--preview-level, 42%);
  right: 16%;
  left: 16%;
  height: 7px;
  border-radius: 2px;
  background: #c8cdd3;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  content: "";
}

.mixer-preview .metro { --preview-level: 57%; }
.mixer-preview .instrument { --preview-level: 33%; }
.mixer-preview .reverb { --preview-level: 50%; color: #a3b812; }
.mixer-preview .mains { --preview-level: 39%; color: #7a3cc4; }

.mixer-open-button {
  width: 100%;
}

.mixer-dialog {
  width: min(1120px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 28px);
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 0;
  background: #303236;
  box-shadow: 0 38px 120px rgba(0, 0, 0, 0.75);
  color: #f4f4f4;
}

.mixer-dialog::backdrop {
  background: rgba(3, 7, 13, 0.78);
  backdrop-filter: blur(7px);
}

.mixer-window {
  display: grid;
  max-height: calc(100vh - 30px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.mixer-header,
.mixer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 17px;
  background: #25272b;
}

.mixer-header {
  border-bottom: 1px solid #17181b;
}

.mixer-header h2 {
  font-size: 1.08rem;
}

.mixer-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mixer-header .button,
.mixer-header .icon-button {
  border-color: rgba(255, 255, 255, 0.16);
  background: #3b3e43;
}

.mixer-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #74777d #292b2f;
}

.mixer-console {
  display: grid;
  min-width: 880px;
  grid-template-columns: repeat(4, minmax(168px, 1fr)) minmax(168px, 0.9fr);
  align-items: stretch;
  background: #4b4d51;
}

.channel-strip {
  --channel-color: #377ec2;
  display: grid;
  min-height: 690px;
  grid-template-rows: minmax(345px, 1fr) 286px 38px;
  border-right: 1px solid #25272a;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(90deg, rgba(255,255,255,0.025), transparent 24%, rgba(0,0,0,0.04));
}

.channel-strip:last-child {
  border-right: 0;
}

.channel-reverb { --channel-color: #a4b30c; }
.channel-mains { --channel-color: #7736be; }

.channel-top {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 13px 10px 10px;
}

.channel-top select {
  min-height: 31px;
  border-color: #282a2d;
  border-radius: 5px;
  padding-right: 24px;
  padding-left: 8px;
  background: #66686c;
  box-shadow: inset 0 1px rgba(255,255,255,0.1);
  color: white;
  font-size: 0.68rem;
}

.channel-top select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.knob-control {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #dedfe1;
  font-size: 0.66rem;
  font-weight: 650;
}

.knob-control output {
  min-width: 62px;
  border-radius: 3px;
  padding: 3px 5px;
  background: #303236;
  color: #f6f6f6;
  text-align: center;
}

.knob-shell {
  --knob-angle: -135deg;
  --knob-sweep: 0deg;
  position: relative;
  isolation: isolate;
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid #15171a;
  border-radius: 50%;
  background: conic-gradient(
    from 225deg,
    #65cbed 0deg var(--knob-sweep),
    #292c30 var(--knob-sweep) 270deg,
    #15171a 270deg 360deg
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.48);
}

.knob-shell::before {
  position: absolute;
  inset: 4px;
  z-index: 0;
  border: 1px solid #202226;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #85888c 0 7%, #63666a 35%, #44474c 68%, #292c30 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    inset 0 -3px 5px rgba(0, 0, 0, 0.32),
    0 1px 2px rgba(0, 0, 0, 0.55);
  content: "";
  pointer-events: none;
}

.knob-shell::after {
  position: absolute;
  top: 7px;
  left: calc(50% - 1px);
  z-index: 1;
  width: 2px;
  height: 12px;
  transform: rotate(var(--knob-angle));
  transform-origin: 1px 15px;
  border-radius: 2px;
  background: #f4fbfd;
  box-shadow: 0 0 3px rgba(101, 203, 237, 0.7);
  content: "";
  pointer-events: none;
}

.knob-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
}

.knob-input:focus-visible {
  outline: 0;
}

.knob-shell:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.send-control {
  padding-top: 1px;
}

.send-knob {
  width: 38px;
  height: 38px;
}

.send-knob::after {
  top: 6px;
  height: 10px;
  transform-origin: 1px 13px;
}

.channel-field,
.routing-badge {
  display: grid;
  gap: 5px;
  color: #d1d2d4;
  font-size: 0.64rem;
  font-weight: 650;
}

.channel-field > span,
.insert-bank > span,
.routing-badge > span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.channel-field output {
  color: #f8f8f8;
}

.insert-bank {
  display: grid;
  gap: 5px;
  color: #d1d2d4;
  font-size: 0.64rem;
  font-weight: 650;
}

.insert-slot {
  width: 100%;
  min-height: 31px;
  overflow: hidden;
  border: 1px solid #35373a;
  border-radius: 5px;
  padding: 0 7px;
  background: #55575b;
  color: #bdbfc2;
  font-size: 0.67rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

select.insert-slot.is-active {
  border-color: #0e5e9a;
  background: #2f81c8;
  color: white;
}

.routing-badge strong {
  display: block;
  min-height: 31px;
  border: 1px solid #27292c;
  border-radius: 5px;
  padding: 7px 8px;
  background: #65676b;
  color: white;
  font-size: 0.68rem;
  font-weight: 600;
}

.channel-fader-zone {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 9px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 10px 14px 12px;
  background: rgba(40,42,45,0.3);
}

.fader-readout {
  min-width: 66px;
  border: 1px solid #27292c;
  border-radius: 3px;
  padding: 4px 7px;
  background: #303236;
  color: #f4f4f4;
  font-size: 0.76rem;
  text-align: right;
}

.fader-meter-pair {
  --meter-height: 190px;
  display: grid;
  width: 55px;
  height: var(--meter-height);
  grid-template-columns: 34px 9px;
  align-items: stretch;
  justify-content: start;
  gap: 12px;
}

.channel-fader {
  box-sizing: border-box;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 190px;
  margin: 0;
  direction: rtl;
  writing-mode: vertical-lr;
  accent-color: #cdd0d4;
  cursor: ns-resize;
}

/* Unity mark: 0 dB sits at 70% of the fader travel, level with the meter's
   0 VU line. The thumb travels inside the track by half its own height, so
   the mark is placed on the thumb's centre line, not on the raw 70%. */
.fader-meter-pair {
  --fader-thumb: 16px;
  position: relative;
}

.fader-meter-pair::before {
  content: "";
  position: absolute;
  top: calc(var(--fader-thumb) / 2 + (100% - var(--fader-thumb)) * 0.3);
  left: 0;
  width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.level-meter {
  --level: 0%;
  position: relative;
  width: 9px;
  min-width: 9px;
  max-width: 9px;
  /* The meter spans the fader thumb's travel, not the whole track, so its
     0 VU line at 70% is level with the fader's unity mark at 70%. */
  height: calc(100% - var(--fader-thumb, 16px));
  margin: calc(var(--fader-thumb, 16px) / 2) 0;
  overflow: hidden;
  border: 1px solid #303235;
  border-radius: 2px;
  background: #202225;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
}

/* VU scale: 0 VU (-18 dBFS) sits at 70% of the bar. Green below it, yellow
   above it. The bar's gradient is fixed to the bar's own height, so the
   colour boundary never moves with the level. */
.level-meter i {
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: var(--level);
  max-height: calc(100% - 2px);
  background: linear-gradient(to top, #45c76f 0 70%, #e5cf3a 70% 100%);
  background-size: 100% calc(var(--meter-height, 190px) - 2px);
  background-position: bottom;
  transition: height 40ms linear;
}

/* 0 VU tick */
.level-meter::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  border-top: 1px solid rgba(255,255,255,.45);
  pointer-events: none;
  z-index: 1;
}

/* Overload cap: lit red when the sample peak reaches full scale, held 1.2 s. */
.level-meter::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  height: 5px;
  border-radius: 1px;
  background: #4a2323;
  z-index: 2;
}

.level-meter.is-clip::after {
  background: #ff4b3e;
  box-shadow: 0 0 6px rgba(255,75,62,.8);
}

/* The mains meter is two bars side by side. The shared meter rule pins the
   width to 9px, which left both bars with no room and the meter blank. */
.level-meter.stereo {
  --left-level: var(--level);
  --right-level: var(--level);
  width: 17px;
  min-width: 17px;
  max-width: 17px;
}

.channel-mains .fader-meter-pair,
.fader-meter-pair:has(.level-meter.stereo) {
  width: 63px;
  grid-template-columns: 34px 17px;
}

.level-meter.stereo i:first-child {
  right: 9px;
  height: var(--left-level);
}

.level-meter.stereo i:last-child {
  left: 9px;
  height: var(--right-level);
}

.channel-buttons {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.channel-buttons button {
  min-height: 31px;
  border: 1px solid #292b2e;
  border-radius: 5px;
  background: #696b6f;
  box-shadow: inset 0 1px rgba(255,255,255,0.12);
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.channel-buttons [data-action="mute"][aria-pressed="true"] {
  border-color: #aa321f;
  background: #db5a42;
}

.channel-buttons [data-action="solo"][aria-pressed="true"] {
  border-color: #9a7300;
  background: #e5b72e;
  color: #1d1b14;
}

.channel-strip > h3 {
  display: grid;
  place-items: center;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  background: var(--channel-color);
  color: white;
  font-size: 0.78rem;
  font-weight: 650;
}

.mixer-footer {
  border-top: 1px solid #18191b;
  color: #b4b6ba;
  font-size: 0.68rem;
}

.mixer-footer p {
  margin: 0;
}

.mixer-footer span {
  flex: 0 0 auto;
  color: #dadddf;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shortcut-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.shortcut-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shortcut-grid dt,
.shortcut-grid dd {
  margin: 0;
}

.shortcut-grid dd {
  color: var(--muted);
  font-size: 0.74rem;
}

kbd {
  display: inline-grid;
  min-width: 26px;
  min-height: 24px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-bottom-color: rgba(255, 255, 255, 0.28);
  border-radius: 5px;
  padding: 0 6px;
  background: var(--surface-2);
  color: var(--muted-strong);
  font: 650 0.66rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.toast {
  position: fixed;
  z-index: 50;
  right: 26px;
  bottom: 26px;
  max-width: min(420px, calc(100vw - 40px));
  transform: translateY(16px);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 11px 14px;
  background: #1e2a3d;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
  color: var(--text);
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1120px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) 292px;
  }

  .transport {
    gap: 10px 12px;
  }

  /* Two rows: the break sits after the metronome light. */
  .transport::after {
    content: "";
    order: 4;
    flex-basis: 100%;
    height: 0;
  }

  .transport-buttons { order: 1; }
  .transport .position-readout { order: 2; }
  .transport .visual-metronome { order: 3; }
  .transport .number-control { order: 5; }
  .transport .volume-control {
    order: 6;
    flex: 1 1 128px;
    max-width: 260px;
    margin-left: auto;
  }

}

@media (max-width: 820px) {
  .app-shell {
    padding: 0 12px 12px;
  }

  .topbar {
    min-height: 64px;
  }


  .brand {
    --brand-height: 30px;
  }

  .now-playing {
    max-width: 36vw;
  }

  .setlist-upnext {
    display: none;
  }

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

  .score-stage {
    height: auto;
    min-height: calc(100vh - 78px);
  }

  .score-viewport {
    min-height: 58vh;
    padding-right: 12px;
    padding-left: 12px;
  }

  .page-frame {
    width: min(100%, calc(64vh * 0.77295));
  }

  .control-panel {
    height: auto;
    min-height: 0;
  }

  .shortcuts-section {
    display: none;
  }
}

@media (max-width: 620px) {
  .mixer-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
  }

  .mixer-window {
    max-height: calc(100vh - 14px);
  }

  .mixer-header {
    padding: 11px;
  }

  .mixer-header .button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.7rem;
  }

  .mixer-footer {
    display: none;
  }

  .channel-strip {
    min-height: 650px;
  }

  .import-button {
    width: 40px;
    padding: 0;
    font-size: 0;
  }

  .topbar-primary {
    gap: 10px;
  }

  .brand {
    --brand-height: 26px;
  }

  .now-playing {
    max-width: 40vw;
    padding: 6px 9px;
  }

  .now-playing strong {
    font-size: 0.78rem;
  }

  .score-viewport {
    min-height: 64vh;
  }

  .timeline-row {
    padding-right: 14px;
    padding-left: 14px;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 8px;
    padding-bottom: 8px;
  }

  /* Brand, Now playing, and the action buttons share the first row; Now
     playing gives way. The setlist strip takes the second row. */
  .topbar-primary {
    flex: 1 1 0;
    min-width: 0;
    gap: 10px;
  }

  .topbar-primary .now-playing {
    flex: 1 1 0;
    max-width: none;
  }

  .setlist-strip {
    order: 3;
    flex: 1 1 100%;
  }

  .setlist-upnext {
    display: block;
    flex: 1 1 0;
    max-width: none;
  }

  .transport {
    gap: 12px;
    padding: 13px 14px 15px;
  }

  .transport-buttons {
    flex: 1 1 100%;
    justify-content: center;
  }

  .transport .position-readout {
    margin-left: 0;
  }

  .transport .volume-control {
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
  }

  .transport-button {
    width: 44px;
    height: 44px;
  }
}

/* Web-native audio effects. The restrained graphite treatment deliberately
   follows desktop studio conventions without reproducing any vendor UI. */
.plugin-slot {
  display: grid;
  min-height: 39px;
  grid-template-columns: 7px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  border-color: #272b30;
  padding: 5px 8px;
  background: linear-gradient(#565a5f, #484c51);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.3);
  cursor: pointer;
}

.plugin-slot:hover {
  border-color: #88919b;
  background: linear-gradient(#60656a, #4e5358);
}

.plugin-slot:focus-visible {
  outline: 2px solid #80c6ed;
  outline-offset: 1px;
}

.plugin-slot i {
  position: relative;
  cursor: pointer;
  width: 9px;
  height: 9px;
  grid-row: 1 / 3;
  border: 1px solid #6c737b;
  border-radius: 50%;
  background: #262a2e;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7);
}

/* The light is the bypass switch; give it a hit area well beyond its 9 px. */
.plugin-slot i::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

.plugin-slot i:hover {
  transform: scale(1.25);
}

.plugin-slot.is-active i {
  border-color: #89d6c1;
  background: #5bd1aa;
  box-shadow: 0 0 8px rgba(91,209,170,.55);
}

.plugin-slot > span,
.plugin-slot > em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plugin-slot > span {
  color: #f2f4f5;
  font-size: .7rem;
  font-style: normal;
  font-weight: 650;
}

.plugin-slot > em {
  color: #c6cbd0;
  font-size: .6rem;
  font-style: normal;
  font-weight: 500;
}

.plugin-slot.is-bypassed {
  filter: saturate(.15);
  opacity: .72;
}

.plugin-dialog {
  width: min(1180px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 28px);
  margin: auto;
  overflow: hidden;
  border: 1px solid #68717b;
  border-radius: 10px;
  padding: 0;
  background: #25292e;
  box-shadow: 0 42px 140px rgba(0,0,0,.84), inset 0 1px rgba(255,255,255,.08);
  color: #edf0f2;
}

.plugin-dialog::backdrop,
.preset-name-dialog::backdrop {
  background: rgba(3,6,10,.72);
  backdrop-filter: blur(5px);
}

.plugin-window {
  display: grid;
  max-height: calc(100vh - 30px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.plugin-header {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid #11151a;
  padding: 11px 14px 9px;
  background: linear-gradient(#3f444a, #34393e);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

/* Row one: power, title, the preset and its library. */
.plugin-header-main {
  display: grid;
  grid-template-columns: auto auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
}

/* Row two: two labelled groups, "This piece" and "All pieces", so the
   difference between piece settings and the default explains itself. */
.plugin-apply-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
}

.plugin-apply-group {
  gap: 5px;
}

.plugin-apply-label {
  margin-right: 4px;
  color: #aeb6bd;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plugin-heading {
  min-width: 150px;
}

.plugin-heading .eyebrow {
  margin-bottom: 2px;
  color: #aeb6bd;
  font-size: .62rem;
  letter-spacing: .09em;
}

.plugin-heading h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 670;
}

.plugin-power {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid #1d2227;
  border-radius: 6px;
  background: linear-gradient(#555b61, #3a3f44);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5);
  cursor: pointer;
}

.plugin-power span {
  position: relative;
  width: 15px;
  height: 15px;
  border: 2px solid #8a929a;
  border-top-color: transparent;
  border-radius: 50%;
}

.plugin-power span::before {
  position: absolute;
  top: -4px;
  left: 5px;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: #8a929a;
  content: "";
}

.plugin-power.is-on span {
  border-color: #61dab4;
  border-top-color: transparent;
  filter: drop-shadow(0 0 4px rgba(97,218,180,.45));
}

.plugin-power.is-on span::before { background: #61dab4; }

.plugin-preset-bar {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(160px, 340px) auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.plugin-preset-bar label {
  color: #bcc3c9;
  font-size: .72rem;
}

/* Every select keeps a solid background-color under any gradient: Chrome
   builds the native dropdown list from the select's background-color and
   falls back to white when it is transparent, which left the plugin
   dropdowns showing white text on white. The option rows are coloured
   explicitly for the same reason. */
select {
  background-color: var(--surface-2);
}

select option {
  background-color: #262b31;
  color: #f4f5f6;
}

.plugin-preset-bar select,
.plugin-header-actions button,
.reverb-routing select,
.parameter-rack select,
.ir-load-button {
  min-height: 31px;
  border: 1px solid #20252a;
  border-radius: 5px;
  background: #50565c linear-gradient(#5a6066, #464b50);
  box-shadow: inset 0 1px rgba(255,255,255,.09);
  color: #f4f5f6;
  font: inherit;
  font-size: .72rem;
}

.plugin-preset-bar select {
  width: 100%;
  padding: 0 30px 0 9px;
}

.plugin-modified {
  border: 1px solid #7d6841;
  border-radius: 999px;
  padding: 3px 7px;
  background: #4c4130;
  color: #f0cf8d;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.plugin-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.plugin-header-actions button {
  min-width: 0;
  padding: 0 8px;
  cursor: pointer;
}

.plugin-header-actions button:hover:not(:disabled),
.ir-load-button:hover {
  border-color: #88929c;
  background: linear-gradient(#666c72, #50565b);
}

.plugin-header-actions button:disabled {
  cursor: default;
  opacity: .38;
}

.plugin-header-actions .icon-button {
  width: 33px;
  min-width: 33px;
  height: 33px;
  margin-left: 4px;
}

.plugin-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: #25292e;
  scrollbar-color: #697079 #202429;
}

.plugin-panel {
  min-height: 580px;
  padding: 18px;
}

.plugin-panel[hidden] { display: none; }

.plugin-display {
  position: relative;
  border: 1px solid #11161b;
  border-radius: 7px;
  background: #10151c;
  box-shadow: inset 0 0 24px rgba(0,0,0,.4), 0 1px rgba(255,255,255,.05);
}

.plugin-display canvas {
  display: block;
  width: 100%;
  height: 340px;
  border-radius: inherit;
  touch-action: none;
}

.eq-display canvas { cursor: crosshair; }
.feedback-display canvas { height: 340px; }
.compressor-display canvas { height: 300px; }
.reverb-display canvas { height: 280px; }
.reverb-display canvas.is-disabled { opacity: .42; }

.eq-band-tabs {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  gap: 4px;
}

.eq-band-tabs button {
  width: 29px;
  height: 27px;
  border: 1px solid #3b454f;
  border-radius: 50%;
  background: rgba(33,42,51,.86);
  color: #c8d0d7;
  cursor: pointer;
  font-size: .7rem;
  font-weight: 750;
}

.eq-band-tabs button.is-selected {
  border-color: #f2d178;
  background: #d8aa42;
  box-shadow: 0 0 10px rgba(216,170,66,.32);
  color: #17130b;
}

.eq-band-tabs button:focus-visible,
.feedback-filter-tabs button:focus-visible,
.toggle-parameter:focus-within em {
  outline: 2px solid #86d4f2;
  outline-offset: 2px;
}

.parameter-rack {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #161a1f;
  border-radius: 7px;
  background: #171b20;
}

.parameter-rack > label,
.reverb-routing > label,
.reverb-routing > .ir-field {
  display: grid;
  min-width: 0;
  gap: 9px;
  align-content: start;
  padding: 13px 14px;
  background: linear-gradient(145deg, #393e43, #30353a);
  color: #d5d9dd;
  font-size: .72rem;
  font-weight: 620;
}

.parameter-rack input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 5px 0 1px;
  accent-color: #67bddd;
  cursor: ew-resize;
}

.parameter-rack input[type="range"]:disabled { opacity: .3; }

.parameter-rack output,
.reverb-routing em {
  min-height: 28px;
  border: 1px solid #24292e;
  border-radius: 4px;
  padding: 6px 8px;
  background: #23282d;
  color: #f0f2f4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .72rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.toggle-parameter {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.toggle-parameter input {
  position: absolute;
  opacity: 0;
}

.toggle-parameter em {
  display: grid;
  min-width: 46px;
  min-height: 28px;
  place-items: center;
  border: 1px solid #1f2926;
  border-radius: 4px;
  background: #24443a;
  color: #74dfbc;
  cursor: pointer;
  font-size: .68rem;
  font-style: normal;
}

.toggle-parameter input:not(:checked) + em {
  border-color: #24292e;
  background: #282d32;
  color: #929aa1;
}

.toggle-parameter input:disabled + em {
  cursor: not-allowed;
  opacity: .42;
}

.compressor-rack,
.reverb-rack,
.feedback-rack { grid-template-columns: repeat(4, minmax(150px, 1fr)); }

.feedback-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, .8fr)) repeat(5, auto) minmax(170px, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.feedback-toolbar label {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr);
  align-items: center;
  gap: 8px;
  color: #bec6cd;
  font-size: .68rem;
  font-weight: 650;
}

.feedback-toolbar select,
.feedback-toolbar button,
.feedback-delete {
  min-height: 34px;
  border: 1px solid #20252a;
  border-radius: 5px;
  padding: 0 10px;
  background: #4e555b linear-gradient(#596067, #444a50);
  box-shadow: inset 0 1px rgba(255,255,255,.09);
  color: #f3f5f6;
  cursor: pointer;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 650;
}

.feedback-toolbar output {
  display: grid;
  min-height: 34px;
  align-items: center;
  justify-content: end;
  border: 1px solid #203d38;
  border-radius: 5px;
  padding: 0 10px;
  background: #213833;
  color: #79ddbd;
  font: 650 .68rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.plugin-origin {
  border: 1px solid #3f5f57;
  border-radius: 999px;
  padding: 3px 7px;
  background: #24403a;
  color: #9fe3cd;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plugin-origin.is-piece {
  border-color: #7d6841;
  background: #4c4130;
  color: #f0cf8d;
}

.feedback-toolbar button.is-calibrating {
  border-color: #f2cf68;
  background: linear-gradient(#7a6224, #5f4b18);
  box-shadow: 0 0 0 2px rgba(242, 207, 104, .22), inset 0 1px rgba(255,255,255,.12);
}

.feedback-toolbar button.is-held {
  border-color: #79ddbd;
  background: linear-gradient(#397864, #2e5f50);
  box-shadow: 0 0 0 2px rgba(121, 221, 189, .18), inset 0 1px rgba(255,255,255,.12);
}

.feedback-filter-tabs {
  display: grid;
  grid-template-columns: repeat(20, minmax(26px, 1fr));
  gap: 4px;
  margin-top: 10px;
}

.feedback-filter-tabs button {
  min-width: 0;
  height: 28px;
  border: 1px solid #313941;
  border-radius: 4px;
  background: #252b31;
  color: #7d8790;
  cursor: pointer;
  font: 700 .61rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.feedback-filter-tabs button.is-engaged {
  border-color: #237c70;
  background: #28564f;
  color: #8be5cc;
}

.feedback-filter-tabs button.is-selected {
  border-color: #efcf69;
  box-shadow: inset 0 0 0 1px #efcf69, 0 0 8px rgba(239,207,105,.2);
  color: #fff1b9;
}

.feedback-filter-tabs button:disabled { cursor: default; opacity: .45; }

.feedback-meter-bank {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 190px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 9px;
  background: rgba(20,25,31,.84);
}

.feedback-meter-bank > div { display: grid; gap: 5px; color: #aeb7bf; font-size: .61rem; font-weight: 700; text-transform: uppercase; }
.feedback-meter-bank meter { width: 100%; height: 7px; accent-color: #75d5ae; cursor: pointer; }
.feedback-meter-bank output { color: #edf0f2; font: .63rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-align: right; }
.feedback-delete { align-self: stretch; border-color: #613932; background: linear-gradient(#694a44, #513934); }

.compressor-meter-bank {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  width: min(340px, 46%);
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 9px;
  background: rgba(20,25,31,.82);
  backdrop-filter: blur(6px);
}

.compressor-meter-bank > div {
  display: grid;
  gap: 5px;
  color: #aeb7bf;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.compressor-meter-bank meter {
  width: 100%;
  height: 7px;
  accent-color: #75d5ae;
}

.compressor-meter-bank output {
  color: #edf0f2;
  font: .63rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-align: right;
}

.reverb-routing {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.45fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px;
  background: #171c22;
}

.reverb-routing > label,
.reverb-routing > .ir-field {
  grid-template-columns: auto minmax(100px, 1fr);
  align-items: center;
  padding: 9px 10px;
  background: rgba(50,57,64,.93);
}

.reverb-routing select,
.ir-load-button {
  width: 100%;
  padding: 0 8px;
}

.reverb-routing > .ir-field {
  grid-template-columns: auto minmax(110px, .8fr) minmax(90px, 1fr);
}

.reverb-routing em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.freeze-control em {
  border-color: #645425;
  background: #4e411d;
  color: #f1cf65;
}

.plugin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid #15191d;
  padding: 9px 14px;
  background: #30353a;
  color: #aeb6bd;
  font-size: .68rem;
}

.plugin-footer p { margin: 0; }
.plugin-footer span { flex: 0 0 auto; color: #d0d5d9; font-weight: 650; }

.preset-name-dialog {
  width: min(410px, calc(100vw - 30px));
  border: 1px solid #69727b;
  border-radius: 9px;
  padding: 0;
  background: #34393e;
  box-shadow: 0 30px 90px rgba(0,0,0,.78);
  color: #f2f4f5;
}

.preset-name-dialog form { display: grid; gap: 18px; padding: 20px; }
.preset-name-dialog h2 { margin: 0; font-size: 1rem; }
.preset-name-dialog label { display: grid; gap: 7px; color: #cbd0d4; font-size: .76rem; }
.preset-name-dialog input {
  min-height: 40px;
  border: 1px solid #20252a;
  border-radius: 5px;
  padding: 0 10px;
  background: #20252a;
  color: white;
  font: inherit;
}
.preset-name-dialog form > div { display: flex; justify-content: flex-end; gap: 8px; }
.preset-name-dialog button { min-height: 36px; border: 1px solid #20252a; border-radius: 5px; padding: 0 14px; background: #50565b; color: white; cursor: pointer; }

@media (max-width: 980px) {
  .plugin-header-main {
    grid-template-columns: auto minmax(140px, auto) 1fr;
  }
  .plugin-header-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .parameter-rack,
  .compressor-rack,
  .reverb-rack,
  .feedback-rack { grid-template-columns: repeat(3, minmax(145px, 1fr)); }
  .feedback-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feedback-toolbar output { justify-content: start; }
  .feedback-filter-tabs { grid-template-columns: repeat(10, 1fr); }
  .reverb-routing { grid-template-columns: 1fr 1fr; }
  .reverb-routing > .ir-field { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  .plugin-dialog { width: calc(100vw - 10px); max-height: calc(100vh - 10px); }
  .plugin-window { max-height: calc(100vh - 12px); }
  .plugin-header { gap: 6px; padding: 9px; }
  .plugin-header-main { grid-template-columns: auto 1fr; gap: 9px; }
  .plugin-apply-row { justify-content: flex-start; }
  .plugin-preset-bar { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; }
  .plugin-header-actions { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .plugin-header-actions button { flex: 0 0 auto; }
  .plugin-panel { min-height: 0; padding: 9px; }
  .plugin-display canvas,
  .compressor-display canvas { height: 250px; }
  .reverb-display canvas { height: 310px; }
  .parameter-rack,
  .compressor-rack,
  .reverb-rack,
  .feedback-rack { grid-template-columns: repeat(2, minmax(135px, 1fr)); }
  .feedback-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedback-toolbar output { grid-column: 1 / -1; }
  .feedback-filter-tabs { grid-template-columns: repeat(5, 1fr); }
  .compressor-meter-bank { top: 9px; right: 9px; width: calc(100% - 18px); }
  .reverb-routing { grid-template-columns: 1fr; }
  .reverb-routing > .ir-field { grid-column: auto; grid-template-columns: 1fr; }
  .plugin-footer span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---- Remote section on the computer ---- */
.remote-panel {
  display: grid;
  gap: 10px;
}

.remote-panel .helper-text {
  margin: 0;
}

/* The address as a QR code: scanning opens the Remote with the code filled in. */
.remote-qr {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 10px;
}

.remote-qr svg {
  width: 168px;
  height: 168px;
  border-radius: 8px;
}

.remote-qr span {
  color: var(--muted-strong);
  font-size: 0.72rem;
}

.remote-code-display {
  display: grid;
  gap: 4px;
  justify-items: center;
  border: 1px solid rgba(86, 217, 232, 0.35);
  border-radius: 12px;
  padding: 12px 10px 10px;
  background: rgba(86, 217, 232, 0.06);
}

.remote-code-display b {
  color: var(--text);
  font-size: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.22em;
  line-height: 1;
}

.remote-code-display span {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.remote-code-display code {
  color: var(--muted-strong);
  font-size: 0.72rem;
  word-break: break-all;
}

.remote-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.remote-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.78rem;
}

.remote-list li span em {
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
}

.remote-list button {
  min-height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 8px;
  background: #182235;
  color: var(--danger);
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
}

/* ---- Tablet chooser ---- */
.tablet-chooser {
  border: 0;
  padding: 0;
  background: transparent;
}

.tablet-chooser::backdrop {
  background: rgba(8, 12, 20, 0.88);
  backdrop-filter: blur(8px);
}

.tablet-chooser-card {
  display: grid;
  width: min(92vw, 460px);
  gap: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 26px 24px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.tablet-chooser-card h2 {
  margin: 4px 0 2px;
  font-size: 1.2rem;
}

.tablet-choice {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 18px 18px;
  background: #182235;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.tablet-choice strong {
  font-size: 1.05rem;
}

.tablet-choice span {
  color: var(--muted-strong);
  font-size: 0.82rem;
}

.tablet-choice:hover,
.tablet-choice:focus-visible {
  border-color: var(--cyan);
  background: #223049;
}

/* ---- Remote page ---- */
.remote-body {
  min-height: 100vh;
  overflow: hidden;
  background: #0c111b;
  -webkit-user-select: none;
  user-select: none;
}

.remote-shell {
  position: fixed;
  inset: 0;
}

.remote-pair {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 24px;
}

.remote-pair-card {
  display: grid;
  width: min(92vw, 520px);
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.remote-brand {
  gap: 12px;
}

.remote-word {
  color: var(--cyan);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.remote-pair-card h1 {
  margin: 8px 0 0;
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  white-space: normal;
}

.remote-hint {
  max-width: 420px;
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.95rem;
}

.remote-code {
  display: flex;
  gap: 12px;
}

.remote-digit {
  width: 64px;
  height: 80px;
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 2.4rem;
  font-weight: 800;
  text-align: center;
}

.remote-digit:focus {
  border-color: var(--cyan);
  outline: none;
}

.remote-connect,
.remote-reconnect {
  min-width: 220px;
  min-height: 52px;
  font-size: 1rem;
}

.remote-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--cream);
  font-size: 0.9rem;
}

.remote-score {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0c111b;
}

.remote-page-frame {
  position: relative;
  width: min(100vw, calc(100vh * 0.77295));
  height: min(100vh, calc(100vw / 0.77295));
  background: var(--page);
}

.remote-page-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.remote-page-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #4a5160;
  font-size: 1.1rem;
}

/* The Remote's flash is the app's floating light (.metro-float), sized for
   fingers: no hover, a tap opens a tab with one big size control, drag moves
   it, a tap anywhere else closes the tab. Opacity comes from the computer. */
.remote-metro-float {
  --metro-size: 56px;
  --metro-opacity: 0.85;
}

.remote-metro-float:hover .metro-float-tab {
  opacity: 0;
  pointer-events: none;
}

.remote-metro-float.is-editing .metro-float-tab {
  opacity: 1;
  pointer-events: auto;
}

.remote-metro-tab {
  width: 300px;
  gap: 8px;
  padding: 12px;
  font-size: 14px;
}

.remote-metro-row {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 10px;
}

.remote-metro-step {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.remote-metro-step:active {
  background: rgba(255, 255, 255, 0.12);
}

.remote-metro-row input[type="range"] {
  height: 44px;
  min-width: 0;
  accent-color: var(--cyan);
}

.remote-metro-hint {
  margin: 0;
  color: var(--muted-strong);
  font-size: 12px;
  text-align: center;
}

.remote-lost {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 123, 104, 0.5);
  border-radius: 999px;
  padding: 8px 16px;
  background: rgba(60, 20, 16, 0.92);
  color: #ffb3a6;
  font-size: 0.9rem;
  font-weight: 650;
}

.remote-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 10px;
  padding: 14px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(8, 13, 22, 0.9);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}

.remote-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.remote-big {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.remote-big svg {
  width: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remote-play {
  width: 84px;
  height: 84px;
  background: var(--cream);
  color: #101622;
}

.remote-play .pause-icon,
.is-playing .remote-play .play-icon {
  display: none;
}

.is-playing .remote-play .pause-icon {
  display: block;
}

.remote-readout {
  display: flex;
  gap: 18px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.remote-readout span {
  display: grid;
  gap: 2px;
}

.remote-readout b {
  color: var(--text);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.remote-setlist {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px 10px;
}

.remote-nav {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.remote-nav svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remote-nav:disabled {
  opacity: 0.3;
}

.remote-setlist-position {
  min-width: 60px;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.remote-upnext {
  max-width: 260px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-gear {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
}

.remote-gear svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remote-settings {
  display: grid;
  gap: 8px;
  max-width: 480px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* ---- Backup section ---- */
.backup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.backup-row .button {
  flex: 1 1 0;
  min-height: 36px;
  font-size: 0.76rem;
}

/* ---- Panic calibrate in the header ---- */
.panic-calibrate {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 0 12px;
  background: #182235;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.015em;
  cursor: pointer;
}

.panic-calibrate:hover {
  background: #223049;
  border-color: rgba(255, 255, 255, 0.28);
}

.panic-calibrate i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5a4a2b;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.panic-calibrate.is-calibrating {
  border-color: rgba(240, 179, 74, 0.7);
  background: rgba(240, 179, 74, 0.16);
  color: #ffd98a;
}

.panic-calibrate.is-calibrating i {
  background: #f0b34a;
  box-shadow: 0 0 0 4px rgba(240, 179, 74, 0.18), 0 0 10px rgba(240, 179, 74, 0.6);
  animation: panic-pulse 900ms ease-in-out infinite;
}

@keyframes panic-pulse {
  50% { opacity: 0.45; }
}

@media (max-width: 620px) {
  .panic-calibrate span,
  .audio-toggle span {
    display: none;
  }
}

/* ---- Noise gate editor ---- */
.gate-display {
  display: grid;
  align-items: center;
  min-height: 92px;
}

.gate-lamp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
}

.gate-lamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #bdbfc2;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.gate-lamp i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4a2323;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.gate-lamp.is-open i {
  background: #45c76f;
  box-shadow: 0 0 0 4px rgba(69, 199, 111, 0.16), 0 0 12px rgba(69, 199, 111, 0.6);
}

.gate-lamp.is-bypassed i {
  background: #f0b34a;
}

.gate-meter {
  display: grid;
  min-width: 150px;
  gap: 2px;
  color: #bdbfc2;
  font-size: 0.68rem;
}

.gate-meter meter {
  width: 100%;
  height: 8px;
}

.gate-note {
  color: #f0cf8d;
  font-size: 0.7rem;
  font-style: normal;
}