#FamilyChart { width: 100%; height: calc(100vh - 220px); min-height: 480px; background: #f8faf9; border-radius: .5rem; background-image: radial-gradient(#d9e2dc 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }
.legend { position: absolute; z-index: 10; top: 10px; left: 12px; background: rgba(255,255,255,.92); border: 1px solid #e2e2e2; border-radius: 999px; padding: 4px 12px; font-size: 12px; display: flex; gap: 12px; align-items: center; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.dot-l { background: #0d6efd; } .dot-p { background: #e35d8f; }
/* perkecil card family-chart agar foto terlihat bagus */
.f3 .card { border-radius: 12px !important; box-shadow: 0 2px 10px rgba(0,0,0,.12) !important; }
/* garis relasi: default library putih (tema gelap) -> sesuaikan kanvas terang */
#FamilyChart path.link { stroke: #94a3b8; stroke-width: 1.6; }
#FamilyChart path.link.spouse-link { stroke: #e0245e; stroke-width: 2.6; }
#FamilyChart g.link-text text { fill: #c2185b; font-weight: 700; font-size: 12px; }