feat(ui): adopt Tailwind v4 design system and archive change

- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin
- Add @vmall/shared/theme.css tokens with html[data-accent] presets
- Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage,
  VAccentSwatch, useAccent) as a Nuxt module
- Convert all three apps to kit + utilities; delete ui.css/mall.css and
  every <style scoped>; consoles get accent presets, mall locked to red
- Fix VCard boolean prop default (padding) and PDP/store stale
  useAsyncData keys on param navigation
- Archive adopt-tailwind-design-system; new frontend-ui capability spec

apps/mall/pages/checkout/success.vue

@@ -12,57 +12,20 @@ const stepLabels = computed(() => [
 </script>
 
 <template>
-  <div class="transaction-page success-page">
-    <div class="w1200">
+  <div class="min-h-screen bg-bg font-sans text-text">
+    <div class="mx-auto max-w-mall px-4 py-6">
       <UiStepBar :steps="stepLabels" :active="3" />
-      <section class="mpanel success-panel">
-        <div class="success-icon" aria-hidden="true">✓</div>
-        <h1>{{ t("checkout.successTitle") }}</h1>
-        <p>{{ t("checkout.successMessage") }}</p>
-        <div class="success-actions">
-          <NuxtLink class="mbtn red" to="/user/orders">{{ t("checkout.viewOrders") }}</NuxtLink>
-          <NuxtLink class="mbtn gray" to="/">{{ t("checkout.continueShopping") }}</NuxtLink>
+      <VCard class="px-5 py-16 text-center">
+        <div class="mx-auto flex h-[72px] w-[72px] items-center justify-center rounded-full bg-success text-5xl leading-none text-white" aria-hidden="true">✓</div>
+        <h1 class="mb-2 mt-5 text-2xl font-medium">{{ t("checkout.successTitle") }}</h1>
+        <p class="m-0 text-muted">{{ t("checkout.successMessage") }}</p>
+        <div class="mt-7 flex justify-center gap-3">
+          <NuxtLink class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover" to="/user/orders">{{ t("checkout.viewOrders") }}</NuxtLink>
+          <NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-bg" to="/">{{ t("checkout.continueShopping") }}</NuxtLink>
         </div>
-      </section>
+      </VCard>
     </div>
   </div>
 </template>
 
-<style scoped>
-.transaction-page {
-  padding: 24px 0 80px;
-  background: #f5f5f5;
-  min-height: 60vh;
-}
-.success-panel {
-  padding: 60px 20px 70px;
-  text-align: center;
-}
-.success-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 72px;
-  height: 72px;
-  border-radius: 50%;
-  background: var(--mall-green);
-  color: #fff;
-  font-size: 48px;
-  line-height: 1;
-}
-.success-panel h1 {
-  margin: 22px 0 10px;
-  font-size: 24px;
-  font-weight: 500;
-}
-.success-panel p {
-  margin: 0;
-  color: var(--mall-muted);
-}
-.success-actions {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  margin-top: 28px;
-}
-</style>
+