/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Шежіре. Layout: full-height app. Header, path bar, horizontal column tree (each chosen node opens the next column), bottom selection card + orange add button, side/bottom sheet for biography and photo chronology. */
:root{
  --bg:#161a21; --bg2:#1e242e; --bg3:#272f3b; --line:#3b4554; --fg:#eef1f4; --muted:#94a1b2;
  --ru:#9dbf96; --ru-ink:#182717; --person:#e8cb92; --person-ink:#33250c;
  --sel:#fbfaf7; --sel-ink:#1a1d22; --accent:#f2973a; --accent-ink:#2b1604; --danger:#e7685b;
  --display:"Unbounded","Rubik",system-ui,sans-serif;
  --body:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hot:#6b7686; --ev-text:#cfd6df; --accent-text:#f2973a; --glow:var(--glow); --shadow:var(--shadow); --veil:var(--veil);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f1ea; --bg2:#fffdf8; --bg3:#ebe6db; --line:#d4ccbb; --fg:#1f2430; --muted:#626b7a;
  --ru:#b4d3ab; --ru-ink:#14260f; --person:#f0dcae; --person-ink:#3a2a08;
  --sel:#1f2430; --sel-ink:#fbfaf7; --accent:#e8801f; --accent-ink:#2b1604; --danger:#c8402f;
  --hot:#8a93a3; --ev-text:#3a4252; --accent-text:#b45309; --glow:rgba(232,128,31,.28); --shadow:rgba(60,45,20,.16); --veil:rgba(40,34,24,.45);
  color-scheme:light;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5;overflow:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg2)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--bg2);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand svg{flex:none}
.brand b{font:700 18px/1.1 var(--display);letter-spacing:.01em}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.st{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.st i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.st.ok i{background:var(--ru)} .st.busy i{background:var(--accent)} .st.ro i{background:var(--danger)}
.ib{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--bg3);display:grid;place-items:center;flex:none}
.ib:hover{border-color:var(--muted)}
.bar{display:flex;align-items:center;gap:8px;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);background:var(--bg)}
.bar::-webkit-scrollbar{display:none}
.crumb{flex:none;border:0;background:none;color:var(--muted);font-size:13px;padding:4px 2px}
.crumb:last-of-type{color:var(--fg);font-weight:500}
.sep{color:var(--line);flex:none}
.legend{margin-left:auto;display:flex;gap:12px;flex:none;font-size:12px;color:var(--muted);padding-left:12px}
.legend span{display:flex;align-items:center;gap:5px}
.legend span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ru)}
.legend span.p::before{background:var(--person)}
.stage{flex:1;overflow:auto;position:relative;min-height:0;overscroll-behavior:contain}
.plane{position:relative}
.plane svg{position:absolute;inset:0;pointer-events:none}
.plane path{fill:none;stroke:var(--line);stroke-width:1.5}
.plane path.hot{stroke:var(--hot)}
.node{position:absolute;height:46px;border-radius:999px;border:2px solid transparent;background:var(--ru);color:var(--ru-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px;font-weight:500;font-size:14px;line-height:1.2;transition:transform .15s,background-color .15s}
.node:hover{transform:translateX(2px)}
.node.person{background:var(--person);color:var(--person-ink)}
.node.on{background:var(--sel);color:var(--sel-ink);border-color:var(--accent)}
.node.cur{box-shadow:0 0 0 5px var(--glow)}
.node .nm{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node .yr{font-size:11px;font-weight:400;opacity:.72;font-variant-numeric:tabular-nums}
.node .ct{position:absolute;right:-4px;top:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--bg3);border:1px solid var(--line);color:var(--muted);font-size:11px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.card{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:calc(96px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:460px;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;background:var(--bg2);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 30px var(--shadow);z-index:5}
.card .t{min-width:0;flex:1}
.card .t b{display:block;font:600 15px/1.3 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .t small{color:var(--muted);font-size:12px}
.btn{border:1px solid var(--line);background:var(--bg3);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--danger)}
.btn.danger.arm{background:var(--danger);border-color:var(--danger);color:#fff}
.fab{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:62px;height:62px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 10px 24px rgba(242,151,58,.35);z-index:6}
.fab:hover{filter:brightness(1.06)}
.scrim{position:fixed;inset:0;background:var(--veil);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:90%;overflow:auto;background:var(--bg2);border-top:1px solid var(--line);border-radius:22px 22px 0 0;z-index:21;padding-block:20px calc(28px + env(safe-area-inset-bottom,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.sheet{left:auto;top:0;width:480px;max-height:none;border-radius:0;border-top:0;border-left:1px solid var(--line);padding-top:calc(20px + env(safe-area-inset-top,0px))}}
.sh-head{display:flex;align-items:flex-start;gap:12px}
.sh-head .t{flex:1;min-width:0}
.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--ru);color:var(--ru-ink)}
.pill.person{background:var(--person);color:var(--person-ink)}
.sh-head h2{font:700 24px/1.2 var(--display);margin:10px 0 4px;text-wrap:balance;overflow-wrap:anywhere}
.lineage{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.yrs{font-variant-numeric:tabular-nums;color:var(--fg);font-size:14px;margin-top:4px}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.tabs{display:flex;gap:4px;padding:4px;background:var(--bg);border-radius:14px;margin-bottom:18px}
.tabs button{flex:1;border:0;background:none;border-radius:10px;padding:9px;color:var(--muted);font-weight:500}
.tabs button[aria-selected="true"]{background:var(--bg3);color:var(--fg)}
.bio p{margin:0 0 12px;max-width:65ch;white-space:pre-wrap}
.empty{border:1px dashed var(--line);border-radius:16px;padding:20px;color:var(--muted);text-align:center;display:grid;gap:12px;justify-items:center}
.sub{font:600 13px var(--display);letter-spacing:.04em;color:var(--muted);margin:22px 0 10px;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;border-radius:999px;padding:6px 12px;background:var(--ru);color:var(--ru-ink);font-size:13px;font-weight:500}
.chip.person{background:var(--person);color:var(--person-ink)}
.tl{position:relative;display:grid;gap:22px;padding-left:28px;margin-top:4px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.ev{position:relative}
.ev::before{content:"";position:absolute;left:-27px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--bg2);border:2px solid var(--accent)}
.ev .y{font:700 18px/1.2 var(--display);font-variant-numeric:tabular-nums;color:var(--accent-text)}
.ev h4{margin:4px 0 2px;font-size:16px;font-weight:600}
.ev p{margin:0;color:var(--ev-text);white-space:pre-wrap;max-width:65ch}
.ev img{display:block;width:100%;max-width:100%;border-radius:14px;margin-top:10px;border:1px solid var(--line);background:var(--bg3)}
.ev .mini{display:flex;gap:6px;margin-top:8px}
.ev .mini button{border:0;background:none;color:var(--muted);font-size:12px;padding:2px 0;margin-right:10px;text-decoration:underline;text-underline-offset:3px}
.dlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 32px));max-height:calc(100% - 48px);overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:20px;z-index:31;padding:22px}
.dlg h3{font:700 18px var(--display);margin:0 0 16px}
.f{display:grid;gap:14px}
.f label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.f input,.f textarea{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:15px}
.f textarea{min-height:120px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:flex;gap:4px;padding:4px;background:var(--bg);border-radius:12px;border:1px solid var(--line)}
.seg button{flex:1;border:0;background:none;border-radius:9px;padding:8px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--bg3);color:var(--fg)}
.f .end{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.prev{max-height:180px;border-radius:12px;border:1px solid var(--line)}
.srch input{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:16px}
.res{display:grid;gap:4px;margin-top:12px;max-height:55vh;overflow:auto}
.res button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:10px;display:grid}
.res button:hover{background:var(--bg3)}
.res small{color:var(--muted);font-size:12px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;z-index:40;max-width:calc(100% - 32px)}
.x{margin-left:auto}
@media (max-width:480px){.legend{display:none}.brand small{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Menu & viewer */
.menu{display:grid;gap:8px}
.menu button{display:grid;gap:2px;text-align:left;border:1px solid var(--line);background:var(--bg3);border-radius:14px;padding:12px 14px}
.menu button:hover{border-color:var(--muted)}
.menu button b{font-weight:600}
.menu button small{color:var(--muted);font-size:12px}
.menu button.danger b{color:var(--danger)}
.menu button.arm{background:var(--danger);border-color:var(--danger)}
.menu button.arm b,.menu button.arm small{color:#fff}
.stat{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:-6px 0 16px;font-variant-numeric:tabular-nums}
.stat b{color:var(--fg);font-weight:600}
.ev img{cursor:zoom-in}
.viewer{position:fixed;inset:0;z-index:50;background:rgba(4,6,9,.94);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.viewer img{max-height:88vh;border-radius:12px}
.viewer p{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));text-align:center;color:#dfe5ec;margin:0;padding:0 20px}
.top .ib + .ib{margin-left:-4px}

/* Theme toggle */
#themeBtn .sun{display:none}
:root[data-theme="light"] #themeBtn .sun{display:block}
:root[data-theme="light"] #themeBtn .moon{display:none}
body,.top,.bar,.card,.sheet,.dlg,.btn,.ib,.node{transition:background-color .2s,border-color .2s,color .2s}
@media (prefers-reduced-motion:reduce){body,.top,.bar,.card,.sheet,.dlg,.btn,.ib,.node{transition:none}}

.yrs.sp{color:var(--muted);margin-top:2px}
.node .yr{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.st span{display:none}}
.stage.pan{cursor:grabbing;user-select:none}
.stage.pan .node{pointer-events:none}

/* Collapsed chain + animation */
.node.run{background:var(--bg3);color:var(--fg);border:2px dashed var(--accent)}
.node.run .nm{font-weight:600}
.node.run .yr{opacity:.8}
@keyframes pop{from{opacity:0;transform:translateX(-16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.node.enter{animation:pop .4s cubic-bezier(.2,.8,.2,1) backwards}
.plane path.enter{animation:fadein .5s ease backwards}
.btn.sm{padding:4px 12px;font-size:12px;flex:none;border-radius:999px}
@media (prefers-reduced-motion:reduce){.node.enter,.plane path.enter{animation:none}}

/* Visitor / owner */
body.visitor [data-owner],body.visitor .mini,body.visitor .empty .btn{display:none!important}
body:not(.visitor) [data-visitor]{display:none!important}
.note{color:var(--muted);font-size:13px;margin:0 0 12px;overflow-wrap:anywhere}
.note b{color:var(--fg)}
a.btn{display:inline-block;text-decoration:none;text-align:center;color:inherit}
a.btn.pri{color:var(--accent-ink)}
.pend{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:6px;margin-top:12px;background:var(--bg)}
.pend small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.pend p{margin:0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.pend .warn{color:var(--danger)}
.pend .end{display:flex;justify-content:flex-end;gap:8px}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.stage{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stage .node{cursor:pointer}
.bd{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600}

/* Бүгінгі туған күн иелеріне құттықтау */
.bday{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:14px;padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 20%,var(--bg2)) 0%,var(--bg2) 75%);border-bottom:1px solid var(--line)}
.bday .ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 6px 16px var(--glow)}
.bday .tx{flex:1;min-width:0;position:relative}
.bday h2{margin:2px 0 0;font:700 17px/1.25 var(--display);text-wrap:balance}
.bday .who{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bday .who button{border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--bg2);color:var(--fg);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:500}
.bday .who button:hover{border-color:var(--accent)}
.bday .who small{color:var(--muted);font-weight:400}
.bday .who b{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-variant-numeric:tabular-nums}
.bday p{margin:8px 0 0;font-size:14px;line-height:1.5;max-width:78ch;color:var(--fg);opacity:.88}
.bday .x2{flex:none;border:0;background:none;color:var(--muted);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;position:relative}
.bday .x2:hover{background:var(--bg3);color:var(--fg)}
.bday i.cf{position:absolute;top:-12px;width:6px;height:11px;border-radius:2px;opacity:0;animation:cf 2.8s ease-out forwards;pointer-events:none}
@keyframes cf{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translateY(110px) rotate(280deg)}}
@media (max-width:520px){.bday{gap:10px}.bday .ic{width:38px;height:38px;border-radius:12px}.bday h2{font-size:15px}.bday p{font-size:13px}}
@media (prefers-reduced-motion:reduce){.bday i.cf{display:none}}