/* Layout: sticky tool bar; drill-down stage (ancestors ↓ focus ↓ sons) beside a detail/edit panel; list and review as tabs. */
:root{
  --bg:#F5F0E6; --paper:#FFFDF8; --ink:#2A2119; --muted:#766858; --line:#CFC1AA; --soft:#EEE6D6;
  --accent:#8C5A2B; --accent-soft:#F3E6D6; --flag:#B4402A; --flag-soft:#F8E1DB; --ok:#3E7A4A; --ok-soft:#E1EFE3;
  --c-mubarak:#4F6B2F; --c-mubarak-soft:#E7EDDC; --c-malfi:#9A5B24; --c-malfi-soft:#F6E7D5;
  --c-mulaifi:#2F5873; --c-mulaifi-soft:#E0EAF1; --c-nafil:#6E3F6B; --c-nafil-soft:#EFE2EE;
  --c-buraik:#2E6B66; --c-buraik-soft:#DDEDEB; --c-other:#6B6258; --c-other-soft:#ECE7DF;
  --shadow:0 1px 2px rgba(42,33,25,.06),0 10px 28px rgba(42,33,25,.08);
  --f-name:"Noto Naskh Arabic","Traditional Arabic","Amiri",serif; --f-ui:"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#16130F; --paper:#1F1B16; --ink:#EFE7DA; --muted:#A89A88; --line:#4A4136; --soft:#2A241D;
  --accent:#D9A46C; --accent-soft:#33271B; --flag:#F08A72; --flag-soft:#3A201A; --ok:#8CC99A; --ok-soft:#1C2E20;
  --c-mubarak:#A9C47E; --c-mubarak-soft:#232B1A; --c-malfi:#E0A266; --c-malfi-soft:#36281A;
  --c-mulaifi:#8DB6D3; --c-mulaifi-soft:#1D2A34; --c-nafil:#D3A2CF; --c-nafil-soft:#2F2130;
  --c-buraik:#86C7C0; --c-buraik-soft:#1A2C2A; --c-other:#B7AC9E; --c-other-soft:#2A251F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#16130F; --paper:#1F1B16; --ink:#EFE7DA; --muted:#A89A88; --line:#4A4136; --soft:#2A241D;
  --accent:#D9A46C; --accent-soft:#33271B; --flag:#F08A72; --flag-soft:#3A201A; --ok:#8CC99A; --ok-soft:#1C2E20;
  --c-mubarak:#A9C47E; --c-mubarak-soft:#232B1A; --c-malfi:#E0A266; --c-malfi-soft:#36281A;
  --c-mulaifi:#8DB6D3; --c-mulaifi-soft:#1D2A34; --c-nafil:#D3A2CF; --c-nafil-soft:#2F2130;
  --c-buraik:#86C7C0; --c-buraik-soft:#1A2C2A; --c-other:#B7AC9E; --c-other-soft:#2A251F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{direction:rtl}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:20px 72px}
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:600}
h1{font-family:var(--f-name);font-size:34px;line-height:1.25;margin:2px 0 4px;text-wrap:balance}
.src{color:var(--muted);font-size:13px;margin:0}
.stats{display:flex;gap:8px;flex-wrap:wrap}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px 14px;min-width:84px}
.stat b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}
.stat.ok b{color:var(--ok)}

.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;margin-bottom:14px;box-shadow:var(--shadow);position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:20}
.tabs{display:flex;background:var(--soft);border-radius:10px;padding:3px;flex-wrap:wrap}
.tab{border:0;background:transparent;border-radius:8px;padding:6px 12px;font-size:14px;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600}
.search{flex:1 1 200px;position:relative;min-width:0}
.search input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 36px 8px 12px;outline:none}
.search input:focus{border-color:var(--accent)}
.search svg{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.results{position:absolute;top:calc(100% + 6px);inset-inline:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:60vh;overflow:auto;padding:6px;z-index:25}
.results button{display:block;width:100%;text-align:right;background:none;border:0;padding:8px 10px;border-radius:8px}
.results button:hover{background:var(--soft)}
.results small{color:var(--muted)}
.btn{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:7px 12px;font-size:13px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--paper);font-weight:600}
.btn.danger{border-color:var(--flag);color:var(--flag)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.switch{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:13px;background:var(--bg)}
.switch input{accent-color:var(--accent);width:16px;height:16px}
.pending{display:flex;align-items:center;gap:6px}
.msg{font-size:13px;color:var(--muted)}
.msg.err{color:var(--flag)}
.msg.ok{color:var(--ok)}

.stage{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;align-items:start}
@media (max-width:980px){.stage{grid-template-columns:1fr}}
.flow{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px 12px 30px;min-width:0}
.ancestry{display:flex;flex-direction:column;align-items:center}
.more-anc{border:1px dashed var(--line);background:transparent;border-radius:999px;padding:3px 14px;font-size:12.5px;color:var(--muted)}
.anc{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:3px 16px;display:inline-flex;align-items:baseline;gap:8px}
.anc:hover{border-color:var(--accent)}
.anc .nm{font-family:var(--f-name);font-weight:700;font-size:16px}
.down{width:2px;height:22px;background:var(--line);position:relative;margin:0 auto}
.down::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top:6px solid var(--line);border-bottom:0}
.focus{margin:0 auto;max-width:460px;text-align:center;border-radius:20px;padding:16px 22px 14px;background:var(--br-soft);border:2px solid var(--br);position:relative}
.focus .nm{font-family:var(--f-name);font-size:40px;font-weight:700;line-height:1.25;color:var(--br);overflow-wrap:anywhere}
.focus .lin{font-family:var(--f-name);font-size:15.5px;opacity:.8;margin-top:2px}
.focus .meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:12px;border-radius:999px;padding:2px 10px;background:var(--paper);border:1px solid var(--line)}
.chip.flag{background:var(--flag-soft);border-color:var(--flag);color:var(--flag)}
.chip.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.focus .up{position:absolute;top:10px;inset-inline-start:10px;border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:2px 10px;font-size:12.5px}
.trunk{width:2px;height:26px;background:var(--br);margin:0 auto;opacity:.6}
.kids-scroll{overflow-x:auto;padding:0 4px 8px}
.kids{display:flex;width:max-content;margin-inline:auto;animation:rise .28s ease-out}
.kgrid{position:relative;margin:0 auto;animation:rise .28s ease-out;max-width:100%}
@keyframes rise{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kids,.kgrid{animation:none}}
.kid{position:relative;padding:24px 5px 0;display:flex;flex-direction:column;align-items:center}
.kid::before{content:"";position:absolute;top:0;inset-inline:0;border-top:2px solid color-mix(in srgb,var(--br) 60%,transparent)}
.kid:first-child::before{inset-inline-start:50%}
.kid:last-child::before{inset-inline-end:50%}
.kid:only-child::before{display:none}
.kid .stem{position:absolute;top:0;left:50%;width:2px;height:18px;background:color-mix(in srgb,var(--br) 60%,transparent);transform:translateX(-50%)}
.kid .stem::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top:6px solid color-mix(in srgb,var(--br) 60%,transparent);border-bottom:0}
.krow{display:flex;position:relative;padding-bottom:12px}
.krow .kid{width:100px;flex:none}
.krow .card{width:100%;min-width:0;padding-inline:6px}
.krow .kid:first-child::before{inset-inline-start:-18px}
.krow .kid:last-child::before{inset-inline-end:50%}
.krow .kid:only-child::before{display:block;inset-inline-start:-18px;inset-inline-end:50%}
.krow:not(:last-child)::after{content:"";position:absolute;inset-inline-start:-18px;top:0;bottom:0;border-inline-start:2px solid color-mix(in srgb,var(--br) 60%,transparent)}
.card{min-width:86px;border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:8px 12px 7px;text-align:center;transition:transform .12s,border-color .12s,box-shadow .12s}
.card:hover{transform:translateY(-2px);border-color:var(--br);box-shadow:var(--shadow)}
.card .ord{display:block;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
.card .nm{display:block;font-family:var(--f-name);font-weight:700;font-size:18px;line-height:1.5;white-space:nowrap}
.card .sub{display:block;font-size:11px;color:var(--muted);white-space:nowrap}
.card.has .sub{color:var(--br);font-weight:600}
.card.leaf{background:var(--bg)}
.card.sel{outline:2px solid var(--br);outline-offset:1px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-start:4px;vertical-align:middle}
.dot.flag{background:var(--flag)}.dot.ok{background:var(--ok)}
.nokids{text-align:center;color:var(--muted);font-size:14px;margin-top:14px}

.side{position:sticky;top:84px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px;min-width:0}
@media (max-width:980px){.side{position:static}}
.side h3{font-size:12px;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px;font-weight:600}
.side h3:first-child{margin-top:0}
.side .who{font-family:var(--f-name);font-size:24px;font-weight:700;line-height:1.3}
.lineage{font-family:var(--f-name);font-size:16px;line-height:2;background:var(--bg);border-radius:12px;padding:8px 12px;overflow-wrap:anywhere}
.lineage a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted);cursor:pointer}
.lineage .bin{color:var(--muted);font-size:13px}
.sibs{display:flex;flex-wrap:wrap;gap:5px}
.sibs button{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:2px 10px;font-size:14px}
.sibs button[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
dl.meta{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:14px;margin:0}
dl.meta dt{color:var(--muted)}
dl.meta dd{margin:0;font-variant-numeric:tabular-nums}
.note{background:var(--soft);border-radius:12px;padding:9px 12px;font-size:14px;white-space:pre-wrap}
.note.flag{background:var(--flag-soft);border-inline-start:3px solid var(--flag)}
.edit{border-top:1px dashed var(--line);margin-top:16px;padding-top:4px}
.field{display:flex;gap:6px;margin-bottom:8px}
.field input,.field select,.edit textarea{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.edit textarea{width:100%;min-height:64px;resize:vertical;display:block;margin-bottom:6px}
.row-btns{display:flex;flex-wrap:wrap;gap:6px}
.confirm{background:var(--flag-soft);border:1px solid var(--flag);border-radius:10px;padding:8px 10px;margin-top:8px;font-size:13.5px}
.hint{font-size:12.5px;color:var(--muted);margin:4px 0 0}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px 16px 22px;min-width:0}
.panel h2{font-size:18px;margin:0 0 4px}
.panel>p{color:var(--muted);margin:0 0 14px;font-size:14px}
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree-wrap{overflow-x:auto}
.tree ul{padding-inline-start:22px}
.tree li{position:relative;padding-inline-start:18px}
.tree li::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;border-inline-start:1.5px solid var(--line)}
.tree li:last-child::before{bottom:auto;height:19px}
.tree li::after{content:"";position:absolute;inset-inline-start:0;top:19px;width:14px;border-top:1.5px solid var(--line)}
.tree>li{padding-inline-start:0}.tree>li::before,.tree>li::after{display:none}
.trow{display:flex;align-items:center;gap:5px;padding:2px 0}
.tog{width:22px;height:22px;border-radius:7px;border:1px solid var(--line);background:var(--paper);color:var(--muted);display:grid;place-items:center;flex:none;padding:0}
.tog.leaf{visibility:hidden}
li.closed>ul{display:none}
li.closed>.trow .tog svg{transform:rotate(90deg)}
.lnode{border:1px solid transparent;background:var(--br-soft);border-radius:9px;padding:3px 10px;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.lnode .nm{font-family:var(--f-name);font-weight:700;font-size:16px;color:var(--br)}
.lnode small{font-size:11px;color:var(--muted)}
.pages{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pg{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:4px 10px;font-size:13px;font-variant-numeric:tabular-nums;min-width:56px;text-align:center;position:relative;overflow:hidden}
.pg .bar-in{position:absolute;inset-block-end:0;inset-inline-start:0;height:3px;background:var(--ok)}
.pg[aria-pressed="true"]{border-color:var(--ink);background:var(--paper);font-weight:700}
.pg.done{border-color:var(--ok);color:var(--ok)}
.fam{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:8px;background:var(--bg)}
.fam .head{font-size:13px;color:var(--muted);margin-bottom:6px}
.fam .head b{font-family:var(--f-name);font-size:16px;color:var(--ink)}
.names{display:flex;flex-wrap:wrap;gap:6px}
.nchip{border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:2px 10px;font-family:var(--f-name);font-weight:700;font-size:15px}
.nchip.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.nchip.flag{border-color:var(--flag)}
.bsec{margin-top:18px}
.bsec>h3{font-family:var(--f-name);font-size:19px;margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.bsec>h3 small{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);font-weight:500}
.brow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin-bottom:6px}
.brow .bname{font-family:var(--f-name);font-weight:700;font-size:17px;color:var(--br)}
.brow .blin{font-family:var(--f-name);font-size:14px;color:var(--muted);flex:1 1 180px;min-width:0}
.brow .bcount{font-size:12px;border-radius:999px;padding:1px 9px;background:var(--paper);border:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.brow .btns{display:flex;gap:5px;flex-wrap:wrap}
.brow .btns .btn{padding:3px 9px;font-size:12px}
.bsum{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.badge-sug{font-size:12px;border:1px dashed var(--accent);color:var(--accent);border-radius:999px;padding:1px 10px}
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--soft);font-size:14px}
.log time{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.log .by{color:var(--muted);font-size:12.5px}
.empty{color:var(--muted);text-align:center;padding:24px}
footer{color:var(--muted);font-size:12.5px;margin-top:22px;text-align:center}
.theme{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow);display:grid;place-items:center;z-index:30}
@media (max-width:640px){
  h1{font-size:27px}.focus .nm{font-size:32px}
  .card{min-width:72px;padding:7px 9px 6px}.card .nm{font-size:16px}
  .tree ul{padding-inline-start:8px}.tree li{padding-inline-start:13px}.tree li::after{width:10px}
  .bar{position:static}
}

/* ---------- App additions: login, form, submissions ---------- */
.center-card{max-width:440px;margin:8vh auto 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px 22px}
.center-card h1{font-size:28px;margin:0 0 4px}
.center-card p{color:var(--muted);margin:0 0 16px;font-size:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.inp{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;outline:none}
.inp:focus{border-color:var(--accent)}
label.lbl{font-size:13px;color:var(--muted);display:block;margin-bottom:4px}
.ftree,.ftree ul{list-style:none;margin:0;padding:0}
.ftree ul{padding-inline-start:20px;border-inline-start:1.5px solid var(--line);margin-inline-start:10px}
.ftree li{padding:3px 0}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fname{font-family:var(--f-name);font-weight:700;font-size:18px}
.fname.renamed{color:var(--c-malfi)}
.fname .old{font-family:var(--f-ui);font-size:12px;color:var(--muted);font-weight:400;margin-inline-start:6px;text-decoration:line-through}
.fnew{border:1px solid var(--ok);background:var(--ok-soft);border-radius:9px;padding:5px 10px;font-family:var(--f-name);font-weight:700;font-size:17px;width:170px;max-width:60vw;outline:none}
.fnew.err{border-color:var(--flag);background:var(--flag-soft)}
.fedit{border:1px solid var(--c-malfi);border-radius:9px;padding:5px 10px;font-family:var(--f-name);font-size:17px;width:170px;max-width:60vw;background:var(--paper)}
.mini{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:2px 9px;font-size:12.5px}
.mini.add{border-color:var(--ok);color:var(--ok);font-weight:600}
.mini.del{border-color:var(--flag);color:var(--flag)}
.lineage-bar{font-family:var(--f-name);font-size:16px;color:var(--muted);background:var(--bg);border-radius:12px;padding:8px 12px;margin-bottom:12px}
.declare{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border-radius:12px;padding:10px 12px;font-size:14px}
.declare input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.purpose{font-size:13px;color:var(--muted);border-inline-start:3px solid var(--line);padding-inline-start:10px;margin:0 0 14px}
.sub-item{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin-bottom:8px}
.sub-item b{font-family:var(--f-name);font-size:17px}
.rv-list{list-style:none;margin:0;padding:0}
.rv-list li{display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--soft)}
.rv-list input[type=checkbox]{accent-color:var(--ok);width:18px;height:18px;flex:none}
.tag{font-size:11.5px;border-radius:999px;padding:1px 8px;border:1px solid var(--line)}
.tag.add{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.tag.ren{border-color:var(--c-malfi);color:var(--c-malfi);background:var(--c-malfi-soft)}
.toast{position:fixed;inset-inline:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);max-width:520px;margin:0 auto;background:var(--ink);color:var(--paper);border-radius:12px;padding:10px 14px;font-size:14px;z-index:40;text-align:center}
.disclaimer{background:var(--accent-soft);border-radius:12px;padding:8px 12px;color:var(--ink);line-height:1.8;max-width:760px}

.order-note{background:var(--ok-soft);border-inline-start:3px solid var(--ok);border-radius:10px;padding:8px 12px;font-size:14px;margin:0 0 14px}
.rv-name{width:170px;max-width:55vw;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-family:var(--f-name);font-weight:700;font-size:16px}
.tag.dup{border-color:var(--flag);color:var(--flag);background:var(--flag-soft)}

.contact{max-width:760px;margin:22px auto 0;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px;font-size:14.5px;line-height:1.9;color:var(--ink)}
.contact p{margin:0 0 6px}
.contact .mail{font-family:ui-monospace,Consolas,monospace;font-size:17px;font-weight:700;color:var(--accent);user-select:all;margin:6px 0 8px}

/* ---------- Masthead & footer (formal identity) ---------- */
html,body{margin:0}
:root{--mast-bg:#2B2017;--mast-ink:#F3E9D8;--gold:#C29A57;--gold-soft:rgba(194,154,87,.38)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--mast-bg:#0F0B08;--mast-ink:#EFE4D1;--gold:#D4B072;--gold-soft:rgba(212,176,114,.35)}}
:root[data-theme="dark"]{--mast-bg:#0F0B08;--mast-ink:#EFE4D1;--gold:#D4B072;--gold-soft:rgba(212,176,114,.35)}
.mast,.foot{background-color:var(--mast-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23C29A57' stroke-opacity='.11'%3E%3Cpath d='M28 6l6 16 16 6-16 6-6 16-6-16-16-6 16-6z'/%3E%3Ccircle cx='28' cy='28' r='4'/%3E%3C/g%3E%3C/svg%3E");color:var(--mast-ink);text-align:center}
.mast{padding:calc(env(safe-area-inset-top,0px) + 30px) 16px 28px;border-bottom:3px solid var(--gold);box-shadow:inset 0 -6px 0 -3px var(--gold-soft)}
.mast-in,.foot-in{max-width:760px;margin:0 auto}
.emblem{width:66px;height:66px;color:var(--gold);display:block;margin:0 auto 10px}
.emblem.sm{width:46px;height:46px}
.mast-kicker{font-size:12.5px;letter-spacing:.14em;color:var(--gold);font-weight:600}
.mast-title{font-family:var(--f-name);font-weight:700;font-size:clamp(25px,5.4vw,42px);line-height:1.35;margin:6px 0 10px;text-wrap:balance}
.orn{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);margin:0 auto 12px;max-width:300px;font-size:10px}
.orn span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.orn i{font-style:normal}
.mast-lead{max-width:620px;margin:0 auto;line-height:1.95;font-size:15.5px;opacity:.88}
.mast-sub{font-family:var(--f-name);font-size:22px;font-weight:700;color:var(--gold)}
.mast .counts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.mast .stat{background:rgba(255,255,255,.05);border-color:var(--gold-soft);color:var(--mast-ink)}
.mast .stat b{color:var(--gold)}
.mast .stat span{color:var(--mast-ink);opacity:.75}
.mast.compact{padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:18px}
.mast.compact .emblem{width:48px;height:48px;margin-bottom:6px}
.mast.compact .mast-title{font-size:clamp(20px,4.2vw,30px);margin:4px 0 8px}
.mast.compact .orn{margin-bottom:6px}
.foot{margin-top:40px;padding:26px 16px calc(env(safe-area-inset-bottom,0px) + 30px);border-top:3px solid var(--gold);box-shadow:inset 0 6px 0 -3px var(--gold-soft);font-size:14.5px;line-height:1.95}
.foot p{margin:0 0 6px;opacity:.92}
.foot-name{font-family:var(--f-name);font-weight:700;font-size:20px;margin:2px 0 8px}
.foot .mail{font-family:ui-monospace,Consolas,monospace;font-size:18px;font-weight:700;color:var(--gold);user-select:all;margin:8px 0;opacity:1}
.foot-btn{border:1px solid var(--gold);background:transparent;color:var(--gold);border-radius:999px;padding:5px 16px;font-size:13px;cursor:pointer}
.foot-btn:hover{background:var(--gold);color:var(--mast-bg)}
.foot-small{font-size:12px;opacity:.65!important;margin-top:12px!important}
.admin-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin:18px 0 16px}
.wrap.after-mast{padding-top:18px}

/* ---------- Steps form & requests ---------- */
.intro .purpose{border:0;padding:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-family:var(--f-name);font-size:15px;margin-bottom:12px}
.crumb{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:2px 12px;font-family:inherit}
.crumb.cur{background:var(--accent);border-color:var(--accent);color:var(--paper);font-weight:700}
.crumbs .sep{color:var(--muted)}
.fcard{text-align:center;background:var(--accent-soft);border:1px solid var(--line);border-radius:16px;padding:14px 12px;margin-bottom:16px}
.fcard-name{font-family:var(--f-name);font-weight:700;font-size:30px;line-height:1.35;color:var(--accent)}
.fcard-name .old,.fname .old{font-family:var(--f-ui);font-size:12px;color:var(--muted);font-weight:400;margin-inline-start:6px;text-decoration:line-through}
.fcard-lin{font-family:var(--f-name);font-size:14.5px;color:var(--muted);margin-top:2px}
.fh{font-family:var(--f-name);font-size:19px;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.fh small{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);font-weight:500}
.sons{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.son{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ord main open" "ord tools open";align-items:center;gap:4px 10px;border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:8px 10px}
.son-ord{grid-area:ord;width:26px;height:26px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.son-main{grid-area:main;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.son-tools{grid-area:tools;display:flex;flex-wrap:wrap;gap:5px}
.son-tools:empty{display:none}
.son-open{grid-area:open;border:1px solid var(--accent);background:var(--paper);color:var(--accent);border-radius:12px;padding:8px 12px;font-weight:600;font-size:13.5px;white-space:nowrap}
.son-open:hover{background:var(--accent);color:var(--paper)}
.son .fname{font-family:var(--f-name);font-weight:700;font-size:19px}
.son .fnew,.son .fedit{width:min(200px,100%)}
.mini[disabled]{opacity:.35;cursor:not-allowed}
.addrow{display:flex;gap:8px;margin:4px 0 12px}
.addrow .inp{flex:1;min-width:0;font-family:var(--f-name);font-size:17px}
.mine{list-style:none;margin:0 0 6px;padding:0}
.mine li{padding:6px 0;border-bottom:1px solid var(--soft);font-size:14.5px}
.mine b{font-family:var(--f-name);font-size:16px}
.link{border:0;background:none;color:var(--accent);text-decoration:underline;font-size:13px;padding:0 4px}
#mine,#send{margin-top:14px}
.req-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.req{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.req.past{opacity:.85}
.req-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.req-who{font-family:var(--f-name);font-weight:700;font-size:18px}
.req-branch{font-family:var(--f-name);font-size:14.5px;color:var(--muted)}
.req-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.req-foot .btn{margin-inline-start:auto}
.req-card{border:1px solid var(--line);background:var(--accent-soft);border-radius:16px;padding:14px 16px;margin:12px 0}
.req-card h3{margin:0 0 8px;font-size:16px}
.req-card dl.meta{font-size:14.5px}
.req-sum{margin:10px 0 0;font-size:15px}
.sec-h{font-size:16px;margin:18px 0 8px}
.arow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.arow .from{font-family:var(--f-name);font-size:16px;color:var(--muted)}
.add-group{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:10px;background:var(--bg)}
.add-under{font-size:13.5px;color:var(--muted);margin-bottom:6px}
.add-under b{font-family:var(--f-name);font-size:16px;color:var(--ink)}
.add-tree,.add-tree ul,.add-tree ol{list-style:none;margin:0;padding:0}
.add-tree ul,.add-tree .add-tree{padding-inline-start:20px;border-inline-start:2px dashed var(--ok);margin:4px 12px 4px 0}
.add-tree li{padding:4px 0}
.req-actions{background:var(--paper);border-top:1px solid var(--line);padding:10px 0 4px;margin-top:14px;display:flex;flex-direction:column;gap:8px}
@media (min-width:760px){.req-actions{position:sticky;bottom:0}}`n.kid-of{font-size:12px;color:var(--ok);font-weight:600}`n@media (max-width:520px){.son{grid-template-columns:auto 1fr;grid-template-areas:"ord main" "ord tools" "ord open"}.son-open{justify-self:start}}

.nrow.off>.arow{opacity:.45}
.nrow.off>.arow .rv-name{text-decoration:line-through}
.oldrow{color:var(--muted);font-family:var(--f-name);font-size:15px;display:flex;align-items:center;gap:8px;padding:4px 0}
.add-tree{counter-reset:none}
.add-tree .son-ord{flex:none}
.row-tools{display:inline-flex;flex-wrap:wrap;gap:5px}
.move-ed{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;padding:10px;margin:6px 0 4px}
.move-ed .lbl{margin:0}
.move-ed select{margin-top:4px;font-family:var(--f-name);font-size:15px}
.note.flag{margin:10px 0}

.personal{background:var(--mast-bg);color:var(--mast-ink);border:1px solid var(--gold);border-radius:12px;padding:10px 14px;margin:0 0 14px;text-align:center;font-size:14.5px}
.personal b{color:var(--gold)}
.inp[readonly]{background:var(--soft);font-weight:700;cursor:not-allowed}
.st{font-size:12px;border-radius:999px;padding:1px 9px;border:1px solid var(--line);white-space:nowrap}
.st.del{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.st.done{border-color:var(--gold);color:var(--accent);background:var(--accent-soft);font-weight:700}
.st.wait{color:var(--muted);border-style:dashed}
.brow.col{flex-direction:column;align-items:stretch}
.brow-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dels{display:flex;flex-direction:column;gap:6px;padding-inline-start:12px;border-inline-start:2px solid var(--br)}
.delrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.delrow.off{opacity:.55}
.delrow .dname{font-family:var(--f-name);font-weight:700;font-size:16px}
.delrow .btns{margin-inline-start:auto}
.delrow .btn,.brow-top .btn{padding:3px 9px;font-size:12px}
.deladd{display:flex;flex-wrap:wrap;gap:6px;background:var(--accent-soft);border-radius:10px;padding:8px}
.deladd .inp{flex:1 1 180px}
button.chip{cursor:pointer}
button.chip.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);font-weight:600}

/* while a delegate/branch action is saving, block further clicks */
#v-branches.busy .btns{pointer-events:none;opacity:.55}

/* clear 'back to father' button under the sons list in the form */
.backbtn{display:block;width:100%;margin-top:14px;font-weight:700;border:1.5px solid var(--accent);background:var(--accent-soft);color:var(--accent)}

/* sender's free-text note to the admin; delegate's 'branch complete' claim in the form */
.sub-note{white-space:pre-wrap;display:block;background:var(--accent-soft);border-radius:8px;padding:8px 10px}
textarea.inp{resize:vertical;min-height:84px;line-height:1.7}
.done-claim{background:var(--ok-soft)}