/* =====================================================================
   اعرف معنا — Know With Us
   نظام التصميم v3 · «احترافي هادئ» · فاتح + ليلي · RTL/LTR عبر الخصائص المنطقية
   بدون أي اعتماديات
   ===================================================================== */

/* ---------------------------------------------------------------
   1. الرموز (Design Tokens)
   الصفحات تستخدم الرموز الدلالية (--surface, --ink, --primary…)،
   والوضع الليلي يعيد تعريفها فقط — فلا تحتاج أي صفحة لتعديل.
   --------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* الهوية (من الشعار) */
  --brand-50:  #EFF5FD;
  --brand-100: #DCE9FA;
  --brand-200: #B5CFF3;
  --brand-300: #84ACE8;
  --brand-400: #4682D4;
  --brand-500: #0B4EA2;
  --brand-600: #0A4592;
  --brand-700: #083672;
  --brand-800: #062853;

  --green-50:  #EAF7EE;
  --green-100: #CDEDD7;
  --green-300: #6FCB90;
  --green-500: #1B9E3E;
  --green-600: #157F32;
  --green-700: #106026;

  /* كحلي الأقسام الداكنة (الواجهة، الأرقام، التذييل) — ثابت في الوضعين */
  --navy-700: #0E2E5C;
  --navy-800: #0A2142;
  --navy-900: #06152B;

  /* محايدة */
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E5EAF1;
  --gray-300: #D2DAE5;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0B1220;

  /* دلالية */
  --primary:       #0B4EA2;
  --primary-hover: #093F84;
  --primary-soft:  #EFF5FD;
  --primary-soft-2:#DCE9FA;
  --primary-text:  #0A4592;
  --on-primary:    #FFFFFF;

  --accent:       #1B9E3E;
  --accent-hover: #157F32;
  --accent-soft:  #EAF7EE;
  --accent-text:  #137A31;

  --success: #16A34A;  --success-bg: #EDFBF2;  --success-border: #BFEBD0;  --success-text: #166534;
  --warning: #D97706;  --warning-bg: #FFF8EB;  --warning-border: #FBE3B0;  --warning-text: #92400E;
  --danger:  #DC2626;  --danger-bg:  #FEF2F2;  --danger-border:  #F9CACA;  --danger-text:  #991B1B;
  --info:    #0284C7;  --info-bg:    #EEF8FE;  --info-border:    #BFE3F7;  --info-text:    #075985;

  /* أسطح */
  --bg:            #F5F7FB;
  --bg-glow:       rgba(11, 78, 162, .06);
  --surface:       #FFFFFF;
  --surface-2:     #F8FAFC;
  --surface-3:     #EFF3F8;
  --surface-glass: rgba(255, 255, 255, .82);
  --border:        #E6EBF2;
  --border-strong: #D5DDE8;
  --ink:           #0B1220;
  --ink-2:         #3F4B5E;
  --ink-soft:      #64748B;
  --ink-faint:     #94A3B8;
  --overlay:       rgba(6, 21, 43, .5);

  --chat-bg:   #F1F5FA;
  --bubble:    #FFFFFF;
  --bubble-me: #DDF4E5;
  --toast-bg:  #0B1220;

  /* المسافات — سلّم 4px */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* الاستدارة */
  --r-sm: 10px;  --r: 14px;  --r-lg: 18px;  --r-xl: 24px;  --r-2xl: 32px;  --r-full: 999px;

  /* الظلال — طبقتان: حافة قريبة + انتشار واسع خفيف */
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, .05);
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .04), 0 2px 6px rgba(11, 18, 32, .04);
  --shadow-card: 0 1px 2px rgba(11, 18, 32, .04), 0 10px 28px -14px rgba(11, 18, 32, .12);
  --shadow:    0 2px 4px rgba(11, 18, 32, .04), 0 18px 36px -14px rgba(11, 18, 32, .18);
  --shadow-lg: 0 4px 8px rgba(11, 18, 32, .04), 0 36px 72px -28px rgba(11, 18, 32, .32);
  --glow-primary: 0 10px 24px -10px rgba(11, 78, 162, .6);
  --glow-accent:  0 10px 24px -10px rgba(27, 158, 62, .55);
  --ring: 0 0 0 4px rgba(11, 78, 162, .16);

  /* الحركة */
  --ease:        cubic-bezier(.2, .7, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 150ms var(--ease);
  --t:      240ms var(--ease);
  --t-slow: 520ms var(--ease-out);

  /* التخطيط */
  --sidebar-w: 268px;
  --topbar-h: 68px;

  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-en: "IBM Plex Sans Arabic", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
}

/* ---------- الوضع الليلي ----------
   يُفعَّل بـ data-theme="dark" (اختيار المستخدم)، أو تلقائيًا من إعداد الجهاز
   ما لم يختر المستخدم الوضع الفاتح صراحة. الكتلتان متطابقتان عمدًا. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-50:  #10233F;  --brand-100: #152F56;  --brand-200: #21467C;  --brand-300: #3767AE;
  --brand-400: #5C92E2;  --brand-500: #2F6FD6;  --brand-600: #8DB8FF;  --brand-700: #A9CAFF;  --brand-800: #071428;
  --green-50: #0F2E1D;  --green-100: #144129;  --green-300: #6FD994;  --green-500: #22B04B;  --green-600: #4CC870;  --green-700: #7EDB9C;
  --gray-50: #0F1829;  --gray-100: #152033;  --gray-200: #1F2C44;  --gray-300: #2D3D5A;  --gray-400: #5D6C89;
  --gray-500: #8A98B2;  --gray-600: #A9B5CA;  --gray-700: #C6CFDF;  --gray-800: #DCE3EE;  --gray-900: #EEF2F8;

  --primary: #2F6FD6;  --primary-hover: #3E80EA;  --primary-soft: rgba(70, 135, 235, .14);  --primary-soft-2: rgba(70, 135, 235, .26);
  --primary-text: #8DB8FF;
  --accent: #22B04B;  --accent-hover: #2CC258;  --accent-soft: rgba(40, 190, 90, .14);  --accent-text: #6FD994;

  --success: #34C46A;  --success-bg: rgba(52, 196, 106, .12);  --success-border: rgba(52, 196, 106, .3);  --success-text: #7EE2A4;
  --warning: #F0A73A;  --warning-bg: rgba(240, 167, 58, .12);  --warning-border: rgba(240, 167, 58, .3);  --warning-text: #F7C979;
  --danger:  #F26363;  --danger-bg:  rgba(242, 99, 99, .12);   --danger-border:  rgba(242, 99, 99, .3);   --danger-text:  #FFA5A5;
  --info:    #38A8E8;  --info-bg:    rgba(56, 168, 232, .12);  --info-border:    rgba(56, 168, 232, .3);  --info-text:    #93D2F7;

  --bg: #070D1A;  --bg-glow: rgba(47, 111, 214, .12);
  --surface: #0E1628;  --surface-2: #121C31;  --surface-3: #18243D;  --surface-glass: rgba(14, 22, 40, .82);
  --border: #1E2B45;  --border-strong: #2B3B5B;
  --ink: #E8EDF6;  --ink-2: #B7C2D6;  --ink-soft: #8A98B2;  --ink-faint: #5D6C89;
  --overlay: rgba(2, 6, 16, .68);

  --chat-bg: #0B1322;  --bubble: #16223A;  --bubble-me: #143A28;  --toast-bg: #1B2740;  --chip-strength: 45%;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -12px rgba(0, 0, 0, .55);
  --shadow:    0 2px 4px rgba(0, 0, 0, .3), 0 18px 36px -14px rgba(0, 0, 0, .65);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 36px 72px -24px rgba(0, 0, 0, .75);
  --glow-primary: 0 10px 24px -10px rgba(47, 111, 214, .7);
  --glow-accent:  0 10px 24px -10px rgba(34, 176, 75, .6);
  --ring: 0 0 0 4px rgba(70, 135, 235, .28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --brand-50:  #10233F;  --brand-100: #152F56;  --brand-200: #21467C;  --brand-300: #3767AE;
    --brand-400: #5C92E2;  --brand-500: #2F6FD6;  --brand-600: #8DB8FF;  --brand-700: #A9CAFF;  --brand-800: #071428;
    --green-50: #0F2E1D;  --green-100: #144129;  --green-300: #6FD994;  --green-500: #22B04B;  --green-600: #4CC870;  --green-700: #7EDB9C;
    --gray-50: #0F1829;  --gray-100: #152033;  --gray-200: #1F2C44;  --gray-300: #2D3D5A;  --gray-400: #5D6C89;
    --gray-500: #8A98B2;  --gray-600: #A9B5CA;  --gray-700: #C6CFDF;  --gray-800: #DCE3EE;  --gray-900: #EEF2F8;

    --primary: #2F6FD6;  --primary-hover: #3E80EA;  --primary-soft: rgba(70, 135, 235, .14);  --primary-soft-2: rgba(70, 135, 235, .26);
    --primary-text: #8DB8FF;
    --accent: #22B04B;  --accent-hover: #2CC258;  --accent-soft: rgba(40, 190, 90, .14);  --accent-text: #6FD994;

    --success: #34C46A;  --success-bg: rgba(52, 196, 106, .12);  --success-border: rgba(52, 196, 106, .3);  --success-text: #7EE2A4;
    --warning: #F0A73A;  --warning-bg: rgba(240, 167, 58, .12);  --warning-border: rgba(240, 167, 58, .3);  --warning-text: #F7C979;
    --danger:  #F26363;  --danger-bg:  rgba(242, 99, 99, .12);   --danger-border:  rgba(242, 99, 99, .3);   --danger-text:  #FFA5A5;
    --info:    #38A8E8;  --info-bg:    rgba(56, 168, 232, .12);  --info-border:    rgba(56, 168, 232, .3);  --info-text:    #93D2F7;

    --bg: #070D1A;  --bg-glow: rgba(47, 111, 214, .12);
    --surface: #0E1628;  --surface-2: #121C31;  --surface-3: #18243D;  --surface-glass: rgba(14, 22, 40, .82);
    --border: #1E2B45;  --border-strong: #2B3B5B;
    --ink: #E8EDF6;  --ink-2: #B7C2D6;  --ink-soft: #8A98B2;  --ink-faint: #5D6C89;
    --overlay: rgba(2, 6, 16, .68);

    --chat-bg: #0B1322;  --bubble: #16223A;  --bubble-me: #143A28;  --toast-bg: #1B2740;  --chip-strength: 45%;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -12px rgba(0, 0, 0, .55);
    --shadow:    0 2px 4px rgba(0, 0, 0, .3), 0 18px 36px -14px rgba(0, 0, 0, .65);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 36px 72px -24px rgba(0, 0, 0, .75);
    --glow-primary: 0 10px 24px -10px rgba(47, 111, 214, .7);
    --glow-accent:  0 10px 24px -10px rgba(34, 176, 75, .6);
    --ring: 0 0 0 4px rgba(70, 135, 235, .28);
  }
}

html[lang="ar"] { --font: var(--font-ar); }
html[lang="en"] { --font: var(--font-en); }

/* ---------- الشعار حسب الخلفية ----------
   .logo-on-light = النسخة الملوّنة (خلفية فاتحة) · .logo-on-dark = النسخة البيضاء */
.logo-on-dark { display: none !important; }
:root[data-theme="dark"] .logo-on-light { display: none !important; }
:root[data-theme="dark"] .logo-on-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-on-light { display: none !important; }
  :root:not([data-theme="light"]) .logo-on-dark { display: block !important; }
}

/* زر تبديل الوضع: القمر في الفاتح، والشمس في الليلي */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.theme-toggle svg { transition: transform var(--t-slow); }
.theme-toggle:hover svg { transform: rotate(-18deg) scale(1.08); }

/* ---------------------------------------------------------------
   2. إعادة الضبط والطباعة (Typography)
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}

body {
  font-family: var(--font, var(--font-ar));
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--ink);
  background:
    radial-gradient(1200px 460px at 100% -10%, var(--bg-glow), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background-color var(--t), color var(--t);
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

a { color: var(--primary-text); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary); }

/* العناوين بخط العرض — بلا تباعد أحرف في العربية (يكسر اتصال الحروف) */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.4; font-weight: 700; color: var(--ink); text-wrap: balance; }
html[lang="en"] :is(h1, h2, h3, h4) { letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p { text-wrap: pretty; }

/* الأرقام تبقى لاتينية ومتساوية العرض حتى في العربية */
.num, td.num, .stat-value, time { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

::selection { background: var(--primary-soft-2); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* شريط تمرير رفيع يتبع الوضع */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

/* ---------------------------------------------------------------
   3. مساعدات التخطيط
   --------------------------------------------------------------- */
.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--sp-5); }
.container-sm { max-width: 720px; }
.container-xs { max-width: 460px; }

.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); }

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* أعمدة ثابتة تتدرج 4 ← 2 ← 1 بدل auto-fit الذي يترك بطاقة وحيدة في صف */
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.text-center { text-align: center; }
.text-soft { color: var(--ink-soft); }
.text-sm { font-size: .8125rem; }
.text-xs { font-size: .75rem; }
.text-lg { font-size: 1.0625rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* مقروء لقارئ الشاشة فقط */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------
   4. الأزرار
   --------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: .625rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t), transform var(--t-fast), filter var(--t-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { flex-shrink: 0; transition: transform var(--t); }

.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); transition-duration: 60ms; }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* الأزرار الممتلئة: لمعة خفيفة تعبر الزر عند المرور */
.btn-primary, .btn-success, .btn-whatsapp { overflow: hidden; isolation: isolate; }
.btn-primary::before, .btn-success::before, .btn-whatsapp::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg) translateX(0);
  transition: transform 0s;
  pointer-events: none;
}
.btn-primary:hover::before, .btn-success:hover::before, .btn-whatsapp:hover::before {
  transform: skewX(-18deg) translateX(420%);
  transition: transform .8s var(--ease-out);
}
html[dir="rtl"] .btn-primary:hover::before, html[dir="rtl"] .btn-success:hover::before, html[dir="rtl"] .btn-whatsapp:hover::before {
  transform: skewX(-18deg) translateX(-420%);
}

.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 86%, #fff), var(--primary));
  color: var(--on-primary);
  box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--primary), var(--primary-hover)); color: var(--on-primary); box-shadow: 0 14px 28px -12px rgba(11, 78, 162, .7), inset 0 1px 0 rgba(255, 255, 255, .18); }

.btn-success {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent));
  color: #fff;
  box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-success:hover { background: var(--accent-hover); color: #fff; }

.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 10px 22px -12px var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); color: #fff; }

.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover { background: var(--surface); border-color: var(--brand-300); color: var(--primary-text); box-shadow: var(--shadow-sm); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); transform: none; }

.btn-soft { background: var(--primary-soft); color: var(--primary-text); }
.btn-soft:hover { background: var(--primary-soft-2); color: var(--primary-text); }

.btn-sm  { min-height: 2.25rem; padding: .4375rem .9375rem; font-size: .8125rem; border-radius: var(--r-sm); }
.btn-lg  { min-height: 3.25rem; padding: .875rem 1.75rem; font-size: 1rem; border-radius: var(--r-lg); }
.btn-block { width: 100%; }

.btn-icon { padding: 0; width: 2.625rem; min-height: 2.625rem; height: 2.625rem; border-radius: var(--r-full); }
.btn-icon:hover { transform: none; }

/* حالة التحميل داخل الزر */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  width: 1rem; height: 1rem;
  margin-block-start: -.5rem; margin-inline-start: -.5rem;
  border: 2px solid #fff;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.btn-outline.is-loading::after, .btn-ghost.is-loading::after { border-color: var(--ink-soft); border-block-start-color: transparent; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   5. النماذج
   --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.label .req { color: var(--danger); }
.label .opt { color: var(--ink-soft); font-weight: 400; font-size: .75rem; }

.input, .select, .textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: .6875rem 1rem;
  font-size: .9375rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast), box-shadow var(--t), background var(--t-fast);
  appearance: none;
}

.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-faint); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--surface-3);
  color: var(--ink-soft);
  cursor: not-allowed;
  box-shadow: none;
}

.textarea { min-height: 7rem; resize: vertical; line-height: 1.75; }

.select {
  /* السهم يتبع اتجاه الصفحة تلقائيًا */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238A98B2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  padding-inline-end: 1rem;
  padding-inline-start: 2.5rem;
}
html[dir="ltr"] .select { background-position: right 1rem center; padding-inline-start: 1rem; padding-inline-end: 2.5rem; }
.select option { background: var(--surface); color: var(--ink); }

input[type="file"].input { padding: .5rem; cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-inline-end: var(--sp-3); padding: .4rem .9rem; border: 0; border-radius: var(--r-sm);
  background: var(--primary-soft); color: var(--primary-text); font: inherit; font-weight: 600; font-size: .8125rem; cursor: pointer;
  transition: background var(--t-fast);
}
input[type="file"]::file-selector-button:hover { background: var(--primary-soft-2); }

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--danger); }
.field.has-error .input:focus { box-shadow: 0 0 0 4px var(--danger-bg); }

.field-error {
  font-size: .8125rem;
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.field-hint { font-size: .75rem; color: var(--ink-soft); line-height: 1.6; }

/* حقل كلمة المرور مع زر الإظهار */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-inline-end: 2.875rem; }
.input-group .input-action {
  position: absolute;
  inset-inline-end: .5rem;
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  color: var(--ink-faint);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.input-group .input-action:hover { color: var(--ink); background: var(--surface-3); }

/* اختيار (checkbox / radio) */
.check { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; font-size: .875rem; }
.check input {
  width: 1.125rem; height: 1.125rem;
  margin-block-start: .3rem;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* بطاقات اختيار (بدل radio العادي) */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.choice {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t), transform var(--t-fast);
}
.choice:hover { border-color: var(--brand-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: var(--ring);
}
.choice-title { font-weight: 600; font-size: .9375rem; }
.choice-desc { font-size: .8125rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------
   6. البطاقات
   --------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.card-hover { transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.card-hover:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--brand-200); }

.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-block-end: 1px solid var(--border);
}
.card-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.card-body { padding: var(--sp-6); }
.card-foot {
  padding: var(--sp-4) var(--sp-6);
  border-block-start: 1px solid var(--border);
  background: var(--surface-2);
  border-end-start-radius: var(--r-lg);
  border-end-end-radius: var(--r-lg);
}
@media (max-width: 560px) {
  .card-head, .card-foot { padding-inline: var(--sp-4); }
  .card-body { padding: var(--sp-4); }
}

/* بطاقة إحصاء */
.stat {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6);
  position: relative; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.stat::after {
  content: ""; position: absolute; inset-block-end: -3.5rem; inset-inline-end: -3rem;
  width: 9rem; height: 9rem; border-radius: 50%;
  background: radial-gradient(closest-side, var(--stat-tint, var(--primary-soft-2)), transparent);
  opacity: .9; pointer-events: none;
  transition: transform var(--t-slow);
}
.stat:hover::after { transform: scale(1.25); }
.stat > * { position: relative; z-index: 1; }
.stat-label { font-size: .8125rem; color: var(--ink-soft); font-weight: 600; }
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.stat-meta { font-size: .75rem; color: var(--ink-soft); }
.stat-icon {
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r);
  background: var(--primary-soft);
  color: var(--primary-text);
  transition: transform var(--t) var(--ease-spring);
}
.stat:hover .stat-icon { transform: scale(1.08) rotate(-4deg); }
.stat.tone-brand   { --stat-tint: var(--primary-soft-2); }
.stat.tone-success { --stat-tint: var(--success-bg); }
.stat.tone-warning { --stat-tint: var(--warning-bg); }
.stat.tone-danger  { --stat-tint: var(--danger-bg); }
.stat.tone-success .stat-icon { background: var(--success-bg); color: var(--success); }
.stat.tone-warning .stat-icon { background: var(--warning-bg); color: var(--warning); }
.stat.tone-danger  .stat-icon { background: var(--danger-bg);  color: var(--danger); }

/* ---------------------------------------------------------------
   7. الشارات
   --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .1875rem .6875rem;
  font-size: .75rem; font-weight: 600; line-height: 1.6;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-gray    { background: var(--surface-3);   color: var(--ink-2); }
.badge-brand   { background: var(--primary-soft); color: var(--primary-text); }
.badge-success { background: var(--success-bg);  color: var(--success-text); }
.badge-warning { background: var(--warning-bg);  color: var(--warning-text); }
.badge-danger  { background: var(--danger-bg);   color: var(--danger-text); }
.badge-info    { background: var(--info-bg);     color: var(--info-text); }

.badge-dot::before {
  content: ""; width: .375rem; height: .375rem;
  border-radius: 50%; background: currentColor; flex-shrink: 0;
}

/* عدّاد غير المقروء */
.counter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem;
  padding-inline: .3125rem;
  font-size: .6875rem; font-weight: 700;
  color: #fff; background: var(--danger);
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ---------------------------------------------------------------
   8. التنبيهات
   --------------------------------------------------------------- */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  border: 1px solid;
  font-size: .875rem;
  line-height: 1.7;
}
.alert-icon { flex-shrink: 0; margin-block-start: .2rem; }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text); }
.alert a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   9. الإشعارات المنبثقة (Toasts)
   --------------------------------------------------------------- */
#toasts {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 200;
  display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none;
  max-width: min(24rem, calc(100vw - 2rem));
}

.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--toast-bg);
  color: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font-size: .875rem;
  pointer-events: auto;
  animation: toast-in var(--t-slow) both;
  border-inline-start: 4px solid var(--brand-400);
}
.toast.leaving { animation: toast-out var(--t) both; }
.toast-success { border-inline-start-color: #34C46A; }
.toast-danger  { border-inline-start-color: #F26363; }
.toast-warning { border-inline-start-color: #F0A73A; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(1rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(.5rem) scale(.97); } }

/* ---------------------------------------------------------------
   10. الجداول
   --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }

.table th {
  padding: .8125rem var(--sp-5);
  text-align: start;
  font-size: .75rem; font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}
html[lang="en"] .table th { text-transform: uppercase; letter-spacing: .05em; }

.table td {
  padding: .875rem var(--sp-5);
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-block-end: none; }

/* ---------------------------------------------------------------
   11. الصور الرمزية
   --------------------------------------------------------------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .8125rem; font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 0 0 2px var(--surface);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 1.875rem; height: 1.875rem; font-size: .6875rem; }
.avatar-lg { width: 3rem;   height: 3rem;   font-size: 1rem; }
.avatar-xl { width: 4.5rem; height: 4.5rem; font-size: 1.375rem; }

.avatar-online { position: relative; }
.avatar-online::after {
  content: "";
  position: absolute;
  inset-block-end: 0; inset-inline-end: 0;
  width: .625rem; height: .625rem;
  background: var(--success);
  border: 2px solid var(--surface);
  border-radius: 50%;
}

/* ---------------------------------------------------------------
   12. الهيكل: الشريط الجانبي والعلوي
   --------------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 50;
}

.sidebar-brand {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  color: var(--ink);
}
.sidebar-brand img { width: 128px; height: auto; transition: transform var(--t-slow); }
.sidebar-brand:hover img { transform: scale(1.03); }

.sidebar-nav { flex: 1; padding: var(--sp-3) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: .125rem; }

.nav-group-label {
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  font-size: .6875rem; font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

.nav-link {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 2.75rem;
  padding: .5rem .875rem;
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: .9rem; font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-link:hover { background: var(--surface-3); color: var(--ink); }
.nav-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--ink-faint); transition: color var(--t-fast), transform var(--t) var(--ease-spring); }
.nav-link:hover svg { color: var(--primary-text); transform: scale(1.1); }

.nav-link.active {
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--primary-soft-2);
}
.nav-link.active svg { color: var(--primary); }
.nav-link.active::before {
  content: ""; position: absolute; inset-inline-start: -.75rem; inset-block: .625rem;
  width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--primary), var(--accent));
  animation: nav-bar .4s var(--ease-out) both;
}
html[dir="rtl"] .nav-link.active::before { border-radius: 4px 0 0 4px; }
@keyframes nav-bar { from { transform: scaleY(0); } to { transform: none; } }

.sidebar-foot { padding: var(--sp-3); border-block-start: 1px solid var(--border); display: flex; flex-direction: column; gap: .125rem; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-8);
  background: var(--surface-glass);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-block-end: 1px solid var(--border);
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
}
.topbar-title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.topbar .btn-icon { color: var(--ink-2); }
.topbar .btn-icon:hover { color: var(--primary-text); background: var(--primary-soft); }
.topbar .user-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .25rem .375rem; padding-inline-end: .875rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 2.625rem;
  box-shadow: var(--shadow-xs);
}
.topbar .user-chip:hover { background: var(--surface); border-color: var(--brand-300); transform: none; box-shadow: var(--shadow-sm); }

.page { padding: var(--sp-8) var(--sp-8) var(--sp-12); flex: 1; width: 100%; max-width: 1440px; margin-inline: auto; }

.page-head { margin-block-end: var(--sp-6); }
.page-title { font-size: 1.625rem; font-weight: 700; }
.page-sub { color: var(--ink-soft); font-size: .9375rem; margin-block-start: var(--sp-1); }

/* ترحيب لوحات التحكم */
.page-head.welcome {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--sp-10) var(--sp-10);
  border-radius: var(--r-xl);
  background:
    radial-gradient(520px 260px at 8% 130%, rgba(27, 158, 62, .42), transparent 70%),
    radial-gradient(420px 240px at 100% -30%, rgba(92, 146, 226, .5), transparent 70%),
    linear-gradient(120deg, #06152B, #0A3F86 55%, #0B4EA2);
  color: #fff;
  box-shadow: 0 24px 48px -24px rgba(6, 21, 43, .6);
}
/* شبكة خفيفة تتلاشى — تعطي عمقًا بلا صورة */
.page-head.welcome::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(70% 120% at 80% 0%, #000, transparent 75%);
  mask-image: radial-gradient(70% 120% at 80% 0%, #000, transparent 75%);
  pointer-events: none;
}
.page-head.welcome .page-title { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.page-head.welcome .page-sub { color: rgba(255, 255, 255, .8); font-size: 1rem; }
.page-head.welcome::after {
  content: ""; position: absolute; inset-block-start: -5rem; inset-inline-end: -4rem; z-index: -1;
  width: 18rem; height: 18rem; border-radius: 50%;
  border: 44px solid rgba(255, 255, 255, .05);
  pointer-events: none;
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(-1.5rem, 1rem, 0) scale(1.06); } }
.page-head.welcome .btn-outline { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; backdrop-filter: blur(8px); }
.page-head.welcome .btn-outline:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* زر فتح القائمة على الموبايل */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    transform: translateX(var(--sidebar-shift, -100%));
    transition: transform var(--t-slow);
    box-shadow: var(--shadow-lg);
  }
  /* inset-inline-start في RTL = اليمين؛ الإخفاء بإزاحة موجبة نحو اليمين */
  html[dir="rtl"] .sidebar { --sidebar-shift: 100%; }
  .sidebar.open { transform: translateX(0); }

  .sidebar-toggle { display: inline-flex; }

  .sidebar-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(3px);
    z-index: 45;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t);
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  .page { padding: var(--sp-5) var(--sp-4) var(--sp-10); }
  .topbar { padding-inline: var(--sp-4); }
  .page-head.welcome { padding: var(--sp-6) var(--sp-5); }
}

/* ---------------------------------------------------------------
   13. القوائم المنسدلة
   --------------------------------------------------------------- */
.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  inset-block-start: calc(100% + .625rem);
  inset-inline-end: 0;
  min-width: 14rem;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  opacity: 0; transform: translateY(-.5rem) scale(.97);
  transform-origin: top;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t) var(--ease-out), visibility 0s linear var(--t);
}
.dropdown-menu.open {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity var(--t-fast), transform var(--t) var(--ease-out), visibility 0s;
}

.dropdown-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: .5625rem var(--sp-3);
  border-radius: var(--r-sm);
  font-size: .875rem;
  color: var(--ink-2);
  text-align: start;
  transition: background var(--t-fast), color var(--t-fast);
}
.dropdown-item:hover { background: var(--surface-3); color: var(--ink); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger:hover { background: var(--danger-bg); }

.dropdown-divider { height: 1px; background: var(--border); margin: var(--sp-2) 0; }

/* ---------------------------------------------------------------
   14. النوافذ المنبثقة
   --------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t);
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.modal {
  width: 100%; max-width: 32rem;
  max-height: calc(100vh - 4rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(.94) translateY(1rem);
  opacity: 0;
  transition: transform var(--t-slow), opacity var(--t);
}
.modal-backdrop.open .modal { transform: none; opacity: 1; }

.modal-head { padding: var(--sp-5) var(--sp-6); border-block-end: 1px solid var(--border); }
.modal-body { padding: var(--sp-6); overflow-y: auto; }
.modal-foot {
  padding: var(--sp-4) var(--sp-6);
  border-block-start: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  background: var(--surface-2);
}

/* ---------------------------------------------------------------
   15. الحالات الفارغة وهياكل التحميل
   --------------------------------------------------------------- */
.empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-5);
  text-align: center;
}
.empty-icon {
  width: 4.5rem; height: 4.5rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
  color: var(--primary-text);
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--primary-soft-2);
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-6px); } }
.empty-title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.empty-text { color: var(--ink-soft); font-size: .875rem; max-width: 28rem; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.skeleton-text { height: .75rem; margin-block-end: .5rem; }
.skeleton-title { height: 1.25rem; width: 40%; margin-block-end: .75rem; }
.skeleton-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.skeleton-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); }
.skeleton-row > div { flex: 1; }
.skeleton-row .skeleton-text:last-child { width: 60%; margin-block-end: 0; }

@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------------------------------------------------------
   16. شريط التقدم
   --------------------------------------------------------------- */
.progress {
  height: .5rem;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--r-full);
  transition: width var(--t-slow);
  transform-origin: left;
  animation: grow-x .9s var(--ease-out) backwards;
}
html[dir="rtl"] .progress-bar { background: linear-gradient(270deg, var(--primary), var(--accent)); transform-origin: right; }
@keyframes grow-x { from { transform: scaleX(0); } }

.steps { display: flex; align-items: center; gap: var(--sp-2); }
.step {
  flex: 1;
  height: .3125rem;
  background: var(--surface-3);
  border-radius: var(--r-full);
  transition: background var(--t);
}
.step.done { background: var(--accent); }
.step.current { background: var(--primary); }

/* ---------------------------------------------------------------
   17. صفحات المصادقة
   --------------------------------------------------------------- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

.auth-aside {
  display: none;
  margin: var(--sp-4);
  padding: var(--sp-12);
  border-radius: var(--r-2xl);
  background: linear-gradient(150deg, #0A3F86, #06254F 55%, #06152B);
  color: #fff;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* هالتان ملوّنتان تتحركان ببطء شديد */
.auth-aside::before {
  content: "";
  position: absolute; inset: -20%; z-index: -2;
  background:
    radial-gradient(38% 34% at 12% 92%, rgba(27, 158, 62, .55), transparent 70%),
    radial-gradient(36% 32% at 92% 6%, rgba(92, 146, 226, .55), transparent 70%);
  animation: aurora 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aurora { to { transform: translate3d(3%, -3%, 0) rotate(4deg); } }
.auth-aside::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
}
.auth-aside > * { position: relative; }
.auth-aside h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.45; color: #fff; font-weight: 700; }
.auth-aside p { color: rgba(255, 255, 255, .78); margin-block-start: var(--sp-3); font-size: 1.0625rem; }

.auth-points { display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-point {
  display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  backdrop-filter: blur(8px);
  font-weight: 500;
  transition: background var(--t), transform var(--t);
}
.auth-point:hover { background: rgba(255, 255, 255, .12); transform: translateX(-4px); }
html[dir="ltr"] .auth-point:hover { transform: translateX(4px); }
.auth-point-icon {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14);
  border-radius: var(--r);
}

.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8) var(--sp-4);
}
.auth-card { width: 100%; max-width: 28.5rem; }
.auth-card > .card { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.auth-card > .card > .card-body { padding: var(--sp-8); }
.auth-logo { display: flex; justify-content: center; margin-block-end: var(--sp-6); }
.auth-logo img { width: 140px; height: auto; }
.auth-tools { display: flex; justify-content: center; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-6); }

@media (min-width: 1024px) {
  .auth-wrap { grid-template-columns: 1.05fr 1fr; }
  .auth-aside { display: flex; }
}
@media (max-width: 520px) {
  .auth-card > .card > .card-body { padding: var(--sp-6) var(--sp-5); }
}

/* ---------------------------------------------------------------
   18. صفحات الأخطاء
   --------------------------------------------------------------- */
.error-page {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 9rem); font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.error-text { color: var(--ink-soft); max-width: 28rem; }

/* ---------------------------------------------------------------
   19. الطباعة
   --------------------------------------------------------------- */
@media print {
  :root { color-scheme: light; }
  .sidebar, .topbar, .btn, #toasts, .no-print, .nav-progress { display: none !important; }
  .page { padding: 0; max-width: none; }
  body { background: #fff !important; color: #000; }
  .card { box-shadow: none; border-color: #ddd; background: #fff; }
  .logo-on-dark { display: none !important; }
  .logo-on-light { display: block !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------
   20. تخطيطات مشتركة للأقسام
   --------------------------------------------------------------- */
.cols-main-side {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.cols-side-main { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

@media (max-width: 900px) {
  .cols-main-side, .cols-side-main, .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); font-size: .875rem; }
.kv dt { color: var(--ink-soft); }
.kv dd { font-weight: 500; }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.toolbar .input, .toolbar .select { width: auto; min-width: 10rem; }

.inline-form { display: inline; }

.muted-box {
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  font-size: .875rem;
  color: var(--ink-2);
}

/* تبويبات على شكل أقراص داخل شريط ناعم */
.tabs {
  display: flex; gap: .25rem;
  width: fit-content; max-width: 100%;
  padding: .3125rem;
  background: var(--surface-3);
  border-radius: var(--r-lg);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: .5rem 1rem;
  font-size: .875rem; font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--r);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--primary-text); background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 600; }

.price { font-weight: 700; color: var(--primary-text); font-variant-numeric: tabular-nums; }
.price-old { color: var(--ink-soft); text-decoration: line-through; font-size: .8125rem; }

/* ---------------------------------------------------------------
   21. بطاقات الكورسات والباقات
   --------------------------------------------------------------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5); }

.course-card { display: flex; flex-direction: column; overflow: hidden; }
.course-cover {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(220px 140px at 85% 15%, rgba(255, 255, 255, .22), transparent 70%),
    linear-gradient(135deg, var(--brand-500), var(--green-500));
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
  padding: var(--sp-3);
  color: #fff;
}
.course-cover .badge { background: rgba(255, 255, 255, .92); color: #0F172A; }
.course-card .card-body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.course-title { font-weight: 600; font-size: 1rem; line-height: 1.5; }
.course-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: .8125rem; color: var(--ink-soft); }
.course-meta span { display: inline-flex; align-items: center; gap: .25rem; }

/* ---------------------------------------------------------------
   22. باني الكورس (أقسام + دروس بالسحب والإفلات)
   --------------------------------------------------------------- */
.tree { display: flex; flex-direction: column; gap: var(--sp-4); }

.tree-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.tree-section.dragging { opacity: .5; }
.tree-section-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-block-end: 1px solid var(--border);
}
.tree-section-title { font-weight: 600; flex: 1; min-width: 0; }

.tree-lessons { list-style: none; min-height: 2.5rem; padding: var(--sp-2); }
.tree-lessons.drop-over { background: var(--primary-soft); }

.tree-lesson {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r);
  font-size: .875rem;
  background: var(--surface);
}
.tree-lesson:hover { background: var(--surface-2); }
.tree-lesson.dragging { opacity: .4; }
.tree-lesson a { color: var(--ink); font-weight: 500; }
.tree-lesson .type-icon {
  width: 2.125rem; height: 2.125rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft); color: var(--primary-text);
}

.drag-handle {
  cursor: grab; color: var(--ink-faint);
  display: inline-flex; padding: .25rem;
  touch-action: none;
}
.drag-handle:active { cursor: grabbing; }

/* ---------------------------------------------------------------
   23. مشغّل الدروس
   --------------------------------------------------------------- */
.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 1100px) { .lesson-layout { grid-template-columns: minmax(0, 1fr); } }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pdf-frame { width: 100%; height: 75vh; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }

.lesson-text { font-size: 1rem; line-height: 2; white-space: normal; }

.outline { list-style: none; }
.outline-section { padding: var(--sp-3) var(--sp-4) var(--sp-1); font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.outline-item a, .outline-item span.locked {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: .5625rem var(--sp-4);
  font-size: .8125rem; color: var(--ink-2);
}
.outline-item a:hover { background: var(--surface-2); }
.outline-item.current a { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.outline-item span.locked { color: var(--ink-faint); cursor: not-allowed; }
.outline-item .done { color: var(--success); }

/* ---------------------------------------------------------------
   24. الاختبارات
   --------------------------------------------------------------- */
.quiz-bar {
  position: sticky; inset-block-start: calc(var(--topbar-h) + var(--sp-2)); z-index: 20;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.125rem; color: var(--primary-text); }
.timer.warn { color: var(--danger); }

.question { display: flex; flex-direction: column; gap: var(--sp-3); }
.question-num {
  width: 2.125rem; height: 2.125rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r);
  background: var(--primary-soft); color: var(--primary-text); font-weight: 700; font-size: .875rem;
}
.question-text { font-weight: 500; line-height: 1.8; white-space: pre-wrap; }

.option {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: .8125rem var(--sp-4);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.option:hover { border-color: var(--brand-300); }
.option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--ring); }
.option input { margin-block-start: .3125rem; accent-color: var(--primary); }
.option.is-correct { border-color: var(--success); background: var(--success-bg); }
.option.is-wrong { border-color: var(--danger); background: var(--danger-bg); }

.explain {
  padding: var(--sp-3) var(--sp-4);
  background: var(--info-bg);
  border-inline-start: 3px solid var(--info);
  border-radius: var(--r-sm);
  font-size: .875rem;
}

.score-ring {
  width: 8.5rem; height: 8.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: conic-gradient(var(--ring-color, var(--success)) calc(var(--p) * 1%), var(--surface-3) 0);
  position: relative;
}
.score-ring::after { content: ""; position: absolute; inset: .65rem; background: var(--surface); border-radius: 50%; }
.score-ring > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   25. المحادثات
   --------------------------------------------------------------- */
.chat {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  height: calc(100vh - var(--topbar-h) - 4rem);
  min-height: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.chat-list { border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.chat-list-head { padding: var(--sp-3); border-block-end: 1px solid var(--border); display: flex; gap: var(--sp-2); }
.chat-list-items { overflow-y: auto; flex: 1; padding: var(--sp-2); }

.chat-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r);
  color: var(--ink);
  transition: background var(--t-fast);
}
.chat-item:hover { background: var(--surface-2); color: var(--ink); }
.chat-item.active { background: var(--primary-soft); }
.chat-item-body { flex: 1; min-width: 0; }
.chat-item-top { display: flex; justify-content: space-between; gap: var(--sp-2); }
.chat-item-name { font-weight: 600; font-size: .875rem; }
.chat-item-time { font-size: .6875rem; color: var(--ink-soft); flex-shrink: 0; }
.chat-item-last { font-size: .8125rem; color: var(--ink-soft); }

.chat-main {
  display: flex; flex-direction: column; min-height: 0;
  background:
    radial-gradient(var(--border) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--chat-bg);
}
.chat-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.chat-status { font-size: .75rem; color: var(--ink-soft); }
.chat-status.online { color: var(--success); }

.chat-messages { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }

.msg { display: flex; flex-direction: column; max-width: min(75%, 34rem); align-self: flex-start; }
.msg.me { align-self: flex-end; }
.msg-bubble {
  position: relative;
  padding: .5625rem .875rem;
  background: var(--bubble);
  border-radius: var(--r-lg);
  border-start-start-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  font-size: .9rem; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg.me .msg-bubble {
  background: var(--bubble-me);
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-sm);
}
.msg-sender { font-size: .75rem; font-weight: 600; color: var(--primary-text); margin-block-end: .125rem; }
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; font-size: .6875rem; color: var(--ink-soft); margin-block-start: .125rem; }
.msg-ticks { color: var(--ink-faint); }
.msg-ticks.read { color: var(--info); }
.msg-deleted .msg-bubble { font-style: italic; color: var(--ink-soft); }
.msg-reply {
  padding: .25rem .5rem; margin-block-end: .25rem;
  border-inline-start: 3px solid var(--brand-400);
  background: var(--primary-soft);
  border-radius: var(--r-sm);
  font-size: .8rem; color: var(--ink-2);
}
.msg-img { max-width: 100%; max-height: 16rem; border-radius: var(--r); display: block; }
.msg-actions { display: none; gap: .25rem; }
.msg:hover .msg-actions { display: inline-flex; }
.msg-actions button { font-size: .6875rem; color: var(--ink-soft); padding: 0 .25rem; }
.msg-actions button:hover { color: var(--primary-text); }

.chat-day { align-self: center; font-size: .6875rem; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); padding: .125rem .75rem; border-radius: var(--r-full); }

.chat-compose { padding: var(--sp-3); background: var(--surface); border-block-start: 1px solid var(--border); }
.chat-compose form { display: flex; align-items: flex-end; gap: var(--sp-2); }
.chat-compose textarea { flex: 1; resize: none; max-height: 8rem; min-height: 2.75rem; }
.chat-replying { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-2); }
.typing { font-size: .75rem; color: var(--success); min-height: 1rem; }

.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; }

@media (max-width: 800px) {
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--topbar-h) - 2.5rem); }
  .chat.has-active .chat-list { display: none; }
  .chat:not(.has-active) .chat-main { display: none; }
}

/* ---------------------------------------------------------------
   26. الإشعارات
   --------------------------------------------------------------- */
.notif-menu { width: min(23rem, 92vw); max-height: 28rem; overflow-y: auto; }
.notif-item { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r); color: var(--ink); }
.notif-item:hover { background: var(--surface-2); color: var(--ink); }
.notif-item.unread { background: var(--primary-soft); }
.notif-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--primary); margin-block-start: .45rem; flex-shrink: 0; }
.notif-item:not(.unread) .notif-dot { background: transparent; }

/* ---------------------------------------------------------------
   27. الرسوم البيانية البسيطة (بلا مكتبات)
   --------------------------------------------------------------- */
.bars { display: flex; align-items: flex-end; gap: var(--sp-2); height: 11rem; padding-block-start: var(--sp-4); }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; height: 100%; justify-content: flex-end; min-width: 0; }
.bar-fill { width: 100%; max-width: 2.5rem; background: linear-gradient(180deg, var(--brand-400), var(--primary)); border-radius: 8px 8px 3px 3px; min-height: 2px; }
.bar-label { font-size: .6875rem; color: var(--ink-soft); white-space: nowrap; }
.bar-value { font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.meter { display: flex; align-items: center; gap: var(--sp-2); }
.meter .progress { flex: 1; }

/* ---------------------------------------------------------------
   28. شريط «تتصفح كمستخدم آخر» + متفرقات
   --------------------------------------------------------------- */
.impersonate-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--warning-bg);
  border-block-end: 1px solid var(--warning-border);
  color: var(--warning-text);
  font-size: .875rem;
}

/* الحقول داخل عمود جانبي ضيق تُعرض عمودًا واحدًا */
.settings-compact .cols-2, .settings-compact .cols-3 { grid-template-columns: minmax(0, 1fr); }

/* شعار الشريط العلوي: يظهر على الموبايل فقط حيث تختفي القائمة الجانبية */
.topbar-logo { display: none; flex-shrink: 0; }
.topbar-logo img { height: 40px; width: auto; }
@media (max-width: 1024px) { .topbar-logo { display: inline-flex; } .topbar-title { display: none; } }

/* شريط «تتصفح كمستخدم» يضيف ارتفاعًا — تُقصَّر المحادثة لتبقى داخل الشاشة */
.impersonate-bar ~ .page .chat { height: calc(100vh - var(--topbar-h) - 4rem - 2.75rem); }

/* الموبايل: القائمة المخفية خارج الشاشة لا تُنشئ تمريرًا أفقيًا، والاسم يختفي لتتسع الأيقونات */
@media (max-width: 1024px) { html, body { overflow-x: clip; } }
@media (max-width: 600px) {
  .topbar .user-chip .truncate { display: none; }
  .topbar .user-chip { padding-inline-end: .375rem; }
  .topbar { gap: .125rem; padding-inline: var(--sp-3); }
  .topbar .lang-switch { display: none; }
}


/* ---------------------------------------------------------------
   29. الموقع العام (الرئيسية · الخدمات · الأسعار · التواصل)
   --------------------------------------------------------------- */
.site { background: var(--surface); }
.site main { overflow-x: clip; }

.btn-whatsapp { background: linear-gradient(180deg, #2BDB6E, #1FC25C); color: #fff; box-shadow: 0 10px 24px -10px rgba(37, 211, 102, .7), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-whatsapp:hover { background: linear-gradient(180deg, #25D366, #1AAE52); color: #fff; }
.btn-light { background: #fff; color: #0A4592; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.btn-light:hover { background: #EFF5FD; color: #0A4592; }

/* شريط التواصل العلوي */
.site-topbar { background: var(--navy-900); color: rgba(255, 255, 255, .8); font-size: .8125rem; }
.site-topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 2.5rem; flex-wrap: wrap; }
.site-topbar-group { display: flex; align-items: center; gap: var(--sp-4); }
.site-topbar a { color: inherit; display: inline-flex; align-items: center; gap: .375rem; transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.site-topbar a:hover { color: #fff; }
.site-social { width: 1.75rem; height: 1.75rem; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.site-social:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.site-lang { font-weight: 600; }

/* الرأس: زجاجي ثابت يصغر عند التمرير */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-block-end: 1px solid transparent;
  transition: box-shadow var(--t), border-color var(--t), background var(--t);
}
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(6, 21, 43, .35); border-color: var(--border); }
.site-header-inner { display: flex; align-items: center; gap: var(--sp-6); min-height: 6.5rem; transition: min-height var(--t-slow); }
.site-header.scrolled .site-header-inner { min-height: 4.75rem; }
.site-logo { display: inline-flex; flex-shrink: 0; }
.site-logo img { height: 86px; width: auto; transition: height var(--t-slow), transform var(--t); }
.site-logo:hover img { transform: scale(1.03); }
.site-header.scrolled .site-logo img { height: 60px; }

.site-nav { display: flex; align-items: center; gap: .125rem; flex: 1; }
.site-nav > a {
  position: relative;
  padding: .625rem 1rem; border-radius: var(--r-full);
  font-weight: 500; font-size: 1rem; color: var(--ink-2);
  transition: color var(--t-fast), background var(--t-fast);
}
/* خط سفلي يتمدد من المنتصف */
.site-nav > a::after {
  content: ""; position: absolute; inset-inline: 1rem; inset-block-end: .25rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transition: transform var(--t) var(--ease-out);
}
.site-nav > a:hover { color: var(--primary-text); }
.site-nav > a:hover::after { transform: scaleX(.6); }
.site-nav > a.active { color: var(--primary-text); font-weight: 600; }
.site-nav > a.active::after { transform: scaleX(1); }
.site-nav-actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.site-menu-toggle { display: none; margin-inline-start: auto; }

@media (max-width: 1020px) {
  .site-header-inner, .site-header.scrolled .site-header-inner { min-height: 4.75rem; gap: var(--sp-2); }
  .site-logo img, .site-header.scrolled .site-logo img { height: 56px; }
  .site-menu-toggle { display: inline-flex; }
  .site-header .theme-toggle { margin-inline-start: auto; }
  .site-header .theme-toggle + .site-menu-toggle { margin-inline-start: 0; }
  .site-nav {
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    flex-direction: column; align-items: stretch; gap: var(--sp-1);
    padding: var(--sp-4); background: var(--surface);
    border-block-end: 1px solid var(--border); box-shadow: var(--shadow-lg);
    border-end-start-radius: var(--r-xl); border-end-end-radius: var(--r-xl);
    opacity: 0; visibility: hidden; transform: translateY(-.75rem); pointer-events: none;
    transition: opacity var(--t), transform var(--t-slow), visibility 0s linear var(--t);
  }
  .site-nav.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--t), transform var(--t-slow), visibility 0s; }
  .site-nav > a { padding: .75rem 1rem; border-radius: var(--r); }
  .site-nav > a::after { display: none; }
  .site-nav > a:hover, .site-nav > a.active { background: var(--primary-soft); }
  .site-nav-actions { margin: var(--sp-2) 0 0; flex-direction: column; align-items: stretch; }
  .hide-sm { display: none !important; }
}

/* زر زجاجي فوق الصورة */
.btn-glass {
  background: rgba(255, 255, 255, .1); color: #fff;
  border-color: rgba(255, 255, 255, .32);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); color: #fff; }

/* الأرقام: شريط داكن ملتحم بأسفل الصورة */
.hero-stats { position: relative; background: var(--navy-900); color: #fff; }
.hero-stats::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}
.hero-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-stat { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: var(--sp-10) var(--sp-5); text-align: center; }
.hero-stat + .hero-stat { border-inline-start: 1px solid rgba(255, 255, 255, .1); }
.hero-stat-value {
  font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; direction: ltr;
  background: linear-gradient(180deg, #fff 30%, #A9CAFF); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stat-label { color: rgba(255, 255, 255, .7); font-size: .9375rem; }

@media (max-width: 800px) {
  .hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stat { padding: var(--sp-6) var(--sp-4); }
  .hero-stat:nth-child(3) { border-inline-start: none; }
  .hero-stat:nth-child(n + 3) { border-block-start: 1px solid rgba(255, 255, 255, .1); }
}

/* ---------- الأقسام ---------- */
.site-section { padding-block: clamp(4rem, 8vw, 6.5rem); }
.site-section-alt { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--primary-soft) 70%, var(--bg))); }
.section-head { text-align: center; max-width: 44rem; margin: 0 auto var(--sp-12); }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3125rem 1rem; border-radius: var(--r-full);
  background: var(--primary-soft); color: var(--primary-text); font-weight: 600; font-size: .875rem;
  box-shadow: inset 0 0 0 1px var(--primary-soft-2);
}
.section-eyebrow::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.section-head h2 { font-size: clamp(1.625rem, 3.4vw, 2.625rem); margin-block: 0 var(--sp-3); font-weight: 700; line-height: 1.35; }
.section-head p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.9; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.service-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t);
}
/* خط علوي يتمدد عند المرور */
.service-card::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: inline-start; transition: transform var(--t-slow);
}
html[dir="rtl"] .service-card::before { transform-origin: right; }
html[dir="ltr"] .service-card::before { transform-origin: left; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.service-card:hover::before { transform: scaleX(1); }
.service-card h3 { font-size: 1.1875rem; margin-block-start: var(--sp-2); }
.service-card p { color: var(--ink-soft); line-height: 1.9; }
.service-icon {
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); color: var(--primary-text);
  box-shadow: inset 0 0 0 1px var(--primary-soft-2);
  transition: background var(--t), color var(--t), transform var(--t-slow) var(--ease-spring), box-shadow var(--t);
}
.service-card:hover .service-icon, .step-card:hover .service-icon {
  background: linear-gradient(135deg, var(--primary), #1467C9); color: #fff;
  transform: scale(1.06) rotate(-4deg); box-shadow: var(--glow-primary);
}
.service-icon.wa { background: rgba(37, 211, 102, .14); color: #1EBE5A; }
.service-num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; color: var(--surface-3); font-variant-numeric: tabular-nums; line-height: 1; transition: color var(--t); }
.service-card:hover .service-num { color: var(--primary-soft-2); }
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); counter-reset: step; }
.steps-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.step-card {
  position: relative; background: var(--surface); border-radius: var(--r-xl); padding: var(--sp-10) var(--sp-6) var(--sp-8);
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t);
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
/* خط متقطع يربط كل خطوة بالتي بعدها */
.step-card:not(:last-child)::after {
  content: ""; position: absolute; inset-block-start: 4.25rem; inset-inline-start: 100%;
  width: var(--sp-8); border-block-start: 2px dashed var(--brand-200);
}
.steps-grid:has(> :nth-child(4)) .step-card:not(:last-child)::after { width: var(--sp-6); }
.step-card h3 { font-size: 1.1875rem; margin-block-start: var(--sp-2); }
.step-card p { color: var(--ink-soft); line-height: 1.9; }
.step-num {
  position: absolute; inset-block-start: -1.25rem; inset-inline-end: var(--sp-6);
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-weight: 700; font-size: 1.0625rem;
  box-shadow: 0 0 0 5px var(--surface), var(--shadow);
}
@media (max-width: 960px) {
  .steps-grid, .steps-grid:has(> :nth-child(4)) { grid-template-columns: 1fr; gap: var(--sp-10); max-width: 34rem; margin-inline: auto; }
  .step-card:not(:last-child)::after, .steps-grid:has(> :nth-child(4)) .step-card:not(:last-child)::after {
    inset-block-start: 100%; inset-inline-start: 2.5rem; width: 0; height: var(--sp-10);
    border-block-start: 0; border-inline-start: 2px dashed var(--brand-200);
  }
}

.subject-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.subject-chip {
  padding: .6875rem 1.375rem; border-radius: var(--r-full); font-weight: 600;
  background: color-mix(in srgb, var(--chip) 10%, var(--surface)); color: color-mix(in srgb, var(--chip) var(--chip-strength, 80%), var(--ink));
  border: 1px solid color-mix(in srgb, var(--chip) 26%, var(--surface));
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t), background var(--t);
}
.subject-chip:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--chip) 18%, var(--surface)); box-shadow: 0 10px 22px -12px var(--chip); }

/* ---------- شريط الدعوة ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap;
  margin-block: var(--sp-12) var(--sp-20);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--r-2xl); color: #fff;
  background:
    radial-gradient(480px 260px at 0% 130%, rgba(27, 158, 62, .6), transparent 70%),
    radial-gradient(420px 240px at 100% -20%, rgba(92, 146, 226, .5), transparent 70%),
    linear-gradient(120deg, #06152B, #0A3F86 60%, #0B4EA2);
  box-shadow: 0 36px 72px -32px rgba(6, 21, 43, .65);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(80% 130% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(80% 130% at 50% 0%, #000, transparent 78%);
  pointer-events: none;
}
.cta-band > .cta-copy { flex: 1 1 22rem; }
.cta-band h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); color: #fff; line-height: 1.4; }
.cta-band p { color: rgba(255, 255, 255, .86); margin-block-start: var(--sp-3); font-size: 1.0625rem; line-height: 1.9; }
.cta-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
@media (max-width: 700px) { .cta-band { text-align: center; justify-content: center; border-radius: var(--r-xl); } .cta-actions { justify-content: center; } }

/* ---------- رأس الصفحات الداخلية ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  text-align: center; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(180deg, var(--primary-soft), var(--surface));
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(60% 90% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(60% 90% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.page-hero::after {
  content: ""; position: absolute; z-index: -1; inset-block-start: -40%; inset-inline: 20%; height: 90%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 16%, transparent), transparent);
  pointer-events: none;
}
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); margin-block: 0 var(--sp-4); font-weight: 800; line-height: 1.3; }
.page-hero p { color: var(--ink-soft); max-width: 42rem; margin-inline: auto; font-size: 1.125rem; line-height: 1.9; }
.page-hero .container > * { animation: rise .8s var(--ease-out) backwards; }
.page-hero .container > :nth-child(2) { animation-delay: .1s; }
.page-hero .container > :nth-child(3) { animation-delay: .2s; }

/* ---------- التواصل ---------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-6); align-items: start; }
.contact-item { display: flex; align-items: center; gap: var(--sp-3); color: inherit; transition: transform var(--t); }
a.contact-item:hover { transform: translateX(-4px); color: inherit; }
html[dir="ltr"] a.contact-item:hover { transform: translateX(4px); }
.contact-item > span:last-child { display: flex; flex-direction: column; font-size: .9375rem; }
.contact-item strong { font-size: .875rem; color: var(--ink-soft); font-weight: 500; }
.contact-map { width: 100%; height: 16rem; border: 0; display: block; }
.contact-social a { background: var(--primary-soft) !important; color: var(--primary-text) !important; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- التذييل — داكن في الوضعين ---------- */
.site-footer { position: relative; background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); color: rgba(255, 255, 255, .72); }
.site-footer::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-500), #1B9E3E, var(--brand-500));
}
.site-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr; gap: var(--sp-10); padding-block: var(--sp-20) var(--sp-12); }
.site-footer-brand img { height: 104px; width: auto; margin-block-end: var(--sp-5); }
.site-footer-brand p { line-height: 2; max-width: 22rem; }
.site-footer h3 { color: #fff; font-size: 1.0625rem; margin-block-end: var(--sp-5); position: relative; padding-block-end: var(--sp-3); }
.site-footer h3::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 2.25rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #1B9E3E, #6FCB90); }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.site-footer a { color: rgba(255, 255, 255, .76); transition: color var(--t-fast), padding var(--t); }
.site-footer a:hover { color: #fff; }
.site-footer-grid ul:not(.site-footer-contact) a:hover { padding-inline-start: .375rem; }
.site-footer-contact li { display: flex; align-items: center; gap: var(--sp-2); }
.site-footer-contact svg { color: #6FCB90; flex-shrink: 0; }
.site-footer-social { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.site-footer-social a {
  width: 2.625rem; height: 2.625rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .1);
  transition: background var(--t-fast), transform var(--t) var(--ease-spring), border-color var(--t-fast);
}
.site-footer-social a:hover { background: #1B9E3E; border-color: #1B9E3E; transform: translateY(-3px); }
.site-footer-bottom { border-block-start: 1px solid rgba(255, 255, 255, .08); padding-block: var(--sp-5); font-size: .875rem; }
@media (max-width: 960px) { .site-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); padding-block: var(--sp-16) var(--sp-10); } }
@media (max-width: 560px) { .site-footer-grid { grid-template-columns: 1fr; } .site-footer-bottom .row-between { justify-content: center; text-align: center; } }

/* ---------- زر واتساب العائم ---------- */
.site-whatsapp-float {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 70;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff; box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6);
  transition: transform var(--t) var(--ease-spring);
}
/* حلقة تنبض بهدوء لتلفت النظر بلا إزعاج */
.site-whatsapp-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: #25D366; animation: pulse-ring 2.8s var(--ease-out) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.site-whatsapp-float:hover { transform: scale(1.1); color: #fff; }
.site-whatsapp-float svg { width: 30px; height: 30px; }

/* الموبايل: شريط التواصل في سطر واحد، وزر واتساب العائم لا يغطي نص التذييل */
@media (max-width: 560px) {
  .site-topbar .site-social, .site-topbar-label { display: none; }
  .site-topbar-inner { flex-wrap: nowrap; }
}
@media (max-width: 1400px) {
  .site-footer-bottom { padding-block-end: 5.5rem; }
}

/* زر أساسي داخل بانر الترحيب يصبح أبيض ليبرز فوق الأزرق */
.page-head.welcome .btn-primary { background: #fff; color: #0A4592; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.page-head.welcome .btn-primary:hover { background: #EFF5FD; color: #0A4592; }

/* عدّادات الشريط العلوي: على حافة الزر الدائري بدل أن تغطي الأيقونة */
.topbar .btn-icon .counter {
  position: absolute !important;
  inset-block-start: -2px !important;
  inset-inline-end: -4px !important;
  min-width: 1.125rem; height: 1.125rem;
  font-size: .625rem;
}

/* توقيع صانع الموقع في آخر التذييل — «Proudly powered by Unilira» بنفس الشكل في النسختين */
.site-footer .site-credit {
  display: inline-flex; align-items: center; gap: .5rem;
  direction: ltr; font-family: var(--font-en);
  color: rgba(255, 255, 255, .62);
  transition: color var(--t-fast);
}
.site-credit img {
  width: 40px; height: 40px; margin: -6px -4px;   /* الشعار له هامش شفاف داخل الصورة */
  filter: invert(1);                               /* الشعار أسود — يصبح أبيض على التذييل الداكن */
}
.site-credit-text { font-size: .9375rem; font-weight: 300; letter-spacing: .01em; }
.site-credit-name { font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: -.01em; margin-inline-start: .25rem; }
.site-footer .site-credit:hover { color: rgba(255, 255, 255, .85); padding: 0; }
.site-credit:hover .site-credit-name { color: #fff; }


/* القسم الأول بعد رأس الصفحة: الرأس نفسه يعطي المسافة */
.page-hero + .site-section { padding-block-start: var(--sp-8); }


/* ---------------------------------------------------------------
   29-أ. الواجهة: نص في جهة، ورسم متحرك «مدرس يشرح لطالب» في الجهة الأخرى
   خلفية فاتحة هادئة، والأرقام كارت أبيض يركب على آخر الواجهة.
   --------------------------------------------------------------- */
.hero-photo {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface) 92%);
  color: var(--ink);
}
.hero-photo-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  min-height: clamp(520px, 76vh, 720px);
  padding-block: var(--sp-10) clamp(5rem, 9vw, 7.5rem);
}
.hero-photo-copy { max-width: 37rem; }
.hero-photo h1 {
  color: var(--ink);
  font-size: clamp(2.25rem, 4.3vw, 3.75rem);
  line-height: 1.3; font-weight: 800;
}
html[lang="en"] .hero-photo h1 { line-height: 1.1; letter-spacing: -.03em; }
.hero-highlight {
  display: block; margin-block-start: var(--sp-5);
  padding-inline-start: var(--sp-4);
  border-inline-start: 3px solid var(--accent);
  font-family: var(--font, var(--font-ar));
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem); line-height: 1.6; font-weight: 600; letter-spacing: 0;
  color: var(--accent-text);
}
.hero-photo-text { margin-block-start: var(--sp-5); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 2; color: var(--ink-2); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-8); }

/* الزر الثاني في الواجهة: أبيض بحد خفيف على الخلفية الفاتحة */
.hero-photo .btn-glass { background: var(--surface); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--shadow-xs); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-photo .btn-glass:hover { background: var(--surface); color: var(--primary-text); border-color: var(--brand-300); box-shadow: var(--shadow-sm); }

/* دخول هادئ: العنوان ثم الوصف ثم الزرّان */
.hero-photo-copy > h1, .hero-photo-copy > p, .hero-actions > * { animation: rise .9s var(--ease-out) backwards; }
.hero-photo-copy > h1 { animation-delay: .1s; }
.hero-photo-copy > p { animation-delay: .24s; }
.hero-actions > :nth-child(1) { animation-delay: .38s; }
.hero-actions > :nth-child(n + 2) { animation-delay: .48s; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- الرسم المتحرك ---------- */
.hero-scene { width: min(100%, 47rem); justify-self: center; }
.hero-scene svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ألوان الرسم */
.hs-blob { fill: var(--primary-soft-2); }
.hs-floor { fill: rgba(11, 18, 32, .07); }
.hs-shadow { fill: rgba(11, 18, 32, .1); }
.hs-board-shadow { fill: rgba(11, 78, 162, .14); }
.hs-board { fill: #fff; stroke: #BFD3F2; stroke-width: 5; }
.hs-board-tag { fill: #DCE9FA; }
.hs-math text { font-family: var(--font-display); font-weight: 700; font-size: 30px; fill: #0B1220; }
.hs-math .hs-line-2 { fill: #0B4EA2; }
.hs-answer-box { fill: #EAF7EE; stroke: #6FCB90; stroke-width: 2.5; }
.hs-math .hs-answer { fill: #157F32; font-size: 32px; }
.hs-answer-check { fill: none; stroke: #1B9E3E; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hs-axis { fill: none; stroke: #CBD5E1; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hs-mini-guide { fill: none; stroke: #94A3B8; stroke-width: 1.5; stroke-dasharray: 3 3; }
.hs-mini-line { fill: none; stroke: #0B4EA2; stroke-width: 4; stroke-linecap: round; }
.hs-mini-dot { fill: #1B9E3E; stroke: #fff; stroke-width: 2.5; }
.hs-plot { opacity: 0; }
.hs-plot-axis { fill: none; stroke: #CBD5E1; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hs-plot-line { fill: none; stroke: #0B4EA2; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; }
.hs-plot-guide { fill: none; stroke: #94A3B8; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 7 7; }
.hs-plot-dot { fill: #1B9E3E; stroke: #fff; stroke-width: 4; }
.hs-plot-label { font-family: var(--font-display); font-weight: 700; font-size: 20px; fill: #0B1220; }
.hs-plot-label-x { fill: #0B4EA2; }
.hs-tray { fill: #BFD3F2; }
.hs-marker-a { fill: #0B4EA2; }
.hs-marker-b { fill: #1B9E3E; }

.hs-skin { fill: #F2CBA6; }
.hs-skin-dark { fill: #E3B48C; }
.hs-hair { fill: #1E293B; }
.hs-hair-student { fill: #4A3222; }
.hs-smile { fill: none; stroke: #A9714B; stroke-width: 2.5; stroke-linecap: round; }
.hs-cheek { fill: #F4A7A0; opacity: .55; }
.hs-glasses { fill: rgba(255, 255, 255, .45); stroke: #1E293B; stroke-width: 2.5; }
.hs-arm { fill: none; stroke-width: 22; stroke-linecap: round; }

.hs-trousers { fill: #334155; }
.hs-shoe { fill: #0B1220; }
.hs-jacket { fill: #0B4EA2; }
.hs-jacket-arm { stroke: #0B4EA2; }
.hs-jacket-arm-dark { stroke: #093F84; }
.hs-shirt { fill: #fff; }
.hs-tie { fill: #1B9E3E; }
.hs-lapel { fill: none; stroke: #083672; stroke-width: 3; stroke-linecap: round; }
.hs-pointer { fill: none; stroke: #475569; stroke-width: 4; stroke-linecap: round; }
.hs-pointer-tip { fill: #F26363; }

.hs-bag { fill: #F4B740; }
.hs-bag-pocket { fill: #E09F1F; }
.hs-bag-strap { fill: none; stroke: #E09F1F; stroke-width: 5; stroke-linecap: round; }
.hs-chair { fill: #94A3B8; }
.hs-hoodie { fill: #1B9E3E; }
.hs-hoodie-arm { stroke: #157F32; stroke-width: 20; }
.hs-hoodie-neck { fill: none; stroke: #106026; stroke-width: 3; stroke-linecap: round; }
.hs-desk { fill: #E8CDAA; }
.hs-desk-leg { fill: #D2B48C; }
.hs-notebook { fill: #fff; stroke: #CBD5E1; stroke-width: 2; stroke-linejoin: round; }
.hs-notebook-lines { fill: none; stroke: #BFD3F2; stroke-width: 2; stroke-linecap: round; }
.hs-pencil { fill: none; stroke: #F4B740; stroke-width: 5; stroke-linecap: round; }

.hs-bubble-bg { fill: #fff; filter: drop-shadow(0 6px 10px rgba(11, 18, 32, .14)); }
.hs-bubble-dot { fill: #0B4EA2; }
.hs-bubble-check { fill: none; stroke: #1B9E3E; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hs-bubble-q { font-family: var(--font-display); font-weight: 800; font-size: 28px; fill: #0B4EA2; }
.hs-bulb-glow { fill: #FFE7A3; opacity: .6; }
.hs-bulb-glass { fill: #FFD166; }
.hs-bulb-base { fill: #94A3B8; }
.hs-bulb-rays { fill: none; stroke: #F4B740; stroke-width: 3.5; stroke-linecap: round; }

.hs-label rect { fill: #fff; stroke: var(--border-strong); stroke-width: 1.5; }
.hs-label text { font-family: var(--font, var(--font-ar)); font-weight: 700; font-size: 17px; fill: #0B1220; }
.hs-label-teacher rect { stroke: #84ACE8; }
.hs-label-student rect { stroke: #6FCB90; }

/* ---- الظهور المنظَّم (مرة واحدة): الخلفية ← السبورة ← المدرس ← الطالب ← الأسماء ---- */
.hs-blob, .hs-floor { animation: fade-in .9s var(--ease) backwards; }
.hs-in { animation: hs-enter .8s var(--ease-out) backwards; }
.hs-in-1 { animation-delay: .3s; }
.hs-in-2 { animation-delay: .65s; }
.hs-in-3 { animation-delay: 1s; }
@keyframes hs-enter { from { opacity: 0; transform: translateY(26px); } }
.hs-label { transform-box: fill-box; transform-origin: center; animation: hs-label-in .5s var(--ease-out) backwards; }
.hs-label-teacher { animation-delay: 1.5s; }
.hs-label-student { animation-delay: 1.7s; }
@keyframes hs-label-in { from { opacity: 0; transform: scale(.7); } }

/* ---- الحوار (حلقة 15 ثانية تبدأ بعد اكتمال الظهور) ----
   0–30%  الرسم البياني أولًا بعرض السبورة: يُرسم الخط، تُعلَّم النقطة المهمة (17 ← x = ؟) والمؤشر عليها، ثم ينزوي في الركن
   32–40% تُكتب المعادلة                      40–57% الطالب يرفع يده ويسأل والمدرس يلتفت له
   56–72% المدرس يكمل: الخطوة الثانية فالجواب   74–90% الطالب يفهم (لمبة + إيماءة) والمدرس يؤكد ✓ */
.hs-line, .hs-plot, .hs-plot-line, .hs-plot-dot, .hs-plot-info, .hs-mini, .hs-mini-dot,
.hs-pointer-arm, .hs-talk-arm, .hs-eyes, .hs-bubble, .hs-bubble-dots, .hs-bubble-check,
.hs-ask-arm, .hs-student-head, .hs-bulb {
  animation-duration: 15s; animation-delay: 2.2s; animation-iteration-count: infinite;
  animation-fill-mode: backwards; animation-timing-function: var(--ease);
}

/* السبورة: الرسم البياني كبيرًا ← يصغر إلى الركن ← خطوات الحل */
.hs-plot { animation-name: hs-plot; }
@keyframes hs-plot {
  0% { opacity: 0; transform: none; }
  3%, 25% { opacity: 1; transform: none; }
  30% { opacity: 1; transform: translate(250px, 54px) scale(.36); }
  32%, 99% { opacity: 0; transform: translate(250px, 54px) scale(.36); }
  100% { opacity: 0; transform: none; }
}
.hs-plot-line { animation-name: hs-plot-line; }
@keyframes hs-plot-line { 0%, 4% { stroke-dashoffset: 1; } 15%, 99% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.hs-plot-dot { transform-origin: 246px 151px; animation-name: hs-plot-dot; }
@keyframes hs-plot-dot { 0%, 15% { transform: scale(0); } 17.5% { transform: scale(1.35); } 20%, 99% { transform: scale(1); } 100% { transform: scale(0); } }
.hs-plot-info { animation-name: hs-plot-info; }
@keyframes hs-plot-info { 0%, 16% { opacity: 0; } 20%, 25% { opacity: 1; } 28%, 100% { opacity: 0; } }
.hs-mini { animation-name: hs-mini; }
@keyframes hs-mini { 0%, 30% { opacity: 0; } 32%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.hs-mini-dot { transform-origin: 338.5px 108.5px; animation-name: hs-mini-dot; }
@keyframes hs-mini-dot { 0%, 70% { transform: scale(1); } 73% { transform: scale(1.7); } 76%, 100% { transform: scale(1); } }
.hs-line-1 { animation-name: hs-step-1; }
.hs-line-2 { animation-name: hs-step-2; }
.hs-line-3 { animation-name: hs-step-3; }
@keyframes hs-step-1 { 0%, 32% { opacity: 0; transform: translateY(8px); } 36%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes hs-step-2 { 0%, 56% { opacity: 0; transform: translateY(8px); } 60%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes hs-step-3 { 0%, 68% { opacity: 0; transform: translateY(8px); } 72%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* المدرس: المؤشر على نقطة الرسم ثم ينتقل بين الخطوات، واليد الأخرى تخاطب الطالب، والعين تتبع من يكلمه */
.hs-pointer-arm { transform-origin: 440px 232px; animation-name: hs-point; }
@keyframes hs-point {
  0%, 15% { transform: rotate(0deg); }
  17.5% { transform: rotate(-3deg); }
  20%, 54% { transform: rotate(0deg); }
  58%, 66% { transform: rotate(-16.700deg); }
  70%, 91% { transform: rotate(-32.200deg); }
  97%, 100% { transform: rotate(0deg); }
}
.hs-talk-arm { transform-origin: 520px 234px; animation-name: hs-talk; }
@keyframes hs-talk {
  0%, 43% { transform: rotate(0deg); }
  47%, 53% { transform: rotate(-62deg); }
  57%, 75% { transform: rotate(0deg); }
  79%, 88% { transform: rotate(-62deg); }
  93%, 100% { transform: rotate(0deg); }
}
.hs-eyes-teacher { animation-name: hs-look-teacher; }
@keyframes hs-look-teacher {
  0%, 42% { transform: translateX(-2px); }
  45%, 53% { transform: translateX(2px); }
  56%, 74% { transform: translateX(-2px); }
  78%, 90% { transform: translateX(2px); }
  95%, 100% { transform: translateX(-2px); }
}
.hs-teacher { animation: hs-breathe 4.5s ease-in-out 2.2s infinite alternate; }
@keyframes hs-breathe { to { transform: translateY(-3px); } }

.hs-bubble { transform-box: fill-box; }
.hs-bubble-teacher { transform-origin: 20% 100%; animation-name: hs-bubble-teacher; }
@keyframes hs-bubble-teacher { 0%, 2% { transform: scale(0); opacity: 0; } 6%, 90% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(0); opacity: 0; } }
.hs-bubble-dots { animation-name: hs-dots-show; }
@keyframes hs-dots-show { 0%, 73% { opacity: 1; } 76%, 100% { opacity: 0; } }
.hs-bubble-check { stroke-dasharray: 46; animation-name: hs-check-show; }
@keyframes hs-check-show { 0%, 76% { stroke-dashoffset: 46; opacity: 0; } 77% { opacity: 1; } 82%, 100% { stroke-dashoffset: 0; opacity: 1; } }
.hs-bubble-dot { animation: hs-typing 1.2s ease-in-out infinite; }
.hs-bubble-dot:nth-child(2) { animation-delay: .18s; }
.hs-bubble-dot:nth-child(3) { animation-delay: .36s; }
@keyframes hs-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* الطالب: يرفع يده ويسأل، ثم يكتب، ثم يفهم */
.hs-ask-arm { transform-origin: 722px 317px; animation-name: hs-ask; animation-timing-function: var(--ease-out); }
@keyframes hs-ask { 0%, 40% { transform: rotate(0deg); } 44%, 54% { transform: rotate(-158deg); } 59%, 100% { transform: rotate(0deg); } }
.hs-bubble-student { transform-origin: 60% 100%; animation-name: hs-bubble-student; animation-timing-function: var(--ease-out); }
@keyframes hs-bubble-student { 0%, 42% { transform: scale(0); opacity: 0; } 46%, 54% { transform: scale(1); opacity: 1; } 57%, 100% { transform: scale(0); opacity: 0; } }
.hs-eyes-student { animation-name: hs-look-student; }
@keyframes hs-look-student {
  0%, 59% { transform: translate(-2px, 0); }
  62%, 70% { transform: translate(-1.5px, 1.2px); }
  73%, 100% { transform: translate(-2px, 0); }
}
.hs-student-head { animation-name: hs-nod; }
@keyframes hs-nod { 0%, 76% { transform: translateY(0); } 79% { transform: translateY(4px); } 82% { transform: translateY(0); } 85% { transform: translateY(4px); } 88%, 100% { transform: translateY(0); } }
.hs-write-arm { transform-origin: 658px 317px; animation: hs-write 1s ease-in-out infinite alternate; }
@keyframes hs-write { to { transform: rotate(3deg); } }
/* رمشة العين (للشخصيتين في كل الرسوم) */
.hs-blink { transform-box: fill-box; transform-origin: center; animation: hs-blink 4.6s ease-in-out 3s infinite; }
.hs-blink-2 { animation-duration: 5.4s; animation-delay: 4.1s; }
@keyframes hs-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
.hs-bulb { transform-origin: 748px 214px; animation-name: hs-bulb; animation-timing-function: var(--ease-out); }
@keyframes hs-bulb { 0%, 74% { transform: scale(0); opacity: 0; } 78% { transform: scale(1.15); opacity: 1; } 81%, 90% { transform: scale(1); opacity: 1; } 95%, 100% { transform: scale(0); opacity: 0; } }
.hs-bulb-rays { animation: hs-rays 1.6s ease-in-out infinite alternate; }
@keyframes hs-rays { to { opacity: .35; } }

/* خارج الشاشة: الحركة تتوقف */
.hero-scene.is-paused * { animation-play-state: paused !important; }

/* ---------- الأرقام: كروت مرسومة بشخصيات الواجهة تركب على آخرها — رسمة · رقم يعدّ · وصف ---------- */
.hero-stats { position: relative; z-index: 2; background: transparent; color: var(--ink); margin-block-start: clamp(-4.5rem, -6vw, -3rem); }
.hero-stats::before { display: none; }
.hero-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.hero-stat {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4); text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: 0 14px 30px -18px rgba(11, 30, 66, .25);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.hero-stat + .hero-stat { border-inline-start: 1px solid var(--border); }
.hero-stat:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -18px rgba(11, 30, 66, .32); }

.stat-art { display: block; width: clamp(5rem, 7.5vw, 6rem); aspect-ratio: 1; }
.stat-art svg { display: block; width: 100%; height: 100%; }
.stat-art-icon { display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--primary-text); scale: .8; }
.stat-art-icon svg { width: 42%; height: 42%; }
.hero-stat:hover .stat-art { animation: stat-art-nod .6s var(--ease-out); }
@keyframes stat-art-nod { 40% { transform: translateY(-5px) rotate(-4deg); } 70% { transform: translateY(0) rotate(3deg); } }

.hero-stat-value {
  font-family: var(--font-display); font-size: clamp(1.75rem, 2.8vw, 2.375rem); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; direction: ltr;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink);
}
.stat-suffix { color: #6C8BB3; margin-inline-start: .125rem; }
.hero-stat-label { color: var(--ink-2); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.hero-stats > .edit-here { inset-block-start: -1rem; }

/* ---------- التابلت والموبايل: النص أولًا ثم الرسم ---------- */
@media (max-width: 900px) {
  .hero-photo-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--sp-6); padding-block: var(--sp-8) clamp(4.5rem, 14vw, 6rem); }
  .hero-photo-copy { max-width: 40rem; }
  .hero-photo h1 { font-size: clamp(1.875rem, 8.2vw, 2.875rem); line-height: 1.32; }
  .hero-highlight { margin-block-start: var(--sp-4); }
  .hero-photo-text { line-height: 1.9; }
  .hero-actions { margin-block-start: var(--sp-6); }
  .hero-actions .btn { flex: 1 1 14rem; }
  .hero-scene { width: min(100%, 34rem); }
}
@media (max-width: 800px) {
  .hero-stats { margin-block-start: -3rem; }
  .hero-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .hero-stat { padding: var(--sp-5) var(--sp-3); gap: var(--sp-2); }
  .hero-stat:nth-child(3) { border-inline-start: 1px solid var(--border); }
  .hero-stat:nth-child(n + 3) { border-block-start: 1px solid var(--border); }
  .stat-art { width: 4.5rem; }
  .hero-stat-value { font-size: 1.625rem; }
  .hero-stat-label { font-size: .9375rem; }
}
@media (max-width: 420px) {
  .hero-actions .btn { flex-basis: 100%; }
}

/* ---------------------------------------------------------------
   29-ب. قصة المدرس والطالب على امتداد الصفحة الرئيسية
   الواجهة (الشرح) ← «إزاي نبدأ» (يطلب · يتعرّف عليه المدرس · الحصة) ← المواد (يختار) ← شريط الدعوة (النجاح)
   نفس الشخصيتين ونفس ألوان رسم الواجهة (.hs-*). الحركة تتوقف خارج الشاشة.
   --------------------------------------------------------------- */
.story-scene { width: 100%; }
.story-scene svg { display: block; width: 100%; height: auto; overflow: hidden; border-radius: var(--r-lg); }
.story-scene.is-paused * { animation-play-state: paused !important; }

/* كل عنصر متحرك يدور/يكبر حول صندوقه هو */
.story-scene :is(.st-pop, .st-wave, .st-nod, .st-thumb, .st-cheer, .st-phone, .st-confetti > *) { transform-box: fill-box; transform-origin: center; }

/* داخل كروت الخطوات: الرسم أعلى الكارت بدل الأيقونة */
.step-card.has-story { padding-block-start: var(--sp-5); align-items: stretch; }
.step-card.has-story .story-scene { margin-block-end: var(--sp-2); }
.step-card.has-story .service-icon { display: none; }
.step-card.has-story .step-num { inset-block-start: -1.375rem; }

/* قسم المواد: الطالب يفكّر فوق العنوان */
.story-scene-sm { width: min(100%, 15rem); margin: 0 auto var(--sp-2); }

/* ألوان إضافية */
.st-q { font-size: 26px; }
.st-phone-body { fill: #0B1220; }
.st-phone-screen { fill: #fff; }
.st-phone-bar { fill: #25D366; }
.st-msg-green { fill: #25D366; filter: drop-shadow(0 5px 8px rgba(37, 211, 102, .35)); }
.st-msg-lines { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.st-msg-lines-dark { fill: none; stroke: #CBD5E1; stroke-width: 3.5; stroke-linecap: round; }
.st-tick { stroke-width: 3.5; stroke-dasharray: none; animation: none; }
.st-link { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .045 .045; opacity: .7; }
.st-match-bg { fill: #1B9E3E; filter: drop-shadow(0 6px 10px rgba(27, 158, 62, .4)); }
.st-match-check { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.st-laptop-frame { fill: #0B1220; }
.st-laptop-screen { fill: #fff; }
.st-screen-line { fill: none; stroke: #0B4EA2; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.st-screen-tag { fill: #DCE9FA; }
.st-screen-tag-2 { fill: #CDEDD7; }
.st-live { fill: #F26363; }
.st-star-bg { fill: #FFF3CF; stroke: #F4B740; stroke-width: 2; }
.st-star-shape { fill: #F4B740; }
.st-symbol { font-family: var(--font-display); font-weight: 800; font-size: 22px; fill: #0B4EA2; }
.st-symbol-2 { fill: #1B9E3E; }
.st-symbol-3 { fill: #D97706; }
.st-ending-glow { fill: rgba(255, 255, 255, .16); }
.st-c1 { fill: #FFD166; } .st-c2 { fill: #6FCB90; } .st-c3 { fill: #8DB8FF; }
.st-paper-sheet { fill: #fff; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.st-paper-grade { font-family: var(--font-display); font-weight: 800; font-size: 24px; fill: #1B9E3E; }
.st-paper-lines { fill: none; stroke: #CBD5E1; stroke-width: 3; stroke-linecap: round; }

/* ---- الفصل 1: يسأل ← يبعت ← يوصله الرد (6 ثوانٍ) ---- */
.st-ask-q { animation: st-ask-q 6s var(--ease-out) infinite; }
@keyframes st-ask-q { 0%, 4% { transform: scale(0); opacity: 0; } 10%, 52% { transform: scale(1); opacity: 1; } 58%, 100% { transform: scale(0); opacity: 0; } }
.st-msg-out { animation: st-msg-out 6s var(--ease-out) infinite; }
@keyframes st-msg-out { 0%, 22% { transform: translate(-22px, 14px) scale(0); opacity: 0; } 30%, 90% { transform: none; opacity: 1; } 96%, 100% { transform: scale(.9); opacity: 0; } }
.st-msg-in { animation: st-msg-in 6s var(--ease-out) infinite; }
@keyframes st-msg-in { 0%, 52% { transform: translateY(10px) scale(0); opacity: 0; } 60%, 90% { transform: none; opacity: 1; } 96%, 100% { transform: scale(.9); opacity: 0; } }
.st-phone { animation: st-phone 6s var(--ease) infinite; }
@keyframes st-phone { 0%, 20%, 30%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-6deg); } }
.st-eyes-phone { animation: st-eyes-phone 6s var(--ease) infinite; }
@keyframes st-eyes-phone { 0%, 18% { transform: translate(0, 0); } 24%, 100% { transform: translate(2px, 1.2px); } }

/* ---- الفصل 2: المدرس يلوّح ← خط التوافق ← علامة ✓ (6 ثوانٍ) ---- */
.st-wave { transform-origin: 80% 100%; animation: st-wave 1.1s ease-in-out infinite alternate; }
@keyframes st-wave { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
.st-link { animation: st-link 6s linear infinite; }
@keyframes st-link { to { stroke-dashoffset: -.9; } }
.st-match { animation: st-match 6s var(--ease-out) infinite; }
@keyframes st-match { 0%, 18% { transform: scale(0); } 26% { transform: scale(1.2); } 30%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
.st-nod { animation: st-nod 6s var(--ease) infinite; }
@keyframes st-nod { 0%, 34%, 40%, 46%, 100% { transform: translateY(0); } 37%, 43% { transform: translateY(4px); } }
.st-eyes-right { transform: translateX(2px); }
.st-eyes-left { transform: translateX(-2px); }
.st-eyes-up { transform: translate(1.5px, -1.2px); }

/* ---- الفصل 3: الحصة على الشاشة ← الخط يُرسم ← نجمة (6 ثوانٍ) ---- */
.st-draw { animation: st-draw 6s var(--ease) infinite; }
@keyframes st-draw { 0%, 10% { stroke-dashoffset: 1; } 55%, 92% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 1; } }
.st-live { animation: hv-blink 1.6s ease-in-out infinite; }
@keyframes hv-blink { 50% { opacity: .25; } }
.st-star { animation: st-star 6s var(--ease-out) infinite; }
@keyframes st-star { 0%, 58% { transform: scale(0) rotate(-40deg); } 66% { transform: scale(1.2) rotate(8deg); } 70%, 90% { transform: scale(1) rotate(0deg); } 97%, 100% { transform: scale(0); } }

/* ---- المواد: رموز تتبدّل في فقاعة التفكير (6 ثوانٍ) ---- */
.st-think-dot { animation: st-float 2.4s ease-in-out infinite alternate; }
.st-think-dot-2 { animation-delay: .3s; }
.st-think-cloud { animation: st-float 2.4s ease-in-out .6s infinite alternate; }
@keyframes st-float { to { transform: translateY(-4px); } }
.st-symbol { opacity: 0; animation: st-symbol 6s var(--ease) infinite; }
.st-symbol-2 { animation-delay: 2s; }
.st-symbol-3 { animation-delay: 4s; }
@keyframes st-symbol { 0%, 4% { opacity: 0; transform: translateY(6px); } 9%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-6px); } }

/* ---- النهاية: يرفع الورقة، المدرس إبهام لأعلى، وقصاصات احتفال ---- */
.st-cheer { transform-origin: 20% 100%; animation: st-cheer 1.4s ease-in-out infinite alternate; }
@keyframes st-cheer { from { transform: rotate(-3deg); } to { transform: rotate(5deg) translateY(-3px); } }
.st-thumb { transform-origin: 100% 100%; animation: st-thumb 1.8s ease-in-out infinite alternate; }
@keyframes st-thumb { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
.st-confetti > * { animation: st-confetti 2.6s ease-in-out infinite alternate; }
.st-confetti > :nth-child(2n) { animation-duration: 3.2s; animation-delay: .4s; }
.st-confetti > :nth-child(3n) { animation-duration: 2.2s; animation-delay: .8s; }
@keyframes st-confetti { from { transform: translateY(-5px) rotate(-14deg); opacity: .55; } to { transform: translateY(6px) rotate(16deg); opacity: 1; } }

/* شريط الدعوة (الخاتمة): الرسم في جهة، والنص وتحته الأزرار في الجهة الأخرى */
.cta-band:has(> .story-scene-ending) {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: var(--sp-5); align-items: center;
}
.cta-band > .story-scene-ending { grid-row: 1 / span 2; width: clamp(13rem, 22vw, 18rem); }
.cta-band > .story-scene-ending svg { overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.cta-band:has(> .story-scene-ending) > .cta-copy { align-self: end; }
.cta-band:has(> .story-scene-ending) > .cta-actions { align-self: start; }
@media (max-width: 900px) {
  .cta-band:has(> .story-scene-ending) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .cta-band > .story-scene-ending { grid-row: auto; width: min(100%, 15rem); }
  .cta-band:has(> .story-scene-ending) > .cta-actions { justify-content: center; }
}
/* ---------------------------------------------------------------
   30. تسجيل ودخول أسهل: اختيار النوع، زر Google، الفاصل
   --------------------------------------------------------------- */
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.role-option {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.role-option:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.role-option input { position: absolute; opacity: 0; pointer-events: none; }
.role-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--ring); }
.role-icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--ink-2); margin-block-end: .25rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.role-option:has(input:checked) .role-icon { background: var(--primary); color: #fff; }
.role-title { font-weight: 700; font-size: 1rem; color: var(--ink); }
.role-desc { font-size: .75rem; color: var(--ink-soft); line-height: 1.5; }
.role-option-button { width: 100%; font: inherit; color: inherit; }
.role-option-button:hover { border-color: var(--primary); background: var(--primary-soft); }
.role-option-button:hover .role-icon { background: var(--primary); color: #fff; }

.btn-google {
  background: #fff; color: #1F1F1F; border: 1px solid #DADCE0;
  font-weight: 500; box-shadow: var(--shadow-xs);
}
.btn-google:hover { background: #F8F9FA; color: #1F1F1F; border-color: #C6C9CE; }

.auth-divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink-faint); font-size: .8125rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

@media (max-width: 380px) { .role-switch { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   31. تحكّم المدير من أي مكان + شرح كل صفحة
   --------------------------------------------------------------- */

/* شريط المدير أعلى الموقع العام — يظهر للمدير فقط */
.admin-bar { background: #0F172A; color: rgba(255, 255, 255, .85); font-size: .8125rem; }
.admin-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; padding-block: .5rem; }
.admin-bar-note { display: inline-flex; align-items: center; gap: .4rem; }
.admin-bar-links { display: inline-flex; align-items: center; gap: .25rem var(--sp-3); flex-wrap: wrap; }
.admin-bar a, .admin-bar button {
  color: #fff; font: inherit; font-weight: 600; background: rgba(255, 255, 255, .08);
  border: 0; border-radius: var(--r-full); padding: .3rem .75rem; cursor: pointer;
  transition: background var(--t-fast);
}
.admin-bar a:hover, .admin-bar button:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* زر «✎ تعديل» فوق كل قسم */
:where(.site-section, .page-hero, .hero-stats, .cta-band, .site-footer):has(> .edit-here) { position: relative; }
.edit-here {
  position: absolute; z-index: 6; inset-block-start: .75rem; inset-inline-end: .75rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem; border-radius: var(--r-full);
  background: #fff; color: var(--brand-600); border: 1.5px dashed var(--brand-400);
  font-size: .8125rem; font-weight: 600; line-height: 1.2;
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .35);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.edit-here:hover { background: var(--brand-500); color: #fff; border-style: solid; transform: translateY(-1px); }
.hero-stats > .edit-here { inset-block-start: .5rem; }
.edit-hidden .edit-here { display: none; }

/* «إيه الصفحة دي؟» أعلى صفحات اللوحات */
.page-help {
  margin-block-end: var(--sp-5);
  background: var(--info-bg); border: 1px solid var(--info-border); border-radius: var(--r-lg);
  color: var(--ink);
}
.page-help-summary {
  display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap;
  padding: .75rem 1rem; list-style: none; font-size: .875rem; line-height: 1.6;
}
details.page-help > summary { cursor: pointer; }
details.page-help > summary::-webkit-details-marker { display: none; }
.page-help-icon { color: var(--info); flex-shrink: 0; display: inline-flex; margin-block-start: .1rem; }
.page-help-what { flex: 1 1 16rem; }
.page-help-more {
  margin-inline-start: auto; white-space: nowrap;
  font-size: .8125rem; font-weight: 600; color: var(--info-text);
}
.page-help-more::after { content: " ▾"; }
details.page-help[open] .page-help-more::after { content: " ▴"; }
.page-help-body { padding: 0 1rem 1rem; padding-inline-start: 2.6rem; font-size: .875rem; display: grid; gap: var(--sp-2); }
.page-help-body ol { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .3rem; color: var(--ink-2); }
.page-help-tip { display: flex; gap: .4rem; align-items: flex-start; color: var(--info-text); font-weight: 500; }

/* «تحكّم سريع» في لوحة الإدارة */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: var(--sp-3); }
.quick-tile {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.quick-tile:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--ink); transform: translateY(-1px); }
.quick-icon {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.quick-tile:hover .quick-icon { background: var(--primary); color: #fff; }
.quick-text { display: grid; gap: .15rem; min-width: 0; }
.quick-text strong { font-size: .9375rem; }
.quick-text span { font-size: .8125rem; color: var(--ink-soft); line-height: 1.5; }

/* محرر محتوى الموقع: مكان كل كارت في الموقع */
.site-card-head { align-items: flex-start; flex-wrap: wrap; }
.site-card-where { display: flex; align-items: flex-start; gap: .35rem; font-size: .8125rem; color: var(--ink-soft); line-height: 1.6; }
.site-card-where svg { flex-shrink: 0; margin-block-start: .2rem; color: var(--primary); }
section.card { scroll-margin-block-start: 5rem; }
section.card:target { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft-2), var(--shadow-card); }

/* ---------------------------------------------------------------
   32. صفحات السياسات + الباقات والأسعار + بيانات المنشأة في التذييل
   --------------------------------------------------------------- */
.site-footer-legal { border-block-start: 1px solid rgba(255, 255, 255, .1); padding-block: var(--sp-4); font-size: .875rem; }
.site-footer-legal-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); flex-wrap: wrap; }
.site-footer-policies { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.site-footer-pay { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .7); }
.site-footer-pay svg { color: #6FCB90; flex-shrink: 0; }
@media (max-width: 560px) { .site-footer-legal-inner { justify-content: center; text-align: center; } .site-footer-policies { justify-content: center; } }

.policy-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.policy-nav { position: sticky; inset-block-start: 6.5rem; display: flex; flex-direction: column; gap: .25rem; }
.policy-nav a {
  padding: .6rem .9rem; border-radius: var(--r); color: var(--ink-2); font-weight: 500; font-size: .9375rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.policy-nav a:hover { background: var(--surface-3); color: var(--ink); }
.policy-nav a.active { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
@media (max-width: 860px) {
  .policy-layout { grid-template-columns: 1fr; }
  .policy-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

.prose .card-body { padding: clamp(1.25rem, 4vw, 2.5rem); }
.prose { line-height: 2; color: var(--ink-2); font-size: 1rem; }
.prose h2 { font-size: 1.1875rem; color: var(--ink); margin-block: var(--sp-8) var(--sp-3); line-height: 1.5; }
.prose h2:first-child { margin-block-start: 0; }
.prose p { margin-block-end: var(--sp-3); }
.prose ul { margin: 0 0 var(--sp-3); padding-inline-start: 1.25rem; display: grid; gap: .35rem; }
.prose li::marker { color: var(--primary); }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-5); }
.price-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-6); border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.price-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.price-card h3 { font-size: 1.125rem; line-height: 1.5; }
.price-card-amount { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.price-card-amount .price { font-size: 1.75rem; }
.price-card-features { list-style: none; display: grid; gap: .4rem; font-size: .875rem; color: var(--ink-2); padding: 0; margin: 0; }
.price-card-features li { display: flex; align-items: flex-start; gap: .4rem; }
.price-card-features svg { color: var(--success); flex-shrink: 0; margin-block-start: .3rem; }
.price-card .btn { margin-block-start: auto; }

.pricing-note {
  text-align: center; display: grid; gap: var(--sp-4); justify-items: center;
  padding: var(--sp-8) var(--sp-6); border-radius: var(--r-xl);
  background: var(--primary-soft); border: 1px dashed var(--brand-300);
}
.pricing-note p { max-width: 42rem; line-height: 1.9; color: var(--ink); font-size: 1.0625rem; }
.pricing-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.pricing-fact {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border);
}
.pricing-fact .service-icon { flex-shrink: 0; margin: 0; }
.pricing-fact strong { display: block; margin-block-end: .25rem; }
.pricing-fact p { font-size: .875rem; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 860px) { .pricing-facts { grid-template-columns: 1fr; } }

.policy-textarea { font-size: .875rem; line-height: 1.8; min-height: 22rem; }

/* زر التعديل داخل التذييل: لون روابط التذييل الأبيض لا يطغى عليه */
.site-footer a.edit-here { color: var(--brand-600); }
.site-footer a.edit-here:hover { color: #fff; }

/* ---------------------------------------------------------------
   35. الموبايل: لا تمرير أفقي، أهداف لمس مريحة، ولا قفزات في التخطيط
   --------------------------------------------------------------- */

/* الزر لا يتجاوز حاويته أبدًا، ورأس البطاقة يلتف بدل أن يدفع المحتوى خارج الشاشة */
.btn { max-width: 100%; }
.card-head { flex-wrap: wrap; }
.toolbar { min-width: 0; }

/* الرأس يصغر عند التمرير دون أن يتحرك المحتوى تحته: الهامش يعوّض الفرق */
@media (min-width: 1021px) {
  .site-header.scrolled { margin-block-end: 1.75rem; }
}

/* هدف لمس أكبر لرابط صغير بجوار عنوان حقل (مثل «نسيت كلمة المرور») */
.row-between > a.text-xs { padding-block: .625rem; margin-block: -.625rem; }

@media (max-width: 480px) {
  /* النص الطويل يلتف داخل الزر بدل أن يوسّع الصفحة */
  .btn { white-space: normal; text-align: center; }
  .btn-sm { min-height: 2.5rem; }
  .btn-lg { padding-inline: 1.25rem; }

  .toolbar { width: 100%; }
  .toolbar .input, .toolbar .select { flex: 1 1 9rem; min-width: 0; }

  .input-group .input-action { width: 2.5rem; height: 2.5rem; inset-inline-end: .25rem; }
  .input-group .input { padding-inline-end: 3.125rem; }

  /* شريط التواصل العلوي والتذييل: روابط بارتفاع مريح للإصبع */
  .site-topbar-inner { min-height: 2.75rem; }
  .site-topbar-group { gap: var(--sp-1); }
  .site-topbar a { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; padding-inline: .375rem; }
  .site-footer ul { gap: 0; }
  .site-footer ul a, .site-footer-policies a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .site-footer-contact li { min-height: 2.75rem; }
  .site-footer .site-credit { min-height: 2.75rem; }
  .site-footer-policies { gap: 0 var(--sp-5); }
  .site-footer-grid { gap: var(--sp-6); padding-block: var(--sp-12) var(--sp-8); }
  .site-footer h3 { margin-block-end: var(--sp-3); }

  /* مسافات الأقسام أقصر على الشاشة الصغيرة */
  .site-section { padding-block: var(--sp-12); }
  .section-head { margin-block-end: var(--sp-8); }
  .section-head p, .page-hero p { font-size: 1rem; }
  .cta-band { margin-block: var(--sp-8) var(--sp-12); }
  .service-card, .step-card { padding-inline: var(--sp-5); }

  /* اللوحات */
  .page-title { font-size: 1.375rem; }
  .table th, .table td { padding-inline: var(--sp-4); }
  .modal-backdrop { padding: var(--sp-3); align-items: flex-end; }
  .modal { max-height: calc(100dvh - 1.5rem); border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); }
  .modal-head, .modal-body { padding-inline: var(--sp-5); }
  .modal-foot { padding-inline: var(--sp-5); flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }
  #toasts { inset-inline: var(--sp-3); inset-block-end: var(--sp-3); max-width: none; }
  .tabs { width: 100%; }
}

/* شاشات 320px: مسافات جانبية أصغر قليلًا لتتسع البطاقات */
@media (max-width: 360px) {
  .container { padding-inline: var(--sp-4); }
  .page { padding-inline: var(--sp-3); }
  .auth-main { padding-inline: var(--sp-3); }
  .hero-stat-label { font-size: .8125rem; }
  .role-option { padding-inline: var(--sp-2); }
}

/* الأجهزة اللمسية: لا تأثيرات مرور تبقى «عالقة» بعد اللمس */
@media (hover: none) {
  .btn:hover:not(:disabled), .service-card:hover, .step-card:hover, .price-card:hover, .pricing-fact:hover,
  .quick-tile:hover, .stat:hover, .card-hover:hover, .subject-chip:hover, .choice:hover, .role-option:hover { transform: none; }
  .service-card:hover .service-icon, .step-card:hover .service-icon, .stat:hover .stat-icon, .quick-tile:hover .quick-icon { transform: none; }
}

/* ---------------------------------------------------------------
   33-ب. لغة الحركة الموحّدة (كل الصفحات)
   قاعدة واحدة: كل حركة لها سبب — تأكيد لمسة، إظهار عمق، أو توجيه العين. transform و opacity فقط.
   - نابض مخمَّد (‎--spring‎): للارتفاع عند المرور وعودة العناصر — تجاوز ~2% بلا ارتداد ظاهر.
   - ‎--ease-out‎: للدخول والظهور (يبدأ سريعًا ويستقر بهدوء).
   - الضغط: استجابة فورية قصيرة (90ms) ثم عودة بالنابض.
   --------------------------------------------------------------- */
:root {
  --spring: cubic-bezier(.3, 1.25, .5, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.3, 1.25, .5, 1);
  --lift: -5px;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .089, .274, .477, .656, .795, .893, .957, .994, 1.012, 1.019, 1.019, 1.016, 1.012, 1.009, 1.005, 1.003, 1.001, 1); }
}

/* --- الأزرار: ترتفع قليلًا عند المرور، وتنضغط عند النقر ثم تعود بالنابض --- */
.btn {
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), filter var(--t-fast),
              box-shadow .4s var(--ease-out), transform .5s var(--spring);
}
.btn:hover:not(:disabled) { transform: translate3d(0, -2px, 0); }
.btn:active:not(:disabled) { transform: translate3d(0, 1px, 0) scale(.97); transition-duration: 90ms; }
.btn-ghost:hover:not(:disabled), .btn-icon:hover:not(:disabled) { transform: none; }
.btn-ghost:active:not(:disabled), .btn-icon:active:not(:disabled) { transform: scale(.94); }

/* --- الكروت: نفس الارتفاع والظل والتوقيت في كل مكان --- */
.service-card, .step-card, .hero-stat, .price-card, .pricing-fact, .card-hover, .quick-tile, .stat, .role-option, .subject-chip {
  transition: transform .6s var(--spring), box-shadow .5s var(--ease-out), border-color .3s var(--ease), background .3s var(--ease);
}
.service-card:hover, .step-card:hover, .hero-stat:hover, .price-card:hover, .pricing-fact:hover, .card-hover:hover {
  transform: translate3d(0, var(--lift), 0); box-shadow: var(--shadow);
}
.quick-tile:hover, .stat:hover, .subject-chip:hover { transform: translate3d(0, -3px, 0); }
.service-card:active, .step-card:active, .price-card:active, .card-hover:active, .quick-tile:active { transform: translate3d(0, -1px, 0); transition-duration: 120ms; }

/* أيقونات الكروت: تكبر قليلًا بلا دوران */
.service-icon, .stat-icon, .quick-icon, .role-icon { transition: background var(--t), color var(--t), transform .6s var(--spring); }
.service-card:hover .service-icon, .step-card:hover .service-icon, .pricing-fact:hover .service-icon,
.stat:hover .stat-icon, .quick-tile:hover .quick-icon { transform: scale(1.06); }
.hero-stat:hover .stat-art { animation: none; }

/* عمق خفيف: محتوى الكارت يتبع المؤشر بمقدار بسيط (JS يضع ‎--px/--py‎ بين -1 و 1) */
@media (hover: hover) and (pointer: fine) {
  .stat-art, .step-card .story-scene, .service-card .service-icon {
    translate: calc(var(--px, 0) * 5px) calc(var(--py, 0) * 4px);
    transition: translate .7s var(--ease-out), background var(--t), color var(--t), transform .6s var(--spring);
  }
}

/* --- القائمة العليا: مؤشر واحد ينزلق بين العناصر بدل خط لكل عنصر --- */
@media (min-width: 1021px) { .site-nav { position: relative; } }   /* على الموبايل القائمة لوحة منسدلة بموضعها الخاص */
.nav-indicator {
  position: absolute; inset-block-end: .25rem; inset-inline-start: 0; height: 2px; width: 1px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform-origin: 0 50%; opacity: 0; pointer-events: none;
  transition: transform .55s var(--spring), opacity .25s var(--ease);
}
html[dir="rtl"] .nav-indicator { inset-inline-start: auto; left: 0; }
.site-nav.has-indicator > a::after { display: none; }
.site-nav.has-indicator .nav-indicator.on { opacity: 1; }
@media (max-width: 1020px) { .nav-indicator { display: none; } .site-nav.has-indicator > a::after { display: block; } }

/* القوائم المنسدلة والنوافذ: تخرج من نقطتها بنابض هادئ */
.dropdown-menu { transition: opacity .18s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; }
.dropdown-menu.open { transition: opacity .2s var(--ease), transform .5s var(--spring), visibility 0s; }

/* --- الواجهة: تتابع سينمائي هادئ ---
   الخلفية ← السبورة ← العنوان (من ضبابي إلى واضح) ← الوصف ← الزرّان ← المدرس ← الطالب ← الأسماء ← الأرقام */
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 28% 42%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%);
  animation: hero-light 1.8s var(--ease-out) backwards;
}
html[dir="ltr"] .hero-photo::before { background: radial-gradient(60% 70% at 72% 42%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%); }
@keyframes hero-light { from { opacity: 0; transform: scale(1.12); } }

.hero-photo-copy > h1 { animation: hero-title 1.1s var(--ease-out) .3s backwards; }
@keyframes hero-title { from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(10px); } }
.hero-photo-copy > p, .hero-photo-copy > .hero-highlight { animation: rise .9s var(--ease-out) backwards; animation-delay: .5s; }
.hero-photo-copy > .hero-photo-text { animation-delay: .62s; }
.hero-actions > * { animation: hero-cta .8s var(--ease-out) backwards; }
.hero-actions > :nth-child(1) { animation-delay: .78s; }
.hero-actions > :nth-child(n + 2) { animation-delay: .88s; }
@keyframes hero-cta { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

.hs-blob { transform-box: fill-box; transform-origin: center; animation: hs-blob-in 1.4s var(--ease-out) .1s backwards; }
@keyframes hs-blob-in { from { opacity: 0; transform: scale(.9); } }
.hs-in { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-enter 1s var(--ease-out) backwards; }
.hs-in-1 { animation-delay: .25s; }
.hs-in-2 { animation-delay: .6s; }
.hs-in-3 { animation-delay: .9s; }
@keyframes hs-enter { from { opacity: 0; transform: translateY(22px) scale(.965); } }

/* كاميرا بطيئة جدًا على المشهد + ضوء يمر على السبورة */
.hero-scene svg { animation: hs-camera 26s var(--ease-in-out) 2.4s infinite alternate; transform-origin: 50% 60%; }
@keyframes hs-camera { to { transform: scale(1.022) translate3d(-.5%, -.4%, 0); } }
.hs-glare { animation: hs-glare 11s var(--ease-in-out) 3s infinite alternate; }
@keyframes hs-glare { from { transform: translateX(-14px); opacity: .35; } to { transform: translateX(22px); opacity: .6; } }

/* كروت الأرقام الظاهرة عند التحميل: تدخل بعد اكتمال الواجهة */
.hero-stat.enter { animation: rise-sm .8s var(--ease-out) backwards; animation-delay: calc(1.15s + var(--i, 0) * 90ms); }

/* --- الظهور عند التمرير: مجموعة واحدة تصعد معًا بتتابع قصير --- */
.reveal {
  opacity: 0; transform: translate3d(0, 20px, 0) scale(.985);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }

/* --- حركة مرتبطة بالتمرير (طبقات بعمق مختلف) — للمتصفحات الداعمة فقط، ولمن لم يطلب تقليل الحركة --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* الواجهة وهي تخرج: الرسم يتأخر عن الصفحة، والنص يتأخر أقل ويخفت */
    .hero-scene { animation: par-scene linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes par-scene { to { transform: translate3d(0, 64px, 0); } }
    .hero-photo-copy { animation: par-copy linear both; animation-timeline: view(); animation-range: exit 10% exit 100%; }
    @keyframes par-copy { to { transform: translate3d(0, 30px, 0); opacity: .25; } }
    /* رسوم القصة داخل الكروت وشريط الدعوة: تستقر في مكانها مع دخول الكارت */
    .step-card .story-scene svg, .story-scene-sm svg, .story-scene-ending svg {
      animation: par-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%;
    }
    @keyframes par-settle { from { transform: translate3d(0, 16px, 0) scale(.97); } }
    .cta-band { animation: par-band linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes par-band { from { transform: scale(.965); } }
  }
}

/* --- لوحات التحكم: نفس اللغة --- */
.page > *, .page > .grid > *, .page .quick-grid > * { animation-duration: .7s; }
@keyframes rise-sm { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.99); } }
.modal { transition: transform .5s var(--spring), opacity .2s var(--ease); }
.sidebar-link, .tab, .dropdown-item { transition: background .2s var(--ease), color .2s var(--ease), box-shadow .3s var(--ease), transform .4s var(--spring); }
.sidebar-link:active, .tab:active, .dropdown-item:active { transform: scale(.985); }

@media (hover: none) {
  .service-card:hover, .step-card:hover, .hero-stat:hover, .price-card:hover, .pricing-fact:hover, .card-hover:hover,
  .quick-tile:hover, .stat:hover, .subject-chip:hover, .btn:hover:not(:disabled) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene svg, .hs-glare, .hero-photo::before { animation: none !important; }
  .stat-art, .step-card .story-scene, .service-card .service-icon { translate: none !important; }
}

/* ---------------------------------------------------------------
   33. الحركة — هادئة ومقصودة
   كل الحركات تُعطَّل تلقائيًا لمن يفضّل تقليل الحركة (آخر الملف).
   --------------------------------------------------------------- */

/* --- انتقال الصفحات: تلاشٍ ناعم بين صفحة وأخرى (المتصفحات الداعمة فقط) --- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
/* القائمة الجانبية والشريط العلوي يبقيان ثابتين أثناء الانتقال */
.sidebar { view-transition-name: sidebar; }
.topbar { view-transition-name: topbar; }
.site-header { view-transition-name: site-header; }
::view-transition-group(sidebar), ::view-transition-group(topbar), ::view-transition-group(site-header) { animation-duration: .01s; }

/* --- شريط تقدّم رفيع أعلى الشاشة أثناء فتح صفحة جديدة --- */
.nav-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 300;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none;
}
html[dir="rtl"] .nav-progress { transform-origin: right; }
.is-navigating .nav-progress { opacity: 1; animation: nav-progress 8s cubic-bezier(.1, .7, .1, 1) forwards; }
@keyframes nav-progress { from { transform: scaleX(0); } 15% { transform: scaleX(.45); } to { transform: scaleX(.92); } }

/* --- دخول محتوى اللوحات: العناصر تصعد واحدًا بعد الآخر عند فتح الصفحة ---
   backwards فقط: بعد انتهاء الحركة لا يبقى transform فلا تتأثر القوائم والنوافذ داخل البطاقات */
.page > * { animation: rise-sm .55s var(--ease-out) backwards; }
.page > :nth-child(2) { animation-delay: .05s; }
.page > :nth-child(3) { animation-delay: .1s; }
.page > :nth-child(4) { animation-delay: .15s; }
.page > :nth-child(5) { animation-delay: .2s; }
.page > :nth-child(n + 6) { animation-delay: .25s; }
.page > .grid > *, .page .quick-grid > * { animation: rise-sm .55s var(--ease-out) backwards; }
:is(.page > .grid, .quick-grid) > :nth-child(1) { animation-delay: .08s; }
:is(.page > .grid, .quick-grid) > :nth-child(2) { animation-delay: .13s; }
:is(.page > .grid, .quick-grid) > :nth-child(3) { animation-delay: .18s; }
:is(.page > .grid, .quick-grid) > :nth-child(4) { animation-delay: .23s; }
:is(.page > .grid, .quick-grid) > :nth-child(n + 5) { animation-delay: .28s; }
@keyframes rise-sm { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

.auth-card { animation: rise .7s var(--ease-out) backwards; }
.auth-aside > * { animation: rise .9s var(--ease-out) backwards; }
.auth-aside > :nth-child(2) { animation-delay: .12s; }
.auth-aside > :nth-child(3) { animation-delay: .24s; }

/* رسائل الحالة تنزلق للداخل */
.alert[role="status"], .alert[role="alert"] { animation: slide-down .5s var(--ease-out) backwards; }
@keyframes slide-down { from { opacity: 0; transform: translate3d(0, -10px, 0); } }

/* --- الظهور عند التمرير (الموقع العام) ---
   JS يضيف .reveal لما تحت الشاشة فقط، ثم .in عند وصوله. بدون JS: كل شيء ظاهر. */
.reveal {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.in { opacity: 1; transform: none; }

/* --- الصور تظهر بتلاشٍ عند اكتمال تحميلها --- */
img.img-loading { opacity: 0; }
img { transition: opacity .5s var(--ease); }
.course-cover { transition: transform var(--t-slow); }
.course-card { overflow: hidden; }
.course-card:hover .course-cover { transform: scale(1.04); }

/* --- هيكل تحميل قائمة الإشعارات --- */
.notif-skeleton { padding: var(--sp-1); }

/* --- لمسات على عناصر التحكم والشرح --- */
.page-help { border-radius: var(--r-lg); transition: box-shadow var(--t), border-color var(--t); }
details.page-help:hover { box-shadow: var(--shadow-sm); }
details.page-help[open] .page-help-body { animation: slide-down .4s var(--ease-out) backwards; }
.page-help-more { transition: color var(--t-fast); }

.quick-tile { border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.quick-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.quick-icon { transition: background var(--t), color var(--t), transform var(--t) var(--ease-spring); }
.quick-tile:hover .quick-icon { transform: scale(1.08) rotate(-4deg); }

.tab { transition: background var(--t), color var(--t-fast), box-shadow var(--t); }
.tabs { border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--border); }

.price-card { border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6); transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t); }
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-300); }
.price-card-amount .price { font-family: var(--font-display); font-size: 2rem; }
.pricing-fact { transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t); }
.pricing-fact:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-200); }
.pricing-fact:hover .service-icon { background: linear-gradient(135deg, var(--primary), #1467C9); color: #fff; transform: scale(1.06) rotate(-4deg); }
.pricing-note { border-radius: var(--r-xl); }

.role-option { border-radius: var(--r-lg); }
.role-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.role-icon { transition: background var(--t), color var(--t), transform var(--t) var(--ease-spring); }
.role-option:has(input:checked) .role-icon { transform: scale(1.06); }

.chat-item, .notif-item, .tree-lesson, .outline-item a { transition: background var(--t-fast), color var(--t-fast); }
.msg { animation: rise-sm .35s var(--ease-out) backwards; }
.bar-fill { transform-origin: bottom; animation: grow-y .9s var(--ease-out) backwards; }
@keyframes grow-y { from { transform: scaleY(0); } }

.edit-here { transition: background var(--t-fast), color var(--t-fast), transform var(--t) var(--ease-spring), box-shadow var(--t); }

/* ---------------------------------------------------------------
   34. تقليل الحركة: احترام إعداد الجهاز
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-photo::before { transform: none; }
  @view-transition { navigation: none; }
}