*{box-sizing:border-box}
html{overflow-x:clip;font-size:var(--base);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100dvh;background:var(--bg);background-image:var(--grain),var(--vignette),var(--page-bg);background-attachment:fixed;color:var(--text);
  font-family:var(--f-body);line-height:1.7;overflow-x:hidden;font-variant-numeric:lining-nums tabular-nums}
.num,[dir=ltr]{unicode-bidi:isolate}
h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.35;margin:0 0 12px}
h1{font-size:1.625rem}h2{font-size:1.25rem}h3{font-size:1rem;color:var(--text-dim)}
p{margin:0 0 12px}
a{color:var(--accent-text)}
:focus-visible{outline:3px solid var(--gold-soft);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dim{color:var(--text-dim)}.hint{color:var(--text-hint);font-size:.875rem}
.gold-text{background:var(--title-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:background-position var(--dur-4) var(--ease)}
.gold-text:hover{background-position:100% 0}

/* ───────── الهيكل ───────── */
#shell{display:flex;flex-direction:column;min-height:100dvh}
.topbar{height:56px;flex:0 0 56px;display:flex;align-items:center;gap:8px;min-width:0;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
  background:linear-gradient(180deg,var(--raised),var(--surface));border-bottom:1px solid var(--rule);box-shadow:var(--e2);position:relative;z-index:30}
.topbar::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:var(--gold-leaf);opacity:.7}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-inline-end:auto;min-width:0}
.brand svg{flex:0 0 34px}
.brand b{font-family:var(--f-display);font-size:1.5rem;font-weight:700;line-height:1}
.brand span{font-size:.875rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav{display:flex;gap:4px;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.brand{flex:0 1 auto;overflow:hidden}
@media (max-width:1180px){.brand span{display:none}}
@media (max-width:1020px){.rolechip{display:none}}
.topnav a{font-family:var(--f-head);text-decoration:none;color:var(--text-dim);padding:8px 12px;border-radius:var(--r-sm);font-size:.9375rem;white-space:nowrap}
.topnav a:hover{color:var(--text);background:var(--sheen)}
.topnav a[aria-current=page]{color:var(--accent-text);box-shadow:inset 0 -2px 0 var(--accent)}
.rolechip{font-size:.875rem;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--rule);color:var(--text-dim);white-space:nowrap}
main{flex:1 1 auto;width:100%;max-width:1180px;margin:0 auto;padding:20px 16px 96px}
main.wide{max-width:none;padding:0}
.bottomnav{display:none}
@media (max-width:860px){
  .topnav,.rolechip{display:none}
  .brand span{display:inline}
  .bottomnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset:auto 0 0 0;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:linear-gradient(180deg,var(--raised),var(--surface));border-top:1px solid var(--rule);box-shadow:0 -8px 24px var(--shadow-col);z-index:40;transition:transform var(--dur-2) var(--ease)}
  .bottomnav.hide{transform:translateY(110%)}
  .bottomnav a{overflow:hidden;white-space:nowrap;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--text-dim);font-size:.8125rem;font-family:var(--f-head);min-height:48px}
  .bottomnav a svg{width:24px;height:24px}
  .bottomnav a[aria-current=page]{color:var(--accent-text)}
  .bottomnav a[aria-current=page] svg{filter:drop-shadow(0 0 6px rgba(201,162,39,.6))}
}

/* ───────── سهم الرجوع: ميدالية ذهبية ───────── */
.back{position:relative;width:48px;height:48px;flex:0 0 48px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.back i{position:absolute;inset:2px;border-radius:50%;background:var(--gold-leaf);background-size:200% 200%;box-shadow:0 3px 0 var(--gold-deep),0 8px 16px var(--shadow-col),inset 0 1px 0 rgba(255,255,255,.6);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background-position var(--dur-4) var(--ease)}
.back i::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--ink-4),var(--void));box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.back svg{position:relative;width:24px;height:24px;stroke:var(--gold-soft);transition:transform var(--dur-2) var(--ease-out)}
.back .star{position:absolute;inset:-5px;width:auto;height:auto;stroke:var(--gold);opacity:0;transition:opacity var(--dur-2),transform var(--dur-3) var(--ease-out)}
.back:hover i{background-position:100% 100%;box-shadow:0 3px 0 var(--gold-deep),0 10px 22px var(--shadow-col),var(--glow-gold),inset 0 1px 0 rgba(255,255,255,.7)}
.back:hover svg.arrow{transform:translateX(3px)}
.back:hover .star{opacity:.8;transform:rotate(22.5deg)}
.back:active i{transform:translateY(3px);box-shadow:0 0 0 var(--gold-deep),0 2px 6px var(--shadow-col),inset 0 1px 0 rgba(255,255,255,.4)}
.back:active svg.arrow{transform:translate(3px,3px)}
.back[disabled]{opacity:.35;cursor:default;pointer-events:none}

/* ───────── الأزرار: تُكبس فعلاً — خمس طبقات (ظل · سُمك · وجه · لمعة · هالة) ───────── */
.btn{--face:var(--gold-leaf);--side:var(--gold-deep);--ink-b:var(--btn-ink);--depth:4px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:14px;cursor:pointer;
  font:600 1rem var(--f-head);color:var(--ink-b);text-decoration:none;background:var(--face);background-size:220% 100%;isolation:isolate;overflow:visible;
  box-shadow:0 var(--depth) 0 var(--side),0 calc(var(--depth) + 8px) 18px var(--shadow-col),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(0,0,0,.18);
  transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background-position var(--dur-4) var(--ease);-webkit-tap-highlight-color:transparent;user-select:none}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;overflow:hidden;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);background-size:260% 100%;background-position:120% 0;transition:background-position 0s;mix-blend-mode:soft-light}
.btn:hover{background-position:100% 0;box-shadow:0 var(--depth) 0 var(--side),0 calc(var(--depth) + 12px) 26px var(--shadow-col),var(--glow-gold),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.18);transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px)}
.btn:hover::before{background-position:-40% 0;transition:background-position var(--dur-4) var(--ease)}
.btn:active{transform:perspective(600px) translateY(calc(var(--depth) - 1px));box-shadow:0 1px 0 var(--side),0 3px 8px var(--shadow-col),inset 0 2px 4px rgba(0,0,0,.28)}
.btn:disabled{filter:grayscale(.6) brightness(.8);cursor:not-allowed;transform:none}
.btn.wood{--face:linear-gradient(135deg,#5A2A00 0%,#8E4300 30%,#B0640A 50%,#8E4300 70%,#5A2A00 100%);--side:#351800;--ink-b:#FFF4DC}
.btn.leaf{--face:linear-gradient(135deg,#0F3D1E 0%,#1F6B33 30%,#3FA457 50%,#1F6B33 70%,#0F3D1E 100%);--side:#082712;--ink-b:#FFFFFF}
.btn.sky{--face:linear-gradient(135deg,#123A55 0%,#245F82 30%,#4C97C2 50%,#245F82 70%,#123A55 100%);--side:#0A2436;--ink-b:#FFFFFF}
.btn.rose{--face:linear-gradient(135deg,#4F1F45 0%,#7E3F72 30%,#B36BA6 50%,#7E3F72 70%,#4F1F45 100%);--side:#32122B;--ink-b:#FFFFFF}
.btn.danger{--face:linear-gradient(135deg,#5E0F1E 0%,#A32640 30%,#D9506A 50%,#A32640 70%,#5E0F1E 100%);--side:#3A0812;--ink-b:#FFFFFF}
.btn.ghost{--face:linear-gradient(180deg,var(--raised),var(--card));--side:var(--rule);--ink-b:var(--text);--depth:3px;box-shadow:0 var(--depth) 0 var(--side),0 8px 16px var(--shadow-col),inset 0 0 0 1px var(--rule),inset 0 1px 0 var(--sheen)}
.btn.ghost:hover{box-shadow:0 var(--depth) 0 var(--side),0 12px 22px var(--shadow-col),var(--glow-gold),inset 0 1px 0 var(--sheen)}
.btn.sm{min-height:48px;padding:0 14px;font-size:.9375rem;border-radius:12px;--depth:3px}
.btn.icon{width:48px;padding:0;flex:0 0 48px}
.btn.block{display:flex;width:100%}
.btn[aria-pressed=true]{transform:translateY(calc(var(--depth) - 1px));box-shadow:0 1px 0 var(--side),0 2px 6px var(--shadow-col),inset 0 2px 5px rgba(0,0,0,.3),var(--glow-gold)}
.btn svg{width:22px;height:22px;flex:0 0 22px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.row.end{justify-content:flex-end}.grow{flex:1 1 220px;min-width:0}

/* ───────── الألواح والإطار الزخرفي ───────── */
.panel{position:relative;background:linear-gradient(180deg,var(--raised) 0%,var(--surface) 100%);background-image:var(--grain),linear-gradient(180deg,var(--raised) 0%,var(--surface) 100%);
  border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px;box-shadow:var(--e3);margin-bottom:24px}
.panel.framed{border:0;padding:28px}
.panel.framed::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--gold-leaf);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.panel.framed::after{content:"";position:absolute;inset:8px;border-radius:calc(var(--r-lg) - 8px);border:1px solid rgba(201,162,39,.35);border-color:color-mix(in srgb,var(--accent) 35%,transparent);pointer-events:none}
.corner{position:absolute;width:34px;height:34px;stroke:var(--accent);fill:none;opacity:.85;pointer-events:none}
.corner.tr{top:2px;right:2px}.corner.tl{top:2px;left:2px;transform:scaleX(-1)}.corner.br{bottom:2px;right:2px;transform:scaleY(-1)}.corner.bl{bottom:2px;left:2px;transform:scale(-1)}
.narrow{max-width:480px;margin-inline:auto}
.divider{display:block;width:min(420px,80%);height:28px;margin:8px auto 20px;stroke:var(--accent);fill:none;opacity:.9}
.card{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:16px;box-shadow:0 2px 0 var(--rule),0 10px 18px var(--shadow-col),inset 0 1px 0 var(--sheen)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.enter>*{animation:rise var(--dur-2) var(--ease-out) both}
.enter>*:nth-child(2){animation-delay:40ms}.enter>*:nth-child(3){animation-delay:80ms}.enter>*:nth-child(4){animation-delay:120ms}.enter>*:nth-child(5){animation-delay:160ms}.enter>*:nth-child(n+6){animation-delay:200ms}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* ───────── الصدر: سلسلة النسب ───────── */
.hero{text-align:center;padding:36px 16px 8px}
.lineage{font-family:var(--f-display);font-weight:700;font-size:clamp(1.75rem,5.2vw,3rem);line-height:1.5;margin:0}
.hero .sub{font-family:var(--f-head);color:var(--text-dim);font-size:1.0625rem;margin:6px 0 0}
.counters{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:8px 0 28px}
.counter{min-width:200px;padding:14px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--rule);box-shadow:var(--e2);text-align:center}
.counter b{display:block;font:700 2.125rem/1.2 var(--f-head)}
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:28px}
.tile{--depth:6px;flex-direction:column;min-height:124px;padding:16px 10px;border-radius:20px;font-size:1.0625rem;text-align:center}
.tile svg{width:38px;height:38px;flex:0 0 38px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.tile small{font:400 .8125rem var(--f-body);opacity:.85}
.branchcard{display:block;text-decoration:none;color:var(--text);transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2)}
.branchcard:hover{transform:translateY(-3px);box-shadow:0 2px 0 var(--rule),0 16px 28px var(--shadow-col),var(--glow-leaf)}
.branchcard .strip{position:absolute;inset:0 0 0 auto;width:8px;border-radius:0 var(--r) var(--r) 0}
.branchcard b{font:600 1.125rem var(--f-head)}
.meter{height:8px;border-radius:99px;background:var(--field);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4);margin:4px 0 2px}
.meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--leaf-deep),var(--leaf-lit))}
.disclaimer{text-align:center;color:var(--text-hint);font-size:.875rem;max-width:640px;margin:24px auto 0}

/* ───────── النماذج ───────── */
label.f{display:block;font:500 .9375rem var(--f-head);margin:14px 0 6px;color:var(--text-dim)}
input,select,textarea{width:100%;min-height:48px;font:400 1rem var(--f-body);padding:10px 14px;border-radius:12px;border:1px solid var(--rule);background:var(--field);color:var(--text);box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:inset 0 2px 4px rgba(0,0,0,.25),var(--glow-gold)}
input[type=checkbox]{width:24px;min-height:24px;height:24px;flex:0 0 24px;accent-color:var(--gold);box-shadow:none}
input[dir=ltr]{text-align:left}
.check{display:flex;gap:10px;align-items:flex-start;margin:14px 0;min-height:48px}
.err{color:var(--danger);font-weight:600;margin:10px 0;min-height:1.2em}
.okmsg{color:var(--ok);font-weight:600;margin:10px 0}
.note{border:1px solid var(--rule);border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));border-inline-start:4px solid var(--accent);background:var(--card);border-radius:12px;padding:10px 14px;margin:12px 0;font-size:.9375rem}
.switch{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.switch i{flex:0 0 54px;height:30px;border-radius:99px;background:var(--field);border:1px solid var(--rule);position:relative;box-shadow:inset 0 2px 4px rgba(0,0,0,.4);transition:background var(--dur-2)}
.switch i::after{content:"";position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#fff,#cfc7b4);box-shadow:0 2px 4px rgba(0,0,0,.5);transition:transform var(--dur-2) var(--ease-out)}
.switch input:checked+i{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.switch input:checked+i::after{transform:translateX(-24px)}
.switch input:focus-visible+i{outline:3px solid var(--gold-soft);outline-offset:2px}

/* ───────── جداول وشارات ───────── */
.tablewrap{overflow-x:auto;border-radius:12px;border:1px solid var(--rule)}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
th{font:600 .875rem var(--f-head);color:var(--text-dim);background:var(--surface);position:sticky;top:0}
th,td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:start;vertical-align:top}
tr:last-child td{border-bottom:0}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:99px;font-size:.875rem;border:1px solid var(--rule);background:var(--surface);white-space:nowrap}
.badge.ok{border-color:var(--ok);color:var(--ok)}.badge.warn{border-color:var(--warn);color:var(--warn)}.badge.bad{border-color:var(--danger);color:var(--danger)}
.gchip{display:inline-flex;align-items:center;gap:6px;font:500 .875rem var(--f-head)}
.gchip i{width:12px;height:12px;border-radius:3px;display:inline-block}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}
.tabs .btn{flex:0 0 auto}
del{color:var(--danger)}ins{color:var(--ok);text-decoration:none;font-weight:600}

/* ───────── الفرد ───────── */
.pname{font:700 clamp(1.75rem,5vw,2.5rem)/1.4 var(--f-display);margin:0}
.ribbon{font-family:var(--f-head);font-size:1.0625rem;color:var(--text-dim);margin:4px 0 12px}
.ribbon a{color:inherit;text-decoration:none;border-bottom:1px dashed var(--rule);padding:6px 0;display:inline-block}
.ribbon a:hover{color:var(--accent-text)}
.kv{display:grid;grid-template-columns:8.5rem 1fr;gap:6px 14px;margin:8px 0}
.kv dt{color:var(--text-dim)}.kv dd{margin:0;font-weight:500}
.life{list-style:none;margin:0;padding:0 18px 0 0;border-inline-start:2px solid var(--rule)}
.life li{position:relative;padding:6px 16px 14px}
.life li::before{content:"";position:absolute;inset-inline-start:-8px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--gold-leaf);box-shadow:0 0 0 3px var(--card)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--rule);background:var(--card);color:var(--text);font:500 .9375rem var(--f-head);cursor:pointer;text-decoration:none;
  box-shadow:0 2px 0 var(--rule),inset 0 1px 0 var(--sheen);border-inline-start:5px solid var(--gc,var(--rule));transition:transform var(--dur-1),box-shadow var(--dur-1)}
.pchip:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--rule),var(--glow-gold)}
.pchip:active{transform:translateY(1px);box-shadow:0 1px 0 var(--rule)}
.pchip small{color:var(--text-hint);font:400 .8125rem var(--f-body)}

/* ───────── تواصل معنا والتذييل ───────── */
.ways{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.way{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.way>svg{width:40px;height:40px;flex:0 0 40px;stroke:var(--accent)}
.way b{font:600 clamp(.9375rem,4.2vw,1.125rem) var(--f-body);display:block;white-space:nowrap}
.sitefoot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin:32px auto 0;padding:16px 8px;border-top:1px solid var(--rule);color:var(--text-hint);font-size:.9375rem}
.sitefoot a{color:var(--text-dim);text-decoration:none;min-height:48px;display:inline-flex;align-items:center;padding:0 6px}
.sitefoot a:hover{color:var(--accent-text)}
.sitefoot span{color:var(--accent);font-size:.6rem}
/* ───────── البحث ───────── */
.searchbox{position:relative}
.searchbox input{min-height:56px;font-size:1.125rem;padding-inline-start:52px;border-radius:16px}
.searchbox>svg{position:absolute;inset-inline-start:16px;top:16px;width:24px;height:24px;stroke:var(--accent)}
.sugg{list-style:none;margin:8px 0 0;padding:6px;border-radius:16px;background:var(--card);border:1px solid var(--rule);box-shadow:var(--e3);max-height:60vh;overflow:auto}
.sugg li{padding:10px 12px;border-radius:12px;cursor:pointer;min-height:48px;border-inline-start:5px solid var(--gc,transparent)}
.sugg li[aria-selected=true],.sugg li:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent)}
.sugg b{font:600 1rem var(--f-head)}
.sugg .meta{display:block;color:var(--text-hint);font-size:.875rem}
.sugg .grp{padding:8px 12px 2px;color:var(--accent-text);font:600 .875rem var(--f-head);cursor:default;min-height:0;border:0}
.sugg .grp:hover{background:none;box-shadow:none}

/* ───────── هياكل الانتظار والحالات ───────── */
.skel{border-radius:12px;min-height:56px;margin-bottom:12px;background:linear-gradient(100deg,var(--card) 30%,rgba(201,162,39,.3) 48%,var(--card) 66%);background-size:260% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-160% 0}}
.empty{text-align:center;padding:36px 12px;color:var(--text-dim)}
.empty svg{width:72px;height:72px;stroke:var(--accent);fill:none;opacity:.8;display:block;margin:0 auto 12px}

/* ───────── الحوارات واللوحات السفلية والتنبيهات ───────── */
dialog{border:0;padding:0;background:none;color:var(--text);max-width:min(600px,94vw);width:100%;overflow:visible}
dialog::backdrop{background:radial-gradient(80% 80% at 50% 40%,rgba(7,13,18,.55),rgba(7,13,18,.86));backdrop-filter:blur(6px)}
dialog .panel{margin:0;box-shadow:var(--e4);max-height:86dvh;overflow:auto}
dialog[open] .panel{animation:rise var(--dur-2) var(--ease-out)}
@media (max-width:640px){dialog{margin:auto 0 0;max-width:100vw}dialog .panel{border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}dialog[open] .panel{animation:sheet var(--dur-3) var(--ease-out)}}
@keyframes sheet{from{transform:translateY(100%)}}
.grab{width:44px;height:5px;border-radius:99px;background:var(--rule);margin:-8px auto 14px;display:none}
@media (max-width:640px){.grab{display:block}}
#toast{position:fixed;inset-inline:16px;bottom:calc(84px + env(safe-area-inset-bottom));margin:auto;max-width:440px;padding:12px 18px;border-radius:14px;text-align:center;z-index:90;
  background:linear-gradient(180deg,var(--ink-4),var(--ink-2));color:var(--vellum);box-shadow:var(--e4),var(--glow-gold);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity var(--dur-2),transform var(--dur-2) var(--ease-out)}
#toast.show{opacity:1;transform:none}

/* ───────── الإحصاءات ───────── */
.bars{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center}
.bars .bar{height:22px;border-radius:6px;background:var(--field);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.bars .bar i{display:block;height:100%;border-radius:inherit;min-width:2px}
.kin{font:700 clamp(1.5rem,4.5vw,2.25rem)/1.5 var(--f-display);text-align:center;margin:8px 0}
.kinpath{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:12px}
.kinpath ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:0}
.kinpath li::before{content:"";display:block;width:3px;height:16px;margin:0 auto;background:linear-gradient(var(--bark-lit),var(--bark))}
.kintop{display:flex;justify-content:center;margin-top:12px}
.kinpath{margin-top:0}

/* ───────── تقليل الحركة ووضع الأداء المنخفض ───────── */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root[data-low="1"] *,:root[data-low="1"] *::before,:root[data-low="1"] *::after{animation:none!important;transition-duration:80ms!important;backdrop-filter:none!important}
:root[data-low="1"] .panel,:root[data-low="1"] .card,:root[data-low="1"] .btn{box-shadow:0 2px 0 var(--rule)}
:root[data-low="1"] .corner,:root[data-low="1"] .divider{display:none}
:root[data-low="1"] body{background-image:var(--page-bg)}

@media print{
  body{background:#fff;color:#000}
  .topbar,.bottomnav,#toast,.noprint,.tree-toolbar,.tree-path,.tree-under,.tree-legend-toggle,.rail{display:none!important}
  main{padding:0;max-width:none}
  .panel{box-shadow:none;border:1px solid #999;background:#fff}
  .corner,.divider,.panel.framed::before,.panel.framed::after{display:none}
  .gold-text{-webkit-text-fill-color:#000;color:#000;background:none}
}

/* ───────── جرس الإشعارات ───────── */
.bell{position:relative;flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--rule);background:var(--surface);color:var(--accent-text);cursor:pointer;
  box-shadow:0 2px 0 var(--gold-deep),var(--e1);transition:transform var(--dur-2) var(--ease)}
.bell svg{width:22px;height:22px}
.bell:hover{transform:translateY(-1px)}
.bell:active{transform:translateY(1px);box-shadow:0 1px 0 var(--gold-deep)}
.bell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bell-n{position:absolute;top:-4px;inset-inline-end:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#B3261E;color:#fff;font-size:.75rem;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.bell.ring svg{animation:bellring 1.6s var(--ease) 2;transform-origin:50% 10%}
@keyframes bellring{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}40%{transform:rotate(-6deg)}50%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.bell.ring svg{animation:none}}
[data-low="1"] .bell.ring svg{animation:none}
.nlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;max-height:60vh;overflow:auto}
.nlist li{border:1px solid var(--rule);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface)}
.nlist li.new{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.nlist a{display:grid;gap:2px;text-decoration:none;color:var(--text)}
.nlist .nbody{color:var(--text-dim);font-size:.9375rem}
.ndel{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ndel .badge{font-size:.75rem}
.nmatrix td{text-align:center}
.nmatrix th[scope=row]{text-align:start;font-weight:600}

/* ───────── تواصل معنا — بطاقات حيّة ───────── */
.ways2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.way2{position:relative;display:flex;flex-direction:column;gap:8px;animation:rise var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i) * 90ms)}
.way2-main{--c1:#1F4E6E;--c2:#2F6C8C;position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:18px;border-radius:var(--r-lg);text-decoration:none;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 5px 0 rgba(0,0,0,.28),0 16px 28px var(--shadow-col),inset 0 1px 0 rgba(255,255,255,.35);
  transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.way2.tel .way2-main{--c1:#5E3F05;--c2:#8A6512}
.way2.wa .way2-main{--c1:#14532A;--c2:#1F7040}
.way2-main::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s var(--ease)}
.way2-main:hover{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);box-shadow:0 8px 0 rgba(0,0,0,.28),0 22px 36px var(--shadow-col),inset 0 1px 0 rgba(255,255,255,.4)}
.way2-main:hover::before{background-position:-40% 0}
.way2-main:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.28),0 6px 12px var(--shadow-col)}
.way2-main:focus-visible{outline:3px solid var(--gold-soft,#E8CE74);outline-offset:3px}
.medal{position:relative;grid-row:span 2;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),rgba(255,255,255,.12) 60%);box-shadow:inset 0 0 0 2px rgba(255,240,184,.7),0 4px 10px rgba(0,0,0,.25)}
.medal svg{width:28px;height:28px;stroke:#fff}
.medal .ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(255,240,184,.75);opacity:0;animation:ping 2.6s var(--ease-out) infinite;animation-delay:calc(var(--i) * .8s)}
@keyframes ping{0%{transform:scale(.85);opacity:.9}70%,100%{transform:scale(1.45);opacity:0}}
.way2.tel .medal svg{animation:ringphone 3.2s var(--ease) infinite;transform-origin:50% 50%}
@keyframes ringphone{0%,78%,100%{transform:rotate(0)}80%{transform:rotate(-14deg)}84%{transform:rotate(12deg)}88%{transform:rotate(-10deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
.way2-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.way2-txt small{font-size:.875rem;opacity:.9}
.way2-txt b{font:700 clamp(1rem,4.4vw,1.25rem) var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.way2-txt em{font-style:normal;font-size:.8125rem;opacity:.85}
.way2-cta{grid-column:2;display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:4px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);font-weight:700;font-size:.9375rem}
.way2-cta svg{width:16px;height:16px;transform:scaleX(-1);transition:transform var(--dur-2) var(--ease)}
.way2-main:hover .way2-cta svg{transform:scaleX(-1) translateX(4px)}
.way2>.btn{align-self:flex-start}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{min-height:44px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:transform var(--dur-1),background var(--dur-2),box-shadow var(--dur-2)}
.chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px var(--shadow-col)}
.chip[aria-checked="true"]{background:linear-gradient(180deg,#F3DE93,#E2C35E);color:#2A1B00;border-color:transparent;font-weight:700;box-shadow:0 3px 0 var(--gold-deep),0 6px 14px var(--shadow-col)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.meter{flex:1;height:6px;border-radius:3px;background:var(--rule);overflow:hidden;margin-inline-end:12px}
.meter i{display:block;height:100%;width:calc(var(--p,0) * 100%);min-width:4px;background:var(--warn,#B8860B);transition:width var(--dur-2) var(--ease),background var(--dur-2)}
.meter.ok i{background:var(--ok)}
.row.between{justify-content:space-between;align-items:center;flex-wrap:nowrap}
.sent{display:grid;justify-items:center;text-align:center;gap:6px;padding:18px 8px;animation:rise var(--dur-3) var(--ease-out) both}
.sent .tick{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1F5B2E,#2E8B45);box-shadow:0 4px 0 #14401f,0 10px 20px var(--shadow-col);animation:pop .5s var(--ease-grow) both}
.sent .tick svg{width:34px;height:34px;stroke:#fff;stroke-width:3;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .25s var(--ease-out) forwards}
.sent b{font-size:1.25rem;color:var(--ok)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.way2,.medal .ring,.way2.tel .medal svg,.sent,.sent .tick,.sent .tick svg{animation:none!important}.medal .ring{display:none}.sent .tick svg{stroke-dashoffset:0}}
[data-low="1"] .medal .ring,[data-low="1"] .way2.tel .medal svg{animation:none}
.way2.mail .way2-txt b{white-space:normal;overflow:visible;overflow-wrap:anywhere;font-size:clamp(.9375rem,3.9vw,1.125rem)}
@media (max-width:420px){.way2-main{gap:4px 12px;padding:16px 14px}.medal{width:46px;height:46px}.medal svg{width:22px;height:22px}.way2-cta{white-space:nowrap;font-size:.875rem}}
.way2-txt b.num{direction:ltr;unicode-bidi:isolate;text-align:end}
.kin-double{background:linear-gradient(180deg,#F3DE93,#E2C35E);color:#2A1B00;border-color:#8A6512}
.kin-also ol{margin:8px 0 0;padding-inline-start:22px;display:grid;gap:8px}
.kin-also li{line-height:1.7}
.kin-far summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.kin-far ol{margin:6px 0 0;padding-inline-start:22px;display:grid;gap:6px}
/* ═══ صياغة القرابة (تحديث 23.1): الصلة من الطرفين، وسببها، ودرجتها، وشجرة الطريقين ═══ */
.kin-kicker{text-align:center;margin:0 0 4px;color:var(--text-dim);font:600 1rem var(--f-head)}
.kin-rev{text-align:center;margin:2px 0 10px;font:600 1.15rem var(--f-head);color:var(--text)}
.kin-rel{border:1px solid var(--rule);border-inline-start:4px solid var(--gold);background:var(--card);border-radius:14px;padding:12px 14px;margin:14px 0}
.kin-rel.first{border-inline-start-width:6px;box-shadow:0 2px 0 var(--rule)}
.kin-rel header{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:6px}
.kin-no{font:700 .875rem var(--f-head);color:var(--gold-deep);background:color-mix(in srgb,var(--gold-soft) 35%,transparent);border-radius:999px;padding:3px 10px}
.kin-sides{font-size:.875rem;color:var(--text-dim)}
.kin-label{margin:4px 0;font:700 1.1rem var(--f-head);color:var(--text)}
.kin-pair{display:grid;gap:2px;margin:4px 0 8px;font:600 1rem var(--f-head);line-height:1.8}
.kin-pair span+span{color:var(--text-dim)}
.kin-pair span+span::before{content:"و"}
.kin-why,.kin-deg{margin:6px 0;line-height:1.8;font-size:.9375rem}
.kin-why b{color:var(--gold-deep)}
.kin-deg b{color:var(--text)}
.kin-way summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;color:var(--gold-deep)}
.kin-sum{font-weight:600}
.kin-far-list .kin-rel{margin:10px 0}
.kinfork{margin:12px 0 4px}
.kf-top{display:flex;justify-content:center}
.kf-top::after{content:none}
.kf-cols{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;padding-top:0}
.kf-cols::before{content:"";position:absolute;top:-16px;left:50%;width:3px;height:16px;margin-left:-1.5px;background:var(--bark)}
.kf-cols::after{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;background:linear-gradient(90deg,var(--bark-lit),var(--bark),var(--bark-lit));border-radius:2px}
.kf-cols.one{grid-template-columns:1fr}
.kf-cols.one::after{content:none}
.kf-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.kf-col li{display:flex;flex-direction:column;align-items:center;max-width:100%}
.kf-col li::before{content:"";display:block;width:3px;height:14px;background:linear-gradient(var(--bark-lit),var(--bark))}
.kf-col .pchip{min-height:42px;padding:0 10px;font-size:.875rem;max-width:100%;flex-wrap:wrap;justify-content:center;gap:4px 6px;text-align:center}
.kf-col li.end .pchip{border-color:var(--gold);border-width:2px;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-soft) 45%,transparent)}
@media (max-width:380px){.kf-col .pchip small{display:none}}
.kin-far ol.kf-col,.kin-also ol.kf-col{display:flex;gap:0;margin:0;padding:0}
.kf-cols{align-items:start}
/* صلات المصاهرة (تحديث 23.3) */
.kin-h{margin:18px 0 4px;font:700 1.05rem var(--f-head);color:var(--gold-deep)}
.kin-aff{border-inline-start-color:#8E5BA8}
.kin-no.aff{color:#4A1F63;background:#E7D3F0}
.kin-affb{background:linear-gradient(180deg,#E7D3F0,#CFADE0);color:#3B1450;border-color:#7A4B94}
/* ═══ التواصل الحيّ والتقييمات (تحديث 23.8) ═══ */
.chatfab{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;border-radius:999px;border:1px solid #8A6512;
  background:linear-gradient(180deg,#F3DE93,#E2C35E);color:#2A1B00;font:700 1rem var(--f-head);box-shadow:0 6px 0 #8A6512,0 10px 24px rgba(0,0,0,.25);cursor:pointer}
.chatfab svg{width:22px;height:22px}
.chatfab:active{transform:translateY(3px);box-shadow:0 3px 0 #8A6512}
.chatfab[hidden]{display:none}
.chatdot{position:absolute;top:6px;left:10px;width:12px;height:12px;border-radius:50%;background:var(--danger);border:2px solid #FFF5D6}
.chatdot[hidden]{display:none}
@media (max-width:899px){body:has(#bottom:not([hidden])) .chatfab{bottom:calc(80px + env(safe-area-inset-bottom))} .chatfab span{display:none} .chatfab{padding:0 15px}}
.chatpanel{position:fixed;left:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:61;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 140px));display:flex;flex-direction:column;
  background:var(--card);color:var(--text);border:1px solid var(--rule);border-radius:18px;box-shadow:0 18px 48px rgba(0,0,0,.35);overflow:hidden}
.chatpanel[hidden]{display:none}
@media (max-width:899px){body:has(#bottom:not([hidden])) .chatpanel{bottom:calc(148px + env(safe-area-inset-bottom));height:min(520px,calc(100vh - 210px))}}
.chatpanel>header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--rule);font:700 1.05rem var(--f-head)}
.chatx{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--text);cursor:pointer}
.chatx svg{width:20px;height:20px}
.chattabs{display:flex;gap:8px;padding:8px 12px}
.chattabs .chip[aria-selected="true"]{background:linear-gradient(180deg,#F3DE93,#E2C35E);color:#2A1B00;border-color:#8A6512}
.chatbody{flex:1;display:flex;flex-direction:column;gap:8px;padding:8px 12px 12px;min-height:0}
.chatlist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px;min-height:120px}
.chatlist.big{min-height:320px;max-height:60vh}
.bub{max-width:85%;padding:8px 12px;border-radius:14px;border:1px solid var(--rule);background:var(--surface);line-height:1.7}
.bub.me{align-self:flex-start;background:color-mix(in srgb,var(--gold-soft) 30%,var(--surface));border-color:color-mix(in srgb,var(--gold) 50%,var(--rule))}
.bub.them{align-self:flex-end}
.bub .who{font-size:.8125rem;color:var(--text-dim)}
.bub .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.bub.hiddenmsg{opacity:.55;border-style:dashed}
.linkbtn{border:0;background:none;color:var(--accent-text);text-decoration:underline;cursor:pointer;min-height:32px;padding:0;font:inherit;font-size:.8125rem}
.composer{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;resize:none;min-height:48px}
.composer .btn{min-width:48px;min-height:48px;padding:0 12px}
.presence{display:flex;align-items:center;gap:8px;margin:0;font-size:.875rem;color:var(--text-dim)}
.presence i{width:10px;height:10px;border-radius:50%;background:var(--text-hint)}
.presence.on i{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent)}
.intro{display:grid;gap:6px}
.livegrid{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:14px;margin-top:10px}
@media (max-width:760px){.livegrid{grid-template-columns:1fr}}
.threads{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto}
.thread{text-align:start;display:grid;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--rule);background:var(--surface);color:var(--text);cursor:pointer;font:inherit}
.thread.cur{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-soft) 40%,transparent)}
.thread.closed{opacity:.6}
.conv{display:flex;flex-direction:column;gap:10px;min-width:0}
.stars{display:inline-flex;gap:1px;color:var(--text-hint);letter-spacing:0}
.stars i{font-style:normal}
.stars i.on{color:#D9A21B}
.stars.big{font-size:1.6rem}
.rsum{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
@media (max-width:560px){.rsum{grid-template-columns:1fr}}
.ravg{display:grid;justify-items:center;gap:4px}
.ravg b{font-size:3rem;line-height:1}
.rdist{display:grid;gap:6px}
.rrow{display:grid;grid-template-columns:44px 1fr 36px;gap:8px;align-items:center}
.starpick{display:flex;gap:6px;direction:ltr;justify-content:flex-end}
.starpick button{min-width:48px;min-height:48px;font-size:1.9rem;border-radius:12px;border:1px solid var(--rule);background:var(--surface);color:var(--text-hint);cursor:pointer}
.starpick button.on{color:#D9A21B;border-color:#D9A21B}
.rform{display:grid;gap:10px}
.review{border:1px solid var(--rule);border-radius:14px;padding:12px 14px;margin:10px 0;background:var(--card)}
.review header{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.review .rbody{white-space:pre-wrap;line-height:1.8;margin:8px 0}
.review .reply{border-inline-start:4px solid var(--gold);background:var(--surface);border-radius:10px;padding:8px 12px;margin-top:6px}
.review .reply p{margin:4px 0 0;white-space:pre-wrap;line-height:1.8}
.review.adm.pending{border-color:var(--warn)}
.admtools{display:grid;gap:8px;margin-top:8px}
.admtools .row{flex-wrap:wrap}
@media print{.chatfab,.chatpanel{display:none!important}}
.thread .badge{justify-self:start}