/* ════════════════════════════════════════════════════════════════
   سماتنا — أنماط التطبيق
   ════════════════════════════════════════════════════════════════
   ❗ لا لونَ يُعرَّف هنا. كل الرموز تأتي من theme.php محقونةً في رأس
      الصفحة، وما في هذا الملف أسماءٌ محلّية تشير إليها. فمالك المنصّة
      حين يغيّر لوناً أو خطاً أو حافّةً من لوحته تتحرّك معه هذه الشاشات
      كما تتحرّك ورقة الهبوط — لا شاشةٌ تتبعه وأخرى تتخلّف عنه.

   والاختبارات لا تُميَّز باللون بل بالاسم وعائلته وشكل المربّع عند
   المرور عليه — اثنان وعشرون لوناً لا تُميَّز بالعين أصلاً، فالتمييز
   الحقيقي في التنظيم لا في الطيف.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* أسماءٌ قديمة أُبقيت لأن مئات المواضع تستعملها — وكلها الآن وكلاء */
  --page:var(--bg-2);
  --card:var(--bg);
  --muted:var(--fg-2);
  --navy:var(--ink);
  --brand:var(--accent);
  --brand-2:var(--accent-ink);
  --brand-soft:var(--accent-soft);
  --brand-ink:var(--accent-ink);
  --amber:var(--gold);
  --logo-grad:var(--grad);
  --brand-grad:var(--grad);
  --ok:var(--accent-ink);      --ok-soft:var(--accent-soft);
  /* ❗ لون النصّ التحذيري كان ‎--gold‎ نفسه، ونسبةُ تباينه على أرضيته
     الفاتحة ٣٫٢٥ — دون حدّ WCAG AA. والذهب لونُ رسمٍ لا لونُ نصّ:
     يُترك للأشرطة والحدود، ويُؤخذ للنصّ ‎--gold-ink‎ المشتقّ منه. */
  --warn:var(--gold-ink);      --warn-soft:var(--gold-soft);
  --danger:#b3261e;            --danger-soft:color-mix(in srgb,#b3261e 9%,var(--bg));
  --sh:var(--sh-2);
  --sh-lift:var(--sh-3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page); color:var(--fg); direction:rtl;
  font-family:var(--font); font-size:var(--t-h3); font-weight:400;
  line-height:var(--lh-body);
  /* الأرقامُ جدوليّةٌ في منصّةٍ نصفُ شاشاتها أرقام: بلا هذا يرقص
     العمودُ يميناً ويساراً كلما تغيّر رقم، فيصعب مسحُه بالعين. */
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* ❗ العناوين بخطِّها ولونِها: خطُّ العناوين غيرُ خطّ المتن (انظر
   theme_display_fonts في theme.php)، ولونُها الكحليُّ --ink لا لونُ
   المتن. وهذا ما يجعل التسلسلَ مسموعاً بلا إطارٍ ولا ظلّ. */
h1,h2,h3,h4{font-family:var(--font-disp);font-weight:700;letter-spacing:-.015em;
  line-height:var(--lh-h);color:var(--ink)}
b,strong{font-weight:600}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:calc(24px * var(--sp)) clamp(14px,3vw,24px) var(--s-8)}
.narrow{max-width:740px}
.muted{color:var(--muted)}
.small{font-size:var(--t-body)}
.hide{display:none!important}

/* ── الرأس ─────────────────────────────── */
header.top{background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.top .in{max-width:var(--maxw);margin:0 auto;padding:var(--s-2) clamp(14px,3vw,24px);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* الشعار لقطةٌ أفقية واحدة — النصب والاسم والوصف بلا تفكّك */
a.logo,.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:var(--t-h2);line-height:1}
.logo .mark{height:38px;width:auto;object-fit:contain;flex:0 0 auto}
.logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ❗ كانت عشرَ أزرارٍ في صندوقٍ رماديّ، والمفتوحُ منها صندوقٌ أبيض
   بظلّ. وعشرةُ صناديقَ متلاصقة تقرؤها العينُ شريطَ أدواتٍ لا فهرساً،
   فتبحث عن الشاشة الحالية بدل أن تراها. والآن: نصٌّ هادئ، والمفتوحُ
   وحده يحمل خطّاً تحته — وهي الإشارة التي يفهمها القارئ بلا تعلّم. */
nav.tabs{display:flex;gap:0;margin-inline-start:auto;flex-wrap:wrap;padding:0;
  background:none;border:0;border-radius:0}
nav.tabs button{background:none;border:0;border-block-end:2px solid transparent;
  padding:var(--s-3) var(--s-3);border-radius:0;cursor:pointer;margin-block-end:-1px;
  font:inherit;font-weight:400;font-size:var(--t-body);color:var(--fg-2);
  transition:color .15s ease,border-color .15s ease;white-space:nowrap}
nav.tabs button:hover{color:var(--ink);border-block-end-color:var(--line-2)}
nav.tabs button.on{background:none;color:var(--ink);font-weight:600;
  border-block-end-color:var(--accent);box-shadow:none}

/* ── البطاقات ──────────────────────────── */
/* البطاقةُ صارت «قسماً»: حدٌّ شعريّ بلا ظلّ، ونَفَسٌ داخليٌّ أوسع.
   والفراغُ هو ما يقول «هذه وحدةٌ واحدة»، لا الإطارُ حولها. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:calc(30px * var(--sp)) calc(30px * var(--sp));
  margin-bottom:calc(20px * var(--sp));box-shadow:none}
.card h2{margin:0 0 var(--s-2);font-size:var(--t-h2);letter-spacing:-.02em}
.card h3{margin:var(--s-6) 0 var(--s-2);font-size:var(--t-h3)}
/* عنوانٌ ثانٍ داخل قسمٍ يسبقه خطٌّ شعريّ يفصله عمّا قبله — بديلُ
   البطاقة الثانية داخل البطاقة الأولى. */
.card h3:not(:first-of-type){padding-block-start:var(--s-5);
  border-block-start:1px solid var(--line)}
.sub{color:var(--muted);font-size:var(--t-body);font-weight:400;margin:0 0 var(--s-4);line-height:1.7}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ── الأزرار ───────────────────────────── */
button.btn,a.btn{
  font-family:var(--font-disp);
  font-weight:500;font-size:var(--t-body);border:1px solid transparent;
  background:var(--accent);color:var(--on-accent);
  padding:var(--s-3) 21px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s cubic-bezier(.2,.9,.3,1),box-shadow .15s,background .15s,border-color .15s
}
button.btn:hover,a.btn:hover{background:var(--accent-ink);transform:translateY(-1px);
  box-shadow:var(--sh-btn)}
button.btn:active{transform:translateY(0)}
button.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:var(--card);color:var(--fg);border-color:var(--line-2);font-weight:500}
.btn.ghost:hover{background:var(--bg-2);border-color:var(--fg-3);box-shadow:none}
.btn.sm{padding:var(--s-2) var(--s-3);font-size:var(--t-body)}
.btn.danger{background:var(--danger)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── الحقول ────────────────────────────── */
label.f{display:block;margin-bottom:var(--s-3)}
label.f b{display:block;font-size:var(--t-body);margin-bottom:var(--s-1);font-weight:700}
label.f b{font-weight:600;color:var(--fg-2)}
input,select,textarea{font:inherit;font-weight:400;width:100%;padding:var(--s-3) var(--s-3);
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);color:var(--fg)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:var(--ring)}

/* ── الجداول ───────────────────────────── */
/* ❗ contain:paint ليست زينةً هنا: صندوقُ تمريرٍ في صفحةٍ من اليمين
   إلى اليسار يُضيف عرضَ محتواه المخفيّ إلى عرضِ الصفحة نفسها في
   بعض المحرّكات، فيظهر تمريرٌ أفقيٌّ في الجوال سببُه جدولٌ مطويّ
   لا يراه أحد. والاحتواءُ يقطع ذلك عند حدّ الصندوق. */
.tw{overflow-x:auto;max-width:100%;contain:paint;
  border:1px solid var(--line);border-radius:var(--r-sm)}
table{width:100%;border-collapse:collapse;font-size:var(--t-body);background:var(--card)}
th,td{padding:var(--s-3) var(--s-3);text-align:right;border-bottom:1px solid var(--line)}
th{background:var(--bg-2);font-weight:600;font-size:var(--t-sm);color:var(--fg-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover td,table tr:hover td{background:var(--bg-2)}
td.num{font-family:ui-monospace,Menlo,monospace;letter-spacing:.09em;font-weight:700;direction:ltr;text-align:right}

/* ── الشارات ───────────────────────────── */
.tag{display:inline-block;padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:600;
  border:1px solid transparent}
.tag.H{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.tag.M{background:var(--bg-3);color:var(--fg-2);border-color:var(--line)}
.tag.L{background:var(--bg-3);color:var(--fg-3);border-color:var(--line)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.danger{background:var(--danger-soft);color:var(--danger)}

/* ── التنبيهات ─────────────────────────── */
.note{border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);font-size:var(--t-body);margin:var(--s-3) 0;border:1px solid;line-height:1.75}
.note.info{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
/* النصّ بـ‎--warn‎ (ذهبٌ داكن يجتاز AA)، والحدّ بـ‎--gold‎ الأصلي:
   الحدُّ رسمٌ يكفيه ٣٫٠، والنصُّ يُقرأ فيلزمه ٤٫٥. */
.note.warn{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 34%,transparent);color:var(--warn)}
.note.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent);color:var(--danger)}
.note.ok{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.note b{display:block;margin-bottom:var(--s-1);font-weight:600}
/* داخل .note كلّ <b> سطرٌ مستقلّ، وأوّلُه عنوان الملاحظة — وهذا مقصود.
   فحين يُراد تشديدُ كلمةٍ **داخل** الجملة (مبلغ، اسم حدث، رقم مرجعي)
   يُستعمل <strong>، وإلا انفرط السطر إلى أسطر ومُزّقت الجملة. */
.note strong{font-weight:700}

/* ── أشرطة النسبة ──────────────────────── */
.bar{background:var(--bg-3);border-radius:var(--r-pill);height:10px;overflow:hidden;min-width:120px}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent);
  transition:width .6s cubic-bezier(.22,1,.36,1)}
.bar.H i{background:var(--accent)} .bar.L i{background:var(--line-2)}

/* ── محرك الأسئلة ──────────────────────── */
.q-head{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);padding:var(--s-3) 0;z-index:10}
.prog{background:var(--bg-3);border-radius:var(--r-pill);height:6px;overflow:hidden;margin-top:var(--s-2)}
.prog i{display:block;height:100%;background:var(--grad);transition:width .35s}
.q-text{font-size:clamp(19px,2.4vw,23px);font-weight:600;line-height:1.65;margin:var(--s-5) 0 var(--s-4);
  text-wrap:pretty}
/* صفُّ متسلسلةٍ أو رموز: يُعرض وحده ومن اليسار لليمين بخطٍّ ثابت،
   فالمتسلسلة «2, 5, 11, ؟» داخل فقرةٍ عربية تنقلب على قارئها */
.opts:not(.stack) .opt{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:var(--t-h3);
  letter-spacing:.04em;direction:ltr;justify-content:flex-end;flex-direction:row-reverse}
.opts:not(.stack) .opt .ol{margin:0}
.q-mono{font-family:var(--mono);font-size:clamp(20px,3vw,27px);font-weight:600;letter-spacing:.14em;
  direction:ltr;text-align:center;padding:var(--s-4) var(--s-3);margin:0 0 var(--s-5);
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
.opts{display:grid;gap:9px}
/* الخيارات القصيرة تُصفّ في عمودين على الشاشة الواسعة، والطويلة تبقى
   عموداً واحداً — قراءةُ أربعة خياراتٍ نصّية بعضها تحت بعض أسرع */
@media(min-width:620px){.opts:not(.stack){grid-template-columns:1fr 1fr}}
.opt{display:block;width:100%;text-align:right;padding:var(--s-4) var(--s-4);border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--card);cursor:pointer;font:inherit;font-weight:500;font-size:var(--t-h3);
  line-height:1.7;transition:border-color .14s,background .14s,box-shadow .14s}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);font-weight:600;
  box-shadow:var(--ring-in)}
/* حرف الخيار في بنود القدرة — ليُراجَع البند بعد التطبيق بلفظٍ واحد */
.opt .ol{display:inline-grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
  margin-inline-end:var(--s-3);border-radius:var(--r-sm);font-style:normal;font-size:var(--t-sm);font-weight:600;
  background:var(--bg-3);border:1px solid var(--line);color:var(--fg-2);vertical-align:middle;
  transition:background .14s,color .14s,border-color .14s}
.opt.sel .ol{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ── التقرير ───────────────────────────── */
.dim{border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4);margin-bottom:var(--s-3);background:var(--card)}
.dim{border-radius:var(--r)}
.dim.H{border-inline-start:4px solid var(--accent)}
.dim.M{border-inline-start:4px solid var(--accent-line)}
.dim.L{border-inline-start:4px solid var(--line-2)}
.dim .hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--s-2)}
.dim .hd b{font-size:var(--t-h3);font-weight:800}
.teach{background:var(--brand-soft);border-radius:var(--r-sm);padding:var(--s-3) var(--s-3);margin:var(--s-2) 0;font-size:var(--t-body)}
.teach:before{content:"📖 قراءة المعلم";display:block;font-weight:800;font-size:var(--t-sm);color:var(--brand-ink);margin-bottom:var(--s-1)}
ul.acts{margin:var(--s-2) 0 0;padding-inline-start:20px}
ul.acts li{margin-bottom:var(--s-1);font-size:var(--t-body)}
.acts-t{font-weight:800;font-size:var(--t-sm);color:var(--ok);margin-top:var(--s-3)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-3) var(--s-4);text-align:center}
.stat b{display:block;font-size:var(--t-h1);font-weight:800;color:var(--brand-ink);line-height:1.3;font-variant-numeric:tabular-nums}
.stat span{font-size:var(--t-sm);color:var(--muted)}
.swatch{display:inline-block;width:12px;height:12px;border-radius:var(--r-sm);vertical-align:middle;background:var(--brand)}

/* ══ ترويسة التقرير — الشعار ظاهر على الشاشة وفي الطباعة ══ */
.rpt-head{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px var(--s-5);margin-bottom:var(--s-4);box-shadow:var(--sh);position:relative;overflow:hidden}
.rpt-head:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--grad)}
.rpt-brand{display:flex;align-items:center;gap:14px;padding-bottom:var(--s-3);border-bottom:2px solid var(--line);margin-bottom:var(--s-3)}
.rpt-brand img{height:62px;width:auto;object-fit:contain;flex:0 0 auto}
.rpt-brand picture{display:flex;flex:0 0 auto}
img.code-mark{width:54px;height:54px;object-fit:contain;margin-inline:auto}
.rpt-brand .nm{font-size:var(--t-h2);font-weight:800;color:var(--navy);line-height:1.3}
.rpt-brand .sl{font-size:var(--t-sm);color:var(--muted);font-weight:600}
.rpt-brand .who{margin-inline-start:auto;text-align:left;font-size:var(--t-sm);color:var(--muted);line-height:1.7}
.rpt-meta{display:flex;gap:26px;flex-wrap:wrap}
.rpt-meta div{min-width:110px}
.rpt-meta span{display:block;font-size:var(--t-sm);color:var(--muted);font-weight:600}
.rpt-meta b{display:block;font-size:var(--t-h3);font-weight:800;color:var(--ink)}

footer.f{text-align:center;color:var(--muted);font-size:var(--t-sm);padding:28px var(--s-4);border-top:1px solid var(--line);margin-top:var(--s-6)}

/* ══ الطباعة — ورقة A4 نظيفة بترويسة تحمل الشعار ══════════ */
@page{size:A4;margin:14mm 12mm}
@media print{
  header.top,nav.tabs,.no-print,footer.f,.subtabs,.assignbar{display:none!important}
  body{background:#fff;font-size:12pt;line-height:1.6}
  .wrap{max-width:none;padding:0}
  .card{box-shadow:none;border:1px solid #d8dee8;break-inside:avoid;page-break-inside:avoid;margin-bottom:var(--s-2)}
  .dim,.axis,.chart,.note{break-inside:avoid;page-break-inside:avoid}
  .rpt-head{box-shadow:none;border:1px solid #d8dee8}
  .rpt-head:before{background:#0f4f75}
  .print-only{display:block!important}
  a[href]:after{content:""}
}
.print-only{display:none}

/* ══ الحركة ════════════════════════════════════════════════ */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.card,.tile,.dim,.axis{animation:rise .42s cubic-bezier(.22,1,.36,1) both}
.grid > *:nth-child(2){animation-delay:.04s}
.grid > *:nth-child(3){animation-delay:.08s}
.grid > *:nth-child(4){animation-delay:.12s}
.grid > *:nth-child(n+5){animation-delay:.16s}
.opt.sel{animation:pop .22s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .opt:hover,button.btn:hover,.tile:hover{transform:none}
}

/* ══ مربعات الاختبارات — لون واحد، والتمييز بالحركة ═══════ */
/* ❗ كانت مربّعاتٍ: بطاقةٌ لكلِّ أداةٍ فيها رقمٌ في مُربَّع، وأربعةُ
   أرقامٍ تحت خطٍّ منقّط، وحدٌّ علويٌّ ملوّنٌ بثلاثة بكسلات، وظلٌّ
   يتمدّد عند المرور. وثلاثون منها في شاشةٍ واحدة تُقرأ جداراً لا
   قائمة. قالها المالك: «تستخدم أيقونات ومربعات كبيرة وهذا لا
   أريده». فصارت صفوفاً: اسمٌ وسطرُ وصف، والأرقامُ سطرٌ واحدٌ خافت،
   والفاصلُ خطٌّ شعريّ لا إطار. واللونُ باقٍ حيث يحمل معنىً — في
   عنوان العائلة — لأن لونَ العائلة معلومةٌ لا زينة (القاعدة ④). */
.tiles{display:flex;flex-direction:column;gap:0;border-block-start:1px solid var(--line)}
.tile{
  position:relative;display:flex;flex-direction:column;gap:4px;
  background:transparent;border:0;border-block-end:1px solid var(--line);border-radius:0;
  padding:var(--s-4) 0;cursor:pointer;text-align:start;font:inherit;color:inherit;
  transition:background .15s ease;
}
/* الشريط العلوي يمتدّ عند المرور — إشارة الحالة بدل اللون */
/* ❗ نُزع شريطٌ يزحف من الحافّة وهالةٌ تتمدّد من الزاوية عند المرور.
   كلاهما لا يقول شيئاً عن الأداة، وكلاهما يرسم في كل إطار. والحدُّ
   الذي يتغيّر لونه يؤدّي ما يؤدّيانه: أن يعرف المستعمل أين مؤشّره. */
/* لونُ العائلة يرثه المربّع من قسمه (--f)، فتُقرأ الشبكةُ عائلاتٍ
   لا خمسةً وعشرين مربّعاً متشابهاً. والحافّةُ العلوية هي الحامل:
   ثلاثةُ بكسلات تكفي للتعرّف ولا تزاحم النصّ. */
.tile:hover{background:color-mix(in srgb,var(--f,var(--accent)) 4%,transparent)}
.tile:focus-visible{outline:2px solid var(--f,var(--accent));outline-offset:-2px}

.tile .t-top{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
/* الرقمُ تسلسلٌ لا وسام: نصٌّ خافتٌ بعرضٍ ثابتٍ تستقيم به الحافّة */
.tile .t-no{flex:0 0 auto;min-width:2.2ch;font-family:var(--mono);font-size:var(--t-sm);
  color:var(--f,var(--muted));font-weight:600;font-variant-numeric:tabular-nums}
.tile h3{margin:0;font-size:var(--t-body);font-weight:600;color:var(--fg);line-height:1.5}
.tile p{margin:0;padding-inline-start:calc(2.2ch + var(--s-3));
  font-size:var(--t-sm);font-weight:400;color:var(--muted);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* الأرقامُ سطرٌ واحدٌ خافتٌ يفصله نقطة، لا أربعةُ أعمدةٍ تحت خطّ */
.tile .t-nums{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:2px;
  padding-inline-start:calc(2.2ch + var(--s-3));font-size:var(--t-cap);color:var(--muted)}
.tile .t-nums div{display:inline-flex;align-items:baseline;gap:4px}
.tile .t-nums div+div::before{content:"·";margin-inline-end:var(--s-3);color:var(--line-2)}
.tile .t-nums b{font-weight:600;color:var(--fg-2);font-variant-numeric:tabular-nums}
.tile .t-nums span{color:var(--muted)}
.tile .t-lock{font-size:var(--t-cap);color:var(--warn);font-weight:500;white-space:nowrap}

/* اختيار الاختبارات للتكليف: علامةُ صحٍّ صغيرةٌ في أوّل السطر */
.tile.pick{user-select:none;padding-inline-start:26px}
.tile.pick .t-check{position:absolute;inset-block-start:var(--s-4);inset-inline-start:0;
  width:16px;height:16px;display:grid;place-items:center;color:var(--brand)}
.tile.pick .t-check .ic{width:15px;height:15px}
.tile.on{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.tile.off{opacity:.55}
.tile.off:hover{opacity:1}
.mini{width:40px}

/* ══ عائلات الاختبارات ══════════════════════════════════ */
.fam{margin-bottom:28px;--f:var(--accent)}
.fam-h{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin:0 0 var(--s-2);
  padding-bottom:var(--s-2)}
.fam-h h3{margin:0;font-size:var(--t-body);font-weight:700;color:var(--f);
  letter-spacing:.01em}
/* ❗ الأيقونةُ بقيت ومربّعُها ذهب. والمربّعُ هو ما اشتكى منه المالك،
   أمّا الأيقونةُ فترميزٌ ثانٍ لا زينة: من لا يميّز الأزرق من
   البنفسجي — ومن يطبع بالأبيض والأسود — يقرؤها هي والاسم (القاعدة
   ④ في AGENTS.md). فحذفُها كان سيشتري هدوءاً بثمنِ من لا يرى اللون. */
.fam-ic{display:inline-grid;place-items:center;flex:0 0 auto;color:var(--f)}
.fam-ic .ic{width:15px;height:15px}

/* ══ مؤشرات ═══════════════════════════════════════════════ */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));margin-bottom:var(--s-4)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4) var(--s-4);
  position:relative;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.kpi:hover{border-color:var(--accent-line);box-shadow:var(--shadow)}
.kpi:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--accent)}
.kpi b{display:block;font-family:var(--font-disp);
  font-size:clamp(30px,3.8vw,42px);font-weight:700;color:var(--ink);line-height:1.15;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi span{font-size:var(--t-sm);color:var(--fg-2);font-weight:400}
.kpi em{font-style:normal;font-size:var(--t-cap);color:var(--accent-ink);font-weight:600}

/* ══ الرسوم ═══════════════════════════════════════════════ */
.chart{margin:var(--s-4) 0}
.chart h4{margin:0 0 var(--s-1);font-size:var(--t-body);font-weight:800}
.chart .cap{margin:0 0 var(--s-3);font-size:var(--t-sm);color:var(--muted);font-weight:500}
.crow{display:grid;grid-template-columns:minmax(120px,210px) 1fr auto;gap:11px;align-items:center;
  margin-bottom:var(--s-2);font-size:var(--t-body)}
.crow > .lab{text-align:left;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctrack{background:var(--bg-3);border-radius:var(--r-sm);height:22px;display:flex;overflow:hidden;position:relative}
.ctrack i{height:100%;display:block;transition:width .55s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 0 1px var(--card) inset}
.ctrack i:first-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.ctrack i:last-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.ctrack i:only-child{border-radius:var(--r-sm)}
.cval{font-variant-numeric:tabular-nums;color:var(--muted);font-size:var(--t-sm);font-weight:700;min-width:46px;text-align:left}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:var(--s-1) 0 var(--s-3);font-size:var(--t-sm);color:var(--muted);font-weight:600}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:var(--r-sm);display:inline-block}
.seg-tip{cursor:default}

/* ══ شريط تأكيد البريد ════════════════════════════════════
   فوق كل شاشة، بلا زرّ إغلاق: حسابٌ ناقصٌ يصمت عنه صاحبُه يبقى
   ناقصاً. ويختفي وحده لحظةَ التأكيد. */
.vbar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);font-size:var(--t-sm);line-height:1.7;
  background:var(--gold-soft);color:var(--gold-ink);
  border-bottom:1px solid color-mix(in srgb,var(--gold) 34%,transparent)}
.vbar.ok{background:var(--accent-soft);color:var(--accent-ink);border-bottom-color:var(--accent-line)}
.vbar.bad{background:var(--danger-soft);color:var(--danger);
  border-bottom-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.vbar > span{flex:1 1 320px;min-width:0}
.vbar b{font-weight:800}
.vbar .ic{flex:0 0 auto}
.vbar .btn{flex:0 0 auto}
@media print{.vbar{display:none!important}}
/* درجاتُ السلّم مصنّفةً: الشريط يأخذ لونه من السمة لا من سطرٍ مكتوب */
.bar-s2{background:var(--c2)} .bar-s3{background:var(--c3)}
.bar-s4{background:var(--c4)} .bar-s5{background:var(--c5)}
.legend i.bar-s2,.legend i.bar-s3,.legend i.bar-s5{box-shadow:0 0 0 1px var(--line-2) inset}
.seg-tip:focus-visible{outline:2px solid var(--fg);outline-offset:1px}

/* ══ الرسوم التفاعلية ═════════════════════════════════════
   ثلاث قواعد مكتوبة هنا لأنها تُنقض بالسهو:
   ① البياناتُ أغمق ما في الشكل، والشبكةُ والمحاور أخفت ما فيه.
   ② التلميحةُ فوق كل شيء (z) وخارج تدفّق الصفحة (fixed) وإلا
      قصّها أوّلُ عنصرٍ فيه overflow:hidden.
   ③ لا حركةَ لمن طلب تقليلها — والمنحنى يُرسم مرّةً بلا رسوّ. */
/* ❗ min-width:0 على أبناء الشبكة ليست تفصيلاً: قيمةُ min-width
   الافتراضية في عنصر شبكةٍ هي auto، فلا ينكمش دون عرض محتواه —
   وجدولٌ عرضُه ٨٣٤ داخل صندوقِ تمريرٍ يوسّع مسارَ الشبكة نفسَه،
   فتتّسع الصفحةُ في الجوال بسبب جدولٍ مطويٍّ لا يراه أحد.
   وصندوقُ التمرير لا ينفع وحده ما دام مساره يتمدّد له. */
.board-charts{display:grid;gap:var(--s-5)}
.board-charts>*,.chart{min-width:0}
.board-charts.loading{opacity:.45;transition:opacity .2s}

.c-svg{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.c-grid{stroke:var(--c-grid);stroke-width:1}
.c-ax{fill:var(--fg-3);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.c-area{fill:var(--c2);opacity:.5}
.c-line{fill:none;stroke:var(--c5);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.c-hair{stroke:var(--fg-3);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.c-dot{fill:var(--c5);stroke:var(--card);stroke-width:2;pointer-events:none}

/* شريطُ لوحة المفاتيح: لا يُرى حتى يُركَّز — ومن يصل إليه بالـTab
   يجد الطريق نفسه الذي تجده الفأرة، لا بديلاً مبتوراً عنه. */
.c-kb{margin-top:var(--s-2);font-size:var(--t-cap);color:transparent;height:1px;overflow:hidden;
  border-radius:var(--r-sm);text-align:center;font-weight:700}
.c-kb:focus-visible{height:auto;color:var(--accent-ink);background:var(--accent-soft);
  padding:var(--s-1) var(--s-3);outline:2px solid var(--accent);outline-offset:2px}

.c-filters{display:flex;gap:6px;flex-wrap:wrap}
.c-range{font:inherit;font-size:var(--t-sm);font-weight:700;cursor:pointer;
  background:var(--card);color:var(--muted);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:5px 13px;transition:border-color .15s,color .15s,background .15s}
.c-range:hover{border-color:var(--accent-line);color:var(--ink)}
.c-range.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.c-range:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── الخريطة الحرارية ─────────────────────────────────────
   فجوةُ ٢px بين الخلايا من لون السطح لا من لونٍ ثالث: الحدُّ الملوّن
   يضيف حبراً لا معنى له، والفجوةُ وحدها تكفي لفصل خليّةٍ عن جارتها. */
.heat{display:grid;grid-template-columns:minmax(92px,150px) repeat(var(--cols),minmax(52px,1fr));
  gap:2px;overflow-x:auto;padding-bottom:2px}
.heat > span{display:flex;align-items:center;justify-content:center;min-height:38px;
  font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums;border-radius:var(--r-sm)}
.h-ax{font-size:var(--t-cap);font-weight:700;color:var(--muted);text-align:center;line-height:1.35;
  padding:0 4px;overflow:hidden}
.h-row{justify-content:flex-start!important;font-weight:700;color:var(--ink);
  padding-inline-end:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-c{cursor:default;color:var(--fg);background:var(--c-none);
  box-shadow:0 0 0 1px var(--c-grid) inset;transition:transform .12s}
.h-c:hover,.h-c:focus-visible{transform:scale(1.06);outline:2px solid var(--fg);outline-offset:-2px;z-index:1}
.h-c.s0{color:var(--fg-3)}
.h-c.s1{background:var(--c1)}
.h-c.s2{background:var(--c2)}
.h-c.s3{background:var(--c3)}
/* الدرجتان الغامقتان تحملان نصّاً فاتحاً — والعكسُ يجعل الرقم غير مقروء */
.h-c.s4{background:var(--c4);color:#fff}
.h-c.s5{background:var(--c5);color:#fff}
/* حدٌّ شعريّ على مربّعات الإيضاح: أفتحُ درجةٍ في السلّم تختفي على
   بطاقةٍ بيضاء، فيبدو الإيضاحُ أربعَ درجاتٍ لا خمساً. */
.heat-lg i{box-shadow:0 0 0 1px var(--line-2) inset}
.heat-lg i.s1{background:var(--c1)} .heat-lg i.s2{background:var(--c2)}
.heat-lg i.s3{background:var(--c3)} .heat-lg i.s4{background:var(--c4)}
.heat-lg i.s5{background:var(--c5)}

.c-tbl{margin-top:var(--s-3)}
.c-tbl summary{cursor:pointer}
.c-tbl caption{text-align:start;font-size:var(--t-cap);color:var(--muted);padding-bottom:6px}

/* التلميحة */
.ctip{position:absolute;top:0;left:0;z-index:2000;pointer-events:none;
  background:var(--dark);color:var(--on-dark);border-radius:var(--r-sm);
  padding:8px 11px;font-size:var(--t-sm);line-height:1.5;max-width:260px;
  box-shadow:0 10px 30px -10px rgba(11,18,32,.55)}
.ctip[hidden]{display:none}
.ctip .ct-h{font-weight:800;margin-bottom:4px;font-size:var(--t-cap);opacity:.82}
.ctip .ct-r{display:flex;align-items:baseline;gap:7px}
.ctip .ct-r i{width:12px;height:2px;border-radius:2px;flex:0 0 auto;align-self:center}
/* القيمةُ هي البارزة والاسمُ ثانويّ: القارئ هنا يعرف السلسلة ويريد الرقم */
.ctip .ct-r b{font-weight:800;font-variant-numeric:tabular-nums}
.ctip .ct-r span{opacity:.75;font-weight:600}

@media (prefers-reduced-motion:reduce){
  .ctrack i{transition:none}
  .h-c{transition:none}
  .board-charts.loading{transition:none}
}
@media print{.c-filters,.c-kb{display:none!important}.c-tbl{display:block}.c-tbl[open] summary{display:none}}

/* ══ المحاور — الملف الشامل ═══════════════════════════════ */
.axis{border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4) var(--s-4);margin-bottom:var(--s-3);background:var(--card)}
.axis .ah{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--s-2)}
.axis .ah b{font-size:var(--t-h3);font-weight:800}
.axis .ad{font-size:var(--t-sm);color:var(--muted);font-weight:500}
.axis .at{margin-top:var(--s-2);font-size:var(--t-body)}
.axis{border-radius:var(--r)}
.axis.H{border-inline-start:4px solid var(--accent)}
.axis.M{border-inline-start:4px solid var(--accent-line)}
.axis.L{border-inline-start:4px solid var(--gold)}
.marks{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.marks .mark{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4)}
.marks .mark span{display:block;font-size:var(--t-sm);color:var(--brand-ink);font-weight:700;opacity:.75}
.marks .mark b{display:block;font-size:var(--t-h3);font-weight:800;color:var(--brand-ink);line-height:1.5}
.summary{background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r);padding:var(--s-4) 20px;font-size:var(--t-h3);line-height:1.85;font-weight:500;color:var(--accent-ink)}

/* ══ الفصول ═══════════════════════════════════════════════ */
.classes{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cls-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);
  cursor:pointer;text-align:right;font:inherit;color:inherit;box-shadow:var(--sh);
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.cls-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--brand)}
.cls-card h3{margin:0 0 var(--s-1);font-size:var(--t-h3);font-weight:800}
.cls-card .meta{font-size:var(--t-sm);color:var(--muted);font-weight:600}
.cls-card .prog{margin-top:var(--s-3)}
.balbar{height:8px;border-radius:var(--r-pill);background:var(--bg-3);overflow:hidden;margin-top:var(--s-1)}
.balbar i{display:block;height:100%;border-radius:var(--r-pill)}
.bal-ok i{background:var(--accent)} .bal-warn i{background:var(--gold)} .bal-danger i{background:var(--danger)}
.verdict{border-radius:var(--r);padding:var(--s-4) var(--s-4);border:1px solid;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.verdict .score{font-size:var(--t-display);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.verdict.ok{background:var(--ok-soft);border-color:#a7f3d0;color:var(--ok)}
.verdict.warn{background:var(--warn-soft);border-color:#fbdba7;color:var(--warn)}
.verdict.danger{background:var(--danger-soft);border-color:#fbc9c9;color:var(--danger)}
.mini{display:inline-block;width:30px;height:7px;border-radius:var(--r-sm);background:var(--bg-3);position:relative;vertical-align:middle}
.mini i{position:absolute;inset:0 auto 0 0;border-radius:var(--r-sm)}
.mini.H i{background:var(--accent)} .mini.M i{background:var(--accent-line)} .mini.L i{background:var(--gold)}

/* ══ الرصيد ═══════════════════════════════════════════════ */
.plan{border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center;
  transition:transform .18s,border-color .18s,box-shadow .18s;background:var(--card)}
.plan:hover{transform:translateY(-2px);border-color:var(--accent-line);box-shadow:var(--shadow)}
.plan.best{border-color:var(--accent);position:relative}
.plan.best:before{content:"الأكثر طلباً";position:absolute;top:-12px;inset-inline:0;margin-inline:auto;
  width:fit-content;background:var(--accent);color:var(--on-accent);font-size:var(--t-cap);padding:var(--s-1) var(--s-3);
  border-radius:var(--r-pill);font-weight:600}
.plan .qty{font-size:var(--t-h1);font-weight:700;color:var(--fg);line-height:1.2;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.plan .price{font-size:var(--t-h2);font-weight:800;margin:var(--s-1) 0 var(--s-1)}
.plan .per{font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s-3);font-weight:600}
.balance{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);
  padding:20px;margin-bottom:var(--s-4);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.balance .big{font-size:clamp(36px,5vw,46px);font-weight:700;color:var(--accent-ink);line-height:1.1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}

.assignbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4);
  box-shadow:var(--sh);margin-bottom:var(--s-4);position:sticky;top:64px;z-index:20}
.assignbar label.f{margin:0;flex:1;min-width:210px}
.assignbar .cnt{font-weight:800;font-size:var(--t-h2);color:var(--brand-ink);font-variant-numeric:tabular-nums}

.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s-4)}
.subtabs button{font:inherit;font-weight:500;font-size:var(--t-body);padding:var(--s-2) var(--s-4);
  border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--line-2);background:var(--card);color:var(--fg-2);transition:.15s}
.subtabs button:hover{border-color:var(--fg-3);color:var(--fg)}
.subtabs button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
tr.off td{opacity:.5}

/* ══ صفحة الدخول ══════════════════════════════════════════ */
.hero{text-align:center;margin-bottom:var(--s-5)}
/* ❗ الشعارُ كان يملأ أوّلَ شاشةٍ من صفحة الدخول والتسجيل: ٣٣٠
   بكسلاً فوق نموذجٍ لم يظهر منه سطر. ومن جاء ليُنشئ حساباً يعرف
   أين هو — الشعارُ تعريفٌ لا افتتاحيّة. */
.hero .logo-full{max-width:min(190px,52%);height:auto;display:block;margin:0 auto var(--s-2)}
.hero p{margin:0;font-size:var(--t-body);font-weight:500;max-width:54ch;margin-inline:auto}
.hero + .card{border-top:3px solid var(--accent)}

/* ══ دخول الطالب — كود رقمي ولوحة أرقام ═══════════════════ */
.code-input{font-size:var(--t-h1);letter-spacing:.22em;text-align:center;font-weight:800;
  font-family:ui-monospace,Menlo,monospace;direction:ltr;padding:var(--s-3) var(--s-2);border-width:2px}
/* لوحة الأرقام بترتيب الهاتف (١٢٣ من اليسار) — هكذا يعرفها كل مستخدم،
   ولأن الأرقام تُقرأ من اليسار حتى في النص العربي */
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:var(--s-4);
  max-width:340px;margin-inline:auto;direction:ltr}
.pad button{font:inherit;font-size:var(--t-h1);font-weight:800;padding:var(--s-4) 0;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
  transition:transform .12s,background .12s,border-color .12s;font-variant-numeric:tabular-nums}
.pad button:hover{background:var(--accent-soft);border-color:var(--accent)}
.pad button:active{transform:scale(.94)}
.pad button.act{font-size:var(--t-h3);font-weight:700;direction:rtl}
.pad button.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pad button.go:hover{background:var(--brand-2)}
.codebig{font-family:ui-monospace,Menlo,monospace;font-size:var(--t-h2);font-weight:800;
  letter-spacing:.08em;direction:ltr;display:inline-block}

@media(max-width:640px){
  .q-text{font-size:var(--t-h2)}
  .wrap{padding:var(--s-3) var(--s-3) 52px}
  .card{padding:var(--s-4)}
  .rpt-brand .who{margin-inline-start:0;text-align:right;width:100%}
}


/* ══ خطة الدعم — بنود قابلة للتعليم ══════════════════════ */
.ptask{display:flex;gap:11px;align-items:flex-start;padding:var(--s-3) var(--s-3);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:var(--s-2);background:var(--card);cursor:pointer;transition:.15s}
.ptask:hover{border-color:var(--brand);background:var(--brand-soft)}
.ptask input{width:20px;height:20px;flex:0 0 auto;margin-top:var(--s-1);accent-color:var(--brand)}
.ptask span{flex:1}
.ptask b{display:block;font-weight:600;font-size:var(--t-body);line-height:1.6}
.ptask em{display:block;font-style:normal;font-size:var(--t-sm);color:var(--muted);margin-top:var(--s-1)}
.ptask.on{background:var(--ok-soft);border-color:#a7f3d0}
.ptask.on b{text-decoration:line-through;opacity:.62}

/* أعمدة المقارنة القبلية البعدية */
table td.num{font-variant-numeric:tabular-nums}


/* ══ اختيار طريقة الدفع ═══════════════════════════════════ */
.paym{display:grid;gap:10px;margin:var(--s-3) 0;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pay-opt{display:flex;align-items:center;gap:13px;text-align:right;font:inherit;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:var(--s-4) var(--s-4);
  transition:transform .16s cubic-bezier(.22,1,.36,1),border-color .16s,box-shadow .16s}
.pay-opt:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh-lift)}
.pay-opt .pi{font-size:var(--t-h1);flex:0 0 auto}
/* النصّ وحده هو ما يتمدّد — الشارة تبقى بحجمها وإلا امتدّت شريطاً فارغاً */
.pay-opt>span:not([class]){flex:1 1 auto;min-width:0}
.pay-opt .tag{flex:0 0 auto;align-self:center;white-space:nowrap}

/* ── حاوية أزرار PayPal المدمجة ──────────────────────────
   أزرار PayPal تُرسم داخل إطارات (iframes) لا نملك تنسيقها، فما
   نملكه هو المساحة حولها: عرضٌ محدود كي لا يمتدّ الزر شريطاً عبر
   الشاشة، واتجاه LTR لأن الزر نفسه لاتينيّ التخطيط مهما كانت لغة
   الصفحة. ولا إطار ولا ظلّ من عندنا فوق إطار PayPal — طبقتان من
   الحدود حول زرٍّ واحد هي بالضبط ما يجعل الواجهة تبدو مركّبة. */
.ppbox{max-width:420px;margin:var(--s-3) 0 0;direction:ltr}
.ppslot+.ppslot{margin-top:var(--s-2)}
.ppload{color:var(--muted);font-size:var(--t-sm);padding:var(--s-3) 0;direction:rtl;text-align:right}
.ppbox .note{direction:rtl;text-align:right}
/* زرّ المخرج الاحتياطي يبدأ سطراً جديداً: تركُه في ذيل الجملة
   يُلصقه بحافةِ السطر فيبدو تائهاً لا مقصوداً. */
.ppbox .note .btn{display:block;width:fit-content;margin-top:var(--s-2)}
.pp-done{animation:pp-in .24s cubic-bezier(.22,1,.36,1) both}
@keyframes pp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pp-done{animation:none}}

/* ── اختيار الدور عند التسجيل ───────────────────────────── */
.roles{display:grid;gap:10px;margin:var(--s-3) 0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.role-opt{display:flex;align-items:flex-start;gap:12px;text-align:right;font:inherit;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:var(--s-3) var(--s-4);
  transition:border-color .16s,box-shadow .16s,transform .16s}
.role-opt:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh-lift)}
.role-opt.on{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:var(--ring-in)}
.role-opt .ri{font-size:var(--t-h2);flex:0 0 auto;line-height:1.2}
.role-opt>span:not([class]){flex:1 1 auto;min-width:0}
.role-opt b{display:block;font-weight:800;font-size:var(--t-body)}
.role-opt em{display:block;font-style:normal;font-size:var(--t-sm);color:var(--muted);margin-top:var(--s-1);line-height:1.6}

/* ── لوحة مشاركة رابط الاختبار ──────────────────────────── */
.sheet-bg{position:fixed;inset:0;z-index:1000;background:rgba(6,15,24,.55);
  display:flex;align-items:center;justify-content:center;padding:var(--s-4);overflow:auto}
.sheet{background:var(--card);border-radius:var(--r);padding:var(--s-5);width:min(560px,100%);
  box-shadow:0 24px 60px -20px rgba(11,18,32,.5);max-height:92vh;overflow:auto}
.sheet h3{margin-top:0}
.linkbox input{width:100%;font:600 13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  direction:ltr;text-align:left;padding:var(--s-3) var(--s-3);border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg);color:var(--ink)}
.qrbox{text-align:center;margin:var(--s-3) 0 var(--s-1)}
.qrbox canvas{border:1px solid var(--line);border-radius:var(--r);background:#fff;max-width:100%;height:auto}
@media print{.sheet-bg{display:none!important}}
.pay-opt b{display:block;font-weight:800;font-size:var(--t-body)}
.pay-opt em{display:block;font-style:normal;font-size:var(--t-sm);color:var(--muted);margin-top:var(--s-1)}

/* ── الانتقال بين الشاشات ─────────────────────────────────
   حركة قصيرة (٢٢٠ms) ومنزلقة قليلاً: الغرض أن تُدرك العين أن شاشةً
   استُبدلت، لا أن تنتظر انتهاء عرض. وتُلغى تماماً لمن يطلب تقليل
   الحركة، ولمن يطبع الصفحة. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root){animation:vt-out .18s ease both}
  ::view-transition-new(root){animation:vt-in .22s cubic-bezier(.22,1,.36,1) both}
  @keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
}
@media print{::view-transition-group(*){animation:none!important}}


/* ══ لوحة المظهر — لمالك المنصّة ═══════════════════════════
   منتقي اللون ومربّع النصّ جنباً إلى جنب: من يعرف رمز لونه يكتبه،
   ومن لا يعرفه يختاره بالعين — وكلاهما يكتب في الحقل نفسه. */
.clr{display:flex;gap:9px;align-items:center}
.clr input[type=color]{flex:0 0 auto;width:46px;height:42px;padding:var(--s-1);cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card)}
.clr .hex{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.05em;direction:ltr;text-align:left;
  text-transform:lowercase}
label.f em{display:block;margin-top:var(--s-1);font-style:normal;line-height:1.6}

input[type=range]{width:100%;accent-color:var(--accent);padding:0;border:0;background:none}

.secs{display:grid;gap:8px}
.secrow{display:flex;align-items:center;gap:11px;padding:var(--s-3) var(--s-3);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.secrow .h{color:var(--fg-3);font-size:var(--t-body);cursor:grab}
.secrow b{font-weight:500;font-size:var(--t-body)}
.secrow.off{opacity:.62;background:var(--bg-2)}


/* ══ لوحة الحساب ══════════════════════════════════════════
   كشفُ حسابٍ لا لوحةَ عمل: بطاقةُ هويةٍ في أعلاها، ثم أرقامٌ،
   ثم جداولُ تُقرأ ولا تُملأ. */
.acc-top{display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  padding-bottom:var(--s-4);border-bottom:1px solid var(--line);margin-bottom:var(--s-4)}
.acc-av{flex:0 0 auto;width:52px;height:52px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);
  font-size:var(--t-h2);font-weight:700;line-height:1}
.acc-facts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.acc-facts>div{min-width:0}
.acc-facts span{display:block;font-size:var(--t-sm);color:var(--fg-3);font-weight:500}
.acc-facts b{display:block;font-size:var(--t-body);font-weight:600;line-height:1.6;
  overflow-wrap:anywhere}
.acc-facts em{display:block;font-style:normal;font-size:var(--t-cap);font-weight:500;margin-top:var(--s-1)}
.ok-i{color:var(--accent-ink)}

/* ما تحتفظ به المنصّة — أربع حقائق لا فقرة اعتذار */
.datagrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));
  margin-bottom:var(--s-1)}
.datagrid>div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4)}
.datagrid b{display:block;font-weight:600;font-size:var(--t-body);line-height:1.6;overflow-wrap:anywhere}
.datagrid span{display:block;font-size:var(--t-sm);color:var(--fg-2);line-height:1.65;margin-top:var(--s-1)}

/* اسمٌ يُضغط داخل جدول — زرٌّ بهيئة رابط لا زرٌّ بإطار */
button.linkish{font:inherit;font-weight:600;background:none;border:0;padding:0;cursor:pointer;
  color:var(--accent-ink);text-align:start;text-decoration:underline;
  text-decoration-color:var(--accent-line);text-underline-offset:3px}
button.linkish:hover{text-decoration-color:var(--accent)}

/* شريحةُ أداةٍ لم تُقَس بعد */
button.chip{font:inherit;font-weight:500;font-size:var(--t-sm);cursor:pointer;padding:var(--s-2) var(--s-3);
  border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--card);color:var(--fg-2);
  transition:border-color .15s,color .15s,background .15s}
button.chip:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}

td.num.up{color:var(--accent-ink)}
td.num.down{color:var(--fg-2)}


/* ══ زرّ البحث في الرأس ═══════════════════════════════════ */
button.srch{display:flex;align-items:center;gap:9px;font:inherit;font-size:var(--t-sm);cursor:pointer;
  color:var(--fg-3);background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);min-width:150px;
  transition:border-color .15s,color .15s,background .15s}
button.srch:hover{border-color:var(--accent-line);color:var(--fg-2);background:var(--card)}
button.srch .srch-t{flex:1;text-align:start}
button.srch kbd,.pal kbd{font-family:var(--mono);font-size:var(--t-cap);line-height:1;padding:var(--s-1) var(--s-1);
  border:1px solid var(--line-2);border-block-end-width:2px;border-radius:var(--r-sm);
  background:var(--card);color:var(--fg-3);white-space:nowrap}
@media(max-width:820px){button.srch{min-width:0;padding:var(--s-2) var(--s-2)}
  button.srch .srch-t,button.srch kbd{display:none}}

/* ══ لوحة البحث ═══════════════════════════════════════════
   تُفتح فوق الشاشة كلها لأن المقصود قطعُ ما يفعله المستخدم
   وإيصاله إلى وجهةٍ واحدة — لا إضافةُ لوحةٍ جانبية يقرؤها. */
.pal-bg{position:fixed;inset:0;z-index:1200;background:rgba(6,15,24,.5);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(14px,10vh,110px) var(--s-4) var(--s-4);overflow:auto;
  animation:palIn .16s ease both}
.glass .pal-bg{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@keyframes palIn{from{opacity:0}to{opacity:1}}
.pal{width:min(620px,100%);background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--sh-lift);overflow:hidden;
  animation:palUp .2s cubic-bezier(.2,.9,.3,1) both}
.glass .pal{background:var(--glass);backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 var(--glass-line),var(--sh-lift)}
@keyframes palUp{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.pal-in{display:flex;align-items:center;gap:11px;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
.pal-ic{flex:0 0 auto;width:18px;height:18px;color:var(--fg-3)}
.pal-in input{flex:1;border:0;background:none;font:inherit;font-size:var(--t-h3);padding:0;color:var(--fg)}
.pal-in input:focus{outline:none;box-shadow:none}
.pal-res{max-height:min(52vh,420px);overflow:auto;padding:var(--s-2)}
.pal-row{display:flex;align-items:center;gap:12px;width:100%;text-align:start;font:inherit;
  cursor:pointer;background:none;border:1px solid transparent;border-radius:var(--r-sm);
  padding:var(--s-2) var(--s-3);color:inherit}
.pal-row.on{background:var(--accent-soft);border-color:var(--accent-line)}
/* الرسمُ نفسه هو المربّع: صندوقٌ حوله كان يضيف حدّاً ثالثاً في صفٍّ
   فيه حدُّ الصفّ وحدُّ اللوحة. */
.pal-k{flex:0 0 auto;width:30px;height:30px;padding:var(--s-1);
  border-radius:var(--r-sm);background:var(--bg-3);border:1px solid var(--line);
  color:var(--fg-2);box-sizing:border-box}
.pal-row.on .pal-k{color:var(--accent-ink)}
.pal-row.on .pal-k{background:var(--card);border-color:var(--accent-line)}
.pal-t{flex:1;min-width:0}
.pal-t b{display:block;font-weight:600;font-size:var(--t-body);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-t em{display:block;font-style:normal;font-size:var(--t-sm);color:var(--fg-2);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-go{flex:0 0 auto;font-family:var(--mono);font-size:var(--t-sm);color:var(--fg-3);opacity:0}
.pal-row.on .pal-go{opacity:1;color:var(--accent-ink)}
.pal-empty{padding:var(--s-6) var(--s-4);text-align:center;color:var(--fg-2);font-size:var(--t-body);line-height:1.8}
.pal-foot{display:flex;gap:16px;flex-wrap:wrap;padding:var(--s-2) var(--s-4);border-top:1px solid var(--line);
  background:var(--bg-2);font-size:var(--t-sm);color:var(--fg-3)}
.pal-foot span{display:flex;align-items:center;gap:5px}
@media(max-width:560px){.pal-foot span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.pal-bg,.pal{animation:none}}
@media print{.pal-bg{display:none!important}}


/* ══ التوصيات ═════════════════════════════════════════════ */
.adv{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-1) 0;margin-bottom:var(--s-3);
  background:var(--bg-2)}
.adv-who{font-weight:600;font-size:var(--t-sm);color:var(--fg-2);padding:var(--s-2) var(--s-4) var(--s-1)}
.adv-row{display:flex;align-items:flex-start;gap:12px;padding:var(--s-3) var(--s-4);border-top:1px solid var(--line)}
.adv-who + .adv-row{border-top:1px solid var(--line)}
.adv > .adv-row:first-child{border-top:0}
.adv-ic{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);
  font-weight:700;font-size:var(--t-sm);line-height:1}
.adv-row.redo .adv-ic{background:var(--gold-soft);color:var(--warn);
  border-color:color-mix(in srgb,var(--gold) 34%,transparent)}
.adv-row > div{flex:1;min-width:0}
.adv-row b{display:block;font-weight:600;font-size:var(--t-body);line-height:1.6}
.adv-row em{display:block;font-style:normal;font-size:var(--t-sm);color:var(--fg-2);line-height:1.7;margin-top:var(--s-1)}
.adv-row .btn{flex:0 0 auto;align-self:center}
@media(max-width:560px){.adv-row{flex-wrap:wrap}.adv-row .btn{width:100%}}


/* ══ الهياكل العظمية — مؤشّر تحميلٍ يرسم الشكل القادم ══════
   لمعةٌ تمرّ من جهةٍ لأخرى تقول «يعمل»، والشكل نفسه يقول «هذا ما
   سيأتي». ومع «تقليل الحركة» تسكن اللمعة ويبقى الشكل. */
.sk{position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-3)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg) 78%,transparent),transparent);
  animation:shim 1.25s infinite}
@keyframes shim{to{transform:translateX(100%)}}
.sk-head{margin-bottom:var(--s-4)}
.sk-t{height:22px;width:min(260px,52%);margin-bottom:var(--s-2)}
.sk-s{height:13px;width:min(420px,78%);margin-bottom:var(--s-3)}
.sk-r{height:13px;width:100%;margin-bottom:var(--s-2)}
.sk-n{height:28px;width:56px;margin-bottom:var(--s-2)}
.sk-l{height:11px;width:78%}
.sk-card{animation:none}
.sk-msg{text-align:center;color:var(--fg-3);font-size:var(--t-sm);margin-top:20px}
@media(prefers-reduced-motion:reduce){.sk::after{animation:none;opacity:0}}


/* ══ رسوم الزوّار ═════════════════════════════════════════ */
.tbars{display:grid;gap:9px}
.tbar{display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;gap:11px;align-items:center;
  font-size:var(--t-body)}
.tbar .tl{color:var(--fg);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbar .tt{height:20px;border-radius:var(--r-sm);background:var(--bg-3);overflow:hidden}
.tbar .tt i{display:block;height:100%;background:var(--grad);border-radius:var(--r-sm);
  transition:width .6s cubic-bezier(.2,.9,.3,1)}
.tbar .tv{font-family:var(--mono);font-size:var(--t-sm);color:var(--fg-2);min-width:72px;text-align:end}
.tbar .tv em{font-style:normal;color:var(--fg-3);font-size:var(--t-cap)}
.sparkbox{margin-top:var(--s-4)}
svg.spark{width:100%;height:76px;display:block;overflow:visible}
svg.spark .sa{fill:var(--accent-soft)}
svg.spark .sl{fill:none;stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.btn.ghost.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}

/* ══ مفتاح تبديل ووصفه ════════════════════════════════════ */
label.sw{display:flex;align-items:flex-start;gap:12px;padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);cursor:pointer}
label.sw input{width:20px;height:20px;flex:0 0 auto;margin-top:var(--s-1);accent-color:var(--accent)}
label.sw b{display:block;font-weight:600;font-size:var(--t-body)}
label.sw em{display:block;font-style:normal;font-size:var(--t-sm);color:var(--fg-2);line-height:1.7;margin-top:var(--s-1)}

/* ══ محرّر الشهادات ═══════════════════════════════════════ */
.sayed{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-4);margin-bottom:var(--s-3);
  background:var(--bg-2)}
.sayed .f:last-of-type{margin-bottom:var(--s-2)}

/* هدفُ لمسٍ لروابط شاشة الدخول: رابطٌ بارتفاع ١٦ بكسلاً يُخطئه الإبهام.
   الحدّ الأدنى في WCAG 2.2 أربعةٌ وعشرون، ونعطيه أربعين. */
footer.f a,
p.sub a{display:inline-flex;align-items:center;min-height:40px;padding-inline:var(--s-1);
  vertical-align:middle}

/* أيقونةُ بطاقة الدور في شاشة إنشاء الحساب */
.ri{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink)}
.ri .ic{width:19px;height:19px}
/* السهمُ في صفّ التوصية كان حرفاً «→»: اتجاهه ينقلب مع اللغة
   ولا يرث سُمك الخطّ. صار رسماً يتبع الاتجاه من الـCSS. */
.adv-ic .ic{width:15px;height:15px}
[dir="rtl"] .adv-ic .ic{transform:scaleX(-1)}

/* ══ البنود المصوّرة — أدوات ما قبل المدرسة ═══════════════
   شاشةٌ يجلس أمامها ابن الرابعة بإصبعه. ثلاث قواعد تحكمها:
    ① الهدف كبير: ١٤٠ بكسلاً على الأقل. إصبعُ الطفل أعرض من
       إصبع الكبير ودقّته أقلّ، وخطأُ الهدف يُسجَّل خطأَ جواب.
    ② لا شيء يتحرّك ولا يلمع: الحركة تسرق انتباهاً محدوداً أصلاً.
    ③ الاسم تحت الرسم صغيراً — للكبير ولقارئ الشاشة، ولأن الطفل
       الذي يتعلّم الأسماء يراها مقترنةً بصورتها. */
.fig{display:flex;align-items:center;justify-content:center;gap:var(--s-2);flex-wrap:wrap}
.fig-s{flex:0 0 auto;display:block}
.fig-q{display:grid;place-items:center;width:40px;height:40px;
  border:2px dashed var(--line-2);border-radius:var(--r-sm);
  color:var(--fg-3);font-weight:700;font-size:var(--t-h3)}
/* صفُّ السؤال: أكبر، وعلى أرضيةٍ تفصله عن الخيارات */
.fig-q-row{margin:var(--s-4) 0 var(--s-5);padding:var(--s-4);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  gap:var(--s-3)}

.opts.pic{display:grid;gap:var(--s-2);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,104px),1fr))}
.opts.pic .opt{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-2);min-height:140px;padding:var(--s-4) var(--s-2);text-align:center}
.opts.pic .opt .opt-l{font-size:var(--t-cap);color:var(--fg-2);font-weight:600;line-height:1.4}
.opts.pic .opt.sel .opt-l{color:var(--accent-ink)}
/* حدٌّ أعرض عند الاختيار: الطفل يحتاج أن يرى أن ضغطته وصلت */
.opts.pic .opt.sel{border-width:3px}
@media(max-width:360px){
  /* تحت ٣٦٠ يضيق السطر عن ثلاثة، فينزل إلى عمودين متساويين —
     ولا يبقى خيارٌ يتيمٌ في سطرٍ وحده. */
  .opts.pic{grid-template-columns:1fr 1fr}
  .opts.pic .opt{min-height:118px}
}

/* زرُّ إيقاف اللعبة — للكبير الجالس مع الطفل، لا للطفل */
.q-exit{text-align:end;margin-top:var(--s-1)}
.q-exit .linkish{font-size:var(--t-cap);color:var(--fg-3)}

/* ══ رأس اللوحة — الحال ثم الفعل ═══════════════════════════
   كانت اللوحة تبدأ بأربعة مؤشّرات ثم اثنين وعشرين مربّعاً، فلا
   يعرف الداخلُ من أين يبدأ. صارت تبدأ بجملةٍ تقول أين هو،
   وزرٍّ واحدٍ يقول ما الخطوة. */
.board-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5)}
.board-head h2{margin:0;font-size:var(--t-h1);line-height:var(--lh-h)}
.board-head .sub{margin-top:var(--s-1);font-size:var(--t-sm);color:var(--fg-2)}
.board-head .btn{flex:0 0 auto}
.board-err{flex-basis:100%}
@media(max-width:560px){
  .board-head{flex-direction:column;align-items:stretch;gap:var(--s-3)}
  .board-head .btn{width:100%;justify-content:center}
}

/* المؤشّرات: ثلاثةٌ بلا بطاقاتٍ ولا ظلّ — أرقامٌ يفصلها خطٌّ شعري */
/* الرقمُ عارياً: لا إطارَ ولا أرضية، وحجمُه وحدَه يقول إنه المهمّ.
   وهذا أوضحُ فرقٍ بين «لوحةِ تطبيق» و«صفحةٍ تُقرأ». */
.kpis{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  margin-bottom:var(--s-6);border:0;border-block:1px solid var(--line);
  border-radius:0;background:none;overflow:hidden}
.kpi{padding:var(--s-5) var(--s-4);border-inline-start:1px solid var(--line);
  background:none;border-radius:0;box-shadow:none;position:static}
.kpi:first-child{border-inline-start:0}
.kpi:hover{border-color:var(--line);box-shadow:none}
.kpi:before{display:none}
.kpi.low b{color:var(--warn)}

/* الأدوات المطبَّقة: صفٌّ نصّي مضغوط لا بطاقةٌ بأربعة أرقام */
.used{list-style:none;padding:0;margin:var(--s-3) 0 0;display:grid;gap:2px}
.used button{display:flex;align-items:center;gap:var(--s-3);width:100%;
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);text-align:start;min-height:40px}
.used button:hover{background:var(--bg-2)}
.used .u-n{flex:1;min-width:0;font-size:var(--t-body);font-weight:500}
.used .u-c{flex:0 0 auto;font-family:var(--mono);font-size:var(--t-sm);
  color:var(--fg-2);font-variant-numeric:tabular-nums}

/* ── الرفع من جدول ────────────────────────────────────────
   مطويّ افتراضياً: أكثرُ المعلمين يضيفون طالباً أو اثنين، ونموذجُ
   رفعٍ مفتوحٌ دائماً يزحم الشاشة على الأغلبية لأجل الأقلية. */
.imp{margin:16px 0 0;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-3) var(--s-4);background:var(--card)}
.imp>summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.imp>summary::marker{color:var(--muted)}
.imp[open]>summary{margin-block-end:var(--s-3)}
.imp input[type=file]{display:block;width:100%;padding:var(--s-3);
  border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--bg);
  color:var(--fg);font:inherit;cursor:pointer}
.imp input[type=file]:hover{border-color:var(--accent)}
.imp-map{align-items:flex-end;margin:var(--s-3) 0}
.imp-map .f{flex:1;min-width:130px}
.f.chk{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:7px;
  font-size:var(--t-sm);white-space:nowrap;padding-block-end:10px}
.f.chk input{width:auto;margin:0}
.imp-bad{margin:var(--s-3) 0;border-inline-start:3px solid var(--warn,#b45309);
  padding-inline-start:var(--s-3)}
.imp-bad summary{cursor:pointer;font-size:var(--t-sm)}
.imp-bad ul{margin:8px 0 0;padding-inline-start:18px}


/* ════════════════════════════════════════════════════════════════
   لغة «أ — الهادئ المحرّري»: ما لم يكن يُقال بالرموز وحدها
   ════════════════════════════════════════════════════════════════
   الرموزُ في theme.php نقلت اللونَ والخطَّ والحافّة. وبقي ما هو
   **بنيةٌ لا قيمة**: أين يُستعمل الخطُّ الفاصل بدل الإطار، وأين
   يُترك الرقمُ عارياً، وأين يُستغنى عن القرص. وهذا موضعُه.
   ════════════════════════════════════════════════════════════════ */

/* ❗ الأقراصُ الكاملة الاستدارة تقول «وسم» أو «زِرّ». وأكثرُ ما كان
   يلبسها هنا حقائقُ تُقرأ ولا تُنقَر. فبقيت الاستدارة الكاملة لما
   يُنقَر فعلاً (مرشّحات، وسوم قابلة للإزالة)، وذهبت عن الباقي. */
.chip,.tag,.badge{border-radius:var(--r-sm)}

/* رأسُ الصفحة: خطٌّ شعريّ يفصله عمّا تحته، بلا ضبابٍ خلفيّ.
   الضبابُ كان يُجهد الرسم على جوالٍ متوسّط ولا يُرى أثرُه. */
header.top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}

/* سطرُ الوصف تحت العنوان: أوسع فسحةً وأضيق عرضاً — سطرٌ يمتدّ
   عبر الشاشة كلّها لا يُقرأ، تفقد العينُ بدايةَ التالي. */
.sub{max-width:68ch;line-height:var(--lh-body)}

/* الجداول: خطوطٌ أفقية وحدها. الخطوطُ العمودية تصنع شبكةً تُقرأ
   «جدول بيانات»، والأفقيةُ وحدها تُقرأ «قائمة» — وهي قائمة. */
table{border-collapse:collapse}
th{font-family:var(--font-disp);font-weight:600;color:var(--ink);
  font-size:var(--t-sm);letter-spacing:.02em}

/* الحركة: نَفَسٌ واحد هادئ حين يستقرّ المحتوى في مكانه، لا أكثر.
   ومن أطفأ الحركة في نظامه لا يرى شيئاً — وهذا احترامٌ لا خيار. */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card,.tile,.dim,.axis{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion: reduce){
  .card,.tile,.dim,.axis{animation:none}
}


/* ════════════════════════════════════════════════════════════════
   التقرير — وهو ما يُدفع ثمنه
   ════════════════════════════════════════════════════════════════
   كان كلُّ بُعدٍ بطاقةً محاطة بإطارٍ وشريطٍ ملوّن على حافّتها، وستُّ
   بطاقاتٍ متتابعة تُقرأ «نموذجاً مُعبّأ» لا «رأيَ مختصّ». والفرقُ
   ليس تجميلاً: المعلّم الذي يرى نموذجاً يمسحه بعينه ويغلقه، والذي
   يرى نصّاً مكتوباً يقرؤه ويعمل به.

   فصار البُعدُ فقرةً يفصلها خطٌّ شعريّ، ودرجتُه رقمٌ كبيرٌ عارٍ إلى
   جانب اسمه، والمستوى يُقال بالكلمة مع اللون لا باللون وحده.
   ════════════════════════════════════════════════════════════════ */

.dim{border:0;border-block-start:1px solid var(--line);border-radius:0;
  padding:var(--s-6) 0 var(--s-5);margin-bottom:0;background:none}
.dim:first-of-type{border-block-start:0;padding-block-start:var(--s-4)}
/* ❗ والشريطُ الملوّن على الحافّة ذهب، وبقي معناه: الحرفُ H/M/L كان
   يُقال باللون وحده، ومن لا يميّز الألوان لا يقرؤه. فالمستوى الآن
   مكتوبٌ بكلمته دائماً في .tag (levelAr في app.js)، واللونُ يسنده. */
.dim.H,.dim.M,.dim.L{border-inline-start:0}
.dim .hd{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  margin-bottom:var(--s-3)}
.dim .hd b{font-family:var(--font-disp);font-size:var(--t-h2);font-weight:700;
  color:var(--ink);letter-spacing:-.02em}
/* المستوى والدرجةُ نصٌّ عارٍ في آخر السطر لا قرصٌ ملوّن: القرصُ
   يقول «وسم قابل للنقر» وهو ليس كذلك، وحجمُه يزاحم اسمَ البُعد. */
.dim .hd .tag{background:none;border:0;border-radius:0;padding:0;
  font-family:var(--font-disp);font-size:var(--t-body);font-weight:600;
  font-variant-numeric:tabular-nums;order:3;flex:0 0 auto}
.dim .hd .tag.H{color:var(--accent-ink)}
.dim .hd .tag.M{color:var(--fg-2)}
.dim .hd .tag.L{color:var(--fg-3)}
/* والشريطُ يأخذ ما بقي من السطر بين الاسم والدرجة. */
.dim .hd .bar{order:2;margin-inline:var(--s-2)}

/* الشريطُ خيطٌ رفيعٌ مستقيم لا أنبوبٌ مستدير: الأنبوبُ السميك يزن
   في الصفحة أكثر من الرقم نفسه، وهو أقلُّ منه دقّة. */
.bar{background:var(--bg-3);border-radius:0;height:4px;overflow:hidden;min-width:120px}
.bar i{border-radius:0}

/* «قراءة المعلم» كانت صندوقاً ملوّناً بأيقونةٍ فيه. والصندوقُ الملوّن
   داخل فقرةٍ يقطعها، وهو نفسُه أهمُّ ما في الفقرة. فصار اقتباساً
   بخطٍّ جانبيّ — تقليدُ المطبوعة لإبراز ما يُقتبس. */
.teach{background:none;border-radius:0;
  border-inline-start:2px solid var(--accent);
  padding:var(--s-1) 0 var(--s-1) 0;padding-inline-start:var(--s-4);
  margin:var(--s-4) 0;font-size:var(--t-body);color:var(--fg)}
.teach:before{content:"قراءة المعلم";display:block;font-family:var(--font-disp);
  font-weight:600;font-size:var(--t-cap);letter-spacing:.14em;
  color:var(--accent-ink);margin-bottom:var(--s-2)}

.acts-t{font-family:var(--font-disp);font-weight:600;font-size:var(--t-cap);
  letter-spacing:.14em;color:var(--fg-2);margin-top:var(--s-5);
  padding-block-start:var(--s-3);border-block-start:1px solid var(--line)}
ul.acts li{margin-bottom:var(--s-2);line-height:var(--lh-body)}

/* ترويسةُ التقرير: بلا ظلٍّ وبلا شريطٍ متدرّج فوقها. والتدرّجُ
   أسرعُ علامةٍ على قالبٍ جاهز، وهذه ورقةٌ تُطبع وتُسلَّم لولي أمر. */
.rpt-head{box-shadow:none;border-radius:var(--r)}
.rpt-head:before{display:none}
.rpt-brand{border-bottom:1px solid var(--line)}
.rpt-brand .nm{font-family:var(--font-disp)}

/* الإحصاءةُ المفردة: رقمٌ عارٍ بخطّ العناوين، بلا إطارٍ حوله. */
.stat{background:none;border:0;border-radius:0;text-align:start;
  padding:var(--s-3) 0;border-block-start:1px solid var(--line)}
.stat b{font-family:var(--font-disp);color:var(--ink);font-weight:700}

/* ── قسما المنصّة في لوحة المدير ──────────────────────────
   بطاقتان متجاورتان لا جدولٌ واحد: الرقمان لا يُقارنان صفّاً بصفّ
   بل يُقرأ كلُّ قطاعٍ وحده، والتجاورُ يكفي للمقارنة حين تُراد. */
.sect-card{border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-4);background:var(--bg)}
.sect-card h3{margin:0 0 2px}
.sect-card>.small{margin:0 0 var(--s-3)}
.sect-t{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.sect-t th{text-align:start;font-weight:400;color:var(--fg-2);
  padding:6px 0;border-block-end:1px solid var(--line)}
.sect-t td{text-align:end;padding:6px 0;border-block-end:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.sect-t tr:last-child th,.sect-t tr:last-child td{border-block-end:0}

/* ── مطالبُ الدور ─────────────────────────────────────────
   صفٌّ لكلِّ مطلب: اسمُه، وثِقَلُه في الدور، وأين يقف. والحدُّ
   الملوَّن على الحافّة يقول المستوى بلا أن يصير الصفُّ كلُّه لوناً. */
.fit{border-inline-start:3px solid var(--line-2);padding:var(--s-3) var(--s-4);
  margin-block-end:var(--s-3);background:var(--bg-2);border-radius:var(--r-sm)}
.fit-h{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:4px}
.fit-h b{font-family:var(--font-disp);color:var(--ink)}
.fit-n{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:600}
.fit p{margin:0;font-size:var(--t-sm);color:var(--fg-2);line-height:1.8}
.fit.lv-H{border-inline-start-color:var(--accent)}
.fit.lv-M{border-inline-start-color:var(--gold)}
.fit.lv-L{border-inline-start-color:var(--danger,#b01212)}
.fit.lv-none{border-inline-start-style:dashed}

/* ── ظروفُ التطبيق: اختياراتٌ صغيرةٌ لا نموذجٌ ثقيل ───────── */
.conds{display:flex;flex-wrap:wrap;gap:8px;margin-block:var(--s-3) 0}
.cond{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:99px;padding:6px 13px;
  font-size:var(--t-sm);color:var(--fg-2);background:var(--bg)}
.cond input{width:auto;margin:0}
.cond:has(input:checked){border-color:var(--accent);background:var(--accent-soft);
  color:var(--ink)}

/* ── سطرُ الدرجة المعيارية ─────────────────────────────────
   المئينُ بالكلمات أوّلاً لأنه الوحيدُ الذي يُشرح لغير المختصّ؛
   وZ وT بعده صغيرَين لمن يعرفهما؛ واسمُ المجموعة تحتهما لأن درجةً
   معياريةً بلا مجموعةٍ لا معنى لها. */
.normline{margin:6px 0 2px;padding:7px 11px;border-radius:var(--r-sm);
  background:var(--bg-3);font-size:var(--t-sm);line-height:1.8}
.normline b{color:var(--ink);font-weight:600}
.normline span{margin-inline-start:8px;font-variant-numeric:tabular-nums}
.normline em{display:block;font-style:normal;color:var(--fg-3);font-size:var(--t-cap)}

/* ── مؤشّراتُ المجموعة ─────────────────────────────────────
   العددُ أوّلاً لأنه ما يُقرأ، ثم ما يُفعَل، ثم القيدُ ملتصقاً به —
   لا في أسفل الصفحة حيث لا يصله من قرأ الرقمَ ومضى. */
.gsig{border:1px solid var(--line);border-inline-start:3px solid var(--line-2);
  border-radius:var(--r-sm);padding:var(--s-4);margin-block-end:var(--s-4);background:var(--bg-2)}
.gsig.warn{border-inline-start-color:var(--gold)}
.gsig.ok{border-inline-start-color:var(--accent)}
.gsig.info{border-inline-start-color:var(--line-2)}
.gsig-h{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:6px}
.gsig-h b{font-family:var(--font-disp);color:var(--ink)}
.gsig-n{font-family:var(--font-disp);font-size:var(--t-h3);color:var(--ink);
  font-variant-numeric:tabular-nums}
.gsig-n em{font-style:normal;font-size:var(--t-sm);color:var(--fg-2);font-weight:400}
.gsig p{margin:0 0 6px;font-size:var(--t-sm);color:var(--fg-2);line-height:1.85}
.gsig-do b{color:var(--ink)}
.gsig-lim{font-size:var(--t-cap) !important;color:var(--fg-3) !important;
  border-top:1px solid var(--line);padding-top:6px;margin-top:8px}

/* «اختياري» بجوار عنوان الحقل: هادئةٌ صغيرةٌ لا وسامٌ ملوّن — وهي
   تمنع سؤالاً يتكرّر في كلّ نموذجٍ لا يقول ما يلزم وما لا يلزم.

   ❗ واسمُها «hint-opt» لا «opt»: الثاني صنفُ زرِّ اختيار الدور، وهو
      صندوقٌ بحدٍّ وحشوةٍ وعرضٍ كامل. فورثَته الكلمةُ فصارت صندوقاً
      فارغاً تحت كلِّ عنوان — ولم يُخطئ شيءٌ، وإنّما قبُح النموذج. */
.f b .hint-opt{display:inline;width:auto;padding:0;border:0;background:none;
  font-style:normal;font-weight:400;font-size:var(--t-cap);color:var(--muted);
  margin-inline-start:var(--s-2)}

/* ══ الشريطُ السفليُّ على الهاتف ══════════════════════════════
   ❗ لماذا أُضيف؟ قياساً لا ذوقاً: أحدَ عشرَ تبويباً في شريطٍ علويٍّ
      تنكسر على عرض ٣٩٠ إلى ثلاثة صفوفٍ بارتفاع ١٨٠ بكسلاً — خُمسُ
      الشاشة قبل أن يظهر محتوى. والشريطُ السفليُّ يردّ ذلك كلَّه،
      ويضع أشيعَ أربعةِ أفعالٍ تحت الإبهام حيث تصله اليدُ الواحدة.

   ❗ ولا يظهر على التابلت والمكتبي: هناك الشريطُ العلويُّ صفٌّ واحد
      ولا يكلّف شيئاً، والفأرةُ لا إبهامَ لها. */
.botnav{display:none}
.moresheet{display:none}
@media (max-width:767px){
  nav.tabs{display:none}
  .botnav{
    display:flex;position:fixed;inset-inline:0;inset-block-end:0;z-index:60;
    background:var(--bg);border-block-start:1px solid var(--line);
    padding-block-end:env(safe-area-inset-bottom,0);
  }
  .botnav button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:56px;padding:var(--s-2) 2px;border:0;background:none;
    font:inherit;font-size:var(--t-cap);color:var(--fg-3);cursor:pointer;
    border-block-start:2px solid transparent;margin-block-start:-1px;
  }
  .botnav button .ic{width:21px;height:21px}
  .botnav button.on{color:var(--accent-ink);border-block-start-color:var(--accent);font-weight:600}
  .botnav button span{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
  /* ❗ فراغٌ أسفلَ الصفحة بقدر الشريط، وإلّا غطّى آخرَ سطرٍ فيها —
     وآخرُ سطرٍ في شاشةٍ طويلة هو الزرُّ غالباً. */
  body{padding-block-end:calc(58px + env(safe-area-inset-bottom,0))}
  footer.f{margin-block-end:var(--s-4)}

  /* ورقةُ «المزيد» تصعد من الأسفل — من حيث ضُغط الزرّ */
  .moresheet{display:block;position:fixed;inset:0;z-index:70}
  .moresheet[hidden]{display:none}
  .ms-back{position:absolute;inset:0;background:rgba(0,0,0,.34);opacity:0;
    transition:opacity .18s ease}
  .moresheet.open .ms-back{opacity:1}
  .ms-card{position:absolute;inset-inline:0;inset-block-end:0;
    background:var(--bg);border-block-start:1px solid var(--line);
    border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
    padding:var(--s-4) var(--s-3) calc(var(--s-4) + env(safe-area-inset-bottom,0));
    transform:translateY(100%);transition:transform .2s cubic-bezier(.2,.9,.3,1)}
  .moresheet.open .ms-card{transform:translateY(0)}
  .ms-card button{
    display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:52px;
    padding:var(--s-3) var(--s-4);border:0;background:none;border-radius:var(--r);
    font:inherit;font-size:var(--t-body);color:var(--fg);text-align:start;cursor:pointer}
  .ms-card button .ic{width:19px;height:19px;color:var(--fg-3);flex:0 0 auto}
  .ms-card button.on{color:var(--accent-ink);font-weight:600;background:var(--accent-soft)}
  .ms-card button:active{background:var(--bg-3)}

  /* ❗ أهدافُ اللمس: قِيس فإذا أحدٌ وثلاثون هدفاً دون ٤٤ بكسلاً.
     والرقمُ ليس اصطلاحاً: هو عرضُ طرفِ الإبهام تقريباً، وما دونه
     يُخطئه صاحبُه فيضغط ما جاوره — وهذا ما يُسمّى «صعب الاستخدام». */
  .btn,button.btn,.btn.sm,.c-range,.opt,input,select,textarea{min-height:44px}
  .btn.sm{padding-inline:var(--s-4)}
  .srch{min-height:44px}
  .tile .t-check{width:22px;height:22px}
}
@media print{ .botnav,.moresheet{display:none!important} }

/* ══ التابلت: صفٌّ واحدٌ يُمرَّر، لا صفّان ══════════════════
   ❗ على ٨٢٠ بكسلاً كان الشريطُ العلويّ ينكسر إلى صفّين (١٢٠ بكسلاً).
      والصفُّ الواحدُ الذي يُمرَّر أفقياً أهدأ: يبقى ارتفاعُ الرأس
      ثابتاً، ويعرف القارئُ أن ثمّةَ مزيداً لأن العنصرَ الأخير
      مقصوصٌ عمداً عند الحافّة. */
@media (min-width:768px) and (max-width:1023px){
  nav.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;mask-image:linear-gradient(to left,
      transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
  nav.tabs::-webkit-scrollbar{display:none}
}
/* ❗ وأهدافُ اللمس على كلِّ جهازٍ لا مؤشّرَ له — التابلت منها.
   والقاعدةُ تتبع «هل تُلمَس؟» لا «كم عرضُها؟»: تابلتٌ بعرض ١٠٢٤
   يُلمَس بالإبهام نفسِه الذي يلمس هاتفاً بعرض ٣٩٠. */
@media (hover:none){
  .btn,button.btn,.btn.sm,.c-range,.opt,input,select,textarea,.srch{min-height:44px}
  .btn.sm{padding-inline:var(--s-4)}
}

/* ══ المسارُ السريع: اختيارُ أداةٍ واحدةٍ من قائمة ══════════ */
.qpick{display:flex;flex-direction:column;gap:0;border-block:1px solid var(--line);
  max-height:46vh;overflow-y:auto;margin-block:var(--s-3)}
.qopt{display:flex;flex-direction:column;gap:2px;width:100%;text-align:start;
  padding:var(--s-4) var(--s-3);border:0;border-block-end:1px solid var(--line);
  background:none;font:inherit;color:inherit;cursor:pointer;min-height:56px;
  transition:background .14s ease}
.qopt:last-child{border-block-end:0}
.qopt:hover{background:var(--bg-3)}
.qopt b{font-size:var(--t-body);font-weight:600;color:var(--fg)}
/* ❗ لا -webkit-box هنا: داخل <button> يخرج ارتفاعُه صفراً فيختفي
   الوصفُ كلُّه بلا أن يُخطئ شيء — وقد اختفى فعلاً حتى رُئي في لقطة.
   والقصُّ بارتفاعٍ أقصى يؤدّي الغرضَ ويعمل في كلِّ متصفّح. */
.qopt span{display:block;font-size:var(--t-sm);color:var(--muted);line-height:1.65;
  max-height:1.65em;overflow:hidden}
.qopt em{font-style:normal;font-size:var(--t-cap);color:var(--fg-3)}
/* ❗ المختارُ يُعلَن بالخلفية وبعلامةٍ نصّية معاً: اللونُ وحده لا
   يكفي لمن لا يميّزه، وهي القاعدة نفسُها التي تحكم ألوان العائلات. */
.qopt.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.qopt.on b::after{content:" ✓";color:var(--accent-ink);font-weight:700}
.linkbox input{width:100%;font-family:var(--mono);font-size:var(--t-sm);
  padding:var(--s-3);border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--bg-3);color:var(--fg);min-height:48px}

/* ══ شريطُ الإطلاق التجريبيّ ══════════════════════════════
   هادئٌ لا صارخ: من يراه في كلِّ شاشةٍ بلونٍ أحمرَ يتوقّف عن رؤيته
   في يومين. فالعنبريُّ الخافتُ يبقى مقروءاً ولا يزاحم المحتوى. */
.betabar{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) clamp(14px,4vw,28px);
  background:var(--warn-soft);color:var(--warn);
  border-block-end:1px solid color-mix(in srgb,var(--warn) 22%,transparent);
  font-size:var(--t-sm);line-height:1.6}
.betabar .ic{width:17px;height:17px;flex:0 0 auto}
.betabar b{font-weight:700;margin-inline-end:var(--s-2)}
@media print{.betabar{display:none}}

/* ════════════════════════════════════════════════════════════════
   اللوحة — كتلةٌ مقصورةٌ على ‎.bd وحدها
   ════════════════════════════════════════════════════════════════
   كلُّ قاعدةٍ هنا تبدأ بـ‎.bd عمداً: ‎.kpis و‎.kpi و‎.chart و‎.crow
   مستعملةٌ في شاشاتٍ أخرى، وتعديلُها في المستوى الأعلى يغيّر شاشاتٍ
   لم يُطلَب تغييرُها. والرموزُ كلُّها من theme.php — لا قيمةَ لونٍ
   ولا حجمَ خطٍّ مكتوبٌ هنا بيده. */

.bd{--bd-gap:var(--s-8)}
.bd > * + *{margin-block-start:var(--bd-gap)}

/* A · السياق */
.board-head{display:block;margin:0;padding-block-end:var(--s-4);
  border-block-end:1px solid var(--line)}
.bd-h1{margin:0;font-family:var(--font-disp);font-size:var(--t-h1);font-weight:700;
  line-height:var(--lh-h);letter-spacing:-.02em;color:var(--ink)}
.bd-ctx{margin:var(--s-2) 0 0;font-size:var(--t-sm);color:var(--muted);font-weight:500;
  font-variant-numeric:tabular-nums}

/* التركيبُ العلويّ — غيرُ متماثل: الجوابُ أعرضُ من الأرقام */
.bd-top{display:grid;gap:var(--s-6);align-items:start}
@media (min-width:900px){.bd-top{grid-template-columns:minmax(0,7fr) minmax(260px,4fr)}}

/* B · الصدارة */
.bd-lede{min-width:0}
.bd-n{display:block;font-family:var(--font-disp);font-size:var(--t-display);font-weight:800;
  line-height:var(--lh-display);letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.bd-n-lab{margin:var(--s-1) 0 0;font-size:var(--t-lead);font-weight:600;color:var(--ink);
  line-height:var(--lh-tight)}
.bd-n-sub{margin:var(--s-2) 0 0;font-size:var(--t-sm);color:var(--muted);font-weight:400;
  font-variant-numeric:tabular-nums}
.bd-calm .bd-n{color:var(--fg-2)}

/* C · صفوفُ الانتباه — الشدّةُ عرضُ شريطٍ وحبرٌ متدرّج، لا خلفيةٌ صارخة */
.bd-watch{list-style:none;margin:var(--s-5) 0 0;padding:0}
.bd-w + .bd-w{border-block-start:1px solid var(--line)}
.bd-w > button{display:grid;grid-template-columns:3px 1fr auto;align-items:center;
  gap:var(--s-3);inline-size:100%;min-block-size:48px;padding:var(--s-2) var(--s-1);
  background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:start;
  position:relative;transition:background .15s}
.bd-w > button:hover{background:var(--bg-2)}
.bd-w > button:focus-visible{outline:var(--ring);outline-offset:-2px;border-radius:var(--r-sm)}
.bd-w-bar{display:block;block-size:100%;min-block-size:26px;border-radius:2px;
  background:var(--fg-3);grid-column:1}
.bd-w.t3 .bd-w-bar{background:var(--danger)}
.bd-w.t2 .bd-w-bar{background:var(--gold-ink)}
.bd-w-lab{font-size:var(--t-body);font-weight:600;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.bd-w.t1 .bd-w-lab{font-weight:500;color:var(--fg-2)}
.bd-w-n{font-family:var(--font-disp);font-size:var(--t-h3);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.bd-note{margin:var(--s-3) 0 0;font-size:var(--t-cap);color:var(--muted)}

/* G · الفعل */
.bd-acts{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-block-start:var(--s-6)}
.btn-link{background:none;border:0;padding:var(--s-2) 0;font:inherit;font-weight:600;
  color:var(--accent-ink);cursor:pointer;text-decoration:underline;
  text-underline-offset:4px;min-block-size:44px}
.btn-link:hover{color:var(--ink)}
.btn-link:focus-visible{outline:var(--ring);outline-offset:3px;border-radius:var(--r-sm)}

/* D · المؤشّرات — أرقامٌ لا بطاقات */
.bd .bd-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin:0}
@media (min-width:900px){.bd .bd-kpis{grid-template-columns:1fr;gap:var(--s-5)}}
.bd .bd-kpis .kpi{background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  animation:none;position:relative}
.bd .bd-kpis .kpi:hover{box-shadow:none;border:0}
.bd .bd-kpis .kpi:before{display:none}
@media (min-width:900px){
  .bd .bd-kpis .kpi + .kpi{padding-block-start:var(--s-5);border-block-start:1px solid var(--line)}}
.bd .bd-kpis .kpi b{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em;
  line-height:1.15;font-variant-numeric:tabular-nums}
.bd .bd-kpis .kpi span{display:block;font-size:var(--t-sm);color:var(--fg-2);font-weight:500}
.bd .bd-kpis .kpi em{display:block;margin-block-start:2px;font-size:var(--t-cap);
  color:var(--muted);font-weight:500}
.bd .bd-kpis .kpi.low b{color:var(--warn)}
.bd-spark{display:block;inline-size:76px;block-size:22px;margin-block-start:var(--s-2);overflow:visible}
.bd-spark-l{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round}
.bd-spark-a{fill:var(--accent);opacity:.12;stroke:none}

/* E+F · التصوير */
.bd-viz{padding-block-start:var(--s-6);border-block-start:1px solid var(--line)}
.bd-viz-h{margin:0;font-family:var(--font-disp);font-size:var(--t-h2);font-weight:700;
  line-height:var(--lh-h);letter-spacing:-.02em;color:var(--ink)}
.bd-viz-c{margin:var(--s-2) 0 0;font-size:var(--t-sm);color:var(--muted);font-weight:400;
  font-variant-numeric:tabular-nums}
.bd-viz-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  flex-wrap:wrap;margin-block-start:var(--s-5)}
.bd-tabs{display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;
  border-block-end:1px solid var(--line);flex:1 1 auto;min-width:0}
.bd-tabs::-webkit-scrollbar{display:none}
.bd-tab{background:none;border:0;border-block-end:2px solid transparent;margin-block-end:-1px;
  padding:var(--s-3) var(--s-3);font:inherit;font-size:var(--t-sm);font-weight:600;
  color:var(--muted);cursor:pointer;white-space:nowrap;min-block-size:44px;transition:color .15s}
.bd-tab:hover{color:var(--ink)}
.bd-tab.on{color:var(--ink);border-block-end-color:var(--accent)}
.bd-tab:focus-visible{outline:var(--ring);outline-offset:-2px;border-radius:var(--r-sm)}
.bd-charts{margin-block-start:var(--s-4);min-block-size:200px}
.bd-charts.loading{opacity:.45}
.bd .bd-hero-chart .crow{grid-template-columns:minmax(110px,230px) 1fr auto;
  padding-block:var(--s-2)}
.bd .bd-hero-chart .ctrack{block-size:30px}
.bd .bd-hero-chart .cval{font-size:var(--t-body);font-weight:800}
.bd .bd-charts .chart h4{font-size:var(--t-h3)}

/* H · التفاصيل */
.bd-folds{display:grid;gap:var(--s-5)}
.bd-fold{padding-block-start:var(--s-5);border-block-start:1px solid var(--line)}
.bd-fold > summary{display:flex;align-items:center;gap:var(--s-3);cursor:pointer;
  list-style:none;min-block-size:44px;font-family:var(--font-disp);font-size:var(--t-h2);
  font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.bd-fold > summary::-webkit-details-marker{display:none}
.bd-fold > summary:focus-visible{outline:var(--ring);outline-offset:3px;border-radius:var(--r-sm)}
.bd-fold > summary::after{content:"";inline-size:8px;block-size:8px;margin-inline-start:auto;
  border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s}
.bd-fold[open] > summary::after{transform:rotate(-135deg)}
.bd-f-n{font-family:var(--font);font-size:var(--t-sm);font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
.bd-f-s{margin:var(--s-2) 0 var(--s-4);font-size:var(--t-sm);color:var(--muted)}

/* الهاتف — ترتيبٌ خاصٌّ به: الجوابُ ثم الفعل ثم الأرقام */
@media (max-width:899px){
  .bd{--bd-gap:var(--s-6)}
  .bd-top{display:flex;flex-direction:column}
  .bd-lede{order:1}
  .bd-side{order:2}
  /* لا تُعرض المؤشّراتُ كلُّها: صفّان ثم «عرض الكلّ» */
  .bd-watch.fold > .bd-w:nth-child(n+3){display:none}
  .bd-more{background:none;border:0;padding:var(--s-3) 0;font:inherit;font-size:var(--t-sm);
    font-weight:600;color:var(--accent-ink);cursor:pointer;min-block-size:44px;
    text-decoration:underline;text-underline-offset:4px}
  .bd .bd-hero-chart .crow{grid-template-columns:1fr;gap:var(--s-1);padding-block:var(--s-3)}
  .bd .bd-hero-chart .crow > .lab{text-align:start;white-space:normal}
  .bd .bd-hero-chart .cval{text-align:start;font-size:var(--t-sm)}
  .bd-acts{flex-direction:column;align-items:stretch}
  .bd-acts .btn{inline-size:100%;justify-content:center}
}
@media (min-width:900px){.bd-more{display:none}}
/* شريطُ الشدّة: خطُّ قياسٍ رفيعٌ أسفلَ الصفّ، عرضُه نسبتُه —
   لا خلفيةٌ ملوّنة. والحبرُ يتدرّج معه فلا يعتمد المعنى على اللون وحده. */
.bd-w > button{grid-template-columns:1fr auto}
.bd-w-bar{position:absolute;inset-block-end:0;inset-inline-start:0;block-size:2px;
  min-block-size:2px;border-radius:0;background:var(--fg-3);grid-column:auto}
.bd-w.t3 .bd-w-bar{block-size:3px;background:var(--danger)}
.bd-w.t2 .bd-w-bar{block-size:3px;background:var(--gold-ink)}
.bd-viz-bar [hidden]{display:none}
@media (min-width:900px){.bd-rows + .bd-more{display:none}}
@media (max-width:899px){
  .bd-rows.fold > .bd-crow:nth-child(n+5){display:none}
}
/* ملخّصُ «عرض كجدول» كان ٣٠px: هو الطريقُ الوحيد إلى الأرقام لمن
   لا يحوّم، فلا يجوز أن يكون أصغرَ من أن يُلمَس. */
.bd .c-tbl > summary{min-block-size:44px;display:flex;align-items:center;gap:var(--s-2)}