/* ============================================================
   Elzem — Neon Holographic System (Optional Layer)
   يتم تحميله بعد app.css ليمتدّه ولا يكسره
   كل القيم قابلة للتحكم من admin/settings_design.php
   ============================================================ */

@property --rb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ===== 1) متغيرات قابلة للتحكم (defaults) ===== */
:root {
  --neon-pink:    #ff2d92;
  --neon-violet:  #a855f7;
  --neon-cyan:    #22d3ee;
  --neon-lime:    #84cc16;
  --neon-amber:   #fbbf24;
  --neon-rose:    #fb7185;

  /* شدّة التوهج (0-1) */
  --neon-intensity: 1;

  /* مدة دوران قوس القزح */
  --neon-rotate-duration: 6s;

  /* مدة لمعان الأزرار */
  --neon-shimmer-duration: 3s;

  /* تفعيل الخلفية المتحركة */
  --neon-aurora-on: 1;

  /* تفعيل الحدود المتوهجة */
  --neon-rainbow-on: 1;

  /* تفعيل لمعان الأزرار */
  --neon-glossy-on: 1;

  /* تفعيل الأنميشن */
  --neon-animation-on: 1;

  /* تفعيل النص الهولوغرافي */
  --neon-holotext-on: 1;

  /* توهج النص */
  --neon-text-glow: 1;

  /* لون الهيرو الرئيسي */
  --hero-color-1: #ff2d92;
  --hero-color-2: #a855f7;
  --hero-color-3: #22d3ee;

  /* نص الهيرو */
  --hero-title-ar: '';
  --hero-title-en: '';
  --hero-subtitle-ar: '';
  --hero-subtitle-en: '';
}

/* ===== 2) Aurora Background ===== */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, color-mix(in srgb, var(--neon-pink) 35%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 20%, color-mix(in srgb, var(--neon-violet) 35%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 45% at 70% 75%, color-mix(in srgb, var(--neon-cyan) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 40% at 25% 80%, color-mix(in srgb, var(--neon-lime) 25%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 35% at 50% 50%, color-mix(in srgb, var(--neon-amber) 20%, transparent), transparent 70%);
  filter: blur(40px);
  opacity: calc(0.6 * var(--neon-intensity) * var(--neon-aurora-on));
  animation: neon-aurora 18s ease-in-out infinite;
  will-change: transform, opacity;
}

[data-theme="light"] body::before {
  opacity: calc(0.25 * var(--neon-intensity) * var(--neon-aurora-on));
}

@keyframes neon-aurora {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%      { transform: translate(3%, -2%) rotate(2deg) scale(1.05); }
  50%      { transform: translate(-2%, 3%) rotate(-2deg) scale(1.08); }
  75%      { transform: translate(-3%, -2%) rotate(1deg) scale(1.03); }
}

/* ===== 3) Rainbow Border Wrapper ===== */
.rb-wrap {
  position: relative;
  border-radius: var(--radius);
  padding: 2px;
  background: conic-gradient(
    from var(--rb-angle),
    var(--neon-pink) 0%,
    var(--neon-violet) 16%,
    var(--neon-cyan) 33%,
    var(--neon-lime) 50%,
    var(--neon-amber) 66%,
    var(--neon-rose) 83%,
    var(--neon-pink) 100%
  );
  animation: neon-rb-rotate var(--neon-rotate-duration) linear infinite;
  isolation: isolate;
  opacity: var(--neon-rainbow-on);
}
.rb-wrap::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: inherit;
  filter: blur(12px);
  opacity: calc(0.55 * var(--neon-intensity));
  z-index: -1;
  animation: neon-rb-rotate var(--neon-rotate-duration) linear infinite;
}
.rb-inner {
  position: relative;
  border-radius: calc(var(--radius) - 2px);
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  height: 100%;
  width: 100%;
}

@keyframes neon-rb-rotate {
  to { --rb-angle: 360deg; }
}

/* ===== 4) Glossy Button ===== */
.btn-glossy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-violet) 50%, var(--neon-cyan) 100%);
  background-size: 200% 200%;
  animation: neon-gradient-shift 4s ease infinite;
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--neon-pink) calc(45% * var(--neon-intensity)), transparent),
    0 0 40px color-mix(in srgb, var(--neon-violet) calc(35% * var(--neon-intensity)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  isolation: isolate;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  padding: .9rem 1.6rem;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 1.02rem;
}
.btn-glossy:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 10px 36px color-mix(in srgb, var(--neon-pink) calc(60% * var(--neon-intensity)), transparent),
    0 0 60px color-mix(in srgb, var(--neon-violet) calc(50% * var(--neon-intensity)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-glossy::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.btn-glossy::before {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 75%;
  height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  animation: neon-shimmer var(--neon-shimmer-duration) ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
  opacity: var(--neon-glossy-on);
}

.btn-glossy-rose {
  background: linear-gradient(135deg, var(--neon-rose) 0%, var(--neon-pink) 50%, var(--neon-violet) 100%);
  background-size: 200% 200%;
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--neon-rose) calc(50% * var(--neon-intensity)), transparent),
    0 0 40px color-mix(in srgb, var(--neon-pink) calc(40% * var(--neon-intensity)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-glossy-cyan {
  background: linear-gradient(135deg, var(--neon-cyan) 0%, #3b82f6 50%, var(--neon-violet) 100%);
  background-size: 200% 200%;
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--neon-cyan) calc(50% * var(--neon-intensity)), transparent),
    0 0 40px color-mix(in srgb, #3b82f6 calc(40% * var(--neon-intensity)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Override default .btn when neon-glossy-on */
:root[style*="--neon-glossy-on: 1"] .btn:not(.btn--ghost):not(.btn--danger):not(.btn--signal) {
  background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-violet) 50%, var(--neon-cyan) 100%);
  background-size: 200% 200%;
  animation: neon-gradient-shift 4s ease infinite;
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--neon-pink) calc(45% * var(--neon-intensity)), transparent),
    0 0 40px color-mix(in srgb, var(--neon-violet) calc(35% * var(--neon-intensity)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
:root[style*="--neon-glossy-on: 1"] .btn:not(.btn--ghost):not(.btn--danger):not(.btn--signal)::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
  border-radius: inherit;
  pointer-events: none;
}

@keyframes neon-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes neon-shimmer {
  0%         { left: -150%; }
  60%, 100%  { left: 200%; }
}

/* ===== 5) Holographic Text ===== */
.holo-text {
  background: linear-gradient(
    90deg,
    var(--neon-pink) 0%,
    var(--neon-violet) 25%,
    var(--neon-cyan) 50%,
    var(--neon-lime) 75%,
    var(--neon-amber) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: neon-holo-flow 6s ease infinite;
  opacity: var(--neon-holotext-on);
}

@keyframes neon-holo-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ===== 6) Neon Glow Utilities ===== */
.neon-glow-pink {
  box-shadow:
    0 0 8px color-mix(in srgb, var(--neon-pink) calc(60% * var(--neon-intensity)), transparent),
    0 0 24px color-mix(in srgb, var(--neon-pink) calc(40% * var(--neon-intensity)), transparent),
    0 0 48px color-mix(in srgb, var(--neon-pink) calc(20% * var(--neon-intensity)), transparent);
}
.neon-glow-violet {
  box-shadow:
    0 0 8px color-mix(in srgb, var(--neon-violet) calc(60% * var(--neon-intensity)), transparent),
    0 0 24px color-mix(in srgb, var(--neon-violet) calc(40% * var(--neon-intensity)), transparent),
    0 0 48px color-mix(in srgb, var(--neon-violet) calc(20% * var(--neon-intensity)), transparent);
}
.neon-glow-cyan {
  box-shadow:
    0 0 8px color-mix(in srgb, var(--neon-cyan) calc(60% * var(--neon-intensity)), transparent),
    0 0 24px color-mix(in srgb, var(--neon-cyan) calc(40% * var(--neon-intensity)), transparent),
    0 0 48px color-mix(in srgb, var(--neon-cyan) calc(20% * var(--neon-intensity)), transparent);
}

.text-neon-pink {
  color: var(--neon-pink);
  text-shadow: 0 0 8px color-mix(in srgb, var(--neon-pink) 70%, transparent), 0 0 18px color-mix(in srgb, var(--neon-pink) 40%, transparent);
  opacity: calc(0.5 + 0.5 * var(--neon-text-glow));
}
.text-neon-cyan {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px color-mix(in srgb, var(--neon-cyan) 70%, transparent), 0 0 18px color-mix(in srgb, var(--neon-cyan) 40%, transparent);
  opacity: calc(0.5 + 0.5 * var(--neon-text-glow));
}
.text-neon-violet {
  color: var(--neon-violet);
  text-shadow: 0 0 8px color-mix(in srgb, var(--neon-violet) 70%, transparent), 0 0 18px color-mix(in srgb, var(--neon-violet) 40%, transparent);
  opacity: calc(0.5 + 0.5 * var(--neon-text-glow));
}

/* ===== 7) Star field (decorative) ===== */
.star-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.star-field::before,
.star-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, #fff, transparent),
    radial-gradient(1px 1px at 80% 20%, #fff, transparent),
    radial-gradient(2px 2px at 30% 80%, #fff, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent),
    radial-gradient(1px 1px at 90% 60%, #fff, transparent),
    radial-gradient(2px 2px at 10% 60%, #fff, transparent),
    radial-gradient(1px 1px at 70% 90%, #fff, transparent);
  background-size: 250px 250px;
  background-repeat: repeat;
  opacity: 0.4;
  animation: neon-twinkle 4s ease-in-out infinite;
}
.star-field::after {
  background-size: 180px 180px;
  background-position: 50px 50px;
  opacity: 0.25;
  animation-delay: 2s;
}
[data-theme="light"] .star-field::before,
[data-theme="light"] .star-field::after { 
  opacity: 0.35;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--neon-violet) 50%, transparent));
}

@keyframes neon-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.1); }
}

/* ===== 8) Floating animation ===== */
.neon-float {
  animation: neon-float 6s ease-in-out infinite;
}
.neon-float-slow {
  animation: neon-float 9s ease-in-out infinite;
}
@keyframes neon-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

/* ===== 9) Pulsing glow ===== */
.neon-pulse-glow {
  animation: neon-pulse-glow 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes neon-pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--neon-pink) calc(60% * var(--neon-intensity)), transparent),
      0 0 0 1px color-mix(in srgb, var(--neon-pink) calc(40% * var(--neon-intensity)), transparent);
  }
  50% {
    box-shadow:
      0 0 0 18px transparent,
      0 0 0 4px color-mix(in srgb, var(--neon-violet) calc(50% * var(--neon-intensity)), transparent);
  }
}

/* ===== 10) Section: Hero ===== */
.neon-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 3rem 1.1rem;
}
.neon-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}
.neon-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--neon-pink) 18%, transparent), transparent 50%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--neon-violet) 18%, transparent), transparent 50%),
    linear-gradient(to top, var(--bg) 0%, transparent 60%),
    linear-gradient(to right, var(--bg) 0%, transparent 80%);
  z-index: 1;
}
/* أشكال زخرفية عائمة */
.neon-hero__shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(2px);
}
.neon-hero__shape--1 {
  width: 280px; height: 280px;
  top: -100px; left: -80px;
  background: radial-gradient(circle, color-mix(in srgb, var(--neon-pink) 30%, transparent), transparent 70%);
  animation: neon-float-shape 9s ease-in-out infinite;
}
.neon-hero__shape--2 {
  width: 200px; height: 200px;
  bottom: -60px; left: 30%;
  background: radial-gradient(circle, color-mix(in srgb, var(--neon-cyan) 30%, transparent), transparent 70%);
  animation: neon-float-shape 11s ease-in-out infinite reverse;
}
.neon-hero__shape--3 {
  width: 180px; height: 180px;
  top: 20%; right: 40%;
  background: radial-gradient(circle, color-mix(in srgb, var(--neon-violet) 25%, transparent), transparent 70%);
  animation: neon-float-shape 7s ease-in-out infinite;
  animation-delay: -3s;
}
@keyframes neon-float-shape {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(20px,-30px) scale(1.1); }
  66%     { transform: translate(-15px,20px) scale(0.95); }
}
/* شبكة الهيرو بعمودين (نص + بوابة) */
.neon-hero__grid {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.neon-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding: 0 1.4rem;
}
.neon-hero__content--left {
  text-align: start;
  padding: 0 1rem;
  margin: 0;
  max-width: none;
}
.neon-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--neon-pink) 40%, transparent);
  background: color-mix(in srgb, var(--neon-pink) 12%, transparent);
  color: var(--neon-pink);
  font-size: .82rem;
  font-weight: 700;
  margin-block-end: 1.2rem;
  backdrop-filter: blur(10px);
}
.neon-hero__title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin-block-end: 1rem;
}
.neon-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.neon-hero__content--left .neon-hero__subtitle {
  margin-inline: 0;
}
.neon-hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.neon-hero__content--left .neon-hero__actions {
  justify-content: flex-start;
}
.neon-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-block-start: 3rem;
  max-width: 600px;
  margin-inline: auto;
}
.neon-hero__content--left .neon-hero__stats {
  margin-inline: 0;
  max-width: 540px;
}
.neon-hero__stat-value {
  font-size: 2rem;
  font-weight: 900;
}
.neon-hero__stat-label {
  font-size: .8rem;
  color: var(--ink-faint);
  font-weight: 600;
  margin-block-start: .25rem;
}

/* ===== 10b) HoloPortal — البوابة الدائرية المتحركة (admin-controlled) ===== */
.neon-portal {
  position: relative;
  z-index: 2;
  width: var(--hero-portal-size, 420px);
  height: var(--hero-portal-size, 420px);
  margin: 0 auto;
  max-width: 100%;
  display: grid;
  place-items: center;
}
/* إخفاء البوابة عند التعطيل من الإعدادات */
:root[style*="--hero-portal-enabled: 0"] .neon-portal { display: none !important; }
.neon-portal[aria-hidden="true"] { display: none !important; }

.neon-portal__halo {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--neon-pink) 35%, transparent) 0%, transparent 65%);
  filter: blur(20px);
  animation: neon-portal-halo 4s ease-in-out infinite;
}
@keyframes neon-portal-halo {
  0%,100% { transform: scale(1); opacity: .55; }
  50%     { transform: scale(1.15); opacity: 1; }
}

.neon-portal__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.neon-portal__ring--1 {
  width: 100%; height: 100%;
  border: 3px dashed var(--hero-portal-ring1-color, var(--neon-pink));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--hero-portal-ring1-color, var(--neon-pink)) 60%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--hero-portal-ring1-color, var(--neon-pink)) 30%, transparent);
  animation: neon-portal-cw var(--hero-portal-ring1-speed, 20s) linear infinite;
}
.neon-portal__ring--2 {
  width: 78%; height: 78%;
  border: 4px solid;
  border-color: var(--hero-portal-ring2-color, var(--neon-violet)) transparent var(--hero-portal-ring2-color, var(--neon-violet)) transparent;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--hero-portal-ring2-color, var(--neon-violet)) 60%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--hero-portal-ring2-color, var(--neon-violet)) 30%, transparent);
  animation: neon-portal-ccw var(--hero-portal-ring2-speed, 14s) linear infinite;
}
.neon-portal__ring--3 {
  width: 56%; height: 56%;
  border: 3px dotted var(--hero-portal-ring3-color, var(--neon-cyan));
  box-shadow:
    0 0 14px color-mix(in srgb, var(--hero-portal-ring3-color, var(--neon-cyan)) 60%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--hero-portal-ring3-color, var(--neon-cyan)) 30%, transparent);
  animation: neon-portal-cw var(--hero-portal-ring3-speed, 10s) linear infinite;
}
@keyframes neon-portal-cw  { to { transform: rotate(360deg); } }
@keyframes neon-portal-ccw { to { transform: rotate(-360deg); } }

.neon-portal__orbits {
  position: absolute;
  inset: 0;
  animation: neon-portal-cw var(--hero-portal-orbit-speed, 24s) linear infinite;
}
.neon-portal__orbit {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  top: 50%; left: 50%;
  margin: -9px 0 0 -9px;
}
/* المسافة = نصف القطر = 50% من حجم البوابة */
.neon-portal__orbit--1 {
  transform: translate(0, calc(var(--hero-portal-size, 420px) / -2 - 0px));
  background: var(--hero-portal-orbit1-color, var(--neon-pink));
  box-shadow: 0 0 16px var(--hero-portal-orbit1-color, var(--neon-pink)),
              0 0 32px var(--hero-portal-orbit1-color, var(--neon-pink));
}
.neon-portal__orbit--2 {
  transform: translate(calc(var(--hero-portal-size, 420px) / 2), 0);
  background: var(--hero-portal-orbit2-color, var(--neon-cyan));
  box-shadow: 0 0 16px var(--hero-portal-orbit2-color, var(--neon-cyan)),
              0 0 32px var(--hero-portal-orbit2-color, var(--neon-cyan));
}
.neon-portal__orbit--3 {
  transform: translate(0, calc(var(--hero-portal-size, 420px) / 2));
  background: var(--hero-portal-orbit3-color, var(--neon-violet));
  box-shadow: 0 0 16px var(--hero-portal-orbit3-color, var(--neon-violet)),
              0 0 32px var(--hero-portal-orbit3-color, var(--neon-violet));
}
.neon-portal__orbit--4 {
  transform: translate(calc(var(--hero-portal-size, 420px) / -2), 0);
  background: var(--hero-portal-orbit4-color, var(--neon-amber));
  box-shadow: 0 0 16px var(--hero-portal-orbit4-color, var(--neon-amber)),
              0 0 32px var(--hero-portal-orbit4-color, var(--neon-amber));
}

.neon-portal__core {
  position: relative;
  z-index: 2;
  width: 44%; height: 44%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan));
  background-size: 200% 200%;
  animation: neon-portal-grad 4s ease infinite;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow:
    0 0 30px color-mix(in srgb, var(--neon-pink) 60%, transparent),
    0 0 60px color-mix(in srgb, var(--neon-violet) 50%, transparent),
    inset 0 2px 8px rgba(255,255,255,.4);
}
.neon-portal__core::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 50%);
  pointer-events: none;
}
.neon-portal__core svg {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  animation: neon-portal-float-icon 3s ease-in-out infinite;
}
@keyframes neon-portal-grad {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes neon-portal-float-icon {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.neon-portal__label {
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  white-space: nowrap;
}
.neon-portal__label-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--neon-pink);
  text-shadow: 0 0 10px color-mix(in srgb, var(--neon-pink) 50%, transparent);
}
.neon-portal__label-sub {
  font-size: .72rem;
  color: var(--ink-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-block-start: .2rem;
}

@media (max-width: 900px) {
  .neon-hero { min-height: auto; padding: 2rem 1rem; }
  .neon-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .neon-hero__content--left {
    text-align: center;
    order: 2;
  }
  .neon-hero__portal-wrap { order: 1; }
  .neon-hero__content--left .neon-hero__subtitle { margin-inline: auto; }
  .neon-hero__content--left .neon-hero__actions { justify-content: center; }
  .neon-hero__content--left .neon-hero__stats { margin-inline: auto; }
  .neon-portal { width: min(var(--hero-portal-size, 420px), 340px); height: min(var(--hero-portal-size, 420px), 340px); }
  .neon-hero__stats { grid-template-columns: 1fr; gap: 1rem; }
}

/* ===== 11) Download page enhancements ===== */
.neon-dl-card {
  position: relative;
  border-radius: var(--radius);
  padding: 2px;
  background: conic-gradient(
    from var(--rb-angle),
    var(--neon-pink) 0%, var(--neon-violet) 16%, var(--neon-cyan) 33%,
    var(--neon-lime) 50%, var(--neon-amber) 66%, var(--neon-rose) 83%,
    var(--neon-pink) 100%
  );
  animation: neon-rb-rotate var(--neon-rotate-duration) linear infinite;
  isolation: isolate;
  opacity: var(--neon-rainbow-on);
}
.neon-dl-card::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: inherit;
  filter: blur(12px);
  opacity: calc(0.55 * var(--neon-intensity));
  z-index: -1;
}
.neon-dl-card > .card {
  border-radius: calc(var(--radius) - 2px);
  border: none;
  background: var(--surface);
}

/* عداد تنازلي فاجر */
.neon-countdown {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1.5rem;
}
.neon-countdown__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.neon-countdown__track {
  fill: none;
  stroke: var(--border);
  stroke-width: 6;
}
.neon-countdown__progress {
  fill: none;
  stroke: url(#neon-countdown-grad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 565;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--neon-pink) 70%, transparent));
}
.neon-countdown__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.neon-countdown__number {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
}
.neon-countdown__label {
  font-size: .9rem;
  color: var(--ink-faint);
  font-weight: 600;
  margin-block-start: .25rem;
}

/* سبنر فاجر */
.neon-spinner {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  position: relative;
}
.neon-spinner::before,
.neon-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
}
.neon-spinner::before {
  border-top-color: var(--neon-pink);
  border-right-color: var(--neon-pink);
  animation: neon-spin 1.2s linear infinite;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--neon-pink) 70%, transparent));
}
.neon-spinner::after {
  inset: 8px;
  border-bottom-color: var(--neon-cyan);
  border-left-color: var(--neon-cyan);
  animation: neon-spin 0.8s linear reverse infinite;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--neon-cyan) 70%, transparent));
}
@keyframes neon-spin {
  to { transform: rotate(360deg); }
}

/* شريط تحميل نيوني */
.neon-progress {
  height: 8px;
  background: var(--surface-inset);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  margin: 1rem 0;
}
.neon-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan));
  background-size: 200% 100%;
  animation: neon-gradient-shift 2s linear infinite;
  border-radius: 999px;
  width: 0%;
  transition: width 0.3s ease;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--neon-pink) 60%, transparent),
    0 0 24px color-mix(in srgb, var(--neon-violet) 40%, transparent);
  position: relative;
}
.neon-progress__bar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: neon-shimmer 1.5s ease-in-out infinite;
}

/* ===== 12) Disable animations when off ===== */
:root[style*="--neon-animation-on: 0"] *,
:root[style*="--neon-animation-on: 0"] *::before,
:root[style*="--neon-animation-on: 0"] *::after {
  animation: none !important;
  transition: none !important;
}

/* ===== 13) Mobile ===== */
@media (max-width: 640px) {
  .neon-hero { min-height: auto; padding: 2rem 1rem; }
  .neon-hero__stats { grid-template-columns: 1fr; gap: 1rem; }
  .neon-countdown { width: 160px; height: 160px; }
  .neon-countdown__number { font-size: 3rem; }
}

/* ===== 14) Respect reduced motion — لكن بدون قتل الزينة الهيرو ===== */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .rb-wrap,
  .rb-wrap::before,
  .btn-glossy,
  .btn-glossy::before,
  .neon-float,
  .neon-float-slow,
  .neon-pulse-glow,
  .neon-spinner::before,
  .neon-spinner::after,
  .neon-dl-card {
    animation: none !important;
  }
}

/* ===== 14b) Force-restore hero portal animations under reduced-motion =====
   البوابة والدوائر والنجوم والأشكال: بطيئة ولطيفة وزينة، نُبقيها متحركة دائماً */
@media (prefers-reduced-motion: reduce) {
  .neon-portal__halo {
    animation: neon-portal-halo 4s ease-in-out infinite !important;
  }
  .neon-portal__ring--1 {
    animation: neon-portal-cw var(--hero-portal-ring1-speed, 20s) linear infinite !important;
  }
  .neon-portal__ring--2 {
    animation: neon-portal-ccw var(--hero-portal-ring2-speed, 14s) linear infinite !important;
  }
  .neon-portal__ring--3 {
    animation: neon-portal-cw var(--hero-portal-ring3-speed, 10s) linear infinite !important;
  }
  .neon-portal__orbits {
    animation: neon-portal-cw var(--hero-portal-orbit-speed, 24s) linear infinite !important;
  }
  .neon-portal__core {
    animation: neon-portal-grad 4s ease infinite !important;
  }
  .neon-portal__core svg {
    animation: neon-portal-float-icon 3s ease-in-out infinite !important;
  }
  .neon-hero__shape--1 {
    animation: neon-float-shape 9s ease-in-out infinite !important;
  }
  .neon-hero__shape--2 {
    animation: neon-float-shape 11s ease-in-out infinite reverse !important;
  }
  .neon-hero__shape--3 {
    animation: neon-float-shape 7s ease-in-out infinite !important;
    animation-delay: -3s !important;
  }
  .star-field::before,
  .star-field::after {
    animation: neon-twinkle 4s ease-in-out infinite !important;
  }
  .star-field::after {
    animation-delay: 2s !important;
  }
}

/* ===== 15) Auto-apply neon to admin pages ===== */
/* كل بطاقة .stat و .navcard و .dash-section تخلى بحدود قوس قزح */
.admin-main .stat,
.admin-main .navcard,
.admin-main .dash-section,
.admin-main .filecard,
.admin-main .user-card {
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(
      from var(--rb-angle, 0deg),
      var(--neon-pink) 0%,
      var(--neon-violet) 16%,
      var(--neon-cyan) 33%,
      var(--neon-lime) 50%,
      var(--neon-amber) 66%,
      var(--neon-rose) 83%,
      var(--neon-pink) 100%
    ) border-box;
  background-clip: padding-box, border-box;
  border-radius: var(--radius);
  animation: neon-rb-rotate var(--neon-rotate-duration) linear infinite;
  opacity: 1;
  isolation: isolate;
}

/* عناوين الأدمن هولوغرافية */
.admin-main .page-title {
  background: linear-gradient(
    90deg,
    var(--neon-pink) 0%,
    var(--neon-violet) 25%,
    var(--neon-cyan) 50%,
    var(--neon-lime) 75%,
    var(--neon-amber) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: neon-holo-flow 6s ease infinite;
}

/* الأرقام في الإحصائيات نيونية */
.admin-main .stat__num {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: neon-gradient-shift 4s ease infinite;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--neon-pink) 30%, transparent));
}

/* القائمة الجانبية للأدمن — لمسة نيون */
.admin-sidebar__link.is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-pink) 14%, var(--surface)), color-mix(in srgb, var(--neon-violet) 10%, var(--surface)));
  color: var(--neon-pink);
  border-inline-start: 3px solid var(--neon-pink);
  box-shadow: inset 2px 0 8px color-mix(in srgb, var(--neon-pink) 20%, transparent);
}

.admin-sidebar__link:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-cyan) 10%, var(--surface)), color-mix(in srgb, var(--neon-violet) 8%, var(--surface)));
  color: var(--neon-cyan);
}

/* brand__mark للأدمن بتدرج نيون */
.brand__mark {
  background: linear-gradient(150deg, var(--neon-violet), var(--neon-pink)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 16px color-mix(in srgb, var(--neon-pink) 50%, transparent) !important;
}

/* الرابط النشط في التوب بار */
.langtoggle a.is-active {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet));
  color: #fff;
}

/* الأزرار الأساسية في الأدمن تخلى glossy */
.admin-main .btn:not(.btn--ghost):not(.btn--danger):not(.btn--signal):not(.btn-glossy):not(.btn--sm) {
  background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-violet) 50%, var(--neon-cyan) 100%);
  background-size: 200% 200%;
  animation: neon-gradient-shift 4s ease infinite;
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--neon-pink) calc(45% * var(--neon-intensity)), transparent),
    0 0 40px color-mix(in srgb, var(--neon-violet) calc(35% * var(--neon-intensity)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.admin-main .btn:not(.btn--ghost):not(.btn--danger):not(.btn--signal):not(.btn-glossy):not(.btn--sm)::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* الجداول في الأدمن — لمسة نيون */
.admin-main table.data thead th {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-violet) 12%, var(--surface)), color-mix(in srgb, var(--neon-cyan) 8%, var(--surface)));
  color: var(--neon-cyan);
  font-weight: 800;
}

/* الـ FAQ items بتوهج نيون */
.faq-item {
  background: var(--surface-inset) !important;
  border: 1px solid color-mix(in srgb, var(--neon-violet) 20%, var(--border)) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:hover {
  border-color: color-mix(in srgb, var(--neon-pink) 40%, var(--border)) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon-pink) 15%, transparent);
}

/* alert--success نيوني */
.alert--success {
  background: color-mix(in srgb, var(--neon-lime) 14%, var(--surface)) !important;
  color: color-mix(in srgb, var(--neon-lime) 80%, var(--ink)) !important;
  border-color: color-mix(in srgb, var(--neon-lime) 35%, transparent) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon-lime) 20%, transparent);
}

/* alert--error نيوني */
.alert--error {
  background: color-mix(in srgb, var(--neon-rose) 14%, var(--surface)) !important;
  color: color-mix(in srgb, var(--neon-rose) 80%, var(--ink)) !important;
  border-color: color-mix(in srgb, var(--neon-rose) 35%, transparent) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon-rose) 20%, transparent);
}

/* alert--info نيوني */
.alert--info {
  background: color-mix(in srgb, var(--neon-cyan) 12%, var(--surface)) !important;
  color: color-mix(in srgb, var(--neon-cyan) 80%, var(--ink)) !important;
  border-color: color-mix(in srgb, var(--neon-cyan) 32%, transparent) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon-cyan) 20%, transparent);
}

/* input/textarea focus نيوني */
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--neon-pink) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--neon-pink) 20%, transparent), 0 0 16px color-mix(in srgb, var(--neon-pink) 30%, transparent) !important;
  background: var(--surface) !important;
}

/* update-banner نيوني */
.update-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-pink) 18%, var(--surface)), color-mix(in srgb, var(--neon-violet) 12%, var(--surface))) !important;
  border: 1px solid color-mix(in srgb, var(--neon-pink) 45%, var(--border)) !important;
  box-shadow: 0 0 24px color-mix(in srgb, var(--neon-pink) 20%, transparent);
}
.update-banner__ic {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)) !important;
  color: #fff !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon-pink) 60%, transparent);
}

/* ===== 16) Fieldset + Card في الإدارة ===== */
.admin-main .fieldset {
  background: var(--surface);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(
      from var(--rb-angle, 0deg),
      var(--neon-pink) 0%,
      var(--neon-violet) 16%,
      var(--neon-cyan) 33%,
      var(--neon-lime) 50%,
      var(--neon-amber) 66%,
      var(--neon-rose) 83%,
      var(--neon-pink) 100%
    ) border-box;
  background-clip: padding-box, border-box;
  border-radius: var(--radius);
  animation: neon-rb-rotate var(--neon-rotate-duration) linear infinite;
}
.admin-main .fieldset > legend {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

/* أي .card--pad في الأدمن بدون rb-wrap يبقى نيوني تلقائياً */
.admin-main .card--pad:not(.rb-inner) {
  background: var(--surface);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(
      from var(--rb-angle, 0deg),
      var(--neon-pink) 0%,
      var(--neon-violet) 16%,
      var(--neon-cyan) 33%,
      var(--neon-lime) 50%,
      var(--neon-amber) 66%,
      var(--neon-rose) 83%,
      var(--neon-pink) 100%
    ) border-box;
  background-clip: padding-box, border-box;
  border-radius: var(--radius);
  animation: neon-rb-rotate var(--neon-rotate-duration) linear infinite;
}

/* toggle switch نيوني */
.switch input:checked + .switch__track {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon-pink) 50%, transparent);
}

/* badges في الأدمن */
.badge--accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-pink) 14%, var(--surface)), color-mix(in srgb, var(--neon-violet) 10%, var(--surface))) !important;
  color: var(--neon-pink) !important;
  border-color: color-mix(in srgb, var(--neon-pink) 30%, transparent) !important;
}

/* أيقونات navcard نيونية */
.navcard__icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-pink) 16%, var(--surface)), color-mix(in srgb, var(--neon-violet) 12%, var(--surface))) !important;
  color: var(--neon-pink) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon-pink) 20%, transparent);
}
.navcard:hover {
  border-color: color-mix(in srgb, var(--neon-pink) 50%, var(--border)) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--neon-pink) 20%, transparent) !important;
  transform: translateY(-4px);
}
.navcard__title {
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* filecard__icon نيوني */
.filecard__icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-cyan) 14%, var(--surface)), color-mix(in srgb, var(--neon-violet) 10%, var(--surface))) !important;
  color: var(--neon-cyan) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon-cyan) 20%, transparent);
}

/* eyebrow نيوني */
.eyebrow {
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* divider نيوني */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--neon-pink) 30%, transparent), color-mix(in srgb, var(--neon-violet) 30%, transparent), transparent) !important;
}

/* copyrow الأزرار النيونية */
.copyrow .btn--ghost {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-cyan) 8%, var(--surface)), color-mix(in srgb, var(--neon-violet) 6%, var(--surface))) !important;
  border-color: color-mix(in srgb, var(--neon-cyan) 30%, var(--border)) !important;
  color: var(--neon-cyan) !important;
}
.copyrow .btn--ghost:hover {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon-cyan) 30%, transparent);
}

/* ===== 17) Apply neon to all pages (public + admin) ===== */
/* كل .card على الصفحات العامة يبقى بحدود قوس قزح خفيفة */
.card {
  background: var(--surface);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(
      from var(--rb-angle, 0deg),
      color-mix(in srgb, var(--neon-pink) 50%, var(--border)) 0%,
      color-mix(in srgb, var(--neon-violet) 50%, var(--border)) 16%,
      color-mix(in srgb, var(--neon-cyan) 50%, var(--border)) 33%,
      color-mix(in srgb, var(--neon-lime) 50%, var(--border)) 50%,
      color-mix(in srgb, var(--neon-amber) 50%, var(--border)) 66%,
      color-mix(in srgb, var(--neon-rose) 50%, var(--border)) 83%,
      color-mix(in srgb, var(--neon-pink) 50%, var(--border)) 100%
    ) border-box;
  background-clip: padding-box, border-box;
  border-radius: var(--radius);
  animation: neon-rb-rotate var(--neon-rotate-duration) linear infinite;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--neon-violet) calc(8% * var(--neon-intensity)), transparent);
}

/* page-title على الصفحات العامة هولوغرافي */
.page-title:not(.rb-inner .page-title):not(.admin-main .page-title) {
  background: linear-gradient(
    90deg,
    var(--neon-pink) 0%,
    var(--neon-violet) 25%,
    var(--neon-cyan) 50%,
    var(--neon-lime) 75%,
    var(--neon-amber) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: neon-holo-flow 6s ease infinite;
}

/* .btn على الصفحات العامة glossy */
.btn:not(.btn--ghost):not(.btn--danger):not(.btn--signal):not(.btn-glossy) {
  background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-violet) 50%, var(--neon-cyan) 100%);
  background-size: 200% 200%;
  animation: neon-gradient-shift 4s ease infinite;
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--neon-pink) calc(45% * var(--neon-intensity)), transparent),
    0 0 40px color-mix(in srgb, var(--neon-violet) calc(35% * var(--neon-intensity)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn:not(.btn--ghost):not(.btn--danger):not(.btn--signal):not(.btn-glossy)::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* btn--ghost نيوني */
.btn--ghost {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-cyan) 6%, var(--surface)), color-mix(in srgb, var(--neon-violet) 4%, var(--surface))) !important;
  color: var(--ink) !important;
  border: 1px solid color-mix(in srgb, var(--neon-cyan) 30%, var(--border)) !important;
}
.btn--ghost:hover {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon-cyan) 25%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-cyan) 12%, var(--surface)), color-mix(in srgb, var(--neon-violet) 8%, var(--surface))) !important;
}

/* topbar نيوني */
.topbar {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-block-end: 1px solid color-mix(in srgb, var(--neon-pink) 20%, var(--border));
  box-shadow: 0 4px 24px color-mix(in srgb, var(--neon-violet) calc(8% * var(--neon-intensity)), transparent);
}

/* topnav — روابط الهيدر */
.topnav {
  display: flex;
  align-items: center;
  gap: .35rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.topnav a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  border-radius: 11px;
  font-weight: 700;
  font-size: .9rem;
  background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-violet) 50%, var(--neon-cyan) 100%);
  background-size: 200% 200%;
  animation: neon-gradient-shift 4s ease infinite;
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--neon-pink) calc(45% * var(--neon-intensity)), transparent),
    0 0 40px color-mix(in srgb, var(--neon-violet) calc(35% * var(--neon-intensity)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.topnav a::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
  border-radius: inherit;
  pointer-events: none;
}
.topnav a:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 10px 36px color-mix(in srgb, var(--neon-pink) calc(60% * var(--neon-intensity)), transparent),
    0 0 60px color-mix(in srgb, var(--neon-violet) calc(50% * var(--neon-intensity)), transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@media (max-width: 640px) {
  .topnav { position: static; transform: none; margin-inline-start: auto; gap: .25rem; }
  .topnav a { padding: .35rem .6rem; font-size: .8rem; }
}

/* sitefooter نيوني */
.sitefooter {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(16px);
  border-block-start: 1px solid color-mix(in srgb, var(--neon-pink) 20%, var(--border));
  box-shadow: 0 -4px 24px color-mix(in srgb, var(--neon-violet) calc(6% * var(--neon-intensity)), transparent);
}

/* langtoggle نيوني */
.langtoggle {
  border: 1px solid color-mix(in srgb, var(--neon-pink) 25%, var(--border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-pink) 5%, var(--surface)), color-mix(in srgb, var(--neon-violet) 3%, var(--surface))) !important;
}

/* iconbtn نيوني */
.iconbtn {
  border: 1px solid color-mix(in srgb, var(--neon-cyan) 25%, var(--border)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-cyan) 5%, var(--surface)), color-mix(in srgb, var(--neon-violet) 3%, var(--surface))) !important;
  transition: all 0.3s ease;
}
.iconbtn:hover {
  border-color: var(--neon-pink) !important;
  color: var(--neon-pink) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon-pink) 30%, transparent);
}

/* badges عامة نيونية */
.badge {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-violet) 8%, var(--surface)), color-mix(in srgb, var(--neon-pink) 6%, var(--surface))) !important;
  border: 1px solid color-mix(in srgb, var(--neon-violet) 25%, var(--border)) !important;
  color: var(--ink-soft) !important;
}

/* preview-img نيونية */
.preview-img {
  border: 1px solid color-mix(in srgb, var(--neon-pink) 30%, var(--border)) !important;
  box-shadow: 0 0 24px color-mix(in srgb, var(--neon-pink) 20%, transparent);
}

/* Brow (مخططات الأمان) نيوني */
.brow__fill { background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet)) !important; }
.brow__fill--warn { background: linear-gradient(90deg, var(--neon-amber), var(--neon-rose)) !important; }
.brow__fill--danger { background: linear-gradient(90deg, var(--neon-rose), var(--neon-pink)) !important; }

/* pager نيوني */
.pager a:hover {
  border-color: var(--neon-pink) !important;
  color: var(--neon-pink) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon-pink) 25%, transparent);
}
.pager .is-current {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon-pink) 40%, transparent);
}