.graph-explorer { scroll-margin-top:24px; }
.graph-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; }
.graph-kicker { font-size:10px; letter-spacing:2px; color:#9a783e; font-weight:700; }
.graph-heading h2 { font-size:25px; color:#213d62; margin:6px 0 8px; line-height:1.45; overflow-wrap:anywhere; }
.graph-heading p { color:#7a8898; font-size:13px; margin:0; }
.graph-summary { display:flex; gap:20px; flex-wrap:wrap; color:#8792a1; font-size:11px; }
.graph-summary span { display:flex; flex-direction:column; gap:4px; }
.graph-summary strong { font-size:24px; line-height:1.1; color:#314862; font-weight:700; }
.graph-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px; }
.graph-segment { display:flex; gap:3px; background:#e9edf2; border-radius:7px; padding:4px; }
.graph-segment button { appearance:none; border:0; background:transparent; padding:8px 13px; border-radius:5px; cursor:pointer; font:inherit; font-size:12px; color:#718196; white-space:nowrap; }
.graph-segment button.active { background:white; color:#213d62; font-weight:700; box-shadow:0 1px 5px #213d6210; }
.graph-search { margin-left:auto; display:flex; align-items:center; gap:8px; border:1px solid #dae1e9; background:white; padding:0 13px; border-radius:7px; color:#95a2b0; width:240px; min-width:0; }
.graph-search input { border:0; outline:0; width:100%; background:transparent; height:40px; font:inherit; font-size:12px; color:#314862; min-width:0; }
.graph-search:focus-within { border-color:#5d86b4; box-shadow:0 0 0 3px #5d86b415; }
.graph-workspace { display:grid; grid-template-columns:minmax(0,1fr) 285px; border:1px solid #dce3eb; border-radius:12px; overflow:hidden; background:white; box-shadow:0 8px 30px #213d6206; }
.graph-stage { position:relative; min-width:0; height:620px; background-color:#f8fafc; background-image:radial-gradient(#dce4ed .8px,transparent .8px); background-size:22px 22px; }
.graph-stage #networkContainer { width:100%; height:100%; }
.graph-stage canvas { outline:none; }
.graph-message { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; padding:30px; text-align:center; color:#7a8898; font-size:13px; pointer-events:none; }
.graph-message[hidden] { display:none; }
.graph-message strong { color:#314862; font-size:17px; }
.graph-message button,.graph-message a { pointer-events:auto; }
.graph-navigation { position:absolute; left:16px; bottom:20px; display:flex; background:white; border:1px solid #dce3eb; border-radius:7px; box-shadow:0 3px 12px #213d620c; }
.graph-navigation button { border:0; border-right:1px solid #edf0f4; background:white; color:#526b85; height:35px; width:36px; font-size:17px; cursor:pointer; }
.graph-navigation button:first-child { border-radius:7px 0 0 7px; }.graph-navigation button:last-child { border-right:0; border-radius:0 7px 7px 0; }
.graph-navigation button:hover { background:#edf3f9; color:#213d62; }
.graph-guide { position:absolute; left:16px; top:16px; color:#98a4b3; font-size:10px; pointer-events:none; }
.graph-zoom { position:absolute; right:16px; bottom:25px; color:#93a0af; font-size:11px; }
.graph-sidebar { min-width:0; border-left:1px solid #e4e9f0; display:flex; flex-direction:column; height:620px; background:#fff; }
.graph-details { padding:22px 20px 18px; overflow-y:auto; max-height:390px; border-bottom:1px solid #edf0f4; }
.graph-detail-kicker { color:#9a783e; font-size:10px; letter-spacing:.7px; }
.graph-details h3 { margin:9px 0 3px; color:#213d62; font-size:19px; line-height:1.5; overflow-wrap:anywhere; }
.graph-username { font-size:11px; color:#9aa5b3; margin:0 0 16px; overflow-wrap:anywhere; }
.graph-person-stats { display:flex; gap:20px; margin:14px 0 17px; color:#8e9bac; font-size:10px; }
.graph-person-stats span { display:flex; flex-direction:column; gap:3px; }.graph-person-stats strong { font-size:17px; color:#435c76; }
.graph-detail-actions { display:flex; gap:7px; flex-wrap:wrap; }.graph-detail-actions .btn { font-size:11px; }
.graph-certification { font-size:10px; color:#9aa5b3; margin:12px 0 18px; line-height:1.7; }
.graph-details h4 { font-size:11px; color:#6d7f92; margin:10px 0; }
.graph-connections { display:flex; flex-direction:column; gap:7px; }
.graph-connection { appearance:none; text-align:left; background:#f7f9fc; border:1px solid #edf1f5; padding:9px 10px; border-radius:5px; font:inherit; font-size:11px; color:#596d82; cursor:pointer; overflow-wrap:anywhere; }
.graph-connection:hover { border-color:#a9bfda; }.graph-connection small { display:block; font-size:9px; color:#95a2b0; margin-top:5px; }.graph-connection b { color:#ae8850; }
.graph-list-heading { display:flex; justify-content:space-between; padding:16px 20px 9px; font-size:11px; color:#6e8093; }.graph-list-heading span { font-size:10px; color:#9aa5b3; }
.graph-player-list { overflow-y:auto; flex:1; min-height:140px; padding:0 8px 12px; }
.graph-player { display:flex; align-items:center; gap:10px; width:100%; border:0; background:white; text-align:left; cursor:pointer; padding:10px 12px; border-radius:6px; font:inherit; }
.graph-player:hover,.graph-player.selected { background:#f0f4f9; }
.graph-player-avatar { flex:0 0 30px; height:30px; display:flex; align-items:center; justify-content:center; background:#e8eff7; color:#6c88a7; border-radius:50%; font-size:11px; }.graph-player-avatar.center { background:#213d62; color:#dfc08a; }
.graph-player-name { display:flex; flex-direction:column; min-width:0; gap:4px; flex:1; }.graph-player-name strong { color:#435c76; font-size:11px; overflow-wrap:anywhere; font-weight:600; }.graph-player-name small { font-size:9px; color:#9aa5b3; }.graph-player-arrow { color:#a2adba; font-size:17px; }
.graph-no-results { font-size:11px; color:#95a2b0; line-height:1.8; padding:8px 12px; }
.graph-legend { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin-top:15px; color:#8b98a8; font-size:10px; }
.graph-legend > span { display:flex; align-items:center; gap:6px; }.graph-legend .graph-direction { margin-left:auto; }.graph-direction strong { color:#64798f; font-weight:500; }
.graph-dot { display:inline-block; width:9px; height:9px; border-radius:50%; }.graph-dot.center { background:#213d62; border:2px solid #c49743; width:11px; height:11px; }.graph-dot.direct { background:#5d86b4; }.graph-dot.indirect { background:#d4e1ee; }
.graph-line { display:inline-block; width:19px; height:2px; }.graph-line.confirmed { background:#4279aa; }.graph-line.mutual { background:#b7862c; }.graph-line.pending { height:0; border-top:2px dashed #a6b1bd; }
.graph-edge-title span { display:block; font-size:14px; color:#b7862c; }.graph-edge-people { display:flex; flex-direction:column; gap:6px; }.graph-edge-people button { background:#f0f4f9; border:0; border-radius:5px; color:#526b85; padding:9px; font:inherit; font-size:11px; cursor:pointer; text-align:left; }
.graph-records { padding-left:16px; color:#596d82; font-size:11px; line-height:1.7; }.graph-records li { margin:12px 0; overflow-wrap:anywhere; }.graph-records small { display:block; color:#98a4b3; font-size:10px; }
.graph-explorer button:focus-visible,.graph-explorer a:focus-visible { outline:2px solid #7ba0c5; outline-offset:2px; }
.profile-network-actions { display:flex; gap:18px; flex-wrap:wrap; }
@media(max-width:950px) { .graph-heading { flex-direction:column; align-items:flex-start; }.graph-summary { gap:26px; }.graph-summary span { flex-direction:row; align-items:baseline; gap:5px; }.graph-summary strong { font-size:20px; }.graph-search { width:210px; }.graph-workspace { grid-template-columns:minmax(0,1fr) 245px; }.graph-person-stats { gap:15px; }.graph-legend .graph-direction { margin-left:0; } }
@media(max-width:650px) { .graph-heading h2 { font-size:21px; }.graph-summary { gap:15px; }.graph-summary span { font-size:10px; }.graph-toolbar { gap:8px; }.graph-segment button { padding:8px 10px; font-size:11px; }.graph-search { flex:1 0 100%; margin-left:0; width:100%; }.graph-workspace { grid-template-columns:1fr; }.graph-stage { height:440px; }.graph-sidebar { height:auto; border-left:0; border-top:1px solid #e4e9f0; }.graph-details { max-height:350px; }.graph-player-list { max-height:210px; min-height:0; }.graph-guide { right:12px; left:12px; font-size:9px; }.graph-navigation { left:12px; }.graph-legend { gap:10px 13px; }.graph-summary strong { font-size:17px; }.profile-network-actions { gap:10px; } }