/* ══════════════════════════════════════════════════════════
   بيان — screens.css
   ما يخصّ شاشة بعينها. مرتّبة بترتيب رحلة الطالب:
   البوابة ← المواد ← الدروس ← الدرس ← الاختبار ← النتيجة
   ← الإرشاد ← المحادثة ← لوحة المعلم ← لوحة المدير

   ⚠️ الترتيب ليس زينة: حين تتساوى الخصوصية، المتأخّر يغلب.
      فكل قاعدة تنقض ما قبلها موضوعةٌ بعده عمداً — وهي معلَّمة.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   البوابة — عمودان: الهوية يساراً والنموذج يميناً
   ⚠️ النموذج في اليمين لا اليسار خلافاً لمرآة RTL المعتادة: هذا
      إجراءٌ متكرّر لعائدٍ يعرف ما يريد، فيسكن حيث تبدأ العين لا
      حيث تنتهي. والهوية تُرى بالمحيط لا بالتركيز — فمكانها الطرف.
   ⚠️ ولا ألسنة فوق النموذج: اللسان يفرض اختياراً قبل الفهم، ويجعل
      الحالتين متساويتين وهما ليستا كذلك. الداخل أكثر من المسجِّل
      بأضعاف — فله الزرّ الأول، وللمسجِّل زرٌّ تحت فاصل.
   🔴 القول والعيّنة محذوفان مؤقّتاً بانتظار صياغة.
   ══════════════════════════════════════════════════════════ */
body.gate header{display:none}
/* ⚠️ الغلاف بلا عرضٍ أقصى ولا حشوٍ جانبيّ في البوابة وحدها: اللوحة
   الكحليّة تبلغ حافّة الشاشة، والحشو يعود إلى عمود النموذج وحده.
   🔴 و padding-bottom يُصفَّر هنا وحدها: body تحمل ‎90px‎ في أسفلها
      لتتنفّس الشاشاتُ الطويلة فوق ما يعلوها من عناصر ثابتة. وهي نافعةٌ
      في كل شاشةٍ تُمرَّر، وضارّةٌ في شاشةٍ ملؤها الشاشة: تُضيف شريطاً
      شاحباً تحت الكحليّ **وشريطَ تمريرٍ لا محتوى وراءه**. */
body.gate .wrap{max-width:none;padding:0}
body.gate{padding-bottom:0}

/* 🔴 والتذييل يقع في الفخّ نفسه: البوابة ‎100vh‎ على الشاشات الواسعة،
   وعنصرٌ في المجرى تحتها يُضيف **شريطَ تمريرٍ لا محتوى وراءه** — وهو
   عينُ ما صُفِّر من أجله padding السفليّ أعلاه. ويُلصق بأسفل **عمود
   النموذج وحده** لا عرضَ الشاشة: لونُه معايَرٌ على الورق، ولو امتدّ
   تحت اللوحة الكحليّة لاختفى فيها.

   🔴 **وكان `position:fixed` فطفا (b92):** المثبَّتُ مربوطٌ بالشاشة لا
      بالمستند. فإذا كُبِّر العرضُ أو صَغُر صار عمودُ النموذج أطولَ من
      الشاشة، **فلا يتحرّك التذييل مع ما تحته** — يبقى معلّقاً فوق
      الحقول ولا يثبت في موضعه من الصفحة.
   ⇒ **عمودٌ مرن بدل التثبيت:** `body` يملأ الشاشة، والبوّابة تأخذ ما
     بقي منها، والتذييل يتبعها في المجرى. فالمجموع ‎100vh‎ بالضبط حين
     يتّسع — **فلا شريط تمرير، وهي علّة التثبيت الأصلية** — ويكبر
     الجميعُ معاً حين يضيق فيُمرَّر كما يُمرَّر أيُّ محتوى.
   ⚠️ و‎margin-inline-end:auto‎ تُبقيه في جهة "form": في RTL البدايةُ
      يميناً، وهي موضع النموذج في الشبكة. */
@media(min-width:900px){
  body.gate{display:flex;flex-direction:column;min-height:100vh}
  /* 🔴 و`margin-inline:0` ليست زينة — قِيس أنّ غيابها يكسر الصفحة:
     `.wrap` تحمل `margin:0 auto` من base.css. ولمّا صار `body.gate`
     عموداً مرناً صارت `.wrap` عنصراً مرناً، **والهوامشُ التلقائية في
     المحور العرضيّ تُلغي `stretch`** ⇒ تنكمش إلى عرض محتواها وتتوسّط.
     فانكمشت الشبكةُ (قيس: ٢٢٤←١١٧٦ في شاشة ١٤٠٠)، فلم تبلغ اللوحةُ
     الكحليّة الحافّة، **ولم يعد نصفُ الصفحة يطابق عمودَ النموذج** —
     فبدا التذييل موسَّطاً على الصفحة لا على عموده (انحراف ١١٢px). */
  body.gate .wrap{flex:1 1 auto;display:flex;flex-direction:column;
    min-height:0;width:100%;margin-inline:0}
  body.gate .gatex{flex:1 1 auto;min-height:0}
  body.gate .site-foot{flex:0 0 auto;width:50%;padding:0 18px 14px;
    margin-inline-end:auto}

  /* 🔴 وثمنٌ ظهر بالقياس فدُفع: التذييلُ في المجرى يأخذ شريطاً أسفلَ
     الشبكة، فتقصر اللوحة الكحليّة عن حافّة الشاشة (قيس: ٦٣٦ من ٧٢٠)
     **فيظهر تحتها شريطٌ شاحب** — وهو بعينه ما صُفِّر من أجله padding
     السفليّ في رأس هذا الملفّ.
     ⇒ خلفيّةُ body تُكمل النصفَ الكحليّ تحت الشبكة.
     ⚠️ وليست تدرّجاً وإن كُتبت بـ‎linear-gradient‎: حدٌّ قاطعٌ عند ٥٠٪
        ⇒ نصفان مصمتان. (كان العلّةَ التقنيةَ ثقوبُ الوردمارك القديم
        التي تُملأ بلونٍ مطابق — زالت الثقوب مع علامة ٢٠٢٦ وبقي
        النصفان المصمتان قراراً تصميمياً.)
     ⚠️ و‎to left‎ لأنّ "say" يقع يساراً في شبكة RTL (‎"form say"‎). */
  body.gate{background:linear-gradient(to left,
    var(--page) 0 50%, var(--brand-navy) 50% 100%)}
}

.gatex{display:grid;grid-template-columns:1fr;gap:0;
  grid-template-areas:"say" "form"}
/* لوحة الهوية — كحليّةٌ ممتدّة حافّةً لحافّة، وهي أوّل مواضع الكحليّ خارج
   الشعار (راجع --brand-navy في base.css).
   ⚠️ **ممتدّةٌ لا بطاقة**: البطاقة المحتواة بنصف قطرٍ وظلّ بدت مقطوعةً
      — مستطيلٌ كحليٌّ معلَّقٌ بلا سبب. واللوحة الممتدّة تُقرأ قراراً:
      نصفٌ للهوية ونصفٌ للإجراء، وهو نمط شاشات الدخول المعروف.
   ⚠️ ولونٌ مصمت لا تدرّج — قرارُ اللوحة الممتدّة نفسُه. (وكان للمصمت
      سببٌ تقنيّ أيضاً أيامَ الوردمارك ذي الثقوب — انظر --logo-hole في
      base.css؛ علامة ٢٠٢٦ ضرباتٌ بلا ثقوب فلم يبقَ إلا القرار.) */
.gate-say{grid-area:say;text-align:center;background:var(--brand-navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(40px,11vw,72px) 24px}
/* الشعار على الكحليّ: حبرُه أبيض — ولا يتبع سِمة الصفحة، لأن خلفيّته
   المحليّة كحليّةٌ ثابتة في السِمتين معاً. (وسطر BAYAN يرث اللون من
   --logo-ink نفسها فيبيضّ معه، والورقتان هويةٌ ثابتة لا تتغيّر.) */
.gate-say .brand.hero{--logo-ink:#fff;margin-bottom:0}
.gate-say .brand.hero .brand-slogan{color:rgba(255,255,255,.78)}
/* ⚠️ والحشو السفليّ انتقل من body إلى هنا: هو حقُّ عمود النموذج وحده،
   فلا يلوّث اللوحة الكحليّة بشريطٍ شاحب تحتها. */
.gate-form{grid-area:form;width:100%;max-width:410px;margin-inline:auto;
  padding:clamp(26px,6vw,38px) 18px 44px}

/* فاصلٌ لا كلمة فيه: وظيفته أن يقول «انتهى الإجراء الأول» */
.gate-sep{height:1px;background:var(--line);margin:20px 0 16px}

/* الإجراء الثانوي — مرئيٌّ تماماً وغيرُ منافس: لونُ الفعل نفسه
   لكن بإطارٍ لا بتعبئة. الوزن البصريّ يتبع الاحتمال لا الأهمية. */
.gate-alt{width:100%;cursor:pointer;border-radius:11px;padding:12px;
  background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);
  font-family:'Almarai';font-weight:800;font-size:var(--fs-ui);
  transition:background .18s}
.gate-alt:hover{background:var(--accent-fill)}
.gate-alt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 🆕 b92 · فاصلُ الطريقين — سطرٌ بكلمةٍ في وسطه.
   🔑 وهو غيرُ `.gate-sep`: ذاك يقول «انتهى الإجراء»، وهذا يقول «طريقٌ
      آخر لنفس الإجراء». وفرقٌ في المعنى يستحقّ فرقاً في الشكل. */
.gate-or{display:flex;align-items:center;gap:12px;margin:14px 0;
  color:var(--text-muted);font-size:var(--fs-tag)}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* 🆕 b91 · مربّعُ الموافقة على سياسة الخصوصية.
   ⚠️ width:auto لازمة: input في base.css عرضُها ١٠٠٪، ومربّعُ اختيارٍ
      بعرض النموذج يُقرأ حقلَ كتابةٍ فارغاً لا مربّعاً يُنقَر.
   🔑 ورابطُ السياسة يأخذ --accent: هو **دعوةٌ إلى نقرة**، وهي جملةُ
      تلك العائلة بعينها (طبقة الأدوار). والنصُّ حوله محايد. */
.pol-ck{display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  margin:14px 0 0;font-size:var(--fs-meta);color:var(--text-muted);line-height:1.8}
.pol-ck input{width:auto;flex:0 0 auto;margin-top:5px;cursor:pointer}
.pol-ck a{color:var(--accent);text-decoration:underline}

/* 🆕 b92 · ونداءٌ على المربّع حين يُردّ فعلٌ لأجله: صار الزرّ الأول
   (Google) يتصدّر الصفحة والمربّعُ تحت النموذج، **فرسالةٌ عابرة تُشير
   إلى ما لا يراه المستخدم**. ⇒ يُمرَّر إليه ويُومَض.
   🔑 واللون `warn` لا `danger`: الجملةُ «انتبه» لا «أخطأتَ» — لم يُخطئ
      أحدٌ، بقي شرطٌ لم يُستوفَ بعد (طبقة الأدوار).
   🆕 b110 · **والصنفُ عُمّم إلى `.ask` وحدها** — صارت منسدلةُ المخاطبة
      تُنادى بالعلّة نفسِها، وقصرُه على `.pol-ck` كان يُلزم بنسخِ
      الإطارِ والحركةِ لكلّ منادًى جديد. */
.ask{animation:polask 1.6s ease-out 1}
@keyframes polask{
  0%,100%{box-shadow:0 0 0 0 transparent}
  12%,62%{box-shadow:0 0 0 3px var(--warn-fill);border-radius:9px}
}
@media(prefers-reduced-motion:reduce){
  .ask{animation:none;box-shadow:0 0 0 3px var(--warn-fill);border-radius:9px}
}

/* 🆕 b110 · قفلُ النموذج حتى يُختار الدور. و`fieldset` أصيلٌ لأنّ
   التعطيلَ فيه **يسري على كلّ حقلٍ بداخله** بلا مرورٍ عليها واحداً
   واحداً — فحقلٌ يُضاف غداً يُقفَل معها بلا أن يتذكّره أحد.
   ⚠️ ونمطُه يُصفَّر كلُّه: المتصفّح يعطيه إطاراً وحشواً وهامشاً، و`min-width`
      ضمنيّةً تمنعه من الانكماش في الشاشات الضيّقة.
   📌 والشحوبُ على المحتوى لا على الحقول وحدها: العنواناتُ والفواصلُ
      تشحب معها، **فيُقرأ القفلُ حالةً للنموذج كلِّه لا عطلاً في حقل**. */
fieldset.gate-lk{border:0;padding:0;margin:0;min-width:0}
fieldset.gate-lk:disabled{opacity:.45}
fieldset.gate-lk:disabled *{cursor:not-allowed}

/* «الدخول بحساب Google» — إجراءٌ موازٍ لا منافس: محايدُ اللون كزرّ
   ثانويّ، والشعارُ يُميّزه. ولا يأخذ --accent فيزاحم الفعل الأول. */
.gate-oauth{width:100%;display:flex;align-items:center;justify-content:center;
  gap:10px;cursor:pointer;border-radius:11px;padding:12px;margin-top:10px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font-family:'Almarai';font-weight:700;font-size:var(--fs-ui);
  transition:border-color .18s}
.gate-oauth:hover{border-color:var(--accent)}
.gate-oauth:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gate-oauth:disabled{opacity:.45;cursor:not-allowed}
.gate-oauth svg{width:18px;height:18px;flex:0 0 auto}

@media(min-width:900px){
  /* نصفان يملآن الشاشة طولاً وعرضاً: الهوية يساراً والنموذج يميناً.
     ⚠️ والنموذج وحده يتوسّط عمودَه (align-self) — اللوحة تمتدّ. */
  .gatex{grid-template-columns:1fr 1fr;grid-template-areas:"form say";
    align-items:stretch;min-height:100vh}
  .gate-say{padding:48px}
  /* المحتوى يكبر مع الشاشة لا يثبت وسط فراغها: العمود نصفُ الشاشة،
     وبطاقةٌ بعرض ٤١٠ فيه تبدو قصاصةً في قاعة. */
  .gate-say .brand.hero .brand-logo{height:clamp(170px,18vw,275px)}
  /* ⚠️ وسطرا النصّ يكبران معها — ٨ أكتوبر. كانت العلامة وحدها تُعطى
     مقاساً أكبر هنا، فيبقى BAYAN عند سقفه (٣٦px) والشعارُ النصّيُّ عند
     سقفه، فتخرج نسبةُ اللوكاب المعتمدة: ٠٫١٥٧ بدل ٠٫٢١١ على علامةٍ
     تبلغ ٢٧٥px. والنِّسَبُ من لوح التصميم: BAYAN ٠٫٢١١ من ارتفاع
     العلامة، والشعار النصّيّ ٠٫١٩٧ — وهي نفسها في base.css لمقاس
     الترويسة. غيّرتَ ارتفاع العلامة هنا؟ غيّر الثلاثة معاً. */
  .gate-say .brand.hero{gap:clamp(17px,1.78vw,27px)}
  .gate-say .brand.hero .brand-latin{font-size:clamp(2.24rem,3.8vw,3.63rem)}
  .gate-say .brand.hero .brand-slogan{font-size:clamp(2.09rem,3.55vw,3.39rem)}
  .gate-form{align-self:center;padding:40px 24px;max-width:480px}
  .gate-form .card{padding:28px 26px}
  .gate-form input{padding:15px 14px}
  .gate-form .btn.primary,
  .gate-form .gate-alt{padding:15px;font-size:var(--fs-read)}
}

/* ═══ البوابة ═══ */
.teachlink{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.teachlink a{color:var(--accent);font-family:'Almarai';font-weight:700;font-size:.83rem;
  cursor:pointer;text-decoration:none;border-bottom:1px dashed var(--accent-edge);padding-bottom:2px}
.teachlink a:hover{border-bottom-style:solid}

/* ══ شبكة الاختيار ══
   🔴 القاعدة تعليمية لا جمالية: **الشبكة تقول «اختر» والعمودُ يقول
      «تابِع»**. فالمواد والمعلمون مجموعةٌ اعتباطية الترتيب ⇒ شبكة.
      أما الدروسُ ومصادرُها فترتيبها **محتوى**: درسٌ يفتح ما بعده،
      ومصدرٌ يُقرأ قبل مصدر. وعرضُها شبكةً يقول للطالب صامتاً إنها
      متكافئة — وتلك كذبةٌ تربوية. فبقيت أعمدة عمداً.
   ⚠️ والبطاقات مسطّحةٌ بلا حاوية، فـ#app هو الشبكة. والقاعدة
      «كلُّ شيءٍ يمتدّ إلا البطاقة» — عكسُها يكسر أوّلَ عنصرٍ جديد
      يُضاف ولا ينتبه له أحد. */
.wrap:has(.subj) #app,
.wrap:has(.mentor) #app{display:grid;gap:10px;align-items:start}
.wrap:has(.subj) #app > *,
.wrap:has(.mentor) #app > *{grid-column:1/-1}
.wrap:has(.subj) #app > .subj:not(.mini),
.wrap:has(.mentor) #app > .mentor{grid-column:auto;margin-bottom:0}

/* ⚠️ مقاسان لا مقاس: بطاقةُ المعلم تحمل سيرةً في أسطر، وبطاقةُ المادة
   صارت عموداً فيه شكلٌ واسمٌ وشريط (b66). فلو جمعهما رقمٌ واحد لضاق
   أحدُهما أو تبدّد الآخر. والمشترَك — الشبكةُ نفسها — بقي مشترَكاً. */
/* ⚠️ stretch لا start لبطاقات المواد: العنوانُ يلتفّ سطرين في مادة
   ولا يلتفّ في أخرى، والشارةُ تظهر هنا وتغيب هناك — فتتفاوت ارتفاعاتُ
   الصفّ الواحد ويبدو مهلهلاً. والممتدّ (grid-column:1/-1) لا يتأثّر:
   كلٌّ منه في صفّه، وارتفاعُ صفّه ارتفاعُه. */
.wrap:has(.subj)   #app{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  align-items:stretch}
.wrap:has(.mentor) #app{grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}

/* ══════════════════════════════════════════════════════════
   المواد — بطاقةٌ عمودية: شكلٌ يقول «أيُّ مادة» ولونٌ يقول «أين أنا»
   (b66)

   🔴 **الشكلُ هوية واللونُ حالة** — ولا يُعكس الدور أبداً.
      لو حملت كلُّ مادةٍ لوناً خاصّاً بها (كما يُغري التصميم) لاستُهلك
      اللونُ في التمييز، ولم يبقَ منه ما يقول للطالب «هذه بدأتَها
      وتلك أوشكت». والطالب يحتاج الثاني كلَّ يوم، والأول مرّةً
      يحفظه بعدها. ⇒ الشكلُ ثابتٌ للمادة، واللونُ يتحرّك بالتقدّم.

   ⚠️ ولا أسرة ألوانٍ جديدة هنا: accent · ok · line وحدها — وكلُّها
      مقيسةٌ لعمى الأحمر والأخضر في base.css. أسرةٌ رابعة تعني
      تحليلَ وصوليةٍ كاملاً، لا اختيارَ درجةٍ تروق.

   🔑 والألوان تُمرَّر بـ--sh-f و--sh-s لا بقواعدَ على العنصر: الشكلُ
      يُرسم في ui.js وهي لا تعرف الحالة، والحالةُ تُحسب في student.js
      وهي لا ترسم. المتغيّر هو المفصِل بينهما.
   ══════════════════════════════════════════════════════════ */
.subj{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:18px 12px 15px;cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.subj:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.07)}
.subj:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.subj.soon{opacity:.5;cursor:default;border-style:dashed}
.subj.soon:hover{border-color:var(--line);transform:none;box-shadow:none}

.subj-t{font-family:'Almarai';font-weight:700;font-size:var(--fs-ui);line-height:1.55}
/* margin-top:auto يُنزل العدّاد وشريطَه إلى قاع البطاقة — فتصطفّ
   الأشرطةُ على خطٍّ واحد في الصفّ، ويُقارَن التقدّمُ بلمحةٍ لا بقراءة. */
.subj-m{font-size:var(--fs-tag);color:var(--text-muted);line-height:1.6;margin-top:auto;
  padding-top:2px}
.subj.mini .subj-m{margin-top:0}
.subj-b{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.subj-d{font-size:var(--fs-meta);color:var(--text);opacity:.72;margin-top:4px;line-height:1.8}
.pbar{height:5px;background:var(--fill-strong);border-radius:99px;overflow:hidden;
  margin-top:3px;width:100%}
.pfill{height:100%;background:var(--track-grad);border-radius:99px;transition:width .5s ease}
.lvl-tag{display:inline-block;background:var(--accent-fill);color:var(--accent);
  font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);padding:2px 9px;border-radius:999px}
.qz-t{font-family:'Almarai';font-weight:700;font-size:var(--fs-read)}
.qz-m{font-size:var(--fs-meta);color:var(--text-muted);margin-top:3px}
.qz-go{font-family:'Almarai';font-weight:800;font-size:var(--fs-meta);color:var(--accent);white-space:nowrap}

/* ── الشكل: يحتضن أيقونة المادة ويأخذ لون الحالة ── */
.sh-wrap{position:relative;width:58px;height:58px}
.sh{width:100%;height:100%;display:block;
  fill:var(--sh-f,var(--fill-strong));stroke:var(--sh-s,var(--line-strong));stroke-width:1.6;
  transition:fill .3s,stroke .3s}
.sh-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;line-height:1;pointer-events:none}

/* ── الحالات — ستٌّ لا اثنتان: «بدأتُ» ليست «أوشكتُ» ──
   ⚠️ والفارق بين active وmid في الشدّة لا في الأسرة: تدرّجٌ داخل
      الأزرق يُقرأ تقدّماً، وقفزةٌ إلى أسرةٍ أخرى تُقرأ تغيّرَ نوع. */
.st-empty {--sh-f:var(--fill);--sh-s:var(--line-strong)}
.st-empty  .subj-t{color:var(--text-muted)}
.st-new   {--sh-f:var(--accent-soft);--sh-s:var(--accent-edge)}
.st-active{--sh-f:var(--accent-soft);--sh-s:var(--accent)}
.st-active .pfill{background:var(--accent-edge)}
.st-mid   {--sh-f:var(--accent-fill);--sh-s:var(--accent)}
.st-mid    .pfill{background:var(--accent)}
.st-near  {--sh-f:var(--ok-soft);--sh-s:var(--ok)}
.st-near   .pfill{background:var(--ok-edge)}
.st-near   .lvl-tag{background:var(--ok-fill);color:var(--ok)}
.st-done  {--sh-f:var(--ok-fill);--sh-s:var(--ok)}
.st-done   .pfill{background:var(--ok)}
.st-done   .lvl-tag{background:var(--ok-fill);color:var(--ok)}
/* المستوى وسمُ هوية لا حكمَ تقدّم ⇒ يبقى accent حيث لم تُبلغ الخضرة */
.st-new .lvl-tag,.st-active .lvl-tag,.st-mid .lvl-tag{background:var(--accent-fill);color:var(--accent)}

/* المكتملة تنكمش سطراً أفقياً — تحتفظ بنتيجتها ولا تُزاحم الحيّ */
.subj.mini{flex-direction:row;text-align:start;justify-content:space-between;
  align-items:center;gap:12px;padding:11px 14px;border-radius:13px;opacity:.6}
.subj.mini:hover{opacity:1;transform:none;box-shadow:none}
.subj.mini .subj-t{font-size:var(--fs-ui)}
.subj.mini .sh-wrap{width:34px;height:34px;flex:0 0 34px}
.subj.mini .sh-icon{font-size:.98rem}

.fold-lbl{font-size:var(--fs-tag);color:var(--text-muted);margin:14px 0 8px;
  padding-right:3px;letter-spacing:.03em}
.grp.fold{cursor:pointer;user-select:none}
.grp.fold .caret{margin-right:auto;font-size:.75rem;color:var(--text-muted);
  transition:transform .22s}
.grp.fold.open .caret{transform:rotate(180deg)}

/* ══════════════════════════════════════════════════════════
   شريط «اليوم» — ثلاثة أفعالٍ فوق قائمة المواد  (b66)

   🔴 **حالتُك قبل قائمتك.** الرئيسةُ كانت جرداً: «هذه موادّك، دبّر
      أمرك». والطالبُ العائد بعد يومين لا يسأل «ما موادّي» بل «بمَ
      أبدأ الآن» — فسؤاله يُجاب في الأعلى قبل أن يُعرض الجرد.

   ثلاثةٌ لا أكثر، وكلٌّ يقابل نوعاً من العمل لا مكاناً في الواجهة:
     تابِع   ← الاستئناف   (أين تركتَ · من localStorage)
     استرجِع ← التباعد     (بطاقاتٌ استحقّت اليوم · counts.due)
     عالِج   ← التشخيص     (ملاحظاتٌ لم تُقرأ · counts.feedback)

   🔑 ولونُ كلٍّ من أسرته لا من ترتيبه: الاستئنافُ تفاعلٌ (accent)،
      والاسترجاعُ إتقانٌ يُبنى (ok)، والعلاجُ تشخيصٌ (dx) — وهي
      نفسها الأسرة التي يراها في شاشة النتيجة. فيتعلّم المعنى
      مرّةً ويقرؤه في كلّ موضع.
   ⚠️ ولا يظهر الشريط ببطاقةٍ صفرية: «لا شيء ينتظرك» يُقال بغياب
      البطاقة لا بصفرٍ يُعرض. وصفرٌ معروضٌ ثلاثَ مرّات كلَّ يوم
      يُدرِّب على ألّا يُنظر إلى الشريط أصلاً.
   ══════════════════════════════════════════════════════════ */
.today{display:flex;gap:9px;flex-wrap:wrap;margin:2px 0 4px}
.today-act{flex:1 1 128px;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:6px;padding:14px 10px;border-radius:15px;text-align:center;
  background:var(--surface);border:1px solid var(--line);cursor:pointer;
  font-family:inherit;color:var(--text);
  transition:border-color .18s,box-shadow .18s,transform .18s}
.today-act:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.today-act:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ta-ic{width:38px;height:38px;border-radius:11px;display:flex;
  align-items:center;justify-content:center}
.ta-ic .ic{width:21px;height:21px}
.ta-lbl{font-family:'Almarai';font-weight:800;font-size:var(--fs-ui)}
.ta-val{font-size:var(--fs-tag);color:var(--text-muted);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

.ta-accent .ta-ic{background:var(--accent-fill);color:var(--accent)}
.ta-accent:hover{border-color:var(--accent)}
.ta-ok     .ta-ic{background:var(--ok-fill);color:var(--ok)}
.ta-ok:hover{border-color:var(--ok)}
.ta-dx     .ta-ic{background:var(--dx-soft);color:var(--dx)}
.ta-dx:hover{border-color:var(--dx-edge)}

@media(prefers-reduced-motion:reduce){
  .subj,.today-act{transition:border-color .18s}
  .subj:hover,.today-act:hover{transform:none}
  .sh,.pfill{transition:none}
}

/* ═══ الدروس ═══ */
.lsn{background:var(--fill-soft);border:1px solid var(--line);border-radius:12px;
  padding:15px;margin-bottom:10px;cursor:pointer;transition:border-color .18s}
.lsn:hover{border-color:var(--accent)}
.lsn.locked{opacity:.5;cursor:not-allowed;border-style:dashed}
.lsn.locked:hover{border-color:var(--line)}
.lsn.done{border-color:var(--ok-edge)}
.lsn-t{font-family:'Almarai';font-weight:700;font-size:var(--fs-read)}
.lsn-m{font-size:var(--fs-meta);color:var(--text-muted);margin-top:4px}
.lockmsg{font-size:var(--fs-meta);color:var(--warn);margin-top:5px}

/* ═══ الدرس ومصادره ═══ */
.itm{display:flex;align-items:center;gap:13px;background:var(--fill-soft);
  border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:9px;
  cursor:pointer;transition:border-color .18s}
.itm:hover{border-color:var(--accent)}
.itm.quiz{background:var(--accent-soft);border-color:var(--accent-line)}
.itm-ic{flex:0 0 40px;height:40px;border-radius:11px;background:var(--fill-strong);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.itm.quiz .itm-ic{background:var(--accent-fill)}
.itm-t{font-family:'Almarai';font-weight:700;font-size:var(--fs-ui)}
.itm-m{font-size:var(--fs-meta);color:var(--text-muted);margin-top:3px}
.itm-s{margin-right:auto;font-size:1rem;opacity:.8}

/* ═══ الاختبار ═══ */
.timerbar{position:sticky;top:0;z-index:20;background:var(--bar);border-bottom:1px solid var(--line);
 padding:11px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.clock{font-family:'Almarai';font-weight:800;font-size:1.12rem;color:var(--accent);
 font-variant-numeric:tabular-nums;letter-spacing:.04em}
.clock.warn{color:var(--warn)}
.clock.crit{color:var(--danger);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}
.track{flex:1;height:5px;background:var(--fill-strong);border-radius:99px;overflow:hidden}
.trackfill{height:100%;background:var(--track-grad);transition:width 1s linear}
.qcount{font-family:'Almarai';font-weight:700;font-size:var(--fs-meta);color:var(--text-muted);white-space:nowrap}

/* ══ علوّ شريط العدّاد — رقمٌ واحدٌ لمن يحتاجه ══
   كان ٧٦ يسكن مكاناً واحداً، فلمّا احتاجه ثانٍ (الشريط الصوتي) صار
   نسختين تتباعدان يوم يتغيّر الحشو. ومكانُه CSS لا جافاسكربت:
   مقاسٌ في CSS يوصف في الشيفرة ينكسر صامتاً.
   ⚠️ وهو في ‎:root‎ رغم أنه يخصّ شاشةً واحدة — لأن المتغيّرات تنحدر
      في الشجرة ولا تعبُر إلى الإخوة، و.timerbar أخٌ للمحتوى لا أبٌ له.
   ⚠️ و٥٣ أقلُّ هنيهةً من المقيس (١١+١١ حشو + ~٣٣ محتوى + حدّ)، وهذا
      مقصود: الأقلُّ يُدخل الشريطين أحدهما تحت الآخر، والأكثرُ يفتح
      بينهما فرجةً يطلّ منها النصّ فتبدو عطلاً. */
:root{--barh:53px}

/* بطاقة السؤال — وجهةُ التمرير حين يُنبَّه على فراغ.
   صارت صنفاً لا معرّفاً: الصفحة تحمل بطاقاتٍ عدّة (b24)، والمعرّف
   يجب أن يكون فريداً فصار #q17 لكلٍّ، والصنف يجمعها.
   والمجموع ٧٦ كما كان — لم يتغيّر السلوك، بل مصدرُ الرقم. */
.qcard{scroll-margin-top:calc(var(--barh) + 23px)}

/* المقطع يلتصق تحت العدّاد: الصفحة صارت طويلة، وزرُّ الإعادة يجب أن
   يبقى في المتناول — فالإعادةُ غير المحدودة هي ما يمنع الكود من
   قياس الذاكرة العاملة بدل الفهم.
   والهوامش السالبة تُخرجه إلى حافّتَي .wrap، وإلا ظهر منزلقاً في
   ثمانية عشر بكسلاً من كل جانب حين يلتصق. */
.psg-audio{position:sticky;top:var(--barh);z-index:15;
  background:var(--bar);
  margin-inline:-18px;padding:9px 18px 4px;margin-bottom:6px}
/* نقضُ نمطٍ داخل الوسم تكتبه pgMedia — ولا يُنقَض إلا بهذا */
.psg-audio audio{margin-bottom:0!important}

.qnum{font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);color:var(--accent);letter-spacing:.1em;margin-bottom:11px}
.qtext{font-family:'Almarai';font-weight:700;font-size:var(--fs-q);line-height:1.85;margin-bottom:18px}
.media{width:100%;border-radius:11px;border:1px solid var(--line);margin-bottom:15px;display:block}
.media-v{width:100%;aspect-ratio:16/9;border:0;border-radius:11px;margin-bottom:15px}

/* .qnum لا تُمسّ: تسكن في عشرة مواضع، وتحويلها إلى flex يُزيح ما لا شأن له */
.qmove{display:flex;align-items:center;gap:6px;margin:-4px 0 13px}
.qmv{width:26px;height:26px;line-height:1;cursor:pointer;
  background:var(--fill);border:1px solid var(--line);border-radius:7px;
  color:var(--text-muted);font-size:var(--fs-tag)}
.qmv:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.qmv:disabled{opacity:.3;cursor:default}
.qmv-s{font-size:var(--fs-tag);color:var(--text-muted)}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:start;
 background:var(--fill-soft);border:1px solid var(--line);border-radius:11px;padding:13px 15px;
 cursor:pointer;color:var(--text);font-family:inherit;font-size:var(--fs-read);line-height:1.8;
 transition:border-color .18s,background .18s}
.opt:hover{border-color:var(--accent-edge);background:var(--accent-soft)}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt.sel{border-color:var(--accent);background:var(--accent-fill)}
.key{flex:0 0 30px;height:30px;border-radius:9px;background:var(--fill-strong);color:var(--text-muted);
 font-family:'Almarai';font-weight:800;font-size:var(--fs-meta);display:flex;align-items:center;justify-content:center}
.opt.sel .key{background:var(--accent);color:var(--on-accent)}

/* ── الاختيار متعدّد الإجابات (msq) ──
   التلميح يقول «أكثر من واحد» ولا يقول كم: إعلان العدد يعيد المقارنة
   الترجيحية من الباب الخلفي، وجوهر هذا النمط أن يُحاكَم كل خيار وحده.
   والمربّع لا الدائرة — الشكل نفسه رسالة.
   🔓 ويشترك فيه تحذيرُ الفراغ (b24): كلاهما نداءٌ قبل الانتقال، لا حكمٌ
      بعده — فيصحّ أن يتشابها. */
/* التلميح تعليمةٌ لا زينة: من يفوته يُخفق لسببٍ لا يقيسه الكود.
   فحقّه أرضية القراءة لا حجم الوسم. */
.q-hint{font-family:'Almarai';font-weight:700;font-size:var(--fs-read);color:var(--warn);
  background:var(--warn-soft);border:1px solid var(--warn-line);
  border-radius:9px;padding:11px 13px;line-height:1.8;margin-bottom:12px}
.opts.multi .opt{align-items:center}
.tick{flex:0 0 25px;height:25px;border-radius:7px;border:1.5px solid var(--line);
  margin-inline-start:auto;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-tag);color:var(--on-accent);background:transparent;transition:background .18s,border-color .18s}
.opt.sel .tick{background:var(--accent);border-color:var(--accent)}

.gap-in{display:inline-block;min-width:120px;width:auto;
        padding:3px 10px;margin:0 3px;
        border:0;border-bottom:2px solid var(--accent);
        border-radius:7px 7px 0 0;
        background:var(--accent-soft);color:inherit;
        font-family:inherit;font-size:inherit;font-weight:inherit;
        text-align:center;transition:background .15s,box-shadow .15s}
.gap-in::placeholder{opacity:.45;font-weight:400}
.gap-in:focus{outline:none;background:var(--surface-2);
              box-shadow:0 0 0 2px var(--accent) inset}
.gap-in:disabled{background:transparent;border-bottom-style:dashed;opacity:.55}
.gaprow{margin-top:10px}
.gapbtn{background:var(--accent-fill,var(--accent-soft)) !important;
        border-color:var(--accent) !important;color:var(--accent) !important;
        font-weight:700}
.gaplive{margin-top:11px;padding:13px 15px;border-radius:11px;
         background:var(--accent-soft);border:1px dashed var(--accent-line);
         min-height:22px}
.gaplive .qtext{margin:0}
.bank{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bank-w{padding:7px 14px;border-radius:9px;
        background:var(--accent-soft);border:1px solid var(--accent-line);
        font-size:var(--fs-ui)}

/* الحدّ الملوّن يتبع اتجاه النصّ تلقائياً مع border-inline-start
   ⚠️ و max-height:44vh قرارٌ يُراجَع مع الصفحة الطويلة: النصّ يخرج من
      الشاشة عند السؤال الرابع فيُمرَّر إليه ويُعاد. أرخصُ من التنقّل
      القديم (لا يُهدَم شيء ولا يُصفَّر صوت) وليس مجاناً. والحلّ
      الناضج عمودان — ينتظر طالباً يقول إن التمرير أزعجه. */
.psg{background:var(--fill-soft);border:1px solid var(--line);border-inline-start:3px solid var(--accent);
  border-radius:0 12px 12px 0;padding:17px 18px;margin-bottom:15px;font-size:var(--fs-read);line-height:1.95;
  max-height:44vh;overflow:auto;white-space:pre-wrap}
.psg{border-start-start-radius:0;border-end-start-radius:0}
.psg-t{font-family:'Almarai';font-weight:800;font-size:var(--fs-meta);color:var(--accent);margin-bottom:8px}

/* ═══ النتيجة والتشخيص ═══ */
.score-hero{text-align:center;padding:30px 20px;border-radius:var(--r);
 background:var(--hero-accent);
 border:1px solid var(--accent-line);margin-bottom:16px}
.score-num{font-family:'Almarai';font-weight:800;font-size:clamp(2.4rem,11vw,3.5rem);line-height:1;color:var(--accent)}
.score-of{color:var(--text-muted);font-size:var(--fs-ui);margin-top:6px}
.verdict{font-family:'Almarai';font-weight:700;margin-top:14px;font-size:var(--fs-read)}
/* محايدٌ لا أخضر (b83): كان يستعمل لون «أصبتَ»، وما فيه ليس حكماً على
   إجابة — «أتممتَ الدرس» إنجازٌ على مستوى الدرس لا الإجابة، و«فُتح لك
   الآن» حالةٌ جديدة وطريقٌ أمام الطالب. وكلُّ أخضرَ خارج الحكم يُضعف
   الأخضرَ حين يُحكَم به فعلاً — والتشخيصُ يعيش على وضوح لغة الحكم.
   ⚠️ والمعنى لا يُفقَد: 🎉 و🔓 والكلماتُ تحمله كاملاً — فاللونُ كان
      تكراراً يصرف عائلةً محجوزة، لا إضافةً تُفهِم.
   🟡 وصنفٌ واحد لمعنيين: لو صار «فُتح لك الآن» رابطاً إلى الدرس التالي
      لاستحقّ لونَ التفاعل عن جدارة. تغييرُ سلوكٍ لا لون — مطروحٌ للنقاش. */
.unlocked{margin-top:14px;background:var(--fill-soft);border:1px solid var(--line);
 border-radius:11px;padding:13px;font-family:'Almarai';font-weight:700;font-size:var(--fs-ui);color:var(--text)}

/* الحدّ الملوّن يتبع اتجاه المحتوى — سؤال إنجليزي يأخذه يساراً */
.rev{border-inline-start:3px solid var(--line);padding:15px;margin-bottom:11px;
 background:var(--fill-soft);
 border-start-end-radius:11px;border-end-end-radius:11px}
.rev.ok{border-inline-start-color:var(--ok)}
.rev.no{border-inline-start-color:var(--danger)}
.rev.new{border-inline-start-color:var(--warn)}
.tag{display:inline-block;font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);
 padding:3px 10px;border-radius:999px;margin-bottom:8px}
.tag.ok{background:var(--ok-fill);color:var(--ok)}
.tag.no{background:var(--danger-fill);color:var(--danger)}
/* 🔴 الهرم مقلوبٌ هنا عمداً: في شاشة المراجعة السؤالُ سياقٌ والتشخيصُ متن.
   فـ.rev-q ١٥٫٢px و.trap ١٦٫٨px — الشرحُ أكبر مما يشرحه.
   ولو تساويا لقرأ الطالبُ الأعلى وتجاوز الأسفل، والأسفلُ هو المقصود. */
/* التشخيص dx لا warn (b62): الصندوق يجاور «خاطئة»، والكهرمانيُّ يذوب في
   الأحمر عند عمى الأحمر ⇒ يُقرأ الشرحُ لوماً. «لماذا» ليست «أخطأت». */
.trap{margin-top:11px;background:var(--dx-soft);border:1px solid var(--dx-line);
 border-radius:10px;padding:13px 15px;font-size:var(--fs-read);line-height:1.9;color:var(--dx-text)}
.trap strong{display:block;margin-bottom:5px;font-family:'Almarai';font-weight:800;
 font-size:var(--fs-meta);letter-spacing:.02em;color:var(--dx)}
.model{margin-top:11px;background:var(--accent-soft);border:1px solid var(--accent-line);
 border-radius:10px;padding:14px 16px;font-size:var(--fs-read);line-height:1.9}
.model strong{font-family:'Almarai';font-weight:800;color:var(--accent);display:block;margin-bottom:5px}
.remedy{margin-top:10px;background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:10px;padding:13px 15px;font-size:var(--fs-read);line-height:1.9}
.remedy strong{font-family:'Almarai';font-weight:800;color:var(--accent);display:block;margin-bottom:4px}
.fbnote{margin-top:14px;background:var(--warn-fill);border:1px solid var(--warn-edge);
 border-radius:11px;padding:14px;font-family:'Almarai';font-weight:700;font-size:var(--fs-ui);
 color:var(--warn);cursor:pointer;text-align:center}

.recur{margin:22px 0;padding:16px 18px;border-radius:12px;
       background:var(--surface);border:1px solid var(--line)}
.recur h3{margin:0 0 12px;font-size:1rem;color:var(--accent)}
.rc-row{padding:10px 0;border-top:1px solid var(--line)}
.rc-row:first-of-type{border-top:0}
.rc-where{font-weight:600;margin-bottom:4px}
.rc-note{opacity:.9;line-height:1.7}
/* مراجعة msq — صفٌّ لكل خيار لا صفٌّ للسؤال.
   فيرى الطالب حدّ المفهوم كاملاً: ما أدخله وليس منه، وما أخرجه وهو منه. */
/* 🆕 114 · رقمُ الفراغ في نصٍّ يُقرأ ولا يُجاب (المراجعة والتقارير):
   ‎{{1}}‎ رمزُ تأليفٍ لا يخصّ الطالب، وكان يظهر خاماً منذ 63.
   والرقمُ يقابل ترقيمَ إجاباته تحته، فيعرف أيَّ فراغٍ سقط. */
.rev-blank{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.1em;padding:0 6px;margin:0 3px;border-radius:7px;
  background:var(--fill-strong);color:var(--text-muted);
  font-family:'Almarai';font-weight:800;font-size:.85em;line-height:1.75;
  vertical-align:baseline}

.jds{display:flex;flex-direction:column;gap:7px;margin:9px 0}
.jd{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:10px;
  background:var(--fill-soft);border:1px solid var(--line);
  font-size:var(--fs-ui);line-height:1.75}
.jd .key{flex:0 0 27px;height:27px;font-size:var(--fs-tag)}
.jd.hit{border-color:var(--ok-edge);background:var(--ok-soft)}
.jd.err{border-color:var(--danger-edge);background:var(--danger-soft)}
.jd.dim{opacity:.6}
.jd-m{display:block;margin-top:4px;font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);color:var(--text-muted)}
.jd.hit .jd-m{color:var(--ok)}
.jd.err .jd-m{color:var(--danger)}
.jd-dx{display:block;margin-top:5px;font-size:var(--fs-read);color:var(--dx);line-height:1.8}

/* ═══ الإرشاد — اختيار المعلم ═══ */
.mentor{background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:16px;margin-bottom:10px;cursor:pointer;transition:border-color .18s}
.mentor:hover{border-color:var(--accent)}
.mentor.full{opacity:.45;cursor:not-allowed}
.mentor.full:hover{border-color:var(--line)}
.mentor.self{background:var(--fill-soft);border-style:dashed}
.mentor.cur{border-color:var(--accent);background:var(--accent-soft)}
.m-n{font-family:'Almarai';font-weight:700;font-size:var(--fs-read)}
.m-m{font-size:var(--fs-meta);color:var(--text-muted);margin-top:4px}
.m-b{font-size:var(--fs-ui);line-height:1.85;margin-top:9px;color:var(--text);opacity:.85}
.m-cap{display:inline-block;background:var(--fill-strong);border-radius:8px;
  padding:2px 9px;font-size:var(--fs-tag);color:var(--text-muted);margin-top:8px}

/* 🆕 b88 · صندوق السعة في بطاقة المادة (شاشة «موادّي») — ضبطٌ لا اختيار.
   ⚠️ cursor:default لأن ‎.mentor‎ كلُّها ‎pointer‎: ومؤشّرُ اليد فوق حقل
      كتابةٍ يَعِد بنقرةٍ تختار، لا بحقلٍ يُكتب فيه.
   ⚠️ و‎width:auto‎ لأن ‎input‎ في base.css عرضُها ١٠٠٪ — ورقمٌ من ثلاث
      خاناتٍ لا يأخذ عرضَ البطاقة. */
.m-cap-set{margin-top:12px;cursor:default}
.m-cap-set input{width:auto;max-width:140px;padding:9px 11px;text-align:center}
.m-cap-set input:disabled{opacity:.45;cursor:not-allowed}

/* ═══ المحادثة ═══ */
.chat{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.msg{max-width:82%;padding:12px 15px;border-radius:14px;font-size:var(--fs-read);line-height:1.85}
.msg .who{font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);opacity:.75;margin-bottom:4px}
.msg .tm{font-size:var(--fs-tag);opacity:.55;margin-top:5px}
.msg.me{align-self:flex-end;background:var(--accent-fill);border:1px solid var(--accent-edge)}
.msg.them{align-self:flex-start;background:var(--fill);border:1px solid var(--line)}
.thr{display:flex;justify-content:space-between;align-items:center;gap:12px;
 background:var(--fill-soft);border:1px solid var(--line);border-radius:12px;
 padding:14px;margin-bottom:9px;cursor:pointer}
.thr:hover{border-color:var(--accent)}
.dot{background:var(--warn);color:var(--on-warn);font-family:'Almarai';font-weight:800;
 font-size:var(--fs-tag);padding:2px 9px;border-radius:999px;white-space:nowrap}

/* ═══ لوحة المعلم — التصحيح ═══ */
.pend{background:var(--fill-soft);border:1px solid var(--line);border-radius:12px;
 padding:15px;margin-bottom:10px;cursor:pointer}
.pend:hover{border-color:var(--accent)}
.pend.done{border-color:var(--accent-edge);opacity:.7}
.essaybox{background:var(--fill-soft);border:1px solid var(--line);border-radius:11px;
 padding:15px;font-size:var(--fs-read);line-height:1.95;white-space:pre-wrap;margin-bottom:14px}

/* ═══ شاشة انتظار المعلم ولوحة المدير ═══ */
.pend-hero{text-align:center;padding:34px 22px;border-radius:var(--r);
  background:var(--hero-warn);
  border:1px solid var(--warn-edge);margin-bottom:16px}
.pend-ic{font-size:2.6rem;margin-bottom:12px}
.pend-t{font-family:'Almarai';font-weight:800;font-size:1.15rem;color:var(--warn);margin-bottom:8px}
.pend-s{color:var(--text-muted);font-size:var(--fs-ui);line-height:1.9}
.req{background:var(--fill-soft);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin-bottom:11px}
.req-h{font-family:'Almarai';font-weight:700;font-size:var(--fs-read)}
.req-m{font-size:var(--fs-meta);color:var(--text-muted);margin-top:4px;line-height:1.8}
.req-note{margin-top:10px;background:var(--fill-soft);border-radius:9px;
  padding:12px;font-size:var(--fs-ui);line-height:1.85}
.rowbtn{display:flex;gap:9px;margin-top:12px}
.rowbtn button{flex:1;border:none;border-radius:10px;padding:10px;cursor:pointer;
  font-family:'Almarai';font-weight:800;font-size:var(--fs-ui)}
/* ok-b «قبول» زرُّ قرارٍ إداريّ لا حكمٌ على تعلّم ⇒ يبقى accent عمداً (b61) */
.ok-b{background:var(--accent);color:var(--on-accent)}
.no-b{background:var(--danger-fill);color:var(--danger);border:1px solid var(--danger-edge)!important}

/* ═══ المحرّر — للحاسوب أولاً ═══ */
.wrap.wide{max-width:1180px}

/* رتبةٌ رابعة: تأليفُ الأسئلة.
   العملُ كلُّه يقع في عمودٍ واحد بين شريطٍ للأسئلة وحافّة الصفحة،
   فيُعطى ما يسع **الخيارَ وكودَ تشخيصه في سطرٍ واحد** — والمبدأ
   الحاكم أن المشتّت وتشخيصه فكرةٌ واحدة، فإن انكسر الصفّ انكسرت.
   ⚠️ والخصوصية لازمة: ‎.wrap.wide‎ أعلاه تحمل max-width صريحاً،
      فلا تغلبها إلا قاعدةٌ أخصُّ منها — ولهذا :has وليس صنفاً ثالثاً.
      و:has يُشتقّ من المحتوى كما في base.css، فلا نداءَ في الشيفرة. */
.wrap.wide:has(.eq){max-width:1400px}

.ed-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--fill-soft);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin-bottom:16px}
.ed-bar select{width:auto;min-width:190px;padding:9px 12px;font-size:.87rem}

.ed-sec{margin-bottom:26px}
.ed-sec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
          margin-bottom:11px;padding-inline-start:3px}
.rt-ok{border-color:var(--ok)}
.rt-bad{border-color:var(--warn-edge);background:var(--warn-fill)}
.rt-iss{margin:10px 0 0;padding-inline-start:20px;line-height:1.9;font-size:var(--fs-meta)}
.rt-list{display:flex;flex-direction:column;gap:7px}
.rt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:10px 13px;border-radius:10px;
    background:var(--accent-soft);border:1px solid var(--accent-line)}
.rt-n{flex:0 0 62px;font-weight:700;font-family:'Almarai'}
.rt-a{font-weight:600}
.rt-note{flex:1 1 100%;font-size:.82em;opacity:.65;line-height:1.7}
.ed-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ed-card{display:flex;align-items:center;gap:13px;cursor:pointer;
  background:var(--surface);
  border:1px solid var(--line);border-radius:13px;padding:15px;
  transition:border-color .18s}
.ed-card:hover{border-color:var(--accent)}
.ed-card.ro{border-style:dashed;opacity:.75}
.ed-ic{flex:0 0 42px;height:42px;border-radius:11px;font-size:1.3rem;
  background:var(--fill);display:flex;align-items:center;justify-content:center}
.ed-t{font-family:'Almarai';font-weight:700;font-size:var(--fs-ui);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-m{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}

.ed-row{display:flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--fill-soft);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;margin-bottom:8px;transition:border-color .18s}
.ed-row:hover{border-color:var(--accent)}
/* صفٌّ لا يُفتح — كبطاقة «مصادر فقط»: حدٌّ متقطّع يقول «مرئيٌّ لا مملوك» */
.ed-row.ro{cursor:default;border-style:dashed}
.ed-row.ro:hover{border-color:var(--line)}

/* 🆕 b131 · الوسمُ الجماعي — وصفٌّ محدَّدٌ يُرى بلمحة لا بتدقيق:
   المؤلّف يحدّد عشرين من أربعين، فالفرقُ يجب أن يُقرأ بالمسح لا
   بتتبّع المربّعات. */
.ed-row.on{background:var(--ok-soft);border-color:var(--ok-line)}
.pick-c{flex:0 0 auto;display:flex;align-items:center;cursor:pointer;padding:2px}
.pick-c input{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--ok)}
.ed-tagbar{background:var(--ok-soft);border:1px solid var(--ok-line);
  border-radius:14px;padding:14px 16px;margin-bottom:14px}
.ed-tagbar .eq-bt{color:var(--ok)}
.ed-tagbar .ed-hint{background:var(--surface);border-color:var(--ok-line)}
.qz-go.off{color:var(--text-muted);opacity:.55;cursor:not-allowed}
.ed-empty{color:var(--text-muted);font-size:var(--fs-meta);padding:10px 4px 14px}

/* 🆕 b134 · شريطُ الفرز والمِصفاة في شاشة البطاقات.
   🔑 **ولا لونَ جديد فيه ولا عائلةَ معنى:** الشريطُ **محايد**
      (`--fill-soft` + `--line`) لأنّه لا يقول جملةَ حكم — وكلُّ
      عائلةٍ تُستهلك خارج الحكم تُضعفها حين يُحكَم بها فعلاً.
      والرقائقُ تُعيد `.eq-kb` بحالها من شريط الأسئلة: محايدةٌ، و`on`
      بالتفاعل (`accent`)، و`lack` كهرمانيّةٌ حيث العددُ فوق الصفر —
      وهي جملةُ `warn` بعينها: «انتبه». */
.ed-filter{background:var(--fill-soft);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px;margin-bottom:16px}

/* 🔴 ورقيقةٌ **مختارةٌ وناقصةٌ معاً** كانت تستوي بغير المختارة: `.lack`
   تأتي بعد `.on` بالخصوصية نفسِها فتغلب خلفيتَها وحدَّها — قِيس في
   المتصفّح. ⇒ حلقةٌ داخليّةٌ بلون التفاعل تقول «هذه المعروضة» ولا تمحو
   كهرمانَ «انتبه». **وتُصلح شريطَ الأسئلة معها، فالمسطرةُ واحدة.** */
.eq-kb.on.lack{box-shadow:inset 0 0 0 2px var(--accent-edge)}
.ed-fstat{flex:0 0 auto;white-space:nowrap;
  font-size:var(--fs-tag);color:var(--text-muted)}
.ed-filter .it-b:disabled{opacity:.45;cursor:default}

/* 🆕 b129 · مُنتقٍ متعدّد في المحرّر — مربّعاتٌ لا قائمةُ اختيارٍ
   متعدّدة: تلك تحتاج Ctrl للنقر، ونقرةٌ واحدةٌ خاطئة تمحو الاختيار
   كلَّه بلا إنذار. والمربّعاتُ تُقرأ بلمحة وتُلمَس بإصبع.
   والارتفاع محدودٌ لأنّ المادة قد تبلغ أربعين درساً. */
.pick{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow-y:auto;
  border:1px solid var(--line);border-radius:12px;padding:7px 9px;background:var(--fill)}
.pick-i{display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:6px 4px;border-radius:8px;font-size:var(--fs-meta);line-height:1.5}
.pick-i:hover{background:var(--bg)}
.pick-i input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--accent)}
.pick-i span{min-width:0;overflow-wrap:anywhere}

.ed-form{display:flex;gap:16px;align-items:flex-start}
.ed-side{flex:0 0 258px;display:flex;flex-direction:column;gap:9px}
.ed-hint{background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:11px;padding:12px 14px;font-size:var(--fs-meta);line-height:1.8}
.ed-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}

@media(max-width:900px){
  .ed-form{flex-direction:column}
  .ed-side{flex:1 1 auto;width:100%}
  .ed-3{grid-template-columns:1fr}
  .ed-bar select{min-width:0;flex:1}
}
.modal{position:fixed;inset:0;z-index:300;display:flex;padding:24px;
       overflow:auto;background:rgba(0,0,0,.35)}

/* ══════════════════════════════════════════════════════════
   محرّر الأسئلة — شريطُ أوامرَ وعمودان
   🔴 كان ثلاثة أعمدة: ٢٩٠ للأسئلة و٢٦٠ للجاهزية، فلم يبقَ للتحرير
      — وهو موضع العمل كلِّه — إلا ٥٦٠px داخل ١١٨٠. والعمودُ الثالث
      يعرض حكماً لا يتغيّر إلا عند الحفظ، فيدفع الكاتبُ عرضَه في كلّ
      حرفٍ يكتبه. ⇒ نُقل ما فيه إلى حيث يعمل: الأفعالُ شريطَ أوامرٍ
      بعرض الصفحة، والعدُّ رقائقَ فلترة، والعوائقُ لافتةً عريضة.
   ⚠️ ومقاسا الالتصاق يُعرَّفان هنا مرّةً ويُقرآن في ثلاثة مواضع
      (الشريط · عمود الأسئلة · مرساة التمرير) — فلا يتباعد رقمٌ عن
      رقم. و--eqbar ارتفاعُ الشريط الأعلى (.topbar: ٣٨ + ٩×٢ + حدّ).
   🔴 b96 · و--eqtb **قاعٌ لا حقيقة**: كان ٤٩ مكتوباً و٥٢ واقعاً، ولولا
      تصادمُ ‎.eq-tb‎ مع زرّ أدوات السؤال لكان ٥٨ — فعطلٌ كان يستر عطلاً،
      وما بُني عليه (التصاقُ العمود وسقفُه ومرساةُ التمرير) يُخطئ بلا
      شكوى. ⇒ صار ‎syncTbH‎ يقرأ الارتفاعَ من الشريط نفسه ويكتبه هنا عند
      كلّ تغيّرِ حجم. والرقم أدناه ما قِيس عند الإصلاح: يحكم اللحظةَ قبل
      أوّل قياسٍ لا غير — **ولا يُنقل منه رقمٌ إلى موضعٍ آخر.**
   ══════════════════════════════════════════════════════════ */
.eq-sc{--eqbar:57px;--eqtb:58px}

/* شريط الأوامر — لاصقٌ تحت الشريط الأعلى، وخلفيّتُه صمّاء:
   ما يمرّ تحته لا يُقرأ من خلاله.
   🔴 ولا يلتفّ في الحاسوب: ارتفاعُه (--eqtb) هو ما يُبنى عليه التصاقُ
      عمود الأسئلة تحته، فالتفافُه يُطيله فيغطّي رأسَ العمود — قيس
      عند ١٠١٠px فكان ٩١ بدل ٤٩، والتغطية ٢٥px. والالتفاف يتبع طولَ
      **العنوان وعددَ الأزرار** لا عرضَ الشاشة وحده، فلا يُحسم بنقطة
      قطعٍ في @media. ⇒ يُمنع الالتفاف، ويُفسَح بالانكماش: العنوان
      يُقصَّر بالنقاط، والرقائق تُمرَّر أفقيّاً. */
.eq-tb{position:sticky;top:var(--eqbar);z-index:16;
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  background:var(--page);border-bottom:1px solid var(--line);
  padding:9px 0 10px;margin-bottom:13px}

/* 🆕 b96 · والقاعُ على الزرّ لا على نصّه: نصٌّ بحدٍّ أدنى داخل زرٍّ
   بـ ‎min-width:0‎ لا يوقف انكماشَ الزرّ — بل يفيض منه، والزرُّ لا
   ‎overflow‎ له. قيس فانكمش الزرّ إلى ٣٥px واسمُ الدرس خارجَه. */
.eq-back{flex:0 1 auto;min-width:11rem;
  display:flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--fill);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:7px 11px;
  font-family:'Almarai';font-weight:700;font-size:var(--fs-meta)}
.eq-back:hover{border-color:var(--accent);color:var(--accent)}
.eq-back-a{flex:0 0 auto;opacity:.7}
/* ⚠️ واتّسع من ٢٦ إلى ٤٦ حرفاً حين حُذف وصفُ الترويسة: صار هذا
   الموضعَ الوحيد الذي يحمل اسمَ الدرس، فالقصُّ فيه يُفقده لا يختصره.
   والانكماش يتكفّل بالضيّق — flex:0 1 auto على الزرّ، وقاعُه ١١rem
   أعلاه: العنوان صار يتقاسم العجزَ مع الرقائق بعد أن كان لا يتحمّل
   منه شيئاً (انظر أسفله)، فلولا قاعٌ يقف عنده لتلاشى. */
.eq-back-t{min-width:0;max-width:46ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* رقائق الأنماط — عدٌّ وفلترةٌ في عنصرٍ واحد.
   🔴 b96 · وكانت ‎flex:1 1 0‎ ⇒ الرقائق **بقيّةٌ لا حصّة**: أساسُها
      صفرٌ تنمو بما فضل بعد العنوان والحالة والأفعال. وسائرُهم لا
      ينكمش، فلا يقع «عجزٌ» يُلزِم العنوانَ بشيء — والرقائق وحدها
      تدفع ثمنَ كلِّ ضيق. قيس عند ١٠١٠px فاحتاجت ٢٣٣px وظهر ٧٧:
      سقطت «٤ مقالي» كاملةً، وبُترت «٢٤ اختيار» عند «اخت». والتمرير
      موجودٌ وشريطُه مخفيّ ⇒ **لا أثرَ لما خرج.** قصٌّ صامت.
   ⇒ ثلاث درجات قبل البتر، تُستنفد واحدةً بعد واحدة:
      ① ‎flex:1 1 auto‎ — أساسٌ حقيقيّ، فيقع العجز ويتقاسمه العنوانُ
        معها. وله نقاطُ قصٍّ مصمَّمة وحدٌّ أدنى، فالقصُّ فيه مُعلَن.
      ② ‎.tight‎ — التسمية تُطوى والأيقونةُ والعددُ يبقيان: ستّ رقائق
        تحتاج ٦٧٨px موسَّعةً و٣٠٨ مطويّة.
      ③ ‎.m-s/.m-e‎ — وما خرج رغم ذلك يترك أثراً على حافّته.
   ⚠️ ولا ‎flex-shrink:0‎ مع الطيّ — جُرِّب ليتحمّلَ العنوانُ ما بقي من
      العجز: فخرج الفائضُ من الرقائق إلى الشريط (قيس ١٣١px بستّة
      أنماطٍ عند ١٠١٠px)، ودافعُ الشريطِ يدفع الصفحةَ إلى تمريرٍ
      أفقيّ — وهي العلّة المكتوبة في @media أسفله. والانكماشُ يُبقي
      الفائضَ داخل ‎overflow‎ الرقائق، حيث يُقاس ويُعلَن.
   ⚠️ والدرجة ② تُضاف بالقياس لا بنقطة قطعٍ في @media: الفيض يتبع
      طولَ اسم الدرس وعددَ الأنماط الحاضرة وعددَ الأزرار — وهي العلّة
      نفسها المكتوبة في تعليق .eq-tb أعلاه. (انظر fitKinds) */
.eq-kinds{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.eq-kinds::-webkit-scrollbar{display:none}

/* ② الطيّ — والعددُ هو المعلومة، والتسميةُ شرحُها. فيسقط الشرح أوّلاً
   ويبقى ما لا يُستغنى عنه: الأيقونةُ تميّز، والرقمُ يُعدّ، و‎title‎
   على الرقيقة يقول الاسمَ كاملاً. */
.eq-kinds.tight .eq-kb > span{display:none}

/* ③ الأثر — تلاشٍ على الحافّة التي أخفت، لا شريطَ تمريرٍ ظاهر:
   الأفقيُّ في ويندوز يأخذ ارتفاعاً، و--eqtb مبنيٌّ عليه ما تحته.
   والجهة تُحسب ولا تُفترض: «البداية» في RTL هي اليمين. */
.eq-kinds.m-e{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent);
              mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent)}
.eq-kinds.m-s{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
              mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
.eq-kinds.m-s.m-e{
  -webkit-mask-image:linear-gradient(to left,transparent,#000 22px,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(to left,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.eq-kb{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--fill-soft);border:1px solid var(--line);color:var(--text-muted);
  border-radius:9px;padding:5px 9px;font-family:inherit;font-size:var(--fs-tag)}
.eq-kb:hover{border-color:var(--accent-edge);color:var(--accent)}
.eq-kb.on{background:var(--accent-fill);border-color:var(--accent-edge);color:var(--accent)}
.eq-kb i{font-style:normal;opacity:.75}
.eq-kb b{font-family:'Almarai';font-weight:800;font-size:var(--fs-meta);color:var(--text)}
.eq-kb.on b{color:var(--accent)}
.eq-kb em{font-style:normal;color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:6px;padding:0 6px}
.eq-kb.lack{background:var(--warn-soft);border-color:var(--warn-line)}
.eq-kb.lack b,.eq-kb.lack em{color:var(--warn)}
.eq-kb.lack em{background:var(--warn-fill);border-color:var(--warn-edge)}

/* حالة النشر — كلمةٌ صريحة لا لونٌ يُستنتج */
.eq-state{flex:0 0 auto;margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);white-space:nowrap;
  border:1px solid;border-radius:999px;padding:5px 13px}
.eq-state::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.eq-state.draft{color:var(--text-muted);background:var(--fill);border-color:var(--line)}
.eq-state.live{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.eq-state.half{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}

.eq-acts{flex:0 0 auto;display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
.eq-tbb{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  background:var(--fill);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:8px 14px;
  font-family:'Almarai';font-weight:700;font-size:var(--fs-meta);
  transition:border-color .16s,color .16s,filter .16s}
.eq-tbb .eq-i{font-size:1rem;line-height:1}
.eq-tbb.go{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent);font-weight:800}
.eq-tbb.warn{background:var(--warn-fill);border-color:var(--warn-edge);color:var(--warn-text)}
/* ⚠️ و:not(:disabled) في كلّ hover — وإلا وعد المعطَّلُ بفعلٍ لا يقع */
.eq-tbb:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}
.eq-tbb.go:not(:disabled):hover{filter:brightness(1.08);
  color:var(--on-accent);border-color:var(--accent)}
.eq-tbb.warn:not(:disabled):hover{filter:brightness(1.04);
  color:var(--warn-text);border-color:var(--warn-edge)}
/* ولا pointer-events:none — فيبقى title يشرح سببَ التعطيل */
.eq-tbb:disabled{opacity:.42;cursor:not-allowed}

/* العوائق — بعرض الصفحة: ما يمنع النشر لا يُقطَّع في عمودٍ ضيّق */
.eq-warns{background:var(--warn-soft);border:1px solid var(--warn-line);
  border-radius:12px;padding:12px 16px;margin-bottom:13px}
.eq-warns-h{font-family:'Almarai';font-weight:800;font-size:var(--fs-meta);
  color:var(--warn);margin-bottom:5px}
.eq-warns ul{padding-inline-start:20px}
.eq-warns li{font-size:var(--fs-meta);color:var(--warn-text);line-height:1.8}

/* ═══ العمودان ═══ */
.eq{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.eq-h{font-family:'Almarai';font-weight:800;font-size:.85rem;margin-bottom:2px;
  display:flex;align-items:center;gap:8px}

.eq-list{background:var(--fill-soft);border:1px solid var(--line);
  border-radius:12px;padding:13px;position:sticky}
.eq-sc .eq-list{top:calc(var(--eqbar) + var(--eqtb) + 10px)}
.eq-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;
  cursor:pointer;margin-bottom:4px;border:1px solid transparent;transition:background .15s}
.eq-item:hover{background:var(--fill)}
.eq-item.on{background:var(--accent-fill);border-color:var(--accent-edge)}
.eq-n{flex:0 0 22px;height:22px;border-radius:7px;background:var(--fill-strong);
  font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);
  display:flex;align-items:center;justify-content:center}
.eq-item.on .eq-n{background:var(--accent);color:var(--on-accent)}
.eq-b{flex:1;min-width:0;font-size:.78rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}
.eq-item.on .eq-b{color:var(--text)}
.eq-k{font-size:var(--fs-tag);opacity:.6}

/* ══ شريطُ حال السؤال وأفعاله — سطرٌ واحد ══
   🔴 كانت ثلاثةَ صفوفٍ بعرض العمود: لافتةُ القفل (خمسةُ أسطر)، و«اصنع
      بديلاً مكافئاً»، و«اقرن بسؤالٍ قائم» — وكلُّ صفٍّ يشرح نفسه
      بجملةٍ كاملة. والجملةُ تُقرأ مرّةً ثمّ تُعرَف، ثمّ تبقى تأكل
      صدرَ العمود في كلّ سؤالٍ يُفتح بعدها.
   🔑 الحالُ يُعرض · والفعلُ يُسمّى · والشرحُ يُطلب. فالحالُ رقيقةٌ،
      والفعلُ كلمتان، والجملةُ الكاملة في title عند الوقوف.
   ⚠️ والشريط محايدُ اللون والرقيقةُ وحدها كهرمانية: صفٌّ كاملٌ
      كهرمانيّ يصيح في كلّ سؤالٍ مقفل، والصياحُ الدائم لا يُسمع. */
.eq-strip{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  background:var(--fill-soft);border:1px solid var(--line);
  border-radius:11px;padding:7px 11px;margin-bottom:9px}
.eq-strip-g{flex:1 1 0;min-width:0}
.eq-lockc{flex:0 0 auto;white-space:nowrap;cursor:help;
  font-family:'Almarai';font-weight:700;font-size:var(--fs-tag);
  color:var(--warn);background:var(--warn-soft);
  border:1px solid var(--warn-line);border-radius:999px;padding:4px 11px}
.eq-sb{flex:0 0 auto;cursor:pointer;white-space:nowrap;
  background:var(--fill);border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:6px 13px;
  font-family:'Almarai';font-weight:700;font-size:var(--fs-tag);
  transition:border-color .16s,color .16s,filter .16s}
.eq-sb:hover{border-color:var(--accent);color:var(--accent)}
.eq-sb.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.eq-sb.go:hover{filter:brightness(1.08);color:var(--on-accent);border-color:var(--accent)}
.eq-strip-d{flex:1 1 100%;font-size:var(--fs-meta);color:var(--text-muted);
  line-height:1.85;border-top:1px solid var(--line);padding-top:9px}
.eq-strip-d div + div{margin-top:3px}

/* علامةُ «i» — ٢٢px رسماً و٣٤ إصابةً، فالدائرة الصغيرة تُخطأ باللمس.
   ⚠️ وتبقى مع title ولا تُغني عنها: اللمسُ لا وقوفَ فيه. */
.eq-i-b{flex:0 0 auto;width:22px;height:22px;border-radius:50%;cursor:pointer;
  background:var(--fill-strong);border:1px solid var(--line);color:var(--text-muted);
  font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);line-height:1;
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:background .16s,color .16s,border-color .16s}
.eq-i-b::after{content:'';position:absolute;inset:-6px}
.eq-i-b:hover,.eq-i-b[aria-expanded="true"]{background:var(--accent);
  border-color:var(--accent);color:var(--on-accent)}

/* الوسط: تحرير بهيئة شاشة الطالب */
.eq-main{scroll-margin-top:calc(var(--eqbar) + var(--eqtb) + 14px)}
/* ⚠️ والعمودُ اتّسع، فلا يُترك النثرُ يتّسع معه: العينُ تُخطئ العودةَ
   إلى أوّل السطر بعد ~٧٥ حرفاً — وهي العلّة نفسها التي قسمت عروضَ
   القراءة في base.css. الصندوقُ يكبر، والسطرُ لا.
   🔑 وبـch لا بالبكسل: القياس حروفٌ لا مسافة، فيأخذ كلُّ حقلٍ
      عرضاً بحسب قياسه هو.
   ⚠️ ويُستثنى **نصُّ السؤال**: الوسطُ معاينةٌ بفئات شاشة الطالب،
      فلو ضاق عمّا تحته لرأى المؤلّف تخطيطاً لا يراه الطالب. وهو
      سطرٌ أو سطران لا فقرة. ويُستثنى JSON: يُمسح بالعين ولا يُقرأ. */
.eq-main textarea{max-width:78ch}
.eq-main .eq-qt,
.eq-main textarea.eq-wide{max-width:none}
.eq-qt{min-height:80px;font-family:'Almarai';font-weight:700;font-size:var(--fs-q);line-height:1.85}
.eq-opts{margin-top:14px}
.eq-opt{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--fill-soft);border:1px solid var(--line);
  border-radius:11px;padding:10px 13px;margin-bottom:9px}
.eq-opt.ok{border-color:var(--ok-edge);background:var(--ok-soft)}
.eq-ob{flex:1 1 220px;width:auto;padding:10px 12px;font-size:var(--fs-ui)}
.eq-c{display:flex;align-items:center;gap:5px;font-size:var(--fs-tag);color:var(--text-muted);
  white-space:nowrap;cursor:pointer;font-family:'Almarai';font-weight:700}
.eq-c input{width:auto}
.eq-dx{width:auto;flex:0 0 206px;padding:8px 10px;font-size:.78rem}
.eq-dx.miss{border-color:var(--danger-edge);background:var(--danger-soft)}

/* ═══════════ شاشة أهداف المادة (143) ═══════════
   وتصميمُها يتبع غرضَها: **فحصٌ لا تصفُّح.** فالأعدادُ أعلى الصفحة تقول
   كم بنداً لا سؤالَ يقيسه وكم بلا علاجٍ موصول — وهي العيوبُ التي لا تُرى
   في قائمة أسماء. والبندُ مطويٌّ حتى يُفتح: ستّون بنداً مفتوحةً تُتصفَّح
   ولا تُقرأ، وما يُتصفَّح لا يُراجَع. */
.ob-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:10px;margin:14px 0 18px}
.ob-t{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.ob-t .n{font-family:'Almarai';font-weight:800;font-size:1.6rem;line-height:1.2}
.ob-t .l{font-size:.76rem;color:var(--text-muted);font-weight:700;margin-top:2px}
.ob-t.flag{background:var(--warn-fill);border-color:var(--warn-edge)}
.ob-t.flag .n,.ob-t.flag .l{color:var(--warn)}

.ob-find{display:flex;gap:10px;align-items:center;margin:0 0 14px}
.ob-find input{flex:1 1 220px}
.ob-g[hidden],.ob-i[hidden],.ob-s[hidden]{display:none!important}

/* العنوانُ العريض: صفٌّ كصفّ الفرع — ولا يحمل صنف `ed-row` قصداً،
   فذاك مربوطٌ في شاشة المقرّر بفتح تحرير الدرس. */
.ob-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--fill);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:8px}

.ob-i{background:var(--surface);border:1px solid var(--line);border-radius:11px;
  margin:0 0 7px 0;margin-inline-start:18px;overflow:hidden}
.ob-i[open]{border-color:var(--accent-line)}
.ob-i > summary{cursor:pointer;padding:10px 13px;display:flex;gap:9px;
  align-items:baseline;flex-wrap:wrap;list-style:none}
.ob-i > summary::-webkit-details-marker{display:none}
.ob-i > summary:hover{background:var(--fill)}
.ob-code{flex:0 0 auto;font-size:.72rem;font-weight:700;direction:ltr;unicode-bidi:isolate;
  background:var(--fill);border:1px solid var(--line);border-radius:7px;padding:2px 7px;
  color:var(--text-muted)}
.ob-nm{flex:1 1 200px;min-width:0;font-weight:700;font-size:.86rem;unicode-bidi:plaintext}
.ob-n{flex:0 0 auto;font-size:.74rem;color:var(--text-muted);font-weight:700}
.ob-ok{flex:0 0 auto;font-size:.72rem;font-weight:700;color:var(--ok)}
.ob-wn{flex:0 0 auto;font-size:.72rem;font-weight:700;color:var(--warn)}
.ob-b{padding:0 14px 14px;border-top:1px solid var(--line)}
.ob-f{margin-top:12px}
.ob-f .k{font-size:.72rem;font-weight:800;color:var(--text-muted);display:block;margin-bottom:4px}
.ob-f .v{font-size:.84rem;line-height:1.85;background:var(--fill);
  border-radius:10px;padding:10px 12px;unicode-bidi:plaintext}
.ob-f.rx .v{border-inline-start:3px solid var(--accent-line)}

/* منتقي الهدف (139) — سطرٌ كاملٌ أعلى نصّ السؤال، لأنّه يحكم ما تحته:
   الهدفُ ما يُقاس، والتشخيصُ تحته يقول كيف أخطأ الطالبُ فيه.
   ⚠️ وخلوُّه تحذيرٌ لا خطأ (‎warn‎ لا ‎danger‎ كـ‎.eq-dx‎): أسئلةُ المنصّة
      كلُّها بلا هدفٍ اليوم، فلو صاح أحمرَ في أربعمئة سؤالٍ لصار لوناً
      يُعتاد فلا يُرى — والأحمرُ يُحفظ لما يمنع الحفظ. */
.eq-obj{width:100%;margin:0 0 14px;padding:9px 11px;font-size:.8rem}
.eq-obj.miss{border-color:var(--warn-edge);background:var(--warn-fill)}
.eq-sp{flex:0 0 206px}
.eq-x{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;padding:4px}
.eq-x:hover{color:var(--danger)}
.eq-addo{font-size:.8rem;padding:9px 16px;flex:0 0 auto}
.eq-del{color:var(--danger)!important}
/* ⚠️ وأزرارُ السؤال لا تتمدّد بتمدّد العمود: ‎button.btn‎ فيها
   ‎flex:1‎، فلمّا اتّسع الوسط صار «حذف» بعرض ثلاثمئة بكسل — يصيح
   بحجمه لا بمعناه، ويستوي عند العين بـ«حفظ». القياسُ من النصّ. */
.eq-main > .nav{flex-wrap:wrap}
.eq-main > .nav .btn{flex:0 0 auto;padding-inline:28px}

/* حكمٌ على كتلةٍ قبل قبولها — معاينةُ الاستيراد وحدها تستعمله اليوم،
   إذ صارت جاهزيةُ الاختبار شريطَ أوامرٍ ولافتةً أعلى الصفحة. */
.eq-ready{background:var(--danger-soft);border:1px solid var(--danger-line);
  border-radius:11px;padding:12px}
.eq-ready.ok{background:var(--ok-soft);border-color:var(--ok-line)}
.eq-iss{font-size:var(--fs-meta);color:var(--warn-text);line-height:1.75;margin-top:8px}
.eq-ok{font-family:'Almarai';font-weight:800;font-size:.83rem;color:var(--ok);margin-top:8px}

/* زرّ الاختبار في صفّ الدرس */
.eq-go{background:var(--accent-fill);border:1px solid var(--accent-line);
  color:var(--accent);border-radius:9px;padding:8px 12px;cursor:pointer;
  font-family:'Almarai';font-weight:700;font-size:.76rem;white-space:nowrap}
.eq-go:hover{background:var(--accent-fill)}
.eq-go.warn{background:var(--warn-fill);border-color:var(--warn-edge);color:var(--warn)}
.eq-go:disabled{background:var(--fill);border-color:var(--line);
  color:var(--text-muted);opacity:.55;cursor:not-allowed}

@media(max-width:1000px){
  .eq{grid-template-columns:1fr}
  .eq-list{position:static}
  .eq-dx,.eq-sp{flex:1 1 100%}
  /* وفي الضيّق يلتفّ ويُترك يلتفّ: لصوقُه هنا يأكل نصف الشاشة،
     وبزواله يزول سببُ منع الالتفاف.
     ⚠️ ويعود كلُّ شيءٍ قابلاً للانكماش: ‎flex:0 0 auto‎ أعلاه مُنع
        الانكماشَ ليثبت الارتفاع، ولو بقي في الجوّال لدفع الشريطُ
        الصفحةَ إلى تمريرٍ أفقيّ — قيس عند ٣٩٠px فكان العرض ٤٥٧. */
  .eq-tb{position:static;flex-wrap:wrap}
  .eq-kinds{flex:0 1 auto;flex-wrap:wrap;overflow:visible}
  .eq-acts{flex:1 1 auto;min-width:0;flex-wrap:wrap}
  .eq-state{flex:0 1 auto;margin-inline-start:0}
  /* 🆕 b96 · ودرجاتُ الطيّ تسقط هنا كلُّها: الالتفافُ يُغني عن الطيّ،
     ومع overflow:visible لا فيضَ يُقاس فلا أثرَ يُرسم. وتُبطَل
     صراحةً ولا تُترك لقياسٍ يتغيّر: صنفٌ بقي من عرضٍ أوسع يطوي
     تسمياتٍ لا شيءَ يضيّقها — وذاك اختفاءٌ بلا سبب. */
  .eq-kinds.tight .eq-kb > span{display:inline}
  .eq-kinds.m-s,.eq-kinds.m-e,.eq-kinds.m-s.m-e{
    -webkit-mask-image:none;mask-image:none}
  .eq-main{scroll-margin-top:var(--eqbar)}
}

/* ══════════════════════════════════════════════════════════
   الشريط الهرميّ — رأسٌ ثابت وجسدٌ يُمرَّر
   العقدة هي الخانة · والقسم مظروف · والنصّ شارة.
   ⚠️ العرض يختار محوراً واحداً: الترتيب (قسم←نصّ←بند) للطالب،
      والقياس (خانة←نسخُها) للمؤلّف — وهذا الشريط للمؤلّف.
   ⚠️ موضع هذه الكتلة لازم: تنقض .eq-list أعلاه و@media التي قبلها.
   ══════════════════════════════════════════════════════════ */

.eq-list{display:flex;flex-direction:column;gap:9px;padding:11px;overflow-y:auto}
.eq-sc .eq-list{max-height:calc(100vh - var(--eqbar) - var(--eqtb) - 20px)}

/* الرأس — لا يتحرّك بحركة البيانات */
.eq-top{flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.eq-sr{padding:8px 11px;font-size:.8rem}
.eq-f{display:flex;gap:5px;flex-wrap:wrap}
.eq-fb{background:var(--fill);border:1px solid var(--line);color:var(--text-muted);
  border-radius:8px;padding:4px 8px;cursor:pointer;white-space:nowrap;
  font-family:'Almarai';font-weight:700;font-size:var(--fs-tag)}
.eq-fb:hover{border-color:var(--accent);color:var(--accent)}
.eq-fb.on{background:var(--accent-fill);border-color:var(--accent-edge);color:var(--accent)}
.eq-fb.warn.on{background:var(--warn-fill);border-color:var(--warn-edge);color:var(--warn)}
/* 🔑 «سؤال جديد» فعلُ المحرّر الأول، والاستيرادُ فعلُ مرّةٍ في عمر
   الاختبار — فلا يقتسمان الصفَّ نصفين كما كانا. الأولُ زرٌّ رئيسٌ
   بكلمته، والثاني أيقونةٌ مربّعة بجانبه. */
.eq-adds{display:flex;gap:6px}
.eq-new{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);
  border-radius:10px;padding:11px 12px;cursor:pointer;line-height:1.5;
  font-family:'Almarai';font-weight:800;font-size:var(--fs-ui);
  transition:filter .16s,transform .12s}
.eq-new:hover{filter:brightness(1.08)}
.eq-new:active{transform:translateY(1px)}
.eq-new-p{font-size:1.05rem;line-height:1}
.eq-new-c{font-size:.68rem;opacity:.75}
.eq-ab{flex:1;background:var(--fill);border:1px solid var(--line);
  color:var(--text);border-radius:9px;padding:7px 0;cursor:pointer;font-size:.82rem}
.eq-ab:hover{border-color:var(--accent);color:var(--accent)}
/* بلا ارتفاعٍ مكتوب: يتمدّد إلى ارتفاع جاره بالمرونة، فلا يتباعد
   الرقمان حين يتغيّر حشوُ الزرّ الرئيس. */
.eq-ab.ico{flex:0 0 44px;padding:0;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center}

.addmenu{position:fixed;z-index:200;
         min-width:270px;max-width:min(320px,84vw);padding:8px;
         border-radius:16px;background:var(--surface-2);
         border:1px solid var(--accent-line);
         box-shadow:0 12px 32px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06)}
.addmenu button{display:flex;align-items:flex-start;gap:12px;
                width:100%;padding:11px 14px;border:0;border-radius:11px;
                background:transparent;color:inherit;cursor:pointer;text-align:start}
.addmenu button:hover:not(:disabled){background:var(--accent-soft)}
.addmenu button:disabled{opacity:.4;cursor:default}
.addmenu i{flex:0 0 22px;font-style:normal;font-size:1.05rem;
           line-height:1.4;opacity:.85}
.addmenu b{display:block;font-size:var(--fs-ui);font-weight:700}
.addmenu span{display:block;font-size:.8em;opacity:.62;margin-top:1px}
.addmenu hr{border:0;border-top:1px solid var(--accent-line);margin:6px 10px}

/* شارة الفلتر الفعّال — الحالة تسكن حيث ينظر المستخدم، ولو كان الزناد بعيداً */
.eq-chipf{display:flex;align-items:center;gap:6px;width:100%;cursor:pointer;
  background:var(--accent-fill);border:1px solid var(--accent-edge);
  color:var(--accent);border-radius:9px;padding:5px 9px;
  font-family:'Almarai';font-weight:700;font-size:var(--fs-tag)}
.eq-chipf:hover{background:var(--danger-fill);
  border-color:var(--danger-edge);color:var(--danger)}

/* الجسد — هو وحده الذي يُمرَّر
   ⚠️ min-height:0 لازم: عنصر المرونة لا ينكمش تحت مقاس محتواه بلا هذا،
      فيتمدّد الصندوق ولا يعمل overflow أبداً. */
.eq-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding-inline-end:3px}
.eq-body::-webkit-scrollbar{width:7px}
.eq-body::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:7px}
.eq-body::-webkit-scrollbar-track{background:transparent}

/* رأس القسم — مظروفٌ يُطوى */
.eq-grp{display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:9px;
  cursor:pointer;background:var(--fill);border:1px solid var(--line);
  margin:11px 0 5px;font-family:'Almarai';font-weight:800;font-size:.76rem}
.eq-grp:first-child{margin-top:0}
.eq-grp:hover{border-color:var(--accent-edge)}
.eq-gt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-gc{font-size:var(--fs-tag);color:var(--text-muted);font-weight:400;white-space:nowrap}
.eq-ar{font-size:var(--fs-tag);color:var(--text-muted)}

/* شريط نصوص القسم — جردٌ ومنفذُ تحرير، لا مستوى في الشجرة */
.eq-pgs{display:flex;gap:5px;flex-wrap:wrap;padding:0 4px 8px}
.eq-pgc{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-tag);color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:7px;padding:2px 6px;cursor:pointer}

/* صفّ الخانة — نقرةٌ على رأسه تفتح المقارنة، وعلى نسخةٍ تفتح التحرير */
.eq-var{border:1px solid var(--line);border-radius:10px;margin-bottom:5px;
  background:var(--fill-soft);overflow:hidden}
.eq-var.on{border-color:var(--accent-edge);background:var(--accent-soft)}
.eq-vh{display:flex;align-items:center;gap:7px;padding:8px 9px;cursor:pointer}
.eq-vh:hover{background:var(--fill-soft)}
.eq-vk{font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);color:var(--accent);white-space:nowrap}
.eq-vb{flex:1;min-width:0;font-size:.76rem;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-subs{display:flex;flex-wrap:wrap;gap:5px;padding:0 9px 9px}
.eq-sub{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-tag);color:var(--text-muted);
  background:var(--fill);border:1px solid var(--line);
  border-radius:8px;padding:3px 7px;cursor:pointer}
.eq-sub:hover{border-color:var(--accent);color:var(--accent)}
.eq-sub.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}

/* الحكم — و«لا فحص» ليست ✅ */
.eq-flag{font-size:var(--fs-tag);white-space:nowrap}
.eq-flag.ok{color:var(--ok)}
.eq-flag.warn{color:var(--warn)}
.eq-flag.bad{color:var(--danger)}
.eq-flag.none{color:var(--text-muted);opacity:.8}
.eq-none{font-size:var(--fs-meta);color:var(--text-muted);text-align:center;padding:18px 6px;line-height:1.8}

/* ══ شاشة مقارنة نسخ الخانة ══
   الأعمدة تُضبط في الشيفرة — عددها عدد النسخ. */
.cmp{display:grid;gap:12px;align-items:start}
.cmp-col{background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
.cmp-col.on{border-color:var(--accent-edge)}
.cmp-h{display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.cmp-p{font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);color:var(--accent)}
.cmp-lb{font-family:'Almarai';font-weight:700;font-size:var(--fs-tag);color:var(--text-muted);margin:12px 0 6px}
.cmp-q{font-family:'Almarai';font-weight:700;font-size:.87rem;line-height:1.9}
.cmp-o{display:flex;align-items:flex-start;gap:7px;font-size:.79rem;line-height:1.8;
  background:var(--fill-soft);border:1px solid var(--line);
  border-radius:9px;padding:7px 9px;margin-bottom:6px}
.cmp-o.ok{border-color:var(--ok-edge);background:var(--ok-soft)}
.cmp-tx{flex:1;min-width:0}
.cmp-dx{font-size:var(--fs-tag);color:var(--dx);background:var(--dx-soft);
  border:1px solid var(--dx-line);border-radius:7px;padding:1px 6px;white-space:nowrap}
.cmp-mark{outline:1px dashed var(--danger-edge);outline-offset:2px}
.cmp-note{font-size:.76rem;color:var(--text-muted);line-height:1.8}

/* الجوّال — نقضٌ لما سبق: هذه الكتلة بعد @media القائمة فتعلوها */
@media(max-width:1000px){
  /* ⚠️ .eq-sc لازمة هنا: max-height صارت تُكتب بها أعلاه، فقاعدةٌ
     بصنفٍ واحد لا تنقضها مهما تأخّرت. */
  .eq-sc .eq-list{max-height:none}
  .eq-body{overflow:visible}
  .cmp{grid-template-columns:1fr!important}
}

/* ═══ محرّر المصادر ═══ */
.it-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--fill-soft);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin-bottom:8px}
.it-b{background:var(--fill);border:1px solid var(--line);
  color:var(--text);border-radius:9px;padding:8px 10px;cursor:pointer;
  font-family:'Almarai';font-weight:700;font-size:.76rem;white-space:nowrap}
.it-b:hover{border-color:var(--accent);color:var(--accent)}
.it-b:disabled{opacity:.3;cursor:not-allowed}
/* 🔒 مقفول لا معطَّل: يُنقر فيُعاين — فالباهتُ الميّت يقول «لا شيء هنا»،
   والمقفولُ الحيُّ يقول «يُرى ولا يُغيَّر» */
.it-b.lk,.eq-go.lk{background:var(--fill);border-color:var(--line);
  color:var(--text-muted);cursor:pointer}
.it-b.lk:hover,.eq-go.lk:hover{border-color:var(--text-muted);color:var(--text)}
.it-b.wide{padding:8px 13px}
.it-ord{display:flex;flex-direction:column;gap:3px}
.it-ord .it-b{padding:2px 8px;font-size:var(--fs-tag);line-height:1.5}

.it-kinds{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
.it-k{display:flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--fill-soft);border:1px solid var(--line);
  border-radius:10px;padding:11px 12px;color:var(--text);
  font-family:inherit;font-size:.79rem;text-align:right;transition:border-color .16s}
.it-k:hover{border-color:var(--accent-edge)}
.it-k.on{border-color:var(--accent);background:var(--accent-fill);color:var(--accent)}
.it-k span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ الأقسام والنصوص المشتركة ═══ */
.q-sec{font-family:'Almarai';font-weight:800;font-size:.78rem;color:var(--warn);
  letter-spacing:.06em;margin-bottom:11px;padding-inline-start:11px;
  border-inline-start:3px solid var(--warn-edge)}
.eq-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.eq-meta .fl{font-size:.76rem;margin-bottom:6px}
.eq-meta input,.eq-meta select{padding:9px 11px;font-size:.83rem}
.eq-pg{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:9px;
  background:var(--fill-soft);border:1px solid var(--line);margin-bottom:5px}
.eq-pt{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-pu{font-size:var(--fs-tag);color:var(--text-muted);margin-top:2px}
.eq-pg .it-b{padding:5px 7px;font-size:var(--fs-tag)}
@media(max-width:1000px){ .eq-meta{grid-template-columns:1fr} }

/* ═══ حاويات المحرّر: القسم والنصّ المشترك ═══ */
.eq-bar{width:100%;display:block;border-radius:11px;padding:11px 14px;margin-bottom:9px;
  border:1px solid var(--line);background:var(--fill-soft);text-align:start}
.eq-bar.add{cursor:pointer;border-style:dashed;color:var(--text-muted);
  font-family:'Almarai';font-weight:700;font-size:.78rem;transition:color .16s,border-color .16s}
.eq-bar.add:hover{color:var(--accent);border-color:var(--accent-edge)}
.eq-bar.sec{background:var(--warn-soft);border-color:var(--warn-line);
  display:flex;align-items:center;gap:9px}
.eq-bar.pg{background:var(--accent-soft);border-color:var(--accent-line)}
.eq-brow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.eq-bt{font-family:'Almarai';font-weight:800;font-size:.83rem}
.eq-bar.sec .eq-bt{color:var(--warn)}
.eq-bar.pg  .eq-bt{color:var(--accent)}
.eq-bs{font-size:var(--fs-tag);color:var(--text-muted);margin-left:auto}
.eq-pgbox{border-color:var(--accent-edge)}

/* زرُّ مصطلح البطاقة (158 · b131) — يسكن فراغَ سطرِ الهدف ولا يأخذ
   سطراً. 🔴 وكان سطراً بعنوانٍ ورقاقةٍ و«i»، فيُعلن «بابٌ يُملأ» في كلّ
   سؤالٍ يُفتح — وأكثرُ الأسئلة لا مصطلحَ لها. فإعلانٌ دائمٌ عن بابٍ
   نادرِ الدخول يُعلّم العينَ أن تتخطّاه يومَ يُحتاج. */
/* 🔑 والارتفاعُ يستوي بالبناء لا برقمٍ يُجرَّب: ‎stretch‎ تجعل الزرَّ
   بطول المنتقي مهما تغيّر حشوُه أو خطُّه. ورقمٌ محسوبٌ باليد يصيب
   اليومَ ويخطئ يومَ يُعدَّل أحدُهما — وهو خطأٌ لا يصيح. */
.eq-mrow{display:flex;align-items:stretch;gap:10px;margin-bottom:14px}
.eq-mob{flex:1 1 0;min-width:0;display:flex}
.eq-mob > *{flex:1 1 auto;margin:0}
.eq-cb{flex:0 0 auto;cursor:pointer;white-space:nowrap;max-width:210px;
  overflow:hidden;text-overflow:ellipsis;
  font-family:'Almarai';font-weight:700;font-size:.76rem;
  background:var(--fill);border:1px solid var(--line);color:var(--text-muted);
  border-radius:9px;padding:7px 13px;transition:color .16s,border-color .16s}
.eq-cb:hover:not(:disabled){border-color:var(--ok-edge);color:var(--ok)}
.eq-cb.on{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.eq-cb:disabled{opacity:.45;cursor:not-allowed}
.eq-cb.bad{color:var(--warn);border-color:var(--warn-line)}
.eq-bar.cd{background:var(--ok-soft);border-color:var(--ok-line);margin-top:9px}
.eq-bar.cd .eq-bt{color:var(--ok)}

/* شبكةٌ لا قائمة: المصطلحُ كلمةٌ وتعريفُه سطر، والعشرون في عمودٍ واحد
   تمرير — وفي ثلاثة أعمدة لمحة. */
.cd-grid{display:grid;gap:7px;grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
.cd-t{display:block;text-align:start;cursor:pointer;padding:8px 11px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  transition:border-color .16s,background .16s}
.cd-t:hover{border-color:var(--ok-edge);background:var(--ok-soft)}
.cd-t.sug{border-color:var(--ok-line);background:var(--ok-soft)}
.cd-t.on{border-color:var(--ok-edge);background:var(--ok-fill)}
.cd-s{font-weight:800;color:var(--ok);margin-inline-end:5px}
.cd-f{font-family:'Almarai';font-weight:800;font-size:.84rem;color:var(--text)}
.cd-b{display:block;font-size:var(--fs-tag);color:var(--text-muted);
  margin-top:3px;line-height:1.6}
.cd-on{display:block;font-size:var(--fs-tag);font-weight:800;color:var(--ok);margin-top:4px}

/* شريط أدوات السؤال والفقرة
   🔴 b96 · وكان زرُّه يُسمّى ‎.eq-tb‎ — وهو اسمُ **حاوية شريط الأوامر**
      أعلى الشاشة. اسمان لشيئين، والثاني لاحقٌ وبنفس الخصوصية فيفوز.
      قيس المحسوبُ على الشريط العلويّ فإذا هو يلبس ثوبَ الزرّ: خلفيّةُ
      ‎--fill‎ لا ‎--page‎ · إطارٌ كامل لا حدٌّ سفليّ · استدارة ٨px ·
      حشو ‎6px 10px‎ لا ‎9px 0 10px‎ · ‎cursor:pointer‎ · ‎.76rem‎ —
      **ويتلوّن الشريط كلُّه بلون التمييز عند المرور عليه.**
   ⚠️ وثلاثةٌ تتقارب أسماؤها فتُفرَّق هنا مرّةً واحدة:
        ‎.eq-tb‎    حاوية شريط الأوامر (سطر ٧٠٧)
        ‎.eq-tbb‎   زرٌّ فيها — إعدادات · معاينة · نشر
        ‎.eq-tool‎  زرٌّ في شريط أدوات السؤال — وهو هذا. */
.eq-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.eq-tool{background:var(--fill);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:6px 10px;cursor:pointer;font-family:inherit;font-size:.76rem}
.eq-tool:hover{border-color:var(--accent);color:var(--accent)}
.eq-tool.on{background:var(--accent-fill);border-color:var(--accent-edge);color:var(--accent)}
.eq-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.eq-hint{font-size:var(--fs-tag);color:var(--text-muted);opacity:.7;margin-right:auto}
.eq-md{margin-bottom:9px;padding:8px 11px;font-size:.8rem}

/* ═══ منطقة رفع ملف الاستيراد ═══ */
.drop{border:2px dashed var(--line);border-radius:12px;padding:20px 16px;
  text-align:center;margin-bottom:12px;font-size:.85rem;color:var(--text-muted);
  transition:border-color .18s,background .18s}
.drop.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.drop-i{font-size:1.7rem;margin-bottom:7px;opacity:.75}
.drop-a{color:var(--accent);cursor:pointer;text-decoration:underline;
  font-family:'Almarai';font-weight:700}
.drop-s{font-size:var(--fs-tag);opacity:.65;margin-top:7px}

/* ══ مشغّل الصوت داخل الدرس (b30) ══
   color-scheme يجعل المتصفح يرسم أزرار المشغّل الأصلية
   بألوان السمة — وإلا بقي شريطٌ فاتحٌ ناشزٌ في الوضع الليلي. */
.aud{background:var(--fill-soft);border:1px solid var(--line);border-radius:var(--r);
 padding:12px;margin:0 0 14px;color-scheme:light dark}
.aud-p{width:100%;height:40px;display:block}
.aud-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.aud-b{background:var(--fill);border:1px solid var(--line);border-radius:9px;
 padding:7px 12px;font-family:inherit;font-size:var(--fs-meta);color:var(--text);cursor:pointer}
.aud-b:hover{border-color:var(--accent);color:var(--accent)}
.aud-note{font-size:var(--fs-meta);color:var(--text-muted)}
.aud-err{font-size:var(--fs-meta);color:var(--danger-text)}

/* ══ المحاكاة التفاعلية داخل الدرس (b57) ══
   .sim.full تُحرّك نفس عنصر DOM إلى ملء الشاشة بـCSS وحده — لا يُعاد
   إنشاء الإطار، فلا تُفقد الرسالة (contentWindow) ولا حالة المحاكي. */
.sim{background:var(--fill-soft);border:1px solid var(--line);border-radius:var(--r);
 margin:0 0 14px;overflow:hidden}
.sim-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;
 padding:6px 8px;border-bottom:1px solid var(--line)}
.sim-note{font-size:var(--fs-meta);color:var(--text-muted)}
.sim-b{background:var(--fill);border:1px solid var(--line);border-radius:9px;
 padding:5px 11px;font-family:inherit;font-size:var(--fs-meta);color:var(--text);cursor:pointer}
.sim-b:hover{border-color:var(--accent);color:var(--accent)}
.sim-f{display:block;width:100%;height:600px;border:0;background:#fff}
.sim.full{position:fixed;inset:0;z-index:300;margin:0;border-radius:0;
 display:flex;flex-direction:column;background:var(--page)}
.sim.full .sim-f{flex:1;height:auto}

/* ══ زرّ الرفع الملتصق (b32) ══ */
.mf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
.mf-up{background:var(--fill);border:1px solid var(--line);border-radius:9px;
 padding:6px 12px;font-family:inherit;font-size:var(--fs-meta);
 color:var(--text);cursor:pointer;white-space:nowrap}
.mf-up:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.mf-up:disabled{opacity:.55;cursor:default}
.mf-note{font-size:var(--fs-meta);color:var(--text-muted)}
.mf-note.bad{color:var(--danger-text)}

/* ══════════════════════════════════════════════════════════════
   بيان — أنماط التحليلات · b50
   كتلةٌ واحدة كاملة. لا تُضاف لها قواعدُ `.an-` في مكانٍ آخر:
   التراكمُ عبر النسخ هو ما كسر b48 و b49.
   ولا لونَ خارج رموز base.css، فتتبع السِمتين معاً.
   ══════════════════════════════════════════════════════════════ */

/* ── الفلاتر والتبويب ── */
.an-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.an-sel{flex:1 1 140px;min-width:0;padding:10px 12px;border-radius:11px;
        border:1px solid var(--line);background:var(--surface-2);
        color:var(--text);font:inherit}
.an-tabs{display:flex;gap:8px;margin-bottom:14px}
.an-tab{flex:1;padding:10px;border-radius:11px;cursor:pointer;font:inherit;
        border:1px solid var(--line);background:var(--fill-soft);color:var(--text-muted)}
.an-tab.on{background:var(--accent-fill);border-color:var(--accent-line);
           color:var(--text);font-weight:600}

/* ── الصفّ العامّ ── */
.an-row{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
        margin-bottom:9px;background:var(--surface);box-shadow:var(--shadow);cursor:pointer}
.an-row.static{cursor:default}
.an-row:not(.static):hover{border-color:var(--line-strong)}
.an-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.an-n{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.an-n.high{color:var(--ok)} .an-n.mid{color:var(--warn)}
.an-n.low{color:var(--danger)}  .an-n.na{color:var(--text-muted)}
.an-n.flat{color:var(--accent)}

/* ── الشريط ── */
.an-track{height:6px;border-radius:99px;background:var(--fill-strong);
          overflow:hidden;margin:8px 0 7px}
.an-fill{height:100%;border-radius:99px;transition:width .5s ease}
.an-fill.high{background:var(--ok-edge)}
.an-fill.flat{background:var(--accent-edge)}
.an-fill.mid{background:var(--warn-edge)}
.an-fill.low{background:var(--danger-edge)}
.an-fill.na{background:var(--line-strong)}
/* العيّنةُ الصغيرة تبهت ولا تُخفى — العَلَمُ يُخبر والحذفُ يُخفي */
.an-fill.thin{opacity:.42}
.an-thin{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:99px;
         font-size:.78rem;background:var(--warn-soft);color:var(--warn);
         border:1px solid var(--warn-line)}

.an-dx{margin-top:7px;font-size:.9rem;color:var(--text-muted);line-height:1.7}
.an-dx .an-c{display:inline-block;margin-inline-start:6px;padding:1px 8px;
             border-radius:99px;background:var(--fill);font-variant-numeric:tabular-nums}
.an-drop{margin-top:6px;font-size:.84rem;color:var(--warn)}
.an-more{width:100%;padding:11px;margin:2px 0 6px;border-radius:11px;cursor:pointer;
         font:inherit;border:1px solid var(--line);background:var(--fill-soft);
         color:var(--text-muted)}
.an-more:hover{border-color:var(--line-strong);color:var(--text)}

/* ── الحلقة ── */
.an-gauge{position:relative;width:168px;height:168px;margin:4px auto 8px}
.an-gauge.sm{width:104px;height:104px;margin:0 auto}
/* تسير من الأعلى يساراً — اتجاه التقدّم في صفحةٍ عربية */
.an-gauge svg{width:100%;height:100%;display:block;transform:scaleX(-1)}
.an-gbg{fill:none;stroke:var(--fill-strong);stroke-width:11}
.an-gfg{fill:none;stroke-width:11;stroke-linecap:round;transition:stroke-dasharray .7s ease}
.an-gfg.high{stroke:var(--ok-edge)}
.an-gfg.flat{stroke:var(--accent-edge)}
.an-gfg.mid{stroke:var(--warn-edge)}
.an-gfg.low{stroke:var(--danger-edge)}
.an-gfg.na{stroke:var(--line-strong)}
.an-gfg.thin{opacity:.42}
.an-gt{position:absolute;inset:0;display:flex;flex-direction:column;
       align-items:center;justify-content:center;gap:2px;pointer-events:none}
.an-gn{font-size:2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.an-gauge.sm .an-gn{font-size:1.28rem}
.an-gn.high{color:var(--ok)} .an-gn.flat{color:var(--accent)} .an-gn.mid{color:var(--warn)}
.an-gn.low{color:var(--danger)} .an-gn.na{color:var(--text-muted)}
.an-gs{font-size:.8rem;color:var(--text-muted)}
.an-gauge.sm .an-gs{font-size:.72rem}

/* ── بطاقة الرأس: الاتجاه متنٌ والرقمان سياقُه ── */
.an-top{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.an-tl{flex:1 1 280px;min-width:0}
.an-tr{flex:0 0 auto}
.an-head{font-size:var(--fs-read);line-height:1.75;margin-bottom:8px}
.an-foot{font-size:.78rem;color:var(--text-muted);line-height:1.7;margin-top:10px}
.an-cen{text-align:center}
.an-two{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.an-one{text-align:center;width:130px}
.an-note{font-size:.72rem;color:var(--text-muted);line-height:1.5;margin-top:4px}
.an-sum{text-align:start}

/* ── الرسوم · Chart.js ──
   🔴 الارتفاعُ هنا لا هناك: maintainAspectRatio:false يطلبه من CSS،
      وحاويةٌ بلا ارتفاع تجعل اللوحة تطفح على ما تحتها. */
.an-chart{width:100%;margin:6px 0 2px}
.an-clab{font-size:.76rem;color:var(--text-muted);margin:10px 0 2px;font-weight:600}
.an-cmain{position:relative;width:100%;height:186px}
/* كان: height:96px — ومساحةٌ بهذا الضيق لا تتّسع لعمودٍ ورقمه */
.an-cvol{position:relative;width:100%;height:126px}
.an-cmain canvas,.an-cvol canvas{display:block}

/* ── الاندفاع: تنبيهٌ عن العمل لا حكمٌ على الطالب ⇒ warn لا danger ── */
.an-rush{background:var(--warn-soft);border:1px solid var(--warn-line);
         color:var(--warn-text);border-radius:var(--r);padding:12px 15px;
         margin:12px 0;line-height:1.8;font-size:.92rem}

/* ── حالةُ نمط الخطأ ── */
.an-st{font-size:.76rem;padding:2px 10px;border-radius:99px;white-space:nowrap;
       border:1px solid var(--line);background:var(--fill);color:var(--text-muted)}
.an-st.persistent{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.an-st.partial{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.an-st.cleared{background:var(--ok-fill);border-color:var(--ok-line);color:var(--ok)}

/* ── تفاصيل الإجابة: شريطٌ جانبيّ يقول الحكم قبل أن يُقرأ النصّ ── */
.an-q{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
      margin-bottom:9px;background:var(--surface);box-shadow:var(--shadow);
      border-inline-start:3px solid var(--line-strong)}
.an-q.ok{border-inline-start-color:var(--ok-edge)}
.an-q.no{border-inline-start-color:var(--danger-edge)}
.an-qh{display:flex;gap:10px;align-items:baseline}
.an-qn{flex:0 0 auto;min-width:26px;height:26px;line-height:26px;text-align:center;
       border-radius:8px;background:var(--fill);color:var(--text-muted);
       font-size:.8rem;font-variant-numeric:tabular-nums}
.an-qb{line-height:1.85}
.an-qc{margin-top:8px;font-size:.9rem;color:var(--text-muted)}
/* التشخيصُ متنٌ والإجابةُ سياق — فله أرضيةٌ ووزنٌ أظهر.
   ⚠️ كان على accent: ورثه من أيّام كان accent أخضرَ بيان؛ فلمّا صار
      أزرقَ التفاعل (b61) صار التشخيصُ يبدو زرّاً. ⇒ dx (b62). */
.an-qd{margin-top:9px;padding:10px 12px;border-radius:11px;line-height:1.8;
       background:var(--dx-soft);border:1px solid var(--dx-line);color:var(--dx-text)}
.an-qr{margin-top:9px;padding:10px 12px;border-radius:11px;line-height:1.8;
       background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-text)}

/* ── الجوّال ── */
@media (max-width:560px){
  .an-top{gap:8px}
  .an-tr{flex:1 1 100%}
  .an-cmain{height:168px}
  .an-cvol{height:112px}
  .an-gauge{width:140px;height:140px}
  .an-one{width:120px}
}
/* ══════ البطاقات: القلب والمعاينة ══════
   يخدم editor_cards.js — والقلبُ تحوّلٌ لا استبدالُ محتوى:
   الوجهان في الصندوق نفسه، فلا يختلف ارتفاعُ البطاقة بين حالتيها. */

.bf-wrap{max-width:340px;margin:0 auto}
.bf-top{display:none}                     /* رقم الموضع سقط: يكذب في طابور الطالب */

/* مفتاح «حركة أقل» — checkbox حقيقيّ مخفيّ، والمرسوم غلافٌ فوقه */
.bf-bar{display:flex;justify-content:flex-end;margin-bottom:10px}
.bf-toggle{display:inline-flex;flex-direction:row-reverse;align-items:center;
           gap:8px;cursor:pointer;font-size:.78rem;color:var(--text-muted)}
.bf-toggle input{position:absolute;opacity:0;width:0;height:0}
.bf-track{width:34px;height:19px;border-radius:999px;background:var(--fill);
          border:1px solid var(--line);position:relative;flex:0 0 auto;
          transition:background .18s,border-color .18s}
.bf-knob{position:absolute;top:2px;inset-inline-start:2px;width:13px;height:13px;
         border-radius:50%;background:var(--text-muted);
         transition:transform .18s,background .18s}
.bf-toggle input:checked + .bf-track{background:var(--accent-fill);border-color:var(--accent-edge)}
.bf-toggle input:checked + .bf-track .bf-knob{background:var(--accent);transform:translateX(-15px)}
.bf-toggle input:focus-visible + .bf-track{outline:2px solid var(--accent);outline-offset:2px}

/* المسرح والبطاقة — الارتفاع min(px,dvh): سقفٌ للشاشات الطويلة، ومرونةٌ للقصيرة */
.bf-stage{perspective:1200px}
.bf-stage.bf-out{opacity:0;transform:translateY(5px)}
.bf-card{position:relative;height:min(400px,78dvh);cursor:pointer;
         transform-style:preserve-3d}
.bf-card.flipped{transform:rotateY(180deg)}

.bf-face{position:absolute;inset:0;display:flex;flex-direction:column;
         background:var(--surface);border:1px solid var(--line);border-radius:20px;
         box-shadow:var(--shadow);padding:20px 18px;overflow-y:auto;
         backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bf-back{transform:rotateY(180deg)}
.bf-face textarea{cursor:text}

/* 🔊 سطرُ الكلمة وزرِّها — الزرُّ **بجوارها** لا فوقها.
   والاتّجاه يُكتب على السطر من JS (اتّجاه النصّ لا الصفحة)، فيقع
   الزرُّ **بعد** الكلمة في ترتيب القراءة لا قبلها.
   وflex-wrap لأجل الجمل الطويلة: تلتفّ الكلمةُ ويتبعها الزرّ. */
.bf-qrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bf-qrow.ctr{justify-content:center}
.bf-qrow > .bf-front-q,.bf-qrow > .bf-answer{flex:0 1 auto;min-width:0}

.bf-say-grp{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}

/* ٣٢px حدُّ اللمس الأدنى المعتمد هنا — أصغرُ من .iconbtn (٣٨) لأنّه
   يجاور كلمةً لا يقف وحده في شريط، وزرٌّ أكبر منها يسرق النظر. */
.bf-say{display:inline-flex;align-items:center;justify-content:center;gap:3px;
  min-width:32px;min-height:32px;padding:4px 6px;background:none;
  border:1px solid transparent;border-radius:9px;cursor:pointer;font:inherit;
  color:var(--text-muted);transition:color .18s,background .18s,border-color .18s}
.bf-say:hover{color:var(--accent);background:var(--fill)}
.bf-say:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bf-say .ic{width:17px;height:17px}

/* وسمُ اللهجة — لاتينيٌّ دائماً (UK · US)، وهو عُرفُ المعاجم فلا يُترجَم.
   ويظهر حين تتوفّر اللهجتان معاً وحده: وسمٌ بلا اختيارٍ يَعِد بما ليس هناك. */
.bf-say-t{font-size:var(--fs-tag);font-weight:600;letter-spacing:.02em;
  font-family:system-ui,sans-serif}

.bf-prompt{color:var(--text-muted);font-size:var(--fs-meta);text-align:center;margin-bottom:14px}
.bf-front-q{font-size:var(--fs-q);font-weight:700;text-align:center;line-height:1.7}
.bf-recall{margin-top:auto;padding-top:14px}
.bf-term{font-size:.95rem;font-weight:700;margin-bottom:10px}
.bf-label{font-size:.72rem;color:var(--text-muted);margin-bottom:3px}
.bf-mine{background:var(--fill-soft);border-radius:9px;padding:8px 10px;margin-bottom:9px;
         font-size:var(--fs-meta);color:var(--text-muted)}
.bf-answer{font-size:var(--fs-read);line-height:1.8}
.bf-divider{height:1px;background:var(--line);opacity:.6;margin:13px 0}

.bf-note{font-size:var(--fs-meta);color:var(--text-muted);line-height:1.7}

/* 🆕 b135 · جرّةُ البطاقة — في الوجهين، وتبنيها cardImg في ui.js.

   📏 والارتفاع **محجوزٌ بنسبةٍ** (height) لا مقيَّدٌ بسقفٍ (max-height)،
      وتلك علّةٌ قياسيّة لا ذوق: shrinkFont يقيس الوجهَ أوّلَ رسمه،
      وصورةٌ لم تَصِل بعدُ لا تشغل مكاناً — فيُقاس الوجهُ ناقصاً ويبقى
      الخطُّ كبيراً، ثمّ تصل الصورةُ فيفيض الوجهُ ويقفز النسق.
      وبالحجز يصدُق القياسُ من أوّل رسمة، ولا يقفز شيءٌ عند الوصول.
      والنسبةُ تُحلّ: ‎.bf-face مطلقٌ بـinset:0 فارتفاعُه معلوم.
      ⚠️ وheight على ‎.bf-imgbox‎ لا يُستبدل بـmax-height: تعود العلّةُ
         كما هي. أمّا max-* على الصورة نفسِها فمقصودةٌ — انظر 📦 أدناه.
   📦 **والحاجزُ علبةٌ والصورةُ داخلَها** — ولم يكن كذلك أوّلَ مرّة:
      حُجز الارتفاعُ على الصورة نفسِها، فظهرت الصورةُ العريضة
      (١٢٠٠×٤٠٠) في صندوقٍ أطولَ منها، وبان شريطان من لون الخلفيّة
      فوقها وتحتها — قِيسا في المتصفّح وزالا بالعلبة. فالعلبةُ تحجز،
      والصورةُ تأخذ مقاسَها هي (max-* لا height)، فيلتصق بها إطارُها.
   📐 ولا تُقصّ الصورة لتملأ: هي معنًى لا زينة.
   🎨 والإطارُ **محيَّد** (‎--line + --fill-soft): الصورةُ ليست حكماً
      على صوابٍ ولا خطأ، فلا تأخذ لوناً من أُسَر المعنى (ثابت ⑤).
   🔑 ولا stopPropagation عليها: الوجهُ كلُّه زرُّ قلبٍ، وصورةٌ تحتلّ
      ثلثَه ولا تقلب تُحدث **منطقةً ميتة** في وسط البطاقة — ومن لمسها
      فلم يحدث شيءٌ حسبها عاطلة. فاللمسُ يقلب كما يقلب لمسُ الكلمة. */
.bf-imgbox{flex:0 0 auto;height:40%;margin-top:12px;
           display:flex;align-items:flex-start;justify-content:center}
.bf-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
        border-radius:11px;border:1px solid var(--line);background:var(--fill-soft)}
.bf-btn-row{margin-top:auto;padding-top:14px;display:flex;gap:7px}
.bf-btn-row .btn{flex:1;font-size:.82rem;padding:10px 4px}

/* التلميح يُخفى بصرياً ولا يُحذف — فيبقى للوحة المفاتيح وقارئ الشاشة */
.bf-hint{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
         overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bf-hint:focus{position:static;width:auto;height:auto;margin:0;padding:8px 0 2px;
               overflow:visible;clip:auto;white-space:normal;background:none;
               color:var(--accent);font-size:.78rem;cursor:pointer}

/* 🔑 حركةُ البطاقة تسكن هنا وحدها، ويحكمها المفتاح وحده (b63).
   كانت هنا قاعدةٌ تُطفئ الحركة مع .calm — والمفتاح بها يُطفئ ولا يُشعل:
   base.css يُطفئ كلَّ انتقالٍ بـ!important حين يطلب النظامُ التخفيف،
   فمن اختار «حركة أكثر» صراحةً بقي بلا حركة، وصار المفتاح بلا قيمة.
   ⇒ الحركة لا تُكتب إلا حين لا يكون .calm، وبـ!important تعلو قاعدةَ
      النظام (خصوصيّتها أعلى من *). والنظامُ لم يُهمَل: هو القيمةُ
      الابتدائية للمفتاح في flashcards.js و editor_cards.js، والاختيارُ
      الصريح يعلوه في الاتجاهين. مرجعٌ واحد لا اثنان.
   ⚠️ ولا تُضَف transition إلى .bf-card أو .bf-stage في موضعٍ آخر: تعود
      القاعدتان تتنازعان. */
.bf-wrap:not(.calm) .bf-stage{transition:opacity .18s ease,transform .18s ease!important}
.bf-wrap:not(.calm) .bf-card{transition:transform .5s cubic-bezier(.4,.15,.2,1)!important}
.bf-front-q[dir="ltr"], .bf-answer[dir="ltr"],
.bf-note[dir="ltr"], .bf-term[dir="ltr"]{text-align:left}
.bf-front-q[dir="rtl"]{text-align:center}
/* ── نصٌّ بلغتين: كلُّ سطرٍ يأخذ اتجاهه من محتواه ── */
.bf-answer, .bf-note, .bf-mine, .mg-ex, .pick-b, .pick-f{
  unicode-bidi:plaintext;
  white-space:pre-line;
}
@media(max-width:560px){.bf-card{height:min(370px,74dvh)}}
@media(orientation:landscape) and (max-height:480px){.bf-card{height:min(320px,70dvh)}}

/* ── قائمة اختيار البطاقات للاشتراك ── */
.pick-row{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
          padding:12px 14px;border:1px solid var(--line);border-radius:12px;
          background:var(--surface);margin-bottom:8px}
.pick-row input{flex:0 0 auto;width:17px;height:17px;margin:2px 0 0;accent-color:var(--accent)}
.pick-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.pick-f{font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.pick-b{font-size:var(--fs-meta);color:var(--text-muted);line-height:1.6;overflow-wrap:anywhere}
.pick-row:has(input:disabled){opacity:.62}

/* ══════ تحدّي المطابقة ══════ */
.mg-wrap{max-width:660px;margin:0 auto}
.mg-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.mg-title{font-size:1.25rem;font-weight:700;margin:0}
.mg-mute{background:none;border:0;font-size:1rem;cursor:pointer;opacity:.6;padding:4px}
.mg-mute:hover{opacity:1}

.mg-hud{display:flex;align-items:center;gap:14px;padding:11px 16px;margin-bottom:20px;
        background:var(--fill-soft);border-radius:999px}
.mg-shields{display:flex;gap:6px}
.mg-sh{width:11px;height:11px;border-radius:50%;background:var(--accent);
       transition:background .3s,transform .3s}
.mg-sh.out{background:var(--line-strong);transform:scale(.6)}
.mg-combo{flex:1;font-weight:700;font-size:.95rem;color:var(--text-muted);
          font-variant-numeric:tabular-nums}
.mg-combo.hot{color:var(--accent)}
.mg-time{font-size:.85rem;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* الأختام */
.mg-terms{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
          padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.mg-term{font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;
         padding:9px 15px;border-radius:999px;
         border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
         transition:transform .15s,background .15s,border-color .15s,opacity .3s}
.mg-term:hover:not(.used){transform:translateY(-2px);border-color:var(--accent-edge)}
.mg-term.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);
            transform:scale(1.06)}
.mg-term.used{opacity:.22;pointer-events:none;transform:scale(.9)}
.mg-term.bad{border-color:var(--danger-edge);background:var(--danger-soft);
             color:var(--danger-text);animation:mgShake .42s}

/* الأسطر */
.mg-rows{display:flex;flex-direction:column;gap:9px}
.mg-row{font:inherit;text-align:start;cursor:pointer;width:100%;
        padding:15px 17px;border-radius:14px;line-height:1.95;
        border:1px solid var(--line);background:var(--surface);color:var(--text);
        transition:border-color .15s,background .15s,transform .15s}
.mg-row:hover:not(.sealed){border-color:var(--line-strong);transform:translateX(-2px)}
.mg-row.on{border-color:var(--accent-edge);background:var(--accent-soft)}
.mg-row.bad{border-color:var(--danger-edge);background:var(--danger-soft);
            animation:mgShake .42s}
.mg-row.sealed{border-color:var(--ok-line);background:var(--ok-soft);
               pointer-events:none;box-shadow:inset 3px 0 0 var(--ok)}
.mg-ex{font-size:.95rem}

/* الفراغ ثمّ الختم فيه — الجرأة الوحيدة */
.mg-slot{display:inline-block;min-width:76px;height:1.05em;vertical-align:-.18em;
         border-bottom:2px dashed var(--line-strong);font-style:normal}
.mg-slot.filled{min-width:0;height:auto;vertical-align:baseline;border-bottom:0;
                font-weight:700;color:var(--ok);padding:1px 7px;border-radius:7px;
                background:var(--ok-fill);animation:mgSeal .42s cubic-bezier(.34,1.5,.5,1)}
@keyframes mgSeal{
  0%{transform:scale(1.9) rotate(-5deg);opacity:0}
  60%{transform:scale(.94) rotate(1deg);opacity:1}
  100%{transform:scale(1) rotate(0)}}
@keyframes mgShake{0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* النتيجة */
.mg-end{text-align:center;padding:30px 20px;border-radius:20px;
        border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.mg-end.win{border-color:var(--ok-line);background:var(--hero-ok)}
.mg-rank{font-size:2.6rem;line-height:1}
.mg-rank-t{font-size:1.3rem;font-weight:700;margin:8px 0 5px}
.mg-line{color:var(--text-muted);font-size:.9rem}
.mg-next{color:var(--text-muted);font-size:.8rem;margin-top:9px}

.mg-sec{margin-top:16px;padding:15px 17px;border:1px solid var(--line);border-radius:16px}
.mg-sec-t{font-size:.78rem;color:var(--text-muted);margin:0 0 10px;font-weight:400}
.mg-conf{font-size:.88rem;padding:5px 0;color:var(--text)}
.mg-lb{display:flex;align-items:center;gap:11px;padding:8px 9px;border-radius:10px;
       font-size:.88rem}
.mg-lb.me{background:var(--accent-soft);font-weight:700}
.mg-rk{width:26px;text-align:center;flex:0 0 auto}
.mg-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-sc{color:var(--text-muted);flex:0 0 auto;font-size:.8rem}
.mg-gap{text-align:center;color:var(--text-muted);padding:3px}
.mg-acts{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.mg-acts .btn{width:100%}

@media(prefers-reduced-motion:reduce){
  .mg-term,.mg-row,.mg-sh{transition:none}
  .mg-slot.filled,.mg-term.bad,.mg-row.bad{animation:none}}

/* ══════ بطاقات الدرس — نوعٌ آخر لا صفٌّ مثل المصادر ══════ */
.deck-card{display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;
  border-radius:18px;border:1px solid var(--accent-line);cursor:pointer;
  background:linear-gradient(135deg,var(--accent-soft),transparent 70%);
  transition:transform .15s,border-color .15s,background .15s}
.deck-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.deck-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.deck-ic{flex:0 0 auto;width:34px;height:34px;color:var(--accent)}
.deck-ic svg{width:100%;height:100%;display:block}
.deck-txt{flex:1;min-width:0}
.deck-t{font-weight:700;font-size:.95rem}
.deck-m{font-size:var(--fs-meta);color:var(--text-muted);margin-top:3px}
.deck-go{flex:0 0 auto;color:var(--accent);font-size:1.15rem;opacity:.7}
@media(prefers-reduced-motion:reduce){.deck-card{transition:none}}

/* ═══ المزاوجة (b69) ═══
   عمودُ المقابلات يُعرض كاملاً فوق البنود (.bank يُعاد استعماله كما هو
   في إكمال الناقص): المزاوجة حكمٌ على المجموعة لا أحكامٌ منفصلة،
   والطالب يحتاج أن يرى المتشابهات معاً ليميّز بينها.

   والإسنادُ بقائمةٍ أصيلة لا بسحبٍ وإفلات — تعمل باللمس وبلوحة
   المفاتيح وقارئ الشاشة، والسحبُ يسقط في الثلاثة.

   ⚠️ و width:auto لازمة: base.css تعطي select عرضاً كاملاً، فبدونها
      ينزل الحقلُ سطراً ويتباعد عن بنده. */
.pairs{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.pair{display:flex;align-items:center;gap:11px;padding:11px 13px;
      background:var(--fill-soft);border:1px solid var(--line);border-radius:12px;
      transition:border-color .15s}
.pair:focus-within{border-color:var(--accent)}
.pair-p{flex:1;min-width:0;font-size:var(--fs-read);line-height:1.75}

/* ═══ الإسناد: نقرتان أو سحب — شروحُه في js/match_dnd.js ═══
   ⚠️ ‎touch-action:none‎ على المقابل ثمنُ السحب بالإصبع: الإصبعُ الذي
      يبدأ عليه يسحبه ولا يُمرّر الصفحة. والشريطُ صغيرٌ أعلى البطاقة
      وما حوله كلُّه يُمرَّر، فالثمن محتمَل — والنقرتان تُغنيان عنه. */
.bank-w{cursor:pointer;touch-action:none;font-family:inherit;color:var(--text);
        transition:background .15s,border-color .15s,opacity .15s,transform .1s}
.bank-w:hover:not(:disabled){border-color:var(--accent);background:var(--accent-fill)}
.bank-w:active:not(:disabled){transform:scale(.97)}
/* المحمول — يُرى محمولاً لا مختاراً: ظلٌّ يرفعه عن سطر أقرانه */
.bank-w.armed{background:var(--accent);border-color:var(--accent);color:var(--on-accent);
              box-shadow:0 4px 12px -2px rgba(0,0,0,.22)}
/* المستعمَل يُعتم ولا يُرفع — ورفعُه يمنع مقابلاً يصحّ لبندين */
.bank-w.used:not(.armed){opacity:.45}
.mq.ro .bank-w{cursor:default}

/* خانةُ البند — زرٌّ أصيل، فالمفاتيحُ وقارئُ الشاشة يبلغانه بلا شيفرة */
.pair-slot{display:flex;align-items:center;min-width:165px;max-width:46%;
           padding:9px 12px;cursor:pointer;text-align:start;
           background:var(--surface);color:var(--text-muted);
           border:1px dashed var(--line-strong);border-radius:11px;
           font-family:inherit;font-size:var(--fs-ui);line-height:1.7;
           transition:border-color .15s,background .15s,color .15s}
.pair-slot .slot-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair-slot:hover:not(:disabled){border-color:var(--accent)}
/* الممتلئةُ تصير مصمتةً: الحدُّ المتقطّع يقول «فارغ» — وهو معناه */
.pair.filled .pair-slot{border-style:solid;border-color:var(--accent-line);
  background:var(--accent-soft);color:var(--text);font-family:'Almarai';font-weight:700}
/* ما يُفلَت عليه الآن · وما ينتظر محمولاً */
.pair-slot.over,.pair-slot.armed{border-color:var(--accent);background:var(--accent-fill);
  border-style:solid;color:var(--accent)}
.mq.arming .pair-slot:not(.armed){border-color:var(--accent-edge)}
.mq.dragging{cursor:grabbing}
.mq.dragging .pair-slot{border-color:var(--accent-edge)}

.slot-x{flex:0 0 auto;width:28px;height:28px;padding:0;cursor:pointer;
        display:none;align-items:center;justify-content:center;
        background:none;border:none;border-radius:8px;
        color:var(--text-muted);font-size:.85rem}
.pair.filled .slot-x{display:flex}
.slot-x:hover{background:var(--danger-fill);color:var(--danger)}

/* الشبحُ يتبع الإصبع — وبلا pointer-events، فما تحته هو ما يُصاب */
.mq-ghost{position:fixed;top:0;left:0;z-index:400;pointer-events:none;
  margin:-18px -40px;padding:7px 14px;border-radius:9px;
  background:var(--accent);color:var(--on-accent);
  font-family:'Almarai';font-weight:700;font-size:var(--fs-ui);
  box-shadow:0 8px 22px -4px rgba(0,0,0,.30);opacity:.95}

/* دون ٥٦٠px: البندُ سطرٌ والخانةُ سطرٌ تحته — فلا يُقصّ النصّ */
@media (max-width:560px){
  .pair{flex-wrap:wrap;gap:9px}
  .pair-p{flex:1 1 100%;order:2}
  /* الخانةُ تأخذ السطر، و«✕» تجاورها — فلا تنزل وحدها سطراً ثالثاً */
  .pair-slot{order:3;flex:1 1 0;max-width:none;min-width:0}
  .slot-x{order:4}
}

/* ═══ تحرير المزاوجة (b70) ═══
   🔑 المشتّت وتشخيصه صفٌّ واحد — والمشتّت هنا اقترانٌ لا خيار،
      فيسكن كودُه تحت بنده مباشرةً لا في مربّعٍ أسفل الصفحة. */
/* ═══ المزاوجة — 112 · الاقترانُ وحدةٌ واحدة ═══
   🔑 البندُ وصوابُه في صفٍّ واحد لأن المعلّم يفكّر فيهما معاً:
      «التشبيه ← مشابهةٌ بأداة». وعمودان يُربط بينهما بقائمةٍ يُقحمان
      خطوةَ ربطٍ لا وجودَ لها في ذهنه.
   ⚠️ والزائدُ خرج إلى صندوقه: لو كان كلُّ صفٍّ بنداً ومقابلَه لَما بقي
      مقابلٌ زائدٌ أبداً — فيُحلّ البندُ الأخير بالاستبعاد، ويُصيبه من
      يجهله، ولا يُسجَّل له كود. وصمتُ التشخيص أخطر من خطئه.
   🔑 وشبكةٌ لا flex-wrap: minmax(0,1fr) تقتطع النصَّ من آخره فيُقرأ
      أوّلُه — و max-width كانت تقتطعه من أوّله. */

.mt-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mt-count{font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);
  background:var(--ok-fill);color:var(--ok);border:1px solid var(--ok-line);
  border-radius:8px;padding:4px 11px;white-space:nowrap}
.mt-count.warn{background:var(--warn-fill);color:var(--warn-text);border-color:var(--warn-line)}
.mt-note{font-size:var(--fs-tag);color:var(--text-muted);line-height:1.7}


/* ══ شاشةُ تخصيص العلامة (125) ══
   🔴 **والمعاينةُ حجمان جنباً إلى جنب — وهو قرارُ الشاشة لا زينتُها.**
      القرارُ يُتَّخذ عند ١٤٠px ويُعاش عند ٣٢ في الدرج، وعرضُ الكبير
      وحده **يُغري باختيارٍ ينهار حيث يُستعمل**.
   🔑 وكلُّ الألوان هنا من لوحة `--av-*` — والخياراتُ محايدةٌ لا عائلةَ
      لها: اختيارُ صورةٍ ليس حكماً ولا حذراً. والمختارُ يُعرَف بحدٍّ
      داكن وعلامةِ ضغط، لا بلونٍ يقول شيئاً من الخمس. */
.av-prev{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.av-prev-big{flex:0 0 auto;line-height:0}
.av-prev-side{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.av-prev-sm{flex:0 0 auto;line-height:0}

.av-ax{margin-top:20px}
.av-note{font-family:'Readex Pro';font-weight:400;font-size:var(--fs-meta);
  color:var(--text-muted);margin-inline-start:9px}
.av-opts{display:flex;gap:10px;flex-wrap:wrap}

/* رقاقةُ لون — مربّعٌ لا دائرة: الدائرةُ تُقرأ علامةً جاهزة، والمربّعُ
   يُقرأ خياراً. والحدُّ يكفي للاختيار فلا يُستدعى لونُ تفاعل. */
.av-sw{width:38px;height:38px;border-radius:10px;cursor:pointer;
  background:var(--sw);border:2px solid transparent;
  outline-offset:2px;transition:transform .12s,border-color .15s}
.av-sw:hover{transform:translateY(-1px)}
.av-sw[aria-pressed="true"]{border-color:var(--text);
  box-shadow:0 0 0 2px var(--surface) inset}

.av-opt{display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;cursor:pointer;color:var(--text-muted);
  font-family:'Almarai';font-weight:700;font-size:var(--fs-tag);
  transition:border-color .15s,background .15s}
.av-opt:hover{background:var(--fill)}
.av-opt[aria-pressed="true"]{border-color:var(--text);color:var(--text);
  background:var(--fill)}
.av-opt svg{display:block}

.av-letter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.av-letter input{width:74px;text-align:center;font-family:'Almarai';
  font-weight:800;font-size:var(--fs-h);padding:10px}


/* ══ الملفّ الشخصيّ (127) ══
   🔑 **صفٌّ من طرفين: الاسمُ يميناً والقيمةُ يساراً** — القارئُ يمسح
      أسماءَ الحقول عموداً واحداً، ولو تفاوتت بداياتُها لتتبّع كلَّ سطرٍ
      وحده. و`gap` لا `justify-content` وحدها، ليبقى الطويلُ مقروءاً.
   📌 وكلُّ ألوانه محايدة: الملفُّ عرضُ حالٍ لا حكمٌ ولا تفاعل. */
.pf-id{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pf-mark{flex:0 0 auto;line-height:0}
/* 🆕 b107 · والقلمُ يكبر مع علامته: ١٩px على ٤٠ في قائمة الحساب،
   و٢٤ على ٦٤ هنا. قرصٌ ثابتُ الحجم على علامةٍ أكبرَ يُقرأ نقطةً
   لُصقت، لا زرّاً. وأصلُه في base.css — وهذا مقاسٌ لا لون. */
.pf-id .av-pen{width:24px;height:24px}
.pf-id .av-pen .ic{width:14px;height:14px}
.pf-id-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.6}
.pf-id-t b{font-family:'Almarai';font-weight:800;font-size:var(--fs-read)}

.pf-row{display:flex;align-items:baseline;gap:12px;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-ui)}
.pf-row:last-child{border-bottom:none}
.pf-row > span{color:var(--text-muted);flex:0 0 auto}
.pf-row > b{font-family:'Almarai';font-weight:700;text-align:end;
  min-width:0;overflow-wrap:anywhere}

/* جدولُ الاقترانات — خمسةُ أعمدة: رقم · بند · سهم · مقابل · حذف */
.mt-tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}
.mt-hdr,.mt-line{display:grid;gap:9px;align-items:center;
  grid-template-columns:32px minmax(0,1fr) 18px minmax(0,1fr) 30px}
.mt-hdr{background:var(--fill);padding:9px 12px;
  font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);color:var(--text-muted)}
.mt-item{border-top:1px solid var(--line)}
.mt-item:first-of-type{border-top:none}
.mt-line{padding:10px 12px}
.mt-line .key{flex:none;width:30px;height:30px;border-radius:9px;
  background:var(--fill-strong);color:var(--text-muted);
  font-family:'Almarai';font-weight:800;font-size:var(--fs-meta);
  display:flex;align-items:center;justify-content:center}
.mt-line input{width:100%;min-width:0;padding:9px 11px;
  font-size:var(--fs-ui);text-overflow:ellipsis}
/* السهمُ يقول «هذا مقابلُ ذاك» — والاتّجاه يتبع النصّ في RTL تلقائياً */
.mt-arrow{display:flex;align-items:center;justify-content:center;
  color:var(--line-strong);font-size:1rem;user-select:none}
/* صوابُ البند بحدٍّ أخضرَ خفيف: اللونُ هنا يقول «أصبتَ» — وهو معناه */
.mt-line .mt-mb{border-color:var(--ok-line);background:var(--ok-soft)}
.mt-line .mt-mb:focus{border-color:var(--ok-edge)}
/* ⚠️ وبندٌ كُتب نصُّه وبقي مقابلُه فارغاً يُعلَّم: save_question ترفض
   المقابلَ الفارغ، فبقاؤه بلا وسمٍ يُنتج رفضاً عند الحفظ لا قبله.
   ولا يُعلَّم الفراغُ في سؤالٍ بكر — إنذارٌ دائم لا يُرى. */
.mt-line .mt-mb.miss{border-color:var(--danger-edge);background:var(--danger-soft)}
.mt-wrow select.miss{border-color:var(--danger-edge);background:var(--danger-soft)}
.mt-chip .mt-sb.miss{box-shadow:inset 0 -2px 0 var(--danger-edge)}

/* الخلطُ المتوقَّع — سطران في شبكةٍ رباعية تحت بنده */
.mt-wrow{display:grid;gap:9px;row-gap:7px;align-items:center;
  grid-template-columns:32px auto minmax(0,1fr) 30px;
  padding:8px 12px;border-top:1px dashed var(--accent-line);
  background:var(--accent-soft)}
.mt-wrow select{width:100%;min-width:0;padding:7px 10px;
  font-size:var(--fs-tag);text-overflow:ellipsis}
.mt-rail{display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:var(--accent-edge)}
/* ⚠️ لا .eq-bs هنا: فيها margin-left:auto — وُضعت وسماً ذيليّاً
   واستُعملت تسميةً وسطيّة، فكانت تبتلع الفراغ وتدفع ما بعدها للحافّة. */
.mt-cap{font-family:'Almarai';font-weight:700;font-size:var(--fs-tag);
  color:var(--text-muted);white-space:nowrap}
.mt-addw{display:block;width:100%;text-align:start;
  padding:7px 12px 7px 46px;border:none;border-top:1px dashed var(--line);
  background:transparent;color:var(--text-muted);
  font-family:'Almarai';font-weight:700;font-size:var(--fs-tag);cursor:pointer;
  transition:color .15s,background .15s}
.mt-addw:hover{color:var(--accent);background:var(--accent-soft)}

/* المقابلاتُ الزائدة — مشتّتاتٌ لا بندَ لها، وهي ميزةُ السؤال لا حشوُه */
.mt-spare{margin-top:18px;padding:14px 15px;border-radius:12px;
  background:var(--fill-soft);border:1px dashed var(--line)}
.mt-spare-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mt-spares{display:flex;flex-wrap:wrap;gap:8px}
.mt-chip{display:flex;align-items:center;gap:6px;max-width:100%;
  background:var(--surface);border:1px dashed var(--line-strong);
  border-radius:10px;padding:4px 8px}
.mt-chip .mt-sb{width:auto;min-width:0;flex:1 1 16ch;max-width:32ch;
  background:transparent;border:none;padding:4px 2px;
  font-size:var(--fs-tag);line-height:1.7;border-radius:0}
.mt-chip .mt-sb:focus{outline:none;box-shadow:inset 0 -2px 0 var(--accent)}
.mt-addb{padding:6px 13px;border-radius:10px;background:transparent;
  border:1px dashed var(--line);color:var(--text-muted);
  font-family:'Almarai';font-weight:700;font-size:var(--fs-tag);cursor:pointer;
  transition:border-color .15s,color .15s}
.mt-addb:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:560px){
  .mt-hdr{display:none}
  /* البندُ فوق ومقابلُه تحته — والسهمُ يدور ليقول «هذا لذاك» */
  .mt-line{grid-template-columns:32px minmax(0,1fr) 30px}
  .mt-line .mt-arrow{grid-column:2;justify-content:start;transform:rotate(-90deg)}
  .mt-line .mt-mb{grid-column:2}
  /* 🔴 صفُّ الخلط كان يُسنَد تلقائياً في ثلاثة أعمدة، فتقع «فالتشخيص»
     في عمود السكّة (٣٢px) **فتُقصّ** — تُقرأ «فالتشخي». ⇒ الطرفان
     يُثبَّتان في الصفّ الأول، والتسميةُ والقائمةُ في العمود الأوسط،
     والفواصلُ الفارغة تُخفى فلا تزاحم. (يُصيب المزاوجة كذلك.) */
  .mt-wrow{grid-template-columns:32px minmax(0,1fr) 30px}
  .mt-wrow > .mt-rail{grid-area:1 / 1}
  .mt-wrow > .eq-x{grid-area:1 / 3}
  .mt-wrow > .mt-cap,
  .mt-wrow > select{grid-column:2}
  .mt-wrow > span:empty{display:none}
  .mt-addw{padding-left:12px}
}

/* ═══ 113 · إكمال من قائمة ══════════════════════════════════════
   الوحدةُ واحدة: قائمةُ الكلمات ثمّ الجملةُ بخاناتها — ولا فئاتٍ
   موازيةً للمزاوجة. الخانةُ ‎.pair-slot‎ نفسها، يُجلَس بها في سطر
   النثر ويُضيَّق عرضُها. فما يُصلَح في إحداهما يُصلَح في الأخرى. */
.mq.cz .bank{margin-top:0;margin-bottom:14px}
/* السطرُ يتّسع لخانةٍ في متنه — وبلا ذلك تتراكب الأسطر على بعضها */
.mq.cz .cz-text{margin:0;line-height:2.7}

/* ⚠️ و ‎inline-flex‎ لا ‎flex‎: الخانةُ تجلس في الجملة ولا تكسرها.
   🔑 و ‎min-width‎ ثابتةٌ بالمحارف: خانةٌ يتبع عرضُها كلمتَها المنتظَرة
      تُفشي طولَها — مفتاحُ إجابةٍ يُعطى بالتنسيق لا بالنصّ. */
.cz-slot{display:inline-flex;vertical-align:baseline;
  min-width:9ch;max-width:22ch;padding:2px 10px;margin:0 3px;
  border-radius:9px;line-height:1.9;font-size:var(--fs-ui)}
/* الممتلئةُ تصير مصمتة — والحدُّ المتقطّع يقول «فارغ»، وهو معناه */
.cz-slot.filled{border-style:solid;border-color:var(--accent-line);
  background:var(--accent-soft);color:var(--text);
  font-family:'Almarai';font-weight:700}
.mq.cz.ro .cz-slot{cursor:default}

/* ═══ حقولُ التأليف: خليّةٌ لكلّ فراغٍ برقمه ═══
   🔴 كان صفّاً بعرض الصفحة يتصدّره «سياقُ الفراغ» (‎…This is a ▭‎) —
      والجملةُ مكتوبةٌ فوقه ومرسومةٌ تحته، فكانت ثالثةً لا تزيد علماً
      وتُنفق ألفَ بكسلٍ على حقلٍ كلمتُه واحدة.
   🔑 و ‎auto-fill‎ لا عددٌ ثابت: عمودان في الواسعة وواحدٌ في الضيّقة،
      بلا استعلامِ وسطٍ يُكتب مرّةً ثم يُنسى عند رتبةٍ جديدة.
   ⚠️ و ‎align-items:start‎ لازمة: خليّةٌ فيها خلطان تطول، ولولاها
      لتمدّدت جاراتُها معها فارغةً. */
.cz-grid{display:grid;gap:10px;align-items:start;margin-bottom:4px;
  grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
.cz-cell{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--surface)}
.cz-head{display:flex;align-items:center;gap:9px;padding:10px 12px}
.cz-head .key{flex:none;width:30px;height:30px;border-radius:9px;
  background:var(--fill-strong);color:var(--text-muted);
  font-family:'Almarai';font-weight:800;font-size:var(--fs-meta);
  display:flex;align-items:center;justify-content:center}
/* الحدُّ الأخضر يقول «هذا هو الصواب» — وهو معناه في المزاوجة نفسها */
.cz-head .mt-mb{flex:1;min-width:0;width:auto;padding:9px 11px;
  font-size:var(--fs-ui);text-overflow:ellipsis;
  border-color:var(--ok-line);background:var(--ok-soft)}
.cz-head .mt-mb:focus{border-color:var(--ok-edge)}
/* ⚠️ ولا يُعلَّم الفراغُ في سؤالٍ بكر — إنذارٌ دائم لا يُرى */
.cz-head .mt-mb.miss{border-color:var(--danger-edge);background:var(--danger-soft)}
/* «＋ خلطٌ متوقَّع» في ذيل الرأس لا في سطرٍ تحته: الحقلُ كلمةٌ واحدة
   فيفضُل من الصفّ عرضٌ يسع الزرّ — ويُوفَّر سطرٌ في كلّ فراغ. */
.cz-head .cz-addw{flex:none;width:auto;padding:6px 11px;border:none;border-radius:9px;
  white-space:nowrap}
.cz-head .cz-addw:hover{color:var(--accent);background:var(--accent-soft)}
/* وصفُّ الخلط يُذيَّل بالخليّة ⇒ لا حدَّ سفليّاً يفصله عمّا بعده */
.cz-cell .mt-wrow:last-child{border-bottom:none}

/* المعاينة في الذيل: أعلى الشاشة موضعُ ما يُكتب، وأسفلُها ما يُراجَع */
.cz-pv{margin-top:22px;padding-top:15px;border-top:1px dashed var(--line)}
.cz-pv-h{font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);
  color:var(--text-muted)}

/* 🔴 ١٩٣٣ · قوسٌ يتيم حُذف (b119) — بقيّةُ لصقٍ في قسم الخانات.
   و@media عند ١٤٣٤ تُغلق سليمةً عند ١٤٤١، فهذا لا يُغلق شيئاً.
   🔑 **ولم يؤذِ أحداً لأنّه كان آخرَ الملفّ.** وقوسٌ شاردٌ يُدخل
      المحلّلَ في استرداد خطإ **فيبتلع أوّلَ قاعدةٍ تليه صامتاً** —
      فابتلع `.ad-sum` يوم أُضيفت لوحةُ الإدارة، وظهر الأثرُ
      بلاطاتٍ تتراصّ عمودياً لا بخطإٍ يُقرأ. **والصامتُ يُصدَّق.**
   ⚠️ وصيدُه فحصُ متصفّحٍ لا قراءةُ شيفرة: المصدرُ سليمٌ بالعين،
      والقاعدةُ غائبةٌ عن CSSOM. والميزان يُفحص بسطر:
      python3 -c "s=open('css/screens.css').read(); …" ⇐ ٠ لا −١ */

/* ══════════════════════════════════════════════════════════
   لوحة الإدارة — b119 · الصلاحيات والسجلّ والنبض

   🔑 **والألوان من العائلات الخمس لا من قيمٍ خام** (قانون
      `bayan-visual-identity`): `ok` حكمٌ بالسلامة · `warn` طبقةٌ
      ناقصة تُرى ولا تُفزع · `danger` عطلٌ يُسقط عملاً · `accent`
      خبرٌ واختيار. **ولا `dx` هنا**: البنفسجيُّ معناه في المنصّة
      «تشخيصُ خطإِ طالب»، واستعمالُه لصلاحيةِ منسّقٍ يُفرغه.

   ⚠️ **و«بلا مادّة» تحمل `warn` لا `danger`.** هي حالٌ تُصلَح بنقرة،
      لا خطأٌ وقع. والأحمرُ الذي يُصرف في الحالات لا يبقى منه ما
      يُنبّه حين يسقط فعلاً شيء.
   ══════════════════════════════════════════════════════════ */

/* ── الأعداد ── */
.ad-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.ad-tile{background:var(--fill-soft);border:1px solid var(--line);border-radius:11px;
  padding:11px 8px;text-align:center}
.ad-tn{font-family:'Almarai';font-weight:800;font-size:var(--fs-h);color:var(--accent);
  line-height:1.3}
.ad-tl{font-size:var(--fs-tag);color:var(--text-muted);margin-top:2px}

/* ── التصفية ── */
.ad-filt{display:flex;gap:8px;margin-bottom:14px}
.ad-filt .ad-q{flex:2;min-width:0}
.ad-filt select{flex:1;min-width:0}

/* ── بطاقة الحساب ── */
.ad-u{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:10px;box-shadow:var(--shadow)}
.ad-u.open{border-color:var(--accent-line)}
.ad-uh{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ad-un{font-family:'Almarai';font-weight:800;font-size:var(--fs-read)}
.ad-um{font-size:var(--fs-meta);color:var(--text-muted);margin-top:4px;line-height:1.7}

.ad-lay{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ad-lay .ad-cu{background:var(--accent-fill);border-color:var(--accent);color:var(--accent);
  font-weight:700;font-family:'Almarai'}
.ad-lay .ad-ok{background:var(--ok-fill);border-color:var(--ok-line);color:var(--ok)}
.ad-lay .ad-no{background:var(--warn-fill);border-color:var(--warn-line);color:var(--warn-text)}

/* السببُ يُسمّى — فلا يُقرأ المنعُ قفلاً ولا القفلُ منعاً */
.ad-why{margin-top:9px;padding:8px 11px;border-radius:9px;background:var(--warn-soft);
  border:1px solid var(--warn-line);color:var(--warn-text);font-size:var(--fs-meta);
  line-height:1.8}

/* ── الأفعال ── */
.ad-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.ad-b{background:var(--fill);border:1px solid var(--line);border-radius:9px;
  padding:7px 14px;cursor:pointer;color:var(--text);font-family:'Almarai';
  font-weight:700;font-size:var(--fs-meta)}
.ad-b:hover{border-color:var(--accent);color:var(--accent)}
.ad-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── لوحةُ الاختيار المتدلّية داخل البطاقة ── */
.ad-pick{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ad-pt{font-family:'Almarai';font-weight:800;font-size:var(--fs-meta);margin-bottom:9px}
.ad-opts{display:flex;gap:6px;flex-wrap:wrap}
.ad-opt{background:var(--fill-soft);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;cursor:pointer;color:var(--text-muted);font-size:var(--fs-tag);
  font-family:'Almarai';font-weight:700}
.ad-opt:hover{border-color:var(--line-strong);color:var(--text)}
.ad-opt.on{background:var(--accent-fill);border-color:var(--accent);color:var(--accent)}
.ad-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ad-pn{font-size:var(--fs-tag);color:var(--text-muted);margin-top:9px;line-height:1.75}

/* ── لافتةُ القسم ── */
.ad-note{background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:11px;padding:12px 14px;font-size:var(--fs-meta);color:var(--text);
  line-height:1.85;margin-bottom:14px}
.ad-note b{font-family:'Almarai';font-weight:800}

/* ── السجلّ ── */
.ad-lg{background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;margin-bottom:8px}
.ad-lgh{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ad-lgw{font-size:var(--fs-ui);margin-top:7px;line-height:1.8}

/* ── النبض ── */
.ad-h{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-right:3px solid var(--line-strong);
  border-radius:11px;padding:12px 14px;margin-bottom:8px}
.ad-h.s-ok  {border-right-color:var(--ok-edge)}
.ad-h.s-warn{border-right-color:var(--warn-edge)}
.ad-h.s-bad {border-right-color:var(--danger-edge);background:var(--danger-soft)}
.ad-hn{font-family:'Almarai';font-weight:800;font-size:var(--fs-h);min-width:2ch;
  text-align:center;line-height:1.5;color:var(--text-muted)}
.ad-h.s-warn .ad-hn{color:var(--warn-text)}
.ad-h.s-bad  .ad-hn{color:var(--danger-text)}
.ad-h.s-ok   .ad-hn{color:var(--ok)}
.ad-hb{flex:1;min-width:0}
.ad-hl{font-family:'Almarai';font-weight:800;font-size:var(--fs-ui)}
.ad-hw{font-size:var(--fs-meta);color:var(--text-muted);margin-top:4px;line-height:1.8}
.ad-hd{font-size:var(--fs-tag);color:var(--text-muted);margin-top:6px;line-height:1.8;
  padding:6px 9px;background:var(--fill-soft);border-radius:8px;
  overflow-wrap:anywhere}
.ad-hb .ad-b{margin-top:9px}

/* ⚠️ والجوّالُ يضيق بستّة أعمدة: الأعدادُ عمودان، والتصفيةُ سطران.
   وبلا هذا تنضغط البلاطةُ حتى يُقطَع رقمُها. */
@media (max-width:460px){
  .ad-sum{grid-template-columns:repeat(2,1fr)}
  .ad-filt{flex-wrap:wrap}
  .ad-filt .ad-q,.ad-filt select{flex:1 1 100%}
}

/* ══════════════════════════════════════════════════════════
   إدارة المحتوى — b121 · لسانٌ رابع في لوحة الإدارة

   🔑 **ويستعير أصنافَ «الأعضاء» ولا يُنشئ نظيراً لها:** `.ad-u` بطاقةٌ
      و`.ad-b` زرٌّ و`.ad-pt` عنوانُ نموذج. **ونظيران لشيءٍ واحد يفترقان
      يوماً** — وهو عينُ ما يقوله الثابتُ ⑨ عن الأرقام. وما يُضاف هنا
      ما لا نظيرَ له: الصفُّ داخل البطاقة، والنموذج، والكود.

   ⚠️ **والشريطُ صار أربعةَ ألسنة**، و«إدارة المحتوى» كلمتان. فـ`.tab`
      عليه `flex:1` ⇒ أربعةٌ متساوية، وأضيقُها عند ٣٦٠px يسع كلمةً
      واحدة. ⇒ يُسمح باللفّ ويُصغَّر الخطُّ في الضيّق — **والطيُّ أصدقُ
      من قصٍّ يُخفي حرفاً.**
   ══════════════════════════════════════════════════════════ */

/* الشريطُ الفرعيّ داخل اللسان */
#cSecs{flex-wrap:wrap}
#cSecs .tab{flex:1 1 calc(50% - 4px);min-width:0}

/* صفٌّ داخل البطاقة — مستوًى أو مسارٌ أو مقرَّرٌ أو كود */
.ad-sub{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.ad-sh{font-family:'Almarai';font-weight:800;font-size:var(--fs-tag);
  color:var(--text-muted);margin-bottom:7px}
.ad-r{padding:9px 0;border-top:1px solid var(--line)}
.ad-r:first-of-type{border-top:none}
.ad-rt{font-family:'Almarai';font-weight:700;font-size:var(--fs-ui)}
.ad-rm{font-size:var(--fs-meta);color:var(--text-muted);margin-top:3px;line-height:1.75}
.ad-r .ad-b{margin-top:7px}
.ad-dim{opacity:1;color:var(--text-muted)}

/* 🔴 الفاصلُ بين الحقائق — يُباعَد ويُخفَّف لأنّ `·` و`٠` رسمٌ واحدٌ
   تقريباً، فسطرٌ يقول «مسار · ١٧ مادّة» يُقرأ «مسار ١٧٠ مادّة».
   ولا `opacity` على نصّ (الدَّين الموثَّق في STATE ⑧) — لونٌ صريح. */
.ad-s{padding:0 .3em;color:var(--line-strong);font-weight:400}

/* كودُ التشخيص — لاتينيٌّ وسط عربيّ، فيُعزل بخطٍّ أحاديّ واتّجاهٍ صريح */
.ad-code{display:inline-block;direction:ltr;font-family:ui-monospace,monospace;
  font-weight:700;background:var(--dx-fill);color:var(--dx);border:1px solid var(--dx-line);
  border-radius:7px;padding:1px 7px;font-size:var(--fs-tag)}

/* النموذج */
.ad-form{margin-top:12px;padding:14px;border-radius:12px;
  background:var(--fill-soft);border:1px solid var(--accent-line)}
.ad-form .fl{margin-top:11px}
.ad-form .fl:first-of-type{margin-top:0}
.ad-ta{min-height:70px}
.ad-opt-n{font-weight:400;color:var(--text-muted)}
.ad-cb{display:flex;align-items:center;gap:9px;margin-top:13px;
  font-family:'Almarai';font-weight:700;font-size:var(--fs-meta);cursor:pointer}
.ad-cb input{width:auto;flex:none;accent-color:var(--accent)}

@media (max-width:400px){
  .tabs .tab,.subtabs .tab{font-size:var(--fs-meta);padding:10px 6px}
}