.page-header{margin-bottom:2rem}
.family-tree{display:flex;flex-direction:column;align-items:center;gap:0;padding:1rem 0}
.grand-row{display:flex;align-items:flex-start;justify-content:center;gap:0;width:100%}
.grand-gap-wide{width:5rem;flex-shrink:0}
.tree-side{display:flex;flex-direction:column;align-items:center}
.grand-gap{width:3rem;flex-shrink:0}
.gen{display:flex;flex-direction:column;align-items:center;gap:0}
.gen-label{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:.75rem}
.couple{display:flex;align-items:center;gap:0}
.union-h{width:1.75rem;height:2px;background:linear-gradient(90deg, transparent, var(--accent-border), transparent);flex-shrink:0}
.union-pair{display:flex;align-items:center;gap:0;justify-content:center;margin:.5rem 0}
.children-row{display:flex;align-items:flex-start;justify-content:center;gap:2.5rem;width:100%}
.member{
display:flex;flex-direction:column;align-items:center;gap:.5rem;
padding:1rem 1.2rem;
min-width:96px;
transition:.25s ease;position:relative;
}
.member:hover{transform:translateY(-3px);border-color:rgba(0,215,160,0.38);box-shadow:0 14px 40px rgba(0,0,0,0.32),0 0 24px rgba(0,215,160,0.08)}
.member-self{border-color:rgba(0,215,160,0.28);background:rgba(0,215,160,0.06)}
.avatar{width:58px;height:58px;border-radius:50%;overflow:hidden;flex-shrink:0}
.avatar.empty{
background:radial-gradient(circle at 35% 30%, rgba(0,215,160,0.12), transparent 65%), rgba(255,255,255,0.02);
border:1.5px dashed rgba(0,215,160,0.28);
display:flex;align-items:center;justify-content:center;
}
.avatar.empty::after{content:'+';font-size:1.4rem;font-weight:300;color:rgba(0,215,160,0.55)}
.name{font-size:.9rem;font-weight:600;color:var(--text);letter-spacing:.02em}
.relation{font-size:.68rem;color:var(--text-secondary);letter-spacing:.06em}
.gen-connector{position:relative;width:100%;height:2.25rem;display:flex;align-items:flex-start;flex-shrink:0}
.gen-connector-four{justify-content:center}
.gc-line{height:2px;background:linear-gradient(90deg, transparent, rgba(0,215,160,0.3), transparent);align-self:center}
.gc-line-left{flex:1}
.gc-line-right{flex:1}
.gc-v{width:2px;height:100%;background:linear-gradient(180deg, rgba(0,215,160,0.3), rgba(0,215,160,0.12));flex-shrink:0}
.gc-gap{width:3rem;flex-shrink:0}
.gc-gap-wide{width:5rem;flex-shrink:0}
.gen-connector-single{justify-content:center}
.gc-v-single{height:100%;width:2px;background:linear-gradient(180deg, rgba(0,215,160,0.3), rgba(0,215,160,0.12));flex-shrink:0}
@media(max-width:900px){
.member{padding:.75rem .9rem;min-width:78px}
.avatar{width:48px;height:48px}
.name{font-size:.82rem}
.union-h{width:1rem}
.grand-gap{width:1rem}
.grand-gap-wide{width:1.5rem}
.gc-gap{width:1rem}
.gc-gap-wide{width:1.5rem}
.children-row{gap:1.5rem}
.gen-connector{height:1.6rem}
}
@media(max-width:600px){
.grand-row{flex-wrap:wrap;gap:.75rem 1.25rem}
.grand-gap,.grand-gap-wide{display:none}
.gen-connector{display:none}
.union-pair{margin:1rem 0}
.member{min-width:72px;padding:.7rem .8rem}
.avatar{width:44px;height:44px}
}