/* واجهات المتعلم — تبني على توكنات app.css و account.css */
.lrn{padding-block:clamp(26px,4vw,42px) clamp(50px,6vw,80px);position:relative;z-index:1}

/* ترحيب */
.hello{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;
  flex-wrap:wrap;margin-bottom:clamp(16px,2.6vw,22px)}
.hello > *{min-width:0}
.hello h1{font-size:clamp(24px,3.4vw,34px);font-weight:900;line-height:1.3;letter-spacing:-.01em}
.hello .sub{color:var(--fg-2);font-size:14px;line-height:1.85;margin-top:8px;max-width:62ch}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip-i{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;
}
.chip-i .ms{font-size:16px;color:var(--accent)}
.chip-i.ok{background:color-mix(in srgb,var(--up) 13%,transparent);border-color:transparent;color:var(--up)}
.chip-i.ok .ms{color:var(--up)}
.chip-i.off{background:color-mix(in srgb,var(--dn) 12%,transparent);border-color:transparent;color:var(--dn)}
.chip-i.off .ms{color:var(--dn)}
.chip-i .num{font-variant-numeric:tabular-nums;direction:ltr}

/* شريط التقدّم */
.bar{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}

/* بطاقات */
.lgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;align-items:start}
/* .lbox و .hello اسمان قديمان: يرثان الآن بطاقة ds.css وترويستها
   حتى تتوحّد الصفحات التي لم تُعَد كتابتها بعد. */
.lbox{background:var(--surface);border:1px solid var(--card-line);border-radius:var(--rc);
  padding:clamp(16px,2.4vw,22px);min-width:0;box-shadow:var(--card-sh)}
.lbox h2{font-size:clamp(17px,2vw,20px);font-weight:700;margin-bottom:16px;
  display:flex;align-items:center;gap:9px}
.lbox h2 .ms{font-size:20px;color:var(--accent);
  width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:var(--tile-bg);flex:0 0 auto}
.lbox + .lbox{margin-top:var(--gap)}

/* متابعة التعلم */
.resume{
  background:linear-gradient(145deg,#0D2C4B,#06131F);color:#E9F0F8;
  border:1px solid rgba(147,169,193,.18);border-radius:var(--rp);
  padding:clamp(22px,3vw,30px);display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:18px;
}
.resume span.lbl{font-size:12.5px;color:#9FB6CE;display:block}
.resume b{font-size:clamp(17px,2.2vw,22px);display:block;margin-top:6px;color:#fff;line-height:1.5}
.resume .btn-light{background:#fff;color:#0A1C30}
.resume .btn-light:hover{background:#C9DEF4;color:#0A1C30}

/* قائمة المستويات */
.lvl{border:1px solid var(--line);border-radius:var(--rb);padding:16px 18px;margin-bottom:10px;transition:border-color .2s}
.lvl:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.lvl-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.lvl-h b{font-size:15.5px}
.lvl-h span{font-size:12.5px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.lvl-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.lvl-f a{font-size:13px;font-weight:600;color:var(--accent)}
.lvl-f a:hover{text-decoration:underline;text-underline-offset:3px}
.done-tag{font-size:11.5px;font-weight:600;color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent);border-radius:999px;padding:3px 10px}

/* مهام */
.task{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:none}
.task input{width:19px;height:19px;margin:0;margin-top:2px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.task div{flex:1;min-width:0}
.task b{font-size:14.5px;display:block;line-height:1.5}
.task p{font-size:12.5px;color:var(--fg-2);margin-top:3px;line-height:1.7}
.task.is-done b{color:var(--fg-2);text-decoration:line-through;text-decoration-color:var(--line-2)}

/* خريطة النشاط */
.days{display:flex;gap:5px;flex-wrap:wrap}
.day{width:26px;height:26px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line)}
.day.on{background:var(--accent);border-color:var(--accent)}
.day.today{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.days-note{font-size:12px;color:var(--fg-3);margin-top:12px;line-height:1.7}

/* اختبارات */
.qz{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.qz:last-child{border-bottom:none}
.qz b{font-size:14.5px}
.qz .meta{font-size:12.5px;color:var(--fg-2);margin-top:3px;font-variant-numeric:tabular-nums}

.empty{text-align:center;color:var(--fg-2);font-size:14px;line-height:1.9;padding:26px 14px}
.empty .ms{font-size:30px;color:var(--fg-3);display:block;margin-bottom:10px}

/* صفحة الدرس */
.lesson-head{margin-bottom:clamp(16px,2.6vw,22px)}
.crumb{font-size:13px;color:var(--fg-2);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.crumb a{color:var(--accent)}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.lesson-head h1{font-size:clamp(24px,3.4vw,34px);font-weight:900;line-height:1.3;
  letter-spacing:-.01em}
.lesson-head .crumb a{font-weight:700}
.lesson-head .n-sub,.lesson-head .sub{max-width:62ch;margin-top:8px}
.prose{font-size:15.5px;line-height:2.05;color:var(--prose,var(--fg))}
.prose p{margin-bottom:16px}
.vocab{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vterm{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--rp);padding:16px 18px}
.vterm b{font-size:clamp(15.5px,1.8vw,17px);font-weight:800;display:block;color:var(--vterm,var(--accent))}
.vterm span{font-size:13.5px;color:var(--fg-2);display:block;margin-top:6px;line-height:1.8}
.summary-box{background:var(--accent-wash);border-radius:var(--rp);padding:18px 20px;
  font-size:14.5px;line-height:1.95;color:var(--prose,var(--fg))}
.lesson-nav{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:26px}
.video-wrap{position:relative;aspect-ratio:16/9;border-radius:var(--rp);overflow:hidden;background:var(--surface-2);margin-bottom:22px}
.video-wrap a{
  position:absolute;inset:0;display:grid;place-items:center;gap:10px;align-content:center;
  color:var(--fg-2);font-size:14px;text-align:center;padding:20px;
}
.video-wrap .ms{font-size:40px;color:var(--accent)}

/* صفحة الاختبار */
.q-card{background:var(--surface);border:1px solid var(--card-line,var(--line));border-radius:var(--rc,16px);
  padding:clamp(18px,3vw,24px);margin:0 0 14px;min-width:0}
.q-card > b{font-size:15.5px;display:block;margin-bottom:14px;line-height:1.7}
.q-card > legend{float:right;width:100%;display:flex;gap:10px;align-items:flex-start;
  font-size:15.5px;font-weight:700;line-height:1.75;margin-bottom:14px;padding:0}
.q-card > legend i{font-style:normal;flex:0 0 auto;min-width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:800;
  background:var(--accent-wash);color:var(--accent)}
.q-card > legend + *{clear:both}
.opt{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--rb);cursor:pointer;margin-bottom:8px;transition:border-color .18s,background .18s}
.opt:hover{border-color:var(--accent);background:var(--accent-wash)}
.opt input{width:18px;height:18px;margin:0;margin-top:2px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.opt span{font-size:14.5px;line-height:1.7}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}
.result{border-radius:var(--rp);padding:clamp(22px,3vw,30px);text-align:center;margin-bottom:18px}
.result.pass{background:color-mix(in srgb,var(--up) 13%,transparent)}
.result.fail{background:color-mix(in srgb,var(--dn) 11%,transparent)}
.result .ms{font-size:42px;display:block;margin-bottom:10px}
.result.pass .ms,.result.pass b{color:var(--up)}
.result.fail .ms,.result.fail b{color:var(--dn)}
.result b{font-size:clamp(26px,3.4vw,38px);font-family:var(--display);display:block;font-variant-numeric:tabular-nums}
.result p{font-size:14.5px;color:var(--fg-2);margin-top:10px;line-height:1.8}

@media (max-width:900px){.lgrid{grid-template-columns:1fr}}
@media (max-width:620px){
  .vocab{grid-template-columns:1fr}
  .lesson-nav .btn{flex:1 1 100%}
  .resume{flex-direction:column;align-items:stretch}
  .resume .btn{width:100%}
}

/* ---- المساعد ---- */
.chat{display:flex;flex-direction:column;height:min(560px,68vh);min-height:340px}
.chat-log{flex:1;overflow-y:auto;padding:4px 2px 14px;display:flex;flex-direction:column;gap:12px}
/* الفقاعة: صورة المرسِل خارجها والنص داخلها، كما في المرجع */
.msg{display:flex;align-items:flex-start;gap:10px;max-width:88%}
.msg-tx{border-radius:14px;padding:13px 16px;font-size:14.5px;line-height:1.95;
  white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.msg-av{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;
  place-items:center;background:var(--tile-bg);color:var(--accent)}
.msg-av .ms{font-size:20px}
.msg.me{align-self:flex-start}
.msg.me .msg-tx{background:var(--accent);color:var(--on-accent);border-bottom-left-radius:5px}
.msg.bot{align-self:flex-end;flex-direction:row-reverse}
.msg.bot .msg-tx{background:var(--surface-2);border-bottom-right-radius:5px}
.msg.bot.ungrounded .msg-tx{background:color-mix(in srgb,var(--dn) 9%,var(--surface-2))}
.msg.err{align-self:flex-end;flex-direction:row-reverse}
.msg.err .msg-tx{background:color-mix(in srgb,var(--dn) 12%,transparent);color:var(--dn)}
.msg.err .msg-av{background:color-mix(in srgb,var(--dn) 12%,transparent);color:var(--dn)}
.msg-src{display:block;margin-top:9px;font-size:12px;color:var(--fg-2);border-top:1px solid var(--line);padding-top:8px}
.msg-src a{color:var(--accent)}
.typing{align-self:flex-end;display:flex;gap:4px;padding:14px 18px;background:var(--surface-2);border-radius:14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--fg-3);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.6}}
.chat-form{display:flex;gap:9px;border-top:1px solid var(--line);padding-top:14px}
.chat-form input{
  flex:1;min-width:0;font-family:var(--body);font-size:14.5px;color:var(--fg);
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--rb);padding:12px 14px;
}
.chat-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.chat-note{font-size:12px;color:var(--fg-3);line-height:1.8;margin-top:10px}
.chat-empty{margin:auto;text-align:center;color:var(--fg-2);font-size:14px;line-height:1.95;padding:20px}
.chat-empty .ms{font-size:32px;color:var(--fg-3);display:block;margin-bottom:10px}

/* ---- جرس التنبيهات ---- */
.bell{position:relative}
.bell-btn{
  width:38px;height:38px;border-radius:var(--rb);border:1px solid var(--line);
  background:transparent;color:var(--fg-2);cursor:pointer;display:grid;place-items:center;
}
.bell-btn:hover{color:var(--fg);border-color:var(--line-2)}
.bell-dot{
  position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;
  border-radius:999px;background:var(--dn);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;padding:0 5px;font-variant-numeric:tabular-nums;
}
.bell-menu{
  position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:60;width:min(340px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rp);
  box-shadow:var(--shadow);max-height:66vh;overflow-y:auto;
}
.bell-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.bell-h b{font-size:14.5px}
.bell-h button{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--body)}
.nf-row{display:block;padding:13px 16px;border-bottom:1px solid var(--line)}
.nf-row:last-child{border-bottom:none}
.nf-row.unread{background:var(--accent-wash)}
.nf-row b{font-size:14px;display:block;line-height:1.5}
.nf-row p{font-size:12.5px;color:var(--fg-2);margin-top:4px;line-height:1.75}
.nf-row time{font-size:11.5px;color:var(--fg-3);display:block;margin-top:6px}

/* ============================================================
   ترويسة المتعلم وقائمته

   كان لصفحات المتعلم شريطان: ترويسة الموقع، وتحتها شريط تسعة
   تبويبات يمرّ أفقياً. على الجوال كان التبويب الأخير يُقصّ عند
   الحافة فيبدو الشريط مبتوراً. صار شريطاً واحداً: تحية باسمها
   ورقمها، وجرس، وزر قائمة تفتح الأقسام التسعة بصفوف كاملة.
   ============================================================ */
.lhead{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--band);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.3) blur(10px)}
.lhead-in{display:flex;align-items:center;gap:12px;padding-block:11px}

.lmenu-btn{display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:9px 14px;border:1px solid var(--line-2);border-radius:var(--rb);
  background:var(--surface);color:var(--fg);font-family:var(--body);
  font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .18s,background .18s}
.lmenu-btn:hover{border-color:var(--accent);background:var(--accent-wash)}
.lmenu-btn .ms{font-size:20px;color:var(--accent)}

/* التحية تُدفع إلى الطرف المقابل فيبقى الجرس في الحافة */
.lhead-id{margin-inline-start:auto;text-align:start;min-width:0}
.lhead-hi{display:block;font-size:11.5px;color:var(--fg-3);line-height:1.5}
.lhead-who{display:block;font-size:14.5px;font-weight:700;color:var(--fg);
  line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lhead-who .num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent);
  font-size:13px;margin-inline-start:5px}

@media (max-width:420px){
  .lmenu-btn span:not(.ms){display:none}
  .lmenu-btn{padding:9px 11px}
  .lhead-who{font-size:13.5px;max-width:52vw}
}

/* ---------- اللوحة ---------- */
.lmenu{position:fixed;inset:0;z-index:70;overflow-y:auto;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(6px);
  padding:calc(var(--lhead-h,62px) + 10px) 16px 28px}
.lmenu[hidden]{display:none}
.lmenu-sheet{max-width:620px;margin:0 auto}
.lmenu-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rp);padding:14px;box-shadow:var(--shadow)}

.lmenu-brand{display:flex;align-items:center;gap:11px;padding:4px 6px 14px;
  border-bottom:1px solid var(--line);margin-bottom:10px}
.lmenu-brand img{width:38px;height:38px;object-fit:contain}
.lmenu-brand b{display:block;font-size:15px;font-weight:700;line-height:1.45}
.lmenu-brand span{display:block;font-size:12px;color:var(--fg-3);line-height:1.5}

.lmenu-rows{display:flex;flex-direction:column;gap:7px}
.lmenu-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 14px;border:1px solid var(--line);border-radius:var(--rb);
  background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;
  font-weight:600;text-align:start;cursor:pointer;transition:border-color .18s,background .18s}
.lmenu-row:hover{border-color:var(--accent);background:var(--accent-wash)}
.lmenu-row .ms{font-size:22px;color:var(--accent);flex:0 0 auto}
.lmenu-row.on{border-color:var(--accent);background:var(--accent-wash)}
.lmenu-row.on .ms{font-variation-settings:'FILL' 1}
.lmenu-dot{width:8px;height:8px;border-radius:50%;background:var(--dn);
  margin-inline-start:auto;flex:0 0 auto}
.lmenu-out{margin-top:12px;padding-top:14px;border:0;border-top:1px solid var(--line);
  border-radius:0;background:none;justify-content:center;color:var(--fg-2);font-weight:600}
.lmenu-out:hover{background:none;color:var(--dn)}
.lmenu-out .ms{color:inherit}

/* ---------- المظهر ---------- */
.lmenu-theme{display:flex;gap:6px;justify-content:center;margin:16px auto 0;width:max-content;
  padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.lmenu-theme button{display:grid;place-items:center;width:42px;height:42px;border:0;
  border-radius:50%;background:none;color:var(--fg-2);cursor:pointer;transition:background .18s,color .18s}
.lmenu-theme button:hover{color:var(--fg)}
.lmenu-theme button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.lmenu-theme .ms{font-size:21px}

/* ============================================================
   آخر إشعار
   ============================================================ */
.note-last{border:1px solid var(--line);border-radius:var(--rb);padding:14px 15px;margin-bottom:12px}
.note-last.new{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));background:var(--accent-wash)}
.note-last b{font-size:14.5px;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:9px}
.empty{font-size:13.5px;color:var(--fg-2);padding:14px 0;line-height:1.7}

/* ============================================================
   دليل المبتدئين
   ============================================================ */
.gstep{display:flex;align-items:flex-start;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.gstep:last-of-type{border-bottom:none}
.gs-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent);font-size:12.5px;font-weight:600;
  font-style:normal;font-variant-numeric:tabular-nums}
.gstep div{flex:1;min-width:0}
.gstep b{font-size:14.5px;display:block;line-height:1.5}
.gstep p{font-size:12.5px;color:var(--fg-2);margin-top:4px;line-height:1.7}
.gs-m{font-size:11.5px;color:var(--fg-3);display:block;margin-top:6px}
.gstep .go{font-size:19px;color:var(--fg-3);flex-shrink:0;margin-top:3px}
.gstep:hover b{color:var(--accent)}

/* ============================================================
   التحدي — كتابة التعريف
   ============================================================ */
/* بطاقة المفردة — تخطيط المرجع: المصطلح على اليمين والنتيجة على اليسار */
.vq{padding:0!important;overflow:hidden}
.vq-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:clamp(18px,3vw,24px);background:var(--tile-bg);
  border-bottom:1px solid var(--card-line)}
.vq-t{min-width:0;flex:1 1 220px}
.vq-n{display:block;font-size:12.5px;color:var(--fg-3);font-variant-numeric:tabular-nums;
  margin-bottom:8px}
.vq-term{display:block;font-size:clamp(26px,4.2vw,38px);font-family:var(--display);
  font-weight:900;letter-spacing:-.02em;line-height:1.35;margin:0 0 8px;
  overflow-wrap:anywhere;text-align:start}
.vq-lesson{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--accent);min-height:34px;padding-inline-end:4px}
.vq-lesson .ms{font-size:16px}
.vq-lesson:hover{text-decoration:underline;text-underline-offset:3px}
.vq-level{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-3);
  margin-inline-start:12px}
.vq-level .ms{font-size:15px}
.vq-score{flex:0 0 auto;text-align:center;background:var(--surface);
  border:1px solid var(--card-line);border-radius:var(--rt);padding:10px 16px;min-width:104px}
.vq-score span{display:block;font-size:11.5px;color:var(--fg-3);margin-bottom:3px}
.vq-score b{font-size:22px;font-family:var(--display);font-weight:900;
  color:var(--accent);letter-spacing:-.02em;line-height:1.2}

.vq-body{padding:clamp(18px,3vw,24px)}
.vq-lbl{display:block;font-size:13px;font-weight:700;color:var(--fg-2);margin-bottom:9px}
.vq-body textarea{width:100%;font:inherit;font-size:15px;line-height:1.9;padding:14px 16px;
  border-radius:var(--rt);border:1px solid var(--line-2);background:var(--surface);
  color:var(--fg);resize:vertical;min-height:104px}
.vq-body textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.vq-acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.vq-rule{font-size:12px;color:var(--fg-3);line-height:1.8;margin-top:14px;
  border-inline-start:2px solid var(--line);padding-inline-start:11px}
.vq-err{margin-top:14px;font-size:13px;color:var(--dn)}

.vq-res{margin-top:20px;border-radius:var(--rb);padding:16px 18px;border:1px solid var(--line)}
.vq-res.ok{border-color:var(--up);background:color-mix(in srgb,var(--up) 9%,transparent)}
.vq-res.mid{border-color:var(--warn-line,#F0CDB9);background:color-mix(in srgb,var(--warn-line,#F0CDB9) 16%,transparent)}
.vq-res.no{border-color:var(--dn);background:color-mix(in srgb,var(--dn) 8%,transparent)}
.vr-h{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.vr-h .ms{font-size:21px}
.vq-res.ok .vr-h{color:var(--up)}
.vq-res.mid .vr-h{color:var(--warn-title,#9A4A24)}
.vq-res.no .vr-h{color:var(--dn)}
.vr-h b{font-size:15.5px}
.vr-p{font-size:11.5px;color:var(--fg-3);font-variant-numeric:tabular-nums;margin-inline-start:auto}
.vq-res p{font-size:14px;color:var(--fg);line-height:1.9}
.vr-l{display:block;font-size:11.5px;color:var(--fg-3);margin-bottom:3px}
.vr-n{font-size:12.5px;color:var(--fg-2)!important;margin-top:8px}
.vr-f{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.vr-sent{font-size:12.5px;color:var(--up);align-self:center}

.ch-done{text-align:center;padding-block:clamp(26px,5vw,44px)}
.ch-done .ntile{margin:0 auto 14px}
.ch-done .ntile .ms{font-size:26px}
.ch-done h2{display:block;margin-bottom:8px}
.ch-done .vq-acts{justify-content:center}

/* ============================================================
   الحصص
   ============================================================ */
.slot{border:1px solid var(--line);border-radius:var(--rb);padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.slot + .slot{margin-top:11px}
.slot.mine{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));background:var(--accent-wash)}
.slot-m{flex:1;min-width:200px}
.slot-m b{font-size:15.5px;display:block;line-height:1.5}
.slot-m p{font-size:12.5px;color:var(--fg-2);margin-top:4px;line-height:1.7}
.slot-w{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12.5px;color:var(--fg-2)}
.slot-w .ms{font-size:16px}
.slot-a{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seats{font-size:12px;color:var(--up);font-variant-numeric:tabular-nums}
.seats.none{color:var(--fg-3)}
.slot-err{flex-basis:100%;font-size:12.5px;color:var(--dn);margin-top:4px}

/* ============================================================
   الإشعارات
   ============================================================ */
.nlist{display:grid}
.nf-row + .nf-row{border-top:1px solid var(--line)}
.nf-row a,.nf-row>div{display:flex;align-items:flex-start;gap:13px;padding:15px 0}
.nf-row.new{cursor:pointer}
.n-i{font-size:21px;color:var(--fg-3);flex-shrink:0;margin-top:2px}
.nf-row.new .n-i{color:var(--accent)}
.nf-row div div,.nf-row a div{flex:1;min-width:0}
.nf-row b{font-size:14.5px;display:block;line-height:1.5}
.nf-row p{font-size:13px;color:var(--fg-2);margin-top:4px;line-height:1.7}
.nf-row .when{font-size:11.5px;color:var(--fg-3);display:block;margin-top:8px}
.n-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:8px}

/* ============================================================
   قصص النجاح
   ============================================================ */
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.st-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rp);
  overflow:hidden;display:flex;flex-direction:column}
.st-img{aspect-ratio:16/10;background:var(--surface-2)}
.st-img img{width:100%;height:100%;object-fit:cover;display:block}
.st-b{padding:18px;flex:1}
.st-amt{display:inline-block;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;
  color:var(--up);background:color-mix(in srgb,var(--up) 13%,transparent);
  border-radius:999px;padding:4px 11px;margin-bottom:10px}
.st-b h3{font-size:16px;line-height:1.5}
.st-b p{font-size:13.5px;color:var(--fg-2);margin-top:8px;line-height:1.8;white-space:pre-wrap}
.st-n{font-size:12px;color:var(--fg-3);display:block;margin-top:12px}

/* ============================================================
   البطاقات التعليمية
   ============================================================ */
.cd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cd{position:relative;font:inherit;text-align:center;cursor:pointer;min-height:148px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rp);
  padding:26px 18px;display:grid;place-items:center;color:var(--fg);
  transition:border-color .2s,background .2s}
.cd:hover{border-color:color-mix(in srgb,var(--accent) 48%,var(--line))}
.cd-i{position:absolute;inset-block-start:10px;inset-inline-start:12px;font-size:11.5px;
  color:var(--fg-3);font-variant-numeric:tabular-nums}
.cd-f b{font-size:17px;display:block;line-height:1.5}
.cd-f i{font-size:11.5px;color:var(--fg-3);font-style:normal;display:block;margin-top:9px}
.cd-bk{display:none;font-size:14.5px;line-height:1.8;color:var(--fg)}
.cd.on{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 48%,var(--line))}
.cd.on .cd-f{display:none}
.cd.on .cd-bk{display:block}
.cd-act{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* تطابق تقريبي في المساعد: يُعرض احتمالاً لا جواباً مؤكداً */
.msg.loose .msg-tx{border-inline-start:3px solid var(--warn-line,#F0CDB9)}
.msg-note{display:block;margin-top:9px;font-size:11.5px;color:var(--fg-3)}

/* ============================================================
   الكلاسات الخاصة
   ============================================================ */
.pc-flash{background:color-mix(in srgb,var(--up) 12%,transparent);border:1px solid var(--up);
  color:var(--up);border-radius:var(--rb);padding:12px 15px;font-size:13.5px;margin-bottom:16px}
/* منتقي الكوتش ونموذج الحجز وقائمة الجلسات تملكها ds.css
   (.co .co-list .bk-form .bk-note .ss) — لا تُعاد هنا. */
.pol{list-style:none;margin:0;padding:0}
.pol li{position:relative;padding-inline-start:18px;font-size:13.5px;color:var(--fg-2);
  line-height:1.9;margin-bottom:8px}
.pol li::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:11px;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}
.pol b{color:var(--fg)}

/* ============================================================
   العدّاد التنازلي للحصص
   مُسمّى .cdn لا .cd: الأخير يملكه عنصر البطاقات التعليمية
   ============================================================ */
.cdn{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:12px;
  font-variant-numeric:tabular-nums;color:var(--dn);background:color-mix(in srgb,var(--dn) 10%,transparent);
  border-radius:999px;padding:4px 10px}
.cdn .ms{font-size:15px}
.cdn.now{color:var(--up);background:color-mix(in srgb,var(--up) 12%,transparent)}
.ss.hit,.slot.hit{animation:hit 1.5s ease}
@keyframes hit{0%,100%{border-color:var(--card-line)}25%{border-color:var(--accent)}}
@media (prefers-reduced-motion:reduce){
  .ss.hit,.slot.hit{animation:none;border-color:var(--accent)}
}

/* أهداف لمس مريحة في عناصر التحكم الصغيرة */
.seg button{min-height:34px;padding:7px 13px}
.sl-t{min-height:38px}
.mp-f a,.lvl-f a{display:inline-block;padding-block:7px}
.ln-q{width:34px;height:34px}
@media (hover:none) and (pointer:coarse){
  .seg button{min-height:38px}
  .mp-f a,.lvl-f a{padding-block:9px}
}

/* أبناء الشبكة بلا min-width:0 يمنعهم محتواهم من التقلّص دون عرضه
   الأدنى، فيتجاوز الصفُّ الشاشة على العروض الضيقة جداً. */
.lgrid > *{min-width:0}
.sum > *,.ch,.week,.dt,.st-grid,.cd-grid{min-width:0}


/* ============================================================
   بطاقة المعلم الذكي — صورة المرجع ١
   ============================================================ */
.as-card{padding:0!important;overflow:hidden;display:flex;flex-direction:column;
  min-height:clamp(440px,66vh,720px)}
.as-h{display:flex;align-items:center;gap:12px;padding:clamp(14px,2.2vw,18px);
  background:var(--tile-bg);border-bottom:1px solid var(--card-line)}
.as-ico{flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;
  place-items:center;background:var(--accent);color:var(--on-accent)}
.as-ico .ms{font-size:23px}
.as-t{min-width:0;flex:1}
.as-t b{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(16px,2vw,19px);line-height:1.35}
.as-t span{display:block;font-size:12.5px;color:var(--fg-3);line-height:1.7;margin-top:2px}
.as-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;
  font-weight:700;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius:999px;padding:6px 13px}
.as-live i{width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:as-pulse 2s ease-in-out infinite}
@keyframes as-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.as-live i{animation:none}}

.as-card .chat-log{flex:1;padding:clamp(14px,2.2vw,20px);min-height:0}

.as-foot{border-top:1px solid var(--card-line);padding:clamp(12px,2vw,16px)}
.as-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.as-chip{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border-radius:999px;padding:9px 15px;min-height:36px;
  background:var(--surface);color:var(--fg-2);border:1px solid var(--line-2)}
.as-chip:hover{border-color:var(--accent);color:var(--accent)}

.as-form{display:flex;gap:9px;align-items:center}
.as-form input{flex:1;min-width:0;font:inherit;font-size:15px;padding:13px 18px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg)}
.as-form input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.as-send{flex:0 0 auto;width:46px;height:46px;border-radius:14px;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--accent);color:var(--on-accent)}
.as-send:hover{background:var(--accent-2)}
.as-send[disabled]{opacity:.6;cursor:default}
.as-send .ms{font-size:21px}
.as-send[aria-busy="true"] .ms{display:none}
.as-send .spin{display:none}
.as-send[aria-busy="true"] .spin{display:block}

.as-note{display:flex;gap:9px;align-items:flex-start;margin-top:var(--gap);
  font-size:12.5px;line-height:1.85;color:var(--fg-3)}
.as-note .ms{font-size:17px;flex:0 0 auto;margin-top:1px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* درس جاء إليه المتعلم من تحدّي المفردات */
.qz.hit{border-color:var(--accent);background:var(--accent-wash);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

/* باقة لا تتضمّن الجلسات الخاصة: الميزة تُعرض ولا تُفتح.
   بطاقة واحدة مميّزة — لا رصيد ولا جلسة قادمة ولا سياسة إلغاء
   حولها، فكلّها عن حجزٍ لا يقع. */
.pc-lock{position:relative;overflow:hidden;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:15px;
  padding:clamp(26px,5vw,40px) clamp(18px,4vw,32px);
  border-radius:var(--rp);border:1px solid var(--pl-line);
  background:linear-gradient(145deg,var(--pl-1) 0%,var(--pl-2) 55%,var(--pl-3) 100%);
  box-shadow:var(--shadow)}
.pc-lock-i{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:var(--pl-chip);color:var(--pl-ink)}
.pc-lock-i .ms{font-size:30px;font-variation-settings:'FILL' 1}
.pc-lock h2{font-size:clamp(19px,2.8vw,26px);font-weight:900;line-height:1.5;
  margin:0;color:var(--pl-ink);letter-spacing:-.01em}
.pc-lock-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  text-align:start;width:min(430px,100%)}
.pc-lock-l li{display:flex;align-items:center;gap:10px;font-size:14px;
  color:var(--pl-fg);padding:11px 14px;border-radius:var(--rb);
  border:1px solid var(--pl-line);background:var(--pl-row)}
.pc-lock-l .ms{font-size:19px;color:var(--pl-ink);flex:0 0 auto}
.pc-lock-p{font-size:14.5px;font-weight:600;color:var(--pl-fg);margin:0}
.pc-lock-n{font-size:13px;color:var(--pl-fg);margin:0}
.pc-lock-b{display:inline-flex;align-items:center;gap:7px;
  padding:13px 28px;border-radius:999px;font-family:var(--body);
  font-size:15px;font-weight:700;background:var(--pl-btn);color:var(--pl-btn-ink);
  transition:filter .18s}
.pc-lock-b:hover{filter:brightness(.94)}
.pc-lock-b .ms{font-size:16px;opacity:.85}

/* ---------- فيديو الدرس ----------
   كان رابطاً يُفتح في تبويب. صار مشغّلاً في الصفحة لمن نعرف
   مصدره — يوتيوب وVimeo وDrive وملفات الفيديو — ويبقى رابطاً
   لما عداها. */
.vid-h{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}
.vid-h h2{display:flex;align-items:center;gap:10px;font-size:clamp(22px,3vw,30px);
  font-weight:900;margin:0}
.vid-h h2 .ms{font-size:26px;color:var(--accent)}
.vid-t{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--fg-2);padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface)}
.vid-t .ms{font-size:15px}
.video-wrap iframe,
.video-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0;
  display:block;background:#000}
.vid-out a i{display:block;font-style:normal;font-size:12px;color:var(--fg-3);margin-top:4px}

/* ---------- رأس الدرس ---------- */
.lhero{border:1px solid var(--line);border-radius:var(--rp);
  background:linear-gradient(120deg,var(--surface) 30%,color-mix(in srgb,var(--cta) 16%,var(--surface)));
  padding:clamp(18px,3vw,30px);margin-bottom:clamp(14px,2vw,20px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,3vw,32px);align-items:center}
.lhero-txt{min-width:0}
@media (max-width:860px){ .lhero{grid-template-columns:1fr} }
.lhero-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:600;color:var(--accent);min-height:34px}
.lhero-back .ms{font-size:18px}
.lhero-back:hover{text-decoration:underline;text-underline-offset:3px}
.lhero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.lchip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;
  padding:5px 12px;border-radius:999px;background:var(--surface-2);color:var(--fg-2)}
.lchip-a{background:var(--accent-wash);color:var(--accent)}
.lhero h1{font-size:clamp(22px,3.4vw,34px);font-weight:900;line-height:1.45;
  letter-spacing:-.01em;margin:0}
.lhero-d{font-size:15px;line-height:1.95;color:var(--prose,var(--fg-2));
  margin:12px 0 0;max-width:62ch;white-space:pre-line}
.lhero-d[hidden]{display:none}
.lhero-cards{display:flex;flex-wrap:wrap;gap:12px}
.lhero-c{flex:1 1 170px;border:1px solid var(--line);border-radius:var(--rp);
  padding:16px 18px;background:color-mix(in srgb,var(--bg) 70%,transparent);text-align:center;
  display:flex;flex-direction:column;justify-content:center}
@media (min-width:861px){ .lhero-cards{flex-wrap:nowrap} .lhero-c{flex:0 0 auto;min-width:190px} }
.lhero-c>span{display:block;font-size:12.5px;color:var(--fg-2);margin-bottom:8px}
.lhero-c b{display:block;font-size:clamp(19px,2.4vw,24px);font-weight:900;color:var(--accent)}
.lhero-c .btn{width:100%}
.btn-done{background:var(--done);border-color:var(--done);color:#fff}
.btn-done:hover{filter:brightness(.95)}
#l-done .ld-ico{display:none;font-size:19px}
#l-done.btn-done .ld-ico{display:inline-block}
#l-done{gap:7px}

/* ---------- تبويبات الدرس ---------- */
.ltabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rp);
  padding:6px;margin-bottom:clamp(14px,2vw,20px)}
.ltabs::-webkit-scrollbar{display:none}
.ltabs[hidden]{display:none}
.ltab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 16px;border:0;border-radius:var(--rb);background:none;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:700;color:var(--fg-2);
  white-space:nowrap;transition:background .18s,color .18s}
.ltab .ms{font-size:19px}
.ltab:hover{color:var(--fg)}
.ltab.on{background:var(--cta);color:var(--on-cta)}
.lpane[hidden]{display:none}

/* على الجوال تنزل التبويبات تحت بعضها بدل شريطٍ يمرّ أفقياً
   فيُقصّ آخره — وهي العلّة نفسها التي أُزيلت من شريط الأقسام. */
@media (max-width:560px){
  .ltabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ltab{justify-content:center;padding:11px 10px}
}

/* الفيديو المرفوع: ريثما يُوقَّع عنوانه */
.vid-load{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--fg-3);font-size:13.5px;text-align:center;padding:16px}
.vid-load .ms{font-size:32px}


/* رمز الماسة بجانب عنوان الكلاسات الخاصة: الميزة حصرية لباقة،
   والرمز يقولها قبل أن يُقرأ سطر. */
.pg-dia{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-dia .ms{font-size:.85em;color:var(--accent)}

/* ============================================================
   صفحة «الدروس» — المنهج كلّه بطاقةً بطاقة
   طلبت العميلة تخطيط المرجع بخطٍّ أثقل وألوان أغمق من المعتاد
   عندنا: الوصف بـ--fg لا --fg-2، والعنوان بوزن 800، والحدود
   أوضح. النتيجة بطاقة تُقرأ من بعيد لا لوحة رمادية.
   ============================================================ */
/* الرقائق تلتفّ داخل صندوقها فتُرى كلها دفعةً واحدة: الشريط
   الأفقي يُخفي نصفها ويطلب سحباً، والمستويات خمسة لا خمسون. */
.lx-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:8px;background:var(--surface);border:1.5px solid var(--card-line);
  border-radius:var(--rc,16px);padding:10px;margin-bottom:16px}
.lx-tab{cursor:pointer;font:inherit;
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;font-size:13.5px;font-weight:700;
  color:var(--fg);background:transparent;border:1.5px solid transparent;
  border-radius:999px;padding:9px 15px;min-height:40px;
  transition:border-color .16s,background .16s,color .16s}
.lx-tab i{font-style:normal;font-size:11.5px;font-weight:800;line-height:1;
  background:var(--surface-2);color:var(--fg-2);border-radius:999px;padding:3px 7px;
  min-width:22px;text-align:center}
.lx-tab:hover{border-color:var(--card-line);background:var(--surface-2)}
.lx-tab.on{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.lx-tab.on i{background:color-mix(in srgb,#000 24%,transparent);color:var(--on-accent)}
/* على الجوال عمودان بالضبط، وإن كان عدد المستويات فردياً امتدّ
   الأخير على العرض كلّه: رقاقةٌ وحيدة في نصف صفٍّ تبدو منسيّة. */
@media (max-width:520px){
  .lx-tabs{grid-template-columns:1fr 1fr}
  .lx-tab:last-child:nth-child(odd){grid-column:1 / -1}
}

.lx-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

.lx-c{display:flex;flex-direction:column;gap:9px;min-width:0;text-align:start;
  background:var(--surface);border:1.5px solid var(--card-line);
  border-radius:var(--rc,16px);padding:16px 17px;
  transition:border-color .16s,transform .16s}
a.lx-c:hover{border-color:var(--accent);transform:translateY(-2px)}
/* المقفل بطاقةٌ كاملة كأخواتها كما في المرجع: لا حدٌّ منقّط ولا خلفيةٌ
   باهتة. القفل تقوله الشارة والصندوق الأصفر ورمز القفل في الذيل. */
.lx-c.locked,.lx-c.tier{background:var(--surface);border-style:solid}

.lx-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap}
.lx-lv{font-size:11.5px;font-weight:800;color:var(--accent);
  background:transparent;border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:999px;padding:4px 11px}
.lx-st{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;
  border-radius:999px;padding:4px 11px}
.lx-st .ms{font-size:15px;font-variation-settings:'FILL' 1}
.lx-st.done{color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent)}
.lx-st.locked{color:var(--fg-2);background:var(--surface-2)}
.lx-st.tier{color:var(--flame);background:var(--flame-bg)}

.lx-t{font-size:15.5px;font-weight:800;line-height:1.55;color:var(--fg)}
/* الوصف بلون النصّ كاملاً لا بشفافية: طلبت العميلة ألواناً
   أغمق، والشفافية هي ما كان يبهته. */
.lx-d{font-size:13px;line-height:1.85;color:var(--fg);
  /* سطران ثم «…» كما في المرجع: البطاقات تتساوى طولاً فتصطفّ */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* صندوق سبب القفل أصفر كما في المرجع: نصٌّ أصفر على خلفيةٍ صفراء
   خافتة بحدٍّ أصفر، بلا رمز. قيس التباين: ٥٫١٧:١ نهاري، ٨٫٧٣:١ ليلي. */
.lx-why{font-size:12.5px;line-height:1.75;font-weight:700;
  color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-line);
  border-radius:12px;padding:10px 13px}

.lx-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:4px}
.lx-min{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  color:var(--fg-2)}
.lx-min .ms{font-size:15px}
.lx-go{color:var(--accent);font-size:24px}
.lx-lock{color:var(--fg-3);font-size:22px}

/* العنوان بلونه في المقفل أيضاً — هكذا في المرجع */


/* ============================================================
   الاشتراك: بوابة الانتهاء وشريط التذكير
   ============================================================ */
.sub-gate{max-width:460px}
.sub-gate .gate-ico{color:var(--flame)}
.sub-gate .btn{margin:4px 5px 0}
.sub-gate-h{font-size:13px;color:var(--fg-3);margin-bottom:14px}

/* سبعة أيام أو أقل: شريطٌ في أعلى الصفحة لا يُفوَّت ولا يصرخ */
.renew-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--flame-bg);border:1px solid var(--flame-line);
  border-radius:var(--rc,16px);padding:12px 16px;margin-bottom:var(--gap,16px);
  color:var(--fg);font-size:13.5px;line-height:1.7}
.renew-bar > .ms{font-size:22px;color:var(--flame);flex:0 0 auto}
.renew-bar .rb-t{flex:1 1 220px;min-width:0}
.renew-bar .rb-t b{color:var(--flame);font-weight:800}
.renew-bar .nbtn{flex:0 0 auto;min-height:36px;padding:7px 16px;font-size:13px}


/* ============================================================
   صفحة الاختبار — على هيئة المرجع
   ============================================================ */
.qz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:6px 0 clamp(22px,4vw,34px)}
.qz-head-t{min-width:0;flex:1 1 320px}
.qz-lv{display:inline-block;font-size:12px;font-weight:800;color:var(--accent);
  border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:999px;padding:4px 12px;margin-bottom:10px}
.qz-head h1{font-size:clamp(21px,3.2vw,30px);font-weight:900;line-height:1.5;margin:0}
.qz-head p{font-size:14px;color:var(--fg-2);margin-top:6px;line-height:1.8}
.qz-back{flex:0 0 auto}

.qz-body{max-width:640px;margin-inline:auto}

/* بطاقة النتيجة */
.qz-res{background:var(--surface);border:1px solid var(--card-line,var(--line));
  border-radius:var(--rc,18px);padding:clamp(26px,4vw,40px) clamp(18px,4vw,34px);
  text-align:center;box-shadow:var(--card-sh)}
.qz-cap{font-size:13.5px;font-weight:700;color:var(--accent);margin:0 0 8px}
.qz-pct{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(46px,8vw,64px);line-height:1.1;color:var(--fg);direction:ltr}
.qz-line{font-size:clamp(16px,2.2vw,19px);color:var(--fg-2);margin:12px 0 0;line-height:1.7}
.qz-msg{font-size:14.5px;font-weight:800;line-height:1.8;margin:12px 0 0}
.qz-msg.warn{color:var(--gold)}
.qz-msg.ok{color:var(--up)}
.qz-ico{font-size:38px;color:var(--fg-3)}
.qz-acts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.qz-acts .nbtn .ms{font-size:18px}

/* سؤالٌ واحد في كل مرّة — الخطأ أحمر صريح لا برتقالي */
:root{--wrong:#DC2626}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wrong:#F87171}}
:root[data-theme="dark"]{--wrong:#F87171}
.qz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:14px;font-weight:800;color:var(--fg);margin-bottom:10px}
.qz-sc{color:var(--accent);font-weight:800}
.qz-prog{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:18px}
.qz-prog i{display:block;height:100%;width:0;border-radius:inherit;background:var(--cta);
  transition:width .35s ease}
.qz-q{background:var(--surface);border:1px solid var(--card-line,var(--line));border-radius:var(--rc,18px);
  padding:clamp(18px,3.5vw,28px);box-shadow:var(--card-sh)}
.qz-q h2{font-size:clamp(18px,2.6vw,23px);font-weight:900;line-height:1.7;margin:0 0 18px}
.qz-opts{display:flex;flex-direction:column;gap:10px}
.qz-o{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;
  padding:12px 16px;border:1px solid var(--line-2,var(--line));border-radius:var(--rb);
  background:color-mix(in srgb,var(--bg) 55%,var(--surface));color:var(--fg);
  font-family:var(--body);font-size:15px;font-weight:600;line-height:1.7;text-align:start;cursor:pointer;
  transition:border-color .18s,background .18s,opacity .18s}
.qz-o:hover:not(:disabled){border-color:var(--accent);background:var(--accent-wash)}
.qz-o:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qz-o:disabled{cursor:default}
.qz-o.pick{border-color:var(--accent);background:var(--accent-wash)}
.qz-o.ok{border-color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent);color:var(--fg)}
.qz-o.no{border-color:var(--wrong);background:color-mix(in srgb,var(--wrong) 13%,transparent);color:var(--fg)}
.qz-o.dim{opacity:.55}
.qz-om{font-size:22px;flex:0 0 auto}
.qz-om:empty{display:none}
.qz-o.ok .qz-om{color:var(--up)}
.qz-o.no .qz-om{color:var(--wrong)}
.qz-fb{margin-top:16px;padding:12px 16px;border-radius:var(--rb);border:1px solid var(--line)}
.qz-fb b{display:flex;align-items:flex-start;gap:7px;font-size:15px;font-weight:800;line-height:1.7}
.qz-fb b .ms{font-size:20px;margin-top:3px;flex:0 0 auto}
.qz-fb.ok{border-color:color-mix(in srgb,var(--up) 45%,transparent);background:color-mix(in srgb,var(--up) 9%,transparent)}
.qz-fb.no{border-color:color-mix(in srgb,var(--wrong) 45%,transparent);background:color-mix(in srgb,var(--wrong) 8%,transparent)}
.qz-fb.ok b{color:var(--up)}
.qz-fb.no b{color:var(--wrong)}
.qz-fb p{margin:8px 0 0;font-size:13.5px;line-height:1.85;color:var(--fg-2)}
.qz-nav{display:flex;justify-content:flex-end;margin-top:20px}
.qz-nav .nbtn{min-width:150px;min-height:46px}
.qz-nav .nbtn:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:480px){ .qz-nav .nbtn{width:100%} }

/* الإرسال والتنبيه */
.qz-err{color:var(--dn);background:color-mix(in srgb,var(--dn) 10%,transparent);
  border-radius:12px;padding:10px 14px;font-size:13.5px;font-weight:600;margin:4px 0 10px}
.qz-err[hidden]{display:none}

/* ---------- بطاقة الدرس: التبويبات والمحتوى معاً (كالمرجع) ---------- */
.lcard{background:var(--surface);border:1px solid var(--card-line,var(--line));border-radius:var(--rc,18px);
  box-shadow:var(--card-sh);overflow:hidden}
.lcard .ltabs{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;
  padding:clamp(8px,1.4vw,12px);background:transparent}
.lcard .lpane{padding:clamp(18px,3.2vw,32px)}
.lp-h{display:flex;align-items:center;gap:10px;font-size:clamp(22px,3vw,30px);font-weight:900;
  margin:0 0 18px;line-height:1.4}
.lp-h .ms{font-size:26px;color:var(--accent)}
.lp-empty{color:var(--fg-2);font-size:15px;line-height:1.9;margin:0 0 14px}

/* رابطٌ داخل الدرس: مربّعٌ يُضغط لا نصٌّ طويل */
.lk-list{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.lk-list:empty{display:none}
.lk-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:4px 0 16px}
.lk-box{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:min(100%,520px);min-height:52px;padding:12px 18px;border-radius:var(--rp);
  border:1px solid var(--line-2,var(--line));
  background:color-mix(in srgb,var(--cta) 7%,var(--surface-2));color:var(--fg);
  font-weight:800;font-size:15px;line-height:1.6;text-decoration:none;
  transition:border-color .18s,background .18s}
.lk-box:hover{border-color:var(--accent);background:color-mix(in srgb,var(--cta) 14%,var(--surface-2))}
.lk-box:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lk-box .ms{font-size:20px;color:var(--fg-2);flex:0 0 auto}
.lk-box .lk-t{min-width:0;overflow-wrap:anywhere}

/* دعوة الاختبار: بطاقة مستقلّة تحت بطاقة الدرس، النصّ يميناً والزرّ يساراً */
.lcta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(14px,2vw,20px);padding:clamp(18px,3vw,28px);
  background:var(--surface);border:1px solid var(--card-line,var(--line));
  border-radius:var(--rc,18px);box-shadow:var(--card-sh)}
.lcta-t{flex:1 1 320px;min-width:0}
.lcta h3{display:flex;align-items:center;gap:9px;font-size:clamp(19px,2.6vw,24px);font-weight:900;margin:0}
.lcta h3 .ms{font-size:24px;color:var(--accent)}
.lcta p{margin:8px 0 0;font-size:14.5px;line-height:1.9;color:var(--fg-2)}
.lcta-b{flex:0 0 auto;gap:8px}
.lcta-b .ms{font-size:19px}
@media (max-width:560px){ .lcta-b{width:100%;justify-content:center} }

/* ---------- شاشة «تم تعطيل حسابك» (كالمرجع) ---------- */
.lock-card{position:relative;max-width:900px;margin:clamp(24px,6vh,64px) auto;
  padding:clamp(28px,5vw,52px) clamp(18px,5vw,52px);text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:var(--card-sh)}
.lock-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,#38BDF8,#2563EB 45%,#A78BFA 75%,#F87171)}
.lock-ico{display:inline-grid;place-items:center;width:88px;height:88px;border-radius:22px;
  background:color-mix(in srgb,var(--wrong,#DC2626) 16%,var(--surface));
  box-shadow:0 18px 36px -18px color-mix(in srgb,var(--wrong,#DC2626) 60%,transparent);margin-bottom:22px}
.lock-ico .ms{font-size:40px;color:var(--wrong,#DC2626)}
.lock-eb{margin:0;font-size:15px;font-weight:800;color:var(--lock-eb)}
.lock-card h1{margin:10px 0 0;font-size:clamp(28px,5vw,44px);font-weight:900;line-height:1.35}
.lock-t{margin:16px auto 0;max-width:62ch;font-size:clamp(15px,1.9vw,17px);line-height:2;color:var(--fg-2)}
.lock-acts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:clamp(24px,4vw,34px)}
.lock-b{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:58px;
  padding:12px 18px;border-radius:14px;font-family:var(--body);font-size:16px;font-weight:800;
  text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .18s,border-color .18s}
.lock-b .ms{font-size:21px}
.lock-p{background:var(--cta);color:var(--on-cta)}
.lock-p:hover{background:var(--cta-2)}
.lock-g{background:transparent;color:var(--fg);border-color:var(--line-2,var(--line))}
.lock-g:hover{border-color:var(--accent)}
.lock-u{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-line)}
.lock-u:hover{border-color:var(--gold)}
.lock-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){ .lock-acts{grid-template-columns:1fr} }
:root{--lock-eb:#B4234B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--lock-eb:#FDA4AF}}
:root[data-theme="dark"]{--lock-eb:#FDA4AF}