/* ==========================================================
   غيابي – نظام إدارة غياب المدارس | ملف التصميم الكامل
   بديل مستقل عن Tailwind (لا يحتاج أي أدوات بناء)
   ========================================================== */

:root {
  --primary: #1E4D2B;
  --primary-hover: #15381f;
  --primary-light: #eaf4ed;
  --gold: #D4AF37;
  --gold-dark: #8C6D13;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-150: #e9eef5;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #4B5563;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --rose: #e11d48;
  --rose-bg: #fff1f2;
  --amber: #d97706;
  --amber-bg: #fffbeb;
  --emerald: #059669;
  --emerald-bg: #ecfdf5;
  --indigo: #4338ca;
  --indigo-bg: #eef2ff;
  --radius: 4px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --app-font: 'Cairo';
}

body[data-theme="blue"] {
  --primary: #1e40af; --primary-hover: #1d4ed8; --primary-light: #eff6ff;
}
body[data-theme="maroon"] {
  --primary: #881337; --primary-hover: #9f1239; --primary-light: #fff1f2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  direction: rtl;
  text-align: right;
  background-color: #F8FAF9;
  color: #1F2937;
  overflow-x: hidden;
  font-family: var(--app-font), 'Cairo', 'Tajawal', 'Almarai', 'Segoe UI',
               'Noto Naskh Arabic', 'Traditional Arabic', Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

h1,h2,h3,h4,h5 { margin: 0; font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ------------------ Layout ------------------ */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; width: 100%; }
main.container { flex: 1; padding-top: 24px; padding-bottom: 24px; }

.site-header {
  background: var(--primary);
  color: #fff;
  border-bottom: 4px solid var(--gold);
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.site-header.super { background: #0f172a; }
.header-inner { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-home-link { border-radius: 10px; transition: background .18s, transform .18s; }
.brand-home-link:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.brand-home-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.brand-logo {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  background: #fff; border: 2px solid var(--gold); padding: 2px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.brand-badges { display: flex; align-items: center; gap: 6px; }
.ver-badge { font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 4px; background: var(--gold); color: var(--primary); }
.ver-badge.gold-dark { background: var(--gold); color: #0f172a; }
.hijri { font-size: 10px; color: #bbf7d0; }
.brand h1 { font-size: 15px; }

/* لوجو واسم منصة غيابي في صفحة الترحيب */
.brand-logo-platform { background: #fff; border-color: rgba(255,255,255,.35); padding: 3px; }
.brand-logo-platform svg { width: 100%; height: 100%; }
.platform-name { font-size: 22px !important; font-weight: 900; line-height: 1; letter-spacing: .5px; }
.platform-tagline { font-size: 10px; color: #bbf7d0; margin-top: 3px; font-weight: 600; }
@media (max-width: 640px) { .platform-name { font-size: 18px !important; } .platform-tagline { display: none; } }
.header-tools { display: flex; align-items: center; gap: 10px; }

/* زر تثبيت التطبيق (PWA) — بارز وجذاب في الهيدر */
.pwa-install-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; font-family: inherit;
  color: #3f2d00; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, #F4D03F, #D4AF37);
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 4px 14px rgba(212,175,55,.45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: installPulse 2.4s ease-in-out infinite;
}
.pwa-install-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 20px rgba(212,175,55,.6); }
.pwa-install-btn:active { transform: translateY(0) scale(.97); }
.pwa-install-btn svg { color: #3f2d00; }
@keyframes installPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(212,175,55,.45); }
  50%      { box-shadow: 0 4px 22px rgba(212,175,55,.75); }
}
/* على الجوال: نُبقي الأيقونة ونُخفي النص لتوفير المساحة */
@media (max-width: 640px) {
  .pwa-install-btn span { display: none; }
  .pwa-install-btn { padding: 8px 10px; }
}
.clock-chip {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  padding: 6px 12px; border-radius: 4px;
}
.clock-chip svg { color: var(--gold); }
.icon-btn {
  padding: 9px; border-radius: 4px; border: 0; background: rgba(255,255,255,.12);
  color: #fff; display: inline-flex; transition: background .2s;
}
.icon-btn:hover { background: rgba(255,255,255,.28); }
.icon-btn.danger { background: rgba(244,63,94,.22); color: #ffe4e6; }
.icon-btn.danger:hover { background: rgba(244,63,94,.45); }
.user-box { display: flex; align-items: center; gap: 10px; border-right: 1px solid rgba(255,255,255,.2); padding-right: 12px; }
.user-box .u-name { font-size: 12px; font-weight: 700; }
.user-box .u-role { font-size: 10px; color: #bbf7d0; }

.site-footer {
  background: #0f172a; color: #94a3b8; font-size: 11px;
  text-align: center; padding: 18px 12px; border-top: 4px solid var(--gold);
}
.site-footer strong { color: var(--gold); }

/* ------------------ Cards & generic blocks ------------------ */
.card {
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg); padding: 20px;
}
.card.pad-0 { padding: 0; }
.card-title { font-size: 14px; font-weight: 800; color: var(--slate-800); display: flex; align-items: center; gap: 8px; }
.card-sub { font-size: 14px; color: var(--slate-500); margin-top: 2px; }
.ornate-card { position: relative; background:#fff; border-radius: var(--radius-lg);
  border: 1px solid rgba(30,77,43,.1); box-shadow: 0 10px 30px -15px rgba(30,77,43,.08); transition: .3s; }
.ornate-card:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.3); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.divider { height: 1px; background: var(--slate-200); margin: 14px 0; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.txt-c { text-align: center; }
.mini { font-size: 11px; color: var(--slate-500); }
.tiny { font-size: 10px; color: var(--slate-400); }
.strong-num { font-size: 26px; font-weight: 900; color: var(--slate-800); }

/* ------------------ Buttons ------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; font-size: 12px; font-weight: 700; border-radius: var(--radius);
  border: 1px solid transparent; background: var(--slate-100); color: var(--slate-700);
  transition: background .18s, color .18s, transform .12s ease, box-shadow .18s, filter .18s;
  white-space: nowrap;
}
.btn:hover { background: var(--slate-200); }
.btn:active { transform: translateY(1px) scale(.985); }

/* أزرار الـ hero الكبيرة: رفع خفيف + لمعة عبور راقية */
.btn-lg {
  position: relative; overflow: hidden; padding: 13px 24px; font-size: 14px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(2,6,23,.22);
}
.btn-lg:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(2,6,23,.28); }
.btn-lg::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.btn-lg:hover::after { animation: btnShine .9s ease; }
@keyframes btnShine { to { transform: translateX(320%) skewX(-18deg); } }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-gold { background: var(--gold); color: #3f2d00; }
.btn-gold:hover { filter: brightness(.93); }
.btn-outline { background: #fff; border-color: var(--slate-200); color: var(--slate-700); }
.btn-outline:hover { background: var(--slate-50); }
.btn-danger { background: #fee2e2; color: #b91c1c; }
.btn-danger:hover { background: #fecaca; }

/* ألوان إجراءات تقارير الغياب والمواظبة */
.btn-report-warning { background: #fee2e2; color: #b91c1c; }
.btn-report-warning:hover { background: #fecaca; }
.btn-report-card { background: #1e4d2b; color: #fff; }
.btn-report-card:hover { background: #15381f; }
.btn-report-pledge { background: #d4af37; color: #3f2d00; }
.btn-report-pledge:hover { filter: brightness(.93); }
.btn-solid-danger { background: var(--rose); color: #fff; }
.btn-emerald { background: var(--emerald); color: #fff; }
.btn-emerald:hover { background: #047857; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 10px; font-size: 11px; }
.btn-lg { padding: 13px 22px; font-size: 14px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ------------------ Forms ------------------ */
.field { display: block; margin-bottom: 12px; }
.field > label { display: block; font-size: 11px; font-weight: 700; color: var(--slate-600); margin-bottom: 5px; }
.input, .select, .textarea {
  width: 100%; padding: 10px 12px; font-size: 13px;
  border: 1px solid var(--slate-200); border-radius: var(--radius);
  background: #fff; color: var(--slate-800); outline: none; transition: .15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.textarea { min-height: 130px; resize: vertical; line-height: 1.9; }
.input-sm { padding: 6px 9px; font-size: 12px; }
.checkbox { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

/* ------------------ Hijri date picker ------------------ */
.hijri-date-field { position: relative; }
.hijri-date-control { display: flex; direction: ltr; }
.hijri-date-control .input { border-radius: var(--radius) 0 0 var(--radius); }
.hijri-picker-trigger {
  width: 38px; flex: none; border: 1px solid var(--slate-200); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--slate-50); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; transition: .15s;
}
.hijri-picker-trigger:hover, .hijri-picker-trigger[aria-expanded="true"] { background: var(--primary-light); }
.hijri-picker-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.hijri-picker-popover {
  position: fixed; z-index: 200; top: 50%; left: 50%; right: auto;
  transform: translate(-50%, -50%); width: min(320px, calc(100vw - 30px));
  padding: 12px; background: #fff; border: 1px solid var(--slate-200); border-radius: 12px;
  box-shadow: 0 25px 60px rgba(15,23,42,.30); direction: rtl;
}
#cr-end-hijri-picker { left: 50%; right: auto; }
.hijri-picker-head { display: grid; grid-template-columns: 32px minmax(0,1fr) 32px; align-items: center; gap: 7px; margin-bottom: 10px; }
.hijri-picker-selects { display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 6px; }
.hijri-picker-selects .select { padding: 5px 7px; font-size: 10.5px; }
.hijri-picker-nav {
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--slate-200); border-radius: 8px;
  background: var(--slate-50); color: var(--slate-700); display: inline-flex; align-items: center; justify-content: center;
}
.hijri-picker-nav:hover { background: var(--primary-light); color: var(--primary); border-color: rgba(30,77,43,.28); }
.hijri-picker-week, .hijri-picker-days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.hijri-picker-week { margin-bottom: 5px; }
.hijri-picker-weekday { text-align: center; font-size: 9px; font-weight: 800; color: var(--slate-400); padding: 3px 0; }
.hijri-picker-day, .hijri-picker-empty { height: 31px; }
.hijri-picker-day {
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--slate-700);
  font-size: 11px; font-weight: 700; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.hijri-picker-day:hover { background: var(--primary-light); color: var(--primary); }
.hijri-picker-day.today { border-color: var(--gold); color: var(--gold-dark); }
.hijri-picker-day.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.hijri-picker-day.selected.today { box-shadow: inset 0 0 0 2px var(--gold); }
.hijri-picker-day:disabled, .hijri-picker-day.future {
  opacity: .32; cursor: not-allowed; background: var(--slate-50); color: var(--slate-400);
}
.hijri-picker-day:disabled:hover { background: var(--slate-50); color: var(--slate-400); }
.hijri-picker-foot { display: flex; justify-content: center; padding-top: 9px; margin-top: 8px; border-top: 1px solid var(--slate-150); }
.hijri-picker-error { padding: 18px 8px; text-align: center; font-size: 11px; color: var(--rose); }
@media (max-width: 640px) {
  .hijri-picker-popover, #cr-end-hijri-picker {
    position: fixed; top: 50%; right: 50%; left: auto;
    transform: translate(50%,-50%); width: min(304px, calc(100vw - 30px));
  }
}

/* ------------------ Badges / pills ------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--slate-200);
}
.badge-green { background: var(--emerald-bg); color: #047857; border-color: #a7f3d0; }
.badge-red { background: var(--rose-bg); color: #be123c; border-color: #fecdd3; }
.badge-amber { background: var(--amber-bg); color: #b45309; border-color: #fde68a; }
.badge-blue { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-indigo { background: var(--indigo-bg); color: var(--indigo); border-color: #c7d2fe; }
.badge-gold { background: linear-gradient(135deg,#FDFBF7,#F5EFE0); border: 1px solid rgba(212,175,55,.35); color: var(--gold-dark); }
.badge-slate { background: #0f172a; color: #fff; border-color: #0f172a; }

/* ------------------ Tabs ------------------ */
.tabs {
  display: flex; gap: 4px; background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg); padding: 6px; overflow-x: auto;
}
.tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px;
  font-size: 12px; font-weight: 700; border: 0; background: transparent;
  color: var(--slate-600); border-radius: var(--radius); white-space: nowrap; transition: .18s;
}
.tab:hover { background: var(--slate-50); }
.tab.active { background: var(--primary-light); color: var(--primary); border-bottom: 2px solid var(--primary); }
.tab.active.filled { background: var(--primary); color: #fff; border-bottom: 0; }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.subtab { padding: 7px 13px; font-size: 11px; font-weight: 700; border-radius: 999px;
  border: 1px solid var(--slate-200); background: #fff; color: var(--slate-600); }
.subtab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ------------------ Tables ------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
table.tbl thead th {
  background: var(--slate-50); color: var(--slate-600); font-size: 11px; font-weight: 800;
  padding: 11px 10px; text-align: right; border-bottom: 1px solid var(--slate-200); white-space: nowrap;
}
table.tbl tbody td { padding: 10px; border-bottom: 1px solid var(--slate-150); color: var(--slate-700); }
table.tbl tbody tr:hover { background: var(--slate-50); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl.center td, table.tbl.center th { text-align: center; }

/* ------------------ Stats ------------------ */
.stat {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg);
  padding: 16px; display: flex; align-items: center; gap: 12px;
}
.stat .ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.ico-green { background: var(--emerald-bg); color: #047857; }
.ico-red { background: var(--rose-bg); color: #be123c; }
.ico-amber { background: var(--amber-bg); color: #b45309; }
.ico-blue { background: #eff6ff; color: #1d4ed8; }
.ico-indigo { background: var(--indigo-bg); color: var(--indigo); }
.ico-gold { background: #fdf6e3; color: var(--gold-dark); }
.stat .k { font-size: 11px; color: var(--slate-500); font-weight: 700; }
.stat .v { font-size: 20px; font-weight: 900; color: var(--slate-800); }

/* ------------------ Attendance calendar ------------------ */
.cal-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.cal-day {
  aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; border: 1px solid transparent;
}
.cal-day-editable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.cal-day-editable:hover { transform: scale(1.12); box-shadow: 0 4px 10px rgba(15,23,42,.18); position: relative; z-index: 2; }
.st-present { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.st-absent { background: #fef2f2; color: #be123c; border-color: #fecdd3; }
.st-late { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.st-excused { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10px; color: var(--slate-500); }
.legend span.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 4px; }

/* ------------------ Attendance wizard ------------------ */
.att-student {
  border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff;
}
.status-group { display: flex; gap: 4px; }
.att-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.att-late-check {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  color: var(--slate-600); cursor: pointer; user-select: none; padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--slate-200); background: #fff; white-space: nowrap;
}
.att-late-check input { accent-color: var(--gold-dark); width: 15px; height: 15px; cursor: pointer; }
.att-late-check.is-on { background: #fdf6e3; border-color: rgba(212,175,55,.5); color: var(--gold-dark); }
.att-late-check svg { color: var(--gold-dark); }
.cal-day-mlate { position: relative; }
.cal-day-mlate::after {
  content: ''; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold); border: 1px solid #fff;
}
.dot-mlate { background: var(--gold); }
.st-mlate { color: var(--gold-dark) !important; }
@media print { .cal-day-mlate::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.status-btn {
  padding: 6px 10px; font-size: 11px; font-weight: 700; border-radius: var(--radius);
  border: 1px solid var(--slate-200); background: #fff; color: var(--slate-500);
}
.status-btn.on-present { background: #059669; border-color: #059669; color: #fff; }
.status-btn.on-absent { background: #e11d48; border-color: #e11d48; color: #fff; }
.status-btn.on-late { background: #d97706; border-color: #d97706; color: #fff; }
.status-btn.on-excused { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ------------------ Modals ------------------ */
.overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px;
  overflow-y: auto; backdrop-filter: blur(2px);
}
.modal {
  background: #fff; border-radius: var(--radius-xl); width: 100%; max-width: 560px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35); overflow: hidden; margin: auto;
}
.modal.wide { max-width: 820px; }
.modal.narrow { max-width: 400px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--slate-150); background: var(--slate-50); }
.modal-head h3 { font-size: 15px; color: var(--slate-800); display: flex; align-items: center; gap: 8px; }
.modal-body { padding: 20px; max-height: 66vh; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px;
  border-top: 1px solid var(--slate-150); background: var(--slate-50); }
.x-btn { border: 0; background: transparent; color: var(--slate-400); padding: 4px; border-radius: 50%; display: inline-flex; }
.x-btn:hover { background: var(--slate-200); color: var(--slate-600); }

/* ------------------ Toasts ------------------ */
#toasts { position: fixed; bottom: 22px; left: 22px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #0f172a; color: #fff; font-size: 12px; font-weight: 600;
  padding: 12px 16px; border-radius: 10px; border-right: 4px solid var(--gold);
  box-shadow: 0 12px 30px rgba(0,0,0,.25); animation: toast-in .25s ease-out;
  max-width: 380px;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------ Welcome / marketing ------------------ */
.hero {
  position: relative; overflow: hidden; color: #fff; border-radius: 26px; padding: 52px 40px;
  background: linear-gradient(135deg,#0f172a 0%, #1e293b 55%, #020617 100%);
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 24px 60px rgba(2,6,23,.28);
  isolation: isolate;
}
/* طبقة توهّج ذهبي/أخضر تتحرك بهدوء خلف المحتوى */
.hero::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; z-index: -2;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(52,211,153,.22), transparent 62%),
              radial-gradient(circle at 70% 70%, rgba(212,175,55,.20), transparent 60%);
  filter: blur(6px);
  animation: heroAura 16s ease-in-out infinite alternate;
}
/* شبكة نقاط خفيفة تعطي عمقاً مؤسسياً */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(148,163,184,.16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 72%);
          mask-image: linear-gradient(to left, #000 0%, transparent 72%);
}
@keyframes heroAura {
  0%   { transform: translate(0,0) scale(1);        opacity: .85; }
  50%  { transform: translate(-40px,30px) scale(1.12); opacity: 1; }
  100% { transform: translate(20px,-24px) scale(1.05); opacity: .9; }
}
.hero > * { position: relative; z-index: 1; }

/* تخطيط عمودين: النص + الموكاب */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center; }
.hero-copy { animation: heroRise .7s cubic-bezier(.22,1,.36,1) both; }

.hero h1 { font-size: 32px; font-weight: 900; line-height: 1.35; margin-bottom: 10px; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg,#34d399,#6ee7b7 45%,#facc15);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: #cbd5e1; font-size: 13px; max-width: 620px; line-height: 2; }
.hero .pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3);
  color: #6ee7b7; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
  backdrop-filter: blur(4px);
}
.hero .pill .live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
.hero .pill .live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #34d399;
  animation: livePing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes livePing { 0% { transform: scale(1); opacity: .7; } 80%,100% { transform: scale(2.6); opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; } }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 26px; max-width: 560px; }
.hero-stat {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.hero-stat:hover { transform: translateY(-3px); border-color: rgba(212,175,55,.5); background: rgba(255,255,255,.1); }
.hero-stat b { display: block; font-size: 20px; font-weight: 900; color: var(--gold); line-height: 1.2; }
.hero-stat span { font-size: 10px; color: #cbd5e1; }

/* ============ الموكاب الحي (لابتوب + جوال + دوائر) ============ */
.hero-visual { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center;
  animation: heroRise .8s cubic-bezier(.22,1,.36,1) both; animation-delay: .2s; }

/* دوائر مدارية تدور باستمرار */
.orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(148,163,184,.25); }
.orbit-1 { width: 300px; height: 300px; animation: spin 26s linear infinite; }
.orbit-2 { width: 210px; height: 210px; border-color: rgba(212,175,55,.28); animation: spin 18s linear infinite reverse; }
.orbit-dot { position: absolute; border-radius: 50%; }
.orbit-dot-1 { width: 12px; height: 12px; background: #34d399; box-shadow: 0 0 14px rgba(52,211,153,.8);
  top: 50%; left: 50%; margin: -6px; animation: orbitPath 14s linear infinite; }
.orbit-dot-2 { width: 9px; height: 9px; background: var(--gold); box-shadow: 0 0 12px rgba(212,175,55,.8);
  top: 50%; left: 50%; margin: -4.5px; animation: orbitPath2 20s linear infinite; }
@keyframes orbitPath  { from { transform: rotate(0)    translateX(150px) rotate(0); }
                        to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); } }
@keyframes orbitPath2 { from { transform: rotate(0)    translateX(105px) rotate(0); }
                        to   { transform: rotate(-360deg) translateX(105px) rotate(360deg); } }

/* شارات عائمة */
.float-badge { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); border-radius: 16px;
  padding: 10px 14px; box-shadow: 0 12px 28px rgba(2,6,23,.35); }
.float-badge b { font-size: 12px; color: #fff; }
.float-badge span { font-size: 9px; color: #cbd5e1; }
.float-badge-top { top: 6px; right: 4px; width: 74px; height: 74px; border-radius: 50%;
  animation: floatY 5s ease-in-out infinite; }
.float-badge-bottom { bottom: 14px; left: 2px; flex-direction: row; gap: 6px; color: #6ee7b7;
  animation: floatY 6s ease-in-out infinite .8s; }
.float-badge-bottom span { font-size: 11px; font-weight: 700; color: #6ee7b7; }
@keyframes floatY { 50% { transform: translateY(-12px); } }

/* اللابتوب — يطفو بهدوء */
.mock-laptop { position: relative; width: 84%; max-width: 380px; z-index: 3; animation: floatY 7s ease-in-out infinite; }
.mock-screen { background: #0b1220; border: 2px solid rgba(148,163,184,.3); border-radius: 12px 12px 4px 4px;
  padding: 8px; box-shadow: 0 20px 44px rgba(2,6,23,.5); }
.mock-base { height: 12px; margin: 0 auto; width: 116%; margin-right: -8%;
  background: linear-gradient(#cbd5e1,#94a3b8); border-radius: 0 0 10px 10px; }
.mock-base::after { content: ""; display: block; width: 22%; height: 4px; margin: 0 auto;
  background: #64748b; border-radius: 0 0 6px 6px; }
.mock-app { display: flex; gap: 7px; background: #f1f5f9; border-radius: 6px; padding: 8px; height: 176px; overflow: hidden; }
.mock-side { width: 34px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.mock-logo { height: 20px; border-radius: 6px; background: linear-gradient(135deg,var(--primary),#34d399); }
.mock-nav { height: 9px; border-radius: 4px; background: #dbe3ec; }
.mock-nav.is-active { background: var(--primary); }
.mock-main { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.mock-title { height: 11px; width: 55%; border-radius: 4px; background: #cbd5e1; }
.mock-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.mock-card { border-radius: 7px; padding: 7px 6px; color: #fff; }
.mock-card b { font-size: 15px; font-weight: 900; display: block; }
.mock-card i { display: block; height: 4px; width: 60%; margin-top: 4px; border-radius: 3px; background: rgba(255,255,255,.5); }
.mock-card.mc-green { background: linear-gradient(135deg,#1E4D2B,#2f8f4e); }
.mock-card.mc-gold  { background: linear-gradient(135deg,#B8860B,#D4AF37); color: #3f2d00; }
.mock-card.mc-gold i { background: rgba(63,45,0,.4); }
.mock-card.mc-blue  { background: linear-gradient(135deg,#1e40af,#3b82f6); }
.mock-chart { display: flex; align-items: flex-end; gap: 5px; height: 46px; padding: 6px; background: #fff; border-radius: 7px; }
.mock-chart span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(var(--primary),#34d399);
  transform-origin: bottom; animation: barGrow 2.6s ease-in-out infinite; }
.mock-chart span:nth-child(2){ animation-delay:.2s } .mock-chart span:nth-child(3){ animation-delay:.4s }
.mock-chart span:nth-child(4){ animation-delay:.6s } .mock-chart span:nth-child(5){ animation-delay:.8s }
.mock-chart span:nth-child(6){ animation-delay:1s } .mock-chart span:nth-child(7){ animation-delay:1.2s }
@keyframes barGrow { 0%,100% { transform: scaleY(.72); } 50% { transform: scaleY(1); } }
.mock-row { height: 8px; border-radius: 4px; background: #e2e8f0; }
.mock-row.w80 { width: 80%; }

/* الجوال — يطفو بإيقاع مختلف */
.mock-phone { position: absolute; bottom: 8px; left: 8%; width: 92px; z-index: 4;
  background: #0b1220; border: 2px solid rgba(148,163,184,.35); border-radius: 16px; padding: 6px;
  box-shadow: 0 18px 36px rgba(2,6,23,.5); animation: floatY 6s ease-in-out infinite 1.2s; }
.mock-phone-screen { background: #f8fafc; border-radius: 11px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.mock-phone-top { height: 8px; width: 50%; border-radius: 4px; background: #cbd5e1; margin-bottom: 2px; }
.mock-stat { background: linear-gradient(135deg,#1E4D2B,#2f8f4e); border-radius: 8px; padding: 7px; color: #fff; }
.mock-stat.sm { background: linear-gradient(135deg,#B8860B,#D4AF37); color: #3f2d00; }
.mock-stat b { font-size: 15px; font-weight: 900; display: block; }
.mock-stat span { display: block; height: 4px; width: 55%; margin-top: 3px; border-radius: 3px; background: rgba(255,255,255,.55); }
.mock-phone-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; background: #fff; border-radius: 8px; padding: 5px; }
.mock-phone-bars span { flex: 1; border-radius: 2px; background: linear-gradient(#1e40af,#3b82f6);
  animation: barGrow 2.8s ease-in-out infinite; }
.mock-phone-bars span:nth-child(2){ animation-delay:.3s } .mock-phone-bars span:nth-child(3){ animation-delay:.6s }
.mock-phone-bars span:nth-child(4){ animation-delay:.9s }

/* دخول متسلسل لعناصر الـ hero */
.hero > .pill    { animation: heroRise .7s cubic-bezier(.22,1,.36,1) both; animation-delay: .05s; }
.hero > h1       { animation: heroRise .7s cubic-bezier(.22,1,.36,1) both; animation-delay: .16s; }
.hero > p        { animation: heroRise .7s cubic-bezier(.22,1,.36,1) both; animation-delay: .27s; }
.hero-actions    { animation: heroRise .7s cubic-bezier(.22,1,.36,1) both; animation-delay: .38s; }
.hero-stats      { animation: heroRise .7s cubic-bezier(.22,1,.36,1) both; animation-delay: .49s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* كشف تدريجي عند التمرير (يُفعّل من app.js) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

.price-card {
  background: #fff; border: 1px solid var(--slate-200); border-radius: 18px; padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; position: relative;
}
.price-card { transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease; }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15,23,42,.09); }
.price-card.featured { border: 2px solid var(--emerald); box-shadow: 0 14px 34px rgba(5,150,105,.12); }
.price-card.featured:hover { transform: translateY(-7px); box-shadow: 0 24px 48px rgba(5,150,105,.18); }
.price-card .flag { position: absolute; top: -12px; right: 22px; background: var(--emerald); color: #fff;
  font-size: 9px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.price-card .corner { position: absolute; top: 14px; left: 14px; }
.price-card .amount { margin: 18px 0; }
.price-card .amount b { font-size: 30px; font-weight: 900; color: var(--slate-800); }
.price-card .amount span { font-size: 12px; font-weight: 700; color: var(--slate-500); margin-right: 4px; }
.price-card ul li { font-size: 11px; color: var(--slate-500); margin-bottom: 7px; }
.price-card ul li.hi { color: #047857; font-weight: 700; }

.portal-card {
  background: #fff; border: 1px solid var(--slate-200); border-radius: 18px; padding: 22px;
  text-align: center;
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease;
}
.portal-card:hover { border-color: var(--gold); transform: translateY(-6px); box-shadow: 0 18px 38px rgba(15,23,42,.1); }
.portal-card .ring { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 12px; transition: transform .28s cubic-bezier(.22,1,.36,1); }
.portal-card:hover .ring { transform: translateY(-2px) scale(1.06); }

/* أيقونات البوابات: تدرّج ناعم + توهّج ملوّن + لمعة عند المرور (شاشة الترحيب فقط) */
.portals-section .portal-card .ring { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5); }
.portals-section .portal-card .ring.ico-green {
  background: linear-gradient(140deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%), linear-gradient(135deg,#1E4D2B,#2f8f4e);
  color: #fff; box-shadow: 0 8px 20px -5px rgba(30,77,43,.6), inset 0 1px 1px rgba(255,255,255,.4); }
.portals-section .portal-card .ring.ico-blue {
  background: linear-gradient(140deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%), linear-gradient(135deg,#1e40af,#3b82f6);
  color: #fff; box-shadow: 0 8px 20px -5px rgba(37,99,235,.6), inset 0 1px 1px rgba(255,255,255,.4); }
.portals-section .portal-card .ring.ico-gold {
  background: linear-gradient(140deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%), linear-gradient(135deg,#B8860B,#D4AF37);
  color: #3f2d00; box-shadow: 0 8px 20px -5px rgba(212,175,55,.6), inset 0 1px 1px rgba(255,255,255,.5); }
.portals-section .portal-card .ring::after {
  content: ""; position: absolute; top: -60%; left: -30%; width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-160%) skewX(-16deg); transition: transform .6s ease;
}
.portals-section .portal-card:hover .ring::after { transform: translateX(320%) skewX(-16deg); }

.coupon-chip {
  border: 1px dashed var(--gold); background: linear-gradient(135deg,#FDFBF7,#F5EFE0);
  border-radius: 12px; padding: 12px 16px; min-width: 190px;
}
.coupon-chip code { font-family: monospace; font-size: 15px; font-weight: 800; color: var(--gold-dark); }


/* ------------------ Enhanced welcome sections ------------------ */
.welcome-stack { gap: 36px; }
.home-section {
  background: #fff; border: 1px solid var(--slate-200); border-radius: 22px; padding: 24px;
  box-shadow: 0 10px 30px rgba(15,23,42,.035);
}
.home-section.portals-section { border-color: rgba(30,77,43,.22); }
/* صف مدمج: البوابات (يمين، أضيق) + المميزات (يسار، أوسع) لاستغلال المساحة */
.portals-features-row { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.portals-features-row > .home-section { margin: 0; height: 100%; }
.portals-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; max-width: none; margin: 0; }
@media (max-width: 980px) {
  .portals-features-row { grid-template-columns: 1fr; }
  .portals-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) { .portals-2 { grid-template-columns: 1fr; } }
.home-section-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
  margin-bottom: 20px;
}
.home-section-head h2 { font-size: 19px; color: var(--slate-800); margin-top: 3px; }
.home-section-head p { font-size: 11px; line-height: 1.9; color: var(--slate-500); margin-top: 4px; }
.section-kicker { display: block; font-size: 9px; font-weight: 800; color: var(--primary); letter-spacing: .2px; }
.section-head-icon {
  width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--primary-light); color: var(--primary); border: 1px solid var(--slate-150);
}
.portal-card h3 { font-size: 13px; color: var(--slate-800); }
.portal-card p { min-height: 48px; margin: 7px 0 15px; line-height: 1.9; }
.feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 17px;
  border: 1px solid var(--slate-200); border-radius: 14px; background: #fff;
  min-height: 122px; box-shadow: 0 5px 16px rgba(15,23,42,.035); transition: .18s;
}
.feature-card:hover, .report-mini-card:hover {
  transform: translateY(-2px); border-color: rgba(30,77,43,.35);
  box-shadow: 0 9px 22px rgba(15,23,42,.07);
}
.feature-card > .ico { width: 46px; height: 46px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.feature-card h3 { font-size: 12px; color: var(--slate-800); margin-bottom: 5px; }
.feature-card p { font-size: 10.5px; color: var(--slate-500); line-height: 1.9; }
.reports-showcase { background: linear-gradient(145deg,#f8fafc,#fff); }
.report-mini-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.report-mini-card {
  display: flex; gap: 11px; padding: 16px; border-radius: 14px; background: #fff;
  border: 1px solid var(--slate-200); min-height: 122px;
  box-shadow: 0 5px 16px rgba(15,23,42,.035); transition: .18s;
}
.report-mini-icon {
  width: 42px; height: 42px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--indigo-bg); color: var(--indigo);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.report-mini-card h3 { font-size: 12px; color: var(--slate-800); margin-bottom: 5px; }
.report-mini-card p { font-size: 10px; color: var(--slate-500); line-height: 1.9; }

/* ألوان بلوكات الواجهة متطابقة مع ألوان أزرار بوابة التقارير والإحصائيات */
.feature-card.tone-primary, .report-mini-card.tone-primary { --card-tone-bg: var(--primary-light); --card-tone-border: rgba(30,77,43,.25); --card-tone-color: var(--primary); --card-tone-solid: var(--primary); --card-tone-icon: #fff; }
.feature-card.tone-gold, .report-mini-card.tone-gold { --card-tone-bg: #fdf6e3; --card-tone-border: rgba(212,175,55,.38); --card-tone-color: var(--gold-dark); --card-tone-solid: var(--gold); --card-tone-icon: #3f2d00; }
.feature-card.tone-indigo, .report-mini-card.tone-indigo { --card-tone-bg: var(--indigo-bg); --card-tone-border: #c7d2fe; --card-tone-color: var(--indigo); --card-tone-solid: var(--indigo); --card-tone-icon: #fff; }
.feature-card.tone-blue, .report-mini-card.tone-blue { --card-tone-bg: #eff6ff; --card-tone-border: #bfdbfe; --card-tone-color: #1d4ed8; --card-tone-solid: #2563eb; --card-tone-icon: #fff; }
.feature-card.tone-green, .report-mini-card.tone-green { --card-tone-bg: var(--emerald-bg); --card-tone-border: #a7f3d0; --card-tone-color: #047857; --card-tone-solid: var(--primary); --card-tone-icon: #fff; }
.feature-card.tone-red, .report-mini-card.tone-red { --card-tone-bg: var(--rose-bg); --card-tone-border: #fecdd3; --card-tone-color: #be123c; --card-tone-solid: var(--rose); --card-tone-icon: #fff; }
.feature-card.tone-amber, .report-mini-card.tone-amber { --card-tone-bg: var(--amber-bg); --card-tone-border: #fde68a; --card-tone-color: #b45309; --card-tone-solid: var(--amber); --card-tone-icon: #fff; }
.feature-card[class*="tone-"], .report-mini-card[class*="tone-"] { background: var(--card-tone-bg); border-color: var(--card-tone-border); }
.feature-card[class*="tone-"] h3, .report-mini-card[class*="tone-"] h3 { color: var(--card-tone-color); }
.feature-card[class*="tone-"] .feature-card-icon, .report-mini-card[class*="tone-"] .report-mini-icon {
  background:
    linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%),
    var(--card-tone-solid);
  color: var(--card-tone-icon); border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--card-tone-solid) 55%, transparent),
              inset 0 1px 1px rgba(255,255,255,.4);
}
/* لمعة داخلية خفيفة على الأيقونة */
.feature-card[class*="tone-"] .feature-card-icon, .report-mini-card[class*="tone-"] .report-mini-icon { position: relative; overflow: hidden; }
.feature-card[class*="tone-"] .feature-card-icon::after, .report-mini-card[class*="tone-"] .report-mini-icon::after {
  content: ""; position: absolute; top: -60%; left: -30%; width: 60%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-140%) skewX(-16deg); transition: transform .55s ease;
}
.feature-card[class*="tone-"]:hover .feature-card-icon, .report-mini-card[class*="tone-"]:hover .report-mini-icon {
  transform: translateY(-2px) scale(1.08) rotate(-3deg);
  box-shadow: 0 12px 24px -4px color-mix(in srgb, var(--card-tone-solid) 65%, transparent),
              inset 0 1px 1px rgba(255,255,255,.5);
}
.feature-card[class*="tone-"]:hover .feature-card-icon::after, .report-mini-card[class*="tone-"]:hover .report-mini-icon::after {
  transform: translateX(260%) skewX(-16deg);
}
.feature-card[class*="tone-"]:hover, .report-mini-card[class*="tone-"]:hover { border-color: var(--card-tone-solid); }
.active-coupons { margin-top: 18px; }
.active-coupons h3 { font-size: 13px; margin-bottom: 9px; }

/* ===== قسم الدعم الفني ===== */
.support-section { border-color: rgba(30,77,43,.22); }
.support-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; }
@media (max-width: 760px) { .support-grid { grid-template-columns: 1fr; } }
.support-card { background: #fff; border: 1px solid var(--slate-200); border-radius: 18px; padding: 24px; }
.support-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }

/* بطاقة التواصل السريع */
.support-contact {
  background: linear-gradient(150deg, #0f3419, #1E4D2B 60%, #123d1f);
  color: #fff; border: 0; display: flex; flex-direction: column; text-align: center; align-items: center;
}
.support-contact h3 { justify-content: center; }
.support-contact .mini { color: #cbebd6; margin-bottom: 18px; }
.support-icon {
  width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; margin-bottom: 14px;
}
.btn-wa {
  background: linear-gradient(135deg,#25D366,#128C7E); color: #fff; font-weight: 800; font-size: 14px;
  padding: 13px 18px; border-radius: 12px; box-shadow: 0 8px 20px rgba(37,211,102,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37,211,102,.5); }
.btn-wa.btn-sm { padding: 8px 12px; font-size: 12.5px; border-radius: 10px; box-shadow: 0 4px 12px rgba(37,211,102,.28); }
.btn-wa.btn-sm svg { width: 14px; height: 14px; }
.share-btn-group { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.support-phone {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: #a7f3d0; font-weight: 700; font-size: 13px;
}
.support-phone:hover { color: #fff; }

/* نموذج الرسالة */
.support-form .mini { color: var(--slate-500); margin-bottom: 14px; }
.field-row { margin-bottom: 10px; }
.support-form textarea.input { resize: vertical; min-height: 90px; font-family: inherit; line-height: 1.7; }
#support-msg-box:not(:empty) { margin-bottom: 12px; }

/* ------------------ Unified reports and analytics portal ------------------ */
.reports-portal { display: flex; flex-direction: column; gap: 14px; }
.reports-portal-head {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-xl);
  padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.reports-portal-title { display: flex; align-items: flex-start; gap: 13px; }
.reports-portal-icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; flex: none;
}
.reports-portal-title h2 { font-size: 18px; color: var(--slate-800); margin: 2px 0 4px; }
.reports-portal-title p { font-size: 10.5px; color: var(--slate-500); line-height: 1.8; max-width: 690px; }
.reports-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px;
  background: var(--emerald-bg); color: #047857; border: 1px solid #a7f3d0; font-size: 10px; font-weight: 700;
}
.report-nav {
  display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px 8px;
}
.report-nav-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 9px 12px;
  border: 1px solid var(--slate-200); border-radius: 10px; background: #fff; color: var(--slate-600);
  font-size: 10.5px; font-weight: 700;
}
.report-nav-btn:hover { transform: translateY(-1px); filter: brightness(.98); }
.report-nav-btn.tone-primary { background: var(--primary-light); border-color: rgba(30,77,43,.25); color: var(--primary); }
.report-nav-btn.tone-gold { background: #fdf6e3; border-color: rgba(212,175,55,.38); color: var(--gold-dark); }
.report-nav-btn.tone-indigo { background: var(--indigo-bg); border-color: #c7d2fe; color: var(--indigo); }
.report-nav-btn.tone-blue { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.report-nav-btn.tone-green { background: var(--emerald-bg); border-color: #a7f3d0; color: #047857; }
.report-nav-btn.tone-red { background: var(--rose-bg); border-color: #fecdd3; color: #be123c; }
.report-nav-btn.tone-amber { background: var(--amber-bg); border-color: #fde68a; color: #b45309; }
.report-nav-btn.tone-primary.active, .report-nav-btn.tone-green.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.report-nav-btn.tone-gold.active { background: var(--gold); border-color: var(--gold); color: #3f2d00; }
.report-nav-btn.tone-indigo.active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.report-nav-btn.tone-blue.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.report-nav-btn.tone-red.active { background: var(--rose); border-color: var(--rose); color: #fff; }
.report-nav-btn.tone-amber.active { background: var(--amber); border-color: var(--amber); color: #fff; }
.reports-portal-body { min-width: 0; }

/* ------------------ Excel import ------------------ */
.excel-import-box {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 15px;
  border: 1px solid var(--slate-200); border-radius: 14px; background: var(--slate-50);
}
.excel-import-box strong { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--slate-800); }
.excel-import-box .mini { margin-top: 5px; line-height: 1.8; }
.excel-file-input { padding: 8px; background: #fff; cursor: pointer; }
.excel-file-input::file-selector-button {
  border: 0; border-radius: 8px; padding: 7px 11px; margin-left: 10px;
  background: var(--primary); color: #fff; font-family: var(--app-font); font-weight: 700; cursor: pointer;
}
.excel-import-box-wide { margin-top: 12px; }

/* ------------------ Login ------------------ */
.login-wrap { max-width: 430px; margin: 30px auto; }
.login-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-xl); overflow: hidden; }
.login-top { background: var(--primary); color: #fff; padding: 22px; text-align: center; }
.login-top.super { background: #0f172a; }
.login-top .ring { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; border: 1px solid rgba(255,255,255,.2); }
.login-body { padding: 22px; }
.hint-box { background: var(--primary-light); border: 1px solid var(--slate-200); border-radius: 10px;
  padding: 10px 12px; font-size: 11px; color: var(--slate-600); margin-bottom: 14px; }

/* ------------------ Banners ------------------ */
.banner { border-radius: var(--radius-lg); padding: 16px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.banner-ok { background: var(--emerald-bg); border: 1px solid #a7f3d0; }
.banner-warn { background: var(--amber-bg); border: 1px solid #fde68a; }
.banner-bad { background: var(--rose-bg); border: 1px solid #fecdd3; }
.locked {
  background: #fff; border: 1px solid var(--slate-150); border-radius: var(--radius-xl);
  padding: 48px 24px; text-align: center;
}
.locked .ring { width: 64px; height: 64px; border-radius: 50%; background: #fef2f2; color: #dc2626;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; border: 1px solid #fee2e2; }

/* ------------------ Printable documents ------------------ */
.doc-preview { background: var(--slate-50); padding: 22px; display: flex; justify-content: center; }
.doc {
  width: 100%; max-width: 560px; background: #fff; border: 1px solid #d1d5db; padding: 32px;
  border-radius: 8px; color: #111827; direction: rtl; text-align: right; line-height: 1.9;
}
.doc-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: flex-start; gap: 12px;
  border-bottom: 2px solid #1f2937; padding-bottom: 14px; margin-bottom: 22px; }
.doc-head > .side:first-child { justify-self: start; }
.doc-head > .side:last-child { justify-self: end; }
.doc-head > .doc-emblem { justify-self: center; }
.doc-head .side { font-size: 11px; font-weight: 700; color: #374151; }
.doc-head .side p { margin-bottom: 3px; }
.doc-emblem { display: flex; flex-direction: column; align-items: center; }
.doc-emblem .circle { width: 64px; height: 64px; border: 1px solid #bfa15f; border-radius: 50%;
  padding: 2px; background: #fff; }
.doc-emblem .circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.doc-title { text-align: center; margin-bottom: 22px; }
.doc-title h2 { display: inline-block; font-size: 15px; border-bottom: 3px double #1f2937; padding: 0 16px 4px; }
.doc-body { font-size: 12.5px; }
.doc-body p { margin-bottom: 14px; text-align: justify; }

/* وضع تحرير نص المستند داخل المعاينة (تعديل الكلام قبل الطباعة) */
.doc-editing .doc-body,
.doc-editing .doc-title h2 {
  outline: 2px dashed var(--gold);
  outline-offset: 5px;
  background: #fffdf3;
  border-radius: 6px;
  cursor: text;
}
.doc-editing [contenteditable="true"]:focus { outline-color: #b45309; }
@media print {
  .doc-editing .doc-body,
  .doc-editing .doc-title h2 { outline: 0 !important; background: transparent !important; }
}
.doc-body .u { text-decoration: underline; font-weight: 800; }
.doc-body .red { color: #be123c; font-weight: 900; border-bottom: 1px solid #e11d48; padding: 0 4px; }
.doc-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid #d1d5db;
  margin-top: 32px; padding-top: 24px; font-size: 11px; text-align: center; }
.doc-signs .lbl { font-weight: 700; color: #374151; margin-bottom: 34px; }
.doc-signs .sig { color: #9ca3af; }
.doc-foot { border-top: 1px solid #e5e7eb; margin-top: 22px; padding-top: 10px;
  font-size: 9px; color: #6b7280; text-align: center; }
table.doc-tbl { width: 100%; border-collapse: collapse; font-size: 11px; margin: 14px 0; }
table.doc-tbl th, table.doc-tbl td { border: 1px solid #d1d5db; padding: 6px 8px; text-align: center; }
table.doc-tbl th { background: #f1f5f9; font-weight: 800; }

/* حقل نموذجي بعنوان (للنوافذ) */
.field-label { display: block; font-size: 11px; font-weight: 700; color: var(--slate-600); margin-bottom: 5px; }

/* تقرير الغياب الشهري للفصل (شبكة أيام الشهر) */
.mcr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.mcr-table { font-size: 10px; margin: 12px 0; }
table.mcr-table th, table.mcr-table td { padding: 3px 2px; border: 1px solid #cbd5e1; }
table.mcr-table th.mcr-day, table.mcr-table td.mcr-day { width: 18px; min-width: 18px; font-size: 9.5px; }
table.mcr-table .mcr-name { text-align: right; white-space: nowrap; min-width: 150px; font-weight: 700; }
table.mcr-table .mcr-serial { width: 26px; min-width: 26px; }
table.mcr-table .mcr-total { width: 46px; min-width: 46px; font-size: 8.5px; font-weight: 800; line-height: 1.25; }
table.mcr-table td.mcr-total { font-size: 11px; }
table.mcr-table td.mcr-b { color: #be123c; font-weight: 800; background: #fff1f2; }
table.mcr-table td.mcr-e { color: #b45309; font-weight: 800; background: #fffbeb; }
.mcr-legend { display: flex; gap: 22px; justify-content: center; margin: 6px 0 4px; font-size: 11px; color: var(--slate-700); }
.mcr-legend strong { display: inline-block; min-width: 20px; text-align: center; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
@media print {
  table.mcr-table { font-size: 8px; }
  table.mcr-table th, table.mcr-table td { padding: 2px 1px; }
  table.mcr-table th.mcr-day, table.mcr-table td.mcr-day { width: auto; min-width: 0; }
  .mcr-scroll { overflow: visible; }
}

/* تعهد ولي الأمر بالالتزام بالحضور */
.guardian-pledge-doc { max-width: 680px; }
.guardian-pledge-data { margin-bottom: 24px !important; }
.guardian-pledge-data th { width: 34%; }
.guardian-absence-count { color: #be123c; }
.guardian-pledge-body { min-height: 150px; padding: 12px 2px 0; }
.guardian-pledge-body p { font-size: 13px; line-height: 2.25; margin-bottom: 18px; }
.doc-signs.guardian-pledge-signs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-top: 38px; padding-top: 22px;
}
.guardian-pledge-signs .lbl { margin-bottom: 20px; font-size: 11px; }
.guardian-sign-line { margin-top: 9px; color: #475569; white-space: nowrap; }
.guardian-sign-line strong { color: #111827; }

/* ملخص تقرير الرخص المهنية داخل المعاينة وورقة الطباعة */
.license-report-stats,
.violation-report-stats,
.student-report-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 9px;
}
.license-report-stat,
.violation-report-stat,
.student-report-stat {
  min-height: 48px; padding: 5px 6px; border: 1px solid #cbd5e1; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: #f8fafc;
}
.license-report-stat span,
.violation-report-stat span,
.student-report-stat span { font-size: 8.5px; line-height: 1.25; font-weight: 800; color: #475569; }
.license-report-stat strong,
.violation-report-stat strong,
.student-report-stat strong { display: block; margin-top: 1px; font-size: 16px; line-height: 1; color: #0f172a; }
.license-report-stat.stat-total { background: #eff6ff; border-color: #bfdbfe; }
.license-report-stat.stat-specialty { background: #ecfdf5; border-color: #a7f3d0; }
.license-report-stat.stat-educational { background: #eef2ff; border-color: #c7d2fe; }
.license-report-stat.stat-issued { background: #fffbeb; border-color: #fde68a; }
.violation-report-stat.stat-active { background: #fff1f2; border-color: #fecdd3; }
.violation-report-stat.stat-processing { background: #fffbeb; border-color: #fde68a; }
.violation-report-stat.stat-closed { background: #ecfdf5; border-color: #a7f3d0; }
.violation-report-stat.stat-records { background: #eef2ff; border-color: #c7d2fe; }
.student-report-stat.stat-students { background: #eff6ff; border-color: #bfdbfe; }
.student-report-stat.stat-classes { background: #eef2ff; border-color: #c7d2fe; }
.student-report-stat.stat-absence { background: #fff1f2; border-color: #fecdd3; }
.student-report-stat.stat-discipline { background: #ecfdf5; border-color: #a7f3d0; }

.print-only { display: none !important; }

/* ------------------ Charts (SVG) ------------------ */
.chart-box { width: 100%; overflow-x: auto; }
.chart-box svg { display: block; max-width: 100%; height: auto; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10px; color: var(--slate-500); margin-top: 8px; }
.chart-legend i { width: 12px; height: 4px; border-radius: 2px; display: inline-block; margin-left: 5px; }

/* ------------------ Clock picker ------------------ */
.clock-face { position: relative; width: 250px; height: 250px; margin: 0 auto; }
.clock-face .num {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--slate-700); border: 0; background: transparent;
}
.clock-face .num.sel { background: var(--primary); color: #fff; }
.ampm-btn { padding: 8px 14px; font-size: 12px; font-weight: 700; border-radius: 8px;
  border: 1px solid var(--slate-200); background: #fff; color: var(--slate-600); }
.ampm-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ------------------ Progress overlay ------------------ */
.spinner { width: 54px; height: 54px; border: 4px solid rgba(255,255,255,.25);
  border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { height: 8px; background: rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--gold); transition: width .3s; }

/* ------------------ Misc helpers ------------------ */
.scroll-y { max-height: 420px; overflow-y: auto; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.gold-line { height: 4px; background: linear-gradient(90deg,var(--primary),var(--gold),var(--primary)); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

@media (max-width: 900px) {
  .feature-grid, .report-mini-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1024px) {
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-2-1, .g-1-2, .g3 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 26px; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-copy { order: 1; }
  .hero-visual { order: 2; min-height: 300px; }
  .hero p { max-width: none; }
  .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: none; }
}
@media (max-width: 640px) {
  .g2, .g3, .g4, .g5 { grid-template-columns: 1fr; }
  .doc-signs.guardian-pledge-signs { grid-template-columns: 1fr; }
  .guardian-sign-line { white-space: normal; }
  .license-report-stats, .violation-report-stats, .student-report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid, .report-mini-grid { grid-template-columns: 1fr; }
  .home-section { padding: 18px; border-radius: 18px; }
  .home-section-head, .reports-portal-head { align-items: flex-start; }
  .section-head-icon, .reports-status { display: none; }
  .reports-portal-title p { line-height: 1.7; }
  .clock-chip, .user-box .u-name, .user-box .u-role { display: none; }
  .cal-grid { grid-template-columns: repeat(6, 1fr); }
  .container { padding: 0 12px; }

  /* الهيدر أصغر وأنسب للجوال */
  .header-inner { height: 58px; gap: 8px; }
  .brand-logo { width: 40px !important; height: 40px !important; }
  .brand h1 { font-size: 14px; }
  .brand-badges { display: none; }

  /* الجداول: تمرير أفقي بدل الانضغاط أو الخروج عن الشاشة */
  .table-wrap, .card, .home-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }

  /* التبويبات: تمرير أفقي بدل التكسّر */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tabs .tab { flex: none; white-space: nowrap; }
  .subtabs { flex-wrap: wrap; }

  /* النوافذ المنبثقة: عرض كامل تقريباً */
  .modal, .modal.wide { width: 96vw !important; max-width: 96vw !important; }
  .modal-body { max-height: 74vh; padding: 16px; }

  /* الهيرو: تصغير العنوان والأزرار للجوال */
  .hero { padding: 30px 20px; border-radius: 20px; }
  .hero h1 { font-size: 23px; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn-lg { flex: 1; min-width: 0; justify-content: center; font-size: 12.5px; padding: 12px 14px; }
  .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .hero-visual { min-height: 260px; }
  .price-card { min-height: auto; }

  /* مركز تصدير تقارير المواظبة: الأزرار كاملة العرض ومتتالية على الجوال */
  .attendance-export-actions {
    width: 100%;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .attendance-export-actions .btn {
    width: 100%;
    max-width: none;
    justify-content: center;
  }

  /* أزرار عامة أسهل للمس */
  .btn { min-height: 40px; }
}

/* جوالات صغيرة جداً */
@media (max-width: 400px) {
  .hero h1 { font-size: 20px; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn-lg { width: 100%; }
  .cal-grid { grid-template-columns: repeat(5, 1fr); }
  .license-report-stats, .violation-report-stats, .student-report-stats { grid-template-columns: 1fr; }
}

/* ==========================================================
   إعدادات الطباعة الاحترافية A4 (منقولة من النظام الأصلي)
   ========================================================== */
/* مصدر مؤقت لتقارير الطباعة الفردية؛ يظهر فقط بعد نسخه إلى مساحة الطباعة. */
.print-source-temp { display: none; }

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
    border: 0.45mm solid #334155;
    border-radius: 10px;
    padding: 6mm;
  }
  html, body {
    background: #fff !important; color: #1a1a1a !important; font-size: 10pt !important;
    width: auto !important; min-width: 0 !important; height: auto !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  body > *:not(#print-root) { display: none !important; }
  #print-root {
    display: block !important; width: 100% !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important;
  }
  /*
     الإطار والحشو مطبّقان على صفحة A4 نفسها عبر @page حتى يتكررا
     تلقائياً في كل صفحة، بما في ذلك صفحات الجداول الطويلة.
     نُخفي عنصر الإطار القديم لتفادي تكرار الحد فوق إطار الصفحة.
  */
  #print-root .print-page-frame { display: none !important; }
  #print-root .print-only { display: block !important; }
  #print-root .print-source-temp { display: block !important; }
  #print-root .departure-individual-document { direction: rtl !important; text-align: right !important; line-height: 1.9 !important; }
  #print-root .departure-individual-note { margin-top: 5mm !important; }
  #print-root .departure-print-header { margin-bottom: 4mm !important; }
  /* تقرير الرسوم البيانية: كل رسم (برأسه وفوتره) في صفحة واحدة كاملة */
  #print-root .charts-doc-page { page-break-inside: avoid !important; break-inside: avoid !important; }
  #print-root .charts-doc-page .doc-head,
  #print-root .charts-doc-page .doc-title,
  #print-root .charts-doc-page .doc-foot,
  #print-root .charts-doc-page h2,
  #print-root .charts-doc-page p { page-break-inside: avoid !important; break-inside: avoid !important; page-break-before: auto !important; page-break-after: auto !important; }
  #print-root .charts-doc-figure { margin: 4mm 0; padding: 3mm; border: 0.4mm solid #cbd5e1; border-radius: 6px; page-break-inside: avoid !important; break-inside: avoid !important; }
  #print-root .charts-doc-figure svg { width: 100% !important; height: 82mm !important; display: block; }
  /* تقرير الإحصائيات العامة */
  #print-root .gen-figure { page-break-inside: avoid !important; break-inside: avoid !important; }
  #print-root .gen-figure svg { height: 74mm !important; }
  #print-root .gen-figure .fig-cap { text-align: center; font-size: 10.5pt; font-weight: 700; color: #1E4D2B; margin-bottom: 2mm; }
  #print-root .doc-subtitle { font-size: 12pt !important; color: #1E4D2B !important; margin: 5mm 0 2mm !important; padding-bottom: 1mm; border-bottom: 0.5mm solid #1E4D2B; page-break-after: avoid !important; }
  /* تقرير سجل المواظبة: التقويم البصري والمفتاح */
  #print-root .attendance-cal-print .cal-grid { display: grid !important; grid-template-columns: repeat(10, 1fr) !important; gap: 2mm !important; }
  #print-root .attendance-cal-print .cal-day { aspect-ratio: 1 !important; display: flex !important; align-items: center; justify-content: center; border-radius: 1.5mm !important; font-size: 8pt !important; font-weight: 700 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-root .attendance-cal-print .cal-day.st-present { background: #16a34a !important; }
  #print-root .attendance-cal-print .cal-day.st-absent { background: #dc2626 !important; }
  #print-root .attendance-cal-print .cal-day.st-late { background: #d97706 !important; }
  #print-root .attendance-cal-print .cal-day.st-excused { background: #2563eb !important; }
  #print-root .cal-legend-print { display: flex !important; gap: 6mm; justify-content: center; margin-top: 3mm; font-size: 9pt; }
  #print-root .cal-legend-print span { display: inline-flex; align-items: center; gap: 1.5mm; }
  #print-root .cal-legend-print .dot { width: 3mm; height: 3mm; border-radius: 50%; display: inline-block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-root .cal-legend-print .dot.st-present { background: #16a34a !important; }
  #print-root .cal-legend-print .dot.st-absent { background: #dc2626 !important; }
  #print-root .cal-legend-print .dot.st-late { background: #d97706 !important; }
  #print-root .cal-legend-print .dot.st-excused { background: #2563eb !important; }
  #print-root .departure-print-document { direction: rtl !important; text-align: right !important; line-height: 1.9 !important; }
  #print-root .departure-print-footer { margin-top: 5mm !important; }
  #print-root .departure-print-table table { margin-top: 0 !important; }
  #print-root .license-report-stats,
  #print-root .violation-report-stats,
  #print-root .student-report-stats {
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2mm !important; margin: 0 0 2.5mm !important;
    page-break-inside: avoid !important; break-inside: avoid !important;
  }
  #print-root .license-report-stat,
  #print-root .violation-report-stat,
  #print-root .student-report-stat {
    min-height: 11mm !important; padding: 1.2mm 1mm !important; border-radius: 10px !important;
    page-break-inside: avoid !important; break-inside: avoid !important;
  }
  #print-root .license-report-stat span,
  #print-root .violation-report-stat span,
  #print-root .student-report-stat span { font-size: 7.5pt !important; line-height: 1.15 !important; }
  #print-root .license-report-stat strong,
  #print-root .violation-report-stat strong,
  #print-root .student-report-stat strong { margin-top: .5mm !important; font-size: 12pt !important; line-height: 1 !important; }
  #print-root .professional-license-table,
  #print-root .administrative-violations-table,
  #print-root .student-summary-table { margin-top: 0 !important; }
  #print-root .doc, #print-root .doc-wide {
    background: #fff !important; color: #111 !important; width: 100% !important; max-width: none !important;
    min-width: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important; overflow: visible !important;
    page-break-inside: auto !important; break-inside: auto !important;
  }
  #print-root .table-wrap, #print-root .chart-box {
    width: 100% !important; max-width: 100% !important; overflow: visible !important;
  }
  #print-root table {
    width: 100% !important; max-width: 100% !important; border-collapse: collapse !important;
    table-layout: auto !important; page-break-inside: auto !important; break-inside: auto !important;
    font-size: 8.5pt !important;
  }
  #print-root tr { page-break-inside: avoid !important; break-inside: avoid !important; }
  #print-root thead { display: table-header-group !important; background: #f1f5f9 !important; }
  #print-root tfoot { display: table-footer-group !important; }
  #print-root th, #print-root td {
    border: 1px solid #cbd5e1 !important; padding: 4px 5px !important; color: #111 !important;
    min-width: 0 !important; max-width: none !important; white-space: normal !important;
    overflow-wrap: anywhere !important; word-break: normal !important;
  }
  #print-root.print-landscape table { font-size: 8pt !important; }
  #print-root.print-landscape th, #print-root.print-landscape td { padding: 3px 4px !important; }
  #print-root .doc-head, #print-root .doc-title, #print-root .doc-signs, #print-root .doc-foot,
  #print-root h1, #print-root h2, #print-root h3, #print-root p {
    page-break-inside: avoid !important; break-inside: avoid !important;
  }
  #print-root canvas, #print-root svg {
    max-width: 100% !important; height: auto !important; page-break-inside: avoid !important; break-inside: avoid !important;
  }
  button, .no-print { display: none !important; }
  .page-break { page-break-before: always !important; break-before: page !important; height: 0 !important; }
}

#print-root { display: none; }

/* تثبيت عرض التاريخ الهجري مع ظهور حرف هـ على يسار التاريخ */
.hijri-date-value {
  display: inline-flex;
  flex-direction: row;
  direction: rtl;
  align-items: baseline;
  gap: .28em;
  unicode-bidi: isolate;
  white-space: nowrap;
  vertical-align: baseline;
}
.hijri-date-number {
  direction: ltr;
  unicode-bidi: isolate;
}
.hijri-date-suffix {
  direction: rtl;
  unicode-bidi: isolate;
}
.hijri-date-input {
  direction: rtl !important;
  unicode-bidi: plaintext;
  text-align: center;
}

/* ------------------ احترام تفضيل تقليل الحركة (إمكانية الوصول) ------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero::before { animation: none !important; }
}

/* ============================================================
   إعادة تصميم الواجهة الرئيسية (نمط جديد + لمسة ذهبية)
   ============================================================ */

/* شريط تنقل الصفحة الرئيسية */
.welcome-nav {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--slate-200); border-radius: 16px;
  padding: 10px 18px; margin-bottom: 18px; position: sticky; top: 12px; z-index: 30;
  box-shadow: 0 6px 20px rgba(15,23,42,.05);
}
.wnav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.wnav-link {
  font-size: 12.5px; font-weight: 700; color: var(--slate-600);
  padding: 8px 14px; border-radius: 10px; transition: .18s; cursor: pointer;
}
.wnav-link:hover { background: var(--slate-100); color: var(--primary); }
.wnav-link.active { color: var(--primary); background: var(--primary-light); position: relative; }
.wnav-link.active::after {
  content: ""; position: absolute; bottom: 3px; right: 14px; left: 14px; height: 2px;
  background: var(--gold); border-radius: 2px;
}
@media (max-width: 720px) {
  .welcome-nav { flex-direction: column; gap: 10px; position: static; }
  .wnav-links { justify-content: center; }
}

/* شريط الثقة */
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  background: #fff; border: 1px solid var(--slate-200); border-radius: 18px;
  padding: 18px 20px; margin-bottom: 18px;
}
.trust-item { display: flex; align-items: center; gap: 11px; }
.trust-item svg {
  flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a); color: var(--gold-dark);
  border: 1px solid #fcd34d;
}
.trust-item b { display: block; font-size: 13px; color: var(--slate-800); }
.trust-item span { font-size: 10px; color: var(--slate-500); }
@media (max-width: 860px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .trust-bar { grid-template-columns: 1fr; } }

/* الأسئلة الشائعة */
.faq-section { border-color: rgba(212,175,55,.28); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--slate-200); border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq-item.open { border-color: var(--gold); box-shadow: 0 6px 18px rgba(212,175,55,.12); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 18px; background: #fff; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--slate-800); text-align: right;
}
.faq-q:hover { background: var(--slate-50); }
.faq-q svg { flex: none; color: var(--gold-dark); transition: transform .25s; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.faq-item.open .faq-a { max-height: 320px; padding: 0 18px 16px; }
.faq-a p { font-size: 12px; line-height: 2; color: var(--slate-600); margin: 0; }

/* CTA سفلي */
.bottom-cta {
  text-align: center; color: #fff; border-radius: 24px; padding: 40px 30px; margin-top: 4px;
  background: linear-gradient(135deg, #0f3419 0%, #1E4D2B 55%, #123d1f 100%);
  position: relative; overflow: hidden;
}
.bottom-cta::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.18), transparent 65%); z-index: 0;
}
.bottom-cta > * { position: relative; z-index: 1; }
.cta-icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: rgba(212,175,55,.18); border: 1px solid rgba(212,175,55,.4); color: var(--gold);
}
.bottom-cta h2 { font-size: 22px; font-weight: 900; margin-bottom: 8px; }
.bottom-cta p { font-size: 13px; color: #cbebd6; max-width: 560px; margin: 0 auto 20px; line-height: 1.9; }

/* ============================================================
   النمط الجديد المطابق للصورة (هيدر أبيض + هيرو فاتح)
   ============================================================ */

/* هيدر داكن للصفحة الرئيسية */
.site-header.welcome-mode {
  background: #0B131E; border-bottom: 1px solid #1E293B;
  box-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.site-header.welcome-mode .platform-name { color: #fff; }
.site-header.welcome-mode .platform-tagline { color: #94a3b8; }
.site-header.welcome-mode .clock-chip {
  background: #111A26; color: #cbd5e1; border-color: #1E293B;
}
.site-header.welcome-mode .clock-chip svg { color: var(--gold); }
.site-header.welcome-mode .brand-home-link:hover { background: rgba(255,255,255,.05); }
.site-header.welcome-mode .brand-logo-platform { border-color: #1E293B; background: #111A26; }

/* الهيرو الفاتح */
.hero-light {
  background: linear-gradient(180deg, #fff 0%, #f4f9f5 100%);
  border: 1px solid var(--slate-200); color: var(--slate-800);
  box-shadow: 0 10px 40px rgba(15,23,42,.05);
}
.hero-light::before, .hero-light::after { opacity: .5; }
.hero-light h1 { color: var(--slate-900); }
.hero-light h1 em { color: var(--primary); font-style: normal; }
.hero-light p { color: var(--slate-600); }
.pill-light {
  background: var(--primary-light); color: var(--primary);
  border: 1px solid rgba(30,77,43,.2);
}
.pill-light .live { background: var(--primary); }
.hero-stats-light .hero-stat {
  background: #fff; border: 1px solid var(--slate-200);
}
.hero-stats-light .hero-stat b { color: var(--primary); }
.hero-stats-light .hero-stat span { color: var(--slate-500); }
.btn-outline-dark {
  background: #fff; border: 1.5px solid var(--slate-300); color: var(--slate-700);
}
.btn-outline-dark:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ============================================================
   قائمة التنقل في الهيدر + بانر CTA العلوي + تحسين الشارة
   ============================================================ */

/* قائمة التنقل داخل الهيدر (الصفحة الرئيسية) */
.header-nav { display: flex; gap: 4px; align-items: center; margin: 0 auto; }
.hnav-link {
  font-size: 13px; font-weight: 700; color: var(--slate-600);
  padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: .18s; white-space: nowrap;
}
.hnav-link:hover { background: var(--slate-100); color: var(--primary); }
.hnav-link.active { color: var(--primary); background: var(--primary-light); position: relative; }
.hnav-link.active::after {
  content: ""; position: absolute; bottom: 4px; right: 16px; left: 16px; height: 2.5px;
  background: var(--gold); border-radius: 2px;
}
@media (max-width: 900px) {
  .header-nav { display: none; }
}

/* الشارة الخضراء الواضحة في الهيرو */
.pill-light {
  background: var(--primary) !important; color: #fff !important;
  border: 0 !important; font-weight: 700;
  box-shadow: 0 4px 12px rgba(30,77,43,.25);
}
.pill-light .live { background: #fff !important; }

/* بانر ابدأ الآن العلوي (نمط الصورة) */
.top-cta-banner {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(120deg, #ecfdf3 0%, #fff 60%);
  border: 1px solid rgba(30,77,43,.18); border-right: 5px solid var(--primary);
  border-radius: 18px; padding: 20px 24px; margin-bottom: 18px;
}
.top-cta-illus {
  position: relative; flex: none; width: 62px; height: 62px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--slate-200); color: var(--primary);
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.top-cta-illus .tci-check {
  position: absolute; bottom: -6px; left: -6px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #3f2d00; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.top-cta-text { flex: 1; }
.top-cta-text h2 { font-size: 17px; font-weight: 900; color: var(--slate-900); margin-bottom: 4px; }
.top-cta-text p { font-size: 12px; color: var(--slate-600); line-height: 1.8; margin: 0; }
.top-cta-btn { flex: none; }
@media (max-width: 720px) {
  .top-cta-banner { flex-direction: column; text-align: center; }
  .top-cta-text h2 { font-size: 15px; }
}

/* ============================================================
   الوضع الداكن للصفحة الرئيسية (تحويل التصميم المرسل لـ CSS محلي)
   ============================================================ */
.welcome-dark {
  --wd-bg: #0B131E;
  --wd-card: #111A26;
  --wd-border: #1E293B;
  --wd-text: #F8FAFC;
  --wd-muted: #94a3b8;
  background: var(--wd-bg); color: var(--wd-text);
  border-radius: 0; padding: 8px 0;
}
/* خلفية الصفحة كلها داكنة على welcome */
body:has(.welcome-dark) { background: #0B131E; }
.welcome-dark .home-section,
.welcome-dark .hero-dark,
.welcome-dark .trust-bar,
.welcome-dark .top-cta-banner,
.welcome-dark .price-card,
.welcome-dark .faq-item,
.welcome-dark .support-card,
.welcome-dark .portal-card,
.welcome-dark .feature-card,
.welcome-dark .report-mini-card,
.welcome-dark .stat-mini {
  background: var(--wd-card) !important;
  border-color: var(--wd-border) !important;
  color: var(--wd-text);
}
/* الهيرو الداكن */
.hero-dark {
  background: linear-gradient(135deg, #0d1a2b 0%, #0B131E 60%) !important;
  border: 1px solid var(--wd-border);
}
.hero-dark h1 { color: #fff; }
.hero-dark h1 em { color: var(--brand-green, #10B981); font-style: normal; }
.hero-dark p { color: #cbd5e1; }
.pill-dark { background: rgba(16,185,129,.12); color: #34D399; border: 1px solid rgba(16,185,129,.3); }
.pill-dark .live { background: #34D399; }
.hero-stats-dark .hero-stat { background: #0d1a2b !important; border: 1px solid var(--wd-border) !important; }
.hero-stats-dark .hero-stat b { color: #34D399; }
.hero-stats-dark .hero-stat span { color: var(--wd-muted); }

/* العناوين والنصوص داخل الوضع الداكن */
.welcome-dark h2, .welcome-dark h3 { color: #fff !important; }
.welcome-dark .home-section-head p,
.welcome-dark .mini,
.welcome-dark .tiny,
.welcome-dark p { color: var(--wd-muted); }
.welcome-dark .section-kicker { color: #34D399 !important; }
.welcome-dark .section-head-icon { background: rgba(16,185,129,.1) !important; border-color: rgba(16,185,129,.25) !important; color: #34D399 !important; }

/* البطاقات: أيقونات */
.welcome-dark .feature-card-icon,
.welcome-dark .report-mini-icon { background: rgba(16,185,129,.12) !important; color: #34D399 !important; }
.welcome-dark .portal-card .ring.ico-green { background: rgba(16,185,129,.15) !important; color: #34D399 !important; }
.welcome-dark .portal-card .ring.ico-blue { background: rgba(59,130,246,.15) !important; color: #60a5fa !important; }

/* الباقات */
.welcome-dark .price-card.featured { border-color: #10B981 !important; box-shadow: 0 0 0 1px #10B981, 0 20px 40px rgba(16,185,129,.15) !important; }
.welcome-dark .price-card .amount b { color: #fff; }
.welcome-dark .price-card ul li { color: #cbd5e1; }

/* الأسئلة الشائعة */
.welcome-dark .faq-q { background: var(--wd-card) !important; color: #fff !important; }
.welcome-dark .faq-q:hover { background: #0d1a2b !important; }
.welcome-dark .faq-item.open { border-color: #10B981 !important; }
.welcome-dark .faq-a p { color: var(--wd-muted); }
.welcome-dark .faq-q svg { color: var(--gold); }

/* شريط الثقة */
.welcome-dark .trust-item b { color: #fff; }
.welcome-dark .trust-item span { color: var(--wd-muted); }

/* بانر CTA العلوي داكن */
.welcome-dark .top-cta-banner {
  background: linear-gradient(120deg, #0e3022 0%, #111A26 60%) !important;
  border-color: rgba(16,185,129,.25) !important; border-right-color: #10B981 !important;
}
.welcome-dark .top-cta-text h2 { color: #fff !important; }
.welcome-dark .top-cta-illus { background: #0d1a2b !important; border-color: var(--wd-border) !important; color: #34D399 !important; }

/* الدعم */
.welcome-dark .support-form .input { background: #0d1a2b; border-color: var(--wd-border); color: #fff; }
.welcome-dark .support-form .input::placeholder { color: #64748b; }
.welcome-dark .field-row label { color: #cbd5e1; }

/* أزرار الحدود في الوضع الداكن */
.welcome-dark .btn-outline-dark {
  background: transparent; border: 1.5px solid var(--wd-border); color: #cbd5e1;
}
.welcome-dark .btn-outline-dark:hover { border-color: #10B981; color: #34D399; background: rgba(16,185,129,.08); }
.welcome-dark .btn.btn-block:not(.btn-primary):not(.btn-gold):not(.btn-emerald) {
  background: #0d1a2b; border: 1px solid var(--wd-border); color: #cbd5e1;
}

/* الكوبونات */
.welcome-dark .coupon-chip { background: #0d1a2b !important; border-color: var(--wd-border) !important; }
.welcome-dark .active-coupons h3 { color: #fff !important; }

/* ============================================================
   تكبير خطوط الواجهة الرئيسية لوضوح أعلى (مطابق للتصميم المرسل)
   ============================================================ */
.welcome-dark .hero h1 { font-size: 40px; line-height: 1.3; }
.welcome-dark .hero p { font-size: 16px; line-height: 2; max-width: 680px; }
.welcome-dark .pill { font-size: 13px; padding: 8px 16px; }
.welcome-dark .hero-stat b { font-size: 22px; }
.welcome-dark .hero-stat span { font-size: 11px; }

/* عناوين الأقسام */
.welcome-dark .home-section-head h2 { font-size: 28px; line-height: 1.3; }
.welcome-dark .home-section-head p { font-size: 14px; line-height: 1.9; }
.welcome-dark .section-kicker { font-size: 12px; letter-spacing: .5px; margin-bottom: 6px; }

/* البوابات */
.welcome-dark .portal-card h3 { font-size: 19px; margin-bottom: 8px; }
.welcome-dark .portal-card .mini { font-size: 13px; line-height: 1.9; }
.welcome-dark .portal-card .btn { font-size: 14px; padding: 13px; }

/* المميزات */
.welcome-dark .feature-card h3 { font-size: 16px; margin-bottom: 6px; }
.welcome-dark .feature-card p { font-size: 12.5px; line-height: 1.9; }
.welcome-dark .feature-card-icon { width: 46px; height: 46px; }
.welcome-dark .feature-card-icon svg { width: 22px; height: 22px; }

/* التقارير */
.welcome-dark .report-mini-card h3 { font-size: 14px; }
.welcome-dark .report-mini-card p { font-size: 11.5px; line-height: 1.8; }

/* الباقات */
.welcome-dark .price-card h4 { font-size: 17px; }
.welcome-dark .price-card .amount b { font-size: 34px; }
.welcome-dark .price-card ul li { font-size: 12.5px; line-height: 1.6; }
.welcome-dark .price-card .btn { font-size: 14px; }

/* الأسئلة الشائعة */
.welcome-dark .faq-q { font-size: 16px; padding: 18px 22px; }
.welcome-dark .faq-a p { font-size: 13.5px; line-height: 2; }
.welcome-dark .faq-item.open .faq-a { padding: 0 22px 18px; }

/* شريط الثقة */
.welcome-dark .trust-item b { font-size: 15px; }
.welcome-dark .trust-item span { font-size: 11.5px; }
.welcome-dark .trust-item svg { width: 44px; height: 44px; }

/* بانر CTA العلوي */
.welcome-dark .top-cta-text h2 { font-size: 20px; }
.welcome-dark .top-cta-text p { font-size: 13.5px; line-height: 1.8; }

/* الدعم */
.welcome-dark .support-card h3 { font-size: 18px; }
.welcome-dark .support-card .mini { font-size: 13px; line-height: 1.9; }
.welcome-dark .support-form .input { font-size: 14px; padding: 12px 14px; }

/* على الجوال: تصغير متدرّج */
@media (max-width: 640px) {
  .welcome-dark .hero h1 { font-size: 28px; }
  .welcome-dark .hero p { font-size: 14px; }
  .welcome-dark .home-section-head h2 { font-size: 22px; }
  .welcome-dark .portal-card h3 { font-size: 17px; }
  .welcome-dark .faq-q { font-size: 14px; }
}

/* شارة النسخة الاحترافية بجوار اللوجو */
.platform-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pro-badge {
  font-size: 9.5px; font-weight: 800; padding: 3px 9px; border-radius: 6px;
  background: linear-gradient(135deg, #F4D03F, #D4AF37); color: #3f2d00;
  border: 1px solid rgba(255,255,255,.3); white-space: nowrap;
  box-shadow: 0 2px 6px rgba(212,175,55,.3);
}
@media (max-width: 640px) { .pro-badge { display: none; } }

/* ============================================================
   التسجيل الذاتي + صفحة السداد + شريط التجربة
   ============================================================ */
.login-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--slate-400); font-size: 11px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--slate-200); }

.trial-days-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-right: 8px;
  background: rgba(212,175,55,.15); color: var(--gold-dark); border: 1px solid rgba(212,175,55,.35);
  padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 800;
}

/* صفحة السداد */
.pay-school-info {
  background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px;
}
.pay-plans { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pay-plan {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border: 2px solid var(--slate-200); border-radius: 14px; cursor: pointer;
  transition: .18s; background: #fff;
}
.pay-plan:hover { border-color: var(--gold); }
.pay-plan.selected { border-color: var(--gold); background: #fffbeb; box-shadow: 0 4px 14px rgba(212,175,55,.18); }
.pay-plan.featured { border-color: var(--primary); }
.pay-plan .pay-price { font-size: 26px; font-weight: 900; color: var(--primary); }
.pay-plan .pay-price span { font-size: 14px; margin-right: 2px; }
.pay-badge {
  position: absolute; top: -10px; left: 14px; background: var(--primary); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 10px; border-radius: 10px;
}

/* ==========================================================
   صفحة الدفع داخل نافذة الاشتراك — PayPal Smart Buttons
   ========================================================== */
.checkout-modal {
  max-width: 680px;
  border-radius: 18px;
  border: 1px solid #e4e9f2;
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
  background: #fff;
}
.checkout-modal-head {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid #e8edf4;
  background: #fff;
}
.checkout-modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #172033;
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkout-modal-body {
  max-height: 78vh;
  padding: 0 24px 26px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
}
.checkout-lock-note {
  margin: 18px 0 0;
  padding: 10px 13px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}
.checkout-plan-select {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  align-items: center;
  gap: 10px;
}
.checkout-plan-select label {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.checkout-plan-select .input {
  min-height: 44px;
  background: #fff;
}
.checkout-summary {
  padding: 26px 0 22px;
  border-bottom: 1px solid #edf0f5;
}
.checkout-label {
  display: block;
  margin-bottom: 10px;
  color: #7b8798;
  font-size: 13px;
}
.checkout-price-line {
  direction: ltr;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  color: #1e293b;
}
.checkout-price-line strong {
  font-family: Arial, sans-serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .2px;
}
.checkout-price-line b {
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}
.checkout-price-line span {
  direction: rtl;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
}
.checkout-discount {
  margin-top: 10px;
  color: #047857;
  font-size: 12px;
  text-align: left;
}
.checkout-coupon {
  padding: 20px 0 18px;
}
.checkout-coupon-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.checkout-coupon-row .input {
  min-width: 0;
  min-height: 49px;
  flex: 1;
  border-radius: 12px;
}
.checkout-coupon-row .btn {
  min-width: 105px;
  min-height: 49px;
  border-radius: 12px;
  justify-content: center;
}
.checkout-message {
  margin: 8px 2px 0;
  font-size: 11.5px;
  font-weight: 700;
}
.checkout-message.is-error { color: #b91c1c; }
.checkout-message.is-success { color: #047857; }
.checkout-security {
  margin-bottom: 16px;
  padding: 17px 20px;
  border: 1px solid #dfe5ef;
  border-radius: 13px;
  background: #f5f7fb;
  color: #5e6b7d;
}
.checkout-security-title {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #1f2937;
  font-size: 13px;
}
.checkout-security-title svg { color: #10b981; }
.checkout-security p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.9;
}
.paypal-smart-area {
  direction: ltr;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.paypal-button-slot {
  width: 100%;
  min-height: 0;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.paypal-button-slot iframe { max-width: 100% !important; }
.paypal-buttons-loading {
  min-height: 55px;
  border: 1px solid #e4e8ef;
  border-radius: 5px;
  background: #fafbfc;
  color: #64748b;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 10px;
  direction: rtl;
}
.paypal-buttons-loading span {
  width: 17px;
  height: 17px;
  border: 2px solid #d4d9e2;
  border-top-color: #1e4d2b;
  border-radius: 50%;
  animation: paypal-spin .8s linear infinite;
}
@keyframes paypal-spin { to { transform: rotate(360deg); } }
.paypal-powered-note {
  direction: rtl;
  margin: 4px 0 0;
  color: #8a94a4;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.8;
}
.paypal-powered-note strong {
  direction: ltr;
  display: inline-block;
  color: #1f5b9d;
  font-family: Arial, sans-serif;
  font-style: italic;
  font-size: 13px;
}
.paypal-card-unavailable {
  direction: rtl;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
  font-size: 11px;
}
.paypal-checkout-status {
  direction: rtl;
  margin: 0 0 13px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.7;
}
.paypal-checkout-status.is-loading,
.paypal-checkout-status.is-info {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}
.paypal-checkout-status.is-success {
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}
.paypal-checkout-status.is-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}
.paypal-buttons-fallback { direction: rtl; }
.paypal-fallback-btn {
  min-height: 55px;
  border: 0;
  border-radius: 5px;
  background: #ffc439;
  color: #172c4d;
  font-size: 15px;
  font-weight: 900;
  justify-content: center;
}
.paypal-fallback-btn:hover { background: #f2ba36; }
.paypal-manual-state { direction: rtl; }
.checkout-later {
  display: block;
  margin: 18px auto 0;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-family: var(--app-font);
  font-size: 11px;
  cursor: pointer;
}
.checkout-later:hover { color: #475569; }

@media (max-width: 640px) {
  .checkout-modal { width: 96vw !important; max-width: 96vw !important; }
  .checkout-modal-head { padding: 14px 16px; }
  .checkout-modal-head h3 { font-size: 13.5px; }
  .checkout-modal-body { max-height: 80vh; padding: 0 16px 20px; }
  .checkout-plan-select { grid-template-columns: 1fr; gap: 6px; }
  .checkout-summary { padding-top: 22px; }
  .checkout-price-line strong { font-size: 30px; }
  .checkout-price-line b { font-size: 23px; }
  .checkout-coupon-row { flex-wrap: wrap; }
  .checkout-coupon-row .input { flex-basis: 100%; }
  .checkout-coupon-row .btn { flex: 1; min-width: 0; }
  .checkout-security { padding: 15px; }
}

/* أيام العطلة والإجازات */
.hol-days { display: flex; flex-wrap: wrap; gap: 8px; }
.hol-day { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--slate-200);
  border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; background: #fff; user-select: none; }
.hol-day input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.hol-day.on { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }