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

@@ -79,212 +79,51 @@ onMounted(() => void loadOrders());
 </script>
 
 <template>
-  <div class="transaction-page pay-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="2" />
-      <header class="page-heading">
-        <h1>{{ t("checkout.payTitle") }}</h1>
-      </header>
-
-      <p v-if="error" class="error-message">{{ error }}</p>
+      <header class="mb-4"><h1 class="m-0 text-xl font-medium">{{ t("checkout.payTitle") }}</h1></header>
+      <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 && orders.length > 0">
-        <section class="order-cards">
-          <article v-for="order in orders" :key="order.id" class="mpanel order-card">
-            <header class="order-heading">
+        <section class="mb-4 space-y-4">
+          <VCard v-for="order in orders" :key="order.id" :padded="false" class="overflow-hidden">
+            <header class="flex items-center justify-between border-b border-border px-4 py-3 text-sm">
               <span>{{ t("checkout.orderNo") }}: {{ order.order_no }}</span>
-              <span class="shop-name">{{ shopName(order.shop_id) }}</span>
+              <span class="text-muted">{{ shopName(order.shop_id) }}</span>
             </header>
-            <div v-for="item in order.items" :key="item.id" class="order-item">
-              <img :src="imageFor(item.image)" :alt="pick(item.product_name, locale)" />
-              <div class="item-info">
-                <strong>{{ pick(item.product_name, locale) }}</strong>
-                <span class="muted">{{ item.sku_code }}</span>
-                <span v-if="item.flash_sale_item_id" class="activity-tag">{{ t("marketing.flashTag") }}</span>
-              </div>
+            <div v-for="item in order.items" :key="item.id" class="grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b border-bg px-4 py-3">
+              <img class="h-14 w-14 border border-border object-cover" :src="imageFor(item.image)" :alt="pick(item.product_name, locale)" />
+              <div class="flex min-w-0 flex-col gap-1"><strong class="truncate">{{ pick(item.product_name, locale) }}</strong><span class="text-xs text-muted">{{ item.sku_code }}</span><VBadge v-if="item.flash_sale_item_id" tone="orange">{{ t("marketing.flashTag") }}</VBadge></div>
               <PriceText :amount-minor="item.unit_price_minor" :currency="order.currency" />
-              <span class="qty">× {{ item.qty }}</span>
-              <strong class="line-total">
-                <PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="order.currency" />
-              </strong>
+              <span class="text-xs text-muted">× {{ item.qty }}</span>
+              <strong class="text-right text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="order.currency" /></strong>
             </div>
-            <footer class="order-total">
-              <template v-if="order.discount_minor > 0">
-                <span>{{ t("checkout.couponDiscount") }}</span>
-                <span class="discount-value">
-                  −<PriceText :amount-minor="order.discount_minor" :currency="order.currency" />
-                </span>
-              </template>
-              <span>{{ t("checkout.total") }}</span>
-              <strong><PriceText :amount-minor="order.total_minor" :currency="order.currency" /></strong>
+            <footer class="flex flex-wrap items-center justify-end gap-3 px-4 py-3 text-sm">
+              <template v-if="order.discount_minor > 0"><span>{{ t("checkout.couponDiscount") }}</span><span class="text-danger">−<PriceText :amount-minor="order.discount_minor" :currency="order.currency" /></span></template>
+              <span>{{ t("checkout.total") }}</span><strong class="text-primary"><PriceText :amount-minor="order.total_minor" :currency="order.currency" /></strong>
             </footer>
-          </article>
+          </VCard>
         </section>
-
-        <section class="mpanel payment-panel">
-          <h2 class="section-title">{{ t("checkout.paymentTitle") }}</h2>
-          <label v-for="option in paymentOptions" :key="option.value" class="payment-option">
-            <input v-model="paymentMethod" type="radio" name="payment-method" :value="option.value" />
+        <VCard class="mb-4 p-5">
+          <h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.paymentTitle") }}</h2>
+          <label v-for="option in paymentOptions" :key="option.value" class="mr-5 inline-flex cursor-pointer items-center gap-2 text-sm">
+            <input v-model="paymentMethod" class="h-4 w-4 accent-primary" type="radio" name="payment-method" :value="option.value" />
             <span>{{ option.label }}</span>
           </label>
-        </section>
-
-        <footer class="submit-bar mpanel">
-          <span class="total-label">{{ t("checkout.grandTotal") }}:</span>
-          <strong class="total-price"><PriceText :amount-minor="grandTotalMinor" :currency="totalCurrency" /></strong>
-          <button class="mbtn red" type="button" :disabled="paying" @click="confirmPayment">
-            {{ t("checkout.confirmPay") }}
-          </button>
+        </VCard>
+        <footer class="mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border border-border bg-surface p-4 shadow-sm">
+          <span class="text-sm">{{ t("checkout.grandTotal") }}:</span>
+          <strong class="text-lg text-primary"><PriceText :amount-minor="grandTotalMinor" :currency="totalCurrency" /></strong>
+          <VBtn variant="primary" type="button" :disabled="paying" @click="confirmPayment">{{ t("checkout.confirmPay") }}</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('checkout.noPendingOrders')" />
-        <NuxtLink class="mbtn gray" to="/">{{ t("checkout.backHome") }}</NuxtLink>
-      </div>
-      <div v-else class="loading-state">{{ $t("common.loading") }}</div>
+        <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.backHome") }}</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 {
-  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;
-}
-.order-card {
-  padding: 0;
-  overflow: hidden;
-}
-.order-card + .order-card {
-  margin-top: 16px;
-}
-.order-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--mall-line);
-  font-size: 13px;
-}
-.shop-name {
-  color: var(--mall-muted);
-}
-.order-item {
-  display: grid;
-  grid-template-columns: 56px minmax(0, 1fr) 120px 64px 130px;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 18px;
-  border-bottom: 1px solid #f5f5f5;
-}
-.order-item > img {
-  width: 56px;
-  height: 56px;
-  object-fit: cover;
-  border: 1px solid var(--mall-line);
-}
-.item-info {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  min-width: 0;
-}
-.item-info strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.muted,
-.qty {
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.line-total {
-  color: var(--mall-red);
-  text-align: right;
-}
-.order-total {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 18px;
-  padding: 14px 18px;
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.order-total strong {
-  color: var(--mall-red);
-  font-size: 16px;
-}
-.discount-value {
-  color: var(--mall-red);
-}
-.activity-tag {
-  align-self: flex-start;
-  padding: 1px 6px;
-  border: 1px solid var(--mall-red);
-  color: var(--mall-red);
-  font-size: 11px;
-}
-.payment-panel {
-  margin-top: 16px;
-  padding: 0 18px 16px;
-}
-.section-title {
-  margin: 0 -18px 12px;
-  padding: 16px 18px;
-  border-bottom: 1px solid var(--mall-line);
-  font-size: 15px;
-  font-weight: 600;
-}
-.payment-option {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin-right: 30px;
-  padding: 8px 0;
-  cursor: pointer;
-}
-.submit-bar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 18px;
-  padding: 14px 18px;
-}
-.total-label {
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.total-price {
-  color: var(--mall-red);
-  font-size: 20px;
-}
-.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>
+