/* Song-DNA
   Farbcodierung folgt der Belegtheit, nicht dem Wert: gemessen (grün),
   abgeleitet (gold), nicht bestimmbar (grau). Ein hoher Wert ist damit nie
   automatisch "gut" gefärbt -- die Seite bewertet nicht, sie zeigt. */

.ly-dna-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
}
.ly-dna-toolbar label { display: grid; gap: 6px; font-weight: 800; font-size: 13px; }
.ly-dna-toolbar select { min-width: min(340px, 80vw); }

.ly-dna-status { margin: 0 0 18px; color: var(--ly-color-muted); }
.ly-dna-status.is-error { color: var(--ly-color-danger, #B42318); font-weight: 800; }

.ly-dna-head {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ly-color-border);
  margin-bottom: 26px;
}
.ly-dna-head h1 { margin: 8px 0 10px; }
.ly-dna-head p { max-width: 62ch; margin: 0; }

.ly-dna-coverage {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  border-radius: var(--ly-radius-lg);
  background: rgba(201,162,77,.10);
  border: 1px solid rgba(201,162,77,.35);
  min-width: 210px;
}
.ly-dna-coverage strong { font-size: 34px; line-height: 1; letter-spacing: -.04em; }
.ly-dna-coverage span { font-weight: 800; font-size: 13px; }
.ly-dna-coverage small { color: var(--ly-color-muted); font-size: 12px; line-height: 1.45; }

.ly-dna-group { margin: 0 0 34px; }
.ly-dna-group h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 14px; }

.ly-dna-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.ly-dna-grid-compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.ly-dna-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--ly-radius-lg);
  border: 1px solid var(--ly-color-border);
  border-left-width: 4px;
  background: #fff;
  min-width: 0;
}
.ly-dna-card.is-measured { border-left-color: #2E7D5B; }
.ly-dna-card.is-derived  { border-left-color: #C9A24D; }
.ly-dna-card.is-unknown  { border-left-color: #B9C0CC; background: #FAFBFC; }

.ly-dna-card-label { font-size: 12px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ly-color-muted); }
.ly-dna-card-value { font-size: 17px; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.ly-dna-card.is-unknown .ly-dna-card-value { color: #7A8595; font-weight: 700; font-size: 15px; }
.ly-dna-card-status { font-size: 11px; font-weight: 800; color: var(--ly-color-muted); }
.ly-dna-card-note { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ly-color-muted); }

.ly-dna-overview { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 22px; align-items: start; }
.ly-dna-radar-wrap { display: grid; gap: 8px; justify-items: center; }
.ly-dna-radar { width: 100%; max-width: 280px; height: auto; }
.ly-dna-radar-ring { fill: none; stroke: rgba(16,24,40,.12); stroke-width: 1; }
.ly-dna-radar-shape { fill: rgba(201,162,77,.30); stroke: #C9A24D; stroke-width: 2; }
.ly-dna-radar-label { font-size: 10px; font-weight: 800; fill: #667085; }

.ly-dna-bars { display: grid; gap: 7px; }
.ly-dna-bar-row { display: grid; grid-template-columns: minmax(72px, 128px) 1fr minmax(44px, auto);
  gap: 10px; align-items: center; }
.ly-dna-bar-label { font-weight: 800; font-size: 13px; overflow-wrap: anywhere; }
.ly-dna-bar-track { height: 12px; border-radius: 999px; background: rgba(16,24,40,.07); overflow: hidden; }
.ly-dna-bar-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #C9A24D, #E0BC72); }
.ly-dna-bar-value { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ly-color-muted); }

.ly-dna-timeline { display: flex; width: 100%; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--ly-color-border); min-height: 42px; }
.ly-dna-timeline-part { display: grid; place-items: center; font-size: 11px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em; color: #23324a; overflow: hidden;
  white-space: nowrap; padding: 0 2px; }
.ly-dna-timeline-part.is-verse        { background: #DCE9F7; }
.ly-dna-timeline-part.is-chorus       { background: #F6E2B8; }
.ly-dna-timeline-part.is-pre_chorus   { background: #E7E0F5; }
.ly-dna-timeline-part.is-bridge       { background: #D9EFE3; }
.ly-dna-timeline-part.is-intro,
.ly-dna-timeline-part.is-outro        { background: #EDEFF3; }
.ly-dna-timeline-part.is-instrumental { background: #FBE0DC; }
.ly-dna-timeline-part.is-section      { background: #F2F4F7; }

.ly-dna-progression { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.ly-dna-progression span { padding: 5px 11px; border-radius: 999px; background: rgba(16,24,40,.06);
  font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }

.ly-dna-cloud { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.ly-dna-tag { font-weight: 900; color: #23324a; line-height: 1.2; }

.ly-dna-empty { color: var(--ly-color-muted); margin: 0; }

@media (max-width: 900px) {
  .ly-dna-overview { grid-template-columns: 1fr; }
  .ly-dna-head { flex-direction: column; }
  .ly-dna-coverage { width: 100%; }
}
@media (max-width: 560px) {
  .ly-dna-grid, .ly-dna-grid-compact { grid-template-columns: 1fr; }
  .ly-dna-bar-row { grid-template-columns: minmax(60px, 92px) 1fr auto; }
  .ly-dna-timeline-part { font-size: 9px; }
}