/* ============================================================
   خط Cairo — الاحتياطي أولاً كي لا يقفز النص أثناء التحميل
   ============================================================

   «Cairo Fallback» ليس خطاً مستقلاً: هو Arial بمقاس معدَّل إلى
   94.66% ليقارب مقاييس Cairo. بدونه يُرسم النص بـArial ثم يُعاد
   رسمه بـCairo فتتغيّر الأحجام وتتحرّك العناصر أمام القارئ.
   الترتيب في كل متغيّر خطّ: Cairo، ثم هذا الاحتياطي، ثم عامّ. */
@font-face{
  font-family:'Cairo Fallback';
  src:local('Arial'), local('Helvetica'), local('Segoe UI');
  size-adjust:94.66%;
  ascent-override:normal;
  descent-override:normal;
  line-gap-override:normal;
}

/* ============================================================
   نورث — نظام التصميم
   مرجع بصري موحّد لكل الصفحات: خط واحد، ومقاس عناوين واحد، وحواف
   وظلال ومسافات واحدة، ومكوّنات تُعاد في كل صفحة بدل تصميم كل صفحة
   على حدة.

   الألوان تبقى ألوان نورث: الكحلي أساس، والأزرق الفاتح للخلفيات،
   والبرتقالي للحالة الجارية وحدها (السلسلة والدرس الحالي).
   ============================================================ */

:root{
  /* خط واحد للعناوين والنصوص والأرقام: Cairo.
     الأوزان المعتمدة: ٤٠٠ للنص، ٦٠٠ لإبراز خفيف، ٧٠٠ للعناوين
     الفرعية والأزرار، ٩٠٠ للعناوين الرئيسية. لا وزن خامس. */
  --display:'Cairo','Cairo Fallback',system-ui,sans-serif;
  --body:'Cairo','Cairo Fallback',system-ui,sans-serif;
  --num:'Cairo','Cairo Fallback',system-ui,sans-serif;

  /* أسماء الأوزان، كي لا يُكتب الرقم في عشرين موضعاً */
  --w-reg:400; --w-semi:600; --w-bold:700; --w-black:900;

  --rc:16px;   /* البطاقة */
  --teal:#14B8A6;
  --rt:12px;   /* المربّع والشريحة */
  --rbtn:10px; /* الزر */

  --card-line:#E7EDF5;
  --card-sh:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,24,40,.14);
  --tile-bg:#EDF3FB;

  --flame:#F97316;
  --flame-bg:#FFF3E8;
  --flame-line:#FBD3AE;

  --gap:14px;
}

:root[data-theme="dark"], :root:not([data-theme="light"]){
  --card-line:var(--line);
  --card-sh:0 1px 2px rgba(0,0,0,.28), 0 10px 28px -18px rgba(0,0,0,.5);
  --tile-bg:rgba(108,166,224,.12);
  --teal:#2DD4BF;
  --flame:#FB923C;
  --flame-bg:rgba(251,146,60,.12);
  --flame-line:rgba(251,146,60,.3);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --card-line:#E7EDF5;
    --card-sh:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,24,40,.14);
    --tile-bg:#EDF3FB;
    --flame:#F97316; --flame-bg:#FFF3E8; --flame-line:#FBD3AE;
  }
}
:root[data-theme="light"]{
  --card-line:#E7EDF5;
  --card-sh:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,24,40,.14);
  --tile-bg:#EDF3FB;
  --flame:#F97316; --flame-bg:#FFF3E8; --flame-line:#FBD3AE;
}

/* ---------- تسلسل العناوين ---------- */
body{font-family:var(--body);letter-spacing:0}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em}
.n-h1{font-size:clamp(24px,3.4vw,34px);font-weight:900;line-height:1.3}
.n-h2{font-size:clamp(17px,2vw,20px);font-weight:700;line-height:1.4}
.n-h3{font-size:15px;font-weight:700}
.n-sub{font-size:14px;color:var(--fg-2);line-height:1.85}
.n-mut{font-size:12px;color:var(--fg-3)}

/* ترويسة الصفحة: سطر تعريفي صغير ثم العنوان ثم الشرح — موحّدة في كل الصفحات */
.pg-head{margin-bottom:clamp(16px,2.6vw,22px)}
.pg-eyebrow{display:inline-block;font-size:12px;font-weight:700;color:var(--accent);
  margin-bottom:7px;letter-spacing:.01em}
.pg-head .n-h1{margin:0 0 8px}
.pg-head .n-sub{max-width:62ch}

/* ---------- البطاقة ---------- */
.ncard{
  background:var(--surface);border:1px solid var(--card-line);
  border-radius:var(--rc);padding:clamp(16px,2.4vw,22px);
  box-shadow:var(--card-sh);min-width:0;
}
.ncard + .ncard{margin-top:var(--gap)}
.nsec{margin-bottom:var(--gap)}

/* رأس القسم: أيقونة ملوّنة + عنوان + أدوات على الطرف */
.nhead{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.nhead > .ms{font-size:21px;color:var(--accent);flex-shrink:0}
.nhead h2,.nhead h3{font-size:clamp(16px,1.9vw,19px);font-weight:700;margin:0}
.nhead .n-right{margin-inline-start:auto;display:flex;align-items:center;gap:8px}

/* ---------- المربّع الأيقوني ---------- */
.ntile{
  width:42px;height:42px;border-radius:var(--rt);flex-shrink:0;
  display:grid;place-items:center;background:var(--tile-bg);color:var(--accent);
}
/* الرمز ممتلئ لا خطّاً رفيعاً. أول ما جرّبته تغميق خلفية التايل،
   فقاس الحساب عكسه: التباين نزل من 5.74 إلى 4.93 لأن الخلفية
   اقتربت من لون الرمز. المشكلة لم تكن تبايناً بل مساحةً — خطٌّ
   بسُمك شعرة لا يُرى مهما صفا لونه. الملء يعطيه جسماً، والوزن
   400 يعطيه حدّاً. */
.ntile .ms{font-size:21px;font-variation-settings:'FILL' 1,'wght' 400}
.ntile.sm{width:34px;height:34px;border-radius:9px}
.ntile.sm .ms{font-size:18px;font-variation-settings:'FILL' 1,'wght' 400}
.ntile.flame{background:var(--flame-bg);color:var(--flame)}
.ntile.ok{background:color-mix(in srgb,var(--up) 13%,transparent);color:var(--up)}

/* ---------- بطاقات الإحصاء ---------- */
.nstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--gap)}
.nstat{
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--rc);
  padding:16px 18px;box-shadow:var(--card-sh);min-width:0;
  display:flex;align-items:flex-start;gap:12px;
}
a.nstat{transition:border-color .18s,transform .18s}
a.nstat:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--card-line))}
.nstat-b{flex:1;min-width:0}
.nstat-l{font-size:12px;color:var(--fg-3);display:block;line-height:1.5}
.nstat-v{font-size:clamp(18px,2.2vw,23px);font-weight:900;display:block;margin-top:4px;
  line-height:1.35;overflow-wrap:anywhere;font-family:var(--display)}
.nstat-v i{font-size:.62em;font-style:normal;color:var(--fg-3);margin-inline-start:1px}
.nstat-n{font-size:11.5px;color:var(--fg-3);display:block;margin-top:4px;line-height:1.6;
  overflow-wrap:anywhere}

/* ---------- صفّ قابل للنقر ---------- */
.nrows{display:grid;gap:9px}
.nrow{
  display:flex;align-items:center;gap:13px;padding:13px 15px;
  border:1px solid var(--card-line);border-radius:var(--rt);background:var(--surface);
  transition:border-color .18s,background .18s;min-width:0;
}
a.nrow:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--card-line));
  background:var(--accent-wash)}
.nrow-b{flex:1;min-width:0}
.nrow-b b{font-size:14.5px;font-weight:700;display:block;line-height:1.5}
.nrow-b span{font-size:12.5px;color:var(--fg-2);display:block;margin-top:3px;line-height:1.6}
.nrow .n-go{font-size:20px;color:var(--fg-3);flex-shrink:0}
.nrow.off{opacity:.55}

/* ---------- مؤشر التقدم ---------- */
.nbar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.nbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.nbar.sm{height:6px}
.nbar-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--fg-2);margin-bottom:7px}
@media (prefers-reduced-motion:reduce){.nbar i{transition:none}}

/* ---------- شريحة ---------- */
.nchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  border-radius:999px;padding:5px 11px;background:var(--surface-2);color:var(--fg-2)}
.nchip .ms{font-size:15px}
.nchip.ok{background:color-mix(in srgb,var(--up) 14%,transparent);color:var(--up)}
.nchip.flame{background:var(--flame-bg);color:var(--flame)}
.nchip.blue{background:var(--accent-wash);color:var(--accent)}

/* ---------- زر ---------- */
.nbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:14px;font-weight:700;padding:11px 20px;border-radius:var(--rbtn);
  border:1px solid transparent;cursor:pointer;text-align:center;min-height:42px;
  transition:background .18s,border-color .18s,color .18s;
}
.nbtn-p{background:var(--cta);color:var(--on-cta)}
.nbtn-p:hover{background:var(--cta-2)}
.nbtn-g{background:transparent;color:var(--fg);border-color:var(--line-2)}
.nbtn-g:hover{border-color:var(--accent);color:var(--accent)}
.nbtn-sm{font-size:13px;padding:8px 14px;min-height:36px}
.nbtn-w{width:100%}

/* ---------- حالة فارغة ---------- */
.nempty{text-align:center;padding:26px 16px;color:var(--fg-2);font-size:13.5px;line-height:1.9}
.nempty .ms{font-size:34px;color:var(--fg-3);display:block;margin-bottom:10px}
.nempty.dash{border:1px dashed var(--line-2);border-radius:var(--rt)}
.nempty .nbtn{margin-top:14px}

/* ---------- شبكة الصفحة ---------- */
.ngrid{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--gap);align-items:start}
.ngrid > *{min-width:0}
@media (max-width:980px){.ngrid{grid-template-columns:1fr}}
.ngrid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--gap);align-items:stretch}
.ngrid-2 > *{min-width:0}
.ngrid-r{grid-template-columns:.6fr 1.4fr}
@media (max-width:980px){.ngrid-r{grid-template-columns:1fr}}

/* ============================================================
   لوحة المتعلم
   ============================================================ */
.n-link{display:inline-flex;align-items:center;font-size:13px;font-weight:700;
  color:var(--accent);min-height:34px;padding-inline:4px}
.n-link:hover{text-decoration:underline;text-underline-offset:3px}

/* بطاقة السلسلة */
.streak-card{
  background:linear-gradient(110deg,var(--accent-wash) 0%,var(--surface) 58%);
  border:1px solid var(--card-line);border-radius:var(--rc);
  padding:clamp(16px,2.6vw,24px);box-shadow:var(--card-sh);
}
.streak-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);flex-wrap:wrap}
.streak-fire{
  width:58px;height:58px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(145deg,#FB923C,var(--flame));color:#fff;
  box-shadow:0 8px 20px -8px rgba(249,115,22,.6);
}
.streak-fire .ms{font-size:30px;font-variation-settings:'FILL' 1}
.streak-txt{min-width:120px}
.streak-txt b{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(30px,4.6vw,42px);line-height:1;color:var(--fg)}
.streak-txt > span{font-size:13.5px;color:var(--fg-2);display:block;margin-top:4px}
.streak-txt p{font-size:12.5px;color:var(--fg-3);margin-top:7px}
.week{display:flex;gap:8px;margin-inline-start:auto;flex-wrap:wrap}
.wd{display:flex;flex-direction:column;align-items:center;gap:6px}
.wd-n{font-size:11px;color:var(--fg-3)}
.wd-o{width:46px;height:46px;border-radius:var(--rt);display:grid;place-items:center;
  font-style:normal;font-size:14px;font-weight:700;font-family:var(--display);
  border:1px solid var(--card-line);background:var(--surface);color:var(--fg-2)}
.wd.on .wd-o{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.wd.today .wd-o{background:var(--flame);border-color:var(--flame);color:#fff;
  box-shadow:0 6px 16px -8px rgba(249,115,22,.7)}
.wd.today .wd-n{color:var(--flame);font-weight:700}
.wd.future .wd-o{opacity:.5;border-style:dashed}
@media (max-width:560px){
  .week{margin-inline-start:0;width:100%;justify-content:space-between;gap:5px}
  .wd-o{width:38px;height:38px;font-size:13px}
}

/* تابع التعلم */
/* القاعدة في الموقع كلّه: العنوان الأساسي ثقيل، والسطر الفرعي تحته
   خفيف (٤٠٠) وبلون النصّ الثانوي — كما حدّدته العميلة بالأحمر في
   صورتها. اسم الدرس هنا سطرٌ فرعي تحت «تابع التعلم». الخطّ نفسه
   (كايرو) في الاثنين؛ الوزن واللون وحدهما يصنعان الفرق. */
.rsm-t{font-size:clamp(16px,2.2vw,19px);font-weight:400;line-height:1.6;
  color:var(--fg-2);margin-bottom:4px}
#resume-box .nbtn{margin-top:14px}

/* مهام الإدارة */
.dt-extra{margin-top:16px;padding-top:14px;border-top:1px solid var(--card-line)}
.dt-extra h3{color:var(--fg-3);font-weight:600;margin-bottom:4px}

/* خريطة النشاط */
.hm{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);
  gap:4px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.hm-c{width:13px;height:13px;border-radius:3px;display:block;background:var(--surface-2)}
.hm-c.hm-pad{background:transparent}
.hm-c.l0{background:var(--surface-2)}
.hm-c.l1{background:color-mix(in srgb,var(--accent) 24%,var(--surface-2))}
.hm-c.l2{background:color-mix(in srgb,var(--accent) 48%,var(--surface-2))}
.hm-c.l3{background:color-mix(in srgb,var(--accent) 74%,var(--surface-2))}
.hm-c.l4{background:var(--accent)}
.hm-k{display:flex;align-items:center;gap:4px;margin-top:12px;font-size:11px;color:var(--fg-3)}
.hm-k span{margin-inline:4px}
.hm-s{margin-top:10px}

/* آخر إشعار */
.note-last{border:1px solid var(--card-line);border-radius:var(--rt);
  padding:13px 15px;margin-bottom:12px}
.note-last.new{border-color:color-mix(in srgb,var(--accent) 45%,var(--card-line));
  background:var(--accent-wash)}
.note-last b{font-size:14.5px;font-weight:700;display:block;line-height:1.5}
.note-last p{font-size:13px;color:var(--fg-2);margin-top:5px;line-height:1.7}
.note-last .when{font-size:11.5px;color:var(--fg-3);display:block;margin-top:8px}

/* شرائح الخارطة المصغّرة */
.pips{display:flex;gap:8px;flex-wrap:wrap}
.pip{width:46px;height:46px;border-radius:var(--rt);display:grid;place-items:center;
  font-size:13px;font-weight:700;font-family:var(--display);
  border:1px solid var(--card-line);background:var(--surface);color:var(--fg-2)}
.pip .ms{font-size:20px}
.pip.done{background:color-mix(in srgb,var(--up) 12%,transparent);
  border-color:color-mix(in srgb,var(--up) 34%,transparent);color:var(--up)}
.pip.current{border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash)}
.pip.open{border-color:var(--line-2)}
.pip.locked{background:var(--surface-2);color:var(--fg-3);font-size:11px}
a.pip:hover{transform:translateY(-1px)}
.pip-k{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--fg-3)}
.pip-k span{display:inline-flex;align-items:center;gap:6px}
.pip-d{width:9px;height:9px;border-radius:3px;display:inline-block}
.pip-d.done{background:var(--up)}
.pip-d.current{background:var(--accent)}
.pip-d.locked{background:var(--surface-2);border:1px solid var(--line-2)}
@media (max-width:420px){.pip{width:40px;height:40px}}

/* دليل المبتدئين */
.gstep{display:flex;align-items:flex-start;gap:13px;padding:13px 0;
  border-bottom:1px solid var(--card-line)}
.gstep:last-of-type{border-bottom:none}
.gs-n{flex-shrink:0;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--tile-bg);color:var(--accent);font-size:13px;font-weight:700;font-style:normal}

/* ============================================================
   صفحة الخارطة
   ============================================================ */
.map-hero{
  background:linear-gradient(160deg,var(--accent-wash) 0%,var(--surface) 55%);
  border:1px solid var(--card-line);border-radius:var(--rc);box-shadow:var(--card-sh);
  padding:clamp(22px,4vw,38px);text-align:center;
}
.map-hero .ntile{margin-inline:auto;margin-bottom:14px}
.map-hero .n-sub{max-width:52ch;margin-inline:auto;margin-top:8px}
.map-meta{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:10px}
.map-hero .nbar-row{margin-top:20px}

/* المربّعات تحت بعضها لا متجاورة: ثلاثة أرقامٍ في صفٍّ تتزاحم
   على الجوال، والقراءة سطراً سطراً أهدأ. والرقم في وسط صندوقه
   وكلمتُه تحته — هكذا طلبته العميلة في المرجع. */
.map-tiles{display:grid;grid-template-columns:1fr;gap:10px}
.mt{border-radius:var(--rt);padding:16px;text-align:center;
  border:1px solid transparent}
.mt b{display:block;font-family:var(--display);font-weight:900;font-size:28px;
  line-height:1.1}
.mt span{display:block;font-size:13px;line-height:1.6;margin-top:7px;opacity:.85}
.mt.ok{background:color-mix(in srgb,var(--up) 11%,transparent);
  border-color:color-mix(in srgb,var(--up) 26%,transparent);color:var(--up)}
.mt.blue{background:var(--accent-wash);
  border-color:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--accent)}
.mt.warn{background:var(--flame-bg);border-color:var(--flame-line);color:var(--flame)}

/* المستوى الحالي */
.lv-cur{
  background:linear-gradient(255deg,color-mix(in srgb,var(--up) 9%,var(--surface)) 0%,var(--surface) 62%);
  border:1px solid color-mix(in srgb,var(--up) 26%,var(--card-line));
  border-inline-start:4px solid var(--up);
  border-radius:var(--rc);padding:clamp(18px,2.6vw,24px);box-shadow:var(--card-sh);
}
.lv-cur-in{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.lv-cur-t{flex:1;min-width:200px}
.lv-cur-t .nchip{margin-bottom:10px}
.lv-cur-t h2{margin:0}
.lv-cur-n{text-align:center;flex-shrink:0}
/* الرقم عدّادٌ ينزل: يبدأ بإجمالي دروس المستوى (أسابيعه كلها)
   وينقص درساً مع كل درسٍ تُنهيه. الأحمر الغامق يجعله يُقرأ. */
.lv-cur-n b{display:block;font-family:var(--display);font-weight:900;font-size:34px;
  line-height:1;color:var(--count-dn,var(--dn))}
.lv-cur-n span{display:block;font-size:11.5px;color:var(--fg-3);margin-top:6px}

/* الأسبوع */
.wk-card{margin-top:var(--gap)}
.wk-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.wk-n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:var(--accent);color:var(--on-accent);font-style:normal;font-weight:700;font-size:14px}
.wk-h b{font-size:16px;font-weight:700;display:block}
.wk-h span{font-size:11.5px;color:var(--fg-3);display:block;margin-top:2px}
.wk-bar{flex:1;min-width:90px;margin-inline-start:auto;max-width:180px}

/* صفّ الدرس */
.ls-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ls a,.ls > div{display:flex;align-items:center;gap:12px;padding:13px 15px;
  border-radius:var(--rt);border:1px solid var(--card-line);background:var(--surface)}
.ls-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-style:normal;font-size:13px;font-weight:700;background:var(--surface-2);color:var(--fg-2)}
.ls-b{flex:1;min-width:0}
.ls-b b{font-size:14.5px;font-weight:700;display:block;line-height:1.5}
.ls-b span{font-size:12px;color:var(--fg-3);display:block;margin-top:3px;line-height:1.6}
.ls-s{font-size:20px;color:var(--fg-3);flex-shrink:0}

.ls.done a{background:color-mix(in srgb,var(--up) 8%,transparent);
  border-color:color-mix(in srgb,var(--up) 28%,transparent)}
.ls.done .ls-n{background:var(--up);color:#fff}
.ls.done .ls-s{color:var(--up);font-variation-settings:'FILL' 1}
.ls.open a{background:var(--flame-bg);border-color:var(--flame-line)}
/* دائرة الرقم في الدرس الحالي تركوازية لا برتقالية: النار
   والإطار يقولان «هنا أنتِ»، والرقم لونٌ ثالث يفصل الحالي عن
   المنجز الأخضر دون أن يزاحم النار. */
.ls.open .ls-n{background:var(--teal);color:#06282B}
.ls.open .ls-s{color:var(--flame);font-variation-settings:'FILL' 1}
.ls.locked > div{background:var(--surface);opacity:.72}
.ls a:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--card-line))}

/* المستويات الأخرى */
.sec-t{margin:26px 0 14px}
.lv-o{border-radius:var(--rc);padding:clamp(16px,2.4vw,22px);margin-bottom:12px;
  border:1px solid var(--card-line);border-inline-start:4px solid var(--accent);
  box-shadow:var(--card-sh)}
.lv-o-in{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.lv-o-t{flex:1;min-width:190px}
.lv-o-t h3{margin:0 0 4px}
.lv-o-n{text-align:center;flex-shrink:0}
.lv-o-n b{display:block;font-family:var(--display);font-weight:900;font-size:28px;line-height:1}
.lv-o-n span{display:block;font-size:11.5px;color:var(--fg-3);margin-top:5px}
/* ---------- ألوان المستويات ----------
   كل مستوى يحمل صنف lvc-<اللون> يأتي من levels.color في القاعدة.
   اللون يُعرَّف مرة واحدة في --lv، وكل ما في البطاقة يقرأ منه:
   الشريط الجانبي والخلفية والرقم والشارة. */
.lvc-green  { --lv:#16A34A; }
.lvc-blue   { --lv:#2563EB; }
.lvc-violet { --lv:#7C3AED; }
.lvc-amber  { --lv:#D97706; }
.lvc-rose   { --lv:#E11D48; }
.lvc-teal   { --lv:#0D9488; }
.lvc-slate  { --lv:#475569; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lvc-green { --lv:#4ADE80; }
  :root:not([data-theme="light"]) .lvc-blue  { --lv:#60A5FA; }
  :root:not([data-theme="light"]) .lvc-violet{ --lv:#A78BFA; }
  :root:not([data-theme="light"]) .lvc-amber { --lv:#FBBF24; }
  :root:not([data-theme="light"]) .lvc-rose  { --lv:#FB7185; }
  :root:not([data-theme="light"]) .lvc-teal  { --lv:#2DD4BF; }
  :root:not([data-theme="light"]) .lvc-slate { --lv:#94A3B8; }
}
:root[data-theme="dark"] .lvc-green { --lv:#4ADE80; }
:root[data-theme="dark"] .lvc-blue  { --lv:#60A5FA; }
:root[data-theme="dark"] .lvc-violet{ --lv:#A78BFA; }
:root[data-theme="dark"] .lvc-amber { --lv:#FBBF24; }
:root[data-theme="dark"] .lvc-rose  { --lv:#FB7185; }
:root[data-theme="dark"] .lvc-teal  { --lv:#2DD4BF; }
:root[data-theme="dark"] .lvc-slate { --lv:#94A3B8; }

.lv-o{background:linear-gradient(255deg,
       color-mix(in srgb,var(--lv,var(--accent)) 10%,var(--surface)),
       var(--surface) 62%);
  border-color:color-mix(in srgb,var(--lv,var(--accent)) 26%,var(--card-line))}
.lv-o::before{background:var(--lv,var(--accent))}
.lv-o .lv-o-n b{color:var(--lv,var(--accent))}
.lv-cur::before{background:var(--lv,var(--up))}

/* مستوى تقفله الباقة: يُعرض اسمه وعدد دروسه ويُمنع محتواه */
.lv-o.tier-locked{opacity:1}
.lv-o.tier-locked .lv-o-t{min-width:0}
.lv-lock{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.75;
  color:var(--fg-2);margin-top:8px}
.lv-lock .ms{font-size:16px;color:var(--lv,var(--fg-3));flex:0 0 auto;margin-top:1px}
.up-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12px;font-weight:700;border-radius:999px;padding:6px 12px;
  background:color-mix(in srgb,var(--lv,var(--flame)) 15%,transparent);
  color:var(--lv,var(--flame));
  border:1px solid color-mix(in srgb,var(--lv,var(--flame)) 36%,transparent)}
.up-badge .ms{font-size:15px}

/* درس تقفله الباقة: اسمه ظاهر، ومحتواه ممنوع في القاعدة */
.ls.tier_locked > div{background:color-mix(in srgb,var(--flame) 7%,transparent);
  border-color:color-mix(in srgb,var(--flame) 26%,var(--card-line))}
.ls.tier_locked .ls-n{background:var(--flame-bg);color:var(--flame)}
.ls.tier_locked .ls-s{color:var(--flame)}
.ls.tier_locked .up-badge{margin-top:0;flex:0 0 auto;
  background:var(--flame-bg);color:var(--flame);border-color:var(--flame-line)}
.ls.is-strategy .ls-b b::before{content:'◆';font-size:.7em;margin-inline-end:6px;
  color:var(--accent);vertical-align:middle}

/* خطوتك التالية */
.next-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.next-card > div{flex:1;min-width:200px}
.next-card h2{margin:0 0 4px}


/* ============================================================
   تقويم الحصص — صورة المرجع ٧
   ============================================================ */
.cal-card{padding:0!important;overflow:hidden}
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:clamp(16px,2.4vw,20px);background:var(--tile-bg);
  border-bottom:1px solid var(--card-line)}
.cal-ht{min-width:0}
.cal-ht span{display:block;font-size:12px;font-weight:700;color:var(--accent);margin-bottom:4px}
.cal-ht b{font-size:clamp(17px,2.2vw,21px);font-family:var(--display);font-weight:900}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-nav button{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--rbtn);
  border:1px solid var(--card-line);background:var(--surface);color:var(--fg-2);cursor:pointer}
.cal-nav button:hover{border-color:var(--accent);color:var(--accent)}
.cal-nav button[disabled]{opacity:.4;cursor:default}
.cal-nav .ms{font-size:19px}
.cal-b{padding:clamp(12px,2vw,18px)}
.cal-dows,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-dows{margin-bottom:8px}
.cal-dows span{text-align:center;font-size:11.5px;font-weight:700;color:var(--fg-3)}
.cal-d{position:relative;min-height:64px;border-radius:var(--rt);padding:6px 7px;
  border:1px solid transparent;background:var(--tile-bg);min-width:0}
.cal-d.pad{background:transparent}
.cal-d.today{border-color:var(--accent)}
.cal-d.past{opacity:.5}
.cal-dn{display:block;font-size:12px;font-weight:700;color:var(--fg-2);text-align:start}
.cal-d.has{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.cal-ev{display:block;margin-top:4px;font-size:10.5px;line-height:1.5;font-weight:700;
  color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev.live{color:var(--flame)}
.cal-more{display:block;font-size:10px;color:var(--fg-3);margin-top:2px}
.cal-key{display:flex;gap:14px;flex-wrap:wrap;padding:0 clamp(12px,2vw,18px) clamp(14px,2vw,18px)}
.cal-key span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--fg-3)}
.cal-key i{width:9px;height:9px;border-radius:3px;background:var(--accent);display:inline-block}
.cal-key i.live{background:var(--flame)}
@media (max-width:560px){
  .cal-d{min-height:52px;padding:4px 5px}
  .cal-ev{font-size:0;line-height:0;height:6px;margin-top:5px;border-radius:3px;
    background:var(--accent)}
  .cal-ev.live{background:var(--flame)}
  .cal-more{display:none}
}

/* ============================================================
   الكلاسات الخاصة — صورة المرجع ٨
   ============================================================ */
.quo-card{display:flex;align-items:center;gap:14px}
.q-b{min-width:0}
.q-b span{display:block;font-size:12.5px;color:var(--fg-3);margin-bottom:3px}
.q-b b{font-size:clamp(26px,3.6vw,34px);font-family:var(--display);font-weight:900;
  color:var(--accent);letter-spacing:-.03em;line-height:1.15}
.q-b b i{font-size:.5em;font-style:normal;color:var(--fg-3);font-weight:700}
.q-b p{font-size:12.5px;color:var(--fg-2);line-height:1.7;margin-top:4px}

.co-list{display:flex;flex-direction:column;gap:9px}
/* بطاقة الكوتش عرضٌ لا زرّ: لا مؤشّر يد ولا حدٌّ يتلوّن عند اللمس —
   الاختيار من قائمة «احجزي جلستك». */
.pc-coaches-sec{min-width:0}
.co-list{gap:12px}
.co{display:block;width:100%;text-align:start;cursor:default;
  border:1.5px solid var(--card-line);border-radius:var(--rc,16px);padding:18px 20px;
  background:var(--surface);min-width:0;box-shadow:var(--card-sh)}
.co-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--tile-bg);color:var(--accent);font-family:var(--display);font-weight:900;
  font-size:15px;overflow:hidden}
.co-av img{width:100%;height:100%;object-fit:cover}
.co-b{min-width:0;flex:1}
.co-b b{display:block;font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--fg)}
.co-b > span{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--fg-2);margin-top:8px}
.co-rate{display:flex;align-items:center;gap:5px;font-weight:700;color:#D79B1E}
.co-stars{display:inline-flex;gap:1px;line-height:1}
.co-stars .ms{font-size:15px;color:var(--line-2)}
.co-stars .ms.on{color:#F5A623;font-variation-settings:'FILL' 1}
.co-rate b{font-weight:700;color:#D79B1E}
.co-rate i{font-style:normal;font-weight:400;color:var(--fg-3)}
.co-rate.fresh b{color:#E8B323}
.co-rate .ms.on{color:#F5B301;font-variation-settings:'FILL' 1;font-size:17px}
.co-b .ms{color:#F5B301}

.pc-h2{font-size:clamp(16px,2vw,18px);font-weight:800;margin:0 0 14px}

.bk-form{display:flex;flex-direction:column;gap:13px}

/* شارة المدّة بجانب عنوان حقل الموعد */
.bk-min{font-style:normal;font-size:11.5px;font-weight:600;color:var(--fg-3);
  background:var(--surface-2);border-radius:999px;padding:3px 9px;margin-inline-start:6px}

/* شريط إعادة الجدولة: اللوحة نفسها تخدم الحجز والنقل، فيقول
   الشريط أيّهما يجري الآن. */
.bk-move{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;
  line-height:1.75;border-radius:var(--rt);padding:11px 13px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.bk-move .ms{font-size:18px;flex:0 0 auto;color:var(--accent)}
.bk-move > span:not(.ms){flex:1;min-width:140px}
.bk-move-x{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--accent);
  background:none;border:none;padding:4px 2px;text-decoration:underline}
.bk-note{display:flex;gap:9px;font-size:12.5px;line-height:1.8;border-radius:var(--rt);
  padding:12px 14px;background:var(--flame-bg);border:1px solid var(--flame-line);
  color:var(--warn-title,#9A4A24)}
.bk-note .ms{font-size:18px;flex:0 0 auto;color:var(--flame)}

.ss-list{display:flex;flex-direction:column;gap:10px}
.ss{display:flex;align-items:center;gap:12px;border:1px solid var(--card-line);
  border-radius:var(--rt);padding:12px 14px;min-width:0}
.ss-d{flex:0 0 auto;text-align:center;border-radius:10px;background:var(--tile-bg);
  padding:7px 10px;min-width:54px}
.ss-d b{display:block;font-size:17px;font-family:var(--display);font-weight:900;line-height:1.1}
.ss-d span{display:block;font-size:10.5px;color:var(--fg-3);margin-top:2px}
.ss{flex-wrap:wrap}
.ss-b{min-width:0;flex:1;display:block}
.ss-b b{display:block;font-size:14px;font-weight:700}
.ss-b span{display:block;font-size:12px;color:var(--fg-3);margin-top:3px}
.ss-a{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* زرّان في الصفّ (إعادة الجدولة والإلغاء) كانا يعصران نصّ الجلسة
   إلى كلمة في كل سطر على الجوال. النصّ له أرضية، والأزرار تنزل
   سطراً كاملاً حين تضيق الشاشة. */
.ss-b{flex:1 1 150px}
@media (max-width:560px){
  .ss-a{flex-basis:100%;justify-content:flex-start}
}
.ss-p{flex-basis:100%;font-size:12.5px;color:var(--fg-2);line-height:1.8;margin-top:2px;
  padding-top:10px;border-top:1px solid var(--card-line)}
.ss-b .cdn{display:inline-flex;margin-top:6px}

/* حقول النموذج الموحّدة */
.nfld{display:block;min-width:0}
.nfld > label{display:block;font-size:13px;font-weight:700;color:var(--fg-2);margin-bottom:7px}
.nfld select,.nfld input,.nfld textarea{
  width:100%;font:inherit;font-size:14.5px;padding:11px 14px;border-radius:var(--rt);
  border:1px solid var(--line-2);background:var(--surface);color:var(--fg);min-height:44px}
.nfld select{appearance:none;background-image:none;cursor:pointer}
.nfld select:disabled{opacity:.6;cursor:default}
.nfld :focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.nfld .hint{display:block;font-size:12px;color:var(--fg-3);line-height:1.7;margin-top:6px}
.nerr{font-size:13px;color:var(--dn);line-height:1.8}
.nbtn-wide{width:100%}


/* ============================================================
   دليل المبتدئين — صور المرجع ١–٣
   ثابت للجميع: لا شرط باقة ولا تقدّم في عرضه.
   ============================================================ */
.gd-box{padding:0!important;overflow:hidden}
.gd-h{display:flex;align-items:center;gap:10px;width:100%;font:inherit;text-align:start;
  cursor:pointer;border:0;background:var(--tile-bg);color:var(--fg);
  padding:clamp(14px,2.2vw,18px);border-bottom:1px solid var(--card-line)}
/* ترويسة الدليل: اسم القسم وتحته سطر تعريفي.
   اسمها .gd-ti لا .gd-t — الأخير يملكه جسم البطاقة. */
.gd-h h2{flex:1;min-width:0;font-size:clamp(17px,2vw,20px);font-weight:900;margin:0}
.gd-ti{flex:1;min-width:0}
.gd-ti b{display:block;font-family:var(--display);font-weight:var(--w-black);
  font-size:clamp(17px,2vw,20px);line-height:1.35}
/* مصباحٌ أصفر وحده بلا مربّعٍ تحته: المربّع كان يجعله عنصراً
   ثقيلاً في صفٍّ عنوانُه كلمتان. الأصفر طلبُ العميلة، وهو لون
   المصباح نفسه فلا يحتاج تفسيراً. */
.gd-h .ntile{width:auto;height:auto;background:none;border-radius:0}
.gd-h .ntile .ms{font-size:26px;color:#F5C518;font-variation-settings:'FILL' 1}
.gd-c{color:var(--fg-3);font-size:22px;flex:0 0 auto}
.gd-body{display:grid;gap:10px;padding:clamp(14px,2.2vw,18px)}

.gd{display:flex;align-items:flex-start;gap:12px;min-width:0;
  border:1px solid var(--card-line);border-radius:var(--rt);
  padding:clamp(13px,2vw,16px);background:var(--surface)}
.gd-i{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;
  place-items:center;background:color-mix(in srgb,var(--gc,var(--accent)) 14%,transparent);
  color:var(--gc,var(--accent))}
.gd-i .ms{font-size:21px}
.gd-t{min-width:0;flex:1}
.gd-t b{display:block;font-size:15px;font-weight:900;line-height:1.5;margin-bottom:5px}
.gd-t p{font-size:13px;color:var(--fg-2);line-height:1.9;margin:0;overflow-wrap:anywhere}

.gd.blue  {--gc:var(--accent)}
.gd.green {--gc:#16A34A}
.gd.violet{--gc:#7C3AED}
.gd.amber {--gc:#D97706}
.gd.rose  {--gc:#E11D48}
.gd.teal  {--gc:#0D9488}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gd.green {--gc:#4ADE80}
  :root:not([data-theme="light"]) .gd.violet{--gc:#A78BFA}
  :root:not([data-theme="light"]) .gd.amber {--gc:#FBBF24}
  :root:not([data-theme="light"]) .gd.rose  {--gc:#FB7185}
  :root:not([data-theme="light"]) .gd.teal  {--gc:#2DD4BF}
}
:root[data-theme="dark"] .gd.green {--gc:#4ADE80}
:root[data-theme="dark"] .gd.violet{--gc:#A78BFA}
:root[data-theme="dark"] .gd.amber {--gc:#FBBF24}
:root[data-theme="dark"] .gd.rose  {--gc:#FB7185}
:root[data-theme="dark"] .gd.teal  {--gc:#2DD4BF}

/* بطاقة الهدف الختامية */
.gd.is-goal{background:linear-gradient(255deg,
    color-mix(in srgb,var(--gc,var(--accent)) 11%,var(--surface)),var(--surface) 64%);
  border-color:color-mix(in srgb,var(--gc,var(--accent)) 32%,var(--card-line))}
.gd.is-goal .gd-t b{font-size:16px}

/* تقييم الكوتش بعد جلسة حضرتها */
.ss.rt{flex-wrap:wrap}
/* ---------- تقييم الجلسة: نجمة / نصف / بدون ----------
   ثلاثة خيارات ظاهرة لا سلّم خمسٍ يُسحب: الجلسة الواحدة حكمٌ
   صغير، والمجموع عبر الجلسات هو رصيد الكوتش. */
.rt-pick{display:flex;gap:6px;flex-wrap:wrap;flex:0 1 auto;min-width:0}
/* على ٣٢٠ بكسل لا يسع الصفُّ الاسمَ والخيارات الثلاثة معاً، فتنزل
   الخيارات سطراً كاملاً بدل أن تدفع الصفحة إلى تمرير أفقي. */
@media (max-width:420px){
  .rt-pick{flex-basis:100%}
  .rtb{flex:1 1 auto;justify-content:center}
}
.rtb{display:inline-flex;align-items:center;gap:5px;font-family:var(--body);
  font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--fg-2);
  cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.rtb .ms{font-size:17px}
.rtb:hover:not(:disabled){border-color:#F5A623;color:#B8790F}
.rtb.on{border-color:#F5A623;background:color-mix(in srgb,#F5A623 14%,transparent);
  color:#8A5A06}
.rtb.on .ms{font-variation-settings:'FILL' 1}
.rtb:disabled{opacity:.55;cursor:default}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rtb.on{color:#F7C66B}
  :root:not([data-theme="light"]) .rtb:hover:not(:disabled){color:#F7C66B}
}
:root[data-theme="dark"] .rtb.on{color:#F7C66B}
:root[data-theme="dark"] .rtb:hover:not(:disabled){color:#F7C66B}

.rt-why{flex-basis:100%;display:grid;gap:8px;margin-top:10px}
.rt-why[hidden]{display:none}
.rt-why label{font-size:12px;color:var(--fg-3);line-height:1.6}
.rt-why textarea{font-family:var(--body);font-size:13.5px;line-height:1.7;
  padding:10px 12px;border-radius:var(--rb);border:1px solid var(--line);
  background:var(--surface);color:var(--fg);resize:vertical}
.rt-why textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.rt-why .rt-send{justify-self:start}
.rt-err{flex-basis:100%;margin-top:8px}
.rt-err[hidden]{display:none}

.stars{display:flex;gap:3px;flex:0 0 auto}
.star{font:inherit;border:0;background:transparent;cursor:pointer;padding:4px;
  line-height:1;color:var(--line-2);min-width:36px;min-height:36px;
  display:grid;place-items:center}
.star .ms{font-size:24px}
.star:hover,.star.on{color:#F5A623}
.star[disabled]{cursor:default}
.rt-done{flex-basis:100%;margin-top:8px}

/* حقل مطلوب ولم يُدخل بعد */
.nfld.need select,.nfld.need input{border-color:var(--flame)}
.nfld .req{color:var(--dn)}
.nfld .nerr{display:block;margin-top:6px}
.nfld .hint b{color:var(--fg-2)}

/* ما ينتظر المتعلمة بعد المستويات المعروضة */
.ahead{display:flex;align-items:flex-start;gap:13px;margin-top:var(--gap);
  background:linear-gradient(255deg,var(--accent-wash),var(--surface) 62%);
  border-color:color-mix(in srgb,var(--accent) 24%,var(--card-line))}
.ah-b{min-width:0;flex:1}
.ah-b b{display:block;font-size:15.5px;font-weight:var(--w-bold);line-height:1.5;
  margin-bottom:7px}
.ah-l{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.85;
  color:var(--fg-2)}
.ah-l + .ah-l{margin-top:5px}
.ah-l .ms{font-size:17px;color:var(--accent);flex:0 0 auto;margin-top:2px}
.ah-l.mut{color:var(--fg-3)}
.ah-l.mut .ms{color:var(--flame)}

/* «أكملت هذا الجزء» — مربّع بلا رقم */
.mt.done{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:var(--w-bold);line-height:1.5;text-align:center}
.mt.done .ms{font-size:20px;flex:0 0 auto}

/* شارة الترقية حين تحمل رابط شراء: زرّ لا وسم */
.up-link{text-decoration:none;cursor:pointer;transition:filter .18s}
.up-link:hover{filter:brightness(.94)}
.up-link .ms:last-child{font-size:13px;opacity:.8}

/* الإشعارات في اللوحة: سطر واحد، ويتلوّن حين ينتظرها جديد */
/* إشعارٌ جديد: سطرٌ فرعي يبقى خفيفاً، ولونه الأغمق وحده يقول «جديد» */
.n-sub.n-new{color:var(--fg);font-weight:400}
.n-link .ms{font-size:17px;margin-inline-start:2px}

/* تابع التعلم: زرّ المتابعة، ورابطٌ إلى كل الدروس للمراجعة */
.rsm-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}