diff --git a/AGENTS.md b/AGENTS.md
index 2b15b8f..ad8d676 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -6,7 +6,7 @@
 
 - `apps/api` — Rust 后端（crate `vmall-api`）。迁移在 `apps/api/migrations/`（sqlx，启动时自动执行，只增不改）。分层约定见英文：`docs/adr/`、`docs/tech-specs/rust-api.md`、`openspec/specs/api-architecture/spec.md`。代码按限界上下文放在 `src/modules/<ctx>/`（handler → service → repo）；HTTP 抽取器在 `src/http/`。新功能写进对应模块，不要把 SQL 堆回 handler。简单 CRUD 允许 handler 直接调 repo。Service 返回 `ApiResult<Dto>`，不依赖 `Json`/`StatusCode`。Repo 接受 `&mut PgConnection` / `&mut Transaction` 以便组合事务。不引入泛型 Repository trait。
 - `apps/mall` / `apps/shop-admin` / `apps/admin` — 三个 Nuxt 3 应用。端口固定 3000/3001/3002。
-- `packages/shared` — `@vmall/shared`：**唯一** API 契约（`src/types.ts` + `src/api.ts`）、en/zh 语言包、共享样式 `ui.css`。前端禁止自建 API 封装；契约变更只在这里改，且三个前端都要过构建。
+- `packages/shared` — `@vmall/shared`：**唯一** API 契约（`src/types.ts` + `src/api.ts`）、en/zh 语言包、共享 Tailwind v4 主题 `theme.css`（`@theme` tokens + `html[data-accent]` 预设）。前端禁止自建 API 封装；契约变更只在这里改，且三个前端都要过构建。共享 Vue 组件在 `packages/ui`（`@vmall/ui`：`VBtn`/`VBadge`/`VField`/`VInput`/`VCard`/`VPanel`/`VTable`/`VPage`/`VAccentSwatch` + `useAccent()`，以 Nuxt 模块自动注册）。布局用 Tailwind utilities，禁止 `<style scoped>`。
 - `openspec/` — 规范。`specs/` 是已归档能力规范（auth, rbac, catalog, currency, cart, order, shipment, invoice, api-architecture, frontend-*）。
 - `scripts/seed-demo.mjs` — 幂等演示数据。
 
diff --git a/apps/admin/app.vue b/apps/admin/app.vue
index 8fb50eb..331ae59 100644
--- a/apps/admin/app.vue
+++ b/apps/admin/app.vue
@@ -2,43 +2,64 @@
 const session = useSessionStore();
 const { locale, locales, setLocale } = useI18n();
 const route = useRoute();
+const { boot } = useAccent();
 
-onMounted(() => session.hydrate());
+onMounted(() => {
+  session.hydrate();
+  boot();
+});
 
 const isAuthPage = computed(() => route.path === "/login");
+const navItems = [
+  { to: "/", label: "nav.dashboard" },
+  { to: "/users", label: "nav.users" },
+  { to: "/shops", label: "nav.shops" },
+  { to: "/orders", label: "nav.orders" },
+  { to: "/currencies", label: "nav.currencies" },
+  { to: "/points-products", label: "nav.pointsProducts" },
+  { to: "/points-orders", label: "nav.pointsOrders" },
+];
 </script>
 
 <template>
-  <div v-if="isAuthPage">
+  <div v-if="isAuthPage" class="min-h-screen bg-bg font-sans text-text">
     <NuxtPage />
   </div>
-  <div v-else class="auth-layout">
-    <aside>
-      <div class="brand">{{ $t("common.appName") }} · Admin</div>
-      <NuxtLink to="/">{{ $t("nav.dashboard") }}</NuxtLink>
-      <NuxtLink to="/users">{{ $t("nav.users") }}</NuxtLink>
-      <NuxtLink to="/shops">{{ $t("nav.shops") }}</NuxtLink>
-      <NuxtLink to="/orders">{{ $t("nav.orders") }}</NuxtLink>
-      <NuxtLink to="/currencies">{{ $t("nav.currencies") }}</NuxtLink>
-      <NuxtLink to="/points-products">{{ $t("nav.pointsProducts") }}</NuxtLink>
-      <NuxtLink to="/points-orders">{{ $t("nav.pointsOrders") }}</NuxtLink>
+  <div v-else class="min-h-screen bg-bg font-sans text-text md:flex">
+    <aside class="w-full shrink-0 border-b border-border bg-surface p-4 md:min-h-screen md:w-60 md:border-b-0 md:border-r">
+      <div class="mb-6 text-lg font-bold text-primary">{{ $t("common.appName") }} · Admin</div>
+      <nav class="grid gap-1" aria-label="Admin navigation">
+        <NuxtLink
+          v-for="item in navItems"
+          :key="item.to"
+          :to="item.to"
+          class="rounded-md px-3 py-2 text-sm font-medium text-muted transition-colors hover:bg-primary-soft hover:text-primary"
+          :class="route.path === item.to ? 'bg-primary-soft text-primary' : ''"
+        >
+          {{ $t(item.label) }}
+        </NuxtLink>
+      </nav>
     </aside>
-    <main>
-      <div class="main-head">
+    <main class="min-w-0 flex-1">
+      <header class="flex flex-wrap items-center justify-end gap-3 border-b border-border bg-surface px-4 py-3 md:px-6">
         <select
           :value="locale"
+          class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
           :aria-label="$t('common.language')"
           @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
         >
           <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
         </select>
+        <VAccentSwatch />
         <template v-if="session.isLoggedIn">
-          <span class="muted">{{ session.user?.display_name }}</span>
-          <button class="btn sm" @click="session.logout()">{{ $t("common.logout") }}</button>
+          <span class="text-sm text-muted">{{ session.user?.display_name }}</span>
+          <VBtn size="sm" @click="session.logout()">{{ $t("common.logout") }}</VBtn>
         </template>
-        <NuxtLink v-else to="/login" class="btn sm primary">{{ $t("common.login") }}</NuxtLink>
+        <VBtn v-else size="sm" variant="primary" @click="navigateTo('/login')">{{ $t("common.login") }}</VBtn>
+      </header>
+      <div class="mx-auto w-full max-w-7xl px-4 md:px-6">
+        <NuxtPage />
       </div>
-      <NuxtPage />
     </main>
   </div>
 </template>
diff --git a/apps/admin/nuxt.config.ts b/apps/admin/nuxt.config.ts
index 8c43233..0995203 100644
--- a/apps/admin/nuxt.config.ts
+++ b/apps/admin/nuxt.config.ts
@@ -1,6 +1,9 @@
+import tailwindcss from "@tailwindcss/vite";
+
 export default defineNuxtConfig({
-  modules: ["@pinia/nuxt", "@nuxtjs/i18n"],
-  css: ["@vmall/shared/ui.css"],
+  modules: ["@pinia/nuxt", "@nuxtjs/i18n", "@vmall/ui/nuxt"],
+  css: ["@vmall/shared/theme.css"],
+  vite: { plugins: [tailwindcss()] },
   devtools: { enabled: false },
   devServer: { port: 3002 },
   runtimeConfig: {
diff --git a/apps/admin/package.json b/apps/admin/package.json
index e096357..0ac6794 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -14,6 +14,11 @@
     "nuxt": "^3.15.4",
     "pinia": "^2.3.1",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "@vmall/ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "tailwindcss": "^4.1.13"
   }
 }
diff --git a/apps/admin/pages/currencies.vue b/apps/admin/pages/currencies.vue
index 1bdfe8b..064fe71 100644
--- a/apps/admin/pages/currencies.vue
+++ b/apps/admin/pages/currencies.vue
@@ -140,52 +140,43 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <h1 class="page-title">{{ $t("nav.currencies") }}</h1>
-    </div>
-    <section class="card create-card">
-      <h2>{{ $t("admin.currencyFormTitle") }}</h2>
-      <div class="form-grid">
-        <div class="field">
-          <label for="currency-code">{{ $t("admin.currencyCode") }}</label>
-          <input id="currency-code" v-model="form.code" maxlength="3" type="text" required />
-        </div>
-        <div class="field">
-          <label for="currency-name-en">{{ $t("admin.currencyNameEn") }}</label>
-          <input id="currency-name-en" v-model="form.nameEn" type="text" required />
-        </div>
-        <div class="field">
-          <label for="currency-name-zh">{{ $t("admin.currencyNameZh") }}</label>
-          <input id="currency-name-zh" v-model="form.nameZh" type="text" required />
-        </div>
-        <div class="field">
-          <label for="currency-symbol">{{ $t("admin.symbol") }}</label>
-          <input id="currency-symbol" v-model="form.symbol" type="text" required />
-        </div>
-        <div class="field">
-          <label for="currency-exponent">{{ $t("admin.exponent") }}</label>
-          <input id="currency-exponent" v-model.number="form.exponent" min="0" max="6" type="number" required />
-        </div>
-        <div class="field">
-          <label for="currency-rate">{{ $t("admin.rate") }}</label>
-          <input id="currency-rate" v-model="form.rateToBase" min="0" step="any" type="number" required />
-        </div>
+  <VPage :title="$t('nav.currencies')">
+    <VCard class="mb-5">
+      <h2 class="mb-4 text-base font-semibold">{{ $t("admin.currencyFormTitle") }}</h2>
+      <div class="grid gap-3 md:grid-cols-3">
+        <VField :label="$t('admin.currencyCode')">
+          <VInput id="currency-code" v-model="form.code" maxlength="3" required />
+        </VField>
+        <VField :label="$t('admin.currencyNameEn')">
+          <VInput id="currency-name-en" v-model="form.nameEn" required />
+        </VField>
+        <VField :label="$t('admin.currencyNameZh')">
+          <VInput id="currency-name-zh" v-model="form.nameZh" required />
+        </VField>
+        <VField :label="$t('admin.symbol')">
+          <VInput id="currency-symbol" v-model="form.symbol" required />
+        </VField>
+        <VField :label="$t('admin.exponent')">
+          <VInput id="currency-exponent" v-model.number="form.exponent" min="0" max="6" type="number" required />
+        </VField>
+        <VField :label="$t('admin.rate')">
+          <VInput id="currency-rate" v-model="form.rateToBase" min="0" step="any" type="number" required />
+        </VField>
       </div>
-      <label class="checkbox-field">
-        <input v-model="form.enabled" type="checkbox" />
+      <label class="my-0 mb-4 flex items-center gap-2 text-sm">
+        <input v-model="form.enabled" class="h-4 w-4 accent-primary" type="checkbox" />
         {{ $t("admin.enabled") }}
       </label>
-      <p v-if="formError" class="error-text" role="alert">{{ formError }}</p>
-      <button class="btn primary" type="button" :disabled="creating" @click="createCurrency">
+      <p v-if="formError" class="my-2 text-sm text-danger" role="alert">{{ formError }}</p>
+      <VBtn variant="primary" :disabled="creating" @click="createCurrency">
         {{ creating ? $t("common.loading") : $t("admin.saveCurrency") }}
-      </button>
-    </section>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
-    <div v-else-if="currencies.length === 0" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap card">
-      <table class="table">
+      </VBtn>
+    </VCard>
+    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="my-2 text-sm text-danger" role="alert">{{ errorMessage }}</p>
+    <VCard v-else-if="currencies.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <div v-else class="overflow-x-auto">
+      <div class="min-w-[1080px]"><VTable>
         <thead>
           <tr>
             <th>{{ $t("common.currency") }}</th>
@@ -204,35 +195,23 @@ onMounted(() => {
             <td>{{ localizedName(currency.name) }}</td>
             <td>{{ currency.symbol }}</td>
             <td>{{ currency.exponent }}</td>
+            <td><VInput v-model="rateDrafts[currency.code]" class="min-w-[110px]" type="number" min="0" step="any" /></td>
             <td>
-              <input v-model="rateDrafts[currency.code]" class="rate-input" type="number" min="0" step="any" />
+              <VBadge v-if="currency.is_base" tone="blue">{{ $t("admin.baseCurrency") }}</VBadge>
+              <span v-else class="text-muted">—</span>
             </td>
-            <td><span v-if="currency.is_base" class="badge blue">{{ $t("admin.baseCurrency") }}</span><span v-else class="muted">—</span></td>
-            <td><span class="badge" :class="currency.enabled ? 'green' : 'red'">{{ currency.enabled ? $t("common.yes") : $t("common.no") }}</span></td>
-            <td class="action-row">
-              <button class="btn sm primary" type="button" :disabled="savingCode === currency.code" @click="saveRate(currency)">
+            <td><VBadge :tone="currency.enabled ? 'green' : 'red'">{{ currency.enabled ? $t("common.yes") : $t("common.no") }}</VBadge></td>
+            <td><div class="flex gap-2">
+              <VBtn size="sm" variant="primary" :disabled="savingCode === currency.code" @click="saveRate(currency)">
                 {{ savingCode === currency.code ? $t("common.loading") : $t("admin.updateRate") }}
-              </button>
-              <button class="btn sm" type="button" :disabled="savingCode === currency.code" @click="toggleEnabled(currency)">
+              </VBtn>
+              <VBtn size="sm" :disabled="savingCode === currency.code" @click="toggleEnabled(currency)">
                 {{ currency.enabled ? $t("admin.suspend") : $t("admin.activate") }}
-              </button>
-            </td>
+              </VBtn>
+            </div></td>
           </tr>
         </tbody>
-      </table>
+      </VTable></div>
     </div>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.create-card { margin-bottom: 20px; }
-.create-card h2 { font-size: 16px; margin: 0 0 16px; }
-.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.checkbox-field { align-items: center; display: flex; gap: 8px; margin: 2px 0 16px; }
-.checkbox-field input { width: auto; }
-.table-wrap { overflow-x: auto; padding: 0; }
-.table { min-width: 1080px; }
-.rate-input { min-width: 110px; }
-.action-row { display: flex; gap: 8px; }
-@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
-</style>
diff --git a/apps/admin/pages/index.vue b/apps/admin/pages/index.vue
index 44df251..396911d 100644
--- a/apps/admin/pages/index.vue
+++ b/apps/admin/pages/index.vue
@@ -49,110 +49,42 @@ const cards = computed(() => [
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <div>
-        <p class="eyebrow">{{ $t("common.appName") }} · Admin</p>
-        <h1 class="page-title">{{ $t("admin.dashboardTitle") }}</h1>
-      </div>
-      <button class="btn sm" type="button" :disabled="loading" @click="loadDashboard">
-        {{ $t("admin.refresh") }}
-      </button>
-    </div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
+  <VPage :title="$t('admin.dashboardTitle')">
+    <template #actions>
+      <VBtn size="sm" :disabled="loading" @click="loadDashboard">{{ $t("admin.refresh") }}</VBtn>
+    </template>
+    <p class="mb-4 text-xs font-bold uppercase tracking-[0.08em] text-primary">{{ $t("common.appName") }} · Admin</p>
+    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="my-2 text-sm text-danger" role="alert">{{ errorMessage }}</p>
     <template v-else>
-      <div class="stat-grid">
-        <NuxtLink v-for="card in cards" :key="card.link" :to="card.link" class="stat-card">
-          <span class="stat-label">{{ $t(card.label) }}</span>
-          <strong class="stat-value" :class="`tone-${card.tone}`">{{ card.value }}</strong>
-          <span class="stat-link">{{ $t("admin.open") }} →</span>
+      <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <NuxtLink
+          v-for="card in cards"
+          :key="card.link"
+          :to="card.link"
+          class="flex flex-col gap-2 rounded-lg border border-border bg-surface p-5 shadow-sm transition-transform hover:-translate-y-0.5 hover:border-primary"
+        >
+          <span class="text-[13px] text-muted">{{ $t(card.label) }}</span>
+          <strong
+            class="text-[32px] leading-none"
+            :class="card.tone === 'green' ? 'text-success' : card.tone === 'orange' ? 'text-warning' : 'text-primary'"
+          >{{ card.value }}</strong>
+          <span class="text-xs text-primary">{{ $t("admin.open") }} →</span>
         </NuxtLink>
       </div>
-      <div class="grid shortcuts">
-        <NuxtLink class="card shortcut" to="/users">
-          <strong>{{ $t("admin.userManagement") }}</strong>
-          <span class="muted">{{ $t("nav.users") }}</span>
-        </NuxtLink>
-        <NuxtLink class="card shortcut" to="/shops">
-          <strong>{{ $t("admin.shopManagement") }}</strong>
-          <span class="muted">{{ $t("nav.shops") }}</span>
-        </NuxtLink>
-        <NuxtLink class="card shortcut" to="/orders">
-          <strong>{{ $t("admin.orderManagement") }}</strong>
-          <span class="muted">{{ $t("nav.orders") }}</span>
-        </NuxtLink>
-        <NuxtLink class="card shortcut" to="/currencies">
-          <strong>{{ $t("admin.currencyManagement") }}</strong>
-          <span class="muted">{{ $t("nav.currencies") }}</span>
+      <div class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <NuxtLink v-for="shortcut in [
+          { to: '/users', title: 'admin.userManagement', label: 'nav.users' },
+          { to: '/shops', title: 'admin.shopManagement', label: 'nav.shops' },
+          { to: '/orders', title: 'admin.orderManagement', label: 'nav.orders' },
+          { to: '/currencies', title: 'admin.currencyManagement', label: 'nav.currencies' },
+        ]" :key="shortcut.to" :to="shortcut.to" class="block no-underline hover:no-underline">
+          <VCard>
+            <strong class="block">{{ $t(shortcut.title) }}</strong>
+            <span class="text-sm text-muted">{{ $t(shortcut.label) }}</span>
+          </VCard>
         </NuxtLink>
       </div>
     </template>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.eyebrow {
-  color: var(--primary);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  margin: 0 0 6px;
-  text-transform: uppercase;
-}
-.stat-grid {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-.stat-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 20px;
-  text-decoration: none;
-  transition: transform 150ms ease, border-color 150ms ease;
-}
-.stat-card:hover {
-  border-color: var(--primary);
-  text-decoration: none;
-  transform: translateY(-2px);
-}
-.stat-label {
-  color: var(--muted);
-  font-size: 13px;
-}
-.stat-value {
-  font-size: 32px;
-  line-height: 1;
-}
-.tone-blue { color: var(--primary); }
-.tone-green { color: var(--success); }
-.tone-orange { color: var(--warning); }
-.tone-purple { color: #7257b8; }
-.stat-link {
-  color: var(--primary);
-  font-size: 12px;
-}
-.shortcuts {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  margin-top: 24px;
-}
-.shortcut {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  text-decoration: none;
-}
-.shortcut:hover { text-decoration: none; }
-@media (max-width: 900px) {
-  .stat-grid, .shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (max-width: 560px) {
-  .stat-grid, .shortcuts { grid-template-columns: 1fr; }
-}
-</style>
diff --git a/apps/admin/pages/login.vue b/apps/admin/pages/login.vue
index d0c36b4..cbcfd80 100644
--- a/apps/admin/pages/login.vue
+++ b/apps/admin/pages/login.vue
@@ -37,54 +37,24 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <div class="login-shell">
-    <form class="card form-narrow login-card" @submit.prevent="submit">
-      <p class="eyebrow">{{ $t("common.appName") }} · Admin</p>
-      <h1 class="page-title">{{ $t("auth.welcome") }}</h1>
-      <p class="muted">{{ $t("admin.dashboardTitle") }}</p>
-      <div class="field">
-        <label for="email">{{ $t("common.email") }}</label>
-        <input id="email" v-model="email" type="email" autocomplete="username" required />
-      </div>
-      <div class="field">
-        <label for="password">{{ $t("common.password") }}</label>
-        <input id="password" v-model="password" type="password" autocomplete="current-password" required />
-      </div>
-      <p v-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
-      <button class="btn primary submit-button" type="submit" :disabled="loading">
-        {{ loading ? $t("common.loading") : $t("common.login") }}
-      </button>
-      <p class="muted hint">{{ $t("auth.adminHint") }}</p>
+  <div class="grid min-h-screen place-items-center bg-bg px-6 py-8 font-sans text-text">
+    <form class="w-full max-w-[420px]" @submit.prevent="submit">
+      <VCard>
+        <p class="mb-2 text-xs font-bold uppercase tracking-[0.08em] text-primary">{{ $t("common.appName") }} · Admin</p>
+        <h1 class="mb-2 text-xl font-bold">{{ $t("auth.welcome") }}</h1>
+        <p class="mb-5 text-sm text-muted">{{ $t("admin.dashboardTitle") }}</p>
+        <VField :label="$t('common.email')">
+          <VInput id="email" v-model="email" type="email" autocomplete="username" required />
+        </VField>
+        <VField :label="$t('common.password')">
+          <VInput id="password" v-model="password" type="password" autocomplete="current-password" required />
+        </VField>
+        <p v-if="errorMessage" class="my-2 text-sm text-danger" role="alert">{{ errorMessage }}</p>
+        <VBtn class="w-full" variant="primary" type="submit" :disabled="loading">
+          {{ loading ? $t("common.loading") : $t("common.login") }}
+        </VBtn>
+        <p class="mt-4 text-center text-xs text-muted">{{ $t("auth.adminHint") }}</p>
+      </VCard>
     </form>
   </div>
 </template>
-
-<style scoped>
-.login-shell {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-}
-.login-card {
-  width: min(100%, 420px);
-  margin: 0;
-}
-.eyebrow {
-  color: var(--primary);
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  margin: 0 0 10px;
-  text-transform: uppercase;
-}
-.submit-button {
-  width: 100%;
-  justify-content: center;
-}
-.hint {
-  font-size: 12px;
-  margin: 16px 0 0;
-  text-align: center;
-}
-</style>
diff --git a/apps/admin/pages/orders.vue b/apps/admin/pages/orders.vue
index f3881ef..b3ddcec 100644
--- a/apps/admin/pages/orders.vue
+++ b/apps/admin/pages/orders.vue
@@ -36,7 +36,7 @@ function formatDate(value: string): string {
   return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
 }
 
-function statusClass(status: Order["status"]): string {
+function statusClass(status: Order["status"]): "green" | "red" | "orange" | "blue" {
   if (status === "completed") return "green";
   if (status === "cancelled") return "red";
   if (status === "pending_payment") return "orange";
@@ -76,53 +76,39 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <h1 class="page-title">{{ $t("nav.orders") }}</h1>
-      <span v-if="!loading" class="muted">{{ $t("admin.pageOf", { page, total: totalPages }) }}</span>
+  <VPage :title="$t('nav.orders')">
+    <template #actions>
+      <span v-if="!loading" class="text-sm text-muted">{{ $t("admin.pageOf", { page, total: totalPages }) }}</span>
+    </template>
+    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="my-2 text-sm text-danger" role="alert">{{ errorMessage }}</p>
+    <VCard v-else-if="orders.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <div v-else class="overflow-x-auto"><div class="min-w-[900px]"><VTable>
+      <thead>
+        <tr>
+          <th>{{ $t("order.orderNo") }}</th>
+          <th>{{ $t("admin.orderShop") }}</th>
+          <th>{{ $t("admin.orderUser") }}</th>
+          <th>{{ $t("admin.orderTotal") }}</th>
+          <th>{{ $t("common.status") }}</th>
+          <th>{{ $t("admin.created") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="order in orders" :key="order.id">
+          <td><strong>{{ order.order_no }}</strong></td>
+          <td>{{ shopName(order.shop_id) }}</td>
+          <td><code class="rounded bg-bg px-1.5 py-0.5" :title="order.user_id">{{ order.user_id.slice(0, 8) }}</code></td>
+          <td>{{ formatTotal(order) }}</td>
+          <td><VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge></td>
+          <td>{{ formatDate(order.created_at) }}</td>
+        </tr>
+      </tbody>
+    </VTable></div></div>
+    <div v-if="!loading && !errorMessage && orders.length > 0" class="mt-4 flex items-center justify-center gap-3">
+      <VBtn size="sm" :disabled="page <= 1" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
+      <span class="text-sm text-muted">{{ page }} / {{ totalPages }}</span>
+      <VBtn size="sm" :disabled="page >= totalPages" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
     </div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
-    <div v-else-if="orders.length === 0" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap card">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>{{ $t("order.orderNo") }}</th>
-            <th>{{ $t("admin.orderShop") }}</th>
-            <th>{{ $t("admin.orderUser") }}</th>
-            <th>{{ $t("admin.orderTotal") }}</th>
-            <th>{{ $t("common.status") }}</th>
-            <th>{{ $t("admin.created") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="order in orders" :key="order.id">
-            <td><strong>{{ order.order_no }}</strong></td>
-            <td>{{ shopName(order.shop_id) }}</td>
-            <td><code :title="order.user_id">{{ order.user_id.slice(0, 8) }}</code></td>
-            <td>{{ formatTotal(order) }}</td>
-            <td><span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span></td>
-            <td>{{ formatDate(order.created_at) }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div v-if="!loading && !errorMessage && orders.length > 0" class="pagination">
-      <button class="btn sm" type="button" :disabled="page <= 1" @click="changePage(page - 1)">
-        {{ $t("common.prev") }}
-      </button>
-      <span class="muted">{{ page }} / {{ totalPages }}</span>
-      <button class="btn sm" type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">
-        {{ $t("common.next") }}
-      </button>
-    </div>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.table-wrap { overflow-x: auto; padding: 0; }
-.table { min-width: 900px; }
-.pagination { align-items: center; display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
-code { background: #f0f2f5; border-radius: 4px; padding: 2px 5px; }
-</style>
diff --git a/apps/admin/pages/points-orders.vue b/apps/admin/pages/points-orders.vue
index 7e5a8f2..907ce02 100644
--- a/apps/admin/pages/points-orders.vue
+++ b/apps/admin/pages/points-orders.vue
@@ -16,7 +16,7 @@ function rewardName(order: IntegralOrder): string {
   return order.items.map((line) => line.name[locale.value] ?? line.name.en).join(", ");
 }
 
-function statusClass(status: IntegralOrderStatus): string {
+function statusClass(status: IntegralOrderStatus): "green" | "red" | "orange" {
   if (status === "fulfilled") return "green";
   if (status === "cancelled") return "red";
   return "orange";
@@ -61,75 +61,43 @@ onMounted(() => void load());
 </script>
 
 <template>
-  <div class="page">
-    <h1 class="page-title">{{ $t("admin.pointsOrderManagement") }}</h1>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-    <p v-if="notice" class="muted" role="status">{{ notice }}</p>
-
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="orders.length === 0" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap card">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>{{ $t("admin.redemptionNo") }}</th>
-            <th>{{ $t("admin.redemptionCustomer") }}</th>
-            <th>{{ $t("admin.redemptionReward") }}</th>
-            <th>{{ $t("admin.redemptionPoints") }}</th>
-            <th>{{ $t("admin.created") }}</th>
-            <th>{{ $t("admin.redemptionStatus") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="order in orders" :key="order.id">
-            <td>{{ order.order_no }}</td>
-            <td class="muted">{{ order.user_id }}</td>
-            <td>{{ rewardName(order) }}</td>
-            <td>{{ order.total_points }}</td>
-            <td>{{ order.created_at.slice(0, 10) }}</td>
-            <td>
-              <span class="badge" :class="statusClass(order.status)">
-                {{ $t(`admin.redemptionStatuses.${order.status}`) }}
-              </span>
-            </td>
-            <td class="action-row">
-              <template v-if="order.status === 'pending_fulfillment'">
-                <button
-                  class="btn sm primary"
-                  type="button"
-                  :disabled="actionId === order.id"
-                  @click="transition(order, 'fulfill')"
-                >
-                  {{ $t("admin.fulfillRedemption") }}
-                </button>
-                <button
-                  class="btn sm"
-                  type="button"
-                  :disabled="actionId === order.id"
-                  @click="transition(order, 'cancel')"
-                >
-                  {{ $t("admin.cancelRedemption") }}
-                </button>
-              </template>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <VPage :title="$t('admin.pointsOrderManagement')">
+    <p v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</p>
+    <p v-if="notice" class="text-sm text-muted" role="status">{{ notice }}</p>
+    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="orders.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <div v-else class="overflow-x-auto"><div class="min-w-[980px]"><VTable>
+      <thead>
+        <tr>
+          <th>{{ $t("admin.redemptionNo") }}</th>
+          <th>{{ $t("admin.redemptionCustomer") }}</th>
+          <th>{{ $t("admin.redemptionReward") }}</th>
+          <th>{{ $t("admin.redemptionPoints") }}</th>
+          <th>{{ $t("admin.created") }}</th>
+          <th>{{ $t("admin.redemptionStatus") }}</th>
+          <th>{{ $t("common.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="order in orders" :key="order.id">
+          <td>{{ order.order_no }}</td>
+          <td class="text-muted">{{ order.user_id }}</td>
+          <td>{{ rewardName(order) }}</td>
+          <td>{{ order.total_points }}</td>
+          <td>{{ order.created_at.slice(0, 10) }}</td>
+          <td><VBadge :tone="statusClass(order.status)">{{ $t(`admin.redemptionStatuses.${order.status}`) }}</VBadge></td>
+          <td><div class="flex gap-2">
+            <template v-if="order.status === 'pending_fulfillment'">
+              <VBtn size="sm" variant="primary" :disabled="actionId === order.id" @click="transition(order, 'fulfill')">
+                {{ $t("admin.fulfillRedemption") }}
+              </VBtn>
+              <VBtn size="sm" :disabled="actionId === order.id" @click="transition(order, 'cancel')">
+                {{ $t("admin.cancelRedemption") }}
+              </VBtn>
+            </template>
+          </div></td>
+        </tr>
+      </tbody>
+    </VTable></div></div>
+  </VPage>
 </template>
-
-<style scoped>
-.table-wrap {
-  overflow-x: auto;
-  padding: 0;
-}
-.table {
-  min-width: 980px;
-}
-.action-row {
-  display: flex;
-  gap: 8px;
-}
-</style>
diff --git a/apps/admin/pages/points-products.vue b/apps/admin/pages/points-products.vue
index 4193a09..fd25551 100644
--- a/apps/admin/pages/points-products.vue
+++ b/apps/admin/pages/points-products.vue
@@ -127,141 +127,68 @@ onMounted(() => void load());
 </script>
 
 <template>
-  <div class="page">
-    <h1 class="page-title">{{ $t("admin.pointsProductManagement") }}</h1>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-    <p v-if="notice" class="muted" role="status">{{ notice }}</p>
+  <VPage :title="$t('admin.pointsProductManagement')">
+    <p v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</p>
+    <p v-if="notice" class="text-sm text-muted" role="status">{{ notice }}</p>
 
-    <section class="card create-card">
-      <h2>{{ editingId ? $t("admin.editPointsProduct") : $t("admin.newPointsProduct") }}</h2>
-      <div class="form-grid">
-        <div class="field">
-          <label for="pp-name-en">{{ $t("admin.pointsNameEn") }}</label>
-          <input id="pp-name-en" v-model="form.nameEn" type="text" />
-        </div>
-        <div class="field">
-          <label for="pp-name-zh">{{ $t("admin.pointsNameZh") }}</label>
-          <input id="pp-name-zh" v-model="form.nameZh" type="text" />
-        </div>
-        <div class="field">
-          <label for="pp-image">{{ $t("admin.pointsImage") }}</label>
-          <input id="pp-image" v-model="form.image" type="text" />
-        </div>
-        <div class="field">
-          <label for="pp-price">{{ $t("admin.pointsPrice") }}</label>
-          <input id="pp-price" v-model.number="form.pointsPrice" min="1" step="1" type="number" />
-        </div>
-        <div class="field">
-          <label for="pp-stock">{{ $t("admin.pointsStock") }}</label>
-          <input id="pp-stock" v-model.number="form.stock" min="0" step="1" type="number" />
-        </div>
-        <div class="field">
-          <label for="pp-position">{{ $t("admin.pointsPosition") }}</label>
-          <input id="pp-position" v-model.number="form.position" step="1" type="number" />
-        </div>
+    <VCard class="mb-5">
+      <h2 class="mb-4 text-base font-semibold">{{ editingId ? $t("admin.editPointsProduct") : $t("admin.newPointsProduct") }}</h2>
+      <div class="grid gap-3 md:grid-cols-3">
+        <VField :label="$t('admin.pointsNameEn')"><VInput id="pp-name-en" v-model="form.nameEn" /></VField>
+        <VField :label="$t('admin.pointsNameZh')"><VInput id="pp-name-zh" v-model="form.nameZh" /></VField>
+        <VField :label="$t('admin.pointsImage')"><VInput id="pp-image" v-model="form.image" /></VField>
+        <VField :label="$t('admin.pointsPrice')"><VInput id="pp-price" v-model.number="form.pointsPrice" min="1" step="1" type="number" /></VField>
+        <VField :label="$t('admin.pointsStock')"><VInput id="pp-stock" v-model.number="form.stock" min="0" step="1" type="number" /></VField>
+        <VField :label="$t('admin.pointsPosition')"><VInput id="pp-position" v-model.number="form.position" step="1" type="number" /></VField>
       </div>
-      <label class="checkbox-field">
-        <input v-model="form.recommend" type="checkbox" />
+      <label class="my-2 flex items-center gap-2 text-sm">
+        <input v-model="form.recommend" class="h-4 w-4 accent-primary" type="checkbox" />
         {{ $t("admin.pointsRecommend") }}
       </label>
-      <label class="checkbox-field">
-        <input v-model="form.published" type="checkbox" />
+      <label class="mb-4 flex items-center gap-2 text-sm">
+        <input v-model="form.published" class="h-4 w-4 accent-primary" type="checkbox" />
         {{ $t("admin.pointsPublished") }}
       </label>
-      <div class="action-row">
-        <button class="btn primary" type="button" :disabled="saving" @click="submit">
+      <div class="flex gap-2">
+        <VBtn variant="primary" :disabled="saving" @click="submit">
           {{ saving ? $t("common.loading") : $t("admin.savePointsProduct") }}
-        </button>
-        <button v-if="editingId" class="btn" type="button" @click="resetForm">
-          {{ $t("common.cancel") }}
-        </button>
+        </VBtn>
+        <VBtn v-if="editingId" @click="resetForm">{{ $t("common.cancel") }}</VBtn>
       </div>
-    </section>
+    </VCard>
 
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="products.length === 0" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap card">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>{{ $t("admin.pointsNameEn") }}</th>
-            <th>{{ $t("admin.pointsPrice") }}</th>
-            <th>{{ $t("admin.pointsStock") }}</th>
-            <th>{{ $t("admin.pointsPosition") }}</th>
-            <th>{{ $t("admin.pointsRecommend") }}</th>
-            <th>{{ $t("common.status") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="product in products" :key="product.id">
-            <td>{{ localizedName(product.name) }}</td>
-            <td>{{ product.points_price }}</td>
-            <td>{{ product.stock }}</td>
-            <td>{{ product.position }}</td>
-            <td>{{ product.recommend ? $t("common.yes") : $t("common.no") }}</td>
-            <td>
-              <span class="badge" :class="product.published ? 'green' : 'orange'">
-                {{ product.published ? $t("admin.publishedOn") : $t("admin.publishedOff") }}
-              </span>
-            </td>
-            <td class="action-row">
-              <button class="btn sm" type="button" @click="edit(product)">
-                {{ $t("common.edit") }}
-              </button>
-              <button
-                class="btn sm primary"
-                type="button"
-                :disabled="actionId === product.id"
-                @click="togglePublished(product)"
-              >
-                {{ product.published ? $t("product.unpublish") : $t("product.publish") }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="products.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <div v-else class="overflow-x-auto"><div class="min-w-[900px]"><VTable>
+      <thead>
+        <tr>
+          <th>{{ $t("admin.pointsNameEn") }}</th>
+          <th>{{ $t("admin.pointsPrice") }}</th>
+          <th>{{ $t("admin.pointsStock") }}</th>
+          <th>{{ $t("admin.pointsPosition") }}</th>
+          <th>{{ $t("admin.pointsRecommend") }}</th>
+          <th>{{ $t("common.status") }}</th>
+          <th>{{ $t("common.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="product in products" :key="product.id">
+          <td>{{ localizedName(product.name) }}</td>
+          <td>{{ product.points_price }}</td>
+          <td>{{ product.stock }}</td>
+          <td>{{ product.position }}</td>
+          <td>{{ product.recommend ? $t("common.yes") : $t("common.no") }}</td>
+          <td><VBadge :tone="product.published ? 'green' : 'orange'">
+            {{ product.published ? $t("admin.publishedOn") : $t("admin.publishedOff") }}
+          </VBadge></td>
+          <td><div class="flex gap-2">
+            <VBtn size="sm" @click="edit(product)">{{ $t("common.edit") }}</VBtn>
+            <VBtn size="sm" variant="primary" :disabled="actionId === product.id" @click="togglePublished(product)">
+              {{ product.published ? $t("product.unpublish") : $t("product.publish") }}
+            </VBtn>
+          </div></td>
+        </tr>
+      </tbody>
+    </VTable></div></div>
+  </VPage>
 </template>
-
-<style scoped>
-.create-card {
-  margin-bottom: 20px;
-}
-.create-card h2 {
-  font-size: 16px;
-  margin: 0 0 16px;
-}
-.form-grid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-.checkbox-field {
-  align-items: center;
-  display: flex;
-  gap: 8px;
-  margin: 10px 0 0;
-}
-.checkbox-field input {
-  width: auto;
-}
-.action-row {
-  display: flex;
-  gap: 8px;
-  margin-top: 14px;
-}
-.table-wrap {
-  overflow-x: auto;
-  padding: 0;
-}
-.table {
-  min-width: 900px;
-}
-@media (max-width: 760px) {
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/apps/admin/pages/shops.vue b/apps/admin/pages/shops.vue
index 7dfac14..896ba48 100644
--- a/apps/admin/pages/shops.vue
+++ b/apps/admin/pages/shops.vue
@@ -24,7 +24,7 @@ function formatDate(value: string): string {
   return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
 }
 
-function statusClass(status: Shop["status"]): string {
+function statusClass(status: Shop["status"]): "green" | "red" {
   return status === "active" ? "green" : "red";
 }
 
@@ -84,69 +84,51 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <h1 class="page-title">{{ $t("nav.shops") }}</h1>
-    </div>
-    <section class="card create-card">
-      <h2>{{ $t("admin.createShop") }}</h2>
-      <div class="form-grid">
-        <div class="field">
-          <label for="shop-name-en">{{ $t("admin.shopNameEn") }}</label>
-          <input id="shop-name-en" v-model="nameEn" type="text" required />
-        </div>
-        <div class="field">
-          <label for="shop-name-zh">{{ $t("admin.shopNameZh") }}</label>
-          <input id="shop-name-zh" v-model="nameZh" type="text" required />
-        </div>
-        <div class="field">
-          <label for="shop-slug">{{ $t("admin.shopSlug") }}</label>
-          <input id="shop-slug" v-model="slug" type="text" required />
-        </div>
+  <VPage :title="$t('nav.shops')">
+    <VCard class="mb-5">
+      <h2 class="mb-4 text-base font-semibold">{{ $t("admin.createShop") }}</h2>
+      <div class="grid gap-3 md:grid-cols-3">
+        <VField :label="$t('admin.shopNameEn')">
+          <VInput id="shop-name-en" v-model="nameEn" required />
+        </VField>
+        <VField :label="$t('admin.shopNameZh')">
+          <VInput id="shop-name-zh" v-model="nameZh" required />
+        </VField>
+        <VField :label="$t('admin.shopSlug')">
+          <VInput id="shop-slug" v-model="slug" required />
+        </VField>
       </div>
-      <p v-if="createError" class="error-text" role="alert">{{ createError }}</p>
-      <button class="btn primary" type="button" :disabled="creating" @click="createShop">
+      <p v-if="createError" class="my-2 text-sm text-danger" role="alert">{{ createError }}</p>
+      <VBtn variant="primary" :disabled="creating" @click="createShop">
         {{ creating ? $t("common.loading") : $t("common.create") }}
-      </button>
-    </section>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
-    <div v-else-if="shops.length === 0" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap card">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>{{ $t("admin.shopNameEn") }}</th>
-            <th>{{ $t("admin.shopSlug") }}</th>
-            <th>{{ $t("admin.shopStatus") }}</th>
-            <th>{{ $t("admin.created") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="shop in shops" :key="shop.id">
-            <td>{{ localizedName(shop.name) }}</td>
-            <td><code>{{ shop.slug }}</code></td>
-            <td><span class="badge" :class="statusClass(shop.status)">{{ $t(`admin.${shop.status}`) }}</span></td>
-            <td>{{ formatDate(shop.created_at) }}</td>
-            <td>
-              <button class="btn sm" :class="{ danger: shop.status === 'active' }" type="button" :disabled="updatingId === shop.id" @click="setStatus(shop)">
-                {{ updatingId === shop.id ? $t("common.loading") : $t(shop.status === "active" ? "admin.suspend" : "admin.activate") }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+      </VBtn>
+    </VCard>
+    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="my-2 text-sm text-danger" role="alert">{{ errorMessage }}</p>
+    <VCard v-else-if="shops.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <div v-else class="overflow-x-auto"><div class="min-w-[720px]"><VTable>
+      <thead>
+        <tr>
+          <th>{{ $t("admin.shopNameEn") }}</th>
+          <th>{{ $t("admin.shopSlug") }}</th>
+          <th>{{ $t("admin.shopStatus") }}</th>
+          <th>{{ $t("admin.created") }}</th>
+          <th>{{ $t("common.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="shop in shops" :key="shop.id">
+          <td>{{ localizedName(shop.name) }}</td>
+          <td><code class="rounded bg-bg px-1.5 py-0.5">{{ shop.slug }}</code></td>
+          <td><VBadge :tone="statusClass(shop.status)">{{ $t(`admin.${shop.status}`) }}</VBadge></td>
+          <td>{{ formatDate(shop.created_at) }}</td>
+          <td>
+            <VBtn :variant="shop.status === 'active' ? 'danger' : 'default'" size="sm" :disabled="updatingId === shop.id" @click="setStatus(shop)">
+              {{ updatingId === shop.id ? $t("common.loading") : $t(shop.status === "active" ? "admin.suspend" : "admin.activate") }}
+            </VBtn>
+          </td>
+        </tr>
+      </tbody>
+    </VTable></div></div>
+  </VPage>
 </template>
-
-<style scoped>
-.create-card { margin-bottom: 20px; }
-.create-card h2 { font-size: 16px; margin: 0 0 16px; }
-.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.table-wrap { overflow-x: auto; padding: 0; }
-.table { min-width: 720px; }
-code { background: #f0f2f5; border-radius: 4px; padding: 2px 5px; }
-@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
-</style>
diff --git a/apps/admin/pages/users.vue b/apps/admin/pages/users.vue
index e0f21a6..f25ca58 100644
--- a/apps/admin/pages/users.vue
+++ b/apps/admin/pages/users.vue
@@ -109,85 +109,68 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <h1 class="page-title">{{ $t("nav.users") }}</h1>
-      <span v-if="!loading" class="muted">{{ $t("admin.pageOf", { page, total: totalPages }) }}</span>
+  <VPage :title="$t('nav.users')">
+    <template #actions>
+      <span v-if="!loading" class="text-sm text-muted">{{ $t("admin.pageOf", { page, total: totalPages }) }}</span>
+    </template>
+    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="my-2 text-sm text-danger" role="alert">{{ errorMessage }}</p>
+    <VCard v-else-if="users.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <div v-else class="overflow-x-auto"><div class="min-w-[920px]"><VTable>
+      <thead>
+        <tr>
+          <th>{{ $t("common.email") }}</th>
+          <th>{{ $t("common.displayName") }}</th>
+          <th>{{ $t("admin.role") }}</th>
+          <th>{{ $t("admin.assignShop") }}</th>
+          <th>{{ $t("admin.created") }}</th>
+          <th>{{ $t("common.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="user in users" :key="user.id">
+          <td>{{ user.email }}</td>
+          <td>{{ user.display_name }}</td>
+          <td><VBadge tone="blue">{{ $t(`admin.roles.${user.role}`) }}</VBadge></td>
+          <td>
+            <div class="grid min-w-[190px] gap-1.5">
+              <select
+                v-model="draftFor(user).role"
+                class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
+                :aria-label="$t('admin.role')"
+                @change="normalizeDraft(draftFor(user))"
+              >
+                <option value="platform_admin">{{ $t("admin.roles.platform_admin") }}</option>
+                <option value="shop_owner">{{ $t("admin.roles.shop_owner") }}</option>
+                <option value="shop_staff">{{ $t("admin.roles.shop_staff") }}</option>
+                <option value="customer">{{ $t("admin.roles.customer") }}</option>
+              </select>
+              <select
+                v-if="roleNeedsShop(draftFor(user).role)"
+                v-model="draftFor(user).shopId"
+                class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
+                :aria-label="$t('admin.assignShop')"
+              >
+                <option :value="null">{{ $t("admin.noAssignedShop") }}</option>
+                <option v-for="shop in shops" :key="shop.id" :value="shop.id">{{ tText(shop.name, locale) }}</option>
+              </select>
+              <span v-else class="text-sm text-muted">{{ shopName(user.shop_id) }}</span>
+            </div>
+            <p v-if="rowErrors[user.id]" class="my-1 text-xs text-danger" role="alert">{{ rowErrors[user.id] }}</p>
+          </td>
+          <td>{{ formatDate(user.created_at) }}</td>
+          <td>
+            <VBtn size="sm" variant="primary" :disabled="savingId === user.id" @click="saveRole(user)">
+              {{ savingId === user.id ? $t("common.loading") : $t("common.save") }}
+            </VBtn>
+          </td>
+        </tr>
+      </tbody>
+    </VTable></div></div>
+    <div v-if="!loading && !errorMessage && users.length > 0" class="mt-4 flex items-center justify-center gap-3">
+      <VBtn size="sm" :disabled="page <= 1" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
+      <span class="text-sm text-muted">{{ page }} / {{ totalPages }}</span>
+      <VBtn size="sm" :disabled="page >= totalPages" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
     </div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
-    <div v-else-if="users.length === 0" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap card">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>{{ $t("common.email") }}</th>
-            <th>{{ $t("common.displayName") }}</th>
-            <th>{{ $t("admin.role") }}</th>
-            <th>{{ $t("admin.assignShop") }}</th>
-            <th>{{ $t("admin.created") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="user in users" :key="user.id">
-            <td>{{ user.email }}</td>
-            <td>{{ user.display_name }}</td>
-            <td>
-              <span class="badge blue">{{ $t(`admin.roles.${user.role}`) }}</span>
-            </td>
-            <td>
-              <div class="role-editor">
-                <select
-                  v-model="draftFor(user).role"
-                  :aria-label="$t('admin.role')"
-                  @change="normalizeDraft(draftFor(user))"
-                >
-                  <option value="platform_admin">{{ $t("admin.roles.platform_admin") }}</option>
-                  <option value="shop_owner">{{ $t("admin.roles.shop_owner") }}</option>
-                  <option value="shop_staff">{{ $t("admin.roles.shop_staff") }}</option>
-                  <option value="customer">{{ $t("admin.roles.customer") }}</option>
-                </select>
-                <select
-                  v-if="roleNeedsShop(draftFor(user).role)"
-                  v-model="draftFor(user).shopId"
-                  :aria-label="$t('admin.assignShop')"
-                >
-                  <option :value="null">{{ $t("admin.noAssignedShop") }}</option>
-                  <option v-for="shop in shops" :key="shop.id" :value="shop.id">
-                    {{ tText(shop.name, locale) }}
-                  </option>
-                </select>
-                <span v-else class="muted">{{ shopName(user.shop_id) }}</span>
-              </div>
-              <p v-if="rowErrors[user.id]" class="error-text row-error" role="alert">{{ rowErrors[user.id] }}</p>
-            </td>
-            <td>{{ formatDate(user.created_at) }}</td>
-            <td>
-              <button class="btn sm primary" type="button" :disabled="savingId === user.id" @click="saveRole(user)">
-                {{ savingId === user.id ? $t("common.loading") : $t("common.save") }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div v-if="!loading && !errorMessage && users.length > 0" class="pagination">
-      <button class="btn sm" type="button" :disabled="page <= 1" @click="changePage(page - 1)">
-        {{ $t("common.prev") }}
-      </button>
-      <span class="muted">{{ page }} / {{ totalPages }}</span>
-      <button class="btn sm" type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">
-        {{ $t("common.next") }}
-      </button>
-    </div>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.table-wrap { overflow-x: auto; padding: 0; }
-.table { min-width: 920px; }
-.role-editor { display: grid; gap: 6px; min-width: 190px; }
-.row-error { font-size: 12px; margin: 4px 0 0; }
-.pagination { align-items: center; display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
-</style>
diff --git a/apps/mall/app.vue b/apps/mall/app.vue
index c5d0e31..18c5ce3 100644
--- a/apps/mall/app.vue
+++ b/apps/mall/app.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
 const session = useSessionStore();
+
+useHead({
+  htmlAttrs: {
+    "data-accent": "red",
+  },
+});
+
 onMounted(() => session.hydrate());
 </script>
 
 <template>
-  <div>
+  <div class="flex min-h-screen flex-col bg-bg font-sans text-text">
     <ShellTopBar />
     <ShellSiteHeader />
-    <main class="mall-main">
+    <main class="flex-1">
       <NuxtPage />
     </main>
     <ShellSiteFooter />
diff --git a/apps/mall/assets/mall.css b/apps/mall/assets/mall.css
deleted file mode 100644
index 9d17730..0000000
--- a/apps/mall/assets/mall.css
+++ /dev/null
@@ -1,161 +0,0 @@
-/* B2B2C mall-style PC mall theme: 1200px grid, #ca151e brand red, compact controls. */
-
-:root {
-  --mall-red: #ca151e;
-  --mall-red-dark: #a8111a;
-  --mall-ink: #333;
-  --mall-muted: #666;
-  --mall-faint: #999;
-  --mall-line: #efefef;
-  --mall-line-dark: #d9d9d9;
-  --mall-bg: #f5f5f5;
-  --mall-panel: #fff;
-  --mall-green: #67c23a;
-  --mall-yellow: #e6a23c;
-  --mall-nav: #333;
-  --mall-radius: 3px;
-  --mall-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-
-body {
-  background: #fff;
-  color: var(--mall-ink);
-  font-size: 14px;
-}
-
-.w1200 {
-  width: 1200px;
-  margin: 0 auto;
-}
-
-.mall-main {
-  min-height: 60vh;
-}
-
-/* buttons */
-.mbtn {
-  display: inline-block;
-  box-sizing: border-box;
-  padding: 6px 15px;
-  border: 1px solid var(--mall-line-dark);
-  border-radius: var(--mall-radius);
-  background: #fff;
-  color: var(--mall-muted);
-  font-size: 12px;
-  line-height: 1.6;
-  cursor: pointer;
-  text-decoration: none;
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
-}
-.mbtn:hover {
-  color: var(--mall-red);
-  border-color: var(--mall-red);
-}
-.mbtn.red {
-  background: var(--mall-red);
-  border-color: var(--mall-red);
-  color: #fff;
-}
-.mbtn.red:hover {
-  background: var(--mall-red-dark);
-}
-.mbtn.gray {
-  background: #909399;
-  border-color: #909399;
-  color: #fff;
-}
-.mbtn.block {
-  display: block;
-  width: 100%;
-  text-align: center;
-  padding: 10px 15px;
-  font-size: 14px;
-}
-.mbtn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* white content panel (user center etc.) */
-.mpanel {
-  background: var(--mall-panel);
-  padding: 20px;
-  margin-bottom: 20px;
-}
-.mpanel-title {
-  font-size: 16px;
-  border-left: 3px solid var(--mall-red);
-  padding-left: 12px;
-  margin: 0 0 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.mpanel-title .more {
-  font-size: 12px;
-  color: var(--mall-muted);
-  text-decoration: none;
-}
-.mpanel-title .more:hover {
-  color: var(--mall-red);
-}
-
-.hr20 {
-  height: 1px;
-  background: var(--mall-line);
-  margin: 20px 0;
-  border: 0;
-}
-
-/* form controls */
-.minput {
-  box-sizing: border-box;
-  width: 100%;
-  height: 38px;
-  padding: 8px 12px;
-  border: 1px solid var(--mall-line-dark);
-  border-radius: var(--mall-radius);
-  font-size: 13px;
-  outline: none;
-}
-.minput:focus {
-  border-color: var(--mall-red);
-}
-
-/* gray page section background (home floors) */
-.section-bg {
-  background: var(--mall-bg);
-  padding: 20px 0 60px;
-}
-
-/* simple table */
-.mtable {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-.mtable th {
-  background: #fafafa;
-  border-bottom: 1px solid var(--mall-line);
-  padding: 10px 12px;
-  text-align: left;
-  color: var(--mall-muted);
-  font-weight: normal;
-}
-.mtable td {
-  border-bottom: 1px solid var(--mall-line);
-  padding: 12px;
-  vertical-align: middle;
-}
-.mtable tr:hover td {
-  background: #fcfcfc;
-}
-
-/* product card hover lift */
-.hover-lift {
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-.hover-lift:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--mall-shadow);
-}
diff --git a/apps/mall/components/PriceText.vue b/apps/mall/components/PriceText.vue
index 66501c6..dd512f0 100644
--- a/apps/mall/components/PriceText.vue
+++ b/apps/mall/components/PriceText.vue
@@ -27,6 +27,6 @@ watch(
 </script>
 
 <template>
-  <span v-if="failed" class="muted">{{ $t("mall.notAvailable") }}</span>
+  <span v-if="failed" class="text-muted">{{ $t("mall.notAvailable") }}</span>
   <span v-else>{{ display || $t("common.loading") }}</span>
 </template>
diff --git a/apps/mall/components/StatusBadge.vue b/apps/mall/components/StatusBadge.vue
index 913a251..375d6cf 100644
--- a/apps/mall/components/StatusBadge.vue
+++ b/apps/mall/components/StatusBadge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{ status: string; kind: "order" | "shipment" | "invoice" }>();
 
-const tone = computed(() => {
+const tone = computed<"green" | "blue" | "red" | "orange">(() => {
   if (["completed", "delivered", "issued"].includes(props.status)) return "green";
   if (["paid", "fulfilling", "shipped"].includes(props.status)) return "blue";
   if (["cancelled"].includes(props.status)) return "red";
@@ -15,5 +15,5 @@ const label = computed(() => {
 </script>
 
 <template>
-  <span class="badge" :class="tone">{{ $t(label) }}</span>
+  <VBadge :tone="tone">{{ $t(label) }}</VBadge>
 </template>
diff --git a/apps/mall/components/shell/CategoryMenu.vue b/apps/mall/components/shell/CategoryMenu.vue
index 5f7b64c..08fe61c 100644
--- a/apps/mall/components/shell/CategoryMenu.vue
+++ b/apps/mall/components/shell/CategoryMenu.vue
@@ -31,145 +31,69 @@ const cats = computed(() =>
 
 const active = computed(() => cats.value.find((g) => g.cat.id === hoverId.value) ?? null);
 
+const rootClass = computed(() =>
+  props.pinned
+    ? "relative z-[700] flex h-hero w-[240px]"
+    : "absolute left-0 top-10 z-[700] flex w-[960px]",
+);
+
+const railClass = computed(() =>
+  props.pinned
+    ? "box-border h-hero min-h-[450px] w-[240px] list-none bg-[rgba(30,30,30,0.92)] py-2"
+    : "min-h-[434px] w-[240px] list-none bg-[rgba(30,30,30,0.92)] py-2",
+);
+
+const subClass = computed(() =>
+  props.pinned
+    ? "absolute left-[240px] top-0 box-border h-hero min-h-[450px] w-[700px] overflow-auto bg-surface px-[30px] py-5 shadow-lg"
+    : "min-h-[434px] flex-1 bg-surface px-[30px] py-5 shadow-lg",
+);
+
 defineExpose({ open });
 </script>
 
 <template>
-  <div class="catmenu" :class="{ pinned: props.pinned }" @mouseleave="hoverId = null">
-    <ul class="lvl1">
+  <div :class="rootClass" @mouseleave="hoverId = null">
+    <ul :class="railClass">
       <li
         v-for="g in cats"
         :key="g.cat.id"
-        :class="{ on: hoverId === g.cat.id }"
+        class="cursor-pointer px-[15px] py-[10px]"
+        :class="hoverId === g.cat.id ? 'bg-surface' : ''"
         @mouseenter="hoverId = g.cat.id"
       >
-        <NuxtLink :to="`/search?category=${g.cat.id}`" class="c1">{{ pick(g.cat.name, locale) }}</NuxtLink>
-        <span class="c2s">
+        <NuxtLink
+          :to="`/search?category=${g.cat.id}`"
+          class="block text-sm no-underline"
+          :class="hoverId === g.cat.id ? 'text-primary' : 'text-white'"
+        >{{ pick(g.cat.name, locale) }}</NuxtLink>
+        <span class="mt-0.5 block">
           <NuxtLink
             v-for="cc in g.children.slice(0, 3)"
             :key="cc.cat.id"
             :to="`/search?category=${cc.cat.id}`"
-            class="c2"
+            class="mr-2 text-[12px] no-underline"
+            :class="hoverId === g.cat.id ? 'text-primary' : 'text-[#bbb] hover:text-white'"
           >{{ pick(cc.cat.name, locale) }}</NuxtLink>
         </span>
       </li>
     </ul>
-    <div v-if="active" class="sub">
-      <div v-for="cc in active.children" :key="cc.cat.id" class="sub-row">
-        <NuxtLink :to="`/search?category=${cc.cat.id}`" class="sub-title">{{ pick(cc.cat.name, locale) }}</NuxtLink>
-        <div class="sub-items">
+
+    <div v-if="active" :class="subClass">
+      <div v-for="cc in active.children" :key="cc.cat.id" class="flex border-b border-border py-3 last:border-b-0">
+        <NuxtLink
+          :to="`/search?category=${cc.cat.id}`"
+          class="w-[120px] shrink-0 text-[14px] font-semibold text-text no-underline"
+        >{{ pick(cc.cat.name, locale) }}</NuxtLink>
+        <div>
           <NuxtLink
             v-for="gc in cc.grandchildren"
             :key="gc.id"
             :to="`/search?category=${gc.id}`"
+            class="mb-2 mr-[18px] inline-block text-[13px] text-muted no-underline transition-colors hover:text-primary"
           >{{ pick(gc.name, locale) }}</NuxtLink>
         </div>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-.catmenu {
-  position: absolute;
-  top: 40px;
-  left: 0;
-  z-index: 700;
-  display: flex;
-  width: 960px;
-}
-/* pinned: in-flow left rail of the home hero row, flyout overlays the carousel */
-.catmenu.pinned {
-  position: relative;
-  top: auto;
-  left: auto;
-  flex: none;
-  width: 240px;
-  height: 450px;
-}
-.lvl1 {
-  width: 240px;
-  margin: 0;
-  padding: 8px 0;
-  list-style: none;
-  background: rgba(30, 30, 30, 0.92);
-  min-height: 434px;
-}
-.lvl1 li {
-  padding: 10px 15px;
-  cursor: pointer;
-}
-.lvl1 li.on {
-  background: #fff;
-}
-.lvl1 li.on .c1,
-.lvl1 li.on .c2 {
-  color: var(--mall-red);
-}
-.c1 {
-  display: block;
-  color: #fff;
-  font-size: 14px;
-  text-decoration: none;
-}
-.c2s {
-  display: block;
-  margin-top: 2px;
-}
-.c2 {
-  color: #bbb;
-  font-size: 12px;
-  margin-right: 8px;
-  text-decoration: none;
-}
-.c2:hover {
-  color: #fff;
-}
-.sub {
-  flex: 1;
-  background: #fff;
-  box-shadow: var(--mall-shadow);
-  padding: 20px 30px;
-  min-height: 434px;
-}
-.sub-row {
-  display: flex;
-  border-bottom: 1px solid var(--mall-line);
-  padding: 12px 0;
-}
-.sub-row:last-child {
-  border-bottom: 0;
-}
-.sub-title {
-  width: 120px;
-  font-weight: 600;
-  color: var(--mall-ink);
-  text-decoration: none;
-}
-.sub-items a {
-  display: inline-block;
-  margin: 0 18px 8px 0;
-  color: var(--mall-muted);
-  font-size: 13px;
-  text-decoration: none;
-}
-.sub-items a:hover {
-  color: var(--mall-red);
-}
-/* pinned overrides: 240x450 rail, flyout opens to the right over the carousel */
-.catmenu.pinned .lvl1 {
-  box-sizing: border-box;
-  height: 450px;
-  min-height: 450px;
-}
-.catmenu.pinned .sub {
-  position: absolute;
-  top: 0;
-  left: 240px;
-  box-sizing: border-box;
-  width: 700px;
-  height: 450px;
-  min-height: 450px;
-  overflow: auto;
-}
-</style>
diff --git a/apps/mall/components/shell/SiteFooter.vue b/apps/mall/components/shell/SiteFooter.vue
index 157d75f..089c8d7 100644
--- a/apps/mall/components/shell/SiteFooter.vue
+++ b/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>
diff --git a/apps/mall/components/shell/SiteHeader.vue b/apps/mall/components/shell/SiteHeader.vue
index 01b027b..7de19ff 100644
--- a/apps/mall/components/shell/SiteHeader.vue
+++ b/apps/mall/components/shell/SiteHeader.vue
@@ -38,181 +38,82 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
 </script>
 
 <template>
-  <header class="hdr">
-    <div class="w1200 hdr-top">
-      <NuxtLink to="/" class="logo">VMall</NuxtLink>
-      <div class="search-box">
-        <input
-          v-model="keywords"
-          class="search-input"
-          type="text"
-          :placeholder="t('shell.searchPlaceholder')"
-          @keyup.enter="search"
-        />
-        <button class="search-btn" type="button" :aria-label="t('common.search')" @click="search">
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-            <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z" />
-          </svg>
-        </button>
-        <div class="cart-links">
-          <NuxtLink to="/user" class="cart-link">{{ t("shell.myMall") }}</NuxtLink>
-          <NuxtLink to="/cart" class="cart-link">
+  <header class="bg-surface">
+    <div class="mx-auto flex max-w-mall items-center gap-10 px-4 py-6">
+      <NuxtLink to="/" class="text-[34px] font-extrabold leading-none tracking-[1px] text-primary no-underline">VMall</NuxtLink>
+
+      <div class="flex min-w-0 flex-1 items-center">
+        <div class="flex min-w-0 flex-1 items-center">
+          <input
+            v-model="keywords"
+            class="h-[38px] min-w-0 flex-1 border border-border border-r-0 bg-surface px-3 text-[12px] text-text outline-none focus:border-primary"
+            type="text"
+            :placeholder="t('shell.searchPlaceholder')"
+            @keyup.enter="search"
+          />
+          <button
+            class="flex h-[38px] w-[38px] items-center justify-center border border-border bg-surface text-muted transition-colors hover:bg-primary hover:text-white"
+            type="button"
+            :aria-label="t('common.search')"
+            @click="search"
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+              <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z" />
+            </svg>
+          </button>
+        </div>
+
+        <div class="ml-7 flex h-[38px] items-center gap-5 border border-border px-5 text-[12px]">
+          <NuxtLink to="/user" class="relative text-muted no-underline transition-colors hover:text-primary">{{ t("shell.myMall") }}</NuxtLink>
+          <NuxtLink to="/cart" class="relative text-muted no-underline transition-colors hover:text-primary">
             {{ t("shell.myCart") }}
-            <span v-if="cart.count > 0" class="dot">{{ cart.count }}</span>
+            <span
+              v-if="cart.count > 0"
+              class="absolute -right-3 -top-3 rounded-sm bg-primary px-1 text-[11px] leading-4 text-white"
+            >{{ cart.count }}</span>
           </NuxtLink>
         </div>
       </div>
-      <div class="prefs">
-        <select :value="currency" :aria-label="t('common.currency')" @change="currency = ($event.target as HTMLSelectElement).value">
+
+      <div class="flex gap-2">
+        <select
+          :value="currency"
+          :aria-label="t('common.currency')"
+          class="h-[30px] min-w-[76px] rounded-md border border-border bg-surface px-2 text-[12px] text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
+          @change="currency = ($event.target as HTMLSelectElement).value"
+        >
           <option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
         </select>
-        <select :value="locale" :aria-label="t('common.language')" @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')">
+        <select
+          :value="locale"
+          :aria-label="t('common.language')"
+          class="h-[30px] min-w-[76px] rounded-md border border-border bg-surface px-2 text-[12px] text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
+          @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
+        >
           <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
         </select>
       </div>
     </div>
-    <nav class="nav">
-      <div class="w1200 nav-in">
+
+    <nav class="h-10 bg-[#2d2d2d] text-sm leading-10 text-white">
+      <div class="mx-auto flex max-w-mall px-4">
         <div
-          class="nav-cats"
+          class="relative w-[240px] cursor-pointer bg-primary pl-[15px] font-medium"
           @mouseenter="menuOpen = true"
           @mouseleave="menuOpen = false"
         >
           {{ t("shell.allCategories") }}
           <ShellCategoryMenu v-show="showMenu" />
         </div>
-        <ul class="nav-links">
-          <li><NuxtLink to="/">{{ t("shell.nav.home") }}</NuxtLink></li>
-          <li><NuxtLink to="/stores">{{ t("shell.nav.stores") }}</NuxtLink></li>
-          <li><NuxtLink to="/seckill">{{ t("shell.nav.seckill") }}</NuxtLink></li>
-          <li><NuxtLink to="/collective">{{ t("shell.nav.collective") }}</NuxtLink></li>
-          <li><NuxtLink to="/integral">{{ t("shell.nav.integral") }}</NuxtLink></li>
-          <li><NuxtLink to="/user">{{ t("shell.nav.help") }}</NuxtLink></li>
+        <ul class="flex pl-5">
+          <li><NuxtLink to="/" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.home") }}</NuxtLink></li>
+          <li><NuxtLink to="/stores" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.stores") }}</NuxtLink></li>
+          <li><NuxtLink to="/seckill" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.seckill") }}</NuxtLink></li>
+          <li><NuxtLink to="/collective" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.collective") }}</NuxtLink></li>
+          <li><NuxtLink to="/integral" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.integral") }}</NuxtLink></li>
+          <li><NuxtLink to="/user" class="block px-[30px] text-white no-underline transition-colors hover:bg-black">{{ t("shell.nav.help") }}</NuxtLink></li>
         </ul>
       </div>
     </nav>
   </header>
 </template>
-
-<style scoped>
-.hdr {
-  background: #fff;
-}
-.hdr-top {
-  display: flex;
-  align-items: center;
-  gap: 40px;
-  padding: 24px 0;
-}
-.logo {
-  font-size: 34px;
-  font-weight: 800;
-  color: var(--mall-red);
-  text-decoration: none;
-  letter-spacing: 1px;
-}
-.search-box {
-  display: flex;
-  align-items: center;
-}
-.search-input {
-  width: 434px;
-  height: 38px;
-  padding: 10px;
-  outline: 0;
-  border: 1px solid var(--mall-line);
-  border-right: none;
-  box-sizing: border-box;
-  font-size: 12px;
-}
-.search-btn {
-  border: 1px solid var(--mall-line);
-  width: 38px;
-  height: 38px;
-  background: #fff;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.search-btn:hover {
-  color: #fff;
-  background: var(--mall-nav);
-}
-.cart-links {
-  display: flex;
-  height: 38px;
-  border: 1px solid var(--mall-line);
-  margin-left: 30px;
-  box-sizing: border-box;
-  font-size: 12px;
-  line-height: 38px;
-  padding: 0 20px;
-  gap: 20px;
-}
-.cart-link {
-  position: relative;
-  color: inherit;
-  text-decoration: none;
-}
-.cart-link:hover {
-  color: var(--mall-red);
-}
-.dot {
-  position: absolute;
-  top: -12px;
-  right: -14px;
-  line-height: 16px;
-  background: var(--mall-red);
-  padding: 0 4px;
-  color: #fff;
-  border-radius: 4px;
-  font-size: 11px;
-}
-.prefs {
-  display: flex;
-  gap: 8px;
-}
-.prefs select {
-  height: 30px;
-  min-width: 76px;
-  padding: 0 6px;
-  border: 1px solid var(--mall-line);
-  background: #fff;
-  font-size: 12px;
-}
-.nav {
-  height: 40px;
-  background: var(--mall-nav);
-  font-size: 14px;
-  line-height: 40px;
-  color: #fff;
-}
-.nav-in {
-  display: flex;
-}
-.nav-cats {
-  position: relative;
-  cursor: pointer;
-  width: 240px;
-  background: var(--mall-red);
-  box-sizing: border-box;
-  padding-left: 15px;
-}
-.nav-links {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0 0 0 20px;
-}
-.nav-links a {
-  line-height: 40px;
-  padding: 0 30px;
-  color: #fff;
-  display: block;
-  text-decoration: none;
-}
-.nav-links a:hover {
-  background: #000;
-}
-</style>
diff --git a/apps/mall/components/shell/TopBar.vue b/apps/mall/components/shell/TopBar.vue
index 0ab59bb..55dfb15 100644
--- a/apps/mall/components/shell/TopBar.vue
+++ b/apps/mall/components/shell/TopBar.vue
@@ -4,86 +4,51 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="topbar">
-    <div class="w1200 topbar-in">
-      <ul class="left">
-        <li><NuxtLink to="/">{{ t("shell.officialSite") }}</NuxtLink></li>
-        <li>|</li>
-        <li><NuxtLink to="/">{{ t("shell.mallHome") }}</NuxtLink></li>
-        <li>|</li>
-        <li><NuxtLink to="/">{{ t("shell.contact") }}</NuxtLink></li>
-        <li>|</li>
-        <li><NuxtLink to="/">{{ t("shell.about") }}</NuxtLink></li>
-        <li>|</li>
-        <li class="city">{{ t("shell.city") }}</li>
+  <div class="h-[30px] border-b border-border bg-[#f9f9f9] text-[12px] leading-[30px] text-muted">
+    <div class="mx-auto flex h-full max-w-mall items-center justify-between px-4">
+      <ul class="flex items-center">
+        <li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.officialSite") }}</NuxtLink></li>
+        <li class="px-1 text-border">|</li>
+        <li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.mallHome") }}</NuxtLink></li>
+        <li class="px-1 text-border">|</li>
+        <li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.contact") }}</NuxtLink></li>
+        <li class="px-1 text-border">|</li>
+        <li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.about") }}</NuxtLink></li>
+        <li class="px-1 text-border">|</li>
+        <li class="px-1 text-primary">{{ t("shell.city") }}</li>
       </ul>
-      <ul class="right">
+      <ul class="flex items-center">
         <!-- The token lives in localStorage, so the server cannot know whether
              anyone is signed in. Rendering this branch client-only keeps the
              hydrated DOM in step with the server's logged-out markup; without
              it, validating the session before hydration reports mismatches. -->
         <ClientOnly>
           <template v-if="session.isLoggedIn">
-            <li>{{ t("shell.welcome") }}<NuxtLink to="/user" class="red">{{ session.user?.display_name }}</NuxtLink></li>
-            <li>|</li>
-            <li><NuxtLink to="/user">{{ t("shell.userCenter") }}</NuxtLink></li>
-            <li>|</li>
-            <li class="clickable" @click="session.logout()">{{ t("shell.logout") }}</li>
+            <li class="px-1">
+              {{ t("shell.welcome") }}
+              <NuxtLink to="/user" class="text-primary hover:text-primary-hover">{{ session.user?.display_name }}</NuxtLink>
+            </li>
+            <li class="px-1 text-border">|</li>
+            <li><NuxtLink to="/user" class="px-1 hover:text-primary">{{ t("shell.userCenter") }}</NuxtLink></li>
+            <li class="px-1 text-border">|</li>
+            <li class="cursor-pointer px-1 hover:text-primary" @click="session.logout()">{{ t("shell.logout") }}</li>
           </template>
           <template v-else>
-            <li><NuxtLink to="/login" class="red">{{ t("shell.login") }}</NuxtLink></li>
-            <li><NuxtLink to="/register">{{ t("shell.register") }}</NuxtLink></li>
+            <li><NuxtLink to="/login" class="px-1 text-primary hover:text-primary-hover">{{ t("shell.login") }}</NuxtLink></li>
+            <li><NuxtLink to="/register" class="px-1 hover:text-primary">{{ t("shell.register") }}</NuxtLink></li>
           </template>
           <template #fallback>
-            <li><NuxtLink to="/login" class="red">{{ t("shell.login") }}</NuxtLink></li>
-            <li><NuxtLink to="/register">{{ t("shell.register") }}</NuxtLink></li>
+            <li><NuxtLink to="/login" class="px-1 text-primary hover:text-primary-hover">{{ t("shell.login") }}</NuxtLink></li>
+            <li><NuxtLink to="/register" class="px-1 hover:text-primary">{{ t("shell.register") }}</NuxtLink></li>
           </template>
         </ClientOnly>
-        <li>|</li>
-        <li><NuxtLink to="/stores" class="red">{{ t("shell.sellerJoin") }}</NuxtLink></li>
-        <li>|</li>
-        <li><NuxtLink to="/">{{ t("shell.mobile") }}</NuxtLink></li>
-        <li>|</li>
-        <li><NuxtLink to="/">{{ t("shell.appDownload") }}</NuxtLink></li>
+        <li class="px-1 text-border">|</li>
+        <li><NuxtLink to="/stores" class="px-1 text-primary hover:text-primary-hover">{{ t("shell.sellerJoin") }}</NuxtLink></li>
+        <li class="px-1 text-border">|</li>
+        <li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.mobile") }}</NuxtLink></li>
+        <li class="px-1 text-border">|</li>
+        <li><NuxtLink to="/" class="px-1 hover:text-primary">{{ t("shell.appDownload") }}</NuxtLink></li>
       </ul>
     </div>
   </div>
 </template>
-
-<style scoped>
-.topbar {
-  border-bottom: 1px solid var(--mall-line);
-  height: 30px;
-  background: #f9f9f9;
-  font-size: 12px;
-  line-height: 30px;
-}
-.topbar-in {
-  display: flex;
-  justify-content: space-between;
-}
-ul {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-li {
-  padding: 0 5px;
-}
-a {
-  color: inherit;
-  text-decoration: none;
-}
-a:hover,
-.clickable:hover {
-  color: var(--mall-red);
-  cursor: pointer;
-}
-.red {
-  color: var(--mall-red);
-}
-.city {
-  color: var(--mall-red);
-}
-</style>
diff --git a/apps/mall/components/ui/Breadcrumb.vue b/apps/mall/components/ui/Breadcrumb.vue
index 6dab77c..5886c7d 100644
--- a/apps/mall/components/ui/Breadcrumb.vue
+++ b/apps/mall/components/ui/Breadcrumb.vue
@@ -3,33 +3,11 @@ defineProps<{ items: { label: string; to?: string }[] }>();
 </script>
 
 <template>
-  <nav class="crumbs w1200" aria-label="breadcrumb">
+  <nav aria-label="breadcrumb" class="mx-auto my-5 max-w-mall px-4 text-[13px] text-muted">
     <template v-for="(item, i) in items" :key="i">
-      <NuxtLink v-if="item.to" :to="item.to">{{ item.label }}</NuxtLink>
-      <span v-else class="here">{{ item.label }}</span>
-      <span v-if="i < items.length - 1" class="sep">/</span>
+      <NuxtLink v-if="item.to" :to="item.to" class="no-underline transition-colors hover:text-primary">{{ item.label }}</NuxtLink>
+      <span v-else class="text-text">{{ item.label }}</span>
+      <span v-if="i < items.length - 1" class="mx-2 text-muted/60">/</span>
     </template>
   </nav>
 </template>
-
-<style scoped>
-.crumbs {
-  margin: 20px auto;
-  font-size: 13px;
-  color: var(--mall-muted);
-}
-a {
-  color: var(--mall-muted);
-  text-decoration: none;
-}
-a:hover {
-  color: var(--mall-red);
-}
-.sep {
-  margin: 0 8px;
-  color: var(--mall-faint);
-}
-.here {
-  color: var(--mall-ink);
-}
-</style>
diff --git a/apps/mall/components/ui/Carousel.vue b/apps/mall/components/ui/Carousel.vue
index 0a03b9d..0592db3 100644
--- a/apps/mall/components/ui/Carousel.vue
+++ b/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>
diff --git a/apps/mall/components/ui/EmptyState.vue b/apps/mall/components/ui/EmptyState.vue
index 08c9ac7..14eb390 100644
--- a/apps/mall/components/ui/EmptyState.vue
+++ b/apps/mall/components/ui/EmptyState.vue
@@ -3,20 +3,8 @@ withDefaults(defineProps<{ text?: string }>(), { text: "" });
 </script>
 
 <template>
-  <div class="empty">
-    <div class="icon">∅</div>
-    <p>{{ text || $t("common.empty") }}</p>
+  <div class="py-[60px] text-center text-muted/70">
+    <div class="mb-2.5 text-[40px] leading-none">∅</div>
+    <p class="m-0">{{ text || $t("common.empty") }}</p>
   </div>
 </template>
-
-<style scoped>
-.empty {
-  padding: 60px 0;
-  text-align: center;
-  color: var(--mall-faint);
-}
-.icon {
-  font-size: 40px;
-  margin-bottom: 10px;
-}
-</style>
diff --git a/apps/mall/components/ui/Modal.vue b/apps/mall/components/ui/Modal.vue
index 12a51e2..bc494cb 100644
--- a/apps/mall/components/ui/Modal.vue
+++ b/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>
diff --git a/apps/mall/components/ui/Pagination.vue b/apps/mall/components/ui/Pagination.vue
index ea04352..77a08dc 100644
--- a/apps/mall/components/ui/Pagination.vue
+++ b/apps/mall/components/ui/Pagination.vue
@@ -18,42 +18,26 @@ function go(p: number): void {
 </script>
 
 <template>
-  <nav v-if="pages > 1" class="pager">
-    <button type="button" :disabled="page <= 1" @click="go(page - 1)">{{ $t("common.prev") }}</button>
+  <nav v-if="pages > 1" class="my-[30px] flex justify-center gap-1.5">
+    <button
+      type="button"
+      class="h-[34px] min-w-[34px] rounded-sm border border-border bg-surface px-2 text-[13px] transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+      :disabled="page <= 1"
+      @click="go(page - 1)"
+    >{{ $t("common.prev") }}</button>
     <button
       v-for="p in window_"
       :key="p"
       type="button"
-      :class="{ on: p === page }"
+      class="h-[34px] min-w-[34px] rounded-sm border border-border px-2 text-[13px] transition-colors"
+      :class="p === page ? 'border-primary bg-primary text-white' : 'bg-surface hover:border-primary hover:text-primary'"
       @click="go(p)"
     >{{ p }}</button>
-    <button type="button" :disabled="page >= pages" @click="go(page + 1)">{{ $t("common.next") }}</button>
+    <button
+      type="button"
+      class="h-[34px] min-w-[34px] rounded-sm border border-border bg-surface px-2 text-[13px] transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+      :disabled="page >= pages"
+      @click="go(page + 1)"
+    >{{ $t("common.next") }}</button>
   </nav>
 </template>
-
-<style scoped>
-.pager {
-  display: flex;
-  justify-content: center;
-  gap: 6px;
-  margin: 30px 0;
-}
-button {
-  min-width: 34px;
-  height: 34px;
-  border: 1px solid var(--mall-line-dark);
-  background: #fff;
-  font-size: 13px;
-  cursor: pointer;
-  border-radius: var(--mall-radius);
-}
-button.on {
-  background: var(--mall-red);
-  border-color: var(--mall-red);
-  color: #fff;
-}
-button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-</style>
diff --git a/apps/mall/components/ui/ProductCard.vue b/apps/mall/components/ui/ProductCard.vue
index ad62ec2..b669ad3 100644
--- a/apps/mall/components/ui/ProductCard.vue
+++ b/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>
diff --git a/apps/mall/components/ui/QtyStepper.vue b/apps/mall/components/ui/QtyStepper.vue
index 42530ea..66e9ac6 100644
--- a/apps/mall/components/ui/QtyStepper.vue
+++ b/apps/mall/components/ui/QtyStepper.vue
@@ -9,49 +9,26 @@ function set(v: number): void {
 </script>
 
 <template>
-  <div class="stepper">
-    <button type="button" :disabled="modelValue <= 1" @click="set(modelValue - 1)">−</button>
+  <div class="inline-flex overflow-hidden rounded-md border border-border">
+    <button
+      type="button"
+      class="h-8 w-[30px] border-0 bg-bg text-sm transition-colors hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
+      :disabled="modelValue <= 1"
+      @click="set(modelValue - 1)"
+    >−</button>
     <input
       :value="modelValue"
       type="number"
       :min="1"
       :max="max"
+      class="h-8 w-12 [appearance:textfield] border-x border-border bg-surface text-center text-[13px] text-text outline-none focus:border-primary"
       @change="set(Number(($event.target as HTMLInputElement).value))"
     />
-    <button type="button" :disabled="modelValue >= max" @click="set(modelValue + 1)">+</button>
+    <button
+      type="button"
+      class="h-8 w-[30px] border-0 bg-bg text-sm transition-colors hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
+      :disabled="modelValue >= max"
+      @click="set(modelValue + 1)"
+    >+</button>
   </div>
 </template>
-
-<style scoped>
-.stepper {
-  display: inline-flex;
-  border: 1px solid var(--mall-line-dark);
-  border-radius: var(--mall-radius);
-  overflow: hidden;
-}
-button {
-  width: 30px;
-  height: 32px;
-  border: 0;
-  background: #fafafa;
-  cursor: pointer;
-  font-size: 14px;
-}
-button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-input {
-  width: 48px;
-  height: 32px;
-  border: 0;
-  border-left: 1px solid var(--mall-line);
-  border-right: 1px solid var(--mall-line);
-  text-align: center;
-  font-size: 13px;
-  outline: none;
-}
-input::-webkit-inner-spin-button {
-  display: none;
-}
-</style>
diff --git a/apps/mall/components/ui/RatingStars.vue b/apps/mall/components/ui/RatingStars.vue
index e2171cc..93192ee 100644
--- a/apps/mall/components/ui/RatingStars.vue
+++ b/apps/mall/components/ui/RatingStars.vue
@@ -4,16 +4,7 @@ const stars = computed(() => [1, 2, 3, 4, 5].map((i) => i <= Math.round(props.va
 </script>
 
 <template>
-  <span class="stars" :style="{ fontSize: `${size}px` }">
-    <span v-for="(on, i) in stars" :key="i" :class="{ on }">★</span>
+  <span :style="{ fontSize: `${size}px` }">
+    <span v-for="(on, i) in stars" :key="i" :class="on ? 'text-primary' : 'text-[#ddd]'">★</span>
   </span>
 </template>
-
-<style scoped>
-.stars span {
-  color: #ddd;
-}
-.stars span.on {
-  color: var(--mall-red);
-}
-</style>
diff --git a/apps/mall/components/ui/StepBar.vue b/apps/mall/components/ui/StepBar.vue
index f10bf8e..b972d48 100644
--- a/apps/mall/components/ui/StepBar.vue
+++ b/apps/mall/components/ui/StepBar.vue
@@ -3,48 +3,18 @@ defineProps<{ steps: string[]; active: number }>();
 </script>
 
 <template>
-  <ol class="steps">
-    <li v-for="(s, i) in steps" :key="s" :class="{ done: i < active, on: i === active }">
-      <span class="n">{{ i + 1 }}</span>
-      <span class="label">{{ s }}</span>
+  <ol class="mb-5 flex list-none border border-border bg-bg py-3.5">
+    <li
+      v-for="(s, i) in steps"
+      :key="s"
+      class="flex-1 text-center text-[13px] text-muted/70"
+      :class="i === active ? 'font-semibold text-primary' : ''"
+    >
+      <span
+        class="mr-2 inline-block h-[22px] w-[22px] rounded-full text-center text-[12px] leading-[22px] text-white"
+        :class="i < active ? 'bg-success' : i === active ? 'bg-primary' : 'bg-[#ddd]'"
+      >{{ i + 1 }}</span>
+      <span>{{ s }}</span>
     </li>
   </ol>
 </template>
-
-<style scoped>
-.steps {
-  display: flex;
-  list-style: none;
-  margin: 0 0 20px;
-  padding: 14px 0;
-  background: #fafafa;
-  border: 1px solid var(--mall-line);
-}
-li {
-  flex: 1;
-  text-align: center;
-  color: var(--mall-faint);
-  font-size: 13px;
-}
-.n {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  line-height: 22px;
-  border-radius: 50%;
-  background: #ddd;
-  color: #fff;
-  margin-right: 8px;
-  font-size: 12px;
-}
-li.on {
-  color: var(--mall-red);
-  font-weight: 600;
-}
-li.on .n {
-  background: var(--mall-red);
-}
-li.done .n {
-  background: var(--mall-green);
-}
-</style>
diff --git a/apps/mall/components/ui/Tabs.vue b/apps/mall/components/ui/Tabs.vue
index 3b15753..4c23936 100644
--- a/apps/mall/components/ui/Tabs.vue
+++ b/apps/mall/components/ui/Tabs.vue
@@ -4,42 +4,19 @@ const emit = defineEmits<{ "update:modelValue": [key: string] }>();
 </script>
 
 <template>
-  <div class="tabs">
-    <div class="tab-head">
+  <div>
+    <div class="flex border-b border-border">
       <button
         v-for="tab in tabs"
         :key="tab.key"
         type="button"
-        :class="{ on: tab.key === modelValue }"
+        class="border-0 border-b-2 border-transparent bg-transparent px-6 py-3 text-sm text-muted transition-colors"
+        :class="tab.key === modelValue ? 'border-primary font-semibold text-primary' : 'hover:text-primary'"
         @click="emit('update:modelValue', tab.key)"
       >{{ tab.label }}</button>
     </div>
-    <div class="tab-body">
+    <div class="py-5">
       <slot :active="modelValue" />
     </div>
   </div>
 </template>
-
-<style scoped>
-.tab-head {
-  display: flex;
-  border-bottom: 1px solid var(--mall-line);
-}
-.tab-head button {
-  border: 0;
-  background: none;
-  padding: 12px 24px;
-  font-size: 14px;
-  cursor: pointer;
-  color: var(--mall-muted);
-  border-bottom: 2px solid transparent;
-}
-.tab-head button.on {
-  color: var(--mall-red);
-  border-bottom-color: var(--mall-red);
-  font-weight: 600;
-}
-.tab-body {
-  padding: 20px 0;
-}
-</style>
diff --git a/apps/mall/nuxt.config.ts b/apps/mall/nuxt.config.ts
index 6d70c02..837f0ef 100644
--- a/apps/mall/nuxt.config.ts
+++ b/apps/mall/nuxt.config.ts
@@ -1,6 +1,9 @@
+import tailwindcss from "@tailwindcss/vite";
+
 export default defineNuxtConfig({
-  modules: ["@pinia/nuxt", "@nuxtjs/i18n"],
-  css: ["@vmall/shared/ui.css", "~/assets/mall.css"],
+  modules: ["@pinia/nuxt", "@nuxtjs/i18n", "@vmall/ui/nuxt"],
+  css: ["@vmall/shared/theme.css"],
+  vite: { plugins: [tailwindcss()] },
   devtools: { enabled: false },
   devServer: { port: 3000 },
   runtimeConfig: {
diff --git a/apps/mall/package.json b/apps/mall/package.json
index ae6be9d..f94b78c 100644
--- a/apps/mall/package.json
+++ b/apps/mall/package.json
@@ -14,6 +14,11 @@
     "nuxt": "^3.15.4",
     "pinia": "^2.3.1",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "@vmall/ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "tailwindcss": "^4.1.13"
   }
 }
diff --git a/apps/mall/pages/cart.vue b/apps/mall/pages/cart.vue
index a2a0d4d..a44612e 100644
--- a/apps/mall/pages/cart.vue
+++ b/apps/mall/pages/cart.vue
@@ -122,25 +122,25 @@ onMounted(() => void loadCart());
 </script>
 
 <template>
-  <div class="transaction-page cart-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="0" />
-      <header class="page-heading">
-        <h1>{{ t("cart.title") }}</h1>
+      <header class="mb-4 flex items-center">
+        <h1 class="m-0 text-xl font-medium">{{ t("cart.title") }}</h1>
       </header>
 
-      <p v-if="error" class="error-message">{{ error }}</p>
+      <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 && items.length > 0">
-        <section v-for="group in groups" :key="group.shopId" class="shop-group mpanel">
-          <header class="shop-heading">
-            <span class="shop-label">{{ t("cart.shop") }}</span>
+        <VCard v-for="group in groups" :key="group.shopId" :padded="false" class="mb-4 overflow-hidden">
+          <header class="flex items-center gap-2 border-b border-border px-4 py-3 text-sm">
+            <span class="text-muted">{{ t("cart.shop") }}</span>
             <strong>{{ pick(group.shopName, locale) || t("cart.unknownStore") }}</strong>
           </header>
-          <table class="mtable cart-table">
+          <VTable>
             <thead>
               <tr>
-                <th class="check-col" />
-                <th class="product-col">{{ t("cart.product") }}</th>
+                <th class="w-10" />
+                <th>{{ t("cart.product") }}</th>
                 <th>{{ t("cart.spec") }}</th>
                 <th>{{ t("cart.unitPrice") }}</th>
                 <th>{{ t("cart.quantity") }}</th>
@@ -150,19 +150,22 @@ onMounted(() => void loadCart());
             </thead>
             <tbody>
               <tr v-for="item in group.items" :key="item.sku_id">
-                <td class="check-col">
+                <td>
                   <input
                     :checked="Boolean(selected[item.sku_id])"
+                    class="h-4 w-4 accent-primary"
                     type="checkbox"
                     :aria-label="pick(item.product_name, locale)"
                     @change="onSelectionChange(item.sku_id, $event)"
                   />
                 </td>
-                <td class="product-cell">
-                  <img :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
-                  <span>{{ pick(item.product_name, locale) }}</span>
+                <td>
+                  <div class="flex items-center gap-3">
+                    <img class="h-14 w-14 shrink-0 object-cover" :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
+                    <span>{{ pick(item.product_name, locale) }}</span>
+                  </div>
                 </td>
-                <td class="muted">{{ item.sku_code }}</td>
+                <td class="text-muted">{{ item.sku_code }}</td>
                 <td><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></td>
                 <td>
                   <UiQtyStepper
@@ -171,181 +174,36 @@ onMounted(() => void loadCart());
                     @update:model-value="updateQuantity(item, $event)"
                   />
                 </td>
-                <td class="price-strong">
-                  <PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" />
-                </td>
+                <td class="font-semibold text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" /></td>
                 <td>
-                  <button type="button" class="text-button" :disabled="mutating" @click="removeItem(item)">
+                  <button type="button" class="cursor-pointer text-sm text-primary hover:text-primary-hover disabled:opacity-50" :disabled="mutating" @click="removeItem(item)">
                     {{ t("cart.remove") }}
                   </button>
                 </td>
               </tr>
             </tbody>
-          </table>
-        </section>
+          </VTable>
+        </VCard>
 
-        <footer class="cart-footer mpanel">
-          <label class="select-all">
-            <input :checked="allSelected" type="checkbox" @change="setAllSelected(($event.target as HTMLInputElement).checked)" />
+        <footer class="mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border border-border bg-surface p-4 shadow-sm">
+          <label class="flex items-center gap-2 text-sm">
+            <input :checked="allSelected" class="h-4 w-4 accent-primary" type="checkbox" @change="setAllSelected(($event.target as HTMLInputElement).checked)" />
             <span>{{ t("cart.selectAll") }}</span>
           </label>
-          <span class="selected-count">{{ t("cart.selectedCount", { n: selectedItems.length }) }}</span>
-          <span class="total-label">{{ t("cart.subtotal") }}:</span>
-          <strong class="total-price"><PriceText :amount-minor="selectedTotalMinor" :currency="selectedCurrency" /></strong>
-          <button class="mbtn red checkout-button" type="button" :disabled="selectedItems.length === 0 || mutating" @click="goToCheckout">
-            {{ t("cart.checkout") }}
-          </button>
+          <span class="text-sm text-muted">{{ t("cart.selectedCount", { n: selectedItems.length }) }}</span>
+          <span class="text-sm">{{ t("cart.subtotal") }}:</span>
+          <strong class="text-lg text-primary"><PriceText :amount-minor="selectedTotalMinor" :currency="selectedCurrency" /></strong>
+          <VBtn variant="primary" type="button" :disabled="selectedItems.length === 0 || mutating" @click="goToCheckout">{{ t("cart.checkout") }}</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('cart.empty')" />
-        <NuxtLink class="mbtn red" to="/">{{ t("cart.continueShopping") }}</NuxtLink>
-      </div>
-      <div v-else class="loading-state">{{ $t("common.loading") }}</div>
+        <NuxtLink class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover" to="/">{{ t("cart.continueShopping") }}</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 {
-  display: flex;
-  align-items: center;
-  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;
-}
-.shop-group {
-  margin-bottom: 16px;
-  padding: 0;
-  overflow: hidden;
-}
-.shop-heading {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--mall-line);
-  font-size: 14px;
-}
-.shop-label {
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.cart-table {
-  margin: 0;
-  width: 100%;
-}
-.cart-table th,
-.cart-table td {
-  padding: 14px 10px;
-  vertical-align: middle;
-}
-.cart-table th:first-child,
-.cart-table td:first-child {
-  padding-left: 18px;
-}
-.cart-table th:last-child,
-.cart-table td:last-child {
-  padding-right: 18px;
-}
-.check-col {
-  width: 42px;
-  text-align: center;
-}
-.product-col {
-  width: 34%;
-}
-.product-cell {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-height: 60px;
-  line-height: 1.5;
-}
-.product-cell img {
-  width: 60px;
-  height: 60px;
-  flex: 0 0 60px;
-  object-fit: cover;
-  border: 1px solid var(--mall-line);
-  background: #fff;
-}
-.muted {
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.price-strong,
-.total-price {
-  color: var(--mall-red);
-  font-weight: 600;
-}
-.text-button {
-  border: 0;
-  background: transparent;
-  color: var(--mall-muted);
-  cursor: pointer;
-  padding: 4px;
-}
-.text-button:hover {
-  color: var(--mall-red);
-}
-.text-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.cart-footer {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  padding: 14px 18px;
-}
-.select-all {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  cursor: pointer;
-}
-.selected-count {
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.total-label {
-  margin-left: auto;
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.total-price {
-  font-size: 18px;
-}
-.checkout-button {
-  min-width: 112px;
-}
-.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>
+
diff --git a/apps/mall/pages/checkout/index.vue b/apps/mall/pages/checkout/index.vue
index 4729584..c47917d 100644
--- a/apps/mall/pages/checkout/index.vue
+++ b/apps/mall/pages/checkout/index.vue
@@ -176,296 +176,83 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="transaction-page checkout-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="1" />
-      <header class="page-heading">
-        <h1>{{ t("checkout.title") }}</h1>
-      </header>
+      <header class="mb-4"><h1 class="m-0 text-xl font-medium">{{ t("checkout.title") }}</h1></header>
 
-      <p v-if="error" class="error-message">{{ error }}</p>
+      <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 && items.length > 0">
-        <section class="mpanel address-panel">
-          <h2 class="section-title">{{ t("checkout.address") }}</h2>
-          <div v-if="addresses.length > 0" class="address-list">
+        <VCard class="mb-4 p-5">
+          <h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.address") }}</h2>
+          <div v-if="addresses.length > 0" class="grid gap-2">
             <label
               v-for="address in addresses"
               :key="address.id"
-              class="address-option"
-              :class="{ selected: address.id === selectedAddressId }"
+              class="flex cursor-pointer items-start gap-3 rounded-md border border-border p-3 text-sm has-[:checked]:border-primary has-[:checked]:bg-primary-soft"
             >
-              <input v-model="selectedAddressId" type="radio" name="shipping-address" :value="address.id" />
-              <span class="address-main">
-                <strong>{{ address.recipient }}</strong>
-                <span>{{ address.phone }}</span>
-                <span>{{ address.region }} {{ address.city }} {{ address.line1 }} {{ address.postal_code }}</span>
+              <input v-model="selectedAddressId" class="mt-1 h-4 w-4 accent-primary" type="radio" name="shipping-address" :value="address.id" />
+              <span class="flex min-w-0 flex-1 flex-col gap-1">
+                <span class="flex flex-wrap gap-2"><strong>{{ address.recipient }}</strong><span>{{ address.phone }}</span></span>
+                <span class="text-muted">{{ address.region }} {{ address.city }} {{ address.line1 }} {{ address.postal_code }}</span>
               </span>
-              <span v-if="address.is_default" class="default-tag">{{ t("checkout.defaultAddress") }}</span>
+              <VBadge v-if="address.is_default" tone="blue">{{ t("checkout.defaultAddress") }}</VBadge>
             </label>
           </div>
-          <div v-else class="manual-form">
-            <p class="muted">{{ t("checkout.noSavedAddress") }}</p>
-            <div class="manual-grid">
-              <input v-model.trim="manual.recipient" class="minput" type="text" :placeholder="t('user.recipient')" />
-              <input v-model.trim="manual.phone" class="minput" type="text" :placeholder="t('user.phone')" />
-              <input v-model.trim="manual.country" class="minput" type="text" :placeholder="t('user.country')" />
-              <input v-model.trim="manual.region" class="minput" type="text" :placeholder="t('user.region')" />
-              <input v-model.trim="manual.city" class="minput" type="text" :placeholder="t('user.city')" />
-              <input v-model.trim="manual.postal_code" class="minput" type="text" :placeholder="t('user.postalCode')" />
-              <input v-model.trim="manual.line1" class="minput span-2" type="text" :placeholder="t('user.line1')" />
+          <div v-else>
+            <p class="mb-3 text-sm text-muted">{{ t("checkout.noSavedAddress") }}</p>
+            <div class="grid gap-3 sm:grid-cols-2">
+              <VField :label="t('user.recipient')"><VInput v-model.trim="manual.recipient" type="text" :placeholder="t('user.recipient')" /></VField>
+              <VField :label="t('user.phone')"><VInput v-model.trim="manual.phone" type="text" :placeholder="t('user.phone')" /></VField>
+              <VField :label="t('user.country')"><VInput v-model.trim="manual.country" type="text" :placeholder="t('user.country')" /></VField>
+              <VField :label="t('user.region')"><VInput v-model.trim="manual.region" type="text" :placeholder="t('user.region')" /></VField>
+              <VField :label="t('user.city')"><VInput v-model.trim="manual.city" type="text" :placeholder="t('user.city')" /></VField>
+              <VField :label="t('user.postalCode')"><VInput v-model.trim="manual.postal_code" type="text" :placeholder="t('user.postalCode')" /></VField>
+              <VField class="sm:col-span-2" :label="t('user.line1')"><VInput v-model.trim="manual.line1" type="text" :placeholder="t('user.line1')" /></VField>
             </div>
           </div>
-        </section>
+        </VCard>
 
-        <section class="mpanel order-panel">
-          <h2 class="section-title">{{ t("checkout.orderPreview") }}</h2>
-          <div v-for="group in groups" :key="group.shopId" class="order-group">
-            <header class="shop-heading">
-              <span>{{ pick(group.shopName, locale) || t("checkout.shop") }}</span>
-            </header>
-            <div v-for="item in group.items" :key="item.sku_id" class="order-item">
-              <img :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
-              <div class="item-info">
-                <strong>{{ pick(item.product_name, locale) }}</strong>
-                <span class="muted">{{ item.sku_code }}</span>
-              </div>
+        <VCard class="mb-4 p-5">
+          <h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.orderPreview") }}</h2>
+          <div v-for="group in groups" :key="group.shopId" class="border-b border-border pb-3 last:border-b-0 last:pb-0">
+            <header class="border-b border-border py-2 text-sm font-medium">{{ pick(group.shopName, locale) || t("checkout.shop") }}</header>
+            <div v-for="item in group.items" :key="item.sku_id" class="grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b border-bg py-3 last:border-b-0">
+              <img class="h-14 w-14 object-cover" :src="imageFor(item)" :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></div>
               <PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" />
-              <span class="qty">× {{ item.qty }}</span>
-              <strong class="line-total">
-                <PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.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="item.currency" /></strong>
             </div>
-            <div v-if="!groupIntent && couponsForShop(group.shopId).length > 0" class="coupon-picker">
-              <span class="coupon-label">{{ t("checkout.coupon") }}</span>
-              <select v-model="selectedCoupon[group.shopId]" class="minput coupon-select">
+            <div v-if="!groupIntent && couponsForShop(group.shopId).length > 0" class="flex flex-wrap items-center gap-3 pt-3 text-sm">
+              <span class="text-muted">{{ t("checkout.coupon") }}</span>
+              <select v-model="selectedCoupon[group.shopId]" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
                 <option value="">{{ t("checkout.noCoupon") }}</option>
-                <option v-for="coupon in couponsForShop(group.shopId)" :key="coupon.id" :value="coupon.id">
-                  {{ pick(coupon.title, locale) }}
-                </option>
+                <option v-for="coupon in couponsForShop(group.shopId)" :key="coupon.id" :value="coupon.id">{{ pick(coupon.title, locale) }}</option>
               </select>
-              <span v-if="selectedCouponFor(group.shopId)" class="coupon-value">
-                −
-                <PriceText
-                  :amount-minor="selectedCouponFor(group.shopId)?.amount_minor ?? 0"
-                  :currency="selectedCouponFor(group.shopId)?.currency ?? sourceCurrency"
-                />
-              </span>
+              <span v-if="selectedCouponFor(group.shopId)" class="text-danger">− <PriceText :amount-minor="selectedCouponFor(group.shopId)?.amount_minor ?? 0" :currency="selectedCouponFor(group.shopId)?.currency ?? sourceCurrency" /></span>
             </div>
           </div>
-        </section>
+        </VCard>
 
-        <section class="mpanel remark-panel">
-          <label class="section-title" for="order-remark">{{ t("checkout.remark") }}</label>
-          <textarea id="order-remark" v-model="remark" class="remark-input" :placeholder="t('checkout.remarkPlaceholder')" rows="3" />
-        </section>
+        <VCard class="mb-4 p-5">
+          <label class="mb-1 block text-sm font-medium" for="order-remark">{{ t("checkout.remark") }}</label>
+          <textarea id="order-remark" v-model="remark" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" :placeholder="t('checkout.remarkPlaceholder')" rows="3" />
+        </VCard>
 
-        <footer class="submit-bar mpanel">
-          <span class="total-label">{{ t("checkout.total") }}:</span>
-          <strong class="total-price"><PriceText :amount-minor="totalMinor" :currency="sourceCurrency" /></strong>
-          <button class="mbtn red" type="button" :disabled="submitting" @click="submitOrder">
-            {{ t("checkout.submit") }}
-          </button>
+        <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.total") }}:</span>
+          <strong class="text-lg text-primary"><PriceText :amount-minor="totalMinor" :currency="sourceCurrency" /></strong>
+          <VBtn variant="primary" type="button" :disabled="submitting" @click="submitOrder">{{ t("checkout.submit") }}</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.noItems')" />
-        <NuxtLink class="mbtn gray" to="/cart">{{ t("checkout.backToCart") }}</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="/cart">{{ t("checkout.backToCart") }}</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;
-}
-.mpanel {
-  margin-bottom: 16px;
-}
-.section-title {
-  display: block;
-  margin: 0;
-  padding: 16px 18px;
-  border-bottom: 1px solid var(--mall-line);
-  font-size: 15px;
-  font-weight: 600;
-}
-.address-list {
-  padding: 8px 18px 16px;
-}
-.address-option {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 8px;
-  padding: 13px 14px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  line-height: 1.5;
-}
-.address-option:hover,
-.address-option.selected {
-  border-color: var(--mall-red);
-  background: #fffafa;
-}
-.address-main {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex: 1;
-  min-width: 0;
-}
-.address-main span:last-child {
-  color: var(--mall-muted);
-}
-.manual-form {
-  padding: 8px 18px 16px;
-}
-.manual-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-  margin-top: 10px;
-}
-.manual-grid .span-2 {
-  grid-column: span 2;
-}
-.default-tag {
-  color: var(--mall-red);
-  font-size: 12px;
-}
-.order-panel {
-  padding: 0;
-  overflow: hidden;
-}
-.order-group + .order-group {
-  border-top: 1px solid var(--mall-line);
-}
-.shop-heading {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 18px;
-  color: #444;
-  font-size: 13px;
-}
-.shop-heading img {
-  width: 28px;
-  height: 28px;
-  object-fit: cover;
-  border-radius: 50%;
-}
-.order-item {
-  display: grid;
-  grid-template-columns: 56px minmax(0, 1fr) 120px 64px 130px;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 18px;
-  border-top: 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;
-}
-.coupon-picker {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 18px 14px;
-  border-top: 1px solid #f5f5f5;
-}
-.coupon-label {
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.coupon-select {
-  max-width: 320px;
-}
-.coupon-value {
-  color: var(--mall-red);
-  font-size: 13px;
-}
-.remark-panel {
-  padding: 0 0 16px;
-}.remark-input {
-  display: block;
-  box-sizing: border-box;
-  width: calc(100% - 36px);
-  margin: 14px 18px 0;
-  resize: vertical;
-  border: 1px solid var(--mall-line-dark);
-  padding: 10px 12px;
-  font: inherit;
-  outline: none;
-}
-.remark-input:focus {
-  border-color: var(--mall-red);
-}
-.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>
+
diff --git a/apps/mall/pages/checkout/pay.vue b/apps/mall/pages/checkout/pay.vue
index 75cbe12..a05c0a1 100644
--- a/apps/mall/pages/checkout/pay.vue
+++ b/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>
+
diff --git a/apps/mall/pages/checkout/success.vue b/apps/mall/pages/checkout/success.vue
index 629bdfb..d59c388 100644
--- a/apps/mall/pages/checkout/success.vue
+++ b/apps/mall/pages/checkout/success.vue
@@ -12,57 +12,20 @@ const stepLabels = computed(() => [
 </script>
 
 <template>
-  <div class="transaction-page success-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="3" />
-      <section class="mpanel success-panel">
-        <div class="success-icon" aria-hidden="true">✓</div>
-        <h1>{{ t("checkout.successTitle") }}</h1>
-        <p>{{ t("checkout.successMessage") }}</p>
-        <div class="success-actions">
-          <NuxtLink class="mbtn red" to="/user/orders">{{ t("checkout.viewOrders") }}</NuxtLink>
-          <NuxtLink class="mbtn gray" to="/">{{ t("checkout.continueShopping") }}</NuxtLink>
+      <VCard class="px-5 py-16 text-center">
+        <div class="mx-auto flex h-[72px] w-[72px] items-center justify-center rounded-full bg-success text-5xl leading-none text-white" aria-hidden="true">✓</div>
+        <h1 class="mb-2 mt-5 text-2xl font-medium">{{ t("checkout.successTitle") }}</h1>
+        <p class="m-0 text-muted">{{ t("checkout.successMessage") }}</p>
+        <div class="mt-7 flex justify-center gap-3">
+          <NuxtLink class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover" to="/user/orders">{{ t("checkout.viewOrders") }}</NuxtLink>
+          <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.continueShopping") }}</NuxtLink>
         </div>
-      </section>
+      </VCard>
     </div>
   </div>
 </template>
 
-<style scoped>
-.transaction-page {
-  padding: 24px 0 80px;
-  background: #f5f5f5;
-  min-height: 60vh;
-}
-.success-panel {
-  padding: 60px 20px 70px;
-  text-align: center;
-}
-.success-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 72px;
-  height: 72px;
-  border-radius: 50%;
-  background: var(--mall-green);
-  color: #fff;
-  font-size: 48px;
-  line-height: 1;
-}
-.success-panel h1 {
-  margin: 22px 0 10px;
-  font-size: 24px;
-  font-weight: 500;
-}
-.success-panel p {
-  margin: 0;
-  color: var(--mall-muted);
-}
-.success-actions {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  margin-top: 28px;
-}
-</style>
+
diff --git a/apps/mall/pages/collective.vue b/apps/mall/pages/collective.vue
index a6c1cd8..0061910 100644
--- a/apps/mall/pages/collective.vue
+++ b/apps/mall/pages/collective.vue
@@ -80,222 +80,38 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="collective-page">
+  <div class="min-h-screen bg-bg pb-14 font-sans text-text">
     <UiBreadcrumb :items="breadcrumb" />
-    <section class="w1200 marketing-section">
-      <img class="marketing-banner" src="/mock/collective-banner.svg" :alt="t('marketing.collectiveBannerAlt')" />
-      <header class="section-heading">
-        <h1>{{ t("marketing.collectiveTitle") }}</h1>
-      </header>
-      <p v-if="error" class="collective-error" role="alert">{{ error }}</p>
-      <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
-      <div v-else-if="activities.length" class="collective-grid">
-        <article v-for="activity in activities" :key="activity.id" class="collective-card hover-lift">
-          <NuxtLink :to="`/goods/${activity.product_slug}`" class="product-image">
-            <img :src="activity.image || '/mock/product-1.svg'" :alt="pick(activity.product_name, locale)" loading="lazy" />
+    <section class="mx-auto max-w-mall bg-surface px-4">
+      <img class="h-[350px] w-full object-cover" src="/mock/collective-banner.svg" :alt="t('marketing.collectiveBannerAlt')" />
+      <header class="mt-5 border border-border bg-bg px-4 py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-[17px] font-medium">{{ t("marketing.collectiveTitle") }}</h1></header>
+      <p v-if="error" class="my-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger" role="alert">{{ error }}</p>
+      <div v-if="loading" class="py-6 text-muted">{{ t("common.loading") }}</div>
+      <div v-else-if="activities.length" class="grid gap-4 py-5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
+        <VCard v-for="activity in activities" :key="activity.id" :padded="false" class="min-w-0 overflow-hidden">
+          <NuxtLink :to="`/goods/${activity.product_slug}`" class="flex h-52 items-center justify-center bg-bg">
+            <img class="h-full w-full object-contain" :src="activity.image || '/mock/product-1.svg'" :alt="pick(activity.product_name, locale)" loading="lazy" />
           </NuxtLink>
-          <div class="product-body">
-            <NuxtLink :to="`/goods/${activity.product_slug}`" class="product-name">{{ pick(activity.name, locale) }}</NuxtLink>
-            <div class="deal-meta">
-              <span class="deal-price"><PriceText :amount-minor="activity.group_price_minor" :currency="activity.currency" /></span>
-              <span class="group-tag">{{ t("marketing.peopleGroup", { n: activity.required_members }) }}</span>
-            </div>
-            <p class="joined">
-              <s><PriceText :amount-minor="activity.original_price_minor" :currency="activity.original_currency" /></s>
-            </p>
-
-            <div v-if="activity.open_groups.length" class="group-list">
-              <label v-for="group in activity.open_groups" :key="group.id" class="group-option">
-                <input v-model="selectedGroup[activity.id]" type="radio" :name="`group-${activity.id}`" :value="group.id" />
-                <span>{{ t("marketing.paidMembers", { n: group.paid_member_count, total: group.required_members }) }}</span>
-                <span class="group-expiry">{{ group.expires_at.slice(5, 16).replace('T', ' ') }}</span>
+          <div class="p-3.5">
+            <NuxtLink :to="`/goods/${activity.product_slug}`" class="line-clamp-2 font-medium hover:text-primary">{{ pick(activity.name, locale) }}</NuxtLink>
+            <div class="mt-2 flex items-center justify-between gap-2"><span class="text-lg font-semibold text-primary"><PriceText :amount-minor="activity.group_price_minor" :currency="activity.currency" /></span><VBadge tone="red">{{ t("marketing.peopleGroup", { n: activity.required_members }) }}</VBadge></div>
+            <p class="my-2 text-sm text-muted"><s><PriceText :amount-minor="activity.original_price_minor" :currency="activity.original_currency" /></s></p>
+            <div v-if="activity.open_groups.length" class="grid gap-2">
+              <label v-for="group in activity.open_groups" :key="group.id" class="flex cursor-pointer items-center gap-2 rounded-md border border-border p-2 text-xs has-[:checked]:border-primary has-[:checked]:bg-primary-soft">
+                <input v-model="selectedGroup[activity.id]" class="h-4 w-4 accent-primary" type="radio" :name="`group-${activity.id}`" :value="group.id" />
+                <span class="flex-1">{{ t("marketing.paidMembers", { n: group.paid_member_count, total: group.required_members }) }}</span>
+                <span class="text-muted">{{ group.expires_at.slice(5, 16).replace('T', ' ') }}</span>
               </label>
             </div>
-            <p v-else class="joined">{{ t("marketing.noOpenGroups") }}</p>
-
-            <div class="group-actions">
-              <button
-                type="button"
-                class="mbtn red"
-                :disabled="workingId === activity.id"
-                @click="start(activity, true)"
-              >
-                {{ t("marketing.openGroup") }}
-              </button>
-              <button
-                type="button"
-                class="mbtn"
-                :disabled="workingId === activity.id || !chosenGroup(activity.id)"
-                @click="start(activity, false)"
-              >
-                {{ t("marketing.joinGroup") }}
-              </button>
-            </div>
-            <p v-if="chosenGroup(activity.id)" class="joined">
-              {{ joined(activity, chosenGroup(activity.id)) }}
-            </p>
+            <p v-else class="my-2 text-sm text-muted">{{ t("marketing.noOpenGroups") }}</p>
+            <div class="mt-3 flex gap-2"><VBtn class="flex-1" variant="primary" type="button" :disabled="workingId === activity.id" @click="start(activity, true)">{{ t("marketing.openGroup") }}</VBtn><VBtn class="flex-1" type="button" :disabled="workingId === activity.id || !chosenGroup(activity.id)" @click="start(activity, false)">{{ t("marketing.joinGroup") }}</VBtn></div>
+            <p v-if="chosenGroup(activity.id)" class="mt-2 text-sm text-muted">{{ joined(activity, chosenGroup(activity.id)) }}</p>
           </div>
-        </article>
+        </VCard>
       </div>
       <UiEmptyState v-else :text="t('marketing.noCollectiveProducts')" />
     </section>
   </div>
 </template>
 
-<style scoped>
-.collective-page {
-  padding-bottom: 60px;
-}
-.marketing-section {
-  background: #fff;
-}
-.marketing-banner {
-  display: block;
-  width: 100%;
-  height: 350px;
-  object-fit: cover;
-}
-.section-heading {
-  margin-top: 20px;
-  border: 1px solid var(--mall-line);
-  background: #fafafa;
-  padding: 14px 18px;
-}
-.section-heading h1 {
-  margin: 0;
-  border-left: 3px solid var(--mall-red);
-  padding-left: 10px;
-  font-size: 17px;
-  font-weight: 500;
-}
-.collective-grid {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 15px;
-  margin-top: 20px;
-}
-.collective-card {
-  min-width: 0;
-  border: 1px solid var(--mall-line);
-  background: #fff;
-}
-.product-image {
-  display: flex;
-  height: 180px;
-  align-items: center;
-  justify-content: center;
-  padding: 12px;
-}
-.product-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-.product-body {
-  padding: 0 12px 13px;
-}
-.product-name {
-  display: block;
-  height: 36px;
-  overflow: hidden;
-  color: var(--mall-ink);
-  font-size: 13px;
-  line-height: 1.4;
-  text-decoration: none;
-}
-.product-name:hover {
-  color: var(--mall-red);
-}
-.deal-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 5px;
-  margin-top: 11px;
-}
-.deal-price {
-  color: var(--mall-red);
-  font-size: 17px;
-  font-weight: 700;
-}
-.group-tag {
-  flex: 0 0 auto;
-  border: 1px solid #f2b9bc;
-  background: #fff4f4;
-  padding: 2px 5px;
-  color: var(--mall-red);
-  font-size: 11px;
-}
-.joined {
-  margin: 7px 0 10px;
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.deal-link {
-  display: block;
-  border-top: 1px solid var(--mall-line);
-  padding-top: 9px;
-  color: var(--mall-red);
-  font-size: 12px;
-  text-decoration: none;
-}
-.deal-link span {
-  float: right;
-  font-size: 16px;
-  line-height: 11px;
-}
-@media (max-width: 1240px) {
-  .w1200 {
-    width: calc(100% - 32px);
-  }
-}
-@media (max-width: 900px) {
-  .collective-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@media (max-width: 600px) {
-  .marketing-banner {
-    height: 220px;
-  }
-  .collective-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-.collective-error {
-  margin: 12px 0 0;
-  padding: 10px 14px;
-  color: #b42318;
-  background: #fff1f0;
-  border: 1px solid #ffd6d2;
-}
-.group-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 8px 0;
-}
-.group-option {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--mall-muted);
-  cursor: pointer;
-}
-.group-expiry {
-  margin-left: auto;
-  color: var(--mall-faint);
-  font-size: 11px;
-}
-.group-actions {
-  display: flex;
-  gap: 6px;
-  margin-top: 8px;
-}
-.group-actions .mbtn {
-  flex: 1;
-  padding: 5px 8px;
-  text-align: center;
-}
-</style>
+
diff --git a/apps/mall/pages/forgot-password.vue b/apps/mall/pages/forgot-password.vue
index f76a47a..8a41ec2 100644
--- a/apps/mall/pages/forgot-password.vue
+++ b/apps/mall/pages/forgot-password.vue
@@ -58,182 +58,48 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <section class="auth-page">
-    <div class="auth-inner">
-      <div class="auth-panel">
-        <template v-if="success">
-          <div class="success-state">
-            <div class="success-mark">✓</div>
-            <h1>{{ t("auth.resetSuccess") }}</h1>
-            <p>{{ t("auth.resetSuccessHint") }}</p>
-            <NuxtLink class="mbtn red block" to="/login">{{ t("auth.loginNow") }}</NuxtLink>
-          </div>
-        </template>
-        <template v-else>
-          <div class="auth-tabs">
-            <h1>{{ t("auth.forgotTab") }}</h1>
-            <NuxtLink to="/login">{{ t("auth.loginTab") }}</NuxtLink>
-          </div>
-          <form @submit.prevent="submit">
-            <label class="field">
-              <span>{{ t("common.email") }}</span>
-              <input v-model.trim="email" class="minput" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
-            </label>
-            <label class="field">
-              <span>{{ t("auth.newPassword") }}</span>
-              <input v-model="password" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.passwordPlaceholder')" />
-            </label>
-            <label class="field">
-              <span>{{ t("auth.confirmPassword") }}</span>
-              <input v-model="confirmPassword" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.confirmPasswordPlaceholder')" />
-            </label>
-            <label class="field">
-              <span>{{ t("auth.smsCode") }}</span>
-              <span class="code-row">
-                <input v-model.trim="code" class="minput" type="text" :placeholder="t('auth.smsCodePlaceholder')" />
-                <button class="mbtn code-button" type="button" :disabled="countdown > 0" @click="startCountdown">
-                  {{ countdown > 0 ? t("auth.codeCountdown", { n: countdown }) : t("auth.getCode") }}
-                </button>
-              </span>
-            </label>
-            <p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
-            <button class="mbtn red block submit" type="submit" :disabled="submitting">
-              {{ t("auth.resetAction") }}
-            </button>
-          </form>
-          <div class="auth-links">
-            <NuxtLink to="/login">{{ t("auth.loginNow") }}</NuxtLink>
-          </div>
-        </template>
-      </div>
-    </div>
+  <section class="min-h-screen bg-bg px-5 py-10 font-sans text-text">
+    <VCard class="mx-auto my-10 max-w-[420px] p-6 sm:p-10">
+      <template v-if="success">
+        <div class="pt-12 text-center">
+          <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-success text-3xl text-white">✓</div>
+          <h1 class="m-0 text-xl font-semibold">{{ t("auth.resetSuccess") }}</h1>
+          <p class="my-3.5 mb-7 text-sm leading-relaxed text-muted">{{ t("auth.resetSuccessHint") }}</p>
+          <NuxtLink class="block" to="/login"><VBtn class="w-full" variant="primary">{{ t("auth.loginNow") }}</VBtn></NuxtLink>
+        </div>
+      </template>
+      <template v-else>
+        <div class="mb-6 flex items-baseline gap-4 border-b border-border pb-3.5">
+          <h1 class="m-0 text-xl font-semibold">{{ t("auth.forgotTab") }}</h1>
+          <NuxtLink class="text-sm text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginTab") }}</NuxtLink>
+        </div>
+        <form @submit.prevent="submit">
+          <VField :label="t('common.email')">
+            <VInput v-model.trim="email" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
+          </VField>
+          <VField :label="t('auth.newPassword')">
+            <VInput v-model="password" type="password" autocomplete="new-password" :placeholder="t('auth.passwordPlaceholder')" />
+          </VField>
+          <VField :label="t('auth.confirmPassword')">
+            <VInput v-model="confirmPassword" type="password" autocomplete="new-password" :placeholder="t('auth.confirmPasswordPlaceholder')" />
+          </VField>
+          <VField :label="t('auth.smsCode')">
+            <div class="flex gap-2">
+              <VInput v-model.trim="code" type="text" class="min-w-0 flex-1" :placeholder="t('auth.smsCodePlaceholder')" />
+              <VBtn class="shrink-0 whitespace-nowrap" type="button" size="sm" :disabled="countdown > 0" @click="startCountdown">
+                {{ countdown > 0 ? t("auth.codeCountdown", { n: countdown }) : t("auth.getCode") }}
+              </VBtn>
+            </div>
+          </VField>
+          <p v-if="errorKey" class="-mt-1 mb-3 text-xs text-danger">{{ t(errorKey) }}</p>
+          <VBtn class="mt-1 w-full" variant="primary" type="submit" :disabled="submitting">{{ t("auth.resetAction") }}</VBtn>
+        </form>
+        <div class="mt-4 text-center text-xs">
+          <NuxtLink class="text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginNow") }}</NuxtLink>
+        </div>
+      </template>
+    </VCard>
   </section>
 </template>
 
-<style scoped>
-.auth-page {
-  min-height: 720px;
-  background: #f6f6f6 url("/mock/login-bg.svg") center top / cover no-repeat;
-  padding: 50px 0;
-  box-sizing: border-box;
-}
-.auth-inner {
-  width: 1200px;
-  min-height: 540px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-}
-.auth-panel {
-  width: 400px;
-  min-height: 540px;
-  box-sizing: border-box;
-  padding: 40px;
-  background: #fff;
-  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
-}
-.auth-tabs {
-  display: flex;
-  align-items: baseline;
-  gap: 18px;
-  margin-bottom: 24px;
-  border-bottom: 1px solid var(--mall-line);
-  padding-bottom: 14px;
-}
-h1 {
-  margin: 0;
-  color: var(--mall-ink);
-  font-size: 20px;
-  font-weight: 600;
-}
-.auth-tabs a,
-.auth-links a {
-  color: var(--mall-red);
-  font-size: 13px;
-  text-decoration: none;
-}
-.auth-tabs a:hover,
-.auth-links a:hover {
-  color: var(--mall-red-dark);
-}
-.field {
-  display: block;
-  margin-bottom: 13px;
-}
-.field > span:first-child {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.code-row {
-  display: flex;
-  gap: 8px;
-}
-.code-row .minput {
-  min-width: 0;
-  flex: 1;
-}
-.code-button {
-  flex: 0 0 100px;
-  padding: 5px 8px;
-  white-space: nowrap;
-}
-.submit {
-  margin-top: 4px;
-}
-.error {
-  margin: -2px 0 10px;
-  color: var(--mall-red);
-  font-size: 12px;
-}
-.auth-links {
-  margin-top: 17px;
-  font-size: 12px;
-  text-align: center;
-}
-.success-state {
-  padding-top: 60px;
-  text-align: center;
-}
-.success-mark {
-  width: 54px;
-  height: 54px;
-  margin: 0 auto 18px;
-  border-radius: 50%;
-  background: var(--mall-green);
-  color: #fff;
-  font-size: 34px;
-  line-height: 54px;
-}
-.success-state h1 {
-  font-size: 20px;
-}
-.success-state p {
-  margin: 14px 0 28px;
-  color: var(--mall-muted);
-  font-size: 13px;
-  line-height: 1.6;
-}
-.success-state a {
-  text-decoration: none;
-}
-@media (max-width: 1240px) {
-  .auth-inner {
-    width: calc(100% - 40px);
-  }
-}
-@media (max-width: 640px) {
-  .auth-page {
-    padding: 20px;
-  }
-  .auth-inner {
-    width: 100%;
-  }
-  .auth-panel {
-    width: 100%;
-    padding: 30px 24px;
-  }
-}
-</style>
+
diff --git a/apps/mall/pages/goods/[id].vue b/apps/mall/pages/goods/[id].vue
index d4fa6e6..21149a9 100644
--- a/apps/mall/pages/goods/[id].vue
+++ b/apps/mall/pages/goods/[id].vue
@@ -24,7 +24,10 @@ const routeId = computed(() => {
 // product that was just fetched, and chaining two useAsyncData calls left the
 // second handler running before the first had data.
 const { data: pageData } = await useAsyncData(
-  "product-detail",
+  // Keyed by route param: Nuxt remounts this page on param change, and a
+  // static key would serve the previous product's cached entry without
+  // re-running the handler.
+  `product-detail-${routeId.value}`,
   async () => {
     const current = await $api.getProduct(routeId.value);
     // The rail uses live catalogue products so its links resolve; the store
@@ -290,583 +293,41 @@ const detailImages = computed(() => product.value?.images ?? []);
 </script>
 
 <template>
-  <div class="product-page section-bg">
+  <div class="min-h-screen bg-bg pb-16 font-sans text-text">
     <UiBreadcrumb :items="breadcrumbItems" />
-    <main v-if="detail" class="w1200">
-      <section class="product-top mpanel">
-        <div class="gallery">
-          <div class="main-image">
-            <img class="zoom-image" :src="currentImage" :alt="pick(detail.product.name, locale)" />
-          </div>
-          <div class="thumbs" role="list">
-            <button
-              v-for="(image, index) in detail.product.images.slice(0, 3)"
-              :key="`${image}-${index}`"
-              type="button"
-              :class="{ active: galleryIndex === index }"
-              :aria-label="`${t('product.detail')} ${index + 1}`"
-              @click="galleryIndex = index"
-            >
-              <img :src="image" :alt="pick(detail.product.name, locale)" loading="lazy" />
-            </button>
-          </div>
+    <main v-if="detail" class="mx-auto w-full max-w-mall px-4">
+      <section class="grid overflow-hidden rounded-lg border border-border bg-surface shadow-sm lg:grid-cols-2">
+        <div class="p-5">
+          <div class="flex aspect-square items-center justify-center overflow-hidden bg-bg"><img class="h-full w-full object-contain transition-transform hover:scale-105" :src="currentImage" :alt="pick(detail.product.name, locale)" /></div>
+          <div class="mt-3 flex gap-2" role="list"><button v-for="(image, index) in detail.product.images.slice(0, 3)" :key="`${image}-${index}`" type="button" class="h-16 w-16 overflow-hidden rounded-sm border border-border bg-surface p-0 hover:border-primary" :class="galleryIndex === index ? 'border-2 border-primary' : ''" :aria-label="`${t('product.detail')} ${index + 1}`" @click="galleryIndex = index"><img class="h-full w-full object-contain" :src="image" :alt="pick(detail.product.name, locale)" loading="lazy" /></button></div>
         </div>
 
-        <div class="summary">
-          <div class="summary-heading">
-            <div>
-              <h1>{{ pick(detail.product.name, locale) }}</h1>
-              <p class="subtitle">{{ pick(detail.product.description, locale) }}</p>
-            </div>
-            <button
-              type="button"
-              class="favorite"
-              :class="{ active: favorite }"
-              :disabled="favoriteLoading || favoriteBusy"
-              :aria-label="favorite ? t('product.unfavorite') : t('product.favorite')"
-              @click="toggleFavorite"
-            >{{ favorite ? "♥" : "♡" }}</button>
-          </div>
-          <p v-if="favoriteError" class="favorite-error">{{ favoriteError }}</p>
-          <div class="price-panel">
-            <span class="price-label">{{ t("product.currentPrice") }}</span>
-            <strong v-if="matchedSku" class="price"><PriceText :amount-minor="matchedSku.price_minor" :currency="matchedSku.currency" /></strong>
-            <strong v-else class="price">{{ t("product.unavailable") }}</strong>
-            <span v-if="matchedSku" class="market-label">{{ t("product.marketPrice") }} <s><PriceText :amount-minor="marketPrice" :currency="matchedSku.currency" /></s></span>
-          </div>
-          <div class="summary-meta">
-            <span>{{ t("product.sold", { n: detail.product.sold_count }) }}</span>
-            <span :class="{ soldout: stock <= 0 }">{{ stock > 0 ? t("product.stock", { n: stock }) : t("product.noStock") }}</span>
-          </div>
+        <div class="border-l border-border p-5 max-lg:border-l-0 max-lg:border-t">
+          <div class="flex items-start justify-between gap-3"><div><h1 class="m-0 text-xl font-bold text-text">{{ pick(detail.product.name, locale) }}</h1><p class="mt-2 text-sm leading-relaxed text-muted">{{ pick(detail.product.description, locale) }}</p></div><VBtn size="sm" type="button" :disabled="favoriteLoading || favoriteBusy" :aria-label="favorite ? t('product.unfavorite') : t('product.favorite')" @click="toggleFavorite">{{ favorite ? "♥" : "♡" }}</VBtn></div>
+          <p v-if="favoriteError" class="my-2 text-sm text-danger">{{ favoriteError }}</p>
+          <div class="my-4 flex flex-wrap items-baseline gap-2 bg-primary-soft px-4 py-3"><span class="text-xs text-muted">{{ t("product.currentPrice") }}</span><strong v-if="matchedSku" class="text-2xl font-semibold text-primary"><PriceText :amount-minor="matchedSku.price_minor" :currency="matchedSku.currency" /></strong><strong v-else class="text-2xl font-semibold text-primary">{{ t("product.unavailable") }}</strong><span v-if="matchedSku" class="text-xs text-muted">{{ t("product.marketPrice") }} <s><PriceText :amount-minor="marketPrice" :currency="matchedSku.currency" /></s></span></div>
+          <div class="mb-4 flex gap-5 text-xs text-muted"><span>{{ t("product.sold", { n: detail.product.sold_count }) }}</span><span :class="stock <= 0 ? 'text-danger' : ''">{{ stock > 0 ? t("product.stock", { n: stock }) : t("product.noStock") }}</span></div>
 
-          <div v-if="detail.coupons.length > 0" class="coupon-row">
-            <span class="label">{{ t("product.coupons") }}</span>
-            <div class="coupon-list">
-              <span v-for="coupon in detail.coupons" :key="coupon.id" class="coupon">
-                {{ pick(coupon.title, locale) }}
-                <small>{{ t("product.expires", { date: coupon.ends_at.slice(0, 10) }) }}</small>
-                <button
-                  type="button"
-                  class="coupon-claim"
-                  :disabled="claimingId === coupon.id || claimedIds.has(coupon.id)"
-                  @click="claim(coupon)"
-                >
-                  {{ claimedIds.has(coupon.id) ? t("product.claimed") : t("product.claim") }}
-                </button>
-              </span>
-              <span v-if="claimError" class="coupon-error">{{ claimError }}</span>
-            </div>
-          </div>
+          <div v-if="detail.coupons.length > 0" class="mb-4 flex gap-3"><span class="w-16 shrink-0 text-sm text-muted">{{ t("product.coupons") }}</span><div class="flex flex-wrap gap-2"><span v-for="coupon in detail.coupons" :key="coupon.id" class="rounded-sm border border-primary/30 bg-primary-soft px-2 py-1 text-xs text-primary">{{ pick(coupon.title, locale) }} <small class="block text-[11px] text-muted">{{ t("product.expires", { date: coupon.ends_at.slice(0, 10) }) }}</small><VBtn class="mt-1" size="sm" type="button" :disabled="claimingId === coupon.id || claimedIds.has(coupon.id)" @click="claim(coupon)">{{ claimedIds.has(coupon.id) ? t("product.claimed") : t("product.claim") }}</VBtn></span><span v-if="claimError" class="text-sm text-danger">{{ claimError }}</span></div></div>
 
-          <div v-for="group in attributeGroups" :key="group.key" class="attribute-row">
-            <span class="label">{{ group.key }}</span>
-            <div class="attribute-values">
-              <button
-                v-for="value in group.values"
-                :key="value"
-                type="button"
-                :class="{ active: selectedAttributes[group.key] === value }"
-                @click="selectAttribute(group.key, value)"
-              >{{ value }}</button>
-            </div>
-          </div>
-
-          <div class="quantity-row">
-            <span class="label">{{ t("product.quantity") }}</span>
-            <UiQtyStepper v-model="quantity" :max="Math.max(1, stock)" />
-          </div>
-          <div class="actions">
-            <button type="button" class="primary-action" :disabled="!matchedSku || stock <= 0" @click="buyNow">{{ t("product.buyNow") }}</button>
-            <button type="button" class="cart-action" :disabled="!matchedSku || stock <= 0" @click="addCart">{{ cartSuccess ? t("product.addedCart") : t("product.addCart") }}</button>
-          </div>
-          <p v-if="matchedSku && stock <= 0" class="stock-warning">{{ t("product.noStock") }}</p>
-          <p v-else-if="!matchedSku" class="stock-warning">{{ t("product.unavailable") }}</p>
+          <div v-for="group in attributeGroups" :key="group.key" class="mb-3 flex gap-3"><span class="w-16 shrink-0 pt-1 text-sm text-muted">{{ group.key }}</span><div class="flex flex-wrap gap-2"><button v-for="value in group.values" :key="value" type="button" class="rounded-md border border-border bg-surface px-3 py-1.5 text-sm text-text hover:border-primary hover:text-primary" :class="selectedAttributes[group.key] === value ? 'border-primary bg-primary-soft text-primary' : ''" @click="selectAttribute(group.key, value)">{{ value }}</button></div></div>
+          <div class="mb-4 flex items-center gap-3"><span class="w-16 shrink-0 text-sm text-muted">{{ t("product.quantity") }}</span><UiQtyStepper v-model="quantity" :max="Math.max(1, stock)" /></div>
+          <div class="flex flex-wrap gap-2"><VBtn variant="primary" type="button" :disabled="!matchedSku || stock <= 0" @click="buyNow">{{ t("product.buyNow") }}</VBtn><VBtn type="button" :disabled="!matchedSku || stock <= 0" @click="addCart">{{ cartSuccess ? t("product.addedCart") : t("product.addCart") }}</VBtn></div>
+          <p v-if="matchedSku && stock <= 0" class="my-2 text-sm text-danger">{{ t("product.noStock") }}</p><p v-else-if="!matchedSku" class="my-2 text-sm text-danger">{{ t("product.unavailable") }}</p>
         </div>
       </section>
 
-      <section class="below-grid">
-        <aside class="left-rail">
-          <div v-if="detail.store" class="store-card mpanel">
-            <h2>{{ t("product.store") }}</h2>
-            <div class="store-heading">
-              <img v-if="detail.store.logo" :src="detail.store.logo" :alt="pick(detail.store.name, locale)" />
-              <strong>{{ pick(detail.store.name, locale) }}</strong>
-            </div>
-            <dl>
-              <div v-if="detail.store.company"><dt>{{ t("product.company") }}</dt><dd>{{ detail.store.company }}</dd></div>
-              <div v-if="detail.store.region"><dt>{{ t("product.region") }}</dt><dd>{{ detail.store.region }}</dd></div>
-            </dl>
-            <template v-if="rateRows.length">
-              <h3>{{ t("product.rates") }}</h3>
-              <div v-for="row in rateRows" :key="row.key" class="rate-row">
-                <span>{{ row.label }}</span><UiRatingStars :value="row.value" :size="13" />
-              </div>
-            </template>
-            <div class="store-actions">
-              <NuxtLink class="store-button" :to="`/stores/${detail.store.slug}`">{{ t("product.enterStore") }}</NuxtLink>
-              <button type="button" class="store-button" disabled>{{ t("product.contact") }}</button>
-            </div>
-          </div>
-          <div class="sales-rank mpanel">
-            <h2>{{ t("product.salesRank") }}</h2>
-            <NuxtLink v-for="item in detail.salesRank" :key="item.id" :to="`/goods/${item.slug}`" class="rank-item">
-              <img :src="item.images[0]" :alt="pick(item.name, locale)" loading="lazy" />
-              <span class="rank-name">{{ pick(item.name, locale) }}</span>
-              <span v-if="lowestSku(item)" class="rank-price"><PriceText :amount-minor="lowestSku(item)!.price_minor" :currency="lowestSku(item)!.currency" /></span>
-            </NuxtLink>
-          </div>
+      <section class="mt-5 grid gap-5 lg:grid-cols-[260px_minmax(0,1fr)]">
+        <aside class="space-y-5">
+          <VCard v-if="detail.store">
+            <h2 class="mb-3 border-l-[3px] border-primary pl-2 text-sm font-medium">{{ t("product.store") }}</h2><div class="flex items-center gap-2.5 border-b border-border pb-3"><img v-if="detail.store.logo" class="h-12 w-12 border border-border object-contain" :src="detail.store.logo" :alt="pick(detail.store.name, locale)" /><strong class="text-sm">{{ pick(detail.store.name, locale) }}</strong></div><dl class="my-3 text-xs text-muted"><div v-if="detail.store.company" class="my-2 flex justify-between gap-2"><dt>{{ t("product.company") }}</dt><dd class="m-0 text-right">{{ detail.store.company }}</dd></div><div v-if="detail.store.region" class="my-2 flex justify-between gap-2"><dt>{{ t("product.region") }}</dt><dd class="m-0 text-right">{{ detail.store.region }}</dd></div></dl><template v-if="rateRows.length"><h3 class="mb-2 text-xs font-medium">{{ t("product.rates") }}</h3><div v-for="row in rateRows" :key="row.key" class="flex items-center justify-between py-1 text-xs text-muted"><span>{{ row.label }}</span><UiRatingStars :value="row.value" :size="13" /></div></template><div class="mt-3 grid gap-2"><NuxtLink class="rounded-md border border-primary bg-primary px-3 py-2 text-center text-sm font-medium text-white no-underline hover:bg-primary-hover" :to="`/stores/${detail.store.slug}`">{{ t("product.enterStore") }}</NuxtLink><VBtn type="button" disabled>{{ t("product.contact") }}</VBtn></div>
+          </VCard>
+          <VCard><h2 class="mb-2 border-l-[3px] border-primary pl-2 text-sm font-medium">{{ t("product.salesRank") }}</h2><NuxtLink v-for="item in detail.salesRank" :key="item.id" :to="`/goods/${item.slug}`" class="grid grid-cols-[48px_minmax(0,1fr)] gap-2 border-t border-border py-2 text-xs text-text no-underline"><img class="h-12 w-12 object-contain" :src="item.images[0]" :alt="pick(item.name, locale)" loading="lazy" /><span class="min-w-0 self-center truncate">{{ pick(item.name, locale) }}<span v-if="lowestSku(item)" class="mt-1 block text-right text-primary"><PriceText :amount-minor="lowestSku(item)!.price_minor" :currency="lowestSku(item)!.currency" /></span></span></NuxtLink></VCard>
         </aside>
-
-        <section class="detail-panel mpanel">
-          <UiTabs v-model="activeTab" :tabs="tabs">
-            <template #default="{ active }">
-              <div v-if="active === 'detail'" class="detail-content">
-                <h2>{{ t("product.description") }}</h2>
-                <p>{{ pick(detail.product.description, locale) }}</p>
-                <img v-for="(image, index) in detailImages" :key="`${image}-detail-${index}`" :src="image" :alt="t('product.detail')" loading="lazy" />
-              </div>
-              <div v-else class="service-content">
-                <h2>{{ t("product.tabsAfterSale") }}</h2>
-                <p v-if="detail.store?.after_sale">{{ pick(detail.store.after_sale, locale) }}</p>
-              </div>
-            </template>
-          </UiTabs>
-        </section>
+        <VCard :padded="false" class="overflow-hidden"><UiTabs v-model="activeTab" :tabs="tabs"><template #default="{ active }"><div v-if="active === 'detail'" class="space-y-3 p-5"><h2 class="text-lg font-semibold">{{ t("product.description") }}</h2><p class="text-sm leading-relaxed text-text">{{ pick(detail.product.description, locale) }}</p><img v-for="(image, index) in detailImages" :key="`${image}-detail-${index}`" class="w-full object-contain" :src="image" :alt="t('product.detail')" loading="lazy" /></div><div v-else class="space-y-3 p-5"><h2 class="text-lg font-semibold">{{ t("product.tabsAfterSale") }}</h2><p v-if="detail.store?.after_sale" class="text-sm leading-relaxed text-text">{{ pick(detail.store.after_sale, locale) }}</p></div></template></UiTabs></VCard>
       </section>
     </main>
     <UiEmptyState v-else :text="t('product.productNotFound')" />
   </div>
 </template>
 
-
-<style scoped>
-.product-page {
-  min-height: 700px;
-  padding-bottom: 60px;
-}
-.product-top {
-  display: grid;
-  grid-template-columns: 450px 1fr;
-  gap: 32px;
-  min-height: 500px;
-  background: #fff;
-  border: 1px solid var(--mall-line);
-  padding: 24px;
-}
-.gallery {
-  width: 400px;
-}
-.main-image {
-  display: flex;
-  width: 400px;
-  height: 400px;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  background: #fff;
-  border: 1px solid var(--mall-line);
-}
-.zoom-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  transition: transform 220ms ease;
-}
-.main-image:hover .zoom-image {
-  transform: scale(1.07);
-}
-.thumbs {
-  display: flex;
-  gap: 12px;
-  margin-top: 14px;
-}
-.thumbs button {
-  width: 74px;
-  height: 74px;
-  padding: 4px;
-  border: 1px solid var(--mall-line);
-  background: #fff;
-  cursor: pointer;
-}
-.thumbs button.active {
-  border-color: var(--mall-red);
-}
-.thumbs img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-.summary {
-  min-width: 0;
-}
-.summary-heading {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-}
-h1 {
-  margin: 0;
-  color: var(--mall-ink);
-  font-size: 22px;
-  line-height: 1.35;
-}
-.subtitle {
-  margin: 8px 0 18px;
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.favorite {
-  align-self: flex-start;
-  border: 0;
-  background: transparent;
-  color: var(--mall-faint);
-  cursor: pointer;
-  font-size: 28px;
-  line-height: 1;
-}
-.favorite.active {
-  color: var(--mall-red);
-}
-.price-panel {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 12px;
-  background: #fff5f5;
-  padding: 16px;
-}
-.price-label,
-.market-label,
-.label {
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.price {
-  color: var(--mall-red);
-  font-size: 28px;
-}
-.market-label s {
-  color: var(--mall-faint);
-}
-.summary-meta {
-  display: flex;
-  gap: 28px;
-  border-bottom: 1px solid var(--mall-line);
-  color: var(--mall-muted);
-  font-size: 12px;
-  padding: 13px 0;
-}
-.summary-meta .soldout,
-.stock-warning,
-.favorite-error {
-  color: var(--mall-red);
-}
-.favorite-error {
-  margin: 6px 0 0;
-  font-size: 12px;
-}
-.coupon-row,
-.attribute-row,
-.quantity-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 18px;
-  border-bottom: 1px solid var(--mall-line);
-  padding: 15px 0;
-}
-.coupon-row > .label,
-.attribute-row > .label,
-.quantity-row > .label {
-  width: 58px;
-  flex: 0 0 58px;
-  line-height: 30px;
-}
-.coupon-list,
-.attribute-values {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.coupon {
-  display: inline-flex;
-  flex-direction: column;
-  gap: 3px;
-  border: 1px solid var(--mall-red);
-  color: var(--mall-red);
-  font-size: 12px;
-  padding: 5px 8px;
-}
-.coupon small {
-  color: var(--mall-muted);
-  font-size: 10px;
-}
-.coupon-claim {
-  margin-top: 3px;
-  padding: 2px 8px;
-  border: 1px solid var(--mall-red);
-  background: transparent;
-  color: var(--mall-red);
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-}
-.coupon-claim:disabled {
-  border-color: var(--mall-line-dark);
-  color: var(--mall-faint);
-  cursor: default;
-}
-.coupon-error {
-  align-self: center;
-  color: #b42318;
-  font-size: 11px;
-}
-.attribute-values button {
-  min-width: 66px;
-  border: 1px solid var(--mall-line-dark);
-  background: #fff;
-  color: var(--mall-ink);
-  cursor: pointer;
-  font-size: 12px;
-  padding: 6px 12px;
-}
-.attribute-values button.active {
-  border-color: var(--mall-red);
-  color: var(--mall-red);
-}
-.actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 22px;
-}
-.primary-action,
-.cart-action {
-  min-width: 136px;
-  border: 1px solid var(--mall-red);
-  cursor: pointer;
-  font-size: 14px;
-  padding: 11px 22px;
-}
-.primary-action {
-  background: #fff0f0;
-  color: var(--mall-red);
-}
-.cart-action {
-  background: var(--mall-red);
-  color: #fff;
-}
-.primary-action:disabled,
-.cart-action:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-.stock-warning {
-  margin: 10px 0 0;
-  font-size: 12px;
-}
-.below-grid {
-  display: grid;
-  grid-template-columns: 260px 1fr;
-  gap: 20px;
-  margin-top: 20px;
-}
-.left-rail {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-.store-card,
-.sales-rank,
-.detail-panel {
-  background: #fff;
-  border: 1px solid var(--mall-line);
-  padding: 18px;
-}
-.store-card h2,
-.sales-rank h2,
-.detail-content h2,
-.service-content h2 {
-  border-left: 3px solid var(--mall-red);
-  color: var(--mall-ink);
-  font-size: 16px;
-  margin: 0 0 16px;
-  padding-left: 8px;
-}
-.store-heading {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  font-size: 13px;
-}
-.store-heading img {
-  width: 42px;
-  height: 42px;
-  object-fit: contain;
-}
-dl {
-  margin: 14px 0;
-}
-dl div {
-  display: flex;
-  gap: 6px;
-  font-size: 12px;
-  line-height: 1.6;
-}
-dt {
-  color: var(--mall-muted);
-  flex: 0 0 42px;
-}
-dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-.store-card h3 {
-  color: var(--mall-muted);
-  font-size: 12px;
-  font-weight: 400;
-  margin: 12px 0 8px;
-}
-.rate-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: var(--mall-muted);
-  font-size: 12px;
-  line-height: 25px;
-}
-.store-actions {
-  display: flex;
-  gap: 6px;
-  margin-top: 14px;
-}
-.store-button {
-  flex: 1;
-  border: 1px solid var(--mall-line-dark);
-  background: #fff;
-  color: var(--mall-ink);
-  cursor: pointer;
-  font-size: 11px;
-  padding: 7px 4px;
-  text-align: center;
-  text-decoration: none;
-}
-.store-button:first-child {
-  border-color: var(--mall-red);
-  color: var(--mall-red);
-}
-.store-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-.rank-item {
-  display: grid;
-  grid-template-columns: 52px 1fr;
-  gap: 5px 8px;
-  border-bottom: 1px solid var(--mall-line);
-  color: inherit;
-  padding: 10px 0;
-  text-decoration: none;
-}
-.rank-item:last-child {
-  border-bottom: 0;
-}
-.rank-item img {
-  grid-row: 1 / span 2;
-  width: 52px;
-  height: 52px;
-  object-fit: contain;
-}
-.rank-name {
-  align-self: end;
-  font-size: 11px;
-  line-height: 1.35;
-  max-height: 30px;
-  overflow: hidden;
-}
-.rank-price {
-  align-self: start;
-  color: var(--mall-red);
-  font-size: 12px;
-}
-.detail-panel {
-  min-height: 550px;
-}
-.detail-content p,
-.service-content p {
-  color: var(--mall-muted);
-  font-size: 13px;
-  line-height: 1.8;
-  margin: 0 0 18px;
-}
-.detail-content > img {
-  display: block;
-  width: 100%;
-  max-height: 500px;
-  margin: 0 auto 14px;
-  object-fit: contain;
-}
-.review-summary {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--mall-line);
-  color: var(--mall-red);
-  font-size: 13px;
-  padding: 0 0 15px;
-}
-.review-summary span {
-  color: var(--mall-muted);
-}
-.review {
-  display: flex;
-  gap: 12px;
-  border-bottom: 1px solid var(--mall-line);
-  padding: 18px 0;
-}
-.review > img {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-}
-.review-body {
-  min-width: 0;
-  flex: 1;
-}
-.review-body header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.review-body header strong {
-  color: var(--mall-ink);
-}
-.review-body time {
-  margin-left: auto;
-}
-.review-body p {
-  color: var(--mall-ink);
-  font-size: 13px;
-  line-height: 1.6;
-  margin: 9px 0;
-}
-.reply {
-  background: #fafafa;
-  color: var(--mall-muted);
-  font-size: 12px;
-  padding: 8px 10px;
-}
-.reply strong {
-  color: var(--mall-red);
-}
-@media (max-width: 900px) {
-  .product-top,
-  .below-grid {
-    grid-template-columns: 1fr;
-  }
-  .gallery,
-  .main-image {
-    width: 100%;
-    max-width: 400px;
-  }
-}
-</style>
diff --git a/apps/mall/pages/index.vue b/apps/mall/pages/index.vue
index cf0ca24..9915f28 100644
--- a/apps/mall/pages/index.vue
+++ b/apps/mall/pages/index.vue
@@ -29,6 +29,9 @@ const banners = computed(() =>
 );
 const quickLinks = computed(() => content.value.quick_links);
 const promos = computed(() => content.value.promos);
+const heroQuickLinks = computed(() => quickLinks.value.slice(0, 6));
+const sidePromos = computed(() => promos.value.slice(0, 2));
+const stripPromos = computed(() => (promos.value.length > 2 ? promos.value.slice(2, 5) : promos.value.slice(0, 3)));
 
 // Floor structure comes from the category tree and floor products from the
 // catalog API; advert art is an ordered pool assigned to floors in turn.
@@ -59,40 +62,59 @@ const visibleFloors = computed(() => floors.value ?? []);
 
 <template>
   <div>
-    <div class="w1200 hero">
-      <ShellCategoryMenu pinned />
-      <div class="hero-slider">
-        <UiCarousel :images="banners" :height="450" />
+    <section class="mx-auto max-w-mall px-4">
+      <div class="grid h-hero grid-cols-[240px_minmax(0,1fr)_220px] bg-surface">
+        <ShellCategoryMenu pinned />
+        <div class="min-w-0">
+          <UiCarousel :images="banners" :height="450" />
+        </div>
+        <aside class="flex h-full flex-col border-l border-border bg-surface">
+          <ul class="grid list-none grid-cols-2 gap-px bg-border p-px">
+            <li v-for="q in heroQuickLinks" :key="q.id" class="bg-surface text-center">
+              <NuxtLink :to="q.url" class="block px-1 py-3 text-[12px] text-muted no-underline transition-colors hover:text-primary">
+                <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" class="mx-auto mb-1.5">
+                  <path :d="q.glyph" />
+                </svg>
+                <span>{{ pick(q.label, locale) }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+          <div class="mt-2 flex-1 space-y-2 px-2 pb-2">
+            <NuxtLink
+              v-for="p in sidePromos"
+              :key="p.id"
+              :to="p.url"
+              class="block overflow-hidden"
+            >
+              <img :src="p.image" :alt="t('home.hotPromo')" loading="lazy" class="block h-[106px] w-full object-cover" />
+            </NuxtLink>
+          </div>
+        </aside>
       </div>
-    </div>
+    </section>
 
-    <div class="w1200 strip">
-      <ul class="quick">
-        <li v-for="q in quickLinks" :key="q.id">
-          <NuxtLink :to="q.url">
-            <svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor"><path :d="q.glyph" /></svg>
-            <span>{{ pick(q.label, locale) }}</span>
-          </NuxtLink>
-        </li>
-      </ul>
-      <div class="promos">
-        <NuxtLink v-for="p in promos" :key="p.id" :to="p.url">
-          <img :src="p.image" :alt="t('home.hotPromo')" loading="lazy" />
+    <section v-if="stripPromos.length > 0" class="mx-auto mb-5 mt-5 max-w-mall px-4">
+      <div class="grid grid-cols-3 gap-3">
+        <NuxtLink v-for="p in stripPromos" :key="p.id" :to="p.url" class="block overflow-hidden">
+          <img :src="p.image" :alt="t('home.hotPromo')" loading="lazy" class="block h-40 w-full object-cover" />
         </NuxtLink>
       </div>
-    </div>
+    </section>
 
-    <div class="section-bg">
-      <section v-for="floor in visibleFloors" :key="floor.categoryId" class="w1200 floor">
-        <header class="floor-head">
-          <h2>{{ pick(floor.name, locale) }}</h2>
-          <NuxtLink :to="`/search?category=${floor.categoryId}`" class="more">{{ t("home.viewMore") }} ›</NuxtLink>
+    <div class="bg-bg py-8">
+      <section v-for="floor in visibleFloors" :key="floor.categoryId" class="mx-auto mb-[30px] max-w-mall px-4 last:mb-0">
+        <header class="flex items-end justify-between border-b-2 border-primary">
+          <h2 class="m-0 py-[10px] text-[18px] leading-none">{{ pick(floor.name, locale) }}</h2>
+          <NuxtLink
+            :to="`/search?category=${floor.categoryId}`"
+            class="pb-2 text-[12px] text-muted no-underline transition-colors hover:text-primary"
+          >{{ t("home.viewMore") }} ›</NuxtLink>
         </header>
-        <div class="floor-body">
-          <NuxtLink v-if="floor.advImage" :to="floor.advUrl" class="floor-adv">
-            <img :src="floor.advImage" :alt="pick(floor.name, locale)" loading="lazy" />
+        <div class="flex bg-surface">
+          <NuxtLink v-if="floor.advImage" :to="floor.advUrl" class="shrink-0 border-r border-border">
+            <img :src="floor.advImage" :alt="pick(floor.name, locale)" loading="lazy" class="block h-[614px] w-[234px] object-cover" />
           </NuxtLink>
-          <div class="floor-grid">
+          <div class="grid min-w-0 flex-1 grid-cols-4 gap-px bg-border p-px">
             <UiProductCard v-for="p in floor.products" :key="p.id" :product="p" />
           </div>
         </div>
@@ -100,107 +122,3 @@ const visibleFloors = computed(() => floors.value ?? []);
     </div>
   </div>
 </template>
-
-<style scoped>
-.hero {
-  display: flex;
-  height: 450px;
-  margin-top: 0;
-  background: #fff;
-}
-.hero-slider {
-  flex: 1;
-  min-width: 0;
-}
-.strip {
-  display: flex;
-  gap: 20px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-.quick {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1px;
-  background: var(--mall-line);
-  border: 1px solid var(--mall-line);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 240px;
-}
-.quick li {
-  background: #fff;
-  text-align: center;
-}
-.quick a {
-  display: block;
-  padding: 14px 0;
-  color: var(--mall-muted);
-  text-decoration: none;
-  font-size: 12px;
-}
-.quick a:hover {
-  color: var(--mall-red);
-}
-.quick svg {
-  display: block;
-  margin: 0 auto 6px;
-}
-.promos {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-}
-.promos img {
-  width: 100%;
-  height: 160px;
-  object-fit: cover;
-  display: block;
-}
-.floor {
-  margin-bottom: 30px;
-}
-.floor-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  border-bottom: 2px solid var(--mall-red);
-  margin-bottom: 0;
-}
-.floor-head h2 {
-  font-size: 18px;
-  margin: 0;
-  padding: 10px 0;
-}
-.more {
-  font-size: 12px;
-  color: var(--mall-muted);
-  text-decoration: none;
-}
-.more:hover {
-  color: var(--mall-red);
-}
-.floor-body {
-  display: flex;
-  gap: 0;
-  background: #fff;
-}
-.floor-adv img {
-  width: 234px;
-  height: 614px;
-  display: block;
-  object-fit: cover;
-}
-.floor-grid {
-  flex: 1;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1px;
-  background: var(--mall-line);
-}
-.floor-grid :deep(.card) {
-  border: 0;
-}
-</style>
diff --git a/apps/mall/pages/integral.vue b/apps/mall/pages/integral.vue
index 0bf2ef7..f6c5b6d 100644
--- a/apps/mall/pages/integral.vue
+++ b/apps/mall/pages/integral.vue
@@ -123,384 +123,48 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="integral-page">
+  <div class="min-h-screen bg-bg pb-14 font-sans text-text">
     <UiBreadcrumb :items="breadcrumb" />
-    <section class="w1200 marketing-section">
-      <img class="marketing-banner" src="/mock/integral-banner.svg" :alt="t('marketing.integralBannerAlt')" />
-
-      <div class="benefits-row">
-        <section class="points-account">
+    <section class="mx-auto max-w-mall bg-surface px-4">
+      <img class="block h-[350px] w-full object-cover" src="/mock/integral-banner.svg" :alt="t('marketing.integralBannerAlt')" />
+      <div class="my-5 grid gap-3 md:grid-cols-[1.4fr_repeat(3,1fr)]">
+        <section class="flex min-h-[106px] items-center gap-3 border border-border bg-surface px-4 py-3">
           <template v-if="session.isLoggedIn">
-            <img src="/mock/avatar.svg" :alt="session.user?.display_name ?? t('marketing.pointsBalance')" />
-            <div>
-              <p class="account-name">{{ session.user?.display_name }}</p>
-              <p class="points-label">{{ t("marketing.pointsBalance") }}</p>
-              <strong class="account-points">{{ stats ? stats.points : t("common.loading") }}</strong>
-            </div>
+            <img class="h-14 w-14 rounded-full object-cover" src="/mock/avatar.svg" :alt="session.user?.display_name ?? t('marketing.pointsBalance')" />
+            <div><p class="m-0 text-sm">{{ session.user?.display_name }}</p><p class="mb-1 mt-1 text-xs text-muted">{{ t("marketing.pointsBalance") }}</p><strong class="text-xl text-primary">{{ stats ? stats.points : t("common.loading") }}</strong></div>
           </template>
           <template v-else>
-            <div class="login-copy">
-              <h2>{{ t("marketing.pointsBalance") }}</h2>
-              <p>{{ t("marketing.loginPrompt") }}</p>
-            </div>
-            <div class="account-actions">
-              <NuxtLink to="/login" class="mbtn red">{{ t("marketing.login") }}</NuxtLink>
-              <NuxtLink to="/register" class="mbtn">{{ t("marketing.register") }}</NuxtLink>
-            </div>
+            <div class="flex-1"><h2 class="m-0 text-base">{{ t("marketing.pointsBalance") }}</h2><p class="my-1 text-sm text-muted">{{ t("marketing.loginPrompt") }}</p></div>
+            <div class="flex gap-2"><NuxtLink class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-3 py-1.5 text-sm text-white hover:bg-primary-hover" to="/login">{{ t("marketing.login") }}</NuxtLink><NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-3 py-1.5 text-sm hover:bg-bg" to="/register">{{ t("marketing.register") }}</NuxtLink></div>
           </template>
         </section>
-        <div class="value-card">
-          <span class="value-mark">01</span>
-          <strong>{{ t("marketing.customize") }}</strong>
-        </div>
-        <div class="value-card">
-          <span class="value-mark">02</span>
-          <strong>{{ t("marketing.shipping") }}</strong>
-        </div>
-        <div class="value-card">
-          <span class="value-mark">03</span>
-          <strong>{{ t("marketing.support") }}</strong>
-        </div>
+        <div v-for="(label, index) in [t('marketing.customize'), t('marketing.shipping'), t('marketing.support')]" :key="label" class="flex min-h-[106px] items-center gap-3 border border-border bg-surface px-4"><span class="text-2xl text-primary">0{{ index + 1 }}</span><strong>{{ label }}</strong></div>
       </div>
 
-      <header class="section-heading">
-        <h1>{{ t("marketing.recommendation") }}</h1>
-      </header>
-
-      <div v-if="session.isLoggedIn" class="redeem-bar">
-        <label class="redeem-address">
-          <span>{{ t("marketing.addressLabel") }}</span>
-          <select v-if="addresses.length" v-model="selectedAddressId" class="minput">
-            <option v-for="address in addresses" :key="address.id" :value="address.id">
-              {{ address.recipient }} · {{ address.city }} {{ address.line1 }}
-            </option>
-          </select>
-          <span v-else class="muted">
-            {{ t("marketing.noAddress") }}
-            <NuxtLink to="/user/addresses">{{ t("marketing.addAddress") }}</NuxtLink>
-          </span>
-        </label>
+      <header class="border border-border bg-bg px-4 py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-[17px] font-medium">{{ t("marketing.recommendation") }}</h1></header>
+      <div v-if="session.isLoggedIn" class="my-4 flex items-center gap-3">
+        <label class="flex flex-1 flex-wrap items-center gap-2 text-sm"><span>{{ t("marketing.addressLabel") }}</span><select v-if="addresses.length" v-model="selectedAddressId" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30"><option v-for="address in addresses" :key="address.id" :value="address.id">{{ address.recipient }} · {{ address.city }} {{ address.line1 }}</option></select><span v-else class="text-muted">{{ t("marketing.noAddress") }} <NuxtLink class="text-primary" to="/user/addresses">{{ t("marketing.addAddress") }}</NuxtLink></span></label>
       </div>
-      <p v-if="error" class="redeem-error" role="alert">{{ error }}</p>
-      <p v-if="notice" class="redeem-notice" aria-live="polite">{{ notice }}</p>
-
-      <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
-      <div v-else-if="products.length" class="integral-grid">
-        <article v-for="item in products" :key="item.id" class="integral-card hover-lift">
-          <div class="product-image">
-            <img :src="item.image || '/mock/product-9.svg'" :alt="pick(item.name, locale)" loading="lazy" />
-          </div>
-          <div class="product-body">
-            <h2>{{ pick(item.name, locale) }}</h2>
-            <div class="points-line">
-              <strong>{{ t("marketing.points", { n: item.points_price }) }}</strong>
-            </div>
-            <p class="stock-line">{{ t("marketing.stock", { n: item.stock }) }}</p>
-            <label class="qty-line">
-              <span>{{ t("marketing.qty") }}</span>
-              <input
-                v-model.number="quantities[item.id]"
-                class="minput qty-input"
-                type="number"
-                min="1"
-                :max="item.stock"
-              />
-            </label>
-            <button
-              type="button"
-              class="mbtn red redeem-button"
-              :disabled="item.stock <= 0 || redeemingId === item.id"
-              @click="redeem(item)"
-            >
-              {{ redeemingId === item.id ? t("common.loading") : t("marketing.redeem") }}
-            </button>
-          </div>
-        </article>
+      <p v-if="error" class="my-2 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger" role="alert">{{ error }}</p>
+      <p v-if="notice" class="my-2 border border-success/30 bg-success/10 px-3.5 py-2.5 text-success" aria-live="polite">{{ notice }}</p>
+      <div v-if="loading" class="py-6 text-muted">{{ t("common.loading") }}</div>
+      <div v-else-if="products.length" class="grid gap-4 py-5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
+        <VCard v-for="item in products" :key="item.id" :padded="false" class="min-w-0 overflow-hidden">
+          <div class="flex h-52 items-center justify-center bg-bg"><img class="h-full w-full object-contain" :src="item.image || '/mock/product-9.svg'" :alt="pick(item.name, locale)" loading="lazy" /></div>
+          <div class="p-3.5"><h2 class="m-0 line-clamp-2 text-base font-medium">{{ pick(item.name, locale) }}</h2><div class="mt-2 text-lg font-semibold text-primary">{{ t("marketing.points", { n: item.points_price }) }}</div><p class="my-2 text-sm text-muted">{{ t("marketing.stock", { n: item.stock }) }}</p><div class="mb-3 flex items-center gap-2 text-sm"><span>{{ t("marketing.qty") }}</span><VInput v-model.number="quantities[item.id]" class="w-20" type="number" min="1" :max="item.stock" /></div><VBtn class="w-full" variant="primary" type="button" :disabled="item.stock <= 0 || redeemingId === item.id" @click="redeem(item)">{{ redeemingId === item.id ? t("common.loading") : t("marketing.redeem") }}</VBtn></div>
+        </VCard>
       </div>
       <UiEmptyState v-else :text="t('marketing.noIntegralProducts')" />
 
       <template v-if="session.isLoggedIn && redemptions.length">
-        <header class="section-heading history-heading">
-          <h1>{{ t("marketing.redemptionHistory") }}</h1>
-        </header>
-        <table class="mtable">
-          <thead>
-            <tr>
-              <th>{{ t("marketing.orderNo") }}</th>
-              <th>{{ t("marketing.reward") }}</th>
-              <th>{{ t("marketing.qty") }}</th>
-              <th>{{ t("marketing.pointsCost") }}</th>
-              <th>{{ t("common.status") }}</th>
-              <th>{{ t("marketing.createdAt") }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="order in redemptions" :key="order.id">
-              <td>{{ order.order_no }}</td>
-              <td>{{ order.items.map((line) => pick(line.name, locale)).join(", ") }}</td>
-              <td>{{ order.items.reduce((n, line) => n + line.qty, 0) }}</td>
-              <td>{{ order.total_points }}</td>
-              <td>{{ t(`marketing.redemptionStatus.${order.status}`) }}</td>
-              <td>{{ order.created_at.slice(0, 10) }}</td>
-            </tr>
-          </tbody>
-        </table>
+        <header class="mt-5 border border-border bg-bg px-4 py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-[17px] font-medium">{{ t("marketing.redemptionHistory") }}</h1></header>
+        <VTable>
+          <thead><tr><th>{{ t("marketing.orderNo") }}</th><th>{{ t("marketing.reward") }}</th><th>{{ t("marketing.qty") }}</th><th>{{ t("marketing.pointsCost") }}</th><th>{{ t("common.status") }}</th><th>{{ t("marketing.createdAt") }}</th></tr></thead>
+          <tbody><tr v-for="order in redemptions" :key="order.id"><td>{{ order.order_no }}</td><td>{{ order.items.map((line) => pick(line.name, locale)).join(", ") }}</td><td>{{ order.items.reduce((n, line) => n + line.qty, 0) }}</td><td>{{ order.total_points }}</td><td>{{ t(`marketing.redemptionStatus.${order.status}`) }}</td><td>{{ order.created_at.slice(0, 10) }}</td></tr></tbody>
+        </VTable>
       </template>
     </section>
   </div>
 </template>
 
-<style scoped>
-.integral-page {
-  padding-bottom: 60px;
-}
-.marketing-section {
-  background: #fff;
-}
-.marketing-banner {
-  display: block;
-  width: 100%;
-  height: 350px;
-  object-fit: cover;
-}
-.benefits-row {
-  display: grid;
-  grid-template-columns: 1.4fr repeat(3, 1fr);
-  gap: 12px;
-  margin: 20px 0;
-}
-.points-account,
-.value-card {
-  min-height: 106px;
-  border: 1px solid var(--mall-line);
-  background: #fff;
-}
-.points-account {
-  display: flex;
-  align-items: center;
-  gap: 13px;
-  padding: 14px 18px;
-}
-.points-account > img {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-.account-name,
-.points-label,
-.login-copy h2,
-.login-copy p {
-  margin: 0;
-}
-.account-name {
-  font-size: 14px;
-  font-weight: 700;
-}
-.points-label {
-  margin-top: 7px;
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.account-points {
-  display: block;
-  margin-top: 2px;
-  color: var(--mall-red);
-  font-size: 20px;
-}
-.login-copy {
-  min-width: 0;
-  flex: 1;
-}
-.login-copy h2 {
-  font-size: 16px;
-  font-weight: 500;
-}
-.login-copy p {
-  margin-top: 7px;
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.account-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.account-actions .mbtn {
-  min-width: 74px;
-  padding: 4px 8px;
-  text-align: center;
-}
-.value-card {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 0 13px;
-}
-.value-mark {
-  color: var(--mall-red);
-  font-size: 18px;
-  font-weight: 700;
-}
-.value-card strong {
-  font-size: 13px;
-  font-weight: 500;
-}
-.section-heading {
-  border: 1px solid var(--mall-line);
-  background: #fafafa;
-  padding: 14px 18px;
-}
-.section-heading h1 {
-  margin: 0;
-  border-left: 3px solid var(--mall-red);
-  padding-left: 10px;
-  font-size: 17px;
-  font-weight: 500;
-}
-.redeem-bar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 18px;
-  border: 1px solid var(--mall-line);
-  border-top: none;
-  background: #fffafa;
-}
-.redeem-address {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 13px;
-  color: var(--mall-muted);
-}
-.redeem-error {
-  margin: 12px 0 0;
-  padding: 10px 14px;
-  color: #b42318;
-  background: #fff1f0;
-  border: 1px solid #ffd6d2;
-}
-.redeem-notice {
-  margin: 12px 0 0;
-  padding: 10px 14px;
-  color: #067647;
-  background: #ecfdf3;
-  border: 1px solid #abefc6;
-}
-.qty-line {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 8px 0 11px;
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.qty-input {
-  width: 72px;
-}
-.history-heading {
-  margin-top: 26px;
-}
-.integral-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
-  margin-top: 20px;
-}
-.integral-card {
-  min-width: 0;
-  border: 1px solid var(--mall-line);
-  background: #fff;
-}
-.product-image {
-  display: flex;
-  height: 205px;
-  align-items: center;
-  justify-content: center;
-  padding: 14px;
-}
-.product-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-.product-body {
-  padding: 0 14px 14px;
-}
-.product-body h2 {
-  height: 37px;
-  overflow: hidden;
-  margin: 0;
-  color: var(--mall-ink);
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1.45;
-}
-.points-line {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: 10px;
-}
-.points-line strong {
-  color: var(--mall-red);
-  font-size: 17px;
-}
-.points-line s {
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.stock-line {
-  margin: 8px 0 11px;
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.redeem-button {
-  display: block;
-  width: 100%;
-  text-align: center;
-}
-.mock-note {
-  margin: 8px 0 0;
-  color: var(--mall-green);
-  font-size: 12px;
-  text-align: center;
-}
-@media (max-width: 1240px) {
-  .w1200 {
-    width: calc(100% - 32px);
-  }
-}
-@media (max-width: 900px) {
-  .benefits-row {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .points-account {
-    grid-column: span 2;
-  }
-  .integral-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@media (max-width: 640px) {
-  .marketing-banner {
-    height: 220px;
-  }
-  .benefits-row {
-    grid-template-columns: 1fr;
-  }
-  .points-account {
-    grid-column: auto;
-  }
-  .integral-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@media (max-width: 420px) {
-  .integral-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
+
diff --git a/apps/mall/pages/login.vue b/apps/mall/pages/login.vue
index b0f5b2e..2b84776 100644
--- a/apps/mall/pages/login.vue
+++ b/apps/mall/pages/login.vue
@@ -55,129 +55,31 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <section class="auth-page">
-    <div class="auth-inner">
-      <div class="auth-panel">
-        <div class="auth-tabs">
-          <h1>{{ t("auth.loginTab") }}</h1>
-          <NuxtLink to="/register">{{ t("auth.registerTab") }}</NuxtLink>
-        </div>
-        <form @submit.prevent="submit">
-          <label class="field">
-            <span>{{ t("common.email") }}</span>
-            <input v-model.trim="email" class="minput" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
-          </label>
-          <label class="field">
-            <span>{{ t("common.password") }}</span>
-            <input v-model="password" class="minput" type="password" autocomplete="current-password" :placeholder="t('auth.passwordPlaceholder')" />
-          </label>
-          <p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
-          <button class="mbtn red block submit" type="submit" :disabled="submitting">
-            {{ t("auth.loginAction") }}
-          </button>
-        </form>
-        <div class="auth-links">
-          <span>{{ t("auth.noAccount") }}</span>
-          <NuxtLink to="/register">{{ t("auth.registerNow") }}</NuxtLink>
-          <NuxtLink to="/forgot-password">{{ t("auth.forgotPassword") }}</NuxtLink>
-        </div>
+  <section class="min-h-screen bg-bg px-5 py-10 font-sans text-text">
+    <VCard class="mx-auto my-10 max-w-[420px] p-6 sm:p-10">
+      <div class="mb-7 flex items-baseline gap-4 border-b border-border pb-3.5">
+        <h1 class="m-0 text-xl font-semibold">{{ t("auth.loginTab") }}</h1>
+        <NuxtLink class="text-sm text-primary hover:text-primary-hover" to="/register">{{ t("auth.registerTab") }}</NuxtLink>
       </div>
-    </div>
+      <form @submit.prevent="submit">
+        <VField :label="t('common.email')">
+          <VInput v-model.trim="email" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
+        </VField>
+        <VField :label="t('common.password')">
+          <VInput v-model="password" type="password" autocomplete="current-password" :placeholder="t('auth.passwordPlaceholder')" />
+        </VField>
+        <p v-if="errorKey" class="-mt-1 mb-3 text-xs text-danger">{{ t(errorKey) }}</p>
+        <VBtn class="mt-1 w-full" variant="primary" type="submit" :disabled="submitting">
+          {{ t("auth.loginAction") }}
+        </VBtn>
+      </form>
+      <div class="mt-5 flex flex-wrap items-center gap-2 text-xs text-muted">
+        <span>{{ t("auth.noAccount") }}</span>
+        <NuxtLink class="text-primary hover:text-primary-hover" to="/register">{{ t("auth.registerNow") }}</NuxtLink>
+        <NuxtLink class="text-primary hover:text-primary-hover" to="/forgot-password">{{ t("auth.forgotPassword") }}</NuxtLink>
+      </div>
+    </VCard>
   </section>
 </template>
 
-<style scoped>
-.auth-page {
-  min-height: 620px;
-  background: #f6f6f6 url("/mock/login-bg.svg") center top / cover no-repeat;
-  padding: 50px 0;
-  box-sizing: border-box;
-}
-.auth-inner {
-  width: 1200px;
-  min-height: 450px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-}
-.auth-panel {
-  width: 400px;
-  min-height: 450px;
-  box-sizing: border-box;
-  padding: 40px;
-  background: #fff;
-  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
-}
-.auth-tabs {
-  display: flex;
-  align-items: baseline;
-  gap: 18px;
-  margin-bottom: 28px;
-  border-bottom: 1px solid var(--mall-line);
-  padding-bottom: 14px;
-}
-h1 {
-  margin: 0;
-  color: var(--mall-ink);
-  font-size: 20px;
-  font-weight: 600;
-}
-.auth-tabs a {
-  color: var(--mall-faint);
-  font-size: 14px;
-  text-decoration: none;
-}
-.auth-tabs a:hover,
-.auth-links a:hover {
-  color: var(--mall-red);
-}
-.field {
-  display: block;
-  margin-bottom: 18px;
-}
-.field span {
-  display: block;
-  margin-bottom: 7px;
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.submit {
-  margin-top: 4px;
-}
-.error {
-  margin: -4px 0 12px;
-  color: var(--mall-red);
-  font-size: 12px;
-}
-.auth-links {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 18px;
-  color: var(--mall-faint);
-  font-size: 12px;
-  flex-wrap: wrap;
-}
-.auth-links a {
-  color: var(--mall-red);
-  text-decoration: none;
-}
-@media (max-width: 1240px) {
-  .auth-inner {
-    width: calc(100% - 40px);
-  }
-}
-@media (max-width: 640px) {
-  .auth-page {
-    padding: 20px;
-  }
-  .auth-inner {
-    width: 100%;
-  }
-  .auth-panel {
-    width: 100%;
-    padding: 30px 24px;
-  }
-}
-</style>
+
diff --git a/apps/mall/pages/register.vue b/apps/mall/pages/register.vue
index 7d24ede..bfbfca6 100644
--- a/apps/mall/pages/register.vue
+++ b/apps/mall/pages/register.vue
@@ -55,147 +55,37 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <section class="auth-page">
-    <div class="auth-inner">
-      <div class="auth-panel">
-        <div class="auth-tabs">
-          <h1>{{ t("auth.registerTab") }}</h1>
-          <NuxtLink to="/login">{{ t("auth.loginTab") }}</NuxtLink>
-        </div>
-        <form @submit.prevent="submit">
-          <label class="field">
-            <span>{{ t("common.displayName") }}</span>
-            <input v-model.trim="displayName" class="minput" type="text" autocomplete="name" :placeholder="t('auth.displayNamePlaceholder')" />
-          </label>
-          <label class="field">
-            <span>{{ t("common.email") }}</span>
-            <input v-model.trim="email" class="minput" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
-          </label>
-          <label class="field">
-            <span>{{ t("common.password") }}</span>
-            <input v-model="password" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.passwordPlaceholder')" />
-          </label>
-          <label class="field">
-            <span>{{ t("auth.confirmPassword") }}</span>
-            <input v-model="confirmPassword" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.confirmPasswordPlaceholder')" />
-          </label>
-          <p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
-          <button class="mbtn red block submit" type="submit" :disabled="submitting">
-            {{ t("auth.registerAction") }}
-          </button>
-        </form>
-        <div class="auth-links">
-          <span>{{ t("auth.haveAccount") }}</span>
-          <NuxtLink to="/login">{{ t("auth.loginNow") }}</NuxtLink>
-          <NuxtLink to="/forgot-password">{{ t("auth.forgotPassword") }}</NuxtLink>
-        </div>
+  <section class="min-h-screen bg-bg px-5 py-10 font-sans text-text">
+    <VCard class="mx-auto my-10 max-w-[420px] p-6 sm:p-10">
+      <div class="mb-6 flex items-baseline gap-4 border-b border-border pb-3.5">
+        <h1 class="m-0 text-xl font-semibold">{{ t("auth.registerTab") }}</h1>
+        <NuxtLink class="text-sm text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginTab") }}</NuxtLink>
       </div>
-    </div>
+      <form @submit.prevent="submit">
+        <VField :label="t('common.displayName')">
+          <VInput v-model.trim="displayName" type="text" autocomplete="name" :placeholder="t('auth.displayNamePlaceholder')" />
+        </VField>
+        <VField :label="t('common.email')">
+          <VInput v-model.trim="email" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
+        </VField>
+        <VField :label="t('common.password')">
+          <VInput v-model="password" type="password" autocomplete="new-password" :placeholder="t('auth.passwordPlaceholder')" />
+        </VField>
+        <VField :label="t('auth.confirmPassword')">
+          <VInput v-model="confirmPassword" type="password" autocomplete="new-password" :placeholder="t('auth.confirmPasswordPlaceholder')" />
+        </VField>
+        <p v-if="errorKey" class="-mt-1 mb-3 text-xs text-danger">{{ t(errorKey) }}</p>
+        <VBtn class="mt-1 w-full" variant="primary" type="submit" :disabled="submitting">
+          {{ t("auth.registerAction") }}
+        </VBtn>
+      </form>
+      <div class="mt-4 flex flex-wrap items-center gap-2 text-xs text-muted">
+        <span>{{ t("auth.haveAccount") }}</span>
+        <NuxtLink class="text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginNow") }}</NuxtLink>
+        <NuxtLink class="text-primary hover:text-primary-hover" to="/forgot-password">{{ t("auth.forgotPassword") }}</NuxtLink>
+      </div>
+    </VCard>
   </section>
 </template>
 
-<style scoped>
-.auth-page {
-  min-height: 720px;
-  background: #f6f6f6 url("/mock/login-bg.svg") center top / cover no-repeat;
-  padding: 50px 0;
-  box-sizing: border-box;
-}
-.auth-inner {
-  width: 1200px;
-  min-height: 540px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-}
-.auth-panel {
-  width: 400px;
-  min-height: 540px;
-  box-sizing: border-box;
-  padding: 40px;
-  background: #fff;
-  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
-}
-.auth-tabs {
-  display: flex;
-  align-items: baseline;
-  gap: 18px;
-  margin-bottom: 24px;
-  border-bottom: 1px solid var(--mall-line);
-  padding-bottom: 14px;
-}
-h1 {
-  margin: 0;
-  color: var(--mall-ink);
-  font-size: 20px;
-  font-weight: 600;
-}
-.auth-tabs a,
-.auth-links a {
-  color: var(--mall-red);
-  font-size: 13px;
-  text-decoration: none;
-}
-.auth-tabs a:hover,
-.auth-links a:hover {
-  color: var(--mall-red-dark);
-}
-.field {
-  display: block;
-  margin-bottom: 13px;
-}
-.field > span:first-child {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.code-row {
-  display: flex;
-  gap: 8px;
-}
-.code-row .minput {
-  min-width: 0;
-  flex: 1;
-}
-.code-button {
-  flex: 0 0 100px;
-  padding: 5px 8px;
-  white-space: nowrap;
-}
-.submit {
-  margin-top: 4px;
-}
-.error {
-  margin: -2px 0 10px;
-  color: var(--mall-red);
-  font-size: 12px;
-}
-.auth-links {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 17px;
-  color: var(--mall-faint);
-  font-size: 12px;
-  flex-wrap: wrap;
-}
-@media (max-width: 1240px) {
-  .auth-inner {
-    width: calc(100% - 40px);
-  }
-}
-@media (max-width: 640px) {
-  .auth-page {
-    padding: 20px;
-  }
-  .auth-inner {
-    width: 100%;
-  }
-  .auth-panel {
-    width: 100%;
-    padding: 30px 24px;
-  }
-}
-</style>
+
diff --git a/apps/mall/pages/search.vue b/apps/mall/pages/search.vue
index e721805..8842342 100644
--- a/apps/mall/pages/search.vue
+++ b/apps/mall/pages/search.vue
@@ -138,145 +138,34 @@ const sortOptions = computed(() => [
 </script>
 
 <template>
-  <div class="search-page section-bg">
+  <div class="min-h-screen bg-bg pb-12 font-sans text-text">
     <UiBreadcrumb :items="breadcrumbItems" />
-    <main class="w1200">
-      <section class="filter mpanel" :aria-label="t('search.sort')">
-        <div class="filter-row">
-          <strong>{{ t("search.category") }}</strong>
-          <div class="filter-options">
-            <button type="button" :class="{ active: !state.category }" @click="chooseCategory()">{{ t("search.all") }}</button>
-            <button
-              v-for="category in topLevelCategories"
-              :key="category.id"
-              type="button"
-              :class="{ active: category.id === state.category }"
-              @click="chooseCategory(category.id)"
-            >{{ pick(category.name, locale) }}</button>
-            <template v-if="selectedPath.length">
-              <button
-                v-for="category in selectedPath.slice(1)"
-                :key="`path-${category.id}`"
-                type="button"
-                :class="{ active: category.id === state.category }"
-                @click="chooseCategory(category.id)"
-              >{{ pick(category.name, locale) }}</button>
-            </template>
-            <button
-              v-for="category in categoryChildren"
-              :key="`child-${category.id}`"
-              type="button"
-              :class="{ active: category.id === state.category }"
-              @click="chooseCategory(category.id)"
-            >{{ pick(category.name, locale) }}</button>
+    <main class="mx-auto w-full max-w-mall px-4">
+      <VCard :padded="false" class="border border-border bg-surface px-5">
+        <div class="flex min-h-12 items-start gap-4 border-b border-border py-3 last:border-b-0">
+          <strong class="w-[90px] shrink-0 text-[13px] font-semibold leading-7 text-text">{{ t("search.category") }}</strong>
+          <div class="flex flex-wrap gap-x-2 gap-y-1">
+            <button type="button" class="rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 text-muted hover:bg-primary hover:text-white" :class="!state.category ? 'bg-primary text-white' : ''" @click="chooseCategory()">{{ t("search.all") }}</button>
+            <button v-for="category in topLevelCategories" :key="category.id" type="button" class="rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 text-muted hover:bg-primary hover:text-white" :class="category.id === state.category ? 'bg-primary text-white' : ''" @click="chooseCategory(category.id)">{{ pick(category.name, locale) }}</button>
+            <template v-if="selectedPath.length"><button v-for="category in selectedPath.slice(1)" :key="`path-${category.id}`" type="button" class="rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 text-muted hover:bg-primary hover:text-white" :class="category.id === state.category ? 'bg-primary text-white' : ''" @click="chooseCategory(category.id)">{{ pick(category.name, locale) }}</button></template>
+            <button v-for="category in categoryChildren" :key="`child-${category.id}`" type="button" class="rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 text-muted hover:bg-primary hover:text-white" :class="category.id === state.category ? 'bg-primary text-white' : ''" @click="chooseCategory(category.id)">{{ pick(category.name, locale) }}</button>
           </div>
         </div>
-        <div v-if="brands.length" class="filter-row">
-          <strong>{{ t("search.brand") }}</strong>
-          <div class="filter-options">
-            <button type="button" :class="{ active: !state.brand }" @click="chooseBrand()">{{ t("search.all") }}</button>
-            <button
-              v-for="brand in brands"
-              :key="brand.id"
-              type="button"
-              :class="{ active: brand.id === state.brand }"
-              @click="chooseBrand(brand.id)"
-            >{{ pick(brand.name, locale) }}</button>
-          </div>
+        <div v-if="brands.length" class="flex min-h-12 items-start gap-4 border-b border-border py-3">
+          <strong class="w-[90px] shrink-0 text-[13px] font-semibold leading-7 text-text">{{ t("search.brand") }}</strong>
+          <div class="flex flex-wrap gap-x-2 gap-y-1"><button type="button" class="rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 text-muted hover:bg-primary hover:text-white" :class="!state.brand ? 'bg-primary text-white' : ''" @click="chooseBrand()">{{ t("search.all") }}</button><button v-for="brand in brands" :key="brand.id" type="button" class="rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 text-muted hover:bg-primary hover:text-white" :class="brand.id === state.brand ? 'bg-primary text-white' : ''" @click="chooseBrand(brand.id)">{{ pick(brand.name, locale) }}</button></div>
         </div>
-        <div class="filter-row sort-row">
-          <strong>{{ t("search.sort") }}</strong>
-          <div class="filter-options">
-            <button
-              v-for="option in sortOptions"
-              :key="option.key"
-              type="button"
-              :class="{ active: state.sort === option.key }"
-              :aria-label="option.key === state.sort ? (state.order === 'asc' ? t('search.ascending') : t('search.descending')) : undefined"
-              @click="chooseSort(option.key)"
-            >
-              {{ option.label }}
-              <span v-if="state.sort === option.key && option.key !== 'default'" aria-hidden="true">{{ state.order === "asc" ? "↑" : "↓" }}</span>
-            </button>
-          </div>
+        <div class="flex min-h-12 items-start gap-4 py-3">
+          <strong class="w-[90px] shrink-0 text-[13px] font-semibold leading-7 text-text">{{ t("search.sort") }}</strong>
+          <div class="flex flex-wrap gap-x-2 gap-y-1"><button v-for="option in sortOptions" :key="option.key" type="button" class="min-w-[60px] rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 text-muted hover:bg-primary hover:text-white" :class="state.sort === option.key ? 'bg-primary text-white' : ''" :aria-label="option.key === state.sort ? (state.order === 'asc' ? t('search.ascending') : t('search.descending')) : undefined" @click="chooseSort(option.key)">{{ option.label }} <span v-if="state.sort === option.key && option.key !== 'default'" aria-hidden="true">{{ state.order === "asc" ? "↑" : "↓" }}</span></button></div>
         </div>
-      </section>
+      </VCard>
 
-      <div class="result-head">
-        <span>{{ t("search.resultCount", { n: result.total }) }}</span>
-      </div>
-      <div v-if="result.items.length" class="product-grid">
-        <UiProductCard v-for="product in result.items" :key="product.id" :product="product" />
-      </div>
+      <div class="px-0.5 pb-3 pt-[22px] text-[13px] text-muted">{{ t("search.resultCount", { n: result.total }) }}</div>
+      <div v-if="result.items.length" class="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]"><UiProductCard v-for="product in result.items" :key="product.id" :product="product" /></div>
       <UiEmptyState v-else :text="t('search.empty')" />
       <UiPagination :page="result.page" :total="result.total" :per-page="result.per_page" @change="(page) => replaceQuery({ page: String(page) })" />
     </main>
   </div>
 </template>
 
-<style scoped>
-.search-page {
-  min-height: 650px;
-  padding-bottom: 50px;
-}
-.filter {
-  background: #fff;
-  border: 1px solid var(--mall-line);
-  padding: 2px 20px;
-}
-.filter-row {
-  display: flex;
-  min-height: 48px;
-  align-items: flex-start;
-  border-bottom: 1px solid var(--mall-line);
-  padding: 12px 0 8px;
-}
-.filter-row:last-child {
-  border-bottom: 0;
-}
-.filter-row strong {
-  width: 90px;
-  flex: 0 0 90px;
-  color: var(--mall-ink);
-  font-size: 13px;
-  line-height: 28px;
-}
-.filter-options {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-}
-.filter-options button {
-  border: 0;
-  background: transparent;
-  color: var(--mall-muted);
-  cursor: pointer;
-  font-size: 13px;
-  line-height: 28px;
-  padding: 0 10px;
-}
-.filter-options button:hover,
-.filter-options button.active {
-  background: var(--mall-red);
-  color: #fff;
-  border-radius: var(--mall-radius);
-}
-.sort-row .filter-options button {
-  min-width: 60px;
-}
-.result-head {
-  color: var(--mall-muted);
-  font-size: 13px;
-  padding: 22px 2px 12px;
-}
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 16px;
-}
-@media (max-width: 900px) {
-  .product-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-</style>
diff --git a/apps/mall/pages/seckill.vue b/apps/mall/pages/seckill.vue
index bf1b447..3097577 100644
--- a/apps/mall/pages/seckill.vue
+++ b/apps/mall/pages/seckill.vue
@@ -87,246 +87,33 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="seckill-page">
+  <div class="min-h-screen bg-bg pb-14 font-sans text-text">
     <UiBreadcrumb :items="breadcrumb" />
-    <section class="w1200 marketing-section">
-      <header class="section-heading">
-        <h1>{{ t("marketing.seckillTitle") }}</h1>
-      </header>
-      <div class="session-tabs" role="tablist">
-        <button
-          v-for="(session, index) in sessions"
-          :key="session.id"
-          type="button"
-          class="session-tab"
-          :class="{ active: index === activeSessionIndex }"
-          role="tab"
-          :aria-selected="index === activeSessionIndex"
-          @click="activeSessionIndex = index; updateCountdown()"
-        >
-          <strong>{{ pick(session.label, locale) }}</strong>
-          <span>{{ index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming") }}</span>
+    <section class="mx-auto max-w-mall bg-surface px-4">
+      <header class="border border-border border-b-0 bg-bg px-4 py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-[17px] font-medium">{{ t("marketing.seckillTitle") }}</h1></header>
+      <div class="grid grid-cols-2 border border-border border-b-0 sm:grid-cols-4" role="tablist">
+        <button v-for="(session, index) in sessions" :key="session.id" type="button" class="flex min-h-[70px] cursor-pointer flex-col items-center justify-center border-0 border-r border-border bg-surface px-2 text-sm last:border-r-0" :class="index === activeSessionIndex ? 'bg-primary-soft text-primary' : ''" role="tab" :aria-selected="index === activeSessionIndex" @click="activeSessionIndex = index; updateCountdown()">
+          <strong>{{ pick(session.label, locale) }}</strong><span class="text-xs text-muted">{{ index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming") }}</span>
         </button>
       </div>
-      <p v-if="activeSession" class="countdown" aria-live="polite">
-        {{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}
-      </p>
-      <p v-if="error" class="seckill-error" role="alert">{{ error }}</p>
-
-      <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
-      <div v-else-if="activeSession && activeSession.items.length" class="seckill-grid">
-        <article v-for="item in activeSession.items" :key="item.id" class="seckill-card hover-lift">
-          <NuxtLink :to="`/goods/${item.product_slug}`" class="product-image">
-            <img :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" loading="lazy" />
-          </NuxtLink>
-          <div class="product-body">
-            <NuxtLink :to="`/goods/${item.product_slug}`" class="product-name">{{ pick(item.product_name, locale) }}</NuxtLink>
-            <p class="price-line">
-              <span class="sale-price"><PriceText :amount-minor="item.sale_price_minor" :currency="item.currency" /></span>
-              <s class="original-price"><PriceText :amount-minor="item.original_price_minor" :currency="item.original_currency" /></s>
-            </p>
-            <div class="progress-line">
-              <div class="progress-track"><span :style="{ width: `${soldPct(item)}%` }"></span></div>
-              <span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span>
-            </div>
-            <p class="stock-line">{{ t("marketing.stock", { n: item.reserved_stock }) }}</p>
-            <button
-              type="button"
-              class="mbtn red grab-button"
-              :disabled="item.reserved_stock <= 0 || addingSkuId === item.sku_id"
-              @click="addToCart(item)"
-            >
-              {{ addingSkuId === item.sku_id ? t("common.loading") : t("marketing.buyNow") }}
-            </button>
+      <p v-if="activeSession" class="m-0 border border-border bg-bg px-4 py-3 text-center text-lg font-semibold text-primary" aria-live="polite">{{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}</p>
+      <p v-if="error" class="my-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger" role="alert">{{ error }}</p>
+      <div v-if="loading" class="py-6 text-muted">{{ t("common.loading") }}</div>
+      <div v-else-if="activeSession && activeSession.items.length" class="grid gap-4 py-5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
+        <VCard v-for="item in activeSession.items" :key="item.id" :padded="false" class="min-w-0 overflow-hidden">
+          <NuxtLink :to="`/goods/${item.product_slug}`" class="flex h-52 items-center justify-center bg-bg"><img class="h-full w-full object-contain" :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" loading="lazy" /></NuxtLink>
+          <div class="p-3.5">
+            <NuxtLink :to="`/goods/${item.product_slug}`" class="line-clamp-2 font-medium hover:text-primary">{{ pick(item.product_name, locale) }}</NuxtLink>
+            <p class="my-2 flex items-center gap-2"><span class="text-lg font-semibold text-primary"><PriceText :amount-minor="item.sale_price_minor" :currency="item.currency" /></span><s class="text-sm text-muted"><PriceText :amount-minor="item.original_price_minor" :currency="item.original_currency" /></s></p>
+            <div class="flex items-center gap-2 text-xs text-muted"><div class="h-2 flex-1 overflow-hidden rounded-full bg-bg"><span class="block h-full bg-primary" :style="{ width: `${soldPct(item)}%` }"></span></div><span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span></div>
+            <p class="my-2 text-sm text-muted">{{ t("marketing.stock", { n: item.reserved_stock }) }}</p>
+            <VBtn class="w-full" variant="primary" type="button" :disabled="item.reserved_stock <= 0 || addingSkuId === item.sku_id" @click="addToCart(item)">{{ addingSkuId === item.sku_id ? t("common.loading") : t("marketing.buyNow") }}</VBtn>
           </div>
-        </article>
+        </VCard>
       </div>
       <UiEmptyState v-else :text="t('marketing.noSeckillProducts')" />
     </section>
   </div>
 </template>
 
-<style scoped>
-.seckill-page {
-  padding-bottom: 60px;
-}
-.marketing-section {
-  background: #fff;
-}
-.section-heading {
-  border: 1px solid var(--mall-line);
-  border-bottom: 0;
-  background: #fafafa;
-  padding: 14px 18px;
-}
-.section-heading h1 {
-  margin: 0;
-  border-left: 3px solid var(--mall-red);
-  padding-left: 10px;
-  font-size: 17px;
-  font-weight: 500;
-}
-.session-tabs {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  border: 1px solid var(--mall-line);
-  border-bottom: 0;
-}
-.session-tab {
-  display: flex;
-  min-height: 70px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 0;
-  border-right: 1px solid var(--mall-line);
-  background: #fff;
-  color: var(--mall-muted);
-  cursor: pointer;
-}
-.session-tab:last-child {
-  border-right: 0;
-}
-.session-tab strong {
-  color: var(--mall-ink);
-  font-size: 19px;
-  font-weight: 600;
-}
-.session-tab span {
-  margin-top: 4px;
-  font-size: 12px;
-}
-.session-tab.active {
-  background: var(--mall-red);
-  color: #fff;
-}
-.session-tab.active strong {
-  color: #fff;
-}
-.session-tab.ended {
-  color: var(--mall-faint);
-}
-.session-tab.ended strong {
-  color: var(--mall-faint);
-}
-.seckill-error {
-  margin: 12px 0 0;
-  padding: 10px 14px;
-  color: #b42318;
-  background: #fff1f0;
-  border: 1px solid #ffd6d2;
-}
-.stock-line {
-  margin: 8px 0 10px;
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.countdown {
-  margin: 0;
-  border: 1px solid var(--mall-line);
-  border-top: 0;
-  padding: 10px;
-  color: var(--mall-red);
-  font-size: 13px;
-  text-align: center;
-}
-.seckill-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
-  margin-top: 20px;
-}
-.seckill-card {
-  min-width: 0;
-  border: 1px solid var(--mall-line);
-  background: #fff;
-}
-.product-image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 205px;
-  padding: 14px;
-}
-.product-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-.product-body {
-  padding: 0 14px 14px;
-}
-.product-name {
-  display: block;
-  height: 38px;
-  overflow: hidden;
-  color: var(--mall-ink);
-  font-size: 13px;
-  line-height: 1.45;
-  text-decoration: none;
-}
-.product-name:hover {
-  color: var(--mall-red);
-}
-.price-line {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  margin: 10px 0;
-}
-.sale-price {
-  color: var(--mall-red);
-  font-size: 19px;
-  font-weight: 700;
-}
-.original-price {
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.progress-line {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--mall-faint);
-  font-size: 11px;
-}
-.progress-track {
-  height: 7px;
-  flex: 1;
-  overflow: hidden;
-  border-radius: 4px;
-  background: #f5d9db;
-}
-.progress-track span {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--mall-red);
-}
-.grab-button {
-  display: block;
-  margin-top: 13px;
-  text-align: center;
-}
-@media (max-width: 1240px) {
-  .w1200 {
-    width: calc(100% - 32px);
-  }
-}
-@media (max-width: 840px) {
-  .seckill-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@media (max-width: 520px) {
-  .session-tab {
-    min-height: 62px;
-  }
-  .session-tab strong {
-    font-size: 15px;
-  }
-  .seckill-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
+
diff --git a/apps/mall/pages/stores/[id].vue b/apps/mall/pages/stores/[id].vue
index 34135b7..09b1a61 100644
--- a/apps/mall/pages/stores/[id].vue
+++ b/apps/mall/pages/stores/[id].vue
@@ -18,10 +18,16 @@ const slug = computed(() => {
 
 // A rejected read (unknown or suspended slug) leaves this null, which renders
 // the "unknown store" branch rather than an invented profile.
-const { data: shop } = await useAsyncData("shop-profile", () => $api.getShop(slug.value), {
-  watch: [slug],
-  default: () => null,
-});
+const { data: shop } = await useAsyncData(
+  // Keyed by slug: Nuxt remounts this page on param change, and a static key
+  // would serve the previous store's cached entry without re-running the handler.
+  `shop-profile-${slug.value}`,
+  () => $api.getShop(slug.value),
+  {
+    watch: [slug],
+    default: () => null,
+  },
+);
 const store = computed(() => shop.value);
 
 const favorite = ref(false);
@@ -37,7 +43,7 @@ const perPage = 12;
 const emptyPage: Paged<Product> = { items: [], total: 0, page: 1, per_page: perPage };
 
 const { data: productResult } = await useAsyncData(
-  "shop-products",
+  `shop-products-${slug.value}`,
   () => {
     const current = store.value;
     if (!current) return Promise.resolve(emptyPage);
@@ -154,317 +160,34 @@ const toggleFavorite = async (): Promise<void> => {
 </script>
 
 <template>
-  <div class="store-page">
+  <div class="min-h-screen bg-bg pb-16 font-sans text-text">
     <UiBreadcrumb :items="breadcrumb" />
     <template v-if="store">
-      <div v-if="store.banner" class="w1200 store-banner">
-        <img :src="store.banner" :alt="pick(store.name, locale)" />
-      </div>
-      <div class="w1200 store-layout">
-        <aside class="store-rail">
-          <section class="mpanel store-card">
-            <div class="store-heading">
-              <img v-if="store.logo" :src="store.logo" :alt="pick(store.name, locale)" />
-              <span v-else class="store-logo-placeholder" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
-              <div>
-                <h1>{{ pick(store.name, locale) }}</h1>
-                <p>{{ t("stores.positiveRate") }}</p>
-              </div>
-            </div>
-            <div v-if="rateRows.length" class="rate-list">
-              <div v-for="row in rateRows" :key="row.label" class="rate-row">
-                <span>{{ row.label }}</span>
-                <UiRatingStars :value="row.value" :size="13" />
-                <strong>{{ row.value.toFixed(1) }}</strong>
-              </div>
-            </div>
-            <dl class="store-info">
-              <div v-if="store.company"><dt>{{ t("stores.company") }}</dt><dd>{{ store.company }}</dd></div>
-              <div v-if="store.region"><dt>{{ t("stores.region") }}</dt><dd>{{ store.region }}</dd></div>
-              <div v-if="store.address"><dt>{{ t("stores.address") }}</dt><dd>{{ pick(store.address, locale) }}</dd></div>
-            </dl>
-            <button
-              type="button"
-              class="mbtn favorite-button"
-              :class="{ selected: favorite }"
-              :disabled="favoriteLoading || favoriteBusy"
-              @click="toggleFavorite"
-            >
-              {{ favorite ? t("stores.favorited") : t("stores.favorite") }}
-            </button>
-            <p v-if="favoriteError" class="favorite-error">{{ favoriteError }}</p>
-          </section>
-
-          <section v-if="store.notice || store.after_sale" class="mpanel notice-card">
-            <template v-if="store.notice">
-              <h2 class="rail-title">{{ t("stores.notice") }}</h2>
-              <p>{{ pick(store.notice, locale) }}</p>
-            </template>
-            <template v-if="store.after_sale">
-              <h2 class="rail-title">{{ t("stores.afterSale") }}</h2>
-              <p>{{ pick(store.after_sale, locale) }}</p>
-            </template>
-          </section>
+      <div v-if="store.banner" class="mx-auto h-[350px] w-full max-w-mall overflow-hidden bg-bg px-4 max-sm:h-[220px]"><img class="h-full w-full object-cover" :src="store.banner" :alt="pick(store.name, locale)" /></div>
+      <div class="mx-auto mt-5 grid w-full max-w-mall gap-5 px-4 lg:grid-cols-[270px_minmax(0,1fr)] lg:items-start">
+        <aside class="min-w-0 space-y-5">
+          <VCard>
+            <div class="flex items-center gap-3 border-b border-border pb-3"><img v-if="store.logo" class="h-[58px] w-[58px] border border-border object-contain" :src="store.logo" :alt="pick(store.name, locale)" /><span v-else class="flex h-[58px] w-[58px] items-center justify-center border border-border bg-bg text-lg text-muted">{{ pick(store.name, locale).slice(0, 1) }}</span><div><h1 class="m-0 text-[15px] leading-[1.45]">{{ pick(store.name, locale) }}</h1><p class="mt-1 text-xs text-primary">{{ t("stores.positiveRate") }}</p></div></div>
+            <div v-if="rateRows.length" class="space-y-1 border-b border-border py-3"><div v-for="row in rateRows" :key="row.label" class="flex min-h-[25px] items-center gap-1 text-xs text-muted"><span class="w-16">{{ row.label }}</span><UiRatingStars :value="row.value" :size="13" /><strong class="ml-auto font-medium text-primary">{{ row.value.toFixed(1) }}</strong></div></div>
+            <dl class="my-3 text-xs text-muted"><div v-if="store.company" class="my-2 grid grid-cols-[42px_1fr] gap-2"><dt class="text-muted">{{ t("stores.company") }}</dt><dd class="m-0 min-w-0 break-words">{{ store.company }}</dd></div><div v-if="store.region" class="my-2 grid grid-cols-[42px_1fr] gap-2"><dt class="text-muted">{{ t("stores.region") }}</dt><dd class="m-0 min-w-0 break-words">{{ store.region }}</dd></div><div v-if="store.address" class="my-2 grid grid-cols-[42px_1fr] gap-2"><dt class="text-muted">{{ t("stores.address") }}</dt><dd class="m-0 min-w-0 break-words">{{ pick(store.address, locale) }}</dd></div></dl>
+            <VBtn class="w-full" :class="favorite ? 'border-primary text-primary' : ''" type="button" :disabled="favoriteLoading || favoriteBusy" @click="toggleFavorite">{{ favorite ? t("stores.favorited") : t("stores.favorite") }}</VBtn>
+            <p v-if="favoriteError" class="mt-1.5 text-xs text-danger">{{ favoriteError }}</p>
+          </VCard>
+          <VCard v-if="store.notice || store.after_sale">
+            <template v-if="store.notice"><h2 class="mb-3 border-l-[3px] border-primary pl-2 text-sm font-medium">{{ t("stores.notice") }}</h2><p class="text-sm text-text">{{ pick(store.notice, locale) }}</p></template>
+            <template v-if="store.after_sale"><h2 class="mb-3 border-l-[3px] border-primary pl-2 text-sm font-medium">{{ t("stores.afterSale") }}</h2><p class="text-sm text-text">{{ pick(store.after_sale, locale) }}</p></template>
+          </VCard>
         </aside>
 
-        <section class="store-products">
-          <header class="product-toolbar">
-            <h2>{{ t("stores.storeProducts") }}</h2>
-            <div class="product-sorts" role="tablist">
-              <button type="button" :class="{ active: sortMode === 'default' }" @click="chooseSort('default')">{{ t("stores.sortDefault") }}</button>
-              <button type="button" :class="{ active: sortMode === 'price' }" @click="chooseSort('price')">{{ t("stores.sortPrice") }}</button>
-            </div>
-          </header>
-          <div v-if="productResult.items.length" class="product-grid">
-            <UiProductCard v-for="product in productResult.items" :key="product.id" :product="product" />
-          </div>
+        <section class="min-w-0">
+          <header class="flex items-center justify-between border border-border bg-bg px-4 py-3 max-sm:flex-col max-sm:items-start max-sm:gap-2.5"><h2 class="m-0 border-l-[3px] border-primary pl-2 text-[15px] font-medium">{{ t("stores.storeProducts") }}</h2><div class="flex"><button type="button" class="border-0 border-r border-border bg-transparent px-3 py-0 text-xs text-muted hover:text-primary" :class="sortMode === 'default' ? 'font-bold text-primary' : ''" @click="chooseSort('default')">{{ t("stores.sortDefault") }}</button><button type="button" class="border-0 bg-transparent px-3 py-0 text-xs text-muted hover:text-primary" :class="sortMode === 'price' ? 'font-bold text-primary' : ''" @click="chooseSort('price')">{{ t("stores.sortPrice") }}</button></div></header>
+          <div v-if="productResult.items.length" class="mt-4 grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]"><UiProductCard v-for="product in productResult.items" :key="product.id" :product="product" /></div>
           <UiEmptyState v-else :text="t('stores.noProducts')" />
           <UiPagination :page="productResult.page" :total="productResult.total" :per-page="productResult.per_page" @change="page = $event" />
         </section>
       </div>
     </template>
-    <div v-else class="w1200 missing-store">
-      <UiEmptyState :text="t('stores.unknownStore')" />
-      <NuxtLink to="/stores" class="mbtn">{{ t("stores.backToStores") }}</NuxtLink>
-    </div>
+    <div v-else class="mx-auto min-h-[360px] w-full max-w-mall px-4 pt-[60px] text-center"><UiEmptyState :text="t('stores.unknownStore')" /><NuxtLink to="/stores" class="mt-4 inline-flex items-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text no-underline">{{ t("stores.backToStores") }}</NuxtLink></div>
   </div>
 </template>
 
-<style scoped>
-.store-page {
-  padding-bottom: 60px;
-}
-.store-banner {
-  height: 350px;
-  overflow: hidden;
-  background: var(--mall-bg);
-}
-.store-banner img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.store-layout {
-  display: grid;
-  grid-template-columns: 270px 1fr;
-  gap: 20px;
-  margin-top: 20px;
-  align-items: start;
-}
-.store-rail {
-  min-width: 0;
-}
-.mpanel {
-  padding: 16px;
-  border: 1px solid var(--mall-line);
-}
-.store-card {
-  margin-bottom: 20px;
-}
-.store-heading {
-  display: flex;
-  gap: 11px;
-  align-items: center;
-  padding-bottom: 13px;
-  border-bottom: 1px solid var(--mall-line);
-}
-.store-heading img {
-  width: 58px;
-  height: 58px;
-  border: 1px solid var(--mall-line);
-  object-fit: contain;
-}
-.store-heading h1 {
-  margin: 0;
-  font-size: 15px;
-  line-height: 1.45;
-}
-.store-heading p {
-  margin: 4px 0 0;
-  color: var(--mall-red);
-  font-size: 12px;
-}
-.rate-list {
-  padding: 12px 0 4px;
-  border-bottom: 1px solid var(--mall-line);
-}
-.rate-row {
-  display: flex;
-  align-items: center;
-  min-height: 25px;
-  gap: 5px;
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.rate-row > span:first-child {
-  width: 64px;
-}
-.rate-row strong {
-  margin-left: auto;
-  color: var(--mall-red);
-  font-weight: 500;
-}
-.store-info {
-  margin: 12px 0;
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.store-info > div {
-  display: grid;
-  grid-template-columns: 42px 1fr;
-  gap: 7px;
-  margin: 8px 0;
-}
-.store-info dt {
-  color: var(--mall-faint);
-}
-.store-info dd {
-  min-width: 0;
-  margin: 0;
-  line-height: 1.4;
-  overflow-wrap: anywhere;
-}
-.favorite-button {
-  width: 100%;
-}
-.favorite-button.selected {
-  border-color: var(--mall-red);
-  color: var(--mall-red);
-}
-.favorite-error {
-  margin: 6px 0 0;
-  color: var(--mall-red);
-  font-size: 12px;
-}
-.rail-title {
-  margin: 0 0 12px;
-  border-left: 3px solid var(--mall-red);
-  padding-left: 9px;
-  font-size: 14px;
-  font-weight: 500;
-}
-.rank-item {
-  display: grid;
-  grid-template-columns: 18px 48px 1fr;
-  gap: 6px;
-  align-items: center;
-  position: relative;
-  padding: 9px 0;
-  border-top: 1px solid var(--mall-line);
-  color: inherit;
-  text-decoration: none;
-}
-.rank-number {
-  color: var(--mall-red);
-  font-size: 12px;
-  text-align: center;
-}
-.rank-item img {
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
-}
-.rank-copy {
-  min-width: 0;
-}
-.rank-name,
-.rank-sales {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rank-name {
-  font-size: 12px;
-}
-.rank-sales {
-  margin-top: 4px;
-  color: var(--mall-faint);
-  font-size: 11px;
-}
-.rank-price {
-  grid-column: 2 / 4;
-  color: var(--mall-red);
-  font-size: 12px;
-  text-align: right;
-}
-.store-products {
-  min-width: 0;
-}
-.product-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: 1px solid var(--mall-line);
-  background: #fafafa;
-  padding: 12px 16px;
-}
-.product-toolbar h2 {
-  margin: 0;
-  border-left: 3px solid var(--mall-red);
-  padding-left: 9px;
-  font-size: 15px;
-  font-weight: 500;
-}
-.product-sorts {
-  display: flex;
-}
-.product-sorts button {
-  border: 0;
-  border-right: 1px solid var(--mall-line-dark);
-  background: transparent;
-  padding: 2px 12px;
-  color: var(--mall-muted);
-  font-size: 12px;
-  cursor: pointer;
-}
-.product-sorts button:last-child {
-  border-right: 0;
-  padding-right: 0;
-}
-.product-sorts button.active {
-  color: var(--mall-red);
-  font-weight: 700;
-}
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 14px;
-  margin-top: 15px;
-}
-.product-grid :deep(.card) {
-  min-width: 0;
-}
-.missing-store {
-  min-height: 360px;
-  padding-top: 60px;
-  text-align: center;
-}
-@media (max-width: 1240px) {
-  .w1200 {
-    width: calc(100% - 32px);
-  }
-}
-@media (max-width: 840px) {
-  .store-layout {
-    grid-template-columns: 1fr;
-  }
-  .product-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@media (max-width: 520px) {
-  .store-banner {
-    height: 220px;
-  }
-  .product-toolbar {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 10px;
-  }
-  .product-sorts button {
-    padding-left: 7px;
-    padding-right: 7px;
-  }
-}
-</style>
diff --git a/apps/mall/pages/stores/index.vue b/apps/mall/pages/stores/index.vue
index a1cc832..a82a9d0 100644
--- a/apps/mall/pages/stores/index.vue
+++ b/apps/mall/pages/stores/index.vue
@@ -15,191 +15,25 @@ const breadcrumb = computed(() => [
 </script>
 
 <template>
-  <div class="stores-page">
+  <div class="min-h-screen bg-bg pb-16 font-sans text-text">
     <UiBreadcrumb :items="breadcrumb" />
-    <section class="w1200 store-directory">
-      <header class="sort-row">
-        <h1>{{ t("stores.directory") }}</h1>
-      </header>
-
-      <div v-if="stores.length" class="store-list">
-        <article v-for="store in stores" :key="store.id" class="store-row hover-lift">
-          <NuxtLink :to="`/stores/${store.slug}`" class="store-logo-link">
-            <img v-if="store.logo" class="store-logo" :src="store.logo" :alt="pick(store.name, locale)" loading="lazy" />
-            <span v-else class="store-logo store-logo-placeholder" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
-          </NuxtLink>
-          <div class="store-main">
-            <NuxtLink :to="`/stores/${store.slug}`" class="store-name">{{ pick(store.name, locale) }}</NuxtLink>
-            <p v-if="store.company" class="store-company">{{ store.company }}</p>
-            <p v-if="store.region || store.address" class="store-location">
-              <span v-if="store.region">{{ t("stores.region") }}：{{ store.region }}</span>
-              <span v-if="store.address">{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span>
-            </p>
-          </div>
-          <div class="store-rating">{{ t("stores.positiveRate") }}</div>
-          <div class="store-actions">
-            <NuxtLink :to="`/stores/${store.slug}`" class="mbtn red">{{ t("stores.visitStore") }}</NuxtLink>
-          </div>
-        </article>
-      </div>
-      <UiEmptyState v-else :text="t('common.empty')" />
+    <section class="mx-auto w-full max-w-mall px-4">
+      <VCard :padded="false" class="overflow-hidden">
+        <header class="flex items-center justify-between border-b border-border bg-bg px-[18px] py-3.5"><h1 class="m-0 border-l-[3px] border-primary pl-2.5 text-base font-medium">{{ t("stores.directory") }}</h1></header>
+        <div v-if="stores.length" class="divide-y divide-border">
+          <article v-for="store in stores" :key="store.id" class="flex min-h-[126px] items-center gap-0 bg-surface px-[22px] py-5 hover:bg-bg max-sm:flex-wrap max-sm:gap-3">
+            <NuxtLink :to="`/stores/${store.slug}`" class="flex h-20 w-20 shrink-0 items-center justify-center border border-border bg-surface">
+              <img v-if="store.logo" class="h-[72px] w-[72px] object-contain" :src="store.logo" :alt="pick(store.name, locale)" loading="lazy" />
+              <span v-else class="flex h-full w-full items-center justify-center bg-bg text-[28px] font-bold uppercase text-muted" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
+            </NuxtLink>
+            <div class="min-w-0 flex-1 px-7 max-sm:w-[calc(100%-100px)] max-sm:px-0"><NuxtLink :to="`/stores/${store.slug}`" class="block text-base font-bold text-text no-underline hover:text-primary">{{ pick(store.name, locale) }}</NuxtLink><p v-if="store.company" class="mt-2 text-[13px] text-muted">{{ store.company }}</p><p v-if="store.region || store.address" class="mt-2 flex gap-6 text-xs text-muted max-sm:flex-col max-sm:gap-1"><span v-if="store.region">{{ t("stores.region") }}：{{ store.region }}</span><span v-if="store.address">{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span></p></div>
+            <div class="w-[130px] text-center text-[13px] text-primary max-sm:ml-[100px] max-sm:w-auto">{{ t("stores.positiveRate") }}</div>
+            <div class="flex w-[145px] flex-col items-end gap-2.5 max-sm:ml-auto max-sm:w-auto"><NuxtLink :to="`/stores/${store.slug}`" class="inline-flex items-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white no-underline hover:bg-primary-hover">{{ t("stores.visitStore") }}</NuxtLink></div>
+          </article>
+        </div>
+        <UiEmptyState v-else :text="t('common.empty')" />
+      </VCard>
     </section>
   </div>
 </template>
 
-<style scoped>
-.stores-page {
-  padding-bottom: 60px;
-}
-.store-directory {
-  background: #fff;
-}
-.sort-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: 1px solid var(--mall-line);
-  background: #fafafa;
-  padding: 13px 18px;
-}
-h1 {
-  margin: 0;
-  border-left: 3px solid var(--mall-red);
-  padding-left: 10px;
-  font-size: 16px;
-  font-weight: 500;
-}
-.sort-options {
-  display: flex;
-}
-.sort-options button {
-  border: 0;
-  border-right: 1px solid var(--mall-line-dark);
-  background: transparent;
-  color: var(--mall-muted);
-  padding: 2px 15px;
-  font-size: 13px;
-  cursor: pointer;
-}
-.sort-options button:last-child {
-  border-right: 0;
-  padding-right: 0;
-}
-.sort-options button.active {
-  color: var(--mall-red);
-  font-weight: 700;
-}
-.store-list {
-  border: 1px solid var(--mall-line);
-  border-top: 0;
-}
-.store-row {
-  display: flex;
-  align-items: center;
-  min-height: 126px;
-  padding: 20px 22px;
-  border-bottom: 1px solid var(--mall-line);
-  background: #fff;
-}
-.store-row:last-child {
-  border-bottom: 0;
-}
-.store-logo-link {
-  display: flex;
-  width: 80px;
-  height: 80px;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 80px;
-  border: 1px solid var(--mall-line);
-  background: #fff;
-}
-.store-logo {
-  width: 72px;
-  height: 72px;
-  object-fit: contain;
-}
-/* A shop with no profile still needs a mark, without inventing a logo. */
-.store-logo-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--mall-line);
-  color: var(--mall-muted);
-  font-size: 28px;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-.store-main {
-  min-width: 0;
-  flex: 1;
-  padding: 0 28px;
-}
-.store-name {
-  display: block;
-  color: var(--mall-ink);
-  font-size: 16px;
-  font-weight: 700;
-  text-decoration: none;
-}
-.store-name:hover {
-  color: var(--mall-red);
-}
-.store-company,
-.store-location {
-  margin: 8px 0 0;
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.store-location {
-  display: flex;
-  gap: 24px;
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.store-rating {
-  width: 130px;
-  color: var(--mall-red);
-  font-size: 13px;
-  text-align: center;
-}
-.store-actions {
-  display: flex;
-  width: 145px;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 10px;
-}
-.distance {
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-@media (max-width: 1240px) {
-  .w1200 {
-    width: calc(100% - 32px);
-  }
-}
-@media (max-width: 720px) {
-  .store-row {
-    align-items: flex-start;
-    flex-wrap: wrap;
-    gap: 12px;
-  }
-  .store-main {
-    width: calc(100% - 100px);
-    padding: 0;
-  }
-  .store-location {
-    flex-direction: column;
-    gap: 4px;
-  }
-  .store-rating {
-    width: auto;
-    margin-left: 100px;
-  }
-  .store-actions {
-    width: auto;
-    margin-left: auto;
-  }
-}
-</style>
diff --git a/apps/mall/pages/user.vue b/apps/mall/pages/user.vue
index 180e248..67df888 100644
--- a/apps/mall/pages/user.vue
+++ b/apps/mall/pages/user.vue
@@ -30,132 +30,34 @@ function isActive(to: string): boolean {
 </script>
 
 <template>
-  <div class="user-page">
-    <div class="w1200 user-layout">
-      <aside class="user-sidebar">
-        <div class="profile">
-          <img src="/mock/avatar.svg" :alt="t('user.title')" />
-          <div class="profile-copy">
+  <div class="min-h-screen bg-bg py-8 pb-16 font-sans text-text">
+    <div class="mx-auto grid w-full max-w-mall gap-5 px-4 lg:grid-cols-[234px_minmax(0,1fr)] lg:items-start">
+      <VCard :padded="false" class="min-h-[560px] pb-5">
+        <div class="flex items-center gap-3 border-b border-border px-4 py-5">
+          <img class="h-[54px] w-[54px] rounded-full object-cover" src="/mock/avatar.svg" :alt="t('user.title')" />
+          <div class="min-w-0">
             <!-- Session lives in localStorage, so the name is unknown at SSR time. -->
-            <ClientOnly><strong>{{ session.user?.display_name }}</strong></ClientOnly>
-            <NuxtLink to="/user">{{ t("user.editProfile") }}</NuxtLink>
+            <ClientOnly><strong class="block truncate text-sm text-text">{{ session.user?.display_name }}</strong></ClientOnly>
+            <NuxtLink class="mt-2 inline-block text-xs text-muted no-underline hover:text-primary" to="/user">{{ t("user.editProfile") }}</NuxtLink>
           </div>
         </div>
-        <nav v-for="group in menuGroups" :key="group.title" class="menu-group">
-          <h2>{{ group.title }}</h2>
+        <nav v-for="group in menuGroups" :key="group.title" class="pt-[18px]">
+          <h2 class="mb-2 px-5 text-[13px] font-semibold text-muted">{{ group.title }}</h2>
           <NuxtLink
             v-for="item in group.items"
             :key="item.to"
             :to="item.to"
-            class="menu-item"
-            :class="{ active: isActive(item.to) }"
+            class="block border-l-[3px] border-transparent px-5 py-2.5 text-[13px] text-text no-underline hover:bg-primary-soft hover:text-primary"
+            :class="isActive(item.to) ? 'border-primary bg-primary-soft text-primary' : ''"
           >
             {{ item.label }}
           </NuxtLink>
         </nav>
-      </aside>
-      <main class="user-content">
+      </VCard>
+      <main class="mx-auto min-w-0 max-w-mall">
         <NuxtPage />
       </main>
     </div>
   </div>
 </template>
 
-<style scoped>
-.user-page {
-  min-height: 680px;
-  padding: 30px 0 60px;
-  background: var(--mall-bg);
-}
-.user-layout {
-  display: grid;
-  grid-template-columns: 234px minmax(0, 1fr);
-  gap: 20px;
-  align-items: start;
-}
-.user-sidebar {
-  background: #fff;
-  min-height: 560px;
-  padding-bottom: 18px;
-}
-.profile {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 22px 16px;
-  border-bottom: 1px solid var(--mall-line);
-}
-.profile img {
-  width: 54px;
-  height: 54px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-.profile-copy {
-  min-width: 0;
-}
-.profile strong {
-  display: block;
-  overflow: hidden;
-  color: var(--mall-ink);
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.profile a {
-  display: inline-block;
-  margin-top: 8px;
-  color: var(--mall-faint);
-  font-size: 12px;
-  text-decoration: none;
-}
-.profile a:hover {
-  color: var(--mall-red);
-}
-.menu-group {
-  padding: 18px 0 0;
-}
-.menu-group h2 {
-  margin: 0;
-  padding: 0 20px 8px;
-  color: var(--mall-muted);
-  font-size: 13px;
-  font-weight: 600;
-}
-.menu-item {
-  display: block;
-  padding: 10px 20px;
-  border-left: 3px solid transparent;
-  color: var(--mall-ink);
-  font-size: 13px;
-  text-decoration: none;
-}
-.menu-item:hover,
-.menu-item.active {
-  background: #fff5f5;
-  border-left-color: var(--mall-red);
-  color: var(--mall-red);
-}
-.user-content {
-  min-width: 0;
-}
-@media (max-width: 1240px) {
-  .user-layout {
-    width: calc(100% - 40px);
-  }
-}
-@media (max-width: 760px) {
-  .user-layout {
-    display: block;
-  }
-  .user-sidebar {
-    min-height: 0;
-    margin-bottom: 20px;
-  }
-  .menu-group {
-    display: inline-block;
-    width: 49%;
-    vertical-align: top;
-  }
-}
-</style>
diff --git a/apps/mall/pages/user/addresses.vue b/apps/mall/pages/user/addresses.vue
index 483689a..bf2643f 100644
--- a/apps/mall/pages/user/addresses.vue
+++ b/apps/mall/pages/user/addresses.vue
@@ -135,13 +135,13 @@ async function save(): Promise<void> {
 </script>
 
 <template>
-  <section class="mpanel addresses-panel">
-    <h1 class="mpanel-title">
-      {{ t("user.addresses") }}
-      <button class="mbtn red" type="button" @click="openAdd">{{ t("user.addAddress") }}</button>
-    </h1>
+  <VCard class="min-h-[560px]">
+    <div class="mb-4 flex items-center justify-between gap-3">
+      <h1 class="m-0 text-xl font-bold text-text">{{ t("user.addresses") }}</h1>
+      <VBtn variant="primary" size="sm" type="button" @click="openAdd">{{ t("user.addAddress") }}</VBtn>
+    </div>
     <UiEmptyState v-if="!loading && rows.length === 0" :text="t('user.noAddresses')" />
-    <table v-else class="mtable">
+    <VTable v-else>
       <thead>
         <tr>
           <th>{{ t("user.recipient") }}</th>
@@ -165,99 +165,34 @@ async function save(): Promise<void> {
           <td>{{ row.line1 }}</td>
           <td>{{ row.postal_code }}</td>
           <td>
-            <span v-if="row.is_default" class="default-tag">{{ t("user.defaultAddress") }}</span>
-            <button v-else class="mbtn" type="button" @click="setDefault(row.id)">{{ t("user.setDefault") }}</button>
+            <span v-if="row.is_default" class="text-xs text-primary">{{ t("user.defaultAddress") }}</span>
+            <VBtn v-else size="sm" type="button" @click="setDefault(row.id)">{{ t("user.setDefault") }}</VBtn>
           </td>
-          <td>
-            <button class="mbtn" type="button" @click="openEdit(row)">{{ t("common.edit") }}</button>
-            <button class="mbtn" type="button" @click="remove(row)">{{ t("common.delete") }}</button>
+          <td class="space-x-2 whitespace-nowrap">
+            <VBtn size="sm" type="button" @click="openEdit(row)">{{ t("common.edit") }}</VBtn>
+            <VBtn size="sm" variant="danger" type="button" @click="remove(row)">{{ t("common.delete") }}</VBtn>
           </td>
         </tr>
       </tbody>
-    </table>
+    </VTable>
 
     <UiModal :open="open" :title="modalTitle" @close="open = false">
-      <div class="form-grid">
-        <label>
-          <span>{{ t("user.recipient") }}</span>
-          <input v-model.trim="form.recipient" class="minput" type="text" />
-        </label>
-        <label>
-          <span>{{ t("user.phone") }}</span>
-          <input v-model.trim="form.phone" class="minput" type="text" />
-        </label>
-        <label>
-          <span>{{ t("user.country") }}</span>
-          <input v-model.trim="form.country" class="minput" type="text" />
-        </label>
-        <label>
-          <span>{{ t("user.region") }}</span>
-          <input v-model.trim="form.region" class="minput" type="text" />
-        </label>
-        <label>
-          <span>{{ t("user.city") }}</span>
-          <input v-model.trim="form.city" class="minput" type="text" />
-        </label>
-        <label class="full-line">
-          <span>{{ t("user.line1") }}</span>
-          <input v-model.trim="form.line1" class="minput" type="text" />
-        </label>
-        <label>
-          <span>{{ t("user.postalCode") }}</span>
-          <input v-model.trim="form.postal_code" class="minput" type="text" />
-        </label>
-        <label class="checkbox">
-          <input v-model="form.is_default" type="checkbox" />
-          <span>{{ t("user.defaultAddress") }}</span>
-        </label>
+      <div class="grid gap-3 sm:grid-cols-2">
+        <VField :label="t('user.recipient')"><VInput v-model="form.recipient" /></VField>
+        <VField :label="t('user.phone')"><VInput v-model="form.phone" /></VField>
+        <VField :label="t('user.country')"><VInput v-model="form.country" /></VField>
+        <VField :label="t('user.region')"><VInput v-model="form.region" /></VField>
+        <VField :label="t('user.city')"><VInput v-model="form.city" /></VField>
+        <VField class="sm:col-span-2" :label="t('user.line1')"><VInput v-model="form.line1" /></VField>
+        <VField :label="t('user.postalCode')"><VInput v-model="form.postal_code" /></VField>
+        <label class="flex items-center gap-2 self-end pb-3 text-sm text-text"><input v-model="form.is_default" class="h-4 w-4 accent-primary" type="checkbox" /> <span>{{ t("user.defaultAddress") }}</span></label>
       </div>
-      <p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
+      <p v-if="errorKey" class="mt-2 text-sm text-danger">{{ t(errorKey) }}</p>
       <template #footer>
-        <button class="mbtn" type="button" @click="open = false">{{ t("common.cancel") }}</button>
-        <button class="mbtn red" type="button" :disabled="saving" @click="save">{{ t("user.saveAddress") }}</button>
+        <VBtn type="button" @click="open = false">{{ t("common.cancel") }}</VBtn>
+        <VBtn variant="primary" type="button" :disabled="saving" @click="save">{{ t("user.saveAddress") }}</VBtn>
       </template>
     </UiModal>
-  </section>
+  </VCard>
 </template>
 
-<style scoped>
-.addresses-panel {
-  min-height: 560px;
-}
-.default-tag {
-  color: var(--mall-red);
-  font-size: 12px;
-}
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-.form-grid label > span {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.full-line {
-  grid-column: 1 / -1;
-}
-.checkbox {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.checkbox > span {
-  margin: 0;
-}
-.error {
-  margin-top: 8px;
-  color: var(--mall-red);
-  font-size: 12px;
-}
-@media (max-width: 760px) {
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/apps/mall/pages/user/coupons.vue b/apps/mall/pages/user/coupons.vue
index 5a835dd..8d01c0d 100644
--- a/apps/mall/pages/user/coupons.vue
+++ b/apps/mall/pages/user/coupons.vue
@@ -32,12 +32,12 @@ onMounted(() => void load());
 </script>
 
 <template>
-  <section class="mpanel coupons-panel">
-    <h1 class="mpanel-title">{{ t("user.couponsTitle") }}</h1>
-    <p v-if="error" class="error-message">{{ error }}</p>
-    <div v-else-if="loading" class="loading-state">{{ t("common.loading") }}</div>
+  <VCard class="min-h-[560px]">
+    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.couponsTitle") }}</h1>
+    <p v-if="error" class="mb-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger">{{ error }}</p>
+    <div v-else-if="loading" class="py-10 text-muted">{{ t("common.loading") }}</div>
     <UiEmptyState v-else-if="coupons.length === 0" :text="t('user.noCoupons')" />
-    <table v-else class="mtable">
+    <VTable v-else>
       <thead>
         <tr>
           <th>{{ t("user.couponTitle") }}</th>
@@ -56,23 +56,7 @@ onMounted(() => void load());
           <td>{{ statusLabels[coupon.status] ?? coupon.status }}</td>
         </tr>
       </tbody>
-    </table>
-  </section>
+    </VTable>
+  </VCard>
 </template>
 
-<style scoped>
-.coupons-panel {
-  min-height: 560px;
-}
-.error-message {
-  margin: 0 0 16px;
-  padding: 10px 14px;
-  color: #b42318;
-  background: #fff1f0;
-  border: 1px solid #ffd6d2;
-}
-.loading-state {
-  padding: 40px 0;
-  color: var(--mall-muted);
-}
-</style>
diff --git a/apps/mall/pages/user/favorites.vue b/apps/mall/pages/user/favorites.vue
index b18c20b..484a77b 100644
--- a/apps/mall/pages/user/favorites.vue
+++ b/apps/mall/pages/user/favorites.vue
@@ -95,41 +95,41 @@ async function removeStoreFavorite(storeId: string): Promise<void> {
 </script>
 
 <template>
-  <section class="mpanel favorites-panel">
-    <h1 class="mpanel-title">{{ t("user.favoritesTitle") }}</h1>
-    <p v-if="error" class="muted">{{ error }}</p>
+  <VCard class="min-h-[560px]">
+    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.favoritesTitle") }}</h1>
+    <p v-if="error" class="mb-4 text-sm text-muted">{{ error }}</p>
     <UiTabs v-model="activeTab" :tabs="tabs">
       <template #default>
-        <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+        <div v-if="loading" class="py-5 text-muted">{{ t("common.loading") }}</div>
         <div v-else-if="activeTab === 'product'">
           <UiEmptyState v-if="productRows.length === 0" :text="t('user.noFavorites')" />
-          <div v-else class="product-grid">
-            <article v-for="item in productRows" :key="item.id" class="product-card hover-lift">
-              <NuxtLink :to="`/goods/${item.product.slug}`" class="cover">
-                <img :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
+          <div v-else class="grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
+            <VCard v-for="item in productRows" :key="item.id" :padded="false" class="overflow-hidden transition-shadow hover:shadow-md">
+              <NuxtLink :to="`/goods/${item.product.slug}`" class="block border-b border-border">
+                <img class="block h-[150px] w-full object-contain" :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
               </NuxtLink>
-              <div class="content">
-                <NuxtLink :to="`/goods/${item.product.slug}`" class="name">{{ pick(item.product.name, locale) }}</NuxtLink>
-                <PriceText v-if="item.product.price_minor !== null && item.product.currency" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
-                <button class="mbtn" type="button" :disabled="removingId === item.product.id" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</button>
+              <div class="p-2.5">
+                <NuxtLink :to="`/goods/${item.product.slug}`" class="mb-2 block h-9 overflow-hidden text-[13px] leading-5 text-text no-underline hover:text-primary">{{ pick(item.product.name, locale) }}</NuxtLink>
+                <PriceText v-if="item.product.price_minor !== null && item.product.currency" class="mb-2.5 block text-primary" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
+                <VBtn size="sm" type="button" :disabled="removingId === item.product.id" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</VBtn>
               </div>
-            </article>
+            </VCard>
           </div>
         </div>
 
         <div v-else>
           <UiEmptyState v-if="storeRows.length === 0" :text="t('user.noFavoriteStores')" />
-          <div v-else class="store-list">
-            <article v-for="item in storeRows" :key="item.id" class="store-row">
-              <img v-if="item.shop.logo" :src="item.shop.logo" :alt="pick(item.shop.name, locale)" />
-              <span v-else class="store-logo-placeholder">{{ pick(item.shop.name, locale).slice(0, 1) }}</span>
-              <div class="store-main">
-                <strong>{{ pick(item.shop.name, locale) }}</strong>
-                <span>{{ item.shop.company }}</span>
+          <div v-else class="space-y-2.5">
+            <article v-for="item in storeRows" :key="item.id" class="flex items-center gap-3.5 border border-border p-3 max-sm:flex-col max-sm:items-start">
+              <img v-if="item.shop.logo" class="h-14 w-14 rounded-sm border border-border object-cover" :src="item.shop.logo" :alt="pick(item.shop.name, locale)" />
+              <span v-else class="flex h-14 w-14 items-center justify-center rounded-sm border border-border bg-bg text-lg text-muted">{{ pick(item.shop.name, locale).slice(0, 1) }}</span>
+              <div class="flex min-w-0 flex-1 flex-col gap-1">
+                <strong class="text-sm text-text">{{ pick(item.shop.name, locale) }}</strong>
+                <span class="text-xs text-muted">{{ item.shop.company }}</span>
               </div>
-              <div class="store-actions">
-                <NuxtLink class="mbtn" :to="`/stores/${item.shop.slug}`">{{ t("user.enterStore") }}</NuxtLink>
-                <button class="mbtn" type="button" :disabled="removingId === item.shop.id" @click="removeStoreFavorite(item.shop.id)">{{ t("user.removeFavorite") }}</button>
+              <div class="flex gap-2 max-sm:w-full">
+                <NuxtLink class="inline-flex items-center rounded-md border border-border bg-surface px-2.5 py-1 text-[13px] font-medium text-text no-underline" :to="`/stores/${item.shop.slug}`">{{ t("user.enterStore") }}</NuxtLink>
+                <VBtn size="sm" type="button" :disabled="removingId === item.shop.id" @click="removeStoreFavorite(item.shop.id)">{{ t("user.removeFavorite") }}</VBtn>
               </div>
             </article>
           </div>
@@ -143,108 +143,6 @@ async function removeStoreFavorite(storeId: string): Promise<void> {
         />
       </template>
     </UiTabs>
-  </section>
+  </VCard>
 </template>
 
-<style scoped>
-.favorites-panel {
-  min-height: 560px;
-}
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-.product-card {
-  border: 1px solid var(--mall-line);
-  background: #fff;
-}
-.cover {
-  display: block;
-  border-bottom: 1px solid var(--mall-line);
-}
-.cover img {
-  display: block;
-  width: 100%;
-  height: 150px;
-  object-fit: contain;
-}
-.content {
-  padding: 10px;
-}
-.name {
-  display: block;
-  margin-bottom: 8px;
-  color: var(--mall-ink);
-  text-decoration: none;
-  font-size: 13px;
-  line-height: 1.4;
-  height: 36px;
-  overflow: hidden;
-}
-.name:hover {
-  color: var(--mall-red);
-}
-.content :deep(.price) {
-  display: block;
-  margin-bottom: 10px;
-  color: var(--mall-red);
-  font-size: 16px;
-  font-weight: 600;
-}
-.store-row {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 12px;
-  border: 1px solid var(--mall-line);
-  margin-bottom: 10px;
-}
-.store-row:last-child {
-  margin-bottom: 0;
-}
-.store-row img,
-.store-logo-placeholder {
-  width: 56px;
-  height: 56px;
-  border: 1px solid var(--mall-line);
-  border-radius: 4px;
-  object-fit: cover;
-}
-.store-logo-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fafafa;
-  color: var(--mall-muted);
-  font-size: 18px;
-}
-.store-main {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-.store-main strong {
-  color: var(--mall-ink);
-  font-size: 14px;
-}
-.store-main span {
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.store-actions {
-  display: flex;
-  gap: 8px;
-}
-@media (max-width: 760px) {
-  .product-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .store-row {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-}
-</style>
diff --git a/apps/mall/pages/user/index.vue b/apps/mall/pages/user/index.vue
index 340b135..e1f38af 100644
--- a/apps/mall/pages/user/index.vue
+++ b/apps/mall/pages/user/index.vue
@@ -68,225 +68,47 @@ const statusLinks = computed(() => [
 </script>
 
 <template>
-  <div>
-    <section class="mpanel welcome-panel">
-      <h1 class="mpanel-title">{{ t("user.dashboard") }}</h1>
-      <div class="stats-grid">
-        <div class="stat-card">
-          <span>{{ t("user.statsBalance") }}</span>
-          <strong v-if="stats"><PriceText :amount-minor="stats.balance_minor" :currency="stats.currency" /></strong>
-          <strong v-else>{{ t("common.loading") }}</strong>
-        </div>
-        <div class="stat-card">
-          <span>{{ t("user.statsPoints") }}</span>
-          <strong>{{ stats ? stats.points : t("common.loading") }}</strong>
-        </div>
-        <div class="stat-card">
-          <span>{{ t("user.statsFrozen") }}</span>
-          <strong v-if="stats"><PriceText :amount-minor="stats.frozen_minor" :currency="stats.currency" /></strong>
-          <strong v-else>{{ t("common.loading") }}</strong>
-        </div>
+  <div class="space-y-4">
+    <VCard class="pb-0">
+      <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.dashboard") }}</h1>
+      <div class="mb-5 grid gap-3 sm:grid-cols-3">
+        <div class="border border-border bg-primary-soft p-[18px]"><span class="block text-xs text-muted">{{ t("user.statsBalance") }}</span><strong class="mt-2.5 block text-xl text-primary"><PriceText v-if="stats" :amount-minor="stats.balance_minor" :currency="stats.currency" /><template v-else>{{ t("common.loading") }}</template></strong></div>
+        <div class="border border-border bg-primary-soft p-[18px]"><span class="block text-xs text-muted">{{ t("user.statsPoints") }}</span><strong class="mt-2.5 block text-xl text-primary">{{ stats ? stats.points : t("common.loading") }}</strong></div>
+        <div class="border border-border bg-primary-soft p-[18px]"><span class="block text-xs text-muted">{{ t("user.statsFrozen") }}</span><strong class="mt-2.5 block text-xl text-primary"><PriceText v-if="stats" :amount-minor="stats.frozen_minor" :currency="stats.currency" /><template v-else>{{ t("common.loading") }}</template></strong></div>
       </div>
-      <div class="status-links">
-        <NuxtLink v-for="item in statusLinks" :key="item.key" :to="item.to" class="status-link">
-          <span>{{ item.label }}</span>
-          <b>{{ item.count }}</b>
-        </NuxtLink>
+      <div class="grid grid-cols-3 border-t border-border sm:grid-cols-5">
+        <NuxtLink v-for="item in statusLinks" :key="item.key" :to="item.to" class="flex flex-col items-center gap-2 px-2 py-4 text-xs text-muted no-underline hover:text-primary sm:border-l sm:border-border first:sm:border-l-0"><span>{{ item.label }}</span><b class="text-lg font-semibold text-primary">{{ item.count }}</b></NuxtLink>
       </div>
-    </section>
+    </VCard>
 
-    <section class="mpanel">
-      <h2 class="mpanel-title">
-        {{ t("user.recentOrders") }}
-        <NuxtLink class="more" to="/user/orders">{{ t("user.viewAll") }} ›</NuxtLink>
-      </h2>
-      <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+    <VCard>
+      <h2 class="mb-4 flex items-center justify-between text-lg font-semibold text-text">{{ t("user.recentOrders") }} <NuxtLink class="text-sm font-normal text-primary no-underline" to="/user/orders">{{ t("user.viewAll") }} ›</NuxtLink></h2>
+      <div v-if="loading" class="py-5 text-muted">{{ t("common.loading") }}</div>
       <UiEmptyState v-else-if="orders.length === 0" :text="t('user.noOrders')" />
-      <div v-else class="recent-orders">
-        <article v-for="order in orders.slice(0, 3)" :key="order.id" class="recent-order">
-          <header>
-            <span>{{ t("user.orderNo") }} {{ order.order_no }}</span>
-            <StatusBadge :status="order.status" kind="order" />
-          </header>
-          <div class="order-body">
-            <div class="item-previews">
-              <img v-for="item in order.items" :key="item.id" :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" />
-            </div>
-            <div class="order-date">{{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}</div>
-            <div class="order-total">
-              <span>{{ t("user.orderTotal") }}</span>
-              <PriceText :amount-minor="order.total_minor" :currency="order.currency" />
-            </div>
-            <NuxtLink class="mbtn" :to="`/user/orders/${order.id}`">{{ t("user.viewDetails") }}</NuxtLink>
+      <div v-else class="space-y-3">
+        <article v-for="order in orders.slice(0, 3)" :key="order.id" class="border border-border">
+          <header class="flex items-center justify-between gap-3 bg-bg px-3 py-2.5 text-xs text-muted"><span>{{ t("user.orderNo") }} {{ order.order_no }}</span><StatusBadge :status="order.status" kind="order" /></header>
+          <div class="flex items-center gap-4 p-3 max-sm:flex-wrap">
+            <div class="flex min-w-[140px] gap-1"><img v-for="item in order.items" :key="item.id" class="h-11 w-11 border border-border object-contain" :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" /></div>
+            <div class="flex-1 text-xs text-muted">{{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}</div>
+            <div class="text-right text-xs"><span class="mb-1 block text-muted">{{ t("user.orderTotal") }}</span><PriceText class="font-semibold text-primary" :amount-minor="order.total_minor" :currency="order.currency" /></div>
+            <NuxtLink class="inline-flex items-center rounded-md border border-border bg-surface px-2.5 py-1 text-[13px] font-medium text-text no-underline" :to="`/user/orders/${order.id}`">{{ t("user.viewDetails") }}</NuxtLink>
           </div>
         </article>
       </div>
-    </section>
+    </VCard>
 
-    <section class="mpanel">
-      <h2 class="mpanel-title">{{ t("user.favoriteProducts") }} ({{ favoriteProductTotal }})</h2>
+    <VCard>
+      <h2 class="mb-4 text-lg font-semibold text-text">{{ t("user.favoriteProducts") }} ({{ favoriteProductTotal }})</h2>
       <UiEmptyState v-if="favoriteProducts.length === 0" :text="t('user.noFavorites')" />
-      <div v-else class="favorite-grid">
-        <NuxtLink v-for="item in favoriteProducts" :key="item.id" :to="`/goods/${item.product.slug}`" class="favorite-card hover-lift">
-          <img :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
-          <span>{{ pick(item.product.name, locale) }}</span>
-          <PriceText v-if="item.product.price_minor !== null && item.product.currency" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
+      <div v-else class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <NuxtLink v-for="item in favoriteProducts" :key="item.id" :to="`/goods/${item.product.slug}`" class="block border border-border p-2.5 text-text no-underline hover:border-primary">
+          <img class="mb-2 block h-[120px] w-full object-contain" :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
+          <span class="block h-[34px] overflow-hidden text-xs leading-[17px]">{{ pick(item.product.name, locale) }}</span>
+          <PriceText v-if="item.product.price_minor !== null && item.product.currency" class="mt-2 block text-sm font-semibold text-primary" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
         </NuxtLink>
       </div>
-    </section>
+    </VCard>
   </div>
 </template>
 
-<style scoped>
-.welcome-panel {
-  padding-bottom: 0;
-}
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-bottom: 20px;
-}
-.stat-card {
-  padding: 18px;
-  border: 1px solid var(--mall-line);
-  background: #fffafa;
-}
-.stat-card span {
-  display: block;
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.stat-card strong {
-  display: block;
-  margin-top: 10px;
-  color: var(--mall-red);
-  font-size: 20px;
-}
-.status-links {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  border-top: 1px solid var(--mall-line);
-}
-.status-link {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 16px 8px;
-  color: var(--mall-muted);
-  font-size: 12px;
-  text-decoration: none;
-}
-.status-link + .status-link {
-  border-left: 1px solid var(--mall-line);
-}
-.status-link b {
-  color: var(--mall-red);
-  font-size: 18px;
-  font-weight: 600;
-}
-.muted {
-  color: var(--mall-faint);
-  padding: 20px 0;
-}
-.recent-order {
-  border: 1px solid var(--mall-line);
-  margin-bottom: 12px;
-}
-.recent-order:last-child {
-  margin-bottom: 0;
-}
-.recent-order header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 12px;
-  background: #fafafa;
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.order-body {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 12px;
-}
-.item-previews {
-  display: flex;
-  gap: 5px;
-  min-width: 140px;
-}
-.item-previews img {
-  width: 44px;
-  height: 44px;
-  object-fit: contain;
-  border: 1px solid var(--mall-line);
-}
-.order-date {
-  flex: 1;
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.order-total {
-  text-align: right;
-  font-size: 12px;
-}
-.order-total span {
-  display: block;
-  margin-bottom: 3px;
-  color: var(--mall-faint);
-}
-.order-total :deep(.price) {
-  color: var(--mall-red);
-  font-weight: 600;
-}
-.favorite-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-}
-.favorite-card {
-  display: block;
-  padding: 10px;
-  border: 1px solid var(--mall-line);
-  color: var(--mall-ink);
-  text-decoration: none;
-}
-.favorite-card img {
-  display: block;
-  width: 100%;
-  height: 120px;
-  object-fit: contain;
-  margin-bottom: 8px;
-}
-.favorite-card span {
-  display: block;
-  height: 34px;
-  overflow: hidden;
-  font-size: 12px;
-  line-height: 17px;
-}
-.favorite-card :deep(.price) {
-  display: block;
-  margin-top: 8px;
-  color: var(--mall-red);
-  font-size: 14px;
-  font-weight: 600;
-}
-@media (max-width: 760px) {
-  .status-links {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .order-body {
-    align-items: flex-start;
-    flex-wrap: wrap;
-  }
-  .order-date {
-    flex: 0 0 calc(100% - 156px);
-  }
-  .favorite-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-</style>
diff --git a/apps/mall/pages/user/invoices.vue b/apps/mall/pages/user/invoices.vue
index 4438c35..e692f9a 100644
--- a/apps/mall/pages/user/invoices.vue
+++ b/apps/mall/pages/user/invoices.vue
@@ -24,11 +24,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <section class="mpanel invoices-panel">
-    <h1 class="mpanel-title">{{ t("user.invoicesTitle") }}</h1>
-    <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+  <VCard class="min-h-[560px]">
+    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.invoicesTitle") }}</h1>
+    <div v-if="loading" class="px-0 py-5 text-muted">{{ t("common.loading") }}</div>
     <UiEmptyState v-else-if="rows.length === 0" :text="t('user.noInvoices')" />
-    <table v-else class="mtable">
+    <VTable v-else>
       <thead>
         <tr>
           <th>{{ t("user.invoiceNo") }}</th>
@@ -51,16 +51,7 @@ onMounted(() => {
           <td>{{ invoice.issued_at ? invoice.issued_at.slice(0, 10) : t("mall.notAvailable") }}</td>
         </tr>
       </tbody>
-    </table>
-  </section>
+    </VTable>
+  </VCard>
 </template>
 
-<style scoped>
-.invoices-panel {
-  min-height: 560px;
-}
-.muted {
-  color: var(--mall-faint);
-  padding: 20px 0;
-}
-</style>
diff --git a/apps/mall/pages/user/orders/[id].vue b/apps/mall/pages/user/orders/[id].vue
index 96b7046..82d35a6 100644
--- a/apps/mall/pages/user/orders/[id].vue
+++ b/apps/mall/pages/user/orders/[id].vue
@@ -73,240 +73,62 @@ onMounted(() => {
 </script>
 
 <template>
-  <section class="mpanel order-detail-panel">
-    <h1 class="mpanel-title">{{ t("user.orderDetail") }}</h1>
-    <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+  <VCard class="min-h-[560px]">
+    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.orderDetail") }}</h1>
+    <div v-if="loading" class="py-5 text-muted">{{ t("common.loading") }}</div>
     <UiEmptyState v-else-if="!order" :text="t('user.noOrders')" />
-    <div v-else>
-      <header class="summary">
-        <div>
-          <strong>{{ t("user.orderNo") }} {{ order.order_no }}</strong>
-          <p>{{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}</p>
-        </div>
+    <div v-else class="space-y-4">
+      <header class="flex items-center justify-between border border-border bg-bg p-3.5 max-sm:flex-col max-sm:items-start max-sm:gap-2.5">
+        <div><strong class="text-[15px] text-text">{{ t("user.orderNo") }} {{ order.order_no }}</strong><p class="mt-1 text-xs text-muted">{{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}</p></div>
         <StatusBadge :status="order.status" kind="order" />
       </header>
 
-      <article class="mpanel block">
-        <h2 class="block-title">{{ t("user.shippingAddress") }}</h2>
-        <p>{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</p>
-        <p>
-          {{ order.shipping_address.country }} {{ order.shipping_address.region }} {{ order.shipping_address.city }}
-          {{ order.shipping_address.line1 }} {{ order.shipping_address.postal_code }}
-        </p>
-      </article>
+      <VCard :padded="false" class="p-5">
+        <h2 class="mb-3.5 text-[15px] font-semibold text-text">{{ t("user.shippingAddress") }}</h2>
+        <p class="m-0 text-sm text-text">{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</p>
+        <p class="mt-1 text-sm text-text">{{ order.shipping_address.country }} {{ order.shipping_address.region }} {{ order.shipping_address.city }} {{ order.shipping_address.line1 }} {{ order.shipping_address.postal_code }}</p>
+      </VCard>
 
-      <article class="mpanel block">
-        <h2 class="block-title">{{ t("user.orderItems") }}</h2>
-        <table class="mtable">
-          <thead>
-            <tr>
-              <th>{{ t("user.product") }}</th>
-              <th>{{ t("common.price") }}</th>
-              <th>{{ t("common.qty") }}</th>
-              <th>{{ t("common.total") }}</th>
-            </tr>
-          </thead>
+      <VCard :padded="false" class="p-5">
+        <h2 class="mb-3.5 text-[15px] font-semibold text-text">{{ t("user.orderItems") }}</h2>
+        <VTable>
+          <thead><tr><th>{{ t("user.product") }}</th><th>{{ t("common.price") }}</th><th>{{ t("common.qty") }}</th><th>{{ t("common.total") }}</th></tr></thead>
           <tbody>
             <tr v-for="item in order.items" :key="item.id">
-              <td class="prod-col">
-                <img :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" />
-                <span>{{ pick(item.product_name, locale) }}</span>
-                <span v-if="item.flash_sale_item_id" class="activity-tag">{{ t("marketing.flashTag") }}</span>
-              </td>
+              <td><div class="flex items-center gap-2.5"><img class="h-11 w-11 border border-border object-contain" :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" /><span>{{ pick(item.product_name, locale) }}</span><VBadge v-if="item.flash_sale_item_id" tone="red">{{ t("marketing.flashTag") }}</VBadge></div></td>
               <td><PriceText :amount-minor="item.unit_price_minor" :currency="order.currency" /></td>
               <td>{{ item.qty }}</td>
               <td><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="order.currency" /></td>
             </tr>
           </tbody>
-        </table>
-        <p v-if="order.discount_minor > 0" class="order-discount">
-          {{ t("checkout.couponDiscount") }}:
-          <PriceText :amount-minor="order.discount_minor" :currency="order.currency" />
-        </p>
-        <p class="order-total">{{ t("user.total") }}: <PriceText :amount-minor="order.total_minor" :currency="order.currency" /></p>
-      </article>
+        </VTable>
+        <p v-if="order.discount_minor > 0" class="mt-4 text-right text-[13px] text-primary">{{ t("checkout.couponDiscount") }}: <PriceText :amount-minor="order.discount_minor" :currency="order.currency" /></p>
+        <p class="mt-4 text-right text-[13px] text-muted">{{ t("user.total") }}: <PriceText class="text-lg font-semibold text-primary" :amount-minor="order.total_minor" :currency="order.currency" /></p>
+      </VCard>
 
-      <article class="mpanel block">
-        <h2 class="block-title">{{ t("user.shipments") }}</h2>
+      <VCard :padded="false" class="p-5">
+        <h2 class="mb-3.5 text-[15px] font-semibold text-text">{{ t("user.shipments") }}</h2>
         <UiEmptyState v-if="orderShipments.length === 0" :text="t('user.noShipments')" />
-        <div v-else>
-          <div v-for="shipment in orderShipments" :key="shipment.id" class="shipment-row">
-            <div>
-              <strong>{{ t("user.shipmentNo") }} {{ shipment.shipment_no }}</strong>
-              <p>{{ t("user.carrier") }}: {{ shipment.carrier }}</p>
-              <p>{{ t("user.trackingNo") }}: {{ shipment.tracking_no }}</p>
-            </div>
-            <div class="shipment-right">
-              <StatusBadge :status="shipment.status" kind="shipment" />
-              <button
-                v-if="shipment.status === 'shipped'"
-                class="mbtn red"
-                type="button"
-                :disabled="confirmingShipmentId === shipment.id"
-                @click="confirmDelivery(shipment)"
-              >
-                {{ t("user.confirmDelivery") }}
-              </button>
-            </div>
+        <div v-else class="space-y-2.5">
+          <div v-for="shipment in orderShipments" :key="shipment.id" class="flex items-center justify-between border border-border p-3 max-sm:flex-col max-sm:items-start max-sm:gap-2.5">
+            <div><strong class="text-sm text-text">{{ t("user.shipmentNo") }} {{ shipment.shipment_no }}</strong><p class="mt-1 text-xs text-muted">{{ t("user.carrier") }}: {{ shipment.carrier }}</p><p class="mt-1 text-xs text-muted">{{ t("user.trackingNo") }}: {{ shipment.tracking_no }}</p></div>
+            <div class="flex items-center gap-2"><StatusBadge :status="shipment.status" kind="shipment" /><VBtn v-if="shipment.status === 'shipped'" variant="primary" size="sm" type="button" :disabled="confirmingShipmentId === shipment.id" @click="confirmDelivery(shipment)">{{ t("user.confirmDelivery") }}</VBtn></div>
           </div>
         </div>
-      </article>
+      </VCard>
 
-      <article class="mpanel block">
-        <h2 class="block-title">{{ t("user.invoiceRequest") }}</h2>
-        <div v-if="invoiceSuccess" class="invoice-success">{{ t("user.invoiceSuccess") }}</div>
-        <form v-else class="invoice-form" @submit.prevent="submitInvoice">
-          <label>
-            <span>{{ t("user.invoiceTitle") }}</span>
-            <input v-model.trim="invoiceTitle" class="minput" type="text" />
-          </label>
-          <label>
-            <span>{{ t("user.taxNo") }}</span>
-            <input v-model.trim="invoiceTaxNo" class="minput" type="text" />
-          </label>
-          <fieldset>
-            <legend>{{ t("user.invoiceKind") }}</legend>
-            <label><input v-model="invoiceKind" type="radio" value="personal" /> {{ t("user.personal") }}</label>
-            <label><input v-model="invoiceKind" type="radio" value="company" /> {{ t("user.company") }}</label>
-          </fieldset>
-          <p v-if="invoiceErrorKey" class="error">{{ t(invoiceErrorKey) }}</p>
-          <button class="mbtn red" type="submit" :disabled="invoiceWorking">{{ t("user.submitInvoice") }}</button>
+      <VCard :padded="false" class="p-5">
+        <h2 class="mb-3.5 text-[15px] font-semibold text-text">{{ t("user.invoiceRequest") }}</h2>
+        <div v-if="invoiceSuccess" class="text-sm text-success">{{ t("user.invoiceSuccess") }}</div>
+        <form v-else class="grid max-w-[520px] gap-3" @submit.prevent="submitInvoice">
+          <VField :label="t('user.invoiceTitle')"><VInput v-model="invoiceTitle" /></VField>
+          <VField :label="t('user.taxNo')"><VInput v-model="invoiceTaxNo" /></VField>
+          <fieldset class="flex items-center gap-4 border-0 p-0"><legend class="mb-1 block text-[13px] text-muted">{{ t("user.invoiceKind") }}</legend><label class="text-[13px] text-text"><input v-model="invoiceKind" class="mr-1 accent-primary" type="radio" value="personal" /> {{ t("user.personal") }}</label><label class="text-[13px] text-text"><input v-model="invoiceKind" class="mr-1 accent-primary" type="radio" value="company" /> {{ t("user.company") }}</label></fieldset>
+          <p v-if="invoiceErrorKey" class="m-0 text-xs text-danger">{{ t(invoiceErrorKey) }}</p>
+          <VBtn class="w-fit" variant="primary" type="submit" :disabled="invoiceWorking">{{ t("user.submitInvoice") }}</VBtn>
         </form>
-      </article>
+      </VCard>
     </div>
-  </section>
+  </VCard>
 </template>
 
-<style scoped>
-.order-detail-panel {
-  min-height: 560px;
-}
-.muted {
-  color: var(--mall-faint);
-  padding: 20px 0;
-}
-.summary {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 14px;
-  border: 1px solid var(--mall-line);
-  background: #fafafa;
-}
-.summary strong {
-  color: var(--mall-ink);
-  font-size: 15px;
-}
-.summary p {
-  margin: 4px 0 0;
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.block {
-  margin-top: 16px;
-  margin-bottom: 0;
-  border: 1px solid var(--mall-line);
-}
-.block-title {
-  margin: 0 0 14px;
-  color: var(--mall-ink);
-  font-size: 15px;
-}
-.prod-col {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.prod-col img {
-  width: 44px;
-  height: 44px;
-  border: 1px solid var(--mall-line);
-  object-fit: contain;
-}
-.order-discount {
-  margin: 16px 0 0;
-  text-align: right;
-  font-size: 13px;
-  color: var(--mall-red);
-}
-.activity-tag {
-  margin-left: 6px;
-  padding: 1px 6px;
-  border: 1px solid var(--mall-red);
-  color: var(--mall-red);
-  font-size: 11px;
-}
-.order-total {
-  margin: 16px 0 0;
-  text-align: right;
-  font-size: 13px;
-  color: var(--mall-muted);
-}
-.order-total :deep(.price) {
-  color: var(--mall-red);
-  font-size: 18px;
-  font-weight: 600;
-}
-.shipment-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  border: 1px solid var(--mall-line);
-  margin-bottom: 10px;
-}
-.shipment-row:last-child {
-  margin-bottom: 0;
-}
-.shipment-row p {
-  margin: 5px 0 0;
-  font-size: 12px;
-  color: var(--mall-muted);
-}
-.shipment-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.invoice-form {
-  display: grid;
-  gap: 12px;
-  max-width: 520px;
-}
-.invoice-form label > span,
-.invoice-form legend {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.invoice-form fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-.invoice-form fieldset label {
-  font-size: 13px;
-  color: var(--mall-ink);
-}
-.error {
-  margin: 0;
-  color: var(--mall-red);
-  font-size: 12px;
-}
-.invoice-success {
-  color: var(--mall-green);
-  font-size: 14px;
-}
-@media (max-width: 760px) {
-  .summary,
-  .shipment-row {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 10px;
-  }
-}
-</style>
diff --git a/apps/mall/pages/user/orders/index.vue b/apps/mall/pages/user/orders/index.vue
index 38cfbe7..702fe87 100644
--- a/apps/mall/pages/user/orders/index.vue
+++ b/apps/mall/pages/user/orders/index.vue
@@ -102,154 +102,38 @@ onMounted(() => {
 </script>
 
 <template>
-  <section class="mpanel orders-panel">
-    <h1 class="mpanel-title">{{ t("user.ordersTitle") }}</h1>
+  <VCard class="min-h-[560px]">
+    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.ordersTitle") }}</h1>
     <UiTabs :model-value="activeFilter" :tabs="tabs" @update:model-value="changeFilter">
       <template #default>
-        <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+        <div v-if="loading" class="py-[30px] text-muted">{{ t("common.loading") }}</div>
         <UiEmptyState v-else-if="filteredOrders.length === 0" :text="t('user.noOrders')" />
-        <div v-else class="order-list">
-          <article v-for="order in filteredOrders" :key="order.id" class="order-card">
-            <header class="order-header">
-              <div>
-                <strong>{{ shopName(order.shop_id) }}</strong>
-                <span>{{ t("user.orderNo") }} {{ order.order_no }}</span>
-                <span>{{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}</span>
-              </div>
+        <div v-else class="space-y-3.5">
+          <VCard v-for="order in filteredOrders" :key="order.id" :padded="false" class="overflow-hidden">
+            <header class="flex items-center justify-between gap-2.5 border-b border-border bg-bg px-3.5 py-3 text-xs text-muted max-sm:items-start">
+              <div class="flex min-w-0 items-center gap-3.5 max-sm:flex-col max-sm:items-start max-sm:gap-1"><strong class="text-[13px] font-semibold text-text">{{ shopName(order.shop_id) }}</strong><span>{{ t("user.orderNo") }} {{ order.order_no }}</span><span>{{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}</span></div>
               <StatusBadge :status="order.status" kind="order" />
             </header>
-            <div class="order-items">
-              <div v-for="item in order.items" :key="item.id" class="order-item">
-                <img :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" />
-                <div class="item-name">
-                  <span>{{ pick(item.product_name, locale) }}</span>
-                  <small>{{ item.sku_code }} × {{ item.qty }}</small>
-                </div>
-                <PriceText :amount-minor="item.unit_price_minor" :currency="order.currency" />
+            <div class="px-3.5 py-1">
+              <div v-for="item in order.items" :key="item.id" class="flex items-center gap-3 border-b border-border py-2.5 last:border-b-0">
+                <img class="h-[54px] w-[54px] border border-border object-contain" :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" />
+                <div class="flex min-w-0 flex-1 flex-col gap-1 text-[13px]"><span class="truncate">{{ pick(item.product_name, locale) }}</span><small class="text-[11px] text-muted">{{ item.sku_code }} × {{ item.qty }}</small></div>
+                <PriceText class="text-[13px] text-muted" :amount-minor="item.unit_price_minor" :currency="order.currency" />
               </div>
             </div>
-            <footer class="order-footer">
-              <span>{{ t("user.orderTotal") }} <strong><PriceText :amount-minor="order.total_minor" :currency="order.currency" /></strong></span>
-              <div class="actions">
-                <button v-if="order.status === 'pending_payment'" class="mbtn red" type="button" :disabled="workingId === order.id" @click="pay(order)">{{ t("user.payNow") }}</button>
-                <button v-if="order.status === 'pending_payment'" class="mbtn" type="button" :disabled="workingId === order.id" @click="cancel(order)">{{ t("user.cancelOrder") }}</button>
-                <NuxtLink class="mbtn" :to="`/user/orders/${order.id}`">{{ t("user.viewDetails") }}</NuxtLink>
+            <footer class="flex items-center justify-between gap-3 border-t border-border px-3.5 py-3 text-xs text-muted max-sm:flex-col max-sm:items-start">
+              <span>{{ t("user.orderTotal") }} <strong class="text-primary"><PriceText :amount-minor="order.total_minor" :currency="order.currency" /></strong></span>
+              <div class="flex gap-2">
+                <VBtn v-if="order.status === 'pending_payment'" variant="primary" size="sm" type="button" :disabled="workingId === order.id" @click="pay(order)">{{ t("user.payNow") }}</VBtn>
+                <VBtn v-if="order.status === 'pending_payment'" size="sm" type="button" :disabled="workingId === order.id" @click="cancel(order)">{{ t("user.cancelOrder") }}</VBtn>
+                <NuxtLink class="inline-flex items-center rounded-md border border-border bg-surface px-2.5 py-1 text-[13px] font-medium text-text no-underline" :to="`/user/orders/${order.id}`">{{ t("user.viewDetails") }}</NuxtLink>
               </div>
             </footer>
-          </article>
+          </VCard>
         </div>
         <UiPagination :page="page" :total="total" :per-page="perPage" @change="loadOrders" />
       </template>
     </UiTabs>
-  </section>
+  </VCard>
 </template>
 
-<style scoped>
-.orders-panel {
-  min-height: 560px;
-}
-.muted {
-  padding: 30px 0;
-  color: var(--mall-faint);
-}
-.order-card {
-  margin-bottom: 14px;
-  border: 1px solid var(--mall-line);
-}
-.order-card:last-child {
-  margin-bottom: 0;
-}
-.order-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 14px;
-  background: #fafafa;
-  border-bottom: 1px solid var(--mall-line);
-}
-.order-header > div {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  min-width: 0;
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.order-header strong {
-  color: var(--mall-ink);
-  font-size: 13px;
-  font-weight: 600;
-}
-.order-items {
-  padding: 4px 14px;
-}
-.order-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 0;
-}
-.order-item + .order-item {
-  border-top: 1px solid var(--mall-line);
-}
-.order-item img {
-  width: 54px;
-  height: 54px;
-  border: 1px solid var(--mall-line);
-  object-fit: contain;
-}
-.item-name {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 5px;
-  min-width: 0;
-  font-size: 13px;
-}
-.item-name span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.item-name small {
-  color: var(--mall-faint);
-  font-size: 11px;
-}
-.order-item :deep(.price) {
-  color: var(--mall-muted);
-  font-size: 13px;
-}
-.order-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 14px;
-  border-top: 1px solid var(--mall-line);
-  color: var(--mall-muted);
-  font-size: 12px;
-}
-.order-footer strong :deep(.price) {
-  color: var(--mall-red);
-  font-size: 16px;
-}
-.actions {
-  display: flex;
-  gap: 8px;
-}
-.actions .mbtn {
-  padding: 5px 11px;
-}
-@media (max-width: 760px) {
-  .order-header > div {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 3px;
-  }
-  .order-footer {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-}
-</style>
diff --git a/apps/shop-admin/app.vue b/apps/shop-admin/app.vue
index 664ddb0..3e28337 100644
--- a/apps/shop-admin/app.vue
+++ b/apps/shop-admin/app.vue
@@ -2,10 +2,12 @@
 const session = useSessionStore();
 const { locale, locales, setLocale } = useI18n();
 const route = useRoute();
-
-onMounted(() => session.hydrate());
+const { boot } = useAccent();
 
 const isAuthPage = computed(() => route.path === "/login");
+
+boot();
+onMounted(() => session.hydrate());
 watchEffect(() => {
   if (import.meta.client && session.token === null && !isAuthPage.value && route.path !== "/") {
     // pages opt into auth middleware; nothing global here
@@ -17,34 +19,42 @@ watchEffect(() => {
   <div v-if="isAuthPage">
     <NuxtPage />
   </div>
-  <div v-else class="auth-layout">
-    <aside>
-      <div class="brand">{{ $t("common.appName") }} · Shop</div>
-      <NuxtLink to="/">{{ $t("nav.dashboard") }}</NuxtLink>
-      <NuxtLink to="/products">{{ $t("nav.products") }}</NuxtLink>
-      <NuxtLink to="/orders">{{ $t("nav.orders") }}</NuxtLink>
-      <NuxtLink to="/shipments">{{ $t("nav.shipments") }}</NuxtLink>
-      <NuxtLink to="/invoices">{{ $t("nav.invoices") }}</NuxtLink>
-      <NuxtLink to="/coupons">{{ $t("nav.coupons") }}</NuxtLink>
-      <NuxtLink to="/flash-sales">{{ $t("nav.flashSales") }}</NuxtLink>
-      <NuxtLink to="/group-buying">{{ $t("nav.groupBuying") }}</NuxtLink>
-    </aside>
-    <main>
-      <div class="main-head">
-        <select
-          :value="locale"
-          :aria-label="$t('common.language')"
-          @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
-        >
-          <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
-        </select>
-        <template v-if="session.isLoggedIn">
-          <span class="muted">{{ session.user?.display_name }}</span>
-          <button class="btn sm" @click="session.logout()">{{ $t("common.logout") }}</button>
-        </template>
-        <NuxtLink v-else to="/login" class="btn sm primary">{{ $t("common.login") }}</NuxtLink>
-      </div>
-      <NuxtPage />
-    </main>
+  <div v-else class="min-h-screen bg-bg font-sans text-text">
+    <div class="flex min-h-screen">
+      <aside class="w-60 shrink-0 border-r border-border bg-surface px-4 py-5">
+        <div class="mb-6 px-3 text-lg font-bold text-text">{{ $t("common.appName") }} · Shop</div>
+        <nav class="grid gap-1" :aria-label="$t('common.appName')">
+          <NuxtLink to="/" exact-active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.dashboard") }}</NuxtLink>
+          <NuxtLink to="/products" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.products") }}</NuxtLink>
+          <NuxtLink to="/orders" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.orders") }}</NuxtLink>
+          <NuxtLink to="/shipments" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.shipments") }}</NuxtLink>
+          <NuxtLink to="/invoices" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.invoices") }}</NuxtLink>
+          <NuxtLink to="/coupons" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.coupons") }}</NuxtLink>
+          <NuxtLink to="/flash-sales" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.flashSales") }}</NuxtLink>
+          <NuxtLink to="/group-buying" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.groupBuying") }}</NuxtLink>
+        </nav>
+      </aside>
+      <main class="min-w-0 flex-1">
+        <header class="flex min-h-16 items-center justify-end gap-4 border-b border-border bg-surface px-6">
+          <VAccentSwatch />
+          <select
+            :value="locale"
+            :aria-label="$t('common.language')"
+            class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
+            @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
+          >
+            <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
+          </select>
+          <template v-if="session.isLoggedIn">
+            <span class="text-sm text-muted">{{ session.user?.display_name }}</span>
+            <VBtn size="sm" @click="session.logout()">{{ $t("common.logout") }}</VBtn>
+          </template>
+          <NuxtLink v-else to="/login" class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-2.5 py-1 text-[13px] font-medium text-white hover:bg-primary-hover">{{ $t("common.login") }}</NuxtLink>
+        </header>
+        <div class="px-6">
+          <NuxtPage />
+        </div>
+      </main>
+    </div>
   </div>
 </template>
diff --git a/apps/shop-admin/components/ProductForm.vue b/apps/shop-admin/components/ProductForm.vue
index 762a185..25fb1fd 100644
--- a/apps/shop-admin/components/ProductForm.vue
+++ b/apps/shop-admin/components/ProductForm.vue
@@ -58,53 +58,38 @@ function submit(): void {
 </script>
 
 <template>
-  <form class="card form-narrow product-form" @submit.prevent="submit">
-    <div v-if="validationError" class="error-text" role="alert">{{ validationError }}</div>
-    <div class="field">
-      <label for="product-slug">{{ $t("product.slug") }}</label>
-      <input id="product-slug" v-model="slug" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" />
-    </div>
-    <div class="field">
-      <label for="product-name-en">{{ $t("product.nameEn") }}</label>
-      <input id="product-name-en" v-model="nameEn" required />
-    </div>
-    <div class="field">
-      <label for="product-name-zh">{{ $t("product.nameZh") }}</label>
-      <input id="product-name-zh" v-model="nameZh" />
-    </div>
-    <div class="field">
-      <label for="product-description-en">{{ $t("product.descEn") }}</label>
-      <textarea id="product-description-en" v-model="descriptionEn" rows="4" />
-    </div>
-    <div class="field">
-      <label for="product-description-zh">{{ $t("product.descZh") }}</label>
-      <textarea id="product-description-zh" v-model="descriptionZh" rows="4" />
-    </div>
-    <div class="field">
-      <label for="product-category">{{ $t("product.category") }}</label>
-      <select id="product-category" v-model="categoryId">
-        <option value="">{{ $t("shop.categoryOptional") }}</option>
-        <option v-for="category in categories" :key="category.id" :value="category.id">
-          {{ localized(category.name, locale) }}
-        </option>
-      </select>
-    </div>
-    <div class="field">
-      <label for="product-images">{{ $t("product.images") }}</label>
-      <textarea id="product-images" v-model="images" rows="4" :placeholder="$t('shop.imagesHint')" />
-    </div>
-    <button class="btn primary" type="submit" :disabled="busy">
-      {{ busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct") }}
-    </button>
-  </form>
+  <VCard class="mx-auto my-10 w-full max-w-[720px]">
+    <form @submit.prevent="submit">
+      <div v-if="validationError" class="my-2 text-sm text-danger" role="alert">{{ validationError }}</div>
+      <VField :label="$t('product.slug')">
+        <VInput id="product-slug" v-model="slug" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" />
+      </VField>
+      <VField :label="$t('product.nameEn')">
+        <VInput id="product-name-en" v-model="nameEn" required />
+      </VField>
+      <VField :label="$t('product.nameZh')">
+        <VInput id="product-name-zh" v-model="nameZh" />
+      </VField>
+      <VField :label="$t('product.descEn')">
+        <textarea id="product-description-en" v-model="descriptionEn" rows="4" class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" />
+      </VField>
+      <VField :label="$t('product.descZh')">
+        <textarea id="product-description-zh" v-model="descriptionZh" rows="4" class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" />
+      </VField>
+      <VField :label="$t('product.category')">
+        <select id="product-category" v-model="categoryId" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
+          <option value="">{{ $t("shop.categoryOptional") }}</option>
+          <option v-for="category in categories" :key="category.id" :value="category.id">
+            {{ localized(category.name, locale) }}
+          </option>
+        </select>
+      </VField>
+      <VField :label="$t('product.images')">
+        <textarea id="product-images" v-model="images" rows="4" :placeholder="$t('shop.imagesHint')" class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" />
+      </VField>
+      <VBtn variant="primary" type="submit" :disabled="busy">
+        {{ busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct") }}
+      </VBtn>
+    </form>
+  </VCard>
 </template>
-
-<style scoped>
-.product-form {
-  max-width: 720px;
-  margin: 0;
-}
-.product-form textarea {
-  resize: vertical;
-}
-</style>
diff --git a/apps/shop-admin/nuxt.config.ts b/apps/shop-admin/nuxt.config.ts
index d96cbce..7e4d90e 100644
--- a/apps/shop-admin/nuxt.config.ts
+++ b/apps/shop-admin/nuxt.config.ts
@@ -1,6 +1,9 @@
+import tailwindcss from "@tailwindcss/vite";
+
 export default defineNuxtConfig({
-  modules: ["@pinia/nuxt", "@nuxtjs/i18n"],
-  css: ["@vmall/shared/ui.css"],
+  modules: ["@pinia/nuxt", "@nuxtjs/i18n", "@vmall/ui/nuxt"],
+  css: ["@vmall/shared/theme.css"],
+  vite: { plugins: [tailwindcss()] },
   devtools: { enabled: false },
   devServer: { port: 3001 },
   runtimeConfig: {
diff --git a/apps/shop-admin/package.json b/apps/shop-admin/package.json
index 99ca057..fac19f1 100644
--- a/apps/shop-admin/package.json
+++ b/apps/shop-admin/package.json
@@ -14,6 +14,11 @@
     "nuxt": "^3.15.4",
     "pinia": "^2.3.1",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "@vmall/ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "tailwindcss": "^4.1.13"
   }
 }
diff --git a/apps/shop-admin/pages/coupons.vue b/apps/shop-admin/pages/coupons.vue
index ccd0147..c9771c9 100644
--- a/apps/shop-admin/pages/coupons.vue
+++ b/apps/shop-admin/pages/coupons.vue
@@ -180,137 +180,64 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="page">
-    <h1 class="page-title">{{ $t("shop.couponList") }}</h1>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <div v-if="message" class="muted" role="status">{{ message }}</div>
+  <VPage :title="$t('shop.couponList')">
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="message" class="my-2 text-sm text-muted" role="status">{{ message }}</div>
 
-    <section class="card">
-      <h2>{{ editingId ? $t("shop.editCoupon") : $t("shop.newCoupon") }}</h2>
-      <div class="form-grid">
-        <label>
-          <span>{{ $t("shop.couponTitleEn") }}</span>
-          <input v-model="form.titleEn" class="input" type="text" />
-        </label>
-        <label>
-          <span>{{ $t("shop.couponTitleZh") }}</span>
-          <input v-model="form.titleZh" class="input" type="text" />
-        </label>
-        <label>
-          <span>{{ $t("shop.couponAmount") }}</span>
-          <input v-model.number="form.amountMinor" class="input" type="number" min="1" step="1" />
-        </label>
-        <label>
-          <span>{{ $t("shop.couponThreshold") }}</span>
-          <input v-model.number="form.thresholdMinor" class="input" type="number" min="0" step="1" />
-        </label>
-        <label>
-          <span>{{ $t("shop.couponCurrency") }}</span>
-          <select v-model="form.currency" class="input">
+    <VCard class="mb-5">
+      <h2 class="mb-4 text-base font-semibold">{{ editingId ? $t("shop.editCoupon") : $t("shop.newCoupon") }}</h2>
+      <div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
+        <VField :label="$t('shop.couponTitleEn')"><VInput v-model="form.titleEn" type="text" /></VField>
+        <VField :label="$t('shop.couponTitleZh')"><VInput v-model="form.titleZh" type="text" /></VField>
+        <VField :label="$t('shop.couponAmount')"><VInput v-model.number="form.amountMinor" type="number" min="1" step="1" /></VField>
+        <VField :label="$t('shop.couponThreshold')"><VInput v-model.number="form.thresholdMinor" type="number" min="0" step="1" /></VField>
+        <VField :label="$t('shop.couponCurrency')">
+          <select v-model="form.currency" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
             <option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
           </select>
-        </label>
-        <label>
-          <span>{{ $t("shop.couponStock") }}</span>
-          <input v-model.number="form.stock" class="input" type="number" min="0" step="1" />
-        </label>
-        <label>
-          <span>{{ $t("shop.couponStartsAt") }}</span>
-          <input v-model="form.startsAt" class="input" type="datetime-local" />
-        </label>
-        <label>
-          <span>{{ $t("shop.couponEndsAt") }}</span>
-          <input v-model="form.endsAt" class="input" type="datetime-local" />
-        </label>
-        <label class="checkbox">
-          <input v-model="form.enabled" type="checkbox" />
-          <span>{{ $t("shop.couponEnabled") }}</span>
-        </label>
+        </VField>
+        <VField :label="$t('shop.couponStock')"><VInput v-model.number="form.stock" type="number" min="0" step="1" /></VField>
+        <VField :label="$t('shop.couponStartsAt')"><VInput v-model="form.startsAt" type="datetime-local" /></VField>
+        <VField :label="$t('shop.couponEndsAt')"><VInput v-model="form.endsAt" type="datetime-local" /></VField>
+        <label class="flex items-center gap-2 text-sm font-medium text-text"><input v-model="form.enabled" type="checkbox" class="h-4 w-4 accent-primary" /><span>{{ $t("shop.couponEnabled") }}</span></label>
       </div>
-      <div class="form-actions">
-        <button class="btn primary" :disabled="saving" @click="submit">
-          {{ editingId ? $t("shop.updateCoupon") : $t("shop.createCoupon") }}
-        </button>
-        <button v-if="editingId" class="btn" type="button" @click="resetForm">
-          {{ $t("common.cancel") }}
-        </button>
+      <div class="flex gap-2">
+        <VBtn variant="primary" :disabled="saving" @click="submit">{{ editingId ? $t("shop.updateCoupon") : $t("shop.createCoupon") }}</VBtn>
+        <VBtn v-if="editingId" type="button" @click="resetForm">{{ $t("common.cancel") }}</VBtn>
       </div>
-    </section>
+    </VCard>
 
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="!templates.length" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>{{ $t("shop.couponTitleEn") }}</th>
-            <th>{{ $t("shop.couponAmount") }}</th>
-            <th>{{ $t("shop.couponThreshold") }}</th>
-            <th>{{ $t("shop.couponStock") }}</th>
-            <th>{{ $t("shop.couponStartsAt") }}</th>
-            <th>{{ $t("shop.couponEndsAt") }}</th>
-            <th>{{ $t("common.status") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="template in templates" :key="template.id">
-            <td>{{ template.title[locale] ?? template.title.en }}</td>
-            <td>{{ fmt(template.amount_minor, template.currency) }}</td>
-            <td>{{ fmt(template.threshold_minor, template.currency) }}</td>
-            <td>{{ template.stock }}</td>
-            <td>{{ template.starts_at.slice(0, 10) }}</td>
-            <td>{{ template.ends_at.slice(0, 10) }}</td>
-            <td>
-              <span class="badge" :class="template.enabled ? 'green' : 'red'">
-                {{ template.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}
-              </span>
-            </td>
-            <td class="actions">
-              <button class="btn sm" :disabled="actionId === template.id" @click="edit(template)">
-                {{ $t("shop.edit") }}
-              </button>
-              <button class="btn sm" :disabled="actionId === template.id" @click="toggleEnabled(template)">
-                {{ template.enabled ? $t("shop.enabledOff") : $t("shop.enabledOn") }}
-              </button>
-              <button class="btn sm" :disabled="actionId === template.id" @click="remove(template)">
-                {{ $t("common.delete") }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="!templates.length" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <VTable v-else>
+      <thead>
+        <tr>
+          <th>{{ $t("shop.couponTitleEn") }}</th>
+          <th>{{ $t("shop.couponAmount") }}</th>
+          <th>{{ $t("shop.couponThreshold") }}</th>
+          <th>{{ $t("shop.couponStock") }}</th>
+          <th>{{ $t("shop.couponStartsAt") }}</th>
+          <th>{{ $t("shop.couponEndsAt") }}</th>
+          <th>{{ $t("common.status") }}</th>
+          <th>{{ $t("common.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="template in templates" :key="template.id">
+          <td>{{ template.title[locale] ?? template.title.en }}</td>
+          <td>{{ fmt(template.amount_minor, template.currency) }}</td>
+          <td>{{ fmt(template.threshold_minor, template.currency) }}</td>
+          <td>{{ template.stock }}</td>
+          <td>{{ template.starts_at.slice(0, 10) }}</td>
+          <td>{{ template.ends_at.slice(0, 10) }}</td>
+          <td><VBadge :tone="template.enabled ? 'green' : 'red'">{{ template.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}</VBadge></td>
+          <td class="flex flex-wrap gap-1.5">
+            <VBtn size="sm" :disabled="actionId === template.id" @click="edit(template)">{{ $t("shop.edit") }}</VBtn>
+            <VBtn size="sm" :disabled="actionId === template.id" @click="toggleEnabled(template)">{{ template.enabled ? $t("shop.enabledOff") : $t("shop.enabledOn") }}</VBtn>
+            <VBtn size="sm" :disabled="actionId === template.id" @click="remove(template)">{{ $t("common.delete") }}</VBtn>
+          </td>
+        </tr>
+      </tbody>
+    </VTable>
+  </VPage>
 </template>
-
-<style scoped>
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 12px;
-  margin: 12px 0;
-}
-.form-grid label {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 13px;
-}
-.form-grid .checkbox {
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-}
-.form-actions {
-  display: flex;
-  gap: 8px;
-}
-.table-wrap {
-  overflow-x: auto;
-}
-.actions {
-  display: flex;
-  gap: 6px;
-}
-</style>
diff --git a/apps/shop-admin/pages/flash-sales.vue b/apps/shop-admin/pages/flash-sales.vue
index 524191a..b6eddc4 100644
--- a/apps/shop-admin/pages/flash-sales.vue
+++ b/apps/shop-admin/pages/flash-sales.vue
@@ -232,211 +232,96 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="page">
-    <h1 class="page-title">{{ $t("shop.flashSaleList") }}</h1>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <div v-if="message" class="muted" role="status">{{ message }}</div>
+  <VPage :title="$t('shop.flashSaleList')">
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="message" class="my-2 text-sm text-muted" role="status">{{ message }}</div>
 
-    <section class="card create-card">
-      <h2>{{ editingSessionId ? $t("shop.editFlashSale") : $t("shop.newFlashSale") }}</h2>
-      <div class="form-grid">
-        <label>
-          <span>{{ $t("shop.flashLabelEn") }}</span>
-          <input v-model="sessionForm.labelEn" class="input" type="text" />
-        </label>
-        <label>
-          <span>{{ $t("shop.flashLabelZh") }}</span>
-          <input v-model="sessionForm.labelZh" class="input" type="text" />
-        </label>
-        <label>
-          <span>{{ $t("shop.flashStartsAt") }}</span>
-          <input v-model="sessionForm.startsAt" class="input" type="datetime-local" />
-        </label>
-        <label>
-          <span>{{ $t("shop.flashEndsAt") }}</span>
-          <input v-model="sessionForm.endsAt" class="input" type="datetime-local" />
-        </label>
-        <label class="checkbox">
-          <input v-model="sessionForm.enabled" type="checkbox" />
-          <span>{{ $t("shop.flashEnabled") }}</span>
-        </label>
+    <VCard class="mb-5">
+      <h2 class="mb-4 text-base font-semibold">{{ editingSessionId ? $t("shop.editFlashSale") : $t("shop.newFlashSale") }}</h2>
+      <div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
+        <VField :label="$t('shop.flashLabelEn')"><VInput v-model="sessionForm.labelEn" type="text" /></VField>
+        <VField :label="$t('shop.flashLabelZh')"><VInput v-model="sessionForm.labelZh" type="text" /></VField>
+        <VField :label="$t('shop.flashStartsAt')"><VInput v-model="sessionForm.startsAt" type="datetime-local" /></VField>
+        <VField :label="$t('shop.flashEndsAt')"><VInput v-model="sessionForm.endsAt" type="datetime-local" /></VField>
+        <label class="flex items-center gap-2 text-sm font-medium text-text"><input v-model="sessionForm.enabled" type="checkbox" class="h-4 w-4 accent-primary" /><span>{{ $t("shop.flashEnabled") }}</span></label>
       </div>
-      <div class="form-actions">
-        <button class="btn primary" :disabled="saving" @click="saveSession">
-          {{ editingSessionId ? $t("shop.updateFlashSale") : $t("shop.createFlashSale") }}
-        </button>
-        <button v-if="editingSessionId" class="btn" type="button" @click="resetSessionForm">
-          {{ $t("common.cancel") }}
-        </button>
+      <div class="flex gap-2">
+        <VBtn variant="primary" :disabled="saving" @click="saveSession">{{ editingSessionId ? $t("shop.updateFlashSale") : $t("shop.createFlashSale") }}</VBtn>
+        <VBtn v-if="editingSessionId" type="button" @click="resetSessionForm">{{ $t("common.cancel") }}</VBtn>
       </div>
-    </section>
+    </VCard>
 
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="!sessions.length" class="card muted">{{ $t("common.empty") }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="!sessions.length" class="text-muted">{{ $t("common.empty") }}</VCard>
     <template v-else>
-      <section v-for="session in sessions" :key="session.id" class="card session-card">
-        <header class="session-head">
-          <div>
+      <VCard v-for="session in sessions" :key="session.id" class="mb-4">
+        <header class="flex flex-wrap items-center justify-between gap-3">
+          <div class="flex flex-wrap items-center gap-2">
             <strong>{{ session.label[locale] ?? session.label.en }}</strong>
-            <span class="muted">
-              {{ session.starts_at.slice(0, 10) }} → {{ session.ends_at.slice(0, 10) }}
-            </span>
-            <span class="badge" :class="session.enabled ? 'green' : 'red'">
-              {{ session.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}
-            </span>
+            <span class="text-sm text-muted">{{ session.starts_at.slice(0, 10) }} → {{ session.ends_at.slice(0, 10) }}</span>
+            <VBadge :tone="session.enabled ? 'green' : 'red'">{{ session.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}</VBadge>
           </div>
-          <div class="action-row">
-            <button class="btn sm" :disabled="actionId === session.id" @click="editSession(session)">
-              {{ $t("shop.edit") }}
-            </button>
-            <button class="btn sm" :disabled="actionId === session.id" @click="startAddItem(session)">
-              {{ $t("shop.newFlashItem") }}
-            </button>
-            <button class="btn sm" :disabled="actionId === session.id" @click="removeSession(session)">
-              {{ $t("common.delete") }}
-            </button>
+          <div class="flex gap-1.5">
+            <VBtn size="sm" :disabled="actionId === session.id" @click="editSession(session)">{{ $t("shop.edit") }}</VBtn>
+            <VBtn size="sm" :disabled="actionId === session.id" @click="startAddItem(session)">{{ $t("shop.newFlashItem") }}</VBtn>
+            <VBtn size="sm" :disabled="actionId === session.id" @click="removeSession(session)">{{ $t("common.delete") }}</VBtn>
           </div>
         </header>
 
-        <h3 class="sub-title">{{ $t("shop.flashItems") }}</h3>
-        <div v-if="!session.items.length" class="muted">{{ $t("shop.noFlashItems") }}</div>
-        <div v-else class="table-wrap">
-          <table class="table">
-            <thead>
-              <tr>
-                <th>{{ $t("shop.flashSku") }}</th>
-                <th>{{ $t("shop.flashSalePrice") }}</th>
-                <th>{{ $t("shop.flashOriginalPrice") }}</th>
-                <th>{{ $t("shop.flashRemaining") }}</th>
-                <th>{{ $t("shop.flashSold") }}</th>
-                <th>{{ $t("shop.flashPerCustomerLimit") }}</th>
-                <th>{{ $t("common.actions") }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in session.items" :key="item.id">
-                <td>{{ item.sku_code }}</td>
-                <td>{{ fmt(item.sale_price_minor, item.currency) }}</td>
-                <td>{{ fmt(item.original_price_minor, item.original_currency) }}</td>
-                <td>{{ item.reserved_stock }}</td>
-                <td>{{ item.sold_count }}</td>
-                <td>{{ item.per_customer_limit }}</td>
-                <td class="action-row">
-                  <button class="btn sm" :disabled="actionId === item.id" @click="editItem(session, item)">
-                    {{ $t("shop.edit") }}
-                  </button>
-                  <button class="btn sm" :disabled="actionId === item.id" @click="removeItem(item)">
-                    {{ $t("common.delete") }}
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <h3 class="mb-2 mt-4 text-sm font-semibold">{{ $t("shop.flashItems") }}</h3>
+        <div v-if="!session.items.length" class="text-muted">{{ $t("shop.noFlashItems") }}</div>
+        <VTable v-else>
+          <thead>
+            <tr>
+              <th>{{ $t("shop.flashSku") }}</th>
+              <th>{{ $t("shop.flashSalePrice") }}</th>
+              <th>{{ $t("shop.flashOriginalPrice") }}</th>
+              <th>{{ $t("shop.flashRemaining") }}</th>
+              <th>{{ $t("shop.flashSold") }}</th>
+              <th>{{ $t("shop.flashPerCustomerLimit") }}</th>
+              <th>{{ $t("common.actions") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in session.items" :key="item.id">
+              <td>{{ item.sku_code }}</td>
+              <td>{{ fmt(item.sale_price_minor, item.currency) }}</td>
+              <td>{{ fmt(item.original_price_minor, item.original_currency) }}</td>
+              <td>{{ item.reserved_stock }}</td>
+              <td>{{ item.sold_count }}</td>
+              <td>{{ item.per_customer_limit }}</td>
+              <td class="flex gap-1.5">
+                <VBtn size="sm" :disabled="actionId === item.id" @click="editItem(session, item)">{{ $t("shop.edit") }}</VBtn>
+                <VBtn size="sm" :disabled="actionId === item.id" @click="removeItem(item)">{{ $t("common.delete") }}</VBtn>
+              </td>
+            </tr>
+          </tbody>
+        </VTable>
 
-        <div v-if="itemSessionId === session.id" class="item-form">
-          <h3 class="sub-title">
-            {{ editingItemId ? $t("shop.editFlashItem") : $t("shop.newFlashItem") }}
-          </h3>
-          <div class="form-grid">
-            <label>
-              <span>{{ $t("shop.flashSku") }}</span>
-              <select v-model="itemForm.skuId" class="input">
+        <div v-if="itemSessionId === session.id" class="mt-4 border-t border-border pt-3">
+          <h3 class="mb-2 text-sm font-semibold">{{ editingItemId ? $t("shop.editFlashItem") : $t("shop.newFlashItem") }}</h3>
+          <div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
+            <VField :label="$t('shop.flashSku')">
+              <select v-model="itemForm.skuId" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
                 <option value="">{{ $t("shop.flashSelectSku") }}</option>
-                <option v-for="option in skuOptions" :key="option.id" :value="option.id">
-                  {{ option.label }}
-                </option>
+                <option v-for="option in skuOptions" :key="option.id" :value="option.id">{{ option.label }}</option>
               </select>
-            </label>
-            <label>
-              <span>{{ $t("shop.flashSalePrice") }}</span>
-              <input v-model.number="itemForm.salePriceMinor" class="input" type="number" min="1" step="1" />
-            </label>
-            <label>
-              <span>{{ $t("shop.couponCurrency") }}</span>
-              <select v-model="itemForm.currency" class="input">
+            </VField>
+            <VField :label="$t('shop.flashSalePrice')"><VInput v-model.number="itemForm.salePriceMinor" type="number" min="1" step="1" /></VField>
+            <VField :label="$t('shop.couponCurrency')">
+              <select v-model="itemForm.currency" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
                 <option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
               </select>
-            </label>
-            <label>
-              <span>{{ $t("shop.flashReservedStock") }}</span>
-              <input v-model.number="itemForm.reservedStock" class="input" type="number" min="0" step="1" />
-            </label>
-            <label>
-              <span>{{ $t("shop.flashPerCustomerLimit") }}</span>
-              <input v-model.number="itemForm.perCustomerLimit" class="input" type="number" min="1" step="1" />
-            </label>
+            </VField>
+            <VField :label="$t('shop.flashReservedStock')"><VInput v-model.number="itemForm.reservedStock" type="number" min="0" step="1" /></VField>
+            <VField :label="$t('shop.flashPerCustomerLimit')"><VInput v-model.number="itemForm.perCustomerLimit" type="number" min="1" step="1" /></VField>
           </div>
-          <div class="form-actions">
-            <button class="btn primary" :disabled="saving" @click="saveItem(session)">
-              {{ $t("shop.saveFlashItem") }}
-            </button>
-            <button class="btn" type="button" @click="itemSessionId = ''; resetItemForm()">
-              {{ $t("common.cancel") }}
-            </button>
+          <div class="flex gap-2">
+            <VBtn variant="primary" :disabled="saving" @click="saveItem(session)">{{ $t("shop.saveFlashItem") }}</VBtn>
+            <VBtn type="button" @click="itemSessionId = ''; resetItemForm()">{{ $t("common.cancel") }}</VBtn>
           </div>
         </div>
-      </section>
+      </VCard>
     </template>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.create-card {
-  margin-bottom: 20px;
-}
-.create-card h2 {
-  font-size: 16px;
-  margin: 0 0 16px;
-}
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 12px;
-  margin: 12px 0;
-}
-.form-grid label {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 13px;
-}
-.form-grid .checkbox {
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-}
-.form-actions {
-  display: flex;
-  gap: 8px;
-}
-.session-card {
-  margin-bottom: 16px;
-}
-.session-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-.session-head .muted {
-  margin: 0 10px;
-}
-.sub-title {
-  font-size: 14px;
-  margin: 16px 0 8px;
-}
-.table-wrap {
-  overflow-x: auto;
-}
-.action-row {
-  display: flex;
-  gap: 6px;
-}
-.item-form {
-  margin-top: 16px;
-  padding-top: 12px;
-  border-top: 1px solid var(--mall-line, #eee);
-}
-</style>
diff --git a/apps/shop-admin/pages/group-buying.vue b/apps/shop-admin/pages/group-buying.vue
index 6104fe9..e4ab462 100644
--- a/apps/shop-admin/pages/group-buying.vue
+++ b/apps/shop-admin/pages/group-buying.vue
@@ -186,171 +186,80 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="page">
-    <h1 class="page-title">{{ $t("shop.groupBuyingList") }}</h1>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <div v-if="message" class="muted" role="status">{{ message }}</div>
+  <VPage :title="$t('shop.groupBuyingList')">
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="message" class="my-2 text-sm text-muted" role="status">{{ message }}</div>
 
-    <section class="card create-card">
-      <h2>{{ editingId ? $t("shop.editGroupActivity") : $t("shop.newGroupActivity") }}</h2>
-      <div class="form-grid">
-        <label>
-          <span>{{ $t("shop.groupSku") }}</span>
-          <select v-model="form.skuId" class="input">
+    <VCard class="mb-5">
+      <h2 class="mb-4 text-base font-semibold">{{ editingId ? $t("shop.editGroupActivity") : $t("shop.newGroupActivity") }}</h2>
+      <div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
+        <VField :label="$t('shop.groupSku')">
+          <select v-model="form.skuId" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
             <option value="">{{ $t("shop.flashSelectSku") }}</option>
-            <option v-for="option in skuOptions" :key="option.id" :value="option.id">
-              {{ option.label }}
-            </option>
+            <option v-for="option in skuOptions" :key="option.id" :value="option.id">{{ option.label }}</option>
           </select>
-        </label>
-        <label>
-          <span>{{ $t("shop.groupNameEn") }}</span>
-          <input v-model="form.nameEn" class="input" type="text" />
-        </label>
-        <label>
-          <span>{{ $t("shop.groupNameZh") }}</span>
-          <input v-model="form.nameZh" class="input" type="text" />
-        </label>
-        <label>
-          <span>{{ $t("shop.groupDescriptionEn") }}</span>
-          <input v-model="form.descriptionEn" class="input" type="text" />
-        </label>
-        <label>
-          <span>{{ $t("shop.groupDescriptionZh") }}</span>
-          <input v-model="form.descriptionZh" class="input" type="text" />
-        </label>
-        <label>
-          <span>{{ $t("shop.groupPrice") }}</span>
-          <input v-model.number="form.groupPriceMinor" class="input" type="number" min="1" step="1" />
-        </label>
-        <label>
-          <span>{{ $t("shop.couponCurrency") }}</span>
-          <select v-model="form.currency" class="input">
+        </VField>
+        <VField :label="$t('shop.groupNameEn')"><VInput v-model="form.nameEn" type="text" /></VField>
+        <VField :label="$t('shop.groupNameZh')"><VInput v-model="form.nameZh" type="text" /></VField>
+        <VField :label="$t('shop.groupDescriptionEn')"><VInput v-model="form.descriptionEn" type="text" /></VField>
+        <VField :label="$t('shop.groupDescriptionZh')"><VInput v-model="form.descriptionZh" type="text" /></VField>
+        <VField :label="$t('shop.groupPrice')"><VInput v-model.number="form.groupPriceMinor" type="number" min="1" step="1" /></VField>
+        <VField :label="$t('shop.couponCurrency')">
+          <select v-model="form.currency" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
             <option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
           </select>
-        </label>
-        <label>
-          <span>{{ $t("shop.groupRequiredMembers") }}</span>
-          <input v-model.number="form.requiredMembers" class="input" type="number" min="2" step="1" />
-        </label>
-        <label>
-          <span>{{ $t("shop.groupLifetimeHours") }}</span>
-          <input v-model.number="form.groupLifetimeHours" class="input" type="number" min="1" step="1" />
-        </label>
-        <label>
-          <span>{{ $t("shop.groupStartsAt") }}</span>
-          <input v-model="form.startsAt" class="input" type="datetime-local" />
-        </label>
-        <label>
-          <span>{{ $t("shop.groupEndsAt") }}</span>
-          <input v-model="form.endsAt" class="input" type="datetime-local" />
-        </label>
-        <label class="checkbox">
-          <input v-model="form.enabled" type="checkbox" />
-          <span>{{ $t("shop.groupEnabled") }}</span>
-        </label>
+        </VField>
+        <VField :label="$t('shop.groupRequiredMembers')"><VInput v-model.number="form.requiredMembers" type="number" min="2" step="1" /></VField>
+        <VField :label="$t('shop.groupLifetimeHours')"><VInput v-model.number="form.groupLifetimeHours" type="number" min="1" step="1" /></VField>
+        <VField :label="$t('shop.groupStartsAt')"><VInput v-model="form.startsAt" type="datetime-local" /></VField>
+        <VField :label="$t('shop.groupEndsAt')"><VInput v-model="form.endsAt" type="datetime-local" /></VField>
+        <label class="flex items-center gap-2 text-sm font-medium text-text"><input v-model="form.enabled" type="checkbox" class="h-4 w-4 accent-primary" /><span>{{ $t("shop.groupEnabled") }}</span></label>
       </div>
-      <div class="form-actions">
-        <button class="btn primary" :disabled="saving" @click="save">
-          {{ editingId ? $t("shop.updateGroupActivity") : $t("shop.createGroupActivity") }}
-        </button>
-        <button v-if="editingId" class="btn" type="button" @click="resetForm">
-          {{ $t("common.cancel") }}
-        </button>
+      <div class="flex gap-2">
+        <VBtn variant="primary" :disabled="saving" @click="save">{{ editingId ? $t("shop.updateGroupActivity") : $t("shop.createGroupActivity") }}</VBtn>
+        <VBtn v-if="editingId" type="button" @click="resetForm">{{ $t("common.cancel") }}</VBtn>
       </div>
-    </section>
+    </VCard>
 
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="!activities.length" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap card">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>{{ $t("shop.groupSku") }}</th>
-            <th>{{ $t("shop.groupNameEn") }}</th>
-            <th>{{ $t("shop.groupPrice") }}</th>
-            <th>{{ $t("shop.groupRequiredMembers") }}</th>
-            <th>{{ $t("shop.groupLifetimeHours") }}</th>
-            <th>{{ $t("shop.groupStartsAt") }}</th>
-            <th>{{ $t("shop.groupOpenGroups") }}</th>
-            <th>{{ $t("common.status") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="activity in activities" :key="activity.id">
-            <td>{{ activity.sku_code }}</td>
-            <td>{{ activity.name[locale] ?? activity.name.en }}</td>
-            <td>{{ fmt(activity.group_price_minor, activity.currency) }}</td>
-            <td>{{ activity.required_members }}</td>
-            <td>{{ activity.group_lifetime_hours }}</td>
-            <td>{{ activity.starts_at.slice(0, 10) }}</td>
-            <td>
-              <template v-if="activity.open_groups.length">
-                <span v-for="group in activity.open_groups" :key="group.id" class="badge orange">
-                  {{ $t("shop.groupPaidMembers") }} {{ group.paid_member_count }}/{{ group.required_members }}
-                </span>
-              </template>
-              <span v-else class="muted">{{ $t("shop.groupNoOpenGroups") }}</span>
-            </td>
-            <td>
-              <span class="badge" :class="activity.enabled ? 'green' : 'red'">
-                {{ activity.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}
-              </span>
-            </td>
-            <td class="action-row">
-              <button class="btn sm" :disabled="actionId === activity.id" @click="edit(activity)">
-                {{ $t("shop.edit") }}
-              </button>
-              <button class="btn sm" :disabled="actionId === activity.id" @click="remove(activity)">
-                {{ $t("common.delete") }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="!activities.length" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <VTable v-else>
+      <thead>
+        <tr>
+          <th>{{ $t("shop.groupSku") }}</th>
+          <th>{{ $t("shop.groupNameEn") }}</th>
+          <th>{{ $t("shop.groupPrice") }}</th>
+          <th>{{ $t("shop.groupRequiredMembers") }}</th>
+          <th>{{ $t("shop.groupLifetimeHours") }}</th>
+          <th>{{ $t("shop.groupStartsAt") }}</th>
+          <th>{{ $t("shop.groupOpenGroups") }}</th>
+          <th>{{ $t("common.status") }}</th>
+          <th>{{ $t("common.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="activity in activities" :key="activity.id">
+          <td>{{ activity.sku_code }}</td>
+          <td>{{ activity.name[locale] ?? activity.name.en }}</td>
+          <td>{{ fmt(activity.group_price_minor, activity.currency) }}</td>
+          <td>{{ activity.required_members }}</td>
+          <td>{{ activity.group_lifetime_hours }}</td>
+          <td>{{ activity.starts_at.slice(0, 10) }}</td>
+          <td>
+            <template v-if="activity.open_groups.length">
+              <VBadge v-for="group in activity.open_groups" :key="group.id" tone="orange" class="mr-1">
+                {{ $t("shop.groupPaidMembers") }} {{ group.paid_member_count }}/{{ group.required_members }}
+              </VBadge>
+            </template>
+            <span v-else class="text-muted">{{ $t("shop.groupNoOpenGroups") }}</span>
+          </td>
+          <td><VBadge :tone="activity.enabled ? 'green' : 'red'">{{ activity.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}</VBadge></td>
+          <td class="flex gap-1.5">
+            <VBtn size="sm" :disabled="actionId === activity.id" @click="edit(activity)">{{ $t("shop.edit") }}</VBtn>
+            <VBtn size="sm" :disabled="actionId === activity.id" @click="remove(activity)">{{ $t("common.delete") }}</VBtn>
+          </td>
+        </tr>
+      </tbody>
+    </VTable>
+  </VPage>
 </template>
-
-<style scoped>
-.create-card {
-  margin-bottom: 20px;
-}
-.create-card h2 {
-  font-size: 16px;
-  margin: 0 0 16px;
-}
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 12px;
-  margin: 12px 0;
-}
-.form-grid label {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 13px;
-}
-.form-grid .checkbox {
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-}
-.form-actions {
-  display: flex;
-  gap: 8px;
-}
-.table-wrap {
-  overflow-x: auto;
-  padding: 0;
-}
-.table {
-  min-width: 1100px;
-}
-.action-row {
-  display: flex;
-  gap: 6px;
-}
-</style>
diff --git a/apps/shop-admin/pages/index.vue b/apps/shop-admin/pages/index.vue
index 3684d61..0c9290a 100644
--- a/apps/shop-admin/pages/index.vue
+++ b/apps/shop-admin/pages/index.vue
@@ -61,67 +61,38 @@ const stats = computed(() => [
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <h1 class="page-title">{{ $t("shop.dashboardTitle") }}</h1>
-      <button class="btn sm" :disabled="loading" @click="loadDashboard">{{ $t("common.search") }}</button>
-    </div>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+  <VPage :title="$t('shop.dashboardTitle')">
+    <template #actions>
+      <VBtn size="sm" :disabled="loading" @click="loadDashboard">{{ $t("common.search") }}</VBtn>
+    </template>
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
     <template v-else>
-      <div class="stats-grid">
-        <div v-for="stat in stats" :key="stat.key" class="card stat-card">
-          <span class="muted">{{ $t(stat.label) }}</span>
-          <strong>{{ stat.value }}</strong>
-        </div>
+      <div class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
+        <VCard v-for="stat in stats" :key="stat.key" class="grid gap-2">
+          <span class="text-sm text-muted">{{ $t(stat.label) }}</span>
+          <strong class="text-3xl font-bold text-text">{{ stat.value }}</strong>
+        </VCard>
       </div>
-      <section v-if="shop" class="card shop-profile mt">
-        <h2>{{ $t("shop.profile") }}</h2>
-        <div class="profile-grid">
-          <div>
-            <span class="muted">{{ $t("product.shop") }}</span>
+      <VCard v-if="shop" class="mt-4">
+        <h2 class="mb-4 text-lg font-semibold text-text">{{ $t("shop.profile") }}</h2>
+        <div class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
+          <div class="grid gap-1.5">
+            <span class="text-sm text-muted">{{ $t("product.shop") }}</span>
             <strong>{{ localized(shop.name, locale) }}</strong>
           </div>
-          <div>
-            <span class="muted">{{ $t("shop.slug") }}</span>
+          <div class="grid gap-1.5">
+            <span class="text-sm text-muted">{{ $t("shop.slug") }}</span>
             <strong>{{ shop.slug }}</strong>
           </div>
-          <div>
-            <span class="muted">{{ $t("shop.shopStatus") }}</span>
-            <span class="badge" :class="shop.status === 'active' ? 'green' : 'red'">
+          <div class="grid gap-1.5">
+            <span class="text-sm text-muted">{{ $t("shop.shopStatus") }}</span>
+            <VBadge :tone="shop.status === 'active' ? 'green' : 'red'">
               {{ $t(`admin.${shop.status}`) }}
-            </span>
+            </VBadge>
           </div>
         </div>
-      </section>
+      </VCard>
     </template>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
-  gap: 16px;
-}
-.stat-card {
-  display: grid;
-  gap: 8px;
-}
-.stat-card strong {
-  font-size: 28px;
-}
-.shop-profile h2 {
-  margin: 0 0 16px;
-  font-size: 18px;
-}
-.profile-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 16px;
-}
-.profile-grid > div {
-  display: grid;
-  gap: 6px;
-}
-</style>
diff --git a/apps/shop-admin/pages/invoices.vue b/apps/shop-admin/pages/invoices.vue
index c9de4b3..e163c66 100644
--- a/apps/shop-admin/pages/invoices.vue
+++ b/apps/shop-admin/pages/invoices.vue
@@ -12,10 +12,11 @@ const loading = ref(true);
 const error = ref("");
 const actionId = ref("");
 
-function statusClass(value: Invoice["status"]): string {
+function statusClass(value: Invoice["status"]): "green" | "red" | "orange" {
   return value === "issued" ? "green" : value === "cancelled" ? "red" : "orange";
 }
 
+
 async function loadInvoices(): Promise<void> {
   loading.value = true;
   error.value = "";
@@ -48,44 +49,35 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page">
-    <h1 class="page-title">{{ $t("shop.invoiceList") }}</h1>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="!invoices.length" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>{{ $t("shop.invoiceNo") }}</th>
-            <th>{{ $t("shop.orderNo") }}</th>
-            <th>{{ $t("invoice.invoiceTitle") }}</th>
-            <th>{{ $t("shop.kind") }}</th>
-            <th>{{ $t("shop.taxNo") }}</th>
-            <th>{{ $t("invoice.amount") }}</th>
-            <th>{{ $t("common.status") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="invoice in invoices" :key="invoice.id">
-            <td>{{ invoice.invoice_no || $t("shop.noInvoice") }}</td>
-            <td><NuxtLink :to="`/orders/${invoice.order_id}`">{{ invoice.order_no ?? invoice.order_id }}</NuxtLink></td>
-            <td>{{ invoice.title }}</td>
-            <td>{{ $t(`invoice.${invoice.kind}`) }}</td>
-            <td>{{ invoice.tax_no || $t("shop.noInvoice") }}</td>
-            <td>{{ fmt(invoice.amount_minor, invoice.currency) }}</td>
-            <td><span class="badge" :class="statusClass(invoice.status)">{{ $t(`invoice.status.${invoice.status}`) }}</span></td>
-            <td><button v-if="invoice.status === 'requested'" class="btn sm primary" :disabled="actionId === invoice.id" @click="issueInvoice(invoice)">{{ $t("shop.issueInvoice") }}</button></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <VPage :title="$t('shop.invoiceList')">
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="!invoices.length" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <VTable v-else>
+      <thead>
+        <tr>
+          <th>{{ $t("shop.invoiceNo") }}</th>
+          <th>{{ $t("shop.orderNo") }}</th>
+          <th>{{ $t("invoice.invoiceTitle") }}</th>
+          <th>{{ $t("shop.kind") }}</th>
+          <th>{{ $t("shop.taxNo") }}</th>
+          <th>{{ $t("invoice.amount") }}</th>
+          <th>{{ $t("common.status") }}</th>
+          <th>{{ $t("common.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="invoice in invoices" :key="invoice.id">
+          <td>{{ invoice.invoice_no || $t("shop.noInvoice") }}</td>
+          <td><NuxtLink :to="`/orders/${invoice.order_id}`" class="text-primary hover:underline">{{ invoice.order_no ?? invoice.order_id }}</NuxtLink></td>
+          <td>{{ invoice.title }}</td>
+          <td>{{ $t(`invoice.${invoice.kind}`) }}</td>
+          <td>{{ invoice.tax_no || $t("shop.noInvoice") }}</td>
+          <td>{{ fmt(invoice.amount_minor, invoice.currency) }}</td>
+          <td><VBadge :tone="statusClass(invoice.status)">{{ $t(`invoice.status.${invoice.status}`) }}</VBadge></td>
+          <td><VBtn v-if="invoice.status === 'requested'" variant="primary" size="sm" :disabled="actionId === invoice.id" @click="issueInvoice(invoice)">{{ $t("shop.issueInvoice") }}</VBtn></td>
+        </tr>
+      </tbody>
+    </VTable>
+  </VPage>
 </template>
-
-<style scoped>
-.table-wrap {
-  overflow-x: auto;
-}
-</style>
diff --git a/apps/shop-admin/pages/login.vue b/apps/shop-admin/pages/login.vue
index d0ec4f1..f771985 100644
--- a/apps/shop-admin/pages/login.vue
+++ b/apps/shop-admin/pages/login.vue
@@ -27,21 +27,21 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <main class="page">
-    <form class="card form-narrow" @submit.prevent="submit">
-      <h1 class="page-title">{{ $t("auth.welcome") }}</h1>
-      <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-      <div class="field">
-        <label for="email">{{ $t("common.email") }}</label>
-        <input id="email" v-model="email" type="email" autocomplete="username" required />
-      </div>
-      <div class="field">
-        <label for="password">{{ $t("common.password") }}</label>
-        <input id="password" v-model="password" type="password" autocomplete="current-password" required />
-      </div>
-      <button class="btn primary" type="submit" :disabled="busy">
-        {{ busy ? $t("common.loading") : $t("common.login") }}
-      </button>
-    </form>
+  <main class="grid min-h-screen place-items-center bg-bg px-4 font-sans text-text">
+    <VCard class="w-full max-w-[420px]">
+      <form @submit.prevent="submit">
+        <h1 class="mb-5 text-xl font-bold text-text">{{ $t("auth.welcome") }}</h1>
+        <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+        <VField :label="$t('common.email')">
+          <VInput id="email" v-model="email" type="email" autocomplete="username" required />
+        </VField>
+        <VField :label="$t('common.password')">
+          <VInput id="password" v-model="password" type="password" autocomplete="current-password" required />
+        </VField>
+        <VBtn variant="primary" type="submit" :disabled="busy">
+          {{ busy ? $t("common.loading") : $t("common.login") }}
+        </VBtn>
+      </form>
+    </VCard>
   </main>
 </template>
diff --git a/apps/shop-admin/pages/orders/[id].vue b/apps/shop-admin/pages/orders/[id].vue
index da6b8b1..5349ef7 100644
--- a/apps/shop-admin/pages/orders/[id].vue
+++ b/apps/shop-admin/pages/orders/[id].vue
@@ -19,17 +19,18 @@ const busy = ref(false);
 const actionId = ref("");
 const error = ref("");
 
-function statusClass(value: OrderStatus): string {
+function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
   if (value === "completed") return "green";
   if (value === "cancelled") return "red";
   if (value === "pending_payment") return "orange";
   return "blue";
 }
 
-function shipmentStatusClass(value: Shipment["status"]): string {
+function shipmentStatusClass(value: Shipment["status"]): "green" | "blue" | "orange" {
   return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
 }
 
+
 function formatDate(value: string): string {
   return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
 }
@@ -134,112 +135,78 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <h1 class="page-title">{{ order ? order.order_no : $t("order.title") }}</h1>
-      <NuxtLink class="btn" to="/orders">{{ $t("common.back") }}</NuxtLink>
-    </div>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+  <VPage :title="order ? order.order_no : $t('order.title')">
+    <template #actions>
+      <NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/orders">{{ $t("common.back") }}</NuxtLink>
+    </template>
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
     <template v-else-if="order">
-      <section class="card">
-        <div class="row between detail-heading">
-          <h2>{{ $t("shop.details") }}</h2>
-          <span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span>
+      <VCard>
+        <div class="mb-4 flex items-center justify-between gap-3">
+          <h2 class="text-lg font-semibold">{{ $t("shop.details") }}</h2>
+          <VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge>
         </div>
-        <div class="order-meta">
-          <div><span class="muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(order.created_at) }}</strong></div>
-          <div><span class="muted">{{ $t("shop.total") }}</span><strong>{{ fmt(order.total_minor, order.currency) }}</strong></div>
+        <div class="mb-5 grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
+          <div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(order.created_at) }}</strong></div>
+          <div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.total") }}</span><strong>{{ fmt(order.total_minor, order.currency) }}</strong></div>
         </div>
-        <h3>{{ $t("shop.items") }}</h3>
-        <div class="table-wrap">
-          <table class="table">
-            <thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("product.skuCode") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("common.price") }}</th></tr></thead>
-            <tbody>
-              <tr v-for="item in order.items" :key="item.id">
-                <td>{{ localized(item.product_name, locale) }}</td>
-                <td>{{ item.sku_code }}</td>
-                <td>{{ item.qty }}</td>
-                <td>{{ fmt(item.unit_price_minor, order.currency) }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <h3>{{ $t("shop.address") }}</h3>
-        <address class="address">
+        <h3 class="mb-3 text-base font-semibold">{{ $t("shop.items") }}</h3>
+        <VTable>
+          <thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("product.skuCode") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("common.price") }}</th></tr></thead>
+          <tbody>
+            <tr v-for="item in order.items" :key="item.id">
+              <td>{{ localized(item.product_name, locale) }}</td>
+              <td>{{ item.sku_code }}</td>
+              <td>{{ item.qty }}</td>
+              <td>{{ fmt(item.unit_price_minor, order.currency) }}</td>
+            </tr>
+          </tbody>
+        </VTable>
+        <h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("shop.address") }}</h3>
+        <address class="not-italic leading-7">
           <div>{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</div>
           <div>{{ order.shipping_address.country }}, {{ order.shipping_address.region }}, {{ order.shipping_address.city }}</div>
           <div>{{ order.shipping_address.line1 }}, {{ order.shipping_address.postal_code }}</div>
         </address>
-      </section>
+      </VCard>
 
-      <section v-if="order.status === 'paid' || order.status === 'fulfilling'" class="card mt">
-        <h2>{{ $t("shop.createShipment") }}</h2>
+      <VCard v-if="order.status === 'paid' || order.status === 'fulfilling'" class="mt-4">
+        <h2 class="mb-4 text-lg font-semibold">{{ $t("shop.createShipment") }}</h2>
         <form @submit.prevent="createShipment">
-          <div class="field-row">
-            <div class="field"><label for="carrier">{{ $t("shop.carrier") }}</label><input id="carrier" v-model="carrier" required /></div>
-            <div class="field"><label for="tracking-no">{{ $t("shop.trackingNo") }}</label><input id="tracking-no" v-model="trackingNo" required /></div>
+          <div class="grid gap-3 md:grid-cols-2">
+            <VField :label="$t('shop.carrier')">
+              <VInput id="carrier" v-model="carrier" required />
+            </VField>
+            <VField :label="$t('shop.trackingNo')">
+              <VInput id="tracking-no" v-model="trackingNo" required />
+            </VField>
           </div>
-          <h3>{{ $t("shop.shipmentQuantities") }}</h3>
-          <div v-for="item in order.items" :key="`quantity-${item.id}`" class="field-row quantity-row">
-            <div class="quantity-name">{{ localized(item.product_name, locale) }} ({{ item.sku_code }})</div>
-            <div class="field"><label :for="`quantity-${item.id}`">{{ $t("shop.unshipped") }}: {{ unshippedQuantity(item.id, item.qty) }}</label><input :id="`quantity-${item.id}`" v-model.number="quantities[item.id]" type="number" min="0" :max="unshippedQuantity(item.id, item.qty)" step="1" /></div>
+          <h3 class="mb-3 text-base font-semibold">{{ $t("shop.shipmentQuantities") }}</h3>
+          <div v-for="item in order.items" :key="`quantity-${item.id}`" class="flex items-end gap-3">
+            <div class="min-w-0 flex-[2] pb-3.5">{{ localized(item.product_name, locale) }} ({{ item.sku_code }})</div>
+            <VField class="flex-1" :label="`${$t('shop.unshipped')}: ${unshippedQuantity(item.id, item.qty)}`">
+              <VInput :id="`quantity-${item.id}`" v-model.number="quantities[item.id]" type="number" min="0" :max="unshippedQuantity(item.id, item.qty)" step="1" />
+            </VField>
           </div>
-          <button class="btn primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</button>
+          <VBtn variant="primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</VBtn>
         </form>
-      </section>
+      </VCard>
 
-      <section class="card mt">
-        <h2>{{ $t("shipment.title") }}</h2>
-        <div v-if="!shipments.length" class="muted">{{ $t("common.empty") }}</div>
-        <div v-else class="table-wrap">
-          <table class="table">
-            <thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shop.carrier") }}</th><th>{{ $t("shop.trackingNo") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
-            <tbody>
-              <tr v-for="shipment in shipments" :key="shipment.id">
-                <td>{{ shipment.shipment_no }}</td><td>{{ shipment.carrier }}</td><td>{{ shipment.tracking_no }}</td>
-                <td><span class="badge" :class="shipmentStatusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</span></td>
-                <td><button v-if="shipment.status === 'pending'" class="btn sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</button></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
+      <VCard class="mt-4">
+        <h2 class="mb-4 text-lg font-semibold">{{ $t("shipment.title") }}</h2>
+        <div v-if="!shipments.length" class="text-muted">{{ $t("common.empty") }}</div>
+        <VTable v-else>
+          <thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shop.carrier") }}</th><th>{{ $t("shop.trackingNo") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
+          <tbody>
+            <tr v-for="shipment in shipments" :key="shipment.id">
+              <td>{{ shipment.shipment_no }}</td><td>{{ shipment.carrier }}</td><td>{{ shipment.tracking_no }}</td>
+              <td><VBadge :tone="shipmentStatusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</VBadge></td>
+              <td><VBtn v-if="shipment.status === 'pending'" size="sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</VBtn></td>
+            </tr>
+          </tbody>
+        </VTable>
+      </VCard>
     </template>
-  </div>
+  </VPage>
 </template>
-
-
-<style scoped>
-.detail-heading h2,
-.card h3 {
-  margin-top: 0;
-}
-.order-meta {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 16px;
-  margin-bottom: 20px;
-}
-.order-meta > div {
-  display: grid;
-  gap: 6px;
-}
-.address {
-  font-style: normal;
-  line-height: 1.7;
-}
-.table-wrap {
-  overflow-x: auto;
-}
-.quantity-row {
-  align-items: end;
-}
-.quantity-name {
-  flex: 2;
-  padding-bottom: 14px;
-}
-.quantity-row .field {
-  flex: 1;
-}
-</style>
diff --git a/apps/shop-admin/pages/orders/index.vue b/apps/shop-admin/pages/orders/index.vue
index 4f21a59..7babfcf 100644
--- a/apps/shop-admin/pages/orders/index.vue
+++ b/apps/shop-admin/pages/orders/index.vue
@@ -13,13 +13,14 @@ const status = ref<"" | OrderStatus>("");
 const loading = ref(true);
 const error = ref("");
 
-function statusClass(value: OrderStatus): string {
+function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
   if (value === "completed") return "green";
   if (value === "cancelled") return "red";
   if (value === "pending_payment") return "orange";
   return "blue";
 }
 
+
 function formatDate(value: string): string {
   return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
 }
@@ -54,11 +55,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head"><h1 class="page-title">{{ $t("shop.orderList") }}</h1></div>
-    <div class="row mb">
-      <label for="order-status">{{ $t("shop.filterOrderStatus") }}</label>
-      <select id="order-status" v-model="status" @change="filterChanged">
+  <VPage :title="$t('shop.orderList')">
+    <div class="mb-4 flex items-center gap-3">
+      <label for="order-status" class="text-sm font-medium">{{ $t("shop.filterOrderStatus") }}</label>
+      <select id="order-status" v-model="status" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" @change="filterChanged">
         <option value="">{{ $t("common.all") }}</option>
         <option value="pending_payment">{{ $t("order.status.pending_payment") }}</option>
         <option value="paid">{{ $t("order.status.paid") }}</option>
@@ -68,43 +68,35 @@ onMounted(() => {
         <option value="cancelled">{{ $t("order.status.cancelled") }}</option>
       </select>
     </div>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="!orders?.items.length" class="card muted">{{ $t("common.empty") }}</div>
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="!orders?.items.length" class="text-muted">{{ $t("common.empty") }}</VCard>
     <template v-else>
-      <div class="table-wrap">
-        <table class="table">
-          <thead>
-            <tr>
-              <th>{{ $t("shop.orderNo") }}</th>
-              <th>{{ $t("shop.created") }}</th>
-              <th>{{ $t("shop.items") }}</th>
-              <th>{{ $t("shop.total") }}</th>
-              <th>{{ $t("common.status") }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="order in orders.items" :key="order.id">
-              <td><NuxtLink :to="`/orders/${order.id}`">{{ order.order_no }}</NuxtLink></td>
-              <td>{{ formatDate(order.created_at) }}</td>
-              <td>{{ order.items.length }}</td>
-              <td>{{ fmt(order.total_minor, order.currency) }}</td>
-              <td><span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div v-if="orders.total > orders.per_page" class="row between mt">
-        <button class="btn sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
-        <span class="muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
-        <button class="btn sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
+      <VTable>
+        <thead>
+          <tr>
+            <th>{{ $t("shop.orderNo") }}</th>
+            <th>{{ $t("shop.created") }}</th>
+            <th>{{ $t("shop.items") }}</th>
+            <th>{{ $t("shop.total") }}</th>
+            <th>{{ $t("common.status") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="order in orders.items" :key="order.id">
+            <td><NuxtLink :to="`/orders/${order.id}`" class="text-primary hover:underline">{{ order.order_no }}</NuxtLink></td>
+            <td>{{ formatDate(order.created_at) }}</td>
+            <td>{{ order.items.length }}</td>
+            <td>{{ fmt(order.total_minor, order.currency) }}</td>
+            <td><VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge></td>
+          </tr>
+        </tbody>
+      </VTable>
+      <div v-if="orders.total > orders.per_page" class="mt-4 flex items-center justify-between">
+        <VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
+        <span class="text-sm text-muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
+        <VBtn size="sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
       </div>
     </template>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.table-wrap {
-  overflow-x: auto;
-}
-</style>
diff --git a/apps/shop-admin/pages/products/[id].vue b/apps/shop-admin/pages/products/[id].vue
index 3df4d69..d14e4dd 100644
--- a/apps/shop-admin/pages/products/[id].vue
+++ b/apps/shop-admin/pages/products/[id].vue
@@ -105,95 +105,61 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <h1 class="page-title">{{ $t("product.editProduct") }}</h1>
-      <NuxtLink class="btn" to="/products">{{ $t("common.back") }}</NuxtLink>
-    </div>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+  <VPage :title="$t('product.editProduct')">
+    <template #actions>
+      <NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/products">{{ $t("common.back") }}</NuxtLink>
+    </template>
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
     <template v-else-if="product">
       <ProductForm :product="product" :categories="categories" :busy="busy" @submit="updateProduct" />
-      <section class="card mt sku-section">
-        <h2>{{ $t("shop.skuManager") }}</h2>
-        <div v-if="!product.skus?.length" class="muted mb">{{ $t("shop.noSkus") }}</div>
-        <div v-else class="table-wrap">
-          <table class="table">
-            <thead>
-              <tr>
-                <th>{{ $t("product.skuCode") }}</th>
-                <th>{{ $t("common.price") }}</th>
-                <th>{{ $t("common.currency") }}</th>
-                <th>{{ $t("shop.stock") }}</th>
-                <th>{{ $t("shop.active") }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="sku in product.skus" :key="sku.id">
-                <td>{{ sku.sku_code }}</td>
-                <td>{{ formatSkuPrice(sku) }}</td>
-                <td>{{ sku.currency }}</td>
-                <td>{{ sku.stock }}</td>
-                <td><span class="badge" :class="sku.active ? 'green' : 'red'">{{ sku.active ? $t("common.yes") : $t("common.no") }}</span></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <form class="sku-form mt" @submit.prevent="saveSku">
-          <h3>{{ $t("shop.addSku") }}</h3>
-          <div class="field-row">
-            <div class="field">
-              <label for="sku-code">{{ $t("product.skuCode") }}</label>
-              <input id="sku-code" v-model="skuCode" required />
-            </div>
-            <div class="field">
-              <label for="sku-price">{{ $t("shop.skuPriceMajor") }}</label>
-              <input id="sku-price" v-model="skuPrice" inputmode="decimal" required />
-            </div>
-          </div>
-          <div class="field-row">
-            <div class="field">
-              <label for="sku-currency">{{ $t("common.currency") }}</label>
-              <select id="sku-currency" v-model="skuCurrency">
+      <VCard class="mt-4 max-w-[960px]">
+        <h2 class="mb-4 text-lg font-semibold">{{ $t("shop.skuManager") }}</h2>
+        <div v-if="!product.skus?.length" class="mb-4 text-muted">{{ $t("shop.noSkus") }}</div>
+        <VTable v-else>
+          <thead>
+            <tr>
+              <th>{{ $t("product.skuCode") }}</th>
+              <th>{{ $t("common.price") }}</th>
+              <th>{{ $t("common.currency") }}</th>
+              <th>{{ $t("shop.stock") }}</th>
+              <th>{{ $t("shop.active") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="sku in product.skus" :key="sku.id">
+              <td>{{ sku.sku_code }}</td>
+              <td>{{ formatSkuPrice(sku) }}</td>
+              <td>{{ sku.currency }}</td>
+              <td>{{ sku.stock }}</td>
+              <td><VBadge :tone="sku.active ? 'green' : 'red'">{{ sku.active ? $t("common.yes") : $t("common.no") }}</VBadge></td>
+            </tr>
+          </tbody>
+        </VTable>
+        <form class="mt-4 max-w-[720px] border-t border-border pt-3" @submit.prevent="saveSku">
+          <h3 class="mb-3 text-base font-semibold">{{ $t("shop.addSku") }}</h3>
+          <div class="grid gap-3 md:grid-cols-2">
+            <VField :label="$t('product.skuCode')">
+              <VInput id="sku-code" v-model="skuCode" required />
+            </VField>
+            <VField :label="$t('shop.skuPriceMajor')">
+              <VInput id="sku-price" v-model="skuPrice" inputmode="decimal" required />
+            </VField>
+            <VField :label="$t('common.currency')">
+              <select id="sku-currency" v-model="skuCurrency" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
                 <option value="USD">USD</option>
                 <option value="CNY">CNY</option>
                 <option value="EUR">EUR</option>
               </select>
-            </div>
-            <div class="field">
-              <label for="sku-stock">{{ $t("shop.stock") }}</label>
-              <input id="sku-stock" v-model="skuStock" type="number" min="0" step="1" required />
-            </div>
+            </VField>
+            <VField :label="$t('shop.stock')">
+              <VInput id="sku-stock" v-model="skuStock" type="number" min="0" step="1" required />
+            </VField>
           </div>
-          <label class="checkbox-field"><input v-model="skuActive" type="checkbox" /> {{ $t("shop.active") }}</label>
-          <button class="btn primary" type="submit" :disabled="skuBusy">{{ $t("shop.addSku") }}</button>
+          <label class="mb-3.5 flex items-center gap-2 text-sm font-medium text-text"><input v-model="skuActive" type="checkbox" class="h-4 w-4 accent-primary" /> {{ $t("shop.active") }}</label>
+          <VBtn variant="primary" type="submit" :disabled="skuBusy">{{ $t("shop.addSku") }}</VBtn>
         </form>
-      </section>
+      </VCard>
     </template>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.sku-section {
-  max-width: 960px;
-}
-.sku-section h2,
-.sku-form h3 {
-  margin-top: 0;
-}
-.table-wrap {
-  overflow-x: auto;
-}
-.sku-form {
-  max-width: 720px;
-}
-.checkbox-field {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 14px;
-}
-.checkbox-field input {
-  width: auto;
-}
-</style>
diff --git a/apps/shop-admin/pages/products/index.vue b/apps/shop-admin/pages/products/index.vue
index 841cb3f..598f8fa 100644
--- a/apps/shop-admin/pages/products/index.vue
+++ b/apps/shop-admin/pages/products/index.vue
@@ -13,10 +13,11 @@ const loading = ref(true);
 const error = ref("");
 const actionId = ref("");
 
-function statusClass(value: ProductStatus): string {
+function statusClass(value: ProductStatus): "green" | "orange" | "blue" {
   return value === "published" ? "green" : value === "unpublished" ? "orange" : "blue";
 }
 
+
 function formatDate(value: string): string {
   return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
 }
@@ -62,76 +63,54 @@ onMounted(loadProducts);
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <h1 class="page-title">{{ $t("shop.productList") }}</h1>
-      <NuxtLink class="btn primary" to="/products/new">{{ $t("shop.newProduct") }}</NuxtLink>
-    </div>
-    <div class="row mb">
-      <label for="product-status">{{ $t("shop.filterStatus") }}</label>
-      <select id="product-status" v-model="status" @change="filterChanged">
+  <VPage :title="$t('shop.productList')">
+    <template #actions>
+      <NuxtLink to="/products/new" class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover">{{ $t("shop.newProduct") }}</NuxtLink>
+    </template>
+    <div class="mb-4 flex items-center gap-3">
+      <label for="product-status" class="text-sm font-medium">{{ $t("shop.filterStatus") }}</label>
+      <select id="product-status" v-model="status" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" @change="filterChanged">
         <option value="">{{ $t("common.all") }}</option>
         <option value="draft">{{ $t("product.draft") }}</option>
         <option value="published">{{ $t("product.published") }}</option>
         <option value="unpublished">{{ $t("product.unpublished") }}</option>
       </select>
     </div>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="!products?.items.length" class="card muted">{{ $t("common.empty") }}</div>
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="!products?.items.length" class="text-muted">{{ $t("common.empty") }}</VCard>
     <template v-else>
-      <div class="table-wrap">
-        <table class="table">
-          <thead>
-            <tr>
-              <th>{{ $t("product.detail") }}</th>
-              <th>{{ $t("product.slug") }}</th>
-              <th>{{ $t("shop.skuCount") }}</th>
-              <th>{{ $t("common.status") }}</th>
-              <th>{{ $t("shop.created") }}</th>
-              <th>{{ $t("common.actions") }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="product in products.items" :key="product.id">
-              <td>{{ localized(product.name, locale) }}</td>
-              <td>{{ product.slug }}</td>
-              <td>{{ product.skus?.length ?? 0 }}</td>
-              <td><span class="badge" :class="statusClass(product.status)">{{ $t(`product.${product.status}`) }}</span></td>
-              <td>{{ formatDate(product.created_at) }}</td>
-              <td class="row actions-cell">
-                <NuxtLink class="btn sm" :to="`/products/${product.id}`">{{ $t("shop.edit") }}</NuxtLink>
-                <button
-                  v-if="product.status === 'published'"
-                  class="btn sm"
-                  :disabled="actionId === product.id"
-                  @click="togglePublished(product)"
-                >{{ $t("product.unpublish") }}</button>
-                <button
-                  v-else
-                  class="btn sm primary"
-                  :disabled="actionId === product.id"
-                  @click="togglePublished(product)"
-                >{{ $t("product.publish") }}</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div v-if="products.total > products.per_page" class="row between mt">
-        <button class="btn sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
-        <span class="muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(products.total / products.per_page) }}</span>
-        <button class="btn sm" :disabled="page >= Math.ceil(products.total / products.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
+      <VTable>
+        <thead>
+          <tr>
+            <th>{{ $t("product.detail") }}</th>
+            <th>{{ $t("product.slug") }}</th>
+            <th>{{ $t("shop.skuCount") }}</th>
+            <th>{{ $t("common.status") }}</th>
+            <th>{{ $t("shop.created") }}</th>
+            <th>{{ $t("common.actions") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="product in products.items" :key="product.id">
+            <td>{{ localized(product.name, locale) }}</td>
+            <td>{{ product.slug }}</td>
+            <td>{{ product.skus?.length ?? 0 }}</td>
+            <td><VBadge :tone="statusClass(product.status)">{{ $t(`product.${product.status}`) }}</VBadge></td>
+            <td>{{ formatDate(product.created_at) }}</td>
+            <td class="flex flex-wrap items-center gap-1.5">
+              <NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-2.5 py-1 text-[13px] font-medium text-text hover:bg-bg" :to="`/products/${product.id}`">{{ $t("shop.edit") }}</NuxtLink>
+              <VBtn v-if="product.status === 'published'" size="sm" :disabled="actionId === product.id" @click="togglePublished(product)">{{ $t("product.unpublish") }}</VBtn>
+              <VBtn v-else variant="primary" size="sm" :disabled="actionId === product.id" @click="togglePublished(product)">{{ $t("product.publish") }}</VBtn>
+            </td>
+          </tr>
+        </tbody>
+      </VTable>
+      <div v-if="products.total > products.per_page" class="mt-4 flex items-center justify-between">
+        <VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
+        <span class="text-sm text-muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(products.total / products.per_page) }}</span>
+        <VBtn size="sm" :disabled="page >= Math.ceil(products.total / products.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
       </div>
     </template>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.table-wrap {
-  overflow-x: auto;
-}
-.actions-cell {
-  flex-wrap: wrap;
-}
-</style>
diff --git a/apps/shop-admin/pages/products/new.vue b/apps/shop-admin/pages/products/new.vue
index 34aaf7b..fb116db 100644
--- a/apps/shop-admin/pages/products/new.vue
+++ b/apps/shop-admin/pages/products/new.vue
@@ -37,13 +37,12 @@ onMounted(loadCategories);
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head">
-      <h1 class="page-title">{{ $t("product.newProduct") }}</h1>
-      <NuxtLink class="btn" to="/products">{{ $t("common.back") }}</NuxtLink>
-    </div>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+  <VPage :title="$t('product.newProduct')">
+    <template #actions>
+      <NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/products">{{ $t("common.back") }}</NuxtLink>
+    </template>
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
     <ProductForm v-else :categories="categories" :busy="busy" @submit="saveProduct" />
-  </div>
+  </VPage>
 </template>
diff --git a/apps/shop-admin/pages/shipments.vue b/apps/shop-admin/pages/shipments.vue
index 410f0d7..a4f2df4 100644
--- a/apps/shop-admin/pages/shipments.vue
+++ b/apps/shop-admin/pages/shipments.vue
@@ -10,10 +10,11 @@ const loading = ref(true);
 const error = ref("");
 const actionId = ref("");
 
-function statusClass(value: Shipment["status"]): string {
+function statusClass(value: Shipment["status"]): "green" | "blue" | "orange" {
   return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
 }
 
+
 function formatDate(value: string): string {
   return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
 }
@@ -47,42 +48,33 @@ onMounted(loadShipments);
 </script>
 
 <template>
-  <div class="page">
-    <h1 class="page-title">{{ $t("shop.shipmentList") }}</h1>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="!shipments.length" class="card muted">{{ $t("common.empty") }}</div>
-    <div v-else class="table-wrap">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>{{ $t("shipment.shipmentNo") }}</th>
-            <th>{{ $t("shop.orderNo") }}</th>
-            <th>{{ $t("shop.carrier") }}</th>
-            <th>{{ $t("shop.trackingNo") }}</th>
-            <th>{{ $t("common.status") }}</th>
-            <th>{{ $t("shop.created") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="shipment in shipments" :key="shipment.id">
-            <td>{{ shipment.shipment_no }}</td>
-            <td><NuxtLink :to="`/orders/${shipment.order_id}`">{{ shipment.order_no ?? shipment.order_id }}</NuxtLink></td>
-            <td>{{ shipment.carrier }}</td>
-            <td>{{ shipment.tracking_no }}</td>
-            <td><span class="badge" :class="statusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</span></td>
-            <td>{{ formatDate(shipment.created_at) }}</td>
-            <td><button v-if="shipment.status === 'pending'" class="btn sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</button></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <VPage :title="$t('shop.shipmentList')">
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="!shipments.length" class="text-muted">{{ $t("common.empty") }}</VCard>
+    <VTable v-else>
+      <thead>
+        <tr>
+          <th>{{ $t("shipment.shipmentNo") }}</th>
+          <th>{{ $t("shop.orderNo") }}</th>
+          <th>{{ $t("shop.carrier") }}</th>
+          <th>{{ $t("shop.trackingNo") }}</th>
+          <th>{{ $t("common.status") }}</th>
+          <th>{{ $t("shop.created") }}</th>
+          <th>{{ $t("common.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="shipment in shipments" :key="shipment.id">
+          <td>{{ shipment.shipment_no }}</td>
+          <td><NuxtLink :to="`/orders/${shipment.order_id}`" class="text-primary hover:underline">{{ shipment.order_no ?? shipment.order_id }}</NuxtLink></td>
+          <td>{{ shipment.carrier }}</td>
+          <td>{{ shipment.tracking_no }}</td>
+          <td><VBadge :tone="statusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</VBadge></td>
+          <td>{{ formatDate(shipment.created_at) }}</td>
+          <td><VBtn v-if="shipment.status === 'pending'" size="sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</VBtn></td>
+        </tr>
+      </tbody>
+    </VTable>
+  </VPage>
 </template>
-
-<style scoped>
-.table-wrap {
-  overflow-x: auto;
-}
-</style>
diff --git a/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/.openspec.yaml b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/.openspec.yaml
new file mode 100644
index 0000000..1b9acb7
--- /dev/null
+++ b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-09-22
diff --git a/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/design.md b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/design.md
new file mode 100644
index 0000000..2ba42a9
--- /dev/null
+++ b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/design.md
@@ -0,0 +1,56 @@
+## Context
+
+Three Nuxt 3 apps share `@vmall/shared` (API types, locales, `ui.css`) and otherwise style themselves with global CSS plus Vue `<style scoped>` (~4k lines, mostly mall). There is no Tailwind/PostCSS today. Mall is a classic B2B2C PC chrome (`#ca151e`, 1200px, 450px hero); admin consoles are a blue SaaS shell. Operators asked for a full rewrite onto Tailwind, one design system, a visual refresh that **keeps mall IA**, red as the default accent, and **preset accent switching in shop-admin and platform admin only**.
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Replace `ui.css`, `mall.css`, and all scoped CSS with Tailwind v4 utilities plus a small Vue kit.
+- One token set (red default) across mall, shop-admin, and platform admin.
+- Console accent presets (`red | blue | teal | violet`) persisted locally; mall locked to red.
+- Preserve mall shell behavior required by `frontend-mall`.
+
+**Non-Goals:**
+
+- Dark mode, free hex picker, per-shop customer-facing branding, theming the public mall.
+- Element Plus or other component libraries.
+- Backend/API work; catalog module split.
+
+## Decisions
+
+1. **Tailwind v4 via `@tailwindcss/vite`**, not `@nuxtjs/tailwindcss`. Apps already run Nuxt 3 + Vite 7; v4 is CSS-first (`@theme`) and avoids a PostCSS/v3-oriented module.
+
+2. **Tokens in `@vmall/shared/theme.css`**, replacing `ui.css`. Shared stays the contract package (types, API, locales, theme). Vue is not added to shared.
+
+3. **New `@vmall/ui`** for `VBtn`, `VBadge`, `VField`/`VInput`, `VCard`/`VPanel`, `VTable`, `VPage`, and `useAccent()`. Mall-only chrome (mega-menu, carousel, `w1200` shell, product-card lift) stays in `apps/mall`. Admin sidebar layouts stay in each admin app.
+
+   *Alternative considered:* put Vue primitives in shared — rejected so the API contract package stays Vue-free. *Alternative:* utilities only, no kit — rejected; repeating `.btn` / `.mbtn` as 10-class strings will rot.
+
+4. **No `@apply` leftover stylesheets.** Layout = utilities; repeating chrome = kit. Spec-locked sizes become theme keys (`max-w-mall`, `h-hero`) rather than scattered `w-[1200px]`.
+
+5. **Accent via `html[data-accent]`** mapping CSS variables that `@theme` aliases to `primary`. `useAccent()` writes `localStorage` (`vmall-accent` per app origin) and sets the dataset. Mall sets `data-accent="red"` at boot and does not render a switcher. Invalid stored values fall back to red.
+
+   *Alternative considered:* user-profile API — out of scope. *Alternative:* `class="dark"` — not in this change.
+
+6. **Phased conversion, then delete.** Dual-load old CSS until each app is converted so screens are never unstyled; then remove globals and scoped blocks.
+
+## Risks / Trade-offs
+
+- [Mall visual regression] → Convert shell first; browser-pass spec flows (home hero, mega-menu, search grid, PDP); keep 1200px / 450px / `#ca151e` as tokens.
+- [Tailwind v4 + Nuxt 3 plugin friction] → Spike on admin app first; fall back to documented Vite plugin wiring, not a new CSS engine.
+- [Accent contrast on badges/tables] → Presets only; each preset defines primary + hover + soft background, not a raw hex.
+- [Shared package build gate] → `theme.css` change still requires all three app builds.
+- [Scope creep vs catalog split] → Separate OpenSpec change; do not mix PRs.
+
+## Migration Plan
+
+1. Scaffold `theme.css` + `@vmall/ui` + Vite plugin; keep loading `ui.css` / `mall.css`.
+2. Convert platform admin, then shop-admin (introduce accent swatches).
+3. Convert mall shell, then mall pages (largest last).
+4. Delete `ui.css`, `mall.css`, remaining `<style scoped>`; switch shared export to `theme.css`; update `AGENTS.md`.
+5. Rollback: git revert the change; no DB/API migration.
+
+## Open Questions
+
+None that block implementation. If `@tailwindcss/vite` cannot register cleanly in a given Nuxt 3 minor, document the working plugin hook in this change rather than switching to UnoCSS.
diff --git a/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/proposal.md b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/proposal.md
new file mode 100644
index 0000000..3210a07
--- /dev/null
+++ b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/proposal.md
@@ -0,0 +1,33 @@
+## Why
+
+Styling is split across `ui.css`, `mall.css`, and ~4k lines of Vue scoped CSS, with two palettes (mall red vs admin blue) and no shared primitives. Adopting Tailwind v4 plus one token/kit package lets us rewrite every surface, refresh visuals, and give consoles accent presets without a second CSS stack.
+
+## What Changes
+
+- **BREAKING**: Remove `@vmall/shared/ui.css` and `apps/mall/assets/mall.css`. Shared contract export becomes `theme.css`.
+- Add Tailwind v4 (`@tailwindcss/vite`) to mall, shop-admin, and platform admin.
+- Add `@vmall/ui`: Vue primitives (`VBtn`, `VBadge`, `VField`/`VInput`, `VCard`/`VPanel`, `VTable`, `VPage`) plus `useAccent()`.
+- One design system: commerce red (`#ca151e`) default; same radius/type/spacing on all three apps.
+- Mall keeps classic PC chrome (1200px grid, dark nav, mega-menu, 450px home hero) with refreshed tokens.
+- Shop-admin and platform admin: accent presets `red | blue | teal | violet`, persisted in `localStorage`. Mall stays red with no switcher.
+- Delete all Vue `<style scoped>` in the three apps after conversion.
+
+## Capabilities
+
+### New Capabilities
+
+- `frontend-ui`: Shared Tailwind theme, UI kit, and console accent presets.
+
+### Modified Capabilities
+
+- `frontend-mall`: Storefront MUST use the shared design system; visual IA (1200px / `#ca151e` / hero / mega-menu) stays; no public accent switcher.
+- `frontend-admin`: Platform console MUST use the shared kit and expose accent presets.
+- `frontend-shop-admin`: Merchant console MUST use the shared kit and expose accent presets.
+
+## Impact
+
+`packages/shared` (`ui.css` → `theme.css`), new `packages/ui`, three Nuxt apps (all SFCs), `AGENTS.md` / OpenSpec config (shared styles path). No API or money-handling changes. Three-app `pnpm` builds plus a mall visual pass.
+
+## Non-goals
+
+Dark mode, free hex picker, per-shop customer-facing branding, theming the public mall, Element Plus, mixing this with the catalog-module split.
diff --git a/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-admin/spec.md b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-admin/spec.md
new file mode 100644
index 0000000..c656135
--- /dev/null
+++ b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-admin/spec.md
@@ -0,0 +1,15 @@
+## ADDED Requirements
+
+### Requirement: Shared design system in the platform console
+The platform admin console SHALL use `@vmall/ui` primitives and `@vmall/shared` theme tokens for chrome (buttons, fields, cards, tables, page headers, nav). It MUST NOT depend on Element Plus or the removed `ui.css` stylesheet.
+
+#### Scenario: console chrome from the kit
+- **WHEN** an authenticated platform admin opens the dashboard
+- **THEN** primary actions and page chrome render through the shared kit with the current accent preset
+
+### Requirement: Accent preset switcher
+Platform admin SHALL expose the shared accent preset control (`red`, `blue`, `teal`, `violet`) in the authenticated shell header.
+
+#### Scenario: switcher visible
+- **WHEN** an authenticated platform admin opens the console
+- **THEN** they can select an accent preset without leaving the current page
diff --git a/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-mall/spec.md b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-mall/spec.md
new file mode 100644
index 0000000..b62f41c
--- /dev/null
+++ b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-mall/spec.md
@@ -0,0 +1,29 @@
+## MODIFIED Requirements
+
+### Requirement: B2B2C mall-style PC storefront shell
+The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC mall: a 30px utility bar, logo/search/cart header, dark primary navigation with a hover category mega-menu, a 1200px content grid, and a value-proposition footer. The header SHALL remain fully visible while scrolling; no part of the shell SHALL auto-hide based on scroll position. The category mega-menu SHALL appear as a hover dropdown under the navigation "All Categories" entry on every page except the home page, where it is instead pinned in the hero row. The visual language SHALL use `#ca151e` for brand/price/active states, `#f5f5f5` section backgrounds, gray hairline borders, compact controls, and product-card hover lift/shadow. The implementation SHALL use the shared Tailwind theme and `@vmall/ui` primitives plus Nuxt-native semantic components, SHALL NOT depend on Element Plus, and SHALL NOT expose a theme-accent switcher.
+
+#### Scenario: shopper opens any mall page
+- **WHEN** a shopper navigates to a buyer-facing route
+- **THEN** the shared desktop shell wraps the route content and its nav/search/cart controls are usable
+
+#### Scenario: header persists while scrolling
+- **WHEN** a shopper scrolls any mall page
+- **THEN** the logo/search/cart header bar remains visible and is never collapsed or hidden by scroll position
+
+#### Scenario: hover categories on a non-home page
+- **WHEN** a shopper hovers "All Categories" in the navigation on a page other than `/`
+- **THEN** the category mega-menu dropdown appears below the navigation and hides again on mouse leave
+
+#### Scenario: mall has no accent switcher
+- **WHEN** a shopper inspects the mall shell
+- **THEN** there is no control to change brand accent and prices/active states remain `#ca151e`
+
+## ADDED Requirements
+
+### Requirement: Shared design system on the storefront
+Mall pages SHALL style layout with Tailwind utilities and shared primitives. Mall-only chrome (mega-menu, carousel crop, 1200px shell, product-card hover lift) MAY live in `apps/mall` components but MUST consume shared tokens, not a private global stylesheet.
+
+#### Scenario: storefront uses shared tokens
+- **WHEN** a shopper views the home page
+- **THEN** brand red, the 1200px grid, and the 450px hero height come from the shared theme keys rather than `mall.css`
diff --git a/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-shop-admin/spec.md b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-shop-admin/spec.md
new file mode 100644
index 0000000..a30e363
--- /dev/null
+++ b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-shop-admin/spec.md
@@ -0,0 +1,15 @@
+## ADDED Requirements
+
+### Requirement: Shared design system in the merchant console
+The shop-admin console SHALL use `@vmall/ui` primitives and `@vmall/shared` theme tokens for chrome (buttons, fields, cards, tables, page headers, nav). It MUST NOT depend on Element Plus or the removed `ui.css` stylesheet.
+
+#### Scenario: console chrome from the kit
+- **WHEN** an authenticated shop user opens shop-admin
+- **THEN** primary actions and page chrome render through the shared kit with the current accent preset
+
+### Requirement: Accent preset switcher
+Shop-admin SHALL expose the shared accent preset control (`red`, `blue`, `teal`, `violet`) in the authenticated shell header.
+
+#### Scenario: switcher visible
+- **WHEN** an authenticated shop user opens shop-admin
+- **THEN** they can select an accent preset without leaving the current page
diff --git a/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-ui/spec.md b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-ui/spec.md
new file mode 100644
index 0000000..9c50d1e
--- /dev/null
+++ b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/specs/frontend-ui/spec.md
@@ -0,0 +1,27 @@
+## ADDED Requirements
+
+### Requirement: Shared Tailwind design system
+The three Nuxt apps SHALL load one token stylesheet from `@vmall/shared` (`theme.css`) and SHALL compose repeating chrome from `@vmall/ui` primitives (`VBtn`, `VBadge`, `VField`/`VInput`, `VCard`/`VPanel`, `VTable`, `VPage`). They MUST NOT depend on Element Plus, MUST NOT keep `packages/shared/src/ui.css` or `apps/mall/assets/mall.css`, and MUST NOT use Vue `<style scoped>` for app chrome after the migration. Default brand/primary color SHALL be `#ca151e`.
+
+#### Scenario: apps share tokens
+- **WHEN** a developer opens mall, shop-admin, and platform admin with the default accent
+- **THEN** primary buttons, links, and active nav use `#ca151e` from the shared theme rather than per-app palettes
+
+#### Scenario: no legacy stylesheets
+- **WHEN** the migration is complete
+- **THEN** `@vmall/shared` exports `theme.css` (not `ui.css`) and the three apps have no remaining `<style scoped>` blocks for layout or chrome
+
+### Requirement: Console accent presets
+Shop-admin and platform admin SHALL let the signed-in operator pick an accent preset of `red`, `blue`, `teal`, or `violet`. The choice SHALL apply immediately to primary actions, links, and active navigation, SHALL persist in `localStorage` for that app origin, and SHALL restore on reload. An invalid stored value MUST fall back to `red`. The public mall MUST NOT expose this control and MUST remain on the red accent.
+
+#### Scenario: operator switches accent
+- **WHEN** a platform admin or shop user selects the blue preset in the console header
+- **THEN** primary buttons and active nav in that app render with the blue preset without a full page reload
+
+#### Scenario: accent survives reload
+- **WHEN** the operator reloads shop-admin or platform admin after choosing teal
+- **THEN** the console still uses the teal preset
+
+#### Scenario: mall stays red
+- **WHEN** a shopper uses the mall after an operator has changed a console accent
+- **THEN** the mall still uses `#ca151e` and shows no accent switcher
diff --git a/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/tasks.md b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/tasks.md
new file mode 100644
index 0000000..996605e
--- /dev/null
+++ b/openspec/changes/archive/2026-09-22-adopt-tailwind-design-system/tasks.md
@@ -0,0 +1,38 @@
+## 1. Tooling and tokens
+
+- [x] 1.1 Add Tailwind v4 and `@tailwindcss/vite` to mall, shop-admin, and platform admin; wire the Vite plugin in each `nuxt.config.ts`
+- [x] 1.2 Add `packages/shared/src/theme.css` with `@theme` keys (primary `#ca151e`, hover, soft, radius, type, `max-w-mall` 1200px, `h-hero` 450px) and `html[data-accent]` maps for `red|blue|teal|violet`
+- [x] 1.3 Export `./theme.css` from `@vmall/shared`; load it in all three apps while still loading `ui.css` / `mall.css`
+
+## 2. `@vmall/ui` kit
+
+- [x] 2.1 Scaffold `packages/ui` (`@vmall/ui`) in the pnpm workspace with Vue peer deps and exports
+- [x] 2.2 Implement `VBtn`, `VBadge`, `VField`/`VInput`, `VCard`/`VPanel`, `VTable`, `VPage` on shared tokens
+- [x] 2.3 Implement `useAccent()` (read/write `localStorage`, set `document.documentElement.dataset.accent`, invalid → `red`) and an accent swatch control
+- [x] 2.4 Add the kit as a dependency of the three Nuxt apps and transpile it if needed
+
+## 3. Platform admin
+
+- [x] 3.1 Convert `apps/admin` shell and pages to kit + Tailwind utilities; add the accent swatch to the authenticated header
+- [x] 3.2 Remove admin `<style scoped>` blocks
+- [x] 3.3 `pnpm --filter @vmall/admin build` green; browser-check accent switch + reload persistence
+
+## 4. Shop-admin
+
+- [x] 4.1 Convert `apps/shop-admin` shell and pages the same way; add the accent swatch
+- [x] 4.2 Remove shop-admin `<style scoped>` blocks
+- [x] 4.3 `pnpm --filter @vmall/shop-admin build` green; browser-check accent switch + reload persistence
+
+## 5. Mall storefront
+
+- [x] 5.1 Lock mall to `data-accent="red"` at boot; do not render the swatch
+- [x] 5.2 Convert mall shell (utility bar, header, dark nav, mega-menu, 1200px grid, footer) to tokens/utilities/kit
+- [x] 5.3 Convert mall pages (home hero/sidebar/carousel last-but-one; `goods/[id]`, integral, store last)
+- [x] 5.4 Remove all mall `<style scoped>` and stop loading `mall.css`
+
+## 6. Cut over and docs
+
+- [x] 6.1 Delete `packages/shared/src/ui.css` and the `./ui.css` export; point `AGENTS.md` / OpenSpec config at `theme.css` and `@vmall/ui`
+- [x] 6.2 Confirm no `<style scoped>` remains under `apps/mall`, `apps/shop-admin`, `apps/admin`
+- [x] 6.3 `pnpm --filter @vmall/mall build` plus admin and shop-admin builds all green
+- [x] 6.4 Browser pass: mall shell, home hero/sidebar, search grid, product detail, cart/checkout chrome; both consoles on default red and after a preset change
diff --git a/openspec/config.yaml b/openspec/config.yaml
index 9a3bccc..31f61a6 100644
--- a/openspec/config.yaml
+++ b/openspec/config.yaml
@@ -6,7 +6,7 @@ context: |
   Tech stack:
   - Backend: Rust (axum 0.8, sqlx 0.8 + Postgres 18, redis 8, JWT, argon2) at apps/api, crate vmall-api. Modular monolith: handler → service → repository under src/modules/<context> (docs/adr/0001, docs/tech-specs/rust-api.md). HTTP REST is the public contract; GraphQL is not the primary API (docs/adr/0002). Money is stored as integer minor units + ISO currency code; never floats.
   - Frontends: three Nuxt 3 apps in pnpm workspace: apps/mall (customer storefront, port 3000), apps/shop-admin (merchant console, 3001), apps/admin (platform console, 3002).
-  - Shared contract: packages/shared (@vmall/shared) — TS types, API client, en/zh locales, ui.css. Frontends must use it; no per-app API reimplementation.
+  - Shared contract: packages/shared (@vmall/shared) — TS types, API client, en/zh locales, Tailwind v4 theme.css. Frontends must use it; no per-app API reimplementation. Shared Vue primitives live in packages/ui (@vmall/ui, Nuxt module); layout uses Tailwind utilities, no <style scoped>.
   - Dev infra: Postgres + Redis run in local docker (containers pg18, rdb8); databases vmall / vmall_test; API runs migrations on boot (sqlx migrate).
 
   Conventions:
diff --git a/openspec/specs/frontend-admin/spec.md b/openspec/specs/frontend-admin/spec.md
index bf61885..a3c7e68 100644
--- a/openspec/specs/frontend-admin/spec.md
+++ b/openspec/specs/frontend-admin/spec.md
@@ -2,9 +2,7 @@
 
 ## Purpose
 The platform console for managing users, shops and currencies.
-
 ## Requirements
-
 ### Requirement: Platform user and shop management
 Platform admins SHALL assign user roles (with shop scope), create shops, and suspend/activate shops. Suspended shops' products MUST NOT be purchasable (enforced by API, reflected in UI).
 
@@ -29,3 +27,18 @@ Platform admins SHALL manage points products and inspect and fulfill redemption
 #### Scenario: points mall appears in admin navigation
 - **WHEN** an authenticated platform admin opens the admin console
 - **THEN** points-product and redemption-order management are reachable from the console nav
+
+### Requirement: Shared design system in the platform console
+The platform admin console SHALL use `@vmall/ui` primitives and `@vmall/shared` theme tokens for chrome (buttons, fields, cards, tables, page headers, nav). It MUST NOT depend on Element Plus or the removed `ui.css` stylesheet.
+
+#### Scenario: console chrome from the kit
+- **WHEN** an authenticated platform admin opens the dashboard
+- **THEN** primary actions and page chrome render through the shared kit with the current accent preset
+
+### Requirement: Accent preset switcher
+Platform admin SHALL expose the shared accent preset control (`red`, `blue`, `teal`, `violet`) in the authenticated shell header.
+
+#### Scenario: switcher visible
+- **WHEN** an authenticated platform admin opens the console
+- **THEN** they can select an accent preset without leaving the current page
+
diff --git a/openspec/specs/frontend-mall/spec.md b/openspec/specs/frontend-mall/spec.md
index b2725cf..5bea883 100644
--- a/openspec/specs/frontend-mall/spec.md
+++ b/openspec/specs/frontend-mall/spec.md
@@ -2,9 +2,7 @@
 
 ## Purpose
 The buyer-facing storefront: shell, home page, discovery, shopping and transaction flows, and the buyer center.
-
 ## Requirements
-
 ### Requirement: Localized storefront
 The mall SHALL render every UI string and all catalog/store/marketing mock content in en or zh from one switcher, defaulting to en. Switching locale SHALL update the desktop shell and current page without a full reload.
 
@@ -31,7 +29,7 @@ A shopper SHALL be able to browse, view detail, add to cart, checkout with a shi
 - **THEN** they are sent to sign in and, once signed in, returned to that product page
 
 ### Requirement: B2B2C mall-style PC storefront shell
-The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC mall: a 30px utility bar, logo/search/cart header, dark primary navigation with a hover category mega-menu, a 1200px content grid, and a value-proposition footer. The header SHALL remain fully visible while scrolling; no part of the shell SHALL auto-hide based on scroll position. The category mega-menu SHALL appear as a hover dropdown under the navigation "All Categories" entry on every page except the home page, where it is instead pinned in the hero row. The visual language SHALL use #ca151e for brand/price/active states, #f5f5f5 section backgrounds, gray hairline borders, compact controls, and product-card hover lift/shadow. The implementation SHALL use Nuxt-native semantic components and SHALL NOT depend on Element Plus.
+The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC mall: a 30px utility bar, logo/search/cart header, dark primary navigation with a hover category mega-menu, a 1200px content grid, and a value-proposition footer. The header SHALL remain fully visible while scrolling; no part of the shell SHALL auto-hide based on scroll position. The category mega-menu SHALL appear as a hover dropdown under the navigation "All Categories" entry on every page except the home page, where it is instead pinned in the hero row. The visual language SHALL use `#ca151e` for brand/price/active states, `#f5f5f5` section backgrounds, gray hairline borders, compact controls, and product-card hover lift/shadow. The implementation SHALL use the shared Tailwind theme and `@vmall/ui` primitives plus Nuxt-native semantic components, SHALL NOT depend on Element Plus, and SHALL NOT expose a theme-accent switcher.
 
 #### Scenario: shopper opens any mall page
 - **WHEN** a shopper navigates to a buyer-facing route
@@ -45,6 +43,10 @@ The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC
 - **WHEN** a shopper hovers "All Categories" in the navigation on a page other than `/`
 - **THEN** the category mega-menu dropdown appears below the navigation and hides again on mouse leave
 
+#### Scenario: mall has no accent switcher
+- **WHEN** a shopper inspects the mall shell
+- **THEN** there is no control to change brand accent and prices/active states remain `#ca151e`
+
 ### Requirement: Mock API adapter
 The mall SHALL select its API adapter per domain, so one domain can be served by the live backend while the others stay on fixed data. The mall SHALL still ship a fixed-data adapter implementing the whole `@vmall/shared` API client surface, and the live/fixed choice SHALL be configurable per domain without changing page call sites. The fixed-data adapter SHALL remain able to serve every domain when the live backend is unavailable.
 
@@ -230,3 +232,11 @@ The mall SHALL use the shared selected API adapter for product and shop favorite
 #### Scenario: fixed adapter remains functional
 - **WHEN** the favorites domain is configured to fixed data
 - **THEN** detail controls and buyer-center favorite flows behave deterministically through the same shared client methods
+
+### Requirement: Shared design system on the storefront
+Mall pages SHALL style layout with Tailwind utilities and shared primitives. Mall-only chrome (mega-menu, carousel crop, 1200px shell, product-card hover lift) MAY live in `apps/mall` components but MUST consume shared tokens, not a private global stylesheet.
+
+#### Scenario: storefront uses shared tokens
+- **WHEN** a shopper views the home page
+- **THEN** brand red, the 1200px grid, and the 450px hero height come from the shared theme keys rather than `mall.css`
+
diff --git a/openspec/specs/frontend-shop-admin/spec.md b/openspec/specs/frontend-shop-admin/spec.md
index da4b7b7..6c46950 100644
--- a/openspec/specs/frontend-shop-admin/spec.md
+++ b/openspec/specs/frontend-shop-admin/spec.md
@@ -2,9 +2,7 @@
 
 ## Purpose
 The merchant console for managing a shop's products and fulfilling its orders.
-
 ## Requirements
-
 ### Requirement: Merchant product management
 Shop users SHALL manage only their own shop's products: create/edit bilingual content, manage SKUs, publish/unpublish with immediate effect on the storefront.
 
@@ -51,3 +49,18 @@ Shop users SHALL manage only their shop's group-buying activities in shop-admin,
 #### Scenario: group buying appears in shop navigation
 - **WHEN** an authenticated shop user opens shop-admin
 - **THEN** a group-buying management entry is reachable without leaving the shop-scoped console
+
+### Requirement: Shared design system in the merchant console
+The shop-admin console SHALL use `@vmall/ui` primitives and `@vmall/shared` theme tokens for chrome (buttons, fields, cards, tables, page headers, nav). It MUST NOT depend on Element Plus or the removed `ui.css` stylesheet.
+
+#### Scenario: console chrome from the kit
+- **WHEN** an authenticated shop user opens shop-admin
+- **THEN** primary actions and page chrome render through the shared kit with the current accent preset
+
+### Requirement: Accent preset switcher
+Shop-admin SHALL expose the shared accent preset control (`red`, `blue`, `teal`, `violet`) in the authenticated shell header.
+
+#### Scenario: switcher visible
+- **WHEN** an authenticated shop user opens shop-admin
+- **THEN** they can select an accent preset without leaving the current page
+
diff --git a/openspec/specs/frontend-ui/spec.md b/openspec/specs/frontend-ui/spec.md
new file mode 100644
index 0000000..b966d79
--- /dev/null
+++ b/openspec/specs/frontend-ui/spec.md
@@ -0,0 +1,31 @@
+# frontend-ui Specification
+
+## Purpose
+Shared Tailwind v4 design system for the three Nuxt apps: one token stylesheet (`@vmall/shared/theme.css`, default brand `#ca151e`), the `@vmall/ui` Vue primitive kit, and persisted accent presets (`red | blue | teal | violet`) for the shop-admin and platform-admin consoles. The public mall stays locked to the red accent.
+## Requirements
+### Requirement: Shared Tailwind design system
+The three Nuxt apps SHALL load one token stylesheet from `@vmall/shared` (`theme.css`) and SHALL compose repeating chrome from `@vmall/ui` primitives (`VBtn`, `VBadge`, `VField`/`VInput`, `VCard`/`VPanel`, `VTable`, `VPage`). They MUST NOT depend on Element Plus, MUST NOT keep `packages/shared/src/ui.css` or `apps/mall/assets/mall.css`, and MUST NOT use Vue `<style scoped>` for app chrome after the migration. Default brand/primary color SHALL be `#ca151e`.
+
+#### Scenario: apps share tokens
+- **WHEN** a developer opens mall, shop-admin, and platform admin with the default accent
+- **THEN** primary buttons, links, and active nav use `#ca151e` from the shared theme rather than per-app palettes
+
+#### Scenario: no legacy stylesheets
+- **WHEN** the migration is complete
+- **THEN** `@vmall/shared` exports `theme.css` (not `ui.css`) and the three apps have no remaining `<style scoped>` blocks for layout or chrome
+
+### Requirement: Console accent presets
+Shop-admin and platform admin SHALL let the signed-in operator pick an accent preset of `red`, `blue`, `teal`, or `violet`. The choice SHALL apply immediately to primary actions, links, and active navigation, SHALL persist in `localStorage` for that app origin, and SHALL restore on reload. An invalid stored value MUST fall back to `red`. The public mall MUST NOT expose this control and MUST remain on the red accent.
+
+#### Scenario: operator switches accent
+- **WHEN** a platform admin or shop user selects the blue preset in the console header
+- **THEN** primary buttons and active nav in that app render with the blue preset without a full page reload
+
+#### Scenario: accent survives reload
+- **WHEN** the operator reloads shop-admin or platform admin after choosing teal
+- **THEN** the console still uses the teal preset
+
+#### Scenario: mall stays red
+- **WHEN** a shopper uses the mall after an operator has changed a console accent
+- **THEN** the mall still uses `#ca151e` and shows no accent switcher
+
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 0ae5698..393e3ac 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -7,6 +7,6 @@
     ".": "./src/index.ts",
     "./locales": "./src/locales/index.ts",
     "./types": "./src/types.ts",
-    "./ui.css": "./src/ui.css"
+    "./theme.css": "./src/theme.css"
   }
 }
diff --git a/packages/shared/src/theme.css b/packages/shared/src/theme.css
new file mode 100644
index 0000000..ae114ed
--- /dev/null
+++ b/packages/shared/src/theme.css
@@ -0,0 +1,60 @@
+@import "tailwindcss";
+
+/* Kit components live outside each app's Vite root; scan them for utilities. */
+@source "../../ui";
+
+/*
+ * Accent presets: utilities reference var(--primary*) at runtime via
+ * `@theme inline`, so html[data-accent] swaps the palette without a rebuild.
+ */
+@theme inline {
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-soft: var(--primary-soft);
+}
+
+@theme {
+  --color-bg: #f5f5f5;
+  --color-surface: #ffffff;
+  --color-border: #e2e5ea;
+  --color-text: #1c2330;
+  --color-muted: #66707f;
+  --color-danger: #d64545;
+  --color-success: #1f9d63;
+  --color-warning: #c77d0a;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
+
+  /* Spec-locked mall sizes: max-w-mall, h-hero */
+  --container-mall: 1200px;
+  --spacing-hero: 450px;
+}
+
+:root,
+html[data-accent="red"] {
+  --primary: #ca151e;
+  --primary-hover: #a81219;
+  --primary-soft: #fdecec;
+}
+
+html[data-accent="blue"] {
+  --primary: #2f6fed;
+  --primary-hover: #2058c8;
+  --primary-soft: #e7effd;
+}
+
+html[data-accent="teal"] {
+  --primary: #0f8a72;
+  --primary-hover: #0b6b59;
+  --primary-soft: #e0f4ef;
+}
+
+html[data-accent="violet"] {
+  --primary: #7c3aed;
+  --primary-hover: #6425c9;
+  --primary-soft: #f0e9fd;
+}
diff --git a/packages/shared/src/ui.css b/packages/shared/src/ui.css
deleted file mode 100644
index 8852080..0000000
--- a/packages/shared/src/ui.css
+++ /dev/null
@@ -1,159 +0,0 @@
-:root {
-  --bg: #f6f7f9;
-  --surface: #ffffff;
-  --border: #e2e5ea;
-  --text: #1c2330;
-  --muted: #66707f;
-  --primary: #2f6fed;
-  --primary-dark: #2058c8;
-  --danger: #d64545;
-  --success: #1f9d63;
-  --warning: #c77d0a;
-  --radius: 8px;
-  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
-}
-
-* { box-sizing: border-box; }
-
-body {
-  margin: 0;
-  font-family: "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  font-size: 14px;
-  line-height: 1.55;
-}
-
-a { color: var(--primary); text-decoration: none; }
-a:hover { text-decoration: underline; }
-
-.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
-
-.topnav {
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-.topnav-inner {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  height: 56px;
-}
-.topnav .brand { font-weight: 700; font-size: 17px; color: var(--text); }
-.topnav nav { display: flex; gap: 14px; flex: 1; }
-.topnav nav a { color: var(--muted); font-weight: 500; }
-.topnav nav a.router-link-active { color: var(--primary); }
-.topnav .spacer { flex: 1; }
-
-select, input, textarea {
-  font: inherit;
-  padding: 8px 10px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-  color: var(--text);
-  width: 100%;
-}
-select { width: auto; }
-input:focus, textarea:focus, select:focus { outline: 2px solid rgba(47, 111, 237, 0.3); border-color: var(--primary); }
-label { display: block; font-weight: 500; margin-bottom: 4px; color: var(--text); }
-.field { margin-bottom: 14px; }
-.field-row { display: flex; gap: 12px; }
-.field-row .field { flex: 1; }
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: var(--surface);
-  color: var(--text);
-  font-weight: 500;
-  cursor: pointer;
-  font-size: 14px;
-}
-.btn:hover { background: #f0f2f5; }
-.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
-.btn.primary:hover { background: var(--primary-dark); }
-.btn.danger { color: var(--danger); border-color: var(--danger); }
-.btn.danger:hover { background: #fdf0f0; }
-.btn.sm { padding: 4px 10px; font-size: 13px; }
-.btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: 20px;
-}
-.card + .card { margin-top: 16px; }
-
-.page { padding: 24px 0 48px; }
-.page-title { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
-.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
-.page-head .page-title { margin: 0; }
-
-table.table { width: 100%; border-collapse: collapse; background: var(--surface); }
-.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
-.table th { color: var(--muted); font-weight: 600; font-size: 13px; }
-.table tr:last-child td { border-bottom: none; }
-
-.badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #eef1f5;
-  color: var(--muted);
-}
-.badge.green { background: #e4f6ec; color: var(--success); }
-.badge.blue { background: #e7effd; color: var(--primary); }
-.badge.orange { background: #fdf1e0; color: var(--warning); }
-.badge.red { background: #fbe6e6; color: var(--danger); }
-
-.grid { display: grid; gap: 16px; }
-.grid.products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
-.product-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
-.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #eef1f5; }
-.product-card .body { padding: 12px; }
-.product-card .name { font-weight: 600; margin-bottom: 4px; }
-.product-card .price { color: var(--primary); font-weight: 700; }
-
-.muted { color: var(--muted); }
-.row { display: flex; align-items: center; gap: 12px; }
-.between { justify-content: space-between; }
-.mt { margin-top: 16px; }
-.mb { margin-bottom: 16px; }
-.error-text { color: var(--danger); margin: 8px 0; }
-
-.form-narrow { max-width: 420px; margin: 40px auto; }
-
-.auth-layout { display: flex; min-height: 100vh; }
-.auth-layout aside {
-  width: 220px;
-  background: var(--surface);
-  border-right: 1px solid var(--border);
-  padding: 16px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.auth-layout aside .brand { font-weight: 700; font-size: 16px; padding: 8px 10px 16px; }
-.auth-layout aside a {
-  display: block;
-  padding: 8px 10px;
-  border-radius: var(--radius);
-  color: var(--muted);
-  font-weight: 500;
-}
-.auth-layout aside a:hover { background: #f0f2f5; text-decoration: none; }
-.auth-layout aside a.router-link-active { background: #e7effd; color: var(--primary); }
-.auth-layout main { flex: 1; padding: 24px; overflow: auto; }
-.auth-layout .main-head { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 12px; }
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..ed7fd62
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@vmall/ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./nuxt": "./src/nuxt.ts"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.15.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13"
+  }
+}
diff --git a/packages/ui/src/components/VAccentSwatch.vue b/packages/ui/src/components/VAccentSwatch.vue
new file mode 100644
index 0000000..974cada
--- /dev/null
+++ b/packages/ui/src/components/VAccentSwatch.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ACCENTS, useAccent, type Accent } from "../composables/useAccent";
+
+const { accent, setAccent } = useAccent();
+
+const swatches: Record<Accent, string> = {
+  red: "#ca151e",
+  blue: "#2f6fed",
+  teal: "#0f8a72",
+  violet: "#7c3aed",
+};
+</script>
+
+<template>
+  <div class="flex items-center gap-1.5" role="radiogroup" aria-label="Accent preset">
+    <button
+      v-for="name in ACCENTS"
+      :key="name"
+      type="button"
+      role="radio"
+      :aria-checked="accent === name"
+      :title="name"
+      :style="{ backgroundColor: swatches[name] }"
+      :class="[
+        'h-5 w-5 cursor-pointer rounded-full border-2 transition-transform hover:scale-110',
+        accent === name ? 'border-text' : 'border-transparent',
+      ]"
+      @click="setAccent(name)"
+    />
+  </div>
+</template>
diff --git a/packages/ui/src/components/VBadge.vue b/packages/ui/src/components/VBadge.vue
new file mode 100644
index 0000000..ccb1ac7
--- /dev/null
+++ b/packages/ui/src/components/VBadge.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{ tone?: "green" | "blue" | "orange" | "red" | "gray" }>(),
+  { tone: "gray" },
+);
+
+const tones = {
+  green: "bg-success/10 text-success",
+  blue: "bg-primary-soft text-primary",
+  orange: "bg-warning/10 text-warning",
+  red: "bg-danger/10 text-danger",
+  gray: "bg-bg text-muted",
+} as const;
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-block rounded px-2 py-0.5 text-xs font-medium',
+      tones[props.tone],
+    ]"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/packages/ui/src/components/VBtn.vue b/packages/ui/src/components/VBtn.vue
new file mode 100644
index 0000000..7b566c4
--- /dev/null
+++ b/packages/ui/src/components/VBtn.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    variant?: "default" | "primary" | "danger";
+    size?: "md" | "sm";
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+  }>(),
+  { variant: "default", size: "md", type: "button", disabled: false },
+);
+
+const base =
+  "inline-flex cursor-pointer items-center justify-center gap-1 rounded-md border text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50";
+const variants = {
+  default: "border-border bg-surface text-text hover:bg-bg",
+  primary: "border-primary bg-primary text-white hover:bg-primary-hover",
+  danger: "border-danger text-danger hover:bg-danger/10",
+} as const;
+const sizes = { md: "px-4 py-2", sm: "px-2.5 py-1 text-[13px]" } as const;
+</script>
+
+<template>
+  <button
+    :type="props.type"
+    :disabled="props.disabled"
+    :class="[base, variants[props.variant], sizes[props.size]]"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/packages/ui/src/components/VCard.vue b/packages/ui/src/components/VCard.vue
new file mode 100644
index 0000000..f318444
--- /dev/null
+++ b/packages/ui/src/components/VCard.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ padded?: boolean }>(), { padded: true });
+</script>
+
+<template>
+  <div
+    :class="[
+      'rounded-lg border border-border bg-surface shadow-sm',
+      props.padded ? 'p-5' : '',
+    ]"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/ui/src/components/VField.vue b/packages/ui/src/components/VField.vue
new file mode 100644
index 0000000..84bd135
--- /dev/null
+++ b/packages/ui/src/components/VField.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{ label?: string; error?: string }>();
+</script>
+
+<template>
+  <div class="mb-3.5">
+    <label v-if="label" class="mb-1 block text-sm font-medium text-text">{{ label }}</label>
+    <slot />
+    <p v-if="error" class="mt-1 text-sm text-danger">{{ error }}</p>
+  </div>
+</template>
diff --git a/packages/ui/src/components/VInput.vue b/packages/ui/src/components/VInput.vue
new file mode 100644
index 0000000..88ebf63
--- /dev/null
+++ b/packages/ui/src/components/VInput.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{ type?: string; placeholder?: string; disabled?: boolean }>(),
+  { type: "text", disabled: false },
+);
+const model = defineModel<string | number>();
+</script>
+
+<template>
+  <input
+    v-model="model"
+    :type="type"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30 disabled:opacity-50"
+  />
+</template>
diff --git a/packages/ui/src/components/VPage.vue b/packages/ui/src/components/VPage.vue
new file mode 100644
index 0000000..7ce1515
--- /dev/null
+++ b/packages/ui/src/components/VPage.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{ title?: string }>();
+</script>
+
+<template>
+  <div class="py-6 pb-12">
+    <div v-if="title || $slots.actions" class="mb-4 flex items-center justify-between">
+      <h1 class="text-xl font-bold text-text">{{ title }}</h1>
+      <slot name="actions" />
+    </div>
+    <slot />
+  </div>
+</template>
diff --git a/packages/ui/src/components/VPanel.vue b/packages/ui/src/components/VPanel.vue
new file mode 100644
index 0000000..8446701
--- /dev/null
+++ b/packages/ui/src/components/VPanel.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{ title?: string }>();
+</script>
+
+<template>
+  <div class="rounded-lg border border-border bg-surface shadow-sm">
+    <div
+      v-if="title || $slots.actions"
+      class="flex items-center justify-between border-b border-border px-5 py-3"
+    >
+      <h3 class="text-sm font-semibold text-text">{{ title }}</h3>
+      <slot name="actions" />
+    </div>
+    <div class="p-5"><slot /></div>
+  </div>
+</template>
diff --git a/packages/ui/src/components/VTable.vue b/packages/ui/src/components/VTable.vue
new file mode 100644
index 0000000..f6c8699
--- /dev/null
+++ b/packages/ui/src/components/VTable.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="overflow-x-auto rounded-lg border border-border bg-surface shadow-sm">
+    <table
+      class="w-full border-collapse [&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:py-2.5 [&_td]:text-left [&_td]:text-sm [&_th]:border-b [&_th]:border-border [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-left [&_th]:text-[13px] [&_th]:font-semibold [&_th]:text-muted [&_tr:last-child_td]:border-b-0"
+    >
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/packages/ui/src/composables/useAccent.ts b/packages/ui/src/composables/useAccent.ts
new file mode 100644
index 0000000..1dc65df
--- /dev/null
+++ b/packages/ui/src/composables/useAccent.ts
@@ -0,0 +1,47 @@
+import { onMounted } from "vue";
+import { useHead, useState } from "#app";
+
+export const ACCENTS = ["red", "blue", "teal", "violet"] as const;
+export type Accent = (typeof ACCENTS)[number];
+
+const STORAGE_KEY = "vmall-accent";
+
+const valid = (value: string | null): value is Accent =>
+  ACCENTS.includes(value as Accent);
+
+/**
+ * Console accent preset state. `boot()` belongs in the console shell setup:
+ * it injects a pre-paint inline script that restores the stored preset and
+ * syncs reactive state on mount. Invalid stored values fall back to `red`.
+ */
+export function useAccent() {
+  const accent = useState<Accent>("vmall-accent", () => "red");
+
+  const setAccent = (value: string) => {
+    const next: Accent = valid(value) ? value : "red";
+    accent.value = next;
+    if (import.meta.client) {
+      localStorage.setItem(STORAGE_KEY, next);
+      document.documentElement.dataset.accent = next;
+    }
+  };
+
+  const boot = () => {
+    useHead({
+      script: [
+        {
+          key: "vmall-accent-boot",
+          innerHTML: `try{var a=localStorage.getItem("${STORAGE_KEY}");document.documentElement.dataset.accent=${JSON.stringify(ACCENTS)}.includes(a)?a:"red";}catch(e){document.documentElement.dataset.accent="red";}`,
+        },
+      ],
+    });
+    onMounted(() => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      const next: Accent = valid(stored) ? stored : "red";
+      accent.value = next;
+      document.documentElement.dataset.accent = next;
+    });
+  };
+
+  return { accent, setAccent, boot };
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..2b2a60f
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,10 @@
+export { default as VBtn } from "./components/VBtn.vue";
+export { default as VBadge } from "./components/VBadge.vue";
+export { default as VField } from "./components/VField.vue";
+export { default as VInput } from "./components/VInput.vue";
+export { default as VCard } from "./components/VCard.vue";
+export { default as VPanel } from "./components/VPanel.vue";
+export { default as VTable } from "./components/VTable.vue";
+export { default as VPage } from "./components/VPage.vue";
+export { default as VAccentSwatch } from "./components/VAccentSwatch.vue";
+export { useAccent, ACCENTS, type Accent } from "./composables/useAccent";
diff --git a/packages/ui/src/nuxt.ts b/packages/ui/src/nuxt.ts
new file mode 100644
index 0000000..43ec684
--- /dev/null
+++ b/packages/ui/src/nuxt.ts
@@ -0,0 +1,11 @@
+import { defineNuxtModule, addComponentsDir, addImportsDir } from "@nuxt/kit";
+import { fileURLToPath } from "node:url";
+
+export default defineNuxtModule({
+  meta: { name: "@vmall/ui", configKey: "vmallUi" },
+  setup() {
+    const resolve = (path: string) => fileURLToPath(new URL(path, import.meta.url));
+    addComponentsDir({ path: resolve("./components"), prefix: "" });
+    addImportsDir(resolve("./composables"));
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 267acf0..77cf37c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,9 +19,12 @@ importers:
       '@vmall/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      '@vmall/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       nuxt:
         specifier: ^3.15.4
-        version: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1)
+        version: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1)
       pinia:
         specifier: ^2.3.1
         version: 2.3.1(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3))
@@ -31,6 +34,13 @@ importers:
       vue-router:
         specifier: ^4.5.0
         version: 4.6.4(vue@3.5.42(typescript@5.9.3))
+    devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.13
+        version: 4.3.3(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
+      tailwindcss:
+        specifier: ^4.1.13
+        version: 4.3.3
 
   apps/mall:
     dependencies:
@@ -43,9 +53,12 @@ importers:
       '@vmall/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      '@vmall/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       nuxt:
         specifier: ^3.15.4
-        version: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(yaml@2.9.1)
+        version: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1)
       pinia:
         specifier: ^2.3.1
         version: 2.3.1(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3))
@@ -55,6 +68,13 @@ importers:
       vue-router:
         specifier: ^4.5.0
         version: 4.6.4(vue@3.5.42(typescript@5.9.3))
+    devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.13
+        version: 4.3.3(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
+      tailwindcss:
+        specifier: ^4.1.13
+        version: 4.3.3
 
   apps/shop-admin:
     dependencies:
@@ -67,9 +87,12 @@ importers:
       '@vmall/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      '@vmall/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       nuxt:
         specifier: ^3.15.4
-        version: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(yaml@2.9.1)
+        version: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1)
       pinia:
         specifier: ^2.3.1
         version: 2.3.1(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3))
@@ -79,9 +102,25 @@ importers:
       vue-router:
         specifier: ^4.5.0
         version: 4.6.4(vue@3.5.42(typescript@5.9.3))
+    devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.13
+        version: 4.3.3(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
+      tailwindcss:
+        specifier: ^4.1.13
+        version: 4.3.3
 
   packages/shared: {}
 
+  packages/ui:
+    dependencies:
+      '@nuxt/kit':
+        specifier: ^3.15.4
+        version: 3.21.11(magicast@0.5.5)
+      vue:
+        specifier: ^3.5.13
+        version: 3.5.42(typescript@5.9.3)
+
 packages:
 
   '@babel/code-frame@7.29.7':
@@ -1531,6 +1570,96 @@ packages:
   '@speed-highlight/core@1.2.24':
     resolution: {integrity: sha512-qeW2e1l78afw8VhRPfPQ1Gjj+KU5XFQ/OFV5ti6eTa9bruO7mJyZtA4vw0ofqmA3tKCkROE9xLk3VZoeRc98nw==}
 
+  '@tailwindcss/node@4.3.3':
+    resolution: {integrity: sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    resolution: {integrity: sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    resolution: {integrity: sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    resolution: {integrity: sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    resolution: {integrity: sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    resolution: {integrity: sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    resolution: {integrity: sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    resolution: {integrity: sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    resolution: {integrity: sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    resolution: {integrity: sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    resolution: {integrity: sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    resolution: {integrity: sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    resolution: {integrity: sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.3':
+    resolution: {integrity: sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.3.3':
+    resolution: {integrity: sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
   '@tybys/wasm-util@0.10.4':
     resolution: {integrity: sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A==}
 
@@ -2681,6 +2810,76 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -3512,6 +3711,9 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
+  tailwindcss@4.3.3:
+    resolution: {integrity: sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==}
+
   tapable@2.3.3:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
@@ -4242,17 +4444,17 @@ snapshots:
 
   '@colordx/core@5.8.0': {}
 
-  '@dxup/nuxt@0.5.10(esbuild@0.28.2)(magicast@0.5.5)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))':
+  '@dxup/nuxt@0.5.10(esbuild@0.28.2)(magicast@0.5.5)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))':
     dependencies:
       '@dxup/unimport': 0.1.2
-      '@nuxt/kit': 4.5.2(magic-string@1.4.1)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)))
+      '@nuxt/kit': 4.5.2(magic-string@1.4.1)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))
       '@vue/compiler-dom': 3.5.42
       chokidar: 5.0.0
       knitwork: 1.3.0
       magic-string: 1.4.1
       pathe: 2.0.3
       tinyglobby: 0.2.17
-      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rsbuild/core'
@@ -4705,11 +4907,11 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@3.4.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)))(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))':
+  '@nuxt/devtools-kit@3.4.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))':
     dependencies:
-      '@nuxt/kit': 4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3))
+      '@nuxt/kit': 4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))
       execa: 8.0.1
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
     transitivePeerDependencies:
       - magic-string
       - magicast
@@ -4728,11 +4930,11 @@ snapshots:
       pkg-types: 2.3.3
       semver: 7.8.5
 
-  '@nuxt/devtools@3.4.2(db0@0.3.4)(ioredis@5.11.1)(magic-string@0.30.21)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)))(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))':
+  '@nuxt/devtools@3.4.2(db0@0.3.4)(ioredis@5.11.1)(magic-string@0.30.21)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))':
     dependencies:
-      '@nuxt/devtools-kit': 3.4.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)))(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      '@nuxt/devtools-kit': 3.4.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       '@nuxt/devtools-wizard': 3.4.2
-      '@nuxt/kit': 4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3))
+      '@nuxt/kit': 4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))
       '@vue/devtools-core': 8.2.1(vue@3.5.42(typescript@5.9.3))
       '@vue/devtools-kit': 8.2.1
       birpc: 4.2.0
@@ -4759,9 +4961,9 @@ snapshots:
       structured-clone-es: 2.0.1
       tinyglobby: 0.2.17
       unstorage: 1.17.5(db0@0.3.4)(ioredis@5.11.1)
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
-      vite-plugin-inspect: 11.4.1(@nuxt/kit@4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))))(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      vite-plugin-vue-tracer: 1.5.0(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
+      vite-plugin-inspect: 11.4.1(@nuxt/kit@4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))))(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
+      vite-plugin-vue-tracer: 1.5.0(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
       which: 6.0.1
       ws: 8.21.3
     transitivePeerDependencies:
@@ -4819,7 +5021,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/kit@4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3))':
+  '@nuxt/kit@4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))':
     dependencies:
       c12: 3.3.4(magicast@0.5.5)
       consola: 3.4.2
@@ -4839,7 +5041,7 @@ snapshots:
       scule: 1.3.0
       tinyglobby: 0.2.17
       ufo: 1.6.4
-      unctx: 3.0.1(magic-string@0.30.21)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3))
+      unctx: 3.0.1(magic-string@0.30.21)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))
       untyped: 2.0.0
       verkit: 0.3.2
     transitivePeerDependencies:
@@ -4849,7 +5051,7 @@ snapshots:
       - rolldown
       - unplugin
 
-  '@nuxt/kit@4.5.2(magic-string@1.4.1)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)))':
+  '@nuxt/kit@4.5.2(magic-string@1.4.1)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))':
     dependencies:
       c12: 3.3.4(magicast@0.5.5)
       consola: 3.4.2
@@ -4869,7 +5071,7 @@ snapshots:
       scule: 1.3.0
       tinyglobby: 0.2.17
       ufo: 1.6.4
-      unctx: 3.0.1(magic-string@1.4.1)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)))
+      unctx: 3.0.1(magic-string@1.4.1)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))
       untyped: 2.0.0
       verkit: 0.3.2
     transitivePeerDependencies:
@@ -4879,7 +5081,7 @@ snapshots:
       - rolldown
       - unplugin
 
-  '@nuxt/nitro-server@3.21.11(db0@0.3.4)(esbuild@0.28.2)(ioredis@5.11.1)(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1))(oxc-parser@0.143.0)(rollup@4.63.3)(srvx@0.11.22)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))':
+  '@nuxt/nitro-server@3.21.11(db0@0.3.4)(esbuild@0.28.2)(ioredis@5.11.1)(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1))(oxc-parser@0.143.0)(rollup@4.63.3)(srvx@0.11.22)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))':
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 3.21.11(magicast@0.5.5)
@@ -4893,89 +5095,11 @@ snapshots:
       escape-string-regexp: 5.0.0
       exsolve: 1.1.1
       h3: 1.15.11
-      impound: 1.2.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      impound: 1.2.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       klona: 2.0.6
       mocked-exports: 0.1.1
-      nitropack: 2.13.4(oxc-parser@0.143.0)(srvx@0.11.22)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      nuxt: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1)
-      ohash: 2.0.12
-      pathe: 2.0.3
-      pkg-types: 2.3.3
-      rou3: 0.9.2
-      std-env: 4.2.0
-      ufo: 1.6.4
-      unctx: 2.5.0
-      unstorage: 1.17.5(db0@0.3.4)(ioredis@5.11.1)
-      vue: 3.5.42(typescript@5.9.3)
-      vue-bundle-renderer: 2.4.0
-      vue-devtools-stub: 0.1.0
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@electric-sql/pglite'
-      - '@farmfe/core'
-      - '@libsql/client'
-      - '@netlify/blobs'
-      - '@parcel/watcher'
-      - '@planetscale/database'
-      - '@rsbuild/core'
-      - '@rspack/core'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/functions'
-      - '@vercel/kv'
-      - aws4fetch
-      - bare-abort-controller
-      - bare-buffer
-      - better-sqlite3
-      - bun-types-no-globals
-      - db0
-      - drizzle-orm
-      - encoding
-      - esbuild
-      - idb-keyval
-      - ioredis
-      - magicast
-      - mysql2
-      - oxc-parser
-      - react-native-b4a
-      - rolldown
-      - rollup
-      - sqlite3
-      - srvx
-      - supports-color
-      - typescript
-      - unloader
-      - uploadthing
-      - vite
-      - webpack
-      - xml2js
-
-  '@nuxt/nitro-server@3.21.11(db0@0.3.4)(esbuild@0.28.2)(ioredis@5.11.1)(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(yaml@2.9.1))(oxc-parser@0.143.0)(rollup@4.63.3)(typescript@5.9.3)':
-    dependencies:
-      '@nuxt/devalue': 2.0.2
-      '@nuxt/kit': 3.21.11(magicast@0.5.5)
-      '@unhead/vue': 2.1.17(vue@3.5.42(typescript@5.9.3))
-      '@vue/shared': 3.5.42
-      consola: 3.4.2
-      defu: 6.1.7
-      destr: 2.0.5
-      devalue: 5.9.2
-      errx: 0.1.2
-      escape-string-regexp: 5.0.0
-      exsolve: 1.1.1
-      h3: 1.15.11
-      impound: 1.2.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      klona: 2.0.6
-      mocked-exports: 0.1.1
-      nitropack: 2.13.4(oxc-parser@0.143.0)(srvx@0.11.22)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      nuxt: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(yaml@2.9.1)
+      nitropack: 2.13.4(oxc-parser@0.143.0)(srvx@0.11.22)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
+      nuxt: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1)
       ohash: 2.0.12
       pathe: 2.0.3
       pkg-types: 2.3.3
@@ -5051,12 +5175,12 @@ snapshots:
       rc9: 3.1.0
       std-env: 4.2.0
 
-  '@nuxt/vite-builder@3.21.11(eslint@10.10.0(jiti@2.7.0))(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1))(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3))(yaml@2.9.1)':
+  '@nuxt/vite-builder@3.21.11(eslint@10.10.0(jiti@2.7.0))(lightningcss@1.32.0)(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1))(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3))(yaml@2.9.1)':
     dependencies:
       '@nuxt/kit': 3.21.11(magicast@0.5.5)
       '@rollup/plugin-replace': 6.0.3(rollup@4.63.3)
-      '@vitejs/plugin-vue': 6.0.9(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
-      '@vitejs/plugin-vue-jsx': 5.1.6(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
+      '@vitejs/plugin-vue': 6.0.9(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx': 5.1.6(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
       autoprefixer: 10.6.1(postcss@8.5.28)
       consola: 3.4.2
       cssnano: 7.1.9(postcss@8.5.28)
@@ -5071,7 +5195,7 @@ snapshots:
       magic-string: 0.30.21
       mlly: 1.8.2
       mocked-exports: 0.1.1
-      nuxt: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1)
+      nuxt: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1)
       nypm: 0.6.10
       ohash: 2.0.12
       pathe: 2.0.3
@@ -5082,70 +5206,9 @@ snapshots:
       std-env: 4.2.0
       ufo: 1.6.4
       unenv: 2.0.0-rc.24
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
-      vite-node: 5.3.0(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
-      vite-plugin-checker: 0.14.5(eslint@10.10.0(jiti@2.7.0))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      vue: 3.5.42(typescript@5.9.3)
-      vue-bundle-renderer: 2.4.0
-    optionalDependencies:
-      rollup-plugin-visualizer: 7.1.1(rollup@4.63.3)
-    transitivePeerDependencies:
-      - '@biomejs/biome'
-      - '@types/node'
-      - eslint
-      - less
-      - lightningcss
-      - magicast
-      - meow
-      - optionator
-      - oxlint
-      - rollup
-      - sass
-      - sass-embedded
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - typescript
-      - vue-tsc
-      - yaml
-
-  '@nuxt/vite-builder@3.21.11(eslint@10.10.0(jiti@2.7.0))(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(yaml@2.9.1))(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3))(yaml@2.9.1)':
-    dependencies:
-      '@nuxt/kit': 3.21.11(magicast@0.5.5)
-      '@rollup/plugin-replace': 6.0.3(rollup@4.63.3)
-      '@vitejs/plugin-vue': 6.0.9(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
-      '@vitejs/plugin-vue-jsx': 5.1.6(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
-      autoprefixer: 10.6.1(postcss@8.5.28)
-      consola: 3.4.2
-      cssnano: 7.1.9(postcss@8.5.28)
-      defu: 6.1.7
-      escape-string-regexp: 5.0.0
-      exsolve: 1.1.1
-      externality: 1.0.2
-      generic-names: 4.0.0
-      get-port-please: 3.2.0
-      jiti: 2.7.0
-      knitwork: 1.3.0
-      magic-string: 0.30.21
-      mlly: 1.8.2
-      mocked-exports: 0.1.1
-      nuxt: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(yaml@2.9.1)
-      nypm: 0.6.10
-      ohash: 2.0.12
-      pathe: 2.0.3
-      perfect-debounce: 2.1.0
-      pkg-types: 2.3.3
-      postcss: 8.5.28
-      seroval: 1.6.7
-      std-env: 4.2.0
-      ufo: 1.6.4
-      unenv: 2.0.0-rc.24
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
-      vite-node: 5.3.0(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
-      vite-plugin-checker: 0.14.5(eslint@10.10.0(jiti@2.7.0))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
+      vite-node: 5.3.0(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
+      vite-plugin-checker: 0.14.5(eslint@10.10.0(jiti@2.7.0))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       vue: 3.5.42(typescript@5.9.3)
       vue-bundle-renderer: 2.4.0
     optionalDependencies:
@@ -5623,6 +5686,74 @@ snapshots:
 
   '@speed-highlight/core@1.2.24': {}
 
+  '@tailwindcss/node@4.3.3':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.25.1
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.3
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.3':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-x64': 4.3.3
+      '@tailwindcss/oxide-freebsd-x64': 4.3.3
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.3
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.3
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.3
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.3
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.3
+
+  '@tailwindcss/vite@4.3.3(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))':
+    dependencies:
+      '@tailwindcss/node': 4.3.3
+      '@tailwindcss/oxide': 4.3.3
+      tailwindcss: 4.3.3
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
+
   '@tybys/wasm-util@0.10.4':
     dependencies:
       tslib: 2.8.1
@@ -5701,22 +5832,22 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@5.1.6(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.6(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.29.7
       '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
       '@rolldown/pluginutils': 1.0.1
       '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.29.7)
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
       vue: 3.5.42(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@6.0.9(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.9(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
       vue: 3.5.42(typescript@5.9.3)
 
   '@volar/language-core@2.4.28':
@@ -6716,12 +6847,12 @@ snapshots:
 
   image-meta@0.2.2: {}
 
-  impound@1.2.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)):
+  impound@1.2.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       es-module-lexer: 2.3.2
       pathe: 2.0.3
-      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       unplugin-utils: 0.3.2
     transitivePeerDependencies:
       - '@farmfe/core'
@@ -6859,6 +6990,55 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
   lilconfig@3.1.3: {}
 
   listhen@1.10.1(srvx@0.11.22):
@@ -6992,7 +7172,7 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  nitropack@2.13.4(oxc-parser@0.143.0)(srvx@0.11.22)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)):
+  nitropack@2.13.4(oxc-parser@0.143.0)(srvx@0.11.22)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.4.2
       '@rollup/plugin-alias': 6.0.0(rollup@4.63.3)
@@ -7057,7 +7237,7 @@ snapshots:
       uncrypto: 0.1.3
       unctx: 2.5.0
       unenv: 2.0.0-rc.24
-      unimport: 6.5.0(esbuild@0.28.2)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      unimport: 6.5.0(esbuild@0.28.2)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       unplugin-utils: 0.3.2
       unstorage: 1.17.5(db0@0.3.4)(ioredis@5.11.1)
       untyped: 2.0.0
@@ -7140,16 +7320,16 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1):
+  nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1):
     dependencies:
-      '@dxup/nuxt': 0.5.10(esbuild@0.28.2)(magicast@0.5.5)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      '@dxup/nuxt': 0.5.10(esbuild@0.28.2)(magicast@0.5.5)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       '@nuxt/cli': 3.37.0(@nuxt/schema@3.21.11)(cac@6.7.14)(magicast@0.5.5)
-      '@nuxt/devtools': 3.4.2(db0@0.3.4)(ioredis@5.11.1)(magic-string@0.30.21)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)))(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
+      '@nuxt/devtools': 3.4.2(db0@0.3.4)(ioredis@5.11.1)(magic-string@0.30.21)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
       '@nuxt/kit': 3.21.11(magicast@0.5.5)
-      '@nuxt/nitro-server': 3.21.11(db0@0.3.4)(esbuild@0.28.2)(ioredis@5.11.1)(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1))(oxc-parser@0.143.0)(rollup@4.63.3)(srvx@0.11.22)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      '@nuxt/nitro-server': 3.21.11(db0@0.3.4)(esbuild@0.28.2)(ioredis@5.11.1)(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1))(oxc-parser@0.143.0)(rollup@4.63.3)(srvx@0.11.22)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       '@nuxt/schema': 3.21.11
       '@nuxt/telemetry': 2.9.1(@nuxt/kit@3.21.11(magicast@0.5.5))
-      '@nuxt/vite-builder': 3.21.11(eslint@10.10.0(jiti@2.7.0))(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1))(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3))(yaml@2.9.1)
+      '@nuxt/vite-builder': 3.21.11(eslint@10.10.0(jiti@2.7.0))(lightningcss@1.32.0)(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(lightningcss@1.32.0)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(srvx@0.11.22)(terser@5.51.2)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(yaml@2.9.1))(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3))(yaml@2.9.1)
       '@unhead/vue': 2.1.17(vue@3.5.42(typescript@5.9.3))
       '@vue/shared': 3.5.42
       c12: 3.3.4(magicast@0.5.5)
@@ -7166,7 +7346,7 @@ snapshots:
       h3: 1.15.11
       hookable: 5.5.3
       ignore: 7.0.9
-      impound: 1.2.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      impound: 1.2.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       jiti: 2.7.0
       klona: 2.0.6
       knitwork: 1.3.0
@@ -7193,137 +7373,8 @@ snapshots:
       ultrahtml: 1.7.0
       uncrypto: 0.1.3
       unctx: 2.5.0
-      unimport: 6.5.0(esbuild@0.28.2)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      unplugin-vue-router: 0.19.2(@vue/compiler-sfc@3.5.42)(vue-router@4.6.4(vue@3.5.42(typescript@5.9.3)))(vue@3.5.42(typescript@5.9.3))
-      untyped: 2.0.0
-      vue: 3.5.42(typescript@5.9.3)
-      vue-router: 4.6.4(vue@3.5.42(typescript@5.9.3))
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@biomejs/biome'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@electric-sql/pglite'
-      - '@farmfe/core'
-      - '@libsql/client'
-      - '@netlify/blobs'
-      - '@oxc-project/types'
-      - '@planetscale/database'
-      - '@rsbuild/core'
-      - '@rspack/core'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/functions'
-      - '@vercel/kv'
-      - '@vitejs/devtools'
-      - '@vue/compiler-sfc'
-      - aws4fetch
-      - bare-abort-controller
-      - bare-buffer
-      - better-sqlite3
-      - bufferutil
-      - bun-types-no-globals
-      - cac
-      - commander
-      - db0
-      - drizzle-orm
-      - encoding
-      - esbuild
-      - eslint
-      - idb-keyval
-      - ioredis
-      - less
-      - lightningcss
-      - magicast
-      - meow
-      - mysql2
-      - optionator
-      - oxlint
-      - react-native-b4a
-      - rolldown
-      - rollup
-      - rollup-plugin-visualizer
-      - sass
-      - sass-embedded
-      - sqlite3
-      - srvx
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - typescript
-      - unloader
-      - uploadthing
-      - utf-8-validate
-      - vite
-      - vue-tsc
-      - webpack
-      - xml2js
-      - yaml
-
-  nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(yaml@2.9.1):
-    dependencies:
-      '@dxup/nuxt': 0.5.10(esbuild@0.28.2)(magicast@0.5.5)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      '@nuxt/cli': 3.37.0(@nuxt/schema@3.21.11)(cac@6.7.14)(magicast@0.5.5)
-      '@nuxt/devtools': 3.4.2(db0@0.3.4)(ioredis@5.11.1)(magic-string@0.30.21)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)))(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3))
-      '@nuxt/kit': 3.21.11(magicast@0.5.5)
-      '@nuxt/nitro-server': 3.21.11(db0@0.3.4)(esbuild@0.28.2)(ioredis@5.11.1)(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(yaml@2.9.1))(oxc-parser@0.143.0)(rollup@4.63.3)(typescript@5.9.3)
-      '@nuxt/schema': 3.21.11
-      '@nuxt/telemetry': 2.9.1(@nuxt/kit@3.21.11(magicast@0.5.5))
-      '@nuxt/vite-builder': 3.21.11(eslint@10.10.0(jiti@2.7.0))(magicast@0.5.5)(nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0))(ioredis@5.11.1)(magicast@0.5.5)(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(yaml@2.9.1))(optionator@0.9.4)(rollup-plugin-visualizer@7.1.1(rollup@4.63.3))(rollup@4.63.3)(terser@5.51.2)(typescript@5.9.3)(vue@3.5.42(typescript@5.9.3))(yaml@2.9.1)
-      '@unhead/vue': 2.1.17(vue@3.5.42(typescript@5.9.3))
-      '@vue/shared': 3.5.42
-      c12: 3.3.4(magicast@0.5.5)
-      chokidar: 5.0.0
-      compatx: 0.2.0
-      consola: 3.4.2
-      cookie-es: 2.0.1
-      defu: 6.1.7
-      destr: 2.0.5
-      devalue: 5.9.2
-      errx: 0.1.2
-      escape-string-regexp: 5.0.0
-      exsolve: 1.1.1
-      h3: 1.15.11
-      hookable: 5.5.3
-      ignore: 7.0.9
-      impound: 1.2.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      jiti: 2.7.0
-      klona: 2.0.6
-      knitwork: 1.3.0
-      magic-string: 0.30.21
-      mlly: 1.8.2
-      nanotar: 0.3.0
-      nypm: 0.6.10
-      ofetch: 1.5.1
-      ohash: 2.0.12
-      on-change: 6.0.2
-      oxc-minify: 0.143.0
-      oxc-parser: 0.143.0
-      oxc-transform: 0.143.0
-      oxc-walker: 1.1.1(@oxc-project/types@0.143.0)(oxc-parser@0.143.0)
-      pathe: 2.0.3
-      perfect-debounce: 2.1.0
-      pkg-types: 2.3.3
-      rou3: 0.9.2
-      scule: 1.3.0
-      semver: 7.8.5
-      std-env: 4.2.0
-      tinyglobby: 0.2.17
-      ufo: 1.6.4
-      ultrahtml: 1.7.0
-      uncrypto: 0.1.3
-      unctx: 2.5.0
-      unimport: 6.5.0(esbuild@0.28.2)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
-      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      unimport: 6.5.0(esbuild@0.28.2)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
+      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       unplugin-vue-router: 0.19.2(@vue/compiler-sfc@3.5.42)(vue-router@4.6.4(vue@3.5.42(typescript@5.9.3)))(vue@3.5.42(typescript@5.9.3))
       untyped: 2.0.0
       vue: 3.5.42(typescript@5.9.3)
@@ -8075,6 +8126,8 @@ snapshots:
 
   tagged-tag@1.0.0: {}
 
+  tailwindcss@4.3.3: {}
+
   tapable@2.3.3: {}
 
   tar-stream@3.2.1:
@@ -8169,17 +8222,17 @@ snapshots:
       magic-string: 0.30.21
       unplugin: 2.3.11
 
-  unctx@3.0.1(magic-string@0.30.21)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)):
+  unctx@3.0.1(magic-string@0.30.21)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))):
     optionalDependencies:
       magic-string: 0.30.21
       oxc-parser: 0.143.0
-      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
 
-  unctx@3.0.1(magic-string@1.4.1)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))):
+  unctx@3.0.1(magic-string@1.4.1)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))):
     optionalDependencies:
       magic-string: 1.4.1
       oxc-parser: 0.143.0
-      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
 
   unenv@2.0.0-rc.24:
     dependencies:
@@ -8193,7 +8246,7 @@ snapshots:
 
   unicorn-magic@0.4.0: {}
 
-  unimport@6.5.0(esbuild@0.28.2)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)):
+  unimport@6.5.0(esbuild@0.28.2)(oxc-parser@0.143.0)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)):
     dependencies:
       acorn: 8.18.0
       escape-string-regexp: 5.0.0
@@ -8207,7 +8260,7 @@ snapshots:
       scule: 1.3.0
       strip-literal: 4.0.0
       tinyglobby: 0.2.17
-      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      unplugin: 3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
       unplugin-utils: 0.3.2
     optionalDependencies:
       oxc-parser: 0.143.0
@@ -8291,7 +8344,7 @@ snapshots:
       picomatch: 4.0.7
       webpack-virtual-modules: 0.6.2
 
-  unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)):
+  unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)):
     dependencies:
       '@jridgewell/remapping': 2.3.5
       picomatch: 4.0.7
@@ -8299,7 +8352,7 @@ snapshots:
     optionalDependencies:
       esbuild: 0.28.2
       rollup: 4.63.3
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
 
   unstorage@1.17.5(db0@0.3.4)(ioredis@5.11.1):
     dependencies:
@@ -8350,23 +8403,23 @@ snapshots:
 
   verkit@0.3.2: {}
 
-  vite-dev-rpc@2.0.0(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)):
+  vite-dev-rpc@2.0.0(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)):
     dependencies:
       birpc: 4.2.0
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
-      vite-hot-client: 2.2.0(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
+      vite-hot-client: 2.2.0(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
 
-  vite-hot-client@2.2.0(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)):
+  vite-hot-client@2.2.0(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)):
     dependencies:
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
 
-  vite-node@5.3.0(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1):
+  vite-node@5.3.0(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1):
     dependencies:
       cac: 6.7.14
       es-module-lexer: 2.3.2
       obug: 2.2.1
       pathe: 2.0.3
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -8380,7 +8433,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.14.5(eslint@10.10.0(jiti@2.7.0))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)):
+  vite-plugin-checker@0.14.5(eslint@10.10.0(jiti@2.7.0))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)):
     dependencies:
       '@babel/code-frame': 7.29.7
       chokidar: 5.0.0
@@ -8389,13 +8442,13 @@ snapshots:
       picomatch: 4.0.7
       proper-lockfile: 4.1.2
       tiny-invariant: 1.3.3
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
     optionalDependencies:
       eslint: 10.10.0(jiti@2.7.0)
       optionator: 0.9.4
       typescript: 5.9.3
 
-  vite-plugin-inspect@11.4.1(@nuxt/kit@4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))))(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)):
+  vite-plugin-inspect@11.4.1(@nuxt/kit@4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))))(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)):
     dependencies:
       ansis: 4.4.0
       error-stack-parser-es: 1.0.5
@@ -8405,22 +8458,22 @@ snapshots:
       perfect-debounce: 2.1.0
       sirv: 3.0.2
       unplugin-utils: 0.3.2
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
-      vite-dev-rpc: 2.0.0(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
+      vite-dev-rpc: 2.0.0(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))
     optionalDependencies:
-      '@nuxt/kit': 4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3))
+      '@nuxt/kit': 4.5.2(magic-string@0.30.21)(magicast@0.5.5)(oxc-parser@0.143.0)(unplugin@3.4.0(esbuild@0.28.2)(rollup@4.63.3)(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)))
 
-  vite-plugin-vue-tracer@1.5.0(vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3)):
+  vite-plugin-vue-tracer@1.5.0(vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1))(vue@3.5.42(typescript@5.9.3)):
     dependencies:
       estree-walker: 3.0.3
       exsolve: 1.1.1
       magic-string: 1.4.1
       pathe: 2.0.3
       source-map-js: 1.2.1
-      vite: 7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1)
+      vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
       vue: 3.5.42(typescript@5.9.3)
 
-  vite@7.3.6(jiti@2.7.0)(terser@5.51.2)(yaml@2.9.1):
+  vite@7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1):
     dependencies:
       esbuild: 0.28.2
       fdir: 6.5.0(picomatch@4.0.7)
@@ -8431,6 +8484,7 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
       jiti: 2.7.0
+      lightningcss: 1.32.0
       terser: 5.51.2
       yaml: 2.9.1