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/cart.vue

@@ -122,25 +122,25 @@ onMounted(() => void loadCart());
 </script>
 
 <template>
-  <div class="transaction-page cart-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="0" />
-      <header class="page-heading">
-        <h1>{{ t("cart.title") }}</h1>
+      <header class="mb-4 flex items-center">
+        <h1 class="m-0 text-xl font-medium">{{ t("cart.title") }}</h1>
       </header>
 
-      <p v-if="error" class="error-message">{{ error }}</p>
+      <p v-if="error" class="mb-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger">{{ error }}</p>
       <template v-if="!loading && items.length > 0">
-        <section v-for="group in groups" :key="group.shopId" class="shop-group mpanel">
-          <header class="shop-heading">
-            <span class="shop-label">{{ t("cart.shop") }}</span>
+        <VCard v-for="group in groups" :key="group.shopId" :padded="false" class="mb-4 overflow-hidden">
+          <header class="flex items-center gap-2 border-b border-border px-4 py-3 text-sm">
+            <span class="text-muted">{{ t("cart.shop") }}</span>
             <strong>{{ pick(group.shopName, locale) || t("cart.unknownStore") }}</strong>
           </header>
-          <table class="mtable cart-table">
+          <VTable>
             <thead>
               <tr>
-                <th class="check-col" />
-                <th class="product-col">{{ t("cart.product") }}</th>
+                <th class="w-10" />
+                <th>{{ t("cart.product") }}</th>
                 <th>{{ t("cart.spec") }}</th>
                 <th>{{ t("cart.unitPrice") }}</th>
                 <th>{{ t("cart.quantity") }}</th>
@@ -150,19 +150,22 @@ onMounted(() => void loadCart());
             </thead>
             <tbody>
               <tr v-for="item in group.items" :key="item.sku_id">
-                <td class="check-col">
+                <td>
                   <input
                     :checked="Boolean(selected[item.sku_id])"
+                    class="h-4 w-4 accent-primary"
                     type="checkbox"
                     :aria-label="pick(item.product_name, locale)"
                     @change="onSelectionChange(item.sku_id, $event)"
                   />
                 </td>
-                <td class="product-cell">
-                  <img :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
-                  <span>{{ pick(item.product_name, locale) }}</span>
+                <td>
+                  <div class="flex items-center gap-3">
+                    <img class="h-14 w-14 shrink-0 object-cover" :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
+                    <span>{{ pick(item.product_name, locale) }}</span>
+                  </div>
                 </td>
-                <td class="muted">{{ item.sku_code }}</td>
+                <td class="text-muted">{{ item.sku_code }}</td>
                 <td><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></td>
                 <td>
                   <UiQtyStepper
@@ -171,181 +174,36 @@ onMounted(() => void loadCart());
                     @update:model-value="updateQuantity(item, $event)"
                   />
                 </td>
-                <td class="price-strong">
-                  <PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" />
-                </td>
+                <td class="font-semibold text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" /></td>
                 <td>
-                  <button type="button" class="text-button" :disabled="mutating" @click="removeItem(item)">
+                  <button type="button" class="cursor-pointer text-sm text-primary hover:text-primary-hover disabled:opacity-50" :disabled="mutating" @click="removeItem(item)">
                     {{ t("cart.remove") }}
                   </button>
                 </td>
               </tr>
             </tbody>
-          </table>
-        </section>
+          </VTable>
+        </VCard>
 
-        <footer class="cart-footer mpanel">
-          <label class="select-all">
-            <input :checked="allSelected" type="checkbox" @change="setAllSelected(($event.target as HTMLInputElement).checked)" />
+        <footer class="mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border border-border bg-surface p-4 shadow-sm">
+          <label class="flex items-center gap-2 text-sm">
+            <input :checked="allSelected" class="h-4 w-4 accent-primary" type="checkbox" @change="setAllSelected(($event.target as HTMLInputElement).checked)" />
             <span>{{ t("cart.selectAll") }}</span>
           </label>
-          <span class="selected-count">{{ t("cart.selectedCount", { n: selectedItems.length }) }}</span>
-          <span class="total-label">{{ t("cart.subtotal") }}:</span>
-          <strong class="total-price"><PriceText :amount-minor="selectedTotalMinor" :currency="selectedCurrency" /></strong>
-          <button class="mbtn red checkout-button" type="button" :disabled="selectedItems.length === 0 || mutating" @click="goToCheckout">
-            {{ t("cart.checkout") }}
-          </button>
+          <span class="text-sm text-muted">{{ t("cart.selectedCount", { n: selectedItems.length }) }}</span>
+          <span class="text-sm">{{ t("cart.subtotal") }}:</span>
+          <strong class="text-lg text-primary"><PriceText :amount-minor="selectedTotalMinor" :currency="selectedCurrency" /></strong>
+          <VBtn variant="primary" type="button" :disabled="selectedItems.length === 0 || mutating" @click="goToCheckout">{{ t("cart.checkout") }}</VBtn>
         </footer>
       </template>
 
-      <div v-else-if="!loading" class="empty-wrap mpanel">
+      <VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
         <UiEmptyState :text="t('cart.empty')" />
-        <NuxtLink class="mbtn red" to="/">{{ t("cart.continueShopping") }}</NuxtLink>
-      </div>
-      <div v-else class="loading-state">{{ $t("common.loading") }}</div>
+        <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="/">{{ t("cart.continueShopping") }}</NuxtLink>
+      </VCard>
+      <div v-else class="py-8 text-center text-muted">{{ $t("common.loading") }}</div>
     </div>
   </div>
 </template>
 
-<style scoped>
-.transaction-page {
-  padding: 24px 0 56px;
-  background: #f5f5f5;
-  min-height: 60vh;
-}
-.page-heading {
-  display: flex;
-  align-items: center;
-  margin: 0 0 16px;
-}
-.page-heading h1 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 500;
-}
-.error-message {
-  margin: 0 0 16px;
-  padding: 10px 14px;
-  color: #b42318;
-  background: #fff1f0;
-  border: 1px solid #ffd6d2;
-}
-.shop-group {
-  margin-bottom: 16px;
-  padding: 0;
-  overflow: hidden;
-}
-.shop-heading {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--mall-line);
-  font-size: 14px;
-}
-.shop-label {
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.cart-table {
-  margin: 0;
-  width: 100%;
-}
-.cart-table th,
-.cart-table td {
-  padding: 14px 10px;
-  vertical-align: middle;
-}
-.cart-table th:first-child,
-.cart-table td:first-child {
-  padding-left: 18px;
-}
-.cart-table th:last-child,
-.cart-table td:last-child {
-  padding-right: 18px;
-}
-.check-col {
-  width: 42px;
-  text-align: center;
-}
-.product-col {
-  width: 34%;
-}
-.product-cell {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-height: 60px;
-  line-height: 1.5;
-}
-.product-cell img {
-  width: 60px;
-  height: 60px;
-  flex: 0 0 60px;
-  object-fit: cover;
-  border: 1px solid var(--mall-line);
-  background: #fff;
-}
-.muted {
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.price-strong,
-.total-price {
-  color: var(--mall-red);
-  font-weight: 600;
-}
-.text-button {
-  border: 0;
-  background: transparent;
-  color: var(--mall-muted);
-  cursor: pointer;
-  padding: 4px;
-}
-.text-button:hover {
-  color: var(--mall-red);
-}
-.text-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.cart-footer {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  padding: 14px 18px;
-}
-.select-all {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  cursor: pointer;
-}
-.selected-count {
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.total-label {
-  margin-left: auto;
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.total-price {
-  font-size: 18px;
-}
-.checkout-button {
-  min-width: 112px;
-}
-.empty-wrap {
-  padding-bottom: 28px;
-  text-align: center;
-}
-.empty-wrap :deep(.empty) {
-  padding-bottom: 20px;
-}
-.loading-state {
-  padding: 70px 0;
-  text-align: center;
-  color: var(--mall-muted);
-}
-</style>
+