/* «درب الطالب» — الطبقة البصرية.
   الهوية مسطّحة بقرار العميل: صفر تدرّجات، حدود 1px، زوايا 12–16px.
   والدرب (خطّ متقطّع فيروزي) هو العلامة المميّزة — يرمز للتسلسل. */

/* ── الخطوط ─────────────────────────────────────────────────────────── */
@font-face{font-family:'Kufi';src:url(fonts/noto-kufi-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'NotoAr';src:url(fonts/noto-ar-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'NotoAr';src:url(fonts/noto-ar-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'NotoAr';src:url(fonts/noto-ar-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'NotoAr';src:url(fonts/noto-ar-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap}

/* ── الرموز ─────────────────────────────────────────────────────────── */
:root{
  /* لوحة الهوية — إصدار 1.1 (أغسطس 2026). البنفسجي والأخضر تغيّرا عن 1.0:
     ‎#4B2786→#4F178A و‎#08A88F→#029765 و‎#087969→#027A53. الرمادياتُ والبنفسجيّ
     الداكن ‎#2D1768 كما هي. المصدر: Color_Tokens.json في حزمة العميل. */
  --purple:#4F178A;      --purple-deep:#2D1768;
  --teal:#029765;        --teal-deep:#027A53;
  --lavender:#F3F0F8;    --mint:#EDF8F5;
  --canvas:#FAFAFC;      --paper:#FFFFFF;
  --ink:#282532;         --ink-2:#464158;      --muted:#5F5B70;
  --line:#E8E7ED;        --line-strong:#D6D3E0;
  --ok:#026B49;   /* أخضر لوحة 1.1 مُدكَّناً درجةً: تباين 6.04:1 على --ok-bg. (كان #076B5E مشتقّاً من لوحة 1.0.) */          --warn:#8A5A08;   /* دُكِّن 21/08: كان #B0740A بتباين 3.65:1 على --warn-bg — راسبٌ لنصٍّ عادي؛ الآن 5.50:1 */       --danger:#A83540;   /* دُكِّن 21/08: كان #C0454E بتباين 4.39:1 — تحت الحدّ بقليل؛ الآن 5.68:1 */
  --ok-bg:#EDF8F5;       --warn-bg:#FDF6E7;    --danger-bg:#FBEDEE;
  /* 🔑 رموزٌ أُضيفت 03/09 ليكون للوضع الغامق **مقبضٌ واحد**: كلُّ لونٍ كان
     مكتوباً في قاعدةٍ صار رمزاً، فلا يُعاد كتابةُ القواعد في كتلة الغامق. */
  --btn-ink:#FFFFFF;     --teal-hover:#026144;
  --link-hover:var(--purple);
  --danger-ink:#8E2F36;  --placeholder:#8E8AA0;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;
  /* ألوان الشعار الرسمي */
  --lg-0:#FFFFFF; --lg-1:#4F178A; --lg-2:#029765;
}

*,*::before,*::after{box-sizing:border-box}
:where(div,section,main,aside,article,form,ul,ol,li,p,figure,table){min-width:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:'NotoAr',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
h1,h2,h3{font-family:'Kufi','NotoAr',sans-serif;font-weight:700;margin:0;line-height:1.35;text-wrap:balance}
h1{font-size:clamp(24px,4vw,34px)}
h2{font-size:clamp(19px,2.6vw,24px)}
h3{font-size:17px}
p{margin:0}
a{color:var(--teal-deep);text-underline-offset:3px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:var(--r-sm)}

/* أرقام لاتينية دائماً ومعزولة الاتجاه — «3س + 5 = 20» ينقلب بدونها */
.num,time,td.num,.money{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;unicode-bidi:isolate}

/* ── الهيكل ─────────────────────────────────────────────────────────── */
.shell{width:min(1120px,100%);margin-inline:auto;padding-inline:var(--sp-4)}
main{flex:1;padding-block:var(--sp-8) var(--sp-12)}
.stack{display:flex;flex-direction:column;gap:var(--sp-6)}
.stack-sm{display:flex;flex-direction:column;gap:var(--sp-3)}
.row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.grid{display:grid;gap:var(--sp-4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.spacer{flex:1}

/* ── الترويسة ───────────────────────────────────────────────────────── */
.top{background:var(--purple);border-bottom:1px solid var(--purple-deep)}
.top .shell{display:flex;align-items:center;gap:var(--sp-6);min-height:68px}
/* 🔴🔴 30/08 — **تراجعٌ عن رقعةٍ نقضها القياس، وتصحيحُ تشخيصها.**
   كُتب هنا أن «القائمة تعصر الشعار وتقصّه»، وقياسٌ بمتصفّحٍ حقيقيّ على عشرة
   عروضٍ بين 761 و1120px قال: **عرض الشعار 121px ثابتٌ في كل الحالات** — لأن
   أرضيّة عنصر الفلِكس هي عرض الصورة نفسها، والصورة لا تلتفّ. **فالشعار لم
   يكن يُقصّ أصلاً، و`flex:none` كان لا أثر له.**
   وأسوأ منه أن `.nav{min-width:0}` **صنع عطباً**: صندوق القائمة هبط دون
   محتواه (317px لمحتوىً 367) فطفحت الروابط خارجه ووقعت في RTL فوق شارة
   اسم المستخدم — استبدلتُ فيضاً بتراكب.
   🔑 والعطب الحقيقيّ الذي قِيس: ترويسةُ مستخدمٍ مسجَّل تفيض أفقيّاً بين
   761px وعتبة الالتفاف 760px. فالعلاج **أن تلتفّ القائمة** لا أن تُضغط —
   وبلا عتبةٍ جديدة: `wrap` لا يفعل شيئاً حين يتّسع السطر. */
.top svg{height:34px;width:auto;display:block}
.nav{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;row-gap:6px}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px}
.nav a:hover,.nav a[aria-current=page]{color:var(--teal-deep)}

/* ── البطاقات ───────────────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6)}
.card-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.card-head h2{flex:1}

/* ── الدرب: العلامة المميّزة ────────────────────────────────────────── */
.path{position:relative;padding-inline-start:28px}
.path::before{content:"";position:absolute;inset-block:6px;inset-inline-start:9px;
  border-inline-start:2px dashed var(--teal);opacity:.55}
.path>li{position:relative;list-style:none;margin-bottom:var(--sp-4)}
.path>li::before{content:"";position:absolute;inset-inline-start:-24px;top:9px;
  width:10px;height:10px;border-radius:50%;background:var(--teal-deep);
  box-shadow:0 0 0 4px var(--canvas)}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;
  color:var(--teal-deep);letter-spacing:.06em}
.eyebrow::after{content:"";flex:1;border-top:2px dashed var(--teal);opacity:.6}

/* ── الأزرار ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:12px 22px;border:1px solid transparent;border-radius:var(--r);
  font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--teal-deep);color:var(--btn-ink)}
.btn-primary:hover{background:var(--teal-hover);color:var(--btn-ink)}
.btn-ghost{background:var(--paper);border-color:var(--line-strong);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep)}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:default}

/* ── النماذج ────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:7px}
label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r);
  font:inherit;font-size:15.5px;background:var(--paper);color:var(--ink)}
input::placeholder{color:var(--placeholder)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal-deep);box-shadow:0 0 0 3px var(--mint)}
.hint{font-size:12.5px;color:var(--muted)}

/* المسارات والروابط داخل code تتجاوز شاشة الجوال ما لم نأذن بالكسر */
code,kbd,samp{font-family:'Inter',ui-monospace,monospace;font-size:.92em;
  background:var(--lavender);border:1px solid var(--line);border-radius:6px;
  padding:1px 5px;overflow-wrap:anywhere;unicode-bidi:isolate}

/* ── التنبيهات: لون الحدّ كاملاً لا شريطاً جانبياً (الهوية مسطّحة) ──── */
.alert{padding:13px 16px;border-radius:var(--r);border:1px solid;font-size:14.5px}
.alert-ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.alert-warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.alert-danger{background:var(--danger-bg);border-color:var(--danger);color:var(--danger-ink)}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;border:1px solid}
.pill-ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.pill-danger{background:var(--danger-bg);border-color:var(--danger);color:var(--danger-ink)}
.pill-warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.pill-muted{background:var(--lavender);border-color:var(--line-strong);color:var(--ink-2)}

/* ── الجداول ────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:11px 14px;text-align:start;border-bottom:1px solid var(--line)}
th{background:var(--lavender);font-weight:600;color:var(--ink-2);font-size:13px;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

/* ── التذييل ────────────────────────────────────────────────────────── */
footer{background:var(--purple);border-top:1px solid var(--purple-deep);padding-block:var(--sp-6);color:#DCD2EC;font-size:13px}
footer .shell{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}

/* ── الحالة الفارغة ─────────────────────────────────────────────────── */
.empty{text-align:center;padding:var(--sp-12) var(--sp-4);color:var(--muted)}
.empty h3{color:var(--ink);margin-bottom:var(--sp-2)}

@media (max-width:760px){
  .g3,.g2{grid-template-columns:1fr}
  .top .shell{gap:var(--sp-3);flex-wrap:wrap;padding-block:var(--sp-3)}
  .nav{font-size:14px;gap:var(--sp-3);flex-wrap:wrap;row-gap:6px}
  footer .shell{gap:var(--sp-3) var(--sp-4)}

  /* 🔴 03/09 — قِيست الترويسة على جوّالٍ 390×844: **171px أي 20٪ من الشاشة**
     (مقابل 69px على المكتب)، لأنّها تلتفّ ثلاثة صفوف: شعار · قائمة · زرّ دخول.
     ومع شريط الإذن (199px) يذهب **44٪ من الشاشة** قبل أن يُقرأ حرفٌ واحد،
     وأوّلُ زرٍّ رئيسيّ في الرئيسية يقع عند 603px — أي **خلف الشريط**.
     🔑 والعلاج ترتيبٌ لا حذف: القائمة تنزل سطراً مستقلّاً بـ`order` وتنزلق
     أفقيّاً بدل أن تلتفّ، فيصير الصفّ الأول شعاراً وزرَّ دخولٍ وحدهما.
     ولا عتبةَ جديدة ولا `min-width:0` — راجع تعليق `.top .shell` أعلاه. */
  .top .shell > .nav{
    order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;
    gap:var(--sp-4);scrollbar-width:none;-ms-overflow-style:none;
    /* ♿ الانزلاق الأفقيّ يحتاج مساحةَ لمسٍ لا شريطَ تمرير */
    padding-block-end:2px;
  }
  .top .shell > .nav::-webkit-scrollbar{display:none}
  .top .shell > .nav a{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══ رمز الريال السعودي ═══════════════════════════════════════════════
   🔴 محرف U+FDFC يُرسم **مربّعاً فارغاً** في نصّ الجداول: لا NotoAr ولا Inter
      يملكه، وجُرّبت رافدتان من الخطوط فلم تُصلحاه (راجع ops/README.md).
   🔑 فالرمز يُرسم **قناعاً متجهيّاً** لا محرفاً: يظهر على كل خطٍّ وكل جهاز، ويرث
      لون النصّ وحجمه (1em) فيقف في السطر كأنه حرف.
   🔑 والشكل من أيقونة Lucide الرسمية (ISC) لا من رسمٍ تقريبيّ.
   ♿ و`aria-label` على العنصر: القناع صورةٌ لا نصّ، فبدونه يقرأ الصامتَ قارئُ
      الشاشة — يقول «ريال» ولا يُنطق الرمز. */
.riyal{
  display:inline-block;inline-size:.92em;block-size:.92em;
  vertical-align:-.08em;margin-inline-start:.15em;
  background-color:currentColor;
  -webkit-mask:url(img/riyal.svg) no-repeat center/contain;
          mask:url(img/riyal.svg) no-repeat center/contain;
  /* 🔴 القناع لونُه **خلفيّة**، والمتصفّح يُسقط الخلفيّات عند الطباعة افتراضاً
     ⇒ الرمز يختفي فيبقى الرقم بلا عملة. والمتأثّر **كشوفٌ ثلاثة**
     (`payouts/statement` · `school/statement` · `payouts/earnings`) والرمز فيها
     في عناوين الأعمدة ⇒ الضرر «عمودُ مبالغَ بلا عملة». أمّا الفاتورة فتطبع
     `currency` نصّاً ولا تستعمل القناع — فلا تُذكر هنا. */
  -webkit-print-color-adjust:exact; color-adjust:exact; print-color-adjust:exact;
}

/* رمز الريال في السعر الكبير: القناع يرث حجم النصّ (1em)، والسعر بخطٍّ ٣٨px
   فيصير الرمز أكبر من أن يقف بجانبه. فيُصغَّر نسبةً ويُرفع قليلاً ليستقرّ
   على خطّ الأرقام لا تحتها. 🔑 والقياس بالعين على السعر نفسه لا بالحساب. */
.riyal-lg{ inline-size:.80em; block-size:.80em; vertical-align:-.02em; margin-inline-start:.20em; }
/* ⚠️ ويلزم أن يكون حجم الخطّ على **حاوية** السعر لا على رقمه وحده: `em` يرثه
   الرمز من أبيه، فإن كان الرقم أخاه لا أباه ورث 16px وصغر إلى الثلث. */

/* ختم المركز السعوديّ للأعمال — شارةٌ عائمة يحقنها سكربت المركز في `body`.
   🔑 تُخفى عند الطباعة: الفاتورة وكشف المستحقّات مستنداتٌ تُسلَّم، وشارةٌ عائمة
      فوقها ليست منها — وتطبع فوق النصّ حيث وقعت. */
@media print { .sbc-seal-frame, .sbc-verify-seal { display: none !important; } }

/* 🔴 وقِيس بلقطةٍ لا بالظنّ: الشارة عائمةٌ في أسفل يسار **المنفذ**، فحين يصل
   الزائر إلى آخر الصفحة تقف فوق آخر روابط التذييل — غطّت «حالة المنصة».
   ⇒ يُفسح للتذييل مدىً أسفله بقدر الشارة وهامشها، فيرتفع صفُّ الروابط عنها.
   🔑 والحلّ بالكتلة لا بالاتجاه (`padding-block-end`) كي لا يتعلّق بيمينٍ ويسار
   ينقلبان مع اللغة. */
footer { padding-block-end: 66px; }

/* شريط إذن القياس — أسفل الصفحة، ولا يحجب المحتوى ولا يزاحم ختم المركز.
   🔑 الختم عائمٌ في أسفل **اليسار**، فالشريط يبدأ بعده (`inset-inline-start`)
      بمقدار عرضه وهامشه — وإلّا غطّى أحدهما الآخر على الشاشات الضيّقة.
   ♿ ولا حركةَ لمن طلب تقليلها: الظهور يكون فوريّاً عندها. */
.consent-bar{
  position:fixed; inset-block-end:18px;
  /* 🔴🔴🔴 30/08: كانت `inset-inline-start:170px` — والتعليق أعلاه يقول إنّ الختم
     «أسفل اليسار»، **لكنّ `inline-start` في صفحةٍ RTL هو اليمين** ⇒ حُجزت الفجوة
     في الجهة الخالية، وغطّى الختمُ زرّ «لا، شكراً» وحده بينما بقي «أوافق» مكشوفاً.
     قِيس بـ`elementFromPoint`: مركز زرّ الرفض يُعيد إطار الختم لا الزرّ.
     🔑 وموضع الختم **فيزيائيٌّ لا يتبع اتجاه النصّ**، فالصواب خاصّيتان فيزيائيّتان
        لا منطقيّتان — وهذا الاستثناء الوحيد في ملفٍّ خالٍ من الاتجاه الصلب. */
  left:170px; right:18px;
  z-index:2147482000;                    /* دون الختم بقليل: لا يعلوه ولا يختفي */
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--paper); color:var(--ink);   /* 🔴 30/08: كان var(--surface) وهو **غير معرَّفٍ في أي ملفّ** ⇒ شريطٌ شفّاف والنصّ يمرّ خلفه. رصده أربعة مراجعين مستقلّين. */
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 30px rgb(0 0 0 / .12);
  animation:consent-in .22s ease-out;
}
.consent-bar__text{ margin:0; flex:1 1 320px; font-size:14px; line-height:1.7 }
.consent-bar__actions{ display:flex; gap:var(--sp-2); flex:0 0 auto }
.consent-bar .btn{ padding-block:8px; padding-inline:16px; font-size:14px }
@keyframes consent-in{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .consent-bar{animation:none} }
@media (max-width:760px){
  /* على الجوّال لا مكان بجانب الختم: يعلوه الشريطُ صفّاً كاملاً وفوقه ارتفاعاً */
  .consent-bar{ left:12px; right:12px; inset-block-end:74px }
}
@media print{ .consent-bar{ display:none !important } }

/* ══ الترويسة والتذييل على البنفسجي — قرار المالك 30/08/2026 ═══════════════
   🔑 القاعدة التي تحكم هذا القسم كلَّه: **خلفيةٌ داكنة تُبطل كلّ لونٍ بُني
      للأبيض**. فلا يكفي تبديل `background` — يجب أن يتبعه كلُّ ما يقع فوقه،
      وإلّا صار النصّ حبراً على بنفسجيّ (1.30:1) واختفى.
   🔑 والنِّسب مقيسةٌ لا مُقدَّرة: أبيض 11.53 · لافندر #DCD2EC 7.94 ·
      نعناع #5BE3B0 7.17 — وكلُّها تتجاوز AAA (7:1).
   ⚠️ ولا يُستعمل الفيروزي هنا: #027A53 يعطي **2.15:1** — يسقط تحت كل حدّ.  */

/* الشعار: تُقلب النسخة الداكنة بيضاء بالمرشّح، فلا يلزم ملفٌّ ثانٍ ولا طلبُ
   شبكةٍ إضافيّ. 🔑 و`brightness(0) invert(1)` تُسطّح الألوان كلَّها إلى أبيضَ
   نقيّ — وهو المطلوب هنا: شعارٌ أحاديّ على أرضيّةٍ لونيّة. */
.top img[src*="logo"]{filter:brightness(0) invert(1)}

.top .nav a{color:#fff}
.top .nav a:hover,.top .nav a[aria-current=page]{color:#5BE3B0}

/* شارة المستخدم: شفّافةٌ لا لافندريّة — اللافندر #F3F0F8 على البنفسجي يصير
   لطخةً فاتحةً تسرق الانتباه من الروابط. */
.top .pill-muted{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}

/* 🔴 زرّ الدخول كان `--teal-deep` (2.15:1 على البنفسجي) — يسقط. ويصير أبيضَ
   بنصٍّ بنفسجيّ: 11.53:1، وهو أوضحُ ما يمكن، ويقرأه الزائر أوّلَ ما يقرأ. */
.top .btn-primary{background:#fff;color:var(--purple);border-color:#fff}
.top .btn-primary:hover{background:#EDE7F5;color:var(--purple-deep);border-color:#EDE7F5}

.top .btn-ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.top .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* التذييل: النصّ لافندريّ والروابط بيضاء — فيبقى التسلسل البصريّ الذي كان
   (نصٌّ خافت وروابط أبرز) ولا يُقلب لمجرّد تغيّر الأرضيّة. */
footer a{color:#fff;text-decoration:none}
footer a:hover{color:#5BE3B0;text-decoration:underline}
footer .num{color:#EDE7F5}

/* ♿ حلقة التركيز: `--purple` على البنفسجي لا تُرى. تصير بيضاء داخلهما وحدهما. */
.top a:focus-visible,.top button:focus-visible,
footer a:focus-visible,footer button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ══ الوضع الغامق ══════════════════════════════════════════════════════
   أُضيف 03/09/2026. الافتراضُ **فاتح** (عكس سنيح) لأنّه هويّة المنصّة المنشورة،
   والغامقُ يُتبع تفضيلَ الجهاز ما لم يختر المستخدم صراحةً — و`theme.js` يكتب
   `data-theme` على `<html>` فيغلب الوسيطَين معاً.

   🔑 **الترويسة والتذييل بنفسجيّان في الوضعين** عمداً: هما مرساة الهويّة،
      وقلبُهما يجعل المنصّة موقعاً آخر لا نسخةً غامقة منها.
   🔑 **ولا قاعدةَ تُعاد هنا** — كلُّ ما يتغيّر رمزٌ. فمن يضيف مكوّناً جديداً
      يرث الوضعين بلا عمل، ومن يكتب لوناً صريحاً يكسرهما بصمت.
   🔑 والنِّسب **مقيسة** (‏`scratchpad/contrast.py`): نصٌّ على الصفحة 15.98 ·
      على البطاقة 13.77 · خافت 6.09 · رابط 8.56–9.94 · تحويم 7.83 ·
      نصُّ الزرّ على أخضره 9.11 · نجاح 8.83 · تحذير 7.55 · خطر 9.82.
      وكلُّها تتجاوز 4.5:1، والأسطحُ والحدود تتجاوز حدَّها أيضاً. */
:root{color-scheme:light}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#14121B;      --paper:#231F32;
    --lavender:#2B2440;    --mint:#12291F;
    --ink:#EFEDF4;         --ink-2:#CBC6D8;      --muted:#A29DB2;
    --line:#372F4A;        --line-strong:#443D5A;
    --teal:#35D69C;        --teal-deep:#35D69C;  --teal-hover:#28C08B;
    --btn-ink:#0B2019;     --link-hover:#B79BE8; --placeholder:#8F8AA3;
    --ok:#3FD9A0;          --warn:#E3A93B;       --danger:#F0808C;
    --ok-bg:#10261E;       --warn-bg:#2A2113;    --danger-bg:#2C161A;
    --danger-ink:#F8B3BA;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#14121B;      --paper:#231F32;
  --lavender:#2B2440;    --mint:#12291F;
  --ink:#EFEDF4;         --ink-2:#CBC6D8;      --muted:#A29DB2;
  --line:#372F4A;        --line-strong:#443D5A;
  --teal:#35D69C;        --teal-deep:#35D69C;  --teal-hover:#28C08B;
  --btn-ink:#0B2019;     --link-hover:#B79BE8; --placeholder:#8F8AA3;
  --ok:#3FD9A0;          --warn:#E3A93B;       --danger:#F0808C;
  --ok-bg:#10261E;       --warn-bg:#2A2113;    --danger-bg:#2C161A;
  --danger-ink:#F8B3BA;
}

/* 🔴🔴🔴 الطباعة تعود فاتحةً دائماً — الورق أبيض في كل الأحوال.
   وبدون هذا تُطبع **الفاتورة** بنصٍّ فاتحٍ على ورقٍ أبيض: صفحةٌ بيضاء بختمٍ
   ضريبيّ. والقواعد أدناه تُعيد الرموز لا الألوان، فتكفي كلَّ مكوّن. */
@media print{
  :root,:root[data-theme="dark"]{
    color-scheme:light;
    --canvas:#FFFFFF;      --paper:#FFFFFF;
    --lavender:#F3F0F8;    --mint:#EDF8F5;
    --ink:#282532;         --ink-2:#464158;      --muted:#5F5B70;
    --line:#E8E7ED;        --line-strong:#D6D3E0;
    --teal:#029765;        --teal-deep:#027A53;  --teal-hover:#026144;
    --btn-ink:#FFFFFF;     --link-hover:#4F178A; --placeholder:#8E8AA0;
    --ok:#026B49;          --warn:#8A5A08;       --danger:#A83540;
    --ok-bg:#EDF8F5;       --warn-bg:#FDF6E7;    --danger-bg:#FBEDEE;
    --danger-ink:#8E2F36;
  }
}

/* ── زرّ التبديل ─────────────────────────────────────────────────────── */
.theme-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.45);
  border-radius:50%;background:transparent;color:#fff;cursor:pointer;
  transition:background .15s,border-color .15s}
.theme-toggle:hover{background:rgba(255,255,255,.12);border-color:#fff}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* الأيقونة تصف **ما ستصير إليه** لا ما هو قائم: في الفاتح يظهر القمر. */
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ico-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .ico-moon{display:none}
}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:none}
:root[data-theme="light"] .theme-toggle .ico-sun{display:none}
:root[data-theme="light"] .theme-toggle .ico-moon{display:block}
@media print{.theme-toggle{display:none!important}}

/* ── ختم «مشغَّلة بواسطة سنيح» ────────────────────────────────────────
   شركة سنيح هي المشغّل، والختم يُعلن ذلك في تذييل كلّ منصّة. الإطار ذهبيّ
   من هويّة سنيح (#C9952E)، والقفل الأبيض/الذهبيّ لأنّ التذييل بنفسجيّ:
   🔑 القفلُ الأصليّ أسودُ النصّ — ويختفي على الداكن. فاستُعملت نسخةٌ مقلوبة
      للأسود وحده، **والذهبيّ باقٍ كما هو** لأنّه الهويّة لا الزينة. */
.powered{display:inline-flex;align-items:center;gap:10px;flex:none;
  padding:6px 12px;border:1px solid #C9952E;border-radius:999px;
  text-decoration:none;color:#EFE3C9;font-size:11.5px;letter-spacing:.02em;
  transition:background .15s,border-color .15s}
/* 🍎 شارةُ متجر آبل في التذييل: ارتفاعٌ ثابتٌ والعرضُ تبعٌ له — فلا تُشوَّه
   نسبةُ شارة آبل، وهو ارتفاعُ ختم زاتكا نفسُه فيستويان في السطر. */
.appstore-badge{display:inline-block;flex:none;line-height:0;border-radius:7px;
  transition:opacity .15s ease}
.appstore-badge:hover{opacity:.85}
.appstore-badge:focus-visible{outline:2px solid #fff;outline-offset:3px}
.appstore-badge svg{display:block;height:44px;width:auto}
.powered:hover{background:rgba(201,149,46,.14);border-color:#E2B558;color:#fff;text-decoration:none}
.powered img{height:32px;width:auto;display:block}
@media (max-width:760px){.powered{padding:5px 10px;font-size:11px}.powered img{height:26px}}
@media print{.powered{display:none!important}}