/* ═══════════════════════════════════════════════════════════
   TIDAL WAVES — Monochrome CRT Phosphor Theme
   cyberpunk netrunner meets 80s synthwave
═══════════════════════════════════════════════════════════ */

/* Self-hosted fonts — zero external requests */
@font-face {
  font-family: 'VT323';
  src: url('fonts/VT323-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Share Tech Mono';
  src: url('fonts/ShareTechMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --bg:        #000000;
  --bg2:       #050505;
  --bg3:       #0a0a0a;
  --bright:    #ffffff;
  --mid:       #aaaaaa;
  --dim:       #444444;
  --off:       #1a1a1a;
  --font-ui:   'VT323', 'Courier New', monospace;
  --font-code: 'Share Tech Mono', 'Courier New', monospace;
  --glow-sm:   0 0 4px rgba(255,255,255,0.8), 0 0 10px rgba(255,255,255,0.3);
  --glow-md:   0 0 6px rgba(255,255,255,0.9), 0 0 16px rgba(255,255,255,0.4), 0 0 30px rgba(255,255,255,0.15);
  --glow-lg:   0 0 8px #fff, 0 0 20px rgba(255,255,255,0.5), 0 0 40px rgba(255,255,255,0.2);

  /* Signal accent — ONE live colour for active/playing states */
  --sig:       #00e5ff;
  --sig-dim:   rgba(0, 229, 255, 0.35);
  --glow-sig:  0 0 5px #00e5ff, 0 0 14px rgba(0,229,255,0.45);
  --glow-sig-lg: 0 0 8px #00e5ff, 0 0 22px rgba(0,229,255,0.5), 0 0 40px rgba(0,229,255,0.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  overflow: hidden;
}

/* ── CRT Bezel ─────────────────────────────────────────── */

.crt-bezel {
  width: 100vw;
  height: 100vh;
  background: #0d0d0d;
  padding: 12px;
  box-shadow:
    0 0 0 2px #1a1a1a,
    0 0 60px rgba(255,255,255,0.06),
    inset 0 0 20px rgba(0,0,0,0.8);
  display: flex;
  align-items: stretch;
}

.crt-screen {
  flex: 1;
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Phosphor inner glow — suggests screen depth */
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.7),
    inset 0 0 4px rgba(255,255,255,0.03);
  /* Subtle flicker */
  animation: crt-flicker 8s infinite;
}

@keyframes crt-flicker {
  0%, 100%  { opacity: 1; }
  94%        { opacity: 1; }
  94.5%      { opacity: 0.96; }
  95%        { opacity: 1; }
  97%        { opacity: 1; }
  97.3%      { opacity: 0.98; }
  97.6%      { opacity: 1; }
}

/* ── CRT Overlay Layers ────────────────────────────────── */

.crt-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 900;
  border-radius: 8px;
}

.crt-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent            0px,
    transparent            3px,
    rgba(0, 0, 0, 0.12)   3px,
    rgba(0, 0, 0, 0.12)   4px
  );
}

.crt-vignette {
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 55%,
    rgba(0,0,0,0.55) 80%,
    rgba(0,0,0,0.85) 100%
  );
}

/* ── Boot Animation ────────────────────────────────────── */

.crt-boot {
  position: absolute;
  inset: 0;
  z-index: 800;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 60px;
  gap: 6px;
  animation: boot-fade 0.3s ease 2.4s forwards;
}

@keyframes boot-fade {
  to { opacity: 0; pointer-events: none; visibility: hidden; }
}

.boot-line {
  font-family: var(--font-ui);
  font-size: 22px;
  color: var(--mid);
  opacity: 0;
  animation: boot-type 0.15s ease forwards;
}

.boot-line:nth-child(1) { animation-delay: 0.1s; }
.boot-line:nth-child(2) { animation-delay: 0.4s; }
.boot-line:nth-child(3) { animation-delay: 0.7s; }
.boot-line:nth-child(4) { animation-delay: 1.0s; }
.boot-line:nth-child(5) { animation-delay: 1.3s; }
.boot-line:nth-child(6) { animation-delay: 1.7s; }

@keyframes boot-type {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.boot-ok {
  color: var(--bright);
  text-shadow: var(--glow-md);
  font-size: 24px;
}

/* ── Header ────────────────────────────────────────────── */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  border-bottom: 1px solid var(--off);
  /* Subtle top-line accent — signals the live boundary */
  border-top: 2px solid rgba(0,229,255,0.12);
  background: var(--bg2);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.logo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.logo-bracket {
  color: var(--dim);
  font-size: 20px;
  font-family: var(--font-ui);
}

.logo-title {
  font-family: var(--font-ui);
  font-size: 26px;
  color: var(--bright);
  text-shadow: var(--glow-md);
  letter-spacing: 0.18em;
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Grouped sections within the header controls */
.ctrl-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Transport: BPM + EXEC/HALT/SHIP, right-bordered */
.ctrl-transport {
  padding-right: 12px;
  border-right: 1px solid var(--off);
}

/* Mode toggles: ARP / SCN / DRAW / STG */
.ctrl-modes {
  gap: 4px;
  padding-right: 10px;
  border-right: 1px solid var(--off);
}

/* PRE + overflow [ ··· ] */
.ctrl-secondary {
  gap: 6px;
}

.ctrl-divider {
  color: var(--off);
  font-size: 14px;
  padding: 0 2px;
  user-select: none;
}

/* ── Overflow dropdown ──────────────────────────────── */

.ctrl-overflow {
  position: relative;
}

.btn-menu {
  color: var(--dim);
  border: 1px solid var(--off);
  letter-spacing: 0.04em;
}
.btn-menu:hover {
  color: var(--mid);
  border-color: var(--dim);
}
.btn-menu.open {
  color: var(--bright);
  border-color: var(--mid);
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 800;
  background: var(--bg2);
  border: 1px solid var(--dim);
  border-radius: 2px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.9), 0 0 2px rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 4px 0;
}
.menu-dropdown.hidden { display: none; }

.menu-item {
  width: 100%;
  text-align: left;
  padding: 7px 18px;
  border: none;
  border-radius: 0;
  font-size: 17px;
  color: var(--mid);
  letter-spacing: 0.1em;
  transition: color 0.08s, background 0.08s;
  text-decoration: none;
  display: block;
}
.menu-item:hover {
  color: var(--bright);
  background: rgba(255,255,255,0.04);
  text-shadow: var(--glow-sm);
}
.menu-item.btn-net.active {
  color: var(--sig);
  text-shadow: var(--glow-sig);
}
.menu-item.btn-midi.active {
  color: var(--sig);
  text-shadow: var(--glow-sig);
}
.menu-item.hidden { display: none; }

.menu-sep {
  height: 1px;
  background: var(--off);
  margin: 4px 0;
}

.ctrl-label {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--dim);
  letter-spacing: 0.12em;
}

.bpm-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bpm-val {
  font-family: var(--font-ui);
  font-size: 22px;
  color: var(--mid);
  min-width: 36px;
  text-align: right;
  letter-spacing: 0.08em;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 2px;
  background: var(--off);
  border-radius: 1px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bright);
  box-shadow: var(--glow-sm);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bright);
  box-shadow: var(--glow-sm);
  cursor: pointer;
  border: none;
}

/* ── Buttons ────────────────────────────────────────────── */

.btn {
  font-family: var(--font-ui);
  font-size: 18px;
  letter-spacing: 0.1em;
  padding: 5px 14px;
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  transition: color 0.1s, border-color 0.1s, text-shadow 0.1s, box-shadow 0.1s;
}
.btn:disabled { opacity: 0.25; cursor: default; }

.btn-exec {
  color: var(--mid);
  border: 1px solid var(--dim);
}
.btn-exec:not(:disabled):hover {
  color: var(--bright);
  border-color: var(--bright);
  text-shadow: var(--glow-sm);
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.btn-halt {
  color: var(--dim);
  border: 1px solid var(--off);
}
.btn-halt:not(:disabled):hover {
  color: var(--bright);
  border-color: var(--bright);
  text-shadow: var(--glow-sm);
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.btn-help {
  color: var(--dim);
  border: 1px solid var(--off);
  text-decoration: none;
}
.btn-help:hover {
  color: var(--mid);
  border-color: var(--dim);
}

.btn-pre {
  color: var(--dim);
  border: 1px solid var(--off);
}
.btn-pre:hover {
  color: var(--mid);
  border-color: var(--dim);
}

.btn-add {
  color: var(--dim);
  border: 1px solid var(--off);
  font-size: 16px;
  padding: 3px 10px;
  margin-top: 8px;
}
.btn-add:hover {
  color: var(--mid);
  border-color: var(--dim);
}

/* ── Main Layout ────────────────────────────────────────── */

main {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

/* ── Editor Panel ───────────────────────────────────────── */

.editor-panel {
  width: var(--editor-split, 50%);
  flex-shrink: 0;
  border-right: 1px solid var(--off);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  background: var(--bg2);
}

.panel-title {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--dim);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
}

#pattern-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Pattern Row ────────────────────────────────────────── */

.pattern-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pattern-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pattern-row-label {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--dim);
  min-width: 28px;
  letter-spacing: 0.08em;
}

.pattern-row-active {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--off);
  border: 1px solid var(--dim);
  flex-shrink: 0;
  transition: background 0.1s, box-shadow 0.1s;
}
.pattern-row-active.on {
  background: var(--sig);
  border-color: var(--sig);
  box-shadow: var(--glow-sig);
}

.pattern-row-remove {
  color: var(--off);
  border: 1px solid var(--off);
  font-size: 14px;
  padding: 1px 7px;
  margin-left: auto;
  font-family: var(--font-ui);
  cursor: pointer;
  background: transparent;
  letter-spacing: 0.05em;
  transition: color 0.1s, border-color 0.1s;
}
.pattern-row-remove:hover {
  color: var(--mid);
  border-color: var(--dim);
}

.pattern-textarea {
  width: 100%;
  background: var(--bg3);
  color: var(--mid);
  border: 1px solid var(--off);
  border-radius: 2px;
  padding: 8px 12px;
  font-family: var(--font-code);
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  min-height: 44px;
  outline: none;
  caret-color: var(--bright);
  transition: color 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.pattern-textarea::placeholder { color: var(--dim); }
.pattern-textarea:focus {
  color: var(--bright);
  border-color: rgba(0,229,255,0.5);
  box-shadow: 0 0 0 1px rgba(0,229,255,0.12), inset 0 0 12px rgba(0,229,255,0.04);
}
.pattern-textarea.active {
  color: var(--bright);
  border-color: rgba(0,229,255,0.4);
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.pattern-textarea.error {
  border-color: var(--dim);
  color: var(--dim);
}

.editor-hint {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 0.06em;
  padding: 2px 0;
}

/* ── Visualizer Panel ───────────────────────────────────── */

.viz-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: 14px 16px;
  gap: 8px;
}

/* ── Resizable divider ──────────────────────────────────── */

.panel-divider {
  flex: 0 0 6px;
  cursor: col-resize;
  background: var(--off);
  position: relative;
  transition: background 0.1s;
}
.panel-divider::after {
  content: '';
  position: absolute;
  inset: 0 -3px;            /* widen the grab target */
}
.panel-divider:hover { background: var(--dim); }

/* ── Mixer panel ────────────────────────────────────────── */

.mixer-panel {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px;
  background: var(--bg2);
  border-left: 1px solid var(--off);
  overflow-y: auto;
}

.mixer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.mixer-target {
  font-family: var(--font-ui);
  font-size: 20px;
  color: var(--bright);
  text-shadow: var(--glow-sm);
}
.mixer-mode {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 0.1em;
  border: 1px solid var(--off);
  padding: 1px 6px;
}
.mixer-mode.event {
  color: var(--sig);
  border-color: var(--sig-dim);
  text-shadow: var(--glow-sig);
}

.mixer-row {
  display: grid;
  grid-template-columns: 48px 1fr 40px;
  align-items: center;
  gap: 8px;
}
.mixer-label {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--mid);
  letter-spacing: 0.06em;
}
.mixer-slider { width: 100%; }
.mixer-val {
  font-family: var(--font-code);
  font-size: 13px;
  color: var(--dim);
  text-align: right;
}
.mixer-alg {
  grid-column: 2 / 4;
  justify-self: start;
}
.mixer-hint {
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
  line-height: 1.3;
}

/* ── Layout toggle bar ──────────────────────────────────── */

.layout-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--off);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.layout-bar-label {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 0.12em;
}
.btn-layout {
  color: var(--dim);
  letter-spacing: 0.06em;
}
.btn-layout.active {
  color: var(--bright);
  text-shadow: var(--glow-sm);
}

/* ── Panel show/hide ────────────────────────────────────── */

body.hide-editor .editor-panel,
body.hide-viz    .viz-panel,
body.hide-mixer  .mixer-panel { display: none; }
/* Divider only makes sense when both editor and viz are visible */
body.hide-editor #editor-divider,
body.hide-viz    #editor-divider { display: none; }

#cycle-canvas {
  flex: 1;
  width: 100%;
  display: block;
  touch-action: none;
}

/* ── Status Bar ─────────────────────────────────────────── */

.statusbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 18px;
  border-top: 1px solid var(--off);
  background: var(--bg2);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--dim);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  min-height: 30px;
}

.status-bracket {
  color: var(--off);
  flex-shrink: 0;
}

#status-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#status-text.ok  { color: var(--sig); text-shadow: 0 0 8px rgba(0,229,255,0.5); }
#status-text.err { color: var(--dim); }

.status-cursor {
  color: var(--dim);
  animation: cursor-blink 1.1s step-end infinite;
  font-size: 14px;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Scrollbar ──────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--off); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* ═══════════════════════════════════════════════════════════
   PRESET OVERLAY
═══════════════════════════════════════════════════════════ */

.preset-overlay {
  position: absolute;
  inset: 0;
  z-index: 600;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  backdrop-filter: blur(2px);
}
.preset-overlay.hidden { display: none; }

.preset-panel {
  width: min(680px, 90%);
  max-height: 80vh;
  background: var(--bg2);
  border: 1px solid var(--dim);
  border-radius: 3px;
  box-shadow: 0 0 40px rgba(255,255,255,0.08), 0 0 2px rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--off);
  flex-shrink: 0;
}

.preset-title {
  font-family: var(--font-ui);
  font-size: 17px;
  color: var(--dim);
  letter-spacing: 0.08em;
}

.preset-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

.preset-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--off);
  transition: background 0.1s;
}
.preset-item:last-child { border-bottom: none; }
.preset-item:hover {
  background: rgba(255,255,255,0.04);
}
.preset-item:hover .preset-name {
  color: var(--bright);
  text-shadow: var(--glow-sm);
}

.preset-idx {
  font-family: var(--font-code);
  font-size: 13px;
  color: var(--dim);
  flex-shrink: 0;
  min-width: 22px;
}

.preset-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.preset-name {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--mid);
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: color 0.1s, text-shadow 0.1s;
}

.preset-desc {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preset-meta {
  font-family: var(--font-code);
  font-size: 12px;
  color: var(--dim);
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}

.preset-footer {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
  padding: 8px 16px;
  border-top: 1px solid var(--off);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   SHIP BUTTON
═══════════════════════════════════════════════════════════ */

.btn-ship {
  color: var(--dim);
  border: 1px solid var(--off);
  position: relative;
}
.btn-ship:not(:disabled):hover {
  color: var(--mid);
  border-color: var(--dim);
}
.btn-ship.ship-pending {
  color: var(--sig);
  border-color: var(--sig);
  text-shadow: var(--glow-sig);
  animation: ship-pulse 1.4s ease-in-out infinite;
}
@keyframes ship-pulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 14px rgba(0,229,255,0.45), 0 0 28px rgba(0,229,255,0.15); }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL SETTINGS BAR
═══════════════════════════════════════════════════════════ */

.global-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 6px 16px;
  border-bottom: 1px solid var(--off);
  background: var(--bg2);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  font-family: var(--font-ui);
}

.gbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 14px 2px 0;
}

.gbar-label {
  font-size: 15px;
  color: var(--dim);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.gbar-val {
  font-size: 15px;
  color: var(--mid);
  min-width: 36px;
  letter-spacing: 0.05em;
}

.gbar-sep {
  color: var(--off);
  padding: 0 4px 0 0;
  font-size: 14px;
  align-self: center;
}

/* Shared active-state for toggle buttons */
.btn-state-on {
  color: var(--sig);
  border-color: var(--sig);
  text-shadow: var(--glow-sig);
}

/* PLAY button active state (running) */
.btn-exec.active {
  color: var(--sig);
  border-color: var(--sig);
  text-shadow: var(--glow-sig);
  box-shadow: 0 0 12px rgba(0,229,255,0.25);
}

/* Shared panel base — modals, overlays, drawers */
.modal-box {
  background: #0a0a0a;
  border: 1px solid var(--mid);
  box-shadow: 0 0 40px rgba(255,255,255,0.08), 0 0 2px rgba(255,255,255,0.2);
}

/* Cycle buttons (KEY, SCALE) */
.btn-cycle {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--mid);
  border: 1px solid var(--off);
  background: transparent;
  padding: 2px 10px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: color .1s, border-color .1s, text-shadow .1s;
  white-space: nowrap;
}
.btn-cycle:hover {
  color: var(--bright);
  border-color: var(--dim);
}
.btn-cycle.pending-btn {
  color: var(--bright);
  border-color: var(--bright);
  text-shadow: var(--glow-sm);
}

/* Beat selector buttons */
.beat-group {
  display: flex;
  gap: 2px;
}
.btn-beat {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--dim);
  border: 1px solid var(--off);
  background: transparent;
  padding: 1px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: color .1s, border-color .1s;
}
.btn-beat:hover { color: var(--mid); border-color: var(--dim); }
.btn-beat.active {
  color: var(--sig);
  border-color: var(--sig);
  text-shadow: var(--glow-sig);
}
.btn-beat.pending-btn {
  box-shadow: 0 0 6px rgba(0,229,255,0.35);
}

/* Global bar range inputs */
.global-bar input[type="range"] { width: 80px; }

/* Select (SWAP quantise) */
.gbar-select {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--mid);
  background: var(--bg3);
  border: 1px solid var(--off);
  border-radius: 2px;
  padding: 2px 6px;
  cursor: pointer;
  outline: none;
  letter-spacing: 0.04em;
}
.gbar-select:hover { border-color: var(--dim); }
.gbar-select option { background: var(--bg); }

/* Pending state on sliders */
.pending-slider {
  accent-color: #fff;
}
.pending-slider::-webkit-slider-thumb {
  background: var(--bright) !important;
  box-shadow: var(--glow-md) !important;
}
.pending-slider::-moz-range-thumb {
  background: var(--bright) !important;
  box-shadow: var(--glow-md) !important;
  border: none;
}

/* ═══════════════════════════════════════════════════════════
   PER-PATTERN CONTROLS PANEL
═══════════════════════════════════════════════════════════ */

.pattern-ctrl-toggle {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--dim);
  border: 1px solid var(--off);
  background: transparent;
  padding: 1px 8px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: color .1s, border-color .1s;
}
.pattern-ctrl-toggle:hover { color: var(--mid); border-color: var(--dim); }

.pattern-ctrl-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--off);
  border-radius: 2px;
  margin-top: 2px;
}

.pat-ctrl-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pat-ctrl-label {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--dim);
  min-width: 56px;
  letter-spacing: 0.08em;
}

.pat-ctrl-slider { width: 110px; }

.pat-ctrl-val {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--mid);
  min-width: 38px;
}

.pat-ctrl-live {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
  min-width: 50px;
}
.pat-ctrl-live.pending-label {
  color: var(--mid);
}

/* ═══════════════════════════════════════════════════════════
   THREAD SWAP INDICATOR
═══════════════════════════════════════════════════════════ */

.pattern-swap-indicator {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 0.05em;
  transition: color .2s;
}
.pattern-swap-indicator.active {
  color: var(--sig);
  text-shadow: var(--glow-sig);
  animation: swap-blink 0.8s step-end infinite;
}
@keyframes swap-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Flash when swap fires */
.pattern-row-active.swap-flash {
  background: var(--sig) !important;
  box-shadow: var(--glow-sig-lg) !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

/* ── Tablet (≤900px): tighten header, shrink fonts ─────── */
@media (max-width: 900px) {
  .crt-bezel { padding: 6px; }
  .logo-title { font-size: 22px; }
  input[type="range"] { width: 70px; }
  .bpm-val { min-width: 28px; font-size: 20px; }
  .btn { font-size: 16px; padding: 4px 10px; }
  .controls { gap: 6px; }
  .ctrl-transport { padding-right: 8px; gap: 6px; }
  .ctrl-modes { gap: 3px; padding-right: 8px; }
  .global-bar { gap: 0; padding: 4px 12px; }
  .gbar-group { padding-right: 10px; }
  .global-bar input[type="range"] { width: 60px; }
  .gbar-sep { display: none; }
  .gbar-effects input[type="range"] { width: 50px; }
  .gbar-lfo-input { width: 75px; }
}

/* ── Phablet (≤700px): natural document flow, stack panels ─ */
@media (max-width: 700px) {
  /*
   * Break out of the fixed-height viewport chain.
   * Base CSS locks html/body to height:100% + overflow:hidden for the desktop
   * "CRT screen fills the window" effect. On mobile we need natural scroll.
   */
  html, body {
    height: auto;
    min-height: 100%;
    overflow: auto;
    align-items: flex-start;   /* prevent top-clip from vertical centering */
    justify-content: flex-start;
  }

  .crt-bezel {
    width: 100%;
    height: auto;
    min-height: 100svh;        /* svh = small viewport height (excludes browser chrome) */
    padding: 4px;
    align-items: stretch;
  }

  /* Let the screen grow with its content instead of clipping */
  .crt-screen {
    height: auto;
    overflow: visible;
    border-radius: 4px;
  }

  header {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }

  .controls {
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
  }

  .ctrl-transport { border-right: none; border-bottom: 1px solid var(--off); padding-right: 0; padding-bottom: 4px; width: 100%; flex-wrap: wrap; }
  .ctrl-modes { border-right: none; gap: 4px; padding-right: 0; }
  .ctrl-secondary { margin-left: auto; }
  .ctrl-divider { display: none; }
  /* Dropdown opens upward on mobile to avoid clipping at bottom */
  .menu-dropdown { top: auto; bottom: calc(100% + 6px); }

  /* Global bar: horizontal scroll is cleaner than trying to reflow on mobile */
  .global-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 6px 10px;
  }
  .global-bar::-webkit-scrollbar { display: none; }
  .gbar-group { flex-shrink: 0; white-space: nowrap; padding-right: 12px; }
  .gbar-sep { display: none; }

  /* Arp bar: also scroll horizontally */
  .arp-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 5px 10px;
  }
  .arp-bar::-webkit-scrollbar { display: none; }
  .arp-bar > * { flex-shrink: 0; }

  /* Stack panels vertically; main is no longer a fixed-height flex fill */
  main {
    flex: none;
    flex-direction: column;
    overflow: visible;
    height: auto;
  }

  .editor-panel {
    width: 100%;          /* neutralise --editor-split when stacked */
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--off);
  }

  .viz-panel {
    width: 100%;
    flex: none;
    min-height: 240px;
    max-height: 300px;
  }

  #cycle-canvas { max-height: 260px; }

  /* Divider is a desktop affordation only; mixer stacks like the other panels */
  .panel-divider { display: none; }
  .mixer-panel {
    flex: none;
    width: 100%;
    border-left: none;
    border-bottom: 1px solid var(--off);
  }

  .panel-title {
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pattern-row-header { flex-wrap: wrap; }

  /* Boot animation */
  .crt-boot { padding: 24px 32px; }

  /* Pattern ctrl panel */
  .pat-ctrl-slider { width: 80px; }
  .pat-ctrl-label  { min-width: 46px; }
}

/* ── Narrow (≤600px): trim secondary buttons ── */
@media (max-width: 600px) {
  .btn-draw, .btn-stage { display: none; }
  .btn { font-size: 15px; padding: 3px 8px; }

  /* Global bar: shrink sliders and text a bit more */
  .global-bar { font-size: 13px; }
  .gbar-label, .gbar-val { font-size: 13px; }
  .global-bar input[type="range"] { width: 52px; }
  .gbar-effects input[type="range"] { width: 44px; }
  .gbar-lfo-input { width: 60px; }
  .btn-fx { font-size: 12px; padding: 2px 5px; }

  /* Pattern ctrl panel */
  .pat-ctrl-slider { width: 70px; }
}

/* ── Mobile (≤480px): compact everything ─────────────────── */
@media (max-width: 480px) {
  .crt-bezel { padding: 0; }
  .crt-screen { border-radius: 0; }

  header {
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 10px;
  }

  .logo-bracket { display: none; }
  .logo-title   { font-size: 20px; }

  .controls {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Ensure buttons have big-enough touch targets */
  .btn { min-height: 36px; font-size: 14px; padding: 2px 8px; }

  .ctrl-label { display: none; }
  .bpm-group  { order: 1; }   /* BPM after transport buttons */

  /* Global bar: smaller text + sliders; still scrolls horizontally */
  .gbar-label, .gbar-val { font-size: 12px; }
  .global-bar input[type="range"]   { width: 50px; }
  .gbar-effects input[type="range"] { width: 40px; }
  .gbar-lfo-input { width: 60px; font-size: 11px; padding: 2px 4px; }
  .btn-beat { font-size: 13px; padding: 1px 5px; }
  .gbar-val { min-width: 26px; }

  /* ── Boot animation ── */
  .crt-boot { padding: 16px 20px; gap: 4px; }

  /* ── Pattern ctrl panel ── */
  .pat-ctrl-slider { width: 65px; }
  .pat-ctrl-label  { min-width: 38px; }
  .pat-ctrl-val    { min-width: 28px; }
  .pat-ctrl-live   { min-width: 36px; font-size: 12px; }

  input[type="range"] { width: 55px; }

  .editor-panel { padding: 10px 10px; }

  .viz-panel {
    min-height: 180px;
    max-height: 220px;
    padding: 6px 10px;
  }

  #cycle-canvas { max-height: 200px; }

  .statusbar { padding: 4px 10px; font-size: 14px; }

  .boot-line { font-size: 17px; }
  .boot-ok   { font-size: 19px; }

  .editor-hint { display: none; }

  .pattern-ctrl-toggle,
  .pattern-row-lib { font-size: 11px; padding: 1px 5px; }

  .save-panel {
    min-width: 0;
    width: min(340px, 92vw);
    padding: 14px 16px;
  }

  .net-panel { width: 95vw; }
  .net-join-input { min-width: 80px; }
}

/* ═══════════════════════════════════════════════════════════
   STAGE MODE
═══════════════════════════════════════════════════════════ */

.btn-stage {
  color: var(--dim);
  border: 1px solid var(--off);
}
.btn-stage:hover {
  color: var(--mid);
  border-color: var(--dim);
}

/* When stage mode is active — hide everything but the canvas */
body.stage-mode .editor-panel    { display: none; }
body.stage-mode .panel-divider   { display: none; }
body.stage-mode .mixer-panel     { display: none; }
body.stage-mode .layout-bar      { display: none; }
body.stage-mode .viz-panel       { flex: 1; width: 100%; padding: 0; }
body.stage-mode .global-bar      { display: none; }
body.stage-mode .arp-bar         { display: none; }
body.stage-mode header           { display: none; }
body.stage-mode .statusbar       { display: none; }
body.stage-mode #cycle-canvas    { max-height: none; }

/* Stage HUD — overlaid on full-screen canvas */
.stage-hud {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  flex-direction: column;
  justify-content: space-between;
}
body.stage-mode .stage-hud {
  display: flex;
}

.stage-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
  pointer-events: auto;
}

.stage-hud-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.stage-logo {
  font-family: var(--font-ui);
  font-size: 28px;
  color: var(--bright);
  text-shadow: var(--glow-md);
  letter-spacing: 0.2em;
}

.stage-bpm {
  font-family: var(--font-ui);
  font-size: 52px;
  color: var(--bright);
  text-shadow: var(--glow-lg);
  letter-spacing: 0.1em;
  min-width: 120px;
  text-align: center;
}

.stage-btns {
  display: flex;
  gap: 12px;
  pointer-events: auto;
}

.stage-info {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--dim);
  letter-spacing: 0.12em;
}

/* ═══════════════════════════════════════════════════════════
   EFFECTS CONTROLS
═══════════════════════════════════════════════════════════ */

.gbar-effects {
  gap: 6px;
}

.btn-fx {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--dim);
  border: 1px solid var(--off);
  background: transparent;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: color .1s, border-color .1s, text-shadow .1s;
  white-space: nowrap;
}
.btn-fx:hover { color: var(--mid); border-color: var(--dim); }
.btn-fx.active {
  color: var(--sig);
  border-color: var(--sig);
  text-shadow: var(--glow-sig);
}

.gbar-effects input[type="range"] { width: 60px; }
.gbar-effects .gbar-val           { min-width: 32px; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════
   EVOLUTION INDICATOR + DRAW BUTTON
═══════════════════════════════════════════════════════════ */

.pattern-evo-indicator {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.04em;
  transition: color .2s;
}
.pattern-evo-indicator.active {
  color: var(--sig);
  text-shadow: var(--glow-sig);
  animation: swap-blink 1.2s step-end infinite;
}

.btn-draw {
  color: var(--dim);
  border: 1px solid var(--off);
}
.btn-draw:hover { color: var(--mid); border-color: var(--dim); }
.btn-draw.active {
  color: var(--sig);
  border-color: var(--sig);
  text-shadow: var(--glow-sig);
  box-shadow: 0 0 10px rgba(0,229,255,0.2);
}

/* ═══════════════════════════════════════════════════════════
   SAVE / EXPORT BUTTONS
═══════════════════════════════════════════════════════════ */

.btn-save, .btn-export {
  color: var(--dim);
  border: 1px solid var(--off);
}
.btn-save:hover, .btn-export:hover { color: var(--mid); border-color: var(--dim); }

/* ═══════════════════════════════════════════════════════════
   PRESET OVERLAY TABS
═══════════════════════════════════════════════════════════ */

.preset-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--off);
  margin-bottom: 8px;
}

.preset-tab {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  padding: 4px 14px;
  cursor: pointer;
  transition: color .1s, border-color .1s;
}
.preset-tab:hover  { color: var(--mid); }
.preset-tab.active {
  color: var(--sig);
  border-bottom-color: var(--sig);
  text-shadow: var(--glow-sig);
}

/* ═══════════════════════════════════════════════════════════
   SAVE / EXPORT MODAL
═══════════════════════════════════════════════════════════ */

.save-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  background: rgba(0,0,0,0.7);
}
.save-modal.hidden { display: none; }

.save-panel {
  background: #0a0a0a;
  border: 1px solid var(--mid);
  box-shadow: 0 0 24px rgba(255,255,255,0.12);
  padding: 20px 28px;
  min-width: 280px;
  border-radius: 3px;
}

.save-header {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--bright);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  text-shadow: var(--glow-sm);
}

.save-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.save-label {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.08em;
}

.save-input {
  font-family: var(--font-code);
  font-size: 15px;
  background: #000;
  border: 1px solid var(--dim);
  color: var(--bright);
  padding: 4px 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.save-input:focus { border-color: var(--bright); }

.save-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.export-progress {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--mid);
  letter-spacing: 0.1em;
  animation: swap-blink 0.8s step-end infinite;
}
.export-progress.hidden { display: none; }

/* Saved session list items */
.saved-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  cursor: default;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.saved-item:hover { background: rgba(255,255,255,0.04); }

.saved-item-name {
  font-family: var(--font-code);
  font-size: 14px;
  color: var(--bright);
  flex: 1;
}
.saved-item .btn {
  padding: 1px 7px;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════
   PER-ROW LIB BUTTON
═══════════════════════════════════════════════════════════ */

.pattern-row-lib {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--off);
  padding: 1px 6px;
  cursor: pointer;
  letter-spacing: 0.06em;
  border-radius: 2px;
  transition: color .1s, border-color .1s;
}
.pattern-row-lib:hover { color: var(--mid); border-color: var(--dim); }

/* LFO rate pattern input */
.gbar-lfo-input {
  font-family: var(--font-code);
  font-size: 12px;
  background: #000;
  border: 1px solid var(--off);
  color: var(--mid);
  padding: 2px 6px;
  outline: none;
  width: 90px;
}
.gbar-lfo-input:focus { border-color: var(--dim); color: var(--bright); }

/* ═══════════════════════════════════════════════════════════
   NET BUTTON
═══════════════════════════════════════════════════════════ */

.btn-net { color: var(--dim); border: 1px solid var(--off); }
.btn-net:hover { color: var(--mid); border-color: var(--dim); }
.btn-net.active {
  color: var(--sig);
  border-color: var(--sig);
  text-shadow: var(--glow-sig);
}

/* Feature-flagged button: visible but indicates the feature isn't available yet */
.btn-feature-off {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.btn-feature-off:hover {
  color: inherit;
  border-color: inherit;
  text-shadow: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   NET OVERLAY
═══════════════════════════════════════════════════════════ */

.net-overlay {
  position: absolute;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.net-overlay.hidden { display: none; }

.net-panel {
  width: min(540px, 90%);
  background: #0a0a0a;
  border: 1px solid var(--mid);
  box-shadow: 0 0 40px rgba(255,255,255,0.08), 0 0 2px rgba(255,255,255,0.2);
}

.net-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--off);
}

.net-title {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--dim);
  letter-spacing: 0.08em;
}

.net-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.net-status {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 0.1em;
}
.net-status.connected { color: var(--bright); text-shadow: var(--glow-sm); }
.net-status.error     { color: #ff4444; }

.net-section {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.net-sep {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--off);
}

.net-join-input { flex: 1; min-width: 160px; }

.net-session-info { display: flex; flex-direction: column; gap: 10px; }
.net-session-info.hidden { display: none; }

.net-url-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.net-label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.08em;
  min-width: 52px;
  flex-shrink: 0;
}

.net-url-val {
  font-family: var(--font-code);
  font-size: 12px;
  color: var(--mid);
  word-break: break-all;
  flex: 1;
}
.net-dim { color: var(--off); font-style: italic; }

.net-rows-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid var(--off);
  border-bottom: 1px solid var(--off);
}

.net-row-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
}

.net-actions { display: flex; gap: 8px; }

/* ═══════════════════════════════════════════════════════════
   ROW OWNERSHIP
═══════════════════════════════════════════════════════════ */

.row-remote-owned { opacity: 0.55; }
.row-remote-owned .pattern-textarea {
  cursor: not-allowed;
  color: var(--dim);
}

.row-owner-badge {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--off);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.row-owner-badge.mine { color: var(--dim); }

/* ═══════════════════════════════════════════════════════════
   ARPEGGIATOR BAR
═══════════════════════════════════════════════════════════ */

.arp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px;
  border-bottom: 1px solid var(--off);
  background: var(--bg);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  font-family: var(--font-ui);
  font-size: 14px;
}
.arp-bar.hidden { display: none; }

.arp-bar .gbar-label { font-size: 13px; }
.arp-bar .gbar-sep   { color: var(--off); font-size: 13px; }

.arp-notes-input {
  font-family: var(--font-code);
  font-size: 13px;
  background: #000;
  border: 1px solid var(--dim);
  color: var(--bright);
  padding: 3px 8px;
  outline: none;
  width: 140px;
  letter-spacing: 0.05em;
}
.arp-notes-input::placeholder { color: var(--dim); }
.arp-notes-input:focus { border-color: var(--bright); }

.btn-arp {
  color: var(--dim);
  border: 1px solid var(--off);
}
.btn-arp:hover { color: var(--mid); border-color: var(--dim); }
.btn-arp.active {
  color: var(--sig);
  border-color: var(--sig);
  text-shadow: var(--glow-sig);
  animation: ship-pulse 1.8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   ARP CHORD PRESETS + PREVIEW
═══════════════════════════════════════════════════════════ */

.arp-presets {
  display: flex;
  gap: 3px;
}

.btn-arp-preset {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
  border: 1px solid var(--off);
  background: transparent;
  padding: 1px 6px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color .1s, border-color .1s;
}
.btn-arp-preset:hover {
  color: var(--mid);
  border-color: var(--dim);
}

.arp-preview-text {
  font-family: var(--font-code);
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}
/* When arp is enabled, preview lights up with signal color */
.btn-arp.active ~ .arp-preview-text,
.arp-bar.arp-active .arp-preview-text {
  color: var(--sig);
  text-shadow: 0 0 6px rgba(0,229,255,0.3);
}

/* ═══════════════════════════════════════════════════════════
   SCENE BUTTON + OVERLAY
═══════════════════════════════════════════════════════════ */

.btn-scn { color: var(--dim); border: 1px solid var(--off); }
.btn-scn:hover { color: var(--mid); border-color: var(--dim); }
.btn-scn.active {
  color: var(--sig);
  border-color: var(--sig);
  text-shadow: var(--glow-sig);
  animation: ship-pulse 1.8s ease-in-out infinite;
}

.btn-midi { color: var(--dim); border: 1px solid var(--off); }
.btn-midi:hover { color: var(--mid); border-color: var(--dim); }
.btn-midi.active { color: var(--sig); border-color: var(--sig); text-shadow: var(--glow-sig); }
.btn-midi.hidden { display: none; }

.scn-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.scn-overlay.hidden { display: none; }

.scn-panel {
  width: min(580px, 92%);
  background: #0a0a0a;
  border: 1px solid var(--mid);
  box-shadow: 0 0 40px rgba(255,255,255,0.08), 0 0 2px rgba(255,255,255,0.2);
  border-radius: 3px;
}

.scn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--off);
}

.scn-title {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--dim);
  letter-spacing: 0.08em;
}

.scn-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scn-textarea {
  font-family: var(--font-code);
  font-size: 13px;
  background: #000;
  border: 1px solid var(--dim);
  color: var(--bright);
  padding: 8px 12px;
  outline: none;
  width: 100%;
  resize: vertical;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.scn-textarea:focus { border-color: var(--sig); box-shadow: 0 0 0 1px rgba(0,229,255,0.1); }
.scn-textarea::placeholder { color: var(--off); }

.scn-hint {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--off);
  letter-spacing: 0.06em;
}

.scn-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scn-status {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.08em;
}
.scn-status.err  { color: var(--mid); }
.scn-status.ok   { color: var(--sig); text-shadow: var(--glow-sig); }

/* ═══════════════════════════════════════════════════════════
   SPECTATOR MODE
═══════════════════════════════════════════════════════════ */

/* Hide all header controls except the help link in spectator mode */
body.spectator-mode header .ctrl-transport { display: none; }
body.spectator-mode header .ctrl-modes { display: none; }
body.spectator-mode header .ctrl-secondary > *:not(.ctrl-overflow) { display: none; }
body.spectator-mode header .ctrl-overflow .menu-item:not(.btn-help) { display: none; }
body.spectator-mode .global-bar  { display: none; }
body.spectator-mode .arp-bar      { display: none; }
body.spectator-mode .layout-bar   { display: none; }
body.spectator-mode .scn-overlay  { display: none !important; }
body.spectator-mode .editor-panel,
body.spectator-mode .panel-divider,
body.spectator-mode .mixer-panel {
  display: none !important;
}
/* Visualizer fills the remaining space */
body.spectator-mode .viz-panel { flex: 1; width: 100%; }

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — respect system preference
═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Stop all looping animations */
  .crt-screen { animation: none; }
  .btn-ship.ship-pending { animation: none; }
  .btn-arp.active  { animation: none; }
  .btn-scn.active  { animation: none; }
  .status-cursor   { animation: none; opacity: 1; }
  .pattern-swap-indicator.active  { animation: none; }
  .pattern-evo-indicator.active   { animation: none; }
  .export-progress { animation: none; }
  .boot-line { animation: none; opacity: 1; transform: none; }
  @keyframes crt-flicker { 0%, 100% { opacity: 1; } }
  /* Keep transitions — they are intentional UI feedback, just brief */
  *, *::before, *::after { transition-duration: 0.05s !important; }
}