/**
 * Smart Partner - Dual Theme System (Light & Dark)
 * Supports Admin Panel, CRM, Public Landing, Login, and future extensions.
 */

/* ==========================================================================
   Base Theme Variables
   ========================================================================== */
:root {
  color-scheme: dark;
  --sp-bg-canvas: #0C0A14;
  --sp-bg-surface: #151320;
  --sp-bg-card: #1D1A2C;
  --sp-border: rgba(255, 255, 255, 0.08);
  --sp-text-main: #FFFFFF;
  --sp-text-muted: #94A3B8;
}

html.light {
  color-scheme: light;
  --sp-bg-canvas: #F8FAFC;
  --sp-bg-surface: #FFFFFF;
  --sp-bg-card: #F1F5F9;
  --sp-border: #E2E8F0;
  --sp-text-main: #0F172A;
  --sp-text-muted: #64748B;
}

/* Smooth transitions when switching themes */
body, aside, header, main, nav, .glass, .bg-brand-surface, .bg-brand-card {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

/* ==========================================================================
   Light Theme Rules (applied when html.light)
   ========================================================================== */

/* 1. Body & Layout Structure */
html.light body {
  background-color: #F8FAFC !important;
  color: #1E293B !important;
}

html.light .bg-brand-dark {
  background-color: #F8FAFC !important;
}

html.light aside {
  background-color: #FFFFFF !important;
  border-right-color: #E2E8F0 !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03) !important;
}

html.light header {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-bottom-color: #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

/* 2. Surfaces & Cards */
html.light .bg-brand-surface {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
}

html.light .bg-brand-card {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* Subtle white/opacity overlays mapped to soft slate/gray in light mode */
html.light .bg-white\/5 {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
}

html.light .bg-white\/10 {
  background-color: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
}

html.light .hover\:bg-white\/5:hover {
  background-color: #F1F5F9 !important;
}

html.light .hover\:bg-white\/10:hover {
  background-color: #E2E8F0 !important;
}

html.light .hover\:bg-white\/\[0\.03\]:hover {
  background-color: #F8FAFC !important;
}

html.light .border-brand-border,
html.light .border-white\/5,
html.light .border-white\/10,
html.light .border-white\/20 {
  border-color: #E2E8F0 !important;
}

/* 3. Typography & Contrast */
/* Headings & prominent text become deep slate, EXCEPT inside colored buttons & badges */
html.light .text-white:not(.keep-white) {
  color: #0F172A !important;
}

/* Elements that must always keep white text (Solid vibrant buttons only) */
html.light .keep-white,
html.light .keep-white *,
html.light button.bg-gradient-to-r:not(.pwa-install-btn *):not([class*="/"]):not([class*="from-sky-600/"]):not([class*="from-blue-600/"]),
html.light button.bg-gradient-to-r:not(.pwa-install-btn *):not([class*="/"]):not([class*="from-sky-600/"]):not([class*="from-blue-600/"]) *,
html.light a.btn-primary,
html.light a.btn-primary *,
html.light .bg-brand-magenta:not([class*="/"]),
html.light .bg-brand-magenta:not([class*="/"]) *,
html.light [class*="bg-[#229ED9]"],
html.light [class*="bg-[#229ED9]"] *,
html.light [class*="bg-[#0077FF]"],
html.light [class*="bg-[#0077FF]"] * {
  color: #FFFFFF !important;
}

/* Sidebar Navigation Base Styles */
.nav-item {
  transition: all 0.15s ease-in-out;
}

/* Dark Mode Navigation Items */
.nav-item-inactive {
  color: #94A3B8;
  background-color: transparent;
}
.nav-item-inactive:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
}
.nav-item-active {
  background: linear-gradient(to right, rgba(225, 0, 117, 0.2), rgba(255, 77, 151, 0.1));
  color: #FF4D97;
  border: 1px solid rgba(225, 0, 117, 0.3);
  font-weight: 600;
}
.nav-item-active svg {
  color: #FF4D97;
}

/* Sidebar Navigation in Light Mode: 100% Guaranteed Dark Readable Text */
html.light .nav-item-inactive,
html.light .nav-item-inactive *,
html.light aside nav a.nav-item-inactive,
html.light aside nav a.nav-item-inactive * {
  color: #475569 !important;
  background-color: transparent !important;
}
html.light .nav-item-inactive svg,
html.light aside nav a.nav-item-inactive svg {
  color: #64748B !important;
}

html.light .nav-item-inactive:hover,
html.light .nav-item-inactive:hover *,
html.light .nav-item-inactive:focus,
html.light .nav-item-inactive:focus *,
html.light .nav-item-inactive:active,
html.light .nav-item-inactive:active *,
html.light aside nav a.nav-item-inactive:hover,
html.light aside nav a.nav-item-inactive:hover *,
html.light aside nav a.nav-item-inactive:focus,
html.light aside nav a.nav-item-inactive:focus *,
html.light aside nav a.nav-item-inactive:active,
html.light aside nav a.nav-item-inactive:active * {
  color: #0F172A !important;
  background-color: #F1F5F9 !important;
}
html.light .nav-item-inactive:hover svg,
html.light .nav-item-inactive:focus svg,
html.light .nav-item-inactive:active svg {
  color: #0F172A !important;
}

/* Active Nav Item in Light Mode: Clean Soft Pink Tint with Deep Dark Slate Text */
html.light .nav-item-active,
html.light .nav-item-active *,
html.light aside nav a.nav-item-active,
html.light aside nav a.nav-item-active * {
  background-color: #FDF2F8 !important;
  border: 1px solid #FBCFE8 !important;
  color: #0F172A !important;
  font-weight: 600 !important;
}
html.light .nav-item-active svg,
html.light aside nav a.nav-item-active svg {
  color: #E10075 !important;
}

html.light .nav-item-active:hover,
html.light .nav-item-active:hover *,
html.light .nav-item-active:focus,
html.light .nav-item-active:focus *,
html.light .nav-item-active:active,
html.light .nav-item-active:active *,
html.light aside nav a.nav-item-active:hover,
html.light aside nav a.nav-item-active:hover * {
  background-color: #FCE7F3 !important;
  color: #0F172A !important;
}

/* Inactive nav links: fallback matches */
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):not(.nav-item-active),
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):not(.nav-item-active) *,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):not(.nav-item-active) span,
html.light aside nav a.text-gray-400,
html.light aside nav a.text-gray-400 *,
html.light aside nav a.text-gray-400 span {
  color: #475569 !important;
}
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):not(.nav-item-active) svg,
html.light aside nav a.text-gray-400 svg {
  color: #64748B !important;
}

html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):hover,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):hover *,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):hover span,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):focus,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):focus *,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):focus span,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):active,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):active *,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):active span,
html.light aside nav a.text-gray-400:hover,
html.light aside nav a.text-gray-400:hover *,
html.light aside nav a.text-gray-400:hover span,
html.light aside nav a.text-gray-400:focus,
html.light aside nav a.text-gray-400:focus *,
html.light aside nav a.text-gray-400:focus span,
html.light aside nav a.text-gray-400:active,
html.light aside nav a.text-gray-400:active *,
html.light aside nav a.text-gray-400:active span {
  color: #0F172A !important;
  background-color: #F1F5F9 !important;
}
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):hover svg,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):focus svg,
html.light aside nav a:not(.from-brand-magenta\/20):not(.bg-gradient-to-r):active svg,
html.light aside nav a.text-gray-400:hover svg,
html.light aside nav a.text-gray-400:focus svg,
html.light aside nav a.text-gray-400:active svg {
  color: #0F172A !important;
}

/* Active nav link in light mode */
html.light aside nav a.bg-gradient-to-r,
html.light aside nav a.bg-gradient-to-r *,
html.light aside nav a.from-brand-magenta\/20,
html.light aside nav a.from-brand-magenta\/20 *,
html.light aside nav a.border-brand-magenta\/30,
html.light aside nav a.border-brand-magenta\/30 * {
  background-color: #FDF2F8 !important;
  border-color: #FBCFE8 !important;
  color: #9E0052 !important;
  font-weight: 600 !important;
}
html.light aside nav a.bg-gradient-to-r svg,
html.light aside nav a.from-brand-magenta\/20 svg {
  color: #E10075 !important;
}

html.light aside nav a.bg-gradient-to-r:hover,
html.light aside nav a.bg-gradient-to-r:hover *,
html.light aside nav a.bg-gradient-to-r:focus,
html.light aside nav a.bg-gradient-to-r:focus *,
html.light aside nav a.bg-gradient-to-r:active,
html.light aside nav a.bg-gradient-to-r:active * {
  background-color: #FCE7F3 !important;
  color: #9E0052 !important;
}

/* Pale pink / pastel buttons with opacity in light mode */
html.light [class*="from-brand-magenta/"],
html.light [class*="from-brand-magenta/"] * {
  color: #0F172A !important;
}

/* Pale sky / blue buttons with opacity in light mode */
html.light [class*="from-sky-600/"],
html.light [class*="from-sky-600/"] *,
html.light [class*="to-blue-600/"],
html.light [class*="to-blue-600/"] * {
  color: #0369A1 !important;
}

/* PWA Install button in sidebar menu in light mode */
html.light .pwa-install-btn button,
html.light .pwa-install-btn button *,
html.light .pwa-install-btn button span {
  color: #0F172A !important;
  font-weight: 600 !important;
}
html.light .pwa-install-btn button svg {
  color: #E10075 !important;
}
html.light .pwa-install-btn button {
  background: #FDF2F8 !important;
  border-color: #FBCFE8 !important;
}

/* Pale pink buttons with opacity in light mode */
html.light [class*="from-brand-magenta/"],
html.light [class*="from-brand-magenta/"] * {
  color: #0F172A !important;
}

/* Hierarchy of gray text in light mode */
html.light .text-gray-100 { color: #1E293B !important; }
html.light .text-gray-200 { color: #334155 !important; }
html.light .text-gray-300 { color: #475569 !important; }
html.light .text-gray-400 { color: #64748B !important; }
html.light .text-gray-500 { color: #94A3B8 !important; }

/* Inactive nav links */
html.light nav a.text-gray-400 {
  color: #475569 !important;
}
html.light nav a.text-gray-400:hover {
  color: #0F172A !important;
  background-color: #F1F5F9 !important;
}

/* 4. Form Controls (Inputs, Selects, Textareas) */
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light textarea,
html.light select,
html.light .bg-\[\#1D1A2C\] {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94A3B8 !important;
}

html.light input:focus,
html.light textarea:focus,
html.light select:focus {
  border-color: #E10075 !important;
  box-shadow: 0 0 0 2px rgba(225, 0, 117, 0.15) !important;
}

/* 5. Tables */
html.light table thead tr {
  background-color: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

html.light table thead th {
  color: #475569 !important;
}

html.light table tbody {
  border-color: #E2E8F0 !important;
}

html.light table tbody tr {
  border-bottom-color: #F1F5F9 !important;
}

html.light table tbody tr:hover {
  background-color: #F8FAFC !important;
}

/* 6. Badges, Chips, Status Alerts & Buttons in Light Mode */
html.light .bg-sky-500\/10,
html.light .bg-sky-500\/15,
html.light .bg-sky-500\/20,
html.light .bg-sky-500\/30 {
  background-color: #F0F9FF !important;
  border-color: #BAE6FD !important;
}
html.light .text-sky-300,
html.light .text-sky-400 {
  color: #0369A1 !important;
}

html.light .bg-blue-500\/10,
html.light .bg-blue-500\/15,
html.light .bg-blue-500\/20,
html.light .bg-blue-500\/30 {
  background-color: #EFF6FF !important;
  border-color: #BFDBFE !important;
}
html.light .text-blue-300,
html.light .text-blue-400 {
  color: #1D4ED8 !important;
}

html.light .bg-purple-500\/10,
html.light .bg-purple-500\/15,
html.light .bg-purple-500\/20,
html.light .bg-purple-500\/30 {
  background-color: #FAF5FF !important;
  border-color: #E9D5FF !important;
}
html.light .text-purple-300,
html.light .text-purple-400 {
  color: #7E22CE !important;
}

html.light .bg-emerald-500\/10,
html.light .bg-emerald-500\/15,
html.light .bg-emerald-500\/20,
html.light .bg-emerald-500\/30 {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
}
html.light .text-emerald-400,
html.light .text-emerald-300 {
  color: #047857 !important;
}

html.light .bg-amber-500\/10,
html.light .bg-amber-500\/15,
html.light .bg-amber-500\/20,
html.light .bg-amber-500\/30 {
  background-color: #FFFBEB !important;
  border-color: #FDE68A !important;
}
html.light .text-amber-400,
html.light .text-amber-300 {
  color: #B45309 !important;
}

html.light .bg-red-500\/10,
html.light .bg-red-500\/15,
html.light .bg-red-500\/20,
html.light .bg-red-500\/30 {
  background-color: #FEF2F2 !important;
  border-color: #FECACA !important;
}
html.light .text-red-400,
html.light .text-red-300 {
  color: #B91C1C !important;
}

html.light .bg-brand-magenta\/10,
html.light .bg-brand-magenta\/15,
html.light .bg-brand-magenta\/20 {
  background-color: #FDF2F8 !important;
  border-color: #FBCFE8 !important;
}
html.light .text-brand-rose {
  color: #DB2777 !important;
}

/* Cyan & Sky elements contrast in light mode */
html.light .text-cyan-300,
html.light .text-cyan-400 {
  color: #0E7490 !important;
}

/* Кнопка «Получить информацию» в админке: высокая контрастность и читаемость в обеих темах */
.btn-fetch-product {
  background-color: #0891B2 !important;
  color: #FFFFFF !important;
  border: 1px solid #06B6D4 !important;
}
.btn-fetch-product:hover {
  background-color: #0E7490 !important;
  color: #FFFFFF !important;
}
.btn-fetch-product,
.btn-fetch-product * {
  color: #FFFFFF !important;
}

html.light .btn-fetch-product {
  background-color: #0284C7 !important;
  color: #FFFFFF !important;
  border: 1px solid #0369A1 !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25) !important;
}
html.light .btn-fetch-product:hover {
  background-color: #0369A1 !important;
  color: #FFFFFF !important;
}
html.light .btn-fetch-product,
html.light .btn-fetch-product * {
  color: #FFFFFF !important;
}

/* Neutral utility buttons in light mode (e.g. Service Restart, Secondary actions) */
html.light button.bg-white\/10,
html.light button.bg-white\/15,
html.light a.bg-white\/10,
html.light a.bg-white\/15 {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}
html.light button.bg-white\/10:hover,
html.light button.bg-white\/15:hover,
html.light a.bg-white\/10:hover,
html.light a.bg-white\/15:hover {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* 7. Modals & Popups */
html.light .bg-black\/80,
html.light .bg-black\/75,
html.light .bg-black\/70,
html.light .bg-black\/60 {
  background-color: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(8px) !important;
}

html.light .bg-black\/50,
html.light .bg-black\/40,
html.light .bg-black\/30,
html.light .bg-black\/20 {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

/* Semi-transparent brand-card and brand-surface in Light Mode */
html.light [class*="bg-brand-card/"],
html.light [class*="bg-brand-surface/"] {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* Log Terminal Box in Light Mode */
html.light pre.log-terminal,
html.light .log-terminal-container {
  background-color: #0F172A !important;
  color: #E2E8F0 !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 8. Landing Page Glassmorphism & Accents */
html.light .glass {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(225, 0, 117, 0.15) !important;
  box-shadow: 0 16px 36px -10px rgba(225, 0, 117, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.04) !important;
}

html.light .glow-magenta {
  box-shadow: 0 16px 40px -10px rgba(225, 0, 117, 0.15) !important;
}

html.light .glow-gold {
  box-shadow: 0 16px 35px -10px rgba(212, 175, 55, 0.15) !important;
}

/* Ambient glow blobs on landing page in light mode */
html.light .bg-brand-magenta.opacity-20 {
  opacity: 0.07 !important;
}
html.light .bg-brand-gold.opacity-15 {
  opacity: 0.06 !important;
}
html.light .bg-purple-900.opacity-20 {
  opacity: 0.05 !important;
}

/* 9. Scrollbars */
html.light .custom-scroll::-webkit-scrollbar-track {
  background: #F1F5F9;
}
html.light .custom-scroll::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}
html.light .custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #E10075;
}

/* 10. Code & Chips */
html.light code {
  background-color: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #DB2777 !important;
}

/* 11. Text Gradients & Landing Headings */
html.light .bg-clip-text,
html.light [class*="bg-clip-text"] {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html.light .landing-gradient-title {
  background: linear-gradient(135deg, #880044 0%, #D8006E 50%, #996515 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.04));
}

html.light .landing-brand-title {
  background: linear-gradient(135deg, #0F172A 0%, #9E0052 70%, #E10075 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* 12. Main Landing Page Cards & Decorative Ornaments in Light Mode */
html.light .sp-glass-panel {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(225, 0, 117, 0.12) !important;
  box-shadow: 0 16px 36px -10px rgba(225, 0, 117, 0.06), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

html.light .sp-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FDF8FA 100%) !important;
  border-color: rgba(225, 0, 117, 0.15) !important;
  box-shadow: 0 10px 30px -8px rgba(225, 0, 117, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

html.light .sp-card:hover {
  border-color: rgba(225, 0, 117, 0.4) !important;
  box-shadow: 0 20px 45px -10px rgba(225, 0, 117, 0.16), 0 0 1px 1px rgba(225, 0, 117, 0.25) !important;
}

/* Guarantee no dark surface bleeds through in light theme */
html.light [class*="bg-brand-surface"],
html.light .bg-brand-surface {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html.light .sp-subcard {
  background: #FFF5F9 !important;
  border: 1px solid #FBCFE8 !important;
  box-shadow: 0 2px 8px rgba(225, 0, 117, 0.05) !important;
}
html.light .sp-subcard * {
  color: #1E293B !important;
}
html.light .sp-subcard .promo-gift-title {
  color: #B45309 !important;
  font-weight: 700 !important;
}
html.light .sp-subcard .promo-gift-desc {
  color: #0F172A !important;
  font-weight: 600 !important;
}
html.light .sp-subcard .promo-gift-dates {
  color: #64748B !important;
}

html.light .sp-badge-pill {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
  font-weight: 600 !important;
}
html.light .sp-badge-pill:hover {
  background-color: #FDF2F8 !important;
  border-color: #FBCFE8 !important;
  color: #E10075 !important;
}

html.light .sp-mobile-menu {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.12) !important;
}

html.light .sp-mobile-item {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
html.light .sp-mobile-item:hover,
html.light .sp-mobile-item:focus {
  background: #FDF2F8 !important;
  border-color: #FBCFE8 !important;
  color: #E10075 !important;
}

html.light .ornament-watermark {
  opacity: 0.14 !important;
}

html.light .sp-card:hover .ornament-watermark {
  opacity: 0.25 !important;
}

/* 13. Ambient Silk Ribbon & Petals Vector Background */
.silk-pattern-light {
  display: none !important;
}
html.light .silk-pattern-dark {
  display: none !important;
}
html.light .silk-pattern-light {
  display: block !important;
}

/* 14. Clickable Benefit Metric Cards (Mobile & Desktop) */
.sp-metric-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.sp-metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.45);
}
.sp-metric-card:active {
  transform: translateY(0) scale(0.97);
}

html.light .sp-metric-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(225, 0, 117, 0.12) !important;
  box-shadow: 0 6px 18px -4px rgba(225, 0, 117, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
html.light .sp-metric-card:hover {
  border-color: rgba(225, 0, 117, 0.4) !important;
  box-shadow: 0 14px 28px -6px rgba(225, 0, 117, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
html.light .sp-metric-card .sp-metric-desc {
  color: #374151 !important;
}
html.light .sp-metric-card:hover .sp-metric-desc {
  color: #0F172A !important;
}