/* ===== 00-tokens.css ===== */
/*
  مصدر واحد للمظهر. أي لون أو مسافة في المشروع يأتي من هنا حصرًا.

  هوية AMSU — منقولة حرفيًا من مشروع علي الأول (amsu.alsoqoor.com) بطلبه:
  «طريقة العرض خذها من هنا». نفس اللوحة، نفس الخط، نفس الأقطار والظلال،
  والليلي هو الافتراضي كما في AMSU، والفاتح زرّ لمن يريده.

  الأسماء مزدوجة عمدًا: أسماء المنصة التاريخية (--text --brand --sh1…)
  تبقى كي لا يُعاد فتح كل ملف مكوّنات، وأسماء AMSU (--txt --acc --shadow-sm…)
  تُعرَّف معها كي تُنقل وصفات AMSU كما هي بلا ترجمة.
*/
/*
  ★ هوية الموقع = خط ثمانية كاملًا في المسار الحرج (بطلب علي).
  Thmanyah Sans: Regular + Medium + Bold — لا يُسقَط وزنٌ عربي لهوية الواجهة.
  Thmanyah Serif Display: عناوين العرض فوق الطيّة.
  لاتيني/أرقام: Inter Regular + SemiBold فقط (ليست هوية العلامة).
  swap: النص يظهر بالبديل فورًا ثم يُستبدل — لا صفحة بيضاء تنتظر خطًّا.

  ★ المسار ‎../webfonts/‎ لا ‎webfonts/‎: الـCSS صار ملفًّا في ‎/assets/‎ بعد
  تقسيم الحزم، والمسار النسبي يُحلّ من موضع الـCSS لا من موضع الصفحة —
  فصار ‎/assets/webfonts/‎ وسقطت الخطوط كلها ٤٠٤ والهوية معها (١١ سبتمبر).
  و‎../‎ يصحّ في الحالتين: على الويب ‎/assets/../webfonts‎ = ‎/webfonts‎،
  وعلى ‎file://‎ يصعد من مجلد assets إلى جوار index.html.
*/
@font-face{ font-family:"Thmanyah Sans"; src:url("../webfonts/thmanyahsans-Regular.woff2") format("woff2");
            font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("../webfonts/thmanyahsans-Medium.woff2") format("woff2");
            font-weight:500 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("../webfonts/thmanyahsans-Bold.woff2") format("woff2");
            font-weight:700 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Serif Display"; src:url("../webfonts/thmanyahserifdisplay-Bold.woff2") format("woff2");
            font-weight:400 900; font-style:normal; font-display:swap; }
/*
  ★ Inter لنصوص الأسئلة اللاتينية والأرقام (--font-latin / --font-num).
  ملفاته OFL في webfonts/ — Regular للنص وSemiBold للتسميات والعناوين اللاتينية.
*/
@font-face{ font-family:"Inter"; src:url("../webfonts/inter-Regular.woff2") format("woff2");
            font-weight:400 500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../webfonts/inter-SemiBold.woff2") format("woff2");
            font-weight:600 900; font-style:normal; font-display:swap; }

:root{
  /* الخطوط كما في AMSU: كوفي عربي للواجهة كلها، ولاتيني نظيف للنص الأصلي.
     لا خط خارجي — كلها أسماء نظامية تتوفر على أجهزة الطلاب أو تسقط بسلام */
  /*
    ★ الطباعة (بطلب علي: «تنسيق الخطوط»). القاعدة ثابتة: لا خط خارجي.
    لكن ترتيب الأسماء قرارٌ تصميمي: كان الكوفي الهندسي أوّل القائمة فيُختار
    على كل جهازٍ فيه، وهو خطُّ عناوين لا خطُّ قراءة — ثقيل في الفقرات
    والخيارات. الآن للنص خطٌّ إنسانيٌّ نظيف («دبي» يأتي مع ويندوز، و«SF
    Arabic» مع آبل، و«Noto Sans Arabic» مع أندرويد)، وللعناوين الكوفيُّ
    حيث يليق: ثقلُه شخصيةٌ في سطرٍ واحد وعبءٌ في عشرة.
    ★ خط ثمانية (بطلب علي، ٦ سبتمبر ٢٠٢٦): «Thmanyah Sans» للواجهة —
    تباينه معدوم ومصمَّم للشاشات — و«Thmanyah Serif Display» للعناوين، وفيه
    روح اليد التي تكمل هوية القلم وورقة الإجابة. يأتيان أوّل السلّم وتبقى
    البدائل خلفهما لمن لم يصله الملف بعد.

    ★ الاستضافة الذاتية مسموحة (توضيح ثامر من ثمانية، ٧ سبتمبر ٢٠٢٦):
    يُسمح برفع ملفات woff2 على خادم المشروع واستدعائها بـ@font-face بلا
    تصريح. والمحظور شيئان اثنان لا ثالث لهما:
      · إتاحة الملف كخط مستقل يُنزَّل — فلا رابط تنزيل في أي شاشة.
      · تمكين hotlinking من مشاريع أخرى — ومنعُه قائمٌ بلا عمل إضافي:
        المتصفحات تفرض CORS على الخطوط وحدها دون سائر الموارد، ونحن لا
        نرسل Access-Control-Allow-Origin على الملفات الساكنة، فلا موقع
        آخر يستطيع تحميلها بـ@font-face. وCSP عندنا: font-src 'self' data:.

    (كان في هذا الموضع نصٌّ يقول إن الاستضافة ممنوعة — بُني على ردٍّ أول من
     ثمانية صحّحته ثمانية نفسها. تُركت الإشارة كي لا يُعاد الاجتهاد الخاطئ.)

    والتطبيق يبقى على مساره: 76-native.js يُعرّف @font-face من
    fonts/index.json الذي يكتبه mobile/prepare.js من ملفات الخط الأصلية
    الآتية من سرّ GitHub وقت البناء — ولهذا اسم مجلد الويب `webfonts/`
    لا `fonts/`، فلا يتصادم المساران داخل حزمة التطبيق.
  */
  --font: "Thmanyah Sans", "Dubai", "SF Arabic", "Segoe UI Variable Text", "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", "Tajawal", "Cairo", system-ui, sans-serif;
  --font-display: "Thmanyah Serif Display", "Noto Kufi Arabic", "Dubai", "SF Arabic", "Segoe UI", "Tajawal", "Cairo", system-ui, sans-serif;
  --font-latin: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  /* الأرقام: نفس اللاتيني مع أرقام جدولية ثابتة العرض كي لا ترقص العدّادات */
  --font-num: var(--font-latin);

  /* سلّم الأحجام: سبع درجات لا أرقامٌ متناثرة في كل ملف */
  --fs-xs: .74rem; --fs-sm: .85rem; --fs-md: 1rem; --fs-lg: 1.15rem;
  --fs-xl: 1.4rem; --fs-2xl: 1.8rem; --fs-3xl: 2.3rem;
  --lh-tight: 1.25; --lh-body: 1.75; --lh-loose: 1.9;

  /*
    لوحة AMSU الفاتحة — مُدفّأة.
    ★ كانت رمادية باردة (#f4f6f9 على #ffffff) فبدت الشاشة «رمادي على رمادي»:
    البطاقات لا تنفصل عن الأرض، والأزرار الأردوازية تبدو معطَّلة. نُميلها
    درجةً نحو الورق — ورقة الإجابة التي هي رمز المنصة بيضاءُ دافئة لا
    زرقاء — فتبقى AMSU في العظم، وتصير البطاقة بيضاء فوق أرضٍ ورقية.
  */
  --bg:        #f5f3ee;
  --bg-soft:   #ece9e1;
  --surface:   #fffefb;
  --surface-2: #f8f6f1;
  --line:      #e5e1d7;
  --line-soft: #eeebe4;
  --line-2:    #d5d0c4;

  --text:      #17161a;
  --text-2:    #5b5a63;
  --text-3:    #8c8b95;

  /* المِحور اللوني: رمادي أردوازي محايد في العموم، وتلوّنه كل مادة بلونها
     عبر --acc محلّيًا — هذه فكرة AMSU المركزية: الحياد في الهيكل واللون للمادة */
  --brand:      #4b5563;
  --brand-2:    #374151;
  --brand-soft: #eef1f5;
  --on-brand:   #ffffff;

  --gold:      #e8a317;
  --gold-soft: #fdf3dd;
  /* ★ الزر الأساسي ذهبيٌّ على حبر — لا أردوازيّ.
     الذهبي كان في حبّة التنقّل وحدها، والزرّ الذي يُشترى به ويُراجَع به
     بلون الهيكل المحايد فلا يُرى. ما يُضغط يستحق لون العلامة، وكل ما
     تصبغه المادة بلونها يستعيده (انظر [style*="--acc"] في المكوّنات). */
  --btn-bg:  var(--gold);
  --btn-fg:  #17161a;
  --btn-sh:  0 8px 20px -8px color-mix(in srgb, var(--gold) 70%, transparent);
  --ink:     #17161a;
  /*
    لوحة «البطل» (بطل اليوم، بطل الملف، شريط المشرف).
    ★ كانت حبرًا أسود في الوضع الفاتح — «بشع وغير مناسب» بحكم علي، وهو
    محقّ: كتلة سوداء وسط ورقٍ دافئ تُقرأ إعلانًا لا بطاقة. صارت ورقةً
    ذهبية فاتحة بحبرٍ داكن — البطل يُميَّز بالدفء لا بالظلمة، والليلي
    يبقى سطحًا أفتح درجة كما كان.
  */
  --today-bg:   #fbf3df;
  --today-fg:   #17161a;
  --today-fg2:  #6e6653;
  --today-line: #ecdfbd;

  --ok:      #12805c; --ok-soft:   #e6f6ef;
  --warn:    #b06d1e; --warn-soft: #fdf0dc;
  --bad:     #d92020; --bad-soft:  #fdecec;
  --star:    #e8a317;

  /* سلّم المسافات */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 22px; --s6: 30px; --s7: 44px; --s8: 68px;

  /* أقطار AMSU وظلالها */
  --r1: 10px; --r2: 14px; --r3: 20px; --r4: 26px; --r-pill: 999px;
  --sh1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --sh2: 0 4px 12px rgba(16,24,40,.07), 0 2px 4px rgba(16,24,40,.04);
  --sh3: 0 18px 44px rgba(16,24,40,.12), 0 4px 12px rgba(16,24,40,.06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);

  /* قياسات القراءة الأكاديمية */
  /*
    ★ عرض السطر بالـrem لا بالـch (١٣ سبتمبر ٢٠٢٦ — ما رآه علي على اللابتوب).
    الـch عرضُ الرقم «٠» في الخط، وهو في خطّنا العربي ١٠٫٧ بكسل بينما متوسط
    الحرف العربي ٦٫٨ — فـ«٦٤ch» التي تبدو أربعةً وستين حرفًا كانت مئةً وواحدًا
    في السطر الواحد. وأسوأ منه أن الفقرة العربية والفقرة الإنجليزية تحت السقف
    نفسه تخرجان بعرضين مختلفين (الـch يختلف بين الخطّين: ٧٩٨ و٧٢٧ بكسل في
    بطاقة الشرح)، فتتراصّان بحافّتين متباينتين ويبدو النصّ مزاحًا إلى أقصى
    اليمين داخل بطاقةٍ فارغة من يسارها.
    ٣٨rem = ٦٠٨ بكسل ≈ ٨٩ حرفًا عربيًا و٨١ لاتينيًا — قياسٌ واحد لا يتبدّل
    بتبدّل الخط، فتتطابق حافّتا اللغتين تمامًا.
  */
  --measure: 38rem;
  --read-lh: 1.85;
  --read-size: 1.02rem;

  --rule: color-mix(in srgb, var(--acc) 30%, transparent);
  --rule-soft: color-mix(in srgb, var(--acc) 12%, transparent);

  --wrap: 1080px;
  --topbar-h: 60px;
  /* ارتفاع الشريط العلوي كما يظهر فعلًا: يضمّ منطقة شريط الحالة في التطبيق
     الأصلي (صفر في الويب) — وعليه تُثبَّت كل الأشرطة اللاصقة تحته */
  --topbar-total: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  --tabbar-h: 64px;

  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* نص فوق الملوّن، وتدرّج علامة AMSU (بنفسجي ← فيروزي) */
  --on-acc: #ffffff;
  --mark-1: #6d5efc;
  --mark-2: #2ec5c0;

  /* ألوان المواد — حيوية مثل بطاقات AMSU: كل مادة تصبغ بطاقتها ورأسها */
  --subject-1: #059669; --subject-2: #8b5cf6; --subject-3: #f59e0b;
  --subject-4: #d946ef; --subject-5: #0ea5e9; --subject-6: #14b8a6;

  /* ═══ أسماء AMSU كما هي — كي تُلصق وصفاتها بلا ترجمة ═══ */
  --bg2: var(--bg-soft);
  --surface2: var(--surface-2);
  --txt: var(--text); --txt2: var(--text-2); --txt3: var(--text-3);
  --line2: var(--line-2);
  --ok-bg: var(--ok-soft); --bad-bg: var(--bad-soft);
  --shadow-sm: var(--sh1); --shadow-md: var(--sh2); --shadow-lg: var(--sh3);
  --r-sm: var(--r1); --r: var(--r2); --r-lg: var(--r3); --r-xl: var(--r4);
  --maxw: var(--wrap);

  /* --acc: لون السياق الحالي. افتراضه المحور المحايد، وكل بطاقة مادة أو
     رأس مادة يضبطه محليًا style="--acc:…" فيتلوّن كل ما بداخله.
     الغامق والناعم يُشتقّان منه آليًا — في AMSU كانت ثلاثة متغيرات تُضبط
     يدويًا معًا، وضبطُ ثلاثة يدويًا ينسى أحدها يومًا */
  --acc: var(--brand);
  --acc-d: color-mix(in srgb, var(--acc) 78%, #000);
  --acc-soft: color-mix(in srgb, var(--acc) 9%, var(--surface));
}

/* الليلي — لوحة AMSU الليلية، وهو الافتراضي */
:root[data-theme="dark"]{
  --bg:        #0e1117;
  --bg-soft:   #0a0d12;
  --surface:   #161b23;
  --surface-2: #1c222c;
  --line:      #252c38;
  --line-soft: #1e2531;
  --line-2:    #333c4b;

  --text:      #e9edf5;
  --text-2:    #a4aec0;
  --text-3:    #78839a;

  /* المحور في الليل أفتح درجة كي يبقى مقروءًا نصًّا على الأسطح الداكنة */
  --brand:      #96a3b8;
  --brand-2:    #b7c2d4;
  --brand-soft: #1e2531;
  --on-brand:   #0e1117;

  --gold:      #f5c04e;
  --gold-soft: #2e2410;
  --btn-fg:    #14110a;
  --ink:       #0e1117;
  --today-bg:   var(--surface-2);
  --today-fg:   var(--text);
  --today-fg2:  var(--text-2);
  --today-line: var(--line-2);

  --ok:      #39d39a; --ok-soft:   #0f2a22;
  --warn:    #dda049; --warn-soft: #2e2410;
  --bad:     #ff6b6b; --bad-soft:  #33161a;
  --star:    #f5c04e;

  --sh1: 0 1px 2px rgba(0,0,0,.4);
  --sh2: 0 6px 18px rgba(0,0,0,.45);
  --sh3: 0 20px 50px rgba(0,0,0,.55);
}


/* ===== 10-base.css ===== */
/* الأساسيات: تصفير مضبوط + تنسيق عربي RTL + جوال أولًا */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  /* مقياس AMSU: يتنفّس مع عرض الشاشة بين ١٥ و١٧ */
  font-size:clamp(15px, 1.7vw + 10px, 17px);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;                 /* سطر مريح للعربية، فحروفها متصلة وتحتاج تنفّسًا */
  color:var(--text);
  background:var(--bg);
  /* لماذا هنا؟ لأن أي تمرير أفقي على جوال ٣٦٠ بكسل يُعدّ عيبًا في معايير القبول */
  overflow-x:hidden;
  min-height:100vh;
  display:flex; flex-direction:column;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
/* العناوين بالخط الكوفي الهندسي — هو شخصية الصفحة، والنص بخط أنعم للقراءة */
h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0 0 var(--s3); line-height:var(--lh-tight); font-weight:800;
  letter-spacing:-.015em; text-wrap:balance;
}
h1{ font-size:var(--fs-2xl); } h2{ font-size:var(--fs-xl); } h3{ font-size:var(--fs-lg); } h4{ font-size:var(--fs-md); }
p{ margin:0 0 var(--s3); text-wrap:pretty; }
small{ font-size:var(--fs-sm); }
a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul,ol{ margin:0 0 var(--s3); padding-inline-start:var(--s5); }
button,input,select,textarea{ font:inherit; color:inherit; }
img,svg{ max-width:100%; height:auto; }

/* الأرقام تبقى لاتينية داخل النصوص العربية لسهولة قراءة النتائج والنسب */
.num,[data-num]{ font-family:var(--font-num); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }
/* نصوص الأسئلة تبقى بلغتها الأصلية واتجاهها — وبخط لاتيني نظيف كما في AMSU */
.ltr{ direction:ltr; text-align:left; unicode-bidi:isolate; font-family:var(--font-latin); letter-spacing:0; }
/* ★ لا hex هنا: --on-acc حين يُعرَّف، و«white» كلمةً لا رقمًا كما في الهبوط */
::selection{ background:var(--acc); color:var(--on-acc, white); }

/* حلقة تركيز ناعمة بدل الخط الحاد — أوضح للوحة المفاتيح وأجمل */
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r1); }

.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:99;
  background:var(--brand); color:var(--on-brand); padding:var(--s3) var(--s4); border-radius:0 0 var(--r2) var(--r2);
}
.skip:focus{ inset-inline-start:var(--s4); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s4); }

/*
  ★ ‎[hidden]‎ لا يصمد وحده أمام صنفٍ يضبط ‎display‎.
  قاعدة المتصفح ‎[hidden]{display:none}‎ وزنها صفر، فأيّ ‎.x{display:flex}‎ تغلبها
  ويظهر ما أمرَ الكودُ بإخفائه. وقعنا فيها مرّتين: وجهُ البطاقة المقلوبة
  (‎.flip__face‎)، ثم حبّةُ النبض وقائمةُ المتواجدين — حبّةٌ خضراء فارغة وقائمةٌ
  تقول «جارٍ التحميل…» وهي مطويّة. والثالثة لن تقع: تُرفع هنا مرّة للكلّ.
  و‎!important‎ مقصودة: هذه ليست زينةً يُنافَس عليها، بل أمرٌ من الكود.
*/
[hidden]{ display:none !important; }

/* احترام تفضيل تقليل الحركة شرط في معايير القبول، لا تحسين اختياري */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}


/* ===== 20-layout.css ===== */
/* الهيكل: شريط علوي ثابت، محتوى، شريط تبويب سفلي على الجوال، تذييل */
.topbar{
  position:sticky; top:0; z-index:20;
  /*
    ★ شريط الحالة (الساعة والشبكة والبطارية وجزيرة الآيفون) يعلو الصفحة في
    التطبيق الأصلي، فكان اسم المنصة وزرّ الدخول يرتطمان به. الشريط العلوي
    يُعامَل كالسفلي تمامًا: يزيد بمقدار المنطقة الآمنة ويُزاح بها — والويب
    لا يتأثر لأن env() تساوي صفرًا حيث لا نتوء.
  */
  height:var(--topbar-total);
  padding-top:env(safe-area-inset-top, 0px);
  /* زجاج AMSU: خلفية الصفحة نفسها مموّهة لا سطح أبيض */
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t) var(--ease);
}
.topbar__in{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.topbar__actions{ display:flex; align-items:center; gap:var(--s2); }

.brand{ display:inline-flex; align-items:center; gap:var(--s2); color:var(--text); font-weight:800; letter-spacing:.5px; }
.brand:hover{ text-decoration:none; }
.brand__mark{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  /* تدرّج علامة AMSU نفسه: بنفسجي إلى فيروزي بتوهّج ناعم */
  background:linear-gradient(135deg, var(--mark-1), var(--mark-2)); color:var(--on-acc);
  box-shadow:0 4px 12px -4px var(--mark-1);
}
/* الاسم فوق والوصف تحته: «مراجعة» هو الاسم، و«بنك الأسئلة» يشرحه لمن يراه أول مرة */
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:1.02rem; letter-spacing:-.01em; }
.brand__sub{ font-size:.66rem; font-weight:700; color:var(--text-3); letter-spacing:.02em; }
@media (max-width:360px){ .brand__sub{ display:none; } }   /* على أضيق جوال يبقى الاسم وحده */

.main{
  flex:1 0 auto;
  padding-block:var(--s5) var(--s8);
  /* مساحة أسفل تكفي شريط التبويب السفلي كي لا يغطّي آخر بطاقة */
  padding-bottom:calc(var(--tabbar-h) + var(--s8));
}

/*
  ═══ عمود القراءة ═══
  ★ ما يُقرأ سطرًا سطرًا (الشرح، «عن المادة»، «طريقة الحفظ») يُقيَّد عرض
  بطاقته لا عرض نصّه. كان النصّ وحده مقيَّدًا داخل بطاقةٍ بعرض الصفحة، فبقي
  يسارُها فارغًا ثلث البطاقة والنصُّ ملتصقًا بأقصى اليمين — ولأن العربي
  والإنجليزي قُيّدا بالـch خرجا بعرضين مختلفين فتراصّا بحافّتين متباينتين.
  حين تصير البطاقةُ نفسها بعرض السطر يملؤها النصُّ كلَّها: حافّة واحدة
  للغتين وللعنوان ولصندوق الإجابة، ولا فراغ إلى جانبها.
  والقوائم والشبكات (بنك الأسئلة) تبقى بعرض الصفحة — تلك تُمسح بالعين لا تُقرأ.
  السقف لا يؤثر على الجوال: عرضه أصغر من العمود أصلًا.
*/
.read-col{ max-width:calc(var(--measure) + var(--s4) * 2); margin-inline:auto; }

/*
  ═══ الشريط السفلي ═══
  أكثر عنصرٍ يراه الطالب في المنصة، فيُعامَل معاملة الواجهة لا الحاشية:
  زجاجٌ يُظهر ما تحته بلا أن يُقرأ، وحدٌّ شعري لا خطّ سميك، وحبّةُ تمييز
  خلف أيقونة الصفحة الحالية وحدها — التمييز الذي يبتلع الكلمة يُثقل.
*/
.tabbar{
  position:fixed; inset-inline:0; bottom:0; z-index:20;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  display:flex; align-items:stretch;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  /* ظلٌّ للأعلى يفصل الشريط عن المحتوى حين يمرّ تحته */
  box-shadow:0 -1px 20px color-mix(in srgb, black 8%, transparent);
}
/* من لا يدعم الزجاج يحصل على سطحٍ صلب لا على شفافيةٍ تُخفي النص تحته */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .tabbar{ background:var(--surface); }
}

.tabbar__item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--text-3); font-size:.7rem; font-weight:600;
  padding:6px var(--s1) 8px;
  min-width:0;                       /* يمنع تمدّد النص فيكسر الشريط على ٣٦٠ بكسل */
  -webkit-tap-highlight-color:transparent;
}
/* الأيقونة أغمق من كلمتها درجةً: العين تمسك الشكل قبل النص، فيقود الشكلُ */
.tabbar__item .tabbar__box{ color:var(--text-2); }
.tabbar__item:hover{ text-decoration:none; color:var(--text-2); }

/* غلاف الأيقونة: هو ما تُرسم عليه حبّة التمييز */
.tabbar__box{
  display:grid; place-items:center;
  width:46px; height:30px; border-radius:999px;
  transition:background .2s var(--ease), color .2s var(--ease),
             transform .2s cubic-bezier(.34,1.4,.64,1);
}
.tabbar__box svg{ display:block; width:22px; height:22px; }

/*
  الصفحة الحالية: حبّة ذهبية، وخطٌّ أثقل قليلًا، ونصٌّ أوضح.

  ★ ولمَ الذهب لا --acc؟ لسببين:
  الأول أن --acc محايدٌ رماديّ في العموم (وهذه فكرة AMSU: الحياد في
  الهيكل واللون للمادة)، فالتمييز به يعطي حبّةً رمادية على سطحٍ رمادي —
  تُقرأ «معطّلة» لا «مختارة»، ولا هوية فيها.
  والثاني أن كل مادة تلوّن --acc بلونها، فلو تبعه الشريطُ لتبدّل لونه مع
  كل مادة يفتحها الطالب — وثبات الإطار هو ما يجعله إطارًا.
  والذهب لون الهوية الثابت: يقول «أنت هنا» ويقول «هذه مراجعة» معًا.
*/
.tabbar__item[aria-current="page"]{ color:var(--gold); }
.tabbar__item[aria-current="page"] .tabbar__box{
  color:var(--gold);
  background:color-mix(in srgb, var(--gold) 18%, transparent);
  transform:translateY(-1px);
}
.tabbar__item[aria-current="page"] .tabbar__box svg path{ stroke-width:2; }
.tabbar__item[aria-current="page"] .tabbar__lbl{ font-weight:800; }

/* اللمس يستجيب فورًا: التأخير في ردّ الفعل يُقرأ بطئًا في التطبيق كله */
.tabbar__item:active .tabbar__box{ transform:scale(.9); }

.tabbar__lbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  letter-spacing:-.01em; }

@media (prefers-reduced-motion: reduce){
  .tabbar__box{ transition:none; }
  .tabbar__item:active .tabbar__box{ transform:none; }
}

.footer{
  flex:0 0 auto;
  padding-block:var(--s5);
  padding-bottom:calc(var(--tabbar-h) + var(--s5));
  border-top:1px solid var(--line);
  background:var(--bg-soft);
  color:var(--text-3); font-size:.85rem; text-align:center;
}
.footer__credit{ margin:0; }
.footer__credit a{ font-weight:700; }

.grid{ display:grid; gap:clamp(14px,2.2vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
@media (min-width:640px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }

/*
  ═══ سطح المكتب ═══
  ★ عطلٌ صامت عاش طويلًا: كان الشريط السفلي يُخفى على الشاشات العريضة،
  والتعليق يَعِد بـ«روابط أعلى» — روابط لم تُكتب قط. فمن فتح المنصة على
  حاسوبه وجد نفسه بلا تنقّلٍ إطلاقًا: لا استكشاف ولا رفع ولا حساب، ولا
  طريق إلى شيء إلا بالعودة إلى الرئيسية وتخمين الروابط.
  فبُنيت الروابط أخيرًا، وصارت الترويسة تحمل ما يحمله الشريط.
*/
.topnav{ display:none; }
@media (min-width:820px){
  .tabbar{ display:none; }
  .main{ padding-bottom:var(--s8); }
  .footer{ padding-bottom:var(--s5); }

  .topnav{ display:flex; align-items:center; gap:var(--s1); margin-inline-end:auto;
           padding-inline-start:var(--s5); }
  .topnav__item{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px 6px 8px; border-radius:12px; text-decoration:none;
    color:var(--text-2); font-size:.9rem; font-weight:700;
    transition:background .16s var(--ease), color .16s var(--ease);
  }
  .topnav__item:hover{ background:var(--surface-2); color:var(--text); text-decoration:none; }
  .topnav__item[aria-current="page"]{ color:var(--text); background:var(--surface-2); }
  /* الأيقونة في حبّةٍ: تُعطيها وزنًا وتجعل المفعَّل يُرى من بعيد */
  .topnav__item svg{ display:block; width:30px; height:30px; padding:5px; border-radius:9px;
    background:color-mix(in srgb, var(--text-3) 12%, transparent); color:var(--text-2);
    transition:background .16s, color .16s; }
  .topnav__item:hover svg{ color:var(--text); }
  .topnav__item[aria-current="page"] svg{ background:var(--gold); color:var(--btn-fg); }
}
/* بين ٨٢٠ و٩٦٠ تضيق الترويسة: تبقى الأيقونات وتُطوى الكلمات */
@media (min-width:820px) and (max-width:960px){
  .topnav__item{ padding:6px; }
  .topnav__lbl{ display:none; }
}


/* ===== 30-components.css ===== */
/* مكوّنات مشتركة — وصفات AMSU حرفيًا بأسماء أصناف المنصة */

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s5); box-shadow:var(--sh1);
  /* حدٌّ يميل درجةً إلى الأرض لا إلى الرمادي: البطاقة تُرفَع من الورق لا تُرسم عليه */
  border-color:color-mix(in srgb, var(--line) 80%, var(--bg-soft));
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card--flat{ box-shadow:none; }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); }

/* زر AMSU: مستطيل بقطر --r2 لا حبّة، والأساسي بلون المحور مع ظل ملوّن */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.72em 1.25em; border-radius:var(--r2); border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg); font-weight:800; font-size:.94em; cursor:pointer;
  min-height:44px; white-space:nowrap;
  font-family:var(--font-display); letter-spacing:-.01em;
  box-shadow:var(--btn-sh);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease),
             background .16s var(--ease), color .16s var(--ease), border-color .16s, filter .16s;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); filter:brightness(1.06); box-shadow:var(--sh2); }
/*
  ★ حيث تصبغ المادةُ سياقَها (style="--acc:…") يعود الزرّ إلى لونها:
  فكرة AMSU «الحياد في الهيكل واللون للمادة» تبقى داخل صفحة المادة
  وبطاقتها، والذهبي لما هو للمنصة كلها: راجع اليوم، احفظ، اشترِ.
*/
[style*="--acc"] .btn, [style*="--acc"].btn{
  --btn-bg: var(--acc); --btn-fg: var(--on-acc); --btn-sh: 0 6px 18px -6px var(--acc);
}
.btn--ink{ --btn-bg: var(--text); --btn-fg: var(--bg); --btn-sh: var(--sh1); }
.btn:active{ transform:translateY(0) scale(.985); box-shadow:var(--sh1); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn--ghost{
  background:var(--surface); color:var(--text); border-color:var(--line-2); box-shadow:var(--sh1);
}
.btn--ghost:hover{ background:var(--surface); border-color:var(--acc); color:var(--acc-d); }
:root[data-theme="dark"] .btn--ghost:hover{ color:var(--acc); }
.btn--soft{ background:var(--acc-soft); color:var(--acc-d); box-shadow:none; }
:root[data-theme="dark"] .btn--soft{ color:var(--acc); }
.btn--sm{ padding:.5em .85em; min-height:38px; font-size:.85em; border-radius:var(--r1); }
.btn--block{ width:100%; }

/* زر الأيقونة كما في شريط AMSU العلوي */
.iconbtn{
  /* ★ ٤٤ لا ٤٢ (تدقيق ١٣ سبتمبر ٢٠٢٦): أدنى مساحة لمسٍ في قاعدة المشروع
     ودليل آبل. زرّا السمة والحساب في الترويسة كانا دونها ببكسلين. */
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px; color:var(--text-2);
  box-shadow:var(--sh1);
  transition:transform .16s var(--ease), background .16s;
}
.iconbtn:hover{ transform:translateY(-1px); color:var(--text); }
.iconbtn__ico{ font-size:1.05rem; line-height:1; }

.field{ display:block; margin-bottom:var(--s4); }
.field__label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:var(--s2); color:var(--text-2); }
.input{
  width:100%; padding:var(--s3) var(--s4); min-height:48px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r2); color:var(--text);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.input:hover{ border-color:var(--text-3); }
.input:focus{ outline:none; border-color:var(--acc); box-shadow:var(--ring); }
.input::placeholder{ color:var(--text-3); }
.field__hint{ font-size:.82rem; color:var(--text-3); margin-top:var(--s1); }
/* التلميح حين يصير حكمًا: نجاحًا أو رفضًا — باللون والنص معًا لا باللون وحده */
.field__hint.is-bad{ color:var(--bad); font-weight:700; }
.field__hint.is-ok{ color:var(--ok); font-weight:700; }

/* شارة AMSU: حبّة بلون المحور الناعم */
.badge{
  display:inline-flex; align-items:center; gap:.35em; padding:.25em .7em; border-radius:var(--r-pill);
  font-size:.78em; font-weight:700; line-height:1.7;
  background:var(--acc-soft); color:var(--acc-d); border:1px solid transparent;
}
:root[data-theme="dark"] .badge{ color:var(--acc); }
.badge--ok{ background:var(--ok-soft); color:var(--ok); }
.badge--warn{ background:var(--warn-soft); color:var(--warn); }
.badge--bad{ background:var(--bad-soft); color:var(--bad); }

/* شريط تقدّم AMSU */
.prog{ height:7px; border-radius:99px; background:var(--line); overflow:hidden; }
.prog>i{ display:block; height:100%; border-radius:99px; background:var(--acc); transition:width .5s var(--ease); }

.empty{ text-align:center; padding:var(--s7) var(--s4); color:var(--text-2); }
.empty__ico{ font-size:2.2rem; line-height:1; display:block; margin-bottom:var(--s3); opacity:.7; }
.empty__title{ font-weight:700; color:var(--text); margin-bottom:var(--s2); }
.empty__text{ max-width:44ch; margin-inline:auto; font-size:.95rem; }

/*
  ★ رأس الصفحة: عنوانٌ يُرى، وشرطة ذهبية قصيرة تحته.
  كان العنوان بحجم عنوان بطاقة فلا يُميَّز أين تبدأ الصفحة. الشرطة هي
  توقيع المنصة الصغير: «فقاعة» ورقة الإجابة مبسوطةً خطًّا — تتكرّر في
  بطل اليوم ورأس الحساب واللوحة، فيعرف الطالب أنه في المكان نفسه.
*/
.page__head{ margin-bottom:var(--s6); position:relative; padding-bottom:var(--s3); }
.page__head::after{
  content:''; position:absolute; inset-inline-start:0; bottom:0;
  width:44px; height:4px; border-radius:var(--r-pill); background:var(--gold);
}
.page__title{ margin-bottom:var(--s1); font-size:clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem); letter-spacing:-.025em; }
.page__sub{ color:var(--text-2); font-size:.95rem; margin:0; }
.is-admin .page__head{ display:none; }   /* اللوحة رأسُها قشرتها — العنوان يُهدر شاشة */

.stack{ display:flex; flex-direction:column; gap:var(--s4); }
.row{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.spacer{ flex:1; }

/* تبويبات AMSU: حبوب — النشط ممتلئ بلون المحور بظل ملوّن */
/*
  ★ التبويبات: شريحة واحدة مقسّمة (segmented) لا حبوبًا متناثرة.
  الحبوب المتفرّقة تبدو أزرارًا مستقلّة فلا يُعرف أنها تتبادل شاشةً واحدة؛
  الشريحة تقول «هذه أقسام شيء واحد» — والمفعَّل يرتفع كبطاقة بيضاء فوقها.
*/
.tabs{
  display:flex; gap:2px; margin-bottom:var(--s5); overflow-x:auto;
  scrollbar-width:none; padding:4px; border-radius:var(--r2);
  background:var(--bg-soft); border:1px solid var(--line-soft);
}
.tabs::-webkit-scrollbar{ display:none; }
.tabs__btn{
  background:none; border:0; cursor:pointer; border-radius:calc(var(--r2) - 4px);
  padding:.55em 1em; color:var(--text-2); font-weight:700; font-size:.88em;
  white-space:nowrap; min-height:40px; flex:1 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  transition:color .2s, background .2s, box-shadow .2s;
}
.tabs__btn:hover{ color:var(--text); }
.tabs__btn[aria-selected="true"]{
  color:var(--text); background:var(--surface); box-shadow:var(--sh1);
}
/*
  ★ التبويبات الأربعة تسع شاشةَ ٣٦٠ بكسل ولا يُقصّ أوّلها.
  بحشوٍ ١em كان مجموعها ٣٦١ في شريطٍ عرضه ٣٢٨ — فيبقى «نظرة عامة» نصفَ
  ظاهرٍ عند الحافة، وهو التبويب المفتوح افتراضًا. والانزلاق موجود لكنه
  لا يُرى: لا شيء يقول للطالب إنّ وراء الحافة تبويبًا.

  ★ وموضعُها هنا لا قبل .tabs__btn: كتبتُها أولًا فوق القاعدة الأساسية،
  وهما بالوزن نفسه — فغلبت الأخيرةُ الأولى وبقي الحشو ١em. ولا خطأ يظهر:
  القاعدة في الملف، والمتصفح يقرؤها، ثم يكتب فوقها. قِستُ الحشو على
  الجهاز فبان — والقراءة وحدها كانت ستقول «أصلحتُها».
*/
@media (max-width:430px){
  .tabs{ gap:1px; padding:3px; }
  .tabs__btn{ padding:.55em .5em; font-size:.83em; gap:.25em; }
}
.tabs__ico{ font-size:1em; line-height:1; opacity:.85; }
.tabs__n{
  font-family:var(--font-num); font-size:.72em; font-weight:800; line-height:1;
  min-width:1.7em; padding:.25em .4em; border-radius:var(--r-pill);
  background:var(--gold); color:var(--btn-fg);
}

.toast{
  position:fixed; inset-inline:0; bottom:calc(var(--tabbar-h) + var(--s4)); margin-inline:auto;
  width:max-content; max-width:88vw; z-index:60;
  background:var(--text); color:var(--bg); padding:.7em 1.2em; border-radius:var(--r-pill);
  font-size:.88em; font-weight:700;
  box-shadow:var(--sh3); opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.toast.is-on{ opacity:1; transform:translateY(0); }

.divider{ height:1px; background:var(--line); border:0; margin-block:var(--s5); }

.btn--danger{ background:var(--bad); color:var(--on-acc); border-color:var(--bad); box-shadow:0 6px 18px -8px var(--bad); }
.btn--danger:hover{ background:color-mix(in srgb, var(--bad) 80%, black); }

/* هيكل انتظار: يحجز مساحة المحتوى فلا تقفز الصفحة عند وصوله */
.skel{ display:block; background:var(--bg-soft); border-radius:var(--r1); }
.skel--line{ height:14px; width:70%; }
@media (prefers-reduced-motion: no-preference){
  .skel{ animation: skelPulse 1.4s var(--ease) infinite; }
  @keyframes skelPulse{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
}

/* ═══ بطاقة الحساب في الترويسة ═══ */
/*
  تحلّ محلّ زرّ «دخول» بعد الدخول. الوجه أولًا ثم الاسم، وعلى الشاشات
  الضيّقة يبقى الوجه وحده — فمساحة الترويسة على الجوال أضيق من أن
  تُنفَق على اسمٍ يعرفه صاحبه.
*/
.authchip{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:4px 10px 4px 4px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line-2);
  color:var(--text); text-decoration:none; box-shadow:var(--sh1);
  transition:transform .16s var(--ease), border-color .16s;
}
.authchip:hover{ transform:translateY(-1px); border-color:var(--acc); }
.authchip__img, .authchip__ico{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  object-fit:cover; display:grid; place-items:center;
  background:var(--acc-soft); font-size:.95rem; line-height:1;
}
.authchip__n{
  font-size:.85rem; font-weight:600; max-width:9ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:480px){
  .authchip{ padding:4px; }
  .authchip__n{ display:none; }
}

/* ═══ شريط التقدّم أثناء عمل الذكاء ═══ */
/*
  خطوط مائلة تتحرّك فوق الجزء المكتمل. الشريط الجامد دقيقتين يُقرأ عطلًا،
  والحركة وحدها تفرّق بين «يعمل» و«علّق» — ولا كلمة تُغني عنها.
*/
.meter--busy .meter__fill{
  /* اللون من الرمز لا من قيمة صريحة: --on-acc هو ما يُقرأ فوق لون التمييز
     في السمتين معًا، فالخطوط تبقى مرئية ليلًا ونهارًا بلا استثناء */
  background-image:linear-gradient(115deg,
    color-mix(in srgb, var(--on-acc) 22%, transparent) 25%, transparent 25%,
    transparent 50%, color-mix(in srgb, var(--on-acc) 22%, transparent) 50%,
    color-mix(in srgb, var(--on-acc) 22%, transparent) 75%, transparent 75%);
  background-size:28px 28px;
  animation:meterFlow 1s linear infinite;
}
@keyframes meterFlow{ from{ background-position:0 0; } to{ background-position:28px 0; } }
/* من طلب تقليل الحركة يرى نبضة هادئة بدل الجريان */
@media (prefers-reduced-motion: reduce){
  .meter--busy .meter__fill{ animation:none; opacity:.85; }
}

/* ═══ صفّ النشر: زرّ النظام ثم واتساب ═══ */
.sharerow{ gap:var(--s2); flex-wrap:wrap; }
.sharerow > *{ flex:1 1 auto; min-width:120px; text-align:center; }
/* زرّ اللوحة بجانب بطاقة الحساب — للمشرف وحده */
#authSlot{ display:inline-flex; align-items:center; gap:var(--s2); }
.authchip__adm{ width:36px; height:36px; border-radius:10px; }
.authchip__adm .iconbtn__ico{ font-size:1rem; }

/* ★ الشارة الذهبية: «جاء في اختبار سابق» — لون الهوية الثابت لا لون المادة،
   لأنها الشيء الذي يدفع الطلاب لأجله تحديدًا ويجب أن يُلتقط في أي مادة. */
.badge--gold{ background:color-mix(in srgb, var(--gold) 18%, var(--surface));
  color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent); }


/* ===== 40-screens.css ===== */
/* تنسيقات الشاشات المركّبة: اللوحة، معالج الرفع، المادة، الاختبار — كلها من المتغيّرات */

/*
  ═══ شابترات الطلاب ═══
  شريطٌ فوق تبويبات المادة. صفٌّ لكل شابتر برقمه وعنوانه وسعره،
  وزرّ إضافة في آخره. جوال أولًا: الرقم والعنوان يبقيان، والزرّ يلتفّ.
*/
.chapstrip{ display:flex; flex-direction:column; gap:var(--s2); }
.chapstrip__head{ display:flex; flex-direction:column; gap:var(--s1); }
.chapstrip__t{ margin:0; font-size:1.02rem; }
.chapstrip__stats{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chapstrip__stats .stat{ padding:var(--s1) var(--s3); background:var(--surface-2);
  border-radius:var(--r-pill); font-size:.84rem; text-align:center; }

.chaplist{ display:flex; flex-direction:column; gap:var(--s2); }
.chapcard{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s3); border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--surface); min-height:44px; }
.chapcard.is-open{ border-color:var(--brand-soft); }
/* ★ شابتر صاحبه قبل الاعتماد: حدٌّ منقّط يقول «ليس بعدُ» بلا كلمة */
.chapcard--mine{ border-style:dashed; background:var(--bg-soft); }
.chapcard__n{ flex:0 0 auto; min-width:28px; height:28px; display:grid; place-items:center;
  border-radius:var(--r-pill); background:var(--surface-2); color:var(--text-2);
  font-size:.86rem; font-weight:700; }
.chapcard__x{ flex:1 1 180px; min-width:0; }
.chapcard__t{ font-weight:600; overflow-wrap:anywhere; }
/*
  ★ «أضف شابتر» يشعّ كما يشعّ «افتح» — بالنبضة نفسها لا بنبضةٍ ثانية.
  الفرق بينهما في الغاية لا في الشكل: «افتح» يقول للدافع «شابترك هنا»،
  و«أضف» يقول للزائر إن في المادة بابًا ثالثًا لا يعرفه — فأكثر الطلاب
  لا يعلم أنه يستطيع رفع شابتر أصلًا، وزرٌّ ساكنٌ بين بطاقات لا يُرى.
  ونبضةٌ واحدة في الصفحة تُقرأ؛ نبضتان مختلفتان تصيران ضجيجًا.
*/
.chapadd{ align-self:flex-start; }

/*
  ★ «افتح» يشعّ للمفتوح وحده: الطالب دفع ثم رجع إلى صفحةٍ فيها أزرارٌ
  متشابهة فلا يعرف أيّها شابتره. والوميض يقول «هنا» بلا كلمة.
  ويحترم prefers-reduced-motion — من أطفأ الحركة لا تُفرض عليه.
*/
.chapopen,
.chapadd{ position:relative; box-shadow:0 0 0 0 var(--brand-soft); animation:chapPulse 2s ease-out infinite; }
@keyframes chapPulse{
  0%   { box-shadow:0 0 0 0 var(--brand-soft); }
  70%  { box-shadow:0 0 0 10px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce){
  .chapopen,
  .chapadd{ animation:none; box-shadow:0 0 0 2px var(--brand-soft); }
}
/* ★ ويسكن فور فتح النموذج: نبضةٌ تدعو إلى بابٍ قد دخلتَه صارت إلحاحًا */
.chapadd[aria-expanded="true"]{ animation:none; box-shadow:none; }
.chapmine__acts{ display:flex; flex-wrap:wrap; gap:var(--s2); flex:1 0 100%; }

/* نموذج رفع الشابتر */
.chapform{ gap:var(--s2); }
.chapform .input[type=file]{ padding:var(--s2); }
.chapform .input--sm{ max-width:120px; }

/*
  تمارين الشابتر وحلولها — تُميَّز عن الشرح بحدٍّ جانبيّ لأنها نصّ الدكتور
  نفسه لا شرحَ الذكاء، والطالب يجب أن يعرف أيّهما يقرأ.
*/
/*
  إيصال الدفع: لونُ النجاح لا لون التلميح.
  السطر نفسه يحمل قبل الضغط «يُخصم ٤٠ كوين» وبعده «خُصم ٤٠ · رصيدك ١٢٠»،
  فلولا تغيّرُ لونه لمرّ الخبران متشابهين ولم ينتبه الطالب أن الدفع تمّ.
*/
.chappaid{ color:var(--ok); font-weight:700; }

.chapex{ border-inline-start:3px solid var(--brand); }
.chapex h3{ margin-block-start:0; }
.chapex ol{ padding-inline-start:var(--s5); }

/*
  مؤشّر التوليد: نسبةٌ كبيرة تُقرأ من بعيد، واسم المرحلة بجانبها،
  ورسالةٌ تتبدّل، ووقتٌ باقٍ. الساكنُ يُقنع الطالب أن الصفحة علِقت.
*/
.genp__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
.genp__pct{ font-size:1.5rem; font-weight:800; color:var(--brand); }
.genp__step{ font-size:.88rem; color:var(--text-2); text-align:end; }
.genp__line{ min-height:2.4em; }          /* ثابتٌ فلا تقفز الصفحة مع تبدّل الرسالة */
.genp__warn{ color:var(--warn); font-weight:600; }
.genp .meter.is-bad .meter__fill{ background:var(--bad); }

/* أسئلة الشابتر بعد فتحه */
.chapq__q{ font-weight:600; margin:0 0 var(--s2); overflow-wrap:anywhere; }
.chapq__o{ margin:0; padding-inline-start:var(--s5); display:flex;
  flex-direction:column; gap:var(--s1); }
/* الإجابة باللون والأيقونة معًا — لا باللون وحده (إمكانية الوصول) */
.chapq__o .is-answer{ color:var(--ok); font-weight:700; }
.chapq__o .is-answer::after{ content:' ✓'; }


/* أرقام اللوحة السريعة */
.stat{ text-align:center; padding:var(--s4); }
.stat__num{ display:block; font-size:1.6rem; font-weight:800; color:var(--brand); }
.stat__lbl{ font-size:.82rem; color:var(--text-2); }

/* صف قابل للضغط في الجداول */
.rowbtn{ width:100%; background:none; border:0; border-bottom:1px solid var(--line-soft);
  padding:var(--s3) var(--s1); cursor:pointer; text-align:start; min-height:44px; }
.rowbtn:hover{ background:var(--surface-2); }

.input--sm{ min-height:38px; padding:var(--s2) var(--s3); width:auto; }

/* خطوات المعالج */
.steps{ display:flex; gap:var(--s2); list-style:none; padding:0; margin:0 0 var(--s5);
  overflow-x:auto; }
.steps__item{ display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3);
  border-radius:var(--r-pill); border:1px solid var(--line); color:var(--text-3);
  font-size:.85rem; font-weight:600; white-space:nowrap; }
.steps__item.is-on{ background:var(--brand-soft); color:var(--brand); border-color:transparent; }
.steps__item.is-done{ color:var(--ok); }
.steps__num{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); font-size:.75rem; font-weight:800; }
.is-on .steps__num{ background:var(--brand); color:var(--on-brand); }
.is-done .steps__num{ background:var(--ok-soft); color:var(--ok); }

/* منطقة الإسقاط */
.drop{ border:2px dashed var(--line); border-radius:var(--r3); padding:var(--s7) var(--s4);
  text-align:center; cursor:pointer; background:var(--surface); transition:border-color var(--t) var(--ease); }
.drop:hover,.drop.is-over{ border-color:var(--brand); }

/* شريط التقدّم «٨٠ من ٣٠٠» */
.meter{ height:10px; border-radius:var(--r-pill); background:var(--bg-soft); overflow:hidden; }
.meter__fill{ height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:inherit; transition:width var(--t) var(--ease); }

/* بطاقة السؤال وخياراته */
/* ═══ ورقة الامتحان ═══
   المرجع البصري هنا ليس تطبيقًا بل كرّاسة الامتحان التي جلس عليها كل طالب:
   خط هامش، ورقم السؤال في الهامش خارج كتلة النص، وخيارات بأحرف أ ب ج د،
   ومفتاح إجابة يعلّم الصحيح. الطالب يعرف هذه اللغة قبل أن يقرأ سطرًا. */
.qitem{
  position:relative;
  padding-inline-start:var(--s7);
  border-inline-start:2px solid var(--rule);
}
.qitem + .qitem{ margin-top:var(--s6); }
/* رقم السؤال في الهامش: يجعل الطالب يقول «سؤال ٤٧» لزميله بدل أن يصفه */
.qitem__n{
  position:absolute; inset-inline-start:0; top:2px;
  width:var(--s7); text-align:center;
  font-family:var(--font-num); font-size:.82rem; font-weight:700;
  color:var(--brand); opacity:.75;
}
.q__text{
  margin:0 0 var(--s4);
  max-width:var(--measure);
  font-size:var(--read-size); line-height:var(--read-lh); font-weight:500;
  white-space:pre-wrap; text-wrap:pretty;
}
.q__opts{ gap:var(--s2); max-width:var(--measure); }

/* الخيار: حرفه أولًا كما في كل ورقة امتحان، ثم نصّه */
.opt{
  display:flex; align-items:flex-start; gap:var(--s3); width:100%; text-align:start;
  padding:var(--s3) var(--s4); border-radius:var(--r2); min-height:44px;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  line-height:1.8; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.opt:hover{ border-color:var(--brand); }
.opt__l{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  font-family:var(--font-display); font-size:.8rem; font-weight:700;
  background:var(--bg-soft); color:var(--text-2); border:1px solid var(--line);
}
.opt__mark{ flex:0 0 auto; min-width:1.1em; font-weight:800; margin-inline-start:auto; }

/* مفتاح الإجابة: لون وأيقونة وحرف مملوء — ثلاث إشارات لا لون وحده */
.opt.is-answer{ background:var(--ok-soft); border-color:var(--ok); font-weight:600; }
.opt.is-answer .opt__l{ background:var(--ok); color:var(--on-brand); border-color:var(--ok); }
.opt.is-answer .opt__mark{ color:var(--ok); }
.opt.is-wrong{ background:var(--bad-soft); border-color:var(--bad); }
.opt.is-wrong .opt__l{ background:var(--bad); color:var(--on-brand); border-color:var(--bad); }
.opt.is-wrong .opt__mark{ color:var(--bad); }

/* وسم «الإجابة» — يُقرأ بلا لون ولا أيقونة */
.opt__tag{
  flex:0 0 auto; font-size:.7rem; font-weight:700; padding:2px 8px;
  border-radius:var(--r-pill); background:var(--ok); color:var(--on-brand);
}

/* ═══ بطاقة المادة — بطاقة AMSU حرفيًا ═══ */
.sub-card{
  position:relative; overflow:hidden; text-align:start; border-radius:var(--r3);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh1);
  padding:var(--s4) var(--s4) var(--s4);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  display:flex; flex-direction:column; gap:var(--s3); width:100%; cursor:pointer;
  /* خيطٌ ملوّن على الحافة الجانبية: لون المادة يُرى من بعيد بلا تدرّجٍ يغرق البطاقة */
  border-inline-start:4px solid var(--acc);
}
.sub-card:hover{ transform:translateY(-3px); box-shadow:var(--sh2); border-color:color-mix(in srgb, var(--acc) 40%, var(--line)); border-inline-start-color:var(--acc); }

/* مادة عليها إثراء — توهّج لطيف بلون المادة لا بنفسجي جاهز */
.sub-card--enrich{
  border-color:color-mix(in srgb, var(--acc) 45%, var(--line));
  box-shadow:
    var(--sh1),
    0 0 0 1px color-mix(in srgb, var(--acc) 28%, transparent),
    0 0 28px -6px color-mix(in srgb, var(--acc) 55%, transparent);
}
.sub-card--enrich:hover{
  box-shadow:
    var(--sh2),
    0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent),
    0 0 36px -4px color-mix(in srgb, var(--acc) 65%, transparent);
}
.enrich-shine{
  pointer-events:none; position:absolute; inset:-40% -20% auto auto;
  width:70%; height:70%; border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--acc) 35%, transparent) 0%,
    transparent 70%);
  opacity:.55; animation:enrichPulse 4.5s var(--ease) infinite;
}
.enrich-shine--hero{
  inset:auto -15% -35% auto; width:55%; height:90%; opacity:.4;
}
@keyframes enrichPulse{
  0%,100%{ opacity:.4; transform:scale(1); }
  50%{ opacity:.7; transform:scale(1.06); }
}
@media (prefers-reduced-motion:reduce){
  .enrich-shine{ animation:none; opacity:.45; }
}
.badge--enrich{
  background:color-mix(in srgb, var(--acc) 18%, var(--surface));
  color:var(--acc-d); border:1px solid color-mix(in srgb, var(--acc) 35%, transparent);
}
:root[data-theme="dark"] .badge--enrich{ color:var(--acc); }
.sub-hero--enrich{
  box-shadow:0 12px 40px -16px color-mix(in srgb, var(--acc) 70%, transparent);
}
.sub-hero--enrich .figwrap{
  box-shadow:0 0 24px color-mix(in srgb, var(--on-acc) 25%, transparent);
}
.stat--enrich{
  background:rgba(255,255,255,.22) !important;
  border-color:rgba(255,255,255,.4) !important;
  font-weight:800;
}
.sub-card .sc-top{ display:flex; align-items:center; gap:var(--s3); min-width:0; }
/* بلاطة الأيقونة: لون المادة صلبًا — الهوية في مربّعٍ واحد لا في خلفيةٍ باهتة */
.sub-card .sc-ico{
  flex:0 0 52px; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:1.6rem; line-height:1; background:var(--acc); color:var(--on-acc);
  box-shadow:0 6px 16px -8px var(--acc);
}
.sub-card .sc-x{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sub-card h3{ margin:0; font-size:1.08em; line-height:1.3; }
.sub-card .qn{ color:var(--text-3); font-size:.8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub-card .foot{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.8em; }
.sub-card .examline{
  display:flex; align-items:center; gap:.45em; flex-wrap:wrap;
  padding:.45em .7em; border-radius:10px; background:var(--acc-soft);
  font-size:.78em; line-height:1.5;
}
.sub-card .examline .when{ color:var(--text-2); }
.sub-card .examline b{ margin-inline-start:auto; font-weight:800; color:var(--acc-d); font-variant-numeric:tabular-nums; }
:root[data-theme="dark"] .sub-card .examline b{ color:var(--acc); }
.sub-card .examline b.urgent{ color:var(--bad); }
.sub-card .sc-prog{ display:flex; flex-direction:column; gap:4px; }
.sub-card .sc-prog__l{ font-size:.76em; color:var(--text-3); }
.sub-card .sc-act{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-top:auto; }
.sub-card .sc-act .cta{ flex:1 1 auto; }
@keyframes urgentblink{ 0%,100%{opacity:1} 50%{opacity:.55} }
.urgent{ animation:urgentblink 2s ease-in-out infinite; }

/* ختم «تم الانتهاء» لمادة انقضى موعدها — كما في AMSU */
.stamp{
  display:block; position:absolute; z-index:6; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-13deg);
  font-size:clamp(1.25rem,3.4vw,1.9rem); font-weight:900; letter-spacing:.02em; white-space:nowrap;
  color:var(--bad); border:4px double var(--bad); border-radius:14px;
  padding:.18em .7em; background:color-mix(in srgb, var(--bad) 12%, var(--surface));
  pointer-events:none; opacity:.92;
}
.sub-card.exam-done{ filter:grayscale(.75); opacity:.72; }
.sub-card.exam-done .art{ filter:saturate(.35); }
.sub-card.exam-done h3{ text-decoration:line-through; text-decoration-thickness:2px; color:var(--text-2); }
.sub-card.exam-done:hover{ filter:grayscale(.35); opacity:1; }

/* البطاقات المقلوبة ثلاثية الأبعاد لوضع الحفظ */
/* بطاقات البنك: بطاقة واحدة — الوجه المخفي لا يظهر (display:flex يلغي [hidden] بلا هذا) */
.flip{
  cursor:pointer;
  min-height:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r3);
  overflow:hidden;
}
.flip.is-flipped{ border-color:color-mix(in srgb, var(--brand) 35%, var(--line)); }
.flip__face{
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s4);
  min-height:120px;
  background:transparent;
  border:0;
  border-radius:0;
}
.flip__face[hidden]{ display:none !important; }
.flip__face--back{ background:var(--brand-soft); }
.flip__ans-l{ margin:0; font-size:.85rem; font-weight:700; color:var(--text-3); }
.flip__ans{ margin:0; line-height:1.65; font-weight:700; font-size:1.05rem; }
.flip__expl{ margin:0; line-height:1.75; color:var(--text-2); font-size:1rem; }
.flip__hint{ margin-top:auto; font-size:.82rem; opacity:.75; }
.flip .exam-trap, .flip .plat-expl{ margin-top:var(--s2); }
.bank-sec__body.grid{ align-items:stretch; gap:var(--s4); }
.bank-sec__body.grid .flip{ height:100%; }
@media (max-width:639px){
  .bank-sec__body.grid{ grid-template-columns:1fr; }
}

/* شاشة النتيجة */
.result__pct{ font-size:3rem; font-weight:800; color:var(--brand); }
.result__grade{ font-size:1.2rem; font-weight:700; }

/* عدّاد تنازلي وموقّت */
.timer{ font-weight:800; font-variant-numeric:tabular-nums; }
.timer.is-low{ color:var(--bad); }

/* أقسام مطوية */
.fold > summary{ cursor:pointer; font-weight:700; padding:var(--s3) 0; list-style:none; }
.fold > summary::before{ content:'◂'; display:inline-block; margin-inline-end:var(--s2);
  transition:transform var(--t) var(--ease); color:var(--text-3); }
.fold[open] > summary::before{ transform:rotate(-90deg); }

/* بنك الأسئلة: محاور ظاهرة + أسئلة تحتها مباشرة */
.bank-pane{ gap:var(--s3); }
.bank-pane__search{ margin-top:var(--s1); }
.bank-list{ gap:var(--s5); }
.bank-sec{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r3);
  padding:var(--s3) var(--s4) var(--s4);
}
.bank-sec__h{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding-bottom:var(--s3); margin-bottom:var(--s3);
  border-bottom:1px solid var(--line-soft);
}
.bank-sec__title{
  margin:0; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
  line-height:1.4;
}
.bank-sec__body.stack{ gap:var(--s3); }
.bank-sec .qitem{ margin-top:0; padding-block:var(--s2); }
.bank-sec .qitem + .qitem{ margin-top:0; border-top:1px solid var(--line-soft); padding-top:var(--s3); }
.bank-sec .btn--block{ margin-top:var(--s3); }

/* ═══ بطاقة المادة: سطر في خطة مقرّر ═══ */
.subj__id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
/* رمز المقرر أولًا كما يُكتب في الجدول الدراسي — يعرفه الطالب قبل الاسم */
.subj__code{
  font-family:var(--font-num); font-size:.7rem; font-weight:700;
  color:var(--text-3); letter-spacing:.06em;
}
.subj__name{ margin:0; font-family:var(--font-display); font-size:1rem; line-height:1.45; }

.subj__facts{
  display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap;
  margin:var(--s3) 0 var(--s2);
  font-size:.8rem; color:var(--text-2);
}
.subj__pct{ margin-inline-start:auto; font-weight:700; color:var(--brand); }

/* موعد الاختبار كموعد نهائي لا كوسم: الرقم يكبر لأنه ما يقرأه الطالب أولًا */
.deadline{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  padding:var(--s2) var(--s3); border-radius:var(--r2);
  background:var(--warn-soft); border:1px solid var(--warn); line-height:1.1;
}
.deadline__n{ font-size:1.15rem; font-weight:800; color:var(--warn); }
.deadline__l{ font-size:.64rem; font-weight:700; color:var(--warn); }

/* ═══════════ قسم الجامعة ═══════════
   الشريط أعلى الشاشة الأولى: باب جامعة الطالب. صُمِّم كلوحة على مدخل
   مبنى — إطار عنّابي وأيقونة بيت — لا كبطاقة إعلان، لأنه انتماء لا عرض. */
.campus-band{
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) var(--s5); margin-bottom:var(--s4);
  background:var(--surface); border:1px solid var(--line);
  border-inline-start:4px solid var(--brand);
  border-radius:var(--r2); box-shadow:var(--sh1);
  color:inherit; text-decoration:none;
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.campus-band:hover{ box-shadow:var(--sh2); transform:translateY(-1px); }
/* من لم يحدّد جامعته: حدّ متقطّع — دعوة لم تكتمل بعد، لا حالة نهائية */
.campus-band--ask{ border-style:dashed; border-inline-start-style:solid; background:var(--surface-2); }
.campus-band__ico{
  width:42px; height:42px; flex:0 0 42px; border-radius:var(--r2);
  display:grid; place-items:center; font-size:1.2rem;
  background:var(--brand-soft); color:var(--brand);
}
.campus-band__x{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.campus-band__t{ font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; }
.campus-band__d{ font-size:.85rem; color:var(--text-3); line-height:1.7; }
.campus-band__go{ margin-inline-start:auto; color:var(--brand); font-weight:800; }

/* ترويسة القسم */
.uni-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s6);
  padding-bottom:var(--s4); border-bottom:2px solid var(--rule);
}
.uni-head__t{
  font-family:var(--font-display); font-size:clamp(1.3rem, 4vw, 1.8rem);
  margin:0 0 var(--s2); letter-spacing:-.025em;
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
}
.uni-head__s{ margin:0; color:var(--text-3); font-size:.9rem; }

/* عنوان الكلية: خط هامش الورقة يفصل مجموعة عن مجموعة بلا ثقل */
.uni-col{
  display:flex; align-items:center; gap:var(--s3);
  margin:var(--s7) 0 var(--s4); font-family:var(--font-display); font-size:1.05rem;
}
.uni-col::after{ content:''; flex:1; height:1px; background:var(--line); }
.uni-col__n{
  order:3; font-size:.78rem; color:var(--text-3);
  background:var(--surface-2); border:1px solid var(--line-soft);
  padding:1px var(--s3); border-radius:var(--r-pill);
}

/* منتقي الجامعة */
.campus-pick__row{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
@media (min-width:720px){ .campus-pick__row{ grid-template-columns:repeat(3,1fr); } }
.campus-pick .field{ margin:0; }

/* ═══════════ الجودة والثقة ═══════════ */
.badge--star{ background:var(--gold-soft); color:var(--warn); border-color:var(--gold); }

/* نجوم التقييم: كبيرة بما يكفي للّمس بالإبهام على الجوال (٤٤ بكسل) */
.rate__stars{ display:flex; gap:var(--s1); margin-bottom:var(--s3); }
.rate__star{
  min-width:44px; height:44px; font-size:1.5rem; line-height:1;
  background:none; border:0; cursor:pointer; color:var(--text-3);
  transition:transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.rate__star:hover{ transform:scale(1.12); }
.rate__star.is-on{ color:var(--star); }

/* زر البلاغ: باهت حتى يُحتاج — لا نُغري بالإبلاغ، نُتيحه */
.qitem__flag{
  background:none; border:0; cursor:pointer; color:var(--text-3);
  font-size:.95rem; padding:var(--s1) var(--s2); border-radius:var(--r1);
  opacity:.55; transition:opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.qitem__flag:hover, .qitem__flag:focus-visible{ opacity:1; color:var(--bad); }
.report{ margin-top:var(--s3); border-color:var(--warn); }

/* بطاقة البلاغ في طابور المشرف */
.rep{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r2);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
}
.rep__head{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.rep__subj{ font-weight:700; color:var(--brand); }
.rep__when{ margin-inline-start:auto; font-size:.78rem; color:var(--text-3); }
.rep__q{ background:var(--surface-2); border-radius:var(--r1); padding:var(--s4); }
.rep__qt{ margin:0 0 var(--s3); font-weight:600; line-height:1.8; }
.rep__opts{ margin:0; padding-inline-start:var(--s5); display:grid; gap:var(--s2); }
.rep__opts li{ display:flex; align-items:center; gap:var(--s2); font-size:.9rem; }
.rep__opts li.is-answer{ color:var(--ok); font-weight:700; }
.rep__note{ margin:0; color:var(--text-2); font-style:italic; }
.rep__act{ display:flex; flex-direction:column; gap:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line-soft); }

/* تحذير المكرر */
.dupwarn{ border-color:var(--warn); background:var(--warn-soft); }
.dupwarn__row{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s3) var(--s4); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r1); color:inherit; text-decoration:none;
}
.dupwarn__row:hover{ border-color:var(--brand); }
.dupwarn__n{ font-weight:700; }

/* ═══════════ المجتمع ═══════════ */
.brd{ display:flex; flex-direction:column; gap:var(--s2); }
.brd__row{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r1);
}
/* الثلاثة الأوائل بخلفية ذهبية خفيفة — تمييز يُرى بلمحة بلا صراخ */
.brd__row.is-top{ background:var(--gold-soft); border-color:var(--gold); }
/* صفّك أنت بإطار الهوية: تجده في اللوحة بلا قراءة الأسماء */
.brd__row.is-me{ border-inline-start:3px solid var(--brand); font-weight:700; }
.brd__row.is-mine-out{ margin-top:var(--s3); border-style:dashed; }
.brd__rank{ min-width:2.2em; text-align:center; font-weight:800; }
.brd__av{ font-size:1.1rem; }
.brd__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brd__pts{ font-size:.85rem; color:var(--text-2); }

/* نبض المادة: نقطة تتنفّس — حياة لا تنبيه */
.pulse{
  display:inline-flex; align-items:center; gap:var(--s2);
  /*
    ★ وحبّةٌ بقدر كلمتها لا شريطٌ بعرض العمود.
    أبوها ‎.stack‎ عمودٌ مرن، والعنصر المرن يُبلَّط: ‎inline-flex‎ تصير ‎flex‎
    ويمدّه ‎stretch‎ إلى آخر السطر — فيصير خبرٌ لطيف شريطًا أخضر عريضًا يصيح.
    ‎align-self‎ تُعيده إلى حجم نصّه.
  */
  align-self:flex-start;
  padding:var(--s2) var(--s4); border-radius:var(--r-pill);
  background:var(--ok-soft); color:var(--ok); font-size:.85rem; font-weight:700;
}
.pulse__dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); }
@media (prefers-reduced-motion: no-preference){
  .pulse__dot{ animation:pulse-beat 2.4s var(--ease) infinite; }
}
@keyframes pulse-beat{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/*
  ═══ «المتواجدون الآن» — الزرّ الذي ينبض وقائمته ═══
  خبرُ الأسبوع ساكنٌ يُقرأ، وخبرُ هذه اللحظة يُضغط. فالثاني زرٌّ يتنفّس
  بحلقةٍ تتّسع وتخفت — لا لونًا صارخًا ولا حركةً تُلحّ: النبض يقول «هنا
  شيءٌ حيّ» ويكفي. ولونه لون المادة (‎--acc‎) لا الأخضر: الأخضر قيلَ مرة
  في الحبّة التي بجانبه، ولونان متطابقان يُلغي أحدهما الآخر.
*/
.pulse-band__row{ gap:var(--s2); }
.pulse--btn{
  border:0; font-family:inherit; cursor:pointer;
  background:var(--acc-soft); color:var(--acc-d);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pulse--btn .pulse__dot{ background:currentColor; }
.pulse--btn:hover{ background:color-mix(in srgb, var(--acc) 22%, var(--surface)); }
.pulse--btn:active{ transform:scale(.97); }
.pulse--btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.pulse__n{
  min-width:1.5em; text-align:center; font-weight:800;
  background:color-mix(in srgb, var(--acc) 22%, transparent);
  border-radius:var(--r-pill); padding:0 .45em;
}
@media (prefers-reduced-motion: no-preference){
  .pulse--btn{ animation:present-beat 2.6s var(--ease) infinite; }
  /* ★ والحلقة تقف عند اللمس والفتح: نبضٌ تحت الإصبع يشوّش لا يدعو */
  .pulse--btn:hover, .pulse--btn[aria-expanded="true"]{ animation:none; }
}
@keyframes present-beat{
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--acc) 40%, transparent); }
  70%  { box-shadow:0 0 0 9px color-mix(in srgb, var(--acc) 0%, transparent); }
  100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--acc) 0%, transparent); }
}

/* القائمة: أسماء لا أرقام — وسقفٌ للطول كي لا تدفع الصفحة كلها */
.present{
  display:flex; flex-direction:column; gap:var(--s1);
  max-height:44vh; overflow-y:auto;
  padding:var(--s2); border:1px solid var(--line-soft); border-radius:var(--r1);
  background:var(--surface);
}
.present__row{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s2); border-radius:var(--r1);
}
.present__row.is-me{ background:var(--acc-soft); font-weight:700; }
.present__av{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:var(--bg-soft); font-size:.95rem;
}
.present__av img{ width:100%; height:100%; object-fit:cover; }
.present__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }

/* رمز التحدّي: كبير متباعد — يُملى صوتًا في مجموعة الدفعة */
.chall__code{
  font-family:var(--font-num); font-size:2rem; font-weight:800;
  letter-spacing:.28em; color:var(--brand); margin:var(--s3) 0;
  text-align:center; background:var(--brand-soft);
  padding:var(--s4); border-radius:var(--r2); border:2px dashed var(--brand);
}
.chall__code--sm{
  font-size:.95rem; letter-spacing:.16em; padding:2px var(--s3);
  margin:0; border-width:1px; border-radius:var(--r1);
}

/* ═══════════ الدفع ═══════════
   بطاقة الباقة: الرقم أولًا وأكبر — الطالب يقارن الكوينز لا الأسعار،
   لأن السعر بلا معرفة ما يشتريه رقمٌ بلا معنى. */
.pack{
  display:flex; flex-direction:column; align-items:center; gap:var(--s1);
  padding:var(--s6) var(--s4); text-align:center; position:relative;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  box-shadow:var(--sh1);
}
.pack--best{ border-color:var(--brand); box-shadow:var(--sh2); }
.pack__tag{
  position:absolute; top:calc(var(--s3) * -1); inset-inline-start:50%;
  transform:translateX(50%); background:var(--brand); color:var(--on-brand);
  font-size:.72rem; font-weight:800; padding:2px var(--s4); border-radius:var(--r-pill);
}
.pack__n{ font-family:var(--font-num); font-size:2.1rem; font-weight:800; color:var(--brand); line-height:1.1; }
.pack__u{ font-size:.8rem; color:var(--text-3); font-weight:700; }
/* ★ «≈ ٣٠٠ سؤالًا» هو ما يفهمه الطالب — الكوين وحدة داخلية لا قيمة */
.pack__q{ font-size:.82rem; color:var(--text-2); margin:var(--s2) 0; }
.pack__p{ font-family:var(--font-num); font-weight:700; margin-bottom:var(--s3); }

.payrow{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s3) var(--s4); background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:var(--r1);
}
.payrow__t{ font-weight:700; flex:1; min-width:0; overflow-wrap:anywhere; }   /* نصٌّ طويل يلتفّ ولا يدفع الصف */
.payrow__d{ font-size:.78rem; color:var(--text-3); }

/* شريط مالك المادة — تمييزٌ هادئ لا تنبيه: هذه حالة طيّبة لا تحذير */
.ownerband{
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  display:grid; gap:.25rem;
}
/* مادةٌ تنتظر الاعتماد: حافةٌ ذهبية — حالةٌ مؤقّتة لا خطأ */
.ownerband--pending{
  border-inline-start:4px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
}

/* ═══ التحليل الشامل — HTML مولَّد يخضع لنظام التصميم ═══ */
/* الوسوم تصل عارية من كل سمة (عقّمناها مرتين) — فالمظهر كله من هنا،
   وبمتغيرات النظام حصرًا: التحليل يرث هوية المنصة لا يجلب هويته معه */
/* أسلوب prose في AMSU: عناوين بلون المادة، جداول بزوايا وترويسة ملوّنة ناعمة */
.analysis{ line-height:1.9; }
.analysis p{ margin:0 0 .6em; }
.analysis h3{ margin:1.4em 0 .35em; font-size:1.1em; color:var(--acc-d); }
:root[data-theme="dark"] .analysis h3{ color:var(--acc); }
.analysis h3:first-child{ margin-top:0; }
.analysis h4{ margin:1.1em 0 .3em; font-size:.98em; }
.analysis ul{ margin:.5em 0 1em; padding-inline-start:1.25em; }
.analysis li{ margin-bottom:.4em; }
.analysis strong{ color:var(--text); font-weight:800; }
/*
  ★ الجدول ينزلق داخل حاويته، والصفحة لا تتزحزح.
  كان عرضه ١٠٠٪ مع overflow-wrap:anywhere: على ٣٦٠ بكسل يُضغط العمود حتى
  تنكسر الكلمة حرفًا حرفًا — «الت / مييـ / ز» — وهذا نصٌّ لا يُقرأ. فحدٌّ
  أدنى للعرض يُبقي الأعمدة مقروءة، وانزلاقٌ في الحاوية وحدها.
  (اللفّ في 57-analysis.js كي يبقى display:table ولا تنهار المحاذاة.)
*/
.tbl-scroll{ overflow-x:auto; margin:.7em 0 1.3em; -webkit-overflow-scrolling:touch; }
/*
  ★ width:max-content مع min-width:100% — لا min(30rem, max-content).
  كتبتُ الثانية أولًا فسقط الإعلان كلّه صامتًا: max-content كلمةٌ مفتاحية
  لا طول، و min() لا تقبل إلا الأطوال. ولا خطأ يظهر — يبقى width:100%
  القديم ويظنّ الكاتب أنه أصلح. (قِسته على جهازٍ حقيقي: ٣٢٨ بكسل كما كان.)
  والزوج الصحيح: يتّسع الجدول لمحتواه فينزلق، ويملأ الحاوية إن كان أضيق.
*/
.tbl-scroll > table{ margin:0; width:max-content; min-width:100%; max-width:none; }
.analysis table{
  width:100%; border-collapse:separate; border-spacing:0; margin:.7em 0 1.3em;
  font-size:.88em; overflow-wrap:normal; word-break:normal;
  border:1px solid var(--line); border-radius:var(--r2); overflow:hidden;
}
.analysis th, .analysis td{ padding:.6em .8em; text-align:start; vertical-align:top; }
.analysis td{ border-top:1px solid var(--line); }
.analysis thead th{ background:var(--acc-soft); color:var(--acc-d); font-weight:800; font-size:.95em; }
:root[data-theme="dark"] .analysis thead th{ color:var(--acc); }
.analysis tbody tr:nth-child(even){ background:var(--surface-2); }
.analysis section + section{ margin-top:1.6em; }

/* ═══ بطل الملف الشخصي — وجه الطالب في المنصة ═══ */
/*
  ★ بطل الملف: حبرٌ وذهب لا رمادي.
  كان تدرّجًا رماديًا باهتًا تفيض منه الصورة، فبدا الملف بلا صاحب.
  الآن اللوحة نفسها التي في «ورقة اليوم» — فالطالب في المكان نفسه —
  والصورة داخل الإطار بحلقة ذهبية، لا فوقه.
*/
.pf-hero{
  display:flex; align-items:center; gap:var(--s5);
  background:var(--today-bg); color:var(--today-fg);
  border-color:var(--today-line); box-shadow:var(--sh3);
  position:relative; overflow:hidden; isolation:isolate;
}

.pf-hero__avwrap{ position:relative; flex:0 0 auto;
  /* الصورة والرمز مختلفا الحجم، فنُثبّت المساحة كي لا يقفز البطل بينهما */
  width:104px; height:104px; display:grid; place-items:center; }
/*
  ★ الصورة والرمز ليسا سواءً، وكانا بحجمٍ واحد.
  صورةُ الطالب هويّته: يرفعها ليُعرَف بها، فتستحق المساحة كاملة وإطارًا
  يلفتها. والرمز بديلٌ مؤقّت لمن لم يرفع بعد — وحين يُعرض بالحجم نفسه
  يبدو اختيارًا نهائيًا لا دعوةً للرفع، فيستقرّ عليه الطالب ويبقى بلا وجه.
  الحجم هنا رسالة: الكبير مطلوب، والصغير مؤقّت.
*/
.pf-hero__img{
  width:104px; height:104px; border-radius:50%; object-fit:cover;
  border:3px solid var(--acc); box-shadow:var(--sh2); background:var(--acc-soft);
}
.pf-hero__emoji{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; line-height:1; font-size:1.7rem;
  /* إطارٌ متقطّع: لغةُ «مكانٌ ينتظر أن يُملأ» في كل واجهة */
  border:2px dashed color-mix(in srgb, var(--acc) 55%, transparent);
  background:var(--acc-soft); color:var(--text-2);
}
.pf-hero__cam{
  position:absolute; inset-inline-end:0; bottom:0;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:var(--acc); color:var(--on-acc); border:2px solid var(--surface);
  display:grid; place-items:center; font-size:.95rem; box-shadow:var(--sh1);
  transition:transform .16s var(--ease);
}
.pf-hero__cam:hover{ transform:scale(1.1); }
.pf-hero__x{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pf-hero__n{ font-family:var(--font-display); font-size:1.2rem; letter-spacing:-.02em; }
.pf-hero__mail{ font-size:.8rem; color:var(--text-3); }
.pf-hero__bio{ margin:.35em 0 0; font-size:.9rem; color:var(--text-2); line-height:1.8; }
@media (max-width:480px){ .pf-hero{ flex-direction:column; text-align:center; }
  .pf-hero__x{ align-items:center; } }

/* ═══ المجتمع: وجوه الطلاب وسمعتهم ═══ */
.peer-face{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto; object-fit:cover;
  background:var(--acc-soft); border:2px solid var(--line-2);
  display:grid; place-items:center; font-size:1.3rem; line-height:1;
}
.peer-face--sm{ width:30px; height:30px; font-size:1rem; border-width:1px; }
.peer-face--lg{ width:88px; height:88px; font-size:2.6rem; border:3px solid var(--acc); box-shadow:var(--sh2); }

.peer-stars{ display:inline-flex; align-items:center; gap:.4em; }
.peer-stars__s{ color:var(--star); letter-spacing:.06em; }
.peer-stars__n{ font-size:.78rem; color:var(--text-3); }

/* أرقام العطاء: ثلاث خانات متساوية تُقرأ بلمحة */
.peer-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.peer-stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r2);
  padding:var(--s4) var(--s3); text-align:center; box-shadow:var(--sh1);
  display:flex; flex-direction:column; gap:2px;
}
.peer-stat b{ font-family:var(--font-num); font-size:1.5rem; font-weight:800; color:var(--acc); }
:root[data-theme="light"] .peer-stat b{ color:var(--acc-d); }
.peer-stat span{ font-size:.78rem; color:var(--text-3); }

/* رأي زميل */
.peer-op{ padding:var(--s4); }
.peer-op__n{ font-weight:700; color:var(--text); }
.peer-op__n:hover{ color:var(--acc); }

/* سطر «رفعها فلان» فوق المادة */
.peer-by{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4); margin-bottom:var(--s4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r2); box-shadow:var(--sh1); color:inherit;
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.peer-by:hover{ box-shadow:var(--sh2); transform:translateY(-1px); text-decoration:none; }
.peer-by__x{ display:flex; flex-direction:column; line-height:1.35; }
.peer-by__l{ font-size:.72rem; color:var(--text-3); }
.peer-by__n{ font-weight:800; font-family:var(--font-display); }
.peer-by__go{ margin-inline-start:auto; color:var(--acc); font-weight:800; }

/* صف مادة مرفوعة في لوحة الطالب */
.up-row{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4); border:1px solid var(--line); border-radius:var(--r2);
  background:var(--surface-2); color:inherit;
  transition:border-color var(--t) var(--ease);
}
.up-row:hover{ border-color:var(--acc); text-decoration:none; }
.up-row__ico{ font-size:1.4rem; line-height:1; }
.up-row__x{ display:flex; flex-direction:column; min-width:0; flex:1; }
.up-row__t{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-row__s{ font-size:.78rem; color:var(--text-3); }

/* إيميل الطالب في بطاقات المشرف — سطر لاتيني قابل للنسخ */
.stu__mail{
  font-size:.78rem; color:var(--acc-d); user-select:all;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw;
}
:root[data-theme="dark"] .stu__mail{ color:var(--acc); }

/* عدّاد الاختبار — كل طالب وموعده */
.exambar{ margin:0; }
.exambar__t{
  font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--acc); font-size:1.05rem;
}

/* ═══ رأس المادة — sub-hero من AMSU حرفيًا ═══
   يهرب من قيد .wrap إلى حافتي الشاشة (هامش سالب بنصف الفارق)،
   ثم يعيد .wrap الداخلي توسيط محتواه. */
.sub-hero{
  position:relative; overflow:hidden;
  margin-inline:calc(50% - 50vw);
  margin-top:calc(var(--s5) * -1);            /* يلتصق بالشريط العلوي كما في AMSU */
  border-radius:0 0 var(--r4) var(--r4);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--acc) 92%, black),
    color-mix(in srgb, var(--acc) 62%, rgb(17,17,17)));
  color:var(--on-acc);
  /* +14px فوق مقياس AMSU: رأسنا يلتصق بشريطٍ علويّ لاصق فتحتاج أزراره متنفَّسًا */
  padding:calc(clamp(20px,4vw,34px) + 14px) 0 clamp(22px,4vw,30px);
  margin-bottom:var(--s4);
}
.sub-hero .herotop{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.sub-hero .topacts{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.copybtn{
  display:inline-flex; align-items:center; gap:.4em; color:var(--on-acc); font-size:.8em; font-weight:700;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); cursor:pointer;
  padding:.45em .85em; border-radius:var(--r-pill); margin-bottom:.9rem; transition:all .2s var(--ease);
}
.copybtn:hover{ background:var(--surface); color:var(--acc-d); transform:translateY(-1px); }
.backbtn{
  display:inline-flex; align-items:center; gap:.4em; color:var(--on-acc); opacity:.9;
  font-size:.85em; font-weight:700; margin-bottom:.9rem;
}
.backbtn:hover{ opacity:1; text-decoration:none; }
.sub-hero .inner{ position:relative; display:flex; align-items:center; gap:clamp(12px,3vw,26px); }
.sub-hero .figwrap{
  width:clamp(64px,15vw,104px); height:clamp(64px,15vw,104px); flex:none; border-radius:22px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  display:grid; place-items:center; backdrop-filter:blur(6px);
}
.sub-hero .fig{ font-size:clamp(2rem,7vw,3.4rem); line-height:1; }
.sub-hero .hx{ min-width:0; }
.sub-hero h2{ margin:0 0 .25em; font-size:clamp(1.15rem,4.2vw,1.85rem); letter-spacing:-.03em; color:var(--on-acc); }
.sub-hero .sub{ opacity:.85; font-size:.85em; }
.sub-hero .stats{ display:flex; flex-wrap:wrap; gap:.4rem .55rem; margin-top:.7rem; }
.sub-hero .stat{
  background:rgba(255,255,255,.16); border-radius:var(--r-pill);
  padding:.2em .75em; font-size:.76em; font-weight:700;
}
.hero-exam{
  margin-inline-start:auto; flex:none; display:inline-flex; align-items:center; gap:.65em;
  background:color-mix(in srgb, var(--gold) 28%, rgba(255,255,255,.14));
  border:1.5px solid color-mix(in srgb, var(--gold) 75%, white);
  color:var(--on-acc);
  padding:.75em 1.15em; border-radius:16px; font-weight:800; font-size:.92em; backdrop-filter:blur(6px);
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  box-shadow:
    0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent),
    0 8px 22px -10px rgba(0,0,0,.55);
  animation:heroExamGlow 2.6s ease-in-out infinite;
}
.hero-exam:hover{
  background:var(--surface); color:var(--acc-d); transform:translateY(-2px);
  text-decoration:none; animation:none;
  border-color:var(--gold);
  box-shadow:0 0 22px 2px color-mix(in srgb, var(--gold) 40%, transparent),
             0 14px 30px -12px rgba(0,0,0,.5);
}
.hero-exam__ico{
  display:grid; place-items:center; width:2rem; height:2rem; flex:none;
  border-radius:10px; background:rgba(255,255,255,.18);
}
.hero-exam__ico .ico{ display:block; }
.hero-exam > span:last-child{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.hero-exam small{ font-weight:600; opacity:.85; font-size:.78em; }
@keyframes heroExamGlow{
  0%, 100%{
    box-shadow:
      0 0 10px 0 color-mix(in srgb, var(--gold) 35%, transparent),
      0 8px 22px -10px rgba(0,0,0,.55);
  }
  50%{
    box-shadow:
      0 0 26px 4px color-mix(in srgb, var(--gold) 55%, transparent),
      0 10px 26px -8px rgba(0,0,0,.5);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-exam{ animation:none; }
}
@media (max-width:720px){
  .sub-hero .inner{ flex-wrap:wrap; }
  .hero-exam{ margin-inline-start:0; width:100%; justify-content:center; margin-top:.9rem; }
}

/* تبويب الشرح — بطاقات مرتّبة كـ AMSU */
.explain-pane{ gap:var(--s3); }
.explain-bar{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin:0 0 var(--s2);
}
.explain-card{
  margin:0; padding:0; border-radius:var(--r2);
  background:var(--surface); border:1px solid var(--line-soft);
  box-shadow:var(--sh1); overflow:hidden;
}
.explain-card > summary.explain-card__sum{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4); cursor:pointer; list-style:none;
  font-weight:600; gap:var(--s3);
}
.explain-card > summary.explain-card__sum::-webkit-details-marker{ display:none; }
.explain-card > summary.explain-card__sum::before{ content:none; display:none; }
.explain-card__n{
  flex:none; width:2rem; height:2rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bg-soft); border:1px solid var(--line);
  font-family:var(--font-num); font-weight:800; font-size:.9rem; color:var(--text-2);
}
.explain-card[open] .explain-card__n{
  background:var(--acc); color:var(--on-acc); border-color:transparent;
}
.explain-card__preview{
  flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  font-size:var(--fs-md); line-height:1.55; color:var(--text);
}
.explain-card__preview > .ltr, .explain-card__preview > span:last-child{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.explain-card__chev{
  flex:none; color:var(--text-3); font-size:1.15rem; transition:transform .2s var(--ease);
}
.explain-card[open] .explain-card__chev{ transform:rotate(-90deg); }
.explain-card__body{
  padding:0 var(--s4) var(--s4);
  border-top:1px solid var(--line-soft);
  padding-top:var(--s3);
}
.explain-card__q{ margin:0; font-weight:700; line-height:1.65; font-size:1.02rem; }
.explain-card__other{ margin:.35em 0 0; }
.explain-card__ans{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  margin-top:var(--s3); padding:var(--s3);
  border-radius:var(--r1);
  background:color-mix(in srgb, var(--ok) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}
.explain-card__ans-l{
  font-size:.85rem; font-weight:800; color:var(--ok);
  letter-spacing:.02em;
}
.explain-card__ans .ltr{ font-weight:800; color:var(--text); font-size:1.05rem; }
.explain-card__sec{ margin-top:var(--s3); }
.explain-card__sec-h{
  font-size:.88rem; font-weight:800; color:var(--text-3);
  margin:0 0 .45em; letter-spacing:.02em;
}
/* بلا سقفٍ هنا: البطاقة نفسها بعرض السطر (read-col)، فيملؤها النصّ حتى حافّتيها */
.explain-card__sec-p{ margin:0; line-height:1.85; color:var(--text); font-size:1.05rem; }
.explain-card__en{ margin-top:.55em; color:var(--text-2); font-size:1rem; line-height:1.75; }
.explain-card .plat-expl__p{ font-size:1.02rem; line-height:1.8; color:var(--text); }
.explain-card .exam-trap__p{ font-size:1rem; }


/* ═══ اختيار الرمز البديل — رقاقات صغيرة لا صور ═══ */
/*
  كانت أزرار الاختيار بمقاس أزرار الواجهة نفسها (٤٢ بكسل مربّعة)، فتبدو
  صفًّا من «الصور» يزاحم الصورة الحقيقية. صغّرناها ودوّرناها كي تُقرأ
  رموزًا تُنتقى، والدائرة تربطها بصريًّا بموضع عرضها في البطل.
*/
.avpick{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.avpick .iconbtn{
  width:38px; height:38px; border-radius:50%; box-shadow:none;
  background:var(--surface-2);
}
.avpick .iconbtn__ico{ font-size:1.15rem; }
.avpick .iconbtn[aria-checked="true"]{
  border-color:var(--acc); background:var(--acc-soft);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 35%, transparent);
}

/* ═══ بطاقة «راجع اليوم» ═══ */
/*
  في صدر الرئيسية، ولها لون التمييز لأنها الفعل المقصود لا خيارًا بين خيارات.
  وحين تنتهي مراجعة اليوم تنقلب هادئة: الإنجاز يُعلَن ولا يصرخ.
*/
.revcard{
  display:flex; align-items:center; gap:var(--s4); text-decoration:none;
  border:1px solid color-mix(in srgb, var(--acc) 45%, var(--line-2));
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--acc) 16%, var(--surface)),
    color-mix(in srgb, var(--acc) 5%, var(--surface)));
  transition:transform .16s var(--ease), box-shadow .16s;
}
a.revcard:hover{ transform:translateY(-2px); box-shadow:var(--sh2); }
.revcard__ico{
  flex:0 0 auto; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; font-size:1.5rem; line-height:1;
  background:var(--acc); color:var(--on-acc);
}
.revcard__x{ flex:1 1 auto; min-width:0; }
.revcard__t{ margin:0; font-weight:800; font-size:1.02rem; color:var(--text); }
.revcard__s{ margin:.2em 0 0; font-size:.85rem; color:var(--text-2); }
.revcard__go{ flex:0 0 auto; color:var(--acc); font-size:1.2rem; }
.revcard--done{
  border-color:var(--line-2); background:var(--surface);
}
.revcard--done .revcard__ico{ background:var(--acc-soft); color:var(--acc); }

/* ═══ «اشرح لي أكثر» ═══ */
.explain{ display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start; }
.explain__why{
  margin:0; padding:var(--s3) var(--s4); border-radius:var(--r2);
  background:var(--acc-soft); color:var(--text);
  border-inline-start:3px solid var(--acc);
  font-size:.92rem; line-height:1.9;
}

/* ═══ محرّر الأسئلة اليدوي ═══ */
.mq{ border-inline-start:3px solid var(--line-2); }
.mq__opts{ gap:var(--s2); }
.mq__row{ display:flex; align-items:center; gap:var(--s2); }
.mq__row .input{ flex:1 1 auto; min-width:0; }
/*
  حرفُ الخيار زرُّ التحديد نفسه: لا مربّع اختيارٍ منفصل بجانبه.
  دمجُهما يوفّر عمودًا كاملًا على شاشة ضيّقة، ويجعل «الحرف» شيئًا
  يُضغط لا زخرفةً تُقرأ.
*/
.mq__pick{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px; cursor:pointer;
  display:grid; place-items:center; font-weight:800; font-size:.95rem;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text-2);
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s;
}
.mq__pick:hover{ border-color:var(--gold); color:var(--text); }
.mq__pick.is-on{
  background:color-mix(in srgb, var(--gold) 20%, transparent);
  border-color:var(--gold); color:var(--gold);
}
.mq__x{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--text-3);
  font-size:1.1rem; line-height:1;
}
.mq__x:hover{ border-color:var(--bad); color:var(--bad); }

/* ═══ صندوق رمز التفعيل ═══
   ★ الحقل يكبر والزرّ لا: الرمز عشرة محارف يجب أن تُرى كاملة قبل الضغط،
   و«فعّل» كلمة بعرض ثابت. صفّ مرن يعطي كلًّا منهما ما يحتاجه بلا تفافّ
   على عرض ٣٦٠ بكسل. */
.redeem{ display:flex; gap:var(--s2); align-items:stretch; }
.redeem .input{ flex:1 1 auto; min-width:0; letter-spacing:.08em; text-transform:uppercase; }
.redeem .btn{ flex:0 0 auto; }

/* ═══ أرباح الرافع ═══
   ★ الرصيد بأكبر خط في البطاقة: هو الرقم الذي فُتحت الصفحة لأجله،
   وما عداه شرحٌ له. وتساوي الأحجام يجعل العين تبحث عمّا جاءت إليه. */
.earnbal{ display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:var(--s3) 0 var(--s2); }
.earnbal__n{ font-size:clamp(1.8rem,7vw,2.4rem); font-weight:800; line-height:1;
  color:var(--acc); }
.earnbal__l{ font-size:.76rem; color:var(--text-3); }
.earnfacts{ display:flex; gap:var(--s2); flex-wrap:wrap; justify-content:center; }

/* وعدُ العائد في شاشة الرفع — سطرٌ هادئ لا لافتة */
.earnvow{ display:flex; gap:var(--s3); align-items:flex-start; }
.earnvow__i{ color:var(--gold); font-size:1.1rem; line-height:1.4; }
.earnvow__t{ margin:0; font-weight:700; }

/* السعر في بطاقة القفل — يُقرأ ولو اختفى زرّ الشراء */
.paywall__price{ margin:2px 0 10px; font-size:1.05rem; font-weight:800; color:var(--acc); }
.paywall__note{ white-space:pre-line; text-align:start; }

/* ═══ توثيق الجوال ═══
   ★ الرمز بخطٍّ كبير متباعد: يُقرأ من شاشةٍ ويُكتب في أخرى، والتباعد
   يمنع دمج حرفين في القراءة. */
.phcode{ text-align:center; padding:var(--s3) 0; }
.phcode span{
  display:inline-block; font-size:clamp(1.6rem,7vw,2.1rem); font-weight:800;
  letter-spacing:.28em; padding-inline-start:.28em;
  color:var(--acc);
}
.phcode--sm{ letter-spacing:.12em; font-weight:800; }
.phverif{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.phverif__i{ color:var(--ok); font-weight:800; }
.phverif__n{ font-weight:700; direction:ltr; unicode-bidi:isolate; }

/* ═══ طلب الشراء: حال الانتظار ═══ */
.orderwait{ display:flex; gap:var(--s3); align-items:flex-start; text-align:start;
  border-color:color-mix(in srgb, var(--gold) 45%, var(--line)); }
.orderwait__i{ color:var(--gold); font-size:1.3rem; line-height:1.3; }
.orderwait__t{ margin:0; font-weight:800; }

/* ═══ دعوة الإشعارات ═══ زرّان في طرف الشريط — «فعّل» و«لاحقًا» بلا إلحاح */
.notify-band{ cursor:default; flex-wrap:nowrap; }
.notify-band__b{ display:flex; gap:var(--s1); flex-shrink:0; align-items:center; margin-inline-start:auto; }
@media (max-width:480px){
  .notify-band{ flex-wrap:wrap; }
  .notify-band__b{ width:100%; justify-content:flex-end; margin-inline-start:0; }
}

/* ═══════════════ «ورقة اليوم» — بطل الرئيسية ═══════════════ */
/*
  حبرٌ على ورق: البطل وحده داكن في الوضع الفاتح، فيقفز من الصفحة الورقية
  كما تقفز ورقة الإجابة السوداء الحواف من كومة الأوراق. وفي الليلي هو
  سطحٌ أفتح درجة بحدٍّ ذهبي — الدور نفسه: «هذا ما تفتح المنصة لأجله».
*/
/* الألوان (--today-*) في 00-tokens.css — لا لون صريح هنا */
.today{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--today-bg); color:var(--today-fg);
  border:1px solid var(--today-line); border-radius:var(--r3);
  padding:var(--s4) var(--s5); box-shadow:var(--sh2);
  display:flex; flex-direction:column; gap:var(--s2);
}
/* لا زخرفة في الزوايا: الفقاعات وحدها توقيعُ البطل (اختُبرت علاماتُ المحاذاة وأُزيلت — كانت تُقرأ خللًا) */
.today__meta{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.today__hi{ font-weight:800; font-size:.95rem; }
.today__date{ color:var(--today-fg2); font-size:.8rem; margin-inline-start:auto; }
.today__t{
  margin:0; font-size:clamp(1.2rem, 1rem + 1vw, 1.6rem); line-height:1.3;
  letter-spacing:-.02em; color:var(--today-fg);
}
.today__s{ margin:0; color:var(--today-fg2); font-size:.9rem; max-width:60ch; }
.today__foot{ display:flex; align-items:center; gap:var(--s3) var(--s5); flex-wrap:wrap; margin-top:var(--s2); }
.today__foot .today__act{ margin-inline-start:auto; margin-top:0; }
.today__facts{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); }
.today__fact{ display:inline-flex; align-items:center; gap:var(--s2); color:var(--today-fg2); font-size:.85rem; text-decoration:none; }
.today__fact.today__exam{ color:var(--today-fg); }
.today__fact.today__exam:hover{ color:var(--gold); text-decoration:none; }
.today__fi{ color:var(--gold); }
.today__act{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s2); }
.today .btn--ghost{ background:transparent; color:var(--today-fg); border-color:var(--today-line); box-shadow:none; }
.today .btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* الفقاعات: عشر دوائر بحدٍّ رفيع، والمعبَّأة ذهبية — كما تُظلَّل في القاعة */
.omr{ display:inline-flex; gap:5px; }
.omr__b{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  border:1.5px solid var(--today-fg2); opacity:.7;
  transition:background .3s var(--ease), border-color .3s;
  transition-delay:calc(var(--i, 0) * 45ms);
}
.omr__b.is-on{ background:var(--gold); border-color:var(--gold); opacity:1; }
@media (prefers-reduced-motion: reduce){ .omr__b{ transition:none; } }
@media (max-width:480px){
  .today{ padding:var(--s4) var(--s4); border-radius:var(--r2); }
  .today__date{ display:none; }
  .today__foot .today__act{ margin-inline-start:0; width:100%; }
  .today .btn{ flex:1 1 auto; }
}

/*
  الشرائط تحت البطل: صفٌّ مضغوط لا كومة.
  على الشاشة الواسعة تقف جنبًا إلى جنب بوصف أقصر؛ على الجوال تبقى كومة
  لكن بحواشٍ أصغر — هي تذكيراتٌ لا أبطال.
*/
/*
  ★ صفّ الدعوات: الأبناء الحقيقيون هم .campus-band لا أغلفة الوعود.
  display:contents على .nudges__slot يُخرج البطاقة إلى شبكة الأعمدة —
  وإلا ظهر عمود بعرض ٠ بجانب بطاقتين فبدا الشكل مشوّهًا.
*/
.nudges{
  display:grid; gap:var(--s3); grid-template-columns:1fr; align-items:stretch;
}
.nudges:empty{ display:none; }
.nudges > .nudges__slot{ display:contents; }
.nudges > .nudges__slot:empty{ display:none; }
@media (min-width:760px){
  .nudges{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}
.nudges .campus-band{
  margin:0; padding:var(--s3) var(--s4); box-shadow:none; height:100%;
  box-sizing:border-box; align-items:center;
}
.nudges .campus-band__d{ font-size:.78rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nudges .campus-band__ico{ width:36px; height:36px; flex-basis:36px; font-size:1.1rem; }
.nudges .campus-band{ border-inline-start-color:var(--gold); }

/* ألوان بطل الملف فوق الحبر — بعد قواعده الأصلية كي تغلبها بالترتيب لا بـ!important */
.pf-hero .pf-hero__n{ color:var(--today-fg); font-size:1.35rem; }
.pf-hero .pf-hero__mail, .pf-hero .pf-hero__bio{ color:var(--today-fg2); }
.pf-hero .pf-hero__img{ border-color:var(--gold); background:var(--today-line); }
.pf-hero .pf-hero__cam{ background:var(--gold); color:var(--btn-fg); border-color:var(--today-bg); }
.pf-hero .pf-hero__emoji{ background:transparent; color:var(--today-fg); border-color:var(--today-fg2); }

/* الرئيسية: حين يوجد البطل فهو رأس الصفحة — و«موادي» يبقى في الشجرة عنوانًا للقارئ الآلي وللشبكة تحته */
.page--hero > .page__head{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0; padding:0; }

/* ═══════════════ لوحة المتصدرين ═══════════════ */
.lb-scope{ display:flex; flex-direction:column; gap:var(--s3); }
.lb-scope .tabs{ margin-bottom:0; }
.lb-head{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.lb-head__x{ flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lb-head__t{ margin:0; font-size:1.25rem; }
/* الشارة الحيّة: نقطة تنبض — «الآن» يُرى قبل أن يُقرأ */
.lb-online{ display:inline-flex; align-items:center; gap:.4em; }
.lb-online--sm{ font-size:.72rem; padding:.2em .55em; }
.lb-online__dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation:lbPulse 1.8s ease-out infinite; }
@keyframes lbPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 100%{ box-shadow:0 0 0 8px transparent; } }

.lb-kpis{ display:grid; gap:var(--s2); grid-template-columns:repeat(3,1fr); }
@media (min-width:700px){ .lb-kpis{ grid-template-columns:repeat(6,1fr); } }
.lb-kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:var(--s3); text-align:center; }
.lb-kpi__n{ display:block; font-family:var(--font-num); font-size:1.3rem; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.lb-kpi__l{ font-size:.72rem; color:var(--text-3); font-weight:700; }

/* شريط الحركة: مسارٌ مضاعف يمرّ بلا قفزة */
.lb-feed{ overflow:hidden; border-block:1px solid var(--line); padding:var(--s2) 0; -webkit-mask-image:linear-gradient(90deg, transparent, var(--text) 8%, var(--text) 92%, transparent); mask-image:linear-gradient(90deg, transparent, var(--text) 8%, var(--text) 92%, transparent); }
.lb-feed__track{ display:inline-flex; gap:var(--s5); white-space:nowrap; animation:lbTicker 40s linear infinite; }
.lb-feed:hover .lb-feed__track{ animation-play-state:paused; }
.lb-feed__i{ font-size:.85rem; color:var(--text-2); }
.lb-feed__i b{ color:var(--acc); }
@keyframes lbTicker{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
@media (prefers-reduced-motion: reduce){ .lb-feed__track{ animation:none; flex-wrap:wrap; white-space:normal; } .lb-online__dot{ animation:none; } }

.lb-me{ display:flex; align-items:center; gap:var(--s4); background:var(--today-bg); color:var(--today-fg); border-color:var(--today-line); }
.lb-me .field__hint{ color:var(--today-fg2); }
.lb-me__rank{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; min-width:64px; }
.lb-me__n{ font-family:var(--font-num); font-size:1.9rem; font-weight:800; color:var(--gold); line-height:1; }
.lb-me__l{ font-size:.7rem; color:var(--today-fg2); }
.lb-me__x{ display:flex; flex-direction:column; gap:4px; min-width:0; }

.lb-podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); align-items:end; padding-top:var(--s3); }
.lb-podium__p{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r2) var(--r2) 0 0; padding:var(--s3) var(--s2) var(--s2); min-width:0; }
.lb-podium__p--1{ padding-top:var(--s5); border-color:var(--gold); background:linear-gradient(180deg, var(--gold-soft), var(--surface)); }
.lb-podium__av{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:1.4rem; background:var(--surface-2); overflow:hidden; }
.lb-podium__p--1 .lb-podium__av{ width:56px; height:56px; font-size:1.8rem; border:2px solid var(--gold); }
.lb-podium__av img{ width:100%; height:100%; object-fit:cover; }
.lb-podium__name{ font-weight:800; font-size:.9rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-podium__n{ font-size:.72rem; color:var(--text-3); }
.lb-podium__rank{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.8rem; background:var(--bg-soft); color:var(--text-2); }
.lb-podium__p--1 .lb-podium__rank{ background:var(--gold); color:var(--btn-fg); }

.lb-champs{ display:grid; gap:var(--s2); grid-template-columns:1fr; }
@media (min-width:640px){ .lb-champs{ grid-template-columns:repeat(2,1fr); } }
.lb-champ{ display:flex; align-items:center; gap:var(--s3); text-align:start; cursor:pointer; font:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-inline-start:4px solid var(--acc); border-radius:var(--r2); padding:var(--s3) var(--s4); min-width:0; }
.lb-champ:hover{ box-shadow:var(--sh2); }
.lb-champ__ico{ width:36px; height:36px; flex:0 0 36px; border-radius:10px; display:grid; place-items:center; background:var(--acc-soft); color:var(--acc); }
.lb-champ__x{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lb-champ__s{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-champ__w{ font-size:.8rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.lb-sort{ margin-bottom:var(--s3); }
.lb-rows{ display:flex; flex-direction:column; gap:6px; }
.lb-row{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); min-width:0; }
.lb-row.is-me{ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.lb-row__rank{ width:2em; text-align:center; font-weight:800; color:var(--text-3); flex:0 0 auto; }
.lb-row__av{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); overflow:hidden; }
.lb-row__av img{ width:100%; height:100%; object-fit:cover; }
.lb-row__x{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lb-row__name{ font-weight:800; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lb-row__sub{ font-size:.74rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row__stats{ display:grid; grid-template-columns:repeat(4, auto); gap:0 var(--s3); text-align:center; flex:0 0 auto; }
.lb-row__stats b{ font-size:.92rem; }
.lb-row__stats small{ font-size:.62rem; color:var(--text-3); grid-row:2; }
@media (max-width:560px){ .lb-row__stats{ grid-template-columns:repeat(2, auto); gap:0 var(--s2); } .lb-row__stats b:nth-child(5), .lb-row__stats small:nth-child(6), .lb-row__stats b:nth-child(7), .lb-row__stats small:nth-child(8){ display:none; } }
/* الاسم المحظور: مقنَّع من الخادم، ويُلوَّن ليُعرف أنه ليس اسمًا */
.blk{ color:var(--bad); font-style:italic; }

/* ═══ بوابة الاسم ═══ */
html.gated{ overflow:hidden; }
.namebox{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:var(--s4);
  background:color-mix(in srgb, var(--ink) 70%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.namebox__card{ width:min(420px, 100%); text-align:center; }
.namebox__ico{ font-size:2rem; }

/*
  ═══ نبضة الزملاء — بطاقةٌ عائمة تمرّ ═══
  ★ كانت تُسمّى ‎.pulse‎ كنبض المادة أعلاه، والاسمان مكوّنان مختلفان: هذه
  بطاقة عابرة مثبّتة في زاوية الشاشة، وتلك حبّةٌ ساكنة داخل بطاقة المادة.
  وحين يُعرَّف الاسم مرتين يفوز الأخير: فصارت «١ طالبًا راجعوها هذا الأسبوع»
  ‎position:fixed‎ تطفو فوق الصفحة خارج بطاقتها، ولبست رماديّ ‎.pulse__t‎ بدل
  أخضرها. وأسوأ منه صمتًا: حارسُ «لا بطاقتين معًا» في 32-board.js يسأل عن
  ‎.pulse‎، فكانت الحبّة الساكنة تُعدّ بطاقةً قائمة فتُكتم نبضة الزملاء كلّها
  في كل صفحة مادة. اسمان لمكوّنين — وهذه تُسمّى باسمها.
*/
.peer-pulse{ position:fixed; inset-inline-start:var(--s4); bottom:calc(var(--tabbar-h) + var(--s4)); z-index:70;
  display:flex; align-items:center; gap:var(--s3); max-width:min(88vw, 340px);
  background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--line-soft);
  border-inline-start:3px solid var(--acc);
  border-radius:var(--r1); padding:.55rem .85rem; box-shadow:var(--sh1);
  animation:pulseIn .3s var(--ease); }
.peer-pulse--soft{ opacity:.96; font-size:.82rem; }
.peer-pulse.is-out{ animation:pulseOut .3s var(--ease) forwards; }
.peer-pulse__t{ flex:1; min-width:0; font-size:.82rem; color:var(--text-2); line-height:1.35; }
.peer-pulse__t b{ color:var(--text); font-weight:700; }
.peer-pulse__x{ background:none; border:0; color:var(--text-3); font-size:1rem; cursor:pointer; line-height:1; padding:2px 4px; }
@keyframes pulseIn{ from{ transform:translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes pulseOut{ to{ transform:translateY(8px); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .peer-pulse, .peer-pulse.is-out{ animation:none; } }

/* ═══ نافذة المتصدرين في صفحة البداية ═══ */
.lb-mini{ display:flex; flex-direction:column; gap:var(--s4); }
.lb-mini__h{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.lb-mini__ico{ font-size:1.4rem; line-height:1; }
.lb-mini__x{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 200px; }
.lb-mini__t{ margin:0; font-size:1.1rem; }
.lb-mini__s{ font-size:.78rem; color:var(--text-3); }
.lb-mini__on:empty{ display:none; }
.lb-mini__b{ display:flex; flex-direction:column; gap:var(--s3); }
.lb-mini__empty{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; color:var(--text-2); font-size:.92rem; }
.lb-mini__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:lbm; }
.lb-mini__list[start="4"]{ counter-reset:lbm 3; }
.lb-mini__row{ display:flex; align-items:center; gap:var(--s2); padding:.45em .7em; border-radius:var(--r1); background:var(--surface-2); counter-increment:lbm; }
.lb-mini__row::before{ content:counter(lbm, arabic-indic); font-family:var(--font-num); font-weight:800; color:var(--text-3); min-width:1.4em; }
.lb-mini__av{ font-size:1.1rem; line-height:1; }
.lb-mini__n{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.lb-mini__n.blk{ color:var(--text-3); font-style:italic; }
.lb-mini__k{ font-size:.78rem; color:var(--text-3); white-space:nowrap; }
.lb-mini__me{ margin:0; font-size:.85rem; font-weight:700; color:var(--gold); }
.lp .lb-mini{ max-width:720px; margin-inline:auto; }

/* إثراء المنصة — طبقة ثانية تحت شرح الملف/الطالب */
.plat-expl{
  margin-top:var(--s3); padding:var(--s3);
  border-radius:var(--r1); background:var(--surface-2);
  border:1px solid var(--line-soft);
}
.plat-expl__h{ font-weight:800; font-size:.9rem; color:var(--brand); }
.plat-expl__l{ margin:.35em 0 0; font-size:.85rem; font-weight:700; color:var(--text-3); }
.plat-expl__p{ margin:.35em 0 0; line-height:1.8; font-size:1.02rem; color:var(--text); }

.exam-trap{
  margin-top:var(--s3); padding:var(--s3);
  border-inline-start:3px solid var(--warn);
  background:color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius:0 var(--r1) var(--r1) 0;
}
.exam-trap__h{ font-weight:800; font-size:.8rem; color:var(--warn); }
.exam-trap__p{ margin:.3em 0 0; line-height:1.7; font-size:.9rem; }

.badge--doc{ background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); }
.badge--ai{ background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand); }
/* ★ بلا لون صريح: --acc و--acc-d معرَّفان دائمًا في 00-tokens (‏:root)، فالبديل
   الاحتياطي بعدهما لا يُستعمل أبدًا — ويكسر قاعدة «كل لون من المتغيّرات» */
.badge--boost{
  background:color-mix(in srgb, var(--acc) 22%, transparent);
  color:var(--acc-d);
  font-weight:700;
}
.bank-sec--boost .bank-sec__title{ color:var(--acc-d); }
/* وسم «إثراء بإسم فلان» رابطٌ إلى صفحته — يُقرأ رابطًا لا نصًّا */
a.badge--named{ text-decoration:none; }
a.badge--named:hover,
a.badge--named:focus-visible{ text-decoration:underline; }

.enrich-lock{ text-align:center; gap:10px; }
.enrich-lock__ico{ font-size:1.6rem; opacity:.85; }

.qlang{ flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 var(--s3); }
.qlang__l{ font-size:.85rem; color:var(--text-3); font-weight:700; }

/*
  ★ استكشف + دعوة الرفع + دليل التنسيق — كانت في 60-admin.css فغابت عن
  حزمة الطالب بعد التقسيم الكسول، فتشوّهت البطاقات والشرائح (قسم الجامعة
  واستكشف). مكانها هنا لأنها واجهة طالب لا لوحة مشرف.
*/
/* ===== دعوة رفع مادة ===== */
.upsell{
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) var(--s5); border-radius:var(--r3);
  background:var(--gold-soft); border:1px solid var(--gold);
  color:var(--text); margin-bottom:var(--s5);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.upsell:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:var(--sh2); }
.upsell__ico{
  width:42px; height:42px; flex:0 0 auto; border-radius:var(--r2);
  display:grid; place-items:center; font-size:1.3rem;
  background:var(--surface); color:var(--brand); box-shadow:var(--sh1);
}
.upsell__x{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.upsell__t{ font-weight:800; font-family:var(--font-display); }
.upsell__d{ font-size:.84rem; color:var(--text-2); line-height:1.7; }
.upsell__go{ flex:0 0 auto; color:var(--brand); font-size:1.2rem; }
@media (max-width:420px){
  .upsell{ padding:var(--s4); gap:var(--s3); }
  .upsell__go{ display:none; }
}

/* ═══ شاشة الاستكشاف ═══ */
.ex-bar{ display:flex; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap; }
.ex-bar .input[type="search"]{ flex:1; min-width:200px; }
.ex-bar select{ width:auto; min-width:150px; }

.ex-filters{ display:grid; gap:var(--s3); margin-bottom:var(--s4); }
/*
  ★ min-width:0 — وهو الحرفان اللذان كانا يجرّان الصفحة كلها ٣٠٠ بكسل.
  الصفّ عنصرٌ في شبكة (.ex-filters)، وعناصر الشبكة min-width:auto افتراضًا:
  تتّسع لأوسع محتواها ولا تنكمش. فشريطُ الشرائح الذي أُعطي overflow-x:auto
  ليَنزلق داخل نفسه لم يجد حدًّا ينزلق داخله — انفجر الصفّ إلى ٦٤٤ بكسل في
  شاشةٍ عرضها ٣٦٠، فخرج معه المستند كله.
*/
.ex-frow{ display:flex; align-items:flex-start; gap:var(--s3); min-width:0; }
.ex-flabel{ flex:0 0 auto; font-size:.78rem; font-weight:700; color:var(--text-3); padding-top:7px; min-width:48px; }
.ex-chips{ flex:1; min-width:0; display:flex; gap:var(--s2); overflow-x:auto; padding-bottom:var(--s1); scrollbar-width:thin; }
@media (min-width:760px){
  .ex-chips{ flex-wrap:wrap; overflow-x:visible; padding-bottom:0; row-gap:var(--s2); }
}
@media (max-width:759px){
  .ex-chips{ padding-inline-end:var(--s2); scroll-padding-inline-start:var(--s3); }
}
.chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3); border-radius:var(--r-pill); min-height:34px;
  background:var(--surface); border:1px solid var(--line); color:var(--text-2);
  font-size:.82rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.chip:hover{ border-color:var(--brand); color:var(--brand); }
.chip.is-on{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.chip__n{ font-size:.72rem; opacity:.7; }

.ex-grid{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
@media (min-width:600px){ .ex-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .ex-grid{ grid-template-columns:repeat(3,1fr); } }

.excard{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s5) var(--s4) var(--s4); border-radius:var(--r3);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh1);
  color:var(--text); transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.excard:hover{ text-decoration:none; transform:translateY(-2px); box-shadow:var(--sh2); }
.excard__bar{ position:absolute; inset-inline:0; top:0; height:4px; }
.excard__head{ display:flex; align-items:center; gap:var(--s2); }
.excard__ico{ font-size:1.2rem; }
.excard__t{ font-family:var(--font-display); font-weight:800; line-height:1.4; }
.excard__where{ font-size:.78rem; color:var(--brand); font-weight:700; }
.excard__d{
  font-size:.84rem; color:var(--text-2); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.excard__meta{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:auto; padding-top:var(--s2); }

.ex-pager{ display:flex; align-items:center; justify-content:center; gap:var(--s4); margin-top:var(--s6); }
.ex-pageno{ font-size:.85rem; color:var(--text-3); }

/* ═══ دليل التنسيق (رفع مادة) ═══ */
.fmt{
  border:1px solid var(--line); border-radius:var(--r3);
  background:var(--surface); margin:var(--s4) 0; overflow:hidden;
}
.fmt__sum{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s4) var(--s5); cursor:pointer; min-height:52px;
  font-family:var(--font-display); font-weight:800; list-style:none;
}
.fmt__sum::-webkit-details-marker{ display:none; }
.fmt__sum::before{ content:'▸'; color:var(--brand); transition:transform var(--t-fast) var(--ease); }
.fmt[open] .fmt__sum::before{ transform:rotate(-90deg); }
.fmt__hint{ font-family:var(--font); font-weight:600; font-size:.78rem; color:var(--text-3); }
.fmt__body{ padding:0 var(--s5) var(--s5); display:grid; gap:var(--s4); }
.fmt__pipe{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.fmt__pipe li{ display:flex; gap:var(--s3); align-items:flex-start; }
.fmt__pn{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:.78rem; font-weight:700;
  background:var(--brand-soft); color:var(--brand);
}
.fmt__pd{ display:block; font-size:.84rem; color:var(--text-2); line-height:1.75; }
.fmt__card{
  border:1px solid var(--line); border-radius:var(--r2);
  padding:var(--s4); background:var(--bg);
}
.fmt__card--check{ background:var(--gold-soft); border-color:var(--gold); }
.fmt__t{ margin:0 0 var(--s1); font-family:var(--font-display); font-size:.95rem; }
.fmt__when{ margin:0 0 var(--s3); font-size:.82rem; color:var(--text-2); }
.fmt__rules{ margin:0 0 var(--s3); padding-inline-start:var(--s5); font-size:.84rem; color:var(--text-2); line-height:1.9; }
.fmt__code{
  margin:0 0 var(--s3); padding:var(--s3) var(--s4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r1);
  font-family:var(--font-num); font-size:.78rem; line-height:1.9;
  overflow-x:auto; white-space:pre; color:var(--text);
}
.fmt__out{ margin:var(--s3) 0 0; font-size:.85rem; font-weight:700; min-height:1.2em; }
.fmt__out.is-ok{ color:var(--ok); }
.fmt__out.is-no{ color:var(--bad); }

/* ═══ شاشة الدخول — بطاقةٌ ضيّقة في الوسط وعمودُ تعريفٍ بجانبها ═══
   (١٢ سبتمبر ٢٠٢٦) كانت بطاقة الدخول بعرض الصفحة كلّها: حقلٌ طوله ١٢٠٠
   بكسل وأزرار جوجل وآبل مدفونة في أسفلها. الآن: الأزرار الاجتماعية أوّلًا
   بأقراصها وأسمائها، ثم فاصل «أو بالبريد»، والبطاقة ٤٦٠ بكسل في عمودٍ
   والتعريف في عمود — ويعود عمودًا واحدًا على الجوال بلا العمود التعريفي. */
.auth{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:var(--s7); align-items:center;
  max-width:980px; margin-inline:auto; padding-block:var(--s4) var(--s6);
}
.auth--solo{ grid-template-columns:1fr; max-width:480px; }
.auth__main{ min-width:0; }

/* العمود التعريفي */
.auth__aside{ display:flex; flex-direction:column; gap:var(--s5); }
.auth__logo{ display:inline-flex; align-items:center; gap:var(--s3); }
.auth__mark{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(135deg, var(--mark-1), var(--mark-2)); color:var(--on-acc);
  box-shadow:0 6px 16px -6px var(--mark-1);
}
.auth__mark--lg{ width:52px; height:52px; border-radius:15px; }
.auth__brand{ display:flex; flex-direction:column; line-height:1.15; }
.auth__brand b{ font-family:var(--font-display); font-size:1.25rem; letter-spacing:-.01em; }
.auth__brand small{ font-size:.72rem; font-weight:700; color:var(--text-3); }
.auth__pitch{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.35rem, 1rem + 1.6vw, 1.9rem); line-height:1.4; letter-spacing:-.02em;
}
.auth__pitch em{ font-style:normal; color:var(--gold); }
.auth__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); }
.auth__list li{ display:flex; gap:var(--s3); align-items:center; color:var(--text-2); line-height:1.7; font-size:.95rem; }
.auth__list i{
  flex:0 0 auto; width:38px; height:38px; border-radius:var(--r2); display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold); font-style:normal;
}
.auth__chips{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.auth__chips span{
  font-size:.78rem; font-weight:700; padding:var(--s1) var(--s3); border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); color:var(--text-2);
}

/* البطاقة */
.auth__card{ display:flex; flex-direction:column; gap:var(--s4); padding:var(--s6) var(--s5) var(--s5); }
.auth__head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s2); }
.auth__head .auth__mark{ margin-bottom:var(--s1); }
.auth__title{ margin:0; font-size:1.45rem; letter-spacing:-.02em; }
.auth__sub{ margin:0; color:var(--text-2); font-size:.92rem; line-height:1.8; max-width:36ch; }
.auth__social{ padding-top:var(--s2); }
.auth__social .oauth__h{ font-size:.86rem; font-weight:700; color:var(--text-2); }
/* فاصل «أو» بخطّين على جانبيه */
.auth__or{ display:flex; align-items:center; gap:var(--s3); color:var(--text-3); font-size:.8rem; font-weight:700; }
.auth__or::before, .auth__or::after{ content:''; flex:1; height:1px; background:var(--line); }
.auth__fine{ margin:0; text-align:center; font-size:.78rem; color:var(--text-3); line-height:1.8; }
.auth__guest{ margin:var(--s4) 0 0; text-align:center; color:var(--text-2); font-size:.9rem; line-height:1.8; }

/* ★ القاعدة الضيقة بعد الأساسية وبالوزن نفسه (درس §٢٢٣) */
@media (max-width:900px){
  .auth{ grid-template-columns:1fr; max-width:480px; gap:var(--s5); }
  .auth__aside{ display:none; }
}


/* ===== 50-landing.css ===== */
/*
  صفحة الهبوط التعريفية — أول ما يراه الزائر قبل التسجيل.
  هوية «مراجعة — بنك الأسئلة»: ورق دافئ، عنّابي وذهبي، وحواف كتاب.
  البنية (١٢ سبتمبر ٢٠٢٦ — صفحة تحويل): بطل بعمودين ولقطة منتج ← جرّب سؤالًا ← الأدوات
  ← كيف تعمل ← رحلة الشابتر ← المتصدرون ← الكوينز ← أنت تبنيها ← ارفع مادتك ← النماذج
  ← بطاقة حفظ ← المجتمع ← نصائح ← أسعار (بمفتاح) ← أسئلة ← دعوة.
  ولا مادة بعينها هنا: المقررات تختلف بين الجامعات، ومكانها شاشة «استكشف».
*/

.lp{ margin-inline:calc(var(--s4) * -1); }

/* ===== البطل: صفحة كتاب مفتوح =====
   التوقيع البصري للمنصة. الرفّ صورة لفكرة «بنك الأسئلة» لا عرضٌ لمخزون —
   أوزان كعوبه ثابتة كي تبقى الصورة واحدة لكل زائر ولا تُقرأ كإحصاء. */
.lp-hero{
  position:relative; overflow:hidden;
  padding:var(--s8) var(--s4) var(--s7);
  text-align:center;
  background:
    radial-gradient(900px 300px at 50% 0%, var(--brand-soft), transparent 68%),
    var(--bg);
}
/* سطور دفتر — أفقية فقط لا شبكة، لأن الورق هنا للكتابة لا للرسم البياني */
.lp-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:100% 30px;
  mask-image:radial-gradient(680px 320px at 50% 0%, black 18%, transparent 76%);
  -webkit-mask-image:radial-gradient(680px 320px at 50% 0%, black 18%, transparent 76%);
}
.lp-hero > *{ position:relative; }

.lp-hero__badge{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4); border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:.8rem; font-weight:700; color:var(--brand);
  box-shadow:var(--sh1); margin-bottom:var(--s5);
}
/* النقطة الذهبية: ختم صغير على الغلاف — تتنفّس بهدوء لا تنبض كقلب */
.lp-hero__badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  animation:lp-glow 3.2s var(--ease) infinite;
}
@keyframes lp-glow{
  0%,100%{ opacity:1; }
  50%{ opacity:.45; }
}

.lp-hero__title{
  font-family:var(--font-display);
  font-size:clamp(2rem, 6.4vw, 3.3rem); line-height:1.3; font-weight:800;
  margin:0 0 var(--s4); letter-spacing:-.03em;
}
.lp-hero__title em{ font-style:normal; color:var(--brand); }
.lp-hero__sub{
  max-width:54ch; margin:0 auto var(--s4);
  font-size:clamp(1rem, 2.4vw, 1.12rem); color:var(--text-2); line-height:1.95;
}
/*
  سطر التوقّع: «كل جامعة موادها تخصّها».
  أخفتُ نبرةً من الملخّص وبخطّ هامش عنّابي — كملاحظة على حاشية الورقة لا
  كادّعاء إضافي. موضعه قبل الأزرار مقصود: يقرؤه الزائر قبل أن يقرّر أيّهما
  يضغط، فيذهب إلى «استكشف» وهو يعرف أنه يبحث عن جامعته هو.
*/
.lp-hero__note{
  max-width:52ch; margin:0 auto var(--s6);
  padding-inline-start:var(--s3);
  border-inline-start:2px solid var(--rule);
  font-size:.94rem; color:var(--text-3); line-height:1.85; text-align:start;
}

/* الرفّ: الكتب تصعد واحدًا بعد آخر عند الفتح ثم تسكن */
.lp-shelf{ width:100%; max-width:640px; margin:var(--s6) auto 0; display:block; height:116px; }
.lp-shelf__plank{ fill:var(--text-3); opacity:.5; }
.lp-shelf__book{ transform-origin:center bottom; }
@media (prefers-reduced-motion: no-preference){
  .lp-shelf__book{ animation:lp-rise .5s var(--ease) backwards; animation-delay:var(--d, 0ms); }
}
@keyframes lp-rise{
  from{ transform:scaleY(.05); opacity:0; }
  to{ transform:scaleY(1); opacity:1; }
}
/*
  كان سطر فتح هذه الكتلة مفقودًا، فطُبِّق animation:none على كل زائر
  وتوقّفت النقطة الذهبية عن التنفّس عند الجميع لا عند من طلب تقليل الحركة.
*/
@media (prefers-reduced-motion: reduce){
  .lp-shelf__book{ animation:none; }
  .lp-hero__badge .dot{ animation:none; }
}

.lp-cta{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; }
.lp-cta .btn{ padding:var(--s4) var(--s7); font-size:1.02rem; }
.btn--lg{ min-height:54px; }

/* ===== أقسام عامة ===== */
.lp-sec{ max-width:var(--wrap); margin-inline:auto; padding:var(--s8) var(--s4); }
/* فاصل رفيع بين الأقسام يوحّد الإيقاع بلا خطوط ثقيلة */
.lp-sec + .lp-sec{ border-top:1px solid var(--line-soft); }
.lp-sec__head{ text-align:center; margin-bottom:var(--s7); }
.lp-sec__kicker{
  display:inline-block; font-size:.76rem; font-weight:800; letter-spacing:.06em;
  color:var(--brand); background:var(--brand-soft);
  padding:var(--s1) var(--s4); border-radius:var(--r-pill); margin-bottom:var(--s4);
}
.lp-sec__title{
  font-family:var(--font-display);
  font-size:clamp(1.45rem, 4vw, 2.05rem); margin:0 0 var(--s3);
  font-weight:800; letter-spacing:-.025em;
}
.lp-sec__sub{ color:var(--text-2); max-width:52ch; margin-inline:auto; }

/* ===== شبكة البطاقات (المزايا) ===== */
.lp-grid{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
@media (min-width:640px){ .lp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .lp-grid--3{ grid-template-columns:repeat(3,1fr); } }

.lp-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s5); box-shadow:var(--sh1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  display:flex; flex-direction:column; gap:var(--s3);
}
.lp-card:hover{ transform:translateY(-2px); box-shadow:var(--sh2); border-color:var(--line); }
.lp-card__top{ height:4px; position:absolute; inset-inline:0; top:0; }
.lp-card__ico{
  width:54px; height:54px; border-radius:var(--r2); display:grid; place-items:center;
  font-size:1.5rem; background:var(--brand-soft);
}
.lp-card__title{ font-family:var(--font-display); font-size:1.05rem; font-weight:800; margin:0; letter-spacing:-.015em; }
.lp-card__text{ color:var(--text-2); font-size:.92rem; margin:0; line-height:1.85; }
.lp-card__meta{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:auto; padding-top:var(--s2); }

/* ===== نموذجا المادة =====
   ختم «نموذج» ظاهر في أعلى البطاقة لا في هامشها: الزائر يقرأ البطاقات
   قبل السطر الذي تحتها، فلو خفي الختم لحسبهما مادّتين معروضتين للبيع. */
.lp-card--sample{ padding-top:var(--s6); }
.lp-card__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.lp-card__stamp{
  background:var(--gold-soft); color:var(--warn);
  border:1px dashed var(--gold); font-weight:800; letter-spacing:.04em;
}
.lp-card__tag{
  align-self:flex-start; font-size:.76rem; font-weight:800; color:var(--brand);
  background:var(--brand-soft); padding:2px var(--s3); border-radius:var(--r-pill);
}
/* المحاور: ما يجده الطالب داخل المادة — بديل عن عدد أسئلة لا وجود له */
.lp-topics{
  display:flex; flex-wrap:wrap; gap:var(--s2);
  margin-top:auto; padding-top:var(--s3); border-top:1px dashed var(--line);
}
.lp-topic{
  font-size:.8rem; color:var(--text-2); background:var(--surface-2);
  border:1px solid var(--line-soft); padding:2px var(--s3); border-radius:var(--r1);
}
/* سطر التنبيه أسفل النموذجين */
.lp-note{
  max-width:56ch; margin:var(--s5) auto 0; text-align:center;
  font-size:.88rem; color:var(--text-3); line-height:1.85;
}
.lp-note a{ color:var(--brand); font-weight:700; }

/* ===== الخطوات ===== */
.lp-steps{ display:grid; gap:var(--s5); grid-template-columns:1fr; counter-reset:step; }
@media (min-width:820px){ .lp-steps{ grid-template-columns:repeat(4,1fr); } }
.lp-step{ text-align:center; }
.lp-step__n{
  width:48px; height:48px; margin:0 auto var(--s3); border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:1.05rem;
  font-family:var(--font-num);
  background:var(--brand); color:var(--on-brand);
  /* الظل من لون الهوية نفسه — كان أخضر طبيًّا ثابتًا وبقي بعد تحوّلها للعنّابي */
  box-shadow:0 4px 14px color-mix(in srgb, var(--brand) 34%, transparent);
}
.lp-step__t{ font-weight:800; margin-bottom:var(--s1); }
.lp-step__d{ color:var(--text-2); font-size:.9rem; margin:0; }

/* ===== الأسعار ===== */
.lp-price{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r4);
  padding:var(--s6); box-shadow:var(--sh1); display:flex; flex-direction:column; gap:var(--s3);
}
.lp-price--hot{ border-color:var(--brand); box-shadow:var(--sh2); position:relative; }
.lp-price--hot::before{
  content:'الأكثر اختيارًا'; position:absolute; top:calc(var(--s4) * -1); inset-inline-start:50%;
  transform:translateX(50%); background:var(--brand); color:var(--on-brand);
  font-size:.75rem; font-weight:800; padding:var(--s1) var(--s4); border-radius:var(--r-pill);
}
.lp-price__n{ font-family:var(--font-display); font-size:1.08rem; font-weight:800; }
.lp-price__v{ font-family:var(--font-num); font-size:1.9rem; font-weight:700; color:var(--brand); letter-spacing:-.02em; }
.lp-price__v small{ font-size:.85rem; color:var(--text-3); font-weight:600; }
.lp-price ul{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s2); }
.lp-price li{ display:flex; gap:var(--s2); align-items:flex-start; font-size:.92rem; color:var(--text-2); }
.lp-price li::before{ content:'✓'; color:var(--ok); font-weight:800; }

/* ===== الدعوة الأخيرة ===== */
.lp-final{
  max-width:var(--wrap); margin:var(--s7) auto var(--s8); padding:var(--s8) var(--s5);
  text-align:center; border-radius:var(--r4);
  background:linear-gradient(145deg, var(--brand), var(--brand-2));
  color:var(--on-brand); box-shadow:var(--sh3);
  position:relative; overflow:hidden;
}
/* شبكة تخطيط باهتة تربط الختام بالبطل */
.lp-final::before{
  content:''; position:absolute; inset:0; opacity:.13; pointer-events:none;
  background-image:
    linear-gradient(to left, white 1px, transparent 1px),
    linear-gradient(to bottom, white 1px, transparent 1px);
  background-size:26px 26px;
}
.lp-final > *{ position:relative; }
.lp-final h2{ font-family:var(--font-display); color:inherit; font-size:clamp(1.35rem, 4vw, 1.95rem); margin-bottom:var(--s3); letter-spacing:-.025em; }
.lp-final p{ opacity:.92; max-width:48ch; margin:0 auto var(--s5); }
.lp-final .btn{ background:var(--surface); color:var(--brand); }

/* ═══════════════════════════════════════════════════════════════
   صفحة الهبوط التحويلية (١٢ سبتمبر ٢٠٢٦) — البطل بعمودين، لقطة منتج،
   شريط الميزات، رحلة الشابتر، الكوينز، والمجتمع. كل قيمةٍ من الرموز.
   ═══════════════════════════════════════════════════════════════ */

/* البطل: نصٌّ في عمود وجوالٌ في عمود — ويعود عمودًا واحدًا على الجوال */
.lp-hero__g{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s7); align-items:center; max-width:var(--wrap); margin-inline:auto; text-align:start;
}
/* العنوان في عمودٍ أضيق من الصفحة: يصغر قليلًا كي لا ينكسر على أربعة أسطر */
.lp-hero__x .lp-hero__title{ font-size:clamp(1.9rem, 4.8vw, 2.9rem); }
.lp-hero__x .lp-hero__sub{ margin-inline:0; max-width:40ch; }
.lp-hero__x .lp-cta{ justify-content:flex-start; }
.lp-hero__x .lp-shelf{ margin-inline:0; margin-top:var(--s7); max-width:520px; }
/* ★ القاعدة الضيقة بعد الأساسية وبالوزن نفسه — تغلب الأخيرةُ الأولى (درس §٢٢٣) */
@media (max-width:860px){
  .lp-hero__g{ grid-template-columns:1fr; text-align:center; }
  .lp-hero__x .lp-cta, .lp-hero__x .lp-rail{ justify-content:center; }
  .lp-hero__x .lp-hero__sub, .lp-hero__x .lp-shelf{ margin-inline:auto; }
}

/* ★ توهّجان خافتان بلون مادتين خلف البطل: الصفحة تقول «مواد ملوّنة» قبل أن تشرح */
.lp-hero{
  background:
    radial-gradient(60% 50% at 72% 28%, color-mix(in srgb, var(--subject-1) 20%, transparent), transparent 70%),
    radial-gradient(42% 42% at 18% 64%, color-mix(in srgb, var(--subject-2) 16%, transparent), transparent 70%),
    var(--bg);
  text-align:start;
}

/* سطر الثقة تحت الزرّين: ما يُزيل التردّد قبل الضغط */
.lp-hero__trust{ margin:var(--s4) 0 0; font-size:.86rem; color:var(--text-3); line-height:1.9; }
.lp-hero__trust b{ color:var(--text-2); font-weight:600; }
/* سطر التوقّع داخل العمود: يلتصق ببداية السطر لا بالمنتصف، ويعود للمنتصف على الجوال */
.lp-hero__x .lp-hero__note{ margin:var(--s3) 0 0; max-width:46ch; }
@media (max-width:860px){ .lp-hero__x .lp-hero__note{ margin-inline:auto; } }

/* شريط الميزات: عشر حبّات تُمسح بالعين — الرقم ذهبي والاسم رمادي */
.lp-rail{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s5); }
.lp-rail span{
  display:inline-flex; align-items:center; gap:var(--s1);
  font-size:.8rem; padding:var(--s1) var(--s3); border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); color:var(--text-2);
}
.lp-rail span b{ color:var(--gold); font-weight:700; }

/* ═══ لقطة المنتج — جوالٌ بـCSS خالص ═══ */
.lp-ph{
  width:min(100%, 320px); margin-inline:auto;
  background:var(--ink, var(--bg)); border-radius:40px; padding:10px;
  box-shadow:var(--sh3), 0 0 0 1px var(--line-2);
}
.lp-ph__scr{
  background:var(--bg); border-radius:32px; overflow:hidden; height:560px;
  display:flex; flex-direction:column; position:relative; text-align:start;
}
.lp-ph__top{ display:flex; justify-content:space-between; align-items:center; padding:var(--s6) var(--s3) var(--s2); font-size:.8rem; }
.lp-ph__coin{
  padding:2px var(--s2h, 10px); border-radius:var(--r-pill); font-weight:600; font-size:.76rem;
  background:var(--gold-soft); border:1px solid color-mix(in srgb, var(--gold) 30%, transparent); color:var(--gold);
}
.lp-ph__hero{
  position:relative; padding:var(--s4) var(--s3); color:var(--on-acc, white);
  border-radius:0 0 var(--r4) var(--r4);
  background:linear-gradient(135deg, color-mix(in srgb, var(--acc) 62%, black), color-mix(in srgb, var(--acc) 34%, black));
}
.lp-ph__hero h3{ margin:var(--s2) 0 0; font-size:1.05rem; font-family:var(--font-display); }
/* ختم «نموذج» باسمه الخاص: لا يُحسب مع ختمَي بطاقتَي النموذج في فحوص الهبوط */
.lp-ph__stamp{ position:absolute; top:var(--s2); inset-inline-end:var(--s3); font-size:.66rem; }
.lp-ph__chips{ display:flex; gap:4px; margin-top:var(--s2); flex-wrap:wrap; }
.lp-ph__chips span{
  font-size:.66rem; padding:2px 8px; border-radius:var(--r-pill);
  background:color-mix(in srgb, white 14%, transparent); border:1px solid color-mix(in srgb, white 26%, transparent);
}
.lp-ph__cta{
  display:inline-flex; align-items:center; margin-top:var(--s3); min-height:36px; padding:0 var(--s3);
  border-radius:var(--r2); background:var(--gold); color:var(--on-gold, black); font-weight:700; font-size:.78rem;
}
.lp-ph__body{ padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2h, 10px); }
.lp-ph__card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s2h, 10px); box-shadow:var(--sh1); font-size:.78rem;
}
.lp-ph__card h4{ margin:0 0 4px; font-size:.86rem; }
.lp-ph__card p{ margin:0; color:var(--text-2); }
.lp-ph__row{
  display:flex; align-items:center; gap:var(--s2); padding:6px 8px; margin-top:6px;
  border-radius:var(--r2); background:var(--surface-2);
}
.lp-ph__row i{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--surface-3, var(--line)); font-style:normal; font-size:.66rem;
}
.lp-ph__row span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-ph__row b{
  font-size:.66rem; padding:2px 8px; border-radius:var(--r-pill); font-weight:700;
  border:1px solid var(--line-2); color:var(--text-2);
}
.lp-ph__row b.is-open{ background:var(--brand-soft); color:var(--gold); border-color:transparent; }
.lp-ph__tabs{ display:flex; gap:2px; padding:2px; background:var(--surface-2); border-radius:var(--r-pill); border:1px solid var(--line); }
.lp-ph__tabs span{ flex:1; text-align:center; font-size:.66rem; padding:6px 0; border-radius:var(--r-pill); color:var(--text-2); }
.lp-ph__tabs span.on{ background:var(--gold); color:var(--on-gold, black); font-weight:700; }
.lp-ph__bar{
  margin-top:auto; display:flex; justify-content:space-around; padding:var(--s2) var(--s2) var(--s4);
  border-top:1px solid var(--line); font-size:.6rem; color:var(--text-3);
}
.lp-ph__bar span{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.lp-ph__bar i{ width:18px; height:18px; border-radius:6px; background:currentColor; opacity:.35; }
.lp-ph__bar span.on{ color:var(--gold); }
.lp-ph__bar span.on i{ opacity:1; }

/* ═══ شبكة الأدوات غير المتساوية: الأهمّ أكبر ═══ */
@media (min-width:960px){
  .lp-grid--bento{ grid-template-columns:repeat(6, 1fr); }
  .lp-grid--bento > :nth-child(1){ grid-column:span 4; }
  .lp-grid--bento > :nth-child(2){ grid-column:span 2; }
  .lp-grid--bento > :nth-child(3){ grid-column:span 2; }
  .lp-grid--bento > :nth-child(4){ grid-column:span 4; }
  .lp-grid--bento > :nth-child(5),
  .lp-grid--bento > :nth-child(6){ grid-column:span 3; }
}
.lp-grid--bento .lp-card__top{ display:block; }
/* خطٌّ علويّ بلون مادةٍ مختلفة لكل بطاقة — تذكيرٌ بمحور المادة اللوني */
.lp-grid--bento > :nth-child(1)::before,
.lp-grid--bento > :nth-child(2)::before,
.lp-grid--bento > :nth-child(3)::before,
.lp-grid--bento > :nth-child(4)::before,
.lp-grid--bento > :nth-child(5)::before,
.lp-grid--bento > :nth-child(6)::before{
  content:''; position:absolute; inset-inline:0; top:0; height:3px;
}
.lp-grid--bento > :nth-child(1)::before{ background:var(--subject-2); }
.lp-grid--bento > :nth-child(2)::before{ background:var(--subject-3); }
.lp-grid--bento > :nth-child(3)::before{ background:var(--subject-6); }
.lp-grid--bento > :nth-child(4)::before{ background:var(--subject-1); }
.lp-grid--bento > :nth-child(5)::before{ background:var(--subject-4); }
.lp-grid--bento > :nth-child(6)::before{ background:var(--subject-5); }

/* ═══ رحلة الشابتر: خمس محطات، لكل حالةٍ شكل ═══ */
.lp-journey{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.lp-j{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); min-height:200px;
}
.lp-j__ic{ width:40px; height:40px; border-radius:var(--r2); display:grid; place-items:center; font-size:1.25rem; background:var(--brand-soft); }
.lp-j__t{ margin:0; font-size:.98rem; font-weight:800; }
.lp-j__d{ margin:0; font-size:.86rem; color:var(--text-2); line-height:1.8; }
.lp-j__st{
  margin-top:auto; align-self:flex-start; font-size:.74rem; padding:3px var(--s2h, 10px);
  border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line); color:var(--text-2);
}
.lp-j__st--gold{ color:var(--gold); background:var(--gold-soft); border-color:color-mix(in srgb, var(--gold) 40%, transparent); }
.lp-j__st--ok{ color:var(--ok); background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 40%, transparent); }

/* ═══ الكوينز: طرق الكسب في عمود، والمحفظة في عمود ═══ */
.lp-coins{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s6); align-items:start; }
@media (max-width:860px){ .lp-coins{ grid-template-columns:1fr; } }
.lp-earn{ display:flex; flex-direction:column; gap:var(--s2); }
.lp-earn__row{
  display:flex; align-items:center; gap:var(--s3); padding:var(--s2h, 10px) var(--s3);
  border-radius:var(--r2); background:var(--surface); border:1px solid var(--line);
}
.lp-earn__row em{ font-style:normal; width:36px; height:36px; border-radius:var(--r2); background:var(--surface-2); display:grid; place-items:center; flex:0 0 auto; }
.lp-earn__row span{ flex:1; font-size:.92rem; }
.lp-earn__row b{ color:var(--gold); font-weight:700; white-space:nowrap; font-size:.9rem; }
.lp-wallet{
  border-radius:var(--r4); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
  background:linear-gradient(160deg, var(--gold-soft), var(--surface));
  border:1px solid color-mix(in srgb, var(--gold) 35%, transparent); box-shadow:var(--sh2);
}
.lp-wallet .lp-sec__kicker{ align-self:flex-start; margin:0; }
.lp-wallet__big{ font-size:2.6rem; font-weight:700; line-height:1; color:var(--gold); font-family:var(--font-num); }
.lp-wallet__hint{ font-size:.82rem; color:var(--text-3); }
.lp-wallet ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:.9rem; color:var(--text-2); }
.lp-wallet li{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding-bottom:6px; }
.lp-wallet li b{ color:var(--text); }

/* ═══ المجتمع والمنصّات ═══ */
.lp-minis{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.lp-mini{ padding:var(--s4); border-radius:var(--r3); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:var(--s1); }
.lp-mini em{ font-style:normal; font-size:1.4rem; }
.lp-mini__t{ margin:0; font-size:.98rem; font-weight:800; }
.lp-mini__d{ margin:0; font-size:.88rem; color:var(--text-2); line-height:1.8; }
.lp-plat{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5); }
.lp-plat > div{ flex:1 1 160px; padding:var(--s4); border-radius:var(--r3); background:var(--surface-2); border:1px solid var(--line); text-align:center; }
.lp-plat b{ display:block; font-size:1.02rem; }
.lp-plat span{ font-size:.8rem; color:var(--text-3); }

/* الطباعة لا تعني صفحة الهبوط */
@media print{ .lp{ display:none; } }


/* ===== السؤال التجريبي ===== */
.lp-try{
  max-width:760px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r4);
  padding:var(--s6); box-shadow:var(--sh2);
}
.lp-try__q{ font-weight:600; margin:0 0 var(--s5); font-size:1.06rem; line-height:1.75; }
.lp-try__opts{ display:grid; gap:var(--s2); margin-bottom:var(--s4); }
.lp-try__fb{
  border-radius:var(--r2); padding:var(--s4); font-size:.93rem; line-height:1.9;
  border:1px solid var(--line); background:var(--surface-2);
}
.lp-try__fb.is-ok{ background:var(--ok-soft); border-color:var(--ok); }
.lp-try__fb.is-no{ background:var(--bad-soft); border-color:var(--bad); }
.lp-try__fb b{ display:block; margin-bottom:var(--s1); }

/* ===== بطاقة الحفظ الحيّة ===== */
.lp-memo{
  max-width:520px; margin-inline:auto; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s6); box-shadow:var(--sh1); text-align:center; min-height:180px;
  display:flex; flex-direction:column; justify-content:center; gap:var(--s3);
  transition:box-shadow var(--t) var(--ease);
}
.lp-memo:hover{ box-shadow:var(--sh2); }
.lp-memo__hint{ font-size:.8rem; color:var(--text-3); }
.lp-memo__chain{ display:flex; align-items:center; justify-content:center; gap:var(--s3); flex-wrap:wrap; }
.lp-memo__k{ font-weight:700; color:var(--brand); font-size:1.08rem; }

/* ===== نصائح المراجعة ===== */
.lp-tip{ display:flex; gap:var(--s4); align-items:flex-start; }
.lp-tip__i{
  min-width:44px; height:44px; border-radius:var(--r2); display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); font-size:1.2rem;
}
.lp-tip__t{ font-weight:800; margin:0 0 var(--s1); }
.lp-tip__d{ color:var(--text-2); font-size:.9rem; margin:0; line-height:1.85; }

/* ===== الأسئلة الشائعة ===== */
.lp-faq{ max-width:760px; margin-inline:auto; display:grid; gap:var(--s2); }
.lp-faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r2);
  padding:var(--s4) var(--s5);
}
.lp-faq summary{
  cursor:pointer; font-weight:700; list-style:none; font-family:var(--font-display);
  letter-spacing:-.01em;
  display:flex; align-items:center; gap:var(--s3);
}
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::before{
  content:'+'; color:var(--brand); font-weight:800; font-size:1.2rem; line-height:1;
  transition:transform var(--t) var(--ease);
}
.lp-faq details[open] summary::before{ content:'−'; }
.lp-faq p{ color:var(--text-2); font-size:.92rem; margin:var(--s3) 0 0; padding-inline-start:calc(var(--s3) + 1ch); }

/* بطاقتا «أنت تبنيها»: حدّ متقطّع — مكان شاغر ينتظر من يملؤه لا محتوى جاهز */
.lp-add{ border-style:dashed; border-color:var(--brand); background:var(--brand-soft); }
.lp-add .lp-card__ico{ background:var(--surface); color:var(--brand); font-size:1.35rem; }
.lp-card__text--dim{ color:var(--text-3); font-size:.86rem; }


/* ===== 70-polish.css ===== */
/*
  طبقة الإبهار — فوق هوية AMSU لا بدلًا منها.

  الفكرة الحاكمة: طالبٌ يذاكر ليلًا في غرفة مظلمة، والشاشة مصباحه.
  فالضوء هنا مادة التصميم: كل مادة تشعّ بلونها شعاعًا هادئًا (الشفق)،
  والحركة كلها «دخولٌ وسكون» — ترحيبٌ ثم هدوء يليق بالمذاكرة، لا حركة دائمة
  تشتّت. كل شيء يحترم prefers-reduced-motion عبر المطفأة العامة في 10-base.
*/

/* ═══ نعومة عامة ═══ */
html{ scroll-behavior:smooth; }
body{ -webkit-tap-highlight-color:transparent; }

/* شريط تمرير رفيع بلون المحور — التفصيلة التي تُرى في كل صفحة */
*{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--text-3); }
*::-webkit-scrollbar-track{ background:transparent; }

/* ═══ دخول الصفحة: نهضة واحدة هادئة ═══ */
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.page{ animation:pageIn .38s var(--ease) both; }

/* ═══ الشفق: توهّج ألوان المواد خلف الشبكة ═══
   ثلاث بقع ضوء مموّهة بألوان الرفّ — تُرى ولا تُقرأ، كضوء مصباح خلف رفوف */
.grid{ position:relative; isolation:isolate; }
.grid::before{
  content:''; position:absolute; inset:-8% -6%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--subject-2) 16%, transparent), transparent 70%) 12% 8%/44% 60% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--subject-1) 14%, transparent), transparent 70%) 88% 20%/44% 60% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--subject-5) 12%, transparent), transparent 70%) 50% 95%/54% 55% no-repeat;
  filter:blur(10px);
}

/* دخول البطاقات: تصعد واحدة إثر أخرى ثم تسكن — إيقاع رفّ المكتبة */
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
.grid > .sub-card{ animation:cardIn .5s var(--ease) backwards; }
.grid > .sub-card:nth-child(1){ animation-delay:.03s; }
.grid > .sub-card:nth-child(2){ animation-delay:.09s; }
.grid > .sub-card:nth-child(3){ animation-delay:.15s; }
.grid > .sub-card:nth-child(4){ animation-delay:.21s; }
.grid > .sub-card:nth-child(5){ animation-delay:.27s; }
.grid > .sub-card:nth-child(6){ animation-delay:.33s; }
.grid > .sub-card:nth-child(n+7){ animation-delay:.39s; }

/* لمسة البطاقة: توهّج بلون مادتها، وأيقونتها ترتفع، وسهم الدعوة ينزلق */
.sub-card{ will-change:transform; }
.sub-card:hover{
  box-shadow:var(--sh3), 0 14px 44px -14px color-mix(in srgb, var(--acc) 55%, transparent);
}
.sub-card .art__ico{ transition:transform .35s var(--ease); }
.sub-card:hover .art__ico{ transform:translateY(-4px) scale(1.08) rotate(-3deg); }
.sub-card .cta{ transition:gap .25s var(--ease), color .2s; }
.sub-card:hover .cta{ gap:.6em; }
.sub-card:focus-visible{ outline:none; box-shadow:var(--ring), var(--sh2); }

/* ═══ رأس المادة: ضوء حيّ ونقش يتنفّس ═══ */
.sub-hero{ isolation:isolate; }
/* وهج علوي كضوء ساقط على الغلاف */
.sub-hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(90% 70% at 10% 110%, rgba(0,0,0,.22), transparent 60%);
}
/* نقش نقاط خفيف ينجرف ببطء شديد — حياة لا حركة */
.sub-hero::after{
  content:''; position:absolute; inset:-40px; z-index:-1; pointer-events:none; opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.1px, transparent 1.3px);
  background-size:26px 26px;
  animation:patDrift 60s linear infinite;
}
@keyframes patDrift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(26px,26px,0); } }
/* محتوا الرأس يدخل كقطعة واحدة بعد الصفحة بلحظة */
.sub-hero .inner{ animation:pageIn .5s var(--ease) .08s backwards; }
.sub-hero .figwrap{ transition:transform .35s var(--ease); }
.sub-hero:hover .figwrap{ transform:translateY(-3px) rotate(-2deg); }

/* ═══ التبويبات: النشط يستقر بنبضة قصيرة ═══ */
@keyframes pillIn{ from{ transform:scale(.92); } to{ transform:none; } }
.tabs__btn[aria-selected="true"]{ animation:pillIn .22s var(--ease); }

/* ═══ الأزرار: صقلة ضوء علوية على الممتلئ — لمعة زجاج لا تدرّج صارخ ═══ */
.btn:not(.btn--ghost):not(.btn--soft){
  background-image:linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,0) 45%);
}
.iconbtn:active{ transform:scale(.94); }

/* ═══ الإشعار: يقفز قفزة نابض قصيرة ═══ */
.toast{ transition:opacity .3s var(--ease), transform .45s cubic-bezier(.34,1.56,.64,1); }

/* ═══ عدّاد الاختبار: رقاقة تتوهّج بهدوء عند اقتراب الموعد ═══ */
.exambar__t{ text-shadow:0 0 18px color-mix(in srgb, var(--acc) 45%, transparent); }

/* ═══ الجداول والتحليل: الصف يُضاء عند المرور — قراءة ليلية مريحة ═══ */
.analysis tbody tr{ transition:background .15s; }
.analysis tbody tr:hover{ background:var(--acc-soft); }

/* ═══ بطل الهبوط: شفق خلف الغلاف ═══ */
.lp-hero{ position:relative; overflow:hidden; }
.lp-hero::after{
  content:''; position:absolute; inset:-30% -10% auto; height:70%; z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--mark-1) 18%, transparent), transparent 70%) 15% 30%/50% 90% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--mark-2) 16%, transparent), transparent 70%) 85% 20%/50% 90% no-repeat;
  filter:blur(8px);
}
.lp-hero > *{ position:relative; z-index:1; }


/* ===== 80-pro.css ===== */
/*
  ═══════════════════════════════════════════════════════════════════
  الطبقة الاحترافية — الاختبار، البنك، الشرح، ملف الطالب، النماذج
  ═══════════════════════════════════════════════════════════════════
  بطلب علي: «تغيير كامل بشكل احترافي للغاية». ما هنا يُعيد رسم ما يقرؤه
  الطالب أكثر من غيره — السؤال وخياراته وشرحه — وما يعرّف به نفسه: ملفه.
  المبدأ: تسلسلٌ طباعيٌّ صريح (ما يُقرأ أولًا أكبر)، ومسافاتٌ من سلّم
  واحد، ولونٌ واحد له معنى في كل شاشة (الذهبي = افعل، الأخضر = صواب،
  الأحمر = خطأ، لون المادة = هويتها). لا لون صريح: كل شيء من 00-tokens.
*/

/* ═══ ١) النماذج: حقلٌ يُقرأ عنوانه قبل أن يُلمس ═══ */
.field__label{ font-size:var(--fs-sm); font-weight:700; color:var(--text-2); letter-spacing:.01em; margin-bottom:6px; }
.input{
  min-height:48px; border-radius:var(--r2); border:1.5px solid var(--line-2);
  background:var(--surface); padding:var(--s3) var(--s4); font-size:var(--fs-md);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s;
}
.input:hover{ border-color:color-mix(in srgb, var(--text-3) 60%, var(--line-2)); }
.input:focus{ border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); outline:none; }
.input::placeholder{ color:var(--text-3); opacity:.9; }
textarea.input{ line-height:var(--lh-body); resize:vertical; }
select.input{ appearance:none; -webkit-appearance:none; padding-inline-end:2.4em;
  background-image:linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position:calc(1.1em + 5px) 50%, 1.1em 50%; background-size:5px 5px; background-repeat:no-repeat; }
.field__hint{ font-size:var(--fs-sm); color:var(--text-3); line-height:1.6; }
.field__hint.is-bad{ color:var(--bad); font-weight:600; }

/* ═══ ٢) الشارات: أنحف وأوضح ═══ */
.badge{ font-size:var(--fs-xs); font-weight:700; padding:.28em .75em; line-height:1.6; letter-spacing:.01em;
  border:1px solid color-mix(in srgb, var(--acc) 22%, transparent); }
.badge--ok{ background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent); }
.badge--bad{ background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent); }
.badge--warn{ background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.badge--gold{ background:var(--gold-soft); color:var(--warn); border-color:color-mix(in srgb, var(--gold) 45%, transparent); }
:root[data-theme="dark"] .badge--gold{ color:var(--gold); }

/* ═══ ٣) الاختبار ═══ */
.exam{ gap:var(--s4); }
.exam__top{ display:flex; flex-direction:column; gap:var(--s3); }
.exam__bar{ height:6px; border-radius:var(--r-pill); background:var(--bg-soft); overflow:hidden; }
.exam__bar > i{ display:block; height:100%; border-radius:inherit; background:var(--gold); transition:width .4s var(--ease); }
.exam__meta{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.exam__n{ display:inline-flex; align-items:baseline; gap:.3em; font-weight:700; color:var(--text-2); font-size:var(--fs-sm); }
.exam__n b{ font-size:var(--fs-xl); color:var(--text); line-height:1; }
.exam__clock{ background:var(--surface); border:1px solid var(--line-2); color:var(--text); font-weight:800; padding:.35em .8em; }
.exam__clock.is-low{ color:var(--bad); border-color:var(--bad); animation:urgentblink 1.2s ease-in-out infinite; }

/* بطاقة السؤال: نصٌّ أكبر وأهدأ، ومساحةٌ تتنفّس */
.exam__q{ padding:clamp(var(--s4), 3vw, var(--s6)); gap:var(--s5); border-radius:var(--r4); }
.exam__q .q__text{
  font-size:clamp(1.05rem, 1rem + .5vw, 1.25rem); line-height:1.75; font-weight:600;
  color:var(--text); margin:0;
}
/* الخيار: حرفٌ في مربّع، نصٌّ يلتفّ، وحالةٌ واحدة لكل معنى */
.q__opts{ gap:var(--s2); }
.exam__q .q__opts{ max-width:none; }   /* الخيارات بعرض البطاقة: القياس ٦٤ محرفًا للنص لا للأزرار */
.opt{
  padding:var(--s3) var(--s4); border-radius:var(--r2); min-height:52px; gap:var(--s3);
  border:1.5px solid var(--line); background:var(--surface); line-height:1.7; cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease), box-shadow .15s;
}
.opt:not([disabled]):hover{ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 6%, var(--surface)); transform:translateX(-2px); }
.opt:not([disabled]):hover .opt__l{ background:var(--gold); color:var(--btn-fg); border-color:var(--gold); }
.opt[disabled]{ cursor:default; opacity:1; }
.opt__l{ width:30px; height:30px; border-radius:9px; font-size:var(--fs-sm); font-weight:800; margin-top:2px;
  background:var(--bg-soft); border:1px solid var(--line-2); color:var(--text-2); transition:background .15s, color .15s; }
.opt__t{ flex:1 1 auto; min-width:0; font-size:var(--fs-md); }
.opt__mark{ font-size:1.05rem; }
.opt.is-answer{ background:color-mix(in srgb, var(--ok) 10%, var(--surface)); border-color:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent); }
.opt.is-wrong{ background:color-mix(in srgb, var(--bad) 8%, var(--surface)); border-color:var(--bad); }
.opt.is-wrong .opt__t{ text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--bad) 60%, transparent); }
.opt.is-answer .opt__l, .opt.is-wrong .opt__l{ border-radius:50%; }

/* لوحة التغذية الراجعة */
.exfb{
  border-radius:var(--r3); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3);
  border:1px solid var(--line); background:var(--surface-2);
  border-inline-start:4px solid var(--ok);
}
.exfb--bad{ border-inline-start-color:var(--bad); }
.exfb__h{ display:flex; align-items:center; gap:var(--s3); }
.exfb__ico{ width:38px; height:38px; flex:0 0 38px; border-radius:50%; display:grid; place-items:center; font-size:1.1rem; font-weight:900;
  background:var(--ok); color:var(--on-brand); }
.exfb--bad .exfb__ico{ background:var(--bad); }
.exfb__x{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.exfb__t{ font-size:var(--fs-lg); font-family:var(--font-display); }
.exfb__s{ font-size:var(--fs-sm); color:var(--text-2); }
.exfb__tabs{ display:flex; gap:4px; flex-wrap:wrap; }
.exfb__tab{ background:transparent; border:1px solid var(--line-2); color:var(--text-2); border-radius:var(--r-pill);
  padding:.35em .9em; font-size:var(--fs-sm); font-weight:700; cursor:pointer; transition:background .15s, color .15s; }
.exfb__tab:hover{ color:var(--text); }
.exfb__tab[aria-selected="true"]{ background:var(--text); color:var(--bg); border-color:var(--text); }
.exfb__body{ font-size:var(--fs-md); line-height:var(--lh-loose); }
.exfb__p{ margin:0; }
.exfb__memo{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.exfb__acts{ display:flex; gap:var(--s2); flex-wrap:wrap; padding-top:var(--s2); border-top:1px dashed var(--line); }
.exam__nav{ padding-top:var(--s2); }

/* ═══ ٤) بنك الأسئلة في صفحة المادة ═══ */
.qitem{ padding-inline-start:var(--s7); border-inline-start:2px solid var(--rule); }
.qitem__n{ font-size:var(--fs-sm); opacity:1; top:14px; color:var(--acc); }
.qitem > .row{ align-items:flex-start; gap:var(--s2); }
.qitem .rowbtn{
  flex:1 1 auto; min-width:0; border:0; border-radius:var(--r2); padding:var(--s3) var(--s4);
  background:var(--surface); box-shadow:var(--sh1); transition:box-shadow .15s, background .15s;
}
.qitem .rowbtn:hover{ box-shadow:var(--sh2); background:var(--surface); }
.qitem .rowbtn[aria-expanded="true"]{ border-end-start-radius:0; border-end-end-radius:0; box-shadow:none; border:1px solid var(--line); border-bottom:0; }
.qitem .rowbtn .q__text{ margin:0; font-size:var(--fs-md); font-weight:600; line-height:1.7; }
.qitem .q__opts{ background:var(--surface); border:1px solid var(--line); border-top:0; padding:var(--s3) var(--s4) var(--s4);
  border-radius:0 0 var(--r2) var(--r2); box-shadow:var(--sh1); }
.qitem .q__opts .opt{ min-height:44px; padding:var(--s2) var(--s3); background:var(--surface-2); cursor:default; }
.qitem .q__opts .opt:hover{ transform:none; border-color:var(--line); background:var(--surface-2); }
.qitem .q__opts .opt:hover .opt__l{ background:var(--bg-soft); color:var(--text-2); border-color:var(--line-2); }
.qitem .q__opts .opt.is-answer{ background:color-mix(in srgb, var(--ok) 10%, var(--surface)); border-color:var(--ok); }
.qitem .q__opts .opt.is-answer:hover .opt__l{ background:var(--ok); color:var(--on-brand); border-color:var(--ok); }

/* ═══ ٥) تبويب الشرح وبطاقات الحفظ ═══ */
.fold.card{ padding:0 var(--s4); border-radius:var(--r2); }
.fold > summary{ display:flex; align-items:center; gap:var(--s2); padding:var(--s3) 0; font-weight:600; font-size:var(--fs-md); }
.fold > summary::before{ content:'›'; font-size:1.2em; color:var(--text-3); transition:transform .2s var(--ease); }
.fold[open] > summary::before{ transform:rotate(-90deg); }
.fold[open] > summary{ border-bottom:1px solid var(--line-soft); }
.fold > .stack{ padding:var(--s3) 0 var(--s4); }
.fold .ltr{ line-height:1.7; }

/* ═══ ٦) نص التحليل («عن المادة» و«طريقة الحفظ» و«الأخطاء الشائعة») ═══ */
/*
  ★ السقف على الكتلة كلّها لا على الفقرة وحدها.
  كان ‎.analysis p‎ وحده مقيَّدًا بـ‎70ch‎، فخرجت الفقرة ٧٣٩ بكسل بينما العنوان
  ‎h3‎ والجدول بعرض البطاقة (١٠٠٣) — ثلاث حافّات مختلفة في كتلةٍ واحدة.
  الآن: حافّة واحدة للعنوان والفقرة والجدول والقائمة. وداخل عمود القراءة
  (read-col) تساوي عرضَ البطاقة فلا يبقى فراغ إلى جانبها.
*/
.analysis{ line-height:var(--lh-loose); font-size:var(--fs-md); color:var(--text); max-width:var(--measure); }
.analysis p{ margin:0 0 .8em; }
.analysis h3{
  margin:1.5em 0 .5em; font-size:var(--fs-lg); color:var(--text); padding-inline-start:.6em;
  border-inline-start:4px solid var(--acc); line-height:1.35;
}
.analysis h3:first-child{ margin-top:0; }
.analysis h4{ margin:1.1em 0 .35em; font-size:var(--fs-md); color:var(--acc-d); }
:root[data-theme="dark"] .analysis h4{ color:var(--acc); }
.analysis ul, .analysis ol{ margin:.4em 0 1em; padding-inline-start:1.3em; }
.analysis li{ margin-bottom:.45em; padding-inline-start:.2em; }
.analysis li::marker{ color:var(--acc); font-weight:800; }
.analysis strong{ font-weight:800; color:var(--text); background:linear-gradient(transparent 62%, color-mix(in srgb, var(--gold) 35%, transparent) 62%);
/* ★ سفاري (WKWebView في التطبيق) يرسم التدرّج فوق صندوق السطرين معًا حين يلتفّ
المصطلح الإنجليزي العريض على أكثر من سطر، فيسقط لون التمييز على السطر المجاور —
هذا ما رآه علي: مصطلح يتراكب مع الفقرة العربية تحته. clone يرسم التدرّج لكل سطر
مستقلًا بدل صندوقٍ واحد يُقطَّع — يطابق كروم بلا تغيير، ويصلح سفاري. */
-webkit-box-decoration-break:clone; box-decoration-break:clone; }
.analysis em{ font-style:normal; color:var(--acc-d); font-weight:600; }
.analysis table{ width:100%; border-collapse:separate; border-spacing:0; margin:.8em 0 1.2em; font-size:var(--fs-sm);
  border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; }
.analysis th{ background:var(--surface-2); font-weight:800; color:var(--text-2); }
.analysis th, .analysis td{ padding:.65em .85em; border-bottom:1px solid var(--line-soft); }
.analysis tr:last-child td{ border-bottom:0; }
.analysis blockquote{ margin:.8em 0; padding:.7em 1em; border-inline-start:4px solid var(--gold); background:var(--gold-soft); border-radius:0 var(--r1) var(--r1) 0; }
.analysis code{ font-family:var(--font-num); font-size:.9em; background:var(--bg-soft); padding:.1em .4em; border-radius:6px; }

/* ═══ ٧) رأس المادة: أهدأ وأثبت ═══ */
.sub-hero h2{ font-family:var(--font-display); letter-spacing:-.02em; }
.sub-hero .sub{ font-size:var(--fs-sm); opacity:.9; }
.sub-hero .stat{ font-size:var(--fs-xs); font-weight:700; }

/* ═══ ٨) ملف الطالب ═══ */
.acc-grid{ display:grid; gap:var(--s4); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .acc-grid{ grid-template-columns:minmax(0,1fr) 300px; } .acc-grid__side{ position:sticky; top:calc(var(--topbar-total) + var(--s3)); } }
.acc-sec{ display:flex; flex-direction:column; gap:var(--s4); }
.acc-sec__h{ display:flex; align-items:center; gap:var(--s2); }
.acc-sec__ico{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--gold-soft); color:var(--warn); font-size:1rem; }
:root[data-theme="dark"] .acc-sec__ico{ color:var(--gold); }
.acc-sec__t{ margin:0; font-size:var(--fs-lg); }
.acc-sec__s{ font-size:var(--fs-sm); color:var(--text-3); margin:0; }
.acc-grid2{ display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:640px){ .acc-grid2{ grid-template-columns:1fr 1fr; } }
.acc-grid2 .field{ margin:0; }
.acc-grid2 .field--wide{ grid-column:1 / -1; }
.pf-hero{ border-radius:var(--r4); padding:var(--s5); }
.pf-hero .pf-hero__n{ font-size:var(--fs-xl); letter-spacing:-.02em; }
.pf-hero .pf-hero__mail{ font-size:var(--fs-sm); }
.pf-hero .pf-hero__bio{ font-size:var(--fs-md); }
/* أرقام الطالب الثلاثة في البطل: ما يُسأل عنه أول ما يُفتح الملف */
.pf-hero__stats{ display:flex; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s3); }
.pf-hero__stat{ display:flex; flex-direction:column; line-height:1.2; }
.pf-hero__stat b{ font-family:var(--font-num); font-size:var(--fs-xl); color:var(--today-fg); }
.pf-hero__stat span{ font-size:var(--fs-xs); color:var(--today-fg2); font-weight:700; }
.avpick .iconbtn{ width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); }
.avpick .iconbtn[aria-checked="true"]{ border-color:var(--gold); background:var(--gold-soft); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }

/* ═══ ٩) العناوين الثانوية داخل البطاقات: أصغر وأوضح تسلسلًا ═══ */
.card > h2, .card > .stack > h2{ font-size:var(--fs-lg); }
.card h2 + .field__hint{ margin-top:-4px; }

/* ═══ ١٠) الأيقونات الموحّدة: SVG يأخذ لون ما حوله ويجلس على خط النص ═══ */
.ico{ display:inline-block; vertical-align:-.2em; flex:0 0 auto; }
.tabs__ico .ico, .campus-band__ico .ico, .upsell__ico .ico, .acc-sec__ico .ico, .inbox__ic .ico,
.lb-mini__ico .ico, .revcard__ico .ico, .ad-shell__mark .ico, .sc-ico .ico, .excard__ico .ico,
.lp-card__ico .ico, .up-row__ico .ico, .lb-champ__ico .ico, .today__fi .ico, .trialbar__ico .ico{ display:block; vertical-align:middle; }
.tabs__ico, .campus-band__ico, .upsell__ico, .acc-sec__ico, .inbox__ic, .lb-mini__ico, .revcard__ico,
.ad-shell__mark, .sc-ico, .excard__ico, .lp-card__ico, .up-row__ico, .lb-champ__ico, .today__fi{ display:inline-grid; place-items:center; }
.sub-hero .fig{ display:grid; place-items:center; }
.sub-hero .fig .ico{ width:44px; height:44px; display:block; }
.empty__ico .ico{ display:block; margin:0 auto; color:var(--text-3); }

/* ═══ ١١) بطاقة الاستكشاف — أختُ بطاقة «موادي» ═══ */
.excard{ padding:var(--s4); gap:var(--s3); border-inline-start:4px solid var(--acc); border-radius:var(--r3); }
.excard__head{ gap:var(--s3); }
.excard__ico{ width:46px; height:46px; flex:0 0 46px; border-radius:12px; background:var(--acc); color:var(--on-acc);
  box-shadow:0 6px 16px -8px var(--acc); font-size:1rem; }
.excard__x{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.excard__t{ font-size:var(--fs-md); line-height:1.35; }
.excard__en{ font-size:var(--fs-xs); color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.excard__where{ font-size:var(--fs-xs); color:var(--text-2); font-weight:600; }
.excard__meta{ gap:6px; padding-top:0; }
.excard .badge{ font-size:var(--fs-xs); }

/* ═══ ١٢) بطل الملف: صورةٌ أكبر وأرقامٌ في بلاطات ═══ */
.pf-hero__stats{ gap:var(--s2); }
.pf-hero__stat{ min-width:96px; padding:var(--s2) var(--s3); border-radius:var(--r2); background:color-mix(in srgb, var(--surface) 55%, transparent);
  border:1px solid var(--today-line); align-items:center; text-align:center; }
.pf-hero__stat b{ font-size:var(--fs-lg); }

/* ═══ ١٣) الرافع: منتقي الطالب، لافتة الاستئناف، شريط حال المالك ═══
   المنتقي حقلٌ ونتائج تحته لا قائمة منسدلة — المشرف يكتب حرفين فيرى الطالب.
   والألوان كلها من المتغيّرات كي يعمل في الوضعين بلا استثناء. */
.spick{ display:flex; flex-direction:column; gap:var(--s2); }
.spick__head{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.spick__l{ color:var(--text-3); font-size:var(--fs-sm); }
.spick__cur{ font-weight:800; font-family:var(--font-display); padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--gold) 18%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); }
.spick__pane{ display:flex; flex-direction:column; gap:var(--s2); }
.spick__list{ display:flex; flex-direction:column; gap:4px; max-height:280px; overflow:auto;
  border:1px solid var(--line); border-radius:var(--r2); padding:4px; background:var(--surface); }
.spick__list:empty{ display:none; }
.spick__row{ display:flex; align-items:center; gap:var(--s2); width:100%; text-align:start;
  padding:8px 10px; border:0; border-radius:var(--r1); background:transparent; color:inherit; cursor:pointer;
  font:inherit; min-height:44px; }
.spick__row:hover, .spick__row:focus-visible{ background:var(--bg-soft); outline:none; }
.spick__av{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--surface-2); flex:0 0 30px; }
.spick__x{ display:flex; flex-direction:column; min-width:0; }
.spick__n{ font-weight:700; }
.spick__s{ font-size:var(--fs-xs); color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:end; }
.spick__empty{ margin:6px 8px; }

.resume{ border-inline-start:4px solid var(--gold); }
.resume__t{ margin:0; font-size:var(--fs-md); }
.resume__row{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.resume__x{ display:flex; flex-direction:column; min-width:0; flex:1; }
.resume__n{ font-weight:700; }
.resume__s{ font-size:var(--fs-xs); color:var(--text-3); }

.ownerbar{ border-inline-start:4px solid var(--ok); }
.ownerbar.is-locked{ border-inline-start-color:var(--warn); }
.uploader-note{ padding:8px 12px; border-radius:var(--r2); background:color-mix(in srgb, var(--gold) 14%, var(--surface-2)); }

/* صفّ المادة المرفوعة صار حاويةً: الرابط داخله لا هو نفسه — ليتّسع لزرّ التحرير */
a.up-row__x{ color:inherit; text-decoration:none; }
a.up-row__x:hover .up-row__t{ color:var(--acc); }

/* ═══ ١٤) «ارفعها عنّي» — دعوة الخيار الثاني ولافتة الطلب ═══ */
.reqinvite{ border-inline-start:4px solid var(--acc, var(--gold)); gap:var(--s2); }
.reqbanner{ border-inline-start:4px solid var(--gold); gap:var(--s2); }
.reqbanner h3{ font-size:var(--fs-md); }

/* ═══ ١٥) أزرار الدخول الاجتماعي — أقراصٌ بشعاراتها ═══
   ★ الشعار يُعرف قبل أن يُقرأ الاسم: قرصٌ بلون المنصة وشعارٌ يقابله. ولون
   القرص يأتي من JS في --tile (ألوان علاماتٍ لا ألوان منصّتنا)، وكل ما
   عداه من متغيّراتنا. والقرص ٥٤ بكسل — فوق حدّ اللمس بمريح. */
.oauth{ display:flex; flex-direction:column; gap:var(--s3); }
.oauth__h{ text-align:center; }
.oauth__grid{ display:grid; grid-template-columns:1fr; gap:var(--s2); }
.oauth__b{ display:flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:46px; width:100%; padding-inline:var(--s3); }
.oauth__ico{ display:inline-grid; place-items:center; flex:0 0 auto; }
.oauth__l{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ico--brand{ display:block; }

/*
  ★ القرص صار له اسمٌ تحته (١٢ سبتمبر ٢٠٢٦): الزرّ عمودٌ شفّاف يحمل القرص
  الملوّن والاسم — فمن لا يعرف شعار جِتهَب يقرأ «جِتهَب». ولون القرص يبقى
  في --tile على الزرّ ويرثه القرص.
*/
.oauth__tiles{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3) var(--s5); }
.oauth__tile{
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  min-width:76px; padding:var(--s1) var(--s2); border:0; border-radius:var(--r2);
  background:none; color:var(--text-2); cursor:pointer;
  font-family:inherit; font-size:.8rem; font-weight:700;
  transition:color var(--t) var(--ease);
}
.oauth__mark{
  width:54px; height:54px; flex:0 0 54px; display:grid; place-items:center;
  border-radius:50%;
  background:var(--tile);
  box-shadow:0 6px 16px -10px black, 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* الأبيض والأصفر يحتاجان حدًّا يفصلهما عن الورقة البيضاء خلفهما */
.oauth__tile.is-pale .oauth__mark{ box-shadow:0 6px 16px -10px black, 0 0 0 1px var(--line-2); }
.oauth__tile:hover{ color:var(--text); }
.oauth__tile:hover .oauth__mark{ transform:translateY(-2px); box-shadow:0 12px 22px -12px black, 0 0 0 2px var(--gold); }
.oauth__tile:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.oauth__name{ line-height:1.2; }
.prov-badge{ display:inline-flex; align-items:center; gap:4px; }
@media (prefers-reduced-motion: reduce){ .oauth__mark, .oauth__tile:hover .oauth__mark{ transition:none; transform:none; } }

/* ═══ ١٦) سياسة الخصوصية + فاصل التذييل ═══ */
.footer__sep{ margin:0 var(--s2); color:var(--text-3); }
.privacy__sec h2{ font-size:var(--fs-lg); }
.privacy__p{ margin:0; max-width:68ch; text-wrap:pretty; }

/* ═══ ١٧) متجر الكوينز — بطاقات الشحن ═══ */
/*
  شبكةٌ تتنفّس: ثلاث بطاقات على الحاسوب، واثنتان على الجوال العريض،
  وواحدة على ٣٦٠ بكسل. والوسم («الأكثر طلبًا») يجلس فوق حافة بطاقته
  لا داخلها، كي يُقرأ عنوانًا للبطاقة لا سطرًا فيها.
*/
.coinshop__grid{
  display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.coinshop__tile{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:var(--s4) var(--s3) var(--s3);
  border:1px solid var(--line); border-radius:var(--r2);
  background:var(--surface-2); position:relative;
}
.coinshop__tile--tag{ border-color:var(--gold); }
.coinshop__tag{
  position:absolute; top:calc(-1 * var(--s2)); inset-inline-start:50%;
  transform:translateX(50%);
  padding:2px 10px; border-radius:999px; white-space:nowrap;
  /* الذهبي فاتح في الوضعين، فالحبر عليه أسود في الوضعين — لا متغيّر يتبدّل */
  background:var(--gold); color:black;
  font-size:var(--fs-xs); font-weight:700;
}
.coinshop__n{ font-size:1.6rem; font-weight:800; line-height:1.1; }
.coinshop__u{ color:var(--text-2); font-size:var(--fs-xs); margin-bottom:var(--s2); }
.coinshop__tile .btn{ margin-top:auto; }


/* ===== 85-look.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   شكل ملف الطالب — الغلاف والستايلات الخمسة ومحرّرها (78-look.js)
   ═══════════════════════════════════════════════════════════════════
   كل الألوان من المتغيّرات: لون الطالب يصل ‎--acc‎ محقونًا على .pf-page
   كما تفعل بطاقة المادة، والتدرّجات مزيج من ألوان المواد — فلا hex هنا،
   ويبقى كل ستايل مقروءًا في الوضعين الليلي والفاتح. */

/* ── الاسم في المتصدرين رابطٌ يبدو رابطًا عند اللمس لا قبله ── */
.lb-link{ color:inherit; text-decoration:none; }
.lb-link:hover, .lb-link:focus-visible{ color:var(--acc); text-decoration:underline; text-underline-offset:.2em; }

/* ── الغلاف ── */
.pf-cover{
  height:120px; border-radius:var(--r3); overflow:hidden; position:relative;
  background:var(--surface-2); border:1px solid var(--line);
}
.pf-cover__img{ width:100%; height:100%; object-fit:cover; display:block; }
/* تدرّج المحور: ما يُرسم حين لا غلاف — للستايلات التي لا تكتمل بدونه */
.pf-cover--acc{ background:linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 45%, var(--ink))); border:0; }
.pf-cover--g1{ background:linear-gradient(135deg, var(--subject-1), var(--subject-6)); border:0; }
.pf-cover--g2{ background:linear-gradient(135deg, var(--subject-3), var(--subject-4)); border:0; }
.pf-cover--g3{ background:linear-gradient(135deg, var(--subject-5), var(--subject-2)); border:0; }
.pf-cover--g4{ background:linear-gradient(135deg, var(--subject-4), var(--subject-2)); border:0; }
.pf-cover--g5{ background:linear-gradient(135deg, var(--gold), var(--subject-3)); border:0; }
.pf-cover--g6{ background:linear-gradient(135deg, var(--subject-6), var(--subject-5)); border:0; }
.pf-cover--g7{ background:linear-gradient(135deg, var(--ink), var(--subject-2)); border:0; }
.pf-cover--g8{ background:linear-gradient(135deg, var(--subject-2), var(--gold)); border:0; }
/* ملمس خفيف يمنع التدرّج من أن يبدو صفيحة مسطّحة */
.pf-cover:not(:has(.pf-cover__img))::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 80% 20%, color-mix(in srgb, var(--surface) 22%, transparent), transparent 70%);
}
.pf-page{ position:relative; }
.pf-page .peer-stats{ grid-template-columns:repeat(4,1fr); }
@media (max-width:520px){ .pf-page .peer-stats{ grid-template-columns:repeat(2,1fr); } }

/* ═══ ١) كلاسيكي: كما كان — والغلاف إن اختاره شريطٌ فوق البطل ═══ */
.pf-look--classic .pf-cover--acc{ display:none; }
.pf-look--classic .pf-cover{ height:110px; }

/* ═══ ٢) غلاف: الصورة تتوسّط الغلاف والاسم تحتها في المنتصف ═══ */
.pf-look--cover .pf-cover{ height:200px; border-radius:var(--r3) var(--r3) 0 0; }
.pf-look--cover .pf-hero{
  flex-direction:column; text-align:center; margin-top:-64px;
  background:var(--surface); color:var(--text); border-color:var(--line);
  border-radius:0 0 var(--r3) var(--r3); padding-top:0;
}
.pf-look--cover .pf-hero__x{ align-items:center; }
.pf-look--cover .pf-hero .peer-face--lg{ width:112px; height:112px; border:4px solid var(--surface); box-shadow:var(--sh3); }
.pf-look--cover .pf-hero .pf-hero__n{ color:var(--text); font-size:1.45rem; }
.pf-look--cover .pf-hero .pf-hero__mail, .pf-look--cover .pf-hero .pf-hero__bio{ color:var(--text-2); }
.pf-look--cover .pf-hero .pf-hero__bio{ max-width:52ch; }

/* ═══ ٣) شريط: حافة لونية، ترتيب مضغوط، ومواده قائمة لا شبكة ═══ */
.pf-look--stripe .pf-cover--acc{ display:none; }
.pf-look--stripe .pf-cover{ height:14px; border-radius:999px; }
.pf-look--stripe .pf-hero{
  background:var(--surface); color:var(--text); border-color:var(--line);
  border-inline-start:6px solid var(--acc); border-radius:var(--r2); gap:var(--s4); padding:var(--s4);
}
.pf-look--stripe .pf-hero .pf-hero__n{ color:var(--text); font-size:1.15rem; }
.pf-look--stripe .pf-hero .pf-hero__mail, .pf-look--stripe .pf-hero .pf-hero__bio{ color:var(--text-2); }
.pf-look--stripe .pf-hero .peer-face--lg{ width:64px; height:64px; font-size:2rem; border-width:2px; }
.pf-look--stripe .pf-hero__avwrap{ width:64px; height:64px; }
.pf-look--stripe .peer-stats{ gap:6px; }
.pf-look--stripe .peer-stat{ flex-direction:row; align-items:baseline; justify-content:center; gap:6px; padding:var(--s3); border-inline-start:3px solid var(--acc); border-radius:var(--r1); }
.pf-look--stripe .peer-stat b{ font-size:1.15rem; }
.pf-look--stripe .grid{ grid-template-columns:1fr; gap:8px; }
.pf-look--stripe h2{ border-inline-start:4px solid var(--acc); padding-inline-start:10px; font-size:1rem; }

/* ═══ ٤) مجلّة: الاسم عنوانًا كبيرًا على الغلاف، والأرقام عمود ═══ */
.pf-look--magazine .pf-cover{ height:280px; border-radius:var(--r4); }
.pf-look--magazine .pf-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, color-mix(in srgb, var(--ink) 88%, transparent) 0%, color-mix(in srgb, var(--ink) 35%, transparent) 55%, transparent 100%);
}
.pf-look--magazine .pf-hero{
  margin-top:-150px; background:transparent; border:0; box-shadow:none; color:var(--on-acc);
  align-items:flex-end; padding:0 var(--s5) var(--s4); position:relative; z-index:1;
}
.pf-look--magazine .pf-hero .pf-hero__n{
  color:var(--on-acc); font-size:clamp(1.8rem, 6vw, 2.6rem); line-height:1.1; letter-spacing:-.03em;
  text-shadow:0 2px 12px color-mix(in srgb, var(--ink) 70%, transparent);
}
.pf-look--magazine .pf-hero .pf-hero__mail{ color:color-mix(in srgb, var(--on-acc) 82%, transparent); font-size:.95rem; }
.pf-look--magazine .pf-hero .pf-hero__bio{ color:color-mix(in srgb, var(--on-acc) 90%, transparent); font-size:1.05rem; max-width:60ch; }
.pf-look--magazine .pf-hero .peer-stars__n{ color:color-mix(in srgb, var(--on-acc) 75%, transparent); }
.pf-look--magazine .pf-hero .peer-face--lg{ width:96px; height:96px; border:3px solid var(--on-acc); }
.pf-look--magazine .peer-stats{ grid-template-columns:repeat(2,1fr); }
.pf-look--magazine .peer-stat{ border:0; border-block-end:2px solid var(--acc); border-radius:0; background:transparent; box-shadow:none; text-align:start; align-items:flex-start; }
.pf-look--magazine .peer-stat b{ font-size:2rem; }
.pf-look--magazine h2{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:-.02em; }
@media (max-width:480px){ .pf-look--magazine .pf-hero{ align-items:center; } }

/* ═══ ٥) زجاجي: بطاقات شفافة ضبابية تطفو فوق الغلاف ═══ */
.pf-look--glass .pf-cover{ height:260px; border-radius:var(--r4); }
.pf-look--glass .pf-hero, .pf-look--glass .peer-stat{
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid color-mix(in srgb, var(--surface) 70%, var(--acc)); color:var(--text);
}
.pf-look--glass .pf-hero{ margin:-190px var(--s4) 0; position:relative; z-index:1; border-radius:var(--r3); }
.pf-look--glass .peer-stats{ margin:0 var(--s4); position:relative; z-index:1; }
.pf-look--glass .pf-hero .pf-hero__n{ color:var(--text); }
.pf-look--glass .pf-hero .pf-hero__mail, .pf-look--glass .pf-hero .pf-hero__bio{ color:var(--text-2); }
.pf-look--glass .pf-hero .peer-face--lg{ border:3px solid color-mix(in srgb, var(--surface) 80%, transparent); }
@media (max-width:480px){ .pf-look--glass .pf-hero{ margin-top:-200px; } }

/* ═══ محرّر «شكل ملفي» ═══ */
.look__pv{
  border:1px solid var(--line); border-radius:var(--r3); padding:var(--s4);
  background:var(--bg-soft); display:flex; flex-direction:column; gap:var(--s3); font-size:.9em;
}
.look__pv .pf-hero{ margin-inline:0; }

/* بلاطات الستايلات: رسم تخطيطي صغير يقول شكل الصفحة قبل اختياره */
.look__tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
@media (max-width:520px){ .look__tiles{ grid-template-columns:repeat(3,1fr); } }
.look__tile{
  display:flex; flex-direction:column; gap:6px; padding:6px; cursor:pointer; font-family:inherit;
  background:var(--surface); color:var(--text); border:2px solid var(--line); border-radius:var(--r2);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.look__tile[aria-checked="true"]{ border-color:var(--acc); box-shadow:var(--ring); }
.look__tile-l{ font-size:.8rem; font-weight:700; text-align:center; }
.look__mini{ display:block; position:relative; height:56px; border-radius:6px; overflow:hidden; background:var(--bg-soft); border:1px solid var(--line-soft); }
.look__mini i{ position:absolute; display:block; }
.look__mini-cov{ inset:0 0 auto 0; height:40%; background:linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 45%, var(--ink))); }
.look__mini-av{ width:16px; height:16px; border-radius:50%; background:var(--acc); border:2px solid var(--surface); top:14px; inset-inline-end:8px; }
.look__mini-t{ height:5px; width:40%; border-radius:3px; background:var(--text-3); top:18px; inset-inline-end:30px; }
.look__mini-s{ height:8px; inset-inline:8px; bottom:8px; border-radius:3px; background:color-mix(in srgb, var(--acc) 30%, var(--surface)); }
/* كلاسيكي: بلا غلاف، الصورة يمين والاسم بجوارها */
.look__mini--classic .look__mini-cov{ display:none; }
/* غلاف: الصورة تتوسّط حافة الغلاف */
.look__mini--cover .look__mini-av{ inset-inline-end:calc(50% - 8px); top:14px; }
.look__mini--cover .look__mini-t{ inset-inline-end:30%; top:36px; }
/* شريط: حافة لونية بلا غلاف */
.look__mini--stripe .look__mini-cov{ inset:0 0 0 auto; width:5px; height:100%; }
.look__mini--stripe .look__mini-av{ top:10px; inset-inline-end:12px; }
.look__mini--stripe .look__mini-t{ top:14px; inset-inline-end:34px; }
.look__mini--stripe .look__mini-s{ height:5px; bottom:10px; }
/* مجلّة: غلاف عالٍ وعنوان ضخم أسفله */
.look__mini--magazine .look__mini-cov{ height:70%; }
.look__mini--magazine .look__mini-av{ top:6px; inset-inline-end:6px; width:12px; height:12px; }
.look__mini--magazine .look__mini-t{ height:9px; width:55%; top:26px; background:var(--surface); }
/* زجاجي: غلاف كامل وبطاقة شفافة فوقه */
.look__mini--glass .look__mini-cov{ height:100%; }
.look__mini--glass .look__mini-s{ height:22px; bottom:6px; background:color-mix(in srgb, var(--surface) 55%, transparent); border:1px solid color-mix(in srgb, var(--surface) 60%, transparent); }
.look__mini--glass .look__mini-t{ top:30px; inset-inline-end:14px; z-index:1; background:var(--text-2); }
.look__mini--glass .look__mini-av{ top:8px; }

/* نقاط اللون */
.look__dots{ display:flex; flex-wrap:wrap; gap:10px; }
.look__dot{
  width:32px; height:32px; border-radius:50%; cursor:pointer; padding:0;
  background:var(--dot); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--line);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease);
}
.look__dot:hover{ transform:scale(1.08); }
.look__dot[aria-checked="true"]{ box-shadow:0 0 0 2px var(--dot); transform:scale(1.12); }

/* الأغلفة الجاهزة */
.look__covers{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
@media (max-width:520px){ .look__covers{ grid-template-columns:repeat(3,1fr); } }
.look__cover{
  height:44px; border-radius:8px; cursor:pointer; padding:0 8px; font-family:inherit; font-size:.78rem; font-weight:700;
  border:2px solid transparent; color:var(--text);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.look__cover[aria-checked="true"]{ border-color:var(--acc); box-shadow:var(--ring); }
.look__cover--none, .look__cover--up{ background:var(--surface); border-color:var(--line); }
.look__cover--up{ grid-column:span 2; }


/* ===== 86-coins.css ===== */
/*
  ═══════════════════════════════════════════════════════════════════
  الكوينز والحماس — الحركة الطائرة، الهدايا، لافتة الجوائز، «كيف أكسب»
  ═══════════════════════════════════════════════════════════════════
  الألوان كلها من 00-tokens: الذهبي للكوين لأنه لون المنصة الثاني أصلًا
  (الأزرار والشارات)، فلا يحتاج الكوين لونًا جديدًا ليُعرف.
*/

/* ═══ الحركة: «+٥ كوين» تطلع من أسفل الشاشة وتتلاشى ═══ */
.coinfly{
  position:fixed; inset-inline-end:var(--s4); bottom:calc(var(--tabbar-h) + var(--s6)); z-index:61;
  display:inline-flex; align-items:baseline; gap:.35em;
  padding:.55em 1em; border-radius:var(--r-pill);
  background:var(--gold); color:var(--btn-fg); font-weight:800;
  box-shadow:var(--sh3), 0 0 0 4px color-mix(in srgb, var(--gold) 28%, transparent);
  pointer-events:none;
  animation:coinfly 2.8s var(--ease) forwards;
}
.coinfly__n{ font-size:1.25rem; line-height:1; }
.coinfly__l{ font-size:.78rem; opacity:.9; }
.coinfly--out{ background:var(--text); color:var(--bg); box-shadow:var(--sh3); }
@keyframes coinfly{
  0%   { opacity:0; transform:translateY(24px) scale(.9); }
  12%  { opacity:1; transform:translateY(0) scale(1.06); }
  20%  { transform:translateY(0) scale(1); }
  75%  { opacity:1; transform:translateY(-10px); }
  100% { opacity:0; transform:translateY(-44px); }
}

/* ═══ هدايا الملف العام ═══ */
.gifts__row{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.gifts__k{
  display:inline-flex; align-items:center; gap:.3em;
  padding:.35em .7em; border-radius:var(--r-pill);
  background:var(--bg-soft); border:1px solid var(--line-soft); color:var(--text-3);
  font-weight:800; font-size:.9rem;
}
.gifts__k.is-on{ background:var(--gold-soft); border-color:color-mix(in srgb, var(--gold) 45%, transparent); color:var(--text); }
.gifts__e{ font-size:1.1em; line-height:1; }
.gifts__recent{ display:flex; flex-direction:column; gap:var(--s2); }
.gifts__item{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; font-size:.9rem; }
.gifts__by{ font-weight:800; }
.gifts__msg{ color:var(--text-2); }

/* لوحة الإهداء داخل البطاقة */
.gift-panel{ display:flex; flex-direction:column; gap:var(--s3); padding-top:var(--s2); border-top:1px dashed var(--line); }
.gift-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s2); }
.gift-btn{
  display:flex; flex-direction:column; align-items:center; gap:.2em;
  padding:.7em .3em; border-radius:var(--r2); cursor:pointer; min-height:44px;
  background:var(--surface-2); border:2px solid var(--line-soft); color:var(--text);
  font-family:inherit; transition:transform var(--t-fast) var(--ease), border-color var(--t-fast), background var(--t-fast);
}
.gift-btn:hover{ transform:translateY(-2px); border-color:var(--gold); }
.gift-btn[aria-pressed="true"]{ border-color:var(--gold); background:var(--gold-soft); }
.gift-btn__e{ font-size:1.6rem; line-height:1; }
.gift-btn__n{ font-weight:800; font-size:.85rem; }
.gift-btn__c{ font-size:.72rem; color:var(--text-3); font-weight:700; }
@media (max-width:420px){ .gift-grid{ grid-template-columns:repeat(2, 1fr); } }

/* ═══ لافتة جوائز الأسبوع ═══ */
.prize-band{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s4) var(--s5); border-radius:var(--r3);
  background:var(--today-bg); color:var(--today-fg); border:1px solid var(--today-line);
  box-shadow:var(--sh2);
}
.prize-band::before{
  content:''; position:absolute; inset-inline-end:-20px; top:-30px; z-index:-1;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--gold) 35%, transparent), transparent 70%);
}
.prize-band__t{ margin:0; font-weight:800; font-size:1.05rem; }
.prize-band__s{ margin:0; color:var(--today-fg2); font-size:.88rem; line-height:1.7; }
.prize-band__c{ margin:0; font-weight:800; color:var(--gold); }
.prize-band__champs{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.prize-band__champs a{ text-decoration:none; }

/* ═══ لوحة الأكثر إهداءً ═══ */
.gift-board{ gap:0; padding:var(--s2) var(--s3); }
.gift-board__row{
  display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s2);
  border-bottom:1px solid var(--line-soft); color:inherit; text-decoration:none;
}
.gift-board__row:last-child{ border-bottom:0; }
.gift-board__row:hover{ background:var(--bg-soft); text-decoration:none; }
.gift-board__rank{ width:2em; text-align:center; font-weight:800; font-size:1.1rem; }
.gift-board__x{ display:flex; flex-direction:column; min-width:0; flex:1; }
.gift-board__n{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gift-board__u{ font-size:.75rem; color:var(--text-3); }
.gift-board__k{ display:flex; gap:4px; flex-wrap:wrap; }
.gift-board__k .gifts__k{ font-size:.75rem; padding:.2em .5em; }

/* ═══ كيف أكسب كوينز — في المحفظة ═══ */
.earn-ways__list{ display:flex; flex-direction:column; }
.earn-way{ display:flex; align-items:center; gap:var(--s3); padding:var(--s2) 0; border-bottom:1px dashed var(--line-soft); }
.earn-way:last-child{ border-bottom:0; }
.earn-way__e{ font-size:1.3rem; line-height:1; width:1.6em; text-align:center; }
.earn-way__x{ display:flex; flex-direction:column; flex:1; min-width:0; }
.earn-way__t{ font-weight:800; font-size:.92rem; }
.earn-way__s{ font-size:.78rem; color:var(--text-3); }
.earn-way__c{ font-weight:800; color:var(--warn); white-space:nowrap; font-size:.9rem; }
:root[data-theme="dark"] .earn-way__c{ color:var(--gold); }

/* زرّ الفتح بالكوينز في بطاقة القفل */
.coin-unlock{ gap:var(--s1); }

/* ═══ شريحة الرصيد — في وجه «حسابي» وورقة اليوم ═══ */
/* حبّة ذهبية خفيفة لا زرّ: الرقم هو الخبر، والذهبي يقول «كوين» قبل الكلمة */
.coinchip{
  display:inline-flex; align-items:center; gap:.4em; min-height:36px;
  padding:.3em .85em; border-radius:var(--r-pill); text-decoration:none;
  background:var(--gold-soft); color:var(--text);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font-weight:800; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast);
}
.coinchip:hover{ transform:translateY(-1px); border-color:var(--gold); text-decoration:none; }
.coinchip__e{ font-size:1.05em; line-height:1; }
.coinchip__n{ font-family:var(--font-num); font-size:1.05rem; line-height:1; }
.coinchip__l{ font-size:.78rem; color:var(--text-3); }
.coinchip__s{ font-size:.78rem; margin-inline-start:.2em; padding-inline-start:.55em; border-inline-start:1px solid var(--line-soft); }
/* في ورقة اليوم: حقيقة كسائر الحقائق، والرمز ذهبي كرمز الاختبار */
.today__coin{ color:var(--today-fg); }
.today__coin:hover{ color:var(--gold); text-decoration:none; }
.today__coin .today__fi{ font-size:1rem; }


/* ===== 87-tickets.css ===== */
/*
  المراسلة — التذكرة والمحادثة.
  كل لون من متغيّرات 00-tokens: لا hex هنا، والمحور --acc يصبغ ما يخصّ
  المتحدّث كي يعمل الملف في الوضعين بلا نسختين.
*/

/* ═══ صفّ التذكرة في القائمة ═══
   يعمل داخل لوحة المشرف (مع .ad-row) وخارجها في حساب الطالب، فيحمل
   إطاره بنفسه بدل أن يعتمد على جدول يحيط به. */
.tk-row{
  display:flex; align-items:center; gap:var(--s3); width:100%;
  padding:var(--s3); min-height:56px; text-align:start; cursor:pointer;
  background:var(--surface); color:inherit;
  border:1px solid var(--line); border-radius:var(--r2);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tk-row + .tk-row{ margin-top:var(--s2); }
.tk-row:hover{ border-color:var(--acc); background:var(--surface-2); }
.tk-row__last{
  display:block; margin-top:2px; opacity:.85;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* رقم التذكرة — يُقرأ ويُكتب في رسالة، فيُميَّز عن بقية السطر */
.tk-ref{
  font-family:var(--font-num); font-weight:700; letter-spacing:.02em;
  color:var(--acc-d); background:var(--acc-soft);
  padding:.15em .55em; border-radius:var(--r-pill);
}
:root[data-theme="dark"] .tk-ref{ color:var(--acc); }

/* شارة غير المقروء على تبويب «مراسلاتي» */
.tk-dot{
  display:inline-grid; place-items:center; min-width:18px; height:18px;
  margin-inline-start:var(--s1); padding:0 5px; border-radius:var(--r-pill);
  background:var(--bad); color:var(--surface);
  font-family:var(--font-num); font-size:.66rem; font-weight:700; line-height:1;
}

/* ═══ ترويسة المحادثة ═══ */
.tk-head{ display:grid; gap:var(--s2); }
.tk-title{ margin:0; font-weight:700; }
/* نصّ السؤال المُبلَّغ عنه: بلغته الأصلية وباتجاهها — القداسة تشمل عرضه */
.tk-q{
  margin:0; padding:var(--s3); border-radius:var(--r1);
  background:var(--surface-2); border:1px solid var(--line-soft);
  font-family:var(--font-latin); font-size:.92rem; line-height:var(--lh-body);
}

/* ═══ الفقاعات ═══
   ★ الموضع واللون والكلمة معًا لا اللون وحده: من لا يميّز الألوان يقرأ
   اسم الكاتب فوق كل فقاعة. */
.tk-msgs{ display:grid; gap:var(--s3); margin:var(--s2) 0; }
.tk-msg{
  max-width:min(90%, 60ch); margin-inline-end:auto;
  padding:var(--s3); border-radius:var(--r2);
  background:var(--surface); border:1px solid var(--line);
}
.tk-msg.is-mine{
  margin-inline-end:0; margin-inline-start:auto;
  background:var(--acc-soft); border-color:color-mix(in srgb, var(--acc) 28%, transparent);
}
.tk-msg__who{
  display:block; font-size:.72rem; font-weight:700;
  color:var(--text-3); margin-bottom:var(--s1);
}
.tk-msg__b{ margin:0; white-space:pre-wrap; line-height:var(--lh-body); }
.tk-msg__t{
  display:block; margin-top:var(--s1);
  font-family:var(--font-num); font-size:.7rem; color:var(--text-3);
}

/* ═══ شريط «حسابك موقوف» ═══ */
.tk-susp{
  display:grid; gap:var(--s2);
  border-color:color-mix(in srgb, var(--bad) 45%, transparent);
  background:var(--bad-soft);
}
.tk-susp__t{ margin:0; font-weight:700; color:var(--bad); }

/* نموذج التذكرة: مساحة اللمس واضحة على الجوال */
.tk-form textarea.input{ min-height:110px; }


/* ===== 90-print.css ===== */
/*
  ★ الطباعة أُلغيت كليًّا (بطلب علي، ٩ سبتمبر ٢٠٢٦):
  «الطباعة أبغاك تلغيها بشكل كامل علشان ما ياخذونها ويطبعونها ويطلعون من
  المنصة الطلاب».

  والسبب أعمق من زرٍّ يُحذف: الورقة المطبوعة تخرج من المنصة ولا تعود. لا
  تُصحَّح حين يُصحَّح سؤال، ولا تعرف من قرأها، وتُنسخ بلا حدّ — فتصير مادة
  الدكتور كرّاسًا يُوزَّع باسم غير اسم صاحبه. والمراجعة أداةٌ حيّة: تتذكّر
  أخطاءك وتقدّمها، وهذا كلُّه يسقط على الورق.

  وحذف الزرّ وحده لا يكفي: المتصفح يطبع بـ Ctrl+P ومن قائمته بلا زرّنا.
  فهذه ورقةُ حجب — عند أي أمر طباعة يختفي كلُّ شيء وتخرج صفحةٌ واحدة تقول
  لماذا. لا تدّعي منع لقطة الشاشة (المتصفح لا يملك ذلك)؛ تمنع أن تتحوّل
  المادة إلى ملزمة.
*/
/*
  ═══ لقطة مبدّل التطبيقات تُلتقط مضبَّبة ═══
  ★ حين يخرج الطالب من التطبيق يصوّر النظامُ آخر شاشة ويعرضها في قائمة
  التطبيقات — وتبقى هناك ظاهرةً لمن أخذ الجهاز أو نظر من فوق الكتف.
  والتضبيب يقع قبل أن تُلتقط الصورة (عند visibilitychange/blur) فتُحفظ
  مضبَّبة لا واضحة.

  ★ ولا انتقال هنا عمدًا: انتقالٌ بمدّةٍ يعني أن أول إطارٍ يُلتقط ما زال
  واضحًا — وحجبٌ يتأخّر ثلث ثانية ليس حجبًا.
  ويُطبَّق في التطبيق وحده: 76-native.js هي التي تضع is-veiled، ولا تعمل
  إلا خلف جسر Capacitor.
*/
body.is-veiled > *{ filter:blur(18px); }
body.is-veiled::after{
  content:'مراجعة'; position:fixed; inset:0; display:grid; place-items:center;
  font-weight:800; font-size:1.6rem;
  color:var(--text-2); background:var(--bg); z-index:9999;
}

@media print{
  /* لا سطرَ من سؤالٍ واحد يصل الورق */
  html, body{ background:white !important; }
  body > *{ display:none !important; }

  body::before{
    content:'مراجعة — محتوًى غير قابل للطباعة';
    display:block; margin-top:26vh; text-align:center;
    font-size:22pt; font-weight:700; color:black;
  }
  body::after{
    content:'أسئلة المنصة أمانةٌ لأصحابها، وتُراجَع داخل «مراجعة» وحدها. افتح المادة على جهازك مرةً وهي تعمل بعدها بلا إنترنت.';
    display:block; margin:7mm auto 0; max-width:118mm; text-align:center;
    font-size:12pt; line-height:1.9; color:black;
  }

  @page{ margin:14mm; }
}