body { font-family: 'Cairo', system-ui, sans-serif; background: #f6f8f7; }
.pp-list { z-index: 1050; max-height: 260px; overflow-y: auto; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-right: 1.2rem; padding-right: .9rem; border-right: 2px solid #cfe3d8; }
.tree li:not(.open) > ul { display: none; }
.tree-row { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; }
.tree-toggle { width: 1.5rem; height: 1.5rem; line-height: 1; border: 1px solid #198754; background: #fff; color: #198754; border-radius: 50%; font-weight: 700; padding: 0; }
.tree-toggle.leaf { border-color: transparent; color: #adb5bd; cursor: default; }
.tree-name { text-decoration: none; font-weight: 600; }
.tree-name.male { color: #0b5d3b; }
.tree-name.female { color: #b02a6b; }
.tree-row.dead .tree-name { color: #6c757d; text-decoration: line-through; text-decoration-color: #ced4da; }
.tree-add { text-decoration: none; color: #198754; opacity: 0; }
.tree-row:hover .tree-add { opacity: 1; }
.tree li.hl > .tree-row { background: #fff3cd; border-radius: .4rem; }

/* الشجرة الرسومية */
#graph { position: relative; height: 72vh; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; overflow: hidden; }
#graph svg { cursor: grab; display: block; }
#graph svg:active { cursor: grabbing; }
#legend .badge { font-weight: 600; }