/* ═══════════════════════════════════════════════════════════════════
   أكاديمية برو · بوّابة الطالب — ورقة التنسيق الوحيدة
   ═══════════════════════════════════════════════════════════════════

   نفس لغة الموقع حرفاً بحرف: البرتقالي #F97316، محايدات دافئة، RTL
   أساساً، نهاريّ فقط، ولا زاوية حادّة بأي مكان. لكن النبرة أهدأ من
   صفحة التسويق: هذي مساحة يفتحها الطالب كل يوم ليشتغل، لا صفحة تُقنعه.

   خمس قواعد تحكم هذا الملفّ:

   ١) الهاتف أولاً. كل ما تحت هذا السطر مكتوب للهاتف، والحاسبة تأخذ
      توسيعها داخل @media(min-width:560px) و(720px) و(960px) بأسفل
      الملفّ وحدها. أي بكسل يتحرّك تحت 560 يُعدّ خطأً لا تحسيناً.

   ٢) نهاريّ فقط: ولا استعلام واحد لتفضيل الألوان الداكنة بأي سطر.

   ٣) الحواف تعيش بمكان واحد: القسم 20. أي صنف جديد يحمل خلفية أو
      إطاراً أو ظلّاً يُضاف لتلك الكتلة بنفس اللحظة لا بمراجعة قادمة.
      لذلك لا يحمل أي مكوّن أدناه border-radius بنفسه، إلا حين تكون
      الحواف غير متماثلة (الورقة، القفل، زرّ التشغيل، الحلقات).
      هذا الخطأ وقع سابقاً بصفحتَي الأكاديمية والوظائف وبقيت بطاقاتهما
      حادّة على الهاتف شهوراً، فهو خطأ متكرّر لا احتمال.

   ٤) قاعدة التباين مكتوبة ومُلزِمة: #F97316 على الأبيض = 2.80:1 راسبة.
      كل نصّ برتقالي وكل أيقونة صغيرة تأخذ --o700 (5.51:1)، والنصّ
      داخل حبّة أرضيتها --o50 أو --o100 يأخذ --o800. --o500 تعبئة
      بلا نصّ فوقها أبداً، و--o-btn سطح زرّ لا لون نصّ.

   ٥) كل ابن مرن يحمل نصّاً يأخذ min-width:0، وابن واحد فقط بالحاوية
      يأخذ margin auto. (هذي علّة تكرّرت بلوحة التحكّم بهذا المشروع
      وأفاضت شريطاً جانبياً كاملاً.)

   ───────────────────────────────────────────────────────────────────
   فهرس الأقسام
   ───────────────────────────────────────────────────────────────────
    1 · المتغيّرات · :root
    2 · الخطّ والأساس والطباعة
    3 · المساعدات العامّة
    4 · الهيكل: الشريط العلوي والقشرة والرؤوس والفتات
    5 · الأزرار
    6 · الحقول والنماذج وشاشة الدخول
    7 · الأشرطة والحبّات والشارات
    8 · طبقة الصور
    9 · مقاييس التقدّم: meter · ring · uring · rail · lbar · lprog · cd
   10 · بطاقة القرار .now
   11 · الرفّ: .grid و.ccard
   12 · المنهج: .units و.unit و.leaf
   13 · المشاهدة: .watch و.stage و.ovl و.pbar و.spd و.sheet
   14 · التبويبات
   15 · المرفقات وصفحة الملفّات
   16 · نصّ الدرس .md
   17 · البطاقات وقوائم مفتاح/قيمة
   18 · الحالات: .pane و.solo والهياكل العظمية
   19 · الطبقات العائمة: الحجاب والنافذة والإشعار والنبضة
   20 · لا زاوية حادّة
   21 · الحاسبة: 560 · 720 · 960
   22 · تقليل الحركة
   23 · توافق مؤقّت أثناء الترحيل
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   1 · المتغيّرات
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* ── البرتقالي المملوك · لا لون علامة ثانٍ ──
     التشبّع 98 إلى 100% والقناة الزرقاء صفر بالغامق فلا ينزلق للبني.
     السلّم كامل بمطابقة tokens.css حرفاً بحرف حتى تبقى الورقتان قابلتين
     للمقارنة بسطر diff واحد. */
  --o50:#FFF5EB; --o100:#FFE5CC; --o200:#FFCB9E; --o300:#FFAB66;
  --o400:#FD8F3A; --o500:#F97316; --o600:#E65400; --o700:#BD3C00;
  --o800:#992B00; --o900:#7A1F00; --o950:#420F00;
  --o-btn:#EB5600;

  /* ── محايدات دافئة · الأسود المائل للأزرق يجعل البرتقالي دخيلاً ── */
  --ground:#FAF8F6; --surface:#FFFFFF; --raised:#F3EEEA;
  --ink:#141110; --muted:#5D544F; --faint:#736962;
  --line:#E4DCD6; --line-2:#EFE8E3;

  /* ── دلالية · لكل واحد أرضيته وحدّه، فلا هكس نصّي بأي قاعدة ── */
  --ok:#0F6E52;   --ok-bg:#E7F4EF;   --ok-line:#C9E5DA;
  --warn:#8A5A00; --warn-bg:#FFF4E0; --warn-line:#F2DFB8;
  --bad:#A8341A;  --bad-bg:#FDECE8;  --bad-line:#F5CFC6;
  --wa:#17A94E;

  /* ── طباعة · السقف 700 ولا وزن 800/900 ──
     الخطّ مستضاف ذاتياً: رابط حاجب للرسم إلى مستضيف أجنبي هو أسوأ شي
     ممكن بأول صفحة يفتحها طالب على شبكة عراقية متذبذبة. */
  --ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --mo:ui-monospace,"SF Mono",Menlo,monospace;

  /* ── إيقاع ── */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  --pad:20px;

  /* هامش القشرة الجانبي. منفصل عن --pad بقصد: قواعد منقولة من الموقع
     تستعمل var(--pad) وتفترضه 20px بكل المقاسات، فلو وسّعناه بالحاسبة
     تبدّلت هندستها صامتةً. --pad-x وحده يتوسّع، وكل ما يجب أن يحاذي
     حافّة القشرة أو يمتدّ خارجها بهامش سالب يقرؤه هو لا --pad. */
  --pad-x:var(--pad);

  /* ── حواف · لا زاوية حادّة ── */
  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:26px; --r-f:999px;

  /* ── حركة · مدّتان ومنحنى واحد ── */
  --t:150ms; --t2:280ms; --ease:cubic-bezier(.16,1,.3,1);

  /* ── ظلال بنّية دافئة (64,26,4) لا رمادية ── */
  --sh-1:0 1px 2px rgba(64,26,4,.045);
  --sh-2:0 1px 2px rgba(64,26,4,.05), 0 4px 10px -6px rgba(64,26,4,.09);
  --sh-3:0 1px 2px rgba(64,26,4,.05), 0 12px 28px -16px rgba(64,26,4,.16);
  --sh-o:0 1px 2px rgba(120,42,0,.14), 0 10px 24px -12px rgba(235,86,0,.5);

  /* ── قياسات الهيكل ── */
  --shell:1180px; --side:320px; --top-h:56px;

  /* ── المسرح · أسود دافئ مشتقّ من --o950 لا أسود أزرق ── */
  --stage:#0B0908;
}


/* ═══════════════════════════════════════════════════════════════════
   2 · الخطّ والأساس والطباعة
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-ar-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-ar-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{background:var(--ground);color:var(--ink);font-family:var(--ar);
  font-size:16px;line-height:1.72;overflow-x:clip;
  font-synthesis-weight:none}          /* لا تزوير للوزن — يبان الخطأ بدل التشويه */
body *{letter-spacing:0}               /* التباعد يفكّ الوصل الخطّي بالعربية */
h1,h2,h3,h4{line-height:1.28;font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* الورقة تضبط display على أكثر من عشرة أصناف (.btn .band .pill .st .row
   .crumb .att .leaf .meter .tabs .pane …)، فإخفاء أيّها بسمة hidden لا
   يفعل شيئاً بصمت بدون هذا السطر. نفس تعليل admin.css:121. */
[hidden]{display:none !important}

/* حلقة تركيز مزدوجة تشتغل فوق أي لون — والطالب قد يتنقّل بالمفاتيح */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2.5px solid var(--o700);outline-offset:2px;border-radius:var(--r-s);
  box-shadow:0 0 0 2px var(--ground), 0 0 0 5px rgba(189,60,0,.18)}

/* الأرقام: لاتينية بخانات ثابتة حتى لا ترقص الأعمدة، وعلى خطّ العربية
   لا المونوسبيس — .num رقم ملاصق لكلمة عربية («12 يوم»)، والمونوسبيس
   يوسّعه فيبان ملصوقاً من موقع ثاني. */
.num{font-family:var(--ar);font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1}
.mono{font-family:var(--mo);font-variant-numeric:tabular-nums}


/* ═══════════════════════════════════════════════════════════════════
   3 · المساعدات العامّة
   ═══════════════════════════════════════════════════════════════════ */
.row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.row.tight{gap:.3rem}
.row.end{justify-content:flex-end}
.stack{display:flex;flex-direction:column;gap:1rem;min-width:0}
.stack.sm{gap:.5rem}
.stack.lg{gap:1.5rem}
/* min-width:0 لا 1rem: الابن المرن الحامل لنصّ عربي طويل يفيض حاويته
   ويدفع شريطاً جانبياً كاملاً بدونه. */
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.tiny{font-size:.76rem;line-height:1.6;color:var(--faint)}
.nowrap{white-space:nowrap}
.center{text-align:center}
.clamp{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sep{height:1px;border:0;margin:0;
  background:linear-gradient(to left,transparent,var(--line-2) 26%,var(--line) 50%,var(--line-2) 74%,transparent)}

/* حاوية flex تبتلع المسافة بين عقدة نصّ وعنصر («عرض5مميزات») — gap يعيدها.
   القاعدة عامّة لأن الخطأ تكرّر ستّ مرّات بهذا المشروع. */
.more,.eyebrow,.ft>span,.crumb,.pill,.st,.meter-l,.lmeta,.at-m,.ladder{gap:.32ch}

/* .eyebrow تُكتب كاملة هنا: تعريفها الأساسي يعيش بـmobile.html وحدها
   ولا يصل أي صفحة ثانية، فلا نرث ما لا وجود له. */
.eyebrow{display:inline-flex;align-items:center;flex-wrap:wrap;
  font-size:.82rem;font-weight:700;color:var(--o700)}


/* ═══════════════════════════════════════════════════════════════════
   4 · الهيكل: الشريط العلوي والقشرة والرؤوس والفتات
   ═══════════════════════════════════════════════════════════════════ */
.top{position:sticky;top:0;z-index:40;background:rgba(250,248,246,.94);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--shell);margin-inline:auto;height:var(--top-h);
  display:flex;align-items:center;gap:.9rem;padding-inline:var(--pad-x)}
.brand{display:flex;align-items:center;gap:.5rem;min-width:0;
  font-weight:700;font-size:.95rem}
.brand span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand img{flex-shrink:0;width:32px;height:32px;padding:4px;background:var(--o50)}
/* الابن الوحيد بالشريط الذي يأخذ margin auto */
.nav{display:flex;gap:.2rem;margin-inline-start:auto}
.nav a{padding:.4rem .85rem;font-size:.88rem;font-weight:700;white-space:nowrap;
  color:var(--muted);transition:background var(--t),color var(--t)}
@media(hover:hover){.nav a:hover{background:var(--raised);color:var(--ink)}}
/* الصفحة الحالية بحبّة فاتحة ونصّ --o800 لا بأرضية برتقالية مصمتة:
   نقطة تنقّل ليست زرّاً، و--o-btn محجوز لسطح الزرّ الأوّلي وحده. */
.nav a[aria-current="page"]{background:var(--o100);color:var(--o800)}

.shell{max-width:var(--shell);margin-inline:auto;
  padding:var(--s3) var(--pad-x) var(--s5)}
.page-head{display:flex;align-items:flex-start;gap:.8rem;flex-wrap:wrap;
  margin-block-end:var(--s2)}
.page-head .stack{gap:.15rem}
.page-head h1{font-size:1.45rem;flex:1;min-width:min(100%,12rem)}
.sec{display:flex;flex-direction:column;gap:.7rem;margin-block-start:var(--s4)}
.sec-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.sec-head h2{font-size:1.05rem;flex:1;min-width:0}

/* فتات الرجوع: هدف لمس كامل الارتفاع، ونصّه يقول وين يودّي لا «رجوع» */
.crumb{display:inline-flex;align-items:center;min-height:44px;
  padding-inline:.7rem;margin-inline-start:-.7rem;margin-block-end:.15rem;
  font-size:.86rem;font-weight:700;color:var(--o700);
  background:none;border:0;font-family:inherit;cursor:pointer}
.crumb::before{content:"";flex-shrink:0;width:7px;height:7px;
  margin-inline-end:.45rem;transform:rotate(135deg);
  border-block-start:2px solid currentColor;border-inline-end:2px solid currentColor}

/* شاشة تملأ الصفحة وحدها: الحجب أو انقطاع الشبكة. بلا شريط علوي —
   ما كو مكان ثانٍ يروح له الطالب أصلاً، فعرضه يزيد حيرته. */
.solo{min-height:100dvh;display:grid;place-items:center;padding:var(--pad-x)}
.solo-card{width:min(420px,100%);text-align:center;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-2);padding:2rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;gap:.8rem}
.solo-card > img{width:48px;height:48px;padding:7px;background:var(--o50)}
.solo-card picture{display:block;width:min(200px,58%);margin-inline:auto}
.solo-card h1{font-size:1.2rem}
.solo-card p{font-size:.9rem;color:var(--muted)}
.solo-card .btn{width:100%;margin-block-start:.4rem}


/* ═══════════════════════════════════════════════════════════════════
   5 · الأزرار
   ═══════════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding-inline:1.25rem;border:1.5px solid transparent;
  font-family:inherit;font-size:1rem;font-weight:700;line-height:1.24;  /* أقل من 1.24 يقصّ نزلات العربية */
  cursor:pointer;background:none;color:inherit;text-align:center;
  transition:background var(--t),box-shadow var(--t),transform var(--t),border-color var(--t)}
.btn svg{flex-shrink:0;opacity:.9}
.btn:active{transform:translateY(1px)}
.btn-p{position:relative;overflow:hidden;background:var(--o-btn);color:#fff;
  box-shadow:var(--sh-o)}
.btn-p::before{content:"";position:absolute;inset:0 0 auto;height:50%;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.16),transparent)}
.btn-p:hover{background:#F55E00}
.btn-p:active{background:#D64E00}
.btn-s{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1)}
.btn-s:hover{border-color:var(--o300);color:var(--o700)}
.btn-s:active{background:var(--raised)}
.btn-d{background:transparent;border-color:var(--line);color:var(--bad)}
.btn-d:hover{background:var(--bad-bg)}
.btn-sm{min-height:36px;padding-inline:.8rem;font-size:.85rem}
.btn-w{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
/* .grad نفس تدرّج زرّ الموقع بلا حركة. و.hot المتحرّك ممنوع بالبوّابة:
   قاعدته «مرّة واحدة بالصفحة» وهو مصروف أصلاً بزرّ التسجيل بصفحة
   الأكاديمية العامّة، والمنصّة مساحة شغل لا صفحة إقناع. */
.btn-p.grad{border:0;background-image:linear-gradient(100deg,#E65400,#D94D00 28%,#EB5600 50%,#D94D00 72%,#E65400);
  background-size:230% 100%;background-position:38% 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(120,42,0,.22),
    0 2px 4px rgba(120,42,0,.18), 0 12px 26px -12px rgba(235,86,0,.62)}
/* واتساب: نقطة --wa وحدها لا أرضية. الأبيض على #17A94E = 2.90:1 راسب،
   و--wa معناه الوحيد بالجدول «زرّ واتساب»، فيُصرف نقطةً تُعرَّف بها
   القناة ويبقى النصّ على حبر الورقة. */
.btn-wa::before{content:"";flex-shrink:0;width:9px;height:9px;border-radius:50%;
  background:var(--wa)}


/* ═══════════════════════════════════════════════════════════════════
   6 · الحقول والنماذج وشاشة الدخول
   ═══════════════════════════════════════════════════════════════════ */
.f{display:flex;flex-direction:column;gap:.35rem}
.f label{font-size:.84rem;font-weight:700;color:var(--muted)}
.inp{width:100%;min-height:48px;padding:.6rem .8rem;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:1rem;
  line-height:1.5;transition:border-color var(--t),box-shadow var(--t)}
.inp:focus{border-color:var(--o500);outline:none;box-shadow:0 0 0 3px var(--o50)}
.inp[readonly],.inp[disabled]{background:var(--raised);color:var(--muted)}
textarea.inp{min-height:96px;resize:vertical}
.hint{font-size:.78rem;line-height:1.7;color:var(--faint)}
.fgrid{display:grid;gap:.9rem}
/* حقل السرّ وزرّ الإظهار داخله */
.pw{position:relative}
.pw .inp{padding-inline-end:3.4rem}
.pw button{position:absolute;inset-inline-end:5px;top:50%;transform:translateY(-50%);
  min-height:38px;padding-inline:.6rem;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:.8rem;font-weight:700;color:var(--o700)}
.err{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line);
  padding:.6rem .8rem;font-size:.86rem;line-height:1.6}
/* مقياس قوّة كلمة السر: خمس درجات، والامتلاء وحده يتكلّم لا اللون
   الأحمر — كلمة سرّ قصيرة ليست خطأً بعد، هي مرحلة. */
.pwm{display:flex;gap:3px;margin-block-start:.4rem}
.pwm i{flex:1;height:4px;background:var(--line-2)}
.pwm i.on{background:var(--o400)}
.pwm i.full{background:var(--ok)}

.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:var(--pad-x)}
.login-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-2);padding:1.75rem 1.4rem;display:flex;flex-direction:column;gap:.9rem}
.login-head{text-align:center;display:flex;flex-direction:column;align-items:center;
  gap:.4rem;margin-block-end:.4rem}
.login-head img{width:56px;height:56px;padding:8px;background:var(--o50)}
.login-head h1{font-size:1.2rem}
.login-foot{display:flex;flex-direction:column;gap:.55rem;margin-block-start:.3rem}


/* ═══════════════════════════════════════════════════════════════════
   7 · الأشرطة والحبّات والشارات
   ═══════════════════════════════════════════════════════════════════ */
.band{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.75rem .9rem;font-size:.88rem;line-height:1.65}
.band.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.band.bad{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
.band.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.band.info{background:var(--raised);color:var(--muted);border:1px solid var(--line)}
.band b{font-weight:700}
.band > .grow{min-width:min(100%,10rem)}
/* الابن الوحيد بالشريط الذي يأخذ margin auto */
.band > .btn{margin-inline-start:auto}

.pill{display:inline-flex;align-items:center;padding:.22rem .6rem;
  font-size:.72rem;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.mut{background:var(--raised);color:var(--muted)}
.pill.live{background:var(--o100);color:var(--o800)}

/* شارة حال الاشتراك أعلى بطاقة الكورس. جهة النهاية لا البداية: جهة
   البداية يشغلها العنوان، والشارة حال لا عنوان. */
.st{position:absolute;inset-block-start:.7rem;inset-inline-end:.7rem;z-index:2;
  display:inline-flex;align-items:center;padding:.15rem .55rem;
  font-size:.7rem;font-weight:700;white-space:nowrap}
.st.ok{background:var(--o50);color:var(--o800)}
.st.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.st.off{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
.st.full{background:var(--raised);color:var(--muted);border:1px solid var(--line)}


/* ═══════════════════════════════════════════════════════════════════
   8 · طبقة الصور
   منقولة من tokens.css لا مخترعة. بدون الهالة يطفو الجسم بلا أرضية
   فيبان ملصوقاً على الورقة. الأصول تحمل قناة ألفا حقيقية، فلا قناع
   ولا mix-blend-mode: الأول يفشل حين تكون البطاقة أفتح من الصورة،
   والثاني يقضم أطراف الجسم.
   ═══════════════════════════════════════════════════════════════════ */
.is-obj{position:relative;isolation:isolate;display:block;
  background:transparent;border:0;overflow:visible}
.is-obj img{display:block;max-width:100%}
.is-obj::before{content:"";position:absolute;inset:14% 16% 6%;z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 64%,rgba(249,115,22,.07),transparent 70%)}
/* مشهد داخل إطار: cover بحواف واسعة وشعرة داخلية تمنع الالتصاق */
.is-scene{position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,17,16,.05),0 8px 22px -14px rgba(20,17,16,.28)}
.is-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,17,16,.07)}
.is-scene img{border-radius:inherit}


/* ═══════════════════════════════════════════════════════════════════
   9 · مقاييس التقدّم
   ثلاثة مستويات ولكل واحد شكله: الكورس شريط وحلقة، الوحدة حلقة
   صغيرة، المحاضرة خيط. الطالب يميّزها بالشكل قبل أن يقرأ رقماً.
   ═══════════════════════════════════════════════════════════════════ */
.meter{display:flex;height:8px;overflow:hidden;background:var(--line-2)}
.meter.lg{height:12px}
.meter > i{display:block;height:100%;width:0;background:var(--o500);
  transition:width var(--t2) var(--ease)}
.meter.ok > i{background:var(--ok)}
.meter-l{display:flex;align-items:center;gap:.32ch .5rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--faint)}
.meter-l b{color:var(--ink);font-weight:700}

/* الحلقة: قوس مخروطي بـ--p (رقم 0 إلى 100) عبر سمة style، بلا SVG
   وبلا رسم ديناميكي وبلا طلب شبكة. */
.ring{position:relative;flex-shrink:0;width:52px;height:52px;
  display:grid;place-items:center;
  background:conic-gradient(var(--o500) calc(var(--p,0) * 1%),var(--line-2) 0)}
.ring::after{content:"";position:absolute;inset:4px;background:var(--surface)}
.ring.done{background:var(--ok)}
.ring b{position:relative;z-index:1;font-size:.76rem;font-weight:700;color:var(--o800);
  font-variant-numeric:lining-nums tabular-nums}
.ring.done b{color:var(--ok)}
.ring.zero{background:var(--line-2)}
.ring.zero b{color:var(--faint)}

/* حلقة الوحدة: نفس التقنية بمقاس أصغر، ورقم الوحدة داخلها بدل النسبة */
.uring{position:relative;flex-shrink:0;width:34px;height:34px;
  display:grid;place-items:center;
  background:conic-gradient(var(--o500) calc(var(--p,0) * 1%),var(--line-2) 0)}
.uring::after{content:"";position:absolute;inset:3px;background:var(--surface)}
.uring.done{background:var(--ok)}
.uring b{position:relative;z-index:1;font-size:.72rem;font-weight:700;color:var(--o800)}
.uring.done b{color:var(--ok)}

/* الخيط اللاصق بصفحة المشاهدة: الجواب الدائم على «وين وصلت بالكورس»
   بلا كلمة ولا مساحة. يمتدّ للحافّة بهامش سالب — الخيط الممتدّ يُقرأ
   تقدّماً، والخيط المحاصر بهامش يُقرأ حدّاً. */
.rail{position:sticky;top:var(--top-h);z-index:30;display:flex;height:3px;
  margin-inline:calc(var(--pad-x) * -1);margin-block-end:.5rem;background:var(--line-2)}
.rail > i{display:block;height:100%;width:0;background:var(--o-btn);
  transition:width var(--t2) var(--ease)}
/* خيط المحاضرة الحيّ تحت المشغّل مباشرة */
.lbar{display:flex;height:4px;background:var(--line-2)}
.lbar > i{display:block;height:100%;width:0;background:var(--o400);
  transition:width var(--t2) var(--ease)}
/* خيط داخل صفّ محاضرة جارية */
.lprog{display:block;height:3px;margin-block-start:.4rem;overflow:hidden;
  background:var(--line-2)}
.lprog > i{display:block;height:100%;background:var(--o400)}

/* العدّاد التنازلي: «مفتوح بلا حدّ» أخضر، «باقي 12 يوم» برتقالي،
   «تخلص خلال يومين» تحذير، «انتهت مدّتك» منع. */
.cd{font-size:.78rem;font-weight:700;color:var(--o700);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums}
.cd.soon{color:var(--warn)}
.cd.over{color:var(--bad)}
.cd.none{color:var(--ok)}


/* ═══════════════════════════════════════════════════════════════════
   10 · بطاقة القرار .now — «سوِّ هذا الآن»
   بصدارة كل صفحة تقرّرها القاعدة: خمسة أوضاع بترتيب ثابت مُعلَن
   (resume · next · renew · done · empty)، فالطالب يتعلّم يثق بها.
   ═══════════════════════════════════════════════════════════════════ */
.now{position:relative;overflow:hidden;padding:1.15rem 1.05rem 1.25rem;
  background:linear-gradient(160deg,var(--o50),var(--surface) 64%);
  border:1px solid var(--o200);box-shadow:var(--sh-2)}
/* لا مدّة ولا تقدّم يُعرضان بهذين الوضعين، فتُنزع الحرارة عن البطاقة */
.now.now-renew,.now.now-empty{background:var(--surface);border-color:var(--line)}
/* الصورة خلف النصّ بشفافية: قصّها على الشاشة الضيّقة لا يخسر الطالب
   شيئاً، والنصّ يحتفظ بتباينه كاملاً فوقها. */
.now > picture{position:absolute;z-index:0;inset-block-start:-10%;
  inset-inline-end:-12%;width:58%;max-width:270px;opacity:.5;pointer-events:none}
.now > picture.is-obj::before{display:none}   /* خلفية لا جسم، فلا هالة */
.now-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:.5rem;
  min-width:0}
.now-t{font-size:1.2rem;line-height:1.42;padding-inline-end:30%}
.now-s{font-size:.85rem;color:var(--muted)}
.now-bar{display:flex;align-items:center;gap:.6rem}
.now-bar .meter{flex:1;min-width:0}
.now-go{margin-block-start:.4rem}


/* ═══════════════════════════════════════════════════════════════════
   11 · الرفّ: .grid و.ccard
   بلا صورة عمداً: رفّ بستّ صور يؤخّر أول رسم على شبكة بطيئة، والحلقة
   والشريط أنفع للطالب من رسم.
   ═══════════════════════════════════════════════════════════════════ */
.grid{display:grid;gap:.75rem;grid-template-columns:1fr}
.ccard{position:relative;display:flex;flex-direction:column;gap:.6rem;
  width:100%;padding:.95rem .9rem 1rem;text-align:start;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-family:inherit;color:inherit;
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),
    transform var(--t) var(--ease)}
.ccard:active{transform:scale(.988)}
@media(hover:hover){.ccard:hover{border-color:var(--o300);box-shadow:var(--sh-2)}}
.ccard .head{display:flex;align-items:center;gap:.7rem}
.ccard .head .stack{flex:1;min-width:0}
.ccard .cat{font-size:.73rem;font-weight:700;color:var(--o700)}
.ccard .nm{font-size:1.04rem;font-weight:700;line-height:1.42;
  padding-inline-end:4.5rem;                    /* مكان الشارة العائمة */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard .rs{font-size:.83rem;line-height:1.7;color:var(--muted)}
.ccard .ft{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--faint)}
/* «كمّل» أو «ابدأ» أو «شوف المنهج»: النصّ يتبدّل ولا يختفي أبداً */
.ccard .more{font-weight:700;color:var(--o700);display:inline-flex;align-items:center}
.ccard .more::after{content:"";display:inline-block;width:7px;height:7px;
  margin-inline-start:.35rem;transform:rotate(-45deg);
  border-block-start:2px solid currentColor;border-inline-end:2px solid currentColor}


/* ═══════════════════════════════════════════════════════════════════
   12 · المنهج: .units و.unit و.leaf
   <details name="unit"> أصيل: المتصفّح يقفل البقيّة بنفسه، بلا أكورديون
   بالجافاسكربت. وعشرون وحدة مفتوحة تطوّل الصفحة وتُفقد المقارنة.
   ═══════════════════════════════════════════════════════════════════ */
.units{display:grid;gap:6px}
.unit{overflow:hidden;background:var(--surface);border:1px solid var(--line-2)}
.unit summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:.6rem;min-height:56px;padding:.5rem .7rem}
.unit summary::-webkit-details-marker{display:none}
.unit[open] summary{background:var(--o50)}
.unit.full summary{background:var(--ok-bg)}
.unit[open] .uring::after{background:var(--o50)}
.unit.full .uring::after{background:var(--ok-bg)}
.ustack{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.ut{font-size:.94rem;font-weight:700;line-height:1.45}
.us{font-size:.78rem;line-height:1.55;color:var(--faint);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.un{flex-shrink:0;font-size:.75rem;color:var(--faint);white-space:nowrap}
.unit .chev{flex-shrink:0;width:8px;height:8px;transform:rotate(45deg);
  border-inline-end:2px solid var(--faint);border-block-end:2px solid var(--faint);
  transition:transform var(--t) var(--ease)}
.unit[open] .chev{transform:rotate(-45deg)}
/* حشوة منطقية لا فيزيائية: padding:0 .8rem .8rem 3rem تقع إزاحتها
   يساراً داخل صفحة RTL، وهي غلطة النسخة الأصلية بصفحة الأكاديمية. */
.unit .ud{display:grid;gap:2px;padding-block:0 .55rem;padding-inline:.5rem}
.upad{padding:.6rem .65rem}

/* صفّ المحاضرة بحالاته الأربع: متاحة · جارية · مكتملة · مقفلة */
.leaf{display:flex;align-items:center;gap:.55rem;width:100%;min-height:52px;
  padding:.6rem;text-align:start;background:transparent;border:0;
  font-family:inherit;color:inherit;cursor:pointer;
  transition:background var(--t) var(--ease)}
@media(hover:hover){.leaf:hover{background:var(--o50)}}
/* الحالي: شعرة جانبية داخلية لا ظلّ فيزيائي. الظلّ الفيزيائي يطلع يسار
   الصفّ بصفحة عربية، وهذا خطأ .prof-side القائم اليوم. */
.leaf[aria-current="true"]{background:var(--o50);box-shadow:inset 3px 0 0 var(--o-btn)}
.leaf[aria-current="true"] .lt{color:var(--o800)}
.leaf .lno{flex-shrink:0;width:1.7rem;font-size:.74rem;color:var(--faint);
  font-variant-numeric:tabular-nums}
.leaf .grow{display:flex;flex-direction:column;min-width:0}
.leaf .lt{font-size:.9rem;font-weight:700;line-height:1.55}
.lmeta{display:flex;flex-wrap:wrap;gap:.32ch .55rem;margin-block-start:.1rem;
  font-size:.75rem;color:var(--faint)}
.leaf .lm{flex-shrink:0;font-size:.76rem;color:var(--faint);
  font-variant-numeric:tabular-nums}
/* المشبك مرسوم بحدود: أيقونة بلا ملفّ وبلا SVG وبلا طلب شبكة */
.clip::before{content:"";display:inline-block;width:9px;height:12px;
  margin-inline-end:.3rem;vertical-align:-1px;border:1.5px solid currentColor;
  border-radius:5px 5px 3px 3px}

/* مكتملة · علامة مرسومة، لا تبديل وزن خطّ شبه غير مرئي */
.leaf.done .lt{font-weight:400;color:var(--muted)}
.tick{position:relative;flex-shrink:0;width:20px;height:20px;background:var(--ok-bg)}
.tick::after{content:"";position:absolute;inset-block-start:4px;
  inset-inline-start:7px;width:5px;height:9px;transform:rotate(45deg);
  border:2px solid var(--ok);border-block-start:0;border-inline-start:0}

/* متاحة · سهم يشير لجهة تقدّم القراءة. الوسم dir="rtl" بكل صفحة، فـ
   border-inline-end يصير الحدّ الأيسر، والدوران السالب يوجّهه يساراً. */
.go{flex-shrink:0;width:8px;height:8px;transform:rotate(-45deg);
  border-block-start:2px solid var(--o700);border-inline-end:2px solid var(--o700)}

/* مقفلة · هادئة لا ممنوعة. بلا أحمر وبلا band وبلا زرّ: لو كانت زرّاً
   لضغطها الطالب مرّات وانتظر شيئاً ما راح يصير. تبقى صفّاً خاملاً
   يشرح نفسه، ويحتفظ بمدّته فيشوف شنو جاي بدل أن يُحجب عنه. */
.leaf.locked{background:var(--raised);cursor:default;align-items:flex-start}
.leaf.locked:hover{background:var(--raised)}
.leaf.locked .lt{font-weight:400;color:var(--muted)}
.leaf.locked .why{display:block;margin-block-start:.1rem;font-size:.78rem;
  line-height:1.6;color:var(--faint)}
.lock{position:relative;flex-shrink:0;width:14px;height:14px;
  margin-block-start:.4rem;border:1.5px solid var(--faint)}
.lock::before{content:"";position:absolute;inset-block-end:100%;inset-inline:3px;
  height:5px;border:1.5px solid var(--faint);border-block-end:0;
  border-start-start-radius:4px;border-start-end-radius:4px}

/* رأس صفحة المنهج وبطاقة إتمام الكورس */
.chead{display:flex;flex-direction:column;gap:.6rem;margin-block-end:var(--s3)}
.chead .row{gap:.6rem}
.done-card{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;
  background:var(--o50);border:1px solid var(--o200);margin-block-end:.9rem}
.done-card picture{flex-shrink:0;display:block;width:64px}
.done-card b{font-size:.98rem}
.done-card .stack{gap:.4rem;min-width:0}


/* ═══════════════════════════════════════════════════════════════════
   13 · المشاهدة: المسرح وطبقته وشريط الأدوات وورقة المنهج
   ترتيب المتن ثابت: rail · ladder · h1 · stage · lbar · pbar · tabs
   · upnext · foot · jump · sheet. العنوان فوق المشغّل لا تحته.
   ═══════════════════════════════════════════════════════════════════ */
.watch{display:flex;flex-direction:column}   /* الإيقاع بالهوامش لا بـgap */
.ladder{display:flex;align-items:center;flex-wrap:wrap;gap:.32ch .45rem;
  min-height:38px;font-size:.8rem;color:var(--faint)}
.lad-c{color:var(--o700);font-weight:700}
.lad-u{color:var(--muted);font-weight:700}
.lad-d{opacity:.5}
.wt{font-size:1.15rem;font-weight:700;line-height:1.35;margin-block-end:.5rem}

/* المسرح: أسود دافئ، بلا تدرّج ولا زجاج ولا حركة. على الهاتف يمتدّ
   للحافّتين — كل بكسل عرض يهمّ. */
.stage{position:relative;display:grid;place-items:center;overflow:hidden;
  aspect-ratio:16/9;background:var(--stage);
  margin-inline:calc(var(--pad-x) * -1)}
.stage video{width:100%;height:100%;display:block;object-fit:contain;
  background:var(--stage)}

/* طبقة واحدة بستّ حالات بدل ستّ لوحات متفرّقة:
   play · resume · done · expired · stalled · idle */
.ovl{position:absolute;inset:0;z-index:3;display:grid;place-content:center;
  justify-items:center;gap:.7rem;padding:var(--s3);text-align:center;color:#F3EEEA;
  background:linear-gradient(180deg,rgba(11,9,8,.55),rgba(11,9,8,.92))}
.ovl b{font-size:1rem;font-weight:700}
.ovl p{font-size:.86rem;line-height:1.7;color:#C9BFB8;max-width:26rem}
.ovl .btn{min-width:min(100%,15rem)}
.ovl[data-s="done"],.ovl[data-s="expired"]{background:rgba(11,9,8,.94)}
/* البوستر خلفية الطبقة نفسها بحالات play وresume وidle */
.ovl[data-s="play"],.ovl[data-s="resume"],.ovl[data-s="idle"]{padding:0;
  background:var(--stage)}
.ovl > picture{position:absolute;inset:0;z-index:-1}
.ovl > picture img{width:100%;height:100%;object-fit:cover;opacity:.5}
.ovl > picture.is-obj::before{display:none}

/* البوستر بعرض الشاشة كلّها هو زرّ التشغيل: النقرة عليه إيماءة مستخدم
   صالحة داخل نفس المستند، فسياسة التشغيل التلقائي بـiOS تمرّ ويبدأ
   الفيديو بنفس اللمسة. هذي النقرة الموفَّرة هي الفرق بين نقرتين وثلاث. */
.ovl-play{width:76px;height:76px;border:0;cursor:pointer;display:grid;
  place-items:center;background:var(--o-btn);box-shadow:var(--sh-o)}
.ovl-play[aria-disabled="true"]{opacity:.45;cursor:default}
/* حدود فيزيائية لا منطقية بقصد: شارة التشغيل تتبع شريط الوقت بالفيديو
   لا اتّجاه الصفحة، ولو كتبناها inline لانقلبت وصارت تقول «رجوع». */
.ovl-play::after{content:"";width:0;height:0;margin-left:6px;
  border-left:22px solid #fff;border-top:13px solid transparent;
  border-bottom:13px solid transparent}
.ovl-cap{position:absolute;inset-block-end:12px;inset-inline-start:14px;
  color:#fff;font-size:.82rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.75)}

/* العلامة المائية: بلا nowrap وبعرض مقيّد. nowrap عند 78% داخل حاوية
   overflow:hidden يقصّ ثلاثة مواضع من تسعة على شاشة 320px فيفرغ غرض
   العلامة بالضبط. ستّة مواضع تبقى داخل الإطار كلّها. */
.wm{position:absolute;z-index:2;pointer-events:none;user-select:none;
  top:calc(var(--wy,50) * 1%);inset-inline-start:calc(var(--wx,50) * 1%);
  max-width:44%;white-space:normal;overflow-wrap:anywhere;line-height:1.35;
  opacity:.17;font-size:.72rem;font-weight:700;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  transition:top var(--t2) var(--ease),inset-inline-start var(--t2) var(--ease)}

/* شريط الأدوات: أزرار كبيرة لأن الإصبع على الهاتف أعرض من أي أيقونة */
.pbar{display:flex;align-items:center;gap:.45rem;margin-block-start:.7rem}
.skip{flex:1;min-height:48px;min-width:5.5rem}   /* بلا 6.5rem صلبة تسبّب اللفّ */
/* مبدّل السرعة زرّ واحد بقائمة، لا خمسة أزرار 36px تلفّ على شاشة 320px */
.spd{position:relative;flex-shrink:0}
.spd-b{min-height:48px;min-width:4.4rem;font-variant-numeric:tabular-nums}
.spd-m{position:absolute;inset-block-end:calc(100% + 6px);inset-inline-end:0;
  z-index:20;display:none;flex-direction:column;gap:2px;padding:4px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3)}
.spd[data-open="1"] .spd-m{display:flex}
.spd-m button{min-height:44px;min-width:6rem;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:700;font-variant-numeric:tabular-nums}
.spd-m button[aria-checked="true"]{background:var(--o-btn);color:#fff}

/* بطاقة «الجاية» ساكنة تحت المشغّل: لا عدّاد ولا قفزة تلقائية.
   التقديم التلقائي يخطف الطالب من نصّ يقرؤه ويكسر زرّ الرجوع بحلقة
   لا مخرج منها (يقفز عند 90% ⇒ الرجوع يستأنف عند 90% ⇒ يقفز ثانيةً). */
.upnext{display:flex;align-items:center;gap:.75rem;margin-block-start:.9rem;
  padding:.8rem .85rem;background:var(--surface);border:1px solid var(--o200);
  box-shadow:var(--sh-1)}
.upnext picture{flex-shrink:0;display:block;width:52px}
.upnext .stack{gap:.3rem;min-width:0}
.upnext b{font-size:.95rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ذيل الصفحة: مكان الزرّ تحت الإبهام ما يتحرّك بين محاضرة وأخرى،
   فالزرّ يصير معطّلاً عند الطرف ولا يختفي. */
.foot{display:flex;flex-direction:column;gap:.5rem;margin-block-start:var(--s3)}
.foot .btn{width:100%}

/* زرّ فتح الورقة: يحمل عدّاداً «4/20» فحتى والورقة مغلقة يبقى الموضع
   مقروءاً، ويبقى لاصقاً بأسفل الشاشة فما يحتاج الطالب يمرّر ليجده. */
.jump{position:sticky;inset-block-end:calc(.6rem + env(safe-area-inset-bottom));
  z-index:35;align-self:flex-start;min-height:48px;margin-block-start:var(--s3)}
.bars{position:relative;flex-shrink:0;width:16px;height:12px;
  border-block:2px solid currentColor}
.bars::after{content:"";position:absolute;inset-block-start:4px;inset-inline:0;
  height:2px;background:currentColor}
.tc{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;
  padding-inline:.3rem;font-size:.72rem;background:var(--raised);color:var(--faint);
  font-variant-numeric:lining-nums tabular-nums}

/* ورقة المنهج: عقدة واحدة بمظهرين. عقدتان تفترقان بأول تعديل، وهذا
   وقع سابقاً بهذا المشروع. تُبنى مرّة، وتصير عموداً لاصقاً فوق 960
   بقاعدة CSS واحدة بلا سطر شيفرة شرطي وبلا إعادة رسم عند التدوير. */
.sheet{position:fixed;inset-block-end:0;inset-inline:0;z-index:70;
  display:flex;flex-direction:column;max-height:86dvh;
  background:var(--surface);box-shadow:var(--sh-3);visibility:hidden;
  padding:.4rem .5rem calc(.75rem + env(safe-area-inset-bottom));
  transform:translateY(101%);transition:transform var(--t2) var(--ease)}
.sheet[data-open="1"]{transform:none;visibility:visible}
.sheet-grab{width:44px;height:4px;margin:.35rem auto .45rem;background:var(--line)}
.sheet-head{display:flex;align-items:center;gap:.6rem;padding:.15rem .35rem .55rem}
.sheet-head b{font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.sheet-head .meter-l{flex-shrink:0}
/* التمرير داخل الورقة لا خلفها، وoverscroll يمنع سحب الصفحة تحتها */
.sheet .units{overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding-block:.5rem}
.sheet-scrim{z-index:68}


/* ═══════════════════════════════════════════════════════════════════
   14 · التبويبات
   التبويب موجود حتى بعدّاد صفر: غيابه يخلّي الطالب يظنّ أن المنصّة
   بلا ملفّات أصلاً.
   ═══════════════════════════════════════════════════════════════════ */
.tabs{display:flex;gap:.3rem;margin-block-start:var(--s3);
  border-block-end:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;display:inline-flex;align-items:center;gap:.4rem;
  min-height:48px;padding-inline:.85rem;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:700;color:var(--muted);
  white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--o700)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;
  inset-block-end:-1px;inset-inline:.4rem;height:3px;background:var(--o-btn);
  border-start-start-radius:3px;border-start-end-radius:3px}
.tabs button[aria-selected="true"] .tc{background:var(--o100);color:var(--o800)}
.tabp{padding-block-start:1rem}
.tabp:focus-visible{outline:2.5px solid var(--o700);outline-offset:4px}


/* ═══════════════════════════════════════════════════════════════════
   15 · المرفقات وصفحة الملفّات
   الصفّ كلّه زرّ بارتفاع 64px لا زرّ صغير بطرفه، والرابط يُطلب لحظة
   الضغط لا عند رسم القائمة.
   ═══════════════════════════════════════════════════════════════════ */
.att{display:flex;align-items:center;gap:.7rem;width:100%;min-height:64px;
  padding:.7rem .75rem;text-align:start;background:var(--surface);
  border:1px solid var(--line);cursor:pointer;font-family:inherit;color:var(--ink);
  transition:border-color var(--t) var(--ease)}
@media(hover:hover){.att:hover{border-color:var(--o300)}}
.att[aria-busy="true"]{pointer-events:none;opacity:.7}
.att .ic{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;
  font-family:var(--mo);font-size:.6rem;font-weight:600;
  background:var(--o50);color:var(--o800)}
.att .ic[data-k="img"]{background:var(--ok-bg);color:var(--ok)}
.att .ic[data-k="zip"]{background:var(--warn-bg);color:var(--warn)}
.att .at{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}
/* سطران لا قصّة نقاط: «محاضرة-3-تمارين.pdf» و«محاضرة-3-حلول.pdf» تُقرآن
   متطابقتين تماماً بصفّ واحد مقصوص. */
.at-t{font-size:.9rem;font-weight:700;line-height:1.5;overflow:hidden;
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.at-m{display:flex;flex-wrap:wrap;gap:.32ch .35rem;font-size:.76rem;color:var(--faint)}
.at-go{flex-shrink:0;align-self:center;min-width:4rem;text-align:center;
  font-size:.82rem;font-weight:700;color:var(--o700)}
.fgroup{display:grid;gap:.5rem;margin-block-start:var(--s3)}
.fgroup h2{font-size:.92rem;color:var(--muted);padding-block-start:.4rem}
.filter{margin-block:.9rem .6rem}


/* ═══════════════════════════════════════════════════════════════════
   16 · نصّ الدرس
   يُبنى بمحلّل صغير يخرج عقداً بـel()، لا بمكتبة ولا وسم خام.
   ═══════════════════════════════════════════════════════════════════ */
.md{font-size:.98rem;line-height:1.85;color:var(--ink);display:grid;gap:.85rem}
.md h2{font-size:1.12rem}
.md h3{font-size:1rem}
.md p{color:var(--muted)}
.md ul,.md ol{padding-inline-start:1.3rem;display:grid;gap:.35rem;color:var(--muted)}
.md a{color:var(--o700);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.md code{font-family:var(--mo);font-size:.86em;background:var(--raised);
  padding:.12rem .35rem}
.md pre{font-family:var(--mo);font-size:.82rem;line-height:1.7;background:var(--raised);
  border:1px solid var(--line-2);padding:.8rem;overflow-x:auto;direction:ltr;text-align:start}
.md pre code{background:none;padding:0}


/* ═══════════════════════════════════════════════════════════════════
   17 · البطاقات وقوائم مفتاح/قيمة
   ═══════════════════════════════════════════════════════════════════ */
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.5rem}
.card h3{font-size:.95rem}
.kv{display:grid;gap:.5rem}
.kv dt{font-size:.78rem;font-weight:700;color:var(--faint)}
.kv dd{font-size:.95rem;line-height:1.6}
/* بطاقة وقت الدراسة الأسبوعي بصفحة الحساب */
.week{align-items:center;text-align:center;gap:.4rem}
.week picture{display:block;width:min(180px,52%);margin-inline:auto}
.week .val{font-size:1.35rem;font-weight:700;
  font-variant-numeric:lining-nums tabular-nums}


/* ═══════════════════════════════════════════════════════════════════
   18 · الحالات: .pane و.solo والهياكل العظمية
   مكوّن واحد بوضعين يستبدل oops() المنسوخة و.empty المكرّرة. الرسالة
   تحمل إجراءً تالياً دائماً، وبلا كلمة «فشل» وبلا رمز خطأ: الطالب لا
   يقرأ رموزاً، ولو رأى «فشل» بلا إجراء اتّهم اشتراكه.
   ═══════════════════════════════════════════════════════════════════ */
.pane{display:flex;flex-direction:column;align-items:center;gap:.6rem;
  text-align:center;padding:var(--s4) var(--pad);
  background:var(--surface);border:1px dashed var(--line)}
.pane.bad{border-style:solid;border-color:var(--bad-line);background:var(--bad-bg)}
.pane picture{display:block;width:min(240px,52%);margin-inline:auto}
.pane img{width:100%;height:auto}
.pane b{font-size:1rem;color:var(--ink)}
.pane p{font-size:.88rem;line-height:1.7;color:var(--muted);max-width:30rem}
.pane .btn{margin-block-start:.35rem;min-width:min(100%,13rem)}

.spin{width:22px;height:22px;border:2.5px solid var(--line);
  border-top-color:var(--o-btn);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* الهيكل العظمي يُرسم فوراً بنفس مقاسات المحتوى القادم، فلا تقفز
   الصفحة لحظة وصول البيانات. */
.sk{height:14px;background:linear-gradient(90deg,var(--line-2),var(--raised),var(--line-2));
  background-size:200% 100%;animation:sk 1.2s linear infinite}
.sk.card{height:120px}
.sk.row{height:44px;margin-block:.25rem}
.sk.now{height:190px;margin-block-end:.9rem}
.sk.line{height:12px;width:60%}
@keyframes sk{to{background-position:-200% 0}}


/* ═══════════════════════════════════════════════════════════════════
   19 · الطبقات العائمة: الحجاب والنافذة والإشعار والنبضة
   ═══════════════════════════════════════════════════════════════════ */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(20,17,16,.42);
  display:grid;place-items:center;padding:var(--pad)}
.modal{width:min(520px,100%);max-height:86dvh;overflow-y:auto;background:var(--surface);
  box-shadow:var(--sh-3);padding:1.25rem;display:flex;flex-direction:column;gap:.8rem}
.modal h2{font-size:1.08rem}
.modal-foot{display:flex;gap:.6rem;justify-content:flex-start;margin-block-start:.25rem}

/* حاوية واحدة عمودية: الإشعار الملحق بموضع ثابت بلا رصّ يعني أن
   إشعارين بنفس الثانية يُرسمان فوق بعض حرفياً. */
.toasts{position:fixed;inset-block-end:1.25rem;inset-inline:1rem;z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  pointer-events:none}
.toast{max-width:min(28rem,100%);background:var(--ink);color:#fff;
  padding:.7rem 1.1rem;font-size:.88rem;line-height:1.6;box-shadow:var(--sh-3);
  opacity:0;transform:translateY(12px);pointer-events:auto;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.toast.in{opacity:1;transform:translateY(0)}
.toast.bad{background:var(--bad)}

/* نبضة الإنجاز: تظهر لحظة ما تقول القاعدة «انكملت»، بنفس اللحظة التي
   ينقلب فيها صفّ المحاضرة ويزيد خيط الكورس وحلقة الوحدة. */
.pop{position:fixed;z-index:80;inset-block-end:1rem;inset-inline:1rem;
  display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;
  background:var(--surface);border:1px solid var(--o200);box-shadow:var(--sh-3);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.pop.in{opacity:1;transform:translateY(0)}
.pop picture{flex-shrink:0;display:block;width:52px}
.pop-t{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pop b{font-size:.95rem}


/* ═══════════════════════════════════════════════════════════════════
   20 · لا زاوية حادّة — قرار المالك، ويسري على الهاتف والحاسبة معاً
   هذي هي الكتلة الوحيدة التي تحمل border-radius بالورقة. أي صنف جديد
   يحمل خلفية أو إطاراً أو ظلّاً يُضاف هنا بنفس اللحظة، لا بمراجعة
   قادمة. الاستثناءات مذكورة صراحةً بأسفل الكتلة وحدها.
   ═══════════════════════════════════════════════════════════════════ */
.crumb,.md code,.att .ic,.spd-m button,.pwm i{border-radius:var(--r-s)}
.inp,.err,.unit,.att,.pane,.md pre,.sk,.leaf,.spd-m,.upnext,.done-card,
.brand img,.solo-card > img,.login-head img{border-radius:var(--r-m)}
.card,.band,.modal,.toast,.pop,.login-card,.solo-card,.week,
.is-scene{border-radius:var(--r-l)}
.ccard,.now{border-radius:var(--r-xl)}
/* .nav a تحمل أرضية بالمرور وبالصفحة الحالية، فغيابها من هنا يعطي
   حبّة تنقّل حادّة الزوايا — وهي المخالفة نفسها التي وقعت بالموقع. */
.btn,.nav a,.st,.pill,.meter,.meter > i,.lprog,.lprog > i,.tc,
.sheet-grab{border-radius:var(--r-f)}
.btn-p,.btn-s,.btn-d{border-radius:var(--r-m)}
.ring,.ring::after,.uring,.uring::after,.tick,.ovl-play,.spin{border-radius:50%}
.lock{border-radius:3px}
/* الورقة تصعد من أسفل الشاشة، فحوافّها العلوية وحدها منحنية */
.sheet{border-start-start-radius:var(--r-xl);border-start-end-radius:var(--r-xl)}
/* استثناءات مقصودة: خيوط لا صناديق، وفاصل خطّ، وحجاب يغطّي الشاشة،
   ومسرح يمتدّ لحافّتَي الهاتف. */
.sep,.scrim,.rail,.rail > i,.lbar,.lbar > i,.stage{border-radius:0}


/* ═══════════════════════════════════════════════════════════════════
   21 · الحاسبة — ولا قاعدة واحدة خارج هذي الحرّاس
   الهاتف مُنجَز أعلاه، وأي بكسل يتحرّك تحت 560 يُعدّ خطأً لا تحسيناً.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 560: الشاشة صارت تحمل عمودين، والمسرح يرجع داخل الهامش ── */
@media(min-width:560px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage{margin-inline:0;border-radius:var(--r-l)}
  .rail{margin-inline:0}
  .foot{flex-direction:row;align-items:center}
  .foot .btn{width:auto;flex:1;min-width:0}
}

/* ── 720: الحاسبة ── */
@media(min-width:720px){
  :root{--pad-x:32px;--top-h:58px}
  .shell{padding:var(--s4) var(--pad-x) var(--s5)}
  .page-head h1{font-size:1.7rem}
  .sec-head h2{font-size:1.15rem}

  .now{padding:1.6rem 1.5rem}
  .now-t{font-size:1.5rem;padding-inline-end:34%}
  .now-go{width:auto;align-self:flex-start;min-width:14rem}

  .unit .ud{padding-inline-start:2.9rem;padding-inline-end:.9rem}
  .wt{font-size:1.4rem}
  .md{font-size:1.04rem}
  .wm{font-size:.8rem}

  .fgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login-card{padding:2rem 1.75rem}
  .modal{padding:1.5rem}
  /* الإشعار يلتصق بجهة البداية بدل التوسّط: الشاشة عريضة، وإشعار
     بمنتصفها يقطع مسار العين على المحتوى. */
  .toasts{inset-inline:auto 1.5rem;align-items:flex-end}
  .pop{inset-inline:auto 1.5rem;width:22rem}
}

/* ── 960: الرفّ ثلاثة أعمدة، والورقة تصير عموداً لاصقاً ── */
@media(min-width:960px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* القاعدة الوحيدة التي تُسقط مقايضة «ورقة تُفتح بزرّ» كلّياً على
     الحاسبة ولا تُبقيها إلا حيث تكون رابحة. نفس العقد، بلا شيفرة. */
  .jump,.sheet-grab,.sheet-x,.sheet-scrim{display:none}
  .watch{display:grid;grid-template-columns:minmax(0,1fr) var(--side);
    gap:var(--s3);align-items:start}
  /* كل أبناء المتن بالعمود الأول، والورقة وحدها بالثاني ممتدّة على
     كل الصفوف حتى يشتغل التثبيت داخل منطقتها. */
  .watch > *{grid-column:1;min-width:0}
  .watch > .sheet{grid-column:2;grid-row:1 / span 60;align-self:start;
    position:sticky;inset:auto;transform:none;visibility:visible;
    top:calc(var(--top-h) + 20px);max-height:calc(100dvh - var(--top-h) - 40px);
    padding:.55rem;background:var(--surface);border:1px solid var(--line);
    box-shadow:var(--sh-1);border-radius:var(--r-l)}
}


/* ═══════════════════════════════════════════════════════════════════
   22 · تقليل الحركة — وأي حركة جديدة تُكتب داخل هذا الحارس
   الشارة تظهر وتختفي بلا انزلاق، ولا تُحذف.
   ═══════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .pop,.toast{opacity:1;transform:none}
}


/* ═══════════════════════════════════════════════════════════════════
   23 · توافق مؤقّت أثناء الترحيل
   الصفحات تُعاد كتابتها ورشةً ورشة، وبينهما لحظة تكون فيها صفحة قديمة
   وصفحة جديدة منشورتين معاً. هذي الأسماء القديمة تبقى مرسومة حتى
   تختفي من آخر ملفّ، ثم تُحذف هذي الكتلة كلّها بلا بديل.
   ═══════════════════════════════════════════════════════════════════ */
.empty{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  text-align:center;padding:var(--s5) var(--pad);color:var(--muted);
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-m)}
.empty b{font-size:1rem;color:var(--ink)}
.empty p{font-size:.88rem;max-width:32rem}
.empty picture{display:block;width:min(220px,58%);margin-inline:auto}
.countdown{font-size:.78rem;font-weight:700;color:var(--o700);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums}
.countdown.soon{color:var(--warn)}
.countdown.none{color:var(--ok)}
.player{position:relative;display:grid;place-items:center;overflow:hidden;
  aspect-ratio:16/9;background:var(--stage);border-radius:var(--r-l)}
.player video{width:100%;height:100%;display:block;object-fit:contain;background:var(--stage)}
.player .ph{color:#8B8078;font-size:.86rem}
.speed{display:inline-flex;gap:2px;padding:3px;background:var(--raised);
  border:1px solid var(--line);border-radius:var(--r-m)}
.speed button{min-height:36px;padding-inline:.6rem;border:0;background:none;
  cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:700;
  color:var(--muted);border-radius:var(--r-s);font-variant-numeric:tabular-nums}
.speed button[aria-pressed="true"]{background:var(--o-btn);color:#fff}
.prof{display:grid;gap:var(--s3);align-items:start}
.prof-side{display:flex;flex-direction:column;gap:.3rem;padding:.55rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l)}
.prof-side h2{font-size:.9rem;padding:.3rem .5rem .4rem}
.unit .no{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;
  border-radius:50%;background:var(--o50);color:var(--o800);
  font-family:var(--mo);font-size:.7rem;font-weight:600}
.unit .ut{flex:1;min-width:0}
@media(min-width:960px){
  .prof{grid-template-columns:minmax(0,1fr) var(--side)}
  .prof > .prof-side{position:sticky;top:calc(var(--top-h) + 16px);
    max-height:calc(100dvh - var(--top-h) - 32px);overflow-y:auto}
}