:root{
  /* ===== هويّةُ العميل كما في ملفّاته — لا كما اخترناها =====
     قال نصًّا ٣٠/٠٨/٢٠٢٦: «يحتاج الى اعادة ترتيب و**الحفاظ على الهوية
     الموجودة في ملفات html**». فالمرجعُ صار ملفّاتِه الستّة، وقِيست منها
     المتغيّرات لا قُدّرت:

       --primary-blue  #3b66f5   في ستّة ملفّاتٍ من ستّة
       --primary-hover #254edb   في ستّة من ستّة
       --success/--warning/--danger  #10b981 · #f59e0b · #ef4444  (٦/٦)
       صفحاتُ الزائر والمعلّم: --border #d1d5db · --text #1f2937 ·
                               --muted #6b7280 · --hover-bg #eef2ff
       لوحاتُ الطاقم:        --border #e2e8f0 · --text #0f172a ·
                               --muted #64748b · الشريط #1e293b بعرض 270px
       والخطّ: Tajawal في الستّة كلِّها.

     **وأزرقُه الجديد يحلّ إشكالًا قديمًا لا يُنشئه**: كان أزرقُ الشعار
     `#466CF1` تباينُه على الأبيض **4.49:1** — دون حدّ AA بمقدار ٠٫٠١ —
     فاضطُررنا إلى درجةٍ أعمق للأزرار والنصّ. وأزرقُ ملفّاته **`#3b66f5`
     تباينُه 4.77:1** على الأبيض و**4.56:1** على خلفيّة صفحته `#f8fafc`،
     أي **فوق الحدّ**. فصار لونُ العميل هو لونَ الأزرار والنصّ حرفيًّا،
     وسقط سببُ الانحراف. مقيسٌ لا مقدَّر.

     **وألوانُ الحالات عنده ألوانُ ملءٍ لا ألوانُ نصّ**: `#10b981` على
     الأبيض 2.54:1 و`#f59e0b` 2.15:1 — تصلح خلفيّةً لشارة، ولا تصلح نصًّا.
     فتُحفظ كما هي في `--ok-fill` و`--warn-fill` و`--err-fill` (وهو
     موضعُها في ملفّاته: خلفيّاتُ الشارات والنقاط والحدود)، وتبقى للنصّ
     درجاتٌ فوق الحدّ. فالهويّةُ محفوظةٌ حيث تُرى، والنصُّ يبقى مقروءًا. */
  --brand-h: 266.4; --brand-c: 0.219;
  --brand-pure:#3b66f5;
  --ink:#1f2937; --muted:#6b7280;
  --bg:#f8fafc; --card:#fff; --line:#d1d5db;
  --brand:#3b66f5; --brand-d:#254edb; --brand-l:#eef2ff;
  --warn:#a8620d; --err:#b3261e; --ok:#1a7f37;
  /* ألوانُ الملء من ملفّاته بأعيانها — للشارات والحدود والنقاط لا للنصّ */
  --ok-fill:#10b981; --warn-fill:#f59e0b; --err-fill:#ef4444;
  --green-total:#cbf9d3;
  /* لوحةُ الطاقم في ملفّاته: شريطٌ داكن بعرضٍ ثابت */
  --adm-sidebar:#1e293b; --adm-sidebar-w:270px;
  --adm-ink:#0f172a; --adm-muted:#64748b; --adm-line:#e2e8f0;
  /* حدّ عناصر التحكّم: `--line` (#DCE0E5) تباينه ١٫٢٢:١ على الصفحة — أي حدٌّ لا
     يكاد يُرى. وهذا اللون ٣٫٠٥:١ عليها و٣٫٣١:١ على الأبيض، وهو الحدّ الأدنى
     المطلوب لعنصرٍ يُتفاعل معه. و`--line` تبقى لفواصل الجداول والبطاقات. */
  --line-ctl:#878e97;
  /* --- تمييز أنواع الملفّات الثلاثة: بنية أوّلًا، واللون تأكيد --- */
  /* الأنواع الثلاثة: الفتريّ يتبع العلامة، والنهائيّ يفترق عنه بدرجةٍ
     أخرى كي لا يلتبسا بعد أن صارت العلامة زرقاء. */
  /* **ألوانُ الأنواع الثلاثة من عائلةٍ واحدة.** كانت `#0f6a63` (فيروزيّ) و
     `#8a5a12` (كهرمانيّ) — **٨١° و١٦٣° عن درجة العميل**، أي لوحةٌ أخرى تعيش
     داخل لوحته. فصارت مشتقّةً من درجته `267.5°` بإزاحةٍ ±٣٦°: قريبةٌ تكفي
     لتُقرأ عائلةً، بعيدةٌ تكفي لتُميَّز (٧٢° بين الطرفين). ومعها فرقُ
     إضاءة، فمن لا يميّز الألوان يفرّق بالغمق. وثلاثتُها فوق حدّ AA على
     أرضيّتها البيضاء (5.79 · 7.85 · 6.38). */
  /* الفتريّ يتبع لونَ العميل حرفيًّا، والآخران بإزاحةٍ ±٣٦° عن درجته */
  --k-periodic:#3b66f5; --k-final:#005686; --k-worksheet:#754ba3;
  --surface-2:#eef2f5; --surface-3:#e4eaef;
  --brand-soft:#c9d5f8; --brand-ink:#1c2f7e;
  /* --- مقياس المسافات على شبكة ٤ --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  /* أنصافُ الأقطار من ملفّاته: ٨ هو الغالب (٣١ موضعًا) ثمّ ٦ (٢١) ثمّ ١٢ (١١) */
  --r:8px; --r-sm:6px; --r-lg:12px;
  /* مقياس خطّ سائل — بلا قفزات بين المقاسات */
  --fs-xs:  clamp(11.5px, 0.72rem + 0.1vw, 12.5px);
  --fs-sm:  clamp(13px,   0.8rem  + 0.15vw, 14px);
  --fs-base:clamp(14.5px, 0.88rem + 0.2vw,  16px);
  --fs-lg:  clamp(16px,   0.95rem + 0.3vw,  18px);
  --fs-xl:  clamp(18px,   1.05rem + 0.5vw,  21px);
  --fs-2xl: clamp(21px,   1.2rem  + 0.8vw,  27px);
  /* طبقة العرض: القفزة التي تقود العين */
  --fs-3xl:     clamp(28px, 1.5rem + 1.2vw, 36px);
  --fs-display: clamp(34px, 1.8rem + 2vw,   48px);
  --lh: 1.75;
  --sh:0 1px 2px oklch(30% 0.02 250 / .07), 0 4px 14px oklch(30% 0.02 250 / .05);
}
/* **ولا يُعاد حسابُ لون العميل هنا.** كانت هذه الكتلةُ تُعيد اشتقاق
   `--brand` و`--brand-d` و`--brand-l` و`--ink` … بـOKLCH، فتُزيح ألوانَه
   عن سداسيّاتها بمقدارٍ صغيرٍ لا يُرى في الصورة ويُرى في المقارنة —
   **وهو عينُ ما شكا منه**: «الحفاظ على الهوية الموجودة في ملفات html».
   فما جاء من ملفّاته يبقى حرفيًّا، ولا يُشتقّ هنا إلّا ما ليس فيها:
   درجاتُ الأسطح، ولونُ العلامة الليّن العميق، وألوانُ الأنواع الثلاثة —
   وكلُّها مشتقّةٌ من **درجته هو** (`--brand-h`) فتبقى في عائلته. */
@supports (color: oklch(50% 0.1 168)) {
  :root{
    --surface-2:  oklch(95.5% 0.006 250);
    --surface-3:  oklch(92.5% 0.008 250);
    --brand-soft: oklch(88%   0.075 var(--brand-h));
    --brand-ink:  oklch(32%   0.13  var(--brand-h));
    --k-periodic: oklch(52%   0.19  var(--brand-h));
    --k-final:    oklch(42%   0.13  calc(var(--brand-h) - 36));
    --k-worksheet:oklch(50%   0.14  calc(var(--brand-h) + 36));
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* ==================== خطُّ الهويّة ====================
   **الخطُّ يتبع الشعار.** كان `Noto Sans Arabic` — خطًّا عامًّا لا صلةَ
   له باسم المنصّة المرسوم، والمطبوعُ بخطٍّ ثالثٍ غيرِه.

   واسمُ الشعار **مساراتُ vector لا نصٌّ بخطّ**، فلا اسمَ يُقرأ منه.
   فالاختيارُ مبرهَنٌ بما أمكن قياسُه وبما تُحكم عليه العين:

   • **الوزن مقيس**: ثخانةُ جذع الشعار ≈٨٠ وارتفاعُه ≈٢٨٨ على رسمٍ
     ١٠٢٤ ⇒ نسبة **3.60**. وأقربُ وزنٍ متاح **Cairo Black (4.39)**،
     ثمّ SF Arabic Black (4.75) وExamArabic Bold (5.23).
   • **وثلاثةُ مقاييسَ عالميّة سقطت** ولا أدّعيها: التراكب (IoU) أعطى
     ٢١–٢٦٪ متقاربةً لا تميّز، والتباينُ الداخليّ وعزلُ الألف تلوّثا
     بذيل الشعار الممتدّ. فالهيكلُ **لم يُبرهَن بالرقم**، وحُكم عليه
     بورقةِ مقارنةٍ يعيدها أيُّ طرفٍ ثالث (`tool/build-type-sheet.php`).
   • **وشرطُ شحنٍ محقَّق**: Cairo تحت رخصة SIL OFL 1.1 — تُشحن مع
     منتج العميل بلا قيد. ومقيسٌ أنّها تغطّي كلَّ ما يحتاجه المطبوع:
     العربية والتشكيل والأرقام بنظاميها والترقيم ورموز الرياضيات.
   • ملفٌّ واحد متغيّر الوزن (٢٠٠–١٠٠٠) بـ٥٨٦ ك.ب يغني عن سبعة. */
@font-face{
  font-family:"Cairo";
  src:url("../fonts/Cairo.ttf") format("truetype-variations");
  font-weight:200 1000;
  font-display:swap;
}
/* **خطُّ الواجهة Tajawal — من ملفّات العميل الستّة.**
   يُعلَن في كلٍّ منها `'Tajawal', sans-serif`، وقال: «الحفاظ على الهوية
   الموجودة في ملفات html». وهو **مشحونٌ معنا** لا مُحمَّلٌ من شبكةٍ خارجية:
   منصّةُ معلّمٍ في مدرسةٍ خلف مرشِّحٍ لا تصلها خطوطُ قوقل فتُرسم بخطّ
   النظام — وقد وقع هذا قبلُ مع Noto. أربعةُ أوزانٍ (٤٠٠·٥٠٠·٧٠٠·٨٠٠)
   بـ٢٢٠ ك.ب، ورخصته SIL OFL فتُشحن مع منتج العميل بلا قيد.
   ومقيسٌ فيها: ٦٧ محرفًا عربيًّا وأرقامُ ٠–٩ بنظاميها — بلا محرفٍ غائب.
   **وخطُّ المطبوع يبقى Cairo**: هو الذي يغطّي رموزَ الرياضيات في الأوراق
   المولَّدة، ولا شأن له بالشاشة. */
@font-face{font-family:"Tajawal";src:url("../fonts/Tajawal-400.ttf") format("truetype");
  font-weight:400;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/Tajawal-500.ttf") format("truetype");
  font-weight:500;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/Tajawal-700.ttf") format("truetype");
  font-weight:700;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/Tajawal-800.ttf") format("truetype");
  font-weight:800;font-display:swap}
body{font-family:"Tajawal","Cairo","Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);
  color:var(--ink);direction:rtl;font-size:var(--fs-base);line-height:var(--lh);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* الأرقام الجدولية تُراصّ الأعمدة */
.tbl td, .tbl th, .stat b, .marks-in, input[type=number], .pill { font-variant-numeric: tabular-nums }
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

.brand{font-weight:700;font-size:var(--fs-lg);display:flex;align-items:center;gap:var(--s2);
  color:var(--ink);letter-spacing:-.01em}
.brand .logo{background:var(--brand);color:#fff;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;font-size:17px}
.nav{display:flex;gap:2px;margin-inline-start:auto;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:8px;font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.nav a.on{background:var(--brand-l);color:var(--brand-d);font-weight:600}

/* ترويسة لوحة الإدارة داكنة، وكانت نصوصها تأخذ ألوان السطح الفاتح:
   اسم اللوحة `--ink` على `#16202b` = نسبة تباين ١٫٠٠ — نصٌّ لا يُرى أصلًا،
   وروابط التنقّل `--muted` = ٢٫٧٤ وحدّ المقروئية ٤٫٥. مقيسة لا مقدَّرة. */
.adm{background:var(--adm-sidebar)}
.adm .brand{color:#eef2f6}
.adm .nav a{color:#c8d2dc}
.adm .nav a:hover{background:rgba(255,255,255,.10);color:#fff}
.adm .nav a.on{background:var(--brand-l);color:var(--brand-d)}

/* بطاقات */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--sh)}
.card+.card{margin-top:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
h1{font-size:var(--fs-3xl);margin:var(--s5) 0 var(--s3);letter-spacing:-.02em;line-height:1.25}
h2{font-size:var(--fs-xl);margin:0 0 var(--s3)}
h3{font-size:var(--fs-lg);margin:0 0 var(--s2)}
/* العنوان الرئيسيّ داخل بطاقة يبقى بحجم عنوان البطاقة — الدلالة للقارئ الصوتي لا للعين */
.card > h1:first-child{font-size:var(--fs-xl);margin:0 0 var(--s3);letter-spacing:normal}
.page-h1{font-size:var(--fs-2xl);margin:var(--s4) 0 var(--s2)}
.muted{color:var(--muted);font-size:var(--fs-sm)}

/* أزرار */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;border:0;
  padding:10px 18px;border-radius:9px;cursor:pointer;font:inherit;font-weight:600;font-size:15px}
.btn:hover{background:var(--brand-d);text-decoration:none;color:#fff}
.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line-ctl)}
/* كان المرور يفتّح الحدّ إلى ١٫٢٠:١ — فيختفي الزرّ بمجرّد أن يقترب المؤشّر منه */
.btn.sec:hover{background:var(--surface-2);border-color:var(--brand);color:var(--ink)}
.btn.sm{padding:6px 12px;font-size:13.5px;border-radius:7px;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap}   /* الجدول يُسحب أفقيًّا، فالالتفاف يُشوّه الزرّ بلا داعٍ */
.btn.danger{background:var(--err)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
/* شريطُ التحكّم فوق المعاينة — تقسيم الصفحة وحجم الخطّ (كرّاسة العميل) */
.pv-tools{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0 0 10px;padding:8px 10px;
  background:var(--brand-l,#eef2ff);border:1px solid var(--line);border-radius:8px}
.pv-tools .pv-lbl{font-weight:600;font-size:13px;color:var(--muted,#64748b);margin-inline-start:4px}
.pv-tools .btn[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

/* حقول */
label{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--s1)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line-ctl);border-radius:8px;font:inherit;
  background:#fff;color:var(--ink)}
/* ٤٦: حلقة التركيز كانت `--brand-l` — أي ١٫١٠:١ على البطاقة و١٫٠١:١ على الصفحة،
   حلقةٌ لا تُرى أصلًا. وهي الدليل الوحيد لمن ينتقل بلوحة المفاتيح على موضعه. */
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
/* وكلّ رابطٍ لا `.nav` و`.steps` وحدهما: قِيس أنّ رابطًا في بطاقةٍ كان يأخذ حلقة
   المتصفّح الافتراضية (١px برتقالية) — أضعف من حلقتنا وغريبةٌ عن لون المنصّة. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible,.mathbar button:focus-visible,.kind:has(:focus-visible){
  outline:3px solid var(--brand);outline-offset:2px}
textarea{min-height:82px;resize:vertical}
.field{margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:150px}

/* تنبيهات */
.alert{padding:11px 14px;border-radius:9px;margin-bottom:16px;border:1px solid}
.alert.ok{background:#e9f7ee;border-color:#b7e3c4;color:#14532d}
.alert.err{background:#fdecea;border-color:#f5c2be;color:#7f1d1d}
.alert.info{background:#eef4fb;border-color:#c9dcf2;color:#1e3a5f}

/* جداول */
table.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:10px 11px;text-align:right;font-size:14.5px}
.tbl th{background:var(--surface-2);font-weight:700;font-size:13.5px;color:var(--muted)}
.tbl tr:hover td{background:var(--brand-l)}
.scroll-x{overflow-x:auto}

/* شارات */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:var(--brand-l);color:var(--brand-d)}
.pill.g{background:#e9f7ee;color:#14532d}
.pill.y{background:#fdf3e3;color:#7c4a03}
.pill.r{background:#fdecea;color:#7f1d1d}
.pill.n{background:#eef1f4;color:#48566b}

/* خطوات الرحلة */
.steps{display:flex;gap:0;margin:var(--s4) 0 var(--s5);overflow-x:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s1)}
.steps a{flex:1;text-align:center;padding:10px 6px;font-size:13.5px;font-weight:600;color:var(--muted);
  border-radius:8px;white-space:nowrap;min-width:96px}
.steps a.on{background:var(--brand);color:#fff}
.steps a.done{color:var(--brand)}
.steps a:not(.on):hover{background:var(--surface-2)}
.steps a:hover{text-decoration:none;background:var(--brand-l)}
.steps a.on:hover{background:var(--brand-d)}

.step{scroll-margin-top:74px}
.step-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.step-n{background:var(--brand);color:#fff;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}

/* اختيار نوع الملف */
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.kinds{grid-template-columns:1fr}}
.kind{position:relative;display:block;border:2px solid var(--line);border-radius:12px;padding:18px;
  text-align:center;cursor:pointer;background:#fff;transition:.15s}
/* مخفيٌّ بصريًّا لا بـ`display:none` — تلك تُخرجه من ترتيب التنقّل فيعود العطل نفسه */
.kind-r{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.kind:hover{border-color:var(--brand);background:var(--brand-l)}
.kind:has(:focus-visible){outline:3px solid var(--brand);outline-offset:2px}
.kind .ic{font-size:30px;margin-bottom:6px}
.kind b{display:block;font-size:16px;margin-bottom:4px}
.kind span{font-size:13px;color:var(--muted);display:block;line-height:1.6}

/* قائمة الأسئلة في الاختبار */
.qitem{border:1px solid var(--line);border-radius:10px;padding:13px 14px;background:#fff;margin-bottom:10px}
.qitem.drag{opacity:.45}
.qitem.over{border-color:var(--brand);border-style:dashed}
.qitem-h{display:flex;align-items:flex-start;gap:10px}
.qitem-n{font-weight:700;color:var(--brand);min-width:26px}
.qitem-b{flex:1;min-width:0}
.qitem-a{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.handle{cursor:grab;color:var(--muted);font-size:18px;user-select:none;padding:0 3px}
.qmeta{font-size:12.5px;color:var(--muted);margin-top:6px}
.marks-in{width:64px;text-align:center}

/* مربّع البنك */
.bankrow{border:1px solid var(--line);border-radius:9px;padding:11px 12px;margin-bottom:8px;background:#fff;
  display:flex;gap:10px;align-items:flex-start}
.bankrow:hover{border-color:var(--brand)}
.bankrow input[type=checkbox]{margin-top:5px;width:17px;height:17px;flex:none}

/* المعاينة */
.preview-wrap{background:#e3e7eb;padding:18px;border-radius:var(--r);overflow:auto;max-height:78vh}
/*
 * **نافذةُ المعاينة** — الورقةُ لم تعد مضمَّنةً في الصفحة (بند المراجعة
 * الثالث)، فصارت خلف زرٍّ يفتح هذه النافذة. و`[hidden]` وحدَه لا يكفي على
 * عنصرٍ يُعلَن `display:flex`، فالإخفاءُ مصرَّحٌ به هنا.
 */
.pv-modal{position:fixed;inset:0;z-index:70;background:rgba(17,24,39,.6);
  display:flex;align-items:center;justify-content:center;padding:14px}
.pv-modal[hidden]{display:none}
.pv-dialog{background:var(--card);border-radius:12px;width:100%;max-width:min(880px,96vw);
  max-height:94vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.18)}
.pv-modal-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pv-modal-h .pv-x{margin-inline-start:auto}
.pv-modal .preview-wrap{flex:1;min-height:0;border-radius:0;max-height:none}
body.pv-open{overflow:hidden}
/* مَعلَمةُ ملاحة التذييل لا تُغيّر صفَّه — تُعرض كما كانت روابطُه سطرًا واحدًا */
.site-foot .foot-nav{display:contents}
.page{background:#fff;width:210mm;min-height:297mm;margin:0 auto 14px;padding:15mm;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.preview-frame{width:210mm;height:297mm;border:0;background:#fff;display:block;margin:0 auto;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}

/* محرّر الرموز */
.mathbar{display:flex;flex-wrap:wrap;gap:5px;padding:var(--s2);background:var(--surface-2);border:1px solid var(--line);
  border-bottom:0;border-radius:8px 8px 0 0}
/* هدف اللمس لا يقلّ عن ٤٤ نقطة — والإصبع لا تصيب ٣٤ */
.mathbar button{background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px 9px;
  cursor:pointer;font-size:15px;min-width:44px;min-height:44px;
  /* رموزُ الرياضيات مغطّاةٌ في خطّ الهويّة (مقيس)، والمصفوفةُ احتياطٌ
     لجهازٍ لم يُحمَّل عنده الخطّ. */
  font-family:"Cairo","Times New Roman",serif}
.mathbar button:hover{background:var(--brand-l);border-color:var(--brand)}
.mathbar .sep{width:1px;background:var(--line);margin:2px 3px}
.matheditor textarea{border-radius:0 0 8px 8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px}
.mathprev{border:1px dashed var(--line);border-radius:8px;padding:12px;background:#fff;margin-top:9px;min-height:46px}
.mathprev .lbl{font-size:12px;color:var(--muted);display:block;margin-bottom:5px}

.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5)}
/* الرقم هو الخبر، والتسمية تحته خافتة */
.stat b{display:block;font-size:var(--fs-display);font-weight:700;color:var(--brand);
  line-height:1.05;letter-spacing:-.03em;margin-bottom:2px}
.stat span{font-size:var(--fs-xs);color:var(--muted);font-weight:500;letter-spacing:.01em}

.sub-bar{background:var(--brand-l);border:1px solid var(--brand-soft);border-radius:9px;padding:10px 14px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:14.5px}

.empty{text-align:center;padding:var(--s6) var(--s4);color:var(--muted)}
.empty .ic{color:var(--muted);opacity:.45;margin-bottom:var(--s2)}
.empty p{font-size:var(--fs-sm)}
.hidden{display:none!important}
.spin{display:inline-block;width:15px;height:15px;border:2px solid #fff6;border-top-color:#fff;
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:22px;inset-inline-start:22px;background:#16202b;color:#fff;padding:11px 18px;
  border-radius:9px;box-shadow:var(--sh);z-index:200;font-size:14.5px;max-width:min(92vw,420px)}
/* الفشل يُميَّز باللون وبحدٍّ سميك — لا برمزٍ رسوميّ، فالمنصّة بلا إيموجي */
.toast.err{background:var(--err);border-inline-start:5px solid #fff;font-weight:600}
@media print{.top,.steps,.no-print{display:none!important}}

/* ---------- الجوال واللوح ---------- */
@media (max-width: 760px) {
  body { font-size: 15px; }

  .brand { font-size: 16px; white-space: nowrap; }
  .brand .logo { width: 26px; height: 26px; font-size: 15px }

  .nav::-webkit-scrollbar { display: block; height: 3px }
  .nav::-webkit-scrollbar-thumb { background: var(--line-ctl, #878e97); border-radius: 999px }
  .nav a { padding: 6px 9px; font-size: 13.5px; white-space: nowrap;
           min-height: 44px; display: inline-flex; align-items: center }
  h1 { font-size: 20px; margin: 16px 0 12px }
  h2 { font-size: 17px }
  .card { padding: 14px }
  .row > * { min-width: 100%; }
  .steps { position: sticky; top: 54px; z-index: 40; }
  .steps a { min-width: 84px; font-size: 12.5px; padding: 8px 4px;
             min-height: 44px; display: inline-flex; align-items: center; justify-content: center }
  /* الشريطان لاصقان فوق بعضهما؛ وبعد زيادة ارتفاع الخطوات يُزاد الهامش
     وإلّا اختفى عنوان الخطوة خلفهما عند القفز إليها */
  .step { scroll-margin-top: 124px }
  .kinds { grid-template-columns: 1fr }
  .qitem-h { flex-wrap: wrap }
  .qitem-a { width: 100%; justify-content: flex-end; margin-top: 6px }
  .preview-wrap { padding: 8px }
  .preview-frame, .page { width: 100%; min-width: 0 }
  .btn { padding: 10px 14px }
}

/* ---------- الأيقونات: عائلة واحدة، ترث لون النصّ ---------- */
.ic { display: inline-block; vertical-align: -0.18em; flex: none }
.btn .ic { vertical-align: -0.2em; margin-inline-end: 2px }
.btn.sm .ic { width: 15px; height: 15px }
.empty .ic { color: var(--muted); opacity: .55; margin-bottom: var(--s2) }
.brand .ic { vertical-align: -0.15em }
.handle .ic { color: var(--muted) }
.kind .ic { color: var(--brand); margin-bottom: var(--s1) }

/* تمييز أنواع الملفّات: حدّ وأيقونة ولون — والبنية تسبق اللون */
.kind[data-kind="periodic"]  .ic { color: var(--k-periodic) }
.kind[data-kind="final"]     .ic { color: var(--k-final) }
.kind[data-kind="worksheet"] .ic { color: var(--k-worksheet) }
/* اللون الذي يُعلَّم به النوع في بطاقات الاختيار يتبعه في القوائم — وإلّا كان تمييزًا
   يُتعلَّم في شاشةٍ ويُنسى في التي بعدها */
.pill.k-periodic {background:color-mix(in oklab,var(--k-periodic) 12%,#fff);color:var(--k-periodic)}
.pill.k-final    {background:color-mix(in oklab,var(--k-final) 12%,#fff);color:var(--k-final)}
.pill.k-worksheet{background:color-mix(in oklab,var(--k-worksheet) 12%,#fff);color:var(--k-worksheet)}
.kind[data-kind="periodic"]:has(:checked)  { border-color: var(--k-periodic);
  background: color-mix(in oklab, var(--k-periodic) 7%, #fff) }
.kind[data-kind="final"]:has(:checked)     { border-color: var(--k-final);
  background: color-mix(in oklab, var(--k-final) 7%, #fff) }
.kind[data-kind="worksheet"]:has(:checked) { border-color: var(--k-worksheet);
  background: color-mix(in oklab, var(--k-worksheet) 7%, #fff) }

/* هيكل تحميل بدل الدوّامة، مع احترام تقليل الحركة */
.skel { background: linear-gradient(90deg, var(--line) 25%, #eef2f5 37%, var(--line) 63%);
        background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: var(--r-sm) }
.skel-line { height: 12px; margin-bottom: var(--s2) }
.skel-line:nth-child(2) { width: 82% } .skel-line:nth-child(3) { width: 64% }
@keyframes sk { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none } .spin { animation: none; border-top-color: transparent }
  * { scroll-behavior: auto !important }
}

/* ---------- استعلامات الحاوية: المكوّن يستجيب لحاويته لا للشاشة ---------- */
.qlist, .banklist { container-type: inline-size; container-name: qlist }
@container qlist (max-width: 520px) {
  .qitem-h { flex-wrap: wrap }
  .qitem-a { width: 100%; justify-content: flex-start; margin-top: var(--s2) }
  .bankrow { flex-wrap: wrap }
}
@supports not (container-type: inline-size) {
  @media (max-width: 640px) { .qitem-h { flex-wrap: wrap } .qitem-a { width: 100% } }
}

/* ---------- :has() يغني عن أصناف إضافية ---------- */
.card:has(> .empty) { background: color-mix(in oklab, var(--card) 96%, var(--muted)) }
.field:has(input:focus, select:focus, textarea:focus) > label { color: var(--brand) }
.kind:has(:checked) { border-color: var(--brand); background: var(--brand-l) }
.btn-row:has(> form:only-child) { margin: 0 }

/* ---------- عمق بحدود وتظليل سطح لا بظلال ثقيلة ---------- */
.card { box-shadow: none; border-color: var(--line);
        background: linear-gradient(color-mix(in oklab, var(--card) 100%, transparent), var(--card)) }

.stat { background: color-mix(in oklab, var(--card) 97%, var(--brand)) }

/* ---------- الصفحة التعريفية: الورقة أوّلًا ---------- */
.hero{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.15fr);gap:var(--s6);
  align-items:center;margin-top:var(--s6)}
.hero h1{font-size:var(--fs-display);line-height:1.18;letter-spacing:-.03em;margin:0 0 var(--s3)}
.hero-lead{font-size:var(--fs-lg);color:var(--muted);line-height:1.7;margin:0 0 var(--s5);max-width:46ch}
.btn-lg{padding:13px 26px;font-size:var(--fs-base);border-radius:11px}
.hero-shot{margin:0}
.hero-shot img{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:var(--r-lg);background:#fff}
.hero-shot figcaption{margin-top:var(--s2);font-size:var(--fs-xs);color:var(--muted);text-align:center}
.feat-ic{color:var(--brand);margin-bottom:var(--s2)}
.journey{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);counter-reset:j}
.journey li{counter-increment:j;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s3);background:var(--card);position:relative}
.journey li::before{content:counter(j, arabic-indic);position:absolute;inset-block-start:var(--s3);
  inset-inline-end:var(--s3);font-size:var(--fs-xl);font-weight:700;
  color:var(--brand-soft);line-height:1}
.journey b{display:block;font-size:var(--fs-sm);margin-bottom:2px}
.journey span{font-size:var(--fs-xs);color:var(--muted);line-height:1.55}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:var(--s5)}
  .hero-lead{max-width:none}
}

/* تذييلٌ يحمل رابط السياسة — ميسر تشترط سياسةً منشورة، والمعلّم يحتاج موضعًا يجدها فيه */
.site-foot { border-top:1px solid var(--line,#e5e7eb); margin-top:32px; padding:14px 0; }
.site-foot .wrap { display:flex; gap:16px; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--muted,#6b7280); }
.site-foot a { color:inherit; text-decoration:underline; }

/* ==================== إصلاحات بصريّة مقيسة ==================== */

/* ١) المعادلات تُقرأ يسارًا-يمينًا مهما كان اتّجاه الصفحة.
   بلا هذا يرث KaTeX اتّجاه RTL فتنقلب المعادلة:
   `3x - 6 = 12` تُرسم `12 = 6 − 3x` — والرياضيات نفسها تصير خطأً. */
.katex, .katex-html, .katex-display, .math, .math-inline {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: initial;
}

/* ٢) نصّ الزرّ متوسّطٌ داخله — .btn كان inline-flex بلا justify-content،
   فيلتصق النصّ بالحافّة ويترك الزرّ العريض فارغًا. */
.btn { justify-content: center }

/* ٣) أرقام «سبع خطوات» تُقرأ — كانت --brand-soft بتباين ١٫٣٣:١ فتختفي. */
.journey li::before { color: var(--brand) ; opacity: .55 }

/* قناعٌ يدلّ على أنّ وراء آخر رابطٍ روابطَ أخرى — القصُّ بلا دليلٍ يُخفي الميزة */
/* القناع أُزيل: بعد تضييق الحشو اتّسع الشريط، وكان يُلاشي «المنصّة» وهو ظاهرٌ داخله. */

/* ٥) علامة المنصّة في لوحة المدير كانت داكنةً على أخضر (تباين ١٫٦:١). */
.top.adm .brand .logo { background: #fff; color: var(--brand-d) }

/* ٦) الجداول لا تمدّ الصفحة: .scroll-x كان يفيض لأنّ الحاوية لا تتقلّص. */
.scroll-x { max-width: 100%; min-width: 0 }
.card { min-width: 0 }

/* ٧) بطاقات صفٍّ واحد تتساوى وتُحاذى من أعلى. */
.g3, .g4, .kinds { align-items: stretch }

/* ٨) خانة الرقم في بطاقة الإحصاء تُخفى إن كانت فارغة — الرقم يُحذف عمدًا
   للمفرد والمثنّى (النصّ يحمله)، لكنّ الخانة كانت تبقى فراغًا يوهم بعطل. */
.stat b:empty { display: none }

/* ٩) البطاقات في صفٍّ واحد تُحاذى من أعلى وتتساوى */
.plans-grid, .g3 { align-items: stretch }
.plan-card, .g3 > * { display: flex; flex-direction: column }
.plan-card .btn { margin-top: auto }

/* ١٠) التذييل يُثبَّت أسفل النافذة في الصفحات القصيرة */
body { min-height: 100vh; display: flex; flex-direction: column }
/*
 * **المتنُ وحدَه يتمدّد.** كانت القاعدة `body > main, body > .wrap:not(.top .wrap)`
 * واستثناؤها معلَّقٌ بشريطٍ حُذف — ولو بقيت لتمدّدت **ترويسةُ الصفحة**
 * الجديدة (`div.wrap` قبل `main`) فانفرطت الصفحة. والمقصودُ أصلًا متنٌ
 * يدفع التذييلَ إلى القاع في الصفحات القصيرة، وهو `main` لا سواه.
 */
body > main { flex: 1 0 auto }

.site-foot { margin-top: auto }

/* ١١) البطاقة بلا رقم (حالة الصفر) تتوسّط رأسيًّا فلا تبدو ناقصةً بجوار أختيها */
.stat { display: flex; flex-direction: column; justify-content: center }

/* ١٢) مربّعات الاختيار كانت زرقاء افتراضيّة تخالف الهويّة الخضراء */
input[type=checkbox], input[type=radio], progress { accent-color: var(--brand) }

/* ١٣) هامشُ التراصّ الرأسيّ `.card+.card` كان يُزيح كلّ بطاقةٍ في الشبكة
       إلّا الأولى ١٦ بكسل — والشبكة لها `gap` أصلًا فالهامش مضاعفةٌ واختلال. */
.grid > .card + .card { margin-top: 0 }

/* ١٤) الزرّ المعطَّل كان أخضرَ شفّافًا فيُقرأ مكسورًا لا مقصودًا.
       يصير محايدًا مؤطَّرًا: يُرى أنّه غيرُ متاحٍ الآن بلا أن يبدو عطلًا. */
.btn:disabled {
  opacity: 1; cursor: not-allowed;
  background: var(--bg, #f4f6f7); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ==================== علامة العميل ==================== */
/* الأيقونة والاسم مرسومان من ملفّه، فلا `.logo` المربّعة الملوّنة بعدُ:
   شعارُه يحمل أرضيّتَه الزرقاء بنفسه، ووضعُه داخل مربّعٍ ملوّنٍ آخر
   يُحدث إطارًا داخل إطار. */
/* الفجوةُ من تركيبته الأفقيّة نفسها: `logo h` = أيقونة ٥١٢ + فجوة ١٧٢
   + اسم ١٧٩٢، وارتفاعُ الاثنين ٥١٢ سواء. أي الفجوة `0.336` من الارتفاع. */
.brand { gap: .336em; font-size: 26px }
.brand-mark { display: block; flex: none; border-radius: 22%; }
.brand-word { display: block; flex: none; }
/* الشريط الداكن: الاسمُ نصٌّ عاديّ بجانب العلامة — ولونُ الأصل
   `#5C5552` لا يُقرأ عليه. */
.adm-title { font-weight: 700; font-size: var(--fs-lg); color: #eef2f6 }
/* اسمٌ للقارئات فقط: الاسم مرسومٌ في SVG وله `aria-label`، وهذا
   يُبقي عنوان الموقع نصًّا للبحث ولمن يعطّل الرسوم. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }

/* **بطاقاتُ الباقات تتحاذى أزرارُها.** كانت البطاقةُ تدفّقًا عاديًّا، فكلُّ
   بطاقةٍ ينزل زرُّها بقدر نصِّها — ومن لا وصفَ لها يرتفع زرُّها عن أختيه.
   مقيسٌ في اللقطة: زرُّ «٥٠ نقطة» أعلى من زرَّي جارتيه بمقدار سطر.
   فالبطاقةُ عمودٌ مرن، وموضعُ الفعل يُدفع إلى القاع فتستوي الصفّ. */
.plan { display: flex; flex-direction: column; }
.plan-cta { margin-top: auto; padding-top: 14px; }

/* صندوقُ الصورة — الرفعُ واللصقُ والإفلات في مساحةٍ واحدة.
   والحدُّ المتقطّع يقول «هنا تُفلت» بلا كلمة، ويشتدّ عند التركيز
   فيعرف من يتنقّل بلوحة المفاتيح أين هو قبل أن يضغط «لصق». */
.imgbox { border: 1.5px dashed var(--line-ctl); border-radius: 10px;
  padding: 12px 14px; margin: 10px 0; background: #fbfcfd; }
.imgbox:focus, .imgbox.over { outline: none; border-color: var(--brand);
  background: var(--brand-l); }
.imgbox-h { font-weight: 600; margin-bottom: 4px; }
.imgbox-hint { color: var(--muted); font-size: 12.5px; margin-bottom: 8px; }
.imgbox input[type=file] { max-width: 100%; }
.imgbox-prev { margin: 8px 0; }
.imgbox-prev img { max-height: 110px; max-width: 100%; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; }
.imgbox-msg { font-size: 12.5px; margin-top: 6px; }

@media (max-width: 640px) {

}

/* ── معاينةُ سؤالٍ واحد ─────────────────────────────────────────── */
dialog.q-preview { border: 1px solid var(--line); border-radius: 12px; padding: 18px;
                   max-width: 720px; width: min(92vw, 720px); }
dialog.q-preview::backdrop { background: rgba(0,0,0,.35); }
/* نوافذُ البلاغ والشحن — الهيئةُ نفسُها */
dialog.dlg { border: 1px solid var(--line); border-radius: 12px; padding: 18px; max-width: 520px;
             width: calc(100% - 32px); background: #fff; }
dialog.dlg::backdrop { background: rgba(15,23,42,.45); }
.q-preview .qp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.q-preview .qp-head .qp-x { margin-inline-start: auto; }
.q-preview .qp-body { font-size: 17px; line-height: 1.9; }
.q-preview .qp-ans { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.q-preview .qp-note { margin-top: 14px; font-size: 12px; }

/* ===== صفحة المقرر: مسارُ التنقّل ومعالجُ الخطوتين وجدولا الأسئلة =====
   منقولةٌ عن ملفّ العميل «منصة الوراق الصفحة الرئيسية.html»: تبويبان
   مرقّمان، شبكةُ فصولٍ ودروسٍ بأزرار، وجدولا مصفوفةٍ بصفِّ مجموعٍ محسوب.
   والألوانُ من رموز الهويّة نفسِها — لا سداسيّاتٍ جديدة تُفلت من حارسها. */
.wq-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13.5px;color:var(--muted);margin:-6px 0 14px}
.wq-crumb a{color:var(--brand)}
.wq-crumb b{color:var(--ink);font-weight:700}

.wq-wizard{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.wq-wtab{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--muted);
  font-family:inherit;font-size:14px;font-weight:700}
.wq-wtab:hover{background:var(--brand-l);color:var(--brand-d);border-color:var(--brand-soft)}
.wq-wtab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.wq-wn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:rgba(255,255,255,.22);font-size:12px}
.wq-wtab:not(.on) .wq-wn{background:var(--brand-l);color:var(--brand-d)}
/* لوحُ التبويبة المخفيّ: تبويبةٌ واحدةٌ تُعرض في كلّ مرّة — كما في تصميم العميل
   (`view-panel` التي لا تحمل `active`). ولا يُكتفى بالتمرير: بقاءُ لوحِ الدروس
   ظاهرًا فوق «اختيار الأسئلة» يجعل التسلسلَ مختلفًا عمّا رسمه. */
.wq-off{display:none !important}
/* سطرُ الرصيد فوق أزرار التحميل، وثمنُ كلّ زرٍّ عليه — من مخطّط العميل */
.wq-credit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
  padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.wq-bal{font-weight:800;color:var(--ink)}
.wq-cost{font-weight:700;opacity:.85}

.wq-lessons{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.wq-lessons-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wq-chapter{margin-top:14px}
.wq-chapter-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.wq-chapter-h h4{margin:0;font-size:14px;font-weight:700}
.wq-lesson-row{display:flex;gap:8px;flex-wrap:wrap}
/*
 * **زرُّ الدرس بقيَم العميل حرفًا** — بند المراجعة السابع: «كبسولات دائرية
 * رمادية عريضة متباعدة ← أزرار مستطيلة بزوايا 6px ناعمة (`.btn-item`)
 * تتحول للأزرق الداكن عند التحديد». وقيَمُه: `min-width:70px` ·
 * `padding:8px 18px` · `border-radius:6px` · والمحدَّدُ `#3b66f5` نصًّا أبيض
 * (وهو `--brand` عندنا بالبايت نفسِه).
 *
 * والصنفُ يحمل اسمَه إلى جانب اسمنا، كي يقرأ ملفَّه في ملفّنا.
 */
.wq-lesson,
.btn-item{min-width:70px;padding:8px 18px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);color:var(--ink);font-family:inherit;font-size:13px;font-weight:500;
  text-align:center;user-select:none;cursor:pointer;transition:all .15s ease-in-out}
.wq-lesson:hover,
.btn-item:hover{background:var(--brand-l);border-color:var(--brand);color:var(--brand-d)}
.wq-lesson[aria-pressed="true"],
.btn-item[aria-pressed="true"],
.btn-item.selected{background:var(--brand);border-color:var(--brand);color:#fff}
/*
 * **`.wq-chip` أُزيل ولم يبقَ له مستعمل.** كان زرَّ «الكل» للفصل
 * كبسولةً مستديرة، ومراجعةُ العميل ١٩/٠٩ نصّت على `btn-item` مستطيلٍ
 * بزوايا ٦px — فصار الزرُّ صنفَه، ولم تبقَ قاعدةٌ بلا موصول.
 */

.wq-qtabs{display:flex;gap:8px;margin:4px 0 14px;flex-wrap:wrap}
.wq-qtab{padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.wq-qtab.on{background:var(--brand-l);border-color:var(--brand-soft);color:var(--brand-ink)}
.wq-matrix td,.wq-matrix th{text-align:center;vertical-align:middle}
.wq-matrix td:first-child,.wq-matrix th:first-child{text-align:start}
/*
 * **عدّادُ العميل حرفًا** — من ملفّ المطابقة ١٠٠٪ (١٩/٠٩): دائرةٌ ٢٠×٢٠
 * بحدٍّ **متقطّع** `#9ca3af` وخلفيّةٍ شفّافة، وقيمةٌ بينهما بفجوة ٤px.
 * وقواعدُه تحمل أسماءَه (`counter-wrap` · `counter-btn` · `counter-value`)
 * لا أسماءَنا، كي يقرأ ملفَّه في ملفّنا كما كتبه.
 *
 * وصنفُنا `wq-count` باقٍ على العنصر نفسِه لأنّ شيفرةً قائمةً تمسكه،
 * لكن تنسيقَ الزرّ تُرك لقاعدته هو — **لا قاعدتان تتنازعان على زرّ**.
 */
.wq-count,
.counter-wrap{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.counter-btn{width:20px;height:20px;border-radius:50%;border:1px dashed #9ca3af;
  background:transparent;font-size:13px;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:all .15s}
.counter-btn:hover{border-color:var(--brand);color:var(--brand);background-color:var(--brand-l)}
.counter-value{min-width:16px;text-align:center;font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums}

/*
 * **عمودُ «الدرجة لكل عنصر/فقرة» مُميَّزٌ بلونٍ خفيف** — تعليقُه في ملفّه
 * نصًّا: «تمييز عمود الدرجة لكل عنصر/فقرة بلون خفيف». والقيمُ قيمُه.
 */
.highlight-col{background-color:#f0fdf4 !important;
  border-left:1px solid #bbf7d0 !important;border-right:1px solid #bbf7d0 !important}
th.highlight-col{background-color:#e2fbe8 !important;color:#14532d !important}

/*
 * **صندوقُ أسهم الترتيب اليدويّ** — قاعدتُه كما كتبها: مخفيٌّ افتراضًا،
 * ويصير `inline-flex` برمجيًّا متى اختير «ترتيب يدوي».
 */
.order-actions-box{display:none;align-items:center;gap:4px;margin-inline-end:6px}
/*
 * **أزرارُ الإجراءات بأيقونات** — ٣٠×٣٠ بزاوية ٦px كما في ملفّه، ومساحةُ
 * اللمس تُصان بـ`min-height` لا تُترك للرسم وحدَه.
 */
/*
 * **والأولويّةُ تُحسب لا تُفترض.** الزرُّ يخرج `class="btn sm sec
 * btn-action-icon-sm"`، و`.btn.sm` أولويّتُها (0,2,0) بينما
 * `.btn-action-icon-sm` (0,1,0) — **فكانت الأقدمُ تفوز رغم تأخّر الآخرة**:
 * حشوٌ `6px 12px` بدل `0`، وزاويةٌ `7px` بدل `6px`، و`min-height:44px`
 * بدل `34px` — فيخرج الزرُّ ٣٤×٤٤ لا مربّعًا، وأيقونتُه تفيض عن صندوقها
 * (`.btn.sm .ic` بأولويّة (0,3,0) تهزم `.btn-action-icon-sm svg`).
 * فصار المُحدِّدُ يحمل `.btn` معه ليتساوى ثمّ يغلب بموضعه.
 */
.btn.btn-action-icon-sm{width:34px;height:34px;min-height:34px;padding:0;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.btn.sm.btn-action-icon-sm .ic,
.btn.btn-action-icon-sm svg{width:16px;height:16px}
/* والنمطُ العشوائيّ يُسكت مقبضَ السحب أيضًا — ترتيبٌ لا يُحفظ لا يُعرض */
.qlist.wq-auto-order .handle{opacity:.35;pointer-events:none}

/*
 * **بطاقتا التصدير** — ورديّةٌ لـPDF وزرقاءُ لـWord، بقيَم ملفّه:
 *   `.export-card.pdf-theme  { background:#fff5f5; border:1px solid #fed7d7 }`
 *   `.export-card.word-theme { background:#ebf8ff; border:1px solid #bee3f8 }`
 * وأزرارُها `#fed7d7/#9b2c2c` و`#c3dafe/#2c5282`.
 */
.wq-exsplit{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.wq-excard{border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.wq-excard.pdf{background:#fff5f5;border:1px solid #fed7d7}
.wq-excard.word{background:#ebf8ff;border:1px solid #bee3f8}
.wq-excard-h{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.wq-excard.pdf .wq-excard-h{color:#9b2c2c}
.wq-excard.word .wq-excard-h{color:#2c5282}
.wq-excard-p{margin:0;font-size:11.5px}
.wq-excard.pdf .wq-excard-p{color:#742a2a}
.wq-excard.word .wq-excard-p{color:#2b6cb0}
.wq-excard-a{display:flex;gap:10px;flex-wrap:wrap}
.wq-excard-a .btn{flex:1;justify-content:center;white-space:nowrap}
.btn.wq-ex-pdf{background:#fed7d7;color:#9b2c2c;border-color:#feb2b2}
.btn.wq-ex-pdf:hover{background:#feb2b2;color:#742a2a}
.btn.wq-ex-word{background:#c3dafe;color:#2c5282;border-color:#a3bffa}
.btn.wq-ex-word:hover{background:#a3bffa;color:#2a4365}
.wq-extools{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  border-top:1px dashed var(--line);padding-top:16px}
.btn.wq-topup{background:#fef3c7;border-color:#f59e0b;color:#92400e}
.btn.wq-topup:hover{background:#fde68a;color:#78350f}
@media (max-width:768px){.wq-exsplit{grid-template-columns:1fr}
  .wq-excard-a .btn{width:100%}}
.wq-sum td,.wq-sum th{font-weight:800;background:var(--surface-2)}
.wq-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ===== لوحةُ الطاقم: شريطٌ جانبيّ كما في ملفّات العميل الأربعة =====
   `.sidebar { width: 270px; background: #1e293b; position: sticky; top: 0;
   height: 100vh }` و`.nav-item button { color:#94a3b8; padding:11px 14px;
   radius:8px; font:600 13px }`، والفعّالُ منها على لون العلامة بظلٍّ منه.
   منقولةٌ بقيَمها لا بتقديرها. */
.adm-shell{display:flex;align-items:flex-start;gap:0;min-height:100vh}
.adm-side{width:var(--adm-sidebar-w);background:var(--adm-sidebar);color:#fff;
  display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;
  height:100vh;overflow-y:auto}
.adm-brand{padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.adm-brand .brand{color:#fff;display:flex;align-items:center;gap:12px;font-weight:800}
.adm-brand .adm-title{font-size:17px}
.adm-nav{display:flex;flex-direction:column;gap:4px;padding:14px 10px;align-items:stretch}
.adm-nav a{color:#94a3b8;padding:11px 14px;border-radius:8px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:10px;text-decoration:none;transition:background .2s,color .2s}
.adm-nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.adm-nav a.on{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(59,102,245,.25)}
.adm-group{color:#64748b;font-size:11px;font-weight:700;padding:14px 14px 4px;letter-spacing:.02em}
.adm-brand .adm-sub{display:block;margin-top:4px;font-size:11px;color:#94a3b8;font-weight:600}
/* الشريطُ العلويّ للوحات الطاقم — عنوانُ الشاشة وهويّةُ الموظّف */
.adm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px 0 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.adm-top-h{margin:0;font-size:19px;font-weight:800;color:var(--ink)}
.adm-who{display:flex;align-items:center;gap:10px}
.adm-hi{font-size:13px;font-weight:700;color:var(--muted)}
.adm-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.adm-main{flex:1;min-width:0;padding:0 24px;max-width:1180px}

/* وعلى الجوّال يعود شريطًا أفقيًّا يمرّ بالإصبع — فالشاشةُ لا تتّسع لـ٢٧٠ بكسل
   جانبيّة، ومنعُ التمرير الأفقيّ في المتن شرطٌ قائم. */
@media (max-width:900px){
  .adm-shell{display:block}
  .adm-side{width:auto;height:auto;position:static;overflow:visible}
  /*
   * **والقناعُ يتبع الشريطَ الذي يُقصّ.** كان على `.nav` العامّة يخدم شريطَ
   * المعلّم الأفقيّ؛ فلمّا حُذف الشريطُ وحُذفت قاعدتُه بقي شريطُ اللوحة
   * **يُقصّ على الجوّال بلا أيّ دليلٍ على أنّ وراءه بنودًا** — أحدَ عشر بابًا
   * في صفٍّ واحد. فانتقل القناعُ إلى مستعمِله الباقي.
   */
  .adm-nav{flex-direction:row;overflow-x:auto;gap:6px;padding:10px;
    -webkit-mask-image: linear-gradient(to left, #000 88%, transparent);
    mask-image: linear-gradient(to left, #000 88%, transparent)}
  .adm-nav a{white-space:nowrap}
  .adm-group{display:none}
  .adm-main{padding:0 16px;max-width:none}
}

/* مبدّلُ وضعَي إدخال الرياضيات ولوحةُ الرموز — طلبُ العميل ١ سبتمبر */
.mode-switch{display:flex;gap:6px;margin-bottom:6px}
.mf-wrap math-field{display:block}
.mf-toggle{margin-top:6px}

/* ═══════════════ ترويسةُ مخطّط العميل ١٩/٠٩ ═══════════════
   القيمُ من ملفّه «صفحة الوراق الشكل المطلوب ويكون مطابق 100%.html» حرفًا:
   المصغّرات ٦٥×٨٥ بحدٍّ ٤px · بنرُ الإعلان بإطارٍ متقطّع #93c5fd ·
   شريطُ المستخدم #f8fafc · لوحةُ الشرف #fffbeb بحدّ #fde68a ·
   صندوقُ الحملة متدرّجٌ #eff6ff→#dbeafe بحدّ #bfdbfe. */
.wq-head{display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;margin:18px 0 25px}
.wq-logo{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
.wq-logo-mark{width:48px;height:48px;border-radius:10px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--brand);color:#fff;
  box-shadow:0 4px 10px rgba(59,102,245,.25)}
.wq-logo-text{display:flex;flex-direction:column;gap:4px}
.wq-logo-text b{font-size:32px;font-weight:800;line-height:1;color:var(--ink)}
.wq-logo-text span{font-size:13px;color:var(--muted)}
.wq-thumbs{display:flex;gap:8px}
.wq-thumb{width:65px;height:85px;border:1px solid var(--line);border-radius:4px;
  background:#fdfdfd;padding:6px;display:flex;flex-direction:column;gap:5px}
.wq-thumb i{height:3px;background:#e5e7eb;border-radius:2px;display:block}

.wq-adbar{width:100%;background:linear-gradient(90deg,#f8fafc 0%,#eff6ff 100%);
  border:1px dashed #93c5fd;border-radius:10px;padding:12px 18px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  text-decoration:none;color:inherit;transition:background .2s,border-color .2s}
a.wq-adbar:hover{border-color:var(--brand);background:#eef2ff}
.wq-adbody{display:flex;align-items:center;gap:14px;min-width:0}
.wq-adimg{width:48px;height:48px;border-radius:8px;background:#dbeafe;flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--brand-d);overflow:hidden}
.wq-adimg img{width:100%;height:100%;object-fit:cover}
.wq-adtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.wq-adtext b{font-size:13.5px;font-weight:800;color:var(--ink)}
.wq-adtext span{font-size:11.5px;color:var(--muted)}
.wq-adbtn{background:var(--brand);color:#fff;padding:6px 14px;border-radius:6px;
  font-size:12px;font-weight:700;white-space:nowrap;flex:none}

.wq-userbar{background:#f8fafc;border:1px solid var(--line);border-radius:8px;
  padding:10px 16px;margin-bottom:14px;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;
  text-decoration:none;color:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.wq-userbar:hover{background:#eef2ff;border-color:var(--brand-soft)}
.wq-ub-who,.wq-ub-bal{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wq-ub-bal b{color:var(--brand);font-size:15px}
.wq-ub-go{display:inline-flex;align-items:center;gap:5px;color:var(--brand-d);font-weight:700}
.wq-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:9999px;
  font-size:11px;font-weight:700;white-space:nowrap}
.wq-badge.warn{background:#fef3c7;color:#b45309}
.wq-badge.blue{background:#e0e7ff;color:var(--brand)}
.wq-userbar.wq-guestbar{cursor:auto}
.wq-userbar.wq-guestbar:hover{background:#f8fafc;border-color:var(--line)}
.wq-staffbar{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 14px;font-size:12.5px}
.wq-staffbar a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--muted);font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.wq-staffbar a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}

.wq-honors{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;
  padding:10px 16px;margin-bottom:16px;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px}
.wq-honors-list{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wq-honors-t{font-weight:800;color:#b45309;display:inline-flex;align-items:center;gap:6px}
.wq-honors-dot{color:#d97706}
.wq-honors-btn{background:#fef3c7;border:1px solid #f59e0b;color:#92400e;border-radius:6px;
  padding:4px 10px;font-size:11.5px;font-weight:700;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px}

.wq-camp{background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);border:1px solid #bfdbfe;
  border-radius:8px;padding:14px 18px;margin-bottom:20px;display:flex;flex-direction:column;gap:8px}
.wq-camp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;font-weight:800;font-size:13.5px;color:#1e40af}
.wq-camp-h>span:first-child{display:inline-flex;align-items:center;gap:6px}
.wq-camp-msg{font-size:12px;color:#1e3a8a}
.wq-camp-bar{width:100%;height:8px;background:#e2e8f0;border-radius:9999px;overflow:hidden}
.wq-camp-bar i{display:block;height:100%;background:var(--brand);border-radius:9999px}
.wq-camp-f{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;font-size:12px;color:#3b82f6;font-weight:700}
.wq-camp-f a{color:#1d4ed8;text-decoration:underline}
@media (max-width:768px){
  .wq-head{flex-direction:column;gap:20px;align-items:center}
  .wq-logo-text b{font-size:26px}
}