:root{
  --bg:#f5efe4; --surface:#fffdf8; --surface2:#f0e8da; --ink:#2b2520; --muted:#7a6f63; --line:#ddd1bd;
  --accent:#8a5a2b; --accent-ink:#fff; --male:#4f79a8; --female:#b0587a; --unk:#8c8c8c;
  --focus:#d8962f; --hidden:#e7e0d3; --danger:#a83a32; --edge:#b4a389;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#1c1916; --surface:#28241f; --surface2:#322c26; --ink:#eee5d8; --muted:#a89c8c; --line:#433b32;
    --accent:#d39a5b; --accent-ink:#1c1916; --hidden:#35302a; --edge:#73685a; --male:#7fa3cc; --female:#d48aa6; }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);min-height:100vh;display:flex;flex-direction:column}
body.app{height:100vh}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
button,.btn{cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 11px;text-decoration:none;color:var(--ink);display:inline-block}
button:hover,.btn:hover{border-color:var(--accent)}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.danger{color:var(--danger);border-color:var(--danger);background:transparent}
button:disabled{opacity:.45;cursor:default}
input,select,textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 8px}
textarea{min-height:110px;resize:vertical}
label{display:block;font-size:12px;color:var(--muted);margin:8px 0 3px}
.muted{color:var(--muted)}
.grow{flex:1}

header.top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{font:600 19px var(--serif);white-space:nowrap;display:flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent);font-family:var(--sans);font-weight:700;letter-spacing:.02em;margin-left:-6px}
nav.main{display:flex;gap:2px;background:var(--surface2);border-radius:9px;padding:3px;max-width:100%;overflow-x:auto;scrollbar-width:none}
nav.main a{padding:5px 12px;border-radius:7px;color:var(--ink);text-decoration:none;white-space:nowrap}
nav.main a.on{background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.user{display:flex;gap:8px;align-items:center;font-size:13px}
.user form{margin:0}

/* Главная */
.hero{padding:56px 24px 40px;text-align:center;background:linear-gradient(180deg,var(--surface2),var(--bg))}
.hero h1{font:600 40px/1.15 var(--serif);margin:0 0 12px}
.hero p{max-width:680px;margin:0 auto;color:var(--muted);font-size:16px;white-space:pre-wrap}
.stats{display:flex;justify-content:center;gap:36px;margin-top:28px;flex-wrap:wrap}
.stats div{font:600 28px var(--serif)} .stats small{display:block;font:12px var(--sans);color:var(--muted)}
.section{max-width:1040px;margin:0 auto;padding:24px 16px;width:100%}
.section h2{font:600 24px var(--serif);margin:0 0 14px}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none}
.pcard:hover{border-color:var(--accent)}
.bigava{width:64px;height:64px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font:600 22px var(--sans);color:var(--muted);overflow:hidden;flex:none}
.bigava img{width:100%;height:100%;object-fit:cover}
.pcard .bigava{width:48px;height:48px;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line);border-radius:14px;padding:2px 9px;font-size:12px;cursor:pointer;background:var(--surface);color:var(--ink);text-decoration:none}
.chip:hover{border-color:var(--accent)}
.chip b{font-weight:500;color:var(--muted);margin-right:3px}
.timeline{border-left:2px solid var(--line);margin-left:8px}
.tl{position:relative;padding:4px 0 10px 18px}
.tl:before{content:"";position:absolute;left:-6px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.tl b{font-family:var(--serif);margin-right:8px}
footer{margin-top:auto;text-align:center;font-size:12px;color:var(--muted);padding:20px}

/* Страница человека */
.profile{max-width:760px;margin:0 auto;padding:32px 16px;width:100%}
.phead{display:flex;gap:16px;align-items:center;margin-bottom:10px}
.profile .bigava{width:120px;height:120px;font-size:36px}
.pname{font:600 18px/1.25 var(--serif)}
.profile .pname{font-size:30px}
h3{font:600 13px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 6px}
.bio{white-space:pre-wrap}
.facts div{margin:2px 0}

/* История правок */
table.history{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.history td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
table.history tr:first-child td{border-top:0}
table.history .when{white-space:nowrap;color:var(--muted);font-size:13px}
table.history .act{text-align:right;white-space:nowrap}
table.history tr.undone{opacity:.55}
.small{font-size:12px}

/* Фотоархив */
.chip.on{border-color:var(--accent);background:var(--surface2)}
.upload{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.upload-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.upload-row select,.upload-row input{width:auto;min-width:220px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none}
.gcard:hover{border-color:var(--accent)}
.gcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface2);filter:saturate(.92)}
.gcap{padding:8px 10px 2px;font-size:13px}
.gppl{padding:0 10px 9px;font-size:12px;color:var(--muted)}
.gppl.warn{color:var(--focus)}
.photo-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.photo-stage{position:relative;line-height:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);touch-action:none}
.photo-stage img{width:100%;height:auto;display:block}
.photo-stage.tagging{cursor:crosshair}
.tagbox{position:absolute;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.35);border-radius:6px;opacity:0;transition:opacity .2s}
.photo-stage:hover .tagbox,.tagbox.on{opacity:1}
.tagbox span{position:absolute;left:0;top:100%;margin-top:4px;white-space:nowrap;background:rgba(0,0,0,.72);color:#fff;font-size:12px;line-height:1.3;padding:2px 6px;border-radius:4px}
.tagdraw{position:absolute;border:2px dashed var(--focus);background:rgba(216,150,47,.15);border-radius:6px;pointer-events:none}
.photo-info .chip a{color:inherit;text-decoration:none}
.untag{cursor:pointer;margin-left:6px;color:var(--danger);font-weight:600}
.photo-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.photo-strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
@media (max-width:820px){ .photo-wrap{grid-template-columns:1fr} }

/* Истории */
.stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:16px}
.story-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);text-decoration:none;display:block}
.story-card:hover{border-color:var(--accent)}
.st-title{font:600 18px/1.3 var(--serif)}
.st-excerpt{color:var(--muted);margin:8px 0}
.story-h{font:600 30px/1.2 var(--serif);margin:6px 0}
.story-body{font:17px/1.7 var(--serif);margin-top:16px}
.story-audio{margin:16px 0}.story-audio audio{width:100%}
.recorder{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.recorder audio{max-width:100%}
#recBtn.rec{background:var(--danger);border-color:var(--danger)}
.people-pick{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--surface);margin-top:6px}
.people-pick ul{list-style:none;margin:0;padding:0}
.people-pick label{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:14px;margin:4px 0}
.people-pick input{width:auto}

/* Приглашения */
.invite-form{display:grid;grid-template-columns:2fr 1.4fr auto;gap:10px;align-items:end;margin:12px 0 4px}
.invite{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0}
.invite-link{display:flex;gap:6px;margin:8px 0}
.invite-actions{display:flex;gap:6px;flex-wrap:wrap}
.invite-actions form{margin:0}
.notice{color:var(--accent)}
@media (max-width:820px){ .invite-form{grid-template-columns:1fr} }

/* Вход */
.boxcard{max-width:380px;margin:60px auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;width:calc(100% - 32px)}
.error{color:var(--danger)}

/* Древо */
main.treeapp{flex:1;display:grid;grid-template-columns:1fr 360px;min-height:0}
#treeWrap{position:relative;overflow:hidden;min-height:0}
#svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#svg.drag{cursor:grabbing}
#vp.anim{transition:transform .35s ease}
.treebar{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:12px}
.treebar select{width:auto;padding:2px 4px}
.toolbar{position:absolute;left:12px;top:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;pointer-events:none}
.toolbar>*{pointer-events:auto}
.search{position:relative;width:240px}
.results{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-top:3px;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.results div{padding:6px 10px;cursor:pointer}.results div:hover{background:var(--surface2)}
.results small{color:var(--muted)}
.toggle{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;color:var(--ink);margin:0}
.toggle input{width:auto}
.pill{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 10px}
.guestBanner{background:var(--focus);color:#1c1916;padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600}
/* Древо: «летописное» оформление — медальоны, полосы поколений, картуш рода */
:root{ --frame:#b0832e; --frame-ink:#7a5413; --medal-bg:#f6ead2; --band:rgba(176,131,46,.07); }
@media (prefers-color-scheme: dark){ :root{ --frame:#c9a25c; --frame-ink:#e3c590; --medal-bg:#3a3127; --band:rgba(201,162,92,.08); } }
.edge{fill:none;stroke:var(--edge);stroke-width:1.5;stroke-linejoin:round}
.edge.lin{stroke:var(--frame);stroke-width:2.8}
.edge.gedge{stroke-dasharray:6 5}
.marr{stroke:var(--edge);stroke-width:1.5}
.marr.div{stroke-dasharray:5 4}
.ring{fill:var(--bg);stroke:var(--frame);stroke-width:1.6}
.myear{fill:var(--frame-ink);font:600 11px var(--sans)}
.band{fill:var(--band)} .band.alt{fill:transparent}
.bandlbl .rn{fill:var(--frame-ink);font:600 26px var(--serif)}
.bandlbl .bl{fill:var(--muted);font:11.5px var(--sans)}
.node{cursor:pointer;transition:opacity .25s}
.node.dim{opacity:.45}
.node rect.card{fill:var(--surface);stroke:var(--frame);stroke-width:1;stroke-opacity:.55}
.node .sexbar{fill:var(--unk)}
.node.sex-M .sexbar{fill:var(--male)} .node.sex-F .sexbar{fill:var(--female)}
.node .medal{fill:var(--medal-bg);stroke:var(--frame);stroke-width:2}
.node.photo .medal{fill:none}
.node .mono{fill:var(--frame-ink);font:600 26px var(--serif)}
.node .nm{fill:var(--ink);font:600 13.5px var(--serif)}
.node .yr{fill:var(--ink);font:12.5px var(--sans)}
.node .sub{fill:var(--muted);font:11.5px var(--sans)}
.node.focus rect.card{stroke:var(--focus);stroke-width:2.5;stroke-opacity:1}
.node:hover rect.card{stroke:var(--accent);stroke-opacity:1}
.node.hidden rect.card{fill:var(--hidden);stroke-dasharray:4 3}
.ghost{cursor:pointer}
.ghost rect{fill:transparent;stroke:var(--frame);stroke-width:1.3;stroke-dasharray:7 6}
.ghost .plus{fill:var(--frame);font:300 40px var(--sans)}
.ghost .glbl{fill:var(--muted);font:13px var(--sans)}
.ghost:hover rect{fill:var(--surface);stroke:var(--accent)}
.more{cursor:pointer}
.more rect{fill:var(--surface);stroke:var(--frame);stroke-width:1}
.more text{fill:var(--frame-ink);font:11.5px var(--sans)}
.more:hover rect{stroke:var(--accent)}
.cart .mono-c{fill:var(--medal-bg);stroke:var(--frame);stroke-width:2}
.cart .mono-t{fill:var(--frame-ink);font:600 28px var(--serif)}
.cart .ttl{fill:var(--ink);font:600 30px var(--serif)}
.cart .yrs{fill:var(--frame-ink);font:13px var(--sans);letter-spacing:.1em}
.cart .rule{stroke:var(--frame);stroke-width:1}
.cart .motto{fill:var(--muted);font:italic 15px var(--serif)}
.union{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.kin{position:relative}
.kinres{margin-top:8px}
.kinres .kterm{font:600 20px/1.25 var(--serif);color:var(--accent);margin-bottom:2px}
.kpath{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}
.karr{color:var(--muted);font-size:12px}
aside#panel{border-left:1px solid var(--line);background:var(--surface);overflow:auto;padding:16px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.saving{font-size:12px;color:var(--muted);min-height:16px}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);max-width:560px;width:calc(100% - 32px);padding:20px}
dialog::backdrop{background:rgba(0,0,0,.4)}
.toast{position:fixed;bottom:18px;right:18px;background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:8px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:50}
.toast.on{opacity:1}

@media (max-width:820px){
  body.app{height:auto}
  main.treeapp{grid-template-columns:1fr;grid-template-rows:70vh auto}
  aside#panel{border-left:0;border-top:1px solid var(--line)}
  .search{width:100%}
  .hero h1{font-size:30px}
  .profile .pname{font-size:24px}
  .profile .bigava{width:84px;height:84px}
}