#pedigree-container {
    width: 100%;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    position: relative;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    background: #fafafa;
    cursor: grab;
}
#pedigree-container:active { cursor: grabbing; }
#pedigree-container svg { width: 100%; height: 100%; }

/* Node rectangles */
.pedigree-node rect {
    stroke-width: 2px;
    rx: 6;
    ry: 6;
    cursor: pointer;
    transition: filter 0.2s;
}
.pedigree-node rect:hover { filter: brightness(1.08); }
.pedigree-node.male rect { fill: #e8f0fe; stroke: #3273dc; }
.pedigree-node.female rect { fill: #feecf0; stroke: #f14668; }
.pedigree-node.unknown rect { fill: #f5f5f5; stroke: #b5b5b5; }

/* Node text */
.pedigree-node .node-name { font-size: 13px; font-weight: 600; fill: #363636; }
.pedigree-node .node-info { font-size: 11px; fill: #7a7a7a; }

/* Sex icon */
.pedigree-node .sex-icon { font-size: 14px; }
.pedigree-node.male .sex-icon { fill: #3273dc; }
.pedigree-node.female .sex-icon { fill: #f14668; }

/* Expand button */
.expand-btn { cursor: pointer; }
.expand-btn circle { fill: #fff; stroke: #b5b5b5; stroke-width: 1.5px; }
.expand-btn:hover circle { fill: #3273dc; stroke: #3273dc; }
.expand-btn text { fill: #b5b5b5; font-size: 16px; font-weight: bold; }
.expand-btn:hover text { fill: #fff; }

/* Links (connector lines) */
.pedigree-link { fill: none; stroke: #b5b5b5; stroke-width: 1.5px; }

/* Generation separators */
.generation-separator {
    stroke: #b5b5b5;
    stroke-width: 1px;
    stroke-dasharray: 6 4;
}
.generation-label {
    font-size: 13px;
    font-weight: 600;
    fill: #7a7a7a;
}

/* Loading state */
.node-loading .expand-btn circle { fill: #3273dc; stroke: #3273dc; }
.node-loading .expand-btn text { fill: #fff; }

/* Tooltip */
.pedigree-tooltip {
    position: absolute;
    background: white;
    border: 1px solid #dbdbdb;
    border-radius: 6px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 220px;
    max-width: 320px;
    font-size: 14px;
    pointer-events: auto;
}
.pedigree-tooltip .tooltip-name { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.pedigree-tooltip .tooltip-info { color: #7a7a7a; margin-bottom: 4px; }
.pedigree-tooltip .tooltip-link { margin-top: 8px; }
.pedigree-tooltip .tooltip-thumb { float: right; margin-left: 10px; border-radius: 4px; }