@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
    --ft-cream: #f7efe4;
    --ft-paper: #fffaf2;
    --ft-paper-deep: #f0e4d4;
    --ft-ink: #15212b;
    --ft-muted: #716d68;
    --ft-line: #d4c2b0;
    --ft-navy: #0f2a3d;
    --ft-navy-soft: #2c5c7d;
    --ft-coral: #c25b2b;
    --ft-orange: #ef8a4a;
    --ft-green: #3b7968;
    --ft-shadow: 0 18px 50px rgba(15, 42, 61, .11);
    --ft-radius: 22px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.family-tree-app {
    margin: 0;
    color: var(--ft-ink);
    background:
        radial-gradient(circle at 7% 7%, rgba(194,91,43,.13), transparent 30%),
        radial-gradient(circle at 95% 12%, rgba(15,42,61,.1), transparent 25%),
        linear-gradient(180deg, #faf5ec 0, #f1e7da 100%);
    font-family: 'DM Sans', Inter, sans-serif;
}
body.family-tree-app button,
body.family-tree-app input,
body.family-tree-app textarea,
body.family-tree-app select { font: inherit; }
body.family-tree-app button { cursor: pointer; }
body.family-tree-app button:disabled { cursor: not-allowed; opacity: .54; }
.material-symbols-outlined { font-size: 20px; line-height: 1; vertical-align: middle; }

.ft-header {
    position: sticky; top: 0; z-index: 40;
    border-bottom: 1px solid rgba(207,187,167,.74);
    background: rgba(255,250,242,.78);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.ft-header__inner { max-width: 1540px; height: 66px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ft-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ft-navy); text-decoration: none; font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.ft-brand__mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--ft-cream); background: var(--ft-navy); box-shadow: 0 8px 24px rgba(15,42,61,.18); }
.ft-brand__mark .material-symbols-outlined { font-size: 20px; }
.ft-header__right { display: flex; align-items: center; gap: 15px; }
.ft-top-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ft-muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.ft-top-link:hover { color: var(--ft-navy); }
.ft-top-link .material-symbols-outlined { font-size: 17px; }
.ft-divider { width: 1px; height: 24px; background: var(--ft-line); }
.ft-session-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--ft-muted); font-size: 12px; font-weight: 700; }
.ft-status-dot, .ft-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 100%; background: var(--ft-green); box-shadow: 0 0 0 4px rgba(59,121,104,.13); }

.ft-shell { max-width: 1540px; margin: 0 auto; padding: 32px 28px 44px; }
.ft-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 5px 4px 24px; }
.ft-breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; color: var(--ft-muted); font-size: 12px; font-weight: 700; }
.ft-breadcrumb a { color: var(--ft-muted); text-decoration: none; }
.ft-breadcrumb a:hover { color: var(--ft-navy); }
.ft-breadcrumb .material-symbols-outlined { font-size: 15px; }
.ft-kicker, .ft-overline { color: var(--ft-muted); font-size: 10px; font-weight: 800; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.ft-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--ft-coral); }
.ft-kicker .material-symbols-outlined { font-size: 16px; }
.ft-intro h1 { margin: 9px 0 5px; color: var(--ft-navy); font: 700 clamp(38px, 5vw, 62px)/.98 'Fraunces', Georgia, serif; letter-spacing: -.045em; }
.ft-intro p { max-width: 690px; margin: 0; color: var(--ft-muted); font-size: 15px; line-height: 1.7; }
.ft-intro__note { min-width: 270px; max-width: 335px; display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px; border: 1px solid rgba(207,187,167,.76); border-radius: 16px; color: var(--ft-navy); background: rgba(255,250,242,.68); box-shadow: 0 10px 26px rgba(15,42,61,.05); }
.ft-intro__note > .material-symbols-outlined { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--ft-coral); background: rgba(194,91,43,.1); font-size: 18px; }
.ft-intro__note strong, .ft-intro__note span { display: block; }
.ft-intro__note strong { font-size: 12px; }
.ft-intro__note span { margin-top: 3px; color: var(--ft-muted); font-size: 11px; line-height: 1.45; }

.ft-toolbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 17px; border: 1px solid rgba(207,187,167,.82); border-radius: 18px 18px 0 0; background: rgba(255,250,242,.92); box-shadow: var(--ft-shadow); }
.ft-toolbar__primary, .ft-toolbar__primary-actions, .ft-toolbar__actions, .ft-tree-select-wrap, .ft-canvas-controls { display: flex; align-items: center; gap: 9px; }
.ft-tree-select-wrap { gap: 9px; min-width: 275px; }
.ft-tree-select-wrap > .material-symbols-outlined { color: var(--ft-coral); font-size: 19px; }
.ft-tree-select-wrap select { max-width: 205px; padding: 0; border: 0; outline: 0; color: var(--ft-navy); background: transparent; font-size: 13px; font-weight: 800; }
.ft-tree-state { padding-left: 10px; border-left: 1px solid var(--ft-line); color: var(--ft-muted); font: 10px/1 'DM Mono', monospace; white-space: nowrap; }
.ft-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid transparent; border-radius: 11px; font-size: 12px; font-weight: 800; transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease; white-space: nowrap; }
.ft-button:hover { transform: translateY(-1px); }
.ft-button .material-symbols-outlined { font-size: 17px; }
.ft-button--small { min-height: 34px; padding: 0 11px; font-size: 11px; }
.ft-button--ghost { border-color: var(--ft-line); color: var(--ft-navy); background: rgba(255,250,242,.64); }
.ft-button--ghost:hover { border-color: var(--ft-navy); background: var(--ft-paper); }
.ft-button--primary { color: #fffaf2; background: var(--ft-navy); box-shadow: 0 8px 20px rgba(15,42,61,.15); }
.ft-button--primary:hover { background: var(--ft-navy-soft); }
.ft-button--accent { color: #fff; background: var(--ft-coral); box-shadow: 0 8px 20px rgba(194,91,43,.18); }
.ft-button--accent:hover { background: var(--ft-orange); }
.ft-button.is-active { border-color: var(--ft-coral); color: var(--ft-coral); background: rgba(194,91,43,.09); }

.ft-workspace { display: grid; grid-template-columns: 254px minmax(600px, 1fr) 282px; min-height: 760px; border-right: 1px solid rgba(207,187,167,.82); border-bottom: 1px solid rgba(207,187,167,.82); border-left: 1px solid rgba(207,187,167,.82); border-radius: 0 0 22px 22px; overflow: hidden; background: var(--ft-paper); box-shadow: var(--ft-shadow); }
.ft-sidebar { min-width: 0; background: rgba(255,250,242,.72); }
.ft-sidebar--left { border-right: 1px solid rgba(207,187,167,.66); }
.ft-sidebar--right { border-left: 1px solid rgba(207,187,167,.66); }
.ft-sidebar__scroll { height: 100%; padding: 23px 18px; overflow-y: auto; }
.ft-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ft-panel-heading--compact { align-items: center; }
.ft-panel-heading h2 { margin: 5px 0 0; color: var(--ft-navy); font-size: 17px; letter-spacing: -.03em; }
.ft-panel-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--ft-coral); background: rgba(194,91,43,.1); }
.ft-panel-icon .material-symbols-outlined { font-size: 16px; }
.ft-sidebar-copy { margin: 9px 0 17px; color: var(--ft-muted); font-size: 11px; line-height: 1.55; }
.ft-layer-list { display: grid; gap: 6px; }
.ft-layer-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 1px solid transparent; border-radius: 12px; color: var(--ft-muted); background: transparent; text-align: left; font-size: 12px; font-weight: 700; }
.ft-layer-button:hover { color: var(--ft-navy); background: rgba(240,228,212,.62); }
.ft-layer-button.is-active { border-color: rgba(15,42,61,.12); color: var(--ft-navy); background: #f0e4d4; box-shadow: inset 3px 0 0 var(--ft-coral); }
.ft-layer-button__label { display: inline-flex; align-items: center; gap: 9px; }
.ft-layer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ft-line); }
.ft-layer-dot--all { background: var(--ft-coral); }
.ft-layer-dot--parents { background: #9b7757; }
.ft-layer-dot--primary { background: var(--ft-navy); }
.ft-layer-dot--secondary { background: var(--ft-orange); }
.ft-layer-count, .ft-count-badge { min-width: 23px; padding: 3px 7px; border-radius: 99px; color: var(--ft-muted); background: rgba(255,250,242,.86); font: 10px/1 'DM Mono', monospace; text-align: center; }
.ft-layer-button.is-active .ft-layer-count { color: var(--ft-navy); background: rgba(255,250,242,.66); }
.ft-count-badge { color: var(--ft-navy); background: #f0e4d4; }
.ft-side-divider { height: 1px; margin: 23px 0; background: rgba(207,187,167,.65); }
.ft-search { height: 34px; display: flex; align-items: center; gap: 7px; margin: 13px 0 10px; padding: 0 9px; border: 1px solid var(--ft-line); border-radius: 10px; color: var(--ft-muted); background: rgba(255,250,242,.86); }
.ft-search:focus-within { border-color: var(--ft-navy); box-shadow: 0 0 0 3px rgba(15,42,61,.08); }
.ft-search .material-symbols-outlined { font-size: 16px; }
.ft-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ft-navy); background: transparent; font-size: 11px; }
.ft-search input::placeholder { color: #9b9289; }
.ft-people-list { display: grid; gap: 5px; }
.ft-person-list-button { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 9px; padding: 7px; border: 1px solid transparent; border-radius: 11px; color: var(--ft-ink); background: transparent; text-align: left; }
.ft-person-list-button:hover, .ft-person-list-button.is-active { border-color: rgba(207,187,167,.75); background: rgba(240,228,212,.62); }
.ft-person-list-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--ft-navy); background: #e6d9c8; font: 700 10px 'DM Mono', monospace; }
.ft-person-list-name { overflow: hidden; color: var(--ft-navy); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ft-person-list-meta { margin-top: 1px; color: var(--ft-muted); font: 9px 'DM Mono', monospace; }
.ft-shortcuts { display: grid; gap: 8px; color: var(--ft-muted); font-size: 10px; }
.ft-shortcuts > .ft-overline { margin-bottom: 2px; }
.ft-shortcuts div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
kbd { padding: 3px 5px; border: 1px solid var(--ft-line); border-radius: 5px; color: var(--ft-navy); background: var(--ft-paper); font: 9px 'DM Mono', monospace; }

.ft-canvas-panel { min-width: 0; display: flex; flex-direction: column; background: #f8f1e8; }
.ft-canvas-topbar { height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 17px; border-bottom: 1px solid rgba(207,187,167,.62); background: rgba(255,250,242,.6); }
.ft-canvas-title { display: flex; align-items: center; gap: 8px; color: var(--ft-navy); font-size: 12px; font-weight: 800; }
.ft-canvas-caption { color: var(--ft-muted); font-weight: 500; }
.ft-live-dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(59,121,104,.1); }
.ft-icon-button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; color: var(--ft-muted); background: transparent; }
.ft-icon-button:hover { border-color: var(--ft-line); color: var(--ft-navy); background: var(--ft-paper); }
.ft-icon-button .material-symbols-outlined { font-size: 17px; }
.ft-zoom-label { min-width: 40px; color: var(--ft-navy); font: 10px 'DM Mono', monospace; text-align: center; }
.ft-tree-canvas { position: relative; flex: 1; min-height: 650px; overflow: hidden; cursor: grab; background-color: #fffdf9; background-image: none; }
.ft-tree-canvas.is-panning, .ft-tree-canvas.is-panning * { cursor: grabbing !important; }
.ft-canvas-hint { position: absolute; top: 15px; left: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(207,187,167,.72); border-radius: 9px; color: var(--ft-muted); background: rgba(255,250,242,.74); font-size: 9px; pointer-events: none; }
.ft-canvas-hint .material-symbols-outlined { font-size: 14px; color: var(--ft-coral); }
.ft-canvas-empty { position: absolute; top: 50%; left: 50%; z-index: 4; display: grid; justify-items: center; width: min(360px, calc(100% - 40px)); gap: 9px; padding: 27px 25px 25px; border: 1px solid rgba(207,187,167,.88); border-radius: 20px; color: var(--ft-navy); background: rgba(255,250,242,.9); box-shadow: 0 18px 45px rgba(15,42,61,.12); text-align: center; transform: translate(-50%, -50%); }
.ft-canvas-empty__icon { width: 47px; height: 47px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 15px; color: var(--ft-coral); background: rgba(194,91,43,.11); }
.ft-canvas-empty__icon .material-symbols-outlined { font-size: 23px; }
.ft-canvas-empty strong { font: 700 23px/1.1 'Fraunces', Georgia, serif; }
.ft-canvas-empty p { max-width: 280px; margin: 0 0 7px; color: var(--ft-muted); font-size: 11px; line-height: 1.55; }
.ft-tree-plane { position: absolute; left: 0; top: 0; width: 1500px; height: 900px; transform-origin: 0 0; }
.ft-tree-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ft-link { fill: none; stroke: #7a5a45; stroke-width: 1.7; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.ft-link--partner { stroke: #7a5a45; stroke-width: 1.7; }
.ft-link--family { stroke: #6b4a3a; stroke-width: 1.7; }
.ft-link--secondary { stroke: #9a7a65; stroke-dasharray: 4 3; }
.ft-link--behind { opacity: .52; stroke-dasharray: 5 4; }
.ft-link--dashed { stroke-dasharray: 3 4; opacity: .9; }
.ft-link-label { fill: #8a7060; font: 8px 'DM Mono', monospace; }
.ft-tree-nodes { position: absolute; inset: 0; }
.ft-node { position: absolute; width: 102px; min-height: 128px; padding: 7px 7px 6px; border: 1.7px solid #d8c8b8; border-radius: 10px; color: var(--ft-navy); background: #fff; box-shadow: 0 2px 10px rgba(65,42,30,.08); transform: translateZ(0); transition: opacity .2s ease, filter .2s ease, border-color .2s ease, box-shadow .2s ease; user-select: none; display:flex; flex-direction:column; align-items:stretch; }
.ft-node:hover { border-color: #b9a89a; box-shadow: 0 4px 14px rgba(65,42,30,.12); z-index:2; }
.ft-node.is-selected { border-color: var(--ft-coral); box-shadow: 0 0 0 2.5px rgba(194,91,43,.16), 0 4px 14px rgba(65,42,30,.10); z-index:3; }
.ft-node.is-compare-picked { border-color: var(--ft-navy-soft); box-shadow: 0 0 0 2.5px rgba(44,92,125,.14), 0 4px 14px rgba(15,42,61,.12); }
.ft-node.is-layer-connector { border-style: dashed; border-color: var(--ft-orange); }
.ft-node.is-dimmed { opacity: .28; filter: saturate(.5); }
.ft-node.is-behind { z-index: 1; opacity: .84; transform: translate(10px, 12px) scale(.97); filter: saturate(.74); box-shadow: 0 2px 8px rgba(15,42,61,.08); }
.ft-node.is-behind.is-selected { opacity: 1; transform: translate(10px, 12px) scale(.97); }
.ft-node--female { border-color: #e8a8bb; background: #fff5f7; }
.ft-node--male { border-color: #9ec3d9; background: #f0f8fe; }
.ft-node--female .ft-node__name { color: #7a2b45; }
.ft-node--male .ft-node__name { color: #1e3e52; }
.ft-node__top { display: none; }
.ft-node__photo { width: 86px; height: 92px; margin: 4px auto 0; border-radius: 7px; overflow: hidden; background: #f0e4d4; position: relative; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.05); }
.ft-node__avatar { width: 100%; height: 100%; display: grid; place-items: center; flex: 0 0 auto; border-radius: 0; color: var(--ft-navy); background: #e7dac9; font: 700 16px 'DM Mono', monospace; }
.ft-node__avatar.has-photo { color: transparent; background-position: center top; background-size: cover; border-radius:0; }
.ft-node__badge { display:none; }
.ft-node__name { max-width: 88px; margin: 0 auto; overflow: hidden; color: var(--ft-navy); font-size: 8.5px; font-weight: 800; line-height: 1.15; text-align:center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; min-height: 18px; letter-spacing:-.01em; }
.ft-node__date { display:none; }
.ft-node__occupation { display:none; }
.ft-node__meta { margin-top: 3px; text-align:center; font: 7px 'DM Mono', monospace; color:#8a7a6a; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ft-node__actions { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .18s ease; }
.ft-node:hover .ft-node__actions, .ft-node.is-selected .ft-node__actions { opacity: 1; }
.ft-node__action { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #ddd2c3; border-radius: 6px; color: var(--ft-navy); background: rgba(255,255,255,.96); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ft-node__action:hover { color: #fff; background: var(--ft-coral); border-color: var(--ft-coral); }
.ft-node__action .material-symbols-outlined { font-size: 12px; }
.ft-canvas-legend { position: absolute; left: 16px; bottom: 16px; z-index: 4; display: flex; flex-wrap: wrap; gap: 11px; padding: 8px 10px; border: 1px solid rgba(207,187,167,.72); border-radius: 9px; color: var(--ft-muted); background: rgba(255,250,242,.78); font-size: 9px; pointer-events: none; }
.ft-canvas-legend div { display: flex; align-items: center; gap: 5px; }
.ft-legend-line { display: inline-block; width: 18px; height: 2px; background: rgba(15,42,61,.45); }
.ft-legend-line--partner { height: 3px; background: var(--ft-coral); }
.ft-legend-layer { width: 12px; height: 7px; border: 1px dashed var(--ft-orange); border-radius: 3px; opacity: .75; }
.ft-canvas-add { position: absolute; right: 16px; bottom: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid var(--ft-navy); border-radius: 10px; color: #fff; background: var(--ft-navy); font-size: 10px; font-weight: 800; box-shadow: 0 9px 18px rgba(15,42,61,.18); }
.ft-canvas-add:hover { background: var(--ft-navy-soft); }
.ft-canvas-add .material-symbols-outlined { font-size: 16px; }
.ft-canvas-status { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-top: 1px solid rgba(207,187,167,.64); color: var(--ft-muted); font-size: 10px; }
.ft-sync-state { display: inline-flex; align-items: center; gap: 5px; color: var(--ft-green); font: 10px 'DM Mono', monospace; white-space: nowrap; }
.ft-sync-state .material-symbols-outlined { font-size: 14px; }

.ft-inspector { height: 100%; padding: 23px 18px; overflow-y: auto; }
.ft-inspector__empty { min-height: 460px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 13px; padding: 25px; color: var(--ft-muted); text-align: center; }
.ft-inspector__empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; color: var(--ft-coral); background: rgba(194,91,43,.1); }
.ft-inspector__empty p { max-width: 180px; margin: 0; font-size: 12px; line-height: 1.55; }
.ft-inspector__person-top { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid rgba(207,187,167,.64); }
.ft-inspector__avatar { width: 61px; height: 61px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 19px; color: var(--ft-navy); background: #e6d8c6; font: 700 17px 'DM Mono', monospace; }
.ft-inspector__avatar.has-photo { color: transparent; background-position: center; background-size: cover; }
.ft-inspector__person-name { margin: 3px 0 4px; color: var(--ft-navy); font: 700 22px/1.1 'Fraunces', Georgia, serif; letter-spacing: -.025em; }
.ft-inspector__person-meta { color: var(--ft-muted); font: 10px 'DM Mono', monospace; }
.ft-inspector__actions { display: flex; gap: 6px; margin-top: 14px; }
.ft-inspector__actions .ft-button { flex: 1; min-height: 34px; padding: 0 7px; font-size: 10px; }
.ft-detail-section { margin-top: 18px; }
.ft-inspector-me { width: 100%; margin-top: 8px; }
.ft-me-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; border-radius: 8px; color: var(--ft-green); background: rgba(59,121,104,.11); font: 10px 'DM Mono', monospace; }
.ft-me-badge .material-symbols-outlined { font-size: 14px; }
.ft-detail-section h3 { margin: 0 0 10px; color: var(--ft-navy); font-size: 11px; font-weight: 800; }
.ft-detail-grid { display: grid; gap: 9px; }
.ft-detail-item { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 7px; align-items: start; }
.ft-detail-item .material-symbols-outlined { color: var(--ft-coral); font-size: 15px; }
.ft-detail-label { color: var(--ft-muted); font-size: 9px; }
.ft-detail-value { margin-top: 1px; color: var(--ft-navy); font-size: 11px; line-height: 1.4; word-break: break-word; }
.ft-detail-notes { padding: 10px; border-radius: 10px; color: var(--ft-muted); background: #f0e4d4; font-size: 10px; line-height: 1.5; white-space: pre-line; }
.ft-relations { display: grid; gap: 6px; }
.ft-relation-chip { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid rgba(207,187,167,.68); border-radius: 9px; background: rgba(255,250,242,.72); text-align: left; }
.ft-relation-chip:hover { border-color: var(--ft-navy-soft); }
.ft-relation-chip__dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--ft-coral); }
.ft-relation-chip__text { min-width: 0; color: var(--ft-navy); font-size: 10px; font-weight: 700; }
.ft-relation-chip__sub { display: block; margin-top: 1px; color: var(--ft-muted); font: 9px 'DM Mono', monospace; }

.ft-modal-root[hidden] { display: none; }
.ft-modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(15,42,61,.48); backdrop-filter: blur(7px); }
.ft-modal { width: min(620px, 100%); max-height: min(760px, calc(100vh - 36px)); overflow: auto; border: 1px solid rgba(207,187,167,.86); border-radius: 23px; background: var(--ft-paper); box-shadow: 0 28px 80px rgba(15,42,61,.24); animation: ft-modal-in .22s ease both; }
.ft-modal--wide { width: min(760px, 100%); }
@keyframes ft-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ft-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 23px 16px; border-bottom: 1px solid rgba(207,187,167,.62); }
.ft-modal__kicker { color: var(--ft-coral); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ft-modal__title { margin: 5px 0 0; color: var(--ft-navy); font: 700 24px/1.1 'Fraunces', Georgia, serif; }
.ft-modal__close { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ft-line); border-radius: 9px; color: var(--ft-muted); background: transparent; }
.ft-modal__close:hover { color: var(--ft-navy); background: #f0e4d4; }
.ft-modal__body { padding: 20px 23px 23px; }
.ft-modal__footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 23px 20px; border-top: 1px solid rgba(207,187,167,.62); }
.ft-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.ft-form-field { display: grid; gap: 6px; }
.ft-form-field--full { grid-column: 1/-1; }
.ft-form-field label { color: var(--ft-navy); font-size: 10px; font-weight: 800; }
.ft-form-field input, .ft-form-field select, .ft-form-field textarea { width: 100%; min-height: 38px; padding: 9px 10px; border: 1px solid var(--ft-line); border-radius: 10px; outline: 0; color: var(--ft-navy); background: rgba(255,250,242,.9); font-size: 12px; }
.ft-form-field textarea { min-height: 77px; resize: vertical; }
.ft-form-field input:focus, .ft-form-field select:focus, .ft-form-field textarea:focus { border-color: var(--ft-navy); box-shadow: 0 0 0 3px rgba(15,42,61,.08); }
.ft-form-help { margin: -1px 0 0; color: var(--ft-muted); font-size: 10px; line-height: 1.45; }
.ft-form-callout { display: flex; gap: 10px; margin-bottom: 15px; padding: 11px 12px; border: 1px solid rgba(194,91,43,.2); border-radius: 11px; color: var(--ft-muted); background: rgba(194,91,43,.07); font-size: 10px; line-height: 1.5; }
.ft-form-callout .material-symbols-outlined { color: var(--ft-coral); font-size: 16px; }
.ft-import-drop, .ft-photo-drop { min-height: 168px; display: grid; place-items: center; padding: 22px; border: 1.5px dashed var(--ft-line); border-radius: 15px; color: var(--ft-muted); background: rgba(240,228,212,.35); text-align: center; transition: border-color .18s ease, background .18s ease; }
.ft-import-drop.is-over, .ft-photo-drop.is-over { border-color: var(--ft-navy); background: rgba(15,42,61,.07); }
.ft-import-drop .material-symbols-outlined, .ft-photo-drop .material-symbols-outlined { display: block; margin-bottom: 8px; color: var(--ft-coral); font-size: 30px; }
.ft-import-drop strong, .ft-photo-drop strong { display: block; color: var(--ft-navy); font-size: 13px; }
.ft-import-drop span, .ft-photo-drop span { display: block; margin-top: 5px; font-size: 10px; }
.ft-import-input { display: none; }
.ft-import-preview { display: none; margin-top: 13px; padding: 11px; border-radius: 11px; color: var(--ft-navy); background: #f0e4d4; font-size: 11px; }
.ft-import-preview.is-visible { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ft-import-preview strong { font-size: 12px; }
.ft-import-preview span { color: var(--ft-muted); font: 10px 'DM Mono', monospace; }
.ft-auth-switch { display: flex; gap: 4px; margin-bottom: 17px; padding: 4px; border-radius: 11px; background: #f0e4d4; }
.ft-auth-tab { flex: 1; min-height: 32px; border: 0; border-radius: 8px; color: var(--ft-muted); background: transparent; font-size: 10px; font-weight: 800; }
.ft-auth-tab.is-active { color: var(--ft-navy); background: var(--ft-paper); box-shadow: 0 3px 10px rgba(15,42,61,.08); }
.ft-auth-code { display: none; }
.ft-auth-code.is-visible { display: block; }
.ft-code-input { letter-spacing: .4em; text-align: center; font: 700 17px 'DM Mono', monospace !important; }
.ft-auth-dev-code { margin: 9px 0 0; color: var(--ft-muted); font-size: 10px; }
.ft-auth-dev-code strong { color: var(--ft-coral); font-family: 'DM Mono', monospace; }
.ft-share-grid { display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: center; gap: 22px; }
.ft-qr-wrap { display: grid; place-items: center; min-height: 180px; padding: 10px; border: 1px solid var(--ft-line); border-radius: 15px; background: #fff; }
#qr-canvas { width: 156px; height: 156px; image-rendering: pixelated; }
.ft-share-copy h3 { margin: 0; color: var(--ft-navy); font-size: 15px; }
.ft-share-copy p { margin: 7px 0 12px; color: var(--ft-muted); font-size: 11px; line-height: 1.55; }
.ft-share-url { display: block; margin-bottom: 12px; padding: 9px; border-radius: 9px; color: var(--ft-navy); background: #f0e4d4; font: 10px/1.4 'DM Mono', monospace; overflow-wrap: anywhere; }
.ft-relationship-people { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px; border: 1px solid rgba(207,187,167,.78); border-radius: 16px; background: #f0e4d4; }
.ft-relationship-person { display: grid; min-width: 120px; justify-items: center; gap: 8px; color: var(--ft-navy); text-align: center; }
.ft-relationship-person strong { max-width: 160px; font-size: 12px; line-height: 1.25; }
.ft-relationship-people > .material-symbols-outlined { color: var(--ft-coral); }
.ft-relationship-avatar { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; color: var(--ft-navy); background: #e6d8c6; font: 700 15px 'DM Mono', monospace; }
.ft-relationship-avatar.has-photo { color: transparent; background-position: center; background-size: cover; }
.ft-relationship-result { display: grid; justify-items: center; gap: 8px; margin-top: 16px; padding: 22px; border: 1px solid rgba(194,91,43,.2); border-radius: 16px; background: rgba(194,91,43,.07); text-align: center; }
.ft-relationship-result > strong { color: var(--ft-coral); font: 700 30px/1.05 'Fraunces', Georgia, serif; }
.ft-relationship-result p { margin: 0; color: var(--ft-muted); font-size: 12px; line-height: 1.5; }
.ft-relationship-result b { color: var(--ft-navy); }
.ft-relationship-reverse { width: 100%; padding-top: 10px; border-top: 1px solid rgba(207,187,167,.64); }
.ft-readonly-banner { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 13px; padding: 6px 8px; border-radius: 8px; color: var(--ft-green); background: rgba(59,121,104,.11); font: 10px 'DM Mono', monospace; }
.ft-readonly-banner .material-symbols-outlined { font-size: 14px; }
.ft-photo-editor { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 20px; align-items: start; }
.ft-photo-preview { position: relative; width: 230px; height: 345px; overflow: hidden; border: 1px solid var(--ft-line); border-radius: 17px; background: #e9ddce; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
#photo-canvas { width: 100%; height: 100%; display: block; cursor: move; }
.ft-photo-guide { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.63); pointer-events: none; }
.ft-photo-guide::before, .ft-photo-guide::after { content: ''; position: absolute; background: rgba(255,255,255,.28); }
.ft-photo-guide::before { top: 33.333%; bottom: 33.333%; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }
.ft-photo-guide::after { left: 33.333%; right: 33.333%; top: 0; bottom: 0; border-left: 1px solid rgba(255,255,255,.28); border-right: 1px solid rgba(255,255,255,.28); }
.ft-photo-tools { display: grid; gap: 13px; }
.ft-range { display: grid; gap: 6px; color: var(--ft-muted); font-size: 10px; }
.ft-range__top { display: flex; justify-content: space-between; color: var(--ft-navy); font-weight: 800; }
.ft-range input { width: 100%; accent-color: var(--ft-coral); }
.ft-photo-note { color: var(--ft-muted); font-size: 10px; line-height: 1.55; }
.ft-photo-drop { min-height: 100px; padding: 13px; }
.ft-photo-drop .material-symbols-outlined { margin-bottom: 4px; font-size: 22px; }
.ft-photo-drop strong { font-size: 11px; }
.ft-photo-drop span { font-size: 9px; }

.ft-toast-root { position: fixed; right: 22px; bottom: 22px; z-index: 150; display: grid; gap: 8px; width: min(340px, calc(100vw - 44px)); }
.ft-toast { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border: 1px solid rgba(207,187,167,.85); border-radius: 13px; color: var(--ft-navy); background: rgba(255,250,242,.96); box-shadow: var(--ft-shadow); font-size: 11px; line-height: 1.45; animation: ft-toast-in .24s ease both; }
.ft-toast--error { border-color: rgba(166,62,47,.36); }
.ft-toast--success .material-symbols-outlined { color: var(--ft-green); }
.ft-toast--error .material-symbols-outlined { color: #a63e2f; }
.ft-toast .material-symbols-outlined { font-size: 17px; }
@keyframes ft-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1220px) {
    .ft-workspace { grid-template-columns: 230px minmax(500px, 1fr) 250px; }
    .ft-toolbar__actions .ft-button { padding: 0 10px; }
    .ft-toolbar__actions .ft-button .material-symbols-outlined { display: none; }
}
@media (max-width: 980px) {
    .ft-shell { padding: 23px 16px 32px; }
    .ft-header__inner { padding: 0 16px; }
    .ft-intro { align-items: flex-start; flex-direction: column; gap: 17px; }
    .ft-intro__note { width: 100%; max-width: none; }
    .ft-toolbar { align-items: stretch; flex-direction: column; }
    .ft-toolbar__primary, .ft-toolbar__primary-actions, .ft-toolbar__actions { justify-content: space-between; }
    .ft-toolbar__actions { flex-wrap: wrap; }
    .ft-workspace { grid-template-columns: 210px minmax(0, 1fr); }
    .ft-sidebar--right { display: none; }
}
@media (max-width: 680px) {
    .ft-header__right { gap: 9px; }
    .ft-top-link, .ft-divider, .ft-session-chip { display: none; }
    .ft-tree-select-wrap { min-width: 0; }
    .ft-tree-select-wrap select { max-width: 160px; }
    .ft-toolbar__primary { align-items: stretch; flex-direction: column; }
    .ft-toolbar__primary-actions { flex-wrap: wrap; }
    .ft-toolbar__actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ft-toolbar__actions .ft-button { width: 100%; }
    .ft-workspace { display: block; min-height: auto; }
    .ft-sidebar--left { border-right: 0; border-bottom: 1px solid rgba(207,187,167,.66); }
    .ft-sidebar__scroll { max-height: 285px; }
    .ft-layer-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ft-people-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ft-tree-canvas { min-height: 600px; }
    .ft-canvas-caption { display: none; }
    .ft-canvas-status { align-items: flex-start; flex-direction: column; padding: 10px 14px; }
    .ft-form-grid, .ft-photo-editor, .ft-share-grid { grid-template-columns: 1fr; }
    .ft-relationship-people { gap: 8px; }
    .ft-photo-preview { margin: 0 auto; }
    .ft-modal__header, .ft-modal__body, .ft-modal__footer { padding-left: 17px; padding-right: 17px; }
    .ft-modal__footer { position: sticky; bottom: 0; background: rgba(255,250,242,.96); }
}