:root {
  --rt-bg: #060014;
  --rt-panel: #13002a;
  --rt-panel-2: #1b043b;
  --rt-line: #66ff99;
  --rt-pink: #ff4ff3;
  --rt-cyan: #5ffcff;
  --rt-yellow: #fff176;
  --rt-orange: #ff9f43;
  --rt-red: #ff3860;
  --rt-text: #f8f2ff;
  --rt-muted: #b8a6d9;
  --rt-dark: #05000d;
  --rt-grid: rgba(102, 255, 153, 0.17);
}

* { box-sizing: border-box; }

html { background: var(--rt-bg); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Courier New", Courier, monospace;
  color: var(--rt-text);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 79, 243, 0.24), transparent 30rem),
    radial-gradient(circle at 82% 14%, rgba(95, 252, 255, 0.16), transparent 28rem),
    linear-gradient(180deg, #090019 0%, #020007 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.035) 50%, rgba(0,0,0,0.055) 50%),
    linear-gradient(90deg, rgba(255,0,255,0.025), rgba(0,255,180,0.025));
  background-size: 100% 4px, 6px 100%;
  mix-blend-mode: screen;
  z-index: 50;
}

button, input, select { font: inherit; }

button { cursor: pointer; }

.rt-page-shell {
  width: min(1320px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 40px;
}

.rt-header {
  text-align: center;
  margin-bottom: 14px;
}

.rt-back-link {
  display: inline-block;
  color: var(--rt-line);
  text-decoration: none;
  border: 2px dotted rgba(102,255,153,.5);
  padding: 6px 10px;
  margin-bottom: 12px;
  background: rgba(0,0,0,.36);
}

.rt-back-link:hover { color: var(--rt-yellow); border-color: var(--rt-yellow); }

.rt-logo-wrap {
  border: 3px ridge var(--rt-cyan);
  background: #050014;
  box-shadow: 0 0 18px rgba(95,252,255,.34), inset 0 0 20px rgba(255,79,243,.18);
  padding: 8px;
}

.rt-logo {
  display: block;
  width: 100%;
  max-height: 145px;
  object-fit: contain;
}

.rt-subtitle {
  color: var(--rt-yellow);
  margin: 10px 0 0;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(255,241,118,.42);
}

.rt-cabinet {
  border: 4px double var(--rt-line);
  background:
    linear-gradient(135deg, rgba(255,79,243,.12), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.72));
  padding: 14px;
  box-shadow: 0 0 28px rgba(102,255,153,.18), inset 0 0 20px rgba(0,0,0,.6);
}

.rt-panel {
  border: 2px solid rgba(102,255,153,.78);
  background: linear-gradient(180deg, rgba(27,4,59,.94), rgba(9,0,23,.94));
  box-shadow: inset 0 0 16px rgba(0,0,0,.58), 0 0 10px rgba(102,255,153,.08);
  padding: 12px;
}

.rt-top-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(170px, .42fr) minmax(150px, .35fr);
  gap: 12px;
  margin-bottom: 12px;
  align-items: end;
}

.rt-song-meta label,
.rt-synth-panel label {
  display: block;
  color: var(--rt-cyan);
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 6px;
  letter-spacing: .12em;
}

.rt-input-row { display: flex; gap: 8px; }

.rt-input,
.rt-select {
  width: 100%;
  color: var(--rt-text);
  background: #05000d;
  border: 2px inset rgba(95,252,255,.8);
  padding: 9px 10px;
  outline: none;
}

.rt-input:focus,
.rt-select:focus {
  border-color: var(--rt-yellow);
  box-shadow: 0 0 10px rgba(255,241,118,.28);
}

.rt-range { width: 100%; accent-color: var(--rt-pink); }

.rt-transport-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.rt-button,
.rt-big-button,
.rt-danger-button,
.rt-mini-button {
  border: 2px outset rgba(255,255,255,.35);
  color: var(--rt-dark);
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 #000;
}

.rt-button {
  background: var(--rt-cyan);
  padding: 10px 14px;
}

.rt-big-button {
  background: var(--rt-yellow);
  padding: 11px 16px;
  color: #1a0040;
}

.rt-danger-button {
  background: var(--rt-pink);
  padding: 10px 14px;
  color: #190014;
}

.rt-mini-button {
  background: var(--rt-line);
  padding: 7px 10px;
  font-size: 12px;
}

.rt-mini-button.rt-warn { background: var(--rt-red); color: #fff; }

.rt-button:hover,
.rt-big-button:hover,
.rt-danger-button:hover,
.rt-mini-button:hover {
  filter: brightness(1.15);
  transform: translate(-1px, -1px);
}

.rt-download-button { background: var(--rt-orange); }

.rt-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
}

.rt-side-stack { display: grid; gap: 12px; align-content: start; }

.rt-section-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 10px;
}

.rt-section-head.compact { align-items: center; }

.rt-section-head h1,
.rt-section-head h2,
.rt-panel h2 {
  margin: 0 0 4px;
  color: var(--rt-yellow);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(255,241,118,.32);
}

.rt-section-head p,
.rt-help-panel p,
.rt-fx-panel p {
  margin: 0;
  color: var(--rt-muted);
  font-size: 13px;
  line-height: 1.35;
}

.rt-help-panel p { margin: 8px 0; }

.rt-led {
  color: var(--rt-red);
  border: 2px inset rgba(255,56,96,.65);
  background: #09000b;
  padding: 8px 10px;
  white-space: nowrap;
  font-weight: bold;
  box-shadow: inset 0 0 12px rgba(255,56,96,.15);
}

.rt-led.is-playing {
  color: var(--rt-line);
  border-color: rgba(102,255,153,.85);
  box-shadow: inset 0 0 12px rgba(102,255,153,.25), 0 0 12px rgba(102,255,153,.2);
}

.rt-pattern-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  align-items: center;
}

.rt-pattern-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rt-pattern-tab {
  color: var(--rt-text);
  background: #100028;
  border: 2px solid rgba(95,252,255,.55);
  padding: 7px 10px;
  box-shadow: none;
}

.rt-pattern-tab.is-active {
  color: #05000d;
  background: var(--rt-yellow);
  border-color: var(--rt-yellow);
  font-weight: bold;
}

.rt-pattern-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.rt-pattern-scroll {
  overflow: auto;
  border: 2px inset rgba(95,252,255,.38);
  background:
    linear-gradient(90deg, rgba(102,255,153,.08) 1px, transparent 1px),
    linear-gradient(rgba(102,255,153,.08) 1px, transparent 1px),
    #05000d;
  background-size: 24px 24px;
}

.rt-tracker {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.rt-tracker th,
.rt-tracker td {
  border: 1px solid rgba(102,255,153,.24);
  text-align: center;
}

.rt-tracker th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #160035;
  color: var(--rt-cyan);
  padding: 7px 3px;
}

.rt-tracker th:first-child,
.rt-tracker td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #160035;
  color: var(--rt-yellow);
  font-weight: bold;
  width: 82px;
}

.rt-step-head.is-playing-step,
.rt-cell.is-playing-step {
  outline: 2px solid var(--rt-yellow);
  box-shadow: inset 0 0 14px rgba(255,241,118,.28);
}

.rt-cell-button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 4px 2px;
  border: 0;
  background: rgba(0,0,0,.18);
  color: var(--rt-muted);
  box-shadow: none;
  font-size: 12px;
  line-height: 1;
}

.rt-cell-button:hover {
  background: rgba(95,252,255,.16);
  color: var(--rt-text);
}

.rt-cell-button.is-on {
  color: #05000d;
  background: var(--rt-line);
  text-shadow: none;
  font-weight: bold;
}

.rt-cell-button.is-note {
  color: #05000d;
  background: var(--rt-cyan);
  font-weight: bold;
}

.rt-cell-button.is-fx {
  color: #05000d;
  background: var(--rt-pink);
  font-weight: bold;
  font-size: 10px;
}

.rt-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.rt-status-grid div {
  border: 1px solid rgba(95,252,255,.4);
  background: rgba(0,0,0,.28);
  padding: 8px;
}

.rt-status-grid span {
  display: block;
  color: var(--rt-muted);
  font-size: 11px;
}

.rt-status-grid strong {
  display: block;
  color: var(--rt-yellow);
  margin-top: 3px;
  word-break: break-word;
}

.rt-synth-panel,
.rt-fx-panel,
.rt-help-panel { min-width: 0; }

.rt-synth-panel h2,
.rt-fx-panel h2,
.rt-help-panel h2 { font-size: 18px; }

.rt-synth-panel label { margin-top: 12px; }

.rt-fx-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  margin-top: 10px;
}

.rt-fx-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255,79,243,.45);
  background: rgba(0,0,0,.28);
  padding: 8px;
}

.rt-fx-name {
  min-width: 0;
  color: var(--rt-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rt-fx-name span {
  display: block;
  color: var(--rt-muted);
  font-size: 11px;
  margin-top: 2px;
}

.rt-fx-item.is-selected {
  border-color: var(--rt-yellow);
  box-shadow: 0 0 14px rgba(255,241,118,.2);
}

.rt-empty {
  color: var(--rt-muted);
  border: 1px dashed rgba(102,255,153,.45);
  padding: 12px;
  text-align: center;
}

code {
  color: var(--rt-line);
  background: rgba(0,0,0,.38);
  padding: 1px 4px;
}

.rt-log-panel { margin-top: 12px; }

.rt-log-panel h2 { font-size: 16px; }

.rt-log {
  min-height: 42px;
  color: var(--rt-line);
  background: #030007;
  border: 2px inset rgba(102,255,153,.45);
  padding: 10px;
  line-height: 1.35;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .rt-top-panel,
  .rt-grid-layout {
    grid-template-columns: 1fr;
  }

  .rt-side-stack { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rt-page-shell { width: min(100% - 12px, 1320px); padding-top: 8px; }
  .rt-cabinet { padding: 8px; }
  .rt-panel { padding: 10px; }
  .rt-input-row { flex-direction: column; }
  .rt-transport-panel { display: grid; grid-template-columns: 1fr 1fr; }
  .rt-big-button, .rt-download-button { grid-column: 1 / -1; }
  .rt-status-grid { grid-template-columns: 1fr; }
  .rt-section-head { flex-direction: column; }
  .rt-fx-item { grid-template-columns: 1fr; }
}

.rt-note-editor {
  margin-top: 10px;
  border: 2px inset rgba(255,241,118,.45);
  background: rgba(0,0,0,.34);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.rt-note-editor:not(.is-active) {
  opacity: .72;
}

.rt-note-readout span {
  display: block;
  color: var(--rt-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.rt-note-readout strong {
  display: block;
  color: var(--rt-yellow);
  margin-top: 3px;
}

.rt-note-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rt-note-input {
  width: 90px;
  text-align: center;
  padding: 7px 8px;
  color: var(--rt-yellow);
}

.rt-note-editor p {
  margin: 0;
  color: var(--rt-muted);
  font-size: 12px;
  line-height: 1.35;
}

.rt-cell-button.is-selected-note {
  outline: 2px solid var(--rt-yellow);
  box-shadow: inset 0 0 10px rgba(255,241,118,.48), 0 0 10px rgba(255,241,118,.28);
}

@media (max-width: 640px) {
  .rt-note-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .rt-note-input {
    width: 100%;
  }
}

/* Phase 2.3 track-editor additions */
.rt-transport-panel .rt-button,
.rt-transport-panel .rt-big-button {
  min-height: 42px;
}

.rt-track-editor {
  margin-top: 10px;
  border: 2px inset rgba(255,241,118,.55);
  background:
    linear-gradient(90deg, rgba(95,252,255,.06) 1px, transparent 1px),
    linear-gradient(rgba(95,252,255,.05) 1px, transparent 1px),
    rgba(0,0,0,.36);
  background-size: 18px 18px;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.rt-track-editor.is-active {
  box-shadow: inset 0 0 14px rgba(255,241,118,.16), 0 0 12px rgba(255,241,118,.12);
}

.rt-track-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.rt-track-editor-head span,
.rt-editor-block span {
  display: block;
  color: var(--rt-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.rt-track-editor-head strong,
.rt-editor-block strong {
  display: block;
  color: var(--rt-yellow);
  margin-top: 3px;
  word-break: break-word;
}

.rt-track-common {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(102,255,153,.35);
  background: rgba(0,0,0,.24);
  padding: 8px;
}

.rt-track-common-row {
  display: grid;
  gap: 8px;
  align-items: center;
}

.rt-track-common-row-main {
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) auto;
}

.rt-track-common-row-effects {
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr);
}

.rt-inline-cell-control:empty {
  display: none;
}

.rt-track-common label {
  color: var(--rt-cyan);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .08em;
}

.rt-range-label {
  display: grid;
  gap: 5px;
}

.rt-mute-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  white-space: nowrap;
}

.rt-editor-dynamic {
  border: 1px dashed rgba(255,79,243,.45);
  background: rgba(0,0,0,.22);
  padding: 9px;
}

.rt-editor-empty,
.rt-editor-tip {
  margin: 6px 0 0;
  color: var(--rt-muted);
  font-size: 12px;
  line-height: 1.35;
}

.rt-editor-controls,
.rt-note-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.rt-editor-subgrid {
  display: grid;
  grid-template-columns: 150px minmax(160px, 1fr);
  gap: 8px;
  margin-top: 10px;
  align-items: center;
  border-top: 1px dotted rgba(95,252,255,.35);
  padding-top: 10px;
}

.rt-editor-subgrid label {
  color: var(--rt-cyan);
  font-size: 12px;
  font-weight: bold;
}

.rt-note-input {
  width: 90px;
  text-align: center;
  padding: 7px 8px;
  color: var(--rt-yellow);
}

.rt-cell-button.is-muted-track {
  opacity: .42;
  filter: grayscale(.75);
}

.rt-channel-label.is-muted-track-label {
  color: var(--rt-red) !important;
  text-decoration: line-through;
}

.rt-cell-button.is-selected-note {
  outline: 2px solid var(--rt-yellow);
  box-shadow: inset 0 0 10px rgba(255,241,118,.48), 0 0 10px rgba(255,241,118,.28);
}

.rt-status-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 780px) {
  .rt-track-common-row-main,
  .rt-track-common-row-effects,
  .rt-editor-subgrid {
    grid-template-columns: 1fr;
  }

  .rt-mute-label {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .rt-editor-controls,
  .rt-note-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .rt-note-input {
    width: 100%;
  }
}

/* Phase 2.4 refinements */
.rt-top-panel {
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, .85fr);
}

.rt-pattern-name-row {
  display: grid;
  grid-template-columns: 130px minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  border: 1px dotted rgba(255,241,118,.38);
  background: rgba(0,0,0,.24);
  padding: 8px;
}

.rt-pattern-name-row label {
  color: var(--rt-cyan);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .1em;
}

.rt-pattern-name-row span {
  color: var(--rt-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.rt-pattern-tab {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rt-pattern-tab.is-dragging {
  opacity: .45;
  transform: rotate(-2deg);
}

.rt-pattern-tab.is-drag-over {
  border-color: var(--rt-pink);
  box-shadow: 0 0 14px rgba(255,79,243,.36);
}

.rt-channel-label {
  padding: 0;
}

.rt-channel-label-button {
  width: 100%;
  min-height: 34px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: bold;
  text-align: center;
  padding: 6px 4px;
  cursor: pointer;
}

.rt-channel-label-button:hover,
.rt-channel-label-button:focus-visible {
  color: var(--rt-dark);
  background: var(--rt-yellow);
  outline: 2px solid var(--rt-yellow);
}

.rt-channel-label.is-active-track-label .rt-channel-label-button {
  color: var(--rt-dark);
  background: var(--rt-yellow);
  box-shadow: inset 0 0 0 2px var(--rt-pink), 0 0 12px rgba(255,245,63,.35);
}

.rt-fx-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.rt-fx-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
}

.rt-icon-button {
  min-width: 34px;
  padding-left: 7px;
  padding-right: 7px;
  font-size: 14px;
  line-height: 1;
}

.rt-stop-fx-button {
  background: var(--rt-red);
  color: #fff;
}

@media (max-width: 780px) {
  .rt-pattern-name-row {
    grid-template-columns: 1fr;
  }
  .rt-fx-controls {
    justify-content: flex-start;
  }
}

/* Phase 2.5 server song and publish UI */
.rt-publish-button {
  background: linear-gradient(180deg, #fff176, #ff8f00);
  color: #120014;
  box-shadow: 0 0 16px rgba(255,241,118,.32);
}

.rt-server-controls {
  display: grid;
  gap: 8px;
}

.rt-code-box {
  border: 1px dashed rgba(127, 255, 212, .55);
  background: rgba(0, 0, 0, .36);
  color: var(--rt-yellow);
  font-family: var(--rt-mono);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .08em;
  padding: 8px;
  text-align: center;
  word-break: break-word;
}

.rt-published-list {
  display: grid;
  gap: 8px;
}

.rt-published-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.28);
  padding: 8px;
}

.rt-published-name {
  color: #fff;
  font-family: var(--rt-mono);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rt-published-name span {
  display: block;
  margin-top: 3px;
  color: var(--rt-muted);
  font-size: 10px;
  font-weight: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Phase 2.7 transport colors + persistent FX pitch editor */
.rt-transport-panel [data-action="play-song"] {
  background: linear-gradient(180deg, #5ffcff, #267bff);
  color: #020018;
  box-shadow: 2px 2px 0 #000, 0 0 14px rgba(38, 123, 255, .34);
}

.rt-transport-panel [data-action="play-pattern"] {
  background: linear-gradient(180deg, #9dff7a, #25d95b);
  color: #021405;
  box-shadow: 2px 2px 0 #000, 0 0 14px rgba(37, 217, 91, .26);
}

.rt-transport-panel [data-action="stop"] {
  background: linear-gradient(180deg, #ff6b86, #ff203f);
  color: #fff;
  box-shadow: 2px 2px 0 #000, 0 0 14px rgba(255, 32, 63, .28);
}

.rt-fx-pitch-grid {
  border-top-color: rgba(255, 241, 118, .45);
}


/* Phase 2.7: show FX file names more clearly inside tracker cells */
.rt-cell-button.is-fx {
  font-size: 9px;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Phase 2.8: new song + one-click multiroi generator */
.rt-new-song-button {
  background: linear-gradient(180deg, #f8f2ff, #b8a6d9);
  color: #160022;
}

.rt-generator-banner {
  border-color: rgba(255, 241, 118, .92);
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 241, 118, .22), transparent 14rem),
    radial-gradient(circle at 90% 20%, rgba(255, 79, 243, .22), transparent 16rem),
    linear-gradient(180deg, rgba(27, 4, 59, .98), rgba(5, 0, 13, .98));
  box-shadow: inset 0 0 18px rgba(0,0,0,.68), 0 0 18px rgba(255, 241, 118, .22);
}

.rt-generator-banner-inner {
  display: grid;
  gap: 10px;
}

.rt-generator-banner h2 {
  margin: 0 0 4px;
  color: var(--rt-yellow);
  font-size: 18px;
  letter-spacing: .12em;
  line-height: 1.05;
  text-shadow: 0 0 10px rgba(255, 241, 118, .48), 2px 2px 0 #000;
}

.rt-generator-banner p {
  margin: 0;
  color: var(--rt-muted);
  font-size: 12px;
  line-height: 1.35;
  text-transform: uppercase;
}

.rt-generate-song-button {
  border: 3px outset rgba(255,255,255,.35);
  background: linear-gradient(180deg, #fff176, #ff9f43 62%, #ff4ff3);
  color: #130018;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 12px 10px;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #000, 0 0 18px rgba(255, 79, 243, .32);
}

.rt-generate-song-button:hover {
  filter: brightness(1.12);
  transform: translate(-1px, -1px);
}

/* Phase 2.13: dynamic tracks + master volume */
.rt-add-track-panel {
  margin-top: 12px;
  border: 2px dashed rgba(255, 241, 118, .45);
  background: rgba(0,0,0,.28);
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) auto;
  gap: 10px;
  align-items: center;
}

.rt-add-track-panel strong {
  display: block;
  color: var(--rt-yellow);
  letter-spacing: .12em;
}

.rt-add-track-panel span {
  display: block;
  color: var(--rt-muted);
  font-size: 11px;
  margin-top: 3px;
}

.rt-track-admin-block {
  border-color: rgba(95,252,255,.38);
}

.rt-track-admin-block .rt-note-controls {
  align-items: end;
}

.rt-master-box label {
  color: var(--rt-yellow);
}

@media (max-width: 780px) {
  .rt-add-track-panel {
    grid-template-columns: 1fr;
  }
}

/* Phase 2.15: inline add-track row + header track controls */
.rt-track-editor-head {
  align-items: flex-start;
}

.rt-editor-title-block {
  min-width: 0;
}

.rt-track-title-tools {
  display: grid;
  grid-template-columns: auto minmax(150px, 220px) 30px;
  gap: 6px;
  align-items: center;
  max-width: 420px;
}

.rt-track-title-tools label {
  color: var(--rt-cyan);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .1em;
  white-space: nowrap;
}

.rt-track-name-input {
  min-height: 30px;
  padding: 5px 7px;
  font-size: 12px;
}

.rt-track-remove-x {
  width: 30px;
  height: 30px;
  border: 2px outset rgba(255,255,255,.28);
  background: linear-gradient(180deg, #ff6b86, #a40023);
  color: #fff;
  font-family: var(--rt-mono);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
}

.rt-track-remove-x:disabled {
  opacity: .35;
  cursor: not-allowed;
  filter: grayscale(.9);
}

.rt-add-track-row .rt-add-track-cell {
  color: rgba(255,241,118,.22);
  background: rgba(255,241,118,.035);
}

.rt-add-track-label {
  overflow: visible;
  background: #210049 !important;
}

.rt-add-track-inline {
  position: relative;
  min-height: 34px;
  display: grid;
  place-items: center;
}

.rt-add-track-plus {
  width: 100%;
  min-height: 34px;
  border: 0;
  background: linear-gradient(180deg, #fff176, #ff4ff3);
  color: #09000f;
  font-family: var(--rt-mono);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  text-shadow: none;
}

.rt-add-track-plus:hover,
.rt-add-track-plus:focus-visible {
  filter: brightness(1.15);
  outline: 2px solid var(--rt-yellow);
}

.rt-add-track-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 3px);
  width: 140px;
  z-index: 25;
  border: 2px solid var(--rt-yellow);
  background: #05000d;
  box-shadow: 4px 4px 0 #000, 0 0 18px rgba(255,241,118,.22);
  padding: 4px;
}

.rt-add-track-inline.is-open .rt-add-track-menu {
  display: grid;
  gap: 3px;
}

.rt-add-track-menu-item {
  border: 1px solid rgba(95,252,255,.38);
  background: rgba(95,252,255,.12);
  color: var(--rt-text);
  font-family: var(--rt-mono);
  font-size: 11px;
  font-weight: bold;
  text-align: left;
  padding: 6px 7px;
  cursor: pointer;
}

.rt-add-track-menu-item:hover,
.rt-add-track-menu-item:focus-visible {
  background: var(--rt-line);
  color: #040008;
}

@media (max-width: 780px) {
  .rt-track-editor-head,
  .rt-track-title-tools {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rt-track-title-tools {
    max-width: none;
  }
}

/* Phase 2.16: compact top row and cleaner track editor */
.rt-editor-block-minimal {
  border: 0;
  background: transparent;
  padding: 0;
}

.rt-editor-block-minimal .rt-editor-tip {
  margin-top: 0;
}

.rt-inline-cell-control {
  min-width: 0;
}

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

/* Phase 2.17: cleaner shared track controls */
.rt-track-common {
  gap: 12px;
  padding: 10px;
}

.rt-track-common-row {
  gap: 12px;
}

.rt-track-common-row-main {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(150px, 180px);
  align-items: end;
}

.rt-track-common-row-effects {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  align-items: end;
}

.rt-range-label {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(95,252,255,.22);
  background: rgba(0,0,0,.18);
  padding: 8px 10px;
}

.rt-control-head {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.rt-control-head span {
  display: inline !important;
  margin: 0 !important;
}

.rt-control-head strong {
  display: inline-flex !important;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 44px;
  color: var(--rt-yellow);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .06em;
  text-align: right;
}

.rt-inline-cell-control {
  min-width: 0;
}

.rt-inline-cell-control:empty {
  display: block;
  visibility: hidden;
}

.rt-inline-cell-control .rt-range-label {
  height: 100%;
}

.rt-mute-label {
  justify-self: stretch;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 1px solid rgba(255,241,118,.35);
  background: rgba(255,241,118,.08);
  padding: 8px 10px;
  color: var(--rt-yellow) !important;
  font-size: 12px;
  letter-spacing: .08em;
}

.rt-mute-label span {
  display: inline !important;
  white-space: nowrap;
}

.rt-mute-label input {
  width: 20px;
  height: 20px;
  accent-color: var(--rt-red);
}

@media (max-width: 780px) {
  .rt-track-common-row-main,
  .rt-track-common-row-effects {
    grid-template-columns: 1fr;
  }

  .rt-inline-cell-control:empty {
    display: none;
  }

  .rt-mute-label {
    justify-content: flex-start;
  }
}

/* Phase 2.18: cleaner published song list and side publish button */
.rt-publish-side-button {
  width: 100%;
  margin: 4px 0 10px;
  min-height: 42px;
}

.rt-published-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.28);
  padding: 8px;
}

.rt-published-name {
  min-width: 0;
  color: #fff;
  font-family: var(--rt-mono, "Courier New", Courier, monospace);
  line-height: 1.2;
}

.rt-published-name strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rt-yellow);
  font-size: 12px;
  letter-spacing: .04em;
}

.rt-published-name span {
  display: block;
  margin-top: 4px;
  color: var(--rt-muted);
  font-size: 10px;
  font-weight: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* Phase 2.23 drag / paint editing */
.rt-cell-button {
  touch-action: none;
  user-select: none;
}
.rt-cell-button.is-drag-source {
  outline: 3px solid #ffff33;
  filter: brightness(1.25);
}
.rt-cell-button.is-drag-target {
  outline: 3px dashed #63ff9a;
}
.rt-cell-button.is-drag-reject {
  outline: 3px dashed #ff3b7f;
}
.rt-cell-button.is-painting-cell {
  box-shadow: 0 0 16px rgba(255, 245, 79, .95), inset 0 0 8px rgba(255,255,255,.45);
}


/* Phase 2.26: visible inline add-track chooser */
.rt-add-track-row.is-open .rt-add-track-cell {
  background: rgba(255,241,118,.07);
}

.rt-add-track-plus {
  display: block;
}

.rt-add-track-row.is-open .rt-add-track-plus {
  background: linear-gradient(180deg, #ff8aa8, #ff3860);
  color: #05000d;
}

.rt-add-track-choice {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255,241,118,.75);
  background: linear-gradient(180deg, rgba(95,252,255,.95), rgba(102,255,153,.92));
  color: #05000d;
  font-family: var(--rt-mono);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
  cursor: pointer;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 2px 2px 0 #000;
  padding: 5px 3px;
  white-space: normal;
}

.rt-add-track-choice:hover,
.rt-add-track-choice:focus-visible {
  background: linear-gradient(180deg, #fff176, #ff4ff3);
  outline: 2px solid var(--rt-yellow);
  outline-offset: -2px;
}

.rt-add-track-hint {
  color: var(--rt-yellow) !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: left !important;
  padding-left: 10px;
  background: rgba(255,79,243,.10) !important;
}

.rt-add-track-menu { display: none !important; }

/* Phase 2.31: track reorder, track actions and undo UI cleanup */
.rt-track-title-tools {
  grid-template-columns: auto minmax(160px, 260px);
  max-width: 480px;
}

.rt-track-common-row-main {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
}

.rt-track-action-row {
  grid-template-columns: minmax(150px, 190px) repeat(3, auto);
  align-items: stretch;
}

.rt-track-action-row .rt-mini-button {
  min-height: 44px;
  white-space: nowrap;
}

.rt-track-action-row .rt-mute-label {
  min-height: 44px;
  justify-self: stretch;
}

.rt-channel-label.is-track-drag-source {
  outline: 3px solid var(--rt-yellow);
  box-shadow: inset 0 0 14px rgba(255,241,118,.42), 0 0 12px rgba(255,241,118,.2);
}

.rt-channel-label.is-track-drag-over {
  outline: 3px dashed var(--rt-pink);
  box-shadow: inset 0 0 14px rgba(255,79,243,.34), 0 0 12px rgba(255,79,243,.22);
}

.rt-channel-label-button[draggable="true"] {
  cursor: grab;
}

.rt-channel-label-button[draggable="true"]:active {
  cursor: grabbing;
}

@media (max-width: 780px) {
  .rt-track-common-row-main,
  .rt-track-action-row {
    grid-template-columns: 1fr;
  }

  .rt-track-action-row .rt-mini-button,
  .rt-track-action-row .rt-mute-label {
    width: 100%;
  }
}


/* Phase 2.34: WAV render status */
.rt-download-button.is-rendering-wav {
  background: var(--rt-yellow);
  color: #1a0040;
  cursor: progress;
  animation: rtWavBlink .7s steps(2, start) infinite;
}

body.rt-wav-rendering .rt-log {
  border-color: var(--rt-yellow);
  color: var(--rt-yellow);
  animation: rtWavPulse .9s linear infinite;
}

@keyframes rtWavBlink {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

@keyframes rtWavPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,255,0,0); }
  50% { box-shadow: 0 0 18px rgba(255,255,0,.55); }
}

/* Phase 2.36 collapsible categorized ROI FX library */
.rt-fx-category {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(95,252,255,.28);
  background: rgba(0,0,0,.18);
  padding: 7px;
}

.rt-fx-category-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  color: var(--rt-dark);
  background: var(--rt-yellow);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(255,241,118,.18);
}

.rt-fx-category-title:hover,
.rt-fx-category-title:focus-visible {
  filter: brightness(1.08);
  outline: 1px solid rgba(255,255,255,.45);
}

.rt-fx-category-caret {
  flex: 0 0 auto;
  min-width: 1.2em;
  font-size: 13px;
  line-height: 1;
}

.rt-fx-category-body {
  display: grid;
  gap: 7px;
}

.rt-fx-category.is-closed .rt-fx-category-body {
  display: none;
}

.rt-fx-row,
.rt-fx-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(255,79,243,.45);
  background: rgba(0,0,0,.28);
  padding: 8px;
}

.rt-fx-row.is-selected,
.rt-fx-item.is-selected {
  border-color: var(--rt-yellow);
  box-shadow: 0 0 14px rgba(255,241,118,.2);
}

@media (max-width: 780px) {
  .rt-fx-row,
  .rt-fx-item {
    grid-template-columns: 1fr;
  }
}


/* Phase 2.38: per-track ROI FX workflow */
.rt-add-track-choice.is-roi-fx-choice {
  min-width: 100%;
  min-height: 44px;
  background: linear-gradient(135deg, #fff176 0%, #ff4ff3 48%, #5ffcffff 100%);
  color: #080014;
  border-color: #fff176;
  font-size: 11px;
  letter-spacing: .05em;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.28), 0 0 16px rgba(255,79,243,.35), 2px 2px 0 #000;
}
.rt-add-track-choice.is-roi-fx-choice::before {
  content: '★ ';
}
.rt-fx-row.is-selected {
  outline: 2px solid var(--rt-yellow);
  background: rgba(255,241,118,.14);
}

/* Phase 2.39: larger ROI FX add button, pan/delay controls, FX sample processing */
.rt-track-common-row-main {
  grid-template-columns: minmax(180px, 1fr) minmax(160px, .8fr) minmax(220px, 1fr);
}

.rt-track-common-row-effects {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  align-items: stretch;
}

.rt-follow-bpm-label {
  min-height: 58px;
  font-size: 10px;
  letter-spacing: .06em;
}

.rt-fx-processing-grid {
  margin-top: 10px;
  grid-template-columns: minmax(145px, .75fr) minmax(180px, 1fr);
}

.rt-fx-processing-grid label {
  color: var(--rt-yellow);
}

.rt-add-track-choice.is-roi-fx-choice {
  min-width: calc(200% + 8px);
  width: calc(200% + 8px);
  font-size: 12px;
}

.rt-add-track-cell[colspan="2"] .rt-add-track-choice.is-roi-fx-choice {
  width: 100%;
  min-width: 100%;
}

@media (max-width: 1200px) {
  .rt-track-common-row-effects {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  .rt-track-common-row-main,
  .rt-track-common-row-effects,
  .rt-fx-processing-grid {
    grid-template-columns: 1fr;
  }
}


/* Phase 2.40: cleaner mixer rows, FX processor labels and collapsed help */
.rt-track-common-row-main {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) minmax(220px, 1fr);
  align-items: stretch;
}

.rt-track-common-row-effects {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: stretch;
}

.rt-inline-cell-control:empty {
  display: none !important;
}

.rt-fx-processing-grid label {
  display: flex !important;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.rt-fx-processing-grid label span {
  display: inline !important;
  margin: 0 !important;
}

.rt-help-panel {
  padding: 0;
}

.rt-help-details {
  padding: 12px;
}

.rt-help-details summary {
  cursor: pointer;
  list-style: none;
  color: var(--rt-yellow);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 2px 2px #000;
}

.rt-help-details summary::-webkit-details-marker {
  display: none;
}

.rt-help-details summary::before {
  content: '+ ';
  color: var(--rt-cyan);
}

.rt-help-details[open] summary::before {
  content: '- ';
}

.rt-help-content {
  margin-top: 10px;
}

@media (max-width: 1200px) {
  .rt-track-common-row-main,
  .rt-track-common-row-effects {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  .rt-track-common-row-main,
  .rt-track-common-row-effects {
    grid-template-columns: 1fr;
  }
}

/* Phase 2.41: compact long track labels + ROI FX chord editor */
.rt-channel-label-button {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.12;
  max-height: 3.1em;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  word-break: break-word;
}

.rt-tracker td,
.rt-tracker th {
  height: 54px;
}

.rt-chord-editor {
  margin-top: 12px;
  padding: 10px;
  border: 2px dashed rgba(255, 241, 118, .55);
  background: rgba(255, 241, 118, .06);
}

.rt-chord-editor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--rt-yellow);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.rt-chord-editor-head span {
  color: var(--rt-cyan);
  font-size: 12px;
  text-align: right;
}

.rt-chord-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(42px, 1fr));
  gap: 4px;
}

.rt-chord-note {
  min-height: 30px;
  border: 1px solid rgba(95, 252, 255, .38);
  background: rgba(0, 0, 0, .35);
  color: var(--rt-cyan);
  font-family: var(--rt-mono);
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
}

.rt-chord-note:hover,
.rt-chord-note:focus-visible {
  border-color: var(--rt-yellow);
  color: var(--rt-yellow);
  outline: none;
}

.rt-chord-note.is-on {
  background: linear-gradient(180deg, #fff67c, #ff4ff3);
  color: #05000d;
  border-color: var(--rt-yellow);
  box-shadow: 0 0 12px rgba(255, 79, 243, .38);
}

@media (max-width: 980px) {
  .rt-chord-grid {
    grid-template-columns: repeat(6, minmax(42px, 1fr));
  }
}

@media (max-width: 560px) {
  .rt-chord-grid {
    grid-template-columns: repeat(4, minmax(42px, 1fr));
  }
}


/* Phase 2.43: strict channel label clamp + cell chord display tuning */
.rt-channel-label,
.rt-tracker td.rt-channel-label {
  width: 150px;
  max-width: 150px;
  height: 58px !important;
  max-height: 58px !important;
  overflow: hidden;
  vertical-align: middle;
}

.rt-channel-label-button {
  height: 58px !important;
  max-height: 58px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.15 !important;
  padding: 7px 5px !important;
}

.rt-cell-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.1;
}


/* Phase 2.44: hard clamp channel labels to two lines. */
.rt-tracker td.rt-channel-label,
.rt-channel-label {
  height: 58px !important;
  max-height: 58px !important;
  min-height: 58px !important;
  overflow: hidden !important;
}

.rt-channel-label-button {
  height: 58px !important;
  max-height: 58px !important;
  min-height: 58px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 6px !important;
  line-height: 1.1 !important;
}

.rt-channel-label-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  max-height: 2.3em !important;
  line-height: 1.1 !important;
}


/* Phase 2.45: lock tracker row/cell heights so channel labels do not grow taller than sound cells. */
.rt-tracker {
  table-layout: fixed;
}

.rt-tracker tbody tr {
  height: 58px !important;
  max-height: 58px !important;
}

.rt-tracker tbody td,
.rt-tracker tbody th,
.rt-tracker td.rt-cell,
.rt-tracker td.rt-channel-label {
  height: 58px !important;
  max-height: 58px !important;
  min-height: 58px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

.rt-cell-button,
.rt-channel-label-button {
  height: 58px !important;
  max-height: 58px !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
}

.rt-cell-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 5px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rt-cell-button.is-fx,
.rt-cell-button.is-note {
  font-size: 11px !important;
}

.rt-channel-label-button {
  padding: 4px 5px !important;
}

.rt-channel-label-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 2.2em !important;
  line-height: 1.1 !important;
}

.rt-add-track-label,
.rt-add-track-cell {
  height: 58px !important;
  max-height: 58px !important;
}


/* Phase 2.46: compact tracker row height, restore tighter 34px grid while keeping labels clamped. */
.rt-tracker tbody tr {
  height: 34px !important;
  max-height: 34px !important;
}

.rt-tracker tbody td,
.rt-tracker tbody th,
.rt-tracker td.rt-cell,
.rt-tracker td.rt-channel-label {
  height: 34px !important;
  max-height: 34px !important;
  min-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

.rt-cell-button,
.rt-channel-label-button {
  height: 34px !important;
  max-height: 34px !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
}

.rt-cell-button {
  padding: 1px 4px !important;
  line-height: 1 !important;
  font-size: 10px !important;
}

.rt-cell-button.is-fx,
.rt-cell-button.is-note {
  font-size: 10px !important;
  line-height: 1 !important;
}

.rt-channel-label-button {
  padding: 1px 5px !important;
  line-height: 1 !important;
  font-size: 11px !important;
}

.rt-channel-label-text {
  max-height: 2em !important;
  line-height: 1 !important;
  font-size: 11px !important;
}

.rt-add-track-label,
.rt-add-track-cell {
  height: 34px !important;
  max-height: 34px !important;
  min-height: 34px !important;
}

.rt-add-track-plus {
  min-height: 34px !important;
  height: 34px !important;
}