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/shell/SiteFooter.vue

@@ -5,69 +5,38 @@ const visible = ref(false);
 function onScroll(): void {
   visible.value = window.scrollY > 400;
 }
+
 function toTop(): void {
   window.scrollTo({ top: 0, behavior: "smooth" });
 }
-onMounted(() => window.addEventListener("scroll", onScroll, { passive: true }));
+
+onMounted(() => {
+  onScroll();
+  window.addEventListener("scroll", onScroll, { passive: true });
+});
 onBeforeUnmount(() => window.removeEventListener("scroll", onScroll));
 </script>
 
 <template>
-  <footer class="foot">
-    <div class="w1200">
-      <ul class="props">
+  <footer class="bg-surface pt-2 text-center">
+    <div class="mx-auto max-w-mall px-4">
+      <ul class="mx-auto mt-10 flex w-full max-w-[720px] list-none justify-between border-t border-border pt-10 text-sm text-text">
         <li>{{ t("shell.footer.v1") }}</li>
         <li>{{ t("shell.footer.v2") }}</li>
         <li>{{ t("shell.footer.v3") }}</li>
         <li>{{ t("shell.footer.v4") }}</li>
       </ul>
-      <div class="copyright">
-        <p>{{ t("shell.footer.copyright") }}</p>
-        <p>{{ t("shell.footer.icp") }}</p>
+      <div class="pb-5 pt-[30px] text-[12px] leading-7 text-muted">
+        <p class="m-0">{{ t("shell.footer.copyright") }}</p>
+        <p class="m-0">{{ t("shell.footer.icp") }}</p>
       </div>
     </div>
-    <button v-show="visible" class="backtop" type="button" :aria-label="t('shell.backToTop')" @click="toTop">↑</button>
+    <button
+      v-show="visible"
+      class="fixed bottom-[60px] right-10 z-[800] h-11 w-11 rounded-md border border-border bg-surface text-lg text-muted transition-colors hover:border-primary hover:bg-primary hover:text-white"
+      type="button"
+      :aria-label="t('shell.backToTop')"
+      @click="toTop"
+    >↑</button>
   </footer>
 </template>
-
-<style scoped>
-.foot {
-  padding-top: 10px;
-  text-align: center;
-}
-.props {
-  margin: 40px auto 0;
-  width: 720px;
-  border-top: 1px solid var(--mall-line);
-  padding: 40px 0 0;
-  list-style: none;
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-}
-.copyright {
-  font-size: 12px;
-  line-height: 28px;
-  color: var(--mall-muted);
-  padding: 30px 0 20px;
-}
-.backtop {
-  position: fixed;
-  right: 40px;
-  bottom: 60px;
-  width: 44px;
-  height: 44px;
-  border: 1px solid var(--mall-line-dark);
-  background: #fff;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 18px;
-  color: var(--mall-muted);
-  z-index: 800;
-}
-.backtop:hover {
-  color: #fff;
-  background: var(--mall-red);
-  border-color: var(--mall-red);
-}
-</style>