:root{--fam-navy:#0b3b4f;--fam-teal:#1f6f64;--fam-coral:#e2622f;--fam-sand:#f6efe3;--fam-line:#d9e7eb;--fam-text:#16333e;--fam-muted:#6d818b}
.family-v31{background:#f4f8fa}.family-v31 .container{max-width:1380px}.fam31-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}.fam31-sidebar,.fam31-card{background:#fff;border:1px solid #e3edf0;border-radius:24px;box-shadow:0 12px 36px rgba(11,59,79,.07)}.fam31-sidebar{position:sticky;top:92px;padding:18px}.fam31-profile{padding:8px 4px 18px;text-align:center;border-bottom:1px solid #edf2f4}.fam31-avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 8px 22px rgba(11,59,79,.16);background:linear-gradient(135deg,var(--fam-teal),var(--fam-coral));display:grid;place-items:center;color:#fff;font-size:32px;font-weight:800;margin:0 auto 10px}.fam31-profile h3{margin:0 0 4px;font-size:20px}.fam31-profile p{margin:0;color:var(--fam-muted);font-size:13px}.fam31-nav{display:grid;gap:6px;margin-top:14px}.fam31-nav a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:13px;color:#31505c;text-decoration:none;font-weight:700;font-size:14px}.fam31-nav a:hover,.fam31-nav a.active{background:#edf6f5;color:#0e665f}.fam31-nav .ico{width:28px;height:28px;border-radius:9px;background:#f1f6f7;display:grid;place-items:center}.fam31-main{min-width:0}.fam31-hero-card{padding:24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:linear-gradient(135deg,#08384b,#116a6b 55%,#d46836);color:#fff}.fam31-hero-card h2{font:700 clamp(28px,4vw,46px)/1.05 'Playfair Display',serif;margin:0 0 10px}.fam31-hero-card p{max-width:760px;color:#d8ecf0;line-height:1.7;margin:0}.fam31-actions{display:flex;gap:10px;flex-wrap:wrap}.fam31-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 16px;border-radius:999px;text-decoration:none;font-weight:800;border:0;cursor:pointer}.fam31-btn.primary{background:var(--fam-coral);color:#fff}.fam31-btn.light{background:#fff;color:#17414e}.fam31-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.fam31-stat{padding:18px}.fam31-stat strong{display:block;font-size:30px;color:var(--fam-navy)}.fam31-stat span{color:var(--fam-muted);font-size:13px}.fam31-graph-card{padding:0;overflow:hidden}.fam31-graph-toolbar{padding:16px 18px;border-bottom:1px solid #e7eef0;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.fam31-graph-toolbar h3{margin:0}.fam31-graph-tools{display:flex;gap:8px;flex-wrap:wrap}.fam31-graph-tools input,.fam31-graph-tools select{padding:10px 12px;border:1px solid #d7e4e8;border-radius:12px;background:#fff}.fam31-graph{height:620px;position:relative;background:radial-gradient(circle at 50% 45%,#fff 0,#f7fbfc 68%,#eef6f7 100%);overflow:hidden}.fam31-graph svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.fam31-node{position:absolute;width:150px;min-height:88px;transform:translate(-50%,-50%);background:#fff;border:1px solid #dbe7ea;border-radius:18px;padding:10px;box-shadow:0 8px 24px rgba(9,55,72,.09);text-align:center;cursor:pointer;transition:.2s}.fam31-node:hover,.fam31-node.focus{border-color:#ef7d59;box-shadow:0 12px 30px rgba(226,98,47,.18);transform:translate(-50%,-50%) scale(1.04)}.fam31-node img,.fam31-node .avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;margin:0 auto 7px;background:linear-gradient(135deg,#1f6f64,#e2622f);display:grid;place-items:center;color:#fff;font-weight:800}.fam31-node b{display:block;font-size:12px;color:#153845}.fam31-node small{font-size:10px;color:#748891}.fam31-edge{stroke:#a7bdc5;stroke-width:2}.fam31-edge.spouse{stroke:#e2622f;stroke-width:3}.fam31-edge.pending{stroke-dasharray:7 6;opacity:.65}.fam31-legend{display:flex;gap:16px;flex-wrap:wrap;padding:11px 18px;border-top:1px solid #e7eef0;color:#667d87;font-size:12px}.fam31-legend i{display:inline-block;width:24px;border-top:2px solid #a7bdc5;margin-right:6px}.fam31-legend i.spouse{border-color:#e2622f;border-width:3px}.fam31-legend i.pending{border-style:dashed}.fam31-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.fam31-tabs a{padding:9px 13px;border-radius:999px;background:#eaf2f4;color:#31505b;text-decoration:none;font-weight:800;font-size:13px}.fam31-tabs a.active{background:var(--fam-navy);color:#fff}.fam31-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.fam31-person{padding:14px;display:flex;gap:12px;align-items:center}.fam31-person img,.fam31-person .avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#1f6f64,#e2622f);color:#fff;display:grid;place-items:center;font-weight:800}.fam31-person b{display:block}.fam31-person small{color:var(--fam-muted)}.fam31-person a{margin-left:auto;color:#e2622f;text-decoration:none;font-weight:800}.fam31-media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.fam31-media{background:#fff;border:1px solid #e1ebee;border-radius:18px;overflow:hidden}.fam31-media img,.fam31-media video,.fam31-media iframe{width:100%;aspect-ratio:1.2/1;object-fit:cover;border:0;display:block}.fam31-media .body{padding:11px}.fam31-media .body b{font-size:13px}.fam31-media .body p{font-size:12px;color:var(--fam-muted);margin:5px 0}.fam31-form{padding:20px}.fam31-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.fam31-field label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}.fam31-field input,.fam31-field select,.fam31-field textarea{width:100%;padding:11px 12px;border:1px solid #d6e3e7;border-radius:12px;background:#fff;font:inherit}.fam31-field textarea{min-height:110px}.fam31-section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:24px 0 12px}.fam31-section-title h3{margin:0;font-size:22px}.fam31-source{padding:14px 16px;background:#fff8ef;border:1px solid #f3dec7;border-radius:16px;color:#7a5b3c;font-size:12px;line-height:1.6}.cms31-family-toolbar{display:flex;gap:8px;flex-wrap:wrap}.cms31-media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.cms31-media-card{border:1px solid #e0e8eb;border-radius:16px;overflow:hidden;background:#fff}.cms31-media-card img,.cms31-media-card video{width:100%;height:150px;object-fit:cover;display:block}.cms31-media-card .body{padding:12px}.cms31-graph-report{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}.cms31-graph-report .card{margin:0}.cms31-graph-report .num{font-size:28px}
@media(max-width:1050px){.fam31-shell{grid-template-columns:1fr}.fam31-sidebar{position:relative;top:auto}.fam31-nav{grid-template-columns:repeat(3,1fr)}.fam31-stats{grid-template-columns:repeat(2,1fr)}.fam31-grid{grid-template-columns:repeat(2,1fr)}.fam31-media-grid,.cms31-media-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.fam31-hero-card{grid-template-columns:1fr;padding:18px}.fam31-nav{grid-template-columns:1fr 1fr}.fam31-stats{grid-template-columns:1fr 1fr}.fam31-graph{height:520px}.fam31-node{width:118px;min-height:75px}.fam31-node img,.fam31-node .avatar{width:40px;height:40px}.fam31-grid,.fam31-media-grid,.fam31-form-grid,.cms31-media-grid{grid-template-columns:1fr}.cms31-graph-report{grid-template-columns:1fr 1fr}.family-v31{padding-bottom:74px}}

/* ===== v31.3 Modern Family Network ===== */
.fam313-graph-card{overflow:visible}
.fam313-toolbar{align-items:flex-end;padding:20px 22px 16px;background:linear-gradient(180deg,#fff 0,#fbfdfe 100%)}
.fam313-title{min-width:280px;flex:1}
.fam313-kicker{display:block;font-size:10px;letter-spacing:.16em;font-weight:900;color:var(--fam-coral);margin-bottom:5px}
.fam313-title h3{font-size:24px;margin:0 0 4px;color:var(--fam-navy)}
.fam313-title p{margin:0;color:var(--fam-muted);font-size:12px;line-height:1.55;max-width:620px}
.fam313-tools{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr);min-width:min(520px,100%)}
.fam313-tools label{display:grid;gap:5px}.fam313-tools label>span{font-size:10px;font-weight:900;color:#748790;letter-spacing:.04em;text-transform:uppercase}
.fam313-tools select,.fam313-tools input{height:42px;border-radius:14px!important;padding:0 13px!important;box-shadow:0 3px 10px rgba(11,59,79,.03)}
.fam313-controlbar{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;padding:10px 18px;background:#f7fafb;border-bottom:1px solid #e6eef1}
.fam313-segment{display:inline-flex;background:#e9f1f3;border-radius:999px;padding:3px}.fam313-segment button{border:0;background:transparent;color:#52707b;font-weight:800;font-size:12px;padding:8px 13px;border-radius:999px;cursor:pointer}.fam313-segment button.active{background:#fff;color:var(--fam-navy);box-shadow:0 3px 10px rgba(9,55,72,.09)}
.fam313-depth{display:flex;align-items:center;gap:7px;color:#69808a;font-size:12px;font-weight:800}.fam313-depth select{border:1px solid #d9e6e9;background:#fff;border-radius:10px;padding:7px 9px;color:#31505b}
.fam313-zoom{display:flex;align-items:center;gap:5px;margin-left:auto}.fam313-zoom button{height:34px;min-width:34px;border:1px solid #d9e5e9;background:#fff;color:#31505b;border-radius:10px;font-weight:900;cursor:pointer;padding:0 9px}.fam313-zoom button:hover{border-color:#8fb2bd;background:#f8fbfc}.fam313-zoom span{min-width:48px;text-align:center;font-size:11px;color:#6f848c;font-weight:800}
.fam313-generation-strip{display:flex;gap:6px;padding:9px 18px;overflow-x:auto;background:#fff;border-bottom:1px solid #ebf1f3;scrollbar-width:thin}.fam313-generation-strip button{white-space:nowrap;border:1px solid #dce8eb;background:#fff;color:#45616c;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800;cursor:pointer}.fam313-generation-strip button:hover,.fam313-generation-strip button.active{background:#eaf5f4;border-color:#b6d7d2;color:#17695f}
.fam313-graph{height:680px;background:linear-gradient(180deg,#f6fbfc,#edf6f8);overflow:hidden;position:relative}
.fam313-canvas{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none}.fam313-canvas.dragging{cursor:grabbing}
.fam313-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}.fam313-world>svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}.fam313-world>[data-fam-nodes],.fam313-world>[data-family-lanes]{position:absolute;left:0;top:0}
.fam313-lane{position:absolute;left:0;border-top:1px dashed #d7e5e9;pointer-events:none}.fam313-lane span{position:sticky;left:16px;display:inline-flex;transform:translateY(-50%);background:#edf6f8;border:1px solid #d6e6ea;border-radius:999px;padding:5px 9px;color:#66808a;font-size:10px;font-weight:900;letter-spacing:.04em;box-shadow:0 2px 8px rgba(11,59,79,.04)}
.fam313-graph .fam31-node{width:174px;min-height:108px;border-radius:20px;padding:12px 11px 10px;box-shadow:0 10px 26px rgba(7,53,70,.10);border:1px solid #d9e7ea;text-decoration:none;z-index:2;display:block;background:rgba(255,255,255,.97)}
.fam313-graph .fam31-node:hover{transform:translate(-50%,-50%) translateY(-2px);box-shadow:0 16px 38px rgba(7,53,70,.16);border-color:#99c5c4}
.fam313-graph .fam31-node.focus{border:2px solid var(--fam-coral);box-shadow:0 0 0 5px rgba(226,98,47,.09),0 14px 35px rgba(226,98,47,.16)}
.fam313-graph .fam31-node.dim{opacity:.22;filter:saturate(.45)}
.fam313-graph .fam31-node img,.fam313-graph .fam31-node .avatar{width:52px;height:52px;margin-bottom:8px;border:3px solid #fff;box-shadow:0 4px 12px rgba(7,53,70,.13)}
.fam313-graph .fam31-node b{font-size:12.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}.fam313-graph .fam31-node small{display:block;font-size:9.5px;line-height:1.3;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fam313-node-meta{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:7px}.fam313-chip{font-size:8px;font-weight:900;padding:3px 6px;border-radius:999px;background:#eef5f6;color:#5f7780}.fam313-chip.verified{background:#e9f7ef;color:#2e7c54}.fam313-chip.pending{background:#fff3e9;color:#b86631}
.fam313-edge{fill:none;stroke:#adc2c9;stroke-width:2.2;vector-effect:non-scaling-stroke}.fam313-edge.parent{stroke:#a8bec6}.fam313-edge.spouse{stroke:var(--fam-coral);stroke-width:3.2}.fam313-edge.pending{stroke-dasharray:7 7;opacity:.72}.fam313-edge.focused{stroke-width:4;opacity:1}
.fam313-inspector{position:absolute;right:14px;top:14px;width:300px;max-height:calc(100% - 28px);overflow:auto;border:1px solid #dce8eb;border-radius:20px;background:rgba(255,255,255,.97);box-shadow:0 18px 50px rgba(8,55,72,.18);padding:16px;transform:translateX(calc(100% + 30px));transition:.24s ease;z-index:8;backdrop-filter:blur(12px)}.fam313-inspector.open{transform:translateX(0)}.fam313-inspector-close{position:absolute;right:10px;top:8px;border:0;background:#eef4f5;width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:#526b74}.fam313-inspector-placeholder{font-size:12px;color:#7a8f97;line-height:1.6;padding:28px 6px 6px}.fam313-inspector-head{text-align:center;padding-top:10px}.fam313-inspector-head img,.fam313-inspector-head .avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto 10px;background:linear-gradient(135deg,var(--fam-teal),var(--fam-coral));display:grid;place-items:center;color:#fff;font-weight:900;font-size:28px;border:4px solid #fff;box-shadow:0 7px 20px rgba(8,55,72,.14)}.fam313-inspector-head h4{margin:0;color:var(--fam-navy);font-size:18px}.fam313-inspector-head p{margin:4px 0 0;color:#748891;font-size:11px}.fam313-inspector-rel{margin-top:14px;padding-top:12px;border-top:1px solid #edf2f4}.fam313-inspector-rel strong{display:block;font-size:11px;color:#56717b;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}.fam313-rel-list{display:grid;gap:6px}.fam313-rel-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;background:#f5f9fa;border-radius:11px;font-size:11px;color:#3d5964}.fam313-rel-item em{font-style:normal;color:#889aa1;font-size:9px}.fam313-inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}.fam313-inspector-actions a,.fam313-inspector-actions button{border:0;border-radius:11px;padding:9px 10px;font-size:11px;font-weight:900;text-decoration:none;text-align:center;cursor:pointer}.fam313-inspector-actions .primary{background:var(--fam-coral);color:#fff}.fam313-inspector-actions .secondary{background:#eaf4f4;color:#17695f}
.fam313-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:4px;color:#6f858e}.fam313-empty strong{font-size:16px;color:#31505c}.fam313-empty span{font-size:12px}
.fam313-legend{align-items:center;background:#fff}.fam313-hint{margin-left:auto;color:#8ba0a8}
.fam313-graph:fullscreen{background:#eef7f8}.fam313-graph:fullscreen .fam313-canvas{inset:0}.fam313-graph:fullscreen .fam313-inspector{top:24px;right:24px;max-height:calc(100% - 48px)}
@media(max-width:980px){.fam313-tools{min-width:100%;grid-template-columns:1fr 1fr}.fam313-controlbar{align-items:flex-start}.fam313-zoom{width:100%;margin-left:0;justify-content:flex-end}.fam313-graph{height:620px}}
@media(max-width:680px){.fam313-toolbar{padding:15px}.fam313-title h3{font-size:20px}.fam313-tools{grid-template-columns:1fr}.fam313-controlbar{gap:8px;padding:9px 12px}.fam313-depth{order:2}.fam313-zoom{order:3;justify-content:flex-start;overflow-x:auto}.fam313-generation-strip{padding:8px 12px}.fam313-graph{height:570px}.fam313-graph .fam31-node{width:150px;min-height:96px}.fam313-inspector{left:10px;right:10px;bottom:10px;top:auto;width:auto;max-height:48%;transform:translateY(calc(100% + 25px))}.fam313-inspector.open{transform:translateY(0)}.fam313-hint{width:100%;margin-left:0}.fam313-legend{gap:10px}.fam313-canvas{overflow:hidden}}