/* Shared mobile-web shell styles. Extracted from base.html so browsers can cache them across pages. */

/* ====================================================================
   رابط التخطي إلى المحتوى — مخفي بصريًا حتى يصله التركيز بلوحة المفاتيح.
   يوفّر على مستخدم Tab المرور بالشريط العلوي والقائمة الجانبية في كل صفحة.
   ==================================================================== */
.nw-skip-link {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 100200;
  padding: 12px 20px;
  border: 0;
  border-end-end-radius: 14px;
  background: var(--nw-brand-primary, #7E57C2);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  /* لا نستخدم display:none كي يبقى العنصر ضمن ترتيب التنقل بلوحة المفاتيح. */
  transform: translateY(-120%);
  transition: transform 160ms ease;
}
.nw-skip-link:focus,
.nw-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: -6px;
}
/* الهدف يحمل tabindex="-1" ليستقبل التركيز؛ لا نريد إطارًا دائمًا حوله. */
main:focus:not(:focus-visible) {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .nw-skip-link { transition: none; }
}

.nw-language-toast {
  position: fixed;
  inset-inline: 16px;
  top: calc(20px + env(safe-area-inset-top, 0px));
  z-index: 100100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: min(620px, calc(100vw - 32px));
  margin-inline: auto;
  padding: 16px 18px;
  border: 1px solid rgba(103, 58, 183, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 14%, rgba(73, 191, 210, 0.18), transparent 34%),
    radial-gradient(circle at 8% 90%, rgba(103, 58, 183, 0.09), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 255, 0.97));
  color: #F7F2FF;
  box-shadow: 0 24px 58px rgba(31, 23, 56, 0.18);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-18px) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.nw-language-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nw-language-toast-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #7E57C2, #49bfd2);
  color: #fff;
  box-shadow: 0 12px 24px rgba(103, 58, 183, 0.2);
}
.nw-language-toast-icon svg {
  width: 22px;
  height: 22px;
}
.nw-language-toast-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.nw-language-toast-copy strong {
  display: grid;
  gap: 2px;
  color: #F7F2FF;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}
.nw-language-toast-copy > span {
  display: grid;
  gap: 2px;
  color: #625978;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}
.nw-language-copy-line {
  display: block;
}
.nw-language-copy-line[dir="ltr"] {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.nw-language-choice {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.nw-language-choice small {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0.78;
}
.nw-language-toast-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nw-language-choice {
  min-height: 42px;
  min-width: 96px;
  padding: 0 16px;
  border: 1px solid rgba(103, 58, 183, 0.18);
  border-radius: 13px;
  background: #fff;
  color: #7353C8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(31, 23, 56, 0.06);
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}
.nw-language-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(103, 58, 183, 0.34);
  background: #f7f2ff;
}
.nw-language-choice.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #7A45D6 0%, #6A34C9 55%, #8A4DFF 100%);
  color: #fff;
}
[data-theme="dark"] .nw-language-toast {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 92% 14%, rgba(73, 191, 210, 0.12), transparent 34%),
    radial-gradient(circle at 8% 90%, rgba(103, 58, 183, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(31, 24, 42, 0.98), rgba(22, 18, 32, 0.96));
  color: #f4efff;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}
[data-theme="dark"] .nw-language-toast-copy strong {
  color: #f4efff;
}
[data-theme="dark"] .nw-language-toast-copy > span {
  color: #c5badf;
}
[data-theme="dark"] .nw-language-choice {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e8ddff;
}
[data-theme="dark"] .nw-language-choice:hover {
  background: rgba(156, 107, 230, 0.18);
}
@media (max-width: 640px) {
  .nw-language-toast {
    top: calc(74px + env(safe-area-inset-top, 0px));
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    width: min(430px, calc(100vw - 22px));
    padding: 14px;
  }
  .nw-language-toast-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .nw-language-choice {
    min-width: 0;
    width: 100%;
  }
}

html.nw-language-gate-pending,
html.nw-language-gate-pending body {
  min-height: 100%;
  overflow: hidden !important;
  background:
    radial-gradient(820px 460px at 50% -6%, rgba(124, 85, 199, 0.5), transparent 60%),
    radial-gradient(640px 400px at 92% 104%, rgba(15, 118, 110, 0.4), transparent 58%),
    linear-gradient(180deg, #241544 0%, #2f1c57 46%, #1d1338 100%) !important;
}

html.nw-language-gate-pending body > :not(#first-visit-language-toast) {
  visibility: hidden !important;
}

html.nw-language-gate-pending #first-visit-language-toast,
html.nw-language-gate-pending #first-visit-language-toast.hidden {
  position: fixed;
  inset: 0;
  z-index: 100200;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
  min-height: 100dvh;
  margin: 0;
  padding: max(24px, env(safe-area-inset-top, 24px)) 18px max(24px, env(safe-area-inset-bottom, 24px));
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(860px 480px at 50% -6%, rgba(124, 85, 199, 0.5), transparent 60%),
    radial-gradient(660px 420px at 92% 104%, rgba(15, 118, 110, 0.4), transparent 58%),
    radial-gradient(620px 420px at 6% 8%, rgba(124, 85, 199, 0.32), transparent 55%),
    linear-gradient(180deg, #241544 0%, #2f1c57 46%, #1d1338 100%);
  box-shadow: none;
  color: #fff;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

html.nw-language-gate-pending #first-visit-language-toast::before {
  content: none;
  display: none;
}

html.nw-language-gate-pending .nw-language-gate-logo {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: 26px;
  background: linear-gradient(145deg, #7c55c7 0%, #7E57C2 52%, #14b8a6 132%);
  color: #ffffff;
  font-size: 36px;
  font-weight: 900;
  box-shadow:
    0 24px 48px rgba(20, 8, 48, 0.5),
    0 0 0 9px rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
  animation: nwLangBadge 2.6s ease-in-out infinite;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

html.nw-language-gate-pending .nw-language-gate-logo.has-image {
  background: #fff;
}

html.nw-language-gate-pending .nw-language-gate-logo img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  display: block;
}

@keyframes nwLangBadge {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 24px 48px rgba(20,8,48,.5), 0 0 0 9px rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.4) inset;
  }
  50% {
    transform: translateY(-3px) scale(1.045);
    box-shadow: 0 30px 56px rgba(20,8,48,.55), 0 0 0 12px rgba(255,255,255,.08), 0 0 30px rgba(244,166,74,.32), 0 1px 0 rgba(255,255,255,.4) inset;
  }
}

@keyframes nwLangCardUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

html.nw-language-gate-pending .nw-language-toast-copy {
  animation: nwLangCardUp .5s cubic-bezier(.22,1,.36,1) both;
}
html.nw-language-gate-pending .nw-language-toast-actions {
  animation: nwLangCardUp .5s cubic-bezier(.22,1,.36,1) .07s both;
}

@media (prefers-reduced-motion: reduce) {
  html.nw-language-gate-pending #first-visit-language-toast::before,
  html.nw-language-gate-pending .nw-language-toast-copy,
  html.nw-language-gate-pending .nw-language-toast-actions {
    animation: none !important;
  }
}

html.nw-language-gate-pending #first-visit-language-toast::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 40% at 50% 50%, transparent 60%, rgba(13, 6, 31, 0.28) 100%);
  pointer-events: none;
  z-index: 0;
}

html.nw-language-gate-pending .nw-language-toast-icon,
html.nw-language-gate-pending .nw-language-toast-copy,
html.nw-language-gate-pending .nw-language-toast-actions {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 36px));
}

html.nw-language-gate-pending .nw-language-toast-icon {
  display: none;
}

html.nw-language-gate-pending .nw-language-toast-copy {
  display: grid;
  gap: 9px;
  padding: 30px 26px 20px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(180deg, #ffffff, #faf6ff);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6) inset;
  text-align: center;
}

/* شريط هوية علوي بألوان الشعار — يطابق الأونبوردينق وتسجيل الدخول */
html.nw-language-gate-pending .nw-language-toast-copy::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 24%;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, #4F7BFF, #8A4DFF 38%, #FF6A8B 70%, #FF9A3D);
  opacity: 0.92;
  pointer-events: none;
}

html.nw-language-gate-pending .nw-language-toast-copy strong {
  color: #1b1233;
  font-size: 25px;
  font-weight: 900;
}

html.nw-language-gate-pending .nw-language-toast-copy > span {
  max-width: 36ch;
  margin-inline: auto;
  color: #6a6080;
  font-size: 13.5px;
  line-height: 1.75;
  font-weight: 700;
}

html.nw-language-gate-pending .nw-language-toast-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 6px 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(180deg, #faf6ff, #f4ecff);
  box-shadow: 0 44px 90px -38px rgba(20, 8, 48, 0.85);
}

html.nw-language-gate-pending .nw-language-choice {
  min-height: 62px;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  gap: 2px;
  border-radius: 18px;
  border: 1.5px solid rgba(103, 58, 183, 0.16);
  background: #ffffff;
  color: #7353C8;
  font-size: 15.5px;
  box-shadow: 0 10px 22px -14px rgba(52, 28, 92, 0.4);
}
html.nw-language-gate-pending .nw-language-choice small {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.72;
}
html.nw-language-gate-pending .nw-language-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 58, 183, 0.4);
}

html.nw-language-gate-pending .nw-language-choice.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #7A45D6 0%, #6A34C9 55%, #8A4DFF 100%);
  color: #fff;
  box-shadow: 0 18px 34px -14px rgba(103, 58, 183, 0.55);
}
html.nw-language-gate-pending .nw-language-choice.is-primary:hover {
  filter: saturate(1.05);
  box-shadow: 0 24px 44px -16px rgba(103, 58, 183, 0.6);
}

@media (max-width: 420px) {
  html.nw-language-gate-pending .nw-language-toast-actions {
    grid-template-columns: 1fr;
  }

  html.nw-language-gate-pending .nw-language-toast-copy strong {
    font-size: 22px;
  }
}

/* ── Dark mode: full-screen first-visit language gate ── */
html[data-theme="dark"].nw-language-gate-pending,
html[data-theme="dark"].nw-language-gate-pending body {
  background:
    radial-gradient(720px 300px at 50% -10%, rgba(124, 58, 237, 0.22), transparent 68%),
    radial-gradient(620px 260px at 92% 14%, rgba(45, 212, 191, 0.10), transparent 64%),
    linear-gradient(180deg, #0b1322 0%, #0d1726 58%, #11182a 100%) !important;
  color: #eaf2ff !important;
}

html[data-theme="dark"].nw-language-gate-pending #first-visit-language-toast,
html[data-theme="dark"].nw-language-gate-pending #first-visit-language-toast.hidden {
  background:
    radial-gradient(760px 300px at 50% -8%, rgba(124, 58, 237, 0.22), transparent 68%),
    radial-gradient(620px 260px at 92% 14%, rgba(45, 212, 191, 0.10), transparent 64%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #0b1322 0%, #0d1726 58%, #11182a 100%);
  color: #eaf2ff;
}

html[data-theme="dark"].nw-language-gate-pending #first-visit-language-toast::after {
  background:
    linear-gradient(0deg, rgba(124, 58, 237, 0.18), transparent 58%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 18px);
}

html[data-theme="dark"].nw-language-gate-pending .nw-language-toast-copy {
  background: rgba(23, 35, 54, 0.96);
  border-color: rgba(174, 196, 226, 0.22);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"].nw-language-gate-pending .nw-language-toast-copy strong {
  color: #f8fbff;
}

html[data-theme="dark"].nw-language-gate-pending .nw-language-toast-copy > span {
  color: #b8c7da;
}

html[data-theme="dark"].nw-language-gate-pending .nw-language-toast-actions {
  background: rgba(23, 35, 54, 0.96);
  border-color: rgba(174, 196, 226, 0.22);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.50);
}

html[data-theme="dark"].nw-language-gate-pending .nw-language-choice {
  border-color: rgba(174, 196, 226, 0.20);
  background: rgba(255, 255, 255, 0.04);
  color: #eaf2ff;
}

html[data-theme="dark"].nw-language-gate-pending .nw-language-choice:hover {
  background: rgba(124, 58, 237, 0.20);
}

html[data-theme="dark"].nw-language-gate-pending .nw-language-choice.is-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 58%, #1FB5A8 100%);
  color: #ffffff;
  border-color: transparent;
}

/* ── Notification / Chat unread badges ── */
.badge-host { position: relative; }
.notif-badge {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-family: 'Cairo', sans-serif;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  z-index: 10;
  transform: translate(38%, -38%);
  box-shadow: 0 0 0 2px #fff;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.34,1.56,0.64,1);
}
.notif-badge.hidden {
  opacity: 0;
  transform: translate(38%, -38%) scale(0.5);
}

/* ── Dark mode seeds (auto) ── */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  .notif-badge { box-shadow: 0 0 0 2px #1a1025; }
}
[data-theme="dark"] .notif-badge { box-shadow: 0 0 0 2px #1a1025; }

/* ── Sidebar theme toggle button ── */
.sidebar-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(103, 58, 183, 0.16);
  background: rgba(103, 58, 183, 0.06);
  color: #6b21a8;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-theme-toggle:hover { background: rgba(103, 58, 183, 0.12); }
.sidebar-theme-toggle:active { transform: scale(0.93); }
.sidebar-header { display: flex; align-items: center; gap: 8px; }
.sidebar-close { flex: 0 0 auto; }

/* Theme control swaps icon + label between modes.
   Light mode → show the "go dark" face (moon + الوضع الليلي).
   Dark mode  → show the "go light" face (sun + الوضع النهاري). */
[data-theme="light"] .theme-toggle-icon--dark,
[data-theme="dark"] .theme-toggle-icon--light,
[data-theme="light"] .theme-toggle-label--dark,
[data-theme="dark"] .theme-toggle-label--light { display: none; }
[data-theme="light"] .theme-toggle-icon--light,
[data-theme="dark"] .theme-toggle-icon--dark { display: flex; }
[data-theme="light"] .theme-toggle-label--light,
[data-theme="dark"] .theme-toggle-label--dark { display: inline; }
/* fallback: if data-theme not set on <html>, use prefers-color-scheme.
   لا بد من تقييده بـ html: ‏`:not([data-theme])` وحده يطابق أي سلف بلا السمة
   (‏body مثلًا) فيسري حتى مع وجود سمة صريحة على <html>، وبنفس الأولوية وترتيب
   لاحق — فيقلب الأيقونة عندما يخالف اختيار المستخدم تفضيل النظام. */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .theme-toggle-icon--dark,
  html:not([data-theme]) .theme-toggle-label--dark { display: none; }
  html:not([data-theme]) .theme-toggle-icon--light { display: flex; }
  html:not([data-theme]) .theme-toggle-label--light { display: inline; }
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle-icon--light,
  html:not([data-theme]) .theme-toggle-label--light { display: none; }
  html:not([data-theme]) .theme-toggle-icon--dark { display: flex; }
  html:not([data-theme]) .theme-toggle-label--dark { display: inline; }
}

/* ── Global dark mode tokens ── */
[data-theme="dark"] {
  --nw-bg: #120f18;
  --nw-surface: #1e1828;
  --nw-border: rgba(255,255,255,0.08);
  --nw-text: #f0eaf8;
  --nw-text-muted: rgba(240,234,248,0.6);
}
[data-theme="light"], :root {
  --nw-bg: #f7f4fb;
  --nw-surface: #ffffff;
  --nw-border: rgba(0,0,0,0.08);
  --nw-text: #1a0f2e;
  --nw-text-muted: rgba(26,15,46,0.55);
}

/* dark topbar */
[data-theme="dark"] .nw-global-topbar {
  background: linear-gradient(180deg, #1a0f2e 0%, #120f18 100%);
  border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .nav-icon-btn {
  color: rgba(240,234,248,0.85);
}
[data-theme="dark"] .nav-icon-btn:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .topbar-brand-mark { color: #d4b8ff; }

/* dark sidebar */
[data-theme="dark"] #sidebar,
[data-theme="dark"] .sidebar {
  background: #1a0f2e;
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .sidebar-name { color: #f0eaf8; }
[data-theme="dark"] .sidebar-role { color: rgba(240,234,248,0.6); }
[data-theme="dark"] .sidebar-link { color: rgba(240,234,248,0.8); }
[data-theme="dark"] .sidebar-link:hover { background: rgba(255,255,255,0.06); color: #d4b8ff; }
[data-theme="dark"] .sidebar-separator { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .sidebar-theme-toggle {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #d4b8ff;
}
/* Footer area: override the white gradient from app.css so the bottom
   of the sidebar matches the dark theme. */
[data-theme="dark"] #sidebar .sidebar-footer,
[data-theme="dark"] .sidebar-footer {
  background: transparent !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .sidebar-auth-link { color: rgba(240,234,248,0.85); }
[data-theme="dark"] .sidebar-auth-link:hover { color: #d4b8ff; }
[data-theme="dark"] #sidebar .sidebar-footer .sidebar-link.sidebar-logout .sidebar-icon {
  background: rgba(212, 184, 255, 0.12);
  color: #d4b8ff;
}
[data-theme="dark"] #sidebar .sidebar-footer .sidebar-link.sidebar-logout:hover .sidebar-icon {
  background: linear-gradient(135deg, #6841C7, #B69AF0);
  color: #fff;
}
[data-theme="dark"] .sidebar-delete-account { color: #ff7a8a; }
[data-theme="dark"] .sidebar-delete-account .sidebar-icon { background: rgba(255, 122, 138, 0.14); color: #ff7a8a; }
[data-theme="dark"] .sidebar-delete-account:hover { color: #ff5d72; background: rgba(255, 122, 138, 0.10); }

/* dark bottom nav */
[data-theme="dark"] #bottom-nav {
  background: #1a0f2e;
  border-top-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .bnav-item { color: rgba(240,234,248,0.55); }
[data-theme="dark"] .bnav-item.active { color: #c084fc; }
[data-theme="dark"] .bnav-item.active span { color: #c084fc; }
[data-theme="dark"] .bnav-item.bnav-item--disabled,
[data-theme="dark"] .bnav-item.bnav-item--disabled:hover { color: rgba(240,234,248,0.28); }
[data-theme="dark"] .nw-nav-bubble-card {
  background: #2b2638;
  border-color: rgba(192,132,252,0.28);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
[data-theme="dark"] .nw-nav-bubble-copy strong { color: #f1f5f9; }
[data-theme="dark"] .nw-nav-bubble-copy span { color: #c4d0e3; }
[data-theme="dark"] .nw-nav-bubble-caret { border-top-color: #2b2638; }

/* dark page body */
[data-theme="dark"] body.mobile-web-parity,
[data-theme="dark"] .page-content,
[data-theme="dark"] main {
  background: var(--nw-bg);
}

/* ===========================================================
   GLOBAL TOPBAR — Premium command bar
   Overrides app.css with higher specificity (#top-navbar)
   =========================================================== */
#top-navbar.nw-global-topbar {
  position: sticky;
  top: 0;
  padding: calc(7px + env(safe-area-inset-top, 0px)) 0 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 253, 0.94)) !important;
  border-bottom: 1px solid rgba(96, 38, 158, 0.10) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045) !important;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}
#top-navbar.nw-global-topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 38, 158, 0.22), rgba(20, 184, 166, 0.16), transparent);
  pointer-events: none;
}
#top-navbar.nw-global-topbar.scrolled {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.075) !important;
}
#top-navbar .navbar-inner-global {
  position: relative;
  min-height: 54px;
  height: auto !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#top-navbar .topbar-section {
  gap: 8px;
  min-width: 98px;
  position: relative;
  z-index: 6;
}
#top-navbar .topbar-section-left {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}
#top-navbar .topbar-section-right {
  flex: 0 0 auto;
}
#top-navbar .topbar-brand-wrap {
  z-index: 5;
  min-height: 48px;
}
#top-navbar .topbar-brand-link,
#top-navbar .topbar-sponsor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    opacity .5s cubic-bezier(0.4, 0, 0.2, 1),
    transform .5s cubic-bezier(0.34, 1.05, 0.64, 1),
    border-color .22s ease,
    box-shadow .22s ease;
}
#top-navbar .topbar-brand-link,
#top-navbar .topbar-brand-link:hover,
#top-navbar .topbar-brand-link:active,
#top-navbar .topbar-brand-link:focus,
#top-navbar .topbar-brand-link:focus-visible,
#top-navbar .topbar-sponsor,
#top-navbar .topbar-sponsor:hover,
#top-navbar .topbar-sponsor:active,
#top-navbar .topbar-sponsor:focus,
#top-navbar .topbar-sponsor:focus-visible {
  outline: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#top-navbar .topbar-brand-link:hover,
#top-navbar .topbar-sponsor:hover {
  transform: translateY(-1px);
  border-color: transparent;
  box-shadow: none;
}
#top-navbar .topbar-brand-mark {
  /* لوجو المنصة هو العلامة الأساسية، فيكون أكبر قليلاً من شعار الراعي (44px)
     ليعوّض الهوامش الداخلية لصورة اللوجو ولا يظهر أصغر منه. */
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--nw-brand-primary) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  letter-spacing: 0;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
#top-navbar .topbar-brand-mark::before {
  content: none;
}
#top-navbar .topbar-brand-mark::after {
  content: none;
}
#top-navbar .topbar-brand-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  position: relative;
  z-index: 2;
  filter: none;
}
#top-navbar .topbar-brand-link:hover .topbar-brand-mark {
  transform: none;
  box-shadow: none !important;
}

#top-navbar .topbar-sponsor {
  gap: 0;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#top-navbar .topbar-sponsor-media {
  /* مطابق تماماً للوجو المنصة (topbar-brand-mark): مربّع 44×44 في كل العروض. */
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#top-navbar .topbar-sponsor-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* صندوق ثابت 44×44 لكل الأشكال (عريض/طويل/مربّع) ليبقى مطابقاً للوجو المنصة. */
#top-navbar .topbar-sponsor-media.is-wide,
#top-navbar .topbar-sponsor-media.is-tall,
#top-navbar .topbar-sponsor-media.is-square {
  width: 44px !important;
  height: 44px !important;
}

#top-navbar .topbar-sponsor:hover .topbar-sponsor-media {
  transform: none;
  box-shadow: none !important;
}

/* Top side icons (sidebar / notifications) — refined */
#top-navbar .nav-icon-btn,
#top-navbar .nav-menu-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px !important;
  border: 1px solid rgba(96, 38, 158, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 255, 0.88)) !important;
  color: var(--nw-brand-primary) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 7px 16px rgba(49, 35, 85, 0.065) !important;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
#top-navbar .nav-icon-btn:hover,
#top-navbar .nav-menu-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(241, 235, 255, 0.96)) !important;
  color: var(--nw-brand-primary-deep) !important;
  border-color: rgba(96, 38, 158, 0.28) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 24px rgba(74, 23, 128, 0.16) !important;
}
#top-navbar .nav-icon-btn:active,
#top-navbar .nav-menu-btn:active {
  transform: translateY(0) scale(0.98);
}
#top-navbar .nav-icon-btn:focus-visible,
#top-navbar .nav-menu-btn:focus-visible {
  outline: 2px solid rgba(96, 38, 158, 0.55);
  outline-offset: 3px;
}
#top-navbar .topbar-brand-link:focus-visible,
#top-navbar .topbar-sponsor:focus-visible {
  outline: none;
}
#top-navbar .notif-badge {
  top: 2px;
  inset-inline-start: 2px;
  background: linear-gradient(135deg, #e11d48, #f97316) !important;
  box-shadow: 0 0 0 2px #ffffff, 0 8px 16px -6px rgba(225, 29, 72, 0.72) !important;
}
/* Dark mode: ring color must match the dark topbar surface, not white. */
[data-theme="dark"] #top-navbar .notif-badge {
  box-shadow: 0 0 0 2px #0b1422, 0 8px 16px -6px rgba(225, 29, 72, 0.72) !important;
}

/* Dark mode tuning */
[data-theme="dark"] #top-navbar.nw-global-topbar {
  background:
    linear-gradient(180deg, rgba(11, 20, 34, 0.94), rgba(10, 19, 32, 0.84)) !important;
  border-bottom-color: transparent !important;
}
[data-theme="dark"] body.mobile-web-parity #top-navbar.nw-global-topbar,
[data-theme="dark"] body.home-mobile-layout #top-navbar.nw-global-topbar {
  background:
    linear-gradient(180deg, rgba(11, 20, 34, 0.95), rgba(10, 19, 32, 0.86)) !important;
  border-bottom: 1px solid rgba(196, 213, 239, 0.10) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: saturate(160%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px) !important;
}
[data-theme="dark"] #top-navbar .navbar-inner-global {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
[data-theme="dark"] #top-navbar .topbar-section-left {
  background: transparent;
  border-color: transparent;
}
[data-theme="dark"] #top-navbar .topbar-brand-link,
[data-theme="dark"] #top-navbar .topbar-sponsor {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#topbar-sponsor-modal .topbar-sponsor-modal-backdrop {
  outline: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.58), rgba(244, 239, 255, 0.66)) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#topbar-sponsor-modal.topbar-sponsor-modal {
  z-index: 520 !important;
  top: calc(72px + env(safe-area-inset-top, 0px)) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: calc(72px + env(safe-area-inset-top, 0px)) 0 0 0 !important;
  place-items: start center !important;
  padding-top: 14px !important;
  background: transparent !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-card {
  width: min(452px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 108px) !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  padding: 18px !important;
  gap: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 247, 255, 0.98)) !important;
  border-color: rgba(103, 58, 183, 0.12) !important;
  box-shadow: 0 18px 42px rgba(31, 23, 56, 0.14) !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-card::before,
#topbar-sponsor-modal .topbar-sponsor-modal-card::after {
  display: none !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-close {
  top: 12px !important;
  inset-inline-start: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #4f3f69 !important;
  box-shadow: 0 8px 18px rgba(31, 23, 56, 0.08) !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-hero {
  grid-template-columns: minmax(0, 1fr) 132px !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 18px 18px 16px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 255, 0.92)) !important;
  border-color: rgba(103, 58, 183, 0.11) !important;
  box-shadow: none !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-copy {
  gap: 6px !important;
  padding-inline-start: 30px;
}

#topbar-sponsor-modal .topbar-sponsor-modal-kicker {
  width: max-content;
  max-width: 100%;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  /* شارة ذهبية «رعاية مميزة» — تطابق التطبيق. */
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.30);
  color: #B8860B !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal h3,
#topbar-sponsor-modal .topbar-sponsor-modal-title,
#topbar-sponsor-modal #topbar-sponsor-modal-title {
  color: #F7F2FF !important;
  font-size: 19px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-media-card {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-media {
  width: 124px !important;
  height: 76px !important;
  padding: 7px !important;
  border-radius: 20px !important;
  /* إطار ذهبي فاخر (حدّ متدرّج) + توهّج ذهبي — يطابق شعار التطبيق. */
  border: 3px solid transparent !important;
  background:
    linear-gradient(180deg, #ffffff, #fffdf5) padding-box,
    linear-gradient(135deg, #FDE9A8, #D4AF37, #B8860B) border-box !important;
  box-shadow: 0 16px 30px rgba(212, 175, 55, 0.30) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* لمعان قطري متحرّك يمرّ فوق الشعار (shimmer). */
#topbar-sponsor-modal .topbar-sponsor-modal-media::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -60% !important;
  width: 40% !important;
  height: 200% !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0)
  ) !important;
  transform: rotate(20deg) !important;
  pointer-events: none !important;
  animation: sponsorLogoShimmer 2.6s ease-in-out infinite !important;
}

@keyframes sponsorLogoShimmer {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  #topbar-sponsor-modal .topbar-sponsor-modal-media::after { animation: none !important; }
}

#topbar-sponsor-modal .topbar-sponsor-modal-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-media.is-square {
  width: 92px !important;
  height: 92px !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-media.is-tall {
  width: 78px !important;
  height: 108px !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-media.is-wide {
  width: 140px !important;
  height: 76px !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-media-note {
  margin-top: 6px !important;
  color: #6f6386 !important;
  font-size: 11px !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-panel {
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(103, 58, 183, 0.10) !important;
  box-shadow: none !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-label {
  color: #6b5d82 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-body {
  max-height: min(28dvh, 170px) !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #423853 !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  text-align: center !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-secondary {
  display: none !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-link {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(103, 58, 183, 0.16) !important;
  background: linear-gradient(135deg, #7353C8, #7E57C2) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(103, 58, 183, 0.18) !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-link:hover {
  box-shadow: 0 16px 28px rgba(103, 58, 183, 0.24) !important;
}

#topbar-sponsor-modal .topbar-sponsor-modal-more {
  justify-self: center;
  color: #5b36ab;
  font-size: 12px;
  font-weight: 900;
}

#topbar-sponsor-modal .topbar-sponsor-modal-backdrop:focus,
#topbar-sponsor-modal .topbar-sponsor-modal-backdrop:focus-visible,
#topbar-sponsor-modal .topbar-sponsor-modal-backdrop:active {
  outline: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.58), rgba(244, 239, 255, 0.66)) !important;
}

[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-backdrop,
[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-backdrop:focus,
[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-backdrop:focus-visible,
[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-backdrop:active {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.52), rgba(30, 27, 75, 0.58)) !important;
}

[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-card {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(17, 24, 39, 0.96)) !important;
  border-color: rgba(196, 213, 239, 0.14) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34) !important;
}

[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-hero,
[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-panel {
  background: rgba(15, 23, 42, 0.48) !important;
  border-color: rgba(196, 213, 239, 0.12) !important;
}

[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-kicker {
  background: rgba(167, 139, 250, 0.14) !important;
  border-color: rgba(196, 181, 253, 0.18) !important;
  color: #ddd6fe !important;
}

[data-theme="dark"] #topbar-sponsor-modal #topbar-sponsor-modal-title {
  color: #f8fafc !important;
}

[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-label,
[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-media-note {
  color: rgba(226, 232, 240, 0.72) !important;
}

[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-body {
  color: rgba(248, 250, 252, 0.86) !important;
}

[data-theme="dark"] #topbar-sponsor-modal .topbar-sponsor-modal-media {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 480px) {
  #topbar-sponsor-modal.topbar-sponsor-modal {
    top: calc(62px + env(safe-area-inset-top, 0px)) !important;
    inset: calc(62px + env(safe-area-inset-top, 0px)) 0 0 0 !important;
    padding-top: 12px !important;
  }

  #topbar-sponsor-modal .topbar-sponsor-modal-card {
    width: min(100% - 24px, 452px) !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  #topbar-sponsor-modal .topbar-sponsor-modal-hero {
    grid-template-columns: minmax(0, 1fr) 110px !important;
    padding: 16px 14px !important;
  }

  #topbar-sponsor-modal .topbar-sponsor-modal-copy {
    padding-inline-start: 28px;
  }

  #topbar-sponsor-modal .topbar-sponsor-modal-media {
    width: 104px !important;
    height: 64px !important;
    border-radius: 18px !important;
  }

  #topbar-sponsor-modal .topbar-sponsor-modal-media.is-square {
    width: 76px !important;
    height: 76px !important;
  }

  #topbar-sponsor-modal .topbar-sponsor-modal-media.is-tall {
    width: 64px !important;
    height: 88px !important;
  }

  #topbar-sponsor-modal .topbar-sponsor-modal-media.is-wide {
    width: 112px !important;
    height: 64px !important;
  }

  #topbar-sponsor-modal .topbar-sponsor-modal-body {
    max-height: min(30dvh, 150px) !important;
  }
}
[data-theme="dark"] #top-navbar .topbar-brand-mark {
  background: transparent !important;
  border-color: transparent !important;
  color: #EDE7F6 !important;
}
[data-theme="dark"] #top-navbar .nav-icon-btn,
[data-theme="dark"] #top-navbar .nav-menu-btn {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.90)) !important;
  color: #d8ccff !important;
  border-color: rgba(196, 213, 239, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.22) !important;
}
[data-theme="dark"] body.mobile-web-parity #top-navbar .nav-icon-btn,
[data-theme="dark"] body.mobile-web-parity #top-navbar .nav-menu-btn,
[data-theme="dark"] body.home-mobile-layout #top-navbar .nav-icon-btn,
[data-theme="dark"] body.home-mobile-layout #top-navbar .nav-menu-btn {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.90)) !important;
  color: #d8ccff !important;
  border-color: rgba(196, 213, 239, 0.14) !important;
}
[data-theme="dark"] #top-navbar .nav-icon-btn:hover,
[data-theme="dark"] #top-navbar .nav-menu-btn:hover {
  background:
    linear-gradient(180deg, rgba(88, 64, 145, 0.76), rgba(49, 38, 85, 0.84)) !important;
  color: #EDE7F6 !important;
}
[data-theme="dark"] body.mobile-web-parity #top-navbar .nav-icon-btn:hover,
[data-theme="dark"] body.mobile-web-parity #top-navbar .nav-menu-btn:hover,
[data-theme="dark"] body.home-mobile-layout #top-navbar .nav-icon-btn:hover,
[data-theme="dark"] body.home-mobile-layout #top-navbar .nav-menu-btn:hover {
  background: rgba(124, 58, 237, 0.22) !important;
  border-color: rgba(216, 204, 255, 0.28) !important;
  color: #ffffff !important;
}

/* Mobile small */
@media (max-width: 480px) {
  #top-navbar.nw-global-topbar {
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    padding-bottom: 6px;
  }
  #top-navbar .navbar-inner-global {
    min-height: 50px;
    padding: 0;
    border-radius: 0;
  }
  #top-navbar .topbar-section {
    min-width: 46px;
  }
  #top-navbar .topbar-section-left {
    gap: 4px;
    padding: 2px;
  }
  #top-navbar .topbar-brand-mark {
    /* أكبر قليلاً من شعار الراعي (40px) على الجوال للسبب نفسه. */
    width: 48px !important;
    height: 48px !important;
    border-radius: 0 !important;
    font-size: 22px !important;
  }
  #top-navbar .topbar-brand-link,
  #top-navbar .topbar-sponsor {
    padding: 0;
    border-radius: 0;
  }
  #top-navbar .topbar-sponsor-media,
  #top-navbar .topbar-sponsor-media.is-wide,
  #top-navbar .topbar-sponsor-media.is-tall,
  #top-navbar .topbar-sponsor-media.is-square {
    /* مطابق للوجو المنصة على الجوال: مربّع 40×40 لكل الأشكال. */
    width: 40px !important;
    height: 40px !important;
    border-radius: 0;
  }
  #top-navbar .nav-icon-btn,
  #top-navbar .nav-menu-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px !important;
  }
}

/* ===========================================================
   SIDEBAR (right drawer) — Premium brand redesign
   =========================================================== */
#sidebar.sidebar {
  background: #ffffff !important;
  border-inline-start: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: -20px 0 60px -20px rgba(15, 23, 42, 0.18) !important;
  display: flex;
  flex-direction: column;
}
html[data-shell-dir="rtl"] #sidebar.sidebar {
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%);
  border-inline-start: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-inline-end: 0 !important;
  box-shadow: -20px 0 60px -20px rgba(15, 23, 42, 0.18) !important;
}
html[data-shell-dir="ltr"] #sidebar.sidebar {
  left: 0 !important;
  right: auto !important;
  transform: translateX(-100%);
  border-inline-start: 0 !important;
  border-inline-end: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 20px 0 60px -20px rgba(15, 23, 42, 0.18) !important;
}
html[data-shell-dir] #sidebar.sidebar.open {
  transform: translateX(0) !important;
}

/* Header — premium teal hero */
#sidebar .sidebar-header {
  position: relative;
  /* رأس أصغر وأقل ضخامة على الويب. */
  padding: 11px 14px 13px !important;
  min-height: 0 !important;
  background:
    radial-gradient(circle at 85% 15%, rgba(156, 107, 230, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(103, 58, 183, 0.45) 0%, transparent 55%),
    linear-gradient(135deg, #7E57C2 0%, #7353C8 60%, #8E6AD8 100%) !important;
  color: #ffffff !important;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 9px;
  margin-bottom: 6px;
}
#sidebar .sidebar-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 2;
}
#sidebar .sidebar-header::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .7;
  pointer-events: none;
}

#sidebar .sidebar-close,
#sidebar .sidebar-theme-toggle {
  height: 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  flex: 0 0 auto !important;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(20, 8, 48, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Close: compact round icon button — universally "dismiss".
   inset:auto neutralizes the absolute top/left positioning from app.css. */
#sidebar .sidebar-close {
  position: relative !important;
  inset: auto !important;
  width: 40px !important;
  min-width: 40px;
  border-radius: 50% !important;
  padding: 0 !important;
}
/* Theme: labeled pill — clearly a settings toggle, not a close. */
#sidebar .sidebar-theme-toggle {
  width: auto !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  gap: 8px;
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .1px;
  white-space: nowrap;
}
#sidebar .sidebar-close:hover,
#sidebar .sidebar-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 6px 18px rgba(20, 8, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
#sidebar .sidebar-close:active,
#sidebar .sidebar-theme-toggle:active {
  transform: scale(0.94);
}
#sidebar .sidebar-close svg,
#sidebar .sidebar-theme-toggle svg {
  width: 18px; height: 18px;
}
/* بلا `display` هنا: هذا المُحدِّد (‏#id + صنفان) كان يتغلّب على قواعد تبديل
   الوضع أدناه فيظهر القمر والشمس معًا داخل الزر. الإظهار/الإخفاء تتكفّل به
   قواعد ‎[data-theme] وحدها. */
#sidebar .sidebar-theme-toggle .theme-toggle-icon { align-items: center; }
#sidebar .sidebar-theme-toggle .theme-toggle-text { display: inline-flex; align-items: center; line-height: 1; }

#sidebar .sidebar-user {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  width: 100%;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
}
#sidebar .sidebar-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  min-width: 0;
}
#sidebar .sidebar-name {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
#sidebar .sidebar-role {
  color: rgba(204, 251, 241, 0.85) !important;
  font-size: .78rem !important;
  font-weight: 600;
  margin-top: 2px;
}
#sidebar .sidebar-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background:
    linear-gradient(135deg, #ffffff 0%, #EDE7F6 100%) !important;
  color: #7E57C2 !important;
  font-weight: 800;
  font-size: 0.92rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.35);
  flex: 0 0 40px;
  overflow: hidden;
}
#sidebar .sidebar-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* الزائر غير المسجّل: nav.js يفرّغ محتوى الأفتار فتبقى دائرة بيضاء فارغة تبدو
   كعنصر لم يكتمل تحميله. رمز شخص احتياطي يملأ الفراغ ويختفي فور حقن الحرف أو
   الصورة. */
#sidebar .sidebar-avatar:empty::after {
  content: "";
  width: 21px;
  height: 21px;
  background: currentColor;
  opacity: .72;
  -webkit-mask: var(--nw-guest-avatar-glyph) center / contain no-repeat;
  mask: var(--nw-guest-avatar-glyph) center / contain no-repeat;
}
#sidebar .sidebar-avatar {
  --nw-guest-avatar-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* Nav links */
#sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  flex: 1;
  overflow-y: auto;
}
#sidebar .sidebar-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  color: #1e293b !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all .15s ease !important;
  position: relative;
  cursor: pointer;
  text-align: start;
}
#sidebar .sidebar-link.hidden,
#sidebar .hidden { display: none !important; }
/* لا قاعدة تركيز لروابط القائمة في أي ملف: المتنقّل بلوحة المفاتيح كان يعتمد على
   إطار المتصفح الافتراضي فوق خلفية شفافة. حلقة بلون الهوية تجعل الموضع واضحًا. */
#sidebar .sidebar-link:focus-visible {
  outline: 2px solid #7E57C2;
  outline-offset: 2px;
}
#sidebar .sidebar-link:hover {
  background: #F5F0FB !important;
  color: #7E57C2 !important;
  border-color: rgba(103, 58, 183, 0.10) !important;
  transform: translateX(-2px);
}
[dir="ltr"] #sidebar .sidebar-link:hover { transform: translateX(2px); }
#sidebar .sidebar-link.active {
  background: linear-gradient(135deg, #F5F0FB 0%, #EDE7F6 100%) !important;
  color: #7353C8 !important;
  border-color: rgba(103, 58, 183, 0.18) !important;
  box-shadow: 0 4px 10px -4px rgba(103, 58, 183, 0.25);
}
#sidebar .sidebar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sidebar .sidebar-icon {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #475569;
  transition: all .15s ease;
}
#sidebar .sidebar-icon svg { width: 20px; height: 20px; }
#sidebar .sidebar-link:hover .sidebar-icon {
  background: #EDE7F6;
  color: #7E57C2;
}
#sidebar .sidebar-link.active .sidebar-icon {
  background: linear-gradient(135deg, #7E57C2, #B69AF0);
  color: #ffffff;
  box-shadow: 0 6px 14px -6px rgba(103, 58, 183, 0.55);
}
html[data-shell-dir="ltr"] #sidebar .sidebar-link {
  flex-direction: row-reverse !important;
}
html[data-shell-dir="rtl"] #sidebar .sidebar-link {
  flex-direction: row-reverse !important;
}

/* Separator + footer */
#sidebar .sidebar-section-label {
  margin: 10px 14px 4px;
  padding: 0;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #94a3b8;
  text-transform: uppercase;
}
#sidebar .sidebar-section-label:first-child { margin-top: 2px; }
[data-theme="dark"] #sidebar .sidebar-section-label { color: rgba(148,163,184,.65); }
#sidebar .sidebar-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.10), transparent);
  margin: 8px 14px;
}
#sidebar .sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 16px;
}
#sidebar .sidebar-footer .sidebar-link {
  font-weight: 700 !important;
}
#sidebar .sidebar-footer .sidebar-link.sidebar-logout .sidebar-icon {
  background: #F5F0FB;
  color: #7E57C2;
}
#sidebar .sidebar-footer .sidebar-link.sidebar-logout:hover .sidebar-icon {
  background: linear-gradient(135deg, #7E57C2, #B69AF0);
  color: #fff;
}
#sidebar .sidebar-footer .sidebar-link[id*="delete"],
#sidebar .sidebar-footer .sidebar-link.sidebar-delete-account {
  color: #e11d48 !important;
}
#sidebar .sidebar-footer .sidebar-link[id*="delete"] .sidebar-icon,
#sidebar .sidebar-footer .sidebar-link.sidebar-delete-account .sidebar-icon {
  background: #fff1f2;
  color: #e11d48;
}
#sidebar .sidebar-footer .sidebar-link[id*="delete"]:hover,
#sidebar .sidebar-footer .sidebar-link.sidebar-delete-account:hover {
  background: #fff1f2 !important;
  border-color: rgba(225, 29, 72, 0.18) !important;
  color: #be123c !important;
}
#sidebar .sidebar-footer .sidebar-link[id*="delete"]:hover .sidebar-icon,
#sidebar .sidebar-footer .sidebar-link.sidebar-delete-account:hover .sidebar-icon {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
}

/* Dark mode */
[data-theme="dark"] #sidebar.sidebar {
  background: #0f1d2e !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] #sidebar .sidebar-header {
  background:
    radial-gradient(circle at 85% 15%, rgba(156, 107, 230, 0.40) 0%, transparent 55%),
    linear-gradient(135deg, #2A1654 0%, #1F0E40 100%) !important;
}
[data-theme="dark"] #sidebar .sidebar-link {
  color: #cbd5e1 !important;
}
[data-theme="dark"] #sidebar .sidebar-link:hover {
  background: rgba(156, 107, 230, 0.10) !important;
  color: #C4A5F4 !important;
  border-color: rgba(156, 107, 230, 0.25) !important;
}
[data-theme="dark"] #sidebar .sidebar-link.active {
  background: linear-gradient(135deg, rgba(156, 107, 230, 0.18), rgba(103, 58, 183, 0.30)) !important;
  color: #EDE7F6 !important;
  border-color: rgba(156, 107, 230, 0.30) !important;
}
[data-theme="dark"] #sidebar .sidebar-icon {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}
[data-theme="dark"] #sidebar .sidebar-link:hover .sidebar-icon {
  background: rgba(156, 107, 230, 0.20);
  color: #C4A5F4;
}
[data-theme="dark"] #sidebar .sidebar-separator {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}

/* الشريط السفلي — مطابق لتطبيق فلاتر: «حبّة» عائمة زجاجية، عنصر نشط
   أحادي اللون (أسود/أبيض) بخلفية ناعمة، وأيقونة + بسيطة بلا دائرة. */
body.mobile-web-parity #bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: none;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100% - 36px));
  height: 58px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0.8px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 14px 26px -12px rgba(17, 24, 39, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0;
  z-index: 120;
}

body.mobile-web-parity .bnav-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 5px 8px;
  border-radius: 16px;
  gap: 3px;
  color: #111827;
  transition: background .18s ease, color .18s ease;
}

/* الشريط السفلي أيقونات فقط بلا تسميات، مطابقةً لتطبيق الجوال. نُبقي النص
   مخفيًا بصريًا فقط (وليس display:none) حتى تبقى التسمية متاحة لقارئات الشاشة. */
body.mobile-web-parity .bnav-item span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.mobile-web-parity .bnav-item { gap: 0; }

body.mobile-web-parity .bnav-item.active {
  color: #111827;
  background: #ECECEC;
}

/* مسافة سفلية للمحتوى حتى لا يختفي آخره خلف الحبّة العائمة */
body.mobile-web-parity main,
body.mobile-web-parity .page-content {
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

body.mobile-web-parity .bnav-item.bnav-item--disabled {
  color: #bcc2cc !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.mobile-web-parity[data-account-mode="provider"] #bottom-nav .bnav-item[data-index="1"],
body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled,
body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled.active,
body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled[aria-current="page"] {
  color: #bcc2cc !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.mobile-web-parity[data-account-mode="provider"] #bottom-nav .bnav-item[data-index="1"] :is(svg, span),
body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled :is(svg, span),
body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled.active :is(svg, span),
body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled[aria-current="page"] :is(svg, span) {
  color: #bcc2cc !important;
}

/* أيقونة + بسيطة بلا دائرة ولا تدرّج (كما في التطبيق) */
body.mobile-web-parity .bnav-fab {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 48px;
  margin: 0;
  padding: 0 8px;
  border: none;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
body.mobile-web-parity .bnav-fab svg { width: 27px; height: 27px; fill: currentColor; }
body.mobile-web-parity .bnav-fab:hover { transform: scale(1.06); background: none; box-shadow: none; }
body.mobile-web-parity .bnav-fab:active { transform: scale(0.94); }

[data-theme="dark"] body.mobile-web-parity #bottom-nav {
  background: rgba(28, 28, 30, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] body.mobile-web-parity .bnav-item {
  color: rgba(240, 234, 248, 0.78);
}

[data-theme="dark"] body.mobile-web-parity .bnav-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] body.mobile-web-parity .bnav-fab { color: #fff; }

[data-theme="dark"] body.mobile-web-parity[data-account-mode="provider"] #bottom-nav .bnav-item[data-index="1"],
[data-theme="dark"] body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled,
[data-theme="dark"] body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled.active,
[data-theme="dark"] body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled[aria-current="page"] {
  color: rgba(240, 234, 248, 0.28) !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-theme="dark"] body.mobile-web-parity[data-account-mode="provider"] #bottom-nav .bnav-item[data-index="1"] :is(svg, span),
[data-theme="dark"] body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled :is(svg, span),
[data-theme="dark"] body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled.active :is(svg, span),
[data-theme="dark"] body.mobile-web-parity #bottom-nav .bnav-item[data-index="1"].bnav-item--disabled[aria-current="page"] :is(svg, span) {
  color: rgba(240, 234, 248, 0.28) !important;
}

@media (min-width: 769px) {
  body.mobile-web-parity {
    --desktop-bottom-dock-height: 62px;
    --desktop-bottom-dock-offset: 18px;
  }

  /* شاشات كبيرة: نفس الحبّة بعرض مريح (يماثل الوضع المرسى في التطبيق) */
  body.mobile-web-parity #bottom-nav {
    bottom: max(var(--desktop-bottom-dock-offset), env(safe-area-inset-bottom, 0px));
    width: min(520px, calc(100% - 56px));
    height: var(--desktop-bottom-dock-height);
    padding: 0 12px;
    border-radius: 999px;
    display: flex !important;
    justify-content: space-around;
    gap: 0;
    z-index: 120;
  }

  body.mobile-web-parity .bnav-item {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 16px;
    letter-spacing: 0;
  }

  body.mobile-web-parity .bnav-item svg {
    width: 22px;
    height: 22px;
  }

  body.mobile-web-parity .bnav-item:hover {
    color: #111827;
    background: rgba(17, 24, 39, 0.06);
    transform: none;
  }

  body.mobile-web-parity .bnav-item.active {
    color: #111827;
    background: #ECECEC;
    box-shadow: none;
  }

  [data-theme="dark"] body.mobile-web-parity .bnav-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
  }

  [data-theme="dark"] body.mobile-web-parity .bnav-item.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  body.mobile-web-parity .bnav-fab {
    width: auto;
    height: 48px;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  body.mobile-web-parity .bnav-fab:hover {
    transform: scale(1.06);
    background: none;
    box-shadow: none;
  }

  body.mobile-web-parity .bnav-fab:active {
    transform: scale(0.95);
  }

  body.mobile-web-parity main,
  body.mobile-web-parity .page-content {
    padding-bottom: calc(var(--desktop-bottom-dock-height) + var(--desktop-bottom-dock-offset) + 62px) !important;
  }

  body.mobile-web-parity #site-footer {
    margin-bottom: calc(var(--desktop-bottom-dock-height) + var(--desktop-bottom-dock-offset) + 20px);
  }

  [data-theme="dark"] body.mobile-web-parity #bottom-nav {
    background: rgba(28, 28, 30, 0.72);
    border-color: rgba(255, 255, 255, 0.14);
  }
}

/* ============================================================
     Onboarding — Premium Overlay & Page (first-visit experience)
     Brand: Material Purple #7E57C2
     ============================================================ */

  /* ---- shared keyframes ---- */
  @keyframes obAuroraShift{
    0%,100%{background-position:0% 50%,100% 0%,50% 100%}
    50%{background-position:100% 50%,0% 100%,50% 0%}
  }
  @keyframes obFloat{
    0%,100%{transform:translateY(0) translateX(0)}
    50%{transform:translateY(-22px) translateX(8px)}
  }
  @keyframes obFloatRev{
    0%,100%{transform:translateY(0) translateX(0)}
    50%{transform:translateY(18px) translateX(-10px)}
  }
  @keyframes obPulseGlow{
    0%,100%{box-shadow:0 18px 40px rgba(103,58,183,.45),0 0 0 0 rgba(156,107,230,.45)}
    70%{box-shadow:0 18px 40px rgba(103,58,183,.45),0 0 0 18px rgba(156,107,230,0)}
  }
  @keyframes obFadeUp{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
  }
  @keyframes obSpin{to{transform:rotate(360deg)}}
  @keyframes obShine{
    0%{transform:translateX(-120%)}
    60%,100%{transform:translateX(140%)}
  }

  /* ============================================================
     1. Full-screen Overlay (.ob-overlay) — first visit
     ============================================================ */
  .ob-overlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    background:
      radial-gradient(circle at 20% 20%,rgba(156,107,230,.55),rgba(156,107,230,0) 55%),
      radial-gradient(circle at 80% 0%,rgba(103,58,183,.50),rgba(103,58,183,0) 50%),
      radial-gradient(circle at 50% 100%,rgba(74,45,143,.65),rgba(58,31,115,0) 55%),
      linear-gradient(135deg,#8E6AD8 0%,#2A1654 60%,#1F0E40 100%) !important;
    background-size:160% 160%,160% 160%,160% 160%,100% 100%;
    animation:obAuroraShift 18s ease-in-out infinite;
    overflow:hidden;
  }

  .ob-overlay::before,
  .ob-overlay::after{
    content:"";position:absolute;border-radius:50%;pointer-events:none;
    filter:blur(60px);opacity:.6;
  }
  .ob-overlay::before{
    width:380px;height:380px;top:-120px;right:-120px;
    background:radial-gradient(circle,rgba(196,165,244,.55),rgba(196,165,244,0));
    animation:obFloat 14s ease-in-out infinite;
  }
  .ob-overlay::after{
    width:420px;height:420px;bottom:-160px;left:-140px;
    background:radial-gradient(circle,rgba(103,58,183,.55),rgba(103,58,183,0));
    animation:obFloatRev 16s ease-in-out infinite;
  }

  /* particles polish */
  .ob-overlay .ob-particles{position:absolute;inset:0;pointer-events:none;z-index:1}
  .ob-overlay .ob-particle{
    position:absolute;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0));
    box-shadow:0 0 12px rgba(255,255,255,.5);
    animation:obFloat 9s ease-in-out infinite;
  }
  .ob-overlay .ob-particle:nth-child(2n){animation:obFloatRev 11s ease-in-out infinite}

  /* loader */
  .ob-overlay .ob-loader{position:relative;z-index:2;display:grid;place-items:center;width:100%;height:100%}
  .ob-overlay .ob-loader-ring{
    width:64px;height:64px;border-radius:50%;
    border:4px solid rgba(255,255,255,.18);
    border-top-color:#C4A5F4;
    animation:obSpin 1s linear infinite;
    box-shadow:0 0 28px rgba(196,165,244,.45)
  }

  /* container card */
  .ob-overlay .ob-container{
    position:relative;z-index:2;
    width:min(560px,calc(100vw - 28px));
    max-height:calc(100vh - 28px);
    display:flex;flex-direction:column;gap:14px;
    padding:22px 22px 18px;
    border-radius:28px;
    background:linear-gradient(160deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 100%);
    backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:
      0 30px 80px rgba(31,14,64,.55),
      inset 0 1px 0 rgba(255,255,255,.35);
    animation:obFadeUp .55s ease both;
  }

  .ob-overlay .ob-counter{
    align-self:center;
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 14px;border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28);
    color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
    backdrop-filter:blur(10px);
  }
  .ob-overlay .ob-counter::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:#C4A5F4;box-shadow:0 0 8px #C4A5F4;
  }

  .ob-overlay .ob-stage{position:relative;flex:1 1 auto;min-height:clamp(440px,62vh,560px);overflow:visible}
  .ob-overlay .ob-slide{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:18px;padding:6px 4px;text-align:center;overflow:visible;
    opacity:0;visibility:hidden;transform:translateX(40px) scale(.98);
    transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
    pointer-events:none;
  }
  .ob-overlay .ob-slide--active{opacity:1;visibility:visible;transform:translateX(0) scale(1);pointer-events:auto;transition:opacity .45s ease,transform .45s ease,visibility 0s linear 0s}
  .ob-overlay .ob-slide--prev{transform:translateX(-40px) scale(.98)}
  .ob-overlay .ob-slide--next{transform:translateX(40px) scale(.98)}

  .ob-overlay .ob-slide-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .ob-overlay .ob-step-chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:999px;
    background:linear-gradient(135deg,#B69AF0,#7E57C2);
    color:#fff;font-size:11.5px;font-weight:800;
    box-shadow:0 8px 20px rgba(103,58,183,.45);
  }
  .ob-overlay .ob-step-caption{
    display:inline-flex;align-items:center;
    padding:5px 12px;border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    color:rgba(255,255,255,.92);font-size:11px;font-weight:600;
  }

  .ob-overlay .ob-media{
    position:relative;
    max-width:200px;width:100%;aspect-ratio:1;
    border-radius:24px;overflow:hidden;
    background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 22px 50px rgba(31,14,64,.45),inset 0 1px 0 rgba(255,255,255,.35);
    display:grid;place-items:center;flex-shrink:0;
  }
  .ob-overlay .ob-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
    transform:translateX(-120%);
    animation:obShine 4.2s ease-in-out infinite;
    pointer-events:none;
  }
  .ob-overlay .ob-media-asset{width:100%;height:100%;object-fit:cover;display:block;padding:0}
  .ob-overlay .ob-icon-circle{
    width:96px;height:96px;border-radius:50%;
    display:grid;place-items:center;
    background:linear-gradient(135deg,#fff 0%,#EDE7F6 100%);
    color:#7E57C2;
    box-shadow:0 18px 40px rgba(103,58,183,.45);
    animation:obPulseGlow 2.6s ease-in-out infinite;
  }

  .ob-overlay .ob-text,
  .ob-overlay .ob-copy-card{
    width:100%;max-width:480px;
    padding:20px 22px;border-radius:20px;
    background:linear-gradient(160deg,#8E6AD8 0%,#7353C8 100%);
    border:1px solid rgba(196,165,244,.45);
    box-shadow:0 14px 36px rgba(20,8,48,.55),inset 0 1px 0 rgba(255,255,255,.25);
    color:#fff;text-align:center;
  }
  .ob-overlay .ob-title{
    margin:0 0 12px;font-size:24px;font-weight:900;line-height:1.3;letter-spacing:-.015em;
    color:#FFFFFF;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  .ob-overlay .ob-desc{
    margin:0;font-size:15px;line-height:1.95;font-weight:700;
    color:#FFFFFF !important;
    opacity:1 !important;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
  }

  /* dots */
  .ob-overlay .ob-dots{display:flex;justify-content:center;gap:8px;margin:8px 0 0}
  .ob-overlay .ob-dot{
    width:10px;height:10px;border-radius:999px;
    background:rgba(255,255,255,.30);
    transition:width .3s ease,background .3s ease,box-shadow .3s ease;
    cursor:pointer;border:0;padding:0;
  }
  .ob-overlay .ob-dot--active{
    width:30px;background:linear-gradient(90deg,#C4A5F4,#fff);
    box-shadow:0 0 14px rgba(196,165,244,.7);
  }

  /* actions */
  .ob-overlay .ob-actions{
    display:flex;gap:10px;align-items:center;justify-content:space-between;
    margin-top:10px;
  }
  .ob-overlay .ob-btn-skip{
    flex:0 0 auto;
    padding:12px 20px;border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.22);
    color:rgba(255,255,255,.85);font-weight:700;font-size:13.5px;
    cursor:pointer;transition:all .25s ease;
  }
  .ob-overlay .ob-btn-skip:hover{background:rgba(255,255,255,.15);color:#fff;transform:translateY(-1px)}

  .ob-overlay .ob-btn-next{
    flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 24px;border-radius:14px;border:0;cursor:pointer;
    background:linear-gradient(135deg,#B69AF0 0%,#7E57C2 50%,#7353C8 100%);
    color:#fff;font-weight:800;font-size:14.5px;letter-spacing:.01em;
    box-shadow:0 14px 32px rgba(103,58,183,.55),inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .2s ease,box-shadow .25s ease,filter .2s ease;
  }
  .ob-overlay .ob-btn-next:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 38px rgba(103,58,183,.65)}
  .ob-overlay .ob-btn-next:active{transform:translateY(0)}
  .ob-overlay .ob-btn-next--finish{background:linear-gradient(135deg,#C4A5F4 0%,#B69AF0 50%,#7E57C2 100%)}

  /* exit animation */
  .ob-overlay--exit{opacity:0;transform:scale(.98);transition:opacity .4s ease,transform .4s ease}

  /* ============================================================
     2. Onboarding stand-alone page (.onboarding-page → /onboarding/)
     ============================================================ */
  body.page-onboarding{
    background:
      radial-gradient(circle at 15% 10%,rgba(156,107,230,.35),transparent 55%),
      radial-gradient(circle at 85% 90%,rgba(74,45,143,.45),transparent 55%),
      linear-gradient(160deg,#8E6AD8 0%,#2A1654 65%,#1F0E40 100%) !important;
    color:#fff;min-height:100vh;
    overflow-x:hidden;
  }
  body.mobile-web-parity.page-onboarding #top-navbar.nw-global-topbar,
  body.page-onboarding #top-navbar,
  body.page-onboarding #bottom-nav,
  body.page-onboarding #site-footer,
  body.page-onboarding #offline-banner{
    display:none !important;
  }
  body.page-onboarding.mobile-web-parity main,
  body.page-onboarding.mobile-web-parity .page-content{
    padding:0 !important;
    margin:0 !important;
  }
  body.page-onboarding .onboarding-page{
    position:relative;min-height:100vh;
    padding:24px 14px 28px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  body.page-onboarding .onboarding-page::before,
  body.page-onboarding .onboarding-page::after{
    content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;
  }
  body.page-onboarding .onboarding-page::before{
    width:340px;height:340px;top:-120px;right:-120px;
    background:radial-gradient(circle,rgba(196,165,244,.5),transparent);
    animation:obFloat 14s ease-in-out infinite;
  }
  body.page-onboarding .onboarding-page::after{
    width:380px;height:380px;bottom:-140px;left:-140px;
    background:radial-gradient(circle,rgba(103,58,183,.55),transparent);
    animation:obFloatRev 16s ease-in-out infinite;
  }
  body.page-onboarding .onboarding-page .container{position:relative;z-index:1;width:100%;max-width:560px}

  body.page-onboarding .onboarding-card{
    padding:22px 22px 18px;border-radius:28px;
    background:linear-gradient(160deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 100%);
    backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 30px 80px rgba(31,14,64,.55),inset 0 1px 0 rgba(255,255,255,.35);
    display:flex;flex-direction:column;gap:14px;
    animation:obFadeUp .55s ease both;
  }

  body.page-onboarding .onboarding-stage{position:relative;min-height:clamp(440px,62vh,560px);display:flex;align-items:center;justify-content:center}

  body.page-onboarding .onboard-slide{
    width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
    animation:obFadeUp .45s ease both;
  }
  body.page-onboarding .onboard-slide.hidden{display:none}

  body.page-onboarding .onboard-slide-meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  body.page-onboarding .onboard-step-chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:999px;
    background:linear-gradient(135deg,#B69AF0,#7E57C2);
    color:#fff;font-size:11.5px;font-weight:800;
    box-shadow:0 8px 20px rgba(103,58,183,.45);
  }
  body.page-onboarding .onboard-step-note{
    display:inline-flex;align-items:center;
    padding:5px 12px;border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    color:rgba(255,255,255,.92);font-size:11px;font-weight:600;
  }

  body.page-onboarding .onboard-media{
    position:relative;max-width:280px;width:100%;aspect-ratio:1;
    border-radius:24px;overflow:hidden;
    background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 22px 50px rgba(31,14,64,.45),inset 0 1px 0 rgba(255,255,255,.35);
    display:grid;place-items:center;
  }
  body.page-onboarding .onboard-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
    transform:translateX(-120%);animation:obShine 4.2s ease-in-out infinite;pointer-events:none;
  }
  body.page-onboarding .onboard-media-image,
  body.page-onboarding .onboard-media-video{width:100%;height:100%;object-fit:cover;display:block}
  body.page-onboarding .onboard-video-sound-toggle,
  .ob-overlay .ob-video-sound-toggle{
    position:absolute;z-index:3;inset-inline-start:50%;bottom:14px;
    transform:translateX(-50%);
    border:1px solid rgba(255,255,255,.28);border-radius:999px;
    padding:9px 14px;background:rgba(28,18,48,.68);color:#fff;
    font-family:'Cairo',sans-serif;font-size:12px;font-weight:800;
    box-shadow:0 12px 28px rgba(20,8,48,.24);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    cursor:pointer;transition:opacity .2s ease,transform .2s ease,background .2s ease;
  }
  body.page-onboarding .onboard-video-sound-toggle:hover,
  .ob-overlay .ob-video-sound-toggle:hover{
    background:rgba(103,58,183,.82);transform:translateX(-50%) translateY(-1px);
  }
  body.page-onboarding .onboard-video-sound-toggle.is-hidden,
  .ob-overlay .ob-video-sound-toggle.is-hidden{opacity:0;pointer-events:none}
  body.page-onboarding .onboard-media-badge{
    position:absolute;top:10px;inset-inline-start:10px;
    padding:4px 10px;border-radius:999px;
    background:rgba(0,0,0,.40);color:#fff;font-size:11px;font-weight:700;
    backdrop-filter:blur(8px);
  }
  body.page-onboarding .onboard-icon{
    width:120px;height:120px;border-radius:50%;
    display:grid;place-items:center;font-size:48px;
    background:linear-gradient(135deg,#fff 0%,#EDE7F6 100%);
    color:#7E57C2;
    box-shadow:0 18px 40px rgba(103,58,183,.45);
    animation:obPulseGlow 2.6s ease-in-out infinite;
  }

  body.page-onboarding .onboard-copy-card{
    width:100%;max-width:460px;
    padding:14px 16px;border-radius:18px;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(8px);
  }
  body.page-onboarding .onboard-slide h1{margin:0 0 12px;font-size:24px;font-weight:900;color:#fff;line-height:1.3;letter-spacing:-.015em;text-shadow:0 2px 10px rgba(0,0,0,.35)}
  body.page-onboarding .onboard-slide p{margin:0;font-size:15px;line-height:1.95;font-weight:700;color:#FFFFFF;text-shadow:0 2px 10px rgba(0,0,0,.35)}

  /* status / loading */
  body.page-onboarding .onboard-status-card{
    width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
    padding:20px 8px;
    animation:obFadeUp .45s ease both;
  }
  body.page-onboarding .onboard-status-icon{
    width:88px;height:88px;border-radius:50%;
    display:grid;place-items:center;font-size:36px;
    background:linear-gradient(135deg,#fff 0%,#EDE7F6 100%);
    color:#7E57C2;
    box-shadow:0 18px 40px rgba(103,58,183,.45);
    animation:obSpin 1.6s linear infinite;
  }
  body.page-onboarding .onboard-status-card h1{color:#fff;font-size:20px;margin:0}
  body.page-onboarding .onboard-status-card p{color:rgba(255,255,255,.85);font-size:13.5px;line-height:1.9;margin:0;max-width:360px}
  body.page-onboarding .onboard-status-action{
    margin-top:6px;padding:11px 24px;border-radius:14px;border:0;cursor:pointer;
    background:linear-gradient(135deg,#B69AF0,#7E57C2);color:#fff;font-weight:800;font-size:14px;
    box-shadow:0 12px 28px rgba(103,58,183,.45);transition:transform .2s ease,filter .2s ease;
  }
  body.page-onboarding .onboard-status-action:hover{transform:translateY(-1px);filter:brightness(1.08)}

  /* dots */
  body.page-onboarding .onboard-dots{display:flex;justify-content:center;gap:8px;margin:4px 0 0}
  body.page-onboarding .onboard-dot{
    width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.30);
    transition:width .3s ease,background .3s ease,box-shadow .3s ease;cursor:pointer;
  }
  body.page-onboarding .onboard-dot.active{
    width:30px;background:linear-gradient(90deg,#C4A5F4,#fff);
    box-shadow:0 0 14px rgba(196,165,244,.7);
  }

  /* actions */
  body.page-onboarding .onboard-actions{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:6px}
  body.page-onboarding .btn-link.onboard-skip{
    flex:0 0 auto;padding:12px 20px;border-radius:14px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
    color:rgba(255,255,255,.85);font-weight:700;font-size:13.5px;text-decoration:none;cursor:pointer;
    transition:all .25s ease;
  }
  body.page-onboarding .btn-link.onboard-skip:hover{background:rgba(255,255,255,.15);color:#fff;transform:translateY(-1px)}

  body.page-onboarding .onboard-next{
    flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 24px;border-radius:14px;border:0;cursor:pointer;
    background:linear-gradient(135deg,#B69AF0 0%,#7E57C2 50%,#7353C8 100%);
    color:#fff;font-weight:800;font-size:14.5px;letter-spacing:.01em;
    box-shadow:0 14px 32px rgba(103,58,183,.55),inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .2s ease,box-shadow .25s ease,filter .2s ease;
  }
  body.page-onboarding .onboard-next:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 38px rgba(103,58,183,.65)}
  body.page-onboarding .onboard-next:active{transform:translateY(0)}

  /* mobile tuning */
  @media (max-width:520px){
    .ob-overlay{padding:12px}
    .ob-overlay .ob-container{padding:18px 16px 14px;border-radius:24px;gap:12px}
    .ob-overlay .ob-stage{min-height:clamp(380px,58vh,460px)}
    .ob-overlay .ob-media{max-width:170px;border-radius:20px}
    .ob-overlay .ob-icon-circle{width:80px;height:80px}
    .ob-overlay .ob-title{font-size:18px}
    .ob-overlay .ob-desc{font-size:13px;line-height:1.85}
    .ob-overlay .ob-btn-next{padding:12px 18px;font-size:13.5px}
    .ob-overlay .ob-btn-skip{padding:11px 16px;font-size:12.5px}

    body.page-onboarding .onboarding-page{padding:14px 10px 18px}
    body.page-onboarding .onboarding-card{padding:18px 16px 14px;border-radius:24px;gap:12px}
    body.page-onboarding .onboard-media{max-width:220px;border-radius:20px}
    body.page-onboarding .onboard-icon{width:96px;height:96px;font-size:40px}
    body.page-onboarding .onboard-slide h1{font-size:18px}
    body.page-onboarding .onboard-slide p{font-size:13px;line-height:1.85}
    body.page-onboarding .onboard-next{padding:12px 18px;font-size:13.5px}
    body.page-onboarding .btn-link.onboard-skip{padding:11px 16px;font-size:12.5px}
  }

  @media (max-width:360px){
    .ob-overlay .ob-container,
    body.page-onboarding .onboarding-card{padding:14px 12px 12px;border-radius:20px}
    .ob-overlay .ob-media,
    body.page-onboarding .onboard-media{max-width:180px;border-radius:16px}
    .ob-overlay .ob-icon-circle,
    body.page-onboarding .onboard-icon{width:72px;height:72px}
    body.page-onboarding .onboard-icon{font-size:32px}
    .ob-overlay .ob-actions,
    body.page-onboarding .onboard-actions{flex-direction:column;align-items:stretch}
    .ob-overlay .ob-btn-skip,
    .ob-overlay .ob-btn-next,
    body.page-onboarding .btn-link.onboard-skip,
    body.page-onboarding .onboard-next{width:100%}
  }

  /* respect reduced motion */
  @media (prefers-reduced-motion:reduce){
    .ob-overlay,.ob-overlay::before,.ob-overlay::after,
    .ob-overlay .ob-particle,.ob-overlay .ob-icon-circle,
    .ob-overlay .ob-media::after,.ob-overlay .ob-loader-ring,
    body.page-onboarding,body.page-onboarding .onboarding-page::before,
    body.page-onboarding .onboarding-page::after,
    body.page-onboarding .onboard-icon,body.page-onboarding .onboard-media::after,
    body.page-onboarding .onboard-status-icon{animation:none !important}
  }

  /* ============================================================
     Identity refresh — first visit overlay, onboarding page, login step
     ============================================================ */
  .ob-overlay{
    background:
      linear-gradient(180deg,#f8fbfc 0%,#eef7f6 54%,#f5f0fb 100%) !important;
    color:#151a2d;
    animation:none !important;
  }
  .ob-overlay::before{
    inset:0 0 auto 0;
    width:auto;height:34vh;min-height:220px;
    border-radius:0;filter:none;opacity:1;
    /* خلفية فاتحة ناعمة متناغمة مع ألوان الشعار بدل البنفسجي الغامق */
    background:
      radial-gradient(420px 220px at 50% -20%, rgba(157,107,230,.14), transparent 70%),
      radial-gradient(360px 200px at 90% 8%, rgba(232,182,90,.10), transparent 72%),
      linear-gradient(180deg, rgba(111,168,199,.10), transparent 92%);
    animation:none !important;
  }
  .ob-overlay::after{
    inset:auto 0 0 0;
    width:auto;height:42vh;
    border-radius:0;filter:none;opacity:.52;
    background:
      linear-gradient(0deg,rgba(103,58,183,.08),transparent 58%),
      repeating-linear-gradient(135deg,rgba(74,45,143,.055) 0 1px,transparent 1px 16px);
    animation:none !important;
  }
  .ob-overlay .ob-particles{display:none}
  .ob-overlay .ob-container,
  body.page-onboarding .onboarding-card{
    width:min(520px,calc(100vw - 28px));
    border:1px solid rgba(103,58,183,.14);
    background:
      linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,251,253,.96)) !important;
    color:#151a2d;
    box-shadow:0 24px 62px rgba(21,26,45,.18),0 1px 0 rgba(255,255,255,.9) inset;
    backdrop-filter:blur(16px) saturate(130%);
    -webkit-backdrop-filter:blur(16px) saturate(130%);
  }
  .ob-brand-lockup{
    display:flex;align-items:center;justify-content:center;gap:10px;
    min-height:52px;margin:0 auto 2px;
    color:#F7F2FF;text-align:start;
  }
  body.page-onboarding .onboarding-brand-lockup{
    display:flex;align-items:center;justify-content:center;gap:10px;
    min-height:52px;margin:0 auto 2px;
    color:#F7F2FF;text-align:start;
  }
  .ob-brand-mark{
    width:44px;height:44px;border-radius:14px;
    display:inline-flex;align-items:center;justify-content:center;
    overflow:hidden;
    background:linear-gradient(135deg,#7353C8,#7E57C2 58%,#1FB5A8);
    color:#fff;font-size:22px;font-weight:900;
    box-shadow:0 12px 24px rgba(74,45,143,.24);
  }
  .ob-brand-mark img{
    width:100%;height:100%;object-fit:contain;padding:5px;background:#fff;
  }
  body.page-onboarding .onboarding-brand-mark{
    width:44px;height:44px;border-radius:14px;
    display:inline-flex;align-items:center;justify-content:center;
    overflow:hidden;
    background:linear-gradient(135deg,#7353C8,#7E57C2 58%,#1FB5A8);
    color:#fff;font-size:22px;font-weight:900;
    box-shadow:0 12px 24px rgba(74,45,143,.24);
  }
  body.page-onboarding .onboarding-brand-mark img{
    width:100%;height:100%;object-fit:contain;padding:5px;background:#fff;
  }
  .ob-brand-copy{display:grid;gap:0;line-height:1.25}
  .ob-brand-copy strong{font-size:18px;font-weight:900;color:#F7F2FF}
  .ob-brand-copy small{font-size:11px;font-weight:800;color:#637083}
  body.page-onboarding .onboarding-brand-copy{display:grid;gap:0;line-height:1.25}
  body.page-onboarding .onboarding-brand-copy strong{font-size:18px;font-weight:900;color:#F7F2FF}
  body.page-onboarding .onboarding-brand-copy small{
    max-width:300px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;font-weight:800;color:#637083;
  }
  .ob-overlay .ob-stage{min-height:clamp(360px,54vh,500px)}
  .ob-overlay .ob-slide{gap:14px}
  .ob-overlay .ob-media,
  body.page-onboarding .onboard-media{
    max-width:220px;
    border:1px solid rgba(103,58,183,.14);
    background:
      linear-gradient(135deg,#f6f1ff 0%,#fff 48%,#e9f8f6 100%) !important;
    box-shadow:0 16px 36px rgba(21,26,45,.10);
  }
  .ob-overlay .ob-media::after,
  body.page-onboarding .onboard-media::after{content:none}
  .ob-overlay .ob-icon-circle,
  body.page-onboarding .onboard-icon,
  body.page-onboarding .onboard-status-icon{
    border-radius:18px;
    background:#fff;
    color:#7353C8;
    box-shadow:0 12px 28px rgba(103,58,183,.14);
    border:1px solid rgba(103,58,183,.13);
    animation:none !important;
  }
  .ob-overlay .ob-text,
  .ob-overlay .ob-copy-card,
  body.page-onboarding .onboard-copy-card{
    max-width:440px;
    background:#fff !important;
    color:#151a2d;
    border:1px solid rgba(21,26,45,.08);
    box-shadow:0 12px 28px rgba(21,26,45,.07);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .ob-overlay .ob-title,
  body.page-onboarding .onboard-slide h1{
    color:#151a2d !important;
    text-shadow:none;
    letter-spacing:0;
  }
  .ob-overlay .ob-desc,
  body.page-onboarding .onboard-slide p{
    color:#5e6a7d !important;
    text-shadow:none;
    font-weight:700;
  }
  .ob-overlay .ob-step-chip,
  body.page-onboarding .onboard-step-chip{
    background:rgba(15,118,110,.10) !important;
    color:#1FB5A8;
    border:1px solid rgba(15,118,110,.16);
    box-shadow:none;
  }
  .ob-overlay .ob-step-caption,
  body.page-onboarding .onboard-step-note{
    background:rgba(103,58,183,.08);
    color:#7353C8;
    border:1px solid rgba(103,58,183,.13);
  }
  .ob-overlay .ob-dot,
  body.page-onboarding .onboard-dot{background:rgba(103,58,183,.18)}
  .ob-overlay .ob-dot--active,
  body.page-onboarding .onboard-dot.active{
    background:linear-gradient(90deg,#7353C8,#1FB5A8);
    box-shadow:none;
  }
  .ob-overlay .ob-btn-next,
  .ob-overlay .ob-login-submit,
  body.page-onboarding .onboard-next,
  body.page-onboarding .onboard-status-action{
    border:0;
    background:linear-gradient(135deg,#7353C8,#7E57C2 54%,#1FB5A8) !important;
    color:#fff;
    box-shadow:0 14px 30px rgba(74,45,143,.22);
  }
  .ob-overlay .ob-btn-skip,
  .ob-overlay .ob-login-guest,
  body.page-onboarding .btn-link.onboard-skip{
    background:#fff !important;
    color:#7353C8 !important;
    border:1px solid rgba(103,58,183,.18) !important;
    box-shadow:0 8px 20px rgba(21,26,45,.06);
  }
  .ob-overlay .ob-login-card{
    padding:26px 22px 22px;
  }
  .ob-overlay .ob-brand-lockup-login{
    margin-bottom:16px;
  }
  .ob-login-title{color:#151a2d}
  .ob-login-subtitle{color:#5e6a7d}
  .ob-login-input-wrap{
    background:#fff;
    border-color:rgba(103,58,183,.18);
    box-shadow:0 8px 20px rgba(21,26,45,.05);
  }
  .ob-login-input-wrap:focus-within{
    border-color:rgba(103,58,183,.28);
    box-shadow:0 0 0 3px rgba(103,58,183,.08),0 10px 24px rgba(21,26,45,.08);
  }
  .ob-login-input{color:#151a2d}
  .ob-login-cooldown{color:#7353C8}
  .ob-login-divider{color:#7a8496}
  .ob-login-divider > span:first-child,
  .ob-login-divider > span:last-child{
    background:linear-gradient(90deg,transparent,rgba(103,58,183,.18),transparent);
  }
  body.page-onboarding{
    background:
      linear-gradient(180deg,#f8fbfc 0%,#eef7f6 54%,#f5f0fb 100%) !important;
    color:#151a2d;
  }
  body.page-onboarding .onboarding-page::before{
    inset:0 0 auto 0;
    width:auto;height:34vh;min-height:220px;
    border-radius:0;filter:none;opacity:1;
    /* خلفية فاتحة ناعمة متناغمة مع ألوان الشعار بدل البنفسجي الغامق */
    background:
      radial-gradient(420px 220px at 50% -20%, rgba(157,107,230,.14), transparent 70%),
      radial-gradient(360px 200px at 90% 8%, rgba(232,182,90,.10), transparent 72%),
      linear-gradient(180deg, rgba(111,168,199,.10), transparent 92%);
    animation:none !important;
  }
  body.page-onboarding .onboarding-page::after{
    content:none;
  }
  body.page-onboarding .onboard-status-card h1{color:#151a2d}
  body.page-onboarding .onboard-status-card p{color:#5e6a7d}
  @media (max-width:520px){
    .ob-overlay{padding:12px}
    .ob-overlay .ob-container,
    body.page-onboarding .onboarding-card{border-radius:22px;padding:16px 14px 14px}
    .ob-brand-lockup{min-height:46px;margin-bottom:0}
    .ob-brand-mark{width:38px;height:38px;border-radius:12px;font-size:19px}
    .ob-brand-copy strong{font-size:16px}
    body.page-onboarding .onboarding-brand-lockup{min-height:46px;margin-bottom:0}
    body.page-onboarding .onboarding-brand-mark{width:38px;height:38px;border-radius:12px;font-size:19px}
    body.page-onboarding .onboarding-brand-copy strong{font-size:16px}
    .ob-overlay .ob-stage{min-height:clamp(330px,52vh,430px)}
    .ob-overlay .ob-media,
    body.page-onboarding .onboard-media{max-width:176px}
  }

  /* First-visit sign-in screen only */
  .ob-overlay.ob-overlay--login{
    background:
      linear-gradient(180deg,#ebe7f7 0 26%,#fbfcfd 26% 100%) !important;
  }
  .ob-overlay.ob-overlay--login::before{
    height:0;
    min-height:0;
    background:none;
    border:0;
  }
  .ob-overlay.ob-overlay--login::after{
    opacity:.34;
    height:38vh;
  }
  .ob-overlay.ob-overlay--login .ob-login-card{
    width:min(404px,100vw);
    min-height:min(100dvh,760px);
    padding:24px 26px 30px;
    border-radius:0 0 22px 22px;
    border-color:rgba(21,26,45,.08);
    background:
      linear-gradient(180deg,rgba(255,255,255,.99),rgba(250,252,253,.98)) !important;
    box-shadow:0 18px 48px rgba(21,26,45,.10),0 1px 0 rgba(255,255,255,.92) inset;
  }
  .ob-overlay.ob-overlay--login .ob-login-platform-header{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 auto 14px;
  }
  .ob-overlay.ob-overlay--login .ob-login-kicker{
    min-height:28px;
    margin:0 -4px 0 0;
    padding:4px 12px;
    border-radius:999px;
    border:1px solid rgba(15,118,110,.18);
    background:rgba(15,118,110,.10);
    color:#1FB5A8;
    font-size:12px;
    font-weight:900;
    line-height:1.35;
    white-space:nowrap;
  }
  .ob-overlay.ob-overlay--login .ob-login-platform-mark{
    width:64px;
    height:64px;
    border-radius:18px;
    font-size:31px;
    background:linear-gradient(145deg,#8E6AD8 0%,#7E57C2 58%,#1FB5A8 100%);
    box-shadow:0 16px 34px rgba(74,45,143,.26);
  }
  .ob-overlay.ob-overlay--login .ob-login-title{
    margin-top:0;
    font-size:28px;
    font-weight:900;
    color:#151a2d;
  }
  .ob-overlay.ob-overlay--login .ob-login-subtitle{
    max-width:340px;
    margin:12px auto 22px;
    color:#647085;
    font-size:14px;
    line-height:1.8;
    font-weight:800;
  }
  .ob-overlay.ob-overlay--login .ob-login-field{
    margin:0 0 28px;
    text-align:start;
  }
  .ob-overlay.ob-overlay--login .ob-login-label{
    display:block;
    margin:0 0 8px;
    color:#F7F2FF;
    font-size:13px;
    font-weight:900;
    line-height:1.4;
  }
  .ob-overlay.ob-overlay--login .ob-login-input-wrap{
    height:58px;
    border:1px solid rgba(103,58,183,.18);
    border-radius:16px;
    background:#ffffff;
    box-shadow:0 10px 24px rgba(21,26,45,.04);
  }
  .ob-overlay.ob-overlay--login .ob-login-input-wrap:focus-within{
    border-color:rgba(103,58,183,.30) !important;
    box-shadow:0 0 0 3px rgba(103,58,183,.08),0 12px 26px rgba(21,26,45,.08) !important;
  }
  .ob-overlay.ob-overlay--login .ob-login-input{
    color:#151a2d;
    font-weight:800;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  .ob-overlay.ob-overlay--login .ob-login-input::placeholder{
    color:#a99ac5;
  }
  .ob-overlay.ob-overlay--login .ob-login-hint{
    margin-top:8px;
    color:#647085;
    font-size:12px;
    font-weight:800;
    line-height:1.5;
  }
  .ob-overlay.ob-overlay--login .ob-login-submit{
    min-height:56px;
    border-radius:16px;
    border:1px solid rgba(103,58,183,.20);
    background:linear-gradient(135deg,#f4edff 0%,#ffffff 48%,#efe7fb 100%) !important;
    color:#7353C8;
    box-shadow:0 16px 34px rgba(74,45,143,.10);
    font-weight:900;
  }
  .ob-overlay.ob-overlay--login .ob-login-submit:hover:not(:disabled){
    background:linear-gradient(135deg,#eee3fb 0%,#ffffff 48%,#e9ddf8 100%) !important;
    box-shadow:0 18px 38px rgba(74,45,143,.13);
  }
  .ob-overlay.ob-overlay--login .ob-login-divider{
    margin:34px 0 22px;
    color:#8792a3;
    font-weight:800;
  }
  .ob-overlay.ob-overlay--login .ob-login-guest{
    min-height:64px;
    border:1px solid rgba(103,58,183,.18) !important;
    border-radius:16px;
    background:#fff !important;
    color:#7353C8 !important;
    box-shadow:0 10px 24px rgba(21,26,45,.06);
  }
  @media (max-width:520px){
    .ob-overlay.ob-overlay--login .ob-login-card{
      width:100vw;
      padding:23px 26px 30px;
      border-radius:0 0 20px 20px;
    }
    .ob-overlay.ob-overlay--login .ob-login-platform-mark{
      width:64px;height:64px;border-radius:18px;font-size:31px;
    }
    .ob-overlay.ob-overlay--login .ob-login-title{
      font-size:27px;
    }
    .ob-overlay.ob-overlay--login .ob-login-subtitle{
      font-size:13px;
      margin-bottom:18px;
    }
    .ob-overlay.ob-overlay--login .ob-login-submit{
      min-height:58px;
    }
    .ob-overlay.ob-overlay--login .ob-login-guest{
      min-height:64px;
    }
  }

  /* Final dark mode for first-visit onboarding and login overlay. */
  html[data-theme="dark"] .ob-overlay,
  html[data-theme="dark"] body.page-onboarding {
    background:
      radial-gradient(820px 320px at 86% -8%, rgba(124,58,237,.24), transparent 58%),
      radial-gradient(680px 280px at 10% 20%, rgba(45,212,191,.12), transparent 56%),
      linear-gradient(180deg,#07111f 0%,#0b1322 54%,#101827 100%) !important;
    color:#f8fbff !important;
  }
  html[data-theme="dark"] .ob-overlay::before,
  html[data-theme="dark"] body.page-onboarding .onboarding-page::before {
    background:
      linear-gradient(135deg,rgba(124,58,237,.42),rgba(67,56,202,.34) 48%,rgba(15,118,110,.32)) !important;
  }
  html[data-theme="dark"] .ob-overlay::after {
    background:
      linear-gradient(0deg,rgba(124,58,237,.16),transparent 58%),
      repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 16px) !important;
  }
  html[data-theme="dark"] .ob-overlay .ob-container,
  html[data-theme="dark"] body.page-onboarding .onboarding-card,
  html[data-theme="dark"] .ob-overlay.ob-overlay--login .ob-login-card {
    border-color:rgba(174,196,226,.22) !important;
    background:
      radial-gradient(circle at top center,rgba(124,58,237,.16),transparent 44%),
      linear-gradient(165deg,rgba(23,35,54,.98),rgba(11,19,34,.98)) !important;
    color:#f8fbff !important;
    box-shadow:0 28px 64px rgba(0,0,0,.56),0 1px 0 rgba(255,255,255,.04) inset !important;
  }
  html[data-theme="dark"] :is(.ob-brand-copy strong, body.page-onboarding .onboarding-brand-copy strong, .ob-login-title, body.page-onboarding .onboard-slide h1, body.page-onboarding .onboard-status-card h1) {
    color:#f8fbff !important;
    text-shadow:none !important;
  }
  html[data-theme="dark"] :is(.ob-brand-copy small, body.page-onboarding .onboarding-brand-copy small, .ob-login-subtitle, body.page-onboarding .onboard-slide p, body.page-onboarding .onboard-status-card p) {
    color:#b8c7da !important;
    text-shadow:none !important;
  }
  html[data-theme="dark"] :is(.ob-brand-mark, body.page-onboarding .onboarding-brand-mark, .ob-overlay .ob-icon-circle, body.page-onboarding .onboard-icon, body.page-onboarding .onboard-status-icon, .ob-overlay.ob-overlay--login .ob-login-platform-mark) {
    background:linear-gradient(135deg,#7c3aed,#6d28d9 58%,#1FB5A8) !important;
    color:#fff !important;
    border-color:rgba(192,132,252,.28) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.44) !important;
  }
  html[data-theme="dark"] :is(.ob-brand-mark img, body.page-onboarding .onboarding-brand-mark img) {
    background:rgba(255,255,255,.96) !important;
  }
  html[data-theme="dark"] :is(.ob-overlay .ob-media, body.page-onboarding .onboard-media, .ob-overlay .ob-text, .ob-overlay .ob-copy-card, body.page-onboarding .onboard-copy-card) {
    background:
      radial-gradient(circle at top right,rgba(124,58,237,.18),transparent 38%),
      linear-gradient(145deg,rgba(23,35,54,.96),rgba(11,19,34,.96)) !important;
    border-color:rgba(174,196,226,.2) !important;
    color:#f8fbff !important;
    box-shadow:0 18px 36px rgba(0,0,0,.44) !important;
  }
  html[data-theme="dark"] :is(.ob-overlay .ob-step-chip, body.page-onboarding .onboard-step-chip, .ob-overlay.ob-overlay--login .ob-login-kicker) {
    background:rgba(45,212,191,.16) !important;
    border-color:rgba(94,234,212,.3) !important;
    color:#99f6e4 !important;
  }
  html[data-theme="dark"] :is(.ob-overlay .ob-step-caption, body.page-onboarding .onboard-step-note) {
    background:rgba(124,58,237,.18) !important;
    border-color:rgba(192,132,252,.26) !important;
    color:#d9d0ff !important;
  }
  html[data-theme="dark"] :is(.ob-overlay .ob-dot, body.page-onboarding .onboard-dot) {
    background:rgba(174,196,226,.24) !important;
  }
  html[data-theme="dark"] :is(.ob-overlay .ob-dot--active, body.page-onboarding .onboard-dot.active) {
    background:linear-gradient(90deg,#7c3aed,#2dd4bf) !important;
  }
  html[data-theme="dark"] :is(.ob-overlay .ob-btn-next, .ob-overlay .ob-login-submit, body.page-onboarding .onboard-next, body.page-onboarding .onboard-status-action) {
    background:linear-gradient(135deg,#7c3aed,#6d28d9 54%,#1FB5A8) !important;
    border:1px solid rgba(192,132,252,.28) !important;
    color:#fff !important;
    box-shadow:0 16px 34px rgba(0,0,0,.45) !important;
  }
  html[data-theme="dark"] :is(.ob-overlay .ob-btn-skip, .ob-overlay .ob-login-guest, body.page-onboarding .btn-link.onboard-skip) {
    background:rgba(255,255,255,.04) !important;
    color:#d9d0ff !important;
    border-color:rgba(174,196,226,.22) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.32) !important;
  }
  html[data-theme="dark"] :is(.ob-login-label, .ob-login-input) {
    color:#f8fbff !important;
  }
  html[data-theme="dark"] :is(.ob-login-hint, .ob-login-cooldown, .ob-login-divider) {
    color:#b8c7da !important;
  }
  html[data-theme="dark"] .ob-login-input-wrap {
    background:rgba(11,19,34,.86) !important;
    border-color:rgba(174,196,226,.22) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.34) !important;
  }
  html[data-theme="dark"] .ob-login-input::placeholder {
    color:#7a8aa2 !important;
  }
  html[data-theme="dark"] .ob-login-divider > span:first-child,
  html[data-theme="dark"] .ob-login-divider > span:last-child {
    background:linear-gradient(90deg,transparent,rgba(174,196,226,.22),transparent) !important;
  }