@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/thmanyahsans-Light.woff2?v=74a1d5f5") format("woff2"),url("/fonts/thmanyahsans-Light.otf?v=7ff7aa90") format("opentype");}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/thmanyahsans-Regular.woff2?v=9a51a555") format("woff2"),url("/fonts/thmanyahsans-Regular.otf?v=a14b1899") format("opentype");}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/thmanyahsans-Medium.woff2?v=168d6e4e") format("woff2"),url("/fonts/thmanyahsans-Medium.otf?v=26480691") format("opentype");}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/thmanyahsans-Bold.woff2?v=4a3a0316") format("woff2"),url("/fonts/thmanyahsans-Bold.otf?v=3dc8353a") format("opentype");}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:900;font-display:swap;src:url("/fonts/thmanyahsans-Black.woff2?v=75067466") format("woff2"),url("/fonts/thmanyahsans-Black.otf?v=f5966c14") format("opentype");}
/* ==========================================================================
   موسوعة سير أعلام المعاصرين: ورقة الأنماط
   لوحة موسوعية هادئة: أبيض، رماديات ناعمة، أزرق كلاسيكي للروابط.
   الخطوط: خط ثمانية (يُضاف تعريف @font-face تلقائيًا في أعلى هذا الملف عند البناء إذا وُجدت ملفاته)،
   وخطوط النظام العربية احتياطًا.
   ========================================================================== */

/* السمة الفاتحة هي الأصل؛ والداكنة طبقات كحلية ثابتة مستلهمة من مرجع الوضع الليلي. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --text: #212327;
  --text-soft: #333333;
  --muted: #565b62;
  --link: #0b5aa0;
  --link-visited: #551a8b;
  --link-external: #2f7cb3;
  --border: #a7adb5;
  --border-light: #cdd1d6;
  --border-faint: #eceef2;
  --box: #f7f8fa;
  --box-head: #edeff3;
  --surface: #ffffff;
  --input-bg: #ffffff;
  /* الخط الأساسي: ثمانية Sans (ملفاته في static/fonts)؛ وبعده خطوط النظام احتياطًا */
  --font-body: "Thmanyah Sans", "Thmanyah Serif Text", "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", "Droid Arabic Naskh", sans-serif;
  --font-heading: "Thmanyah Sans", "Thmanyah Serif Display", "Thmanyah Serif Text", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  --font-ui: "Thmanyah Sans", "Segoe UI", Tahoma, Arial, sans-serif;
  --content-width: 1180px;
  --sidebar-width: 190px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000711;
  --text: #f5f8fa;
  --text-soft: #e1e8ed;
  --muted: #8899a6;
  --link: #0798f3;
  --link-visited: #0798f3;
  --link-external: #0798f3;
  --border: #2a425a;
  --border-light: #000000;
  --border-faint: #0a1c2c;
  --box: #041423;
  --box-head: #0e2034;
  --surface: #041423;
  --input-bg: #000711;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.3rem; /* 20.8 بكسل: اختيار صاحب الموقع؛ خط ثمانية يبدو أصغر من حجمه الاسمي */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] html {
  background-color: var(--bg);
}
:root[data-theme="dark"] body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: none;
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:visited { color: var(--link-visited); }
a.external { color: var(--link-external); }
a.external:visited { color: #636; }
:root[data-theme="dark"] a.external:visited { color: var(--link-visited); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--link); outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

code { font-family: Consolas, "Courier New", monospace; font-size: 0.9em; background: var(--box); padding: 0 0.2em; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }

blockquote {
  margin: 1em 0;
  padding: 0.5em 1.25em;
  border-inline-start: 3px solid var(--border-light);
  background: var(--box);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* رابط «انتقل إلى المحتوى»: مخفي تمامًا فوق الصفحة، ولا يظهر إلا عند الوصول إليه بلوحة المفاتيح */
.skip {
  position: absolute; top: 0; right: 0; z-index: 10;
  background: var(--box); padding: 0.5em 1em; border: 1px solid var(--border);
  transform: translateY(-110%);
}
.skip:focus { transform: none; }

.wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 1rem; }

.muted { color: var(--muted); }

/* --------------------------------------------------------------------------
   الترويسة
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
  font-family: var(--font-ui);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; flex-wrap: wrap;
}

.logo, .logo:visited { display: flex; align-items: center; gap: 0.6rem; color: var(--text); }
.logo:hover { text-decoration: none; }
.logo-name { color: var(--text); }
.logo-mark { flex: 0 0 auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.3; }
.logo-name { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; }
.logo-tagline { font-size: 0.8rem; color: var(--muted); }

.header-tools { display: flex; align-items: center; gap: 0.6rem; max-width: 100%; }

/* قائمة التنقل الرئيسية في الترويسة (سطح المكتب) */
.site-nav { display: flex; align-items: center; gap: 0.1rem; flex: 1 1 auto; justify-content: center; font-size: 0.95rem; }
.site-nav a, .site-nav a:visited {
  position: relative; display: inline-block; padding: 0.45em 0.8em; border-radius: 8px;
  color: var(--text-soft); font-weight: 500; white-space: nowrap;
  transition: color 0.15s, background-color 0.15s;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--link); background: var(--box); text-decoration: none; }
.site-nav a::after {
  content: ""; position: absolute; inset-inline: 0.8em; bottom: 0.15em; height: 2px;
  background: var(--link); border-radius: 2px; transform: scaleX(0); transition: transform 0.15s;
}
.page-home .site-nav .nav-home, .page-list .site-nav .nav-list,
.page-categories .site-nav .nav-cats, .page-category .site-nav .nav-cats,
.page-currents .site-nav .nav-currents, .page-current .site-nav .nav-currents { color: var(--link); font-weight: 700; }
.page-home .site-nav .nav-home::after, .page-list .site-nav .nav-list::after,
.page-categories .site-nav .nav-cats::after, .page-category .site-nav .nav-cats::after,
.page-currents .site-nav .nav-currents::after, .page-current .site-nav .nav-currents::after { transform: scaleX(1); }
:root[data-theme="dark"] .site-nav a:hover, :root[data-theme="dark"] .site-nav a:focus-visible { background: var(--box-head); }
/* سطر واحد دائمًا على سطح المكتب؛ وعلى الأعراض المتوسطة تضيق القائمة والبحث بدل أن ينكسر السطر */
@media (min-width: 901px) {
  .header-inner { flex-wrap: nowrap; }
  .logo { flex: 0 0 auto; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  .site-nav { font-size: 0.88rem; gap: 0; }
  .site-nav a { padding-inline: 0.55em; }
  .search input { width: 11rem; }
}

/* أدوات الهاتف مخفية على الشاشات الواسعة، وتظهر داخل نقطة التحول أدناه */
.mobile-search-link, .mobile-menu { display: none; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--box); color: var(--muted); cursor: pointer; padding: 0;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text); }
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

.search { display: flex; gap: 0; max-width: 100%; }
.search input {
  font: inherit; font-size: 0.95rem; padding: 0.45em 0.7em; width: 16rem; max-width: 100%;
  border: 1px solid var(--border); border-radius: 0 6px 6px 0; background: var(--input-bg); color: var(--text);
}
.search input:focus { outline: 0; border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.search button {
  font: inherit; font-size: 0.95rem; padding: 0.45em 0.9em; cursor: pointer;
  border: 1px solid var(--border); border-inline-start: 0; border-radius: 6px 0 0 6px;
  background: var(--box); color: var(--text);
}
.search button:hover { background: var(--box-head); }
.search-page { margin: 1em 0; }
.search-page input { width: 24rem; }

/* --------------------------------------------------------------------------
   الهيكل: شريط جانبي يمين + محتوى
   -------------------------------------------------------------------------- */

.page {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

.sidebar { font-family: var(--font-ui); font-size: 0.95rem; }
/* أيقونات خطية صغيرة قبل عناصر التنقل والتصنيفات والعناوين */
.portal-icon, .cat-item-icon, .cat-card-icon, .page-title-icon {
  display: inline-flex; width: 1em; height: 1em; flex: 0 0 auto;
  vertical-align: -0.15em; margin-inline-end: 0.4em;
}
.portal-icon svg, .cat-item-icon svg, .cat-card-icon svg, .page-title-icon svg {
  width: 100%; height: 100%;
}
.portal-icon { color: var(--muted); }
.cat-item-icon, .cat-card-icon { color: var(--link); }
.page-title-icon {
  width: 0.8em; height: 0.8em; color: var(--bio-accent);
  vertical-align: -0.05em; margin-inline-end: 0.35em;
}

.portal { margin-bottom: 1.25rem; }
.portal h3 {
  font-size: 0.78rem; font-weight: normal; color: var(--muted); margin: 0 0 0.3em;
  padding-bottom: 0.25em; border-bottom: 1px solid var(--border-light);
}
.portal ul { list-style: none; margin: 0; padding: 0; }
.portal li { padding: 0.2em 0; line-height: 1.5; }
.portal .count { color: var(--muted); font-size: 0.9em; }

.content { min-width: 0; max-width: 900px; }

/* --------------------------------------------------------------------------
   العناوين بالأسلوب الموسوعي الكلاسيكي
   -------------------------------------------------------------------------- */

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
  margin: 0 0 0.3em;
  padding: 0 0 0.22em; /* مسافة تحت الحروف النازلة (ع، ج، ي) قبل الخط */
}
h1 { font-size: 1.9em; }
h2 { font-size: 1.5em; margin-top: 1.2em; }
h3 { font-size: 1.2em; font-weight: 700; margin: 1em 0 0.3em; }
h4 { font-size: 1.05em; font-weight: 700; margin: 0.8em 0 0.3em; }

.page-title { margin-bottom: 0.1em; }
.bio > .page-title { font-size: 1.35em; }
.bio > .page-body > h2 { font-size: 1.18em; }
.bio > .page-body > h3 { font-size: 1.06em; }
.bio > .page-body > h4 { font-size: 1em; }
.category-heading { font-size: 1.6em; }
.page-sub { font-size: 1rem; color: var(--muted); margin-bottom: 0.8em; font-family: var(--font-ui); }
.shortdesc { color: var(--muted); margin: -0.3em 0 1em; font-size: 1.02em; }
/* الخط بلا وزن مائل، والميل الاصطناعي لا يليق بالعربية: التأكيد بالوزن لا بالميل */
em, i { font-style: normal; font-weight: 700; }

.page-body p { margin: 0.5em 0 0.9em; text-align: start; }
/* تجربة اختيارية لكل سيرة: تسوية أسطر المتن بخوارزمية واعية بالعربية. */
.bio.bio-justify > .page-body > p,
.bio.bio-justify > .page-body > .bio-pullquote > p,
.bio.bio-justify > .page-body > .sources > p {
  text-align: justify;
  text-align-last: start;
  text-justify: auto;
}
:root[data-theme="dark"] .page {
  background: var(--surface);
  box-shadow: 0 0 0 1px #00101c;
}
:root[data-theme="dark"] .site-header {
  background: var(--hd-bg);
}
/* على الهاتف الضيق تخلق التسوية فراغات واسعة؛ القراءة الطبيعية أجمل وأسرع. */
@media screen and (max-width: 560px) {
  .bio.bio-justify > .page-body > p,
  .bio.bio-justify > .page-body > .bio-pullquote > p,
  .bio.bio-justify > .page-body > .sources > p {
    text-align: start;
    text-align-last: auto;
  }
}
/* متن السيرة أخف بدرجة واحدة، مع إبقاء العناوين وصندوق التعريف بوزنهما الواضح. */
.bio > .page-body > p,
.bio > .page-body > ul,
.bio > .page-body > ol,
.bio > .page-body > blockquote { font-weight: 300; }
.page-body ul, .page-body ol { margin: 0.3em 1.6em 0.8em 0; padding: 0; }
.page-body li { margin-bottom: 0.2em; }

/* سجل المصادر بخط أصغر كقائمة المراجع */
.sources { font-size: 0.88em; line-height: 1.7; }
.sources p { margin: 0.4em 0; }

/* أبيات الشعر: صدر وعجز متقابلان، ويتراصّان عموديًا على الشاشات الضيقة */
.poem { margin: 1em auto; max-width: 40em; }
.verse { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2em 2.5em; margin: 0.2em 0; }
.verse span { flex: 1 1 14em; text-align: center; }

.dating-note {
  font-size: 0.92em; color: var(--muted); border-top: 1px solid var(--border-faint);
  padding-top: 0.8em; margin-top: 1.5em;
}

/* --------------------------------------------------------------------------
   النمط التحريري الموحّد للسير بروح موسوعية هادئة
   يميّز العناوين والاقتباسات والمؤلفات وتاريخ كتابة الترجمة من غير تغيير المتن.
   -------------------------------------------------------------------------- */

.bio-showcase {
  --bio-accent: #2266aa;
  --bio-accent-strong: #2a4b8d;
  --bio-accent-border: #c7d6ef;
  --bio-ice: #cbe3fc;
  --bio-note: #f0f2f4;
}
:root[data-theme="dark"] .bio-showcase {
  --bio-accent: #0798f3;
  --bio-accent-strong: #75a9c9;
  --bio-accent-border: #2a425a;
  --bio-ice: #03111e;
  --bio-note: #0e2034;
}

.bio-showcase .bio-section-heading {
  display: flex;
  align-items: center;
  gap: 0.16em;
  border-bottom: 1px solid var(--border);
}
.bio-showcase .bio-section-heading .mw-headline {
  flex: 0 1 auto;
  min-width: 0;
  text-wrap: balance;
}
.bio-showcase .bio-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  color: var(--bio-accent);
}
.bio-showcase .bio-section-icon svg { width: 1em; height: 1em; }

/* قوائم الشيوخ والمؤلفات: مطوية كاملة على طريقة الصناديق الموسوعية. */
.infobox-list-disclosure { width: 100%; }
.infobox-list-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45em;
  min-width: 0;
  cursor: pointer;
  color: var(--text);
  list-style: none;
}
.infobox-list-disclosure > summary::-webkit-details-marker { display: none; }
.infobox-disclosure-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  min-width: 0;
  white-space: nowrap;
}
.infobox-disclosure-icon {
  display: block;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.infobox-disclosure-action {
  flex: 0 0 auto;
  color: var(--link);
  font-size: 0.82em;
  line-height: 1.5;
  font-weight: 400;
  white-space: nowrap;
}
.infobox-disclosure-hide { display: none; }
.infobox-list-disclosure[open] .infobox-disclosure-show { display: none; }
.infobox-list-disclosure[open] .infobox-disclosure-hide { display: inline; }
.infobox-list-disclosure > summary:hover .infobox-disclosure-action { text-decoration: underline; }
.infobox-disclosure-list {
  margin-top: 0.42em;
  padding-top: 0.38em;
  border-top: 1px solid var(--border-light);
}

/* بقية القوائم الطويلة: يظهر طرفها الأول ثم تُفتح عند الحاجة. */
.infobox-collapsible-list > .plainlist { margin-bottom: 0; }
.infobox-list-more { margin-top: 0.3em; }
.infobox-list-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  cursor: pointer;
  color: var(--link);
  font-family: var(--font-ui);
  font-size: 0.78em;
  line-height: 1.5;
  list-style: none;
}
.infobox-list-more > summary::-webkit-details-marker { display: none; }
.infobox-list-more > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
}
.infobox-list-more[open] > summary::before { content: "−"; }
.infobox-list-more > summary:hover { text-decoration: underline; }
.infobox-list-remainder { margin-top: 0.35em; }
.infobox-more-open { display: none; }
.infobox-list-more[open] .infobox-more-closed { display: none; }
.infobox-list-more[open] .infobox-more-open { display: inline; }

.bio.bio-showcase > .page-body > .bio-pullquote {
  --bio-quote-bg: var(--bio-ice);
  --bio-quote-border: var(--bio-accent-border);
  --bio-quote-accent: var(--bio-accent);
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  max-width: 43rem;
  margin: 1.35rem auto;
  padding-block: 1rem;
  padding-inline: 0.78rem 1.05rem;
  border: 1px solid var(--bio-quote-border);
  border-inline-start: 6px solid var(--bio-quote-accent);
  border-radius: 8px;
  background: var(--bio-quote-bg);
  font-weight: 500;
}
/* على سطح المكتب يمتد صندوق الوقفة بعرض المتن بدل ظهوره كمربع ضيق في الوسط. */
@media screen and (min-width: 901px) {
  .bio.bio-showcase > .page-body > .bio-pullquote {
    max-width: none;
    margin-inline: 0;
  }
}
.bio-showcase .bio-pullquote p { margin: 0; }
.bio-showcase .bio-pullquote p + p { margin-top: 0.55em; }

/* الحكم النهائي: دم غزال هادئ، لا أحمر صارخًا يطغى على النص. */
.bio.bio-showcase > .page-body > .bio-pullquote.bio-pullquote-verdict {
  --bio-quote-bg: #f5e8eb;
  --bio-quote-border: #d6a8b2;
  --bio-quote-accent: #7b2038;
}

/* الدعاء: أخضر فاتح مطمئن ومختلف بوضوح عن النقل والحكم. */
.bio.bio-showcase > .page-body > .bio-pullquote.bio-pullquote-prayer {
  --bio-quote-bg: #e8f4ec;
  --bio-quote-border: #acd1b7;
  --bio-quote-accent: #2f7a4b;
}

:root[data-theme="dark"] .bio.bio-showcase > .page-body > .bio-pullquote.bio-pullquote-verdict {
  --bio-quote-bg: #211219;
  --bio-quote-border: #7c3f53;
  --bio-quote-accent: #e69aaa;
}
:root[data-theme="dark"] .bio.bio-showcase > .page-body > .bio-pullquote.bio-pullquote-prayer {
  --bio-quote-bg: #0d2219;
  --bio-quote-border: #3d6a50;
  --bio-quote-accent: #9cd1ad;
}

.bio-showcase .bio-work-entry {
  position: relative;
  padding-inline-start: 1.05em;
}
.bio-showcase .bio-work-entry::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--bio-accent-strong);
}
.bio-showcase .bio-work-list li::marker { color: var(--bio-accent-strong); }

.bio-showcase .dating-note-enhanced {
  display: flex;
  align-items: flex-start;
  gap: 0.62em;
  padding: 0.85em 0.95em;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bio-note);
  color: var(--text-soft);
}
.bio-showcase .dating-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.3em;
  height: 1.3em;
  margin-block-start: 0.14em;
  color: var(--bio-accent-strong);
}
.bio-showcase .dating-note-icon svg { width: 1.05em; height: 1.05em; }
.bio-showcase .dating-note-text { min-width: 0; }

/* --------------------------------------------------------------------------
   صندوق المعلومات
   -------------------------------------------------------------------------- */

.infobox {
  width: 21rem;
  max-width: 100%;
  border: 1px solid var(--border);
  border-spacing: 3px;
  background: var(--box);
  font-size: 1.1rem; /* مستقل عن حجم المتن حتى لا يتضخم الصندوق ويزاحم النص */
  line-height: 1.6;
  font-family: var(--font-ui);
}
/* في RTL الطرف البادئ هو اليمين؛ نريد الصندوق على اليسار على عادة الموسوعات العربية */
.infobox { float: left; clear: left; margin: 0.5em 1.25em 1em 0; }
/* على سطح المكتب: رأس الصندوق وأول سطر من المقدمة على مستوى واحد */
@media (min-width: 901px) {
  .bio > .page-body > .infobox { margin-top: 0; }
  .bio > .page-body > .infobox + p { margin-top: 0; padding-top: 0.46em; } /* padding لا margin حتى لا تندمج الهوامش مع الحاوية فيتحرك الصندوق معها */
}
.infobox th, .infobox td { padding: 0.25em 0.5em; vertical-align: top; text-align: start; }
.infobox td { overflow-wrap: anywhere; }
.infobox th[scope="row"] { font-weight: 700; width: 36%; }
/* رأس الصندوق: الاسم وختم الحكم */
.infobox .infobox-head {
  text-align: center; padding: 0.45em 0.6em; background: var(--box-head);
  font-family: var(--font-heading); font-size: 1.12em; font-weight: 700; line-height: 1.5;
}
.infobox-title { margin: 0; padding: 0; border: 0; font-size: 1.02em; font-weight: 700; line-height: 1.5; }
.infobox-head-name { vertical-align: middle; }
.verdict-seal {
  display: inline-block; width: 1.4em; height: 1.4em; vertical-align: middle;
  margin-inline-start: 0.3em; flex: 0 0 auto;
}
.verdict-seal svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }
.seal-check .seal-bg { fill: #d4a017; }
.seal-x .seal-bg { fill: #d0342c; }
:root[data-theme="dark"] .seal-check .seal-bg { fill: #e0b23a; }
:root[data-theme="dark"] .seal-x .seal-bg { fill: #e04a42; }
.infobox .infobox-image { text-align: center; padding: 0.4em; }
.infobox .infobox-image img { max-width: 100%; height: auto; }
.infobox-label {
  display: inline-flex; align-items: flex-start; gap: 0.38em;
}
.infobox-icon {
  display: block; flex: 0 0 auto; width: 0.92em; height: 0.92em;
  margin-block-start: 0.22em; color: var(--muted);
}
.infobox-value-with-flags {
  display: inline-flex; align-items: flex-start; gap: 0.45em; max-width: 100%;
}
.infobox-flags {
  display: inline-flex; align-items: center; gap: 0.18em; flex: 0 0 auto;
  margin-block-start: 0.27em;
}
.infobox-flag {
  display: block; width: 1.4em; height: 0.92em; overflow: hidden;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--border-light);
}
.infobox-category-value {
  display: inline-flex; align-items: center; gap: 0.45em; max-width: 100%;
}
.infobox-category-dot {
  display: inline-block; flex: 0 0 auto; width: 0.62em; height: 0.62em;
  border-radius: 50%; box-shadow: 0 0 0 1px rgb(32 33 34 / 18%);
}
.infobox-category-dot-positive { background: #2f9e58; }
.infobox-category-dot-negative { background: #d43c3c; }
:root[data-theme="dark"] .infobox-category-dot-positive { background: #49c979; }
:root[data-theme="dark"] .infobox-category-dot-negative { background: #f06464; }
.infobox-current.is-unpublished { color: var(--text); }
.infobox a.external { overflow-wrap: anywhere; }
.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { margin: 0 0 0.15em; }

/* --------------------------------------------------------------------------
   جدول المحتويات
   -------------------------------------------------------------------------- */

.toc {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--box);
  padding: 0.5em 1em 0.6em;
  margin: 0.5em 0 1em;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 100%;
}
.toc summary { font-weight: 700; text-align: center; cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: " [إخفاء]"; font-weight: normal; font-size: 0.85em; color: var(--link); }
.toc:not([open]) summary::after { content: " [إظهار]"; }
.toc ol { list-style: none; margin: 0.3em 0 0; padding: 0; }
.toc ol ol { margin: 0 1.5em 0 0; }
.toc li { margin: 0.15em 0; }
.toc a { display: inline-block; }
.tocnumber { color: var(--text); margin-inline-end: 0.4em; }

/* --------------------------------------------------------------------------
   مشاركة السيرة، التواصل، سير ذات صلة، التصنيفات، بيانات الصفحة
   -------------------------------------------------------------------------- */

.bio-end-actions {
  clear: both;
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.35fr);
  gap: 0.85rem;
  margin: 1.5em 0 1em;
  font-family: var(--font-ui);
}
.bio-end-actions > .contact-card,
.bio-end-actions > .bio-share {
  min-width: 0;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}
.bio-end-actions > .bio-share:only-child { grid-column: 1 / -1; }
.bio-end-actions > .contact-card {
  display: flex;
  flex-direction: column;
  border-inline-start-color: #14866d;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(20, 134, 109, 0.065), transparent 62%), var(--box);
  box-shadow: 0 2px 8px rgba(32, 33, 34, 0.06);
}
.bio-end-actions .contact-card-symbol {
  border: 0;
  border-radius: 12px;
  background: rgba(20, 134, 109, 0.11);
  color: #10725d;
}
.bio-end-actions .contact-card-header { align-items: center; }
.bio-end-actions .contact-card-body {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 0;
}
.bio-end-actions .contact-card-actions { flex-wrap: wrap; }

.bio-share {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.9rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-light);
  border-inline-start: 4px solid #2266aa;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(51, 102, 204, 0.065), transparent 58%), var(--box);
  box-shadow: 0 2px 8px rgba(32, 33, 34, 0.06);
  font-family: var(--font-ui);
}
.bio-share-info { min-width: 0; }
.bio-share-heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.bio-share-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(51, 102, 204, 0.12);
  color: #2a4f9e;
}
.bio-share-title {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  font: 700 1.12rem/1.35 var(--font-ui);
}
.bio-share-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}
.bio-share-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid #2266aa;
  border-radius: 999px;
  font: 700 0.92rem/1.2 var(--font-ui);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.bio-share-primary { background: #2266aa; color: #ffffff; }
.bio-share-primary:hover { background: #2a4f9e; border-color: #2a4f9e; transform: translateY(-1px); }
.bio-share-copy-button { background: var(--surface); color: #2a4f9e; }
.bio-share-copy-button:hover { background: rgba(51, 102, 204, 0.08); transform: translateY(-1px); }
.bio-share-action:active { transform: translateY(0); }
.bio-share-action:disabled { cursor: wait; opacity: 0.72; transform: none; }
.bio-share-action.is-success { background: #14866d; border-color: #14866d; color: #ffffff; }
.bio-share-action.is-error { background: #b32424; border-color: #b32424; color: #ffffff; }
.bio-share-icon { flex: 0 0 auto; }
.bio-share-icon-success { display: none; }
.bio-share-action.is-success .bio-share-icon-default { display: none; }
.bio-share-action.is-success .bio-share-icon-success { display: block; }
.bio-share-networks { display: flex; align-items: center; gap: 0.4rem; }
.bio-social-link,
.bio-social-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.bio-social-link:hover,
.bio-social-link:focus-visible { color: #ffffff; text-decoration: none; transform: translateY(-2px); }
.bio-social-link.is-whatsapp, .bio-social-link.is-whatsapp:visited { color: #168c72; background: rgba(22, 140, 114, 0.07); }
.bio-social-link.is-telegram, .bio-social-link.is-telegram:visited { color: #168acb; background: rgba(22, 138, 203, 0.07); }
.bio-social-link.is-facebook, .bio-social-link.is-facebook:visited { color: #0866ff; background: rgba(8, 102, 255, 0.07); }
.bio-social-link.is-x, .bio-social-link.is-x:visited { color: #111111; background: rgba(17, 17, 17, 0.055); }
.bio-social-link.is-whatsapp:hover, .bio-social-link.is-whatsapp:focus-visible { background: #168c72; border-color: #168c72; color: #ffffff; }
.bio-social-link.is-telegram:hover, .bio-social-link.is-telegram:focus-visible { background: #168acb; border-color: #168acb; color: #ffffff; }
.bio-social-link.is-facebook:hover, .bio-social-link.is-facebook:focus-visible { background: #0866ff; border-color: #0866ff; color: #ffffff; }
.bio-social-link.is-x:hover, .bio-social-link.is-x:focus-visible { background: #111111; border-color: #111111; color: #ffffff; }
:root[data-theme="dark"] .bio-share {
  background: var(--box);
  border-inline-start-color: #0798f3;
  box-shadow: none;
}
:root[data-theme="dark"] .bio-end-actions > .contact-card {
  background: linear-gradient(135deg, rgba(185, 222, 211, 0.075), transparent 62%), var(--box);
  border-inline-start-color: #b9ded3;
  box-shadow: none;
}
:root[data-theme="dark"] .bio-end-actions .contact-card-symbol {
  background: rgba(185, 222, 211, 0.1);
  color: #b9ded3;
}
:root[data-theme="dark"] .bio-share-symbol { background: rgba(7, 152, 243, 0.14); color: #0798f3; }
:root[data-theme="dark"] .bio-share-primary { background: #0798f3; border-color: #0798f3; color: #00111d; }
:root[data-theme="dark"] .bio-share-primary:hover { background: #4ab3f4; border-color: #4ab3f4; }
:root[data-theme="dark"] .bio-share-copy-button { border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .bio-share-action.is-success { background: #2c725f; border-color: #2c725f; color: #ffffff; }
:root[data-theme="dark"] .bio-share-action.is-error { background: #8f3030; border-color: #8f3030; color: #ffffff; }
:root[data-theme="dark"] .bio-social-link.is-x,
:root[data-theme="dark"] .bio-social-link.is-x:visited { color: var(--text); background: rgba(245, 248, 250, 0.07); }
:root[data-theme="dark"] .bio-social-link.is-x:hover,
:root[data-theme="dark"] .bio-social-link.is-x:focus-visible { background: var(--text); border-color: var(--text); color: #00111d; }

.contact-email {
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}
.contact-card {
  clear: both;
  margin: 1.25em 0 1em;
  padding: 1rem;
  border: 1px solid var(--border-light);
  border-inline-start: 4px solid var(--link);
  border-radius: 10px;
  background: var(--box);
  font-family: var(--font-ui);
}
.contact-card-header { display: flex; align-items: flex-start; gap: 0.75rem; }
.contact-card-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: var(--surface);
  color: var(--link);
}
.contact-card-title {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.4;
}
.contact-card-text { margin: 0.18rem 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.contact-card-body {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-faint);
}
.contact-card-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.contact-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  font: 700 0.95rem/1.2 var(--font-ui);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.contact-card-copy { background: var(--surface); color: var(--text); cursor: pointer; }
.contact-card-copy:hover, .contact-card-copy:focus {
  border-color: var(--border);
  background: var(--box-head);
}
.contact-card-copy:disabled { cursor: wait; opacity: 0.72; }
.contact-card-copy.is-success { border-color: #14866d; background: #14866d; color: #ffffff; }
.contact-card-copy.is-error { border-color: #b32424; background: #b32424; color: #ffffff; }
.contact-copy-icon, .contact-card-action svg { flex: 0 0 auto; }
.contact-copy-icon-success { display: none; }
.contact-card-copy.is-success .contact-copy-icon-default { display: none; }
.contact-card-copy.is-success .contact-copy-icon-success { display: block; }
.contact-card-send { border-color: #2266aa; background: #2266aa; color: #ffffff; }
.contact-card-send:visited { color: #ffffff; }
.contact-card-send:hover, .contact-card-send:focus {
  border-color: #2a4f9e;
  background: #2a4f9e;
  color: #ffffff;
  text-decoration: none;
}
:root[data-theme="dark"] .contact-card-send {
  border-color: #0798f3;
  background: #0798f3;
  color: #00111d;
}
:root[data-theme="dark"] .contact-card-send:visited { color: #00111d; }
:root[data-theme="dark"] .contact-card-send:hover,
:root[data-theme="dark"] .contact-card-send:focus { border-color: #4ab3f4; background: #4ab3f4; color: #00111d; }
:root[data-theme="dark"] .contact-card-copy.is-success { border-color: #b9ded3; background: #b9ded3; color: #111111; }
:root[data-theme="dark"] .contact-card-copy.is-error { border-color: #efb1b1; background: #efb1b1; color: #111111; }

/* سير ذات صلة: بطاقات مصغرة بصورة دائرية واسم وتصنيف */
.related-icon {
  display: inline-flex; width: 0.85em; height: 0.85em; flex: 0 0 auto;
  color: var(--bio-accent); margin-inline-end: 0.4em; vertical-align: -0.08em;
}
.related-icon svg { width: 100%; height: 100%; }
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.8rem; margin: 0.9em 0 1em;
}
.rel-card {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid var(--border-light); border-radius: 10px;
  background: var(--surface); color: var(--text);
  padding: 0.55em 0.8em; min-width: 0;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.rel-card:hover, .rel-card:focus {
  text-decoration: none; border-color: var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-1px);
}
.rel-card:visited { color: var(--text); }
.rel-thumb {
  flex: 0 0 auto; width: 58px; height: 58px; overflow: hidden;
  border-radius: 50%; border: 1px solid var(--border-light); background: var(--box);
}
.rel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rel-noimg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.5em; color: var(--muted);
}
.rel-text { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
.rel-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.95em; line-height: 1.45;
  color: var(--link);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rel-cat { font-family: var(--font-ui); font-size: 0.72rem; color: var(--muted); }
.rel-status { color: #a32323; font-weight: 700; }
.rel-status-positive { color: #216e39; }
.rel-status-negative { color: #a32323; }
:root[data-theme="dark"] .rel-status { color: #ffaaaa; }
:root[data-theme="dark"] .rel-status-positive { color: #8be3a7; }
:root[data-theme="dark"] .rel-status-negative { color: #ffaaaa; }

.cat-links {
  clear: both;
  border: 1px solid var(--border);
  background: var(--box);
  padding: 0.5em 0.8em;
  margin-top: 1.5em;
  font-size: 1.05rem;
  font-family: var(--font-ui);
}
.cat-links { display: flex; align-items: center; gap: 0.45em 1em; flex-wrap: wrap; }
.cat-links > span { display: inline-flex; align-items: center; gap: 0.3em; }

.page-meta { color: var(--muted); font-size: 1rem; margin-top: 1em; font-family: var(--font-ui); }

/* --------------------------------------------------------------------------
   القوائم (أحدث السير، التصنيفات، الفهرس، البحث)
   -------------------------------------------------------------------------- */

.bio-list, .cat-list { list-style: none; margin: 0; padding: 0; }
.bio-item { padding: 0.6em 0; border-bottom: 1px solid var(--border-faint); }
.bio-item:last-child { border-bottom: 0; }
.item-name { font-size: 1.08em; font-weight: 700; }
.item-cat {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.3em;
  font-size: 0.85em; color: var(--muted); margin-inline-start: 0.5em; font-family: var(--font-ui);
}
.item-status {
  display: inline-block; margin-inline-start: 0.45em; padding: 0.05em 0.55em;
  border: 1px solid #d97979; border-radius: 999px; color: #a32323; background: #fff0f0;
  font-family: var(--font-ui); font-size: 0.72em; font-weight: 700;
}
.item-status-positive { color: #216e39; background: #eaf7ee; border-color: #70b984; }
.item-status-negative { color: #a32323; background: #fff0f0; border-color: #d97979; }
.item-special-categories { color: var(--muted); }
:root[data-theme="dark"] .item-status { color: #ffaaaa; background: #3b1717; border-color: #aa5050; }
:root[data-theme="dark"] .item-status-positive { color: #8be3a7; background: #153521; border-color: #3f8c5b; }
:root[data-theme="dark"] .item-status-negative { color: #ffaaaa; background: #3b1717; border-color: #aa5050; }
.item-date { font-size: 0.8em; color: var(--muted); margin-inline-start: 0.3em; font-family: var(--font-ui); white-space: nowrap; }
.item-dot {
  display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%;
  margin-inline-end: 0.45em; vertical-align: 0.08em;
}
.item-dot-positive { background: #2e8b57; }
.item-dot-negative { background: #c0392b; }
:root[data-theme="dark"] .item-dot-positive { background: #7fd6a4; }
:root[data-theme="dark"] .item-dot-negative { background: #ff8a99; }
.item-summary { margin: 0.2em 0 0; font-size: 0.93em; color: var(--text-soft); }
.cat-list li { padding: 0.5em 0; border-bottom: 1px solid var(--border-faint); }
.cat-list li:last-child { border-bottom: 0; }
.cat-list .count { color: var(--muted); font-size: 0.9em; }
.cat-list .muted { margin: 0.1em 0 0; font-size: 0.9em; }
.cat-description { font-size: 1.02em; }
.current-definition {
  margin: 1.1em 0 1.25em; padding: 0.85em 1em 0.95em;
  border: 1px solid var(--border); border-inline-start: 5px solid var(--link);
  border-radius: 8px; background: var(--box);
}
.current-definition h2 { margin: 0 0 0.3em; font-size: 1.08em; color: var(--text); }
.current-definition p { margin: 0; color: var(--text-soft); line-height: 1.9; }
.taxonomy-section { margin-top: 1.7em; }
.taxonomy-section > h2 { margin-bottom: 0.25em; }
.taxonomy-section-families { border-top: 1px solid var(--border-faint); padding-top: 0.4em; }
.taxonomy-subsection { margin-top: 1.15em; padding-inline-start: 0.85em; border-inline-start: 3px solid var(--border-light); }
.taxonomy-subsection > h3 { margin: 0 0 0.2em; font-size: 1.05em; color: var(--text); }
.taxonomy-subsection > .muted { margin: 0 0 0.25em; }
.letter { font-size: 1.3em; margin-top: 1em; }
.more { font-family: var(--font-ui); font-size: 0.9em; }

/* --------------------------------------------------------------------------
   الصفحة الرئيسية: عرض كامل بلا شريط جانبي، والسير هي الصدارة
   -------------------------------------------------------------------------- */

.page-home .sidebar { display: none; }
/* الرئيسية فيها حقل بحث كبير في الصدر، فلا داعي لبحث الترويسة فيها (سطح المكتب والهاتف) */
.page-home .header-tools > .search, .page-home .mobile-search-link { display: none; }
.page-home .page { display: block; }
.page-home .content { max-width: none; }

.home-welcome {
  --hw-accent: #1f3a5f; --hw-accent-soft: #dfe7f3;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 1.5rem 2.5rem;
  border: 1px solid var(--border-light); border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(31, 58, 95, 0.07), transparent 45%),
    radial-gradient(circle at 92% 100%, rgba(31, 58, 95, 0.08), transparent 40%),
    linear-gradient(180deg, var(--box) 0%, var(--surface) 100%);
  padding: 2rem 2.25rem;
  margin-bottom: 1.5rem;
}
:root[data-theme="dark"] .home-welcome {
  --hw-accent: #8fbde6; --hw-accent-soft: #1a2a45;
  background:
    radial-gradient(circle at 12% 0%, rgba(7, 152, 243, 0.08), transparent 45%),
    radial-gradient(circle at 92% 100%, rgba(7, 152, 243, 0.12), transparent 40%),
    var(--surface);
}
.hw-text { min-width: 0; text-align: start; }
.hw-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em; margin: 0 0 0.5rem;
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--hw-accent); background: var(--hw-accent-soft); padding: 0.25em 0.85em; border-radius: 999px;
}
.hw-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.home-title {
  border: 0; font-size: 1.35em; font-weight: 700; line-height: 1.45;
  margin: 0 0 0.35rem; padding: 0;
}
.home-intro { margin: 0 0 1.1em; max-width: 40em; color: var(--text-soft); font-size: 0.95em; line-height: 1.85; }

/* حقل بحث كبير في صدر الرئيسية */
.hw-search {
  display: flex; align-items: center; max-width: 36rem; margin: 0 0 1rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--input-bg);
  padding-inline-start: 0.9rem; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hw-search:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px rgba(11, 90, 160, 0.15); }
.hw-search-icon { flex: 0 0 auto; color: var(--muted); }
.hw-search input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-family: var(--font-ui); font-size: 1rem;
  padding: 0.7em 0.75em; border: 0; background: transparent; color: var(--text);
}
.hw-search input:focus { outline: 0; }
.hw-search input::placeholder { color: var(--muted); }
.hw-search button {
  flex: 0 0 auto; font: inherit; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  padding: 0.7em 1.4em; border: 0; cursor: pointer; align-self: stretch;
  background: var(--link); color: #fff; transition: filter 0.15s;
}
.hw-search button:hover { filter: brightness(1.1); }

.home-links { margin: 0; font-family: var(--font-ui); font-size: 0.9rem; display: flex; gap: 0.55rem; flex-wrap: wrap; }
.hw-btn, .hw-btn:visited {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.45em 1.1em;
  border: 1px solid var(--border-light); border-radius: 999px;
  background: var(--surface); color: var(--text-soft); font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s, background-color 0.15s;
}
.hw-btn .portal-icon { margin-inline-end: 0; color: currentColor; opacity: 0.8; }
.hw-btn:hover, .hw-btn:focus-visible {
  text-decoration: none; color: var(--link); border-color: var(--link); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.hw-btn-primary, .hw-btn-primary:visited { background: var(--hw-accent); border-color: var(--hw-accent); color: #fff; }
.hw-btn-primary:hover, .hw-btn-primary:focus-visible { color: #fff; border-color: var(--hw-accent); filter: brightness(1.12); }
:root[data-theme="dark"] .hw-btn-primary, :root[data-theme="dark"] .hw-btn-primary:visited { color: #041423; }

/* الجانب البصري: الشعار وتحته إحصاءات الموسوعة الحية */
.hw-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.hw-halo { display: none; }
.home-welcome-logo {
  position: relative; display: block; width: 170px; height: 170px; object-fit: contain;
  margin: 0 0 0.6rem;
}
.hw-stats {
  position: relative; list-style: none; margin: 0; padding: 0; width: min(100%, 24rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem;
  font-family: var(--font-ui);
}
.hw-stats li {
  display: flex; flex-direction: column; align-items: center; min-width: 0;
  padding: 0.45rem 0.55rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-light);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.hw-stats strong { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text); line-height: 1.3; white-space: nowrap; }
.hw-stats bdi { unicode-bidi: isolate; }
.hw-stats span { font-size: 0.72rem; color: var(--muted); }

/* صناديق الصفحة الرئيسية بأسلوب موسوعي:
   ترويسة ملونة هادئة وحد مطابق وخلفية مصبوغة صبغًا خفيفًا لكل قسم. */
.home-box {
  border: 1px solid var(--home-tint-border, var(--border-light));
  background: var(--home-box-bg, var(--surface));
}
.home-featured {
  --home-tint: #cedff2; --home-tint-border: #a3b0bf;
  --home-accent: #2a4b8d; --home-box-bg: #f5faff;
}
.home-latest {
  --home-tint: #ddcef2; --home-tint-border: #afa3bf;
  --home-accent: #5a3d8a; --home-box-bg: #faf5ff;
}
.home-catsec { margin-bottom: 1.6rem; }
.home-catsec-positive {
  --home-tint: #cef2e0; --home-tint-border: #a3bfb1;
  --home-accent: #1d6644; --home-box-bg: #f5fffa;
}
.home-catsec-negative {
  --home-tint: #f2ced4; --home-tint-border: #bfa3a9;
  --home-accent: #8a2a38; --home-box-bg: #fff5f7;
}
.home-cats-box {
  --home-tint: #f2e0ce; --home-tint-border: #bfb1a3;
  --home-accent: #8a5a2a; --home-box-bg: #fffaf5;
  margin-bottom: 1.6rem;
}
:root[data-theme="dark"] .home-featured {
  --home-tint: #0e2034; --home-tint-border: #2a425a;
  --home-accent: #0798f3; --home-box-bg: #041423;
}
:root[data-theme="dark"] .home-latest {
  --home-tint: #0e2034; --home-tint-border: #2a425a;
  --home-accent: #75a9c9; --home-box-bg: #041423;
}
:root[data-theme="dark"] .home-catsec-positive {
  --home-tint: #0e2034; --home-tint-border: #2a425a;
  --home-accent: #8fcda5; --home-box-bg: #041423;
}
:root[data-theme="dark"] .home-catsec-negative {
  --home-tint: #0e2034; --home-tint-border: #2a425a;
  --home-accent: #e69aaa; --home-box-bg: #041423;
}
:root[data-theme="dark"] .home-cats-box {
  --home-tint: #0e2034; --home-tint-border: #2a425a;
  --home-accent: #d8b77a; --home-box-bg: #041423;
}
.home-h2 {
  display: flex; align-items: center; gap: 0.5em;
  font-size: 1.15em; margin: 0; padding: 0.5em 0.9em; border: 0;
  background: var(--home-tint, var(--box-head));
  border-bottom: 1px solid var(--home-tint-border, var(--border-light));
}
.home-h2-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 1.05em; height: 1.05em;
  color: var(--home-accent, var(--link));
}
.home-h2-icon svg { width: 100%; height: 100%; }
.home-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.3rem 1rem; flex-wrap: wrap;
  background: var(--home-tint, var(--box-head));
  border-bottom: 1px solid var(--home-tint-border, var(--border-light));
  padding-inline-end: 0.9em;
}
.home-head .home-h2 { background: none; border: 0; flex: 1 1 auto; }
.home-catsec .home-body, .home-cats-box .home-body { padding: 1rem; }
.home-head-link {
  font-family: var(--font-ui); font-size: 0.82rem; white-space: nowrap;
  flex: 0 0 auto;
}

/* عمودان متجاوران للسيرة المختارة وأحدث السير على الشاشات الواسعة */
.home-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.6rem; }
.home-grid > .home-box { margin: 0; min-width: 0; }
@media (min-width: 1000px) {
  .home-grid { grid-template-columns: 2fr 1fr; align-items: stretch; }
  .home-grid .bio-list-compact { columns: 1; }
}
/* الترحيب في عمود واحد متوسط على الشاشات الضيقة: الشعار أولًا ثم النص */
@media (max-width: 860px) {
  .home-welcome { grid-template-columns: 1fr; gap: 0.5rem; text-align: center; }
  /* الشعار في الصدر، ثم النص والبحث والأزرار، والرقمان في الختام */
  .hw-visual { display: contents; }
  .hw-halo { display: none; }
  .home-welcome-logo { order: -1; margin: 0 auto 0.5rem; }
  .hw-stats { order: 10; margin-top: 0.9rem; }
  .hw-text { text-align: center; }
  .home-intro { margin-inline: auto; font-size: 0.9em; }
  .hw-search { margin-inline: auto; }
  .home-links { justify-content: center; }
}
/* على الشاشات الأعرض من الهاتف وأضيق من عمودي الرئيسية: أحدث السير في عمودين */
@media (min-width: 640px) and (max-width: 999px) {
  .latest-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .ll-item:nth-child(2) { border-top: 0; }
}
.home-body { padding: 0.6em 1rem 0.9em; }

/* صندوق «سير مختارة»: ثلاثة صفوف تتمدد فتملأ ارتفاع الصندوق كاملًا،
   فيتساوى ارتفاعه دائمًا مع صندوق «أحدث السير» المجاور بلا فراغ. */
.home-featured, .home-latest { display: flex; flex-direction: column; }
.home-featured .home-body {
  flex: 1; display: flex; flex-direction: column;
  padding: 0.2rem 1.25rem 0.5rem;
}
.home-latest .home-body { flex: 1; display: flex; flex-direction: column; padding: 0.4rem 0.6rem 0.6rem; }

/* قائمة «أحدث السير»: صورة مستديرة بحلقة بلون التصنيف + الاسم + سطر تعريف */
.latest-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.ll-item { border-top: 1px solid var(--border-faint); }
.ll-item:first-child { border-top: 0; }
.ll-link {
  position: relative; display: flex; align-items: center; gap: 0.8rem;
  padding: 0.45rem 2rem 0.45rem 0.55rem; padding-inline: 0.55rem 1.6rem; border-radius: 10px; color: var(--text);
  transition: background-color 0.15s;
}
.ll-link:hover, .ll-link:focus-visible { background: var(--home-tint); text-decoration: none; }
.ll-link:visited { color: var(--text); }
.ll-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: var(--box); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ll-ring);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.ll-link:hover .ll-avatar { transform: scale(1.06); }
.ll-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ll-noimg { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--home-accent); }
.ll-positive { --ll-ring: #2e8b57; }
.ll-negative { --ll-ring: #c0392b; }
:root[data-theme="dark"] .ll-positive { --ll-ring: #7fd6a4; }
:root[data-theme="dark"] .ll-negative { --ll-ring: #ff8a99; }
.ll-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.ll-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.92em; line-height: 1.3; color: var(--link); }
.ll-link:hover .ll-name { color: var(--home-accent); }
.ll-sub {
  font-family: var(--font-ui); font-size: 0.72em; color: var(--muted); margin-top: 0.12em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ll-arrow { position: absolute; inset-inline-end: 0.5rem; top: 50%; margin-top: -8px; color: var(--home-accent); opacity: 0; transform: translateX(6px); transition: opacity 0.15s, transform 0.15s; }
.ll-link:hover .ll-arrow, .ll-link:focus-visible .ll-arrow { opacity: 1; transform: none; }
.ll-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; align-self: stretch;
  margin: 0.5rem 0.55rem 0.15rem; padding: 0.5em 1em; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700;
  color: var(--home-accent); background: var(--home-tint); border: 1px solid var(--home-tint-border);
  transition: background-color 0.15s, color 0.15s;
}
.ll-more:hover, .ll-more:focus-visible { background: var(--home-accent); color: #fff; text-decoration: none; }
.ll-more:visited { color: var(--home-accent); }
.ll-more:hover:visited { color: #fff; }
.mf-item {
  flex: 1; display: flex; align-items: center; gap: 1.1rem;
  padding: 0.8em 0; border-top: 1px solid var(--border-faint);
  min-width: 0;
}
.mf-item:first-child { border-top: 0; }
.mf-thumb {
  flex: 0 0 auto; display: block; overflow: hidden;
  width: clamp(110px, 12vw, 165px); aspect-ratio: 1 / 1;
  border: 1px solid var(--border-light); border-radius: 10px;
  background: var(--box);
}
.mf-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mf-noimg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 2.6em; color: var(--muted);
}
.mf-noimg:hover, .mf-noimg:focus { text-decoration: none; }
.mf-text { flex: 1; min-width: 0; }
.mf-name { margin: 0; font-size: 1.15em; font-family: var(--font-heading); }
.mf-sub { margin: 0.1em 0 0; color: var(--muted); font-size: 0.82em; font-family: var(--font-ui); }
.mf-taxonomy { margin: 0.12em 0 0; color: var(--muted); font-size: 0.76em; font-family: var(--font-ui); }
.mf-status { color: #a32323; font-weight: 700; }
.mf-status-positive { color: #216e39; }
.mf-status-negative { color: #a32323; }
:root[data-theme="dark"] .mf-status { color: #ffaaaa; }
:root[data-theme="dark"] .mf-status-positive { color: #8be3a7; }
:root[data-theme="dark"] .mf-status-negative { color: #ffaaaa; }
.mf-sum {
  margin: 0.25em 0 0; font-size: 0.85em; color: var(--text-soft); line-height: 1.75;
}
.mf-more { margin: 0.3em 0 0; font-family: var(--font-ui); font-size: 0.78rem; }

/* ملاحظة صغيرة في ترويسة الصندوق (مثل «تتبدل السير المعروضة مع كل زيارة») */
.home-strip-note { color: var(--muted); font-size: 0.82rem; font-family: var(--font-ui); }

/* شبكة بطاقات السير */
.bc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.bc-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-light); border-radius: 10px;
  background: var(--surface); color: var(--text);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.bc-card:hover, .bc-card:focus {
  text-decoration: none; border-color: var(--border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.bc-card:visited { color: var(--text); }
.bc-imgwrap {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--box); border-bottom: 1px solid var(--border-faint);
}
.bc-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bc-noimg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 3.5em; color: var(--muted);
}
.bc-body { display: flex; flex-direction: column; flex: 1; gap: 0.3em; padding: 0.7em 0.9em 0.9em; }
.bc-taxonomy { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35em; }
.bc-cat {
  display: inline-flex; align-items: center; gap: 0.38em; align-self: flex-start;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500;
  border: 1px solid #c7cfd8; border-radius: 999px; padding: 0.05em 0.7em;
  color: #526171; background: #f4f6f8;
}
.bc-cat::before {
  content: ""; display: inline-block; width: 0.55em; height: 0.55em;
  flex: 0 0 auto; border-radius: 50%; background: currentColor;
}
.bc-cat-positive, .bc-cat-negative { color: #526171; background: #f4f6f8; border-color: #c7cfd8; }
:root[data-theme="dark"] .bc-cat,
:root[data-theme="dark"] .bc-cat-positive,
:root[data-theme="dark"] .bc-cat-negative { color: #c7d0d9; background: #17212c; border-color: #495666; }
.bc-status, .bc-current {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 0.05em 0.65em;
  font-family: var(--font-ui); font-size: 0.68rem; border: 1px solid var(--border-light);
}
.bc-status { color: #a32323; background: #fff0f0; border-color: #d97979; font-weight: 700; }
.bc-status-positive { color: #216e39; background: #eaf7ee; border-color: #70b984; }
.bc-status-negative { color: #a32323; background: #fff0f0; border-color: #d97979; }
.bc-current { color: var(--muted); background: var(--box); }
:root[data-theme="dark"] .bc-status { color: #ffaaaa; background: #3b1717; border-color: #aa5050; }
:root[data-theme="dark"] .bc-status-positive { color: #8be3a7; background: #153521; border-color: #3f8c5b; }
:root[data-theme="dark"] .bc-status-negative { color: #ffaaaa; background: #3b1717; border-color: #aa5050; }
.bc-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.08em; line-height: 1.5; }
.bc-sum {
  font-size: 0.8em; color: var(--text-soft); line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-more { margin-top: auto; padding-top: 0.45em; font-family: var(--font-ui); font-size: 0.8rem; color: var(--link); }

/* صف بطاقات التصنيفات */
.cat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.cat-card {
  display: block; border: 1px solid var(--border-light); border-radius: 10px;
  background: var(--surface); color: var(--text); padding: 0.7em 1em 0.8em;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.cat-card:hover, .cat-card:focus { text-decoration: none; border-color: var(--border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.cat-card:visited { color: var(--text); }
.cat-card-head { display: block; }
.cat-card-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.05em; color: var(--link); }
.cat-card .count { color: var(--muted); font-size: 0.85em; }
.cat-card-desc { display: block; color: var(--muted); font-size: 0.8em; line-height: 1.7; margin-top: 0.15em; font-family: var(--font-ui); }

/* قائمة أحدث السير المضغوطة: سطر لكل سيرة على عمودين */
.bio-list-compact { columns: 2; column-gap: 2.5rem; }
.bio-list-compact .bio-item { break-inside: avoid; padding: 0.45em 0; }

/* --------------------------------------------------------------------------
   التذييل
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 1.5rem;
  border-top: 3px solid var(--link);
  background: var(--box);
  font-family: var(--font-ui);
  color: var(--muted);
}
:root[data-theme="dark"] .site-footer { background: var(--hd-bg); border-top-color: var(--link); }

/* الشبكة: علامة الموقع ثم عمودان ثابتان؛ لا نسرد كل قسم وفئة في التذييل. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  padding: 2.5rem 0 2rem;
}

.footer-brand { max-width: 34rem; }
.footer-logo { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text); }
.footer-logo:hover, .footer-logo:focus { text-decoration: none; }
.footer-logo:visited { color: var(--text); }
.footer-logo img { width: 44px; height: 44px; flex: 0 0 auto; }
.footer-logo-text { display: flex; flex-direction: column; line-height: 1.3; }
.footer-logo-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; }
.footer-logo-tagline { font-size: 0.78rem; color: var(--muted); }
.footer-about { margin: 0.9rem 0 0; font-size: 0.92rem; line-height: 1.85; color: var(--text-soft); }
:root[data-theme="dark"] .footer-about { color: var(--muted); }

.footer-follow { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.1rem; }
.footer-follow-label { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.footer-social { display: flex; gap: 8px; }
.footer-social-link, .footer-social-link:visited {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--border-light); border-radius: 50%;
  color: var(--muted); background: var(--surface);
  transition: color 0.15s, border-color 0.15s, background-color 0.15s, transform 0.15s;
}
.footer-social-link:hover, .footer-social-link:focus-visible {
  color: #fff; background: var(--link); border-color: var(--link); text-decoration: none; transform: translateY(-2px);
}
.footer-social-link svg { width: 17px; height: 17px; }

.footer-col h3 {
  margin: 0 0 0.85rem; padding-bottom: 0.5rem; position: relative;
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border-light);
}
.footer-col h3::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -1px;
  width: 2.25rem; height: 2px; background: var(--link);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { padding: 0.2rem 0; }
.footer-col a, .footer-col a:visited {
  display: inline-block; font-size: 0.92rem; color: var(--text-soft); text-decoration: none;
  transition: color 0.15s, transform 0.15s;
}
:root[data-theme="dark"] .footer-col a, :root[data-theme="dark"] .footer-col a:visited { color: var(--muted); }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--link); text-decoration: none; transform: translateX(-3px); }

/* الشريط السفلي: الحقوق في البداية، والعودة إلى الأعلى في النهاية */
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding: 1rem 0 1.25rem; border-top: 1px solid var(--border-light);
  font-size: 0.8rem;
}
:root[data-theme="dark"] .footer-bottom { border-top-color: var(--border); }
.footer-note { margin: 0; }
.footer-top, .footer-top:visited {
  display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted);
  padding: 0.3rem 0.7rem; border: 1px solid var(--border-light); border-radius: 999px; background: var(--surface);
  transition: color 0.15s, border-color 0.15s;
}
.footer-top:hover, .footer-top:focus-visible { color: var(--link); border-color: var(--link); text-decoration: none; }

/* --------------------------------------------------------------------------
   الهاتف
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  body { font-size: clamp(1.125rem, 2.2vw, 1.25rem); line-height: 1.8; }
  .wrap { padding-inline: clamp(0.75rem, 4vw, 1rem); }

  /* ترويسة من سطر واحد: العلامة أولًا، والأدوات الثانوية عند الطلب */
  .site-header { position: relative; }
  .header-inner {
    position: relative; flex-direction: row; flex-wrap: nowrap; align-items: center;
    gap: 0.5rem; min-height: 58px; padding-top: 0.45rem; padding-bottom: 0.45rem;
  }
  .logo { flex: 1 1 auto; min-width: 0; overflow: hidden; gap: 0.45rem; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-text { min-width: 0; }
  .logo-name, .logo-tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo-name { font-size: 1rem; line-height: 1.25; }
  .logo-tagline { font-size: 0.7rem; line-height: 1.35; }
  .header-tools { flex: 0 0 auto; gap: 0.25rem; }
  .header-tools > .search, .theme-toggle-desktop, .site-nav { display: none; }

  .mobile-search-link, .mobile-menu > summary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--border-light); border-radius: 9px;
    background: var(--box); color: var(--text); cursor: pointer;
  }
  .mobile-search-link:visited { color: var(--text); }
  .mobile-search-link:hover, .mobile-search-link:focus { text-decoration: none; border-color: var(--border); }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu > summary { list-style: none; }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu .icon-close { display: none; }
  .mobile-menu[open] .icon-menu { display: none; }
  .mobile-menu[open] .icon-close { display: block; }
  .mobile-menu[open] > summary { border-color: var(--link); color: var(--link); }

  .mobile-menu-panel {
    position: absolute; z-index: 50; inset-inline-end: 0; top: calc(100% + 0.55rem);
    width: min(19rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 5rem); overflow-y: auto;
    padding: 0.65rem; border: 1px solid var(--border-light); border-radius: 10px;
    background: var(--surface); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    font-family: var(--font-ui); font-size: 1rem; line-height: 1.5;
  }
  .mobile-menu-section + .mobile-menu-section { margin-top: 0.65rem; }
  .mobile-menu-heading {
    display: block; padding: 0.15rem 0.55rem 0.4rem; color: var(--muted);
    font-size: 0.78rem; font-weight: 700;
  }
  .mobile-menu-panel ul { list-style: none; margin: 0; padding: 0; }
  .mobile-menu-panel a {
    display: flex; align-items: center; min-height: 44px; padding: 0.4rem 0.55rem;
    border-radius: 7px; color: var(--text);
  }
  .mobile-menu-panel a:visited { color: var(--text); }
  .mobile-menu-panel a:hover, .mobile-menu-panel a:focus { background: var(--box); text-decoration: none; }
  .mobile-category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem; }
  .mobile-category-list .count { margin-inline-start: 0.25rem; color: var(--muted); font-size: 0.82em; }
  .mobile-theme-toggle {
    display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 44px;
    margin-top: 0.65rem; padding: 0.45rem 0.55rem; border: 0; border-top: 1px solid var(--border-faint);
    border-radius: 7px; background: transparent; color: var(--text); font: inherit; cursor: pointer;
  }
  .mobile-theme-toggle:hover, .mobile-theme-toggle:focus { background: var(--box); }

  /* المحتوى هو الأول على الهاتف؛ التنقل الكامل متاح من زر القائمة */
  .page { display: block; padding-top: 0.7rem; padding-bottom: 1.5rem; }
  .sidebar { display: none; }
  .content { max-width: none; }

  /* تكبير متن السيرة على الهاتف بمقدار الربع، مع إبقاء تباعد السطور الحالي كما هو. */
  .bio > .page-body > p,
  .bio > .page-body > ul,
  .bio > .page-body > ol,
  .bio > .page-body > blockquote,
  .bio > .page-body > .bio-pullquote { font-size: 1.25em; }

  .bio.bio-showcase > .page-body > .bio-pullquote {
    margin-inline: 0;
    padding-block: 0.85rem;
    padding-inline: 0.62rem 0.8rem;
  }
  .bio-showcase .bio-section-heading { gap: 0.14em; }

  h1 { font-size: 1.55em; line-height: 1.4; }
  h2 { font-size: 1.3em; line-height: 1.5; }
  .bio > .page-body > h2 { font-size: 1.16em; }
  .bio > .page-body > h3 { font-size: 1.05em; }
  .category-heading { font-size: 1.4em; }
  .bio > .page-title {
    font-size: clamp(1.25rem, 5vw, 1.55rem); line-height: 1.35;
    margin-bottom: 0.2rem; padding-bottom: 0.25rem; text-wrap: balance;
  }
  .bio > .page-sub { display: none; }
  .bio > .shortdesc { margin: 0 0 0.75rem; font-size: 1.05em; line-height: 1.65; }
  .infobox {
    float: none; clear: both; width: 100%; margin: 0.3rem 0 1rem;
    border-spacing: 0; border-radius: 8px; overflow: hidden;
    table-layout: fixed;
  }
  .search-page { width: 100%; }
  .search-page input { width: 100%; min-width: 0; flex: 1; }
  .search-page input, .search-page button { min-height: 44px; font-size: 1rem; }
  .home-featured .home-body { padding: 0.15rem 0.85rem 0.45rem; }
  .featured-image {
    float: none; display: block;
    width: min(100%, 400px); max-width: 100%; height: auto;
    margin: 0 auto 0.9rem;
  }
  .toc { display: block; }
  .bio-list-compact { columns: 1; }
  .bc-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; padding: 2rem 0 1.5rem; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
  .footer-col a { font-size: 1rem; }
  .footer-col li { padding: 0.28rem 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .home-welcome { padding: 1.25rem 0.9rem 1.2rem; border-radius: 10px; }
  .home-welcome-logo { width: 120px; height: 120px; }
  .hw-stats { width: 100%; gap: 0.4rem; }
  .hw-stats li { padding-inline: 0.35rem; }
  .hw-stats strong { font-size: 0.94rem; }
  .hw-stats span { font-size: 0.66rem; }
  .hw-halo { width: 180px; height: 180px; }
  .home-title { font-size: 1.15em; }
  .hw-search input { font-size: 0.95rem; padding-inline: 0.5em; }
  .hw-search button { padding-inline: 1em; }
  .bc-grid { grid-template-columns: 1fr; }
  .bc-imgwrap { aspect-ratio: 16 / 10; }
  .home-featured .home-body { padding: 0.1rem 0.75rem 0.4rem; }
  .mf-item { gap: 0.8rem; align-items: flex-start; }
  .mf-thumb { width: 96px; border-radius: 8px; }
  .mf-sum { -webkit-line-clamp: 2; }
  .featured-image { width: 100%; max-width: 100%; }
}

@media (max-width: 380px) {
  .logo-mark { width: 36px; height: 36px; }
  .logo-name { font-size: 0.95rem; }
  .logo-tagline { display: none; }
  .bio > .page-title { font-size: 1.25rem; }
  .mobile-category-list { grid-template-columns: 1fr; }
  .bio-social-link, .bio-social-link:visited { width: 42px; height: 42px; }
  .bio-end-actions .contact-card-actions { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .bio-end-actions { grid-template-columns: minmax(0, 1fr); }
  .bio-end-actions > .contact-card,
  .bio-end-actions > .bio-share { height: auto; }
}

@media (max-width: 560px) {
  .bio-end-actions { gap: 0.7rem; margin-block: 1.25em 0.9em; }
  .bio-end-actions > .contact-card,
  .bio-end-actions > .bio-share { padding: 0.82rem; border-radius: 12px; }
  .bio-share { grid-template-columns: minmax(0, 1fr); padding: 0.9rem; }
  .bio-share-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .bio-share-action { width: 100%; }
  .bio-share-networks { grid-column: 1 / -1; justify-content: center; margin-top: 0.12rem; }
  .contact-card-body { align-items: stretch; flex-direction: column; }
  .contact-card-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .contact-card-action { width: 100%; }
}


/* --------------------------------------------------------------------------
   الترويسة: شريط كحلي بلمسات ذهبية (الهوية البصرية للموقع في الوضعين)
   -------------------------------------------------------------------------- */

.site-header {
  --hd-bg: #000711; /* لون خلفية الوضع الداكن نفسه (--bg) في الوضعين، بلا تدرج ولا زخرفة؛ لا يكون أفتح من الصفحة (قرار المستخدم، 14 سبتمبر 2026) */
  --hd-text: #f5f7fb; --hd-muted: rgba(245, 247, 251, 0.74);
  --hd-line: rgba(255, 255, 255, 0.16); --hd-fill: rgba(255, 255, 255, 0.08);
  --hd-gold: #d4a84b; --hd-gold-light: #f1d48a;
  position: relative; z-index: 30; isolation: isolate; border-bottom: 0; /* z-index حتى تعلو قائمة الهاتف أي طبقة لاحقة مثل قسم الترحيب */
  color: var(--hd-text);
  background: var(--hd-bg);
  box-shadow: 0 6px 22px rgba(6, 16, 32, 0.28);
}
/* خط ذهبي رفيع أسفل الترويسة */
.site-header::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--hd-gold) 18%, var(--hd-gold-light) 50%, var(--hd-gold) 82%, transparent 100%);
}
.header-inner { padding-top: 0.7rem; padding-bottom: 0.75rem; }

.site-header .logo, .site-header .logo:visited { color: var(--hd-text); }
.site-header .logo-mark { width: 52px; height: 52px; }
.site-header .logo-name { color: var(--hd-text); font-size: 1.45rem; letter-spacing: 0.005em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.site-header .logo-tagline { color: var(--hd-gold-light); font-size: 0.8rem; }

.site-nav a, .site-nav a:visited { color: var(--hd-muted); }
.site-nav a:hover, .site-nav a:focus-visible,
:root[data-theme="dark"] .site-nav a:hover, :root[data-theme="dark"] .site-nav a:focus-visible { color: #fff; background: var(--hd-fill); }
.site-nav a::after { background: var(--hd-gold); }
.page-home .site-nav .nav-home, .page-list .site-nav .nav-list,
.page-categories .site-nav .nav-cats, .page-category .site-nav .nav-cats,
.page-currents .site-nav .nav-currents, .page-current .site-nav .nav-currents { color: #fff; }

.site-header .search { border: 1px solid var(--hd-line); border-radius: 999px; background: var(--hd-fill); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.site-header .search:focus-within { border-color: var(--hd-gold); box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.25); }
.site-header .search input { border: 0; border-radius: 0; background: transparent; color: var(--hd-text); padding-inline-start: 1em; }
.site-header .search input:focus { border-color: transparent; box-shadow: none; }
.site-header .search input::placeholder { color: var(--hd-muted); }
.site-header .search button { border: 0; border-radius: 0; background: var(--hd-gold); color: #142640; font-weight: 700; padding-inline: 1.1em; transition: background-color 0.15s; }
.site-header .search button:hover { background: var(--hd-gold-light); }

.site-header .theme-toggle { border-color: var(--hd-line); background: var(--hd-fill); color: var(--hd-text); }
.site-header .theme-toggle:hover { border-color: var(--hd-gold); color: var(--hd-gold-light); }

/* أزرار الهاتف على الشريط الكحلي */
.site-header .mobile-search-link, .site-header .mobile-search-link:visited, .site-header .mobile-menu > summary {
  border-color: var(--hd-line); background: var(--hd-fill); color: var(--hd-text);
}
.site-header .mobile-search-link:hover, .site-header .mobile-search-link:focus { border-color: var(--hd-gold); }
.site-header .mobile-menu[open] > summary { border-color: var(--hd-gold); color: var(--hd-gold-light); }
.site-header .skip { color: var(--text); }
@media (max-width: 900px) {
  .site-header .logo-mark { width: 42px; height: 42px; }
  .site-header .logo-name { font-size: 1.05rem; }
  .site-header .logo-tagline { font-size: 0.7rem; }
}


/* --------------------------------------------------------------------------
   التذييل: الشريط الكحلي الذهبي نفسه في الترويسة
   -------------------------------------------------------------------------- */

.site-footer {
  --hd-bg: #000711;
  --hd-text: #f5f7fb; --hd-muted: rgba(245, 247, 251, 0.7);
  --hd-line: rgba(255, 255, 255, 0.14); --hd-fill: rgba(255, 255, 255, 0.07);
  --hd-gold: #d4a84b; --hd-gold-light: #f1d48a;
  position: relative; isolation: isolate; border-top: 0; color: var(--hd-muted);
  background: var(--hd-bg);
}
/* الخط الذهبي في أعلى التذييل يقابل خط الترويسة السفلي */
.site-footer::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--hd-gold) 18%, var(--hd-gold-light) 50%, var(--hd-gold) 82%, transparent 100%);
}

.footer-logo, .footer-logo:visited { color: var(--hd-text); }
.footer-logo-name { color: var(--hd-text); }
.footer-logo-tagline { color: var(--hd-gold-light); }
.footer-about, :root[data-theme="dark"] .footer-about { color: var(--hd-muted); }
.footer-follow-label { color: var(--hd-text); }
.footer-social-link, .footer-social-link:visited { border-color: var(--hd-line); background: var(--hd-fill); color: var(--hd-text); }
.footer-social-link:hover, .footer-social-link:focus-visible { color: #142640; background: var(--hd-gold); border-color: var(--hd-gold); }

.footer-col h3 { color: var(--hd-text); border-bottom-color: var(--hd-line); }
.footer-col h3::after { background: var(--hd-gold); }
.footer-col a, .footer-col a:visited,
:root[data-theme="dark"] .footer-col a, :root[data-theme="dark"] .footer-col a:visited { color: var(--hd-muted); }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--hd-gold-light); }

.footer-bottom, :root[data-theme="dark"] .footer-bottom { border-top-color: var(--hd-line); color: var(--hd-muted); }
.footer-top, .footer-top:visited { color: var(--hd-text); border-color: var(--hd-line); background: var(--hd-fill); }
.footer-top:hover, .footer-top:focus-visible { color: var(--hd-gold-light); border-color: var(--hd-gold); }

/* --------------------------------------------------------------------------
   الطباعة
   -------------------------------------------------------------------------- */

@media print {
  :root,
  :root[data-theme="dark"] {
    --bg: #ffffff; --text: #212327; --text-soft: #333333; --muted: #565b62;
    --link: #0b5aa0; --link-visited: #551a8b; --link-external: #2f7cb3;
    --border: #a7adb5; --border-light: #cdd1d6; --border-faint: #eceef2;
    --box: #f7f8fa; --box-head: #edeff3; --surface: #ffffff; --input-bg: #ffffff;
  }
  .site-header, .sidebar, .site-footer, .search, .related, .bio-end-actions, .bio-share, .bio-support, .contact-card, .skip, .theme-toggle,
  .mobile-search-link, .mobile-menu { display: none !important; }
  .page { display: block; }
  body { font-size: 12pt; line-height: 1.6; }
  a { color: inherit; }
  .infobox { float: none; width: auto; }
  .infobox-list-disclosure > summary,
  .infobox-list-more > summary { display: none !important; }
  .infobox-list-disclosure > .infobox-disclosure-list,
  .infobox-list-more > .infobox-list-remainder { display: block !important; }
  .bio.bio-showcase > .page-body > .bio-pullquote { --bio-quote-bg: #ffffff; box-shadow: none; }
  :root[data-theme="dark"] .bio.bio-showcase > .page-body > .bio-pullquote.bio-pullquote-verdict {
    --bio-quote-border: #d6a8b2;
    --bio-quote-accent: #7b2038;
  }
  :root[data-theme="dark"] .bio.bio-showcase > .page-body > .bio-pullquote.bio-pullquote-prayer {
    --bio-quote-border: #acd1b7;
    --bio-quote-accent: #2f7a4b;
  }
  .bio.bio-justify > .page-body > p,
  .bio.bio-justify > .page-body > .bio-pullquote > p,
  .bio.bio-justify > .page-body > .sources > p {
    text-align: justify;
    text-align-last: start;
    text-justify: auto;
  }
  :root[data-theme="dark"] html,
  :root[data-theme="dark"] body {
    background: #ffffff !important;
    background-image: none !important;
  }
  :root[data-theme="dark"] .page {
    background: #ffffff !important;
    box-shadow: none !important;
  }
}

/* آيات قرآنية إن وُجدت في النص داخل <span class="ayah"> */
.ayah::before { content: "﴿"; }
.ayah::after { content: "﴾"; }


/* --------------------------------------------------------------------------
   صفحة «ادعم الموقع»: صندوق الدعم بالهوية الكحلية الذهبية نفسها في الترويسة
   -------------------------------------------------------------------------- */

.site-nav .nav-support, .site-nav .nav-support:visited {
  display: inline-flex; align-items: center; gap: 0.35em;
  color: var(--hd-gold-light, #f1d48a); font-weight: 700;
}
.site-nav .nav-support svg { flex: 0 0 auto; }
.site-nav .nav-support:hover, .site-nav .nav-support:focus-visible,
:root[data-theme="dark"] .site-nav .nav-support:hover, :root[data-theme="dark"] .site-nav .nav-support:focus-visible {
  color: #142640; background: var(--hd-gold, #d4a84b);
}
.page-support .site-nav .nav-support { color: #fff; }
.page-support .site-nav .nav-support::after { transform: scaleX(1); }
.page-support .site-nav .nav-support:hover, .page-support .site-nav .nav-support:focus-visible { color: #142640; }

.page-support .content { max-width: 900px; }
.page-support .page-body > h2 { font-size: 1.3em; }
.page-support .page-body > p { font-weight: 300; }

.support-box {
  --sp-bg: #142640; --sp-bg2: #0e1b2e;
  --sp-text: #f5f7fb; --sp-muted: rgba(245, 247, 251, 0.74);
  --sp-line: rgba(255, 255, 255, 0.16); --sp-fill: rgba(255, 255, 255, 0.08);
  --sp-gold: #d4a84b; --sp-gold-light: #f1d48a;
  position: relative; isolation: isolate; overflow: hidden;
  margin: 1.4em 0 1.8em;
  padding: 1.5rem 1.5rem 1.3rem;
  border-radius: 16px;
  color: var(--sp-text);
  background:
    radial-gradient(ellipse at 10% 120%, rgba(11, 90, 160, 0.35), transparent 50%),
    radial-gradient(ellipse at 95% -10%, rgba(212, 168, 75, 0.22), transparent 45%),
    linear-gradient(180deg, var(--sp-bg) 0%, var(--sp-bg2) 100%);
  box-shadow: 0 10px 30px rgba(6, 16, 32, 0.28);
  font-family: var(--font-ui);
}
:root[data-theme="dark"] .support-box { --sp-bg: #0e2034; --sp-bg2: #08141f; border: 1px solid var(--border); }
.support-box::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--sp-gold) 18%, var(--sp-gold-light) 50%, var(--sp-gold) 82%, transparent 100%);
}
.support-box-head { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1rem; }
.support-box-symbol {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(212, 168, 75, 0.55); background: rgba(212, 168, 75, 0.14); color: var(--sp-gold-light);
}
.support-box-title {
  margin: 0; padding: 0; border: 0; color: var(--sp-text);
  font: 700 1.25rem/1.4 var(--font-heading);
}
.support-box-sub { margin: 0.2rem 0 0; color: var(--sp-muted); font-size: 0.92rem; line-height: 1.6; }

.support-amounts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.55rem; }
.support-amount {
  min-height: 50px; padding: 0.5rem 0.4rem;
  border: 1px solid var(--sp-line); border-radius: 10px;
  background: var(--sp-fill); color: var(--sp-text);
  font: 700 1.1rem/1 var(--font-ui); direction: ltr; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.support-amount:hover, .support-amount:focus-visible { border-color: var(--sp-gold); background: rgba(212, 168, 75, 0.16); transform: translateY(-1px); }
.support-amount.is-active { border-color: var(--sp-gold); background: var(--sp-gold); color: #142640; }
.support-amount:focus-visible { outline: 3px solid var(--sp-gold-light); outline-offset: 2px; }

.support-custom { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.support-custom-label { color: var(--sp-muted); font-size: 0.95rem; }
.support-custom-field {
  display: flex; align-items: center; flex: 1 1 200px; max-width: 280px;
  border: 1px solid var(--sp-line); border-radius: 10px; background: rgba(0, 0, 0, 0.22); overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.support-custom-field:focus-within { border-color: var(--sp-gold); box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.25); }
.support-currency { padding: 0 0.7rem; color: var(--sp-gold-light); font-weight: 700; font-size: 1.1rem; }
.support-custom-input {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0.4rem 0.6rem 0.4rem 0;
  border: 0; background: transparent; color: var(--sp-text);
  font: 700 1.1rem/1 var(--font-ui); text-align: left;
}
.support-custom-input:focus { outline: none; box-shadow: none; }
.support-custom-input::placeholder { color: var(--sp-muted); font-weight: 400; font-size: 0.95rem; }
.support-custom-input::-webkit-outer-spin-button, .support-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.support-custom-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.support-submit {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; min-height: 56px; margin-top: 1.1rem; padding: 0.7rem 1.2rem;
  border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--sp-gold-light) 0%, var(--sp-gold) 100%); color: #142640;
  font: 700 1.15rem/1.2 var(--font-ui);
  box-shadow: 0 6px 18px rgba(212, 168, 75, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.support-submit:hover, .support-submit:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(212, 168, 75, 0.45); filter: brightness(1.04); }
.support-submit:active { transform: translateY(0); }
.support-submit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.support-submit strong { direction: ltr; unicode-bidi: isolate; font-weight: 900; }
.support-error { margin: 0.6rem 0 0; color: #ffb4a8; font-size: 0.92rem; }
.support-methods {
  display: flex; align-items: flex-start; gap: 0.45rem;
  margin: 0.8rem 0 0; color: var(--sp-muted); font-size: 0.86rem; line-height: 1.6;
}
.support-methods svg { flex: 0 0 auto; margin-top: 0.3em; color: var(--sp-gold-light); }

/* بطاقة البريد داخل صندوق الدعم: تُعرض على الطبقة الكحلية */
.support-box .contact-card {
  margin: 1.1rem 0 0; padding: 0.9rem 1rem;
  border: 1px solid var(--sp-line); border-inline-start: 4px solid var(--sp-gold);
  background: rgba(255, 255, 255, 0.06); color: var(--sp-text);
}
.support-box .contact-card-symbol { border-color: rgba(212, 168, 75, 0.55); background: rgba(212, 168, 75, 0.14); color: var(--sp-gold-light); }
.support-box .contact-card-title { color: var(--sp-text); font-size: 1.02rem; }
.support-box .contact-card-text { color: var(--sp-muted); }
.support-box .contact-card-body { border-top-color: var(--sp-line); }
.support-box .contact-card-copy { border-color: var(--sp-line); background: var(--sp-fill); color: var(--sp-text); }
.support-box .contact-card-copy:hover, .support-box .contact-card-copy:focus { border-color: var(--sp-gold); background: rgba(212, 168, 75, 0.16); }
.support-box .contact-card-send, .support-box .contact-card-send:visited { border-color: var(--sp-gold); background: var(--sp-gold); color: #142640; }
.support-box .contact-card-send:hover, .support-box .contact-card-send:focus { border-color: var(--sp-gold-light); background: var(--sp-gold-light); color: #142640; }

.support-cta { text-align: center; margin: 1.6em 0 1.2em; }
.support-cta-button, .support-cta-button:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 54px; padding: 0.7rem 2rem; border-radius: 999px;
  background: #142640; color: #f1d48a; font: 700 1.1rem/1.2 var(--font-ui);
  box-shadow: 0 6px 18px rgba(20, 38, 64, 0.3);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.support-cta-button:hover, .support-cta-button:focus-visible { background: #d4a84b; color: #142640; text-decoration: none; transform: translateY(-1px); }
:root[data-theme="dark"] .support-cta-button, :root[data-theme="dark"] .support-cta-button:visited { background: #d4a84b; color: #142640; }
:root[data-theme="dark"] .support-cta-button:hover, :root[data-theme="dark"] .support-cta-button:focus-visible { background: #f1d48a; }

@media (max-width: 720px) {
  .support-box { padding: 1.1rem 1rem 1rem; border-radius: 12px; }
  .support-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .support-custom-field { max-width: none; }
  .support-box .contact-card-body { flex-direction: column; align-items: stretch; }
  .support-box .contact-card-actions { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   شريط «ادعم الموقع» أسفل كل سيرة: كحلي ذهبي على هوية الترويسة، قصير ومتناسق مع بطاقات الختام
   -------------------------------------------------------------------------- */

.bio-support {
  --sp-gold: #d4a84b; --sp-gold-light: #f1d48a;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 0.9rem;
  margin: 0 0 1.25em; padding: 0.95rem 1.1rem;
  border-radius: 14px; color: #f5f7fb; font-family: var(--font-ui);
  background:
    radial-gradient(ellipse at 95% -20%, rgba(212, 168, 75, 0.24), transparent 45%),
    radial-gradient(ellipse at 5% 120%, rgba(11, 90, 160, 0.35), transparent 50%),
    linear-gradient(180deg, #142640 0%, #0e1b2e 100%);
  box-shadow: 0 6px 18px rgba(6, 16, 32, 0.22);
}
:root[data-theme="dark"] .bio-support {
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 95% -20%, rgba(212, 168, 75, 0.2), transparent 45%),
    radial-gradient(ellipse at 5% 120%, rgba(7, 152, 243, 0.22), transparent 50%),
    linear-gradient(180deg, #0e2034 0%, #08141f 100%);
}
.bio-support::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--sp-gold) 18%, var(--sp-gold-light) 50%, var(--sp-gold) 82%, transparent 100%);
}
.bio-support-symbol {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(212, 168, 75, 0.5); background: rgba(212, 168, 75, 0.14); color: var(--sp-gold-light);
}
.bio-support-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.bio-support-title { font-size: 1rem; line-height: 1.4; color: #f5f7fb; }
.bio-support-sub { font-size: 0.86rem; line-height: 1.5; color: rgba(245, 247, 251, 0.74); }
.bio-support-button, .bio-support-button:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: 0 0 auto;
  min-height: 44px; padding: 0.55rem 1.2rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--sp-gold-light) 0%, var(--sp-gold) 100%); color: #142640;
  font: 700 0.98rem/1.2 var(--font-ui); white-space: nowrap;
  box-shadow: 0 4px 14px rgba(212, 168, 75, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.bio-support-button:hover, .bio-support-button:focus-visible {
  color: #142640; text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(212, 168, 75, 0.45); filter: brightness(1.04);
}
.bio-support-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .bio-support { flex-wrap: wrap; padding: 0.85rem 0.9rem; border-radius: 12px; }
  .bio-support-text { flex-basis: calc(100% - 44px - 0.9rem); }
  .bio-support-button { width: 100%; }
}