diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..4250a32
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..0c83652
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,32 @@
+node_modules
+.nuxt
+.output
+dist
+build
+coverage
+.pnpm-store
+
+# Auto-generated by Nuxt
+**/.nuxt/**
+**/.output/**
+
+# Lockfiles
+pnpm-lock.yaml
+Cargo.lock
+
+# Generated tsconfigs (Nuxt)
+**/.nuxt/tsconfig*.json
+
+# env files
+.env
+.env.*
+!.env.example
+
+# Don't reformat OpenSpec specs / changes / docs — these are prose where
+# line breaks around `### Requirement:` / `#### Scenario:` blocks are part
+# of the spec's reading layout, not cosmetic.
+openspec/specs/**
+openspec/changes/**
+openspec/MIGRATION-PLAN.md
+docs/**/*.md
+docs/**/*.html
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..764ddba
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "lf",
+  "arrowParens": "always",
+  "vueIndentScriptAndStyle": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/apps/admin/app.vue b/apps/admin/app.vue
index e1afc8b..5e0c33e 100644
--- a/apps/admin/app.vue
+++ b/apps/admin/app.vue
@@ -25,18 +25,20 @@ const navItems = [
 </script>
 
 <template>
-  <div v-if="isAuthPage" class="min-h-screen bg-bg font-sans text-text">
+  <div v-if="isAuthPage" class="bg-bg text-text min-h-screen font-sans">
     <NuxtPage />
   </div>
-  <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>
+  <div v-else class="bg-bg text-text min-h-screen font-sans md:flex">
+    <aside
+      class="border-border bg-surface w-full shrink-0 border-b p-4 md:min-h-screen md:w-60 md:border-r md:border-b-0"
+    >
+      <div class="text-primary mb-6 text-lg font-bold">{{ $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="text-muted hover:bg-primary-soft hover:text-primary rounded-md px-3 py-2 text-sm font-medium transition-colors"
           :class="route.path === item.to ? 'bg-primary-soft text-primary' : ''"
         >
           {{ $t(item.label) }}
@@ -44,10 +46,12 @@ const navItems = [
       </nav>
     </aside>
     <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">
+      <header
+        class="border-border bg-surface flex flex-wrap items-center justify-end gap-3 border-b 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"
+          class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
           :aria-label="$t('common.language')"
           @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
         >
@@ -55,10 +59,12 @@ const navItems = [
         </select>
         <VAccentSwatch />
         <template v-if="session.isLoggedIn">
-          <span class="text-sm text-muted">{{ session.user?.display_name }}</span>
+          <span class="text-muted text-sm">{{ session.user?.display_name }}</span>
           <VBtn size="sm" @click="session.logout()">{{ $t("common.logout") }}</VBtn>
         </template>
-        <VBtn v-else size="sm" variant="primary" @click="navigateTo('/login')">{{ $t("common.login") }}</VBtn>
+        <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 />
diff --git a/apps/admin/locales-extra.ts b/apps/admin/locales-extra.ts
index 57cc3a1..a330e3c 100644
--- a/apps/admin/locales-extra.ts
+++ b/apps/admin/locales-extra.ts
@@ -118,11 +118,14 @@ export const enExtra = {
     aftersaleArbitrate: "Arbitration",
     aftersaleArbitrateRefund: "Arbitrate: refund",
     aftersaleArbitrateReject: "Arbitrate: reject",
-    aftersaleConfirmRefund: "Grant a terminal refund to the buyer? This completes the refund and cannot be undone.",
-    aftersaleConfirmReject: "Reject this dispute terminally? Only the buyer's one-time reopen can resume it.",
+    aftersaleConfirmRefund:
+      "Grant a terminal refund to the buyer? This completes the refund and cannot be undone.",
+    aftersaleConfirmReject:
+      "Reject this dispute terminally? Only the buyer's one-time reopen can resume it.",
     aftersaleArbitratedRefund: "Arbitration complete: refunded.",
     aftersaleArbitratedReject: "Arbitration complete: rejected.",
-    aftersaleOutcomeRefunded: "Refunded: the customer ledger is credited and the order refund total updated.",
+    aftersaleOutcomeRefunded:
+      "Refunded: the customer ledger is credited and the order refund total updated.",
     aftersaleOutcomeRejected: "Rejected: only the buyer's one-time reopen can resume it.",
     aftersaleOutcomeCancelled: "Cancelled by the buyer.",
     aftersaleConflict: "The application state changed; refresh and try again",
diff --git a/apps/admin/pages/aftersales.vue b/apps/admin/pages/aftersales.vue
index 3e07cca..573b54e 100644
--- a/apps/admin/pages/aftersales.vue
+++ b/apps/admin/pages/aftersales.vue
@@ -75,9 +75,7 @@ function currencyExponent(code: string): number | undefined {
 
 function money(amountMinor: number, currency: string): string {
   const exponent = currencyExponent(currency);
-  return exponent === undefined
-    ? "—"
-    : formatMoney(amountMinor, currency, exponent, locale.value);
+  return exponent === undefined ? "—" : formatMoney(amountMinor, currency, exponent, locale.value);
 }
 
 function formatDate(value: string): string {
@@ -207,9 +205,8 @@ async function toggleDetail(id: string): Promise<void> {
 }
 
 async function arbitrate(row: Aftersale, outcome: AftersaleArbitration): Promise<void> {
-  const confirmation = outcome === "refund"
-    ? t("admin.aftersaleConfirmRefund")
-    : t("admin.aftersaleConfirmReject");
+  const confirmation =
+    outcome === "refund" ? t("admin.aftersaleConfirmRefund") : t("admin.aftersaleConfirmReject");
   if (!confirm(confirmation)) return;
 
   acting.value = true;
@@ -220,9 +217,10 @@ async function arbitrate(row: Aftersale, outcome: AftersaleArbitration): Promise
     await loadAftersales();
     orderCache.delete(row.order_id);
     await openDetail(row.id);
-    notice.value = outcome === "refund"
-      ? t("admin.aftersaleArbitratedRefund")
-      : t("admin.aftersaleArbitratedReject");
+    notice.value =
+      outcome === "refund"
+        ? t("admin.aftersaleArbitratedRefund")
+        : t("admin.aftersaleArbitratedReject");
   } catch (error: unknown) {
     detailError.value = errorText(error);
   } finally {
@@ -244,7 +242,7 @@ onMounted(() => {
           <select
             id="aftersale-status"
             v-model="statusFilter"
-            class="rounded-md border border-border bg-surface px-3 py-2 font-normal text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
+            class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 font-normal focus:outline-2"
             @change="loadAftersales"
           >
             <option value="">{{ $t("common.all") }}</option>
@@ -258,7 +256,7 @@ onMounted(() => {
           <select
             id="aftersale-kind"
             v-model="kindFilter"
-            class="rounded-md border border-border bg-surface px-3 py-2 font-normal text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
+            class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 font-normal focus:outline-2"
           >
             <option value="">{{ $t("common.all") }}</option>
             <option v-for="kind in kinds" :key="kind" :value="kind">{{ kindLabel(kind) }}</option>
@@ -276,144 +274,283 @@ onMounted(() => {
       </div>
     </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>
+    <p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="text-danger my-2 text-sm" role="alert">{{ errorMessage }}</p>
     <VCard v-else-if="filteredAftersales.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("admin.aftersaleId") }}</th>
-            <th>{{ $t("admin.aftersaleShop") }}</th>
-            <th>{{ $t("admin.aftersaleBuyer") }}</th>
-            <th>{{ $t("admin.aftersaleKind") }}</th>
-            <th>{{ $t("admin.aftersaleAmount") }}</th>
-            <th>{{ $t("admin.created") }}</th>
-            <th>{{ $t("common.status") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-for="row in filteredAftersales" :key="row.id">
-            <tr :class="openId === row.id ? 'bg-primary-soft/30' : ''">
-              <td><code class="rounded bg-bg px-1.5 py-0.5" :title="row.id">{{ shortId(row.id) }}</code></td>
-              <td>
-                <span class="block">{{ shopName(row.shop_id) }}</span>
-                <code class="text-xs text-muted" :title="row.shop_id">{{ shortId(row.shop_id) }}</code>
-              </td>
-              <td><code class="rounded bg-bg px-1.5 py-0.5" :title="row.user_id">{{ shortId(row.user_id) }}</code></td>
-              <td>{{ kindLabel(row.kind) }}</td>
-              <td>{{ money(row.amount_minor, row.currency) }}</td>
-              <td>{{ formatDate(row.created_at) }}</td>
-              <td><VBadge :tone="statusTone(row.status)">{{ statusLabel(row.status) }}</VBadge></td>
-              <td>
-                <VBtn size="sm" @click="toggleDetail(row.id)">
-                  {{ openId === row.id ? $t("admin.aftersaleClose") : $t("admin.aftersaleView") }}
-                </VBtn>
-              </td>
+      <div class="min-w-[1080px]">
+        <VTable>
+          <thead>
+            <tr>
+              <th>{{ $t("admin.aftersaleId") }}</th>
+              <th>{{ $t("admin.aftersaleShop") }}</th>
+              <th>{{ $t("admin.aftersaleBuyer") }}</th>
+              <th>{{ $t("admin.aftersaleKind") }}</th>
+              <th>{{ $t("admin.aftersaleAmount") }}</th>
+              <th>{{ $t("admin.created") }}</th>
+              <th>{{ $t("common.status") }}</th>
+              <th>{{ $t("common.actions") }}</th>
             </tr>
-            <tr v-if="openId === row.id" class="bg-bg">
-              <td colspan="8" class="p-0">
-                <div class="p-4">
-                  <p v-if="detailLoading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
-                  <p v-else-if="detailError" class="text-sm text-danger" role="alert">{{ detailError }}</p>
-                  <VPanel v-else-if="detail" :title="$t('admin.aftersaleDetail')">
-                    <template #actions>
-                      <VBadge :tone="statusTone(detail.status)">{{ statusLabel(detail.status) }}</VBadge>
-                    </template>
-                    <div class="grid gap-4 lg:grid-cols-2">
-                      <div class="grid gap-3 text-sm sm:grid-cols-2">
-                        <div><span class="text-muted">{{ $t("admin.aftersaleId") }}</span><code class="ml-2">{{ detail.id }}</code></div>
-                        <div><span class="text-muted">{{ $t("admin.aftersaleOrder") }}</span><code class="ml-2">{{ detail.order_id }}</code></div>
-                        <div><span class="text-muted">{{ $t("admin.aftersaleFilterShop") }}</span><code class="ml-2">{{ detail.shop_id }}</code></div>
-                        <div><span class="text-muted">{{ $t("admin.aftersaleFilterBuyer") }}</span><code class="ml-2">{{ detail.user_id }}</code></div>
-                        <div><span class="text-muted">{{ $t("admin.aftersaleKind") }}</span><span class="ml-2">{{ kindLabel(detail.kind) }}</span></div>
-                        <div><span class="text-muted">{{ $t("admin.aftersaleCreated") }}</span><span class="ml-2">{{ formatDate(detail.created_at) }}</span></div>
-                        <div><span class="text-muted">{{ $t("admin.aftersaleUpdated") }}</span><span class="ml-2">{{ formatDate(detail.updated_at) }}</span></div>
-                        <div v-if="detail.reopened"><VBadge tone="orange">{{ $t("admin.aftersaleReopened") }}</VBadge></div>
-                      </div>
-                      <VCard class="bg-bg" :padded="true">
-                        <h4 class="mb-3 text-sm font-semibold">{{ $t("admin.aftersaleOrder") }}</h4>
-                        <p v-if="!orderSummary" class="text-sm text-muted">{{ $t("admin.aftersaleOrderNotFound") }}</p>
-                        <dl v-else class="grid gap-2 text-sm">
-                          <div class="flex justify-between gap-3"><dt class="text-muted">{{ $t("order.orderNo") }}</dt><dd>{{ orderSummary.orderNo }}</dd></div>
-                          <div class="flex justify-between gap-3"><dt class="text-muted">{{ $t("admin.aftersaleOrderTotal") }}</dt><dd>{{ money(orderSummary.totalMinor, orderSummary.currency) }}</dd></div>
-                          <div class="flex justify-between gap-3 font-semibold"><dt class="text-muted">{{ $t("admin.aftersaleOrderRefunded") }}</dt><dd>{{ money(orderSummary.refundTotalMinor, orderSummary.currency) }}</dd></div>
-                        </dl>
-                      </VCard>
-                    </div>
-
-                    <VPanel class="mt-4" :title="$t('admin.aftersaleItem')">
-                      <div class="flex gap-3">
-                        <img v-if="detail.item.image" :src="detail.item.image" :alt="localizedText(detail.item.product_name, locale)" class="h-16 w-16 rounded object-cover" />
-                        <div class="min-w-0 text-sm">
-                          <p class="font-medium">{{ localizedText(detail.item.product_name, locale) }}</p>
-                          <p class="text-muted">{{ detail.item.sku_code }}</p>
-                          <p class="mt-1">{{ money(detail.item.unit_price_minor, detail.currency) }} × {{ detail.item.qty }}</p>
-                        </div>
-                      </div>
-                    </VPanel>
-
-                    <div class="mt-4 grid gap-4 lg:grid-cols-2">
-                      <VCard :padded="true">
-                        <h4 class="mb-2 text-sm font-semibold">{{ $t("admin.aftersaleReason") }}</h4>
-                        <p class="text-sm">{{ localizedText(detail.reason, locale) }}</p>
-                        <dl class="mt-3 grid gap-1 text-sm">
-                          <div class="flex justify-between gap-3"><dt class="text-muted">{{ $t("admin.aftersaleAmount") }}</dt><dd>{{ money(detail.amount_minor, detail.currency) }}</dd></div>
-                          <div class="flex justify-between gap-3"><dt class="text-muted">{{ $t("admin.aftersaleRemaining") }}</dt><dd>{{ money(detail.remaining_refundable_minor, detail.currency) }}</dd></div>
-                        </dl>
-                      </VCard>
-                      <VCard :padded="true">
-                        <h4 class="mb-2 text-sm font-semibold">{{ $t("admin.aftersaleEvidence") }}</h4>
-                        <ul v-if="detail.evidence.length" class="grid gap-1 text-sm">
-                          <li v-for="url in detail.evidence" :key="url"><a :href="url" target="_blank" rel="noopener noreferrer" class="break-all text-primary underline">{{ url }}</a></li>
-                        </ul>
-                        <p v-else class="text-sm text-muted">{{ $t("admin.aftersaleNoEvidence") }}</p>
-                      </VCard>
-                    </div>
-
-                    <VCard v-if="detail.return_carrier || detail.return_tracking_no" class="mt-4" :padded="true">
-                      <h4 class="mb-2 text-sm font-semibold">{{ $t("admin.aftersaleReturnTracking") }}</h4>
-                      <p class="text-sm">{{ detail.return_carrier || "—" }} · {{ detail.return_tracking_no || "—" }}</p>
-                    </VCard>
-
-                    <VPanel class="mt-4" :title="$t('admin.aftersaleMessages')">
-                      <div v-if="detail.messages.length" class="grid gap-3">
-                        <article v-for="message in [...detail.messages].sort((a, b) => a.created_at.localeCompare(b.created_at))" :key="message.id" class="rounded-md border border-border bg-bg p-3">
-                          <div class="mb-2 flex flex-wrap items-center gap-2 text-xs">
-                            <VBadge :tone="roleTone(message.author_role)">{{ roleLabel(message.author_role) }}</VBadge>
-                            <code :title="message.author_id">{{ shortId(message.author_id) }}</code>
-                            <time class="text-muted">{{ formatDate(message.created_at) }}</time>
+          </thead>
+          <tbody>
+            <template v-for="row in filteredAftersales" :key="row.id">
+              <tr :class="openId === row.id ? 'bg-primary-soft/30' : ''">
+                <td>
+                  <code class="bg-bg rounded px-1.5 py-0.5" :title="row.id">{{
+                    shortId(row.id)
+                  }}</code>
+                </td>
+                <td>
+                  <span class="block">{{ shopName(row.shop_id) }}</span>
+                  <code class="text-muted text-xs" :title="row.shop_id">{{
+                    shortId(row.shop_id)
+                  }}</code>
+                </td>
+                <td>
+                  <code class="bg-bg rounded px-1.5 py-0.5" :title="row.user_id">{{
+                    shortId(row.user_id)
+                  }}</code>
+                </td>
+                <td>{{ kindLabel(row.kind) }}</td>
+                <td>{{ money(row.amount_minor, row.currency) }}</td>
+                <td>{{ formatDate(row.created_at) }}</td>
+                <td>
+                  <VBadge :tone="statusTone(row.status)">{{ statusLabel(row.status) }}</VBadge>
+                </td>
+                <td>
+                  <VBtn size="sm" @click="toggleDetail(row.id)">
+                    {{ openId === row.id ? $t("admin.aftersaleClose") : $t("admin.aftersaleView") }}
+                  </VBtn>
+                </td>
+              </tr>
+              <tr v-if="openId === row.id" class="bg-bg">
+                <td colspan="8" class="p-0">
+                  <div class="p-4">
+                    <p v-if="detailLoading" class="text-muted text-sm">
+                      {{ $t("common.loading") }}
+                    </p>
+                    <p v-else-if="detailError" class="text-danger text-sm" role="alert">
+                      {{ detailError }}
+                    </p>
+                    <VPanel v-else-if="detail" :title="$t('admin.aftersaleDetail')">
+                      <template #actions>
+                        <VBadge :tone="statusTone(detail.status)">{{
+                          statusLabel(detail.status)
+                        }}</VBadge>
+                      </template>
+                      <div class="grid gap-4 lg:grid-cols-2">
+                        <div class="grid gap-3 text-sm sm:grid-cols-2">
+                          <div>
+                            <span class="text-muted">{{ $t("admin.aftersaleId") }}</span
+                            ><code class="ml-2">{{ detail.id }}</code>
                           </div>
-                          <p class="text-sm">{{ localizedText(message.content, locale) }}</p>
-                          <ul v-if="message.evidence.length" class="mt-2 grid gap-1 text-xs">
-                            <li v-for="url in message.evidence" :key="url"><a :href="url" target="_blank" rel="noopener noreferrer" class="break-all text-primary underline">{{ url }}</a></li>
-                          </ul>
-                        </article>
+                          <div>
+                            <span class="text-muted">{{ $t("admin.aftersaleOrder") }}</span
+                            ><code class="ml-2">{{ detail.order_id }}</code>
+                          </div>
+                          <div>
+                            <span class="text-muted">{{ $t("admin.aftersaleFilterShop") }}</span
+                            ><code class="ml-2">{{ detail.shop_id }}</code>
+                          </div>
+                          <div>
+                            <span class="text-muted">{{ $t("admin.aftersaleFilterBuyer") }}</span
+                            ><code class="ml-2">{{ detail.user_id }}</code>
+                          </div>
+                          <div>
+                            <span class="text-muted">{{ $t("admin.aftersaleKind") }}</span
+                            ><span class="ml-2">{{ kindLabel(detail.kind) }}</span>
+                          </div>
+                          <div>
+                            <span class="text-muted">{{ $t("admin.aftersaleCreated") }}</span
+                            ><span class="ml-2">{{ formatDate(detail.created_at) }}</span>
+                          </div>
+                          <div>
+                            <span class="text-muted">{{ $t("admin.aftersaleUpdated") }}</span
+                            ><span class="ml-2">{{ formatDate(detail.updated_at) }}</span>
+                          </div>
+                          <div v-if="detail.reopened">
+                            <VBadge tone="orange">{{ $t("admin.aftersaleReopened") }}</VBadge>
+                          </div>
+                        </div>
+                        <VCard class="bg-bg" :padded="true">
+                          <h4 class="mb-3 text-sm font-semibold">
+                            {{ $t("admin.aftersaleOrder") }}
+                          </h4>
+                          <p v-if="!orderSummary" class="text-muted text-sm">
+                            {{ $t("admin.aftersaleOrderNotFound") }}
+                          </p>
+                          <dl v-else class="grid gap-2 text-sm">
+                            <div class="flex justify-between gap-3">
+                              <dt class="text-muted">{{ $t("order.orderNo") }}</dt>
+                              <dd>{{ orderSummary.orderNo }}</dd>
+                            </div>
+                            <div class="flex justify-between gap-3">
+                              <dt class="text-muted">{{ $t("admin.aftersaleOrderTotal") }}</dt>
+                              <dd>{{ money(orderSummary.totalMinor, orderSummary.currency) }}</dd>
+                            </div>
+                            <div class="flex justify-between gap-3 font-semibold">
+                              <dt class="text-muted">{{ $t("admin.aftersaleOrderRefunded") }}</dt>
+                              <dd>
+                                {{ money(orderSummary.refundTotalMinor, orderSummary.currency) }}
+                              </dd>
+                            </div>
+                          </dl>
+                        </VCard>
                       </div>
-                      <p v-else class="text-sm text-muted">{{ $t("admin.aftersaleNoMessages") }}</p>
-                    </VPanel>
 
-                    <div class="mt-4 border-t border-border pt-4">
-                      <p v-if="notice" class="mb-3 text-sm text-success" role="status">{{ notice }}</p>
-                      <p v-if="canArbitrate(detail.status)" class="mb-3 text-sm text-muted">{{ $t("admin.aftersaleArbitrate") }}</p>
-                      <div v-if="canArbitrate(detail.status)" class="flex flex-wrap gap-2">
-                        <VBtn variant="primary" :disabled="acting" @click="arbitrate(detail, 'refund')">{{ $t("admin.aftersaleArbitrateRefund") }}</VBtn>
-                        <VBtn variant="danger" :disabled="acting" @click="arbitrate(detail, 'reject')">{{ $t("admin.aftersaleArbitrateReject") }}</VBtn>
+                      <VPanel class="mt-4" :title="$t('admin.aftersaleItem')">
+                        <div class="flex gap-3">
+                          <img
+                            v-if="detail.item.image"
+                            :src="detail.item.image"
+                            :alt="localizedText(detail.item.product_name, locale)"
+                            class="h-16 w-16 rounded object-cover"
+                          />
+                          <div class="min-w-0 text-sm">
+                            <p class="font-medium">
+                              {{ localizedText(detail.item.product_name, locale) }}
+                            </p>
+                            <p class="text-muted">{{ detail.item.sku_code }}</p>
+                            <p class="mt-1">
+                              {{ money(detail.item.unit_price_minor, detail.currency) }} ×
+                              {{ detail.item.qty }}
+                            </p>
+                          </div>
+                        </div>
+                      </VPanel>
+
+                      <div class="mt-4 grid gap-4 lg:grid-cols-2">
+                        <VCard :padded="true">
+                          <h4 class="mb-2 text-sm font-semibold">
+                            {{ $t("admin.aftersaleReason") }}
+                          </h4>
+                          <p class="text-sm">{{ localizedText(detail.reason, locale) }}</p>
+                          <dl class="mt-3 grid gap-1 text-sm">
+                            <div class="flex justify-between gap-3">
+                              <dt class="text-muted">{{ $t("admin.aftersaleAmount") }}</dt>
+                              <dd>{{ money(detail.amount_minor, detail.currency) }}</dd>
+                            </div>
+                            <div class="flex justify-between gap-3">
+                              <dt class="text-muted">{{ $t("admin.aftersaleRemaining") }}</dt>
+                              <dd>
+                                {{ money(detail.remaining_refundable_minor, detail.currency) }}
+                              </dd>
+                            </div>
+                          </dl>
+                        </VCard>
+                        <VCard :padded="true">
+                          <h4 class="mb-2 text-sm font-semibold">
+                            {{ $t("admin.aftersaleEvidence") }}
+                          </h4>
+                          <ul v-if="detail.evidence.length" class="grid gap-1 text-sm">
+                            <li v-for="url in detail.evidence" :key="url">
+                              <a
+                                :href="url"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="text-primary break-all underline"
+                                >{{ url }}</a
+                              >
+                            </li>
+                          </ul>
+                          <p v-else class="text-muted text-sm">
+                            {{ $t("admin.aftersaleNoEvidence") }}
+                          </p>
+                        </VCard>
                       </div>
-                      <p v-else-if="detail.status === 'refunded'" class="text-sm text-success">{{ $t("admin.aftersaleOutcomeRefunded") }}</p>
-                      <p v-else-if="detail.status === 'rejected'" class="text-sm text-danger">{{ $t("admin.aftersaleOutcomeRejected") }}</p>
-                      <p v-else class="text-sm text-muted">{{ $t("admin.aftersaleOutcomeCancelled") }}</p>
-                    </div>
-                  </VPanel>
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </VTable></div>
+
+                      <VCard
+                        v-if="detail.return_carrier || detail.return_tracking_no"
+                        class="mt-4"
+                        :padded="true"
+                      >
+                        <h4 class="mb-2 text-sm font-semibold">
+                          {{ $t("admin.aftersaleReturnTracking") }}
+                        </h4>
+                        <p class="text-sm">
+                          {{ detail.return_carrier || "—" }} ·
+                          {{ detail.return_tracking_no || "—" }}
+                        </p>
+                      </VCard>
+
+                      <VPanel class="mt-4" :title="$t('admin.aftersaleMessages')">
+                        <div v-if="detail.messages.length" class="grid gap-3">
+                          <article
+                            v-for="message in [...detail.messages].sort((a, b) =>
+                              a.created_at.localeCompare(b.created_at),
+                            )"
+                            :key="message.id"
+                            class="border-border bg-bg rounded-md border p-3"
+                          >
+                            <div class="mb-2 flex flex-wrap items-center gap-2 text-xs">
+                              <VBadge :tone="roleTone(message.author_role)">{{
+                                roleLabel(message.author_role)
+                              }}</VBadge>
+                              <code :title="message.author_id">{{
+                                shortId(message.author_id)
+                              }}</code>
+                              <time class="text-muted">{{ formatDate(message.created_at) }}</time>
+                            </div>
+                            <p class="text-sm">{{ localizedText(message.content, locale) }}</p>
+                            <ul v-if="message.evidence.length" class="mt-2 grid gap-1 text-xs">
+                              <li v-for="url in message.evidence" :key="url">
+                                <a
+                                  :href="url"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  class="text-primary break-all underline"
+                                  >{{ url }}</a
+                                >
+                              </li>
+                            </ul>
+                          </article>
+                        </div>
+                        <p v-else class="text-muted text-sm">
+                          {{ $t("admin.aftersaleNoMessages") }}
+                        </p>
+                      </VPanel>
+
+                      <div class="border-border mt-4 border-t pt-4">
+                        <p v-if="notice" class="text-success mb-3 text-sm" role="status">
+                          {{ notice }}
+                        </p>
+                        <p v-if="canArbitrate(detail.status)" class="text-muted mb-3 text-sm">
+                          {{ $t("admin.aftersaleArbitrate") }}
+                        </p>
+                        <div v-if="canArbitrate(detail.status)" class="flex flex-wrap gap-2">
+                          <VBtn
+                            variant="primary"
+                            :disabled="acting"
+                            @click="arbitrate(detail, 'refund')"
+                            >{{ $t("admin.aftersaleArbitrateRefund") }}</VBtn
+                          >
+                          <VBtn
+                            variant="danger"
+                            :disabled="acting"
+                            @click="arbitrate(detail, 'reject')"
+                            >{{ $t("admin.aftersaleArbitrateReject") }}</VBtn
+                          >
+                        </div>
+                        <p v-else-if="detail.status === 'refunded'" class="text-success text-sm">
+                          {{ $t("admin.aftersaleOutcomeRefunded") }}
+                        </p>
+                        <p v-else-if="detail.status === 'rejected'" class="text-danger text-sm">
+                          {{ $t("admin.aftersaleOutcomeRejected") }}
+                        </p>
+                        <p v-else class="text-muted text-sm">
+                          {{ $t("admin.aftersaleOutcomeCancelled") }}
+                        </p>
+                      </div>
+                    </VPanel>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </VTable>
+      </div>
     </div>
   </VPage>
 </template>
diff --git a/apps/admin/pages/brands.vue b/apps/admin/pages/brands.vue
index fff1028..74ef238 100644
--- a/apps/admin/pages/brands.vue
+++ b/apps/admin/pages/brands.vue
@@ -105,7 +105,6 @@ async function save(): Promise<void> {
   }
 }
 
-
 onMounted(() => {
   void loadBrands();
 });
@@ -113,10 +112,14 @@ onMounted(() => {
 
 <template>
   <VPage :title="$t('nav.brands')">
-    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
-    <p v-else-if="loadError" class="my-2 text-sm text-danger" role="alert">{{ loadError }}</p>
+    <p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
+    <p v-else-if="loadError" class="text-danger my-2 text-sm" role="alert">{{ loadError }}</p>
     <VCard v-else>
-      <div v-for="(row, index) in rows" :key="index" class="mb-3 rounded-md border border-border p-3">
+      <div
+        v-for="(row, index) in rows"
+        :key="index"
+        class="border-border mb-3 rounded-md border p-3"
+      >
         <div class="grid items-end gap-3 md:grid-cols-[1fr_1fr_1fr_auto_auto]">
           <VField :label="$t('admin.brandSlug')" :error="rowErrors[index]">
             <VInput v-model="row.slug" placeholder="acme" />
@@ -128,12 +131,14 @@ onMounted(() => {
             <VInput v-model="row.nameZh" />
           </VField>
           <label class="mb-3.5 flex items-center gap-2 text-sm">
-            <input v-model="row.active" type="checkbox" class="h-4 w-4 accent-primary" />
+            <input v-model="row.active" type="checkbox" class="accent-primary h-4 w-4" />
             {{ $t("admin.enabled") }}
           </label>
           <div class="mb-3.5 flex gap-1">
             <VBtn size="sm" :disabled="index === 0" @click="moveRow(index, -1)">↑</VBtn>
-            <VBtn size="sm" :disabled="index === rows.length - 1" @click="moveRow(index, 1)">↓</VBtn>
+            <VBtn size="sm" :disabled="index === rows.length - 1" @click="moveRow(index, 1)"
+              >↓</VBtn
+            >
             <VBtn size="sm" @click="removeRow(index)">{{ $t("common.delete") }}</VBtn>
           </div>
         </div>
@@ -143,10 +148,15 @@ onMounted(() => {
         <VBtn variant="primary" :disabled="saving" @click="save">
           {{ saving ? $t("common.loading") : $t("common.save") }}
         </VBtn>
-        <p v-if="feedback" role="status" class="text-sm" :class="feedback.ok ? 'text-success' : 'text-danger'">
+        <p
+          v-if="feedback"
+          role="status"
+          class="text-sm"
+          :class="feedback.ok ? 'text-success' : 'text-danger'"
+        >
           {{ feedback.message }}
         </p>
       </div>
     </VCard>
   </VPage>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/admin/pages/content.vue b/apps/admin/pages/content.vue
index 461269c..c4820cb 100644
--- a/apps/admin/pages/content.vue
+++ b/apps/admin/pages/content.vue
@@ -107,7 +107,12 @@ function validate(kind: ContentKind): boolean {
   for (const [index, row] of list.entries()) {
     if (kind === "quick-links") {
       const link = row as QuickLinkRow;
-      if (!link.label.en.trim() || !link.label.zh.trim() || !link.url.trim() || !link.glyph.trim()) {
+      if (
+        !link.label.en.trim() ||
+        !link.label.zh.trim() ||
+        !link.url.trim() ||
+        !link.glyph.trim()
+      ) {
         errors[index] = t("admin.contentQuickLinkInvalid");
       }
     } else if (kind === "floor-adverts") {
@@ -150,7 +155,6 @@ async function saveKind(kind: ContentKind): Promise<void> {
   }
 }
 
-
 onMounted(() => {
   void loadContent();
 });
@@ -158,14 +162,23 @@ onMounted(() => {
 
 <template>
   <VPage :title="$t('nav.content')">
-    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
-    <p v-else-if="loadError" class="my-2 text-sm text-danger" role="alert">{{ loadError }}</p>
+    <p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
+    <p v-else-if="loadError" class="text-danger my-2 text-sm" role="alert">{{ loadError }}</p>
     <template v-else>
-      <VCard v-for="kind in (['banners', 'promos'] as ContentKind[])" :key="kind" class="mb-5">
+      <VCard v-for="kind in ['banners', 'promos'] as ContentKind[]" :key="kind" class="mb-5">
         <h2 class="mb-4 text-base font-semibold">{{ $t(kindLabelKey[kind]) }}</h2>
-        <div v-for="(row, index) in rowsOf(kind)" :key="index" class="mb-3 rounded-md border border-border p-3">
+        <div
+          v-for="(row, index) in rowsOf(kind)"
+          :key="index"
+          class="border-border mb-3 rounded-md border p-3"
+        >
           <div class="grid items-end gap-3 md:grid-cols-[auto_1fr_1fr_auto_auto]">
-            <img v-if="row.image" :src="row.image" :alt="$t(kindLabelKey[kind])" class="h-12 w-20 rounded object-cover" />
+            <img
+              v-if="row.image"
+              :src="row.image"
+              :alt="$t(kindLabelKey[kind])"
+              class="h-12 w-20 rounded object-cover"
+            />
             <VField :label="$t('admin.contentImage')" :error="rowErrors[kind][index]">
               <VInput v-model="row.image" />
             </VField>
@@ -173,12 +186,17 @@ onMounted(() => {
               <VInput v-model="row.url" />
             </VField>
             <label class="mb-3.5 flex items-center gap-2 text-sm">
-              <input v-model="row.active" type="checkbox" class="h-4 w-4 accent-primary" />
+              <input v-model="row.active" type="checkbox" class="accent-primary h-4 w-4" />
               {{ $t("admin.enabled") }}
             </label>
             <div class="mb-3.5 flex gap-1">
               <VBtn size="sm" :disabled="index === 0" @click="moveRow(kind, index, -1)">↑</VBtn>
-              <VBtn size="sm" :disabled="index === rowsOf(kind).length - 1" @click="moveRow(kind, index, 1)">↓</VBtn>
+              <VBtn
+                size="sm"
+                :disabled="index === rowsOf(kind).length - 1"
+                @click="moveRow(kind, index, 1)"
+                >↓</VBtn
+              >
               <VBtn size="sm" @click="removeRow(kind, index)">{{ $t("common.delete") }}</VBtn>
             </div>
           </div>
@@ -188,7 +206,12 @@ onMounted(() => {
           <VBtn variant="primary" :disabled="saving === kind" @click="saveKind(kind)">
             {{ saving === kind ? $t("common.loading") : $t("common.save") }}
           </VBtn>
-          <p v-if="feedback[kind]" role="status" class="text-sm" :class="feedback[kind]!.ok ? 'text-success' : 'text-danger'">
+          <p
+            v-if="feedback[kind]"
+            role="status"
+            class="text-sm"
+            :class="feedback[kind]!.ok ? 'text-success' : 'text-danger'"
+          >
             {{ feedback[kind]!.message }}
           </p>
         </div>
@@ -196,9 +219,17 @@ onMounted(() => {
 
       <VCard class="mb-5">
         <h2 class="mb-4 text-base font-semibold">{{ $t("admin.contentQuickLinks") }}</h2>
-        <div v-for="(row, index) in quickLinks" :key="index" class="mb-3 rounded-md border border-border p-3">
+        <div
+          v-for="(row, index) in quickLinks"
+          :key="index"
+          class="border-border mb-3 rounded-md border p-3"
+        >
           <div class="grid items-end gap-3 md:grid-cols-[auto_1fr_1fr_1fr_1fr_auto_auto]">
-            <svg viewBox="0 0 24 24" class="mb-3.5 h-8 w-8 fill-current text-primary" aria-hidden="true">
+            <svg
+              viewBox="0 0 24 24"
+              class="text-primary mb-3.5 h-8 w-8 fill-current"
+              aria-hidden="true"
+            >
               <path :d="row.glyph" />
             </svg>
             <VField :label="$t('admin.contentLabelEn')" :error="rowErrors['quick-links'][index]">
@@ -214,22 +245,40 @@ onMounted(() => {
               <VInput v-model="row.glyph" placeholder="M12 2L2 22h20z" />
             </VField>
             <label class="mb-3.5 flex items-center gap-2 text-sm">
-              <input v-model="row.active" type="checkbox" class="h-4 w-4 accent-primary" />
+              <input v-model="row.active" type="checkbox" class="accent-primary h-4 w-4" />
               {{ $t("admin.enabled") }}
             </label>
             <div class="mb-3.5 flex gap-1">
-              <VBtn size="sm" :disabled="index === 0" @click="moveRow('quick-links', index, -1)">↑</VBtn>
-              <VBtn size="sm" :disabled="index === quickLinks.length - 1" @click="moveRow('quick-links', index, 1)">↓</VBtn>
-              <VBtn size="sm" @click="removeRow('quick-links', index)">{{ $t("common.delete") }}</VBtn>
+              <VBtn size="sm" :disabled="index === 0" @click="moveRow('quick-links', index, -1)"
+                >↑</VBtn
+              >
+              <VBtn
+                size="sm"
+                :disabled="index === quickLinks.length - 1"
+                @click="moveRow('quick-links', index, 1)"
+                >↓</VBtn
+              >
+              <VBtn size="sm" @click="removeRow('quick-links', index)">{{
+                $t("common.delete")
+              }}</VBtn>
             </div>
           </div>
         </div>
         <div class="flex items-center gap-3">
           <VBtn size="sm" @click="addRow('quick-links')">{{ $t("admin.contentAddRow") }}</VBtn>
-          <VBtn variant="primary" :disabled="saving === 'quick-links'" @click="saveKind('quick-links')">
+          <VBtn
+            variant="primary"
+            :disabled="saving === 'quick-links'"
+            @click="saveKind('quick-links')"
+          >
             {{ saving === "quick-links" ? $t("common.loading") : $t("common.save") }}
           </VBtn>
-          <p v-if="feedback['quick-links']" role="status" class="text-sm" :class="feedback['quick-links']!.ok ? 'text-success' : 'text-danger'">
+          <p
+            v-if="feedback['quick-links']"
+            role="status"
+            class="text-sm"
+            :class="feedback['quick-links']!.ok ? 'text-success' : 'text-danger'"
+          >
             {{ feedback["quick-links"]!.message }}
           </p>
         </div>
@@ -237,33 +286,60 @@ onMounted(() => {
 
       <VCard class="mb-5">
         <h2 class="mb-4 text-base font-semibold">{{ $t("admin.contentFloorAdverts") }}</h2>
-        <div v-for="(row, index) in floorAdverts" :key="index" class="mb-3 rounded-md border border-border p-3">
+        <div
+          v-for="(row, index) in floorAdverts"
+          :key="index"
+          class="border-border mb-3 rounded-md border p-3"
+        >
           <div class="grid items-end gap-3 md:grid-cols-[auto_1fr_auto_auto]">
-            <img v-if="row.image" :src="row.image" :alt="$t('admin.contentFloorAdverts')" class="h-12 w-20 rounded object-cover" />
+            <img
+              v-if="row.image"
+              :src="row.image"
+              :alt="$t('admin.contentFloorAdverts')"
+              class="h-12 w-20 rounded object-cover"
+            />
             <VField :label="$t('admin.contentImage')" :error="rowErrors['floor-adverts'][index]">
               <VInput v-model="row.image" />
             </VField>
             <label class="mb-3.5 flex items-center gap-2 text-sm">
-              <input v-model="row.active" type="checkbox" class="h-4 w-4 accent-primary" />
+              <input v-model="row.active" type="checkbox" class="accent-primary h-4 w-4" />
               {{ $t("admin.enabled") }}
             </label>
             <div class="mb-3.5 flex gap-1">
-              <VBtn size="sm" :disabled="index === 0" @click="moveRow('floor-adverts', index, -1)">↑</VBtn>
-              <VBtn size="sm" :disabled="index === floorAdverts.length - 1" @click="moveRow('floor-adverts', index, 1)">↓</VBtn>
-              <VBtn size="sm" @click="removeRow('floor-adverts', index)">{{ $t("common.delete") }}</VBtn>
+              <VBtn size="sm" :disabled="index === 0" @click="moveRow('floor-adverts', index, -1)"
+                >↑</VBtn
+              >
+              <VBtn
+                size="sm"
+                :disabled="index === floorAdverts.length - 1"
+                @click="moveRow('floor-adverts', index, 1)"
+                >↓</VBtn
+              >
+              <VBtn size="sm" @click="removeRow('floor-adverts', index)">{{
+                $t("common.delete")
+              }}</VBtn>
             </div>
           </div>
         </div>
         <div class="flex items-center gap-3">
           <VBtn size="sm" @click="addRow('floor-adverts')">{{ $t("admin.contentAddRow") }}</VBtn>
-          <VBtn variant="primary" :disabled="saving === 'floor-adverts'" @click="saveKind('floor-adverts')">
+          <VBtn
+            variant="primary"
+            :disabled="saving === 'floor-adverts'"
+            @click="saveKind('floor-adverts')"
+          >
             {{ saving === "floor-adverts" ? $t("common.loading") : $t("common.save") }}
           </VBtn>
-          <p v-if="feedback['floor-adverts']" role="status" class="text-sm" :class="feedback['floor-adverts']!.ok ? 'text-success' : 'text-danger'">
+          <p
+            v-if="feedback['floor-adverts']"
+            role="status"
+            class="text-sm"
+            :class="feedback['floor-adverts']!.ok ? 'text-success' : 'text-danger'"
+          >
             {{ feedback["floor-adverts"]!.message }}
           </p>
         </div>
       </VCard>
     </template>
   </VPage>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/admin/pages/currencies.vue b/apps/admin/pages/currencies.vue
index 064fe71..cfb087a 100644
--- a/apps/admin/pages/currencies.vue
+++ b/apps/admin/pages/currencies.vue
@@ -157,61 +157,104 @@ onMounted(() => {
           <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 />
+          <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 />
+          <VInput
+            id="currency-rate"
+            v-model="form.rateToBase"
+            min="0"
+            step="any"
+            type="number"
+            required
+          />
         </VField>
       </div>
       <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" />
+        <input v-model="form.enabled" class="accent-primary h-4 w-4" type="checkbox" />
         {{ $t("admin.enabled") }}
       </label>
-      <p v-if="formError" class="my-2 text-sm text-danger" role="alert">{{ formError }}</p>
+      <p v-if="formError" class="text-danger my-2 text-sm" role="alert">{{ formError }}</p>
       <VBtn variant="primary" :disabled="creating" @click="createCurrency">
         {{ creating ? $t("common.loading") : $t("admin.saveCurrency") }}
       </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>
+    <p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="text-danger my-2 text-sm" 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>
-            <th>{{ $t("admin.currencyNameEn") }}</th>
-            <th>{{ $t("admin.symbol") }}</th>
-            <th>{{ $t("admin.exponent") }}</th>
-            <th>{{ $t("admin.rate") }}</th>
-            <th>{{ $t("admin.baseCurrency") }}</th>
-            <th>{{ $t("admin.enabled") }}</th>
-            <th>{{ $t("common.actions") }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="currency in currencies" :key="currency.code">
-            <td><strong>{{ currency.code }}</strong></td>
-            <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>
-              <VBadge v-if="currency.is_base" tone="blue">{{ $t("admin.baseCurrency") }}</VBadge>
-              <span v-else class="text-muted">—</span>
-            </td>
-            <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") }}
-              </VBtn>
-              <VBtn size="sm" :disabled="savingCode === currency.code" @click="toggleEnabled(currency)">
-                {{ currency.enabled ? $t("admin.suspend") : $t("admin.activate") }}
-              </VBtn>
-            </div></td>
-          </tr>
-        </tbody>
-      </VTable></div>
+      <div class="min-w-[1080px]">
+        <VTable>
+          <thead>
+            <tr>
+              <th>{{ $t("common.currency") }}</th>
+              <th>{{ $t("admin.currencyNameEn") }}</th>
+              <th>{{ $t("admin.symbol") }}</th>
+              <th>{{ $t("admin.exponent") }}</th>
+              <th>{{ $t("admin.rate") }}</th>
+              <th>{{ $t("admin.baseCurrency") }}</th>
+              <th>{{ $t("admin.enabled") }}</th>
+              <th>{{ $t("common.actions") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="currency in currencies" :key="currency.code">
+              <td>
+                <strong>{{ currency.code }}</strong>
+              </td>
+              <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>
+                <VBadge v-if="currency.is_base" tone="blue">{{ $t("admin.baseCurrency") }}</VBadge>
+                <span v-else class="text-muted">—</span>
+              </td>
+              <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")
+                    }}
+                  </VBtn>
+                  <VBtn
+                    size="sm"
+                    :disabled="savingCode === currency.code"
+                    @click="toggleEnabled(currency)"
+                  >
+                    {{ currency.enabled ? $t("admin.suspend") : $t("admin.activate") }}
+                  </VBtn>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </VTable>
+      </div>
     </div>
   </VPage>
 </template>
diff --git a/apps/admin/pages/index.vue b/apps/admin/pages/index.vue
index 396911d..31f0b18 100644
--- a/apps/admin/pages/index.vue
+++ b/apps/admin/pages/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 const { t } = useI18n();
 definePageMeta({ middleware: "auth" });
 
@@ -43,9 +42,13 @@ const cards = computed(() => [
   { label: "admin.totalUsers", value: stats.users, link: "/users", tone: "blue" },
   { label: "admin.totalShops", value: stats.shops, link: "/shops", tone: "green" },
   { label: "admin.totalOrders", value: stats.orders, link: "/orders", tone: "orange" },
-  { label: "admin.enabledCurrencies", value: stats.currencies, link: "/currencies", tone: "purple" },
+  {
+    label: "admin.enabledCurrencies",
+    value: stats.currencies,
+    link: "/currencies",
+    tone: "purple",
+  },
 ]);
-
 </script>
 
 <template>
@@ -53,35 +56,49 @@ const cards = computed(() => [
     <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>
+    <p class="text-primary mb-4 text-xs font-bold tracking-[0.08em] uppercase">
+      {{ $t("common.appName") }} · Admin
+    </p>
+    <p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="text-danger my-2 text-sm" role="alert">{{ errorMessage }}</p>
     <template v-else>
       <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"
+          class="border-border bg-surface hover:border-primary flex flex-col gap-2 rounded-lg border p-5 shadow-sm transition-transform hover:-translate-y-0.5"
         >
-          <span class="text-[13px] text-muted">{{ $t(card.label) }}</span>
+          <span class="text-muted text-[13px]">{{ $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>
+            :class="
+              card.tone === 'green'
+                ? 'text-success'
+                : card.tone === 'orange'
+                  ? 'text-warning'
+                  : 'text-primary'
+            "
+            >{{ card.value }}</strong
+          >
+          <span class="text-primary text-xs">{{ $t("admin.open") }} →</span>
         </NuxtLink>
       </div>
       <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">
+        <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>
+            <span class="text-muted text-sm">{{ $t(shortcut.label) }}</span>
           </VCard>
         </NuxtLink>
       </div>
diff --git a/apps/admin/pages/login.vue b/apps/admin/pages/login.vue
index cbcfd80..7251ee9 100644
--- a/apps/admin/pages/login.vue
+++ b/apps/admin/pages/login.vue
@@ -37,23 +37,31 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <div class="grid min-h-screen place-items-center bg-bg px-6 py-8 font-sans text-text">
+  <div class="bg-bg text-text grid min-h-screen place-items-center px-6 py-8 font-sans">
     <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>
+        <p class="text-primary mb-2 text-xs font-bold tracking-[0.08em] uppercase">
+          {{ $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>
+        <p class="text-muted mb-5 text-sm">{{ $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 />
+          <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>
+        <p v-if="errorMessage" class="text-danger my-2 text-sm" 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>
+        <p class="text-muted mt-4 text-center text-xs">{{ $t("auth.adminHint") }}</p>
       </VCard>
     </form>
   </div>
diff --git a/apps/admin/pages/orders.vue b/apps/admin/pages/orders.vue
index b3ddcec..4d754c5 100644
--- a/apps/admin/pages/orders.vue
+++ b/apps/admin/pages/orders.vue
@@ -29,7 +29,12 @@ function currencyExponent(code: string): number {
 }
 
 function formatTotal(order: Order): string {
-  return formatMoney(order.total_minor, order.currency, currencyExponent(order.currency), locale.value);
+  return formatMoney(
+    order.total_minor,
+    order.currency,
+    currencyExponent(order.currency),
+    locale.value,
+  );
 }
 
 function formatDate(value: string): string {
@@ -78,37 +83,60 @@ onMounted(() => {
 <template>
   <VPage :title="$t('nav.orders')">
     <template #actions>
-      <span v-if="!loading" class="text-sm text-muted">{{ $t("admin.pageOf", { page, total: totalPages }) }}</span>
+      <span v-if="!loading" class="text-muted text-sm">{{
+        $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>
+    <p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="text-danger my-2 text-sm" 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 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="bg-bg rounded 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-muted text-sm">{{ page }} / {{ totalPages }}</span>
+      <VBtn size="sm" :disabled="page >= totalPages" @click="changePage(page + 1)">{{
+        $t("common.next")
+      }}</VBtn>
     </div>
   </VPage>
 </template>
diff --git a/apps/admin/pages/points-orders.vue b/apps/admin/pages/points-orders.vue
index 907ce02..1842852 100644
--- a/apps/admin/pages/points-orders.vue
+++ b/apps/admin/pages/points-orders.vue
@@ -35,10 +35,7 @@ async function load(): Promise<void> {
   }
 }
 
-async function transition(
-  order: IntegralOrder,
-  action: "fulfill" | "cancel",
-): Promise<void> {
+async function transition(order: IntegralOrder, action: "fulfill" | "cancel"): Promise<void> {
   actionId.value = order.id;
   error.value = "";
   notice.value = "";
@@ -46,9 +43,7 @@ async function transition(
     if (action === "fulfill") await $api.admin.fulfillRedemption(order.id);
     else await $api.admin.cancelRedemption(order.id);
     notice.value =
-      action === "fulfill"
-        ? t("admin.redemptionFulfilled")
-        : t("admin.redemptionCancelled");
+      action === "fulfill" ? t("admin.redemptionFulfilled") : t("admin.redemptionCancelled");
     await load();
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : t("common.error");
@@ -62,42 +57,61 @@ onMounted(() => void load());
 
 <template>
   <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>
+    <p v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</p>
+    <p v-if="notice" class="text-muted text-sm" role="status">{{ notice }}</p>
+    <p v-if="loading" class="text-muted text-sm">{{ $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>
+    <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>
diff --git a/apps/admin/pages/points-products.vue b/apps/admin/pages/points-products.vue
index fd25551..f2bd895 100644
--- a/apps/admin/pages/points-products.vue
+++ b/apps/admin/pages/points-products.vue
@@ -128,25 +128,39 @@ onMounted(() => void load());
 
 <template>
   <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>
+    <p v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</p>
+    <p v-if="notice" class="text-muted text-sm" role="status">{{ notice }}</p>
 
     <VCard class="mb-5">
-      <h2 class="mb-4 text-base font-semibold">{{ editingId ? $t("admin.editPointsProduct") : $t("admin.newPointsProduct") }}</h2>
+      <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>
+        <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="my-2 flex items-center gap-2 text-sm">
-        <input v-model="form.recommend" class="h-4 w-4 accent-primary" type="checkbox" />
+        <input v-model="form.recommend" class="accent-primary h-4 w-4" type="checkbox" />
         {{ $t("admin.pointsRecommend") }}
       </label>
       <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" />
+        <input v-model="form.published" class="accent-primary h-4 w-4" type="checkbox" />
         {{ $t("admin.pointsPublished") }}
       </label>
       <div class="flex gap-2">
@@ -157,38 +171,51 @@ onMounted(() => void load());
       </div>
     </VCard>
 
-    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
+    <p v-if="loading" class="text-muted text-sm">{{ $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>
+    <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>
diff --git a/apps/admin/pages/shops.vue b/apps/admin/pages/shops.vue
index 896ba48..4504c20 100644
--- a/apps/admin/pages/shops.vue
+++ b/apps/admin/pages/shops.vue
@@ -98,37 +98,54 @@ onMounted(() => {
           <VInput id="shop-slug" v-model="slug" required />
         </VField>
       </div>
-      <p v-if="createError" class="my-2 text-sm text-danger" role="alert">{{ createError }}</p>
+      <p v-if="createError" class="text-danger my-2 text-sm" role="alert">{{ createError }}</p>
       <VBtn variant="primary" :disabled="creating" @click="createShop">
         {{ creating ? $t("common.loading") : $t("common.create") }}
       </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>
+    <p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="text-danger my-2 text-sm" 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>
+    <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="bg-bg rounded 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>
diff --git a/apps/admin/pages/users.vue b/apps/admin/pages/users.vue
index f25ca58..63829f1 100644
--- a/apps/admin/pages/users.vue
+++ b/apps/admin/pages/users.vue
@@ -111,66 +111,90 @@ onMounted(() => {
 <template>
   <VPage :title="$t('nav.users')">
     <template #actions>
-      <span v-if="!loading" class="text-sm text-muted">{{ $t("admin.pageOf", { page, total: totalPages }) }}</span>
+      <span v-if="!loading" class="text-muted text-sm">{{
+        $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>
+    <p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="text-danger my-2 text-sm" 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 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="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
+                    :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="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
+                    :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-muted text-sm">{{ shopName(user.shop_id) }}</span>
+                </div>
+                <p v-if="rowErrors[user.id]" class="text-danger my-1 text-xs" 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-muted text-sm">{{ page }} / {{ totalPages }}</span>
+      <VBtn size="sm" :disabled="page >= totalPages" @click="changePage(page + 1)">{{
+        $t("common.next")
+      }}</VBtn>
     </div>
   </VPage>
 </template>
diff --git a/apps/api/migrations/0017_freight_templates.sql b/apps/api/migrations/0017_freight_templates.sql
new file mode 100644
index 0000000..6b79ad3
--- /dev/null
+++ b/apps/api/migrations/0017_freight_templates.sql
@@ -0,0 +1,65 @@
+CREATE TYPE freight_pricing_method AS ENUM ('by_piece', 'by_weight');
+
+CREATE TABLE freight_templates (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    shop_id UUID NOT NULL REFERENCES shops (id) ON DELETE CASCADE,
+    name TEXT NOT NULL,
+    is_default BOOLEAN NOT NULL DEFAULT false,
+    always_free BOOLEAN NOT NULL DEFAULT false,
+    pricing_method freight_pricing_method NOT NULL DEFAULT 'by_piece',
+    first_fee_minor BIGINT NOT NULL DEFAULT 0 CHECK (first_fee_minor >= 0),
+    first_unit INT NOT NULL DEFAULT 1 CHECK (first_unit > 0),
+    additional_fee_minor BIGINT NOT NULL DEFAULT 0 CHECK (additional_fee_minor >= 0),
+    additional_unit INT NOT NULL DEFAULT 1 CHECK (additional_unit > 0),
+    free_threshold_minor BIGINT CHECK (free_threshold_minor > 0),
+    created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+-- At most one default template per shop.
+CREATE UNIQUE INDEX freight_templates_one_default
+    ON freight_templates (shop_id) WHERE is_default;
+CREATE INDEX idx_freight_templates_shop ON freight_templates (shop_id);
+
+CREATE TABLE freight_region_rules (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    template_id UUID NOT NULL REFERENCES freight_templates (id) ON DELETE CASCADE,
+    regions TEXT[] NOT NULL,
+    first_fee_minor BIGINT NOT NULL CHECK (first_fee_minor >= 0),
+    first_unit INT NOT NULL CHECK (first_unit > 0),
+    additional_fee_minor BIGINT NOT NULL CHECK (additional_fee_minor >= 0),
+    additional_unit INT NOT NULL CHECK (additional_unit > 0)
+);
+
+CREATE INDEX idx_freight_region_rules_template ON freight_region_rules (template_id);
+
+CREATE TABLE shipping_companies (
+    code TEXT PRIMARY KEY,
+    name JSONB NOT NULL,
+    active BOOLEAN NOT NULL DEFAULT true
+);
+
+INSERT INTO shipping_companies (code, name) VALUES
+    ('sf-express', '{"en": "SF Express", "zh": "顺丰速运"}'),
+    ('zto', '{"en": "ZTO Express", "zh": "中通快递"}'),
+    ('yto', '{"en": "YTO Express", "zh": "圆通速递"}'),
+    ('ems', '{"en": "EMS", "zh": "中国邮政 EMS"}'),
+    ('ups', '{"en": "UPS", "zh": "联合包裹"}'),
+    ('fedex', '{"en": "FedEx", "zh": "联邦快递"}');
+
+ALTER TABLE products
+    ADD COLUMN freight_template_id UUID REFERENCES freight_templates (id) ON DELETE SET NULL;
+
+ALTER TABLE skus
+    ADD COLUMN weight_grams INT CHECK (weight_grams > 0);
+
+ALTER TABLE orders
+    ADD COLUMN shipping_fee_minor BIGINT NOT NULL DEFAULT 0 CHECK (shipping_fee_minor >= 0);
+
+-- Checkout snapshots so later template edits never touch history.
+ALTER TABLE order_items
+    ADD COLUMN freight_template_id UUID,
+    ADD COLUMN freight_pricing_method freight_pricing_method;
+
+ALTER TABLE shipments
+    ADD COLUMN shipping_company_code TEXT REFERENCES shipping_companies (code);
diff --git a/apps/api/src/models.rs b/apps/api/src/models.rs
index 16b8571..170998e 100644
--- a/apps/api/src/models.rs
+++ b/apps/api/src/models.rs
@@ -110,6 +110,8 @@ pub struct Sku {
     pub price_minor: i64,
     pub currency: String,
     pub stock: i32,
+    /// Grams per unit for by-weight freight; null lines contribute zero weight.
+    pub weight_grams: Option<i32>,
     pub active: bool,
 }
 
@@ -175,6 +177,8 @@ pub struct Order {
     pub discount_minor: i64,
     /// Authoritative sum of completed after-sale refunds.
     pub refund_total_minor: i64,
+    /// Server-computed per-shop-order shipping fee.
+    pub shipping_fee_minor: i64,
     /// The coupon this order redeemed, if any.
     pub coupon_id: Option<Uuid>,
     /// Group-buying activity this order joined, if any.
@@ -198,6 +202,9 @@ pub struct OrderItem {
     pub qty: i32,
     /// Set when this line received flash-sale pricing.
     pub flash_sale_item_id: Option<Uuid>,
+    /// Freight template + pricing method snapshotted at checkout.
+    pub freight_template_id: Option<Uuid>,
+    pub freight_pricing_method: Option<FreightPricingMethod>,
 }
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, Type)]
@@ -230,6 +237,14 @@ impl AftersaleStatus {
     }
 }
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, Type)]
+#[sqlx(type_name = "freight_pricing_method", rename_all = "snake_case")]
+#[serde(rename_all = "snake_case")]
+pub enum FreightPricingMethod {
+    ByPiece,
+    ByWeight,
+}
+
 #[derive(Debug, Clone, Serialize, sqlx::FromRow)]
 pub struct Shipment {
     pub id: Uuid,
diff --git a/apps/api/src/modules/order/repo.rs b/apps/api/src/modules/order/repo.rs
index 6447a48..c33a107 100644
--- a/apps/api/src/modules/order/repo.rs
+++ b/apps/api/src/modules/order/repo.rs
@@ -9,10 +9,11 @@ use crate::models::{Order, OrderItem, OrderStatus};
 use super::dto::{OrderScope, OrderView};
 
 const ORDER_COLS: &str = "id, order_no, shop_id, user_id, status, currency, total_minor,
-         discount_minor, refund_total_minor, coupon_id, group_activity_id, group_id, shipping_address,
-         created_at, updated_at";
+         discount_minor, refund_total_minor, shipping_fee_minor, coupon_id, group_activity_id,
+         group_id, shipping_address, created_at, updated_at";
 const ORDER_ITEM_COLS: &str =
-    "id, order_id, sku_id, product_name, sku_code, image, unit_price_minor, qty, flash_sale_item_id";
+    "id, order_id, sku_id, product_name, sku_code, image, unit_price_minor, qty, flash_sale_item_id,
+     freight_template_id, freight_pricing_method";
 
 pub async fn attach_items(db: &PgPool, orders: Vec<Order>) -> ApiResult<Vec<OrderView>> {
     let ids: Vec<Uuid> = orders.iter().map(|o| o.id).collect();
diff --git a/apps/api/src/modules/product/dto.rs b/apps/api/src/modules/product/dto.rs
index b42b397..1d49e17 100644
--- a/apps/api/src/modules/product/dto.rs
+++ b/apps/api/src/modules/product/dto.rs
@@ -68,4 +68,5 @@ pub struct SkuBody {
     pub currency: String,
     pub stock: i32,
     pub active: Option<bool>,
+    pub weight_grams: Option<i32>,
 }
diff --git a/apps/api/src/modules/product/repo.rs b/apps/api/src/modules/product/repo.rs
index 1cfb652..db45f38 100644
--- a/apps/api/src/modules/product/repo.rs
+++ b/apps/api/src/modules/product/repo.rs
@@ -26,7 +26,7 @@ pub async fn attach_skus(
         Vec::new()
     } else if public_only {
         sqlx::query_as::<_, Sku>(
-            "SELECT id, product_id, sku_code, attributes, price_minor, currency, stock, active
+            "SELECT id, product_id, sku_code, attributes, price_minor, currency, stock, weight_grams, active
              FROM skus WHERE product_id = ANY($1) AND active = TRUE ORDER BY sku_code",
         )
         .bind(&ids)
@@ -34,7 +34,7 @@ pub async fn attach_skus(
         .await?
     } else {
         sqlx::query_as::<_, Sku>(
-            "SELECT id, product_id, sku_code, attributes, price_minor, currency, stock, active
+            "SELECT id, product_id, sku_code, attributes, price_minor, currency, stock, weight_grams, active
              FROM skus WHERE product_id = ANY($1) ORDER BY sku_code",
         )
         .bind(&ids)
diff --git a/apps/api/src/modules/product/service.rs b/apps/api/src/modules/product/service.rs
index 62a4f59..d76d38b 100644
--- a/apps/api/src/modules/product/service.rs
+++ b/apps/api/src/modules/product/service.rs
@@ -297,11 +297,11 @@ pub async fn upsert_sku(
         )));
     }
     Ok(sqlx::query_as::<_, Sku>(
-        "INSERT INTO skus (product_id, sku_code, attributes, price_minor, currency, stock, active)
-         VALUES ($1, $2, $3, $4, $5, $6, $7)
+        "INSERT INTO skus (product_id, sku_code, attributes, price_minor, currency, stock, active, weight_grams)
+         VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
          ON CONFLICT (product_id, sku_code)
-         DO UPDATE SET attributes = $3, price_minor = $4, currency = $5, stock = $6, active = $7
-         RETURNING id, product_id, sku_code, attributes, price_minor, currency, stock, active",
+         DO UPDATE SET attributes = $3, price_minor = $4, currency = $5, stock = $6, active = $7, weight_grams = $8
+         RETURNING id, product_id, sku_code, attributes, price_minor, currency, stock, weight_grams, active",
     )
     .bind(product_id)
     .bind(body.sku_code.trim())
@@ -310,6 +310,7 @@ pub async fn upsert_sku(
     .bind(&currency)
     .bind(body.stock)
     .bind(body.active.unwrap_or(true))
+    .bind(body.weight_grams)
     .fetch_one(&state.db)
     .await?)
 }
diff --git a/apps/mall/app.vue b/apps/mall/app.vue
index 18c5ce3..e1a40ec 100644
--- a/apps/mall/app.vue
+++ b/apps/mall/app.vue
@@ -11,7 +11,7 @@ onMounted(() => session.hydrate());
 </script>
 
 <template>
-  <div class="flex min-h-screen flex-col bg-bg font-sans text-text">
+  <div class="bg-bg text-text flex min-h-screen flex-col font-sans">
     <ShellTopBar />
     <ShellSiteHeader />
     <main class="flex-1">
diff --git a/apps/mall/components/PriceText.vue b/apps/mall/components/PriceText.vue
index dd512f0..fbb6f31 100644
--- a/apps/mall/components/PriceText.vue
+++ b/apps/mall/components/PriceText.vue
@@ -19,11 +19,9 @@ async function refresh(): Promise<void> {
   }
 }
 
-watch(
-  [() => props.amountMinor, () => props.currency, currency],
-  () => void refresh(),
-  { immediate: true },
-);
+watch([() => props.amountMinor, () => props.currency, currency], () => void refresh(), {
+  immediate: true,
+});
 </script>
 
 <template>
diff --git a/apps/mall/components/StatusBadge.vue b/apps/mall/components/StatusBadge.vue
index 375d6cf..7083aa3 100644
--- a/apps/mall/components/StatusBadge.vue
+++ b/apps/mall/components/StatusBadge.vue
@@ -9,7 +9,12 @@ const tone = computed<"green" | "blue" | "red" | "orange">(() => {
 });
 
 const label = computed(() => {
-  const root = props.kind === "order" ? "order.status" : props.kind === "shipment" ? "shipment.status" : "invoice.status";
+  const root =
+    props.kind === "order"
+      ? "order.status"
+      : props.kind === "shipment"
+        ? "shipment.status"
+        : "invoice.status";
   return `${root}.${props.status}`;
 });
 </script>
diff --git a/apps/mall/components/shell/CategoryMenu.vue b/apps/mall/components/shell/CategoryMenu.vue
index 08fe61c..ecacc9e 100644
--- a/apps/mall/components/shell/CategoryMenu.vue
+++ b/apps/mall/components/shell/CategoryMenu.vue
@@ -66,7 +66,8 @@ defineExpose({ open });
           :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>
+          >{{ pick(g.cat.name, locale) }}</NuxtLink
+        >
         <span class="mt-0.5 block">
           <NuxtLink
             v-for="cc in g.children.slice(0, 3)"
@@ -74,24 +75,31 @@ defineExpose({ open });
             :to="`/search?category=${cc.cat.id}`"
             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>
+            >{{ pick(cc.cat.name, locale) }}</NuxtLink
+          >
         </span>
       </li>
     </ul>
 
     <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">
+      <div
+        v-for="cc in active.children"
+        :key="cc.cat.id"
+        class="border-border flex border-b 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>
+          class="text-text w-[120px] shrink-0 text-[14px] font-semibold 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>
+            class="text-muted hover:text-primary mr-[18px] mb-2 inline-block text-[13px] no-underline transition-colors"
+            >{{ pick(gc.name, locale) }}</NuxtLink
+          >
         </div>
       </div>
     </div>
diff --git a/apps/mall/components/shell/SiteFooter.vue b/apps/mall/components/shell/SiteFooter.vue
index 089c8d7..2811da5 100644
--- a/apps/mall/components/shell/SiteFooter.vue
+++ b/apps/mall/components/shell/SiteFooter.vue
@@ -19,24 +19,28 @@ onBeforeUnmount(() => window.removeEventListener("scroll", onScroll));
 
 <template>
   <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">
+    <div class="max-w-mall mx-auto px-4">
+      <ul
+        class="border-border text-text mx-auto mt-10 flex w-full max-w-[720px] list-none justify-between border-t pt-10 text-sm"
+      >
         <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="pb-5 pt-[30px] text-[12px] leading-7 text-muted">
+      <div class="text-muted pt-[30px] pb-5 text-[12px] leading-7">
         <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="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"
+      class="border-border bg-surface text-muted hover:border-primary hover:bg-primary fixed right-10 bottom-[60px] z-[800] h-11 w-11 rounded-md border text-lg transition-colors hover:text-white"
       type="button"
       :aria-label="t('shell.backToTop')"
       @click="toTop"
-    >↑</button>
+    >
+      ↑
+    </button>
   </footer>
 </template>
diff --git a/apps/mall/components/shell/SiteHeader.vue b/apps/mall/components/shell/SiteHeader.vue
index 7de19ff..12eee2d 100644
--- a/apps/mall/components/shell/SiteHeader.vue
+++ b/apps/mall/components/shell/SiteHeader.vue
@@ -39,38 +39,52 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
 
 <template>
   <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="max-w-mall mx-auto flex items-center gap-10 px-4 py-6">
+      <NuxtLink
+        to="/"
+        class="text-primary text-[34px] leading-none font-extrabold tracking-[1px] 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"
+            class="border-border bg-surface text-text focus:border-primary h-[38px] min-w-0 flex-1 border border-r-0 px-3 text-[12px] outline-none"
             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"
+            class="border-border bg-surface text-muted hover:bg-primary flex h-[38px] w-[38px] items-center justify-center border transition-colors 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" />
+              <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">
+        <div class="border-border ml-7 flex h-[38px] items-center gap-5 border px-5 text-[12px]">
+          <NuxtLink
+            to="/user"
+            class="text-muted hover:text-primary relative no-underline transition-colors"
+            >{{ t("shell.myMall") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/cart"
+            class="text-muted hover:text-primary relative no-underline transition-colors"
+          >
             {{ t("shell.myCart") }}
             <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>
+              class="bg-primary absolute -top-3 -right-3 rounded-sm px-1 text-[11px] leading-4 text-white"
+              >{{ cart.count }}</span
+            >
           </NuxtLink>
         </div>
       </div>
@@ -79,7 +93,7 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
         <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"
+          class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 h-[30px] min-w-[76px] rounded-md border px-2 text-[12px] focus:outline-2"
           @change="currency = ($event.target as HTMLSelectElement).value"
         >
           <option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
@@ -87,7 +101,7 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
         <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"
+          class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 h-[30px] min-w-[76px] rounded-md border px-2 text-[12px] focus:outline-2"
           @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>
@@ -96,9 +110,9 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
     </div>
 
     <nav class="h-10 bg-[#2d2d2d] text-sm leading-10 text-white">
-      <div class="mx-auto flex max-w-mall px-4">
+      <div class="max-w-mall mx-auto flex px-4">
         <div
-          class="relative w-[240px] cursor-pointer bg-primary pl-[15px] font-medium"
+          class="bg-primary relative w-[240px] cursor-pointer pl-[15px] font-medium"
           @mouseenter="menuOpen = true"
           @mouseleave="menuOpen = false"
         >
@@ -106,12 +120,48 @@ const showMenu = computed(() => menuOpen.value && !isHome.value);
           <ShellCategoryMenu v-show="showMenu" />
         </div>
         <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>
+          <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>
diff --git a/apps/mall/components/shell/TopBar.vue b/apps/mall/components/shell/TopBar.vue
index 55dfb15..e821566 100644
--- a/apps/mall/components/shell/TopBar.vue
+++ b/apps/mall/components/shell/TopBar.vue
@@ -4,18 +4,26 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <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">
+  <div class="border-border text-muted h-[30px] border-b bg-[#f9f9f9] text-[12px] leading-[30px]">
+    <div class="max-w-mall mx-auto flex h-full 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>
+        <li>
+          <NuxtLink to="/" class="hover:text-primary px-1">{{ t("shell.officialSite") }}</NuxtLink>
+        </li>
+        <li class="text-border px-1">|</li>
+        <li>
+          <NuxtLink to="/" class="hover:text-primary px-1">{{ t("shell.mallHome") }}</NuxtLink>
+        </li>
+        <li class="text-border px-1">|</li>
+        <li>
+          <NuxtLink to="/" class="hover:text-primary px-1">{{ t("shell.contact") }}</NuxtLink>
+        </li>
+        <li class="text-border px-1">|</li>
+        <li>
+          <NuxtLink to="/" class="hover:text-primary px-1">{{ t("shell.about") }}</NuxtLink>
+        </li>
+        <li class="text-border px-1">|</li>
+        <li class="text-primary px-1">{{ t("shell.city") }}</li>
       </ul>
       <ul class="flex items-center">
         <!-- The token lives in localStorage, so the server cannot know whether
@@ -26,28 +34,60 @@ const { t } = useI18n();
           <template v-if="session.isLoggedIn">
             <li class="px-1">
               {{ t("shell.welcome") }}
-              <NuxtLink to="/user" class="text-primary hover:text-primary-hover">{{ session.user?.display_name }}</NuxtLink>
+              <NuxtLink to="/user" class="text-primary hover:text-primary-hover">{{
+                session.user?.display_name
+              }}</NuxtLink>
+            </li>
+            <li class="text-border px-1">|</li>
+            <li>
+              <NuxtLink to="/user" class="hover:text-primary px-1">{{
+                t("shell.userCenter")
+              }}</NuxtLink>
+            </li>
+            <li class="text-border px-1">|</li>
+            <li class="hover:text-primary cursor-pointer px-1" @click="session.logout()">
+              {{ t("shell.logout") }}
             </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="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>
+            <li>
+              <NuxtLink to="/login" class="text-primary hover:text-primary-hover px-1">{{
+                t("shell.login")
+              }}</NuxtLink>
+            </li>
+            <li>
+              <NuxtLink to="/register" class="hover:text-primary px-1">{{
+                t("shell.register")
+              }}</NuxtLink>
+            </li>
           </template>
           <template #fallback>
-            <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>
+            <li>
+              <NuxtLink to="/login" class="text-primary hover:text-primary-hover px-1">{{
+                t("shell.login")
+              }}</NuxtLink>
+            </li>
+            <li>
+              <NuxtLink to="/register" class="hover:text-primary px-1">{{
+                t("shell.register")
+              }}</NuxtLink>
+            </li>
           </template>
         </ClientOnly>
-        <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>
+        <li class="text-border px-1">|</li>
+        <li>
+          <NuxtLink to="/stores" class="text-primary hover:text-primary-hover px-1">{{
+            t("shell.sellerJoin")
+          }}</NuxtLink>
+        </li>
+        <li class="text-border px-1">|</li>
+        <li>
+          <NuxtLink to="/" class="hover:text-primary px-1">{{ t("shell.mobile") }}</NuxtLink>
+        </li>
+        <li class="text-border px-1">|</li>
+        <li>
+          <NuxtLink to="/" class="hover:text-primary px-1">{{ t("shell.appDownload") }}</NuxtLink>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/apps/mall/components/ui/Breadcrumb.vue b/apps/mall/components/ui/Breadcrumb.vue
index 5886c7d..66b99ef 100644
--- a/apps/mall/components/ui/Breadcrumb.vue
+++ b/apps/mall/components/ui/Breadcrumb.vue
@@ -3,11 +3,16 @@ defineProps<{ items: { label: string; to?: string }[] }>();
 </script>
 
 <template>
-  <nav aria-label="breadcrumb" class="mx-auto my-5 max-w-mall px-4 text-[13px] text-muted">
+  <nav aria-label="breadcrumb" class="max-w-mall text-muted mx-auto my-5 px-4 text-[13px]">
     <template v-for="(item, i) in items" :key="i">
-      <NuxtLink v-if="item.to" :to="item.to" class="no-underline transition-colors hover:text-primary">{{ item.label }}</NuxtLink>
+      <NuxtLink
+        v-if="item.to"
+        :to="item.to"
+        class="hover:text-primary no-underline transition-colors"
+        >{{ 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>
+      <span v-if="i < items.length - 1" class="text-muted/60 mx-2">/</span>
     </template>
   </nav>
 </template>
diff --git a/apps/mall/components/ui/Carousel.vue b/apps/mall/components/ui/Carousel.vue
index 0592db3..0b2f138 100644
--- a/apps/mall/components/ui/Carousel.vue
+++ b/apps/mall/components/ui/Carousel.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ images: { image: string; url?: string }[]; height?: number; interval?: number }>(), {
-  height: 450,
-  interval: 4000,
-});
+const props = withDefaults(
+  defineProps<{ images: { image: string; url?: string }[]; height?: number; interval?: number }>(),
+  {
+    height: 450,
+    interval: 4000,
+  },
+);
 
 const index = ref(0);
 let timer: ReturnType<typeof setInterval> | null = null;
@@ -34,7 +37,10 @@ onBeforeUnmount(() => {
       class="block h-full w-full bg-cover bg-center"
       :style="{ backgroundImage: `url(${img.image})` }"
     />
-    <div v-if="images.length > 1" class="absolute bottom-[14px] left-0 right-0 flex justify-center gap-2">
+    <div
+      v-if="images.length > 1"
+      class="absolute right-0 bottom-[14px] left-0 flex justify-center gap-2"
+    >
       <button
         v-for="(_, i) in images"
         :key="i"
diff --git a/apps/mall/components/ui/EmptyState.vue b/apps/mall/components/ui/EmptyState.vue
index 14eb390..38a296b 100644
--- a/apps/mall/components/ui/EmptyState.vue
+++ b/apps/mall/components/ui/EmptyState.vue
@@ -3,7 +3,7 @@ withDefaults(defineProps<{ text?: string }>(), { text: "" });
 </script>
 
 <template>
-  <div class="py-[60px] text-center text-muted/70">
+  <div class="text-muted/70 py-[60px] text-center">
     <div class="mb-2.5 text-[40px] leading-none">∅</div>
     <p class="m-0">{{ text || $t("common.empty") }}</p>
   </div>
diff --git a/apps/mall/components/ui/Modal.vue b/apps/mall/components/ui/Modal.vue
index bc494cb..684ec45 100644
--- a/apps/mall/components/ui/Modal.vue
+++ b/apps/mall/components/ui/Modal.vue
@@ -5,21 +5,30 @@ const emit = defineEmits<{ close: [] }>();
 
 <template>
   <Teleport to="body">
-    <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]">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-[900] flex items-center justify-center bg-black/40"
+      @click.self="emit('close')"
+    >
+      <div class="bg-surface max-w-[720px] min-w-[420px] rounded-md shadow-lg">
+        <header
+          v-if="title"
+          class="border-border flex items-center justify-between border-b px-5 py-3.5 text-[15px]"
+        >
           <span>{{ title }}</span>
           <button
             type="button"
-            class="border-0 bg-transparent text-[20px] text-muted transition-colors hover:text-primary"
+            class="text-muted hover:text-primary border-0 bg-transparent text-[20px] transition-colors"
             :aria-label="$t('common.cancel')"
             @click="emit('close')"
-          >×</button>
+          >
+            ×
+          </button>
         </header>
         <div class="p-5">
           <slot />
         </div>
-        <footer v-if="$slots.footer" class="border-t border-border px-5 py-3 text-right">
+        <footer v-if="$slots.footer" class="border-border border-t px-5 py-3 text-right">
           <slot name="footer" />
         </footer>
       </div>
diff --git a/apps/mall/components/ui/Pagination.vue b/apps/mall/components/ui/Pagination.vue
index 77a08dc..9adce38 100644
--- a/apps/mall/components/ui/Pagination.vue
+++ b/apps/mall/components/ui/Pagination.vue
@@ -21,23 +21,33 @@ function go(p: number): void {
   <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"
+      class="border-border bg-surface h-[34px] min-w-[34px] rounded-sm border px-2 text-[13px] transition-colors disabled:cursor-not-allowed disabled:opacity-40"
       :disabled="page <= 1"
       @click="go(page - 1)"
-    >{{ $t("common.prev") }}</button>
+    >
+      {{ $t("common.prev") }}
+    </button>
     <button
       v-for="p in window_"
       :key="p"
       type="button"
-      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'"
+      class="border-border h-[34px] min-w-[34px] rounded-sm 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>
+    >
+      {{ p }}
+    </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"
+      class="border-border bg-surface h-[34px] min-w-[34px] rounded-sm border px-2 text-[13px] transition-colors disabled:cursor-not-allowed disabled:opacity-40"
       :disabled="page >= pages"
       @click="go(page + 1)"
-    >{{ $t("common.next") }}</button>
+    >
+      {{ $t("common.next") }}
+    </button>
   </nav>
 </template>
diff --git a/apps/mall/components/ui/ProductCard.vue b/apps/mall/components/ui/ProductCard.vue
index b669ad3..fbe70d0 100644
--- a/apps/mall/components/ui/ProductCard.vue
+++ b/apps/mall/components/ui/ProductCard.vue
@@ -14,9 +14,9 @@ const sold = computed(() => props.product.sold_count);
 <template>
   <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"
+    class="group block h-full text-inherit no-underline 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">
+    <VCard :padded="false" class="border-border bg-surface h-full overflow-hidden border">
       <div class="flex items-center justify-center p-4">
         <img
           :src="product.images[0] || '/mock/product-1.svg'"
@@ -26,21 +26,27 @@ const sold = computed(() => props.product.sold_count);
         />
       </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">
+        <p
+          class="group-hover:text-primary m-0 h-[37px] overflow-hidden text-[13px] leading-[1.4] transition-colors"
+        >
           {{ pick(product.name, locale) }}
         </p>
-        <p class="m-0 mb-2 mt-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] text-muted/70">
+        <p
+          class="text-muted/70 m-0 mt-1 mb-2 overflow-hidden text-[12px] text-ellipsis whitespace-nowrap"
+        >
           {{ pick(product.description, locale) }}
         </p>
         <p class="m-0">
-          <span v-if="sku" class="mr-2 text-[16px] font-bold text-primary">
+          <span v-if="sku" class="text-primary mr-2 text-[16px] font-bold">
             <PriceText :amount-minor="sku.price_minor" :currency="sku.currency" />
           </span>
-          <s v-if="sku" class="text-[12px] text-muted/60">
+          <s v-if="sku" class="text-muted/60 text-[12px]">
             <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>
+        <p class="text-muted/70 m-0 mt-1.5 text-[12px]">
+          {{ $t("product.salesCount", { n: sold }) }}
+        </p>
       </div>
     </VCard>
   </NuxtLink>
diff --git a/apps/mall/components/ui/QtyStepper.vue b/apps/mall/components/ui/QtyStepper.vue
index 66e9ac6..4ff0111 100644
--- a/apps/mall/components/ui/QtyStepper.vue
+++ b/apps/mall/components/ui/QtyStepper.vue
@@ -9,26 +9,30 @@ function set(v: number): void {
 </script>
 
 <template>
-  <div class="inline-flex overflow-hidden rounded-md border border-border">
+  <div class="border-border inline-flex overflow-hidden rounded-md 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"
+      class="bg-bg hover:text-primary h-8 w-[30px] border-0 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
       :disabled="modelValue <= 1"
       @click="set(modelValue - 1)"
-    >−</button>
+    >
+      −
+    </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"
+      class="border-border bg-surface text-text focus:border-primary h-8 w-12 [appearance:textfield] border-x text-center text-[13px] outline-none"
       @change="set(Number(($event.target as HTMLInputElement).value))"
     />
     <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"
+      class="bg-bg hover:text-primary h-8 w-[30px] border-0 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
       :disabled="modelValue >= max"
       @click="set(modelValue + 1)"
-    >+</button>
+    >
+      +
+    </button>
   </div>
 </template>
diff --git a/apps/mall/components/ui/StepBar.vue b/apps/mall/components/ui/StepBar.vue
index b972d48..54841fe 100644
--- a/apps/mall/components/ui/StepBar.vue
+++ b/apps/mall/components/ui/StepBar.vue
@@ -3,17 +3,18 @@ defineProps<{ steps: string[]; active: number }>();
 </script>
 
 <template>
-  <ol class="mb-5 flex list-none border border-border bg-bg py-3.5">
+  <ol class="border-border bg-bg mb-5 flex list-none border 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' : ''"
+      class="text-muted/70 flex-1 text-center text-[13px]"
+      :class="i === active ? 'text-primary font-semibold' : ''"
     >
       <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>
+        >{{ i + 1 }}</span
+      >
       <span>{{ s }}</span>
     </li>
   </ol>
diff --git a/apps/mall/components/ui/Tabs.vue b/apps/mall/components/ui/Tabs.vue
index 4c23936..da9d853 100644
--- a/apps/mall/components/ui/Tabs.vue
+++ b/apps/mall/components/ui/Tabs.vue
@@ -5,15 +5,21 @@ const emit = defineEmits<{ "update:modelValue": [key: string] }>();
 
 <template>
   <div>
-    <div class="flex border-b border-border">
+    <div class="border-border flex border-b">
       <button
         v-for="tab in tabs"
         :key="tab.key"
         type="button"
-        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'"
+        class="text-muted border-0 border-b-2 border-transparent bg-transparent px-6 py-3 text-sm transition-colors"
+        :class="
+          tab.key === modelValue
+            ? 'border-primary text-primary font-semibold'
+            : 'hover:text-primary'
+        "
         @click="emit('update:modelValue', tab.key)"
-      >{{ tab.label }}</button>
+      >
+        {{ tab.label }}
+      </button>
     </div>
     <div class="py-5">
       <slot :active="modelValue" />
diff --git a/apps/mall/composables/usePrice.ts b/apps/mall/composables/usePrice.ts
index 0fa9a12..bc1b866 100644
--- a/apps/mall/composables/usePrice.ts
+++ b/apps/mall/composables/usePrice.ts
@@ -12,12 +12,15 @@ export function usePrice() {
   async function ensureCurrencies(): Promise<Currency[]> {
     if (currencies.value.length > 0) return currencies.value;
     if (!currencyRequest.value) {
-      currencyRequest.value = $api.listCurrencies().then((list) => {
-        currencies.value = list;
-        return list;
-      }).finally(() => {
-        currencyRequest.value = null;
-      });
+      currencyRequest.value = $api
+        .listCurrencies()
+        .then((list) => {
+          currencies.value = list;
+          return list;
+        })
+        .finally(() => {
+          currencyRequest.value = null;
+        });
     }
     return currencyRequest.value;
   }
@@ -26,7 +29,11 @@ export function usePrice() {
     return currencies.value.find((item) => item.code === code)?.exponent ?? 2;
   }
 
-  async function convertAmount(amountMinor: number, from: string, to = currency.value): Promise<number> {
+  async function convertAmount(
+    amountMinor: number,
+    from: string,
+    to = currency.value,
+  ): Promise<number> {
     if (from === to) return amountMinor;
     const key = `${amountMinor}:${from}:${to}`;
     const cached = cache.value.get(key);
@@ -36,7 +43,11 @@ export function usePrice() {
     return converted.amount_minor;
   }
 
-  async function formatPrice(amountMinor: number, from: string, to = currency.value): Promise<string> {
+  async function formatPrice(
+    amountMinor: number,
+    from: string,
+    to = currency.value,
+  ): Promise<string> {
     await ensureCurrencies();
     const amount = await convertAmount(amountMinor, from, to);
     return formatMoney(amount, to, exponentFor(to), locale.value);
diff --git a/apps/mall/locales-extra.ts b/apps/mall/locales-extra.ts
index d815624..bf2fcd5 100644
--- a/apps/mall/locales-extra.ts
+++ b/apps/mall/locales-extra.ts
@@ -19,9 +19,10 @@ function deepMerge<T extends Tree>(base: T, extra: Tree): T {
   const out: Tree = { ...base };
   for (const [k, v] of Object.entries(extra)) {
     const b = out[k];
-    out[k] = b && v && typeof b === "object" && typeof v === "object"
-      ? deepMerge(b as Tree, v as Tree)
-      : v;
+    out[k] =
+      b && v && typeof b === "object" && typeof v === "object"
+        ? deepMerge(b as Tree, v as Tree)
+        : v;
   }
   return out as T;
 }
diff --git a/apps/mall/locales/search.ts b/apps/mall/locales/search.ts
index 5d1e963..2428d03 100644
--- a/apps/mall/locales/search.ts
+++ b/apps/mall/locales/search.ts
@@ -21,7 +21,7 @@ export default {
   zh: {
     search: {
       home: "首页",
-      searchResults: '搜索 “{keyword}” 结果列表',
+      searchResults: "搜索 “{keyword}” 结果列表",
       productList: "商品列表",
       category: "商品分类",
       all: "全部",
diff --git a/apps/mall/mock/api.ts b/apps/mall/mock/api.ts
index 69b0038..27d6ea9 100644
--- a/apps/mall/mock/api.ts
+++ b/apps/mall/mock/api.ts
@@ -103,9 +103,20 @@ const STORAGE_KEY = "vmall.mock.state.v5";
 
 type PersistedState = Pick<
   MockState,
-  "cart" | "orders" | "shipments" | "invoices" | "addresses" | "favorites" |
-  "aftersales" | "aftersaleMessages" | "orderSeq" | "invoiceSeq" | "addressSeq" |
-  "favoriteSeq" | "aftersaleSeq" | "aftersaleMessageSeq"
+  | "cart"
+  | "orders"
+  | "shipments"
+  | "invoices"
+  | "addresses"
+  | "favorites"
+  | "aftersales"
+  | "aftersaleMessages"
+  | "orderSeq"
+  | "invoiceSeq"
+  | "addressSeq"
+  | "favoriteSeq"
+  | "aftersaleSeq"
+  | "aftersaleMessageSeq"
 >;
 
 // Load cart/order session state persisted by a previous page load (client only).
@@ -123,7 +134,8 @@ function loadPersisted(): PersistedState | null {
     if (!Array.isArray(p.addresses) || typeof p.addressSeq !== "number") return null;
     if (!Array.isArray(p.favorites) || typeof p.favoriteSeq !== "number") return null;
     if (!Array.isArray(p.aftersales) || !Array.isArray(p.aftersaleMessages)) return null;
-    if (typeof p.aftersaleSeq !== "number" || typeof p.aftersaleMessageSeq !== "number") return null;
+    if (typeof p.aftersaleSeq !== "number" || typeof p.aftersaleMessageSeq !== "number")
+      return null;
     return p as PersistedState;
   } catch {
     return null;
@@ -337,48 +349,100 @@ function seedAftersales(orders: Order[]): Aftersale[] {
   const approved = item("o1", "o1-it2");
   const refunded = item("o2", "o2-it1");
   const rejected = item("o2", "o2-it2");
-  if (pending) rows.push({
-    id: "as-demo-pending", order_id: pending.order.id, order_item_id: pending.line.id,
-    shop_id: pending.order.shop_id, user_id: MOCK_USER.id, kind: "refund_only", status: "pending",
-    reason: { en: "The item arrived with a visible issue.", zh: "商品到货后发现明显问题。" },
-    amount_minor: Math.min(500, pending.line.unit_price_minor * pending.line.qty), currency: pending.order.currency,
-    evidence: ["https://example.com/aftersale/demo-evidence.jpg"], reopened: false,
-    return_carrier: null, return_tracking_no: null, created_at: "2026-09-10T12:00:00.000Z", updated_at: "2026-09-10T12:00:00.000Z",
-  });
-  if (approved) rows.push({
-    id: "as-demo-approved", order_id: approved.order.id, order_item_id: approved.line.id,
-    shop_id: approved.order.shop_id, user_id: MOCK_USER.id, kind: "return_refund", status: "approved",
-    reason: { en: "The item needs to be returned.", zh: "商品需要退回。" },
-    amount_minor: approved.line.unit_price_minor * approved.line.qty, currency: approved.order.currency,
-    evidence: [], reopened: false, return_carrier: null, return_tracking_no: null,
-    created_at: "2026-09-10T13:00:00.000Z", updated_at: "2026-09-11T09:00:00.000Z",
-  });
-  if (refunded) rows.push({
-    id: "as-demo-refunded", order_id: refunded.order.id, order_item_id: refunded.line.id,
-    shop_id: refunded.order.shop_id, user_id: MOCK_USER.id, kind: "refund_only", status: "refunded",
-    reason: { en: "The product did not match the listing.", zh: "商品与描述不符。" },
-    amount_minor: refunded.line.unit_price_minor * refunded.line.qty, currency: refunded.order.currency,
-    evidence: [], reopened: false, return_carrier: null, return_tracking_no: null,
-    created_at: "2026-09-12T17:00:00.000Z", updated_at: "2026-09-14T09:00:00.000Z",
-  });
-  if (rejected) rows.push({
-    id: "as-demo-rejected", order_id: rejected.order.id, order_item_id: rejected.line.id,
-    shop_id: rejected.order.shop_id, user_id: MOCK_USER.id, kind: "return_refund", status: "rejected",
-    reason: { en: "Please review this return request.", zh: "请重新审核本次退货申请。" },
-    amount_minor: rejected.line.unit_price_minor * rejected.line.qty, currency: rejected.order.currency,
-    evidence: [], reopened: false, return_carrier: null, return_tracking_no: null,
-    created_at: "2026-09-12T18:00:00.000Z", updated_at: "2026-09-13T09:00:00.000Z",
-  });
+  if (pending)
+    rows.push({
+      id: "as-demo-pending",
+      order_id: pending.order.id,
+      order_item_id: pending.line.id,
+      shop_id: pending.order.shop_id,
+      user_id: MOCK_USER.id,
+      kind: "refund_only",
+      status: "pending",
+      reason: { en: "The item arrived with a visible issue.", zh: "商品到货后发现明显问题。" },
+      amount_minor: Math.min(500, pending.line.unit_price_minor * pending.line.qty),
+      currency: pending.order.currency,
+      evidence: ["https://example.com/aftersale/demo-evidence.jpg"],
+      reopened: false,
+      return_carrier: null,
+      return_tracking_no: null,
+      created_at: "2026-09-10T12:00:00.000Z",
+      updated_at: "2026-09-10T12:00:00.000Z",
+    });
+  if (approved)
+    rows.push({
+      id: "as-demo-approved",
+      order_id: approved.order.id,
+      order_item_id: approved.line.id,
+      shop_id: approved.order.shop_id,
+      user_id: MOCK_USER.id,
+      kind: "return_refund",
+      status: "approved",
+      reason: { en: "The item needs to be returned.", zh: "商品需要退回。" },
+      amount_minor: approved.line.unit_price_minor * approved.line.qty,
+      currency: approved.order.currency,
+      evidence: [],
+      reopened: false,
+      return_carrier: null,
+      return_tracking_no: null,
+      created_at: "2026-09-10T13:00:00.000Z",
+      updated_at: "2026-09-11T09:00:00.000Z",
+    });
+  if (refunded)
+    rows.push({
+      id: "as-demo-refunded",
+      order_id: refunded.order.id,
+      order_item_id: refunded.line.id,
+      shop_id: refunded.order.shop_id,
+      user_id: MOCK_USER.id,
+      kind: "refund_only",
+      status: "refunded",
+      reason: { en: "The product did not match the listing.", zh: "商品与描述不符。" },
+      amount_minor: refunded.line.unit_price_minor * refunded.line.qty,
+      currency: refunded.order.currency,
+      evidence: [],
+      reopened: false,
+      return_carrier: null,
+      return_tracking_no: null,
+      created_at: "2026-09-12T17:00:00.000Z",
+      updated_at: "2026-09-14T09:00:00.000Z",
+    });
+  if (rejected)
+    rows.push({
+      id: "as-demo-rejected",
+      order_id: rejected.order.id,
+      order_item_id: rejected.line.id,
+      shop_id: rejected.order.shop_id,
+      user_id: MOCK_USER.id,
+      kind: "return_refund",
+      status: "rejected",
+      reason: { en: "Please review this return request.", zh: "请重新审核本次退货申请。" },
+      amount_minor: rejected.line.unit_price_minor * rejected.line.qty,
+      currency: rejected.order.currency,
+      evidence: [],
+      reopened: false,
+      return_carrier: null,
+      return_tracking_no: null,
+      created_at: "2026-09-12T18:00:00.000Z",
+      updated_at: "2026-09-13T09:00:00.000Z",
+    });
   return rows;
 }
 
 function seedAftersaleMessages(aftersales: Aftersale[]): AftersaleMessage[] {
   const refunded = aftersales.find((row) => row.id === "as-demo-refunded");
-  return refunded ? [{
-    id: "asm-demo-1", aftersale_id: refunded.id, author_role: "buyer", author_id: MOCK_USER.id,
-    content: { en: "Please help review this refund.", zh: "请帮忙审核退款。" }, evidence: [],
-    created_at: "2026-09-12T17:30:00.000Z",
-  }] : [];
+  return refunded
+    ? [
+        {
+          id: "asm-demo-1",
+          aftersale_id: refunded.id,
+          author_role: "buyer",
+          author_id: MOCK_USER.id,
+          content: { en: "Please help review this refund.", zh: "请帮忙审核退款。" },
+          evidence: [],
+          created_at: "2026-09-12T17:30:00.000Z",
+        },
+      ]
+    : [];
 }
 
 function initialState(): MockState {
@@ -438,7 +502,11 @@ function initialState(): MockState {
 }
 
 function unsupported(): never {
-  throw new ApiError(501, "MOCK_UNSUPPORTED", "This admin/shop endpoint is not part of the mall mock.");
+  throw new ApiError(
+    501,
+    "MOCK_UNSUPPORTED",
+    "This admin/shop endpoint is not part of the mall mock.",
+  );
 }
 
 type MockStoreRecord = NonNullable<ReturnType<typeof storeById>>;
@@ -463,7 +531,6 @@ function toShopProfile(store: MockStoreRecord): ShopProfile {
   };
 }
 
-
 function skuIndex(): Record<string, { product: Product; skuId: string }> {
   const index: Record<string, { product: Product; skuId: string }> = {};
   for (const p of searchMockProducts({ perPage: 1000 }).items) {
@@ -518,7 +585,9 @@ export function createMockApi(): ApiClient {
     return row;
   }
 
-  function findOrderItem(orderItemId: string): { order: Order; item: Order["items"][number] } | null {
+  function findOrderItem(
+    orderItemId: string,
+  ): { order: Order; item: Order["items"][number] } | null {
     for (const order of state.orders) {
       const item = order.items.find((entry) => entry.id === orderItemId);
       if (item) return { order, item };
@@ -546,7 +615,8 @@ export function createMockApi(): ApiClient {
   function aftersaleDetail(id: string): AftersaleDetail {
     const row = findAftersale(id);
     const found = findOrderItem(row.order_item_id);
-    if (!found || found.order.id !== row.order_id) throw new ApiError(404, "NOT_FOUND", "Aftersale item not found");
+    if (!found || found.order.id !== row.order_id)
+      throw new ApiError(404, "NOT_FOUND", "Aftersale item not found");
     return {
       ...copyAftersale(row),
       item: {
@@ -559,8 +629,15 @@ export function createMockApi(): ApiClient {
       messages: state.aftersaleMessages
         .filter((message) => message.aftersale_id === row.id)
         .sort((a, b) => a.created_at.localeCompare(b.created_at))
-        .map((message) => ({ ...message, content: { ...message.content }, evidence: [...message.evidence] })),
-      remaining_refundable_minor: remainingFor(row.order_item_id, found.item.unit_price_minor * found.item.qty),
+        .map((message) => ({
+          ...message,
+          content: { ...message.content },
+          evidence: [...message.evidence],
+        })),
+      remaining_refundable_minor: remainingFor(
+        row.order_item_id,
+        found.item.unit_price_minor * found.item.qty,
+      ),
     };
   }
 
@@ -608,10 +685,12 @@ export function createMockApi(): ApiClient {
       const entry = skuIndex()[skuId];
       if (!entry) return Promise.reject(new ApiError(404, "NOT_FOUND", "SKU not found"));
       const sku = entry.product.skus?.find((s) => s.id === skuId);
-      if (!sku || !sku.active) return Promise.reject(new ApiError(400, "SKU_INACTIVE", "SKU is not available"));
+      if (!sku || !sku.active)
+        return Promise.reject(new ApiError(400, "SKU_INACTIVE", "SKU is not available"));
       const existing = state.cart.find((i) => i.sku_id === skuId);
       const nextQty = (existing?.qty ?? 0) + qty;
-      if (nextQty > sku.stock) return Promise.reject(new ApiError(400, "OUT_OF_STOCK", "Not enough stock"));
+      if (nextQty > sku.stock)
+        return Promise.reject(new ApiError(400, "OUT_OF_STOCK", "Not enough stock"));
       if (existing) existing.qty = nextQty;
       else {
         state.cart.push({
@@ -761,7 +840,9 @@ export function createMockApi(): ApiClient {
       const order = state.orders.find((o) => o.id === id);
       if (!order) return Promise.reject(new ApiError(404, "NOT_FOUND", "Order not found"));
       if (order.status !== "pending_payment") {
-        return Promise.reject(new ApiError(409, "INVALID_STATE", "Only unpaid orders can be cancelled"));
+        return Promise.reject(
+          new ApiError(409, "INVALID_STATE", "Only unpaid orders can be cancelled"),
+        );
       }
       order.status = "cancelled";
       const coupon = state.coupons.find((c) => c.order_id === order.id);
@@ -833,15 +914,26 @@ export function createMockApi(): ApiClient {
         throw new ApiError(400, "BAD_REQUEST", "amount_minor must be positive");
       }
       const evidence = (body.evidence ?? []).map((url) => url.trim());
-      if (evidence.some((url) => !url)) throw new ApiError(400, "BAD_REQUEST", "evidence URLs must be non-empty");
+      if (evidence.some((url) => !url))
+        throw new ApiError(400, "BAD_REQUEST", "evidence URLs must be non-empty");
       const found = findOrderItem(body.order_item_id);
-      if (!found || found.order.user_id !== MOCK_USER.id) throw new ApiError(404, "NOT_FOUND", "order item");
-      if (!eligibleOrder(found.order)) throw new ApiError(409, "CONFLICT", "order item is not eligible for after-sale");
-      const active = state.aftersales.some((row) => row.order_item_id === body.order_item_id &&
-        ["pending", "approved", "buyer_shipping", "merchant_confirmed"].includes(row.status));
-      if (active) throw new ApiError(409, "CONFLICT", "an active aftersale already exists for this item");
-      const remaining = remainingFor(body.order_item_id, found.item.unit_price_minor * found.item.qty);
-      if (body.amount_minor > remaining) throw new ApiError(409, "CONFLICT", "amount exceeds the remaining refundable balance");
+      if (!found || found.order.user_id !== MOCK_USER.id)
+        throw new ApiError(404, "NOT_FOUND", "order item");
+      if (!eligibleOrder(found.order))
+        throw new ApiError(409, "CONFLICT", "order item is not eligible for after-sale");
+      const active = state.aftersales.some(
+        (row) =>
+          row.order_item_id === body.order_item_id &&
+          ["pending", "approved", "buyer_shipping", "merchant_confirmed"].includes(row.status),
+      );
+      if (active)
+        throw new ApiError(409, "CONFLICT", "an active aftersale already exists for this item");
+      const remaining = remainingFor(
+        body.order_item_id,
+        found.item.unit_price_minor * found.item.qty,
+      );
+      if (body.amount_minor > remaining)
+        throw new ApiError(409, "CONFLICT", "amount exceeds the remaining refundable balance");
       state.aftersaleSeq += 1;
       const now = new Date().toISOString();
       const row: Aftersale = {
@@ -867,10 +959,11 @@ export function createMockApi(): ApiClient {
       return aftersaleDetail(row.id);
     },
 
-    listMyAftersales: async (): Promise<Aftersale[]> => state.aftersales
-      .filter((row) => row.user_id === MOCK_USER.id)
-      .sort((a, b) => b.created_at.localeCompare(a.created_at))
-      .map(copyAftersale),
+    listMyAftersales: async (): Promise<Aftersale[]> =>
+      state.aftersales
+        .filter((row) => row.user_id === MOCK_USER.id)
+        .sort((a, b) => b.created_at.localeCompare(a.created_at))
+        .map(copyAftersale),
 
     getAftersale: async (id: string): Promise<AftersaleDetail> => aftersaleDetail(id),
 
@@ -897,13 +990,19 @@ export function createMockApi(): ApiClient {
       return copyAftersale(row);
     },
 
-    submitAftersaleReturnTracking: async (id: string, body: AftersaleReturnTrackingBody): Promise<Aftersale> => {
+    submitAftersaleReturnTracking: async (
+      id: string,
+      body: AftersaleReturnTrackingBody,
+    ): Promise<Aftersale> => {
       const carrier = body.carrier.trim();
       const trackingNo = body.tracking_no.trim();
-      if (!carrier || !trackingNo) throw new ApiError(400, "BAD_REQUEST", "carrier and tracking_no are required");
+      if (!carrier || !trackingNo)
+        throw new ApiError(400, "BAD_REQUEST", "carrier and tracking_no are required");
       const row = findAftersale(id);
-      if (row.kind !== "return_refund") throw new ApiError(409, "CONFLICT", "not a return-refund aftersale");
-      if (row.status !== "approved") throw new ApiError(409, "CONFLICT", "aftersale is not awaiting return shipping");
+      if (row.kind !== "return_refund")
+        throw new ApiError(409, "CONFLICT", "not a return-refund aftersale");
+      if (row.status !== "approved")
+        throw new ApiError(409, "CONFLICT", "aftersale is not awaiting return shipping");
       row.status = "buyer_shipping";
       row.return_carrier = carrier;
       row.return_tracking_no = trackingNo;
@@ -912,13 +1011,17 @@ export function createMockApi(): ApiClient {
       return copyAftersale(row);
     },
 
-    addAftersaleMessage: async (id: string, body: AftersaleMessageBody): Promise<AftersaleMessage> => {
+    addAftersaleMessage: async (
+      id: string,
+      body: AftersaleMessageBody,
+    ): Promise<AftersaleMessage> => {
       const row = findAftersale(id);
       const en = body.content.en?.trim() ?? "";
       const zh = body.content.zh?.trim() ?? "";
       if (!en && !zh) throw new ApiError(400, "BAD_REQUEST", "content needs text");
       const evidence = (body.evidence ?? []).map((url) => url.trim());
-      if (evidence.some((url) => !url)) throw new ApiError(400, "BAD_REQUEST", "evidence URLs must be non-empty");
+      if (evidence.some((url) => !url))
+        throw new ApiError(400, "BAD_REQUEST", "evidence URLs must be non-empty");
       state.aftersaleMessageSeq += 1;
       const now = new Date().toISOString();
       const message: AftersaleMessage = {
@@ -970,7 +1073,8 @@ export function createMockApi(): ApiClient {
         })),
       }),
 
-    listShops: (): Promise<ShopProfile[]> => Promise.resolve(MOCK_STORES.map(toShopProfile)),    getShop: (slug) => {
+    listShops: (): Promise<ShopProfile[]> => Promise.resolve(MOCK_STORES.map(toShopProfile)),
+    getShop: (slug) => {
       const store = storeById(slug);
       if (!store) return Promise.reject(new ApiError(404, "NOT_FOUND", "Shop not found"));
       return Promise.resolve(toShopProfile(store));
@@ -979,7 +1083,8 @@ export function createMockApi(): ApiClient {
     listMyAddresses: () =>
       Promise.resolve(
         [...state.addresses].sort(
-          (a, b) => Number(b.is_default) - Number(a.is_default) || b.created_at.localeCompare(a.created_at),
+          (a, b) =>
+            Number(b.is_default) - Number(a.is_default) || b.created_at.localeCompare(a.created_at),
         ),
       ),
 
@@ -1062,7 +1167,9 @@ export function createMockApi(): ApiClient {
         .filter((row) => row.kind === q.kind)
         .filter((row) => {
           if (!q.target_id) return true;
-          return row.kind === "product" ? row.product.id === q.target_id : row.shop.id === q.target_id;
+          return row.kind === "product"
+            ? row.product.id === q.target_id
+            : row.shop.id === q.target_id;
         })
         .sort((a, b) => b.created_at.localeCompare(a.created_at));
       const total = visible.length;
@@ -1087,7 +1194,11 @@ export function createMockApi(): ApiClient {
         return Promise.resolve(hydrateProductFavorite(existing.id, existing.created_at, product));
       }
       state.favoriteSeq += 1;
-      const row = hydrateProductFavorite(`f-${state.favoriteSeq}`, new Date().toISOString(), product);
+      const row = hydrateProductFavorite(
+        `f-${state.favoriteSeq}`,
+        new Date().toISOString(),
+        product,
+      );
       state.favorites.push(row);
       persist();
       return Promise.resolve(row);
@@ -1116,7 +1227,9 @@ export function createMockApi(): ApiClient {
     },
 
     removeShopFavorite: (shopId: string) => {
-      state.favorites = state.favorites.filter((row) => !(row.kind === "shop" && row.shop.id === shopId));
+      state.favorites = state.favorites.filter(
+        (row) => !(row.kind === "shop" && row.shop.id === shopId),
+      );
       persist();
       return Promise.resolve();
     },
@@ -1139,9 +1252,7 @@ export function createMockApi(): ApiClient {
     },
 
     listPointsProducts: () =>
-      Promise.resolve(
-        state.pointsProducts.filter((p) => p.published).map((p) => ({ ...p })),
-      ),
+      Promise.resolve(state.pointsProducts.filter((p) => p.published).map((p) => ({ ...p }))),
 
     listFlashSales: () => Promise.resolve(mockFlashSales()),
 
@@ -1150,9 +1261,7 @@ export function createMockApi(): ApiClient {
     listMyRedemptions: () => Promise.resolve(state.redemptions.map((o) => ({ ...o }))),
 
     redeemPoints: (body: RedeemPointsBody) => {
-      const product = state.pointsProducts.find(
-        (p) => p.id === body.product_id && p.published,
-      );
+      const product = state.pointsProducts.find((p) => p.id === body.product_id && p.published);
       if (!product) {
         return Promise.reject(new ApiError(404, "NOT_FOUND", "Points product not found"));
       }
diff --git a/apps/mall/mock/data.ts b/apps/mall/mock/data.ts
index 6694d82..d92e7fc 100644
--- a/apps/mall/mock/data.ts
+++ b/apps/mall/mock/data.ts
@@ -97,10 +97,42 @@ export interface IntegralProduct {
 // ---------- currencies ----------
 
 export const MOCK_CURRENCIES = [
-  { code: "USD", name: L("US Dollar", "美元"), symbol: "$", exponent: 2, is_base: true, rate_to_base: "1", enabled: true },
-  { code: "CNY", name: L("Chinese Yuan", "人民币"), symbol: "¥", exponent: 2, is_base: false, rate_to_base: "0.14", enabled: true },
-  { code: "JPY", name: L("Japanese Yen", "日元"), symbol: "¥", exponent: 0, is_base: false, rate_to_base: "0.0067", enabled: true },
-  { code: "EUR", name: L("Euro", "欧元"), symbol: "€", exponent: 2, is_base: false, rate_to_base: "1.09", enabled: true },
+  {
+    code: "USD",
+    name: L("US Dollar", "美元"),
+    symbol: "$",
+    exponent: 2,
+    is_base: true,
+    rate_to_base: "1",
+    enabled: true,
+  },
+  {
+    code: "CNY",
+    name: L("Chinese Yuan", "人民币"),
+    symbol: "¥",
+    exponent: 2,
+    is_base: false,
+    rate_to_base: "0.14",
+    enabled: true,
+  },
+  {
+    code: "JPY",
+    name: L("Japanese Yen", "日元"),
+    symbol: "¥",
+    exponent: 0,
+    is_base: false,
+    rate_to_base: "0.0067",
+    enabled: true,
+  },
+  {
+    code: "EUR",
+    name: L("Euro", "欧元"),
+    symbol: "€",
+    exponent: 2,
+    is_base: false,
+    rate_to_base: "1.09",
+    enabled: true,
+  },
 ];
 
 // units of currency per 1 USD, scaled by 1e4 (integer math only)
@@ -331,7 +363,10 @@ export const MOCK_STORES: MockStore[] = [
     distanceKm: 3.2,
     rate: { score: 4.9, agree: 4.8, service: 4.9, speed: 4.7 },
     notice: L("Free shipping on orders over $99.", "满 99 美元免运费。"),
-    afterSale: L("7-day returns, 15-day exchanges, 1-year warranty.", "支持 7 天退货、15 天换货、一年质保。"),
+    afterSale: L(
+      "7-day returns, 15-day exchanges, 1-year warranty.",
+      "支持 7 天退货、15 天换货、一年质保。",
+    ),
   },
   {
     id: "s2",
@@ -345,7 +380,10 @@ export const MOCK_STORES: MockStore[] = [
     distanceKm: 12.5,
     rate: { score: 4.7, agree: 4.6, service: 4.8, speed: 4.6 },
     notice: L("Same-day dispatch before 3 PM.", "下午 3 点前下单当天发货。"),
-    afterSale: L("Nationwide warranty, online support 9:00-21:00.", "全国联保，在线客服 9:00-21:00。"),
+    afterSale: L(
+      "Nationwide warranty, online support 9:00-21:00.",
+      "全国联保，在线客服 9:00-21:00。",
+    ),
   },
   {
     id: "s3",
@@ -394,30 +432,333 @@ interface ProductSpec {
 }
 
 const PRODUCT_SPECS: ProductSpec[] = [
-  { n: 1, slug: "aurora-x90-pro", cat: "c1-1-1", store: "s1", brand: "b1", name: L("Aurora X90 Pro 5G", "Aurora X90 Pro 5G 手机"), sub: L("Flagship imaging, 120Hz OLED", "旗舰影像，120Hz OLED 屏"), price: 89900, market: 99900, stock: 128, attrs: [{ key: "Color", values: ["Black", "Silver"] }, { key: "Storage", values: ["256GB", "512GB"] }] },
-  { n: 2, slug: "aurora-lite-5g", cat: "c1-1-2", store: "s1", brand: "b1", name: L("Aurora Lite 5G", "Aurora Lite 5G 手机"), sub: L("All-day battery, great value", "长续航，高性价比"), price: 29900, market: 34900, stock: 356, attrs: [{ key: "Color", values: ["Blue", "Green"] }] },
-  { n: 3, slug: "hexon-buds-air", cat: "c1-2-1", store: "s2", brand: "b3", name: L("Hexon Buds Air", "Hexon Buds Air 真无线耳机"), sub: L("ANC, 36h total playback", "主动降噪，36 小时总续航"), price: 7900, market: 9900, stock: 842, attrs: [{ key: "Color", values: ["White", "Black"] }] },
-  { n: 4, slug: "hexon-boombox-mini", cat: "c1-2-2", store: "s2", brand: "b3", name: L("Hexon Boombox Mini", "Hexon Boombox Mini 蓝牙音箱"), sub: L("IPX7 waterproof, 20h playtime", "IPX7 防水，20 小时播放"), price: 5900, market: 7900, stock: 410, attrs: [{ key: "Color", values: ["Gray", "Red"] }] },
-  { n: 5, slug: "nordwind-air-14", cat: "c2-1-1", store: "s2", brand: "b2", name: L("Nordwind Air 14 Laptop", "Nordwind Air 14 轻薄本"), sub: L("1.19kg, 2.8K display, 16GB RAM", "1.19kg，2.8K 屏，16GB 内存"), price: 109900, market: 124900, stock: 96, attrs: [{ key: "Color", values: ["Silver", "Gray"] }, { key: "Memory", values: ["16GB", "32GB"] }] },
-  { n: 6, slug: "hexon-storm-16", cat: "c2-1-2", store: "s2", brand: "b3", name: L("Hexon Storm 16 Gaming Laptop", "Hexon Storm 16 游戏本"), sub: L("RTX graphics, 240Hz screen", "RTX 显卡，240Hz 电竞屏"), price: 189900, market: 209900, stock: 42, attrs: [{ key: "Color", values: ["Black"] }, { key: "Memory", values: ["16GB", "32GB"] }] },
-  { n: 7, slug: "nordwind-keys-pro", cat: "c2-2-1", store: "s2", brand: "b2", name: L("Nordwind Keys Pro", "Nordwind Keys Pro 机械键盘"), sub: L("Hot-swap, tri-mode wireless", "热插拔，三模无线"), price: 8900, market: 10900, stock: 520, attrs: [{ key: "Switch", values: ["Linear", "Tactile"] }] },
-  { n: 8, slug: "nordwind-view-27", cat: "c2-2-2", store: "s2", brand: "b2", name: L("Nordwind View 27 Monitor", "Nordwind View 27 显示器"), sub: L("4K IPS, 99% sRGB", "4K IPS，99% sRGB 色域"), price: 32900, market: 39900, stock: 150, attrs: [{ key: "Size", values: ["27in", "32in"] }] },
-  { n: 9, slug: "solace-rice-chef", cat: "c3-1-1", store: "s3", brand: "b5", name: L("Solace Rice Chef 4L", "Solace 智能电饭煲 4L"), sub: L("IH heating, 24h timer", "IH 电磁加热，24 小时预约"), price: 12900, market: 15900, stock: 230, attrs: [{ key: "Color", values: ["White"] }] },
-  { n: 10, slug: "solace-blend-max", cat: "c3-1-2", store: "s3", brand: "b5", name: L("Solace Blend Max", "Solace 破壁机"), sub: L("Quiet motor, self-cleaning", "静音电机，一键自清洗"), price: 14900, market: 18900, stock: 178, attrs: [{ key: "Color", values: ["Cream", "Green"] }] },
-  { n: 11, slug: "solace-vac-v12", cat: "c3-2-1", store: "s3", brand: "b5", name: L("Solace Vac V12", "Solace V12 无线吸尘器"), sub: L("60min runtime, laser dust detect", "60 分钟续航，激光显尘"), price: 39900, market: 45900, stock: 88, attrs: [{ key: "Color", values: ["Gray"] }] },
-  { n: 12, slug: "solace-pure-500", cat: "c3-2-2", store: "s3", brand: "b5", name: L("Solace Pure 500 Air Purifier", "Solace Pure 500 空气净化器"), sub: L("HEPA-13, 60m² coverage", "HEPA-13 滤芯，适用 60㎡"), price: 24900, market: 29900, stock: 140, attrs: [{ key: "Color", values: ["White"] }] },
-  { n: 13, slug: "mikado-field-jacket", cat: "c4-1-1", store: "s1", brand: "b4", name: L("Mikado Field Jacket", "Mikado 工装夹克"), sub: L("Water-repellent, 4 pockets", "防泼水面料，四袋设计"), price: 11900, market: 14900, stock: 310, attrs: [{ key: "Color", values: ["Olive", "Black"] }, { key: "Size", values: ["M", "L", "XL"] }] },
-  { n: 14, slug: "mikado-oxford-shirt", cat: "c4-1-2", store: "s1", brand: "b4", name: L("Mikado Oxford Shirt", "Mikado 牛津纺衬衫"), sub: L("Wrinkle-free cotton", "免烫纯棉"), price: 4900, market: 6900, stock: 460, attrs: [{ key: "Color", values: ["White", "Blue"] }, { key: "Size", values: ["M", "L", "XL"] }] },
-  { n: 15, slug: "mikado-commuter-pack", cat: "c4-2-1", store: "s1", brand: "b4", name: L("Mikado Commuter Pack 20L", "Mikado 通勤双肩包 20L"), sub: L("Fits 16in laptop, USB port", "可装 16 英寸电脑，外置 USB 口"), price: 6900, market: 8900, stock: 275, attrs: [{ key: "Color", values: ["Black", "Navy"] }] },
-  { n: 16, slug: "mikado-voyage-24", cat: "c4-2-2", store: "s1", brand: "b4", name: L("Mikado Voyage 24 Luggage", "Mikado Voyage 24 英寸旅行箱"), sub: L("PC shell, silent wheels", "PC 箱体，静音万向轮"), price: 13900, market: 16900, stock: 132, attrs: [{ key: "Color", values: ["Silver", "Black"] }] },
-  { n: 17, slug: "solace-glow-serum", cat: "c5-1-1", store: "s3", brand: "b5", name: L("Solace Glow Serum 30ml", "Solace 焕亮精华 30ml"), sub: L("Vitamin C + E, daily glow", "维 C + 维 E，日常焕亮"), price: 3900, market: 4900, stock: 640, attrs: [{ key: "Size", values: ["30ml", "50ml"] }] },
-  { n: 18, slug: "solace-hydra-mask", cat: "c5-1-2", store: "s3", brand: "b5", name: L("Solace Hydra Mask 10pcs", "Solace 补水面膜 10 片装"), sub: L("Hyaluronic acid boost", "玻尿酸深层补水"), price: 1900, market: 2900, stock: 900, attrs: [{ key: "Type", values: ["Hydrating", "Soothing"] }] },
-  { n: 19, slug: "hexon-shave-s9", cat: "c5-2-1", store: "s2", brand: "b3", name: L("Hexon Shave S9", "Hexon S9 电动剃须刀"), sub: L("3-head flex, wet & dry", "三刀头浮动，干湿两用"), price: 9900, market: 12900, stock: 205, attrs: [{ key: "Color", values: ["Black"] }] },
-  { n: 20, slug: "hexon-brush-t5", cat: "c5-2-2", store: "s2", brand: "b3", name: L("Hexon Brush T5", "Hexon T5 电动牙刷"), sub: L("Sonic, 90-day battery", "声波震动，90 天续航"), price: 4900, market: 6900, stock: 380, attrs: [{ key: "Color", values: ["White", "Pink"] }] },
-  { n: 21, slug: "terra-mixed-nuts", cat: "c6-1-1", store: "s4", brand: "b6", name: L("Terra Mixed Nuts 1kg", "Terra 混合坚果 1kg"), sub: L("6 kinds, no added salt", "6 种坚果，无添加盐"), price: 2900, market: 3900, stock: 720, attrs: [{ key: "Pack", values: ["1kg", "500g"] }] },
-  { n: 22, slug: "terra-butter-cookies", cat: "c6-1-2", store: "s4", brand: "b6", name: L("Terra Butter Cookies 908g", "Terra 黄油曲奇 908g"), sub: L("Danish recipe, gift tin", "丹麦配方，礼盒铁罐装"), price: 2400, market: 3200, stock: 540, attrs: [{ key: "Pack", values: ["908g"] }] },
-  { n: 23, slug: "terra-fuji-apples", cat: "c6-2-1", store: "s4", brand: "b6", name: L("Terra Fuji Apples 5kg", "Terra 红富士苹果 5kg"), sub: L("Crisp & sweet, farm direct", "脆甜多汁，产地直发"), price: 1900, market: 2600, stock: 460, attrs: [{ key: "Size", values: ["Medium", "Large"] }] },
-  { n: 24, slug: "terra-salmon-fillet", cat: "c6-2-2", store: "s4", brand: "b6", name: L("Terra Salmon Fillet 500g", "Terra 三文鱼中段 500g"), sub: L("Cold-chain, sashimi grade", "冷链直达，刺身级"), price: 3400, market: 4200, stock: 190, attrs: [{ key: "Cut", values: ["Fillet", "Steak"] }] },
+  {
+    n: 1,
+    slug: "aurora-x90-pro",
+    cat: "c1-1-1",
+    store: "s1",
+    brand: "b1",
+    name: L("Aurora X90 Pro 5G", "Aurora X90 Pro 5G 手机"),
+    sub: L("Flagship imaging, 120Hz OLED", "旗舰影像，120Hz OLED 屏"),
+    price: 89900,
+    market: 99900,
+    stock: 128,
+    attrs: [
+      { key: "Color", values: ["Black", "Silver"] },
+      { key: "Storage", values: ["256GB", "512GB"] },
+    ],
+  },
+  {
+    n: 2,
+    slug: "aurora-lite-5g",
+    cat: "c1-1-2",
+    store: "s1",
+    brand: "b1",
+    name: L("Aurora Lite 5G", "Aurora Lite 5G 手机"),
+    sub: L("All-day battery, great value", "长续航，高性价比"),
+    price: 29900,
+    market: 34900,
+    stock: 356,
+    attrs: [{ key: "Color", values: ["Blue", "Green"] }],
+  },
+  {
+    n: 3,
+    slug: "hexon-buds-air",
+    cat: "c1-2-1",
+    store: "s2",
+    brand: "b3",
+    name: L("Hexon Buds Air", "Hexon Buds Air 真无线耳机"),
+    sub: L("ANC, 36h total playback", "主动降噪，36 小时总续航"),
+    price: 7900,
+    market: 9900,
+    stock: 842,
+    attrs: [{ key: "Color", values: ["White", "Black"] }],
+  },
+  {
+    n: 4,
+    slug: "hexon-boombox-mini",
+    cat: "c1-2-2",
+    store: "s2",
+    brand: "b3",
+    name: L("Hexon Boombox Mini", "Hexon Boombox Mini 蓝牙音箱"),
+    sub: L("IPX7 waterproof, 20h playtime", "IPX7 防水，20 小时播放"),
+    price: 5900,
+    market: 7900,
+    stock: 410,
+    attrs: [{ key: "Color", values: ["Gray", "Red"] }],
+  },
+  {
+    n: 5,
+    slug: "nordwind-air-14",
+    cat: "c2-1-1",
+    store: "s2",
+    brand: "b2",
+    name: L("Nordwind Air 14 Laptop", "Nordwind Air 14 轻薄本"),
+    sub: L("1.19kg, 2.8K display, 16GB RAM", "1.19kg，2.8K 屏，16GB 内存"),
+    price: 109900,
+    market: 124900,
+    stock: 96,
+    attrs: [
+      { key: "Color", values: ["Silver", "Gray"] },
+      { key: "Memory", values: ["16GB", "32GB"] },
+    ],
+  },
+  {
+    n: 6,
+    slug: "hexon-storm-16",
+    cat: "c2-1-2",
+    store: "s2",
+    brand: "b3",
+    name: L("Hexon Storm 16 Gaming Laptop", "Hexon Storm 16 游戏本"),
+    sub: L("RTX graphics, 240Hz screen", "RTX 显卡，240Hz 电竞屏"),
+    price: 189900,
+    market: 209900,
+    stock: 42,
+    attrs: [
+      { key: "Color", values: ["Black"] },
+      { key: "Memory", values: ["16GB", "32GB"] },
+    ],
+  },
+  {
+    n: 7,
+    slug: "nordwind-keys-pro",
+    cat: "c2-2-1",
+    store: "s2",
+    brand: "b2",
+    name: L("Nordwind Keys Pro", "Nordwind Keys Pro 机械键盘"),
+    sub: L("Hot-swap, tri-mode wireless", "热插拔，三模无线"),
+    price: 8900,
+    market: 10900,
+    stock: 520,
+    attrs: [{ key: "Switch", values: ["Linear", "Tactile"] }],
+  },
+  {
+    n: 8,
+    slug: "nordwind-view-27",
+    cat: "c2-2-2",
+    store: "s2",
+    brand: "b2",
+    name: L("Nordwind View 27 Monitor", "Nordwind View 27 显示器"),
+    sub: L("4K IPS, 99% sRGB", "4K IPS，99% sRGB 色域"),
+    price: 32900,
+    market: 39900,
+    stock: 150,
+    attrs: [{ key: "Size", values: ["27in", "32in"] }],
+  },
+  {
+    n: 9,
+    slug: "solace-rice-chef",
+    cat: "c3-1-1",
+    store: "s3",
+    brand: "b5",
+    name: L("Solace Rice Chef 4L", "Solace 智能电饭煲 4L"),
+    sub: L("IH heating, 24h timer", "IH 电磁加热，24 小时预约"),
+    price: 12900,
+    market: 15900,
+    stock: 230,
+    attrs: [{ key: "Color", values: ["White"] }],
+  },
+  {
+    n: 10,
+    slug: "solace-blend-max",
+    cat: "c3-1-2",
+    store: "s3",
+    brand: "b5",
+    name: L("Solace Blend Max", "Solace 破壁机"),
+    sub: L("Quiet motor, self-cleaning", "静音电机，一键自清洗"),
+    price: 14900,
+    market: 18900,
+    stock: 178,
+    attrs: [{ key: "Color", values: ["Cream", "Green"] }],
+  },
+  {
+    n: 11,
+    slug: "solace-vac-v12",
+    cat: "c3-2-1",
+    store: "s3",
+    brand: "b5",
+    name: L("Solace Vac V12", "Solace V12 无线吸尘器"),
+    sub: L("60min runtime, laser dust detect", "60 分钟续航，激光显尘"),
+    price: 39900,
+    market: 45900,
+    stock: 88,
+    attrs: [{ key: "Color", values: ["Gray"] }],
+  },
+  {
+    n: 12,
+    slug: "solace-pure-500",
+    cat: "c3-2-2",
+    store: "s3",
+    brand: "b5",
+    name: L("Solace Pure 500 Air Purifier", "Solace Pure 500 空气净化器"),
+    sub: L("HEPA-13, 60m² coverage", "HEPA-13 滤芯，适用 60㎡"),
+    price: 24900,
+    market: 29900,
+    stock: 140,
+    attrs: [{ key: "Color", values: ["White"] }],
+  },
+  {
+    n: 13,
+    slug: "mikado-field-jacket",
+    cat: "c4-1-1",
+    store: "s1",
+    brand: "b4",
+    name: L("Mikado Field Jacket", "Mikado 工装夹克"),
+    sub: L("Water-repellent, 4 pockets", "防泼水面料，四袋设计"),
+    price: 11900,
+    market: 14900,
+    stock: 310,
+    attrs: [
+      { key: "Color", values: ["Olive", "Black"] },
+      { key: "Size", values: ["M", "L", "XL"] },
+    ],
+  },
+  {
+    n: 14,
+    slug: "mikado-oxford-shirt",
+    cat: "c4-1-2",
+    store: "s1",
+    brand: "b4",
+    name: L("Mikado Oxford Shirt", "Mikado 牛津纺衬衫"),
+    sub: L("Wrinkle-free cotton", "免烫纯棉"),
+    price: 4900,
+    market: 6900,
+    stock: 460,
+    attrs: [
+      { key: "Color", values: ["White", "Blue"] },
+      { key: "Size", values: ["M", "L", "XL"] },
+    ],
+  },
+  {
+    n: 15,
+    slug: "mikado-commuter-pack",
+    cat: "c4-2-1",
+    store: "s1",
+    brand: "b4",
+    name: L("Mikado Commuter Pack 20L", "Mikado 通勤双肩包 20L"),
+    sub: L("Fits 16in laptop, USB port", "可装 16 英寸电脑，外置 USB 口"),
+    price: 6900,
+    market: 8900,
+    stock: 275,
+    attrs: [{ key: "Color", values: ["Black", "Navy"] }],
+  },
+  {
+    n: 16,
+    slug: "mikado-voyage-24",
+    cat: "c4-2-2",
+    store: "s1",
+    brand: "b4",
+    name: L("Mikado Voyage 24 Luggage", "Mikado Voyage 24 英寸旅行箱"),
+    sub: L("PC shell, silent wheels", "PC 箱体，静音万向轮"),
+    price: 13900,
+    market: 16900,
+    stock: 132,
+    attrs: [{ key: "Color", values: ["Silver", "Black"] }],
+  },
+  {
+    n: 17,
+    slug: "solace-glow-serum",
+    cat: "c5-1-1",
+    store: "s3",
+    brand: "b5",
+    name: L("Solace Glow Serum 30ml", "Solace 焕亮精华 30ml"),
+    sub: L("Vitamin C + E, daily glow", "维 C + 维 E，日常焕亮"),
+    price: 3900,
+    market: 4900,
+    stock: 640,
+    attrs: [{ key: "Size", values: ["30ml", "50ml"] }],
+  },
+  {
+    n: 18,
+    slug: "solace-hydra-mask",
+    cat: "c5-1-2",
+    store: "s3",
+    brand: "b5",
+    name: L("Solace Hydra Mask 10pcs", "Solace 补水面膜 10 片装"),
+    sub: L("Hyaluronic acid boost", "玻尿酸深层补水"),
+    price: 1900,
+    market: 2900,
+    stock: 900,
+    attrs: [{ key: "Type", values: ["Hydrating", "Soothing"] }],
+  },
+  {
+    n: 19,
+    slug: "hexon-shave-s9",
+    cat: "c5-2-1",
+    store: "s2",
+    brand: "b3",
+    name: L("Hexon Shave S9", "Hexon S9 电动剃须刀"),
+    sub: L("3-head flex, wet & dry", "三刀头浮动，干湿两用"),
+    price: 9900,
+    market: 12900,
+    stock: 205,
+    attrs: [{ key: "Color", values: ["Black"] }],
+  },
+  {
+    n: 20,
+    slug: "hexon-brush-t5",
+    cat: "c5-2-2",
+    store: "s2",
+    brand: "b3",
+    name: L("Hexon Brush T5", "Hexon T5 电动牙刷"),
+    sub: L("Sonic, 90-day battery", "声波震动，90 天续航"),
+    price: 4900,
+    market: 6900,
+    stock: 380,
+    attrs: [{ key: "Color", values: ["White", "Pink"] }],
+  },
+  {
+    n: 21,
+    slug: "terra-mixed-nuts",
+    cat: "c6-1-1",
+    store: "s4",
+    brand: "b6",
+    name: L("Terra Mixed Nuts 1kg", "Terra 混合坚果 1kg"),
+    sub: L("6 kinds, no added salt", "6 种坚果，无添加盐"),
+    price: 2900,
+    market: 3900,
+    stock: 720,
+    attrs: [{ key: "Pack", values: ["1kg", "500g"] }],
+  },
+  {
+    n: 22,
+    slug: "terra-butter-cookies",
+    cat: "c6-1-2",
+    store: "s4",
+    brand: "b6",
+    name: L("Terra Butter Cookies 908g", "Terra 黄油曲奇 908g"),
+    sub: L("Danish recipe, gift tin", "丹麦配方，礼盒铁罐装"),
+    price: 2400,
+    market: 3200,
+    stock: 540,
+    attrs: [{ key: "Pack", values: ["908g"] }],
+  },
+  {
+    n: 23,
+    slug: "terra-fuji-apples",
+    cat: "c6-2-1",
+    store: "s4",
+    brand: "b6",
+    name: L("Terra Fuji Apples 5kg", "Terra 红富士苹果 5kg"),
+    sub: L("Crisp & sweet, farm direct", "脆甜多汁，产地直发"),
+    price: 1900,
+    market: 2600,
+    stock: 460,
+    attrs: [{ key: "Size", values: ["Medium", "Large"] }],
+  },
+  {
+    n: 24,
+    slug: "terra-salmon-fillet",
+    cat: "c6-2-2",
+    store: "s4",
+    brand: "b6",
+    name: L("Terra Salmon Fillet 500g", "Terra 三文鱼中段 500g"),
+    sub: L("Cold-chain, sashimi grade", "冷链直达，刺身级"),
+    price: 3400,
+    market: 4200,
+    stock: 190,
+    attrs: [{ key: "Cut", values: ["Fillet", "Steak"] }],
+  },
 ];
 
 function buildProducts(): Product[] {
@@ -427,7 +768,8 @@ function buildProducts(): Product[] {
     const img = `/mock/product-${spec.n}.svg`;
     const skus: Sku[] = [];
     const combos = spec.attrs.reduce<string[][]>(
-      (acc, attr) => acc.flatMap((prefix) => attr.values.map((v) => [...prefix, `${attr.key}:${v}`])),
+      (acc, attr) =>
+        acc.flatMap((prefix) => attr.values.map((v) => [...prefix, `${attr.key}:${v}`])),
       [[]],
     );
     combos.forEach((combo, k) => {
@@ -499,7 +841,12 @@ function seedOf(id: string): number {
   return hash;
 }
 
-export function searchMockProducts(query: MockSearchQuery): { items: Product[]; total: number; page: number; per_page: number } {
+export function searchMockProducts(query: MockSearchQuery): {
+  items: Product[];
+  total: number;
+  page: number;
+  per_page: number;
+} {
   const page = query.page && query.page > 0 ? query.page : 1;
   const perPage = query.perPage && query.perPage > 0 ? query.perPage : 20;
   let list = MOCK_PRODUCTS.filter((p) => p.status === "published");
@@ -520,7 +867,9 @@ export function searchMockProducts(query: MockSearchQuery): { items: Product[];
   const dir = query.order === "asc" ? 1 : -1;
   switch (query.sort) {
     case "price":
-      list = [...list].sort((a, b) => dir * ((lowestSku(a)?.price_minor ?? 0) - (lowestSku(b)?.price_minor ?? 0)));
+      list = [...list].sort(
+        (a, b) => dir * ((lowestSku(a)?.price_minor ?? 0) - (lowestSku(b)?.price_minor ?? 0)),
+      );
       break;
     case "sales":
       // The fixed-data catalogue has no orders, so every product reports zero
@@ -570,9 +919,30 @@ export const MOCK_PROMOS: MockPromo[] = [
 // ---------- product detail extras ----------
 
 export const MOCK_COUPONS: MockCoupon[] = [
-  { id: "cp1", title: L("$5 off over $59", "满 59 减 5"), amountMinor: 500, thresholdMinor: 5900, currency: BASE_CURRENCY, expiresAt: "2026-12-31" },
-  { id: "cp2", title: L("$15 off over $199", "满 199 减 15"), amountMinor: 1500, thresholdMinor: 19900, currency: BASE_CURRENCY, expiresAt: "2026-11-30" },
-  { id: "cp3", title: L("$40 off over $499", "满 499 减 40"), amountMinor: 4000, thresholdMinor: 49900, currency: BASE_CURRENCY, expiresAt: "2026-10-31" },
+  {
+    id: "cp1",
+    title: L("$5 off over $59", "满 59 减 5"),
+    amountMinor: 500,
+    thresholdMinor: 5900,
+    currency: BASE_CURRENCY,
+    expiresAt: "2026-12-31",
+  },
+  {
+    id: "cp2",
+    title: L("$15 off over $199", "满 199 减 15"),
+    amountMinor: 1500,
+    thresholdMinor: 19900,
+    currency: BASE_CURRENCY,
+    expiresAt: "2026-11-30",
+  },
+  {
+    id: "cp3",
+    title: L("$40 off over $499", "满 499 减 40"),
+    amountMinor: 4000,
+    thresholdMinor: 49900,
+    currency: BASE_CURRENCY,
+    expiresAt: "2026-10-31",
+  },
 ];
 
 // ---------- marketing ----------
@@ -584,7 +954,11 @@ export const SECKILL_SESSIONS: SeckillSession[] = [
   { startHour: 18, endHour: 24, label: "18:00" },
 ];
 
-export function seckillProducts(): { product: Product; seckillPriceMinor: number; soldPct: number }[] {
+export function seckillProducts(): {
+  product: Product;
+  seckillPriceMinor: number;
+  soldPct: number;
+}[] {
   return MOCK_PRODUCTS.slice(0, 8).map((p, i) => {
     const sku = lowestSku(p);
     const base = sku?.price_minor ?? 1000;
@@ -605,12 +979,60 @@ export function collectiveProducts(): { product: Product; need: number; joined:
 }
 
 export const INTEGRAL_PRODUCTS: IntegralProduct[] = [
-  { id: "ip1", name: L("Insulated Mug", "保温杯"), image: "/mock/product-9.svg", points: 1200, marketPriceMinor: 4900, currency: BASE_CURRENCY, stock: 300 },
-  { id: "ip2", name: L("Canvas Tote", "帆布手提袋"), image: "/mock/product-15.svg", points: 600, marketPriceMinor: 1900, currency: BASE_CURRENCY, stock: 500 },
-  { id: "ip3", name: L("Phone Stand", "手机支架"), image: "/mock/product-7.svg", points: 400, marketPriceMinor: 1200, currency: BASE_CURRENCY, stock: 800 },
-  { id: "ip4", name: L("Cable Organizer Set", "数据线收纳套装"), image: "/mock/product-3.svg", points: 300, marketPriceMinor: 900, currency: BASE_CURRENCY, stock: 1000 },
-  { id: "ip5", name: L("Notebook A5", "A5 笔记本"), image: "/mock/product-14.svg", points: 250, marketPriceMinor: 700, currency: BASE_CURRENCY, stock: 1200 },
-  { id: "ip6", name: L("Umbrella", "折叠雨伞"), image: "/mock/product-13.svg", points: 900, marketPriceMinor: 2900, currency: BASE_CURRENCY, stock: 260 },
+  {
+    id: "ip1",
+    name: L("Insulated Mug", "保温杯"),
+    image: "/mock/product-9.svg",
+    points: 1200,
+    marketPriceMinor: 4900,
+    currency: BASE_CURRENCY,
+    stock: 300,
+  },
+  {
+    id: "ip2",
+    name: L("Canvas Tote", "帆布手提袋"),
+    image: "/mock/product-15.svg",
+    points: 600,
+    marketPriceMinor: 1900,
+    currency: BASE_CURRENCY,
+    stock: 500,
+  },
+  {
+    id: "ip3",
+    name: L("Phone Stand", "手机支架"),
+    image: "/mock/product-7.svg",
+    points: 400,
+    marketPriceMinor: 1200,
+    currency: BASE_CURRENCY,
+    stock: 800,
+  },
+  {
+    id: "ip4",
+    name: L("Cable Organizer Set", "数据线收纳套装"),
+    image: "/mock/product-3.svg",
+    points: 300,
+    marketPriceMinor: 900,
+    currency: BASE_CURRENCY,
+    stock: 1000,
+  },
+  {
+    id: "ip5",
+    name: L("Notebook A5", "A5 笔记本"),
+    image: "/mock/product-14.svg",
+    points: 250,
+    marketPriceMinor: 700,
+    currency: BASE_CURRENCY,
+    stock: 1200,
+  },
+  {
+    id: "ip6",
+    name: L("Umbrella", "折叠雨伞"),
+    image: "/mock/product-13.svg",
+    points: 900,
+    marketPriceMinor: 2900,
+    currency: BASE_CURRENCY,
+    stock: 260,
+  },
 ];
 
 // ---------- user center ----------
@@ -626,8 +1048,26 @@ export const MOCK_USER: User = {
 };
 
 export const MOCK_ADDRESSES: MockAddress[] = [
-  { id: "a1", recipient: "Demo Shopper", phone: "+1 555 0100", region: "California", city: "Cupertino", line1: "1 Infinite Loop", postalCode: "95014", isDefault: true },
-  { id: "a2", recipient: "Demo Shopper", phone: "+1 555 0100", region: "New York", city: "New York", line1: "88 Fifth Ave", postalCode: "10011", isDefault: false },
+  {
+    id: "a1",
+    recipient: "Demo Shopper",
+    phone: "+1 555 0100",
+    region: "California",
+    city: "Cupertino",
+    line1: "1 Infinite Loop",
+    postalCode: "95014",
+    isDefault: true,
+  },
+  {
+    id: "a2",
+    recipient: "Demo Shopper",
+    phone: "+1 555 0100",
+    region: "New York",
+    city: "New York",
+    line1: "88 Fifth Ave",
+    postalCode: "10011",
+    isDefault: false,
+  },
 ];
 
 export function defaultAddress(): Address {
@@ -661,7 +1101,10 @@ export interface DashboardCounts {
 
 // ---------- seeded orders / shipments / invoices ----------
 
-function orderItemFrom(productIndex: number, qty: number): { id: string; sku: Sku; product: Product; qty: number } {
+function orderItemFrom(
+  productIndex: number,
+  qty: number,
+): { id: string; sku: Sku; product: Product; qty: number } {
   const product = MOCK_PRODUCTS[productIndex];
   const sku = lowestSku(product) ?? product.skus?.[0];
   if (!sku) throw new Error("mock seed: product has no sku");
diff --git a/apps/mall/nuxt.config.ts b/apps/mall/nuxt.config.ts
index 42ed67c..d698e80 100644
--- a/apps/mall/nuxt.config.ts
+++ b/apps/mall/nuxt.config.ts
@@ -12,7 +12,26 @@ export default defineNuxtConfig({
       // Domains served by the live backend; every other domain stays on the
       // fixed-data adapter. Override with NUXT_PUBLIC_LIVE_DOMAINS='["catalog"]'.
       // See openspec/changes/replace-mock-api-wave-1/design.md and waves 2-3.
-      liveDomains: ["catalog", "currency", "content", "shops", "brands", "auth", "account", "cart", "orders", "shipments", "invoices", "addresses", "coupons", "points", "flashSales", "groupBuying", "favorites", "aftersales"],
+      liveDomains: [
+        "catalog",
+        "currency",
+        "content",
+        "shops",
+        "brands",
+        "auth",
+        "account",
+        "cart",
+        "orders",
+        "shipments",
+        "invoices",
+        "addresses",
+        "coupons",
+        "points",
+        "flashSales",
+        "groupBuying",
+        "favorites",
+        "aftersales",
+      ],
       appName: "mall",
     },
   },
diff --git a/apps/mall/pages/cart.vue b/apps/mall/pages/cart.vue
index a44612e..c6943da 100644
--- a/apps/mall/pages/cart.vue
+++ b/apps/mall/pages/cart.vue
@@ -122,17 +122,24 @@ onMounted(() => void loadCart());
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg font-sans text-text">
-    <div class="mx-auto max-w-mall px-4 py-6">
+  <div class="bg-bg text-text min-h-screen font-sans">
+    <div class="max-w-mall mx-auto px-4 py-6">
       <UiStepBar :steps="stepLabels" :active="0" />
       <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="mb-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger">{{ error }}</p>
+      <p v-if="error" class="border-danger/30 bg-danger/10 text-danger mb-4 border px-3.5 py-2.5">
+        {{ error }}
+      </p>
       <template v-if="!loading && items.length > 0">
-        <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">
+        <VCard
+          v-for="group in groups"
+          :key="group.shopId"
+          :padded="false"
+          class="mb-4 overflow-hidden"
+        >
+          <header class="border-border flex items-center gap-2 border-b px-4 py-3 text-sm">
             <span class="text-muted">{{ t("cart.shop") }}</span>
             <strong>{{ pick(group.shopName, locale) || t("cart.unknownStore") }}</strong>
           </header>
@@ -153,7 +160,7 @@ onMounted(() => void loadCart());
                 <td>
                   <input
                     :checked="Boolean(selected[item.sku_id])"
-                    class="h-4 w-4 accent-primary"
+                    class="accent-primary h-4 w-4"
                     type="checkbox"
                     :aria-label="pick(item.product_name, locale)"
                     @change="onSelectionChange(item.sku_id, $event)"
@@ -161,12 +168,18 @@ onMounted(() => void loadCart());
                 </td>
                 <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)" />
+                    <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="text-muted">{{ item.sku_code }}</td>
-                <td><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></td>
+                <td>
+                  <PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" />
+                </td>
                 <td>
                   <UiQtyStepper
                     :model-value="item.qty"
@@ -174,9 +187,19 @@ onMounted(() => void loadCart());
                     @update:model-value="updateQuantity(item, $event)"
                   />
                 </td>
-                <td class="font-semibold text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" /></td>
+                <td class="text-primary font-semibold">
+                  <PriceText
+                    :amount-minor="item.unit_price_minor * item.qty"
+                    :currency="item.currency"
+                  />
+                </td>
                 <td>
-                  <button type="button" class="cursor-pointer text-sm text-primary hover:text-primary-hover disabled:opacity-50" :disabled="mutating" @click="removeItem(item)">
+                  <button
+                    type="button"
+                    class="text-primary hover:text-primary-hover cursor-pointer text-sm disabled:opacity-50"
+                    :disabled="mutating"
+                    @click="removeItem(item)"
+                  >
                     {{ t("cart.remove") }}
                   </button>
                 </td>
@@ -185,25 +208,44 @@ onMounted(() => void loadCart());
           </VTable>
         </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">
+        <footer
+          class="border-border bg-surface mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border 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)" />
+            <input
+              :checked="allSelected"
+              class="accent-primary h-4 w-4"
+              type="checkbox"
+              @change="setAllSelected(($event.target as HTMLInputElement).checked)"
+            />
             <span>{{ t("cart.selectAll") }}</span>
           </label>
-          <span class="text-sm text-muted">{{ t("cart.selectedCount", { n: selectedItems.length }) }}</span>
+          <span class="text-muted text-sm">{{
+            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>
+          <strong class="text-primary text-lg"
+            ><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>
 
       <VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
         <UiEmptyState :text="t('cart.empty')" />
-        <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>
+        <NuxtLink
+          class="border-primary bg-primary hover:bg-primary-hover inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-white"
+          to="/"
+          >{{ t("cart.continueShopping") }}</NuxtLink
+        >
       </VCard>
-      <div v-else class="py-8 text-center text-muted">{{ $t("common.loading") }}</div>
+      <div v-else class="text-muted py-8 text-center">{{ $t("common.loading") }}</div>
     </div>
   </div>
 </template>
-
-
diff --git a/apps/mall/pages/checkout/index.vue b/apps/mall/pages/checkout/index.vue
index c47917d..ed15ab0 100644
--- a/apps/mall/pages/checkout/index.vue
+++ b/apps/mall/pages/checkout/index.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { t as pick } from "@vmall/shared";
-import type { Address, AddressBookEntry, CartItem, Coupon, GroupBuyIntent, LocalizedText } from "@vmall/shared";
+import type {
+  Address,
+  AddressBookEntry,
+  CartItem,
+  Coupon,
+  GroupBuyIntent,
+  LocalizedText,
+} from "@vmall/shared";
 
 type CheckoutGroup = {
   shopId: string;
@@ -122,8 +129,7 @@ async function loadCart(): Promise<void> {
     if (intent && !items.value.some((item) => item.sku_id === intent.sku_id)) {
       groupIntent.value = null;
     }
-    selectedAddressId.value =
-      list.find((address) => address.is_default)?.id ?? list[0]?.id ?? "";
+    selectedAddressId.value = list.find((address) => address.is_default)?.id ?? list[0]?.id ?? "";
     if (items.value.length === 0) {
       await router.replace("/cart");
     }
@@ -176,83 +182,175 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg font-sans text-text">
-    <div class="mx-auto max-w-mall px-4 py-6">
+  <div class="bg-bg text-text min-h-screen font-sans">
+    <div class="max-w-mall mx-auto px-4 py-6">
       <UiStepBar :steps="stepLabels" :active="1" />
-      <header class="mb-4"><h1 class="m-0 text-xl font-medium">{{ 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="mb-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger">{{ error }}</p>
+      <p v-if="error" class="border-danger/30 bg-danger/10 text-danger mb-4 border px-3.5 py-2.5">
+        {{ error }}
+      </p>
       <template v-if="!loading && items.length > 0">
         <VCard class="mb-4 p-5">
-          <h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.address") }}</h2>
+          <h2 class="mt-0 mb-4 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="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"
+              class="border-border has-[:checked]:border-primary has-[:checked]:bg-primary-soft flex cursor-pointer items-start gap-3 rounded-md border p-3 text-sm"
             >
-              <input v-model="selectedAddressId" class="mt-1 h-4 w-4 accent-primary" type="radio" name="shipping-address" :value="address.id" />
+              <input
+                v-model="selectedAddressId"
+                class="accent-primary mt-1 h-4 w-4"
+                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 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>
-              <VBadge v-if="address.is_default" tone="blue">{{ t("checkout.defaultAddress") }}</VBadge>
+              <VBadge v-if="address.is_default" tone="blue">{{
+                t("checkout.defaultAddress")
+              }}</VBadge>
             </label>
           </div>
           <div v-else>
-            <p class="mb-3 text-sm text-muted">{{ t("checkout.noSavedAddress") }}</p>
+            <p class="text-muted mb-3 text-sm">{{ 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>
+              <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>
         </VCard>
 
         <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>
+          <h2 class="mt-0 mb-4 text-base font-semibold">{{ t("checkout.orderPreview") }}</h2>
+          <div
+            v-for="group in groups"
+            :key="group.shopId"
+            class="border-border border-b pb-3 last:border-b-0 last:pb-0"
+          >
+            <header class="border-border border-b 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="border-bg grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b 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-muted text-xs">{{ item.sku_code }}</span>
+              </div>
               <PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" />
-              <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>
+              <span class="text-muted text-xs">× {{ item.qty }}</span>
+              <strong class="text-primary text-right"
+                ><PriceText
+                  :amount-minor="item.unit_price_minor * item.qty"
+                  :currency="item.currency"
+              /></strong>
             </div>
-            <div v-if="!groupIntent && couponsForShop(group.shopId).length > 0" class="flex flex-wrap items-center gap-3 pt-3 text-sm">
+            <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">
+              <select
+                v-model="selectedCoupon[group.shopId]"
+                class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
+              >
                 <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="text-danger">− <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>
         </VCard>
 
         <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" />
+          <label class="mb-1 block text-sm font-medium" for="order-remark">{{
+            t("checkout.remark")
+          }}</label>
+          <textarea
+            id="order-remark"
+            v-model="remark"
+            class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
+            :placeholder="t('checkout.remarkPlaceholder')"
+            rows="3"
+          />
         </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">
+        <footer
+          class="border-border bg-surface mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border 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>
+          <strong class="text-primary text-lg"
+            ><PriceText :amount-minor="totalMinor" :currency="sourceCurrency"
+          /></strong>
+          <VBtn variant="primary" type="button" :disabled="submitting" @click="submitOrder">{{
+            t("checkout.submit")
+          }}</VBtn>
         </footer>
       </template>
       <VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
         <UiEmptyState :text="t('checkout.noItems')" />
-        <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>
+        <NuxtLink
+          class="border-border bg-surface hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
+          to="/cart"
+          >{{ t("checkout.backToCart") }}</NuxtLink
+        >
       </VCard>
-      <div v-else class="py-8 text-center text-muted">{{ $t("common.loading") }}</div>
+      <div v-else class="text-muted py-8 text-center">{{ $t("common.loading") }}</div>
     </div>
   </div>
 </template>
-
-
diff --git a/apps/mall/pages/checkout/pay.vue b/apps/mall/pages/checkout/pay.vue
index a05c0a1..f80b766 100644
--- a/apps/mall/pages/checkout/pay.vue
+++ b/apps/mall/pages/checkout/pay.vue
@@ -36,7 +36,9 @@ const paymentOptions = computed(() => [
   { value: "alipay", label: t("checkout.alipay") },
 ]);
 
-const grandTotalMinor = computed(() => orders.value.reduce((total, order) => total + order.total_minor, 0));
+const grandTotalMinor = computed(() =>
+  orders.value.reduce((total, order) => total + order.total_minor, 0),
+);
 const totalCurrency = computed(() => orders.value[0]?.currency ?? currency.value);
 
 function imageFor(image: string | null): string {
@@ -79,51 +81,102 @@ onMounted(() => void loadOrders());
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg font-sans text-text">
-    <div class="mx-auto max-w-mall px-4 py-6">
+  <div class="bg-bg text-text min-h-screen font-sans">
+    <div class="max-w-mall mx-auto px-4 py-6">
       <UiStepBar :steps="stepLabels" :active="2" />
-      <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>
+      <header class="mb-4">
+        <h1 class="m-0 text-xl font-medium">{{ t("checkout.payTitle") }}</h1>
+      </header>
+      <p v-if="error" class="border-danger/30 bg-danger/10 text-danger mb-4 border px-3.5 py-2.5">
+        {{ error }}
+      </p>
       <template v-if="!loading && orders.length > 0">
         <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">
+            <header
+              class="border-border flex items-center justify-between border-b px-4 py-3 text-sm"
+            >
               <span>{{ t("checkout.orderNo") }}: {{ order.order_no }}</span>
               <span class="text-muted">{{ shopName(order.shop_id) }}</span>
             </header>
-            <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>
+            <div
+              v-for="item in order.items"
+              :key="item.id"
+              class="border-bg grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b px-4 py-3"
+            >
+              <img
+                class="border-border h-14 w-14 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-muted text-xs">{{ 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="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>
+              <span class="text-muted text-xs">× {{ item.qty }}</span>
+              <strong class="text-primary text-right"
+                ><PriceText
+                  :amount-minor="item.unit_price_minor * item.qty"
+                  :currency="order.currency"
+              /></strong>
             </div>
             <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>
+              <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>
           </VCard>
         </section>
         <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" />
+          <h2 class="mt-0 mb-4 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="accent-primary h-4 w-4"
+              type="radio"
+              name="payment-method"
+              :value="option.value"
+            />
             <span>{{ option.label }}</span>
           </label>
         </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">
+        <footer
+          class="border-border bg-surface mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border 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>
+          <strong class="text-primary text-lg"
+            ><PriceText :amount-minor="grandTotalMinor" :currency="totalCurrency"
+          /></strong>
+          <VBtn variant="primary" type="button" :disabled="paying" @click="confirmPayment">{{
+            t("checkout.confirmPay")
+          }}</VBtn>
         </footer>
       </template>
       <VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
         <UiEmptyState :text="t('checkout.noPendingOrders')" />
-        <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>
+        <NuxtLink
+          class="border-border bg-surface hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
+          to="/"
+          >{{ t("checkout.backHome") }}</NuxtLink
+        >
       </VCard>
-      <div v-else class="py-8 text-center text-muted">{{ $t("common.loading") }}</div>
+      <div v-else class="text-muted py-8 text-center">{{ $t("common.loading") }}</div>
     </div>
   </div>
 </template>
-
-
diff --git a/apps/mall/pages/checkout/success.vue b/apps/mall/pages/checkout/success.vue
index d59c388..f5de63d 100644
--- a/apps/mall/pages/checkout/success.vue
+++ b/apps/mall/pages/checkout/success.vue
@@ -12,20 +12,31 @@ const stepLabels = computed(() => [
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg font-sans text-text">
-    <div class="mx-auto max-w-mall px-4 py-6">
+  <div class="bg-bg text-text min-h-screen font-sans">
+    <div class="max-w-mall mx-auto px-4 py-6">
       <UiStepBar :steps="stepLabels" :active="3" />
       <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="bg-success mx-auto flex h-[72px] w-[72px] items-center justify-center rounded-full text-5xl leading-none text-white"
+          aria-hidden="true"
+        >
+          ✓
+        </div>
+        <h1 class="mt-5 mb-2 text-2xl font-medium">{{ t("checkout.successTitle") }}</h1>
+        <p class="text-muted m-0">{{ 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>
+          <NuxtLink
+            class="border-primary bg-primary hover:bg-primary-hover inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-white"
+            to="/user/orders"
+            >{{ t("checkout.viewOrders") }}</NuxtLink
+          >
+          <NuxtLink
+            class="border-border bg-surface hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
+            to="/"
+            >{{ t("checkout.continueShopping") }}</NuxtLink
+          >
         </div>
       </VCard>
     </div>
   </div>
 </template>
-
-
diff --git a/apps/mall/pages/collective.vue b/apps/mall/pages/collective.vue
index 0061910..3616d5f 100644
--- a/apps/mall/pages/collective.vue
+++ b/apps/mall/pages/collective.vue
@@ -66,8 +66,7 @@ async function start(activity: GroupBuyingActivityView, open: boolean): Promise<
     };
     await router.push("/checkout");
   } catch (err: unknown) {
-    error.value =
-      err instanceof ApiError ? err.message : t("marketing.groupFailed");
+    error.value = err instanceof ApiError ? err.message : t("marketing.groupFailed");
   } finally {
     workingId.value = "";
   }
@@ -80,32 +79,114 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg pb-14 font-sans text-text">
+  <div class="bg-bg text-text min-h-screen pb-14 font-sans">
     <UiBreadcrumb :items="breadcrumb" />
-    <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" />
+    <section class="max-w-mall bg-surface mx-auto px-4">
+      <img
+        class="h-[350px] w-full object-cover"
+        src="/mock/collective-banner.svg"
+        :alt="t('marketing.collectiveBannerAlt')"
+      />
+      <header class="border-border bg-bg mt-5 border px-4 py-3.5">
+        <h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-[17px] font-medium">
+          {{ t("marketing.collectiveTitle") }}
+        </h1>
+      </header>
+      <p
+        v-if="error"
+        class="border-danger/30 bg-danger/10 text-danger my-4 border px-3.5 py-2.5"
+        role="alert"
+      >
+        {{ error }}
+      </p>
+      <div v-if="loading" class="text-muted py-6">{{ t("common.loading") }}</div>
+      <div
+        v-else-if="activities.length"
+        class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4 py-5"
+      >
+        <VCard
+          v-for="activity in activities"
+          :key="activity.id"
+          :padded="false"
+          class="min-w-0 overflow-hidden"
+        >
+          <NuxtLink
+            :to="`/goods/${activity.product_slug}`"
+            class="bg-bg flex h-52 items-center justify-center"
+          >
+            <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="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>
+            <NuxtLink
+              :to="`/goods/${activity.product_slug}`"
+              class="hover:text-primary line-clamp-2 font-medium"
+              >{{ pick(activity.name, locale) }}</NuxtLink
+            >
+            <div class="mt-2 flex items-center justify-between gap-2">
+              <span class="text-primary text-lg font-semibold"
+                ><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="text-muted my-2 text-sm">
+              <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
+                v-for="group in activity.open_groups"
+                :key="group.id"
+                class="border-border has-[:checked]:border-primary has-[:checked]:bg-primary-soft flex cursor-pointer items-center gap-2 rounded-md border p-2 text-xs"
+              >
+                <input
+                  v-model="selectedGroup[activity.id]"
+                  class="accent-primary h-4 w-4"
+                  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="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>
+            <p v-else class="text-muted my-2 text-sm">{{ 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="text-muted mt-2 text-sm">
+              {{ joined(activity, chosenGroup(activity.id)) }}
+            </p>
           </div>
         </VCard>
       </div>
@@ -113,5 +194,3 @@ onMounted(() => {
     </section>
   </div>
 </template>
-
-
diff --git a/apps/mall/pages/forgot-password.vue b/apps/mall/pages/forgot-password.vue
index 8a41ec2..443a1f8 100644
--- a/apps/mall/pages/forgot-password.vue
+++ b/apps/mall/pages/forgot-password.vue
@@ -58,48 +58,86 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <section class="min-h-screen bg-bg px-5 py-10 font-sans text-text">
+  <section class="bg-bg text-text min-h-screen px-5 py-10 font-sans">
     <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>
+          <div
+            class="bg-success mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full 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>
+          <p class="text-muted my-3.5 mb-7 text-sm leading-relaxed">
+            {{ 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">
+        <div class="border-border mb-6 flex items-baseline gap-4 border-b 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>
+          <NuxtLink class="text-primary hover:text-primary-hover text-sm" 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')" />
+            <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')" />
+            <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')" />
+            <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">
+              <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>
+          <p v-if="errorKey" class="text-danger -mt-1 mb-3 text-xs">{{ 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>
+          <NuxtLink class="text-primary hover:text-primary-hover" to="/login">{{
+            t("auth.loginNow")
+          }}</NuxtLink>
         </div>
       </template>
     </VCard>
   </section>
 </template>
-
-
diff --git a/apps/mall/pages/goods/[id].vue b/apps/mall/pages/goods/[id].vue
index 21149a9..25e9272 100644
--- a/apps/mall/pages/goods/[id].vue
+++ b/apps/mall/pages/goods/[id].vue
@@ -18,7 +18,7 @@ const signInThenReturn = useSignInRedirect();
 
 const routeId = computed(() => {
   const value = route.params.id;
-  return Array.isArray(value) ? value[0] ?? "" : value ?? "";
+  return Array.isArray(value) ? (value[0] ?? "") : (value ?? "");
 });
 // One request key for the whole page: the ranking rail must be derived from the
 // product that was just fetched, and chaining two useAsyncData calls left the
@@ -120,7 +120,9 @@ watch(
   detail,
   (current) => {
     for (const key of Object.keys(selectedAttributes)) delete selectedAttributes[key];
-    const initial = current ? (current.product.skus?.find((sku) => sku.active) ?? lowestSku(current.product)) : null;
+    const initial = current
+      ? (current.product.skus?.find((sku) => sku.active) ?? lowestSku(current.product))
+      : null;
     if (initial) Object.assign(selectedAttributes, initial.attributes);
     quantity.value = 1;
     galleryIndex.value = 0;
@@ -134,18 +136,22 @@ const matchedSku = computed<Sku | null>(() => {
   const skus = product.value?.skus ?? [];
   const keys = attributeGroups.value.map((group) => group.key);
   if (!keys.every((key) => selectedAttributes[key])) return null;
-  return skus.find(
-    (sku) => sku.active && keys.every((key) => sku.attributes[key] === selectedAttributes[key]),
-  ) ?? null;
+  return (
+    skus.find(
+      (sku) => sku.active && keys.every((key) => sku.attributes[key] === selectedAttributes[key]),
+    ) ?? null
+  );
 });
 
-
 const stock = computed(() => matchedSku.value?.stock ?? 0);
 const marketPrice = computed(() => {
   const amount = matchedSku.value?.price_minor;
   return amount === undefined ? 0 : Math.round((amount * 115) / 100);
 });
-const currentImage = computed(() => product.value?.images[galleryIndex.value] ?? product.value?.images[0] ?? "/mock/product-1.svg");
+const currentImage = computed(
+  () =>
+    product.value?.images[galleryIndex.value] ?? product.value?.images[0] ?? "/mock/product-1.svg",
+);
 
 // Shared with the shell's category menu, so the tree is not refetched.
 const { data: categories } = await useAsyncData("shell-categories", () => $api.listCategories());
@@ -293,41 +299,238 @@ const detailImages = computed(() => product.value?.images ?? []);
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg pb-16 font-sans text-text">
+  <div class="bg-bg text-text min-h-screen pb-16 font-sans">
     <UiBreadcrumb :items="breadcrumbItems" />
-    <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">
+    <main v-if="detail" class="max-w-mall mx-auto w-full px-4">
+      <section
+        class="border-border bg-surface grid overflow-hidden rounded-lg border 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 class="bg-bg flex aspect-square items-center justify-center overflow-hidden">
+            <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="border-border bg-surface hover:border-primary h-16 w-16 overflow-hidden rounded-sm border p-0"
+              :class="galleryIndex === index ? 'border-primary border-2' : ''"
+              :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="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 class="border-border border-l p-5 max-lg:border-t max-lg:border-l-0">
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <h1 class="text-text m-0 text-xl font-bold">
+                {{ pick(detail.product.name, locale) }}
+              </h1>
+              <p class="text-muted mt-2 text-sm leading-relaxed">
+                {{ 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="text-danger my-2 text-sm">{{ favoriteError }}</p>
+          <div class="bg-primary-soft my-4 flex flex-wrap items-baseline gap-2 px-4 py-3">
+            <span class="text-muted text-xs">{{ t("product.currentPrice") }}</span
+            ><strong v-if="matchedSku" class="text-primary text-2xl font-semibold"
+              ><PriceText
+                :amount-minor="matchedSku.price_minor"
+                :currency="matchedSku.currency" /></strong
+            ><strong v-else class="text-primary text-2xl font-semibold">{{
+              t("product.unavailable")
+            }}</strong
+            ><span v-if="matchedSku" class="text-muted text-xs"
+              >{{ t("product.marketPrice") }}
+              <s><PriceText :amount-minor="marketPrice" :currency="matchedSku.currency" /></s
+            ></span>
+          </div>
+          <div class="text-muted mb-4 flex gap-5 text-xs">
+            <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="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-if="detail.coupons.length > 0" class="mb-4 flex gap-3">
+            <span class="text-muted w-16 shrink-0 text-sm">{{ t("product.coupons") }}</span>
+            <div class="flex flex-wrap gap-2">
+              <span
+                v-for="coupon in detail.coupons"
+                :key="coupon.id"
+                class="border-primary/30 bg-primary-soft text-primary rounded-sm border px-2 py-1 text-xs"
+                >{{ pick(coupon.title, locale) }}
+                <small class="text-muted block text-[11px]">{{
+                  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-danger text-sm">{{ claimError }}</span>
+            </div>
+          </div>
 
-          <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 v-for="group in attributeGroups" :key="group.key" class="mb-3 flex gap-3">
+            <span class="text-muted w-16 shrink-0 pt-1 text-sm">{{ group.key }}</span>
+            <div class="flex flex-wrap gap-2">
+              <button
+                v-for="value in group.values"
+                :key="value"
+                type="button"
+                class="border-border bg-surface text-text hover:border-primary hover:text-primary rounded-md border px-3 py-1.5 text-sm"
+                :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="text-muted w-16 shrink-0 text-sm">{{ 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="text-danger my-2 text-sm">
+            {{ t("product.noStock") }}
+          </p>
+          <p v-else-if="!matchedSku" class="text-danger my-2 text-sm">
+            {{ t("product.unavailable") }}
+          </p>
         </div>
       </section>
 
       <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>
+            <h2 class="border-primary mb-3 border-l-[3px] pl-2 text-sm font-medium">
+              {{ t("product.store") }}
+            </h2>
+            <div class="border-border flex items-center gap-2.5 border-b pb-3">
+              <img
+                v-if="detail.store.logo"
+                class="border-border h-12 w-12 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="text-muted my-3 text-xs">
+              <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="text-muted flex items-center justify-between py-1 text-xs"
+              >
+                <span>{{ row.label }}</span
+                ><UiRatingStars :value="row.value" :size="13" /></div
+            ></template>
+            <div class="mt-3 grid gap-2">
+              <NuxtLink
+                class="border-primary bg-primary hover:bg-primary-hover rounded-md border px-3 py-2 text-center text-sm font-medium text-white no-underline"
+                :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>
+          <VCard
+            ><h2 class="border-primary mb-2 border-l-[3px] 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="border-border text-text grid grid-cols-[48px_minmax(0,1fr)] gap-2 border-t py-2 text-xs 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="text-primary mt-1 block text-right"
+                  ><PriceText
+                    :amount-minor="lowestSku(item)!.price_minor"
+                    :currency="lowestSku(item)!.currency" /></span></span></NuxtLink
+          ></VCard>
         </aside>
-        <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>
+        <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-text text-sm leading-relaxed">
+                  {{ 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-text text-sm leading-relaxed">
+                  {{ pick(detail.store.after_sale, locale) }}
+                </p>
+              </div></template
+            ></UiTabs
+          ></VCard
+        >
       </section>
     </main>
     <UiEmptyState v-else :text="t('product.productNotFound')" />
   </div>
 </template>
-
diff --git a/apps/mall/pages/index.vue b/apps/mall/pages/index.vue
index 9915f28..11fee49 100644
--- a/apps/mall/pages/index.vue
+++ b/apps/mall/pages/index.vue
@@ -31,7 +31,9 @@ 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)));
+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.
@@ -62,17 +64,26 @@ const visibleFloors = computed(() => floors.value ?? []);
 
 <template>
   <div>
-    <section class="mx-auto max-w-mall px-4">
-      <div class="grid h-hero grid-cols-[240px_minmax(0,1fr)_220px] bg-surface">
+    <section class="max-w-mall mx-auto px-4">
+      <div class="h-hero bg-surface grid grid-cols-[240px_minmax(0,1fr)_220px]">
         <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">
+        <aside class="border-border bg-surface flex h-full flex-col border-l">
+          <ul class="bg-border grid list-none grid-cols-2 gap-px 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">
+              <NuxtLink
+                :to="q.url"
+                class="text-muted hover:text-primary block px-1 py-3 text-[12px] no-underline transition-colors"
+              >
+                <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>
@@ -80,41 +91,60 @@ const visibleFloors = computed(() => floors.value ?? []);
             </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 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>
     </section>
 
-    <section v-if="stripPromos.length > 0" class="mx-auto mb-5 mt-5 max-w-mall px-4">
+    <section v-if="stripPromos.length > 0" class="max-w-mall mx-auto mt-5 mb-5 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" />
+          <img
+            :src="p.image"
+            :alt="t('home.hotPromo')"
+            loading="lazy"
+            class="block h-40 w-full object-cover"
+          />
         </NuxtLink>
       </div>
     </section>
 
     <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">
+      <section
+        v-for="floor in visibleFloors"
+        :key="floor.categoryId"
+        class="max-w-mall mx-auto mb-[30px] px-4 last:mb-0"
+      >
+        <header class="border-primary flex items-end justify-between border-b-2">
           <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>
+            class="text-muted hover:text-primary pb-2 text-[12px] no-underline transition-colors"
+            >{{ t("home.viewMore") }} ›</NuxtLink
+          >
         </header>
-        <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" />
+        <div class="bg-surface flex">
+          <NuxtLink
+            v-if="floor.advImage"
+            :to="floor.advUrl"
+            class="border-border shrink-0 border-r"
+          >
+            <img
+              :src="floor.advImage"
+              :alt="pick(floor.name, locale)"
+              loading="lazy"
+              class="block h-[614px] w-[234px] object-cover"
+            />
           </NuxtLink>
-          <div class="grid min-w-0 flex-1 grid-cols-4 gap-px bg-border p-px">
+          <div class="bg-border grid min-w-0 flex-1 grid-cols-4 gap-px p-px">
             <UiProductCard v-for="p in floor.products" :key="p.id" :product="p" />
           </div>
         </div>
diff --git a/apps/mall/pages/integral.vue b/apps/mall/pages/integral.vue
index f6c5b6d..707e6e5 100644
--- a/apps/mall/pages/integral.vue
+++ b/apps/mall/pages/integral.vue
@@ -57,14 +57,10 @@ async function loadCatalog(): Promise<void> {
 async function loadAccountData(): Promise<void> {
   if (!session.isLoggedIn) return;
   try {
-    const [orders, list] = await Promise.all([
-      $api.listMyRedemptions(),
-      $api.listMyAddresses(),
-    ]);
+    const [orders, list] = await Promise.all([$api.listMyRedemptions(), $api.listMyAddresses()]);
     redemptions.value = orders;
     addresses.value = list;
-    selectedAddressId.value =
-      list.find((address) => address.is_default)?.id ?? list[0]?.id ?? "";
+    selectedAddressId.value = list.find((address) => address.is_default)?.id ?? list[0]?.id ?? "";
   } catch {
     redemptions.value = [];
   }
@@ -123,48 +119,179 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg pb-14 font-sans text-text">
+  <div class="bg-bg text-text min-h-screen pb-14 font-sans">
     <UiBreadcrumb :items="breadcrumb" />
-    <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')" />
+    <section class="max-w-mall bg-surface mx-auto 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">
+        <section
+          class="border-border bg-surface flex min-h-[106px] items-center gap-3 border px-4 py-3"
+        >
           <template v-if="session.isLoggedIn">
-            <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>
+            <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="text-muted mt-1 mb-1 text-xs">{{ t("marketing.pointsBalance") }}</p>
+              <strong class="text-primary text-xl">{{
+                stats ? stats.points : t("common.loading")
+              }}</strong>
+            </div>
           </template>
           <template v-else>
-            <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>
+            <div class="flex-1">
+              <h2 class="m-0 text-base">{{ t("marketing.pointsBalance") }}</h2>
+              <p class="text-muted my-1 text-sm">{{ t("marketing.loginPrompt") }}</p>
+            </div>
+            <div class="flex gap-2">
+              <NuxtLink
+                class="border-primary bg-primary hover:bg-primary-hover inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm text-white"
+                to="/login"
+                >{{ t("marketing.login") }}</NuxtLink
+              ><NuxtLink
+                class="border-border bg-surface hover:bg-bg inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm"
+                to="/register"
+                >{{ t("marketing.register") }}</NuxtLink
+              >
+            </div>
           </template>
         </section>
-        <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
+          v-for="(label, index) in [
+            t('marketing.customize'),
+            t('marketing.shipping'),
+            t('marketing.support'),
+          ]"
+          :key="label"
+          class="border-border bg-surface flex min-h-[106px] items-center gap-3 border px-4"
+        >
+          <span class="text-primary text-2xl">0{{ index + 1 }}</span
+          ><strong>{{ label }}</strong>
+        </div>
       </div>
 
-      <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>
+      <header class="border-border bg-bg border px-4 py-3.5">
+        <h1 class="border-primary m-0 border-l-[3px] 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>
+        <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="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
+          >
+            <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="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>
+      <p
+        v-if="error"
+        class="border-danger/30 bg-danger/10 text-danger my-2 border px-3.5 py-2.5"
+        role="alert"
+      >
+        {{ error }}
+      </p>
+      <p
+        v-if="notice"
+        class="border-success/30 bg-success/10 text-success my-2 border px-3.5 py-2.5"
+        aria-live="polite"
+      >
+        {{ notice }}
+      </p>
+      <div v-if="loading" class="text-muted py-6">{{ t("common.loading") }}</div>
+      <div
+        v-else-if="products.length"
+        class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4 py-5"
+      >
+        <VCard
+          v-for="item in products"
+          :key="item.id"
+          :padded="false"
+          class="min-w-0 overflow-hidden"
+        >
+          <div class="bg-bg flex h-52 items-center justify-center">
+            <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="text-primary mt-2 text-lg font-semibold">
+              {{ t("marketing.points", { n: item.points_price }) }}
+            </div>
+            <p class="text-muted my-2 text-sm">{{ 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="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>
+        <header class="border-border bg-bg mt-5 border px-4 py-3.5">
+          <h1 class="border-primary m-0 border-l-[3px] 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>
+          <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>
-
-
diff --git a/apps/mall/pages/login.vue b/apps/mall/pages/login.vue
index 2b84776..ffdb138 100644
--- a/apps/mall/pages/login.vue
+++ b/apps/mall/pages/login.vue
@@ -19,7 +19,9 @@ const submitting = ref(false);
 const redirectTarget = computed((): string => {
   const raw = route.query.redirect;
   const value = Array.isArray(raw) ? raw[0] : raw;
-  return typeof value === "string" && value.startsWith("/") && !value.startsWith("//") ? value : "/";
+  return typeof value === "string" && value.startsWith("/") && !value.startsWith("//")
+    ? value
+    : "/";
 });
 
 function validate(): boolean {
@@ -45,9 +47,10 @@ async function submit(): Promise<void> {
     session.setAuth(auth);
     await router.push(redirectTarget.value);
   } catch (error) {
-    errorKey.value = error instanceof ApiError && error.status === 401
-      ? "auth.invalidCredentials"
-      : "auth.requestFailed";
+    errorKey.value =
+      error instanceof ApiError && error.status === 401
+        ? "auth.invalidCredentials"
+        : "auth.requestFailed";
   } finally {
     submitting.value = false;
   }
@@ -55,31 +58,45 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <section class="min-h-screen bg-bg px-5 py-10 font-sans text-text">
+  <section class="bg-bg text-text min-h-screen px-5 py-10 font-sans">
     <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">
+      <div class="border-border mb-7 flex items-baseline gap-4 border-b 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>
+        <NuxtLink class="text-primary hover:text-primary-hover text-sm" to="/register">{{
+          t("auth.registerTab")
+        }}</NuxtLink>
       </div>
       <form @submit.prevent="submit">
         <VField :label="t('common.email')">
-          <VInput v-model.trim="email" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
+          <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')" />
+          <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>
+        <p v-if="errorKey" class="text-danger -mt-1 mb-3 text-xs">{{ 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">
+      <div class="text-muted mt-5 flex flex-wrap items-center gap-2 text-xs">
         <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>
+        <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>
-
-
diff --git a/apps/mall/pages/register.vue b/apps/mall/pages/register.vue
index bfbfca6..e940e0d 100644
--- a/apps/mall/pages/register.vue
+++ b/apps/mall/pages/register.vue
@@ -45,9 +45,8 @@ async function submit(): Promise<void> {
     session.setAuth(auth);
     await router.push("/");
   } catch (error) {
-    errorKey.value = error instanceof ApiError && error.status === 409
-      ? "auth.emailTaken"
-      : "auth.requestFailed";
+    errorKey.value =
+      error instanceof ApiError && error.status === 409 ? "auth.emailTaken" : "auth.requestFailed";
   } finally {
     submitting.value = false;
   }
@@ -55,37 +54,61 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <section class="min-h-screen bg-bg px-5 py-10 font-sans text-text">
+  <section class="bg-bg text-text min-h-screen px-5 py-10 font-sans">
     <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">
+      <div class="border-border mb-6 flex items-baseline gap-4 border-b 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>
+        <NuxtLink class="text-primary hover:text-primary-hover text-sm" to="/login">{{
+          t("auth.loginTab")
+        }}</NuxtLink>
       </div>
       <form @submit.prevent="submit">
         <VField :label="t('common.displayName')">
-          <VInput v-model.trim="displayName" type="text" autocomplete="name" :placeholder="t('auth.displayNamePlaceholder')" />
+          <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')" />
+          <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')" />
+          <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')" />
+          <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>
+        <p v-if="errorKey" class="text-danger -mt-1 mb-3 text-xs">{{ 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">
+      <div class="text-muted mt-4 flex flex-wrap items-center gap-2 text-xs">
         <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>
+        <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>
-
-
diff --git a/apps/mall/pages/search.vue b/apps/mall/pages/search.vue
index 8842342..887b284 100644
--- a/apps/mall/pages/search.vue
+++ b/apps/mall/pages/search.vue
@@ -17,8 +17,7 @@ const queryValue = (value: unknown): string => {
   return typeof value === "string" ? value : "";
 };
 
-const parseSort = (raw: string): SortType =>
-  raw === "price" || raw === "sales" ? raw : "default";
+const parseSort = (raw: string): SortType => (raw === "price" || raw === "sales" ? raw : "default");
 
 const state = computed(() => {
   const sort = parseSort(queryValue(route.query.sort));
@@ -95,9 +94,12 @@ const chooseBrand = (id?: string): void => {
 };
 
 const chooseSort = (sort: SortType): void => {
-  const order: OrderType = state.value.sort === sort && sort !== "default"
-    ? state.value.order === "asc" ? "desc" : "asc"
-    : "asc";
+  const order: OrderType =
+    state.value.sort === sort && sort !== "default"
+      ? state.value.order === "asc"
+        ? "desc"
+        : "asc"
+      : "asc";
   void replaceQuery({ sort, order, page: "1" });
 };
 
@@ -138,34 +140,131 @@ const sortOptions = computed(() => [
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg pb-12 font-sans text-text">
+  <div class="bg-bg text-text min-h-screen pb-12 font-sans">
     <UiBreadcrumb :items="breadcrumbItems" />
-    <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>
+    <main class="max-w-mall mx-auto w-full px-4">
+      <VCard :padded="false" class="border-border bg-surface border px-5">
+        <div class="border-border flex min-h-12 items-start gap-4 border-b py-3 last:border-b-0">
+          <strong class="text-text w-[90px] shrink-0 text-[13px] leading-7 font-semibold">{{
+            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>
+            <button
+              type="button"
+              class="text-muted hover:bg-primary rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 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="text-muted hover:bg-primary rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 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="text-muted hover:bg-primary rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 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="text-muted hover:bg-primary rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 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="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
+          v-if="brands.length"
+          class="border-border flex min-h-12 items-start gap-4 border-b py-3"
+        >
+          <strong class="text-text w-[90px] shrink-0 text-[13px] leading-7 font-semibold">{{
+            t("search.brand")
+          }}</strong>
+          <div class="flex flex-wrap gap-x-2 gap-y-1">
+            <button
+              type="button"
+              class="text-muted hover:bg-primary rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 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="text-muted hover:bg-primary rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 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="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>
+          <strong class="text-text w-[90px] shrink-0 text-[13px] leading-7 font-semibold">{{
+            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="text-muted hover:bg-primary min-w-[60px] rounded-md border-0 bg-transparent px-2.5 py-0 text-[13px] leading-7 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>
       </VCard>
 
-      <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>
+      <div class="text-muted px-0.5 pt-[22px] pb-3 text-[13px]">
+        {{ t("search.resultCount", { n: result.total }) }}
+      </div>
+      <div
+        v-if="result.items.length"
+        class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4"
+      >
+        <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) })" />
+      <UiPagination
+        :page="result.page"
+        :total="result.total"
+        :per-page="result.per_page"
+        @change="(page) => replaceQuery({ page: String(page) })"
+      />
     </main>
   </div>
 </template>
-
diff --git a/apps/mall/pages/seckill.vue b/apps/mall/pages/seckill.vue
index 3097577..ff398b7 100644
--- a/apps/mall/pages/seckill.vue
+++ b/apps/mall/pages/seckill.vue
@@ -87,27 +87,103 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg pb-14 font-sans text-text">
+  <div class="bg-bg text-text min-h-screen pb-14 font-sans">
     <UiBreadcrumb :items="breadcrumb" />
-    <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>
+    <section class="max-w-mall bg-surface mx-auto px-4">
+      <header class="border-border bg-bg border border-b-0 px-4 py-3.5">
+        <h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-[17px] font-medium">
+          {{ t("marketing.seckillTitle") }}
+        </h1>
+      </header>
+      <div class="border-border grid grid-cols-2 border border-b-0 sm:grid-cols-4" role="tablist">
+        <button
+          v-for="(session, index) in sessions"
+          :key="session.id"
+          type="button"
+          class="border-border bg-surface flex min-h-[70px] cursor-pointer flex-col items-center justify-center border-0 border-r 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-muted text-xs">{{
+            index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming")
+          }}</span>
         </button>
       </div>
-      <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>
+      <p
+        v-if="activeSession"
+        class="border-border bg-bg text-primary m-0 border px-4 py-3 text-center text-lg font-semibold"
+        aria-live="polite"
+      >
+        {{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}
+      </p>
+      <p
+        v-if="error"
+        class="border-danger/30 bg-danger/10 text-danger my-4 border px-3.5 py-2.5"
+        role="alert"
+      >
+        {{ error }}
+      </p>
+      <div v-if="loading" class="text-muted py-6">{{ t("common.loading") }}</div>
+      <div
+        v-else-if="activeSession && activeSession.items.length"
+        class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4 py-5"
+      >
+        <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="bg-bg flex h-52 items-center justify-center"
+            ><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>
+            <NuxtLink
+              :to="`/goods/${item.product_slug}`"
+              class="hover:text-primary line-clamp-2 font-medium"
+              >{{ pick(item.product_name, locale) }}</NuxtLink
+            >
+            <p class="my-2 flex items-center gap-2">
+              <span class="text-primary text-lg font-semibold"
+                ><PriceText :amount-minor="item.sale_price_minor" :currency="item.currency" /></span
+              ><s class="text-muted text-sm"
+                ><PriceText
+                  :amount-minor="item.original_price_minor"
+                  :currency="item.original_currency"
+              /></s>
+            </p>
+            <div class="text-muted flex items-center gap-2 text-xs">
+              <div class="bg-bg h-2 flex-1 overflow-hidden rounded-full">
+                <span
+                  class="bg-primary block h-full"
+                  :style="{ width: `${soldPct(item)}%` }"
+                ></span>
+              </div>
+              <span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span>
+            </div>
+            <p class="text-muted my-2 text-sm">
+              {{ 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>
         </VCard>
       </div>
@@ -115,5 +191,3 @@ onBeforeUnmount(() => {
     </section>
   </div>
 </template>
-
-
diff --git a/apps/mall/pages/stores/[id].vue b/apps/mall/pages/stores/[id].vue
index 09b1a61..ba7b44b 100644
--- a/apps/mall/pages/stores/[id].vue
+++ b/apps/mall/pages/stores/[id].vue
@@ -13,7 +13,7 @@ const signInThenReturn = useSignInRedirect();
 
 const slug = computed(() => {
   const raw = route.params.id;
-  return typeof raw === "string" ? raw : raw?.[0] ?? "";
+  return typeof raw === "string" ? raw : (raw?.[0] ?? "");
 });
 
 // A rejected read (unknown or suspended slug) leaves this null, which renders
@@ -74,7 +74,9 @@ const rateRows = computed(() => {
     { label: t("stores.service"), value: current.score_service },
     { label: t("stores.speed"), value: current.score_speed },
   ];
-  return rows.filter((row): row is { label: string; value: number } => typeof row.value === "number");
+  return rows.filter(
+    (row): row is { label: string; value: number } => typeof row.value === "number",
+  );
 });
 
 function priceMinorOf(product: Product): number {
@@ -156,38 +158,147 @@ const toggleFavorite = async (): Promise<void> => {
     if (version === favoriteRequestVersion) favoriteBusy.value = false;
   }
 };
-
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg pb-16 font-sans text-text">
+  <div class="bg-bg text-text min-h-screen pb-16 font-sans">
     <UiBreadcrumb :items="breadcrumb" />
     <template v-if="store">
-      <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">
+      <div
+        v-if="store.banner"
+        class="max-w-mall bg-bg mx-auto h-[350px] w-full overflow-hidden 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="max-w-mall mx-auto mt-5 grid w-full 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>
+            <div class="border-border flex items-center gap-3 border-b pb-3">
+              <img
+                v-if="store.logo"
+                class="border-border h-[58px] w-[58px] border object-contain"
+                :src="store.logo"
+                :alt="pick(store.name, locale)"
+              /><span
+                v-else
+                class="border-border bg-bg text-muted flex h-[58px] w-[58px] items-center justify-center border text-lg"
+                >{{ 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="text-primary mt-1 text-xs">{{ t("stores.positiveRate") }}</p>
+              </div>
+            </div>
+            <div v-if="rateRows.length" class="border-border space-y-1 border-b py-3">
+              <div
+                v-for="row in rateRows"
+                :key="row.label"
+                class="text-muted flex min-h-[25px] items-center gap-1 text-xs"
+              >
+                <span class="w-16">{{ row.label }}</span
+                ><UiRatingStars :value="row.value" :size="13" /><strong
+                  class="text-primary ml-auto font-medium"
+                  >{{ row.value.toFixed(1) }}</strong
+                >
+              </div>
+            </div>
+            <dl class="text-muted my-3 text-xs">
+              <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="text-danger mt-1.5 text-xs">{{ 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>
+            <template v-if="store.notice"
+              ><h2 class="border-primary mb-3 border-l-[3px] pl-2 text-sm font-medium">
+                {{ t("stores.notice") }}
+              </h2>
+              <p class="text-text text-sm">{{ pick(store.notice, locale) }}</p></template
+            >
+            <template v-if="store.after_sale"
+              ><h2 class="border-primary mb-3 border-l-[3px] pl-2 text-sm font-medium">
+                {{ t("stores.afterSale") }}
+              </h2>
+              <p class="text-text text-sm">{{ pick(store.after_sale, locale) }}</p></template
+            >
           </VCard>
         </aside>
 
         <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>
+          <header
+            class="border-border bg-bg flex items-center justify-between border px-4 py-3 max-sm:flex-col max-sm:items-start max-sm:gap-2.5"
+          >
+            <h2 class="border-primary m-0 border-l-[3px] pl-2 text-[15px] font-medium">
+              {{ t("stores.storeProducts") }}
+            </h2>
+            <div class="flex">
+              <button
+                type="button"
+                class="border-border text-muted hover:text-primary border-0 border-r bg-transparent px-3 py-0 text-xs"
+                :class="sortMode === 'default' ? 'text-primary font-bold' : ''"
+                @click="chooseSort('default')"
+              >
+                {{ t("stores.sortDefault") }}</button
+              ><button
+                type="button"
+                class="text-muted hover:text-primary border-0 bg-transparent px-3 py-0 text-xs"
+                :class="sortMode === 'price' ? 'text-primary font-bold' : ''"
+                @click="chooseSort('price')"
+              >
+                {{ t("stores.sortPrice") }}
+              </button>
+            </div>
+          </header>
+          <div
+            v-if="productResult.items.length"
+            class="mt-4 grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4"
+          >
+            <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" />
+          <UiPagination
+            :page="productResult.page"
+            :total="productResult.total"
+            :per-page="productResult.per_page"
+            @change="page = $event"
+          />
         </section>
       </div>
     </template>
-    <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 v-else class="max-w-mall mx-auto min-h-[360px] w-full px-4 pt-[60px] text-center">
+      <UiEmptyState :text="t('stores.unknownStore')" /><NuxtLink
+        to="/stores"
+        class="border-border bg-surface text-text mt-4 inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium no-underline"
+        >{{ t("stores.backToStores") }}</NuxtLink
+      >
+    </div>
   </div>
 </template>
-
diff --git a/apps/mall/pages/stores/index.vue b/apps/mall/pages/stores/index.vue
index a82a9d0..ededc6f 100644
--- a/apps/mall/pages/stores/index.vue
+++ b/apps/mall/pages/stores/index.vue
@@ -15,20 +15,70 @@ const breadcrumb = computed(() => [
 </script>
 
 <template>
-  <div class="min-h-screen bg-bg pb-16 font-sans text-text">
+  <div class="bg-bg text-text min-h-screen pb-16 font-sans">
     <UiBreadcrumb :items="breadcrumb" />
-    <section class="mx-auto w-full max-w-mall px-4">
+    <section class="max-w-mall mx-auto w-full 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>
+        <header
+          class="border-border bg-bg flex items-center justify-between border-b px-[18px] py-3.5"
+        >
+          <h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-base font-medium">
+            {{ t("stores.directory") }}
+          </h1>
+        </header>
+        <div v-if="stores.length" class="divide-border divide-y">
+          <article
+            v-for="store in stores"
+            :key="store.id"
+            class="bg-surface hover:bg-bg flex min-h-[126px] items-center gap-0 px-[22px] py-5 max-sm:flex-wrap max-sm:gap-3"
+          >
+            <NuxtLink
+              :to="`/stores/${store.slug}`"
+              class="border-border bg-surface flex h-20 w-20 shrink-0 items-center justify-center border"
+            >
+              <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="bg-bg text-muted flex h-full w-full items-center justify-center text-[28px] font-bold uppercase"
+                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>
+            <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="text-text hover:text-primary block text-base font-bold no-underline"
+                >{{ pick(store.name, locale) }}</NuxtLink
+              >
+              <p v-if="store.company" class="text-muted mt-2 text-[13px]">{{ store.company }}</p>
+              <p
+                v-if="store.region || store.address"
+                class="text-muted mt-2 flex gap-6 text-xs 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="text-primary w-[130px] text-center text-[13px] 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="border-primary bg-primary hover:bg-primary-hover inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium text-white no-underline"
+                >{{ t("stores.visitStore") }}</NuxtLink
+              >
+            </div>
           </article>
         </div>
         <UiEmptyState v-else :text="t('common.empty')" />
@@ -36,4 +86,3 @@ const breadcrumb = computed(() => [
     </section>
   </div>
 </template>
-
diff --git a/apps/mall/pages/user.vue b/apps/mall/pages/user.vue
index 3ab5383..017ec6c 100644
--- a/apps/mall/pages/user.vue
+++ b/apps/mall/pages/user.vue
@@ -26,29 +26,45 @@ const menuGroups = computed(() => [
 ]);
 
 function isActive(to: string): boolean {
-  return to === "/user" ? route.path === "/user" : route.path === to || route.path.startsWith(`${to}/`);
+  return to === "/user"
+    ? route.path === "/user"
+    : route.path === to || route.path.startsWith(`${to}/`);
 }
 </script>
 
 <template>
-  <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">
+  <div class="bg-bg text-text min-h-screen py-8 pb-16 font-sans">
+    <div
+      class="max-w-mall mx-auto grid w-full 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="border-border flex items-center gap-3 border-b 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 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>
+            <ClientOnly
+              ><strong class="text-text block truncate text-sm">{{
+                session.user?.display_name
+              }}</strong></ClientOnly
+            >
+            <NuxtLink
+              class="text-muted hover:text-primary mt-2 inline-block text-xs no-underline"
+              to="/user"
+              >{{ t("user.editProfile") }}</NuxtLink
+            >
           </div>
         </div>
         <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>
+          <h2 class="text-muted mb-2 px-5 text-[13px] font-semibold">{{ group.title }}</h2>
           <NuxtLink
             v-for="item in group.items"
             :key="item.to"
             :to="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="text-text hover:bg-primary-soft hover:text-primary block border-l-[3px] border-transparent px-5 py-2.5 text-[13px] no-underline"
             :class="isActive(item.to) ? 'border-primary bg-primary-soft text-primary' : ''"
           >
             {{ item.label }}
@@ -61,4 +77,3 @@ function isActive(to: string): boolean {
     </div>
   </div>
 </template>
-
diff --git a/apps/mall/pages/user/addresses.vue b/apps/mall/pages/user/addresses.vue
index bf2643f..0782ff9 100644
--- a/apps/mall/pages/user/addresses.vue
+++ b/apps/mall/pages/user/addresses.vue
@@ -102,7 +102,15 @@ async function remove(row: AddressBookEntry): Promise<void> {
 }
 
 async function save(): Promise<void> {
-  if (!form.recipient || !form.phone || !form.country || !form.region || !form.city || !form.line1 || !form.postal_code) {
+  if (
+    !form.recipient ||
+    !form.phone ||
+    !form.country ||
+    !form.region ||
+    !form.city ||
+    !form.line1 ||
+    !form.postal_code
+  ) {
     errorKey.value = "user.validationRequired";
     return;
   }
@@ -137,8 +145,10 @@ async function save(): Promise<void> {
 <template>
   <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>
+      <h1 class="text-text m-0 text-xl font-bold">{{ 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')" />
     <VTable v-else>
@@ -165,12 +175,18 @@ async function save(): Promise<void> {
           <td>{{ row.line1 }}</td>
           <td>{{ row.postal_code }}</td>
           <td>
-            <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>
+            <span v-if="row.is_default" class="text-primary text-xs">{{
+              t("user.defaultAddress")
+            }}</span>
+            <VBtn v-else size="sm" type="button" @click="setDefault(row.id)">{{
+              t("user.setDefault")
+            }}</VBtn>
           </td>
           <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>
+            <VBtn size="sm" variant="danger" type="button" @click="remove(row)">{{
+              t("common.delete")
+            }}</VBtn>
           </td>
         </tr>
       </tbody>
@@ -183,16 +199,22 @@ async function save(): Promise<void> {
         <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 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>
+        <label class="text-text flex items-center gap-2 self-end pb-3 text-sm"
+          ><input v-model="form.is_default" class="accent-primary h-4 w-4" type="checkbox" />
+          <span>{{ t("user.defaultAddress") }}</span></label
+        >
       </div>
-      <p v-if="errorKey" class="mt-2 text-sm text-danger">{{ t(errorKey) }}</p>
+      <p v-if="errorKey" class="text-danger mt-2 text-sm">{{ t(errorKey) }}</p>
       <template #footer>
         <VBtn type="button" @click="open = false">{{ t("common.cancel") }}</VBtn>
-        <VBtn variant="primary" type="button" :disabled="saving" @click="save">{{ t("user.saveAddress") }}</VBtn>
+        <VBtn variant="primary" type="button" :disabled="saving" @click="save">{{
+          t("user.saveAddress")
+        }}</VBtn>
       </template>
     </UiModal>
   </VCard>
 </template>
-
diff --git a/apps/mall/pages/user/aftersales/[id].vue b/apps/mall/pages/user/aftersales/[id].vue
index 9c7cdb5..08fb64c 100644
--- a/apps/mall/pages/user/aftersales/[id].vue
+++ b/apps/mall/pages/user/aftersales/[id].vue
@@ -16,7 +16,13 @@ const carrier = ref("");
 const trackingNo = ref("");
 const message = ref("");
 const evidence = ref("");
-const progress: AftersaleStatus[] = ["pending", "approved", "buyer_shipping", "merchant_confirmed", "refunded"];
+const progress: AftersaleStatus[] = [
+  "pending",
+  "approved",
+  "buyer_shipping",
+  "merchant_confirmed",
+  "refunded",
+];
 
 const id = computed(() => String(route.params.id ?? ""));
 
@@ -35,7 +41,9 @@ function progressTone(status: AftersaleStatus): string {
   if (!detail.value) return "border-border bg-surface text-muted";
   const current = progress.indexOf(detail.value.status);
   const step = progress.indexOf(status);
-  return step >= 0 && current >= step ? "border-primary bg-primary text-white" : "border-border bg-surface text-muted";
+  return step >= 0 && current >= step
+    ? "border-primary bg-primary text-white"
+    : "border-border bg-surface text-muted";
 }
 
 async function load(): Promise<void> {
@@ -111,7 +119,10 @@ async function sendMessage(): Promise<void> {
   try {
     await $api.addAftersaleMessage(detail.value.id, {
       content: { en: content, zh: content },
-      evidence: evidence.value.split("\n").map((url) => url.trim()).filter(Boolean),
+      evidence: evidence.value
+        .split("\n")
+        .map((url) => url.trim())
+        .filter(Boolean),
     });
     message.value = "";
     evidence.value = "";
@@ -129,89 +140,200 @@ onMounted(() => void load());
 <template>
   <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.aftersaleDetail") }}</h1>
-      <NuxtLink class="text-sm text-primary no-underline" to="/user/aftersales">{{ t("user.aftersalesTitle") }}</NuxtLink>
+      <h1 class="text-text m-0 text-xl font-bold">{{ t("user.aftersaleDetail") }}</h1>
+      <NuxtLink class="text-primary text-sm no-underline" to="/user/aftersales">{{
+        t("user.aftersalesTitle")
+      }}</NuxtLink>
     </div>
-    <div v-if="loading" class="py-5 text-muted">{{ t("common.loading") }}</div>
-    <p v-else-if="failed || !detail" class="py-5 text-sm text-danger">{{ t("user.aftersaleLoadFailed") }}</p>
+    <div v-if="loading" class="text-muted py-5">{{ t("common.loading") }}</div>
+    <p v-else-if="failed || !detail" class="text-danger py-5 text-sm">
+      {{ t("user.aftersaleLoadFailed") }}
+    </p>
     <div v-else class="space-y-4">
-      <header class="flex items-center justify-between gap-3 border border-border bg-bg p-4 max-sm:flex-col max-sm:items-start">
+      <header
+        class="border-border bg-bg flex items-center justify-between gap-3 border p-4 max-sm:flex-col max-sm:items-start"
+      >
         <div>
-          <p class="m-0 text-sm text-muted">{{ t("user.aftersaleOrder") }} {{ detail.order_id }}</p>
-          <p class="mt-1 text-xs text-muted">{{ t("user.aftersaleCreatedAt") }} {{ detail.created_at.slice(0, 10) }}</p>
+          <p class="text-muted m-0 text-sm">{{ t("user.aftersaleOrder") }} {{ detail.order_id }}</p>
+          <p class="text-muted mt-1 text-xs">
+            {{ t("user.aftersaleCreatedAt") }} {{ detail.created_at.slice(0, 10) }}
+          </p>
         </div>
         <VBadge :tone="tone(detail.status)">{{ statusLabel(detail.status) }}</VBadge>
       </header>
 
       <VCard :padded="false" class="p-5">
-        <h2 class="mb-3 text-[15px] font-semibold text-text">{{ t("user.aftersaleItem") }}</h2>
+        <h2 class="text-text mb-3 text-[15px] font-semibold">{{ t("user.aftersaleItem") }}</h2>
         <div class="flex items-center gap-3">
-          <img class="h-14 w-14 border border-border object-contain" :src="detail.item.image || '/mock/product-1.svg'" :alt="pick(detail.item.product_name, locale)" />
+          <img
+            class="border-border h-14 w-14 border object-contain"
+            :src="detail.item.image || '/mock/product-1.svg'"
+            :alt="pick(detail.item.product_name, locale)"
+          />
           <div class="min-w-0 flex-1">
-            <p class="m-0 truncate text-sm text-text">{{ pick(detail.item.product_name, locale) }}</p>
-            <p class="mt-1 text-xs text-muted">{{ detail.item.sku_code }} × {{ detail.item.qty }}</p>
+            <p class="text-text m-0 truncate text-sm">
+              {{ pick(detail.item.product_name, locale) }}
+            </p>
+            <p class="text-muted mt-1 text-xs">
+              {{ detail.item.sku_code }} × {{ detail.item.qty }}
+            </p>
           </div>
-          <PriceText :amount-minor="detail.item.unit_price_minor * detail.item.qty" :currency="detail.currency" />
+          <PriceText
+            :amount-minor="detail.item.unit_price_minor * detail.item.qty"
+            :currency="detail.currency"
+          />
         </div>
-        <div class="mt-4 grid gap-2 text-sm text-muted sm:grid-cols-2">
-          <span>{{ t("user.aftersaleType") }}: {{ t(detail.kind === "refund_only" ? "user.refundOnly" : "user.returnRefund") }}</span>
-          <span>{{ t("user.aftersaleAmount") }}: <PriceText :amount-minor="detail.amount_minor" :currency="detail.currency" /></span>
-          <span>{{ t("user.aftersaleRemaining") }}: <PriceText :amount-minor="detail.remaining_refundable_minor" :currency="detail.currency" /></span>
+        <div class="text-muted mt-4 grid gap-2 text-sm sm:grid-cols-2">
+          <span
+            >{{ t("user.aftersaleType") }}:
+            {{ t(detail.kind === "refund_only" ? "user.refundOnly" : "user.returnRefund") }}</span
+          >
+          <span
+            >{{ t("user.aftersaleAmount") }}:
+            <PriceText :amount-minor="detail.amount_minor" :currency="detail.currency"
+          /></span>
+          <span
+            >{{ t("user.aftersaleRemaining") }}:
+            <PriceText
+              :amount-minor="detail.remaining_refundable_minor"
+              :currency="detail.currency"
+          /></span>
           <span>{{ t("user.aftersaleReason") }}: {{ pick(detail.reason, locale) }}</span>
         </div>
         <div v-if="detail.evidence.length" class="mt-4 flex flex-wrap gap-2 text-sm">
-          <a v-for="url in detail.evidence" :key="url" class="text-primary" :href="url" target="_blank" rel="noreferrer">{{ t("user.aftersaleViewEvidence") }}</a>
+          <a
+            v-for="url in detail.evidence"
+            :key="url"
+            class="text-primary"
+            :href="url"
+            target="_blank"
+            rel="noreferrer"
+            >{{ t("user.aftersaleViewEvidence") }}</a
+          >
         </div>
       </VCard>
 
       <VCard :padded="false" class="p-5">
-        <h2 class="mb-4 text-[15px] font-semibold text-text">{{ t("user.aftersaleStatus") }}</h2>
+        <h2 class="text-text mb-4 text-[15px] font-semibold">{{ t("user.aftersaleStatus") }}</h2>
         <div class="flex flex-wrap items-center gap-2">
           <template v-for="(step, index) in progress" :key="step">
-            <span class="rounded-full border px-3 py-1 text-xs" :class="progressTone(step)">{{ statusLabel(step) }}</span>
+            <span class="rounded-full border px-3 py-1 text-xs" :class="progressTone(step)">{{
+              statusLabel(step)
+            }}</span>
             <span v-if="index < progress.length - 1" class="text-muted">→</span>
           </template>
         </div>
-        <p v-if="detail.status === 'rejected' || detail.status === 'cancelled'" class="mt-3 text-sm text-danger">{{ statusLabel(detail.status) }}</p>
-        <div v-if="detail.return_carrier || detail.return_tracking_no" class="mt-3 text-sm text-muted">
-          {{ t("user.returnShipping") }}: {{ detail.return_carrier }} {{ detail.return_tracking_no }}
+        <p
+          v-if="detail.status === 'rejected' || detail.status === 'cancelled'"
+          class="text-danger mt-3 text-sm"
+        >
+          {{ statusLabel(detail.status) }}
+        </p>
+        <div
+          v-if="detail.return_carrier || detail.return_tracking_no"
+          class="text-muted mt-3 text-sm"
+        >
+          {{ t("user.returnShipping") }}: {{ detail.return_carrier }}
+          {{ detail.return_tracking_no }}
         </div>
-        <div v-if="detail.status === 'refunded'" class="mt-3 text-sm text-success">
+        <div v-if="detail.status === 'refunded'" class="text-success mt-3 text-sm">
           {{ t("user.aftersaleRefunded") }} · {{ t("user.aftersaleRefundResult") }}:
           <PriceText :amount-minor="detail.amount_minor" :currency="detail.currency" />
         </div>
         <div class="mt-4 flex flex-wrap gap-2">
-          <VBtn v-if="['pending', 'approved', 'buyer_shipping', 'merchant_confirmed'].includes(detail.status)" variant="danger" size="sm" type="button" :disabled="working" @click="cancel">{{ t("user.cancelAftersale") }}</VBtn>
-          <VBtn v-if="detail.status === 'rejected'" variant="primary" size="sm" type="button" :disabled="working" @click="reopen">{{ t("user.reopenAftersale") }}</VBtn>
+          <VBtn
+            v-if="
+              ['pending', 'approved', 'buyer_shipping', 'merchant_confirmed'].includes(
+                detail.status,
+              )
+            "
+            variant="danger"
+            size="sm"
+            type="button"
+            :disabled="working"
+            @click="cancel"
+            >{{ t("user.cancelAftersale") }}</VBtn
+          >
+          <VBtn
+            v-if="detail.status === 'rejected'"
+            variant="primary"
+            size="sm"
+            type="button"
+            :disabled="working"
+            @click="reopen"
+            >{{ t("user.reopenAftersale") }}</VBtn
+          >
         </div>
       </VCard>
 
-      <VCard v-if="detail.status === 'approved' && detail.kind === 'return_refund'" :padded="false" class="p-5">
-        <h2 class="mb-3 text-[15px] font-semibold text-text">{{ t("user.returnShipping") }}</h2>
+      <VCard
+        v-if="detail.status === 'approved' && detail.kind === 'return_refund'"
+        :padded="false"
+        class="p-5"
+      >
+        <h2 class="text-text mb-3 text-[15px] font-semibold">{{ t("user.returnShipping") }}</h2>
         <form class="grid max-w-[520px] gap-3" @submit.prevent="submitTracking">
           <VField :label="t('user.aftersaleCarrier')"><VInput v-model="carrier" /></VField>
           <VField :label="t('user.aftersaleTrackingNo')"><VInput v-model="trackingNo" /></VField>
-          <VBtn class="w-fit" variant="primary" type="submit" :disabled="working">{{ t("user.submitReturnTracking") }}</VBtn>
+          <VBtn class="w-fit" variant="primary" type="submit" :disabled="working">{{
+            t("user.submitReturnTracking")
+          }}</VBtn>
         </form>
       </VCard>
 
       <VCard :padded="false" class="p-5">
-        <h2 class="mb-3 text-[15px] font-semibold text-text">{{ t("user.aftersaleMessages") }}</h2>
-        <div v-if="detail.messages.length === 0" class="mb-4 text-sm text-muted">{{ t("user.noAftersales") }}</div>
+        <h2 class="text-text mb-3 text-[15px] font-semibold">{{ t("user.aftersaleMessages") }}</h2>
+        <div v-if="detail.messages.length === 0" class="text-muted mb-4 text-sm">
+          {{ t("user.noAftersales") }}
+        </div>
         <div v-else class="mb-4 space-y-2">
-          <div v-for="entry in detail.messages" :key="entry.id" class="rounded border border-border p-3" :class="entry.author_role === 'buyer' ? 'bg-bg' : 'bg-surface'">
-            <div class="flex items-center justify-between gap-2 text-xs text-muted"><span>{{ t(`user.${entry.author_role}`) }}</span><time>{{ entry.created_at.slice(0, 16).replace('T', ' ') }}</time></div>
-            <p class="m-0 mt-2 whitespace-pre-wrap text-sm text-text">{{ pick(entry.content, locale) }}</p>
-            <div v-if="entry.evidence.length" class="mt-2 flex flex-wrap gap-2 text-xs"><a v-for="url in entry.evidence" :key="url" class="text-primary" :href="url" target="_blank" rel="noreferrer">{{ t("user.aftersaleViewEvidence") }}</a></div>
+          <div
+            v-for="entry in detail.messages"
+            :key="entry.id"
+            class="border-border rounded border p-3"
+            :class="entry.author_role === 'buyer' ? 'bg-bg' : 'bg-surface'"
+          >
+            <div class="text-muted flex items-center justify-between gap-2 text-xs">
+              <span>{{ t(`user.${entry.author_role}`) }}</span
+              ><time>{{ entry.created_at.slice(0, 16).replace("T", " ") }}</time>
+            </div>
+            <p class="text-text m-0 mt-2 text-sm whitespace-pre-wrap">
+              {{ pick(entry.content, locale) }}
+            </p>
+            <div v-if="entry.evidence.length" class="mt-2 flex flex-wrap gap-2 text-xs">
+              <a
+                v-for="url in entry.evidence"
+                :key="url"
+                class="text-primary"
+                :href="url"
+                target="_blank"
+                rel="noreferrer"
+                >{{ t("user.aftersaleViewEvidence") }}</a
+              >
+            </div>
           </div>
         </div>
         <form class="grid max-w-[640px] gap-3" @submit.prevent="sendMessage">
-          <VField :label="t('user.aftersaleMessagePlaceholder')"><textarea v-model="message" class="min-h-24 rounded-md border border-border bg-surface p-2.5 text-sm text-text" :placeholder="t('user.aftersaleMessagePlaceholder')" /></VField>
-          <VField :label="t('user.aftersaleEvidence')"><textarea v-model="evidence" class="min-h-16 rounded-md border border-border bg-surface p-2.5 text-sm text-text" :placeholder="t('user.aftersaleEvidenceHint')" /></VField>
-          <VBtn class="w-fit" variant="primary" type="submit" :disabled="working">{{ t("user.sendMessage") }}</VBtn>
+          <VField :label="t('user.aftersaleMessagePlaceholder')">
+            <textarea
+              v-model="message"
+              class="border-border bg-surface text-text min-h-24 rounded-md border p-2.5 text-sm"
+              :placeholder="t('user.aftersaleMessagePlaceholder')"
+            />
+          </VField>
+          <VField :label="t('user.aftersaleEvidence')">
+            <textarea
+              v-model="evidence"
+              class="border-border bg-surface text-text min-h-16 rounded-md border p-2.5 text-sm"
+              :placeholder="t('user.aftersaleEvidenceHint')"
+            />
+          </VField>
+          <VBtn class="w-fit" variant="primary" type="submit" :disabled="working">{{
+            t("user.sendMessage")
+          }}</VBtn>
         </form>
       </VCard>
-      <p v-if="errorKey" class="m-0 text-xs text-danger">{{ t(errorKey) }}</p>
+      <p v-if="errorKey" class="text-danger m-0 text-xs">{{ t(errorKey) }}</p>
     </div>
   </VCard>
 </template>
diff --git a/apps/mall/pages/user/aftersales/apply.vue b/apps/mall/pages/user/aftersales/apply.vue
index 7c402e2..37bda38 100644
--- a/apps/mall/pages/user/aftersales/apply.vue
+++ b/apps/mall/pages/user/aftersales/apply.vue
@@ -33,7 +33,10 @@ async function load(): Promise<void> {
   loading.value = true;
   try {
     await ensureCurrencies();
-    const [loadedOrder, loadedAftersales] = await Promise.all([$api.getOrder(orderId.value), $api.listMyAftersales()]);
+    const [loadedOrder, loadedAftersales] = await Promise.all([
+      $api.getOrder(orderId.value),
+      $api.listMyAftersales(),
+    ]);
     order.value = loadedOrder;
     aftersales.value = loadedAftersales;
   } catch {
@@ -70,7 +73,10 @@ async function submit(): Promise<void> {
       kind: kind.value,
       reason: { en: content, zh: content },
       amount_minor: amount,
-      evidence: evidence.value.split("\n").map((url) => url.trim()).filter(Boolean),
+      evidence: evidence.value
+        .split("\n")
+        .map((url) => url.trim())
+        .filter(Boolean),
     });
     await navigateTo(`/user/aftersales/${created.id}`);
   } catch {
@@ -85,26 +91,56 @@ onMounted(() => void load());
 
 <template>
   <VCard class="min-h-[560px]">
-    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.aftersaleApply") }}</h1>
-    <div v-if="loading" class="py-5 text-muted">{{ t("common.loading") }}</div>
+    <h1 class="text-text mb-4 text-xl font-bold">{{ t("user.aftersaleApply") }}</h1>
+    <div v-if="loading" class="text-muted py-5">{{ t("common.loading") }}</div>
     <form v-else class="grid max-w-[640px] gap-4" @submit.prevent="submit">
-      <VCard :padded="false" class="flex items-center gap-3 border border-border p-4">
-        <img class="h-14 w-14 border border-border object-contain" :src="item.image || '/mock/product-1.svg'" :alt="item.product_name.en" />
-        <div class="min-w-0 flex-1"><p class="m-0 truncate text-sm text-text">{{ item.product_name.en }}</p><p class="mt-1 text-xs text-muted">{{ item.sku_code }} × {{ item.qty }}</p></div>
+      <VCard :padded="false" class="border-border flex items-center gap-3 border p-4">
+        <img
+          class="border-border h-14 w-14 border object-contain"
+          :src="item.image || '/mock/product-1.svg'"
+          :alt="item.product_name.en"
+        />
+        <div class="min-w-0 flex-1">
+          <p class="text-text m-0 truncate text-sm">{{ item.product_name.en }}</p>
+          <p class="text-muted mt-1 text-xs">{{ item.sku_code }} × {{ item.qty }}</p>
+        </div>
       </VCard>
       <fieldset class="grid gap-2 border-0 p-0">
-        <legend class="mb-1 block text-[13px] text-muted">{{ t("user.aftersaleType") }}</legend>
-        <label class="text-sm text-text"><input v-model="kind" class="mr-1 accent-primary" type="radio" value="refund_only" /> {{ t("user.refundOnly") }}</label>
-        <label class="text-sm text-text"><input v-model="kind" class="mr-1 accent-primary" type="radio" value="return_refund" /> {{ t("user.returnRefund") }}</label>
+        <legend class="text-muted mb-1 block text-[13px]">{{ t("user.aftersaleType") }}</legend>
+        <label class="text-text text-sm"
+          ><input v-model="kind" class="accent-primary mr-1" type="radio" value="refund_only" />
+          {{ t("user.refundOnly") }}</label
+        >
+        <label class="text-text text-sm"
+          ><input v-model="kind" class="accent-primary mr-1" type="radio" value="return_refund" />
+          {{ t("user.returnRefund") }}</label
+        >
       </fieldset>
-      <VField :label="t('user.aftersaleReason')"><textarea v-model="reason" class="min-h-24 rounded-md border border-border bg-surface p-2.5 text-sm text-text" :placeholder="t('user.aftersaleReasonHint')" /></VField>
+      <VField :label="t('user.aftersaleReason')">
+        <textarea
+          v-model="reason"
+          class="border-border bg-surface text-text min-h-24 rounded-md border p-2.5 text-sm"
+          :placeholder="t('user.aftersaleReasonHint')"
+        />
+      </VField>
       <VField :label="t('user.aftersaleAmount')">
         <VInput v-model="amountMajor" />
-        <p class="m-0 mt-1 text-xs text-muted">{{ t("user.aftersaleAmountHint") }} {{ t("user.aftersaleRemaining") }}: <PriceText :amount-minor="remainingMinor" :currency="order.currency" /></p>
+        <p class="text-muted m-0 mt-1 text-xs">
+          {{ t("user.aftersaleAmountHint") }} {{ t("user.aftersaleRemaining") }}:
+          <PriceText :amount-minor="remainingMinor" :currency="order.currency" />
+        </p>
       </VField>
-      <VField :label="t('user.aftersaleEvidence')"><textarea v-model="evidence" class="min-h-20 rounded-md border border-border bg-surface p-2.5 text-sm text-text" :placeholder="t('user.aftersaleEvidenceHint')" /></VField>
-      <p v-if="errorKey" class="m-0 text-xs text-danger">{{ t(errorKey) }}</p>
-      <VBtn class="w-fit" variant="primary" type="submit" :disabled="working">{{ t("user.submitAftersale") }}</VBtn>
+      <VField :label="t('user.aftersaleEvidence')">
+        <textarea
+          v-model="evidence"
+          class="border-border bg-surface text-text min-h-20 rounded-md border p-2.5 text-sm"
+          :placeholder="t('user.aftersaleEvidenceHint')"
+        />
+      </VField>
+      <p v-if="errorKey" class="text-danger m-0 text-xs">{{ t(errorKey) }}</p>
+      <VBtn class="w-fit" variant="primary" type="submit" :disabled="working">{{
+        t("user.submitAftersale")
+      }}</VBtn>
     </form>
   </VCard>
 </template>
diff --git a/apps/mall/pages/user/aftersales/index.vue b/apps/mall/pages/user/aftersales/index.vue
index dc36a2a..d360a26 100644
--- a/apps/mall/pages/user/aftersales/index.vue
+++ b/apps/mall/pages/user/aftersales/index.vue
@@ -39,11 +39,13 @@ onMounted(() => void load());
 <template>
   <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.aftersalesTitle") }}</h1>
-      <NuxtLink class="text-sm text-primary no-underline" to="/user/orders">{{ t("user.myOrders") }}</NuxtLink>
+      <h1 class="text-text m-0 text-xl font-bold">{{ t("user.aftersalesTitle") }}</h1>
+      <NuxtLink class="text-primary text-sm no-underline" to="/user/orders">{{
+        t("user.myOrders")
+      }}</NuxtLink>
     </div>
-    <div v-if="loading" class="py-5 text-muted">{{ t("common.loading") }}</div>
-    <p v-else-if="failed" class="py-5 text-sm text-danger">{{ t("user.aftersaleLoadFailed") }}</p>
+    <div v-if="loading" class="text-muted py-5">{{ t("common.loading") }}</div>
+    <p v-else-if="failed" class="text-danger py-5 text-sm">{{ t("user.aftersaleLoadFailed") }}</p>
     <UiEmptyState v-else-if="rows.length === 0" :text="t('user.noAftersales')" />
     <VTable v-else>
       <thead>
@@ -59,13 +61,21 @@ onMounted(() => void load());
       <tbody>
         <tr v-for="row in rows" :key="row.id">
           <td>
-            <NuxtLink class="text-primary no-underline" :to="`/user/aftersales/${row.id}`">{{ row.order_id }}</NuxtLink>
+            <NuxtLink class="text-primary no-underline" :to="`/user/aftersales/${row.id}`">{{
+              row.order_id
+            }}</NuxtLink>
           </td>
           <td>{{ t(row.kind === "refund_only" ? "user.refundOnly" : "user.returnRefund") }}</td>
           <td><PriceText :amount-minor="row.amount_minor" :currency="row.currency" /></td>
-          <td><VBadge :tone="tone(row.status)">{{ statusLabel(row.status) }}</VBadge></td>
+          <td>
+            <VBadge :tone="tone(row.status)">{{ statusLabel(row.status) }}</VBadge>
+          </td>
           <td class="text-muted">{{ row.created_at.slice(0, 10) }}</td>
-          <td><NuxtLink class="text-primary no-underline" :to="`/user/aftersales/${row.id}`">{{ t("user.viewDetails") }}</NuxtLink></td>
+          <td>
+            <NuxtLink class="text-primary no-underline" :to="`/user/aftersales/${row.id}`">{{
+              t("user.viewDetails")
+            }}</NuxtLink>
+          </td>
         </tr>
       </tbody>
     </VTable>
diff --git a/apps/mall/pages/user/coupons.vue b/apps/mall/pages/user/coupons.vue
index 8d01c0d..c722e75 100644
--- a/apps/mall/pages/user/coupons.vue
+++ b/apps/mall/pages/user/coupons.vue
@@ -33,9 +33,11 @@ onMounted(() => void load());
 
 <template>
   <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>
+    <h1 class="text-text mb-4 text-xl font-bold">{{ t("user.couponsTitle") }}</h1>
+    <p v-if="error" class="border-danger/30 bg-danger/10 text-danger mb-4 border px-3.5 py-2.5">
+      {{ error }}
+    </p>
+    <div v-else-if="loading" class="text-muted py-10">{{ t("common.loading") }}</div>
     <UiEmptyState v-else-if="coupons.length === 0" :text="t('user.noCoupons')" />
     <VTable v-else>
       <thead>
@@ -59,4 +61,3 @@ onMounted(() => void load());
     </VTable>
   </VCard>
 </template>
-
diff --git a/apps/mall/pages/user/favorites.vue b/apps/mall/pages/user/favorites.vue
index 484a77b..64227e6 100644
--- a/apps/mall/pages/user/favorites.vue
+++ b/apps/mall/pages/user/favorites.vue
@@ -41,13 +41,21 @@ async function load(): Promise<Paged<Favorite> | null> {
       page: requestedPage,
       per_page: perPage,
     });
-    if (version !== loadVersion || activeTab.value !== requestedKind || page.value !== requestedPage) {
+    if (
+      version !== loadVersion ||
+      activeTab.value !== requestedKind ||
+      page.value !== requestedPage
+    ) {
       return null;
     }
     result.value = next;
     return next;
   } catch {
-    if (version === loadVersion && activeTab.value === requestedKind && page.value === requestedPage) {
+    if (
+      version === loadVersion &&
+      activeTab.value === requestedKind &&
+      page.value === requestedPage
+    ) {
       error.value = t("user.favoriteLoadFailed");
       result.value = { ...emptyPage };
     }
@@ -61,9 +69,13 @@ watch(activeTab, () => {
   page.value = 1;
 });
 
-watch([activeTab, page], () => {
-  void load();
-}, { immediate: true });
+watch(
+  [activeTab, page],
+  () => {
+    void load();
+  },
+  { immediate: true },
+);
 
 async function removeProductFavorite(productId: string): Promise<void> {
   if (removingId.value) return;
@@ -96,22 +108,49 @@ async function removeStoreFavorite(storeId: string): Promise<void> {
 
 <template>
   <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>
+    <h1 class="text-text mb-4 text-xl font-bold">{{ t("user.favoritesTitle") }}</h1>
+    <p v-if="error" class="text-muted mb-4 text-sm">{{ error }}</p>
     <UiTabs v-model="activeTab" :tabs="tabs">
       <template #default>
-        <div v-if="loading" class="py-5 text-muted">{{ t("common.loading") }}</div>
+        <div v-if="loading" class="text-muted py-5">{{ t("common.loading") }}</div>
         <div v-else-if="activeTab === 'product'">
           <UiEmptyState v-if="productRows.length === 0" :text="t('user.noFavorites')" />
-          <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)" />
+          <div
+            v-else
+            class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-3"
+          >
+            <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="border-border block border-b">
+                <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="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>
+                <NuxtLink
+                  :to="`/goods/${item.product.slug}`"
+                  class="text-text hover:text-primary mb-2 block h-9 overflow-hidden text-[13px] leading-5 no-underline"
+                  >{{ pick(item.product.name, locale) }}</NuxtLink
+                >
+                <PriceText
+                  v-if="item.product.price_minor !== null && item.product.currency"
+                  class="text-primary mb-2.5 block"
+                  :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>
             </VCard>
           </div>
@@ -120,16 +159,39 @@ async function removeStoreFavorite(storeId: string): Promise<void> {
         <div v-else>
           <UiEmptyState v-if="storeRows.length === 0" :text="t('user.noFavoriteStores')" />
           <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>
+            <article
+              v-for="item in storeRows"
+              :key="item.id"
+              class="border-border flex items-center gap-3.5 border p-3 max-sm:flex-col max-sm:items-start"
+            >
+              <img
+                v-if="item.shop.logo"
+                class="border-border h-14 w-14 rounded-sm border object-cover"
+                :src="item.shop.logo"
+                :alt="pick(item.shop.name, locale)"
+              />
+              <span
+                v-else
+                class="border-border bg-bg text-muted flex h-14 w-14 items-center justify-center rounded-sm border text-lg"
+                >{{ 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>
+                <strong class="text-text text-sm">{{ pick(item.shop.name, locale) }}</strong>
+                <span class="text-muted text-xs">{{ item.shop.company }}</span>
               </div>
               <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>
+                <NuxtLink
+                  class="border-border bg-surface text-text inline-flex items-center rounded-md border px-2.5 py-1 text-[13px] font-medium 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>
@@ -145,4 +207,3 @@ async function removeStoreFavorite(storeId: string): Promise<void> {
     </UiTabs>
   </VCard>
 </template>
-
diff --git a/apps/mall/pages/user/index.vue b/apps/mall/pages/user/index.vue
index e1f38af..617d98e 100644
--- a/apps/mall/pages/user/index.vue
+++ b/apps/mall/pages/user/index.vue
@@ -59,56 +59,159 @@ const counts = computed(() => ({
 }));
 
 const statusLinks = computed(() => [
-  { key: "pendingPayment", label: t("user.pendingPayment"), count: counts.value.pendingPayment, to: "/user/orders?status=pending_payment" },
-  { key: "pendingShipment", label: t("user.pendingShipment"), count: counts.value.pendingShipment, to: "/user/orders?status=paid" },
-  { key: "pendingReceipt", label: t("user.pendingReceipt"), count: counts.value.pendingReceipt, to: "/user/orders?status=shipped" },
-  { key: "completed", label: t("user.completed"), count: counts.value.completed, to: "/user/orders?status=completed" },
-  { key: "afterSale", label: t("user.afterSale"), count: counts.value.afterSale, to: "/user/orders?status=after-sale" },
+  {
+    key: "pendingPayment",
+    label: t("user.pendingPayment"),
+    count: counts.value.pendingPayment,
+    to: "/user/orders?status=pending_payment",
+  },
+  {
+    key: "pendingShipment",
+    label: t("user.pendingShipment"),
+    count: counts.value.pendingShipment,
+    to: "/user/orders?status=paid",
+  },
+  {
+    key: "pendingReceipt",
+    label: t("user.pendingReceipt"),
+    count: counts.value.pendingReceipt,
+    to: "/user/orders?status=shipped",
+  },
+  {
+    key: "completed",
+    label: t("user.completed"),
+    count: counts.value.completed,
+    to: "/user/orders?status=completed",
+  },
+  {
+    key: "afterSale",
+    label: t("user.afterSale"),
+    count: counts.value.afterSale,
+    to: "/user/orders?status=after-sale",
+  },
 ]);
 </script>
 
 <template>
   <div class="space-y-4">
     <VCard class="pb-0">
-      <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.dashboard") }}</h1>
+      <h1 class="text-text mb-4 text-xl font-bold">{{ 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 class="border-border bg-primary-soft border p-[18px]">
+          <span class="text-muted block text-xs">{{ t("user.statsBalance") }}</span
+          ><strong class="text-primary mt-2.5 block text-xl"
+            ><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 bg-primary-soft border p-[18px]">
+          <span class="text-muted block text-xs">{{ t("user.statsPoints") }}</span
+          ><strong class="text-primary mt-2.5 block text-xl">{{
+            stats ? stats.points : t("common.loading")
+          }}</strong>
+        </div>
+        <div class="border-border bg-primary-soft border p-[18px]">
+          <span class="text-muted block text-xs">{{ t("user.statsFrozen") }}</span
+          ><strong class="text-primary mt-2.5 block text-xl"
+            ><PriceText
+              v-if="stats"
+              :amount-minor="stats.frozen_minor"
+              :currency="stats.currency"
+            /><template v-else>{{ t("common.loading") }}</template></strong
+          >
+        </div>
       </div>
-      <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 class="border-border grid grid-cols-3 border-t sm:grid-cols-5">
+        <NuxtLink
+          v-for="item in statusLinks"
+          :key="item.key"
+          :to="item.to"
+          class="text-muted hover:text-primary sm:border-border flex flex-col items-center gap-2 px-2 py-4 text-xs no-underline sm:border-l first:sm:border-l-0"
+          ><span>{{ item.label }}</span
+          ><b class="text-primary text-lg font-semibold">{{ item.count }}</b></NuxtLink
+        >
       </div>
     </VCard>
 
     <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>
+      <h2 class="text-text mb-4 flex items-center justify-between text-lg font-semibold">
+        {{ t("user.recentOrders") }}
+        <NuxtLink class="text-primary text-sm font-normal no-underline" to="/user/orders"
+          >{{ t("user.viewAll") }} ›</NuxtLink
+        >
+      </h2>
+      <div v-if="loading" class="text-muted py-5">{{ t("common.loading") }}</div>
       <UiEmptyState v-else-if="orders.length === 0" :text="t('user.noOrders')" />
       <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>
+        <article v-for="order in orders.slice(0, 3)" :key="order.id" class="border-border border">
+          <header
+            class="bg-bg text-muted flex items-center justify-between gap-3 px-3 py-2.5 text-xs"
+          >
+            <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 class="flex min-w-[140px] gap-1">
+              <img
+                v-for="item in order.items"
+                :key="item.id"
+                class="border-border h-11 w-11 border object-contain"
+                :src="item.image || '/mock/product-1.svg'"
+                :alt="pick(item.product_name, locale)"
+              />
+            </div>
+            <div class="text-muted flex-1 text-xs">
+              {{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}
+            </div>
+            <div class="text-right text-xs">
+              <span class="text-muted mb-1 block">{{ t("user.orderTotal") }}</span
+              ><PriceText
+                class="text-primary font-semibold"
+                :amount-minor="order.total_minor"
+                :currency="order.currency"
+              />
+            </div>
+            <NuxtLink
+              class="border-border bg-surface text-text inline-flex items-center rounded-md border px-2.5 py-1 text-[13px] font-medium no-underline"
+              :to="`/user/orders/${order.id}`"
+              >{{ t("user.viewDetails") }}</NuxtLink
+            >
           </div>
         </article>
       </div>
     </VCard>
 
     <VCard>
-      <h2 class="mb-4 text-lg font-semibold text-text">{{ t("user.favoriteProducts") }} ({{ favoriteProductTotal }})</h2>
+      <h2 class="text-text mb-4 text-lg font-semibold">
+        {{ t("user.favoriteProducts") }} ({{ favoriteProductTotal }})
+      </h2>
       <UiEmptyState v-if="favoriteProducts.length === 0" :text="t('user.noFavorites')" />
       <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
+          v-for="item in favoriteProducts"
+          :key="item.id"
+          :to="`/goods/${item.product.slug}`"
+          class="border-border text-text hover:border-primary block border p-2.5 no-underline"
+        >
+          <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="text-primary mt-2 block text-sm font-semibold"
+            :amount-minor="item.product.price_minor"
+            :currency="item.product.currency"
+          />
         </NuxtLink>
       </div>
     </VCard>
   </div>
 </template>
-
diff --git a/apps/mall/pages/user/invoices.vue b/apps/mall/pages/user/invoices.vue
index e692f9a..6722935 100644
--- a/apps/mall/pages/user/invoices.vue
+++ b/apps/mall/pages/user/invoices.vue
@@ -25,8 +25,8 @@ onMounted(() => {
 
 <template>
   <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>
+    <h1 class="text-text mb-4 text-xl font-bold">{{ t("user.invoicesTitle") }}</h1>
+    <div v-if="loading" class="text-muted px-0 py-5">{{ t("common.loading") }}</div>
     <UiEmptyState v-else-if="rows.length === 0" :text="t('user.noInvoices')" />
     <VTable v-else>
       <thead>
@@ -54,4 +54,3 @@ onMounted(() => {
     </VTable>
   </VCard>
 </template>
-
diff --git a/apps/mall/pages/user/orders/[id].vue b/apps/mall/pages/user/orders/[id].vue
index 0154204..46c731e 100644
--- a/apps/mall/pages/user/orders/[id].vue
+++ b/apps/mall/pages/user/orders/[id].vue
@@ -23,21 +23,36 @@ const invoiceKind = ref<InvoiceKind>("personal");
 
 const orderId = computed(() => String(route.params.id ?? ""));
 
-const orderShipments = computed(() => shipments.value.filter((shipment) => shipment.order_id === order.value?.id));
-const activeAftersaleItemIds = computed(() => new Set(
-  aftersales.value
-    .filter((row) => ["pending", "approved", "buyer_shipping", "merchant_confirmed"].includes(row.status))
-    .map((row) => row.order_item_id),
-));
+const orderShipments = computed(() =>
+  shipments.value.filter((shipment) => shipment.order_id === order.value?.id),
+);
+const activeAftersaleItemIds = computed(
+  () =>
+    new Set(
+      aftersales.value
+        .filter((row) =>
+          ["pending", "approved", "buyer_shipping", "merchant_confirmed"].includes(row.status),
+        )
+        .map((row) => row.order_item_id),
+    ),
+);
 
 function canApply(itemId: string): boolean {
-  return Boolean(order.value && ["paid", "fulfilling", "shipped", "completed"].includes(order.value.status) && !activeAftersaleItemIds.value.has(itemId));
+  return Boolean(
+    order.value &&
+    ["paid", "fulfilling", "shipped", "completed"].includes(order.value.status) &&
+    !activeAftersaleItemIds.value.has(itemId),
+  );
 }
 
 async function load(): Promise<void> {
   loading.value = true;
   try {
-    const [o, allShipments, mine] = await Promise.all([$api.getOrder(orderId.value), $api.listMyShipments(), $api.listMyAftersales()]);
+    const [o, allShipments, mine] = await Promise.all([
+      $api.getOrder(orderId.value),
+      $api.listMyShipments(),
+      $api.listMyAftersales(),
+    ]);
     order.value = o;
     shipments.value = allShipments;
     aftersales.value = mine;
@@ -85,62 +100,165 @@ onMounted(() => {
 
 <template>
   <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>
+    <h1 class="text-text mb-4 text-xl font-bold">{{ t("user.orderDetail") }}</h1>
+    <div v-if="loading" class="text-muted py-5">{{ t("common.loading") }}</div>
     <UiEmptyState v-else-if="!order" :text="t('user.noOrders')" />
     <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>
+      <header
+        class="border-border bg-bg flex items-center justify-between border p-3.5 max-sm:flex-col max-sm:items-start max-sm:gap-2.5"
+      >
+        <div>
+          <strong class="text-text text-[15px]"
+            >{{ t("user.orderNo") }} {{ order.order_no }}</strong
+          >
+          <p class="text-muted mt-1 text-xs">
+            {{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}
+          </p>
+        </div>
         <StatusBadge :status="order.status" kind="order" />
       </header>
 
       <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>
+        <h2 class="text-text mb-3.5 text-[15px] font-semibold">{{ t("user.shippingAddress") }}</h2>
+        <p class="text-text m-0 text-sm">
+          {{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}
+        </p>
+        <p class="text-text mt-1 text-sm">
+          {{ order.shipping_address.country }} {{ order.shipping_address.region }}
+          {{ order.shipping_address.city }} {{ order.shipping_address.line1 }}
+          {{ order.shipping_address.postal_code }}
+        </p>
       </VCard>
 
       <VCard :padded="false" class="p-5">
-        <h2 class="mb-3.5 text-[15px] font-semibold text-text">{{ t("user.orderItems") }}</h2>
+        <h2 class="text-text mb-3.5 text-[15px] font-semibold">{{ 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><th /></tr></thead>
+          <thead>
+            <tr>
+              <th>{{ t("user.product") }}</th>
+              <th>{{ t("common.price") }}</th>
+              <th>{{ t("common.qty") }}</th>
+              <th>{{ t("common.total") }}</th>
+              <th />
+            </tr>
+          </thead>
           <tbody>
             <tr v-for="item in order.items" :key="item.id">
-              <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>
+                <div class="flex items-center gap-2.5">
+                  <img
+                    class="border-border h-11 w-11 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>
-              <td><NuxtLink v-if="canApply(item.id)" class="text-primary no-underline" :to="{ path: '/user/aftersales/apply', query: { order_id: order.id, item_id: item.id } }">{{ t("user.applyAftersaleForItem") }}</NuxtLink></td>
+              <td>
+                <PriceText
+                  :amount-minor="item.unit_price_minor * item.qty"
+                  :currency="order.currency"
+                />
+              </td>
+              <td>
+                <NuxtLink
+                  v-if="canApply(item.id)"
+                  class="text-primary no-underline"
+                  :to="{
+                    path: '/user/aftersales/apply',
+                    query: { order_id: order.id, item_id: item.id },
+                  }"
+                  >{{ t("user.applyAftersaleForItem") }}</NuxtLink
+                >
+              </td>
             </tr>
           </tbody>
         </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>
+        <p v-if="order.discount_minor > 0" class="text-primary mt-4 text-right text-[13px]">
+          {{ t("checkout.couponDiscount") }}:
+          <PriceText :amount-minor="order.discount_minor" :currency="order.currency" />
+        </p>
+        <p class="text-muted mt-4 text-right text-[13px]">
+          {{ t("user.total") }}:
+          <PriceText
+            class="text-primary text-lg font-semibold"
+            :amount-minor="order.total_minor"
+            :currency="order.currency"
+          />
+        </p>
       </VCard>
 
       <VCard :padded="false" class="p-5">
-        <h2 class="mb-3.5 text-[15px] font-semibold text-text">{{ t("user.shipments") }}</h2>
+        <h2 class="text-text mb-3.5 text-[15px] font-semibold">{{ t("user.shipments") }}</h2>
         <UiEmptyState v-if="orderShipments.length === 0" :text="t('user.noShipments')" />
         <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
+            v-for="shipment in orderShipments"
+            :key="shipment.id"
+            class="border-border flex items-center justify-between border p-3 max-sm:flex-col max-sm:items-start max-sm:gap-2.5"
+          >
+            <div>
+              <strong class="text-text text-sm"
+                >{{ t("user.shipmentNo") }} {{ shipment.shipment_no }}</strong
+              >
+              <p class="text-muted mt-1 text-xs">{{ t("user.carrier") }}: {{ shipment.carrier }}</p>
+              <p class="text-muted mt-1 text-xs">
+                {{ 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>
       </VCard>
 
       <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>
+        <h2 class="text-text mb-3.5 text-[15px] font-semibold">{{ t("user.invoiceRequest") }}</h2>
+        <div v-if="invoiceSuccess" class="text-success text-sm">{{ 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>
+          <fieldset class="flex items-center gap-4 border-0 p-0">
+            <legend class="text-muted mb-1 block text-[13px]">{{ t("user.invoiceKind") }}</legend>
+            <label class="text-text text-[13px]"
+              ><input
+                v-model="invoiceKind"
+                class="accent-primary mr-1"
+                type="radio"
+                value="personal"
+              />
+              {{ t("user.personal") }}</label
+            ><label class="text-text text-[13px]"
+              ><input
+                v-model="invoiceKind"
+                class="accent-primary mr-1"
+                type="radio"
+                value="company"
+              />
+              {{ t("user.company") }}</label
+            >
+          </fieldset>
+          <p v-if="invoiceErrorKey" class="text-danger m-0 text-xs">{{ t(invoiceErrorKey) }}</p>
+          <VBtn class="w-fit" variant="primary" type="submit" :disabled="invoiceWorking">{{
+            t("user.submitInvoice")
+          }}</VBtn>
         </form>
       </VCard>
     </div>
   </VCard>
 </template>
-
diff --git a/apps/mall/pages/user/orders/index.vue b/apps/mall/pages/user/orders/index.vue
index 702fe87..f7a0617 100644
--- a/apps/mall/pages/user/orders/index.vue
+++ b/apps/mall/pages/user/orders/index.vue
@@ -16,7 +16,8 @@ function shopName(shopId: string): string {
   return shop ? pick(shop.name, locale.value) : t("user.shop");
 }
 
-const activeFilter = ref("all");const orders = ref<Order[]>([]);
+const activeFilter = ref("all");
+const orders = ref<Order[]>([]);
 const page = ref(1);
 const total = ref(0);
 const perPage = ref(10);
@@ -43,18 +44,23 @@ const tabs = computed(() => [
 
 const filteredOrders = computed(() => {
   const statuses = filterStatuses[activeFilter.value] ?? [];
-  return statuses.length === 0 ? orders.value : orders.value.filter((order) => statuses.includes(order.status));
+  return statuses.length === 0
+    ? orders.value
+    : orders.value.filter((order) => statuses.includes(order.status));
 });
 
 function setInitialFilter(): void {
   const queryStatus = String(route.query.status ?? "");
-  const mapped = queryStatus === "paid" || queryStatus === "fulfilling"
-    ? "pending_shipment"
-    : queryStatus === "shipped"
-      ? "pending_receipt"
-      : queryStatus === "pending_payment" || queryStatus === "completed" || queryStatus === "cancelled"
-        ? queryStatus
-        : "all";
+  const mapped =
+    queryStatus === "paid" || queryStatus === "fulfilling"
+      ? "pending_shipment"
+      : queryStatus === "shipped"
+        ? "pending_receipt"
+        : queryStatus === "pending_payment" ||
+            queryStatus === "completed" ||
+            queryStatus === "cancelled"
+          ? queryStatus
+          : "all";
   activeFilter.value = mapped;
 }
 
@@ -103,30 +109,89 @@ onMounted(() => {
 
 <template>
   <VCard class="min-h-[560px]">
-    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.ordersTitle") }}</h1>
+    <h1 class="text-text mb-4 text-xl font-bold">{{ t("user.ordersTitle") }}</h1>
     <UiTabs :model-value="activeFilter" :tabs="tabs" @update:model-value="changeFilter">
       <template #default>
-        <div v-if="loading" class="py-[30px] text-muted">{{ t("common.loading") }}</div>
+        <div v-if="loading" class="text-muted py-[30px]">{{ t("common.loading") }}</div>
         <UiEmptyState v-else-if="filteredOrders.length === 0" :text="t('user.noOrders')" />
         <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>
+          <VCard
+            v-for="order in filteredOrders"
+            :key="order.id"
+            :padded="false"
+            class="overflow-hidden"
+          >
+            <header
+              class="border-border bg-bg text-muted flex items-center justify-between gap-2.5 border-b px-3.5 py-3 text-xs 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-text text-[13px] font-semibold">{{
+                  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="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
+                v-for="item in order.items"
+                :key="item.id"
+                class="border-border flex items-center gap-3 border-b py-2.5 last:border-b-0"
+              >
+                <img
+                  class="border-border h-[54px] w-[54px] 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-muted text-[11px]"
+                    >{{ item.sku_code }} × {{ item.qty }}</small
+                  >
+                </div>
+                <PriceText
+                  class="text-muted text-[13px]"
+                  :amount-minor="item.unit_price_minor"
+                  :currency="order.currency"
+                />
               </div>
             </div>
-            <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>
+            <footer
+              class="border-border text-muted flex items-center justify-between gap-3 border-t px-3.5 py-3 text-xs 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>
+                <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="border-border bg-surface text-text inline-flex items-center rounded-md border px-2.5 py-1 text-[13px] font-medium no-underline"
+                  :to="`/user/orders/${order.id}`"
+                  >{{ t("user.viewDetails") }}</NuxtLink
+                >
               </div>
             </footer>
           </VCard>
@@ -136,4 +201,3 @@ onMounted(() => {
     </UiTabs>
   </VCard>
 </template>
-
diff --git a/apps/mall/utils/product.ts b/apps/mall/utils/product.ts
index 55102f5..278a003 100644
--- a/apps/mall/utils/product.ts
+++ b/apps/mall/utils/product.ts
@@ -10,6 +10,8 @@ export function lowestSku(product: Product): Sku | null {
     active.reduce<Sku | null>(
       (low, sku) => (low === null || sku.price_minor < low.price_minor ? sku : low),
       null,
-    ) ?? (product.skus ?? []).find((sku) => sku.active) ?? null
+    ) ??
+    (product.skus ?? []).find((sku) => sku.active) ??
+    null
   );
 }
diff --git a/apps/shop-admin/app.vue b/apps/shop-admin/app.vue
index 41c0404..e30f0b4 100644
--- a/apps/shop-admin/app.vue
+++ b/apps/shop-admin/app.vue
@@ -19,39 +19,96 @@ watchEffect(() => {
   <div v-if="isAuthPage">
     <NuxtPage />
   </div>
-  <div v-else class="min-h-screen bg-bg font-sans text-text">
+  <div v-else class="bg-bg text-text min-h-screen font-sans">
     <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>
+      <aside class="border-border bg-surface w-60 shrink-0 border-r px-4 py-5">
+        <div class="text-text mb-6 px-3 text-lg font-bold">{{ $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="/shop-profile" 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.shopProfile") }}</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="/aftersales" 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.aftersales") }}</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>
+          <NuxtLink
+            to="/"
+            exact-active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $t("nav.dashboard") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/products"
+            active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $t("nav.products") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/shop-profile"
+            active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $t("nav.shopProfile") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/orders"
+            active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $t("nav.orders") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/aftersales"
+            active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $t("nav.aftersales") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/shipments"
+            active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $t("nav.shipments") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/invoices"
+            active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $t("nav.invoices") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/coupons"
+            active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $t("nav.coupons") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/flash-sales"
+            active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $t("nav.flashSales") }}</NuxtLink
+          >
+          <NuxtLink
+            to="/group-buying"
+            active-class="bg-primary-soft text-primary"
+            class="text-muted hover:bg-bg rounded-md px-3 py-2 text-sm font-medium"
+            >{{ $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">
+        <header
+          class="border-border bg-surface flex min-h-16 items-center justify-end gap-4 border-b 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"
+            class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
             @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>
+            <span class="text-muted text-sm">{{ 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>
+          <NuxtLink
+            v-else
+            to="/login"
+            class="border-primary bg-primary hover:bg-primary-hover inline-flex items-center justify-center rounded-md border px-2.5 py-1 text-[13px] font-medium text-white"
+            >{{ $t("common.login") }}</NuxtLink
+          >
         </header>
         <div class="px-6">
           <NuxtPage />
diff --git a/apps/shop-admin/components/ProductForm.vue b/apps/shop-admin/components/ProductForm.vue
index 25fb1fd..9466475 100644
--- a/apps/shop-admin/components/ProductForm.vue
+++ b/apps/shop-admin/components/ProductForm.vue
@@ -60,7 +60,9 @@ function submit(): void {
 <template>
   <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>
+      <div v-if="validationError" class="text-danger my-2 text-sm" 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>
@@ -71,13 +73,27 @@ function submit(): void {
         <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" />
+        <textarea
+          id="product-description-en"
+          v-model="descriptionEn"
+          rows="4"
+          class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full resize-y rounded-md border px-3 py-2 text-sm focus:outline-2"
+        />
       </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" />
+        <textarea
+          id="product-description-zh"
+          v-model="descriptionZh"
+          rows="4"
+          class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full resize-y rounded-md border px-3 py-2 text-sm focus:outline-2"
+        />
       </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">
+        <select
+          id="product-category"
+          v-model="categoryId"
+          class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
+        >
           <option value="">{{ $t("shop.categoryOptional") }}</option>
           <option v-for="category in categories" :key="category.id" :value="category.id">
             {{ localized(category.name, locale) }}
@@ -85,10 +101,18 @@ function submit(): void {
         </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" />
+        <textarea
+          id="product-images"
+          v-model="images"
+          rows="4"
+          :placeholder="$t('shop.imagesHint')"
+          class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full resize-y rounded-md border px-3 py-2 text-sm focus:outline-2"
+        />
       </VField>
       <VBtn variant="primary" type="submit" :disabled="busy">
-        {{ busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct") }}
+        {{
+          busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct")
+        }}
       </VBtn>
     </form>
   </VCard>
diff --git a/apps/shop-admin/locales-extra.ts b/apps/shop-admin/locales-extra.ts
index a06c08a..9a477e8 100644
--- a/apps/shop-admin/locales-extra.ts
+++ b/apps/shop-admin/locales-extra.ts
@@ -188,7 +188,8 @@ export const enExtra = {
     rejected: "Application rejected.",
     receiptConfirmed: "Return receipt confirmed.",
     refunded: "Refund completed.",
-    staleAction: "The after-sale state changed while you were acting; the latest state is shown below.",
+    staleAction:
+      "The after-sale state changed while you were acting; the latest state is shown below.",
     reopened: "Reopened",
     role: {
       buyer: "Buyer",
diff --git a/apps/shop-admin/pages/aftersales/[id].vue b/apps/shop-admin/pages/aftersales/[id].vue
index 34ae147..ed0d36c 100644
--- a/apps/shop-admin/pages/aftersales/[id].vue
+++ b/apps/shop-admin/pages/aftersales/[id].vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { ApiError, t as localized } from "@vmall/shared";
-import type { AftersaleDetail, AftersaleMessage, AftersaleStatus, LocalizedText } from "@vmall/shared";
+import type {
+  AftersaleDetail,
+  AftersaleMessage,
+  AftersaleStatus,
+  LocalizedText,
+} from "@vmall/shared";
 
 definePageMeta({ middleware: "auth" });
 
@@ -106,7 +111,8 @@ async function run(action: ShopAction): Promise<void> {
   try {
     if (action === "approve") await $api.shop.approveAftersale(aftersaleId.value);
     else if (action === "reject") await $api.shop.rejectAftersale(aftersaleId.value);
-    else if (action === "confirmReceipt") await $api.shop.confirmAftersaleReceipt(aftersaleId.value);
+    else if (action === "confirmReceipt")
+      await $api.shop.confirmAftersaleReceipt(aftersaleId.value);
     else await $api.shop.refundAftersale(aftersaleId.value);
     notice.value = translate(doneKey[action]);
   } catch (err: unknown) {
@@ -154,10 +160,14 @@ onMounted(() => {
 <template>
   <VPage :title="$t('aftersale.detail')">
     <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="/aftersales">{{ $t("common.back") }}</NuxtLink>
+      <NuxtLink
+        class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
+        to="/aftersales"
+        >{{ $t("common.back") }}</NuxtLink
+      >
     </template>
-    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
-    <div v-if="notice" class="my-2 text-sm text-success" role="status">{{ notice }}</div>
+    <div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
+    <div v-if="notice" class="text-success my-2 text-sm" role="status">{{ notice }}</div>
     <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
     <template v-else-if="detail">
       <VCard>
@@ -165,18 +175,34 @@ onMounted(() => {
           <h2 class="text-lg font-semibold">{{ $t("shop.details") }}</h2>
           <div class="flex items-center gap-2">
             <VBadge tone="blue">{{ $t(`aftersale.kind.${detail.kind}`) }}</VBadge>
-            <VBadge :tone="statusClass(detail.status)">{{ $t(`aftersale.status.${detail.status}`) }}</VBadge>
+            <VBadge :tone="statusClass(detail.status)">{{
+              $t(`aftersale.status.${detail.status}`)
+            }}</VBadge>
             <VBadge v-if="detail.reopened" tone="orange">{{ $t("aftersale.reopened") }}</VBadge>
           </div>
         </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(detail.created_at) }}</strong></div>
-          <div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("aftersale.buyer") }}</span><strong class="font-mono text-xs">{{ detail.user_id }}</strong></div>
-          <div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("aftersale.amount") }}</span><strong>{{ fmt(detail.amount_minor, detail.currency) }}</strong></div>
-          <div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("aftersale.remaining") }}</span><strong>{{ fmt(detail.remaining_refundable_minor, detail.currency) }}</strong></div>
+        <div class="mb-5 grid [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))] gap-4">
           <div class="grid gap-1.5">
-            <span class="text-sm text-muted">{{ $t("aftersale.order") }}</span>
-            <NuxtLink :to="`/orders/${detail.order_id}`" class="text-primary hover:underline">{{ $t("aftersale.viewOrder") }}</NuxtLink>
+            <span class="text-muted text-sm">{{ $t("shop.created") }}</span
+            ><strong>{{ formatDate(detail.created_at) }}</strong>
+          </div>
+          <div class="grid gap-1.5">
+            <span class="text-muted text-sm">{{ $t("aftersale.buyer") }}</span
+            ><strong class="font-mono text-xs">{{ detail.user_id }}</strong>
+          </div>
+          <div class="grid gap-1.5">
+            <span class="text-muted text-sm">{{ $t("aftersale.amount") }}</span
+            ><strong>{{ fmt(detail.amount_minor, detail.currency) }}</strong>
+          </div>
+          <div class="grid gap-1.5">
+            <span class="text-muted text-sm">{{ $t("aftersale.remaining") }}</span
+            ><strong>{{ fmt(detail.remaining_refundable_minor, detail.currency) }}</strong>
+          </div>
+          <div class="grid gap-1.5">
+            <span class="text-muted text-sm">{{ $t("aftersale.order") }}</span>
+            <NuxtLink :to="`/orders/${detail.order_id}`" class="text-primary hover:underline">{{
+              $t("aftersale.viewOrder")
+            }}</NuxtLink>
           </div>
         </div>
 
@@ -186,31 +212,43 @@ onMounted(() => {
             v-if="detail.item.image"
             :src="detail.item.image"
             :alt="textEn(detail.item.product_name)"
-            class="h-16 w-16 rounded-md border border-border object-cover"
+            class="border-border h-16 w-16 rounded-md border object-cover"
           />
           <div class="grid gap-1">
             <strong>{{ textEn(detail.item.product_name) }}</strong>
-            <span class="text-sm text-muted">{{ textZh(detail.item.product_name) }}</span>
-            <span class="text-sm text-muted">{{ $t("product.skuCode") }}: {{ detail.item.sku_code }} · {{ $t("common.qty") }}: {{ detail.item.qty }} · {{ $t("common.price") }}: {{ fmt(detail.item.unit_price_minor, detail.currency) }}</span>
+            <span class="text-muted text-sm">{{ textZh(detail.item.product_name) }}</span>
+            <span class="text-muted text-sm"
+              >{{ $t("product.skuCode") }}: {{ detail.item.sku_code }} · {{ $t("common.qty") }}:
+              {{ detail.item.qty }} · {{ $t("common.price") }}:
+              {{ fmt(detail.item.unit_price_minor, detail.currency) }}</span
+            >
           </div>
         </div>
 
-        <h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("aftersale.reason") }}</h3>
+        <h3 class="mt-5 mb-2 text-base font-semibold">{{ $t("aftersale.reason") }}</h3>
         <div class="grid gap-1">
           <p>{{ textEn(detail.reason) }}</p>
-          <p class="text-sm text-muted">{{ textZh(detail.reason) }}</p>
+          <p class="text-muted text-sm">{{ textZh(detail.reason) }}</p>
         </div>
 
-        <h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("aftersale.evidence") }}</h3>
-        <div v-if="!detail.evidence.length" class="text-muted">{{ $t("aftersale.noEvidence") }}</div>
+        <h3 class="mt-5 mb-2 text-base font-semibold">{{ $t("aftersale.evidence") }}</h3>
+        <div v-if="!detail.evidence.length" class="text-muted">
+          {{ $t("aftersale.noEvidence") }}
+        </div>
         <ul v-else class="grid gap-1">
           <li v-for="url in detail.evidence" :key="url">
-            <a :href="url" target="_blank" rel="noopener noreferrer" class="break-all text-primary hover:underline">{{ url }}</a>
+            <a
+              :href="url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-primary break-all hover:underline"
+              >{{ url }}</a
+            >
           </li>
         </ul>
 
         <template v-if="detail.return_carrier || detail.return_tracking_no">
-          <h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("aftersale.returnShipping") }}</h3>
+          <h3 class="mt-5 mb-2 text-base font-semibold">{{ $t("aftersale.returnShipping") }}</h3>
           <div class="grid gap-1">
             <div>{{ $t("shop.carrier") }}: {{ detail.return_carrier ?? "—" }}</div>
             <div>{{ $t("shop.trackingNo") }}: {{ detail.return_tracking_no ?? "—" }}</div>
@@ -222,28 +260,54 @@ onMounted(() => {
         <h2 class="mb-4 text-lg font-semibold">{{ $t("common.actions") }}</h2>
         <div class="flex flex-wrap gap-2">
           <template v-if="canDecide">
-            <VBtn variant="primary" :disabled="busy" @click="run('approve')">{{ $t("aftersale.approve") }}</VBtn>
-            <VBtn variant="danger" :disabled="busy" @click="run('reject')">{{ $t("aftersale.reject") }}</VBtn>
+            <VBtn variant="primary" :disabled="busy" @click="run('approve')">{{
+              $t("aftersale.approve")
+            }}</VBtn>
+            <VBtn variant="danger" :disabled="busy" @click="run('reject')">{{
+              $t("aftersale.reject")
+            }}</VBtn>
           </template>
-          <VBtn v-if="canConfirmReceipt" variant="primary" :disabled="busy" @click="run('confirmReceipt')">{{ $t("aftersale.confirmReceipt") }}</VBtn>
-          <VBtn v-if="canRefund" variant="primary" :disabled="busy" @click="run('refund')">{{ $t("aftersale.refund") }}</VBtn>
+          <VBtn
+            v-if="canConfirmReceipt"
+            variant="primary"
+            :disabled="busy"
+            @click="run('confirmReceipt')"
+            >{{ $t("aftersale.confirmReceipt") }}</VBtn
+          >
+          <VBtn v-if="canRefund" variant="primary" :disabled="busy" @click="run('refund')">{{
+            $t("aftersale.refund")
+          }}</VBtn>
         </div>
       </VCard>
 
       <VCard class="mt-4">
         <h2 class="mb-4 text-lg font-semibold">{{ $t("aftersale.messages") }}</h2>
-        <div v-if="!detail.messages.length" class="text-muted">{{ $t("aftersale.noMessages") }}</div>
+        <div v-if="!detail.messages.length" class="text-muted">
+          {{ $t("aftersale.noMessages") }}
+        </div>
         <ul v-else class="grid gap-3">
-          <li v-for="message in sortedMessages(detail.messages)" :key="message.id" class="rounded-md border border-border bg-bg px-3 py-2">
+          <li
+            v-for="message in sortedMessages(detail.messages)"
+            :key="message.id"
+            class="border-border bg-bg rounded-md border px-3 py-2"
+          >
             <div class="mb-1 flex items-center gap-2 text-sm">
-              <VBadge :tone="roleClass(message.author_role)">{{ $t(`aftersale.role.${message.author_role}`) }}</VBadge>
+              <VBadge :tone="roleClass(message.author_role)">{{
+                $t(`aftersale.role.${message.author_role}`)
+              }}</VBadge>
               <span class="text-muted">{{ formatDate(message.created_at) }}</span>
             </div>
             <p>{{ textEn(message.content) }}</p>
-            <p class="text-sm text-muted">{{ textZh(message.content) }}</p>
+            <p class="text-muted text-sm">{{ textZh(message.content) }}</p>
             <ul v-if="message.evidence.length" class="mt-1 grid gap-0.5">
               <li v-for="url in message.evidence" :key="url">
-                <a :href="url" target="_blank" rel="noopener noreferrer" class="break-all text-sm text-primary hover:underline">{{ url }}</a>
+                <a
+                  :href="url"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-primary text-sm break-all hover:underline"
+                  >{{ url }}</a
+                >
               </li>
             </ul>
           </li>
@@ -252,11 +316,19 @@ onMounted(() => {
         <form class="mt-5 grid gap-3" @submit.prevent="sendMessage">
           <h3 class="text-base font-semibold">{{ $t("aftersale.sendMessage") }}</h3>
           <div class="grid gap-3 md:grid-cols-2">
-            <VField :label="$t('aftersale.messageEn')"><VInput v-model="messageEn" type="text" /></VField>
-            <VField :label="$t('aftersale.messageZh')"><VInput v-model="messageZh" type="text" /></VField>
+            <VField :label="$t('aftersale.messageEn')"
+              ><VInput v-model="messageEn" type="text"
+            /></VField>
+            <VField :label="$t('aftersale.messageZh')"
+              ><VInput v-model="messageZh" type="text"
+            /></VField>
           </div>
-          <VField :label="$t('aftersale.messageEvidence')"><VInput v-model="messageEvidence" type="text" /></VField>
-          <VBtn variant="primary" type="submit" :disabled="busy">{{ $t("aftersale.sendMessage") }}</VBtn>
+          <VField :label="$t('aftersale.messageEvidence')"
+            ><VInput v-model="messageEvidence" type="text"
+          /></VField>
+          <VBtn variant="primary" type="submit" :disabled="busy">{{
+            $t("aftersale.sendMessage")
+          }}</VBtn>
         </form>
       </VCard>
     </template>
diff --git a/apps/shop-admin/pages/aftersales/index.vue b/apps/shop-admin/pages/aftersales/index.vue
index 84ea6c7..b5b7cae 100644
--- a/apps/shop-admin/pages/aftersales/index.vue
+++ b/apps/shop-admin/pages/aftersales/index.vue
@@ -48,11 +48,13 @@ onMounted(() => {
 <template>
   <VPage :title="$t('aftersale.title')">
     <div class="mb-4 flex items-center gap-3">
-      <label for="aftersale-status" class="text-sm font-medium">{{ $t("shop.filterStatus") }}</label>
+      <label for="aftersale-status" class="text-sm font-medium">{{
+        $t("shop.filterStatus")
+      }}</label>
       <select
         id="aftersale-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"
+        class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
         @change="loadAftersales"
       >
         <option value="">{{ $t("common.all") }}</option>
@@ -65,7 +67,7 @@ onMounted(() => {
         <option value="cancelled">{{ $t("aftersale.status.cancelled") }}</option>
       </select>
     </div>
-    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
     <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
     <VCard v-else-if="!aftersales.length" class="text-muted">{{ $t("common.empty") }}</VCard>
     <VTable v-else>
@@ -81,13 +83,21 @@ onMounted(() => {
       </thead>
       <tbody>
         <tr v-for="aftersale in aftersales" :key="aftersale.id">
-          <td class="font-mono text-xs" :title="aftersale.user_id">{{ shortId(aftersale.user_id) }}</td>
+          <td class="font-mono text-xs" :title="aftersale.user_id">
+            {{ shortId(aftersale.user_id) }}
+          </td>
           <td>{{ $t(`aftersale.kind.${aftersale.kind}`) }}</td>
           <td>{{ fmt(aftersale.amount_minor, aftersale.currency) }}</td>
           <td>{{ formatDate(aftersale.created_at) }}</td>
-          <td><VBadge :tone="statusClass(aftersale.status)">{{ $t(`aftersale.status.${aftersale.status}`) }}</VBadge></td>
           <td>
-            <NuxtLink :to="`/aftersales/${aftersale.id}`" class="text-primary hover:underline">{{ $t("shop.details") }}</NuxtLink>
+            <VBadge :tone="statusClass(aftersale.status)">{{
+              $t(`aftersale.status.${aftersale.status}`)
+            }}</VBadge>
+          </td>
+          <td>
+            <NuxtLink :to="`/aftersales/${aftersale.id}`" class="text-primary hover:underline">{{
+              $t("shop.details")
+            }}</NuxtLink>
           </td>
         </tr>
       </tbody>
diff --git a/apps/shop-admin/pages/coupons.vue b/apps/shop-admin/pages/coupons.vue
index c9771c9..78daa50 100644
--- a/apps/shop-admin/pages/coupons.vue
+++ b/apps/shop-admin/pages/coupons.vue
@@ -181,28 +181,53 @@ onMounted(async () => {
 
 <template>
   <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>
+    <div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
+    <div v-if="message" class="text-muted my-2 text-sm" role="status">{{ message }}</div>
 
     <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>
+      <h2 class="mb-4 text-base font-semibold">
+        {{ editingId ? $t("shop.editCoupon") : $t("shop.newCoupon") }}
+      </h2>
+      <div class="my-3 grid [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))] gap-3">
+        <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">
+          <select
+            v-model="form.currency"
+            class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
+          >
             <option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
           </select>
         </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>
+        <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="text-text flex items-center gap-2 text-sm font-medium"
+          ><input v-model="form.enabled" type="checkbox" class="accent-primary h-4 w-4" /><span>{{
+            $t("shop.couponEnabled")
+          }}</span></label
+        >
       </div>
       <div class="flex gap-2">
-        <VBtn variant="primary" :disabled="saving" @click="submit">{{ editingId ? $t("shop.updateCoupon") : $t("shop.createCoupon") }}</VBtn>
+        <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>
     </VCard>
@@ -230,11 +255,21 @@ onMounted(async () => {
           <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>
+            <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>
+            <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>
diff --git a/apps/shop-admin/pages/flash-sales.vue b/apps/shop-admin/pages/flash-sales.vue
index b6eddc4..28e6924 100644
--- a/apps/shop-admin/pages/flash-sales.vue
+++ b/apps/shop-admin/pages/flash-sales.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import type {
-  Currency,
-  ShopFlashSaleItem,
-  ShopFlashSaleSession,
-} from "@vmall/shared";
+import type { Currency, ShopFlashSaleItem, ShopFlashSaleSession } from "@vmall/shared";
 
 definePageMeta({ middleware: "auth" });
 
@@ -233,21 +229,41 @@ onMounted(async () => {
 
 <template>
   <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>
+    <div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
+    <div v-if="message" class="text-muted my-2 text-sm" role="status">{{ message }}</div>
 
     <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>
+      <h2 class="mb-4 text-base font-semibold">
+        {{ editingSessionId ? $t("shop.editFlashSale") : $t("shop.newFlashSale") }}
+      </h2>
+      <div class="my-3 grid [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))] gap-3">
+        <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="text-text flex items-center gap-2 text-sm font-medium"
+          ><input
+            v-model="sessionForm.enabled"
+            type="checkbox"
+            class="accent-primary h-4 w-4"
+          /><span>{{ $t("shop.flashEnabled") }}</span></label
+        >
       </div>
       <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>
+        <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>
     </VCard>
 
@@ -258,17 +274,27 @@ onMounted(async () => {
         <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="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>
+            <span class="text-muted text-sm"
+              >{{ 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="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>
+            <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="mb-2 mt-4 text-sm font-semibold">{{ $t("shop.flashItems") }}</h3>
+        <h3 class="mt-4 mb-2 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>
@@ -291,34 +317,63 @@ onMounted(async () => {
               <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>
+                <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="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))]">
+        <div v-if="itemSessionId === session.id" class="border-border mt-4 border-t pt-3">
+          <h3 class="mb-2 text-sm font-semibold">
+            {{ editingItemId ? $t("shop.editFlashItem") : $t("shop.newFlashItem") }}
+          </h3>
+          <div class="my-3 grid [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))] gap-3">
             <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">
+              <select
+                v-model="itemForm.skuId"
+                class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
+              >
                 <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>
             </VField>
-            <VField :label="$t('shop.flashSalePrice')"><VInput v-model.number="itemForm.salePriceMinor" type="number" min="1" step="1" /></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">
+              <select
+                v-model="itemForm.currency"
+                class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
+              >
                 <option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
               </select>
             </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>
+            <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="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>
+            <VBtn variant="primary" :disabled="saving" @click="saveItem(session)">{{
+              $t("shop.saveFlashItem")
+            }}</VBtn>
+            <VBtn
+              type="button"
+              @click="
+                itemSessionId = '';
+                resetItemForm();
+              "
+              >{{ $t("common.cancel") }}</VBtn
+            >
           </div>
         </div>
       </VCard>
diff --git a/apps/shop-admin/pages/group-buying.vue b/apps/shop-admin/pages/group-buying.vue
index e4ab462..edab298 100644
--- a/apps/shop-admin/pages/group-buying.vue
+++ b/apps/shop-admin/pages/group-buying.vue
@@ -187,36 +187,70 @@ onMounted(async () => {
 
 <template>
   <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>
+    <div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
+    <div v-if="message" class="text-muted my-2 text-sm" role="status">{{ message }}</div>
 
     <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))]">
+      <h2 class="mb-4 text-base font-semibold">
+        {{ editingId ? $t("shop.editGroupActivity") : $t("shop.newGroupActivity") }}
+      </h2>
+      <div class="my-3 grid [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))] gap-3">
         <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">
+          <select
+            v-model="form.skuId"
+            class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
+          >
             <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>
         </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.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">
+          <select
+            v-model="form.currency"
+            class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
+          >
             <option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
           </select>
         </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>
+        <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="text-text flex items-center gap-2 text-sm font-medium"
+          ><input v-model="form.enabled" type="checkbox" class="accent-primary h-4 w-4" /><span>{{
+            $t("shop.groupEnabled")
+          }}</span></label
+        >
       </div>
       <div class="flex gap-2">
-        <VBtn variant="primary" :disabled="saving" @click="save">{{ editingId ? $t("shop.updateGroupActivity") : $t("shop.createGroupActivity") }}</VBtn>
+        <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>
     </VCard>
@@ -247,16 +281,31 @@ onMounted(async () => {
           <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
+                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>
+            <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>
+            <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>
diff --git a/apps/shop-admin/pages/index.vue b/apps/shop-admin/pages/index.vue
index 0c9290a..2e34421 100644
--- a/apps/shop-admin/pages/index.vue
+++ b/apps/shop-admin/pages/index.vue
@@ -52,7 +52,11 @@ onMounted(loadDashboard);
 const stats = computed(() => [
   { key: "totalProducts", label: "shop.totalProducts", value: totalProducts.value },
   { key: "publishedProducts", label: "shop.publishedProducts", value: publishedProducts.value },
-  { key: "pendingPayment", label: "shop.pendingPaymentOrders", value: orderCounts.value.pending_payment },
+  {
+    key: "pendingPayment",
+    label: "shop.pendingPaymentOrders",
+    value: orderCounts.value.pending_payment,
+  },
   { key: "paid", label: "shop.paidOrders", value: orderCounts.value.paid },
   { key: "fulfilling", label: "shop.fulfillingOrders", value: orderCounts.value.fulfilling },
   { key: "shipped", label: "shop.shippedOrders", value: orderCounts.value.shipped },
@@ -65,28 +69,28 @@ const stats = computed(() => [
     <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>
+    <div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
     <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
     <template v-else>
-      <div class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
+      <div class="grid [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))] gap-4">
         <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>
+          <span class="text-muted text-sm">{{ $t(stat.label) }}</span>
+          <strong class="text-text text-3xl font-bold">{{ stat.value }}</strong>
         </VCard>
       </div>
       <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))]">
+        <h2 class="text-text mb-4 text-lg font-semibold">{{ $t("shop.profile") }}</h2>
+        <div class="grid [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))] gap-4">
           <div class="grid gap-1.5">
-            <span class="text-sm text-muted">{{ $t("product.shop") }}</span>
+            <span class="text-muted text-sm">{{ $t("product.shop") }}</span>
             <strong>{{ localized(shop.name, locale) }}</strong>
           </div>
           <div class="grid gap-1.5">
-            <span class="text-sm text-muted">{{ $t("shop.slug") }}</span>
+            <span class="text-muted text-sm">{{ $t("shop.slug") }}</span>
             <strong>{{ shop.slug }}</strong>
           </div>
           <div class="grid gap-1.5">
-            <span class="text-sm text-muted">{{ $t("shop.shopStatus") }}</span>
+            <span class="text-muted text-sm">{{ $t("shop.shopStatus") }}</span>
             <VBadge :tone="shop.status === 'active' ? 'green' : 'red'">
               {{ $t(`admin.${shop.status}`) }}
             </VBadge>
diff --git a/apps/shop-admin/pages/invoices.vue b/apps/shop-admin/pages/invoices.vue
index e163c66..90bbddf 100644
--- a/apps/shop-admin/pages/invoices.vue
+++ b/apps/shop-admin/pages/invoices.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import type { Invoice } from "@vmall/shared";
 
 definePageMeta({ middleware: "auth" });
@@ -16,7 +15,6 @@ 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 = "";
@@ -50,7 +48,7 @@ onMounted(() => {
 
 <template>
   <VPage :title="$t('shop.invoiceList')">
-    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="error" class="text-danger my-2 text-sm" 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>
@@ -69,13 +67,30 @@ onMounted(() => {
       <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>
+            <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>
+          <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>
diff --git a/apps/shop-admin/pages/login.vue b/apps/shop-admin/pages/login.vue
index f771985..48c6acd 100644
--- a/apps/shop-admin/pages/login.vue
+++ b/apps/shop-admin/pages/login.vue
@@ -27,16 +27,22 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <main class="grid min-h-screen place-items-center bg-bg px-4 font-sans text-text">
+  <main class="bg-bg text-text grid min-h-screen place-items-center px-4 font-sans">
     <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>
+        <h1 class="text-text mb-5 text-xl font-bold">{{ $t("auth.welcome") }}</h1>
+        <div v-if="error" class="text-danger my-2 text-sm" 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 />
+          <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") }}
diff --git a/apps/shop-admin/pages/orders/[id].vue b/apps/shop-admin/pages/orders/[id].vue
index 5349ef7..d039aba 100644
--- a/apps/shop-admin/pages/orders/[id].vue
+++ b/apps/shop-admin/pages/orders/[id].vue
@@ -30,7 +30,6 @@ function shipmentStatusClass(value: Shipment["status"]): "green" | "blue" | "ora
   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");
 }
@@ -74,11 +73,12 @@ async function loadOrder(): Promise<void> {
     loadedOrder.items.forEach((item) => {
       nextQuantities[item.id] = Math.max(
         0,
-        item.qty - loadedShipments
-          .filter((shipment) => shipment.order_id === orderId.value)
-          .flatMap((shipment) => shipment.items)
-          .filter((shipmentItem) => shipmentItem.order_item_id === item.id)
-          .reduce((total, shipmentItem) => total + shipmentItem.qty, 0),
+        item.qty -
+          loadedShipments
+            .filter((shipment) => shipment.order_id === orderId.value)
+            .flatMap((shipment) => shipment.items)
+            .filter((shipmentItem) => shipmentItem.order_item_id === item.id)
+            .reduce((total, shipmentItem) => total + shipmentItem.qty, 0),
       );
     });
     quantities.value = nextQuantities;
@@ -104,7 +104,12 @@ async function createShipment(): Promise<void> {
   busy.value = true;
   error.value = "";
   try {
-    await $api.shop.createShipment(order.value.id, carrier.value.trim(), trackingNo.value.trim(), items);
+    await $api.shop.createShipment(
+      order.value.id,
+      carrier.value.trim(),
+      trackingNo.value.trim(),
+      items,
+    );
     carrier.value = "";
     trackingNo.value = "";
     await loadOrder();
@@ -137,23 +142,42 @@ onMounted(() => {
 <template>
   <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>
+      <NuxtLink
+        class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
+        to="/orders"
+        >{{ $t("common.back") }}</NuxtLink
+      >
     </template>
-    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
     <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
     <template v-else-if="order">
       <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>
+          <VBadge :tone="statusClass(order.status)">{{
+            $t(`order.status.${order.status}`)
+          }}</VBadge>
         </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 class="mb-5 grid [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))] gap-4">
+          <div class="grid gap-1.5">
+            <span class="text-muted text-sm">{{ $t("shop.created") }}</span
+            ><strong>{{ formatDate(order.created_at) }}</strong>
+          </div>
+          <div class="grid gap-1.5">
+            <span class="text-muted text-sm">{{ $t("shop.total") }}</span
+            ><strong>{{ fmt(order.total_minor, order.currency) }}</strong>
+          </div>
         </div>
         <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>
+          <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>
@@ -163,10 +187,13 @@ onMounted(() => {
             </tr>
           </tbody>
         </VTable>
-        <h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("shop.address") }}</h3>
-        <address class="not-italic leading-7">
+        <h3 class="mt-5 mb-2 text-base font-semibold">{{ $t("shop.address") }}</h3>
+        <address class="leading-7 not-italic">
           <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.country }}, {{ order.shipping_address.region }},
+            {{ order.shipping_address.city }}
+          </div>
           <div>{{ order.shipping_address.line1 }}, {{ order.shipping_address.postal_code }}</div>
         </address>
       </VCard>
@@ -183,13 +210,31 @@ onMounted(() => {
             </VField>
           </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" />
+          <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>
-          <VBtn variant="primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</VBtn>
+          <VBtn variant="primary" type="submit" :disabled="busy">{{
+            $t("shop.createShipment")
+          }}</VBtn>
         </form>
       </VCard>
 
@@ -197,12 +242,34 @@ onMounted(() => {
         <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>
+          <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>
+              <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>
diff --git a/apps/shop-admin/pages/orders/index.vue b/apps/shop-admin/pages/orders/index.vue
index 7babfcf..04591c0 100644
--- a/apps/shop-admin/pages/orders/index.vue
+++ b/apps/shop-admin/pages/orders/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import type { Order, OrderStatus, Paged } from "@vmall/shared";
 
 definePageMeta({ middleware: "auth" });
@@ -20,7 +19,6 @@ function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
   return "blue";
 }
 
-
 function formatDate(value: string): string {
   return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
 }
@@ -29,7 +27,10 @@ async function loadOrders(): Promise<void> {
   loading.value = true;
   error.value = "";
   try {
-    orders.value = await $api.shop.listOrders({ page: page.value, status: status.value || undefined });
+    orders.value = await $api.shop.listOrders({
+      page: page.value,
+      status: status.value || undefined,
+    });
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : translate("common.error");
   } finally {
@@ -43,7 +44,12 @@ async function filterChanged(): Promise<void> {
 }
 
 async function changePage(nextPage: number): Promise<void> {
-  if (!orders.value || nextPage < 1 || nextPage > Math.ceil(orders.value.total / orders.value.per_page)) return;
+  if (
+    !orders.value ||
+    nextPage < 1 ||
+    nextPage > Math.ceil(orders.value.total / orders.value.per_page)
+  )
+    return;
   page.value = nextPage;
   await loadOrders();
 }
@@ -57,8 +63,15 @@ onMounted(() => {
 <template>
   <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">
+      <label for="order-status" class="text-sm font-medium">{{
+        $t("shop.filterOrderStatus")
+      }}</label>
+      <select
+        id="order-status"
+        v-model="status"
+        class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
+        @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,7 +81,7 @@ onMounted(() => {
         <option value="cancelled">{{ $t("order.status.cancelled") }}</option>
       </select>
     </div>
-    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="error" class="text-danger my-2 text-sm" 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>
@@ -84,18 +97,36 @@ onMounted(() => {
         </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>
+              <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>
+            <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>
+        <VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{
+          $t("common.prev")
+        }}</VBtn>
+        <span class="text-muted text-sm"
+          >{{ $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>
   </VPage>
diff --git a/apps/shop-admin/pages/products/[id].vue b/apps/shop-admin/pages/products/[id].vue
index d14e4dd..d9a81bd 100644
--- a/apps/shop-admin/pages/products/[id].vue
+++ b/apps/shop-admin/pages/products/[id].vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import type { Category, Product, ProductUpsertBody, Sku, SkuUpsertBody } from "@vmall/shared";
 
 definePageMeta({ middleware: "auth" });
@@ -107,15 +106,24 @@ onMounted(() => {
 <template>
   <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>
+      <NuxtLink
+        class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
+        to="/products"
+        >{{ $t("common.back") }}</NuxtLink
+      >
     </template>
-    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="error" class="text-danger my-2 text-sm" 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" />
+      <ProductForm
+        :product="product"
+        :categories="categories"
+        :busy="busy"
+        @submit="updateProduct"
+      />
       <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>
+        <div v-if="!product.skus?.length" class="text-muted mb-4">{{ $t("shop.noSkus") }}</div>
         <VTable v-else>
           <thead>
             <tr>
@@ -132,11 +140,15 @@ onMounted(() => {
               <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>
+              <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">
+        <form class="border-border mt-4 max-w-[720px] border-t 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')">
@@ -146,7 +158,11 @@ onMounted(() => {
               <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">
+              <select
+                id="sku-currency"
+                v-model="skuCurrency"
+                class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
+              >
                 <option value="USD">USD</option>
                 <option value="CNY">CNY</option>
                 <option value="EUR">EUR</option>
@@ -156,7 +172,10 @@ onMounted(() => {
               <VInput id="sku-stock" v-model="skuStock" type="number" min="0" step="1" required />
             </VField>
           </div>
-          <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>
+          <label class="text-text mb-3.5 flex items-center gap-2 text-sm font-medium"
+            ><input v-model="skuActive" type="checkbox" class="accent-primary h-4 w-4" />
+            {{ $t("shop.active") }}</label
+          >
           <VBtn variant="primary" type="submit" :disabled="skuBusy">{{ $t("shop.addSku") }}</VBtn>
         </form>
       </VCard>
diff --git a/apps/shop-admin/pages/products/index.vue b/apps/shop-admin/pages/products/index.vue
index 598f8fa..66a37cc 100644
--- a/apps/shop-admin/pages/products/index.vue
+++ b/apps/shop-admin/pages/products/index.vue
@@ -17,7 +17,6 @@ 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");
 }
@@ -26,7 +25,10 @@ async function loadProducts(): Promise<void> {
   loading.value = true;
   error.value = "";
   try {
-    products.value = await $api.shop.listMyProducts({ page: page.value, status: status.value || undefined });
+    products.value = await $api.shop.listMyProducts({
+      page: page.value,
+      status: status.value || undefined,
+    });
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : translate("common.error");
   } finally {
@@ -54,7 +56,12 @@ async function togglePublished(product: Product): Promise<void> {
 }
 
 async function changePage(nextPage: number): Promise<void> {
-  if (!products.value || nextPage < 1 || nextPage > Math.ceil(products.value.total / products.value.per_page)) return;
+  if (
+    !products.value ||
+    nextPage < 1 ||
+    nextPage > Math.ceil(products.value.total / products.value.per_page)
+  )
+    return;
   page.value = nextPage;
   await loadProducts();
 }
@@ -65,18 +72,27 @@ onMounted(loadProducts);
 <template>
   <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>
+      <NuxtLink
+        to="/products/new"
+        class="border-primary bg-primary hover:bg-primary-hover inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-white"
+        >{{ $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">
+      <select
+        id="product-status"
+        v-model="status"
+        class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
+        @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="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="error" class="text-danger my-2 text-sm" 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>
@@ -96,20 +112,51 @@ onMounted(loadProducts);
             <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>
+              <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>
+              <NuxtLink
+                class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-2.5 py-1 text-[13px] font-medium"
+                :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>
+        <VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{
+          $t("common.prev")
+        }}</VBtn>
+        <span class="text-muted text-sm"
+          >{{ $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>
   </VPage>
diff --git a/apps/shop-admin/pages/products/new.vue b/apps/shop-admin/pages/products/new.vue
index fb116db..5260e2d 100644
--- a/apps/shop-admin/pages/products/new.vue
+++ b/apps/shop-admin/pages/products/new.vue
@@ -39,9 +39,13 @@ onMounted(loadCategories);
 <template>
   <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>
+      <NuxtLink
+        class="border-border bg-surface text-text hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
+        to="/products"
+        >{{ $t("common.back") }}</NuxtLink
+      >
     </template>
-    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
     <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
     <ProductForm v-else :categories="categories" :busy="busy" @submit="saveProduct" />
   </VPage>
diff --git a/apps/shop-admin/pages/shipments.vue b/apps/shop-admin/pages/shipments.vue
index a4f2df4..819da88 100644
--- a/apps/shop-admin/pages/shipments.vue
+++ b/apps/shop-admin/pages/shipments.vue
@@ -14,7 +14,6 @@ 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");
 }
@@ -49,7 +48,7 @@ onMounted(loadShipments);
 
 <template>
   <VPage :title="$t('shop.shipmentList')">
-    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <div v-if="error" class="text-danger my-2 text-sm" 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>
@@ -67,12 +66,28 @@ onMounted(loadShipments);
       <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>
+            <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>
+            <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>
+          <td>
+            <VBtn
+              v-if="shipment.status === 'pending'"
+              size="sm"
+              :disabled="actionId === shipment.id"
+              @click="markShipped(shipment)"
+              >{{ $t("shipment.markShipped") }}</VBtn
+            >
+          </td>
         </tr>
       </tbody>
     </VTable>
diff --git a/apps/shop-admin/pages/shop-profile.vue b/apps/shop-admin/pages/shop-profile.vue
index 451905e..c510b9a 100644
--- a/apps/shop-admin/pages/shop-profile.vue
+++ b/apps/shop-admin/pages/shop-profile.vue
@@ -97,8 +97,8 @@ onMounted(() => {
 
 <template>
   <VPage :title="$t('nav.shopProfile')">
-    <p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
-    <p v-else-if="loadError" class="my-2 text-sm text-danger" role="alert">{{ loadError }}</p>
+    <p v-if="loading" class="text-muted text-sm">{{ $t("common.loading") }}</p>
+    <p v-else-if="loadError" class="text-danger my-2 text-sm" role="alert">{{ loadError }}</p>
     <VCard v-else>
       <div class="grid gap-3 md:grid-cols-2">
         <VField :label="$t('shop.profileLogo')">
@@ -132,15 +132,20 @@ onMounted(() => {
           <textarea v-model="form.afterSaleZh" :class="inputClass" rows="3" />
         </VField>
       </div>
-      <p v-if="formError" class="my-2 text-sm text-danger" role="alert">{{ formError }}</p>
+      <p v-if="formError" class="text-danger my-2 text-sm" role="alert">{{ formError }}</p>
       <div class="flex items-center gap-3">
         <VBtn variant="primary" :disabled="saving" @click="save">
           {{ saving ? $t("common.loading") : $t("common.save") }}
         </VBtn>
-        <p v-if="feedback" role="status" class="text-sm" :class="feedback.ok ? 'text-success' : 'text-danger'">
+        <p
+          v-if="feedback"
+          role="status"
+          class="text-sm"
+          :class="feedback.ok ? 'text-success' : 'text-danger'"
+        >
           {{ feedback.message }}
         </p>
       </div>
     </VCard>
   </VPage>
-</template>
\ No newline at end of file
+</template>
diff --git a/openspec/MIGRATION-PLAN.md b/openspec/MIGRATION-PLAN.md
index 94a1a00..e9f51a7 100644
--- a/openspec/MIGRATION-PLAN.md
+++ b/openspec/MIGRATION-PLAN.md
@@ -40,7 +40,7 @@ P2 freight ───────────┘（改 checkout/order totals，
 |---|---|---|---|---|
 | P0 | `add-aftersale-refunds` | — | archived | 2026-09-23 |
 | P1 | `add-product-reviews` | — | proposed | — |
-| P2 | `add-freight-templates` | —（与 P0 串行） | proposed | — |
+| P2 | `add-freight-templates` | —（与 P0 串行） | implementing | — |
 | P3 | `add-wallet-settlement` | P0 | proposed | — |
 | P4 | `add-mobile-h5` | P0、P3（软） | proposed | — |
 | P5 | `add-merchant-onboarding` | — | proposed | — |
diff --git a/openspec/changes/add-freight-templates/tasks.md b/openspec/changes/add-freight-templates/tasks.md
index 1139e7b..6ccb1a5 100644
--- a/openspec/changes/add-freight-templates/tasks.md
+++ b/openspec/changes/add-freight-templates/tasks.md
@@ -1,3 +1,5 @@
+> **Progress 2026-09-23:** migration `0017_freight_templates.sql` written (incl. `skus.weight_grams` for by-weight and `shipments.shipping_company_code`); models extended (`Order.shipping_fee_minor`, `OrderItem` freight snapshots, `Sku.weight_grams`, `FreightPricingMethod`); order/sku SQL column lists updated; `cargo test -p vmall-api` green. Not started: shared contract (1.2), freight module (1.3), calculation + checkout wiring (2.x), frontends (3.x/4.x), verification (5.x).
+
 ## 1. Migration and shared contract
 
 - [ ] 1.1 Add migration `0017_freight_templates.sql`: `freight_templates` (shop FK, name, default flag with a partial unique index per shop, always-free toggle, `by_piece`/`by_weight` pricing method, first/additional unit fees as i64 minor units, integer first/additional unit sizes in pieces or grams, optional free-shipping threshold in i64 minor units), `freight_region_rules` (template FK, region code set, overriding fees and unit sizes), `shipping_companies` (code, `{en, zh}` JSONB name), `orders.shipping_fee_minor`, `order_items` pricing-method and template-id snapshot columns, and `shipments.shipping_company_code`, with shop/template indexes and cascading deletes.
diff --git a/package.json b/package.json
index a22751d..dc172ba 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,13 @@
     "dev:shop-admin": "pnpm --filter @vmall/shop-admin dev",
     "dev:admin": "pnpm --filter @vmall/admin dev",
     "dev:api": "cargo run -p vmall-api",
-    "build": "pnpm -r build"
+    "build": "pnpm -r build",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "devDependencies": {
-    "@taroify/cli": "^1.0.6"
+    "@taroify/cli": "^1.0.6",
+    "prettier": "^3.9.9",
+    "prettier-plugin-tailwindcss": "^0.8.1"
   }
 }
diff --git a/packages/shared/src/api.ts b/packages/shared/src/api.ts
index 0862b7a..472a133 100644
--- a/packages/shared/src/api.ts
+++ b/packages/shared/src/api.ts
@@ -244,10 +244,7 @@ export interface ApiClient {
   getAftersale(id: string): Promise<AftersaleDetail>;
   cancelAftersale(id: string): Promise<Aftersale>;
   reopenAftersale(id: string): Promise<Aftersale>;
-  submitAftersaleReturnTracking(
-    id: string,
-    body: AftersaleReturnTrackingBody,
-  ): Promise<Aftersale>;
+  submitAftersaleReturnTracking(id: string, body: AftersaleReturnTrackingBody): Promise<Aftersale>;
   addAftersaleMessage(id: string, body: AftersaleMessageBody): Promise<AftersaleMessage>;
   /** Public points catalog: published products only. */
   listPointsProducts(): Promise<IntegralProduct[]>;
@@ -451,27 +448,28 @@ export function createApi(opts: ApiClientOptions): ApiClient {
       listOrders: (page = 1) => r("GET", "/admin/orders", undefined, { page }),
       listCurrencies: () => r("GET", "/admin/currencies"),
       upsertCurrency: (body) => r("POST", "/admin/currencies", body),
-      setRate: (code, rateToBase) => r("PUT", `/admin/currencies/${code}/rate`, {
-        rate_to_base: rateToBase,
-      }),
+      setRate: (code, rateToBase) =>
+        r("PUT", `/admin/currencies/${code}/rate`, {
+          rate_to_base: rateToBase,
+        }),
       getContent: () => r("GET", "/admin/content"),
       replaceContent: (kind, items) => r("PUT", `/admin/content/${kind}`, items),
       setShopProfile: (id, body) => r("PUT", `/admin/shops/${id}/profile`, body),
-    /** Replaces the whole ordered brand list. */
-    getBrands: () => r("GET", "/brands"),
-    replaceBrands: (items) => r("PUT", "/admin/brands", items),
+      /** Replaces the whole ordered brand list. */
+      getBrands: () => r("GET", "/brands"),
+      replaceBrands: (items) => r("PUT", "/admin/brands", items),
       listAftersales: (status) => r("GET", "/admin/aftersales", undefined, { status }),
       getAftersale: (id) => r("GET", `/admin/aftersales/${id}`),
       arbitrateAftersale: (id, outcome) =>
         r("POST", `/admin/aftersales/${id}/arbitrate`, { outcome }),
-    listPointsProducts: () => r("GET", "/admin/points/products"),
-    createPointsProduct: (body) => r("POST", "/admin/points/products", body),
-    updatePointsProduct: (id, body) => r("PUT", `/admin/points/products/${id}`, body),
-    setPointsProductPublished: (id, published) =>
-      r("POST", `/admin/points/products/${id}/${published ? "publish" : "unpublish"}`),
-    listPointsRedemptions: (page = 1) => r("GET", "/admin/points/orders", undefined, { page }),
-    fulfillRedemption: (id) => r("POST", `/admin/points/orders/${id}/fulfill`),
-    cancelRedemption: (id) => r("POST", `/admin/points/orders/${id}/cancel`),
+      listPointsProducts: () => r("GET", "/admin/points/products"),
+      createPointsProduct: (body) => r("POST", "/admin/points/products", body),
+      updatePointsProduct: (id, body) => r("PUT", `/admin/points/products/${id}`, body),
+      setPointsProductPublished: (id, published) =>
+        r("POST", `/admin/points/products/${id}/${published ? "publish" : "unpublish"}`),
+      listPointsRedemptions: (page = 1) => r("GET", "/admin/points/orders", undefined, { page }),
+      fulfillRedemption: (id) => r("POST", `/admin/points/orders/${id}/fulfill`),
+      cancelRedemption: (id) => r("POST", `/admin/points/orders/${id}/cancel`),
     },
   };
 }
diff --git a/packages/shared/src/theme.css b/packages/shared/src/theme.css
index ae114ed..0455252 100644
--- a/packages/shared/src/theme.css
+++ b/packages/shared/src/theme.css
@@ -26,8 +26,9 @@
   --radius-sm: 4px;
   --radius-md: 8px;
 
-  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
+  --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;
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index 0e0d75d..185b41b 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -130,12 +130,7 @@ export interface Cart {
 }
 
 export type OrderStatus =
-  | "pending_payment"
-  | "paid"
-  | "fulfilling"
-  | "shipped"
-  | "completed"
-  | "cancelled";
+  "pending_payment" | "paid" | "fulfilling" | "shipped" | "completed" | "cancelled";
 
 export interface OrderItem {
   id: string;
@@ -467,7 +462,8 @@ export interface GroupBuyIntent {
   group_id?: string | null;
 }
 
-export type ShipmentStatus = "pending" | "shipped" | "delivered";export interface Shipment {
+export type ShipmentStatus = "pending" | "shipped" | "delivered";
+export interface Shipment {
   id: string;
   shipment_no: string;
   order_id: string;
@@ -699,4 +695,3 @@ export interface AftersaleReturnTrackingBody {
 }
 
 export type AftersaleArbitration = "refund" | "reject";
-
diff --git a/packages/ui/src/components/VBadge.vue b/packages/ui/src/components/VBadge.vue
index ccb1ac7..2bd2b14 100644
--- a/packages/ui/src/components/VBadge.vue
+++ b/packages/ui/src/components/VBadge.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-const props = withDefaults(
-  defineProps<{ tone?: "green" | "blue" | "orange" | "red" | "gray" }>(),
-  { tone: "gray" },
-);
+const props = withDefaults(defineProps<{ tone?: "green" | "blue" | "orange" | "red" | "gray" }>(), {
+  tone: "gray",
+});
 
 const tones = {
   green: "bg-success/10 text-success",
@@ -14,12 +13,7 @@ const tones = {
 </script>
 
 <template>
-  <span
-    :class="[
-      'inline-block rounded px-2 py-0.5 text-xs font-medium',
-      tones[props.tone],
-    ]"
-  >
+  <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/VCard.vue b/packages/ui/src/components/VCard.vue
index f318444..2f365e1 100644
--- a/packages/ui/src/components/VCard.vue
+++ b/packages/ui/src/components/VCard.vue
@@ -3,12 +3,7 @@ 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' : '',
-    ]"
-  >
+  <div :class="['border-border bg-surface rounded-lg border 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
index 84bd135..7250e6f 100644
--- a/packages/ui/src/components/VField.vue
+++ b/packages/ui/src/components/VField.vue
@@ -4,8 +4,8 @@ defineProps<{ label?: string; error?: string }>();
 
 <template>
   <div class="mb-3.5">
-    <label v-if="label" class="mb-1 block text-sm font-medium text-text">{{ label }}</label>
+    <label v-if="label" class="text-text mb-1 block text-sm font-medium">{{ label }}</label>
     <slot />
-    <p v-if="error" class="mt-1 text-sm text-danger">{{ error }}</p>
+    <p v-if="error" class="text-danger mt-1 text-sm">{{ error }}</p>
   </div>
 </template>
diff --git a/packages/ui/src/components/VInput.vue b/packages/ui/src/components/VInput.vue
index 88ebf63..1d99843 100644
--- a/packages/ui/src/components/VInput.vue
+++ b/packages/ui/src/components/VInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-withDefaults(
-  defineProps<{ type?: string; placeholder?: string; disabled?: boolean }>(),
-  { type: "text", disabled: false },
-);
+withDefaults(defineProps<{ type?: string; placeholder?: string; disabled?: boolean }>(), {
+  type: "text",
+  disabled: false,
+});
 const model = defineModel<string | number>();
 </script>
 
@@ -12,6 +12,6 @@ const model = defineModel<string | number>();
     :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"
+    class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2 disabled:opacity-50"
   />
 </template>
diff --git a/packages/ui/src/components/VPage.vue b/packages/ui/src/components/VPage.vue
index 7ce1515..f6f1f70 100644
--- a/packages/ui/src/components/VPage.vue
+++ b/packages/ui/src/components/VPage.vue
@@ -5,7 +5,7 @@ defineProps<{ title?: string }>();
 <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>
+      <h1 class="text-text text-xl font-bold">{{ title }}</h1>
       <slot name="actions" />
     </div>
     <slot />
diff --git a/packages/ui/src/components/VPanel.vue b/packages/ui/src/components/VPanel.vue
index 8446701..753a870 100644
--- a/packages/ui/src/components/VPanel.vue
+++ b/packages/ui/src/components/VPanel.vue
@@ -3,12 +3,12 @@ defineProps<{ title?: string }>();
 </script>
 
 <template>
-  <div class="rounded-lg border border-border bg-surface shadow-sm">
+  <div class="border-border bg-surface rounded-lg border shadow-sm">
     <div
       v-if="title || $slots.actions"
-      class="flex items-center justify-between border-b border-border px-5 py-3"
+      class="border-border flex items-center justify-between border-b px-5 py-3"
     >
-      <h3 class="text-sm font-semibold text-text">{{ title }}</h3>
+      <h3 class="text-text text-sm font-semibold">{{ title }}</h3>
       <slot name="actions" />
     </div>
     <div class="p-5"><slot /></div>
diff --git a/packages/ui/src/components/VTable.vue b/packages/ui/src/components/VTable.vue
index f6c8699..dddb09f 100644
--- a/packages/ui/src/components/VTable.vue
+++ b/packages/ui/src/components/VTable.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="overflow-x-auto rounded-lg border border-border bg-surface shadow-sm">
+  <div class="border-border bg-surface overflow-x-auto rounded-lg border 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"
+      class="[&_td]:border-border [&_th]:border-border [&_th]:text-muted w-full border-collapse [&_td]:border-b [&_td]:px-3 [&_td]:py-2.5 [&_td]:text-left [&_td]:text-sm [&_th]:border-b [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-left [&_th]:text-[13px] [&_th]:font-semibold [&_tr:last-child_td]:border-b-0"
     >
       <slot />
     </table>
diff --git a/packages/ui/src/composables/useAccent.ts b/packages/ui/src/composables/useAccent.ts
index 1dc65df..67d91b4 100644
--- a/packages/ui/src/composables/useAccent.ts
+++ b/packages/ui/src/composables/useAccent.ts
@@ -6,8 +6,7 @@ export type Accent = (typeof ACCENTS)[number];
 
 const STORAGE_KEY = "vmall-accent";
 
-const valid = (value: string | null): value is Accent =>
-  ACCENTS.includes(value as 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:
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 77cf37c..3e3197e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,7 +6,17 @@ settings:
 
 importers:
 
-  .: {}
+  .:
+    devDependencies:
+      '@taroify/cli':
+        specifier: ^1.0.6
+        version: 1.0.6
+      prettier:
+        specifier: ^3.9.9
+        version: 3.9.9
+      prettier-plugin-tailwindcss:
+        specifier: ^0.8.1
+        version: 0.8.1(prettier@3.9.9)
 
   apps/admin:
     dependencies:
@@ -24,7 +34,7 @@ importers:
         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)(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)
+        version: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(commander@15.0.0)(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))
@@ -58,7 +68,7 @@ importers:
         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)(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)
+        version: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(commander@15.0.0)(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)(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))
@@ -92,7 +102,7 @@ importers:
         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)(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)
+        version: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(commander@15.0.0)(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)(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))
@@ -633,6 +643,12 @@ packages:
     resolution: {integrity: sha512-IkO+/KEUvwbVpiURZg+P7zF74z5Jxe0UgJxVni+RtoHQ6IZieXaO02kmadomap/q+l6bc/jdPGGqTjhuZnuz1Q==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@hono/node-server@2.1.1':
+    resolution: {integrity: sha512-ELuehkj5VCBdgEw9zs+ivkKwyzzUCSQuE96YmiPvn1ECBoZCczbFXJLeEGMTYjphP6gydh4pHMqEYPVMYUVgQg==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      hono: ^4
+
   '@humanfs/core@0.19.2':
     resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
     engines: {node: '>=18.18.0'}
@@ -783,6 +799,16 @@ packages:
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
 
+  '@modelcontextprotocol/sdk@1.30.0':
+    resolution: {integrity: sha512-xKd8OIzlqNzcqcNumGAa6g+PW2kjD5vrpcKOnfldAUPP3j7lnqMPwlTXQm8gF+UwH72z0lqaRbjr9hqGz0eITA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@cfworker/json-schema': ^4.1.1
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
+
   '@napi-rs/lzma-linux-x64-gnu@1.5.1':
     resolution: {integrity: sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==}
     engines: {node: ^22.20 || ^24.12 || >=25}
@@ -1660,6 +1686,11 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7 || ^8
 
+  '@taroify/cli@1.0.6':
+    resolution: {integrity: sha512-0ke7b0h6MgFVMRG5weiZ6DlzNEX5EIm6XCE8pfykFqVBGdOcviA95gPcW5kjPrda3iPFdxK3+K+7gdDjPponww==}
+    engines: {node: '>=22.12.0'}
+    hasBin: true
+
   '@tybys/wasm-util@0.10.4':
     resolution: {integrity: sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A==}
 
@@ -1821,6 +1852,10 @@ packages:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
 
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
@@ -1840,9 +1875,20 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
   ajv@6.15.0:
     resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
 
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
   alien-signals@3.2.1:
     resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
 
@@ -1979,6 +2025,10 @@ packages:
   birpc@4.2.0:
     resolution: {integrity: sha512-KxgKcZPfrtzJDDALHPguGpGJUrzdgpymyiQQgzFjWreHMOpWrnFNVREr5J48x2DBh8ZVioscrV1SBkDipGiX+Q==}
 
+  body-parser@2.3.0:
+    resolution: {integrity: sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==}
+    engines: {node: '>=18'}
+
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -2012,6 +2062,10 @@ packages:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
 
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
   c12@3.3.4:
     resolution: {integrity: sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==}
     peerDependencies:
@@ -2031,6 +2085,14 @@ packages:
   cacheable@2.5.0:
     resolution: {integrity: sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==}
 
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
@@ -2074,6 +2136,10 @@ packages:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
 
+  commander@15.0.0:
+    resolution: {integrity: sha512-z67u4ZhzCL/Tydu1lJARtEZYWbWaN7oYLHbsuzocr6y4N6WZAagG3RQ4FW61V1/0+jImpj293XfrcYnd1qxtPg==}
+    engines: {node: '>=22.12.0'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -2100,6 +2166,18 @@ packages:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  content-disposition@1.1.0:
+    resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
+    engines: {node: '>=18'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  content-type@2.1.0:
+    resolution: {integrity: sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==}
+    engines: {node: '>=18'}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -2112,9 +2190,21 @@ packages:
   cookie-es@3.1.1:
     resolution: {integrity: sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==}
 
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
+    engines: {node: '>= 0.10'}
+
   crc-32@1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
     engines: {node: '>=0.8'}
@@ -2291,6 +2381,10 @@ packages:
     resolution: {integrity: sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==}
     engines: {node: '>=12'}
 
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
@@ -2337,6 +2431,10 @@ packages:
   errx@0.1.2:
     resolution: {integrity: sha512-chfpPHmCerdo/rXr/nNvPZRkV4WwDRwzwnsJ0Uzz3tVi8Z41tDctRjduYy1138ii77AFlts1qvWtX3g/Acg91Q==}
 
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
   es-errors@1.3.0:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
@@ -2344,6 +2442,10 @@ packages:
   es-module-lexer@2.3.2:
     resolution: {integrity: sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==}
 
+  es-object-atoms@1.1.2:
+    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
+    engines: {node: '>= 0.4'}
+
   esbuild@0.25.12:
     resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
     engines: {node: '>=18'}
@@ -2446,10 +2548,28 @@ packages:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
 
+  eventsource-parser@3.1.1:
+    resolution: {integrity: sha512-EKN1vKAMcZ8MlYMpaNuxN6R9yakzH6uajHcHVTqWJzvu5pWw9DyhbP35HH8MVBQ+dZjAfDxk+A8NiR9KWaXiyQ==}
+    engines: {node: '>=18.0.0'}
+
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
   execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
 
+  express-rate-limit@8.7.0:
+    resolution: {integrity: sha512-hOwV7WOxXfjRpAM1DSJWZDXx3GhplwD8IfwuwvogD8i1Qnkgosw/H45s4ZnFAUHDAhPjlY9hLBvJhKmGMyY26g==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
   exsolve@1.1.1:
     resolution: {integrity: sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==}
 
@@ -2482,6 +2602,9 @@ packages:
   fast-string-width@3.0.2:
     resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
 
+  fast-uri@3.1.8:
+    resolution: {integrity: sha512-GZMtZUTNRpOVIECoXwLNZS5xUGE+mVNbTB8h/7Rwh2TFWcBQiPzTgyZi05BF9UMZKkLJv8XBRJTlU7zg8+ZfMg==}
+
   fast-wrap-ansi@0.2.2:
     resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
 
@@ -2507,6 +2630,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -2521,6 +2648,10 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
@@ -2558,9 +2689,17 @@ packages:
     resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
     engines: {node: '>=18'}
 
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
   get-port-please@3.2.0:
     resolution: {integrity: sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==}
 
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
   get-stream@8.0.1:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
@@ -2594,6 +2733,10 @@ packages:
     resolution: {integrity: sha512-c8B/VNLmxRcmqqenRA9t+9IyOjf9+V6lTxPaUJLqOCONdQkWZ0ETYgX0qbtJqPsgCNusT9MZ5Jeidw8Eb9tn2g==}
     engines: {node: '>=20'}
 
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -2604,6 +2747,10 @@ packages:
   h3@1.15.11:
     resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
 
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
   hashery@1.5.1:
     resolution: {integrity: sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==}
     engines: {node: '>=20'}
@@ -2612,6 +2759,10 @@ packages:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  hono@4.13.8:
+    resolution: {integrity: sha512-/Gng7NfoykZl2pjukW5Z6+8Yxm3BPRf86GTbQnt0SbySkvax4fyL4H3HhY1cCpBGmiW9XDRFzRV+CXK2W8QudQ==}
+    engines: {node: '>=16.9.0'}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -2643,6 +2794,10 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
+  iconv-lite@0.7.3:
+    resolution: {integrity: sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==}
+    engines: {node: '>=0.10.0'}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -2675,6 +2830,14 @@ packages:
     resolution: {integrity: sha512-ehuGcf94bQXhfagULNXrJdfnWO38v070jxSx/qE87Kjzmu2fU7ro5EFAb+OPituLqgfyuQaym5DlrNydW2sJ9A==}
     engines: {node: '>=12.22.0'}
 
+  ip-address@10.7.2:
+    resolution: {integrity: sha512-7H/2gFSIitxc0hG3nOI1glS8QLo/EHBFFLk8vEUjXY/xu0AdL8jZ9U1IzO2PUm0d2D/ofQcAifb0g6OBkt8U7w==}
+    engines: {node: '>= 12'}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
   iron-webcrypto@1.2.1:
     resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
@@ -2723,6 +2886,9 @@ packages:
     resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
     engines: {node: '>=12'}
 
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
@@ -2755,6 +2921,9 @@ packages:
     resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
+  jose@6.2.12:
+    resolution: {integrity: sha512-9NiFmJEex0sy2Dk58j2UGBSHgUs2ypF9eZSu4L6vjOX3Dp96Sw1F3uL+H+D1sx02jZZdzUT0HgvCy59CuvXcWw==}
+
   js-tokens@10.0.0:
     resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
 
@@ -2773,6 +2942,12 @@ packages:
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -2941,12 +3116,24 @@ packages:
   magicast@0.5.5:
     resolution: {integrity: sha512-UicdXN8zQ3JHlxVq+28afMXPr1z7WNY6+7EJnzTdQWkTAlMLF5fNCCKxJHBQwGaNGR11581EiQmQzx73+MvszA==}
 
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
+  media-typer@1.1.1:
+    resolution: {integrity: sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==}
+    engines: {node: '>= 0.8'}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -3022,6 +3209,10 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  negotiator@1.1.0:
+    resolution: {integrity: sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==}
+    engines: {node: '>=18'}
+
   nitropack@2.13.4:
     resolution: {integrity: sha512-tX7bT6zxNeMwkc6hxHiZeUoTOjVrcjoh1Z3cmxOlodIqjl4HISgqfGOmkWSayky3Nv9Z5+KQH52F8nmXJY5AAA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3100,6 +3291,14 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
   obug@2.2.1:
     resolution: {integrity: sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==}
     engines: {node: '>=12.20.0'}
@@ -3118,6 +3317,9 @@ packages:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
 
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
   onetime@6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
@@ -3201,6 +3403,9 @@ packages:
     resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
     engines: {node: 18 || 20 || >=22}
 
+  path-to-regexp@8.4.2:
+    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
+
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
@@ -3230,6 +3435,10 @@ packages:
       typescript:
         optional: true
 
+  pkce-challenge@5.0.1:
+    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
+    engines: {node: '>=16.20.0'}
+
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -3421,6 +3630,66 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-plugin-tailwindcss@0.8.1:
+    resolution: {integrity: sha512-iaFMYqDsE4ffdDkn5qup0j5f2aCEBFZrdrZnvu9QKTlWx/iGPeQ4HHu7b7fCPMxeo9nwQBiOAh2nSypdFYWJkw==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@3.9.9:
+    resolution: {integrity: sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-bytes@7.1.3:
     resolution: {integrity: sha512-U2KZ675nqba6XSBppSjU2pRgc9Ffx9+uUtd/RTWYmOawVkZuUbBYuwdtFZQmLv+yMgQ2TQxWWuOpyNje67J9tg==}
     engines: {node: '>=20'}
@@ -3435,6 +3704,10 @@ packages:
   proper-lockfile@4.1.2:
     resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
 
+  proxy-addr@2.0.8:
+    resolution: {integrity: sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==}
+    engines: {node: '>= 0.10'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -3443,6 +3716,10 @@ packages:
     resolution: {integrity: sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==}
     engines: {node: '>=20'}
 
+  qs@6.16.0:
+    resolution: {integrity: sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==}
+    engines: {node: '>=0.6'}
+
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
@@ -3456,6 +3733,10 @@ packages:
     resolution: {integrity: sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==}
     engines: {node: '>= 0.6'}
 
+  raw-body@3.0.2:
+    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
+    engines: {node: '>= 0.10'}
+
   rc9@3.1.0:
     resolution: {integrity: sha512-ufjkNVzbRHKcCOmTahZkmVsyc3W+MSk3jY03m+a7tGHkIsdVMG9l10/3HvFbWkkKzY5VFp3pkRsIo/UYgmFL7Q==}
 
@@ -3485,6 +3766,10 @@ packages:
     resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
     engines: {node: '>=4'}
 
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
   resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
@@ -3523,6 +3808,10 @@ packages:
   rou3@0.9.2:
     resolution: {integrity: sha512-3SOzvaAg8rkHrXtRjpCvCvbyO5to9oOO27Z/XqHEYXfMRVSw/qMIVdmaOk9W2lcRLtR6dlqTjo9hDeJk70QBYQ==}
 
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
   run-applescript@7.1.0:
     resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
     engines: {node: '>=18'}
@@ -3536,6 +3825,9 @@ packages:
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
   sax@1.6.1:
     resolution: {integrity: sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==}
     engines: {node: '>=11.0.0'}
@@ -3586,6 +3878,22 @@ packages:
     resolution: {integrity: sha512-w1aiOKwKuRgtwAReIIj89puqg+I7GvX4IbLrvmhXbzQsj1+Zwi4VO3+fa6ZF91TWSjIxoEkKnMeHcLEODK5ZXA==}
     engines: {node: '>= 0.4'}
 
+  side-channel-list@1.0.1:
+    resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.1:
+    resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
+    engines: {node: '>= 0.4'}
+
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
@@ -3787,6 +4095,10 @@ packages:
     resolution: {integrity: sha512-yANm3Jr3GiJ1qgJlxGAVxTOIcEOk1rhQHamlXtnrCK7EHP4HeM9OGxtMg/W7HFdrVzw/ZWJKGVIJusVH85sLtw==}
     engines: {node: '>=20'}
 
+  type-is@2.1.0:
+    resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
+    engines: {node: '>= 18'}
+
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
@@ -3847,6 +4159,10 @@ packages:
       rolldown:
         optional: true
 
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
   unplugin-utils@0.2.5:
     resolution: {integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==}
     engines: {node: '>=18.12.0'}
@@ -4006,6 +4322,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
   verkit@0.3.2:
     resolution: {integrity: sha512-zj/ob3UsvJGN0whEAKFp53REA5X66hvffVqoCtVQAakJKnKlH+/PcOfMoFwIG/o4rElqLv/ycAFlx8ZlXUorCg==}
     engines: {node: '>=18.12.0'}
@@ -4184,6 +4504,9 @@ packages:
     resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
     engines: {node: '>=18'}
 
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
   ws@8.21.3:
     resolution: {integrity: sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==}
     engines: {node: '>=10.0.0'}
@@ -4242,6 +4565,14 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
+  zod-to-json-schema@3.25.2:
+    resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==}
+    peerDependencies:
+      zod: ^3.25.28 || ^4
+
+  zod@4.6.5:
+    resolution: {integrity: sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q==}
+
 snapshots:
 
   '@babel/code-frame@7.29.7':
@@ -4411,10 +4742,11 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
-  '@bomb.sh/tab@0.0.19(cac@6.7.14)(citty@0.2.2)':
+  '@bomb.sh/tab@0.0.19(cac@6.7.14)(citty@0.2.2)(commander@15.0.0)':
     optionalDependencies:
       cac: 6.7.14
       citty: 0.2.2
+      commander: 15.0.0
 
   '@cacheable/memory@2.2.0':
     dependencies:
@@ -4673,6 +5005,10 @@ snapshots:
       '@eslint/core': 1.2.1
       levn: 0.4.1
 
+  '@hono/node-server@2.1.1(hono@4.13.8)':
+    dependencies:
+      hono: 4.13.8
+
   '@humanfs/core@0.19.2':
     dependencies:
       '@humanfs/types': 0.15.0
@@ -4844,6 +5180,28 @@ snapshots:
       json5: 2.2.3
       rollup: 4.63.3
 
+  '@modelcontextprotocol/sdk@1.30.0(zod@4.6.5)':
+    dependencies:
+      '@hono/node-server': 2.1.1(hono@4.13.8)
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
+      content-type: 1.0.5
+      cors: 2.8.6
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.1.1
+      express: 5.2.1
+      express-rate-limit: 8.7.0(express@5.2.1)
+      hono: 4.13.8
+      jose: 6.2.12
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.1
+      raw-body: 3.0.2
+      zod: 4.6.5
+      zod-to-json-schema: 3.25.2(zod@4.6.5)
+    transitivePeerDependencies:
+      - supports-color
+
   '@napi-rs/lzma-linux-x64-gnu@1.5.1':
     optional: true
 
@@ -4866,9 +5224,9 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.20.3
 
-  '@nuxt/cli@3.37.0(@nuxt/schema@3.21.11)(cac@6.7.14)(magicast@0.5.5)':
+  '@nuxt/cli@3.37.0(@nuxt/schema@3.21.11)(cac@6.7.14)(commander@15.0.0)(magicast@0.5.5)':
     dependencies:
-      '@bomb.sh/tab': 0.0.19(cac@6.7.14)(citty@0.2.2)
+      '@bomb.sh/tab': 0.0.19(cac@6.7.14)(citty@0.2.2)(commander@15.0.0)
       '@clack/prompts': 1.8.1
       c12: 3.3.4(magicast@0.5.5)
       citty: 0.2.2
@@ -5081,7 +5439,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)(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/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)(commander@15.0.0)(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)
@@ -5099,7 +5457,85 @@ snapshots:
       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)(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)
+      nuxt: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(commander@15.0.0)(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
+      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)(commander@15.0.0)(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)(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)(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)
+      '@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)(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)(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)(commander@15.0.0)(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)(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
@@ -5175,7 +5611,7 @@ snapshots:
       rc9: 3.1.0
       std-env: 4.2.0
 
-  '@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)':
+  '@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)(commander@15.0.0)(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)
@@ -5195,7 +5631,68 @@ 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)(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)
+      nuxt: 3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(commander@15.0.0)(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
+      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)(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:
+      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))(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)(commander@15.0.0)(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)(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)(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)
+      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)(commander@15.0.0)(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)(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
@@ -5754,6 +6251,15 @@ snapshots:
       tailwindcss: 4.3.3
       vite: 7.3.6(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.51.2)(yaml@2.9.1)
 
+  '@taroify/cli@1.0.6':
+    dependencies:
+      '@modelcontextprotocol/sdk': 1.30.0(zod@4.6.5)
+      commander: 15.0.0
+      zod: 4.6.5
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - supports-color
+
   '@tybys/wasm-util@0.10.4':
     dependencies:
       tslib: 2.8.1
@@ -5993,6 +6499,11 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.1.0
+
   acorn-import-attributes@1.9.5(acorn@8.18.0):
     dependencies:
       acorn: 8.18.0
@@ -6005,6 +6516,10 @@ snapshots:
 
   agent-base@7.1.4: {}
 
+  ajv-formats@3.0.1(ajv@8.20.0):
+    optionalDependencies:
+      ajv: 8.20.0
+
   ajv@6.15.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -6012,6 +6527,13 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.8
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
   alien-signals@3.2.1: {}
 
   ansi-regex@5.0.1: {}
@@ -6137,6 +6659,20 @@ snapshots:
 
   birpc@4.2.0: {}
 
+  body-parser@2.3.0:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 2.1.0
+      debug: 4.4.3
+      http-errors: 2.0.1
+      iconv-lite: 0.7.3
+      on-finished: 2.4.1
+      qs: 6.16.0
+      raw-body: 3.0.2
+      type-is: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   boolbase@1.0.0: {}
 
   brace-expansion@2.1.7:
@@ -6172,6 +6708,8 @@ snapshots:
     dependencies:
       run-applescript: 7.1.0
 
+  bytes@3.1.2: {}
+
   c12@3.3.4(magicast@0.5.5):
     dependencies:
       chokidar: 5.0.0
@@ -6201,6 +6739,16 @@ snapshots:
       keyv: 5.6.0
       qified: 0.10.1
 
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
   caniuse-api@3.0.0:
     dependencies:
       browserslist: 4.29.0
@@ -6242,6 +6790,8 @@ snapshots:
 
   commander@11.1.0: {}
 
+  commander@15.0.0: {}
+
   commander@2.20.3: {}
 
   commondir@1.0.1: {}
@@ -6264,6 +6814,12 @@ snapshots:
 
   consola@3.4.2: {}
 
+  content-disposition@1.1.0: {}
+
+  content-type@1.0.5: {}
+
+  content-type@2.1.0: {}
+
   convert-source-map@2.0.0: {}
 
   cookie-es@1.2.3: {}
@@ -6272,8 +6828,17 @@ snapshots:
 
   cookie-es@3.1.1: {}
 
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
   core-util-is@1.0.3: {}
 
+  cors@2.8.6:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
   crc-32@1.2.2: {}
 
   crc32-stream@6.0.0:
@@ -6430,6 +6995,12 @@ snapshots:
 
   dotenv@17.4.2: {}
 
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
   duplexer@0.1.2: {}
 
   eastasianwidth@0.2.0: {}
@@ -6461,10 +7032,16 @@ snapshots:
 
   errx@0.1.2: {}
 
+  es-define-property@1.0.1: {}
+
   es-errors@1.3.0: {}
 
   es-module-lexer@2.3.2: {}
 
+  es-object-atoms@1.1.2:
+    dependencies:
+      es-errors: 1.3.0
+
   esbuild@0.25.12:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.12
@@ -6631,6 +7208,12 @@ snapshots:
 
   events@3.3.0: {}
 
+  eventsource-parser@3.1.1: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.1.1
+
   execa@8.0.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -6643,6 +7226,47 @@ snapshots:
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
 
+  express-rate-limit@8.7.0(express@5.2.1):
+    dependencies:
+      debug: 4.4.3
+      express: 5.2.1
+      ip-address: 10.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.3.0
+      content-disposition: 1.1.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.8
+      qs: 6.16.0
+      range-parser: 1.3.0
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.1.0
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   exsolve@1.1.1: {}
 
   externality@1.0.2:
@@ -6678,6 +7302,8 @@ snapshots:
     dependencies:
       fast-string-truncated-width: 3.0.3
 
+  fast-uri@3.1.8: {}
+
   fast-wrap-ansi@0.2.2:
     dependencies:
       fast-string-width: 3.0.2
@@ -6700,6 +7326,17 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -6718,6 +7355,8 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  forwarded@0.2.0: {}
+
   fraction.js@5.3.4: {}
 
   fresh@2.0.0: {}
@@ -6741,8 +7380,26 @@ snapshots:
 
   get-east-asian-width@1.6.0: {}
 
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.4
+      math-intrinsics: 1.1.0
+
   get-port-please@3.2.0: {}
 
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.2
+
   get-stream@8.0.1: {}
 
   giget@3.3.1: {}
@@ -6784,6 +7441,8 @@ snapshots:
       slash: 5.1.0
       unicorn-magic: 0.4.0
 
+  gopd@1.2.0: {}
+
   graceful-fs@4.2.11: {}
 
   gzip-size@7.0.0:
@@ -6802,6 +7461,8 @@ snapshots:
       ufo: 1.6.4
       uncrypto: 0.1.3
 
+  has-symbols@1.1.0: {}
+
   hashery@1.5.1:
     dependencies:
       hookified: 1.15.1
@@ -6810,6 +7471,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hono@4.13.8: {}
+
   hookable@5.5.3: {}
 
   hookable@6.1.1: {}
@@ -6839,6 +7502,10 @@ snapshots:
 
   human-signals@5.0.0: {}
 
+  iconv-lite@0.7.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}
@@ -6884,6 +7551,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  ip-address@10.7.2: {}
+
+  ipaddr.js@1.9.1: {}
+
   iron-webcrypto@1.2.1: {}
 
   is-core-module@2.16.2:
@@ -6917,6 +7588,8 @@ snapshots:
 
   is-path-inside@4.0.0: {}
 
+  is-promise@4.0.0: {}
+
   is-reference@1.2.1:
     dependencies:
       '@types/estree': 1.0.9
@@ -6943,6 +7616,8 @@ snapshots:
 
   jiti@2.7.0: {}
 
+  jose@6.2.12: {}
+
   js-tokens@10.0.0: {}
 
   js-tokens@4.0.0: {}
@@ -6955,6 +7630,10 @@ snapshots:
 
   json-schema-traverse@0.4.1: {}
 
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.2: {}
+
   json-stable-stringify-without-jsonify@1.0.1: {}
 
   json5@2.2.3: {}
@@ -7110,10 +7789,16 @@ snapshots:
       '@babel/types': 7.29.8
       source-map-js: 1.2.1
 
+  math-intrinsics@1.1.0: {}
+
   mdn-data@2.0.28: {}
 
   mdn-data@2.27.1: {}
 
+  media-typer@1.1.1: {}
+
+  merge-descriptors@2.0.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -7172,6 +7857,10 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  negotiator@1.1.0:
+    dependencies:
+      content-type: 2.1.0
+
   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
@@ -7320,16 +8009,145 @@ 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)(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):
+  nuxt@3.21.11(@oxc-project/types@0.143.0)(@vue/compiler-sfc@3.5.42)(cac@6.7.14)(commander@15.0.0)(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)(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/cli': 3.37.0(@nuxt/schema@3.21.11)(cac@6.7.14)(commander@15.0.0)(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)(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)(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/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)(commander@15.0.0)(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))(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)
+      '@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)(commander@15.0.0)(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)
+      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)(lightningcss@1.32.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)(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)
+      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)(commander@15.0.0)(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)(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)(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)(commander@15.0.0)(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)(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)(commander@15.0.0)(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)(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)(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))(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)(commander@15.0.0)(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)(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)
@@ -7455,6 +8273,10 @@ snapshots:
       pathe: 2.0.3
       tinyexec: 1.3.1
 
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
   obug@2.2.1: {}
 
   ofetch@1.5.1:
@@ -7471,6 +8293,10 @@ snapshots:
     dependencies:
       ee-first: 1.1.1
 
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
   onetime@6.0.0:
     dependencies:
       mimic-fn: 4.0.0
@@ -7617,6 +8443,8 @@ snapshots:
       lru-cache: 11.5.2
       minipass: 7.1.3
 
+  path-to-regexp@8.4.2: {}
+
   pathe@1.1.2: {}
 
   pathe@2.0.3: {}
@@ -7639,6 +8467,8 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
+  pkce-challenge@5.0.1: {}
+
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -7821,6 +8651,12 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-tailwindcss@0.8.1(prettier@3.9.9):
+    dependencies:
+      prettier: 3.9.9
+
+  prettier@3.9.9: {}
+
   pretty-bytes@7.1.3: {}
 
   process-nextick-args@2.0.1: {}
@@ -7833,12 +8669,22 @@ snapshots:
       retry: 0.12.0
       signal-exit: 3.0.7
 
+  proxy-addr@2.0.8:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
   punycode@2.3.1: {}
 
   qified@0.10.1:
     dependencies:
       hookified: 2.2.0
 
+  qs@6.16.0:
+    dependencies:
+      es-define-property: 1.0.1
+      side-channel: 1.1.1
+
   quansync@0.2.11: {}
 
   queue-microtask@1.2.3: {}
@@ -7847,6 +8693,13 @@ snapshots:
 
   range-parser@1.3.0: {}
 
+  raw-body@3.0.2:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.7.3
+      unpipe: 1.0.0
+
   rc9@3.1.0:
     dependencies:
       defu: 6.1.7
@@ -7884,6 +8737,8 @@ snapshots:
     dependencies:
       redis-errors: 1.2.0
 
+  require-from-string@2.0.2: {}
+
   resolve-from@5.0.0: {}
 
   resolve@1.22.12:
@@ -7940,6 +8795,16 @@ snapshots:
 
   rou3@0.9.2: {}
 
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.4.2
+    transitivePeerDependencies:
+      - supports-color
+
   run-applescript@7.1.0: {}
 
   run-parallel@1.2.0:
@@ -7950,6 +8815,8 @@ snapshots:
 
   safe-buffer@5.2.1: {}
 
+  safer-buffer@2.1.2: {}
+
   sax@1.6.1: {}
 
   scule@1.3.0: {}
@@ -8001,6 +8868,34 @@ snapshots:
 
   shell-quote@1.10.0: {}
 
+  side-channel-list@1.0.1:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.1
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
   signal-exit@3.0.7: {}
 
   signal-exit@4.1.0: {}
@@ -8207,6 +9102,12 @@ snapshots:
     dependencies:
       tagged-tag: 1.0.0
 
+  type-is@2.1.0:
+    dependencies:
+      content-type: 2.1.0
+      media-typer: 1.1.1
+      mime-types: 3.0.2
+
   typescript@5.9.3: {}
 
   ufo@1.6.4: {}
@@ -8275,6 +9176,8 @@ snapshots:
       - vite
       - webpack
 
+  unpipe@1.0.0: {}
+
   unplugin-utils@0.2.5:
     dependencies:
       pathe: 2.0.3
@@ -8401,6 +9304,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  vary@1.1.2: {}
+
   verkit@0.3.2: {}
 
   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)):
@@ -8557,6 +9462,8 @@ snapshots:
       string-width: 7.2.0
       strip-ansi: 7.2.0
 
+  wrappy@1.0.2: {}
+
   ws@8.21.3: {}
 
   wsl-utils@1.0.0:
@@ -8608,3 +9515,9 @@ snapshots:
       archiver-utils: 5.0.2
       compress-commons: 6.0.2
       readable-stream: 4.7.0
+
+  zod-to-json-schema@3.25.2(zod@4.6.5):
+    dependencies:
+      zod: 4.6.5
+
+  zod@4.6.5: {}
diff --git a/scripts/seed-demo.mjs b/scripts/seed-demo.mjs
index be3a27f..f848562 100755
--- a/scripts/seed-demo.mjs
+++ b/scripts/seed-demo.mjs
@@ -73,7 +73,10 @@ const SHOPS = [
       region: "New York",
       address: { en: "88 Hudson Yards, New York", zh: "纽约哈德逊城市广场 88 号" },
       notice: { en: "Same-day dispatch before 3 PM.", zh: "下午 3 点前下单当天发货。" },
-      after_sale: { en: "Nationwide warranty, support 9:00-21:00.", zh: "全国联保，客服 9:00-21:00。" },
+      after_sale: {
+        en: "Nationwide warranty, support 9:00-21:00.",
+        zh: "全国联保，客服 9:00-21:00。",
+      },
       score_rating: 4.7,
       score_agreement: 4.6,
       score_service: 4.8,
@@ -109,7 +112,10 @@ const SHOPS = [
       region: "Oregon",
       address: { en: "45 Willamette Loop, Portland", zh: "波特兰威拉米特环路 45 号" },
       notice: { en: "Cold-chain delivery, next-day slots.", zh: "全程冷链，次日达时段可选。" },
-      after_sale: { en: "Fresh items refunded on delivery issues.", zh: "生鲜配送问题可直接退款。" },
+      after_sale: {
+        en: "Fresh items refunded on delivery issues.",
+        zh: "生鲜配送问题可直接退款。",
+      },
       score_rating: 4.6,
       score_agreement: 4.5,
       score_service: 4.7,
@@ -175,8 +181,18 @@ for (const def of SHOPS) {
 
 // 2b. shop coupons: deterministic, idempotent by localized title.
 const DEMO_COUPONS = [
-  { title: { en: "$5 off over $59", zh: "满 59 减 5" }, amount_minor: 500, threshold_minor: 5900, stock: 200 },
-  { title: { en: "$15 off over $199", zh: "满 199 减 15" }, amount_minor: 1500, threshold_minor: 19900, stock: 100 },
+  {
+    title: { en: "$5 off over $59", zh: "满 59 减 5" },
+    amount_minor: 500,
+    threshold_minor: 5900,
+    stock: 200,
+  },
+  {
+    title: { en: "$15 off over $199", zh: "满 199 减 15" },
+    amount_minor: 1500,
+    threshold_minor: 19900,
+    stock: 100,
+  },
 ];
 let demoShopId = "";
 {
@@ -214,8 +230,25 @@ await call("POST", "/auth/register", {
   const existing = (await call("GET", "/addresses", { token: customerToken })).data;
   if (Array.isArray(existing) && existing.length === 0) {
     const demoAddresses = [
-      { recipient: "Demo Customer", phone: "+1 555 0100", country: "US", region: "California", city: "Cupertino", line1: "1 Infinite Loop", postal_code: "95014", is_default: true },
-      { recipient: "Demo Customer", phone: "+1 555 0100", country: "US", region: "New York", city: "New York", line1: "88 Fifth Ave", postal_code: "10011" },
+      {
+        recipient: "Demo Customer",
+        phone: "+1 555 0100",
+        country: "US",
+        region: "California",
+        city: "Cupertino",
+        line1: "1 Infinite Loop",
+        postal_code: "95014",
+        is_default: true,
+      },
+      {
+        recipient: "Demo Customer",
+        phone: "+1 555 0100",
+        country: "US",
+        region: "New York",
+        city: "New York",
+        line1: "88 Fifth Ave",
+        postal_code: "10011",
+      },
     ];
     for (const address of demoAddresses) {
       r = await call("POST", "/addresses", { token: customerToken, body: address });
@@ -249,36 +282,294 @@ if (cats.length < 7) {
 //    every home floor is non-empty.
 const products = [
   // demo-store
-  { shop: "demo-store", slug: "wireless-headphones", category: "electronics-audio", price: 7999, stock: 25, name: { en: "Wireless Headphones", zh: "无线耳机" }, description: { en: "Noise-cancelling over-ear headphones with 40h battery.", zh: "降噪头戴式耳机，40 小时续航。" }, img: "headphones" },
-  { shop: "demo-store", slug: "mechanical-keyboard", category: "computers-keyboards", price: 12900, stock: 40, name: { en: "Mechanical Keyboard", zh: "机械键盘" }, description: { en: "Hot-swappable 75% keyboard, gasket mount.", zh: "热插拔 75% 配列机械键盘，Gasket 结构。" }, img: "keyboard" },
-  { shop: "demo-store", slug: "linen-shirt", category: "fashion-shirts", price: 4599, stock: 60, name: { en: "Linen Shirt", zh: "亚麻衬衫" }, description: { en: "Breathable 100% linen shirt.", zh: "透气纯亚麻衬衫。" }, img: "shirt" },
-  { shop: "demo-store", slug: "ceramic-mug", category: "home-cookers", price: 1999, stock: 100, name: { en: "Ceramic Mug", zh: "陶瓷马克杯" }, description: { en: "Hand-glazed 350ml mug.", zh: "手工上釉 350ml 马克杯。" }, img: "mug" },
-  { shop: "demo-store", slug: "canvas-backpack", category: "fashion-backpacks", price: 3999, stock: 45, name: { en: "Canvas Backpack", zh: "帆布双肩包" }, description: { en: "Water-resistant 22L everyday backpack.", zh: "防泼水 22L 通勤双肩包。" }, img: "backpack" },
-  { shop: "demo-store", slug: "merino-sweater", category: "fashion-menswear", price: 6900, stock: 30, name: { en: "Merino Sweater", zh: "美利奴羊毛衫" }, description: { en: "Fine-gauge merino crew neck.", zh: "细针美利奴圆领毛衣。" }, img: "sweater" },
+  {
+    shop: "demo-store",
+    slug: "wireless-headphones",
+    category: "electronics-audio",
+    price: 7999,
+    stock: 25,
+    name: { en: "Wireless Headphones", zh: "无线耳机" },
+    description: {
+      en: "Noise-cancelling over-ear headphones with 40h battery.",
+      zh: "降噪头戴式耳机，40 小时续航。",
+    },
+    img: "headphones",
+  },
+  {
+    shop: "demo-store",
+    slug: "mechanical-keyboard",
+    category: "computers-keyboards",
+    price: 12900,
+    stock: 40,
+    name: { en: "Mechanical Keyboard", zh: "机械键盘" },
+    description: {
+      en: "Hot-swappable 75% keyboard, gasket mount.",
+      zh: "热插拔 75% 配列机械键盘，Gasket 结构。",
+    },
+    img: "keyboard",
+  },
+  {
+    shop: "demo-store",
+    slug: "linen-shirt",
+    category: "fashion-shirts",
+    price: 4599,
+    stock: 60,
+    name: { en: "Linen Shirt", zh: "亚麻衬衫" },
+    description: { en: "Breathable 100% linen shirt.", zh: "透气纯亚麻衬衫。" },
+    img: "shirt",
+  },
+  {
+    shop: "demo-store",
+    slug: "ceramic-mug",
+    category: "home-cookers",
+    price: 1999,
+    stock: 100,
+    name: { en: "Ceramic Mug", zh: "陶瓷马克杯" },
+    description: { en: "Hand-glazed 350ml mug.", zh: "手工上釉 350ml 马克杯。" },
+    img: "mug",
+  },
+  {
+    shop: "demo-store",
+    slug: "canvas-backpack",
+    category: "fashion-backpacks",
+    price: 3999,
+    stock: 45,
+    name: { en: "Canvas Backpack", zh: "帆布双肩包" },
+    description: { en: "Water-resistant 22L everyday backpack.", zh: "防泼水 22L 通勤双肩包。" },
+    img: "backpack",
+  },
+  {
+    shop: "demo-store",
+    slug: "merino-sweater",
+    category: "fashion-menswear",
+    price: 6900,
+    stock: 30,
+    name: { en: "Merino Sweater", zh: "美利奴羊毛衫" },
+    description: { en: "Fine-gauge merino crew neck.", zh: "细针美利奴圆领毛衣。" },
+    img: "sweater",
+  },
 
   // aurora-digital
-  { shop: "aurora-digital", slug: "aurora-x1-pro", category: "electronics-flagship", price: 99900, stock: 12, name: { en: "Aurora X1 Pro", zh: "Aurora X1 Pro 旗舰手机" }, description: { en: "6.7in flagship with triple camera and 120Hz display.", zh: "6.7 英寸三摄旗舰，120Hz 屏幕。" }, img: "aurora-x1" },
-  { shop: "aurora-digital", slug: "aurora-a3", category: "electronics-budget", price: 19900, stock: 60, name: { en: "Aurora A3", zh: "Aurora A3 手机" }, description: { en: "Everyday 5G phone with 5000mAh battery.", zh: "日常 5G 手机，5000mAh 电池。" }, img: "aurora-a3" },
-  { shop: "aurora-digital", slug: "aurora-buds-air", category: "electronics-earbuds", price: 12900, stock: 80, name: { en: "Aurora Buds Air", zh: "Aurora Buds Air 耳机" }, description: { en: "Active noise cancelling true wireless earbuds.", zh: "主动降噪真无线耳机。" }, img: "aurora-buds" },
-  { shop: "aurora-digital", slug: "aurora-boom-speaker", category: "electronics-speakers", price: 8900, stock: 35, name: { en: "Aurora Boom Speaker", zh: "Aurora Boom 音箱" }, description: { en: "Portable IPX7 speaker with 20h playback.", zh: "IPX7 防水便携音箱，20 小时播放。" }, img: "aurora-boom" },
-  { shop: "aurora-digital", slug: "aurora-ultrabook-14", category: "computers-ultrabooks", price: 129900, stock: 18, name: { en: "Aurora Ultrabook 14", zh: "Aurora 轻薄本 14" }, description: { en: "1.1kg magnesium chassis with 14in OLED panel.", zh: "1.1kg 镁合金机身，14 英寸 OLED 屏。" }, img: "aurora-ultrabook" },
-  { shop: "aurora-digital", slug: "aurora-27-monitor", category: "computers-monitors", price: 34900, stock: 22, name: { en: "Aurora 27 Monitor", zh: "Aurora 27 英寸显示器" }, description: { en: "27in 4K USB-C monitor with 90W power delivery.", zh: "27 英寸 4K USB-C 显示器，90W 反向供电。" }, img: "aurora-monitor" },
+  {
+    shop: "aurora-digital",
+    slug: "aurora-x1-pro",
+    category: "electronics-flagship",
+    price: 99900,
+    stock: 12,
+    name: { en: "Aurora X1 Pro", zh: "Aurora X1 Pro 旗舰手机" },
+    description: {
+      en: "6.7in flagship with triple camera and 120Hz display.",
+      zh: "6.7 英寸三摄旗舰，120Hz 屏幕。",
+    },
+    img: "aurora-x1",
+  },
+  {
+    shop: "aurora-digital",
+    slug: "aurora-a3",
+    category: "electronics-budget",
+    price: 19900,
+    stock: 60,
+    name: { en: "Aurora A3", zh: "Aurora A3 手机" },
+    description: {
+      en: "Everyday 5G phone with 5000mAh battery.",
+      zh: "日常 5G 手机，5000mAh 电池。",
+    },
+    img: "aurora-a3",
+  },
+  {
+    shop: "aurora-digital",
+    slug: "aurora-buds-air",
+    category: "electronics-earbuds",
+    price: 12900,
+    stock: 80,
+    name: { en: "Aurora Buds Air", zh: "Aurora Buds Air 耳机" },
+    description: {
+      en: "Active noise cancelling true wireless earbuds.",
+      zh: "主动降噪真无线耳机。",
+    },
+    img: "aurora-buds",
+  },
+  {
+    shop: "aurora-digital",
+    slug: "aurora-boom-speaker",
+    category: "electronics-speakers",
+    price: 8900,
+    stock: 35,
+    name: { en: "Aurora Boom Speaker", zh: "Aurora Boom 音箱" },
+    description: {
+      en: "Portable IPX7 speaker with 20h playback.",
+      zh: "IPX7 防水便携音箱，20 小时播放。",
+    },
+    img: "aurora-boom",
+  },
+  {
+    shop: "aurora-digital",
+    slug: "aurora-ultrabook-14",
+    category: "computers-ultrabooks",
+    price: 129900,
+    stock: 18,
+    name: { en: "Aurora Ultrabook 14", zh: "Aurora 轻薄本 14" },
+    description: {
+      en: "1.1kg magnesium chassis with 14in OLED panel.",
+      zh: "1.1kg 镁合金机身，14 英寸 OLED 屏。",
+    },
+    img: "aurora-ultrabook",
+  },
+  {
+    shop: "aurora-digital",
+    slug: "aurora-27-monitor",
+    category: "computers-monitors",
+    price: 34900,
+    stock: 22,
+    name: { en: "Aurora 27 Monitor", zh: "Aurora 27 英寸显示器" },
+    description: {
+      en: "27in 4K USB-C monitor with 90W power delivery.",
+      zh: "27 英寸 4K USB-C 显示器，90W 反向供电。",
+    },
+    img: "aurora-monitor",
+  },
 
   // nordwind-home
-  { shop: "nordwind-home", slug: "nordwind-rice-cooker", category: "home-cookers", price: 8900, stock: 50, name: { en: "Nordwind Rice Cooker", zh: "北风智能电饭煲" }, description: { en: "IH rice cooker with 12 presets.", zh: "IH 电磁加热，12 种预设菜单。" }, img: "nordwind-cooker" },
-  { shop: "nordwind-home", slug: "nordwind-blender-pro", category: "home-blenders", price: 15900, stock: 28, name: { en: "Nordwind Blender Pro", zh: "北风破壁机 Pro" }, description: { en: "1400W high-speed blender with vacuum jar.", zh: "1400W 高速破壁机，配真空杯。" }, img: "nordwind-blender" },
-  { shop: "nordwind-home", slug: "nordwind-stick-vacuum", category: "home-vacuums", price: 24900, stock: 24, name: { en: "Nordwind Stick Vacuum", zh: "北风无线吸尘器" }, description: { en: "Cordless vacuum with 60min runtime.", zh: "无线手持吸尘器，续航 60 分钟。" }, img: "nordwind-vacuum" },
-  { shop: "nordwind-home", slug: "nordwind-air-purifier", category: "home-purifiers", price: 32900, stock: 20, name: { en: "Nordwind Air Purifier", zh: "北风空气净化器" }, description: { en: "HEPA 13 purifier covering 60 square metres.", zh: "HEPA 13 滤网，适用 60 平方米。" }, img: "nordwind-purifier" },
-  { shop: "nordwind-home", slug: "nordwind-serum-c", category: "beauty-serums", price: 4900, stock: 70, name: { en: "Nordwind Vitamin C Serum", zh: "北风维C精华" }, description: { en: "15% vitamin C brightening serum.", zh: "15% 维C 提亮精华。" }, img: "nordwind-serum" },
-  { shop: "nordwind-home", slug: "nordwind-shave-9000", category: "beauty-shavers", price: 7900, stock: 40, name: { en: "Nordwind Shaver 9000", zh: "北风剃须刀 9000" }, description: { en: "Wet and dry rotary shaver with travel case.", zh: "干湿两用旋转剃须刀，含旅行盒。" }, img: "nordwind-shaver" },
+  {
+    shop: "nordwind-home",
+    slug: "nordwind-rice-cooker",
+    category: "home-cookers",
+    price: 8900,
+    stock: 50,
+    name: { en: "Nordwind Rice Cooker", zh: "北风智能电饭煲" },
+    description: { en: "IH rice cooker with 12 presets.", zh: "IH 电磁加热，12 种预设菜单。" },
+    img: "nordwind-cooker",
+  },
+  {
+    shop: "nordwind-home",
+    slug: "nordwind-blender-pro",
+    category: "home-blenders",
+    price: 15900,
+    stock: 28,
+    name: { en: "Nordwind Blender Pro", zh: "北风破壁机 Pro" },
+    description: {
+      en: "1400W high-speed blender with vacuum jar.",
+      zh: "1400W 高速破壁机，配真空杯。",
+    },
+    img: "nordwind-blender",
+  },
+  {
+    shop: "nordwind-home",
+    slug: "nordwind-stick-vacuum",
+    category: "home-vacuums",
+    price: 24900,
+    stock: 24,
+    name: { en: "Nordwind Stick Vacuum", zh: "北风无线吸尘器" },
+    description: {
+      en: "Cordless vacuum with 60min runtime.",
+      zh: "无线手持吸尘器，续航 60 分钟。",
+    },
+    img: "nordwind-vacuum",
+  },
+  {
+    shop: "nordwind-home",
+    slug: "nordwind-air-purifier",
+    category: "home-purifiers",
+    price: 32900,
+    stock: 20,
+    name: { en: "Nordwind Air Purifier", zh: "北风空气净化器" },
+    description: {
+      en: "HEPA 13 purifier covering 60 square metres.",
+      zh: "HEPA 13 滤网，适用 60 平方米。",
+    },
+    img: "nordwind-purifier",
+  },
+  {
+    shop: "nordwind-home",
+    slug: "nordwind-serum-c",
+    category: "beauty-serums",
+    price: 4900,
+    stock: 70,
+    name: { en: "Nordwind Vitamin C Serum", zh: "北风维C精华" },
+    description: { en: "15% vitamin C brightening serum.", zh: "15% 维C 提亮精华。" },
+    img: "nordwind-serum",
+  },
+  {
+    shop: "nordwind-home",
+    slug: "nordwind-shave-9000",
+    category: "beauty-shavers",
+    price: 7900,
+    stock: 40,
+    name: { en: "Nordwind Shaver 9000", zh: "北风剃须刀 9000" },
+    description: {
+      en: "Wet and dry rotary shaver with travel case.",
+      zh: "干湿两用旋转剃须刀，含旅行盒。",
+    },
+    img: "nordwind-shaver",
+  },
 
   // terra-grocery
-  { shop: "terra-grocery", slug: "terra-mixed-nuts", category: "grocery-nuts", price: 1599, stock: 200, name: { en: "Terra Mixed Nuts", zh: "大地混合坚果" }, description: { en: "Roasted unsalted nut mix, 500g.", zh: "烘烤无盐混合坚果，500g。" }, img: "terra-nuts" },
-  { shop: "terra-grocery", slug: "terra-dark-chocolate", category: "grocery-chocolate", price: 1299, stock: 180, name: { en: "Terra Dark Chocolate", zh: "大地黑巧克力" }, description: { en: "72% single-origin dark chocolate.", zh: "72% 单一产地黑巧克力。" }, img: "terra-chocolate" },
-  { shop: "terra-grocery", slug: "terra-orchard-apples", category: "grocery-fruit", price: 899, stock: 300, name: { en: "Terra Orchard Apples", zh: "大地果园苹果" }, description: { en: "Crisp orchard apples, 1kg box.", zh: "脆甜果园苹果，1kg 装。" }, img: "terra-apples" },
-  { shop: "terra-grocery", slug: "terra-organic-kale", category: "grocery-vegetables", price: 699, stock: 260, name: { en: "Terra Organic Kale", zh: "大地有机羽衣甘蓝" }, description: { en: "Certified organic kale, 400g.", zh: "有机认证羽衣甘蓝，400g。" }, img: "terra-kale" },
-  { shop: "terra-grocery", slug: "terra-carry-on", category: "fashion-luggage", price: 42900, stock: 16, name: { en: "Terra Carry-On", zh: "大地登机箱" }, description: { en: "Polycarbonate carry-on with TSA lock.", zh: "聚碳酸酯登机箱，TSA 密码锁。" }, img: "terra-carryon" },
-  { shop: "terra-grocery", slug: "terra-leather-tote", category: "fashion-bags", price: 21900, stock: 26, name: { en: "Terra Leather Tote", zh: "大地真皮托特包" }, description: { en: "Full-grain leather tote with laptop sleeve.", zh: "头层牛皮托特包，含电脑隔层。" }, img: "terra-tote" },
+  {
+    shop: "terra-grocery",
+    slug: "terra-mixed-nuts",
+    category: "grocery-nuts",
+    price: 1599,
+    stock: 200,
+    name: { en: "Terra Mixed Nuts", zh: "大地混合坚果" },
+    description: { en: "Roasted unsalted nut mix, 500g.", zh: "烘烤无盐混合坚果，500g。" },
+    img: "terra-nuts",
+  },
+  {
+    shop: "terra-grocery",
+    slug: "terra-dark-chocolate",
+    category: "grocery-chocolate",
+    price: 1299,
+    stock: 180,
+    name: { en: "Terra Dark Chocolate", zh: "大地黑巧克力" },
+    description: { en: "72% single-origin dark chocolate.", zh: "72% 单一产地黑巧克力。" },
+    img: "terra-chocolate",
+  },
+  {
+    shop: "terra-grocery",
+    slug: "terra-orchard-apples",
+    category: "grocery-fruit",
+    price: 899,
+    stock: 300,
+    name: { en: "Terra Orchard Apples", zh: "大地果园苹果" },
+    description: { en: "Crisp orchard apples, 1kg box.", zh: "脆甜果园苹果，1kg 装。" },
+    img: "terra-apples",
+  },
+  {
+    shop: "terra-grocery",
+    slug: "terra-organic-kale",
+    category: "grocery-vegetables",
+    price: 699,
+    stock: 260,
+    name: { en: "Terra Organic Kale", zh: "大地有机羽衣甘蓝" },
+    description: { en: "Certified organic kale, 400g.", zh: "有机认证羽衣甘蓝，400g。" },
+    img: "terra-kale",
+  },
+  {
+    shop: "terra-grocery",
+    slug: "terra-carry-on",
+    category: "fashion-luggage",
+    price: 42900,
+    stock: 16,
+    name: { en: "Terra Carry-On", zh: "大地登机箱" },
+    description: {
+      en: "Polycarbonate carry-on with TSA lock.",
+      zh: "聚碳酸酯登机箱，TSA 密码锁。",
+    },
+    img: "terra-carryon",
+  },
+  {
+    shop: "terra-grocery",
+    slug: "terra-leather-tote",
+    category: "fashion-bags",
+    price: 21900,
+    stock: 26,
+    name: { en: "Terra Leather Tote", zh: "大地真皮托特包" },
+    description: {
+      en: "Full-grain leather tote with laptop sleeve.",
+      zh: "头层牛皮托特包，含电脑隔层。",
+    },
+    img: "terra-tote",
+  },
 ];
 
 // 5b. brands (admin-managed reference data), then assign one per product
@@ -364,11 +655,36 @@ console.log(`products ready: ${products.length} across ${SHOPS.length} shops`);
 // 6. points mall products (idempotent by English name). The demo customer's
 //    spendable points are credited by the API through the account ledger.
 const POINTS_PRODUCTS = [
-  { name: { en: "Insulated Mug", zh: "保温杯" }, image: "/mock/product-9.svg", points_price: 1200, stock: 300 },
-  { name: { en: "Canvas Tote", zh: "帆布手提袋" }, image: "/mock/product-15.svg", points_price: 600, stock: 500 },
-  { name: { en: "Phone Stand", zh: "手机支架" }, image: "/mock/product-7.svg", points_price: 400, stock: 800 },
-  { name: { en: "Cable Organizer Set", zh: "数据线收纳套装" }, image: "/mock/product-3.svg", points_price: 300, stock: 1000 },
-  { name: { en: "Notebook A5", zh: "A5 笔记本" }, image: "/mock/product-14.svg", points_price: 250, stock: 1200 },
+  {
+    name: { en: "Insulated Mug", zh: "保温杯" },
+    image: "/mock/product-9.svg",
+    points_price: 1200,
+    stock: 300,
+  },
+  {
+    name: { en: "Canvas Tote", zh: "帆布手提袋" },
+    image: "/mock/product-15.svg",
+    points_price: 600,
+    stock: 500,
+  },
+  {
+    name: { en: "Phone Stand", zh: "手机支架" },
+    image: "/mock/product-7.svg",
+    points_price: 400,
+    stock: 800,
+  },
+  {
+    name: { en: "Cable Organizer Set", zh: "数据线收纳套装" },
+    image: "/mock/product-3.svg",
+    points_price: 300,
+    stock: 1000,
+  },
+  {
+    name: { en: "Notebook A5", zh: "A5 笔记本" },
+    image: "/mock/product-14.svg",
+    points_price: 250,
+    stock: 1200,
+  },
 ];
 {
   const listed = await call("GET", "/admin/points/products", { token: admin });