/* منصة شاطر — الهوية البصرية (مستوحاة من reference/lesson1_quiz.html) */
:root{
  --board:#1F4D3D; --board-dark:#173A2E; --paper:#FFFDF5;
  --sun:#FFC53D; --sky:#3DA5D9; --coral:#F26B5B;
  --ink:#22303A; --green:#2E9E5B; --line:#E6DEC9;
  --ar:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  --en:'Fredoka','Cairo',system-ui,sans-serif;

  /* ===== حالات دلالية — مصدر واحد لكل لون ===== */
  --ok-bg:#E3F5EA;  --ok-border:#7BC89A; --ok-ink:#14572F;
  --bad-bg:#FDE7E4; --bad-border:#F2A196; --bad-ink:#8E2B22;
  --act-bg:#E2F1FA; --act-border:#7FC2E4; --act-ink:#15556F;
  --warm-bg:#FFF6DE; --warm-border:#EBD79E; --warm-hover:#FFF0C8;
  /* ⛔ سطحان محجوزان لهرمية الامتحان — **متستخدمهمش في أي حاجة تانية**.
     `--strip-bg` شريط رأس السؤال · `--sec-band` شريط القسم (السطح
     الأصفر العريض الوحيد في المشغّل). و`--warm-bg` تفضل هوية الودجت. */
  --strip-bg:#F6F1E4; --sec-band:#FFEDC9;
  /* ارتفاع اللزق فوق = شريط التنقّل ٤٨ + HUD الموبايل ~٦٤ + فرجة.
     ⚠️ ارتفاع الـHUD بيتغيّر مع عمود المؤقّت — راجعه لو الـHUD اتغيّر. */
  --stick:120px;
  --muted:#5C6B75;                       /* بديل كل الرماديات الباهتة */

  /* مقياس خطوط — ٦ درجات، الأرضية ١٣px */
  --fs-xs:13px; --fs-s:15px; --fs-m:17px; --fs-l:19px; --fs-xl:24px; --fs-2xl:32px;

  /* مسافات بأساس ٤ */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* أنصاف أقطار — ٣ مقاسات */
  --r-s:10px; --r-m:14px; --r-l:20px;

  /* العمق = وظيفة: الضغط للأزرار بس، والحاويات هادية */
  --card-shadow:0 1px 3px rgba(34,48,58,.07), 0 4px 14px rgba(34,48,58,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ar); color:var(--ink); padding-bottom:60px;
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 20% 25%, #FFE9A8 0 5px, transparent 6px),
    radial-gradient(circle at 75% 70%, #BFE3F5 0 4px, transparent 5px),
    radial-gradient(circle at 45% 85%, #FFD3CC 0 3px, transparent 4px),
    radial-gradient(circle at 85% 20%, #CFEBD8 0 4px, transparent 5px);
  background-size:220px 220px;
}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}

/* ===== السبورة ===== */
.board{
  background:var(--board); border:8px solid #A9743F; border-radius:22px;
  margin:22px auto 0; padding:26px 22px 22px; color:#fff; text-align:center;
  box-shadow:0 12px 0 #8A5C31, 0 20px 30px rgba(0,0,0,.15);
}
.board .eyebrow{font-family:var(--en);letter-spacing:.14em;font-size:13px;color:#BFE3C9;text-transform:uppercase;margin:0 0 6px}
.board h1{font-family:var(--en);font-weight:600;font-size:clamp(24px,5vw,38px);margin:0;line-height:1.15}
.board h2{font-weight:700;font-size:clamp(14px,3.4vw,18px);margin:10px 0 0;color:#FFE9A8}

/* ===== شريط التقدّم + برطمان النجوم ===== */
/* ⚠️ `hidden` لازم تكسب على `display` بتاع الكلاس.
   قاعدة المتصفح `[hidden]{display:none}` جاية من ورقة الـ UA، وأي قاعدة
   في ورقتنا بتغلبها — فـ `.hud{display:flex}` كانت بتخلّي برطمان النجوم
   ظاهرًا **قبل ما الامتحان يبدأ** رغم `hidden` في الـ HTML (اتكشف
   بالمتصفح 2026-08-12، مش بالقراءة). ونفس الشيء كان هيحصل للمؤقّت. */
[hidden]{display:none !important}

.hud{
  position:sticky;top:0;z-index:30;margin:18px 0 8px;
  background:rgba(255,253,245,.97);
  border:2px solid var(--line);border-radius:var(--r-l);padding:10px 14px;
  display:flex;align-items:center;gap:14px;box-shadow:0 2px 10px rgba(34,48,58,.10);
}
.jar{position:relative;width:54px;height:62px;flex:0 0 auto}
.jar .glass{position:absolute;inset:8px 4px 0 4px;border:2px solid #9CC7DA;border-top-width:0;border-radius:6px 6px 16px 16px;overflow:hidden;background:rgba(190,225,240,.25)}
.jar .lid{position:absolute;top:0;left:0;right:0;height:11px;background:var(--sky);border-radius:6px}
.jar .fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#FFD86B,#FFB020);transition:height .45s cubic-bezier(.34,1.4,.64,1)}
.jar .star{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:17px}
.hud-text{flex:1;min-width:0}
.hud-text b{font-size:16px}
.bar{height:12px;background:#EFE6D2;border-radius:99px;overflow:hidden;margin-top:6px}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sun),var(--coral));border-radius:99px;transition:width .4s ease}

/* ===== المؤقّت وإغلاق الامتحان =====
   جوّه الـ HUD اللي أصلاً sticky فوق — الطالب شايف الوقت والزرار في كل
   لحظة من غير ما يسكرول. العمود ضيّق عشان شاشة الموبايل 360px. */
.hud-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.timer{display:flex;align-items:center;gap:5px;justify-content:center;
  background:#EFF6FA;border:1.5px solid #9CC7DA;border-radius:99px;
  padding:4px 10px;font-size:15px;white-space:nowrap}
.timer b{font-family:var(--en);font-weight:700;font-variant-numeric:tabular-nums}
.timer.low{background:#FFEDEA;border-color:var(--coral);color:#B3341F;
  animation:tpulse 1s ease-in-out infinite}
@keyframes tpulse{50%{transform:scale(1.05)}}
.close-exam{background:#fff;border:1.5px solid var(--line);color:var(--muted);
  border-radius:99px;padding:4px 10px;font:inherit;font-size:13px;
  cursor:pointer;white-space:nowrap}
.close-exam:hover{border-color:var(--coral);color:var(--coral)}

.time-banner{margin:0 0 14px;padding:11px 14px;border-radius:var(--r-l);
  font-weight:700;text-align:center}
.time-banner.warn{background:#FFF6E0;border:1.5px solid var(--sun);color:#8A5A00}
.time-banner.no{background:#FFEDEA;border:1.5px solid var(--coral);color:#B3341F}

/* اختيار الوقت قبل الدخول — الافتراضي «من غير وقت» */
.timer-pick{background:#F7FBFD;border:1.5px solid var(--line);
  border-radius:var(--r-l);padding:12px 14px;margin:16px 0}
.timer-pick > label{display:block;font-weight:700;margin-bottom:7px}
.timer-pick select{width:100%;padding:9px 10px;border:1.5px solid var(--line);
  border-radius:10px;font:inherit;background:#fff}
.timer-when{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.timer-when small{color:var(--muted)}
.timer-when label{display:flex;align-items:center;gap:7px;font-size:15px}

/* تكوين الامتحان — التوزيع قبل البدء + تعديل للمحاولة الواحدة.
   ⚠️ **النسبة مش العدد**: العدد بيتغيّر مع شريط «كام سؤال؟» فالرقم
   المعروض كان هيبقى قديم بصمت. */
.mix-box{background:#F7FBFD;border:1.5px solid var(--line);
  border-radius:var(--r-l);padding:12px 14px;margin:16px 0}
.mix-title{display:block;font-weight:700;margin-bottom:6px}
.mix-now{margin:0;color:var(--muted);font-size:14px;line-height:1.9}
/* ⚠️ العنصر لازم يفضل قطعة واحدة — من غير كده «الكتابة ٦٪» بتتقسم
   والعلامة `٪` بتنزل لوحدها أول السطر اللي بعده. */
.mix-now span{white-space:nowrap}
.mix-now b{color:var(--ink,#173E4A)}
.mix-more{margin-top:10px}
.mix-more > summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--sea,#2E7D96)}
.mix-more > small{display:block;margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.7}
.mix-row{margin-top:11px}
.mix-name{display:block;font-size:14px;font-weight:700;margin-bottom:2px}
.mix-ctl{display:flex;align-items:center;gap:9px}
.mix-lab{font-size:12.5px;color:var(--muted);white-space:nowrap}
.mix-ctl input[type=range]{flex:1;min-width:0}
/* سطر العجز — بيتقال صراحةً قبل ما الامتحان يبدأ، والمحاولة بدأت عادي */
.mix-short{background:#FFF8E8;border:2px solid var(--sun)}
.mix-short ul{margin:8px 0 0;padding-inline-start:20px;color:var(--muted);font-size:14px;line-height:1.9}

/* 🚩 البلاغ على سؤال — خافت عن قصد: مش زرار بيتدوس بالغلط، ومش مخفي.
   ⚠️ **الرد بعد الإرسال نصّ ثابت** مهما كانت إجابة الطالب صح أو غلط —
   وإلا الزرار بيبقى أوراكل جوّه وضع الامتحان. */
.rep-box{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.rep-btn{background:none;border:0;padding:4px 0;font:inherit;font-size:13.5px;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rep-btn:hover{color:var(--coral)}
.rep-btn[disabled]{opacity:.5;cursor:default}
.rep-done{margin:4px 0 0;font-size:13.5px;color:var(--muted);font-weight:700}
.rep-form{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rep-form label{font-size:14px;display:flex;align-items:center;gap:7px}
.rep-note{width:100%;box-sizing:border-box;padding:8px 10px;border:1.5px solid var(--line);
  border-radius:10px;font:inherit;font-size:14px;resize:vertical}
.rep-send{align-self:flex-start;padding:7px 16px;border:0;border-radius:10px;
  background:var(--sea,#2E7D96);color:#fff;font:inherit;font-weight:700;cursor:pointer}

/* لافتة «عندك امتحان لسه مفتوح» */
.resume-box{background:#FFF8E8;border:2px solid var(--sun);
  border-radius:var(--r-l);padding:14px;margin:16px 0}
.resume-box > b{display:block;font-size:17px;margin-bottom:4px}
.resume-box > p{margin:0 0 12px;color:var(--muted);font-size:14px}

/* سؤال اتجاوب في جلسة سابقة — ساكن، مش قابل لإعادة الحل */
.done-q{opacity:.72;border-style:dashed}
.done-q.ok{border-color:#7BC47F}
.done-q.no{border-color:var(--coral)}

/* ===== البطاقات ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:20px 16px;margin:20px 0;box-shadow:var(--card-shadow);overflow-wrap:break-word}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.tag{font-family:var(--en);font-weight:600;font-variant-numeric:tabular-nums;background:var(--board);color:#fff;border-radius:12px;padding:6px 12px;font-size:13px;white-space:nowrap}
.card h3{margin:0;font-size:18px;font-weight:900}
.hint{margin:2px 0 16px;color:var(--muted);font-size:14px}

/* ===== السؤال ===== */
.q{border-top:2px dashed var(--line);padding:18px 0 8px}
.q:first-of-type{border-top:0}
.q-en{font-family:var(--en);direction:ltr;text-align:left;font-size:18px;font-weight:500;margin:0 0 6px;line-height:1.5}
.q-ar{font-size:14px;color:var(--muted);margin:0 0 12px}
/* عنوان السؤال لما المادة إنجليزي بس */
.q-en-head{font-family:var(--en);font-weight:600;font-size:var(--fs-m);
  text-align:start;line-height:1.5;flex:1;min-width:0}
/* الصورة/الإيموجي بتاع السؤال — كبيرة وواضحة، خصوصًا للسن الصغير */
.pic{
  font-size:clamp(72px,20vw,120px);line-height:1.1;margin:4px 0 14px;
  text-align:center;
}
.pic img{
  display:block;margin:0 auto;
  max-width:min(340px,88%);max-height:280px;
  border-radius:18px;border:2px solid var(--line);background:#fff;
}

/* خريطة صمّاء: العرض الكامل + فتح بحجمها الأصلي بالضغط.
   السقف ٣٤٠px فوق معمول لصور الكلمات الصغيرة — خريطة قارة جواه
   بتبقى أرقامها نقط على شاشة موبايل. */
.pic.map{margin-bottom:6px}
.pic.map img{max-width:100%;max-height:none;border-radius:12px}
.pic-zoom{display:block;text-align:center;font-size:12.5px;color:var(--muted);
  margin:-2px 0 12px;text-decoration:none}

.score-sub{margin:-6px 0 2px;font-weight:700;font-size:15px}
.score-sub b{color:#FFD86B}
.score-pts{margin:2px 0 10px;opacity:.8;font-size:14px}

/* ===== اختيار من متعدد ===== */
.opts{display:flex;flex-direction:column;gap:10px}
.opts.inline{flex-direction:row;flex-wrap:wrap}
.opt{
  font-size:17px;font-weight:500;direction:inherit;text-align:start;
  background:var(--warm-bg);border:2px solid var(--warm-border);color:var(--ink);
  border-radius:var(--r-m);padding:12px 16px;cursor:pointer;
  display:flex;align-items:center;gap:10px;min-height:44px;
  box-shadow:0 4px 0 var(--warm-border);
  transition:transform .12s ease,background .2s,border-color .2s,box-shadow .12s;
}
.opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--warm-border)}
.opt:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.opt .badge{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--coral);color:#fff;
  font-size:14px;font-weight:700;display:grid;place-items:center;
}
.opt.right{background:var(--ok-bg);border-color:var(--green);color:var(--ok-ink);box-shadow:0 4px 0 var(--ok-border)}
.opt.right .badge{background:var(--green)}
.opt.wrong{background:var(--bad-bg);border-color:var(--coral);color:var(--bad-ink);box-shadow:0 4px 0 var(--bad-border)}
.opt.chosen{border-color:var(--sky)}
.opt:disabled{cursor:default;box-shadow:none;transform:none}

/* ===== توصيل ===== */
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.mcol{display:flex;flex-direction:column;gap:10px}
.mitem{
  font-family:var(--en);direction:ltr;font-size:17px;font-weight:500;
  background:#F2F8FB;border:2px solid var(--act-border);border-radius:var(--r-m);
  padding:12px 8px;cursor:pointer;text-align:center;min-height:44px;min-width:0;
  overflow-wrap:break-word;
  transition:transform .12s,background .2s,border-color .2s;
}
.mitem.pic-item{font-size:clamp(40px,11vw,58px);background:var(--warm-bg);border-color:var(--warm-border);padding:14px 10px}
.mitem img{max-width:100%;max-height:120px;border-radius:12px;display:block;margin:0 auto}
.mitem.picked{border-color:var(--sky);background:#DCF0FA;transform:translateY(-3px)}
.mitem.done{opacity:.6;cursor:default}
.mitem.ok{background:var(--ok-bg);border-color:var(--green)}
.mitem.bad{background:var(--bad-bg);border-color:var(--coral)}

/* ===== ترتيب الحروف ===== */
.slots{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.slot{
  width:46px;height:54px;border:2px dashed var(--act-border);border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--en);font-size:24px;font-weight:600;background:#F8FCFE;
}
.slot.right{border-style:solid;border-color:var(--green);background:var(--ok-bg)}
.slot.wrong{border-style:solid;border-color:var(--coral);background:var(--bad-bg)}
.tiles{display:flex;gap:8px;flex-wrap:wrap}
.tile{
  width:46px;height:54px;border:2px solid var(--warm-border);background:var(--warm-bg);
  border-radius:var(--r-s);box-shadow:0 3px 0 var(--warm-border);
  font-family:var(--en);font-size:24px;font-weight:600;cursor:pointer;
  transition:transform .12s,opacity .2s,box-shadow .12s;
}
.tile:active:not(.used){transform:translateY(2px);box-shadow:0 1px 0 var(--warm-border)}
.tile.used{opacity:.25;box-shadow:none}

/* ===== رتّب الكلمات لتكوين جملة =====
   النوع ده كان مالوش CSS خالص — عناصره كانت بتظهر خام. */
.sentence-line{
  min-height:60px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  background:var(--act-bg);border:2px dashed var(--act-border);border-radius:var(--r-m);
  padding:var(--sp-3);margin-bottom:var(--sp-3);
}
.sentence-empty{font-family:var(--ar);font-size:var(--fs-xs);color:var(--muted)}
.word-pool{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.word-chip{
  font-family:var(--en);font-size:var(--fs-m);font-weight:500;
  background:var(--warm-bg);border:2px solid var(--warm-border);border-radius:var(--r-s);
  padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;
  cursor:pointer;box-shadow:0 3px 0 var(--warm-border);max-width:100%;
  overflow-wrap:break-word;transition:transform .12s,opacity .2s,box-shadow .12s;
}
.word-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--warm-border)}
.word-chip.used{opacity:.28;box-shadow:none;pointer-events:none}
.word-chip.placed{background:#fff;border-color:var(--act-border);box-shadow:0 3px 0 var(--act-border)}
.word-chip.right{background:var(--ok-bg);border-color:var(--green);box-shadow:0 3px 0 var(--ok-border)}
.word-chip.wrong{background:var(--bad-bg);border-color:var(--coral);box-shadow:0 3px 0 var(--bad-border)}

/* ===== صح/غلط ===== */
.opts.tf{gap:12px}
.tf-opt{flex:1;justify-content:center;font-family:var(--ar);font-weight:700;font-size:17px;direction:rtl}

/* ===== اختر كل الإجابات الصحيحة ===== */
.opt.ms .box{font-size:20px;line-height:1;flex:0 0 auto;color:var(--sky)}
.opt.ms.on{border-color:var(--sky);background:#DCF0FA}

/* ===== اكتب الكلمة ===== */
.write-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;direction:ltr}
.write-hint{font-family:var(--en);font-size:26px;font-weight:600;color:var(--board)}
.write-input{
  font-family:var(--en);font-size:19px;padding:10px 14px;border-radius:14px;
  border:2px solid var(--warm-border);background:var(--warm-bg);width:190px;
}
.write-input:focus{outline:3px solid var(--sky);outline-offset:2px}
.write-input.right{border-color:var(--green);background:var(--ok-bg)}
.write-input.wrong{border-color:var(--coral);background:var(--bad-bg)}
.write-input.answered{border-color:var(--sky);background:var(--act-bg)}
.write-go{
  font-family:var(--ar);font-weight:700;font-size:15px;background:var(--sun);color:#4A3200;
  border:0;border-radius:14px;padding:11px 20px;cursor:pointer;box-shadow:0 4px 0 #C98F17;
}
.write-go:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #C98F17}
.write-go:disabled{opacity:.5;cursor:default}
.write-answer{font-family:var(--en);font-size:17px;font-weight:600;color:var(--green)}

/* ===== صندوق الكلمات ===== */
.bank{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 14px;padding:12px;background:var(--warm-bg);border:2px dashed var(--warm-border);border-radius:18px}
.chip{font-family:var(--en);font-size:16px;font-weight:500;background:#fff;
  border:2px solid var(--warm-border);border-radius:var(--r-m);padding:10px 18px;
  min-height:44px;cursor:pointer;box-shadow:0 3px 0 var(--warm-border);
  transition:transform .12s,background .2s,box-shadow .12s}
.chip:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--warm-border)}
.chip.picked{border-color:var(--sky);background:#DCF0FA}
.chip:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
.sent{direction:inherit;text-align:start;font-size:18px;margin:10px 0;line-height:2.1}
.blank{display:inline-block;min-width:104px;border-bottom:4px solid var(--sky);text-align:center;padding:0 8px;font-weight:600;color:var(--sky)}
.blank.right{border-color:var(--green);color:#14572F}
.blank.wrong{border-color:var(--coral);color:#8E2B22}

/* ===== السؤال المقالي ===== */
.open-input{
  width:100%;font-family:var(--ar);font-size:16px;line-height:1.9;padding:12px 14px;
  border:2px solid var(--warm-border);border-radius:16px;background:var(--warm-bg);resize:vertical;
}
.open-input:focus{outline:3px solid var(--sky);outline-offset:2px}
.open-input:disabled{opacity:.75;background:#F7F5F0}
.open-meta{font-size:var(--fs-xs);color:var(--muted);margin:6px 2px 0}
.open-result{margin-top:14px;background:var(--act-bg);border:2px solid var(--act-border);border-radius:16px;padding:14px}
.open-note{font-size:13.5px;color:#5A6A72}
.open-score{font-family:var(--en);font-size:24px;font-weight:700;text-align:center;padding:6px 0}
.open-score.good{color:var(--green)}
.open-score.low{color:var(--coral)}
.open-feedback{margin:8px 0 0;font-size:14.5px;line-height:1.9;color:#22303A;
  background:#fff;border-radius:12px;padding:11px 13px}
.model-answer{margin-top:10px;background:var(--ok-bg);border-radius:12px;padding:12px}
.model-answer b{color:#14572F;font-size:14px}
.model-answer p{margin:6px 0 0;font-size:14.5px;line-height:1.9;color:#1B3D28}

/* ===== بطاقة المحاولة في سجل النتايج ===== */
.attempt{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:12px 13px;
  min-height:44px;transition:transform .12s,border-color .2s;
}
.attempt.good{border-color:#BEE7CE;background:#F6FCF8}
.attempt.mid{border-color:var(--warm-border);background:var(--warm-bg)}
.attempt.low{border-color:#F6CFC8;background:#FFF8F7}
.attempt .at-no{
  flex:0 0 auto;background:var(--board);color:#fff;border-radius:10px;
  padding:5px 10px;font-family:var(--en);font-size:13px;font-weight:700;
}
.attempt .at-body{flex:1;min-width:0}
.attempt .at-body b{display:block;font-size:14.5px;margin-bottom:2px}
.attempt .at-body small{color:var(--muted);font-size:12px}
.attempt .at-score{flex:0 0 auto;text-align:center}
.attempt .at-score b{display:block;font-family:var(--en);font-size:16px;color:var(--board)}
.attempt .at-score small{font-size:12px;color:var(--muted)}

/* ===== شرح الإجابة («ليه») ===== */
.explain{margin-top:12px;border-radius:var(--r-m);padding:13px 15px;border:2px solid}
.explain.ok{background:var(--ok-bg);border-color:var(--ok-border)}
.explain.no{background:var(--bad-bg);border-color:var(--bad-border)}
.ex-answer{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.ex-answer b{font-size:12.5px;color:var(--muted)}
.ex-answer span{font-family:var(--en);font-size:17px;font-weight:600;color:var(--green)}
.explain.no .ex-answer span{color:#14572F}
.ex-why{font-size:14px;line-height:1.9;color:#3B4A52}
.ex-why b{color:var(--coral)}
.explain:last-child{margin-bottom:2px}

/* ===== ردود الفعل ===== */
.fb{font-size:14px;font-weight:700;margin-top:12px;min-height:20px}
.fb.ok{color:var(--green)}
.fb.no{color:var(--coral)}
.fb.saved{color:var(--sky)}

/* ===== الأزرار العامة ===== */
.btn{
  font-family:var(--ar);font-weight:700;font-size:16px;border:0;border-radius:16px;
  padding:13px 28px;cursor:pointer;background:var(--sun);color:#4A3200;box-shadow:0 5px 0 #C98F17;
}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #C98F17}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:#fff;color:var(--board);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}

/* ===== اختيار الوضع — التدريب هو الأساس ===== */
.mode{
  display:block;width:100%;background:var(--warm-bg);border:2px solid var(--warm-border);border-radius:20px;
  padding:22px 18px;cursor:pointer;text-align:center;font-family:var(--ar);
  transition:transform .12s,border-color .2s,background .2s;
}
.mode + .mode{margin-top:12px}
.mode .ico{font-size:38px;display:block;margin-bottom:8px}
.mode b{display:block;font-size:19px;margin-bottom:6px}
.mode small{color:var(--muted);font-size:13px;line-height:1.8;display:block}

/* الاختيار الرئيسي — أكبر وأوضح */
.mode.primary{
  position:relative;background:linear-gradient(180deg,#FFF4D6,#FFE9B8);
  border-color:var(--sun);border-width:4px;padding:28px 18px 24px;
  box-shadow:0 6px 0 #E9C878;
}
.mode.primary .ico{font-size:52px}
.mode.primary b{font-size:24px;color:var(--board)}
.mode.primary small{color:#6A5426;font-size:14px}
.mode.primary .pill{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;font-size:12px;font-weight:700;
  padding:5px 14px;border-radius:99px;white-space:nowrap;
}

/* الاختيار الثانوي — سطر صغير تحت الزرار الرئيسي */
.tries-note{
  background:var(--act-bg);border:2px solid var(--act-border);border-radius:14px;
  padding:10px 13px;font-size:13.5px;color:#15556F;margin:0 0 14px;text-align:center;
}
.tries-note a{color:var(--coral);font-weight:700}

/* ===== تاريخ المحاولات =====
   السطر الظاهر بيقول المحاولة الأخيرة، والساعة بتفتح التاريخ كله.
   <details> عشان يشتغل من غير JS ويطبع مفتوح. */
.tries-box{margin:0 0 14px}
.tries-box > summary.tries-note{
  margin:0;list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;justify-content:center;
  min-height:44px;                      /* هدف لمس مريح على الموبايل */
}
.tries-box > summary::-webkit-details-marker{display:none}
.tries-box .tn-sum{flex:1;min-width:0;overflow-wrap:anywhere}
.hist-ico{
  flex:0 0 auto;font-size:19px;line-height:1;
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--act-border);
  transition:transform .15s,background .2s;
}
.tries-box[open] .hist-ico{background:var(--sky);transform:rotate(-15deg)}
.tries-box > summary:active .hist-ico{transform:translateY(1px)}

.hist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.hist-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;
  text-decoration:none;color:inherit;
  background:var(--warm-bg);border:2px solid var(--warm-border);border-radius:14px;
  padding:9px 12px;min-height:44px;
}
.hist-row:active{transform:translateY(1px)}
.hr-no{font-size:12.5px;font-weight:700;color:var(--board);white-space:nowrap}
.hr-score{font-size:16px;font-weight:700;color:#15556F;text-align:center}
.hr-go{font-size:12px;font-weight:700;color:var(--coral);white-space:nowrap}
.hr-meta{
  grid-column:1 / -1;font-size:12px;color:var(--muted);
  min-width:0;overflow-wrap:anywhere;
}
.hist-all{text-align:center;margin:10px 0 0;font-size:13px}
.hist-all a{color:var(--coral);font-weight:700}

@media (max-width:400px){
  .hist-row{grid-template-columns:auto 1fr;padding:9px 10px}
  .hr-go{grid-column:1 / -1;text-align:end}
}

/* ===== اختيار عدد الأسئلة ===== */
.pick-count{
  background:var(--warm-bg);border:2px dashed var(--warm-border);border-radius:18px;
  padding:14px 16px;margin:0 0 14px;text-align:center;
}
.pick-count label{display:block;font-weight:700;font-size:15px;margin-bottom:10px}
.pick-row{display:flex;align-items:center;gap:14px}
.pick-row input[type=range]{flex:1;accent-color:var(--coral);height:44px;cursor:pointer}
.pick-row output{
  flex:0 0 auto;min-width:54px;background:var(--board);color:#fff;border-radius:12px;
  padding:7px 0;font-family:var(--en);font-size:20px;font-weight:700;
}
.pick-count small{display:block;margin-top:9px;color:var(--muted);font-size:12.5px;line-height:1.7}

.alt-mode{text-align:center;margin:16px 0 0;color:var(--muted);font-size:13.5px}
.alt-mode span{color:var(--muted)}
.linkish{
  background:none;border:0;cursor:pointer;font-family:var(--ar);
  display:inline-block;padding:12px 10px;min-height:44px;
  font-size:var(--fs-s);font-weight:700;color:var(--sky);text-decoration:underline;
}
.linkish:hover{color:var(--coral)}

/* ===== ملخّص المحتوى في الرئيسية ===== */
.tally{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 4px;
}
.tally-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px 8px;text-align:center;box-shadow:var(--card-shadow);
}
.tally-item b{display:block;font-family:var(--en);font-size:26px;color:var(--board);line-height:1.1}
.tally-item span{font-size:var(--fs-xs);color:var(--muted)}

/* ===== ملخص الدرس ===== */
/* ⚠️ `flex-wrap` مش زينة: سطر حالة الدرس (`.lrow-meta`) عنصر تالت
   جوه نفس الصفّ، ومن غير اللفّ كان بيزقّ الدرس و📖 على بعض ويكسر
   الصفحة على الموبايل. المالك: «الشيك ليست بتاعت الدروس بقت مدمرة». */
.lesson-row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.lesson-row .lesson{flex:1}
.sum-link{
  flex:0 0 auto;display:grid;place-items:center;width:52px;min-height:44px;
  text-decoration:none;background:var(--act-bg);border:2px solid var(--act-border);
  border-radius:var(--r-m);font-size:22px;transition:transform .12s,background .2s;
}

.sum-intro{font-size:16px;line-height:2;margin:0;color:#3B4A52}
.sum-ico{font-size:26px;line-height:1}
.sum-sec .card-head{margin-bottom:10px}
.sum-body{font-size:15.5px;line-height:2.05;margin:0;color:#2D3B44}
.sum-example{
  margin-top:12px;background:var(--warm-bg);border:2px dashed var(--warm-border);border-radius:14px;padding:12px 14px;
}
.sum-example b{display:block;font-size:12.5px;color:#7A5A12;margin-bottom:5px}
.sum-example span{font-size:15px;line-height:1.95}

.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.term{background:#F7FBFD;border:1px solid var(--act-border);border-radius:var(--r-m);
  padding:12px 13px;min-width:0}
.term b{font-family:var(--en);font-size:17px;color:var(--board);display:block}
.term .term-ar{font-size:14px;font-weight:700;color:var(--coral);display:block;margin:2px 0 4px}
.term small{font-size:12.5px;color:var(--muted);line-height:1.8;display:block}

.sum-remember{background:linear-gradient(180deg,#FFFBF0,#FFF6E0);border-color:var(--sun)}
.sum-remember ul{margin:0;padding-inline-start:22px}
.sum-remember li{font-size:15px;line-height:2.1;margin-bottom:4px}

/* ═══════════ الهوية وشريط التنقّل الثابت ═══════════ */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.topnav{
  position:sticky;top:0;z-index:40;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--sp-2);
  padding:4px 12px;min-height:48px;
  background:rgba(255,253,245,.97);border-bottom:2px solid var(--line);
  backdrop-filter:blur(10px);
}
.tn-side{display:flex;align-items:center;gap:6px;min-width:0}
.tn-start{justify-content:flex-start}.tn-end{justify-content:flex-end}
.tn-btn,.tn-home{
  display:inline-flex;align-items:center;gap:5px;
  min-height:34px;padding:6px 12px;border-radius:99px;
  font-family:var(--ar);font-size:var(--fs-xs);font-weight:700;
  text-decoration:none;color:var(--board);background:#fff;
  border:2px solid var(--line);cursor:pointer;white-space:nowrap;
}
.tn-home{background:var(--warm-bg);border-color:var(--warm-border)}
.tn-home.here{background:var(--board);color:#fff;border-color:var(--board)}
.tn-brand{display:inline-flex;align-items:center;gap:5px;color:var(--board);text-decoration:none;padding:1px 7px;border-radius:12px;line-height:1}
.tn-brand img{width:38px;height:38px;display:block;flex:0 0 auto}
.brand-copy{display:grid;gap:1px;text-align:right}
.brand-copy b{font-size:18px;font-weight:900;line-height:1;color:var(--board)}
.brand-copy small{font-family:var(--en);font-size:7px;font-weight:700;letter-spacing:.08em;color:var(--ink);direction:ltr}
.tn-brand.here{background:#fff;border:1px solid var(--warm-border)}
.tn-ico{font-size:17px;line-height:1;transform:scaleX(-1)}
.tn-btn.ghosted{visibility:hidden;border:0;background:none;padding:0;min-width:64px}
.tn-btn:active,.tn-home:active{transform:translateY(1px)}

/* الـ HUD بيبدأ تحت شريط التنقّل */
.hud{top:48px}

.board-brand{display:inline-flex;align-items:center;justify-content:center;width:min(430px,92%);margin:0 auto 10px;padding:7px 15px;border-radius:20px;background:var(--paper);border:3px solid rgba(255,197,61,.92);box-shadow:0 6px 0 rgba(0,0,0,.12)}
.board-brand img{display:block;width:100%;height:auto;max-height:116px}

@media (max-width:520px){
  .topnav{padding:5px 8px;gap:5px}
  .tn-btn,.tn-home{padding:5px 8px;font-size:12px;min-height:32px}
  .tn-brand{gap:2px;padding-inline:3px}
  .tn-brand img{width:34px;height:34px}
  .brand-copy b{font-size:16px}.brand-copy small{font-size:6px;letter-spacing:.03em}
  .tn-subscribe .tn-label{display:none}
}
@media (max-width:370px){
  .tn-btn .tn-label{display:none}
  .tn-btn{width:34px;justify-content:center;padding-inline:4px}
}

/* ===== مسار التنقّل ===== */
.crumbs{margin:16px 0 -4px;font-size:var(--fs-xs);color:var(--muted)}
.crumbs a{color:var(--sky);text-decoration:none;font-weight:700}
.crumbs a:hover{text-decoration:underline}
.crumbs b{color:var(--ink)}
.crumbs .sep{margin:0 6px;color:#C4CCD1}

/* ===== اختيار السنة في الرئيسية =====
   كانت أزرار .btn ضخمة بتاخد سطر لكل واحدة على الموبايل.
   بقت صفوف مضغوطة بارتفاع ثابت. */
.year-picks{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.year-pick{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:52px;padding:var(--sp-3) var(--sp-4);text-decoration:none;color:inherit;
  background:var(--warm-bg);border:2px solid var(--warm-border);border-radius:var(--r-m);
  box-shadow:0 3px 0 var(--warm-border);
  transition:transform .12s,background .2s,box-shadow .12s;
}
.year-pick:active{transform:translateY(2px);box-shadow:0 1px 0 var(--warm-border)}
.yp-name{font-weight:700;font-size:var(--fs-s)}
.yp-go{font-size:22px;color:var(--coral);line-height:1;transform:scaleX(-1)}

/* ===== بطاقات المراحل ===== */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stage{
  display:block;text-decoration:none;color:inherit;text-align:center;
  background:var(--warm-bg);border:2px solid var(--warm-border);border-radius:20px;padding:22px 14px;
  box-shadow:0 4px 0 var(--warm-border);
  transition:transform .12s,background .2s,border-color .2s,box-shadow .12s;
}
.stage:active{transform:translateY(3px);box-shadow:0 1px 0 var(--warm-border)}
.stage .ico{font-size:42px;display:block;margin-bottom:8px}
.stage b{display:block;font-size:17px;margin-bottom:4px}
.stage small{color:var(--muted);font-size:12.5px}

/* ===== كتالوج الصفوف ===== */

/* ═══════════ شبكة المواد — grade.php ═══════════
   قرص ملوّن + أيقونة: الطفل بيتعرّف على المادة قبل ما يقرا بطلاقة.
   اللون نظام تعرّف مش زخرفة — ثابت لكل مادة. */
.subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.subject{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;color:inherit;text-align:center;
  background:#fff;border:2px solid var(--warm-border);border-radius:var(--r-l);
  padding:var(--sp-5) var(--sp-3) var(--sp-4);
  box-shadow:0 4px 0 var(--warm-border);
  transition:transform .12s,box-shadow .12s,background .2s;
}
a.subject:active{transform:translateY(3px);box-shadow:0 1px 0 var(--warm-border)}
.subject .disc{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  font-size:44px;line-height:1;background:var(--warm-bg);
}
.subject b{font-size:var(--fs-l);font-weight:900;line-height:1.35}
.subject .sub-meta{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;min-height:20px}
.subject small{color:var(--muted);font-size:var(--fs-xs);font-weight:700}

/* ألوان التعرّف على القرص بس — الإطار موحّد عشان الشبكة ما تبقاش دوشة */
.subject.sci  .disc{background:var(--ok-bg)}
.subject.math .disc{background:var(--act-bg)}
.subject.eng  .disc{background:var(--warm-bg)}
/* --bad-bg هنا لون هوية وردي هادي، مش حالة خطأ — الحالتين ما بيتقابلوش */
.subject.ar   .disc{background:var(--bad-bg)}

.mini-bar{width:82%;max-width:130px;height:8px;background:#EFE6D2;border-radius:99px;overflow:hidden}
.mini-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--coral));border-radius:99px}

/* مقفولة: لسه ملوّنة ومغرية — والصياغة «محتاجة كود» مش «مقفول» */
.subject.locked .disc{filter:grayscale(.35)}
.need-key{background:var(--warm-bg);border:1px solid var(--warm-border);color:#7A5A12;
  border-radius:99px;padding:3px 10px}

/* قريبًا: مش pressable — مفيش ظل صلب ولا :active */
.subject.soon{box-shadow:none;border-style:dashed;background:#F7F5F0;cursor:default}
.subject.soon .disc{filter:grayscale(.6);opacity:.7}

/* كارت التفعيل فوق أول وحدة في المادة المقفولة */
.unlock-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(180deg,#FFF4D6,#FFE9B8);border:2px solid var(--sun)}
.unlock-cta .uc-ico{font-size:34px;line-height:1}
.unlock-cta .uc-txt{flex:1;min-width:140px}
.unlock-cta .uc-txt b{display:block;font-size:var(--fs-m)}
.unlock-cta .uc-txt small{color:#6A5426;font-size:var(--fs-xs);line-height:1.7}

/* رأس صفحة المادة */
.subject-board h1{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.sb-ico{font-size:1.1em}
/* كل وحدة كارت أبيض مستقل — العين بتعدّ بلوكات واضحة بدل 30 صف متلزّقين */
.unit-card{margin:14px 0;padding:16px 14px 14px}
.unit-card .unit-head{margin-bottom:12px}

/* ===== الوحدة (الشابتر) ===== */
.unit-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.unit-head .unum{
  background:var(--board);color:#fff;border-radius:10px;
  padding:4px 11px;font-size:12.5px;font-weight:700;white-space:nowrap;
}
.unit-head b{font-family:var(--en);direction:ltr;font-size:15px;font-weight:600}
.unit-head .ucount{font-size:12px;color:var(--muted);margin-inline-start:auto}

.lesson.unit-exam{
  background:linear-gradient(180deg,#FFF4D6,#FFE9B8);border-color:var(--sun);
  box-shadow:0 3px 0 #E9C878;
}
.lesson.unit-exam .ln{background:#B8860B}
.lesson.unit-exam .lt{font-weight:700}
.lesson.dim.unit-exam{background:#F7F5F0;border-color:#E6DEC9;box-shadow:none}

.lessons{display:flex;flex-direction:column;gap:8px}
.lesson{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  background:var(--warm-bg);border:2px solid var(--warm-border);border-radius:14px;padding:10px 12px;
  transition:transform .12s,background .2s,border-color .2s;
}
.lesson .ln{
  flex:0 0 auto;background:var(--board);color:#fff;border-radius:var(--r-s);
  padding:5px 10px;font-size:var(--fs-xs);font-weight:700;white-space:nowrap;
}
/* ⚠️ كان `direction:ltr;text-align:left` مثبّتًا — نفس عطل `.opt`
   و`.sent` اللي اتصلح قبل كده: اتكتب وكل المواد كانت `medium='en'`،
   فأول مادة عربية طلعت عناوين دروسها مرصوصة من الشمال ومقصوصة غلط.
   الاتجاه بيتورّث من `<html dir>`، والخط الإنجليزي للصفحات LTR بس. */
.lesson .lt{
  flex:1;min-width:0;direction:inherit;text-align:start;
  font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[dir=ltr] .lesson .lt{font-family:var(--en)}
.lesson .lp{flex:0 0 auto;font-size:13px;font-weight:700;color:#7A5A12}
.lesson.dim{background:#F7F5F0;border-color:#E6DEC9;color:var(--muted);border-style:dashed}
.lesson.dim .ln{background:#B9C3C8}

@media (max-width:460px){
  .tally{grid-template-columns:repeat(2,1fr)}
  /* على الموبايل الصفّ بيلفّ: الشارة والدرجة في سطر، والعنوان في
     سطره كامل — بدل ما العنوان يتقصّ لكلمتين. */
  .lesson{flex-wrap:wrap;row-gap:4px;padding:9px 10px}
  .lesson .lt{order:9;flex:0 0 100%;white-space:normal;font-size:14px;line-height:1.45}
  .lesson .lp,.lesson .lscore{margin-inline-start:auto}
  .sum-link{width:44px}
  .lrow-meta{margin-inline:6px;font-size:12px}
}

/* ===== النتيجة ===== */
.result{background:var(--board);color:#fff;border:8px solid #A9743F;border-radius:24px;padding:28px 20px;text-align:center;margin:26px 0;box-shadow:0 12px 0 #8A5C31;animation:pop .5s cubic-bezier(.34,1.5,.64,1)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.result .stars{font-size:44px;letter-spacing:6px}
.result h3{font-family:var(--en);font-size:28px;margin:10px 0 4px;font-weight:600}
.result .score{font-family:var(--en);font-size:22px;color:var(--sun);font-weight:600}
.result p{margin:12px auto 0;max-width:460px;font-size:15px;color:#DCEFE2}
.review{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.review i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:700;background:rgba(255,255,255,.12)}
.review i.ok{background:var(--green)}
.review i.no{background:var(--coral)}
.review i.wait{background:var(--sun);color:#4A3200;font-size:13px}

/* ===== الدخول ===== */
.login{max-width:400px;margin:40px auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);padding:28px 24px;box-shadow:var(--card-shadow)}
.login-brand{display:block;width:min(290px,92%);margin:-10px auto 12px}
.login-brand img{display:block;width:100%;height:auto}
.login h1{text-align:center;font-size:22px;margin:0 0 4px}
.login p.sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 22px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field input{width:100%;font-family:var(--en);font-size:20px;text-align:center;letter-spacing:.18em;padding:12px;border:2px solid var(--warm-border);border-radius:14px;background:var(--warm-bg)}
.field input:focus{outline:3px solid var(--sky);outline-offset:2px}
.err{background:var(--bad-bg);border:2px solid var(--coral);color:#8E2B22;border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:16px;text-align:center}
.who{text-align:center;color:var(--muted);font-size:13px;margin-top:14px}
.who a{color:var(--coral)}

footer{text-align:center;color:var(--muted);font-size:13px;margin-top:26px}

@media (max-width:520px){
  .opt{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ═══════════════════════════════════════════════════════════
   الرفع عند المرور — لأجهزة الماوس بس.
   على اللمس الـ hover بيلزق بعد الضغطة فالعنصر بيفضل مرفوع
   وشكله بايظ. الضغط عندنا ليه ردّ فعل خاص بيه (:active).
   ═══════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  .tn-btn:hover,.tn-home:hover{background:var(--warm-hover);border-color:var(--sun)}
  a.subject:hover{transform:translateY(-3px);background:var(--warm-hover)}
  .stage:hover{transform:translateY(-3px);background:var(--warm-hover);border-color:var(--sun)}
  .subject:hover{transform:translateY(-3px);background:var(--warm-hover);border-color:var(--sun)}
  .year-pick:hover{transform:translateY(-2px);background:var(--warm-hover)}
  .opt:hover:not(:disabled){transform:translateY(-2px);background:var(--warm-hover)}
  .mitem:hover:not(.done){transform:translateY(-2px)}
  .tile:hover:not(.used){transform:translateY(-2px)}
  .chip:hover:not(:disabled){transform:translateY(-2px)}
  a.lesson:hover{transform:translateY(-2px);background:var(--warm-hover);border-color:var(--sun)}
  .attempt:hover{transform:translateY(-2px);border-color:var(--sky)}
  .mode:hover{transform:translateY(-3px);border-color:var(--sky);background:var(--warm-hover)}
  
  .sum-link:hover{transform:translateY(-2px);background:#DCF0FA}
}

/* ═══ أهداف اللمس والفيض على الشاشات الصغيرة ═══ */
.opt,.chip,.tile,.mitem,.write-go,.btn,.sum-link,.slot{min-height:44px}
.opt .opt-txt,.lesson .lt,.q-en{min-width:0}

@media (max-width:520px){
  /* السبورة كانت بتاكل ثلث الشاشة قبل ما المحتوى يبدأ */
  .board{border-width:5px;border-radius:18px;margin-top:12px;padding:18px 14px 16px;
         box-shadow:0 7px 0 #8A5C31, 0 12px 20px rgba(0,0,0,.12)}
  .board .eyebrow{font-size:11px;margin-bottom:4px}

  .hud{padding:6px 10px;gap:10px;margin-top:10px}
  .jar{width:40px;height:48px}
  .hud-text b{font-size:14px}
  .bar{height:10px}

  .actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .btn{padding:13px 20px}
}

@media (max-width:400px){
  .match{gap:8px 10px}
  .mitem{font-size:15px}
}

/* التوصيل على الشاشات الصغيرة (≤380px: iPhone SE وأندرويد ٣٦٠).
   عمودان × ~١١٠px عرض بيخلّوا عنوانًا زي «receives the signal from the eyes
   and sends it on to the body» ستّ سطور. عمود واحد بيدّي العرض كله فيبقى
   سطرين. الفاصل المنقّط بيفضل مبيّن إن دي مجموعتان مش قائمة واحدة. */
@media (max-width:380px){
  .match{grid-template-columns:1fr;gap:12px}
  .mcol + .mcol{padding-top:12px;border-top:2px dashed var(--warm-border)}
  .mitem{font-size:16px;padding:11px 10px}
}


/* ═══════════════════════════════════════════════════════════
   حماية من الاسكرول الأفقي.
   السبب المعتاد: عنصر جوه flex/grid عرضه الافتراضي min-width:auto،
   فكلمة إنجليزي طويلة بتوسّعه بره أبوه وتدفع الصفحة كلها.
   ═══════════════════════════════════════════════════════════ */
html{overflow-x:hidden}
.wrap{overflow-x:clip}

/* أي محتوى نصي جوه حاوية مرنة لازم يعرف يتكسر */
.card,.card-head h3,.q-prompt,.q-en,.q-ar,.sum-body,.sum-intro,.ex-why,.ex-answer span,
.term small,.open-feedback,.attempt .at-body,.at-body b,.hint,.sent,
.lesson .lt,.opt .opt-txt,.mitem,.unit-head b,.sj-name,.yp-name{
  min-width:0;overflow-wrap:anywhere;
}

img,svg,video,textarea{max-width:100%}
textarea{box-sizing:border-box}

/* العناوين الطويلة جنب الشارة لازم تلف مش تدفع */
.card-head{min-width:0}
.card-head h3{flex:1 1 auto}

/* الجداول (لو ظهرت في صفحات الطالب) تتمرّر جوه نفسها مش تدفع الصفحة */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:400px){
  .tally{grid-template-columns:repeat(2,1fr)}
  .subjects{grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
  .subject{min-height:120px;padding:var(--sp-3) var(--sp-1)}
  .sj-name{font-size:var(--fs-xs)}
  .word-chip,.opt{font-size:var(--fs-s)}
  .tile,.slot{width:42px;height:50px;font-size:21px}
  .wrap{padding:0 12px}
}


/* ── مفتاح «المساعدة بالعربي» ──
   امتحان مادة لغات إنجليزي صافي — العربي مساعدة الطفل هو اللي يفتحها.
   خصائص منطقية عشان القاعدة الواحدة تخدم RTL و LTR. */
.help-toggle{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  margin-block:6px 4px;padding:12px 14px;
  background:var(--warm);border:2px solid var(--line);border-radius:16px;
}
.ht-text{min-width:0}
.ht-text b{display:block;font-family:var(--en);font-size:15px;line-height:1.3}
.ht-text small{display:block;color:var(--muted);font-size:12.5px;font-family:var(--en);margin-block-start:2px}
.ht-switch{
  flex:0 0 auto;inline-size:52px;block-size:30px;border-radius:999px;
  border:2px solid var(--line);background:#E9E2D6;position:relative;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.ht-switch i{
  position:absolute;inset-block-start:2px;inset-inline-start:2px;
  inline-size:22px;block-size:22px;border-radius:50%;background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.18);
  transition:inset-inline-start .18s ease;
}
.ht-switch.on{background:var(--sky);border-color:var(--sky)}
.ht-switch.on i{inset-inline-start:24px}
.ht-switch:active{transform:scale(.96)}
.ht-switch:disabled{opacity:.55;cursor:progress}
.ht-note{
  margin:0 0 14px;color:var(--muted);font-size:12.5px;line-height:1.7;
  font-family:var(--en);
}
@media (prefers-reduced-motion:reduce){
  .ht-switch,.ht-switch i{transition:none}
}

/* سطر المساعدة بالعربي تحت السؤال الإنجليزي — تابع مش عنوان */
.q-help-ar{
  margin:0 0 10px;padding-inline-start:10px;
  border-inline-start:3px solid var(--line);
  color:var(--muted);font-size:14px;line-height:1.8;text-align:start;
}

/* ═══════════════════════════════════════════════════════════
   ملخص الدرس ٢.٠ — «الكتاب المصغّر» والأشكال التوضيحية (.fig)
   كل شكل بيتوصف كـ data جوه lessons.summary وبيتعرض HTML/CSS خالص —
   مفيش صور خارجية ولا مكتبات.
   الأشكال حاويات مش pressable → مفيش ظل صلب ولا :active ولا رفع
   (العمق = وظيفة). الاتجاه: العارض بيحط dir على جذر .fig بنفس
   منطق .sum-body، وكل الخصائص هنا منطقية فالقاعدة الواحدة
   بتخدم RTL و LTR. الكتلة دي append-only — مبتعدّلش أي قاعدة قديمة.
   ═══════════════════════════════════════════════════════════ */

/* ── ترقيم أقسام الملخص تلقائيًا — شكل كتاب مدرسي من غير أي PHP ── */
body{counter-reset:sumsec}
.sum-sec{counter-increment:sumsec}
.sum-sec .card-head h3::before{
  content:counter(sumsec);
  display:inline-grid;place-items:center;
  min-width:24px;height:24px;border-radius:8px;
  background:var(--coral);color:#fff;
  font-family:var(--en);font-size:13px;font-weight:700;
  margin-inline-end:8px;vertical-align:2px;
}

/* ── جذر الشكل — لوحة زرقا هادية جوه الكارت ── */
.fig{
  margin-block:var(--sp-4) var(--sp-2);margin-inline:0;
  background:#F8FCFE;border:2px solid var(--act-border);border-radius:var(--r-m);
  padding:var(--sp-4) var(--sp-3);
  overflow-wrap:anywhere;   /* بتتورّث — حماية الفيض لكل اللي جوه */
}
.fig *{min-width:0}          /* قاعدة السطر 632 بتعدّد كلاسات — الجديد بيحمي نفسه */
.fig[dir=ltr]{font-family:var(--en)}
.fig:last-child{margin-block-end:0}
.fig-cap{
  display:block;font-size:var(--fs-xs);font-weight:700;color:var(--act-ink);
  margin-block-end:var(--sp-3);text-align:start;
}

/* ── ١) flow — تسلسل/عملية، عمودي دايمًا فالسهم ↓ سليم في الاتجاهين ── */
.fig-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fig-step{
  display:flex;align-items:center;gap:var(--sp-3);
  background:#fff;border:2px solid var(--act-border);border-radius:var(--r-m);
  padding:10px 12px;position:relative;
}
.fig-step + .fig-step{margin-block-start:26px}
.fig-step + .fig-step::before{
  content:"↓";position:absolute;inset-block-start:-26px;inset-inline:0;
  text-align:center;font-size:18px;font-weight:700;color:var(--sky);line-height:26px;
}
.fs-ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;line-height:1;
  background:var(--act-bg);
}
.fs-ico.fs-no{font-family:var(--en);font-size:16px;font-weight:700;color:var(--act-ink)}
.fs-txt{flex:1}
.fs-txt b{display:block;font-size:var(--fs-s);line-height:1.5}
.fs-txt small{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.7}
/* الدورة: بادج «ارجع للأول» — الرمز ↺ رمز دوران محايد الاتجاه */
.fig-loop{
  margin-block-start:var(--sp-3);margin-inline:auto;width:fit-content;
  font-size:var(--fs-xs);font-weight:700;color:var(--act-ink);
  background:var(--act-bg);border-radius:99px;padding:6px 14px;text-align:center;
}

/* ── ٢) parts — الأجزاء والوظايف: عنوان بصري + عمود تسميات منقّط
      زي خطوط التسمية في رسم الكتاب ── */
.fp-subject{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-block-end:var(--sp-3);text-align:center;
}
.fp-subject span{font-size:clamp(44px,12vw,64px);line-height:1.15}
.fp-subject b{font-size:var(--fs-m)}
.fp-list{
  list-style:none;margin:0;padding:0;padding-inline-start:var(--sp-3);
  border-inline-start:3px dotted var(--act-border);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.fp-list li{
  display:flex;align-items:flex-start;gap:10px;position:relative;
  background:#fff;border:1px solid var(--act-border);border-radius:var(--r-s);
  padding:9px 11px;
}
.fp-list li::before{   /* الوصلة بين العمود والجزء */
  content:"";position:absolute;inset-inline-start:-15px;inset-block-start:50%;
  width:12px;border-block-start:3px dotted var(--act-border);
}
.fp-ico{flex:0 0 auto;font-size:22px;line-height:1.35}
.fp-list li b{font-size:var(--fs-s);line-height:1.55}
.fp-list li small{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.75}

/* ── ٣) compare — الجدول الوحيد العريض: بيتمرّر جوه نفسه، الصفحة ثابتة.
      تلوين العمودين تلوين هوية (سماوي/دافي) مش صح/غلط ── */
.fig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fig-compare{border-collapse:collapse;width:100%;min-width:300px}
.fig-compare th,.fig-compare td{
  border:1px solid var(--act-border);padding:8px 10px;
  font-size:var(--fs-xs);line-height:1.7;text-align:center;vertical-align:top;
}
.fig-compare thead th{font-size:var(--fs-s);font-weight:700}
.fig-compare thead .th-ico{display:block;font-size:26px;line-height:1.25}
.fig-compare tbody th{text-align:start;font-weight:700;background:#fff;min-width:84px}
.fig-compare .ca{background:#F2F8FB}
.fig-compare .cb{background:#FFFBF0}
.fig-compare thead .ca{background:var(--act-bg)}
.fig-compare thead .cb{background:var(--warm-bg)}
.fig .yes{color:var(--green);font-weight:700}
.fig .no{color:var(--coral);font-weight:700}

/* ── ٤) rule — كارت القاعدة: سبورة مصغّرة بنفس هوية .board
      (variant على الجذر مش عنصر جواه) ── */
.fig.fig-rule{
  background:var(--board);border:4px solid #A9743F;
  color:#fff;text-align:center;
}
.fr-title{display:block;font-size:var(--fs-xs);font-weight:700;color:#FFE9A8;margin-block-end:6px}
.fr-expr{font-family:var(--en);font-size:clamp(19px,5.4vw,26px);font-weight:600;line-height:1.55}
.fr-expr mark{background:none;color:var(--sun)}   /* إبراز جزء من القاعدة */
.fr-note{display:block;margin-block-start:8px;font-size:var(--fs-xs);color:#DCEFE2;line-height:1.7}

/* ── ٥) dodont — الغلط الشائع وتصحيحه: الغلط الأول والصح يختم ── */
.fig-dodont{display:grid;grid-template-columns:1fr;gap:var(--sp-2)}
.fd{display:flex;align-items:flex-start;gap:10px;border:2px solid;border-radius:var(--r-m);padding:11px 13px}
.fd-no{background:var(--bad-bg);border-color:var(--bad-border)}
.fd-ok{background:var(--ok-bg);border-color:var(--ok-border)}
.fd-mark{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700;
}
.fd-no .fd-mark{background:var(--coral)}
.fd-ok .fd-mark{background:var(--green)}
.fd p{margin:0;font-size:var(--fs-s);line-height:1.8}
.fd-no p{color:var(--bad-ink)}
.fd-ok p{color:var(--ok-ink)}
.fd small{display:block;margin-block-start:3px;font-size:var(--fs-xs);color:var(--muted);line-height:1.7}
@media (min-width:520px){.fig-dodont{grid-template-columns:1fr 1fr}}

/* ── ٦) words — عيلة الكلمات: شبكة بطاقات، مش pressable فمفيش ظل صلب ── */
.fig-words{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--sp-2);
}
.fig-words li{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#fff;border:2px solid var(--warm-border);border-radius:var(--r-m);
  padding:10px 6px;text-align:center;
}
.fw-ico{font-size:30px;line-height:1.25}
/* الكلمة وزرار نطقها في صفّ واحد */
.fw-row{display:flex;align-items:center;justify-content:center;gap:var(--sp-1);min-width:0}
.fig-words:has(.fw-hint) .fw-row{justify-content:flex-start}
.fig-words b{font-family:var(--en);font-size:var(--fs-s);font-weight:600;color:var(--board)}
.fw-ar{font-family:var(--ar);font-size:var(--fs-xs);font-weight:700;color:var(--coral)}

/* شرح مختصر تحت الكلمة. الخلية ٩٦px كفاية لكلمة مفردة، بس مش لجملة —
   فالشبكة بتتوسّع لما يكون في شروح. */
.fw-hint{
  font-size:var(--fs-xs);line-height:1.6;color:var(--muted);
  font-weight:500;overflow-wrap:anywhere;
}
.fig-words:has(.fw-hint){grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.fig-words:has(.fw-hint) li{text-align:start;align-items:stretch;padding:10px 11px}

/* ── ٧) image — صورة مولّدة جوه إطار الشكل + تعليق تحتها ── */
.fig.fig-media{background:#fff;text-align:center}
.fig-media img{
  display:block;margin-inline:auto;max-width:min(340px,100%);
  border-radius:var(--r-s);
}
.fig-media .fig-cap{margin-block:var(--sp-2) 0;text-align:center;color:var(--muted)}

/* الأشكال كلها غير تفاعلية — مفيش hover عمدًا (العمق = وظيفة).
   الحركة: مفيش أنيميشن أصلًا، ومفتاح prefers-reduced-motion العام
   (سطر ٥٧٣) بيغطي أي transition مستقبلي. */


/* ── طباعة ملخّص الدرس ──
   الطفل بياخد الملخّص ورقة يذاكر منها. اللي على الورق:
   العنوان + الأقسام + الأشكال + المصطلحات + «افتكر». مفيش تنقّل ولا أزرار. */
.sum-actions{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-block-start:20px;
}
.sum-actions .btn{margin:0}

@media print{
  /* كل ما هو تفاعلي أو تنقّل ما يتطبعش */
  .topnav,.crumbs,.sum-actions,.lessons,.unlock-cta,footer,
  .hud,.mode,.alt-mode,.help-toggle,.ht-note{display:none !important}
  /* الكارت اللي جواه روابط الامتحانات بس ما يطبعش إطار فاضي */
  .card:has(.lessons){display:none !important}

  html,body{background:#fff !important;color:#000 !important;font-size:11.5pt}
  .wrap{max-width:none;padding:0;margin:0}

  /* الترويسة تبقى عنوان الورقة */
  .board{
    background:none !important;color:#000 !important;
    border:0;border-block-end:2pt solid #000;border-radius:0;
    box-shadow:none !important;padding:0 0 8pt;margin:0 0 12pt;
  }
  .board h1{font-size:20pt;margin:0}
  .board h2{font-size:11pt;font-weight:400;margin:4pt 0 0}
  .board .eyebrow{font-size:9pt;color:#333 !important}

  /* ── الأقسام ──
     القسم كان `break-inside:avoid` وهو أطول من باقي الصفحة، فكان
     بيتزحلق لصفحة جديدة ويسيب ورا فراغ كبير (صفحة كاملة أحيانًا).
     دلوقتي القسم بينقسم عادي؛ اللي ما ينقسمش هو **الشكل** بس. */
  .card,.sum-sec,.sum-remember,.sum-example{
    background:#fff !important;box-shadow:none !important;
    border:0 !important;border-radius:0;
    padding:0;margin:0 0 10pt;
  }
  /* عنوان القسم يفضل ملزوق بأول سطر بعده — مايبقاش آخر حاجة في الصفحة */
  .card-head,.q-head,.sec-head{break-after:avoid;page-break-after:avoid;margin-block-end:4pt}
  .card-head h3,.q-prompt{font-size:13pt}
  /* كل عناوين الأقسام بنفس الشكل — «افتكر» و«جرّب» زي الباقي */
  .card > .card-head{border-block-end:.75pt solid #000;padding-block-end:3pt}
  .sum-body,.fs-txt,.fp-list,.fig-words{color:#000 !important}
  .sum-body,.sum-intro,.fs-txt,.fp-list li{orphans:3;widows:3}

  /* المقدّمة سطر افتتاحي مش صندوق */
  .sum-intro{
    font-size:12pt;line-height:1.6;color:#000 !important;
    border-inline-start:2pt solid #000;padding-inline-start:8pt;margin:0 0 12pt;
  }

  /* ── الأشكال: مستوى الإطار الوحيد الباقي ── */
  .fig{
    background:#fff !important;box-shadow:none !important;
    border:.75pt solid #666 !important;border-radius:3pt;
    padding:7pt 9pt;margin:0 0 8pt;
    break-inside:avoid;page-break-inside:avoid;
  }
  .fig-dodont,.fig-compare tr{break-inside:avoid;page-break-inside:avoid}
  /* الأشكال اللي جواها قوايم ممكن تتقسم بين صفحتين — العنصر الواحد
     هو اللي ما ينقسمش. من غير كده الشكل الطويل بيسيب ثلث صفحة فاضي. */
  .fig:has(.fig-flow),.fig:has(.fp-list),.fig:has(.fig-words){
    break-inside:auto;page-break-inside:auto;
  }
  .fig-flow li,.fp-list li,.fig-words li{break-inside:avoid;page-break-inside:avoid}
  .fig-cap{font-size:9.5pt;color:#000 !important;break-after:avoid;page-break-after:avoid}

  /* النصوص الرمادية الفاتحة معمولة لشاشة — على الورق بتختفي */
  .board h2{color:#333 !important}
  .fs-txt small,.fp-list li small,.fd small,.term small{color:#333 !important;font-size:9pt}
  .fig-scroll{overflow:visible !important}
  .fig-compare{width:100% !important;font-size:10pt}
  .fig-compare th,.fig-compare td{border:.5pt solid #999 !important;background:#fff !important}

  /* بطاقة القاعدة: نصّها كان معمولًا لسبورة غامقة — على الورق الأبيض
     العنوان والملاحظة كانوا شبه مختفيين، والتعبير كان ياكل تلت صفحة */
  .fig-rule{border:1.25pt solid #000 !important;text-align:center}
  .fig-rule .fr-expr{color:#000 !important;font-size:14pt;line-height:1.4}
  .fig-rule .fr-title{color:#000 !important;font-size:9pt;letter-spacing:.4pt}
  .fig-rule .fr-note{color:#333 !important;font-size:9pt}
  .fig-rule mark{background:#eee !important;color:#000 !important;font-weight:700}

  /* الكلمات + شرحها: الشرح جزء من المعلومة مش زخرفة */
  .fig-words li{border:.5pt solid #999 !important;padding:5pt 6pt}
  .fig-words b{color:#000 !important;font-size:10.5pt}
  .fw-hint{color:#333 !important;font-size:9pt;line-height:1.45}

  /* غلط/صح: اللون مش مضمون على طابعة أبيض وأسود — العلامة هي الفرق */
  .fd-no,.fd-ok{background:#fff !important}
  .fd{border:.5pt solid #666 !important}
  .fd-mark{border:1pt solid #000 !important;color:#000 !important;background:#fff !important}

  .fp-list li,.fig-flow li{border-color:#999 !important;background:#fff !important}

  /* المصطلحات وصندوقا «افتكر» و«جرّب»: خلفياتهم الملوّنة بتطلع رمادي
     باهت على الطابعة — إطار رفيع أوضح وأرخص في الحبر */
  .terms{grid-template-columns:repeat(auto-fit,minmax(150pt,1fr));gap:6pt}
  .term{
    background:#fff !important;border:.5pt solid #999 !important;
    border-radius:3pt;padding:5pt 7pt;break-inside:avoid;page-break-inside:avoid;
  }
  .term b{color:#000 !important;font-size:10.5pt}
  .sum-remember,.sum-example{
    background:#fff !important;
    border:.75pt solid #000 !important;border-radius:3pt;padding:7pt 9pt;
  }
  .sum-remember > .card-head,.sum-example > .card-head{border-block-end:0;padding-block-end:0}
  .sum-remember li{font-size:10.5pt;line-height:1.65;margin-bottom:2pt}
  .sum-example b{color:#000 !important}

  .fig-img{max-height:70mm}

  a{color:#000 !important;text-decoration:none}
  @page{margin:14mm}
}

/* ═══════════════════════════════════════════════════════════
   حالة الامتحان من بره — subject.php
   ٣ حالات لصف الدرس: لسه · اتجرّب ومعدّاش · اتجاز.
   الإشارة بالشكل مش باللون بس: ⭐ = لسه، ↻ = كمّل، ✓ = اجتاز.
   المنطق مقلوب عمدًا: «اللي لسه» فاضل بلونه الدافي الداعي للضغط،
   و«المخلَّص» بيهدى للأخضر — فالعين تروح تلقائيًا للي باقي
   حتى لو ٩ من ١٢ متجازين. الصفوف فاضلة pressable في الحالات
   التلاتة (الإعادة مفتوحة) — مفيش ظل صلب جديد (العمق = وظيفة).
   ═══════════════════════════════════════════════════════════ */

/* اجتاز: الصف يهدى للأخضر — إنجاز محسوم مش احتفال صارخ */
.lesson.is-passed{background:var(--ok-bg);border-color:var(--ok-border)}

/* اتجرّب ومعدّاش: الخلفية زي ما هي، بس البرواز عنبر قوي —
   فرق محسوس عن البرواز الباهت بتاع «لسه» من غير ما يبقى أحمر عقابي */
.lesson.is-tried{border-color:var(--sun)}

/* ── شارة أحسن نتيجة — بتحل محل شارة «عليه كام نجمة» بعد أول
      محاولة مكتملة، فالشارتين عمرهم ما بيظهروا مع بعض ── */
.lscore{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--en);font-size:var(--fs-xs);font-weight:700;
  background:#fff;border:2px solid var(--green);color:var(--ok-ink);
  border-radius:99px;padding-block:2px;padding-inline:3px 9px;
  white-space:nowrap;
}
.lscore i{
  font-style:normal;flex:0 0 auto;
  inline-size:18px;block-size:18px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;line-height:1;
  background:var(--green);color:#fff;
}
.lscore.try{border-color:var(--sun);color:#7A5A12}
.lscore.try i{background:var(--sun);color:#4A3200;font-size:13px}

/* ── امتحان الوحدة: الدهبي هويته — البرواز والشارة بيشيلوا الحالة،
      والاجتياز بياخد نسخة خضرا-دهبية بنفس الظل الصلب القائم ── */
.lesson.unit-exam.is-tried{
  background:linear-gradient(180deg,#FFF4D6,#FFE9B8);border-color:var(--sun);
}
.lesson.unit-exam.is-passed{
  background:linear-gradient(180deg,#EAF7EF,#DCF2E4);
  border-color:var(--ok-border);box-shadow:0 3px 0 var(--ok-border);
}
.lesson.unit-exam.is-passed .ln{background:var(--green)}

/* ── تقدّم الوحدة — بيحل محل .ucount أول ما حاجة تتجاز ── */
.uprog{
  flex:0 0 auto;margin-inline-start:auto;
  font-family:var(--en);font-size:12px;font-weight:700;
  background:#fff;border:1.5px solid var(--ok-border);color:var(--ok-ink);
  border-radius:99px;padding-block:3px;padding-inline:10px;
  white-space:nowrap;
}
.uprog.all{background:var(--green);border-color:var(--green);color:#fff}

@media (hover:hover) and (pointer:fine){
  a.lesson.is-passed:hover{background:#D9F1E3;border-color:var(--green)}
  a.lesson.is-tried:hover{border-color:var(--sun)}
  a.lesson.unit-exam.is-passed:hover{background:linear-gradient(180deg,#E2F4E9,#D5EFDF)}
}

@media (max-width:400px){
  .lscore{font-size:12px;padding-inline:2px 7px}
}

/* ── نص القراءة ──────────────────────────────────────────────
   أسئلة الفهم بتقول «من النص» — والنص كان في صفحة الملخّص بس، يعني
   الطالب بيتسأل عن حاجة مشفهاش. الكارت ده بيتعرض مرة واحدة فوق
   الأسئلة في الوضعين (تدريب وامتحان). مش sticky عن قصد: على شاشة
   ٣٦٠px قصة مثبّتة بتاكل النص المرئي كله.                        */
.passage{
  background:#F4FBFF;border:2px dashed var(--sky);border-radius:16px;
  padding:12px 14px;margin:0 0 14px;
}
.passage > summary{
  list-style:none;cursor:pointer;font-weight:800;color:#15556F;
  font-size:16px;min-height:36px;display:flex;align-items:center;gap:8px;
}
.passage > summary::-webkit-details-marker{display:none}
.passage > summary::after{content:'▾';margin-inline-start:auto;font-size:14px;opacity:.7}
.passage:not([open]) > summary::after{content:'▸'}
.passage-hint{margin:6px 0 0;font-size:12.5px;color:#4A6B7A}
.passage-body{
  margin:8px 0 0;white-space:pre-line;line-height:2;
  font-size:clamp(15px,4vw,17px);color:var(--ink);
  background:#fff;border-radius:12px;padding:12px 14px;
}
@media print{
  .passage{break-inside:avoid;border-style:solid}
  .passage > summary::after{content:''}
}

/* ═══ ترويسة قسم في ورقة الامتحان — «أولًا: القراءة» ═══
   الشكل مأخوذ من نماذج «قيّم نفسك» و«التقييم النهائي»: شريط ملوّن
   بعنوان القسم، تحته جملة التكليف، وتحتها نصّ القسم لو له نص.

   ⛔ **اتعدّل 2026-08-15 — الكارت بقى محايد والهوية اتنقلت للشريط.**
   كان: كارت بتدرّج أصفر + إطار أصفر ٢px + **كبسولة** صفرا للترتيب.
   وكبسولة رقم السؤال خضرا بنفس الشكل بالظبط — فالفرق بين «القسم»
   و«السؤال» كان **اللون وحده**، والمالك فضل يخلط بينهم.
   بقى: الأصفر يظهر في **سطح واحد بس** (الشريط)، والكبسولة **شكل
   محجوز لرقم السؤال وحده**. يعني الفرق بقى في الشكل والمكان
   والحجم، واللون تعزيز. */
.card.sec{ background:#fff; border:1px solid var(--line); }
/* الشريط بيمدّ على عرض الكارت كله — الهوامش السالبة بتلغي حشو `.card`
   (‏20px 16px). ⚠️ لو حشو `.card` اتغيّر، الأرقام دي لازم تتغيّر معاه. */
.sec-head{
  display:flex;align-items:baseline;gap:var(--sp-2);
  margin:calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4)) var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--sec-band);
  border-block-end:2px solid var(--sun);
  border-radius:var(--r-l) var(--r-l) 0 0;   /* متماثل — آمن في الاتجاهين */
}
/* نصّ مش كبسولة: صفر صناديق على مستوى القسم. */
.sec-no{color:#7A4E05;font-weight:900;font-size:var(--fs-s);white-space:nowrap}
.sec-no::after{content:' ·';font-weight:700}
/* **الوزن ٩٠٠ الوحيد جوه الامتحان** — أكبر وأتقل من نصّ السؤال بدرجتين. */
.sec-head h3{margin:0;font-size:clamp(19px,5vw,22px);font-weight:900;color:#7A4E05}
.sec-dir{margin:8px 0 0;font-weight:700;color:#5C4A2A;font-size:14.5px}
.sec-img{
  display:block;width:100%;max-width:520px;margin:12px auto 0;
  border-radius:14px;border:1px solid var(--line);background:#fff;
}
.sec-text{
  margin:10px 0 0;white-space:pre-line;line-height:2;
  font-size:clamp(15px,4vw,17px);color:var(--ink);
  background:#fff;border:1px dashed var(--line);border-radius:12px;padding:12px 14px;
}
@media print{ .card.sec{break-inside:avoid;break-before:auto} }


/* ── اتجاه المحتوى يتبع المادة ────────────────────────────────
   `.opt` و`.sent` كانوا مثبّتين على `direction:ltr;text-align:left`
   والخط الإنجليزي — اتكتبوا وكل المواد كانت `medium='en'`. أول مادة
   عربية طلعت اختياراتها من الشمال لليمين وبمحاذاة يسار (المالك مسكها
   2026-08-12). دلوقتي بيتبعوا `<html dir>`، والستايل الإنجليزي بيترجع
   في الصفحات الإنجليزية وحدها.                                       */
html[lang="en"] .opt,
html[lang="en"] .sent{font-family:var(--en)}

/* ═══ هرمية المشغّل — رأس السؤال ═══════════════════════════════════
   المالك 2026-08-15: «التنسيق داخل الامتحان للتمييز بين عنوان فرعي
   جوه الامتحان زي نوع السؤال ورقمه… التنسيق مهم أوي».

   ⛔ **الشكل قبل اللون.** كبسولة القسم (صفرا) وكبسولة السؤال (خضرا)
   كانوا **نفس الشكل**، والاعتماد على اللون وحده فشل عمليًّا. دلوقتي:

   | المستوى | الحامل | مافيهوش |
   |---|---|---|
   | قسم    | شريط أصفر عريض · ٩٠٠ · ٢٢px | كبسولة |
   | سؤال   | شريط كريمي + كبسولة خضرا · ٧٠٠ · ١٩px | أصفر |
   | ودجت   | `--warm-bg` | شرايط |

   وكل حامل بيظهر في **مستوى واحد بس** — التصادم بقى مستحيل بنيويًّا.  */
.q-head{
  display:flex;align-items:center;gap:var(--sp-2);
  /* بيلغي حشو `.card` (‏20px 16px) — راجعه لو الحشو اتغيّر */
  margin:calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4)) var(--sp-3);
  padding:var(--sp-2) var(--sp-4);
  background:var(--strip-bg);
  border-block-end:1px solid var(--line);
  border-radius:var(--r-l) var(--r-l) 0 0;
}
/* «من ٤٠» — الطفل بيعرف فاضل قد إيه من غير ما ينزل لآخر الصفحة. */
.q-count{font-size:var(--fs-xs);font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* تعليمة النوع — **نصّ عاري بلا صندوق**. كبسولة تانية هي بالظبط
   التصادم اللي بنصلّحه. */
/* ⚠️ أطول تسمية («اختار كل الإجابات الصح») بتملا الشريط بالظبط على
   ٣٦٠px — صفر فسحة. فالتسمية بتتقصّ بنقط بدل ما تدفع أو تتقطع. */
.q-type{margin-inline-start:auto;font-size:var(--fs-xs);font-weight:700;
  color:var(--muted);white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.q-head{min-width:0}
/* نصّ السؤال على سطره — ٧٠٠ مش ٩٠٠: التسعمية محجوزة لعنوان القسم.
   لما كل حاجة بتصرّخ، مفيش حاجة بتبقى عنوان. */
.card h3.q-prompt{margin:0 0 var(--sp-3);font-size:clamp(17px,4.5vw,19px);
  font-weight:700;line-height:1.75}
[dir=ltr] .card h3.q-prompt,.card h3.q-prompt[dir=ltr]{line-height:1.5}
/* كارت المقدّمة — نصّ بارز، **مش** الكبسولة الخضرا (دي للرقم وحده). */
.intro-tag{font-weight:800;font-size:var(--fs-s);color:var(--board);white-space:nowrap}

/* حافة الكارت المتجاوَب — **وضع الامتحان وحده** (في التدريب الاختيارات
   نفسها بتتلوّن فالحافة تكرار وبتتصادم مع ألوان المراجعة).
   ⚠️ الحافة **محجوزة شفافة من البداية**: لو اتضافت وقت الإجابة، صندوق
   المحتوى بيضيق ٥px والنصّ بيعيد تدفّقه مع كل إجابة. */
#stage > .card{border-inline-start:5px solid transparent;scroll-margin-top:var(--stick)}
#stage > .card.is-answered{border-inline-start-color:var(--sky)}

/* شارة مصدر السؤال — «من تقييمات الوزارة» (طلب المالك 2026-08-14).
   تحت رأس السؤال مش فوقه: المصدر معلومة ثانوية، السؤال هو الأصل. */
.q-tag{
  display:inline-block;margin:6px 0 2px;padding:3px 10px;border-radius:999px;
  background:#EAF4EC;color:#1F6B3B;border:1px solid #BEDDC7;
  font-size:12px;font-weight:800;
}

/* سطر حالة الدرس تحت صفّه — «تم» + آخر محاولة + عددها.
   تحت الصفّ مش جواه: الصفّ نفسه رابط، وحشو معلومات جواه بيضيّق
   منطقة اللمس على الموبايل. */
.lrow-meta{
  flex:0 0 100%;order:9;margin:-2px 10px 2px;font-size:12.5px;color:#5B6B73;
  display:flex;flex-wrap:wrap;gap:4px;align-items:center;
}
.lrow-meta b{color:#1F6B3B}
.done-mark{color:#1F6B3B;font-weight:800}

/* ═══ تقرير «الأخطاء كانت فين؟» ═══
   شريط نسبي لكل جزء: أخضر صح · أحمر غلط · رمادي مِتحلّش.
   الترتيب من الأكتر خطأً — ده اللي الطالب محتاج يشوفه أول. */
.card.brk{background:linear-gradient(180deg,#FFF8F6 0%,#fff 55%);border:2px solid #F3C9BE}
.brk-sum{margin:6px 0 12px;font-size:15px}
.brk-sum b{font-size:18px;padding:0 2px}
.brk-sum b.ok{color:#2E9E5B} .brk-sum b.no{color:#D9503F} .brk-sum b.bl{color:#8A99A0}
.brk-ttl{margin:14px 0 6px;font-weight:800;font-size:13.5px;color:#7A4E05}
.brk-tbl{width:100%;border-collapse:collapse}
.brk-tbl td{padding:5px 4px;vertical-align:middle;font-size:13.5px}
.brk-tbl tr.has-wrong .bn{font-weight:800;color:#8E2B22}
.brk-tbl .bn{width:38%}
.brk-tbl .bc{width:56px;text-align:end;color:#5B6B73;font-weight:700}
.bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:#EEF2F4}
.bar i{display:block;min-width:0}
.bar i.ok{background:#2E9E5B} .bar i.no{background:#D9503F} .bar i.bl{background:#C9D3D8}
.brk-note{margin:10px 0 0;font-size:12.5px;color:#6B7A83}

/* علامة «تم» جوه صفّ الدرس — دايرة خضراء صغيرة جنب رقم الدرس. */
.lesson .ldone{
  flex:0 0 auto;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:#2E9E5B;color:#fff;font-size:13px;font-weight:900;line-height:1;
}
.lesson.dim .ldone{background:#B9C3C8}

/* ⛔ **أيقونة الملخّص لازم تفضل جوه الشاشة مهما طال العنوان.**
   المالك: «لما عنوان الدرس يبقى كبير بتطلع أيقونة الملخص بره الشاشة
   ومش بعرف أجيبها من الموبايل». السبب: العنوان كان `nowrap` والصفّ
   `flex` من غير لفّ، فالعنوان بيدفع الأيقونة بره. العلاج تلات طبقات:
   الصفّ بيلفّ · العنوان بيلفّ على الموبايل · والأيقونة `order` أصغر
   عشان تفضل قبل أي لفّ. */
.lesson-row{min-width:0}
.lesson-row .lesson{min-width:0}
.sum-link{order:-1}

/* ═══ توصيل: الإجابة الحالية جنب الطرف + تلميح التعديل ═══
   الطفل لازم يشوف اختياره **قبل** ما يبعت، ويعرف إنه ينفع يغيّره. */
.mitem{position:relative}
.mitem .mtxt{display:block}
.mpick{
  display:block;margin-top:3px;font-size:12px;font-weight:800;
  color:#1F6B3B;background:#EAF4EC;border-radius:8px;padding:1px 6px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mitem.done .mpick{opacity:1}
.match-hint{
  margin:8px 2px 0;font-size:12.5px;color:#6B7A83;line-height:1.6;
}
/* الموبايل: العمودان بيضيقوا، فالنص يلفّ بدل ما يتقصّ */
@media (max-width:460px){
  .match{gap:6px}
  .mitem{font-size:13.5px;padding:8px 9px;white-space:normal}
  .mpick{font-size:11.5px}
  .match-hint{font-size:12px}
}

/* ═══ صفحة النتايج — كروت الامتحانات وشريط التطوّر ═══
   الطفل بيسأل «أنا بتحسّن؟» — الشريط ده هو الرد: عمود لكل محاولة من
   آخر ٥، وارتفاعه نسبتها، ولونه مستواها. */
.exam-cards{display:flex;flex-direction:column;gap:10px}
.exam-card{
  display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;
  background:var(--warm-bg);border:2px solid var(--warm-border);
  border-radius:14px;padding:11px 13px;transition:transform .12s,border-color .2s;
}
.exam-card.good{border-color:#9AD3AF;background:linear-gradient(180deg,#F2FBF5,#fff)}
.exam-card.low{border-color:#F0C4BC;background:linear-gradient(180deg,#FFF6F4,#fff)}
.exam-card:active{transform:scale(.99)}
.ec-title{font-weight:800;font-size:15px;line-height:1.45}
.ec-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ec-pct{font-size:26px;line-height:1;color:#1F6B3B}
.exam-card.low .ec-pct{color:#B4483A}
.ec-sub{font-size:12.5px;color:#5B6B73}
.ec-tries{font-size:12px;color:#7C8A91;margin-inline-start:auto}
.ec-delta{font-size:12.5px;font-weight:800}
.ec-delta.up{color:#2E9E5B} .ec-delta.down{color:#D9503F}

.trend{display:inline-flex;align-items:flex-end;gap:3px;height:36px}
.trend i{display:block;width:9px;border-radius:3px 3px 0 0}
.trend i.hi{background:#2E9E5B} .trend i.mid{background:#E8A33D} .trend i.lo{background:#D9503F}

/* نقط الضعف */
.card.weak{background:linear-gradient(180deg,#FFF8F6,#fff 60%);border:2px solid #F3C9BE}
.weak-row{display:flex;align-items:center;gap:9px;margin:8px 0}
.weak-row .wn{flex:0 0 34%;font-weight:800;font-size:13.5px;color:#8E2B22}
.weak-row .bar{flex:1}
.weak-row .wc{flex:0 0 auto;font-size:12.5px;color:#5B6B73;font-weight:700}

.pager{display:flex;align-items:center;justify-content:center;gap:12px}
.pager .pg{font-size:13px;color:#5B6B73}

@media (max-width:460px){
  .ec-pct{font-size:23px}
  .ec-title{font-size:14px}
  .weak-row .wn{flex:0 0 30%;font-size:12.5px}
}

/* ═══ الخريطة الزمنية — نوع `timeline` ═══════════════════════════════
   المالك 2026-08-15: «الأول اعمل النوع ده من الأسئلة وبعدين ألّف».
   المصدر: نشاط «فكر ورتب» في تدريبات كتاب تاريخ أولى ثانوي.

   ⛔ **المحور رأسي مش أفقي.** على ٣٦٠px المحور الأفقي بيدّي كل حدث
   عمودًا عرضه ~٧٠px فالنصّ العربي بيتقطّع حرفًا حرفًا. والرأسي كمان
   محايد اتجاهيًّا فما بيتكسرش بين RTL وLTR — نفس درس `.opt`/`.sent`. */
.timeline{margin:6px 0 0}
.tl-axis{margin:0 0 var(--sp-2);font-size:var(--fs-xs);font-weight:700;color:var(--muted)}

.tl-rail{list-style:none;margin:0;padding:0;position:relative}
/* الخيط الواصل بين النقط — `inset-inline-start` عشان يقلب مع الاتجاه */
.tl-rail::before{
  content:'';position:absolute;top:14px;bottom:14px;inset-inline-start:15px;
  width:2px;background:var(--line);
}
.tl-slot{
  position:relative;display:flex;align-items:center;gap:var(--sp-2);
  margin-block-end:var(--sp-2);flex-wrap:wrap;
}
.tl-dot{
  flex:0 0 auto;z-index:1;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--board);color:#fff;
  font-size:var(--fs-xs);font-weight:800;font-variant-numeric:tabular-nums;
}
.tl-slot.empty .tl-dot{background:#fff;color:var(--muted);border:2px dashed var(--line)}
.tl-item{
  flex:1 1 0;min-width:0;text-align:start;
  min-height:44px;padding:10px 12px;border-radius:var(--r-s);
  border:2px solid var(--warm-border);background:var(--warm-bg);
  font:inherit;font-size:var(--fs-s);color:var(--ink);
  overflow-wrap:anywhere;cursor:pointer;
}
.tl-slot.empty .tl-item{
  border-style:dashed;background:#fff;color:var(--muted);cursor:default;
}
.tl-slot.ok  .tl-item{background:var(--ok-bg); border-color:var(--ok-border)}
.tl-slot.bad .tl-item{background:var(--bad-bg);border-color:var(--bad-border)}
.tl-date{
  flex:0 0 100%;margin-inline-start:40px;
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);
}

.tl-pool{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.tl-chip{
  min-height:44px;padding:10px 14px;border-radius:var(--r-s);
  border:2px solid var(--act-border);background:var(--act-bg);color:var(--act-ink);
  font:inherit;font-size:var(--fs-s);font-weight:600;cursor:pointer;
  max-width:100%;overflow-wrap:anywhere;
}
.tl-chip:active{transform:translateY(2px)}
/* اتساب مكانه بدل ما يختفي — الاختفاء بيقفّز الصفحة تحت صباع الطفل */
.tl-chip.used{opacity:.35;pointer-events:none;text-decoration:line-through}

/* ═══ زرار النطق 🔊 ══════════════════════════════════════════════════
   المالك 2026-08-15: «عايز إمكانية نطق الكلمات من المتصفح».
   ⛔ **الزرار مابيترسمش أصلاً لو الجهاز مالوش صوت للغة** — `speak.js`
   بيرجّع `null` والمنادي بيتخطّاه. زرار ميّت للطفل أسوأ من مفيش زرار. */
.say-btn{
  flex:0 0 auto;display:inline-grid;place-items:center;
  min-width:38px;min-height:38px;padding:0;margin-inline-start:var(--sp-1);
  border:2px solid var(--act-border);border-radius:50%;
  background:var(--act-bg);color:var(--act-ink);
  font-size:17px;line-height:1;cursor:pointer;vertical-align:middle;
}
.say-btn:active{transform:translateY(2px)}
/* نبضة قصيرة تقول للطفل إن الصوت طلع فعلاً */
.say-btn.saying{background:var(--sun);border-color:var(--sun);animation:say-pulse .9s ease}
@keyframes say-pulse{0%{transform:scale(1)}30%{transform:scale(1.18)}100%{transform:scale(1)}}
/* جوه شريط رأس السؤال بيقف في آخر الشريط جنب تعليمة النوع */
.q-head .say-btn{margin-inline-start:var(--sp-2)}
/* ⚠️ `.fig-words li` عمود `flex` بـ`align-items:stretch` لما يكون فيه
   شرح — فالزرار كان بيتمدّد لعرض الخلية كلها (طلع بيضة عرضها ٢٥٩px).
   `align-self` بيثبّته في حجمه، والحجم صريح مش `min-*` وحده. */
.fig-words li .say-btn{
  width:34px;height:34px;min-width:34px;min-height:34px;
  font-size:15px;align-self:center;flex:0 0 auto;
}
@media print{ .say-btn{display:none !important} }

/* زرار النطق جوه ترويسة النص/القسم */
.passage > summary .say-btn,.sec-head .say-btn{margin-inline-start:auto}

/* ═══ سؤال الإملاء المسموع ══════════════════════════════════════════
   المالك 2026-08-15: «اعمل الإملاء بتقنياتك».
   ⛔ **الكلمة بتتسمع ولا بتتعرض** — فالزرار كبير وواضح، وهو المدخل
   الوحيد للسؤال. النصّ نفسه مش في الصفحة (بيتجاب من `api/say.php`). */
.dictation{margin:var(--sp-2) 0 var(--sp-3)}
.dict-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  width:100%;min-height:56px;padding:12px 16px;
  border:2px solid var(--act-border);border-radius:var(--r-m);
  background:var(--act-bg);color:var(--act-ink);
  font:inherit;font-size:var(--fs-m);font-weight:800;cursor:pointer;
}
.dict-btn:active{transform:translateY(2px)}
.dict-btn.saying{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.dict-hint{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--muted)}
.dict-hint.no-voice{color:var(--bad-ink);font-weight:700}
@media print{ .dictation{display:none !important} }

/* مصدر السؤال في اللوحة — «من أنهي كتاب وأنهي صفحة» */
.qsrc{
  flex:0 0 100%;order:8;margin:2px 0 0;
  font-size:12.5px;font-weight:600;color:#1F6B3B;
}
.qsrc.none{color:var(--bad-ink)}
.qsrc .qtagged{
  display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;
  background:#EAF4EC;border:1px solid #BEDDC7;font-size:11.5px;
}

/* ═══ فوتر الاستخدام ═══
   المالك 2026-08-16: «يبقى عارف استخدم إيه ولسه ليه أد إيه».
   ⚠️ الشريط بيعرض الاستخدام مقابل الحدّ — والحدّ ده **تنبيه للمالك
   مش قفل**، فالنص ما بيوعدش بقفل مش هيحصل. */
.ufoot{margin:34px auto 10px;max-width:620px;display:grid;gap:10px}
.ufoot-card{display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:#fff;border:1px solid var(--line,#E3D9C8);border-radius:14px;
  text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
.ufoot-card:hover,.ufoot-card:focus-visible{transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.07)}
.ufoot-card:focus-visible{outline:2px solid var(--brand,#2E9E5B);outline-offset:2px}
.ufoot-ico{font-size:22px;flex:0 0 auto}
.ufoot-body{flex:1;min-width:0;display:grid;gap:4px}
.ufoot-body b{font-size:14.5px}
.ufoot-body small{font-size:12.5px;color:var(--muted,#6B5B45)}
.ufoot-bar{display:block;height:6px;border-radius:99px;background:#EFE7DA;overflow:hidden}
.ufoot-bar i{display:block;height:100%;background:var(--brand,#2E9E5B);border-radius:99px}
.ufoot-go{font-size:20px;color:var(--muted,#6B5B45);flex:0 0 auto}
.ufoot-cta{background:#F3FAF5;border-color:#2E9E5B}
.ufoot-who{text-align:center;color:var(--muted,#6B5B45);font-size:12.5px;margin:6px 0 0}
.ufoot-who code{background:#F5F0E6;padding:1px 6px;border-radius:5px;font-size:12px}
@media print{.ufoot{display:none}}

/* ═══ صفحة «استخدامي» ═══ */
.panel-card{background:#fff;border:1px solid var(--line,#E3D9C8);border-radius:16px;
  padding:18px 20px;margin:0 auto 14px;max-width:620px}
.panel-card h3{margin:0 0 10px;font-size:16px}
.panel-card .note{margin:10px 0 0;font-size:13.5px;color:var(--muted,#6B5B45);line-height:1.9}
.big-num{font-size:38px;font-weight:800;margin:0 0 8px;line-height:1}
.big-num span{font-size:16px;font-weight:500;color:var(--muted,#6B5B45)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stat-row div{background:#FAF7F1;border-radius:12px;padding:12px 6px}
.stat-row b{display:block;font-size:24px;line-height:1.2}
.stat-row small{display:block;font-size:11.5px;color:var(--muted,#6B5B45);margin-top:4px}
ul.plain{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px;font-size:14px}
ul.plain small{color:var(--muted,#6B5B45);font-size:12px}

/* ═══ أيقونة فيديو الدرس ═══
   نفس هيكل `.sum-link` بالظبط (نفس المقاس ونفس نقطة اللمس ٤٤px) —
   بلون دافي يفرّقها عن الملخّص من غير ما تسحب الانتباه منه. */
.vid-link{background:var(--warm-bg);border-color:var(--warm-border)}

/* ═══ صفحة فيديو الدرس ═══
   ⚠️ النسبة بـ`aspect-ratio` مش بحشوة padding — الـiframe المطلق كان
   بيتقصّ على الموبايل الطويل. */
.vid-wrap{max-width:960px;margin:0 auto;border-radius:var(--r-m);overflow:hidden;
  border:3px solid var(--line);background:#000}
.vid-wrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vid-next{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}