/* ==========================================================================
   theme-lux.css — طبقة هوية بصرية حديثة (Glassmorphism + Aurora + Scroll FX)
   --------------------------------------------------------------------------
   قاعدة السلامة: هذا الملف **يُضاف فوق** tokens.css ولا يغيّر أي متغيّر
   موجود فيه ولا أي بنية HTML ولا أي معرّف/صنف يعتمد عليه JavaScript.
   يُحمَّل آخرًا، فيُعيد تعريف المظهر فقط عبر الوراثة الطبيعية للـ CSS.
   ألوان رسمية عميقة (كحلي/أزرق ملكي/سماوي) لا ألوان صاخبة.
   ========================================================================== */

:root {
  /* ---------- لوحة فخمة رسمية ---------- */
  --lux-ink:        #060b1a;   /* حبر كحلي شديد العمق */
  --lux-navy:       #0b1533;
  --lux-navy-soft:  #131f45;
  --lux-royal:      #1e3a8a;   /* أزرق ملكي رسمي */
  --lux-azure:      #2563eb;
  --lux-sky:        #38bdf8;
  --lux-cyan:       #22d3ee;
  --lux-gold:       #c9a227;   /* لمسة ذهبية للرسمية */
  --lux-platinum:   #e8ecf6;

  /* أسطح زجاجية */
  --glass-bg:       rgba(255, 255, 255, 0.08);
  --glass-bg-2:     rgba(255, 255, 255, 0.13);
  --glass-brd:      rgba(255, 255, 255, 0.18);
  --glass-brd-2:    rgba(255, 255, 255, 0.30);
  --glass-shadow:   0 8px 32px rgba(2, 8, 24, 0.38);
  --glass-glow:     0 0 0 1px rgba(255,255,255,.06), 0 18px 50px -12px rgba(37, 99, 235, .45);

  /* تدرّجات */
  --grad-royal: linear-gradient(135deg, var(--lux-royal) 0%, var(--lux-azure) 45%, var(--lux-cyan) 100%);
  --grad-ink:   linear-gradient(160deg, var(--lux-ink) 0%, var(--lux-navy) 55%, #0e1c40 100%);
  --grad-text:  linear-gradient(100deg, #ffffff 0%, #cfe3ff 40%, var(--lux-sky) 75%, var(--lux-cyan) 100%);

  --lux-ease: cubic-bezier(.22, 1, .36, 1);

  /* ========================================================================
     إعادة توجيه متغيّرات tokens.css — نقطة تحكّم واحدة
     ------------------------------------------------------------------------
     كل ملفات CSS القائمة تستخدم var(--background) و var(--text-primary)…
     فبإعادة تعريفها هنا (وهذا الملف يُحمَّل آخرًا) تتحوّل كل الأسطح إلى
     الوضع الزجاجي الداكن **بلا تعديل حرف واحد** في style.css أو admin.css
     أو survey.css. لا !important ولا تكرار.
     ======================================================================== */
  --background:   rgba(255, 255, 255, 0.07);
  --text-primary: #f2f6ff;
  --text-muted:   #93a4c8;
  --accent:       var(--lux-sky);
  --border:       rgba(255, 255, 255, 0.18);
  --border-subtle:rgba(255, 255, 255, 0.12);
  --divider:      rgba(255, 255, 255, 0.10);
  --surface-alt:  rgba(255, 255, 255, 0.05);
  --info-soft:    rgba(37, 99, 235, 0.16);
  --info:         var(--lux-azure);
  --success:      #34d399;
  --danger:       #f87171;
  --warning:      #fbbf24;
  --muted-strong: #aab8d8;
  --deep:         var(--lux-navy);
  --deep-900:     var(--lux-ink);

  /* أسماء بديلة تستخدمها public-survey.css كقيم احتياطية
     (كانت غير معرّفة فتسقط على الأبيض) */
  --bg:      transparent;
  --surface: rgba(255, 255, 255, 0.07);
  --line:    rgba(255, 255, 255, 0.18);
  --muted:   #93a4c8;

  /* ظلال أعمق تناسب الخلفية الداكنة */
  --shadow-raised:   0 2px 10px rgba(2, 8, 24, .35);
  --shadow-floating: 0 10px 30px rgba(2, 8, 24, .45);
  --shadow-overlay:  0 18px 50px rgba(2, 8, 24, .60);
}

/* ==========================================================================
   1. الخلفية العامة — Aurora متحرك (بديل الفيديو، أخفّ وبلا ملفات)
   ========================================================================== */
/* نستهدف html وbody معًا حتى لا يفوز أي صنف على العنصر */
html { background: var(--lux-ink); }

body,
body.ps-body {
  background: var(--grad-ink);
  background-attachment: fixed;
  color: var(--lux-platinum);
  position: relative;
  overflow-x: hidden;
}

/* طبقتا ضوء تتحركان ببطء = إحساس "فيديو متحرك" بلا فيديو */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -30% -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38rem 38rem at 18% 22%, rgba(37, 99, 235, .40), transparent 62%),
    radial-gradient(30rem 30rem at 82% 18%, rgba(34, 211, 238, .28), transparent 60%),
    radial-gradient(34rem 34rem at 62% 82%, rgba(30, 58, 138, .45), transparent 64%);
  filter: blur(24px);
  animation: luxAurora 26s var(--lux-ease) infinite alternate;
}
body::after {
  background:
    radial-gradient(26rem 26rem at 75% 65%, rgba(201, 162, 39, .16), transparent 62%),
    radial-gradient(30rem 30rem at 25% 78%, rgba(56, 189, 248, .22), transparent 62%);
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}

@keyframes luxAurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.12); }
  100% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.06); }
}

/* شبكة رقيقة تعطي عمقًا هندسيًا رسميًا */
body > main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 78%);
}

/* ==========================================================================
   2. الطباعة
   ========================================================================== */
h1, h2, h3, .hero__title {
  color: #fff;
  letter-spacing: -.02em;
}

h1, .hero__title {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(56, 189, 248, .18);
}

p, li, .caption, .field__help, .step__desc, .landing__desc {
  color: #b9c6e4;
}
.muted, .text-muted { color: #8fa0c4 !important; }

a { color: var(--lux-sky); }
a:hover { color: var(--lux-cyan); }

/* ==========================================================================
   3. الأسطح الزجاجية (Glassmorphism)
   ========================================================================== */
.card,
.block > .card,
.landing,
.wizard-head,
.step,
.panel,
.table-wrap,
.kpi,
.survey-card,
.modal__box,
.ps-landing,
.ps-message,
.ps-done,
.ps-suggest {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-micro) var(--lux-ease),
              box-shadow var(--duration-micro) var(--lux-ease),
              border-color var(--duration-micro) var(--lux-ease);
}

/* حدّ علوي مضيء = لمعة زجاج */
.card::before,
.landing::before,
.kpi::before,
.survey-card::before,
.ps-landing::before,
.ps-done::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  pointer-events: none;
}

.card:hover,
.kpi:hover,
.survey-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-brd-2) !important;
  box-shadow: var(--glass-glow) !important;
}

/* إبراز رقيق يتبع المؤشر (الإحداثيات يضبطها js/lux.js) */
.card::after,
.kpi::after,
.survey-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-page) var(--lux-ease);
  background: radial-gradient(18rem 18rem at var(--lux-mx, 50%) var(--lux-my, 50%),
              rgba(56, 189, 248, .16), transparent 70%);
}
.card:hover::after,
.kpi:hover::after,
.survey-card:hover::after { opacity: 1; }

/* ==========================================================================
   4. الأزرار
   ========================================================================== */
.btn {
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--duration-micro) var(--lux-ease),
              box-shadow var(--duration-micro) var(--lux-ease),
              filter var(--duration-micro) var(--lux-ease);
}

.btn:not(.btn--ghost):not(.btn--danger) {
  background: var(--grad-royal);
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(37, 99, 235, .75),
              inset 0 1px 0 rgba(255,255,255,.28);
}

/* وميض يمرّ عبر الزر عند المرور */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .65s var(--lux-ease);
}
.btn:hover::after { transform: translateX(120%); }

.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; }

.btn--ghost {
  background: var(--glass-bg-2);
  color: #dbe6ff;
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgba(255,255,255,.20); color: #fff; }

.btn--danger {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(239, 68, 68, .7);
}

/* حلقة تركيز واضحة (وصولية) */
.btn:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--lux-cyan);
  outline-offset: 2px;
}

/* ==========================================================================
   5. الحقول
   ========================================================================== */
.input, .select, .textarea {
  background: rgba(10, 18, 42, .55) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 14px !important;
  color: #eaf1ff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--duration-micro) var(--lux-ease),
              box-shadow var(--duration-micro) var(--lux-ease),
              background var(--duration-micro) var(--lux-ease);
}
.input::placeholder, .textarea::placeholder { color: #6f81a8; }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--lux-sky) !important;
  background: rgba(12, 22, 50, .78) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .16);
}

.select option { background: var(--lux-navy); color: #eaf1ff; }
.field__label { color: #d5e2ff; font-weight: 600; }
.field__req { color: var(--lux-cyan); }

/* ==========================================================================
   6. الشارات والأشرطة
   ========================================================================== */
.badge {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd);
  color: #d9e6ff;
  border-radius: var(--radius-badge);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.badge--ok      { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.42); color: #6ee7b7; }
.badge--closed  { background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.42); color: #cbd5e1; }
.badge--draft   { background: rgba(201,162,39,.18); border-color: rgba(201,162,39,.45); color: #fcd34d; }

.progress {
  background: rgba(255,255,255,.10);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
}
.progress__bar {
  background: var(--grad-royal);
  box-shadow: 0 0 18px rgba(56,189,248,.65);
  transition: width var(--duration-page) var(--lux-ease);
}

/* ==========================================================================
   7. الجداول
   ========================================================================== */
table { color: #cfdcf7; }
thead th {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--glass-brd) !important;
  backdrop-filter: blur(8px);
}
tbody td { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
tbody tr { transition: background var(--duration-micro) var(--lux-ease); }
tbody tr:hover { background: rgba(255,255,255,.05); }

/* ==========================================================================
   8. الرأس والتذييل
   ========================================================================== */
.site-header, .ps-topbar, .admin-topbar {
  background: rgba(6, 11, 26, .62) !important;
  border-bottom: 1px solid var(--glass-brd) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.site-footer, .ps-footer {
  background: rgba(6, 11, 26, .55) !important;
  border-top: 1px solid var(--glass-brd) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #93a4c8;
}
.ps-brand, .brand { color: #fff; font-weight: 700; letter-spacing: .01em; }

/* الشريط الجانبي للوحة التحكم */
.admin-sidebar, .sidebar {
  background: rgba(8, 14, 32, .72) !important;
  border-inline-end: 1px solid var(--glass-brd) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.admin-sidebar a, .sidebar a { color: #b8c8ea; border-radius: 12px; }
.admin-sidebar a:hover, .sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-sidebar a.is-active, .sidebar a.is-active,
.admin-sidebar a[aria-current="page"], .sidebar a[aria-current="page"] {
  background: var(--grad-royal);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(37,99,235,.8);
}

/* ==========================================================================
   9. النوافذ المنبثقة
   ========================================================================== */
.modal, .modal-backdrop {
  background: rgba(3, 7, 18, .68) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal__box {
  background: rgba(14, 22, 48, .88) !important;
  animation: luxPop var(--duration-page) var(--lux-ease) both;
}
@keyframes luxPop {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   10. حركات الظهور عند التمرير (Scroll Reveal)
   تُدار بـ js/lux.js عبر IntersectionObserver — بلا مكتبات.
   ========================================================================== */
[data-lux-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--lux-ease), transform .7s var(--lux-ease);
  will-change: opacity, transform;
}
[data-lux-reveal].lux-in { opacity: 1; transform: none; }

/* تدرّج زمني بسيط للعناصر المتجاورة */
[data-lux-reveal][data-lux-delay="1"] { transition-delay: .08s; }
[data-lux-reveal][data-lux-delay="2"] { transition-delay: .16s; }
[data-lux-reveal][data-lux-delay="3"] { transition-delay: .24s; }
[data-lux-reveal][data-lux-delay="4"] { transition-delay: .32s; }

/* شريط تقدّم التمرير أعلى الصفحة */
#lux-scrollbar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: var(--z-toast);
  background: var(--grad-royal);
  box-shadow: 0 0 14px rgba(56,189,248,.8);
  transition: width .1s linear;
  pointer-events: none;
}

/* ==========================================================================
   11. صفحة الهبوط العامة — لمسات إضافية
   ========================================================================== */
.ps-landing, .landing {
  padding: var(--sp-12) var(--sp-8);
}
.landing__facts li {
  position: relative;
  padding-inline-start: 26px;
  margin-bottom: var(--sp-3);
  list-style: none;
}
.landing__facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: .55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--grad-royal);
  box-shadow: 0 0 12px rgba(56,189,248,.85);
}

/* علامة النجاح */
.ps-check svg circle { stroke: var(--lux-cyan); stroke-width: 2.5; }
.ps-check svg path   { stroke: var(--lux-cyan); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* بطاقات الاختيار في الأسئلة */
.choice {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  transition: all var(--duration-micro) var(--lux-ease);
}
.choice:hover { background: rgba(255,255,255,.11); border-color: var(--glass-brd-2); }
.choice--selected {
  background: rgba(37,99,235,.24) !important;
  border-color: var(--lux-sky) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.16);
}

/* الهياكل العظمية (skeleton) */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
  background-size: 400% 100%;
  border-radius: 16px;
  animation: luxShimmer 1.5s ease-in-out infinite;
}
@keyframes luxShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* شريط التمرير */
* { scrollbar-color: rgba(56,189,248,.45) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--lux-azure), var(--lux-cyan));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* رسائل الخطأ */
.error-text { color: #fca5a5; }
.alert {
  background: var(--glass-bg-2) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 16px !important;
  color: #d9e6ff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* التنبيهات العائمة */
.toast {
  background: rgba(14, 22, 48, .92) !important;
  border: 1px solid var(--glass-brd) !important;
  color: #eaf1ff !important;
  border-radius: 14px !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ==========================================================================
   12. احترام تقليل الحركة + الأجهزة الصغيرة
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  [data-lux-reveal] { opacity: 1 !important; transform: none !important; }
  .btn::after { display: none; }
  #lux-scrollbar { display: none; }
  .admin-head h1::after, .block > h2::after,
  .admin-nav a[aria-current="page"]::after { animation: none !important; }
}

/* ==========================================================================
   13. طبقة «الحيوية»: حواف أضخم + أضواء رسمية متحرّكة
   --------------------------------------------------------------------------
   ⚠️ قاعدة النطاق: كل ما في هذا القسم لون/ظلّ/حركة فقط.
   ممنوع هنا: display / position / grid / float / width / margin على أي عنصر
   بنيوي (.admin-shell, .admin-side, .admin-main, .shell). سبب المنع أن خللًا
   سابقًا جعل الشريط الجانبي يسقط أعلى الصفحة، والجذر كان بنية HTML ناقصة —
   ونحفظ هذه الطبقة بعيدًا عن التخطيط حتى لا تكون مشتبهًا بها مستقبلًا.
   ========================================================================== */

/* حافة داخلية ضخمة متعدّدة الحلقات لكل سطح رئيسي */
.card,
.landing,
.ps-landing,
.ps-done,
.ps-message,
.panel,
.survey-card {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 0 0 7px rgba(255, 255, 255, .022),
    inset 0 0 0 8px rgba(255, 255, 255, .055),
    var(--glass-shadow) !important;
}
.card:hover,
.survey-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 0 0 7px rgba(56, 189, 248, .05),
    inset 0 0 0 8px rgba(56, 189, 248, .22),
    var(--glass-glow) !important;
}

/* عنوان الصفحة: خيط ضوء رسمي يمشي ببطء تحته */
.admin-head h1::after,
.block > h2::after {
  content: "";
  display: block;
  height: 2px;
  width: 96px;
  margin-top: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lux-azure), var(--lux-cyan), transparent);
  background-size: 220% 100%;
  animation: luxSheen 5.5s linear infinite;
}
@keyframes luxSheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* الشريط الجانبي: عمق زجاجي + مؤشّر ضوئي للعنصر النشط */
.admin-side {
  background: linear-gradient(180deg, rgba(9, 16, 38, .86), rgba(6, 11, 26, .72)) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-color: rgba(255, 255, 255, .12) !important;
}
.admin-nav a {
  position: relative;
  overflow: hidden;
  transition: background-color .28s var(--lux-ease), color .28s var(--lux-ease),
              transform .28s var(--lux-ease), box-shadow .28s var(--lux-ease);
}
.admin-nav a:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateX(2px);
}
.admin-nav a[aria-current="page"] {
  background: var(--grad-royal) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -10px rgba(37, 99, 235, .95);
}
/* ومضة تمرّ مرة واحدة عبر العنصر النشط عند فتح الصفحة */
.admin-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: luxSweepOnce 1.5s var(--lux-ease) .35s 1 forwards;
  pointer-events: none;
}
@keyframes luxSweepOnce { to { transform: translateX(130%); } }

.admin-brand {
  position: relative;
  padding-bottom: var(--sp-4);
}
.admin-brand::after {
  content: "";
  position: absolute;
  bottom: 0; inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .55), transparent);
}

/* شارات وأرقام KPI: توهّج رقمي رسمي */
.stat__value, .kpi__value {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(56, 189, 248, .22);
}

/* صفوف الجدول: خيط ضوء عند المرور */
tbody tr { position: relative; }
tbody tr:hover {
  background: linear-gradient(90deg, rgba(56, 189, 248, .10), rgba(56, 189, 248, .02)) !important;
}

@media (max-width: 700px) {
  .ps-landing, .landing { padding: var(--sp-8) var(--sp-5); }
  /* الحلقات الداخلية أنحف على الهاتف حتى لا تأكل المساحة */
  .card, .landing, .ps-landing, .ps-done, .ps-message, .panel, .survey-card {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .10),
      inset 0 0 0 4px rgba(255, 255, 255, .022),
      inset 0 0 0 5px rgba(255, 255, 255, .055),
      var(--glass-shadow) !important;
  }
  /* أزرار الإجراء الرئيسية بعرض كامل على الهاتف — أسهل للنقر */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn--lg { width: 100%; justify-content: center; }
  .card, .landing, .ps-landing { border-radius: 16px !important; }
  /* التمويه مكلف على الهواتف الضعيفة: نخفّفه دون إلغاء الشكل */
  .card, .landing, .ps-landing, .step, .wizard-head {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}