/* ============================================================
   التصميم الثاني — "التفاعلي العصري" (لوحة كحلية رسمية)
   فاتح، نظيف، مؤسسي: كحلي عميق مع أزرق فولاذي هادئ على خلفية
   فاتحة، وعنّابي هادئ للإناث.

   ملاحظة تقنية: صنف التفعيل يبقى body.theme-dark والقيمة المخزنة
   بقاعدة البيانات تبقى "dark" — للتوافق مع الخادم والإعدادات
   المحفوظة سابقاً. تغيّر المعنى فقط: لم يعد ثيماً داكناً، بل
   التصميم التفاعلي العصري الجديد.
   ============================================================ */

/* لون html نفسه مع التصميم الكحلي — نفس سبب القاعدة العامة في style.css،
   لكن هنا بلون الكحلي الأساسي بدل البيج الافتراضي، حتى لا يظهر شريط بيج (بدل
   أبيض، لكنه لا يزال لوناً خاطئاً) على حافة الشاشة في هذا التصميم تحديداً. */
html:has(body.theme-dark){background:#f4f6f9}

body.theme-dark{
  --bg:#f4f6f9;
  --card:#ffffff;
  --ink:#1d2b3d;
  --muted:#617082;
  --gold:#1f4d7e;            /* يعاد استخدام المتغير القديم كلون أساسي */
  --green:#1f4d7e;
  --line:#dee5ee;
  --primary:#1f4d7e;
  --primary-2:#2f6da8;
  --steel:#4a86c5;
  --female:#9c4a5e;
  --female-soft:#faf4f5;
  --grad:linear-gradient(135deg,#1b3f68,#2f6da8);
  --grad-full:linear-gradient(135deg,#16304e 0%,#2f6da8 62%,#4a86c5 135%);
  --grad-female:linear-gradient(135deg,#b06274,#8e3d51);
  --ring:rgba(31,77,126,.14);
  --shadow:0 18px 44px rgba(29,49,79,.08);
  /* ثالوث RGB (بدون rgba()) يُستخدم داخل العرض التفاعلي المشترك لبناء
     ظلال/توهجات شفافة بلون العصري الكحلي */
  --tint:31,77,126;
  --tint-2:74,134,197;
  --tint-f:156,74,94;
  --primary-2-rgb:47,109,168;

  margin:0;
  color:var(--ink);
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(31,77,126,.09), transparent 62%),
    radial-gradient(820px 520px at -12% 18%, rgba(74,134,197,.08), transparent 60%),
    radial-gradient(700px 480px at 50% 118%, rgba(156,74,94,.05), transparent 60%),
    #f4f6f9;
  background-attachment:fixed;
}

/* ============================================================
   التصميم الثالث — "كلاسيكي تفاعلي"
   نفس حركية العرض التفاعلي وحركات FLIP بالضبط، لكن بألوان التصميم
   الكلاسيكي (الأخضر والذهبي) بدل الكحلي. لا نعيد تلوين بقية الموقع
   (الشريط العلوي، الأزرار، الإدارة، الصور...) — تلك تبقى بألوانها
   الكلاسيكية الافتراضية من style.css دون أي تدخل هنا.
   ============================================================ */
body.theme-classic-interactive{
  --ink:#173a35;
  --muted:#7c786f;
  --line:#d7c4a5;
  --primary:#173f36;
  --primary-2:#b78b3d;
  --female:#8a5d62;
  --female-soft:#fff7f7;
  --grad-full:linear-gradient(135deg,#173f36 0%,#2f6a4e 65%,#3f8362 135%);
  --grad-female:linear-gradient(135deg,#a9707a,#8a5d62);
  --ring:rgba(23,63,54,.14);
  --shadow:0 18px 44px rgba(58,44,20,.10);
  --tint:23,63,54;
  --tint-2:197,155,85;
  --tint-f:138,93,98;
  --primary-2-rgb:183,139,61;
}

body.theme-dark *{ scrollbar-color:#c3cddc transparent }

/* ---------- الشريط العلوي ---------- */
body.theme-dark .topbar{
  background:rgba(255,255,255,.8);
  border-bottom:1px solid rgba(31,77,126,.12);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
}
body.theme-dark .brand svg{ color:var(--primary) }
body.theme-dark .brand h1{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
body.theme-dark .brand-logo-img{ box-shadow:0 4px 14px rgba(31,77,126,.22) }

body.theme-dark button,
body.theme-dark .file-btn,
body.theme-dark .contact-btn{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(29,49,79,.05);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
body.theme-dark button:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(29,49,79,.10) }
body.theme-dark button.active,
body.theme-dark .segmented .active{
  background:var(--grad);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 20px rgba(31,77,126,.28);
}

/* ---------- الحقول عموماً (تشمل صفحة الدخول) ---------- */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  background:#fff;border-color:var(--line);color:var(--ink);
}
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  border-color:rgba(31,77,126,.5);
}

/* ---------- شريط الأدوات (بحث + تصفية) ---------- */
body.theme-dark .search{
  background:#fff;
  border:0;
  box-shadow:var(--shadow), 0 0 0 1px var(--line) inset;
}
body.theme-dark .search:focus-within{ box-shadow:0 0 0 4px var(--ring), 0 0 0 1px rgba(31,77,126,.45) inset }
body.theme-dark .search input{ color:var(--ink) }
body.theme-dark .search input::placeholder{ color:var(--muted) }
body.theme-dark .search .results.search-results{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 22px 50px rgba(29,49,79,.14);
}
body.theme-dark .search .results.search-results button{
  background:transparent;border:0;box-shadow:none;color:var(--ink);
}
body.theme-dark .search .results.search-results button:hover{ background:rgba(31,77,126,.06); transform:none }

body.theme-dark .segmented{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
body.theme-dark .segmented button{
  background:transparent;color:var(--muted);border:0;box-shadow:none;
}
body.theme-dark .segmented button:hover{ transform:none; color:var(--ink) }
body.theme-dark .segmented button.active{ background:var(--grad); color:#fff }

/* ---------- لوحة الشجرة (الوضع الكامل) ---------- */
body.theme-dark .tree-canvas{
  background:
    radial-gradient(rgba(31,77,126,.05) 1px, transparent 1px) center/26px 26px,
    rgba(255,255,255,.78);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
body.theme-dark .connector-svg path{ stroke:var(--primary-2) !important }
body.theme-dark .tree-center-btn-inline{ background:#fff;color:var(--primary);border:1px solid var(--line) }

/* ---------- بطاقات الأشخاص ---------- */
body.theme-dark .person-card{
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:0 8px 22px rgba(29,49,79,.06);
}
body.theme-dark .person-card:hover{ box-shadow:0 14px 30px rgba(31,77,126,.14) }
body.theme-dark .person-card.female{ background:var(--female-soft) }
body.theme-dark .person-card.selected,
body.theme-dark .person-card.highlight{
  outline:2px solid var(--primary-2);
  box-shadow:0 0 0 5px var(--ring);
}
body.theme-dark .person-card strong{ color:var(--ink) }
body.theme-dark .person-card span{ color:var(--muted) }

body.theme-dark .avatar{
  background:var(--grad-full);
  color:#fff;
  border:0;
  box-shadow:0 8px 18px rgba(31,77,126,.22);
}
body.theme-dark .female .avatar{
  background:var(--grad-female);
  color:#fff;
  box-shadow:0 8px 18px rgba(156,74,94,.22);
}
body.theme-dark .status-badge{
  background:#fff;border-color:rgba(47,109,168,.45);color:var(--primary-2);
}
body.theme-dark .status-badge.divorced{ border-color:#b06274;color:#a05468 }
body.theme-dark .marriage-label{
  color:var(--primary-2);background:rgba(47,109,168,.06);border-color:rgba(47,109,168,.22);
}

body.theme-dark .person-card.highlight{ animation:card-pulse-iv 1.4s ease-in-out 2 }
@keyframes card-pulse-iv{
  0%,100%{ box-shadow:0 0 0 0 rgba(31,77,126,0) }
  50%{ box-shadow:0 0 0 9px rgba(31,77,126,.20) }
}

/* ---------- الوضع المتدرج ---------- */
body.theme-dark .step-view{
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
body.theme-dark .current-person{ background:rgba(31,77,126,.045) }
body.theme-dark .step-view h3{ color:var(--primary) }
body.theme-dark .kid-choice{ background:#fff;border-color:var(--line) }

/* ---------- الإحصائيات ---------- */
body.theme-dark .stats div{
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
body.theme-dark .stats b{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
body.theme-dark .stats span{ color:var(--muted) }
body.theme-dark .stats svg{ color:var(--primary) }

/* ---------- النوافذ / بطاقة الشخص ---------- */
body.theme-dark .modal{ background:rgba(22,37,58,.45) }
body.theme-dark .modal-card,
body.theme-dark .person-info-card{
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
}
body.theme-dark .modal-card h2,
body.theme-dark .person-info-card h2{ color:var(--primary) }
body.theme-dark .modal-card p,
body.theme-dark .person-info-card p{ color:var(--ink) }
body.theme-dark .modal-head .avatar{ outline:1px solid rgba(31,77,126,.18) }

body.theme-dark .modal-relatives{ border-top-color:var(--line) }
body.theme-dark .relative-chip{
  background:#fff;border-color:rgba(31,77,126,.3);color:var(--ink);
}
body.theme-dark .relative-chip:hover{ background:rgba(31,77,126,.07) }
body.theme-dark .relative-chip.female{ border-color:rgba(156,74,94,.38);color:var(--female) }

/* ---------- مسار التنقل + التلميح ---------- */
body.theme-dark .tree-breadcrumb{
  background:rgba(255,255,255,.82);
  border-color:var(--line);
}
body.theme-dark .tree-breadcrumb .crumb{ color:var(--muted) }
body.theme-dark .tree-breadcrumb button.crumb:hover{ color:var(--ink);background:rgba(31,77,126,.07) }
body.theme-dark .tree-breadcrumb .crumb.current{ color:var(--primary-2) }
body.theme-dark .crumb-sep{ color:#b9c6d6 }

body.theme-dark .tree-hint{
  background:rgba(255,255,255,.9);
  border-color:rgba(31,77,126,.25);
  color:var(--ink);
  box-shadow:0 8px 26px rgba(29,49,79,.10);
}

/* ---------- صفحة الإدارة ---------- */
body.theme-dark .admin-page input,
body.theme-dark .admin-page select,
body.theme-dark .admin-page textarea,
body.theme-dark .relation-search,
body.theme-dark .access-code-input,
body.theme-dark .all-mode-password-input,
body.theme-dark .admin-table-search-input{
  background:#fff;border:1px solid var(--line);color:var(--ink);
}
body.theme-dark .admin-page input:focus,
body.theme-dark .admin-page select:focus,
body.theme-dark .admin-page textarea:focus,
body.theme-dark .admin-table-search-input:focus{
  border-color:rgba(31,77,126,.5);box-shadow:0 0 0 3px var(--ring);
}
body.theme-dark label{ color:var(--ink) }
body.theme-dark .form-card,
body.theme-dark .table-card,
body.theme-dark .admin-settings-tool,
body.theme-dark .admin-data-tools,
body.theme-dark .permissions-panel{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* أزرار "تصدير الشجرة" و"للتواصل": بلا خلفية حاوية — تظهر مباشرة على
   خلفية الصفحة، بنص كحلي بدل الأسود */
body.theme-dark .visitor-tree-export button,
body.theme-dark .visitor-tree-export .contact-btn{
  color:var(--primary);
}
body.theme-dark .admin-settings-tool h3,
body.theme-dark .admin-logo-tool h3,
body.theme-dark .admin-contact-tool h3,
body.theme-dark .permissions-panel h2{ color:var(--primary) }
body.theme-dark .admin-table-search{ background:rgba(255,255,255,.86);border-bottom-color:var(--line) }
body.theme-dark .row{ border-bottom-color:var(--line) }
body.theme-dark .ghost{ background:#edf1f6 }
body.theme-dark .perm-user-row,
body.theme-dark .perm-current{ border-color:var(--line);background:#fff }
body.theme-dark .perm-checks label{ color:var(--ink) }
body.theme-dark .perm-add-row .perm-add,
body.theme-dark .perm-save,
body.theme-dark .settings-save,
body.theme-dark .logo-save-btn,
body.theme-dark .contact-save-btn,
body.theme-dark .display-options-save,
body.theme-dark .gallery-submit-btn,
body.theme-dark .gallery-file-btn{
  background:var(--grad);color:#fff;border:0;
}
body.theme-dark .display-option-row{ color:var(--ink) }
body.theme-dark .display-option-row input[type="checkbox"]{ accent-color:var(--primary) }
body.theme-dark .logo-preview-box{ background:#edf1f6;border-color:var(--line) }
body.theme-dark .owner-setup-note{ background:#eef4fb;border-color:#c4d5e8 }
body.theme-dark .login-card{ background:rgba(255,255,255,.9);border-color:var(--line) }
body.theme-dark .login-card svg{ color:var(--primary) }
body.theme-dark .login-card hr{ border-top-color:var(--line) }
body.theme-dark .login-divider{ color:var(--muted) }
body.theme-dark .login-divider::before,
body.theme-dark .login-divider::after{ background:var(--line) }

body.theme-dark .analytics-card{ background:#fff;border:1px solid var(--line) }
body.theme-dark .analytics-num{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
body.theme-dark .analytics-table th{
  background:rgba(31,77,126,.06);color:var(--ink);border-bottom:1px solid var(--line);
}
body.theme-dark .analytics-table td{ color:var(--ink);border-bottom:1px solid #edf1f6 }
body.theme-dark .analytics-table tr:hover td{ background:rgba(31,77,126,.035) }

/* ---------- التنبيهات ---------- */
body.theme-dark .toast{ background:var(--grad);box-shadow:0 12px 30px rgba(31,77,126,.32) }
body.theme-dark .toast.error{ background:#b3403f }

/* ============================================================
   زر اختيار التصميم في الإدارة (يظهر في كلا التصميمين)
   ============================================================ */
.theme-toggle-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:14px 0;
}
.theme-toggle-row .theme-option{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:14px;
  border:1px solid var(--line);
  cursor:pointer;font-weight:700;font-size:14px;
  background:#fff;color:var(--ink);
}
.theme-toggle-row .theme-option[data-active="true"]{
  background:var(--green);color:#fff;border-color:transparent;
}
.theme-toggle-row .theme-swatch{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
}
.theme-swatch--light{ background:linear-gradient(135deg,#fffaf2,#c59b55) }
.theme-swatch--classic-interactive{ background:linear-gradient(135deg,#173f36,#c59b55) }
.theme-swatch--dark{ background:linear-gradient(135deg,#16304e,#4a86c5) }

body.theme-dark .theme-toggle-row .theme-option{
  background:#fff;color:var(--ink);border-color:var(--line);
}
body.theme-dark .theme-toggle-row .theme-option[data-active="true"]{
  background:var(--grad);color:#fff;
}

/* ============================================================
   العرض التفاعلي (iv-*) — قلب التصميم الجديد
   ============================================================ */
body.theme-interactive .vertical-panel.iv-host{
  background:rgba(255,255,255,.84);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:visible;
  position:relative;
}

.iv-stage{
  position:relative;
  min-height:480px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 14px 46px;direction:rtl;
  isolation:isolate;
}


/* ---------- شريط رجوع الزوجة الخارجية ---------- */
.iv-nav{ display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:18px }
.iv-nav-btn{ border-radius:999px !important }

/* ---------- العقدة (شخص) ---------- */
.iv-node{
  appearance:none;border:0 !important;background:transparent !important;box-shadow:none !important;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  color:var(--ink);cursor:pointer;padding:2px 4px;position:relative;
  /* لم يعد will-change:transform ثابتاً هنا: تطبيقه دائماً على كل عقدة (كل
     الأجداد + المحوري + الأزواج + الأبناء معاً، قد تكون ١٠+ عناصر) يحجز
     طبقة GPU منفصلة لكل منها بشكل دائم، ما يستنزف ذاكرة الرسم على الهاتف
     (خصوصاً مع صور الأشخاص الحقيقية) ويسبب "رمشة" الصورة (تُعاد التركيبة
     الرسومية بشكل غير مستقر تحت ضغط الذاكرة). أصبح يُضاف عبر جافاسكربت فقط
     للعقد التي تتحرك فعلياً أثناء نافذة حركة FLIP، ويُزال فور اكتمالها -
     انظر interactive-view.js. */
}
/* نطبّق رفعة hover فقط على الأجهزة التي تملك تأشيراً حقيقياً (فأرة) وتدعم
   hover فعلياً. على اللمس (الهاتف/اللوح) لا يوجد "خروج" حقيقي من حالة
   hover بعد الضغط، فتبقى عالقة على العقدة حتى تُزال حركة FLIP قفل
   .iv-flip-lock بعد نحو ثانية — فتظهر حركة صغيرة مفاجئة في تلك اللحظة
   بالتحديد. نحصر رفعة hover بالماوس فقط فلا تحدث هذه المشكلة إطلاقاً على
   اللمس. */
@media (hover:hover) and (pointer:fine){
  .iv-node:hover{ transform:translateY(-3px) }
  .iv-node:hover .iv-ava{ box-shadow:0 14px 30px rgba(var(--tint),.26) }
  /* أثناء نافذة حركة FLIP (تنقّل بين الأجيال) نعطّل تأثير hover مؤقتاً حتى لا
     يفسد قياس المواقع إن سجّل المتصفح حالة hover متأخرة على العقدة الجديدة
     (لأن الفأرة تبقى في نفس مكانها الفعلي بعد إعادة الرسم) — يعود التأثير
     العادي فور انتهاء الحركة. */
  .iv-flip-lock .iv-node:hover{ transform:none !important }
  .iv-flip-lock .iv-node:hover .iv-ava{ box-shadow:0 10px 24px rgba(var(--tint),.18) !important }
  .iv-flip-lock .iv-f:hover .iv-ava{ box-shadow:0 10px 24px rgba(var(--tint-f),.18) !important }
}

.iv-ava{
  display:grid;place-items:center;overflow:hidden;position:relative;
  background:var(--grad-full);color:#fff;font-weight:900;
  box-shadow:0 10px 24px rgba(var(--tint),.18);
  transition:box-shadow .2s ease;
}
.iv-f .iv-ava{ background:var(--grad-female);box-shadow:0 10px 24px rgba(var(--tint-f),.18) }
.iv-ava img{ width:100%;height:100%;object-fit:cover;display:block }
.iv-init{ line-height:1 }

.iv-nm{
  /* position:relative تضع الاسم في نفس "طبقة" الرسم التي يقع فيها .iv-ava
     (الذي له position:relative)، فتُرسم خلفية الاسم البيضاء بعد ظل الصورة
     الرمزية حسب ترتيبهما في DOM بدلاً من أن يُرسم الظل فوقها لاحقاً ويظهر
     كتدرّج داخل الإطار. */
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-weight:800;line-height:1.3;word-break:break-word;
  background:#fff;border-radius:10px;padding:5px 9px;
  max-width:112px;
}
.iv-sub{ font-size:11.5px;color:var(--muted);font-weight:600 }

/* أحجام الأدوار — نصف قطر الزوايا متناسب مع الحجم لتبدو حركة
   التكبير/التصغير مورفاً طبيعياً واحداً */
.iv-anc .iv-ava{ width:80px;height:80px;border-radius:19px;font-size:24px }
.iv-anc .iv-nm{ font-size:12.5px }
.iv-child .iv-ava{ width:80px;height:80px;border-radius:19px;font-size:24px }
.iv-child .iv-nm{ font-size:12.5px }
.iv-spouse .iv-ava{ width:62px;height:62px;border-radius:15px;font-size:19px }
.iv-spouse .iv-nm{ font-size:11.5px;max-width:100px }

.iv-current{ cursor:zoom-in }
.iv-current .iv-ava{
  width:clamp(112px,20vw,136px);height:clamp(112px,20vw,136px);
  border-radius:32px;font-size:38px;
  background:var(--grad-full);
  color:#fff;
  /* الوهج مخفَّف إلى النصف حتى لا يزعج قراءة الاسم أسفل الصورة */
  --iv-glow:rgba(var(--tint),.11);
  --iv-glow-2:rgba(var(--tint),.065);
  box-shadow:0 22px 48px var(--iv-glow);
  animation:iv-breathe 3.2s ease-in-out infinite;
}
.iv-current.iv-f .iv-ava{
  background:var(--grad-female);
  --iv-glow:rgba(var(--tint-f),.1);
  --iv-glow-2:rgba(var(--tint-f),.065);
}
.iv-current .iv-nm{
  font-size:17px;max-width:180px;background:transparent;padding:0;
  /* أبعد عن الصورة، وأقرب من تاريخ الميلاد أسفلها */
  margin-top:6px;
}
.iv-current .iv-sub{ margin-top:-4px }
@keyframes iv-breathe{
  0%,100%{ box-shadow:0 22px 48px var(--iv-glow), 0 0 0 0 var(--iv-glow-2) }
  50%{ box-shadow:0 22px 48px var(--iv-glow), 0 0 0 14px rgba(0,0,0,0) }
}

/* ---------- سلسلة الأجداد ---------- */
.iv-chain{
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.iv-link{
  width:2.5px;height:16px;border-radius:4px;
  background:linear-gradient(180deg,rgba(var(--tint),.45),rgba(var(--tint-2),.35));
}
.iv-link-drop{ height:24px }
.iv-link-down{ height:26px }

/* ---------- الصف المحوري ---------- */
.iv-center{
  display:flex;align-items:flex-start;justify-content:center;gap:26px;
  flex-wrap:wrap;margin-top:2px;
}
.iv-current-cell{ display:flex;flex-direction:column;align-items:center;gap:9px }

.iv-spouses{ display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;max-width:340px;justify-content:center;padding-top:22px }
.iv-spouses.iv-many{ gap:8px }
.iv-spouses.iv-many .iv-ava{ width:52px;height:52px;border-radius:13px;font-size:16px }
.iv-badge{
  font-size:11px;font-weight:800;color:var(--primary-2);
  background:rgba(var(--primary-2-rgb),.07);border:1px solid rgba(var(--primary-2-rgb),.24);
  border-radius:999px;padding:1px 9px;margin-top:-2px;
}

/* ---------- منطقة الأبناء ---------- */
.iv-kids-zone{ display:flex;flex-direction:column;align-items:center;width:100%;margin-top:12px }
.iv-fork{
  height:2.5px;border-radius:4px;width:min(680px,72%);
  background:linear-gradient(90deg,transparent,rgba(var(--tint),.35) 18%,rgba(var(--tint-2),.35) 82%,transparent);
  margin-bottom:22px;
}
/* في الكلاسيكي التفاعلي: خط بلون ذهبي واحد بدل التدرّج بين لونين */
body.theme-classic-interactive .iv-fork{
  background:linear-gradient(90deg,transparent,rgba(var(--primary-2-rgb),.4) 18%,rgba(var(--primary-2-rgb),.4) 82%,transparent);
}
.iv-kids{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(12px,3.4vw,34px);flex-wrap:wrap;width:100%;
}
.iv-nokids{
  color:var(--muted);font-weight:800;font-size:17px;padding:34px 10px 10px;
}
.iv-empty{ color:var(--muted);font-weight:800;font-size:18px;padding:40px;text-align:center }

/* ---------- حركات الدخول والخروج (مشتركة لكل الأوضاع) ---------- */
.iv-enter,.sv-enter{
  animation:iv-pop-in .58s cubic-bezier(.18,.9,.28,1.18) both;
}
@keyframes iv-pop-in{
  from{ opacity:0;transform:translateY(26px) scale(.55) }
  to{ opacity:1;transform:translateY(0) scale(1) }
}

/* عناصر تأثيث تظهر متأخرة أثناء التنقل حتى تتصدر حركة الأشخاص المشهد */
.iv-late{ animation:iv-fade-late .5s ease .42s both }
@keyframes iv-fade-late{ from{ opacity:0 } to{ opacity:1 } }

.iv-ghost-layer,.mv-ghost-layer{ position:fixed;inset:0;pointer-events:none;z-index:80 }
.iv-ghost,.mv-ghost{
  position:fixed;margin:0;box-sizing:border-box;
  animation:iv-ghost-out .5s ease-in both;
}
@keyframes iv-ghost-out{
  from{ opacity:.9;transform:translateY(0) scale(1) }
  to{ opacity:0;transform:translateY(16px) scale(.5) }
}

/* ============================================================
   الوضع المتدرج التفاعلي (sv-*)
   ============================================================ */
body.theme-interactive .kids-grid .person-card{ transition:transform .18s ease, box-shadow .18s ease }
/* نفس سبب حصر رفعة .iv-node بالماوس فقط أعلاه: على اللمس تبقى حالة hover
   عالقة بعد الضغط فتسبب حركة صغيرة مفاجئة لاحقاً. */
@media (hover:hover) and (pointer:fine){
  body.theme-interactive .kids-grid .person-card:hover{ transform:translateY(-4px) }
}
body.theme-interactive .current-person .person-card.selected{
  outline-width:0;
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad-full) border-box;
  box-shadow:0 14px 34px rgba(var(--tint),.16);
}
body.theme-interactive .current-person .person-card.selected.female{
  background:
    linear-gradient(var(--female-soft),var(--female-soft)) padding-box,
    var(--grad-female) border-box;
}
/* الكلاسيكي التفاعلي: إطار الشخص المختار ذهبي (بدل الأخضر)، وحين ينتقل
   ويتلاشى (بطاقة "شبح" أثناء التنقل بين الأجيال) يتحول إلى الأخضر — عكس
   الترتيب الافتراضي، بحسب طلب صريح. */
body.theme-classic-interactive .current-person .person-card.selected,
body.theme-classic-interactive .current-person .person-card.selected.female{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#b78b3d,#d8b56e) border-box;
}
body.theme-classic-interactive .mv-ghost.selected{
  outline-width:0 !important;
  border:2px solid transparent !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad-full) border-box !important;
}

/* ============================================================
   قسم الصور — نفس سلوك التصميم الكلاسيكي تماماً (بلا حركات دخول
   أو تكبير إضافي)، فقط ألوان متسقة مع اللوحة الكحلية
   ============================================================ */
body.theme-dark .gallery-card{ background:#fff;border:1px solid var(--line) }
body.theme-dark .gallery-card:hover{ box-shadow:0 16px 40px rgba(29,49,79,.14) }
body.theme-dark .gallery-img-wrap{ background:#edf1f6 }
body.theme-dark .gallery-img-loading{
  background:linear-gradient(90deg,#edf1f6 25%,#e2e9f2 50%,#edf1f6 75%);
  background-size:200% 100%;
}
body.theme-dark .gallery-add-form{ background:rgba(255,255,255,.9);border-color:var(--line) }
body.theme-dark .gallery-add-form h3{ color:var(--primary) }
body.theme-dark .gallery-tab{ background:#eef2f7;color:var(--muted) }
body.theme-dark .gallery-tab.active{ background:var(--grad);color:#fff }
body.theme-dark .gallery-file-label{ border-color:rgba(31,77,126,.35) }
body.theme-dark .gallery-file-label:hover{ border-color:var(--primary) }

/* ---------- احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce){
  .iv-current .iv-ava{ animation:none }
  .iv-enter,.sv-enter,
  .iv-ghost,.mv-ghost{ animation-duration:.01s;animation-delay:0s }
}

/* ---------- تجاوب الموبايل ---------- */
@media (max-width:760px){
  .iv-stage{ padding:18px 8px 34px }
  .iv-anc .iv-ava{ width:72px;height:72px;border-radius:17px;font-size:21px }
  .iv-child .iv-ava{ width:72px;height:72px;border-radius:17px;font-size:21px }
  .iv-current .iv-ava{ width:106px;height:106px;border-radius:26px;font-size:32px }
  .iv-current .iv-nm{ font-size:15px;max-width:140px }
  .iv-kids{ gap:12px }
  .iv-nm{ max-width:90px;font-size:11.5px }
  .iv-fork{ width:86% }
  .iv-spouses{ padding-top:10px }
  /* الشريط العلوي (بحث + تصفية) على الموبايل: يستخدم القالب الأساسي
     خلفية بيج ثابتة — نستبدلها بالأبيض المتّسق مع اللوحة الكحلية */
  body.theme-dark .toolbar{
    background:rgba(255,255,255,.85);
    border-color:var(--line);
  }
}
@media (max-width:520px){
  .iv-center{ flex-direction:column;align-items:center;gap:12px }
  .iv-spouses{ padding-top:0 }
}
@media (max-width:900px) and (orientation:landscape){
  body.theme-dark .toolbar{
    background:rgba(255,255,255,.85) !important;
    border-color:var(--line) !important;
  }
}