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/components/ui/ProductCard.vue

@@ -12,78 +12,36 @@ const sold = computed(() => props.product.sold_count);
 </script>
 
 <template>
-  <NuxtLink :to="`/goods/${product.slug}`" class="card hover-lift">
-    <div class="img">
-      <img :src="product.images[0] || '/mock/product-1.svg'" :alt="pick(product.name, locale)" loading="lazy" />
-    </div>
-    <div class="body">
-      <p class="name">{{ pick(product.name, locale) }}</p>
-      <p class="sub">{{ pick(product.description, locale) }}</p>
-      <p class="price-row">
-        <span v-if="sku" class="price"><PriceText :amount-minor="sku.price_minor" :currency="sku.currency" /></span>
-        <s v-if="sku" class="market"><PriceText :amount-minor="sku.price_minor + 10000" :currency="sku.currency" /></s>
-      </p>
-      <p class="meta">{{ $t("product.salesCount", { n: sold }) }}</p>
-    </div>
+  <NuxtLink
+    :to="`/goods/${product.slug}`"
+    class="group block h-full no-underline text-inherit transition-shadow duration-200 hover:-translate-y-0.5 hover:shadow-lg"
+  >
+    <VCard :padded="false" class="h-full overflow-hidden border border-border bg-surface">
+      <div class="flex items-center justify-center p-4">
+        <img
+          :src="product.images[0] || '/mock/product-1.svg'"
+          :alt="pick(product.name, locale)"
+          loading="lazy"
+          class="h-[180px] w-[180px] object-contain"
+        />
+      </div>
+      <div class="px-[14px] pb-[14px]">
+        <p class="m-0 h-[37px] overflow-hidden text-[13px] leading-[1.4] transition-colors group-hover:text-primary">
+          {{ pick(product.name, locale) }}
+        </p>
+        <p class="m-0 mb-2 mt-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] text-muted/70">
+          {{ pick(product.description, locale) }}
+        </p>
+        <p class="m-0">
+          <span v-if="sku" class="mr-2 text-[16px] font-bold text-primary">
+            <PriceText :amount-minor="sku.price_minor" :currency="sku.currency" />
+          </span>
+          <s v-if="sku" class="text-[12px] text-muted/60">
+            <PriceText :amount-minor="sku.price_minor + 10000" :currency="sku.currency" />
+          </s>
+        </p>
+        <p class="m-0 mt-1.5 text-[12px] text-muted/70">{{ $t("product.salesCount", { n: sold }) }}</p>
+      </div>
+    </VCard>
   </NuxtLink>
 </template>
-
-<style scoped>
-.card {
-  display: block;
-  background: #fff;
-  text-decoration: none;
-  color: inherit;
-  border: 1px solid var(--mall-line);
-}
-.img {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-}
-.img img {
-  width: 180px;
-  height: 180px;
-  object-fit: contain;
-}
-.body {
-  padding: 0 14px 14px;
-}
-.name {
-  font-size: 13px;
-  line-height: 1.4;
-  height: 37px;
-  overflow: hidden;
-  margin: 0;
-}
-.card:hover .name {
-  color: var(--mall-red);
-}
-.sub {
-  font-size: 12px;
-  color: var(--mall-faint);
-  margin: 4px 0 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.price-row {
-  margin: 0;
-}
-.price {
-  color: var(--mall-red);
-  font-size: 16px;
-  font-weight: 700;
-  margin-right: 8px;
-}
-.market {
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.meta {
-  margin: 6px 0 0;
-  font-size: 12px;
-  color: var(--mall-faint);
-}
-</style>