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

@@ -5,61 +5,24 @@ const emit = defineEmits<{ close: [] }>();
 
 <template>
   <Teleport to="body">
-    <div v-if="open" class="mask" @click.self="emit('close')">
-      <div class="dialog">
-        <header v-if="title" class="head">
+    <div v-if="open" class="fixed inset-0 z-[900] flex items-center justify-center bg-black/40" @click.self="emit('close')">
+      <div class="min-w-[420px] max-w-[720px] rounded-md bg-surface shadow-lg">
+        <header v-if="title" class="flex items-center justify-between border-b border-border px-5 py-3.5 text-[15px]">
           <span>{{ title }}</span>
-          <button type="button" class="x" :aria-label="$t('common.cancel')" @click="emit('close')">×</button>
+          <button
+            type="button"
+            class="border-0 bg-transparent text-[20px] text-muted transition-colors hover:text-primary"
+            :aria-label="$t('common.cancel')"
+            @click="emit('close')"
+          >×</button>
         </header>
-        <div class="body">
+        <div class="p-5">
           <slot />
         </div>
-        <footer v-if="$slots.footer" class="foot">
+        <footer v-if="$slots.footer" class="border-t border-border px-5 py-3 text-right">
           <slot name="footer" />
         </footer>
       </div>
     </div>
   </Teleport>
 </template>
-
-<style scoped>
-.mask {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 900;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.dialog {
-  background: #fff;
-  min-width: 420px;
-  max-width: 720px;
-  border-radius: 4px;
-  box-shadow: var(--mall-shadow);
-}
-.head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 14px 20px;
-  border-bottom: 1px solid var(--mall-line);
-  font-size: 15px;
-}
-.x {
-  border: 0;
-  background: none;
-  font-size: 20px;
-  cursor: pointer;
-  color: var(--mall-muted);
-}
-.body {
-  padding: 20px;
-}
-.foot {
-  padding: 12px 20px;
-  border-top: 1px solid var(--mall-line);
-  text-align: right;
-}
-</style>