/* ═══════════════════════════════════════════════════════════════
   نِبراس — مكوّنات مشتركة (مصدر واحد لكل مكوّن بدل تفرّقه بين ملفات)
   ───────────────────────────────────────────────────────────────
   كل قواعد هذا الملف منقولة حرفياً (نفس النص، نفس الترتيب النسبي)
   من الملفات القديمة — بلا أي تغيير بالقيم أو الخصوصية (specificity)
   أو حالة @media، فالنتيجة المرئية مطابقة تماماً لما قبل النقل.
   الهدف: لو تبي تعدّل شكل مكوّن معيّن، تلقى كل قواعده هنا بمكان واحد.

   للتحقق بعد أي تعديل: node _test/visual-compare.js (اقرأ _test/README.md)

   ── الفهرس (بترتيب الأقسام أدناه) ──
   ١)  .btn-primary        زر الإجراء الأساسي (دخول / حفظ التقييمات)
   ٢)  .ctl-card           بطاقات الخطوات في شاشة بناء الخطة
   ٣)  .checkpoint         بطاقة نقطة الحفظ والطباعة وحالة .ready
   ٤)  .style-chooser و.preview-target   بطاقتا عمود المعاينة
   ٥)  .lvlhelp-card       بطاقات نافذة «كيف تختار المستوى؟»
   ٦)  .teacher-card       بطاقة اختيار معلم المادة وحالاتها
   ٧)  .td-option          خيار المعلم في القائمة المنسدلة
   ٨)  .date-input         حقل اختيار التاريخ وحالاته
   ٩)  .student-chk        بطاقة اختيار الطالب وحالاتها وألوان المستويات
   ١٠) .lv-btn             أزرار المستويات الثلاثة وحالاتها
   ١١) .cp-*               عناصر نقطة الحفظ الداخلية (حلقة/نص/أزرار/تلميح)
   ١٢) .ctl-h / .step-dot  ترويسة بطاقة الخطوة ونقطتها المرقّمة (✓ عند الاكتمال)
   ١٣) .empty-state        بطاقة «الحالة الفارغة» في شاشات السجل والتقييم
   ١٤) .sp-*               عائلة شاشة السجل: الترويسة والرجوع وعرض/طباعة وحذف
   ١٥) .subj-card          بطاقة المادة العامة (الشبكة/الأيقونة/الاسم/العدّاد)
   ١٦) .ev-*               أدوات شاشة التقييم: أزرار النتيجة وشرائح الطلاب ودروسها
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── .btn-primary ─────────────────────────
   كانت متفرقة بين: app.css, ui-polish.css, welcome.css, ui-vision.css,
   ui-refresh.css, luxe.css — بنفس الترتيب المنقول أدناه. */

/* من app.css (بلا شرط) */
.btn-primary { width: 100%; margin-top: 22px; padding: 15px; border: none; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; color: #fff; box-shadow: var(--sh-md); transition: transform 0.15s, box-shadow 0.15s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-glow); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
}

/* من ui-polish.css (بلا شرط) */
.btn-primary:active { transform: translateY(1px) scale(0.99); }

/* من welcome.css (بلا شرط) */
.ev-foot .btn-primary { width: auto; margin-top: 0; padding: 12px 26px; }

@media screen {
  /* من ui-vision.css — هنا قواعد .btn-primary فقط؛ رفقاء المجموعة الأصلية
     (.cp-save, .cp-print, .sp-open) باقون بقواعدهم في ملفاتهم، لأن نسخهم
     هنا (بملف يُحمَّل أخيراً) تغلب قواعد لاحقة لهم — مثل ذهبية .cp-print */
  .btn-primary { border: 0 !important; color: #fff !important; background: linear-gradient(135deg, #064f49 0%, var(--vision-brand) 48%, #2db7a8 100%) !important; }
  .btn-primary:hover { transform: translateY(-2px); }

  /* من ui-refresh.css */
  .btn-primary { background-image:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
      linear-gradient(135deg, var(--vision-brand) 0%, var(--vision-brand-2) 100%) !important; }
  #ev-body .ev-foot .btn-primary {
    width: auto;
    min-height: 46px;
    margin-top: 0;
    padding: 12px 24px;
    border-radius: 16px;
  }
  @media (max-width: 720px) {
    #ev-body .ev-foot .btn-primary {
      flex: 1;
      min-width: 190px;
      justify-content: center;
    }
  }

  /* من luxe.css */
  .btn-primary {
    position: relative; overflow: hidden;
    box-shadow: 0 12px 28px -10px rgba(8,63,58,.42) !important;
  }
  .btn-primary::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 46%);
  }
  .btn-primary:hover {
    box-shadow: 0 18px 36px -10px rgba(8,63,58,.5) !important;
  }
}

/* ───────────────────────── .ctl-card ─────────────────────────
   بطاقة الخطوة في شاشة «بناء الخطة» (معلم المادة / الدرس / المستوى /
   الطلاب / الإعدادات). كانت متفرقة بين: app.css, ui-polish.css,
   ui-vision.css, ui-refresh.css, luxe.css — بنفس الترتيب المنقول أدناه.
   ملاحظة: قاعدة «.step-card.filled» (حد وظل البطاقة المكتملة) منقولة هنا
   أيضاً لأن ترتيبها بعد قاعدة hover هو ما يجعلها تغلبه — كما في الأصل. */

/* من app.css (بلا شرط) */
.ctl-card {
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--sh-sm);
}
/* حُذفت قاعدة .ctl-card h3 — لا يوجد أي h3 داخل البطاقات في الكود كله */

/* من ui-polish.css */
@media (max-width: 640px) {
  .ctl-card { padding: 16px 14px; }
}

@media screen {
  /* من ui-vision.css */
  .ctl-card { border: 1px solid var(--vision-line) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .ctl-card { padding: 20px; }
  .ctl-card:hover { border-color: rgba(8,118,107,.18) !important; }
  .step-card.filled { border-color: rgba(8,118,107,.30) !important; box-shadow: 0 16px 42px rgba(8,118,107,.10) !important; }
  .ctl-card { border-radius: 28px !important; }
  .ctl-card::after {
    content: "";
    position: absolute;
    inset: auto -34px -52px auto;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: rgba(8,118,107,.055);
    pointer-events: none;
  }
  @media (max-width: 760px) {
    .ctl-card { padding: 16px; border-radius: 22px !important; }
  }
  .ctl-card { position: relative; border-color: rgba(136,164,154,.25) !important; background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,252,250,.88)) !important; }
  .ctl-card { overflow: hidden; }
  .ctl-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--card-accent, var(--vision-brand));
    opacity: .86;
    transform: scaleX(.22);
    transform-origin: right center;
    transition: transform .28s cubic-bezier(.16,1,.3,1);
  }
  .ctl-card:hover::before { transform: scaleX(1); }
  .ctl-card > * { position: relative; z-index: 1; }
  .ctl-card[data-fill="teacher"],
  .ctl-card:nth-of-type(1) { --card-accent: var(--vision-brand); }
  .ctl-card[data-fill="lesson"],
  .ctl-card:nth-of-type(2) { --card-accent: var(--vision-navy); }
  .ctl-card[data-fill="level"],
  .ctl-card:nth-of-type(3) { --card-accent: var(--vision-coral); }
  .ctl-card[data-fill="students"],
  .ctl-card:nth-of-type(4) { --card-accent: var(--vision-gold); }
  .home-settings-card { --card-accent: #8aa63d; }

  /* من luxe.css */
  .ctl-card {
    box-shadow: 0 2px 6px rgba(8,63,58,.06), 0 16px 38px -18px rgba(8,63,58,.20) !important;
  }
  .ctl-card:hover .ctl-h .t::before { transform: translateY(-2px) scale(1.03); }
}

/* ───────────────────────── .checkpoint ─────────────────────────
   بطاقة «نقطة الحفظ والطباعة» أسفل شاشة بناء الخطة، وحالتها .ready
   عند اكتمال الخطة. كانت متفرقة بين: app.css, ui-polish.css,
   ui-vision.css, ui-refresh.css — بنفس الترتيب المنقول أدناه.
   (الحاوية .checkpoint-wrap باقية بملفاتها: هيكل تخطيط صفحة لا مكوّن.
   وأزرار .cp-save/.cp-print العامة كذلك؛ هنا فقط قواعدها المقيّدة
   بسياق .checkpoint) */

/* من app.css (بلا شرط) */
.checkpoint {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-radius: var(--radius);
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line); box-shadow: var(--sh-sm);
  transition: all 0.3s;
}
.checkpoint.ready {
  background: linear-gradient(120deg, var(--l3-tint), var(--l2-tint));
  border-color: var(--l3-soft);
  box-shadow: 0 10px 30px rgba(8,118,107,0.16);
}
.checkpoint.ready .cp-ring {
  background: linear-gradient(135deg, var(--l3), var(--l3-deep));
}
.checkpoint.ready .cp-ring::before { background: transparent; }
.checkpoint.ready .cp-ring span { color: #fff; font-size: 0; }
.checkpoint.ready .cp-ring span::after { content: "✓"; font-size: 22px; color: #fff; }
@media (max-width: 640px) {
  .checkpoint { flex-direction: column; align-items: stretch; gap: 14px; }
}

@media screen {
  /* من ui-polish.css */
  .checkpoint.ready { box-shadow: 0 10px 30px rgba(69,123,157,0.18); }

  /* من ui-vision.css */
  .checkpoint { border: 1px solid var(--vision-line) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .checkpoint { padding: 18px 20px; }
  .checkpoint.ready { background: linear-gradient(135deg, rgba(8,118,107,.13), rgba(199,154,69,.10)) !important; }
  .checkpoint { border-radius: 28px !important; }
  .checkpoint::after {
    content: "";
    position: absolute;
    inset: auto -34px -52px auto;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: rgba(8,118,107,.055);
    pointer-events: none;
  }
  @media (max-width: 760px) {
    .checkpoint { align-items: stretch; }
  }
  @media (min-width: 761px) {
    .checkpoint .cp-actions {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px !important;
      width: min(100%, 292px);
      flex: 0 0 292px;
      align-items: stretch;
      justify-items: stretch;
    }
    .checkpoint .cp-save,
    .checkpoint .cp-print {
      width: 100%;
      min-width: 0;
      min-height: 64px;
      padding: 0 22px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1.35;
      white-space: normal;
    }
  }
  .checkpoint {
    position: relative;
    border-color: rgba(136,164,154,.25) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,252,250,.88)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.82) inset,
      0 14px 36px -24px rgba(23,59,53,.28) !important;
  }
  .checkpoint { overflow: hidden; }
  .checkpoint::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--card-accent, var(--vision-brand));
    opacity: .86;
    transform: scaleX(.22);
    transform-origin: right center;
    transition: transform .28s cubic-bezier(.16,1,.3,1);
  }
  .checkpoint:hover::before { transform: scaleX(1); }
  .checkpoint > * { position: relative; z-index: 1; }
  .checkpoint { --card-accent: var(--vision-brand-2); }
}

/* ──────────── .style-chooser و .preview-target ────────────
   بطاقتا عمود المعاينة: «اختيار طابع الطباعة» و«وجهة المعاينة».
   توأم يتشاركان أغلب القواعد فجُمعتا بقسم واحد. كانتا متفرقتين بين:
   app.css, welcome.css, ui-vision.css, ui-refresh.css — بنفس الترتيب
   المنقول أدناه. (إخفاؤهما عند الطباعة باقٍ في كتلة @media print
   داخل app.css — لم تُمَس كتل الطباعة.) */

/* من app.css (بلا شرط) */
.style-chooser {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin: 22px 30px 0;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--sh-sm);
}
.style-chooser .sc-label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
@media (min-width: 1024px) {
  .style-chooser { margin: 0 0 16px; }
}

/* من welcome.css (بلا شرط) */
.preview-target { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.preview-target .ptv-label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.preview-target .print-target-seg { margin: 0; flex: 1; min-width: 200px; }

@media screen {
  /* من ui-vision.css */
  .style-chooser, .preview-target { border: 1px solid var(--vision-line) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .preview-target, .style-chooser { padding: 14px 16px; margin-bottom: 14px; }
  .style-chooser, .preview-target {
    border-color: var(--vision-line) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,252,250,.86)) !important;
    box-shadow: var(--vision-shadow-sm) !important;
  }
  .style-chooser, .preview-target {
    position: relative;
    overflow: hidden;
    border-radius: 28px !important;
  }
  .style-chooser::after, .preview-target::after {
    content: "";
    position: absolute;
    inset: auto -34px -52px auto;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: rgba(8,118,107,.055);
    pointer-events: none;
  }
  .style-chooser > *, .preview-target > * { position: relative; z-index: 1; }
  @media (max-width: 420px) {
    .style-chooser, .preview-target { margin-left: 14px; margin-right: 14px; }
  }
  @media (min-width: 1024px) {
    .preview-target,
    .style-chooser {
      width: min(100%, 960px); margin-left: auto !important; margin-right: auto !important;
    }
    .preview-target { justify-content: space-between; gap: 16px; }
  }

  /* من ui-refresh.css */
  .preview-target, .style-chooser {
    position: relative;
    border-color: rgba(136,164,154,.25) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,252,250,.88)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.82) inset,
      0 14px 36px -24px rgba(23,59,53,.28) !important;
  }
  .preview-target, .style-chooser { overflow: hidden; }
  .preview-target::before, .style-chooser::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--card-accent, var(--vision-brand));
    opacity: .86;
    transform: scaleX(.22);
    transform-origin: right center;
    transition: transform .28s cubic-bezier(.16,1,.3,1);
  }
  .preview-target:hover::before, .style-chooser:hover::before { transform: scaleX(1); }
  .preview-target > *, .style-chooser > * { position: relative; z-index: 1; }
  .preview-target { --card-accent: #264f66; }
  .style-chooser { --card-accent: var(--vision-gold); }
}

/* ───────────────────────── .lvlhelp-card ─────────────────────────
   بطاقات نافذة «كيف تختار المستوى؟» (بطاقة لكل مستوى مع ترويسته
   الملوّنة وشرحه). كانت متفرقة بين: app.css, ui-vision.css,
   ui-refresh.css, luxe.css — بنفس الترتيب المنقول أدناه. */

/* من app.css (بلا شرط) */
.lvlhelp-card { background:var(--paper); border-radius:15px; border:1px solid var(--line-2); overflow:hidden; margin-bottom:12px; }
.lvlhelp-card .ch { display:flex; align-items:center; gap:9px; padding:11px 14px; color:#fff; }
.lvlhelp-card[data-l="1"] .ch { background:linear-gradient(135deg,var(--l1),var(--l1-deep)); }
.lvlhelp-card[data-l="2"] .ch { background:linear-gradient(135deg,var(--l2),var(--l2-deep)); }
.lvlhelp-card[data-l="3"] .ch { background:linear-gradient(135deg,var(--l3),var(--l3-deep)); }
.lvlhelp-card .ch .n { font-family:'Cairo',sans-serif; font-weight:700; font-size:14px; }
.lvlhelp-card .ch .d { font-size:11px; opacity:.85; }
.lvlhelp-card .cb { padding:12px 14px 14px; }
.lvlhelp-card .id { font-size:12.5px; line-height:1.65; color:var(--ink-2); margin-bottom:10px; }
.lvlhelp-card .diff { font-size:11.5px; line-height:1.55; color:var(--ink-2); background:var(--cream); border-radius:10px; padding:9px 11px; border:1px dashed var(--line-2); }
.lvlhelp-card .diff b { color:var(--ink); }
.lvlhelp-card .note { font-size:11.5px; line-height:1.55; color:var(--l3-deep); background:var(--l3-tint); border:1px solid var(--l3-soft); border-radius:10px; padding:9px 11px; margin-top:9px; display:flex; gap:7px; }
.lvlhelp-card .note .ic { flex-shrink:0; font-size:13px; }

@media screen {
  /* من ui-vision.css */
  .lvlhelp-card {
    border-color: var(--vision-line) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,252,250,.86)) !important;
    box-shadow: var(--vision-shadow-sm) !important;
  }
  .lvlhelp-card { border-radius: 28px !important; }
  .lvlhelp-card::after {
    content: "";
    position: absolute;
    inset: auto -34px -52px auto;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: rgba(8,118,107,.055);
    pointer-events: none;
  }
  .lvlhelp-card > * { position: relative; z-index: 1; }
  .lvlhelp-card { border-radius: 20px; border-color: var(--vision-line); }

  /* من ui-refresh.css (كانت ضمن مجموعة «البطاقات المتداخلة» الكبيرة) */
  .lvlhelp-card, .lvlhelp-card .diff, .lvlhelp-card .note {
    border-color: rgba(136,164,154,.24) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,252,250,.90)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.78) inset, 0 10px 26px -22px rgba(23,59,53,.28) !important;
  }
  .lvlhelp-card { position: relative; overflow: hidden; }
  .lvlhelp-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--nested-card-accent, var(--vision-brand));
    opacity: .82;
  }

  /* من luxe.css */
  .lvlhelp-card .ch::before { box-shadow: var(--neb-icon-shadow) !important; }
}

/* ───────────────────────── .teacher-card ─────────────────────────
   بطاقة اختيار معلم المادة (داخل أول بطاقة خطوة) وحالاتها:
   .empty (لم يُختر معلم) / .open (القائمة مفتوحة) / .locked (مقفلة
   لغير المدير). كانت متفرقة بين: app.css, ui-polish.css, welcome.css,
   ui-vision.css, ui-refresh.css, luxe.css — بنفس الترتيب المنقول أدناه.
   (عناصرها الداخلية العامة .tc-av/.tc-info/.tc-name/.tc-arrow باقية
   في app.css، وقواعد إلغاء وميض اللمس العامة باقية في مجموعاتها.) */

/* من app.css (بلا شرط) */
.teacher-card {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line-2);
  transition: all 0.18s;
}
.teacher-card:hover { border-color: var(--brand); box-shadow: var(--sh-sm); }
.teacher-card.empty {
  border-style: dashed; border-color: var(--l1);
  background: var(--l1-tint);
}
.teacher-card.open { border-color: var(--brand); box-shadow: var(--sh-md); }
.teacher-card.empty .tc-av {
  background: linear-gradient(135deg, var(--l1), var(--l1-deep));
}
.teacher-card.open .tc-arrow { transform: rotate(180deg); }

/* من ui-polish.css */
@media (max-width: 640px) {
  .teacher-card { padding: 13px; }
}

/* من welcome.css (بلا شرط) */
.teacher-card.locked { pointer-events: none; cursor: default; }
.teacher-card.locked .tc-arrow { display: none; }

@media screen {
  .teacher-card { min-height: 72px; }
  .teacher-card { border-color: var(--vision-line) !important; background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,252,250,.86)) !important; }
  .teacher-card { border-radius: 24px !important; }

  /* من ui-refresh.css */
  .teacher-card {
    transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  .teacher-card:hover {
    transform: translateY(-2px);
    border-color: rgba(11,107,99,.26) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 16px 34px -24px rgba(23,59,53,.30) !important;
  }

  /* من luxe.css */
  .teacher-card {
    box-shadow: 0 2px 6px rgba(8,63,58,.06), 0 16px 38px -18px rgba(8,63,58,.20) !important;
  }
}

/* ───────────────────────── .td-option ─────────────────────────
   خيار المعلم داخل القائمة المنسدلة لبطاقة اختيار المعلم، وحالته
   .selected. كان متفرقاً بين: app.css, ui-vision.css — بنفس الترتيب
   المنقول أدناه. (قواعد إلغاء وميض اللمس العامة باقية في مجموعاتها،
   و.tc-av باقية في ملفها ضمن قاعدة كانت مشتركة مع .td-option .av) */

/* من app.css (بلا شرط) */
.td-option {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 11px; cursor: pointer;
  transition: background 0.14s;
}
.td-option:hover { background: var(--l2-tint); }
.td-option.selected { background: var(--l2-soft); }
.td-option .av {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.td-option .info { flex: 1; min-width: 0; }
.td-option .nm {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-option .rl {
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media screen {
  .td-option .av {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--vision-brand), var(--vision-brand-2));
  }
  .td-option {
    border-color: var(--vision-line) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,252,250,.86)) !important;
    box-shadow: var(--vision-shadow-sm) !important;
  }
  .td-option { border-radius: 20px !important; }
  .td-option:hover { box-shadow: var(--vision-shadow-md) !important; }
  .td-option.selected { background: var(--l2-soft) !important; }
}

/* ───────────────────────── .date-input ─────────────────────────
   حقل اختيار التاريخ (بداية/نهاية الخطة) وحالاته: .active (التقويم
   مفتوح) / .empty / .has-value. كان متفرقاً بين: app.css,
   ui-polish.css, ui-vision.css, ui-refresh.css — بنفس الترتيب
   المنقول أدناه. (قواعد إلغاء وميض اللمس العامة باقية في مجموعاتها) */

/* من app.css (بلا شرط) */
.date-input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line-2);
  transition: all 0.15s;
}
.date-input:hover { border-color: var(--brand); }
.date-input.active { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(8,118,107,0.12); }
.date-input.empty .di-val { color: var(--ink-3); font-weight: 500; }
.date-input.has-value .di-val { color: var(--ink); font-weight: 700; }
.date-input .di-ic { font-size: 15px; }
.date-input .di-val { flex: 1; font-size: 13.5px; }
.date-input .di-arrow { color: var(--ink-3); font-size: 12px; }

@media screen {
  /* من ui-polish.css */
  .date-input.active { box-shadow: 0 0 0 4px rgba(11,107,99,0.12); }
  .date-input {
    border-color: var(--vision-line) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,252,250,.86)) !important;
    box-shadow: var(--vision-shadow-sm) !important;
  }
  .date-input { border-radius: 20px !important; }
  @media (max-width: 760px) {
    .date-input {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 34px;
      align-items: center;
      gap: 6px;
    }
    .date-input .di-ic,
    .date-input .di-arrow {
      justify-self: center;
    }
    .date-input .di-val {
      text-align: center;
      justify-self: stretch;
    }
  }
  @media (min-width: 761px) {
    .date-input {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 40px;
      align-items: center;
      gap: 8px;
      min-height: 58px;
      padding: 11px 14px;
      direction: rtl;
    }
    .date-input .di-ic,
    .date-input .di-arrow {
      justify-self: center;
    }
    .date-input .di-val {
      justify-self: stretch;
      text-align: center;
      font-size: 14.5px;
      line-height: 1.35;
      white-space: normal;
    }
  }

  /* من ui-refresh.css */
  .date-input {
    transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
}

/* ───────────────────────── .student-chk ─────────────────────────
   بطاقة اختيار الطالب في بطاقة «الطلاب» وحالاتها: التحديد (✓) /
   .empty (اختر المستوى أولاً) / .locked (مسند لمعلم آخر)، مع تلوين
   التحديد حسب مستوى القائمة (.students-list.lv-1/2/3). كانت متفرقة
   بين: app.css, ui-vision.css, ui-refresh.css, luxe.css — بنفس
   الترتيب المنقول أدناه. (أيقونة SVG للحالة الفاضية باقية في
   nibras-icons.css لأنه يُحمَّل بعد هذا الملف — كما كان بعد luxe) */

/* من app.css (بلا شرط) */
.student-chk {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line-2);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: all 0.15s; user-select: none;
}
.student-chk:hover { border-color: var(--brand); background: var(--l2-tint); }
.student-chk input { display: none; }
.student-chk .box {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid var(--line-2); transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.student-chk input:checked ~ .box {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
}
.student-chk input:checked ~ .box::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; }
.student-chk input:checked ~ .name { color: var(--brand); font-weight: 700; }
.student-chk .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-chk.empty {
  grid-column: 1 / -1; justify-content: center; cursor: default;
  border-style: dashed; color: var(--ink-3); background: transparent;
  padding: 22px;
}
.student-chk.empty:hover { border-color: var(--line-2); background: transparent; }
.student-chk.locked { opacity: 0.85; cursor: pointer; background: var(--cream-2); border-style: dashed; }
.student-chk.locked .lock-ico {
  color: var(--ink-3); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color 0.15s;
}
.student-chk.locked .lock-ico svg { width: 16px; height: 16px; display: block; }
.student-chk.locked:hover .lock-ico { color: var(--brand); }
.student-chk.locked .lock-badge {
  margin-right: auto; font-size: 10.5px; font-weight: 700; color: var(--ink-2);
  background: #fff; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--line-2);
}
/* تلوين التحديد حسب مستوى القائمة */
.students-list.lv-1 .student-chk:hover { border-color: var(--l1); background: #fff; }
.students-list.lv-2 .student-chk:hover { border-color: var(--l2); background: #fff; }
.students-list.lv-3 .student-chk:hover { border-color: var(--l3); background: #fff; }
.students-list.lv-1 .student-chk input:checked ~ .box { background: linear-gradient(135deg, var(--l1), var(--l1-deep)); }
.students-list.lv-2 .student-chk input:checked ~ .box { background: linear-gradient(135deg, var(--l2), var(--l2-deep)); }
.students-list.lv-3 .student-chk input:checked ~ .box { background: linear-gradient(135deg, var(--l3), var(--l3-deep)); }
.students-list.lv-1 .student-chk input:checked ~ .name { color: var(--l1-deep); }
.students-list.lv-2 .student-chk input:checked ~ .name { color: var(--l2-deep); }
.students-list.lv-3 .student-chk input:checked ~ .name { color: var(--l3-deep); }

@media screen {
  .student-chk { padding: 13px; }
  .student-chk {
    border-color: var(--vision-line) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,252,250,.86)) !important;
    box-shadow: var(--vision-shadow-sm) !important;
  }
  .student-chk { border-radius: 20px !important; }
  .student-chk.locked { background: var(--cream-2) !important; }

  /* من ui-refresh.css */
  .student-chk {
    transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  .student-chk:hover {
    transform: translateY(-2px);
    border-color: rgba(11,107,99,.26) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 16px 34px -24px rgba(23,59,53,.30) !important;
  }

  /* من luxe.css */
  .student-chk.empty { position: relative; }
  .student-chk.empty::before { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px; border-radius: 12px; margin-inline-end: 8px; border: 1px solid rgba(199,154,69,.20); box-shadow: var(--neb-icon-shadow); vertical-align: middle; }
  .student-chk.empty::before {
    content: "👥"; color: var(--vision-brand-2);
    background: rgba(24,160,147,.10); border-color: rgba(24,160,147,.18);
  }
}

/* ───────────────────────── .lv-btn ─────────────────────────
   أزرار اختيار المستوى الثلاثة (data-level=1/2/3) وحالاتها:
   .active (المستوى المعروض) / .has-students (فيه طلاب موزّعون)،
   مع شريطها العلوي الملوّن وعدّاد الطلاب وصور الطلاب المصغّرة.
   كانت متفرقة بين: app.css, ui-polish.css, ui-vision.css — بنفس
   الترتيب المنقول أدناه. (قواعد إلغاء وميض اللمس العامة باقية
   في مجموعاتها) */

/* من app.css (بلا شرط) */
.lv-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px; border-radius: 15px; cursor: pointer;
  border: 2px solid var(--line-2); background: #fff;
  font-family: inherit; transition: all 0.2s;
  position: relative; overflow: hidden;
}
.lv-btn .name {
  font-size: 13.5px; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.lv-btn .desc { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.lv-btn .lv-count { display: none; }
.lv-btn::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  opacity: 0; transition: opacity 0.2s;
}
.lv-btn[data-level="1"]:hover { border-color: var(--l1); background: var(--l1-tint); }
.lv-btn[data-level="2"]:hover { border-color: var(--l2); background: var(--l2-tint); }
.lv-btn[data-level="3"]:hover { border-color: var(--l3); background: var(--l3-tint); }
.lv-btn[data-level="1"].active {
  border-color: var(--l1); background: var(--l1-tint);
  box-shadow: 0 8px 22px rgba(217,117,89,0.28);
}
.lv-btn[data-level="2"].active {
  border-color: var(--l2); background: var(--l2-tint);
  box-shadow: 0 8px 22px rgba(24,160,147,0.26);
}
.lv-btn[data-level="3"].active {
  border-color: var(--l3); background: var(--l3-tint);
  box-shadow: 0 8px 22px rgba(38,79,102,0.24);
}
.lv-btn[data-level="1"].active::before { opacity: 1; background: linear-gradient(90deg, var(--l1), var(--l1-deep)); }
.lv-btn[data-level="2"].active::before { opacity: 1; background: linear-gradient(90deg, var(--l2), var(--l2-deep)); }
.lv-btn[data-level="3"].active::before { opacity: 1; background: linear-gradient(90deg, var(--l3), var(--l3-deep)); }
.lv-btn[data-level="1"].active .lv-count, .lv-btn[data-level="1"].has-students .lv-count { background: var(--l1); color: #fff; }
.lv-btn[data-level="2"].active .lv-count, .lv-btn[data-level="2"].has-students .lv-count { background: var(--l2); color: #fff; }
.lv-btn[data-level="3"].active .lv-count, .lv-btn[data-level="3"].has-students .lv-count { background: var(--l3); color: #fff; }
.lv-btn.has-students[data-level="1"] { border-color: var(--l1-soft); }
.lv-btn.has-students[data-level="2"] { border-color: var(--l2-soft); }
.lv-btn.has-students[data-level="3"] { border-color: var(--l3-soft); }
.lv-btn[data-level="1"] .lv-ava .av { background: linear-gradient(135deg, var(--l1), var(--l1-deep)); }
.lv-btn[data-level="2"] .lv-ava .av { background: linear-gradient(135deg, var(--l2), var(--l2-deep)); }
.lv-btn[data-level="3"] .lv-ava .av { background: linear-gradient(135deg, var(--l3), var(--l3-deep)); }

@media screen {
}
@media (max-width: 640px) {
  /* من ui-polish.css */
  .lv-btn { padding: 14px 6px; min-height: 76px; }
  .lv-btn .name { font-size: 14px; }
  .lv-btn .desc { font-size: 10px; }
}
@media (max-width: 380px) {
  /* من ui-polish.css */
  .lv-btn .desc { display: none; }
}

@media screen {
  /* من ui-vision.css */
  .lv-btn { min-height: 112px; border: 1.5px solid var(--vision-line); }
  .lv-btn .name { font-size: 14.5px; }
  .lv-btn .desc { font-size: 12px; color: var(--vision-muted); }
  .lv-btn:hover, .lv-btn.active { transform: translateY(-3px); }
  .lv-btn[data-level="1"].active { box-shadow: 0 14px 32px rgba(217,117,89,.18); }
  .lv-btn[data-level="2"].active { box-shadow: 0 14px 32px rgba(8,118,107,.18); }
  .lv-btn[data-level="3"].active { box-shadow: 0 14px 32px rgba(38,79,102,.17); }
  .lv-btn {
    border-color: var(--vision-line) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,252,250,.86)) !important;
    box-shadow: var(--vision-shadow-sm) !important;
  }
  .lv-btn { border-radius: 24px !important; }
  .lv-btn:hover { box-shadow: var(--vision-shadow-md) !important; }
  .lv-btn[data-level="1"]:hover { background: var(--l1-tint) !important; }
  .lv-btn[data-level="2"]:hover { background: var(--l2-tint) !important; }
  .lv-btn[data-level="3"]:hover { background: var(--l3-tint) !important; }
  .lv-btn[data-level="1"].active { background: var(--l1-tint) !important; }
  .lv-btn[data-level="2"].active { background: var(--l2-tint) !important; }
  .lv-btn[data-level="3"].active { background: var(--l3-tint) !important; }
  @media (max-width: 760px) {
    .lv-btn {
      min-height: 86px;
      align-items: center;
      justify-content: center;
      padding: 16px;
      text-align: center;
    }
    .lv-btn .name,
    .lv-btn .desc {
      width: 100%;
      justify-content: center;
      text-align: center;
    }
  }
}

/* ─────────────── عناصر نقطة الحفظ الداخلية (.cp-*) ───────────────
   محتويات بطاقة .checkpoint: حلقة التقدّم (.cp-ring) والنص (.cp-text)
   وصف الأزرار (.cp-actions) وزر الحفظ (.cp-save) وزر الطباعة الذهبي
   (.cp-print) والتلميح (.cp-hint). كانت متفرقة بين: app.css,
   ui-polish.css, welcome.css, ui-vision.css, ui-refresh.css, luxe.css —
   بنفس الترتيب المنقول أدناه، وهو ترتيب حسّاس: قاعدة الذهبي الخاصة
   بزر الطباعة يجب أن تبقى بعد قاعدة الأخضر المشتركة لتغلبها.
   (زر .sp-open الذي كان يشاركها بعض المجموعات باقٍ بقواعده في ملفاته،
   وأيقونات ::before للزرين باقية في nibras-icons.css الذي يُحمَّل بعد
   هذا الملف) */

/* من app.css (بلا شرط) */
.cp-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cp-ring {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--brand);
  background: conic-gradient(var(--brand) 0deg, var(--cream-2) 0deg);
  position: relative;
  transition: all 0.4s;
}
.cp-ring::before {
  content: ""; position: absolute; inset: 4px;
  background: #fff; border-radius: 50%;
}
.cp-ring span { position: relative; z-index: 1; }
.cp-text { min-width: 0; }
.cp-text b {
  display: block; font-family: 'Cairo', sans-serif;
  font-size: 15px; font-weight: 800; color: var(--ink);
}
.cp-text span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.cp-print {
  flex-shrink: 0; padding: 14px 26px; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 800; color: #fff;
  border: none;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: var(--sh-md);
  transition: all 0.18s;
}
.cp-print:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sh-glow); }
.cp-print:active:not(:disabled) { transform: translateY(0); }
.cp-print:disabled {
  opacity: 0.4; cursor: not-allowed; box-shadow: none;
  background: var(--ink-3);
}
@media (max-width: 640px) {
  .cp-print { width: 100%; padding: 15px; }
}

/* من ui-polish.css (بلا شرط) */
.cp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cp-save {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 12px 18px; border-radius: 13px; border: 1.5px solid #0d9488;
  background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 4px 14px rgba(13,148,136,0.28);
}
.cp-save:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(13,148,136,0.36); }
.cp-save:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
.cp-save.saving { opacity: .7; cursor: progress; }

/* من welcome.css (بلا شرط) */
.cp-hint {
  margin-top: 8px; font-size: 11.5px; line-height: 1.65; color: var(--ink-2);
  text-align: center; background: var(--l2-tint);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
}
.cp-hint b { color: var(--ink); font-weight: 700; }

@media screen {
  /* من ui-vision.css */
  .cp-save, .cp-print { border: 0 !important; color: #fff !important; background: linear-gradient(135deg, #064f49 0%, var(--vision-brand) 48%, #2db7a8 100%) !important; }
  .cp-save:hover:not(:disabled), .cp-print:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(8,118,107,.28) !important;
  }
  .cp-ring { width: 52px; height: 52px; }
  .cp-actions { gap: 10px; }
  .cp-save, .cp-print { min-height: 52px; border-radius: var(--rad-md) !important; }
  .cp-hint { color: var(--vision-muted); line-height: 1.65; }
  @media (max-width: 760px) {
    .cp-left { align-items: center; justify-content: center; text-align: center; }
    .cp-text b, .cp-text span { text-align: center; }
    .cp-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; width: 100%; }
    .cp-save, .cp-print {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
      padding-inline: 18px; text-align: center; line-height: 1.45;
      white-space: normal; direction: rtl; unicode-bidi: isolate;
    }
  }

  /* من ui-refresh.css — الأخضر المشترك ثم الذهبي الخاص بزر الطباعة */
  .cp-save, .cp-print {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
      linear-gradient(135deg, var(--vision-brand) 0%, var(--vision-brand-2) 100%) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.25) inset,
      0 14px 30px -10px rgba(8,118,107,.42) !important;
  }
  .cp-print {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
      linear-gradient(135deg, var(--vision-gold) 0%, #d8b25e 100%) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.3) inset,
      0 14px 30px -10px rgba(199,154,69,.45) !important;
  }
  .cp-print:hover:not(:disabled) {
    box-shadow:
      0 1px 0 rgba(255,255,255,.35) inset,
      0 18px 40px -10px rgba(199,154,69,.52) !important;
  }

  /* من luxe.css */
  .cp-ring { box-shadow: var(--neb-icon-shadow) !important; }
}

/* ────── ترويسة بطاقة الخطوة (.ctl-h / .step-dot / .step-card.filled) ──────
   ترويسة كل بطاقة خطوة: العنوان (.t) والعدّاد (.ct) وأيقونة (.ic)
   ونقطة الخطوة المرقّمة (.step-dot) التي تتحوّل ✓ عند الاكتمال.
   كانت متفرقة بين: app.css, ui-polish.css, ui-vision.css — بنفس
   الترتيب المنقول أدناه. (قواعد «نظام الأيقونات» العرضي التي تلمس
   .ctl-h .t::before باقية في luxe.css وnibras-icons.css عمداً —
   نظامٌ يخدم 13 عنصراً بالموقع وليس هذا المكوّن وحده) */

/* من app.css (بلا شرط) */
.ctl-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ctl-h .ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--l2-soft), var(--l1-soft));
  color: var(--brand); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.ctl-h .t { font-family: 'Cairo', sans-serif; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.ctl-h .ct {
  margin-right: auto; font-size: 12px; font-weight: 700;
  color: var(--ink-2); background: var(--cream-2);
  padding: 4px 11px; border-radius: 20px;
}
/* الدائرة الصغيرة جنب كل عنوان خطوة */
.step-dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: var(--cream-2); color: var(--ink-3);
  border: 2px solid var(--line-2);
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
}
/* بطاقة الخطوة عند اكتمالها */
.step-card.filled {
  border-color: var(--l3-soft);
  box-shadow: 0 6px 20px rgba(38,79,102,0.12);
}
.step-card.filled .step-dot {
  background: linear-gradient(135deg, var(--l3), var(--l3-deep));
  color: #fff; border-color: transparent;
  transform: scale(1.05);
}
/* إخفاء الرقم وإظهار ✓ عند الاكتمال */
.step-card.filled .step-dot { font-size: 0; }
.step-card.filled .step-dot::after {
  content: "✓"; font-size: 15px; color: #fff;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: pop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

@media screen {
  /* من ui-polish.css */
  .step-card.filled { box-shadow: 0 6px 20px rgba(69,123,157,0.14); }

  /* من ui-vision.css */
  .ctl-h .t { font-size: 16px; font-weight: 900; }
  .ctl-h .ic, .step-dot {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);
  }
  .step-dot {
    width: 34px; height: 34px;
    border: 0;
    background: linear-gradient(135deg, rgba(8,118,107,.10), rgba(199,154,69,.14));
    color: var(--vision-brand);
  }
  .step-card.filled .step-dot { background: linear-gradient(135deg, var(--vision-brand), var(--vision-brand-2)); }
  @media (max-width: 420px) {
    .ctl-h { gap: 8px; }
    .ctl-h .t { font-size: 14.5px; }
    .step-dot { width: 31px; height: 31px; }
  }
}

/* ───────────────────────── .empty-state ─────────────────────────
   بطاقة «الحالة الفارغة» (لا توجد بيانات بعد) في شاشات السجل
   والتقييم وغيرها. كانت متفرقة بين: app.css, ui-refresh.css —
   بنفس الترتيب المنقول أدناه. (كسوتها من «ثيم البطاقات المتداخلة»
   في ui-refresh.css وشريحة الأيقونة في luxe.css وnibras-icons.css
   باقية بطبقاتها — ثيم يخدم عشرات البطاقات وليس هذا المكوّن وحده) */

/* من app.css (بلا شرط) */
.empty-state {
  text-align: center; padding: 70px 30px;
  background: rgba(255,255,255,0.6);
  border: 2px dashed var(--line-2); border-radius: 24px;
}
.empty-state .icon {
  font-size: 50px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2), var(--brand-3));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.empty-state h3 { font-family: 'Cairo', sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.empty-state p { font-size: 14px; color: var(--ink-2); max-width: 440px; margin: 0 auto; line-height: 1.7; }

@media screen {
  /* من ui-refresh.css */
  #recent-body .empty-state,
  #ev-body .empty-state {
    --card-accent: var(--vision-gold);
    border-style: solid !important;
    padding-top: 22px !important;
  }
  body .empty-state {
    --nested-card-accent: var(--vision-gold);
    border-style: solid !important;
  }
}

/* ──────── عائلة شاشة السجل (.sp-head / .sp-back / .sp-open / .sp-del) ────────
   ترويسة شاشة «الخطط المحفوظة» وزر الرجوع وزرا «عرض/طباعة» و«حذف».
   كانت متفرقة بين: welcome.css, ui-vision.css, ui-refresh.css —
   بنفس الترتيب المنقول أدناه. (قواعد نظام الأيقونات لأزرارها في
   luxe.css وnibras-icons.css باقية بطبقتها) */

/* من welcome.css (بلا شرط) */
.sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.sp-head b { font-family: 'Cairo', sans-serif; font-size: 17px; color: var(--ink); }
.sp-head span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.sp-back { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--l2-deep); margin-bottom: 10px; padding: 4px 0; }
.sp-back:hover { color: var(--brand); }
.sp-open { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: none; border-radius: 10px; padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: box-shadow .15s; }
.sp-open:hover { box-shadow: var(--sh-sm); }
.sp-del { background: #fff; color: var(--l1-deep); border: 1.5px solid var(--l1-soft); border-radius: 10px; padding: 8px 12px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.sp-del:hover, .sp-del.confirming { background: var(--l1-tint); border-color: var(--l1); }

@media screen {
  /* من ui-vision.css */
  .sp-open { border: 0 !important; color: #fff !important; background: linear-gradient(135deg, #064f49 0%, var(--vision-brand) 48%, #2db7a8 100%) !important; }
  .sp-open:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(8,118,107,.28) !important;
  }

  /* من ui-refresh.css */
  .sp-open {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
      linear-gradient(135deg, var(--vision-brand) 0%, var(--vision-brand-2) 100%) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.25) inset,
      0 14px 30px -10px rgba(8,118,107,.42) !important;
  }
  #recent-body .sp-open { border-radius: 12px !important; }
  #recent-body .sp-del {
    background: #fff !important;
    border: 1.5px solid rgba(231,111,81,.38) !important;
    color: var(--l1-deep) !important;
    border-radius: 12px !important;
    transition: background .15s ease, border-color .15s ease !important;
  }
  #recent-body .sp-del:hover,
  #recent-body .sp-del.confirming {
    background: var(--l1-tint) !important; border-color: var(--l1) !important;
  }
  @media (max-width: 640px) {
    #recent-body .sp-open, #recent-body .sp-del { flex: 1; min-width: 110px; text-align: center; }
  }
  /* من ui-refresh.css — نفس الزرين باسميهما الآخرين (saved-open/saved-del)
     داخل بطاقات الطلاب المحفوظة؛ قاعدة الجوال هنا تغلب قاعدة 110px أعلاه
     بالترتيب — كما في الأصل */
  #recent-body .saved-open,
  #recent-body .saved-del {
    min-height: 34px;
    padding: 7px 12px !important;
  }
  @media (max-width: 720px) {
    #recent-body .saved-open,
    #recent-body .saved-del {
      flex: 1;
      min-width: 118px;
    }
  }
}


/* ─────────────── بطاقة المادة (.subj-card وعائلتها العامة) ───────────────
   البطاقة العامة للمادة في شاشتي السجل والتقييم: الشبكة (.subj-grid)
   والأيقونة (.subj-ic) والاسم (.subj-nm) والعدّاد (.subj-ct) وسهم
   «افتح» عند التمرير. كانت متفرقة بين: welcome.css, ui-vision.css,
   luxe.css — بنفس الترتيب المنقول أدناه.
   (تخصيصات كل شاشة #recent-body/#ev-body باقية في ui-refresh.css —
   كتل معنونة متماسكة لكل شاشة، وقواعد نظام الأيقونات في luxe باقية
   بمجموعاتها) */

/* من welcome.css (بلا شرط) */
.subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.subj-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 16px;
  padding: 18px 12px; cursor: pointer; font-family: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.subj-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--l2-soft); }
.subj-ic {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-family: 'Amiri', serif; font-weight: 700; color: var(--l2-deep);
  background: linear-gradient(135deg, var(--l2-tint), var(--l1-tint));
}
.subj-nm { font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.3; }

@media screen {
  /* من ui-vision.css */
  .subj-grid {
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 18px;
  }
  .subj-card { min-height: 126px; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: center; justify-items: stretch; padding: 22px 24px; border-radius: 26px !important; border: 1px solid var(--vision-line) !important; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,252,250,.88)) !important; box-shadow: var(--vision-shadow-sm) !important; text-align: right; }
  .subj-card::after { inset: auto -34px -54px auto; pointer-events: none; }
  .subj-card > * {
    position: relative;
    z-index: 1;
  }
  .subj-card:hover {
    transform: translateY(-6px);
    border-color: var(--vision-line-strong) !important;
    box-shadow: var(--vision-shadow-md) !important;
  }
  .subj-ic {
    grid-row: 1 / 3;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: rgba(8,118,107,.10);
    color: var(--vision-brand);
  }
  .subj-nm {
    grid-column: 2;
    align-self: end;
    text-align: right;
    font-size: 18px;
    font-weight: 900;
    color: var(--vision-ink);
  }
  .subj-ct {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: start;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(8,118,107,.09);
    color: var(--vision-muted);
    font-size: 13.5px;
    font-weight: 900;
    white-space: nowrap;
  }
  @media (max-width: 760px) {
    .subj-grid { grid-template-columns: 1fr; gap: 12px; }
    .subj-card {
      grid-template-columns: 54px minmax(0, 1fr);
      min-height: 108px;
      padding: 18px;
      border-radius: 22px !important;
    }
    .subj-ic {
      width: 54px;
      height: 54px;
    }
    .subj-nm {
      font-size: 16px;
    }
    .subj-ct {
      grid-column: 2;
      grid-row: auto;
      justify-self: stretch;
      padding: 0;
      background: transparent;
      font-size: 13px;
    }
  }

  /* من luxe.css — سهم «افتح ↗» يظهر عند التمرير */
  .subj-card {
    position: relative;
    overflow: hidden;
  }
  .subj-card::after {
    content: "↗";
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    width: 24px;
    height: 24px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vision-brand);
    background: rgba(8,118,107,.08);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .subj-card:hover::after { opacity: 1; transform: translateY(0); }
}


/* ─────────────── أدوات شاشة التقييم (.ev-*) ───────────────
   أزرار النتيجة (.ev-rbtn) وشرائح الطلاب (.ev-chip) بألوان النتائج
   الثلاثة، وشبكاتها، وشريط الحفظ (.ev-foot)، وبطاقات دروس التقييم
   وحالاتها (.ev-lesson-card/.ev-lstat). كانت كلها في welcome.css —
   منقولة حرفياً. (طبقة إعادة التصميم المعرّفة بـ#ev-body باقية في
   ui-refresh.css ككتلة شاشة متماسكة، والثيم المشترك بمجموعاته) */

/* من welcome.css (بلا شرط) */
.modal-eval { max-width: 680px; }
.ev-result-seg { margin-bottom: 14px; }
.ev-segs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ev-rbtn { padding: 11px 8px; border-radius: 12px; border: 2px solid var(--line-2); background: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: all .15s; }
.ev-rbtn.green.active { border-color: #15803d; background: #dcfce7; color: #15803d; }
.ev-rbtn.orange.active { border-color: #c2410c; background: #ffedd5; color: #c2410c; }
.ev-rbtn.red.active { border-color: #b91c1c; background: #fee2e2; color: #b91c1c; }
.ev-students { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.ev-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: #fff; font-family: inherit; cursor: pointer; text-align: right; transition: all .12s; }
.ev-chip:hover { border-color: var(--l2-soft); transform: translateY(-2px); }
.ev-chip .evc-name { font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); }
.ev-chip .evc-tag { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.ev-chip.green { border-color: #15803d; background: #dcfce7; }
.ev-chip.green .evc-tag { color: #15803d; }
.ev-chip.orange { border-color: #c2410c; background: #ffedd5; }
.ev-chip.orange .evc-tag { color: #c2410c; }
.ev-chip.red { border-color: #b91c1c; background: #fee2e2; }
.ev-chip.red .evc-tag { color: #b91c1c; }
.ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ev-count { font-size: 13px; font-weight: 700; color: var(--ink-2); }

.ev-lessons { display: flex; flex-direction: column; gap: 10px; }
.ev-lesson-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 14px 16px; cursor: pointer; font-family: inherit; text-align: right; transition: transform .15s, box-shadow .15s, border-color .15s; }
.ev-lesson-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--l2-soft); }
.ev-lstat { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ev-lstat.done { background: #dcfce7; color: #15803d; }
.ev-lstat.partial { background: #ffedd5; color: #c2410c; }
.ev-lstat.todo { background: var(--cream-2); color: var(--ink-3); }