.family-tree-section { margin: 40px 0; min-width: 0; }
.family-tree { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; min-width: 0; }
.ft-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; }
.ft-styles { display: inline-flex; gap: 4px; background: var(--color-bg); padding: 4px; border-radius: 8px; }
.ft-style { border: none; background: transparent; padding: 6px 12px; border-radius: 6px; font: inherit; font-size: 0.85rem; color: var(--color-text-muted); cursor: pointer; }
.ft-style.is-active { background: var(--color-card); color: var(--color-burgundy); box-shadow: 0 0 0 1px var(--color-border); font-weight: 600; }
.ft-depth-wrap { font-size: 0.85rem; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.ft-depth { font: inherit; font-size: 0.85rem; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-card); color: var(--color-text); }
.ft-stage { overflow-x: auto; overflow-y: hidden; min-height: 320px; }
.ft-stage svg { display: block; margin: 0 auto; }
.ft-stage svg text { font-family: var(--font-sans, sans-serif); }
.ft-node { cursor: pointer; }
.ft-caption { margin-top: 8px; font-size: 0.8rem; color: var(--color-text-muted); text-align: right; }
.ft-flag { border: 0.5px solid var(--color-border); border-radius: 2px; }
@media (max-width: 600px) { .family-tree { padding: 10px 8px; } .ft-controls { gap: 8px; } }