/* مِراس — ورقة أنماط واحدة. الهوية تركوازية كهوية مجتمع البيانات العربي. */

/* ألوان هوية مجتمع البيانات العربي — مأخوذة من لوح الهوية المعتمد
   (`identty ADH/logo/Color Palette`) لا مقاربة بالنظر: #173F4A و#3E9090.
   والدرجة الوسطى مزيج بينهما، والتباين مقيس لا مقدر: 6.80 على الأبيض. */
:root {
  --teal-900: #173f4a;
  --teal-700: #29636a;
  --teal-500: #3e9090;
  --teal-100: #ecf4f4;

  /* ── درجات مشتقة من اللونين، لا مخترعة ───────────────────────────────────
     كانت اللوحة أربع درجات، فكل ظل بينها يكتب `rgba()` في موضعه بأرقام لا
     يجمعها أصل. وهذه مزيج خطي بين #173F4A و#3E9090 ثم نحو الأبيض،
     والتباين **مقيس** بحاسبة WCAG 2.1 لا مقدر بالنظر:

       teal-800 #21535c  على الأبيض  8.55  ← يحمل نصا عاديا
       teal-600 #33797c  على الأبيض  5.04  ← يحمل نصا عاديا
       teal-500 #3e9090  على الأبيض  3.75  ← ⚠️ **لا يحمل نصا عاديا أبدا**؛
                                              حدود وأرضيات وعلامات فقط
       teal-400 #74afaf  نص teal-900 عليه  4.60
       teal-300 #9bc5c5  نص teal-900 عليه  6.06
       teal-200 #c5dede  نص teal-900 عليه  8.06
       teal-50  #f6fafa  نص teal-900 عليه 10.82                             */
  --teal-800: #21535c;
  --teal-600: #33797c;
  --teal-400: #74afaf;
  --teal-300: #9bc5c5;
  --teal-200: #c5dede;
  --teal-50:  #f6fafa;

  --ink:      #16211f;
  --muted:    #5d6b69;
  --line:     #dfe6e4;
  --bg:       #f7faf9;
  --card:     #ffffff;
  --warn-bg:  #fff6e5;
  --warn-fg:  #8a5a00;
  --err-bg:   #fdeceb;
  --err-fg:   #a32219;
  --ok-bg:    #e8f6ee;
  --ok-fg:    #1c6b3f;

  /* ── لون ثان: كهرماني ──────────────────────────────────────────────────
     قرار المالك 2026-09-24: «ليس بالضرورة المنصة أن تكون لونا واحدا».
     والتركوازي وحده كان يجعل كل شيء متساوي الصوت — فلا يعرف الداخل أين
     ينظر أولا. والكهرماني هنا **لهجة لا هوية**: يحمل الفعل الرئيس والشارة
     والعلامة، ولا يحمل شيئا آخر. ومقداره في الشاشة أقل من عشرها.

     والتباين مقيس لا مقدر:
       gold-700 #8a5a00  على الأبيض       5.95  ← يحمل نصا عاديا
       gold-600 #b7791f  على الأبيض       3.53  ← علامات وحدود فقط
       gold-500 #e2a33c  نص #3a2600 عليه  7.45  ← أرضية زر رئيس
       gold-100 #fdf1dd  نص gold-700 عليه 5.34                              */
  --gold-700: #8a5a00;
  --gold-600: #b7791f;
  --gold-500: #e2a33c;
  --gold-300: #f4cd8e;
  --gold-100: #fdf1dd;
  --gold-50:  #fffaf2;
  --on-gold:  #3a2600;

  /* سطح دافئ محايد — الشريط البديل بين قسمين تركوازيين، فلا تقرأ الصفحة
     لونا واحدا ممتدا. */
  --sand:     #faf7f2;

  --radius:   10px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* منحنيات فيزيائية لا خطية: الخروج السريع ثم الاستقرار البطيء هو ما
     يجعل الحركة تبدو مادية لا آلية. */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.22, 1.16, .36, 1);
  --shadow-1: 0 1px 2px rgba(23, 63, 74, .05);
  --shadow-2: 0 10px 30px -14px rgba(23, 63, 74, .22);
  --shadow-3: 0 28px 64px -28px rgba(23, 63, 74, .34);

  /* ── مقياس نصي واحد ────────────────────────────────────────────────────
     كانت المقاسات تكتب رقما رقما في القوالب (`font-size:19px` ثماني مرات
     بين الشاشات)، فانجرفت: مقاسان متجاوران لمعنى واحد. والمقياس هنا يقرأ
     من موضع واحد، وما زاد عليه في قالب فهو انحراف يرى. */
  --fs-xs:   12.5px;   /* شارات وتفاصيل دقيقة */
  --fs-sm:   13.5px;   /* تلميحات */
  --fs-md:   15px;     /* خلايا الجداول والنص الثانوي */
  --fs-base: 16px;     /* المتن */
  --fs-lg:   19px;     /* إحصاء نصي، عناوين فرعية */
  --fs-xl:   21px;     /* h2 */
  --fs-2xl:  28px;     /* h1 */

  /* ── سلم تباعد ────────────────────────────────────────────────────────
     مضاعفات أربعة. والمسافات المنتظمة هي ما يجعل الشاشة تقرأ نظاما لا
     تجميعا: عين القارئ تمسك الإيقاع قبل أن تقرأ حرفا. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 42px;

  /* ⭐ الفاصل بين كتلتين كبيرتين في تدفق الصفحة (بطاقة · شبكة إحصاء · تنويه).
     كان يكتب `style="margin-top:18px"` في **ستة عشر موضعا** لأن الكتلة التي
     قبله لا تملك فاصلا سفليا — وكل موضع منها فرصة نسيان في السابع عشر.
     والفاصل هنا يملكه **السابق** لا اللاحق، فيسري بلا أن يكتب. */
  --gap-block: 18px;

  /* ⭐ عرض السطر المريح للعربية. الجملة العربية أطول من مقابلها الإنجليزي
     بنحو الربع، وسطر يمتد ١٠٦٠ بكسلا يفقد القارئ موضع بدايته عند اللف —
     وهذا أكثر ما يتعب في الواجهات العربية «المترجمة» عن تخطيط إنجليزي. */
  --measure: 68ch;
}

* { box-sizing: border-box; }

/* ⚠️ `hidden` سمة يبطلها أي `display` في ورقة الأنماط، فعنصر يحمل السمة
   ويحمل صنفا فيه `display:flex` **يظهر بلا خطأ ولا تحذير**. وقد وقع ذلك
   فعلا في سطر «في انتظار دخولك» على شاشة الدخول: كان يعرض قبل أن يضغط
   أحد شيئا، والسمة عليه. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.75 "Segoe UI", "Noto Naskh Arabic", Tahoma, sans-serif;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* ── تخطي التنقل ───────────────────────────────────────────────────────── */
/* يخبأ **رأسيا** لا أفقيا: `inset-inline-start: -9999px` في صفحة عربية
   يساوي `right: -9999px`، فيدفع العنصر خارج الحافة القابلة للتمرير ويفتح
   فيضا أفقيا في كل شاشة. وهذا فخ لا يظهر إلا حين تقلب اللغة. */
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -80px; z-index: 60;
  background: #fff; color: var(--teal-900); padding: 10px 18px; border-radius: 8px;
  font-weight: 600; text-decoration: none; box-shadow: var(--shadow-3);
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 8px; }

/* ── الترويسة ───────────────────────────────────────────────────────────── */
/* ⭐ ترويسة فاتحة لا داكنة (قرار المالك 2026-09-24).
   الترويسة التركوازية الصلبة كانت تسحب العين إلى أعلى الصفحة في كل شاشة،
   وتجعل المنصة كلها تقرأ لونا واحدا. والفاتحة الضبابية تسلم الصدارة للمحتوى،
   ويبقى التركوازي حيث يعني شيئا: السايدبار والأقسام والأفعال.
   والشعار يعود إلى لونه الأصلي — كان يقلب إلى الأبيض بمرشح لأن ما تحته داكن. */
.top {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  color: var(--ink);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
/* خيط ضوء كهرماني على الحافة — اللهجة تظهر مرة واحدة أعلى الصفحة لا أكثر. */
.top::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-300) 45%, var(--teal-400) 85%, transparent);
  opacity: 0; transition: opacity .3s var(--ease-out); pointer-events: none;
}
.top-stuck { border-color: var(--line); box-shadow: var(--shadow-2); }
.top-stuck::after { opacity: .9; }
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }

.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--teal-900); }
/* الشعار بلونه الأصلي (#173F4A) على أرضية فاتحة — بلا مرشح قلب. */
.brand-logo img {
  display: block; height: 34px; width: auto;
  transition: transform .45s var(--ease-spring);
}
.brand:hover .brand-logo img { transform: scale(1.04); }
.brand-rule { width: 1px; height: 26px; background: var(--line); }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
/* بلا `letter-spacing`: تباعد الحروف يفك وصل العربية فيقرأ الاسم مقطعا. */
.brand-name { font-size: 21px; font-weight: 700; }
.brand-tag { font-size: 12px; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 4px; }
/* هدف لمس ٤٤ بكسلا حتى لرابط نصه ٢٦ — القياس بالإصبع لا بالخط. */
.nav a {
  position: relative; color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 600;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.nav a:not(.btn), .linkish {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: 14px; border-radius: var(--radius-pill);
}
.nav a:not(.btn):hover { color: var(--teal-700); background: var(--teal-50); }
/* الصفحة الجارية تعلن بشارة مصمتة لا بخط تحتي رفيع — تقرأ من طرف الشاشة. */
.nav a[aria-current="page"] { color: var(--teal-900); background: var(--teal-100); }
.nav a[aria-current="page"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--gold-500); margin-inline-end: 8px;
}
.nav a:focus-visible, .linkish:focus-visible, .brand:focus-visible {
  outline: 2px solid var(--teal-500); outline-offset: 2px; border-radius: var(--radius-pill);
}
.nav .btn:focus-visible { outline: 3px solid var(--gold-600); outline-offset: 2px; }
/* الفعل الرئيس في الترويسة كهرماني — الشيء الوحيد الذي يصرخ في الصفحة. */
.nav .btn { background: var(--gold-500); color: var(--on-gold); min-height: 44px; box-shadow: 0 8px 20px -10px rgba(184, 121, 31, .8); }
.nav .btn:hover { background: var(--gold-600); color: #fff; }
.inline { display: inline; }
.linkish {
  background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600;
  cursor: pointer; padding-inline: 14px;
}
.linkish:hover { color: var(--teal-700); background: var(--teal-50); }

/* ── زر القائمة ودرج الجوال ────────────────────────────────────────────────
   الترويسة كانت تلف روابطها سطرين أو ثلاثة على الجوال، فتأكل نصف الشاشة
   قبل أن يقرأ الداخل كلمة. والدرج يخفيها خلف زر واحد، ويفتح بلا قفزة. */
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  color: var(--teal-800); cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.menu-toggle:hover { background: var(--teal-50); border-color: var(--teal-400); }
.menu-toggle:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.menu-toggle .bars { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.menu-toggle .bars::before, .menu-toggle .bars::after {
  content: ""; position: absolute; inset-inline: 0; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease-spring), opacity .2s var(--ease-out);
}
.menu-toggle .bars::before { top: -6px; }
.menu-toggle .bars::after  { top: 6px; }
.menu-toggle[aria-expanded="true"] .bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }


/* شريط تقدم القراءة — مؤشر لا زينة: يتبع التمرير مباشرة بلا حركة مؤجلة. */
.scroll-progress { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: rgba(23, 63, 74, .07); }
.scroll-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-500), var(--teal-500));
  transform-origin: 100% 50%;
}

/* ── المتن ──────────────────────────────────────────────────────────────── */
.main { padding-block: var(--sp-6) 64px; padding-inline: 20px; min-height: 60vh; }
h1 { font-size: var(--fs-2xl); margin: 0 0 6px; line-height: 1.35; }
h2 { font-size: var(--fs-xl); margin: var(--sp-6) 0 var(--sp-3); line-height: 1.45; }
h3 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); line-height: 1.5; }
.lede { color: var(--muted); margin: 0 0 var(--sp-6); max-width: var(--measure); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--gap-block); }

/* الكتل التي كانت بلا فاصل سفلي، فكان اللاحق يعوضه بنمط مضمن. */
.grid, .draft-note, .table-wrap, .toolbar { margin-bottom: var(--gap-block); }
/* آخر كتلة في الصفحة لا تخلف فراغا يوهم ببتر المحتوى. */
.main > :last-child { margin-bottom: 0; }

/* ⭐ نظافة البطاقة من مصدر واحد.
   كان كل قالب يكتب `style="margin-top:0"` على أول عنوان في بطاقته —
   **سبعون موضعا لقاعدة واحدة**، وكل موضع فرصة نسيان: بطاقة واحدة تنسى
   فتقفز فجوة ٣٢ بكسلا لا يفسرها شيء. والقاعدة هنا تصفها مرة، وتسري على
   ما لم يمس من القوالب كذلك — ومنها `admin/admins.php`. */
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }
/* فقرات البطاقة تلتزم عرض السطر المريح، والجداول والنماذج تأخذ عرضها كاملا. */
.card > p, .card > ul, .card > ol { max-width: var(--measure); }

/* ١٩٠ لا ٢٣٠: بخمس بطاقات إحصاء (لوحة الإشراف ولوحة المحلل) كان المقاس
   الأوسع يعطي أربعة أعمدة فتبقى الخامسة وحدها في سطر ونصف الصف فراغ.
   والقياس مأخوذ من عرض المتن الفعلي ١٠٢٠: خمسة أعمدة ١٩١ بينها فجوات ١٦. */
.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat b { display: block; font-size: 30px; color: var(--teal-700); line-height: 1.2; }
.stat span { color: var(--muted); font-size: 14px; }
/* إحصاء قيمته كلمة لا رقم — كان يكتب `style="font-size:19px"` في ثمانية مواضع. */
.stat-text b { font-size: var(--fs-lg); line-height: 1.45; }
/* عداد يجب أن يصرخ حين يتجاوز الصفر — الإخفاق لا يعرض بلون الإنجاز. */
.stat-alarm b { color: var(--err-fg); }

/* ── النماذج ────────────────────────────────────────────────────────────── */
label { display: block; margin: 14px 0 5px; font-size: 14px; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: #fff; color: var(--ink);
}
textarea { min-height: 320px; line-height: 1.9; font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal-500); outline-offset: 1px; border-color: var(--teal-500); }
.hint { font-size: 13px; color: var(--muted); margin-top: 4px; }
.check { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0; font-weight: 400; }
.check input { margin-top: 6px; }

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--teal-700); color: #fff; border: 0;
  padding: 11px 22px; border-radius: 8px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; vertical-align: middle;
  transition: background-color .25s var(--ease-out), transform .25s var(--ease-spring),
              box-shadow .25s var(--ease-out);
}
/* لمعة تعبر الزر عند المرور — تأكيد استجابة لا زخرفة. */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%); pointer-events: none;
}
.btn:hover { background: var(--teal-500); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.btn-lg { padding: 14px 26px; font-size: 17px; border-radius: 10px; }
.btn-ghost { background: #fff; color: var(--teal-700); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--teal-100); color: var(--teal-900); }
.btn-danger { background: #fff; color: var(--err-fg); border: 1px solid #f0c4c0; }
.btn-danger:hover { background: var(--err-bg); }
.actions { margin-top: 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* رابط نصي بسهم — الدرجة الثالثة من الإجراءات. */
.btn-quiet {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--teal-700); font-weight: 600; text-decoration: none;
  padding: 10px 4px; min-height: 44px; border-radius: 8px;
}
.btn-quiet:hover { color: var(--teal-900); }
.btn-quiet:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 3px; }
.btn-quiet .i { transition: transform .3s var(--ease-out); }
.btn-quiet:hover .i-dir, .btn .i-dir { transition: transform .3s var(--ease-out); }
.btn-quiet:hover .i-dir { transform: scaleX(-1) translateX(4px); }
.btn:hover .i-dir { transform: scaleX(-1) translateX(3px); }

/* الأيقونات: رمزية لا تقلب، واتجاهية تقلب مع اتجاه القراءة. */
.i { width: 1.15em; height: 1.15em; flex: none; }
[dir="rtl"] .i-dir { transform: scaleX(-1); }

/* ── الرسائل ────────────────────────────────────────────────────────────── */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-size: 15px; }
.flash-ok    { background: var(--ok-bg);   color: var(--ok-fg); }
.flash-error { background: var(--err-bg);  color: var(--err-fg); }
.draft-note  { background: var(--warn-bg); color: var(--warn-fg); padding: 12px 16px; border-radius: 8px; margin-bottom: var(--gap-block); font-size: var(--fs-md); }
.draft-note > :first-child { margin-top: 0; }
.draft-note > :last-child  { margin-bottom: 0; }

/* ── الجداول ────────────────────────────────────────────────────────────── */
/* المحاذاة منطقية لا فيزيائية: `right` تصح بالمصادفة في صفحة عربية وحدها. */
table { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); }
th, td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-md); vertical-align: top; }
th {
  color: var(--muted); font-size: var(--fs-sm); font-weight: 700;
  border-bottom-width: 2px; white-space: nowrap;
  background: #fbfdfc; position: sticky; top: 0;
}
tbody tr { transition: background-color .15s var(--ease-out); }
tbody tr:hover { background: #fafcfb; }
tbody tr:last-child td { border-bottom: 0; }
tr.revoked td { color: var(--muted); }
/* عمود الإجراءات في آخر السطر — كان `style="text-align:left"` في تسعة مواضع،
   و`left` في RTL صحيح بالمصادفة لا بالقصد. */
.col-end { text-align: end; white-space: nowrap; }

/* حاضنة التمرير الأفقي. **أكثر أعطال الجوال شيوعا** هو جدول يمد الصفحة كلها
   أفقيا فتتزحزح كل شاشة معه؛ والعلاج أن يتمرر الجدول داخل حاضنته وحدها. */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap > table { min-width: 100%; width: max-content; }

/* ── نظام الشارات ────────────────────────────────────────────────────────
   ⭐ **الشارة تقول حالة، فلا يجوز أن يقول اللون الواحد حالتين.**
   وكان يقولها: `tag-admin` الرمادية توسم «رسالة أرسلت» و«بوابة مؤشرة»
   و«مستوى محلل» — ثلاثة معان لا يجمعها شيء إلا أنها احتاجت شارة. فمن رأى
   الرمادي لم يتعلم منه شيئا.
   والأسماء أدناه دلالية: النجاح والتحذير والخطأ والمعلومة والحياد. */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.75;
  border: 1px solid transparent; unicode-bidi: isolate;
}
.tag-ok      { background: var(--ok-bg);    color: var(--ok-fg);    border-color: #bfe3cd; }
.tag-warn    { background: var(--warn-bg);  color: var(--warn-fg);  border-color: #f0dcb4; }
.tag-err     { background: var(--err-bg);   color: var(--err-fg);   border-color: #f0c4c0; }
.tag-info    { background: var(--teal-100); color: var(--teal-900); border-color: #c6e0df; }
.tag-neutral { background: #eef1f0;         color: var(--muted);    border-color: var(--line); }

/* ⭐ الأسماء الموروثة (`tag-super` · `tag-admin` · `tag-revoked` · `tag-draft`)
   حذفت 2026-09-01 بعد نقل مواضعها الأربعة والثلاثين كلها إلى الأسماء الدلالية
   أعلاه — والنقل بالمعنى لا بالاسم، فقد كان الاسم الواحد يحمل معنيين:

     · `tag-admin` الرمادية وسمت «رسالة أرسلت» (إنجاز) و«مستوى محلل» (هوية)
       و«بوابة مؤشرة» (معلومة) — فمن رأى الرمادي لم يتعلم منه شيئا.
     · `tag-draft` الكهرمانية وسمت «مسودة» (تحذير) و«الإصدار ٣» (معلومة
       محضة) — فرقم إصدار يلبس لون الإنذار.
     · ومستوى المحلل نفسه كان رماديا في شاشة العروض وتركوازيا في ملف المحلل
       — **شارتان لمعنى واحد**.

   ولا تعاد: كل شارة جديدة تأخذ اسمها من حالتها لا من شاشتها. */

/* نقطة حالة داخل الشارة — تفرق الحالات لمن لا يميز الألوان. */
.tag-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* ── نص السياسة ────────────────────────────────────────────────────────── */
.policy-body { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 30px; }
.policy-body h2 { margin-top: 26px; }
.policy-body h2:first-child { margin-top: 0; }
.policy-meta { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

/* ── التذييل ────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); background: #fff; padding: 24px 0 34px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; }
.foot-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--teal-700); text-decoration: none; font-size: 14px;
}
.foot-links a:hover { text-decoration: underline; }
.foot-note { color: var(--muted); font-size: 13px; margin: 0; }

@media (max-width: 640px) {
  /* ترويسة لاصقة من سطرين تبتلع خمس شاشة الجوال — فتترك تمر مع الصفحة.
     و`relative` لا `static`: شريط التقدم مطلق الموضع ويحتاج أبا مموضعا،
     وإلا صار مرجعه الصفحة كلها فطفا في أسفل الشاشة. */
  .top { position: relative; }
  /* أهداف اللمس على الجوال: كل ما ينقر لا يقل عن ٤٤ بكسلا. */
  .btn-sm { min-height: 44px; }
  .topbar { flex-wrap: wrap; padding: 12px 0; min-height: 0; row-gap: 12px; }
  /* الشعار يبقى ظاهرا على الجوال — كان يخفى حين كان سطرا وصفيا،
     وقد صار هوية فيصغر ولا يحذف. */
  .brand-logo img { height: 26px; }
  .brand-name { font-size: 19px; }
  .brand-tag { font-size: 11px; }
  .nav { gap: 14px; font-size: 14px; flex-wrap: wrap; row-gap: 10px; }
}

/* ── اختبار تحديد المستوى ───────────────────────────────────────────────── */
.quiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.timer {
  font: 600 26px/1 "Segoe UI", monospace; color: var(--teal-700);
  background: var(--teal-100); padding: 10px 16px; border-radius: 10px; min-width: 96px; text-align: center;
}
.timer-low { background: var(--err-bg); color: var(--err-fg); }

.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.progress-fill { height: 100%; background: var(--teal-500); transition: width .3s; }

.quiz-card { padding: 28px 30px; }
.quiz-prompt { font-size: 19px; line-height: 2; margin: 0 0 22px; }

.choice {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 400;
  background: #fff; transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--teal-500); background: var(--teal-100); }
.choice input { margin-top: 6px; flex: none; }
.choice-on { border-color: var(--teal-500); background: var(--teal-100); }

.dots { display: flex; flex-wrap: wrap; gap: 8px; }
.dot {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px; text-decoration: none; color: var(--muted); font-size: 14px;
}
.dot:hover { border-color: var(--teal-500); }
.dot-done { background: var(--teal-100); color: var(--teal-900); border-color: var(--teal-100); }
.dot-now  { outline: 2px solid var(--teal-500); outline-offset: 1px; }

.result-card { text-align: center; padding: 34px; }
.result-level { font-size: 40px; font-weight: 700; color: var(--teal-700); margin: 6px 0 14px; }

.opt-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.opt-row input[type=radio] { flex: none; }

.level-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.level-bar span { display: block; height: 100%; background: var(--teal-500); }

/* ── شريط اكتمال الملف ─────────────────────────────────────────────────── */
.completion { border-inline-start: 4px solid var(--teal-500); }
.completion-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.completion-pct { font-size: 26px; color: var(--teal-700); }
.completion-note { font-size: 15px; margin: 14px 0 18px; color: var(--warn-fg); background: var(--warn-bg); padding: 12px 15px; border-radius: 8px; }
.completion-done { color: var(--ok-fg); background: var(--ok-bg); }

.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.step:last-child { border-bottom: 0; }
.step-mark {
  flex: none; width: 26px; height: 26px; border-radius: 999px; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  background: #eef1f0; color: var(--muted);
}
.step-done .step-mark { background: var(--teal-100); color: var(--teal-900); }
.step-now  .step-mark { background: var(--teal-700); color: #fff; }
.step-todo { color: var(--muted); }
.step a { color: var(--teal-700); font-weight: 600; }


/* ── زر المنصات ──────────────────────────────────────────────────────────────
   زر واحد ينقل إلى لوحة العضوية، لا قائمة تنسدل. وسقط معه تخطيط القائمة
   وحالتها على الجوال — **نمط لا يشير إليه شيء وزن يحمل ولا يخدم**. */
.nav a.platforms-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding-inline: 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--teal-800); background: #fff;
}
.nav a.platforms-link:hover { background: var(--teal-50); border-color: var(--teal-400); }
/* الشارة الكهرمانية لبقية روابط الترويسة — والزر المحاط لا يريدها. */
.nav a.platforms-link::before { content: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   صفحة الهبوط
   ═══════════════════════════════════════════════════════════════════════════

   نظام الكشف عند التمرير معلق كله على صنف `js-motion` في `<html>`، وهو صنف
   لا يضاف إلا بجافاسكربت **ولا يضاف لمن طلب تقليل الحركة**. فالإخفاء لا يقع
   إلا حيث توجد يد تكشفه — ومن عطل الجافاسكربت يرى الصفحة كاملة من أول رسم.

   والإخفاء بخاصيتي `translate` و`scale` المستقلتين لا ب`transform`: لأن
   `transform` محجوزة لتفاعلات المرور (رفع البطاقة)، ولو تشاركتا خاصية
   واحدة لألغى أقواهما تخصيصا الآخر صامتا.
   ─────────────────────────────────────────────────────────────────────────── */
.js-motion [data-rv],
.js-motion .numbered > li { opacity: 0; translate: 0 22px; }
.js-motion [data-rv="side"] { translate: 26px 0; }
.js-motion [data-rv="zoom"] { translate: 0 12px; scale: .96; }

.js-motion [data-rv].is-in,
.js-motion .numbered > li.is-in {
  opacity: 1; translate: none; scale: none;
  transition: opacity .7s var(--ease-out), translate .75s var(--ease-out), scale .75s var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}

.js-motion .btn:hover::after { animation: btn-sheen .75s var(--ease-out); }
@keyframes btn-sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/* ── الواجهة ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  /* يبتلع حشو المتن فيلتصق بالترويسة ويمتد إلى حافتي الحاضنة. */
  margin: -32px -20px clamp(48px, 8vw, 88px);
  padding: clamp(40px, 6vw, 68px) 20px clamp(44px, 6vw, 72px);
  border-radius: 0 0 28px 28px;
  border-bottom: 1px solid #d7e6e4;
  background: linear-gradient(168deg, #ffffff 0%, #f2f9f8 45%, var(--teal-100) 100%);
}
/* الباترن من ملف الهوية، خافتا خلف النص — زينة لا تنقص قراءة. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/assets/img/pattern.svg") no-repeat left -60px top -80px / 620px;
  opacity: .07;
}
.hero-aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aura { position: absolute; border-radius: 50%; filter: blur(64px); }
.aura-a {
  width: 360px; height: 360px; inset-inline-start: -90px; top: -150px;
  background: radial-gradient(circle, rgba(62, 144, 144, .50), transparent 68%);
}
.aura-b {
  width: 320px; height: 320px; inset-inline-end: -80px; bottom: -140px;
  background: radial-gradient(circle, rgba(23, 63, 74, .32), transparent 68%);
}
.js-motion .aura-a { animation: drift-a 24s ease-in-out infinite; }
.js-motion .aura-b { animation: drift-b 29s ease-in-out infinite; }
@keyframes drift-a { 50% { transform: translate3d(46px, 34px, 0) scale(1.14); } }
@keyframes drift-b { 50% { transform: translate3d(-40px, -30px, 0) scale(1.10); } }

.hero-inner {
  position: relative; display: flex; align-items: center;
  gap: clamp(24px, 4vw, 52px); max-width: 1020px; margin: 0 auto;
}
.hero-text { flex: 1 1 380px; min-width: 0; }

/* الشعار النصي — وسمه `hero-slogan` هو ما يطرقه حارس الدخان، فلا يبدل. */
.hero-slogan {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(62, 144, 144, .30);
  color: var(--teal-700); font-size: 14px; font-weight: 600;
}
/* ولا أيقونة فيها منذ 2026-09-24 (قرار المالك)، فسقطت معها حركة `twinkle`
   وقاعدة لونها: **نمط لعنصر لا وجود له ينجرف بصمت** ويبقى في الملف سنوات. */

/* لا `letter-spacing` على نص عربي: التباعد يفك وصل الحروف فيقرأ مقطعا.
 *
 * ⚠️ **وحرف السين كان يقطع من أسفله** (شكوى المالك 2026-09-24 بلقطة):
 * `background-clip: text` يقص الخلفية على شكل الحروف، **وصندوق القص هو صندوق
 * العنصر** — فما نزل من الحرف تحت السطر (نزول السين والصاد والياء في الخط
 * العربي) يقع خارج الصندوق فلا يجد خلفية يلونها، فيبدو مبتورا.
 *
 * والعلاج سطران: ارتفاع سطر يسع النزول (١٫٢٥ كان يضيق عنه)، وحشو سفلي صغير
 * يبقي ذيل الحرف داخل الصندوق. ⭐ **ولا يظهر هذا في خط لاتيني** — فمن قاس
 * التدرج بنص إنجليزي لم ير شيئا، وهو عطل لا يكشفه إلا النظر إلى العربية. */
.hero h1 {
  font-size: clamp(34px, 6vw, 58px); line-height: 1.45; margin: 0 0 16px;
  padding-block-end: .12em;
  color: var(--teal-900);
  background: linear-gradient(200deg, var(--teal-900) 20%, var(--teal-700) 85%);
  -webkit-background-clip: text; background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { -webkit-text-fill-color: transparent; }
}
.hero-lede {
  font-size: clamp(16px, 1.9vw, 19px); line-height: 1.95; color: #3b4947;
  margin: 0; max-width: 54ch;
}
.hero .actions { margin-top: 26px; }
.hero-note {
  display: flex; align-items: flex-start; gap: 9px; margin: 22px 0 0;
  font-size: 13.5px; line-height: 1.8; color: var(--muted); max-width: 56ch;
}
.hero-note .i { margin-top: 4px; color: var(--teal-700); }

/* الرسم الزخرفي: يميل قليلا مع المؤشر، والميل يأتي من الجافاسكربت. */
.hero-art {
  flex: 0 1 380px; max-width: 380px; min-width: 0;
  transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform .5s var(--ease-out);
}
.art { display: block; width: 100%; height: auto; overflow: visible; }

.js-motion .art-panel  { animation: float-y 7.5s ease-in-out infinite; }
.js-motion .art-chip-a { animation: float-y 6.2s ease-in-out .8s infinite reverse; }
.js-motion .art-chip-b { animation: float-y 8.4s ease-in-out .4s infinite; }
@keyframes float-y { 50% { transform: translateY(-9px); } }

.js-motion .art-line { stroke-dasharray: 240; stroke-dashoffset: 240; animation: art-draw 1.8s var(--ease-out) .35s forwards; }
@keyframes art-draw { to { stroke-dashoffset: 0; } }
.js-motion .art-area { opacity: 0; animation: art-fade 1s var(--ease-out) 1.5s forwards; }
@keyframes art-fade { to { opacity: 1; } }

.js-motion .art-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: art-pop .55s var(--ease-spring) forwards; }
.js-motion .art-dot:nth-child(1) { animation-delay: 1.05s; }
.js-motion .art-dot:nth-child(2) { animation-delay: 1.25s; }
.js-motion .art-dot:nth-child(3) { animation-delay: 1.45s; }
@keyframes art-pop { to { transform: scale(1); } }

.js-motion .art-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: art-grow .9s var(--ease-spring) forwards; }
.js-motion .art-bar:nth-child(1) { animation-delay: .55s; }
.js-motion .art-bar:nth-child(2) { animation-delay: .70s; }
.js-motion .art-bar:nth-child(3) { animation-delay: .85s; }
.js-motion .art-bar:nth-child(4) { animation-delay: 1.00s; }
@keyframes art-grow { to { transform: scaleY(1); } }

/* ── إيقاع الأقسام ───────────────────────────────────────────────────────── */
.sec { margin: 0 0 clamp(48px, 8vw, 88px); }
.sec:last-child { margin-bottom: 0; }
.sec-title {
  position: relative; padding-top: 20px; margin: 0 0 12px;
  font-size: clamp(22px, 3.2vw, 30px); line-height: 1.4; color: var(--teal-900);
}
.sec-title::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0;
  width: 46px; height: 4px; border-radius: 999px;
  background: linear-gradient(to left, var(--teal-500), var(--teal-900));
}
.sec-lede { color: var(--muted); font-size: 17px; margin: 0 0 26px; max-width: 62ch; }
.sec-title + .journey, .sec-title + .tick, .sec-title + .numbered, .sec-title + .duo { margin-top: 26px; }

/* ── تصريح التعريف ──────────────────────────────────────────────────────── */
.statement {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(26px, 4vw, 46px); box-shadow: var(--shadow-1);
}
.statement::after {
  content: ""; position: absolute; inset-block-start: -40px; inset-inline-end: -60px;
  width: 300px; height: 300px; pointer-events: none;
  background: url("/assets/img/pattern.svg") no-repeat center / contain; opacity: .06;
}
.statement h2 { position: relative; font-size: clamp(21px, 3vw, 28px); margin: 0 0 14px; color: var(--teal-900); }
.statement-body { position: relative; font-size: clamp(16px, 1.8vw, 19px); line-height: 2.05; margin: 0; color: #33403d; }

/* ── بطاقتان متجاورتان ───────────────────────────────────────────────────── */
.duo { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.pane {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 26px 18px;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
}
/* هالة تتبع المؤشر — موضعها من الجافاسكربت، وغيابها لا يترك أثرا. */
.pane::before {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(62, 144, 144, .13), transparent 70%);
  transition: opacity .35s var(--ease-out);
}
.pane:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: #c9e0de; }
.pane:hover::before { opacity: 1; }
.pane > * { position: relative; }
.pane h2, .pane h3 { margin: 0 0 12px; font-size: 20px; color: var(--teal-900); }
.pane p { margin: 0 0 8px; color: #3d4b48; line-height: 1.95; }
.pane-plain { padding: 26px; }

.pane-icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--teal-100); color: var(--teal-700); margin-bottom: 16px;
  transition: transform .45s var(--ease-spring), background-color .3s, color .3s;
}
.pane-icon .i { width: 24px; height: 24px; }
.pane:hover .pane-icon { transform: rotate(-7deg) scale(1.07); background: var(--teal-700); color: #fff; }

.pane-list { list-style: none; padding: 0; margin: 0 0 16px; }
.pane-list li { position: relative; padding-inline-start: 20px; margin-bottom: 8px; color: #3d4b48; }
.pane-list li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500);
}

/* ── رحلة المشروع ────────────────────────────────────────────────────────── */
.journey { list-style: none; padding: 0; margin: 0; }
.journey-item {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; margin-bottom: 14px;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.journey-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #c9e0de; }
/* خيط يصل الخطوة بتاليتها، محاذ لمركز الرقم — والاتجاه منطقي لا يساري. */
.journey-item::after {
  content: ""; position: absolute; inset-inline-start: 36px; top: 100%;
  width: 2px; height: 14px; border-radius: 2px;
  background: linear-gradient(var(--teal-500), rgba(62, 144, 144, .12));
}
.journey-item:last-child::after { content: none; }

.step-no {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 12px;
  background: linear-gradient(150deg, var(--teal-700), var(--teal-900));
  color: #fff; font-weight: 700; font-size: 15px;
  display: grid; place-items: center; unicode-bidi: isolate;
  transition: transform .45s var(--ease-spring), box-shadow .35s;
}
.journey-item:hover .step-no { transform: scale(1.1) rotate(-6deg); box-shadow: 0 8px 18px -8px rgba(23, 63, 74, .7); }
.journey-body { min-width: 0; }
.journey-body b { display: block; font-size: 17px; margin-bottom: 4px; color: var(--teal-900); }
.journey-body p { margin: 0; color: var(--muted); line-height: 1.9; }

/* ── الخدمات ─────────────────────────────────────────────────────────────── */
.tick {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.tick li {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding-block: 16px; padding-inline: 54px 18px; font-weight: 600; color: var(--teal-900);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.tick li:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #c9e0de; }
.tick li::before {
  content: ""; position: absolute; inset-inline-start: 16px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px; border-radius: 9px;
  background: var(--teal-100); transition: background-color .3s;
}
/* علامة الصح رمز لا اتجاه — ترسم بحدود فيزيائية عمدا فلا تنقلب مع اللغة. */
.tick li::after {
  content: ""; position: absolute; inset-inline-start: 23px; top: 50%;
  width: 12px; height: 6px; margin-top: -5px;
  border: 2px solid var(--teal-700); border-top: 0; border-right: 0;
  transform: rotate(-45deg); transition: border-color .3s;
}
.tick li:hover::before { background: var(--teal-700); }
.tick li:hover::after { border-color: #fff; }

/* ── الأهداف ─────────────────────────────────────────────────────────────── */
.numbered {
  counter-reset: g; list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.numbered > li {
  counter-increment: g; position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; padding-inline-start: 62px; line-height: 1.8;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.numbered > li:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #c9e0de; }
.numbered > li::before {
  content: counter(g); position: absolute; inset-inline-start: 18px; top: 16px;
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--teal-100); color: var(--teal-900);
  font-size: 14px; font-weight: 700; display: grid; place-items: center; unicode-bidi: isolate;
  transition: background-color .3s, color .3s;
}
.numbered > li:hover::before { background: var(--teal-700); color: #fff; }

/* ── شريط الأثر والإنجازات ───────────────────────────────────────────────── */
/* الشريط الداكن: التدرج لا يبلغ `--teal-700` صافيا أبدا — بل يبقى وهجا
   تركوازيا في ركن بعيد عن النص. وسببه مقيس: النص الفاتح على `--teal-700`
   الصافي يهبط إلى ٣٫٩:١، فيسقط شرط ٤٫٥. */
.band {
  position: relative; overflow: hidden; border-radius: 26px;
  padding: clamp(28px, 5vw, 54px);
  background:
    radial-gradient(120% 90% at 12% 100%, rgba(62, 144, 144, .26), transparent 62%),
    linear-gradient(150deg, var(--teal-900) 0%, #12333d 100%);
  color: #d8ebe9; box-shadow: var(--shadow-3);
}
.band-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background: url("/assets/img/pattern.svg") no-repeat right -90px bottom -140px / 640px;
  opacity: .06; filter: brightness(0) invert(1);
}
.band > *:not(.band-pattern) { position: relative; }
.band h2 { color: #fff; font-size: clamp(22px, 3.2vw, 30px); margin: 0 0 14px; }
.band-head p { margin: 0; color: #cfe6e4; font-size: clamp(16px, 1.8vw, 18px); line-height: 2.05; max-width: 64ch; }

.band-stats-head { margin-top: clamp(30px, 4vw, 44px); padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .15); }
.band-stats-head h2 { font-size: clamp(19px, 2.4vw, 22px); margin: 0 0 8px; }
.band-stats-head p { margin: 0; color: #cfe6e4; font-size: 15px; line-height: 1.9; max-width: 62ch; }

.band-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 24px; }
/* البطاقة تعتم أرضيتها ولا تفتحها: طبقة بيضاء شفافة كانت ترفع لمعان
   الأرضية تحت نص فاتح فتنقص التباين. والإبراز عند المرور بالحافة والظل
   لا باللون — فيبقى التباين ثابتا في كل الحالات. */
.band .stat {
  background: rgba(9, 32, 39, .32); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px; padding: 20px 22px;
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
.band .stat:hover {
  transform: translateY(-4px); border-color: rgba(255, 255, 255, .42);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .85);
}
.band .stat b { color: #fff; font-size: clamp(32px, 5vw, 44px); line-height: 1.15; }
.band .stat span { color: #cbe3e1; font-size: 14px; }
.band .stat p { margin: 12px 0 0; color: #d3e8e6; font-size: 13.5px; line-height: 1.85; }
/* أرقام لاتينية داخل صفحة عربية: تعزل فلا يعبث بها خوارزم الاتجاه. */
.stat b { unicode-bidi: isolate; }
.stat-wide b { font-size: 34px; }

/* ── إقرار ما قبل البدء ──────────────────────────────────────────────────── */
.closing {
  background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--teal-500);
  border-radius: 16px; padding: 26px 28px;
}
.closing h2 { margin: 0 0 10px; font-size: 20px; color: var(--teal-900); }
.closing p { margin: 0 0 16px; color: #3d4b48; line-height: 1.95; }
.closing-links { margin: 0; gap: 10px; }
.closing-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 16px; border-radius: 999px; background: var(--teal-100);
  color: var(--teal-900); font-weight: 600; text-decoration: none;
  transition: background-color .25s, color .25s, transform .25s var(--ease-out);
}
.closing-links a:hover { background: var(--teal-700); color: #fff; text-decoration: none; transform: translateY(-2px); }
.closing-links a:focus-visible, .foot-links a:focus-visible, .pane-list a:focus-visible {
  outline: 2px solid var(--teal-500); outline-offset: 2px;
}

/* ── تذييل الهوية ────────────────────────────────────────────────────────── */
.foot-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.foot-brand > a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.foot-brand > a:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 4px; }
.foot-brand img { display: block; height: 42px; width: auto; transition: opacity .25s; }
.foot-brand > a:hover img { opacity: .78; }
.foot-copy { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* ── شاشة تحرير صفحة الهبوط ──────────────────────────────────────────────── */
.area-sm { min-height: 110px; }
.area-xs { min-height: 68px; }
.sub-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.sub-item > div { flex: 1; }
.sub-no {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: 8px;
  background: var(--teal-100); color: var(--teal-900);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.stat-pair { display: flex; gap: 10px; }
.stat-pair input:first-child { flex: 0 0 110px; }

/* ── نص سياسة معروض داخل بطاقة ─────────────────────────────────────────── */
.policy-body { line-height: 1.95; }
.policy-body h2 { font-size: 18px; margin: 22px 0 8px; }
.policy-body h3 { font-size: 16px; margin: 18px 0 6px; color: var(--muted); }
.policy-body li { margin-bottom: 6px; }
.policy-body > :first-child { margin-top: 0; }

/* ── حقل كلمة المرور ومفتاح إظهارها ──────────────────────────────────────── */
.pw-field { position: relative; }
/* الحشو الجانبي يزاد **بعد** أن يبنى الزر فعلا — وإلا بقيت فجوة فارغة
   لمن عطل الجافاسكربت، أي عيب بصري سببه ميزة غير موجودة أصلا. */
.pw-field-ready > input { padding-inline-end: 74px; }
.pw-toggle {
  position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 8px;
  background: var(--teal-100); color: var(--teal-900); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.pw-toggle:hover { background: var(--teal-500); color: #fff; border-color: var(--teal-500); }
.pw-toggle:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 1px; }

/* ── الشعار النصي ───────────────────────────────────────────────────────── */
/* شكل `.hero-slogan` مع كتلة صفحة الهبوط أعلاه — وهنا موضعه في التذييل. */
.foot-slogan { color: var(--ink); font-size: 14px; font-weight: 600; margin: 0 0 4px; }

/* ── نبض المجدولة ───────────────────────────────────────────────────────── */
.pulse { border-inline-start: 4px solid var(--line); }
.pulse h2 { font-size: 17px; margin-bottom: 8px; }
.pulse-warm { border-inline-start-color: var(--teal-500); }
.pulse-cold { border-inline-start-color: var(--err-fg); background: var(--err-bg); }
.pulse code { font-size: 13px; word-break: break-all; }

/* ── فهرس المحللين المجازين ────────────────────────────────────────────── */
.filters { padding: 16px 20px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filter-field { flex: 1 1 200px; margin: 0; }
.filter-field > span { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.filter-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.filter-actions .linkish { color: var(--teal-700); }
.filter-actions .linkish:hover { color: var(--teal-900); }

.analyst-card { margin-bottom: 0; }

.pager { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.pager .hint { margin: 0; }

/* ── الجوال ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wrap { padding: 0 14px; }
  /* يعاد بعد `.wrap` عمدا: الشرطية أعلاه تمسح الحشو الرأسي بالاختصار. */
  .main { padding-block: 22px 48px; padding-inline: 14px; }
  .card { padding: 18px 16px; }
  .grid { grid-template-columns: 1fr; }

  /* حقول التصفية تنزل سطرا سطرا، والزر يملأ عرضه فيطال بالإبهام. */
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-actions { justify-content: space-between; }
  .filter-actions .btn { flex: 1; text-align: center; }

  /* جدول عريض لا يمد الصفحة أفقيا — بل يتمرر داخل حاضنته وحدها. */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  .actions { flex-wrap: wrap; }
  .quiz-head { flex-direction: column; gap: 10px; }

  /* الواجهة تنقلب عمودا: النص أولا والرسم تحته — القراءة قبل الزينة. */
  .hero { margin: -22px -14px 44px; padding: 34px 16px 40px; border-radius: 0 0 22px 22px; }
  .hero-inner { flex-direction: column; align-items: stretch; gap: 30px; }
  .hero-art { flex: 0 0 auto; max-width: 320px; width: 100%; margin-inline: auto; }
  .hero .actions { gap: 10px; }
  .hero .actions .btn { flex: 1 1 auto; }
  .aura { filter: blur(48px); }

  .duo, .tick, .numbered, .band-stats { grid-template-columns: 1fr; }
  .band { border-radius: 20px; }
  .journey-item { padding: 16px; gap: 13px; }
  .journey-item::after { inset-inline-start: 32px; }
  .statement::after { width: 200px; height: 200px; }
  .closing { padding: 22px 18px; }

  .foot-brand { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stat-pair { flex-direction: column; }
  .stat-pair input:first-child { flex: 1; }
}

/* ── تقليل الحركة: إطفاء لا إبطاء ───────────────────────────────────────────
   الصنف `js-motion` لا يضاف أصلا لمن طلب التقليل، فلا شيء يخفى ولا شيء
   يتحرك. وهذه الكتلة حارس ثان يمسك ما بقي: تفاعلات المرور والانتقالات
   المعرفة خارج `js-motion` — ومن غير تفضيله بعد فتح الصفحة. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .pane:hover, .journey-item:hover, .tick li:hover,
  .numbered > li:hover, .band .stat:hover, .closing-links a:hover { transform: none; }
  .hero-art { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   بنية الشاشة — مكونات لوحة الإشراف
   ═══════════════════════════════════════════════════════════════════════════
   كانت كل شاشة تبني ترويستها وشريط أدواتها وحالتها الفارغة باجتهاد موضعي:
   عنوان عار ثم وصف ثم زر سائب في فقرة. فاختلف الإيقاع بين ثماني شاشات لمعنى
   واحد. وهذه المكونات تصفه مرة واحدة.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── ترويسة الصفحة ──────────────────────────────────────────────────────────
   العنوان والوصف من جهة، وأدوات الصفحة من الجهة المقابلة — وتنزل تحته على
   الضيق. والمحاذاة منطقية، فلا ينكسر التخطيط لو قلبت اللغة. */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.page-head-text { flex: 1 1 min(100%, 460px); min-width: 0; }
.page-head h1 { margin-bottom: var(--sp-2); }
.page-head .lede,
.page-head .page-meta { margin-bottom: 0; }
.page-head-aside { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* سطر تعريفي تحت العنوان: شارات ومعرفات لا فقرة نصية. */
.page-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-md);
}
.page-meta b { color: var(--ink); font-weight: 600; }

/* ── شريط الأدوات ───────────────────────────────────────────────────────────
   صف واحد لإجراءات الشاشة وحقول ترشيحها. والفاصل المرن يدفع ما بعده إلى
   الطرف المقابل بلا محاذاة فيزيائية. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.toolbar-spacer { flex: 1 1 auto; }
.toolbar > .hint { margin: 0; }

/* ── ترويسة البطاقة ────────────────────────────────────────────────────────
   عنوان البطاقة وما يرافقه من شارة حالة أو إجراء صغير في الطرف المقابل. */
.card-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3);
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head h2 { font-size: var(--fs-lg); }
.card-head-aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* وصف تحت عنوان البطاقة — يلتزم عرض السطر المريح. */
.card-sub { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-md); max-width: var(--measure); }

/* ── أزواج «مصطلح: قيمة» ───────────────────────────────────────────────────
   لبيانات قليلة تقرأ سطرا سطرا — كبيانات تواصل الطرف الآخر — حيث الجدول
   ثقيل والفقرة تضيع فيها القيمة. و`dl` هو الوسم الصحيح دلاليا، فيقرؤه قارئ
   الشاشة زوجا لا سطرين متجاورين.

   والشبكة عمودان: المصطلح بعرض محتواه والقيمة بما بقي — بخصائص منطقية،
   فتنقلب مع اتجاه الصفحة بلا قاعدة ثانية. وعلى الشاشة الضيقة تصير عمودا
   واحدا لأن مصطلحا عربيا وقيمة لاتينية في سطر ٣٢٠ بكسلا يتزاحمان. */
.pairs {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4); align-items: baseline;
}
.pairs dt { color: var(--muted); font-size: var(--fs-md); }
.pairs dd { margin: 0; font-size: var(--fs-base); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .pairs { grid-template-columns: 1fr; gap: var(--sp-1); }
  .pairs dd { margin-block-end: var(--sp-2); }
}

/* ── المشاريع الجارية في اللوحة ───────────────────────────────────────────
   كتلة بارزة قبل الإحصاءات: عنوان بأيقونة وشارة عدّ، ثم بطاقة لكل مشروع
   بحافة بادئة ملونة تميزها عن بطاقات اللوحة الأخرى — فالعين تقع عليها أولا.
   والحافة بخاصية منطقية فتنقلب مع اتجاه الصفحة. */
.active-projects { margin-bottom: var(--gap-block); }
.active-projects-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.active-projects-head h2 {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0; font-size: var(--fs-lg); color: var(--teal-800);
}
.active-projects-head h2 svg { width: 22px; height: 22px; color: var(--teal-500); }
.active-projects .card-sub { margin-bottom: var(--sp-3); }

/* بطاقة مشروع قابلة للطي: `<details>` أصيل، الملخص سطر يقول ما يكفي، والفتح
   يكشف التواصل. الحافة البادئة تركوازية للجاري ورمادية للمغلق — فالعين
   تفرقهما قبل القراءة. والسهم يدور عند الفتح. */
.party-project { border-inline-start: 4px solid var(--teal-500); margin-bottom: var(--sp-3); padding: 0; }
.party-project.is-closed { border-inline-start-color: var(--teal-200); }
.party-project:last-of-type { margin-bottom: 0; }
.party-project > summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
  border-radius: var(--radius);
}
.party-project > summary::-webkit-details-marker { display: none; }
.party-project > summary:hover { background: var(--teal-50); }
.party-project > summary:focus-visible { outline: 2px solid var(--teal-500); outline-offset: -2px; }
.pp-chevron { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--teal-100); color: var(--teal-700); transition: transform .25s var(--ease-out); }
.pp-chevron .i { width: 15px; height: 15px; transform: scaleX(-1); }   /* السهم يشير إلى جهة الفتح في RTL */
.party-project[open] > summary .pp-chevron { transform: rotate(-90deg); }
.pp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-title { font-weight: 700; color: var(--teal-900); font-size: var(--fs-base); line-height: 1.5; }
.pp-meta { color: var(--muted); font-size: var(--fs-md); display: flex; flex-wrap: wrap; gap: 0 6px; }
.pp-sep { color: var(--line); }
.pp-tags { flex: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: flex-end; }
.pp-body { padding: 0 var(--sp-5) var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
@media (max-width: 640px) {
  .party-project > summary { flex-wrap: wrap; }
  .pp-tags { flex-basis: 100%; justify-content: flex-start; padding-inline-start: 38px; }
}
@media (prefers-reduced-motion: reduce) { .pp-chevron { transition: none; } }

/* السلايسر — على طريقة نظام المهام: شرائح بعدّ، الفاعلة تركوازية ممتلئة. */
.slicer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--gap-block); }
.slicer-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); color: var(--teal-800);
  font-size: var(--fs-md); font-weight: 600; line-height: 1.6;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.slicer-chip:hover { border-color: var(--teal-300); background: var(--teal-50); text-decoration: none; }
.slicer-chip:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.slicer-chip.is-on { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.slicer-n { font-size: var(--fs-xs); font-weight: 700; padding: 0 7px; border-radius: 999px;
  background: var(--teal-100); color: var(--teal-900); unicode-bidi: isolate; }
.slicer-chip.is-on .slicer-n { background: rgba(255,255,255,.22); color: #fff; }
.slicer-search { flex: 1 1 220px; max-width: 320px; margin-inline-start: auto; }
.slicer-search input { width: 100%; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: var(--fs-md); background: var(--card); }
.slicer-search input:focus { outline: 2px solid var(--teal-500); outline-offset: 1px; border-color: var(--teal-300); }

/* ── الحالة الفارغة ─────────────────────────────────────────────────────────
   ⭐ الفراغ يكتب ولا يترك. كانت الشاشة الخالية تعرض سطرا واحدا في بطاقة
   عارية، فلا يعرف الناظر أعطل هو أم لا شيء بعد، ولا ما الذي يفعله ليملأها.
   والحالة هنا تقول ثلاثة: ما الذي لا يوجد · ولم · وما الخطوة التالية. */
.empty { text-align: center; padding: var(--sp-7) var(--sp-5); }
.empty-icon {
  width: 54px; height: 54px; border-radius: 17px; margin: 0 auto var(--sp-4);
  display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700);
}
.empty-icon .i { width: 26px; height: 26px; }
.empty b { display: block; font-size: var(--fs-lg); color: var(--teal-900); margin-bottom: var(--sp-2); }
.empty p { margin: 0 auto; color: var(--muted); max-width: 54ch; line-height: 1.9; }
.empty p + p { margin-top: var(--sp-2); }
.empty .actions { justify-content: center; margin-top: var(--sp-5); }
/* حالة فارغة سببها عائق لا خلو — تلبس لون التحذير فتقرأ عائقا من بعيد. */
.empty-warn .empty-icon { background: var(--warn-bg); color: var(--warn-fg); }
.empty-warn b { color: var(--warn-fg); }
/* حالة فارغة داخل بطاقة لها ترويسة: لا تحتاج كل ذلك الحشو. */
.card > .empty { padding: var(--sp-6) var(--sp-3); }

/* ── الأرقام والمعرفات اللاتينية ───────────────────────────────────────────
   ⭐ رقم عضوية أو مرجع مشروع داخل جملة عربية: بلا عزل يقلب خوارزم الاتجاه
   ترتيب أجزائه مع ما جاوره من ترقيم، فيقرأ مقلوبا ولا يظهر ذلك إلا لمن
   يعرف الرقم أصلا. والأرقام جدولية فتصطف رأسيا في العمود. */
.num { unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* نص لاتيني تقني — سطر كرون أو معرف قالب. يعزل ويقرأ من اليسار. */
code {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .88em; line-height: 1.7;
  background: var(--teal-50); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; max-width: 100%;
  overflow-x: auto; vertical-align: middle;
}
/* أثر خطأ من الخادم: كتلة كاملة لا سطر — تقرأ من اليسار ولا تمد الصفحة. */
.trace {
  direction: ltr; text-align: left; unicode-bidi: isolate;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px; line-height: 1.75; word-break: break-word;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin: var(--sp-2) 0 0; overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   نبض المجدولة — مكون بصري لا سطر نص
   ═══════════════════════════════════════════════════════════════════════════
   ⭐ هذا أخطر عنصر في اللوحة: المجدولة المتوقفة لا تصدر خطأ ولا تحذيرا،
   ورسائل التأكيد تجلس في الطابور شهورا وكل شيء يبدو سليما. فكان النبض سطر
   نص بين سطور، يقرؤه من يبحث عنه ولا يوقف من لا يبحث.

   وقد صار: علامة ملونة ذات حلقة تنبض حين تكون حية، وحالة مكتوبة بلونها،
   وشارة تقول الحكم في كلمة. واللون وحده لا يكفي — فمعه أيقونة مختلفة ونص
   صريح، فيقرؤه من لا يميز الأحمر من الأخضر.
   ─────────────────────────────────────────────────────────────────────────── */
.pulse { border-inline-start: 4px solid var(--line); }
.pulse-warm { border-inline-start-color: var(--teal-500); }
.pulse-cold { border-inline-start-color: var(--err-fg); background: var(--err-bg); }

.pulse-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.pulse-sign {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700);
}
.pulse-sign .i { width: 22px; height: 22px; }
.pulse-cold .pulse-sign { background: #f8d7d4; color: var(--err-fg); }
/* حلقة تتمدد وتخفت — الحياة تظهر ولا توصف. ولا تعمل إلا مع صنف الحركة،
   وهو صنف لا يضاف أصلا لمن طلب تقليل الحركة. */
.pulse-sign::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid currentColor; opacity: 0; pointer-events: none;
}
.js-motion .pulse-warm .pulse-sign::after { animation: pulse-ring 2.8s var(--ease-out) infinite; }
@keyframes pulse-ring {
  0%        { opacity: .55; transform: scale(1); }
  70%, 100% { opacity: 0;   transform: scale(1.5); }
}

.pulse-title { flex: 1 1 auto; min-width: 0; }
.pulse-title h2 { margin: 0 0 2px; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.pulse-state { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.45; color: var(--teal-900); }
.pulse-cold .pulse-state { color: var(--err-fg); }
.pulse-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-sm);
}
.pulse-head > .tag { flex: 0 0 auto; margin-block-start: var(--sp-1); }

/* شرح العطل يحاذي النص لا العلامة — فيقرأ عمودا واحدا. */
.pulse-body { margin: var(--sp-3) 0 0; padding-inline-start: calc(44px + var(--sp-3)); }
.pulse-body > :first-child { margin-top: 0; }
.pulse-body > :last-child  { margin-bottom: 0; }
.pulse-body p + p { margin-top: var(--sp-2); }
.pulse code { font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   عناصر النماذج المشتركة
   ═══════════════════════════════════════════════════════════════════════════ */

/* منتقى داخل سطر — كان يكتب بأنماط مضمنة في موضعين، وارتفاعه ثمانية
   وثلاثون بكسلا أي دون هدف اللمس. */
.select-inline {
  width: auto; display: inline-block;
  min-height: 44px; padding: 8px 12px;
  /* ستة عشر بكسلا لا أقل: ما دونها يفعل تكبير iOS التلقائي عند التركيز. */
  font-size: var(--fs-base);
}

/* خانة اختيار في سطر — البوابات في شاشة المنح. الهدف أربعة وأربعون ارتفاعا. */
.check-inline {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0; min-height: 44px; padding-inline-end: var(--sp-3);
  font-weight: 400; font-size: var(--fs-md); cursor: pointer;
}
.check-inline input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--teal-700); }

/* سلم ارتفاعات مربع النص — كانت تسع قيم مضمنة لا يجمعها أصل، فصارت خمس
   درجات مسماة بغرضها. */
.area-xs { min-height: 68px; }
.area-sm { min-height: 110px; }
.area-md { min-height: 132px; }
.area-lg { min-height: 164px; }
.area-xl { min-height: 196px; }

/* سلم عرض البطاقة الحاملة لنموذج — كانت خمس قيم مضمنة، فصارت ثلاثا.
   وعرض النموذج ليس زينة: حقل يمتد ألف بكسل يفقد القارئ بدايته. */
.form-narrow { max-width: 480px; }
.form-mid    { max-width: 660px; }
.form-wide   { max-width: 780px; }

/* ═══════════════════════════════════════════════════════════════════════════
   شاشة طاقم الإشراف — تخطيط المنح
   ═══════════════════════════════════════════════════════════════════════════
   كانت خلية المنح تبني صفها بأنماط مضمنة: منتقى بعرض تلقائي، ثم تلميح بهامش
   بادئ، ثم خانتان كل واحدة بنمط مضمن كامل.
   ─────────────────────────────────────────────────────────────────────────── */
.grant-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.grant-gates { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }
.grant-gates-label { color: var(--muted); font-size: var(--fs-sm); }
/* حالة «في الطاقم فعلا» ليست إجراء، فلا تلبس هيئة زر. */
.grant-held { color: var(--muted); font-size: var(--fs-sm); }

/* نموذج تحديد الوحدة — صف واحد يلتف على الضيق. */
.unit-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-top: var(--sp-4); }
.unit-form label { margin: 0 0 var(--sp-1); }
.unit-form .hint { margin: 0; flex: 1 1 100%; }

/* سطر الوحدة المحددة — الاسم بارز والعدد تابع له. */
.unit-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-2); }
.unit-name { font-size: var(--fs-lg); font-weight: 700; color: var(--teal-900); }

/* ═══════════════════════════════════════════════════════════════════════════
   الجداول — قراءة لا حشو
   ═══════════════════════════════════════════════════════════════════════════ */
/* الصف الأول في الخلية هو الاسم، وما تحته تابع له — لا سطران متساويان. */
td > .hint { margin-top: 2px; }
/* خلية اسم فيها شارة: تبقى الشارة على سطر العنوان ولا تنزل وحدها. */
.cell-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* مجموعة شارات في خلية واحدة (البوابات) — فراغ منتظم بلا مسافات مكتوبة. */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-1) 6px; }
/* رأس الجدول يعلو المحتوى حين يلتصق، وإلا مر النص تحته. */
th { z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   بطاقات الإحصاء
   ═══════════════════════════════════════════════════════════════════════════ */
.stat { transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
/* بطاقة إحصاء هي رابط: تنقر كاملة لا كلمة فيها. */
a.stat { display: block; text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--teal-300); box-shadow: var(--shadow-2); }
a.stat:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   الجوال
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* شرح النبض يفقد إزاحته: عرض الشاشة أثمن من محاذاة العمود. */
  .pulse-body { padding-inline-start: 0; }
  .pulse-head { flex-wrap: wrap; }
  .empty { padding: var(--sp-6) var(--sp-3); }
  .page-head-aside { width: 100%; }
  .page-head-aside .btn { flex: 1 1 auto; }
  .unit-form { align-items: stretch; }
  .unit-form .select-inline { width: 100%; }
}


/* ── تنويه محايد ────────────────────────────────────────────────────────────
   ⭐ ليس كل ما يشرح تحذيرا. كان الشرح الدائم في شاشة الطاقم يوضع في
   `draft-note` الكهرمانية، فيقرأ عطلا قائما كل مرة تفتح فيها الشاشة —
   ومن رأى الكهرماني ولم يجد ما يصلحه تعلم أن يتجاهله، **فضاع معه التحذير
   الحقيقي حين وقع**. فالكهرماني للتحذير وحده، وهذا لما يشرح ولا ينذر.
   والتباين مقيس: نص المتن على أرضيته 15.71، والخافت 5.29. */
.note {
  background: var(--teal-50); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--teal-400);
  border-radius: 8px; padding: 14px 18px; margin-bottom: var(--gap-block);
  font-size: var(--fs-md); line-height: 1.9;
}
.note > :first-child { margin-top: 0; }
.note > :last-child  { margin-bottom: 0; }
.note p + p { margin-top: var(--sp-2); }


/* ── ختم وقت ────────────────────────────────────────────────────────────────
   ⭐ فخ اتجاه حقيقي وقع في هذه الشاشة وقيس بالعين: `2026-09-01 09:46` داخل
   فقرة عربية يظهر **`09:46 2026-09-01`** — التاريخ والوقت مقلوبان.

   والسبب أن الفراغ بينهما حرف محايد، فيقرأ خوارزم الاتجاه الجانبين مقطعين
   رقميين مستقلين ويرتبهما من اليمين. و`unicode-bidi: isolate` وحده لا يكفي:
   هو يعزل المقطع عما حوله ولا يضبط ترتيب ما بداخله. فيلزم `direction: ltr`
   على الحاوية نفسها.

   ولذلك هو صنف على `<span>` داخل الخلية لا على الخلية: `direction: ltr` على
   `<td>` يقلب معها `text-align: start` إلى اليسار، فتنحرف محاذاة العمود كله. */
.stamp {
  display: inline-block; direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   بطاقة في كشف — نمط واحد تكرر في خمس شاشات باجتهاد خمس مرات
   ═══════════════════════════════════════════════════════════════════════════
   السوق · المحللون · السياسات · طلبات الإغلاق · العروض: كلها تعرض كشفا من
   بطاقات، وكل بطاقة عنوان يربط ثم سطر بيانات ثم متن. وكانت كل شاشة تكتب
   المقادير بيدها (`margin:0 0 6px` هنا و`margin:0 0 10px` هناك، ولون الرابط
   وإلغاء تسطيره في ثلاثة مواضع) — فاختلف الإيقاع بين كشف وكشف بلا سبب.
   ─────────────────────────────────────────────────────────────────────────── */
.list-card > h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); line-height: 1.5; }
.list-card > h2 a { color: var(--teal-700); text-decoration: none; }
.list-card > h2 a:hover { color: var(--teal-900); text-decoration: underline; }
.list-card > h2 a:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 3px; border-radius: 4px; }
.list-card > p { margin: 0 0 var(--sp-3); }
.list-card > :last-child { margin-bottom: 0; }

/* نص إقرار السرية: سطر مريح لنص قانوني يقرأ كاملا لا يمسح بالعين. */
.nda-body { line-height: 2; }

/* ── مقادير هامش معدودة ────────────────────────────────────────────────────
   ما بقي بعد نقل الأنماط المضمنة إلى مكوناتها: مواضع مفردة لا يجمعها مكون،
   فتؤخذ من سلم التباعد بدل رقم يكتب في القالب. وهي ثلاثة لا تزيد — وكل
   زيادة عليها علامة على مكون لم يعرف بعد. */
.mt-1 { margin-top: var(--sp-1); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mb-2 { margin-bottom: var(--sp-2); }


/* ── هدف اللمس يقاس بالإصبع لا بعرض الشاشة ─────────────────────────────────
   كان رفع `.btn-sm` إلى ٤٤ بكسلا معلقا على `max-width: 640px` وحدها، فقياسه
   عرض النافذة لا وسيلة الإدخال. واللوح ذو الشاشة اللمسية — وحاسوب محمول
   بشاشة لمس — يفتح اللوحة على ١٠٢٤ فيصيب أزرارا ارتفاعها ٣٩ بإصبعه.

   و`pointer: coarse` يسأل السؤال الصحيح: **بأي شيء يشير المستخدم؟** */
@media (pointer: coarse) {
  .btn-sm, .dot, .pw-toggle { min-height: 44px; }
}

/* الأيقونة المضمنة في متن نص تجلس على خط الأساس البصري لا على خط الكتابة.
   ولا أثر لهذا داخل الأزرار والحوامل المرنة — `vertical-align` لا يعمل فيها. */
.i { vertical-align: text-bottom; }
/* علامة الإتمام داخل قرص الخطوة: تملأ القرص ولا تجلس في ركنه. */
.i-check { width: 15px; height: 15px; vertical-align: middle; }


/* ═══════════════════════════════════════════════════════════════════════════
   طبقة 2026-09-24 — قرارات المالك في هذه الجلسة
   ═══════════════════════════════════════════════════════════════════════════

   أربعة مطالب: لون ثان لا لون واحد · قوائم أحسن · شاشة دخول متوسطة تعمل على
   الجوال · ولوحة إشراف بقائمة جانبية على اليمين. وكلها هنا في موضع واحد
   يقرأ معا، لا موزعة على أقسام الملف القديمة.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── درج القائمة على الجوال ────────────────────────────────────────────────
   الزر يبنى بجافاسكربت ويضع `data-nav-js` على الترويسة، والإخفاء كله معلق
   على تلك السمة. فمن عطل الجافاسكربت يرى القائمة كاملة كما كانت — ولا يرى
   زرا لا يفعل شيئا. */
@media (max-width: 880px) {
  .top[data-nav-js] .menu-toggle { display: inline-flex; }
  .topbar { gap: 10px; }

  .top[data-nav-js] .nav {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    padding: 10px 14px 16px;
    /* الإخفاء بالقص لا بـ`display`: الانزلاق يحتاج ارتفاعا يتحرك. */
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .38s var(--ease-out), visibility 0s linear .38s;
  }
  .top[data-nav-js] .nav[data-open] {
    max-height: 70vh; overflow-y: auto; visibility: visible;
    transition: max-height .42s var(--ease-out), visibility 0s;
  }
  .top[data-nav-js] .nav a:not(.btn),
  .top[data-nav-js] .nav .linkish {
    justify-content: flex-start; border-radius: 12px; min-height: 48px;
  }
  .top[data-nav-js] .nav .btn { margin-top: 6px; width: 100%; }
  .top[data-nav-js] .nav form.inline { display: block; }
  .top[data-nav-js] .nav .linkish { width: 100%; justify-content: flex-start; }
  .brand-tag { display: none; }
}

/* ── شاشات الدخول والتسجيل ─────────────────────────────────────────────────
   ⭐ الشكوى: «الشاشة تحتاج أن تتوسط المتصفح». وكانت تبدأ من أعلى الصفحة
   فيبقى تحتها فراغ طويل، والنموذج بعرض المتن كله فتقرأ الحقول ممتدة بلا
   سبب. وهنا الشاشة لوحان: هوية إلى اليمين ونموذج إلى اليسار — وعلى الجوال
   يطوى لوح الهوية إلى شريط واحد فوق النموذج، ولا يحذف: هو ما يقول للداخل
   أين هو. */
.main-auth {
  display: grid; place-items: center;
  min-height: calc(100vh - 340px);
  padding-block: clamp(20px, 5vh, 54px);
}
.main-auth > :last-child { width: 100%; }

.auth-shell {
  width: 100%; max-width: 940px; margin-inline: auto;
  display: grid; grid-template-columns: .82fr 1fr;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-3);
}

.auth-side {
  position: relative; color: #fff;
  padding: 38px 32px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(62, 144, 144, .55), transparent 62%),
    radial-gradient(90% 90% at 0% 100%, rgba(226, 163, 60, .28), transparent 60%),
    linear-gradient(200deg, var(--teal-900), var(--teal-800));
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.auth-side::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("/assets/img/pattern.svg");
  background-size: 420px; opacity: .06;
}
.auth-side > * { position: relative; z-index: 1; }
.auth-side-logo img { height: 30px; width: auto; filter: brightness(0) invert(1); }
.auth-side h2 { font-size: 23px; margin: 0; color: #fff; line-height: 1.5; }
.auth-side p { color: #cfe4e2; font-size: var(--fs-md); margin: 0; }
.auth-points { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 11px; }
.auth-points li {
  display: flex; gap: 10px; align-items: flex-start;
  color: #e6f2f1; font-size: var(--fs-md); line-height: 1.6;
}
.auth-points li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 9px;
  border-radius: 2px; background: var(--gold-500);
}

.auth-form { padding: 38px 34px; display: flex; flex-direction: column; justify-content: center; }
.auth-form h1 { font-size: 26px; margin-bottom: 6px; }
.auth-form .lede { margin-bottom: 20px; font-size: var(--fs-md); }
.auth-form label:first-of-type { margin-top: 0; }
.auth-form input[type=email], .auth-form input[type=password], .auth-form input[type=text] {
  padding: 12px 14px; border-radius: 12px;
}
.auth-form .actions { margin-top: 20px; }
.auth-form .btn { border-radius: var(--radius-pill); }
.auth-submit { width: 100%; padding-block: 13px; font-size: 16px; }
.auth-links {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px;
  font-size: var(--fs-sm);
}
.auth-links a { color: var(--teal-700); font-weight: 600; text-decoration: none; }
.auth-links a:hover { color: var(--teal-900); text-decoration: underline; }

/* فاصل «أو» بخطين — البابان متساويان في المرتبة، فلا يقرأ الثاني ذيلا للأول. */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 16px; color: var(--muted); font-size: var(--fs-sm);
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* زر الباب الثاني: هوية العضوية. أبيض محاط لا مصمت — فالفعل الرئيس في
   الشاشة واحد، وهذا بديل عنه لا منافس له. */
.auth-sso {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 50px; padding: 12px 18px;
  background: #fff; color: var(--teal-800);
  border: 1.5px solid var(--teal-300); border-radius: var(--radius-pill);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .22s var(--ease-out), border-color .22s var(--ease-out),
              transform .22s var(--ease-spring), box-shadow .22s var(--ease-out);
}
.auth-sso:hover {
  background: var(--teal-50); border-color: var(--teal-500);
  transform: translateY(-2px); box-shadow: var(--shadow-2);
}
.auth-sso:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.auth-sso img { height: 22px; width: auto; }

/* حالة «هويتك معروفة»: تظهر فوق النموذج حين تكون كعكة العضوية قائمة أصلا،
   أو حين يعود الداخل من بوابة العضوية في تبويب آخر. */
.auth-known {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--teal-50); border: 1px solid var(--teal-200);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 20px;
}
.auth-known .who { flex: 1; min-width: 180px; font-size: var(--fs-md); }
.auth-known .who b { display: block; color: var(--teal-900); }
.auth-known .who span { color: var(--muted); font-size: var(--fs-sm); }
.auth-known .btn { flex: none; }
.auth-known-wait { background: var(--gold-50); border-color: var(--gold-300); }

/* نبض انتظار العودة من بوابة العضوية. */
.auth-pulse {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--gold-700); font-size: var(--fs-sm); font-weight: 600;
}
.auth-pulse::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-500); animation: authPulse 1.4s var(--ease-out) infinite;
}
@keyframes authPulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(226, 163, 60, .55); }
  70%      { opacity: .7; box-shadow: 0 0 0 9px rgba(226, 163, 60, 0); }
}

@media (max-width: 860px) {
  .main-auth { min-height: auto; padding-block: 8px 24px; }
  .auth-shell { grid-template-columns: 1fr; border-radius: var(--radius-lg); }
  .auth-side { padding: 22px; gap: 12px; }
  .auth-side h2 { font-size: 19px; }
  /* على الجوال يبقى من لوح الهوية سطراه الأولان — ثلاث نقاط تحت شعار
     في شاشة ٦٤٠ بكسلا تدفع الحقول تحت الطية. */
  .auth-points { display: none; }
  .auth-form { padding: 24px 20px 28px; }
  .auth-form h1 { font-size: 23px; }
}


/* ── لوحة الإشراف: قائمة جانبية على اليمين ─────────────────────────────────
   ⭐ الشكوى: الروابط كانت تسع أزرار متساوية في أسفل اللوحة، فلا يعرف المشرف
   أين هو الآن ولا ما الذي تحت يده أصلا حتى يفتح اللوحة الرئيسة ويقرأها.
   والقائمة الجانبية تعلن الموضع والمدى معا في كل شاشة، وتبقى ثابتة مع
   التمرير. وهي على **اليمين** لأن الصفحة عربية: العين تبدأ من هناك.

   والتخطيط `grid` بعمودين، وأول عمود في مستند `dir=rtl` هو اليمين — فلا
   يكتب `right` في موضع واحد هنا، ولا ينقلب شيء لو قلبت اللغة يوما. */
.admin-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 24px; align-items: start;
}

.side {
  position: sticky; top: 88px;
  border-radius: var(--radius-xl); overflow: hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(62, 144, 144, .5), transparent 60%),
    linear-gradient(190deg, var(--teal-900), #14353f);
  color: #fff; box-shadow: var(--shadow-2);
  max-height: calc(100vh - 110px); overflow-y: auto;
  scrollbar-width: thin;
}

/* بطاقة الهوية: من أنت، وبأي مستوى تعمل — أكثر سؤالين يسألان في لوحة
   تعطي صلاحيات متفاوتة. */
.side-id {
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .12);
}
.side-id .who { font-weight: 700; font-size: var(--fs-md); line-height: 1.5; }
.side-id .meta { color: #a9cbc9; font-size: var(--fs-xs); margin-top: 3px; }
.side-id .tag { margin-top: 9px; }

.side-nav { padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.side-group {
  margin: 14px 10px 6px; padding: 0;
  font-size: var(--fs-xs); font-weight: 700; color: #8fb6b4;
  letter-spacing: .02em;
}
.side-nav > .side-group:first-child { margin-top: 4px; }

.side-link {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px;
  color: #dcecea; text-decoration: none; font-size: var(--fs-md); font-weight: 600;
  border-radius: 12px;
  transition: background-color .22s var(--ease-out), color .22s var(--ease-out);
}
.side-link .i { width: 18px; height: 18px; opacity: .85; flex: none; }
.side-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.side-link:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -2px; }
.side-link[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
.side-link[aria-current="page"] .i { opacity: 1; }
/* الشريط الكهرماني على حافة البداية — علامة الموضع الجاري. */
.side-link[aria-current="page"]::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 3px; background: var(--gold-500);
}
/* عداد صغير على الرابط: ما ينتظر عملا يقرأ من القائمة بلا فتح الشاشة. */
.side-link .count {
  margin-inline-start: auto; min-width: 22px; padding: 1px 7px;
  background: var(--gold-500); color: var(--on-gold);
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700;
  text-align: center;
}
.side-link .count-quiet { background: rgba(255, 255, 255, .16); color: #e6f2f1; }

.side-foot {
  margin: 6px 10px 0; padding: 12px 12px 4px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.side-foot a { color: #a9cbc9; font-size: var(--fs-sm); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; }
.side-foot a:hover { color: #fff; }

/* زر فتح الدرج على الجوال — يبنى بجافاسكربت، فلا يوجد زر بلا ما يفتحه. */
.side-toggle {
  display: none; align-items: center; gap: 9px;
  width: 100%; min-height: 48px; margin-bottom: 16px; padding: 10px 16px;
  background: var(--card); color: var(--teal-800);
  border: 1px solid var(--line); border-radius: 14px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.side-toggle:hover { background: var(--teal-50); }
.side-scrim {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(10, 30, 35, .5); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.side-scrim[data-open] { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; gap: 0; }
  .admin-shell[data-side-js] .side-toggle { display: flex; }

  /* الدرج ينزلق من جهة بداية السطر — وهي اليمين في صفحة عربية. */
  .admin-shell[data-side-js] .side {
    position: fixed; z-index: 59; inset-block: 0; inset-inline-start: 0;
    width: min(318px, 88vw); max-height: none; border-radius: 0;
    transform: translateX(100%);
    transition: transform .36s var(--ease-out);
    box-shadow: none;
  }
  .admin-shell[data-side-js] .side[data-open] { transform: translateX(0); box-shadow: var(--shadow-3); }
  .side-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-inline-start: auto;
    background: rgba(255, 255, 255, .12); border: 0; border-radius: 10px;
    color: #fff; cursor: pointer;
  }
  .side-id { display: flex; align-items: flex-start; gap: 10px; }
  .side-id > div { flex: 1; }
}
/* بلا جافاسكربت تبقى القائمة في مكانها من تدفق الصفحة: فوق المحتوى، مقروءة. */
@media (max-width: 900px) {
  .admin-shell:not([data-side-js]) .side { position: static; max-height: none; margin-bottom: 20px; }
}
.side-close { display: none; }
@media (max-width: 900px) { .admin-shell[data-side-js] .side-close { display: inline-flex; } }

/* ── بطاقات «ما ينتظر قرارا» في لوحة الإشراف ───────────────────────────────
   الرقم أولا ثم ما هو، ثم سهم إلى شاشته. وما ينتظر فعلا يلبس الكهرماني،
   والصفر يبقى هادئا — **فاللون هنا حالة لا زينة**: العين تمسك ما له عمل
   قبل أن تقرأ رقما. */
.queue-grid {
  display: grid; gap: var(--sp-4); margin-bottom: var(--gap-block);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.queue-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease-out),
              border-color .28s var(--ease-out);
}
.queue-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--teal-400); }
.queue-card:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.queue-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--teal-50); color: var(--teal-700);
}
.queue-icon .i { width: 22px; height: 22px; }
.queue-text { display: flex; flex-direction: column; line-height: 1.35; }
.queue-text b { font-size: 28px; color: var(--teal-800); }
.queue-text span { color: var(--muted); font-size: var(--fs-md); }
.queue-go { margin-inline-start: auto; color: var(--teal-500); }
.queue-card.is-due { border-color: var(--gold-300); background: var(--gold-50); }
.queue-card.is-due .queue-icon { background: var(--gold-100); color: var(--gold-700); }
.queue-card.is-due .queue-text b { color: var(--gold-700); }
.queue-card.is-due .queue-go { color: var(--gold-600); }

/* المحتوى داخل قشرة الإشراف يرث نظافة حواف المتن نفسها. */
.admin-main > :last-child { margin-bottom: 0; }
.admin-main > .page-head:first-child { margin-top: 0; }

/* ── لهجة اللون الثاني في الواجهة العامة ───────────────────────────────────
   قرار المالك: «ليس بالضرورة المنصة أن تكون لونا واحدا». وهذه الكتلة هي
   كل ما يلزم لذلك — لا لوحة ثانية موازية، بل **لهجة**: الفعل الرئيس،
   وعلامة العنوان، وهالة في ركن الواجهة، وسطح دافئ يفصل قسمين. */

/* أزرار مستديرة الحافة: الطابع كله يتبدل بسطر واحد، والقاعدة من موضع
   واحد فلا تنجرف بين شاشة وأخرى. */
.btn, .btn-sm, .btn-lg { border-radius: var(--radius-pill); }

/* الفعل الرئيس: كهرماني مصمت. ولا يكون في الشاشة إلا واحد. */
.btn-gold { background: var(--gold-500); color: var(--on-gold); box-shadow: 0 12px 26px -12px rgba(184, 121, 31, .9); }
.btn-gold:hover { background: var(--gold-600); color: #fff; }
.btn-gold:focus-visible { outline: 3px solid var(--gold-600); outline-offset: 2px; }

/* هالة ثالثة في الواجهة — كهرمانية باهتة في الركن البعيد عن النص، فلا
   تنقص تباينا ولا تنافس الرسم. */
.aura-c {
  width: 300px; height: 300px; inset-inline-end: 12%; top: -120px;
  background: radial-gradient(circle, rgba(226, 163, 60, .34), transparent 66%);
}
.js-motion .aura-c { animation: drift-a 27s ease-in-out infinite reverse; }

/* علامة العنوان تتدرج من التركوازي إلى الكهرماني — وهي أصغر موضع يقرأ فيه
   اللونان معا، فتقرأ الصفحة نظاما لا لونين متجاورين. */
.sec-title::before { background: linear-gradient(to left, var(--gold-500), var(--teal-700)); }

/* شارة الشعار في الواجهة: حافة كهرمانية — ولا أيقونة فيها. */
.hero-slogan { border-color: rgba(226, 163, 60, .45); }

/* سطح دافئ لقسم يفصل قسمين تركوازيين. يبتلع حشو المتن ليمتد من حافة إلى
   حافة، كما يفعل الهيرو. */
.sec-warm {
  position: relative;
  margin-inline: -20px; padding: clamp(34px, 5vw, 56px) 20px;
  background: linear-gradient(180deg, var(--sand), #fff);
  border-block: 1px solid #efe6d8;
}
@media (max-width: 640px) { .sec-warm { margin-inline: -14px; padding-inline: 14px; } }

/* مفتاح إظهار كلمة المرور: هادئ داخل الحقل لا صندوق ثان بجانبه. */
.pw-toggle {
  background: transparent; border-color: transparent; color: var(--teal-700);
  border-radius: var(--radius-pill); font-weight: 600;
}
.pw-toggle:hover { background: var(--teal-100); color: var(--teal-900); border-color: transparent; }
.auth-form .pw-field-ready > input { padding-inline-end: 82px; }

/* أسطر الزر في فاتح الدرج الجانبي — النمط كان معلقا على `.menu-toggle` وحدها،
   فظهر هنا خطا واحدا بلا شكل. والشكل يوصف مرة لكل من يستعمله. */
.side-toggle .bars {
  position: relative; display: block; flex: none;
  width: 18px; height: 2px; background: currentColor; border-radius: 2px;
}
.side-toggle .bars::before, .side-toggle .bars::after {
  content: ""; position: absolute; inset-inline: 0; height: 2px;
  background: currentColor; border-radius: 2px;
}
.side-toggle .bars::before { top: -6px; }
.side-toggle .bars::after  { top: 6px; }

/* ── شاشة اختيار الصفة ─────────────────────────────────────────────────────
   بطاقتان متساويتان في الوزن البصري ومختلفتان في الفعل: الكهرماني للمسار
   الذي تريده المنصة أكثر (محلل مجاز)، والتركوازي للآخر. */
.auth-wide { width: 100%; max-width: 900px; margin-inline: auto; text-align: center; }
.auth-wide > .lede { margin-inline: auto; }
.choose-grid {
  display: grid; gap: 20px; margin: 30px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.choose-card {
  text-align: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 28px 26px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out), border-color .3s;
}
.choose-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--teal-300); }
.choose-card h2 { margin: 0; font-size: 21px; color: var(--teal-900); }
.choose-card > p { margin: 0; color: var(--muted); }
.choose-card .pane-list { margin: 6px 0 0; }
.choose-card .btn { margin-top: auto; align-self: flex-start; }
.choose-icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 16px; background: var(--teal-100); color: var(--teal-700);
}
.choose-icon .i { width: 24px; height: 24px; }
.choose-card:first-child .choose-icon { background: var(--gold-100); color: var(--gold-700); }
.auth-links-center { justify-content: center; }

/* عنوان شاشة مصادقة بلا لوحين يتوسط: الشاشة كلها متوسطة، فعنوان محاذ
   إلى الحافة يقرأ منفصلا عما تحته. */
.main-auth > .auth-wide h1, .main-auth > .card + h1 { text-align: center; }

/* ── «بأي صفة تدخل؟» — بطاقتا اختيار الصفة ─────────────────────────────────
   من كان مشرفا وله حساب منصة ببريده نفسه يسأل بأيهما يدخل، بدل أن تختار
   الشاشة عنه. والبطاقتان متساويتان في الوزن: ليس لإحداهما أفضلية. */
.role-pick { display: grid; gap: 12px; margin: 22px 0 6px; }
.role-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; text-align: start; font: inherit; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform .26s var(--ease-spring), box-shadow .26s var(--ease-out),
              border-color .26s var(--ease-out);
}
.role-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--teal-400); }
.role-card:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.role-icon {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: 14px; background: var(--teal-100); color: var(--teal-700);
}
.role-icon-gold { background: var(--gold-100); color: var(--gold-700); }
.role-icon .i { width: 21px; height: 21px; }
.role-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.role-text b { color: var(--teal-900); font-size: var(--fs-base); }
.role-text span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; }
.role-go { margin-inline-start: auto; color: var(--teal-500); flex: none; }
.role-card:hover .role-go { color: var(--teal-700); }
/* النموذج المطوي خلف الاختيار: فاصل يقول إنه تابع للبطاقة لا بداية جديدة. */
.role-form { margin-top: 18px; padding-top: 4px; border-top: 1px dashed var(--line); }

/* ── أقسام الصفحة الأولى في الترويسة ───────────────────────────────────────
   روابط تنقل داخل الصفحة. تبدو أخف من روابط المسارات: وزنها وظيفي لا
   ملاحي — فالمسارات تنقل بين صفحات، وهذه تنقل داخل صفحة واحدة. */
.nav-sections { display: inline-flex; align-items: center; gap: 2px; }
.nav-rule { width: 1px; height: 22px; background: var(--line); margin-inline: 8px; }
.nav .nav-jump {
  font-weight: 600; color: var(--muted);
  padding-inline: 11px; font-size: 14.5px;
}
.nav .nav-jump:hover { color: var(--teal-700); background: var(--teal-50); }
/* القسم الذي يقرؤه الزائر الآن — يوضع من `app.js` عند التمرير. */
.nav .nav-jump.is-here { color: var(--teal-900); background: var(--teal-50); }
.nav .nav-jump.is-here::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-500); margin-inline-end: 7px;
}

/* التمرير إلى قسم لا يخفيه تحت الترويسة اللاصقة. */
html { scroll-behavior: smooth; }
.sec[id], .hero { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 880px) {
  /* في الدرج تصير الأقسام قائمة رأسية كبقية الروابط، ويسقط الفاصل. */
  .top[data-nav-js] .nav-sections { flex-direction: column; align-items: stretch; gap: 2px; }
  .top[data-nav-js] .nav-rule { width: auto; height: 1px; margin: 8px 0; }
  .top[data-nav-js] .nav .nav-jump { min-height: 46px; border-radius: 12px; }
}

/* ⚠️ والترويسة كانت تلف سطرين بعد إضافة الأقسام (مقيس: ارتفاع ٦٧ بدل ٤٤،
   وعنصران في سطر ثان). وثلاثة إصلاحات معا لا واحد:
     - شريط الترويسة وحده يتسع إلى ١١٨٠ كما في مثال StrategizePro، والمتن
       يبقى على ١٠٦٠ لأن عرض السطر المريح للعربية لا يتغير.
     - حشو أضيق لروابط الأقسام.
     - وتحت ١١٢٠ بكسلا **تسقط الأقسام من الشريط وتبقى في الدرج** — فالمساحة
       لا تتسع لتسعة روابط، ولف الترويسة سطرين أسوأ من قائمة في درج. */
.top .topbar { max-width: 1180px; }
.nav .nav-jump { padding-inline: 9px; font-size: 14px; }
@media (max-width: 1119px) {
  .top .nav-sections, .top .nav-rule { display: none; }
}
@media (max-width: 880px) {
  /* وفي الدرج تعود الأقسام: المساحة هناك رأسية لا أفقية. */
  .top[data-nav-js] .nav[data-open] .nav-sections,
  .top[data-nav-js] .nav[data-open] .nav-rule { display: flex; }
}

/* ── رسم البطاقة ───────────────────────────────────────────────────────────
   شريط بصري أعلى البطاقة يمتد إلى حوافها — والأيقونة تركب على حافته السفلى
   فتربط الرسم بالنص تحته بدل أن يقرآ شيئين متجاورين. */
.pane-art { padding-top: 0; overflow: hidden; }
.card-art {
  display: block; margin: 0 -26px 0; height: 132px;
  background: var(--teal-50);
}
.card-art svg { display: block; width: 100%; height: 100%; }
.pane-art .pane-icon {
  margin-top: -26px; position: relative; z-index: 1;
  background: #fff; box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}
.pane-art:hover .pane-icon { background: var(--teal-700); border-color: var(--teal-700); }
.pane-art h2, .pane-art h3 { margin-top: 14px; }
/* الرسم يقترب قليلا عند المرور — حياة لا حركة تشتت. */
.card-art svg { transition: transform .6s var(--ease-out); transform-origin: 50% 40%; }
.pane-art:hover .card-art svg { transform: scale(1.04); }
@media (max-width: 640px) { .card-art { margin-inline: -16px; height: 118px; } }

/* وبطاقتا الرؤية والرسالة بلا أيقونة، فيعود لعنوانهما هامشه الطبيعي. */
.pane-art > .card-art + h2 { margin-top: 20px; }