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

@@ -10,6 +10,7 @@ let timer: ReturnType<typeof setInterval> | null = null;
 function go(i: number): void {
   index.value = (i + props.images.length) % props.images.length;
 }
+
 onMounted(() => {
   if (props.images.length > 1) {
     timer = setInterval(() => {
@@ -17,66 +18,32 @@ onMounted(() => {
     }, props.interval);
   }
 });
+
 onBeforeUnmount(() => {
   if (timer) clearInterval(timer);
 });
 </script>
 
 <template>
-  <div class="carousel" :style="{ height: `${height}px` }">
+  <div class="relative w-full overflow-hidden" :style="{ height: `${height}px` }">
     <NuxtLink
       v-for="(img, i) in images"
       v-show="i === index"
       :key="img.image"
       :to="img.url || '#'"
-      class="slide"
+      class="block h-full w-full bg-cover bg-center"
       :style="{ backgroundImage: `url(${img.image})` }"
     />
-    <div v-if="images.length > 1" class="dots">
+    <div v-if="images.length > 1" class="absolute bottom-[14px] left-0 right-0 flex justify-center gap-2">
       <button
         v-for="(_, i) in images"
         :key="i"
         type="button"
-        :class="{ on: i === index }"
+        class="h-2.5 w-2.5 rounded-full bg-white/55 p-0 transition-colors"
+        :class="i === index ? 'bg-primary' : 'hover:bg-white/80'"
         :aria-label="`slide ${i + 1}`"
         @click="go(i)"
       />
     </div>
   </div>
 </template>
-
-<style scoped>
-.carousel {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
-.slide {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-position: center;
-  background-size: cover;
-}
-.dots {
-  position: absolute;
-  bottom: 14px;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-}
-.dots button {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 0;
-  background: rgba(255, 255, 255, 0.55);
-  cursor: pointer;
-  padding: 0;
-}
-.dots button.on {
-  background: var(--mall-red);
-}
-</style>