@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Prata&display=swap');

:root {
  --ink: #061018;
  --ink-2: #091720;
  --ink-3: #0e202b;
  --panel: rgba(9, 24, 33, 0.9);
  --panel-solid: #0b1b25;
  --line: rgba(184, 210, 220, 0.16);
  --line-strong: rgba(204, 223, 228, 0.26);
  --text: #eee9df;
  --muted: #8e9ca4;
  --muted-2: #62747e;
  --gold: #d4ad70;
  --gold-bright: #f1c983;
  --teal: #52c9b5;
  --blue: #70aef8;
  --violet: #a78bfa;
  --rose: #cf7f72;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  --sidebar: 236px;
  --radius: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none!important; }

html { color-scheme: dark; background: var(--ink); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--ink);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  letter-spacing: -0.01em;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 14px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background-color: #07141d;
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='.6' fill='%2393a7af' fill-opacity='.08'/%3E%3C/svg%3E");
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 4px 22px; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; color: var(--gold); }
.brand-mark svg { width: 36px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.25; }
.brand-emblem { display: block; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid rgba(212,173,112,.35); border-radius: 11px; object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 18px rgba(24,93,183,.12); }
.brand strong { display: block; color: var(--gold-bright); font-family: "Prata", Georgia, serif; font-size: 16px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.brand small { display: block; margin-top: 2px; color: var(--muted-2); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }

.primary-nav, .secondary-nav { display: grid; gap: 4px; }
.primary-nav { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.secondary-nav { margin-bottom: 18px; }
.nav-section-label { padding: 16px 7px 8px; color: var(--muted-2); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.nav-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #a9b3b7;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.nav-item:hover { color: var(--text); background-color: rgba(255,255,255,.035); transform: translateX(2px); }
.nav-item.is-active { border-color: rgba(212, 173, 112, .5); background-color: rgba(212, 173, 112, .09); color: var(--gold-bright); }
.nav-item svg { width: 18px; height: 18px; stroke-width: 1.55; }
.nav-item .nav-tail { width: 14px; }
.nav-item em { min-width: 28px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 10px; font-style: normal; text-align: center; }
.nav-item--quiet { min-height: 38px; }

.sidebar-card { position: relative; min-height: 158px; margin-top: auto; padding: 14px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background-color: rgba(3, 12, 18, .58); }
.sidebar-card__top { display: flex; align-items: center; justify-content: space-between; color: var(--gold); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.sidebar-card__top svg { width: 17px; }
.sidebar-card > strong { display: block; margin-top: 18px; font-family: "Prata", Georgia, serif; font-size: 20px; font-weight: 400; }
.sidebar-card > p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.rings { position: absolute; right: -25px; bottom: -62px; width: 140px; height: 140px; }
.rings span { position: absolute; inset: calc(var(--i, 0) * 11px); border: 1px solid rgba(212,173,112,.22); border-radius: 50%; }
.rings span:nth-child(1){--i:0}.rings span:nth-child(2){--i:1}.rings span:nth-child(3){--i:2}.rings span:nth-child(4){--i:3}.rings span:nth-child(5){--i:4}

.workspace { position: relative; height: 100vh; overflow: hidden; background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='17' r='.65' fill='%2396b7c7' fill-opacity='.07'/%3E%3Ccircle cx='41' cy='9' r='.45' fill='%2396b7c7' fill-opacity='.05'/%3E%3Ccircle cx='54' cy='46' r='.55' fill='%2396b7c7' fill-opacity='.06'/%3E%3C/svg%3E"); }
.topbar { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 12px 26px 10px 28px; }

.search-box { position: relative; display: grid; grid-template-columns: 20px minmax(100px, 410px) auto; align-items: center; width: min(440px, 40vw); height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; background-color: rgba(9, 23, 32, .78); color: var(--muted); }
.search-box > svg { width: 18px; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.search-box input::placeholder { color: var(--muted-2); }
.search-box kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted-2); font-size: 10px; }
.search-results { position: absolute; z-index: 80; top: 48px; left: 0; display: none; width: 100%; max-height: 340px; padding: 7px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 12px; background: #0a1821; box-shadow: var(--shadow); }
.search-results.is-open { display: grid; }
.search-result { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; }
.search-result:hover, .search-result[aria-selected="true"] { background: rgba(112, 174, 248, .1); }
.search-result strong { display: block; font-size: 12px; }
.search-result span { color: var(--muted); font-size: 10px; }

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.profile-chip, .icon-button { border: 1px solid var(--line); background-color: rgba(9,23,32,.75); }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--muted); cursor: pointer; }
.icon-button:hover { color: var(--text); border-color: var(--line-strong); }
.icon-button svg { width: 17px; }
.inbox-trigger { position: relative; }
.inbox-badge { position: absolute; top: -6px; right: -6px; display: grid; min-width: 18px; height: 18px; padding: 0 5px; place-items: center; border: 2px solid var(--ink); border-radius: 10px; background: #d8af70; color: #07151e; font-size: 8px; font-weight: 800; box-shadow: 0 4px 14px rgba(212,173,112,.35); }
.inbox-badge[hidden] { display: none; }
.inbox-drawer { position: fixed; z-index: 140; top: 76px; right: 22px; display: grid; width: min(410px,calc(100vw - 28px)); max-height: calc(100vh - 96px); padding: 16px; overflow: hidden; border: 1px solid rgba(212,173,112,.34); border-radius: 17px; background: rgba(5,18,27,.97); box-shadow: 0 30px 90px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.025); opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: top right; backdrop-filter: blur(24px); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.75,.2,1); }
.inbox-drawer[hidden] { display: none; }
.inbox-drawer.is-open { opacity: 1; transform: translateY(0) scale(1); }
.inbox-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 3px 2px 14px; border-bottom: 1px solid var(--line); }
.inbox-drawer__header h2 { margin: 6px 0 0; font-size: 21px; }
.inbox-drawer__header .icon-button { flex: 0 0 auto; width: 32px; height: 32px; }
.inbox-drawer__summary { display: grid; grid-template-columns: 9px minmax(0,1fr); gap: 3px 10px; margin: 12px 0 7px; padding: 11px 12px; border: 1px solid rgba(82,201,181,.18); border-radius: 10px; background: linear-gradient(115deg, rgba(82,201,181,.07), rgba(212,173,112,.035)); }
.inbox-drawer__summary strong, .inbox-drawer__summary small { display: block; }
.inbox-drawer__summary strong { font-size: 10px; }
.inbox-drawer__summary small { grid-column: 2; color: var(--muted); font-size: 8px; line-height: 1.45; }
.inbox-pulse { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(82,201,181,.09); }
.inbox-preview-list { display: grid; gap: 5px; max-height: min(440px,calc(100vh - 315px)); padding: 3px 0 8px; overflow-y: auto; }
.inbox-preview-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 58px; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.inbox-preview-item:hover { border-color: rgba(212,173,112,.22); background: rgba(212,173,112,.055); }
.inbox-preview-item strong, .inbox-preview-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-preview-item strong { font-size: 10px; }
.inbox-preview-item small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.inbox-preview-item time { align-self: start; padding-top: 3px; color: var(--muted-2); font-size: 7px; }
.inbox-preview-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(212,173,112,.24); border-radius: 50%; color: var(--gold); background: rgba(212,173,112,.045); }
.inbox-preview-mark[data-status="approved"] { color: var(--teal); border-color: rgba(82,201,181,.25); }
.inbox-preview-mark[data-status="rejected"] { color: #df8d83; border-color: rgba(223,141,131,.25); }
.inbox-preview-mark svg { width: 14px; }
.inbox-preview-empty { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; min-height: 78px; padding: 12px; color: var(--muted); }
.inbox-preview-empty > svg { width: 23px; color: var(--gold); }
.inbox-preview-empty strong, .inbox-preview-empty small { display: block; }
.inbox-preview-empty strong { color: var(--text); font-size: 10px; }
.inbox-preview-empty small { margin-top: 4px; font-size: 8px; }
.inbox-open-center { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid rgba(212,173,112,.28); border-radius: 10px; background: rgba(212,173,112,.075); color: var(--text); text-align: left; cursor: pointer; }
.inbox-open-center:hover { border-color: rgba(212,173,112,.55); background: rgba(212,173,112,.11); }
.inbox-open-center strong, .inbox-open-center small { display: block; }
.inbox-open-center strong { font-size: 10px; }
.inbox-open-center small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.inbox-open-center > svg { width: 16px; color: var(--gold); }
.profile-chip { display: flex; align-items: center; gap: 8px; height: 42px; padding: 4px 9px 4px 5px; border-radius: 22px; cursor: pointer; }
.profile-chip > svg { width: 13px; color: var(--muted); }
.theme-switcher { position: relative; }
.theme-trigger { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(9,23,32,.75); color: var(--muted); font-size: 9px; cursor: pointer; }
.theme-trigger:hover, .theme-switcher.is-open .theme-trigger { border-color: rgba(212,173,112,.48); color: var(--gold-bright); }
.theme-trigger svg { width: 15px; }
.theme-trigger svg:last-child { width: 11px; transition: transform .2s ease; }
.theme-switcher.is-open .theme-trigger svg:last-child { transform: rotate(180deg); }
.theme-menu { position: absolute; z-index: 120; top: 45px; right: 0; display: none; width: 240px; padding: 7px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(7,21,30,.98); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.theme-switcher.is-open .theme-menu { display: grid; animation: theme-menu-in .18s ease both; }
@keyframes theme-menu-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.theme-menu button { display: grid; grid-template-columns: 25px minmax(0,1fr) 15px; gap: 8px; align-items: center; min-height: 48px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.theme-menu button:hover, .theme-menu button.is-active { background: rgba(212,173,112,.08); color: var(--text); }
.theme-menu button > svg { width: 16px; color: var(--gold); }
.theme-menu button > svg:last-child { width: 13px; opacity: 0; color: var(--teal); }
.theme-menu button.is-active > svg:last-child { opacity: 1; }
.theme-menu strong, .theme-menu small { display: block; }
.theme-menu strong { font-size: 10px; font-weight: 600; }
.theme-menu small { margin-top: 2px; color: var(--muted-2); font-size: 7px; }
.theme-switcher--guest { position: fixed; z-index: 40; top: 20px; right: 24px; display: none; }
.is-guest .theme-switcher--guest { display: block; }

.view { position: absolute; inset: 68px 0 0; display: none; padding: 4px 26px 24px 28px; overflow: hidden; }
.view.is-active { display: grid; animation: view-enter .48s cubic-bezier(.22,.7,.2,1) both; }
@keyframes view-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.view-heading { display: flex; align-items: flex-end; justify-content: space-between; min-height: 74px; padding-bottom: 12px; }
.view-heading h1, .person-intro h1 { margin: 3px 0 2px; font-family: "Prata", Georgia, serif; font-size: clamp(28px, 3vw, 42px); font-weight: 400; letter-spacing: -.03em; }
.view-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.eyebrow { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.view-actions { display: flex; gap: 8px; }
.control-button, .wide-button, .text-button { border: 1px solid var(--line-strong); background: rgba(11,27,37,.75); cursor: pointer; }
.control-button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 9px; color: #a7b2b7; font-size: 11px; }
.control-button:hover, .control-button.is-active { border-color: rgba(212,173,112,.5); color: var(--gold-bright); background-color: rgba(212,173,112,.08); }
.control-button svg, .text-button svg { width: 15px; }
.wide-button { width: 100%; min-height: 36px; border-radius: 8px; color: #c2c9cc; font-size: 11px; }
.wide-button:hover { border-color: rgba(212,173,112,.5); color: var(--gold-bright); }
.text-button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); }
.text-button:hover { color: var(--gold); }
.admin-only { display: none!important; }
body.is-admin .admin-only { display: flex!important; }

#view-tree { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 34px minmax(0, 1fr); gap: 0 14px; overflow-y: auto; }
#view-tree > .view-heading, #view-tree > .generation-rail { grid-column: 1; }
#view-tree.is-full-tree { grid-template-rows: auto minmax(0, 1fr); }
#view-tree.is-full-tree > .generation-rail { display: none!important; }
#view-tree.is-full-tree > .tree-stage { grid-row: 2; }
.generation-rail { display: flex; align-items: center; justify-content: flex-start; gap: clamp(16px, 3vw, 44px); padding: 0 8px 7px; overflow-x: auto; color: var(--muted-2); scrollbar-width: thin; }
.generation-rail.is-compact { justify-content: center; }
.generation-step { position: relative; min-width: 46px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-family: "Prata", Georgia, serif; font-size: 11px; text-align: center; cursor: pointer; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.generation-step::after { content: ""; position: absolute; bottom: -5px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateX(-50%); transition: box-shadow .2s ease, transform .2s ease; }
.generation-step:hover { color: var(--gold); background-color: rgba(212,173,112,.06); transform: translateY(-1px); }
.generation-step.is-current { color: var(--gold-bright); background-color: rgba(212,173,112,.08); }
.generation-step.is-current::after { box-shadow: 0 0 10px var(--gold-bright); transform: translateX(-50%) scale(1.45); }

.tree-stage { position: relative; grid-column: 1; grid-row: 3; min-height: var(--tree-min-height, 0); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background-color: #07131c; box-shadow: inset 0 0 70px rgba(0,0,0,.26); }
.tree-stars { position: absolute; inset: 0; opacity: .8; background-image: url("data:image/svg+xml,%3Csvg width='118' height='86' viewBox='0 0 118 86' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='17' r='.7' fill='%23bcd5e2' fill-opacity='.28'/%3E%3Ccircle cx='76' cy='12' r='.45' fill='%23bcd5e2' fill-opacity='.2'/%3E%3Ccircle cx='104' cy='61' r='.55' fill='%23bcd5e2' fill-opacity='.22'/%3E%3Ccircle cx='35' cy='69' r='.4' fill='%23bcd5e2' fill-opacity='.17'/%3E%3C/svg%3E"); }
.tree-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform-origin: 50% 50%; }
.tree-links path { fill: none; stroke: rgba(112,174,248,.48); stroke-width: 1.4; }
.tree-links path.spouse { stroke: rgba(212,173,112,.67); stroke-dasharray: 3 5; }
.tree-links path.secondary { stroke: rgba(167,139,250,.36); stroke-dasharray: 2 6; }
.tree-nodes { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .25s ease; }

.tree-node { position: absolute; display: grid; justify-items: center; width: 126px; padding: 6px; transform: translate(-50%, -50%); border: 0; background: transparent; color: var(--text); cursor: pointer; }
.tree-node__avatar { position: relative; display: grid; width: 54px; height: 54px; place-items: center; overflow: hidden; border: 2px solid rgba(212,173,112,.56); border-radius: 50%; background: #20303a; color: #f0dfc6; font-family: "Prata", Georgia, serif; font-size: 14px; box-shadow: 0 0 0 5px rgba(6,16,24,.9), 0 9px 22px rgba(0,0,0,.35); }
.tree-node__avatar > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center 24%; transform: scale(1.025); }
.tree-node__avatar::after { content: ""; position: absolute; right: -3px; bottom: 0; width: 12px; height: 12px; border: 2px solid #07131c; border-radius: 50%; background: var(--blue); }
.tree-node[data-sex="F"] .tree-node__avatar::after { background: var(--violet); }
.tree-node strong { width: 100%; margin-top: 7px; overflow: hidden; font-size: 10px; font-weight: 500; line-height: 1.25; text-align: center; text-overflow: ellipsis; }
.tree-node small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.tree-node:hover .tree-node__avatar { border-color: var(--gold-bright); transform: translateY(-2px); }
.tree-node.is-focus { width: 205px; padding: 18px 16px 14px; border: 1px solid rgba(112,174,248,.8); border-radius: 15px; background-color: rgba(9,27,39,.96); box-shadow: 0 0 0 4px rgba(112,174,248,.08), 0 0 42px rgba(69,141,221,.25), var(--shadow); }
.tree-node.is-focus .tree-node__avatar { width: 92px; height: 92px; border-width: 3px; font-size: 22px; }
.tree-node.is-focus strong { margin-top: 12px; font-family: "Prata", Georgia, serif; font-size: 17px; font-weight: 400; }
.tree-node.is-focus small { font-size: 10px; }
.tree-stage.has-many-children .tree-node[data-relation="child"] { width: 86px; }
.tree-stage.has-many-children .tree-node[data-relation="child"] .tree-node__avatar { width: 43px; height: 43px; }
.tree-stage.has-many-children .tree-node[data-relation="child"] strong { font-size: 8px; }
.tree-stage.has-many-children .tree-minimap { display: none; }
.tree-stage.has-many-children .zoom-controls { top: 14px; bottom: auto; }
.focus-actions { display: flex; gap: 6px; margin-top: 11px; }
.focus-actions span { display: grid; width: 29px; height: 27px; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.focus-actions svg { width: 13px; }

.tree-minimap { position: absolute; bottom: 14px; left: 14px; width: 160px; height: 88px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background-color: rgba(5,15,22,.82); }
.tree-minimap line { stroke: rgba(112,174,248,.45); stroke-width: 1; }
.tree-minimap circle { fill: var(--gold); }
.tree-overview[hidden] { display: none; }
.tree-stage.is-overview { overflow: hidden; cursor: grab; touch-action: none; }
.tree-stage.is-overview.is-panning { cursor: grabbing; }
.tree-stage.is-overview .tree-links, .tree-stage.is-overview .tree-nodes { inset: 0 auto auto 0; transition: none; will-change: transform; }
.tree-stage.is-overview.is-map-flying .tree-links, .tree-stage.is-overview.is-map-flying .tree-nodes { transition: transform .86s cubic-bezier(.2,.72,.15,1)!important; }
.tree-stage.is-overview .tree-links path { stroke: rgba(112,174,248,.34); stroke-width: 1.1; }
.tree-stage.is-overview .tree-links path,
.tree-stage.is-overview .tree-links circle { vector-effect: non-scaling-stroke; }
.tree-stage.is-overview .tree-links path.spouse { stroke: rgba(212,173,112,.58); }
.tree-stage.is-overview .tree-minimap { z-index: 8; display: block; cursor: crosshair; }
.tree-stage.is-overview .zoom-controls { z-index: 8; display: grid; }
.tree-overview { position: absolute; z-index: 7; top: 14px; left: 14px; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5,15,22,.82); pointer-events: none; backdrop-filter: blur(12px); }
.tree-overview strong { color: var(--gold-bright); font-family: "Prata", Georgia, serif; font-size: 11px; font-weight: 400; }
.tree-overview span { color: #a8b2b6; font-size: 8px; }
.tree-overview small { margin-top: 3px; color: var(--muted-2); font-size: 7px; }
.tree-stage.is-overview .tree-links .generation-guide { stroke: rgba(212,173,112,.13); stroke-width: 1; stroke-dasharray: 2 12; }
.tree-stage.is-overview .tree-links .family-connection { opacity: .58; transition: opacity .18s ease; }
.tree-stage.is-overview .tree-links .family-connection path { stroke: rgba(112,174,248,.54); stroke-width: 1.35; }
.tree-stage.is-overview .tree-links .family-connection path.spouse { stroke: rgba(212,173,112,.78); stroke-width: 1.5; stroke-dasharray: none; }
.tree-stage.is-overview .tree-links .family-junction { fill: var(--gold-bright); stroke: #07131c; stroke-width: 1.5; }
.tree-stage.is-line-focused .tree-links .family-connection { opacity: .055; }
.tree-stage.is-line-focused .tree-links .family-connection.is-active { opacity: 1; }
.tree-stage.is-line-focused .tree-links .family-connection.is-active path { stroke: var(--blue); stroke-width: 3.2; filter: drop-shadow(0 0 5px rgba(112,174,248,.78)); }
.tree-stage.is-line-focused .tree-links .family-connection.is-active path.spouse { stroke: var(--gold-bright); }
.tree-stage.is-line-focused .tree-links .family-connection.is-active .family-junction { fill: #fff1c9; }
.tree-stage.has-pinned-connections .tree-links .family-connection.is-active path { animation: pinned-line-pulse 2.2s ease-in-out infinite; }
.tree-stage.has-pinned-connections .tree-node.is-connections-pinned .tree-node__avatar { border-color: var(--gold-bright); box-shadow: 0 0 0 5px rgba(212,173,112,.18), 0 0 34px rgba(112,174,248,.52); }
@keyframes pinned-line-pulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(112,174,248,.48)); } 50% { filter: drop-shadow(0 0 8px rgba(112,174,248,.82)); } }

.tree-generation-scale { position: absolute; z-index: 12; inset: 0 auto 0 0; width: 94px; overflow: hidden; border-right: 1px solid rgba(212,173,112,.19); background: linear-gradient(90deg, rgba(4,13,19,.98) 0%, rgba(4,13,19,.9) 74%, rgba(4,13,19,0) 100%); pointer-events: none; }
.generation-scale-title { position: absolute; z-index: 2; top: 16px; left: 12px; color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.generation-scale-step { position: absolute; top: 0; left: 7px; display: grid; grid-template-columns: 31px 1fr; gap: 6px; align-items: center; width: 79px; min-height: 36px; margin-top: -18px; padding: 4px 6px; border: 1px solid transparent; border-radius: 9px; background: rgba(7,19,28,.82); color: var(--muted); text-align: left; cursor: pointer; pointer-events: auto; transition: opacity .18s ease, border-color .18s ease, background-color .18s ease; }
.generation-scale-step::after { content: ""; position: absolute; right: -8px; top: 50%; width: 10px; height: 1px; background: rgba(212,173,112,.5); }
.generation-scale-step strong { color: #e7d3b3; font-family: "Prata", Georgia, serif; font-size: 13px; font-weight: 400; text-align: center; }
.generation-scale-step span { font-size: 7px; white-space: nowrap; }
.generation-scale-step:hover, .generation-scale-step.is-current { border-color: rgba(212,173,112,.54); background: rgba(28,38,43,.96); color: var(--gold-bright); }
.generation-scale-step.is-offscreen { opacity: 0; pointer-events: none; }

.tree-map-navigation { position: absolute; z-index: 15; top: 14px; left: 50%; display: flex; gap: 8px; width: min(520px, calc(100% - 650px)); min-width: 320px; transform: translateX(-50%); }
.tree-map-search { position: relative; display: grid; flex: 1; grid-template-columns: 18px minmax(0,1fr) auto; gap: 8px; align-items: center; height: 42px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(5,15,22,.94); color: var(--muted); box-shadow: 0 15px 40px rgba(0,0,0,.34); backdrop-filter: blur(16px); }
.tree-map-search > svg { width: 16px; }
.tree-map-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.tree-map-search input::placeholder { color: var(--muted-2); }
.tree-map-search kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted-2); font-size: 9px; }
.tree-map-results { position: absolute; top: 48px; left: 0; display: none; width: 100%; max-height: min(420px,70vh); padding: 7px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(5,15,22,.98); box-shadow: var(--shadow); }
.tree-map-results.is-open { display: grid; }
.tree-map-result { display: grid; grid-template-columns: 31px 1fr 16px; gap: 9px; align-items: center; padding: 7px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.tree-map-result:hover { background: rgba(112,174,248,.11); }
.tree-map-result strong, .tree-map-result small { display: block; }
.tree-map-result strong { font-size: 10px; }
.tree-map-result small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.tree-map-result > svg { width: 13px; color: var(--gold); }
.tree-map-empty { padding: 16px; color: var(--muted); font-size: 10px; text-align: center; }
.tree-map-fit, .tree-map-scope-reset { display: inline-flex; gap: 7px; align-items: center; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(5,15,22,.94); color: #b7c1c5; font-size: 9px; white-space: nowrap; cursor: pointer; backdrop-filter: blur(16px); }
.tree-map-fit:hover, .tree-map-scope-reset:hover { border-color: rgba(212,173,112,.5); color: var(--gold-bright); }
.tree-map-fit svg, .tree-map-scope-reset svg { width: 14px; }
.tree-map-scope-reset { border-color: rgba(212,173,112,.36); color: var(--gold-bright); }
.tree-map-scope-reset[hidden] { display: none; }
.tree-node-menu { position: absolute; z-index: 24; display: grid; width: 276px; max-height: calc(100% - 24px); padding: 8px; overflow-y: auto; border: 1px solid rgba(212,173,112,.38); border-radius: 13px; background: rgba(6,19,28,.97); box-shadow: 0 22px 64px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.025) inset; backdrop-filter: blur(20px); animation: node-menu-in .2s cubic-bezier(.2,.7,.2,1) both; }
.tree-node-menu[hidden] { display: none; }
@keyframes node-menu-in { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.tree-node-menu__person { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: center; margin-bottom: 6px; padding: 5px 6px 9px; border-bottom: 1px solid var(--line); }
.tree-node-menu__person strong, .tree-node-menu__person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-node-menu__person strong { font-size: 10px; }
.tree-node-menu__person small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.tree-node-menu__section { margin: 5px 6px 3px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.tree-node-menu > :is(button,a) { display: grid; grid-template-columns: 25px minmax(0,1fr) 15px; gap: 8px; align-items: center; min-height: 49px; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; text-decoration: none; cursor: pointer; }
.tree-node-menu > :is(button,a):hover { background: rgba(112,174,248,.09); color: var(--text); }
.tree-node-menu > :is(button,a).is-active { background: rgba(82,201,181,.11); color: var(--teal); box-shadow: inset 0 0 0 1px rgba(82,201,181,.18); }
.tree-node-menu > :is(button,a) > svg { width: 16px; color: var(--gold); }
.tree-node-menu > :is(button,a) > svg:last-child { width: 12px; color: var(--muted-2); }
.tree-node-menu > :is(button,a) strong, .tree-node-menu > :is(button,a) small { display: block; }
.tree-node-menu > :is(button,a) strong { font-size: 9px; }
.tree-node-menu > :is(button,a) small { margin-top: 2px; color: var(--muted-2); font-size: 7px; }
.tree-node.is-map-node { width: 116px; }
.tree-node.is-map-node .tree-node__avatar { width: 42px; height: 42px; border-width: 1.5px; font-size: 11px; box-shadow: 0 0 0 3px rgba(6,16,24,.9), 0 7px 16px rgba(0,0,0,.28); }
.tree-node.is-map-node strong { margin-top: 5px; font-size: 8px; }
.tree-node.is-map-node small { font-size: 7px; }
.tree-node.is-map-node:hover, .tree-node.is-map-selected { z-index: 4; }
.tree-node.is-map-node:hover .tree-node__avatar, .tree-node.is-map-selected .tree-node__avatar { border-color: var(--gold-bright); box-shadow: 0 0 0 4px rgba(212,173,112,.1), 0 0 22px rgba(212,173,112,.25); }
.tree-node.is-map-related { z-index: 5; }
.tree-node.is-map-related .tree-node__avatar { border-color: var(--gold-bright); box-shadow: 0 0 0 4px rgba(212,173,112,.12), 0 0 25px rgba(112,174,248,.34); }
.tree-node.is-scope-root .tree-node__avatar { border-color: #fff0c7; box-shadow: 0 0 0 5px rgba(212,173,112,.18), 0 0 38px rgba(241,201,131,.52); }
.tree-node.is-scope-root strong { color: var(--gold-bright); }
.tree-stage.is-zoomed-out .tree-node.is-map-node { width: 34px; }
.tree-stage.is-zoomed-out .tree-node.is-map-node .tree-node__avatar { width: 24px; height: 24px; border-width: 2px; color: transparent; box-shadow: 0 0 0 2px rgba(6,16,24,.88); }
.tree-stage.is-zoomed-out .tree-node.is-map-node strong, .tree-stage.is-zoomed-out .tree-node.is-map-node small { display: none; }
.zoom-controls { position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: 36px 54px 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: rgba(5,15,22,.82); }
.zoom-controls button { border: 0; background: transparent; cursor: pointer; }
.zoom-controls output { display: grid; place-items: center; border-right: 1px solid var(--line); border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.zoom-controls svg { width: 14px; }

.insight-rail { grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-top: 8px; overflow-y: auto; }
.insight-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.insight-card--selected { border-color: rgba(212,173,112,.32); }
.insight-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--gold); font-family: "Prata", Georgia, serif; font-size: 12px; }
.insight-card__header svg { width: 15px; color: var(--muted); }
.insight-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.selected-summary { display: grid; grid-template-columns: 48px 1fr; gap: 11px; align-items: center; margin-bottom: 12px; }
.selected-summary strong { display: block; font-size: 12px; }
.selected-summary span { color: var(--muted); font-size: 10px; }
.recommendation-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: #aab4b8; font-size: 10px; }
.recommendation-list li { position: relative; padding-left: 16px; }
.recommendation-list li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }

.avatar { display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border: 1px solid rgba(212,173,112,.5); border-radius: 50%; background-color: #293944; color: #f1dfc4; font-family: "Prata", Georgia, serif; }
.avatar--mini { width: 31px; height: 31px; font-size: 10px; }
.avatar--summary { width: 48px; height: 48px; }

#view-chronicle { grid-template-columns: minmax(0, 1fr) 286px; gap: 14px; }
.chronicle-main { display: grid; grid-template-rows: auto minmax(0,1fr); min-width: 0; min-height: 0; }
.chronicle-rail { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-top: 8px; overflow-y: auto; }
.view-heading--map { min-height: 82px; }
.map-frame { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #091924; }
#family-map { position: absolute; inset: 0; }
.map-frame #family-map { transition: opacity .3s ease; }
.map-frame.is-map-empty #family-map { opacity: 0; pointer-events: none; }
.map-frame.is-map-empty .map-veil { opacity: .2; }
.map-veil { position: absolute; inset: 0; pointer-events: none; border: 18px solid rgba(3,11,17,.22); box-shadow: inset 0 0 130px rgba(2,7,11,.72); }
.maplibregl-map { font-family: "Manrope", sans-serif; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { opacity: .48; }
.maplibregl-ctrl-group { border: 1px solid var(--line)!important; background: #0b1b25!important; box-shadow: none!important; }
.maplibregl-ctrl button span { filter: invert(1); opacity: .75; }
.map-marker { position: relative; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid currentColor; border-radius: 50%; background: #07131c; color: var(--gold-bright); box-shadow: 0 0 0 5px rgba(241,201,131,.1), 0 0 22px currentColor; cursor: pointer; }
.map-marker::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.map-marker[data-type="move"] { color: var(--blue); }
.map-marker[data-type="family"] { color: var(--violet); }
.map-marker[data-type="burial"] { color: var(--teal); }
.map-marker.is-active { transform: scale(1.28); }
.map-legend { position: absolute; top: 14px; left: 14px; display: flex; gap: 16px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(6,16,24,.86); color: var(--muted); font-size: 9px; }
.legend-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px currentColor; }
.legend-dot--family { background: var(--violet); }.legend-dot--move { background: var(--blue);}.legend-dot--burial { background: var(--teal);}
.map-story-card { position: absolute; top: 70px; right: 18px; width: 255px; min-height: 180px; padding: 16px; border: 1px solid rgba(112,174,248,.55); border-radius: 13px; background: rgba(8,25,36,.94); box-shadow: 0 0 34px rgba(74,139,209,.16), var(--shadow); }
.map-story-card time { color: var(--gold); font-family: "Prata", Georgia, serif; font-size: 22px; }
.map-story-card h3 { margin: 6px 0 3px; font-family: "Prata", Georgia, serif; font-size: 17px; font-weight: 400; }
.map-story-card .story-place { display: flex; align-items: center; gap: 5px; color: var(--blue); font-size: 10px; }
.map-story-card .story-place svg { width: 13px; }
.map-story-card p { margin: 14px 0; color: #a7b2b8; font-size: 10px; line-height: 1.55; }
.map-story-card.is-empty { display: grid; align-content: center; justify-items: start; border-color: rgba(212,173,112,.34); }
.map-story-card.is-empty > svg { width: 24px; color: var(--gold); }
.map-story-card.is-empty h3 { margin-top: 12px; }
.map-story-card.is-empty p { margin-bottom: 0; }
.chronicle-empty { padding: 15px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: 9px; line-height: 1.55; }
#play-story:disabled { opacity: .42; cursor: default; }
.story-status { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--teal); font-size: 9px; }
.story-status svg { width: 13px; }
.map-timeline { position: absolute; right: 18px; bottom: 16px; left: 18px; display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5,15,22,.88); }
.timeline-stop { position: relative; display: grid; justify-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.timeline-stop::before { content: ""; width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; background: #07131c; }
.timeline-stop.is-active { color: var(--gold-bright); }
.map-stats { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 4px 7px; padding: 9px 0 13px; border-bottom: 1px solid var(--line); margin-bottom: 11px; }
.map-stats strong { color: var(--gold-bright); font-family: "Prata", Georgia, serif; font-size: 23px; font-weight: 400; }
.map-stats span { color: var(--muted); font-size: 9px; }
.chronicle-list-card { flex: 1; min-height: 220px; overflow: hidden; }
.chronicle-list { display: grid; gap: 2px; max-height: calc(100% - 30px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.chronicle-list button { display: grid; grid-template-columns: 45px 1fr; gap: 8px; width: 100%; padding: 9px 7px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.chronicle-list button:hover, .chronicle-list button.is-active { border-left-color: var(--gold); background: rgba(212,173,112,.05); color: var(--text); }
.chronicle-list time { color: var(--gold); font-family: "Prata", Georgia, serif; font-size: 11px; }
.chronicle-list strong { display: block; font-size: 10px; font-weight: 600; }
.chronicle-list small { color: var(--muted-2); font-size: 9px; }
.source-state { display: flex; align-items: center; gap: 10px; }
.source-state > svg { width: 26px; color: var(--teal); }
.source-state strong, .source-state span { display: block; }
.source-state strong { font-size: 10px; }.source-state span { color: var(--muted); font-size: 9px; }

#view-person { overflow-y: auto; }
.person-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 14px; min-height: 100%; }
.person-main { min-width: 0; }
.person-rail { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.person-hero { display: grid; grid-template-columns: 196px minmax(260px,1fr) 172px; gap: 16px; align-items: center; min-height: 250px; }
.portrait-frame { position: relative; display: grid; height: 226px; place-items: center; overflow: hidden; border: 1px solid rgba(212,173,112,.6); border-radius: 13px; background-color: #172630; }
.avatar--portrait { position: relative; width: 145px; min-width: 145px; max-width: 145px; height: 145px; min-height: 145px; max-height: 145px; aspect-ratio: 1; overflow: hidden; border-width: 2px; border-radius: 50%; font-size: 42px; box-shadow: 0 18px 45px rgba(0,0,0,.28); contain: paint; }
.avatar--portrait > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; border-radius: 0; transform: none; }
.portrait-stamps { position: absolute; right: 9px; bottom: 9px; left: 9px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 9px; }
.portrait-stamps span:first-child { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(212,173,112,.55); border-radius: 7px; color: var(--gold); background: #0b1b25; }
.portrait-stamps svg { width: 14px; }
.person-years { margin: 4px 0 18px; color: var(--muted); }
.person-intro h1 { font-size: clamp(27px, 2.4vw, 37px); line-height: 1.18; }
.person-facts { display: grid; grid-template-columns: repeat(2,minmax(170px,1fr)); gap: 10px 18px; max-width: 560px; }
.person-fact { display: grid; grid-template-columns: 25px 1fr; gap: 8px; color: var(--muted); font-size: 10px; }
.person-fact > span:first-child { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--gold); }
.person-fact svg { width: 12px; }
.person-fact strong { display: block; color: #c8cecf; font-weight: 500; }
.person-actions { display: flex; gap: 7px; margin-top: 20px; flex-wrap: wrap; }
.control-button--photo { border-color: rgba(82,201,181,.42); color: #7ad8c8; background: rgba(82,201,181,.06); }
.completion-card { display: grid; justify-items: center; gap: 10px; align-content: center; min-height: 150px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: center; }
.completion-card strong { display: block; font-size: 10px; }.completion-card p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.completion-ring { display: grid; width: 66px; height: 66px; place-items: center; border: 5px solid rgba(82,201,181,.2); border-top-color: var(--teal); border-right-color: var(--gold); border-radius: 50%; font-family: "Prata", Georgia, serif; font-size: 14px; }
.person-tabs { display: flex; gap: 28px; height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8,22,30,.7); }
.person-tabs button { position: relative; border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.person-tabs button.is-active { color: var(--gold-bright); }
.person-tabs button.is-active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--gold); }
.person-questionnaire { position: relative; margin-top: 12px; padding: 20px; overflow: hidden; border: 1px solid rgba(212,173,112,.34); border-radius: 15px; background: linear-gradient(128deg,rgba(13,31,40,.96),rgba(6,20,29,.93)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.person-questionnaire::after { content: ""; position: absolute; top: -160px; right: -130px; width: 360px; height: 360px; border: 1px solid rgba(212,173,112,.08); border-radius: 50%; box-shadow: 0 0 0 45px rgba(212,173,112,.018),0 0 0 92px rgba(212,173,112,.012); pointer-events: none; }
.questionnaire-heading { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.questionnaire-heading h2 { margin: 5px 0; font-family: "Prata",Georgia,serif; font-size: clamp(20px,2.2vw,29px); font-weight: 400; }
.questionnaire-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.questionnaire-score { display: grid; min-width: 82px; justify-items: end; }
.questionnaire-score strong { color: var(--gold-bright); font-family: "Prata",Georgia,serif; font-size: 30px; font-weight: 400; line-height: 1; }
.questionnaire-score span { margin-top: 5px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.questionnaire-progress { position: relative; z-index: 1; height: 4px; margin: 16px 0 17px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.055); }
.questionnaire-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--teal)); box-shadow: 0 0 14px rgba(82,201,181,.35); transition: width .55s cubic-bezier(.22,.8,.22,1); }
.questionnaire-items { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.questionnaire-item { --item-accent: var(--gold); display: grid; grid-template-columns: 25px 34px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 68px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4,15,22,.5); animation: questionnaire-in .35s both; animation-delay: calc(var(--question-index) * 35ms); }
@keyframes questionnaire-in { from { opacity: 0; transform: translateY(5px); } }
.questionnaire-item.is-complete { --item-accent: var(--teal); border-color: rgba(82,201,181,.22); background: rgba(82,201,181,.035); }
.questionnaire-item.is-pending { --item-accent: var(--blue); border-color: rgba(102,177,255,.25); }
.questionnaire-item__number { color: var(--muted-2); font-family: "Prata",Georgia,serif; font-size: 9px; }
.questionnaire-item__icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb,var(--item-accent) 42%,transparent); border-radius: 9px; color: var(--item-accent); background: color-mix(in srgb,var(--item-accent) 7%,transparent); }
.questionnaire-item__icon svg { width: 15px; }
.questionnaire-item__copy { min-width: 0; }
.questionnaire-item__copy strong,.questionnaire-item__copy small { display: block; }
.questionnaire-item__copy strong { font-size: 10px; }
.questionnaire-item__copy small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.questionnaire-item > button { display: inline-flex; gap: 5px; align-items: center; min-height: 30px; padding: 0 8px; border: 1px solid color-mix(in srgb,var(--item-accent) 33%,transparent); border-radius: 7px; color: var(--item-accent); background: transparent; font-size: 8px; cursor: pointer; }
.questionnaire-item > button:hover:not(:disabled) { background: color-mix(in srgb,var(--item-accent) 9%,transparent); transform: translateY(-1px); }
.questionnaire-item > button:disabled { opacity: .75; cursor: default; }
.questionnaire-item > button svg { width: 11px; }
.questionnaire-editor[hidden] { display: none; }
.questionnaire-editor { position: relative; z-index: 2; display: grid; gap: 15px; margin-top: 16px; padding: 18px; border: 1px solid rgba(212,173,112,.32); border-radius: 12px; background: rgba(3,13,20,.74); box-shadow: 0 18px 46px rgba(0,0,0,.2); }
.questionnaire-editor__heading { display: grid; grid-template-columns: 36px 1fr 32px; gap: 10px; align-items: center; }
.questionnaire-editor__icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(212,173,112,.4); border-radius: 10px; color: var(--gold); }
.questionnaire-editor__icon svg { width: 15px; }
.questionnaire-editor__heading small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .11em; }
.questionnaire-editor__heading h3 { margin: 2px 0 0; color: var(--gold-bright); font-family: "Prata",Georgia,serif; font-size: 17px; font-weight: 400; }
.questionnaire-editor__heading button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.questionnaire-editor__heading button svg { width: 13px; }
.questionnaire-editor__fields,.questionnaire-editor__footer { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.questionnaire-editor__fields[hidden] { display: none; }
.questionnaire-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; }
.questionnaire-editor label em { color: var(--muted-2); font-size: 8px; font-style: normal; }
.questionnaire-editor input,.questionnaire-editor select,.questionnaire-editor textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: var(--text); background: #07151e; font: inherit; font-size: 10px; }
.questionnaire-editor input,.questionnaire-editor select { min-height: 42px; padding: 0 11px; }
.questionnaire-editor textarea { resize: vertical; padding: 10px 11px; }
.questionnaire-editor input:focus,.questionnaire-editor select:focus,.questionnaire-editor textarea:focus { border-color: rgba(212,173,112,.6); box-shadow: 0 0 0 3px rgba(212,173,112,.055); }
.questionnaire-editor .form-wide { grid-column: 1 / -1; }
.questionnaire-editor__footer { padding-top: 13px; border-top: 1px solid var(--line); }
.questionnaire-editor__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.questionnaire-editor__actions .account-primary { width: auto; }
.questionnaire-editor__footer .form-message { grid-column: 1 / -1; margin: 0; }
.life-section { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,20,28,.75); }
.section-heading { display: flex; justify-content: space-between; align-items: center; }
.section-heading h2 { margin: 2px 0; font-family: "Prata", Georgia, serif; font-size: 18px; font-weight: 400; }
.life-timeline { display: grid; grid-auto-columns: minmax(160px,1fr); grid-auto-flow: column; gap: 9px; margin-top: 18px; padding-top: 20px; overflow-x: auto; border-top: 1px solid rgba(212,173,112,.55); }
.person-locations-section { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,19,28,.56); }
.person-locations { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 8px; margin-top: 13px; }
.life-quick-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.person-location { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 64px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(9,26,36,.74); }
.location-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(212,173,112,.35); border-radius: 50%; color: var(--gold); }
.location-mark svg, .person-location button svg { width: 13px; }
.person-location > span:nth-child(2) { display: grid; gap: 2px; }
.person-location small, .person-location time { color: var(--muted); font-size: 8px; }
.person-location strong { font-size: 10px; }
.person-location button { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--gold); font-size: 8px; cursor: pointer; }
.person-location button:disabled { color: var(--muted-2); cursor: default; }
.life-event { position: relative; min-height: 138px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #0a1a24; }
.life-event::before { content: ""; position: absolute; top: -25px; left: 17px; width: 8px; height: 8px; border: 2px solid var(--gold); border-radius: 50%; background: #07131c; }
.life-event time { color: var(--gold); font-family: "Prata", Georgia, serif; font-size: 12px; }
.life-event strong { display: block; margin: 6px 0 4px; font-size: 11px; }
.life-event p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.family-panels { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; margin-top: 10px; padding-bottom: 24px; }
.family-panel { min-height: 120px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,20,28,.75); }
.family-panel h3 { margin: 0 0 12px; color: var(--gold); font-family: "Prata", Georgia, serif; font-size: 13px; font-weight: 400; }
.relative-list { display: flex; flex-wrap: wrap; gap: 8px; }
.family-panel__heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.family-panel__heading h3 { margin: 0; }
.family-panel__heading .text-button { flex: 0 0 auto; font-size: 8px; }
.control-button--relative { border-color: rgba(212,173,112,.44); color: var(--gold-bright); background: rgba(212,173,112,.065); }
.relative-chip { display: grid; grid-template-columns: 33px 1fr; gap: 8px; align-items: center; min-width: 150px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.relative-chip strong, .relative-chip small { display: block; }.relative-chip strong { font-size: 9px; }.relative-chip small { color: var(--muted); font-size: 8px; }
.quality-meter { height: 5px; margin: 9px 0 12px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.07); }
.quality-meter span { display: block; width: 0; height: 100%; background: var(--teal); transition: width .5s ease; }
.empty-archive { display: grid; justify-items: center; padding: 14px 4px 6px; color: var(--muted); text-align: center; }
.empty-archive > svg { width: 28px; margin-bottom: 9px; color: var(--gold); }.empty-archive strong { color: #bdc5c8; font-size: 10px; }.empty-archive p { margin-top: 5px; }
.person-photo-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 12px 0; }
.person-photo-gallery:has(.empty-archive) { display: block; }
.person-photo-tile { position: relative; min-height: 92px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #07151e; }
.person-photo-tile.is-primary { grid-column: 1 / -1; min-height: 150px; border-color: rgba(212,173,112,.46); }
.person-photo-tile img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; display: block; }
.person-photo-tile figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 20px 8px 7px; color: #f1eee6; background: linear-gradient(transparent,rgba(2,9,14,.88)); font-size: 8px; }
.person-photo-add { width: 100%; justify-content: center; }

.person-photo-modal[hidden] { display: none; }
body.has-modal { overflow: hidden; }
.person-photo-modal { position: fixed; z-index: 350; inset: 0; display: grid; place-items: center; padding: 22px; }
.person-photo-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(1,8,13,.78); backdrop-filter: blur(12px); cursor: default; }
.person-photo-dialog { position: relative; width: min(560px,100%); max-height: calc(100vh - 44px); overflow-y: auto; padding: 30px; border: 1px solid rgba(212,173,112,.38); border-radius: 22px; background: linear-gradient(145deg,#0c202a,#07151e 68%); box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.035); }
.person-photo-dialog__close { position: absolute; top: 15px; right: 15px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(4,14,21,.72); cursor: pointer; }
.person-photo-dialog__close svg { width: 16px; }
.person-photo-dialog__mark { display: grid; width: 58px; height: 58px; margin-bottom: 18px; place-items: center; border: 1px solid rgba(212,173,112,.48); border-radius: 17px; color: var(--gold); background: rgba(212,173,112,.07); transform: rotate(-3deg); }
.person-photo-dialog__mark svg { width: 25px; }
.person-photo-dialog h2 { margin: 8px 0 6px; font-family: "Prata",Georgia,serif; font-size: 27px; font-weight: 400; }
.person-photo-dialog > p { margin: 0 0 20px; color: var(--muted); line-height: 1.55; }
.person-photo-form { display: grid; gap: 13px; }
.person-photo-form > input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.person-photo-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; }
.person-photo-form label em { color: var(--muted-2); font-size: 8px; font-style: normal; }
.person-photo-form input:not([type="file"]) { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--text); background: #07151e; font: inherit; font-size: 11px; }
.person-photo-form input:focus { border-color: rgba(212,173,112,.62); box-shadow: 0 0 0 3px rgba(212,173,112,.06); }
.person-photo-target { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.person-photo-target small,.person-photo-target strong { display: block; }.person-photo-target small { color: var(--muted); font-size: 8px; }.person-photo-target strong { margin-top: 2px; font-size: 11px; }
.person-photo-drop { display: grid !important; grid-template-columns: 40px minmax(0,1fr) !important; gap: 10px !important; align-items: center; min-height: 92px; padding: 15px; border: 1px dashed rgba(212,173,112,.46); border-radius: 13px; color: var(--text) !important; background: rgba(212,173,112,.035); cursor: pointer; }
.person-photo-drop:hover { border-color: var(--gold); background: rgba(212,173,112,.075); }
.person-photo-drop > svg { grid-row: 1 / 3; width: 27px; color: var(--gold); }
.person-photo-drop strong,.person-photo-drop small { display: block; }.person-photo-drop strong { font-size: 11px; }.person-photo-drop small { margin-top: 3px; color: var(--muted); font-size: 8px; }
#person-photo-file-name { grid-column: 2; overflow: hidden; color: var(--teal); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.person-photo-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }
.person-photo-form__actions .account-primary { width: auto; }
.contribution-photo-preview { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 11px; align-items: center; margin: 8px 0; }
.contribution-photo-preview img { width: 72px; height: 72px; object-fit: cover; border: 1px solid rgba(212,173,112,.38); border-radius: 10px; }
.contribution-photo-preview strong,.contribution-photo-preview small { display: block; }.contribution-photo-preview small { margin-top: 4px; color: var(--muted); }

#view-overview { overflow-y: auto; }
.overview-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; align-content: start; }
.metric-card { display: grid; min-height: 150px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.metric-card svg { width: 22px; color: var(--teal); }.metric-card strong { align-self: end; font-family: "Prata", Georgia, serif; font-size: 36px; font-weight: 400; }.metric-card span { color: var(--muted); font-size: 10px; }
.metric-card--attention svg { color: var(--gold); }
.overview-callout { grid-column: 1 / -1; min-height: 210px; padding: 28px; border: 1px solid rgba(212,173,112,.4); border-radius: 13px; background-color: #0c1d27; }
.overview-callout h2 { margin: 8px 0; font-family: "Prata", Georgia, serif; font-size: 26px; font-weight: 400; }.overview-callout p { max-width: 680px; color: var(--muted); line-height: 1.7; }.overview-callout .wide-button { width: auto; margin-top: 14px; padding: 0 16px; }

.loading-state { position: absolute; z-index: 100; inset: 68px 0 0; display: grid; place-content: center; justify-items: center; background: var(--ink); transition: opacity .35s ease, visibility .35s ease; }
.loading-state.is-hidden { opacity: 0; visibility: hidden; }
.loader-mark { width: 52px; height: 52px; margin-bottom: 18px; border: 1px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin 1.2s linear infinite; }
.loading-state strong { font-family: "Prata", Georgia, serif; font-size: 18px; font-weight: 400; }.loading-state p { color: var(--muted); font-size: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; z-index: 150; right: 22px; bottom: 22px; max-width: 340px; padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 9px; background: #10232e; color: #d6dddf; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

#view-account { display: none; grid-template-rows: auto minmax(0,1fr); overflow-y: auto; }
#view-account.is-active { display: grid; }
.account-heading { position: sticky; top: 0; z-index: 4; background: rgba(6,16,24,.93); backdrop-filter: blur(14px); }
.account-logout { display: none; }
.account-auth { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,420px); gap: clamp(50px,8vw,130px); align-content: center; align-items: center; max-width: 1180px; width: 100%; margin: 0 auto; padding: 34px 0 58px; }
.account-card { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(9,24,34,.84); box-shadow: var(--shadow); }
.account-card h2 { margin: 7px 0 10px; font-family: "Prata", Georgia, serif; font-size: clamp(20px,2.2vw,30px); font-weight: 400; }
.account-card p { color: var(--muted); font-size: 11px; line-height: 1.7; }
.account-card--welcome { position: relative; display: flex; min-height: 500px; flex-direction: column; justify-content: center; padding: 24px 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.account-card--welcome::after { content: ""; position: absolute; right: 0; bottom: 22px; left: 0; height: 1px; background: linear-gradient(90deg, rgba(212,173,112,.7), rgba(212,173,112,0)); }
.account-card--welcome > :not(.auth-coat) { position: relative; z-index: 2; }
.account-card--welcome > p, .account-card--welcome > h2 { max-width: 580px; }
.account-card--welcome h2 { margin: 0; color: #eef0eb; font-size: clamp(35px,4.1vw,61px); line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
.account-card--welcome > p { max-width: 520px; margin: 24px 0 0; color: #98a6aa; font-size: 12px; line-height: 1.85; }
.auth-coat { display: none; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin-bottom: clamp(58px,9vh,102px); }
.auth-brand .brand-emblem { width: 46px; height: 46px; border-radius: 12px; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { color: var(--gold-bright); font-family: "Prata", Georgia, serif; font-size: 19px; font-weight: 400; letter-spacing: .035em; }
.auth-brand small { margin-top: 3px; color: #79898f; font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.auth-features { display: flex; gap: 24px; margin-top: 48px; color: #9eaaad; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.auth-features span { position: relative; }
.auth-features span:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -14px; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
.is-guest .app-shell { grid-template-columns: 1fr; min-height: 100vh; }
.is-guest .sidebar, .is-guest .topbar { display: none; }
.is-guest .workspace { height: 100vh; padding: 0; }
.is-guest #view-account { isolation: isolate; position: fixed; inset: 0; display: grid; grid-template-rows: minmax(0,1fr); padding: 24px clamp(28px,7vw,120px); overflow-x: hidden; overflow-y: auto; background: radial-gradient(circle at 50% 46%, rgba(20,58,79,.24), transparent 37%), linear-gradient(120deg, #06131c 0%, #071019 58%, #050c12 100%); }
.is-guest #view-account::before { content: ""; position: absolute; z-index: -2; top: 50%; left: 50%; width: min(62vw,820px); height: min(112vh,1040px); background: url("/nasledie/assets/family-coat-of-arms-web.png") center / contain no-repeat; opacity: .13; transform: translate(-50%,-49%); filter: saturate(.72) contrast(1.08); -webkit-mask-image: radial-gradient(ellipse at center, #000 34%, rgba(0,0,0,.75) 58%, transparent 78%); mask-image: radial-gradient(ellipse at center, #000 34%, rgba(0,0,0,.75) 58%, transparent 78%); }
.is-guest #view-account::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.009) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(circle at center, #000, transparent 74%); mask-image: radial-gradient(circle at center, #000, transparent 74%); }
.is-guest .account-heading { display: none; }
.is-guest .account-auth { position: relative; z-index: 2; align-content: center; padding: 0; }
.is-guest .account-card--welcome { animation: auth-reveal .7s cubic-bezier(.2,.7,.2,1) both; }
.is-guest .auth-forms { position: relative; align-self: center; padding: 32px; border-color: rgba(212,173,112,.26); border-radius: 18px; background: rgba(7,21,30,.88); box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(22px); animation: auth-reveal .7s .1s cubic-bezier(.2,.7,.2,1) both; }
.auth-form-heading { margin-bottom: 24px; }
.auth-form-heading h2 { margin: 7px 0 0; font-size: 23px; }
@keyframes auth-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; }
.account-tabs button { min-height: 38px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.account-tabs button.is-active { background: rgba(212,173,112,.1); color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(212,173,112,.18); }
.account-form { display: none; gap: 13px; }
.account-form.is-active { display: grid; }
.account-form label, .contribution-form label { display: grid; gap: 6px; color: #aab5b9; font-size: 9px; letter-spacing: .04em; }
.account-form label em, .contribution-form label em { color: var(--muted-2); font-size: 7px; font-style: normal; letter-spacing: .02em; }
.sex-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 0; padding: 0; border: 0; }
.sex-choice legend { grid-column: 1 / -1; margin-bottom: 6px; padding: 0; color: #aab5b9; font-size: 9px; letter-spacing: .04em; }
.sex-choice legend em { color: var(--muted-2); font-size: 7px; font-style: normal; letter-spacing: .02em; }
.sex-choice label { position: relative; display: block; cursor: pointer; }
.sex-choice input { position: absolute; width: 1px!important; height: 1px!important; opacity: 0; pointer-events: none; }
.sex-choice label > span { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #07151e; color: var(--muted); transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.sex-choice label > span svg { width: 16px; }
.sex-choice input:checked + span { border-color: rgba(212,173,112,.68); background: rgba(212,173,112,.11); color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(212,173,112,.1); }
.sex-choice input:focus-visible + span { outline: 2px solid rgba(110,180,235,.86); outline-offset: 2px; }
.account-form input, .contribution-form input, .contribution-form textarea, .contribution-form select, .moderation-note { width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #07151e; color: var(--text); font: inherit; font-size: 11px; }
.account-form input, .contribution-form input, .contribution-form select { min-height: 44px; padding: 0 12px; }
.contribution-form textarea, .moderation-note { resize: vertical; padding: 10px 11px; }
.account-form input:focus, .contribution-form input:focus, .contribution-form textarea:focus, .contribution-form select:focus { border-color: rgba(212,173,112,.62); box-shadow: 0 0 0 3px rgba(212,173,112,.06); }
.account-form input:-webkit-autofill, .account-form input:-webkit-autofill:hover, .account-form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px #0a1d29 inset; caret-color: var(--text); }
.account-primary { min-height: 44px; padding: 0 17px; border: 1px solid rgba(212,173,112,.75); border-radius: 8px; background: #d2ad75; color: #10202a; font-weight: 700; cursor: pointer; }
.account-primary:hover { background: #e2c18d; }
.form-message { min-height: 18px; margin: 10px 0 0!important; }
.form-message.is-error { color: #ef9d91; }
.form-message.is-success { color: var(--teal); }
.account-dashboard { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 14px; align-items: start; padding-bottom: 32px; }
.account-dashboard[hidden] { display: none; }
.account-profile-card { position: sticky; top: 96px; display: grid; min-height: 440px; align-content: center; justify-items: center; padding: 30px 22px 28px; text-align: center; }
.avatar--account { width: 160px; height: 184px; margin-bottom: 22px; overflow: hidden; border-width: 1.5px; border-radius: 26px; background: linear-gradient(145deg, #263a46, #172833); font-size: 34px; box-shadow: 0 20px 44px rgba(0,0,0,.3), 0 0 0 6px rgba(212,173,112,.05); }
.avatar img { display: block; width: 100%; height: 100%; min-width: 100%; min-height: 100%; border-radius: inherit; object-fit: cover; }
.avatar--account img { object-position: center 24%; transform: scale(1.015); }
.account-profile-card h2 { font-size: 19px; }
.account-demographics { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 9px; }
.account-demographics:empty { display: none; }
.account-demographics span { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border: 1px solid rgba(212,173,112,.2); border-radius: 999px; background: rgba(212,173,112,.05); color: var(--muted); font-size: 8px; }
.identity-card, .contribution-card, .contributions-card, .profile-photo-reminder { grid-column: 2; }
.profile-photo-reminder[hidden] { display: none; }
.profile-photo-reminder { position: relative; display: grid; grid-template-columns: 60px minmax(0,1fr) minmax(210px,280px); gap: 18px; align-items: center; overflow: hidden; border-color: rgba(212,173,112,.45); background: linear-gradient(115deg, rgba(32,48,55,.94), rgba(8,25,35,.96)); }
.profile-photo-reminder::after { content: ""; position: absolute; right: -55px; bottom: -80px; width: 220px; height: 220px; border: 1px solid rgba(212,173,112,.15); border-radius: 50%; box-shadow: 0 0 0 28px rgba(212,173,112,.025), 0 0 0 58px rgba(212,173,112,.018); pointer-events: none; }
.photo-reminder-mark { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(212,173,112,.46); border-radius: 50%; color: var(--gold-bright); background: rgba(212,173,112,.055); }
.photo-reminder-mark svg { width: 25px; }
.photo-reminder-copy { position: relative; z-index: 1; }
.photo-reminder-copy h2 { margin: 6px 0; font-size: clamp(17px,2vw,24px); }
.photo-reminder-copy p { margin: 0; max-width: 620px; }
.profile-photo-form { position: relative; z-index: 1; display: grid; gap: 8px; }
.profile-photo-form input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.photo-drop { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; min-height: 58px; padding: 9px 11px; border: 1px dashed rgba(212,173,112,.4); border-radius: 9px; background: rgba(4,14,21,.45); cursor: pointer; }
.photo-drop:hover { border-color: var(--gold); background: rgba(212,173,112,.06); }
.photo-drop > svg { width: 20px; color: var(--gold); }
.photo-drop strong, .photo-drop small { display: block; }
.photo-drop strong { color: #d2d7d8; font-size: 9px; }
.photo-drop small, .photo-file-name { color: var(--muted-2); font-size: 7px; }
.photo-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-photo-form .account-primary { width: 100%; }
.identity-search { display: grid; gap: 10px; margin-top: 16px; }
.identity-search label { display: grid; gap: 6px; color: #aab5b9; font-size: 9px; }
.identity-search input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #07151e; color: var(--text); }
.identity-results { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.identity-result { display: grid; grid-template-columns: 36px 1fr auto; gap: 9px; align-items: center; min-height: 52px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5,15,22,.5); text-align: left; cursor: pointer; }
.identity-result:hover, .identity-result.is-selected { border-color: rgba(212,173,112,.55); background: rgba(212,173,112,.07); }
.identity-result strong, .identity-result span { display: block; }
.identity-result span, .identity-result small { color: var(--muted); font-size: 9px; }
.identity-linked { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; border: 1px solid rgba(82,201,181,.28); border-radius: 9px; }
.identity-linked strong, .identity-linked span { display: block; }
.identity-linked span { color: var(--muted); font-size: 9px; }
.contribution-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.contribution-form .form-wide { grid-column: 1 / -1; }
.new-person-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; border: 1px solid rgba(212,173,112,.2); border-radius: 10px; background: rgba(212,173,112,.035); }
.new-person-fields[hidden] { display: none; }
.new-relative-context { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(82,201,181,.25); border-radius: 9px; background: rgba(82,201,181,.045); }
.new-relative-context small, .new-relative-context strong { display: block; }
.new-relative-context small { margin-bottom: 3px; color: var(--teal); font-size: 8px; }
.new-relative-context strong { font-size: 11px; }
.life-event-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; border: 1px solid rgba(82,201,181,.2); border-radius: 10px; background: rgba(82,201,181,.035); }
.life-event-fields[hidden] { display: none; }
.identity-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; border: 1px solid rgba(212,173,112,.24); border-radius: 10px; background: linear-gradient(135deg, rgba(212,173,112,.055), rgba(82,201,181,.025)); }
.identity-fields[hidden] { display: none; }
.identity-data-note { grid-column: 1 / -1; margin: 0; color: var(--muted-2); font-size: 8px; line-height: 1.5; }
.cemetery-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 13px; border: 1px solid rgba(212,173,112,.25); border-radius: 9px; background: rgba(212,173,112,.045); }
.cemetery-fields[hidden] { display: none; }
.address-picker { position: relative; padding: 13px; border: 1px solid rgba(82,201,181,.2); border-radius: 12px; background: linear-gradient(135deg,rgba(82,201,181,.045),rgba(212,173,112,.025)); }
.address-input-wrap { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; }
.address-input-wrap > svg { position: absolute; z-index: 2; left: 15px; width: 18px; color: var(--teal); pointer-events: none; }
.address-input-wrap > input { grid-column: 1 / -1; min-width: 0; min-height: 58px!important; padding: 0 16px 0 46px!important; border-color: rgba(82,201,181,.34)!important; border-radius: 10px!important; font-size: 13px!important; background: rgba(4,17,25,.92)!important; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.address-input-wrap > input::placeholder { color: #788a91; }
.address-input-wrap > input:focus { border-color: rgba(82,201,181,.72)!important; box-shadow: 0 0 0 4px rgba(82,201,181,.08),inset 0 1px rgba(255,255,255,.035)!important; }
.address-source { color: var(--muted-2); font-size: 8px; letter-spacing: 0; }
.address-source a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.address-results { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; grid-column: 1 / -1; display: none; width: 100%; max-height: 360px; padding: 8px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 11px; background: #07151e; box-shadow: var(--shadow); }
.address-results.is-open { display: grid; }
.address-result { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; align-items: start; min-height: 58px; padding: 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.address-result:hover { background: rgba(82,201,181,.08); }
.address-result > svg { width: 17px; margin-top: 2px; color: var(--teal); }
.address-result strong, .address-result small { display: block; }
.address-result strong { font-size: 11px; line-height: 1.45; }
.address-result small { margin-top: 4px; color: var(--muted-2); font-size: 8px; }
.address-source { display: block; margin-top: 1px; color: var(--muted-2); font-size: 8px; line-height: 1.5; }
.address-empty { padding: 15px; color: var(--muted); font-size: 9px; text-align: center; }
.geocode-note { display: flex; align-items: center; gap: 8px; margin: 0!important; color: var(--teal)!important; font-size: 9px!important; }
.geocode-note svg { width: 15px; }
.contribution-form .account-primary { justify-self: start; }
.pending-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); font-size: 9px; }
.pending-badge svg { width: 14px; }
.pending-badge.is-direct { color: var(--teal); }
.queue-count { display: grid; min-width: 30px; height: 30px; padding: 0 8px; place-items: center; border: 1px solid var(--line); border-radius: 15px; color: var(--gold); }
.inbox-filters { display: flex; gap: 5px; margin-top: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.inbox-filters button { min-height: 31px; padding: 0 11px; border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--muted); font-size: 8px; cursor: pointer; }
.inbox-filters button:hover { color: var(--text); background: rgba(212,173,112,.045); }
.inbox-filters button.is-active { border-color: rgba(212,173,112,.28); background: rgba(212,173,112,.09); color: var(--gold-bright); }
.contribution-list { display: grid; gap: 9px; margin-top: 16px; }
.contribution-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,15,22,.58); transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.contribution-item.is-inbox-target { border-color: rgba(212,173,112,.65); background: rgba(212,173,112,.08); box-shadow: 0 0 0 4px rgba(212,173,112,.06), 0 14px 38px rgba(0,0,0,.2); }
.contribution-item h3 { margin: 0 0 5px; font-size: 12px; }
.contribution-item p { margin: 3px 0; }
.contribution-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 9px; }
.status-chip { align-self: start; padding: 5px 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--gold); font-size: 8px; text-transform: uppercase; }
.status-chip[data-status="approved"] { color: var(--teal); }
.status-chip[data-status="rejected"] { color: #df8d83; }
.moderation-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(160px,1fr) auto auto; gap: 8px; }
.moderation-actions button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.moderation-actions button[data-decision="approved"] { border-color: rgba(62,190,163,.38); color: var(--teal); }
.moderation-actions button[data-decision="rejected"] { border-color: rgba(223,141,131,.38); color: #df8d83; }
.empty-contributions { padding: 22px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }
.new-person-summary { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.new-person-summary strong { color: var(--text); font-size: 13px; }

@media (max-width: 1180px) {
  :root { --sidebar: 204px; }
  .brand strong { font-size: 13px; }
  #view-tree, #view-chronicle { grid-template-columns: minmax(0,1fr) 240px; }
  .person-hero { grid-template-columns: 190px 1fr; }
  .completion-card { grid-column: 1 / -1; width: 280px; }
  .person-layout { grid-template-columns: minmax(0,1fr) 240px; }
}

@media (max-width: 920px) {
  body { overflow: auto; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 120; display: block; width: 100%; height: 62px; padding: 7px 10px; overflow: visible; border-top: 1px solid var(--line); border-right: 0; }
  .brand, .secondary-nav, .nav-section-label, .sidebar-card { display: none; }
  .primary-nav { grid-template-columns: repeat(5,1fr); padding: 0; border: 0; }
  .primary-nav .admin-only { display: none!important; }
  .nav-item { display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 48px; padding: 0 3px; font-size: 9px; text-align: center; }
  .nav-item .nav-tail { display: none; }
  .workspace { height: auto; min-height: 100vh; padding-bottom: 62px; overflow: visible; }
  .topbar { position: sticky; top: 0; background: rgba(6,16,24,.96); }
  .profile-chip > span:not(.avatar) { display: none; }
  .view { position: relative; inset: auto; min-height: calc(100vh - 130px); padding: 4px 14px 18px; }
  #view-tree, #view-chronicle { grid-template-columns: 1fr; grid-template-rows: auto auto 640px auto; }
  #view-tree .insight-rail { grid-column: 1; grid-row: 4; display: grid; grid-template-columns: repeat(3,1fr); padding-top: 10px; }
  .chronicle-rail { display: grid; grid-template-columns: repeat(3,1fr); }
  .person-layout { grid-template-columns: 1fr; }
  .person-rail { display: grid; grid-template-columns: repeat(3,1fr); }
  .person-hero { grid-template-columns: 180px 1fr; }
  .overview-grid { grid-template-columns: repeat(2,1fr); }
  .loading-state { position: fixed; inset: 68px 0 62px; }
  .account-auth { grid-template-columns: 1fr; padding-top: 10px; }
  .is-guest #view-account { padding: 28px; overflow-y: auto; }
  .is-guest #view-account::before { width: min(104vw,680px); height: 90vh; opacity: .1; }
  .is-guest .account-auth { align-content: start; gap: 22px; max-width: 580px; padding: 24px 0; }
  .is-guest .account-card--welcome { min-height: auto; padding: 10px 4px 28px; }
  .is-guest .account-card--welcome::after { bottom: 0; }
  .is-guest .account-card--welcome h2 { font-size: clamp(31px,7vw,44px); }
  .is-guest .account-card--welcome > p { margin-top: 15px; }
  .is-guest .auth-brand { margin-bottom: 34px; }
  .account-dashboard { grid-template-columns: 1fr; }
  .account-profile-card { position: static; min-height: 0; grid-template-columns: auto 1fr; align-content: normal; justify-items: start; text-align: left; }
  .avatar--account { width: 118px; height: 132px; margin: 0; border-radius: 20px; }
  .identity-card, .contribution-card, .contributions-card, .profile-photo-reminder { grid-column: 1; }
}

@media (max-width: 640px) {
  .person-locations-section .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .life-quick-actions { justify-content: flex-start; }
  .person-photo-modal { padding: 10px; }
  .person-photo-dialog { max-height: calc(100vh - 20px); padding: 24px 18px; border-radius: 16px; }
  .person-photo-form__actions { display: grid; grid-template-columns: 1fr; }
  .person-photo-form__actions .account-primary { width: 100%; }
  .topbar { padding: 10px 12px; }
  .search-box { width: calc(100vw - 146px); }
  .search-box kbd, .icon-button:not(.top-logout) { display: none; }
  .top-logout { display: inline-flex; }
  .inbox-drawer { top: 64px; right: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 132px); padding: 13px; border-radius: 14px; }
  .inbox-preview-list { max-height: calc(100dvh - 350px); }
  .inbox-preview-item { grid-template-columns: 32px minmax(0,1fr); }
  .inbox-preview-item time { display: none; }
  .view-heading { align-items: flex-start; gap: 12px; flex-direction: column; }
  .view-heading h1 { font-size: 28px; }
  #view-tree { grid-template-rows: auto 34px 760px auto; }
  .generation-rail { justify-content: flex-start; gap: 8px; padding: 0 4px 6px; overflow-x: auto; }
  .generation-step { flex: 0 0 38px; min-width: 38px; }
  .tree-node { width: 88px; padding: 3px; }
  .tree-node__avatar { width: 43px; height: 43px; font-size: 11px; box-shadow: 0 0 0 3px rgba(6,16,24,.9), 0 7px 16px rgba(0,0,0,.35); }
  .tree-node strong { margin-top: 5px; font-size: 8px; }
  .tree-node small { font-size: 7px; }
  .tree-node.is-focus { width: 158px; padding: 12px 10px 10px; }
  .tree-node.is-focus .tree-node__avatar { width: 68px; height: 68px; font-size: 17px; }
  .tree-node.is-focus strong { margin-top: 8px; font-size: 14px; }
  .tree-node[data-relation="spouse"] { display: none; }
  .tree-stage.has-many-children .tree-node[data-relation="child"] { width: 82px; }
  .tree-stage.has-many-children .tree-node[data-relation="child"] .tree-node__avatar { width: 40px; height: 40px; }
  .focus-actions { margin-top: 7px; }
  .focus-actions span { width: 25px; height: 23px; }
  .tree-minimap { width: 150px; height: 76px; }
  .tree-overview { top: 10px; left: 10px; padding: 8px 10px; }
  .tree-overview small { display: none; }
  #view-tree .insight-rail, .chronicle-rail, .person-rail { grid-template-columns: 1fr; }
  .map-story-card { top: 64px; right: 12px; width: 230px; }
  .map-legend { right: 12px; gap: 8px; overflow-x: auto; }
  .person-hero { grid-template-columns: 1fr; padding-top: 10px; }
  .portrait-frame { height: 200px; }
  .person-facts { grid-template-columns: 1fr; }
  .completion-card { grid-column: auto; width: 100%; }
  .person-tabs { gap: 14px; overflow-x: auto; }
  .family-panels { grid-template-columns: 1fr; }
  .overview-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 125px; }
  .overview-callout { grid-column: 1 / -1; }
  .account-card { padding: 16px; }
  .is-guest #view-account { position: fixed; padding: 16px; overflow-y: auto; }
  .is-guest #view-account::before { top: 39%; width: 130vw; height: 82vh; opacity: .085; }
  .is-guest .account-auth { gap: 14px; padding: 8px 0 26px; }
  .is-guest .account-card--welcome { padding: 6px 3px 22px; }
  .is-guest .account-card--welcome > p { display: none; }
  .is-guest .account-card--welcome h2 { font-size: clamp(28px,9vw,38px); line-height: 1.14; }
  .is-guest .auth-brand { margin-bottom: 26px; }
  .is-guest .auth-forms { padding: 22px 18px; border-radius: 14px; }
  .auth-form-heading { margin-bottom: 18px; }
  .auth-form-heading h2 { font-size: 20px; }
  .auth-features { display: none; }
  .profile-photo-reminder { grid-template-columns: 46px 1fr; gap: 12px; }
  .photo-reminder-mark { width: 44px; height: 44px; }
  .profile-photo-form { grid-column: 1 / -1; }
  .contribution-form { grid-template-columns: 1fr; }
  .contribution-form .form-wide { grid-column: 1; }
  .new-person-fields { grid-template-columns: 1fr; }
  .life-event-fields { grid-template-columns: 1fr; }
  .identity-fields { grid-template-columns: 1fr; }
  .cemetery-fields { grid-template-columns: 1fr; }
  .moderation-actions { grid-template-columns: 1fr 1fr; }
  .moderation-note { grid-column: 1 / -1; }
}

body.tree-immersive { overflow: hidden; }
body.tree-immersive .app-shell { display: block; min-height: 100dvh; }
body.tree-immersive .sidebar,
body.tree-immersive .topbar,
body.tree-immersive #view-tree > .insight-rail { display: none!important; }
body.tree-immersive .workspace { height: 100dvh; min-height: 100dvh; padding: 0; overflow: hidden; }
body.tree-immersive #view-tree,
#view-tree:fullscreen,
#view-tree:-webkit-full-screen { position: fixed; z-index: 1000; inset: 0; display: grid; width: 100vw; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; grid-template-columns: 1fr; grid-template-rows: 1fr; background: #061018; }
body.tree-immersive #view-tree > .view-heading { position: absolute; z-index: 25; top: 14px; right: 14px; display: block; min-height: 0; padding: 0; }
body.tree-immersive #view-tree > .view-heading > div:first-child { display: none; }
body.tree-immersive #view-tree > .view-heading .view-actions { padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,15,22,.9); box-shadow: 0 14px 36px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
body.tree-immersive #view-tree > .tree-stage { grid-column: 1; grid-row: 1; width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
body.tree-immersive .tree-overview { top: 72px; left: 108px; }
body.tree-immersive .tree-minimap { left: 108px; }

html[data-theme="light"] {
  color-scheme: light;
  --ink: #f3eadc;
  --ink-2: #eee1cf;
  --ink-3: #e5d3b9;
  --panel: rgba(255,250,241,.9);
  --panel-solid: #fff9ee;
  --line: rgba(88,61,38,.15);
  --line-strong: rgba(88,61,38,.26);
  --text: #30261d;
  --muted: #776a5d;
  --muted-2: #9a8a79;
  --gold: #9c672c;
  --gold-bright: #744418;
  --teal: #287f73;
  --blue: #3e78ad;
  --violet: #755f9d;
  --rose: #a6574d;
  --shadow: 0 24px 70px rgba(86,57,32,.16);
}
html[data-theme="light"] body { background: #f3eadc; color: var(--text); }
html[data-theme="light"] .sidebar { background-color: #eadcc7; background-image: radial-gradient(circle at 18% 10%, rgba(255,255,255,.52), transparent 27%), url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='.6' fill='%23715338' fill-opacity='.09'/%3E%3C/svg%3E"); }
html[data-theme="light"] .workspace { background-color: #f3eadc; background-image: radial-gradient(circle at 72% 3%, rgba(255,255,255,.72), transparent 34%), url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='17' r='.65' fill='%23715338' fill-opacity='.08'/%3E%3Ccircle cx='41' cy='9' r='.45' fill='%23715338' fill-opacity='.06'/%3E%3C/svg%3E"); }
html[data-theme="light"] .nav-item { color: #6e6257; }
html[data-theme="light"] .nav-item:hover { background: rgba(106,70,36,.055); color: #30261d; }
html[data-theme="light"] .nav-item.is-active { border-color: rgba(139,88,38,.38); background: rgba(156,103,44,.1); color: #744418; }
html[data-theme="light"] .sidebar-card { background: rgba(255,249,239,.58); }
html[data-theme="light"] .search-box,
html[data-theme="light"] .profile-chip,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .theme-trigger,
html[data-theme="light"] .control-button,
html[data-theme="light"] .wide-button { background: rgba(255,251,244,.76); }
html[data-theme="light"] .search-results,
html[data-theme="light"] .theme-menu,
html[data-theme="light"] .tree-map-results,
html[data-theme="light"] .tree-node-menu,
html[data-theme="light"] .inbox-drawer { background: rgba(255,250,241,.98); }
html[data-theme="light"] .search-result:hover,
html[data-theme="light"] .tree-map-result:hover { background: rgba(62,120,173,.09); }
html[data-theme="light"] .tree-stage { background: #eadfce; box-shadow: inset 0 0 85px rgba(105,72,43,.1); }
html[data-theme="light"] .tree-stars { opacity: .34; filter: sepia(1) saturate(.45); }
html[data-theme="light"] .tree-links path { stroke: rgba(50,104,153,.58); }
html[data-theme="light"] .tree-links path.spouse { stroke: rgba(139,88,38,.68); }
html[data-theme="light"] .tree-node__avatar,
html[data-theme="light"] .avatar { background: #f8efdf; color: #4d3928; }
html[data-theme="light"] .tree-node__avatar { box-shadow: 0 0 0 5px rgba(234,223,206,.94), 0 9px 22px rgba(83,54,29,.17); }
html[data-theme="light"] .tree-node__avatar::after { border-color: #eadfce; }
html[data-theme="light"] .tree-node.is-focus { border-color: rgba(62,120,173,.65); background: rgba(255,251,244,.96); box-shadow: 0 0 0 4px rgba(62,120,173,.08), 0 22px 58px rgba(77,48,25,.16); }
html[data-theme="light"] .tree-node.is-map-node .tree-node__avatar { box-shadow: 0 0 0 3px rgba(234,223,206,.94), 0 7px 16px rgba(83,54,29,.15); }
html[data-theme="light"] .tree-overview,
html[data-theme="light"] .tree-minimap,
html[data-theme="light"] .zoom-controls,
html[data-theme="light"] .tree-map-search,
html[data-theme="light"] .tree-map-fit { background: rgba(255,250,241,.9); box-shadow: 0 14px 38px rgba(85,55,30,.13); }
html[data-theme="light"] .tree-overview span { color: #665b50; }
html[data-theme="light"] .tree-generation-scale { border-right-color: rgba(139,88,38,.2); background: linear-gradient(90deg, rgba(239,227,209,.98), rgba(239,227,209,.9) 72%, rgba(239,227,209,0)); }
html[data-theme="light"] .generation-scale-step { background: rgba(255,250,241,.84); }
html[data-theme="light"] .generation-scale-step strong { color: #6f421b; }
html[data-theme="light"] .generation-scale-step:hover,
html[data-theme="light"] .generation-scale-step.is-current { background: #fff9ee; }
html[data-theme="light"] .insight-card,
html[data-theme="light"] .completion-card,
html[data-theme="light"] .account-card { background: rgba(255,250,241,.82); }
html[data-theme="light"] .person-tabs,
html[data-theme="light"] .contribution-item,
html[data-theme="light"] .identity-result { background: rgba(255,250,241,.55); }
html[data-theme="light"] .person-questionnaire { background: linear-gradient(128deg,rgba(255,250,241,.96),rgba(239,225,206,.91)); }
html[data-theme="light"] .questionnaire-item { background: rgba(255,255,255,.35); }
html[data-theme="light"] .questionnaire-item.is-complete { background: rgba(40,127,115,.055); }
html[data-theme="light"] .questionnaire-editor { background: rgba(255,250,241,.82); }
html[data-theme="light"] .questionnaire-editor input,
html[data-theme="light"] .questionnaire-editor select,
html[data-theme="light"] .questionnaire-editor textarea { color: var(--text); background: #fffaf1; }
html[data-theme="light"] .inbox-badge { border-color: #f3eadc; background: #8a5727; color: #fff9ef; }
html[data-theme="light"] .inbox-preview-item:hover { background: rgba(139,88,38,.07); }
html[data-theme="light"] .inbox-drawer__summary { background: linear-gradient(115deg, rgba(40,127,115,.08), rgba(156,103,44,.055)); }
html[data-theme="light"] .inbox-open-center { background: rgba(156,103,44,.08); }
html[data-theme="light"] .portrait-frame { background: #eadbc4; }
html[data-theme="light"] .portrait-stamps span:first-child { background: #fff9ee; }
html[data-theme="light"] .person-fact strong,
html[data-theme="light"] .photo-drop strong { color: #4c4036; }
html[data-theme="light"] .map-frame { background: #e6dac8; }
html[data-theme="light"] #family-map { filter: sepia(.18) saturate(.72) brightness(1.07) contrast(.92); }
html[data-theme="light"] .map-veil { border-color: rgba(105,72,43,.08); box-shadow: inset 0 0 105px rgba(99,65,36,.2); }
html[data-theme="light"] .maplibregl-ctrl-group { background: #fff9ee!important; }
html[data-theme="light"] .maplibregl-ctrl button span { filter: none; }
html[data-theme="light"] .map-marker { background: #fff9ee; }
html[data-theme="light"] .map-legend,
html[data-theme="light"] .map-story-card,
html[data-theme="light"] .map-timeline { background: rgba(255,250,241,.92); }
html[data-theme="light"] .map-story-card p { color: #685d53; }
html[data-theme="light"] .timeline-stop::before { background: #fff9ee; }
html[data-theme="light"] .account-heading { background: rgba(243,234,220,.94); }
html[data-theme="light"] .account-form label,
html[data-theme="light"] .contribution-form label,
html[data-theme="light"] .identity-search label { color: #6e6257; }
html[data-theme="light"] .sex-choice legend { color: #6e6257; }
html[data-theme="light"] .sex-choice label > span { background: #fffaf1; }
html[data-theme="light"] .identity-fields { border-color: rgba(139,88,38,.2); background: linear-gradient(135deg, rgba(212,173,112,.12), rgba(255,255,255,.3)); }
html[data-theme="light"] .account-form input,
html[data-theme="light"] .contribution-form input,
html[data-theme="light"] .contribution-form textarea,
html[data-theme="light"] .contribution-form select,
html[data-theme="light"] .moderation-note,
html[data-theme="light"] .identity-search input,
html[data-theme="light"] .address-results { background: #fffaf1; color: var(--text); }
html[data-theme="light"] .address-picker { border-color: rgba(28,129,111,.2); background: linear-gradient(135deg,rgba(28,129,111,.055),rgba(178,125,58,.035)); }
html[data-theme="light"] .address-input-wrap > input { color: var(--text); background: #fffaf1!important; }
html[data-theme="light"] .account-form input:-webkit-autofill,
html[data-theme="light"] .account-form input:-webkit-autofill:hover,
html[data-theme="light"] .account-form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px #fffaf1 inset; caret-color: var(--text); }
html[data-theme="light"] .profile-photo-reminder { background: linear-gradient(115deg, rgba(255,249,238,.96), rgba(238,223,201,.94)); }
html[data-theme="light"] .photo-drop { background: rgba(255,255,255,.32); }
html[data-theme="light"] .person-photo-dialog { background: linear-gradient(145deg,#fffaf0,#eee1cf 72%); box-shadow: 0 30px 90px rgba(67,48,28,.24); }
html[data-theme="light"] .person-photo-form input:not([type="file"]),
html[data-theme="light"] .person-photo-tile { color: #312a23; background: rgba(255,255,255,.55); }
html[data-theme="light"] .person-photo-target,
html[data-theme="light"] .person-photo-drop { background: rgba(255,255,255,.35); }
html[data-theme="light"] .toast { background: #fff7e9; color: #3e3126; }
html[data-theme="light"] .is-guest #view-account { background: radial-gradient(circle at 50% 46%, rgba(195,155,102,.2), transparent 39%), linear-gradient(120deg, #f4eadb 0%, #efe1ce 58%, #e8d7bd 100%); }
html[data-theme="light"] .is-guest #view-account::after { background-image: linear-gradient(rgba(87,57,32,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(87,57,32,.02) 1px, transparent 1px); }
html[data-theme="light"] .is-guest .auth-forms { border-color: rgba(139,88,38,.25); background: rgba(255,250,241,.88); box-shadow: 0 28px 80px rgba(86,57,32,.2), inset 0 1px rgba(255,255,255,.5); }
html[data-theme="light"] .account-card--welcome h2 { color: #37291e; }
html[data-theme="light"] .account-card--welcome > p { color: #6f6357; }
html[data-theme="light"] .auth-brand small,
html[data-theme="light"] .auth-features { color: #817365; }
html[data-theme="light"] body.tree-immersive #view-tree,
html[data-theme="light"] #view-tree:fullscreen,
html[data-theme="light"] #view-tree:-webkit-full-screen { background: #eadfce; }
html[data-theme="light"] body.tree-immersive #view-tree > .view-heading .view-actions { background: rgba(255,250,241,.91); box-shadow: 0 14px 36px rgba(85,55,30,.13); }

@media (max-width: 1080px) {
  body.tree-immersive .tree-map-navigation { right: 14px; left: 108px; width: auto; min-width: 0; transform: none; }
  body.tree-immersive #view-tree > .view-heading { top: auto; right: 14px; bottom: 58px; }
  body.tree-immersive #view-tree > .view-heading #center-tree,
  body.tree-immersive #view-tree > .view-heading #open-current-person { display: none; }
}

@media (max-width: 640px) {
  .person-questionnaire { padding: 15px; }
  .questionnaire-items { grid-template-columns: 1fr; }
  .questionnaire-item { grid-template-columns: 22px 32px minmax(0,1fr); }
  .questionnaire-item > button { grid-column: 2 / -1; justify-content: center; }
  .questionnaire-editor__fields,.questionnaire-editor__footer { grid-template-columns: 1fr; }
  .questionnaire-editor .form-wide,.questionnaire-editor__actions,.questionnaire-editor__footer .form-message { grid-column: 1; }
  .theme-trigger { width: 38px; padding: 0; justify-content: center; }
  .theme-trigger [data-theme-label], .theme-trigger svg:last-child { display: none; }
  .theme-switcher--guest { top: 12px; right: 12px; }
  body.tree-immersive .tree-generation-scale { width: 78px; }
  body.tree-immersive .generation-scale-title { left: 8px; font-size: 7px; }
  body.tree-immersive .generation-scale-step { left: 4px; grid-template-columns: 25px 1fr; gap: 3px; width: 68px; padding: 3px 4px; }
  body.tree-immersive .generation-scale-step strong { font-size: 11px; }
  body.tree-immersive .tree-map-navigation { top: 10px; right: 10px; left: 86px; }
  body.tree-immersive .tree-map-fit { width: 40px; padding: 0; justify-content: center; }
  body.tree-immersive .tree-map-fit span,
  body.tree-immersive .tree-map-search kbd { display: none; }
  body.tree-immersive .tree-overview { top: 62px; left: 86px; }
  body.tree-immersive .tree-minimap { left: 86px; width: 130px; }
  body.tree-immersive #view-tree > .view-heading { right: 10px; bottom: 52px; }
  body.tree-immersive #toggle-full-tree { min-width: 112px; justify-content: center; }
}

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