:root {
  color-scheme: light;
  --paper: #f4f1ea;
  --paper-deep: #e9e3d8;
  --cream: #fffdf8;
  --ink: #243433;
  --ink-soft: #6f7d77;
  --line: rgba(36, 52, 51, 0.14);
  --line-strong: rgba(36, 52, 51, 0.28);
  --sage: #d4dfd5;
  --sage-deep: #799686;
  --coral: #ce7d67;
  --danger: #a84f45;
  --shadow: 0 18px 44px rgba(67, 61, 48, 0.13);
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, label:focus-within { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
kbd { padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-soft); background: rgba(255, 255, 255, 0.55); font: 9px/1.4 ui-monospace, monospace; }

.auth-screen { min-height: 100%; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 18% 12%, rgba(203, 217, 205, 0.56), transparent 32%), var(--paper); }
.auth-card { width: min(100%, 360px); padding: 38px; border: 1px solid rgba(36, 52, 51, 0.1); border-radius: 28px 28px 28px 7px; background: rgba(255, 253, 248, 0.9); box-shadow: var(--shadow); }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px 15px 15px 4px; color: #fffaf0; background: var(--ink); font-size: 20px; }
.brand-mark.small { width: 34px; height: 34px; border-radius: 12px 12px 12px 3px; font-size: 15px; }
.eyebrow { margin: 0; color: var(--ink-soft); font-size: 9px; font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase; }
.auth-card .eyebrow { margin-top: 0; }
.auth-card h1 { margin: 5px 0 28px; font-family: Georgia, serif; font-size: 34px; font-weight: 500; letter-spacing: -0.04em; }
.auth-card label, .person-form label { display: grid; gap: 7px; margin-top: 15px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.auth-card input, .person-form input, .person-form select, .relation-form select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--ink); background: #fffefb; }
.auth-card input:focus, .person-form input:focus, .person-form select:focus, .relation-form select:focus { border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(121, 150, 134, 0.14); }
.primary-button, .save-button { border: 0; color: #fffaf0; background: var(--ink); font-weight: 700; }
.primary-button { width: 100%; margin-top: 24px; padding: 12px 16px; border-radius: 11px; }
.primary-button.compact { margin-top: 18px; padding: 10px 14px; }
.primary-button:hover, .save-button:hover { background: #334a46; }
.primary-button:disabled, .save-button:disabled { cursor: default; opacity: 0.46; }
.auth-error { min-height: 18px; margin: 13px 0 0; color: var(--danger); font-size: 12px; }

.workspace { width: 100%; height: 100%; position: relative; background: var(--paper); }
.topbar { position: absolute; z-index: 40; top: 18px; left: 22px; right: 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; pointer-events: none; }
.brand-lockup, .topbar-actions, .view-status { pointer-events: auto; }
.brand-lockup { width: max-content; display: flex; align-items: center; gap: 11px; padding: 8px 14px 8px 8px; border: 1px solid rgba(36, 52, 51, 0.09); border-radius: 17px; background: rgba(255, 253, 248, 0.9); box-shadow: 0 8px 24px rgba(74, 66, 50, 0.08); backdrop-filter: blur(14px); }
.brand-lockup h1 { margin: 1px 0 0; font-family: Georgia, serif; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }
.view-status { justify-self: center; padding: 8px 12px; border: 1px solid rgba(36, 52, 51, 0.1); border-radius: 12px; color: var(--ink-soft); background: rgba(255, 253, 248, 0.88); box-shadow: 0 8px 24px rgba(74, 66, 50, 0.07); backdrop-filter: blur(14px); font-size: 10px; font-weight: 700; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; position: relative; }
.search-wrap { position: relative; }
.search-box { width: 205px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid rgba(36, 52, 51, 0.1); border-radius: 13px; background: rgba(255, 253, 248, 0.94); box-shadow: 0 8px 24px rgba(74, 66, 50, 0.08); backdrop-filter: blur(14px); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.search-box input::placeholder { color: #929f98; }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; width: 280px; max-height: min(420px, 65vh); overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 253, 248, 0.98); box-shadow: var(--shadow); }
.search-results button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 10px; border: 0; border-radius: 10px; color: var(--ink); text-align: left; background: transparent; }
.search-results button:hover, .search-results button.is-active { background: var(--paper-deep); }
.search-results button.is-active { box-shadow: inset 2px 0 0 var(--sage-deep); }
.search-results button > span { display: flex; flex-direction: column; font-family: Georgia, serif; font-size: 13px; }
.search-results .person-family { font-size: 10px; }
.search-results small { max-width: 100px; color: var(--ink-soft); font-size: 9px; text-align: right; }
.search-results p { margin: 12px; color: var(--ink-soft); font-size: 11px; }
.people-count, .sync-status { padding: 8px 10px; border-radius: 10px; color: var(--ink-soft); background: rgba(255, 253, 248, 0.78); font-size: 10px; white-space: nowrap; }
.sync-status { display: flex; align-items: center; gap: 6px; }
.sync-status i { width: 6px; height: 6px; border-radius: 50%; background: #77a186; }
.sync-status.is-dirty i { background: var(--coral); }
.sync-status.is-saving i { background: var(--sage-deep); animation: pulse 900ms infinite alternate; }
@keyframes pulse { to { opacity: 0.28; } }
.ghost-button, .secondary-button, .more-button { border: 1px solid rgba(36, 52, 51, 0.12); color: var(--ink-soft); background: rgba(255, 253, 248, 0.9); }
.ghost-button, .top-action, .more-button, .save-button { height: 34px; padding: 0 11px; border-radius: 10px; font-size: 10px; white-space: nowrap; }
.assistant-button, .suggestions-button { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(36, 52, 51, 0.12); border-radius: 10px; color: var(--ink); background: rgba(255, 253, 248, 0.92); font-size: 10px; font-weight: 750; white-space: nowrap; }
.assistant-button { color: #fffaf0; border-color: var(--ink); background: var(--ink); }
.assistant-button:hover { background: #334a46; }
.assistant-button span { color: #e6b46c; font-size: 13px; }
.suggestions-button:hover { border-color: var(--sage-deep); background: var(--sage); }
.suggestions-button b { min-width: 15px; height: 15px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--sage); font-size: 8px; }
.suggestions-button b:empty { display: none; }
.secondary-button:hover, .ghost-button:hover, .more-button:hover { color: var(--ink); border-color: var(--line-strong); }
.save-button { padding-inline: 14px; }
.more-button { padding-inline: 10px; font-weight: 700; }
.more-menu { display: none; position: absolute; z-index: 4; top: calc(100% + 8px); right: 36px; width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); box-shadow: var(--shadow); }
.more-menu.is-open { display: grid; }
.more-menu button, .more-menu label { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; font-size: 10px; cursor: pointer; }
.more-menu button:hover, .more-menu label:hover { background: var(--paper-deep); }
.more-menu .menu-add-person { margin-bottom: 3px; color: #fffaf0; background: var(--ink); font-weight: 700; }
.more-menu .menu-add-person:hover { background: #334a46; }
.more-menu button:disabled { cursor: default; opacity: 0.4; }
.more-menu input { display: none; }

.board-viewport { position: absolute; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; background-color: var(--paper); background-image: radial-gradient(rgba(36, 52, 51, 0.105) 0.75px, transparent 0.75px); background-size: 24px 24px; cursor: grab; }
.board-viewport img { pointer-events: none; -webkit-user-drag: none; }
.board-viewport.is-dragging { cursor: grabbing; }
.board-scene { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.board-scene.is-zoom-animating { transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.link-layer, .node-layer { position: absolute; inset: 0; overflow: visible; }
.link-layer { z-index: 1; }
.node-layer { z-index: 2; }
.link { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity 180ms ease, stroke 180ms ease, stroke-width 180ms ease; }
.partner-link { stroke: rgba(183, 120, 87, 0.72); stroke-width: 3; }
.partner-link.former-partner-link { stroke: rgba(143, 119, 114, 0.68); stroke-width: 2.5; stroke-dasharray: 9 8; }
.parent-link { stroke: rgba(84, 116, 102, 0.58); stroke-width: 2.6; }
.parent-link[data-link-segment="parent-bridge"], .parent-link[data-link-segment="parent-drop"] { stroke: rgba(84, 116, 102, 0.68); }
.parent-link[data-link-segment="parent-rail"] { stroke: rgba(84, 116, 102, 0.48); stroke-width: 2.2; }
.partner-dot { fill: #b77857; }
.partner-dot.former-partner-link { fill: #927b77; }
.child-dot { fill: #668c7a; }
.link.is-dimmed, .partner-dot.is-dimmed, .child-dot.is-dimmed { opacity: 0.075; }
.link.is-hidden, .partner-dot.is-hidden, .child-dot.is-hidden, .person-card.is-hidden { display: none; }
.link.is-highlighted { stroke-width: 4.2; filter: drop-shadow(0 1px 2px rgba(45, 55, 53, 0.18)); }
.partner-link.is-highlighted { stroke-width: 4.6; }
.partner-dot.is-highlighted, .child-dot.is-highlighted { opacity: 1; filter: drop-shadow(0 1px 2px rgba(45, 55, 53, 0.2)); }
.link.kin-ancestor { stroke: #c47b3d; }
.link.kin-descendant { stroke: #4f86a6; }
.link.kin-sibling { stroke: #64906f; }
.link.kin-partner { stroke: #8b6a8d; }
.link.kin-former { stroke: #9b7671; }
.partner-dot.kin-ancestor, .child-dot.kin-ancestor { fill: #c47b3d; }
.partner-dot.kin-descendant, .child-dot.kin-descendant { fill: #4f86a6; }
.partner-dot.kin-sibling, .child-dot.kin-sibling { fill: #64906f; }
.partner-dot.kin-partner, .child-dot.kin-partner { fill: #8b6a8d; }
.partner-dot.kin-former, .child-dot.kin-former { fill: #9b7671; }
.link.kin-depth-2, .partner-dot.kin-depth-2, .child-dot.kin-depth-2 { opacity: 0.82; }
.link.kin-depth-3, .partner-dot.kin-depth-3, .child-dot.kin-depth-3 { opacity: 0.66; }
.link.kin-depth-4, .partner-dot.kin-depth-4, .child-dot.kin-depth-4 { opacity: 0.5; }
.person-card { width: 214px; height: 148px; position: absolute; transition: opacity 180ms ease, transform 180ms ease; }
.person-hit { width: 100%; height: 100%; display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid rgba(36, 52, 51, 0.12); border-radius: 18px 18px 18px 5px; color: var(--ink); text-align: left; background: rgba(255, 253, 248, 0.98); box-shadow: 0 11px 24px rgba(74, 66, 50, 0.12); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease; }
.person-hit:hover { border-color: rgba(110, 150, 131, 0.72); box-shadow: 0 14px 28px rgba(74, 66, 50, 0.18); transform: translateY(-2px); }
.person-card.is-selected .person-hit { border-color: var(--coral); background: #fffaf0; box-shadow: 0 0 0 4px rgba(213, 130, 108, 0.15), 0 16px 30px rgba(74, 66, 50, 0.18); }
.person-card.is-related .person-hit { border-color: rgba(110, 150, 131, 0.62); }
.person-card.is-ancestor .person-hit { border-color: rgba(196, 123, 61, 0.86); background: #fff4e7; box-shadow: 0 0 0 3px rgba(196, 123, 61, 0.11), 0 12px 26px rgba(74, 66, 50, 0.14); }
.person-card.is-descendant .person-hit { border-color: rgba(79, 134, 166, 0.86); background: #eaf5fb; box-shadow: 0 0 0 3px rgba(79, 134, 166, 0.1), 0 12px 26px rgba(74, 66, 50, 0.14); }
.person-card.is-sibling .person-hit { border-color: rgba(100, 144, 111, 0.86); background: #eef7ef; box-shadow: 0 0 0 3px rgba(100, 144, 111, 0.1), 0 12px 26px rgba(74, 66, 50, 0.14); }
.person-card.is-partner .person-hit { border-color: rgba(139, 106, 141, 0.82); background: #f7eff7; box-shadow: 0 0 0 3px rgba(139, 106, 141, 0.1), 0 12px 26px rgba(74, 66, 50, 0.14); }
.person-card.is-former .person-hit { border-color: rgba(155, 118, 113, 0.72); background: #f6f0ee; box-shadow: 0 0 0 3px rgba(155, 118, 113, 0.09), 0 12px 26px rgba(74, 66, 50, 0.13); }
.person-card.is-inlaw .person-hit { border-color: rgba(127, 119, 137, 0.62); background: #f5f2f6; box-shadow: 0 0 0 3px rgba(127, 119, 137, 0.08), 0 12px 26px rgba(74, 66, 50, 0.13); }
.person-card.is-ancestor.kin-depth-2 .person-hit { border-color: rgba(196, 123, 61, 0.64); background: #fff8ef; }
.person-card.is-ancestor.kin-depth-3 .person-hit, .person-card.is-ancestor.kin-depth-4 .person-hit { border-color: rgba(196, 123, 61, 0.46); background: #fffbf5; }
.person-card.is-descendant.kin-depth-2 .person-hit { border-color: rgba(79, 134, 166, 0.64); background: #f0f8fb; }
.person-card.is-descendant.kin-depth-3 .person-hit, .person-card.is-descendant.kin-depth-4 .person-hit { border-color: rgba(79, 134, 166, 0.46); background: #f5fafc; }
.person-card.is-dimmed { opacity: 0.14; }
.person-card.is-match .person-hit { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(213, 130, 108, 0.13), 0 12px 26px rgba(74, 66, 50, 0.16); }
.person-avatar { width: 54px; height: 68px; flex: 0 0 54px; overflow: hidden; align-self: flex-start; border-radius: 13px 13px 13px 4px; background: var(--paper-deep); }
.person-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 8px; align-self: center; }
.person-name { display: flex; flex-direction: column; gap: 1px; font-family: Georgia, serif; font-size: 17px; line-height: 1.06; letter-spacing: -0.035em; }
.person-family { color: var(--ink-soft); font-family: inherit; font-size: 13px; letter-spacing: -0.02em; }
.person-dates { color: var(--ink-soft); font-size: 11px; line-height: 1.25; }
.person-dates.is-empty { opacity: 0; }
.person-hit:hover .person-dates.is-empty { opacity: 0.56; }
.date-separator { color: var(--coral); padding: 0 2px; }
.death-mark { color: var(--coral); font-weight: 700; }

.branch-tools { position: absolute; z-index: 5; left: 22px; top: 91px; display: grid; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 253, 248, 0.86); box-shadow: 0 8px 22px rgba(74, 66, 50, 0.08); backdrop-filter: blur(12px); }
.branch-tools button { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; font-size: 9px; }
.branch-tools button:hover { color: var(--ink); background: var(--paper-deep); }
.branch-tools span { width: 13px; color: var(--ink); font-size: 12px; text-align: center; }
.branch-tools .add-tree-person { margin-bottom: 2px; color: #fffaf0; background: var(--ink); font-weight: 750; }
.branch-tools .add-tree-person:hover { color: #fffaf0; background: #334a46; }
.board-hint { position: absolute; z-index: 5; bottom: 21px; left: 22px; padding: 8px 10px; border-radius: 10px; color: rgba(36, 52, 51, 0.54); background: rgba(255, 253, 248, 0.68); font-size: 9px; pointer-events: none; }
.board-controls { position: absolute; z-index: 5; right: 22px; bottom: 20px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 253, 248, 0.92); box-shadow: 0 8px 20px rgba(74, 66, 50, 0.1); backdrop-filter: blur(12px); }
.board-controls button { height: 34px; padding: 0 11px; border: 0; color: var(--ink); background: transparent; font-size: 9px; }
.board-controls button:hover { background: var(--paper-deep); }
.board-controls #zoom-value { min-width: 44px; padding-inline: 7px; color: var(--ink-soft); border-inline: 1px solid var(--line); font-size: 9px; text-align: center; }

.detail-panel { position: absolute; z-index: 30; top: 82px; right: 22px; bottom: 22px; width: min(355px, calc(100% - 44px)); overflow: auto; padding: 28px 25px; border: 1px solid var(--line); border-radius: 24px 24px 24px 6px; background: rgba(255, 253, 248, 0.97); box-shadow: 0 20px 48px rgba(74, 66, 50, 0.18); backdrop-filter: blur(16px); animation: drawer-in 180ms ease both; }
.detail-panel:not(.is-open) { display: none; }
@keyframes drawer-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.drawer-close { position: absolute; top: 14px; right: 15px; height: 29px; padding: 0 8px; border: 0; border-radius: 9px; color: var(--ink-soft); background: transparent; font-size: 9px; font-weight: 700; }
.drawer-close:hover { background: var(--paper-deep); color: var(--ink); }
.drawer-hero { display: flex; align-items: flex-end; gap: 18px; padding-right: 25px; }
.drawer-identity { min-width: 0; flex: 1; }
.drawer-edit { width: 30px; height: 30px; flex: 0 0 30px; align-self: flex-start; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); background: rgba(233, 227, 216, 0.42); font-size: 16px; line-height: 1; }
.drawer-edit:hover { color: var(--ink); border-color: var(--line-strong); background: var(--paper-deep); transform: translateY(-1px); }
.drawer-avatar { width: 82px; height: 100px; flex: 0 0 82px; overflow: hidden; border-radius: 19px 19px 19px 6px; background: var(--paper-deep); }
.drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.drawer-kicker { margin: 0 0 7px; color: var(--ink-soft); font-size: 9px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
.detail-panel h2 { display: flex; flex-direction: column; gap: 2px; margin: 0; font-family: Georgia, serif; font-size: 27px; font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.detail-panel h2 .person-family { font-size: 19px; }
.date-list { display: grid; gap: 9px; margin: 25px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.date-list div { display: flex; justify-content: space-between; gap: 12px; }
.date-list dt { color: var(--ink-soft); font-size: 10px; }
.date-list dd { margin: 0; font-size: 10px; font-weight: 750; }
.empty-state { margin: 25px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; }
.relation-section, .editor-section { margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); }
.relation-section h3, .editor-section h3 { margin: 0 0 9px; color: var(--ink-soft); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; }
.relation-list { display: flex; flex-wrap: wrap; gap: 7px; }
.relation-person { padding: 7px 9px; border: 1px solid rgba(110, 150, 131, 0.35); border-radius: 9px; color: var(--ink); background: rgba(203, 217, 205, 0.28); font-size: 10px; }
.relation-person:hover { border-color: var(--sage-deep); background: var(--sage); }
.relation-person.relation-ancestor { border-color: rgba(196, 123, 61, 0.46); background: #fff4e7; }
.relation-person.relation-descendant { border-color: rgba(79, 134, 166, 0.46); background: #eaf5fb; }
.relation-person.relation-sibling { border-color: rgba(100, 144, 111, 0.46); background: #eef7ef; }
.relation-person.relation-partner { border-color: rgba(139, 106, 141, 0.42); background: #f7eff7; }
.relation-person.relation-former { border-color: rgba(155, 118, 113, 0.42); background: #f6f0ee; }
.drawer-focus { width: 100%; margin-top: 25px; padding: 10px; border-radius: 10px; font-size: 10px; }
.drawer-title-row, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer-cancel-edit { flex: 0 0 auto; margin-top: 3px; padding: 5px 7px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; font-size: 9px; }
.drawer-cancel-edit:hover { color: var(--ink); background: var(--paper-deep); }
.detail-panel.is-editing { padding: 24px 22px 30px; }
.person-form { margin-top: 20px; padding-top: 2px; border-top: 1px solid var(--line); }
.person-form label span { font-weight: 400; }
.form-section { margin-top: 18px; }
.form-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.form-section-heading > span { color: var(--ink-soft); font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.form-section-heading small { color: var(--ink-soft); font-size: 8px; font-weight: 500; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.person-form .form-section label, .new-related-form label { display: grid; gap: 7px; margin-top: 0; }
.person-form .form-section label, .new-related-form label { color: var(--ink-soft); font-size: 10px; }
.person-form .form-section input, .new-related-form input, .new-related-form select { margin-top: 5px; }
.select-field { display: grid; gap: 5px; }
.gender-field { min-width: 0; margin: 15px 0 0; padding: 0; border: 0; }
.gender-field legend { padding: 0; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.gender-toggle { display: flex; gap: 8px; margin-top: 7px; }
.gender-choice { width: 44px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; font-size: 23px; line-height: 1; transition: border-color 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.gender-choice:hover { transform: translateY(-1px); }
.gender-choice-male { color: #4f86a6; background: #eaf5fb; }
.gender-choice-female { color: #c77791; background: #f9eaf0; }
.gender-choice-male.is-selected { border-color: #4f86a6; color: #fff; background: #4f86a6; box-shadow: 0 0 0 3px rgba(79, 134, 166, 0.16); }
.gender-choice-female.is-selected { border-color: #c77791; color: #fff; background: #c77791; box-shadow: 0 0 0 3px rgba(199, 119, 145, 0.16); }
.gender-choice:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.photo-editor { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(233, 227, 216, 0.32); }
.photo-preview { width: 76px; height: 88px; display: block; object-fit: cover; border-radius: 14px 14px 14px 4px; background: var(--paper-deep); }
.photo-actions { min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; }
.photo-actions > span { grid-column: 1 / -1; color: var(--ink); font-size: 10px; font-weight: 750; }
.photo-picker { display: block !important; margin: 0 !important; padding: 8px 9px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink) !important; background: var(--cream); font-size: 9px !important; text-align: center; cursor: pointer; }
.photo-picker input { width: 1px !important; height: 1px; position: absolute; opacity: 0; pointer-events: none; }
.photo-remove { padding: 8px 7px; border: 0; border-radius: 8px; color: var(--danger); background: transparent; font-size: 9px; }
.photo-remove:hover { background: #f7e3dc; }
.photo-actions small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 8px; line-height: 1.35; }
.section-heading h3 { margin: 0; }
.section-heading span { color: var(--ink-soft); font-size: 9px; }
.editable-relations { display: grid; gap: 5px; margin: 12px 0; padding: 0; list-style: none; }
.editable-relations li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 8px; background: rgba(233, 227, 216, 0.58); font-size: 9px; }
.editable-relations button { height: 22px; padding: 0 5px; border: 0; border-radius: 6px; color: var(--ink-soft); background: transparent; font-size: 8px; }
.editable-relations button:hover { color: var(--danger); background: #f7e3dc; }
.relation-form { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.relation-subject { margin: 2px 0 0; color: var(--ink); font-family: Georgia, serif; font-size: 14px; }
.relation-form select { padding: 8px 9px; font-size: 9px; }
.relation-form .icon-button { width: 100%; height: 31px; border: 1px dashed var(--sage-deep); border-radius: 8px; color: var(--sage-deep); background: rgba(212, 223, 213, 0.2); font-size: 9px; font-weight: 700; }
.create-related-button { width: 100%; margin-top: 12px; padding: 9px 10px; border: 1px dashed rgba(110, 150, 131, 0.58); border-radius: 10px; color: var(--sage-deep); background: rgba(212, 223, 213, 0.18); font-size: 9px; font-weight: 750; text-align: left; }
.create-related-button:hover { border-color: var(--sage-deep); background: rgba(212, 223, 213, 0.42); }
.new-related-person { margin-top: 12px; padding: 14px; border: 1px solid rgba(110, 150, 131, 0.3); border-radius: 14px 14px 14px 4px; background: rgba(212, 223, 213, 0.18); }
.new-related-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.new-related-heading h4 { margin: 0; color: var(--ink); font-family: Georgia, serif; font-size: 16px; font-weight: 500; }
.new-related-heading p { margin: 4px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.35; }
.new-related-close { width: 24px; height: 24px; flex: 0 0 24px; border: 0; border-radius: 7px; color: var(--ink-soft); background: transparent; font-size: 18px; line-height: 1; }
.new-related-close:hover { color: var(--ink); background: rgba(255, 253, 248, 0.76); }
.new-related-form { margin-top: 8px; }
.new-related-form input, .new-related-form select { padding: 9px 10px; font-size: 10px; }
.new-related-form .form-section + .form-section { margin-top: 14px; }
.new-related-form .gender-field { margin-top: 16px; }
.new-related-form .primary-button { margin-top: 14px; }
.danger-button { width: 100%; margin-top: 26px; padding: 9px; border: 1px solid rgba(168, 79, 69, 0.25); border-radius: 9px; color: var(--danger); background: transparent; font-size: 9px; }
.danger-button:hover { background: #f9e9e5; }
.toast { position: absolute; z-index: 60; left: 50%; bottom: 20px; max-width: min(420px, calc(100% - 40px)); padding: 10px 14px; border-radius: 11px; color: #fff; background: var(--ink); box-shadow: var(--shadow); font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity 180ms ease, transform 180ms ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tone="success"] { background: #527663; }
.toast[data-tone="error"] { background: var(--danger); }

.assistant-panel, .suggestions-panel { position: absolute; z-index: 50; overflow: hidden; border: 1px solid var(--line); background: rgba(255, 253, 248, 0.98); box-shadow: 0 22px 52px rgba(74, 66, 50, 0.2); backdrop-filter: blur(18px); animation: panel-in 180ms ease both; }
.assistant-panel[hidden], .suggestions-panel[hidden] { display: none !important; }
.assistant-panel { left: 22px; bottom: 22px; width: min(365px, calc(100% - 44px)); max-height: min(620px, calc(100% - 120px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; border-radius: 22px 22px 22px 6px; }
.suggestions-panel { top: 82px; right: 22px; bottom: 22px; width: min(390px, calc(100% - 44px)); padding: 24px; border-radius: 22px 22px 22px 6px; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.assistant-header, .suggestions-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; }
.suggestions-header { padding: 0; }
.assistant-header h2, .suggestions-header h2 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 25px; font-weight: 500; letter-spacing: -0.04em; }
.panel-close { width: 28px; height: 28px; border: 0; border-radius: 9px; color: var(--ink-soft); background: transparent; font-size: 20px; line-height: 1; }
.panel-close:hover { color: var(--ink); background: var(--paper-deep); }
.assistant-scope { display: flex; align-items: center; gap: 7px; margin: 0 20px 12px; padding: 7px 9px; border-radius: 9px; color: var(--ink-soft); background: rgba(212, 223, 213, 0.34); font-size: 9px; }
.assistant-scope-dot { width: 6px; height: 6px; border-radius: 50%; background: #77a186; }
.assistant-messages { min-height: 160px; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 4px 20px 14px; }
.assistant-welcome { display: grid; justify-items: start; gap: 7px; padding: 16px 2px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.assistant-welcome strong { color: var(--ink); font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.assistant-welcome p { max-width: 270px; margin: 0; }
.assistant-orb { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 11px 11px 11px 3px; color: #fffaf0; background: var(--ink); font-size: 15px; }
.assistant-message { display: grid; gap: 6px; max-width: 92%; }
.assistant-message-user { justify-self: end; justify-items: end; }
.assistant-message-assistant { justify-self: start; }
.assistant-message-bubble { padding: 9px 11px; border-radius: 13px 13px 13px 4px; color: var(--ink); background: #f1eee6; font-size: 10px; line-height: 1.45; }
.assistant-message-user .assistant-message-bubble { border-radius: 13px 13px 4px 13px; color: #fffaf0; background: var(--ink); }
.assistant-typing { color: var(--ink-soft); font-style: italic; }
.assistant-proposal { display: grid; gap: 7px; padding: 9px; border: 1px solid rgba(206, 125, 103, 0.32); border-radius: 10px 10px 10px 3px; background: #fff7f0; }
.assistant-proposal strong { color: #9b5f4e; font-size: 9px; line-height: 1.35; }
.assistant-proposal button, .assistant-suggestion { padding: 6px 8px; border: 1px solid rgba(110, 150, 131, 0.36); border-radius: 8px; color: var(--sage-deep); background: rgba(212, 223, 213, 0.25); font-size: 9px; font-weight: 750; text-align: left; }
.assistant-proposal button:hover, .assistant-suggestion:hover { background: var(--sage); }
.assistant-applied { margin: 0; color: var(--sage-deep); font-size: 8px; }
.assistant-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 12px 20px 8px; border-top: 1px solid var(--line); }
.assistant-form textarea { min-height: 44px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--ink); background: #fffefb; font-size: 10px; line-height: 1.4; }
.assistant-form textarea:focus { border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(121, 150, 134, 0.14); }
.assistant-send { align-self: end; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; color: #fffaf0; background: var(--ink); font-size: 9px; font-weight: 750; }
.assistant-send:hover { background: #334a46; }
.assistant-send:disabled { opacity: 0.5; }
.assistant-footnote { margin: 0; padding: 0 20px 15px; color: var(--ink-soft); font-size: 8px; }
.suggestions-intro { margin: 14px 0 18px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.suggestions-list { display: grid; gap: 8px; max-height: calc(100% - 120px); overflow: auto; margin: 0; padding: 0; list-style: none; }
.suggestions-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 10px; border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; background: rgba(233, 227, 216, 0.35); }
.suggestions-list p { margin: 0; color: var(--ink); font-size: 10px; line-height: 1.4; }
.suggestions-list small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 8px; }
.suggestions-list button { width: 24px; height: 24px; flex: 0 0 24px; border: 0; border-radius: 7px; color: var(--ink-soft); background: transparent; font-size: 17px; line-height: 1; }
.suggestions-list button:hover { color: var(--danger); background: #f7e3dc; }
.suggestions-empty { color: var(--ink-soft); font-size: 10px; }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: auto 1fr; }
  .view-status { justify-self: end; }
  .topbar-actions { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; margin-top: -5px; }
  .search-wrap { margin-right: auto; }
  .detail-panel { top: 121px; }
}

@media (max-width: 700px) {
  .topbar { top: 10px; left: 10px; right: 10px; gap: 8px; }
  .brand-lockup { padding-right: 10px; }
  .brand-lockup h1 { max-width: 116px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .brand-lockup .eyebrow { display: none; }
  .topbar-actions { overflow-x: auto; justify-content: flex-start; padding-bottom: 3px; }
  .search-wrap { flex: 1 0 175px; margin: 0; }
  .search-box { width: 100%; }
  .search-results { width: min(280px, calc(100vw - 20px)); }
  .people-count, .sync-status, .top-action { display: none; }
  .assistant-button, .suggestions-button { padding-inline: 9px; }
  .branch-tools { top: 112px; left: 10px; }
  .board-hint { display: none; }
  .board-controls { right: 10px; bottom: 10px; }
  .detail-panel { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 60%; padding: 22px; border-radius: 22px 22px 22px 5px; }
  .drawer-title-row { padding-right: 44px; }
  .drawer-hero { align-items: center; }
  .drawer-avatar { width: 64px; height: 78px; flex-basis: 64px; }
  .detail-panel h2 { font-size: 24px; }
  .assistant-panel { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 68%; }
  .suggestions-panel { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 68%; padding: 20px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}