.family-tree-page-title { align-items:flex-start; line-height:1.35; }
.family-tree-page-title i { margin-top:.18em; color:var(--brand-green, #11833d); }
.family-tree-controls { padding:1.25rem; border:1px solid var(--border-color); border-radius:14px; background:var(--background-color); }
.family-tree-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.family-tree-field { min-width:0; }
.family-tree-field--wide { grid-column:1 / -1; }
.family-tree-field label { display:block; margin-bottom:.42rem; font-weight:800; }
.family-tree-field input,
.family-tree-field select { width:100%; margin-bottom:0; }
.family-tree-help { margin:.4rem 0 0; color:var(--text-muted); font-size:.86rem; }
.family-tree-controls .btn-primary { margin:1.1rem 0 0; }
.family-tree-status { min-height:1.5em; margin:.75rem 0 0; color:var(--text-muted); font-weight:700; }
.family-tree-status.is-error { color:var(--error-text); }
.family-tree-result { margin-top:1.25rem; padding:1.15rem; border:1px solid var(--border-color); border-radius:14px; background:var(--card-bg); }
.family-tree-result-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.family-tree-kicker { margin:0 0 .2rem; color:var(--brand-green, #11833d); font-size:.74rem; font-weight:900; letter-spacing:.12em; }
.family-tree-result-head h3 { margin:0; font-size:1.35rem; }
.family-tree-result-head p:last-child { margin:.35rem 0 0; color:var(--text-muted); }
.family-tree-result-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
.family-tree-result-actions button { min-height:40px; }
.family-tree-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin:1rem 0; }
.family-tree-rule { padding:.75rem; border:1px solid var(--border-color); border-left:4px solid var(--brand-green, #11833d); border-radius:9px; background:var(--background-color); }
.family-tree-rule strong { display:block; margin-bottom:.18rem; font-size:.88rem; }
.family-tree-rule span { color:var(--text-muted); font-size:.83rem; line-height:1.55; }
.family-tree-pan-note { margin:.7rem 0; color:var(--text-muted); font-size:.86rem; }
.family-tree-canvas { max-width:100%; overflow:auto; border:1px solid var(--border-color); border-radius:12px; background:linear-gradient(180deg, rgba(17,131,61,.035), transparent 30%), var(--background-color); overscroll-behavior:contain; }
.family-tree-canvas svg { display:block; min-width:780px; }
.family-tree-edge { fill:none; stroke:#94a3b8; stroke-width:2; }
.family-tree-edge--partner { stroke:var(--brand-green, #11833d); stroke-width:3; }
.family-tree-node { cursor:pointer; outline:none; }
.family-tree-node rect { fill:var(--card-bg); stroke:var(--border-color); stroke-width:2; transition:stroke .15s, transform .15s; }
.family-tree-node:hover rect,
.family-tree-node:focus rect { stroke:var(--primary-color); }
.family-tree-node.is-center rect { fill:#eef8f1; stroke:var(--brand-green, #11833d); stroke-width:3; }
[data-theme='dark'] .family-tree-node.is-center rect { fill:#123524; }
.family-tree-node__name { fill:var(--text-color); font-size:14px; font-weight:800; text-anchor:middle; }
.family-tree-node__relation { fill:var(--text-muted); font-size:11px; text-anchor:middle; }
.family-tree-generation-label { fill:var(--text-muted); font-size:12px; font-weight:800; }
.family-person-detail { margin-top:1rem; padding:1rem; border:1px solid var(--border-color); border-radius:12px; background:var(--background-color); }
.family-person-detail__label { margin:0 0 .25rem; color:var(--brand-green, #11833d); font-size:.76rem; font-weight:900; letter-spacing:.08em; }
.family-person-detail h4 { margin:0 0 .35rem; font-size:1.08rem; }
.family-person-detail p:last-child { margin:0; color:var(--text-muted); }
.family-tree-guide h2 { margin:0 0 .8rem; font-size:1.5rem; line-height:1.45; }
.family-tree-guide h2:not(:first-child) { margin-top:2rem; }
.family-tree-guide p { margin:0 0 1rem; }
.family-tree-guide ol { margin:0 0 1rem; padding-left:1.5rem; }
.family-tree-guide li { padding-left:.25rem; }
.family-tree-guide li + li { margin-top:.45rem; }

@media (max-width:760px) {
    .family-tree-grid { grid-template-columns:1fr; }
    .family-tree-field--wide { grid-column:auto; }
    .family-tree-result-head { display:block; }
    .family-tree-result-actions { justify-content:flex-start; margin-top:.9rem; }
    .family-tree-result-actions button { flex:1 1 calc(50% - .5rem); }
    .family-tree-rules { grid-template-columns:1fr; }
    .family-tree-result { padding:.8rem; }
    .family-tree-page-title { font-size:clamp(1.35rem, 6.2vw, 1.75rem); }
}