/* =========================================================================
   Meldo Chord & Leadsheet – Design-Refresh (v1.21.10)
   Wird NACH style.css + quiz.css geladen und erneuert die Optik im
   einheitlichen Meldo-App-Stil (Türkis/Grün/Flamme). Struktur, IDs und
   Klassen bleiben unverändert – die funktionale Keyboard-/Quiz-Logik wird
   nicht angetastet. Reiner visueller Reskin.
   ========================================================================= */

.meldo-chords-app {
  --m-turq: #3D7C85;
  --m-turq-d: #1F737A;
  --m-green: #E8924F;
  --m-green-d: #E57921;
  --m-flame: #FF8A3D;
  --m-ink: #15240a;
  --m-text: #1b2a33;
  --m-muted: #6b7785;
  --m-surface: #ffffff;
  --m-bg: #F7F8F8;
  --m-border: #e6eef0;
  --m-radius: 18px;
  --m-radius-sm: 12px;
  --m-shadow: 0 10px 30px rgba(61, 124, 133, 0.08);
  --m-shadow-sm: 0 4px 14px rgba(61, 124, 133, 0.08);

  font-family: Akko, Montserrat, system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--m-text);
}

/* ---------- Tabs ---------- */
.meldo-chords-app .meldo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}
.meldo-chords-app .meldo-tab {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--m-border);
  background: #fff;
  color: var(--m-text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.meldo-chords-app .meldo-tab:hover { transform: translateY(-1px); box-shadow: var(--m-shadow-sm); }
.meldo-chords-app .meldo-tab.is-active {
  background: linear-gradient(135deg, var(--m-green) 0%, var(--m-green-d) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(232, 146, 79, 0.32);
}
/* Der Quiz-Reiter hatte bis 1.90.5 einen eigenen Farbverlauf. Seit 1.90.6
   sieht jeder Ansichtswechsler in jedem Werkzeug gleich aus; der rote Punkt
   (quiz-highlight.css) bleibt als Hinweis. */
.meldo-chords-app .meldo-tab-quiz { position: relative; }
.meldo-chords-app .meldo-ico {
  width: 1.15em; height: 1.15em;
  vertical-align: -0.18em;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes meldoQuizFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
.meldo-chords-app .meldo-help-btn {
  margin-left: auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--m-border);
  background: #fff;
  color: var(--m-turq);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--m-shadow-sm);
  transition: transform 0.12s ease;
}
.meldo-chords-app .meldo-help-btn:hover { transform: scale(1.06); }

/* ---------- Panels / Karten ---------- */
.meldo-chords-app .meldo-panel {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 22px;
  box-shadow: var(--m-shadow);
}

/* ---------- Section-Header ---------- */
.meldo-chords-app .meldo-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.meldo-chords-app .meldo-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--m-text);
  letter-spacing: -0.01em;
}
.meldo-chords-app .meldo-header h3 { margin: 0; font-weight: 700; }

/* ---------- Toolbar / Selektoren ---------- */
.meldo-chords-app .meldo-toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.meldo-chords-app .meldo-toolbar > label,
.meldo-chords-app .meldo-keyboard-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m-muted);
}
.meldo-chords-app .meldo-select,
.meldo-chords-app .meldo-keyboard-controls select,
.meldo-chords-app #meldo-song-title,
.meldo-chords-app #meldo-section-color,
.meldo-chords-app .meldo-export input {
  padding: 11px 14px;
  border-radius: var(--m-radius-sm);
  border: 1px solid var(--m-border);
  background: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--m-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.meldo-chords-app .meldo-select:focus,
.meldo-chords-app .meldo-keyboard-controls select:focus,
.meldo-chords-app #meldo-song-title:focus,
.meldo-chords-app #meldo-free-notes:focus,
.meldo-chords-app .meldo-export input:focus {
  outline: none;
  border-color: var(--m-turq);
  box-shadow: 0 0 0 3px rgba(61, 124, 133, 0.14);
}
.meldo-chords-app .meldo-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--m-text);
  border: 1px solid var(--m-border); background: #fff;
  padding: 9px 14px; border-radius: 999px;
}
.meldo-chords-app .meldo-toggle input { width: 16px; height: 16px; accent-color: var(--m-turq); }

/* ---------- Buttons (leicht & schlank) ---------- */
.meldo-chords-app .meldo-btn,
.meldo-chords-app .meldo-btn-primary {
  border: none;
  border-radius: 999px;
  padding: 9px 17px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--m-turq) 0%, var(--m-turq-d) 100%);
  box-shadow: 0 3px 10px rgba(61, 124, 133, 0.18);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.meldo-chords-app .meldo-btn:hover,
.meldo-chords-app .meldo-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.meldo-chords-app .meldo-btn:active { transform: translateY(1px) scale(0.99); }

/* Play-Buttons (Arpeggio / Zusammen) – dezent, leicht */
.meldo-chords-app .meldo-btn-play {
  border: 1px solid rgba(61, 124, 133, 0.25);
  border-radius: 999px;
  padding: 8px 15px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--m-turq-d);
  background: rgba(61, 124, 133, 0.08);
  box-shadow: none;
  transition: transform 0.12s ease, background 0.18s ease;
}
.meldo-chords-app .meldo-btn-play:hover { background: rgba(61, 124, 133, 0.14); transform: translateY(-1px); }

.meldo-chords-app .meldo-btn.meldo-secondary,
.meldo-chords-app .meldo-btn-secondary,
.meldo-chords-app .meldo-btn-back {
  background: #fff;
  color: var(--m-text);
  border: 1px solid var(--m-border);
  box-shadow: var(--m-shadow-sm);
  font-weight: 600;
}
.meldo-chords-app .meldo-btn.meldo-secondary:hover,
.meldo-chords-app .meldo-btn-secondary:hover,
.meldo-chords-app .meldo-btn-back:hover { background: #F8F9FA; }

/* „Akkord zur Progression hinzufügen“ – grün, schlank */
.meldo-chords-app #meldo-add-to-prog {
  background: linear-gradient(135deg, var(--m-green) 0%, var(--m-green-d) 100%);
  box-shadow: 0 3px 10px rgba(232, 146, 79, 0.22);
  padding: 10px 20px;
  font-weight: 600;
}
.meldo-chords-app #meldo-add-to-prog:hover { filter: brightness(1.05); transform: translateY(-1px) scale(1.0); }

.meldo-chords-app .meldo-chord-actions { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Akkord-Notensystem ---------- */
.meldo-chords-app .meldo-chord-staff-wrap { display: flex; justify-content: center; margin: 4px 0 16px; }
.meldo-chords-app .meldo-chord-staff {
  width: 100%;
  max-width: 540px;
  background: linear-gradient(180deg, #ffffff 0%, #FAFBFB 100%);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 10px 16px 6px;
  box-shadow: var(--m-shadow-sm);
}
.meldo-chords-app .meldo-chord-staff svg { display: block; margin: 0 auto; }

/* ---------- Keyboard-Wrapper (Innenleben bleibt) ---------- */
.meldo-chords-app .meldo-keyboard-wrapper {
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 16px;
}
.meldo-chords-app .meldo-keyboard-controls { margin-bottom: 12px; }

/* ---------- Progression-Board + Tiles ---------- */
.meldo-chords-app .meldo-prog-board {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 14px;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  min-height: 84px;
}
.meldo-chords-app .meldo-chord-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--m-shadow-sm);
  cursor: grab;
}
.meldo-chords-app .meldo-chord-tile strong { font-size: 0.9rem; color: var(--m-text); }

/* ---------- Leadsheet ---------- */
.meldo-chords-app .meldo-leadsheet { margin-top: 14px; gap: 12px; }
.meldo-chords-app .meldo-row {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 14px;
  box-shadow: var(--m-shadow-sm);
  overflow: hidden;
}
.meldo-chords-app .meldo-row-header {
  border-bottom: 1px solid var(--m-border);
  padding: 8px 12px;
  font-weight: 700;
}
.meldo-chords-app .meldo-row-header .badge { border-radius: 999px; padding: 4px 10px; font-size: 0.72rem; }
.meldo-chords-app .meldo-measure { border-right: 1px solid var(--m-border); }
.meldo-chords-app .meldo-measure.drag-over .drop-hint { border-color: var(--m-turq); }

/* ---------- Float-Palette ---------- */
.meldo-chords-app #meldo-float-palette,
#meldo-float-palette {
  border-radius: var(--m-radius);
  border: 1px solid var(--m-border);
  box-shadow: var(--m-shadow);
  overflow: hidden;
}
#meldo-float-palette .meldo-float-header {
  background: linear-gradient(135deg, var(--m-turq) 0%, var(--m-turq-d) 100%);
  color: #fff;
}
#meldo-float-palette .meldo-float-title h4 { color: #fff; }
#meldo-float-palette .meldo-float-title p { color: rgba(255,255,255,0.85); }
#meldo-float-palette .meldo-chord-chip {
  border: 1px solid var(--m-border);
  border-radius: 12px;
  box-shadow: var(--m-shadow-sm);
}

/* ---------- Export / Notes ---------- */
.meldo-chords-app .meldo-export { gap: 14px; align-items: flex-end; }
.meldo-chords-app .meldo-export > label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--m-muted);
}
.meldo-chords-app #meldo-free-notes {
  width: 100%; min-height: 96px;
  padding: 12px 14px;
  border-radius: var(--m-radius-sm);
  border: 1px solid var(--m-border);
  font-family: inherit; font-size: 0.95rem;
}
.meldo-chords-app .meldo-notes label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--m-muted); margin-top: 14px;
}
.meldo-chords-app .meldo-hint, .meldo-chords-app .meldo-prog-help { color: var(--m-muted); font-size: 0.82rem; }

/* ---------- Quiz: einheitlicher Look ---------- */
.meldo-chords-app .meldo-quiz-container { background: transparent; }
.meldo-chords-app .meldo-quiz-header {
  background: linear-gradient(135deg, var(--m-turq) 0%, var(--m-green) 100%);
  color: #fff;
  border-radius: var(--m-radius);
  padding: 22px 26px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 12px 30px rgba(61, 124, 133, 0.22);
}
/* Verlaufs-Text zurücksetzen, damit der Titel auf dem Banner sichtbar ist */
.meldo-chords-app .meldo-quiz-title {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
.meldo-chords-app .meldo-quiz-title h1 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
}
.meldo-chords-app .meldo-quiz-title p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; }
.meldo-chords-app .meldo-quiz-stats-compact {
  display: flex; gap: 14px; flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--m-ink);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.meldo-chords-app .meldo-quiz-stats-compact * { color: var(--m-ink); }
.meldo-chords-app .meldo-mode-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.meldo-chords-app .meldo-mode-tab {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--m-border); background: #fff;
  font-weight: 700; color: var(--m-text); cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.meldo-chords-app .meldo-mode-tab:hover { transform: translateY(-1px); box-shadow: var(--m-shadow-sm); }
.meldo-chords-app .meldo-mode-tab.is-active,
.meldo-chords-app .meldo-mode-tab.active {
  background: linear-gradient(135deg, var(--m-turq) 0%, var(--m-turq-d) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 5px 14px rgba(61, 124, 133, 0.26);
}
.meldo-chords-app .meldo-quiz-play-screen {
  background: #fff; border: 1px solid var(--m-border);
  border-radius: var(--m-radius); padding: 18px; box-shadow: var(--m-shadow);
}

/* ---------- Punkte-Box (Leaderboard-Fortschritt) ---------- */
.meldo-chords-app h3 { color: var(--m-text); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .meldo-chords-app .meldo-panel { padding: 16px; }
  .meldo-chords-app .meldo-header h2 { font-size: 1.25rem; }
  .meldo-chords-app .meldo-tab { padding: 9px 15px; font-size: 0.88rem; }
}

/* Mini-Notensystem in Progression/Leadsheet (Darstellung „Notation“) */
.meldo-chords-app .meldo-mini-staff { display: flex; justify-content: center; }
.meldo-chords-app .meldo-mini-staff svg { display: block; }

/* ============================================================
   Eigene Progression – Zwei-Zonen-Layout (Palette + Leadsheet)
   ============================================================ */
.meldo-chords-app .meldo-pb {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  margin-top: 6px;
  align-items: start;
}

/* Palette (Desktop: angedockte Seitenleiste) */
.meldo-chords-app .meldo-palette {
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 14px;
  position: sticky;
  top: 12px;
}
.meldo-chords-app .meldo-palette-title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--m-text); }
.meldo-chords-app .meldo-palette-sub { margin: 0 0 12px; font-size: 0.78rem; color: var(--m-muted); }
.meldo-chords-app .meldo-palette-chips { display: flex; flex-direction: column; gap: 10px; }
.meldo-chords-app .meldo-chord-chip {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--m-border);
  border-radius: 14px; padding: 8px 10px;
  box-shadow: var(--m-shadow-sm); cursor: grab;
  transition: transform .12s ease, box-shadow .18s ease, border-color .15s ease;
}
.meldo-chords-app .meldo-chord-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(61,124,133,.14); border-color: rgba(61,124,133,.35); }
.meldo-chords-app .meldo-chord-chip strong { font-size: 0.95rem; }
.meldo-chords-app .meldo-chord-chip svg { max-width: 100%; height: auto; }
.meldo-chords-app .meldo-chip-del {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--m-border); background: #fff; color: #64748b;
  font-size: 12px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.meldo-chords-app .meldo-chord-chip:hover .meldo-chip-del { display: flex; }
.meldo-chords-app .meldo-palette-empty {
  font-size: 0.82rem; color: var(--m-muted);
  background: #fff; border: 1px dashed var(--m-border);
  border-radius: 12px; padding: 12px;
}
.meldo-chords-app .meldo-palette-add {
  width: 100%; margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed rgba(61,124,133,.4); border-radius: 14px; padding: 11px;
  color: var(--m-turq-d); font-weight: 700; font-family: inherit; font-size: 0.9rem;
  background: rgba(61,124,133,.05); cursor: pointer;
}
.meldo-chords-app .meldo-palette-add:hover { background: rgba(61,124,133,.1); }
.meldo-chords-app .meldo-palette-picker {
  margin-top: 10px; background: #fff; border: 1px solid var(--m-border);
  border-radius: 14px; padding: 12px; display: none; flex-direction: column; gap: 10px;
  box-shadow: var(--m-shadow-sm);
}
.meldo-chords-app .meldo-palette-picker.open { display: flex; }
.meldo-chords-app .meldo-picker-row { display: flex; gap: 8px; }
.meldo-chords-app .meldo-picker-row select { flex: 1; min-width: 0; }

/* Abspielen-Button grün */
.meldo-chords-app .meldo-play-prog {
  background: linear-gradient(135deg, var(--m-green) 0%, var(--m-green-d) 100%);
  box-shadow: 0 3px 10px rgba(232,146,79,.22);
}

/* Leadsheet-Slots (Antippen-Modell) */
.meldo-chords-app .meldo-sheet { display: flex; flex-direction: column; gap: 14px; }
.meldo-chords-app .meldo-sheet .meldo-measure {
  min-height: 132px; cursor: pointer;
  flex-direction: column; gap: 6px; padding: 8px;
  transition: background .15s ease;
}
.meldo-chords-app .meldo-sheet .meldo-measure:hover { background: rgba(61,124,133,.04); }
.meldo-chords-app .meldo-sheet .meldo-measure.is-active { box-shadow: inset 0 0 0 2.5px var(--m-turq); border-radius: 8px; background: rgba(61,124,133,.06); }
.meldo-chords-app .meldo-sheet .meldo-measure.drag-over { background: rgba(232,146,79,.12); box-shadow: inset 0 0 0 2.5px var(--m-green); border-radius: 8px; }
.meldo-chords-app .meldo-sheet .meldo-measure.is-playing { background: rgba(255,138,61,.18); box-shadow: inset 0 0 0 2.5px var(--m-flame); border-radius: 8px; }
.meldo-chords-app .meldo-measure-plus { color: #c2ccd2; font-size: 1.7rem; font-weight: 700; pointer-events: none; }

/* Akkord im Slot: Name oben (prominent), Bild darunter; Visual passt sich an */
.meldo-chords-app .meldo-sheet .meldo-measure .chord {
  position: static;            /* X verankert am Takt, nicht an der Akkord-Box */
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding-right: 0; width: 100%;
}
.meldo-chords-app .meldo-sheet .meldo-measure .chord > span {
  order: -1;                   /* Akkordname über das Notenbild */
  font-size: 0.98rem; font-weight: 800; color: var(--m-text); letter-spacing: -0.01em;
}
.meldo-chords-app .meldo-sheet .meldo-mini-staff { width: 100%; display: flex; justify-content: center; }
.meldo-chords-app .meldo-sheet .meldo-measure .chord svg {
  width: 100% !important; max-width: 140px; height: auto !important;
}
.meldo-chords-app .meldo-sheet .meldo-measure-del {
  position: absolute; top: 6px; right: 6px; left: auto; bottom: auto;
  width: 20px; height: 20px; z-index: 16;
}

/* Mobile: Palette als horizontaler Streifen oben */
@media (max-width: 760px) {
  .meldo-chords-app .meldo-pb { grid-template-columns: 1fr; }
  .meldo-chords-app .meldo-palette { position: static; }
  .meldo-chords-app .meldo-palette-chips { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .meldo-chords-app .meldo-chord-chip { flex: 0 0 auto; flex-direction: column; }
  .meldo-chords-app .meldo-palette-add { width: auto; }
}

/* Quiz-Modus „Noten Erkennen": Notensystem statt Klaviatur */
.meldo-chords-app .quiz-staff-wrapper { display: flex; justify-content: center; margin: 10px 0 18px; }
.meldo-chords-app .quiz-staff {
  width: 100%; max-width: 460px;
  background: linear-gradient(180deg, #ffffff 0%, #FAFBFB 100%);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 12px 16px 8px;
  box-shadow: var(--m-shadow-sm);
}
.meldo-chords-app .quiz-staff svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }

/* Quiz-Modus „Noten Schreiben": interaktives Notensystem + Vorzeichen-Buttons */
.meldo-chords-app .quiz-write-staff { width: 100%; max-width: 460px; margin: 0 auto; touch-action: none; }
.meldo-chords-app .quiz-write-staff svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.meldo-chords-app .quiz-acc-buttons { display: flex; gap: 10px; justify-content: center; margin: 6px 0 8px; }
.meldo-chords-app .quiz-acc {
  width: 58px; height: 48px; border-radius: 14px;
  border: 1px solid var(--m-border); background: #fff; color: #1a2b3c;
  font-family: 'Bravura', serif; font-size: 30px; line-height: 1; cursor: pointer;
  box-shadow: var(--m-shadow-sm); display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .15s ease;
}
.meldo-chords-app .quiz-acc:hover { transform: translateY(-1px); }
.meldo-chords-app .quiz-acc.on { background: var(--m-turq); color: #fff; border-color: transparent; }
.meldo-chords-app .quiz-write-active { color: var(--m-muted); font-size: 0.82rem; margin: 2px 0 10px; min-height: 18px; text-align: center; }
.meldo-chords-app .quiz-write-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }

/* ============================================================
   Meldo SVG-Icon-Set – Einfärbung, Ausrichtung & Tab-Upgrade
   ============================================================ */
.meldo-chords-app .meldo-ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* Quiz-Modi als Karten: Icon über Label */
.meldo-chords-app .meldo-mode-tab {
  flex-direction: column; gap: 7px;
  padding: 12px 8px; border-radius: 16px;
  border: 1px solid var(--m-border); background: #fff;
  font-size: 0.82rem; font-weight: 700; color: var(--m-muted);
  box-shadow: 0 2px 8px rgba(61, 124, 133, 0.05);
}
.meldo-chords-app .meldo-mode-tab .mode-icon { line-height: 0; color: var(--m-turq); transition: color 0.18s ease; }
.meldo-chords-app .meldo-mode-tab:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(61, 124, 133, 0.14); background: #fff; }
.meldo-chords-app .meldo-mode-tab.active,
.meldo-chords-app .meldo-mode-tab.is-active {
  background: linear-gradient(135deg, var(--m-turq) 0%, var(--m-turq-d) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 24px rgba(61, 124, 133, 0.28);
}
.meldo-chords-app .meldo-mode-tab.active .mode-icon,
.meldo-chords-app .meldo-mode-tab.is-active .mode-icon { color: #fff; }

/* Titel-Icon (Banner) + Statuszeilen-Icons (weisses Pill -> türkis) */
.meldo-chords-app .meldo-quiz-title .title-ico { line-height: 0; vertical-align: -0.18em; margin-right: 0.18em; }
.meldo-chords-app .stat-compact .stat-icon { line-height: 0; color: var(--m-turq); }

/* Custom-Training-Titel */
.meldo-chords-app .meldo-custom-creator .title-ico { line-height: 0; vertical-align: -0.16em; margin-right: 0.2em; color: var(--m-turq); }

/* Level-Sterne: grau / gold (SVG via currentColor) */
.meldo-chords-app .level-stars .star,
.meldo-chords-app .complete-stars .star { color: #cbd5db; opacity: 1; line-height: 0; }
.meldo-chords-app .level-stars .star.filled,
.meldo-chords-app .complete-stars .star.filled { color: #f5b942; }

/* Feedback korrekt / falsch */
.meldo-chords-app .quiz-feedback .feedback-icon { line-height: 0; }
.meldo-chords-app .quiz-feedback.correct .feedback-icon { color: var(--m-green-d); }
.meldo-chords-app .quiz-feedback.wrong .feedback-icon { color: #d6452f; }

/* Abschluss-Icon */
.meldo-chords-app .complete-icon { line-height: 0; color: #f5b942; }

/* Buttons / Badges: Icon sauber an Text */
.meldo-chords-app .meldo-btn .meldo-ico,
.meldo-chords-app .meldo-btn-small .meldo-ico,
.meldo-chords-app .meldo-btn-back .meldo-ico,
.meldo-chords-app .bonus-badge .meldo-ico,
.meldo-chords-app .level-badge .meldo-ico,
.meldo-chords-app .play-icon .meldo-ico,
.meldo-chords-app .meldo-quiz-complete .stat-value .meldo-ico,
.meldo-chords-app .streak-icon .meldo-ico { vertical-align: -0.18em; }

/* Notifications / Streak */
.meldo-chords-app .notif-icon { line-height: 0; color: var(--m-turq); }
.meldo-chords-app .streak-icon { line-height: 0; color: var(--m-flame); }

/* ==========================================================================
   Auswahlfelder und Takte (1.90.37)
   ========================================================================== */

/* Die Felder oben rechts waren unterschiedlich breit, weil ein <select> so
   breit wird wie sein laengster Eintrag - "C" schmal, "Grundstellung" breit.
   Eine Zeile aus drei verschieden grossen Kaestchen liest sich unruhig.
   Gleiche Mindestbreite, Beschriftung darueber, eigener Pfeil
   (MELDO-DESIGN 14, Art 6). */
.meldo-chords-app .meldo-toolbar { gap: 0.9rem; align-items: flex-end; }
.meldo-chords-app .meldo-toolbar > label { min-width: 148px; flex: 0 1 auto; gap: 0.3rem; }
.meldo-chords-app .meldo-toolbar > label:first-child { min-width: 92px; }
.meldo-chords-app .meldo-select,
.meldo-chords-app .meldo-keyboard-controls select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 42px;
  line-height: 1.2;
  padding: 0 2.1rem 0 0.75rem;
  border: 1.5px solid var(--m-border);
  border-radius: 10px;
  font-weight: 400;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5658' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 17px;
}
.meldo-chords-app .meldo-select:hover,
.meldo-chords-app .meldo-keyboard-controls select:hover { border-color: var(--m-turq); }

/* Audio ist ein Schalter. Die Regel `.meldo-toolbar > label` stellt alle
   Beschriftungen untereinander (flex-direction: column) und schlaegt mit
   0,3,0 jede schwaechere - darum lag der Schieber ueber statt neben dem
   Wort und ragte aus dem Feld. Hier 0,4,0. */
.meldo-chords-app .meldo-toolbar > label.meldo-toggle {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  min-height: 42px;
  padding: 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--m-text);
  cursor: pointer;
  user-select: none;
}
.meldo-chords-app .meldo-toolbar > label.meldo-toggle input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.meldo-chords-app .meldo-toolbar > label.meldo-toggle::before {
  content: ""; width: 36px; height: 20px; border-radius: 999px;
  background: var(--m-border); flex: 0 0 auto; transition: background .18s;
}
.meldo-chords-app .meldo-toolbar > label.meldo-toggle::after {
  content: ""; position: absolute; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .18s;
}
.meldo-chords-app .meldo-toolbar > label.meldo-toggle:has(input:checked)::before { background: var(--m-turq); }
.meldo-chords-app .meldo-toolbar > label.meldo-toggle:has(input:checked)::after { transform: translateX(16px); }

/* Takte: so viele, wie die Zeile hat. Das feste Vierer-Raster hat den
   Aufbau bestimmt, statt ihm zu folgen. */
.meldo-chords-app .meldo-measures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--m-border);
}
.meldo-chords-app .meldo-measures > * { background: #fff; }
.meldo-chords-app .meldo-measure-add {
  border: none; background: #fff; color: #c2ccd2; font-size: 1.5rem; font-weight: 700;
  cursor: pointer; min-height: 96px; transition: color .18s, background .18s;
}
.meldo-chords-app .meldo-measure-add:hover { color: var(--m-turq); background: rgba(61,124,133,.05); }

@media (max-width: 640px) {
  .meldo-chords-app .meldo-measures { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .meldo-chords-app .meldo-toolbar > label { min-width: 0; flex: 1 1 132px; }
}


/* Der Plus-Platz nimmt Griffbilder direkt entgegen - wer einen Akkord
   hineinzieht, will ihn dort haben und nicht erst einen Takt anlegen. */
.meldo-chords-app .meldo-measure-add.drag-over {
  background: rgba(232,146,79,.14);
  box-shadow: inset 0 0 0 2.5px var(--m-green);
  color: var(--m-green);
}

/* Weniger Schrift auf den Miniklaviaturen: Beschriftet sind nur die Toene
   des Akkords und das C. */
.meldo-chords-app .nf-piano .white-key span { font-size: .62rem; }