.tree-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 18px; align-items: end; }
.tree-shell { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: auto; min-height: 420px; padding: 30px; }
.tree-canvas { min-width: max-content; display: flex; justify-content: center; }
.tree-node-wrap { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 16px; }
.tree-couple { display: inline-flex; align-items: stretch; gap: 8px; position: relative; z-index: 2; }
.tree-person { width: 185px; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 8px 18px rgba(0,79,87,.08); display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.tree-person.deceased { border-color: #d8c7c7; background: #fcf8f8; }
.tree-person img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; background: var(--surface-soft); }
.tree-person strong { display: block; line-height: 1.1; font-size: .88rem; }
.tree-person small { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }
.tree-person .ribbon { color: var(--danger); }
.tree-spouse-link { align-self: center; width: 24px; height: 2px; background: var(--secondary); }
.tree-children { position: relative; display: flex; justify-content: center; gap: 12px; padding-top: 34px; margin-top: 18px; }
.tree-children::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 18px; background: var(--mint); }
.tree-child { position: relative; padding-top: 18px; }
.tree-child::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--mint); }
.tree-child:first-child::before { left: 50%; }
.tree-child:last-child::before { right: 50%; }
.tree-child:only-child::before { left: 50%; right: 50%; }
.tree-child::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 18px; background: var(--mint); }
.kinship-box { margin-top: 22px; padding: 20px; }
.kinship-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: end; }
.kinship-result { margin-top: 14px; padding: 14px; background: var(--surface-soft); border-radius: 14px; min-height: 52px; }
.family-directory { margin-top: 28px; }
.family-search { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin-bottom: 18px; }
.people-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.person-card { padding: 16px; display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.person-card img { width: 72px; height: 72px; object-fit: cover; border-radius: 20px; background: var(--surface-soft); }
.person-card h3 { margin: 0 0 4px; font-size: 1rem; }
.person-card p { margin: 3px 0; color: var(--muted); font-size: .84rem; }
.person-actions { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }