*{box-sizing:border-box} :root{--bg:#0b1020;--panel:#141c31;--panel2:#10182a;--line:#293651;--text:#f2f5ff;--muted:#9aa8c3;--accent:#7c6cff;--cyan:#39d7c5;--red:#ff627d}body{margin:0;background:radial-gradient(ellipse at 20% 0%,#18254a 0,transparent 42%),var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}.topbar{padding:20px clamp(16px,4vw,52px);display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:1px solid var(--line);background:#0b1020d9;position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand,.transport,.section-heading,.track-actions,.piano-toolbar,.pad-controls,.track-footer,.seq-legend,.export-card{display:flex;align-items:center;gap:12px}.brand-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,var(--accent),#38c9d9);display:grid;place-items:center;font-size:28px;font-weight:800}.brand h1{font-size:20px;margin:0 0 4px}.brand p,.section-heading p,.export-card p{margin:0;color:var(--muted);font-size:12px}.transport{flex-wrap:wrap;justify-content:flex-end}.transport label,.piano-toolbar label,.pad-controls label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.transport input,.transport select,.piano-toolbar select{width:auto;min-width:66px}input,select,button,.file-button{font:inherit;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#0e1629;color:var(--text)}input[type=range]{padding:0;accent-color:var(--accent)}button,.file-button{cursor:pointer;transition:.15s ease}button:hover,.file-button:hover{border-color:var(--accent);transform:translateY(-1px)}button.primary{background:linear-gradient(135deg,#6f5cff,#8a5cff);border:0;font-weight:700}.record{color:#ffb2bf;border-color:#73384b;background:#2a1524}.record.active{background:var(--red);color:#180b13;box-shadow:0 0 20px #ff627d55}.quiet{background:transparent}.status{font-size:12px;color:var(--cyan);min-width:56px}main{max-width:1440px;margin:auto;padding:26px clamp(14px,3vw,40px);display:grid;gap:20px}.panel{border:1px solid var(--line);background:linear-gradient(145deg,#151e34f5,#10182bf5);border-radius:18px;padding:22px;box-shadow:0 12px 40px #0002}.section-heading{justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:20px}.section-heading h2{margin:5px 0 6px;font-size:21px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--cyan);font-weight:800}.track-actions{flex-wrap:wrap}.piano-toolbar{flex-wrap:wrap;margin-bottom:15px}.volume{min-width:150px}.hint{font-size:11px;color:var(--muted)}.piano{height:190px;display:flex;position:relative;overflow:hidden;border-radius:10px;background:#070b14;user-select:none}.piano-key{position:relative;flex:1;min-width:0;border:1px solid #aab3c3;border-top:0;border-radius:0 0 6px 6px;background:linear-gradient(#fff,#dce3ee);color:#293247;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-size:11px;box-shadow:inset 0 -4px 0 #bbc5d4}.piano-key.black{z-index:2;flex:none;width:4.1%;height:62%;margin-left:-2.05%;margin-right:-2.05%;background:linear-gradient(#33394d,#101625);border:1px solid #080b12;color:#e8ecf7;border-radius:0 0 5px 5px;box-shadow:inset 0 -4px 0 #05070c}.piano-key.active{background:var(--cyan)!important;color:#09151a!important;box-shadow:0 0 22px #39d7c577}.piano-key.black.active{background:#3ce5d2!important}.track-footer{justify-content:space-between;margin-top:13px;font-size:12px;color:var(--muted)}.pad-controls{flex-wrap:wrap;margin-bottom:16px}.pad-controls input[type=file]{max-width:260px;padding:6px}.pads{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:12px}.pad{min-height:110px;border-radius:15px;border:1px solid #3a4562;background:linear-gradient(145deg,#242e4c,#141c30);display:flex;flex-direction:column;justify-content:space-between;text-align:left;padding:14px;position:relative;overflow:hidden}.pad:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,var(--padcolor,#7c6cff)33,transparent 60%);opacity:.25;pointer-events:none}.pad.selected{border:2px solid var(--cyan);box-shadow:0 0 0 2px #39d7c522}.pad:active,.pad.hit{transform:scale(.98);background:#30405e}.pad .pad-number{font-size:10px;color:var(--muted);letter-spacing:1px}.pad strong{font-size:16px;position:relative}.pad small{font-size:11px;color:var(--muted);position:relative}.pad .pad-light{width:8px;height:8px;border-radius:50%;background:var(--padcolor,#7c6cff);box-shadow:0 0 12px var(--padcolor,#7c6cff);position:absolute;right:14px;top:14px}.seq-legend{font-size:12px;color:var(--muted);flex-wrap:wrap;margin:-4px 0 14px}.legend{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}.piano-legend{background:var(--accent)}.pads-legend{background:var(--cyan)}.seq-wrap{overflow-x:auto}.seq-row{display:grid;grid-template-columns:100px repeat(var(--steps),minmax(20px,1fr));gap:4px;align-items:center;margin:5px 0;min-width:680px}.seq-label{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step{height:25px;padding:0;border-radius:5px;background:#0c1324;border:1px solid #28334c;min-width:0}.step.bar-start{border-left:2px solid #7886a5}.step.on.piano-step{background:var(--accent);border-color:#a9a0ff}.step.on.pad-step{background:var(--cyan);border-color:#9df4e9}.step.playhead{outline:2px solid #fff;outline-offset:1px}.export-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.export-card{align-items:center;padding:14px;border:1px solid var(--line);border-radius:13px;background:#0e1628;flex-wrap:wrap}.export-card>div:nth-child(2){flex:1;min-width:100px}.export-card strong{font-size:13px}.export-card p{margin-top:5px;line-height:1.5}.export-icon{width:38px;height:38px;border-radius:11px;background:#262249;color:#b6adff;display:grid;place-items:center;font-size:20px}.export-card button,.file-button{font-size:12px;padding:8px 10px}.file-button input{display:none}.note{font-size:11px;line-height:1.6;color:var(--muted);margin:16px 0 0}footer{text-align:center;padding:20px;color:#64718d;font-size:11px;border-top:1px solid var(--line)}@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.transport{justify-content:flex-start}.export-cards{grid-template-columns:1fr}.panel{padding:16px}.section-heading{align-items:flex-start}.piano{height:155px}}@media(max-width:500px){.pads{grid-template-columns:repeat(2,minmax(0,1fr))}.track-actions{width:100%}.track-actions button{flex:1}.piano-key{font-size:9px}.piano-key.black{width:5%;margin-left:-2.5%;margin-right:-2.5%}}


/* Sequencer mit 16 Pads */

.seq-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

#sequencer {
  width: 100%;
  height: auto;
  max-height: none;
}

#sequencer .seq-row {
  display: grid;
  grid-template-columns:
    100px repeat(var(--steps), minmax(20px, 1fr));
  gap: 4px;
  align-items: center;
  min-width: 680px;
  width: max-content;
  margin: 5px 0;
}

#sequencer .step {
  min-width: 20px;
  height: 25px;
  padding: 0;
}

/* Virtuelles Piano unabhängig vom Sequencer halten */
#piano {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
}

/* Sequencer darf horizontal scrollen */
#sequencer {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  box-sizing: border-box;
}

/* Übergeordnete Layout-Container begrenzen */
main,
section,
.panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#stopBtn {
  display: none !important;
}


/* Individueller Step-Effekt-Editor */

#stepEffectsDialog[hidden] {
  display: none !important;
}

#stepEffectsDialog {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.step-effects-panel {
  width: min(440px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #172033;
  color: #ffffff;
  border: 1px solid #526079;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 20px 60px #0009;
  display: grid;
  gap: 15px;
}

.step-effects-panel h3 {
  margin: 0 0 5px;
  font-size: 19px;
}

.step-effects-panel label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  color: #dce6f5;
}

.step-effects-panel output {
  color: #39d7c5;
  font-weight: bold;
}

.step-effects-panel input[type="range"] {
  width: 100%;
  accent-color: #39d7c5;
}

.step-effects-panel hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #526079;
}

.step-effects-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.step-effects-actions button {
  flex: 1;
  min-width: 100px;
  padding: 10px;
  font-weight: bold;
}

#stepEffectsSave {
  background: #168b80;
}

#stepEffectsReset {
  background: #43546c;
}

#stepEffectsCancel {
  background: #713945;
}

#stepNoteLengthRow[hidden] {
  display: none !important;
}

#effect_noteLength {
  width: 100%;
  padding: 10px;
  background: #0e1629;
  color: #fff;
  border: 1px solid #526079;
  border-radius: 8px;
}

/* Smartphone: Hauptleiste dauerhaft sichtbar */
@media screen and (max-width: 900px) {
  html,
  body {
    overflow-x: clip;
  }

  header.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 99999 !important;
    transform: none !important;
  }

  body {
    padding-top: var(--mobile-topbar-height, 0px);
  }
}

@media screen and (max-width: 900px) {
  header.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483647 !important;
    background: #b00050 !important;
  }
}

/* Smartphone: kompakte Hauptleiste */
@media screen and (max-width: 900px) {

  header.topbar {
    padding: 6px 10px !important;
    gap: 5px !important;
    align-items: stretch !important;
  }

  header.topbar .brand {
    display: none !important;
  }

  header.topbar .transport {
    gap: 5px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  header.topbar .transport button,
  header.topbar .transport input,
  header.topbar .transport select {
    padding: 4px 6px;
    font-size: 11px;
  }

  header.topbar #stepSelectionControls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box;
  }

  header.topbar #stepSelectionControls button {
    min-width: 0 !important;
    min-height: 27px !important;
    padding: 4px 3px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  #stepSelectionToggle {
    grid-column: 1;
    grid-row: 1;
  }

  #stepSelectionClear {
    grid-column: 2;
    grid-row: 1;
  }

  #multiStepCopy {
    grid-column: 1;
    grid-row: 2;
  }

  #multiStepPaste {
    grid-column: 2;
    grid-row: 2;
  }

  header.topbar #stepSelectionCount {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: center;
    font-size: 9px !important;
    line-height: 1 !important;
  }
}

/* Smartphone: REC links neben BPM */
@media screen and (max-width: 900px) {
  .topbar .transport {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  .topbar .transport #sequenceRecButton {
    padding: 3px 6px !important;
    min-width: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .topbar .transport .bpm-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }

  .topbar .transport #bpm {
    width: 48px !important;
  }
}

/* =========================================
   V1.0 – SEQUENCER IMPROVEMENTS
   ========================================= */

/* Clearly mark the beginning of each bar */
#sequencer .step.measure-start {
  border-left: 3px solid #ff4055 !important;
  box-shadow: -2px 0 5px rgba(255, 64, 85, 0.35);
}

/* Keep piano notes and pad names visible */
#sequencer .seq-label {
  position: sticky;
  left: 0;
  z-index: 10;

  background: #172033;
  color: #ffffff;

  padding: 5px 7px;
  border-radius: 5px;
  border-right: 2px solid #39d7c5;

  font-weight: 600;
  white-space: nowrap;
}

/* Keep the sequencer horizontally scrollable */
#sequencer {
  overflow-x: auto;
}

/* Ensure the row spans all sequencer steps */
#sequencer .seq-row {
  position: relative;
}

/* =========================================
   V1.0 – INDIVIDUAL DRUM PAD MUTE
   ========================================= */

#sequencer .seq-label:has(.pad-row-mute) {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pad-row-mute {
  width: 22px;
  min-width: 22px;
  height: 21px;

  padding: 0;
  border: 1px solid #526079;
  border-radius: 5px;

  background: #25344c;
  color: #ffffff;

  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
}

.pad-row-mute.muted {
  background: #c62828;
  border-color: #ff5252;
  color: #ffffff;
}

.pad-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pad-row-name.muted {
  opacity: 0.35;
  text-decoration: line-through;
}

/* =========================================
   MOBILE – STEP EFFECT WINDOW SPACING
   ========================================= */

@media screen and (max-width: 900px) {

  #stepEffectsDialog {
    padding-top: calc(
      var(--mobile-topbar-height, 0px) + 16px
    );
    align-items: flex-start;
  }

  #stepEffectsDialog .step-effects-panel {
    max-height: calc(
      100dvh - var(--mobile-topbar-height, 0px) - 32px
    );
    overflow-y: auto;
  }

}
/* v2.0: independent instrument track selector and ghost notes */
.v2-track-switcher,.v2-instrument-panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;margin:10px 0;background:#172033;border:1px solid #34435d;border-radius:10px}
.v2-track-switcher button.active{background:#6656d9;border-color:#9d91ff;color:white;font-weight:700}
.v2-track-switcher button:disabled{opacity:.4;cursor:not-allowed}
.v2-instrument-panel label{display:flex;align-items:center;gap:5px;font-size:12px}
.v2-instrument-panel input[type=range]{width:100px}
#sequencer .step.ghost-note{background:rgba(124,108,255,.23);border-color:rgba(124,108,255,.35)}

/* v2.0 phase 2 – one live instrument selector for piano keys, recording and WAV upload */
.v2-live-switcher{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:12px;margin:0 0 12px;background:#172033;border:1px solid #34435d;border-radius:10px;font-size:12px}
.v2-live-switcher button.active{background:#6656d9;border-color:#a89cff;color:white;font-weight:700}
.v2-live-switcher button:disabled{opacity:.4;cursor:not-allowed}
#liveInstrumentStatus{color:#39d7c5;overflow-wrap:anywhere}
#liveInstrumentRecStatus{padding:5px 8px;border-radius:6px;background:#26344b}
#liveInstrumentRecStatus.recording{background:#b5223b;color:white;font-weight:700}
#pianoSampleControls[hidden],.v2-instrument-panel[hidden]{display:none!important}

.v2-live-switcher #liveRecordButton.recording{background:#c62843;color:#fff;border-color:#ff627d;font-weight:700}

/* v2 phase 6: first instrument mute */
#firstMute.muted{background:#b5223b;color:#fff;border-color:#ff637d}

/* Instrument 2 mute state: override any inherited button backgrounds. */
#sequencerInstrument2Mute[data-muted="true"]{background:#dc2626!important;background-color:#dc2626!important;}
#sequencerInstrument2Mute[data-muted="false"]{background:#15803d!important;background-color:#15803d!important;}

/* Phase 15: same neutral / red mute appearance as Instrument 1. */
#secondMute.muted { background:#b5223b; color:#fff; border-color:#ff637d; }

/* Clear Sequence scope selector */
.clear-sequence-label{font-size:12px;color:var(--muted)}
#clearSequenceScope{max-width:240px;font-size:12px}

/* Phase 19: keep Mute 2 directly after the WAV filename, matching Instrument 1. */
.v2-instrument-panel #secondMute{margin-left:0}

/* v2.1 Phase 1 */
.loop-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.loop-buttons button{min-height:55px;font-weight:700}
.loop-buttons button.active{border-color:#39d7c5;background:#213e50}
.loop-editor-shell[hidden]{display:none!important}
.loop-editor-shell{position:fixed;inset:0;z-index:10000;background:#0b1020;overflow:auto;padding:20px max(12px,calc((100vw - 1380px)/2)) 40px}
.loop-editor-top{position:sticky;top:0;z-index:20;background:#10182a;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border:1px solid #293651;border-radius:12px;margin-bottom:14px}
.loop-editor-top h2{margin:0;font-size:20px}
#loopEditorContent{display:grid;gap:16px}
#loopEditorContent>.panel{margin:0}
#loopEditorContent>#sequenceRecButton{justify-self:start;background:#a51f42;color:white;font-weight:bold}
body.loop-editor-open{overflow:hidden}
#loopEditor .pads{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:800px){.loop-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}#loopEditor .pads{grid-template-columns:repeat(2,minmax(0,1fr))}.loop-editor-shell{padding:8px}.loop-editor-top{top:0}}
body.loop-editor-open .topbar{display:none!important}
body.loop-editor-open{padding-top:0!important}

/* v2.1 Phase 3 arrangement */
.arr-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}.arr-controls label{display:flex;align-items:center;gap:6px;font-size:12px;color:#b5c4db}.arr-controls input{width:78px}.arr-scroll{overflow-x:auto}.arr-timeline-row,.arr-track{display:flex;align-items:center;gap:8px;margin-bottom:5px;min-width:650px}.arr-track-name{width:76px;flex:none;font-size:11px;color:#b9c9dd}.arr-timeline,.arr-lane{position:relative;flex:1;min-width:0}.arr-timeline{height:28px;background:#19243b;cursor:crosshair;border-radius:5px}.arr-timeline>span{position:absolute;top:3px;font-size:10px;color:#b7c6d9;transform:translateX(-25%)}#arrCursor{position:absolute;top:0;bottom:-260px;width:2px;background:#ff637d;z-index:3;pointer-events:none}.arr-lane{height:39px;border-radius:5px;background:repeating-linear-gradient(90deg,#18233a 0,#18233a calc(12.5% - 1px),#40506c calc(12.5% - 1px),#40506c 12.5%);border:1px solid #33425b}.arr-clip{position:absolute;top:3px;bottom:3px;border-radius:5px;border:1px solid #ffffff66;color:white;font-size:11px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px;touch-action:none;cursor:grab;z-index:2}.arr-clip:active{cursor:grabbing}.arrangement-panel .hint{line-height:1.5}

/* v2.1 Loop editor transport */
.loop-editor-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#loopEditorPlay{min-width:100px}

/* Phase 4 */
.arr-audio-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.arr-import-label{cursor:pointer;border:1px solid #526079;padding:9px 12px;border-radius:9px;background:#1b2a40}.arr-import-label input{display:none}.arr-audio-lane{min-height:40px}.arr-audio-clip{background:#147b6f!important;color:white!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arr-timeline{position:relative}.arr-range-marker{position:absolute;top:0;z-index:15;transform:translateX(-50%);background:#f2c14e!important;color:#111!important;border:1px solid #fff!important;padding:2px 5px!important;font-size:10px!important;cursor:ew-resize;touch-action:none;min-width:25px;height:24px}.arr-range-marker#arrOutMarker{background:#f27a66!important}

/* Phase 4.1: clearly show the selected IN–OUT range across the song. */
.arrangement-panel{--arr-in-pct:0%;--arr-out-pct:100%}
.arrangement-panel .arr-timeline{
  background:linear-gradient(to right,
    #101827 0%,#101827 var(--arr-in-pct),
    #245e66 var(--arr-in-pct),#245e66 var(--arr-out-pct),
    #101827 var(--arr-out-pct),#101827 100%);
}
.arrangement-panel .arr-lane::before,
.arrangement-panel .arr-lane::after{
  content:"";position:absolute;top:0;bottom:0;z-index:4;pointer-events:none;
  background:rgba(3,7,18,.62);
}
.arrangement-panel .arr-lane::before{left:0;width:var(--arr-in-pct)}
.arrangement-panel .arr-lane::after{left:var(--arr-out-pct);right:0}
.arrangement-panel .arr-lane{box-shadow:inset 0 0 0 1px #ffffff12}
.arrangement-panel .arr-range-marker{z-index:20}
.arrangement-panel .arr-range-marker#arrInMarker{border-left:3px solid #fff!important}
.arrangement-panel .arr-range-marker#arrOutMarker{border-right:3px solid #fff!important}

/* Phase 4.3: Top Play is hidden; arrangement Play Song remains active. */
#playBtn { display: none !important; }

/* Phase 4.4: loop bars belong to the editor, not the global transport. */
.loop-editor-actions .loop-editor-bars {display:inline-flex;align-items:center;gap:8px;margin-right:8px;font-size:13px;}
.loop-editor-actions .loop-editor-bars select {min-width:90px;}

/* Phase 4.5: three selectable audio tracks and full-height song cursor */
.arr-scroll{position:relative}
#arrCursor{position:absolute;top:0;bottom:auto;height:0;width:2px;background:#ff4055;box-shadow:0 0 5px #ff405588;z-index:8;pointer-events:none}
.arr-track-select{display:block;text-align:left;padding:6px 3px;width:76px;min-width:76px;flex:none;font-size:10px;line-height:1.2;white-space:normal;border:1px solid transparent;background:transparent;color:#b9c9dd}
.arr-track-select.selected{border-color:#39d7c5;background:#176a64;color:white;font-weight:bold}
.arr-audio-track .arr-lane{min-height:40px}
.export-card:has(#wavPiano),.export-card:has(#wavPads){display:none!important}

/* Phase 4.6: timeline-anchored full-height playhead */
#arrTimeline{overflow:visible}
#arrTimeline #arrCursor{position:absolute!important;top:0!important;bottom:auto!important;left:0;width:3px!important;height:100px;display:block!important;background:#ff4055!important;box-shadow:0 0 7px #ff4055aa;z-index:40!important;pointer-events:none}
#loopEditor #stepSelectionControls{display:flex;flex-wrap:wrap;justify-content:flex-start;width:auto;max-width:100%;margin:10px 0 14px;padding:8px}
#loopEditor #stepSelectionControls button{min-height:34px}

/* Phase 4.7 */
.loop-editor-actions #stepSelectionControls{display:flex!important;align-items:center;flex-wrap:wrap;width:auto!important;max-width:100%;margin:0!important;padding:4px!important;gap:5px}
.loop-editor-actions #stepSelectionControls button{min-height:30px;font-size:11px}
#additionalEffectsDialog[hidden]{display:none!important}
#additionalEffectsDialog{position:fixed;inset:0;z-index:12000;background:#000b;display:flex;align-items:center;justify-content:center;padding:12px}
#additionalEffectsDialog .step-effects-panel{max-height:94vh;overflow:auto}
#additionalEffectsDialog input[type=text]{width:100%}

/* Phase 4.9: Loop Record in the header, immediately after Close Editor */
.loop-editor-actions #sequenceRecButton{display:inline-flex!important;align-items:center;justify-content:center;min-height:34px;padding:7px 14px!important;margin:0!important;white-space:nowrap}

/* Phase 4.10: ensure REC remains visible beside Close Editor */
#loopEditor .loop-editor-actions>#sequenceRecButton{display:inline-flex!important;visibility:visible!important;position:static!important;flex:0 0 auto;min-height:34px;white-space:nowrap}

/* Phase 4.11: Loop REC stays directly after Close Editor */
#loopEditor .loop-editor-actions > #sequenceRecButton { display:inline-flex!important;visibility:visible!important;position:static!important;min-height:34px;flex:0 0 auto; }

/* Phase 4.12: Song Pattern selection */
.arr-selection-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.arr-selection-toolbar button{font-size:12px;padding:8px 10px}
#arrSelectionToggle.active{background:#197d75;border-color:#56e7d7;color:white}
.arr-clip.song-selected{outline:3px solid #facc15!important;outline-offset:-2px;box-shadow:0 0 0 2px #fff9!important}
.arr-lane{position:relative;touch-action:pan-y}
.song-marquee{position:absolute;top:0;bottom:0;background:#39d7c544;border:1px solid #39d7c5;z-index:12;pointer-events:none}
.arr-selection-toolbar button:disabled{opacity:.45;cursor:default}

/* Phase 4.13: clear drag feedback, including touch devices. */
.arr-clip{touch-action:none;}
.arr-clip.song-drag-other-track{outline:3px solid #39d7c5;outline-offset:2px;opacity:.8;}

/* Phase 4.14: MIDI tools in loop editor */
#loopEditor .loop-editor-actions #loopMidiImport,#loopEditor .loop-editor-actions #loopMidiExport {white-space:nowrap;min-height:34px;background:#1d3550;border-color:#47728f;}
#loopEditor .loop-editor-actions #loopMidiTarget {max-width:150px;min-height:34px;font-size:12px;}

/* Phase 4.18 Mobile Scroll Fix: native horizontal swiping, vertical clip transfers. */
.arr-scroll {overflow-x:auto!important;overflow-y:hidden;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.arr-scroll .arr-lane {touch-action:pan-x!important;}
@media (pointer:coarse) {
  .arr-scroll .arr-clip {touch-action:pan-x!important;}
  .arr-scroll .arr-track,.arr-scroll .arr-timeline-row {min-width:900px;}
}

/* Phase 4.19: allow vertical page swipes on empty song lanes. */
.arrangement-panel .arr-scroll {touch-action:pan-x pan-y!important;overflow-x:auto!important;overflow-y:hidden!important;}
.arrangement-panel .arr-lane {touch-action:pan-x pan-y!important;}
.arrangement-panel .arr-track-name {touch-action:pan-y!important;}
.arrangement-panel .arr-timeline {touch-action:pan-x pan-y!important;}
.arrangement-panel .arr-range-ruler {touch-action:pan-x pan-y!important;}
/* Clip touch gestures keep their own horizontal swipe / vertical track movement behavior. */
@media (pointer:coarse) {.arrangement-panel .arr-clip {touch-action:pan-x!important;}}
/* Separate range controls from the playback cursor. */
.arrangement-panel .arr-range-row {margin-bottom:7px;}
.arrangement-panel .arr-position-row {margin-bottom:9px;}
.arrangement-panel .arr-range-ruler {position:relative;flex:1;min-width:0;height:34px;border-radius:5px;background:linear-gradient(90deg,#1c3042,#1b2840);border:1px solid #3c5670;}
.arrangement-panel .arr-range-ruler .arr-range-marker {top:4px!important;}
.arrangement-panel .arr-timeline {background:#19243b!important;}

/* Phase 4.20: preserve the horizontal centering when hovering IN/OUT. */
.arrangement-panel .arr-range-ruler .arr-range-marker,
.arrangement-panel .arr-range-ruler .arr-range-marker:hover,
.arrangement-panel .arr-range-ruler .arr-range-marker:focus,
.arrangement-panel .arr-range-ruler .arr-range-marker:active {
  transform:translateX(-50%) !important;
}
/* The OUT handle remains inside the ruler even at its maximum position. */
.arrangement-panel .arr-range-ruler #arrOutMarker {margin-left:-15px;}
.arrangement-panel .arr-range-ruler #arrInMarker {margin-left:15px;}


/* Phase 4.21: compact Loop Editor header on narrow screens.
   Selection controls stay functional; only sizing/layout changes. */
@media (max-width: 900px) {
  #loopEditor .loop-editor-top {padding:6px 8px;gap:5px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
  #loopEditor .loop-editor-top h2 {font-size:14px;line-height:1.2;margin:0;}
  #loopEditor .loop-editor-actions {gap:4px;flex:1 1 auto;min-width:0;justify-content:flex-start;}
  #loopEditor .loop-editor-actions #stepSelectionControls {
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;
    gap:3px!important;padding:3px!important;margin:0!important;
    width:auto!important;max-width:100%!important;flex:0 1 auto;
  }
  #loopEditor .loop-editor-actions #stepSelectionControls button {
    min-height:24px!important;padding:3px 5px!important;font-size:10px!important;
    line-height:1.15!important;border-radius:5px!important;white-space:nowrap;
  }
  #loopEditor .loop-editor-actions #stepSelectionCount {font-size:9px!important;line-height:1.15;white-space:nowrap;}
  #loopEditor .loop-editor-actions > button,
  #loopEditor .loop-editor-actions .loop-editor-bars select,
  #loopEditor .loop-editor-actions #loopMidiTarget {
    min-height:27px!important;padding:4px 6px!important;font-size:10px!important;line-height:1.2;
  }
  #loopEditor .loop-editor-actions .loop-editor-bars {gap:3px;margin-right:2px;font-size:10px;}
  #loopEditor .loop-editor-actions .loop-editor-bars select {min-width:60px;}
  #loopEditor .loop-editor-actions #sequenceRecButton {min-height:27px!important;padding:4px 7px!important;font-size:10px!important;}
}
@media (max-width: 520px) {
  #loopEditor .loop-editor-top {padding:5px 6px;}
  #loopEditor .loop-editor-actions #stepSelectionControls button {font-size:9px!important;padding:2px 4px!important;min-height:22px!important;}
  #loopEditor .loop-editor-actions #stepSelectionCount {font-size:8px!important;}
}

/* Phase 4.22: compact per-pad fill controls and responsive dialog */
.pad-row-fill{width:22px;min-width:22px;height:21px;padding:0;border:1px solid #3d9b8d;border-radius:5px;background:#145b59;color:#fff;font-size:10px;font-weight:700;cursor:pointer;flex-shrink:0}
.pad-row-fill:hover{background:#1b7770;transform:none}
#sequencer .seq-label:has(.pad-row-fill){gap:3px}
.pad-fill-overlay{position:fixed;inset:0;background:#000b;z-index:200000;display:flex;align-items:center;justify-content:center;padding:14px}
.pad-fill-panel{background:#172033;color:#f2f5ff;border:1px solid #526079;border-radius:14px;padding:18px;width:min(420px,100%);max-height:90dvh;overflow:auto;box-shadow:0 15px 50px #0008}
.pad-fill-panel h3{margin:0 0 8px}.pad-fill-panel p{font-size:12px;color:#aebcd2;margin:0 0 14px}
.pad-fill-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pad-fill-grid label{display:grid;gap:5px;font-size:12px}.pad-fill-grid select{width:100%;min-width:0}
.pad-fill-replace{display:flex;align-items:flex-start;gap:8px;font-size:12px;margin:15px 0}.pad-fill-replace input{margin:1px 0 0;flex-shrink:0}
#padFillPreview{font-size:12px;color:#39d7c5;margin:10px 0}.pad-fill-actions{display:flex;gap:10px;justify-content:flex-end}.pad-fill-actions button{flex:1}
@media(max-width:500px){.pad-fill-panel{padding:12px}.pad-fill-grid{gap:7px}.pad-row-fill{width:20px;min-width:20px}}

/* Phase 4.23: bar labels between instrument notes and drum pads. */
#sequencer .seq-bar-ruler { margin: 9px 0 8px; align-items:stretch; }
#sequencer .seq-bar-corner { display:flex;align-items:center;justify-content:flex-end; font-size:10px;font-weight:700;color:#9fb6d2; }
#sequencer .seq-bar-number { min-width:0;grid-row:1;display:flex;align-items:center;justify-content:center; height:24px;border-left:2px solid #ff4055;border-bottom:1px solid #526079;background:#1b3047;color:#e8f5ff;font-size:11px;font-weight:700;border-radius:3px; }

/* Phase 4.24: independent octave navigation and stacked note indicator */
#sequencer .seq-octave-nav{display:flex;gap:8px;align-items:center;justify-content:flex-start;position:sticky;left:0;width:max-content;max-width:100%;padding:5px 8px;margin-bottom:7px;background:#172033;border:1px solid #34435f;border-radius:8px;font-size:11px;color:#e4ebff;z-index:12}
#sequencer .seq-octave-nav button{padding:3px 9px;min-height:26px;font-weight:bold}
#sequencer .seq-octave-nav button:disabled{opacity:.35;cursor:default}
#sequencer .step{position:relative}
#sequencer .seq-octave-count{position:absolute;right:0;top:0;z-index:3;min-width:12px;height:13px;padding:0 2px;border-radius:4px;background:#fbbf24;color:#111827;font:bold 10px/13px Arial,sans-serif;pointer-events:none}

/* Phase 4.25: stacked note manager */
#sequencer .seq-octave-count{pointer-events:auto;cursor:pointer;min-width:16px;height:17px;line-height:17px}
.octave-notes-overlay{position:fixed;inset:0;background:#000b;z-index:12000;display:flex;align-items:center;justify-content:center;padding:16px}
.octave-notes-panel{width:min(460px,100%);max-height:85vh;overflow-y:auto;padding:20px;background:#172033;border:1px solid #526079;border-radius:14px;color:#fff;box-shadow:0 20px 60px #000a}
.octave-notes-panel h3{margin:0 0 6px}.octave-notes-subtitle{color:#b7c6df;font-size:12px}
.octave-notes-list{display:grid;gap:7px;margin:16px 0}
.octave-notes-item{display:flex;align-items:center;gap:8px;background:#0e1629;border-radius:8px;padding:8px;flex-wrap:wrap}
.octave-notes-item strong{margin-right:auto;min-width:48px}
.octave-notes-item button,.octave-notes-add button,.octave-notes-close{font-size:12px;padding:7px 9px}
.octave-notes-delete{border-color:#c44b62;color:#ffb3c2}
.octave-notes-add{display:flex;align-items:end;gap:9px;flex-wrap:wrap;margin-bottom:15px}
.octave-notes-add label{display:grid;gap:5px;font-size:12px}.octave-notes-close{width:100%}

/* Phase 4.26: tap-friendly note management; no piano long-press gesture. */
#sequencer .seq-octave-count{z-index:5}

/* Phase 4.27: direct duration control per octave note. */
.octave-notes-length{display:flex;align-items:center;gap:5px;font-size:12px;color:#cbd5e1}
.octave-notes-length select{min-width:112px;max-width:150px;padding:7px 5px;background:#0d1729;color:#fff;border:1px solid #566982;border-radius:6px}
#sequencer .step.piano-step{touch-action:pan-x pan-y}

/* Phase 4.28: stacked count is informational; tap/click the cell to remove notes. */
#sequencer .seq-octave-count{pointer-events:none;cursor:default}

/* Phase 4.30: touch-drag clips in both axes; scroll from empty lane space. */
@media (pointer:coarse) {
  .arrangement-panel .arr-scroll .arr-clip {touch-action:none!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  .arrangement-panel .arr-scroll .arr-lane {touch-action:pan-x pan-y!important;}
}

/* Phase 4.31 – vertical pitch transposition of copied piano notes. */
#stepPitchControls:not([hidden]){display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#stepPitchControls[hidden]{display:none!important}
#stepPitchOffset{min-width:36px;text-align:center;font-size:11px;color:#e4edff;font-weight:700}
#stepPitchControls .step-pitch-octave-toggle{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:#d5e3f5;white-space:nowrap;cursor:pointer}
#stepPitchControls .step-pitch-octave-toggle input{margin:0;width:14px;height:14px}

/* Phase 4.33: project actions and loop previews */
.project-start-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.project-start-actions button{font-weight:700;padding:11px 15px}
#startBlankProject{border-color:#55728b;background:#172b40}
.loop-buttons button{min-width:0;display:flex;flex-direction:column;gap:9px;align-items:stretch;text-align:left;min-height:126px;padding:11px;border:2px solid var(--loop-color,#526079);background:color-mix(in srgb,var(--loop-color,#526079) 18%,#111a2c);color:#fff}
.loop-buttons button.active{border-color:var(--loop-color,#39d7c5);background:color-mix(in srgb,var(--loop-color,#39d7c5) 35%,#111a2c);box-shadow:inset 0 0 0 1px #ffffff55}
.loop-card-title{font-size:13px;line-height:1.25;color:#fff}
.loop-card-pads{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%}
.loop-pad-chip{display:grid;place-items:center;min-width:0;border-radius:4px;padding:4px 0;font-size:11px;font-weight:700;border:1px solid #526079;background:#152037;color:#b3c0d4}
.loop-pad-chip.loaded{background:#227b75;color:white;border-color:#47d4c5}
.loop-card-instruments{display:flex;flex-direction:column;gap:3px;font-size:10px;line-height:1.3;font-weight:500;color:#e0e8f5;min-width:0}
.loop-card-instruments span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arr-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}
@media(max-width:800px){.loop-buttons button{padding:8px;gap:6px}.loop-card-title{font-size:12px}.loop-card-instruments{font-size:9px}.loop-pad-chip{font-size:10px}}

/* Phase 4.34: row effects and readable pad labels */
#sequencer .seq-row { grid-template-columns: 136px repeat(var(--steps),minmax(20px,1fr)); }
#sequencer .seq-label { min-width:0; box-sizing:border-box; }
#sequencer .seq-piano-label { display:flex; align-items:center; justify-content:space-between; gap:3px; }
#sequencer .seq-note-name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
#sequencer .seq-pad-label { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:3px; white-space:normal; padding-top:3px; padding-bottom:3px; }
#sequencer .seq-pad-controls { display:flex; align-items:center; gap:4px; }
#sequencer .pad-row-name { display:block; width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.25; font-size:10px; }
#sequencer .seq-row:has(.seq-pad-label) { min-height:43px; }
#sequencer .seq-row-eff { flex-shrink:0; width:30px; min-width:30px; height:21px; padding:0 2px; font-size:10px; font-weight:700; border-radius:5px; border:1px solid #9581dc; background:#3d3169; color:#fff; cursor:pointer; }
#sequencer .seq-row-eff:hover { background:#5c4a93; transform:none; }
#sequencer .seq-pad-label .pad-row-mute, #sequencer .seq-pad-label .pad-row-fill { flex-shrink:0; }

/* Phase 4.35: row delete button immediately to the right of Eff. */
#sequencer .seq-row { grid-template-columns: 155px repeat(var(--steps),minmax(20px,1fr)); }
#sequencer .seq-piano-label { justify-content:flex-start; }
#sequencer .seq-note-name { flex:1; }
#sequencer .seq-row-clear { flex-shrink:0; width:22px; min-width:22px; height:21px; padding:0; border:1px solid #fb7185; border-radius:5px; background:#a31d32; color:#fff; font-size:11px; font-weight:800; cursor:pointer; }
#sequencer .seq-row-clear:hover { background:#cf2945; transform:none; }
#sequencer .seq-pad-controls { gap:3px; }

/* Phase 4.36: make the editor close action unmistakable. */
#loopEditor .loop-editor-actions #closeLoopEditor { background:#b91c36 !important; border:1px solid #fb7185 !important; color:#fff !important; font-weight:700; }
#loopEditor .loop-editor-actions #closeLoopEditor:hover { background:#dc2947 !important; border-color:#ff9aa9 !important; }
/* Recover horizontal space for steps on narrow screens without shrinking text or controls. */
#sequencer .seq-row { grid-template-columns: 128px repeat(var(--steps),minmax(20px,1fr)); }
#sequencer .seq-label { padding-left:3px; padding-right:3px; }
#sequencer .seq-pad-controls { gap:3px; }
#sequencer .seq-piano-label { gap:2px; }
#sequencer .seq-pad-label .pad-row-name { font-size:10px; }

/* Phase 4.37: Hide legacy bottom example button; top button remains functional. */
#loadDefaultExampleBtn { display: none !important; }

/* Phase 4.38: compact track mixers and panning */
.arr-track-name{display:flex;flex-direction:column;align-items:stretch;gap:3px;justify-content:center}.song-track-mix{padding:3px 5px!important;font-size:10px!important;font-weight:700;background:#254b65!important;border:1px solid #4d9cba!important;color:#fff!important}.arr-track-with-mix>.arr-track-select{font-size:10px;padding:3px 1px;min-width:0}.arr-track-with-mix{display:flex;flex-direction:column}.song-mix-overlay{position:fixed;inset:0;z-index:1000;background:#000b;display:flex;justify-content:center;align-items:center;padding:15px}.song-mix-panel{background:#162039;border:1px solid #526586;border-radius:14px;padding:20px;max-height:92vh;overflow:auto;width:min(420px,100%);box-shadow:0 20px 70px #0009}.song-mix-panel h3{margin:0 0 8px}.song-mix-panel>label:not(.song-mix-check){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:12px;gap:7px;margin-top:12px}.song-mix-panel label input[type=range]{width:100%}.song-mix-panel output{color:#9be9f3}.song-mix-check{display:flex;align-items:center;gap:10px;margin-top:16px}.song-mix-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.instrument-pan-control,.pad-pan-label{display:flex;align-items:center;gap:8px;font-size:11px;color:#b5c4db;margin:5px 0 12px}.instrument-pan-control input{width:180px;max-width:55vw}.pad-pan-label{display:flex;flex-wrap:wrap;margin:0 0 4px;font-size:10px}.pad-pan-label input{width:100%;height:12px}.pad-mixer{min-width:0}
/* Phase 4.41 mix/pan automation editor */
#songMixDialog .mix-range-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#songMixDialog .mix-range-row label{min-width:0}
#songMixDialog .mix-range-row input{width:100%;box-sizing:border-box}
#songMixDialog .mix-region-list{max-height:115px;overflow:auto;padding:8px;border:1px solid #46536d;border-radius:8px;font-size:12px}
#songMixDialog .mix-region-list>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px}
#songMixDialog .mix-region-list button{font-size:11px;padding:3px 7px}
#songMixDialog .song-mix-panel{max-height:90dvh;overflow-y:auto}
#songMixDialog .song-mix-actions{flex-wrap:wrap}
.song-track-mix{white-space:nowrap;font-size:10px}

.group-fx-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px;margin:6px 0;background:#172033;border:1px solid #34455f;border-radius:8px;font-size:12px}.group-fx-toolbar select,.group-fx-toolbar button{padding:5px 7px;font-size:12px}.group-fx-list{color:#8de5dc;font-size:11px}.group-fx-overlay[hidden]{display:none!important}.group-fx-overlay{position:fixed;inset:0;background:#000b;z-index:12000;display:flex;align-items:center;justify-content:center;padding:12px}.group-fx-overlay #groupFxSliders{display:grid;gap:10px}.group-fx-overlay #groupFxSliders label{display:grid;gap:4px}.group-fx-overlay #groupFxSliders output{color:#39d7c5}.group-fx-overlay #groupFxSliders input{width:100%}

/* Phase 4.78: audio clips must be absolute timeline objects, not flow items.
   Subsequent clips previously inherited an extra offset from earlier clips. */
.arrangement-panel .arr-audio-lane > .arr-audio-clip {
  position:absolute !important;
  display:block;
  margin:0 !important;
  min-width:0 !important;
  max-width:none;
  transform:none;
  box-sizing:border-box;
}
.arrangement-panel .arr-audio-lane > .arr-audio-clip:hover {transform:none;}

/* Phase 4.79: loop clips use the same absolute, non-flow positioning as audio clips.
   Prevent accumulated offsets when multiple clips share a track. */
.arrangement-panel #arrangementGrid .arr-lane > .arr-clip {
  position:absolute !important;
  display:block;
  margin:0 !important;
  min-width:0 !important;
  max-width:none;
  transform:none;
  box-sizing:border-box;
}
.arrangement-panel #arrangementGrid .arr-lane > .arr-clip:hover {transform:none;}