/**
 * Asabsys Cosmic brand — unified with React SPA (dev-frontend-v2).
 * COLORS ONLY. No layout / spacing / feature logic changes.
 *
 * Palette (React):
 *   bg #08080f | teal #4ecdc4 | copper #ff6b35 | indigo #6366f1
 *   sky #38bdf8 | emerald #34d399 | amber warn #fbbf24 | rose #fb7185
 */

:root {
  --asab-bg: #08080f;
  --asab-bg-elev: #0a0a18;
  --asab-surface: rgba(255, 255, 255, 0.05);
  --asab-surface-2: rgba(255, 255, 255, 0.08);
  --asab-ink: #f1f5f9;
  --asab-muted: #94a3b8;
  --asab-line: rgba(255, 255, 255, 0.12);
  --asab-teal: #4ecdc4;
  --asab-teal-soft: rgba(78, 205, 196, 0.16);
  --asab-copper: #ff6b35;
  --asab-copper-soft: rgba(255, 107, 53, 0.16);
  --asab-copper-deep: #e85a28;
  --asab-indigo: #6366f1;
  --asab-indigo-soft: rgba(99, 102, 241, 0.18);
  --asab-sky: #38bdf8;
  --asab-emerald: #34d399;
  --asab-amber: #fbbf24;
  --asab-rose: #fb7185;
  --asab-grad: linear-gradient(135deg, #4ecdc4 0%, #ff6b35 100%);
  --asab-grad-indigo: linear-gradient(135deg, #6366f1 0%, #4ecdc4 100%);

  /* Remap production cosmic / brand tokens (was gold) */
  --cos-bg: transparent;
  --cos-warm: #ffffff;
  --cos-card: var(--asab-surface);
  --cos-card-hov: rgba(255, 255, 255, 0.10);
  --cos-card-grad: var(--asab-surface);
  --cos-border: var(--asab-line);
  --cos-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
  --cos-shadow-hov: 0 8px 40px rgba(0, 0, 0, 0.45);
  --cos-text: var(--asab-ink);
  --cos-text-dim: rgba(241, 245, 249, 0.55);
  --cos-gold: var(--asab-copper);
  --cos-gold-glow: var(--asab-copper-soft);
  --cos-gold-dim: rgba(255, 107, 53, 0.12);
  --cos-emerald: var(--asab-teal);
  --cos-sky: var(--asab-sky);
  --cos-red: var(--asab-rose);
  --cos-purple: var(--asab-indigo);
  --cos-purple2: #818cf8;
  --cos-surface: var(--asab-surface);
  --cos-surface-0: transparent;
  --cos-surface-1: var(--asab-surface);
  --cos-surface-2: var(--asab-surface-2);
  --cos-surface-3: rgba(255, 255, 255, 0.12);

  /* Site chrome + legacy aliases */
  --asab-chrome-gold: #ff6b35;
  --asab-chrome-bg: rgba(8, 8, 15, 0.94);
  --accent-gold: var(--asab-copper);
  --color-primary: var(--asab-teal);
  --accent: var(--asab-teal);
  --yellow: var(--asab-copper);
  --primary: var(--asab-teal);
  --brand: var(--asab-copper);
  --co-brand-grad: var(--asab-grad) !important;
  --glass-bg: var(--asab-surface);
  --glass-border: var(--asab-line);
  --hover-glow: rgba(78, 205, 196, 0.35);
}

html {
  background: var(--asab-bg) !important;
  color-scheme: dark;
}

body {
  background-color: transparent !important;
  color: var(--asab-ink);
}

#video-bg,
.video-bg,
#bg-container {
  background-color: #08080f !important;
}

/* Match React .cosmos-bg — homepage + all public pages + dashboards */
html body,
html[data-shops-dir] body,
body.sd-dark-mode,
body.br-dark-mode {
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(78, 205, 196, 0.07) 0%, transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(78, 205, 196, 0.08), transparent 35%),
    radial-gradient(circle at 85% 20%, rgba(255, 107, 53, 0.1), transparent 30%) !important;
  background-attachment: fixed !important;
  background-color: #090a0f !important;
  color: #f1f5f9 !important;
}

/* Hard-kill turquoise emerald cubes if a script still injects them */
#neural-bg,
canvas#neural-bg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Surfaces / cards ── */
.glass-card,
.stat-card,
.stat-card-neo,
.analytics-glass-card,
.table-container,
.cosmic-card,
.premium-card,
.modal-box,
.sidebar,
.topbar,
.br-sidebar,
.br-topbar,
.admin-sidebar,
.card,
.panel {
  border-color: var(--asab-line) !important;
}

.stat-card-neo,
.glass-card,
.table-container,
.analytics-glass-card,
.premium-card,
.cosmic-card {
  background: var(--asab-surface) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

/* ── Primary CTAs → teal→copper ── */
.btn-primary,
button.btn-primary,
.qa-btn.primary,
.inv-action-btn.btn-primary,
.btn-gold,
button.btn-gold,
.gold-btn,
.br-btn-primary,
.action-btn-primary,
.cta-primary,
.brand-btn,
.plan-tile-cta,
.ad-cta-btn,
a.ad-cta-btn,
.ad-cta-btn.gold,
a.ad-cta-btn.gold,
.premium-stores-btn,
a.premium-stores-btn,
.browse-stores-btn,
a.browse-stores-btn {
  background: var(--asab-grad) !important;
  background-image: linear-gradient(135deg, #4ecdc4 0%, #ff6b35 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #0b1120 !important;
  box-shadow: 0 8px 26px rgba(78, 205, 196, 0.35), 0 14px 36px rgba(255, 107, 53, 0.25) !important;
}
.ad-cta-btn:hover,
a.ad-cta-btn:hover,
.ad-cta-btn.gold:hover,
a.ad-cta-btn.gold:hover,
.premium-stores-btn:hover,
a.premium-stores-btn:hover,
.browse-stores-btn:hover,
a.browse-stores-btn:hover {
  background-image: linear-gradient(135deg, #ff6b35 0%, #4ecdc4 100%) !important;
  color: #0b1120 !important;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.45), 0 8px 22px rgba(78, 205, 196, 0.35) !important;
}

/* Pearl login keeps dark glass (already Cosmic); only tint text accents */
#login-btn.pearl-btn-login,
.pearl-btn-login {
  /* leave pearl dark surface — Cosmic login aesthetic */
}

.pearl-btn-login .pearl-p-login,
.pearl-btn-login .pearl-p-login i,
.pearl-btn-login .pearl-p-login span {
  color: #4ecdc4 !important;
  -webkit-text-fill-color: #4ecdc4 !important;
}

/* ── Site chrome: gold → copper ── */
.asab-chrome button i,
.asab-chrome .asab-chrome-btn i,
.asab-chrome-drawer-links a i,
.asab-chrome [class*="icon"] {
  color: var(--asab-copper) !important;
}

html.asab-chrome-storefront .asab-chrome #cart-btn.asab-chrome-cart {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  border: 1px solid rgba(255, 107, 53, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(255, 107, 53, 0.4) !important;
}

/* ── Homepage gold → Cosmic ── */
.nav-center-btns .btn-pill#btn-apply-nav {
  background: linear-gradient(135deg, #4ecdc4 0%, #ff6b35 50%, #e85a28 100%) !important;
  color: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 16px rgba(78, 205, 196, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  animation: none !important;
}
.nav-center-btns .btn-pill#btn-apply-nav i {
  color: #0b1120 !important;
}
.nav-center-btns .btn-pill#btn-apply-nav:hover,
.nav-center-btns .btn-pill#btn-apply-nav:focus-visible {
  background: linear-gradient(135deg, #ff6b35 0%, #4ecdc4 100%) !important;
  box-shadow: 0 6px 22px rgba(255, 107, 53, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  color: #0b1120 !important;
}

.hero-brand-name,
#hero-brand-static,
.brand-name {
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #f8fafc !important;
  color: #f8fafc !important;
  text-shadow:
    0 0 28px rgba(78, 205, 196, 0.4),
    0 2px 0 rgba(255, 107, 53, 0.35) !important;
  filter: none !important;
  animation: none !important;
}

.home-seo-hub-grid a:hover { border-color: #ff6b35 !important; }
.home-seo-hub-grid i,
.home-seo-hub-grid a.home-seo-hub-cta i { color: #ff6b35 !important; }

.plan-tile-vip {
  background: linear-gradient(160deg, rgba(78, 205, 196, 0.08) 0%, rgba(255, 107, 53, 0.12) 100%) !important;
  border-color: rgba(255, 107, 53, 0.55) !important;
  box-shadow: 0 15px 50px -12px rgba(255, 107, 53, 0.28) !important;
}
.plan-tile-vip:hover {
  box-shadow: 0 25px 60px -12px rgba(255, 107, 53, 0.45) !important;
  border-color: #ff6b35 !important;
}
.plan-tile-yearly.plan-tile-featured {
  background: rgba(20, 20, 28, 0.96) !important;
  border-color: rgba(78, 205, 196, 0.4) !important;
  box-shadow: 0 20px 60px -12px rgba(78, 205, 196, 0.25) !important;
}
.plan-tile-popular {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  box-shadow: 0 4px 14px rgba(78, 205, 196, 0.45) !important;
  animation: none !important;
}
.plan-tile-vip .plan-tile-badge {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(255, 107, 53, 0.2)) !important;
  color: #ff6b35 !important;
}
.plan-tile-vip .plan-tile-name {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.plan-tile-vip .plan-tile-price .amount { color: #ff6b35 !important; }
.plan-tile-vip .plan-tile-price .cur,
.plan-tile-vip .plan-tile-period { color: rgba(255, 107, 53, 0.75) !important; }
.feat-on-gold i { color: #22c55e !important; }
.plan-tile-cta:hover {
  background: linear-gradient(135deg, #ff6b35, #4ecdc4) !important;
  box-shadow: 0 8px 28px rgba(255, 107, 53, 0.45) !important;
}

/* Ad wing definition chips — same Cosmic copper on both wings */
.ad-sponsor-badge,
.ad-sponsor-badge.gold,
.hero-ad-wing .ad-sponsor-badge,
.hero-ad-wing .ad-sponsor-badge.gold {
  background: rgba(255, 107, 53, 0.18) !important;
  color: #ffb08a !important;
  border-color: rgba(255, 107, 53, 0.45) !important;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.18) !important;
}
.ad-sponsor-badge i,
.hero-ad-wing .ad-sponsor-badge i {
  color: #ff6b35 !important;
}
.hero-ad-wing .ad-dot {
  background: rgba(78, 205, 196, 0.35) !important;
}
.hero-ad-wing .ad-dot.active {
  background: #ff6b35 !important;
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.55) !important;
}
.button-container .arrow,
.browse-arrow {
  color: #ff6b35 !important;
}

/* Login / register leftover gold chips */
.btn-back-dis,
button.btn-back-dis {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  border-color: transparent !important;
  color: #0b1120 !important;
}

/* Customer portal lang active */
.cust-langs button.active {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35) !important;
}

/* ── Branch dashboard gold !important → Cosmic ── */
html body.br-dark-mode .br-nav-links a:hover,
html body.br-dark-mode .br-nav-links li.br-active a {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(78, 205, 196, 0.08)) !important;
  border-color: rgba(78, 205, 196, 0.4) !important;
  box-shadow: 0 2px 16px rgba(78, 205, 196, 0.18), inset 0 1px 0 rgba(78, 205, 196, 0.12) !important;
}
html body.br-dark-mode .br-nav-links li.br-active a,
html body.br-dark-mode .br-nav-links li.br-active a span {
  color: #f1f5f9 !important;
}
html body.br-dark-mode .br-nav-links li.br-active a i,
html body .br-nav-links li.br-active a i {
  color: #4ecdc4 !important;
  filter: drop-shadow(0 0 6px rgba(78, 205, 196, 0.55)) !important;
}

html body.br-dark-mode .br-side-sale-btn,
html body .br-side-sale-btn {
  color: #0b1120 !important;
  background-color: transparent !important;
  background-image: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  border: 1px solid rgba(78, 205, 196, 0.45) !important;
  box-shadow: 0 4px 16px rgba(78, 205, 196, 0.35), 0 0 24px rgba(255, 107, 53, 0.15) !important;
}
html body.br-dark-mode .br-side-sale-btn:hover,
html body .br-side-sale-btn:hover {
  background-image: linear-gradient(135deg, #ff6b35, #4ecdc4) !important;
  box-shadow: 0 6px 22px rgba(255, 107, 53, 0.45), 0 0 32px rgba(78, 205, 196, 0.25) !important;
}
html body.br-dark-mode .br-side-sale-btn i { color: #0b1120 !important; }

html body.br-dark-mode .br-btn-primary,
html body .br-btn-primary,
html body .br-action-primary,
html body .btn-gold,
html body .gold-gradient,
html body .primary-gold {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  background-image: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  border-color: transparent !important;
}

html body:not(#_) .inst-action-btn {
  border-color: rgba(78, 205, 196, 0.25) !important;
  color: #e2e8f0 !important;
}
html body:not(#_) .inst-action-btn:hover {
  border-color: rgba(78, 205, 196, 0.45) !important;
}
html body:not(#_) .inst-action-btn.pay-btn {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  border-color: transparent !important;
}
html body:not(#_) .inst-action-btn.pay-btn:hover {
  background: linear-gradient(135deg, #ff6b35, #e85a28) !important;
  border-color: transparent !important;
}
html body:not(#_) .inst-action-btn.partial-btn {
  color: #ff6b35 !important;
  border-color: rgba(255, 107, 53, 0.35) !important;
}

/* Sidebar active (all dashboards) */
.sidebar .nav-links li.active > a,
.sidebar .nav-links a.active,
aside.sidebar li.active > a,
.br-nav-links li.br-active > a,
.nav-links li.active > a {
  border-color: rgba(78, 205, 196, 0.35) !important;
  box-shadow: 0 0 20px rgba(78, 205, 196, 0.12) !important;
  background: rgba(78, 205, 196, 0.08) !important;
}

html body .sidebar .nav-links li.active a i {
  color: #4ecdc4 !important;
  filter: drop-shadow(0 0 6px rgba(78, 205, 196, 0.55)) !important;
}

/* Gold text utilities → copper */
.text-gold,
.gold-text,
.color-gold,
.vip-text,
.gold,
.accent-gold,
.br-gold,
[class*="text-gold"],
[class*="gold-text"],
.stat-value.gold {
  color: #ff6b35 !important;
  -webkit-text-fill-color: #ff6b35 !important;
}

.border-gold,
.br-border-gold,
[class*="border-gold"] {
  border-color: rgba(255, 107, 53, 0.5) !important;
}

.bg-gold,
[class*="bg-gold"] {
  background: var(--asab-grad) !important;
  color: #0b1120 !important;
}

.plan-badge,
.vip-pill,
.subscription-badge,
#vip-badge,
.account-plan-badge,
.br-badge-vip,
.vip-badge {
  border-color: rgba(255, 107, 53, 0.45) !important;
  color: var(--asab-copper) !important;
  background: rgba(255, 107, 53, 0.12) !important;
}

.exchange-ticker-wrap {
  background: #050508 !important;
  border-bottom-color: rgba(251, 191, 36, 0.15) !important;
}

a:hover,
.nav-links a:hover {
  color: var(--asab-teal);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(78, 205, 196, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.12) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(78, 205, 196, 0.35) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 53, 0.45) !important;
}

.login-card,
.auth-card,
.index-hero-glass,
.hero-glass,
.stores-bar {
  background: var(--asab-surface) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

.asab-chrome,
#asab-chrome,
.site-chrome {
  border-color: var(--asab-line);
}

[data-shops-dir] .store-card .sill,
.shops-dir .store-card .door {
  border-color: rgba(78, 205, 196, 0.35);
}

/* Theme cohesion brand gradient */
html body,
:root {
  --co-brand-grad: linear-gradient(135deg, #4ecdc4 0%, #ff6b35 100%) !important;
}

/* Modal gold buttons (theme-cohesion) */
.modal-box .btn-gold,
.modal-box .gold-btn {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
}

/* Blog / marketing pages that still hardcode gold (when this sheet is linked) */
.nav .cta,
.langs a.active,
.step-num,
.cta-box a,
a[style*="#d4af37"],
a[style*="#D4AF37"] {
  /* style attrs win for color; class-based CTAs covered above */
}

.cta-box h3,
.footer a {
  color: #ff6b35 !important;
}
.nav a:hover,
.langs a:hover {
  color: #ff6b35 !important;
  border-color: rgba(255, 107, 53, 0.4) !important;
}
.nav .cta,
.langs a.active,
.step-num {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  border-color: transparent !important;
}
.brand-name {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   KILL CREAM — full Cosmic dark surfaces (React cosmos)
   ═══════════════════════════════════════════════════════════ */
html,
body {
  background-color: #090a0f !important;
  color: #f1f5f9 !important;
}

/* Hero shell — charcoal mix matching page bg (no indigo/navy/purple) */
.hero-deck-with-wings,
#hero-deck-wings {
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(12, 13, 18, 0.97) 0%, rgba(9, 10, 15, 0.99) 100%) !important;
  box-shadow:
    0 28px 80px -18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.hero-deck-with-wings .index-hero-glass,
.hero-deck-with-wings .hero-ad-wing {
  border-radius: 0 !important;
}
/* Brand strip under hero — white silhouettes on dark */
.logo-slider-item img {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}
.logo-slider-item img:hover {
  filter: brightness(0) invert(1) opacity(1) !important;
}

/* High-contrast hero type */
.hero-title,
#hero-section h1 {
  color: #f8fafc !important;
  background: none !important;
  -webkit-text-fill-color: #f8fafc !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.hero-badge {
  color: #ffb08a !important;
  background: rgba(255, 107, 53, 0.14) !important;
  border-color: rgba(255, 107, 53, 0.4) !important;
}
.hero-badge i { color: #ff6b35 !important; }
.hero-sub,
.hero-sub strong {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}
.hero-sub strong { color: #f1f5f9 !important; -webkit-text-fill-color: #f1f5f9 !important; }

#hero-deck-wings .index-hero-glass,
.index-hero-glass,
.hero-glass {
  background: transparent !important;
  color: #f1f5f9 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#hero-section h1,
#hero-section .hero-title,
.index-hero-glass h1,
.hero-sub,
#hero-section .hero-sub {
  color: #f1f5f9 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65) !important;
}

/* Stat chips inside hero — dark cards + light ink */
.index-hero-glass .stat-card,
.index-hero-glass .hero-stat,
#hero-glass .stat-mini,
.hero-stats .stat,
.hero-stats .hero-stat,
.hero-metrics .metric {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e8eef7 !important;
}
.hero-stat .hero-stat-value,
.hero-stat .hero-stat-label,
.hero-stat span,
.hero-stat p {
  color: #e8eef7 !important;
  -webkit-text-fill-color: #e8eef7 !important;
}
.hero-stats {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, 0.45) !important;
}
.hero-ad-wing {
  background: rgba(9, 10, 15, 0.35) !important;
  border-radius: 0 !important;
}
.hero-ad-wing .ad-footer-card {
  background: rgba(12, 13, 18, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;
}
.hero-ad-wing .ad-store-name { color: #f8fafc !important; }
.hero-ad-wing .ad-store-offer { color: #ffb08a !important; }
.hero-stat-num,
.hero-stat .hero-stat-num {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: none !important;
}
.hero-stat-lbl,
.hero-stat .hero-stat-lbl {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}
.hero-feature-ticker,
.hero-feature-ticker .hft-item,
.hero-feature-ticker .hft-item span {
  color: #e2e8f0 !important;
}
/* Contact / meta links only — pill nav keeps its own white text */
.site-footer .footer-contact a,
.site-footer .footer-contact-link,
.site-footer .footer-copy a {
  color: #5eead4 !important;
}
.site-footer .footer-contact a:hover,
.site-footer .footer-contact-link:hover,
.site-footer .footer-copy a:hover {
  color: #ff6b35 !important;
}

/* Kill indigo orb wash on public cosmos bg */
.cosmos-orb.a {
  background: rgba(255, 107, 53, 0.22) !important;
}
.pricing-plans-section h2,
.shop-categories-section h2,
.shop-cats-desc,
.dashboard-preview-section h2 {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: none !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* FAQ + SEO hub — charcoal cards, no indigo */
.home-faq-section,
.home-seo-hub {
  background: rgba(20, 20, 28, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55) !important;
  color: #f1f5f9 !important;
}
.home-seo-hub h2,
.home-faq-section h2 {
  color: #f1f5f9 !important;
}
.home-seo-hub-sub,
.home-faq-sub {
  color: #93a4b8 !important;
}
.home-seo-hub-grid a {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 107, 53, 0.35) !important;
  color: #f1f5f9 !important;
}
.home-seo-hub-grid a:hover {
  border-color: #ff6b35 !important;
  background: rgba(255, 107, 53, 0.12) !important;
}
.home-seo-hub-grid i {
  color: #ff6b35 !important;
}
.home-seo-hub-grid a.home-seo-hub-cta {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
}
.home-seo-hub-grid a.home-seo-hub-cta i {
  color: #0b1120 !important;
}
.home-faq-list details {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  color: #e8eef7 !important;
}
.home-faq-list summary {
  color: #f1f5f9 !important;
}
.home-faq-list details p {
  color: #93a4b8 !important;
}

/* Pricing tiles — charcoal + high-contrast type (beats plan-cards dark ink) */
.pricing-plans-section .plan-tile,
.pricing-plans-section .plan-tile-free,
.pricing-plans-section .plan-tile-vip,
.pricing-plans-section .plan-tile-yearly,
.plan-tile,
.plan-tile-free,
.plan-tile-vip,
.plan-tile-yearly {
  background: rgba(20, 20, 28, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 15px 40px -12px rgba(0, 0, 0, 0.45) !important;
}
.pricing-plans-section .plan-tile-free:hover,
.pricing-plans-section .plan-tile-vip:hover,
.plan-tile-free:hover,
.plan-tile-vip:hover {
  border-color: rgba(78, 205, 196, 0.45) !important;
  box-shadow: 0 20px 50px -12px rgba(78, 205, 196, 0.2) !important;
}
.pricing-plans-section .plan-tile-vip,
.plan-tile-vip {
  border-color: rgba(255, 107, 53, 0.45) !important;
}
.pricing-plans-section h2,
.pricing-plans-section [data-i18n="home_pricing_sub"],
.pricing-plans-section > div > p {
  color: #cbd5e1 !important;
}
.pricing-plans-section h2 {
  color: #f8fafc !important;
}
.pricing-plans-section .plan-tile-name,
.pricing-plans-section .plan-tile-free .plan-tile-name,
.plan-tile-name,
.plan-tile-free .plan-tile-name {
  color: #f8fafc !important;
  background: none !important;
  -webkit-text-fill-color: #f8fafc !important;
}
.pricing-plans-section .plan-tile-vip .plan-tile-name,
.plan-tile-vip .plan-tile-name {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Equal card slots — same places for badges / name / price / period / features */
.pricing-plans-section .pricing-plans-grid {
  align-items: stretch !important;
}
.pricing-plans-section .plan-tile {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transform: none !important;
}
.pricing-plans-section .plan-tile:hover {
  transform: translateY(-6px) !important;
}
.pricing-plans-section .plan-tile-yearly.plan-tile-featured {
  transform: none !important;
  z-index: 2 !important;
  border-width: 2px !important;
  border-color: rgba(255, 107, 53, 0.7) !important;
  box-shadow: 0 16px 40px -14px rgba(255, 107, 53, 0.35) !important;
}
.pricing-plans-section .plan-tile-yearly.plan-tile-featured:hover {
  transform: translateY(-6px) !important;
}
.pricing-plans-section .plan-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.35rem !important;
  min-height: 2.6rem !important;
  margin: 0 0 0.55rem !important;
  width: 100% !important;
}
.pricing-plans-section .plan-chip-row .plan-tile-badge,
.pricing-plans-section .plan-chip-row .plan-tile-popular,
.pricing-plans-section .plan-chip-row .plan-tile-discount {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  align-self: center !important;
}
.pricing-plans-section .plan-tile-name {
  min-height: 2.15rem !important;
  margin: 0 0 0.35rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
}
.pricing-plans-section .plan-tile-price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0.3rem 0.4rem !important;
  min-height: 4.5rem !important;
  margin: 0 !important;
}
.pricing-plans-section .plan-tile-price .amount,
.plan-tile-price .amount {
  color: #ff6b35 !important;
  font-size: 2.05rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
}
.pricing-plans-section .plan-tile-free .plan-tile-price .amount {
  color: #4ecdc4 !important;
}
.pricing-plans-section .plan-tile-free {
  border-color: rgba(78, 205, 196, 0.35) !important;
}
.pricing-plans-section .plan-tile-period {
  min-height: 2.5rem !important;
  margin: 0.35rem 0 0.55rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.pricing-plans-section .plan-tile-6mo .plan-tile-period,
.pricing-plans-section .plan-tile-yearly .plan-tile-period {
  color: #5eead4 !important;
}
.pricing-plans-section .plan-tile-features {
  margin-top: 0 !important;
  flex: 1 1 auto !important;
}
.pricing-plans-section .plan-tile-price .period {
  color: #94a3b8 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  width: 100% !important;
  text-align: center !important;
}
.pricing-plans-section .plan-tile-price .cur,
.pricing-plans-section .plan-tile-period,
.pricing-plans-section .plan-tile-free .plan-tile-period,
.pricing-plans-section .plan-tile-vip .plan-tile-period,
.plan-tile-price .cur,
.plan-tile-period {
  color: #e8eef7 !important;
}
.pricing-plans-section .plan-tile-price .cur,
.plan-tile-price .cur {
  background: rgba(255, 107, 53, 0.22) !important;
  color: #ffb08a !important;
  border: 1px solid rgba(255, 107, 53, 0.45) !important;
}
/* Included features — bright ink + GREEN check circles */
.pricing-plans-section .plan-tile-features li,
.pricing-plans-section .plan-tile-vip .plan-tile-features li,
.pricing-plans-section .feat-on,
.pricing-plans-section .feat-on span,
.pricing-plans-section .feat-on-gold,
.pricing-plans-section .feat-on-gold span,
.plan-tile-features li,
.feat-on,
.feat-on span,
.feat-on-gold,
.feat-on-gold span {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.pricing-plans-section .feat-on i,
.pricing-plans-section .feat-on i.bx,
.pricing-plans-section .feat-on .bx-check-circle,
.pricing-plans-section .feat-on-gold i,
.pricing-plans-section .feat-on-gold i.bx,
.pricing-plans-section .feat-on-gold .bx-check-circle,
.pricing-plans-section .plan-tile-free .feat-on i,
.pricing-plans-section .plan-tile-free .feat-on-gold i,
.feat-on i,
.feat-on-gold i,
.feat-on .bx-check-circle,
.feat-on-gold .bx-check-circle {
  color: #22c55e !important;
  -webkit-text-fill-color: #22c55e !important;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.55)) !important;
}

/* Excluded (Free plan) — readable muted text + RED X circles */
.pricing-plans-section .feat-off,
.pricing-plans-section .plan-tile-free .feat-off,
.feat-off {
  opacity: 1 !important;
}
.pricing-plans-section .feat-off span,
.pricing-plans-section .plan-tile-free .feat-off span,
.feat-off span {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(239, 68, 68, 0.65) !important;
  text-decoration-thickness: 1.5px !important;
}
.pricing-plans-section .feat-off i,
.pricing-plans-section .feat-off i.bx,
.pricing-plans-section .feat-off .bx-x-circle,
.pricing-plans-section .plan-tile-free .feat-off i,
.feat-off i,
.feat-off .bx-x-circle {
  color: #ef4444 !important;
  -webkit-text-fill-color: #ef4444 !important;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.45)) !important;
}

/* Free plan included row — bright white + green check */
.pricing-plans-section .plan-tile-free .feat-on,
.pricing-plans-section .plan-tile-free .feat-on-gold,
.pricing-plans-section .plan-tile-free .feat-on span,
.pricing-plans-section .plan-tile-free .feat-on-gold span {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

.pricing-plans-section .plan-tile-badge,
.pricing-plans-section .plan-tile-free .plan-tile-badge,
.plan-tile-badge {
  background: rgba(78, 205, 196, 0.18) !important;
  color: #5eead4 !important;
}

/* Categories / pricing wrappers that still use cream */
.shop-categories-section,
.pricing-plans-section,
.dashboard-preview-section {
  background: transparent !important;
}
/* Kill leftover indigo/purple wash behind dashboard preview */
.dashboard-preview-section .border-glow,
.dashboard-preview-section .border-glow-halo,
.dashboard-preview-section .elastic-mesh-host {
  box-shadow: none !important;
  filter: none !important;
}
.dashboard-preview-section .border-glow::before,
.dashboard-preview-section .border-glow::after {
  background: transparent !important;
  box-shadow: 0 0 40px rgba(78, 205, 196, 0.12), 0 0 60px rgba(255, 107, 53, 0.1) !important;
}

/* Footer — React cosmos glass (match page bg orbs) */
.site-footer,
#site-footer-mount .site-footer,
footer.site-footer {
  background:
    linear-gradient(180deg, rgba(9, 10, 15, 0.72) 0%, rgba(11, 18, 32, 0.94) 45%, rgba(8, 8, 15, 0.98) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(78, 205, 196, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 18% 100%, rgba(78, 205, 196, 0.1), transparent 42%),
    radial-gradient(circle at 82% 90%, rgba(255, 107, 53, 0.1), transparent 38%) !important;
  background-color: #090a0f !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45) !important;
  color: #e8eef7 !important;
}
/* Trust/cert cards removed */
.site-footer .cert-banner,
.site-footer .cert-card {
  display: none !important;
}
.site-footer .footer-logo-slider-item img {
  filter: brightness(0) invert(1) opacity(0.88) !important;
}
.site-footer .footer-logo-slider-item img:hover {
  filter: brightness(0) invert(1) opacity(1) !important;
}
.site-footer .footer-copy {
  color: #94a3b8 !important;
}
.site-footer .footer-copy span {
  color: #f1f5f9 !important;
}
.site-footer .footer-contact-link,
.site-footer .footer-contact a {
  color: #5eead4 !important;
  -webkit-text-fill-color: #5eead4 !important;
}
.site-footer .footer-contact-link:hover,
.site-footer .footer-contact a:hover {
  color: #ff6b35 !important;
  -webkit-text-fill-color: #ff6b35 !important;
}
.site-footer .footer-links a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.site-footer .footer-links a:hover {
  background: rgba(78, 205, 196, 0.2) !important;
  border-color: rgba(78, 205, 196, 0.45) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.site-footer .footer-pricing-btn {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  -webkit-text-fill-color: #0b1120 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35) !important;
}
.site-footer .footer-social a,
.site-footer .footer-channels a {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.site-footer .footer-bottom,
.site-footer .footer-bottom-row {
  border-top: none;
  padding-top: 0.35rem;
}
.site-footer .footer-rule {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent) !important;
}

/* index-redesign cream leftovers */
.nav-center-btns {
  background: rgba(8, 8, 15, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.nav-center-btns .btn-pill {
  color: #f1f5f9 !important;
  text-shadow: none !important;
}

/* meta theme helpers when pages still declare cream */
meta[name="theme-color"] {
  /* cannot style meta; pages bumped separately */
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD HEADINGS — unified high-contrast titles
   (store / branch / admin / tech) — colors + type weight only
   ═══════════════════════════════════════════════════════════ */
.page-title,
.dashboard-content h1.page-title,
.dashboard-content > h1,
.dashboard-content h2:not(.modal-header h2):not(.modal-box h2),
.card-header h2,
.card-header h3,
.card-title,
.stat-neo-title,
.stat-card .label,
.stat-label,
.kpi-label,
.ac-title,
.glass-text-premium,
.analytics-card-head .ac-title,
.br-page-title,
.admin-page-title {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.page-title,
.dashboard-content > h1,
.br-page-title,
.admin-page-title {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
}

.stat-neo-title {
  font-size: 0.84rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
  max-width: none !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

.ac-title,
.analytics-card-head .ac-title,
.glass-text-premium {
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

/* Secondary labels still readable (not warm-beige wash) */
.stat-neo-sub,
.text-muted,
.muted,
.sub-label,
#daily-revenue-widget [style*="font-size:0.68rem"],
#daily-revenue-widget [style*="font-size:0.65rem"],
#daily-revenue-widget [style*="font-size:0.62rem"],
#inv-summary-card [style*="opacity:0.6"] {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  opacity: 1 !important;
}

/* Daily revenue / inventory summary card titles */
#daily-revenue-widget span[style*="font-weight:600"],
#daily-revenue-widget [style*="font-weight:600"],
#inv-summary-card span[style*="font-weight:800"],
#emp-leaderboard-widget [style*="font-weight:800"],
#branch-leaderboard-widget [style*="font-weight:800"] {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  font-weight: 800 !important;
}

/* Theme-cohesion warm muted titles → Cosmic ink */
body.sd-dark-mode .stat-neo-title,
body.sd-dark-mode .card-title,
body.sd-dark-mode .info-card div {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

/* Exchange / store ticker under topbar */
.exchange-ticker,
.store-ticker,
#store-ticker,
.ticker-bar,
.ticker-item {
  color: #e2e8f0 !important;
}
.exchange-ticker span,
.store-ticker span,
#store-ticker span,
.ticker-item span {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL COSMIC UNIFY — same homepage look everywhere
   (public pages + store/branch/admin/tech dashboards)
   Colors / surfaces / type only — no layout changes.
   ═══════════════════════════════════════════════════════════ */

/* Token remap for dashboards + theme-cohesion leftovers */
:root,
html,
body,
body.sd-dark-mode,
body.br-dark-mode {
  --co-ink: #f1f5f9 !important;
  --co-ink-sub: #e2e8f0 !important;
  --co-ink-muted: #94a3b8 !important;
  --co-surface: rgba(255, 255, 255, 0.05) !important;
  --co-border: rgba(255, 255, 255, 0.12) !important;
  --dash-bg: #090a0f !important;
  --dash-sidebar: rgba(8, 8, 15, 0.92) !important;
  --dash-card: rgba(255, 255, 255, 0.05) !important;
  --dash-card2: rgba(255, 255, 255, 0.08) !important;
  --dash-hover: rgba(255, 255, 255, 0.1) !important;
  --dash-border: rgba(255, 255, 255, 0.12) !important;
  --dash-primary: #4ecdc4 !important;
  --dash-primary-h: #ff6b35 !important;
  --dash-glow: rgba(78, 205, 196, 0.18) !important;
  --dash-text: #f1f5f9 !important;
  --dash-muted: #94a3b8 !important;
  --dash-subtle: #64748b !important;
}

/* Shells over cosmos (no cream fill) */
.main-content,
.dashboard-content,
.br-main,
.admin-main,
.tech-main,
.wrapper,
.page-wrap,
.policy-page,
.policy-body,
.blog-wrap,
.blog-page,
.features-page,
.register-page,
.login-page,
.pearl-login-wrap,
#app,
.app-shell {
  background: transparent !important;
  background-color: transparent !important;
  color: #f1f5f9 !important;
}

.sidebar,
.br-sidebar,
.admin-sidebar,
.tech-sidebar,
.topbar,
.br-topbar,
.admin-topbar {
  background: rgba(8, 8, 15, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

/* Kill cream section fills on about / features / policies */
#hero,
#tier-basic,
#tier-operational,
#tier-integrations,
#contact,
#payment,
.pricing-section,
.tier-section,
.feature-section,
.policy-hero,
.policy-content,
.features-hero,
.blog-hero,
.about-ops-story,
section.tier-section,
section#hero,
section#contact,
section#payment {
  background: transparent !important;
  background-image: none !important;
  color: #f1f5f9 !important;
}

/* About / feature cards → dark glass */
.feature-card,
.policy-card,
.blog-card,
.tier-section .feature-card,
.about-ops-story,
.contact-content {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
  color: #f1f5f9 !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.feature-card h3,
.feature-card h3 a,
.feature-card p,
.tier-section .tier-header .badge,
.tier-section .tier-header .count,
.contact-item span,
#payment .payment-note,
#payment .footer-links a,
.about-ops-links a,
#hero .hero-subtitle,
#hero .hero-desc,
.hero-stat .lbl,
.policy-content p,
.policy-content li,
.blog-card p {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  opacity: 1 !important;
}
.feature-card .card-icon,
.contact-item i,
.hero-stat .num,
#hero .brand,
.feature-card .tech-tag,
.tier-section .tier-header .badge {
  color: #5eead4 !important;
  -webkit-text-fill-color: #5eead4 !important;
  border-color: rgba(78, 205, 196, 0.35) !important;
  background: rgba(78, 205, 196, 0.12) !important;
}
#hero .brand {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}
.cta-btn,
a.cta-btn {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  -webkit-text-fill-color: #0b1120 !important;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35) !important;
}
.side-nav a {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.side-nav a:hover,
.side-nav a.active {
  background: #4ecdc4 !important;
  border-color: #4ecdc4 !important;
  box-shadow: 0 0 16px rgba(78, 205, 196, 0.45) !important;
}
.pearl-btn {
  background: rgba(8, 8, 15, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
}
.scroll-hint {
  color: rgba(241, 245, 249, 0.45) !important;
}

/* Public page headings */
h1, h2, h3, h4, h5, h6,
.page-title,
.section-title,
.policy-title,
.blog-title,
.features-title,
.register-title {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
body > *:not(script):not(style) p,
.policy-content p,
.policy-content li,
.blog-content p,
.blog-content li,
.features-content p,
.register-form label,
.about-ops-story p {
  color: #e2e8f0 !important;
}

/* Login / register surfaces */
.login-card,
.register-card,
.pearl-card,
.auth-card,
.form-card {
  background: rgba(12, 13, 18, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.login-card input,
.register-card input,
.auth-card input,
.form-card input,
.login-card select,
.register-card select,
textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
}

/* Tables / lists on dashboards */
.saas-table th,
.saas-table td,
table th,
table td {
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Nav links in dashboards */
.nav-links a,
.br-nav-links a,
.admin-nav a {
  color: #e2e8f0 !important;
}
.nav-links a:hover,
.br-nav-links a:hover {
  color: #f8fafc !important;
}

/* Kill leftover cream/indigo page washes */
body::before,
html::before {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   PUBLIC CONTRAST FIX v21 — light text only on dark glass
   Features .card · About/Register pricing · Policies · Forms
   ═══════════════════════════════════════════════════════════ */

/* Remap cream-page CSS variables (features / legacy public) */
:root {
  --cream: #090a0f !important;
  --ink: #f1f5f9 !important;
  --muted: #94a3b8 !important;
  --card: rgba(255, 255, 255, 0.05) !important;
  --line: rgba(255, 255, 255, 0.12) !important;
  --gold: #ff6b35 !important;
  --gold-deep: #4ecdc4 !important;
}

/* Features page: .card is NOT .feature-card — force dark glass */
html body .grid > .card,
html body .card,
html body .steps li,
html body .faq details,
html body .bottom-cta {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
  color: #f1f5f9 !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
html body .card h2,
html body .card h2 a,
html body .card p,
html body .steps li,
html body .steps .step-txt,
html body .faq summary,
html body .faq p,
html body .section p,
html body .section li,
html body .lead,
html body .cta-sub,
html body .badge {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  opacity: 1 !important;
}
html body .card i,
html body .steps .step-num,
html body .badge {
  background: rgba(78, 205, 196, 0.14) !important;
  color: #5eead4 !important;
  -webkit-text-fill-color: #5eead4 !important;
  border-color: rgba(78, 205, 196, 0.35) !important;
}
html body .top {
  background: rgba(8, 8, 15, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html body .nav-links a {
  color: #94a3b8 !important;
}
html body .nav-links a:hover {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
html body .btn-main,
html body .nav-links a.cta {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  -webkit-text-fill-color: #0b1120 !important;
  border-color: transparent !important;
}

/* About + Register plan / pricing cards — kill white cream tiles */
html body .pricing-section,
html body #pricing.pricing-section {
  background: transparent !important;
  background-image: none !important;
  color: #f1f5f9 !important;
}
html body .pricing-card,
html body .pricing-free,
html body .pricing-vip,
html body .pricing-vip-yearly,
html body .pricing-vip-6mo,
html body .plan-card,
html body .plan-card.tier-free,
html body .plan-card.tier-vip,
html body .plan-card.tier-vip.tier-featured {
  background: rgba(20, 20, 28, 0.94) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 15px 40px -12px rgba(0, 0, 0, 0.45) !important;
  transform: none !important;
}
html body .pricing-vip,
html body .plan-card.tier-vip {
  border-color: rgba(255, 107, 53, 0.45) !important;
}
html body .pricing-vip-yearly,
html body .plan-card.tier-vip.tier-featured {
  border-width: 2px !important;
  border-color: rgba(255, 107, 53, 0.7) !important;
  box-shadow: 0 16px 40px -14px rgba(255, 107, 53, 0.35) !important;
}
html body .pricing-card .plan-name,
html body .plan-card .plan-name,
html body .pricing-card .plan-period,
html body .plan-card .plan-desc,
html body .pricing-card .plan-features li,
html body .pricing-card .plan-features span,
html body .plan-card .plan-features li,
html body .plan-card .plan-features span,
html body .pricing-card .feat-on,
html body .pricing-card .feat-on span,
html body .plan-card .feat-on,
html body .plan-card .feat-on span,
html body .pricing-card .price-currency,
html body .pricing-card .price-period,
html body .plan-card .plan-price,
html body .plan-card .plan-currency {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  background: none !important;
  opacity: 1 !important;
}
html body .pricing-vip .plan-name,
html body .plan-card.tier-vip .plan-name {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html body .pricing-card .price-amount,
html body .plan-card .plan-price .amount,
html body .plan-card .plan-price {
  color: #ff6b35 !important;
  -webkit-text-fill-color: #ff6b35 !important;
}
html body .pricing-card .feat-off,
html body .pricing-card .feat-off span,
html body .plan-card .feat-off,
html body .plan-card .feat-off span {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 0.85 !important;
  text-decoration-color: #64748b !important;
}
html body .pricing-card .feat-off i,
html body .plan-card .feat-off i {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  opacity: 1 !important;
}
html body .pricing-section h2,
html body .pricing-section .sub,
html body .pricing-section .tier-badge {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
html body .plan-cta,
html body .plan-cta-free,
html body .plan-cta-vip {
  color: #0b1120 !important;
  -webkit-text-fill-color: #0b1120 !important;
}
html body .plan-cta-free {
  background: #64748b !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html body .plan-cta-vip {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
}

/* Policy / privacy / terms glass */
html body .glass-card,
html body .glass-card p,
html body .glass-card li,
html body .glass-card h2,
html body .glass-card h3 {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
html body .glass-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html body .glass-card h2,
html body .glass-card h3 {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html body .tab-nav a {
  color: #94a3b8 !important;
}
html body .tab-nav a.active {
  color: #0b1120 !important;
  -webkit-text-fill-color: #0b1120 !important;
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
}

/* Register wizard — dark ink → light on dark surfaces */
html body .form-label,
html body .brand-name,
html body .wiz-step-title,
html body .wiz-welcome-title,
html body .success-title,
html body .cat-name,
html body .scope-name,
html body .cat-section-label,
html body .review-v,
html body .btn-home .pearl-wrap,
html body .pearl-btn .pearl-wrap,
html body .lang-sel-reg {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
html body .input-wrap input,
html body .input-wrap select,
html body .lang-sel-reg,
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="password"],
html body input[type="number"],
html body textarea,
html body select {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
  caret-color: #4ecdc4 !important;
}
html body .input-wrap input:not(:placeholder-shown),
html body input[type="text"]:not(:placeholder-shown),
html body input[type="email"]:not(:placeholder-shown),
html body input[type="tel"]:not(:placeholder-shown),
html body textarea:not(:placeholder-shown) {
  -webkit-text-fill-color: #f1f5f9 !important;
}
html body .input-wrap input::placeholder,
html body .input-wrap textarea::placeholder,
html body input::placeholder,
html body textarea::placeholder,
html body input::-webkit-input-placeholder,
html body textarea::-webkit-input-placeholder,
html body input::-moz-placeholder,
html body textarea::-moz-placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1 !important;
}
html body .input-wrap select option,
html body .lang-sel-reg option,
html body select option {
  background: #0f172a !important;
  color: #f1f5f9 !important;
}
html body .username-hint,
html body .field-hint,
html body .form-hint,
html body .hint {
  color: #5eead4 !important;
  -webkit-text-fill-color: #5eead4 !important;
}
html body .seo-info-section {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
html body .cat-card,
html body .scope-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

/* About feature cards already targeted — reinforce h3/p ink */
html body .feature-card,
html body .feature-card h3,
html body .feature-card h3 a,
html body .feature-card p {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
html body .feature-card h3,
html body .feature-card h3 a {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html body .blog-section h2,
html body .blog-card h3 {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html body .about-lang-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
}
html body .pearl-btn {
  background: rgba(8, 8, 15, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
}
/* Store CTA on Cosmic gradient — dark readable label */
html body .store-card-footer .pearl-btn,
html body a.store-card .store-card-footer .pearl-btn {
  background: linear-gradient(135deg, #4ecdc4 0%, #ff6b35 100%) !important;
  color: #0b1120 !important;
}
html body .store-card-footer .pearl-p,
html body .store-card-footer .pearl-p *,
html body a.store-card .store-card-footer .pearl-p,
html body a.store-card .store-card-footer .pearl-p * {
  color: #0b1120 !important;
  -webkit-text-fill-color: #0b1120 !important;
  text-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
}

/* Breadcrumbs / muted helpers on dark */
html body .asab-chrome-crumb,
html body .breadcrumb,
html body .crumbs,
html body .crumbs a {
  color: #94a3b8 !important;
}

/* PWA install modal stays light body (colored headers) */
.pwa-modal h1,
.pwa-modal h2,
.pwa-modal h3,
.pwa-modal h4,
.pwa-modal p,
.pwa-modal span,
.pwa-modal strong,
.pwa-modal li,
.pwa-modal-content h1,
.pwa-modal-content h2,
.pwa-modal-content h3,
.pwa-modal-content p,
.pwa-modal-content span,
.pwa-modal-content strong,
.pwa-modal-download-text strong,
.pwa-modal-download-text span,
.pwa-modal-info-block strong,
.pwa-modal-info-block span {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.pwa-modal-header h3,
.pwa-modal-header p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.pwa-modal-download-btn,
.pwa-modal-download-btn i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   COSMIC SWEEP v23 — cards · modals · portals · leftovers
   ═══════════════════════════════════════════════════════════ */

/* Universal dark-glass surfaces (public pages; not shops facade logo plate) */
html body .hero-glass-wrap,
html body .cap-card,
html body .pf-card,
html body .side-card,
html body .sum-card,
html body .debt-card,
html body .addr-card,
html body .cat-chip,
html body .portal-choice-card,
html body .otp-card,
html body .state-card,
html body .form-shell,
html body .wiz-card,
html body .reg-card,
html body .register-card,
html body .seo-info-section,
html body .blog-card,
html body .article-card,
html body .post-card,
html body .faq details,
html body .bottom-cta,
html body .contact-content,
html body .payment-methods,
html body .tier-section .feature-card,
html body .snap-section .feature-card {
  background: rgba(12, 13, 22, 0.92) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
  color: #f1f5f9 !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

html body .hero-glass-wrap h1,
html body .hero-glass-wrap h2,
html body .hero-glass-wrap p,
html body .hero-glass-wrap span,
html body .cap-card h1,
html body .cap-card h2,
html body .cap-card p,
html body .cap-card span,
html body .pf-card h2,
html body .pf-card .pf-sub,
html body .pf-card label,
html body .side-card,
html body .side-card *,
html body .sum-val,
html body .cust-name,
html body .debt-product,
html body .amt-val,
html body .otp-title,
html body .state-title,
html body .addr-default-txt,
html body .seo-info-section,
html body .seo-info-section h2,
html body .seo-info-section h3,
html body .seo-info-section p,
html body .seo-info-section li {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
html body .hero-glass-wrap h1,
html body .cap-card h1,
html body .pf-card h2,
html body .otp-title,
html body .state-title,
html body .seo-info-section h2 {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

/* Customer portal inputs + choices */
html body .pf-card input,
html body .hero-glass-wrap input,
html body .portal-phone-input,
html body .otp-input,
html body .search-input,
html body .cust-search input {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
html body .pf-card input::placeholder,
html body .hero-glass-wrap input::placeholder,
html body .otp-input::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
html body .portal-choice-btn,
html body .portal-choice-btn.primary,
html body .g_id_signin,
html body .cust-langs button,
html body .back-btn,
html body .pearl-btn .pearl-wrap {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
html body .portal-choice-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
html body .portal-choice-btn.primary {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  -webkit-text-fill-color: #0b1120 !important;
  border-color: transparent !important;
}
html body .portal-choice-btn.primary i {
  color: #0b1120 !important;
}

/* Secondary modals → dark glass (register terms, customer privacy/policy) */
html body #terms-modal,
html body #privacy-modal,
html body #policy-modal,
html body #about-modal,
html body .modal-overlay,
html body .policy-modal {
  background: rgba(0, 0, 0, 0.72) !important;
}
html body #terms-modal .modal-box,
html body #privacy-modal-inner,
html body #policy-modal-inner,
html body #about-modal .modal-box,
html body .modal-box:not(.pwa-modal-content) {
  background: rgba(12, 13, 22, 0.96) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}
html body #terms-modal .modal-title,
html body #terms-modal .terms-section h3,
html body #terms-modal .terms-accept label,
html body #terms-modal .modal-sub,
html body #terms-modal .terms-section p,
html body #terms-modal .terms-section li,
html body #privacy-modal-inner,
html body #privacy-modal-inner h2,
html body #privacy-modal-inner h3,
html body #privacy-modal-inner p,
html body #privacy-modal-inner span,
html body #privacy-modal-inner div,
html body #policy-modal-inner,
html body #policy-modal-inner h3,
html body #policy-modal-title,
html body #policy-modal-body,
html body #policy-modal-body * {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
html body #terms-modal .modal-title,
html body #privacy-modal-inner h2,
html body #policy-modal-title {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html body #terms-modal .modal-header,
html body #terms-modal .modal-footer,
html body #terms-modal .modal-body,
html body #terms-modal .terms-accept {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html body #terms-modal .terms-accept {
  background: rgba(78, 205, 196, 0.08) !important;
  border: 1px solid rgba(78, 205, 196, 0.25) !important;
}
html body #terms-modal .terms-section h3 i,
html body #privacy-modal-inner i,
html body #policy-modal-body i {
  color: #4ecdc4 !important;
}
html body #privacy-modal-inner button,
html body #policy-modal-inner button {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
}

/* Footer cream kill (injected footer + page-local copies) */
html body .site-footer,
.site-footer {
  background: rgba(8, 8, 15, 0.92) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  color: #e2e8f0 !important;
}
html body .site-footer a,
html body .site-footer p,
html body .site-footer span,
html body .site-footer .footer-copy,
.site-footer a,
.site-footer p,
.site-footer span {
  color: #cbd5e1 !important;
}
html body .site-footer .cert-card,
html body .cert-gwf,
html body .cert-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

/* Policy pages theme-color leftovers + tabs */
html body .tab-nav a,
html body .btn-back,
html body .lang-sel {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #e2e8f0 !important;
}
html body .tab-nav a.active {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  -webkit-text-fill-color: #0b1120 !important;
  border-color: transparent !important;
}

/* Gold → teal/copper accents still hardcoded on public pages */
html body .feature-card .card-icon,
html body .tech-tag,
html body .badge,
html body .tier-badge,
html body .plan-badge,
html body .plan-discount,
html body .plan-tile-badge {
  color: #5eead4 !important;
  border-color: rgba(78, 205, 196, 0.35) !important;
}
html body .plan-badge,
html body .plan-discount,
html body .plan-tile-badge,
html body .plan-tile-popular,
html body .plan-tile-discount {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  -webkit-text-fill-color: #0b1120 !important;
  border: none !important;
}

/* Register wizard chips / steps / review */
html body .wiz-dot,
html body .wiz-step,
html body .cat-card,
html body .scope-card,
html body .review-row,
html body .wiz-welcome,
html body .success-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}
html body .wiz-dot.active {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  border-color: transparent !important;
}
html body .brand-name,
html body .wiz-welcome-title,
html body .success-title,
html body .wiz-step-title,
html body .review-v,
html body .cat-name,
html body .scope-name,
html body .cat-section-label {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

/* Cookie consent + chrome drawer extras */
#cc-main,
.cc-main,
.cm-wrapper,
.cm__body {
  color: #e2e8f0 !important;
}
#cc-main .cm,
.cc--darkmode .cm,
.cm {
  background: rgba(12, 13, 22, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

/* Kill remaining cream washes on about pricing / blog / register SEO */
html body .pricing-section,
html body .blog-section,
html body .seo-info-section,
html body section.pricing-section {
  background: transparent !important;
  background-image: none !important;
}

/* Inline-styled dark ink on dark pages — force readable */
html body [style*="color:#0f172a"],
html body [style*="color: #0f172a"],
html body [style*="color:#1e293b"],
html body [style*="color:#334155"],
html body [style*="color:#475569"] {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
html body [style*="background:rgba(255,255,255,0.85)"],
html body [style*="background:rgba(255,255,255,0.75)"],
html body [style*="background:rgba(255,255,255,0.78)"],
html body [style*="background:#fff"],
html body [style*="background: #fff"] {
  background: rgba(12, 13, 22, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Shops category chips + section title contrast */
html[data-shops-dir] .cat-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}
html[data-shops-dir] .cat-box span,
html[data-shops-dir] .cat-box i {
  color: #e2e8f0 !important;
}
html[data-shops-dir] .cat-box.active {
  background: rgba(78, 205, 196, 0.14) !important;
  border-color: rgba(78, 205, 196, 0.45) !important;
  box-shadow: 0 0 18px rgba(78, 205, 196, 0.2) !important;
}
html[data-shops-dir] .stores-section-title,
html[data-shops-dir] .stores-section-title span {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
html[data-shops-dir] .stores-section-title i {
  color: #4ecdc4 !important;
  background: rgba(78, 205, 196, 0.12) !important;
  border-color: rgba(78, 205, 196, 0.3) !important;
}
html[data-shops-dir] .seo-info-section,
html[data-shops-dir] .seo-info-section h2,
html[data-shops-dir] .seo-info-section h3,
html[data-shops-dir] .seo-info-section p,
html[data-shops-dir] .seo-info-section li,
html[data-shops-dir] .seo-cat-item {
  color: #e2e8f0 !important;
}
html[data-shops-dir] .seo-info-section {
  background: rgba(12, 13, 22, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-shops-dir] .seo-cat-item {
  background: rgba(78, 205, 196, 0.08) !important;
  border-color: rgba(78, 205, 196, 0.2) !important;
}

/* ── v25: offline + about gold→Cosmic leftovers ── */
html body .card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
}
html body .brand-name {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html body .btn-retry,
html body .cta-btn {
  background: linear-gradient(135deg, #4ecdc4, #ff6b35) !important;
  color: #0b1120 !important;
  box-shadow: 0 8px 24px rgba(78, 205, 196, 0.25) !important;
}
html body .feature-card .card-icon,
html body .hero-stat .num,
html body .contact-item i,
html body .tier-section .tier-header .badge {
  color: #4ecdc4 !important;
}
html body .feature-card h3,
html body #hero .hero-subtitle,
html body #hero .hero-desc {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
html body .feature-card p,
html body .contact-item span,
html body .hero-stat .lbl {
  color: #94a3b8 !important;
}
html body a[style*="color:#6366f1"],
html body a[style*="color:#6366F1"] {
  color: #4ecdc4 !important;
}

/* Footer PWA download buttons — keep white labels (beat muted link colors) */
html body a.pwa-install-btn,
html body a.pwa-install-btn:link,
html body a.pwa-install-btn:visited,
html body a.pwa-install-btn:hover,
html body button.pwa-install-btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
}
html body a.pwa-install-btn .pwa-btn-title,
html body a.pwa-install-btn .pwa-btn-title *,
html body a.pwa-install-btn .pwa-btn-sub,
html body a.pwa-install-btn .pwa-btn-sub *,
html body button.pwa-install-btn .pwa-btn-title,
html body button.pwa-install-btn .pwa-btn-sub {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body .pwa-install-btn .pwa-btn-sub::before {
  content: none !important;
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   v26 — homepage cosmos through dashboards + public shells
   Beat store-dark / branch-unified solid fills (#1A1D23 etc.)
   ═══════════════════════════════════════════════════════════ */

/* Ensure cosmos layer sits behind UI */
#cosmos-bg,
.cosmos-bg {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Dashboard / login shells stay transparent so orbs show */
html body.sd-dark-mode .main-content,
html body.sd-dark-mode .dashboard-content,
html body.sd-dark-mode .content-area,
html body.sd-dark-mode .wrapper,
html body.sd-dark-mode #app,
html body.br-dark-mode .main-content,
html body.br-dark-mode .br-main-content,
html body.br-dark-mode .dashboard-content,
html body.br-dark-mode .content-area,
html body .admin-main,
html body .tech-main,
html body .main-content,
html body .dashboard-content,
html body .content-area,
html body .br-main-content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 2;
}

/* Opaque cream / slate page fills → clear */
html body.sd-dark-mode,
html body.br-dark-mode,
html body.admin-body,
html body {
  background-color: #090a0f !important;
}

/* Cards / panels / windows — dark glass, light ink */
html body.sd-dark-mode .glass-card,
html body.sd-dark-mode .stat-card,
html body.sd-dark-mode .stat-card-neo,
html body.sd-dark-mode .analytics-glass-card,
html body.sd-dark-mode .table-container,
html body.sd-dark-mode .premium-card,
html body.sd-dark-mode .cosmic-card,
html body.sd-dark-mode .panel,
html body.sd-dark-mode .card:not(.pwa-install-btn),
html body.br-dark-mode .glass-card,
html body.br-dark-mode .stat-card,
html body.br-dark-mode .table-container,
html body.br-dark-mode .panel,
html body.br-dark-mode .card,
html body .info-card,
html body .data-card,
html body .widget-card,
html body .settings-card,
html body .form-card,
html body .saas-card {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

/* Modals / drawers — readable Cosmic glass */
html body .modal-overlay,
html body .modal-backdrop,
html body .drawer-overlay {
  background: rgba(4, 5, 12, 0.72) !important;
}
html body .modal-box,
html body.sd-dark-mode .modal-box,
html body.br-dark-mode .modal-box,
html body .modal-content:not(.pwa-modal-content),
html body .drawer-panel,
html body .offcanvas,
html body .swal2-popup {
  background: rgba(12, 14, 24, 0.92) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
html body .modal-box h1,
html body .modal-box h2,
html body .modal-box h3,
html body .modal-box h4,
html body .modal-box label,
html body .modal-box .modal-title,
html body .modal-box .form-label,
html body .swal2-title,
html body .swal2-html-container {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
html body .modal-box p,
html body .modal-box .text-muted,
html body .modal-box small,
html body .swal2-html-container {
  color: #94a3b8 !important;
}

/* Inputs inside modals / forms */
html body .modal-box input,
html body .modal-box select,
html body .modal-box textarea,
html body.sd-dark-mode input:not([type="checkbox"]):not([type="radio"]),
html body.sd-dark-mode select,
html body.sd-dark-mode textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
}
html body .modal-box input::placeholder,
html body.sd-dark-mode input::placeholder {
  color: #64748b !important;
}

/* Kill day-theme cream leftovers even if class flickers */
html body:not(.sd-dark-mode) .main-content,
html body:not(.sd-dark-mode) .content-area,
html body:not(.sd-dark-mode) .dashboard-content {
  background: transparent !important;
  color: #f1f5f9 !important;
}

/* Shop / public white tiles → glass */
html body .shop-card,
html body .product-card,
html body .store-card,
html body .item-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

/* Tables stay dark-readable */
html body.sd-dark-mode table,
html body.br-dark-mode table,
html body.sd-dark-mode .saas-table,
html body.br-dark-mode .saas-table {
  background: rgba(8, 8, 15, 0.45) !important;
  color: #e2e8f0 !important;
}
html body.sd-dark-mode thead th,
html body.br-dark-mode thead th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown / popover menus */
html body .dropdown-menu,
html body .context-menu,
html body .popover,
html body .select2-dropdown,
html body .autocomplete-list {
  background: rgba(12, 14, 24, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Stack above cosmos — NEVER set position on body children (breaks fixed chrome) */
html body .main-content,
html body .dashboard-content,
html body .content-area,
html body .br-main-content,
html body .admin-main,
html body .tech-main,
html body .pearl-login-wrap,
html body .seo-landing,
html body .wrapper,
html body #app {
  z-index: 2;
}

/* Top chrome must stay fixed at top — beat any stray relative/z-index rules */
html body .asab-chrome,
html body #asab-chrome,
html.asab-chrome-on .asab-chrome,
html.asab-chrome-on #asab-chrome {
  position: fixed !important;
  top: 10px !important;
  bottom: auto !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 12000 !important;
}
html body #asab-chrome-overlay,
html body .asab-chrome-overlay {
  position: fixed !important;
  z-index: 12010 !important;
}
html body .asab-chrome-drawer,
html body #asab-chrome-drawer {
  position: fixed !important;
  z-index: 12020 !important;
}
html body .sidebar,
html body .br-sidebar,
html body .admin-sidebar,
html body .tech-sidebar,
html body .topbar,
html body .br-topbar,
html body .site-header,
html body nav:not(.asab-chrome-drawer-links),
html body .bottom-nav,
html body .mobile-nav {
  z-index: 50;
}