:root { --bg:#f4f1ea; --card:#fff; --ink:#26302b; --muted:#6b756f; --brand:#2f6b4f; --line:#d9d4c7; --danger:#b3392f; --bio:#2f6b4f; --adp:#d98a1f; --grd:#7a4fb3; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { margin:0; font-size:1.6rem; } h2 { margin:0 0 .6rem; font-size:1.15rem; } h3 { margin:1rem 0 .3rem; font-size:.95rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.muted { color:var(--muted); } .pad { padding:1rem; } .pre { white-space:pre-wrap; } .error { color:var(--danger); }
.top { position:sticky; top:0; z-index:20; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding:.6rem 1rem; background:var(--brand); color:#fff; }
.top a { color:#fff; } .brand { font-weight:700; font-size:1.1rem; }
#nav { display:flex; gap:.2rem; flex:1; } #nav a { padding:.3rem .7rem; border-radius:6px; } #nav a.on, #nav a:hover { background:rgba(255,255,255,.2); text-decoration:none; }
#q { padding:.4rem .7rem; border-radius:6px; border:0; width:220px; }
.qres { position:absolute; right:1rem; top:100%; width:300px; background:#fff; color:var(--ink); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.25); overflow:hidden; }
.qres a { display:flex; gap:.6rem; align-items:center; padding:.4rem .7rem; color:var(--ink); } .qres a:hover { background:#eef4f0; text-decoration:none; } .qres small { display:block; color:var(--muted); }
main { max-width:1200px; margin:0 auto; padding:1rem; }
.page-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.8rem; flex-wrap:wrap; }
.page-head h1 { font-family:Georgia,"Times New Roman",serif; color:#37352f; }
.tools { display:flex; gap:.4rem; align-items:center; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; margin-bottom:1rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .grid2 > .card { margin:0; } @media (max-width:800px){ .grid2 { grid-template-columns:1fr; } #q{width:100%} }
.btn { font:inherit; padding:.4rem .9rem; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; display:inline-block; color:var(--ink); }
.btn:hover { background:#f0ede4; } .btn.primary { background:var(--brand); color:#fff; border-color:var(--brand); } .btn.danger { color:var(--danger); } .btn.sm { padding:.15rem .6rem; font-size:.85rem; font-weight:400; }
.lnk { background:none; border:0; color:var(--brand); cursor:pointer; font:inherit; font-size:.85rem; padding:0 .3rem; text-transform:none; letter-spacing:0; } .lnk.danger { color:var(--danger); }
.badge { display:inline-block; font-size:.72rem; padding:.05rem .5rem; border-radius:99px; background:#e8e4d8; color:var(--ink); text-transform:capitalize; }
.badge.biological { background:#dcefe4; color:var(--bio); } .badge.adopted { background:#fbe9cc; color:#8a5600; } .badge.guardianship { background:#e9defa; color:var(--grd); } .badge.divorced { background:#f6d9d6; color:var(--danger); }
.legend { display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); margin-bottom:.6rem; } .legend .ln { display:inline-block; width:28px; border-top:3px solid; vertical-align:middle; margin-right:.3rem; }
.ln.bio { border-color:var(--bio); } .ln.adp { border-color:var(--adp); border-top-style:dashed; } .ln.grd { border-color:var(--grd); border-top-style:dotted; } .ln.par { border-color:#c0392b; } .ln.div { border-color:#999; border-top-style:dashed; }
.treewrap { background:#faf7f1; border:1px solid var(--line); border-radius:12px; overflow:auto; height:70vh; cursor:grab; }
.tree-watermark { fill:none; stroke:#888178; opacity:.11; stroke-width:12; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.tree-watermark .trunk { stroke-width:34; } .tree-watermark .roots { stroke-width:5; }
.edge { fill:none; stroke-width:2.5; stroke-linecap:square; stroke-linejoin:round; } .edge.bio { stroke:#454440; } .edge.adp { stroke:#a97932; stroke-dasharray:7 5; } .edge.grd { stroke:#78628e; stroke-dasharray:2 5; stroke-linecap:round; }
.limb-main { stroke-width:3; } .limb-twig { stroke-width:2.2; }
.pedge { fill:none; stroke:#454440; stroke-width:2.5; } .pedge.div { stroke:#999; stroke-dasharray:6 4; } .pedge.arc { stroke-width:2; opacity:.7; }
.node .portrait-ring { fill:#faf7f1; stroke:#403f3c; stroke-width:3; } .node .ph { fill:#aaa49a; }
.node .nameplate { fill:#343330; stroke:none; } .node .nm { font:600 12px Georgia,serif; fill:#fff; }
.node .ini { font:600 14px system-ui; fill:#fff; } .node.dead .portrait-ring { stroke-dasharray:4 3; }
.node:hover .portrait-ring { stroke:#8b6d45; stroke-width:4; } .node:hover .nameplate { fill:#56534c; }
.avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; } .avatar.ph { display:inline-flex; align-items:center; justify-content:center; background:#9fb8aa; color:#fff; font-weight:600; }
.avatar.sm { width:30px; height:30px; font-size:.75rem; } .avatar.xl { width:110px; height:110px; font-size:2rem; }
.person-head { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; } .grow { flex:1; min-width:200px; }
.big-search { width:100%; padding:.7rem 1rem; font-size:1.05rem; border:1px solid var(--line); border-radius:10px; margin-bottom:1rem; }
.plist { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.7rem; }
.pcard { display:flex; gap:.8rem; align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; color:var(--ink); } .pcard:hover { border-color:var(--brand); text-decoration:none; } .pcard small { display:block; color:var(--muted); }
.rel { list-style:none; margin:0; padding:0; } .rel li { padding:.25rem 0; border-bottom:1px solid #f0ede4; } .acts { margin-left:.5rem; }
.tl { list-style:none; padding:0; margin:0; } .tl li { padding:.4rem 0 .4rem .8rem; border-left:3px solid var(--line); margin-bottom:.3rem; } .tl small { display:block; color:var(--muted); } .tl p { margin:.2rem 0 0; }
.gallery { display:flex; flex-wrap:wrap; gap:.8rem; } .gallery figure { margin:0; width:150px; } .gallery img { width:150px; height:150px; object-fit:cover; border-radius:8px; border:1px solid var(--line); } .gallery figcaption { font-size:.8rem; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:2rem 1rem; }
.dialog { background:#fff; border-radius:12px; padding:1.2rem 1.4rem; width:100%; max-width:720px; }
.form { display:flex; flex-direction:column; gap:.7rem; } .form label { display:flex; flex-direction:column; font-size:.85rem; color:var(--muted); gap:.15rem; flex:1; }
.form input, .form select, .form textarea, .inline input { font:inherit; padding:.4rem .6rem; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; width:100%; }
.cols { display:flex; gap:.6rem; flex-wrap:wrap; } .cols label { min-width:140px; } fieldset { border:1px solid var(--line); border-radius:8px; } legend { font-size:.85rem; color:var(--muted); }
.row { display:flex; gap:.4rem; margin-bottom:.4rem; flex-wrap:wrap; } .row input { flex:1; min-width:110px; }
.seg { display:flex; gap:1rem; } .seg label { flex-direction:row; align-items:center; gap:.3rem; flex:none; color:var(--ink); } .form .seg input, .form .chk input { width:auto; } .chk { flex-direction:row !important; align-items:center; }
.dlg-foot { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.4rem; } .inline { display:flex; gap:.5rem; margin-top:.6rem; }
.tbl { width:100%; border-collapse:collapse; } .tbl th, .tbl td { text-align:left; padding:.5rem; border-bottom:1px solid var(--line); }
.cal { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:1rem; }
.dow, .cells { display:grid; grid-template-columns:repeat(7,1fr); } .dow div { background:#ece8dc; padding:.4rem; text-align:center; font-weight:600; font-size:.85rem; }
.cell { min-height:92px; border-right:1px solid #eee; border-bottom:1px solid #eee; padding:.2rem .3rem; overflow:hidden; } .cell.empty { background:#faf8f3; } .cell.today { background:#fff8dc; } .dn { font-size:.8rem; color:var(--muted); display:block; }
.ev { display:block; font-size:.78rem; padding:.05rem .3rem; border-radius:4px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ev.bday { background:#dcefe4; } .ev.memorial { background:#e9defa; } .ev.death { background:#eee; } .ev:hover { text-decoration:none; filter:brightness(.95); }
.mn { min-width:150px; text-align:center; }
@media (max-width:700px){ .cell { min-height:60px; } .ev small { display:none; } }
.auth { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-card { width:100%; max-width:380px; } .auth-card form { display:flex; flex-direction:column; gap:.7rem; } .auth-card label { display:flex; flex-direction:column; font-size:.85rem; color:var(--muted); }
.auth-card input { font:inherit; padding:.5rem .7rem; border:1px solid var(--line); border-radius:6px; }
.auth-card .btn { width:100%; padding:.6rem; } .or { text-align:center; color:var(--muted); margin:.7rem 0; }