:root{
  --paper:#EEF1EA; --card:#FFFFFF; --ink:#1D2420; --muted:#5E6A62; --line:#C9D2C6;
  --bahi:#9B1C1C; --bahi-soft:#F6E3E1; --haldi:#E0A100; --haldi-soft:#FFF3CF; --leaf:#2F6B3A; --leaf-soft:#E2EEDF;
  --link:#A9B7A6; --shadow:0 1px 0 rgba(29,36,32,.06),0 8px 20px -14px rgba(29,36,32,.45);
  --display:"Yatra One","Noto Sans Devanagari",serif;
  --body:"Hind","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#141A16; --card:#1E2620; --ink:#E9EEE7; --muted:#9BA89F; --line:#33403A;
  --bahi:#E0605A; --bahi-soft:#3A1F1E; --haldi:#F2BE3A; --haldi-soft:#3A3115; --leaf:#7DC48A; --leaf-soft:#1F3324;
  --link:#4A5A50; --shadow:0 8px 20px -14px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --paper:#141A16; --card:#1E2620; --ink:#E9EEE7; --muted:#9BA89F; --line:#33403A;
  --bahi:#E0605A; --bahi-soft:#3A1F1E; --haldi:#F2BE3A; --haldi-soft:#3A3115; --leaf:#7DC48A; --leaf-soft:#1F3324;
  --link:#4A5A50; --shadow:0 8px 20px -14px rgba(0,0,0,.8);
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--body);display:flex;flex-direction:column;overflow:hidden}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--haldi);outline-offset:2px}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--bahi);color:#fff;flex:none;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand h1{font:400 1.75rem/1 var(--display);margin:0;letter-spacing:.3px;white-space:nowrap}
.brand p{margin:0;font-size:.9rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{position:relative;margin-left:auto;flex:1 1 280px;max-width:420px}
.search input{width:100%;border:0;border-radius:10px;padding:9px 14px 9px 38px;background:rgba(255,255,255,.16);color:#fff;font-size:16px}
.search input::placeholder{color:rgba(255,255,255,.75)}
.search input:focus{background:#fff;color:#1D2420;outline:none}
.search input:focus::placeholder{color:#7a857d}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;opacity:.8;pointer-events:none}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);color:var(--ink);border-radius:12px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);max-height:min(60vh,420px);overflow:auto;z-index:30;display:none;padding:6px}
.results.open{display:block}
.results button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer}
.results button:hover,.results button[aria-selected="true"]{background:var(--haldi-soft)}
.results b{font-weight:600}
.results small{display:block;color:var(--muted);font-size:.8rem}
.results .none{padding:10px;color:var(--muted)}
.seg{display:flex;background:rgba(0,0,0,.18);border-radius:10px;padding:3px}
.seg button{border:0;background:none;color:#fff;padding:6px 14px;border-radius:8px;cursor:pointer;font-weight:500;white-space:nowrap}
.seg button[aria-pressed="true"]{background:#fff;color:var(--bahi)}

/* ---------- family strip ---------- */
.strip{display:flex;align-items:center;gap:10px 18px;padding:8px 18px;border-bottom:1px solid var(--line);background:var(--card);flex:none;flex-wrap:wrap;font-size:.92rem}
.fam{display:flex;gap:6px}
.fam button{border:1px solid var(--line);background:none;border-radius:999px;padding:3px 14px;cursor:pointer}
.fam button[aria-pressed="true"]{border-color:var(--bahi);background:var(--bahi-soft);color:var(--bahi);font-weight:600}
.facts{display:flex;gap:18px;color:var(--muted);flex-wrap:wrap}
.facts b{color:var(--ink);font-weight:700}
.legend{margin-left:auto;display:flex;gap:14px;color:var(--muted);font-size:.85rem;align-items:center}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}

/* ---------- main ---------- */
main{position:relative;flex:1;min-height:0;display:flex}
.stage{position:relative;flex:1;min-width:0}
#tree{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#tree:active{cursor:grabbing}
.tools{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:5}
.tools button,.tools2 button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;font-size:1.15rem;line-height:1}
.tools2{position:absolute;right:14px;top:14px;display:flex;gap:8px;z-index:5}
.tools2 button{width:auto;padding:0 14px;font-size:.9rem;font-weight:500}
.hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:.85rem;padding:6px 14px;border-radius:999px;pointer-events:none;opacity:.9;white-space:nowrap}

/* tree nodes */
.link{fill:none;stroke:var(--link);stroke-width:1.6}
.link.lin{stroke:var(--haldi);stroke-width:3.2}
.node{cursor:pointer}
.node .box{fill:var(--card);stroke:var(--line);stroke-width:1}
.node.dead .box{stroke-dasharray:4 3}
.node.lin .box{stroke:var(--haldi);stroke-width:2.4}
.node.sel .box{stroke:var(--bahi);stroke-width:3}
.node .av{fill:var(--leaf-soft)}
.node.dead .av{fill:var(--bahi-soft)}
.node .avt{font:21px "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;text-anchor:middle;dominant-baseline:central}

.node.dead .avt{fill:var(--bahi)}
.node .nm{fill:var(--ink);font:600 14.5px var(--body)}
.node .sub{fill:var(--muted);font:400 12px var(--body)}
.node .rip{fill:var(--bahi);font:600 11px var(--body)}
.node .gen{fill:var(--muted);font:500 11px var(--body);text-anchor:end}
.tog{cursor:pointer}
.tog circle{fill:var(--card);stroke:var(--leaf);stroke-width:1.6}
.tog text{fill:var(--leaf);font:700 12px var(--body);text-anchor:middle;dominant-baseline:central}
.tog.open circle{fill:var(--leaf)}
.tog.open text{fill:var(--card)}

/* ---------- list view ---------- */
.list{flex:1;overflow:auto;padding:18px;display:none}
.list.on{display:block}
.gsec{max-width:1100px;margin:0 auto 26px}
.gsec h2{font:400 1.35rem var(--display);color:var(--bahi);margin:0 0 10px;display:flex;align-items:baseline;gap:10px}
.gsec h2 span{font:500 .9rem var(--body);color:var(--muted)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.pbtn{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 12px;text-align:left;cursor:pointer}
.pbtn:hover{border-color:var(--leaf)}
.pbtn b{display:block;font-weight:600}
.pbtn small{color:var(--muted);font-size:.8rem}
.pbtn.dead b::after{content:" (स्व.)";color:var(--bahi);font-weight:500;font-size:.8rem}

/* ---------- drawer ---------- */
.drawer{width:380px;flex:none;background:var(--card);border-left:1px solid var(--line);overflow:auto;display:none;position:relative}
.drawer.open{display:block}
.dclose{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:1rem}
.dhead{padding:22px 22px 14px;border-bottom:1px solid var(--line)}
.dhead .big{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:700 1.5rem var(--body);background:var(--leaf-soft);color:var(--leaf);margin-bottom:10px}
.dhead.dead .big{background:var(--bahi-soft);color:var(--bahi)}
.dhead h2{margin:0;font-size:1.45rem;line-height:1.25}
.dhead .loc{color:var(--muted);font-size:1.05rem}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font-size:.8rem;font-weight:600;border-radius:999px;padding:2px 10px;background:var(--leaf-soft);color:var(--leaf)}
.tag.r{background:var(--bahi-soft);color:var(--bahi)}
.tag.y{background:var(--haldi-soft);color:#7A5600}
:root[data-theme="dark"] .tag.y{color:var(--haldi)}
.dsec{padding:14px 22px;border-bottom:1px solid var(--line)}
.dsec h3{margin:0 0 8px;font-size:.95rem;color:var(--muted);font-weight:600}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.95rem}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:none;border-radius:999px;padding:3px 12px;cursor:pointer;font-size:.9rem}
.chip:hover{border-color:var(--leaf);color:var(--leaf)}
.empty{color:var(--muted);font-size:.9rem}
/* lineage ledger */
.ledger{list-style:none;margin:0;padding:0;position:relative}
.ledger::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:3px;background:var(--haldi);border-radius:2px}
.ledger li{position:relative;padding:3px 0 3px 32px}
.ledger li::before{content:"";position:absolute;left:5px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:var(--card);border:3px solid var(--haldi)}
.ledger li:last-child::before{background:var(--bahi);border-color:var(--bahi)}
.ledger button{border:0;background:none;padding:2px 0;cursor:pointer;text-align:left}
.ledger button:hover b{color:var(--bahi);text-decoration:underline}
.ledger b{font-weight:600}
.ledger small{color:var(--muted);margin-left:6px;font-size:.8rem}
.dact{display:flex;gap:8px;padding:16px 22px 26px;flex-wrap:wrap}
.btn{border:0;border-radius:10px;padding:9px 16px;font-weight:600;cursor:pointer;background:var(--bahi);color:#fff}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 16px;border-radius:10px;font-size:.9rem;z-index:60;display:none}
.note{max-width:1100px;margin:10px auto 30px;color:var(--muted);font-size:.85rem}

@media (max-width:900px){
  .drawer{position:absolute;left:0;right:0;bottom:0;width:auto;max-height:72%;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -18px 40px -20px rgba(0,0,0,.45);z-index:20;padding-bottom:env(safe-area-inset-bottom,0px)}
  .legend{display:none}
}
@media (max-width:640px){
  .bar{padding:8px 12px;gap:8px}
  .brand h1{font-size:1.45rem}
  .brand p{display:none}
  .search{order:3;flex-basis:100%;max-width:none}
  .seg{margin-left:auto}
  .seg button{padding:5px 10px}
  .strip{padding:6px 12px;font-size:.85rem;gap:6px 12px}
  .facts{gap:12px}
  .tools2{top:10px;right:10px}
  .tools{left:10px;bottom:10px}
  .hint{display:none}
  .list{padding:12px}
  .ggrid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- vanshavali PHP additions ---------- */
.brand{color:#fff;text-decoration:none}
.who{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.9rem}
.who a,.linkbtn{color:var(--bahi);font-weight:600;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:600}
.who form{margin:0}
.muted{color:var(--muted)}
.badge-admin{background:var(--haldi-soft);color:#7A5600;border-radius:999px;padding:2px 12px;font-weight:600}
.r{color:var(--bahi)}
.dhead .big{overflow:hidden}
.dhead .big img,.photoedit .big img{width:100%;height:100%;object-fit:cover;display:block}
.adminbar{padding:14px 22px;border-bottom:1px solid var(--line);background:var(--haldi-soft);display:flex;flex-direction:column;gap:10px}
.adminbar .btn{align-self:flex-start}
.addrel{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.9rem}
.addrel span{color:var(--muted);margin-right:2px}
.addrel .chip{background:var(--card)}
.notes{margin:0;white-space:pre-wrap}
.btn.danger{background:none;border:1px solid var(--bahi);color:var(--bahi);margin-left:auto}
.btn:disabled{opacity:.55;cursor:default}
.eform{padding:22px 22px 30px}
.eform h2{font-size:1.25rem;margin:0 36px 12px 0}
.eform fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:12px 0 6px}
.eform legend{font-weight:700;color:var(--bahi);padding:0;font-size:.95rem}
.eform legend small{color:var(--muted);font-weight:500}
.eform label{display:block;font-size:.85rem;color:var(--muted);font-weight:500;margin:6px 0}
.eform label small{display:block;font-size:.78rem}
.eform input,.eform select,.eform textarea{display:block;width:100%;margin-top:3px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--paper);color:var(--ink);font-size:16px}
.eform textarea{resize:vertical}
.eform input:focus,.eform select:focus,.eform textarea:focus{outline:2px solid var(--haldi);border-color:var(--haldi)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px}
.factions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;position:sticky;bottom:0;background:var(--card);padding:10px 0}
.photoedit{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.photoedit .big{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--leaf-soft);color:var(--leaf);font-weight:700;font-size:1.4rem;overflow:hidden}
.filebtn{margin:0!important;color:var(--ink)!important;font-size:.95rem!important}
.msg{padding:10px 14px;border-radius:10px;margin:8px 0;font-size:.95rem}
.msg.ok{background:var(--leaf-soft);color:var(--leaf)}
.msg.err{background:var(--bahi-soft);color:var(--bahi)}
.emptystate{display:grid;place-items:center;height:100%;text-align:center;padding:20px}
.emptystate h2{font:400 1.6rem var(--display);color:var(--bahi);margin:0}
/* login / install / account */
body.authpage{flex-direction:row;justify-content:center;align-items:center;display:flex;place-items:center;min-height:100%;overflow:auto;padding:20px;background:var(--paper)}
.authcard{display:block;flex:none;width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.authcard h1{font:400 1.8rem var(--display);color:var(--bahi);margin:0 0 6px}
.authcard label{display:block;font-size:.9rem;font-weight:600;margin:12px 0 0}
.authcard input{display:block;width:100%;margin-top:4px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--paper);color:var(--ink);font-size:16px}
.authcard .btn{margin-top:18px;width:100%;display:inline-block;text-align:center;text-decoration:none}
.authcard p a{color:var(--bahi)}
@media (max-width:640px){ .g3{grid-template-columns:1fr 1fr} .who{margin-left:0;font-size:.85rem;gap:10px} .strip{flex-direction:column;align-items:flex-start} }

.emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:1.9rem;line-height:1}
.photoedit .emo{font-size:1.8rem}
.dhead .big.f,.photoedit .big.f{background:#FCE7EC}
:root[data-theme="dark"] .node .av.f,:root[data-theme="dark"] .dhead .big.f,:root[data-theme="dark"] .photoedit .big.f{fill:#3A2128;background:#3A2128}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .node .av.f{fill:#3A2128}:root:not([data-theme="light"]) .dhead .big.f,:root:not([data-theme="light"]) .photoedit .big.f{background:#3A2128}}

.node .av{fill:#E2EFEF}
.dhead .big,.photoedit .big{background:#E2EFEF}
.node.dead .avi,.dhead.dead .big img{filter:grayscale(.35)}

.pdfbtn{display:block;width:100%;margin-top:14px;text-align:center}