:root{
  --paper:#EDE9E0; --surface:#F7F4ED; --surface2:#E4DFD4;
  --ink:#201E26; --muted:#615E6C; --faint:#8C889A;
  --line:#CFC8BA; --line-soft:#DED8CB;
  --violet:#4E3A72; --violet-soft:#EDE6F5;
  --ochre:#8F6A1C; --ochre-soft:#F2E7CE;
  --sienna:#8A4636; --sienna-soft:#F4E2DC;
  --teal:#2F6259; --teal-soft:#DCE8E4; --bark:#8A7350;
  --shadow:0 1px 2px rgba(32,30,38,.06),0 8px 24px -12px rgba(32,30,38,.18);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#151419; --surface:#1E1C24; --surface2:#282631;
  --ink:#E9E5DC; --muted:#A39FAF; --faint:#7C7889;
  --line:#343140; --line-soft:#2A2833;
  --violet:#B49CE4; --violet-soft:#2A2338;
  --ochre:#D7AC52; --ochre-soft:#332A18;
  --sienna:#D0836D; --sienna-soft:#33211C;
  --teal:#6FB3A5; --teal-soft:#20322E; --bark:#6E5C41;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --paper:#151419; --surface:#1E1C24; --surface2:#282631;
  --ink:#E9E5DC; --muted:#A39FAF; --faint:#7C7889;
  --line:#343140; --line-soft:#2A2833;
  --violet:#B49CE4; --violet-soft:#2A2338;
  --ochre:#D7AC52; --ochre-soft:#332A18;
  --sienna:#D0836D; --sienna-soft:#33211C;
  --teal:#6FB3A5; --teal-soft:#20322E; --bark:#6E5C41;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Spectral",system-ui,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.ar{font-family:"Amiri","IBM Plex Sans Arabic",serif}
.wrap{max-width:1240px;margin:0 auto;padding-inline:18px;padding-block:0}
button,input,select{font:inherit;color:inherit}
a{color:var(--violet)}

header.top{background:var(--surface);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
header.top::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% -20%,var(--violet-soft),transparent 60%);opacity:.75}
.top-in{position:relative;z-index:1;display:flex;gap:18px;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;padding-block:26px 22px}
.brand h1{font-family:"Amiri",serif;font-weight:700;margin:0;
  font-size:clamp(28px,5vw,42px);line-height:1.15;text-wrap:balance}
.brand .sub{margin:.5rem 0 0;color:var(--muted);max-width:60ch;font-size:14.5px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);
  font-weight:600;margin:0 0 .45rem}
.langbar{display:flex;gap:6px;flex-shrink:0}
.pill{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;
  padding:6px 14px;cursor:pointer;font-size:13px;transition:background .15s,color .15s,border-color .15s}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill:hover{border-color:var(--violet);color:var(--violet)}
.pill[aria-pressed="true"]:hover{color:var(--paper)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-block:22px}
.stat{background:var(--surface);padding:14px 16px}
.stat .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin-bottom:4px}
.stat .v{font-family:"Spectral",serif;font-size:26px;font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums}
.bar{height:5px;background:var(--surface2);border-radius:99px;overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;background:var(--ochre);border-radius:99px}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;
  scrollbar-width:none;margin-bottom:22px}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:11px 14px;cursor:pointer;
  color:var(--muted);white-space:nowrap;font-size:14.5px;font-weight:500}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--violet)}
.tab:hover{color:var(--ink)}
.tab .n{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;margin-inline-start:5px}

.note{background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--ochre);
  border-radius:0 8px 8px 0;padding:13px 16px;margin-bottom:18px;font-size:13.5px;color:var(--muted)}
[dir="rtl"] .note{border-radius:8px 0 0 8px}
.note b{color:var(--ink);font-weight:600}
.chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;padding:2px 8px;
  border-radius:99px;letter-spacing:.04em;vertical-align:middle}
.c-high{background:var(--surface2);color:var(--muted)}
.c-medium{background:var(--ochre-soft);color:var(--ochre)}
.c-low{background:var(--sienna-soft);color:var(--sienna)}
.c-saved{background:var(--violet-soft);color:var(--violet)}
h2.sec{font-family:"Spectral",serif;font-size:19px;font-weight:600;margin:0 0 4px}
.sec-note{color:var(--muted);font-size:13.5px;margin:0 0 18px;max-width:78ch}

/* ---------- tree: side index + canvas ---------- */
.treegrid{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:880px){.treegrid{grid-template-columns:1fr}}
.side{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;
  display:flex;flex-direction:column;max-height:min(78vh,720px)}
.side .shead{padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.side input.q{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:8px;
  padding:9px 12px;font-size:14px}
.side input.q:focus{outline:2px solid var(--violet);outline-offset:1px}
.sidescroll{overflow-y:auto;padding:6px 8px 12px}
.genhead{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:12px 8px 5px;position:sticky;top:0;background:var(--surface)}
.idx{display:block;width:100%;text-align:start;background:none;border:0;border-radius:7px;
  padding:6px 9px;cursor:pointer;display:flex;align-items:center;gap:8px}
.idx:hover{background:var(--surface2)}
.idx.on{background:var(--violet-soft)}
.idx .nm{font-family:"Amiri",serif;font-size:18px;line-height:1.3}
.idx .tr{color:var(--faint);font-size:11.5px;}
.idx .tr.ar{font-size:15px;}
.idx .tr{margin-inline-start:auto;white-space:nowrap}
.idx .dot{width:7px;height:7px;border-radius:99px;background:var(--violet);flex:0 0 7px}
.idx .dot.f{background:var(--teal)}
.idx .dot.c{background:var(--sienna)}
.empty{padding:20px 10px;color:var(--faint);font-size:13px;text-align:center}

.canvas{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  height:min(78vh,720px);overflow:hidden;touch-action:none;cursor:grab}
.canvas.drag{cursor:grabbing}
.canvas svg{display:block;width:100%;height:100%}
.tctl{position:absolute;inset-block-start:10px;inset-inline-end:10px;display:flex;gap:5px;z-index:2}
.tctl .btn{background:var(--surface);box-shadow:var(--shadow)}
.branch{fill:none;stroke:var(--bark);stroke-linecap:round}
.ground{stroke:var(--line);stroke-width:1.5;stroke-dasharray:2 5}
.nodeg{cursor:pointer}
.nodeg .pill-bg{fill:var(--surface2);stroke:var(--line);stroke-width:1.2}
.nodeg:hover .pill-bg{stroke:var(--violet)}
.nodeg.sel .pill-bg{fill:var(--violet-soft);stroke:var(--violet);stroke-width:2.4}
.nodeg.dim{opacity:.18}
.nodeg.hit .pill-bg{fill:var(--ochre-soft);stroke:var(--ochre);stroke-width:2}
.nodeg text{font-family:"Amiri",serif;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.nodeg .rootpill{fill:var(--ink);stroke:var(--ink)}
.nodeg.root:not(.sel) text{fill:var(--paper)}
.nodeg.sel .rootpill{fill:var(--violet-soft);stroke:var(--violet)}
.nodeg .fem{fill:var(--teal-soft);stroke:var(--teal)}
.cflag{fill:var(--sienna)}

.person{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:18px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:22px;align-items:start}
@media(max-width:880px){.person{grid-template-columns:1fr}}
.bench{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media(max-width:880px){.bench{grid-template-columns:1fr}}
.benchside{max-height:min(74vh,700px)}
.benchform{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.benchform input{flex:1;min-width:200px;border:1px solid var(--line);background:var(--paper);
  border-radius:8px;padding:9px 12px;font-family:"Amiri",serif;font-size:20px}
.benchform input:focus{outline:2px solid var(--violet);outline-offset:1px}
.thumbs{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.thumb{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:5px;
  cursor:pointer;display:block;width:100%}
.thumb:hover{border-color:var(--violet)}
.thumb.on{border-color:var(--violet);background:var(--violet-soft)}
.thumb.done{border-color:var(--teal)}
.thumb .c{display:block;width:100%;aspect-ratio:120/76;border-radius:5px;background-repeat:no-repeat;
  background-color:#fff;border:1px solid var(--line-soft)}
.thumb .l{display:block;font-size:10px;color:var(--faint);margin-top:3px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb .l.has{color:var(--teal);font-family:"Amiri",serif;font-size:14px}
.docview.tall{height:min(58vh,520px)}
.docview{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--surface2);
  height:330px;overflow:hidden;touch-action:none;cursor:grab}
.docview.drag{cursor:grabbing}
.docview img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;background:#fff}
.docbar{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.docbar .pill{padding:5px 11px;font-size:12px}
.docbar .sp{flex:1}
.docbar .btn{padding:5px 10px;font-size:12.5px}
.docnote{font-size:12px;color:var(--faint);margin-top:6px}
.ring{position:absolute;left:0;top:0;width:52px;height:52px;border:2px solid var(--sienna);border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%);opacity:.85}
.card .x{position:absolute;inset-block-start:8px;inset-inline-end:8px;border:0;background:none;
  color:var(--faint);cursor:pointer;font-size:18px;line-height:1;padding:4px 7px;border-radius:6px}
.card .x:hover{background:var(--surface2);color:var(--ink)}
.person .x{position:absolute;inset-block-start:10px;inset-inline-end:10px;border:0;background:none;
  color:var(--faint);cursor:pointer;font-size:20px;line-height:1;padding:4px 8px;border-radius:6px}
.person .x:hover{background:var(--surface2);color:var(--ink)}
.person .big{font-family:"Amiri",serif;font-size:32px;line-height:1.2;margin:0 26px 0 0}
[dir="rtl"] .person .big{margin:0 0 0 26px}
.person .tr{color:var(--muted);font-family:"Spectral",serif;font-style:italic;margin:2px 0 10px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin-top:10px}
.kv dt{color:var(--faint);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;padding-top:2px}
.kv dd{margin:0}
.crop{width:100%;aspect-ratio:16/10;border-radius:8px;border:1px solid var(--line);
  background-repeat:no-repeat;background-color:#fff;position:relative;overflow:hidden;margin-top:6px}
.crop::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border:2px solid var(--sienna);border-radius:50%;opacity:.75}
.crop.plain::after{display:none}
.conflict{background:var(--sienna-soft);color:var(--sienna);border-radius:8px;padding:10px 12px;
  font-size:12.5px;margin-top:12px;line-height:1.55}
.conflict b{display:block;margin-bottom:3px}
.byline{font-size:12px;color:var(--violet);margin-top:8px}
.tray{position:sticky;bottom:0;z-index:6;margin-top:14px;background:var(--surface);
  border:1px solid var(--violet);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.tray .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tray .cnt{font-weight:600}
.tray .cnt b{font-family:"Spectral",serif;font-size:19px;margin-inline-end:4px}
.tray .sp{flex:1}
.tray ul{list-style:none;margin:10px 0 0;padding:0;max-height:180px;overflow:auto}
.tray li{display:flex;gap:10px;align-items:baseline;padding:6px 2px;
  border-top:1px solid var(--line-soft);font-size:13px}
.tray .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);
  font-weight:600;flex:0 0 auto}
.tray .d{flex:1;min-width:0}
.tray .rm{border:0;background:none;color:var(--faint);cursor:pointer;padding:2px 6px;border-radius:5px}
.tray .rm:hover{background:var(--surface2);color:var(--sienna)}
.ok{background:var(--teal-soft);color:var(--teal);border-radius:8px;padding:10px 14px;
  font-size:13px;margin-top:12px}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.acts .btn{font-size:12.5px;padding:6px 10px}
.acts .btn.good{border-color:var(--teal);color:var(--teal)}
.acts .btn.bad{border-color:var(--sienna);color:var(--sienna)}
.editrow{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.editrow input,.editrow select{border:1px solid var(--line);background:var(--paper);
  border-radius:7px;padding:7px 10px;font-size:14px;width:100%}
.editrow input.arin{font-family:"Amiri",serif;font-size:18px}
.nodeg.draft .pill-bg{stroke:var(--violet);stroke-dasharray:3 2;stroke-width:2}
.nodeg.prop .pill-bg{stroke:var(--ochre);stroke-width:2}
.prop{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:12px 14px;margin-bottom:10px}
.prop .h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.prop .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);font-weight:600}
.prop .who{color:var(--faint);font-size:12px;margin-inline-start:auto}
.prop .body{margin-top:6px;font-size:14px}
.prop .body .ar{font-size:19px}
.batch{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:20px 0 8px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legend .lg{display:inline-flex;align-items:center;gap:5px}
.legend i{width:11px;height:11px;border-radius:99px;display:inline-block}
.sw-m{background:var(--surface2);border:1.5px solid var(--line)}
.sw-f{background:var(--teal-soft);border:1.5px solid var(--teal)}
.sw-c{background:var(--sienna)}

/* ---------- chain ---------- */
.chain{border-inline-start:2px solid var(--line);margin-inline-start:26px}
.gen{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:9px 0}
.gen .num{width:52px;margin-inline-start:-27px;text-align:center;font-variant-numeric:tabular-nums;
  font-family:"Spectral",serif;font-size:12px;color:var(--faint);background:var(--paper);
  padding:2px 0;border-radius:99px;border:1px solid var(--line)}
.gen .who .a{font-family:"Amiri",serif;font-size:22px;line-height:1.3}
.gen .who .b{color:var(--muted);font-size:12.5px;font-family:"Spectral",serif;font-style:italic}
.gen.prophet .num{border-color:var(--ochre);color:var(--ochre)}
.gen.prophet .who .a{color:var(--ochre)}
.gen.imam .num{border-color:var(--violet);color:var(--violet)}
.gen.eponym .num{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- originals ---------- */
.viewer{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface2);
  position:relative;height:min(76vh,720px);touch-action:none;cursor:grab}
.viewer.drag{cursor:grabbing}
.viewer img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;opacity:0;
  transition:opacity .18s}
.vctl{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.vctl .spacer{flex:1}

/* ---------- complete ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ucard{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:10px;
  display:flex;flex-direction:column;gap:8px}
.ucard.done{border-color:var(--violet)}
.ucard .idl{font-size:10px;letter-spacing:.1em;color:var(--faint);font-weight:600}
.ucard input{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:7px;
  padding:8px 10px;font-family:"Amiri",serif;font-size:19px}
.ucard input:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.btn{border:1px solid var(--line);background:var(--surface2);border-radius:7px;padding:7px 12px;
  cursor:pointer;font-size:13px;font-weight:500}
.btn:hover{border-color:var(--violet);color:var(--violet)}
.btn.pri{background:var(--violet);color:#fff;border-color:var(--violet)}
.btn.pri:hover{opacity:.88;color:#fff}
.btn[disabled]{opacity:.5;cursor:default}
.whobox{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:18px}
.whobox label{font-size:13px;color:var(--muted)}
.whobox input{flex:1;min-width:180px;border:1px solid var(--line);background:var(--paper);
  border-radius:7px;padding:8px 11px;font-size:14px}
.offline{background:var(--sienna-soft);color:var(--sienna);border-radius:8px;padding:10px 14px;
  font-size:13px;margin-bottom:16px}
.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.feed li{display:flex;gap:12px;align-items:baseline;padding:7px 2px;
  border-bottom:1px solid var(--line-soft);font-size:13px}
.feed .a{font-family:"Amiri",serif;font-size:18px;flex:1;min-width:0}
.feed .by{color:var(--violet);font-size:12px}
.feed .when{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.fixrow{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.fixrow input{border:1px solid var(--line);background:var(--paper);border-radius:7px;padding:8px 10px;
  font-family:"Amiri",serif;font-size:19px}
footer{border-top:1px solid var(--line);margin-top:44px;padding-block:22px 34px;
  color:var(--faint);font-size:12.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}