@import url('https://fonts.googleapis.com/css2?family=Akko:wght@400;600;700&family=Montserrat:wght@400;600;700&display=swap');

:root {
  --meldo-accent1: #E8924F;
  --meldo-accent2: #3D7C85;
  --meldo-bg: #f7f9fb;
  --meldo-text: #1b1f23;
  --meldo-muted: #6b7280;
  --meldo-card: #ffffff;
  --meldo-radius: 16px;
}

.meldo-chords-app { font-family: Akko, Montserrat, system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--meldo-text); }

.meldo-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.meldo-tab { padding: 10px 14px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #1b1f23; cursor: pointer; font-weight: 600; }
.meldo-tab.is-active { background: var(--meldo-accent1); color: #fff; border-color: var(--meldo-accent1); }

.meldo-panel { display: none; background: var(--meldo-card); border-radius: var(--meldo-radius); padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.meldo-panel.is-active { display: block; }

.meldo-header { display:flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.meldo-toolbar { display:flex; gap:12px; flex-wrap: wrap; align-items: center; }

.meldo-select, .meldo-btn, .meldo-toggle input, #meldo-song-title, #meldo-free-notes, .meldo-keyboard-controls select, .meldo-export input { padding: 10px 12px; border-radius: 10px; border:1px solid #e5e7eb; font-size: 14px; }

.meldo-btn { background: var(--meldo-accent2); color:#fff; font-weight:700; cursor:pointer; border:none; }
.meldo-btn.meldo-secondary { background: #e5e7eb; color:#111; }
.meldo-btn:active { transform: translateY(1px); }

.meldo-keyboard-wrapper { background: var(--meldo-bg); border-radius: var(--meldo-radius); padding: 12px; }
.meldo-keyboard { position: relative; width: 100%; height: 160px; user-select: none; }



/* Aktiv-Markierung */
.meldo-key.playing { outline: 3px solid var(--meldo-accent2); outline-offset: -2px; }
.meldo-key.black.playing { filter: brightness(1.15); }

/* C-Labels */
.meldo-key.white .meldo-key-label {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 12px;
  line-height: 12px;
  color: #9aa5b1;
  pointer-events: none;
  font-weight: 600;
}

/* Hover-Feedback (optional) */
.meldo-key.white:hover { background: #fff; filter: brightness(1.02); }
.meldo-key.black:hover { filter: brightness(1.1); }

/* Responsiv */
@media (min-width: 900px) {
  .meldo-keyboard { height: 200px; }
}


/* === Perfect Piano (UL-basierte Klaviatur) === */
.meldo-keyboard { padding: 0; }
.meldo-piano {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 12px 10px 14px;
  background: #fff;
  border: 1px solid #d5dbe3;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) inset;
  height: 200px;
  user-select: none;
}
.meldo-piano .k { position: relative; display: inline-block; height: 100%; }
.meldo-piano .w { display:block; height: 100%; background:#fff; border:1px solid #dfe5ee; border-left-width:0; width:42px; border-radius:0 0 10px 10px; position: relative; }
.meldo-piano .k:first-child .w { border-left-width:1px; }
.meldo-piano .w.active { box-shadow: inset 0 -8px 0 rgba(0,0,0,.06); outline:3px solid #3D7C85; outline-offset:-2px; }
.meldo-piano .b {
  position:absolute; left: 29px; top:0; width:28px; height:60%;
  background: linear-gradient(#23262b, #0e1115);
  border:1px solid #0b0d10; border-radius:0 0 8px 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 16px 0 rgba(255,255,255,.03);
  z-index: 3;
}
.meldo-piano .b.active { filter: brightness(1.15); outline:2px solid #3D7C85; outline-offset:-2px; }
.meldo-piano .label {
  position:absolute; left:8px; bottom:6px; font-size:12px; color:#9aa5b1; font-weight:600; pointer-events:none;
}
/* kompakter in 2/3 Oktaven */
@media (max-width: 720px){
  .meldo-piano .w{ width:34px; }
  .meldo-piano .b{ left:23px; width:24px; }
}

/* Progression board */
.meldo-prog-board { display:flex; flex-wrap: wrap; gap: 10px; padding: 10px; background: var(--meldo-bg); border-radius: var(--meldo-radius); min-height: 70px; }

/* Leadsheet grid */
.meldo-leadsheet { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.meldo-row { background:#fff; border-radius: 12px; border:1px solid #e5e7eb; }
.meldo-row-header { display:flex; align-items:center; gap:10px; padding:6px 10px; border-bottom:1px dashed #e5e7eb; font-weight:600; }
.meldo-row-header .badge { padding:4px 8px; border-radius: 10px; color:#fff; font-size: 12px; }
.meldo-measures { display:grid; grid-template-columns: repeat(4, 1fr); }
.meldo-measure { min-height: 60px; border-right: 1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; position:relative; }
.meldo-measure:last-child { border-right: none; }
.meldo-measure .drop-hint { position:absolute; inset: 4px; border:2px dashed transparent; border-radius: 8px; }
.meldo-measure.drag-over .drop-hint { border-color: var(--meldo-accent2); }

.meldo-measure .chord { display:flex; align-items:center; gap:6px; font-weight:700; }
.meldo-measure .chord svg { width: 48px; height: 20px; }

/* Notes textarea */
#meldo-free-notes { width:100%; min-height: 90px; }

/* Export */
.meldo-export { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.meldo-hint { color: var(--meldo-muted); font-size: 12px; }

/* Responsive */
@media (min-width: 900px) {
  .meldo-panel { padding: 20px; }
  .meldo-keyboard { height: 190px; }
}


/* ===== Aktive Taste farbig füllen (robustes Overlay) ===== */
:root{
  --meldo-active-fill: #3D7C85;   /* Akzentfarbe */
  --meldo-active-opac: 0.88;      /* Deckkraft der Füllung (0..1) */
}

/* Taste muss eigenen Stacking-Context haben, damit ::after drüber liegen kann */
.meldo-piano .w,
.meldo-piano .b{
  position: relative;   /* wichtig */
  z-index: 0;           /* Basis */
  overflow: hidden;     /* Overlay bleibt in Kontur */
}

/* Overlay-Schicht */
.meldo-piano .w::after,
.meldo-piano .b::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(61, 124, 133, 1); /* Fallback: reine Farbe */
  opacity: 0;                        /* erst unsichtbar */
  pointer-events: none;
  z-index: 2;                        /* über der Taste */
  transition: opacity .12s ease;
}

/* Aktiv → Overlay sichtbar (farbig gefüllt) */
.meldo-piano .w.active::after,
.meldo-piano .b.active::after{
  opacity: var(--meldo-active-opac);
}

/* Optional: dezenter Innenring beim Aktivzustand */
.meldo-piano .w.active,
.meldo-piano .b.active{
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}

/* Weiß-Label bei aktiver Taste kontrastieren */
.meldo-piano .w.active .label{
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* ==== Aktive Tasten: echtes DOM-Overlay ==== */
:root{
  --meldo-active-fill: #3D7C85;   /* Wunschfarbe */
  --meldo-active-opac: 0.92;      /* Deckkraft 0..1 */
}

/* Overlay-Child sitzt ÜBER der Taste, bleibt in Kontur */
.meldo-piano .w, .meldo-piano .b {
  position: relative;
  overflow: hidden;         /* Overlay bleibt in der Form */
}

.meldo-piano .w > .ov,
.meldo-piano .b > .ov{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(61,124,133,1) 0%,
              rgba(52,107,114,1) 100%);
  opacity: 0;               /* zunächst unsichtbar */
  pointer-events: none;
  z-index: 9;               /* garantiert über dem Tasten-Background/Label */
  transition: opacity .12s ease;
  border-radius: inherit;
}

/* Aktiv → Overlay einblenden */
.meldo-piano .w.active > .ov,
.meldo-piano .b.active > .ov{
  opacity: var(--meldo-active-opac);
}

/* Optional: kleiner Innenring */
.meldo-piano .w.active,
.meldo-piano .b.active{
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}

/* Weißtasten-Label bei Aktivzustand auf weißem Overlay kontrastieren */
.meldo-piano .w.active .label{
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
/* Z-Order sichern: Weiß < Schwarz < deren Overlays */
.meldo-piano .k { z-index: 1; }             /* Wrapper der Weißtaste */
.meldo-piano .w { z-index: 2; position: relative; overflow: hidden; }
.meldo-piano .w > .ov { z-index: 9; }       /* Overlay Weiß */

.meldo-piano .b { z-index: 20; position: absolute; overflow: hidden; border-radius: 0 0 8px 8px; }
.meldo-piano .b > .ov { z-index: 21; }      /* Overlay Schwarz */



.meldo-chord-svg { display:inline-block; vertical-align:middle; }

/* Der Takt selbst ist die Bezugsfläche */
.meldo-measure { position: relative; }

/* Akkordkärtchen + Platz rechts für das X */
.meldo-measure .chord{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 28px;      /* Platz für den Delete-Button */
}

/* Delete-Button im Takt – hart resetten & sauber zentrieren */
.meldo-measure-del{
  all: unset;               /* ALLE vererbten Button-Styles killen */
  position: absolute;
  top: -23px;
  right: 50px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  color: #111;

  display: flex;            /* zentriert das X exakt */
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;

  cursor: pointer;
  z-index: 15;              /* über dem Inhalt im Measure */
}

.meldo-measure-del:hover{ background:#f3f4f6; }


/* Keyboard-Wrapper darf so hoch werden wie die Tastatur */
.meldo-keyboard-wrapper { --kb-gap: 16px; }

/* Das eigentliche Keyboard-Element bekommt die Höhe per JS gesetzt */
.meldo-keyboard {
  height: var(--kb-auto-h, auto);   /* <-- dynamische Höhe */
  overflow: visible;                /* nichts abschneiden */
  margin-bottom: var(--kb-gap);
}

/* Basis: Akkord-hinzufügen Button */
#meldo-add-to-prog {
  position: relative;
  background-color: var(--meldo-accent1);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

/* Hover-Effekt: leicht heller & größer */
#meldo-add-to-prog:hover {
  background-color: #E6A268; /* etwas heller als --meldo-accent1 */
  transform: scale(1.04);
}

/* Klick-Effekt: Pulse/Pop */
#meldo-add-to-prog:active {
  transform: scale(0.95);
}

/* Optionale kleine „Ripple“-Animation */
#meldo-add-to-prog::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.3);
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}
#meldo-add-to-prog:active::after {
  opacity: 1;
  transform: scale(1.5);
}




/* Make the leadsheet mini pianos larger and prevent automatic shrinking */
.meldo-leadsheet .meldo-chord-svg {
  width: 180px !important;   /* match the JS width */
  height: 40px !important;   /* match the JS height */
  flex: 0 0 auto;
  display: block;
}

/* Give the measure enough height to fit the bigger mini keyboard */
.meldo-leadsheet .meldo-measure {
  min-height: 90px;          /* tweak if you choose a different size */
}

/* A bit more spacing between mini piano and chord name */
.meldo-leadsheet .chord {
  gap: 12px;
  align-items: center;
}


/* Leadsheet: Kacheln sollen umbrechen statt überzulaufen */
.meldo-leadsheet .meldo-measures{
  --measure-min: 220px;              /* Mindestbreite je Kachel – gern anpassen */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--measure-min), 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Auf sehr schmalen Geräten Mindestbreite reduzieren, damit 2 Kacheln nebeneinander passen */
@media (max-width: 520px){
  .meldo-leadsheet .meldo-measures{
    --measure-min: 160px;
    gap: 10px;
  }
}


/* Leadsheet: Kacheln sollen umbrechen statt überzulaufen */
.meldo-leadsheet .meldo-measures{
  --measure-min: 220px;              /* Mindestbreite je Kachel – gern anpassen */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--measure-min), 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Auf sehr schmalen Geräten Mindestbreite reduzieren, damit 2 Kacheln nebeneinander passen */
@media (max-width: 520px){
  .meldo-leadsheet .meldo-measures{
    --measure-min: 160px;
    gap: 10px;
  }
}

/* Kleiner ?-Button oben rechts */
.meldo-help-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  z-index: 50;
}
.meldo-help-btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.meldo-help-btn:active{ transform: translateY(0); }

/* Tour: Backdrop + “Spotlight” */
.meldo-tour-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1000;
}
.meldo-tour-spot{
  position: fixed;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45), 0 0 0 3px #E8924F inset;
  border-radius: 12px;
  pointer-events: none;
  z-index: 1001;
}

/* Tour: Tooltip/Panel */
.meldo-tour-tooltip{
  position: fixed;
  max-width: 360px;
  background: #fff;
  color: #111827;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 14px 14px 12px;
  z-index: 1002;
  border: 1px solid #eef2f7;
}
.meldo-tour-tooltip h4{
  margin: 0 0 6px; font-size: 1rem;
}
.meldo-tour-tooltip p{
  margin: 0 0 10px; color: #4b5563; line-height: 1.4;
}
.meldo-tour-actions{
  display: flex; justify-content: flex-end; gap: 8px;
}
.meldo-tour-actions .btn{
  appearance: none; border: 0; cursor: pointer; border-radius: 10px;
  padding: 8px 12px; font-weight: 600;
}
.meldo-tour-actions .btn-skip{ background: #e5e7eb; color: #111827; }
.meldo-tour-actions .btn-next{ background: #3D7C85; color: #fff; }
.meldo-tour-actions .btn-next:hover{ filter: brightness(1.05); }


/* === Schwe­bende Akkord-Palette (immer sichtbar) === */
#meldo-float-palette{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 280px;
  max-height: 60vh;
  overflow: auto;
  padding: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  z-index: 999;               /* über App-UI */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* einzelne Chips (Miniatur + Name) */
.meldo-chord-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: grab;
  user-select: none;
}
.meldo-chord-chip:active{ cursor: grabbing; }
.meldo-chord-chip strong{ font-size: 12px; }

/* etwas größere Mini-SVGs, aber nicht zu dominant */
.meldo-chord-chip .meldo-chord-svg{
  width: 120px;
  height: 32px;
}

/* Auf sehr kleinen Screens optional ausblenden, damit nichts überdeckt */
@media (max-width: 720px){
  #meldo-float-palette{ display: none; }
}


/* Grundlayout der Palette */
#meldo-float-palette{
  position:fixed;
  left: 16px;
  right:auto;        /* wird bei Drag in JS auf left/top umgestellt */
  bottom: 16px;
  top: auto;
  z-index: 999;
  background:#fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 10px;
  width: min(720px, 95vw);
  max-height: 40vh;
  overflow: auto;
}

/* Während Drag leicht transparent + ohne Text-Selektion */
#meldo-float-palette.is-dragging{
  opacity: .96;
  user-select: none;
}

/* Header mit Griff */
#meldo-float-palette .meldo-float-header{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
#meldo-float-palette .meldo-float-title h4{
  margin:0;
  font-size:14px;
  font-weight:700;
}
#meldo-float-palette .meldo-float-title p{
  margin:2px 0 0 0;
  font-size:12px;
  color:#6b7280;
}

/* Drag-Handle (Griff) */
#meldo-float-palette .meldo-float-grip{
  appearance:none;
  border:0;
  background:#f3f4f6;
  border-radius:8px;
  padding:6px 10px;
  cursor:move;
  font-size:14px;
  line-height:1;
  color:#374151;
}
#meldo-float-palette .meldo-float-grip:hover{
  background:#e5e7eb;
}

/* Akkord-Chips */
#meldo-float-palette .meldo-chord-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  margin:6px 6px 0 0;
  width: max-content;
}
#meldo-float-palette .meldo-chord-chip strong{
  font-size:13px;
}
#meldo-float-palette .meldo-float-empty{
  color:#6b7280;
  font-size:12px;
  padding:6px 2px;
}

/* Standard: auf größeren Screens ausblenden */
#meldo-prog-board{
  display: none;
}

/* Mobil & kleine Screens: anzeigen */
@media (max-width: 768px){
  #meldo-prog-board{
    display: flex;          /* oder grid; je nach deinem bisherigen Layout */
    gap: 8px;
    flex-wrap: wrap;
  }
  /* Die Hilfe-Box auf sehr kleinen Screens eher ausblenden, damit es nicht doppelt wird */
  .meldo-prog-help{ display: none; }
}

.meldo-prog-help .help-inner{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0 12px;
  font-size: 14px;
  line-height: 1.45;
}
.meldo-prog-help strong{ display:block; margin-bottom: 4px; }
.meldo-prog-help em{ font-style: normal; font-weight: 600; }






.meldo-keyboard-controls {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Label links, Buttons rechts */
  gap: .5rem;
  margin-bottom: .5rem;
}

.meldo-play-controls .meldo-btn {
  margin-left: .25rem;
}

/* Container der Playbuttons */
.meldo-play-controls {
  display: flex;
  gap: .75rem;           /* Abstand zwischen Buttons */
  margin-left: 1rem;     /* Abstand links zur Range-Auswahl */
}

/* Buttons selber etwas größer und mit Luft */
.meldo-play-controls .meldo-btn {
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* Gesamte Leiste oberhalb */
.meldo-keyboard-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;   /* Abstand nach unten vor der Tastatur */
}

/* komplette alte Player-Leiste ausblenden */
.meldo-player {
  display: none !important;
}
/* Akkord im Notensystem (meldo-staff.js): erst einzeln, dann zusammen */
.meldo-chord-staff-wrap { display: flex; justify-content: center; margin: 4px 0 14px; }
.meldo-chord-staff {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--meldo-radius, 14px);
  padding: 8px 14px 4px;
  box-shadow: 0 4px 14px rgba(61, 124, 133, 0.08);
}
.meldo-chord-staff svg { display: block; margin: 0 auto; }

/* =====================================================================
   v1.21.18 — Akkorde lernen: Griffbild-Karten (Gitarre/Ukulele)
   + Klaviatur-Aufwertung (Tonleiterfinder-Stil) + Grundton/Akkordton-Farben
   ===================================================================== */

/* Gitarre/Ukulele-Karten unter der Klaviatur */
.meldo-chord-frets{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;
}
.meldo-vcard{
  margin:0; background:#fff; border:1px solid #e3eae9; border-radius:14px;
  padding:12px 10px 10px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.meldo-vcard figcaption{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; color:#6b7a78;
}
.meldo-vcard figcaption .meldo-ico{ width:15px; height:15px; color:#3D7C85; }
.meldo-vbody{ display:grid; place-items:center; min-height:132px; width:100%; }
.meldo-vbody .meldo-chorddiagram{ width:112px; height:auto; }
.meldo-vchip{ font-size:11px; font-weight:700; color:#FF8A3D; min-height:14px; }
.meldo-vchip.is-approx{ background:#fff3e9; padding:3px 9px; border-radius:999px; }
.meldo-fingers-toggle{ margin-right:auto; display:inline-flex; align-items:center; gap:8px; }
@media (max-width:680px){ .meldo-chord-frets{ grid-template-columns:1fr; } }

/* Klaviatur: schönere Tasten (Verläufe, runde Kanten, Schatten) */
.meldo-piano .w{
  border:2px solid #e2e8ee; border-left-width:1px; border-radius:0 0 8px 8px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.meldo-piano .k:first-child .w{ border-left-width:2px; }
.meldo-piano .b{
  background:linear-gradient(180deg,#1a1a1a 0%,#0a0a0a 100%);
  border:2px solid #000; border-radius:0 0 6px 6px;
  box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 -2px 8px rgba(255,255,255,.1);
}

/* Akkordtöne grün markieren … */
.meldo-piano .w.active > .ov, .meldo-piano .b.active > .ov,
.meldo-piano .w.active::after, .meldo-piano .b.active::after{
  background:linear-gradient(180deg,#F1D8B7 0%,#E8924F 100%) !important;
}
/* … Grundton türkis hervorheben */
.meldo-piano .w.active.is-root > .ov, .meldo-piano .b.active.is-root > .ov,
.meldo-piano .w.active.is-root::after, .meldo-piano .b.active.is-root::after{
  background:linear-gradient(180deg,#7E9FA3 0%,#3D7C85 100%) !important;
}

/* Griffbild (Gitarre/Ukulele) als Darstellung in Palette & Leadsheet */
.meldo-mini-grip{ display:flex; align-items:center; justify-content:center; }
.meldo-mini-grip svg.meldo-chorddiagram{ width:auto !important; height:66px !important; }

/* ===== Kompakte Klaviatur (Tonleiterfinder-Stil) für Build-Tab / Palette ===== */
.meldo-mini-grip{ display:flex; justify-content:center; align-items:center; width:100%; }
.meldo-mini-grip .nf-piano{ width:100%; max-width:240px; margin:0 auto; }
.nf-piano-keys{ position:relative; display:flex; height:84px; width:100%; }
.nf-piano .white-key{
  flex:1 1 0; min-width:0; border:2px solid #e2e8ee; border-radius:0 0 7px 7px; background:#fff;
  position:relative; box-shadow:0 2px 6px rgba(0,0,0,.08); display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; padding-bottom:5px; overflow:hidden;
}
.nf-piano .white-key span{ font-size:10px; font-weight:600; color:#6b7280; }
.nf-piano .white-key .key-oct{ font-size:7px; color:#3D7C85; font-weight:700; }
.nf-piano .white-key.active-root{ background:linear-gradient(180deg,#7E9FA3,#3D7C85); border-color:#1F737A; }
.nf-piano .white-key.active-root span,.nf-piano .white-key.active-root .key-oct{ color:#fff; }
.nf-piano .white-key.active-second{ background:linear-gradient(180deg,#F1D8B7,#E8924F); border-color:#E77B22; }
.nf-piano .white-key.active-second span,.nf-piano .white-key.active-second .key-oct{ color:#fff; }
.nf-piano .black-keys{ position:absolute; top:0; left:0; width:100%; height:84px; pointer-events:none; }
.nf-piano .black-key{
  position:absolute; height:62%; background:linear-gradient(180deg,#1a1a1a 0%,#0a0a0a 100%);
  border:2px solid #000; border-radius:0 0 5px 5px;
  box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 -2px 6px rgba(255,255,255,.1);
}
.nf-piano .black-key.active-root{ background:linear-gradient(180deg,#679398,#1F737A); border-color:#295258; }
.nf-piano .black-key.active-second{ background:linear-gradient(180deg,#E8924F,#D67016); border-color:#B25B13; }

/* ===== Klickbares Griffbild -> Anschlag mit Saiten-Samples (v1.21.21+) ===== */
[data-grip-play]{ position:relative; cursor:pointer; transition:transform .12s ease, filter .12s ease; outline:none; }
[data-grip-play]:hover{ transform:translateY(-1px); filter:drop-shadow(0 3px 9px rgba(61,124,133,.30)); }
[data-grip-play]:focus-visible{ box-shadow:0 0 0 3px rgba(61,124,133,.35); border-radius:12px; }
[data-grip-play].is-strumming{ animation:meldo-strum .32s ease; }
@keyframes meldo-strum{ 0%{ transform:scale(1); } 35%{ transform:scale(1.05); } 100%{ transform:scale(1); } }

/* Immer sichtbares Play-Badge = eindeutige „abspielbar"-Affordanz (auch auf Touch) */
.meldo-grip-play-badge{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; color:#fff; z-index:6; pointer-events:none;
  background:linear-gradient(135deg,#428791,#336970);
  box-shadow:0 2px 8px rgba(61,124,133,.42), inset 0 1px 0 rgba(255,255,255,.25);
  opacity:.95; transform:scale(1);
  transition:transform .14s ease, opacity .14s ease, box-shadow .14s ease;
}
.meldo-grip-play-badge svg{ width:13px; height:13px; margin-left:1px; }
[data-grip-play]:hover .meldo-grip-play-badge{ transform:scale(1.14); opacity:1; box-shadow:0 5px 14px rgba(61,124,133,.55), inset 0 1px 0 rgba(255,255,255,.3); }
[data-grip-play]:active .meldo-grip-play-badge,
[data-grip-play].is-strumming .meldo-grip-play-badge{ animation:meldo-badge-pulse .5s ease; }
@keyframes meldo-badge-pulse{ 0%{ transform:scale(1);} 30%{ transform:scale(1.28);} 100%{ transform:scale(1);} }

/* Sanfter Hover-Innenrahmen, der Klickbarkeit unterstreicht */
[data-grip-play]::after{
  content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(61,124,133,0); transition:box-shadow .18s ease;
}
[data-grip-play]:hover::after{ box-shadow:inset 0 0 0 2px rgba(61,124,133,.22); }

/* In kompakten Build-Zellen kleineres Badge */
.meldo-mini-grip .meldo-grip-play-badge{ width:21px; height:21px; top:1px; right:1px; }
.meldo-mini-grip .meldo-grip-play-badge svg{ width:10px; height:10px; }

/* ===== Tasten leuchten beim Abspielen auf (v1.21.24) =====
   .is-arp  = Arpeggio (nacheinander),  .is-playing = zusammen (gleichzeitig) */
.meldo-piano .w.is-playing, .meldo-piano .w.is-arp,
.meldo-piano .b.is-playing, .meldo-piano .b.is-arp{
  box-shadow:0 0 0 3px rgba(255,138,61,.55), 0 0 16px rgba(255,138,61,.5) !important;
  z-index:30 !important;
  animation:meldo-key-pop .5s ease;
}
/* Füllung beim Abspielen auf Flamme-Orange umfärben (weiß: ::after, schwarz: .ov) */
.meldo-piano .w.is-playing::after, .meldo-piano .w.is-arp::after,
.meldo-piano .b.is-playing::after, .meldo-piano .b.is-arp::after,
.meldo-piano .w.is-playing > .ov, .meldo-piano .w.is-arp > .ov,
.meldo-piano .b.is-playing > .ov, .meldo-piano .b.is-arp > .ov{
  background:linear-gradient(180deg,#ffd27a 0%,#FF8A3D 100%) !important;
  opacity:.96 !important;
}
.meldo-piano .w.is-playing .label, .meldo-piano .w.is-arp .label{ color:#fff !important; }
@keyframes meldo-key-pop{ 0%{ filter:brightness(1.25); } 60%{ filter:brightness(1.05); } 100%{ filter:brightness(1); } }

/* Beim Abspielen hat die Flamme Vorrang – auch über dem türkisen Grundton (höhere Spezifität) */
.meldo-piano .w.active.is-root.is-playing::after, .meldo-piano .w.active.is-root.is-arp::after,
.meldo-piano .b.active.is-root.is-playing::after,  .meldo-piano .b.active.is-root.is-arp::after,
.meldo-piano .w.active.is-root.is-playing > .ov,   .meldo-piano .w.active.is-root.is-arp > .ov,
.meldo-piano .b.active.is-root.is-playing > .ov,   .meldo-piano .b.active.is-root.is-arp > .ov{
  background:linear-gradient(180deg,#ffd27a 0%,#FF8A3D 100%) !important;
  opacity:.96 !important;
}

/* ===== Einzelne Noten leuchten beim Abspielen auf (v1.21.27) ===== */
.meldo-chord-staff .ms-notehead{ transition:fill .08s ease; }
.meldo-chord-staff .ms-notehead.is-lit{
  fill:#FF8A3D !important;
  filter:drop-shadow(0 0 3px rgba(255,138,61,.92));
}