/* =========================
   THEME TOKENS
   ========================= */
:root{
  /* Base colors (Light) */
  --color-bg: #ffffff;
  --color-bg-soft: #f7f8fc;
  --color-text: #0f142b;
  --color-muted: #4c5575;
  --color-border: #e6e8f0;

  /* Indigo / Purple scale */
  --indigo-700: #2a3170;
  --indigo-600: #3a4598;
  --purple-500: #5a46d6;
  --purple-400: #6f5dff;

  /* Primary gradient buttons */
  --btn-grad: linear-gradient(180deg, #5a46d6 0%, #6f5dff 100%);

  /* Global page gradient (Light) */
  --grad-page:
    radial-gradient(850px 420px at 15% -10%, rgba(111,93,255,.18), transparent 60%),
    radial-gradient(720px 380px at 85% 0%, rgba(90,70,214,.12), transparent 65%),
    linear-gradient(180deg, #f5f7ff 0%, #eef1fb 100%);

  /* Radii & Shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 4px 12px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.16);

  /* Typography & Layout */
  --font-sans: "Inter", "Cairo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --container: min(1200px, 100% - 2rem);

  /* Fixed header height */
  --nav-h: 72px;

  /* Hero paddings (can be tuned easily) */
  --hero-pt: clamp(1rem, 3.5vw, 2.25rem); /* قريب من الهيدر */
  --hero-pb: clamp(2.25rem, 7vw, 6rem);
}

html[data-bs-theme="dark"]{
  --color-bg: #090c1a;
  --color-bg-soft: #0b0f1e;
  --color-text: #f4f6ff;
  --color-muted: #9ea7c7;
  --color-border: rgba(255,255,255,.12);

  /* Global page gradient (Dark) */
  --grad-page:
    radial-gradient(1200px 560px at 20% -10%, rgba(111,93,255,.28), transparent 60%),
    radial-gradient(1000px 520px at 85% 0%, rgba(90,70,214,.22), transparent 65%),
    linear-gradient(180deg, #0c1022 0%, #070a17 100%);

  --shadow-sm: 0 4px 12px rgba(0,0,0,.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,.40);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.50);
}

/* =========================
   BASE
   ========================= */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--color-text);
  /* نحجز مساحة للهيدر المثبّت */
  padding-top: var(--nav-h);
}

/* حاوية عامة متناسقة */
.container{ width: var(--container); margin-inline:auto; }

/* Topbar (glass) */
.topbar{
  position: fixed; inset-inline:0; top:0; z-index:1100;
  height: var(--nav-h); display:flex; align-items:center;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
  transition: background .25s, box-shadow .25s;
}
html[data-bs-theme="dark"] .topbar{ background: rgba(12,16,40,.36); }
.topbar.is-scrolled{ box-shadow: var(--shadow-md); }

/* =========================
   GLOBAL PAGE BACKGROUND
   ========================= */
.page-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--grad-page);
  background-size: 200% 200%;
  animation: pageBgShift 18s ease-in-out infinite alternate;
  will-change: background-position;
}
.page-bg::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 60% at 50% -20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(38% 30% at 85% 0%, rgba(111,93,255,.10), transparent 60%);
  mix-blend-mode: screen;
  opacity:.6;
}
@keyframes pageBgShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

/* =========================
   HERO (Unified)
   ========================= */
/* ألغِ أي py-5/py-lg-6 من Bootstrap أو استخدم هذا override */
.hero[class*="py-"]{ padding:0 !important; }

.hero{
  /* قريب من الهيدر + مريح أسفل */
  padding-block-start: var(--hero-pt);
  padding-block-end:   var(--hero-pb);

  /* ارتفاع مرن */
  min-height: clamp(480px, 70vh, 860px);

  /* سحب بسيط للأعلى لتعويض الـ body padding-top إن رغبت */
  margin-top: calc(-1 * var(--nav-h) + 14px);

  /* الخلفية تأتي من .page-bg، لذا نخلي السكشن شفاف */
  background: transparent;
  border: 0;
  position: relative;
}

/* تخطيط النص/الصورة */
.hero-grid{ row-gap: 2rem; }
.hero-copy{ order:2 }
.hero-media{ order:1 }
@media (min-width: 992px){
  .hero-copy{ order:1 }
  .hero-media{ order:2 }
}

/* صورة الهيرو (بارالاكس + طفو) */
.hero-visual{
  max-width: min(560px, 92%);
  width: 100%;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.20));
  transform: translateY(calc(var(--ty,0px) + var(--floatY,0px))) scale(var(--scale,.98));
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
  animation: hero-bob 6s ease-in-out infinite;
}
html[data-bs-theme="dark"] .hero-visual{ filter: drop-shadow(0 24px 50px rgba(0,0,0,.5)); }
.hero-visual.in-view{ --scale:1; opacity:1; }
@keyframes hero-bob{ 0%{--floatY:-2px} 50%{--floatY:2px} 100%{--floatY:-2px} }

/* نصوص الهيرو (خفيفة ومتحركة) */
.hero-title{
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
  font-size: clamp(2.1rem, 5.6vw, 4.1rem);
  line-height: 1.06;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp .9s ease forwards;
}
html[data-bs-theme="dark"] .hero-title{ color:#f4f6ff; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.hero-sub{
  font-weight: 400; color: var(--color-muted);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  opacity: 0; transform: translateY(18px);
  animation: fadeUp .9s ease forwards; animation-delay: .25s;
}
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* CTA Buttons */
.btn.btn-primary, .nx-btn--primary{
  background: var(--btn-grad);
  border: 0; color:#fff;
  box-shadow: 0 12px 28px rgba(111,93,255,.28);
}
.btn.btn-primary:hover, .nx-btn--primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 18px 45px rgba(111,93,255,.40);
}
.btn.btn-outline-secondary, .nx-btn--outline{
  color: var(--color-text);
  border-color: rgba(0,0,0,.12);
  background: transparent;
}
.btn.btn-outline-secondary:hover, .nx-btn--outline:hover{
  color: var(--color-text);
  border-color: var(--purple-400);
  box-shadow: 0 10px 28px rgba(111,93,255,.18);
}
html[data-bs-theme="dark"] .btn.btn-outline-secondary,
html[data-bs-theme="dark"] .nx-btn--outline{
  color: #d7dbef; border-color: rgba(255,255,255,.18);
}
html[data-bs-theme="dark"] .btn.btn-outline-secondary:hover,
html[data-bs-theme="dark"] .nx-btn--outline:hover{
  color: #fff; border-color: #6f5dff; box-shadow: 0 10px 28px rgba(111,93,255,.25);
}

/* Float pulse */
@keyframes floatPulse{ 0%{transform:translateY(0)} 50%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
.float-pulse{ animation: floatPulse 2.6s ease-in-out infinite; }
.float-pulse:hover{ animation-play-state: paused; }

/* =========================
   SHOWCASE (نفس روح الهيرو)
   ========================= */
.hero--showcase{
  background: transparent;
  border: 0;
  margin-top: -1px;             /* يزيل أي فاصل بصري مع السكشن السابق */
  padding-block-start: var(--hero-pt);
  padding-block-end:   var(--hero-pb);
}

.showcase-stage{
  position: relative;
  min-height: clamp(380px, 48vw, 520px);
}

/* الصورة الكبيرة */
.showcase-visual{
  max-width: clamp(420px, 62vw, 980px);
  width: 100%;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.22));
  transform: translateY(calc(var(--ty, 0px) + var(--floatY, 0px))) scale(var(--scale, .98));
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
  animation: hero-bob 6s ease-in-out infinite;
}
.showcase-visual.in-view{ --scale: 1; opacity: 1; }

/* زخارف جانبية */
.showcase-orb{
  position: absolute;
  width: clamp(60px, 8vw, 110px);
  opacity: .9;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.35));
  animation: orbFloat 7s ease-in-out infinite;
}
.orb--left{  left: 6%;  top: 52%; animation-delay: .2s; }
.orb--right{ right: 6%; top: 18%; animation-delay: .6s; }
@keyframes orbFloat{
  0%  { transform: translateY(-6px) rotate(-2deg); }
  50% { transform: translateY( 6px) rotate( 2deg); }
  100%{ transform: translateY(-6px) rotate(-2deg); }
}

/* Badge مساعدة */
.chip-help{
  position: absolute;
  inset-inline-end: 0;
  top: 10px;
  z-index: 2;
  background: rgba(18, 36, 24, .55);
  color: #eaf6ea;
  border: 1px solid rgba(255,255,255,.18);
  padding: .55rem .9rem;
  font-weight: 700;
  border-radius: 999px;
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
}
html[data-bs-theme="dark"] .chip-help{
  background: rgba(24, 40, 28, .45);
  color: #eaf6ea;
}
.chip-help:hover{ text-decoration: none; filter: brightness(1.05); }

/* =========================
   ACCESSIBILITY
   ========================= */
@media (prefers-reduced-motion: reduce){
  .page-bg, .float-pulse,
  .hero-visual, .showcase-visual,
  .showcase-orb{ animation: none !important; }
  .hero-title, .hero-sub{ animation: none !important; opacity:1 !important; transform:none !important; }
}




                  /* البطاقه 2 */

                  /* ===== Palette المشتقة من NUX-T (تعمل مع التوكنات الموجودة لديك) ===== */
:root{
  --nux-primary: #5a46d6;
  --nux-primary-2: #6f5dff;
  --nux-ink: #0f142b;
  --nux-ink-soft: #14172a;
  --nux-text: var(--color-text);
  --nux-muted: var(--color-muted);
}

/* ===== Section wrapper ===== */
.nux-intro{
  position: relative;
  padding-block: clamp(2rem, 7vw, 6rem);
  margin-top: calc(-1 * var(--nav-h) + 12px); /* قريب جداً من الهيدر */
  isolation: isolate;
  /* الخلفية العامة تأتي من .page-bg التي أضفناها سابقاً */
}

/* Watermark للشعار */
.nux-wmark{
  position: absolute;
  inset-inline-end: 0;
  top: clamp(6px, 2vw, 14px);
  width: min(42vw, 520px);
  opacity: .10;
  filter: blur(.4px) saturate(120%);
  pointer-events: none;
  z-index: 0;
}
.nux-wmark img{ width: 100%; height: auto; object-fit: contain; }

/* Visual */
.nux-visual{
  max-width: min(560px, 92%);
  width: 100%;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.22));
  transform: translateY(calc(var(--ty,0px) + var(--floatY,0px))) scale(var(--scale,.98));
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
  animation: nux-bob 6s ease-in-out infinite;
  z-index: 1;
}
.nux-visual.in-view{ --scale: 1; opacity: 1; }
@keyframes nux-bob{ 0%{--floatY:-2px} 50%{--floatY:2px} 100%{--floatY:-2px} }
html[data-bs-theme="dark"] .nux-visual{ filter: drop-shadow(0 24px 50px rgba(0,0,0,.5)); }

/* Title & sub */
.nux-title{
  font-weight: 800;
  font-size: clamp(2rem, 5.8vw, 3.8rem);
  line-height: 1.06;
  margin: 0;
  color: var(--nux-text);
  opacity: 0; transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}
.nux-title .brand{
  color: var(--nux-primary-2);
  text-shadow: 0 2px 12px rgba(111,93,255,.22);
}
.nux-sub{
  margin-top: .9rem;
  color: var(--nux-muted);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  opacity: 0; transform: translateY(18px);
  transition: opacity .65s ease .12s, transform .65s ease .12s;
}
.reveal.in-view{ opacity:1; transform:none; }

/* Bubbles */
.bubble{
  position: absolute;
  display:inline-flex; align-items:center;
  gap:.5rem; padding:.65rem .9rem;
  border-radius: 14px;
  color:#fff; font-weight: 700;
  box-shadow: 0 14px 35px rgba(0,0,0,.24);
  z-index: 2;
  transform: translate3d(0,0,0);
}
.bubble span{ position: relative; z-index: 2; }
.bubble i{
  content:""; display:block; width:0; height:0;
  border:8px solid transparent;
  position: absolute; bottom: -6px; inset-inline-start: 22px;
  transform: rotate(30deg);
  opacity: .85;
}

/* ألوان الفقاعات */
.bubble--blue{ background: linear-gradient(180deg,#0f3a8d,#0b2b6a); }
.bubble--blue i{ border-top-color:#0b2b6a; }

.bubble--pink{ background: linear-gradient(180deg,#c4b5f1,#6213c2); }
.bubble--pink i{ border-top-color:#4d08a8; }

.bubble--violet{ background: linear-gradient(180deg,#3f2a93,#2a1972); }
.bubble--violet i{ border-top-color:#2a1972; }

/* أماكن الفقاعات (عدلها كما تحب) */
.nux-intro .bubble--blue  { inset-inline-start: clamp(10px,6vw,120px); top: clamp(60px,12vw,160px); }
.nux-intro .bubble--pink  { inset-inline-end:  clamp(10px,6vw,120px); top: clamp(340px,26vw,420px); }
.nux-intro .bubble--violet{ inset-inline-start: clamp(40px,16vw,360px); top: clamp(360px,28vw,480px); }

/* Twinkles (نجوم) */
.twinkle{
  position: absolute; width: 18px; height: 18px;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 2px, transparent 3px),
    conic-gradient(from 0deg, rgba(255,255,255,.6), transparent 35% 65%, rgba(255,255,255,.6));
  filter: drop-shadow(0 0 10px rgba(255,255,255,.6));
  animation: twk 2.2s ease-in-out infinite alternate;
  opacity:.85; z-index: 1;
}
.twinkle--a{ inset-inline-start: clamp(18px, 8vw, 140px); top: clamp(40px, 8vw, 120px); }
.twinkle--b{ inset-inline-end:  clamp(30px, 9vw, 160px); top: clamp(70px,10vw, 150px); }
.twinkle--c{ inset-inline-start: clamp(44px,18vw,360px); top: clamp(520px,36vw,640px); }
@keyframes twk{
  0%{ transform: scale(1) rotate(0); opacity:.6; }
  100%{ transform: scale(1.15) rotate(35deg); opacity:1; }
}

/* Buttons already themed in your CSS; keep float-pulse */
@keyframes floatPulse{ 0%{transform:translateY(0)} 50%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
.float-pulse{ animation: floatPulse 2.6s ease-in-out infinite; }
.float-pulse:hover{ animation-play-state: paused; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nux-visual, .bubble, .twinkle, .float-pulse{ animation:none !important; transition:none !important; }
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}
/* ===== NUX-T Intro Section ===== */

.nx-intro-section{
  position: relative;
  isolation: isolate;
}

/* بطاقة زجاجية */
.nx-intro-card{
  position: relative;
  border-radius: 22px;
  padding: clamp(1.25rem, 3vw, 2rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* تكيّف للوضع النهاري */
html:not([data-bs-theme="dark"]) .nx-intro-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Eyebrow */
.nx-intro-eyebrow{
  font-weight: 700;
  color: var(--color-text);
}

/* العنوان + إبراز البراند */
.nx-intro-title{
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem);
  color: var(--color-text);
}

/* إبراز الاسم بنص متدرج */
.nx-hl{
  background: linear-gradient(90deg, #6f5dff, #a58cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.nx-hl::after{
  content:"";
  position: absolute;
  inset-inline: 0;
  bottom: .06em;
  height: .22em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(111,93,255,.18), rgba(111,93,255,.00));
  pointer-events: none;
}

/* الفقرة التقديمية */
.nx-intro-lead{
  color: var(--color-muted);
  font-size: clamp(1.02rem, 2.2vw, 1.25rem);
}

/* قائمة مزايا بعلامة صح لطيفة */
.nx-intro-list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .65rem;
  font-size: clamp(.98rem, 2vw, 1.08rem);
}
.nx-intro-list li{
  position: relative;
  padding-inline-start: 1.8rem;
  color: var(--color-text);
}
.nx-intro-list li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0.2rem;
  top: .25rem;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--btn-grad);
  box-shadow: 0 6px 16px rgba(111,93,255,.35);
  /* علامة الصح */
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path d="M7.8 13.4 4.4 10l-1.4 1.4 4.8 4.8L17 7.0l-1.4-1.4z"/></svg>')
    center / 70% 70% no-repeat;
  mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path d="M7.8 13.4 4.4 10l-1.4 1.4 4.8 4.8L17 7.0l-1.4-1.4z"/></svg>')
    center / 70% 70% no-repeat;
}

/* زخارف توهج خفيفة حول البطاقة */
.nx-orb{
  position: absolute;
  width: clamp(120px, 20vw, 260px);
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(26px);
  opacity: .35;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(111,93,255,.35), rgba(111,93,255,0));
  animation: orbFloat 9s ease-in-out infinite;
}
.nx-orb.orb-a{ inset-inline-start: -4%; top: -6%; }
.nx-orb.orb-b{ inset-inline-end: -6%; bottom: -10%; animation-delay: .6s; }

@keyframes orbFloat{
  0%{ transform: translateY(-6px) }
  50%{ transform: translateY(8px) }
  100%{ transform: translateY(-6px) }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .nx-orb, .float-pulse{ animation: none !important; }
}

/* =======================================================
   خلفية مضيئة ناعمة لصفحة Home - خلف قسم الـHero فقط
   ======================================================= */
body.home .hero {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* الشريط أو الضوء الدائري المتحرك */
body.home .hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 120, 255, 0.1),
    rgba(0, 255, 255, 0.18),
    rgba(255, 255, 255, 0.12),
    rgba(0, 120, 255, 0.1)
  );
  filter: blur(80px);
  animation: spin-glow 18s linear infinite;
  opacity: 0.65;
}

/* الحركة */
@keyframes spin-glow {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1); }
}

/* الوضع الداكن */
html[data-bs-theme="dark"] body.home .hero::before {
  background: conic-gradient(
    from 0deg,
    rgba(0, 120, 255, 0.16),
    rgba(90, 170, 255, 0.12),
    rgba(255, 255, 255, 0.08),
    rgba(0, 120, 255, 0.16)
  );
  opacity: 0.55;
}


/* الزر العادي */
.menu-card{
  display:flex;
  align-items:center;
  gap:8px;
  padding:.65rem 1rem;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  color:var(--fg,#fff);
  background:linear-gradient(135deg,#6b2bd8,#8a5ae6);
  box-shadow:0 12px 28px rgba(107,43,216,.28);
  transition:transform .18s ease, box-shadow .25s ease;
}
.menu-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(107,43,216,.32);
}
html[data-bs-theme="light"] .menu-card{
  color:#fff;
}

/* حتى يكون زر الخروج نفس المظهر */
.logout-form{
  margin:0;
}
.logout-btn{
  all:unset;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-weight:800;
  color:inherit;
}
.logout-btn i{
  font-size:1.2rem;
}



/* ========== Mode Toggle — Glassy Neo Look ========== */
.mode-toggle{
  --h: 30px;
  --w: 60px;
  --pad: 5px;
  --thumb: calc(var(--h) - var(--pad)*2);
  --ring-dark: rgba(255,255,255,.14);
  --ring-light: rgba(11,15,26,.14);

  position: relative;
  inline-size: var(--w);
  block-size: var(--h);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease;
}

.mode-toggle:active { transform: scale(.98); }

/* المسار الزجاجي */
.mode-toggle .track{
  position: absolute; inset:0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 20px rgba(0,0,0,.20);
  border: 1px solid var(--ring-dark);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* الإبهام المتوهّج */
.mode-toggle .thumb{
  position: absolute;
  top: 50%;
  left: var(--pad);
  inline-size: var(--thumb);
  block-size: var(--thumb);
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(90% 90% at 30% 30%, #fff 0%, #ddd 45%, #bbb 100%);
  box-shadow:
    0 6px 16px rgba(0,0,0,.25),
    0 0 0 0 rgba(107,43,216,.0),
    inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease,
             background .35s ease;
  will-change: transform;
}

/* الأيقونات */
.mode-toggle .icon-moon,
.mode-toggle .icon-sun{
  font-size: 14px;
  line-height: 1;
  opacity: .9;
  transition: opacity .25s ease;
  position: relative;
  z-index: 1;
}

.mode-toggle .icon-moon { margin-inline-start: 2px; }
.mode-toggle .icon-sun  { margin-inline-end: 2px;  }

/* ===== Light (افتراضي) ===== */
html[data-bs-theme="light"] .mode-toggle .track{
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
  border-color: var(--ring-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 22px rgba(11,15,26,.10);
}
html[data-bs-theme="light"] .mode-toggle .thumb{
  transform: translate(calc(var(--w) - var(--thumb) - var(--pad)*2), -50%);
  background: radial-gradient(90% 90% at 30% 30%, #111 0%, #222 50%, #333 100%);
  box-shadow:
    0 8px 18px rgba(11,15,26,.25),
    0 0 0 6px rgba(255,215,100,.08),
    inset 0 0 0 1px rgba(255,255,255,.25);
}
html[data-bs-theme="light"] .mode-toggle .icon-moon{ opacity: 0; }
html[data-bs-theme="light"] .mode-toggle .icon-sun { opacity: 1; }

/* ===== Dark ===== */
html[data-bs-theme="dark"] .mode-toggle .track{
  background:
    linear-gradient(180deg, rgba(20,24,36,.66), rgba(12,16,28,.50));
  border-color: var(--ring-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 26px rgba(0,0,0,.35);
}
html[data-bs-theme="dark"] .mode-toggle .thumb{
  transform: translate(0, -50%);
  background: radial-gradient(90% 90% at 30% 30%, #fff 0%, #ddd 45%, #bbb 100%);
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    0 0 0 6px rgba(107,43,216,.12),
    inset 0 0 0 1px rgba(255,255,255,.22);
}
html[data-bs-theme="dark"] .mode-toggle .icon-moon{ opacity: 1; }
html[data-bs-theme="dark"] .mode-toggle .icon-sun { opacity: 0; }

/* Hover/focus أنيق */
.mode-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(138,90,230,.35);
  border-radius: 999px;
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .mode-toggle, .mode-toggle *{ transition: none !important; }
} 




.brand-circle{
  display:grid; place-items:center;
  inline-size:52px; block-size:52px;
  border-radius:50%;
  background:rgb(255, 255, 255); /* أبيض غامق قليل */
  box-shadow:0 6px 14px rgba(0,0,0,.15);
  transition:background .4s ease, box-shadow .4s ease;
}
.brand-circle img{
  width:auto; height:34px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
html[data-bs-theme="dark"] .brand-circle{
  background:rgba(255,255,255,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}




/* الاشعارات */


/* ===== NUX-T Phone-like Top Notification ===== */
.nux-toast{
  /* مقاسات وألوان أساسية */
  --w: min(420px, 94vw);
  --pad: 16px;
  --radius: 18px;

  /* ألوان الزجاج/النص (تتبدّل بالوضع الليلي أدناه) */
  --glass-bg: rgba(255,255,255,.82);
  --glass-br: rgba(0,0,0,.10);
  --txt: #0f142b;
  --muted: #4c5575;

  position: fixed;
  inset-block-start: 14px;              /* أعلى الشاشة */
  inset-inline: 0;                      /* نوسّط أفقياً */
  margin-inline: auto;
  z-index: 1200;
  width: var(--w);
  border-radius: var(--radius);
  padding: calc(var(--pad) + 2px) var(--pad) calc(var(--pad) + 8px);
  color: var(--txt);

  /* زجاجية + ظل */
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) ,
    var(--glass-bg);
  border: 1px solid var(--glass-br);
  box-shadow: 0 22px 56px rgba(0,0,0,.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  /* يبدأ خارج الأعلى كالـ notification */
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform .65s cubic-bezier(.22,.61,.36,1),
    opacity   .45s ease;

  /* خط فاصل علوي رفيع كـ status bar */
  overflow: hidden;
}

/* حافة متدرّجة جذابة */
.nux-toast::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(107,43,216,.18), rgba(138,90,230,.12)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* هالة توهج لطيفة */
.nux-toast::after{
  content:"";
  position:absolute; inset: -40% -10% auto -10%;
  height: 120%;
  background: radial-gradient(60% 40% at 50% 0%, rgba(111,93,255,.25), transparent 60%);
  filter: blur(28px);
  pointer-events:none;
}

/* الحالة المفتوحة */
.nux-toast.is-open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* الوضع الليلي */
html[data-bs-theme="dark"] .nux-toast{
  --glass-bg: rgba(14,18,34,.80);
  --glass-br: rgba(255,255,255,.14);
  --txt: #f4f6ff;
  --muted: #9ea7c7;
  box-shadow: 0 26px 64px rgba(0,0,0,.52);
}
html[data-bs-theme="dark"] .nux-toast::after{
  background: radial-gradient(60% 40% at 50% 0%, rgba(111,93,255,.35), transparent 65%);
}

/* الرأس: أيقونة + عنوان */
.nux-toast__head{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}
.nux-toast__badge{
  inline-size: 46px; block-size: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(107,43,216,.22), rgba(138,90,230,.12));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 10px 24px rgba(0,0,0,.18);
}
.nux-toast__badge img{
  width: 30px; height: 30px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.nux-toast__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(1.02rem, 2.6vw, 1.18rem);
}

/* النص */
.nux-toast__lead{
  margin: 4px 0 12px;
  color: var(--muted);
  line-height: 1.75;
}

/* الأزرار */
.nux-toast__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.nux-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border-radius: 999px; padding: .55rem 1rem;
  font-weight: 800; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.nux-btn--primary{
  color:#fff;
  background: var(--btn-grad, linear-gradient(180deg, #5a46d6 0%, #6f5dff 100%));
  box-shadow: 0 12px 28px rgba(111,93,255,.28);
}
.nux-btn--primary:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.nux-btn--ghost{
  background: transparent;
  color: inherit;
  border-color: rgba(0,0,0,.15);
}
html[data-bs-theme="dark"] .nux-btn--ghost{ border-color: rgba(255,255,255,.20); }

/* زر الإغلاق */
.nux-toast__close{
  position: absolute; inset-block-start: 6px; inset-inline-end: 8px;
  background: transparent; border: 0; color: inherit;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  opacity: .75; transition: opacity .2s ease;
}
.nux-toast__close:hover{ opacity: 1; }

/* شريط تقدّم اختياري (Auto-dismiss) */
.nux-toast__progress{
  position:absolute; inset-inline: 8px; inset-block-end: 6px;
  height: 3px; border-radius: 999px;
  background: rgba(0,0,0,.12);
  overflow:hidden;
}
html[data-bs-theme="dark"] .nux-toast__progress{ background: rgba(255,255,255,.18); }
.nux-toast__progress > i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, #5a46d6, #6f5dff);
  transition: width linear;
  will-change: width;
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .nux-toast{ transition: none !important; }
  .nux-toast__progress > i{ transition: none !important; }
}



/* videojjj */