/* omnium-global-reset — fix horizontal gap on mobile */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}
body {
  min-height: 100vh;
  box-sizing: border-box;
}
/* =========================================================
   OmniumHub — enhancements.css
   تحسينات بصرية بحتة — لا تؤثر على أي وظيفة
   ========================================================= */

/* ═══════════════════════════════════════════════
   1) Skeleton Loading للبطاقات (بدل spinner)
   ═══════════════════════════════════════════════ */
.skeleton-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  overflow: hidden;
  animation: skelPulse 1.6s ease-in-out infinite;
}
.skeleton-cover {
  height: 140px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
.skeleton-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.tall { height: 20px; }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes skelPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* ═══════════════════════════════════════════════
   2) Smooth Transitions لكل شيء
   ═══════════════════════════════════════════════ */
button, a, input, select, textarea {
  transition: background-color .2s ease,
              color .2s ease,
              border-color .2s ease,
              transform .15s ease,
              box-shadow .25s ease,
              opacity .2s ease;
}

/* ═══════════════════════════════════════════════
   3) Tab switching animation
   ═══════════════════════════════════════════════ */
.tab-panel.active {
  animation: fadeInUp .3s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   4) Cards entry animation (لا تعمل إذا كانت موجودة)
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .product-card,
  .p-card,
  .plan,
  .stat-card,
  .dash-stat,
  .card {
    animation-fill-mode: both;
  }
}

/* ═══════════════════════════════════════════════
   5) Toast animation (إن لم تكن موجودة)
   ═══════════════════════════════════════════════ */
.toast:not(.hidden) {
  animation: toastIn .3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ═══════════════════════════════════════════════
   6) Ripple effect على الأزرار الرئيسية
   ═══════════════════════════════════════════════ */
.btn-primary, .buy-btn, .btn-deposit, .btn-plan {
  position: relative;
  overflow: hidden;
}
.btn-primary::before,
.buy-btn::before,
.btn-deposit::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: translate(-50%, -50%);
  transition: width .4s ease, height .4s ease, opacity .4s ease;
  opacity: 0;
  pointer-events: none;
}
.btn-primary:active::before,
.buy-btn:active::before,
.btn-deposit:active::before {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: 0s;
}

/* ═══════════════════════════════════════════════
   7) Hover state محسّن للبطاقات
   ═══════════════════════════════════════════════ */
@media (hover: hover) {
  .product-card:hover,
  .p-card:hover {
    transform: translateY(-6px);
  }
  .stat-card:hover,
  .dash-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(30,136,229,.35);
    background: rgba(255,255,255,.06);
  }
}

/* ═══════════════════════════════════════════════
   8) Scrollbar أنيقة
   ═══════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1e88e5, #00c853);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #42a5f5, #3ddc84);
}

/* ═══════════════════════════════════════════════
   9) Input focus glow محسّن
   ═══════════════════════════════════════════════ */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(30,136,229,.15),
              0 0 20px -4px rgba(30,136,229,.4) !important;
}

/* ═══════════════════════════════════════════════
   10) Focus-visible (لإمكانية الوصول)
   ═══════════════════════════════════════════════ */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #42a5f5;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════
   11) عدد المشتريات اليوم — pulse خفيف
   ═══════════════════════════════════════════════ */
.product-meta .live {
  position: relative;
}
.product-meta .live::before {
  content: '●';
  color: #00c853;
  margin-left: 4px;
  font-size: 8px;
  animation: liveDot 1.5s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes liveDot {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ═══════════════════════════════════════════════
   12) Number Count Animation (فقط عند hover)
   ═══════════════════════════════════════════════ */
@media (hover: hover) {
  .stat-value:hover,
  .stat-v:hover,
  .dash-stat-v:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
    transition: all .2s ease;
  }
}

/* ═══════════════════════════════════════════════
   13) Tab underline animation
   ═══════════════════════════════════════════════ */
.tab {
  position: relative;
  overflow: hidden;
}
.tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #1e88e5, #00c853);
  transition: width .3s ease, left .3s ease;
}
.tab.active::after {
  width: 60%;
  left: 20%;
}

/* ═══════════════════════════════════════════════
   14) Price pulse at hover
   ═══════════════════════════════════════════════ */
@media (hover: hover) {
  .price-value {
    transition: all .2s ease;
  }
  .product-card:hover .price-value {
    transform: scale(1.05);
    filter: brightness(1.15);
  }
}

/* ═══════════════════════════════════════════════
   15) Modal backdrop blur enhanced
   ═══════════════════════════════════════════════ */
.modal-overlay:not(.hidden),
.modal:not(.hidden),
.review-modal:not(.hidden),
.notif-modal:not(.hidden) {
  animation: backdropIn .25s ease;
}
@keyframes backdropIn {
  from { backdrop-filter: blur(0); background: rgba(3,11,28,0); }
  to   { backdrop-filter: blur(10px); background: rgba(3,11,28,.85); }
}

/* ═══════════════════════════════════════════════
   16) بطاقة الخصم — subtle glow
   ═══════════════════════════════════════════════ */
.product-card:has(.discount-badge) {
  border-color: rgba(255,179,0,.25);
}
@media (hover: hover) {
  .product-card:has(.discount-badge):hover {
    box-shadow: 0 26px 50px -20px rgba(255,179,0,.5);
    border-color: rgba(255,179,0,.5);
  }
}

/* ═══════════════════════════════════════════════
   17) Skeleton page-level loader
   ═══════════════════════════════════════════════ */
#skeleton-loader {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}
#skeleton-loader.hidden { display: none; }

/* ═══════════════════════════════════════════════
   18) Fade-in for page load
   ═══════════════════════════════════════════════ */
body:not(.no-fade) {
  animation: pageIn .4s ease;
}
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════
   19) Selection color
   ═══════════════════════════════════════════════ */
::selection {
  background: rgba(30,136,229,.4);
  color: #fff;
}

/* ═══════════════════════════════════════════════
   20) Badge pulse for new/hot
   ═══════════════════════════════════════════════ */
.product-badge.badge-hot {
  animation: badgeHot 2s ease-in-out infinite;
}
@keyframes badgeHot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}


/* ============ Welcome Bonus ($10) — Phase 3 ============ */
.welcome-banner {
  margin: 12px 16px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  background: linear-gradient(135deg, rgba(255,138,0,.15), rgba(233,30,99,.12));
  border: 1px solid rgba(255,138,0,.4);
  color: #ffd166;
}
.welcome-banner[hidden] { display: none !important; }
.welcome-banner b { color: #fff; }
.welcome-banner.welcome-ready {
  background: linear-gradient(135deg, rgba(0,200,83,.18), rgba(30,136,229,.15));
  border-color: rgba(0,200,83,.5);
  color: #3ddc84;
  animation: wbPulse 2s ease-in-out infinite;
}
.welcome-banner.welcome-activated {
  background: linear-gradient(135deg, rgba(0,200,83,.12), rgba(30,136,229,.1));
  border-color: rgba(0,200,83,.35);
  color: #3ddc84;
}
.welcome-banner.welcome-expired {
  background: rgba(120,120,120,.1);
  border-color: rgba(120,120,120,.25);
  color: #a7b4c6;
  opacity: .7;
}
.welcome-countdown {
  font-family: 'Inter', monospace;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
}
.welcome-progress { font-weight: 700; }
@keyframes wbPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,200,83,.4); }
  50% { box-shadow: 0 0 24px 4px rgba(0,200,83,.6); }
}

.welcome-activate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff8a00, #ff5252);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: 0 10px 24px -10px rgba(255,82,82,.7);
  animation: wbBtnPulse 2s ease-in-out infinite;
}
.welcome-activate-btn[hidden] { display: none !important; }
.welcome-activate-btn:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.05); }
.welcome-activate-btn:disabled { opacity: .55; cursor: not-allowed; animation: none; }
@keyframes wbBtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.welcome-activate-info {
  text-align: center;
  font-size: 12px;
  color: #a7b4c6;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255,179,0,.08);
  border: 1px solid rgba(255,179,0,.25);
  border-radius: 10px;
  line-height: 1.7;
}
.welcome-activate-info[hidden] { display: none !important; }


/* ============================================================
   Phase 9 — Animated background + UI polish
   GPU-accelerated, respects prefers-reduced-motion, no JS.
   ============================================================ */

/* Isolated stacking context so z-index:-1 orbs sit above body bg but below content */
body { isolation: isolate; }










/* ============================================================
   Additional UI polish (non-invasive)
   ============================================================ */

/* Smooth scroll for anchor navigation, gated on user preference */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Consistent focus ring across the site — only :focus-visible (keyboard) */
:focus-visible {
  outline: 2px solid rgba(66,165,245,0.7);
  outline-offset: 2px;
}

/* Custom scrollbar — dark theme, unobtrusive */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(66,165,245,0.45); background-clip: padding-box; }
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) rgba(255,255,255,0.02);
}


/* ============ Custom file input ============ */
.cf-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(30,136,229,.12);
  border: 1px solid rgba(30,136,229,.4);
  color: #42a5f5;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, transform .1s;
  user-select: none;
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
}
.cf-label:hover { background: rgba(30,136,229,.25); transform: translateY(-1px); }
.cf-label.has-file { background: rgba(0,200,83,.12); border-color: rgba(0,200,83,.4); color: #3ddc84; }
.cf-icon { font-size: 14px; flex-shrink: 0; }
.cf-text { overflow: hidden; text-overflow: ellipsis; max-width: 300px; white-space: nowrap; }


/* =========================================================
   P5: UX polish — interactive feedback + smoother motion
   ========================================================= */

/* 1) Global button active feedback */
button, .btn, [role="button"], a.btn,
.action-card, .product-card, .p-card, .p-item,
.buy-btn, .btn-primary, .btn-ghost, .btn-danger, .btn-edit,
.btn-open, .btn-download, .btn-copy-sm, .btn-add, .btn-secondary,
.pay-btn, .copy-btn, .icon-btn {
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, opacity .15s ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

button:active, .btn:active, [role="button"]:active, a.btn:active,
.action-card:active, .buy-btn:active, .btn-primary:active,
.btn-ghost:active, .btn-danger:active, .btn-edit:active,
.btn-open:active, .btn-download:active, .btn-copy-sm:active,
.btn-add:active, .btn-secondary:active, .pay-btn:active,
.copy-btn:active, .icon-btn:active {
  transform: scale(0.96) translateY(1px);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .25);
  opacity: .92;
}

/* Cards keep their hover but gentle press */
.product-card:active, .p-card:active, .p-item:active {
  transform: scale(0.99) translateY(1px);
}

/* 2) Focus-visible ring (accessibility, do not remove outline for keyboard users) */
button:focus-visible, .btn:focus-visible, a:focus-visible,
[role="button"]:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid #42a5f5;
  outline-offset: 2px;
  border-radius: inherit;
}

/* 3) Enhanced bg-orbs (only if element exists in page) */
bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .55;
}
.bg-orbs::before,
.bg-orbs::after,
bg-orbs > span {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  animation: orbFloat 22s ease-in-out infinite;
}






/* 4) Subtle hover polish on links & soft transitions on inputs */
a { transition: color .15s ease, opacity .15s ease; }
a:hover { opacity: .9; }
input, textarea, select { transition: border-color .18s ease, box-shadow .18s ease; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(66,165,245,.65);
  box-shadow: 0 0 0 3px rgba(66,165,245,.15);
}

/* 5) Smooth scroll (respect prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* =========================================================
   P5-FIX-2: HARD overrides (guaranteed visible)
   ========================================================= */

/* 1) bg-orbs MUST be behind everything */
bg-orbs {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: .55 !important;
}
.bg-orbs::before,
.bg-orbs::after,
.bg-orbs > span,
.bg-orbs > span:nth-child(1),
.bg-orbs > span:nth-child(2),
bg-orbs > span:nth-child(3) {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(70px) !important;
  animation: orbFloat 22s ease-in-out infinite !important;
}

/* 2) Button press HARD feedback */
button:active, .btn:active, [role="button"]:active,
.buy-btn:active, .btn-primary:active, .cover-btn:active {
  transform: scale(0.94) translateY(2px) !important;
  filter: brightness(0.85) !important;
  transition: transform .08s ease, filter .08s ease !important;
}

/* 3) Ensure cover buttons are interactive */
.cover-btn, .cover-upload-actions button {
  cursor: pointer !important;
  pointer-events: auto !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 1 !important;
}
.cover-upload-wrap {
  position: relative !important;
  z-index: 1 !important;
}


/* P5-FIX-3: bg-orbs guaranteed visible (z-index 0, body content z-index 1) */
body { position: relative; z-index: 1; }











/* IMPORTANT: override reduced-motion disable (you explicitly want animation) */



/* P5-FIX-3: :active MUST win over :hover */
button, .btn, [role="button"], a.btn,
.buy-btn, .btn-primary, .btn-ghost, .btn-danger, .btn-edit,
.btn-open, .btn-download, .btn-copy-sm, .btn-add, .btn-secondary,
.pay-btn, .copy-btn, .icon-btn, .cover-btn {
  transition: transform .1s ease, filter .1s ease, box-shadow .15s ease !important;
  cursor: pointer !important;
}

button:active, .btn:active, [role="button"]:active, a.btn:active,
.buy-btn:active, .btn-primary:active, .btn-ghost:active, .btn-danger:active,
.btn-edit:active, .btn-open:active, .btn-download:active, .btn-copy-sm:active,
.btn-add:active, .btn-secondary:active, .pay-btn:active, .copy-btn:active,
.icon-btn:active, .cover-btn:active {
  transform: scale(0.92) translateY(2px) !important;
  filter: brightness(0.75) !important;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.35) !important;
  transition: transform .06s ease, filter .06s ease !important;
}

/* Even with reduced-motion, keep :active feedback (instant, no animation) */



/* =========================================================
   P5-FIX-4: CLEAN bg-orbs + :active
   ========================================================= */
body { isolation: isolate; }

.bg-orbs {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  contain: none !important;
  transform: none !important;
}
.bg-orbs > span,
.bg-orbs::before,
.bg-orbs::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  border-radius: 50% !important;
  filter: blur(55px) !important;
  opacity: 0.6 !important;
  will-change: transform !important;
  animation: _orbFloat4 24s ease-in-out infinite !important;
  pointer-events: none !important;
}
.bg-orbs::before {
  width: 500px !important; height: 500px !important;
  top: -140px !important; left: -140px !important;
  background: radial-gradient(circle, rgba(61,220,132,.85) 0%, rgba(61,220,132,0) 70%) !important;
}
.bg-orbs::after {
  width: 520px !important; height: 520px !important;
  bottom: -160px !important; right: -180px !important;
  background: radial-gradient(circle, rgba(66,165,245,.85) 0%, rgba(66,165,245,0) 70%) !important;
  animation-delay: -8s !important;
}
.bg-orbs > span:nth-child(1) {
  width: 380px !important; height: 380px !important;
  left: 25% !important; top: 15% !important;
  background: radial-gradient(circle, rgba(233,30,99,.75) 0%, rgba(233,30,99,0) 70%) !important;
  animation-delay: -4s !important;
}
.bg-orbs > span:nth-child(2) {
  width: 340px !important; height: 340px !important;
  right: 10% !important; top: 40% !important;
  background: radial-gradient(circle, rgba(255,138,0,.75) 0%, rgba(255,138,0,0) 70%) !important;
  animation-delay: -12s !important;
}
.bg-orbs > span:nth-child(3) {
  width: 300px !important; height: 300px !important;
  left: 15% !important; bottom: 10% !important;
  background: radial-gradient(circle, rgba(156,39,176,.75) 0%, rgba(156,39,176,0) 70%) !important;
  animation-delay: -18s !important;
}
.bg-orbs > span:nth-child(4) {
  width: 260px !important; height: 260px !important;
  right: 35% !important; bottom: 5% !important;
  background: radial-gradient(circle, rgba(0,188,212,.75) 0%, rgba(0,188,212,0) 70%) !important;
  animation-delay: -6s !important;
}
@keyframes _orbFloat4 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25%      { transform: translate3d(45px, -35px, 0) scale(1.09); }
  50%      { transform: translate3d(-30px, 40px, 0) scale(0.93); }
  75%      { transform: translate3d(25px, 20px, 0) scale(1.05); }
}

/* Content above bg-orbs */


/* :active HARD */
button:active,
.btn:active,
[role="button"]:active,
a.btn:active,
.buy-btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn-danger:active,
.btn-edit:active,
.btn-open:active,
.btn-download:active,
.btn-copy-sm:active,
.btn-add:active,
.btn-secondary:active,
.pay-btn:active,
.copy-btn:active,
.icon-btn:active,
.cover-btn:active {
  transform: scale(0.90) translateY(2px) !important;
  filter: brightness(0.7) !important;
  box-shadow: inset 0 3px 12px rgba(0,0,0,.45) !important;
  transition: transform .05s ease, filter .05s ease !important;
}


/* =========================================================
   P6.5-FIX-5: UI polish — better contrast & depth
   ========================================================= */
.product-card, .action-card, .p-card, .p-item, .dash-stat,
.form-card, .auth-card, .login-card, .panel, .user-menu,
.welcome-banner, .card, .stat, .stat-card {
  background-color: rgba(255, 255, 255, .075) !important;
  border-color: rgba(255, 255, 255, .13) !important;
}
.product-card:hover, .action-card:hover, .p-card:hover {
  background-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(66, 165, 245, .15) inset !important;
}
.product-desc, .p-desc, .p-item-meta, .action-sub, .dash-stat-l, small {
  color: #b8c6d8 !important;
}
label, .field label, .form-label {
  color: #e0e8f2 !important;
  font-weight: 600 !important;
}
input:not([type="file"]):not([type="hidden"]), textarea, select {
  background-color: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #e6edf5 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(66, 165, 245, .7) !important;
  background-color: rgba(255, 255, 255, .08) !important;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .product-card, .action-card, .p-card, .dash-stat, .form-card, .panel {
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
  }
}
.auth-card, .login-card {
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.055)) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65) !important;
}


/* P6.5-FIX-7: contrast + opacity */
body { color: #f8fafc; }

/* Solid dark background for cards (more opaque) */
.product-card, .p-card, .p-item, .dash-stat, .form-card, .auth-card, .login-card, .panel, .welcome-banner, .stat, .stat-card {
  background-color: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Light-bg action cards: black text */
.action-card.action-purchases,
.action-card.action-invite,
.action-card.action-feedback,
.action-card.action-family,
.action-card.action-buy {
  color: #0f172a !important;
}
.action-card.action-purchases .action-title,
.action-card.action-purchases .action-sub,
.action-card.action-purchases .action-arrow,
.action-card.action-invite .action-title,
.action-card.action-invite .action-sub,
.action-card.action-invite .action-arrow,
.action-card.action-feedback .action-title,
.action-card.action-feedback .action-sub,
.action-card.action-feedback .action-arrow,
.action-card.action-family .action-title,
.action-card.action-family .action-sub,
.action-card.action-family .action-arrow,
.action-card.action-buy .action-title,
.action-card.action-buy .action-sub,
.action-card.action-buy .action-arrow {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* Dark-bg action cards: white text + shadow */
.action-card.action-wallet .action-title,
.action-card.action-wallet .action-sub,
.action-card.action-wallet .action-arrow,
.action-card.action-seller .action-title,
.action-card.action-seller .action-sub,
.action-card.action-seller .action-arrow {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* Secondary text contrast */
.product-desc, .p-desc, .p-item-meta, .action-sub, .dash-stat-l, small, .text-muted {
  color: #cbd5e1 !important;
}
label, .form-label {
  color: #f1f5f9 !important;
}

/* Inputs */
input, textarea, select {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}