/* =====================================================
   شجرة العائلة — الطراز الحساوي
   انترو سينمائي ليلي  →  شجرة رملية مضيئة  +  دوك عائم
   ===================================================== */

:root {
  --sand: #f3e9d2;
  --sand-2: #ecdfc0;
  --sand-3: #e2cfa3;
  --mud: #7a5636;
  --mud-dark: #54371f;
  --wood: #6f4a2a;
  --ink: #3d2b1c;
  --terracotta: #b4582e;
  --gold: #c9a227;
  --gold-soft: #caa23c;
  --gold-bright: #e7c668;
  --palm: #476b38;
  --palm-soft: #6d8a4a;
  --night-1: #1c130a;
  --night-2: #34240f;
  --night-3: #241809;
  --card-bg: #f9efdb;
  --card-bg-2: #efdfbb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 520px at 50% -90px, #f8efdb 0%, transparent 62%),
    linear-gradient(var(--sand), var(--sand-2));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* نقشة جصية هندسية خفيفة على صفحة الشجرة */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b99b5f' stroke-opacity='0.15' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3Cpath d='M0 32h12M52 32h12M32 0v12M32 52v12'/%3E%3C/g%3E%3C/svg%3E");
  z-index: 0;
}

/* =====================================================
   شاشة البداية (الانترو) — ختم مركزي أنيق
   ===================================================== */
#intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #3a2814 0%, transparent 70%),
    linear-gradient(165deg, #2a1c0e 0%, #1a1209 55%, #120c06 100%);
  transition: opacity 0.75s ease, visibility 0s linear 0.75s;
}
.introWash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a227' stroke-opacity='0.07' stroke-width='1'%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Cpath d='M40 8v10M40 62v10M8 40h10M62 40h10'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.9;
}
.introWash::before, .introWash::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.45), transparent);
}
.introWash::before { top: 7%; }
.introWash::after { bottom: 7%; }
body.entered #intro { opacity: 0; visibility: hidden; pointer-events: none; }

.introEditBtn {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 8;
  font-family: inherit;
  font-size: 14px;
  color: #e7c668;
  background: rgba(20, 14, 8, 0.55);
  border: 1.4px solid rgba(201, 162, 39, 0.65);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.16s, border-color 0.16s, transform 0.16s;
}
.introEditBtn:hover {
  background: rgba(201, 162, 39, 0.18);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
}

.authGate {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 8, 4, 0.72);
  backdrop-filter: blur(8px);
}
.authGate[hidden] { display: none !important; }
.authCard {
  width: min(92vw, 400px);
  background: linear-gradient(#fbf3df, #f0e0bc);
  border: 1.6px solid #b99b5f;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(28, 19, 10, 0.45);
  padding: 26px 22px 20px;
  text-align: center;
}
.authCard h2 {
  font-family: 'Aref Ruqaa', serif;
  font-size: 28px;
  color: #6e4a17;
  margin-bottom: 8px;
}
.authHint { font-size: 14px; color: #8a6a45; line-height: 1.7; margin-bottom: 16px; }
#authPassword {
  width: 100%;
  font-family: inherit;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #b99b5f;
  background: #fffaf0;
  color: var(--ink);
  outline: none;
}
#authPassword:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25); }
.authError { color: #8a3a22; font-size: 13.5px; margin-top: 10px; }
.authError[hidden] { display: none !important; }

#editBadge {
  position: fixed;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 46;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(#1a150c, #0d0b08);
  border: 1.4px solid #c9a227;
  color: #e7c668;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(28, 19, 10, 0.35);
}
#editBadge[hidden] { display: none !important; }
body:not(.entered) #editBadge { display: none !important; }

body:not(.edit-mode) .editOnly,
body:not(.edit-mode) .pEdit { display: none !important; }
body.edit-mode .viewOnly { display: none !important; }
body.edit-mode .pProfileView { display: none !important; }

.motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.mote {
  position: absolute;
  bottom: -12px;
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright), rgba(201, 162, 39, 0.1));
  box-shadow: 0 0 6px rgba(231, 198, 104, 0.7);
  opacity: 0;
  animation: floatUp var(--d, 9s) linear var(--delay, 0s) infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: 0.85; }
  88%  { opacity: 0.7; }
  100% { transform: translateY(-104vh) translateX(var(--drift, 0)); opacity: 0; }
}

.introCenter {
  position: relative;
  z-index: 4;
  width: min(520px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--gold-bright);
}
.kicker::before, .kicker::after {
  content: '';
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.kicker::after { background: linear-gradient(90deg, var(--gold), transparent); }

.medallion {
  position: relative;
  width: clamp(140px, 28vw, 180px);
  height: clamp(140px, 28vw, 180px);
  margin: 22px 0 10px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e0b84a 42%, #c9a227 72%, #8a6a1e);
  box-shadow:
    0 0 0 3px rgba(201, 162, 39, 0.35),
    0 0 40px rgba(201, 162, 39, 0.25),
    inset 0 0 0 5px rgba(90, 58, 20, 0.2);
}
.medRing {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(90, 58, 20, 0.35);
  pointer-events: none;
}
.medRing.outer {
  inset: -8px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-style: solid;
  animation: medPulse 3.2s ease-in-out infinite;
}
@keyframes medPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.04); opacity: 1; }
}
.medName {
  font-family: 'Aref Ruqaa', serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  color: #2f2410;
  line-height: 1.1;
  max-width: 80%;
}
.medSub {
  margin-top: 4px;
  font-size: 12px;
  color: #6e4a17;
  letter-spacing: 1px;
}

.introTitle { line-height: 0.95; margin: 8px 0 0; }
.introTitle .t-small {
  display: block;
  font-family: 'Amiri', serif;
  font-size: clamp(18px, 2.4vw, 26px);
  color: #cbb892;
  font-weight: 400;
}
.introTitle .t-big {
  display: block;
  font-family: 'Aref Ruqaa', serif;
  font-weight: 700;
  font-size: clamp(48px, 9vw, 86px);
  color: var(--gold-bright);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 28px rgba(201, 162, 39, 0.3);
}

.introDesc {
  max-width: 36ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.9;
  color: #c4b08a;
  margin: 14px 0 0;
}

.introActions { display: flex; justify-content: center; margin-top: 22px; }
#enterBtn {
  font-family: 'Amiri', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--night-1);
  padding: 14px 34px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}
#enterBtn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201, 162, 39, 0.5); }
#enterBtn .arr { transition: transform 0.2s; }
#enterBtn:hover .arr { transform: translateX(-5px); }

.loadWrap {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.loadTrack { width: 160px; height: 3px; border-radius: 3px; background: rgba(201, 162, 39, 0.18); overflow: hidden; }
.loadBar { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.loadTxt { font-size: 12px; letter-spacing: 1px; color: #8f7a52; }
.loadTxt::after { content: 'يُجهَّز النسب…'; }
#intro.ready .loadTxt::after { content: 'جاهز'; color: var(--gold-bright); }

.sceneStats {
  margin-top: 20px;
  display: flex;
  gap: 28px;
  padding: 12px 8px;
  border-top: 1px solid rgba(201, 162, 39, 0.28);
  border-bottom: 1px solid rgba(201, 162, 39, 0.28);
}
.sceneStats div { text-align: center; min-width: 64px; }
.sceneStats b { display: block; font-family: 'Aref Ruqaa', serif; font-size: 28px; color: var(--gold-bright); line-height: 1; }
.sceneStats span { font-size: 12px; color: #b89a63; letter-spacing: 1px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1); }
#intro.ready .reveal { opacity: 1; transform: none; }
#intro.ready .r1 { transition-delay: 0.1s; }
#intro.ready .r2 { transition-delay: 0.25s; }
#intro.ready .r3 { transition-delay: 0.45s; }
#intro.ready .r4 { transition-delay: 0.65s; }
#intro.ready .r5 { transition-delay: 0.85s; }
#intro.ready .r6 { transition-delay: 1.05s; }

/* =====================================================
   أنيميشن نمو الشجرة + ظهور الأسماء
   ===================================================== */
.node.await-grow {
  opacity: 0 !important;
  transform: translate(-50%, -100%) rotate(var(--tilt, 0deg)) scale(0.12) !important;
  pointer-events: none;
}
.edge.await-grow {
  stroke-dasharray: var(--elen, 300);
  stroke-dashoffset: var(--elen, 300);
  opacity: 0.15;
}
.edge.sprouting {
  transition: stroke-dashoffset 0.55s ease, opacity 0.25s ease;
  opacity: 0.95;
}
.node.sprouting {
  animation: sproutName 0.55s cubic-bezier(0.22, 1.3, 0.36, 1) forwards;
}
@keyframes sproutName {
  0%   { opacity: 0; transform: translate(-50%, -100%) rotate(var(--tilt, 0deg)) scale(0.2); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -100%) rotate(var(--tilt, 0deg)) scale(1.08); }
}
.node.grown {
  opacity: 1;
  transform: translate(-50%, -100%) rotate(var(--tilt, 0deg)) scale(1);
  transition: transform 0.25s ease;
}

#growBanner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(rgba(251, 243, 223, 0.94), rgba(240, 224, 188, 0.94));
  border: 1.4px solid rgba(185, 155, 95, 0.85);
  box-shadow: 0 8px 24px rgba(62, 42, 20, 0.28);
  font-size: 14px;
  color: #6e4a17;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
#growBanner.show { opacity: 1; }
body:not(.entered) #growBanner { display: none; }

/* =====================================================
   منطقة الشجرة
   ===================================================== */
#viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: grab;
  z-index: 1;
}
#viewport:active { cursor: grabbing; }
#viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(120, 90, 40, 0.22);
  z-index: 20;
}

#stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
#stage.anim { transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1); }
#scene { position: absolute; top: 0; left: 0; display: block; }
#cards { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* بطاقات الأسماء — جذر / دائرة فرع / ورقة */
.node {
  --s: 1;
  --tilt: 0deg;
  position: absolute;
  transform: translate(-50%, -100%) rotate(var(--tilt)) scale(var(--s));
  transform-origin: 50% 100%;
  width: var(--w, 86px);
  padding: 12px 6px 10px;
  font-family: 'Amiri', serif;
  background: linear-gradient(var(--card-bg), var(--card-bg-2));
  border: 1.6px solid #8f6238;
  border-radius: 999px 999px 9px 9px;
  box-shadow:
    inset 0 0 0 2px #f7ecd4,
    inset 0 0 0 3.5px rgba(201, 162, 39, 0.45),
    0 3px 7px rgba(62, 42, 20, 0.28);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  z-index: 3;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.25s, border-color 0.18s;
}
.node .nm { font-weight: 700; font-size: var(--fs, 14px); line-height: 1.12; color: #4a3320; white-space: nowrap; }
.node .ft { font-size: calc(var(--fs, 14px) - 4.5px); color: #8a6a45; white-space: nowrap; }

/* الجذر — ختم ذهبي على الجذع */
.node.kind-root {
  width: 118px; height: 118px; padding: 0;
  border-radius: 50%;
  border: 3px solid #c9a227;
  background:
    radial-gradient(circle at 40% 35%, #fff3c8, #e8c45a 45%, #c9a227 78%, #8a6a1e);
  box-shadow:
    inset 0 0 0 4px rgba(90, 58, 20, 0.25),
    0 0 0 4px rgba(201, 162, 39, 0.35),
    0 8px 22px rgba(62, 42, 20, 0.4);
  justify-content: center;
}
.node.kind-root .nm { font-family: 'Aref Ruqaa', serif; font-size: 22px; color: #3d2b1c; }
.node.kind-root .ft { color: #6e4a17; font-size: 11px; }
.node.kind-root::before, .node.kind-root::after { display: none; }

/* رؤوس الفروع — دوائر ذهبية */
.node.kind-branch {
  width: var(--w, 84px); height: var(--w, 84px); padding: 0;
  border-radius: 50%;
  border: 2px solid #b8862a;
  background: radial-gradient(circle at 35% 30%, #fff0b8, #f0d060 42%, #d4a93c 75%, #a67c22);
  box-shadow:
    inset 0 0 0 3px rgba(255, 245, 200, 0.45),
    0 4px 12px rgba(62, 42, 20, 0.32);
  justify-content: center;
}
.node.kind-branch .nm { color: #2f2410; font-size: var(--fs, 14px); }
.node.kind-branch .ft { color: #6a5220; }
.node.kind-branch::before, .node.kind-branch::after { display: none; }

/* الأوراق الخضراء */
.node.kind-leaf {
  border-radius: 60% 60% 55% 55% / 70% 70% 40% 40%;
  border: 1.5px solid #3d6b32;
  background: linear-gradient(165deg, #b7d87a 0%, #7fb24a 48%, #5a9438 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(40, 80, 30, 0.2),
    0 3px 8px rgba(40, 70, 25, 0.28);
  padding: 11px 7px 12px;
}
.node.kind-leaf .nm { color: #1e3214; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }
.node.kind-leaf .ft { color: #2f4a22; }
.node.kind-leaf::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  width: 1.5px; height: 38%;
  transform: translateX(-50%);
  background: linear-gradient(#4a7a35, transparent);
  border: none;
  border-radius: 0;
}
.node.kind-leaf::after { display: none; }

.gen1 { --w: 118px; --fs: 17px; }
.gen2 { --w: 92px;  --fs: 15px; }
.gen3 { --w: 84px;  --fs: 14px; }
.gen4 { --w: 76px;  --fs: 13.5px; }
.gen5 { --w: 70px;  --fs: 13px; }
.gen6 { --w: 64px;  --fs: 12px; }
.gen7 { --w: 58px;  --fs: 11.5px; }
.gen8, .genDeep { --w: 54px; --fs: 11px; }

.node:hover { --s: 1.1; z-index: 6; }
.node.sel { --s: 1.14; z-index: 7; box-shadow: 0 0 0 3px rgba(212, 169, 60, 0.55), 0 8px 18px rgba(62, 42, 20, 0.4); }
.node.hot { filter: brightness(1.06); z-index: 5; }
.node.kind-branch.hot, .node.kind-branch.sel {
  background: radial-gradient(circle at 35% 30%, #fff6cc, #f5d76a 42%, #e0b840 75%, #b88920);
}
.node.kind-leaf.hot, .node.kind-leaf.sel {
  background: linear-gradient(165deg, #c8e890 0%, #8fc454 48%, #68a842 100%);
  border-color: #c9a227;
}

#stage.dim .node:not(.sel):not(.hot) { opacity: 0.26; }
#stage.dim .edge:not(.hot) { opacity: 0.14; }
.edge { transition: opacity 0.25s; }

/* لوحة المعلومات */
#panel {
  --p-bg1: #fbf3df;
  --p-bg2: #f3e5c4;
  --p-border: #b99b5f;
  --p-name: #6e4a17;
  --p-muted: #8a6a45;
  --p-label: #a5854e;
  --p-accent: #b4582e;
  --p-item-bg: rgba(255, 251, 240, 0.75);
  --p-chip-bg: #fbf3df;
  --p-chip-hover: #eed9a8;
  --p-close-bg: #f7ecd4;
  --p-field-bg: #fffaf0;
  --p-note-bg: rgba(201, 162, 39, 0.14);
  --p-arch: linear-gradient(rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0));
  --p-hint: #b39b6d;
  --p-text: #3d2b1c;
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  width: 318px;
  max-height: calc(100% - 110px);
  overflow-y: auto;
  background: linear-gradient(var(--p-bg1), var(--p-bg2));
  border: 1.6px solid var(--p-border);
  border-radius: 26px 26px 14px 14px;
  box-shadow: 0 14px 34px rgba(62, 42, 20, 0.35);
  padding: 0 14px 14px;
  z-index: 30;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, background 0.25s, border-color 0.25s, color 0.25s;
  color: var(--p-text);
}
#panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
#pClose {
  position: absolute; top: 8px; inset-inline-end: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--p-border); background: var(--p-close-bg); color: var(--p-muted);
  font-size: 12px; cursor: pointer; z-index: 2;
}
#pClose:hover { border-color: var(--p-accent); color: var(--p-accent); }
.pArch {
  text-align: center; padding: 18px 10px 12px; margin: 0 -14px 12px;
  background: var(--p-arch);
  border-bottom: 1.5px solid var(--p-border); border-radius: 24px 24px 0 0;
}
.pName { font-family: 'Aref Ruqaa', serif; font-size: 27px; font-weight: 700; color: var(--p-name); }
.pLineage { font-size: 13.5px; color: var(--p-muted); margin-top: 4px; line-height: 1.7; }
.pProfileView { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.pBlock {
  background: var(--p-item-bg);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: start;
}
.pBlock span { display: block; font-size: 12px; color: var(--p-label); margin-bottom: 4px; }
.pBlock p {
  font-size: 14px; color: var(--p-text); line-height: 1.75; white-space: pre-wrap;
  min-height: 1.4em;
}
.pGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pItem {
  background: var(--p-item-bg); border: 1px solid var(--p-border);
  border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; gap: 1px;
}
.pItem span { font-size: 12px; color: var(--p-label); }
.pItem b { font-size: 15.5px; color: var(--p-accent); }
.pRel { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.relLabel { font-size: 12.5px; color: var(--p-label); width: 100%; margin-top: 4px; }
.chip {
  font-family: inherit; font-size: 13.5px; padding: 4px 12px; border-radius: 999px;
  border: 1.3px solid var(--p-border); background: var(--p-chip-bg); color: var(--p-name); cursor: pointer; transition: all 0.15s;
}
.chip:hover { background: var(--p-chip-hover); border-color: var(--gold); }
.pHint { margin-top: 12px; font-size: 12px; color: var(--p-hint); text-align: center; }

#panel[data-theme="sheikh"] {
  --p-bg1: #1a150c;
  --p-bg2: #0b0906;
  --p-border: #c9a227;
  --p-name: #e7c668;
  --p-muted: #cbb892;
  --p-label: #b99b5f;
  --p-accent: #e7c668;
  --p-item-bg: rgba(40, 32, 16, 0.85);
  --p-chip-bg: #241c10;
  --p-chip-hover: #3a2e16;
  --p-close-bg: #241c10;
  --p-field-bg: #14110c;
  --p-note-bg: rgba(201, 162, 39, 0.12);
  --p-arch: linear-gradient(rgba(201, 162, 39, 0.22), rgba(201, 162, 39, 0));
  --p-hint: #8a7344;
  --p-text: #f3e9d2;
}
#panel[data-theme="ivory"] {
  --p-bg1: #fffcf6;
  --p-bg2: #f4ead2;
  --p-border: #d4b56a;
  --p-name: #8a6a1e;
  --p-muted: #9a7c48;
  --p-label: #b89a63;
  --p-accent: #c9a227;
  --p-item-bg: rgba(255, 255, 255, 0.8);
  --p-chip-bg: #fff8e8;
  --p-chip-hover: #f3e5c4;
  --p-close-bg: #fff8e8;
  --p-field-bg: #ffffff;
  --p-note-bg: rgba(201, 162, 39, 0.1);
  --p-arch: linear-gradient(rgba(232, 214, 170, 0.45), transparent);
  --p-hint: #c2a468;
  --p-text: #4a3820;
}
#panel[data-theme="palm"] {
  --p-bg1: #17301c;
  --p-bg2: #0e1c12;
  --p-border: #c9a227;
  --p-name: #e7c668;
  --p-muted: #c5d4a8;
  --p-label: #8faf6a;
  --p-accent: #d4a93c;
  --p-item-bg: rgba(30, 56, 32, 0.85);
  --p-chip-bg: #1e3a22;
  --p-chip-hover: #2a5230;
  --p-close-bg: #1e3a22;
  --p-field-bg: #102016;
  --p-note-bg: rgba(109, 138, 74, 0.2);
  --p-arch: linear-gradient(rgba(201, 162, 39, 0.2), transparent);
  --p-hint: #7d9a58;
  --p-text: #eef3e4;
}
#panel[data-theme="night"] {
  --p-bg1: #152033;
  --p-bg2: #0b1220;
  --p-border: #9eb3c9;
  --p-name: #e8eef6;
  --p-muted: #b7c4d4;
  --p-label: #8ea0b5;
  --p-accent: #c9d6e6;
  --p-item-bg: rgba(28, 42, 64, 0.85);
  --p-chip-bg: #1c2a40;
  --p-chip-hover: #2a3c58;
  --p-close-bg: #1c2a40;
  --p-field-bg: #101826;
  --p-note-bg: rgba(158, 179, 201, 0.12);
  --p-arch: linear-gradient(rgba(158, 179, 201, 0.18), transparent);
  --p-hint: #7e90a6;
  --p-text: #e8eef6;
}
#panel[data-theme="desert"] {
  --p-bg1: #f4d7b8;
  --p-bg2: #e4b889;
  --p-border: #b4582e;
  --p-name: #7a2e14;
  --p-muted: #8a4a28;
  --p-label: #a05a32;
  --p-accent: #b4582e;
  --p-item-bg: rgba(255, 244, 228, 0.7);
  --p-chip-bg: #f7e4cc;
  --p-chip-hover: #efd0a8;
  --p-close-bg: #f7e4cc;
  --p-field-bg: #fff6ea;
  --p-note-bg: rgba(180, 88, 46, 0.12);
  --p-arch: linear-gradient(rgba(180, 88, 46, 0.18), transparent);
  --p-hint: #b07a52;
  --p-text: #3d2b1c;
}

/* أدوات التعديل في اللوحة */
.pEdit { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(185, 155, 95, 0.45); }
.pEdit .relLabel { margin-top: 10px; }
.pEdit .relLabel .soft { color: #b39b6d; font-size: 11px; }
.pEditRow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.editBtn {
  font-family: inherit; font-size: 13.5px; padding: 6px 12px; border-radius: 999px;
  border: 1.3px solid #b99b5f; background: #fbf3df; color: #6e4a17; cursor: pointer; transition: all 0.15s;
}
.editBtn:hover { background: #eed9a8; border-color: var(--gold); }
.editBtn.primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: #a5851f; color: #3d2b1c; font-weight: 700;
}
.editBtn.danger { color: #8a3a22; border-color: #c4896a; }
.editBtn.danger:hover { background: #f3d5c4; border-color: var(--terracotta); }
.editBtn.danger:disabled,
.editBtn:disabled { opacity: 0.4; cursor: not-allowed; }
.editBtn.ghost { background: transparent; }
.editBtn.wide { width: 100%; margin-top: 10px; text-align: center; }
.editBtn.tiny { padding: 4px 8px; font-size: 12px; min-width: 30px; }

.pField {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--p-text);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.4px solid var(--p-border);
  background: var(--p-field-bg);
  outline: none;
  margin-bottom: 8px;
  resize: vertical;
}
.pField:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22); }
.pFieldRow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pEdit .modalLabel { color: var(--p-label); margin-bottom: 4px; }

.themePicker { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.themeSwatch {
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1.6px solid var(--p-border);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  position: relative;
}
.themeSwatch.on { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.themeSwatch[data-theme="classic"] { background: linear-gradient(#fbf3df, #e8c45a); }
.themeSwatch[data-theme="sheikh"] { background: linear-gradient(#1a150c, #c9a227); }
.themeSwatch[data-theme="ivory"] { background: linear-gradient(#fffcf6, #d4b56a); }
.themeSwatch[data-theme="palm"] { background: linear-gradient(#17301c, #c9a227); }
.themeSwatch[data-theme="night"] { background: linear-gradient(#152033, #9eb3c9); }
.themeSwatch[data-theme="desert"] { background: linear-gradient(#f4d7b8, #b4582e); }
.themeSwatch span {
  position: absolute; inset: auto 0 -16px; font-size: 10px; color: var(--p-label); text-align: center;
}
.themePicker { padding-bottom: 14px; }

#panel .editBtn {
  border-color: var(--p-border);
  background: var(--p-chip-bg);
  color: var(--p-name);
}
#panel .editBtn:hover { background: var(--p-chip-hover); }
#panel .countInput,
#panel .sonRow,
#panel .sonsList,
#panel .sonRow .sonName {
  background: var(--p-field-bg);
  border-color: var(--p-border);
  color: var(--p-text);
}

.addCountRow { margin-top: 2px; }
.countLabel { font-size: 13px; color: #a5854e; }
.countInput {
  width: 64px; font-family: inherit; font-size: 16px; text-align: center;
  padding: 6px 8px; border-radius: 10px; border: 1.4px solid #b99b5f; background: #fffaf0; color: var(--ink);
}
.countInput:focus { outline: none; border-color: var(--gold); }

.sonsList {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 180px; overflow-y: auto; margin-top: 4px;
  padding: 4px; border-radius: 12px; background: rgba(255, 251, 240, 0.55);
  border: 1px solid rgba(185, 155, 95, 0.4);
}
.sonsList:empty::after {
  content: 'لا يوجد أبناء بعد — أضِف فروعًا أعلاه';
  display: block; text-align: center; font-size: 12.5px; color: #b39b6d; padding: 10px 6px;
}
.sonRow {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 10px;
  background: #fbf3df; border: 1px solid rgba(185, 155, 95, 0.55);
  cursor: grab;
}
.sonRow.dragging { opacity: 0.55; border-style: dashed; }
.sonRow .grip { color: #b99b5f; font-size: 12px; cursor: grab; user-select: none; }
.sonRow .sonName {
  flex: 1; font-size: 14px; color: #6e4a17; border: none; background: transparent;
  font-family: inherit; min-width: 0; padding: 2px 4px; border-radius: 6px;
}
.sonRow .sonName:focus { outline: none; background: #fffaf0; box-shadow: inset 0 0 0 1px var(--gold); }
.sonRow .sonActs { display: flex; gap: 3px; }

.saveStatus {
  margin-top: 6px; text-align: center; font-size: 12px; color: #8a6a45; min-height: 1.2em;
}
.saveStatus.dirty { color: var(--terracotta); font-weight: 700; }
.saveStatus.ok { color: #476b38; }

/* نافذة التعديل */
.modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 19, 10, 0.55); backdrop-filter: blur(3px);
}
.modal[hidden] { display: none !important; }
.modalCard {
  width: min(92vw, 380px);
  max-height: min(88vh, 640px);
  overflow-y: auto;
  background: linear-gradient(#fbf3df, #f0e0bc);
  border: 1.6px solid #b99b5f; border-radius: 20px;
  box-shadow: 0 18px 40px rgba(28, 19, 10, 0.4);
  padding: 22px 20px 18px;
}
.modalCard.wide { width: min(94vw, 440px); }
.modalCard h2 {
  font-family: 'Aref Ruqaa', serif; font-size: 24px; color: #6e4a17;
  text-align: center; margin-bottom: 6px;
}
.modalHint { font-size: 13.5px; color: #8a6a45; text-align: center; margin-bottom: 14px; min-height: 1.2em; }
.modalLabel { display: block; font-size: 13px; color: #a5854e; margin-bottom: 6px; }
#modalInput {
  width: 100%; font-family: inherit; font-size: 17px; color: var(--ink);
  padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid #b99b5f; background: #fffaf0; outline: none;
}
#modalInput:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25); }
.modalActions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

.addNamesBox { display: flex; flex-direction: column; gap: 8px; }
.addNameRow { display: flex; align-items: center; gap: 8px; }
.addNameRow span {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#d9b45c, #c9a227); color: #3d2b1c;
  font-size: 13px; font-weight: 700; flex: none;
}
.addNameRow input {
  flex: 1; font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 9px 12px; border-radius: 12px;
  border: 1.5px solid #b99b5f; background: #fffaf0; outline: none;
}
.addNameRow input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25); }

/* =====================================================
   الدوك السفلي العائم
   ===================================================== */
#dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(rgba(251, 243, 223, 0.92), rgba(240, 224, 188, 0.92));
  border: 1.5px solid rgba(185, 155, 95, 0.85);
  box-shadow: 0 12px 34px rgba(62, 42, 20, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: calc(100vw - 24px);
  transition: opacity 0.5s ease 0.45s, transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) 0.45s;
}
body:not(.entered) #dock { opacity: 0; transform: translate(-50%, 170%); pointer-events: none; transition-delay: 0s; }

.searchBox { position: relative; display: flex; align-items: center; }
.dockIcon { color: #a5854e; font-size: 17px; margin-inline-end: 6px; line-height: 1; }
#search {
  font-family: inherit; font-size: 15px; color: var(--ink);
  width: 190px; padding: 7px 6px; background: transparent; border: none; outline: none;
}
#search::placeholder { color: #a5854e; }

.dockSep { width: 1px; height: 22px; background: rgba(185, 155, 95, 0.5); flex: none; }

.branchWrap { position: relative; }
.dockBtn {
  font-family: inherit; font-size: 14px; color: #6e4a17; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  border: 1.4px solid #c2a468; background: linear-gradient(#f7ecd4, #ecdab4);
  display: inline-flex; align-items: center; gap: 6px; transition: all 0.16s;
}
.dockBtn:hover { border-color: var(--gold); transform: translateY(-1px); }
.dockBtn .caret { font-size: 10px; color: #a5854e; }
.dockBtn.ghost { padding: 7px 11px; background: transparent; border-color: transparent; color: var(--gold); font-size: 16px; }
.dockBtn.ghost:hover { background: rgba(201, 162, 39, 0.14); transform: none; }

.branchPop {
  position: absolute;
  bottom: calc(100% + 12px);
  inset-inline-start: 0;
  min-width: 168px;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #fbf3df;
  border: 1.5px solid #b99b5f;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(62, 42, 20, 0.32);
  z-index: 50;
}
.branchPop.open { display: flex; }
.branchPop::after { /* سهم صغير نحو الزر */
  content: ''; position: absolute; top: 100%; inset-inline-start: 22px;
  border: 7px solid transparent; border-top-color: #b99b5f;
}
.bchip {
  font-family: inherit; font-size: 14px; text-align: start;
  padding: 8px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: #6e4a17; transition: all 0.15s;
}
.bchip:hover { background: #f3e5c4; }
.bchip.on { background: linear-gradient(#d9b45c, #c9a227); color: #3d2b1c; font-weight: 700; }

.zoomBtns { display: flex; gap: 4px; }
.zoomBtns button {
  font-family: inherit; width: 34px; height: 34px; font-size: 17px; line-height: 1;
  border-radius: 50%; border: 1.4px solid #c2a468;
  background: linear-gradient(#f7ecd4, #ead9b2); color: #6e4a17; cursor: pointer; transition: all 0.15s;
}
.zoomBtns button:hover { border-color: var(--gold); transform: translateY(-1px); background: #f3e3ba; }

.dockStat { font-size: 12.5px; color: #8a6a45; white-space: nowrap; padding-inline: 2px; }

/* قائمة نتائج البحث (تظهر فوق الدوك) */
.searchList {
  position: absolute;
  bottom: calc(100% + 12px);
  inset-inline-start: -8px;
  width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: #fbf3df;
  border: 1.5px solid #b99b5f;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(62, 42, 20, 0.32);
  overflow-x: hidden;
  display: none;
  z-index: 50;
}
.searchList.open { display: block; }
.srItem {
  display: block; width: 100%; text-align: start; font-family: inherit; font-size: 14px;
  padding: 8px 12px; background: none; border: none;
  border-bottom: 1px solid rgba(185, 155, 95, 0.35); cursor: pointer; color: var(--ink);
}
.srItem:last-child { border-bottom: none; }
.srItem strong { color: var(--terracotta); margin-inline-end: 6px; }
.srItem span { color: #8a6a45; font-size: 12.5px; }
.srItem:hover { background: #f3e5c4; }
.srItem.empty { cursor: default; color: #a5854e; text-align: center; }

/* =====================================================
   شاشات صغيرة
   ===================================================== */
@media (max-width: 820px) {
  .introCenter { width: min(92vw, 480px); }
  .medallion { margin: 16px 0 6px; }
  #panel { width: min(92vw, 320px); }
  #dock { gap: 6px; padding: 7px 10px; }
  #search { width: 120px; }
  .dockStat { display: none; }
  #growBanner { top: 10px; font-size: 12.5px; padding: 6px 14px; }
  .introEditBtn { top: 12px; left: 12px; font-size: 13px; padding: 7px 12px; }
  .pFieldRow { grid-template-columns: 1fr; }
}