/* أنماط المكوّنات: أزرار، بطاقات، شرائح، خط الرحلة، النوافذ، التوست */

/* ===================== أزرار ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; border:1px solid transparent; cursor:pointer;
  font-size:14px; font-weight:600; padding:10px 18px; line-height:1.5;
  /* الزر قد يكون <a> (زر «العودة لمساري» في thanks.html) — بلا هذا يضع المتصفح تسطيره
     الافتراضي تحته، فكان كل موضع يلغيه بنمط inline خاص به (issue #165) */
  text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover:not(:disabled){background:var(--interactive); box-shadow:0 10px 22px -10px rgba(15,138,116,.5)}
/* في وضع السهر الزر الرئيسي ينوّر بالفيروزي (قاعدة الهوية) */
.btn-soft{background:color-mix(in srgb, var(--interactive) 11%, transparent); color:var(--brand-ink); border-color:color-mix(in srgb, var(--interactive) 22%, transparent)}
.btn-soft:hover:not(:disabled){background:color-mix(in srgb, var(--interactive) 18%, transparent)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-ghost:hover:not(:disabled){background:var(--surface2)}
.btn-danger{background:var(--danger); color:#fff}
.btn-danger:hover:not(:disabled){background:var(--danger-ink); box-shadow:0 10px 22px -10px rgba(180,71,42,.5)}
.icon-btn{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text); cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.icon-btn:hover{background:var(--surface2)}
.icon-btn:active{transform:translateY(1px)}

/* ===================== الرابط النصّي (‎.link-cta‎) — مصدر واحد لكل رابط نصّي =====================
   لماذا صنف موحّد بدل تنسيق كل رابط على حدة (issue #165): رابط «شكر خاص لفريق المراجعة» في
   التذييل لم يصله أحد رغم وجوده — كان نصاً غامقاً بلا تسطير ولا أيقونة، فقُرئ سطرَ نصٍّ لا
   رابطاً. واللون وحده لا يصلح إشارةً: الفارق بين ‎--accent-ink‎ والنص ‎--muted‎ المحيط به
   1.33–1.45:1 في الوضعين — أي إن العين لا تكاد تفصلهما، ومَن لا يميّز الألوان لا يراه أصلاً.

   لذلك تُبنى الإشارة من ثلاث طبقات مستقلة، تعمل كل واحدة ولو غابت الأخريان:
     ١) تسطير فيروزي **دائم** — لا يظهر عند المرور وحده، فالرابط يُقرأ رابطاً قبل لمسه
     ٢) أيقونة اتجاه: ‎.link-cta-go‎ (سهم داخلي لصفحة في الموقع) أو ‎.link-cta-arrow‎
        (‎↗‎ نصّي لموقع خارجي) — واتجاه السهم الداخلي يساراً لأن ‎i-arrow-right‎ محجوز للعودة
     ٣) تغيّر واضح عند المرور: التسطير يشتدّ ويصير بلون النص، والأيقونة تتقدّم

   لون النص ‎--brand-ink‎ لا ‎--accent-ink‎: الفيروزي فوق خلفية النهار 3.92:1 فقط — دون حدّ
   WCAG AA للنص الصغير (4.5:1)، وأغلب روابط الموقع 12.5px. فيُنقَل الفيروزي إلى التسطير
   والأيقونة (عنصران غير نصّيين، حدّهما 3:1) لتبقى هوية اللون ويبقى النص مقروءاً:
   ≥ 12.3:1 في الوضعين.

   ⛔ أي رابط نصّي جديد (صفحة فرعية، LinkedIn، Telegram، …) يأخذ هذا الصنف — لا تنسيق مستقل
   له ولا أنماط inline. التفصيل في AGENTS.md § «الروابط النصية (‎.link-cta‎)». */
.link-cta{
  display:inline-flex; align-items:center; gap:6px; width:fit-content;
  color:var(--brand-ink); font-weight:700;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb, var(--accent-ink) 65%, transparent);
  border-radius:8px;
  transition:text-decoration-color .18s ease, text-decoration-thickness .18s ease;
}
.link-cta:hover{text-decoration-color:currentColor; text-decoration-thickness:2px}
.link-cta:focus-visible{outline:2px solid var(--ring); outline-offset:3px}
/* الأيقونة تحمل الفيروزي وتتحرّك عند المرور — تأكيد ثانٍ أن العنصر تفاعلي لا زخرفة */
.link-cta .i, .link-cta-arrow{color:var(--accent-ink); transition:transform .18s ease}
.link-cta .i{width:15px; height:15px}
.link-cta-arrow{display:inline-block; font-weight:700}
/* الداخلي يتقدّم في اتجاه القراءة (يساراً في RTL)، والخارجي يخرج من الصفحة (أعلى-يمين) */
.link-cta:hover .link-cta-go{transform:translateX(-3px)}
.link-cta:hover .link-cta-arrow{transform:translate(2px, -2px)}

/* بطاقة البداية */
.options{display:grid; grid-template-columns:minmax(0, 780px); justify-content:center; gap:20px; padding:26px 0 10px}
.opt-card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:28px; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  display:flex; flex-direction:column; gap:18px;
}
.opt-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--border-strong)}
.opt-primary{border-color:color-mix(in srgb, var(--primary) 35%, transparent); overflow:hidden}
/* الشريط بلا border-radius خاص به — 20px نصف قطر على شريط ٤px يرسم زاوية غير مطابقة
   لدوران البطاقة نفسها؛ overflow:hidden أعلاه يقصّه على قياس زوايا البطاقة تماماً بدل تخمين نصف قطر مطابق */
.opt-primary::before{
  content:""; position:absolute; inset-inline:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
}
.opt-head{display:flex; align-items:flex-start; gap:14px}
.opt-icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none;
  background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--brand-ink);
  border:1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
.opt-card h2{margin:0; font-size:19px; font-weight:700}
.opt-card p{margin:4px 0 0; color:var(--muted); font-size:13.5px; line-height:1.9}
.opt-tag{
  position:absolute; top:18px; inset-inline-start:auto; inset-inline-end:20px;
  font-size:11px; font-weight:700; color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent) 14%, transparent); padding:3px 10px; border-radius:999px;
}
.dropzone{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  border:1.5px dashed var(--border-strong); border-radius:14px; padding:14px 16px;
  transition:border-color .2s ease, background .2s ease;
  color:var(--muted); font-size:13.5px;
}
.dropzone:hover{border-color:var(--interactive); background:color-mix(in srgb, var(--interactive) 5%, transparent); color:var(--text)}
.dropzone.has-file{border-style:solid; border-color:color-mix(in srgb, var(--ok) 55%, transparent); color:var(--text); background:color-mix(in srgb, var(--ok) 6%, transparent)}
.dz-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px}
.dz-hint{font-size:11.5px; color:var(--muted); margin-top:-6px}
/* .selrow كان يغلّف حقول لوحة «إضافة متطلب» القديمة، وأُزيلت مع issue #92 — لم يبقَ له
   مستعمِل في الترميز، ويُترك التعريف لأنه غلاف عام صغير قد يعود مع أي نموذج حقول لاحق. */
.selrow{display:flex; flex-direction:column; gap:6px}
.selrow label{font-size:12.5px; font-weight:600; color:var(--muted)}
.select{
  width:100%; appearance:none; background:var(--surface2); color:var(--text);
  border:1px solid var(--border-strong); border-radius:12px; padding:11px 14px; font-size:14px;
  font-family:inherit; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center;
}
.opt-foot{margin-top:auto}
.uni-pill{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--sand) 40%, transparent);
  border:1px solid color-mix(in srgb, var(--sand) 80%, transparent);
  font-size:13.5px; font-weight:600;
}

/* خطوات الاختيار الهرمي: جامعة ← كلية ← تخصص */
.ob-step{display:flex; flex-direction:column; gap:8px}
.ob-step-h{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--muted)}
.ob-num{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:11.5px; font-weight:700; color:var(--brand-ink);
  background:color-mix(in srgb, var(--primary) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
.ob-opts{display:flex; flex-wrap:wrap; gap:8px}
.ob-opt{
  display:inline-flex; align-items:center; gap:8px; max-width:100%; text-align:start;
  border:1px solid var(--border-strong); background:var(--surface2); color:var(--text);
  border-radius:12px; padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.ob-opt:hover:not(:disabled){border-color:var(--interactive)}
.ob-opt.selected{background:var(--primary); border-color:var(--primary); color:#fff}
.ob-opt:disabled{cursor:not-allowed; opacity:.6; color:var(--muted)}
.soon-badge{
  font-size:10.5px; font-weight:700; color:var(--warn-ink); white-space:nowrap;
  background:color-mix(in srgb, var(--warn) 18%, transparent); padding:1.5px 8px; border-radius:999px;
}

/* الرفع اليدوي — خيار ثانوي داخل البطاقة */
.upload-sec{border-top:1px solid var(--border); margin-top:4px; padding-top:12px}
.upload-toggle{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:13px; font-weight:600; padding:6px; border-radius:10px;
  transition:color .15s ease;
}
.upload-toggle:hover{color:var(--brand-ink)}
.upload-toggle .tg-ch{transition:transform .25s ease}
.upload-toggle.open .tg-ch{transform:rotate(180deg)}
/* معطَّل مؤقتاً (issue #77) — opacity + not-allowed للتوضيح، pointer-events يمنع hover اللوني فوق disabled */
.upload-toggle:disabled{opacity:.55; cursor:not-allowed; pointer-events:none}
#uploadPanel{padding-top:12px}

/* الأسئلة الشائعة */
.faq{padding:44px 0 70px; max-width:760px; margin-inline:auto}
.faq h2{font-size:22px; font-weight:700; margin:0 0 6px; text-align:center}
.faq .faq-lead{text-align:center; color:var(--muted); font-size:14px; margin:0 0 22px}
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  margin-bottom:10px; overflow:hidden; transition:border-color .2s ease;
}
.faq-item[open]{border-color:var(--border-strong); box-shadow:var(--shadow)}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; font-weight:600; font-size:14.5px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .i{color:var(--muted); transition:transform .25s ease}
.faq-item[open] summary .i{transform:rotate(180deg); color:var(--brand-ink)}
.faq-a{padding:0 20px 18px; color:var(--muted); font-size:13.5px; line-height:2}

/* ===================== ملخص الخطة — بطاقات زجاجية مطفية (issue #112) =====================
   ثلاث بطاقات: ساعات منجزة · نسبة الإنجاز (الأوسع، وفيها شريط التقدّم والتخرج) · ساعات متبقية.
   الخلفية شبه شفافة فعلاً (--glass-bg) خلف طبقة blur، بلا تدرّج على خلفية البطاقة نفسها وبلا
   لمعان، وكل الألوان من tokens الهوية — فتبدو البطاقات جزءاً من خلفية مساري لا طبقة غريبة. */
.statbar{
  display:grid; grid-template-columns:1fr 1.85fr 1fr; gap:12px;
  padding:10px 0 6px;
}
/* ⚠️ html2canvas لا يدعم backdrop-filter — فلو أُعيد تفعيل زر «حفظ كصورة» (المحجوب في
   issue #70 مع بقاء ExportService.png بلا لمس) ستظهر البطاقات في الصورة بلا زجاج. القواعد
   في @media print تعطّل الزجاج للورق أصلاً، ويصلح نظيرها وقت إعادة التفعيل. */
.stat{
  position:relative; z-index:1;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(118%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(118%);
  border:1px solid var(--glass-border); border-radius:18px;
  padding:10px 16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:1px; justify-content:center;
}
/* line-height مضبوط صراحةً في كل سطر: line-height:1.85 الموروث من body كان يضيف ~8px
   لكل سطر نصّي، وهو أصل ارتفاع البطاقات الزائد في التصميم السابق (issue #112) */
.stat-label{font-size:12px; line-height:1.5; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:6px}
.stat-value{font-size:24px; font-weight:700; line-height:1.25}
.stat-value small{font-size:12px; color:var(--muted); font-weight:500}
/* سطر الوحدة/التوضيح أسفل الرقم — يمنع الفراغ داخل البطاقتين الجانبيتين */
.stat-sub{font-size:11.5px; color:var(--muted); font-weight:500; line-height:1.45}

/* البطاقة الأوسط: النسبة + الشريط + موضع الطالب والتخرج، في ثلاثة أسطر مضغوطة */
.stat-main{gap:6px; justify-content:center}
.stat-main-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.stat-pct{font-size:26px; line-height:1.15; letter-spacing:-.5px; color:var(--brand-ink)}
.stat-main-foot{
  display:flex; align-items:center; justify-content:space-between; gap:5px 14px; flex-wrap:wrap;
  font-size:11.5px; line-height:1.45; color:var(--muted); font-weight:500;
}
/* موضع الطالب الحالي — نفس فيروزي «الترم الحالي» في خط الرحلة، فيُقرأ كنفس الدلالة */
.stat-here{
  display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius:999px; padding:0 8px; white-space:nowrap;
}
.stat-grad{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; margin-inline-start:auto}
.stat-grad b{color:var(--text); font-weight:700}
/* الفاصل «·» يفصل التخرج عن «يتبقى N أترام» — فيظهر فقط حين يوجد ما قبله وما بعده فعلاً:
   بلا مسار متوقَّع تُخفى المقدّمة (statGradLead) فيبقى نص السبب وحده بلا فاصل معلَّق. */
#statGradLead:not([hidden]) + .stat-grad-sub:not(:empty)::before{content:'·'; margin-inline:5px; opacity:.6}

.progress{height:8px; border-radius:999px; background:var(--surface2); overflow:hidden; margin-top:4px}
.progress > i{
  display:block; height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg, var(--interactive), var(--accent));
  transition:width .9s cubic-bezier(.22,.9,.36,1);
}
/* شريط بطاقة النسبة: أسمك قليلاً وبمسار محفور، ورأس الشريط منوّر كعقدة «الترم الحالي» */
.progress-lg{
  height:11px; margin-top:0; overflow:visible;
  background:color-mix(in srgb, var(--surface2) 85%, transparent);
  box-shadow:inset 0 1px 2px color-mix(in srgb, var(--primary) 8%, transparent);
}
.progress-lg > i{position:relative; box-shadow:0 0 12px color-mix(in srgb, var(--accent) 45%, transparent)}
/* رأس الشريط = «أنت هنا» على مسار الخطة. يُخفى عند 0% فلا تظهر نقطة بلا تقدّم */
.progress-lg > i::after{
  content:''; position:absolute; inset-inline-end:-3px; top:50%; translate:0 -50%;
  width:13px; height:13px; border-radius:50%;
  background:var(--surface); border:3px solid var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.progress-lg > i[style*="width: 0%"]::after{display:none}

/* شريط المحاكاة */
.simbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:color-mix(in srgb, var(--warn) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius:14px; padding:10px 14px; margin:10px 0 4px; font-size:13px;
}
.simbar .sb-title{font-weight:700; color:var(--warn-ink); display:flex; align-items:center; gap:8px}

/* شريط «التخرّج الأسرع» — بلون الـaccent تمييزاً عن شريط المحاكاة */
.fastbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:14px; padding:10px 14px; margin:10px 0 4px; font-size:13px;
}
.fastbar .fb-title{font-weight:700; color:var(--accent-ink); display:flex; align-items:center; gap:8px; white-space:nowrap}
.fastbar .fb-body{color:var(--text)}
.fastbar .fb-body b{color:var(--accent-ink)}
.sim-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:999px; padding:3px 6px 3px 10px;
}
.sim-chip button{border:none; background:transparent; cursor:pointer; color:var(--muted); display:grid; place-items:center; padding:2px; border-radius:50%}
.sim-chip button:hover{color:var(--danger-ink)}
/* عوائق الفصل الصيفي داخل شريط المحاكاة (issue #183) — سطر لكل مقرر محجوب مع زر «اجتياز» */
.sim-notes{flex-basis:100%; display:flex; flex-direction:column; gap:6px}
.sim-note{display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--text); line-height:1.7}
.sim-note > svg{color:var(--warn-ink); flex:none}
.sim-note > span{flex:1 1 220px}
.sim-pass{padding:5px 14px; font-size:12.5px}

/* لوحة ماذا لو */
.whatif{
  background:var(--surface2); border:1px solid var(--border); border-radius:18px;
  padding:20px; margin:12px 0 4px;
}
.wi-head{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.wi-head h3{margin:0; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--brand-ink)}
.wi-head p{margin:0; font-size:12.5px; color:var(--muted)}
.wi-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.wi-block{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px}
.wi-title{font-size:13px; font-weight:700; margin:0 0 10px; display:flex; align-items:center; gap:7px}
.wi-row{display:flex; gap:8px}
.wi-row .select{flex:1; padding:9px 12px; font-size:13px; min-width:0}
.wi-hint{font-size:11.5px; color:var(--muted); margin:8px 0 0; line-height:1.8}
.wi-msg{font-size:12px; color:var(--warn-ink); margin:8px 0 0; line-height:1.8; font-weight:600}
.wi-hours{display:flex; align-items:center; gap:12px}
.wi-hours input[type=range]{flex:1; direction:ltr; accent-color:var(--interactive)}
.wi-hours-val{font-size:18px; font-weight:700; color:var(--brand-ink); min-width:56px; text-align:center; background:var(--surface2); border-radius:10px; padding:4px 8px}
.impact{
  margin-top:14px; border-radius:14px; padding:14px 16px; font-size:14px; font-weight:600;
  display:flex; align-items:flex-start; gap:10px; border:1px solid transparent;
}
.impact.ok{background:color-mix(in srgb, var(--ok) 10%, transparent); border-color:color-mix(in srgb, var(--ok) 30%, transparent); color:var(--ok-ink)}
.impact.warn{background:color-mix(in srgb, var(--danger) 8%, transparent); border-color:color-mix(in srgb, var(--danger) 28%, transparent); color:var(--danger-ink)}
.impact .imp-sub{display:block; font-size:12px; font-weight:500; color:var(--muted); margin-top:3px}
/* أثر المحاكاة على المقررات الأخرى (issues #34 و#197 و#201): قسم مستقل تحت نتيجة التخرّج،
   سطر لكل مقرر. التقدّم بلون النجاح والتأخّر بلون التحذير، ومع كل سطر سهم ونص الفصلين
   فلا يقوم الفهم على اللون وحده (#165). */
.impact{flex-direction:column; align-items:stretch; gap:0}
.imp-top{display:flex; align-items:flex-start; gap:10px}
.imp-sect{margin-top:12px; padding-top:12px; border-top:1px solid var(--border-strong); color:var(--text)}
.imp-sect-title{margin:0 0 8px; font-size:14px; font-weight:700; color:var(--brand-ink)}
.imp-grp + .imp-grp{margin-top:10px}
.imp-grp-label{font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:5px}
.imp-row{
  display:flex; align-items:flex-start; gap:10px; width:100%; min-height:44px; padding:8px 12px; margin-top:6px;
  text-align:start; font-family:inherit; cursor:pointer; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
  transition:border-color .15s ease, background .15s ease;
}
.imp-row:hover{border-color:var(--interactive)}
.imp-row.is-earlier{border-color:color-mix(in srgb, var(--ok) 50%, transparent); background:color-mix(in srgb, var(--ok) 8%, var(--surface))}
.imp-row.is-later{border-color:color-mix(in srgb, var(--warn) 55%, transparent); background:color-mix(in srgb, var(--warn) 10%, var(--surface))}
.imp-row.is-earlier .imp-dir{color:var(--ok-ink)}
.imp-row.is-later .imp-dir{color:var(--warn-ink)}
.imp-dir{font-weight:800; font-size:15px; line-height:1.5; flex:none}
.imp-row-main{display:flex; flex-direction:column; gap:1px; min-width:0}
.imp-row-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 8px}
.imp-name{font-size:13.5px; font-weight:700; line-height:1.6}
.imp-code{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--muted)}
.imp-row-txt{font-size:13px; font-weight:500; line-height:1.7; color:var(--text)}
.imp-more{margin-top:8px; min-height:44px}
/* لماذا لم يتقدّم التخرّج، وسلسلة المقرر إلى التخرّج (issue #206) */
.imp-why{margin:4px 0 0; font-size:13px; font-weight:500; line-height:1.8; color:var(--text)}
.imp-chev{flex:none; margin-inline-start:auto; align-self:center; width:16px; height:16px; color:var(--muted); transition:transform .15s ease}
.imp-row.is-open .imp-chev{transform:rotate(180deg)}
.imp-chain{
  margin:0 0 4px; padding:10px 12px; border:1px solid var(--border-strong); border-top:0;
  border-radius:0 0 10px 10px; background:var(--surface2); color:var(--text);
}
.imp-row.is-open{border-bottom-left-radius:0; border-bottom-right-radius:0}
.imp-chain-label{font-size:12px; font-weight:700; color:var(--muted); margin-bottom:4px}
.imp-chain-path{margin:0; font-size:13.5px; font-weight:600; line-height:1.9; overflow-wrap:anywhere}
.imp-chain-arr{color:var(--accent-ink); font-weight:800; margin:0 2px}
.imp-chain-note{margin:4px 0 0; font-size:12.5px; font-weight:500; line-height:1.8; color:var(--muted)}
.imp-goto{margin-top:8px; min-height:44px}

/* ===================== خط الرحلة + بطاقات الفصول ===================== */
/* دليل المتطلبات (issue #112): صف واحد مضغوط بمنطقتين. الحالات رقاقات صغيرة ظاهرة دائمًا
   (لا كروت ولا قائمة تُفتح)، والإجراءات في مجموعة خلف فاصل رقيق فلا تُقرأ كحالة إضافية.
   بديل التصميم السابق: بنود بفراغ 16px تلتف على سطرين على الشاشات المتوسطة، وزرّا إجراء
   بنفس وزن الحالات البصري تمامًا (issue #80 و#110). */
.legend{
  display:flex; align-items:center; justify-content:space-between; gap:6px 14px; flex-wrap:wrap;
  font-size:12px; line-height:1.5; color:var(--muted); padding:8px 2px 4px;
}
.legend-states{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0}
.legend-title{font-weight:700; color:var(--text); margin-inline-end:2px; white-space:nowrap}
.lg-pill{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:11.5px; font-weight:600; line-height:1.55;
  border-radius:999px; padding:1px 8px;
  border:1px solid transparent;
}
/* تلوين خفيف بلون الحالة نفسه — دلالة وظيفية موجودة أصلاً (mark-ok/up/no/ov)، لا لوحة جديدة */
.p-ok{background:color-mix(in srgb, var(--ok) 10%, transparent);     border-color:color-mix(in srgb, var(--ok) 24%, transparent)}
.p-up{background:color-mix(in srgb, var(--info) 10%, transparent);   border-color:color-mix(in srgb, var(--info) 24%, transparent)}
.p-no{background:color-mix(in srgb, var(--danger) 9%, transparent);  border-color:color-mix(in srgb, var(--danger) 22%, transparent)}
.p-ov{background:color-mix(in srgb, var(--pink) 9%, transparent);    border-color:color-mix(in srgb, var(--pink) 22%, transparent)}
/* تعليمة الاستخدام: معلومة لا حالة ولا إجراء — بلا إطار، وأول ما يلتف عند ضيق المساحة */
.legend-hint{display:inline-flex; align-items:center; gap:5px; opacity:.85; margin-inline-start:4px}
.legend-hint .i{color:var(--pink-ink)}
/* الإجراءات: فاصل رقيق يعزلها عن الحالات، ووزن بصري أقل (لا تأخذ مساحة شرح الحالات) */
.legend-actions{
  display:flex; align-items:center; gap:4px; flex:none;
  padding-inline-start:12px; border-inline-start:1px solid var(--border);
}
.lg-act{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  background:transparent; border:1px solid transparent; border-radius:9px;
  padding:1px 8px; font:inherit; font-size:11.5px; font-weight:600; line-height:1.55;
  color:var(--muted); cursor:pointer;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}
.lg-act:hover{
  color:var(--interactive);
  background:color-mix(in srgb, var(--interactive) 8%, transparent);
  border-color:color-mix(in srgb, var(--interactive) 22%, transparent);
}
#btnPlanFeedback:hover{
  color:var(--danger-ink);
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  border-color:color-mix(in srgb, var(--danger) 24%, transparent);
}
.mark{font-weight:700; font-size:12px}
.mark-ok{color:var(--ok-ink)} .mark-up{color:var(--info-ink)} .mark-no{color:var(--danger-ink)}
/* حالة رابعة: متطلب متجاوَز (issue #37) — ليست منجزة ولا غير متاحة، بل قيدها مرفوع */
.mark-ov{color:var(--pink-ink)}

.terms{position:relative; padding:10px 0 60px; display:flex; flex-direction:column; gap:22px}
/* خط المترو — توقيع الهوية: المنجز صلب، القادم متقطع، الحالي منوّر بالفيروزي */
.term-wrap{position:relative; padding-inline-start:40px}
.term-wrap::before{
  content:""; position:absolute; top:-22px; bottom:0; inset-inline-start:10px; width:2.5px;
  background:repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 35%, transparent) 0 7px, transparent 7px 15px);
}
.term-wrap:first-child::before{top:30px}
.term-wrap:last-child::before{bottom:calc(100% - 36px)}
.term-wrap:first-child:last-child::before{display:none}
.term-wrap.k-past::before, .term-wrap.k-current::before{background:var(--primary)}
.term-node{
  position:absolute; inset-inline-start:0; top:26px; width:22px; height:22px; border-radius:50%;
  background:var(--surface); border:3px solid var(--border-strong); display:grid; place-items:center; z-index:2;
  color:transparent;
}
.term-node .i{width:11px; height:11px; stroke-width:3}
.k-past .term-node{background:var(--primary); border-color:var(--primary); color:#fff}
.k-current .term-node{
  border:4px solid var(--interactive); background:var(--surface);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent);
  animation:msr-pulse 1.1s ease 2;
}
.k-grad .term-node{background:var(--accent); border-color:var(--accent); color:#062A23}
@keyframes msr-pulse{
  0%,100%{box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent)}
  50%{box-shadow:0 0 0 11px color-mix(in srgb, var(--accent) 12%, transparent)}
}

.term-card{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden;
  transition:box-shadow .25s ease, transform .2s ease, border-color .2s ease;
}
.term-card:hover{box-shadow:var(--shadow-lift)}
.term-card::before{content:""; display:block; height:3.5px; background:var(--primary)}
.k-current .term-card::before{background:linear-gradient(90deg, var(--interactive), var(--accent))}

.term-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 12px; flex-wrap:wrap}
.term-title{margin:0; font-size:17px; font-weight:700; display:flex; align-items:baseline; gap:8px}
.term-title .t-id{color:var(--muted); font-weight:600; font-size:14px}
.term-sub{font-size:12px; color:var(--muted); margin-top:2px}
.term-chips{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.chip{font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:5px}
.chip-h{background:color-mix(in srgb, var(--sand) 55%, transparent); color:var(--text)}
.chip-n{background:var(--surface2); color:var(--muted)}
.chip-state-past{background:color-mix(in srgb, var(--ok) 13%, transparent); color:var(--ok-ink)}
.chip-state-current{background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-ink)}
.chip-state-summer{background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn-ink)}
.chip-state-grad{background:color-mix(in srgb, var(--pink) 13%, transparent); color:var(--pink-ink)}

.course-list{padding:2px 0 8px}
/* طي «مقررات منجزة» من الأسفل (issue #105) — بديل عن التمرير رجوعاً لأعلى الكارد في القوائم
   الطويلة. السهم دائماً لأعلى (اتجاه الطي)، بعكس شارة chevron المطويّة/المفتوحة في مكان آخر */
.term-collapse-bottom{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer;
  background:var(--surface2); border:none; border-top:1px solid var(--border);
  padding:11px 16px; transition:background .15s ease, color .15s ease;
}
.term-collapse-bottom:hover{background:color-mix(in srgb, var(--interactive) 10%, transparent); color:var(--brand-ink)}
.term-collapse-bottom .i{transform:rotate(180deg)}
.course{
  display:grid; grid-template-columns:82px 1fr auto; align-items:center; gap:14px;
  padding:12px 22px; border-top:1px solid var(--border); cursor:pointer;
  transition:background .18s ease, box-shadow .25s ease;
}
.course:hover{background:color-mix(in srgb, var(--interactive) 5%, transparent)}

/* ---- نافذة «تعديل» (issue #30، أُعيدت تسميتها في #56) ---- */
/* زر على رأس بطاقة الفصل يفتح نافذة تعديل الحالات الجماعي */
.term-bulk{
  display:inline-flex; align-items:center; gap:6px; font-family:inherit;
  font-size:12px; font-weight:700; cursor:pointer; border-radius:999px; padding:4px 12px;
  background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok-ink);
  border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  transition:background .15s ease, border-color .15s ease;
}
.term-bulk:hover{background:color-mix(in srgb, var(--ok) 20%, transparent); border-color:color-mix(in srgb, var(--ok) 45%, transparent)}

/* النافذة عمود flex: الرأس/البحث/التذييل ثابتة، والقائمة وحدها تتمرّر (تمرير واحد لا متداخل) */
.bulk-modal{
  width:min(640px, 100%);
  display:flex; flex-direction:column; overflow:hidden;
}
.bulk-modal .m-head, .bulk-search, .bulk-foot{flex:none}
.bulk-search{
  display:flex; align-items:center; gap:8px; margin-top:16px;
  background:var(--surface2); border:1px solid var(--border-strong); border-radius:12px;
  padding:0 12px; height:42px; color:var(--muted);
}
.bulk-search input{border:none; outline:none; background:transparent; color:var(--text); font-family:inherit; font-size:14px; width:100%}
.bulk-list{margin-top:14px; flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px}
/* زر «اجتياز الفصل بالكامل» (issue #56) — أعلى قائمة مقررات الفصل الحالي، بلون الإنجاز نفسه */
.bulk-pass{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  padding:11px 16px; border-radius:14px;
  background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok-ink);
  border:1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  transition:background .15s ease, border-color .15s ease;
}
.bulk-pass:hover{background:color-mix(in srgb, var(--ok) 20%, transparent); border-color:color-mix(in srgb, var(--ok) 48%, transparent)}
/* flex:none حتى لا تنكمش بطاقات الأترام لتتّسع في القائمة (فيُضغط المحتوى ويتعطّل التمرير) */
.bulk-term{flex:none; border:1px solid var(--border); border-radius:14px; overflow:hidden}
.bulk-term-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:var(--surface2); border-bottom:1px solid var(--border);
}
.bulk-term-toggle{
  display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px;
  background:none; border:none; color:var(--text); font-family:inherit; padding:0;
}
.bulk-term-toggle .t-id{color:var(--muted); font-weight:500; font-size:.9em}
.bulk-term-n{font-size:12px; font-weight:700; color:var(--muted); direction:ltr}
.bulk-term-courses{display:flex; flex-direction:column}
.bulk-course{
  display:grid; grid-template-columns:26px 76px 1fr auto; align-items:center; gap:10px;
  padding:9px 14px; border-top:1px solid var(--border);
}
.bulk-course:first-child{border-top:none}
.bulk-course.hidden{display:none}
.bulk-course.off{opacity:.5}
.bulk-chk{background:none; border:none; padding:0; cursor:pointer; display:grid; place-items:center}
.c-check-box{
  width:20px; height:20px; border-radius:6px; display:grid; place-items:center; flex:none;
  border:1.5px solid var(--border-strong); color:#fff; font-weight:700;
  transition:background .15s ease, border-color .15s ease;
}
.bulk-course:not(.off) .bulk-chk .c-check-box{background:var(--primary); border-color:var(--primary)}
.bulk-c-code{font-size:12px; font-weight:700; color:var(--muted); direction:ltr; text-align:right}
.bulk-c-name{font-size:13.5px; font-weight:600; min-width:0}
.bulk-c-h{font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap}
/* الخطوة 2: صف بلا مربع اختيار، وبمقطع حالة رباعي (قيد الدراسة/مؤجل/منجز/لم تبدأ — issue #52) */
.bulk-course-seg{grid-template-columns:76px 1fr auto}
.bulk-seg-group{display:inline-flex; border:1px solid var(--border-strong); border-radius:10px; overflow:hidden}
.bulk-seg{
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  padding:5px 11px; background:transparent; color:var(--muted); border:none;
  border-inline-start:1px solid var(--border-strong);
  transition:background .15s ease, color .15s ease;
}
.bulk-seg:first-child{border-inline-start:none}
.bulk-seg:hover{background:var(--surface2)}
.bulk-seg.on{background:var(--primary); color:#fff}
/* عدّاد الخطوات في رأس النافذة */
.bulk-steps{display:flex; align-items:center; gap:8px; margin-top:14px}
.bulk-step{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:999px; padding:4px 12px;
}
.bulk-step.active{color:#fff; background:var(--primary); border-color:var(--primary)}
.bulk-step.done{color:var(--ok-ink); border-color:color-mix(in srgb, var(--ok) 35%, transparent)}
.bulk-step-sep{flex:1; height:1px; background:var(--border-strong); max-width:40px}
.bulk-note{
  margin-top:14px; font-size:12.5px; line-height:1.8; color:var(--muted);
  background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:9px 13px;
}
.bulk-note b{color:var(--brand-ink)}
.bulk-confirm{padding:6px 2px}
.bulk-confirm-h{display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:var(--warn-ink); margin-bottom:10px}
.bulk-confirm p{margin:0 0 10px; font-size:13.5px; line-height:1.9}
.bulk-confirm-list{margin:0 0 12px; padding-inline-start:18px; display:flex; flex-direction:column; gap:7px; font-size:13px; line-height:1.8}
.bulk-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--border);
}
.bulk-count{font-size:13px; font-weight:700; color:var(--brand-ink)}
.bulk-foot .btn-primary{margin-inline-start:auto}
.c-code{font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.2px; direction:ltr; text-align:right}
.c-main{min-width:0}
.c-name{font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.name-en{color:var(--muted); font-weight:500; font-size:.88em}
.c-sub{font-size:11.5px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; line-height:1.7}
.c-flag{color:var(--warn-ink); font-weight:600}
.pr-chip{
  display:inline-flex; align-items:center; gap:4px; direction:ltr;
  background:var(--surface2); border:1px solid var(--border); border-radius:7px;
  padding:1px 7px; font-size:11px; font-weight:600; cursor:pointer; color:var(--text);
  transition:border-color .15s ease, background .15s ease;
}
.pr-chip:hover{border-color:var(--interactive); background:color-mix(in srgb, var(--interactive) 8%, transparent)}
/* رقاقة متطلب متجاوَز: حدّ متقطّع يوحي برفع القيد، بلون التمييز نفسه */
.pr-chip.is-ov{
  border-style:dashed;
  border-color:color-mix(in srgb, var(--pink) 45%, transparent);
  background:color-mix(in srgb, var(--pink) 7%, transparent);
}
.c-side{display:flex; align-items:center; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.c-hours{font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap}

.badge{font-size:11px; font-weight:700; padding:2.5px 10px; border-radius:999px; white-space:nowrap}
.b-core{background:color-mix(in srgb, var(--interactive) 12%, transparent); color:var(--brand-ink)}
.b-uni{background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn-ink)}
.b-free{background:color-mix(in srgb, var(--info) 13%, transparent); color:var(--info-ink)}
.b-elec{background:color-mix(in srgb, var(--interactive) 10%, transparent); color:var(--accent-ink)}
.b-grad{background:color-mix(in srgb, var(--pink) 12%, transparent); color:var(--pink-ink)}
.b-coop{background:color-mix(in srgb, var(--ok) 13%, transparent); color:var(--ok-ink)}
.b-ai{background:color-mix(in srgb, var(--interactive) 90%, transparent); color:#fff}

.st-pill{font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px; border:1px solid transparent; white-space:nowrap}
.st-done{background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok-ink); border-color:color-mix(in srgb, var(--ok) 25%, transparent)}
.st-current{background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
.st-pending{background:var(--surface2); color:var(--muted); border-color:var(--border)}
.st-deferred{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn-ink); border-color:color-mix(in srgb, var(--warn) 35%, transparent)}

.piv-chip{
  display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
  color:var(--pink-ink); background:color-mix(in srgb, var(--pink) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--pink) 28%, transparent);
  padding:2px 9px; border-radius:999px; white-space:nowrap;
}
.piv-chip .i{width:11px; height:11px}

.term-note{
  margin:8px 22px 16px; border-radius:12px; padding:10px 14px; font-size:12.5px; line-height:1.9;
  background:var(--surface2); border:1px solid var(--border); color:var(--muted);
  display:flex; gap:9px; align-items:flex-start;
}
.term-note .i{margin-top:3px}
.term-note.warn{
  background:color-mix(in srgb, var(--danger) 7%, transparent);
  border-color:color-mix(in srgb, var(--danger) 24%, transparent); color:var(--danger-ink);
}
.empty-term{padding:14px 22px 18px; font-size:13px; color:var(--muted); border-top:1px solid var(--border)}
.b-other{background:var(--surface2); color:var(--muted); border:1px solid var(--border)}

/* تقرير الاستخراج */
details.report{margin:0 0 6px}
details.report summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; font-weight:700}
details.report summary::-webkit-details-marker{display:none}
details.report ul{margin:10px 0 2px; padding-inline-start:20px; display:flex; flex-direction:column; gap:4px; font-weight:500}
details.report summary .term-sub{font-weight:400}

/* فشل التحليل */
.an-steps li.fail{color:var(--danger-ink); font-weight:600}
.an-steps li.fail .dot{border-color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent)}
.an-error{
  margin-top:16px; border-radius:12px; padding:11px 14px; font-size:13px; line-height:1.9;
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 28%, transparent); color:var(--danger-ink);
}

/* سجل الخطط الفارغ */
.ready-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:22px 14px; border:1.5px dashed var(--border-strong); border-radius:14px; color:var(--muted);
}
.ready-empty .i{width:30px; height:30px; color:var(--brand-ink); opacity:.7}
.ready-empty p{margin:0; font-size:13px; line-height:2}
.ready-empty b{color:var(--text)}

/* لافتة الاحتياطي المحلي (issue #121) — تظهر فقط حين يتعذّر Supabase، فتُعلن أن القائمة
   منقوصة بدل أن يظنّ الطالب أن تخصصه غير مدعوم. ثابتة لا عابرة: القيد يدوم ما دام الانقطاع. */
.ready-fallback{
  display:flex; gap:8px; align-items:flex-start; margin:0 0 14px;
  font-size:12.5px; line-height:1.9; color:var(--warn-ink);
  background:color-mix(in srgb, var(--warn) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius:12px; padding:10px 13px;
}
.ready-fallback .i{margin-top:4px; flex:none; width:16px; height:16px; color:var(--warn-ink); opacity:1}
.ready-fallback b{color:var(--warn-ink); font-weight:700}

/* معلومات إضافية داخل نافذة المادة */
.kv{display:flex; justify-content:space-between; gap:14px; font-size:12.5px; padding:7px 2px; border-bottom:1px dashed var(--border)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted); flex:none}

/* تمييز البحث */
.course.match{background:color-mix(in srgb, var(--accent) 10%, transparent); box-shadow:inset 3px 0 0 var(--accent)}
.course.dimmed{opacity:.35}
@keyframes flashPulse{0%,100%{box-shadow:inset 3px 0 0 var(--accent)} 50%{box-shadow:inset 3px 0 0 var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent)}}
.course.flash{animation:flashPulse 1s ease 2}
/* مقرر placeholder (خانة اختيار عامة UNIV-/FREE-/ELEC-) — يُعرض بشكل خافت */
.course.is-placeholder{opacity:.62; border-style:dashed}
.course.is-placeholder .ph-tag{display:inline-block; margin-inline-start:6px; font-size:10.5px; font-weight:700; color:var(--muted); background:var(--surface2); border:1px dashed var(--border-strong); border-radius:6px; padding:1px 6px; vertical-align:middle}

/* حزمة مُضافة (متطلب مرن يختاره الطالب) — بطاقة .course عادية بشارة مميزة */
.course.is-package{background:color-mix(in srgb, var(--info) 4%, transparent)}
.b-pkg{background:color-mix(in srgb, var(--info) 15%, transparent); color:var(--info-ink)}

/* نافذة سؤال المتطلبات الجامعية بعد «اجتياز الفصل بالكامل» (issue #56) */
.modal.termpkg-modal{width:min(440px, 100%); padding:24px}
.termpkg-modal .m-head{align-items:flex-start}
.termpkg-modal .m-title{font-size:16.5px; line-height:1.7; margin:0}

/* نافذة تأكيد «إعادة تعيين الخطة» (issue #63) */
.modal.confirm-modal{width:min(440px, 100%); padding:24px}
.confirm-foot{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border)}

/* زر «+ إضافة متطلب» في نهاية بطاقة الترم — يوجّه لصفحة المقررات غير الأساسية (issue #92) */
.pkg-adder{padding:12px 22px}

/* ===================== صفحة المقررات غير الأساسية (issue #92) ===================== */
/* مساحة سفلية بقدر شريط التأكيد الثابت حتى لا يغطّي آخر بطاقة */
#viewNonCore{padding-bottom:96px}
.nc-intro{
  margin:6px 0 16px; font-size:13.5px; line-height:2; color:var(--muted);
  background:var(--surface2); border:1px solid var(--border);
  border-radius:14px; padding:14px 18px;
}
.nc-summary{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.nc-packages{display:flex; flex-direction:column; gap:18px}

.nc-pkg{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden; padding:0 0 6px;
  transition:opacity .25s ease, box-shadow .25s ease;
}
/* الحزمة المكتملة تنزل لأسفل الصفحة وتخفت — تنظيم بصري، لا حذف */
.nc-pkg.is-complete{opacity:.72}
.nc-pkg.is-complete:hover{opacity:1}
.nc-pkg-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px 10px; flex-wrap:wrap;
}
.nc-pkg-title{margin:0; font-size:16.5px; font-weight:700}
.nc-pkg-rule{font-size:12.5px; font-weight:600; color:var(--accent-ink); margin-top:3px}
.nc-pkg-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.nc-pkg-prog{margin:0 22px 4px}
.nc-pkg-note{
  margin:8px 22px 4px; font-size:12.5px; line-height:1.9; color:var(--muted);
  display:flex; gap:8px; align-items:flex-start;
}
.nc-pkg-note .i{margin-top:3px; flex:none}
.nc-courses{padding:6px 0 0}
.nc-subgroup-title{
  margin:0; padding:10px 22px 4px; font-size:11.5px; font-weight:800; color:var(--muted);
  letter-spacing:.02em; border-top:1px solid var(--border);
}
.nc-subgroup-title:first-child{border-top:none; padding-top:0}
.nc-subgroup-title + .nc-course{border-top:none}

.nc-course{
  display:grid; grid-template-columns:22px 78px 1fr auto; align-items:center; gap:12px;
  padding:11px 22px; border-top:1px solid var(--border); cursor:pointer;
  transition:background .18s ease, opacity .18s ease;
}
.nc-course:hover{background:color-mix(in srgb, var(--interactive) 5%, transparent)}
.nc-course.is-on{background:color-mix(in srgb, var(--ok) 7%, transparent)}
.nc-course.is-on .c-check-box{background:var(--ok); border-color:var(--ok)}
/* غير المتاح (متطلب سابق ناقص) أو المقفول باكتمال الحزمة: التعتيم إشارة بصرية فقط (issue #176).
   الصف يبقى قابلاً للضغط لفتح التفاصيل كغيره، والمنع على مربع الاختيار وحده */
.nc-course.is-off{opacity:.55}
.nc-course.is-off .nc-check{cursor:not-allowed}

/* مربع الاختيار زر مستقل عن الصف (issue #176): الصف يفتح التفاصيل، والمربع وحده يبدّل التحديد.
   منطقة الاستجابة 44×44 (‎::before‎) أوسع من المربع المرئي (20px) ولا تغيّر التخطيط. تمتد ‎11px‎
   في كل اتجاه: في هامش الصف (22px) والفجوة (12px) فقط، فلا تغطي الرمز ولا الاسم. على الجوال
   يمتد المربع بطول الصف كاملاً لنفس السبب (responsive.css)، وفحص المتصفح يقيس ذلك. */
.nc-check{
  position:relative; display:grid; place-items:center; width:22px; height:22px;
  margin:0; padding:0; border:0; border-radius:7px; background:none; color:inherit; cursor:pointer;
}
.nc-check::before{content:""; position:absolute; inset:-11px}   /* بلا border-radius: يقصّ منطقة الاستجابة نفسها */
.nc-check:hover .c-check-box{border-color:var(--interactive)}
.nc-course.is-off .nc-check:hover .c-check-box{border-color:var(--border-strong)}
.nc-check:focus-visible{outline:2px solid var(--ring); outline-offset:1px}
/* الاسم زر «عرض التفاصيل» لمستخدم لوحة المفاتيح وقارئ الشاشة؛ بالفأرة يكفي الصف كله */
.nc-c-name{
  margin:0; padding:0; border:0; background:none; color:inherit; font:inherit;
  text-align:start; cursor:pointer; border-radius:4px;
}
.nc-course:hover .nc-c-name{text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:4px}
.nc-c-name:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
/* رموز هذه المقررات عربية (قرا1001) بخلاف رموز المسار اللاتينية (CS1111) — plaintext يترك
   اتجاه كل رمز يُشتق من أول حرف قوي فيه، فيُعرض النوعان صحيحين بلا قاعدتين منفصلتين */
.nc-c-code{font-size:12px; font-weight:700; color:var(--muted); unicode-bidi:plaintext; text-align:start}
.nc-c-name{font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.nc-c-main{min-width:0}
.nc-c-h{font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap}
.nc-lock{
  display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
  color:var(--warn-ink); background:color-mix(in srgb, var(--warn) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius:999px; padding:1px 8px; white-space:nowrap;
}
.nc-lock .i{width:11px; height:11px}

/* شريط التأكيد الثابت أسفل الصفحة */
.nc-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:60;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--border-strong); box-shadow:var(--shadow-lift);
}
.nc-bar-row{display:flex; align-items:center; gap:12px; padding-top:12px; padding-bottom:12px}
.nc-bar-info{flex:1; font-size:13px; font-weight:600; color:var(--muted); min-width:0}
.nc-bar .btn:disabled{opacity:.5; cursor:not-allowed}
.nc-done-opt{
  display:flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--text);
  padding:8px 12px; border:1px solid var(--border-strong); border-radius:10px;
  background:var(--surface2);
}
.nc-done-opt input{accent-color:var(--brand-ink); width:15px; height:15px; cursor:pointer}
.nc-done-opt:has(input:checked){
  border-color:color-mix(in srgb, var(--ok) 55%, var(--border-strong));
  background:color-mix(in srgb, var(--ok) 10%, var(--surface2));
}

/* ===================== النوافذ المنبثقة ===================== */
.modal-ov{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:rgba(15,25,21,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.modal-ov.open{opacity:1; pointer-events:auto}
.modal{
  width:min(600px, 100%); max-height:min(84vh, 720px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:20px;
  box-shadow:var(--shadow-lift); padding:26px;
  transform:translateY(14px) scale(.98); transition:transform .22s cubic-bezier(.22,.9,.36,1);
}
.modal-ov.open .modal{transform:none}
.m-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.m-code{font-size:12.5px; font-weight:700; color:var(--muted); direction:ltr; text-align:right; display:block}
.m-title{margin:2px 0 0; font-size:21px; font-weight:700; line-height:1.5}
.m-badges{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:10px}
.m-close{flex:none}
/* رأس النافذة صار يحمل زرّين (البلاغ + الإغلاق) — issue #110 */
.m-head-actions{display:flex; align-items:center; gap:4px; flex:none}
/* رمز المقرر غير الأساسي في النوافذ (issue #176) يُعرض كما في صف صفحته (‎.nc-c-code‎): رموزه
   عربية غالباً (عال1425)، فخط المونو بلا حروف عربية يقطّعها («عا ل1425»)، و‎direction:ltr‎
   يقلب ترتيبها. فيرث خط الصفحة ويُشتق اتجاهه من أول حرف فيه */
.m-code.nc-m-code{font-family:inherit; unicode-bidi:plaintext}
.m-note.nc-m-block{color:var(--warn-ink)}
.nc-m-actions{display:flex; gap:8px; flex-wrap:wrap}

/* ===================== بطاقة تحديثات الإصدار (issue #171) ===================== */
/* تُفتح عند الإقلاع، وقد تُفتح تحتها نافذة الأنبوردنق أو حسم التعارض (100) بعد رحلة شبكة،
   فتعلوها وتعلو نافذة البلاغ (112). وتبقى تحت الإشعارات (120) والجولة (150)، والجولة لا
   تبدأ قبل إغلاقها أصلاً. الترميز يبنيه src/releaseNotes.js، والألوان كلها tokens. */
#rnOv{z-index:114}
/* عمود flex بنفس نمط نافذة «تعديل»: الرأس وصف البلاغ والتذييل ثابتة، والقائمة وحدها
   تتمرّر، فيبقى «متابعة» ظاهراً على الجوال مهما طالت البنود */
.modal.rn-modal{width:min(480px, 100%); display:flex; flex-direction:column; overflow:hidden}
.rn-modal > :not(.rn-list){flex:none}
.rn-ver{
  display:inline-block; margin-bottom:4px; padding:2px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; color:var(--brand-ink);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
/* شريط التمرير رفيع بلون الحدود (لا الأبيض الافتراضي في الليلي)، ويسكن هامش النافذة
   بالهامش السالب فلا يلتصق بالبنود ولا يغيّر عرضها عن صف البلاغ تحتها */
.rn-list{
  list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;
  flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  margin-inline-end:-12px; padding-inline-end:12px;
  scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
}
.rn-item{
  padding:10px 14px; border-radius:14px;
  background:var(--surface2); border:1px solid var(--border);
}
/* نقطة «محطة» فيروزية قبل العنوان بدل شريط جانبي: الشريط الرفيع ينحني مع زاوية 14px */
.rn-item-title{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--text)}
.rn-item-title::before{
  content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.rn-item-body{margin:3px 0 0; padding-inline-start:16px; font-size:13px; line-height:1.8; color:var(--text)}
/* روابط البنود اختيارية في ملف الإصدار (v0.2.0 بلا روابط). نفس عقد الرابط النصّي في #165:
   نص ‎--brand-ink‎ (الفيروزي نصاً دون AA نهاراً)، وتسطير دائم وسهم ‎↗‎ بالفيروزي */
.rn-links{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; padding-inline-start:16px}
.rn-link{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:700; color:var(--brand-ink); border-radius:6px;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb, var(--accent-ink) 65%, transparent);
  transition:text-decoration-color .18s ease;
}
.rn-link:hover{text-decoration-color:currentColor; text-decoration-thickness:2px}
.rn-link:focus-visible{outline:2px solid var(--ring); outline-offset:3px}
.rn-link-arrow{display:inline-block; color:var(--accent-ink); transition:transform .18s ease}
.rn-link:hover .rn-link-arrow{transform:translate(2px, -2px)}
.rn-link bdi{font-family:var(--mono)}
/* صف البلاغ: الزر زر بلاغ عادي (data-fbopen) بمظهر حالة المرور لزر البلاغ في صف الدليل
   (#btnPlanFeedback): مثلث التحذير ولون ‎--danger-ink‎ ظاهران دائماً لا عند المرور فقط */
.rn-report{
  display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap;
  margin-top:12px; padding:10px 12px; border-radius:12px;
  border:1px dashed var(--border-strong);
}
.rn-report-text{flex:1 1 180px; margin:0; font-size:12.5px; line-height:1.8; color:var(--muted)}
.btn.rn-report-btn{
  flex:none; padding:6px 12px; font-size:12.5px; border-radius:10px;
  color:var(--danger-ink);
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  border-color:color-mix(in srgb, var(--danger) 26%, transparent);
}
.btn.rn-report-btn:hover{
  background:color-mix(in srgb, var(--danger) 14%, transparent);
  border-color:color-mix(in srgb, var(--danger) 42%, transparent);
}
.rn-report-btn:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
/* شريط العدّ للإخفاء التلقائي، وهو نفسه فاصل التذييل. يُفرَّغ باتجاه بداية السطر (يمين RTL)،
   ويختفي امتلاؤه عند أول تفاعل فيبقى فاصلاً فقط. المدة من AUTO_CLOSE_MS عبر --rn-ms */
.rn-timer{height:2px; margin-top:14px; border-radius:2px; background:var(--border); overflow:hidden}
.rn-timer i{
  display:block; height:100%; background:var(--accent);
  transform-origin:right center; transform:scaleX(0); transition:opacity .3s ease;
}
.rn-timer.run i{animation:rn-countdown var(--rn-ms, 15s) linear forwards}
.rn-timer.off i{opacity:0}
@keyframes rn-countdown{from{transform:scaleX(1)} to{transform:scaleX(0)}}
.rn-foot{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin-top:12px}
.rn-meta{font-size:11.5px; color:var(--muted)}
.rn-foot .btn{margin-inline-start:auto}
/* زر «التحديثات السابقة» (#193): آخر عنصر في البطاقة وفي منتصفها، زر حقيقي لا رابط نصّي،
   وهدف لمس 44px على الأقل. ثانوي (ghost) حتى لا ينافس «متابعة» */
.rn-history{display:flex; justify-content:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--border)}
.btn.rn-history-btn{min-height:44px; min-width:180px}
/* الإخفاء التلقائي أنعم وأبطأ من الإغلاق اليدوي (0.2s): تلاشٍ مع نزول خفيف */
#rnOv.rn-out{transition-duration:.6s}
#rnOv.rn-out .rn-modal{opacity:0; transform:translateY(10px) scale(.97); transition:transform .6s ease, opacity .6s ease}

/* ===================== البلاغات (issue #110) ===================== */
/* زر الإبلاغ: أيقونة صغيرة محايدة (لا لون تحذير دائم) حتى لا تُقرأ كأن بالمقرر خطأ فعلاً،
   وتتلوّن بالأحمر عند المرور فقط لتوضيح وظيفتها. */
.fb-btn{
  flex:none; display:inline-grid; place-items:center; width:28px; height:28px;
  background:transparent; border:1px solid transparent; border-radius:9px;
  color:var(--muted); cursor:pointer; padding:0;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.fb-btn:hover, .fb-btn:focus-visible{
  color:var(--danger-ink);
  border-color:color-mix(in srgb, var(--danger) 35%, transparent);
  background:color-mix(in srgb, var(--danger) 7%, transparent);
}
/* تفتح فوق نافذة تفاصيل المقرر (100)، وتحت التوست (120) فتبقى رسالة النجاح مرئية */
#fbOv{z-index:112}
.fb-modal{width:min(520px, 100%)}
/* العنصر المُبلَّغ عنه: يبقى ظاهراً أعلى النافذة فلا يشك الطالب في أي مقرر يُبلِّغ */
.fb-target{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px;
  padding:11px 13px; border-radius:12px;
  background:var(--surface2); border:1px solid var(--border);
}
.fb-target-kind{font-size:11px; font-weight:700; color:var(--muted)}
.fb-ref{font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--text)}
.fb-name{font-size:13px; font-weight:600; color:var(--text)}
.fb-sec{margin-top:18px}
.fb-sec h4{margin:0 0 9px; font-size:13px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:7px}
.fb-req{font-size:10.5px; font-weight:700; color:var(--danger-ink)}
.fb-opt{font-size:10.5px; font-weight:600; color:var(--muted); opacity:.8}
.fb-cats{display:flex; flex-direction:column; gap:7px}
.fb-cat{
  display:flex; align-items:center; gap:9px; width:100%; text-align:start;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:12px;
  padding:11px 13px;
  transition:border-color .15s ease, background .15s ease;
}
.fb-cat:hover{border-color:var(--interactive)}
.fb-cat-dot{
  flex:none; width:15px; height:15px; border-radius:50%;
  border:2px solid var(--border-strong); transition:border-color .15s ease, box-shadow .15s ease;
}
.fb-cat.is-on{border-color:var(--interactive); background:color-mix(in srgb, var(--accent) 8%, transparent)}
.fb-cat.is-on .fb-cat-dot{border-color:var(--interactive); box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 9px var(--interactive)}
/* تصنيف لا ينطبق على الهدف الحالي (issue #130) — يبقى معروضاً فتظل قائمة الخيارات واحدة من
   كل زر، لكنه مطفأ بوضوح. لا cursor:not-allowed ولا pointer-events:none: الضغط عليه مقصود
   ويشرح للطالب ما ينقصه (تحديد المقرر) بدل أن يبتلع النقرة صامتاً. */
.fb-cat.is-off{opacity:.45; background:transparent; border-style:dashed; font-weight:500}
.fb-cat.is-off:hover{border-color:var(--border-strong)}
.fb-note{
  width:100%; font-family:inherit; font-size:13.5px; line-height:1.7; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:12px;
  padding:11px 13px; resize:vertical; min-height:76px;
}
.fb-note:focus{outline:none; border-color:var(--interactive); box-shadow:0 0 0 3px var(--ring)}
.fb-note::placeholder{color:var(--muted); opacity:.75}
/* §9: يُذكَّر الطالب صراحةً أن البلاغ يُراجع ولا يعدّل بيانات الخطة من تلقائه */
.fb-disclaimer{
  display:flex; align-items:flex-start; gap:7px; margin:16px 0 0;
  font-size:12px; line-height:1.65; color:var(--muted);
}
.fb-disclaimer .i{flex:none; margin-top:3px}
.fb-foot{display:flex; gap:9px; margin-top:18px}
.fb-foot .btn{flex:1}
.m-sec{margin-top:20px; padding-top:16px; border-top:1px solid var(--border)}
.m-sec h4{margin:0 0 10px; font-size:13px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:7px}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.mini-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  background:var(--surface2); border:1px solid var(--border-strong); border-radius:10px;
  padding:5px 11px; cursor:pointer; color:var(--text); transition:border-color .15s ease, background .15s ease;
  /* رقاقة باسم مقرر طويل تلتف داخل النافذة بدل أن تتجاوز حدّها */
  max-width:100%; text-align:start;
}
.mini-chip:hover{border-color:var(--interactive)}
.mini-chip .cc{direction:ltr; color:var(--muted); font-size:11px; font-weight:700}

/* مقرر اختياري ضمن «مقررات تعتمد عليها لاحقاً» (Issue #137): نفس القائمة، بوسم يميّزه.
   غير قابل للنقر — لا موضع له في شبكة المسار ليُقفز إليه، فيُلغى مؤشر اليد وأثر المرور. */
.mini-chip.is-nc{
  cursor:default; border-style:dashed;
  background:color-mix(in srgb, var(--accent) 7%, var(--surface2));
}
.mini-chip.is-nc:hover{border-color:var(--border-strong)}
.nc-tag{
  flex:none; font-size:10px; font-weight:700; padding:1.5px 7px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent-ink);
}

/* ---- تجاوز متطلب سابق (issue #37) ---- */
/* كل متطلب في نافذة التفاصيل يصير زوجاً: رقاقة المقرر + زر التجاوز الخاص به وحده */
.chips-pr{flex-direction:column; align-items:stretch; gap:8px}
.pr-pair{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px; border-radius:12px; border:1px solid transparent;
  transition:border-color .15s ease, background .15s ease;
}
.pr-pair.is-ov{
  border-style:dashed;
  border-color:color-mix(in srgb, var(--pink) 35%, transparent);
  background:color-mix(in srgb, var(--pink) 6%, transparent);
}
.pr-pair .mini-chip{flex:1; min-width:0}
.ov-btn{
  display:inline-flex; align-items:center; gap:5px; flex:none; white-space:nowrap;
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  border-radius:9px; padding:5px 10px;
  background:transparent; color:var(--muted);
  border:1px dashed var(--border-strong);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.ov-btn:hover{color:var(--pink-ink); border-color:color-mix(in srgb, var(--pink) 45%, transparent); background:color-mix(in srgb, var(--pink) 8%, transparent)}
.ov-btn.is-on{
  color:var(--pink-ink); border-style:solid;
  border-color:color-mix(in srgb, var(--pink) 40%, transparent);
  background:color-mix(in srgb, var(--pink) 10%, transparent);
}
.ov-btn.is-on:hover{background:color-mix(in srgb, var(--pink) 16%, transparent)}
.m-note-ov{color:var(--pink-ink)}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{
  border:1px solid var(--border-strong); background:var(--surface2); color:var(--muted);
  border-radius:10px; padding:7px 15px; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:all .15s ease;
}
.seg button:hover{border-color:var(--interactive); color:var(--text)}
.seg button.active{background:var(--primary); border-color:var(--primary); color:#fff}
.piv-box{
  background:color-mix(in srgb, var(--pink) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--pink) 22%, transparent);
  border-radius:14px; padding:14px 16px; font-size:13px; line-height:2;
}
.piv-box b{color:var(--pink-ink)}
.piv-num{display:flex; gap:18px; margin:8px 0}
.piv-num > div{text-align:center}
.piv-num .n{font-size:22px; font-weight:700; color:var(--pink-ink)}
.piv-num .l{font-size:11px; color:var(--muted)}
.m-note{font-size:12px; color:var(--muted); margin-top:8px; line-height:1.9}

/* ===================== خيارات الطباعة (issue #134) ===================== */
/* النافذة تعيد استخدام أقسام نافذة البلاغ (fb-sec / fb-foot / fb-disclaimer) عمداً: نفس
   العنوان الصغير ونفس التذييل ونفس المسافات، فلا لغة بصرية ثانية للنوافذ في التطبيق. */
.pr-modal{width:min(560px, 100%)}
.pr-fields{display:flex; gap:10px; flex-wrap:wrap}
.pr-field{
  flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:5px;
  font-size:11.5px; font-weight:700; color:var(--muted);
}
.pr-field input{
  width:100%; font-family:inherit; font-size:13.5px; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:12px;
  padding:10px 13px;
}
.pr-field input:focus{outline:none; border-color:var(--interactive); box-shadow:0 0 0 3px var(--ring)}
.pr-field input::placeholder{color:var(--muted); opacity:.7; font-weight:400}
.pr-opts{display:flex; flex-direction:column; gap:7px}
.pr-opt{
  display:flex; align-items:flex-start; gap:9px; width:100%; text-align:start;
  font-family:inherit; color:var(--text); cursor:pointer;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:12px;
  padding:10px 13px;
  transition:border-color .15s ease, background .15s ease;
}
.pr-opt:hover{border-color:var(--interactive)}
.pr-opt.is-on{border-color:var(--interactive); background:color-mix(in srgb, var(--accent) 8%, transparent)}
.pr-box{
  flex:none; width:17px; height:17px; margin-top:2px; border-radius:6px;
  border:2px solid var(--border-strong); display:grid; place-items:center;
  font-size:11px; font-weight:700; line-height:1; color:#fff;
  transition:background .15s ease, border-color .15s ease;
}
.pr-opt.is-on .pr-box{background:var(--interactive); border-color:var(--interactive)}
.pr-opt-main{display:flex; flex-direction:column; gap:2px; min-width:0}
.pr-opt-label{font-size:13.5px; font-weight:600; line-height:1.5}
.pr-opt .c-sub{margin-top:0}
/* بنود الحزم تحت بندها الأب: إزاحة داخلية وخلفية أهدأ تُظهران التبعية بلا إطار ثانٍ حولها.
   عدد البنود يختلف بين خطة وأخرى (تُبنى من بيانات الخطة) فلا ارتفاع مفترض هنا. */
.pr-subs{display:flex; flex-direction:column; gap:6px; margin-top:7px; padding-inline-start:16px}
.pr-sub{padding:8px 12px; background:var(--surface2)}
.pr-sub .pr-opt-label{font-size:12.5px}
/* الأب مطفأ ⇒ بنوده لن تُطبع مهما كانت مُعلَّمة، فتُطفأ بصرياً حتى لا تَعِد بما لا يحدث.
   لا pointer-events:none: الضغط على بند هنا مقصود ويُشعل الأب معه (نفس مبدأ .fb-cat.is-off). */
.pr-subs.is-off{opacity:.45}

/* ===================== توست وتذييل ===================== */
.toast{
  position:fixed; bottom:26px; inset-inline:0; margin-inline:auto; width:fit-content; max-width:88vw;
  background:var(--text); color:var(--bg); font-size:13.5px; font-weight:600;
  padding:11px 20px; border-radius:999px; box-shadow:var(--shadow-lift); z-index:120;
  opacity:0; transform:translateY(10px); transition:all .25s ease; pointer-events:none; text-align:center;
}
.toast.show{opacity:1; transform:none}
.toast.toast-undo{pointer-events:auto}
.toast-undo-btn{
  background:none; border:none; padding:0; margin:0; font:inherit; font-weight:700;
  color:inherit; text-decoration:underline; cursor:pointer;
}
.toast-undo-label{margin-inline-end:12px}
.footer{border-top:1px solid var(--border); padding:26px 0 34px; color:var(--muted); font-size:12.5px}
.footer b{color:var(--brand-ink)}

.footer-grid{
  display:grid; grid-template-columns:1fr auto 1fr;
  grid-template-areas:"feedback brand linkedin";
  align-items:start; gap:20px 28px;
}
.footer-col{display:flex; flex-direction:column; gap:6px}
/* بلا justify-self ينكمش العمود الأخير من الشبكة (linkedin) لعرض مساره الكامل، فيحاذي
   النص افتراضياً (text-align:start) حافته الداخلية الملاصقة لعمود مساري — لا الحافة
   الخارجية الفعلية لليسار؛ end (=يسار في RTL) يدفع الصندوق نفسه للحافة الخارجية فيظهر الفراغ
   الحقيقي بينه وبين المنتصف بدل أن يذهب هدراً عند حافة الصفحة */
.footer-col-linkedin{grid-area:linkedin; justify-self:end}
.footer-col-brand{grid-area:brand; text-align:center}
/* الحلقة نفسها التي في .brand-badge (issue #203): تحدّ المربع ليلاً حيث يقترب من خلفية التذييل */
.footer-logo{display:block; width:44px; height:44px; margin:0 auto 10px; border-radius:21.875%; box-shadow:0 0 0 1px var(--border-strong)}
.footer-col-feedback{grid-area:feedback}

.footer-col-title{font-weight:700; color:var(--text); font-size:13px}
/* عنوان LinkedIn لاتيني — text-align:start الافتراضي (يمين RTL) لا يطابق بداية النص أسفله،
   لأن السهم يسبق النص في الرابط فيلتصق النص بالحافة اليسرى للصندوق (لا فراغ فائض
   ليُوزَّع بـ justify-content). محاذاة العنوان يساراً يطابقه على نفس الحافة تماماً */
.footer-col-linkedin .footer-col-title{text-align:left}
.footer-card{display:flex; flex-direction:column; gap:4px}

/* روابط التذييل = ‎.link-cta‎ بمقاس التذييل. كانت تكرّر نمطها بنفسها قبل issue #165، وكان
   نصّها بالفيروزي (3.92:1 نهاراً — دون AA)؛ الآن ترث اللون والتسطير والسهم والوزن
   من الصنف المركزي، ولا يبقى هنا إلا تضامّ الفجوة قليلاً لمقاس التذييل. */
.footer-link{gap:5px}

.footer-tg-icon{transition:transform .2s ease}
.footer-link-telegram:hover .footer-tg-icon{transform:translate(2px, -2px) rotate(6deg)}

/* رابط صفحة «شكر خاص» — العمود عمودي (flex) فلا يمركزه ‎text-align‎ الموروث، والهامش
   العلوي يبقى كما كان (‎gap:6px‎ للعمود + 8px هنا) فلا يتغيّر إيقاع التذييل الرأسي */
.footer-thanks{margin-top:8px; margin-inline:auto}

/* رابط «التحديثات» الدائم (issue #191) — صنف خاص لا محدِّد عام على عناصر التذييل (درس #174).
   ارتفاع 44px منطقة لمس، والتمركز بالهامش كـ‎.footer-thanks‎ لأن العمود flex عمودي.
   ‎.footer-solo‎ تذييل الصفحات الفرعية (thanks/updates) وفيه هذا الرابط وحده. */
.footer-updates{min-height:44px; margin-inline:auto}
.footer-solo{display:flex; justify-content:center}

.footer-note{margin:0}

/* شاشة التحليل */
.analyze{
  position:fixed; inset:0; z-index:110; display:grid; place-items:center;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.analyze.open{opacity:1; pointer-events:auto}
.an-card{background:var(--surface); border:1px solid var(--border-strong); border-radius:20px; padding:30px 36px; box-shadow:var(--shadow-lift); width:min(420px, 90vw)}
.an-card h3{margin:0 0 18px; font-size:17px; font-weight:700; display:flex; align-items:center; gap:10px; color:var(--brand-ink)}
/* الانتظار = الخط ينرسم والمحطات تنوّر — لا سبينر عام أبدًا (قاعدة الهوية) */
.an-path{flex:none}
.an-path .msr-line{stroke-dasharray:70; stroke-dashoffset:70; animation:msr-draw 1.2s cubic-bezier(.65,0,.25,1) infinite}
@keyframes msr-draw{to{stroke-dashoffset:0}}
.an-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.an-steps li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted); transition:color .3s ease}
.an-steps li .dot{width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); display:grid; place-items:center; flex:none; transition:all .3s ease; color:transparent}
.an-steps li .dot .i{width:10px; height:10px; stroke-width:3.5}
.an-steps li.doing{color:var(--text); font-weight:600}
.an-steps li.doing .dot{border-color:var(--interactive); box-shadow:0 0 0 4px color-mix(in srgb, var(--interactive) 14%, transparent)}
.an-steps li.done{color:var(--ok-ink)}
.an-steps li.done .dot{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok-ink)}

/* ===================== خارطة المتطلبات (Issue #9) ===================== */
/* لوحة كاملة فوق الصفحة: الفصول صفوف (bands) والتمرير عمودي فقط،
   والحواف خطوط تهبط من المتطلب إلى المقرر المعتمد عليه.
   كل الألوان من tokens الهوية حصراً — لا hex ثابت هنا (قاعدة الوضعين). */
.pmap-ov{
  position:fixed; inset:0; z-index:105; display:grid; place-items:center; padding:18px;
  background:color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.pmap-ov.open{opacity:1; pointer-events:auto}
.pmap{
  width:min(1100px, 100%); height:min(100%, 860px); display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--border-strong); border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-lift);
  transform:translateY(16px) scale(.985); transition:transform .24s cubic-bezier(.22,.9,.36,1);
}
.pmap-ov.open .pmap{transform:none}
.pmap-head{display:flex; align-items:flex-start; gap:10px; padding:14px 20px 12px; border-bottom:1px solid var(--border); background:var(--surface)}
.pmap-title{flex:1; min-width:0}
.pmap-title h3{margin:0; font-size:16.5px; font-weight:700; color:var(--brand-ink); display:flex; align-items:center; gap:9px}
.pmap-hint{
  margin:3px 0 0; font-size:11.5px; color:var(--muted); line-height:1.8;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pmap-hint b{color:var(--text)}
.pmap-crit{padding:7px 13px; font-size:12px; flex:none}
.pmap-crit.active{background:var(--primary); border-color:var(--primary); color:#fff}
.pmap-crit-n{font-family:var(--mono); font-size:11px; font-weight:700; background:color-mix(in srgb, currentColor 14%, transparent); border-radius:999px; padding:0 7px}
/* scrollbar-gutter يثبّت clientWidth سواء ظهر شريط التمرير أم لا،
   فلا يُبنى الـ SVG بعرض أكبر من الحاوية عند ظهور الشريط لاحقاً */
.pmap-body{flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; overscroll-behavior:contain; padding:6px 0 18px}
.pmap-body svg{display:block}

/* شريط الفصل (band) — تلوين خفيف بحسب نوعه، بنفس دلالات chips الفصول */
.pm-band{fill:color-mix(in srgb, var(--surface) 72%, transparent); stroke:var(--border)}
.pm-band.k-past{fill:color-mix(in srgb, var(--ok) 5%, transparent)}
.pm-band.k-current{fill:color-mix(in srgb, var(--accent) 6%, transparent); stroke:color-mix(in srgb, var(--accent) 45%, transparent)}
.pm-band.k-summer{fill:color-mix(in srgb, var(--warn) 6%, transparent)}
.pm-band.k-grad{fill:color-mix(in srgb, var(--pink) 5%, transparent)}
.pm-band.k-nc{fill:color-mix(in srgb, var(--accent) 4%, transparent); stroke-dasharray:6 4}
.pm-band.k-unplaced{fill:color-mix(in srgb, var(--danger) 5%, transparent); stroke:color-mix(in srgb, var(--danger) 30%, transparent)}
.pm-rowlab{font-size:11.5px; font-weight:700; fill:var(--muted)}
.pm-rowsub{font-family:var(--mono); font-size:10.5px; font-weight:600; fill:var(--muted); opacity:.85}

/* الهوية اللونية للسلاسل: 6 فئات من ثلاث درجات باردة متجاورة (issue #211) — currentColor يسري
   على الحافة والعقدة. لا ألوان حالة ولا الوردي هنا: الوردي حكر على شارة المحوري (.pm-piv).
   الفئات المتتالية تختلف في الدرجة، والإضاءة الثانية تكمل الست بلا لون جديد. */
.pm-c0{color:var(--pm-teal)}
.pm-c1{color:var(--pm-blue)}
.pm-c2{color:var(--pm-violet)}
.pm-c3{color:var(--pm-teal-2)}
.pm-c4{color:var(--pm-blue-2)}
.pm-c5{color:var(--pm-violet-2)}

.pm-e{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; opacity:.45; transition:opacity .18s ease, stroke-width .18s ease}
.pm-e.hl{opacity:1; stroke-width:2.6}
.pm-focus .pm-e:not(.hl){opacity:.05}
/* التدفق المتحرك على السلسلة المُبرزة يوضّح اتجاه الاعتماد (من المتطلب نزولاً) */
.pm-focus .pm-e.hl{stroke-dasharray:6 9; animation:pmFlow .75s linear infinite}
@keyframes pmFlow{to{stroke-dashoffset:-15}}

.pm-n{cursor:pointer; outline:none; transition:opacity .18s ease; user-select:none; -webkit-user-select:none}
.pm-n .bx{fill:var(--surface); stroke:color-mix(in srgb, currentColor 45%, var(--border-strong)); stroke-width:1.2; transition:stroke .18s ease, stroke-width .18s ease}
.pm-n .bar{fill:currentColor; opacity:.9}
.pm-n .cd{font-family:var(--mono); font-size:11px; font-weight:700; fill:var(--text)}
.pm-n .nm{font-size:10px; fill:var(--muted)}
.pm-n:hover .bx, .pm-n:focus-visible .bx{stroke:currentColor; stroke-width:1.8}
.pm-n.hl .bx{stroke:currentColor; stroke-width:2}
.pm-n.hl{filter:drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent))}
.pm-n.is-ph .bx{stroke-dasharray:4 3}
/* مقرر اختياري (issue #211): حدّ متقطع وتعبئة فيروزية خفيفة كـ .mini-chip.is-nc، ووسم «اختياري».
   رموزه عربية غالباً وخط المونو بلا حروف عربية فيقطّعها (درس .nc-m-code)، فيرث خط الواجهة. */
.pm-n.is-nc .bx{stroke-dasharray:5 3; fill:color-mix(in srgb, var(--accent) 7%, var(--surface2))}
.pm-n.is-nc .cd{font-family:inherit}
.pm-nc-tag rect{fill:var(--surface); stroke:var(--border-strong); stroke-width:1}
.pm-nc-tag text{font-size:8.5px; font-weight:700; fill:var(--muted)}
.pm-focus .pm-n:not(.hl){opacity:.15}

/* شارة المقرر المحوري — وردية بنفس هوية piv-chip الحالية */
.pm-piv circle{fill:var(--surface); stroke:var(--pink-ink); stroke-width:1.5}
.pm-piv text{font-family:var(--mono); font-size:9px; font-weight:700; fill:var(--pink-ink)}

/* علامة اجتياز المقرر (✓) — نفس هوية mark-ok، لا تغيّر لون/تصميم العقدة نفسها */
.pm-done circle{fill:var(--surface); stroke:var(--ok-ink); stroke-width:1.5}
.pm-done text{font-family:var(--mono); font-size:10px; font-weight:700; fill:var(--ok-ink)}

/* حركة الدخول: العقد تصعد تدريجياً صفاً بعد صف (الحواف تُرسم برمجياً بطولها الفعلي) */
.pm-enter .pm-n{animation:pmNodeIn .5s cubic-bezier(.22,.9,.36,1) both; animation-delay:var(--d, 0ms)}
@keyframes pmNodeIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* على الجوال: اللوحة تملأ الشاشة بالكامل */
@media (max-width: 520px){
  .pmap-ov{padding:0}
  .pmap{width:100%; height:100%; border-radius:0; border:none}
  .pmap-head{padding:12px 14px 10px}
  /* زرّا الرأس (أطول سلسلة، الاختيارية — issue #211) سطرٌ ثانٍ تحت العنوان: بجواره كانا
     يعصرانه إلى عرض صفر على 360px. العنوان وزر الإغلاق يبقيان في السطر الأول. */
  .pmap-head{flex-wrap:wrap; row-gap:8px}
  .pmap-title{flex-basis:calc(100% - 52px)}
  .pmap-head > .icon-btn{order:1}
  .pmap-crit{order:2}
}

/* ===================== الحسابات (دخول Google) ===================== */
.auth-btn{padding:8px 14px; font-size:13px}
.auth-chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:999px;
  padding:4px 12px 4px 5px; color:var(--text); font-family:inherit; font-size:12.5px; font-weight:600;
}
.auth-chip:hover{background:var(--surface2)}
.auth-avatar{width:28px; height:28px; border-radius:50%; object-fit:cover; display:block}
.auth-avatar-fb{display:grid; place-items:center; background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--brand-ink)}
.auth-name{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.auth-menu{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:80; min-width:150px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:12px;
  box-shadow:var(--shadow-lift); padding:6px; 
}
.auth-menu-item{
  display:block; width:100%; text-align:start; background:none; border:none; cursor:pointer;
  color:var(--text); font-family:inherit; font-size:13px; font-weight:600;
  padding:8px 12px; border-radius:8px;
}
.auth-menu-item:hover{background:var(--surface2)}

/* ===================== الجولة التعريفية ===================== */
.tour-spot{
  position:fixed; z-index:150; pointer-events:none; border-radius:14px;
  /* القص حول الهدف: ظل ضخم يغطي بقية الشاشة */
  box-shadow:0 0 0 9999px color-mix(in srgb, var(--bg) 62%, transparent);
  border:2px solid var(--accent); transition:all .28s cubic-bezier(.22,.9,.36,1);
}
.tour-card{
  position:fixed; z-index:151; width:min(360px, calc(100vw - 24px));
  background:var(--surface); border:1px solid var(--border-strong); border-radius:16px;
  box-shadow:var(--shadow-lift); padding:16px 18px;
  transition:top .28s cubic-bezier(.22,.9,.36,1), left .28s cubic-bezier(.22,.9,.36,1);
}
/* ملاحقة هدف تحرّك تحت الجولة (#199): بلا انتقال، وإلا تأخر الإطار .28s خلف ما يحيط به */
.tour-spot.tour-follow, .tour-card.tour-follow{transition:none}
.tour-card-title{font-size:15px; font-weight:700; color:var(--brand-ink); margin-bottom:6px}
.tour-card-body{font-size:13px; line-height:1.9; color:var(--text)}
.tour-card-foot{display:flex; align-items:center; gap:10px; margin-top:14px}
.tour-skip{
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-family:inherit; font-size:12px; font-weight:600; padding:4px;
}
.tour-skip:hover{color:var(--danger-ink)}
.tour-dots{display:inline-flex; gap:5px; margin-inline:auto}
.tour-dots i{width:7px; height:7px; border-radius:50%; background:var(--border-strong)}
.tour-dots i.on{background:var(--accent); transform:scale(1.25)}
.tour-dots i.done{background:color-mix(in srgb, var(--accent) 45%, transparent)}
.tour-nav{display:inline-flex; gap:6px}
.tour-nav-btn{padding:6px 13px; font-size:12.5px}

/* ===================== Onboarding التعريف بالجامعة ===================== */
/* حقل نصي مشترك — نفس أساس .select بلا سهم القائمة */
.text-input{
  width:100%; background:var(--surface2); color:var(--text);
  border:1px solid var(--border-strong); border-radius:12px; padding:11px 14px;
  font-family:inherit; font-size:14px;
}
.text-input:focus{outline:2px solid var(--ring); outline-offset:1px}
.ob-modal{width:min(460px, 100%)}
.ob-form{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.ob-lbl{font-size:12.5px; font-weight:600; color:var(--muted)}
.ob-ready-note{
  font-size:13px; line-height:1.9; padding:10px 14px; border-radius:12px;
  background:color-mix(in srgb, var(--ok) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--ok) 30%, transparent); color:var(--ok-ink);
}
.ob-disc-text{font-size:13.5px; line-height:2.1; margin:12px 0 16px}

/* ---- حسم تعارض مزامنة التقدّم (Issue #127) ---- */
.sync-cards{display:flex; gap:10px; margin:16px 0 10px; flex-wrap:wrap}
.sync-card{
  flex:1 1 180px; display:flex; flex-direction:column; gap:6px; text-align:start;
  background:var(--surface2); border:1.5px solid var(--border-strong); border-radius:14px;
  padding:14px; cursor:pointer; font-family:inherit; color:var(--text);
  transition:border-color .15s ease, background .15s ease;
}
.sync-card:hover{border-color:var(--interactive); background:color-mix(in srgb, var(--interactive) 6%, var(--surface2))}
.sync-card:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.sync-card-h{font-size:13.5px; font-weight:700}
.sync-card-b{font-size:14px; color:var(--brand-ink); font-weight:700; line-height:1.9}
/* الطابع الزمني هو ما يوازن به الطالب بين النسختين قبل قرار لا رجعة فيه — فهو معلومة
   لا حاشية. كان 11px ثم 13px باهتاً وبقي غير واضح، فصار العنوان وحده صغيراً والتاريخ
   بحجم قابل للقراءة وبلون كامل التباين. */
.sync-card-f{display:flex; flex-direction:column; gap:1px; margin-top:4px}
.sync-at-lbl{font-size:11.5px; font-weight:600; color:var(--muted)}
.sync-card-f b{font-size:15.5px; font-weight:700; color:var(--text); line-height:1.6; letter-spacing:.2px}
.sync-note{font-size:12px; color:var(--muted); line-height:1.9; margin:0 0 12px}

/* ---- بوابة الدخول: أول ما يراه الزائر الجديد (دخول أو ضيف) ---- */
.gate-card{
  max-width:440px; margin-inline:auto; display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:28px 24px; box-shadow:var(--shadow-lift);
}
.gate-btn{width:100%; justify-content:center; font-size:14.5px; padding:13px 18px}
.gate-hint{margin:0 0 6px; font-size:12px; color:var(--muted); text-align:center; line-height:1.9}
.gate-or{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11.5px; font-weight:700; margin:4px 0}
.gate-or::before,.gate-or::after{content:''; flex:1; height:1px; background:var(--border)}
/* ---- «مقررات منجزة» مجمَّعة بفصولها + تراجع لكل فصل ---- */
.done-groups{display:flex; flex-direction:column; gap:14px}
.done-group + .done-group{border-top:1px dashed var(--border); padding-top:12px}
.done-group-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:2px 4px 8px; font-size:12.5px;
}
.done-group-title{font-weight:700; color:var(--text)}
.done-group-meta{color:var(--muted)}


/* وسم «(الحالي)» بجوار رقم الفصل — يقول للطالب أين هو الآن بلا مصطلح جديد */
.t-cur{
  font-size:12px; font-weight:700; color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  padding:2px 8px; border-radius:999px; margin-inline-start:6px; white-space:nowrap;
}