Add business dashboard dark mode from Super Admin theme setting.

Login and in-app surfaces follow tenant themeMode, matching customer dark tokens, with themed switches and tighter card/table chrome.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/BackgroundOrbs.module.css

@@ -132,3 +132,7 @@
     animation: none;
   }
 }
+
+:global(html[data-theme='dark']) .bgOrbs {
+  display: none;
+}

apps/business/src/components/BlogCard.module.css

@@ -67,7 +67,7 @@
   text-transform: uppercase;
   border-radius: 50px;
   border: 1px solid var(--glass-border);
-  background: rgba(255, 255, 255, 0.82);
+  background: var(--surface);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);

apps/business/src/components/BlogCommentsSection.module.css

@@ -48,7 +48,7 @@
 
 .comment {
   padding: 14px 16px;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.2);
   border-radius: var(--radius-sm);
 }

apps/business/src/components/BrandModal.module.css

@@ -14,7 +14,7 @@
 .modal {
   width: 100%;
   max-width: 520px;
-  background: rgba(255, 255, 255, 0.85);
+  background: var(--surface);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid var(--glass-border);
@@ -76,7 +76,7 @@
   font-size: var(--field-font-size);
   line-height: 1.4;
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   transition: border-color 0.2s, box-shadow 0.2s;

apps/business/src/components/BrandRow.module.css

@@ -4,7 +4,7 @@
   flex-shrink: 0;
   object-fit: contain;
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.2);
 }
 

apps/business/src/components/CategoryModal.module.css

@@ -45,7 +45,7 @@
 .modal {
   width: 100%;
   max-width: 480px;
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--elevated-surface);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid var(--glass-border);
@@ -114,7 +114,7 @@
   font-size: var(--field-font-size);
   line-height: 1.4;
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -135,7 +135,7 @@
   color: var(--text-primary);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: var(--surface);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--select-arrow-offset) center;

apps/business/src/components/CategoryTreeSelect.module.css

@@ -11,7 +11,7 @@
   gap: 6px;
   min-height: var(--field-height);
   padding: 0 var(--field-padding-x);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -84,7 +84,7 @@
   overflow-y: auto;
   margin-top: 0;
   padding: 4px;
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--elevated-surface);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   box-shadow: 0 10px 28px rgba(31, 38, 135, 0.14);

apps/business/src/components/ChangeUserAccessModal.module.css

@@ -11,7 +11,7 @@
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid rgba(15, 23, 42, 0.1);
-  background: rgba(255, 255, 255, 0.45);
+  background: var(--surface);
   cursor: pointer;
   font-family: var(--font-ui);
 }

apps/business/src/components/ConfirmBulkAddStoreItemsModal.module.css

@@ -17,7 +17,7 @@
   max-width: 440px;
   padding: 32px 28px 24px;
   text-align: start;
-  background: rgba(255, 255, 255, 0.94);
+  background: var(--elevated-surface);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid rgba(245, 158, 11, 0.28);

apps/business/src/components/ConfirmDeleteModal.module.css

@@ -17,7 +17,7 @@
   max-width: 400px;
   padding: 32px 28px 24px;
   text-align: center;
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--elevated-surface);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid rgba(239, 68, 68, 0.25);

apps/business/src/components/CreateStoreItemsModal.module.css

@@ -10,7 +10,7 @@
   gap: 8px;
   align-items: center;
   padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: var(--radius-sm);
 }
@@ -39,7 +39,7 @@
   line-height: 1.4;
   font-family: inherit;
   color: var(--text-primary);
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;
@@ -235,7 +235,7 @@
 
 .discountRow {
   padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: var(--radius-sm);
 }

apps/business/src/components/DailyActivityChart.module.css

@@ -218,7 +218,7 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s;
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--elevated-surface);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--glass-border);

apps/business/src/components/GenerateWebsiteLinkModal.module.css

@@ -45,7 +45,7 @@
   font-size: 12px;
   font-family: var(--font-ui);
   color: var(--text-secondary);
-  background: rgba(255, 255, 255, 0.45);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.28);
   border-radius: var(--radius-sm);
   word-break: break-all;

apps/business/src/components/Header.module.css

@@ -89,7 +89,7 @@
   gap: 8px;
   padding: 8px 14px;
   border-radius: 50px;
-  background: rgba(255, 255, 255, 0.5);
+  background: var(--surface);
   border: 1px solid var(--glass-border);
   cursor: pointer;
   transition: box-shadow 0.2s, border-color 0.2s;
@@ -143,7 +143,7 @@
   inset-inline-end: 0;
   min-width: 180px;
   padding: 6px;
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--elevated-surface);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--glass-border);

apps/business/src/components/ImageCropper.module.css

@@ -15,7 +15,7 @@
   min-height: 0;
   border: 2px dashed rgba(148, 163, 184, 0.4);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.4);
+  background: var(--surface);
   color: var(--text-secondary);
   font-size: 14px;
   cursor: pointer;
@@ -89,7 +89,7 @@
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.5);
+  background: var(--surface);
 }
 
 .cropArea {

apps/business/src/components/ImageLightbox.module.css

@@ -55,7 +55,7 @@
   max-height: calc(100vh - 180px);
   object-fit: contain;
   border-radius: 12px;
-  background: #ffffff;
+  background: var(--card-media-bg);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
 }
 
@@ -107,7 +107,7 @@
   border-radius: 8px;
   overflow: hidden;
   border: 2px solid transparent;
-  background: #fff;
+  background: var(--card-media-bg);
   opacity: 0.72;
   transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
 }

apps/business/src/components/ImageUploader.module.css

@@ -15,7 +15,7 @@
   border-radius: var(--radius-sm);
   overflow: hidden;
   border: 1px solid var(--glass-border);
-  background: #fff;
+  background: var(--card-media-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -58,7 +58,7 @@
   gap: 6px;
   border: 2px dashed rgba(148, 163, 184, 0.4);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.4);
+  background: var(--surface);
   color: var(--text-secondary);
   font-size: 12px;
   transition: border-color 0.2s, color 0.2s, background 0.2s;

apps/business/src/components/InvoiceDraftFields.module.css

@@ -12,7 +12,7 @@
   padding: 12px;
   border: 1px solid rgba(148, 163, 184, 0.28);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.45);
+  background: var(--surface);
 }
 
 .itemCardHeader {
@@ -100,7 +100,7 @@
   font-size: 12px;
   font-family: var(--font-ui);
   color: var(--text-primary);
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   appearance: none;

apps/business/src/components/InvoiceForm.module.css

@@ -22,7 +22,7 @@
   line-height: 1.4;
   font-family: var(--font-ui);
   color: var(--text-primary);
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;

apps/business/src/components/JalaliDatePicker.module.css

@@ -8,7 +8,7 @@
   padding: var(--field-padding-y) var(--field-padding-x);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.85);
+  background: var(--surface);
   font-size: var(--field-font-size);
   font-family: var(--font-ui);
   color: var(--text-primary);
@@ -39,7 +39,7 @@
 .calendar :global(.rmdp-wrapper) {
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--elevated-surface);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
 }

apps/business/src/components/ListFiltersPanel.module.css

@@ -104,7 +104,7 @@
   padding: var(--field-padding-y) var(--field-padding-x);
   font-size: var(--field-font-size);
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.65);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;
@@ -117,7 +117,7 @@
   padding: var(--field-padding-y) var(--select-padding-end) var(--field-padding-y) var(--field-padding-x);
   appearance: none;
   -webkit-appearance: none;
-  background-color: rgba(255, 255, 255, 0.65);
+  background-color: var(--surface);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--select-arrow-offset) center;

apps/business/src/components/Modal.module.css

@@ -17,7 +17,7 @@
   max-height: calc(100vh - 40px);
   display: flex;
   flex-direction: column;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--elevated-surface);
   backdrop-filter: blur(28px);
   -webkit-backdrop-filter: blur(28px);
   border: 1px solid var(--glass-border);

apps/business/src/components/MultiSelectDropdown.module.css

@@ -14,7 +14,7 @@
   font-family: inherit;
   color: var(--text-primary);
   text-align: left;
-  background: rgba(255, 255, 255, 0.65);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -71,7 +71,7 @@
   flex-direction: column;
   max-height: none;
   overflow: visible;
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--elevated-surface);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
@@ -148,7 +148,7 @@
   border: 1.5px solid rgba(148, 163, 184, 0.55);
   border-radius: 4px;
   color: white;
-  background: white;
+  background: var(--card-media-bg);
 }
 
 .checkSelected {

apps/business/src/components/OrderItemsModal.module.css

@@ -48,7 +48,7 @@
   padding: 10px 12px;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(148, 163, 184, 0.18);
-  background: rgba(255, 255, 255, 0.55);
+  background: var(--surface);
 }
 
 .itemThumb {
@@ -57,7 +57,7 @@
   flex-shrink: 0;
   border-radius: 8px;
   overflow: hidden;
-  background: #fff;
+  background: var(--card-media-bg);
   border: 1px solid rgba(148, 163, 184, 0.15);
 }
 

apps/business/src/components/OrderStepModal.module.css

@@ -14,7 +14,7 @@
   text-align: start;
   border: 1px solid rgba(148, 163, 184, 0.3);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.45);
+  background: var(--surface);
   transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
 }
 

apps/business/src/components/OrderTransactionsModal.module.css

@@ -22,7 +22,7 @@
   padding: 12px 14px;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(148, 163, 184, 0.18);
-  background: rgba(255, 255, 255, 0.55);
+  background: var(--surface);
 }
 
 .txHeader {

apps/business/src/components/PickStoreVariantModal.module.css

@@ -18,7 +18,7 @@
   padding: 12px 14px;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(148, 163, 184, 0.2);
-  background: rgba(255, 255, 255, 0.65);
+  background: var(--surface);
   text-align: left;
   transition: border-color 0.2s, background 0.2s, transform 0.15s;
 }

apps/business/src/components/ProductActivityChart.module.css

@@ -189,7 +189,7 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s;
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--elevated-surface);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--glass-border);

apps/business/src/components/ProductCard.module.css

@@ -7,6 +7,7 @@
   border: 1px solid var(--glass-border);
   border-radius: var(--radius);
   box-shadow: var(--glass-shadow);
+  overflow: hidden;
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
@@ -34,16 +35,15 @@
   width: 100%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
-  background: #ffffff;
+  background: var(--card-media-bg);
   border-bottom: 1px solid rgba(148, 163, 184, 0.12);
-  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
 }
 
 .image {
   width: 100%;
   height: 100%;
-  object-fit: contain;
-  padding: 10px;
+  object-fit: cover;
+  display: block;
 }
 
 .imagePlaceholder {

apps/business/src/components/ProductCommentsModal.module.css

@@ -17,7 +17,7 @@
   max-height: 90vh;
   display: flex;
   flex-direction: column;
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--elevated-surface);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid var(--glass-border);
@@ -94,7 +94,7 @@
 
 .comment {
   padding: 14px 16px;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: var(--radius-sm);
 }

apps/business/src/components/ProductDetailsTabs.module.css

@@ -37,7 +37,7 @@
 
 .tabActive {
   color: var(--primary);
-  background: rgba(255, 255, 255, 0.75);
+  background: var(--surface);
   box-shadow: inset 0 -2px 0 var(--primary);
 }
 
@@ -118,7 +118,7 @@
 .comment,
 .review {
   padding: 14px 16px;
-  background: rgba(255, 255, 255, 0.65);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.2);
   border-radius: var(--radius-sm);
 }

apps/business/src/components/SearchableSelect.module.css

@@ -8,7 +8,7 @@
   gap: 6px;
   min-height: var(--field-height);
   padding: 0 var(--field-padding-x);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -74,7 +74,7 @@
   list-style: none;
   margin: 0;
   padding: 6px;
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--elevated-surface);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);

apps/business/src/components/SectionCard.module.css

@@ -25,7 +25,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, var(--primary-light) 0%, rgba(219, 234, 254, 0.5) 100%);
+  background: linear-gradient(135deg, var(--icon-bg) 0%, var(--icon-bg-end) 100%);
+  border: 1px solid rgba(var(--primary-rgb) / 0.22);
   border-radius: var(--radius-sm);
   color: var(--primary);
   margin-bottom: 20px;

apps/business/src/components/ShoppingCartModal.module.css

@@ -56,7 +56,7 @@
   padding: 6px 10px;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(148, 163, 184, 0.18);
-  background: rgba(255, 255, 255, 0.55);
+  background: var(--surface);
   min-width: 0;
 }
 
@@ -66,7 +66,7 @@
   flex-shrink: 0;
   border-radius: 10px;
   overflow: hidden;
-  background: #fff;
+  background: var(--card-media-bg);
   border: 1px solid rgba(148, 163, 184, 0.15);
 }
 
@@ -136,7 +136,7 @@
   border: 1px solid rgba(148, 163, 184, 0.2);
   border-radius: 8px;
   padding: 1px;
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
 }
 
 .qtyBtn {
@@ -211,7 +211,7 @@
   font-size: var(--field-font-size);
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.75);
+  background: var(--surface);
   color: var(--text-primary);
 }
 
@@ -258,7 +258,7 @@
   list-style: none;
   border: 1px solid rgba(148, 163, 184, 0.2);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.85);
+  background: var(--surface);
   max-height: 180px;
   overflow-y: auto;
   overflow-x: hidden;
@@ -356,7 +356,7 @@
   padding: 12px 14px;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(148, 163, 184, 0.2);
-  background: rgba(255, 255, 255, 0.55);
+  background: var(--surface);
   font-size: 13px;
   color: var(--text-secondary);
 }
@@ -450,7 +450,7 @@
   padding: var(--field-padding-y) var(--field-padding-x);
   font-size: var(--field-font-size);
   color: var(--text-primary);
-  background-color: rgba(255, 255, 255, 0.75);
+  background-color: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;

apps/business/src/components/Sidebar.module.css

@@ -35,7 +35,7 @@
 .brandLogoUploaded {
   border-radius: 8px;
   object-fit: cover;
-  background: rgba(255, 255, 255, 0.75);
+  background: var(--card-media-bg);
 }
 
 .brandEditBtn {

apps/business/src/components/Sidebar.tsx

@@ -91,10 +91,9 @@ export function Sidebar({ open = false }: SidebarProps) {
   const navigate = useNavigate()
   const { user, logout } = useAuth()
   const { locale } = useLocale()
-  const { enabledModules } = useTenantBranding()
+  const { enabledModules, logoUrl: brandLogoUrl } = useTenantBranding()
   const t = useT()
   const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({})
-  const [brandLogoUrl, setBrandLogoUrl] = useState<string | null>(null)
   const [nameEn, setNameEn] = useState('')
   const [nameFa, setNameFa] = useState('')
 
@@ -242,12 +241,10 @@ export function Sidebar({ open = false }: SidebarProps) {
     async function loadBranding() {
       try {
         const data = await getBusinessProfile(controller.signal)
-        setBrandLogoUrl(data.profile.logoUrl)
         setNameEn(data.profile.nameEn.trim())
         setNameFa(data.profile.nameFa.trim())
       } catch (err) {
         if (isAbortError(err)) return
-        setBrandLogoUrl(null)
         setNameEn('')
         setNameFa('')
       }

apps/business/src/components/StoreItemCard.module.css

@@ -38,7 +38,7 @@
   width: 100%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
-  background: #ffffff;
+  background: var(--card-media-bg);
   border-bottom: 1px solid rgba(148, 163, 184, 0.12);
 }
 
@@ -73,7 +73,7 @@
   letter-spacing: 0.03em;
   border-radius: 50px;
   border: 1px solid var(--glass-border);
-  background: rgba(255, 255, 255, 0.82);
+  background: var(--surface);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);

apps/business/src/components/StoreItemMultiSearchSelect.module.css

@@ -37,7 +37,7 @@
   font-size: 11px;
   font-weight: 700;
   color: var(--primary);
-  background: #fff;
+  background: var(--card-media-bg);
 }
 
 .optionSelected .checkbox {
@@ -51,7 +51,7 @@
   flex-shrink: 0;
   border-radius: 6px;
   overflow: hidden;
-  background: #fff;
+  background: var(--card-media-bg);
   border: 1px solid rgba(148, 163, 184, 0.15);
   display: flex;
   align-items: center;
@@ -132,7 +132,7 @@
   padding: 8px 10px;
   border: 1px solid rgba(148, 163, 184, 0.2);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.55);
+  background: var(--surface);
 }
 
 .removeSelectedBtn {

apps/business/src/components/Switch.module.css

@@ -5,13 +5,43 @@
   flex-shrink: 0;
   border-radius: 50px;
   background: rgba(148, 163, 184, 0.45);
+  overflow: hidden;
   transition: background 0.2s ease;
 }
 
+.switch::before,
+.switch::after {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: var(--font-en), var(--font-ui);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  pointer-events: none;
+  z-index: 0;
+  color: var(--text-primary);
+}
+
+.switch::before {
+  content: '1';
+  left: 7px;
+}
+
+.switch::after {
+  content: '0';
+  right: 7px;
+}
+
 .switch.on {
   background: var(--primary);
 }
 
+.switch.on::before,
+.switch.on::after {
+  color: #fff;
+}
+
 .switch:disabled {
   opacity: 0.55;
   cursor: not-allowed;
@@ -27,6 +57,7 @@
   background: #fff;
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
   transition: transform 0.2s ease;
+  z-index: 1;
 }
 
 .switch.on .thumb {

apps/business/src/components/TagInput.module.css

@@ -1,7 +1,7 @@
 .wrapper {
   min-height: var(--field-height);
   padding: 6px 10px;
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   transition: border-color 0.2s, box-shadow 0.2s;

apps/business/src/components/TechnicalFormModal.module.css

@@ -11,7 +11,7 @@
 
 .fieldCard {
   padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: var(--radius-sm);
 }
@@ -30,7 +30,7 @@
   line-height: 1.4;
   font-family: inherit;
   color: var(--text-primary);
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;
@@ -115,7 +115,7 @@
   line-height: 1.4;
   font-family: inherit;
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;
@@ -137,7 +137,7 @@
   line-height: 1.5;
   font-family: inherit;
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;

apps/business/src/components/Toast.module.css

@@ -19,7 +19,7 @@
   font-weight: 500;
   line-height: 1.4;
   color: var(--text-primary);
-  background: var(--toast-bg, rgba(255, 255, 255, 0.94));
+  background: var(--toast-bg, var(--elevated-surface));
   backdrop-filter: blur(var(--blur-glass));
   -webkit-backdrop-filter: blur(var(--blur-glass));
   border: 1px solid var(--glass-border);

apps/business/src/components/ToggleSwitch.module.css

@@ -4,12 +4,42 @@
   height: 22px;
   border-radius: 999px;
   background: rgba(148, 163, 184, 0.45);
+  overflow: hidden;
   transition: background 0.2s;
   flex-shrink: 0;
 }
 
+.switch::before,
+.switch::after {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: var(--font-en), var(--font-ui);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  pointer-events: none;
+  z-index: 0;
+  color: var(--text-primary);
+}
+
+.switch::before {
+  content: '1';
+  left: 6px;
+}
+
+.switch::after {
+  content: '0';
+  right: 6px;
+}
+
 .switch.on {
-  background: #16a34a;
+  background: var(--primary);
+}
+
+.switch.on::before,
+.switch.on::after {
+  color: #fff;
 }
 
 .thumb {
@@ -19,9 +49,10 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: white;
+  background: #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
   transition: transform 0.2s;
+  z-index: 1;
 }
 
 .switch.on .thumb {
@@ -33,6 +64,19 @@
   height: 18px;
 }
 
+.compact::before,
+.compact::after {
+  font-size: 8px;
+}
+
+.compact::before {
+  left: 5px;
+}
+
+.compact::after {
+  right: 5px;
+}
+
 .compact .thumb {
   width: 14px;
   height: 14px;

apps/business/src/components/Tooltip.module.css

@@ -21,7 +21,7 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s ease, visibility 0.15s;
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--elevated-surface);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--glass-border);
@@ -44,10 +44,10 @@
 
 .tipTop::after {
   top: 100%;
-  border-top-color: rgba(255, 255, 255, 0.95);
+  border-top-color: var(--elevated-surface);
 }
 
 .tipBottom::after {
   bottom: 100%;
-  border-bottom-color: rgba(255, 255, 255, 0.95);
+  border-bottom-color: var(--elevated-surface);
 }

apps/business/src/components/UserProductStatusModal.module.css

@@ -18,7 +18,7 @@
   padding: var(--field-padding-y) var(--field-padding-x);
   border-radius: var(--radius-sm);
   border: 1px solid rgba(148, 163, 184, 0.22);
-  background: rgba(255, 255, 255, 0.55);
+  background: var(--surface);
   cursor: pointer;
   font-size: var(--field-font-size);
   font-family: var(--font-ui);

apps/business/src/components/VariationsModal.module.css

@@ -28,7 +28,7 @@
   max-width: 480px;
   max-height: 90vh;
   overflow-y: auto;
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--elevated-surface);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid var(--glass-border);
@@ -117,7 +117,7 @@
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: var(--radius-sm);
 }
@@ -208,7 +208,7 @@
   line-height: 1.4;
   font-family: inherit;
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;
@@ -236,7 +236,7 @@
   line-height: 1.5;
   font-family: inherit;
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;
@@ -262,7 +262,7 @@
   font-size: 13px;
   font-weight: 500;
   color: var(--text-secondary);
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: 50px;
   transition: all 0.15s;
@@ -300,7 +300,7 @@
   font-size: var(--field-font-size);
   font-family: var(--font-ui);
   color: var(--text-primary);
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: var(--surface);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   outline: none;

apps/business/src/components/WebsiteSliderSlideCard.module.css

@@ -21,7 +21,7 @@
   width: 100%;
   aspect-ratio: 9 / 4;
   overflow: hidden;
-  background: #fff;
+  background: var(--card-media-bg);
   border-bottom: 1px solid rgba(148, 163, 184, 0.12);
 }
 

apps/business/src/components/WebsiteStaticImageGallery.module.css

@@ -61,7 +61,7 @@
   width: 100%;
   padding: 0;
   overflow: hidden;
-  background: #fff;
+  background: var(--card-media-bg);
   cursor: pointer;
 }