:root {
    /* الوضع النهاري الزجاجي */
    --main-bg-glass: linear-gradient(135deg, rgba(255,255,255,0.63) 65%, rgba(238,245,255,0.54) 100%);
    --main-blur: 16px;
    --main-bg-gradient: linear-gradient(135deg, #f7fafd 0%, #e3eaf6 100%);
    --glass-border: 1.2px solid rgba(255,255,255,0.32);
    --main-radius: 19px;
    --main-shadow: 0 8px 36px 0 rgba(74, 92, 124, 0.09);
    --main-shadow-hover: 0 16px 50px 0 rgba(74, 92, 124, 0.16);

    --primary: #777777;   /* أزرق زجاجي فاتح */
    --accent: #31495f;    /* Mint زجاجي فاتح */
    --text-main: #223046;
    --text-light: #ffffff;
    --font-main: 'Tajawal', 'Segoe UI', Arial, sans-serif;
    --transition-main: 0.23s cubic-bezier(.57,.12,.38,1.04);
}

/* ===== الوضع الليلي الزجاجي العصري الغامق جداً ===== */
:root[data-theme='dark'] {
    --main-bg-glass: linear-gradient(135deg, rgba(18,22,34,0.93) 70%, rgba(34,41,58,0.83) 100%);
    --main-blur: 16px;
    --main-bg-gradient: linear-gradient(135deg, #171c28 0%, #22293a 100%);
    --glass-border: 1.3px solid rgba(90,120,175,0.18);
    --main-radius: 19px;
    --main-shadow: 0 8px 36px 0 rgba(14,18,31, 0.38);
    --main-shadow-hover: 0 16px 50px 0 rgba(16,24,39, 0.39);

    --primary: #646464;   /* أزرق كهربائي للتفاعل فقط */
    --accent: #7e7e7e;    /* Mint كهربائي */
    --text-main: #e7effc; /* نص شبه أبيض مزرق */
    --text-light: #e7f8ff;
    --font-main: 'Tajawal', 'Segoe UI', Arial, sans-serif;
    --transition-main: 0.23s cubic-bezier(.57,.12,.38,1.04);
}

/* رابط «تخطَّ إلى المحتوى»: خارج الشاشة حتى يُركَّز عليه بلوحة المفاتيح */
.skip-link {
    position: absolute;
    inset-inline-start: 12px;
    top: -200px;
    z-index: 10000;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-main);
    text-decoration: none;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
.page-shell { flex: 1 0 auto; }

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    min-height: 100dvh;
    /* عمودٌ مرن: .page-shell يتمدّد فيبقى التذييل أسفل الشاشة حتى في الصفحات القصيرة */
    display: flex;
    flex-direction: column;
    background: var(--main-bg-gradient) fixed;
    color: var(--text-main);
    font-family: var(--font-main);
    line-height: 1.65;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    font-size: 0.945rem;
    padding-right: 61px;
    transition: background 0.31s, color 0.25s, padding-right var(--transition-main);
}

/* Glassmorphism لأي عنصر */
.bg-glass,
.card-glass,
.container-glass {
    background: var(--main-bg-glass);
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    backdrop-filter: blur(var(--main-blur)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--main-blur)) saturate(170%);
    border: var(--glass-border);
    border-bottom: 2px solid rgba(180,200,230,0.16);
}

/* الروابط */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-main);
}
a:hover {
    color: var(--accent);
}

/* العناوين */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    font-weight: 800;
    color: var(--text-main);
    text-shadow: 0 2px 6px #eaf1fa36;
    margin-bottom: 0.7em;
    letter-spacing: .5px;
}
h1 { font-size: 2.03rem; }
h2 { font-size: 1.79rem; }
h3 { font-size: 1.27rem; }
h4, h5 { font-size: 0.95rem; }
p, li {
    color: #435064;
    margin-bottom: .85em;
}
:root[data-theme='dark'] p,
:root[data-theme='dark'] li {
    color: #b9c9e7;
}

/* القوائم */
ul, ol { margin-bottom: 1.6em; }
ul { padding-right: 1.5em; }
li { line-height: 1.8; }

/* الحاويات العامة */
.container {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 19.25px;
}

/* Glassmorphism Cards (إضافي) */
.card-glass {
    padding: 2.3rem 2.1rem;
    margin-bottom: 2.2rem;
    border-radius: var(--main-radius);
    border: var(--glass-border);
    box-shadow: var(--main-shadow);
    background: var(--main-bg-glass);
    backdrop-filter: blur(var(--main-blur)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--main-blur)) saturate(170%);
}

/* الحواف */
.radius-xl { border-radius: 34px !important; }
.radius-lg { border-radius: 22px !important; }
.radius { border-radius: 14px !important; }
.radius-sm { border-radius: 7px !important; }

/* ظلال */
.shadow-main { box-shadow: var(--main-shadow); }
.shadow-hover:hover { box-shadow: var(--main-shadow-hover); }

/* Scrollbar */
::-webkit-scrollbar {
    width: 9px; background: #eceff7;
}
::-webkit-scrollbar-thumb {
    background: #dde5f6; border-radius: 9px;
}
::-webkit-scrollbar-thumb:hover {
    background: #bdd6ff;
}
:root[data-theme='dark'] ::-webkit-scrollbar {
    background: #232a3d;
}
:root[data-theme='dark'] ::-webkit-scrollbar-thumb {
    background: #353b56;
}
:root[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: #254770;
}

/* Responsive أساسيات */
@media (max-width: 900px) {
    body { font-size: 0.857rem; padding-right: 49px !important; }
    .container { padding: 0 6.1px !important; }
}

@media (max-width: 700px) {
    body { font-size: 0.814rem; padding-right: 0 !important; }
    .container { width: 100%; }
}

/* ===================== الفوتر: أدوات (خصوصية · لغة · تطبيق · تواصل · دعم) + الحقوق ===================== */
/* ظاهرٌ دائماً في كل الصفحات: sticky أسفل النافذة (آخر أبناء body)، فيبقى ضمن حشوة
   الشريط الجانبي واتجاه الصفحة تلقائياً بلا إزاحاتٍ مكرّرة. خلفيته تدرّج الصفحة نفسه
   (معتمٌ فلا يظهر المحتوى المارّ تحته، وبلا تمويهٍ مكلف)، وتحت الشريط العلوي (50) والقوائم والنوافذ. */
footer {
  position: sticky;
  bottom: 0;
  z-index: 45;
  padding: 3px 0;
  font-size: 0.82rem;
  line-height: 1.35;
  background: var(--main-bg-gradient) fixed;
  border-top: 1px solid rgba(120, 140, 175, 0.18);
  box-shadow: 0 -3px 14px 0 rgba(66, 74, 98, 0.08);
}
/* شريط الفوتر: مجموعة الأدوات في بداية السطر والحقوق في نهايته (space-between)،
   فتظهر الأدوات يسارَ الإنجليزية (بداية LTR) ويمينَ العربية (بداية RTL) — تنعكس
   تلقائياً مع اتجاه الصفحة بلا قواعد خاصّة. */
footer .footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px 22px;
  flex-wrap: wrap;
}
.footer-utility {
  display: flex;
  align-items: center;
  gap: 18px;
}
.footer-utility .footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  opacity: 0.82;
  font-size: 0.92em;
  white-space: nowrap;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.footer-utility .footer-link:hover {
  opacity: 1;
  color: var(--primary);
}
/* أزرار النوافذ (التطبيق · الدعم) بمظهر الروابط نفسه — مستثناةٌ من نمط الأزرار العام في forms.css */
.footer-utility button.footer-link {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.92em;
  cursor: pointer;
}
/* النصّ المختصر يظهر على الجوال وحده (أدناه) */
.footer-link .fl-short { display: none; }
.footer-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 8px;
  margin: 0;
}
.footer-sep { opacity: 0.55; }

/* شريط دعوة تنزيل التطبيق (الجوال) — أوّل محتوى التذييل، فيلتصق معه أسفل الشاشة */
.app-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px !important;      /* .container على الجوال يفرض padding بـ!important (style.css) */
  padding-bottom: 6px !important;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(120, 140, 175, 0.18);
  font-size: 0.9rem;
  line-height: 1.3;
}
.app-banner[hidden] { display: none; }
.app-banner-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.app-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.app-banner-text strong { color: var(--text-main); }
.app-banner-text span { opacity: 0.75; font-size: 0.9em; }
.app-banner-cta {
  flex: 0 0 auto;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.app-banner-cta:hover { color: #fff; filter: brightness(1.1); }
.app-banner-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 0.95rem;
}
.app-banner-close:hover { opacity: 1; }
/* الشاشات القصيرة (الجوال أفقياً): لا مكان له دون أن يضيّق المحتوى — في «الأرض والفلك»
   يدفع أزرار الطبقات تحت التذييل. يعود تلقائياً عند الرجوع إلى الوضع الطولي. */
@media (max-height: 500px) {
  .app-banner { display: none; }
}
/* الجوال: سطران مضغوطان — الأدوات في الأول، والحقوق بجانب المطوّر في الثاني */
@media (max-width: 600px) {
  footer { font-size: 0.74rem; padding: 2px 0; }
  footer .footer-bar { justify-content: center; text-align: center; gap: 0 14px; }
  .footer-copy { justify-content: center; gap: 0 6px; }
  .footer-utility { justify-content: center; flex-wrap: wrap; gap: 0 12px; }
  .footer-utility .footer-link { gap: 4px; }
  .footer-link .fl-full { display: none; }
  .footer-link .fl-short { display: inline; }
}