* { box-sizing: border-box; }

:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #161616;
  background: #f3f3f3;
}

/* V113 – UI typography: the device's own system font (San Francisco on Apple,
   Roboto on Android, Segoe UI on Windows). Nothing to download or license. */
button,
input,
select,
textarea {
  font-family: inherit;
}

body {
  margin: 0;
  min-height: 100vh;
}

.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

header {
  margin-bottom: 22px;
}

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

h1 {
  margin-bottom: 4px;
}

.subtitle {
  color: #666;
}

.panel {
  background: white;
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}

.controls {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.25fr;
  gap: 16px;
}

.control label {
  display: block;
  font-weight: 700;
  margin-bottom: 7px;
}


input[type="range"] {
  width: 100%;
}

input[type="number"], select {
  min-height: 40px;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 7px 10px;
  background: white;
  font-size: 16px;
}

input[type="number"] {
  width: 78px;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.section-head p, .note {
  color: #666;
  font-size: 14px;
}

.rhythm-grid {
  display: grid;
  gap: 12px;
}

.bar {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.bar-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.steps {
  display: grid;
  gap: 6px;
}

.step {
  min-height: 54px;
  border: 1px solid #bbb;
  background: #fafafa;
  border-radius: 9px;
  font-size: 15px;
  cursor: pointer;
  padding: 5px;
}

.step.active {
  background: #1b1b1b;
  color: white;
  border-color: #1b1b1b;
}

.step.current {
  outline: 3px solid #9b9b9b;
  outline-offset: 2px;
}

.tone-settings {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.grow {
  flex: 1;
}

.sequence-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.sequence-row {
  display: grid;
  grid-template-columns: 36px minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.sequence-index {
  font-weight: 700;
}

button {
  border: 0;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

button:disabled {
  opacity: .45;
  cursor: default;
}

.primary {
  background: #111;
  color: white;
}


.secondary {
  background: #ececec;
  color: #111;
}

.remove-tone {
  background: #eee;
  padding: 8px 11px;
}

/* V100 – Transport: one large Start/Stop button, centered, full-width bar,
   fixed to the bottom of the screen. Same on desktop and mobile. */
.transport {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(243,243,243,.97);
  border-top: 1px solid #d0d0d0;
  padding: 12px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(10px);
}

.transport-button {
  width: min(360px, 100%);
  min-height: 56px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 14px;
  letter-spacing: .02em;
}

.transport-button.is-running {
  background: #3a3a3a;
}

.status {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: baseline;
  font-size: 13px;
  min-height: 18px;
}

body {
  padding-bottom: 120px;
}

#positionText {
  color: #666;
  font-size: 13px;
}

@media (max-width: 760px) {
  .app { padding: 14px; }
  .controls { grid-template-columns: 1fr; }
  .tone-settings { flex-direction: column; }
  .tone-settings .control { width: 100%; }
  .section-head { flex-direction: column; }
}


.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.toggle-label input {
  width: 18px;
  height: 18px;
}


.staff {
  position: relative;
  height: 92px;
  min-width: 480px;
}


/* V10: Rhythmusblock = Notensymbol/Pause, mit kleiner Zählzeit */
.step {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 66px;
  padding: 6px;
}


/* Note */

/* Rests */


/* V12 precision build: notation intentionally removed. */


.volume-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.volume-row input[type="range"] {
  min-width: 140px;
}
.volume-row span {
  min-width: 42px;
  font-size: 13px;
  color: #666;
  text-align: right;
}


/* V25 – Rhythmtrainer */
.rhythmtrainer-panel {
  border-width: 2px;
}


.metronome-grid {
  overflow-x: auto;
  padding-bottom: 4px;
}

.metro-steps {
  display: grid;
  gap: 6px;
  min-width: max-content;
}

.metro-step {
  min-height: 52px;
  border: 1px solid #bbb;
  background: #fafafa;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
  padding: 7px;
}

.metro-step.active {
  background: #111;
  color: #fff;
  border-color: #111;
}


/* V27 */
.ear-raster-control {
  display: grid;
  gap: 6px;
  min-width: 170px;
}

.ear-raster-control label {
  font-weight: 700;
}

.metro-step {
  position: relative;
}

.metro-step.accent {
  outline: 3px solid #555;
  outline-offset: 2px;
}

.accent-mark {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.metro-step.accent span:last-child {
  display: inline-block;
  padding-top: 8px;
}

@media (max-width: 760px) {
  .ear-raster-control {
    width: 100%;
  }
}


/* V30 – separate Melody Training */

.melody-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.melody-row {
  display: grid;
  grid-template-columns: 36px minmax(120px, 1fr) minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

@media (max-width: 760px) {
  .melody-row {
    grid-template-columns: 32px 1fr 1fr auto;
  }
}


/* V31 – clear Ear Training / Melody Training hierarchy */
.mode-panel {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 16px;
  padding-bottom: 16px;
}


.mode-switch {
  display: inline-flex;
  background: #ececec;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.mode-btn {
  background: transparent;
  color: #222;
  min-width: 150px;
}

.mode-btn.active {
  background: #111;
  color: #fff;
}

.active-training-panel {
  border-width: 2px;
}

@media (max-width: 760px) {
  .mode-panel {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .mode-switch {
    width: 100%;
  }

  .mode-btn {
    flex: 1;
    min-width: 0;
  }
}


/* V34 – pitch names in training rhythm */
.training-note-label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.pause-label {
  opacity: 0.45;
  font-weight: 600;
}

.sequence-mode-row {
  margin-top: 16px;
  border-top: 1px solid #eee;
  padding-top: 14px;
}
.sequence-mode-help {
  margin: 7px 0 0;
}


/* V37 – Melody input */
.melody-input-switch-row { margin: 12px 0 16px; }
.melody-position-box { display:grid; gap:8px; margin-bottom:12px; }
.melody-position-selector { display:flex; flex-wrap:wrap; gap:6px; }
.melody-position-btn { background:#ececec; color:#111; padding:8px 10px; }
.melody-position-btn.active { background:#111; color:#fff; }
.selected-melody-row { outline:2px solid #999; outline-offset:2px; border-radius:8px; }

.piano-keyboard {
  display:flex; align-items:flex-start; height:180px; overflow-x:auto;
  padding:0 8px 8px; background:#ddd; border-radius:10px; margin-bottom:10px;
}
.piano-key { position:relative; border-radius:0 0 5px 5px; padding:0; flex:0 0 auto; }
.white-key { width:44px; height:160px; background:#fff; border:1px solid #777; z-index:1; }
.black-key {
  width:28px; height:100px; background:#151515; color:#fff; border:1px solid #000;
  margin-left:-14px; margin-right:-14px; z-index:2;
}
.piano-key span { position:absolute; bottom:7px; left:0; right:0; font-size:10px; text-align:center; }
.selected-key { outline:4px solid #777; outline-offset:-4px; }

.notation-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
#notationSelectedLabel { font-weight:800; min-width:110px; text-align:center; }
.melody-notation { overflow-x:auto; background:#fff; border:1px solid #ddd; border-radius:10px; padding:8px; }
.notation-note-group.selected-note .notation-head { stroke:#777; stroke-width:4; }
.notation-note-group.selected-note .notation-pitch-label { font-weight:900; }

@media (max-width:760px) {
  .white-key { width:38px; }
  .black-key { width:24px; margin-left:-12px; margin-right:-12px; }
}


/* V38 – aligned positions and rhythm-aware notation */
.melody-position-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  width: 100%;
}

.melody-position-btn {
  min-height: 52px;
  display: grid;
  place-items: center;
  gap: 2px;
}

.position-number {
  font-size: 11px;
  opacity: 0.65;
}


.notation-toolbar label {
  font-size: 13px;
  font-weight: 700;
  margin-left: 8px;
}

.notation-toolbar select {
  min-height: 36px;
}


/* V39 – professional VexFlow notation */
.notation-position-selector {
  margin-bottom: 10px;
}

.vexflow-bar {
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px 4px;
  margin-bottom: 10px;
  overflow-x: auto;
}

.vexflow-bar-title {
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 3px 4px;
}

.vexflow-score {
  min-width: 600px;
}

.vexflow-score svg {
  display: block;
}

.vex-pitch-label {
  font-size: 11px;
  fill: #555;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.notation-error {
  padding: 16px;
  border: 1px solid #bbb;
  border-radius: 8px;
  background: #fafafa;
  font-weight: 700;
}

.melody-hold-help{margin:10px 0 0}
.step.hold{background:#444;color:#fff;border-style:dashed}
.step.hold .training-note-label{font-size:13px;font-style:italic}


/* V43 – Mute */

.mute-btn {
  min-width: 88px;
}

.mute-btn.muted {
  background: #111;
  color: #fff;
}


/* V44 – Auto Save */
.save-status {
  display: inline-block;
  margin: 2px 0 0;
  font-size: 12px;
  color: #666;
  opacity: 0.45;
  transition: opacity .18s ease;
}

.save-status.visible {
  opacity: 1;
}


/* V45 – Presets */
.preset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.preset-row label {
  font-weight: 700;
}

.preset-row select {
  min-width: 115px;
}

.preset-name-input {
  min-height: 40px;
  min-width: 180px;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 15px;
}


/* V48 – training mute layout */


/* V49 – Desktop header refinement for Ear/Melody Training rhythm */
@media (min-width: 761px) {
  .training-rhythm-head {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) 210px 120px;
    column-gap: 22px;
    align-items: start;
  }

  .training-rhythm-copy {
    min-width: 0;
  }

  .training-rhythm-copy p {
    max-width: 620px;
    margin-bottom: 0;
    line-height: 1.35;
  }

  .training-rhythm-head .ear-raster-control {
    min-width: 0;
    width: 100%;
    justify-self: stretch;
  }

  }

/* Keep existing mobile behavior exactly as before. */
@media (max-width: 760px) {
  .training-rhythm-head {
    display: flex;
    flex-direction: column;
  }
}


/* V50 – Tempo +/- buttons */
.tempo-control-wrap {
  display: grid;
  gap: 8px;
}

.tempo-stepper {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tempo-step-btn {
  min-width: 42px;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 760px) {
  .tempo-stepper {
    width: 100%;
  }

  .tempo-step-btn {
    flex: 0 0 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 26px;
  }

  .tempo-stepper #bpmNumber {
    width: 82px;
    min-height: 48px;
    font-size: 18px;
    text-align: center;
  }
}


/* V51 – interval direction / reference mode */
.interval-mode-row {
  display: flex;
  align-items: end;
  gap: 16px;
  margin: 8px 0 16px;
  flex-wrap: wrap;
}

.interval-mode-help {
  max-width: 720px;
  margin: 0 0 5px;
}

.interval-sequence-row {
  grid-template-columns: 36px minmax(115px, 150px) minmax(220px, 1fr) auto;
}

.interval-direction-select {
  min-width: 115px;
}

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

  .interval-sequence-row {
    grid-template-columns: 32px minmax(105px, 120px) minmax(150px, 1fr) auto;
  }
}


/* V52 – mobile interval direction + octave handling */
.interval-direction-wrap {
  display: grid;
  gap: 6px;
}

.mobile-direction-toggle {
  display: none;
  gap: 6px;
}

.direction-mini-btn {
  min-width: 46px;
  min-height: 42px;
  padding: 6px 12px;
  font-size: 22px;
  line-height: 1;
}

.direction-mini-btn.active {
  background: #111;
  color: #fff;
}

.root-mode-select {
  min-width: 135px;
}

@media (max-width: 760px) {
  .desktop-direction {
    display: none;
  }

  .mobile-direction-toggle:not([hidden]) {
    display: flex;
  }

  .direction-mini-btn {
    flex: 1 1 50%;
    min-height: 48px;
    font-size: 25px;
  }

  .root-mode-select {
    min-width: 0;
    width: 100%;
  }

  .interval-sequence-row {
    grid-template-columns: 30px minmax(100px, 120px) minmax(150px, 1fr) auto;
  }
}


/* V53 – compact block / notation view switch */
.training-view-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
}

.training-view-label {
  font-weight: 700;
}

.training-view-switch {
  display: inline-flex;
  background: #ececec;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.view-btn {
  background: transparent;
  color: #222;
  min-width: 90px;
}

.view-btn.active {
  background: #111;
  color: #fff;
}

.training-notation-container {
  margin: 8px 0 12px;
}


@media (max-width: 760px) {
  .training-view-switch-row {
    justify-content: space-between;
  }

  .training-view-switch {
    flex: 1;
  }

  .view-btn {
    flex: 1;
    min-width: 0;
  }
}


/* V54 – synced editable compact notation */
.compact-notation-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 10px;
}

.compact-note-btn {
  min-width: 46px;
  min-height: 42px;
  font-size: 22px;
  line-height: 1;
}

#compactNotationSelected {
  min-width: 120px;
  text-align: center;
  font-weight: 800;
}


.compact-note-hit:hover {
  fill: rgba(0,0,0,0.04);
}

@media (max-width: 760px) {
  .compact-notation-editor {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: 6px 0;
  }

  .compact-note-btn {
    min-width: 52px;
    min-height: 48px;
    font-size: 26px;
  }
}


/* V55 – robust compact notation */
.compact-notation-editor {
  display: grid;
  gap: 10px;
}

.compact-notation-positions {
  width: 100%;
}

.compact-notation-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.vex-pitch-label:hover {
  font-weight: 900;
  text-decoration: underline;
}

@media (max-width:760px) {
  .compact-notation-positions {
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .compact-notation-positions .melody-position-btn {
    min-width: 74px;
    flex: 0 0 auto;
  }
}


/* V57 – Mobile rapid-tap / double-tap zoom prevention on controls.
   Keeps normal pinch/page zoom available outside interactive controls. */
button,
select,
input[type="button"],
input[type="range"],
input[type="number"],
.rhythm-cell,
.metronome-cell,
.melody-position-btn,
.view-btn,
.tempo-step-btn,
.direction-mini-btn,
.compact-note-btn,
.remove-tone,
.training-header-actions button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.rhythm-cell,
.metronome-cell,
.melody-position-btn,
.view-btn,
.tempo-step-btn,
.direction-mini-btn,
.compact-note-btn {
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 760px) {
  button,
  .rhythm-cell,
  .metronome-cell,
  .melody-position-btn,
  .view-btn,
  .tempo-step-btn,
  .direction-mini-btn,
  .compact-note-btn {
    touch-action: manipulation;
  }
}


/* V58 – Melody sound controls, Bass option, notation playback highlight */
.melody-sound-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(280px, 1fr);
  gap: 18px;
  align-items: end;
  margin: 10px 0 18px;
}

.melody-volume-control {
  min-width: 0;
}

.vex-pitch-label.notation-current {
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

@media (max-width: 760px) {
  .melody-sound-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #melodySoundType {
    width: 100%;
  }
}


/* V59 – Ear Training Hold
   Uses the existing .hold visual language from Melodietraining. */


/* V60 – Metronome sounds + independent count voice */
.count-voice-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #d9d9d9;
}

.count-voice-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.count-voice-head h3 {
  margin: 0 0 4px;
}


.count-voice-steps {
  display: grid;
  gap: 6px;
  width: 100%;
}

.count-voice-step {
  min-height: 54px;
  padding: 6px 4px;
  display: grid;
  place-items: center;
  gap: 2px;
}

.count-voice-step small {
  font-size: 10px;
  opacity: 0.65;
}

.count-voice-step.level-1 {
  opacity: 0.55;
}

.count-voice-step.level-2 {
  opacity: 0.78;
}

.count-voice-step.level-3 {
  opacity: 1;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px currentColor;
}

@media (max-width: 760px) {
  .count-voice-head {
    flex-direction: column;
    align-items: stretch;
  }

  
  .count-voice-grid {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .count-voice-steps {
    min-width: max-content;
  }

  .count-voice-step {
    min-width: 48px;
  }
}


/* V61 – 4-state count voice dynamics */
.count-voice-step.level-0 {
  opacity: 0.28;
  text-decoration: line-through;
}

.count-voice-step.level-1 {
  opacity: 0.48;
}

.count-voice-step.level-2 {
  opacity: 0.76;
}

.count-voice-step.level-3 {
  opacity: 1;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px currentColor;
}


/* V62 – independent count voice volume */
#countVoiceVolume {
  min-width: 180px;
}

@media (max-width: 760px) {
  #countVoiceVolume {
    width: 100%;
    min-width: 0;
  }
}


/* V63 – first layout pass: top controls only */
.figure-feel-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(240px, 1.3fr);
  gap: 18px;
  align-items: end;
}

.figure-feel-row .control {
  min-width: 0;
}

.figure-feel-row select {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 760px) {
  .figure-feel-row {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 10px;
  }

  .figure-feel-row .control {
    margin: 0;
  }

  .figure-feel-row label {
    font-size: 0.95em;
    line-height: 1.2;
  }

  .figure-feel-row select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 390px) {
  .figure-feel-row {
    gap: 8px;
  }

  .figure-feel-row label {
    font-size: 0.9em;
  }
}


/* V64 – larger, easier-to-hit sliders everywhere */
input[type="range"] {
  min-height: 32px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
}

input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
}

input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

@media (max-width: 760px) {
  input[type="range"] {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
    touch-action: manipulation;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 9px;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    margin-top: -10.5px;
  }

  input[type="range"]::-moz-range-track {
    height: 9px;
  }

  input[type="range"]::-moz-range-thumb {
    width: 30px;
    height: 30px;
  }
}


/* V65 – Rhythmtrainer layout: same visual logic for both channels */

.rhythm-channel {
  display: grid;
  grid-template-columns:
    minmax(110px, .7fr)
    minmax(150px, 1fr)
    minmax(150px, 1fr)
    minmax(260px, 1.8fr)
    minmax(78px, .45fr);
  gap: 14px;
  align-items: end;
  padding: 14px;
  border: 1px solid #dedede;
  border-radius: 12px;
  background: #fafafa;
}

.rhythm-channel-title {
  align-self: center;
  font-size: 1.05rem;
}

.rhythm-channel .control {
  min-width: 0;
  margin: 0;
}

.rhythm-channel select {
  width: 100%;
}

.rhythm-channel-toggle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 44px;
}

.rhythm-channel-toggle .toggle-label {
  margin: 0;
  white-space: nowrap;
}

.count-voice-grid-head {
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .rhythm-channel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
    padding: 12px;
  }

  .rhythm-channel-title {
    grid-column: 1 / 2;
    grid-row: 1;
  }

  .rhythm-channel-toggle {
    grid-column: 2 / 3;
    grid-row: 1;
  }

  .rhythm-channel-sound {
    grid-column: 1 / 2;
  }

  .rhythm-channel-raster {
    grid-column: 2 / 3;
  }

  .rhythm-channel-volume {
    grid-column: 1 / -1;
  }

  .rhythm-channel-spacer {
    display: none;
  }

  .count-channel .rhythm-channel-raster {
    grid-column: 1 / 2;
  }
}


/* V66 – Rhythmtrainer preset layout only */


/* V67 – compact, consistent Training wählen switch */
.training-select-panel {
  padding-top: 16px;
  padding-bottom: 16px;
}


.training-select-panel .mode-switch {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  padding: 4px;
  gap: 4px;
  border-radius: 10px;
}

.training-select-panel .mode-btn {
  min-height: 42px;
  min-width: 170px;
  padding: 8px 18px;
  border-radius: 8px;
  line-height: 1.15;
}

@media (max-width: 760px) {
  .training-select-panel {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .training-select-panel .mode-switch {
    display: flex;
    width: 100%;
  }

  .training-select-panel .mode-btn {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 46px;
    padding: 8px 10px;
  }
}


/* V68 – mobile-only Training Rhythm controls + Training preset layout */


/* V69 – final block layout pass: Melodietraining only */
#melodyTrainingPanel .melody-sound-row {
  align-items: end;
}

#melodyTrainingPanel .melody-input-switch-row {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 14px;
}

#melodyTrainingPanel .melody-input-switch-row .control {
  min-width: 220px;
  margin: 0;
}

#melodyTrainingPanel #melodyInputMode {
  width: 100%;
}

.melody-list-editor-compact {
  display: grid;
  gap: 10px;
}

.melody-list-editor-compact .melody-list {
  margin-bottom: 0;
}

.melody-list-editor-compact #addMelodyTone {
  justify-self: start;
}

@media (max-width: 760px) {
  #melodyTrainingPanel .melody-sound-row {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 10px;
    align-items: end;
  }

  #melodyTrainingPanel .melody-sound-row .control {
    min-width: 0;
    margin: 0;
  }

  #melodyTrainingPanel #melodySoundType {
    width: 100%;
    min-width: 0;
  }

  #melodyTrainingPanel .melody-volume-control .volume-row {
    min-width: 0;
  }

  #melodyTrainingPanel .melody-input-switch-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 10px 0 12px;
  }

  #melodyTrainingPanel .melody-input-switch-row .control {
    min-width: 0;
    width: 100%;
  }

  .melody-list-editor-compact {
    gap: 8px;
  }

  .melody-list-editor-compact .melody-list {
    gap: 6px;
  }

  .melody-list-editor-compact .melody-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 0.78fr) 40px;
    gap: 6px;
  }

  .melody-list-editor-compact .melody-row select {
    min-width: 0;
    width: 100%;
  }

  .melody-list-editor-compact #addMelodyTone {
    width: 100%;
    justify-self: stretch;
  }
}


/* V70 – Ear Training interval block: Grundton + Klang side by side on mobile */
@media (max-width: 760px) {
  .ear-tone-settings {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 10px;
    align-items: end;
  }

  .ear-tone-settings > .control {
    min-width: 0;
    margin: 0;
  }

  .ear-tone-settings > .control:nth-child(1) {
    grid-column: 1 / 2;
  }

  .ear-tone-settings > .control:nth-child(2) {
    grid-column: 2 / 3;
  }

  .ear-tone-settings > .control:nth-child(3),
  .ear-tone-settings > .control.grow {
    grid-column: 1 / -1;
  }

  .ear-tone-settings select,
  .ear-tone-settings .volume-row {
    width: 100%;
    min-width: 0;
  }
}


/* V71 – hierarchy / labels only */
.global-tempo-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 6px;
}


/* V72 SAFE GROUPING – layout only */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rhythmtrainer-safe-group {
  border: 1px solid #dedede;
  border-radius: 14px;
  padding: 14px;
  margin-top: 14px;
  background: #fafafa;
}

.rhythmtrainer-safe-group .rhythm-channel {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  position: relative;
}


.rhythmtrainer-safe-metronome .metronome-grid {
  margin-top: 12px;
}

.rhythmtrainer-safe-count .count-voice-section {
  margin-top: 14px;
  padding-top: 14px;
}

.rhythmtrainer-safe-group .rhythm-channel-title {
  padding-right: 110px;
}

.rhythmtrainer-safe-group .rhythm-channel-toggle {
  position: absolute;
  top: 0;
  left: 130px;
  min-height: 0;
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .rhythmtrainer-safe-group {
    padding: 12px;
  }

  .rhythmtrainer-safe-group .rhythm-channel-title {
    padding-right: 85px;
  }

  .rhythmtrainer-safe-group .rhythm-channel-toggle {
    left: auto;
    right: 0;
  }
}


/* V73 – Desktop only: fix Ein/Aus switch position in Rhythmtrainer */
@media (min-width: 761px) {
  .rhythmtrainer-safe-group .rhythm-channel {
    position: static;
  }

  .rhythmtrainer-safe-group .rhythm-channel-title {
    padding-right: 0;
  }

  .rhythmtrainer-safe-group .rhythm-channel-toggle {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    grid-column: 1 / 2;
    grid-row: 2;
    justify-content: flex-start;
    align-self: start;
    min-height: 0;
    margin-top: -4px;
  }

  .rhythmtrainer-safe-group .rhythm-channel-toggle .toggle-label {
    white-space: nowrap;
  }
}


/* V74 – Mobile training preset layout only */


/* V77 – Desktop preset layout only */

/* V78 – Melodietraining: Intervallfolge wie im Ear Training */
.melody-list-editor-compact .melody-interval-sequence-row {
  grid-template-columns: 36px minmax(115px, 150px) minmax(220px, 1fr) auto;
}

.melody-start-pitch-select,
.melody-interval-value-select {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .melody-list-editor-compact .melody-row.melody-interval-sequence-row {
    grid-template-columns: 30px minmax(100px, 120px) minmax(150px, 1fr) auto;
    gap: 8px;
  }
}

/* V79 – Desktop only: compact melody positions and pitch stepper in one row */
@media (min-width: 761px) {
  .compact-notation-editor {
    grid-template-columns: max-content max-content;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
  }

  .compact-notation-positions {
    width: auto;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(80px, 100px));
  }

  .compact-notation-stepper {
    min-width: 232px;
  }

  .compact-notation-stepper .compact-note-btn {
    min-height: 52px;
  }
}

/* V80 – Desktop only: klare Trennung zwischen Rhythmus und Melodie */
.training-rhythm-description-melody-blocks {
  display: none;
}

@media (min-width: 761px) {
  /* V104: «Training» title now visible on desktop too (same as mobile). */

  main:has(#modeMelody.active):has(#trainingBlocksView:not([hidden]))
    .training-rhythm-description-default {
    display: none;
  }

  main:has(#modeMelody.active):has(#trainingBlocksView:not([hidden]))
    .training-rhythm-description-melody-blocks {
    display: inline;
  }

  main:has(#modeMelody.active):has(#trainingBlocksView:not([hidden]))
    #trainingBlocksView .training-note-label {
    font-size: 14px;
  }
}


/* V81 – Desktop only: Ear-Training-Tonfolge von links nach rechts */
@media (min-width: 761px) {
  #intervalTrainingPanel .ear-tone-settings {
    display: grid;
    grid-template-columns: minmax(130px, 0.65fr) minmax(150px, 0.8fr) minmax(300px, 2fr);
    column-gap: 18px;
    row-gap: 16px;
  }

  #intervalTrainingPanel .ear-tone-settings > .control {
    min-width: 0;
  }

  #intervalTrainingPanel .ear-tone-settings > .control.grow {
    grid-column: 1 / -1;
    width: 100%;
  }

  #intervalTrainingPanel .sequence-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  #intervalTrainingPanel .sequence-row.interval-sequence-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "index remove"
      "direction direction"
      "interval interval";
    gap: 7px 8px;
    align-content: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafafa;
  }

  #intervalTrainingPanel .sequence-row .sequence-index {
    grid-area: index;
  }

  #intervalTrainingPanel .sequence-row .interval-direction-wrap {
    grid-area: direction;
    min-width: 0;
  }

  #intervalTrainingPanel .sequence-row .interval-direction-select,
  #intervalTrainingPanel .sequence-row .root-mode-select,
  #intervalTrainingPanel .sequence-row .interval-value-select {
    width: 100%;
    min-width: 0;
  }

  #intervalTrainingPanel .sequence-row .interval-value-select {
    grid-area: interval;
  }

  #intervalTrainingPanel .sequence-row .remove-tone {
    grid-area: remove;
    align-self: start;
    padding: 5px 9px;
  }
}

/* V82 – Desktop only: einheitliche Intervallrichtung mit Minus / Plus */
@media (min-width: 761px) {
  /* Der Startton bleibt als klar bezeichnetes Startfeld erhalten. */
  #intervalTrainingPanel .sequence-row:first-child .desktop-direction,
  #melodyTrainingPanel .melody-row:first-child .desktop-direction {
    display: block;
    width: 100%;
  }

  #intervalTrainingPanel .sequence-row:first-child .mobile-direction-toggle,
  #melodyTrainingPanel .melody-row:first-child .mobile-direction-toggle {
    display: none;
  }

  /* Ab Ton 2 ersetzt Minus / Plus die Auswahl aufwärts / abwärts. */
  #intervalTrainingPanel .sequence-row:not(:first-child) .desktop-direction,
  #melodyTrainingPanel .melody-row:not(:first-child) .desktop-direction {
    display: none;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .interval-direction-wrap,
  #intervalTrainingPanel .sequence-row:not(:first-child) .mobile-direction-toggle:not([hidden]),
  #melodyTrainingPanel .melody-row:not(:first-child) .interval-direction-wrap,
  #melodyTrainingPanel .melody-row:not(:first-child) .mobile-direction-toggle:not([hidden]) {
    display: contents;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .direction-mini-btn,
  #melodyTrainingPanel .melody-row:not(:first-child) .direction-mini-btn {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 5px;
    font-size: 21px;
  }

  /* Ear Training: Minus | Intervall | Plus innerhalb jedes Tonschritts. */
  #intervalTrainingPanel .sequence-row.interval-sequence-row:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "index remove"
      "interval interval"
      "minus plus";
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .direction-mini-btn {
    width: 100%;
    min-width: 0;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:first-child {
    grid-area: minus;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:last-child {
    grid-area: plus;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .interval-value-select {
    grid-area: interval;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 14px;
  }

  /* Ein später erneut gewählter Grundton behält seine bestehende Oktavlagen-Auswahl. */
  #intervalTrainingPanel .sequence-row.interval-sequence-row:not(:first-child):has(.root-mode-select:not([hidden])) {
    grid-template-areas:
      "index remove"
      "root root"
      "interval interval";
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .root-mode-select:not([hidden]) {
    grid-area: root;
    width: 100%;
    min-width: 0;
  }

  /* Melodietraining: dieselbe Minus | Intervall | Plus Logik. */
  #melodyTrainingPanel .melody-row.melody-interval-sequence-row:not(:first-child) {
    grid-template-columns: 36px 38px minmax(0, 1fr) 38px auto;
    grid-template-areas: "index minus interval plus remove";
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .sequence-index {
    grid-area: index;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:first-child {
    grid-area: minus;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:last-child {
    grid-area: plus;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .interval-value-select {
    grid-area: interval;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .remove-tone {
    grid-area: remove;
  }
}

/* V83 – Desktop only: Rhythmus direkt im oberen Notenbild bearbeiten */
.training-notation-edit-help,
.training-rhythm-hit-layer {
  display: none;
}

.training-rhythm-editable-score {
  position: relative;
}

@media (min-width: 761px) {
  #trainingNotationView .compact-notation-editor {
    display: none !important;
  }

  .training-notation-edit-help {
    display: block;
    margin: 8px 2px 12px;
  }

  main:has(#trainingNotationView:not([hidden])) #melodyHoldHelp {
    display: none;
  }

  .training-rhythm-hit-layer {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
  }

  .training-rhythm-hit {
    position: absolute;
    top: 18px;
    height: 150px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: transparent;
    cursor: pointer;
    pointer-events: auto;
  }

  .training-rhythm-hit:hover,
  .training-rhythm-hit:focus-visible {
    border-color: rgba(0, 0, 0, 0.24);
    background: rgba(0, 0, 0, 0.045);
    outline: none;
  }

  .training-rhythm-hit:active {
    background: rgba(0, 0, 0, 0.075);
  }
}

/* V84 – Desktop only: direkter, anfängerfreundlicher Rhythmus-Notenwert-Editor */
.training-rhythm-notation-editor {
  display: none;
}

@media (min-width: 761px) {
  .training-rhythm-notation-editor {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 10px 14px;
    margin: 8px 0 12px;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    background: #fafafa;
  }

  .training-rhythm-editor-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 230px;
  }

  .training-rhythm-selection-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: #505050;
    white-space: normal;
  }

  .training-rhythm-duration-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: #737373;
  }

  .training-rhythm-editor-type {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 8px;
    background: #ececec;
  }

  .training-rhythm-type-btn {
    min-height: 34px;
    padding: 6px 12px;
  }

  .training-rhythm-type-btn.active {
    background: #111;
    color: #fff;
  }

  .training-rhythm-value-buttons {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .training-rhythm-value-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 9px;
    white-space: nowrap;
  }

  .training-rhythm-value-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .rhythm-value-glyph {
    min-width: 22px;
    font-family: "Bravura", "Noto Music", "Segoe UI Symbol", serif;
    font-size: 22px;
    line-height: 1;
    text-align: center;
  }

  .training-rhythm-hit {
    z-index: 2;
  }
}

/* V84 refinement: all rhythm values stay visible without horizontal searching */
@media (min-width: 761px) {
  .training-rhythm-notation-editor {
    grid-template-columns: minmax(230px, 1fr) auto;
  }

  .training-rhythm-value-buttons {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 6px;
    overflow: visible;
    width: 100%;
  }

  .training-rhythm-value-btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

@media (min-width: 761px) {
  .training-rhythm-value-btn.active {
    background: #111;
    color: #fff;
  }
}

/* V88 – Rhythm notation editor: one persistent selection marker per event.
   Deliberately no large vertical selection bars and no per-raster multi-selection. */
@media (min-width: 761px) {
  .training-rhythm-selection-marker {
    position: absolute;
    bottom: 11px;
    height: 3px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.48);
    pointer-events: none;
    z-index: 3;
  }
}


/* V89 – separate training rhythm / interval / melody presets.
   Same visual logic everywhere: label | preset | Laden | name | Speichern. */
@media (min-width: 761px) {
  .pitch-preset-row {
    display: grid;
    grid-template-columns: max-content minmax(150px, 1fr) max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
  }

  .pitch-preset-row > label { grid-column: 1; white-space: nowrap; }
  .pitch-preset-row > select { grid-column: 2; width: 100%; min-width: 150px; }
  .pitch-preset-row > button[id^="load"] { grid-column: 3; white-space: nowrap; }
  .pitch-preset-row > .preset-name-input { grid-column: 4; width: 100%; min-width: 0; }
  .pitch-preset-row > button[id^="save"] { grid-column: 5; white-space: nowrap; }
}

@media (max-width: 760px) {
  .pitch-preset-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }

  .pitch-preset-row > label {
    grid-column: 1 / -1;
    margin: 0;
  }

  .pitch-preset-row > select {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  .pitch-preset-row > button[id^="load"] {
    grid-column: 2;
    grid-row: 2;
    min-width: 92px;
  }

  .pitch-preset-row > .preset-name-input {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
  }

  .pitch-preset-row > button[id^="save"] {
    grid-column: 2;
    grid-row: 3;
    min-width: 92px;
  }
}

/* V89 – Melodietraining uses the same left-to-right card logic as Ear Training.
   Desktop only; existing mobile behaviour remains unchanged. */
@media (min-width: 761px) {
  #melodyTrainingPanel #melodyList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  #melodyTrainingPanel .melody-row.melody-interval-sequence-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "index remove"
      "interval interval"
      "minus plus";
    gap: 7px 8px;
    align-content: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafafa;
  }

  #melodyTrainingPanel .melody-row .sequence-index {
    grid-area: index;
  }

  #melodyTrainingPanel .melody-row .remove-tone {
    grid-area: remove;
    justify-self: end;
    align-self: start;
    padding: 5px 9px;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .interval-direction-wrap,
  #melodyTrainingPanel .melody-row:not(:first-child) .mobile-direction-toggle:not([hidden]) {
    display: contents;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:first-child {
    grid-area: minus;
    width: 100%;
    min-width: 0;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:last-child {
    grid-area: plus;
    width: 100%;
    min-width: 0;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .interval-value-select {
    grid-area: interval;
    width: 100%;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 14px;
  }

  /* Startton follows the same card hierarchy: number/remove, Start, pitch. */
  #melodyTrainingPanel .melody-row:first-child {
    grid-template-areas:
      "index remove"
      "direction direction"
      "interval interval";
  }

  #melodyTrainingPanel .melody-row:first-child .interval-direction-wrap {
    grid-area: direction;
    display: block;
    min-width: 0;
  }

  #melodyTrainingPanel .melody-row:first-child .desktop-direction {
    display: block;
    width: 100%;
  }

  #melodyTrainingPanel .melody-row:first-child .mobile-direction-toggle {
    display: none;
  }

  #melodyTrainingPanel .melody-row:first-child .melody-start-pitch-select {
    grid-area: interval;
    width: 100%;
    min-width: 0;
  }

  #melodyTrainingPanel #addMelodyTone {
    margin-top: 2px;
  }
}

/* V91 – Melodietraining uses the same visual mask as Ear Training.
   Layout only: same calm card mask, same left-to-right reading logic, same add/preset order.
   No melody, pitch, audio, rhythm or storage logic changed. */
@media (min-width: 761px) {
  #melodyTrainingPanel .melody-list-editor-compact {
    display: block;
  }

  #melodyTrainingPanel .melody-sequence-control {
    width: 100%;
  }

  #melodyTrainingPanel .melody-sequence-control > label {
    display: block;
    font-weight: 700;
    margin-bottom: 7px;
  }

  #melodyTrainingPanel #melodyList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    margin-bottom: 10px;
  }

  /* Same card mask as Ear Training. */
  #melodyTrainingPanel .melody-row.melody-interval-sequence-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "index remove"
      "direction direction"
      "interval interval";
    gap: 7px 8px;
    align-content: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafafa;
  }

  #melodyTrainingPanel #melodyList .selected-melody-row {
    outline: none;
    outline-offset: 0;
  }

  #melodyTrainingPanel .melody-row .sequence-index {
    grid-area: index;
  }

  #melodyTrainingPanel .melody-row .remove-tone {
    grid-area: remove;
    align-self: start;
    justify-self: end;
    padding: 5px 9px;
  }

  #melodyTrainingPanel .melody-row .interval-direction-wrap {
    grid-area: direction;
    min-width: 0;
  }

  #melodyTrainingPanel .melody-row .interval-direction-select,
  #melodyTrainingPanel .melody-row .melody-start-pitch-select,
  #melodyTrainingPanel .melody-row .interval-value-select {
    width: 100%;
    min-width: 0;
  }

  /* Start card mirrors Ear Training: Start line, then pitch. */
  #melodyTrainingPanel .melody-row:first-child .interval-direction-wrap {
    display: block;
  }

  #melodyTrainingPanel .melody-row:first-child .desktop-direction {
    display: block;
    width: 100%;
  }

  #melodyTrainingPanel .melody-row:first-child .mobile-direction-toggle {
    display: none;
  }

  #melodyTrainingPanel .melody-row:first-child .melody-start-pitch-select {
    grid-area: interval;
  }

  /* Following cards mirror Ear Training: interval on top, minus/plus beneath. */
  #melodyTrainingPanel .melody-row:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "index remove"
      "interval interval"
      "minus plus";
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .desktop-direction {
    display: none;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .interval-direction-wrap,
  #melodyTrainingPanel .melody-row:not(:first-child) .mobile-direction-toggle:not([hidden]) {
    display: contents;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .interval-value-select {
    grid-area: interval;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 14px;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:first-child {
    grid-area: minus;
    width: 100%;
    min-width: 0;
  }

  #melodyTrainingPanel .melody-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:last-child {
    grid-area: plus;
    width: 100%;
    min-width: 0;
  }

  #melodyTrainingPanel #addMelodyTone {
    margin-top: 0;
  }

  #melodyTrainingPanel .melody-preset-row {
    margin-top: 12px;
    margin-bottom: 0;
  }
}


/* V92 – Melodietraining: exakt dieselbe Kartenmaske wie Ear Training,
   unabhängig davon, ob oben "Blöcke" oder "Noten" gewählt ist.
   Die Werte sind bewusst 1:1 aus der akzeptierten Ear-Training-Maske übernommen.
   Nur Darstellung; keine Tonhöhen-, Rhythmus-, Preset-, Audio- oder Mobile-Logik geändert. */
@media (min-width: 761px) {
  /* Beide Tonfolgen benutzen dieselbe 4-Spalten-Leserichtung. */
  #intervalTrainingPanel .sequence-list,
  #melodyTrainingPanel #melodyList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  /* Exakt dieselbe Grundmaske pro Tonkarte. */
  #intervalTrainingPanel .sequence-row.interval-sequence-row,
  #melodyTrainingPanel .sequence-row.interval-sequence-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "index remove"
      "direction direction"
      "interval interval";
    gap: 7px 8px;
    align-content: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafafa;
  }

  #intervalTrainingPanel .sequence-row .sequence-index,
  #melodyTrainingPanel .sequence-row .sequence-index {
    grid-area: index;
  }

  #intervalTrainingPanel .sequence-row .interval-direction-wrap,
  #melodyTrainingPanel .sequence-row .interval-direction-wrap {
    grid-area: direction;
    min-width: 0;
  }

  #intervalTrainingPanel .sequence-row .interval-direction-select,
  #intervalTrainingPanel .sequence-row .root-mode-select,
  #intervalTrainingPanel .sequence-row .interval-value-select,
  #melodyTrainingPanel .sequence-row .interval-direction-select,
  #melodyTrainingPanel .sequence-row .melody-start-pitch-select,
  #melodyTrainingPanel .sequence-row .interval-value-select {
    width: 100%;
    min-width: 0;
  }

  #intervalTrainingPanel .sequence-row .interval-value-select,
  #melodyTrainingPanel .sequence-row .interval-value-select,
  #melodyTrainingPanel .sequence-row .melody-start-pitch-select {
    grid-area: interval;
  }

  #intervalTrainingPanel .sequence-row .remove-tone,
  #melodyTrainingPanel .sequence-row .remove-tone {
    grid-area: remove;
    align-self: start;
    justify-self: end;
    padding: 5px 9px;
  }

  /* Startkarte: dieselbe Hierarchie. */
  #intervalTrainingPanel .sequence-row:first-child .desktop-direction,
  #melodyTrainingPanel .sequence-row:first-child .desktop-direction {
    display: block;
    width: 100%;
  }

  #intervalTrainingPanel .sequence-row:first-child .mobile-direction-toggle,
  #melodyTrainingPanel .sequence-row:first-child .mobile-direction-toggle {
    display: none;
  }

  /* Ab Ton 2: Intervall oben, Minus / Plus darunter – in beiden Bereichen identisch. */
  #intervalTrainingPanel .sequence-row.interval-sequence-row:not(:first-child),
  #melodyTrainingPanel .sequence-row.interval-sequence-row:not(:first-child) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "index remove"
      "interval interval"
      "minus plus";
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .desktop-direction,
  #melodyTrainingPanel .sequence-row:not(:first-child) .desktop-direction {
    display: none;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .interval-direction-wrap,
  #intervalTrainingPanel .sequence-row:not(:first-child) .mobile-direction-toggle:not([hidden]),
  #melodyTrainingPanel .sequence-row:not(:first-child) .interval-direction-wrap,
  #melodyTrainingPanel .sequence-row:not(:first-child) .mobile-direction-toggle:not([hidden]) {
    display: contents;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .direction-mini-btn,
  #melodyTrainingPanel .sequence-row:not(:first-child) .direction-mini-btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 5px;
    font-size: 21px;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:first-child,
  #melodyTrainingPanel .sequence-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:first-child {
    grid-area: minus;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:last-child,
  #melodyTrainingPanel .sequence-row:not(:first-child) .mobile-direction-toggle .direction-mini-btn:last-child {
    grid-area: plus;
  }

  #intervalTrainingPanel .sequence-row:not(:first-child) .interval-value-select,
  #melodyTrainingPanel .sequence-row:not(:first-child) .interval-value-select {
    grid-area: interval;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 14px;
  }

  /* Im Melodietraining keine zusätzliche Auswahl-Umrandung der Karte. */
  #melodyTrainingPanel #melodyList .selected-melody-row {
    outline: none;
    outline-offset: 0;
  }
}


/* V93 – Desktop Melodietraining Klaviatur finalisieren.
   Mobile bleibt unverändert. */
@media (min-width: 761px) {
  #melodyKeyboardEditor .melody-position-box {
    gap: 10px;
    margin: 2px 0 14px;
  }

  /* Dieselbe 4er-Leserichtung wie bei den akzeptierten Tonkarten. */
  #melodyKeyboardEditor #keyboardPositionSelector {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  #melodyKeyboardEditor #keyboardPositionSelector .melody-position-btn {
    min-width: 0;
    min-height: 64px;
    padding: 9px 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
  }

  #melodyKeyboardEditor #keyboardPositionSelector .melody-position-btn.active {
    background: #111;
    color: #fff;
    border-color: #111;
  }

  #melodyKeyboardEditor #keyboardPositionSelector .position-number {
    font-size: 12px;
  }

  #melodyKeyboardEditor #pianoKeyboard {
    border: 1px solid #d8d8d8;
    background: #e7e7e7;
    scroll-behavior: smooth;
  }
}

/* V94 – Desktop only: one global melody-position selection across all melody views.
   Orientation only. No rhythm, pitch, audio, preset or mobile logic is changed. */
@media (min-width: 761px) {
  /* Intervallfolge: the currently selected melody item remains visible without
     changing the accepted Ear-Training card mask. */
  #melodyTrainingPanel #melodyList .selected-melody-row {
    outline: none;
    border-color: #777;
    box-shadow: inset 0 0 0 1px #777;
  }

  /* Blocks: show where the selected melody item occurs in the rhythm. */
  #trainingBlocksView .step.melody-selected-step {
    outline: 3px solid #777;
    outline-offset: 2px;
  }

  /* Notation: selected melody position is visible in both the upper training
     notation and the lower melody notation. Playback highlighting stays separate. */
  .vex-pitch-label.melody-selected-pitch {
    font-size: 13px;
    font-weight: 900;
  }

  .melody-selected-note {
    filter: drop-shadow(0 0 1.4px #666);
  }
}

/* V95 – Desktop only: melody notation uses the same global orientation as
   Intervallfolge and Klaviatur. No colour concept is introduced yet. */
@media (min-width: 761px) {
  /* Slightly larger pitch names in the upper rhythm area for readability.
     Keep them calm rather than bold. */
  main:has(#modeMelody.active):has(#trainingBlocksView:not([hidden]))
    #trainingBlocksView .training-note-label {
    font-size: 15px;
  }

  main:has(#modeMelody.active) #trainingNotationContainer .vex-pitch-label {
    font-size: 13px;
    font-weight: 500;
  }

  main:has(#modeMelody.active) #trainingNotationContainer .vex-pitch-label.melody-selected-pitch {
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
  }

  /* Lower melody notation: the selected pitch is shown with the same quiet
     orientation language; the note itself is clickable. */
  #melodyNotation .vex-pitch-label {
    font-size: 13px;
    font-weight: 500;
  }

  #melodyNotation .vex-pitch-label.melody-selected-pitch {
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
  }

  #melodyNotation .melody-notation-selectable-note {
    cursor: pointer;
  }

  #melodyNotation .melody-selected-note {
    filter: drop-shadow(0 0 1.8px #555);
  }
}

/* V98 – Desktop only: Ear Training notation orientation mirrors the accepted
   melody orientation. Visual selection only; no rhythm/interval/audio logic change. */
@media (min-width: 761px) {
  #intervalTrainingPanel .sequence-row.selected-ear-sequence-row {
    border-color: #777;
    box-shadow: inset 0 0 0 1px #777;
  }

  main:has(#modeInterval.active) #trainingNotationContainer .vex-pitch-label.ear-selected-pitch {
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
  }

  main:has(#modeInterval.active) #trainingNotationContainer .ear-selected-note {
    filter: drop-shadow(0 0 1.8px #555);
  }
}


/* V101 – One Ein/Aus logic everywhere: title left, switch right, same row.
   Applies to Metronom, Zählstimme and Rhythmus (Training), desktop and mobile. */
.channel-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.channel-head-row h2 {
  margin: 0;
}

.channel-toggle {
  margin: 0;
  white-space: nowrap;
}

.training-head-row + .training-rhythm-head {
  margin-top: 6px;
}

@media (min-width: 761px) {
  .rhythmtrainer-safe-group .rhythm-channel {
    grid-template-columns:
      minmax(150px, 1fr)
      minmax(150px, 1fr)
      minmax(260px, 1.8fr);
    row-gap: 10px;
  }

  .rhythmtrainer-safe-group .rhythm-channel-title {
    grid-column: 1 / 3;
    grid-row: 1;
    align-self: center;
  }

  .rhythmtrainer-safe-group .rhythm-channel-toggle {
    grid-column: 3 / 4;
    grid-row: 1;
    justify-content: flex-end;
    align-self: center;
    margin-top: 0;
  }

  .rhythmtrainer-safe-group .rhythm-channel-sound,
  .rhythmtrainer-safe-group .rhythm-channel-spacer {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .rhythmtrainer-safe-group .rhythm-channel-raster {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .rhythmtrainer-safe-group .rhythm-channel-volume {
    grid-column: 3 / 4;
    grid-row: 2;
  }

  .training-rhythm-head {
    grid-template-columns: minmax(360px, 1fr) 210px;
  }
}

/* V101 – «Alle Töne» / «Alle Pausen» are editing tools, placed above the bars. */
.rhythm-tools-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

@media (max-width: 760px) {
  .rhythm-tools-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* V102 – All six preset rows share one layout and sit at the end of their block.
   Desktop: label | preset | Laden | name | Speichern (one line).
   Mobile: label, then preset + Laden, then name + Speichern. */
.pitch-preset-row.metronome-preset-row,
.pitch-preset-row.count-preset-row,
.pitch-preset-row.rhythm-preset-row {
  margin-top: 14px;
  margin-bottom: 0;
}


/* V103 – Tonfolge: one order on desktop and mobile, Ear and Melody alike:
   Nr · Ton → Intervall → Richtung (−/+ or Lage) → ×.
   Two IDs in every selector so this block wins over all earlier patches. */
#intervalTrainingPanel #sequenceList .sequence-row.interval-sequence-row,
#melodyTrainingPanel #melodyList .sequence-row.interval-sequence-row {
  display: grid;
  align-items: center;
  min-width: 0;
}

#intervalTrainingPanel #sequenceList .sequence-index,
#melodyTrainingPanel #melodyList .sequence-index {
  grid-area: index;
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

#intervalTrainingPanel #sequenceList .interval-value-select,
#melodyTrainingPanel #melodyList .interval-value-select,
#melodyTrainingPanel #melodyList .melody-start-pitch-select {
  grid-area: interval;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#intervalTrainingPanel #sequenceList .interval-direction-wrap,
#melodyTrainingPanel #melodyList .interval-direction-wrap {
  grid-area: direction;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#intervalTrainingPanel #sequenceList .remove-tone,
#melodyTrainingPanel #melodyList .remove-tone {
  grid-area: remove;
  margin: 0;
}

/* Richtung: always −/+ (disabled on the first tone). The «Start» select is gone. */
#intervalTrainingPanel #sequenceList .desktop-direction,
#melodyTrainingPanel #melodyList .desktop-direction {
  display: none;
}

#intervalTrainingPanel #sequenceList .mobile-direction-toggle:not([hidden]),
#melodyTrainingPanel #melodyList .mobile-direction-toggle:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

#intervalTrainingPanel #sequenceList .mobile-direction-toggle .direction-mini-btn,
#melodyTrainingPanel #melodyList .mobile-direction-toggle .direction-mini-btn {
  grid-area: auto;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#intervalTrainingPanel #sequenceList .root-mode-select:not([hidden]) {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#intervalTrainingPanel #sequenceList [hidden],
#melodyTrainingPanel #melodyList [hidden] {
  display: none;
}

.sequence-pitch::before {
  content: " · ";
}

/* Desktop: card. Header (Nr · Ton, ×), then Intervall, then Richtung. */
@media (min-width: 761px) {
  #intervalTrainingPanel #sequenceList .sequence-row.interval-sequence-row,
  #melodyTrainingPanel #melodyList .sequence-row.interval-sequence-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "index remove"
      "interval interval"
      "direction direction";
    gap: 8px;
    align-content: start;
  }

  #intervalTrainingPanel #sequenceList .remove-tone,
  #melodyTrainingPanel #melodyList .remove-tone {
    justify-self: end;
  }

  #intervalTrainingPanel #sequenceList select,
  #melodyTrainingPanel #melodyList select {
    font-size: 15px;
  }
}

/* Mobile: one compact row. Nr above Ton, Intervall, −/+, ×. */
@media (max-width: 760px) {
  #intervalTrainingPanel #sequenceList .sequence-row.interval-sequence-row,
  #melodyTrainingPanel #melodyList .sequence-row.interval-sequence-row {
    grid-template-columns: 40px minmax(0, 1fr) 88px 34px;
    grid-template-areas: "index interval direction remove";
    gap: 6px;
    padding: 6px 0;
  }

  #intervalTrainingPanel #sequenceList .sequence-index,
  #melodyTrainingPanel #melodyList .sequence-index {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }

  #intervalTrainingPanel #sequenceList .sequence-pitch,
  #melodyTrainingPanel #melodyList .sequence-pitch {
    font-size: 12px;
    font-weight: 600;
    color: #666;
  }

  .sequence-pitch::before {
    content: none;
  }

  #intervalTrainingPanel #sequenceList .direction-mini-btn,
  #melodyTrainingPanel #melodyList .direction-mini-btn {
    min-height: 40px;
    padding: 0;
  }

  #intervalTrainingPanel #sequenceList .remove-tone,
  #melodyTrainingPanel #melodyList .remove-tone {
    width: 34px;
    min-width: 0;
    min-height: 40px;
    padding: 0;
  }
}


/* V105 – The Ear Training | Melodietraining switch is itself the heading of the
   training area (same level as «Rhythmtrainer»). No extra «Training» title. */
.training-select-panel .mode-btn {
  font-size: 24px;
  font-weight: 700;
  min-height: 54px;
  padding: 8px 22px;
}

@media (max-width: 760px) {
  .training-select-panel .mode-btn {
    font-size: 18px;
    min-height: 50px;
    padding: 8px 6px;
  }
}


/* V106 – Playback position clearly different from selection.
   Selection (what you clicked) = grey outline. Playing now = colour.
   Placeholder accent colour; final colour is decided in Roadmap step 6 (Design). */
:root {
  --play-accent: #d9480f;
}

#trainingBlocksView .step.current {
  background: var(--play-accent);
  border-color: var(--play-accent);
  color: #fff;
  outline: 3px solid var(--play-accent);
  outline-offset: 2px;
}

#trainingBlocksView .step.current .training-note-label {
  color: #fff;
}

/* main:has(#play) only raises specificity above the V95/V98 label rules. */
main:has(#play) #trainingNotationContainer .vex-pitch-label.notation-current {
  fill: var(--play-accent);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

#trainingNotationContainer .vex-play-note.notation-current-note,
#trainingNotationContainer .vex-play-note.notation-current-note * {
  fill: var(--play-accent);
  stroke: var(--play-accent);
}


/* V108 – Melodietraining help text switch now also on mobile (same rule as desktop V80). */
main:has(#modeMelody.active):has(#trainingBlocksView:not([hidden]))
  .training-rhythm-description-default {
  display: none;
}

main:has(#modeMelody.active):has(#trainingBlocksView:not([hidden]))
  .training-rhythm-description-melody-blocks {
  display: inline;
}


/* V110 – Rhythmtrainer grids show the playback position too (same accent as training). */
#metronomeGrid .metro-step.rt-current,
#countVoiceGrid .count-voice-step.rt-current {
  background: var(--play-accent);
  border-color: var(--play-accent);
  color: #fff;
  outline: 3px solid var(--play-accent);
  outline-offset: 2px;
}

#metronomeGrid .metro-step.rt-current *,
#countVoiceGrid .count-voice-step.rt-current * {
  color: #fff;
}


/* V111 – Orange = audible now. Softer orange = quieter / sustained.
   Silent positions (off, Mute, Pause, training «Aus») are never marked. */
:root {
  --play-accent-soft: #ee9b72;
}

#metronomeGrid .metro-step.rt-current.rt-soft,
#trainingBlocksView .step.current.current-hold {
  background: var(--play-accent-soft);
  border-color: var(--play-accent-soft);
  outline-color: var(--play-accent-soft);
}


/* V127 – counting voice: 6 levels, shown as bar height */
.count-voice-step.level-0 { opacity: 0.28; text-decoration: line-through; }
.count-voice-step.level-1,
.count-voice-step.level-2,
.count-voice-step.level-3,
.count-voice-step.level-4,
.count-voice-step.level-5,
.count-voice-step.level-6 { opacity: 1; font-weight: inherit; box-shadow: none; }
.count-voice-step.level-6 { font-weight: 900; box-shadow: inset 0 0 0 2px currentColor; }
.count-voice-step .cv-bar {
  display: flex;
  align-items: flex-end;
  width: 14px;
  height: 24px;
  border-bottom: 1px solid currentColor;
}
.count-voice-step .cv-bar b {
  display: block;
  width: 100%;
  background: currentColor;
  opacity: 0.75;
  border-radius: 2px 2px 0 0;
}


/* V128 – metronome: 6 levels, bar height like the counting voice */
.metro-step {
  display: grid;
  place-items: center;
  gap: 2px;
}
.metro-step .cv-bar {
  display: flex;
  align-items: flex-end;
  width: 14px;
  height: 24px;
  border-bottom: 1px solid currentColor;
}
.metro-step .cv-bar b {
  display: block;
  width: 100%;
  background: currentColor;
  opacity: 0.85;
  border-radius: 2px 2px 0 0;
}
.metro-step.accent span:last-of-type {
  padding-top: 8px;
}


/* V131 – Step 5: mobile layout fixes */
@media (max-width: 760px) {
  /* A: Melody sound on its own full row (like Ear Training), volume below */
  #melodyTrainingPanel .melody-sound-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  /* C: training steps never wider than the screen; 16ths wrap to 2 rows of 8 per bar */
  .steps.steps-wide {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  /* B: channel titles («Counting Voice») stay on one line */
  .rhythmtrainer-safe-group .rhythm-channel-title {
    grid-column: 1 / -1;
    white-space: nowrap;
  }
}

/* V132 – Step 5: notation always shows the whole bar (scaled down when the screen is narrower, never up) */
.vexflow-bar {
  overflow-x: hidden;
}

.vexflow-score {
  min-width: 0;
}

.vexflow-score svg {
  max-width: 100%;
  height: auto;
}

/* V132 – section titles smaller on phones, so all fit on one line */
@media (max-width: 760px) {
  h2 {
    font-size: 20px;
  }
}

/* V132 – desktop rhythm editor: hit layer sized to the score, so % positions match the (possibly scaled) notes */
@media (min-width: 761px) {
  .vexflow-score.training-rhythm-editable-score {
    width: fit-content;
    max-width: 100%;
  }

  .training-rhythm-hit {
    top: 9.73%;     /* 18px of 185px */
    height: 81.08%; /* 150px of 185px */
  }
}

/* V132 – very small phones (iPhone SE 1st gen, 320px) */
@media (max-width: 360px) {
  h2 {
    font-size: 18px;
  }
}

@media (max-width: 340px) {
  h2 {
    font-size: 16px;
  }
}

/* V133 – notation on phones: no empty space under a scaled bar, lines stay visible */
.vexflow-score svg {
  height: auto !important; /* VexFlow sets a fixed inline height; keep the aspect ratio when scaled */
}

@media (max-width: 760px) {
  .vexflow-score svg .vf-stem path {
    vector-effect: non-scaling-stroke;
    stroke-width: 1.2px;
  }

  /* V134: staff lines thinner than the stems, so they don't compete with the notes */
  .vexflow-score svg .vf-stave path,
  .vexflow-score svg .vf-stavebarline path {
    vector-effect: non-scaling-stroke;
    stroke-width: 0.8px;
  }

  /* V134: «Bar 1» smaller and lighter */
  .vexflow-bar-title {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 0;
  }

  .vex-pitch-label {
    font-size: 15px;
  }
}


/* V135 – fix: the melody pitch stepper («– Note +») must stay hidden in Ear Training (CSS display overrode [hidden]) */
.compact-notation-editor[hidden] {
  display: none !important;
}

/* V137 – interval rows: ↑/↓ direction button + − / + interval size.
   One clear layout for Ear (Intervals) and Melody (Sequence) rows, phone and desktop. */
.interval-dir-btn {
  font-weight: 700;
}

#intervalTrainingPanel .sequence-row.interval-sequence-row,
#melodyTrainingPanel .melody-row.melody-interval-sequence-row {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "index interval remove"
    ".     buttons  buttons" !important;
  gap: 8px !important;
  align-items: center;
}

#intervalTrainingPanel .sequence-row .sequence-index,
#melodyTrainingPanel .melody-row .sequence-index { grid-area: index !important; }

#intervalTrainingPanel .sequence-row .interval-value-select,
#melodyTrainingPanel .melody-row .interval-value-select,
#melodyTrainingPanel .melody-row .melody-start-pitch-select {
  grid-area: interval !important;
  width: 100%;
  min-width: 0;
}

#intervalTrainingPanel .sequence-row .remove-tone,
#melodyTrainingPanel .melody-row .remove-tone {
  grid-area: remove !important;
  justify-self: end;
}

#intervalTrainingPanel .sequence-row .interval-direction-wrap,
#melodyTrainingPanel .melody-row .interval-direction-wrap {
  grid-area: buttons !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px;
  min-width: 0;
}

#intervalTrainingPanel .sequence-row .interval-direction-wrap > * {
  grid-area: auto !important;
  width: 100% !important;
  justify-self: stretch !important;
}

#intervalTrainingPanel .sequence-row .desktop-direction,
#melodyTrainingPanel .melody-row .desktop-direction {
  display: none !important;
}

#intervalTrainingPanel .sequence-row .mobile-direction-toggle:not([hidden]),
#melodyTrainingPanel .melody-row .mobile-direction-toggle:not([hidden]) {
  display: flex !important;
  gap: 6px;
}

#intervalTrainingPanel .sequence-row .mobile-direction-toggle .direction-mini-btn,
#melodyTrainingPanel .melody-row .mobile-direction-toggle .direction-mini-btn {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px;
  padding: 4px !important;
  font-size: 22px;
  grid-area: auto !important;
}

#intervalTrainingPanel .sequence-row .root-mode-select:not([hidden]) {
  width: 100%;
  min-width: 0;
}

/* First tone (start / root): no direction or interval steps */
#intervalTrainingPanel .sequence-row:first-child .interval-direction-wrap,
#melodyTrainingPanel .melody-row:first-child .interval-direction-wrap {
  display: none !important;
}

#intervalTrainingPanel .sequence-row:first-child,
#melodyTrainingPanel .melody-row:first-child {
  grid-template-areas: "index interval remove" !important;
}

@media (min-width: 761px) {
  /* Ear Training keeps its cards: number + ×, interval, then the three buttons */
  #intervalTrainingPanel .sequence-row.interval-sequence-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "index remove"
      "interval interval"
      "buttons buttons" !important;
  }

  #intervalTrainingPanel .sequence-row.interval-sequence-row:first-child {
    grid-template-areas:
      "index remove"
      "interval interval" !important;
  }

  /* Melody cards: same layout as Ear Training */
  #melodyTrainingPanel .melody-row.melody-interval-sequence-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "index remove"
      "interval interval"
      "buttons buttons" !important;
  }

  #melodyTrainingPanel .melody-row.melody-interval-sequence-row:first-child {
    grid-template-areas:
      "index remove"
      "interval interval" !important;
  }

  #intervalTrainingPanel .sequence-row .mobile-direction-toggle .direction-mini-btn,
  #melodyTrainingPanel .melody-row .mobile-direction-toggle .direction-mini-btn {
    min-height: 36px;
    font-size: 20px;
  }
}

/* V138 – jump buttons between rhythm and pitches: phones only */
.pitch-jump-row,
.pitch-jump-btn.jump-to-rhythm {
  display: none;
}

@media (max-width: 760px) {
  .pitch-jump-row {
    display: grid;
    gap: 6px;
    margin-top: 10px;
  }

  .pitch-jump-row .pitch-jump-hint {
    margin: 0;
  }

  main:has(#modeMelody.active) .pitch-jump-row .pitch-jump-hint {
    display: none;
  }

  .pitch-jump-btn {
    width: 100%;
  }

  .pitch-jump-btn.jump-to-rhythm {
    display: block;
    margin-top: 8px;
  }

  #intervalTrainingPanel,
  #melodyTrainingPanel,
  section:has(#trainingNotationView) {
    scroll-margin-top: 12px;
  }
}


/* V138 – phones: Ear Training selection visible like in Melody Training */
@media (max-width: 760px) {
  /* same as the selected melody row on phones */
  #intervalTrainingPanel .sequence-row.selected-ear-sequence-row {
    outline: 2px solid #999;
    outline-offset: 2px;
    border-radius: 8px;
  }

  main:has(#modeInterval.active) #trainingNotationContainer .vex-pitch-label.ear-selected-pitch {
    font-weight: 800;
    fill: #111;
  }

  main:has(#modeInterval.active) #trainingNotationContainer .ear-selected-note {
    filter: drop-shadow(0 0 1.4px #666);
  }
}

/* V139 – phones: grid steps lower (still a comfortable tap target), bar titles like the notation */
@media (max-width: 760px) {
  #rhythmGrid .step {
    min-height: 46px;
    padding: 4px;
  }

  #rhythmGrid .bar-title {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
  }

  #rhythmGrid .bar {
    padding-top: 6px;
  }
}


/* =====================================================================
   V140 – Step 6: Design direction B «Studio dark» (Dom's choice).
   All colours live in these tokens. A second colour scheme (e.g. for the
   Drum Coach app) only needs a new set of values here.
   ===================================================================== */
:root {
  --bg: #16181b;          /* page */
  --panel: #202327;       /* cards */
  --panel-2: #1b1e22;     /* groups and rows inside cards */
  --field: #121417;       /* inputs, selects */
  --btn: #2c3036;         /* normal buttons, off steps */
  --btn-hover: #363b42;
  --line: #33373d;
  --ink: #e9e7e2;         /* text */
  --muted: #9aa0a6;       /* secondary text */
  --accent: #f2a93b;      /* amber: start, active choices, sliders */
  --accent-ink: #16181b;
  --on: #e9e7e2;          /* active steps (notes, metronome on) */
  --on-ink: #16181b;
  --paper: #f4f2ec;       /* notation cards: notes stay black on light paper */
  --paper-ink: #16181b;
  color-scheme: dark;
  color: var(--ink);
  background: var(--bg);
}

html, body { background: var(--bg) !important; color: var(--ink); }

/* Text */
main, main :is(h1, h2, h3, label, strong, b, p, span, small, div, legend) { color: var(--ink); }
main :is(.subtitle, .note, .save-status, .bar-title, .vexflow-bar-title, .rhythm-channel-hint) { color: var(--muted) !important; }
main h1, main h2, main h3, main label, main strong { color: var(--ink) !important; }

/* Byline */
header .byline {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent) !important;
}

/* Cards and groups */
.panel, section.transport {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
section.transport { background: rgba(22, 24, 27, .94) !important; }

.rhythmtrainer-safe-group, .rhythm-channel, .sequence-row, .mode-switch, .training-view-switch,
.training-rhythm-editor-type, #compactNotationEditor, #trainingRhythmNotationEditor {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
}

/* Fields */
main select, main input[type="number"], main input[type="text"] {
  background: var(--field) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
main input[type="range"], main input[type="checkbox"] { accent-color: var(--accent); }

/* Buttons */
main button { color: var(--ink); }
.secondary, .remove-tone, .direction-mini-btn, .melody-position-btn, .training-rhythm-value-btn,
.training-rhythm-type-btn, .mode-btn, .view-btn, .compact-note-btn, .tempo-step-btn, .danger {
  background: var(--btn) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.primary, .mode-btn.active, .view-btn.active, .melody-position-btn.active,
.training-rhythm-type-btn.active, .training-rhythm-value-btn.active, .direction-mini-btn.active,
#melodyKeyboardEditor #keyboardPositionSelector .melody-position-btn.active {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}
.primary *, .mode-btn.active *, .view-btn.active *, .melody-position-btn.active * { color: var(--accent-ink) !important; }

/* Steps: off = dark, on = light */
.step, .metro-step, .count-voice-step {
  background: var(--btn) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.step.active, .metro-step.active {
  background: var(--on) !important;
  color: var(--on-ink) !important;
  border-color: var(--on) !important;
}
.step.active *, .metro-step.active * { color: var(--on-ink) !important; }
.step.hold { background: #4a4f57 !important; color: var(--ink) !important; }
.count-voice-step .cv-bar, .metro-step .cv-bar { border-color: currentColor !important; }
.count-voice-step .cv-bar b, .metro-step .cv-bar b { background: var(--accent) !important; opacity: 1 !important; }

/* Notation stays black on light paper */
.vexflow-bar, #melodyNotation, .melody-notation {
  background: var(--paper) !important;
  color: var(--paper-ink) !important;
  border-color: var(--line) !important;
}
.vexflow-bar .vexflow-bar-title { color: #666 !important; }
.vex-pitch-label { fill: #444; }

/* Piano keys stay piano keys */
.piano-key.white-key { background: #f4f2ec !important; color: #16181b !important; }
.piano-key.black-key { background: #0d0e10 !important; color: #e9e7e2 !important; }
.piano-key.selected-key { outline-color: var(--accent) !important; }
#pianoKeyboard { background: transparent !important; }

/* Selection outlines visible on dark */
.selected-melody-row, #intervalTrainingPanel .sequence-row.selected-ear-sequence-row { outline-color: #8a9096 !important; border-color: #8a9096 !important; }

/* Playback marker keeps its own colour (decided in the next sub-step) */
#trainingBlocksView .step.current,
#metronomeGrid .metro-step.rt-current,
#countVoiceGrid .count-voice-step.rt-current {
  background: var(--play-accent) !important;
  border-color: var(--play-accent) !important;
  color: #fff !important;
}
#trainingBlocksView .step.current *, #metronomeGrid .metro-step.rt-current *, #countVoiceGrid .count-voice-step.rt-current * { color: #fff !important; }
#metronomeGrid .metro-step.rt-current.rt-soft,
#trainingBlocksView .step.current.current-hold {
  background: var(--play-accent-soft) !important;
  border-color: var(--play-accent-soft) !important;
}

/* V140 – contrast fixes found by the check */
main p, main .sequence-pitch, main [id$="VolumeValue"], main .training-rhythm-duration-label,
main .training-rhythm-selection-label { color: var(--muted) !important; }
.piano-key.white-key, .piano-key.white-key * { color: #16181b !important; }
.piano-key.black-key * { color: #e9e7e2 !important; }
.training-rhythm-value-btn *, .training-rhythm-type-btn * { color: inherit !important; }


/* =====================================================================
   V142 – Step 6b/6c: colours from Dom's Drum Coach app (its dark-mode values)
   ===================================================================== */
:root {
  --play-accent: #4fd29f;       /* «Mental» green: playing now */
  --play-accent-soft: #a5e9cd;  /* quieter / held */
  --play-ink: #16181b;          /* text on the green marker */
  --play-on-paper: #23946a;     /* same green, darker for notation on light paper */
  --c-rhythm: #3cc7dc;          /* «Timing & Rhythmik» turquoise: Rhythm Trainer */
  --c-ear: #79a0ff;             /* blue: Ear Training */
  --c-melody: #a68bff;          /* violet: Melody Training */
}

/* 6b – playback marker: green, dark text on it */
#trainingBlocksView .step.current,
#metronomeGrid .metro-step.rt-current,
#countVoiceGrid .count-voice-step.rt-current {
  color: var(--play-ink) !important;
  outline-color: var(--play-accent) !important;
}
#trainingBlocksView .step.current *,
#metronomeGrid .metro-step.rt-current *,
#countVoiceGrid .count-voice-step.rt-current * { color: var(--play-ink) !important; }
#metronomeGrid .metro-step.rt-current .cv-bar b,
#countVoiceGrid .count-voice-step.rt-current .cv-bar b { background: var(--play-ink) !important; }

main:has(#play) #trainingNotationContainer .vex-pitch-label.notation-current { fill: var(--play-on-paper) !important; }
#trainingNotationContainer .vex-play-note.notation-current-note,
#trainingNotationContainer .vex-play-note.notation-current-note * {
  fill: var(--play-on-paper) !important;
  stroke: var(--play-on-paper) !important;
}

/* Start / Stop: amber = ready, green = playing */
#play.is-running {
  background: var(--play-accent) !important;
  border-color: var(--play-accent) !important;
  color: var(--play-ink) !important;
}

/* 6c – areas: coloured top stripe and title */
.rhythmtrainer-panel { border-top: 4px solid var(--c-rhythm) !important; }
.rhythmtrainer-panel h2 { color: var(--c-rhythm) !important; }

/* V143 – Tempo (global): neutral light stripe */
section.panel.controls { border-top: 4px solid var(--ink) !important; }

/* V143 – Training: two layers, the same in Ear and Melody Training.
   Rhythm layer = blue, pitch layer (Intervals / Melody) = violet.
   The Ear/Melody switch opens the training block with the blue stripe. */
.training-select-panel { border-top: 4px solid var(--c-ear) !important; }
section.panel:has(#trainingRhythmTitle) { border-top: 4px solid var(--c-ear) !important; }
#trainingRhythmTitle { color: var(--c-ear) !important; }
#intervalTrainingPanel, #melodyTrainingPanel { border-top: 4px solid var(--c-melody) !important; }
#intervalTrainingPanel h2, #melodyTrainingPanel h2 { color: var(--c-melody) !important; }

/* Key subtitles in the area colour: Metronome, Counting Voice, Sequence */
.rhythmtrainer-panel .rhythm-channel-title strong { color: var(--c-rhythm) !important; }
#intervalTrainingPanel #sequenceList { margin-top: 0; }
#intervalTrainingPanel .control.grow > label:first-child { color: var(--c-melody) !important; }
#melodyTrainingPanel .melody-sequence-control > label:first-child { color: var(--c-melody) !important; }

/* V145 – training volume next to On; volume 0 in red at the slider */
.training-volume-control {
  margin: 6px 0 10px;
}
.training-volume-control .volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.training-volume-control input[type="range"] { flex: 1 1 auto; min-width: 0; }
main input[type="range"].volume-zero { accent-color: #ff6b6b; }
main .volume-zero, main [id$="VolumeValue"].volume-zero { color: #ff6b6b !important; font-weight: 800; }
.melody-volume-control[hidden] { display: none !important; }


/* V146 – Green = on / playing, everywhere (Dom).
   Checkboxes drawn by the app, so phone and desktop look the same: off = grey, on = green. */
main input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0 8px 0 0;
  border-radius: 6px;
  border: 1.5px solid #5a6069;
  background: var(--btn);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  vertical-align: middle;
}
main input[type="checkbox"]::after {
  content: "";
  width: 6px;
  height: 12px;
  border: solid var(--play-ink);
  border-width: 0 3px 3px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
}
main input[type="checkbox"]:checked {
  background: var(--play-accent);
  border-color: var(--play-accent);
}
main input[type="checkbox"]:checked::after { opacity: 1; }
main input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Start: light when ready, green when playing */
#play.primary:not(.is-running) {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--bg) !important;
}


/* V147 – the three volume sliders: same on phone and desktop.
   Green fill left of the thumb, grey right; light thumb, a bit larger; «Volume» label in green.
   At 0: red label and %, no fill. */
main input[type="range"].volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  background: transparent;
  cursor: pointer;
  accent-color: auto;
}
main input[type="range"].volume-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--play-accent) 0 var(--fill, 75%), #3a3f46 var(--fill, 75%) 100%);
}
main input[type="range"].volume-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #3a3f46;
}
main input[type="range"].volume-slider::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--play-accent);
}
main input[type="range"].volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
main input[type="range"].volume-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
main input[type="range"].volume-slider.volume-zero::-webkit-slider-thumb { background: #ff6b6b; }
main input[type="range"].volume-slider.volume-zero::-moz-range-thumb { background: #ff6b6b; }

main label.volume-label { color: var(--play-accent) !important; font-size: 1.05em; }
main label.volume-label.volume-zero { color: #ff6b6b !important; }


/* =====================================================================
   V148 – the four sliders look and sit the same (Tempo, 3× Volume)
   ===================================================================== */

/* Tempo slider: same shape as the volume sliders, amber fill (a setting, not «on») */
main input[type="range"].tempo-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  accent-color: auto;
}
main input[type="range"].tempo-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 0 var(--fill, 25%), #3a3f46 var(--fill, 25%) 100%);
}
main input[type="range"].tempo-slider::-moz-range-track { height: 8px; border-radius: 999px; background: #3a3f46; }
main input[type="range"].tempo-slider::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); }
main input[type="range"].tempo-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
main input[type="range"].tempo-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* Desktop: every slider gets its own full-width row, like on the phone */
@media (min-width: 761px) {
  section.panel.controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }
  section.panel.controls > .control { width: 100%; }
  .tempo-control-wrap { width: 100%; }
  .tempo-control-wrap #bpm { width: 100% !important; max-width: none !important; }

  .rhythmtrainer-safe-group .rhythm-channel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: end;
  }
  .rhythmtrainer-safe-group .rhythm-channel-title { grid-column: 1 / -1 !important; }
  .rhythmtrainer-safe-group .rhythm-channel-sound { grid-column: 1 !important; }
  .rhythmtrainer-safe-group .rhythm-channel-raster { grid-column: 2 !important; }
  .rhythmtrainer-safe-group.rhythmtrainer-safe-count .rhythm-channel-raster { grid-column: 1 !important; }
  .rhythmtrainer-safe-group .rhythm-channel-spacer { display: none !important; }
  .rhythmtrainer-safe-group .rhythm-channel-volume { grid-column: 1 / -1 !important; width: 100%; }
  .rhythmtrainer-safe-group .rhythm-channel-volume .volume-row,
  .training-volume-control .volume-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  .rhythmtrainer-safe-group .rhythm-channel-volume input[type="range"],
  .training-volume-control input[type="range"] { flex: 1 1 auto; width: auto !important; min-width: 0; }
}
@media (min-width: 761px) {
  main [id$="VolumeValue"] { flex: 0 0 48px; width: 48px; text-align: right; }
  .tempo-control-wrap #bpm { width: calc(100% - 60px) !important; }
}
@media (min-width: 761px) {
  .rhythmtrainer-safe-group .rhythm-channel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rhythmtrainer-safe-group .rhythm-channel-title { grid-column: 1 !important; grid-row: 1 !important; }
  .rhythmtrainer-safe-group .rhythm-channel-toggle {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end;
    align-self: center;
  }
}
@media (min-width: 761px) {
  .rhythmtrainer-safe-group .rhythm-channel-sound,
  .rhythmtrainer-safe-group .rhythm-channel-raster { grid-row: 2 !important; }
  .rhythmtrainer-safe-group .rhythm-channel-volume { grid-row: 3 !important; }
}

/* V149 (6d) – mini notation above the keyboard (phones) */
.keyboard-mini-notation[hidden] { display: none !important; }
.keyboard-mini-notation { margin: 10px 0 8px; }
.keyboard-mini-notation .vexflow-bar { margin: 0; }

/* selected note in the mini notation: amber = selected (darker amber for contrast on paper) */
.keyboard-mini-notation .vex-pitch-label.melody-selected-pitch { fill: #b36a00 !important; font-weight: 900; }
.keyboard-mini-notation .melody-selected-note,
.keyboard-mini-notation .melody-selected-note * { fill: #b36a00 !important; stroke: #b36a00 !important; }

/* ===== V151 (Step 7): melody editor note by note ===== */
.note-editor { margin-top: 6px; }
.note-editor-hint { margin: 0 0 10px; }
.note-editor-score {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 761px) {
  .note-editor-score { grid-template-columns: 1fr 1fr; }
}
.note-editor-score .vexflow-bar { margin-bottom: 0; }
.note-editor-score .vexflow-score { position: relative; }
.note-editor-score .vexflow-score svg {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
}
.note-editor-score .ne-selected,
.note-editor-score .ne-selected * { fill: #b36a00 !important; stroke: #b36a00 !important; }
.note-editor-score .vex-pitch-label.ne-selected-label { fill: #b36a00 !important; font-weight: 900; }
.note-editor-score .melody-selected-note { filter: none !important; }
.note-editor-score .vex-pitch-label.melody-selected-pitch:not(.ne-selected-label) {
  font-weight: inherit; text-decoration: none; fill: #555 !important;
}
.ne-hit-layer { position: absolute; inset: 0; }
.ne-hit {
  position: absolute; top: 0; bottom: 0;
  background: transparent !important; border: 0 !important; padding: 0; margin: 0;
  min-height: 0; border-radius: 6px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ne-hit:hover, .ne-hit:focus-visible { background: rgba(242, 169, 59, .14) !important; outline: none; }

.ne-bar-nav { display: none; }
@media (max-width: 760px) {
  .ne-bar-nav {
    display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
    margin-bottom: 6px; text-align: center; font-weight: 700; font-size: 14px; color: var(--muted);
  }
  .ne-bar-nav button { min-height: 36px; padding: 0; font-size: 20px; }
}

.ne-selection { display: flex; gap: 12px; align-items: baseline; margin: 12px 0 6px; flex-wrap: wrap; }
.ne-selection strong { font-size: 16px; }
.ne-lbl { font-weight: 700; font-size: 14px; color: var(--muted); min-width: 72px; }
.ne-columns { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 900px) {
  .ne-columns { grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
}
.ne-row { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.ne-row > .ne-lbl { padding-top: 12px; flex: 0 0 72px; }
.ne-buttons { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.ne-len-btn {
  min-width: 52px; min-height: 46px; padding: 3px 8px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
}
.ne-len-btn .ne-glyph { font-size: 21px; }
.ne-len-btn .ne-short { font-size: 11px; font-weight: 700; opacity: .8; }
.ne-rest-btn { font-size: 15px; }
.ne-len-btn.active, .ne-dir-btn.active {
  background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important;
}
.ne-len-btn.active *, .ne-dir-btn.active * { color: var(--accent-ink) !important; }
.ne-pitch { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; align-items: center; flex: 1; max-width: 340px; }
.ne-pitch button { min-height: 46px; font-size: 22px; padding: 0; }
.ne-pitch-name {
  text-align: center; font-size: 28px; font-weight: 900; padding: 3px 0;
  background: var(--field); border: 1px solid var(--line); border-radius: 10px;
}
.ne-iv-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ne-dir { display: flex; gap: 6px; }
.ne-dir-btn { min-height: 38px; padding: 4px 12px; font-size: 14px; }
.ne-iv-btn { min-width: 52px; min-height: 40px; padding: 4px 8px; font-size: 14px; }
.ne-interval-info { margin: 0 0 0 82px; font-size: 14px; color: var(--c-melody); min-height: 1.2em; }
.note-editor-keyboard { margin-top: 8px; }
.ne-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ne-nav button { min-height: 48px; font-size: 17px; }
.ne-next { background: var(--on) !important; color: var(--on-ink) !important; border-color: var(--on) !important; }
.ne-next:disabled { opacity: .45; }
.ne-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ne-tools button { min-height: 40px; font-size: 14px; }
.ne-message { margin: 8px 0 0; font-size: 14px; color: var(--accent); }
@media (max-width: 760px) {
  .ne-row > .ne-lbl { flex-basis: 58px; min-width: 58px; }
  .ne-interval-info { margin-left: 68px; }
  .ne-len-btn { min-width: 46px; flex: 1 1 46px; }
  .ne-iv-btn { min-width: 0; flex: 1 1 44px; padding: 4px 4px; }
}
/* V151: in «Note by note» the sequence tools are not shown */
#melodyTrainingPanel:has(#melodyNoteEditor:not([hidden])) #melodyListEditor,
#melodyTrainingPanel:has(#melodyNoteEditor:not([hidden])) #melodySequenceModeHost,
#melodyTrainingPanel:has(#melodyNoteEditor:not([hidden])) .melody-sequence-note { display: none !important; }
#melodyTrainingPanel:has(#melodyNoteEditor[hidden]) .melody-notes-note { display: none; }
.ne-columns { grid-template-columns: minmax(0, 1fr); }
.ne-col { min-width: 0; }
@media (min-width: 900px) {
  .ne-columns { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #neLengths, .ne-intervals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ne-len-btn, .ne-iv-btn { min-width: 0; }
}
.note-editor-score .vex-pitch-label { font-size: 13px; }
@media (min-width: 761px) {
  .note-editor-score .vex-pitch-label { font-size: 17px; font-weight: 600; }
  .note-editor-score .vexflow-bar { padding: 6px 8px 2px; }
}
#noteEditorScore .vex-play-note.notation-current-note,
#noteEditorScore .vex-play-note.notation-current-note * { fill: var(--play-on-paper) !important; stroke: var(--play-on-paper) !important; }

/* V152: phones – the whole note editor (bar, lengths, pitch, intervals, keys, Back/Next) fits on one screen */
@media (max-width: 760px) {
  .note-editor-score .vexflow-bar-title { display: none; }
  .note-editor-score .vexflow-bar { padding: 4px 6px 2px; }
  .ne-selection { display: none; }
  .ne-bar-nav { grid-template-columns: 36px 1fr 36px; gap: 6px; margin-bottom: 6px; font-size: 13px; color: var(--ink); }
  .ne-bar-nav button { min-height: 32px; font-size: 18px; }
  .ne-columns { gap: 8px; margin-top: 8px; }
  .ne-columns > .ne-col:first-child {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center;
  }
  .ne-columns > .ne-col:first-child .ne-row,
  .ne-columns > .ne-col:first-child .ne-iv-wrap { display: contents; }
  .ne-columns > .ne-col:first-child .ne-lbl { display: none; }
  #neLengths { grid-column: 1 / -1; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .ne-len-btn { min-height: 42px; padding: 2px 0; }
  .ne-len-btn .ne-short { font-size: 10px; }
  .ne-len-btn .ne-glyph svg { width: 18px; height: 20px; display: block; }
  .ne-rest-btn { font-size: 13px; }
  .ne-pitch { grid-column: 1; max-width: none; grid-template-columns: 42px 1fr 42px; gap: 6px; }
  .ne-pitch button { min-height: 40px; font-size: 20px; }
  .ne-pitch-name { font-size: 22px; padding: 2px 0; }
  .ne-dir { grid-column: 2; gap: 4px; }
  .ne-dir-btn { min-height: 40px; padding: 2px 10px; font-size: 13px; }
  .ne-intervals { grid-column: 1 / -1; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 4px; }
  .ne-iv-btn { min-height: 36px; padding: 2px 0; font-size: 13px; }
  .ne-interval-info { grid-column: 1 / -1; margin: 0; font-size: 13px; }
  .note-editor-keyboard { height: 118px; margin: 0 0 8px; padding: 0 6px 6px; }
  .note-editor-keyboard .white-key { height: 108px; }
  .note-editor-keyboard .black-key { height: 66px; }
  .ne-nav button { min-height: 44px; font-size: 16px; }
}
.ne-len-btn .ne-glyph svg { display: block; }
@media (max-width: 360px) {
  .ne-dir-word { display: none; }
  .ne-dir-btn { padding: 2px 14px; font-size: 16px; }
  .ne-iv-btn { font-size: 11px; }
}

/* V154: account button and dialog */
header { position: relative; }
.account-button {
  position: absolute; bottom: -8px; right: 0; /* in the «Auto-saved» row, title stays one line */
  background: var(--btn); color: var(--ink);
  border: 1px solid var(--line);
  padding: 7px 12px; font-size: 14px;
}
.account-button:hover { background: var(--btn-hover); }
.account-button.signed-in::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px;
  border-radius: 50%; background: var(--play-accent); vertical-align: 1px;
}

.account-dialog {
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 20px 18px;
  font-family: inherit;
}
.account-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.account-dialog h2 { margin: 0 0 6px; font-size: 22px; color: var(--ink); }
.account-dialog form, .account-dialog [data-account-view] { display: flex; flex-direction: column; gap: 8px; }
.account-dialog [hidden] { display: none !important; }
.account-dialog label { font-weight: 700; font-size: 14px; margin-top: 6px; color: var(--ink); }
.account-dialog label small { font-weight: 400; color: var(--muted); }
.account-dialog input {
  background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 12px; font-size: 16px; /* 16px: no zoom on iPhone */
  width: 100%; box-sizing: border-box;
}
.account-dialog input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.account-lead, .account-switch, .account-sync { color: var(--muted); font-size: 14px; margin: 0; }
.account-email { font-weight: 700; margin: 4px 0; word-break: break-all; }
.account-sync.offline { color: var(--accent); }
.account-error { color: #ff7b72; font-size: 14px; margin: 0; min-height: 0; }
.account-error:empty, .account-info:empty { display: none; }
.account-info { color: var(--play-accent); font-size: 14px; margin: 0; }
.account-primary { background: var(--on); color: var(--on-ink); margin-top: 8px; padding: 12px; font-size: 16px; }
.account-secondary { background: var(--btn); color: var(--ink); border: 1px solid var(--line); margin-top: 8px; padding: 12px; }
.account-link {
  background: none; color: var(--accent); padding: 6px 0; font-weight: 700; font-size: 14px;
  align-self: flex-start;
}
.account-switch .account-link { display: inline; padding: 0; }
.account-close {
  position: absolute; top: 8px; right: 8px;
  background: none; color: var(--muted); font-size: 26px; line-height: 1; padding: 4px 10px;
}