.family-tree-app { color:#182c3a; font:14px/1.5 system-ui,sans-serif; position:relative; }
.family-tree-app button,.family-tree-app select,.family-tree-app input { font:inherit; margin:4px; padding:7px 10px; max-width:100%; }
.family-tree-app button { cursor:pointer; }
.family-tree-app button:disabled { cursor:not-allowed; color:#687580; background:#e1e5e8; border:1px solid #c2cbd2; opacity:.65; }
.family-tree-app .ft-partial-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; margin-bottom:12px; background:#eef3f6; border:1px solid #becbd4; border-radius:8px; }
.family-tree-app .ft-search-results,.family-tree-app .ft-partial-results { flex-basis:100%; max-height:240px; overflow:auto; }
.family-tree-app .ft-partial-search { width:320px; }
.family-tree-app .ft-legend { margin:16px 0; padding:14px 16px; border:1px solid #d4dfe6; border-radius:8px; background:#fff; }
.family-tree-app .ft-legend ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px 24px; list-style:none; padding:0; margin:12px 0; }
.family-tree-app .ft-legend li { display:flex; align-items:center; gap:12px; margin:0; padding:0; }
.family-tree-app .ft-legend-symbol { flex:0 0 42px; width:42px; text-align:center; font-size:28px; line-height:1; color:#627587; }
.family-tree-app .ft-legend-union { color:#98632b; }
.family-tree-app .ft-legend-cycle { color:#ad3b1d; font-weight:bold; }
.family-tree-app .ft-legend p { margin:10px 0 0; padding-top:10px; border-top:1px solid #e5ebef; }
.family-tree-app .ft-layout-status:empty { display:none; }
.family-tree-app .ft-toolbar,.family-tree-app .ft-access { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:8px; background:#eef3f6; }
.family-tree-app .ft-canvas { border:1px solid #becbd4; background:#fafcfd; width:100%; overflow:hidden; }
.family-tree-app .ft-canvas svg { display:block; touch-action:none; }
.family-tree-app .ft-person { cursor:pointer; }
.family-tree-app .ft-junction { cursor:pointer; }
.family-tree-app .ft-junction.ft-active path { stroke:#be4716; stroke-width:3; }
.family-tree-app .ft-person:focus-visible .ft-card,.family-tree-app .ft-junction:focus-visible path { stroke:#215eb8; stroke-width:4; }
.family-tree-app .ft-layout-status { margin:8px 0; font-weight:600; }
.family-tree-app .ft-legend,.family-tree-app .ft-keyboard-help { font-size:13px; }
.family-tree-app .ft-dim { opacity:.3; }
.family-tree-app .ft-lines .ft-active { stroke:#be4716; stroke-width:3; }
.family-tree-app .ft-person.ft-active .ft-card { stroke:#be4716; stroke-width:3; }
.family-tree-app .ft-preview { position:fixed; z-index:100000; pointer-events:none; max-width:min(380px,calc(100vw - 24px)); max-height:60vh; overflow:hidden; padding:12px; background:#fff; border:1px solid #8a9aa8; border-radius:8px; box-shadow:0 4px 18px #0003; }
.family-tree-app .ft-panel { margin-top:12px; padding:16px; background:#fff; border:2px solid #ba6034; border-radius:8px; }
.family-tree-app .ft-panel h3 { margin:0 0 8px; }
.family-tree-app .ft-panel a { margin-right:12px; }
.family-tree-app .ft-status { margin:8px 0; }
.family-tree-app [hidden] { display:none !important; }
.family-tree-app :focus-visible { outline:3px solid #215eb8; outline-offset:3px; }
.family-tree-app .ft-export { display:flex; flex-wrap:wrap; align-items:center; }