*{box-sizing:border-box}:root{color:#1f2933;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}html,body,#root{min-height:100vh;margin:0;padding:0}body{background:#f6f8f6}button{font-family:inherit}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{color:#fff;background:linear-gradient(120deg,#1f7a4d,#2fa968);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex;box-shadow:0 2px 8px #00000026}.topbar h1{letter-spacing:.3px;margin:0;font-size:20px;font-weight:700}.actions{flex-wrap:wrap;gap:8px;display:flex}.btn{color:#1f2933;cursor:pointer;background:#fff;border:1px solid #0000001f;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600;transition:transform 50ms,box-shadow .15s,background .15s}.btn:hover{box-shadow:0 2px 6px #00000026}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.btn.small{padding:5px 10px;font-size:13px}.btn.primary{color:#fff;background:#0f5132;border-color:#0000}.btn.primary:hover{background:#0c4127}.btn.danger{color:#b02a2a;background:#fdecec;border-color:#f3c2c2}.btn.danger:hover{background:#f9d7d7}.zoombar{background:#eef3ef;border-bottom:1px solid #d9e2dc;align-items:center;gap:8px;padding:8px 20px;display:flex}.zoom-label{text-align:center;color:#384b41;min-width:42px;font-size:13px;font-weight:600}.count{color:#55645b;margin-left:auto;font-size:13px}.focus-chip{color:#4b3a72;background:#e5ddf5;border:1px solid #c3b3e5;border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:13px;font-weight:600;display:inline-flex}.focus-clear{cursor:pointer;color:#4b3a72;background:0 0;border:none;padding:0 2px;font-size:12px;line-height:1}.focus-clear:hover{color:#1f1533}.canvas-wrap{cursor:grab;-webkit-user-select:none;user-select:none;background:#f6f8f6 radial-gradient(#d7e0d9 1px,#0000 1px) 0 0/22px 22px;flex:1;padding:8px;overflow:auto}.canvas-wrap:active{cursor:grabbing}.empty{text-align:center;color:#6b7a70;margin-top:80px;font-size:15px}.canvas{position:relative}.canvas-inner{transform-origin:0 0;position:relative}.lines{pointer-events:none;position:absolute;inset:0}.link-child{fill:none;stroke:#9bb3a4;stroke-width:2px}.link-spouse{fill:none;stroke:#d98a3d;stroke-width:2.5px;stroke-dasharray:4 3}.link-inlaw{fill:none;stroke:#8f7bb8;stroke-width:2px;stroke-dasharray:7 5}.node{cursor:pointer;box-sizing:border-box;background:#fff;border:2px solid #cfd8d2;border-left-width:6px;border-radius:12px;align-items:center;gap:10px;padding:10px;transition:box-shadow .15s,transform 80ms;display:flex;position:absolute;box-shadow:0 2px 5px #00000014}.node:hover{transform:translateY(-1px);box-shadow:0 5px 14px #00000029}.node.male{border-left-color:#3b82c4}.node.female{border-left-color:#d1608f}.node.selected{border-color:#0f5132;box-shadow:0 0 0 3px #0f513240}.node.focused{box-shadow:0 0 0 3px #8f7bb873}.avatar{color:#fff;background:#9aa7a0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;font-size:20px;font-weight:700;display:flex;overflow:hidden}.node.male .avatar{background:#3b82c4}.node.female .avatar{background:#d1608f}.avatar img{object-fit:cover;width:100%;height:100%}.info{min-width:0}.name{color:#1f2933;white-space:nowrap;text-overflow:ellipsis;max-width:92px;font-size:14px;font-weight:700;overflow:hidden}.meta{color:#6b7a70;margin-top:2px;font-size:12px}.detail{z-index:20;background:#fff;border-radius:12px;width:260px;position:fixed;bottom:16px;right:16px;overflow:hidden;box-shadow:0 8px 24px #0003}.detail-head{color:#fff;background:#0f5132;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.detail-head .x{color:#fff;cursor:pointer;background:0 0;border:none;font-size:15px}.detail-body{color:#384b41;gap:6px;padding:12px 14px;font-size:13px;display:grid}.detail-actions{gap:6px;padding:0 14px 14px;display:flex}.legend{z-index:5;background:#fff;border-radius:12px;width:250px;position:fixed;bottom:16px;left:16px;overflow:hidden;box-shadow:0 6px 24px #0f23192e}.legend-head{color:#384b41;background:#eef3ef;border-bottom:1px solid #d9e2dc;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;display:flex}.legend-head .x{color:#55645b;cursor:pointer;background:0 0;border:none;font-size:14px}.legend-body{gap:8px;padding:10px 12px;display:grid}.legend-item{color:#384b41;align-items:center;gap:10px;font-size:12px;line-height:1.35;display:flex}.legend-item svg{flex:none}.legend-swatch{border:1px solid #d9e2dc;border-left-width:4px;border-radius:4px;flex:none;width:26px;height:16px}.legend-swatch.male{background:#eef4fb;border-left-color:#3b82c4}.legend-swatch.female{background:#fdf0f5;border-left-color:#d1608f}.legend-swatch.focus{background:#fff;box-shadow:0 0 0 3px #8f7bb873}.legend-toggle{z-index:5;position:fixed;bottom:16px;left:16px;box-shadow:0 4px 14px #0f23192e}.modal-overlay{z-index:30;background:#0f171473;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:#fff;border-radius:14px;gap:12px;width:100%;max-width:420px;max-height:90vh;padding:22px;display:grid;overflow:auto;box-shadow:0 12px 40px #0000004d}.modal h2{color:#0f5132;margin:0 0 4px;font-size:18px}.modal label{color:#384b41;gap:4px;font-size:13px;font-weight:600;display:grid}.modal .row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.modal input,.modal select{background:#fff;border:1px solid #cfd8d2;border-radius:8px;padding:9px 10px;font-size:14px;font-weight:500}.modal input:focus,.modal select:focus{border-color:#0000;outline:2px solid #2fa968}.req{color:#b02a2a}.modal-actions{justify-content:flex-end;gap:8px;margin-top:6px;display:flex}.combobox{position:relative}.combobox-trigger{color:#1f2a24;cursor:pointer;text-align:left;background:#fff;border:1px solid #cfd8d2;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:9px 10px;font-size:14px;font-weight:500;display:flex}.combobox-trigger:focus{border-color:#0000;outline:2px solid #2fa968}.combobox-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.combobox-placeholder{color:#8a978f}.combobox-caret{color:#6b7a70;flex:none;font-size:12px}.combobox-popover{z-index:40;background:#fff;border:1px solid #cfd8d2;border-radius:8px;gap:6px;padding:6px;display:grid;position:absolute;top:calc(100% + 4px);left:0;right:0;box-shadow:0 10px 30px #0000002e}.combobox-search{border:1px solid #cfd8d2;border-radius:6px;width:100%;padding:8px 10px;font-size:14px;font-weight:500}.combobox-search:focus{border-color:#0000;outline:2px solid #2fa968}.combobox-list{max-height:200px;margin:0;padding:0;list-style:none;overflow-y:auto}.combobox-option{color:#1f2a24;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;border-radius:6px;padding:8px 10px;font-size:14px;font-weight:500;overflow:hidden}.combobox-option.none{color:#6b7a70}.combobox-option.highlighted{background:#e6f4ec}.combobox-option.selected{color:#0f5132;font-weight:700}.combobox-empty{text-align:center;color:#8a978f;padding:10px;font-size:13px}.footer{color:#6b7a70;text-align:center;background:#eef3ef;border-top:1px solid #d9e2dc;padding:10px 20px;font-size:12px}.user-box{align-items:center;gap:8px;margin-left:12px;display:flex}.user-email{color:#55645b;text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-size:12px;overflow:hidden}.saving-dot{color:#2fa968;font-size:12px;animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}.fullscreen-msg{color:#55645b;text-align:center;flex:1;justify-content:center;align-items:center;padding:40px;font-size:15px;display:flex}.fullscreen-msg.config h2{color:#0f5132;margin-top:0}.fullscreen-msg.config code{background:#eef3ef;border-radius:4px;padding:2px 5px;font-size:13px}.fullscreen-msg.config p{color:#384b41;max-width:460px;line-height:1.5}.load-error{color:#b02a2a;background:#fdecec;border-bottom:1px solid #f3c2c2;padding:8px 20px;font-size:13px}.auth-wrap{background:linear-gradient(140deg,#1f7a4d,#2fa968);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-card{background:#fff;border-radius:16px;gap:12px;width:100%;max-width:380px;padding:30px 26px;display:grid;box-shadow:0 16px 48px #00000040}.auth-brand{color:#0f5132;text-align:center;font-size:20px;font-weight:800}.auth-card h2{color:#1f2933;text-align:center;margin:4px 0 0;font-size:22px}.auth-sub{color:#6b7a70;text-align:center;margin:0 0 6px;font-size:13px}.auth-card label{color:#384b41;gap:4px;font-size:13px;font-weight:600;display:grid}.auth-card input{background:#fff;border:1px solid #cfd8d2;border-radius:8px;padding:10px 12px;font-size:14px}.auth-card input:focus{border-color:#0000;outline:2px solid #2fa968}.auth-submit{width:100%;margin-top:4px;padding:11px}.auth-error{color:#b02a2a;background:#fdecec;border-radius:8px;padding:8px 10px;font-size:13px}.auth-notice{color:#0f5132;background:#eafaf0;border-radius:8px;padding:8px 10px;font-size:13px}.auth-toggle{text-align:center;color:#6b7a70;font-size:13px}.auth-toggle button{color:#0f5132;cursor:pointer;background:0 0;border:none;padding:0;font-size:13px;font-weight:700}.auth-toggle button:hover{text-decoration:underline}@media (width<=560px){.topbar{flex-direction:column;align-items:stretch}.topbar h1{text-align:center}.actions{justify-content:center}.detail{width:auto;left:16px;right:16px}.user-box{margin-left:0}}