.spiewnik-line-wrapper {
  display: flex;
  align-items: baseline;
  margin-bottom: 6px;
}

.spiewnik-chord {
  font-weight: bold;
  color: #0073aa; /* ‹ zmień np. na #b80000, jeśli wolisz czerwony */
  margin-right: 8px;
  min-width: 40px;
  display: inline-block;
  white-space: nowrap;
}

.spiewnik-text {
  flex: 1;
  white-space: pre-wrap;
}

/* akordy po prawej stronie w trybie reversed */
.spiewnik-layout-reversed .spiewnik-line-wrapper {
  flex-direction: row-reverse;
}

.spiewnik-layout-reversed .spiewnik-chord {
  margin-left: 8px;
  margin-right: 0;
}

/* --- reszta stylów (przyciski, marginesy, tonacja itd.) bez zmian --- */

/* Responsywność: nie zmieniamy kierunku na telefonach */
@media (max-width: 768px) {
  .spiewnik-line-wrapper {
    flex-direction: row;
    align-items: baseline;
  }

  .spiewnik-layout-reversed .spiewnik-line-wrapper {
    flex-direction: row-reverse;
  }
}