/* Diagram akordu (gitara, klávesy) */

/* ---------- Diagram akordu ---------- */
#chord-pop {
  width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
#chord-pop[open] { display: flex; flex-direction: column; }
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px 4px 20px; }
.cp-head h2 { margin: 0; color: var(--chord); font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cp-head .icon-btn { width: 42px; height: 42px; border-radius: 12px; }
.cp-body { padding: 4px 20px 20px; overflow-y: auto; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.cp-chips button {
  min-width: 44px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  color: var(--chord); font: 700 .9rem/1 var(--sans); cursor: pointer;
}
.cp-chips button[aria-current="true"] { background: var(--chord); border-color: var(--chord); color: var(--surface); }
.cp-fig { display: grid; place-items: center; min-height: 220px; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.cp-fig .cd-svg.guitar { width: 156px; }
.cp-fig .cd-svg.piano { width: 100%; max-width: 330px; }
.cp-cap { margin: 10px 0 0; color: var(--muted); font-size: .88rem; text-align: center; }
.cd-svg { overflow: visible; }
.cd-fret, .cd-str { stroke: var(--muted); stroke-width: 1.5; }
.cd-fret.nut { stroke: var(--ink); stroke-width: 5; }
.cd-dot, .cd-barre { fill: var(--chord); }
.cd-o { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.cd-x { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.cd-base { fill: var(--ink); font: 700 13px var(--sans); }
.cd-key.w { fill: var(--surface); stroke: var(--muted); stroke-width: 1; }
.cd-key.b { fill: var(--ink); }
.cd-key.w.on { fill: var(--accent-soft); fill: color-mix(in srgb, var(--chord) 30%, var(--surface)); stroke: var(--chord); stroke-width: 1.5; }
.cd-key.b.on, .cd-key.root { fill: var(--chord); }
.cd-key.bass { stroke: var(--accent); stroke-width: 3; }