@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/pages-standard/MarketingCatalogPage.vue

@@ -1,5 +1,5 @@
 <!--
-  MarketingCatalogPage — marketing catalog for SuperAdmin (SPEC_V2 §11.1 M3).
+  MarketingCatalogPage — marketing catalog for SuperAdmin.
 
   Public marketing projection per plan: filtered view for website,
   pricing page and checkout. Two tabs:
@@ -17,100 +17,122 @@
   `adminEndpoint` + `projectKey`, the wrapper stays thin.
 -->
 <template>
-    <div class="mc">
-        <MarketingCatalogHeader
-            v-model:locale-picker-open="localePickerOpen"
-            :active-locale-set="activeLocaleSet"
-            :active-locale="activeLocale"
-            :default-locale="defaultLocale"
-            :addable-locales="addableLocales"
-            :busy="busy"
-            @locale-change="onLocaleChange"
-            @remove-locale="removeLocale"
-            @add-locale="addLocale"
-            @reload="reloadAll"
-        />
-
-        <div v-if="pageError" class="mc-banner mc-banner--error" role="alert">
-            <strong>{{ common.error }}:</strong> {{ pageError }}
-            <button class="mc-banner-x" type="button" @click="pageError = null">×</button>
-        </div>
-
-        <MarketingCatalogToolbar
-            v-model:tab="tab"
-            :active-promo-count="activePromoCount"
-            :catalog-version="catalogVersion"
-            :active-locale="activeLocale"
-        />
-
-        <div v-if="loading" class="mc-loading">{{ msg.page.loading }}</div>
-
-        <!-- ─── Tab: Promotions ─── -->
-        <MarketingPromotionsTab
-            v-else-if="tab === 'promos'"
-            :promotions="promotions"
-            :plans="promoPlanOptions"
-            :active-locales="activeLocaleSet"
-            :busy="busy"
-            :project-key="projectKey"
-            :create="promotionsApi.create"
-            :update="promotionsApi.update"
-            :remove="promotionsApi.remove"
-        />
-
-        <div v-else-if="rows.length === 0" class="mc-banner mc-banner--info">
-            {{ msg.page.emptyPlansBefore }} <strong>{{ msg.page.emptyPlansLink }}</strong>
-            {{ msg.page.emptyPlansAfter }}
-        </div>
-
-        <MarketingCatalogPreview
-            v-else-if="tab === 'preview'"
-            :visible-rows="visibleRows"
-            :preview-url="previewUrl"
-            :monthly-of="monthlyOf"
-            :yearly-of="yearlyOf"
-            :format-euro="formatEuro"
-            :promo-of="promoOf"
-            :promo-result-of="promoResultOf"
-            :promo-badge-of="promoBadgeOf"
-            :promo-fineprint-of="promoFineprintOf"
-            :promo-color-of="promoColorOf"
-            :cta-text="ctaText"
-            :show-trial-note="showTrialNote"
-            :top-feature-label="topFeatureLabel"
-        />
-
-        <MarketingCatalogAdmin
-            v-else
-            :admin-rows="adminRows"
-            :busy="busy"
-            :expanded-key="expandedKey"
-            :active-locale="activeLocale"
-            :default-locale="defaultLocale"
-            :edit-features="editFeatures"
-            :format-version-title="formatVersionTitle"
-            :format-version-tab="formatVersionTab"
-            :auto-cta-text="autoCtaText"
-            :cta-value="ctaValue"
-            :resolve-component-label="resolveComponentLabel"
-            :suggestions-for="suggestionsFor"
-            @select-version="selectVersion"
-            @patch="patch"
-            @patch-display-label="patchDisplayLabel"
-            @toggle-expand="toggleExpand"
-            @update-feature-label="updateFeatureLabel"
-            @update-feature-strong="updateFeatureStrong"
-            @persist-features="persistFeatures"
-            @move-feature="moveFeature"
-            @remove-feature="removeFeature"
-            @add-feature="addFeature"
-            @add-suggestion="addSuggestion"
-        />
-    </div>
+    <AdminPage class="sa-marketing">
+        <AdminHero :title="msg.header.title" :subtitle="msg.header.subtitle">
+            <template #actions>
+                <MarketingCatalogHeader
+                    v-model:locale-picker-open="localePickerOpen"
+                    :active-locale-set="activeLocaleSet"
+                    :active-locale="activeLocale"
+                    :default-locale="defaultLocale"
+                    :addable-locales="addableLocales"
+                    :busy="busy"
+                    @locale-change="onLocaleChange"
+                    @remove-locale="removeLocale"
+                    @add-locale="addLocale"
+                    @reload="reloadAll"
+                />
+            </template>
+        </AdminHero>
+
+        <AdminBody>
+            <AdminSection>
+                <div
+                    v-if="pageError"
+                    class="sa-marketing-banner sa-marketing-banner--error"
+                    role="alert"
+                >
+                    <strong>{{ common.error }}:</strong> {{ pageError }}
+                    <button class="sa-marketing-banner-x" type="button" @click="pageError = null">
+                        ×
+                    </button>
+                </div>
+
+                <MarketingCatalogToolbar
+                    v-model:tab="tab"
+                    :active-promo-count="activePromoCount"
+                    :catalog-version="catalogVersion"
+                    :active-locale="activeLocale"
+                />
+            </AdminSection>
+            <AdminSection>
+                <div v-if="loading" class="sa-marketing-loading">{{ msg.page.loading }}</div>
+
+                <!-- ─── Tab: Promotions ─── -->
+                <MarketingPromotionsTab
+                    v-else-if="tab === 'promos'"
+                    :promotions="promotions"
+                    :plans="promoPlanOptions"
+                    :active-locales="activeLocaleSet"
+                    :busy="busy"
+                    :project-key="projectKey"
+                    :create="promotionsApi.create"
+                    :update="promotionsApi.update"
+                    :remove="promotionsApi.remove"
+                />
+
+                <div
+                    v-else-if="rows.length === 0"
+                    class="sa-marketing-banner sa-marketing-banner--info"
+                >
+                    {{ msg.page.emptyPlansBefore }} <strong>{{ msg.page.emptyPlansLink }}</strong>
+                    {{ msg.page.emptyPlansAfter }}
+                </div>
+
+                <MarketingCatalogPreview
+                    v-else-if="tab === 'preview'"
+                    :visible-rows="visibleRows"
+                    :preview-url="previewUrl"
+                    :monthly-of="monthlyOf"
+                    :yearly-of="yearlyOf"
+                    :format-euro="formatEuro"
+                    :promo-of="promoOf"
+                    :promo-result-of="promoResultOf"
+                    :promo-badge-of="promoBadgeOf"
+                    :promo-fineprint-of="promoFineprintOf"
+                    :promo-color-of="promoColorOf"
+                    :cta-text="ctaText"
+                    :show-trial-note="showTrialNote"
+                    :top-feature-label="topFeatureLabel"
+                />
+
+                <MarketingCatalogAdmin
+                    v-else
+                    :admin-rows="adminRows"
+                    :busy="busy"
+                    :expanded-key="expandedKey"
+                    :active-locale="activeLocale"
+                    :default-locale="defaultLocale"
+                    :edit-features="editFeatures"
+                    :format-version-title="formatVersionTitle"
+                    :format-version-tab="formatVersionTab"
+                    :auto-cta-text="autoCtaText"
+                    :cta-value="ctaValue"
+                    :resolve-component-label="resolveComponentLabel"
+                    :suggestions-for="suggestionsFor"
+                    @select-version="selectVersion"
+                    @patch="patch"
+                    @patch-display-label="patchDisplayLabel"
+                    @toggle-expand="toggleExpand"
+                    @update-feature-label="updateFeatureLabel"
+                    @update-feature-strong="updateFeatureStrong"
+                    @persist-features="persistFeatures"
+                    @move-feature="moveFeature"
+                    @remove-feature="removeFeature"
+                    @add-feature="addFeature"
+                    @add-suggestion="addSuggestion"
+                />
+            </AdminSection>
+        </AdminBody>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
+import AdminBody from '../components/admin-page/AdminBody.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
 import {
     applyPromo,
     pickActivePromo,
@@ -171,8 +193,8 @@ const tab = ref<MarketingCatalogTab>('preview');
 const expandedKey = ref<string | null>(null);
 const activeLocale = ref<string>(availableLocales.value[0]);
 
-// LocaleManager — `availableLocales` is the allowed pool (app config,
-// SPEC_V2 §6.5), `activeLocaleSet` the runtime-activated subset.
+// LocaleManager — `availableLocales` is the allowed pool (app config),
+// `activeLocaleSet` the runtime-activated subset.
 // Persisted via `/admin/catalog/marketing-settings` (MarketingSettings).
 const defaultLocale = computed(() => availableLocales.value[0]);
 const activeLocaleSet = ref<string[]>([...availableLocales.value]);
@@ -262,7 +284,7 @@ const promotionsApi = usePromotions({
 });
 
 // Catalog entries (features + quotas with i18n) — provides the translated
-// labels for the top-features editor (SPEC_V2 §6.3 + §6.5).
+// labels for the top-features editor.
 const catalogEntriesApi = useCatalogEntries({
     adminEndpoint: props.adminEndpoint,
     projectKey: props.projectKey,
@@ -401,7 +423,7 @@ function publishedVersionsOf(plan: PlanRow): PlanVersionRow[] {
 }
 
 /**
- * Version active as of `asOf` (SPEC_V2 §4.2): `validFrom <= asOf` and
+ * Version active as of `asOf`: `validFrom <= asOf` and
  * (`validUntil == null OR validUntil > asOf`). Default is the version
  * active today. Fallback when no `validFrom` data is maintained:
  * highest version.
@@ -597,7 +619,7 @@ function formatEuro(value: number): string {
     return formatCurrency(Math.round(value * 100) / 100, locale.value);
 }
 
-// ─── Promo application in the preview (SPEC_V2 §9a) ───
+// ─── Promo application in the preview ───
 const promoToday = new Date();
 function promoOf(row: MarketingRow): PromotionRow | null {
     return pickActivePromo(
@@ -815,144 +837,109 @@ async function onLocaleChange(loc: string): Promise<void> {
 </script>
 
 <style>
-.mc {
-    --mc-bg: #f6f7f9;
-    --mc-surface: #ffffff;
-    --mc-surface-2: #f8fafc;
-    --mc-border: #e5e7eb;
-    --mc-border-strong: #d1d5db;
-    --mc-text: #0f172a;
-    --mc-text-2: #475569;
-    --mc-text-3: #94a3b8;
-    --mc-primary: #2563eb;
-    --mc-primary-700: #1d4ed8;
-    --mc-primary-50: #eff6ff;
-    --mc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-    --mc-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
-
+.sa-marketing {
     padding: 22px 26px;
-    background: var(--mc-bg);
-    color: var(--mc-text);
-    font-family: var(--mc-font-sans);
+    background: var(--sa-bg-app);
+    color: var(--sa-heading);
+    font-family: var(--sa-font-body);
     min-height: 100%;
     box-sizing: border-box;
 }
-.mc * {
-    box-sizing: border-box;
-}
 
-.mc-page-head {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 20px;
-    margin-bottom: 14px;
-}
-.mc-h-title {
-    font-size: 22px;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    margin: 0;
-}
-.mc-h-sub {
-    font-size: 12.5px;
-    color: var(--mc-text-2);
-    margin: 3px 0 0;
-}
-.mc-head-actions {
+.sa-marketing-head-actions {
     display: flex;
     align-items: center;
     gap: 10px;
 }
 
-.mc-locale-switch {
+.sa-marketing-locale-switch {
     display: inline-flex;
     gap: 2px;
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 3px;
 }
-.mc-locale-btn {
+.sa-marketing-locale-btn {
     padding: 5px 10px;
     border: 0;
     background: transparent;
     border-radius: 6px;
-    font: 500 12px var(--mc-font-mono);
-    color: var(--mc-text-2);
+    font: 500 12px var(--sa-font-mono);
+    color: var(--sa-muted-dark);
     cursor: pointer;
 }
-.mc-locale-btn.active {
-    background: var(--mc-primary-50);
-    color: var(--mc-primary-700);
+.sa-marketing-locale-btn.active {
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
     font-weight: 600;
 }
-.mc-locale-mgr {
+.sa-marketing-locale-mgr {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
 }
-.mc-locale-mgr-label {
+.sa-marketing-locale-mgr-label {
     font-size: 11px;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
 }
-.mc-locale-pill {
+.sa-marketing-locale-pill {
     display: inline-flex;
     align-items: center;
-    border: 1px solid var(--mc-border);
+    border: 1px solid var(--sa-border);
     border-radius: 7px;
     overflow: hidden;
 }
-.mc-locale-pill.active {
-    border-color: var(--mc-primary-700);
-    background: var(--mc-primary-50);
+.sa-marketing-locale-pill.active {
+    border-color: var(--sa-primary-strong);
+    background: var(--sa-primary-50);
 }
-.mc-locale-pill-btn {
+.sa-marketing-locale-pill-btn {
     border: 0;
     background: transparent;
     padding: 4px 8px;
-    font: 600 11px var(--mc-font-mono);
-    color: var(--mc-text-2);
+    font: 600 11px var(--sa-font-mono);
+    color: var(--sa-muted-dark);
     cursor: pointer;
 }
-.mc-locale-pill.active .mc-locale-pill-btn {
-    color: var(--mc-primary-700);
+.sa-marketing-locale-pill.active .sa-marketing-locale-pill-btn {
+    color: var(--sa-primary-strong);
 }
-.mc-locale-x {
+.sa-marketing-locale-x {
     border: 0;
     background: transparent;
     padding: 4px 7px;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
     cursor: pointer;
     font-size: 13px;
 }
-.mc-locale-x:hover {
+.sa-marketing-locale-x:hover {
     color: #dc2626;
 }
-.mc-locale-add-wrap {
+.sa-marketing-locale-add-wrap {
     position: relative;
 }
-.mc-locale-add {
-    border: 1px dashed var(--mc-border);
+.sa-marketing-locale-add {
+    border: 1px dashed var(--sa-border);
     background: transparent;
     border-radius: 7px;
     padding: 4px 9px;
     font-size: 11px;
-    color: var(--mc-text-2);
+    color: var(--sa-muted-dark);
     cursor: pointer;
 }
-.mc-locale-add:disabled {
+.sa-marketing-locale-add:disabled {
     opacity: 0.4;
     cursor: default;
 }
-.mc-locale-picker {
+.sa-marketing-locale-picker {
     position: absolute;
     top: 100%;
     right: 0;
     margin-top: 4px;
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     padding: 4px;
@@ -962,48 +949,20 @@ async function onLocaleChange(loc: string): Promise<void> {
     z-index: 20;
     min-width: 80px;
 }
-.mc-locale-picker-row {
+.sa-marketing-locale-picker-row {
     border: 0;
     background: transparent;
     padding: 6px 10px;
     text-align: left;
     border-radius: 6px;
-    font: 600 11px var(--mc-font-mono);
+    font: 600 11px var(--sa-font-mono);
     cursor: pointer;
 }
-.mc-locale-picker-row:hover {
-    background: var(--mc-primary-50);
-}
-
-.mc-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    padding: 8px 14px;
-    border-radius: 7px;
-    font: 500 13px var(--mc-font-sans);
-    cursor: pointer;
-    border: 1px solid var(--mc-border-strong);
-    background: var(--mc-surface);
-    color: var(--mc-text);
-    transition:
-        background 0.12s,
-        border-color 0.12s;
-}
-.mc-btn:hover:not(:disabled) {
-    background: #f8fafc;
-}
-.mc-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.mc-btn--sm {
-    padding: 5px 9px;
-    font-size: 12px;
-    gap: 5px;
+.sa-marketing-locale-picker-row:hover {
+    background: var(--sa-primary-50);
 }
 
-.mc-banner {
+.sa-marketing-banner {
     border-radius: 8px;
     padding: 10px 14px;
     font-size: 12.5px;
@@ -1012,17 +971,17 @@ async function onLocaleChange(loc: string): Promise<void> {
     align-items: center;
     gap: 8px;
 }
-.mc-banner--error {
+.sa-marketing-banner--error {
     background: #fef2f2;
     color: #b91c1c;
     border: 1px solid #fca5a5;
 }
-.mc-banner--info {
-    background: var(--mc-primary-50);
+.sa-marketing-banner--info {
+    background: var(--sa-primary-50);
     color: #1e40af;
     border: 1px solid #bfdbfe;
 }
-.mc-banner-x {
+.sa-marketing-banner-x {
     margin-left: auto;
     background: transparent;
     border: 0;
@@ -1031,32 +990,32 @@ async function onLocaleChange(loc: string): Promise<void> {
     line-height: 1;
     color: inherit;
 }
-.mc-loading {
+.sa-marketing-loading {
     padding: 40px;
     text-align: center;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
     font-size: 13px;
 }
 
-.mc-toolbar {
+.sa-marketing-toolbar {
     display: flex;
     gap: 12px;
     align-items: center;
-    margin: 4px 0 16px;
+    margin: 0px;
 }
-.mc-tabbar {
+.sa-marketing-tabbar {
     display: inline-flex;
     gap: 2px;
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 3px;
 }
-.mc-tab {
+.sa-marketing-tab {
     padding: 6px 14px;
     border-radius: 6px;
-    font: 500 13px var(--mc-font-sans);
-    color: var(--mc-text-2);
+    font: 500 13px var(--sa-font-body);
+    color: var(--sa-muted-dark);
     background: transparent;
     border: 0;
     cursor: pointer;
@@ -1064,15 +1023,15 @@ async function onLocaleChange(loc: string): Promise<void> {
         background 0.12s,
         color 0.12s;
 }
-.mc-tab:hover {
-    color: var(--mc-text);
+.sa-marketing-tab:hover {
+    color: var(--sa-heading);
 }
-.mc-tab.active {
-    background: var(--mc-primary-50);
-    color: var(--mc-primary-700);
+.sa-marketing-tab.active {
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
     font-weight: 600;
 }
-.mc-tab-count {
+.sa-marketing-tab-count {
     display: inline-block;
     margin-left: 5px;
     background: #10b981;
@@ -1082,88 +1041,88 @@ async function onLocaleChange(loc: string): Promise<void> {
     padding: 1px 6px;
     border-radius: 999px;
 }
-.mc-meta {
+.sa-marketing-meta {
     margin-left: auto;
     font-size: 12px;
-    color: var(--mc-text-2);
+    color: var(--sa-muted-dark);
     display: flex;
     align-items: center;
     gap: 8px;
 }
-.mc-meta code {
-    font: 500 11px var(--mc-font-mono);
-    background: #f1f5f9;
-    color: #475569;
+.sa-marketing-meta code {
+    font: 500 11px var(--sa-font-mono);
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark);
     padding: 2px 7px;
     border-radius: 4px;
 }
 
 /* ── Public catalog preview ── */
-.mc-window {
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border);
+.sa-marketing-window {
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 12px;
     overflow: hidden;
 }
-.mc-chrome {
+.sa-marketing-chrome {
     height: 36px;
-    background: #f1f5f9;
-    border-bottom: 1px solid var(--mc-border);
+    background: var(--sa-border-soft);
+    border-bottom: 1px solid var(--sa-border);
     display: flex;
     align-items: center;
     padding: 0 14px;
     gap: 6px;
 }
-.mc-chrome-dot {
+.sa-marketing-chrome-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
 }
-.mc-chrome-url {
+.sa-marketing-chrome-url {
     margin-left: 18px;
     flex: 1;
-    background: var(--mc-surface);
-    border: 1px solid #e2e8f0;
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 6px;
     padding: 4px 10px;
-    font: 500 11.5px var(--mc-font-mono);
-    color: #475569;
+    font: 500 11.5px var(--sa-font-mono);
+    color: var(--sa-muted-dark);
     max-width: 380px;
 }
-.mc-canvas {
+.sa-marketing-canvas {
     background: linear-gradient(180deg, #fbfbfd 0%, #fff 100%);
     padding: 36px 32px 28px;
 }
-.mc-eyebrow {
-    font: 700 11px var(--mc-font-sans);
+.sa-marketing-eyebrow {
+    font: 700 11px var(--sa-font-body);
     letter-spacing: 0.14em;
     text-transform: uppercase;
-    color: var(--mc-primary);
+    color: var(--sa-primary);
     text-align: center;
 }
-.mc-hero {
+.sa-marketing-hero {
     font-size: 32px;
     font-weight: 700;
     letter-spacing: -0.025em;
-    color: var(--mc-text);
+    color: var(--sa-heading);
     text-align: center;
     margin: 10px 0 6px;
 }
-.mc-sub {
+.sa-marketing-sub {
     font-size: 14px;
-    color: var(--mc-text-2);
+    color: var(--sa-muted-dark);
     text-align: center;
     max-width: 540px;
     margin: 0 auto 26px;
 }
-.mc-grid {
+.sa-marketing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 16px;
 }
-.mc-card {
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border);
+.sa-marketing-card {
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 12px;
     padding: 22px 20px 20px;
     display: flex;
@@ -1174,103 +1133,103 @@ async function onLocaleChange(loc: string): Promise<void> {
         box-shadow 0.15s,
         border-color 0.15s;
 }
-.mc-card:hover {
+.sa-marketing-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
-.mc-card.featured {
+.sa-marketing-card.featured {
     border-color: #bfdbfe;
     box-shadow: 0 10px 32px rgba(37, 99, 235, 0.1);
 }
-.mc-card-badge {
+.sa-marketing-card-badge {
     position: absolute;
     top: -10px;
     left: 50%;
     transform: translateX(-50%);
-    background: var(--mc-primary);
+    background: var(--sa-primary);
     color: #fff;
-    font: 700 10.5px var(--mc-font-sans);
+    font: 700 10.5px var(--sa-font-body);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 4px 12px;
     border-radius: 999px;
     white-space: nowrap;
 }
-.mc-card-key {
-    font: 700 10.5px var(--mc-font-mono);
+.sa-marketing-card-key {
+    font: 700 10.5px var(--sa-font-mono);
     letter-spacing: 0.08em;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
     text-transform: uppercase;
 }
-.mc-card-name {
+.sa-marketing-card-name {
     font-size: 22px;
     font-weight: 700;
     letter-spacing: -0.02em;
-    color: var(--mc-text);
+    color: var(--sa-heading);
     margin: 2px 0 4px;
 }
-.mc-card-desc {
+.sa-marketing-card-desc {
     font-size: 12.5px;
-    color: var(--mc-text-2);
+    color: var(--sa-muted-dark);
     line-height: 1.4;
     min-height: 36px;
 }
-.mc-card-price {
+.sa-marketing-card-price {
     margin: 18px 0 4px;
     display: flex;
     align-items: baseline;
     gap: 6px;
 }
-.mc-card-price-big {
+.sa-marketing-card-price-big {
     font-size: 32px;
     font-weight: 700;
     letter-spacing: -0.03em;
-    color: var(--mc-text);
+    color: var(--sa-heading);
 }
-.mc-card-price-unit {
+.sa-marketing-card-price-unit {
     font-size: 13px;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
 }
-.mc-card-price-y {
+.sa-marketing-card-price-y {
     font-size: 11.5px;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
     margin-bottom: 12px;
 }
-.mc-card-cta {
+.sa-marketing-card-cta {
     width: 100%;
     margin-top: 14px;
     padding: 9px 12px;
     border-radius: 8px;
-    border: 1px solid var(--mc-border);
-    background: var(--mc-surface);
-    color: var(--mc-text);
-    font: 600 13px var(--mc-font-sans);
+    border: 1px solid var(--sa-border);
+    background: var(--sa-bg-surface);
+    color: var(--sa-heading);
+    font: 600 13px var(--sa-font-body);
     cursor: pointer;
     transition:
         background 0.12s,
         border-color 0.12s;
 }
-.mc-card-cta:hover {
-    background: #f8fafc;
+.sa-marketing-card-cta:hover {
+    background: var(--sa-bg-surface-2);
 }
-.mc-card.featured .mc-card-cta {
-    background: var(--mc-primary);
-    border-color: var(--mc-primary);
+.sa-marketing-card.featured .sa-marketing-card-cta {
+    background: var(--sa-primary);
+    border-color: var(--sa-primary);
     color: #fff;
 }
-.mc-card.featured .mc-card-cta:hover {
-    background: var(--mc-primary-700);
+.sa-marketing-card.featured .sa-marketing-card-cta:hover {
+    background: var(--sa-primary-strong);
 }
-.mc-card-trialnote {
+.sa-marketing-card-trialnote {
     font-size: 11px;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
     text-align: center;
     margin-top: 6px;
 }
-.mc-card.has-promo {
+.sa-marketing-card.has-promo {
     border-color: #10b981;
 }
-.mc-promo-ribbon {
+.sa-marketing-promo-ribbon {
     position: absolute;
     top: 12px;
     right: -2px;
@@ -1280,37 +1239,37 @@ async function onLocaleChange(loc: string): Promise<void> {
     padding: 3px 12px 3px 10px;
     border-radius: 4px 0 0 4px;
 }
-.mc-card-price-strike {
+.sa-marketing-card-price-strike {
     display: flex;
     gap: 8px;
     align-items: baseline;
     margin-top: 2px;
 }
-.mc-card-price-strike s {
-    color: var(--mc-text-3);
+.sa-marketing-card-price-strike s {
+    color: var(--sa-muted-light);
     font-size: 14px;
 }
-.mc-price-regular {
+.sa-marketing-price-regular {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
 }
-.mc-card-fineprint {
+.sa-marketing-card-fineprint {
     font-size: 10px;
     color: #059669;
     text-align: center;
     margin-top: 6px;
 }
-.mc-card-includes {
+.sa-marketing-card-includes {
     margin-top: 18px;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
     font-weight: 700;
 }
-.mc-card-features {
+.sa-marketing-card-features {
     list-style: none;
     padding: 0;
     margin: 8px 0 0;
@@ -1320,145 +1279,145 @@ async function onLocaleChange(loc: string): Promise<void> {
     font-size: 12.5px;
     color: #334155;
 }
-.mc-card-features li {
+.sa-marketing-card-features li {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     line-height: 1.35;
 }
-.mc-card-features .mc-tick {
+.sa-marketing-card-features .sa-marketing-tick {
     color: #10b981;
     flex: 0 0 14px;
     margin-top: 1px;
 }
-.mc-card-features b {
-    color: var(--mc-text);
+.sa-marketing-card-features b {
+    color: var(--sa-heading);
     font-weight: 700;
 }
-.mc-card-features-empty {
+.sa-marketing-card-features-empty {
     margin-top: 8px;
     font-size: 12px;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
 }
 
 /* ── Marketing administration ── */
-.mc-admin {
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border);
+.sa-marketing-admin {
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 10px;
 }
-.mc-admin-head {
+.sa-marketing-admin-head {
     padding: 14px 16px;
-    border-bottom: 1px solid #f1f5f9;
+    border-bottom: 1px solid var(--sa-border-soft);
     display: flex;
     align-items: center;
     gap: 12px;
 }
-.mc-admin-title {
+.sa-marketing-admin-title {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: -0.01em;
-    color: var(--mc-text);
+    color: var(--sa-heading);
 }
-.mc-admin-sub {
+.sa-marketing-admin-sub {
     font-size: 11.5px;
-    color: var(--mc-text-2);
+    color: var(--sa-muted-dark);
 }
-.mc-admin-grid {
+.sa-marketing-admin-grid {
     display: grid;
     grid-template-columns: 1.6fr 1fr 1.4fr 1fr 1fr 150px;
     align-items: stretch;
 }
-.mc-admin-thead {
+.sa-marketing-admin-thead {
     display: contents;
 }
-.mc-admin-thead > div {
+.sa-marketing-admin-thead > div {
     background: #fbfbfd;
     padding: 10px 14px;
     font-size: 10.5px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--mc-text-2);
+    color: var(--sa-muted-dark);
     font-weight: 700;
-    border-bottom: 1px solid var(--mc-border);
+    border-bottom: 1px solid var(--sa-border);
 }
-.mc-admin-row {
+.sa-marketing-admin-row {
     display: contents;
 }
-.mc-admin-row > div {
+.sa-marketing-admin-row > div {
     padding: 12px 14px;
-    border-bottom: 1px solid #f1f5f9;
+    border-bottom: 1px solid var(--sa-border-soft);
     display: flex;
     align-items: center;
     font-size: 12.5px;
-    color: var(--mc-text);
+    color: var(--sa-heading);
 }
-.mc-admin-row--disabled > div {
+.sa-marketing-admin-row--disabled > div {
     background: #fcfcfd;
 }
-.mc-admin-row-end {
+.sa-marketing-admin-row-end {
     justify-content: flex-end;
     gap: 8px;
 }
-.mc-plan-cell {
+.sa-marketing-plan-cell {
     display: flex;
     align-items: center;
     gap: 12px;
 }
-.mc-plan-mark {
+.sa-marketing-plan-mark {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     display: grid;
     place-items: center;
-    font: 700 10px var(--mc-font-mono);
+    font: 700 10px var(--sa-font-mono);
     border: 1px solid;
 }
-.mc-plan-label {
+.sa-marketing-plan-label {
     font-size: 13px;
     font-weight: 700;
-    color: var(--mc-text);
+    color: var(--sa-heading);
 }
-.mc-plan-key {
-    font: 500 11px var(--mc-font-mono);
-    color: var(--mc-text-3);
+.sa-marketing-plan-key {
+    font: 500 11px var(--sa-font-mono);
+    color: var(--sa-muted-light);
 }
 
-.mc-field {
+.sa-marketing-field {
     width: 100%;
     padding: 5px 8px;
-    font: 400 12px var(--mc-font-sans);
-    color: var(--mc-text);
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border-strong);
+    font: 400 12px var(--sa-font-body);
+    color: var(--sa-heading);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border-strong);
     border-radius: 6px;
 }
-.mc-field:focus {
+.sa-marketing-field:focus {
     outline: none;
-    border-color: var(--mc-primary);
-    box-shadow: 0 0 0 3px var(--mc-primary-50);
+    border-color: var(--sa-primary);
+    box-shadow: 0 0 0 3px var(--sa-primary-50);
 }
-.mc-field:disabled {
-    background: #f1f5f9;
-    color: var(--mc-text-3);
+.sa-marketing-field:disabled {
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-light);
     cursor: not-allowed;
 }
-.mc-field--area {
+.sa-marketing-field--area {
     resize: vertical;
     font-size: 12.5px;
     line-height: 1.4;
 }
 
-.mc-toggle {
+.sa-marketing-toggle {
     position: relative;
     display: inline-block;
     width: 36px;
     height: 20px;
 }
-.mc-toggle input {
+.sa-marketing-toggle input {
     display: none;
 }
-.mc-toggle span {
+.sa-marketing-toggle span {
     position: absolute;
     inset: 0;
     background: #cbd5e1;
@@ -1466,7 +1425,7 @@ async function onLocaleChange(loc: string): Promise<void> {
     transition: background 0.15s;
     cursor: pointer;
 }
-.mc-toggle span::before {
+.sa-marketing-toggle span::before {
     content: '';
     position: absolute;
     width: 16px;
@@ -1478,18 +1437,18 @@ async function onLocaleChange(loc: string): Promise<void> {
     transition: transform 0.15s;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
-.mc-toggle input:checked + span {
-    background: var(--mc-primary);
+.sa-marketing-toggle input:checked + span {
+    background: var(--sa-primary);
 }
-.mc-toggle input:checked + span::before {
+.sa-marketing-toggle input:checked + span::before {
     transform: translateX(16px);
 }
-.mc-toggle.disabled span {
+.sa-marketing-toggle.disabled span {
     opacity: 0.45;
     cursor: not-allowed;
 }
 
-.mc-chip {
+.sa-marketing-chip {
     display: inline-flex;
     align-items: center;
     gap: 5px;
@@ -1499,22 +1458,22 @@ async function onLocaleChange(loc: string): Promise<void> {
     font-weight: 600;
     border: 1px solid;
 }
-.mc-chip--muted {
-    background: #f1f5f9;
-    color: #475569;
+.sa-marketing-chip--muted {
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark);
     border-color: #cbd5e1;
 }
-.mc-chip--featured {
-    background: var(--mc-primary-50);
-    color: var(--mc-primary-700);
+.sa-marketing-chip--featured {
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
     border-color: #bfdbfe;
 }
-.mc-chip--live {
-    background: #ecfdf5;
+.sa-marketing-chip--live {
+    background: var(--sa-positive-bg);
     color: #047857;
     border-color: #a7f3d0;
 }
-.mc-chip--live::before {
+.sa-marketing-chip--live::before {
     content: '';
     width: 6px;
     height: 6px;
@@ -1522,7 +1481,7 @@ async function onLocaleChange(loc: string): Promise<void> {
     background: currentColor;
 }
 
-.mc-expand-btn {
+.sa-marketing-expand-btn {
     width: 28px;
     height: 28px;
     display: grid;
@@ -1531,225 +1490,225 @@ async function onLocaleChange(loc: string): Promise<void> {
     border: 1px solid transparent;
     border-radius: 6px;
     cursor: pointer;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
     transition:
         background 0.12s,
         color 0.12s,
         border-color 0.12s;
 }
-.mc-expand-btn:hover {
-    background: #f1f5f9;
-    color: var(--mc-primary);
-    border-color: #e2e8f0;
+.sa-marketing-expand-btn:hover {
+    background: var(--sa-border-soft);
+    color: var(--sa-primary);
+    border-color: var(--sa-border);
 }
-.mc-chev {
+.sa-marketing-chev {
     display: inline-flex;
     transition: transform 0.15s;
 }
-.mc-chev.open {
+.sa-marketing-chev.open {
     transform: rotate(90deg);
 }
 
-.mc-admin-expand {
+.sa-marketing-admin-expand {
     grid-column: 1 / -1;
     background: linear-gradient(180deg, #fbfbfd 0%, #fff 100%);
-    border-bottom: 1px solid #f1f5f9;
+    border-bottom: 1px solid var(--sa-border-soft);
     padding: 18px 20px 22px;
 }
-.mc-expand-grid {
+.sa-marketing-expand-grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
     gap: 24px;
 }
-.mc-expand-col {
+.sa-marketing-expand-col {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }
-.mc-expand-sec {
+.sa-marketing-expand-sec {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }
-.mc-expand-label {
+.sa-marketing-expand-label {
     font-size: 10.5px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--mc-text-2);
+    color: var(--sa-muted-dark);
     font-weight: 700;
 }
-.mc-expand-hint {
+.sa-marketing-expand-hint {
     font-size: 11px;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
 }
-.mc-field-head {
+.sa-marketing-field-head {
     display: flex;
     align-items: baseline;
     gap: 8px;
     flex-wrap: wrap;
 }
-.mc-source-hint {
+.sa-marketing-source-hint {
     font-size: 11px;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
 }
-.mc-source-hint em {
-    color: var(--mc-text-2);
+.sa-marketing-source-hint em {
+    color: var(--sa-muted-dark);
     font-style: normal;
 }
-.mc-locked-value {
+.sa-marketing-locked-value {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 6px;
     font-size: 13px;
-    color: var(--mc-text-1);
+    color: var(--sa-heading);
 }
-.mc-locked-hint {
+.sa-marketing-locked-hint {
     font-size: 10px;
     text-transform: uppercase;
-    color: var(--mc-text-3);
+    color: var(--sa-muted-light);
     background: rgba(148, 163, 184, 0.15);
     padding: 1px 6px;
     border-radius: 4px;
     margin-left: auto;
 }
-.mc-trial-row {
+.sa-marketing-trial-row {
     display: flex;
     align-items: center;
     gap: 10px;
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 8px 12px;
 }
-.mc-trial-label {
+.sa-marketing-trial-label {
     font-size: 13px;
-    color: var(--mc-text);
+    color: var(--sa-heading);
 }
-.mc-trial-days {
+.sa-marketing-trial-days {
     margin-left: auto;
     display: flex;
     align-items: center;
     gap: 6px;
 }
-.mc-trial-unit {
+.sa-marketing-trial-unit {
     font-size: 12px;
-    color: var(--mc-text-2);
+    color: var(--sa-muted-dark);
 }
 
-.mc-tf-head {
+.sa-marketing-tf-head {
     display: flex;
     align-items: center;
 }
-.mc-tf-list {
+.sa-marketing-tf-list {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }
-.mc-tf-row {
+.sa-marketing-tf-row {
     display: grid;
     grid-template-columns: 22px minmax(0, 1.4fr) minmax(0, 1fr) auto;
     gap: 8px;
     align-items: center;
 }
-.mc-tf-num {
-    font: 600 11px var(--mc-font-mono);
-    color: var(--mc-text-3);
+.sa-marketing-tf-num {
+    font: 600 11px var(--sa-font-mono);
+    color: var(--sa-muted-light);
     text-align: center;
 }
-.mc-tf-actions {
+.sa-marketing-tf-actions {
     display: flex;
     gap: 2px;
 }
-.mc-iconbtn {
+.sa-marketing-iconbtn {
     width: 24px;
     height: 24px;
     display: grid;
     place-items: center;
-    background: var(--mc-surface);
-    border: 1px solid var(--mc-border);
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
     border-radius: 5px;
     cursor: pointer;
-    font: 600 10px var(--mc-font-sans);
-    color: var(--mc-text-2);
+    font: 600 10px var(--sa-font-body);
+    color: var(--sa-muted-dark);
     padding: 0;
     transition:
         background 0.12s,
         border-color 0.12s;
 }
-.mc-iconbtn:hover:not(:disabled) {
-    background: #f1f5f9;
+.sa-marketing-iconbtn:hover:not(:disabled) {
+    background: var(--sa-border-soft);
     border-color: #cbd5e1;
 }
-.mc-iconbtn:disabled {
+.sa-marketing-iconbtn:disabled {
     opacity: 0.35;
     cursor: not-allowed;
 }
-.mc-iconbtn--danger {
+.sa-marketing-iconbtn--danger {
     color: #b91c1c;
 }
-.mc-iconbtn--danger:hover:not(:disabled) {
+.sa-marketing-iconbtn--danger:hover:not(:disabled) {
     background: #fef2f2;
     border-color: #fca5a5;
 }
-.mc-tf-empty {
+.sa-marketing-tf-empty {
     padding: 14px;
     text-align: center;
     font-size: 12px;
-    color: var(--mc-text-3);
-    background: var(--mc-surface);
+    color: var(--sa-muted-light);
+    background: var(--sa-bg-surface);
     border: 1px dashed #cbd5e1;
     border-radius: 8px;
 }
-.mc-tf-add {
+.sa-marketing-tf-add {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-top: 4px;
 }
-.mc-tf-suggestions {
+.sa-marketing-tf-suggestions {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     align-items: center;
 }
-.mc-tf-chip {
+.sa-marketing-tf-chip {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 3px 9px;
     border-radius: 999px;
-    background: var(--mc-surface);
+    background: var(--sa-bg-surface);
     border: 1px dashed #cbd5e1;
     font-size: 11.5px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     cursor: pointer;
     transition:
         background 0.12s,
         border-color 0.12s,
         color 0.12s;
 }
-.mc-tf-chip em {
+.sa-marketing-tf-chip em {
     font-style: normal;
-    color: var(--mc-text-3);
-    font: 500 11px var(--mc-font-mono);
+    color: var(--sa-muted-light);
+    font: 500 11px var(--sa-font-mono);
 }
-.mc-tf-chip:hover:not(:disabled) {
-    background: var(--mc-primary-50);
+.sa-marketing-tf-chip:hover:not(:disabled) {
+    background: var(--sa-primary-50);
     border-color: #93c5fd;
     border-style: solid;
-    color: var(--mc-primary-700);
+    color: var(--sa-primary-strong);
 }
-.mc-tf-chip:disabled {
+.sa-marketing-tf-chip:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
 
 @media (max-width: 980px) {
-    .mc-expand-grid {
+    .sa-marketing-expand-grid {
         grid-template-columns: 1fr;
     }
 }
@@ -1757,19 +1716,19 @@ async function onLocaleChange(loc: string): Promise<void> {
 /* Version tabs below the plan name — visible only when the plan
  * has multiple published versions (e.g. v2 active + v3 planned).
  * Sim pattern: small pills, active version inverted. */
-.mc-version-tabs {
+.sa-marketing-version-tabs {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
     margin-top: 6px;
 }
-.mc-version-tab {
-    border: 1px solid #e2e8f0;
+.sa-marketing-version-tab {
+    border: 1px solid var(--sa-border);
     background: #fff;
     border-radius: 6px;
     padding: 2px 8px;
     font: 600 10.5px var(--sa-font-mono, ui-monospace, monospace);
-    color: #64748b;
+    color: var(--sa-muted);
     cursor: pointer;
     letter-spacing: 0.02em;
     transition:
@@ -1777,14 +1736,14 @@ async function onLocaleChange(loc: string): Promise<void> {
         background 0.1s,
         color 0.1s;
 }
-.mc-version-tab:hover {
+.sa-marketing-version-tab:hover {
     border-color: #cbd5e1;
-    background: #f8fafc;
-    color: #475569;
+    background: var(--sa-bg-surface-2);
+    color: var(--sa-muted-dark);
 }
-.mc-version-tab--active {
-    border-color: #1d4ed8;
-    background: #eff6ff;
-    color: #1d4ed8;
+.sa-marketing-version-tab--active {
+    border-color: var(--sa-primary-strong);
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
 }
 </style>