.chord-diagram-wrap {
  background: linear-gradient(160deg, #43290f 0%, #241608 100%);
  border-radius: 22px;
  padding: 22px 16px;
  border: 1px solid rgba(255, 214, 163, 0.14);
  display: flex;
  justify-content: center;
}

.chord-diagram-svg {
  width: 100%;
  max-width: 230px;
  height: auto;
}

.chord-string {
  stroke: rgba(255, 224, 178, 0.55);
  stroke-width: 2;
}

.chord-fret {
  stroke: rgba(255, 224, 178, 0.4);
  stroke-width: 2;
}

.chord-fret-nut {
  stroke: #f4e9d8;
  stroke-width: 6;
}

.chord-fret-label {
  fill: rgba(255, 224, 178, 0.78);
  font-size: 14px;
  font-weight: 700;
  text-anchor: start;
  dominant-baseline: middle;
}

.chord-symbol {
  text-anchor: middle;
  font-size: 17px;
  font-weight: 800;
}

.chord-symbol-mute {
  fill: rgba(255, 138, 158, 0.9);
}

.chord-symbol-open {
  fill: rgba(78, 204, 163, 0.95);
}

.chord-dot {
  fill: var(--accent);
  stroke: var(--accent-strong);
  stroke-width: 1;
}

.chord-barre {
  fill: var(--accent);
  opacity: 0.94;
}

.chord-finger-label {
  text-anchor: middle;
  font-size: 15px;
  font-weight: 800;
  fill: #0b1220;
  pointer-events: none;
}

/* ── Editable diagram (Chord Builder) ─────────────────────────── */
.chord-diagram-editable {
  max-width: 280px;
  cursor: pointer;
}

.chord-symbol-faint {
  opacity: 0.3;
}

.chord-fret-number {
  fill: rgba(255, 224, 178, 0.4);
  font-size: 11px;
  text-anchor: middle;
  pointer-events: none;
}

.chord-diagram-editable .chord-symbol {
  pointer-events: none;
}

.chord-cell {
  fill: transparent;
  transition: fill 100ms ease;
}

.chord-fret-cell:hover {
  fill: rgba(78, 204, 163, 0.16);
}

.chord-symbol-cell:hover {
  fill: rgba(78, 204, 163, 0.16);
}

.chord-cell-pending {
  fill: rgba(255, 215, 106, 0.28) !important;
}

.chord-barre-editable {
  cursor: pointer;
}