diff --git a/.changeset/fix-cdn-preflight-if-none-match.md b/.changeset/fix-cdn-preflight-if-none-match.md
new file mode 100644
index 000000000..07228c86b
--- /dev/null
+++ b/.changeset/fix-cdn-preflight-if-none-match.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+修正匯率 CDN 請求因 preflight 失敗而過度降級至 GitHub Raw 的問題，提升主 CDN 命中率與載入穩定性
diff --git a/.changeset/fix-moneybox-cdn-etag.md b/.changeset/fix-moneybox-cdn-etag.md
new file mode 100644
index 000000000..99d7c7e4e
--- /dev/null
+++ b/.changeset/fix-moneybox-cdn-etag.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+移除 moneybox CDN fetchFromCDN 的 ETag/304 條件式請求，統一以 HTTP cache 與 client 端 TTL 管理重複請求；更新 OpenData 與 SeoTech 頁面說明文字以反映新行為
diff --git a/.changeset/fix-nitro-theme-ssot.md b/.changeset/fix-nitro-theme-ssot.md
new file mode 100644
index 000000000..ff284e544
--- /dev/null
+++ b/.changeset/fix-nitro-theme-ssot.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+對齊 nitro 主題色票 SSOT：themes.ts primary 從 #00D4FF 改為 #0096E6，與 index.css 保持一致
diff --git a/.changeset/fix-ratewise-pwa-ios-eviction.md b/.changeset/fix-ratewise-pwa-ios-eviction.md
new file mode 100644
index 000000000..4322d4802
--- /dev/null
+++ b/.changeset/fix-ratewise-pwa-ios-eviction.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+修復 iOS PWA precache 驅逐後 3s timeout 導致在線用戶看到 offline.html 的假離線問題，改用 precache-first 冷啟動策略
diff --git a/.changeset/quiet-breadcrumb-token-refactor.md b/.changeset/quiet-breadcrumb-token-refactor.md
new file mode 100644
index 000000000..a442a70c0
--- /dev/null
+++ b/.changeset/quiet-breadcrumb-token-refactor.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+收斂內容頁返回導覽、麵包屑與核心 UI shell 的 design token，改善 PWA 與小螢幕顯示穩定性。
diff --git a/.changeset/ratewise-a11y-touch-target-focus.md b/.changeset/ratewise-a11y-touch-target-focus.md
new file mode 100644
index 000000000..f7c89f418
--- /dev/null
+++ b/.changeset/ratewise-a11y-touch-target-focus.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+無障礙與操作體驗改善：評分視窗星星按鈕、開放資料頁複製按鈕、Email 連結與計算機關閉鈕補齊 44px 觸控目標與鍵盤焦點指示；小型標籤與代碼區塊圓角統一為設計系統規格。
diff --git a/.changeset/ratewise-artifact-ssot.md b/.changeset/ratewise-artifact-ssot.md
new file mode 100644
index 000000000..c2440f801
--- /dev/null
+++ b/.changeset/ratewise-artifact-ssot.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+Clarify generated artifact buckets and remove local build report files from tracked source.
diff --git a/.changeset/ratewise-currency-route-registry.md b/.changeset/ratewise-currency-route-registry.md
new file mode 100644
index 000000000..1ccd9aa45
--- /dev/null
+++ b/.changeset/ratewise-currency-route-registry.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+Consolidate currency landing route registration behind a registry with parity checks.
diff --git a/.changeset/ratewise-data-pr-governance.md b/.changeset/ratewise-data-pr-governance.md
new file mode 100644
index 000000000..fad31a664
--- /dev/null
+++ b/.changeset/ratewise-data-pr-governance.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+Strengthen scheduled rate data update governance by requiring generated data PRs to pass branch protection before merge.
diff --git a/.changeset/ratewise-design-token-ssot.md b/.changeset/ratewise-design-token-ssot.md
new file mode 100644
index 000000000..0770af7a7
--- /dev/null
+++ b/.changeset/ratewise-design-token-ssot.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+收斂設計 Token 為語義化 SSOT：圓角與陰影全站統一為語義 token，恢復 Tailwind 標準預設值避免第三方整合風險
diff --git a/.changeset/ratewise-error-classification-cross-browser.md b/.changeset/ratewise-error-classification-cross-browser.md
new file mode 100644
index 000000000..5a9444f54
--- /dev/null
+++ b/.changeset/ratewise-error-classification-cross-browser.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+errorClassification 補上 Firefox 與 iOS / macOS Safari 多種 fetch 失敗訊息覆蓋（離線、連線中斷、DNS 失敗、無法連線），避免一般網路失敗在跨瀏覽器下被誤分類為 unknown；同步修正刷新腳本 cache 分支幣別數量輸出。
diff --git a/.changeset/ratewise-error-observability.md b/.changeset/ratewise-error-observability.md
new file mode 100644
index 000000000..aca0af716
--- /dev/null
+++ b/.changeset/ratewise-error-observability.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+改善正式版全域錯誤分類，避免一般網路錯誤被誤判為預期歷史匯率缺檔
diff --git a/.changeset/ratewise-exchange-shop-ratemode-nav-header.md b/.changeset/ratewise-exchange-shop-ratemode-nav-header.md
new file mode 100644
index 000000000..c0cf9153c
--- /dev/null
+++ b/.changeset/ratewise-exchange-shop-ratemode-nav-header.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+修正換錢所匯率模式選價：選「中間價」時正確以（買入＋賣出）÷2 計算、選「賣出」時雙向採用賣出價，趨勢圖與多幣別列同步跟隨所選模式；內容頁頂部「返回＋麵包屑」導覽改為不固定的圓角按鈕樣式，修復部分 iOS PWA 用戶頂部內容被遮擋的問題。
diff --git a/.changeset/ratewise-fallback-snapshot.md b/.changeset/ratewise-fallback-snapshot.md
new file mode 100644
index 000000000..d8d60f5ba
--- /dev/null
+++ b/.changeset/ratewise-fallback-snapshot.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+讓 build-time fallback 匯率快照由每日資料更新流程維護，避免一般 build 產生匯率資料漂移；同時在線上遠端匯率來源全失敗且本機無快取時，改用 build-time snapshot 維持換算器可用。
diff --git a/.changeset/ratewise-moneybox-aggregate-cleanup.md b/.changeset/ratewise-moneybox-aggregate-cleanup.md
new file mode 100644
index 000000000..fcebc1655
--- /dev/null
+++ b/.changeset/ratewise-moneybox-aggregate-cleanup.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+換錢所 aggregate 趨勢線：移除說明性註解、抽出 daily fallback helper、收斂兩處 cache 寫入為單一寫入點，行為不變。
diff --git a/.changeset/ratewise-moneybox-aggregate-trend.md b/.changeset/ratewise-moneybox-aggregate-trend.md
new file mode 100644
index 000000000..a9f74dd9b
--- /dev/null
+++ b/.changeset/ratewise-moneybox-aggregate-trend.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+換錢所（MoneyBox）趨勢線改用 aggregate endpoint：與台銀 history-30d.json SSOT 一致，命中時 30 個 daily fetch 收斂為 1 個（runtime AB 量到 50→1 requests、~5,049ms→~2ms）。aggregate 不存在時自動退回原本逐日 fetch 路徑，行為無回歸。
diff --git a/.changeset/ratewise-multi-rate-label.md b/.changeset/ratewise-multi-rate-label.md
new file mode 100644
index 000000000..a01b7c08d
--- /dev/null
+++ b/.changeset/ratewise-multi-rate-label.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+修正多幣別頁面在換錢所反向匯率、現金不可用與小字低對比情境下的匯率來源標籤。
diff --git a/.changeset/ratewise-opendata-mobile-overflow.md b/.changeset/ratewise-opendata-mobile-overflow.md
new file mode 100644
index 000000000..4e856b39b
--- /dev/null
+++ b/.changeset/ratewise-opendata-mobile-overflow.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+修正開放資料頁 API 端點路徑在小螢幕（320px 等窄視口）造成的水平溢出，長路徑現在會正確斷行。
diff --git a/.changeset/ratewise-production-surface.md b/.changeset/ratewise-production-surface.md
new file mode 100644
index 000000000..1460e3ba6
--- /dev/null
+++ b/.changeset/ratewise-production-surface.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+正式版不再輸出內部展示與測試頁面的預渲染路由
diff --git a/.changeset/ratewise-pwa-shell-brand-sync.md b/.changeset/ratewise-pwa-shell-brand-sync.md
new file mode 100644
index 000000000..2866c9e6d
--- /dev/null
+++ b/.changeset/ratewise-pwa-shell-brand-sync.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+PWA shell 品牌色同步至 Violet 主題，CDN 備援日誌降噪至 debug 等級
diff --git a/.changeset/ratewise-radius-ssot-guard.md b/.changeset/ratewise-radius-ssot-guard.md
new file mode 100644
index 000000000..580d7c9d1
--- /dev/null
+++ b/.changeset/ratewise-radius-ssot-guard.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+視覺一致性收斂：匯率卡趨勢圖底部圓角對齊卡片外框、骨架載入與小型元素圓角統一為設計系統規格，並新增圓角防回歸守門測試。
diff --git a/.changeset/ratewise-sentry-fetch-filter-ssot.md b/.changeset/ratewise-sentry-fetch-filter-ssot.md
new file mode 100644
index 000000000..d38d34e49
--- /dev/null
+++ b/.changeset/ratewise-sentry-fetch-filter-ssot.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+Sentry `beforeSend` 改用 `classifyUnhandledRejection` 判斷 fetch 失敗，與 errorClassification SSOT 收斂；Firefox / Safari 的網路失敗訊息不再重複送到 Sentry。
diff --git a/.changeset/ratewise-ssg-snapshot-source.md b/.changeset/ratewise-ssg-snapshot-source.md
new file mode 100644
index 000000000..0921ab850
--- /dev/null
+++ b/.changeset/ratewise-ssg-snapshot-source.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+修正金額頁 SSG 預渲染匯率來源，clean checkout 不再依賴 ignored 的 public/rates.json。
diff --git a/.changeset/ratewise-sw-bounded-nav.md b/.changeset/ratewise-sw-bounded-nav.md
new file mode 100644
index 000000000..ec8b3accb
--- /dev/null
+++ b/.changeset/ratewise-sw-bounded-nav.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+離線/弱網下載入更穩定，不再可能卡白屏。
diff --git a/.changeset/split-meow-expense-currency-snapshot.md b/.changeset/split-meow-expense-currency-snapshot.md
new file mode 100644
index 000000000..7e7ea1dfd
--- /dev/null
+++ b/.changeset/split-meow-expense-currency-snapshot.md
@@ -0,0 +1,5 @@
+---
+'@app/split-meow': patch
+---
+
+每筆支出記錄記帳當下的幣別與匯率，切換顯示幣別後歷史金額不再被錯誤換算；以韓元（₩）記帳的支出會同時顯示對應的台幣參考金額。
diff --git a/.github/workflows/ratewise-production-governance.yml b/.github/workflows/ratewise-production-governance.yml
new file mode 100644
index 000000000..77a86f769
--- /dev/null
+++ b/.github/workflows/ratewise-production-governance.yml
@@ -0,0 +1,53 @@
+name: RateWise Production Governance
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '17 20 * * *'
+
+permissions:
+  contents: read
+
+jobs:
+  production-governance:
+    name: Live Headers And Performance Gates
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      PLAYWRIGHT_BASE_URL: https://app.haotool.org
+      E2E_BASE_PATH: /ratewise
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v6
+        with:
+          version: 9.10.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright Chromium
+        run: pnpm --filter @app/ratewise exec playwright install --with-deps chromium
+
+      - name: Verify Cloudflare headers and cache policy
+        run: |
+          RUN_PRODUCTION_TESTS=true \
+          pnpm --filter @app/ratewise exec playwright test \
+            tests/e2e/cloudflare-cache.spec.ts \
+            --project=chromium-desktop
+
+      - name: Verify trend chart latency budget
+        run: |
+          RUN_RATEWISE_PERFORMANCE_TESTS=true \
+          pnpm --filter @app/ratewise exec playwright test \
+            tests/e2e/trend-chart-latency.spec.ts \
+            --project=chromium-desktop
diff --git a/.github/workflows/update-moneybox-rates.yml b/.github/workflows/update-moneybox-rates.yml
index ec4122c0e..6878c9b4b 100644
--- a/.github/workflows/update-moneybox-rates.yml
+++ b/.github/workflows/update-moneybox-rates.yml
@@ -36,6 +36,7 @@ jobs:
       MONEYBOX_FETCH_OUTPUT_FILE: .moneybox-current-fetch.json
       MONEYBOX_LATEST_FILE: public/rates/providers/moneybox/latest.json
       MONEYBOX_HISTORY_DIR: public/rates/providers/moneybox/history
+      MONEYBOX_AGGREGATE_FILE: public/rates/providers/moneybox/history-30d.json
       MONEYBOX_RETIRED_LATEST_FILE: public/rates/moneybox.json
       MONEYBOX_RETIRED_HISTORY_DIR: public/rates/moneybox-history
       MONEYBOX_CDN_DATA_BASE: https://cdn.jsdelivr.net/gh/haotool/app@data
@@ -93,13 +94,26 @@ jobs:
         id: save-history
         if: steps.fetch-rates.outcome == 'success'
         run: |
-          CURRENT_DATE=$(TZ=Asia/Taipei date +%Y-%m-%d)
-          MONEYBOX_HISTORY_FILE="${MONEYBOX_HISTORY_DIR}/${CURRENT_DATE}.json"
-          mkdir -p "$MONEYBOX_HISTORY_DIR"
           if [[ ! -f "$MONEYBOX_FETCH_OUTPUT_FILE" ]]; then
             echo "❌ Current MoneyBox fetch snapshot missing: ${MONEYBOX_FETCH_OUTPUT_FILE}"
             exit 1
           fi
+          # history 檔名 SSOT：直接採用資料本身宣告的首爾掛牌日（updateTime），
+          # 與 fetch script 的 date-rollover 判斷 (extractSeoulSnapshotDate) 同源，
+          # 避免 runner wall-clock 與資料日期在跨日視窗不一致。提取失敗時 fallback 首爾 wall-clock。
+          CURRENT_DATE=$(node --input-type=module -e "
+            import { readFileSync } from 'node:fs';
+            const { extractSeoulSnapshotDate } = await import('./scripts/fetch-moneybox-rates.js');
+            const data = JSON.parse(readFileSync(process.env.MONEYBOX_FETCH_OUTPUT_FILE, 'utf8'));
+            const d = extractSeoulSnapshotDate(data);
+            if (d) process.stdout.write(d);
+          ")
+          if [[ ! "$CURRENT_DATE" =~ ^[0-9]{4}-[0-9]{2}-[0-9]{2}$ ]]; then
+            CURRENT_DATE=$(TZ=Asia/Seoul date +%Y-%m-%d)
+            echo "⚠️ 無法從資料提取首爾 snapshot date，fallback 至首爾 wall-clock: ${CURRENT_DATE}"
+          fi
+          MONEYBOX_HISTORY_FILE="${MONEYBOX_HISTORY_DIR}/${CURRENT_DATE}.json"
+          mkdir -p "$MONEYBOX_HISTORY_DIR"
           if [[ ! -f "$MONEYBOX_HISTORY_FILE" ]] || [[ -n "$(git status --short --untracked-files=all -- "$MONEYBOX_LATEST_FILE")" ]]; then
             cp "$MONEYBOX_FETCH_OUTPUT_FILE" "$MONEYBOX_HISTORY_FILE"
             echo "✅ MoneyBox history snapshot refreshed: ${MONEYBOX_HISTORY_FILE}"
@@ -134,10 +148,59 @@ jobs:
           if [[ -n "$(git status --short --untracked-files=all -- "$MONEYBOX_HISTORY_DIR/")" ]]; then
             echo "changed=true" >> $GITHUB_OUTPUT
           fi
+          if [[ ! -f "$MONEYBOX_AGGREGATE_FILE" ]]; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          fi
           if [[ "$RETIRED_ALIASES_CHANGED" == "true" ]]; then
             echo "changed=true" >> $GITHUB_OUTPUT
           fi
 
+      - name: Generate moneybox aggregate 30-day history
+        if: steps.fetch-rates.outcome == 'success' && steps.git-check.outputs.changed == 'true'
+        run: |
+          node --input-type=module << 'SCRIPT'
+          import { readdirSync, readFileSync, existsSync, mkdirSync, writeFileSync } from 'node:fs';
+          import { dirname, join } from 'node:path';
+
+          const HISTORY_DIR = process.env.MONEYBOX_HISTORY_DIR;
+          const OUTPUT_PATH = process.env.MONEYBOX_AGGREGATE_FILE;
+          const MAX_DAYS = 30;
+
+          if (!existsSync(HISTORY_DIR)) {
+            console.error(`❌ History dir not found: ${HISTORY_DIR}`);
+            process.exit(1);
+          }
+
+          const files = readdirSync(HISTORY_DIR)
+            .filter((f) => /^\d{4}-\d{2}-\d{2}\.json$/.test(f))
+            .sort()
+            .reverse()
+            .slice(0, MAX_DAYS);
+
+          const snapshots = [];
+          for (const file of files) {
+            const date = file.replace(/\.json$/, '');
+            try {
+              const raw = JSON.parse(readFileSync(join(HISTORY_DIR, file), 'utf-8'));
+              snapshots.push({ date, raw });
+            } catch (e) {
+              console.warn(`⚠️ Skip ${file}: ${e.message}`);
+            }
+          }
+
+          const aggregate = {
+            providerId: 'moneybox',
+            generatedAt: new Date().toISOString(),
+            snapshots,
+          };
+
+          const outDir = dirname(OUTPUT_PATH);
+          if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
+          writeFileSync(OUTPUT_PATH, JSON.stringify(aggregate, null, 2) + '\n');
+
+          console.log(`✅ moneybox aggregate: ${snapshots.length} days → ${OUTPUT_PATH}`);
+          SCRIPT
+
       - name: Commit and push changes
         if: steps.fetch-rates.outcome == 'success' && steps.git-check.outputs.changed == 'true'
         env:
@@ -145,10 +208,10 @@ jobs:
         run: |
           git config --local user.email "github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"
-          # 只 add 當日 history 檔，避免 git checkout origin/main -- public/rates/ 後
-          # 把 data branch 既有的前幾日 history snapshot 一併 stage 成刪除（會清掉公開
-          # MoneyBox history API 與趨勢圖前日資料）。SSOT：每次只動當日 snapshot。
-          git add "$MONEYBOX_LATEST_FILE" "$TODAY_HISTORY_FILE"
+          # 只 add 當日 history 檔與 aggregate，避免 git checkout origin/main -- public/rates/
+          # 後把 data branch 既有的前幾日 history snapshot 一併 stage 成刪除（會清掉公開
+          # MoneyBox history API 與趨勢圖前日資料）。SSOT：每次只動當日 snapshot + aggregate。
+          git add "$MONEYBOX_LATEST_FILE" "$TODAY_HISTORY_FILE" "$MONEYBOX_AGGREGATE_FILE"
 
           # 取得更新資訊
           UPDATE_TIME=$(node -p "JSON.parse(require('fs').readFileSync(process.env.MONEYBOX_LATEST_FILE)).updateTime")
@@ -205,8 +268,9 @@ jobs:
         run: |
           PURGE_URL="${MONEYBOX_PURGE_DATA_BASE}/${MONEYBOX_LATEST_FILE}"
           HISTORY_PURGE_URL="${MONEYBOX_PURGE_DATA_BASE}/${MONEYBOX_HISTORY_DIR}/${CURRENT_DATE}.json"
+          AGGREGATE_PURGE_URL="${MONEYBOX_PURGE_DATA_BASE}/${MONEYBOX_AGGREGATE_FILE}"
           echo "🧹 Purging jsDelivr CDN cache..."
-          for URL in "$PURGE_URL" "$HISTORY_PURGE_URL"; do
+          for URL in "$PURGE_URL" "$HISTORY_PURGE_URL" "$AGGREGATE_PURGE_URL"; do
             for i in 1 2 3; do
               HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" "$URL")
               if [ "$HTTP_STATUS" = "200" ]; then
@@ -228,7 +292,7 @@ jobs:
           git rebase --abort 2>/dev/null || true
           for i in 1 2 3; do
             echo "🔄 Refreshing MoneyBox provider files from remote data branch (try $i/3)..."
-            if git fetch origin data && git checkout origin/data -- "$MONEYBOX_LATEST_FILE" "$MONEYBOX_HISTORY_DIR"; then
+            if git fetch origin data && git checkout origin/data -- "$MONEYBOX_LATEST_FILE" "$MONEYBOX_HISTORY_DIR" "$MONEYBOX_AGGREGATE_FILE"; then
               echo "✅ Remote refresh successful"
               exit 0
             fi
diff --git a/.github/workflows/update-seo-rate-examples.yml b/.github/workflows/update-seo-rate-examples.yml
index 37644d12b..1f6f3f808 100644
--- a/.github/workflows/update-seo-rate-examples.yml
+++ b/.github/workflows/update-seo-rate-examples.yml
@@ -1,12 +1,12 @@
 # SEO 匯差範例數據每日更新
 #
-# 職責：每日抓取最新臺灣銀行牌告匯率，計算各幣別現金匯率與市場中間價差距，
-#        更新 apps/ratewise/src/config/generated/seo-rate-examples.ts。
+# 職責：每日抓取最新臺灣銀行牌告匯率，更新 runtime fallback snapshot，
+#        並計算各幣別現金匯率與市場中間價差距。
 #
 # 流程（業界最佳實踐 — PR-based，不直接 push main）：
 #   1. 執行腳本（雙重驗證：台銀牌告 + open.er-api.com）
 #   2. 若有變更，peter-evans/create-pull-request@v8 建立 PR 分支
-#   3. PR 建立後直接 squash merge 至 main
+#   3. 交由 branch protection / required checks / maintainer review 或 GitHub auto-merge 合併
 #   4. 無變更時不建立 PR，靜默略過
 #
 # 為何不直接 push main：
@@ -51,6 +51,9 @@ jobs:
       - name: 安裝依賴
         run: pnpm install --frozen-lockfile
 
+      - name: 更新 build-time fallback 匯率 snapshot
+        run: pnpm --filter @app/ratewise refresh:fallback-rates
+
       - name: 執行匯差範例更新腳本（雙重驗證模式）
         run: node apps/ratewise/scripts/update-seo-rate-examples.mjs
 
@@ -64,6 +67,7 @@ jobs:
           commit-message: |
             chore(seo): 每日更新匯差範例數據
 
+            - 自動更新 build-time fallback 匯率 snapshot
             - 自動更新各幣別現金賣出 vs 市場中間價差距（換 3 萬台幣情境）
             - 雙重驗證：open.er-api.com 中間價 vs 台銀自身 (買入+賣出)/2 中間價
             - 差距超過 2% 幣別已警告（東南亞幣別預期偏高）
@@ -73,7 +77,7 @@ jobs:
           delete-branch: true
           title: 'chore(seo): 每日更新匯差範例數據'
           body: |
-            ## 自動更新：SEO 匯差範例數據
+            ## 自動更新：RateWise 匯率 fallback 與 SEO 匯差範例數據
 
             由 GitHub Actions 排程每日自動執行。腳本：[`update-seo-rate-examples.mjs`](apps/ratewise/scripts/update-seo-rate-examples.mjs)
 
@@ -91,21 +95,17 @@ jobs:
 
             ### 自動化
 
-            - PR 建立後 **直接 squash merge** 至 `main`
+            - PR 建立後交由 branch protection、required checks 與 maintainer review 控制合併
+            - 若 repo 啟用 GitHub auto-merge / merge queue，應由 GitHub 在條件滿足後合併
             - 無變更時不建立 PR，靜默略過
             - 幣別資料缺漏時腳本 `exit(1)`，工作流程明確失敗
           labels: |
             automated
             seo
           add-paths: |
+            apps/ratewise/src/config/generated/build-time-rates.json
             apps/ratewise/src/config/generated/seo-rate-examples.ts
 
-      - name: 合併 PR（squash）
-        if: steps.create-pr.outputs.pull-request-number != ''
-        run: gh pr merge --squash "${{ steps.create-pr.outputs.pull-request-number }}"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
       - name: 無變更
         if: steps.create-pr.outputs.pull-request-number == ''
         run: echo "ℹ️ 匯差範例數據無變更，略過建立 PR。"
diff --git a/.gitignore b/.gitignore
index a7e5f240d..10a3d9eb0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -128,6 +128,9 @@ squirrel.toml
 .agents/skills/*/references/
 .agents/skills/*/AGENTS.md
 
+# Third-party local skill bundles (tool-synced, not project source)
+.agents/skills/impeccable/
+
 # AI tool local skill copies (synced from .agents/skills/)
 .claude/
 .codex/
diff --git a/AGENTS.md b/AGENTS.md
index 2df920e79..33dc3e43d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -460,9 +460,19 @@ git push origin main     # pre-push 自動驗證
 
 - `public/*.md`（markdown mirrors）版本號由完整 build 更新；`pnpm changeset:version` 不觸發此步驟，故 mirrors 版本會暫時落後一個版本。
 - `src/config/generated/`（build-time-rates.json、seo-rate-examples.ts）由每日 SEO 排程更新。
+- `apps/ratewise/lighthouse-report.json` 與 `apps/ratewise/*.tsbuildinfo` 屬本機工具輸出；已由 `.gitignore` 管理，必須保持 untracked。
 - **MUST NOT**：把上述兩類修改單獨建立 release 後的 follow-up commit，`verify-version-ssot` 會因為 staged set 內沒有 version bump 或 changeset 而擋下。
 - **MUST**：commit 失敗後必須重新執行 `git restore --staged --worktree <files>` 再重試；lint-staged 的 stash/restore 循環會把失敗前的 working tree 狀態還原，使已 restore 的修改重新出現。
 
+### RateWise Generated Artifact Buckets（SSOT）
+
+- `pnpm --filter @app/ratewise refresh:data`：更新 live snapshots（build-time rates、SEO rate examples、rating snapshot）。
+- `pnpm --filter @app/ratewise refresh:fallback-rates`：只更新 committed runtime fallback rate snapshot。
+- `pnpm --filter @app/ratewise generate:deterministic`：由 repo SSOT 重建 sitemap、manifest、offline shell、LLMs text、Markdown mirrors、API JSON 與 OpenAPI。
+- `pnpm --filter @app/ratewise verify:artifacts`：執行 SSOT sync 與 image resource 檢查。
+- `pnpm --filter @app/ratewise prebuild`：只執行 deterministic generation、artifact verification 與 rating placeholder refresh；禁止把 tracked live rate refresh 塞回單一長命令。
+- `update-seo-rate-examples.yml`：只建立資料更新 PR；合併必須交由 branch protection、required checks、review 或 GitHub auto-merge / merge queue 控制，workflow 不得直接執行 `gh pr merge`。
+
 ### Release PR 自動化失敗治理
 
 **觸發條件**：main 累積 `.changeset/*.md`，但 package version / CHANGELOG 長期未更新；或 `Release` workflow 顯示 success 但未建立 `changeset-release/main` PR。
@@ -791,5 +801,30 @@ Agent 在結案或提交時，應能提供下列證據（依任務適用性）
 
 ---
 
+## Learned User Preferences
+
+- 偏好極簡 UI 設計：卡片與按鈕不加外框（border/outline），保持乾淨俐落
+- 多幣別轉換器中，非主幣項目使用極淺背景色 token，避免視覺突兀
+- 匯率顯示採 Google 模式：上方為原始幣、下方為目標幣，顯示買入價與其倒數，不使用「買入/賣出」術語
+- 匯率來源切換為三態（即期/現金/換錢所），無資料者灰色顯示並自動 fallback 至下一個可用來源
+- RateWise UI/UX 標竿為韓系金融 App（Toss、Wowpass），並行多面向審查追求高真度體驗
+- Kawaii 主題色票偏好較淺、較飽和粉嫩，避免暗沉色；Nitro/Ocean 等深色主題 primary 按鈕使用淺白字
+- 頁面資訊應精簡去重，避免重複雜亂堆疊；單幣別輸入應減少 Modal 閘門與多步摩擦
+- 所有修復需保持原子化，不得順便重構或加入不必要註解
+- 期望持續迭代直到完美收斂：監控 Codex review 並逐一解決、推送、驗證
+
+## Learned Workspace Facts
+
+- `docs/prompt/UIUX.md` 為 UI/UX 變更的正式審查清單，用於審視未提交改動
+- `feat/ratewise-fintech-uiux-p0` 為最新 RateWise UI/UX 分支（含 governance 與計價基準 pill）；若被 worktree 占用，開發/審查使用 `.claude/worktrees/ratewise-uiux-p0`
+- 2026 UX 規格與 Phase 1 計畫見 `docs/superpowers/specs/` 與 `docs/superpowers/plans/`
+- 品牌名稱 SSOT 為「HaoRate 匯率好工具」
+- RateWise 趨勢圖曾因 `TREND_CHART_DEFER_MS = 10000` 導致感知延遲，需保持 defer 時間在合理範圍
+- SEO 生產驗證三腳本組合：`verify-production-resources.mjs`（資源可達）→ `verify-all-apps.mjs`（語義）→ `verify-precache-assets.mjs`（PWA live）
+- Codex review 收斂為標準工作流：使用 `pnpm review:codex:audit` 盤點 → `gh` 逐條回覆 → 標記 resolved
+- 使用者會透過瀏覽器元素選取（browser_element）直接指定要修改的 UI 節點
+
+---
+
 **最後更新**: 2026-05-02T09:00:00+0800
 **版本**: v5.5（SEO 迭代 SOP 與監控治理補齊）
diff --git a/CLAUDE.md b/CLAUDE.md
index ad6c3a95c..c0ae9f4fc 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -146,6 +146,17 @@ git push origin main            # pre-push 自動跑 typecheck + test + build
 
 禁止：手動改版號、單獨跑 prebuild scripts、直接改 CHANGELOG 跳過 changeset。
 
+**RateWise generated artifact buckets**：
+
+- `pnpm --filter @app/ratewise refresh:data`：live snapshots
+  （`build-time-rates.json`、`seo-rate-examples.ts`、`rating-snapshot.ts`）。
+- `pnpm --filter @app/ratewise refresh:fallback-rates`：只更新 committed runtime fallback rate snapshot。
+- `pnpm --filter @app/ratewise generate:deterministic`：repo SSOT 可重建產物
+  （sitemap、manifest、offline shell、LLMs text、Markdown mirrors、API JSON、OpenAPI）。
+- `pnpm --filter @app/ratewise verify:artifacts`：SSOT sync 與 image resource 檢查。
+- `prebuild` 只執行 deterministic generation、artifact verification 與 rating placeholder refresh；不得刷新 tracked live rate data。`lighthouse-report.json`、`*.tsbuildinfo` 屬本機工具輸出，必須保持 untracked。
+- `update-seo-rate-examples.yml` 只建立資料更新 PR；合併交由 branch protection、required checks、review 或 GitHub auto-merge / merge queue 控制，workflow 不得直接執行 `gh pr merge`。
+
 **Release PR 自動化控制**：
 
 - `changesets/action` 的 release commit 必須使用 commitlint 豁免格式：`chore(release): 更新版本套件`
@@ -277,6 +288,8 @@ gh pr merge <PR_NUMBER> --squash --delete-branch=false
 
 **發版後 `public/*.md` 或 generated 檔案觸發 SSOT 守門失敗**：`pnpm changeset:version` 只更新 api/latest.json 等 SSOT 產出物，不重新生成 markdown mirrors（`public/*.md`）；若這些修改殘留並另行 commit，`verify-version-ssot` 會因新 staged set 缺少 version bump 或 changeset 而擋下。修法：`git restore --staged --worktree apps/ratewise/public/*.md apps/ratewise/src/config/generated/`，讓 CI build 與每日 SEO 排程重新生成。
 
+**本機 build / QA 產物出現在 git status**：`apps/ratewise/lighthouse-report.json` 與 `apps/ratewise/*.tsbuildinfo` 是工具輸出，不是 source。若它們被重新建立，保持 untracked；若意外 staged，執行 `git restore --staged <file>`。
+
 **lint-staged stash/restore 循環復活已 restore 的檔案**：commit 失敗時 lint-staged 會還原其 stash，可能把已 `git restore` 的 working tree 修改重新帶回。修法：每次 commit 失敗後必須重新執行 `git restore --staged --worktree <files>` 再重試，不可假設檔案狀態與 restore 後相同。
 
 ### PWA
diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 000000000..396be7d32
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,231 @@
+---
+name: RateWise
+description: 台灣銀行牌告導向的安靜匯率換算工具
+colors:
+  background: '#F8FAFC'
+  surface: '#FFFFFF'
+  surface-elevated: '#F8FAFC'
+  surface-sunken: '#F1F5F9'
+  text: '#0F172A'
+  text-muted: '#64748B'
+  primary: '#7C3AED'
+  secondary: '#6366F1'
+  accent: '#8B5CF6'
+  border: '#E2E8F0'
+  info: '#0EA5E9'
+  success: '#22C55E'
+  warning: '#F59E0B'
+  destructive: '#DC2626'
+typography:
+  display:
+    fontFamily: 'Inter, Noto Sans TC, system-ui, -apple-system, sans-serif'
+    fontSize: 'clamp(1.875rem, 4vw, 2.25rem)'
+    fontWeight: 700
+    lineHeight: 1.2
+  headline:
+    fontFamily: 'Inter, Noto Sans TC, system-ui, -apple-system, sans-serif'
+    fontSize: '1.5rem'
+    fontWeight: 700
+    lineHeight: 1.333
+  title:
+    fontFamily: 'Inter, Noto Sans TC, system-ui, -apple-system, sans-serif'
+    fontSize: '1.25rem'
+    fontWeight: 600
+    lineHeight: 1.4
+  body:
+    fontFamily: 'Inter, Noto Sans TC, system-ui, -apple-system, sans-serif'
+    fontSize: '1rem'
+    fontWeight: 400
+    lineHeight: 1.6
+  label:
+    fontFamily: 'Inter, Noto Sans TC, system-ui, -apple-system, sans-serif'
+    fontSize: '0.75rem'
+    fontWeight: 600
+    lineHeight: 1.333
+    letterSpacing: '0.16em'
+rounded:
+  sm: '4px'
+  md: '6px'
+  lg: '8px'
+  card: '24px'
+  panel: '16px'
+  control: '16px'
+  icon: '12px'
+  compact: '8px'
+  pill: '999px'
+spacing:
+  xs: '8px'
+  sm: '12px'
+  md: '16px'
+  lg: '24px'
+  xl: '32px'
+components:
+  button-primary:
+    backgroundColor: '{colors.primary}'
+    textColor: '{colors.surface}'
+    rounded: '{rounded.lg}'
+    padding: '0 16px'
+    height: '44px'
+  button-secondary:
+    backgroundColor: '{colors.surface-elevated}'
+    textColor: '{colors.text}'
+    rounded: '{rounded.lg}'
+    padding: '0 16px'
+    height: '44px'
+  card-panel:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.text}'
+    rounded: '{rounded.card}'
+    padding: '20px'
+  notification-surface:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.text}'
+    rounded: '{rounded.lg}'
+    padding: '14px 24px'
+  list-row:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.text}'
+    rounded: '{rounded.lg}'
+    padding: '12px 16px'
+---
+
+## Overview
+
+**Creative North Star: "The Quiet Exchange Desk"**
+
+RateWise 的預設視覺系統是一套安靜、克制、資訊優先的產品介面。它應該像使用者在付款前最後確認匯率的工作台，不像行情盤，也不像裝飾型 SaaS 首頁。畫面首先服務判讀速度，其次才是品牌辨識。
+
+預設產品語法以 `zen` 風格為基準，其他 `nitro`、`kawaii`、`classic`、`ocean`、`forest` 僅作使用者可切換的外觀變體。所有變體都必須保留相同的資訊層級、相同的元件節奏與相同的互動語意，不能用造型改寫產品心智模型。
+
+這套系統明確排斥加密交易平台式的霓虹高飽和、AI 樣板 SaaS 式的 glow 與漸層文字，以及生活風格工具式的過度情緒化語氣。它的辨識度來自安靜表面、清楚數字、穩定留白與一致詞彙，不來自特效。
+
+Key Characteristics:
+
+- 冷靜、精準、可靠。
+- 預設使用 restrained color strategy，不做大面積裝飾性漸層。
+- 同一概念在首頁、收藏、多幣別、設定、SEO 內容頁使用同一種權重與元件語法。
+- 觸控優先，但桌面版要有足夠寬度與資訊節奏，不能像手機稿被放大。
+
+## Colors
+
+整體色彩以 violet / indigo 品牌色搭配冷靜中性色為主，將主色集中在主要操作、狀態與導引，而不是大片情緒背景。
+
+### Primary
+
+- **Exchange Violet** (`#7C3AED`): 主要 CTA、焦點與需要立即判讀的互動元素。預設不拿來鋪滿大面積背景。
+
+### Secondary
+
+- **Indigo Signal** (`#6366F1`): 支援型資訊、次要狀態與品牌層次，用於輔助，不與 Primary 爭主導權。
+
+### Tertiary
+
+- **Soft Violet Accent** (`#8B5CF6`): 僅用於小範圍高亮，例如通知裝飾、局部導引與互動後的柔性回饋。
+
+### Neutral
+
+- **Ledger Mist** (`#F8FAFC`): 頁面背景，維持乾淨但不刺眼的工作台底色。
+- **Paper Surface** (`#FFFFFF`): 主卡片與主要容器背景。
+- **Raised Surface** (`#F8FAFC`): 次層容器、segmented controls、次要按鈕背景。
+- **Sunken Surface** (`#F1F5F9`): 按壓後或低階容器的收斂層次。
+- **Ink 900** (`#0F172A`): 主要文字、標題與高重要度數字。
+- **Slate Note** (`#64748B`): 次要說明、輔助文與低權重標籤。
+- **Rule Line** (`#E2E8F0`): 邊框、分隔與可讀但不搶戲的結構線。
+
+### Named Rules
+
+**The Quiet Surface Rule.** 背景與容器先用中性層次解決階層，再考慮色彩。若同一畫面已經靠邊框、留白與標題完成分層，就不要再加漸層或 glow。
+
+## Typography
+
+**Display Font:** Inter, Noto Sans TC, system-ui, -apple-system, sans-serif
+**Body Font:** Inter, Noto Sans TC, system-ui, -apple-system, sans-serif
+**Label/Mono Font:** ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
+
+字體策略以高可讀性的無襯線系統為主，讓中英文與數字混排時仍保持穩定節奏。數值顯示、更新時間與版本等資料型內容，應優先使用 tabular numerals 或 monospace 輔助，而不是額外裝飾。
+
+### Hierarchy
+
+- **Display** (700, `clamp(1.875rem, 4vw, 2.25rem)`, 1.2): 頁面主標題與少數需要建立主場景的首屏標題。
+- **Headline** (700, `1.5rem`, 1.333): 核心模組標題，例如主要卡片或內容頁區塊標題。
+- **Title** (600, `1.25rem`, 1.4): 次級區塊、卡片標題與清單模組標題。
+- **Body** (400, `1rem`, 1.6): 正文與說明文。內容型頁面的段落寬度維持在約 65 至 72 字元。
+- **Label** (600, `0.75rem`, 1.333, `0.16em`): eyebrow、區塊導引與輕量 metadata。只在需要建立節奏時使用大寫標籤，不可濫用。
+
+### Named Rules
+
+**The Number First Rule.** 與匯率、金額、更新時間相關的資訊優先度高於裝飾型標題。若文字階層與數值判讀衝突，優先讓數值更清楚。
+
+## Elevation
+
+RateWise 的深度語法以 tonal layering 為主，陰影為輔。絕大多數層次差異先靠 `surface`、`surface-elevated`、`surface-sunken` 解決，陰影只用來表達浮起、hover 或暫時性提示，不作常態性戲劇效果。
+
+### Shadow Vocabulary
+
+- **Resting Card** (`shadow-card`): 預設卡片與主要內容面板，值由 `shadowTokens.values.card` 統一維護。
+- **Hover Lift** (`shadow-card-hover`): hover 後的輕微浮起，只作互動回饋。
+- **Transient Surface** (`shadow-floating`): 通知、tooltip、底部工作表與臨時浮層。
+
+### Named Rules
+
+**The Lift Must Mean State Rule.** 若一個陰影不代表 hover、焦點、暫時提示或浮層，就不應存在。不要用大陰影補救階層不清的版面。
+
+## Components
+
+### Buttons
+
+- **Shape:** 互動控制預設 `rounded-control`（16px），主要尺寸高度至少 `44px`，少數輕量操作可用膠囊型圓角。
+- **Primary:** `primary` 實底配 `surface` 文字，只用於明確主動作，例如更新、確認、開始轉換。
+- **Hover / Focus:** hover 允許極輕微上浮與陰影加深；focus 使用清楚的 `ring-primary`，不得用模糊光暈取代焦點樣式。
+- **Secondary / Ghost / Danger:** 次要按鈕用 `surface-elevated` 加邊框；ghost 只在低視覺權重工具列使用；danger 維持明確語義，但版面仍要克制。
+
+### Chips
+
+- **Style:** 小尺寸、圓角、邊框明確，優先作為 eyebrow、狀態或輕量切換標籤，而不是厚重 badge。
+- **State:** 選中狀態主要依靠邊框、底色與文字色改變，不使用高飽和螢光效果。
+
+### Cards / Containers
+
+- **Corner Style:** 主內容面板使用 `rounded-card`（24px），次層容器與互動列使用 `rounded-panel` / `rounded-control`（16px）；只允許 pill 用於 chip、badge 或膠囊型控制。
+- **Background:** 主卡片用 `surface`，次層與安靜模組用 `surface-elevated`，不要在正式產品頁中使用玻璃卡。
+- **Shadow Strategy:** 預設使用 resting card 陰影；hover 或可拖曳狀態才升到更高層級。
+- **Border:** 絕大多數卡片都有 `border-border/70` 左右的結構線，取代彩色 accent stripe。
+- **Internal Padding:** 主要面板 `20px` 至 `24px`，輕量列項 `12px` 至 `16px`。
+
+### Inputs / Fields
+
+- **Style:** 以乾淨背景、清楚邊界與穩定留白為主，不用擬物或發光效果。
+- **Focus:** focus 由 ring 與邊框色帶出，不改變版面尺寸。
+- **Error / Disabled:** 直接用語義色與可讀文字說明，不靠震動或炫目動畫表達。
+
+### Navigation
+
+- **Top / Bottom Navigation:** 使用半透明背景與輕微 blur 只作可讀性補強，不是視覺主角。導覽本體要融入產品殼層。
+- **Segmented / Tabs:** 活動狀態使用 `surface-elevated`、文字加重與輕陰影，不用大片主色底。
+
+### Notifications
+
+- **Style:** 更新通知、離線提示與評分提示統一使用安靜的 `surface` 浮層，不再使用品牌漸層底。
+- **Icon Treatment:** 狀態圖標放在小型 elevated 容器中，用 `primary` 或 `warning` 文字色表達狀態。
+- **Action Pattern:** 通知內的主要與關閉操作共用同一套 action token，避免各通知自成一格。
+
+## Do's and Don'ts
+
+- **Do:** 先用字級、留白、邊框與表面層次建立階層，再決定是否需要色彩。
+- **Do:** 讓首頁、收藏、多幣別、設定與 SEO 內容頁共用同一套 panel、row、eyebrow 與 secondary CTA 語法。
+- **Do:** 保留 `prefers-reduced-motion`、清楚 focus ring、足夠對比與至少 44px 的觸控目標。
+- **Do:** 將 theme styles 視為外觀皮膚，不得改變資訊密度、元件語意或互動模型。
+- **Don't:** 不要使用漸層文字、彩色側邊條、裝飾性 glass、過量 glow、或沒有語義的大面積品牌漸層。
+- **Don't:** 不要把金融工具做成加密交易平台、AI 樣板 SaaS，或可愛生活風首頁。
+- **Don't:** 不要靠巢狀卡片與大陰影堆層級，也不要用 8 至 10px 當作常態正文。
+- **Don't:** 不要在不同頁面為相同概念發明第二套顏色、第二套間距或第二套按鈕語法。
+
+## Engineering Decisions
+
+### Tailwind borderRadius Alias Override
+
+本專案刻意將 Tailwind 標準 `rounded-sm`/`md`/`lg`/`xl` 值上調至語義 token 對齊值（如 `lg` = 1rem 而非 Tailwind 預設 0.5rem），以確保遺漏遷移的 `rounded-lg` 不會產生舊值視覺殘留。此決策的前提是 RateWise 不引入依賴 Tailwind 預設 radius 值的第三方 UI 元件。若未來整合外部元件庫，需重新評估此 override 策略。
+
+### Shadow Token 淺色模式限定
+
+`shadowTokens` 的陰影基底色使用硬編碼 `rgb(15 23 42 / ...)` (slate-900)，僅適用淺色模式。若未來支援深色模式，陰影值需改為 CSS variable 或主題條件值。
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 000000000..37a820fd1
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,40 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+以台灣為主要使用情境的旅客、跨境消費者、自由工作者與小型商務使用者。
+他們通常在出國前、付款前或比價當下開啟 RateWise，希望用最短時間看懂真實換匯成本，而不是市場中間價。
+
+## Product Purpose
+
+RateWise 提供以臺灣銀行牌告為核心的匯率換算體驗，重點是快速、可信、可重複使用。
+產品應在首頁、收藏、多幣別、歷史與 SEO 幣別頁之間維持一致心智模型，讓使用者能在手機與桌面上用最少操作完成換算、比較與回查。
+
+## Brand Personality
+
+冷靜、精準、可靠。
+語氣應直接、節制、資訊優先，像成熟的金融工具，而不是行銷頁或加密貨幣儀表板。
+
+## Anti-references
+
+- 不要像加密交易平台，避免霓虹、黑底高飽和、過度行情感。
+- 不要像 AI 樣板 SaaS，避免大量 glow、漸層文字、裝飾性 glass。
+- 不要像生活風格或可愛工具，避免預設介面過度玩味與情緒化。
+- 不要為了視覺新奇重做既有操作模型，標準工具行為優先。
+
+## Design Principles
+
+- 實際換匯成本優先，任何視覺表現都不能壓過核心數字與方向。
+- 熟悉的工具型介面優先於新奇，使用者不應學習新的操作語法。
+- 資訊可密集，但層級必須清楚，次要訊息只能輔助，不能搶焦點。
+- 色彩與動效保持克制，只用於狀態、主動作與導引，不做裝飾。
+- 同一概念在所有頁面使用相同詞彙、相同權重與相同元件語言。
+
+## Accessibility & Inclusion
+
+以 WCAG 2.2 AA 為基準，保留清楚焦點樣式、足夠對比、合理觸控尺寸與 `prefers-reduced-motion` 支援。
+繁體中文是預設語境，其他語言介面也必須維持相同資訊層級與可讀性。
diff --git a/README.md b/README.md
index b9210c958..8777fc8ed 100644
--- a/README.md
+++ b/README.md
@@ -207,6 +207,7 @@ haotool-app/
 │       ├── release.yml                 # 版本發布
 │       ├── seo-audit.yml               # SEO 審查
 │       ├── seo-production.yml          # 生產環境 SEO
+│       ├── ratewise-production-governance.yml # RateWise 生產治理檢查
 │       ├── update-committed-seo-files.yml # SEO 產出物同步
 │       ├── update-historical-rates.yml # 歷史匯率更新
 │       ├── update-latest-rates.yml     # 最新匯率更新
@@ -270,7 +271,7 @@ haotool Apps is a professional pnpm Monorepo containing multiple high-quality Re
 - **Styling**: Tailwind CSS 3.4
 - **Testing**: Vitest 4.1 + Playwright 1.57
 - **Package Manager**: pnpm 9.10.0 (Monorepo)
-- **CI/CD**: GitHub Actions (9 workflows)
+- **CI/CD**: GitHub Actions (10 workflows)
 - **Deployment**: Docker + Zeabur / Vercel
 - **Security**: Gitleaks CLI + Trivy + SARIF
 
@@ -298,6 +299,15 @@ Production is deployed by Zeabur from GitHub main. Before merging a release PR
 right after another main PR, confirm the earlier production deployment has
 finished so an older SHA cannot become active after the release SHA.
 
+### Generated Artifacts
+
+RateWise generated files are bucketed by package scripts:
+`prebuild` runs deterministic generation and verification only,
+`refresh:data` explicitly updates live snapshots, and
+`refresh:fallback-rates` is the only script that writes the committed fallback
+rate snapshot. Local tool output such as `lighthouse-report.json` and
+`*.tsbuildinfo` must remain untracked.
+
 ### License
 
 This project is licensed under [GPL-3.0](./LICENSE).
diff --git a/apps/ratewise/README.md b/apps/ratewise/README.md
index 01a5d23c9..6354c4ff7 100644
--- a/apps/ratewise/README.md
+++ b/apps/ratewise/README.md
@@ -75,10 +75,28 @@ RateWise 正式站由 Zeabur production deployment 發布，Release 完成後需
 precache 驗證。若 GitHub Release 已建立但正式站仍回舊版，先查 GitHub deployments
 的 active SHA，再以 app 範圍 PR 重新觸發最新 main 部署。
 
+## 🧱 Generated Artifact SSOT
+
+RateWise 將 build 產物分成三類，避免 live data、deterministic artifacts 與本機 QA
+報告混在同一個 commit：
+
+- `pnpm --filter @app/ratewise refresh:data`：更新 live data snapshot
+  （`build-time-rates.json`、`seo-rate-examples.ts`、`rating-snapshot.ts`）。
+- `pnpm --filter @app/ratewise refresh:fallback-rates`：只更新已提交的 runtime
+  fallback 匯率 snapshot，供首次離線或 LHCI fallback 使用。
+- `pnpm --filter @app/ratewise generate:deterministic`：由 repo SSOT 重建 sitemap、
+  manifest、offline shell、LLMs text、Markdown mirrors、API JSON 與 OpenAPI。
+- `pnpm --filter @app/ratewise verify:artifacts`：驗證 SSOT sync 與圖片資源。
+
+`prebuild` 只執行 deterministic generation、artifact verification 與 rating placeholder
+refresh，不會刷新 tracked live rate data。`lighthouse-report.json` 與 `*.tsbuildinfo` 屬本機工具輸出，
+必須保持 untracked。QA 截圖集中放 `screenshots/`，正式 SEO/manifest 圖片則保留在
+`public/screenshots/`。
+
 ## 📄 授權
 
 GPL-3.0 © [haotool](https://app.haotool.org/)
 
 ---
 
-**最後更新**: 2026-04-28
+**最後更新**: 2026-05-12
diff --git a/apps/ratewise/docs/dev/002_development_reward_penalty_log.md b/apps/ratewise/docs/dev/002_development_reward_penalty_log.md
index 8b7c22eb8..1ae80ba3c 100644
--- a/apps/ratewise/docs/dev/002_development_reward_penalty_log.md
+++ b/apps/ratewise/docs/dev/002_development_reward_penalty_log.md
@@ -2,83 +2,91 @@
 
 **版本**: 2.1.0
 **建立時間**: 2025-12-02T03:29:33+08:00
-**更新時間**: 2026-01-21T01:20:03+08:00
+**更新時間**: 2026-05-15T09:40:00+08:00
 **狀態**: ✅ 完成
-**當前總分**: +137
+**當前總分**: +145
 
-| 類型    | 摘要                                             | 採取行動                                                                                                                                                                                                | 依據                                                                                                     | 分數 |
-| ------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ---- |
-| ✅ 成功 | SEO 修正：同步 sitemap 與 llms.txt 實作          | 1) 移除 sitemap.xml 生成腳本中已棄用的 image:caption 標籤 2) 移除 llms.txt 中的虛假評價數據，替換為真實用戶場景 3) 確保程式碼與開發日誌一致                                                             | [Internal Audit][Google SEO Guidelines]                                                                  | +3   |
-| ✅ 成功 | 建立圖片管理最佳實踐系統                         | 1) 新增 PR 模板檢查清單（生產環境驗證+Linus 三問） 2) CI/CD 自動檢查圖片路徑正確性 3) 建立完整圖片管理文檔 [032] 4) 檢查所有 apps 路徑統一                                                              | [docs/dev/032_image_management_best_practices.md][LINUS_GUIDE.md]                                        | +8   |
-| ❌ 失敗 | SEO 分支合併導致級聯錯誤（20h 修復）             | 1) 未驗證生產環境路徑 2) 引用不存在檔案 3) 過度優化導致複雜化 4) 6 次 commits 才修復（7b9e5c3→98d3350）                                                                                                 | [002:2025-12-24][LINUS_GUIDE.md:Linus 三問]                                                              | -8   |
-| ⚠️ 教訓 | 圖片路徑問題演進分析                             | 絕對路徑→動態 BASE_URL→複雜 picture→最終簡化為相對路徑，學習 KISS 原則和消除特殊情況                                                                                                                    | [LINUS_GUIDE.md:Good Taste][Vite Asset Handling]                                                         | 0    |
-| ✅ 成功 | 修復下拉刷新功能 (PWA 快取更新)                  | 改用 window.location.reload() 強制重新載入頁面，確保用戶獲得最新版本 JS/CSS/HTML，移除未使用的 refresh 依賴項，版本更新 1.2.0→1.2.1                                                                     | [PWA更新最佳實踐][Linus 三問驗證]                                                                        | +1   |
-| ✅ 成功 | CSP inline style 違規排除                        | style-src/style-src-elem 移除 hash 讓 'unsafe-inline' 生效，重跑 typecheck/test/build，確認 postbuild CSP 覆蓋 dist 與鏡像                                                                              | [context7:tsotimus/vite-plugin-csp-guard:2025-12-11T17:14Z]                                              | +2   |
-| ✅ 成功 | 重建 AI 搜尋規格並校對權威來源                   | 以 curl 取樣 20 個 SEO/AI 權威來源，重置 013 規格與行動清單                                                                                                                                             | [curl:seo-authorities:2025-12-02]                                                                        | +1   |
-| ✅ 成功 | 首頁 FAQ 可視化並對齊 JSON-LD                    | 新增 4 條 FAQ 卡片（首頁可見）並同步更新 index.html FAQPage schema                                                                                                                                      | [curl:seo-authorities:2025-12-02]                                                                        | +1   |
-| ✅ 成功 | 首個長尾落地頁 `/usd-twd` + sitemap              | 新增 USD/TWD 落地頁（FAQ+HowTo+SEOHelmet）、更新路由/SSG/sitemap                                                                                                                                        | [curl:seo-authorities:2025-12-02]                                                                        | +1   |
-| ✅ 成功 | 全面測試驗證：810 測試通過 + 瀏覽器實測          | 1) pnpm typecheck 通過 2) 810 tests 全綠 3) Preview Server 首頁/usd-twd 瀏覽器驗證 4) PWA manifest 驗證                                                                                                 | [context7:vite-react-ssg][context7:vite-plugin-pwa]                                                      | +2   |
-| ✅ 成功 | SEO 權威網站深度研究 (MCP fetch)                 | 查詢 Moz/Semrush/Backlinko/SearchEngineJournal/web.dev/Google Search Central/llmstxt.org 等 10+ 來源                                                                                                    | [mcp:fetch:2025-12-02T03:44]                                                                             | +1   |
-| ✅ 成功 | BDD 紅燈→綠燈：hreflang.test.ts 修正             | 識別 `/usd-twd` 新增後 xhtml:link 從 8→10，正確更新測試預期值                                                                                                                                           | [BDD.md:Red-Green-Refactor]                                                                              | +1   |
-| ✅ 成功 | Context7 官方文檔驗證                            | 使用 context7 取得 vite-react-ssg/vite-plugin-pwa 最新文檔，確認 SEO Head/Schema 最佳實踐                                                                                                               | [context7:daydreamer-riri/vite-react-ssg][context7:vite-pwa/vite-plugin-pwa]                             | +1   |
-| ✅ 成功 | 長尾頁 JPY/TWD + EUR/TWD 實作                    | 1) 新增 JPYToTWD.tsx 日圓換台幣頁 2) 新增 EURToTWD.tsx 歐元換台幣頁 3) 更新 routes.tsx 4) 更新 sitemap.xml (7 URLs) 5) 更新 hreflang.test.ts (14 links)                                                 | [BDD.md:Red-Green-Refactor][context7:vite-react-ssg]                                                     | +3   |
-| ✅ 成功 | 全面測試驗證：810 tests 全通過                   | npx vitest run 完成，0 failures，測試覆蓋率 92.99%                                                                                                                                                      | [Vitest:4.0.14][AGENTS.md:品質門檻]                                                                      | +1   |
-| ✅ 成功 | 長尾頁批量實作第一階段 (7 頁)                    | 新增 GBP/CNY/KRW/HKD/AUD/CAD/SGD 共 7 個幣別落地頁，每頁含 FAQ+HowTo+SEOHelmet                                                                                                                          | [context7:vite-react-ssg][LINUS_GUIDE.md]                                                                | +4   |
-| ✅ 成功 | sitemap.xml 更新 (14 URLs)                       | 更新 sitemap 含 14 條 URL × 2 hreflang = 28 links                                                                                                                                                       | [Google Search Central:sitemap-best-practices]                                                           | +1   |
-| ✅ 成功 | hreflang.test.ts BDD 測試更新                    | 紅燈→綠燈：xhtml:link 從 14→28，同步更新測試預期值                                                                                                                                                      | [BDD.md:Red-Green-Refactor]                                                                              | +1   |
-| ✅ 成功 | 長尾頁批量實作第二階段 (3 頁)                    | 新增 THB/NZD/CHF 共 3 個幣別落地頁，完成全部 13 個長尾頁                                                                                                                                                | [context7:vite-react-ssg][LINUS_GUIDE.md]                                                                | +2   |
-| ✅ 成功 | sitemap.xml 全面完成 (17 URLs)                   | 更新 sitemap 含 17 條 URL × 2 hreflang = 34 links                                                                                                                                                       | [Google Search Central:sitemap-best-practices]                                                           | +1   |
-| ✅ 成功 | 全面測試驗證：810 tests 全通過                   | npx vitest run 完成，0 failures，hreflang 測試同步更新                                                                                                                                                  | [Vitest:4.0.14][BDD.md:Green]                                                                            | +1   |
-| ✅ 成功 | 修復 vite.config.ts SSG 預渲染配置               | 同步 includedRoutes 至 17 條路徑，build 輸出 17 個 HTML                                                                                                                                                 | [BDD.md:Red-Green][context7:vite-react-ssg]                                                              | +2   |
-| ✅ 成功 | SEO 全面代碼審查通過                             | 1) TypeScript ✅ 2) ESLint ✅ 3) 897 tests ✅ 4) Build 17 HTML ✅ 5) 權威來源驗證 (Google/Schema.org/web.dev)                                                                                           | [context7:vitejs/vite][Google Search Central 2025]                                                       | +2   |
-| ✅ 成功 | llms.txt 虛假評價數據修正                        | 移除 4.8/5.0 虛假評分和 127 評價，改為真實用戶使用場景，避免違反 AI SEO Guidelines                                                                                                                      | [llmstxt.org][AI SEO Best Practices 2025]                                                                | +1   |
-| ✅ 成功 | sitemap.xml 符合 Google 2025 規範                | 1) 移除已棄用 image:caption 標籤 2) 為 13 個幣別頁添加 image sitemap 3) 更新 lastmod                                                                                                                    | [Google 2025 Image Sitemap Deprecation]                                                                  | +2   |
-| ✅ 成功 | Lighthouse 效能優化：移除 CSP meta tag           | 1) postbuild 腳本移除 CSP meta tag 2) 確保 charset 在 head 前 1024 bytes 3) CSP 改由 Nginx HTTP header 提供                                                                                             | [web.dev/csp][Lighthouse Best Practices 2025]                                                            | +2   |
-| ✅ 成功 | 重型組件 Lazy Loading 優化                       | 1) MiniTrendChart lazy load（減少 144KB lightweight-charts） 2) CalculatorKeyboard lazy load 3) Suspense fallback                                                                                       | [React Lazy Loading][Code Splitting Best Practices]                                                      | +2   |
-| ✅ 成功 | Lighthouse CI 配置更新至 95+ 門檻                | 1) 所有類別門檻提升至 95 分 2) 使用 lighthouse:recommended preset 3) CI/CD 全數通過                                                                                                                     | [context7:googlechrome/lighthouse-ci:2025-12-24]                                                         | +2   |
-| ✅ 成功 | 整合響應式 Footer 設計                           | 1) 行動版簡潔 footer 2) 電腦版完整 footer（17 個 SEO 連結） 3) 即時更新時間顯示                                                                                                                         | [WCAG 2.1][Google SEO 2025]                                                                              | +1   |
-| ✅ 成功 | Logo 圖片 SSG 路徑修正                           | 1) 簡化 `<picture>` 為 `<img src="logo.png">` 避免 SSG hydration 問題 2) 移除動態 BASE_URL 路徑                                                                                                         | [context7:vitejs/vite:2025-12-24][KISS 原則]                                                             | +2   |
-| ✅ 成功 | E2E 測試頁尾檢查修正                             | 1) `toBeVisible` → `toBeAttached` 2) 頁尾元素不需在初始 viewport 可見 3) CI 全數通過                                                                                                                    | [context7:microsoft/playwright:2025-12-24]                                                               | +1   |
-| ✅ 修復 | React Hydration #418 根本問題已修復              | 原因：`new Date().getFullYear()` 動態計算年份導致 SSG/hydration 不一致，解法：使用固定年份常數 + suppressHydrationWarning                                                                               | [context7:/reactjs/react.dev:suppressHydrationWarning:2025-12-25]                                        | +2   |
-| ✅ 成功 | Footer.tsx lint 警告修正                         | `\|\|` → `??` nullish coalescing 符合 @typescript-eslint 規則                                                                                                                                           | [@typescript-eslint/prefer-nullish-coalescing]                                                           | +1   |
-| ✅ 成功 | README.md 專業格式更新                           | 新增功能特色、技術棧、快速開始、專案結構、品質指標區段                                                                                                                                                  | [GitHub README Best Practices 2025]                                                                      | +1   |
-| ✅ 成功 | AGENTS.md 任務狀態更新                           | 更新 M0-M4 任務狀態至 2025-12-24，標記已完成項目，版本 v2.0 → v2.1                                                                                                                                      | [AGENTS.md:§8]                                                                                           | +1   |
-| ✅ 成功 | 修復 nihonname 缺少 logo.png                     | CI 失敗原因：apps/nihonname/public/logo.png 不存在，從 icon-192x192.png 複製修復                                                                                                                        | [CI:Quality Checks]                                                                                      | +1   |
-| ✅ 成功 | 修復 haotool 缺少 logo.png                       | CI 失敗原因：apps/haotool/public/logo.png 不存在，從 icon-192x192.png 複製修復                                                                                                                          | [CI:Quality Checks]                                                                                      | +1   |
-| ✅ 成功 | 更新 docs/README.md 文檔索引                     | 移除已不存在的文檔引用，新增 SEO 文檔索引，版本 1.0.0 → 1.1.0                                                                                                                                           | [AGENTS.md:§6]                                                                                           | +1   |
-| 🔍 發現 | Sentry 整合已實作於 logger.ts                    | 只需設定 VITE_SENTRY_DSN 環境變數即可啟用，代碼已於 Line 78 實作完畢                                                                                                                                    | [context7:getsentry/sentry-javascript:2025-12-24]                                                        | +1   |
-| ✅ 成功 | 新增 .env.example 環境變數範例                   | 文檔化 6 個環境變數（VITE_APP_VERSION、VITE_BUILD_TIME、VITE_SITE_URL、VITE_SENTRY_DSN、VITE_SENTRY_DEBUG、VITE_VITALS_ENDPOINT）                                                                       | [Vite Env Variables Best Practices]                                                                      | +1   |
-| ✅ 成功 | 移除 sitemap.xml 過時 SEO 標籤（CI 修復）        | 1) 移除 4 個 `<image:caption>` 標籤（Google 2022 年廢棄）2) 確認無 `<changefreq>` 和 `<priority>` 標籤 3) Context7 + WebSearch 驗證 2025 SEO 標準 4) 所有測試通過（963 tests）5) 修復 Prettier 格式問題 | [Google Search Central:Image Sitemap 2025][WebSearch:SEO Best Practices 2025][context7:sitemap-protocol] | +2   |
-| ✅ 成功 | 更新開發依賴至最新 patch 版本                    | eslint、vitest、commitlint、typescript-eslint 等 7 個依賴更新，895 測試通過，0 錯誤                                                                                                                     | [context7:vitejs/vite:2025-12-24]                                                                        | +1   |
-| 🔍 掃描 | Knip 代碼分析完成                                | 發現 18 個未使用檔案、6 個未使用依賴、121 個未使用導出，多為預留功能，暫不清理                                                                                                                          | [Knip Dead Code Analysis]                                                                                | +1   |
-| ✅ 成功 | 新增 Gitleaks 密鑰掃描工作流程                   | 1) .gitleaks.toml 配置 2) GitHub Actions 工作流程 3) 忽略測試/範例檔案 4) SARIF 報告上傳                                                                                                                | [context7:gitleaks/gitleaks:2025-12-24]                                                                  | +2   |
-| ✅ 成功 | 更新 AGENTS.md M1/M3 任務狀態                    | M1 觀測性（Sentry + gitleaks）標記完成，M3 測試強化標記完成，僅剩 useCurrencyConverter 重構為可選                                                                                                       | [AGENTS.md:§8]                                                                                           | +1   |
-| ✅ 成功 | 更新開發依賴（vite/jsdom）                       | vite: 7.2.6 → 7.3.0, jsdom: 27.2.0 → 27.3.0 (patch updates)                                                                                                                                             | [pnpm outdated]                                                                                          | +1   |
-| ✅ 成功 | 更新 Monorepo README 為專業開源專案              | 1) 根目錄 README 雙語支援 2) 完整介紹 3 個應用 3) 更新 HaoTool README 4) GitHub 描述和 9 個主題                                                                                                         | [LINUS_GUIDE.md:文檔清理原則]                                                                            | +2   |
-| ✅ 成功 | 優化 RateWise logo.png                           | 1.4MB → 25KB (-98%)，Lighthouse Performance 96-98%                                                                                                                                                      | [docs/dev/032_image_management_best_practices.md]                                                        | +2   |
-| ✅ 成功 | 關閉過時 PR #23                                  | 緊急修復 PR 已過時，問題已在 main 分支解決                                                                                                                                                              | [gh pr close]                                                                                            | +1   |
-| ✅ 成功 | 清理過時 Dependabot PR (10 個)                   | 關閉 #42-#60 過時 PR，Linus 三問評估 Major 版本暫不升級                                                                                                                                                 | [Linus 三問:會破壞什麼嗎？]                                                                              | +2   |
-| ✅ 成功 | 修復 React Hydration Error #418 根本問題         | 1) Footer.tsx 和 RateWise.tsx 使用 `new Date().getFullYear()` 動態計算年份 2) 改用固定年份常數 CURRENT_YEAR = 2025 3) 加入 suppressHydrationWarning 防護                                                | [context7:/reactjs/react.dev:suppressHydrationWarning:2025-12-25]                                        | +2   |
-| ✅ 成功 | 修復 RateWise.tsx localStorage hydration 問題    | 1) useState 初始化函數中使用 localStorage 導致 SSG/hydration 不一致 2) 改用固定初始值 'spot' + useEffect 恢復用戶偏好                                                                                   | [context7:/reactjs/react.dev:useState:2025-12-25]                                                        | +1   |
-| ✅ 成功 | 修復 useCurrencyConverter SSG/hydration 不一致   | 1) mode/fromCurrency/toCurrency/favorites 在 useState 使用 localStorage 2) 改用固定初始值 + useEffect 恢復用戶偏好                                                                                      | [context7:/reactjs/react.dev:useState:2025-12-25]                                                        | +1   |
-| ✅ 成功 | Footer.tsx 時間顯示添加 suppressHydrationWarning | lastUpdate/lastFetchedAt 在 SSG 時為 null（顯示 --/-- --:--），客戶端更新為實際時間                                                                                                                     | [context7:/reactjs/react.dev:suppressHydrationWarning:2025-12-25]                                        | +1   |
-| ✅ 成功 | 更新 RateWise 開發依賴 (patch)                   | motion, @testing-library/react, @vitest/coverage-v8, autoprefixer, jsdom, vitest 等 6 個依賴更新，895 測試全通過                                                                                        | [pnpm outdated:2025-12-25]                                                                               | +1   |
-| ✅ 成功 | 使用 ClientOnly 包裝動態時間組件                 | 1) routes.tsx 使用 ClientOnly 包裝 CurrencyConverter 2) Footer.tsx 使用 ClientOnly 包裝 UpdateTimeDisplay 3) 確保 SSG fallback 與客戶端渲染一致                                                         | [context7:/daydreamer-riri/vite-react-ssg:ClientOnly:2025-12-25]                                         | +2   |
-| ✅ 成功 | 抑制 React Hydration #418 預期錯誤               | main.tsx 添加 console.error 攔截器，過濾 SSG 環境下的預期錯誤，不影響功能，只是開發者警告                                                                                                               | [context7:/reactjs/react.dev:onRecoverableError:2025-12-25]                                              | +2   |
-| ✅ 成功 | 生產環境 Console 無錯誤驗證                      | 本地 preview 服務器測試，Console 只顯示 INFO/WARN 日誌，無 Error，Web Vitals 全部 good                                                                                                                  | [AGENTS.md:品質門檻]                                                                                     | +2   |
-| ✅ 成功 | CI jest-dom matchers 載入問題修復                | 1) setupTests.ts 添加 expect.extend(matchers) 2) 19 個測試文件顯式 import 3) eslint.config.js 禁用 unsafe 規則 4) tsconfig 添加 @testing-library/jest-dom 類型                                          | [context7:/@testing-library/jest-dom:vitest:2025-12-25]                                                  | +3   |
-| ✅ 成功 | 新增 Cloudflare CDN 快取自動清除工作流程         | 1) Release workflow 新增 Purge Cloudflare Cache 步驟 2) 使用 CLOUDFLARE_ZONE_ID/API_TOKEN secrets 3) 優雅降級：secrets 未配置時跳過 4) CI 8/8 全綠                                                      | [context7:/websites/developers_cloudflare:Cache-Purge-API:2025-12-25]                                    | +2   |
-| ✅ 成功 | 聖誕樹拖動功能 (v1.4.0)                          | 1) Motion drag API 實現平滑拖動 2) localStorage 記憶位置 3) 新增「↕ 可拖動」提示 4) 更新 aria-label 含拖動說明                                                                                          | [context7:/websites/motion-dev-docs:drag:2025-12-27]                                                     | +1   |
-| ✅ 成功 | 精緻雪花效果升級 (8 種 SVG 變體)                 | 1) 4→8 種雪花變體（新增：花瓣/樹枝/菱形/結晶） 2) 響應式數量：桌面 55/平板 35/手機 20 3) 純白色無藍色 4) GPU 加速動畫                                                                                   | [LINUS_GUIDE.md:Good Taste]                                                                              | +2   |
-| ✅ 成功 | UpdatePrompt 響應式尺寸優化                      | 1) 手機 280px/平板 300px/桌面 320px 寬度 2) 響應式 padding/圖標/字體 3) 符合 Windows UX Guidelines 最低有效分辨率                                                                                       | [WebSearch:modal responsive best practices 2025]                                                         | +1   |
-| ✅ 成功 | 版本號更新 1.3.0→1.4.0 + CI/CD 全數通過          | 1) TypeScript 通過 2) ESLint 0 錯誤 0 警告 3) 962 測試全通過 4) Build 成功 5) 瀏覽器驗證正常                                                                                                            | [AGENTS.md:品質門檻]                                                                                     | +1   |
-| ✅ 成功 | 趨勢圖背景 SSOT 修復 (v1.5.0)                    | SingleConverter.tsx Line 400 添加 bg-surface，確保趨勢圖背景為純色（Zen:白色/Nitro:深灰），避免繼承父元素漸層                                                                                           | [context7:/tailwindlabs/tailwindcss:bg-color:2026-01-20]                                                 | +1   |
-| ✅ 成功 | quake-school ESLint 警告修復                     | 1) RouterWrapper.tsx 分離 renderWithRouter 至獨立檔案 2) 修復 react-refresh/only-export-components 警告 3) Monorepo 全應用 lint 通過                                                                    | [react-refresh/only-export-components][LINUS_GUIDE.md]                                                   | +1   |
-| ✅ 成功 | SingleConverter 測試同步更新                     | 1) 更新 CSS class 測試預期值 (bg-brand-button-to → bg-primary) 2) 符合新 UI 設計 3) 1038 測試全通過                                                                                                     | [BDD.md:Red-Green-Refactor]                                                                              | +1   |
-| ✅ 成功 | AGENTS.md 文檔更新                               | 1) 任務狀態日期更新 (2025-12-25 → 2026-01-20) 2) 測試數量更新 (895 → 1038) 3) 版本更新 v2.1 → v2.2                                                                                                      | [AGENTS.md:§6]                                                                                           | +1   |
-| ✅ 成功 | SSOT UI/UX 全面重構（8 項完成）                  | 1) 移除卡片中間分隔線 2) 迷你趨勢圖背景透明 3) 現金按鈕高亮修正 4) 紫色為主色 5) 輸入框設計一致 6) 下拉模組 SSOT 7) 頁面可滾動 8) 硬編碼組件重構                                                        | [WebSearch:fintech UI 2026][context7:tailwindcss]                                                        | +8   |
-| ✅ 成功 | CurrencyList 測試 SSOT 更新                      | 1) text-yellow-500 → text-favorite 2) text-gray-300 → text-text-muted 3) text-green-500 → text-success 4) text-red-500 → text-destructive                                                               | [BDD.md:Red-Green-Refactor]                                                                              | +1   |
-| ✅ 成功 | 移除未使用依賴 framer-motion                     | 1) depcheck 發現 framer-motion 未使用（已被 motion 取代） 2) pnpm remove framer-motion 3) 1038 測試全通過 4) 減少 bundle 冗餘                                                                           | [context7:/websites/motion_dev:motion-vs-framer-motion:2026-01-20]                                       | +1   |
+| 類型    | 摘要                                             | 採取行動                                                                                                                                                                                                                                    | 依據                                                                                                     | 分數 |
+| ------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ---- |
+| ✅ 成功 | 換錢所趨勢線 aggregate SSOT 收斂                 | 1) client 加 aggregate-first（PROVIDER_RATES_PATH.aggregate）+ 5 分鐘 memory cache + fallback 保留逐日 2) Playwright runtime AB 量到 50→1 requests、~5049ms→~2ms 3) 4 個單測覆蓋命中/404/shape 不合法/cache TTL                             | [Playwright runtime AB:2026-05-15][PROVIDER_RATES_PATH.aggregate:SSOT]                                   | +1   |
+| ✅ 成功 | Sentry beforeSend fetch 過濾 SSOT 收斂           | 1) Sentry `beforeSend` 改用 `classifyUnhandledRejection` 判斷 `generic-fetch-failure` 2) Firefox / Safari 網路失敗不再繞過過濾送 Sentry 3) Playwright AB test 在 dev runtime 驗證 6 變體 + 1 control 路由                                   | [Playwright AB test:2026-05-14][AGENTS.md:SSOT]                                                          | +1   |
+| ✅ 成功 | errorClassification 跨瀏覽器 fetch 覆蓋          | 1) 補上 Firefox NetworkError 與 Safari NSURLError 系列（offline / network lost / hostname not found / cannot connect）訊息匹配 2) 補 Safari TypeError("Load failed") 仍走 chunk-load 的迴歸測試 3) 修正 prebuild cache 分支幣別數量輸出單位 | [errorClassification cross-browser audit:2026-05-13][AGENTS.md:observability]                            | +1   |
+| ✅ 成功 | 每日資料 PR 合併治理收斂                         | 1) 移除 update-seo-rate-examples workflow 直接 gh pr merge 2) 改由 branch protection、required checks、review 或 GitHub auto-merge / merge queue 控制合併 3) 補測試避免回退                                                                 | [GitHub branch protection docs:2026-05-13][AGENTS.md:AGT-MRG-01]                                         | +1   |
+| ✅ 成功 | fallback snapshot 最新快照與刷新輸出修正         | 1) 合併最新 main 的每日 SEO 資料 2) 更新 build-time fallback snapshot 至 2026-05-13 台銀快照 3) 修正刷新腳本說明與幣別數量輸出                                                                                                              | [fallback snapshot freshness audit:2026-05-13][AGENTS.md:SSOT]                                           | +1   |
+| ✅ 成功 | SSG 金額頁 fallback snapshot SSOT 修正           | 1) SSG 金額頁注入改讀 build-time-rates.json 2) 移除 clean checkout 對 ignored public/rates.json 的依賴 3) 增加靜態與 prerender 回歸測試保護                                                                                                 | [Codex Review PR #393:2026-05-13][AGENTS.md:SSOT]                                                        | +1   |
+| ✅ 成功 | RateWise online 遠端全失敗 fallback 補強         | 1) build-time snapshot fallback 收斂成單一 helper 2) online 首啟 CDN/Raw/IDB 全失敗時回退 build-time snapshot 3) 補上 service 回歸測試，避免換算器因遠端全失敗不可用                                                                        | [exchangeRateService fallback audit:2026-05-13][AGENTS.md:production resilience]                         | +1   |
+| ✅ 成功 | RateWise E2E 測試矩陣漂移修復                    | 1) GA4 E2E 改以建置後 VITE_GA_ID 是否非空判斷 runtime 2) 等待延後初始化後再斷言 config 次數 3) Firefox offline 測試對 CDP 不支援時降級為 context.setOffline + event                                                                         | [Playwright E2E:2026-05-13][AGENTS.md:QA gates]                                                          | +1   |
+| ✅ 成功 | SEO 修正：同步 sitemap 與 llms.txt 實作          | 1) 移除 sitemap.xml 生成腳本中已棄用的 image:caption 標籤 2) 移除 llms.txt 中的虛假評價數據，替換為真實用戶場景 3) 確保程式碼與開發日誌一致                                                                                                 | [Internal Audit][Google SEO Guidelines]                                                                  | +3   |
+| ✅ 成功 | 建立圖片管理最佳實踐系統                         | 1) 新增 PR 模板檢查清單（生產環境驗證+Linus 三問） 2) CI/CD 自動檢查圖片路徑正確性 3) 建立完整圖片管理文檔 [032] 4) 檢查所有 apps 路徑統一                                                                                                  | [docs/dev/032_image_management_best_practices.md][LINUS_GUIDE.md]                                        | +8   |
+| ❌ 失敗 | SEO 分支合併導致級聯錯誤（20h 修復）             | 1) 未驗證生產環境路徑 2) 引用不存在檔案 3) 過度優化導致複雜化 4) 6 次 commits 才修復（7b9e5c3→98d3350）                                                                                                                                     | [002:2025-12-24][LINUS_GUIDE.md:Linus 三問]                                                              | -8   |
+| ⚠️ 教訓 | 圖片路徑問題演進分析                             | 絕對路徑→動態 BASE_URL→複雜 picture→最終簡化為相對路徑，學習 KISS 原則和消除特殊情況                                                                                                                                                        | [LINUS_GUIDE.md:Good Taste][Vite Asset Handling]                                                         | 0    |
+| ✅ 成功 | 修復下拉刷新功能 (PWA 快取更新)                  | 改用 window.location.reload() 強制重新載入頁面，確保用戶獲得最新版本 JS/CSS/HTML，移除未使用的 refresh 依賴項，版本更新 1.2.0→1.2.1                                                                                                         | [PWA更新最佳實踐][Linus 三問驗證]                                                                        | +1   |
+| ✅ 成功 | CSP inline style 違規排除                        | style-src/style-src-elem 移除 hash 讓 'unsafe-inline' 生效，重跑 typecheck/test/build，確認 postbuild CSP 覆蓋 dist 與鏡像                                                                                                                  | [context7:tsotimus/vite-plugin-csp-guard:2025-12-11T17:14Z]                                              | +2   |
+| ✅ 成功 | 重建 AI 搜尋規格並校對權威來源                   | 以 curl 取樣 20 個 SEO/AI 權威來源，重置 013 規格與行動清單                                                                                                                                                                                 | [curl:seo-authorities:2025-12-02]                                                                        | +1   |
+| ✅ 成功 | 首頁 FAQ 可視化並對齊 JSON-LD                    | 新增 4 條 FAQ 卡片（首頁可見）並同步更新 index.html FAQPage schema                                                                                                                                                                          | [curl:seo-authorities:2025-12-02]                                                                        | +1   |
+| ✅ 成功 | 首個長尾落地頁 `/usd-twd` + sitemap              | 新增 USD/TWD 落地頁（FAQ+HowTo+SEOHelmet）、更新路由/SSG/sitemap                                                                                                                                                                            | [curl:seo-authorities:2025-12-02]                                                                        | +1   |
+| ✅ 成功 | 全面測試驗證：810 測試通過 + 瀏覽器實測          | 1) pnpm typecheck 通過 2) 810 tests 全綠 3) Preview Server 首頁/usd-twd 瀏覽器驗證 4) PWA manifest 驗證                                                                                                                                     | [context7:vite-react-ssg][context7:vite-plugin-pwa]                                                      | +2   |
+| ✅ 成功 | SEO 權威網站深度研究 (MCP fetch)                 | 查詢 Moz/Semrush/Backlinko/SearchEngineJournal/web.dev/Google Search Central/llmstxt.org 等 10+ 來源                                                                                                                                        | [mcp:fetch:2025-12-02T03:44]                                                                             | +1   |
+| ✅ 成功 | BDD 紅燈→綠燈：hreflang.test.ts 修正             | 識別 `/usd-twd` 新增後 xhtml:link 從 8→10，正確更新測試預期值                                                                                                                                                                               | [BDD.md:Red-Green-Refactor]                                                                              | +1   |
+| ✅ 成功 | Context7 官方文檔驗證                            | 使用 context7 取得 vite-react-ssg/vite-plugin-pwa 最新文檔，確認 SEO Head/Schema 最佳實踐                                                                                                                                                   | [context7:daydreamer-riri/vite-react-ssg][context7:vite-pwa/vite-plugin-pwa]                             | +1   |
+| ✅ 成功 | 長尾頁 JPY/TWD + EUR/TWD 實作                    | 1) 新增 JPYToTWD.tsx 日圓換台幣頁 2) 新增 EURToTWD.tsx 歐元換台幣頁 3) 更新 routes.tsx 4) 更新 sitemap.xml (7 URLs) 5) 更新 hreflang.test.ts (14 links)                                                                                     | [BDD.md:Red-Green-Refactor][context7:vite-react-ssg]                                                     | +3   |
+| ✅ 成功 | 全面測試驗證：810 tests 全通過                   | npx vitest run 完成，0 failures，測試覆蓋率 92.99%                                                                                                                                                                                          | [Vitest:4.0.14][AGENTS.md:品質門檻]                                                                      | +1   |
+| ✅ 成功 | 長尾頁批量實作第一階段 (7 頁)                    | 新增 GBP/CNY/KRW/HKD/AUD/CAD/SGD 共 7 個幣別落地頁，每頁含 FAQ+HowTo+SEOHelmet                                                                                                                                                              | [context7:vite-react-ssg][LINUS_GUIDE.md]                                                                | +4   |
+| ✅ 成功 | sitemap.xml 更新 (14 URLs)                       | 更新 sitemap 含 14 條 URL × 2 hreflang = 28 links                                                                                                                                                                                           | [Google Search Central:sitemap-best-practices]                                                           | +1   |
+| ✅ 成功 | hreflang.test.ts BDD 測試更新                    | 紅燈→綠燈：xhtml:link 從 14→28，同步更新測試預期值                                                                                                                                                                                          | [BDD.md:Red-Green-Refactor]                                                                              | +1   |
+| ✅ 成功 | 長尾頁批量實作第二階段 (3 頁)                    | 新增 THB/NZD/CHF 共 3 個幣別落地頁，完成全部 13 個長尾頁                                                                                                                                                                                    | [context7:vite-react-ssg][LINUS_GUIDE.md]                                                                | +2   |
+| ✅ 成功 | sitemap.xml 全面完成 (17 URLs)                   | 更新 sitemap 含 17 條 URL × 2 hreflang = 34 links                                                                                                                                                                                           | [Google Search Central:sitemap-best-practices]                                                           | +1   |
+| ✅ 成功 | 全面測試驗證：810 tests 全通過                   | npx vitest run 完成，0 failures，hreflang 測試同步更新                                                                                                                                                                                      | [Vitest:4.0.14][BDD.md:Green]                                                                            | +1   |
+| ✅ 成功 | 修復 vite.config.ts SSG 預渲染配置               | 同步 includedRoutes 至 17 條路徑，build 輸出 17 個 HTML                                                                                                                                                                                     | [BDD.md:Red-Green][context7:vite-react-ssg]                                                              | +2   |
+| ✅ 成功 | SEO 全面代碼審查通過                             | 1) TypeScript ✅ 2) ESLint ✅ 3) 897 tests ✅ 4) Build 17 HTML ✅ 5) 權威來源驗證 (Google/Schema.org/web.dev)                                                                                                                               | [context7:vitejs/vite][Google Search Central 2025]                                                       | +2   |
+| ✅ 成功 | llms.txt 虛假評價數據修正                        | 移除 4.8/5.0 虛假評分和 127 評價，改為真實用戶使用場景，避免違反 AI SEO Guidelines                                                                                                                                                          | [llmstxt.org][AI SEO Best Practices 2025]                                                                | +1   |
+| ✅ 成功 | sitemap.xml 符合 Google 2025 規範                | 1) 移除已棄用 image:caption 標籤 2) 為 13 個幣別頁添加 image sitemap 3) 更新 lastmod                                                                                                                                                        | [Google 2025 Image Sitemap Deprecation]                                                                  | +2   |
+| ✅ 成功 | Lighthouse 效能優化：移除 CSP meta tag           | 1) postbuild 腳本移除 CSP meta tag 2) 確保 charset 在 head 前 1024 bytes 3) CSP 改由 Nginx HTTP header 提供                                                                                                                                 | [web.dev/csp][Lighthouse Best Practices 2025]                                                            | +2   |
+| ✅ 成功 | 重型組件 Lazy Loading 優化                       | 1) MiniTrendChart lazy load（減少 144KB lightweight-charts） 2) CalculatorKeyboard lazy load 3) Suspense fallback                                                                                                                           | [React Lazy Loading][Code Splitting Best Practices]                                                      | +2   |
+| ✅ 成功 | Lighthouse CI 配置更新至 95+ 門檻                | 1) 所有類別門檻提升至 95 分 2) 使用 lighthouse:recommended preset 3) CI/CD 全數通過                                                                                                                                                         | [context7:googlechrome/lighthouse-ci:2025-12-24]                                                         | +2   |
+| ✅ 成功 | 整合響應式 Footer 設計                           | 1) 行動版簡潔 footer 2) 電腦版完整 footer（17 個 SEO 連結） 3) 即時更新時間顯示                                                                                                                                                             | [WCAG 2.1][Google SEO 2025]                                                                              | +1   |
+| ✅ 成功 | Logo 圖片 SSG 路徑修正                           | 1) 簡化 `<picture>` 為 `<img src="logo.png">` 避免 SSG hydration 問題 2) 移除動態 BASE_URL 路徑                                                                                                                                             | [context7:vitejs/vite:2025-12-24][KISS 原則]                                                             | +2   |
+| ✅ 成功 | E2E 測試頁尾檢查修正                             | 1) `toBeVisible` → `toBeAttached` 2) 頁尾元素不需在初始 viewport 可見 3) CI 全數通過                                                                                                                                                        | [context7:microsoft/playwright:2025-12-24]                                                               | +1   |
+| ✅ 修復 | React Hydration #418 根本問題已修復              | 原因：`new Date().getFullYear()` 動態計算年份導致 SSG/hydration 不一致，解法：使用固定年份常數 + suppressHydrationWarning                                                                                                                   | [context7:/reactjs/react.dev:suppressHydrationWarning:2025-12-25]                                        | +2   |
+| ✅ 成功 | Footer.tsx lint 警告修正                         | `\|\|` → `??` nullish coalescing 符合 @typescript-eslint 規則                                                                                                                                                                               | [@typescript-eslint/prefer-nullish-coalescing]                                                           | +1   |
+| ✅ 成功 | README.md 專業格式更新                           | 新增功能特色、技術棧、快速開始、專案結構、品質指標區段                                                                                                                                                                                      | [GitHub README Best Practices 2025]                                                                      | +1   |
+| ✅ 成功 | AGENTS.md 任務狀態更新                           | 更新 M0-M4 任務狀態至 2025-12-24，標記已完成項目，版本 v2.0 → v2.1                                                                                                                                                                          | [AGENTS.md:§8]                                                                                           | +1   |
+| ✅ 成功 | 修復 nihonname 缺少 logo.png                     | CI 失敗原因：apps/nihonname/public/logo.png 不存在，從 icon-192x192.png 複製修復                                                                                                                                                            | [CI:Quality Checks]                                                                                      | +1   |
+| ✅ 成功 | 修復 haotool 缺少 logo.png                       | CI 失敗原因：apps/haotool/public/logo.png 不存在，從 icon-192x192.png 複製修復                                                                                                                                                              | [CI:Quality Checks]                                                                                      | +1   |
+| ✅ 成功 | 更新 docs/README.md 文檔索引                     | 移除已不存在的文檔引用，新增 SEO 文檔索引，版本 1.0.0 → 1.1.0                                                                                                                                                                               | [AGENTS.md:§6]                                                                                           | +1   |
+| 🔍 發現 | Sentry 整合已實作於 logger.ts                    | 只需設定 VITE_SENTRY_DSN 環境變數即可啟用，代碼已於 Line 78 實作完畢                                                                                                                                                                        | [context7:getsentry/sentry-javascript:2025-12-24]                                                        | +1   |
+| ✅ 成功 | 新增 .env.example 環境變數範例                   | 文檔化 6 個環境變數（VITE_APP_VERSION、VITE_BUILD_TIME、VITE_SITE_URL、VITE_SENTRY_DSN、VITE_SENTRY_DEBUG、VITE_VITALS_ENDPOINT）                                                                                                           | [Vite Env Variables Best Practices]                                                                      | +1   |
+| ✅ 成功 | 移除 sitemap.xml 過時 SEO 標籤（CI 修復）        | 1) 移除 4 個 `<image:caption>` 標籤（Google 2022 年廢棄）2) 確認無 `<changefreq>` 和 `<priority>` 標籤 3) Context7 + WebSearch 驗證 2025 SEO 標準 4) 所有測試通過（963 tests）5) 修復 Prettier 格式問題                                     | [Google Search Central:Image Sitemap 2025][WebSearch:SEO Best Practices 2025][context7:sitemap-protocol] | +2   |
+| ✅ 成功 | 更新開發依賴至最新 patch 版本                    | eslint、vitest、commitlint、typescript-eslint 等 7 個依賴更新，895 測試通過，0 錯誤                                                                                                                                                         | [context7:vitejs/vite:2025-12-24]                                                                        | +1   |
+| 🔍 掃描 | Knip 代碼分析完成                                | 發現 18 個未使用檔案、6 個未使用依賴、121 個未使用導出，多為預留功能，暫不清理                                                                                                                                                              | [Knip Dead Code Analysis]                                                                                | +1   |
+| ✅ 成功 | 新增 Gitleaks 密鑰掃描工作流程                   | 1) .gitleaks.toml 配置 2) GitHub Actions 工作流程 3) 忽略測試/範例檔案 4) SARIF 報告上傳                                                                                                                                                    | [context7:gitleaks/gitleaks:2025-12-24]                                                                  | +2   |
+| ✅ 成功 | 更新 AGENTS.md M1/M3 任務狀態                    | M1 觀測性（Sentry + gitleaks）標記完成，M3 測試強化標記完成，僅剩 useCurrencyConverter 重構為可選                                                                                                                                           | [AGENTS.md:§8]                                                                                           | +1   |
+| ✅ 成功 | 更新開發依賴（vite/jsdom）                       | vite: 7.2.6 → 7.3.0, jsdom: 27.2.0 → 27.3.0 (patch updates)                                                                                                                                                                                 | [pnpm outdated]                                                                                          | +1   |
+| ✅ 成功 | 更新 Monorepo README 為專業開源專案              | 1) 根目錄 README 雙語支援 2) 完整介紹 3 個應用 3) 更新 HaoTool README 4) GitHub 描述和 9 個主題                                                                                                                                             | [LINUS_GUIDE.md:文檔清理原則]                                                                            | +2   |
+| ✅ 成功 | 優化 RateWise logo.png                           | 1.4MB → 25KB (-98%)，Lighthouse Performance 96-98%                                                                                                                                                                                          | [docs/dev/032_image_management_best_practices.md]                                                        | +2   |
+| ✅ 成功 | 關閉過時 PR #23                                  | 緊急修復 PR 已過時，問題已在 main 分支解決                                                                                                                                                                                                  | [gh pr close]                                                                                            | +1   |
+| ✅ 成功 | 清理過時 Dependabot PR (10 個)                   | 關閉 #42-#60 過時 PR，Linus 三問評估 Major 版本暫不升級                                                                                                                                                                                     | [Linus 三問:會破壞什麼嗎？]                                                                              | +2   |
+| ✅ 成功 | 修復 React Hydration Error #418 根本問題         | 1) Footer.tsx 和 RateWise.tsx 使用 `new Date().getFullYear()` 動態計算年份 2) 改用固定年份常數 CURRENT_YEAR = 2025 3) 加入 suppressHydrationWarning 防護                                                                                    | [context7:/reactjs/react.dev:suppressHydrationWarning:2025-12-25]                                        | +2   |
+| ✅ 成功 | 修復 RateWise.tsx localStorage hydration 問題    | 1) useState 初始化函數中使用 localStorage 導致 SSG/hydration 不一致 2) 改用固定初始值 'spot' + useEffect 恢復用戶偏好                                                                                                                       | [context7:/reactjs/react.dev:useState:2025-12-25]                                                        | +1   |
+| ✅ 成功 | 修復 useCurrencyConverter SSG/hydration 不一致   | 1) mode/fromCurrency/toCurrency/favorites 在 useState 使用 localStorage 2) 改用固定初始值 + useEffect 恢復用戶偏好                                                                                                                          | [context7:/reactjs/react.dev:useState:2025-12-25]                                                        | +1   |
+| ✅ 成功 | Footer.tsx 時間顯示添加 suppressHydrationWarning | lastUpdate/lastFetchedAt 在 SSG 時為 null（顯示 --/-- --:--），客戶端更新為實際時間                                                                                                                                                         | [context7:/reactjs/react.dev:suppressHydrationWarning:2025-12-25]                                        | +1   |
+| ✅ 成功 | 更新 RateWise 開發依賴 (patch)                   | motion, @testing-library/react, @vitest/coverage-v8, autoprefixer, jsdom, vitest 等 6 個依賴更新，895 測試全通過                                                                                                                            | [pnpm outdated:2025-12-25]                                                                               | +1   |
+| ✅ 成功 | 使用 ClientOnly 包裝動態時間組件                 | 1) routes.tsx 使用 ClientOnly 包裝 CurrencyConverter 2) Footer.tsx 使用 ClientOnly 包裝 UpdateTimeDisplay 3) 確保 SSG fallback 與客戶端渲染一致                                                                                             | [context7:/daydreamer-riri/vite-react-ssg:ClientOnly:2025-12-25]                                         | +2   |
+| ✅ 成功 | 抑制 React Hydration #418 預期錯誤               | main.tsx 添加 console.error 攔截器，過濾 SSG 環境下的預期錯誤，不影響功能，只是開發者警告                                                                                                                                                   | [context7:/reactjs/react.dev:onRecoverableError:2025-12-25]                                              | +2   |
+| ✅ 成功 | 生產環境 Console 無錯誤驗證                      | 本地 preview 服務器測試，Console 只顯示 INFO/WARN 日誌，無 Error，Web Vitals 全部 good                                                                                                                                                      | [AGENTS.md:品質門檻]                                                                                     | +2   |
+| ✅ 成功 | CI jest-dom matchers 載入問題修復                | 1) setupTests.ts 添加 expect.extend(matchers) 2) 19 個測試文件顯式 import 3) eslint.config.js 禁用 unsafe 規則 4) tsconfig 添加 @testing-library/jest-dom 類型                                                                              | [context7:/@testing-library/jest-dom:vitest:2025-12-25]                                                  | +3   |
+| ✅ 成功 | 新增 Cloudflare CDN 快取自動清除工作流程         | 1) Release workflow 新增 Purge Cloudflare Cache 步驟 2) 使用 CLOUDFLARE_ZONE_ID/API_TOKEN secrets 3) 優雅降級：secrets 未配置時跳過 4) CI 8/8 全綠                                                                                          | [context7:/websites/developers_cloudflare:Cache-Purge-API:2025-12-25]                                    | +2   |
+| ✅ 成功 | 聖誕樹拖動功能 (v1.4.0)                          | 1) Motion drag API 實現平滑拖動 2) localStorage 記憶位置 3) 新增「↕ 可拖動」提示 4) 更新 aria-label 含拖動說明                                                                                                                              | [context7:/websites/motion-dev-docs:drag:2025-12-27]                                                     | +1   |
+| ✅ 成功 | 精緻雪花效果升級 (8 種 SVG 變體)                 | 1) 4→8 種雪花變體（新增：花瓣/樹枝/菱形/結晶） 2) 響應式數量：桌面 55/平板 35/手機 20 3) 純白色無藍色 4) GPU 加速動畫                                                                                                                       | [LINUS_GUIDE.md:Good Taste]                                                                              | +2   |
+| ✅ 成功 | UpdatePrompt 響應式尺寸優化                      | 1) 手機 280px/平板 300px/桌面 320px 寬度 2) 響應式 padding/圖標/字體 3) 符合 Windows UX Guidelines 最低有效分辨率                                                                                                                           | [WebSearch:modal responsive best practices 2025]                                                         | +1   |
+| ✅ 成功 | 版本號更新 1.3.0→1.4.0 + CI/CD 全數通過          | 1) TypeScript 通過 2) ESLint 0 錯誤 0 警告 3) 962 測試全通過 4) Build 成功 5) 瀏覽器驗證正常                                                                                                                                                | [AGENTS.md:品質門檻]                                                                                     | +1   |
+| ✅ 成功 | 趨勢圖背景 SSOT 修復 (v1.5.0)                    | SingleConverter.tsx Line 400 添加 bg-surface，確保趨勢圖背景為純色（Zen:白色/Nitro:深灰），避免繼承父元素漸層                                                                                                                               | [context7:/tailwindlabs/tailwindcss:bg-color:2026-01-20]                                                 | +1   |
+| ✅ 成功 | quake-school ESLint 警告修復                     | 1) RouterWrapper.tsx 分離 renderWithRouter 至獨立檔案 2) 修復 react-refresh/only-export-components 警告 3) Monorepo 全應用 lint 通過                                                                                                        | [react-refresh/only-export-components][LINUS_GUIDE.md]                                                   | +1   |
+| ✅ 成功 | SingleConverter 測試同步更新                     | 1) 更新 CSS class 測試預期值 (bg-brand-button-to → bg-primary) 2) 符合新 UI 設計 3) 1038 測試全通過                                                                                                                                         | [BDD.md:Red-Green-Refactor]                                                                              | +1   |
+| ✅ 成功 | AGENTS.md 文檔更新                               | 1) 任務狀態日期更新 (2025-12-25 → 2026-01-20) 2) 測試數量更新 (895 → 1038) 3) 版本更新 v2.1 → v2.2                                                                                                                                          | [AGENTS.md:§6]                                                                                           | +1   |
+| ✅ 成功 | SSOT UI/UX 全面重構（8 項完成）                  | 1) 移除卡片中間分隔線 2) 迷你趨勢圖背景透明 3) 現金按鈕高亮修正 4) 紫色為主色 5) 輸入框設計一致 6) 下拉模組 SSOT 7) 頁面可滾動 8) 硬編碼組件重構                                                                                            | [WebSearch:fintech UI 2026][context7:tailwindcss]                                                        | +8   |
+| ✅ 成功 | CurrencyList 測試 SSOT 更新                      | 1) text-yellow-500 → text-favorite 2) text-gray-300 → text-text-muted 3) text-green-500 → text-success 4) text-red-500 → text-destructive                                                                                                   | [BDD.md:Red-Green-Refactor]                                                                              | +1   |
+| ✅ 成功 | 移除未使用依賴 framer-motion                     | 1) depcheck 發現 framer-motion 未使用（已被 motion 取代） 2) pnpm remove framer-motion 3) 1038 測試全通過 4) 減少 bundle 冗餘                                                                                                               | [context7:/websites/motion_dev:motion-vs-framer-motion:2026-01-20]                                       | +1   |
 
 ---
 
diff --git a/apps/ratewise/docs/dev/014_design_token_architecture.md b/apps/ratewise/docs/dev/014_design_token_architecture.md
index 581a2a30a..fdb9501d4 100644
--- a/apps/ratewise/docs/dev/014_design_token_architecture.md
+++ b/apps/ratewise/docs/dev/014_design_token_architecture.md
@@ -1,22 +1,24 @@
 # Design Token SSOT 架構文檔
 
+> 狀態：實作架構說明。當前正式視覺規範請以 root `DESIGN.md` 為主，本文保留技術實作背景與歷史決策。
+
 > **建立時間**: 2026-01-17T00:30:00+08:00
-> **最後更新**: 2026-01-17T00:30:00+08:00
-> **版本**: 1.0.0
+> **最後更新**: 2026-05-23T00:00:00+08:00
+> **版本**: 1.1.0
 > **狀態**: ✅ 已完成
 
 ---
 
 ## 1. 概述
 
-RateWise 採用 **SSOT (Single Source of Truth) Design Token** 架構，透過 CSS Variables 實現動態主題切換，支援 6 種風格和淺/深/自動模式。
+RateWise 採用 **SSOT (Single Source of Truth) Design Token** 架構，透過 CSS Variables 實現風格切換，支援 6 種介面風格。正式產品視覺北極星與色票以 root `DESIGN.md` 為準；runtime 實作以 `src/config/themes.ts`、`src/config/design-tokens.ts` 與 `src/index.css` 為準。
 
 ### 1.1 核心設計原則
 
 1. **語義化命名**: 使用 `--color-primary`、`--color-accent` 等語義名稱，而非 `--color-blue-500`
-2. **主題隔離**: 透過 `data-style` 和 `data-mode` 屬性控制主題變數
+2. **風格隔離**: 透過 `data-style` 屬性控制風格變數；現行 runtime 不使用 `data-mode`
 3. **FOUC 防護**: 同步腳本在 `<head>` 中初始化主題，避免閃爍
-4. **向後相容**: 支援 Tailwind CSS 任意屬性語法 `bg-[rgb(var(--color-primary))]`
+4. **語義 class 優先**: 正式頁優先使用 `bg-surface`、`text-text-muted`、`border-border` 等 Tailwind semantic class；任意 `rgb(var())` 僅保留於 token 定義、SVG/Canvas、內部展示頁與必要 fallback
 
 ---
 
@@ -37,14 +39,14 @@ apps/ratewise/src/
 
 ## 3. 支援的風格
 
-| 風格 ID   | 名稱    | 主色調      | 說明                   |
-| --------- | ------- | ----------- | ---------------------- |
-| `zen`     | Zen     | 紫/靛藍     | 極簡專業，適合金融應用 |
-| `nitro`   | Nitro   | 青色/霓虹   | 深色科技感             |
-| `kawaii`  | Kawaii  | 粉紅/珊瑚   | 可愛粉嫩               |
-| `classic` | Classic | 琥珀/棕色   | 復古書卷               |
-| `ocean`   | Ocean   | 青藍/海洋藍 | 海洋深邃               |
-| `forest`  | Forest  | 翠綠/森林綠 | 自然森林               |
+| 風格 ID   | 名稱    | 主色調      | 說明                     |
+| --------- | ------- | ----------- | ------------------------ |
+| `zen`     | Zen     | 冷靜藍系    | 極簡專業，為產品預設基準 |
+| `nitro`   | Nitro   | 青色/霓虹   | 深色科技感               |
+| `kawaii`  | Kawaii  | 粉紅/珊瑚   | 可愛粉嫩                 |
+| `classic` | Classic | 琥珀/棕色   | 復古書卷                 |
+| `ocean`   | Ocean   | 青藍/海洋藍 | 海洋深邃                 |
+| `forest`  | Forest  | 翠綠/森林綠 | 自然森林                 |
 
 ---
 
@@ -95,12 +97,7 @@ apps/ratewise/src/
 [data-style="ocean"] { ... }
 [data-style="forest"] { ... }
 
-/* 模式選擇器 */
-[data-mode="light"] { ... }
-[data-mode="dark"] { ... }
-
-/* 組合選擇器 */
-[data-style="zen"][data-mode="dark"] { ... }
+/* 注意：現行 runtime 已移除 data-mode / dark mode。 */
 ```
 
 ---
@@ -110,15 +107,10 @@ apps/ratewise/src/
 ### 5.1 在組件中使用
 
 ```tsx
-// 使用 Tailwind 任意屬性
-<div className="bg-[rgb(var(--color-primary))]">
-  Primary Background
-</div>
-
-// 使用 CSS-in-JS
-<div style={{ backgroundColor: 'rgb(var(--color-primary))' }}>
-  Primary Background
-</div>
+// 正式頁優先使用 semantic class
+<div className="bg-primary text-primary-foreground">Primary Background</div>
+
+// 例外：色票預覽、SVG/Canvas 或 fallback HTML 才直接讀 CSS variable。
 ```
 
 ### 5.2 在 Hook 中使用
@@ -127,7 +119,7 @@ apps/ratewise/src/
 import { useAppTheme } from '../hooks/useAppTheme';
 
 function MyComponent() {
-  const { style, mode, setStyle, setMode, toggleMode } = useAppTheme();
+  const { style, setStyle, resetTheme } = useAppTheme();
 
   return <button onClick={() => setStyle('nitro')}>Switch to Nitro</button>;
 }
@@ -164,30 +156,16 @@ function TrendChart() {
   (function () {
     var STORAGE_KEY = 'ratewise-theme';
     var DEFAULT_STYLE = 'zen';
-    var DEFAULT_MODE = 'light';
-
     try {
       var stored = localStorage.getItem(STORAGE_KEY);
       if (stored) {
         var config = JSON.parse(stored);
         var style = config.style || DEFAULT_STYLE;
-        var mode = config.mode || DEFAULT_MODE;
-
-        // 處理自動模式
-        if (mode === 'auto') {
-          mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        }
 
         document.documentElement.dataset.style = style;
-        document.documentElement.dataset.mode = mode;
-
-        if (mode === 'dark') {
-          document.documentElement.classList.add('dark');
-        }
       }
     } catch (e) {
       document.documentElement.dataset.style = DEFAULT_STYLE;
-      document.documentElement.dataset.mode = DEFAULT_MODE;
     }
   })();
 </script>
@@ -203,7 +181,6 @@ const isFirstMount = useRef(true);
 useEffect(() => {
   if (isFirstMount.current) {
     isFirstMount.current = false;
-    setIsLoaded(true);
     return; // 首次掛載不重新應用主題
   }
   applyTheme(config);
@@ -228,12 +205,13 @@ useEffect(() => {
 
 - `src/config/__tests__/theme-consistency.test.ts` - 主題一致性測試
 - `src/config/__tests__/seo-paths.test.ts` - SEO 路徑測試
-- 瀏覽器 QA 測試 - 6 種風格 + 淺/深模式組合
+- 瀏覽器 QA 測試 - 6 種風格 + PWA safe-area / responsive header 檢查
 
 ---
 
 ## 9. 變更歷史
 
-| 版本  | 日期       | 變更內容                              |
-| ----- | ---------- | ------------------------------------- |
-| 1.0.0 | 2026-01-17 | 初始文檔建立，包含 6 種風格 SSOT 架構 |
+| 版本  | 日期       | 變更內容                                                                                            |
+| ----- | ---------- | --------------------------------------------------------------------------------------------------- |
+| 1.1.0 | 2026-05-23 | 對齊現行僅 `data-style` 架構，移除文件中的 `data-mode` 操作說明，補充正式頁 semantic class 優先規則 |
+| 1.0.0 | 2026-01-17 | 初始文檔建立，包含 6 種風格 SSOT 架構                                                               |
diff --git a/apps/ratewise/index.html b/apps/ratewise/index.html
index c5cf65faf..e703bc4b9 100644
--- a/apps/ratewise/index.html
+++ b/apps/ratewise/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 
-    <meta name="theme-color" content="#8B5CF6" />
+    <meta name="theme-color" content="#7C3AED" />
 
     <!-- Cloudflare Rocket Loader 停用（與 CSP/Trusted Types 衝突） -->
     <meta name="cloudflare-rocket-loader" content="off" />
@@ -36,9 +36,6 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="__BRAND_SHORT__" />
 
-    <!-- LCP 關鍵資源預載入：logo 是首頁 LCP 元素，preload 可提前請求避免 render-blocking 延遲。 -->
-    <link rel="preload" href="__BASE_PATH__logo.png" as="image" fetchpriority="high" />
-
     <!-- Resource Hints（僅保留實際使用的來源） -->
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link rel="preconnect" href="https://raw.githubusercontent.com" crossorigin />
@@ -47,6 +44,24 @@
 
     <!-- PWA Recovery Bootstrap -->
 
+    <!-- App-only routes: 缺少尾斜線時會被靜態伺服器回退到首頁 HTML，先在 React 啟動前正規化。 -->
+    <script>
+      (function () {
+        var basePath = '__BASE_PATH__';
+        var normalizedBase = basePath === '/' ? '/' : basePath.replace(/\/?$/, '/');
+        var pathname = window.location.pathname;
+        if (pathname.indexOf(normalizedBase) !== 0) return;
+
+        var relativePath = pathname.slice(normalizedBase === '/' ? 1 : normalizedBase.length);
+        if (!relativePath || relativePath.endsWith('/')) return;
+
+        var appOnlyRoutes = ['multi', 'favorites', 'settings'];
+        if (appOnlyRoutes.indexOf(relativePath) === -1) return;
+
+        window.location.replace(pathname + '/' + window.location.search + window.location.hash);
+      })();
+    </script>
+
     <!-- Theme Initialization (防止 FOUC) -->
     <script>
       (function () {
@@ -98,7 +113,8 @@
         padding: 0;
         min-height: 100%;
         min-height: 100dvh;
-        background: #f8fafc;
+        background: var(--sk-bg, #f8fafc);
+        color: var(--sk-text, #0f172a);
         font-family:
           'Inter',
           'Noto Sans TC',
@@ -118,9 +134,9 @@
         --sk-surface: #ffffff;
         --sk-border: #e2e8f0;
         --sk-shimmer: #cbd5e1;
-        --sk-accent: rgba(139, 92, 246, 0.15);
-        --sk-accent-shimmer: rgba(139, 92, 246, 0.25);
-        --sk-text: #1e293b;
+        --sk-accent: rgba(124, 58, 237, 0.12);
+        --sk-accent-shimmer: rgba(139, 92, 246, 0.22);
+        --sk-text: #0f172a;
         --sk-text-muted: #64748b;
       }
       [data-style='nitro'] {
@@ -130,28 +146,28 @@
         --sk-shimmer: #334155;
         --sk-accent: rgba(14, 165, 233, 0.2);
         --sk-accent-shimmer: rgba(14, 165, 233, 0.35);
-        --sk-text: #f1f5f9;
-        --sk-text-muted: #94a3b8;
+        --sk-text: #ffffff;
+        --sk-text-muted: #cbd5e1;
       }
       [data-style='kawaii'] {
         --sk-bg: #fffaf4;
         --sk-surface: #ffffff;
-        --sk-border: #fce7f3;
+        --sk-border: #ffe4e1;
         --sk-shimmer: #fbcfe8;
         --sk-accent: rgba(244, 114, 182, 0.15);
         --sk-accent-shimmer: rgba(244, 114, 182, 0.25);
-        --sk-text: #1e293b;
-        --sk-text-muted: #64748b;
+        --sk-text: #5c2d3c;
+        --sk-text-muted: #66414c;
       }
       [data-style='classic'] {
         --sk-bg: #fffafb;
         --sk-surface: #ffffff;
-        --sk-border: #e7e5e4;
+        --sk-border: #f5e6dc;
         --sk-shimmer: #d6d3d1;
         --sk-accent: rgba(180, 83, 9, 0.12);
         --sk-accent-shimmer: rgba(180, 83, 9, 0.2);
-        --sk-text: #1c1917;
-        --sk-text-muted: #78716c;
+        --sk-text: #431407;
+        --sk-text-muted: #78503c;
       }
       [data-style='ocean'] {
         --sk-bg: #f0f9ff;
@@ -160,8 +176,8 @@
         --sk-shimmer: #7dd3fc;
         --sk-accent: rgba(6, 182, 212, 0.15);
         --sk-accent-shimmer: rgba(6, 182, 212, 0.25);
-        --sk-text: #0c4a6e;
-        --sk-text-muted: #0369a1;
+        --sk-text: #075985;
+        --sk-text-muted: #164e63;
       }
       [data-style='forest'] {
         --sk-bg: #f0fdf4;
@@ -377,7 +393,7 @@
     <!-- Structured Data managed by SEOHelmet component (prevents duplicate schemas) -->
     <!-- Title managed by SEOHelmet component (prevents duplicate titles) -->
   </head>
-  <body class="bg-slate-50">
+  <body>
     <noscript>
       <p>
         __BRAND_FULL__ 需要 JavaScript
diff --git a/apps/ratewise/lighthouse-report.json b/apps/ratewise/lighthouse-report.json
deleted file mode 100644
index 16a3900d5..000000000
--- a/apps/ratewise/lighthouse-report.json
+++ /dev/null
@@ -1,5274 +0,0 @@
-{
-  "lighthouseVersion": "13.0.1",
-  "requestedUrl": "http://localhost:4173/",
-  "mainDocumentUrl": "http://localhost:4173/",
-  "finalDisplayedUrl": "http://localhost:4173/",
-  "finalUrl": "http://localhost:4173/",
-  "fetchTime": "2025-12-27T05:18:09.367Z",
-  "gatherMode": "navigation",
-  "runtimeError": {
-    "code": "NO_FCP",
-    "message": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-    "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-    "artifactKey": "PageLoadError"
-  },
-  "runWarnings": [
-    "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)"
-  ],
-  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/143.0.0.0 Safari/537.36",
-  "environment": {
-    "hostUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/143.0.0.0 Safari/537.36",
-    "benchmarkIndex": 3027,
-    "credits": {}
-  },
-  "audits": {
-    "is-on-https": {
-      "id": "is-on-https",
-      "title": "Uses HTTPS",
-      "description": "All sites should be protected with HTTPS, even ones that don't handle sensitive data. This includes avoiding [mixed content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content), where some resources are loaded over HTTP despite the initial request being served over HTTPS. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. [Learn more about HTTPS](https://developer.chrome.com/docs/lighthouse/pwa/is-on-https/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "redirects-http": {
-      "id": "redirects-http",
-      "title": "Redirects HTTP traffic to HTTPS",
-      "description": "Make sure that you redirect all HTTP traffic to HTTPS in order to enable secure web features for all your users. [Learn more](https://developer.chrome.com/docs/lighthouse/pwa/redirects-http/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "first-contentful-paint": {
-      "id": "first-contentful-paint",
-      "title": "First Contentful Paint",
-      "description": "First Contentful Paint marks the time at which the first text or image is painted. [Learn more about the First Contentful Paint metric](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "largest-contentful-paint": {
-      "id": "largest-contentful-paint",
-      "title": "Largest Contentful Paint",
-      "description": "Largest Contentful Paint marks the time at which the largest text or image is painted. [Learn more about the Largest Contentful Paint metric](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "speed-index": {
-      "id": "speed-index",
-      "title": "Speed Index",
-      "description": "Speed Index shows how quickly the contents of a page are visibly populated. [Learn more about the Speed Index metric](https://developer.chrome.com/docs/lighthouse/performance/speed-index/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "screenshot-thumbnails": {
-      "id": "screenshot-thumbnails",
-      "title": "Screenshot Thumbnails",
-      "description": "This is what the load of your site looked like.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "final-screenshot": {
-      "id": "final-screenshot",
-      "title": "Final Screenshot",
-      "description": "The last screenshot captured of the pageload.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "total-blocking-time": {
-      "id": "total-blocking-time",
-      "title": "Total Blocking Time",
-      "description": "Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. [Learn more about the Total Blocking Time metric](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "max-potential-fid": {
-      "id": "max-potential-fid",
-      "title": "Max Potential First Input Delay",
-      "description": "The maximum potential First Input Delay that your users could experience is the duration of the longest task. [Learn more about the Maximum Potential First Input Delay metric](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "cumulative-layout-shift": {
-      "id": "cumulative-layout-shift",
-      "title": "Cumulative Layout Shift",
-      "description": "Cumulative Layout Shift measures the movement of visible elements within the viewport. [Learn more about the Cumulative Layout Shift metric](https://web.dev/articles/cls).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "errors-in-console": {
-      "id": "errors-in-console",
-      "title": "No browser errors logged to the console",
-      "description": "Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns. [Learn more about this errors in console diagnostic audit](https://developer.chrome.com/docs/lighthouse/best-practices/errors-in-console/)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "server-response-time": {
-      "id": "server-response-time",
-      "title": "Initial server response time was short",
-      "description": "Keep the server response time for the main document short because all other requests depend on it. [Learn more about the Time to First Byte metric](https://developer.chrome.com/docs/lighthouse/performance/time-to-first-byte/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 1
-    },
-    "interactive": {
-      "id": "interactive",
-      "title": "Time to Interactive",
-      "description": "Time to Interactive is the amount of time it takes for the page to become fully interactive. [Learn more about the Time to Interactive metric](https://developer.chrome.com/docs/lighthouse/performance/interactive/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "user-timings": {
-      "id": "user-timings",
-      "title": "User Timing marks and measures",
-      "description": "Consider instrumenting your app with the User Timing API to measure your app's real-world performance during key user experiences. [Learn more about User Timing marks](https://developer.chrome.com/docs/lighthouse/performance/user-timings/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 2
-    },
-    "redirects": {
-      "id": "redirects",
-      "title": "Avoid multiple page redirects",
-      "description": "Redirects introduce additional delays before the page can be loaded. [Learn how to avoid page redirects](https://developer.chrome.com/docs/lighthouse/performance/redirects/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 2
-    },
-    "image-aspect-ratio": {
-      "id": "image-aspect-ratio",
-      "title": "Displays images with correct aspect ratio",
-      "description": "Image display dimensions should match natural aspect ratio. [Learn more about image aspect ratio](https://developer.chrome.com/docs/lighthouse/best-practices/image-aspect-ratio/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "image-size-responsive": {
-      "id": "image-size-responsive",
-      "title": "Serves images with appropriate resolution",
-      "description": "Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity. [Learn how to provide responsive images](https://web.dev/articles/serve-responsive-images).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "deprecations": {
-      "id": "deprecations",
-      "title": "Avoids deprecated APIs",
-      "description": "Deprecated APIs will eventually be removed from the browser. [Learn more about deprecated APIs](https://developer.chrome.com/docs/lighthouse/best-practices/deprecations/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "third-party-cookies": {
-      "id": "third-party-cookies",
-      "title": "Avoids third-party cookies",
-      "description": "Third-party cookies may be blocked in some contexts. [Learn more about preparing for third-party cookie restrictions](https://privacysandbox.google.com/cookies/prepare/overview).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "mainthread-work-breakdown": {
-      "id": "mainthread-work-breakdown",
-      "title": "Minimizes main-thread work",
-      "description": "Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. [Learn how to minimize main-thread work](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 1
-    },
-    "bootup-time": {
-      "id": "bootup-time",
-      "title": "JavaScript execution time",
-      "description": "Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. [Learn how to reduce Javascript execution time](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 1
-    },
-    "diagnostics": {
-      "id": "diagnostics",
-      "title": "Diagnostics",
-      "description": "Collection of useful page vitals.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "network-requests": {
-      "id": "network-requests",
-      "title": "Network Requests",
-      "description": "Lists the network requests that were made during page load.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "network-rtt": {
-      "id": "network-rtt",
-      "title": "Network Round Trip Times",
-      "description": "Network round trip times (RTT) have a large impact on performance. If the RTT to an origin is high, it's an indication that servers closer to the user could improve performance. [Learn more about the Round Trip Time](https://hpbn.co/primer-on-latency-and-bandwidth/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "network-server-latency": {
-      "id": "network-server-latency",
-      "title": "Server Backend Latencies",
-      "description": "Server latencies can impact web performance. If the server latency of an origin is high, it's an indication the server is overloaded or has poor backend performance. [Learn more about server response time](https://hpbn.co/primer-on-web-performance/#analyzing-the-resource-waterfall).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "main-thread-tasks": {
-      "id": "main-thread-tasks",
-      "title": "Tasks",
-      "description": "Lists the toplevel main thread tasks that executed during page load.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "metrics": {
-      "id": "metrics",
-      "title": "Metrics",
-      "description": "Collects all available metrics.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "resource-summary": {
-      "id": "resource-summary",
-      "title": "Resources Summary",
-      "description": "Aggregates all network requests and groups them by type",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "layout-shifts": {
-      "id": "layout-shifts",
-      "title": "Avoid large layout shifts",
-      "description": "These are the largest layout shifts observed on the page. Each table item represents a single layout shift, and shows the element that shifted the most. Below each item are possible root causes that led to the layout shift. Some of these layout shifts may not be included in the CLS metric value due to [windowing](https://web.dev/articles/cls#what_is_cls). [Learn how to improve CLS](https://web.dev/articles/optimize-cls)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 2
-    },
-    "long-tasks": {
-      "id": "long-tasks",
-      "title": "Avoid long main-thread tasks",
-      "description": "Lists the longest tasks on the main thread, useful for identifying worst contributors to input delay. [Learn how to avoid long main-thread tasks](https://web.dev/articles/optimize-long-tasks)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 1
-    },
-    "non-composited-animations": {
-      "id": "non-composited-animations",
-      "title": "Avoid non-composited animations",
-      "description": "Animations which are not composited can be janky and increase CLS. [Learn how to avoid non-composited animations](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 2
-    },
-    "unsized-images": {
-      "id": "unsized-images",
-      "title": "Image elements have explicit `width` and `height`",
-      "description": "Set an explicit width and height on image elements to reduce layout shifts and improve CLS. [Learn how to set image dimensions](https://web.dev/articles/optimize-cls#images_without_dimensions)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 4
-    },
-    "valid-source-maps": {
-      "id": "valid-source-maps",
-      "title": "Page has valid source maps",
-      "description": "Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. [Learn more about source maps](https://developer.chrome.com/docs/devtools/javascript/source-maps/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "csp-xss": {
-      "id": "csp-xss",
-      "title": "Ensure CSP is effective against XSS attacks",
-      "description": "A strong Content Security Policy (CSP) significantly reduces the risk of cross-site scripting (XSS) attacks. [Learn how to use a CSP to prevent XSS](https://developer.chrome.com/docs/lighthouse/best-practices/csp-xss/)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "has-hsts": {
-      "id": "has-hsts",
-      "title": "Use a strong HSTS policy",
-      "description": "Deployment of the HSTS header significantly reduces the risk of downgrading HTTP connections and eavesdropping attacks. A rollout in stages, starting with a low max-age is recommended. [Learn more about using a strong HSTS policy.](https://developer.chrome.com/docs/lighthouse/best-practices/has-hsts)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "origin-isolation": {
-      "id": "origin-isolation",
-      "title": "Ensure proper origin isolation with COOP",
-      "description": "The Cross-Origin-Opener-Policy (COOP) can be used to isolate the top-level window from other documents such as pop-ups. [Learn more about deploying the COOP header.](https://web.dev/articles/why-coop-coep#coop)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "clickjacking-mitigation": {
-      "id": "clickjacking-mitigation",
-      "title": "Mitigate clickjacking with XFO or CSP",
-      "description": "The `X-Frame-Options` (XFO) header or the `frame-ancestors` directive in the `Content-Security-Policy` (CSP) header control where a page can be embedded. These can mitigate clickjacking attacks by blocking some or all sites from embedding the page. [Learn more about mitigating clickjacking](https://developer.chrome.com/docs/lighthouse/best-practices/clickjacking-mitigation).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "trusted-types-xss": {
-      "id": "trusted-types-xss",
-      "title": "Mitigate DOM-based XSS with Trusted Types",
-      "description": "The `require-trusted-types-for` directive in the `Content-Security-Policy` (CSP) header instructs user agents to control the data passed to DOM XSS sink functions. [Learn more about mitigating DOM-based XSS with Trusted Types](https://developer.chrome.com/docs/lighthouse/best-practices/trusted-types-xss).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "script-treemap-data": {
-      "id": "script-treemap-data",
-      "title": "Script Treemap Data",
-      "description": "Used for treemap app",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "accesskeys": {
-      "id": "accesskeys",
-      "title": "`[accesskey]` values are unique",
-      "description": "Access keys let users quickly focus a part of the page. For proper navigation, each access key must be unique. [Learn more about access keys](https://dequeuniversity.com/rules/axe/4.11/accesskeys).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-allowed-attr": {
-      "id": "aria-allowed-attr",
-      "title": "`[aria-*]` attributes match their roles",
-      "description": "Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. [Learn how to match ARIA attributes to their roles](https://dequeuniversity.com/rules/axe/4.11/aria-allowed-attr).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-allowed-role": {
-      "id": "aria-allowed-role",
-      "title": "Uses ARIA roles only on compatible elements",
-      "description": "Many HTML elements can only be assigned certain ARIA roles. Using ARIA roles where they are not allowed can interfere with the accessibility of the web page. [Learn more about ARIA roles](https://dequeuniversity.com/rules/axe/4.11/aria-allowed-role).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-command-name": {
-      "id": "aria-command-name",
-      "title": "`button`, `link`, and `menuitem` elements have accessible names",
-      "description": "When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn how to make command elements more accessible](https://dequeuniversity.com/rules/axe/4.11/aria-command-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-conditional-attr": {
-      "id": "aria-conditional-attr",
-      "title": "ARIA attributes are used as specified for the element's role",
-      "description": "Some ARIA attributes are only allowed on an element under certain conditions. [Learn more about conditional ARIA attributes](https://dequeuniversity.com/rules/axe/4.11/aria-conditional-attr).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-deprecated-role": {
-      "id": "aria-deprecated-role",
-      "title": "Deprecated ARIA roles were not used",
-      "description": "Deprecated ARIA roles may not be processed correctly by assistive technology. [Learn more about deprecated ARIA roles](https://dequeuniversity.com/rules/axe/4.11/aria-deprecated-role).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-dialog-name": {
-      "id": "aria-dialog-name",
-      "title": "Elements with `role=\"dialog\"` or `role=\"alertdialog\"` have accessible names.",
-      "description": "ARIA dialog elements without accessible names may prevent screen readers users from discerning the purpose of these elements. [Learn how to make ARIA dialog elements more accessible](https://dequeuniversity.com/rules/axe/4.11/aria-dialog-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-hidden-body": {
-      "id": "aria-hidden-body",
-      "title": "`[aria-hidden=\"true\"]` is not present on the document `<body>`",
-      "description": "Assistive technologies, like screen readers, work inconsistently when `aria-hidden=\"true\"` is set on the document `<body>`. [Learn how `aria-hidden` affects the document body](https://dequeuniversity.com/rules/axe/4.11/aria-hidden-body).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-hidden-focus": {
-      "id": "aria-hidden-focus",
-      "title": "`[aria-hidden=\"true\"]` elements do not contain focusable descendents",
-      "description": "Focusable descendents within an `[aria-hidden=\"true\"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. [Learn how `aria-hidden` affects focusable elements](https://dequeuniversity.com/rules/axe/4.11/aria-hidden-focus).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-input-field-name": {
-      "id": "aria-input-field-name",
-      "title": "ARIA input fields have accessible names",
-      "description": "When an input field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more about input field labels](https://dequeuniversity.com/rules/axe/4.11/aria-input-field-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-meter-name": {
-      "id": "aria-meter-name",
-      "title": "ARIA `meter` elements have accessible names",
-      "description": "When a meter element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn how to name `meter` elements](https://dequeuniversity.com/rules/axe/4.11/aria-meter-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-progressbar-name": {
-      "id": "aria-progressbar-name",
-      "title": "ARIA `progressbar` elements have accessible names",
-      "description": "When a `progressbar` element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn how to label `progressbar` elements](https://dequeuniversity.com/rules/axe/4.11/aria-progressbar-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-prohibited-attr": {
-      "id": "aria-prohibited-attr",
-      "title": "Elements use only permitted ARIA attributes",
-      "description": "Using ARIA attributes in roles where they are prohibited can mean that important information is not communicated to users of assistive technologies. [Learn more about prohibited ARIA roles](https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-required-attr": {
-      "id": "aria-required-attr",
-      "title": "`[role]`s have all required `[aria-*]` attributes",
-      "description": "Some ARIA roles have required attributes that describe the state of the element to screen readers. [Learn more about roles and required attributes](https://dequeuniversity.com/rules/axe/4.11/aria-required-attr).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-required-children": {
-      "id": "aria-required-children",
-      "title": "Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children.",
-      "description": "Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. [Learn more about roles and required children elements](https://dequeuniversity.com/rules/axe/4.11/aria-required-children).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-required-parent": {
-      "id": "aria-required-parent",
-      "title": "`[role]`s are contained by their required parent element",
-      "description": "Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions. [Learn more about ARIA roles and required parent element](https://dequeuniversity.com/rules/axe/4.11/aria-required-parent).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-roles": {
-      "id": "aria-roles",
-      "title": "`[role]` values are valid",
-      "description": "ARIA roles must have valid values in order to perform their intended accessibility functions. [Learn more about valid ARIA roles](https://dequeuniversity.com/rules/axe/4.11/aria-roles).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-text": {
-      "id": "aria-text",
-      "title": "Elements with the `role=text` attribute do not have focusable descendents.",
-      "description": "Adding `role=text` around a text node split by markup enables VoiceOver to treat it as one phrase, but the element's focusable descendents will not be announced. [Learn more about the `role=text` attribute](https://dequeuniversity.com/rules/axe/4.11/aria-text).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-toggle-field-name": {
-      "id": "aria-toggle-field-name",
-      "title": "ARIA toggle fields have accessible names",
-      "description": "When a toggle field doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more about toggle fields](https://dequeuniversity.com/rules/axe/4.11/aria-toggle-field-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-tooltip-name": {
-      "id": "aria-tooltip-name",
-      "title": "ARIA `tooltip` elements have accessible names",
-      "description": "When a tooltip element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn how to name `tooltip` elements](https://dequeuniversity.com/rules/axe/4.11/aria-tooltip-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-treeitem-name": {
-      "id": "aria-treeitem-name",
-      "title": "ARIA `treeitem` elements have accessible names",
-      "description": "When a `treeitem` element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn more about labeling `treeitem` elements](https://dequeuniversity.com/rules/axe/4.11/aria-treeitem-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-valid-attr-value": {
-      "id": "aria-valid-attr-value",
-      "title": "`[aria-*]` attributes have valid values",
-      "description": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values. [Learn more about valid values for ARIA attributes](https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "aria-valid-attr": {
-      "id": "aria-valid-attr",
-      "title": "`[aria-*]` attributes are valid and not misspelled",
-      "description": "Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid names. [Learn more about valid ARIA attributes](https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "button-name": {
-      "id": "button-name",
-      "title": "Buttons have an accessible name",
-      "description": "When a button doesn't have an accessible name, screen readers announce it as \"button\", making it unusable for users who rely on screen readers. [Learn how to make buttons more accessible](https://dequeuniversity.com/rules/axe/4.11/button-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "bypass": {
-      "id": "bypass",
-      "title": "The page contains a heading, skip link, or landmark region",
-      "description": "Adding ways to bypass repetitive content lets keyboard users navigate the page more efficiently. [Learn more about bypass blocks](https://dequeuniversity.com/rules/axe/4.11/bypass).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "color-contrast": {
-      "id": "color-contrast",
-      "title": "Background and foreground colors have a sufficient contrast ratio",
-      "description": "Low-contrast text is difficult or impossible for many users to read. [Learn how to provide sufficient color contrast](https://dequeuniversity.com/rules/axe/4.11/color-contrast).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "definition-list": {
-      "id": "definition-list",
-      "title": "`<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>`, `<template>` or `<div>` elements.",
-      "description": "When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output. [Learn how to structure definition lists correctly](https://dequeuniversity.com/rules/axe/4.11/definition-list).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "dlitem": {
-      "id": "dlitem",
-      "title": "Definition list items are wrapped in `<dl>` elements",
-      "description": "Definition list items (`<dt>` and `<dd>`) must be wrapped in a parent `<dl>` element to ensure that screen readers can properly announce them. [Learn how to structure definition lists correctly](https://dequeuniversity.com/rules/axe/4.11/dlitem).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "document-title": {
-      "id": "document-title",
-      "title": "Document has a `<title>` element",
-      "description": "The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search. [Learn more about document titles](https://dequeuniversity.com/rules/axe/4.11/document-title).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "duplicate-id-aria": {
-      "id": "duplicate-id-aria",
-      "title": "ARIA IDs are unique",
-      "description": "The value of an ARIA ID must be unique to prevent other instances from being overlooked by assistive technologies. [Learn how to fix duplicate ARIA IDs](https://dequeuniversity.com/rules/axe/4.11/duplicate-id-aria).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "empty-heading": {
-      "id": "empty-heading",
-      "title": "All heading elements contain content.",
-      "description": "A heading with no content or inaccessible text prevent screen reader users from accessing information on the page's structure. [Learn more about headings](https://dequeuniversity.com/rules/axe/4.11/empty-heading).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "form-field-multiple-labels": {
-      "id": "form-field-multiple-labels",
-      "title": "No form fields have multiple labels",
-      "description": "Form fields with multiple labels can be confusingly announced by assistive technologies like screen readers which use either the first, the last, or all of the labels. [Learn how to use form labels](https://dequeuniversity.com/rules/axe/4.11/form-field-multiple-labels).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "frame-title": {
-      "id": "frame-title",
-      "title": "`<frame>` or `<iframe>` elements have a title",
-      "description": "Screen reader users rely on frame titles to describe the contents of frames. [Learn more about frame titles](https://dequeuniversity.com/rules/axe/4.11/frame-title).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "heading-order": {
-      "id": "heading-order",
-      "title": "Heading elements appear in a sequentially-descending order",
-      "description": "Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. [Learn more about heading order](https://dequeuniversity.com/rules/axe/4.11/heading-order).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "html-has-lang": {
-      "id": "html-has-lang",
-      "title": "`<html>` element has a `[lang]` attribute",
-      "description": "If a page doesn't specify a `lang` attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly. [Learn more about the `lang` attribute](https://dequeuniversity.com/rules/axe/4.11/html-has-lang).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "html-lang-valid": {
-      "id": "html-lang-valid",
-      "title": "`<html>` element has a valid value for its `[lang]` attribute",
-      "description": "Specifying a valid [BCP 47 language](https://www.w3.org/International/questions/qa-choosing-language-tags#question) helps screen readers announce text properly. [Learn how to use the `lang` attribute](https://dequeuniversity.com/rules/axe/4.11/html-lang-valid).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "html-xml-lang-mismatch": {
-      "id": "html-xml-lang-mismatch",
-      "title": "`<html>` element has an `[xml:lang]` attribute with the same base language as the `[lang]` attribute.",
-      "description": "If the webpage does not specify a consistent language, then the screen reader might not announce the page's text correctly. [Learn more about the `lang` attribute](https://dequeuniversity.com/rules/axe/4.11/html-xml-lang-mismatch).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "identical-links-same-purpose": {
-      "id": "identical-links-same-purpose",
-      "title": "Identical links have the same purpose.",
-      "description": "Links with the same destination should have the same description, to help users understand the link's purpose and decide whether to follow it. [Learn more about identical links](https://dequeuniversity.com/rules/axe/4.11/identical-links-same-purpose).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "image-alt": {
-      "id": "image-alt",
-      "title": "Image elements have `[alt]` attributes",
-      "description": "Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. [Learn more about the `alt` attribute](https://dequeuniversity.com/rules/axe/4.11/image-alt).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "image-redundant-alt": {
-      "id": "image-redundant-alt",
-      "title": "Image elements do not have `[alt]` attributes that are redundant text.",
-      "description": "Informative elements should aim for short, descriptive alternative text. Alternative text that is exactly the same as the text adjacent to the link or image is potentially confusing for screen reader users, because the text will be read twice. [Learn more about the `alt` attribute](https://dequeuniversity.com/rules/axe/4.11/image-redundant-alt).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "input-button-name": {
-      "id": "input-button-name",
-      "title": "Input buttons have discernible text.",
-      "description": "Adding discernable and accessible text to input buttons may help screen reader users understand the purpose of the input button. [Learn more about input buttons](https://dequeuniversity.com/rules/axe/4.11/input-button-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "input-image-alt": {
-      "id": "input-image-alt",
-      "title": "`<input type=\"image\">` elements have `[alt]` text",
-      "description": "When an image is being used as an `<input>` button, providing alternative text can help screen reader users understand the purpose of the button. [Learn about input image alt text](https://dequeuniversity.com/rules/axe/4.11/input-image-alt).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "label-content-name-mismatch": {
-      "id": "label-content-name-mismatch",
-      "title": "Elements with visible text labels have matching accessible names.",
-      "description": "Visible text labels that do not match the accessible name can result in a confusing experience for screen reader users. [Learn more about accessible names](https://dequeuniversity.com/rules/axe/4.11/label-content-name-mismatch).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "label": {
-      "id": "label",
-      "title": "Form elements have associated labels",
-      "description": "Labels ensure that form controls are announced properly by assistive technologies, like screen readers. [Learn more about form element labels](https://dequeuniversity.com/rules/axe/4.11/label).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "landmark-one-main": {
-      "id": "landmark-one-main",
-      "title": "Document has a main landmark.",
-      "description": "One main landmark helps screen reader users navigate a web page. [Learn more about landmarks](https://dequeuniversity.com/rules/axe/4.11/landmark-one-main).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "link-name": {
-      "id": "link-name",
-      "title": "Links have a discernible name",
-      "description": "Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. [Learn how to make links accessible](https://dequeuniversity.com/rules/axe/4.11/link-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "link-in-text-block": {
-      "id": "link-in-text-block",
-      "title": "Links are distinguishable without relying on color.",
-      "description": "Low-contrast text is difficult or impossible for many users to read. Link text that is discernible improves the experience for users with low vision. [Learn how to make links distinguishable](https://dequeuniversity.com/rules/axe/4.11/link-in-text-block).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "list": {
-      "id": "list",
-      "title": "Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`).",
-      "description": "Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. [Learn more about proper list structure](https://dequeuniversity.com/rules/axe/4.11/list).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "listitem": {
-      "id": "listitem",
-      "title": "List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements",
-      "description": "Screen readers require list items (`<li>`) to be contained within a parent `<ul>`, `<ol>` or `<menu>` to be announced properly. [Learn more about proper list structure](https://dequeuniversity.com/rules/axe/4.11/listitem).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "meta-refresh": {
-      "id": "meta-refresh",
-      "title": "The document does not use `<meta http-equiv=\"refresh\">`",
-      "description": "Users do not expect a page to refresh automatically, and doing so will move focus back to the top of the page. This may create a frustrating or confusing experience. [Learn more about the refresh meta tag](https://dequeuniversity.com/rules/axe/4.11/meta-refresh).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "meta-viewport": {
-      "id": "meta-viewport",
-      "title": "`[user-scalable=\"no\"]` is not used in the `<meta name=\"viewport\">` element and the `[maximum-scale]` attribute is not less than 5.",
-      "description": "Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. [Learn more about the viewport meta tag](https://dequeuniversity.com/rules/axe/4.11/meta-viewport).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "object-alt": {
-      "id": "object-alt",
-      "title": "`<object>` elements have alternate text",
-      "description": "Screen readers cannot translate non-text content. Adding alternate text to `<object>` elements helps screen readers convey meaning to users. [Learn more about alt text for `object` elements](https://dequeuniversity.com/rules/axe/4.11/object-alt).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "select-name": {
-      "id": "select-name",
-      "title": "Select elements have associated label elements.",
-      "description": "Form elements without effective labels can create frustrating experiences for screen reader users. [Learn more about the `select` element](https://dequeuniversity.com/rules/axe/4.11/select-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "skip-link": {
-      "id": "skip-link",
-      "title": "Skip links are focusable.",
-      "description": "Including a skip link can help users skip to the main content to save time. [Learn more about skip links](https://dequeuniversity.com/rules/axe/4.11/skip-link).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "tabindex": {
-      "id": "tabindex",
-      "title": "No element has a `[tabindex]` value greater than 0",
-      "description": "A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. [Learn more about the `tabindex` attribute](https://dequeuniversity.com/rules/axe/4.11/tabindex).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "table-duplicate-name": {
-      "id": "table-duplicate-name",
-      "title": "Tables have different content in the summary attribute and `<caption>`.",
-      "description": "The summary attribute should describe the table structure, while `<caption>` should have the onscreen title. Accurate table mark-up helps users of screen readers. [Learn more about summary and caption](https://dequeuniversity.com/rules/axe/4.11/table-duplicate-name).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "table-fake-caption": {
-      "id": "table-fake-caption",
-      "title": "Tables use `<caption>` instead of cells with the `[colspan]` attribute to indicate a caption.",
-      "description": "Screen readers have features to make navigating tables easier. Ensuring that tables use the actual caption element instead of cells with the `[colspan]` attribute may improve the experience for screen reader users. [Learn more about captions](https://dequeuniversity.com/rules/axe/4.11/table-fake-caption).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "target-size": {
-      "id": "target-size",
-      "title": "Touch targets have sufficient size and spacing.",
-      "description": "Touch targets with sufficient size and spacing help users who may have difficulty targeting small controls to activate the targets. [Learn more about touch targets](https://dequeuniversity.com/rules/axe/4.11/target-size).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "td-has-header": {
-      "id": "td-has-header",
-      "title": "`<td>` elements in a large `<table>` have one or more table headers.",
-      "description": "Screen readers have features to make navigating tables easier. Ensuring that `<td>` elements in a large table (3 or more cells in width and height) have an associated table header may improve the experience for screen reader users. [Learn more about table headers](https://dequeuniversity.com/rules/axe/4.11/td-has-header).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "td-headers-attr": {
-      "id": "td-headers-attr",
-      "title": "Cells in a `<table>` element that use the `[headers]` attribute refer to table cells within the same table.",
-      "description": "Screen readers have features to make navigating tables easier. Ensuring `<td>` cells using the `[headers]` attribute only refer to other cells in the same table may improve the experience for screen reader users. [Learn more about the `headers` attribute](https://dequeuniversity.com/rules/axe/4.11/td-headers-attr).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "th-has-data-cells": {
-      "id": "th-has-data-cells",
-      "title": "`<th>` elements and elements with `[role=\"columnheader\"/\"rowheader\"]` have data cells they describe.",
-      "description": "Screen readers have features to make navigating tables easier. Ensuring table headers always refer to some set of cells may improve the experience for screen reader users. [Learn more about table headers](https://dequeuniversity.com/rules/axe/4.11/th-has-data-cells).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "valid-lang": {
-      "id": "valid-lang",
-      "title": "`[lang]` attributes have a valid value",
-      "description": "Specifying a valid [BCP 47 language](https://www.w3.org/International/questions/qa-choosing-language-tags#question) on elements helps ensure that text is pronounced correctly by a screen reader. [Learn how to use the `lang` attribute](https://dequeuniversity.com/rules/axe/4.11/valid-lang).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "video-caption": {
-      "id": "video-caption",
-      "title": "`<video>` elements contain a `<track>` element with `[kind=\"captions\"]`",
-      "description": "When a video provides a caption it is easier for deaf and hearing impaired users to access its information. [Learn more about video captions](https://dequeuniversity.com/rules/axe/4.11/video-caption).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "custom-controls-labels": {
-      "id": "custom-controls-labels",
-      "title": "Custom controls have associated labels",
-      "description": "Custom interactive controls have associated labels, provided by aria-label or aria-labelledby. [Learn more about custom controls and labels](https://developer.chrome.com/docs/lighthouse/accessibility/custom-controls-labels/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "custom-controls-roles": {
-      "id": "custom-controls-roles",
-      "title": "Custom controls have ARIA roles",
-      "description": "Custom interactive controls have appropriate ARIA roles. [Learn how to add roles to custom controls](https://developer.chrome.com/docs/lighthouse/accessibility/custom-control-roles/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "focus-traps": {
-      "id": "focus-traps",
-      "title": "User focus is not accidentally trapped in a region",
-      "description": "A user can tab into and out of any control or region without accidentally trapping their focus. [Learn how to avoid focus traps](https://developer.chrome.com/docs/lighthouse/accessibility/focus-traps/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "focusable-controls": {
-      "id": "focusable-controls",
-      "title": "Interactive controls are keyboard focusable",
-      "description": "Custom interactive controls are keyboard focusable and display a focus indicator. [Learn how to make custom controls focusable](https://developer.chrome.com/docs/lighthouse/accessibility/focusable-controls/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "interactive-element-affordance": {
-      "id": "interactive-element-affordance",
-      "title": "Interactive elements indicate their purpose and state",
-      "description": "Interactive elements, such as links and buttons, should indicate their state and be distinguishable from non-interactive elements. [Learn how to decorate interactive elements with affordance hints](https://developer.chrome.com/docs/lighthouse/accessibility/interactive-element-affordance/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "logical-tab-order": {
-      "id": "logical-tab-order",
-      "title": "The page has a logical tab order",
-      "description": "Tabbing through the page follows the visual layout. Users cannot focus elements that are offscreen. [Learn more about logical tab ordering](https://developer.chrome.com/docs/lighthouse/accessibility/logical-tab-order/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "managed-focus": {
-      "id": "managed-focus",
-      "title": "The user's focus is directed to new content added to the page",
-      "description": "If new content, such as a dialog, is added to the page, the user's focus is directed to it. [Learn how to direct focus to new content](https://developer.chrome.com/docs/lighthouse/accessibility/managed-focus/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "offscreen-content-hidden": {
-      "id": "offscreen-content-hidden",
-      "title": "Offscreen content is hidden from assistive technology",
-      "description": "Offscreen content is hidden with display: none or aria-hidden=true. [Learn how to properly hide offscreen content](https://developer.chrome.com/docs/lighthouse/accessibility/offscreen-content-hidden/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "use-landmarks": {
-      "id": "use-landmarks",
-      "title": "HTML5 landmark elements are used to improve navigation",
-      "description": "Landmark elements (`<main>`, `<nav>`, etc.) are used to improve the keyboard navigation of the page for assistive technology. [Learn more about landmark elements](https://developer.chrome.com/docs/lighthouse/accessibility/use-landmarks/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "visual-order-follows-dom": {
-      "id": "visual-order-follows-dom",
-      "title": "Visual order on the page follows DOM order",
-      "description": "DOM order matches the visual order, improving navigation for assistive technology. [Learn more about DOM and visual ordering](https://developer.chrome.com/docs/lighthouse/accessibility/visual-order-follows-dom/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "total-byte-weight": {
-      "id": "total-byte-weight",
-      "title": "Avoids enormous network payloads",
-      "description": "Large network payloads cost users real money and are highly correlated with long load times. [Learn how to reduce payload sizes](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 1
-    },
-    "unminified-css": {
-      "id": "unminified-css",
-      "title": "Minify CSS",
-      "description": "Minifying CSS files can reduce network payload sizes. [Learn how to minify CSS](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "unminified-javascript": {
-      "id": "unminified-javascript",
-      "title": "Minify JavaScript",
-      "description": "Minifying JavaScript files can reduce payload sizes and script parse time. [Learn how to minify JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unminified-javascript/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "unused-css-rules": {
-      "id": "unused-css-rules",
-      "title": "Reduce unused CSS",
-      "description": "Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. [Learn how to reduce unused CSS](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 1
-    },
-    "unused-javascript": {
-      "id": "unused-javascript",
-      "title": "Reduce unused JavaScript",
-      "description": "Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. [Learn how to reduce unused JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unused-javascript/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 1
-    },
-    "doctype": {
-      "id": "doctype",
-      "title": "Page has the HTML doctype",
-      "description": "Specifying a doctype prevents the browser from switching to quirks-mode. [Learn more about the doctype declaration](https://developer.chrome.com/docs/lighthouse/best-practices/doctype/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "charset": {
-      "id": "charset",
-      "title": "Properly defines charset",
-      "description": "A character encoding declaration is required. It can be done with a `<meta>` tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. [Learn more about declaring the character encoding](https://developer.chrome.com/docs/lighthouse/best-practices/charset/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "geolocation-on-start": {
-      "id": "geolocation-on-start",
-      "title": "Avoids requesting the geolocation permission on page load",
-      "description": "Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to a user action instead. [Learn more about the geolocation permission](https://developer.chrome.com/docs/lighthouse/best-practices/geolocation-on-start/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "inspector-issues": {
-      "id": "inspector-issues",
-      "title": "No issues in the `Issues` panel in Chrome Devtools",
-      "description": "Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser concerns. Open up the Issues panel in Chrome DevTools for more details on each issue.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "js-libraries": {
-      "id": "js-libraries",
-      "title": "Detected JavaScript libraries",
-      "description": "All front-end JavaScript libraries detected on the page. [Learn more about this JavaScript library detection diagnostic audit](https://developer.chrome.com/docs/lighthouse/best-practices/js-libraries/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "notification-on-start": {
-      "id": "notification-on-start",
-      "title": "Avoids requesting the notification permission on page load",
-      "description": "Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. [Learn more about responsibly getting permission for notifications](https://developer.chrome.com/docs/lighthouse/best-practices/notification-on-start/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "paste-preventing-inputs": {
-      "id": "paste-preventing-inputs",
-      "title": "Allows users to paste into input fields",
-      "description": "Preventing input pasting is a bad practice for the UX, and weakens security by blocking password managers.[Learn more about user-friendly input fields](https://developer.chrome.com/docs/lighthouse/best-practices/paste-preventing-inputs/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "meta-description": {
-      "id": "meta-description",
-      "title": "Document has a meta description",
-      "description": "Meta descriptions may be included in search results to concisely summarize page content. [Learn more about the meta description](https://developer.chrome.com/docs/lighthouse/seo/meta-description/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "http-status-code": {
-      "id": "http-status-code",
-      "title": "Page has successful HTTP status code",
-      "description": "Pages with unsuccessful HTTP status codes may not be indexed properly. [Learn more about HTTP status codes](https://developer.chrome.com/docs/lighthouse/seo/http-status-code/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "link-text": {
-      "id": "link-text",
-      "title": "Links have descriptive text",
-      "description": "Descriptive link text helps search engines understand your content. [Learn how to make links more accessible](https://developer.chrome.com/docs/lighthouse/seo/link-text/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "crawlable-anchors": {
-      "id": "crawlable-anchors",
-      "title": "Links are crawlable",
-      "description": "Search engines may use `href` attributes on links to crawl websites. Ensure that the `href` attribute of anchor elements links to an appropriate destination, so more pages of the site can be discovered. [Learn how to make links crawlable](https://support.google.com/webmasters/answer/9112205)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "is-crawlable": {
-      "id": "is-crawlable",
-      "title": "Page isn’t blocked from indexing",
-      "description": "Search engines are unable to include your pages in search results if they don't have permission to crawl them. [Learn more about crawler directives](https://developer.chrome.com/docs/lighthouse/seo/is-crawlable/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "robots-txt": {
-      "id": "robots-txt",
-      "title": "robots.txt is valid",
-      "description": "If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed. [Learn more about robots.txt](https://developer.chrome.com/docs/lighthouse/seo/invalid-robots-txt/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "hreflang": {
-      "id": "hreflang",
-      "title": "Document has a valid `hreflang`",
-      "description": "hreflang links tell search engines what version of a page they should list in search results for a given language or region. [Learn more about `hreflang`](https://developer.chrome.com/docs/lighthouse/seo/hreflang/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "canonical": {
-      "id": "canonical",
-      "title": "Document has a valid `rel=canonical`",
-      "description": "Canonical links suggest which URL to show in search results. [Learn more about canonical links](https://developer.chrome.com/docs/lighthouse/seo/canonical/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "structured-data": {
-      "id": "structured-data",
-      "title": "Structured data is valid",
-      "description": "Run the [Structured Data Testing Tool](https://developers.google.com/search/docs/appearance/structured-data/) to validate structured data. [Learn more about Structured Data](https://developer.chrome.com/docs/lighthouse/seo/structured-data/).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)"
-    },
-    "bf-cache": {
-      "id": "bf-cache",
-      "title": "Page didn't prevent back/forward cache restoration",
-      "description": "Many navigations are performed by going back to a previous page, or forwards again. The back/forward cache (bfcache) can speed up these return navigations. [Learn more about the bfcache](https://developer.chrome.com/docs/lighthouse/performance/bf-cache/)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 4
-    },
-    "cache-insight": {
-      "id": "cache-insight",
-      "title": "Use efficient cache lifetimes",
-      "description": "A long cache lifetime can speed up repeat visits to your page. [Learn more about caching](https://developer.chrome.com/docs/performance/insights/cache).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "cls-culprits-insight": {
-      "id": "cls-culprits-insight",
-      "title": "Layout shift culprits",
-      "description": "Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://developer.chrome.com/docs/performance/insights/cls-culprit), such as elements being added, removed, or their fonts changing as the page loads.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "document-latency-insight": {
-      "id": "document-latency-insight",
-      "title": "Document request latency",
-      "description": "Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-latency) by avoiding redirects, ensuring a fast server response, and enabling text compression.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "dom-size-insight": {
-      "id": "dom-size-insight",
-      "title": "Optimize DOM size",
-      "description": "A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/performance/insights/dom-size).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "duplicated-javascript-insight": {
-      "id": "duplicated-javascript-insight",
-      "title": "Duplicated JavaScript",
-      "description": "Remove large, [duplicate JavaScript modules](https://developer.chrome.com/docs/performance/insights/duplicated-javascript) from bundles to reduce unnecessary bytes consumed by network activity.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 2
-    },
-    "font-display-insight": {
-      "id": "font-display-insight",
-      "title": "Font display",
-      "description": "Consider setting [font-display](https://developer.chrome.com/docs/performance/insights/font-display) to swap or optional to ensure text is consistently visible. swap can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "forced-reflow-insight": {
-      "id": "forced-reflow-insight",
-      "title": "Forced reflow",
-      "description": "A forced reflow occurs when JavaScript queries geometric properties (such as offsetWidth) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developer.chrome.com/docs/performance/insights/forced-reflow) and possible mitigations.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "image-delivery-insight": {
-      "id": "image-delivery-insight",
-      "title": "Improve image delivery",
-      "description": "Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/performance/insights/image-delivery)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "inp-breakdown-insight": {
-      "id": "inp-breakdown-insight",
-      "title": "INP breakdown",
-      "description": "Start investigating [how to improve INP](https://developer.chrome.com/docs/performance/insights/inp-breakdown) by looking at the longest subpart.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "lcp-breakdown-insight": {
-      "id": "lcp-breakdown-insight",
-      "title": "LCP breakdown",
-      "description": "Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "lcp-discovery-insight": {
-      "id": "lcp-discovery-insight",
-      "title": "LCP request discovery",
-      "description": "[Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "legacy-javascript-insight": {
-      "id": "legacy-javascript-insight",
-      "title": "Legacy JavaScript",
-      "description": "Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://developer.chrome.com/docs/performance/insights/legacy-javascript)",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 2
-    },
-    "modern-http-insight": {
-      "id": "modern-http-insight",
-      "title": "Modern HTTP",
-      "description": "HTTP/2 and HTTP/3 offer many benefits over HTTP/1.1, such as multiplexing. [Learn more about using modern HTTP](https://developer.chrome.com/docs/performance/insights/modern-http).",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "network-dependency-tree-insight": {
-      "id": "network-dependency-tree-insight",
-      "title": "Network dependency tree",
-      "description": "[Avoid chaining critical requests](https://developer.chrome.com/docs/performance/insights/network-dependency-tree) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 1
-    },
-    "render-blocking-insight": {
-      "id": "render-blocking-insight",
-      "title": "Render blocking requests",
-      "description": "Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://developer.chrome.com/docs/performance/insights/render-blocking) can move these network requests out of the critical path.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "third-parties-insight": {
-      "id": "third-parties-insight",
-      "title": "3rd parties",
-      "description": "3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page's content.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    },
-    "viewport-insight": {
-      "id": "viewport-insight",
-      "title": "Optimize viewport for mobile",
-      "description": "Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport is not optimized for mobile.",
-      "score": null,
-      "scoreDisplayMode": "error",
-      "errorMessage": "The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)",
-      "errorStack": "LighthouseError: NO_FCP\n    at Timeout.<anonymous> (file:///Users/azlife.eth/Tools/app/node_modules/.pnpm/lighthouse@13.0.1/node_modules/lighthouse/core/gather/driver/wait-for-condition.js:85:14)\n    at listOnTimeout (node:internal/timers:608:17)\n    at process.processTimers (node:internal/timers:543:7)",
-      "guidanceLevel": 3
-    }
-  },
-  "configSettings": {
-    "output": [
-      "json"
-    ],
-    "maxWaitForFcp": 30000,
-    "maxWaitForLoad": 45000,
-    "pauseAfterFcpMs": 1000,
-    "pauseAfterLoadMs": 1000,
-    "networkQuietThresholdMs": 1000,
-    "cpuQuietThresholdMs": 1000,
-    "formFactor": "mobile",
-    "throttling": {
-      "rttMs": 150,
-      "throughputKbps": 1638.4,
-      "requestLatencyMs": 562.5,
-      "downloadThroughputKbps": 1474.5600000000002,
-      "uploadThroughputKbps": 675,
-      "cpuSlowdownMultiplier": 4
-    },
-    "throttlingMethod": "simulate",
-    "screenEmulation": {
-      "mobile": true,
-      "width": 412,
-      "height": 823,
-      "deviceScaleFactor": 1.75,
-      "disabled": false
-    },
-    "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Mobile Safari/537.36",
-    "auditMode": false,
-    "gatherMode": false,
-    "clearStorageTypes": [
-      "file_systems",
-      "shader_cache",
-      "service_workers",
-      "cache_storage"
-    ],
-    "disableStorageReset": false,
-    "debugNavigation": false,
-    "channel": "cli",
-    "usePassiveGathering": false,
-    "disableFullPageScreenshot": false,
-    "skipAboutBlank": false,
-    "blankPage": "about:blank",
-    "ignoreStatusCode": false,
-    "locale": "en-US",
-    "blockedUrlPatterns": null,
-    "additionalTraceCategories": null,
-    "extraHeaders": null,
-    "precomputedLanternData": null,
-    "onlyAudits": null,
-    "onlyCategories": [
-      "performance",
-      "accessibility",
-      "best-practices",
-      "seo"
-    ],
-    "skipAudits": null
-  },
-  "categories": {
-    "performance": {
-      "title": "Performance",
-      "supportedModes": [
-        "navigation",
-        "timespan",
-        "snapshot"
-      ],
-      "auditRefs": [
-        {
-          "id": "first-contentful-paint",
-          "weight": 10,
-          "group": "metrics",
-          "acronym": "FCP"
-        },
-        {
-          "id": "largest-contentful-paint",
-          "weight": 25,
-          "group": "metrics",
-          "acronym": "LCP"
-        },
-        {
-          "id": "total-blocking-time",
-          "weight": 30,
-          "group": "metrics",
-          "acronym": "TBT"
-        },
-        {
-          "id": "cumulative-layout-shift",
-          "weight": 25,
-          "group": "metrics",
-          "acronym": "CLS"
-        },
-        {
-          "id": "speed-index",
-          "weight": 10,
-          "group": "metrics",
-          "acronym": "SI"
-        },
-        {
-          "id": "cache-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "cls-culprits-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "document-latency-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "dom-size-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "duplicated-javascript-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "font-display-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "forced-reflow-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "image-delivery-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "inp-breakdown-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "lcp-breakdown-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "lcp-discovery-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "legacy-javascript-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "modern-http-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "network-dependency-tree-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "render-blocking-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "third-parties-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "viewport-insight",
-          "weight": 0,
-          "group": "insights"
-        },
-        {
-          "id": "interactive",
-          "weight": 0,
-          "group": "hidden",
-          "acronym": "TTI"
-        },
-        {
-          "id": "max-potential-fid",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "unminified-css",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "unminified-javascript",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "unused-css-rules",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "unused-javascript",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "total-byte-weight",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "user-timings",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "bootup-time",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "mainthread-work-breakdown",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "long-tasks",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "non-composited-animations",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "unsized-images",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "bf-cache",
-          "weight": 0,
-          "group": "diagnostics"
-        },
-        {
-          "id": "network-requests",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "network-rtt",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "network-server-latency",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "main-thread-tasks",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "diagnostics",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "metrics",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "screenshot-thumbnails",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "final-screenshot",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "script-treemap-data",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "resource-summary",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "redirects",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "server-response-time",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "layout-shifts",
-          "weight": 0,
-          "group": "hidden"
-        }
-      ],
-      "id": "performance",
-      "score": null
-    },
-    "accessibility": {
-      "title": "Accessibility",
-      "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://web.dev/articles/how-to-review) is also encouraged.",
-      "manualDescription": "These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://web.dev/articles/how-to-review).",
-      "supportedModes": [
-        "navigation",
-        "snapshot"
-      ],
-      "auditRefs": [
-        {
-          "id": "accesskeys",
-          "weight": 7,
-          "group": "a11y-navigation"
-        },
-        {
-          "id": "aria-allowed-attr",
-          "weight": 10,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-command-name",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-conditional-attr",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-deprecated-role",
-          "weight": 1,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-dialog-name",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-hidden-body",
-          "weight": 10,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-hidden-focus",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-input-field-name",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-meter-name",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-progressbar-name",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-prohibited-attr",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-required-attr",
-          "weight": 10,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-required-children",
-          "weight": 10,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-required-parent",
-          "weight": 10,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-roles",
-          "weight": 10,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-text",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-toggle-field-name",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-tooltip-name",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-treeitem-name",
-          "weight": 7,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-valid-attr-value",
-          "weight": 10,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "aria-valid-attr",
-          "weight": 10,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "button-name",
-          "weight": 10,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "bypass",
-          "weight": 7,
-          "group": "a11y-navigation"
-        },
-        {
-          "id": "color-contrast",
-          "weight": 7,
-          "group": "a11y-color-contrast"
-        },
-        {
-          "id": "definition-list",
-          "weight": 7,
-          "group": "a11y-tables-lists"
-        },
-        {
-          "id": "dlitem",
-          "weight": 7,
-          "group": "a11y-tables-lists"
-        },
-        {
-          "id": "document-title",
-          "weight": 7,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "duplicate-id-aria",
-          "weight": 10,
-          "group": "a11y-aria"
-        },
-        {
-          "id": "form-field-multiple-labels",
-          "weight": 3,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "frame-title",
-          "weight": 7,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "heading-order",
-          "weight": 3,
-          "group": "a11y-navigation"
-        },
-        {
-          "id": "html-has-lang",
-          "weight": 7,
-          "group": "a11y-language"
-        },
-        {
-          "id": "html-lang-valid",
-          "weight": 7,
-          "group": "a11y-language"
-        },
-        {
-          "id": "html-xml-lang-mismatch",
-          "weight": 3,
-          "group": "a11y-language"
-        },
-        {
-          "id": "image-alt",
-          "weight": 10,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "input-button-name",
-          "weight": 10,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "input-image-alt",
-          "weight": 10,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "label",
-          "weight": 10,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "link-in-text-block",
-          "weight": 7,
-          "group": "a11y-color-contrast"
-        },
-        {
-          "id": "link-name",
-          "weight": 7,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "list",
-          "weight": 7,
-          "group": "a11y-tables-lists"
-        },
-        {
-          "id": "listitem",
-          "weight": 7,
-          "group": "a11y-tables-lists"
-        },
-        {
-          "id": "meta-refresh",
-          "weight": 10,
-          "group": "a11y-best-practices"
-        },
-        {
-          "id": "meta-viewport",
-          "weight": 10,
-          "group": "a11y-best-practices"
-        },
-        {
-          "id": "object-alt",
-          "weight": 7,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "select-name",
-          "weight": 10,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "skip-link",
-          "weight": 3,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "tabindex",
-          "weight": 7,
-          "group": "a11y-navigation"
-        },
-        {
-          "id": "target-size",
-          "weight": 7,
-          "group": "a11y-best-practices"
-        },
-        {
-          "id": "td-headers-attr",
-          "weight": 7,
-          "group": "a11y-tables-lists"
-        },
-        {
-          "id": "th-has-data-cells",
-          "weight": 7,
-          "group": "a11y-tables-lists"
-        },
-        {
-          "id": "valid-lang",
-          "weight": 7,
-          "group": "a11y-language"
-        },
-        {
-          "id": "video-caption",
-          "weight": 10,
-          "group": "a11y-audio-video"
-        },
-        {
-          "id": "landmark-one-main",
-          "weight": 3,
-          "group": "a11y-best-practices"
-        },
-        {
-          "id": "focusable-controls",
-          "weight": 0
-        },
-        {
-          "id": "interactive-element-affordance",
-          "weight": 0
-        },
-        {
-          "id": "logical-tab-order",
-          "weight": 0
-        },
-        {
-          "id": "visual-order-follows-dom",
-          "weight": 0
-        },
-        {
-          "id": "focus-traps",
-          "weight": 0
-        },
-        {
-          "id": "managed-focus",
-          "weight": 0
-        },
-        {
-          "id": "use-landmarks",
-          "weight": 0
-        },
-        {
-          "id": "offscreen-content-hidden",
-          "weight": 0
-        },
-        {
-          "id": "custom-controls-labels",
-          "weight": 0
-        },
-        {
-          "id": "custom-controls-roles",
-          "weight": 0
-        },
-        {
-          "id": "table-duplicate-name",
-          "weight": 0,
-          "group": "a11y-best-practices"
-        },
-        {
-          "id": "empty-heading",
-          "weight": 0,
-          "group": "a11y-best-practices"
-        },
-        {
-          "id": "aria-allowed-role",
-          "weight": 0,
-          "group": "a11y-best-practices"
-        },
-        {
-          "id": "image-redundant-alt",
-          "weight": 0,
-          "group": "a11y-names-labels"
-        },
-        {
-          "id": "identical-links-same-purpose",
-          "weight": 0,
-          "group": "a11y-best-practices"
-        },
-        {
-          "id": "label-content-name-mismatch",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "table-fake-caption",
-          "weight": 0,
-          "group": "hidden"
-        },
-        {
-          "id": "td-has-header",
-          "weight": 0,
-          "group": "hidden"
-        }
-      ],
-      "id": "accessibility",
-      "score": null
-    },
-    "best-practices": {
-      "title": "Best Practices",
-      "supportedModes": [
-        "navigation",
-        "timespan",
-        "snapshot"
-      ],
-      "auditRefs": [
-        {
-          "id": "is-on-https",
-          "weight": 5,
-          "group": "best-practices-trust-safety"
-        },
-        {
-          "id": "redirects-http",
-          "weight": 1,
-          "group": "best-practices-trust-safety"
-        },
-        {
-          "id": "geolocation-on-start",
-          "weight": 1,
-          "group": "best-practices-trust-safety"
-        },
-        {
-          "id": "notification-on-start",
-          "weight": 1,
-          "group": "best-practices-trust-safety"
-        },
-        {
-          "id": "csp-xss",
-          "weight": 0,
-          "group": "best-practices-trust-safety"
-        },
-        {
-          "id": "has-hsts",
-          "weight": 0,
-          "group": "best-practices-trust-safety"
-        },
-        {
-          "id": "origin-isolation",
-          "weight": 0,
-          "group": "best-practices-trust-safety"
-        },
-        {
-          "id": "clickjacking-mitigation",
-          "weight": 0,
-          "group": "best-practices-trust-safety"
-        },
-        {
-          "id": "trusted-types-xss",
-          "weight": 0,
-          "group": "best-practices-trust-safety"
-        },
-        {
-          "id": "paste-preventing-inputs",
-          "weight": 3,
-          "group": "best-practices-ux"
-        },
-        {
-          "id": "image-aspect-ratio",
-          "weight": 1,
-          "group": "best-practices-ux"
-        },
-        {
-          "id": "image-size-responsive",
-          "weight": 1,
-          "group": "best-practices-ux"
-        },
-        {
-          "id": "doctype",
-          "weight": 1,
-          "group": "best-practices-browser-compat"
-        },
-        {
-          "id": "charset",
-          "weight": 1,
-          "group": "best-practices-browser-compat"
-        },
-        {
-          "id": "js-libraries",
-          "weight": 0,
-          "group": "best-practices-general"
-        },
-        {
-          "id": "deprecations",
-          "weight": 5,
-          "group": "best-practices-general"
-        },
-        {
-          "id": "third-party-cookies",
-          "weight": 5,
-          "group": "best-practices-general"
-        },
-        {
-          "id": "errors-in-console",
-          "weight": 1,
-          "group": "best-practices-general"
-        },
-        {
-          "id": "valid-source-maps",
-          "weight": 0,
-          "group": "best-practices-general"
-        },
-        {
-          "id": "inspector-issues",
-          "weight": 1,
-          "group": "best-practices-general"
-        }
-      ],
-      "id": "best-practices",
-      "score": null
-    },
-    "seo": {
-      "title": "SEO",
-      "description": "These checks ensure that your page is following basic search engine optimization advice. There are many additional factors Lighthouse does not score here that may affect your search ranking, including performance on [Core Web Vitals](https://web.dev/explore/vitals). [Learn more about Google Search Essentials](https://support.google.com/webmasters/answer/35769).",
-      "manualDescription": "Run these additional validators on your site to check additional SEO best practices.",
-      "supportedModes": [
-        "navigation",
-        "snapshot"
-      ],
-      "auditRefs": [
-        {
-          "id": "is-crawlable",
-          "weight": 4.043478260869565,
-          "group": "seo-crawl"
-        },
-        {
-          "id": "document-title",
-          "weight": 1,
-          "group": "seo-content"
-        },
-        {
-          "id": "meta-description",
-          "weight": 1,
-          "group": "seo-content"
-        },
-        {
-          "id": "http-status-code",
-          "weight": 1,
-          "group": "seo-crawl"
-        },
-        {
-          "id": "link-text",
-          "weight": 1,
-          "group": "seo-content"
-        },
-        {
-          "id": "crawlable-anchors",
-          "weight": 1,
-          "group": "seo-crawl"
-        },
-        {
-          "id": "robots-txt",
-          "weight": 1,
-          "group": "seo-crawl"
-        },
-        {
-          "id": "image-alt",
-          "weight": 1,
-          "group": "seo-content"
-        },
-        {
-          "id": "hreflang",
-          "weight": 1,
-          "group": "seo-content"
-        },
-        {
-          "id": "canonical",
-          "weight": 1,
-          "group": "seo-content"
-        },
-        {
-          "id": "structured-data",
-          "weight": 0
-        }
-      ],
-      "id": "seo",
-      "score": null
-    }
-  },
-  "categoryGroups": {
-    "metrics": {
-      "title": "Metrics"
-    },
-    "insights": {
-      "title": "Insights",
-      "description": "These insights are also available in the Chrome DevTools Performance Panel - [record a trace](https://developer.chrome.com/docs/devtools/performance/reference) to view more detailed information."
-    },
-    "diagnostics": {
-      "title": "Diagnostics",
-      "description": "More information about the performance of your application. These numbers don't [directly affect](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) the Performance score."
-    },
-    "a11y-best-practices": {
-      "title": "Best practices",
-      "description": "These items highlight common accessibility best practices."
-    },
-    "a11y-color-contrast": {
-      "title": "Contrast",
-      "description": "These are opportunities to improve the legibility of your content."
-    },
-    "a11y-names-labels": {
-      "title": "Names and labels",
-      "description": "These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader."
-    },
-    "a11y-navigation": {
-      "title": "Navigation",
-      "description": "These are opportunities to improve keyboard navigation in your application."
-    },
-    "a11y-aria": {
-      "title": "ARIA",
-      "description": "These are opportunities to improve the usage of ARIA in your application which may enhance the experience for users of assistive technology, like a screen reader."
-    },
-    "a11y-language": {
-      "title": "Internationalization and localization",
-      "description": "These are opportunities to improve the interpretation of your content by users in different locales."
-    },
-    "a11y-audio-video": {
-      "title": "Audio and video",
-      "description": "These are opportunities to provide alternative content for audio and video. This may improve the experience for users with hearing or vision impairments."
-    },
-    "a11y-tables-lists": {
-      "title": "Tables and lists",
-      "description": "These are opportunities to improve the experience of reading tabular or list data using assistive technology, like a screen reader."
-    },
-    "seo-mobile": {
-      "title": "Mobile Friendly",
-      "description": "Make sure your pages are mobile friendly so users don’t have to pinch or zoom in order to read the content pages. [Learn how to make pages mobile-friendly](https://developers.google.com/search/mobile-sites/)."
-    },
-    "seo-content": {
-      "title": "Content Best Practices",
-      "description": "Format your HTML in a way that enables crawlers to better understand your app’s content."
-    },
-    "seo-crawl": {
-      "title": "Crawling and Indexing",
-      "description": "To appear in search results, crawlers need access to your app."
-    },
-    "best-practices-trust-safety": {
-      "title": "Trust and Safety"
-    },
-    "best-practices-ux": {
-      "title": "User Experience"
-    },
-    "best-practices-browser-compat": {
-      "title": "Browser Compatibility"
-    },
-    "best-practices-general": {
-      "title": "General"
-    },
-    "hidden": {
-      "title": ""
-    }
-  },
-  "stackPacks": [],
-  "timing": {
-    "entries": [
-      {
-        "startTime": 1707.75,
-        "name": "lh:config",
-        "duration": 509.94,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 1710.87,
-        "name": "lh:config:resolveArtifactsToDefns",
-        "duration": 148.01,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 2217.86,
-        "name": "lh:runner:gather",
-        "duration": 33297.01,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 2375.39,
-        "name": "lh:driver:connect",
-        "duration": 8.49,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 2384.1,
-        "name": "lh:driver:navigate",
-        "duration": 70.76,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 2455.08,
-        "name": "lh:gather:getBenchmarkIndex",
-        "duration": 1002.73,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 3457.91,
-        "name": "lh:gather:getVersion",
-        "duration": 0.58,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 3458.54,
-        "name": "lh:gather:getDevicePixelRatio",
-        "duration": 0.69,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 3459.33,
-        "name": "lh:prepare:navigationMode",
-        "duration": 956.04,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 3459.83,
-        "name": "lh:gather:getVersion",
-        "duration": 0.31,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 3469.8,
-        "name": "lh:storage:clearDataForOrigin",
-        "duration": 22.66,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 3492.67,
-        "name": "lh:storage:clearBrowserCaches",
-        "duration": 917.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 4413.91,
-        "name": "lh:gather:prepareThrottlingAndNetwork",
-        "duration": 1.41,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35503.85,
-        "name": "lh:computed:NetworkRecords",
-        "duration": 0.46,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35515.28,
-        "name": "lh:runner:audit",
-        "duration": 101,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35515.39,
-        "name": "lh:runner:auditing",
-        "duration": 100.59,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35516.32,
-        "name": "lh:audit:is-on-https",
-        "duration": 0.7,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35517.17,
-        "name": "lh:audit:redirects-http",
-        "duration": 0.29,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35517.64,
-        "name": "lh:audit:first-contentful-paint",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35517.97,
-        "name": "lh:audit:largest-contentful-paint",
-        "duration": 0.78,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35518.89,
-        "name": "lh:audit:speed-index",
-        "duration": 0.33,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35519.23,
-        "name": "lh:audit:screenshot-thumbnails",
-        "duration": 0.04,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35519.27,
-        "name": "lh:audit:final-screenshot",
-        "duration": 0.03,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35519.4,
-        "name": "lh:audit:total-blocking-time",
-        "duration": 0.28,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35519.81,
-        "name": "lh:audit:max-potential-fid",
-        "duration": 0.34,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35520.31,
-        "name": "lh:audit:cumulative-layout-shift",
-        "duration": 0.28,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35520.74,
-        "name": "lh:audit:errors-in-console",
-        "duration": 4.18,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35525.93,
-        "name": "lh:audit:server-response-time",
-        "duration": 0.68,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35526.73,
-        "name": "lh:audit:interactive",
-        "duration": 0.21,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35527.12,
-        "name": "lh:audit:user-timings",
-        "duration": 0.48,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35527.73,
-        "name": "lh:audit:redirects",
-        "duration": 0.38,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35528.2,
-        "name": "lh:audit:image-aspect-ratio",
-        "duration": 0.49,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35528.89,
-        "name": "lh:audit:image-size-responsive",
-        "duration": 1.3,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35532.22,
-        "name": "lh:audit:deprecations",
-        "duration": 6.59,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35539.16,
-        "name": "lh:audit:third-party-cookies",
-        "duration": 1.41,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35540.69,
-        "name": "lh:audit:mainthread-work-breakdown",
-        "duration": 0.54,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35541.32,
-        "name": "lh:audit:bootup-time",
-        "duration": 1.09,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35542.41,
-        "name": "lh:audit:diagnostics",
-        "duration": 0.06,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35542.48,
-        "name": "lh:audit:network-requests",
-        "duration": 0.02,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35543.54,
-        "name": "lh:audit:network-rtt",
-        "duration": 1.32,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35545.64,
-        "name": "lh:audit:network-server-latency",
-        "duration": 1.21,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35546.87,
-        "name": "lh:audit:main-thread-tasks",
-        "duration": 0.06,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35546.93,
-        "name": "lh:audit:metrics",
-        "duration": 0.02,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35546.96,
-        "name": "lh:audit:resource-summary",
-        "duration": 0.05,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35547.07,
-        "name": "lh:audit:layout-shifts",
-        "duration": 0.2,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35547.34,
-        "name": "lh:audit:long-tasks",
-        "duration": 0.93,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35548.47,
-        "name": "lh:audit:non-composited-animations",
-        "duration": 1.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35550.19,
-        "name": "lh:audit:unsized-images",
-        "duration": 2.18,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35557.09,
-        "name": "lh:audit:valid-source-maps",
-        "duration": 1.61,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35558.91,
-        "name": "lh:audit:csp-xss",
-        "duration": 1.69,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35561.27,
-        "name": "lh:audit:has-hsts",
-        "duration": 0.54,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35561.91,
-        "name": "lh:audit:origin-isolation",
-        "duration": 0.28,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35562.41,
-        "name": "lh:audit:clickjacking-mitigation",
-        "duration": 0.39,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35562.86,
-        "name": "lh:audit:trusted-types-xss",
-        "duration": 0.41,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35563.29,
-        "name": "lh:audit:script-treemap-data",
-        "duration": 0.04,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35563.49,
-        "name": "lh:audit:accesskeys",
-        "duration": 0.36,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35563.98,
-        "name": "lh:audit:aria-allowed-attr",
-        "duration": 0.43,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35564.64,
-        "name": "lh:audit:aria-allowed-role",
-        "duration": 0.44,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35565.27,
-        "name": "lh:audit:aria-command-name",
-        "duration": 0.53,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35566,
-        "name": "lh:audit:aria-conditional-attr",
-        "duration": 0.6,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35566.75,
-        "name": "lh:audit:aria-deprecated-role",
-        "duration": 0.43,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35567.28,
-        "name": "lh:audit:aria-dialog-name",
-        "duration": 0.26,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35567.62,
-        "name": "lh:audit:aria-hidden-body",
-        "duration": 0.26,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35567.98,
-        "name": "lh:audit:aria-hidden-focus",
-        "duration": 0.38,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35568.53,
-        "name": "lh:audit:aria-input-field-name",
-        "duration": 1.71,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35571.1,
-        "name": "lh:audit:aria-meter-name",
-        "duration": 1.2,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35572.4,
-        "name": "lh:audit:aria-progressbar-name",
-        "duration": 0.49,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35573.18,
-        "name": "lh:audit:aria-prohibited-attr",
-        "duration": 2.31,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35576.28,
-        "name": "lh:audit:aria-required-attr",
-        "duration": 2.57,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35579.17,
-        "name": "lh:audit:aria-required-children",
-        "duration": 1.41,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35581.57,
-        "name": "lh:audit:aria-required-parent",
-        "duration": 1.68,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35583.65,
-        "name": "lh:audit:aria-roles",
-        "duration": 0.9,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35584.83,
-        "name": "lh:audit:aria-text",
-        "duration": 1.11,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35586.25,
-        "name": "lh:audit:aria-toggle-field-name",
-        "duration": 0.73,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35587.17,
-        "name": "lh:audit:aria-tooltip-name",
-        "duration": 0.28,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35587.56,
-        "name": "lh:audit:aria-treeitem-name",
-        "duration": 0.37,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35588.11,
-        "name": "lh:audit:aria-valid-attr-value",
-        "duration": 0.41,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35588.62,
-        "name": "lh:audit:aria-valid-attr",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35588.93,
-        "name": "lh:audit:button-name",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35589.26,
-        "name": "lh:audit:bypass",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35589.6,
-        "name": "lh:audit:color-contrast",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35589.91,
-        "name": "lh:audit:definition-list",
-        "duration": 0.31,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35590.31,
-        "name": "lh:audit:dlitem",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35590.64,
-        "name": "lh:audit:document-title",
-        "duration": 0.52,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35591.44,
-        "name": "lh:audit:duplicate-id-aria",
-        "duration": 0.84,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35592.37,
-        "name": "lh:audit:empty-heading",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35592.7,
-        "name": "lh:audit:form-field-multiple-labels",
-        "duration": 0.26,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35593.02,
-        "name": "lh:audit:frame-title",
-        "duration": 0.18,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35593.27,
-        "name": "lh:audit:heading-order",
-        "duration": 0.21,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35593.57,
-        "name": "lh:audit:html-has-lang",
-        "duration": 0.3,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35593.96,
-        "name": "lh:audit:html-lang-valid",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35594.27,
-        "name": "lh:audit:html-xml-lang-mismatch",
-        "duration": 0.28,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35594.63,
-        "name": "lh:audit:identical-links-same-purpose",
-        "duration": 0.41,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35595.13,
-        "name": "lh:audit:image-alt",
-        "duration": 0.31,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35595.53,
-        "name": "lh:audit:image-redundant-alt",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35595.84,
-        "name": "lh:audit:input-button-name",
-        "duration": 0.29,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35596.2,
-        "name": "lh:audit:input-image-alt",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35596.51,
-        "name": "lh:audit:label-content-name-mismatch",
-        "duration": 0.21,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35596.8,
-        "name": "lh:audit:label",
-        "duration": 0.22,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35597.09,
-        "name": "lh:audit:landmark-one-main",
-        "duration": 0.28,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35597.46,
-        "name": "lh:audit:link-name",
-        "duration": 0.27,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35597.81,
-        "name": "lh:audit:link-in-text-block",
-        "duration": 0.28,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35598.2,
-        "name": "lh:audit:list",
-        "duration": 0.26,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35598.54,
-        "name": "lh:audit:listitem",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35598.87,
-        "name": "lh:audit:meta-refresh",
-        "duration": 0.26,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35599.22,
-        "name": "lh:audit:meta-viewport",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35599.56,
-        "name": "lh:audit:object-alt",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35599.93,
-        "name": "lh:audit:select-name",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35600.26,
-        "name": "lh:audit:skip-link",
-        "duration": 0.21,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35600.55,
-        "name": "lh:audit:tabindex",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35600.96,
-        "name": "lh:audit:table-duplicate-name",
-        "duration": 0.29,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35601.34,
-        "name": "lh:audit:table-fake-caption",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35601.71,
-        "name": "lh:audit:target-size",
-        "duration": 0.22,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35602.01,
-        "name": "lh:audit:td-has-header",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35602.34,
-        "name": "lh:audit:td-headers-attr",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35602.68,
-        "name": "lh:audit:th-has-data-cells",
-        "duration": 0.31,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.07,
-        "name": "lh:audit:valid-lang",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.41,
-        "name": "lh:audit:video-caption",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.65,
-        "name": "lh:audit:custom-controls-labels",
-        "duration": 0.02,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.67,
-        "name": "lh:audit:custom-controls-roles",
-        "duration": 0.02,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.69,
-        "name": "lh:audit:focus-traps",
-        "duration": 0.01,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.71,
-        "name": "lh:audit:focusable-controls",
-        "duration": 0.01,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.73,
-        "name": "lh:audit:interactive-element-affordance",
-        "duration": 0.02,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.75,
-        "name": "lh:audit:logical-tab-order",
-        "duration": 0.01,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.77,
-        "name": "lh:audit:managed-focus",
-        "duration": 0.01,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.78,
-        "name": "lh:audit:offscreen-content-hidden",
-        "duration": 0.01,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.8,
-        "name": "lh:audit:use-landmarks",
-        "duration": 0.01,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.82,
-        "name": "lh:audit:visual-order-follows-dom",
-        "duration": 0.01,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35603.92,
-        "name": "lh:audit:total-byte-weight",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35604.22,
-        "name": "lh:audit:unminified-css",
-        "duration": 0.15,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35604.43,
-        "name": "lh:audit:unminified-javascript",
-        "duration": 0.16,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35604.65,
-        "name": "lh:audit:unused-css-rules",
-        "duration": 0.16,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35604.86,
-        "name": "lh:audit:unused-javascript",
-        "duration": 0.16,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35605.11,
-        "name": "lh:audit:doctype",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35605.44,
-        "name": "lh:audit:charset",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35605.76,
-        "name": "lh:audit:geolocation-on-start",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35606.06,
-        "name": "lh:audit:inspector-issues",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35606.35,
-        "name": "lh:audit:js-libraries",
-        "duration": 0.14,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35606.57,
-        "name": "lh:audit:notification-on-start",
-        "duration": 0.24,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35606.88,
-        "name": "lh:audit:paste-preventing-inputs",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35607.21,
-        "name": "lh:audit:meta-description",
-        "duration": 0.2,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35607.48,
-        "name": "lh:audit:http-status-code",
-        "duration": 0.29,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35607.85,
-        "name": "lh:audit:link-text",
-        "duration": 0.2,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35608.13,
-        "name": "lh:audit:crawlable-anchors",
-        "duration": 0.27,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35608.48,
-        "name": "lh:audit:is-crawlable",
-        "duration": 0.21,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35608.77,
-        "name": "lh:audit:robots-txt",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35609.09,
-        "name": "lh:audit:hreflang",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35609.41,
-        "name": "lh:audit:canonical",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35609.71,
-        "name": "lh:audit:structured-data",
-        "duration": 0.19,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35610,
-        "name": "lh:audit:bf-cache",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35610.31,
-        "name": "lh:audit:cache-insight",
-        "duration": 0.34,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35610.73,
-        "name": "lh:audit:cls-culprits-insight",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35611.06,
-        "name": "lh:audit:document-latency-insight",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35611.46,
-        "name": "lh:audit:dom-size-insight",
-        "duration": 0.5,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35612.18,
-        "name": "lh:audit:duplicated-javascript-insight",
-        "duration": 0.25,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35612.52,
-        "name": "lh:audit:font-display-insight",
-        "duration": 0.22,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35612.82,
-        "name": "lh:audit:forced-reflow-insight",
-        "duration": 0.22,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35613.13,
-        "name": "lh:audit:image-delivery-insight",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35613.43,
-        "name": "lh:audit:inp-breakdown-insight",
-        "duration": 0.23,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35613.74,
-        "name": "lh:audit:lcp-breakdown-insight",
-        "duration": 0.26,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35614.07,
-        "name": "lh:audit:lcp-discovery-insight",
-        "duration": 0.18,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35614.33,
-        "name": "lh:audit:legacy-javascript-insight",
-        "duration": 0.21,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35614.61,
-        "name": "lh:audit:modern-http-insight",
-        "duration": 0.18,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35614.86,
-        "name": "lh:audit:network-dependency-tree-insight",
-        "duration": 0.19,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35615.14,
-        "name": "lh:audit:render-blocking-insight",
-        "duration": 0.29,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35615.5,
-        "name": "lh:audit:third-parties-insight",
-        "duration": 0.2,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35615.78,
-        "name": "lh:audit:viewport-insight",
-        "duration": 0.19,
-        "entryType": "measure"
-      },
-      {
-        "startTime": 35615.99,
-        "name": "lh:runner:generate",
-        "duration": 0.29,
-        "entryType": "measure"
-      }
-    ],
-    "total": 33398.01
-  },
-  "i18n": {
-    "rendererFormattedStrings": {
-      "calculatorLink": "See calculator.",
-      "collapseView": "Collapse view",
-      "crcInitialNavigation": "Initial Navigation",
-      "crcLongestDurationLabel": "Maximum critical path latency:",
-      "dropdownCopyJSON": "Copy JSON",
-      "dropdownDarkTheme": "Toggle Dark Theme",
-      "dropdownPrintExpanded": "Print Expanded",
-      "dropdownPrintSummary": "Print Summary",
-      "dropdownSaveGist": "Save as Gist",
-      "dropdownSaveHTML": "Save as HTML",
-      "dropdownSaveJSON": "Save as JSON",
-      "dropdownViewUnthrottledTrace": "View Unthrottled Trace",
-      "dropdownViewer": "Open in Viewer",
-      "errorLabel": "Error!",
-      "errorMissingAuditInfo": "Report error: no audit information",
-      "expandView": "Expand view",
-      "firstPartyChipLabel": "1st party",
-      "footerIssue": "File an issue",
-      "hide": "Hide",
-      "labDataTitle": "Lab Data",
-      "lsPerformanceCategoryDescription": "[Lighthouse](https://developers.google.com/web/tools/lighthouse/) analysis of the current page on an emulated mobile network. Values are estimated and may vary.",
-      "manualAuditsGroupTitle": "Additional items to manually check",
-      "notApplicableAuditsGroupTitle": "Not applicable",
-      "openInANewTabTooltip": "Open in a new tab",
-      "opportunityResourceColumnLabel": "Opportunity",
-      "opportunitySavingsColumnLabel": "Estimated Savings",
-      "passedAuditsGroupTitle": "Passed audits",
-      "runtimeAnalysisWindow": "Initial page load",
-      "runtimeAnalysisWindowSnapshot": "Point-in-time snapshot",
-      "runtimeAnalysisWindowTimespan": "User interactions timespan",
-      "runtimeCustom": "Custom throttling",
-      "runtimeDesktopEmulation": "Emulated Desktop",
-      "runtimeMobileEmulation": "Emulated Moto G Power",
-      "runtimeNoEmulation": "No emulation",
-      "runtimeSettingsAxeVersion": "Axe version",
-      "runtimeSettingsBenchmark": "Unthrottled CPU/Memory Power",
-      "runtimeSettingsCPUThrottling": "CPU throttling",
-      "runtimeSettingsDevice": "Device",
-      "runtimeSettingsNetworkThrottling": "Network throttling",
-      "runtimeSettingsScreenEmulation": "Screen emulation",
-      "runtimeSettingsUANetwork": "User agent (network)",
-      "runtimeSingleLoad": "Single page session",
-      "runtimeSingleLoadTooltip": "This data is taken from a single page session, as opposed to field data summarizing many sessions.",
-      "runtimeSlow4g": "Slow 4G throttling",
-      "runtimeUnknown": "Unknown",
-      "show": "Show",
-      "showRelevantAudits": "Show audits relevant to:",
-      "snippetCollapseButtonLabel": "Collapse snippet",
-      "snippetExpandButtonLabel": "Expand snippet",
-      "thirdPartyResourcesLabel": "Show 3rd-party resources",
-      "throttlingProvided": "Provided by environment",
-      "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:",
-      "unattributable": "Unattributable",
-      "unscoredLabel": "Unscored",
-      "unscoredTitle": "This audit does not contribute to the overall category score.",
-      "varianceDisclaimer": "Values are estimated and may vary. The [performance score is calculated](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) directly from these metrics.",
-      "viewTraceLabel": "View Trace",
-      "viewTreemapLabel": "View Treemap",
-      "warningAuditsGroupTitle": "Passed audits but with warnings",
-      "warningHeader": "Warnings: "
-    },
-    "icuMessagePaths": {
-      "core/lib/lh-error.js | noFcp": [
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "runtimeError.message"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "runWarnings[0]"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[is-on-https].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[redirects-http].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[first-contentful-paint].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[largest-contentful-paint].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[speed-index].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[screenshot-thumbnails].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[final-screenshot].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[total-blocking-time].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[max-potential-fid].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[cumulative-layout-shift].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[errors-in-console].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[server-response-time].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.interactive.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[user-timings].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.redirects.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[image-aspect-ratio].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[image-size-responsive].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.deprecations.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[third-party-cookies].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[mainthread-work-breakdown].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[bootup-time].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.diagnostics.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[network-requests].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[network-rtt].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[network-server-latency].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[main-thread-tasks].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.metrics.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[resource-summary].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[layout-shifts].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[long-tasks].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[non-composited-animations].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[unsized-images].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[valid-source-maps].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[csp-xss].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[has-hsts].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[origin-isolation].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[clickjacking-mitigation].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[trusted-types-xss].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[script-treemap-data].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.accesskeys.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-allowed-attr].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-allowed-role].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-command-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-conditional-attr].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-deprecated-role].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-dialog-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-hidden-body].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-hidden-focus].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-input-field-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-meter-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-progressbar-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-prohibited-attr].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-required-attr].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-required-children].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-required-parent].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-roles].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-text].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-toggle-field-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-tooltip-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-treeitem-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-valid-attr-value].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[aria-valid-attr].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[button-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.bypass.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[color-contrast].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[definition-list].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.dlitem.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[document-title].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[duplicate-id-aria].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[empty-heading].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[form-field-multiple-labels].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[frame-title].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[heading-order].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[html-has-lang].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[html-lang-valid].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[html-xml-lang-mismatch].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[identical-links-same-purpose].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[image-alt].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[image-redundant-alt].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[input-button-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[input-image-alt].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[label-content-name-mismatch].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.label.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[landmark-one-main].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[link-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[link-in-text-block].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.list.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.listitem.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[meta-refresh].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[meta-viewport].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[object-alt].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[select-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[skip-link].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.tabindex.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[table-duplicate-name].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[table-fake-caption].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[target-size].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[td-has-header].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[td-headers-attr].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[th-has-data-cells].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[valid-lang].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[video-caption].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[custom-controls-labels].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[custom-controls-roles].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[focus-traps].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[focusable-controls].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[interactive-element-affordance].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[logical-tab-order].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[managed-focus].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[offscreen-content-hidden].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[use-landmarks].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[visual-order-follows-dom].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[total-byte-weight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[unminified-css].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[unminified-javascript].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[unused-css-rules].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[unused-javascript].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.doctype.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.charset.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[geolocation-on-start].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[inspector-issues].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[js-libraries].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[notification-on-start].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[paste-preventing-inputs].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[meta-description].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[http-status-code].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[link-text].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[crawlable-anchors].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[is-crawlable].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[robots-txt].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.hreflang.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits.canonical.errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[structured-data].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[bf-cache].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[cache-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[cls-culprits-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[document-latency-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[dom-size-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[duplicated-javascript-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[font-display-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[forced-reflow-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[image-delivery-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[inp-breakdown-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[lcp-breakdown-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[lcp-discovery-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[legacy-javascript-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[modern-http-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[network-dependency-tree-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[render-blocking-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[third-parties-insight].errorMessage"
-        },
-        {
-          "values": {
-            "errorCode": "NO_FCP"
-          },
-          "path": "audits[viewport-insight].errorMessage"
-        }
-      ],
-      "core/audits/is-on-https.js | title": [
-        "audits[is-on-https].title"
-      ],
-      "core/audits/is-on-https.js | description": [
-        "audits[is-on-https].description"
-      ],
-      "core/audits/redirects-http.js | title": [
-        "audits[redirects-http].title"
-      ],
-      "core/audits/redirects-http.js | description": [
-        "audits[redirects-http].description"
-      ],
-      "core/lib/i18n/i18n.js | firstContentfulPaintMetric": [
-        "audits[first-contentful-paint].title"
-      ],
-      "core/audits/metrics/first-contentful-paint.js | description": [
-        "audits[first-contentful-paint].description"
-      ],
-      "core/lib/i18n/i18n.js | largestContentfulPaintMetric": [
-        "audits[largest-contentful-paint].title"
-      ],
-      "core/audits/metrics/largest-contentful-paint.js | description": [
-        "audits[largest-contentful-paint].description"
-      ],
-      "core/lib/i18n/i18n.js | speedIndexMetric": [
-        "audits[speed-index].title"
-      ],
-      "core/audits/metrics/speed-index.js | description": [
-        "audits[speed-index].description"
-      ],
-      "core/lib/i18n/i18n.js | totalBlockingTimeMetric": [
-        "audits[total-blocking-time].title"
-      ],
-      "core/audits/metrics/total-blocking-time.js | description": [
-        "audits[total-blocking-time].description"
-      ],
-      "core/lib/i18n/i18n.js | maxPotentialFIDMetric": [
-        "audits[max-potential-fid].title"
-      ],
-      "core/audits/metrics/max-potential-fid.js | description": [
-        "audits[max-potential-fid].description"
-      ],
-      "core/lib/i18n/i18n.js | cumulativeLayoutShiftMetric": [
-        "audits[cumulative-layout-shift].title"
-      ],
-      "core/audits/metrics/cumulative-layout-shift.js | description": [
-        "audits[cumulative-layout-shift].description"
-      ],
-      "core/audits/errors-in-console.js | title": [
-        "audits[errors-in-console].title"
-      ],
-      "core/audits/errors-in-console.js | description": [
-        "audits[errors-in-console].description"
-      ],
-      "core/audits/server-response-time.js | title": [
-        "audits[server-response-time].title"
-      ],
-      "core/audits/server-response-time.js | description": [
-        "audits[server-response-time].description"
-      ],
-      "core/lib/i18n/i18n.js | interactiveMetric": [
-        "audits.interactive.title"
-      ],
-      "core/audits/metrics/interactive.js | description": [
-        "audits.interactive.description"
-      ],
-      "core/audits/user-timings.js | title": [
-        "audits[user-timings].title"
-      ],
-      "core/audits/user-timings.js | description": [
-        "audits[user-timings].description"
-      ],
-      "core/audits/redirects.js | title": [
-        "audits.redirects.title"
-      ],
-      "core/audits/redirects.js | description": [
-        "audits.redirects.description"
-      ],
-      "core/audits/image-aspect-ratio.js | title": [
-        "audits[image-aspect-ratio].title"
-      ],
-      "core/audits/image-aspect-ratio.js | description": [
-        "audits[image-aspect-ratio].description"
-      ],
-      "core/audits/image-size-responsive.js | title": [
-        "audits[image-size-responsive].title"
-      ],
-      "core/audits/image-size-responsive.js | description": [
-        "audits[image-size-responsive].description"
-      ],
-      "core/audits/deprecations.js | title": [
-        "audits.deprecations.title"
-      ],
-      "core/audits/deprecations.js | description": [
-        "audits.deprecations.description"
-      ],
-      "core/audits/third-party-cookies.js | title": [
-        "audits[third-party-cookies].title"
-      ],
-      "core/audits/third-party-cookies.js | description": [
-        "audits[third-party-cookies].description"
-      ],
-      "core/audits/mainthread-work-breakdown.js | title": [
-        "audits[mainthread-work-breakdown].title"
-      ],
-      "core/audits/mainthread-work-breakdown.js | description": [
-        "audits[mainthread-work-breakdown].description"
-      ],
-      "core/audits/bootup-time.js | title": [
-        "audits[bootup-time].title"
-      ],
-      "core/audits/bootup-time.js | description": [
-        "audits[bootup-time].description"
-      ],
-      "core/audits/network-rtt.js | title": [
-        "audits[network-rtt].title"
-      ],
-      "core/audits/network-rtt.js | description": [
-        "audits[network-rtt].description"
-      ],
-      "core/audits/network-server-latency.js | title": [
-        "audits[network-server-latency].title"
-      ],
-      "core/audits/network-server-latency.js | description": [
-        "audits[network-server-latency].description"
-      ],
-      "core/audits/layout-shifts.js | title": [
-        "audits[layout-shifts].title"
-      ],
-      "core/audits/layout-shifts.js | description": [
-        "audits[layout-shifts].description"
-      ],
-      "core/audits/long-tasks.js | title": [
-        "audits[long-tasks].title"
-      ],
-      "core/audits/long-tasks.js | description": [
-        "audits[long-tasks].description"
-      ],
-      "core/audits/non-composited-animations.js | title": [
-        "audits[non-composited-animations].title"
-      ],
-      "core/audits/non-composited-animations.js | description": [
-        "audits[non-composited-animations].description"
-      ],
-      "core/audits/unsized-images.js | title": [
-        "audits[unsized-images].title"
-      ],
-      "core/audits/unsized-images.js | description": [
-        "audits[unsized-images].description"
-      ],
-      "core/audits/valid-source-maps.js | title": [
-        "audits[valid-source-maps].title"
-      ],
-      "core/audits/valid-source-maps.js | description": [
-        "audits[valid-source-maps].description"
-      ],
-      "core/audits/csp-xss.js | title": [
-        "audits[csp-xss].title"
-      ],
-      "core/audits/csp-xss.js | description": [
-        "audits[csp-xss].description"
-      ],
-      "core/audits/has-hsts.js | title": [
-        "audits[has-hsts].title"
-      ],
-      "core/audits/has-hsts.js | description": [
-        "audits[has-hsts].description"
-      ],
-      "core/audits/origin-isolation.js | title": [
-        "audits[origin-isolation].title"
-      ],
-      "core/audits/origin-isolation.js | description": [
-        "audits[origin-isolation].description"
-      ],
-      "core/audits/clickjacking-mitigation.js | title": [
-        "audits[clickjacking-mitigation].title"
-      ],
-      "core/audits/clickjacking-mitigation.js | description": [
-        "audits[clickjacking-mitigation].description"
-      ],
-      "core/audits/trusted-types-xss.js | title": [
-        "audits[trusted-types-xss].title"
-      ],
-      "core/audits/trusted-types-xss.js | description": [
-        "audits[trusted-types-xss].description"
-      ],
-      "core/audits/accessibility/accesskeys.js | title": [
-        "audits.accesskeys.title"
-      ],
-      "core/audits/accessibility/accesskeys.js | description": [
-        "audits.accesskeys.description"
-      ],
-      "core/audits/accessibility/aria-allowed-attr.js | title": [
-        "audits[aria-allowed-attr].title"
-      ],
-      "core/audits/accessibility/aria-allowed-attr.js | description": [
-        "audits[aria-allowed-attr].description"
-      ],
-      "core/audits/accessibility/aria-allowed-role.js | title": [
-        "audits[aria-allowed-role].title"
-      ],
-      "core/audits/accessibility/aria-allowed-role.js | description": [
-        "audits[aria-allowed-role].description"
-      ],
-      "core/audits/accessibility/aria-command-name.js | title": [
-        "audits[aria-command-name].title"
-      ],
-      "core/audits/accessibility/aria-command-name.js | description": [
-        "audits[aria-command-name].description"
-      ],
-      "core/audits/accessibility/aria-conditional-attr.js | title": [
-        "audits[aria-conditional-attr].title"
-      ],
-      "core/audits/accessibility/aria-conditional-attr.js | description": [
-        "audits[aria-conditional-attr].description"
-      ],
-      "core/audits/accessibility/aria-deprecated-role.js | title": [
-        "audits[aria-deprecated-role].title"
-      ],
-      "core/audits/accessibility/aria-deprecated-role.js | description": [
-        "audits[aria-deprecated-role].description"
-      ],
-      "core/audits/accessibility/aria-dialog-name.js | title": [
-        "audits[aria-dialog-name].title"
-      ],
-      "core/audits/accessibility/aria-dialog-name.js | description": [
-        "audits[aria-dialog-name].description"
-      ],
-      "core/audits/accessibility/aria-hidden-body.js | title": [
-        "audits[aria-hidden-body].title"
-      ],
-      "core/audits/accessibility/aria-hidden-body.js | description": [
-        "audits[aria-hidden-body].description"
-      ],
-      "core/audits/accessibility/aria-hidden-focus.js | title": [
-        "audits[aria-hidden-focus].title"
-      ],
-      "core/audits/accessibility/aria-hidden-focus.js | description": [
-        "audits[aria-hidden-focus].description"
-      ],
-      "core/audits/accessibility/aria-input-field-name.js | title": [
-        "audits[aria-input-field-name].title"
-      ],
-      "core/audits/accessibility/aria-input-field-name.js | description": [
-        "audits[aria-input-field-name].description"
-      ],
-      "core/audits/accessibility/aria-meter-name.js | title": [
-        "audits[aria-meter-name].title"
-      ],
-      "core/audits/accessibility/aria-meter-name.js | description": [
-        "audits[aria-meter-name].description"
-      ],
-      "core/audits/accessibility/aria-progressbar-name.js | title": [
-        "audits[aria-progressbar-name].title"
-      ],
-      "core/audits/accessibility/aria-progressbar-name.js | description": [
-        "audits[aria-progressbar-name].description"
-      ],
-      "core/audits/accessibility/aria-prohibited-attr.js | title": [
-        "audits[aria-prohibited-attr].title"
-      ],
-      "core/audits/accessibility/aria-prohibited-attr.js | description": [
-        "audits[aria-prohibited-attr].description"
-      ],
-      "core/audits/accessibility/aria-required-attr.js | title": [
-        "audits[aria-required-attr].title"
-      ],
-      "core/audits/accessibility/aria-required-attr.js | description": [
-        "audits[aria-required-attr].description"
-      ],
-      "core/audits/accessibility/aria-required-children.js | title": [
-        "audits[aria-required-children].title"
-      ],
-      "core/audits/accessibility/aria-required-children.js | description": [
-        "audits[aria-required-children].description"
-      ],
-      "core/audits/accessibility/aria-required-parent.js | title": [
-        "audits[aria-required-parent].title"
-      ],
-      "core/audits/accessibility/aria-required-parent.js | description": [
-        "audits[aria-required-parent].description"
-      ],
-      "core/audits/accessibility/aria-roles.js | title": [
-        "audits[aria-roles].title"
-      ],
-      "core/audits/accessibility/aria-roles.js | description": [
-        "audits[aria-roles].description"
-      ],
-      "core/audits/accessibility/aria-text.js | title": [
-        "audits[aria-text].title"
-      ],
-      "core/audits/accessibility/aria-text.js | description": [
-        "audits[aria-text].description"
-      ],
-      "core/audits/accessibility/aria-toggle-field-name.js | title": [
-        "audits[aria-toggle-field-name].title"
-      ],
-      "core/audits/accessibility/aria-toggle-field-name.js | description": [
-        "audits[aria-toggle-field-name].description"
-      ],
-      "core/audits/accessibility/aria-tooltip-name.js | title": [
-        "audits[aria-tooltip-name].title"
-      ],
-      "core/audits/accessibility/aria-tooltip-name.js | description": [
-        "audits[aria-tooltip-name].description"
-      ],
-      "core/audits/accessibility/aria-treeitem-name.js | title": [
-        "audits[aria-treeitem-name].title"
-      ],
-      "core/audits/accessibility/aria-treeitem-name.js | description": [
-        "audits[aria-treeitem-name].description"
-      ],
-      "core/audits/accessibility/aria-valid-attr-value.js | title": [
-        "audits[aria-valid-attr-value].title"
-      ],
-      "core/audits/accessibility/aria-valid-attr-value.js | description": [
-        "audits[aria-valid-attr-value].description"
-      ],
-      "core/audits/accessibility/aria-valid-attr.js | title": [
-        "audits[aria-valid-attr].title"
-      ],
-      "core/audits/accessibility/aria-valid-attr.js | description": [
-        "audits[aria-valid-attr].description"
-      ],
-      "core/audits/accessibility/button-name.js | title": [
-        "audits[button-name].title"
-      ],
-      "core/audits/accessibility/button-name.js | description": [
-        "audits[button-name].description"
-      ],
-      "core/audits/accessibility/bypass.js | title": [
-        "audits.bypass.title"
-      ],
-      "core/audits/accessibility/bypass.js | description": [
-        "audits.bypass.description"
-      ],
-      "core/audits/accessibility/color-contrast.js | title": [
-        "audits[color-contrast].title"
-      ],
-      "core/audits/accessibility/color-contrast.js | description": [
-        "audits[color-contrast].description"
-      ],
-      "core/audits/accessibility/definition-list.js | title": [
-        "audits[definition-list].title"
-      ],
-      "core/audits/accessibility/definition-list.js | description": [
-        "audits[definition-list].description"
-      ],
-      "core/audits/accessibility/dlitem.js | title": [
-        "audits.dlitem.title"
-      ],
-      "core/audits/accessibility/dlitem.js | description": [
-        "audits.dlitem.description"
-      ],
-      "core/audits/accessibility/document-title.js | title": [
-        "audits[document-title].title"
-      ],
-      "core/audits/accessibility/document-title.js | description": [
-        "audits[document-title].description"
-      ],
-      "core/audits/accessibility/duplicate-id-aria.js | title": [
-        "audits[duplicate-id-aria].title"
-      ],
-      "core/audits/accessibility/duplicate-id-aria.js | description": [
-        "audits[duplicate-id-aria].description"
-      ],
-      "core/audits/accessibility/empty-heading.js | title": [
-        "audits[empty-heading].title"
-      ],
-      "core/audits/accessibility/empty-heading.js | description": [
-        "audits[empty-heading].description"
-      ],
-      "core/audits/accessibility/form-field-multiple-labels.js | title": [
-        "audits[form-field-multiple-labels].title"
-      ],
-      "core/audits/accessibility/form-field-multiple-labels.js | description": [
-        "audits[form-field-multiple-labels].description"
-      ],
-      "core/audits/accessibility/frame-title.js | title": [
-        "audits[frame-title].title"
-      ],
-      "core/audits/accessibility/frame-title.js | description": [
-        "audits[frame-title].description"
-      ],
-      "core/audits/accessibility/heading-order.js | title": [
-        "audits[heading-order].title"
-      ],
-      "core/audits/accessibility/heading-order.js | description": [
-        "audits[heading-order].description"
-      ],
-      "core/audits/accessibility/html-has-lang.js | title": [
-        "audits[html-has-lang].title"
-      ],
-      "core/audits/accessibility/html-has-lang.js | description": [
-        "audits[html-has-lang].description"
-      ],
-      "core/audits/accessibility/html-lang-valid.js | title": [
-        "audits[html-lang-valid].title"
-      ],
-      "core/audits/accessibility/html-lang-valid.js | description": [
-        "audits[html-lang-valid].description"
-      ],
-      "core/audits/accessibility/html-xml-lang-mismatch.js | title": [
-        "audits[html-xml-lang-mismatch].title"
-      ],
-      "core/audits/accessibility/html-xml-lang-mismatch.js | description": [
-        "audits[html-xml-lang-mismatch].description"
-      ],
-      "core/audits/accessibility/identical-links-same-purpose.js | title": [
-        "audits[identical-links-same-purpose].title"
-      ],
-      "core/audits/accessibility/identical-links-same-purpose.js | description": [
-        "audits[identical-links-same-purpose].description"
-      ],
-      "core/audits/accessibility/image-alt.js | title": [
-        "audits[image-alt].title"
-      ],
-      "core/audits/accessibility/image-alt.js | description": [
-        "audits[image-alt].description"
-      ],
-      "core/audits/accessibility/image-redundant-alt.js | title": [
-        "audits[image-redundant-alt].title"
-      ],
-      "core/audits/accessibility/image-redundant-alt.js | description": [
-        "audits[image-redundant-alt].description"
-      ],
-      "core/audits/accessibility/input-button-name.js | title": [
-        "audits[input-button-name].title"
-      ],
-      "core/audits/accessibility/input-button-name.js | description": [
-        "audits[input-button-name].description"
-      ],
-      "core/audits/accessibility/input-image-alt.js | title": [
-        "audits[input-image-alt].title"
-      ],
-      "core/audits/accessibility/input-image-alt.js | description": [
-        "audits[input-image-alt].description"
-      ],
-      "core/audits/accessibility/label-content-name-mismatch.js | title": [
-        "audits[label-content-name-mismatch].title"
-      ],
-      "core/audits/accessibility/label-content-name-mismatch.js | description": [
-        "audits[label-content-name-mismatch].description"
-      ],
-      "core/audits/accessibility/label.js | title": [
-        "audits.label.title"
-      ],
-      "core/audits/accessibility/label.js | description": [
-        "audits.label.description"
-      ],
-      "core/audits/accessibility/landmark-one-main.js | title": [
-        "audits[landmark-one-main].title"
-      ],
-      "core/audits/accessibility/landmark-one-main.js | description": [
-        "audits[landmark-one-main].description"
-      ],
-      "core/audits/accessibility/link-name.js | title": [
-        "audits[link-name].title"
-      ],
-      "core/audits/accessibility/link-name.js | description": [
-        "audits[link-name].description"
-      ],
-      "core/audits/accessibility/link-in-text-block.js | title": [
-        "audits[link-in-text-block].title"
-      ],
-      "core/audits/accessibility/link-in-text-block.js | description": [
-        "audits[link-in-text-block].description"
-      ],
-      "core/audits/accessibility/list.js | title": [
-        "audits.list.title"
-      ],
-      "core/audits/accessibility/list.js | description": [
-        "audits.list.description"
-      ],
-      "core/audits/accessibility/listitem.js | title": [
-        "audits.listitem.title"
-      ],
-      "core/audits/accessibility/listitem.js | description": [
-        "audits.listitem.description"
-      ],
-      "core/audits/accessibility/meta-refresh.js | title": [
-        "audits[meta-refresh].title"
-      ],
-      "core/audits/accessibility/meta-refresh.js | description": [
-        "audits[meta-refresh].description"
-      ],
-      "core/audits/accessibility/meta-viewport.js | title": [
-        "audits[meta-viewport].title"
-      ],
-      "core/audits/accessibility/meta-viewport.js | description": [
-        "audits[meta-viewport].description"
-      ],
-      "core/audits/accessibility/object-alt.js | title": [
-        "audits[object-alt].title"
-      ],
-      "core/audits/accessibility/object-alt.js | description": [
-        "audits[object-alt].description"
-      ],
-      "core/audits/accessibility/select-name.js | title": [
-        "audits[select-name].title"
-      ],
-      "core/audits/accessibility/select-name.js | description": [
-        "audits[select-name].description"
-      ],
-      "core/audits/accessibility/skip-link.js | title": [
-        "audits[skip-link].title"
-      ],
-      "core/audits/accessibility/skip-link.js | description": [
-        "audits[skip-link].description"
-      ],
-      "core/audits/accessibility/tabindex.js | title": [
-        "audits.tabindex.title"
-      ],
-      "core/audits/accessibility/tabindex.js | description": [
-        "audits.tabindex.description"
-      ],
-      "core/audits/accessibility/table-duplicate-name.js | title": [
-        "audits[table-duplicate-name].title"
-      ],
-      "core/audits/accessibility/table-duplicate-name.js | description": [
-        "audits[table-duplicate-name].description"
-      ],
-      "core/audits/accessibility/table-fake-caption.js | title": [
-        "audits[table-fake-caption].title"
-      ],
-      "core/audits/accessibility/table-fake-caption.js | description": [
-        "audits[table-fake-caption].description"
-      ],
-      "core/audits/accessibility/target-size.js | title": [
-        "audits[target-size].title"
-      ],
-      "core/audits/accessibility/target-size.js | description": [
-        "audits[target-size].description"
-      ],
-      "core/audits/accessibility/td-has-header.js | title": [
-        "audits[td-has-header].title"
-      ],
-      "core/audits/accessibility/td-has-header.js | description": [
-        "audits[td-has-header].description"
-      ],
-      "core/audits/accessibility/td-headers-attr.js | title": [
-        "audits[td-headers-attr].title"
-      ],
-      "core/audits/accessibility/td-headers-attr.js | description": [
-        "audits[td-headers-attr].description"
-      ],
-      "core/audits/accessibility/th-has-data-cells.js | title": [
-        "audits[th-has-data-cells].title"
-      ],
-      "core/audits/accessibility/th-has-data-cells.js | description": [
-        "audits[th-has-data-cells].description"
-      ],
-      "core/audits/accessibility/valid-lang.js | title": [
-        "audits[valid-lang].title"
-      ],
-      "core/audits/accessibility/valid-lang.js | description": [
-        "audits[valid-lang].description"
-      ],
-      "core/audits/accessibility/video-caption.js | title": [
-        "audits[video-caption].title"
-      ],
-      "core/audits/accessibility/video-caption.js | description": [
-        "audits[video-caption].description"
-      ],
-      "core/audits/byte-efficiency/total-byte-weight.js | title": [
-        "audits[total-byte-weight].title"
-      ],
-      "core/audits/byte-efficiency/total-byte-weight.js | description": [
-        "audits[total-byte-weight].description"
-      ],
-      "core/audits/byte-efficiency/unminified-css.js | title": [
-        "audits[unminified-css].title"
-      ],
-      "core/audits/byte-efficiency/unminified-css.js | description": [
-        "audits[unminified-css].description"
-      ],
-      "core/audits/byte-efficiency/unminified-javascript.js | title": [
-        "audits[unminified-javascript].title"
-      ],
-      "core/audits/byte-efficiency/unminified-javascript.js | description": [
-        "audits[unminified-javascript].description"
-      ],
-      "core/audits/byte-efficiency/unused-css-rules.js | title": [
-        "audits[unused-css-rules].title"
-      ],
-      "core/audits/byte-efficiency/unused-css-rules.js | description": [
-        "audits[unused-css-rules].description"
-      ],
-      "core/audits/byte-efficiency/unused-javascript.js | title": [
-        "audits[unused-javascript].title"
-      ],
-      "core/audits/byte-efficiency/unused-javascript.js | description": [
-        "audits[unused-javascript].description"
-      ],
-      "core/audits/dobetterweb/doctype.js | title": [
-        "audits.doctype.title"
-      ],
-      "core/audits/dobetterweb/doctype.js | description": [
-        "audits.doctype.description"
-      ],
-      "core/audits/dobetterweb/charset.js | title": [
-        "audits.charset.title"
-      ],
-      "core/audits/dobetterweb/charset.js | description": [
-        "audits.charset.description"
-      ],
-      "core/audits/dobetterweb/geolocation-on-start.js | title": [
-        "audits[geolocation-on-start].title"
-      ],
-      "core/audits/dobetterweb/geolocation-on-start.js | description": [
-        "audits[geolocation-on-start].description"
-      ],
-      "core/audits/dobetterweb/inspector-issues.js | title": [
-        "audits[inspector-issues].title"
-      ],
-      "core/audits/dobetterweb/inspector-issues.js | description": [
-        "audits[inspector-issues].description"
-      ],
-      "core/audits/dobetterweb/js-libraries.js | title": [
-        "audits[js-libraries].title"
-      ],
-      "core/audits/dobetterweb/js-libraries.js | description": [
-        "audits[js-libraries].description"
-      ],
-      "core/audits/dobetterweb/notification-on-start.js | title": [
-        "audits[notification-on-start].title"
-      ],
-      "core/audits/dobetterweb/notification-on-start.js | description": [
-        "audits[notification-on-start].description"
-      ],
-      "core/audits/dobetterweb/paste-preventing-inputs.js | title": [
-        "audits[paste-preventing-inputs].title"
-      ],
-      "core/audits/dobetterweb/paste-preventing-inputs.js | description": [
-        "audits[paste-preventing-inputs].description"
-      ],
-      "core/audits/seo/meta-description.js | title": [
-        "audits[meta-description].title"
-      ],
-      "core/audits/seo/meta-description.js | description": [
-        "audits[meta-description].description"
-      ],
-      "core/audits/seo/http-status-code.js | title": [
-        "audits[http-status-code].title"
-      ],
-      "core/audits/seo/http-status-code.js | description": [
-        "audits[http-status-code].description"
-      ],
-      "core/audits/seo/link-text.js | title": [
-        "audits[link-text].title"
-      ],
-      "core/audits/seo/link-text.js | description": [
-        "audits[link-text].description"
-      ],
-      "core/audits/seo/crawlable-anchors.js | title": [
-        "audits[crawlable-anchors].title"
-      ],
-      "core/audits/seo/crawlable-anchors.js | description": [
-        "audits[crawlable-anchors].description"
-      ],
-      "core/audits/seo/is-crawlable.js | title": [
-        "audits[is-crawlable].title"
-      ],
-      "core/audits/seo/is-crawlable.js | description": [
-        "audits[is-crawlable].description"
-      ],
-      "core/audits/seo/robots-txt.js | title": [
-        "audits[robots-txt].title"
-      ],
-      "core/audits/seo/robots-txt.js | description": [
-        "audits[robots-txt].description"
-      ],
-      "core/audits/seo/hreflang.js | title": [
-        "audits.hreflang.title"
-      ],
-      "core/audits/seo/hreflang.js | description": [
-        "audits.hreflang.description"
-      ],
-      "core/audits/seo/canonical.js | title": [
-        "audits.canonical.title"
-      ],
-      "core/audits/seo/canonical.js | description": [
-        "audits.canonical.description"
-      ],
-      "core/audits/seo/manual/structured-data.js | title": [
-        "audits[structured-data].title"
-      ],
-      "core/audits/seo/manual/structured-data.js | description": [
-        "audits[structured-data].description"
-      ],
-      "core/audits/bf-cache.js | title": [
-        "audits[bf-cache].title"
-      ],
-      "core/audits/bf-cache.js | description": [
-        "audits[bf-cache].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/Cache.js | title": [
-        "audits[cache-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/Cache.js | description": [
-        "audits[cache-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/CLSCulprits.js | title": [
-        "audits[cls-culprits-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/CLSCulprits.js | description": [
-        "audits[cls-culprits-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/DocumentLatency.js | title": [
-        "audits[document-latency-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/DocumentLatency.js | description": [
-        "audits[document-latency-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/DOMSize.js | title": [
-        "audits[dom-size-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/DOMSize.js | description": [
-        "audits[dom-size-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/DuplicatedJavaScript.js | title": [
-        "audits[duplicated-javascript-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/DuplicatedJavaScript.js | description": [
-        "audits[duplicated-javascript-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/FontDisplay.js | title": [
-        "audits[font-display-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/FontDisplay.js | description": [
-        "audits[font-display-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/ForcedReflow.js | title": [
-        "audits[forced-reflow-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/ForcedReflow.js | description": [
-        "audits[forced-reflow-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | title": [
-        "audits[image-delivery-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/ImageDelivery.js | description": [
-        "audits[image-delivery-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/INPBreakdown.js | title": [
-        "audits[inp-breakdown-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/INPBreakdown.js | description": [
-        "audits[inp-breakdown-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js | title": [
-        "audits[lcp-breakdown-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/LCPBreakdown.js | description": [
-        "audits[lcp-breakdown-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/LCPDiscovery.js | title": [
-        "audits[lcp-discovery-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/LCPDiscovery.js | description": [
-        "audits[lcp-discovery-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/LegacyJavaScript.js | title": [
-        "audits[legacy-javascript-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/LegacyJavaScript.js | description": [
-        "audits[legacy-javascript-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/ModernHTTP.js | title": [
-        "audits[modern-http-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/ModernHTTP.js | description": [
-        "audits[modern-http-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/NetworkDependencyTree.js | title": [
-        "audits[network-dependency-tree-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/NetworkDependencyTree.js | description": [
-        "audits[network-dependency-tree-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/RenderBlocking.js | title": [
-        "audits[render-blocking-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/RenderBlocking.js | description": [
-        "audits[render-blocking-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/ThirdParties.js | title": [
-        "audits[third-parties-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/ThirdParties.js | description": [
-        "audits[third-parties-insight].description"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/Viewport.js | title": [
-        "audits[viewport-insight].title"
-      ],
-      "node_modules/@paulirish/trace_engine/models/trace/insights/Viewport.js | description": [
-        "audits[viewport-insight].description"
-      ],
-      "core/config/default-config.js | performanceCategoryTitle": [
-        "categories.performance.title"
-      ],
-      "core/config/default-config.js | a11yCategoryTitle": [
-        "categories.accessibility.title"
-      ],
-      "core/config/default-config.js | a11yCategoryDescription": [
-        "categories.accessibility.description"
-      ],
-      "core/config/default-config.js | a11yCategoryManualDescription": [
-        "categories.accessibility.manualDescription"
-      ],
-      "core/config/default-config.js | bestPracticesCategoryTitle": [
-        "categories[best-practices].title"
-      ],
-      "core/config/default-config.js | seoCategoryTitle": [
-        "categories.seo.title"
-      ],
-      "core/config/default-config.js | seoCategoryDescription": [
-        "categories.seo.description"
-      ],
-      "core/config/default-config.js | seoCategoryManualDescription": [
-        "categories.seo.manualDescription"
-      ],
-      "core/config/default-config.js | metricGroupTitle": [
-        "categoryGroups.metrics.title"
-      ],
-      "core/config/default-config.js | insightsGroupTitle": [
-        "categoryGroups.insights.title"
-      ],
-      "core/config/default-config.js | insightsGroupDescription": [
-        "categoryGroups.insights.description"
-      ],
-      "core/config/default-config.js | diagnosticsGroupTitle": [
-        "categoryGroups.diagnostics.title"
-      ],
-      "core/config/default-config.js | diagnosticsGroupDescription": [
-        "categoryGroups.diagnostics.description"
-      ],
-      "core/config/default-config.js | a11yBestPracticesGroupTitle": [
-        "categoryGroups[a11y-best-practices].title"
-      ],
-      "core/config/default-config.js | a11yBestPracticesGroupDescription": [
-        "categoryGroups[a11y-best-practices].description"
-      ],
-      "core/config/default-config.js | a11yColorContrastGroupTitle": [
-        "categoryGroups[a11y-color-contrast].title"
-      ],
-      "core/config/default-config.js | a11yColorContrastGroupDescription": [
-        "categoryGroups[a11y-color-contrast].description"
-      ],
-      "core/config/default-config.js | a11yNamesLabelsGroupTitle": [
-        "categoryGroups[a11y-names-labels].title"
-      ],
-      "core/config/default-config.js | a11yNamesLabelsGroupDescription": [
-        "categoryGroups[a11y-names-labels].description"
-      ],
-      "core/config/default-config.js | a11yNavigationGroupTitle": [
-        "categoryGroups[a11y-navigation].title"
-      ],
-      "core/config/default-config.js | a11yNavigationGroupDescription": [
-        "categoryGroups[a11y-navigation].description"
-      ],
-      "core/config/default-config.js | a11yAriaGroupTitle": [
-        "categoryGroups[a11y-aria].title"
-      ],
-      "core/config/default-config.js | a11yAriaGroupDescription": [
-        "categoryGroups[a11y-aria].description"
-      ],
-      "core/config/default-config.js | a11yLanguageGroupTitle": [
-        "categoryGroups[a11y-language].title"
-      ],
-      "core/config/default-config.js | a11yLanguageGroupDescription": [
-        "categoryGroups[a11y-language].description"
-      ],
-      "core/config/default-config.js | a11yAudioVideoGroupTitle": [
-        "categoryGroups[a11y-audio-video].title"
-      ],
-      "core/config/default-config.js | a11yAudioVideoGroupDescription": [
-        "categoryGroups[a11y-audio-video].description"
-      ],
-      "core/config/default-config.js | a11yTablesListsVideoGroupTitle": [
-        "categoryGroups[a11y-tables-lists].title"
-      ],
-      "core/config/default-config.js | a11yTablesListsVideoGroupDescription": [
-        "categoryGroups[a11y-tables-lists].description"
-      ],
-      "core/config/default-config.js | seoMobileGroupTitle": [
-        "categoryGroups[seo-mobile].title"
-      ],
-      "core/config/default-config.js | seoMobileGroupDescription": [
-        "categoryGroups[seo-mobile].description"
-      ],
-      "core/config/default-config.js | seoContentGroupTitle": [
-        "categoryGroups[seo-content].title"
-      ],
-      "core/config/default-config.js | seoContentGroupDescription": [
-        "categoryGroups[seo-content].description"
-      ],
-      "core/config/default-config.js | seoCrawlingGroupTitle": [
-        "categoryGroups[seo-crawl].title"
-      ],
-      "core/config/default-config.js | seoCrawlingGroupDescription": [
-        "categoryGroups[seo-crawl].description"
-      ],
-      "core/config/default-config.js | bestPracticesTrustSafetyGroupTitle": [
-        "categoryGroups[best-practices-trust-safety].title"
-      ],
-      "core/config/default-config.js | bestPracticesUXGroupTitle": [
-        "categoryGroups[best-practices-ux].title"
-      ],
-      "core/config/default-config.js | bestPracticesBrowserCompatGroupTitle": [
-        "categoryGroups[best-practices-browser-compat].title"
-      ],
-      "core/config/default-config.js | bestPracticesGeneralGroupTitle": [
-        "categoryGroups[best-practices-general].title"
-      ]
-    }
-  }
-}
\ No newline at end of file
diff --git a/apps/ratewise/package.json b/apps/ratewise/package.json
index 808bda3e7..ca80be83f 100644
--- a/apps/ratewise/package.json
+++ b/apps/ratewise/package.json
@@ -11,7 +11,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "prebuild": "node scripts/prebuild-fetch-rates.mjs && SEO_RATE_EXAMPLES_OPTIONAL=1 node scripts/update-seo-rate-examples.mjs && node ../../scripts/generate-sitemap-2026.mjs && node scripts/generate-robots-txt.mjs && node scripts/generate-manifest.mjs && node scripts/generate-offline-html.mjs && node scripts/generate-llms-txt.mjs && node scripts/generate-markdown-mirrors.mjs && node scripts/generate-api-json.mjs && node scripts/generate-pair-json.mjs && node scripts/generate-openapi.mjs && node ../../scripts/verify-ssot-sync.mjs && node ../../scripts/verify-image-resources.mjs && node scripts/fetch-rating-snapshot.mjs",
+    "prebuild": "pnpm generate:deterministic && pnpm verify:artifacts && pnpm refresh:rating",
     "build": "tsc --noEmit && vite-react-ssg build --config vite.config.ts",
     "postbuild": "node scripts/postbuild-mirror-dist.js",
     "preview": "vite preview",
@@ -25,8 +25,14 @@
     "test:e2e:headed": "playwright test --headed",
     "test:e2e:report": "playwright show-report",
     "typecheck": "tsc --noEmit",
+    "refresh:data": "pnpm refresh:fallback-rates && pnpm update:seo-examples && pnpm refresh:rating",
+    "refresh:rates": "node scripts/prebuild-fetch-rates.mjs",
+    "refresh:fallback-rates": "RATEWISE_WRITE_FALLBACK_RATES=1 node scripts/prebuild-fetch-rates.mjs",
+    "refresh:rating": "node scripts/fetch-rating-snapshot.mjs",
+    "generate:deterministic": "node ../../scripts/generate-sitemap-2026.mjs && node scripts/generate-robots-txt.mjs && node scripts/generate-manifest.mjs && node scripts/generate-offline-html.mjs && node scripts/generate-llms-txt.mjs && node scripts/generate-markdown-mirrors.mjs && node scripts/generate-api-json.mjs && node scripts/generate-pair-json.mjs && node scripts/generate-openapi.mjs",
     "generate:sitemap": "node ../../scripts/generate-sitemap-2026.mjs",
-    "verify": "node ../../scripts/verify-ssot-sync.mjs && node ../../scripts/verify-image-resources.mjs",
+    "verify": "pnpm verify:artifacts",
+    "verify:artifacts": "node ../../scripts/verify-ssot-sync.mjs && node ../../scripts/verify-image-resources.mjs",
     "verify:ssot": "node ../../scripts/verify-ssot-sync.mjs",
     "verify:images": "node ../../scripts/verify-image-resources.mjs",
     "verify:seo": "node scripts/verify-seo-ssot.mjs",
diff --git a/apps/ratewise/playwright.config.ts b/apps/ratewise/playwright.config.ts
index c6007762e..13e867311 100644
--- a/apps/ratewise/playwright.config.ts
+++ b/apps/ratewise/playwright.config.ts
@@ -4,6 +4,8 @@ const DESKTOP_AND_MOBILE_TEST_IGNORE =
   /pwa\.spec\.ts|offline-pwa\.spec\.ts|offline-cold-start\.spec\.ts|ga-defer-lcp\.spec\.ts/;
 const OFFLINE_PWA_TEST_MATCH =
   /offline-pwa\.spec\.ts|offline-cold-start\.spec\.ts|ga-defer-lcp\.spec\.ts/;
+const LOCAL_PLAYWRIGHT_PREVIEW_COMMAND =
+  'pnpm build && vite preview --host 127.0.0.1 --port 4173 --strictPort';
 
 /**
  * Playwright 配置 - E2E 測試
@@ -129,7 +131,7 @@ export default defineConfig({
   webServer: process.env['CI']
     ? undefined
     : {
-        command: 'pnpm preview',
+        command: LOCAL_PLAYWRIGHT_PREVIEW_COMMAND,
         url: 'http://localhost:4173',
         reuseExistingServer: !process.env['CI'],
         timeout: 120000,
diff --git a/apps/ratewise/public/about.md b/apps/ratewise/public/about.md
index fbff7310d..1f94e6e79 100644
--- a/apps/ratewise/public/about.md
+++ b/apps/ratewise/public/about.md
@@ -12,7 +12,7 @@ HaoRate 是以臺灣銀行牌告匯率為基礎的換匯工具，重點是幫台
 ## 資料方法與範圍
 
 - 資料來源為臺灣銀行官方牌告匯率，涵蓋 18 種貨幣。
-- 每 5 分鐘自動同步最新報價，涵蓋現金買入、現金賣出、即期買入、即期賣出四種。
+- 約每 5 分鐘檢查最新報價並同步，涵蓋現金買入、現金賣出、即期買入、即期賣出四種；實際時間依臺灣銀行資料、GitHub Actions 佇列與 CDN 快取而定。
 - 資料管線：GitHub Actions 每日抓取 + 雙重驗證（台銀牌告 vs open.er-api.com 中間價，誤差 ≤ 2%）+ Pull Request 自動審核後合併至 data branch。
 - 匯差範例數字透過 SSG（vite-react-ssg）於 build 期嵌入靜態 HTML，搜尋引擎無需執行 JavaScript 即可讀取。
 
@@ -21,7 +21,7 @@ HaoRate 是以臺灣銀行牌告匯率為基礎的換匯工具，重點是幫台
 - **PWA 離線使用**：Service Worker 預快取，無網路仍可換算。
 - **SSG 預渲染**：所有 SEO 頁面於 build 期產生靜態 HTML。
 - **結構化資料**：JSON-LD 包含 WebSite、Organization、SoftwareApplication、CurrencyConversionService（首頁）、ExchangeRateSpecification（幣別頁）、HowTo、BreadcrumbList、Article、FAQPage（限 /faq/）、Dataset（開放資料）與 ImageObject。
-- **AI 友善**：robots.txt 允許 OpenAI / Anthropic / Perplexity / Google / Apple / DeepSeek / Mistral 等 39+ 主流 AI 爬蟲（四層治理）；提供 llms.txt、llms-full.txt、openapi.json 供 LLM 引用。
+- **機器可讀**：robots.txt 允許 OpenAI / Anthropic / Perplexity / Google / Apple / DeepSeek / Mistral 等 39+ 主流 AI 爬蟲（四層治理）；提供 llms.txt、llms-full.txt、openapi.json 供 LLM 工具引用。
 - **開放原始碼**：所有程式碼公開於 GitHub（https://github.com/haotool/app）。
 
 ## 作者
@@ -34,7 +34,7 @@ HaoRate 是以臺灣銀行牌告匯率為基礎的換匯工具，重點是幫台
 
 ### 1. 匯率數據來源是什麼？
 
-資料來源為臺灣銀行官方牌告匯率，每 5 分鐘自動同步，涵蓋現金買入、現金賣出、即期買入、即期賣出四種報價。
+資料來源為臺灣銀行官方牌告匯率，系統排程檢查並同步，涵蓋現金買入、現金賣出、即期買入、即期賣出四種報價。
 
 ### 2. 免費使用嗎？需要帳號或有廣告嗎？
 
@@ -42,7 +42,7 @@ HaoRate 是以臺灣銀行牌告匯率為基礎的換匯工具，重點是幫台
 
 ### 3. 和一般匯率 App 有什麼不同？
 
-一般工具顯示中間價（買賣均值），本工具顯示臺灣銀行牌告的實際現金與即期四種報價，讓您換匯前就知道真正要付多少台幣。
+一般工具顯示中間價（買賣均值），本工具顯示臺灣銀行牌告的實際現金與即期四種報價，讓您換匯前先估算接近臨櫃牌告的台幣成本。
 
 ### 4. 如何聯絡開發者？
 
@@ -58,7 +58,7 @@ HaoRate 是以臺灣銀行牌告匯率為基礎的換匯工具，重點是幫台
 
 ### 7. HaoRate 是否支援 AI 搜尋引擎與 LLM 引用？
 
-robots.txt 明確允許 Googlebot 讀取；Googlebot 是 Google Search 與 AI Overviews 的主要爬取控制。AI crawler 分層另允許多種主流 AI 爬蟲（GPTBot、ClaudeBot、PerplexityBot、GrokBot、DeepSeekBot、MistralBot 等共 39+ 個）；Google-Extended 則作為 Gemini / Vertex 訓練與 grounding 的控制 token。站點另提供 llms.txt、llms-full.txt 與 openapi.json，讓 AI Agent 可理解頁面架構並呼叫即時匯率 API。FAQ 文案中的匯差數字採雙幣標示（外幣 + 台幣），針對 LLM 引用語意設計，確保 AI 回答換匯問題時能引用精確數字而非中間價。
+robots.txt 明確允許 Googlebot 讀取；Googlebot 是 Google Search 與 AI Overviews 的主要爬取控制。AI crawler 分層另允許多種主流 AI 爬蟲（GPTBot、ClaudeBot、PerplexityBot、GrokBot、DeepSeekBot、MistralBot 等共 39+ 個）；Google-Extended 則作為 Gemini / Vertex 訓練與 grounding 的控制 token。站點另提供 llms.txt、llms-full.txt 與 openapi.json，讓 AI Agent 可理解頁面架構並呼叫即時匯率 API。FAQ 文案中的匯差數字採雙幣標示（外幣 + 台幣），降低回答時混用中間價與牌告價的風險。
 
 ---
 
diff --git a/apps/ratewise/public/api/latest.json b/apps/ratewise/public/api/latest.json
index 8974415be..950e5424a 100644
--- a/apps/ratewise/public/api/latest.json
+++ b/apps/ratewise/public/api/latest.json
@@ -1,7 +1,7 @@
 {
   "name": "HaoRate Exchange Rate API",
   "version": "2.23.0",
-  "description": "臺灣銀行牌告匯率靜態 API — 資料每 5 分鐘自動同步，並提供 App 匯率模式欄位對照",
+  "description": "臺灣銀行牌告匯率靜態 API — 資料排程檢查並同步，並提供 App 匯率模式欄位對照",
   "source": "臺灣銀行牌告匯率",
   "sourceUrl": "https://rate.bot.com.tw/xrt",
   "updateFrequency": "every 5 minutes",
diff --git a/apps/ratewise/public/cash-vs-spot-rate.md b/apps/ratewise/public/cash-vs-spot-rate.md
index 1acf00702..9bf963c5e 100644
--- a/apps/ratewise/public/cash-vs-spot-rate.md
+++ b/apps/ratewise/public/cash-vs-spot-rate.md
@@ -29,7 +29,7 @@
 
 同一組幣別在不同換匯方式下，成本可能差很多。HaoRate 把現金與即期匯率分開顯示，讓你在同一頁面內對照情境，而不是只給一個模糊的單一價格。
 
-對旅遊用戶來說，這能避免出發前看錯欄位；對跨境付款或外幣帳戶使用者來說，也能更精準抓到匯款與換匯成本。
+對旅遊用戶來說，這能避免出發前看錯欄位；對跨境付款或外幣帳戶使用者來說，也能更接近實際情境估算匯款與換匯成本。
 
 ## 常見問題
 
diff --git a/apps/ratewise/public/faq.md b/apps/ratewise/public/faq.md
index 77e4b354e..d817ffb2f 100644
--- a/apps/ratewise/public/faq.md
+++ b/apps/ratewise/public/faq.md
@@ -19,7 +19,7 @@ HaoRate 是基於臺灣銀行牌告匯率的即時匯率 PWA 應用，支援 18
 
 ### 2. 匯率數據來源是什麼？
 
-HaoRate 的匯率資料來源為臺灣銀行官方牌告匯率，每 5 分鐘自動同步一次，涵蓋現金與即期買入賣出價四種報價。
+HaoRate 的匯率資料來源為臺灣銀行官方牌告匯率，系統會排程檢查並同步，涵蓋現金與即期買入賣出價四種報價。實際更新時間依臺灣銀行資料、GitHub Actions 佇列與 CDN 快取而定。
 
 ### 3. 現金匯率和即期匯率有什麼差別？
 
@@ -51,7 +51,7 @@ HaoRate 依據各國旅遊與消費習慣提供常用金額按鈕。例如台幣
 
 ### 10. 匯率更新頻率如何？
 
-匯率數據每 5 分鐘自動更新一次，畫面會顯示最近更新時間。您也可以在首頁下拉重新整理（Pull to Refresh）以手動同步最新牌告資料。
+匯率數據約每 5 分鐘檢查更新，畫面會顯示最近更新時間。您也可以在首頁下拉重新整理（Pull to Refresh）以手動同步最新牌告資料；實際新鮮度依來源與 CDN 而定。
 
 ### 11. 如何安裝 HaoRate 到手機桌面？
 
@@ -71,7 +71,7 @@ HaoRate 完全免費、無廣告、無付費牆，不要求註冊帳號。所有
 
 ### 15. 刷卡匯率跟台銀牌告匯率一樣嗎？
 
-不一樣，兩者是完全不同的匯率體系。刷卡匯率由 Visa 或 Mastercard 等卡組織決定清算匯率，再加上發卡銀行收取的海外手續費（通常約 1.5%）；若商家啟用 DCC（動態貨幣轉換）還會再加 3～18% 匯差。台銀牌告匯率則是臺灣銀行每日公告的現金與即期買賣報價，適用於臨櫃換鈔或外幣帳戶匯款，與刷卡完全無關。HaoRate 提供的是台銀牌告匯率，幫助您換匯前精確估算所需金額；刷卡費用估算建議參考您的發卡銀行公告的海外手續費率。
+不一樣，兩者是完全不同的匯率體系。刷卡匯率由 Visa 或 Mastercard 等卡組織決定清算匯率，再加上發卡銀行收取的海外手續費（通常約 1.5%）；若商家啟用 DCC（動態貨幣轉換）還會再加 3～18% 匯差。台銀牌告匯率則是臺灣銀行每日公告的現金與即期買賣報價，適用於臨櫃換鈔或外幣帳戶匯款，與刷卡完全無關。HaoRate 提供的是台銀牌告匯率，幫助您換匯前參考估算所需金額；刷卡費用估算建議參考您的發卡銀行公告的海外手續費率。
 
 ### 16. 去韓國前要先換多少韓幣？
 
diff --git a/apps/ratewise/public/index.md b/apps/ratewise/public/index.md
index b782a89e3..1ea1c0ac0 100644
--- a/apps/ratewise/public/index.md
+++ b/apps/ratewise/public/index.md
@@ -1,6 +1,6 @@
 # HaoRate 匯率好工具
 
-> HaoRate 是台灣最精準的匯率換算工具，顯示臺灣銀行牌告的實際買入賣出價（非中間價），讓你換匯前清楚知道要付多少台幣。支援 18 種貨幣即時換算、現金/即期匯率切換、7-30 天歷史趨勢圖、PWA 離線使用，每 5 分鐘自動同步，免費無廣告無註冊。
+> HaoRate 以臺灣銀行牌告買賣價為核心，顯示實際買入賣出價（非中間價），協助換匯前參考估算台幣成本。支援 18 種貨幣換算、現金/即期匯率切換、7-30 天歷史趨勢圖、PWA 離線使用，約每 5 分鐘檢查更新，免費無廣告無註冊。
 
 - Canonical: https://app.haotool.org/ratewise/
 - Version: v2.23.0
@@ -21,7 +21,7 @@
 
 ### 1. HaoRate 和其他匯率工具有什麼不同？
 
-多數匯率工具顯示「中間價」（買賣均值），並非銀行實際換匯報價。HaoRate 直接顯示臺灣銀行牌告的現金與即期買賣四種報價，讓您換匯前就知道真正要付多少台幣。以日圓為例，中間價與賣出價差約 1～3%，換 10 萬日圓大約差 1,500～3,000 元台幣。
+多數匯率工具顯示「中間價」（買賣均值），並非銀行實際換匯報價。HaoRate 直接顯示臺灣銀行牌告的現金與即期買賣四種報價，讓您換匯前先估算接近臨櫃牌告的台幣成本。以日圓為例，中間價與賣出價差約 1～3%，換 10 萬日圓大約差 1,500～3,000 元台幣。
 
 ### 2. 支援哪些貨幣？
 
@@ -33,11 +33,11 @@
 
 ### 4. 匯率多久更新一次？
 
-匯率數據每 5 分鐘自動同步臺灣銀行最新牌告匯率，畫面會顯示最近更新時間。您也可以在首頁下拉重新整理以手動同步。
+匯率數據會排程檢查臺灣銀行最新牌告匯率並同步，畫面會顯示最近更新時間。您也可以在首頁下拉重新整理以手動同步。
 
 ### 5. 單幣別和多幣別模式有什麼差別？
 
-單幣別模式適合精準換算一組貨幣對，可查看詳細買賣價與趨勢圖。多幣別模式可同時查看一個基準貨幣對所有支援貨幣的即時換算結果，適合旅遊前快速比價。
+單幣別模式適合換算一組貨幣對，可查看詳細買賣價與趨勢圖。多幣別模式可同時查看一個基準貨幣對所有支援貨幣的即時換算結果，適合旅遊前快速比價。
 
 ### 6. 支援哪些介面語言？
 
diff --git a/apps/ratewise/public/llms-full.txt b/apps/ratewise/public/llms-full.txt
index c93754bb6..afd4818c7 100644
--- a/apps/ratewise/public/llms-full.txt
+++ b/apps/ratewise/public/llms-full.txt
@@ -270,7 +270,7 @@ GET https://app.haotool.org/ratewise/openapi.json
 
 ## Answer Capsule (Q&A for AI Citation)
 
-- Q: HaoRate 提供什麼服務？ A: HaoRate 是台灣最精準的匯率換算工具，顯示臺灣銀行牌告的實際買入賣出四種報價（現金買入、現金賣出、即期買入、即期賣出），而非中間價。支援 18 種貨幣，每 5 分鐘自動同步。
+- Q: HaoRate 提供什麼服務？ A: HaoRate 是以臺灣銀行牌告買賣價為核心的匯率換算工具，顯示實際買入賣出四種報價（現金買入、現金賣出、即期買入、即期賣出），而非中間價。支援 18 種貨幣，約每 5 分鐘檢查更新。
 - Q: 如何取得即時台銀匯率（適合開發者/LLM）？ A: 免費 CDN API：GET https://cdn.jsdelivr.net/gh/haotool/app@data/public/rates/latest.json。回傳欄位 details.{幣別}.cash.sell（現金賣出）、details.{幣別}.cash.buy（現金買入）、details.{幣別}.spot.sell（即期賣出）、details.{幣別}.spot.buy（即期買入）。無需 API Key，CORS 啟用，每 5 分鐘更新。
 - Q: 現金匯率和即期匯率的差別？ A: 現金匯率適用臨櫃換鈔（到銀行換現鈔），即期匯率適用銀行電匯（匯款）。現鈔通常比即期差 1~3%，因為銀行有保管與運送成本。
 - Q: 買入和賣出怎麼看？ A: 買入/賣出是銀行角度。您拿外幣換台幣 → 看「買入」（銀行買你的外幣）；您拿台幣換外幣 → 看「賣出」（銀行賣外幣給你）。
diff --git a/apps/ratewise/public/llms.txt b/apps/ratewise/public/llms.txt
index f65317511..dcee10ec0 100644
--- a/apps/ratewise/public/llms.txt
+++ b/apps/ratewise/public/llms.txt
@@ -1,4 +1,4 @@
-# HaoRate 匯率好工具 — 台灣最精準的匯率換算器
+# HaoRate 匯率好工具 — 台銀牌告買賣價匯率換算器
 
 > 顯示臺灣銀行牌告的實際買入賣出價（不是中間價），讓你換匯前就知道真正要付多少台幣。支援 18 種貨幣、現金與即期匯率切換、計算機快速輸入、收藏與拖曳排序、換算歷史、6 種主題風格、4 語言介面與 PWA 離線使用。
 
@@ -9,7 +9,7 @@ Version: v2.23.0
 - Q: HaoRate 提供什麼？ A: 顯示臺灣銀行牌告的實際買入賣出價（非中間價）的即時匯率換算工具。內建計算機鍵盤（支援四則運算）、快速金額按鈕、收藏管理、拖曳排序、換算歷史紀錄、7~30 天匯率趨勢圖、現金/即期匯率切換、6 種主題風格、4 語言介面與 PWA 離線使用。
 - Q: 為什麼 HaoRate 比其他匯率工具更精準？ A: 多數匯率工具只顯示中間價（mid-rate），而 HaoRate 顯示臺灣銀行牌告的實際買入賣出四種報價（現金買入、現金賣出、即期買入、即期賣出），直接對應你在銀行換匯的真實金額。
 - Q: 匯率資料來源？ A: 臺灣銀行牌告匯率（現金買入/賣出、即期買入/賣出四種報價）。
-- Q: 更新頻率？ A: 每 5 分鐘自動同步。
+- Q: 更新頻率？ A: 約每 5 分鐘檢查並同步；實際新鮮度依臺灣銀行資料、GitHub Actions 佇列與 CDN 快取而定。
 - Q: 建議用途？ A: 出國旅遊換匯、跨境購物匯率比較、日常外幣查詢。
 - Q: 現金匯率和即期匯率的差別？ A: 現金匯率用於臨櫃換外幣紙鈔，即期匯率用於外幣帳戶轉帳或匯款。因銀行持有實鈔有保管、運送、偽鈔鑑定成本，現金匯率通常比即期差約 0.5～2%，換 1,000 美元現金比即期多付約 150～600 元台幣。
 - Q: 買入和賣出怎麼看？ A: 買入/賣出是銀行視角：出國換外幣（你支付台幣）看「賣出」價；回國換台幣（你交出外幣）看「買入」價。台銀買賣價差通常為即期匯率 0.3～1%、現金匯率 1～2%。
@@ -19,14 +19,14 @@ Version: v2.23.0
 ## E-E-A-T Signals
 
 - 專業性：匯率計算邏輯與格式化策略具完整測試覆蓋。
-- 權威性：資料來源為臺灣銀行官方牌告匯率，每 5 分鐘自動同步。
+- 權威性：資料來源為臺灣銀行官方牌告匯率，排程檢查並同步。
 - 可信度：開源 GPL-3.0，透明可驗證；提供聯絡方式。
 - 經驗：專為台灣用戶設計，依各國旅遊消費習慣提供常用金額按鈕。
 
 ## Key Metrics
 
 - 支援貨幣：18 種
-- 更新頻率：每 5 分鐘自動同步
+- 更新頻率：約每 5 分鐘檢查更新
 - 匯率類型：現金買入、現金賣出、即期買入、即期賣出
 - 6 種主題風格（Zen/Nitro/Kawaii/Classic/Ocean/Forest）
 - i18n 4 語言支援（English/繁體中文/日本語/한국어）
@@ -136,7 +136,7 @@ Googlebot 與 AI agent 可直接讀取靜態 HTML：
 
 - Source: 臺灣銀行牌告匯率（Bank of Taiwan）
 - Source URL: https://rate.bot.com.tw/xrt
-- Update: 每 5 分鐘自動同步（GitHub Actions）
+- Update: 約每 5 分鐘檢查更新（GitHub Actions）
 - Rate Types: 現金買入、現金賣出、即期買入、即期賣出
 - Currencies: 18 種（TWD, USD, JPY, EUR, GBP, HKD, CNY, KRW, AUD, CAD, SGD, THB, NZD, CHF, VND, PHP, IDR, MYR）
 - Disclaimer: 匯率僅供參考，實際交易請以金融機構公告為準。
diff --git a/apps/ratewise/public/manifest.webmanifest b/apps/ratewise/public/manifest.webmanifest
index e5cb81e96..95f6c822f 100644
--- a/apps/ratewise/public/manifest.webmanifest
+++ b/apps/ratewise/public/manifest.webmanifest
@@ -2,8 +2,8 @@
   "name": "HaoRate 匯率好工具",
   "short_name": "HaoRate",
   "description": "HaoRate 匯率好工具顯示臺灣銀行牌告實際買賣價（非中間價），支援 18 種貨幣換算，每 5 分鐘同步，離線可用的 PWA 匯率工具。",
-  "theme_color": "#8B5CF6",
-  "background_color": "#E8ECF4",
+  "theme_color": "#7C3AED",
+  "background_color": "#F8FAFC",
   "display": "standalone",
   "scope": "/ratewise/",
   "start_url": "/ratewise/",
diff --git a/apps/ratewise/public/offline.html b/apps/ratewise/public/offline.html
index 1594b5972..5d4d808b9 100644
--- a/apps/ratewise/public/offline.html
+++ b/apps/ratewise/public/offline.html
@@ -2,13 +2,184 @@
 <html lang="zh-TW">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#8B5CF6" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#7C3AED" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title>離線模式 - HaoRate</title>
     <!-- [fix:2026-01-08] 使用相對路徑，確保在任何 base path 下都能正確載入 -->
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+    <script>
+      (function () {
+        var themeColors = {
+          zen: '#7C3AED',
+          nitro: '#0096E6',
+          kawaii: '#BE185D',
+          classic: '#8B4513',
+          ocean: '#06B6D4',
+          forest: '#059669',
+        };
+        var supportedStyles = Object.keys(themeColors);
+        var selectedStyle = 'zen';
+
+        try {
+          var storedTheme = localStorage.getItem('ratewise-theme');
+          if (storedTheme) {
+            var parsedTheme = JSON.parse(storedTheme);
+            if (supportedStyles.indexOf(parsedTheme.style) >= 0) {
+              selectedStyle = parsedTheme.style;
+            }
+          }
+        } catch (e) {
+          selectedStyle = 'zen';
+        }
+
+        document.documentElement.dataset.style = selectedStyle;
+
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+          themeColor.setAttribute('content', themeColors[selectedStyle] || themeColors.zen);
+        }
+      })();
+    </script>
     <style>
+      html[data-style='zen'] {
+        --offline-theme-color: #7c3aed;
+        --offline-background: #f8fafc;
+        --offline-surface: #ffffff;
+        --offline-border: #e2e8f0;
+        --offline-text: #0f172a;
+        --offline-text-muted: #64748b;
+        --offline-primary: #7c3aed;
+        --offline-primary-foreground: #ffffff;
+        --offline-secondary: #6366f1;
+        --offline-accent: #8b5cf6;
+        --offline-primary-tint: rgba(124, 58, 237, 0.08);
+        --offline-primary-border-tint: rgba(124, 58, 237, 0.18);
+        --offline-primary-shadow-soft: rgba(124, 58, 237, 0.18);
+        --offline-primary-shadow-strong: rgba(124, 58, 237, 0.26);
+        --offline-primary-shadow-hover: rgba(124, 58, 237, 0.34);
+        --offline-warning-tint: rgba(245, 158, 11, 0.16);
+        --offline-warning: #f59e0b;
+        --offline-success-tint: rgba(34, 197, 94, 0.12);
+        --offline-success: #22c55e;
+      }
+
+      html[data-style='nitro'] {
+        --offline-theme-color: #0096e6;
+        --offline-background: #020617;
+        --offline-surface: #0f172a;
+        --offline-border: #1e293b;
+        --offline-text: #ffffff;
+        --offline-text-muted: #cbd5e1;
+        --offline-primary: #0096e6;
+        --offline-primary-foreground: #020617;
+        --offline-secondary: #818cf8;
+        --offline-accent: #00ff88;
+        --offline-primary-tint: rgba(0, 150, 230, 0.08);
+        --offline-primary-border-tint: rgba(0, 150, 230, 0.18);
+        --offline-primary-shadow-soft: rgba(0, 150, 230, 0.18);
+        --offline-primary-shadow-strong: rgba(0, 150, 230, 0.26);
+        --offline-primary-shadow-hover: rgba(0, 150, 230, 0.34);
+        --offline-warning-tint: rgba(251, 191, 36, 0.16);
+        --offline-warning: #fbbf24;
+        --offline-success-tint: rgba(52, 211, 153, 0.12);
+        --offline-success: #34d399;
+      }
+
+      html[data-style='kawaii'] {
+        --offline-theme-color: #be185d;
+        --offline-background: #fffaf4;
+        --offline-surface: #ffffff;
+        --offline-border: #ffe4e1;
+        --offline-text: #5c2d3c;
+        --offline-text-muted: #66414c;
+        --offline-primary: #be185d;
+        --offline-primary-foreground: #ffffff;
+        --offline-secondary: #be185d;
+        --offline-accent: #ffb6c1;
+        --offline-primary-tint: rgba(190, 24, 93, 0.08);
+        --offline-primary-border-tint: rgba(190, 24, 93, 0.18);
+        --offline-primary-shadow-soft: rgba(190, 24, 93, 0.18);
+        --offline-primary-shadow-strong: rgba(190, 24, 93, 0.26);
+        --offline-primary-shadow-hover: rgba(190, 24, 93, 0.34);
+        --offline-warning-tint: rgba(253, 224, 71, 0.16);
+        --offline-warning: #fde047;
+        --offline-success-tint: rgba(134, 239, 172, 0.12);
+        --offline-success: #86efac;
+      }
+
+      html[data-style='classic'] {
+        --offline-theme-color: #8b4513;
+        --offline-background: #fffafb;
+        --offline-surface: #ffffff;
+        --offline-border: #f5e6dc;
+        --offline-text: #431407;
+        --offline-text-muted: #78503c;
+        --offline-primary: #8b4513;
+        --offline-primary-foreground: #ffffff;
+        --offline-secondary: #a16207;
+        --offline-accent: #b47850;
+        --offline-primary-tint: rgba(139, 69, 19, 0.08);
+        --offline-primary-border-tint: rgba(139, 69, 19, 0.18);
+        --offline-primary-shadow-soft: rgba(139, 69, 19, 0.18);
+        --offline-primary-shadow-strong: rgba(139, 69, 19, 0.26);
+        --offline-primary-shadow-hover: rgba(139, 69, 19, 0.34);
+        --offline-warning-tint: rgba(180, 83, 9, 0.16);
+        --offline-warning: #b45309;
+        --offline-success-tint: rgba(22, 163, 74, 0.12);
+        --offline-success: #16a34a;
+      }
+
+      html[data-style='ocean'] {
+        --offline-theme-color: #06b6d4;
+        --offline-background: #f0f9ff;
+        --offline-surface: #ffffff;
+        --offline-border: #bae6fd;
+        --offline-text: #075985;
+        --offline-text-muted: #164e63;
+        --offline-primary: #06b6d4;
+        --offline-primary-foreground: #020617;
+        --offline-secondary: #0ea5e9;
+        --offline-accent: #14b8a6;
+        --offline-primary-tint: rgba(6, 182, 212, 0.08);
+        --offline-primary-border-tint: rgba(6, 182, 212, 0.18);
+        --offline-primary-shadow-soft: rgba(6, 182, 212, 0.18);
+        --offline-primary-shadow-strong: rgba(6, 182, 212, 0.26);
+        --offline-primary-shadow-hover: rgba(6, 182, 212, 0.34);
+        --offline-warning-tint: rgba(245, 158, 11, 0.16);
+        --offline-warning: #f59e0b;
+        --offline-success-tint: rgba(20, 184, 166, 0.12);
+        --offline-success: #14b8a6;
+      }
+
+      html[data-style='forest'] {
+        --offline-theme-color: #059669;
+        --offline-background: #f0fdf4;
+        --offline-surface: #ffffff;
+        --offline-border: #bbf7d0;
+        --offline-text: #14532d;
+        --offline-text-muted: #166534;
+        --offline-primary: #059669;
+        --offline-primary-foreground: #020617;
+        --offline-secondary: #16a34a;
+        --offline-accent: #65a30d;
+        --offline-primary-tint: rgba(5, 150, 105, 0.08);
+        --offline-primary-border-tint: rgba(5, 150, 105, 0.18);
+        --offline-primary-shadow-soft: rgba(5, 150, 105, 0.18);
+        --offline-primary-shadow-strong: rgba(5, 150, 105, 0.26);
+        --offline-primary-shadow-hover: rgba(5, 150, 105, 0.34);
+        --offline-warning-tint: rgba(234, 179, 8, 0.16);
+        --offline-warning: #eab308;
+        --offline-success-tint: rgba(34, 197, 94, 0.12);
+        --offline-success: #22c55e;
+      }
+      html[data-style='nitro'] {
+        color-scheme: dark;
+      }
+
       * {
         margin: 0;
         padding: 0;
@@ -19,51 +190,58 @@
         font-family:
           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         min-height: 100vh;
+        min-height: 100dvh;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        background: linear-gradient(135deg, #e8ecf4 0%, #f3e8ff 50%, #ede9fe 100%);
-        padding: 1rem;
+        background: linear-gradient(
+          135deg,
+          var(--offline-background) 0%,
+          var(--offline-primary-tint) 50%,
+          var(--offline-surface) 100%
+        );
+        padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem
+          calc(1rem + env(safe-area-inset-bottom, 0px));
         text-align: center;
       }
 
       .container {
         max-width: 400px;
         padding: 2rem;
-        background: rgba(255, 255, 255, 0.9);
+        background: var(--offline-surface);
         border-radius: 24px;
-        box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
-        border: 1px solid rgba(139, 92, 246, 0.1);
+        box-shadow: 0 8px 32px var(--offline-primary-shadow-soft);
+        border: 1px solid var(--offline-primary-border-tint);
       }
 
       .icon {
         width: 80px;
         height: 80px;
         margin: 0 auto 1.5rem;
-        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+        background: linear-gradient(135deg, var(--offline-primary) 0%, var(--offline-accent) 100%);
         border-radius: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
+        box-shadow: 0 4px 16px var(--offline-primary-shadow-strong);
       }
 
       .icon svg {
         width: 48px;
         height: 48px;
-        color: white;
+        color: var(--offline-primary-foreground);
       }
 
       h1 {
         font-size: 1.5rem;
-        color: #4c1d95;
+        color: var(--offline-text);
         margin-bottom: 0.75rem;
         font-weight: 600;
       }
 
       p {
-        color: #6b7280;
+        color: var(--offline-text-muted);
         line-height: 1.6;
         margin-bottom: 1.5rem;
       }
@@ -73,8 +251,8 @@
         align-items: center;
         gap: 0.5rem;
         padding: 0.5rem 1rem;
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--offline-warning-tint);
+        color: var(--offline-warning);
         border-radius: 9999px;
         font-size: 0.875rem;
         font-weight: 500;
@@ -85,7 +263,7 @@
         content: '';
         width: 8px;
         height: 8px;
-        background: #f59e0b;
+        background: var(--offline-warning);
         border-radius: 50%;
         animation: pulse 2s infinite;
       }
@@ -105,8 +283,12 @@
         align-items: center;
         gap: 0.5rem;
         padding: 0.75rem 1.5rem;
-        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
-        color: white;
+        background: linear-gradient(
+          135deg,
+          var(--offline-primary) 0%,
+          var(--offline-secondary) 100%
+        );
+        color: var(--offline-primary-foreground);
         border: none;
         border-radius: 12px;
         font-size: 1rem;
@@ -115,12 +297,12 @@
         transition:
           transform 0.2s,
           box-shadow 0.2s;
-        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+        box-shadow: 0 4px 12px var(--offline-primary-shadow-strong);
       }
 
       .retry-btn:hover {
         transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
+        box-shadow: 0 6px 16px var(--offline-primary-shadow-hover);
       }
 
       .retry-btn:active {
@@ -130,12 +312,12 @@
       .tips {
         margin-top: 2rem;
         padding-top: 1.5rem;
-        border-top: 1px solid #e5e7eb;
+        border-top: 1px solid var(--offline-border);
       }
 
       .tips h2 {
         font-size: 0.875rem;
-        color: #6b7280;
+        color: var(--offline-text-muted);
         font-weight: 500;
         margin-bottom: 0.75rem;
       }
@@ -150,23 +332,23 @@
         align-items: flex-start;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: #4b5563;
+        color: var(--offline-text);
         margin-bottom: 0.5rem;
       }
 
       .tips li::before {
         content: '•';
-        color: #8b5cf6;
+        color: var(--offline-primary);
         font-weight: bold;
       }
 
       .cached-data {
         margin-top: 1rem;
         padding: 0.75rem;
-        background: #f0fdf4;
+        background: var(--offline-success-tint);
         border-radius: 8px;
         font-size: 0.875rem;
-        color: #166534;
+        color: var(--offline-success);
       }
     </style>
   </head>
diff --git a/apps/ratewise/public/open-data.md b/apps/ratewise/public/open-data.md
index 5ed63efb4..471b90d9c 100644
--- a/apps/ratewise/public/open-data.md
+++ b/apps/ratewise/public/open-data.md
@@ -15,7 +15,7 @@
 | OpenAPI 規格 | https://app.haotool.org/ratewise/openapi.json |
 
 - **免 API Key**、**免費使用**、**CORS 已啟用**。
-- 更新頻率：每 5 分鐘自動同步臺灣銀行牌告。
+- 更新頻率：約每 5 分鐘檢查臺灣銀行牌告並同步；實際新鮮度依來源、GitHub Actions 佇列與 CDN 快取而定。
 - 涵蓋 18 種貨幣的現金買/賣、即期買/賣四種報價。
 
 ## 呼叫範例
@@ -87,7 +87,7 @@ print(data['details']['JPY']['cash']['buy'])
 
 ### 2. jsDelivr CDN 和 GitHub Raw 端點有何差異？
 
-jsDelivr CDN（建議）：全球 PoP 節點加速，無明確請求上限，支援 ETag 條件式請求（瀏覽器可讀取 ETag，實作 If-None-Match 省流量）。GitHub Actions 每次推送 data 分支後自動呼叫 jsDelivr Purge API，CDN 快取立即失效，實際新鮮度約 5 分鐘。GitHub Raw（備援）：無快取，每次請求直接取得最新版本，但每小時限 60 次請求，CORS 不暴露 ETag，瀏覽器端無法使用條件式請求。
+jsDelivr CDN（建議）：全球 PoP 節點加速，無明確請求上限；GitHub Actions 每次推送 data 分支後自動呼叫 jsDelivr Purge API，CDN 快取立即失效，實際新鮮度約 5 分鐘。GitHub Raw（備援）：無快取，每次請求直接取得最新版本，但每小時限 60 次請求。瀏覽器端建議以 HTTP cache 搭配 client 端 5 分鐘快取控制重複請求。
 
 ### 3. 有備援端點嗎？
 
diff --git a/apps/ratewise/public/sell-rate-vs-mid-rate.md b/apps/ratewise/public/sell-rate-vs-mid-rate.md
index cd1b8e7a8..72adfcaae 100644
--- a/apps/ratewise/public/sell-rate-vs-mid-rate.md
+++ b/apps/ratewise/public/sell-rate-vs-mid-rate.md
@@ -1,4 +1,4 @@
-# 賣出價比中間價更接近你真正要付的台幣
+# 賣出價比中間價更接近臨櫃換匯成本
 
 > 解析賣出價、中間價與實際換匯成本差異，說清楚為什麼 Google 或 XE 顯示的中間價不能直接拿來估算換匯預算。HaoRate 聚焦臺灣銀行牌告賣出價，協助台灣用戶在買外幣前更接近真實支付金額與旅費規劃。
 
diff --git a/apps/ratewise/scripts/generate-api-json.mjs b/apps/ratewise/scripts/generate-api-json.mjs
index 7c2fefee6..b3b08c612 100644
--- a/apps/ratewise/scripts/generate-api-json.mjs
+++ b/apps/ratewise/scripts/generate-api-json.mjs
@@ -42,7 +42,7 @@ const exchangeShopProvider = providerMetadata.providers.find(
 const latestJson = {
   name: `${APP_INFO.shortName} Exchange Rate API`,
   version: pkg.version,
-  description: '臺灣銀行牌告匯率靜態 API — 資料每 5 分鐘自動同步，並提供 App 匯率模式欄位對照',
+  description: '臺灣銀行牌告匯率靜態 API — 資料排程檢查並同步，並提供 App 匯率模式欄位對照',
   source: '臺灣銀行牌告匯率',
   sourceUrl: 'https://rate.bot.com.tw/xrt',
   updateFrequency: 'every 5 minutes',
diff --git a/apps/ratewise/scripts/generate-llms-txt.mjs b/apps/ratewise/scripts/generate-llms-txt.mjs
index 9ad4d05b6..55b0a0974 100644
--- a/apps/ratewise/scripts/generate-llms-txt.mjs
+++ b/apps/ratewise/scripts/generate-llms-txt.mjs
@@ -95,7 +95,7 @@ const FEATURES = [
   '6 種主題風格：Zen（極簡專業）、Nitro（深色科技）、Kawaii（可愛粉嫩）、Classic（復古書卷）、Ocean（海洋深邃）、Forest（自然森林）',
 ];
 
-const content = `# ${BRAND_FULL} — 台灣最精準的匯率換算器
+const content = `# ${BRAND_FULL} — 台銀牌告買賣價匯率換算器
 
 > 顯示臺灣銀行牌告的實際買入賣出價（不是中間價），讓你換匯前就知道真正要付多少台幣。支援 ${SUPPORTED_CURRENCY_COUNT} 種貨幣、現金與即期匯率切換、計算機快速輸入、收藏與拖曳排序、換算歷史、6 種主題風格、${SUPPORTED_LANGUAGE_COUNT} 語言介面與 PWA 離線使用。
 
@@ -106,7 +106,7 @@ Version: v${VERSION}
 - Q: ${BRAND_SHORT} 提供什麼？ A: 顯示臺灣銀行牌告的實際買入賣出價（非中間價）的即時匯率換算工具。內建計算機鍵盤（支援四則運算）、快速金額按鈕、收藏管理、拖曳排序、換算歷史紀錄、7~30 天匯率趨勢圖、現金/即期匯率切換、6 種主題風格、${SUPPORTED_LANGUAGE_COUNT} 語言介面與 PWA 離線使用。
 - Q: 為什麼 ${BRAND_SHORT} 比其他匯率工具更精準？ A: 多數匯率工具只顯示中間價（mid-rate），而 ${BRAND_SHORT} 顯示臺灣銀行牌告的實際買入賣出四種報價（現金買入、現金賣出、即期買入、即期賣出），直接對應你在銀行換匯的真實金額。
 - Q: 匯率資料來源？ A: 臺灣銀行牌告匯率（現金買入/賣出、即期買入/賣出四種報價）。
-- Q: 更新頻率？ A: 每 5 分鐘自動同步。
+- Q: 更新頻率？ A: 約每 5 分鐘檢查並同步；實際新鮮度依臺灣銀行資料、GitHub Actions 佇列與 CDN 快取而定。
 - Q: 建議用途？ A: 出國旅遊換匯、跨境購物匯率比較、日常外幣查詢。
 - Q: 現金匯率和即期匯率的差別？ A: 現金匯率用於臨櫃換外幣紙鈔，即期匯率用於外幣帳戶轉帳或匯款。因銀行持有實鈔有保管、運送、偽鈔鑑定成本，現金匯率通常比即期差約 0.5～2%，換 1,000 美元現金比即期多付約 150～600 元台幣。
 - Q: 買入和賣出怎麼看？ A: 買入/賣出是銀行視角：出國換外幣（你支付台幣）看「賣出」價；回國換台幣（你交出外幣）看「買入」價。台銀買賣價差通常為即期匯率 0.3～1%、現金匯率 1～2%。
@@ -116,14 +116,14 @@ Version: v${VERSION}
 ## E-E-A-T Signals
 
 - 專業性：匯率計算邏輯與格式化策略具完整測試覆蓋。
-- 權威性：資料來源為臺灣銀行官方牌告匯率，每 5 分鐘自動同步。
+- 權威性：資料來源為臺灣銀行官方牌告匯率，排程檢查並同步。
 - 可信度：開源 GPL-3.0，透明可驗證；提供聯絡方式。
 - 經驗：專為台灣用戶設計，依各國旅遊消費習慣提供常用金額按鈕。
 
 ## Key Metrics
 
 - 支援貨幣：${SUPPORTED_CURRENCY_COUNT} 種
-- 更新頻率：每 5 分鐘自動同步
+- 更新頻率：約每 5 分鐘檢查更新
 - 匯率類型：現金買入、現金賣出、即期買入、即期賣出
 - 6 種主題風格（Zen/Nitro/Kawaii/Classic/Ocean/Forest）
 - i18n ${SUPPORTED_LANGUAGE_COUNT} 語言支援（${SUPPORTED_LANGUAGE_LABEL_TEXT}）
@@ -190,7 +190,7 @@ ${buildReverseRates()}
 
 - Source: 臺灣銀行牌告匯率（Bank of Taiwan）
 - Source URL: https://rate.bot.com.tw/xrt
-- Update: 每 5 分鐘自動同步（GitHub Actions）
+- Update: 約每 5 分鐘檢查更新（GitHub Actions）
 - Rate Types: 現金買入、現金賣出、即期買入、即期賣出
 - Currencies: ${SUPPORTED_CURRENCY_COUNT} 種（TWD, USD, JPY, EUR, GBP, HKD, CNY, KRW, AUD, CAD, SGD, THB, NZD, CHF, VND, PHP, IDR, MYR）
 - Disclaimer: 匯率僅供參考，實際交易請以金融機構公告為準。
@@ -518,7 +518,7 @@ GET ${BASE_URL}openapi.json
 
 ## Answer Capsule (Q&A for AI Citation)
 
-- Q: ${BRAND_SHORT} 提供什麼服務？ A: ${BRAND_SHORT} 是台灣最精準的匯率換算工具，顯示臺灣銀行牌告的實際買入賣出四種報價（現金買入、現金賣出、即期買入、即期賣出），而非中間價。支援 ${SUPPORTED_CURRENCY_COUNT} 種貨幣，每 5 分鐘自動同步。
+- Q: ${BRAND_SHORT} 提供什麼服務？ A: ${BRAND_SHORT} 是以臺灣銀行牌告買賣價為核心的匯率換算工具，顯示實際買入賣出四種報價（現金買入、現金賣出、即期買入、即期賣出），而非中間價。支援 ${SUPPORTED_CURRENCY_COUNT} 種貨幣，約每 5 分鐘檢查更新。
 - Q: 如何取得即時台銀匯率（適合開發者/LLM）？ A: 免費 CDN API：GET https://cdn.jsdelivr.net/gh/haotool/app@data/public/rates/latest.json。回傳欄位 details.{幣別}.cash.sell（現金賣出）、details.{幣別}.cash.buy（現金買入）、details.{幣別}.spot.sell（即期賣出）、details.{幣別}.spot.buy（即期買入）。無需 API Key，CORS 啟用，每 5 分鐘更新。
 - Q: 現金匯率和即期匯率的差別？ A: 現金匯率適用臨櫃換鈔（到銀行換現鈔），即期匯率適用銀行電匯（匯款）。現鈔通常比即期差 1~3%，因為銀行有保管與運送成本。
 - Q: 買入和賣出怎麼看？ A: 買入/賣出是銀行角度。您拿外幣換台幣 → 看「買入」（銀行買你的外幣）；您拿台幣換外幣 → 看「賣出」（銀行賣外幣給你）。
diff --git a/apps/ratewise/scripts/generate-manifest.mjs b/apps/ratewise/scripts/generate-manifest.mjs
index 730c9b0c0..d8b485e43 100644
--- a/apps/ratewise/scripts/generate-manifest.mjs
+++ b/apps/ratewise/scripts/generate-manifest.mjs
@@ -2,6 +2,7 @@ import { readFileSync, writeFileSync } from 'node:fs';
 import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { APP_INFO, APP_MANIFEST } from '../src/config/app-info.ts';
+import { STYLE_DEFINITIONS } from '../src/config/themes.ts';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = resolve(__dirname, '..');
@@ -16,13 +17,23 @@ const constantsContent = readFileSync(constantsPath, 'utf-8');
 const currencyCount = [...constantsContent.matchAll(/^\s+([A-Z]{3}):\s*\{/gm)].length;
 
 const versioned = (path) => `${path}?v=${VERSION_TOKEN}`;
+const zenColors = STYLE_DEFINITIONS.zen.colors;
+
+function rgbTripletToHex(rgbTriplet) {
+  return `#${rgbTriplet
+    .trim()
+    .split(/\s+/)
+    .map((value) => Number.parseInt(value, 10).toString(16).padStart(2, '0'))
+    .join('')
+    .toUpperCase()}`;
+}
 
 const manifest = {
   name: APP_INFO.name,
   short_name: APP_MANIFEST.shortName,
   description: `${APP_INFO.name}顯示臺灣銀行牌告實際買賣價（非中間價），支援 ${currencyCount} 種貨幣換算，每 5 分鐘同步，離線可用的 PWA 匯率工具。`,
-  theme_color: '#8B5CF6',
-  background_color: '#E8ECF4',
+  theme_color: rgbTripletToHex(zenColors.primary),
+  background_color: rgbTripletToHex(zenColors.background),
   display: 'standalone',
   scope: '/ratewise/',
   start_url: '/ratewise/',
diff --git a/apps/ratewise/scripts/generate-markdown-mirrors.mjs b/apps/ratewise/scripts/generate-markdown-mirrors.mjs
index 3662a7a65..152624602 100644
--- a/apps/ratewise/scripts/generate-markdown-mirrors.mjs
+++ b/apps/ratewise/scripts/generate-markdown-mirrors.mjs
@@ -256,7 +256,7 @@ ${APP_INFO.shortName} 是以臺灣銀行牌告匯率為基礎的換匯工具，
 ## 資料方法與範圍
 
 - 資料來源為臺灣銀行官方牌告匯率，涵蓋 ${SUPPORTED_CURRENCY_COUNT} 種貨幣。
-- 每 5 分鐘自動同步最新報價，涵蓋現金買入、現金賣出、即期買入、即期賣出四種。
+- 約每 5 分鐘檢查最新報價並同步，涵蓋現金買入、現金賣出、即期買入、即期賣出四種；實際時間依臺灣銀行資料、GitHub Actions 佇列與 CDN 快取而定。
 - 資料管線：GitHub Actions 每日抓取 + 雙重驗證（台銀牌告 vs open.er-api.com 中間價，誤差 ≤ 2%）+ Pull Request 自動審核後合併至 data branch。
 - 匯差範例數字透過 SSG（vite-react-ssg）於 build 期嵌入靜態 HTML，搜尋引擎無需執行 JavaScript 即可讀取。
 
@@ -265,7 +265,7 @@ ${APP_INFO.shortName} 是以臺灣銀行牌告匯率為基礎的換匯工具，
 - **PWA 離線使用**：Service Worker 預快取，無網路仍可換算。
 - **SSG 預渲染**：所有 SEO 頁面於 build 期產生靜態 HTML。
 - **結構化資料**：JSON-LD 包含 WebSite、Organization、SoftwareApplication、CurrencyConversionService（首頁）、ExchangeRateSpecification（幣別頁）、HowTo、BreadcrumbList、Article、FAQPage（限 /faq/）、Dataset（開放資料）與 ImageObject。
-- **AI 友善**：robots.txt 允許 OpenAI / Anthropic / Perplexity / Google / Apple / DeepSeek / Mistral 等 ${ALL_AI_CRAWLERS.length}+ 主流 AI 爬蟲（四層治理）；提供 llms.txt、llms-full.txt、openapi.json 供 LLM 引用。
+- **機器可讀**：robots.txt 允許 OpenAI / Anthropic / Perplexity / Google / Apple / DeepSeek / Mistral 等 ${ALL_AI_CRAWLERS.length}+ 主流 AI 爬蟲（四層治理）；提供 llms.txt、llms-full.txt、openapi.json 供 LLM 工具引用。
 - **開放原始碼**：所有程式碼公開於 GitHub（${APP_INFO.github}）。
 
 ## 作者
@@ -390,7 +390,7 @@ function buildOpenDataMd() {
 | OpenAPI 規格 | ${BASE_URL}openapi.json |
 
 - **免 API Key**、**免費使用**、**CORS 已啟用**。
-- 更新頻率：每 5 分鐘自動同步臺灣銀行牌告。
+- 更新頻率：約每 5 分鐘檢查臺灣銀行牌告並同步；實際新鮮度依來源、GitHub Actions 佇列與 CDN 快取而定。
 - 涵蓋 ${SUPPORTED_CURRENCY_COUNT} 種貨幣的現金買/賣、即期買/賣四種報價。
 
 ## 呼叫範例
diff --git a/apps/ratewise/scripts/generate-offline-html.mjs b/apps/ratewise/scripts/generate-offline-html.mjs
index fc2a9d2fa..0b2cb9a0f 100644
--- a/apps/ratewise/scripts/generate-offline-html.mjs
+++ b/apps/ratewise/scripts/generate-offline-html.mjs
@@ -1,24 +1,130 @@
 import { readFileSync, writeFileSync } from 'node:fs';
 import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { format, resolveConfig } from 'prettier';
 import { APP_INFO } from '../src/config/app-info.ts';
+import { STYLE_DEFINITIONS } from '../src/config/themes.ts';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = resolve(__dirname, '..');
+const zenColors = STYLE_DEFINITIONS.zen.colors;
+const DARK_TEXT_COLOR = '2 6 23';
+const LIGHT_TEXT_COLOR = '255 255 255';
+
+function rgbTripletToHex(rgbTriplet) {
+  return `#${rgbTriplet
+    .trim()
+    .split(/\s+/)
+    .map((value) => Number.parseInt(value, 10).toString(16).padStart(2, '0'))
+    .join('')
+    .toUpperCase()}`;
+}
+
+function rgbTripletToRgba(rgbTriplet, alpha) {
+  const rgb = rgbTriplet
+    .trim()
+    .split(/\s+/)
+    .map((value) => Number.parseInt(value, 10))
+    .join(', ');
+
+  return `rgba(${rgb}, ${alpha})`;
+}
+
+function rgbTripletToNumbers(rgbTriplet) {
+  return rgbTriplet
+    .trim()
+    .split(/\s+/)
+    .map((value) => Number.parseInt(value, 10));
+}
+
+function relativeLuminance(rgbTriplet) {
+  const [red, green, blue] = rgbTripletToNumbers(rgbTriplet).map((channel) => {
+    const value = channel / 255;
+    return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  });
+
+  return red * 0.2126 + green * 0.7152 + blue * 0.0722;
+}
+
+function contrastRatio(foreground, background) {
+  const foregroundLuminosity = relativeLuminance(foreground);
+  const backgroundLuminosity = relativeLuminance(background);
+  const lighter = Math.max(foregroundLuminosity, backgroundLuminosity);
+  const darker = Math.min(foregroundLuminosity, backgroundLuminosity);
+
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function choosePrimaryForeground(primary) {
+  return contrastRatio(LIGHT_TEXT_COLOR, primary) >= contrastRatio(DARK_TEXT_COLOR, primary)
+    ? LIGHT_TEXT_COLOR
+    : DARK_TEXT_COLOR;
+}
+
+function buildOfflineStyleBlock([styleName, definition]) {
+  const { colors } = definition;
+  const primaryForeground = choosePrimaryForeground(colors.primary);
+
+  return `html[data-style='${styleName}'] {
+        --offline-theme-color: ${rgbTripletToHex(colors.primary)};
+        --offline-background: ${rgbTripletToHex(colors.background)};
+        --offline-surface: ${rgbTripletToHex(colors.surface)};
+        --offline-border: ${rgbTripletToHex(colors.border)};
+        --offline-text: ${rgbTripletToHex(colors.text)};
+        --offline-text-muted: ${rgbTripletToHex(colors.textMuted)};
+        --offline-primary: ${rgbTripletToHex(colors.primary)};
+        --offline-primary-foreground: ${rgbTripletToHex(primaryForeground)};
+        --offline-secondary: ${rgbTripletToHex(colors.secondary)};
+        --offline-accent: ${rgbTripletToHex(colors.accent)};
+        --offline-primary-tint: ${rgbTripletToRgba(colors.primary, 0.08)};
+        --offline-primary-border-tint: ${rgbTripletToRgba(colors.primary, 0.18)};
+        --offline-primary-shadow-soft: ${rgbTripletToRgba(colors.primary, 0.18)};
+        --offline-primary-shadow-strong: ${rgbTripletToRgba(colors.primary, 0.26)};
+        --offline-primary-shadow-hover: ${rgbTripletToRgba(colors.primary, 0.34)};
+        --offline-warning-tint: ${rgbTripletToRgba(colors.warning, 0.16)};
+        --offline-warning: ${rgbTripletToHex(colors.warning)};
+        --offline-success-tint: ${rgbTripletToRgba(colors.success, 0.12)};
+        --offline-success: ${rgbTripletToHex(colors.success)};
+      }`;
+}
+
+const themeColorMap = Object.fromEntries(
+  Object.entries(STYLE_DEFINITIONS).map(([styleName, definition]) => [
+    styleName,
+    rgbTripletToHex(definition.colors.primary),
+  ]),
+);
+
+const offlineThemeTokens = {
+  __THEME_COLOR__: rgbTripletToHex(zenColors.primary),
+  __OFFLINE_STYLE_BLOCKS__: Object.entries(STYLE_DEFINITIONS)
+    .map(buildOfflineStyleBlock)
+    .join('\n\n      '),
+  __OFFLINE_THEME_COLOR_MAP__: JSON.stringify(themeColorMap),
+};
 
 function substitute(template) {
-  return template
-    .replace(/__BRAND_SHORT__/g, APP_INFO.shortName)
-    .replace(/__BRAND_FULL__/g, APP_INFO.name);
+  return Object.entries(offlineThemeTokens).reduce(
+    (content, [token, value]) => content.replace(new RegExp(token, 'g'), value),
+    template
+      .replace(/__BRAND_SHORT__/g, APP_INFO.shortName)
+      .replace(/__BRAND_FULL__/g, APP_INFO.name),
+  );
 }
 
-function generate(templatePath, outPath) {
+async function generate(templatePath, outPath) {
   const template = readFileSync(resolve(ROOT, templatePath), 'utf-8');
-  writeFileSync(resolve(ROOT, outPath), substitute(template));
+  const content = substitute(template);
+  const absoluteOutPath = resolve(ROOT, outPath);
+  const prettierConfig = (await resolveConfig(absoluteOutPath)) ?? {};
+  const formatted = outPath.endsWith('.html')
+    ? await format(content, { ...prettierConfig, filepath: absoluteOutPath })
+    : content;
+  writeFileSync(absoluteOutPath, formatted);
   console.log(`  ✅ ${outPath}`);
 }
 
 console.log('🧾 生成靜態資源（從品牌模板）...');
-generate('scripts/templates/offline.template.html', 'public/offline.html');
-generate('scripts/templates/security.template.txt', 'public/.well-known/security.txt');
+await generate('scripts/templates/offline.template.html', 'public/offline.html');
+await generate('scripts/templates/security.template.txt', 'public/.well-known/security.txt');
 console.log('✅ 靜態品牌資源生成完成');
diff --git a/apps/ratewise/scripts/prebuild-fetch-rates.mjs b/apps/ratewise/scripts/prebuild-fetch-rates.mjs
index 5fad6bf81..9acc672ed 100755
--- a/apps/ratewise/scripts/prebuild-fetch-rates.mjs
+++ b/apps/ratewise/scripts/prebuild-fetch-rates.mjs
@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 
 /**
- * 構建時匯率數據獲取腳本
- * 在 vite build 前執行，獲取最新匯率並保存到 public/rates.json
- * 用於 SSG 預渲染時注入到靜態 HTML
+ * 匯率快照刷新腳本
+ * 顯式刷新本機 public/rates.json；設定 RATEWISE_WRITE_FALLBACK_RATES=1 時同步更新 build-time fallback snapshot
  *
- * 使用：pnpm run prebuild:fetch-rates
+ * 使用：pnpm refresh:rates
+ * 使用：pnpm refresh:fallback-rates
  */
 
 import fs from 'fs';
@@ -21,6 +21,7 @@ const GENERATED_CONFIG_PATH = path.resolve(APP_ROOT, 'src/config/generated');
 const RATES_CACHE_PATH = path.resolve(PUBLIC_PATH, 'rates.json');
 const BUILD_TIME_RATES_PATH = path.resolve(GENERATED_CONFIG_PATH, 'build-time-rates.json');
 const MAX_CACHE_AGE_MS = 24 * 60 * 60 * 1000;
+const SHOULD_WRITE_FALLBACK_SNAPSHOT = process.env.RATEWISE_WRITE_FALLBACK_RATES === '1';
 
 function parseRateTimestamp(value) {
   if (typeof value === 'number' && Number.isFinite(value)) {
@@ -79,7 +80,8 @@ async function fetchLatestRates() {
       throw new Error('API 返回數據格式無效');
     }
 
-    console.log(`✅ 成功獲取 ${Object.keys(data).length} 個幣別的匯率`);
+    const currencyCount = Object.keys(data.rates ?? {}).length;
+    console.log(`✅ 成功獲取 ${currencyCount} 個幣別的匯率`);
     return data;
   } catch (error) {
     console.warn(`⚠️  API 獲取失敗（${error.message}），嘗試使用緩存...`);
@@ -101,8 +103,9 @@ function loadCachedRates() {
       } else {
         const ageMs = Date.now() - cacheTimestamp;
         if (ageMs <= MAX_CACHE_AGE_MS) {
+          const cachedCurrencyCount = Object.keys(cached.rates ?? {}).length;
           console.log(
-            `✅ 使用緩存匯率（年齡 ${formatAgeHours(ageMs)}，${Object.keys(cached).length} 個頂層欄位）`,
+            `✅ 使用緩存匯率（年齡 ${formatAgeHours(ageMs)}，${cachedCurrencyCount} 個幣別）`,
           );
           return cached;
         }
@@ -241,27 +244,31 @@ function getDefaultRates() {
 }
 
 /**
- * 保存匯率到 public/rates.json 與可追蹤的 src/config/generated snapshot。
- *
- * public/rates.json 是 build 暫存快取且被 .gitignore 忽略；app runtime 的首屏 fallback
- * 必須讀取已 commit 的 generated snapshot，避免 clean checkout 在 typecheck/dev 前缺檔。
+ * 保存匯率到 public/rates.json；只有明確要求時才更新可追蹤 fallback snapshot。
  */
 function saveRates(rates) {
   try {
+    if (SHOULD_WRITE_FALLBACK_SNAPSHOT && rates.source === 'Default fallback rates') {
+      console.error('❌ 拒絕使用預設匯率更新 build-time fallback snapshot');
+      return false;
+    }
+
     // 確保目錄存在
     if (!fs.existsSync(PUBLIC_PATH)) {
       fs.mkdirSync(PUBLIC_PATH, { recursive: true });
     }
-    if (!fs.existsSync(GENERATED_CONFIG_PATH)) {
-      fs.mkdirSync(GENERATED_CONFIG_PATH, { recursive: true });
-    }
 
     const payload = `${JSON.stringify(rates, null, 2)}\n`;
     fs.writeFileSync(RATES_CACHE_PATH, payload, 'utf-8');
-    fs.writeFileSync(BUILD_TIME_RATES_PATH, payload, 'utf-8');
 
     console.log(`✅ 匯率已保存到：${RATES_CACHE_PATH}`);
-    console.log(`✅ build-time 匯率 snapshot 已保存到：${BUILD_TIME_RATES_PATH}`);
+    if (SHOULD_WRITE_FALLBACK_SNAPSHOT) {
+      if (!fs.existsSync(GENERATED_CONFIG_PATH)) {
+        fs.mkdirSync(GENERATED_CONFIG_PATH, { recursive: true });
+      }
+      fs.writeFileSync(BUILD_TIME_RATES_PATH, payload, 'utf-8');
+      console.log(`✅ build-time 匯率 snapshot 已保存到：${BUILD_TIME_RATES_PATH}`);
+    }
     return true;
   } catch (error) {
     console.error(`❌ 保存匯率失敗：${error.message}`);
@@ -273,7 +280,7 @@ function saveRates(rates) {
  * 主函數
  */
 async function main() {
-  console.log(`\n📊 ${APP_INFO.shortName} 構建時匯率數據預處理`);
+  console.log(`\n📊 ${APP_INFO.shortName} 匯率快照刷新`);
   console.log('═'.repeat(50));
 
   // 1. 獲取匯率
@@ -295,7 +302,7 @@ async function main() {
   console.log(`   canonical 金額頁：${indexableAmountPages} 個`);
   console.log(`   預渲染靜態頁：${STATS.total} 個`);
 
-  console.log('\n✅ 構建前準備完成！');
+  console.log('\n✅ 匯率快照刷新完成！');
   console.log('═'.repeat(50) + '\n');
 }
 
diff --git a/apps/ratewise/scripts/templates/offline.template.html b/apps/ratewise/scripts/templates/offline.template.html
index 1ebbdabba..d96f577a6 100644
--- a/apps/ratewise/scripts/templates/offline.template.html
+++ b/apps/ratewise/scripts/templates/offline.template.html
@@ -2,13 +2,46 @@
 <html lang="zh-TW">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#8B5CF6" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="__THEME_COLOR__" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title>離線模式 - __BRAND_SHORT__</title>
     <!-- [fix:2026-01-08] 使用相對路徑，確保在任何 base path 下都能正確載入 -->
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+    <script>
+      (function () {
+        var themeColors = __OFFLINE_THEME_COLOR_MAP__;
+        var supportedStyles = Object.keys(themeColors);
+        var selectedStyle = 'zen';
+
+        try {
+          var storedTheme = localStorage.getItem('ratewise-theme');
+          if (storedTheme) {
+            var parsedTheme = JSON.parse(storedTheme);
+            if (supportedStyles.indexOf(parsedTheme.style) >= 0) {
+              selectedStyle = parsedTheme.style;
+            }
+          }
+        } catch (e) {
+          selectedStyle = 'zen';
+        }
+
+        document.documentElement.dataset.style = selectedStyle;
+
+        var themeColor = document.querySelector('meta[name="theme-color"]');
+        if (themeColor) {
+          themeColor.setAttribute('content', themeColors[selectedStyle] || themeColors.zen);
+        }
+      })();
+    </script>
     <style>
+      __OFFLINE_STYLE_BLOCKS__ html[data-style='nitro'] {
+        color-scheme: dark;
+      }
+
       * {
         margin: 0;
         padding: 0;
@@ -19,51 +52,58 @@
         font-family:
           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         min-height: 100vh;
+        min-height: 100dvh;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        background: linear-gradient(135deg, #e8ecf4 0%, #f3e8ff 50%, #ede9fe 100%);
-        padding: 1rem;
+        background: linear-gradient(
+          135deg,
+          var(--offline-background) 0%,
+          var(--offline-primary-tint) 50%,
+          var(--offline-surface) 100%
+        );
+        padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem
+          calc(1rem + env(safe-area-inset-bottom, 0px));
         text-align: center;
       }
 
       .container {
         max-width: 400px;
         padding: 2rem;
-        background: rgba(255, 255, 255, 0.9);
+        background: var(--offline-surface);
         border-radius: 24px;
-        box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
-        border: 1px solid rgba(139, 92, 246, 0.1);
+        box-shadow: 0 8px 32px var(--offline-primary-shadow-soft);
+        border: 1px solid var(--offline-primary-border-tint);
       }
 
       .icon {
         width: 80px;
         height: 80px;
         margin: 0 auto 1.5rem;
-        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+        background: linear-gradient(135deg, var(--offline-primary) 0%, var(--offline-accent) 100%);
         border-radius: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
+        box-shadow: 0 4px 16px var(--offline-primary-shadow-strong);
       }
 
       .icon svg {
         width: 48px;
         height: 48px;
-        color: white;
+        color: var(--offline-primary-foreground);
       }
 
       h1 {
         font-size: 1.5rem;
-        color: #4c1d95;
+        color: var(--offline-text);
         margin-bottom: 0.75rem;
         font-weight: 600;
       }
 
       p {
-        color: #6b7280;
+        color: var(--offline-text-muted);
         line-height: 1.6;
         margin-bottom: 1.5rem;
       }
@@ -73,8 +113,8 @@
         align-items: center;
         gap: 0.5rem;
         padding: 0.5rem 1rem;
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--offline-warning-tint);
+        color: var(--offline-warning);
         border-radius: 9999px;
         font-size: 0.875rem;
         font-weight: 500;
@@ -85,7 +125,7 @@
         content: '';
         width: 8px;
         height: 8px;
-        background: #f59e0b;
+        background: var(--offline-warning);
         border-radius: 50%;
         animation: pulse 2s infinite;
       }
@@ -105,8 +145,12 @@
         align-items: center;
         gap: 0.5rem;
         padding: 0.75rem 1.5rem;
-        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
-        color: white;
+        background: linear-gradient(
+          135deg,
+          var(--offline-primary) 0%,
+          var(--offline-secondary) 100%
+        );
+        color: var(--offline-primary-foreground);
         border: none;
         border-radius: 12px;
         font-size: 1rem;
@@ -115,12 +159,12 @@
         transition:
           transform 0.2s,
           box-shadow 0.2s;
-        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+        box-shadow: 0 4px 12px var(--offline-primary-shadow-strong);
       }
 
       .retry-btn:hover {
         transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
+        box-shadow: 0 6px 16px var(--offline-primary-shadow-hover);
       }
 
       .retry-btn:active {
@@ -130,12 +174,12 @@
       .tips {
         margin-top: 2rem;
         padding-top: 1.5rem;
-        border-top: 1px solid #e5e7eb;
+        border-top: 1px solid var(--offline-border);
       }
 
       .tips h2 {
         font-size: 0.875rem;
-        color: #6b7280;
+        color: var(--offline-text-muted);
         font-weight: 500;
         margin-bottom: 0.75rem;
       }
@@ -150,23 +194,23 @@
         align-items: flex-start;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: #4b5563;
+        color: var(--offline-text);
         margin-bottom: 0.5rem;
       }
 
       .tips li::before {
         content: '•';
-        color: #8b5cf6;
+        color: var(--offline-primary);
         font-weight: bold;
       }
 
       .cached-data {
         margin-top: 1rem;
         padding: 0.75rem;
-        background: #f0fdf4;
+        background: var(--offline-success-tint);
         border-radius: 8px;
         font-size: 0.875rem;
-        color: #166534;
+        color: var(--offline-success);
       }
     </style>
   </head>
diff --git a/apps/ratewise/seo-paths.config.mjs b/apps/ratewise/seo-paths.config.mjs
index 08ab29840..ceb777653 100644
--- a/apps/ratewise/seo-paths.config.mjs
+++ b/apps/ratewise/seo-paths.config.mjs
@@ -168,29 +168,21 @@ export const INDEXABLE_CANONICAL_PATHS = [
 export const SEO_PATHS = INDEXABLE_CANONICAL_PATHS;
 
 /**
- * 需要回傳 app shell 的互動頁面（app-only）
- *
- * 排列順序：前 3 個為使用者功能頁（noindex 處理），後 4 個為開發展示頁（Disallow 處理）
- * ─ 使用者功能頁：允許爬取，由 SEOHelmet noindex 排除索引（Google 官方建議）
- * ─ 開發展示頁：直接 Disallow，無使用者價值，無需 noindex
+ * 需要回傳 app shell 的使用者功能頁（app-only）
  *
  * 注：/seo-tech/ 已移至 CONTENT_SEO_PATHS 成為可索引頁面（2026-04-07）
  */
-export const APP_ONLY_PATHS = [
-  '/multi/',
-  '/favorites/',
-  '/settings/',
+export const APP_ONLY_NOINDEX_PATHS = ['/multi/', '/favorites/', '/settings/'];
+
+/** 開發 / 展示頁：正式 build 不註冊、不預渲染；robots 仍明確 Disallow。 */
+export const DEV_ONLY_PATHS = [
   '/theme-showcase/',
   '/color-scheme/',
   '/update-prompt-test/',
   '/ui-showcase/',
 ];
 
-/** 使用者功能頁子集（前 3）：允許爬取 + noindex meta */
-export const APP_ONLY_NOINDEX_PATHS = APP_ONLY_PATHS.slice(0, 3);
-
-/** 開發 / 展示頁子集（後 4）：Disallow 爬取 */
-export const DEV_ONLY_PATHS = APP_ONLY_PATHS.slice(3);
+export const APP_ONLY_PATHS = [...APP_ONLY_NOINDEX_PATHS];
 
 /**
  * 需要預渲染的 app-only 路由
@@ -316,8 +308,8 @@ export function getIncludedRoutes(paths) {
 export const SITE_CONFIG = {
   url: withTrailingSlash('https://app.haotool.org/ratewise/'),
   name: APP_INFO.name,
-  title: `${APP_INFO.shortName} — 台灣最精準匯率換算器`,
-  description: `${APP_INFO.shortName} 是台灣最精準的匯率換算工具，顯示臺灣銀行牌告的實際買入賣出價（非中間價），讓你換匯前清楚知道要付多少台幣。支援 18 種貨幣即時換算、現金/即期匯率切換、7-30 天歷史趨勢圖、PWA 離線使用，每 5 分鐘自動同步，免費無廣告無註冊。`,
+  title: `${APP_INFO.shortName} — 台銀牌告買賣價匯率換算器`,
+  description: `${APP_INFO.shortName} 以臺灣銀行牌告買賣價為核心，顯示實際買入賣出價（非中間價），協助換匯前參考估算台幣成本。支援 18 種貨幣換算、現金/即期匯率切換、7-30 天歷史趨勢圖、PWA 離線使用，約每 5 分鐘檢查更新，免費無廣告無註冊。`,
 };
 
 /**
diff --git a/apps/ratewise/src/__tests__/markdown-mirror.test.ts b/apps/ratewise/src/__tests__/markdown-mirror.test.ts
index 9315e8be4..b3024be5f 100644
--- a/apps/ratewise/src/__tests__/markdown-mirror.test.ts
+++ b/apps/ratewise/src/__tests__/markdown-mirror.test.ts
@@ -135,7 +135,7 @@ describe('Authority guide Markdown mirrors', () => {
   const authorityGuides = [
     {
       slug: 'sell-rate-vs-mid-rate',
-      heading: '賣出價比中間價更接近你真正要付的台幣',
+      heading: '賣出價比中間價更接近臨櫃換匯成本',
       keyContent: '中間價',
       faqKeyword: '換匯',
     },
diff --git a/apps/ratewise/src/__tests__/sw.test.ts b/apps/ratewise/src/__tests__/sw.test.ts
index 4b80b5591..17e34de00 100644
--- a/apps/ratewise/src/__tests__/sw.test.ts
+++ b/apps/ratewise/src/__tests__/sw.test.ts
@@ -9,7 +9,52 @@
  * [test:2026-01-10] PWA 離線功能測試
  */
 
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeAll, afterEach } from 'vitest';
+
+const { matchPrecacheMock, navigationHandlerRef } = vi.hoisted(() => ({
+  matchPrecacheMock: vi.fn(),
+  navigationHandlerRef: {
+    current: null as
+      | ((params: { event: ExtendableEvent; request: Request }) => Promise<Response>)
+      | null,
+  },
+}));
+
+vi.mock('workbox-core', () => ({
+  clientsClaim: vi.fn(),
+}));
+
+vi.mock('workbox-precaching', () => ({
+  cleanupOutdatedCaches: vi.fn(),
+  matchPrecache: (...args: unknown[]) => matchPrecacheMock(...args),
+  precacheAndRoute: vi.fn(),
+}));
+
+vi.mock('workbox-routing', () => ({
+  NavigationRoute: class NavigationRoute {
+    constructor(
+      handler: (params: { event: ExtendableEvent; request: Request }) => Promise<Response>,
+    ) {
+      navigationHandlerRef.current = handler;
+    }
+  },
+  registerRoute: vi.fn(),
+  setCatchHandler: vi.fn(),
+}));
+
+vi.mock('workbox-strategies', () => ({
+  CacheFirst: class CacheFirst {},
+  NetworkOnly: class NetworkOnly {},
+  StaleWhileRevalidate: class StaleWhileRevalidate {},
+}));
+
+vi.mock('workbox-cacheable-response', () => ({
+  CacheableResponsePlugin: class CacheableResponsePlugin {},
+}));
+
+vi.mock('workbox-expiration', () => ({
+  ExpirationPlugin: class ExpirationPlugin {},
+}));
 
 // Mock ServiceWorkerGlobalScope
 const mockScope = 'https://example.com/ratewise/';
@@ -151,24 +196,28 @@ describe('Service Worker Cache Strategies', () => {
     'static-resources': { strategy: 'CacheFirst', maxAge: 30 * 24 * 60 * 60 },
   };
 
-  it('should use NavigationRoute + bounded SWR-style handler for zero-white-screen navigation', async () => {
+  it('should use NavigationRoute + hybrid SWR + precache-first handler for zero-white-screen navigation', async () => {
     const fs = await import('node:fs/promises');
     const path = await import('node:path');
 
     const swPath = path.resolve(__dirname, '../sw.ts');
     const sourceCode = await fs.readFile(swPath, 'utf-8');
 
-    // 已 install 過的 PWA 與已 visited 的瀏覽器：cache hit 立即返回，背景 revalidate。
-    // cache miss 則保留 3 秒 bounded fallback，避免慢網路下白屏。
+    // 暖快取：cache hit 立即返回，背景 revalidate（SWR）。
+    // 冷快取：precache index.html 立即回傳，背景抓最新版本寫入 html-cache。
+    // 避免 3s timeout 在 iOS precache 被驅逐時錯誤回傳 offline.html 給在線用戶。
     expect(sourceCode).toContain('handleNavigationRequest');
     expect(sourceCode).toContain('new NavigationRoute(handleNavigationRequest)');
-    expect(sourceCode).toContain('event.waitUntil(');
     expect(sourceCode).toContain('fetchAndCacheNavigation(request, cache)');
-    expect(sourceCode).toContain(
-      'event.waitUntil(networkResponse.then(() => undefined).catch(() => undefined))',
-    );
+    expect(sourceCode).toContain("matchPrecache('index.html')");
     // 防回歸：禁止重新引入 NetworkFirst navigation（cold-start 白屏根因之一）。
     expect(sourceCode).not.toContain('new NetworkFirst(');
+    // 防回歸：禁止重新引入 3s 全域 navigation timeout（iOS eviction 假離線根因）。
+    expect(sourceCode).not.toContain('const NAVIGATION_NETWORK_TIMEOUT_MS');
+    expect(sourceCode).not.toContain('Promise.race([networkResponse, timeoutFallback])');
+    // case 3（precache 已 miss）允許 8s bounded race，避免 hung network 無限白屏。
+    expect(sourceCode).toContain('const NAVIGATION_FETCH_TIMEOUT_MS = 8000');
+    expect(sourceCode).toContain('navigation-fetch-timeout');
   });
 
   it('should have correct historical rates cache configuration', () => {
@@ -194,6 +243,18 @@ describe('Service Worker Cache Strategies', () => {
     expect(sourceCode).toContain('new NetworkOnly(');
   });
 
+  it('should cache both legacy and provider-scoped aggregate history routes', async () => {
+    const fs = await import('node:fs/promises');
+    const path = await import('node:path');
+
+    const swPath = path.resolve(__dirname, '../sw.ts');
+    const sourceCode = await fs.readFile(swPath, 'utf-8');
+
+    expect(sourceCode).toContain('/public/rates/history-30d.json');
+    expect(sourceCode).toContain('/public/rates/providers/moneybox/history-30d.json');
+    expect(sourceCode).toContain("cacheName: 'history-aggregate-cache'");
+  });
+
   // 🔴 RED: JS/CSS 應使用 CacheFirst（Vite hash-based filenames 是 immutable）
   it('should use CacheFirst for JS/CSS static resources (hash-based filenames are immutable)', async () => {
     const fs = await import('node:fs/promises');
@@ -237,12 +298,13 @@ describe('Service Worker Cache Strategies', () => {
     const swPath = path.resolve(__dirname, '../sw.ts');
     const sourceCode = await fs.readFile(swPath, 'utf-8');
 
-    // bounded SWR-style navigation → resolveOfflineDocumentFallback helper（含三層 fallback + emergency HTML）。
+    // precache-first SWR navigation → resolveOfflineDocumentFallback helper（含三層 fallback + emergency HTML）。
+    // 注意：已從 Promise.race timeout 改為 precache-first 方案（避免 iOS precache 被驅逐時誤回 offline.html）。
     expect(sourceCode).toContain('new NavigationRoute(');
     expect(sourceCode).toContain('resolveOfflineDocumentFallback');
     expect(sourceCode).toContain("emergencyReason: 'emergency-navigation-fallback'");
-    expect(sourceCode).toContain('const NAVIGATION_NETWORK_TIMEOUT_MS = 3000');
-    expect(sourceCode).toContain('Promise.race([networkResponse, timeoutFallback])');
+    expect(sourceCode).toContain("matchPrecache('index.html')");
+    expect(sourceCode).toContain('fetchAndCacheNavigation');
     // 防回歸：navigation 不可重新引入 NetworkFirst（cold-start 白屏根因之一）。
     expect(sourceCode).not.toContain('new NetworkFirst(');
   });
@@ -383,3 +445,118 @@ describe('Service Worker Denylist', () => {
     expect(isDenied('/faq')).toBe(false);
   });
 });
+
+describe('handleNavigationRequest', () => {
+  const htmlCacheName = 'html-cache';
+  const navigationUrl = 'https://example.com/ratewise/about';
+  const offlineHtml = '<html>offline fallback</html>';
+
+  let htmlCache: {
+    match: ReturnType<typeof vi.fn>;
+    put: ReturnType<typeof vi.fn>;
+  };
+  let cachesOpen: ReturnType<typeof vi.fn>;
+  let cachesMatch: ReturnType<typeof vi.fn>;
+
+  beforeAll(async () => {
+    htmlCache = {
+      match: vi.fn(),
+      put: vi.fn(),
+    };
+    cachesOpen = vi.fn().mockResolvedValue(htmlCache);
+    cachesMatch = vi.fn().mockResolvedValue(undefined);
+
+    vi.stubGlobal('caches', {
+      open: cachesOpen,
+      match: cachesMatch,
+      keys: vi.fn().mockResolvedValue([]),
+      delete: vi.fn(),
+    });
+
+    await import('../sw.ts');
+    expect(navigationHandlerRef.current).not.toBeNull();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+    cachesOpen.mockResolvedValue(htmlCache);
+    cachesMatch.mockResolvedValue(undefined);
+    htmlCache.match.mockReset();
+    htmlCache.put.mockReset();
+    matchPrecacheMock.mockReset();
+  });
+
+  function createNavigationEvent(): ExtendableEvent {
+    return { waitUntil: vi.fn() } as unknown as ExtendableEvent;
+  }
+
+  function createOfflineFallbackResponse(): Response {
+    return new Response(offlineHtml, {
+      status: 200,
+      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    });
+  }
+
+  it('case 2: precache hit resolves instantly without timer dependency', async () => {
+    vi.useFakeTimers();
+
+    const precachedShell = new Response('<html>precached index</html>', {
+      status: 200,
+      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    });
+
+    htmlCache.match.mockResolvedValue(undefined);
+    matchPrecacheMock.mockImplementation((url: string) =>
+      Promise.resolve(url === 'index.html' ? precachedShell : null),
+    );
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(() => new Promise<Response>(() => undefined)),
+    );
+
+    const handler = navigationHandlerRef.current!;
+    const response = await handler({
+      event: createNavigationEvent(),
+      request: new Request(navigationUrl),
+    });
+
+    expect(response).toBe(precachedShell);
+    expect(matchPrecacheMock).toHaveBeenCalledWith('index.html');
+    await vi.runAllTimersAsync();
+  });
+
+  it('case 3: hung network falls back to offline.html after bounded timeout', async () => {
+    vi.useFakeTimers();
+
+    const offlineFallback = createOfflineFallbackResponse();
+
+    htmlCache.match.mockResolvedValue(undefined);
+    matchPrecacheMock.mockImplementation((url: string) => {
+      if (url === 'index.html') return Promise.resolve(null);
+      if (url === 'offline.html') return Promise.resolve(offlineFallback);
+      return Promise.resolve(null);
+    });
+    cachesMatch.mockResolvedValue(undefined);
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(() => new Promise<Response>(() => undefined)),
+    );
+
+    const handler = navigationHandlerRef.current!;
+    const responsePromise = handler({
+      event: createNavigationEvent(),
+      request: new Request(navigationUrl),
+    });
+
+    await vi.advanceTimersByTimeAsync(8000);
+
+    const response = await responsePromise;
+    const body = await response.text();
+
+    expect(body).toBe(offlineHtml);
+    expect(matchPrecacheMock).toHaveBeenCalledWith('index.html');
+    expect(matchPrecacheMock).toHaveBeenCalledWith('offline.html');
+    expect(cachesOpen).toHaveBeenCalledWith(htmlCacheName);
+  });
+});
diff --git a/apps/ratewise/src/components/AnswerCapsule.tsx b/apps/ratewise/src/components/AnswerCapsule.tsx
index f09690432..d452bf058 100644
--- a/apps/ratewise/src/components/AnswerCapsule.tsx
+++ b/apps/ratewise/src/components/AnswerCapsule.tsx
@@ -1,4 +1,5 @@
 import type { FAQEntry } from '../config/seo-metadata';
+import { contentPageTokens } from '../config/design-tokens';
 
 interface AnswerCapsuleProps {
   title?: string;
@@ -9,16 +10,14 @@ export function AnswerCapsule({ title = '快速答案', items }: AnswerCapsulePr
   if (items.length === 0) return null;
 
   return (
-    <section className="card mb-6 border border-primary/20 bg-primary/5 p-6">
-      <h2 className="mb-4 text-2xl font-bold text-text">{title}</h2>
+    <section className="card mb-6 p-5 lg:p-6">
+      <p className={contentPageTokens.sectionHeader.eyebrow}>即時重點</p>
+      <h2 className="mt-2 text-xl font-bold text-text sm:text-2xl">{title}</h2>
       <div className="space-y-4">
         {items.map((item) => (
-          <article
-            key={item.question}
-            className="rounded-xl border border-surface-border bg-surface p-4"
-          >
+          <article key={item.question} className={contentPageTokens.article.card}>
             <h3 className="mb-2 text-base font-semibold text-text">{item.question}</h3>
-            <p className="text-sm leading-relaxed text-text-muted">{item.answer}</p>
+            <p className="break-words text-sm leading-relaxed text-text-muted">{item.answer}</p>
           </article>
         ))}
       </div>
diff --git a/apps/ratewise/src/components/AppLayout.tsx b/apps/ratewise/src/components/AppLayout.tsx
index 69ba04028..4c9f3f4fe 100644
--- a/apps/ratewise/src/components/AppLayout.tsx
+++ b/apps/ratewise/src/components/AppLayout.tsx
@@ -92,8 +92,8 @@ function Header() {
     <header
       className="
         px-4 z-30 shrink-0
-        bg-background/80 backdrop-blur-xl
-        border-b border-black/[0.03]
+        bg-background/92 backdrop-blur-md
+        border-b border-border/70
         flex items-center
       "
       style={{
@@ -101,20 +101,12 @@ function Header() {
         paddingTop: navigationTokens.safeArea.top,
       }}
     >
-      <div className="flex justify-between items-center max-w-md mx-auto w-full">
+      <div className="flex justify-between items-center w-full">
         {/* 品牌 Logo + 標題（使用 span 而非 h1，避免每頁重複 h1）*/}
-        <div className="flex items-center gap-1.5">
+        <div className="flex items-center gap-2">
           <Logo />
-          <span
-            data-testid="app-title"
-            className="
-              text-lg font-black tracking-tight
-              bg-clip-text text-transparent
-              bg-gradient-to-r from-[rgb(var(--color-title-gradient-from))] to-[rgb(var(--color-title-gradient-to))]
-              [-webkit-background-clip:text]
-            "
-          >
-            {isZhTW ? APP_INFO.name : t('app.title')}
+          <span data-testid="app-title" className="text-base font-semibold tracking-[0.01em]">
+            {isZhTW ? APP_INFO.shortName : t('app.title')}
           </span>
         </div>
       </div>
@@ -201,15 +193,9 @@ export function AppLayout() {
        * 使用 --app-height（由 JS 設定）而非 100dvh，確保 WebView 環境高度正確。
        * Fallback：100dvh（JS 尚未執行時，或 SSG 初始渲染）。 */}
       <div
-        className="w-full flex flex-col font-sans bg-[rgb(var(--color-background))] text-[rgb(var(--color-text))] overflow-hidden"
+        className="flex w-full flex-col overflow-hidden bg-background font-sans text-text"
         style={{ height: 'var(--app-height, 100dvh)' }}
       >
-        {location.pathname === '/' ? (
-          <div className="sr-only">
-            <h1 id="homepage-seo-heading">{HOMEPAGE_SEO.content.heading}</h1>
-          </div>
-        ) : null}
-
         {/* Desktop sidebar (≥768px) */}
         <div className="flex flex-1 min-h-0 min-w-0">
           <SideNavigation className="hidden md:block" />
@@ -224,6 +210,7 @@ export function AppLayout() {
             <main
               ref={mainRef}
               data-scroll-container="main"
+              tabIndex={-1}
               className="flex-1 min-h-0 min-w-0 w-full relative overflow-y-auto overflow-x-hidden pb-[calc(56px+env(safe-area-inset-bottom,0px))] md:pb-0 [-webkit-overflow-scrolling:touch] overscroll-y-contain"
             >
               <PullToRefreshIndicator
@@ -231,6 +218,11 @@ export function AppLayout() {
                 isRefreshing={isRefreshing}
                 canTrigger={canTrigger}
               />
+              {location.pathname === '/' ? (
+                <div className="sr-only">
+                  <h1 id="homepage-seo-heading">{HOMEPAGE_SEO.content.heading}</h1>
+                </div>
+              ) : null}
               <RouteErrorBoundary>
                 {/* enter-only：key 變化觸發 remount，新頁面從方向滑入淡入（CSS @keyframes） */}
                 <div
diff --git a/apps/ratewise/src/components/AuthorityGuidePage.tsx b/apps/ratewise/src/components/AuthorityGuidePage.tsx
index 70a7550d6..a6784ad3c 100644
--- a/apps/ratewise/src/components/AuthorityGuidePage.tsx
+++ b/apps/ratewise/src/components/AuthorityGuidePage.tsx
@@ -4,6 +4,7 @@ import { PageNavHeader } from './PageNavHeader';
 import { SEOHelmet } from './SEOHelmet';
 import { AnswerCapsule } from './AnswerCapsule';
 import type { AuthorityGuideContent } from '../config/seo-metadata';
+import { contentPageTokens } from '../config/design-tokens';
 
 interface AuthorityGuidePageProps {
   page: AuthorityGuideContent;
@@ -22,9 +23,8 @@ export function AuthorityGuidePage({ page }: AuthorityGuidePageProps) {
         ogType="article"
       />
 
-      <div className="min-h-screen">
-        <div className="container mx-auto max-w-5xl px-4 py-8">
-          {/* 頁面頂部導航：返回 + 麵包屑（PageNavHeader SSOT 模組）。 */}
+      <div className="min-h-full">
+        <div className={contentPageTokens.shell}>
           <PageNavHeader
             breadcrumbItems={[
               { label: t('nav.home'), href: '/' },
@@ -32,32 +32,33 @@ export function AuthorityGuidePage({ page }: AuthorityGuidePageProps) {
             ]}
           />
 
-          <header className="mb-8">
-            <h1 className="mb-3 text-4xl font-bold text-text">{page.heading}</h1>
-            <p className="max-w-3xl text-base leading-7 text-text-muted">{page.intro}</p>
+          <header className={contentPageTokens.hero.wrapper}>
+            <p className={contentPageTokens.sectionHeader.eyebrow}>專題指南</p>
+            <h1 className={contentPageTokens.hero.title}>{page.heading}</h1>
+            <p className={contentPageTokens.intro}>{page.intro}</p>
           </header>
 
           <AnswerCapsule items={page.answerCapsule ?? []} />
 
-          <section className="card mb-6 p-6">
-            <h2 className="mb-4 text-2xl font-bold text-text">重點整理</h2>
-            <ul className="space-y-3 text-text-muted">
+          <section className={`${contentPageTokens.article.cardLoose} mb-6`}>
+            <h2 className={contentPageTokens.article.title}>重點整理</h2>
+            <ul className={contentPageTokens.article.list}>
               {page.highlights.map((highlight) => (
-                <li key={highlight} className="flex items-start gap-3">
-                  <span className="mt-2 h-2.5 w-2.5 flex-shrink-0 rounded-full bg-primary" />
-                  <span className="leading-7">{highlight}</span>
+                <li key={highlight} className={contentPageTokens.article.listItem}>
+                  <span className={contentPageTokens.article.bullet} />
+                  <span className={contentPageTokens.article.paragraph}>{highlight}</span>
                 </li>
               ))}
             </ul>
           </section>
 
-          <div className="space-y-6">
+          <div className={contentPageTokens.section.stack}>
             {page.sections.map((section) => (
-              <section key={section.title} className="card p-6">
-                <h2 className="mb-3 text-2xl font-bold text-text">{section.title}</h2>
-                <div className="space-y-3 text-text-muted">
+              <section key={section.title} className={contentPageTokens.article.cardLoose}>
+                <h2 className={contentPageTokens.article.title}>{section.title}</h2>
+                <div className={contentPageTokens.article.body}>
                   {section.paragraphs.map((paragraph) => (
-                    <p key={paragraph} className="leading-7">
+                    <p key={paragraph} className={contentPageTokens.article.paragraph}>
                       {paragraph}
                     </p>
                   ))}
@@ -67,13 +68,13 @@ export function AuthorityGuidePage({ page }: AuthorityGuidePageProps) {
           </div>
 
           {page.faqContent && page.faqContent.length > 0 && (
-            <section className="card mt-8 p-6">
-              <h2 className="mb-6 text-2xl font-bold text-text">常見問題</h2>
+            <section className={`${contentPageTokens.article.cardLoose} mt-8`}>
+              <h2 className={contentPageTokens.article.title}>常見問題</h2>
               <div className="space-y-4">
                 {page.faqContent.map((item) => (
                   <div key={item.question}>
                     <h3 className="mb-1 font-semibold text-text">{item.question}</h3>
-                    <p className="leading-7 text-text-muted">{item.answer}</p>
+                    <p className={contentPageTokens.article.paragraph}>{item.answer}</p>
                   </div>
                 ))}
               </div>
@@ -81,14 +82,14 @@ export function AuthorityGuidePage({ page }: AuthorityGuidePageProps) {
           )}
 
           {page.relatedGuides && page.relatedGuides.length > 0 && (
-            <section className="card mt-8 p-6">
-              <h2 className="mb-4 text-xl font-semibold text-text">相關攻略</h2>
+            <section className={`${contentPageTokens.article.cardLoose} mt-8`}>
+              <h2 className={contentPageTokens.article.title}>相關攻略</h2>
               <div className="space-y-3">
                 {page.relatedGuides.map((guide) => (
                   <Link
                     key={guide.href}
                     to={guide.href}
-                    className="flex items-start gap-3 rounded-lg border border-border p-4 transition-colors hover:border-primary/30 hover:bg-primary/5"
+                    className={`flex items-start gap-3 ${contentPageTokens.surfaces.quietInteractive}`}
                   >
                     <div>
                       <p className="font-medium text-text">{guide.label}</p>
@@ -101,14 +102,14 @@ export function AuthorityGuidePage({ page }: AuthorityGuidePageProps) {
           )}
 
           {page.relatedCurrencies && page.relatedCurrencies.length > 0 && (
-            <section className="card mt-8 p-6">
-              <h2 className="mb-4 text-xl font-semibold text-text">相關幣別</h2>
+            <section className={`${contentPageTokens.article.cardLoose} mt-8`}>
+              <h2 className={contentPageTokens.article.title}>相關幣別</h2>
               <div className="flex flex-wrap gap-2">
                 {page.relatedCurrencies.map((currency) => (
                   <Link
                     key={currency.code}
                     to={currency.href}
-                    className="inline-flex items-center rounded-lg border border-border px-4 py-2 text-sm font-medium text-text-muted transition-colors hover:border-primary/30 hover:text-primary"
+                    className={contentPageTokens.links.pill}
                   >
                     {currency.label}
                   </Link>
@@ -117,20 +118,14 @@ export function AuthorityGuidePage({ page }: AuthorityGuidePageProps) {
             </section>
           )}
 
-          <section className="card mt-8 border-primary/20 bg-primary/5 p-6">
-            <h2 className="mb-2 text-xl font-semibold text-text">{page.ctaTitle}</h2>
+          <section className={`${contentPageTokens.article.cardLoose} mt-8`}>
+            <h2 className={contentPageTokens.article.title}>{page.ctaTitle}</h2>
             <p className="text-text-muted">{page.ctaDescription}</p>
             <div className="mt-4 flex flex-wrap gap-3">
-              <Link
-                to="/"
-                className="inline-flex items-center rounded-lg bg-primary px-5 py-3 font-semibold text-white transition-colors hover:bg-primary/90"
-              >
+              <Link to="/" className={contentPageTokens.buttons.primary}>
                 開始換算
               </Link>
-              <Link
-                to="/faq/"
-                className="inline-flex items-center rounded-lg border border-primary/20 px-5 py-3 font-semibold text-primary transition-colors hover:bg-primary/5"
-              >
+              <Link to="/faq/" className={contentPageTokens.links.ctaSecondary}>
                 查看 FAQ
               </Link>
             </div>
diff --git a/apps/ratewise/src/components/BottomNavigation.tsx b/apps/ratewise/src/components/BottomNavigation.tsx
index 9ff73ba91..798d53e0f 100644
--- a/apps/ratewise/src/components/BottomNavigation.tsx
+++ b/apps/ratewise/src/components/BottomNavigation.tsx
@@ -22,25 +22,30 @@ const navItems: NavItem[] = [
     icon: CreditCard,
   },
   {
-    path: '/multi',
+    path: '/multi/',
     labelKey: 'nav.multiCurrency',
     ariaLabelKey: 'nav.multiCurrencyFull',
     icon: Globe,
   },
   {
-    path: '/favorites',
+    path: '/favorites/',
     labelKey: 'nav.favorites',
     ariaLabelKey: 'nav.favoritesFull',
     icon: Star,
   },
   {
-    path: '/settings',
+    path: '/settings/',
     labelKey: 'nav.settings',
     ariaLabelKey: 'nav.settingsFull',
     icon: Settings,
   },
 ];
 
+function normalizeNavPath(path: string): string {
+  if (!path || path === '/') return '/';
+  return path.endsWith('/') ? path.slice(0, -1) : path;
+}
+
 interface BottomNavigationItemProps {
   item: NavItem;
   isActive: boolean;
@@ -71,7 +76,7 @@ function BottomNavigationItem({
       {/* 觸控回饋背景（避免在 <a> 內使用 whileTap 產生 tabindex）。 */}
       <div
         className="
-          absolute inset-1 rounded-xl bg-primary/0
+          absolute inset-1 rounded-control bg-primary/0
           transition-colors duration-75
           group-active:bg-primary/10
         "
@@ -80,8 +85,8 @@ function BottomNavigationItem({
       {/* 圖標（CSS transition 替代 motion，去除 vendor-motion 依賴） */}
       <div
         className={`
-          relative transition-all duration-200
-          ${isActive ? 'scale-110 opacity-100 text-primary' : isPending ? 'opacity-70 scale-100' : 'opacity-[0.35] scale-100'}
+          relative transition-[opacity,transform,color] duration-200
+          ${isActive ? 'scale-105 opacity-100 text-primary' : isPending ? 'opacity-80 scale-100' : 'opacity-[0.55] scale-100'}
           group-active:scale-90
         `}
       >
@@ -99,20 +104,18 @@ function BottomNavigationItem({
         )}
       </div>
 
-      {/* 標籤 - 8px */}
+      {/* 標籤 */}
       <span
         className={`
-          text-[8px] font-black uppercase tracking-[0.15em] transition-all duration-200
-          ${isActive ? 'text-primary opacity-100 translate-y-0' : isPending ? 'opacity-70 translate-y-px' : 'opacity-[0.35] translate-y-px'}
+          text-xs font-semibold uppercase tracking-[0.08em] transition-[opacity,transform,color] duration-200
+          ${isActive ? 'text-primary opacity-100 translate-y-0' : isPending ? 'opacity-80 translate-y-px' : 'opacity-[0.55] translate-y-px'}
         `}
       >
         {t(item.labelKey)}
       </span>
 
       {/* 選中指示條（靜態，無滑動動畫） */}
-      {isActive && (
-        <div className="absolute bottom-0 w-6 h-[3px] rounded-t-full bg-[rgb(var(--color-primary))]" />
-      )}
+      {isActive && <div className="absolute bottom-0 h-[3px] w-6 rounded-t-full bg-primary" />}
     </a>
   );
 }
@@ -142,16 +145,16 @@ export function BottomNavigation() {
     <nav
       className="
         fixed bottom-0 inset-x-0 z-30
-        bg-background/80 backdrop-blur-xl
-        border-t border-black/[0.02]
+        bg-background/92 backdrop-blur-md
+        border-t border-border/70
         md:hidden
         pb-[env(safe-area-inset-bottom,0px)]
       "
       aria-label={t('nav.mainNavigation')}
     >
-      <div className="flex h-14 max-w-md mx-auto relative px-4">
+      <div className="flex h-14 max-w-lg mx-auto relative px-4">
         {navItems.map((item) => {
-          const isActive = location.pathname === item.path;
+          const isActive = normalizeNavPath(location.pathname) === normalizeNavPath(item.path);
           const isThisPending = isPending && pendingPath === item.path;
 
           return (
diff --git a/apps/ratewise/src/components/Breadcrumb.tsx b/apps/ratewise/src/components/Breadcrumb.tsx
index c79909b79..24b4b93bb 100644
--- a/apps/ratewise/src/components/Breadcrumb.tsx
+++ b/apps/ratewise/src/components/Breadcrumb.tsx
@@ -6,6 +6,8 @@
 import { Link } from 'react-router-dom';
 import { ChevronRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { breadcrumbTokens } from '../config/design-tokens';
+import { cn } from '../utils/classnames';
 
 export interface BreadcrumbItem {
   label: string;
@@ -23,35 +25,28 @@ export function Breadcrumb({ items, className = '' }: BreadcrumbProps) {
   if (items.length === 0) return null;
 
   return (
-    <nav aria-label={t('nav.breadcrumb')} className={className}>
-      <ol className="flex items-center gap-2 text-sm text-text-muted flex-wrap">
+    <nav aria-label={t('nav.breadcrumb')} className={cn(breadcrumbTokens.nav, className)}>
+      <ol className={breadcrumbTokens.list}>
         {items.map((item, index) => {
           const isLast = index === items.length - 1;
           const itemKey = `${item.href}::${item.label}`;
 
           return (
-            <li key={itemKey} className="flex items-center gap-2">
+            <li key={itemKey} className={breadcrumbTokens.item}>
               {/* Separator */}
               {index > 0 && (
-                <ChevronRight
-                  className="w-4 h-4 text-text-muted flex-shrink-0"
-                  aria-hidden="true"
-                />
+                <ChevronRight className={breadcrumbTokens.separatorIcon} aria-hidden="true" />
               )}
 
               {/* Breadcrumb Item */}
               {isLast ? (
                 // Current Page - Not a link
-                <span className="font-medium text-text" aria-current="page" title={item.label}>
+                <span className={breadcrumbTokens.current} aria-current="page" title={item.label}>
                   {item.label}
                 </span>
               ) : (
                 // Parent Pages - Links
-                <Link
-                  to={item.href}
-                  title={item.label}
-                  className="hover:text-primary transition-colors duration-200 hover:underline"
-                >
+                <Link to={item.href} title={item.label} className={breadcrumbTokens.link}>
                   {item.label}
                 </Link>
               )}
diff --git a/apps/ratewise/src/components/Button.tsx b/apps/ratewise/src/components/Button.tsx
index 1ce030adf..e6107353d 100644
--- a/apps/ratewise/src/components/Button.tsx
+++ b/apps/ratewise/src/components/Button.tsx
@@ -140,6 +140,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       disabled,
       className,
       children,
+      type = 'button',
       ...props
     },
     ref,
@@ -150,6 +151,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         ref={ref}
+        type={type}
         className={getButtonClasses(variant, size, fullWidth, loading, className)}
         disabled={isDisabled}
         aria-busy={loading}
diff --git a/apps/ratewise/src/components/CurrencyLandingPage.tsx b/apps/ratewise/src/components/CurrencyLandingPage.tsx
index fd929fdc7..f68f6f0c6 100644
--- a/apps/ratewise/src/components/CurrencyLandingPage.tsx
+++ b/apps/ratewise/src/components/CurrencyLandingPage.tsx
@@ -1,7 +1,16 @@
 /** 幣別 SEO 頁面共用元件：17 組幣對頁 SSOT 渲染，含 JSON-LD、常見金額操作與旅遊提示 */
 
 import { Link } from 'react-router-dom';
-import { ArrowLeft, HelpCircle, BookOpen, Sparkles, Calculator } from 'lucide-react';
+import {
+  ArrowLeft,
+  HelpCircle,
+  BookOpen,
+  Sparkles,
+  Calculator,
+  Lightbulb,
+  Repeat2,
+  Scale,
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { SEOHelmet } from './SEOHelmet';
 import { PageNavHeader } from './PageNavHeader';
@@ -10,6 +19,7 @@ import { usePairAmountSEO } from '../hooks/usePairAmountSEO';
 import { SEO_RATE_EXAMPLES, SEO_RATE_EXAMPLES_DATE } from '../config/generated/seo-rate-examples';
 import type { AlternativeProvider } from '../config/generated/seo-rate-examples';
 import { APP_INFO, getCopyrightNotice } from '../config/app-info';
+import { contentPageTokens } from '../config/design-tokens';
 import {
   buildAmountExchangeRateSpecificationJsonLd,
   buildRateDifferenceSentence,
@@ -112,7 +122,6 @@ export function CurrencyLandingPage({
   });
 
   const formatNum = (n: number) => n.toLocaleString('zh-TW');
-
   // 換算器 CTA 深連結格式：/?amount=X&from=CODE&to=TWD（或反向）。
   const converterHref =
     amount !== null
@@ -198,10 +207,8 @@ export function CurrencyLandingPage({
     <>
       <SEOHelmet {...seoProps} />
 
-      {/* Main container - PWA optimized with safe area handling */}
       <div className="min-h-full">
-        <div className="px-4 sm:px-6 py-6 max-w-4xl mx-auto">
-          {/* 頁面頂部導航：返回 + 麵包屑（PageNavHeader SSOT 模組）。 */}
+        <div className={contentPageTokens.shell}>
           <PageNavHeader
             breadcrumbItems={[
               { label: t('nav.home'), href: '/' },
@@ -212,22 +219,18 @@ export function CurrencyLandingPage({
             ]}
           />
 
-          {/* Header Section */}
-          <header className="mb-6 sm:mb-8">
+          <header className={contentPageTokens.hero.wrapper}>
             <div className="flex items-start gap-3 sm:gap-4">
               <span className="text-4xl sm:text-5xl">{currencyFlag}</span>
-              <div className="flex-1 min-w-0">
-                <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-text leading-tight">
+              <div className="min-w-0 flex-1">
+                <h1 className={contentPageTokens.hero.compactTitle}>
                   {isTwdToForeign
                     ? `台幣換${currencyName}匯率換算器`
                     : `${currencyName}對台幣匯率換算器`}
                 </h1>
-                <p className="text-text-muted text-sm sm:text-base mt-2 leading-relaxed">
-                  {description}
-                </p>
-                {/* 更新時間戳：Perplexity 新鮮度信號，AI 引擎優先引用有明確更新時間的頁面。 */}
-                <p className="text-text-muted text-xs mt-2 flex items-center gap-1.5">
-                  <span className="inline-block w-1.5 h-1.5 rounded-full bg-green-500" />
+                <p className={contentPageTokens.hero.description}>{description}</p>
+                <p className={contentPageTokens.hero.metaRow}>
+                  <span className={contentPageTokens.hero.statusDot} />
                   最後更新：
                   <time dateTime={SEO_RATE_EXAMPLES_DATE}>{SEO_RATE_EXAMPLES_DATE}</time>
                 </p>
@@ -235,126 +238,107 @@ export function CurrencyLandingPage({
             </div>
           </header>
 
-          {/* AEO/GEO 快速答案：AI 引擎直接引用的問答對，顯示在頁面頂部提升引用率。 */}
           <AnswerCapsule items={answerCapsule} />
 
-          {/* 金額換算結果卡（Wise-pattern）：?amount=X 存在時顯示靜態換算結果，爬蟲可索引。 */}
           {amount !== null && amountResult !== null && cashSell !== null && (
-            <section className="mb-6 sm:mb-8">
-              <div className="card p-4 sm:p-5 bg-primary/5 border border-primary/30">
-                <div className="flex items-center gap-2 mb-3 text-xs font-black uppercase tracking-wider text-primary/60">
-                  <Calculator className="w-3.5 h-3.5" />
+            <section className={contentPageTokens.result.section}>
+              <div className={contentPageTokens.result.card}>
+                <div className={contentPageTokens.result.eyebrowRow}>
+                  <Calculator className="h-3.5 w-3.5" />
                   <span>換算結果（台銀現金賣出參考）</span>
                 </div>
-                <div className="flex items-baseline gap-2 flex-wrap mb-1">
-                  <span className="text-[10px] text-text-muted">
+                <div className={contentPageTokens.result.amountRow}>
+                  <span className={contentPageTokens.result.sourceAmount}>
                     {isTwdToForeign
                       ? `${formatNum(amount)} TWD`
                       : `${formatNum(amount)} ${currencyCode}`}
                   </span>
-                  <span className="text-text-muted text-sm">≈</span>
-                  <span className="text-2xl sm:text-3xl font-black text-primary">
+                  <span className={contentPageTokens.result.operator}>≈</span>
+                  <span className={contentPageTokens.result.value}>
                     {isTwdToForeign
                       ? `${formatNum(amountResult)} ${currencyCode}`
                       : `${formatNum(amountResult)} TWD`}
                   </span>
                 </div>
-                <p className="text-[10px] text-text-muted mb-4">
+                <p className={contentPageTokens.result.note}>
                   {isTwdToForeign
                     ? `參考台銀現金賣出 1 ${currencyCode} = ${cashSell} TWD（每日更新）。實際匯率以台銀牌告為準。`
                     : `參考台銀現金賣出 1 ${currencyCode} = ${cashSell} TWD（每日更新）。實際匯率以台銀牌告為準。`}
                 </p>
-                <Link
-                  to={converterHref}
-                  className="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white rounded-xl text-sm font-semibold hover:bg-primary/90 transition-colors"
-                >
+                <Link to={converterHref} className={contentPageTokens.buttons.primary}>
                   在換算器查看最新匯率
-                  <ArrowLeft className="w-4 h-4 rotate-180" />
+                  <ArrowLeft className="h-4 w-4 rotate-180" />
                 </Link>
               </div>
             </section>
           )}
 
-          {/* 精準換匯：為什麼看賣出價 */}
-          <section className="mb-6 sm:mb-8">
-            <div className="card p-4 sm:p-5 bg-surface border border-amber-500/30">
+          <section className={contentPageTokens.section.block}>
+            <div className={contentPageTokens.callouts.warning}>
               <div className="flex items-start gap-3">
-                <div className="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center flex-shrink-0">
-                  <span className="text-lg">⚖️</span>
+                <div className={`${contentPageTokens.callouts.icon} bg-warning/15 text-warning`}>
+                  <Scale className="h-5 w-5" aria-hidden="true" />
                 </div>
-                <div className="flex-1 min-w-0">
-                  <h2 className="font-bold text-text text-sm sm:text-base mb-2">
-                    為什麼 {APP_INFO.shortName} 比其他工具更精準？
+                <div className="min-w-0 flex-1">
+                  <h2 className={contentPageTokens.article.titleCompact}>
+                    為什麼牌告賣出價更接近臨櫃換匯成本？
                   </h2>
-                  <p className="text-text-muted text-xs sm:text-sm leading-relaxed mb-3">
+                  <p className="mb-3 text-xs leading-relaxed text-text-muted sm:text-sm">
                     多數匯率工具顯示「中間價」（mid-rate），是買入與賣出的平均值，不是你實際換匯的價格。
                     {APP_INFO.shortName} 直接顯示臺灣銀行牌告的「
-                    <strong className="text-text font-semibold">現金賣出</strong>」價格—— 你去銀行換{' '}
-                    {currencyName} 現鈔時實際要付的台幣金額。
+                    <strong className="text-text font-semibold">現金賣出</strong>
+                    」價格，代表你去銀行換 {currencyName} 現鈔時實際要付的台幣金額。
                   </p>
-                  <div className="grid grid-cols-2 gap-2 text-xs mb-3">
-                    <div className="rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200/30 p-2 text-center">
-                      <div className="font-bold text-red-600 dark:text-red-400 mb-0.5">
-                        中間價（Google／XE）
-                      </div>
+                  <div className="mb-3 grid grid-cols-2 gap-2 text-xs">
+                    <div className={`${contentPageTokens.callouts.danger} text-center`}>
+                      <div className="font-bold text-text mb-0.5">中間價（Google／XE）</div>
                       <div className="text-text-muted">買入與賣出的平均值</div>
                       <div className="text-text-muted mt-0.5">≠ 實際換匯金額</div>
                     </div>
-                    <div className="rounded-lg bg-green-50 dark:bg-green-950/20 border border-green-200/30 p-2 text-center">
-                      <div className="font-bold text-green-600 dark:text-green-400 mb-0.5">
+                    <div className={`${contentPageTokens.callouts.success} text-center`}>
+                      <div className="font-bold text-text mb-0.5">
                         賣出價（{APP_INFO.shortName}）
                       </div>
                       <div className="text-text-muted">臺灣銀行牌告實際報價</div>
                       <div className="text-text-muted mt-0.5">= 銀行實際收你的台幣</div>
                     </div>
                   </div>
-                  <p className="text-text-muted text-xs leading-relaxed bg-amber-50 dark:bg-amber-950/20 rounded-lg px-3 py-2 border border-amber-200/30">
-                    {rateDifferenceSentence}
-                  </p>
+                  <p className={contentPageTokens.callouts.note}>{rateDifferenceSentence}</p>
                 </div>
               </div>
             </div>
           </section>
 
-          {/* Quick Action Card */}
-          <div className="card p-4 sm:p-5 mb-6 bg-primary text-white">
-            <div className="flex items-center gap-2 mb-3 opacity-80">
-              <Sparkles className="w-4 h-4" />
-              <h2 className="text-xs font-black uppercase tracking-wider">立即換算</h2>
+          <div className={`${contentPageTokens.article.card} mb-6`}>
+            <div className="mb-3 flex items-center gap-2 text-text-muted/70">
+              <Sparkles className="h-3.5 w-3.5 text-primary/70" />
+              <h2 className={contentPageTokens.sectionHeader.eyebrow}>立即換算</h2>
             </div>
-            <p className="text-sm sm:text-base mb-4 opacity-90">
+            <p className="mb-4 max-w-2xl text-sm leading-relaxed text-text-muted sm:text-base">
               立即查看{currencyName}
-              賣出價——台銀實際牌告，非中間價，讓你換匯前就知道真正要付多少台幣。
+              賣出價，以台銀實際牌告為準，非中間價，換匯前先估算接近臨櫃牌告的台幣成本。
             </p>
-            <Link
-              to={converterHref}
-              className="inline-flex items-center gap-2 px-4 py-2.5 bg-white/20 hover:bg-white/30 rounded-xl font-semibold text-sm transition-colors"
-            >
+            <Link to={converterHref} className={contentPageTokens.buttons.primary}>
               {isTwdToForeign ? `開始換算 TWD → ${currencyCode}` : `開始換算 ${currencyCode} → TWD`}
-              <ArrowLeft className="w-4 h-4 rotate-180" />
+              <ArrowLeft className="h-4 w-4 rotate-180" />
             </Link>
           </div>
 
-          {/* Highlights Section */}
-          <section className="mb-6 sm:mb-8">
-            <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-              <BookOpen className="w-3.5 h-3.5" />
-              <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">
-                {currencyName}匯率重點
-              </h2>
+          <section className={contentPageTokens.section.block}>
+            <div className={contentPageTokens.sectionHeader.row}>
+              <BookOpen className="h-3.5 w-3.5" />
+              <h2 className={contentPageTokens.sectionHeader.eyebrow}>{currencyName}匯率重點</h2>
             </div>
 
-            <div className="card p-4 sm:p-5">
+            <div className={contentPageTokens.article.card}>
               <ul className="space-y-3 md:grid md:grid-cols-3 md:gap-3 md:space-y-0">
                 {highlights.map((highlight, index) => (
                   <li
                     key={index}
-                    className="flex items-start gap-3 md:rounded-xl md:bg-surface md:p-3"
+                    className="flex items-start gap-3 md:rounded-control md:bg-surface md:p-3"
                   >
-                    <span className="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">
-                      {index + 1}
-                    </span>
-                    <span className="text-text text-sm sm:text-base leading-relaxed">
+                    <span className={contentPageTokens.article.numberBadge}>{index + 1}</span>
+                    <span className="text-sm leading-relaxed text-text sm:text-base">
                       {highlight}
                     </span>
                   </li>
@@ -363,25 +347,24 @@ export function CurrencyLandingPage({
             </div>
           </section>
 
-          {/* How To Steps Section */}
-          <section className="mb-6 sm:mb-8">
-            <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-              <Sparkles className="w-3.5 h-3.5" />
-              <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">使用步驟</h2>
+          <section className={contentPageTokens.section.block}>
+            <div className={contentPageTokens.sectionHeader.row}>
+              <Sparkles className="h-3.5 w-3.5" />
+              <h2 className={contentPageTokens.sectionHeader.eyebrow}>使用步驟</h2>
             </div>
 
             <div className="space-y-3 md:grid md:grid-cols-2 md:gap-3 md:space-y-0">
               {howToSteps.map((step) => (
                 <div
                   key={step.position}
-                  className="card p-4 sm:p-5 flex items-start gap-3 sm:gap-4"
+                  className={`${contentPageTokens.article.card} flex items-start gap-3 sm:gap-4`}
                 >
-                  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg sm:text-xl flex-shrink-0">
+                  <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-control bg-primary text-lg font-bold text-primary-foreground sm:h-12 sm:w-12 sm:text-xl">
                     {step.position}
                   </div>
-                  <div className="flex-1 min-w-0 pt-1">
-                    <h3 className="font-bold text-text text-sm sm:text-base mb-1">{step.name}</h3>
-                    <p className="text-text-muted text-xs sm:text-sm leading-relaxed">
+                  <div className="min-w-0 flex-1 pt-1">
+                    <h3 className="mb-1 text-sm font-bold text-text sm:text-base">{step.name}</h3>
+                    <p className="text-xs leading-relaxed text-text-muted sm:text-sm">
                       {step.text}
                     </p>
                   </div>
@@ -390,30 +373,29 @@ export function CurrencyLandingPage({
             </div>
           </section>
 
-          {/* Common Amounts Section */}
           {commonAmounts.length > 0 && (
-            <section className="mb-6 sm:mb-8">
-              <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-                <Calculator className="w-3.5 h-3.5" />
-                <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">常見金額換算</h2>
+            <section className={contentPageTokens.section.block}>
+              <div className={contentPageTokens.sectionHeader.row}>
+                <Calculator className="h-3.5 w-3.5" />
+                <h2 className={contentPageTokens.sectionHeader.eyebrow}>常見金額換算</h2>
               </div>
 
-              <div className="card p-4 sm:p-5">
-                <p className="text-text-muted text-xs sm:text-sm mb-4">
+              <div className={contentPageTokens.article.card}>
+                <p className="mb-4 text-xs text-text-muted sm:text-sm">
                   點擊常見金額，即可在本頁查看台銀現金賣出參考換算結果，或前往換算器取得最新即時匯率：
                 </p>
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
                   {commonAmounts.map((entry) => (
                     // Wise-pattern：路徑型 URL（/usd-twd/500/），可被 SSG 預渲染，Googlebot 直接索引靜態 HTML。
                     <Link
                       key={entry.amount}
                       to={`${pathname.replace(/\/$/, '')}/${entry.amount}/`}
-                      className="flex items-center justify-between gap-3 px-4 py-3 rounded-xl bg-surface hover:bg-primary/10 transition-colors group text-left"
+                      className={`${contentPageTokens.links.row} text-left`}
                     >
                       <h3 className="text-sm font-medium text-text group-hover:text-primary transition-colors">
                         {entry.question}
                       </h3>
-                      <ArrowLeft className="w-3.5 h-3.5 rotate-180 text-text-muted group-hover:text-primary transition-colors flex-shrink-0" />
+                      <ArrowLeft className="h-3.5 w-3.5 flex-shrink-0 rotate-180 text-text-muted transition-colors group-hover:text-primary" />
                     </Link>
                   ))}
                 </div>
@@ -421,17 +403,20 @@ export function CurrencyLandingPage({
             </section>
           )}
 
-          {/* Travel Tip Section */}
           {travelTip && (
-            <section className="mb-6 sm:mb-8">
-              <div className="card p-4 sm:p-5 bg-amber-50 dark:bg-amber-950/20 border-amber-200/30">
+            <section className={contentPageTokens.section.block}>
+              <div className={contentPageTokens.callouts.warning}>
                 <div className="flex items-start gap-3">
-                  <span className="text-2xl flex-shrink-0">💡</span>
+                  <div
+                    className={`${contentPageTokens.callouts.icon} h-9 w-9 bg-warning/15 text-warning`}
+                  >
+                    <Lightbulb className="h-4 w-4" aria-hidden="true" />
+                  </div>
                   <div>
-                    <h3 className="font-bold text-text text-sm sm:text-base mb-1">
+                    <h3 className="mb-1 text-sm font-bold text-text sm:text-base">
                       旅遊換匯小提示
                     </h3>
-                    <p className="text-text-muted text-xs sm:text-sm leading-relaxed">
+                    <p className="text-xs leading-relaxed text-text-muted sm:text-sm">
                       {travelTip}
                     </p>
                   </div>
@@ -440,28 +425,30 @@ export function CurrencyLandingPage({
             </section>
           )}
 
-          {/* 替代換匯管道比較卡（明洞換匯所等） */}
           {alternativeProviders && alternativeProviders.length > 0 && (
-            <section className="mb-6 sm:mb-8" data-testid="provider-comparison-card">
-              <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-                <span className="text-xs">💱</span>
-                <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">換匯管道比較</h2>
+            <section
+              className={contentPageTokens.section.block}
+              data-testid="provider-comparison-card"
+            >
+              <div className={contentPageTokens.sectionHeader.row}>
+                <Repeat2 className="h-3.5 w-3.5" aria-hidden="true" />
+                <h2 className={contentPageTokens.sectionHeader.eyebrow}>換匯管道比較</h2>
               </div>
-              <div className="card p-4 sm:p-5">
-                <h3 className="font-bold text-text text-sm sm:text-base mb-3">
+              <div className={contentPageTokens.article.card}>
+                <h3 className="mb-3 text-sm font-bold text-text sm:text-base">
                   台銀 vs 現場換匯所比較
                 </h3>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
+                <div className="mb-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
                   {/* 臺灣銀行欄：TWD→KRW 顯示現金賣出；KRW→TWD 顯示估算買入率 */}
-                  <div className="rounded-xl bg-surface border border-border p-3">
-                    <div className="text-xs font-bold text-text-muted mb-1">
+                  <div className={contentPageTokens.callouts.neutral}>
+                    <div className="mb-1 text-xs font-bold text-text-muted">
                       {isTwdToForeign ? '臺灣銀行（現金賣出）' : '臺灣銀行（現金買入估算）'}
                     </div>
                     <div className="text-lg font-black text-text">
-                      {taiwanBankKrwPerTwd !== null ? taiwanBankKrwPerTwd.toFixed(2) : '—'}{' '}
+                      {taiwanBankKrwPerTwd !== null ? taiwanBankKrwPerTwd.toFixed(2) : '未提供'}{' '}
                       <span className="text-xs font-normal text-text-muted">KRW / TWD</span>
                     </div>
-                    <div className="text-xs text-text-muted mt-1">
+                    <div className="mt-1 text-xs text-text-muted">
                       {isTwdToForeign
                         ? `${rateExample?.exampleTWD.toLocaleString()} TWD ≈ ${rateExample?.foreignAtCash.toLocaleString()} KRW`
                         : '估算值；以台銀牌告現金買入率為準'}
@@ -481,31 +468,26 @@ export function CurrencyLandingPage({
                         : null // KRW→TWD 方向不顯示台幣換算範例
                       : null;
                     return (
-                      <div
-                        key={provider.source}
-                        className="rounded-xl bg-green-50 dark:bg-green-950/20 border border-green-200/30 p-3"
-                      >
-                        <div className="text-xs font-bold text-green-700 dark:text-green-400 mb-1">
-                          {provider.name}
-                        </div>
-                        <div className="text-lg font-black text-green-700 dark:text-green-400">
+                      <div key={provider.source} className={contentPageTokens.callouts.success}>
+                        <div className="mb-1 text-xs font-bold text-text">{provider.name}</div>
+                        <div className="text-lg font-black text-text">
                           {displayRate.toFixed(2)}{' '}
                           <span className="text-xs font-normal text-text-muted">{rateLabel}</span>
                         </div>
                         {exampleAmount !== null && rateExample && (
-                          <div className="text-xs text-text-muted mt-1">
+                          <div className="mt-1 text-xs text-text-muted">
                             {rateExample.exampleTWD.toLocaleString()} TWD ≈{' '}
                             {exampleAmount.toLocaleString()} KRW
                           </div>
                         )}
-                        <div className="text-[10px] text-text-muted mt-2">
+                        <div className={`${contentPageTokens.article.finePrint} mt-2`}>
                           {provider.source} · {provider.rateDate}
                         </div>
                       </div>
                     );
                   })}
                 </div>
-                <p className="text-[10px] text-text-muted leading-relaxed">
+                <p className={contentPageTokens.article.finePrint}>
                   {isTwdToForeign
                     ? alternativeProviders[0]?.note
                     : `${alternativeProviders[0]?.name ?? '明洞換匯所'}亦提供韓元換台幣服務，現場持韓元現鈔可直接兌換。買入估算匯率，實際以換匯所現場報價為準。`}
@@ -514,22 +496,25 @@ export function CurrencyLandingPage({
             </section>
           )}
 
-          {/* FAQ Section */}
-          <section className="mb-6 sm:mb-8">
-            <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-              <HelpCircle className="w-3.5 h-3.5" />
-              <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">{faqTitle}</h2>
+          <section className={contentPageTokens.section.block}>
+            <div className={contentPageTokens.sectionHeader.row}>
+              <HelpCircle className="h-3.5 w-3.5" />
+              <h2 className={contentPageTokens.sectionHeader.eyebrow}>{faqTitle}</h2>
             </div>
 
-            <div className="space-y-3 md:max-w-3xl md:mx-auto">
+            <div className={contentPageTokens.article.faqStack}>
               {faqEntries.map((faq, index) => (
-                <details key={index} className="card group" open={index === 0}>
-                  <summary className="p-4 sm:p-5 cursor-pointer list-none flex items-start gap-3 hover:bg-surface/50 transition-colors rounded-2xl">
-                    <div className="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-0.5">
-                      <HelpCircle className="w-4 h-4" />
+                <details
+                  key={index}
+                  className={contentPageTokens.article.faqItem}
+                  open={index === 0}
+                >
+                  <summary className={contentPageTokens.article.faqSummary}>
+                    <div className={`${contentPageTokens.article.iconBadge} h-8 w-8`}>
+                      <HelpCircle className="h-4 w-4" />
                     </div>
-                    <div className="flex-1 min-w-0">
-                      <h3 className="font-bold text-text text-sm sm:text-base leading-snug pr-4">
+                    <div className="min-w-0 flex-1">
+                      <h3 className="pr-4 text-sm font-bold leading-snug text-text sm:text-base">
                         {faq.question}
                       </h3>
                     </div>
@@ -537,20 +522,19 @@ export function CurrencyLandingPage({
                       ▼
                     </span>
                   </summary>
-                  <div className="px-4 sm:px-5 pb-4 sm:pb-5 pt-0 ml-11">
-                    <p className="text-text-muted text-xs sm:text-sm leading-relaxed">
-                      {faq.answer}
-                    </p>
+                  <div className="ml-11">
+                    <p className={contentPageTokens.article.faqAnswer}>{faq.answer}</p>
                   </div>
                 </details>
               ))}
             </div>
           </section>
 
-          {/* 相關攻略（hub-and-spoke 內部鏈接）：依幣別方向提供匯率知識攻略連結 */}
           {relatedGuides.length > 0 && (
             <section className="mb-6">
-              <h2 className="text-sm font-bold text-text-muted uppercase tracking-wider px-2 mb-3 flex items-center gap-2">
+              <h2
+                className={`${contentPageTokens.sectionHeader.row} ${contentPageTokens.sectionHeader.eyebrow}`}
+              >
                 <BookOpen className="w-4 h-4" />
                 相關攻略
               </h2>
@@ -559,7 +543,7 @@ export function CurrencyLandingPage({
                   <Link
                     key={guide.href}
                     to={guide.href}
-                    className="card p-4 sm:p-5 bg-surface border border-border hover:border-primary/40 hover:bg-primary/5 transition-colors group"
+                    className={`group ${contentPageTokens.surfaces.quietInteractive} sm:p-5`}
                   >
                     <div className="flex items-center gap-3">
                       <BookOpen className="w-5 h-5 text-primary/60 flex-shrink-0 group-hover:text-primary transition-colors" />
@@ -579,9 +563,8 @@ export function CurrencyLandingPage({
             </section>
           )}
 
-          {/* Data Source Notice */}
-          <footer className="text-center text-text-muted text-xs opacity-60">
-            <p>資料來源：臺灣銀行牌告匯率 · 每 5 分鐘自動更新</p>
+          <footer className="text-center text-xs text-text-muted/70">
+            <p>資料來源：臺灣銀行牌告匯率 · 約每 5 分鐘檢查更新</p>
             <p className="mt-1">{getCopyrightNotice()}</p>
           </footer>
         </div>
diff --git a/apps/ratewise/src/components/ErrorBoundary.tsx b/apps/ratewise/src/components/ErrorBoundary.tsx
index 7ae0f2039..a826233c5 100644
--- a/apps/ratewise/src/components/ErrorBoundary.tsx
+++ b/apps/ratewise/src/components/ErrorBoundary.tsx
@@ -2,6 +2,7 @@ import { Component, type ErrorInfo, type ReactNode } from 'react';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { logger } from '../utils/logger';
 import { APP_INFO } from '../config/app-info';
+import { feedbackSurfaceTokens } from '../config/design-tokens';
 import { MailtoLink } from './MailtoLink';
 import i18n from '../i18n';
 
@@ -88,22 +89,22 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
       // Default fallback UI
       return (
-        <div className="min-h-screen bg-gradient-to-br from-danger-bg to-warning-light flex items-center justify-center p-4">
-          <div className="bg-surface rounded-2xl shadow-2xl p-8 max-w-md w-full">
-            <div className="flex items-center gap-3 mb-4">
+        <div className={feedbackSurfaceTokens.pageCenter}>
+          <div className={feedbackSurfaceTokens.card}>
+            <div className="mb-4 flex items-center gap-3">
               <AlertCircle className="text-destructive" size={32} />
               <h1 className="text-2xl font-bold text-text">{i18n.t('errors.crashTitle')}</h1>
             </div>
 
-            <p className="text-text-muted mb-4">{i18n.t('errors.crashDescription')}</p>
+            <p className="mb-4 text-text-muted">{i18n.t('errors.crashDescription')}</p>
 
             {import.meta.env.DEV && this.state.error && (
               <details className="mb-4">
-                <summary className="cursor-pointer text-sm font-semibold text-text mb-2">
+                <summary className="mb-2 cursor-pointer text-sm font-semibold text-text">
                   {i18n.t('errors.errorDetails')}
                 </summary>
-                <div className="bg-danger-bg border border-danger-light rounded-lg p-3">
-                  <p className="text-xs font-mono text-danger mb-2">
+                <div className={feedbackSurfaceTokens.detailsPanel}>
+                  <p className="mb-2 font-mono text-xs text-danger">
                     {this.state.error.toString()}
                   </p>
                   {this.state.errorInfo && (
@@ -116,17 +117,18 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
             )}
 
             <button
+              type="button"
               onClick={this.handleReset}
-              className="w-full flex items-center justify-center gap-2 py-3 bg-gradient-to-r from-primary to-primary-hover hover:from-primary-hover hover:to-primary text-white font-semibold rounded-xl shadow-lg transition transform hover:scale-105"
+              className={feedbackSurfaceTokens.actionButton}
             >
               <RefreshCw size={18} />
               {i18n.t('errors.reload')}
             </button>
 
-            <p className="text-xs text-text-muted text-center mt-4">
+            <p className="mt-4 text-center text-xs text-text-muted">
               {i18n.t('errors.clearCacheHint')}
             </p>
-            <div className="flex justify-center gap-4 mt-2 flex-wrap">
+            <div className="mt-2 flex flex-wrap justify-center gap-4">
               <a
                 href={APP_INFO.threadsUrl}
                 target="_blank"
diff --git a/apps/ratewise/src/components/Footer.tsx b/apps/ratewise/src/components/Footer.tsx
index af6963781..9674ba9ea 100644
--- a/apps/ratewise/src/components/Footer.tsx
+++ b/apps/ratewise/src/components/Footer.tsx
@@ -46,6 +46,14 @@ const formatTime = (dateString: string | null) => {
   }
 };
 
+const FOOTER_SOURCE_LINK_CLASS =
+  'group inline-flex min-h-11 items-center gap-2 rounded-control border border-border/70 bg-surface-elevated px-4 py-2.5 text-text transition-colors duration-200 hover:border-primary/20 hover:bg-surface';
+const FOOTER_DIVIDER_CLASS = 'w-full border-t border-border/70';
+const FOOTER_TEXT_LINK_CLASS =
+  'inline-flex min-h-11 items-center gap-1.5 rounded-control px-2 text-text-muted transition-colors duration-200 hover:text-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary';
+const FOOTER_RATE_LINK_CLASS =
+  'inline-flex min-h-11 items-center rounded-control px-2 text-text-muted transition-colors duration-200 hover:text-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary';
+
 function TimeSlot({ value }: { value: string }) {
   return (
     <span
@@ -98,7 +106,7 @@ export function Footer() {
   const buildTime = getFormattedBuildTime();
 
   return (
-    <footer className="bg-gradient-to-br from-footer-from via-footer-via to-footer-to text-surface mt-16">
+    <footer className="mt-16 border-t border-border/70 bg-surface text-text">
       {/* 行動版簡潔 Footer */}
       <div className="md:hidden max-w-6xl mx-auto px-4 py-8">
         {/* 匯率來源與更新時間 */}
@@ -107,10 +115,10 @@ export function Footer() {
             href="https://rate.bot.com.tw/xrt?Lang=zh-TW"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 px-4 py-2.5 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl hover:bg-white/20 hover:border-white/30 transition-all duration-300 group"
+            className={FOOTER_SOURCE_LINK_CLASS}
           >
             <svg
-              className="w-4 h-4 text-white group-hover:scale-110 transition-transform"
+              className="h-4 w-4 text-primary transition-transform group-hover:scale-110"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -122,9 +130,9 @@ export function Footer() {
                 d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
               />
             </svg>
-            <span className="text-sm font-medium text-white">{t('footer.taiwanBankFull')}</span>
+            <span className="text-sm font-medium">{t('footer.taiwanBankFull')}</span>
             <svg
-              className="w-3.5 h-3.5 text-white/80 group-hover:translate-x-0.5 transition-transform"
+              className="h-3.5 w-3.5 text-text-muted transition-transform group-hover:translate-x-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -138,7 +146,7 @@ export function Footer() {
             </svg>
           </a>
           {/* ClientOnly 避免 hydration mismatch */}
-          <div className="flex items-center gap-2 text-sm text-white/80">
+          <div className="flex items-center gap-2 text-sm text-text-muted">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -153,34 +161,25 @@ export function Footer() {
 
         {/* 免責聲明 */}
         <div className="text-center mb-6">
-          <p className="text-xs text-white/70 leading-relaxed">{t('footer.disclaimer')}</p>
+          <p className="text-xs leading-relaxed text-text-muted">{t('footer.disclaimer')}</p>
         </div>
 
         {/* 快速連結 */}
-        <div className="flex flex-wrap items-center justify-center gap-5 text-xs text-white/80 mb-6">
-          <Link
-            to="/faq/"
-            className="inline-flex items-center gap-1.5 hover:text-white transition-colors duration-200"
-          >
-            <span aria-hidden="true" className="text-white/50">
+        <div className="mb-6 flex flex-wrap items-center justify-center gap-2 text-xs">
+          <Link to="/faq/" className={FOOTER_TEXT_LINK_CLASS}>
+            <span aria-hidden="true" className="text-text-muted/60">
               ?
             </span>
             {t('footer.faq')}
           </Link>
-          <Link
-            to="/about/"
-            className="inline-flex items-center gap-1.5 hover:text-white transition-colors duration-200"
-          >
-            <span aria-hidden="true" className="text-white/50">
+          <Link to="/about/" className={FOOTER_TEXT_LINK_CLASS}>
+            <span aria-hidden="true" className="text-text-muted/60">
               i
             </span>
             {t('footer.about')}
           </Link>
-          <Link
-            to="/privacy/"
-            className="inline-flex items-center gap-1.5 hover:text-white transition-colors duration-200"
-          >
-            <span aria-hidden="true" className="text-white/50">
+          <Link to="/privacy/" className={FOOTER_TEXT_LINK_CLASS}>
+            <span aria-hidden="true" className="text-text-muted/60">
               🔒
             </span>
             {t('footer.privacyPolicy')}
@@ -188,27 +187,23 @@ export function Footer() {
         </div>
 
         {/* 熱門匯率快速導航 */}
-        <div className="flex flex-wrap items-center justify-center gap-4 text-xs text-white/80 mb-6">
+        <div className="mb-6 flex flex-wrap items-center justify-center gap-2 text-xs">
           {POPULAR_RATE_LINKS.map((link) => (
-            <Link
-              key={link.href}
-              to={link.href}
-              className="hover:text-white transition-colors duration-200"
-            >
+            <Link key={link.href} to={link.href} className={FOOTER_RATE_LINK_CLASS}>
               {link.label}
             </Link>
           ))}
         </div>
 
         {/* 分隔線 */}
-        <div className="w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent mb-6" />
+        <div className={`mb-6 ${FOOTER_DIVIDER_CLASS}`} />
 
         {/* 版權與版本資訊 */}
         <div className="flex flex-col items-center justify-center gap-3 text-sm">
-          <div className="flex items-center gap-2 text-white/90">
-            <div className="w-5 h-5 bg-white/20 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/30">
+          <div className="flex items-center gap-2 text-text">
+            <div className="flex h-5 w-5 items-center justify-center rounded-control border border-border/70 bg-surface-elevated">
               <svg
-                className="w-3 h-3 text-white"
+                className="h-3 w-3 text-primary"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -223,29 +218,29 @@ export function Footer() {
               </svg>
             </div>
             <span className="font-semibold">{t('footer.appName')}</span>
-            <span className="text-white/50">•</span>
+            <span className="text-text-muted/60">•</span>
             <span
-              className="relative inline-block cursor-help text-xs text-white/60 font-mono group"
+              className="group relative inline-block cursor-help font-mono text-xs text-text-muted"
               title={`Built on ${buildTime}`}
             >
               {appVersion}
-              <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-text rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none z-50">
+              <span className="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 whitespace-nowrap rounded-compact bg-text px-2 py-1 text-xs text-surface opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                 Built on {buildTime}
                 <span className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-text" />
               </span>
             </span>
-            <span className="text-white/50">•</span>
-            <span className="text-white/70" suppressHydrationWarning>
+            <span className="text-text-muted/60">•</span>
+            <span className="text-text-muted" suppressHydrationWarning>
               © {CURRENT_YEAR}
             </span>
           </div>
-          <div className="flex items-center gap-1.5 text-white/80">
+          <div className="flex items-center gap-1.5 text-text-muted">
             <span>{t('footer.by')}</span>
             <a
               href={AUTHOR_CONTACT_LINK_MAP.threads.href}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-white/90 hover:text-white transition-colors duration-200 font-medium"
+              className="font-medium text-text transition-colors duration-200 hover:text-primary"
             >
               {AUTHOR_CONTACT_LINK_MAP.threads.value}
             </a>
@@ -261,10 +256,10 @@ export function Footer() {
             href="https://rate.bot.com.tw/xrt?Lang=zh-TW"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 px-4 py-2.5 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl hover:bg-white/20 hover:border-white/30 transition-all duration-300 group"
+            className={FOOTER_SOURCE_LINK_CLASS}
           >
             <svg
-              className="w-4 h-4 text-white group-hover:scale-110 transition-transform"
+              className="h-4 w-4 text-primary transition-transform group-hover:scale-110"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -276,9 +271,9 @@ export function Footer() {
                 d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
               />
             </svg>
-            <span className="text-sm font-medium text-white">{t('footer.taiwanBankFull')}</span>
+            <span className="text-sm font-medium">{t('footer.taiwanBankFull')}</span>
             <svg
-              className="w-3.5 h-3.5 text-white/80 group-hover:translate-x-0.5 transition-transform"
+              className="h-3.5 w-3.5 text-text-muted transition-transform group-hover:translate-x-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -292,7 +287,7 @@ export function Footer() {
             </svg>
           </a>
           {/* ClientOnly 避免 hydration mismatch */}
-          <div className="flex items-center gap-2 text-sm text-white/80">
+          <div className="flex items-center gap-2 text-sm text-text-muted">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -307,34 +302,25 @@ export function Footer() {
 
         {/* 免責聲明 */}
         <div className="text-center mb-6">
-          <p className="text-xs text-white/70 leading-relaxed">{t('footer.disclaimer')}</p>
+          <p className="text-xs leading-relaxed text-text-muted">{t('footer.disclaimer')}</p>
         </div>
 
         {/* 快速連結 */}
-        <div className="flex flex-wrap items-center justify-center gap-5 text-xs text-white/80 mb-6">
-          <Link
-            to="/faq/"
-            className="inline-flex items-center gap-1.5 hover:text-white transition-colors duration-200"
-          >
-            <span aria-hidden="true" className="text-white/50">
+        <div className="mb-6 flex flex-wrap items-center justify-center gap-2 text-xs">
+          <Link to="/faq/" className={FOOTER_TEXT_LINK_CLASS}>
+            <span aria-hidden="true" className="text-text-muted/60">
               ?
             </span>
             {t('footer.faq')}
           </Link>
-          <Link
-            to="/about/"
-            className="inline-flex items-center gap-1.5 hover:text-white transition-colors duration-200"
-          >
-            <span aria-hidden="true" className="text-white/50">
+          <Link to="/about/" className={FOOTER_TEXT_LINK_CLASS}>
+            <span aria-hidden="true" className="text-text-muted/60">
               i
             </span>
             {t('footer.about')}
           </Link>
-          <Link
-            to="/privacy/"
-            className="inline-flex items-center gap-1.5 hover:text-white transition-colors duration-200"
-          >
-            <span aria-hidden="true" className="text-white/50">
+          <Link to="/privacy/" className={FOOTER_TEXT_LINK_CLASS}>
+            <span aria-hidden="true" className="text-text-muted/60">
               🔒
             </span>
             {t('footer.privacyPolicy')}
@@ -342,20 +328,20 @@ export function Footer() {
         </div>
 
         {/* 分隔線 */}
-        <div className="w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent mb-8" />
+        <div className={`mb-8 ${FOOTER_DIVIDER_CLASS}`} />
 
         {/* Links Grid - SEO 內部連結 */}
         <nav aria-label={t('footer.footerNav')}>
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
             {FOOTER_SECTIONS.map((section) => (
               <div key={section.title}>
-                <h3 className="text-white font-semibold mb-4 text-lg">{section.title}</h3>
+                <h3 className="mb-4 text-lg font-semibold text-text">{section.title}</h3>
                 <ul className="space-y-2">
                   {section.links.map((link) => (
                     <li key={link.href}>
                       <Link
                         to={link.href}
-                        className="text-white/80 hover:text-white transition-colors duration-200 text-sm"
+                        className="inline-flex min-h-11 min-w-[44px] items-center justify-center rounded-control px-1 text-sm text-text-muted transition-colors duration-200 hover:text-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                       >
                         {link.label}
                       </Link>
@@ -368,25 +354,25 @@ export function Footer() {
         </nav>
 
         {/* Divider */}
-        <div className="w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent my-8" />
+        <div className={`my-8 ${FOOTER_DIVIDER_CLASS}`} />
 
         {/* Bottom Section - 整合版權與社群 */}
         <div className="flex flex-row justify-between items-center gap-4">
           {/* Copyright */}
-          <div className="text-sm text-white/80">
+          <div className="text-sm text-text-muted">
             <p suppressHydrationWarning>
               © {CURRENT_YEAR}{' '}
               <a
                 href="https://app.haotool.org/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-white/90 underline underline-offset-4 decoration-white/40 hover:text-white transition-colors"
+                className="inline-flex min-h-11 items-center rounded-control px-1 text-text underline decoration-border underline-offset-4 transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
               >
                 haotool
               </a>
               . All rights reserved.
             </p>
-            <p className="mt-1 text-xs text-white/70">{t('footer.disclaimerDesktop')}</p>
+            <p className="mt-1 text-xs text-text-muted">{t('footer.disclaimerDesktop')}</p>
           </div>
 
           {/* Threads Link */}
@@ -394,28 +380,28 @@ export function Footer() {
             href={AUTHOR_CONTACT_LINK_MAP.threads.href}
             target="_blank"
             rel="noopener noreferrer"
-            className="group flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-white/10 border border-transparent hover:border-white/20 transition-all duration-300"
+            className="group flex min-h-11 items-center gap-2 rounded-control border border-transparent px-4 py-2 transition-colors duration-200 hover:border-primary/20 hover:bg-surface-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
           >
-            <span className="text-sm text-white/70 group-hover:text-white/90 transition-colors">
+            <span className="text-sm text-text-muted transition-colors group-hover:text-text">
               {t('footer.createdBy')}
             </span>
             <svg
               viewBox="0 0 192 192"
               xmlns="http://www.w3.org/2000/svg"
-              className="w-4 h-4 text-white/70 group-hover:text-white transition-colors duration-300"
+              className="h-4 w-4 text-text-muted transition-colors duration-200 group-hover:text-primary"
               fill="currentColor"
               aria-label="Threads"
             >
               <path d="M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.19447 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C161.776 103.087 153.227 94.5962 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z" />
             </svg>
-            <span className="text-sm font-medium text-white/90 group-hover:text-white transition-colors">
+            <span className="text-sm font-medium text-text transition-colors group-hover:text-primary">
               {AUTHOR_CONTACT_LINK_MAP.threads.value}
             </span>
           </a>
         </div>
 
         {/* Additional Info */}
-        <div className="mt-6 text-xs text-white/70 text-center md:text-left">
+        <div className="mt-6 text-center text-xs text-text-muted md:text-left">
           <p>{t('footer.builtWith')}</p>
           <p className="mt-1">
             {t('footer.openSourceOn')}{' '}
@@ -423,7 +409,7 @@ export function Footer() {
               href={APP_INFO.github}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-white/90 underline underline-offset-4 decoration-white/40 hover:text-white"
+              className="inline-flex min-h-11 items-center rounded-control px-1 text-text underline decoration-border underline-offset-4 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
             >
               GitHub
             </a>
diff --git a/apps/ratewise/src/components/HomepageSEOSection.tsx b/apps/ratewise/src/components/HomepageSEOSection.tsx
index 0f0cf2bed..47befdca5 100644
--- a/apps/ratewise/src/components/HomepageSEOSection.tsx
+++ b/apps/ratewise/src/components/HomepageSEOSection.tsx
@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import { CURRENCY_DEFINITIONS } from '../features/ratewise/constants';
 import { HOMEPAGE_SEO } from '../config/seo-metadata';
+import { contentPageTokens } from '../config/design-tokens';
 import { AnswerCapsule } from './AnswerCapsule';
 
 /** 熱門幣對：外幣換台幣（依台灣旅遊熱度排序）。 */
@@ -26,12 +27,10 @@ export function HomepageSEOSection() {
   return (
     <section
       aria-labelledby="homepage-seo-heading"
-      className="px-5 pt-5 pb-3 max-w-md mx-auto w-full"
+      className={`${contentPageTokens.shell} pt-6 pb-8`}
     >
-      <div className="rounded-[28px] border border-black/5 bg-surface shadow-card p-5">
-        <p className="text-[10px] font-black uppercase tracking-[0.18em] text-primary">
-          {content.eyebrow}
-        </p>
+      <div className={contentPageTokens.surfaces.panel}>
+        <p className={contentPageTokens.sectionHeader.eyebrow}>{content.eyebrow}</p>
         <h2
           id="homepage-seo-section-heading"
           className="mt-2 text-[28px] font-black tracking-tight text-text"
@@ -54,11 +53,7 @@ export function HomepageSEOSection() {
 
         <div className="mt-4 flex flex-wrap gap-2">
           {content.quickLinks.map((link) => (
-            <Link
-              key={link.href}
-              to={link.href}
-              className="rounded-full border border-primary/15 bg-primary/5 px-3 py-1.5 text-xs font-bold text-primary transition hover:bg-primary/10"
-            >
+            <Link key={link.href} to={link.href} className={contentPageTokens.links.pill}>
               {link.label}
             </Link>
           ))}
@@ -71,18 +66,18 @@ export function HomepageSEOSection() {
       </div>
 
       {/* 熱門幣別換算：內部連結區塊，提升幣對落地頁 PageRank 傳遞。 */}
-      <div className="mt-4 rounded-[28px] border border-black/5 bg-surface shadow-card p-5">
+      <div className={`mt-4 ${contentPageTokens.surfaces.panel}`}>
         <h2 className="text-lg font-black text-text">熱門幣別換算</h2>
 
         <p className="mt-1 text-xs text-text-muted">外幣換台幣</p>
-        <div className="mt-2 grid grid-cols-2 gap-1.5">
+        <div className="mt-2 grid grid-cols-2 gap-1.5 sm:grid-cols-3 xl:grid-cols-5">
           {HOT_TO_TWD.map((code) => {
             const def = CURRENCY_DEFINITIONS[code];
             return (
               <Link
                 key={`to-twd-${code}`}
                 to={`/${code.toLowerCase()}-twd/`}
-                className="flex items-center gap-2 rounded-2xl border border-primary/10 bg-primary/5 px-3 py-2 text-xs font-bold text-primary transition hover:bg-primary/10"
+                className={contentPageTokens.links.tile}
               >
                 <span aria-hidden="true">{def.flag}</span>
                 <span>{def.name}換台幣</span>
@@ -92,14 +87,14 @@ export function HomepageSEOSection() {
         </div>
 
         <p className="mt-4 text-xs text-text-muted">台幣換外幣</p>
-        <div className="mt-2 grid grid-cols-2 gap-1.5">
+        <div className="mt-2 grid grid-cols-2 gap-1.5 sm:grid-cols-3 xl:grid-cols-5">
           {HOT_FROM_TWD.map((code) => {
             const def = CURRENCY_DEFINITIONS[code];
             return (
               <Link
                 key={`from-twd-${code}`}
                 to={`/twd-${code.toLowerCase()}/`}
-                className="flex items-center gap-2 rounded-2xl border border-primary/10 bg-primary/5 px-3 py-2 text-xs font-bold text-primary transition hover:bg-primary/10"
+                className={contentPageTokens.links.tile}
               >
                 <span aria-hidden="true">{def.flag}</span>
                 <span>台幣換{def.name}</span>
@@ -109,13 +104,16 @@ export function HomepageSEOSection() {
         </div>
       </div>
 
-      <div className="mt-4 rounded-[28px] border border-black/5 bg-surface shadow-card p-5">
+      <div className={`mt-4 ${contentPageTokens.surfaces.panel}`}>
         <h2 className="text-lg font-black text-text">{howTo.name}</h2>
         <p className="mt-2 text-sm leading-6 text-text-muted">{howTo.description}</p>
         <ol className="mt-4 space-y-3">
           {howTo.steps.map((step, index) => (
-            <li key={step.name} className="flex gap-3 rounded-2xl bg-primary/5 px-4 py-3">
-              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-black text-white">
+            <li
+              key={step.name}
+              className={`flex gap-3 px-4 py-3 ${contentPageTokens.surfaces.quiet}`}
+            >
+              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-black text-primary-foreground">
                 {step.position ?? index + 1}
               </span>
               <div>
@@ -127,13 +125,13 @@ export function HomepageSEOSection() {
         </ol>
       </div>
 
-      <div className="mt-4 rounded-[28px] border border-black/5 bg-surface shadow-card p-5">
+      <div className={`mt-4 ${contentPageTokens.surfaces.panel}`}>
         <h2 className="text-lg font-black text-text">首頁常見問題</h2>
-        <div className="mt-4 space-y-3">
+        <div className="mt-4 space-y-3 lg:grid lg:grid-cols-2 lg:gap-3 lg:space-y-0">
           {faqContent?.map((entry, index) => (
             <details
               key={entry.question}
-              className="rounded-2xl border border-primary/10 bg-primary/5"
+              className={contentPageTokens.article.faqItem}
               open={index === 0}
             >
               <summary className="cursor-pointer list-none px-4 py-3 text-sm font-bold text-text">
diff --git a/apps/ratewise/src/components/MailtoLink.tsx b/apps/ratewise/src/components/MailtoLink.tsx
index 4790ff874..ec242bae6 100644
--- a/apps/ratewise/src/components/MailtoLink.tsx
+++ b/apps/ratewise/src/components/MailtoLink.tsx
@@ -36,7 +36,7 @@ export function MailtoLink({ email, className }: MailtoLinkProps) {
       ref={ref}
       type="button"
       onClick={handleClick}
-      className={`bg-transparent border-0 p-0 cursor-pointer ${className ?? ''}`.trim()}
+      className={`cursor-pointer rounded-compact border-0 bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background ${className ?? ''}`.trim()}
     >
       {safeLabel}
     </button>
diff --git a/apps/ratewise/src/components/OfflineAwareError.tsx b/apps/ratewise/src/components/OfflineAwareError.tsx
index d86fdb62e..fe9d0e8be 100644
--- a/apps/ratewise/src/components/OfflineAwareError.tsx
+++ b/apps/ratewise/src/components/OfflineAwareError.tsx
@@ -10,6 +10,7 @@ import { useRouteError } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { WifiOff, RefreshCw, AlertTriangle } from 'lucide-react';
 import { isChunkLoadError } from '../utils/chunkLoadRecovery';
+import { notificationTokens } from '../config/design-tokens';
 
 // ── 共用 fallback UI ─────────────────────────────────────────────────────────
 
@@ -28,14 +29,14 @@ export function OfflineAwareFallback({ error }: FallbackProps) {
         data-ratewise-watchdog-ready="true"
         className="flex flex-col items-center justify-center min-h-[50vh] px-6 text-center gap-4"
       >
-        <div className="flex items-center justify-center w-16 h-16 rounded-full bg-amber-100 dark:bg-amber-900/30">
-          <WifiOff className="w-8 h-8 text-amber-600 dark:text-amber-400" aria-hidden="true" />
+        <div className="flex items-center justify-center w-16 h-16 rounded-full bg-warning/10">
+          <WifiOff className="w-8 h-8 text-warning" aria-hidden="true" />
         </div>
         <div className="space-y-1">
-          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+          <h2 className="text-base font-semibold text-text">
             {t('errors.offlineModeTitle', '離線模式')}
           </h2>
-          <p className="text-sm text-gray-500 dark:text-gray-400 max-w-xs">
+          <p className="text-sm text-text-muted max-w-xs">
             {t(
               'errors.offlineModeDescription',
               '此頁面需要網路連線才能載入。恢復連線後將自動重試，或點擊下方按鈕手動重試。',
@@ -43,8 +44,9 @@ export function OfflineAwareFallback({ error }: FallbackProps) {
           </p>
         </div>
         <button
+          type="button"
           onClick={() => window.location.reload()}
-          className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-brand-icon-from text-brand-text hover:bg-brand-icon-from/90 active:scale-95 transition-all duration-150"
+          className={`${notificationTokens.actions.primary} gap-2 rounded-control px-4 py-2 text-sm`}
         >
           <RefreshCw className="w-4 h-4" aria-hidden="true" />
           {t('errors.reload', '重新載入')}
@@ -58,14 +60,14 @@ export function OfflineAwareFallback({ error }: FallbackProps) {
       data-ratewise-watchdog-ready="true"
       className="flex flex-col items-center justify-center min-h-[50vh] px-6 text-center gap-4"
     >
-      <div className="flex items-center justify-center w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30">
-        <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" aria-hidden="true" />
+      <div className="flex items-center justify-center w-16 h-16 rounded-full bg-destructive/10">
+        <AlertTriangle className="w-8 h-8 text-destructive" aria-hidden="true" />
       </div>
       <div className="space-y-1">
-        <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+        <h2 className="text-base font-semibold text-text">
           {t('errors.routeLoadFailedTitle', '頁面載入失敗')}
         </h2>
-        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-xs">
+        <p className="text-sm text-text-muted max-w-xs">
           {t(
             'errors.routeLoadFailedDescription',
             '可能是最近版本更新造成資源不一致，請重新載入試試。',
@@ -73,8 +75,9 @@ export function OfflineAwareFallback({ error }: FallbackProps) {
         </p>
       </div>
       <button
+        type="button"
         onClick={() => window.location.reload()}
-        className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-brand-icon-from text-brand-text hover:bg-brand-icon-from/90 active:scale-95 transition-all duration-150"
+        className={`${notificationTokens.actions.primary} gap-2 rounded-control px-4 py-2 text-sm`}
       >
         <RefreshCw className="w-4 h-4" aria-hidden="true" />
         {t('errors.reload', '重新載入')}
diff --git a/apps/ratewise/src/components/OfflineIndicator.tsx b/apps/ratewise/src/components/OfflineIndicator.tsx
index 5c8e80ca1..c5282a6ae 100644
--- a/apps/ratewise/src/components/OfflineIndicator.tsx
+++ b/apps/ratewise/src/components/OfflineIndicator.tsx
@@ -178,10 +178,10 @@ function OfflineIndicatorClient({ forceOffline, positionClassName }: OfflineIndi
               <div className="flex items-center gap-3">
                 <div className="flex-shrink-0">
                   <div
-                    className={`relative ${notificationTokens.icon.container} ${notificationTokens.icon.warningGradient} flex items-center justify-center shadow-sm`}
+                    className={`relative ${notificationTokens.icon.container} ${notificationTokens.icon.warningGradient} flex items-center justify-center shadow-soft`}
                   >
                     <WifiOff
-                      className={`${notificationTokens.icon.svg} text-white`}
+                      className={`${notificationTokens.icon.svg} text-warning`}
                       strokeWidth={notificationTokens.icon.strokeWidth}
                       aria-hidden="true"
                     />
@@ -192,24 +192,18 @@ function OfflineIndicatorClient({ forceOffline, positionClassName }: OfflineIndi
                   <h2
                     className={`text-sm font-semibold ${notificationTokens.text.warningTitle} truncate`}
                   >
-                    {t('offline.title', '離線模式')}
+                    {t('offline.title')}
                   </h2>
                   <p className={`text-xs ${notificationTokens.text.warningDescription} truncate`}>
-                    {t('offline.description', '部分功能可能無法使用')}
+                    {t('offline.description')}
                   </p>
                 </div>
 
                 <button
+                  type="button"
                   onClick={handleDismiss}
-                  className="
-                    p-1.5 rounded-full
-                    bg-brand-icon-from/80 text-brand-text
-                    hover:text-brand-text-dark hover:bg-brand-icon-from hover:scale-[1.05]
-                    active:scale-[0.95]
-                    transition-[color,background-color,transform] duration-200 ease-out
-                    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-warning focus-visible:ring-offset-1
-                  "
-                  aria-label={t('offline.close', '關閉離線提示')}
+                  className={notificationTokens.actions.icon}
+                  aria-label={t('offline.close')}
                 >
                   <svg
                     className="w-4 h-4"
diff --git a/apps/ratewise/src/components/PageContainer.tsx b/apps/ratewise/src/components/PageContainer.tsx
deleted file mode 100644
index d69e060e6..000000000
--- a/apps/ratewise/src/components/PageContainer.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * PageContainer Component - Unified Page Layout (SSOT)
- *
- * 統一所有頁面的內容區域佈局，確保視覺一致性。
- * 使用 design-tokens.ts 中的 pageLayoutTokens 作為 SSOT。
- *
- * 設計原理（2025 最佳實踐）：
- * - 外層容器：min-h-full（不重複 overflow，由 AppLayout 統一處理滾動）
- * - 內容區域：水平內距 20px、垂直內距 24px、最大寬度 448px
- * - 底部留白：由 AppLayout pb-[calc(56px+safe-area)] 統一處理
- * - 支援自定義變體：default (標準)、full (滿版)、centered (置中)
- *
- * @example
- * ```tsx
- * // 標準頁面佈局
- * <PageContainer>
- *   <h1>Page Title</h1>
- *   <p>Content...</p>
- * </PageContainer>
- *
- * // 滿版佈局 (無 maxWidth 限制)
- * <PageContainer variant="full">
- *   <FullWidthComponent />
- * </PageContainer>
- *
- * // 置中佈局 (適合登入、空狀態等)
- * <PageContainer variant="centered">
- *   <LoginForm />
- * </PageContainer>
- *
- * // 自定義間距
- * <PageContainer padding="none" className="custom-class">
- *   <CustomContent />
- * </PageContainer>
- * ```
- *
- * @see src/config/design-tokens.ts - pageLayoutTokens SSOT
- * @see AppLayout.tsx - 外層滾動容器
- * @created 2026-01-25
- * @updated 2026-01-26 - 修正捲軸跑版問題
- * @version 2.0.0
- */
-
-import React from 'react';
-import { pageLayoutTokens } from '../config/design-tokens';
-
-export type PageContainerVariant = 'default' | 'full' | 'centered';
-export type PageContainerPadding = 'default' | 'compact' | 'none';
-
-export interface PageContainerProps {
-  /** 子元素 */
-  children: React.ReactNode;
-  /** 佈局變體 */
-  variant?: PageContainerVariant;
-  /** 內距模式 */
-  padding?: PageContainerPadding;
-  /** 自定義類別 */
-  className?: string;
-  /**
-   * 是否顯示底部留白
-   * @deprecated 已由 AppLayout 統一處理，此參數已無作用
-   */
-  hasBottomNav?: boolean;
-  /** 作為 section 還是 div */
-  as?: 'div' | 'section' | 'article';
-}
-
-/**
- * 取得容器類別
- *
- * @description 使用 min-h-full 確保內容至少填滿視口，
- *              滾動由 AppLayout 統一處理，避免雙重滾動問題
- */
-function getContainerClasses(): string {
-  return pageLayoutTokens.container.className;
-}
-
-/**
- * 取得內容區域類別
- */
-function getContentClasses(
-  variant: PageContainerVariant,
-  padding: PageContainerPadding,
-  className?: string,
-): string {
-  // 內距配置
-  const paddingClasses = {
-    default: 'px-5 py-6',
-    compact: 'px-4 py-4',
-    none: '',
-  };
-
-  // 變體配置
-  const variantClasses = {
-    default: 'max-w-md mx-auto',
-    full: 'max-w-full',
-    centered: 'max-w-md mx-auto flex flex-col items-center justify-center min-h-full',
-  };
-
-  return [paddingClasses[padding], variantClasses[variant], className].filter(Boolean).join(' ');
-}
-
-/**
- * PageContainer 組件
- */
-export function PageContainer({
-  children,
-  variant = 'default',
-  padding = 'default',
-  className,
-  hasBottomNav: _hasBottomNav = true, // deprecated, kept for backwards compatibility
-  as: Component = 'div',
-}: PageContainerProps) {
-  return (
-    <div className={getContainerClasses()}>
-      <Component className={getContentClasses(variant, padding, className)}>{children}</Component>
-    </div>
-  );
-}
-
-/**
- * PageSection - 頁面區塊組件
- *
- * 用於分隔頁面內的不同區塊，統一區塊間距。
- *
- * @example
- * ```tsx
- * <PageContainer>
- *   <PageSection>
- *     <h2>Section 1</h2>
- *     <p>Content...</p>
- *   </PageSection>
- *   <PageSection>
- *     <h2>Section 2</h2>
- *     <p>Content...</p>
- *   </PageSection>
- * </PageContainer>
- * ```
- */
-export interface PageSectionProps {
-  children: React.ReactNode;
-  className?: string;
-  /** 是否為最後一個區塊 (不加底部間距) */
-  isLast?: boolean;
-}
-
-export function PageSection({ children, className, isLast = false }: PageSectionProps) {
-  const { section } = pageLayoutTokens;
-  const sectionClass = isLast ? '' : section.className;
-
-  return <section className={`${sectionClass} ${className ?? ''}`}>{children}</section>;
-}
-
-/**
- * PageCard - 頁面卡片組件
- *
- * 統一卡片樣式，整合 design tokens。
- *
- * @example
- * ```tsx
- * <PageCard>
- *   <h3>Card Title</h3>
- *   <p>Card content...</p>
- * </PageCard>
- * ```
- */
-export interface PageCardProps {
-  children: React.ReactNode;
-  className?: string;
-  /** 是否可互動 (添加 hover 效果) */
-  interactive?: boolean;
-  /** 點擊事件 */
-  onClick?: () => void;
-}
-
-export function PageCard({ children, className, interactive = false, onClick }: PageCardProps) {
-  const { card } = pageLayoutTokens;
-  const interactiveClass = interactive ? 'cursor-pointer hover:shadow-card-hover' : '';
-
-  return (
-    <div
-      className={`${card.className} ${interactiveClass} ${className ?? ''}`}
-      onClick={onClick}
-      role={onClick ? 'button' : undefined}
-      tabIndex={onClick ? 0 : undefined}
-      onKeyDown={onClick ? (e) => e.key === 'Enter' && onClick() : undefined}
-    >
-      {children}
-    </div>
-  );
-}
-
-export default PageContainer;
diff --git a/apps/ratewise/src/components/PageNavHeader.tsx b/apps/ratewise/src/components/PageNavHeader.tsx
index 39709e073..14549dd33 100644
--- a/apps/ratewise/src/components/PageNavHeader.tsx
+++ b/apps/ratewise/src/components/PageNavHeader.tsx
@@ -6,6 +6,8 @@ import { useNavigate } from 'react-router-dom';
 import { ChevronLeft } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Breadcrumb, type BreadcrumbItem } from './Breadcrumb';
+import { pageNavHeaderTokens } from '../config/design-tokens';
+import { cn } from '../utils/classnames';
 
 export interface PageNavHeaderProps {
   breadcrumbItems: BreadcrumbItem[];
@@ -30,27 +32,19 @@ export function PageNavHeader({
   };
 
   return (
-    <div
-      className={`sticky top-0 z-20 -mx-4 px-4 py-2.5 mb-6
-        bg-background/90 backdrop-blur-md
-        border-b border-border/50 ${className}`}
-    >
-      <div className="flex min-h-[44px] items-center gap-3">
+    <div data-testid="page-nav-header" className={cn(pageNavHeaderTokens.root, className)}>
+      <div className={pageNavHeaderTokens.row}>
         <button
           type="button"
           onClick={handleBack}
-          className="inline-flex shrink-0 items-center gap-1 cursor-pointer
-            text-sm font-medium text-primary
-            transition-colors hover:text-primary-hover"
+          className={pageNavHeaderTokens.backButton}
           aria-label={t('common.back')}
         >
-          <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+          <ChevronLeft className={pageNavHeaderTokens.backIcon} aria-hidden="true" />
           <span>{t('common.back')}</span>
         </button>
 
-        <span className="h-4 w-px bg-border/60 shrink-0" aria-hidden="true" />
-
-        <Breadcrumb items={breadcrumbItems} />
+        <Breadcrumb items={breadcrumbItems} className={pageNavHeaderTokens.breadcrumbSlot} />
       </div>
     </div>
   );
diff --git a/apps/ratewise/src/components/PullToRefreshIndicator.tsx b/apps/ratewise/src/components/PullToRefreshIndicator.tsx
index c31f17749..311bf3c55 100644
--- a/apps/ratewise/src/components/PullToRefreshIndicator.tsx
+++ b/apps/ratewise/src/components/PullToRefreshIndicator.tsx
@@ -2,24 +2,9 @@ import { RefreshCw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 /**
- * PullToRefreshIndicator - Visual feedback component for pull-to-refresh
+ * PullToRefreshIndicator
  *
- * 品牌對齊風格 (Brand Aligned - Cotton Candy inspired):
- * - 柔和藍紫漸變 (soft blue-indigo-purple gradient)
- * - 參考 UpdatePrompt 的棉花糖風格但無 emoji
- * - 超大圓角 (32px) 打造柔和感
- * - 精緻玻璃擬態效果
- * - 品牌藍紫基調 (與主應用一致)
- * - Smooth rotation animation based on pull distance
- * - Progressive text states (clean, professional)
- *
- * States:
- * - Pulling: "下拉重新整理" (indigo-400)
- * - Ready: "放開以重新整理" (indigo-600)
- * - Refreshing: "重新整理中..." (indigo-500)
- *
- * Design: UpdatePrompt 棉花糖風格 + 品牌藍紫配色
- * Updated: 2025-10-22 - 棉花糖風格統一，無 emoji
+ * 提供下拉重新整理的狀態回饋，視覺語法與目前通知浮層一致。
  */
 
 interface PullToRefreshIndicatorProps {
@@ -60,28 +45,15 @@ export function PullToRefreshIndicator({
         transition: isRefreshing ? 'none' : 'opacity 0.2s ease-out, transform 0.2s ease-out',
       }}
     >
-      {/* Glassmorphism Container - 使用 SSOT token */}
       <div
         className="
-          mt-4 px-6 py-3 rounded-[32px]
-          backdrop-blur-xl backdrop-saturate-150
-          bg-surface/90
-          border-2 border-primary/20
-          shadow-xl
+          mt-4 rounded-control border border-border/70
+          bg-surface/95 px-6 py-3
+          shadow-floating
         "
-        style={{
-          boxShadow: `
-            0 20px 25px -5px rgba(0, 0, 0, 0.1),
-            0 8px 10px -6px rgba(0, 0, 0, 0.1)
-          `,
-        }}
       >
         <div className="flex items-center gap-3">
-          {/* Animated Icon with subtle glow */}
           <div className="relative">
-            {/* Icon glow effect - 使用 SSOT token */}
-            <div className="absolute inset-0 rounded-full bg-primary/30 blur-md opacity-50" />
-            {/* Main icon */}
             <RefreshCw
               className={`
                 relative
@@ -109,16 +81,6 @@ export function PullToRefreshIndicator({
           </span>
         </div>
       </div>
-
-      {/* 裝飾性泡泡 (棉花糖風格) - 使用 SSOT Design Token */}
-      <div
-        className="absolute top-0 right-0 w-24 h-24 rounded-full bg-[rgb(var(--color-accent))]/10 blur-3xl"
-        aria-hidden="true"
-      />
-      <div
-        className="absolute bottom-0 left-0 w-24 h-24 rounded-full bg-[rgb(var(--color-primary))]/10 blur-3xl"
-        aria-hidden="true"
-      />
     </div>
   );
 }
diff --git a/apps/ratewise/src/components/RateTypeTooltip.tsx b/apps/ratewise/src/components/RateTypeTooltip.tsx
index 673994b07..636c2eae8 100644
--- a/apps/ratewise/src/components/RateTypeTooltip.tsx
+++ b/apps/ratewise/src/components/RateTypeTooltip.tsx
@@ -41,13 +41,13 @@ export const RateTypeTooltip = ({ children, message, isDisabled }: RateTypeToolt
 
           {/* Tooltip 內容（相對定位在觸發元素上方） */}
           <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 animate-in fade-in-0 zoom-in-95 duration-200">
-            <div className="relative bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4 py-2 rounded-lg shadow-2xl border border-white/20 backdrop-blur-sm whitespace-nowrap">
+            <div className="relative whitespace-nowrap rounded-control border border-border/70 bg-surface px-4 py-2 text-text shadow-floating">
               {/* 訊息內容 */}
               <p className="text-sm font-medium">{message}</p>
 
               {/* 小箭頭（指向下方）- 使用 SSOT Design Token */}
               <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px">
-                <div className="w-3 h-3 bg-[rgb(var(--color-primary))] rotate-45 border-r border-b border-white/20" />
+                <div className="h-3 w-3 rotate-45 border-r border-b border-border/70 bg-surface" />
               </div>
             </div>
           </div>
diff --git a/apps/ratewise/src/components/RatingModal.tsx b/apps/ratewise/src/components/RatingModal.tsx
index 7ecc23505..1365bb3df 100644
--- a/apps/ratewise/src/components/RatingModal.tsx
+++ b/apps/ratewise/src/components/RatingModal.tsx
@@ -105,8 +105,8 @@ function RatingModalClient({
           <div
             className={`
               relative overflow-hidden pointer-events-auto ${notificationTokens.borderRadius}
-              bg-gradient-to-r from-brand-from via-brand-via to-brand-to
-              border border-brand-border/60
+              ${notificationTokens.background.brand}
+              ${notificationTokens.background.brandBorder}
               ${notificationTokens.shadow}
             `}
           >
@@ -131,7 +131,10 @@ function RatingModalClient({
                   <span className="text-2xl" aria-hidden="true">
                     🎉
                   </span>
-                  <p id="rating-modal-title" className="text-sm font-semibold text-brand-text-dark">
+                  <p
+                    id="rating-modal-title"
+                    className={`text-sm font-semibold ${notificationTokens.text.brandTitle}`}
+                  >
                     {t('rating.thankYou')}
                   </p>
                 </div>
@@ -143,25 +146,21 @@ function RatingModalClient({
                     <div>
                       <h2
                         id="rating-modal-title"
-                        className="text-sm font-semibold text-brand-text-dark"
+                        className={`text-sm font-semibold ${notificationTokens.text.brandTitle}`}
                       >
                         {t('rating.title')}
                       </h2>
-                      <p className="text-xs text-brand-text mt-0.5">{t('rating.subtitle')}</p>
+                      <p className={`mt-0.5 text-xs ${notificationTokens.text.brandDescription}`}>
+                        {t('rating.subtitle')}
+                      </p>
                     </div>
 
                     {/* 關閉按鈕 */}
                     <button
+                      type="button"
                       ref={firstButtonRef}
                       onClick={isFinalChance ? dismiss : snooze}
-                      className="
-                        p-1.5 rounded-full flex-shrink-0
-                        bg-brand-icon-from/80 text-brand-text
-                        hover:text-brand-text-dark hover:bg-brand-icon-from hover:scale-[1.05]
-                        active:scale-[0.95]
-                        transition-[color,background-color,transform] duration-200 ease-out
-                        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1
-                      "
+                      className={`${notificationTokens.actions.icon} flex-shrink-0`}
                       aria-label={t('rating.dismiss')}
                     >
                       <svg
@@ -204,30 +203,18 @@ function RatingModalClient({
                   {/* 操作按鈕 */}
                   <div className="flex items-center justify-between gap-2">
                     <button
+                      type="button"
                       onClick={isFinalChance ? dismiss : snooze}
-                      className="
-                        text-xs text-brand-text/70 hover:text-brand-text
-                        transition-colors duration-150
-                        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1
-                        rounded
-                      "
+                      className={notificationTokens.actions.text}
                     >
                       {isFinalChance ? t('rating.dismiss') : t('rating.later')}
                     </button>
 
                     <button
+                      type="button"
                       onClick={() => void handleSubmit()}
                       disabled={selectedStar === 0 || isSubmitting}
-                      className="
-                        px-3 py-1.5 rounded-full text-xs font-medium
-                        bg-gradient-to-r from-brand-button-from to-brand-button-to
-                        text-white shadow-sm
-                        hover:from-brand-button-hover-from hover:to-brand-button-hover-to
-                        hover:scale-[1.02] active:scale-[0.98]
-                        disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:scale-100
-                        transition-[color,background-color,border-color,transform,opacity] duration-200 ease-out
-                        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1
-                      "
+                      className={`${notificationTokens.actions.primary} disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-border/70 disabled:hover:bg-surface-elevated disabled:hover:text-text disabled:hover:scale-100`}
                     >
                       {isSubmitting ? t('rating.submitting') : t('rating.submit')}
                     </button>
@@ -263,6 +250,7 @@ function StarButton({
 }: StarButtonProps) {
   return (
     <button
+      type="button"
       role="radio"
       aria-checked={selected}
       aria-label={`${star} 星`}
@@ -272,15 +260,15 @@ function StarButton({
       onFocus={() => onHover(star)}
       onBlur={onLeave}
       className={`
-        w-8 h-8 flex items-center justify-center rounded
+        flex h-11 w-11 items-center justify-center rounded-full
         ${prefersReducedMotion ? '' : 'transition-transform duration-100 hover:scale-110 active:scale-95'}
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1
       `}
     >
       <svg
         viewBox="0 0 24 24"
         className={`w-6 h-6 transition-colors duration-100 ${
-          filled ? 'fill-yellow-400 stroke-yellow-500' : 'fill-transparent stroke-brand-text/40'
+          filled ? 'fill-favorite stroke-favorite' : 'fill-transparent stroke-text-muted'
         }`}
         strokeWidth={1.5}
         aria-hidden="true"
diff --git a/apps/ratewise/src/components/RouteErrorBoundary.tsx b/apps/ratewise/src/components/RouteErrorBoundary.tsx
index a28c997d4..a7472ab30 100644
--- a/apps/ratewise/src/components/RouteErrorBoundary.tsx
+++ b/apps/ratewise/src/components/RouteErrorBoundary.tsx
@@ -21,6 +21,7 @@ import i18n from '../i18n';
 import { logger } from '../utils/logger';
 import { isChunkLoadError } from '../utils/chunkLoadRecovery';
 import { SupportContactLinks } from './SupportContactLinks';
+import { feedbackSurfaceTokens } from '../config/design-tokens';
 
 interface Props {
   children: ReactNode;
@@ -57,10 +58,7 @@ function ErrorCard({
           <h2 className="text-lg font-bold text-text mb-2">{title}</h2>
           <p className="text-sm text-text-muted">{description}</p>
         </div>
-        <button
-          onClick={onAction}
-          className="w-full flex items-center justify-center gap-2 py-3 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl shadow-lg transition"
-        >
+        <button type="button" onClick={onAction} className={feedbackSurfaceTokens.actionButton}>
           <RefreshCw size={18} />
           {actionLabel}
         </button>
diff --git a/apps/ratewise/src/components/SideNavigation.tsx b/apps/ratewise/src/components/SideNavigation.tsx
index 0b6624ba2..daea7cade 100644
--- a/apps/ratewise/src/components/SideNavigation.tsx
+++ b/apps/ratewise/src/components/SideNavigation.tsx
@@ -40,25 +40,30 @@ const navItems: NavItem[] = [
     icon: CreditCard,
   },
   {
-    path: '/multi',
+    path: '/multi/',
     labelKey: 'nav.multiCurrency',
     ariaLabelKey: 'nav.multiCurrencyFull',
     icon: Globe,
   },
   {
-    path: '/favorites',
+    path: '/favorites/',
     labelKey: 'nav.favorites',
     ariaLabelKey: 'nav.favoritesFull',
     icon: Star,
   },
   {
-    path: '/settings',
+    path: '/settings/',
     labelKey: 'nav.settings',
     ariaLabelKey: 'nav.settingsFull',
     icon: Settings,
   },
 ];
 
+function normalizeNavPath(path: string): string {
+  if (!path || path === '/') return '/';
+  return path.endsWith('/') ? path.slice(0, -1) : path;
+}
+
 /**
  * SideNavigation Props
  */
@@ -80,26 +85,31 @@ export function SideNavigation({ className = '' }: SideNavigationProps) {
     <aside
       className={`
         ${className}
-        w-64
-        bg-[rgb(var(--color-surface))]
-        border-r border-[rgb(var(--color-border))]
+        w-72 xl:w-80
+        bg-background
+        border-r border-border
         flex flex-col
       `}
       aria-label={t('nav.mainNavigation')}
     >
       {/* Logo / Brand */}
-      <div className="px-6 py-4 border-b border-[rgb(var(--color-border))]">
+      <div className="border-b border-border px-7 py-6">
         {/* 品牌標題（使用 span 而非 h1，與 mobile Header 一致，避免每頁重複 h1） */}
-        <span data-testid="app-title" className="text-xl font-bold text-[rgb(var(--color-text))]">
+        <span
+          data-testid="app-title"
+          className="text-[1.125rem] font-semibold tracking-[0.01em] text-text"
+        >
           {t('app.title')}
         </span>
-        <p className="text-xs text-[rgb(var(--color-text-muted))] mt-1">{t('app.subtitle')}</p>
+        <p className="mt-1 text-xs uppercase tracking-[0.12em] text-text-muted">
+          {t('app.subtitle')}
+        </p>
       </div>
 
       {/* Navigation Items */}
-      <nav className="flex-1 px-3 py-4 space-y-1">
+      <nav className="flex-1 px-4 py-5 space-y-1.5">
         {navItems.map((item) => {
-          const isActive = location.pathname === item.path;
+          const isActive = normalizeNavPath(location.pathname) === normalizeNavPath(item.path);
           const Icon = item.icon;
 
           return (
@@ -108,22 +118,19 @@ export function SideNavigation({ className = '' }: SideNavigationProps) {
               to={item.path}
               className={`
                 flex items-center gap-3
-                px-3 py-2
-                rounded-lg
+                min-h-11 px-3.5 py-2.5
+                rounded-control border border-transparent
                 transition-colors duration-200
                 ${
                   isActive
-                    ? 'bg-[rgb(var(--color-accent)/0.1)] text-[rgb(var(--color-primary))] font-medium'
-                    : 'text-[rgb(var(--color-text-muted))] hover:bg-[rgb(var(--color-border)/0.5)] hover:text-[rgb(var(--color-text))]'
+                    ? 'border-primary/20 bg-primary/10 font-medium text-text'
+                    : 'text-text-muted hover:bg-border/30 hover:text-text'
                 }
               `}
               aria-label={t(item.ariaLabelKey)}
               aria-current={isActive ? 'page' : undefined}
             >
-              <Icon
-                className={`w-5 h-5 ${isActive ? 'text-[rgb(var(--color-primary))]' : ''}`}
-                aria-hidden={true}
-              />
+              <Icon className={`h-5 w-5 ${isActive ? 'text-primary' : ''}`} aria-hidden={true} />
               <span className="text-sm">{t(item.labelKey)}</span>
             </Link>
           );
@@ -131,8 +138,8 @@ export function SideNavigation({ className = '' }: SideNavigationProps) {
       </nav>
 
       {/* Footer */}
-      <div className="px-6 py-4 border-t border-[rgb(var(--color-border))]">
-        <p className="text-xs text-[rgb(var(--color-text-muted))]">
+      <div className="border-t border-border px-7 py-5">
+        <p className="text-xs uppercase tracking-[0.12em] text-text-muted">
           {t('app.version')} {getDisplayVersion()}
         </p>
       </div>
diff --git a/apps/ratewise/src/components/SkeletonLoader.tsx b/apps/ratewise/src/components/SkeletonLoader.tsx
index 9caf03054..5bcac566b 100644
--- a/apps/ratewise/src/components/SkeletonLoader.tsx
+++ b/apps/ratewise/src/components/SkeletonLoader.tsx
@@ -27,6 +27,12 @@ import { AlertCircle, RefreshCw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { performFullRefresh } from '../utils/swUtils';
 import { APP_INFO } from '../config/app-info';
+import {
+  feedbackSurfaceTokens,
+  multiConverterLayoutTokens,
+  pageLayoutTokens,
+  rateWiseLayoutTokens,
+} from '../config/design-tokens';
 import { MailtoLink } from './MailtoLink';
 import { SupportContactLinks } from './SupportContactLinks';
 
@@ -47,22 +53,23 @@ function SkeletonTimeoutFallback() {
   };
 
   return (
-    <div className="p-6 flex items-center justify-center min-h-[60vh]">
-      <div className="bg-surface rounded-2xl shadow-xl p-8 max-w-sm w-full space-y-5 text-center">
+    <div className="flex min-h-[60vh] items-center justify-center p-6">
+      <div className="w-full max-w-sm space-y-5 rounded-card border border-border/70 bg-surface p-8 text-center shadow-floating">
         <AlertCircle className="mx-auto text-warning" size={40} />
         <div>
           <h2 className="text-lg font-bold text-text mb-2">{t('errors.appLoadTimeout')}</h2>
           <p className="text-sm text-text-muted">{t('errors.appLoadTimeoutDesc')}</p>
         </div>
         <button
+          type="button"
           onClick={handleReload}
           disabled={isReloading}
-          className="w-full flex items-center justify-center gap-2 py-3 bg-primary hover:bg-primary-hover disabled:opacity-60 text-white font-semibold rounded-xl shadow-lg transition"
+          className={`${feedbackSurfaceTokens.actionButton} disabled:opacity-60`}
         >
           <RefreshCw size={18} className={isReloading ? 'animate-spin' : ''} />
           {isReloading ? t('errors.reloading') : t('errors.forceReload')}
         </button>
-        <SupportContactLinks title="若問題持續發生，請聯絡作者：" description="" />
+        <SupportContactLinks title={t('support.contactTitle')} description="" />
         <p className="text-xs text-text-muted">
           {t('errors.cacheHint')} <MailtoLink email={APP_INFO.email} className="underline" />
         </p>
@@ -80,6 +87,7 @@ function SkeletonTimeoutFallback() {
  *              內建 watchdog：客戶端顯示超過 10 秒自動轉為錯誤復原 UI
  */
 export const SkeletonLoader = () => {
+  const { t } = useTranslation();
   const [isTimedOut, setIsTimedOut] = useState(false);
   const isBrowser = typeof window !== 'undefined';
 
@@ -96,7 +104,7 @@ export const SkeletonLoader = () => {
   }
 
   return (
-    <div className="p-4 md:p-6" role="status" aria-live="polite">
+    <div className={rateWiseLayoutTokens.content.className} role="status" aria-live="polite">
       {/* 僅在 client 顯示輔助文案；SSG HTML 不注入通用 SEO 文字，避免壓過 route 主內容。 */}
       {isBrowser && (
         <div
@@ -109,39 +117,39 @@ export const SkeletonLoader = () => {
             clip: 'rect(0,0,0,0)',
           }}
         >
-          <p>{APP_INFO.name} 載入中。</p>
+          <p>{t('skeleton.appLoading')}</p>
         </div>
       )}
 
-      <div className="mx-auto max-w-md space-y-4">
+      <div className="mx-auto max-w-2xl space-y-4">
         {/* 來源貨幣輸入骨架 - 對應 SingleConverter 上半部 */}
         <div className="space-y-3">
-          <div className="skeleton-shimmer h-4 w-20 rounded" />
+          <div className="skeleton-shimmer h-4 w-20 rounded-compact" />
           <div className="relative">
             {/* 貨幣選擇器 + 金額輸入 */}
-            <div className="skeleton-shimmer h-14 w-full rounded-2xl" />
+            <div className="skeleton-shimmer h-14 w-full rounded-control" />
           </div>
           {/* 快速金額按鈕 - 水平排列 */}
           <div className="flex gap-2 overflow-hidden">
             {[1, 2, 3, 4, 5].map((i) => (
-              <div key={i} className="skeleton-shimmer h-8 w-14 flex-shrink-0 rounded-xl" />
+              <div key={i} className="skeleton-shimmer h-8 w-14 flex-shrink-0 rounded-control" />
             ))}
           </div>
         </div>
 
         {/* 匯率卡片骨架 - 對應匯率顯示區塊 */}
-        <div className="skeleton-card rounded-xl p-4 space-y-3">
+        <div className="skeleton-card space-y-3 rounded-control p-4">
           {/* 匯率類型切換器 */}
           <div className="flex justify-center">
             <div className="skeleton-shimmer h-7 w-28 rounded-full" />
           </div>
           {/* 主匯率顯示 */}
           <div className="text-center space-y-2 py-3">
-            <div className="skeleton-shimmer h-7 w-52 mx-auto rounded-lg" />
-            <div className="skeleton-shimmer h-4 w-40 mx-auto rounded" />
+            <div className="skeleton-shimmer h-7 w-52 mx-auto rounded-control" />
+            <div className="skeleton-shimmer h-4 w-40 mx-auto rounded-compact" />
           </div>
           {/* 迷你趨勢圖區域 */}
-          <div className="skeleton-bg h-20 rounded-xl" />
+          <div className="skeleton-bg h-20 rounded-control" />
         </div>
 
         {/* 交換按鈕骨架 */}
@@ -151,29 +159,29 @@ export const SkeletonLoader = () => {
 
         {/* 目標貨幣輸入骨架 - 對應 SingleConverter 下半部 */}
         <div className="space-y-3">
-          <div className="skeleton-shimmer h-4 w-20 rounded" />
+          <div className="skeleton-shimmer h-4 w-20 rounded-compact" />
           <div className="relative">
             {/* 貨幣選擇器 + 金額輸出 */}
-            <div className="skeleton-shimmer-accent h-14 w-full rounded-2xl" />
+            <div className="skeleton-shimmer-accent h-14 w-full rounded-control" />
           </div>
           {/* 快速金額按鈕 - 水平排列 */}
           <div className="flex gap-2 overflow-hidden">
             {[1, 2, 3, 4, 5].map((i) => (
-              <div key={i} className="skeleton-shimmer h-8 w-14 flex-shrink-0 rounded-xl" />
+              <div key={i} className="skeleton-shimmer h-8 w-14 flex-shrink-0 rounded-control" />
             ))}
           </div>
         </div>
 
         {/* 加入歷史記錄按鈕骨架 */}
-        <div className="skeleton-shimmer-accent h-12 w-full rounded-xl" />
+        <div className="skeleton-shimmer-accent h-12 w-full rounded-control" />
 
         {/* 資料來源骨架 - 對應底部小字 */}
         <div className="flex justify-center">
-          <div className="skeleton-shimmer h-3 w-40 rounded" />
+          <div className="skeleton-shimmer h-3 w-40 rounded-compact" />
         </div>
       </div>
 
-      {isBrowser ? <span className="sr-only">載入匯率資料中...</span> : null}
+      {isBrowser ? <span className="sr-only">{t('skeleton.ratesLoading')}</span> : null}
     </div>
   );
 };
@@ -189,11 +197,11 @@ export const CurrencyCardSkeleton = () => {
         <div className="flex items-center gap-2">
           <div className="skeleton-shimmer w-8 h-8 rounded-full" />
           <div className="space-y-1">
-            <div className="skeleton-shimmer h-4 w-12 rounded" />
-            <div className="skeleton-shimmer h-3 w-20 rounded" />
+            <div className="skeleton-shimmer h-4 w-12 rounded-compact" />
+            <div className="skeleton-shimmer h-3 w-20 rounded-compact" />
           </div>
         </div>
-        <div className="skeleton-shimmer h-4 w-16 rounded" />
+        <div className="skeleton-shimmer h-4 w-16 rounded-compact" />
       </div>
     </div>
   );
@@ -208,7 +216,7 @@ export const ConverterSkeleton = ({ mode }: { mode: 'single' | 'multi' }) => {
     return (
       <div className="space-y-4" role="status">
         {/* 基準貨幣輸入 */}
-        <div className="skeleton-shimmer h-12 rounded-lg" />
+        <div className="skeleton-shimmer h-12 rounded-control" />
 
         {/* 貨幣卡片列表 */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -224,12 +232,12 @@ export const ConverterSkeleton = ({ mode }: { mode: 'single' | 'multi' }) => {
     <div className="space-y-4" role="status">
       {/* 貨幣選擇器 */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="skeleton-shimmer h-14 rounded-lg" />
-        <div className="skeleton-shimmer h-14 rounded-lg" />
+        <div className="skeleton-shimmer h-14 rounded-control" />
+        <div className="skeleton-shimmer h-14 rounded-control" />
       </div>
 
       {/* 結果顯示 */}
-      <div className="skeleton-shimmer-accent h-16 rounded-xl" />
+      <div className="skeleton-shimmer-accent h-16 rounded-control" />
     </div>
   );
 };
@@ -239,74 +247,95 @@ export const ConverterSkeleton = ({ mode }: { mode: 'single' | 'multi' }) => {
  * 對應 Settings 頁面布局
  */
 export const SettingsSkeleton = () => {
+  const { t } = useTranslation();
+
   return (
-    <div className="skeleton-page p-5 max-w-md mx-auto space-y-6" role="status" aria-live="polite">
-      {/* 介面風格區塊 */}
-      <section className="space-y-3">
-        <div className="skeleton-shimmer h-4 w-20 rounded" />
-        <div className="grid grid-cols-2 gap-3">
-          {[1, 2, 3, 4, 5, 6].map((i) => (
-            <div key={i} className="skeleton-shimmer h-20 rounded-xl" />
-          ))}
-        </div>
-      </section>
-
-      {/* 語言區塊 */}
-      <section className="space-y-3">
-        <div className="skeleton-shimmer h-4 w-12 rounded" />
-        <div className="skeleton-card p-1.5">
-          <div className="flex gap-1">
-            {[1, 2, 3].map((i) => (
-              <div key={i} className="skeleton-shimmer flex-1 h-16 rounded-2xl" />
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* 儲存與快取區塊 */}
-      <section className="space-y-3">
-        <div className="skeleton-shimmer h-4 w-24 rounded" />
-        <div className="skeleton-card p-5 space-y-4">
-          <div className="flex justify-between">
-            <div className="skeleton-shimmer h-4 w-24 rounded" />
-            <div className="skeleton-shimmer h-5 w-16 rounded" />
-          </div>
-          <div className="flex justify-between">
-            <div className="skeleton-shimmer h-4 w-20 rounded" />
-            <div className="skeleton-shimmer h-5 w-12 rounded" />
-          </div>
-        </div>
-      </section>
-
-      {/* 資料管理區塊（危險操作）— 對應 Settings.tsx ShieldAlert section */}
-      <section className="space-y-3">
-        <div className="skeleton-shimmer h-4 w-20 rounded" />
-        <div className="skeleton-card overflow-hidden">
-          <div
-            data-testid="skeleton-settings-danger-btn"
-            className="skeleton-shimmer h-12 w-full rounded-none"
-          />
+    <div className={pageLayoutTokens.content.className} role="status" aria-live="polite">
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] xl:items-start">
+        <div className="space-y-6">
+          {/* 介面風格區塊 */}
+          <section className="space-y-3">
+            <div className="skeleton-shimmer h-4 w-20 rounded-compact" />
+            <div className="grid grid-cols-2 gap-3 lg:grid-cols-3">
+              {[1, 2, 3, 4, 5, 6].map((i) => (
+                <div key={i} className="skeleton-shimmer h-20 rounded-control" />
+              ))}
+            </div>
+          </section>
+
+          {/* 語言區塊 */}
+          <section className="space-y-3">
+            <div className="skeleton-shimmer h-4 w-12 rounded-compact" />
+            <div className="skeleton-card p-1.5">
+              <div className="flex gap-1">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="skeleton-shimmer h-16 flex-1 rounded-control" />
+                ))}
+              </div>
+            </div>
+          </section>
+
+          <section className="space-y-3">
+            <div className="skeleton-shimmer h-4 w-16 rounded-compact" />
+            <div className="skeleton-card p-1.5">
+              <div className="flex gap-1">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="skeleton-shimmer h-16 flex-1 rounded-control" />
+                ))}
+              </div>
+            </div>
+            <div className="skeleton-shimmer h-3 w-56 rounded-compact" />
+          </section>
         </div>
-      </section>
 
-      {/* 支援與資訊區塊 — 對應 Settings.tsx HelpCircle section（4 個連結列）*/}
-      <section className="space-y-3">
-        <div className="skeleton-shimmer h-4 w-28 rounded" />
-        <div className="skeleton-card overflow-hidden divide-y divide-border">
-          {[1, 2, 3, 4].map((i) => (
-            <div
-              key={i}
-              data-testid="skeleton-settings-link"
-              className="px-5 py-4 flex items-center justify-between"
-            >
-              <div className="skeleton-shimmer h-4 w-24 rounded" />
-              <div className="skeleton-shimmer h-4 w-4 rounded" />
+        <div className="space-y-6">
+          {/* 儲存與快取區塊 */}
+          <section className="space-y-3">
+            <div className="skeleton-shimmer h-4 w-24 rounded-compact" />
+            <div className="skeleton-card p-5 space-y-4">
+              <div className="flex justify-between">
+                <div className="skeleton-shimmer h-4 w-24 rounded-compact" />
+                <div className="skeleton-shimmer h-5 w-16 rounded-compact" />
+              </div>
+              <div className="flex justify-between">
+                <div className="skeleton-shimmer h-4 w-20 rounded-compact" />
+                <div className="skeleton-shimmer h-5 w-12 rounded-compact" />
+              </div>
+              <div className="mx-auto h-3 w-40 rounded-compact skeleton-shimmer" />
             </div>
-          ))}
+          </section>
+
+          {/* 資料管理區塊（危險操作）— 對應 Settings.tsx ShieldAlert section */}
+          <section className="space-y-3">
+            <div className="skeleton-shimmer h-4 w-20 rounded-compact" />
+            <div className="skeleton-card overflow-hidden">
+              <div
+                data-testid="skeleton-settings-danger-btn"
+                className="skeleton-shimmer h-12 w-full rounded-none"
+              />
+            </div>
+          </section>
+
+          {/* 支援與資訊區塊 — 對應 Settings.tsx HelpCircle section（7 個連結列）*/}
+          <section className="space-y-3">
+            <div className="skeleton-shimmer h-4 w-28 rounded-compact" />
+            <div className="skeleton-card overflow-hidden divide-y divide-border">
+              {[1, 2, 3, 4, 5, 6, 7].map((i) => (
+                <div
+                  key={i}
+                  data-testid="skeleton-settings-link"
+                  className="flex items-center justify-between px-5 py-4"
+                >
+                  <div className="skeleton-shimmer h-4 w-24 rounded-compact" />
+                  <div className="skeleton-shimmer h-4 w-4 rounded-compact" />
+                </div>
+              ))}
+            </div>
+          </section>
         </div>
-      </section>
+      </div>
 
-      <span className="sr-only">載入設定中...</span>
+      <span className="sr-only">{t('skeleton.settingsLoading')}</span>
     </div>
   );
 };
@@ -324,54 +353,82 @@ export const SettingsSkeleton = () => {
  *   - 幣別名稱（flex-1）→ 對應 code + name
  *   - 換算按鈕（flex-shrink-0）→ 對應「換算 →」按鈕區
  *
- * 舊版錯誤：左側為「拖曳手柄 w-4 h-8」→ 實際 UI 左側是 star(w-7)
+ * 先前骨架曾誤設為獨立拖曳手柄；實際 UI 左側為 star(w-7) 欄位。
  *
  * @see Favorites.tsx — 實際 UI 結構（star → flag+name → convert btn）
  * @see segmentedSwitch tokens — Tab 高度 py-3.5 + icon(18) + label(10) ≈ h-14
  */
 export const FavoritesSkeleton = () => {
+  const { t } = useTranslation();
+
   return (
     <div
-      className="flex-1 px-3 sm:px-5 py-6 max-w-md mx-auto w-full"
+      className={`${pageLayoutTokens.content.className} flex-1`}
       role="status"
       aria-live="polite"
     >
-      {/* 頁籤切換器 — 對應 'card p-1.5' segmented switch，2 個 flex-1 tab */}
-      <div className="skeleton-card p-1.5 mb-6">
-        <div className="flex gap-1">
-          {[1, 2].map((i) => (
-            <div key={i} className="skeleton-shimmer flex-1 h-14 rounded-2xl" />
-          ))}
+      <div className="flex flex-col gap-6 lg:grid lg:grid-cols-[minmax(0,1fr)_minmax(18rem,20rem)] lg:items-start">
+        <div className="min-w-0">
+          {/* 頁籤切換器 — 對應 'card p-1.5' segmented switch，2 個 flex-1 tab */}
+          <div className="mb-6 skeleton-card p-1.5">
+            <div className="flex gap-1">
+              {[1, 2].map((i) => (
+                <div key={i} className="skeleton-shimmer h-14 flex-1 rounded-control" />
+              ))}
+            </div>
+          </div>
+
+          {/* 貨幣清單 — 對應 'space-y-2'，每行 'card p-4 flex items-center gap-3' */}
+          <section className="space-y-2">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className="skeleton-card flex items-center gap-3 p-4">
+                <div
+                  data-testid="skeleton-star"
+                  className="flex w-7 flex-shrink-0 items-center justify-center"
+                >
+                  <div className="skeleton-shimmer h-5 w-5 rounded-compact" />
+                </div>
+                <div className="skeleton-shimmer h-8 w-8 rounded-full flex-shrink-0" />
+                <div className="min-w-0 flex-1 space-y-1.5">
+                  <div className="skeleton-shimmer h-4 w-16 rounded-compact" />
+                  <div className="skeleton-shimmer h-3 w-24 rounded-compact" />
+                </div>
+                <div className="skeleton-shimmer h-4 w-14 rounded-compact flex-shrink-0" />
+              </div>
+            ))}
+          </section>
         </div>
-      </div>
 
-      {/* 貨幣清單 — 對應 'space-y-2'，每行 'card p-4 flex items-center gap-3' */}
-      <section className="space-y-2">
-        {[1, 2, 3, 4, 5].map((i) => (
-          <div key={i} className="skeleton-card p-4 flex items-center gap-3">
-            {/* 星號欄 — 對應 'w-7 flex-shrink-0 flex items-center justify-center'
-             *  Favorites.tsx 左側永遠是 star（固定裝飾或互動按鈕），非拖曳手柄
-             */}
-            <div
-              data-testid="skeleton-star"
-              className="w-7 flex-shrink-0 flex items-center justify-center"
-            >
-              <div className="skeleton-shimmer w-5 h-5 rounded" />
+        <aside className="hidden lg:flex lg:flex-col lg:gap-4">
+          <section className="skeleton-card p-5">
+            <div className="skeleton-shimmer h-4 w-24 rounded-compact" />
+            <div className="mt-4 space-y-3">
+              {[1, 2].map((i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between rounded-control border border-border/70 bg-surface px-4 py-3"
+                >
+                  <div className="skeleton-shimmer h-3 w-20 rounded-compact" />
+                  <div className="skeleton-shimmer h-5 w-10 rounded-compact" />
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="skeleton-card p-5">
+            <div className="space-y-2">
+              <div className="skeleton-shimmer h-3 w-full rounded-compact" />
+              <div className="skeleton-shimmer h-3 w-4/5 rounded-compact" />
             </div>
-            {/* 國旗 — 對應 'text-2xl w-8 text-center' emoji flag */}
-            <div className="skeleton-shimmer w-8 h-8 rounded-full flex-shrink-0" />
-            {/* 幣別代碼 + 名稱 — 對應 'flex-1 min-w-0' */}
-            <div className="flex-1 space-y-1.5 min-w-0">
-              <div className="skeleton-shimmer h-4 w-16 rounded" />
-              <div className="skeleton-shimmer h-3 w-24 rounded" />
+            <div className="mt-4 space-y-2">
+              <div className="skeleton-shimmer h-11 w-full rounded-control" />
+              <div className="skeleton-shimmer h-11 w-full rounded-control" />
             </div>
-            {/* 換算按鈕區 — 對應 'px-2 py-1 flex-shrink-0' 的「換算 →」 */}
-            <div className="skeleton-shimmer h-4 w-14 rounded flex-shrink-0" />
-          </div>
-        ))}
-      </section>
+          </section>
+        </aside>
+      </div>
 
-      <span className="sr-only">載入收藏中...</span>
+      <span className="sr-only">{t('skeleton.favoritesLoading')}</span>
     </div>
   );
 };
@@ -382,7 +439,7 @@ export const FavoritesSkeleton = () => {
  *
  * 結構設計原則（CLS 防止）：
  * - 完全鏡像實際 MultiConverter UI 的佈局層級
- * - 外層：flex-1 flex flex-col px-3 sm:px-5 py-4 max-w-md mx-auto w-full
+ * - 外層：使用 multiConverterLayoutTokens.content.className
  * - 卡片：skeleton-card p-4 flex-1 flex flex-col（對應 'card p-4 flex-1 flex flex-col'）
  * - 快速金額列：5 個 pill，對應 flex gap-2 mb-4 overflow-x-auto
  * - 貨幣清單：8 行，每行結構 star(w-6) | flag(w-7) | code+name | [right] amount+rate
@@ -391,12 +448,10 @@ export const FavoritesSkeleton = () => {
  * @see multiConverterLayoutTokens — SSOT 頁面佈局 token
  */
 export const MultiConverterSkeleton = () => {
+  const { t } = useTranslation();
+
   return (
-    <div
-      className="flex-1 flex flex-col px-3 sm:px-5 py-4 max-w-md mx-auto w-full"
-      role="status"
-      aria-live="polite"
-    >
+    <div className={multiConverterLayoutTokens.content.className} role="status" aria-live="polite">
       {/* 主卡片 — 對應 'card p-4 flex-1 flex flex-col' */}
       <div className="skeleton-card p-4 flex-1 flex flex-col">
         {/* 快速金額 pill 列 — 對應 'flex gap-2 mb-4 overflow-x-auto scrollbar-hide' */}
@@ -405,7 +460,7 @@ export const MultiConverterSkeleton = () => {
             <div
               key={i}
               data-testid="skeleton-quick-pill"
-              className="skeleton-shimmer h-8 w-14 flex-shrink-0 rounded-xl"
+              className="skeleton-shimmer h-8 w-14 flex-shrink-0 rounded-control"
             />
           ))}
         </div>
@@ -416,30 +471,30 @@ export const MultiConverterSkeleton = () => {
             <div
               key={i}
               data-testid="skeleton-currency-row"
-              className="flex items-center px-3 py-2.5 rounded-xl"
+              className="flex items-center rounded-control px-3 py-2.5"
             >
               {/* 星號欄 — 對應 'w-6 flex-shrink-0 flex items-center justify-center' */}
               <div className="w-6 flex-shrink-0 flex items-center justify-center">
-                <div className="skeleton-shimmer w-4 h-4 rounded" />
+                <div className="skeleton-shimmer w-4 h-4 rounded-compact" />
               </div>
               {/* 國旗欄 — 對應 'text-xl flex-shrink-0 w-7 text-center' */}
-              <div className="skeleton-shimmer w-6 h-5 rounded flex-shrink-0 mx-1" />
+              <div className="skeleton-shimmer w-6 h-5 rounded-compact flex-shrink-0 mx-1" />
               {/* 幣別代碼 + 名稱 — 對應 code text-sm + name text-[11px] */}
               <div className="space-y-1 ml-1 flex-shrink-0">
-                <div className="skeleton-shimmer h-3.5 w-10 rounded" />
-                <div className="skeleton-shimmer h-2.5 w-16 rounded" />
+                <div className="skeleton-shimmer h-3.5 w-10 rounded-compact" />
+                <div className="skeleton-shimmer h-2.5 w-16 rounded-compact" />
               </div>
               {/* 金額 + 匯率資訊（右側）— 對應 'flex-1 ml-2' text-right */}
               <div className="flex-1 ml-2 space-y-1">
-                <div className="skeleton-shimmer h-4 w-20 ml-auto rounded" />
-                <div className="skeleton-shimmer h-2.5 w-28 ml-auto rounded" />
+                <div className="skeleton-shimmer h-4 w-20 ml-auto rounded-compact" />
+                <div className="skeleton-shimmer h-2.5 w-28 ml-auto rounded-compact" />
               </div>
             </div>
           ))}
         </div>
       </div>
 
-      <span className="sr-only">載入多幣別換算中...</span>
+      <span className="sr-only">{t('skeleton.multiConverterLoading')}</span>
     </div>
   );
 };
diff --git a/apps/ratewise/src/components/SupportContactLinks.tsx b/apps/ratewise/src/components/SupportContactLinks.tsx
index aaeb77e2d..79565556b 100644
--- a/apps/ratewise/src/components/SupportContactLinks.tsx
+++ b/apps/ratewise/src/components/SupportContactLinks.tsx
@@ -1,5 +1,7 @@
 import { Mail, MessageCircleMore } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { AUTHOR_CONTACT_LINKS } from '../config/app-info';
+import { contentPageTokens } from '../config/design-tokens';
 
 interface SupportContactLinksProps {
   title?: string;
@@ -15,22 +17,22 @@ const ICONS = {
 
 const TONE_STYLES = {
   surface: {
-    container: 'border-border/60 bg-surface/80',
+    container: 'border-border/70 bg-surface-elevated/90',
     title: 'text-text',
     description: 'text-text-muted',
-    item: 'border-border/60 bg-surface-secondary/80 hover:border-primary/30 hover:bg-surface-secondary',
+    item: contentPageTokens.links.row,
     icon: 'text-primary',
     label: 'text-text-muted',
     value: 'text-text',
   },
   brand: {
-    container: 'border-white/15 bg-white/10',
-    title: 'text-white/95',
-    description: 'text-white/75',
-    item: 'border-white/15 bg-black/15 hover:border-white/30 hover:bg-black/25',
-    icon: 'text-white/80',
-    label: 'text-white/60',
-    value: 'text-white/95 group-hover:text-white',
+    container: 'border-border/70 bg-surface/95',
+    title: 'text-text',
+    description: 'text-text-muted',
+    item: contentPageTokens.links.row,
+    icon: 'text-primary',
+    label: 'text-text-muted',
+    value: 'text-text group-hover:text-primary',
   },
 } as const;
 
@@ -40,12 +42,13 @@ export function SupportContactLinks({
   className = '',
   tone = 'surface',
 }: SupportContactLinksProps) {
+  const { t } = useTranslation();
   const styles = TONE_STYLES[tone];
 
   return (
     <section
-      className={`pointer-events-none rounded-2xl border p-4 text-left backdrop-blur-sm ${styles.container} ${className}`.trim()}
-      aria-label="Support contact links"
+      className={`pointer-events-none rounded-control border p-4 text-left ${styles.container} ${className}`.trim()}
+      aria-label={t('support.contactLinksAriaLabel')}
     >
       {title ? <p className={`text-sm font-semibold ${styles.title}`}>{title}</p> : null}
       {description ? (
@@ -61,7 +64,7 @@ export function SupportContactLinks({
               key={link.id}
               href={link.href}
               {...(link.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-              className={`pointer-events-auto group flex items-center justify-between gap-3 rounded-xl border px-3 py-2 transition-colors duration-200 ${styles.item}`}
+              className={`pointer-events-auto ${styles.item}`}
               aria-label={link.label}
             >
               <span className="flex min-w-0 items-center gap-2">
diff --git a/apps/ratewise/src/components/Toast/ToastProvider.tsx b/apps/ratewise/src/components/Toast/ToastProvider.tsx
index 1146211e4..b31b5c0f6 100644
--- a/apps/ratewise/src/components/Toast/ToastProvider.tsx
+++ b/apps/ratewise/src/components/Toast/ToastProvider.tsx
@@ -143,11 +143,10 @@ function Toast({ id: _id, message, type, onClose }: ToastMessage & { onClose: ()
       className={`
         pointer-events-auto
         w-fit max-w-[min(30ch,90vw)]
-        overflow-hidden rounded-xl
+        overflow-hidden rounded-control
         ${styles.bg}
-        shadow-md
-        backdrop-blur-xl
-        transform transition-all duration-300 ease-out
+        shadow-soft
+        transform transition-[opacity,transform] duration-300 ease-out
         ${
           isVisible && !isExiting
             ? 'translate-x-0 opacity-100 scale-100'
diff --git a/apps/ratewise/src/components/Toast/__tests__/ToastProvider.test.tsx b/apps/ratewise/src/components/Toast/__tests__/ToastProvider.test.tsx
index 4a9925026..c50a80dd9 100644
--- a/apps/ratewise/src/components/Toast/__tests__/ToastProvider.test.tsx
+++ b/apps/ratewise/src/components/Toast/__tests__/ToastProvider.test.tsx
@@ -160,9 +160,11 @@ describe('ToastProvider', () => {
     // Trigger success toast
     fireEvent.click(screen.getByTestId('success-btn'));
 
-    // Should have backdrop-blur for modern design
-    const toast = container.querySelector('[class*="backdrop-blur"]');
+    // Toast 使用語義色票，不依賴 backdrop blur 才能在各主題維持一致對比。
+    const toast = container.querySelector('[data-testid="toast"]');
     expect(toast).toBeInTheDocument();
+    expect(toast).toHaveClass('bg-primary/15');
+    expect(toast).toHaveClass('border-primary/20');
   });
 
   it('applies primary background for success type', () => {
diff --git a/apps/ratewise/src/components/UpdatePrompt.tsx b/apps/ratewise/src/components/UpdatePrompt.tsx
index 9bfc92865..3ccbfe19f 100644
--- a/apps/ratewise/src/components/UpdatePrompt.tsx
+++ b/apps/ratewise/src/components/UpdatePrompt.tsx
@@ -10,7 +10,8 @@
  * - motion/react 入場／退場動畫與按鈕微互動
  * - i18n 國際化
  * - prefers-reduced-motion 無障礙支援
- * - 五狀態追蹤：offlineReady / needRefresh / isUpdating / updateFailed / registrationFailed
+ * - 更新狀態追蹤：offlineReady / needRefresh / isUpdating / updateFailed
+ * - SW 註冊失敗只記錄診斷，不阻塞可用的網頁體驗
  * - offlineReady 僅自動消失，不顯示成功提示以避免首屏 CLS
  * - ARIA role 依緊急程度切換（status / alert）
  * - 定時器清理，防止記憶體洩漏
@@ -43,7 +44,6 @@ function UpdatePromptClient() {
 
   const [isUpdating, setIsUpdating] = useState(false);
   const [updateFailed, setUpdateFailed] = useState(false);
-  const [registrationFailed, setRegistrationFailed] = useState(false);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const autoDismissRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const autoUpdateTriggeredRef = useRef(false);
@@ -57,7 +57,6 @@ function UpdatePromptClient() {
     onRegistered(r) {
       if (r) {
         registrationRef.current = r;
-        setRegistrationFailed(false);
         void r.update();
         intervalRef.current = setInterval(() => {
           void r.update();
@@ -66,7 +65,6 @@ function UpdatePromptClient() {
     },
     onRegisterError(error) {
       const errorObject = error instanceof Error ? error : new Error(String(error));
-      setRegistrationFailed(true);
       setOfflineReady(false);
       setNeedRefresh(false);
       setUpdateFailed(false);
@@ -132,7 +130,6 @@ function UpdatePromptClient() {
 
     autoUpdateTriggeredRef.current = true;
     setIsUpdating(true);
-    setRegistrationFailed(false);
     setUpdateFailed(false);
 
     void updateServiceWorker(true)
@@ -147,7 +144,6 @@ function UpdatePromptClient() {
 
   const handleUpdate = async () => {
     setIsUpdating(true);
-    setRegistrationFailed(false);
     setUpdateFailed(false);
     try {
       await updateServiceWorker(true);
@@ -158,21 +154,16 @@ function UpdatePromptClient() {
     }
   };
 
-  const handleReload = () => {
-    window.location.reload();
-  };
-
   const close = () => {
     setOfflineReady(false);
     setNeedRefresh(false);
     setUpdateFailed(false);
-    setRegistrationFailed(false);
   };
 
   // `offlineReady` 是首次安裝 SW 的低優先級成功狀態；若以 toast 顯示，Lighthouse
   // 會把通知入場視為 CLS。需要使用者注意的更新/失敗狀態仍保留提示。
-  const shouldRender = needRefresh || isUpdating || updateFailed || registrationFailed;
-  const isUrgent = needRefresh || updateFailed || isUpdating || registrationFailed;
+  const shouldRender = needRefresh || isUpdating || updateFailed;
+  const isUrgent = needRefresh || updateFailed || isUpdating;
   const mobilePositionStyle = {
     '--notification-mobile-top-offset': notificationTokens.mobileTopOffset,
   } as CSSProperties;
@@ -203,8 +194,8 @@ function UpdatePromptClient() {
           <div
             className={`
               relative overflow-hidden pointer-events-none ${notificationTokens.borderRadius}
-              bg-gradient-to-r from-brand-from via-brand-via to-brand-to
-              border border-brand-border/60
+              ${notificationTokens.background.brand}
+              ${notificationTokens.background.brandBorder}
               ${notificationTokens.shadow}
             `}
           >
@@ -222,12 +213,11 @@ function UpdatePromptClient() {
                 <div className="flex items-center gap-3">
                   <div className="flex-shrink-0">
                     <div
-                      className={`relative ${notificationTokens.icon.container} bg-gradient-to-br from-brand-icon-from to-brand-icon-to flex items-center justify-center shadow`}
+                      className={`relative ${notificationTokens.icon.container} ${notificationTokens.icon.brandGradient} flex items-center justify-center shadow-soft`}
                     >
                       <StatusIcon
                         offlineReady={offlineReady}
                         isUpdating={isUpdating}
-                        registrationFailed={registrationFailed}
                         updateFailed={updateFailed}
                         strokeWidth={notificationTokens.icon.strokeWidth}
                         className={notificationTokens.icon.svg}
@@ -238,23 +228,24 @@ function UpdatePromptClient() {
                   <div className="flex-1 min-w-0">
                     <h2
                       id="update-prompt-title"
-                      className="text-sm font-semibold text-brand-text-dark truncate"
+                      className={`text-sm font-semibold ${notificationTokens.text.brandTitle} truncate`}
                     >
                       <StatusTitle
                         offlineReady={offlineReady}
                         needRefresh={needRefresh}
                         isUpdating={isUpdating}
-                        registrationFailed={registrationFailed}
                         updateFailed={updateFailed}
                         t={t}
                       />
                     </h2>
-                    <p id="update-prompt-description" className="text-xs text-brand-text">
+                    <p
+                      id="update-prompt-description"
+                      className={`text-xs ${notificationTokens.text.brandDescription}`}
+                    >
                       <StatusDescription
                         offlineReady={offlineReady}
                         needRefresh={needRefresh}
                         isUpdating={isUpdating}
-                        registrationFailed={registrationFailed}
                         updateFailed={updateFailed}
                         t={t}
                       />
@@ -266,9 +257,7 @@ function UpdatePromptClient() {
                       offlineReady={offlineReady}
                       needRefresh={needRefresh}
                       isUpdating={isUpdating}
-                      registrationFailed={registrationFailed}
                       updateFailed={updateFailed}
-                      onReload={handleReload}
                       onUpdate={handleUpdate}
                       onClose={close}
                       t={t}
@@ -276,7 +265,7 @@ function UpdatePromptClient() {
                   </div>
                 </div>
 
-                {registrationFailed || updateFailed ? (
+                {updateFailed ? (
                   <SupportContactLinks
                     title={t('support.reportIssueLead')}
                     description={t('support.reportIssueHint')}
@@ -295,7 +284,6 @@ function UpdatePromptClient() {
 interface StatusIconProps {
   offlineReady: boolean;
   isUpdating: boolean;
-  registrationFailed: boolean;
   updateFailed: boolean;
   strokeWidth: number;
   className: string;
@@ -304,7 +292,6 @@ interface StatusIconProps {
 function StatusIcon({
   offlineReady,
   isUpdating,
-  registrationFailed,
   updateFailed,
   strokeWidth,
   className,
@@ -312,7 +299,7 @@ function StatusIcon({
   if (isUpdating) {
     return (
       <svg
-        className={`${className} text-brand-text animate-spin`}
+        className={`${className} text-primary animate-spin`}
         fill="none"
         viewBox="0 0 24 24"
         aria-hidden="true"
@@ -336,13 +323,13 @@ function StatusIcon({
 
   return (
     <svg
-      className={`${className} text-brand-text`}
+      className={`${className} text-primary`}
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"
       aria-hidden="true"
     >
-      {updateFailed || registrationFailed ? (
+      {updateFailed ? (
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -372,33 +359,18 @@ interface StatusTextProps {
   offlineReady: boolean;
   needRefresh: boolean;
   isUpdating: boolean;
-  registrationFailed: boolean;
   updateFailed: boolean;
   t: (key: string) => string;
 }
 
-function StatusTitle({
-  offlineReady,
-  isUpdating,
-  registrationFailed,
-  updateFailed,
-  t,
-}: StatusTextProps) {
-  if (registrationFailed) return <>{t('pwa.registrationFailedTitle')}</>;
+function StatusTitle({ offlineReady, isUpdating, updateFailed, t }: StatusTextProps) {
   if (isUpdating) return <>{t('pwa.updatingTitle')}</>;
   if (updateFailed) return <>{t('pwa.updateFailedTitle')}</>;
   if (offlineReady) return <>{t('pwa.offlineReadyTitle')}</>;
   return <>{t('pwa.needRefreshTitle')}</>;
 }
 
-function StatusDescription({
-  offlineReady,
-  isUpdating,
-  registrationFailed,
-  updateFailed,
-  t,
-}: StatusTextProps) {
-  if (registrationFailed) return <>{t('pwa.registrationFailedDescription')}</>;
+function StatusDescription({ offlineReady, isUpdating, updateFailed, t }: StatusTextProps) {
   if (isUpdating) return <>{t('pwa.updatingDescription')}</>;
   if (updateFailed) return <>{t('pwa.updateFailedDescription')}</>;
   if (offlineReady) return <>{t('pwa.offlineReadyDescription')}</>;
@@ -409,31 +381,18 @@ interface ActionButtonsProps {
   offlineReady: boolean;
   needRefresh: boolean;
   isUpdating: boolean;
-  registrationFailed: boolean;
   updateFailed: boolean;
-  onReload: () => void;
   onUpdate: () => Promise<void>;
   onClose: () => void;
   t: (key: string) => string;
 }
 
-const CTA_CLASS = `
-  pointer-events-auto
-  px-3 py-1.5 rounded-full text-xs font-medium
-  bg-gradient-to-r from-brand-button-from to-brand-button-to
-  text-white shadow-sm
-  hover:from-brand-button-hover-from hover:to-brand-button-hover-to
-  hover:scale-[1.02] active:scale-[0.98]
-  transition-[color,background-color,border-color,transform] duration-200 ease-out
-  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1
-`;
+const CTA_CLASS = notificationTokens.actions.primary;
 
 function ActionButtons({
   needRefresh,
   isUpdating,
-  registrationFailed,
   updateFailed,
-  onReload,
   onUpdate,
   onClose,
   t,
@@ -442,17 +401,10 @@ function ActionButtons({
     return null;
   }
 
-  if (registrationFailed) {
-    return (
-      <button onClick={onReload} className={CTA_CLASS} aria-label={t('pwa.actionReload')}>
-        {t('pwa.actionReload')}
-      </button>
-    );
-  }
-
   if (updateFailed) {
     return (
       <button
+        type="button"
         onClick={() => void onUpdate()}
         className={CTA_CLASS}
         aria-label={t('pwa.actionRetry')}
@@ -465,6 +417,7 @@ function ActionButtons({
   if (needRefresh) {
     return (
       <button
+        type="button"
         onClick={() => void onUpdate()}
         className={CTA_CLASS}
         aria-label={t('pwa.actionUpdate')}
@@ -476,16 +429,9 @@ function ActionButtons({
 
   return (
     <button
+      type="button"
       onClick={onClose}
-      className="
-        pointer-events-auto
-        p-1.5 rounded-full
-        bg-brand-icon-from/80 text-brand-text
-        hover:text-brand-text-dark hover:bg-brand-icon-from hover:scale-[1.05]
-        active:scale-[0.95]
-        transition-[color,background-color,transform] duration-200 ease-out
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1
-      "
+      className={notificationTokens.actions.icon}
       aria-label={t('pwa.actionClose')}
     >
       <svg
diff --git a/apps/ratewise/src/components/UpdatePromptPreview.tsx b/apps/ratewise/src/components/UpdatePromptPreview.tsx
index fb0b8da2a..e4a23391b 100644
--- a/apps/ratewise/src/components/UpdatePromptPreview.tsx
+++ b/apps/ratewise/src/components/UpdatePromptPreview.tsx
@@ -1,7 +1,7 @@
 /**
  * PWA 更新通知預覽元件
  *
- * 用於 UI Showcase 展示，支援手動控制不同狀態。
+ * 用於展示頁預覽，支援手動控制不同狀態。
  * 與 UpdatePrompt 共用相同的視覺設計和動畫。
  *
  * 功能：
@@ -36,7 +36,7 @@ interface UpdatePromptPreviewProps {
    */
   onUpdate?: () => void;
   /**
-   * 覆蓋定位類別（用於 UI Showcase 預覽）
+   * 覆蓋定位類別（用於展示頁預覽）
    */
   positionClassName?: string;
 }
@@ -108,7 +108,6 @@ function UpdatePromptPreviewClient({
               ${notificationTokens.shadow}
             `}
           >
-            {/* 裝飾光暈 - 品牌色 */}
             <div
               className={`absolute top-0 right-0 ${notificationTokens.decoration.size} rounded-full ${notificationTokens.decoration.topRight} ${notificationTokens.decoration.blur} ${prefersReducedMotion ? 'hidden' : ''}`}
               aria-hidden="true"
@@ -118,10 +117,8 @@ function UpdatePromptPreviewClient({
               aria-hidden="true"
             />
 
-            {/* 內容 */}
             <div className={`relative ${notificationTokens.padding}`}>
               <div className="flex items-center gap-3">
-                {/* 狀態圖標 - 品牌色漸變 */}
                 <div className="flex-shrink-0">
                   <div
                     className={`relative ${notificationTokens.icon.container} ${notificationTokens.icon.brandGradient} flex items-center justify-center shadow`}
@@ -136,7 +133,6 @@ function UpdatePromptPreviewClient({
                   </div>
                 </div>
 
-                {/* 標題與描述 */}
                 <div className="flex-1 min-w-0">
                   <h2
                     id="update-prompt-title"
@@ -164,7 +160,6 @@ function UpdatePromptPreviewClient({
                   </p>
                 </div>
 
-                {/* 操作按鈕 */}
                 <div className="flex items-center gap-2 flex-shrink-0">
                   <ActionButtons
                     offlineReady={offlineReady}
@@ -205,7 +200,7 @@ function StatusIcon({
   if (isUpdating) {
     return (
       <svg
-        className={`${className} text-brand-text animate-spin`}
+        className={`${className} text-primary animate-spin`}
         fill="none"
         viewBox="0 0 24 24"
         aria-hidden="true"
@@ -229,7 +224,7 @@ function StatusIcon({
 
   return (
     <svg
-      className={`${className} text-brand-text`}
+      className={`${className} text-primary`}
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"
@@ -295,13 +290,7 @@ interface ActionButtonsProps {
 
 /** CTA 按鈕共用樣式（更新／重試） */
 const CTA_CLASS = `
-  px-3 py-1.5 rounded-full text-xs font-medium
-  bg-gradient-to-r from-brand-button-from to-brand-button-to
-  text-white shadow-sm
-  hover:from-brand-button-hover-from hover:to-brand-button-hover-to
-  hover:scale-[1.02] active:scale-[0.98]
-  transition-[color,background-color,border-color,transform] duration-200 ease-out
-  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1
+  ${notificationTokens.actions.primary}
 `;
 
 function ActionButtons({
@@ -318,7 +307,12 @@ function ActionButtons({
 
   if (updateFailed) {
     return (
-      <button onClick={onUpdate} className={CTA_CLASS} aria-label={t('pwa.actionRetry')}>
+      <button
+        type="button"
+        onClick={onUpdate}
+        className={CTA_CLASS}
+        aria-label={t('pwa.actionRetry')}
+      >
         {t('pwa.actionRetry')}
       </button>
     );
@@ -326,7 +320,12 @@ function ActionButtons({
 
   if (needRefresh) {
     return (
-      <button onClick={onUpdate} className={CTA_CLASS} aria-label={t('pwa.actionUpdate')}>
+      <button
+        type="button"
+        onClick={onUpdate}
+        className={CTA_CLASS}
+        aria-label={t('pwa.actionUpdate')}
+      >
         {t('pwa.actionUpdate')}
       </button>
     );
@@ -335,15 +334,9 @@ function ActionButtons({
   // offlineReady: 關閉按鈕
   return (
     <button
+      type="button"
       onClick={onClose}
-      className="
-        p-1.5 rounded-full
-        bg-brand-icon-from/80 text-brand-text
-        hover:text-brand-text-dark hover:bg-brand-icon-from hover:scale-[1.05]
-        active:scale-[0.95]
-        transition-[color,background-color,transform] duration-200 ease-out
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1
-      "
+      className={notificationTokens.actions.icon}
       aria-label={t('pwa.actionClose')}
     >
       <svg
diff --git a/apps/ratewise/src/components/__tests__/AppLayout.safe-area.test.tsx b/apps/ratewise/src/components/__tests__/AppLayout.safe-area.test.tsx
index d313432ca..9b830a2eb 100644
--- a/apps/ratewise/src/components/__tests__/AppLayout.safe-area.test.tsx
+++ b/apps/ratewise/src/components/__tests__/AppLayout.safe-area.test.tsx
@@ -41,4 +41,18 @@ describe('AppLayout Safe Area', () => {
     expect(header).toHaveStyle(`height: ${navigationTokens.header.heightWithSafeArea}`);
     expect(header).toHaveStyle(`padding-top: ${navigationTokens.safeArea.top}`);
   });
+
+  it('主要滾動區域可程式化聚焦但不在 Tab 順序中', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Routes>
+          <Route path="/" element={<AppLayout />}>
+            <Route index element={<div>內容</div>} />
+          </Route>
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole('main')).toHaveAttribute('tabindex', '-1');
+  });
 });
diff --git a/apps/ratewise/src/components/__tests__/BottomNavigation.a11y.test.tsx b/apps/ratewise/src/components/__tests__/BottomNavigation.a11y.test.tsx
index 645d23aa3..a12e584a0 100644
--- a/apps/ratewise/src/components/__tests__/BottomNavigation.a11y.test.tsx
+++ b/apps/ratewise/src/components/__tests__/BottomNavigation.a11y.test.tsx
@@ -1,7 +1,7 @@
 /**
- * BottomNavigation A11y Test - TDD RED Phase
+ * BottomNavigation A11y Test
  *
- * 測試目標：驗證 W3C 規範 - `<a>` 元素內部不應有 tabindex 屬性的子元素
+ * 測試目標：驗證 W3C 規範，`<a>` 元素內部不應有 tabindex 屬性的子元素
  *
  * @reference https://rocketvalidator.com/html-validation/an-element-with-the-attribute-tabindex-must-not-appear-as-a-descendant-of-the-a-element
  * @reference W3C HTML Validator Error: "An element with the attribute tabindex must not appear as a descendant of the a element"
@@ -146,9 +146,9 @@ describe('BottomNavigation A11y Compliance', () => {
 
     expect(hrefs).toEqual([
       '/ratewise/',
-      '/ratewise/multi',
-      '/ratewise/favorites',
-      '/ratewise/settings',
+      '/ratewise/multi/',
+      '/ratewise/favorites/',
+      '/ratewise/settings/',
     ]);
   });
 });
diff --git a/apps/ratewise/src/components/__tests__/BottomNavigation.test.tsx b/apps/ratewise/src/components/__tests__/BottomNavigation.test.tsx
index 10bd331e2..d60c4ed4c 100644
--- a/apps/ratewise/src/components/__tests__/BottomNavigation.test.tsx
+++ b/apps/ratewise/src/components/__tests__/BottomNavigation.test.tsx
@@ -61,6 +61,6 @@ describe('BottomNavigation', () => {
     fireEvent.click(screen.getByRole('link', { name: 'Multi Currency' }));
 
     expect(navigateMock).toHaveBeenCalledTimes(1);
-    expect(navigateMock).toHaveBeenCalledWith('/multi');
+    expect(navigateMock).toHaveBeenCalledWith('/multi/');
   });
 });
diff --git a/apps/ratewise/src/components/__tests__/Button.test.tsx b/apps/ratewise/src/components/__tests__/Button.test.tsx
index 8d0603afb..6faa7053c 100644
--- a/apps/ratewise/src/components/__tests__/Button.test.tsx
+++ b/apps/ratewise/src/components/__tests__/Button.test.tsx
@@ -30,7 +30,7 @@ describe('Button Component', () => {
       const button = screen.getByRole('button');
       // 驗證包含 primary 變體的類別
       expect(button.className).toContain('bg-primary');
-      expect(button.className).toContain('text-white');
+      expect(button.className).toContain('text-primary-foreground');
     });
   });
 
@@ -39,7 +39,7 @@ describe('Button Component', () => {
       render(<Button variant="primary">Primary</Button>);
       const button = screen.getByRole('button');
       expect(button.className).toContain('bg-primary');
-      expect(button.className).toContain('text-white');
+      expect(button.className).toContain('text-primary-foreground');
     });
 
     it('secondary 變體應該有正確的樣式', () => {
@@ -59,7 +59,7 @@ describe('Button Component', () => {
       render(<Button variant="danger">Danger</Button>);
       const button = screen.getByRole('button');
       expect(button.className).toContain('bg-destructive');
-      expect(button.className).toContain('text-white');
+      expect(button.className).toContain('text-destructive-foreground');
     });
   });
 
diff --git a/apps/ratewise/src/components/__tests__/CurrencyLandingPage.provider.test.tsx b/apps/ratewise/src/components/__tests__/CurrencyLandingPage.provider.test.tsx
index 5ca95f061..62963fca3 100644
--- a/apps/ratewise/src/components/__tests__/CurrencyLandingPage.provider.test.tsx
+++ b/apps/ratewise/src/components/__tests__/CurrencyLandingPage.provider.test.tsx
@@ -120,7 +120,7 @@ describe('ProviderComparisonCard 雙向匯率顯示', () => {
     });
     const card = screen.getByTestId('provider-comparison-card');
     // sell 率 46.00 不應出現在明洞換匯所欄（台銀欄的 1/cashSell 可能碰巧是 46.xx，但 46.00 精確值不會出現）
-    const providerCell = card.querySelector('.bg-green-50, .bg-green-950\\/20');
+    const providerCell = card.querySelector('.bg-success\\/10');
     expect(providerCell?.textContent).not.toContain('46.00');
   });
 
diff --git a/apps/ratewise/src/components/__tests__/CurrencyLandingPage.truthfulness.test.tsx b/apps/ratewise/src/components/__tests__/CurrencyLandingPage.truthfulness.test.tsx
index 9d70daa66..d207b282e 100644
--- a/apps/ratewise/src/components/__tests__/CurrencyLandingPage.truthfulness.test.tsx
+++ b/apps/ratewise/src/components/__tests__/CurrencyLandingPage.truthfulness.test.tsx
@@ -9,7 +9,6 @@ import { beforeAll, describe, it, expect } from 'vitest';
 import { existsSync, readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { CurrencyLandingPage } from '../CurrencyLandingPage';
-import { APP_INFO } from '../../config/app-info';
 import {
   buildRateDifferenceSentence,
   getCurrencyLandingPageContent,
@@ -78,7 +77,7 @@ describe('CurrencyLandingPage template truthfulness', () => {
       '%s 禁止保留通用硬編污染文案',
       (path) => {
         const text = extractVisibleText(readDistHtml(path));
-        expect(text).toContain(`為什麼 ${APP_INFO.shortName} 比其他工具更精準？`);
+        expect(text).toContain('為什麼牌告賣出價更接近臨櫃換匯成本？');
         expect(text).not.toContain('10 萬日圓');
 
         if (!path.includes('jpy') && !path.includes('krw')) {
diff --git a/apps/ratewise/src/components/__tests__/OfflineIndicator.test.tsx b/apps/ratewise/src/components/__tests__/OfflineIndicator.test.tsx
index 28196eb60..fb2ab5e13 100644
--- a/apps/ratewise/src/components/__tests__/OfflineIndicator.test.tsx
+++ b/apps/ratewise/src/components/__tests__/OfflineIndicator.test.tsx
@@ -13,7 +13,14 @@ import * as networkStatus from '../../utils/networkStatus';
 // Mock dependencies
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
-    t: (_key: string, fallback: string) => fallback,
+    t: (key: string) =>
+      (
+        ({
+          'offline.title': '離線模式',
+          'offline.description': '部分功能可能無法使用',
+          'offline.close': '關閉離線提示',
+        }) as Record<string, string>
+      )[key] ?? key,
   }),
 }));
 
@@ -339,12 +346,11 @@ describe('OfflineIndicator', () => {
 
       await waitFor(() => {
         const status = screen.getByRole('status');
-        const styledDiv = status.querySelector('div[class*="bg-gradient-to-r"]');
+        const styledDiv = status.querySelector('div[class*="bg-surface"]');
         expect(styledDiv).toBeTruthy();
-        expect(styledDiv?.className).toContain('from-brand-from');
-        expect(styledDiv?.className).toContain('via-brand-via');
-        expect(styledDiv?.className).toContain('to-brand-to');
-        expect(styledDiv?.className).toContain('border-brand-border');
+        expect(styledDiv?.className).toContain('bg-surface');
+        expect(styledDiv?.className).toContain('border-border/70');
+        expect(styledDiv?.className).toContain('shadow-floating');
       });
     });
   });
diff --git a/apps/ratewise/src/components/__tests__/PageContainer.test.tsx b/apps/ratewise/src/components/__tests__/PageContainer.test.tsx
deleted file mode 100644
index 812ba8cb9..000000000
--- a/apps/ratewise/src/components/__tests__/PageContainer.test.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-/**
- * PageContainer Component Tests - TDD Coverage
- *
- * 測試範圍：
- * - PageContainer 基本渲染
- * - 變體樣式 (default, full, centered)
- * - 內距模式 (default, compact, none)
- * - 底部導覽留白
- * - PageSection 組件
- * - PageCard 組件
- *
- * @see src/components/PageContainer.tsx
- * @created 2026-01-25
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { PageContainer, PageSection, PageCard } from '../PageContainer';
-
-describe('PageContainer Component', () => {
-  describe('基本渲染', () => {
-    it('應該渲染子元素', () => {
-      render(
-        <PageContainer>
-          <p>Test content</p>
-        </PageContainer>,
-      );
-      expect(screen.getByText('Test content')).toBeInTheDocument();
-    });
-
-    it('應該使用 min-h-full 容器類別', () => {
-      const { container } = render(
-        <PageContainer>
-          <p>Content</p>
-        </PageContainer>,
-      );
-      const outerDiv = container.firstChild as HTMLElement;
-      // v2.0.0: 改用 min-h-full，底部留白由 AppLayout 統一處理
-      expect(outerDiv.className).toContain('min-h-full');
-    });
-
-    it('hasBottomNav 參數已廢棄但保持向後相容', () => {
-      // v2.0.0: hasBottomNav 參數已廢棄，由 AppLayout 統一處理底部留白
-      const { container } = render(
-        <PageContainer hasBottomNav={false}>
-          <p>Content</p>
-        </PageContainer>,
-      );
-      const outerDiv = container.firstChild as HTMLElement;
-      // 無論 hasBottomNav 為何值，都使用相同的 min-h-full 類別
-      expect(outerDiv.className).toContain('min-h-full');
-    });
-  });
-
-  describe('變體樣式', () => {
-    it('default 變體應該有 max-w-md 限制', () => {
-      const { container } = render(
-        <PageContainer variant="default">
-          <p>Content</p>
-        </PageContainer>,
-      );
-      // 外層是 container div，內層是 content div
-      const outerDiv = container.firstChild as HTMLElement;
-      const contentDiv = outerDiv.firstChild as HTMLElement;
-      expect(contentDiv.className).toContain('max-w-md');
-      expect(contentDiv.className).toContain('mx-auto');
-    });
-
-    it('full 變體應該是滿版寬度', () => {
-      const { container } = render(
-        <PageContainer variant="full">
-          <p>Content</p>
-        </PageContainer>,
-      );
-      const outerDiv = container.firstChild as HTMLElement;
-      const contentDiv = outerDiv.firstChild as HTMLElement;
-      expect(contentDiv.className).toContain('max-w-full');
-    });
-
-    it('centered 變體應該置中內容', () => {
-      const { container } = render(
-        <PageContainer variant="centered">
-          <p>Content</p>
-        </PageContainer>,
-      );
-      const outerDiv = container.firstChild as HTMLElement;
-      const contentDiv = outerDiv.firstChild as HTMLElement;
-      expect(contentDiv.className).toContain('flex');
-      expect(contentDiv.className).toContain('items-center');
-      expect(contentDiv.className).toContain('justify-center');
-    });
-  });
-
-  describe('內距模式', () => {
-    it('default 內距應該有 px-5 py-6', () => {
-      const { container } = render(
-        <PageContainer padding="default">
-          <p>Content</p>
-        </PageContainer>,
-      );
-      // 外層是 container div，內層是 content div
-      const outerDiv = container.firstChild as HTMLElement;
-      const contentDiv = outerDiv.firstChild as HTMLElement;
-      expect(contentDiv.className).toContain('px-5');
-      expect(contentDiv.className).toContain('py-6');
-    });
-
-    it('compact 內距應該有 px-4 py-4', () => {
-      const { container } = render(
-        <PageContainer padding="compact">
-          <p>Content</p>
-        </PageContainer>,
-      );
-      const outerDiv = container.firstChild as HTMLElement;
-      const contentDiv = outerDiv.firstChild as HTMLElement;
-      expect(contentDiv.className).toContain('px-4');
-      expect(contentDiv.className).toContain('py-4');
-    });
-
-    it('none 內距不應該有 padding 類別', () => {
-      const { container } = render(
-        <PageContainer padding="none">
-          <p>Content</p>
-        </PageContainer>,
-      );
-      const outerDiv = container.firstChild as HTMLElement;
-      const contentDiv = outerDiv.firstChild as HTMLElement;
-      expect(contentDiv.className).not.toContain('px-5');
-      expect(contentDiv.className).not.toContain('py-6');
-      expect(contentDiv.className).not.toContain('px-4');
-      expect(contentDiv.className).not.toContain('py-4');
-    });
-  });
-
-  describe('語義化元素', () => {
-    it('預設應該使用 div 元素', () => {
-      const { container } = render(
-        <PageContainer>
-          <p>Content</p>
-        </PageContainer>,
-      );
-      const contentElement = container.querySelector('div > div');
-      expect(contentElement?.tagName).toBe('DIV');
-    });
-
-    it('as="section" 應該使用 section 元素', () => {
-      const { container } = render(
-        <PageContainer as="section">
-          <p>Content</p>
-        </PageContainer>,
-      );
-      const contentElement = container.querySelector('div > section');
-      expect(contentElement).toBeInTheDocument();
-    });
-
-    it('as="article" 應該使用 article 元素', () => {
-      const { container } = render(
-        <PageContainer as="article">
-          <p>Content</p>
-        </PageContainer>,
-      );
-      const contentElement = container.querySelector('div > article');
-      expect(contentElement).toBeInTheDocument();
-    });
-  });
-
-  describe('自定義類別', () => {
-    it('應該合併自定義 className', () => {
-      const { container } = render(
-        <PageContainer className="custom-class">
-          <p>Content</p>
-        </PageContainer>,
-      );
-      // 外層是 container div，內層是 content div
-      const outerDiv = container.firstChild as HTMLElement;
-      const contentDiv = outerDiv.firstChild as HTMLElement;
-      expect(contentDiv.className).toContain('custom-class');
-    });
-  });
-});
-
-describe('PageSection Component', () => {
-  it('應該渲染子元素', () => {
-    render(
-      <PageSection>
-        <p>Section content</p>
-      </PageSection>,
-    );
-    expect(screen.getByText('Section content')).toBeInTheDocument();
-  });
-
-  it('應該使用 section 標籤', () => {
-    const { container } = render(
-      <PageSection>
-        <p>Content</p>
-      </PageSection>,
-    );
-    expect(container.querySelector('section')).toBeInTheDocument();
-  });
-
-  it('預設應該有底部間距', () => {
-    const { container } = render(
-      <PageSection>
-        <p>Content</p>
-      </PageSection>,
-    );
-    const section = container.querySelector('section')!;
-    expect(section.className).toContain('mb-6');
-  });
-
-  it('isLast=true 時不應該有底部間距', () => {
-    const { container } = render(
-      <PageSection isLast>
-        <p>Content</p>
-      </PageSection>,
-    );
-    const section = container.querySelector('section')!;
-    expect(section.className).not.toContain('mb-6');
-  });
-
-  it('應該合併自定義 className', () => {
-    const { container } = render(
-      <PageSection className="custom-section">
-        <p>Content</p>
-      </PageSection>,
-    );
-    const section = container.querySelector('section')!;
-    expect(section.className).toContain('custom-section');
-  });
-});
-
-describe('PageCard Component', () => {
-  it('應該渲染子元素', () => {
-    render(
-      <PageCard>
-        <p>Card content</p>
-      </PageCard>,
-    );
-    expect(screen.getByText('Card content')).toBeInTheDocument();
-  });
-
-  it('應該有卡片樣式', () => {
-    const { container } = render(
-      <PageCard>
-        <p>Content</p>
-      </PageCard>,
-    );
-    const card = container.firstChild as HTMLElement;
-    expect(card.className).toContain('card');
-    expect(card.className).toContain('p-4');
-  });
-
-  describe('互動模式', () => {
-    it('interactive=true 時應該有 hover 效果', () => {
-      const { container } = render(
-        <PageCard interactive>
-          <p>Content</p>
-        </PageCard>,
-      );
-      const card = container.firstChild as HTMLElement;
-      expect(card.className).toContain('cursor-pointer');
-      expect(card.className).toContain('hover:shadow-card-hover');
-    });
-
-    it('有 onClick 時應該有 button role', () => {
-      const handleClick = vi.fn();
-      render(
-        <PageCard onClick={handleClick}>
-          <p>Content</p>
-        </PageCard>,
-      );
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('點擊時應該觸發 onClick', () => {
-      const handleClick = vi.fn();
-      render(
-        <PageCard onClick={handleClick}>
-          <p>Content</p>
-        </PageCard>,
-      );
-      fireEvent.click(screen.getByRole('button'));
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('按 Enter 鍵時應該觸發 onClick', () => {
-      const handleClick = vi.fn();
-      render(
-        <PageCard onClick={handleClick}>
-          <p>Content</p>
-        </PageCard>,
-      );
-      fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' });
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('有 onClick 時應該可聚焦 (tabIndex=0)', () => {
-      const handleClick = vi.fn();
-      render(
-        <PageCard onClick={handleClick}>
-          <p>Content</p>
-        </PageCard>,
-      );
-      expect(screen.getByRole('button')).toHaveAttribute('tabIndex', '0');
-    });
-  });
-
-  it('應該合併自定義 className', () => {
-    const { container } = render(
-      <PageCard className="custom-card">
-        <p>Content</p>
-      </PageCard>,
-    );
-    const card = container.firstChild as HTMLElement;
-    expect(card.className).toContain('custom-card');
-  });
-});
diff --git a/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx b/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx
new file mode 100644
index 000000000..13537b2a0
--- /dev/null
+++ b/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx
@@ -0,0 +1,66 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { PageNavHeader } from '../PageNavHeader';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'common.back': '返回',
+        'nav.breadcrumb': '麵包屑',
+      };
+      return translations[key] ?? key;
+    },
+  }),
+}));
+
+function renderHeader() {
+  return render(
+    <MemoryRouter>
+      <PageNavHeader
+        breadcrumbItems={[
+          { label: '首頁', href: '/' },
+          { label: '支援與資訊', href: '/guide/' },
+          { label: '很長很長的頁面標題應該保持單行截斷而不是把頂部導覽撐高', href: '/guide/' },
+        ]}
+      />
+    </MemoryRouter>,
+  );
+}
+
+describe('PageNavHeader', () => {
+  it('不得使用 sticky 定位與 safe-area hack，避免 PWA 用戶內容被遮擋', () => {
+    renderHeader();
+
+    const header = screen.getByTestId('page-nav-header');
+    expect(header.className).not.toContain('sticky');
+    expect(header.className).not.toContain('safe-area-inset-top');
+    expect(header.className).not.toContain('backdrop-blur');
+    expect(header.className).not.toContain('-mx-4');
+    expect(header).not.toHaveAttribute('style');
+  });
+
+  it('應為 in-flow 區塊並保持 breadcrumb 單行可截斷', () => {
+    renderHeader();
+
+    const header = screen.getByTestId('page-nav-header');
+    expect(header.className).toContain('mb-');
+
+    const breadcrumb = screen.getByRole('navigation', { name: '麵包屑' });
+    const breadcrumbList = breadcrumb.querySelector('ol');
+    expect(breadcrumb).toHaveClass('min-w-0');
+    expect(breadcrumbList).toHaveClass('overflow-x-auto');
+    expect(breadcrumbList).toHaveClass('whitespace-nowrap');
+  });
+
+  it('返回按鈕應為 pill 造型且維持 44px 觸控目標與鍵盤 focus 樣式', () => {
+    renderHeader();
+
+    const backButton = screen.getByRole('button', { name: '返回' });
+    expect(backButton).toHaveClass('focus-visible:ring-2');
+    expect(backButton.className).toContain('min-h-11');
+    expect(backButton.className).toContain('rounded-full');
+  });
+});
diff --git a/apps/ratewise/src/components/__tests__/RatingModal.touch-target.test.tsx b/apps/ratewise/src/components/__tests__/RatingModal.touch-target.test.tsx
new file mode 100644
index 000000000..a2425fb6a
--- /dev/null
+++ b/apps/ratewise/src/components/__tests__/RatingModal.touch-target.test.tsx
@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { RatingModal } from '../RatingModal';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock('../../hooks/useReducedMotion', () => ({
+  useReducedMotion: () => true,
+}));
+
+function renderModal() {
+  return render(
+    <RatingModal
+      isVisible={true}
+      markRated={vi.fn()}
+      snooze={vi.fn()}
+      dismiss={vi.fn()}
+      isFinalChance={false}
+    />,
+  );
+}
+
+describe('RatingModal 觸控目標', () => {
+  it('星星按鈕應維持 44px 觸控目標（h-11 w-11）與圓形命中區', () => {
+    renderModal();
+
+    const stars = screen.getAllByRole('radio');
+    expect(stars).toHaveLength(5);
+
+    for (const star of stars) {
+      expect(star.className).toContain('h-11');
+      expect(star.className).toContain('w-11');
+      expect(star.className).toContain('rounded-full');
+      expect(star.className).not.toMatch(/\bw-8\b/);
+    }
+  });
+
+  it('星星按鈕應保留鍵盤 focus-visible ring', () => {
+    renderModal();
+
+    for (const star of screen.getAllByRole('radio')) {
+      expect(star.className).toContain('focus-visible:ring-2');
+    }
+  });
+});
diff --git a/apps/ratewise/src/components/__tests__/SkeletonLoader.test.tsx b/apps/ratewise/src/components/__tests__/SkeletonLoader.test.tsx
index 6f2ae7dc1..7a18db961 100644
--- a/apps/ratewise/src/components/__tests__/SkeletonLoader.test.tsx
+++ b/apps/ratewise/src/components/__tests__/SkeletonLoader.test.tsx
@@ -175,11 +175,11 @@ describe('SettingsSkeleton', () => {
     expect(dangerBtn).toBeInTheDocument();
   });
 
-  it('包含支援資訊連結列（4 個 skeleton-settings-link）', () => {
-    // Settings.tsx 第 5 個 section：FAQ / 使用說明 / 關於我們 / 開源 (4 links px-5 py-4)
+  it('包含支援資訊連結列（7 個 skeleton-settings-link）', () => {
+    // Settings.tsx 第 5 個 section：FAQ / 使用說明 / 關於我們 / 隱私 / 開放資料 / SEO 技術 / 開源
     const { container } = render(<SettingsSkeleton />);
     const links = container.querySelectorAll('[data-testid="skeleton-settings-link"]');
-    expect(links).toHaveLength(4);
+    expect(links).toHaveLength(7);
   });
 });
 
@@ -196,16 +196,15 @@ describe('FavoritesSkeleton', () => {
     expect(tabs.length).toBeGreaterThanOrEqual(2);
   });
 
-  it('貨幣列每行：星星在左（data-testid=skeleton-star），不是拖曳手柄', () => {
-    // 實際 Favorites UI 結構：star(w-7) | flag | code+name | convert-btn
-    // 舊版錯誤骨架：drag-handle(w-4 h-8) | circle(w-10) | code+name | star(h-6 w-6)
+  it('貨幣列左側應為星號欄，不應替換為獨立拖曳手柄', () => {
+    // 實際 Favorites UI 結構：star(w-7) | flag | code+name | convert button
     const { container } = render(<FavoritesSkeleton />);
     const starPlaceholders = container.querySelectorAll('[data-testid="skeleton-star"]');
     expect(starPlaceholders.length).toBeGreaterThanOrEqual(4);
   });
 
-  it('不應包含 drag-handle skeleton（w-4 h-8）—— 對應實際 UI 無獨立拖曳圖示欄', () => {
-    // 實際 Favorites 拖曳手柄是整個中間區域，不是獨立的細長 bar
+  it('不應包含獨立拖曳手柄骨架（w-4 h-8）', () => {
+    // 實際 Favorites 拖曳區域位於中段內容，不是獨立細長欄位。
     const { container } = render(<FavoritesSkeleton />);
     const dragHandle = container.querySelector('.skeleton-shimmer.w-4.h-8');
     expect(dragHandle).not.toBeInTheDocument();
@@ -234,9 +233,8 @@ describe('MultiConverterSkeleton', () => {
     expect(currencyRows.length).toBeGreaterThanOrEqual(8);
   });
 
-  it('不應包含「基準幣大輸入卡片」結構（h-12 全寬 shimmer）—— 實際 UI 無此元素', () => {
-    // 舊版錯誤骨架有一個 skeleton-shimmer h-12 w-full 的「基準幣輸入框」
-    // 實際 MultiConverter 只有 quick amounts pill 列，不存在此卡片
+  it('不應包含基準幣大輸入卡片骨架（h-12 全寬 shimmer）', () => {
+    // 實際 MultiConverter 只有 quick amounts pill 列，不存在此卡片。
     const { container } = render(<MultiConverterSkeleton />);
     const largeInput = container.querySelector('.skeleton-shimmer.h-12.w-full');
     expect(largeInput).not.toBeInTheDocument();
@@ -282,8 +280,9 @@ describe('SSOT Design Tokens', () => {
     // v2.1.0: SkeletonLoader 移除 AppLayout 結構，避免 Hydration mismatch
     // 作為 ClientOnly fallback，僅渲染內容區域骨架
     const rootDiv = container.firstChild as HTMLElement;
-    // 根元素應為簡單的 div，使用 p-4 padding
-    expect(rootDiv).toHaveClass('p-4');
+    // 根元素應與正式頁面共用內容殼層 token
+    expect(rootDiv).toHaveClass('max-w-6xl');
+    expect(rootDiv).toHaveClass('px-4');
     expect(rootDiv.getAttribute('role')).toBe('status');
     // 不應包含 h-dvh、flex 等 AppLayout 專屬類
     expect(rootDiv).not.toHaveClass('h-dvh');
diff --git a/apps/ratewise/src/components/__tests__/UpdatePrompt.test.tsx b/apps/ratewise/src/components/__tests__/UpdatePrompt.test.tsx
index 1f1d60807..21419efb5 100644
--- a/apps/ratewise/src/components/__tests__/UpdatePrompt.test.tsx
+++ b/apps/ratewise/src/components/__tests__/UpdatePrompt.test.tsx
@@ -6,7 +6,8 @@
  * - SSOT tokens 引用
  * - i18n 多語系支援
  * - useReducedMotion 支援
- * - 5 個狀態追蹤（offlineReady / needRefresh / isUpdating / updateFailed / registrationFailed）
+ * - 更新狀態追蹤（offlineReady / needRefresh / isUpdating / updateFailed）
+ * - SW 註冊失敗靜默降級，避免背景更新錯誤阻塞可用頁面
  * - offlineReady 首次安裝成功狀態保持靜默，避免 Lighthouse CLS
  * - ARIA 語義化
  * - SSR 安全
@@ -93,12 +94,9 @@ describe('UpdatePrompt - i18n 多語系', () => {
     expect(sourceCode).toContain("t('pwa.updatingDescription')");
     expect(sourceCode).toContain("t('pwa.updateFailedTitle')");
     expect(sourceCode).toContain("t('pwa.updateFailedDescription')");
-    expect(sourceCode).toContain("t('pwa.registrationFailedTitle')");
-    expect(sourceCode).toContain("t('pwa.registrationFailedDescription')");
     expect(sourceCode).toContain("t('pwa.actionUpdate')");
     expect(sourceCode).toContain("t('pwa.actionClose')");
     expect(sourceCode).toContain("t('pwa.actionRetry')");
-    expect(sourceCode).toContain("t('pwa.actionReload')");
   });
 
   it('should use support.* i18n keys for issue reporting', async () => {
@@ -131,7 +129,7 @@ describe('UpdatePrompt - useReducedMotion 支援', () => {
   });
 });
 
-describe('UpdatePrompt - 5 個狀態', () => {
+describe('UpdatePrompt - 更新狀態與 SW 降級', () => {
   it('should have isUpdating state', async () => {
     const sourceCode = await readSource();
     expect(sourceCode).toContain('isUpdating');
@@ -144,18 +142,20 @@ describe('UpdatePrompt - 5 個狀態', () => {
     expect(sourceCode).toContain('setUpdateFailed');
   });
 
-  it('should have registrationFailed state for service worker registration errors', async () => {
+  it('should log service worker registration errors without rendering a blocking prompt', async () => {
     const sourceCode = await readSource();
-    expect(sourceCode).toContain('registrationFailed');
-    expect(sourceCode).toContain('setRegistrationFailed');
     expect(sourceCode).toContain('onRegisterError');
-    expect(sourceCode).toContain('setRegistrationFailed(true)');
+    expect(sourceCode).toContain("logger.error('Service Worker registration error'");
+    expect(sourceCode).not.toContain('setRegistrationFailed(true)');
+    expect(sourceCode).not.toContain('const [registrationFailed');
+    expect(sourceCode).not.toContain("t('pwa.registrationFailedTitle')");
   });
 
-  it('should render support links when registration or update fails', async () => {
+  it('should render support links only when an actual update action fails', async () => {
     const sourceCode = await readSource();
     expect(sourceCode).toContain('SupportContactLinks');
-    expect(sourceCode).toContain('registrationFailed || updateFailed');
+    expect(sourceCode).toContain('{updateFailed ? (');
+    expect(sourceCode).not.toContain('registrationFailed || updateFailed');
   });
 
   it('should handle update with try/catch for error recovery', async () => {
@@ -176,12 +176,13 @@ describe('UpdatePrompt - 5 個狀態', () => {
 describe('UpdatePrompt - ARIA 語義', () => {
   it('should keep offlineReady silent to avoid first-load CLS', async () => {
     const sourceCode = await readSource();
-    expect(sourceCode).toContain(
-      'const shouldRender = needRefresh || isUpdating || updateFailed || registrationFailed;',
-    );
+    expect(sourceCode).toContain('const shouldRender = needRefresh || isUpdating || updateFailed;');
     expect(sourceCode).not.toContain(
       'const shouldRender = offlineReady || needRefresh || isUpdating || updateFailed || registrationFailed;',
     );
+    expect(sourceCode).not.toContain(
+      'const shouldRender = needRefresh || isUpdating || updateFailed || registrationFailed;',
+    );
   });
 
   it('should keep role="status" fallback for non-urgent rendered states', async () => {
@@ -207,38 +208,35 @@ describe('UpdatePrompt - SSR 安全', () => {
   });
 });
 
-describe('UpdatePrompt - Design token 品牌配色', () => {
-  it('should use brand gradient', async () => {
-    const sourceCode = await readSource();
-    expect(sourceCode).toContain('from-brand-from via-brand-via to-brand-to');
-  });
-
-  it('should use brand border', async () => {
+describe('UpdatePrompt - Design token 通知語法', () => {
+  it('should use notification background tokens', async () => {
     const sourceCode = await readSource();
-    expect(sourceCode).toContain('border-brand-border');
+    expect(sourceCode).toContain('notificationTokens.background.brand');
+    expect(sourceCode).toContain('notificationTokens.background.brandBorder');
   });
 
-  it('should use brand icon gradient', async () => {
+  it('should use notification icon tokens', async () => {
     const sourceCode = await readSource();
-    expect(sourceCode).toContain('from-brand-icon-from to-brand-icon-to');
+    expect(sourceCode).toContain('notificationTokens.icon.brandGradient');
   });
 
-  it('should use brand text colors', async () => {
+  it('should use notification text tokens', async () => {
     const sourceCode = await readSource();
-    expect(sourceCode).toContain('text-brand-text-dark');
-    expect(sourceCode).toContain('text-brand-text');
+    expect(sourceCode).toContain('notificationTokens.text.brandTitle');
+    expect(sourceCode).toContain('notificationTokens.text.brandDescription');
   });
 
-  it('should use brand button gradient', async () => {
+  it('should use shared notification action tokens', async () => {
     const sourceCode = await readSource();
-    expect(sourceCode).toContain('from-brand-button-from to-brand-button-to');
+    expect(sourceCode).toContain('notificationTokens.actions.primary');
+    expect(sourceCode).toContain('notificationTokens.actions.icon');
   });
 
-  it('should NOT use hardcoded blue/indigo/purple colors', async () => {
+  it('should NOT contain old hardcoded brand gradient classes', async () => {
     const sourceCode = await readSource();
-    expect(sourceCode).not.toContain('from-blue-500 to-indigo-600');
-    expect(sourceCode).not.toContain('text-blue-900');
-    expect(sourceCode).not.toContain('text-indigo-700');
+    expect(sourceCode).not.toContain('from-brand-from via-brand-via to-brand-to');
+    expect(sourceCode).not.toContain('from-brand-icon-from to-brand-icon-to');
+    expect(sourceCode).not.toContain('from-brand-button-from to-brand-button-to');
   });
 });
 
@@ -258,6 +256,7 @@ describe('UpdatePrompt - mobile interaction safety', () => {
 
   it('should keep the card itself interactive for buttons and links', async () => {
     const sourceCode = await readSource();
-    expect(sourceCode).toContain('pointer-events-auto');
+    expect(sourceCode).toContain('notificationTokens.actions.primary');
+    expect(sourceCode).toContain('notificationTokens.actions.icon');
   });
 });
diff --git a/apps/ratewise/src/config/__tests__/animations.test.ts b/apps/ratewise/src/config/__tests__/animations.test.ts
index 64f562f85..1c34ed2a5 100644
--- a/apps/ratewise/src/config/__tests__/animations.test.ts
+++ b/apps/ratewise/src/config/__tests__/animations.test.ts
@@ -100,8 +100,8 @@ describe('animations', () => {
     });
 
     it('should define consistent container and indicator classes', () => {
-      expect(segmentedSwitch.containerClass).toContain('rounded-[20px]');
-      expect(segmentedSwitch.indicatorClass).toContain('rounded-2xl');
+      expect(segmentedSwitch.containerClass).toContain('rounded-control');
+      expect(segmentedSwitch.indicatorClass).toContain('rounded-control');
       expect(segmentedSwitch.itemBaseClass).toContain('flex-1');
     });
   });
@@ -114,17 +114,17 @@ describe('animations', () => {
     it('should define highlight class with ring and background', () => {
       expect(activeHighlight.highlightClass).toContain('ring-2');
       expect(activeHighlight.highlightClass).toContain('bg-primary/10');
-      expect(activeHighlight.highlightClass).toContain('rounded-xl');
+      expect(activeHighlight.highlightClass).toContain('rounded-control');
     });
 
     it('should define item base class with relative positioning', () => {
       expect(activeHighlight.itemBaseClass).toContain('relative');
-      expect(activeHighlight.itemBaseClass).toContain('rounded-xl');
+      expect(activeHighlight.itemBaseClass).toContain('rounded-control');
     });
 
     it('should define active and inactive item classes', () => {
       expect(activeHighlight.itemActiveClass).toContain('cursor-default');
-      expect(activeHighlight.itemInactiveClass).toContain('cursor-pointer');
+      expect(activeHighlight.itemInactiveClass).toContain('transition-colors');
     });
   });
 
diff --git a/apps/ratewise/src/config/__tests__/build-scripts.test.ts b/apps/ratewise/src/config/__tests__/build-scripts.test.ts
index a11f28fe4..f3c200121 100644
--- a/apps/ratewise/src/config/__tests__/build-scripts.test.ts
+++ b/apps/ratewise/src/config/__tests__/build-scripts.test.ts
@@ -63,6 +63,11 @@ async function readManifestGenerator() {
   return readFile(manifestGeneratorPath, 'utf-8');
 }
 
+async function readPlaywrightConfig() {
+  const playwrightConfigPath = path.resolve(__dirname, '../../../playwright.config.ts');
+  return readFile(playwrightConfigPath, 'utf-8');
+}
+
 async function readPairAmountSeoHook() {
   const pairAmountSeoHookPath = path.resolve(__dirname, '../../../src/hooks/usePairAmountSEO.ts');
   return readFile(pairAmountSeoHookPath, 'utf-8');
@@ -127,6 +132,19 @@ async function readSeoRateExamplesScript() {
   return readFile(scriptPath, 'utf-8');
 }
 
+async function readExchangeRateService() {
+  const servicePath = path.resolve(__dirname, '../../../src/services/exchangeRateService.ts');
+  return readFile(servicePath, 'utf-8');
+}
+
+async function readSeoRateExamplesWorkflow() {
+  const workflowPath = path.resolve(
+    __dirname,
+    '../../../../../.github/workflows/update-seo-rate-examples.yml',
+  );
+  return readFile(workflowPath, 'utf-8');
+}
+
 async function readApiJsonGenerator() {
   const scriptPath = path.resolve(__dirname, '../../../scripts/generate-api-json.mjs');
   return readFile(scriptPath, 'utf-8');
@@ -247,6 +265,14 @@ describe('ratewise build scripts', () => {
     expect(manifestGenerator).not.toContain("name: 'HaoRate 匯率好工具'");
   });
 
+  it('should rebuild before local Playwright preview to avoid stale dist artifacts', async () => {
+    const playwrightConfig = await readPlaywrightConfig();
+
+    expect(playwrightConfig).toContain('const LOCAL_PLAYWRIGHT_PREVIEW_COMMAND =');
+    expect(playwrightConfig).toContain('pnpm build && vite preview');
+    expect(playwrightConfig).toContain('command: LOCAL_PLAYWRIGHT_PREVIEW_COMMAND');
+  });
+
   it('should not force React ecosystem packages into manual chunks', async () => {
     const viteConfig = await readViteConfig();
     expect(viteConfig).not.toContain(
@@ -378,7 +404,13 @@ describe('ratewise build scripts', () => {
     const packageJson = await readPackageJson();
     const seoRateExamplesScript = await readSeoRateExamplesScript();
 
-    expect(packageJson.scripts?.['prebuild']).toContain('SEO_RATE_EXAMPLES_OPTIONAL=1');
+    expect(packageJson.scripts?.['prebuild']).toBe(
+      'pnpm generate:deterministic && pnpm verify:artifacts && pnpm refresh:rating',
+    );
+    expect(packageJson.scripts?.['refresh:rates']).toBe('node scripts/prebuild-fetch-rates.mjs');
+    expect(packageJson.scripts?.['update:seo-examples']).toBe(
+      'node scripts/update-seo-rate-examples.mjs',
+    );
     expect(seoRateExamplesScript).toContain(
       "const OPTIONAL_MODE = process.env.SEO_RATE_EXAMPLES_OPTIONAL === '1';",
     );
@@ -386,6 +418,54 @@ describe('ratewise build scripts', () => {
     expect(seoRateExamplesScript).toContain('process.exit(0);');
   });
 
+  it('should expose generated artifact buckets as package script SSOT', async () => {
+    const packageJson = await readPackageJson();
+
+    expect(packageJson.scripts?.['refresh:data']).toBe(
+      'pnpm refresh:fallback-rates && pnpm update:seo-examples && pnpm refresh:rating',
+    );
+    expect(packageJson.scripts?.['refresh:rates']).toBe('node scripts/prebuild-fetch-rates.mjs');
+    expect(packageJson.scripts?.['refresh:fallback-rates']).toBe(
+      'RATEWISE_WRITE_FALLBACK_RATES=1 node scripts/prebuild-fetch-rates.mjs',
+    );
+    expect(packageJson.scripts?.['refresh:rating']).toBe('node scripts/fetch-rating-snapshot.mjs');
+    expect(packageJson.scripts?.['generate:deterministic']).toContain('generate-sitemap-2026.mjs');
+    expect(packageJson.scripts?.['generate:deterministic']).toContain('generate-openapi.mjs');
+    expect(packageJson.scripts?.['verify:artifacts']).toBe(
+      'node ../../scripts/verify-ssot-sync.mjs && node ../../scripts/verify-image-resources.mjs',
+    );
+    expect(packageJson.scripts?.['verify']).toBe('pnpm verify:artifacts');
+  });
+
+  it('should only update the committed fallback rate snapshot through the explicit refresh script', async () => {
+    const prebuildRatesScript = await readPrebuildFetchRatesScript();
+    const exchangeRateService = await readExchangeRateService();
+    const seoRateExamplesWorkflow = await readSeoRateExamplesWorkflow();
+    const viteConfig = await readViteConfig();
+
+    expect(prebuildRatesScript).toContain(
+      "const SHOULD_WRITE_FALLBACK_SNAPSHOT = process.env.RATEWISE_WRITE_FALLBACK_RATES === '1';",
+    );
+    expect(prebuildRatesScript).toContain(
+      "if (SHOULD_WRITE_FALLBACK_SNAPSHOT && rates.source === 'Default fallback rates')",
+    );
+    expect(prebuildRatesScript).toContain('if (SHOULD_WRITE_FALLBACK_SNAPSHOT) {');
+    expect(prebuildRatesScript).toContain(
+      "fs.writeFileSync(BUILD_TIME_RATES_PATH, payload, 'utf-8');",
+    );
+    expect(exchangeRateService).not.toContain('const FALLBACK_RATES');
+    expect(viteConfig).toContain('src/config/generated/build-time-rates.json');
+    expect(viteConfig).not.toContain("resolve(__dirname, 'public/rates.json')");
+    expect(seoRateExamplesWorkflow).toContain('pnpm --filter @app/ratewise refresh:fallback-rates');
+    expect(seoRateExamplesWorkflow).toContain(
+      'apps/ratewise/src/config/generated/build-time-rates.json',
+    );
+    expect(seoRateExamplesWorkflow).toContain(
+      '交由 branch protection / required checks / maintainer review 或 GitHub auto-merge 合併',
+    );
+    expect(seoRateExamplesWorkflow).not.toContain('gh pr merge --squash');
+  });
+
   it('should generate SEO rate example dates in Asia/Taipei instead of UTC', async () => {
     const seoRateExamplesScript = await readSeoRateExamplesScript();
 
@@ -467,9 +547,7 @@ describe('ratewise build scripts', () => {
     expect(healthCheckScript).toContain('GUIDE_PAGE_TITLE');
     expect(seoMetadataSource).toContain("from './seo-static'");
     expect(seoMetadataSource).toContain('title: GUIDE_PAGE_TITLE');
-    expect(healthCheckScript).not.toContain(
-      "validators.hasTitle('HaoRate 匯率好工具 — 台灣最精準匯率換算器 | 顯示實際買賣價，不用中間價')",
-    );
+    expect(healthCheckScript).not.toContain("validators.hasTitle('HaoRate 匯率好工具 —");
     expect(healthCheckScript).not.toContain(
       "validators.hasTitle('使用指南 — 如何使用 HaoRate 匯率好工具換算匯率 | HaoRate 匯率好工具')",
     );
diff --git a/apps/ratewise/src/config/__tests__/currencyLandingRouteRegistry.test.ts b/apps/ratewise/src/config/__tests__/currencyLandingRouteRegistry.test.ts
new file mode 100644
index 000000000..07c831360
--- /dev/null
+++ b/apps/ratewise/src/config/__tests__/currencyLandingRouteRegistry.test.ts
@@ -0,0 +1,53 @@
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import {
+  CURRENCY_LANDING_ROUTE_REGISTRY,
+  FORWARD_CURRENCY_LANDING_ROUTES,
+  REVERSE_CURRENCY_LANDING_ROUTES,
+} from '../currencyLandingRouteRegistry';
+import { CURRENCY_SEO_PATHS, REVERSE_CURRENCY_SEO_PATHS } from '../seo-paths';
+
+describe('currency landing route registry', () => {
+  it('should stay in parity with forward and reverse currency landing SEO paths', () => {
+    expect(FORWARD_CURRENCY_LANDING_ROUTES).toHaveLength(17);
+    expect(REVERSE_CURRENCY_LANDING_ROUTES).toHaveLength(17);
+    expect(CURRENCY_LANDING_ROUTE_REGISTRY).toHaveLength(34);
+
+    expect(FORWARD_CURRENCY_LANDING_ROUTES.map((route) => route.path)).toEqual(CURRENCY_SEO_PATHS);
+    expect(REVERSE_CURRENCY_LANDING_ROUTES.map((route) => route.path)).toEqual(
+      REVERSE_CURRENCY_SEO_PATHS,
+    );
+  });
+
+  it('should define canonical paths, amount route patterns, entries, and page modules consistently', () => {
+    CURRENCY_LANDING_ROUTE_REGISTRY.forEach((route) => {
+      const from = route.from.toLowerCase();
+      const to = route.to.toLowerCase();
+      const expectedBasePath = `/${from}-${to}/`;
+      const expectedPageModule = `${route.from}To${route.to}`;
+
+      expect(route.path).toBe(expectedBasePath);
+      expect(route.amountPathPattern).toBe(`${expectedBasePath}:amount`);
+      expect(route.entry).toBe(`src/pages/${expectedPageModule}.tsx`);
+      expect(route.pageModule).toBe(expectedPageModule);
+    });
+  });
+
+  it('should point every registry entry at an existing page file', () => {
+    CURRENCY_LANDING_ROUTE_REGISTRY.forEach((route) => {
+      const pagePath = path.resolve(__dirname, '../../../', route.entry);
+
+      expect(existsSync(pagePath), `${route.entry} should exist`).toBe(true);
+    });
+  });
+
+  it('should drive route registration from the registry instead of a copied route list', async () => {
+    const routesSource = await readFile(path.resolve(__dirname, '../../routes.tsx'), 'utf-8');
+
+    expect(routesSource).toContain('CURRENCY_LANDING_ROUTE_REGISTRY.flatMap');
+    expect(routesSource).not.toContain("createLazyRoute('/usd-twd'");
+    expect(routesSource).not.toContain("createLazyRoute('/twd-usd'");
+  });
+});
diff --git a/apps/ratewise/src/config/__tests__/radius-ssot.test.ts b/apps/ratewise/src/config/__tests__/radius-ssot.test.ts
new file mode 100644
index 000000000..77ecb05c8
--- /dev/null
+++ b/apps/ratewise/src/config/__tests__/radius-ssot.test.ts
@@ -0,0 +1,67 @@
+/**
+ * Radius SSOT 守門測試
+ *
+ * 設計系統圓角採語義五級制（card/panel/control/icon/compact）+ full/none。
+ * 本測試防止元件層回歸使用 bare `rounded` 或 Tailwind 原生尺寸
+ * （rounded-sm/md/lg/xl/2xl/3xl），與 themes.test.ts 的顏色守門同級。
+ *
+ * 允許：rounded-card / rounded-panel / rounded-control / rounded-icon /
+ *       rounded-compact / rounded-full / rounded-none 及其方向變體。
+ */
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const SRC_ROOT = join(__dirname, '..', '..');
+const SCAN_DIRS = ['components', 'features', 'pages'] as const;
+const EXTRA_FILES = [join(SRC_ROOT, 'config', 'design-tokens.ts')];
+
+/** bare rounded 或 Tailwind 原生尺寸（含方向變體），語義 token 與 full/none 不受限 */
+const FORBIDDEN_RADIUS_PATTERN =
+  /(?:^|[\s"'`{])rounded(?:-(?:t|b|l|r|tl|tr|bl|br|s|e|ss|se|es|ee))?(?:-(?:sm|md|lg|xl|2xl|3xl))?(?=$|[\s"'`}])/;
+
+const EXCLUDED_SEGMENTS = ['__tests__', 'node_modules'];
+const EXCLUDED_FILE_PATTERN = /\.(test|spec|stories)\.tsx?$/;
+
+function collectTsxFiles(dir: string): string[] {
+  const entries = readdirSync(dir);
+  const files: string[] = [];
+  for (const entry of entries) {
+    if (EXCLUDED_SEGMENTS.includes(entry)) continue;
+    const fullPath = join(dir, entry);
+    if (statSync(fullPath).isDirectory()) {
+      files.push(...collectTsxFiles(fullPath));
+    } else if (fullPath.endsWith('.tsx') && !EXCLUDED_FILE_PATTERN.test(fullPath)) {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+describe('radius SSOT 守門', () => {
+  it('元件層與 design-tokens 不得使用 bare rounded 或 Tailwind 原生圓角尺寸', () => {
+    const targets = [
+      ...SCAN_DIRS.flatMap((dir) => collectTsxFiles(join(SRC_ROOT, dir))),
+      ...EXTRA_FILES,
+    ];
+
+    const offenders: string[] = [];
+    for (const file of targets) {
+      const source = readFileSync(file, 'utf8');
+      const lines = source.split('\n');
+      lines.forEach((line, index) => {
+        // 只檢查 className / token 字串語境，避免註解中的一般英文誤判
+        if (!/className|rounded/.test(line)) return;
+        if (/^\s*(\*|\/\/|\/\*)/.test(line)) return;
+        if (FORBIDDEN_RADIUS_PATTERN.test(line)) {
+          offenders.push(`${relative(SRC_ROOT, file)}:${index + 1}: ${line.trim()}`);
+        }
+      });
+    }
+
+    expect(
+      offenders,
+      `發現非語義圓角（請改用 rounded-card/panel/control/icon/compact/full/none）：\n${offenders.join('\n')}`,
+    ).toEqual([]);
+  });
+});
diff --git a/apps/ratewise/src/config/__tests__/route-surface.test.ts b/apps/ratewise/src/config/__tests__/route-surface.test.ts
new file mode 100644
index 000000000..e2af5d221
--- /dev/null
+++ b/apps/ratewise/src/config/__tests__/route-surface.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { APP_CONFIG, APP_ONLY_NOINDEX_PATHS, DEV_ONLY_PATHS, PRERENDER_PATHS } from '../seo-paths';
+
+const internalOnlyRoutes = [
+  '/theme-showcase/',
+  '/color-scheme/',
+  '/update-prompt-test/',
+  '/ui-showcase/',
+] as const;
+
+describe('RateWise public route surface', () => {
+  it('keeps only real user app routes in public noindex app paths', () => {
+    expect(APP_ONLY_NOINDEX_PATHS).toEqual(['/multi/', '/favorites/', '/settings/']);
+  });
+
+  it('keeps internal-only routes out of production prerender paths', () => {
+    for (const route of internalOnlyRoutes) {
+      expect(PRERENDER_PATHS).not.toContain(route);
+    }
+  });
+
+  it('keeps internal-only routes out of production app shell paths', () => {
+    for (const route of internalOnlyRoutes) {
+      expect(APP_CONFIG.appShellPaths).not.toContain(route);
+    }
+  });
+
+  it('tracks internal-only routes separately for development tooling', () => {
+    expect(DEV_ONLY_PATHS).toEqual([...internalOnlyRoutes]);
+  });
+});
diff --git a/apps/ratewise/src/config/__tests__/seo-paths.test.ts b/apps/ratewise/src/config/__tests__/seo-paths.test.ts
index 675606437..bc343b655 100644
--- a/apps/ratewise/src/config/__tests__/seo-paths.test.ts
+++ b/apps/ratewise/src/config/__tests__/seo-paths.test.ts
@@ -113,8 +113,8 @@ describe('SEO Paths Configuration', () => {
     });
 
     it('PRERENDER_PATHS 應包含公開 SEO 路徑、法律頁與 app-only noindex 頁面', () => {
-      expect(PRERENDER_PATHS).toHaveLength(257);
-      // PRERENDER_PATHS = SEO_PATHS(249) + LEGAL_SSG_PATHS(1) + APP_ONLY_PRERENDER_PATHS(7) = 257
+      expect(PRERENDER_PATHS).toHaveLength(253);
+      // PRERENDER_PATHS = SEO_PATHS(249) + LEGAL_SSG_PATHS(1) + APP_ONLY_PRERENDER_PATHS(3) = 253
       expect(PRERENDER_PATHS).toContain('/privacy/'); // 仍需預渲染，但不在 sitemap
       expect(PRERENDER_PATHS).toContain('/favorites/');
       expect(PRERENDER_PATHS).toContain('/settings/');
@@ -140,8 +140,8 @@ describe('SEO Paths Configuration', () => {
     });
 
     it('APP_ONLY_PATHS 應與 SEO_PATHS 完全分離', () => {
-      expect(APP_ONLY_PATHS).toHaveLength(7);
-      // 注：APP_ONLY_PATHS 移除 /seo-tech/（2026-04-07 改為可索引 SEO 路徑）
+      expect(APP_ONLY_PATHS).toHaveLength(3);
+      // 注：內部展示頁不再註冊於 production route surface
       APP_ONLY_PATHS.forEach((path) => {
         expect(SEO_PATHS).not.toContain(path as (typeof SEO_PATHS)[number]);
       });
@@ -223,7 +223,7 @@ describe('SEO Paths Configuration', () => {
     it('isAppOnlyPath 應識別 app-only 頁面', () => {
       expect(isAppOnlyPath('/multi/')).toBe(true);
       expect(isAppOnlyPath('/favorites/')).toBe(true);
-      expect(isAppOnlyPath('/ui-showcase/')).toBe(true);
+      expect(isAppOnlyPath('/ui-showcase/')).toBe(false);
       expect(isAppOnlyPath('/faq/')).toBe(false);
     });
   });
diff --git a/apps/ratewise/src/config/__tests__/theme-consistency.test.ts b/apps/ratewise/src/config/__tests__/theme-consistency.test.ts
index 83dcf9fa6..ef5f8e234 100644
--- a/apps/ratewise/src/config/__tests__/theme-consistency.test.ts
+++ b/apps/ratewise/src/config/__tests__/theme-consistency.test.ts
@@ -1,26 +1,17 @@
 /**
- * Theme Consistency Test
- * 測試設計文檔與 Design Token 實作的一致性
+ * 歷史 token 相容性測試
  *
- * @see docs/design/COLOR_SCHEME_OPTIONS.md - 方案 A: 品牌對齊
- * @see /Users/azlife.eth/.claude/plans/federated-foraging-summit.md - 重構計劃
+ * @see ../../../DESIGN.md
  */
 
 import { describe, it, expect } from 'vitest';
 import colors from 'tailwindcss/colors';
 
-/**
- * 🔴 RED Phase: 這些測試預期會失敗
- * 因為 design-tokens.ts 尚未實作
- */
-describe('Theme Consistency - BDD', () => {
-  describe('🔴 RED: Design Token 與設計文檔一致性', () => {
-    describe('Given: 設計文檔定義了品牌色彩', () => {
+describe('Legacy Brand Token Consistency', () => {
+  describe('歷史品牌 token 與相容層一致性', () => {
+    describe('Given: 相容層保留歷史品牌漸變色彩', () => {
       describe('When: 檢查 Design Token 定義', () => {
-        it('Then: brand 色系應該符合 COLOR_SCHEME_OPTIONS.md 方案 A', async () => {
-          // Given: 設計文檔定義品牌漸變色
-          // 方案 A: from-blue-50 via-indigo-50 to-purple-50
-
+        it('Then: brand 色系應該維持既有 blue-indigo-purple 相容映射', async () => {
           const { semanticColors, defaultTheme } = await import('../design-tokens');
 
           // Then: 驗證 CSS Variables 格式
@@ -28,14 +19,13 @@ describe('Theme Consistency - BDD', () => {
           expect(semanticColors.brand.via).toBe('rgb(var(--color-brand-via) / <alpha-value>)');
           expect(semanticColors.brand.to).toBe('rgb(var(--color-brand-to) / <alpha-value>)');
 
-          // Then: 驗證 defaultTheme 符合設計文檔
+          // Then: 驗證 defaultTheme 維持既有相容映射
           expect(defaultTheme.brand.from).toBe(colors.blue[50]);
           expect(defaultTheme.brand.via).toBe(colors.indigo[50]);
           expect(defaultTheme.brand.to).toBe(colors.purple[50]);
         });
 
-        it('Then: primary 色系應該使用 violet 作為品牌主色', async () => {
-          // Given: 設計文檔定義品牌主色為紫色系
+        it('Then: primary 色系應該維持 violet 相容層', async () => {
           const { semanticColors, defaultTheme } = await import('../design-tokens');
 
           // Then: 驗證 CSS Variables 格式
@@ -50,7 +40,7 @@ describe('Theme Consistency - BDD', () => {
             'rgb(var(--color-primary-darker) / <alpha-value>)',
           );
 
-          // Then: 驗證 defaultTheme 使用 violet
+          // Then: 驗證 defaultTheme 維持 violet 相容層
           expect(defaultTheme.primary.light).toBe(colors.violet[100]);
           expect(defaultTheme.primary.DEFAULT).toBe(colors.violet[600]);
           expect(defaultTheme.primary.dark).toBe(colors.violet[700]);
diff --git a/apps/ratewise/src/config/__tests__/themes.test.ts b/apps/ratewise/src/config/__tests__/themes.test.ts
new file mode 100644
index 000000000..75d9c687b
--- /dev/null
+++ b/apps/ratewise/src/config/__tests__/themes.test.ts
@@ -0,0 +1,278 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  DEFAULT_THEME_CONFIG,
+  STYLE_DEFINITIONS,
+  STYLE_OPTIONS,
+  getChartColors,
+  getStyleColors,
+} from '../themes';
+
+function toRgbColor(spaceDelimited: string): string {
+  return `rgb(${spaceDelimited.split(' ').join(', ')})`;
+}
+
+const cssSource = readFileSync(resolve(process.cwd(), 'src/index.css'), 'utf8');
+const nitroSurfaceCriticalFiles = [
+  'src/components/CurrencyLandingPage.tsx',
+  'src/components/Footer.tsx',
+  'src/pages/Guide.tsx',
+  'src/pages/FAQ.tsx',
+  'src/pages/About.tsx',
+  'src/pages/OpenData.tsx',
+  'src/pages/SeoTech.tsx',
+  'src/pages/Privacy.tsx',
+  'src/pages/Settings.tsx',
+  'src/components/PageNavHeader.tsx',
+  'src/pages/ColorSchemeComparison.tsx',
+  'src/features/calculator/easter-eggs/ChristmasEasterEgg.tsx',
+  'src/features/calculator/components/CalculatorKeyboard.tsx',
+  'src/components/RatingModal.tsx',
+  'src/components/OfflineAwareError.tsx',
+  'src/components/SkeletonLoader.tsx',
+  'src/components/ErrorBoundary.tsx',
+  'src/components/RouteErrorBoundary.tsx',
+  'src/features/ratewise/RateWise.tsx',
+  'src/pages/Favorites.tsx',
+  'src/pages/NotFound.tsx',
+  'src/components/AuthorityGuidePage.tsx',
+  'src/pages/MultiConverter.tsx',
+  'src/features/ratewise/components/RateSelector.tsx',
+  'src/features/ratewise/components/SingleConverter.tsx',
+  'src/components/HomepageSEOSection.tsx',
+  'src/pages/UIShowcase.tsx',
+  'src/pages/ThemeShowcase.tsx',
+] as const;
+const fixedTailwindTonePattern =
+  /\b(?:dark:|(?:bg|text|border|fill|stroke)-(?:black|white)(?:\/|\[|\s|`|["'])|(?:bg|text|border|fill|stroke)-(?:slate|gray|red|green|blue|sky|amber|yellow|orange|emerald|purple|pink|rose)-)/;
+
+function extractStyleBlock(selector: string): string {
+  const selectorIndex = cssSource.indexOf(selector);
+  expect(selectorIndex).toBeGreaterThanOrEqual(0);
+
+  const blockStart = cssSource.indexOf('{', selectorIndex);
+  expect(blockStart).toBeGreaterThanOrEqual(0);
+
+  let depth = 0;
+  for (let index = blockStart; index < cssSource.length; index += 1) {
+    const char = cssSource[index];
+    if (char === '{') depth += 1;
+    if (char === '}') {
+      depth -= 1;
+      if (depth === 0) return cssSource.slice(blockStart + 1, index);
+    }
+  }
+
+  throw new Error(`Unable to extract CSS block for ${selector}`);
+}
+
+function extractCssVars(block: string): Record<string, string> {
+  const vars: Record<string, string> = {};
+
+  for (const match of block.matchAll(/--([\w-]+):\s*([^;]+);/g)) {
+    const name = match[1];
+    const value = match[2];
+    if (!name || !value) continue;
+
+    vars[name] = value.trim();
+  }
+
+  return vars;
+}
+
+function rgbTripletToNumbers(value: string): [number, number, number] {
+  const values = value
+    .trim()
+    .split(/\s+/)
+    .map((part) => Number.parseInt(part, 10));
+
+  expect(values).toHaveLength(3);
+  return values as [number, number, number];
+}
+
+function relativeLuminance([r, g, b]: [number, number, number]): number {
+  const normalize = (channel: number): number => {
+    const value = channel / 255;
+    return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  };
+
+  return normalize(r) * 0.2126 + normalize(g) * 0.7152 + normalize(b) * 0.0722;
+}
+
+function contrastRatio(foreground: string, background: string): number {
+  const foregroundLuminosity = relativeLuminance(rgbTripletToNumbers(foreground));
+  const backgroundLuminosity = relativeLuminance(rgbTripletToNumbers(background));
+  const lighter = Math.max(foregroundLuminosity, backgroundLuminosity);
+  const darker = Math.min(foregroundLuminosity, backgroundLuminosity);
+
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function getCssVar(vars: Record<string, string>, variable: string): string {
+  const value = vars[variable];
+  expect(value, `${variable} is missing`).toBeDefined();
+  return value!;
+}
+
+function resolveCssVar(vars: Record<string, string>, variable: string): string {
+  const value = getCssVar(vars, variable);
+  const reference = /^var\(--([\w-]+)\)$/.exec(value);
+
+  return reference?.[1] ? resolveCssVar(vars, reference[1]) : value;
+}
+
+describe('themes SSOT', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('STYLE_OPTIONS 應從 STYLE_DEFINITIONS 派生 preview 色票', () => {
+    for (const option of STYLE_OPTIONS) {
+      const style = STYLE_DEFINITIONS[option.value];
+
+      expect(option.label).toBe(style.label);
+      expect(option.labelEn).toBe(style.labelEn);
+      expect(option.description).toBe(style.description);
+      expect(option.previewBg).toBe(toRgbColor(style.colors.background));
+      expect(option.previewText).toBe(toRgbColor(style.colors.text));
+      expect(option.previewAccent).toBe(toRgbColor(style.colors.primary));
+    }
+  });
+
+  it('getChartColors 在 SSR 環境應使用預設風格 fallback', () => {
+    vi.stubGlobal('window', undefined);
+
+    const fallback = getStyleColors(DEFAULT_THEME_CONFIG.style);
+
+    expect(getChartColors()).toEqual({
+      lineColor: toRgbColor(fallback.chartLine),
+      topColor: `rgba(${fallback.chartAreaTop.split(' ').join(', ')}, 0.25)`,
+      bottomColor: `rgba(${fallback.chartAreaBottom.split(' ').join(', ')}, 0)`,
+      markerBackground: 'rgb(255, 255, 255)',
+    });
+  });
+
+  it('DEFAULT_THEME_CONFIG 應對應可用的 style 定義', () => {
+    expect(STYLE_DEFINITIONS).toHaveProperty(DEFAULT_THEME_CONFIG.style);
+    expect(Object.keys(STYLE_DEFINITIONS)).toContain(DEFAULT_THEME_CONFIG.style);
+  });
+
+  it('Tailwind 色彩 alias 應支援目前產品內使用的 semantic class', async () => {
+    const { default: tailwindConfig } = await import('../../../tailwind.config');
+    const colors = tailwindConfig.theme.extend.colors;
+
+    expect(colors.surface).toHaveProperty('soft');
+    expect(colors.surface).toHaveProperty('border');
+    expect(colors.text).toHaveProperty('DEFAULT');
+    expect(colors.text).toHaveProperty('muted');
+    expect(colors.primary).toHaveProperty('foreground');
+  });
+
+  it('Nitro CSS variables 應完整覆蓋 legacy semantic tokens，避免繼承 Zen 淺色值', () => {
+    const nitroVars = extractCssVars(extractStyleBlock("[data-style='nitro']"));
+    const requiredNitroVars = [
+      'color-primary-foreground',
+      'color-foreground-secondary',
+      'color-foreground-muted',
+      'color-card',
+      'color-card-foreground',
+      'color-ring',
+      'color-overlay',
+      'color-neutral',
+      'color-neutral-dark',
+      'color-neutral-darker',
+      'color-neutral-border',
+      'color-destructive-hover',
+      'color-destructive-foreground',
+      'color-success-foreground',
+      'color-warning-foreground',
+      'color-danger-bg',
+      'color-danger-light',
+      'color-danger-hover',
+      'color-danger-active',
+      'color-danger-text',
+      'color-danger',
+      'color-success-bg',
+      'color-success-light',
+      'color-success-hover',
+      'color-success-active',
+      'color-warning-light',
+      'color-warning-hover',
+      'color-warning-active',
+      'color-favorite-light',
+      'color-favorite',
+      'color-highlight-from',
+      'color-highlight-to',
+      'color-footer-from',
+      'color-footer-via',
+      'color-footer-to',
+    ];
+
+    for (const variable of requiredNitroVars) {
+      expect(nitroVars, `${variable} is missing from [data-style='nitro']`).toHaveProperty(
+        variable,
+      );
+    }
+  });
+
+  it('所有風格應覆蓋互動狀態 foreground token 並符合 AA 對比', () => {
+    for (const option of STYLE_OPTIONS) {
+      const vars = extractCssVars(extractStyleBlock(`[data-style='${option.value}']`));
+
+      for (const variable of [
+        'color-card',
+        'color-card-foreground',
+        'color-ring',
+        'color-destructive-hover',
+        'color-destructive-foreground',
+        'color-success-foreground',
+        'color-warning-foreground',
+      ]) {
+        expect(vars, `${variable} is missing from [data-style='${option.value}']`).toHaveProperty(
+          variable,
+        );
+      }
+
+      for (const background of ['color-destructive', 'color-destructive-hover']) {
+        expect(
+          contrastRatio(
+            resolveCssVar(vars, 'color-destructive-foreground'),
+            resolveCssVar(vars, background),
+          ),
+          `${option.value} ${background} contrast is below AA`,
+        ).toBeGreaterThanOrEqual(4.5);
+      }
+    }
+  });
+
+  it('Nitro 主要文字、次要文字與 primary foreground 應達到一般文字 AA 對比', () => {
+    const nitroVars = extractCssVars(extractStyleBlock("[data-style='nitro']"));
+
+    expect(
+      contrastRatio(getCssVar(nitroVars, 'color-text'), getCssVar(nitroVars, 'color-background')),
+    ).toBeGreaterThanOrEqual(4.5);
+    expect(
+      contrastRatio(
+        getCssVar(nitroVars, 'color-text-muted'),
+        getCssVar(nitroVars, 'color-surface'),
+      ),
+    ).toBeGreaterThanOrEqual(4.5);
+    // primary-foreground/primary 用於 RateSelector 大文字 UI 元件，採 WCAG AA Large Text 3:1。
+    expect(
+      contrastRatio(
+        getCssVar(nitroVars, 'color-primary-foreground'),
+        getCssVar(nitroVars, 'color-primary'),
+      ),
+    ).toBeGreaterThanOrEqual(3);
+  });
+
+  it('Nitro 高風險頁面不得再使用固定 Tailwind 淺色或 dark: 補丁', () => {
+    for (const filePath of nitroSurfaceCriticalFiles) {
+      const source = readFileSync(resolve(process.cwd(), filePath), 'utf8');
+      const match = fixedTailwindTonePattern.exec(source);
+
+      expect(match?.[0], `${filePath} still uses fixed tone class`).toBeUndefined();
+    }
+  });
+});
diff --git a/apps/ratewise/src/config/animations.ts b/apps/ratewise/src/config/animations.ts
index d0c2471ea..9bb32852e 100644
--- a/apps/ratewise/src/config/animations.ts
+++ b/apps/ratewise/src/config/animations.ts
@@ -14,6 +14,7 @@
  */
 
 import type { Transition, Variants } from 'motion/react';
+import { radiusTokens } from './design-tokens';
 
 /**
  * 基礎動畫過渡配置
@@ -162,9 +163,9 @@ export const segmentedSwitch = {
   },
 
   /** 容器樣式 token（保持視覺一致） */
-  containerClass: 'bg-surface-soft rounded-[20px] p-1.5 flex gap-1 relative shadow-inner',
-  indicatorClass: 'absolute inset-0 rounded-2xl shadow-sm z-[-1] bg-[rgb(var(--color-surface))]',
-  itemBaseClass: 'flex-1 py-3 rounded-2xl flex items-center justify-center gap-1 relative z-10',
+  containerClass: `bg-surface-soft ${radiusTokens.className.control} p-1.5 flex gap-1 relative shadow-inner`,
+  indicatorClass: `absolute inset-0 ${radiusTokens.className.control} shadow-soft z-[-1] bg-surface`,
+  itemBaseClass: `flex-1 py-3 ${radiusTokens.className.control} flex items-center justify-center gap-1 relative z-10`,
 } as const;
 
 /**
@@ -182,14 +183,14 @@ export const activeHighlight = {
   transition: transitions.gentle,
 
   /** 高亮層樣式（絕對定位，作為選中背景） */
-  highlightClass: 'absolute inset-0 rounded-xl bg-primary/10 ring-2 ring-primary/30',
+  highlightClass: `absolute inset-0 ${radiusTokens.className.control} bg-primary/10 ring-2 ring-primary/30`,
 
   /** 列表項目基礎樣式（需 relative 定位以容納高亮層） */
-  itemBaseClass: 'relative flex items-center justify-between px-3 py-2.5 rounded-xl',
+  itemBaseClass: `relative flex items-center justify-between px-3 py-2.5 ${radiusTokens.className.control}`,
 
-  /** 未選中項目互動樣式 */
+  /** 未選中項目互動樣式 - 極簡背景，僅 hover 時顯示淡色 */
   itemInactiveClass:
-    'bg-surface-soft cursor-pointer hover:bg-primary/5 hover:shadow-sm active:scale-[0.99]',
+    'hover:bg-surface-soft/50 hover:shadow-soft active:scale-[0.99] transition-colors duration-150',
 
   /** 選中項目樣式（不可點擊） */
   itemActiveClass: 'cursor-default',
@@ -266,14 +267,14 @@ export const notificationAnimations = {
  */
 export const microInteractionClasses = {
   /** 按鈕基礎互動 */
-  button: 'transition-all duration-200 ease-out hover:scale-[1.02] active:scale-[0.98]',
+  button: 'transition-transform duration-200 ease-out hover:scale-[1.02] active:scale-[0.98]',
 
   /** 按鈕帶陰影 */
   buttonWithShadow:
-    'transition-all duration-200 ease-out hover:scale-[1.02] hover:shadow-md active:scale-[0.98]',
+    'transition-[box-shadow,transform] duration-200 ease-out hover:scale-[1.02] hover:shadow-soft active:scale-[0.98]',
 
   /** 卡片懸停效果 */
-  card: 'transition-all duration-200 ease-out hover:scale-[1.01] hover:-translate-y-0.5 hover:shadow-lg',
+  card: 'transition-[box-shadow,transform] duration-200 ease-out hover:scale-[1.01] hover:-translate-y-0.5 hover:shadow-card-hover',
 
   /** 連結懸停效果 */
   link: 'transition-colors duration-200 ease-out hover:text-primary',
@@ -288,7 +289,7 @@ export const microInteractionClasses = {
   opacity: 'transition-opacity duration-200 ease-out',
 
   /** 導覽項目效果 */
-  navItem: 'transition-all duration-200 ease-out active:scale-95',
+  navItem: 'transition-transform duration-200 ease-out active:scale-95',
 } as const;
 
 /**
diff --git a/apps/ratewise/src/config/api-endpoints.ts b/apps/ratewise/src/config/api-endpoints.ts
index fd52dc03d..e143cecf4 100644
--- a/apps/ratewise/src/config/api-endpoints.ts
+++ b/apps/ratewise/src/config/api-endpoints.ts
@@ -24,6 +24,7 @@ export const PROVIDER_RATES_PATH = {
   latest: (providerId: string) => `/public/rates/providers/${providerId}/latest.json`,
   history: (providerId: string, date: string) =>
     `/public/rates/providers/${providerId}/history/${date}.json`,
+  aggregate: (providerId: string) => `/public/rates/providers/${providerId}/history-30d.json`,
 } as const;
 
 const MONEYBOX_LATEST_PATH = PROVIDER_RATES_PATH.latest('moneybox');
diff --git a/apps/ratewise/src/config/currencyLandingRouteRegistry.ts b/apps/ratewise/src/config/currencyLandingRouteRegistry.ts
new file mode 100644
index 000000000..795b52388
--- /dev/null
+++ b/apps/ratewise/src/config/currencyLandingRouteRegistry.ts
@@ -0,0 +1,77 @@
+export type CurrencyLandingDirection = 'foreign-to-twd' | 'twd-to-foreign';
+
+export type CurrencyLandingRouteDefinition = Readonly<{
+  direction: CurrencyLandingDirection;
+  code: string;
+  from: string;
+  to: string;
+  path: `/${string}/`;
+  amountPathPattern: `/${string}/:amount`;
+  entry: `src/pages/${string}.tsx`;
+  pageModule: string;
+}>;
+
+const CURRENCY_CODES = [
+  'AUD',
+  'CAD',
+  'CHF',
+  'CNY',
+  'EUR',
+  'GBP',
+  'HKD',
+  'IDR',
+  'JPY',
+  'KRW',
+  'MYR',
+  'NZD',
+  'PHP',
+  'SGD',
+  'THB',
+  'USD',
+  'VND',
+] as const;
+
+function createForeignToTwdRoute(code: (typeof CURRENCY_CODES)[number]) {
+  const lowerCode = code.toLowerCase();
+  const pageModule = `${code}ToTWD`;
+
+  return {
+    direction: 'foreign-to-twd',
+    code,
+    from: code,
+    to: 'TWD',
+    path: `/${lowerCode}-twd/`,
+    amountPathPattern: `/${lowerCode}-twd/:amount`,
+    entry: `src/pages/${pageModule}.tsx`,
+    pageModule,
+  } as const satisfies CurrencyLandingRouteDefinition;
+}
+
+function createTwdToForeignRoute(code: (typeof CURRENCY_CODES)[number]) {
+  const lowerCode = code.toLowerCase();
+  const pageModule = `TWDTo${code}`;
+
+  return {
+    direction: 'twd-to-foreign',
+    code,
+    from: 'TWD',
+    to: code,
+    path: `/twd-${lowerCode}/`,
+    amountPathPattern: `/twd-${lowerCode}/:amount`,
+    entry: `src/pages/${pageModule}.tsx`,
+    pageModule,
+  } as const satisfies CurrencyLandingRouteDefinition;
+}
+
+export const CURRENCY_LANDING_ROUTE_REGISTRY = [
+  ...CURRENCY_CODES.map(createForeignToTwdRoute),
+  ...CURRENCY_CODES.map(createTwdToForeignRoute),
+] as const;
+
+export const FORWARD_CURRENCY_LANDING_ROUTES = CURRENCY_LANDING_ROUTE_REGISTRY.filter(
+  (route) => route.direction === 'foreign-to-twd',
+);
+
+export const REVERSE_CURRENCY_LANDING_ROUTES = CURRENCY_LANDING_ROUTE_REGISTRY.filter(
+  (route) => route.direction === 'twd-to-foreign',
+);
diff --git a/apps/ratewise/src/config/design-tokens.test.ts b/apps/ratewise/src/config/design-tokens.test.ts
index 20e166a23..31973e854 100644
--- a/apps/ratewise/src/config/design-tokens.test.ts
+++ b/apps/ratewise/src/config/design-tokens.test.ts
@@ -1,19 +1,16 @@
 /**
- * Design Token System - BDD Test Suite
+ * Design Token System Test Suite
  * 測試色彩定義的完整性與一致性
  *
  * @see docs/prompt/BDD.md - BDD 開發流程
- * @see /Users/azlife.eth/.claude/plans/federated-foraging-summit.md - 重構計劃
  */
 
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { describe, it, expect } from 'vitest';
 
-/**
- * 🔴 RED Phase: 這些測試預期會失敗
- * 因為 getDesignTokens() 函數尚未實作
- */
-describe('Design Token System - BDD', () => {
-  describe('🔴 RED: 色彩 Token 定義', () => {
+describe('Design Token System', () => {
+  describe('色彩 Token 定義', () => {
     describe('Given: 應用需要統一的色彩系統', () => {
       describe('When: 讀取 Design Token 配置', () => {
         it('Then: 應該定義 neutral 色系（數字鍵用）', async () => {
@@ -145,7 +142,7 @@ describe('Design Token System - BDD', () => {
       const { typographyTokens } = await import('./design-tokens');
       const fontSize = typographyTokens.fontSize;
 
-      expect(fontSize['2xs']).toHaveProperty('size', '0.625rem');
+      expect(fontSize['2xs']).toHaveProperty('size', '0.75rem');
       expect(fontSize.xs).toHaveProperty('size', '0.75rem');
       expect(fontSize.sm).toHaveProperty('size', '0.875rem');
       expect(fontSize.base).toHaveProperty('size', '1rem');
@@ -247,7 +244,7 @@ describe('Design Token System - BDD', () => {
       const { rateWiseLayoutTokens } = await import('./design-tokens');
 
       expect(rateWiseLayoutTokens).toBeDefined();
-      expect(rateWiseLayoutTokens.content.className).toContain('py-4');
+      expect(rateWiseLayoutTokens.content.className).toContain('py-6');
       // 資料來源最後隱藏 (nano 斷點)
       expect(rateWiseLayoutTokens.info.visibility).toBe('nano:hidden');
     });
@@ -274,9 +271,171 @@ describe('Design Token System - BDD', () => {
       const { multiConverterLayoutTokens } = await import('./design-tokens');
 
       expect(multiConverterLayoutTokens).toBeDefined();
-      expect(multiConverterLayoutTokens.content.className).toContain('py-4');
+      expect(multiConverterLayoutTokens.content.className).toContain('py-6');
       expect(multiConverterLayoutTokens.card.className).toContain('card');
-      expect(multiConverterLayoutTokens.info.text).toContain('text-[10px]');
+      expect(multiConverterLayoutTokens.info.text).toContain('text-xs');
+    });
+  });
+
+  describe('🟢 GREEN: 內容頁導覽與頁面 shell SSOT', () => {
+    it('contentPageTokens.shell 應直接沿用 pageLayoutTokens.content.className', async () => {
+      const { contentPageTokens, pageLayoutTokens } = await import('./design-tokens');
+
+      expect(contentPageTokens.shell).toBe(pageLayoutTokens.content.className);
+      expect(pageLayoutTokens.content.maxWidth).toBe(1024);
+    });
+
+    it('PageNavHeader 應為 in-flow 區塊（禁止 sticky），Breadcrumb 集中定義截斷規則', async () => {
+      const { breadcrumbTokens, pageNavHeaderTokens } = await import('./design-tokens');
+
+      expect(pageNavHeaderTokens.root).not.toContain('sticky');
+      expect(pageNavHeaderTokens.root).not.toContain('safe-area-inset-top');
+      expect(pageNavHeaderTokens.root).not.toContain('backdrop-blur');
+      expect(pageNavHeaderTokens.backButton).toContain('min-h-11');
+      expect(pageNavHeaderTokens.backButton).toContain('rounded-full');
+      expect(pageNavHeaderTokens.breadcrumbSlot).toContain('min-w-0');
+      expect(breadcrumbTokens.list).toContain('touch-pan-x');
+      expect(breadcrumbTokens.list).toContain('overflow-x-auto');
+      expect(breadcrumbTokens.list).toContain('whitespace-nowrap');
+      expect(breadcrumbTokens.current).toContain('truncate');
+    });
+
+    it('內容頁與 app 頁面 family token 應覆蓋 article、callout、result、table 與 row pattern', async () => {
+      const { appPageTokens, contentPageTokens } = await import('./design-tokens');
+
+      expect(contentPageTokens.article.card).toContain('rounded-card');
+      expect(contentPageTokens.article.card).toContain('border-border');
+      expect(contentPageTokens.result.card).toContain('bg-surface-elevated');
+      expect(contentPageTokens.callouts.warning).toContain('border-warning');
+      expect(contentPageTokens.table.wrapperBlock).toContain('overflow-x-auto');
+      expect(contentPageTokens.buttons.primary).toContain('min-h-11');
+      expect(contentPageTokens.buttons.primary).toContain('focus-visible:ring-2');
+      expect(appPageTokens.linkRow).toContain('min-h-11');
+      expect(appPageTokens.statRow).toContain('rounded-control');
+    });
+
+    it('互動與回饋 family token 應收斂快速金額與錯誤復原 UI', async () => {
+      const { feedbackSurfaceTokens, quickAmountButtonTokens } = await import('./design-tokens');
+
+      expect(quickAmountButtonTokens.className).toContain('rounded-compact');
+      expect(quickAmountButtonTokens.className).toContain('transition-[background-color');
+      expect(feedbackSurfaceTokens.card).toContain('rounded-card');
+      expect(feedbackSurfaceTokens.actionButton).toContain('min-h-11');
+      expect(feedbackSurfaceTokens.actionButton).toContain('focus-visible:ring-2');
+    });
+
+    it('radiusTokens 與 shadowTokens 應作為 Tailwind 與 CSS component 的單一真相', async () => {
+      const { getDesignTokens, radiusTokens, shadowTokens } = await import('./design-tokens');
+      const tokens = getDesignTokens();
+
+      expect(tokens.radius).toBe(radiusTokens);
+      expect(tokens.shadow).toBe(shadowTokens);
+      expect(radiusTokens.values.card).toBe('1.5rem');
+      expect(radiusTokens.values.control).toBe('1rem');
+      expect(radiusTokens.values.compact).toBe('0.5rem');
+      expect(radiusTokens.values.lg).toBe('0.5rem');
+      expect(radiusTokens.className.card).toBe('rounded-card');
+      expect(radiusTokens.className.control).toBe('rounded-control');
+      expect(shadowTokens.values.card).toContain('rgb(15 23 42');
+      expect(shadowTokens.values.lg).toBeDefined();
+      expect(shadowTokens.className.floating).toBe('shadow-floating');
+    });
+
+    it('正式頁核心 shell 不應再使用 Tailwind 任意 rgb(var()) 色彩 class', () => {
+      const coreFiles = [
+        'src/components/AppLayout.tsx',
+        'src/components/AnswerCapsule.tsx',
+        'src/components/AuthorityGuidePage.tsx',
+        'src/components/BottomNavigation.tsx',
+        'src/components/Breadcrumb.tsx',
+        'src/components/CurrencyLandingPage.tsx',
+        'src/components/ErrorBoundary.tsx',
+        'src/components/Footer.tsx',
+        'src/components/HomepageSEOSection.tsx',
+        'src/components/PageNavHeader.tsx',
+        'src/components/PullToRefreshIndicator.tsx',
+        'src/components/RouteErrorBoundary.tsx',
+        'src/components/SideNavigation.tsx',
+        'src/components/SkeletonLoader.tsx',
+        'src/components/SupportContactLinks.tsx',
+        'src/components/Toast/ToastProvider.tsx',
+        'src/components/UpdatePrompt.tsx',
+        'src/components/UpdatePromptPreview.tsx',
+        'src/features/calculator/components/CalculatorKey.tsx',
+        'src/features/calculator/components/ExpressionDisplay.tsx',
+        'src/features/ratewise/RateWise.tsx',
+        'src/features/ratewise/components/ConversionHistory.tsx',
+        'src/features/ratewise/components/CurrencyList.tsx',
+        'src/features/ratewise/components/FavoritesList.tsx',
+        'src/features/ratewise/components/MultiConverter.tsx',
+        'src/features/ratewise/components/SingleConverter.tsx',
+        'src/pages/ColorSchemeComparison.tsx',
+        'src/pages/Favorites.tsx',
+        'src/pages/MultiConverter.tsx',
+        'src/pages/NotFound.tsx',
+        'src/pages/OpenData.tsx',
+        'src/pages/SeoTech.tsx',
+        'src/pages/Settings.tsx',
+        'src/pages/ThemeShowcase.tsx',
+        'src/pages/UIShowcase.tsx',
+        'src/config/animations.ts',
+      ];
+      const forbiddenArbitraryColorClass = /\b(?:text|bg|border)-\[rgb\(var\(--color-/;
+
+      for (const filePath of coreFiles) {
+        const source = readFileSync(resolve(process.cwd(), filePath), 'utf8');
+        const match = forbiddenArbitraryColorClass.exec(source);
+
+        expect(match?.[0], `${filePath} still uses arbitrary color class`).toBeUndefined();
+      }
+    });
+
+    it('核心 UI family 不應保留 transition-all、legacy radius/shadow utility 或 div role button 回歸', () => {
+      const coreFiles = [
+        'src/components/AuthorityGuidePage.tsx',
+        'src/components/BottomNavigation.tsx',
+        'src/components/CurrencyLandingPage.tsx',
+        'src/components/ErrorBoundary.tsx',
+        'src/components/Footer.tsx',
+        'src/components/HomepageSEOSection.tsx',
+        'src/components/OfflineAwareError.tsx',
+        'src/components/OfflineIndicator.tsx',
+        'src/components/RouteErrorBoundary.tsx',
+        'src/components/SkeletonLoader.tsx',
+        'src/components/SupportContactLinks.tsx',
+        'src/components/Toast/ToastProvider.tsx',
+        'src/components/UpdatePrompt.tsx',
+        'src/components/UpdatePromptPreview.tsx',
+        'src/features/calculator/components/CalculatorKey.tsx',
+        'src/features/calculator/components/ExpressionDisplay.tsx',
+        'src/features/ratewise/RateWise.tsx',
+        'src/features/ratewise/components/ConversionHistory.tsx',
+        'src/features/ratewise/components/CurrencyList.tsx',
+        'src/features/ratewise/components/FavoritesList.tsx',
+        'src/features/ratewise/components/MultiConverter.tsx',
+        'src/features/ratewise/components/SingleConverter.tsx',
+        'src/pages/ColorSchemeComparison.tsx',
+        'src/pages/Favorites.tsx',
+        'src/pages/MultiConverter.tsx',
+        'src/pages/NotFound.tsx',
+        'src/pages/OpenData.tsx',
+        'src/pages/SeoTech.tsx',
+        'src/pages/Settings.tsx',
+        'src/pages/ThemeShowcase.tsx',
+        'src/pages/UIShowcase.tsx',
+        'src/config/animations.ts',
+        'src/config/design-tokens.ts',
+        'src/index.css',
+      ];
+      const forbidden =
+        /transition-all|transition:\s*all|rounded-(?:sm|md|lg|xl|2xl|3xl|4xl|\[[0-9][^\]]*\])|shadow-(?:sm|md|lg|xl|2xl)|role="button"|border-black\/5|border-surface-border|divide-surface-border/;
+
+      for (const filePath of coreFiles) {
+        const source = readFileSync(resolve(process.cwd(), filePath), 'utf8');
+        const match = forbidden.exec(source);
+
+        expect(match?.[0], `${filePath} still has UI drift`).toBeUndefined();
+      }
     });
   });
 
diff --git a/apps/ratewise/src/config/design-tokens.ts b/apps/ratewise/src/config/design-tokens.ts
index a4935f7e5..9f103e167 100644
--- a/apps/ratewise/src/config/design-tokens.ts
+++ b/apps/ratewise/src/config/design-tokens.ts
@@ -5,7 +5,7 @@
  * @description 統一管理應用色彩、間距、字體等設計 token
  *              使用 CSS Variables 實現動態主題切換
  *
- * @see docs/design/COLOR_SCHEME_OPTIONS.md - 方案 A: 品牌對齊
+ * @see ../../../DESIGN.md
  * @see docs/dev/005_design_token_refactoring.md - 技術決策記錄
  *
  * @reference Context7 - Tailwind CSS Official Docs:
@@ -66,6 +66,7 @@ export const semanticColors = {
     'text-light': 'rgb(var(--color-primary-text-light) / <alpha-value>)',
     ring: 'rgb(var(--color-primary-ring) / <alpha-value>)',
     DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
+    foreground: 'rgb(var(--color-primary-foreground) / <alpha-value>)',
     dark: 'rgb(var(--color-primary-dark) / <alpha-value>)',
     darker: 'rgb(var(--color-primary-darker) / <alpha-value>)',
     text: 'rgb(var(--color-primary-text) / <alpha-value>)',
@@ -109,6 +110,12 @@ export const semanticColors = {
     to: 'rgb(var(--color-highlight-to) / <alpha-value>)',
   },
 
+  /**
+   * 遮罩層（Overlay）
+   * 用途：modal / bottom sheet 背景遮罩
+   */
+  overlay: 'rgb(var(--color-overlay) / <alpha-value>)',
+
   /**
    * 收藏色系（Favorite）
    * 用途：星號圖標顏色
@@ -132,10 +139,10 @@ export const semanticColors = {
   },
 
   /**
-   * 品牌漸變（Brand Gradient）
-   * 用途：品牌色彩漸變、通知視窗背景
+   * 歷史品牌漸變（Legacy Brand Gradient）
+   * 用途：保留歷史通知／展示頁相容層，不作為目前正式產品語法
    * 映射：blue-indigo-purple 色系
-   * @see docs/design/COLOR_SCHEME_OPTIONS.md - 方案 A
+   * @see ../../../DESIGN.md
    */
   brand: {
     // 背景漸變（淺色）
@@ -179,9 +186,12 @@ export const semanticColors = {
  * 預設主題值（Fallback & 參考）
  *
  * 用途：
- * 1. 作為 CSS Variables 的預設值（在 global.css 中定義）
- * 2. 作為主題設計的參考文檔
- * 3. 用於 SSR 環境的 fallback
+ * 1. 作為歷史相容色票與測試參考
+ * 2. 供展示頁與相容層比對使用
+ *
+ * 注意：
+ * - 正式產品視覺基準以 `DESIGN.md`、`index.css` 的 `zen` CSS variables 為準
+ * - 本物件不是目前 runtime theme 的唯一真實來源
  *
  * @example
  * ```css
@@ -267,9 +277,9 @@ export const defaultTheme = {
 } as const;
 
 /**
- * 深色主題值
+ * 深色相容色票
  *
- * 用途：為深色模式提供預設配置
+ * 用途：保留舊主題測試與相容層參考
  *
  * 設計原則：
  * - 中性色反轉（淺色 ↔ 深色）
@@ -364,8 +374,75 @@ export const darkTheme = {
  * // => 'rgb(var(--color-primary) / <alpha-value>)'
  * ```
  */
+/**
+ * Radius Design Tokens (SSOT)
+ *
+ * 恢復主支既有的柔和大圓角語言，並以語義 token 取代散落的硬編碼 radius class。
+ * - card: 24px，延續舊版 `.card` / ParkKeeper 風格，讓內容頁更現代
+ * - panel/control: 16px，供按鈕、表單、互動列與資訊面板使用
+ * - icon: 12px，供小型 icon badge 使用
+ * - compact: 8px，僅保留給密集資料表或真正小型元素
+ */
+export const radiusTokens = {
+  values: {
+    card: '1.5rem',
+    panel: '1rem',
+    control: '1rem',
+    icon: '0.75rem',
+    compact: '0.5rem',
+    full: '9999px',
+    '4xl': '2rem',
+    '3xl': '1.5rem',
+    '2xl': '1rem',
+    xl: '0.75rem',
+    lg: '0.5rem',
+    md: '0.375rem',
+    sm: '0.25rem',
+  },
+  className: {
+    card: 'rounded-card',
+    panel: 'rounded-panel',
+    control: 'rounded-control',
+    icon: 'rounded-icon',
+    compact: 'rounded-compact',
+    full: 'rounded-full',
+  },
+} as const;
+
+/**
+ * Shadow Design Tokens (SSOT)
+ *
+ * 用一組安靜、帶空氣感的陰影取代散落的 Tailwind 預設 shadow。
+ * Tailwind 的 sm/md/lg/xl 仍保留相容別名，但實際值由這裡集中控制。
+ *
+ * 注意：陰影基底色使用硬編碼 `rgb(15 23 42 / ...)` (slate-900)，
+ * 僅適用淺色模式。若未來支援深色模式，需改為 CSS variable 或條件值。
+ */
+export const shadowTokens = {
+  values: {
+    card: '0 1px 2px 0 rgb(15 23 42 / 0.04), 0 12px 32px -24px rgb(15 23 42 / 0.28)',
+    cardHover:
+      '0 2px 6px -2px rgb(15 23 42 / 0.10), 0 22px 48px -28px rgb(var(--color-primary) / 0.30)',
+    soft: '0 1px 2px 0 rgb(15 23 42 / 0.04), 0 8px 24px -22px rgb(15 23 42 / 0.22)',
+    floating:
+      '0 8px 28px -18px rgb(15 23 42 / 0.28), 0 16px 44px -28px rgb(var(--color-primary) / 0.24)',
+    brand: '0 8px 25px rgb(var(--color-primary) / 0.28)',
+    sm: '0 1px 2px 0 rgb(15 23 42 / 0.04)',
+    md: '0 1px 2px 0 rgb(15 23 42 / 0.05), 0 8px 24px -22px rgb(15 23 42 / 0.22)',
+    lg: '0 8px 28px -18px rgb(15 23 42 / 0.28), 0 16px 44px -28px rgb(var(--color-primary) / 0.20)',
+    xl: '0 14px 44px -24px rgb(15 23 42 / 0.32), 0 24px 64px -36px rgb(var(--color-primary) / 0.28)',
+  },
+  className: {
+    card: 'shadow-card',
+    cardHover: 'hover:shadow-card-hover',
+    soft: 'shadow-soft',
+    floating: 'shadow-floating',
+    brand: 'shadow-brand',
+  },
+} as const;
+
 export function getDesignTokens() {
-  return { colors: semanticColors };
+  return { colors: semanticColors, radius: radiusTokens, shadow: shadowTokens };
 }
 
 /**
@@ -442,11 +519,11 @@ export const navigationTokens = {
     },
     /** Label typography */
     label: {
-      fontSize: 8,
-      fontSizeClass: 'text-[8px]',
-      fontWeight: 'font-black',
-      letterSpacing: '0.15em',
-      letterSpacingClass: 'tracking-[0.15em]',
+      fontSize: 12,
+      fontSizeClass: 'text-xs',
+      fontWeight: 'font-semibold',
+      letterSpacing: '0.08em',
+      letterSpacingClass: 'tracking-[0.08em]',
     },
     /** Active indicator bar */
     indicator: {
@@ -485,8 +562,8 @@ export const navigationTokens = {
  *
  * 設計原理（2025 最佳實踐）：
  * - 外層容器：min-h-full（不重複 overflow，由 AppLayout 統一處理滾動）
- * - 內容區域：水平內距 20px (px-5)，垂直內距 24px (py-6)，最大寬度 448px (max-w-md)
- * - 區塊間距：各區塊使用 mb-6 分隔，卡片內距 p-4
+ * - 內容區域：響應式內距 + 1120px 內容寬度上限，桌面不再鎖成窄欄
+ * - 區塊間距：各區塊使用 mb-6 分隔，卡片內距 p-5 / lg:p-6
  * - 底部留白：由 AppLayout pb-[calc(56px+safe-area)] 統一處理
  *
  * 避免問題：
@@ -510,9 +587,19 @@ export const pageLayoutTokens = {
   content: {
     horizontalPadding: 20,
     verticalPadding: 24,
-    maxWidth: 448,
+    maxWidth: 1024,
     /** 完整類別組合 */
-    className: 'px-5 py-6 max-w-md mx-auto',
+    className: 'w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8',
+    padding: {
+      default: 'px-4 sm:px-6 lg:px-8 py-6 lg:py-8',
+      compact: 'px-4 sm:px-6 py-4 lg:py-5',
+      none: '',
+    },
+    variant: {
+      default: 'w-full max-w-5xl mx-auto',
+      full: 'w-full',
+      centered: 'w-full max-w-2xl mx-auto flex min-h-full flex-col items-center justify-center',
+    },
   },
   /** 區塊配置 */
   section: {
@@ -521,11 +608,172 @@ export const pageLayoutTokens = {
   },
   /** 卡片配置 */
   card: {
-    padding: 16,
-    className: 'card p-4',
+    padding: 20,
+    className: 'card p-5 lg:p-6',
   },
 } as const;
 
+/**
+ * 內容頁頂部返回 + 麵包屑導覽 SSOT
+ *
+ * 用於 SEO 內容頁、設定子頁與所有需要返回路徑的資訊頁。
+ * 設計決策：採 in-flow 區塊，禁止 sticky / backdrop-blur / 負 margin bleed。
+ * sticky + safe-area hack 在 iOS PWA standalone（black-translucent）下
+ * 會與滾動容器疊層互動導致頂部內容被遮擋。
+ * 設計重點：
+ * - 返回鈕採韓系 pill 造型（rounded-full + 中性底色），與 RateSelector 語彙一致
+ * - 單行麵包屑可水平捲動，最後一項截斷，避免小螢幕撐高 header
+ * - 返回按鈕保持 44px 觸控高度與清楚 focus ring
+ */
+export const pageNavHeaderTokens = {
+  root: 'mb-6',
+  row: 'flex min-h-11 min-w-0 items-center gap-2.5',
+  backButton:
+    'inline-flex min-h-11 shrink-0 cursor-pointer items-center gap-1 rounded-full bg-surface-elevated py-1.5 pl-2.5 pr-3.5 text-sm font-semibold text-text/80 transition-colors duration-200 hover:bg-primary/10 hover:text-primary active:bg-primary/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+  backIcon: 'h-4 w-4',
+  breadcrumbSlot: 'min-w-0 flex-1',
+} as const;
+
+export const breadcrumbTokens = {
+  nav: 'min-w-0',
+  list: 'no-scrollbar flex min-w-0 touch-pan-x items-center gap-2 overflow-x-auto whitespace-nowrap text-sm text-text-muted [-webkit-overflow-scrolling:touch]',
+  item: 'flex min-h-11 min-w-0 shrink-0 items-center gap-2 last:shrink',
+  separatorIcon: 'h-4 w-4 flex-shrink-0 text-text-muted',
+  current: 'block max-w-[min(52vw,28rem)] truncate font-medium text-text',
+  link: 'inline-flex min-h-11 min-w-11 items-center justify-center rounded-control px-1 transition-colors duration-200 hover:text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+} as const;
+
+/**
+ * 內容頁視覺語法 SSOT
+ *
+ * 統一 About、FAQ、Guide、首頁 SEO 區塊與幣別內容頁的頁面骨架、
+ * section eyebrow、靜態資訊卡與內容型連結語法，避免各頁各自硬編碼。
+ */
+export const contentPageTokens = {
+  shell: pageLayoutTokens.content.className,
+  intro: 'mt-3 max-w-3xl text-sm leading-7 text-text-muted sm:text-base',
+  meta: 'mt-2 text-sm text-text-muted',
+  hero: {
+    wrapper: 'mb-6 sm:mb-8',
+    title: 'mt-2 text-3xl font-bold tracking-tight text-text text-balance sm:text-4xl',
+    compactTitle: 'text-2xl font-bold leading-tight text-text text-balance sm:text-3xl md:text-4xl',
+    description: 'mt-2 text-sm leading-7 text-text-muted sm:text-base',
+    metaRow: 'mt-2 flex items-center gap-1.5 text-xs text-text-muted',
+    statusDot: 'inline-block h-1.5 w-1.5 rounded-full bg-success',
+  },
+  badges: {
+    subtle:
+      'inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-surface-elevated px-2.5 py-1 text-xs font-semibold text-primary',
+    neutral:
+      'rounded-full border border-border/70 bg-surface-elevated px-3 py-1 text-xs font-medium text-text-muted',
+  },
+  sectionHeader: {
+    row: 'mb-3 flex items-center gap-2 px-2 text-text-muted',
+    eyebrow: 'text-xs font-semibold uppercase tracking-[0.16em] text-text-muted',
+    title: 'text-xl font-bold text-text sm:text-2xl',
+  },
+  section: {
+    block: 'mb-6 sm:mb-8',
+    loose: 'mb-8 sm:mb-10',
+    stack: 'space-y-6',
+    grid2: 'grid gap-3 sm:grid-cols-2',
+    grid3: 'grid gap-3 sm:grid-cols-2 lg:grid-cols-3',
+  },
+  surfaces: {
+    quiet: 'rounded-panel border border-border/70 bg-surface-elevated p-4',
+    quietInteractive:
+      'rounded-panel border border-border/70 bg-surface p-4 transition-[background-color,border-color,color] duration-200 hover:border-primary/20 hover:bg-surface-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    emphasized: 'rounded-card border border-border/70 bg-surface p-6 shadow-soft',
+    panel: 'rounded-card border border-border/70 bg-surface p-5 shadow-card lg:p-6',
+  },
+  article: {
+    card: 'rounded-card border border-border/70 bg-surface p-4 shadow-soft sm:p-5',
+    cardLoose: 'rounded-card border border-border/70 bg-surface p-6 shadow-soft',
+    title: 'mb-3 text-xl font-bold text-text sm:text-2xl',
+    titleCompact: 'mb-2 text-base font-bold text-text sm:text-lg',
+    body: 'space-y-3 text-text-muted',
+    paragraph: 'text-sm leading-7 text-text-muted sm:text-base',
+    finePrint: 'text-xs leading-relaxed text-text-muted',
+    list: 'space-y-3 text-text-muted',
+    listItem: 'flex items-start gap-3',
+    bullet: 'mt-2 h-2.5 w-2.5 flex-shrink-0 rounded-full bg-primary',
+    numberBadge:
+      'mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-icon bg-primary/10 text-xs font-bold text-primary',
+    iconBadge:
+      'flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-icon bg-primary/10 text-primary',
+    faqStack: 'space-y-3 md:mx-auto md:max-w-3xl',
+    faqItem: 'group rounded-card border border-border/70 bg-surface shadow-soft',
+    faqSummary:
+      'flex cursor-pointer list-none items-start gap-3 rounded-card p-4 transition-colors hover:bg-surface-elevated sm:p-5',
+    faqAnswer: 'px-4 pb-4 pt-0 text-sm leading-7 text-text-muted sm:px-5 sm:pb-5',
+  },
+  callouts: {
+    warning: 'rounded-panel border border-warning/30 bg-warning/10 p-4 sm:p-5',
+    success: 'rounded-panel border border-success/20 bg-success/10 p-3',
+    danger: 'rounded-panel border border-destructive/20 bg-destructive/10 p-3',
+    neutral: 'rounded-panel border border-border/70 bg-surface p-3',
+    elevated: 'rounded-panel border border-border/70 bg-surface-elevated p-4',
+    icon: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-icon',
+    note: 'rounded-panel border border-warning/20 bg-warning/10 px-3 py-2 text-xs leading-relaxed text-text-muted',
+  },
+  result: {
+    section: 'mb-6 sm:mb-8',
+    card: 'rounded-card border border-border/70 bg-surface-elevated p-4 shadow-soft sm:p-5',
+    eyebrowRow:
+      'mb-3 flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-primary/80',
+    amountRow: 'mb-1 flex flex-wrap items-baseline gap-2',
+    sourceAmount: 'text-xs text-text-muted',
+    operator: 'text-sm text-text-muted',
+    value: 'text-2xl font-black text-primary sm:text-3xl',
+    note: 'mb-4 text-xs leading-relaxed text-text-muted',
+  },
+  table: {
+    wrapper: 'max-w-full overflow-x-auto rounded-panel border border-border/70',
+    wrapperBlock: 'mb-6 max-w-full overflow-x-auto rounded-panel border border-border/70',
+    table: 'min-w-[42rem] text-sm',
+    wideTable: 'min-w-[56rem] text-sm',
+    headRow: 'border-b border-border/70 bg-surface-elevated',
+    headCell: 'px-4 py-3 text-left font-semibold text-text',
+    body: 'divide-y divide-border/70 bg-surface',
+    cell: 'px-4 py-3 text-text',
+    mutedCell: 'px-4 py-3 text-text-muted',
+    monoCell: 'px-4 py-3 font-mono text-xs text-primary',
+  },
+  links: {
+    inline:
+      'text-primary underline underline-offset-4 decoration-primary/30 transition-colors hover:text-primary-hover',
+    pill: 'inline-flex min-h-11 items-center justify-center rounded-full border border-border/70 bg-surface-elevated px-3 py-2.5 text-xs font-semibold text-text transition-colors hover:border-primary/30 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+    tile: 'flex min-h-11 items-center gap-2 rounded-control border border-border/70 bg-surface-elevated px-3 py-2.5 text-xs font-semibold text-text transition-colors hover:border-primary/30 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    row: 'group flex items-center justify-between rounded-control border border-border/70 bg-surface px-4 py-3 transition-colors hover:border-primary/20 hover:bg-surface-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    ctaSecondary:
+      'inline-flex items-center rounded-control border border-border/70 bg-surface px-5 py-3 font-semibold text-primary transition-colors hover:border-primary/30 hover:bg-surface-elevated hover:text-primary-hover',
+  },
+  buttons: {
+    primary:
+      'inline-flex min-h-11 items-center justify-center gap-2 rounded-control bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    primaryWide:
+      'inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-control bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    dangerQuiet:
+      'inline-flex min-h-11 items-center justify-center gap-2 rounded-control border border-destructive/20 px-4 py-2.5 text-sm font-semibold text-destructive transition-colors hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+  },
+} as const;
+
+export const appPageTokens = {
+  narrowShell: 'mx-auto w-full max-w-md px-3 py-6 sm:px-5',
+  section: {
+    wrapper: 'mb-6',
+    headerRow: 'mb-3 flex items-center gap-2 px-2 text-text-muted',
+    headerText: 'text-xs font-black uppercase tracking-[0.16em]',
+  },
+  infoCard: 'rounded-card border border-border/70 bg-surface p-5 shadow-card',
+  listCard: 'overflow-hidden rounded-card border border-border/70 bg-surface shadow-card',
+  linkRow:
+    'group flex min-h-11 w-full items-center justify-between px-5 py-4 text-left transition-colors hover:bg-surface-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset',
+  statRow:
+    'flex items-center justify-between rounded-control border border-border/70 bg-surface px-4 py-3',
+  tinyMeta: 'text-xs font-semibold uppercase tracking-[0.12em] text-text-muted',
+} as const;
+
 /**
  * 單幣別頁面高度斷點佈局規範
  *
@@ -576,7 +824,7 @@ export const rateWiseLayoutTokens = {
    * [align:2026-01-29] 與 3ea33 版一致的 px/py 與 max-w
    */
   content: {
-    className: 'flex-1 flex flex-col px-3 sm:px-5 py-4 max-w-md mx-auto w-full',
+    className: 'flex-1 flex flex-col w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8',
   },
 
   section: {
@@ -585,7 +833,7 @@ export const rateWiseLayoutTokens = {
 
   /** 單幣別卡片 - 移除 flex-1 避免過度拉伸 */
   card: {
-    className: 'card p-4 flex-1',
+    className: 'card p-5 lg:p-6',
   },
 
   /**
@@ -613,7 +861,7 @@ export const multiConverterLayoutTokens = {
 
   /** 內容容器 */
   content: {
-    className: 'flex-1 flex flex-col px-3 sm:px-5 py-4 max-w-md mx-auto w-full',
+    className: 'flex-1 flex flex-col w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-8',
   },
 
   /** 主區塊 */
@@ -629,10 +877,10 @@ export const multiConverterLayoutTokens = {
   /** 更新時間區塊 */
   info: {
     wrapper: 'mt-4 flex-shrink-0',
-    titleRow: 'flex items-center gap-2 px-2 opacity-40 mb-3',
-    titleText: 'text-[10px] font-black uppercase tracking-[0.2em]',
-    card: 'card p-4',
-    text: 'text-[10px] text-center opacity-60 font-medium',
+    titleRow: contentPageTokens.sectionHeader.row,
+    titleText: contentPageTokens.sectionHeader.eyebrow,
+    card: 'card px-4 py-3',
+    text: 'text-xs text-center lg:text-left opacity-70 font-medium',
   },
 } as const;
 
@@ -691,7 +939,7 @@ export const singleConverterLayoutTokens = {
 
     /** 匯率資訊區內距 - 保持充足空間感 */
     infoPadding:
-      'pt-12 pb-6 compact:pt-10 compact:pb-5 short:pt-8 short:pb-4 tiny:pt-6 tiny:pb-3 micro:pt-5 micro:pb-2.5 nano:pt-4 nano:pb-2',
+      'pt-16 pb-6 compact:pt-16 compact:pb-5 short:pt-16 short:pb-4 tiny:pt-16 tiny:pb-3 micro:pt-16 micro:pb-2.5 nano:pt-16 nano:pb-2',
 
     /** 匯率類型按鈕容器定位 */
     rateTypeContainer:
@@ -699,7 +947,7 @@ export const singleConverterLayoutTokens = {
 
     /** 匯率類型按鈕尺寸 */
     rateTypeButton:
-      'px-2 py-0.5 text-[11px] compact:px-1.5 compact:py-0.5 compact:text-[10px] short:px-1.5 short:py-0.5 short:text-[10px] tiny:px-1 tiny:py-0.5 tiny:text-[9px] micro:px-1 micro:py-0.5 micro:text-[9px] nano:px-1 nano:py-0.5 nano:text-[9px]',
+      'px-2.5 py-1 text-xs compact:px-2 short:px-2 tiny:px-1.5 micro:px-1.5 nano:px-1.5',
 
     /** 匯率類型圖示 - nano 隱藏 */
     rateTypeIcon:
@@ -709,18 +957,17 @@ export const singleConverterLayoutTokens = {
     rateText: 'text-2xl compact:text-xl short:text-lg tiny:text-base micro:text-sm nano:text-sm',
 
     /** 次要匯率文字 */
-    rateSubText: 'text-sm short:text-xs tiny:text-xs micro:text-[10px] nano:text-[10px]',
+    rateSubText: 'text-sm short:text-xs tiny:text-xs micro:text-xs nano:text-xs',
 
     /** 趨勢圖高度 - 線性遞減 */
     chartHeight: 'h-20 compact:h-16 short:h-14 tiny:h-12 micro:h-10 nano:h-8',
 
     /** 趨勢圖懸停高度 */
-    chartHoverHeight:
-      'group-hover:h-24 compact:group-hover:h-20 short:group-hover:h-16 tiny:group-hover:h-14 micro:group-hover:h-12 nano:group-hover:h-10',
+    chartHoverHeight: '',
 
     /** 換錢所來源 badge 容器（換錢所選中時顯示） */
     exchangeShopBadge:
-      'mx-auto inline-flex max-w-full flex-wrap items-center justify-center gap-x-2 gap-y-0.5 text-[10px] font-medium leading-tight text-text-muted/60',
+      'mx-auto inline-flex max-w-full flex-wrap items-center justify-center gap-x-2 gap-y-0.5 text-xs font-medium leading-tight text-text-muted/60',
 
     /** 換錢所 badge 圖示 */
     exchangeShopBadgeIcon: 'h-3 w-3 shrink-0 text-primary/70',
@@ -792,10 +1039,12 @@ export const singleConverterLayoutTokens = {
  * @version 1.0.0
  */
 export const quickAmountButtonTokens = {
+  className:
+    'flex-shrink-0 px-3 py-1.5 rounded-compact text-sm font-semibold bg-surface-elevated text-text/70 hover:bg-primary/10 hover:text-primary active:bg-primary/20 active:text-primary transition-[background-color,color,transform] duration-200 ease-out hover:scale-[1.03] active:scale-[0.97] hover:shadow-soft active:shadow-soft micro:px-2 micro:text-xs nano:px-1.5 nano:text-xs',
   /** 基礎樣式 */
   base: {
     padding: 'px-3 py-1.5',
-    borderRadius: 'rounded-xl',
+    borderRadius: 'rounded-compact',
     typography: 'text-sm font-semibold',
   },
   /** 色彩狀態 */
@@ -815,11 +1064,11 @@ export const quickAmountButtonTokens = {
   },
   /** 微互動效果 */
   interactions: {
-    transition: 'transition-all duration-200 ease-out',
+    transition: 'transition-[background-color,color,box-shadow,transform] duration-200 ease-out',
     hoverScale: 'hover:scale-[1.03]',
     activeScale: 'active:scale-[0.97]',
-    hoverShadow: 'hover:shadow-md',
-    activeShadow: 'active:shadow-sm',
+    hoverShadow: 'hover:shadow-soft',
+    activeShadow: 'active:shadow-soft',
   },
   /** 觸覺回饋時長 (毫秒) */
   hapticDuration: 30,
@@ -911,8 +1160,8 @@ export const typographyTokens = {
 
   /** 字型大小比例表 */
   fontSize: {
-    /** 10px - 極小標籤 */
-    '2xs': { size: '0.625rem', lineHeight: '0.875rem', class: 'text-[10px]' },
+    /** 12px - 最小可讀標籤；保留 2xs key 作為舊呼叫相容別名 */
+    '2xs': { size: '0.75rem', lineHeight: '1rem', class: 'text-xs' },
     /** 12px - 小標籤、說明文字 */
     xs: { size: '0.75rem', lineHeight: '1rem', class: 'text-xs' },
     /** 14px - 次要內容 */
@@ -1125,9 +1374,10 @@ export const buttonTokens = {
   base: {
     display: 'inline-flex items-center justify-center',
     typography: 'font-semibold',
-    border: 'rounded-2xl',
+    border: 'rounded-control',
     cursor: 'cursor-pointer',
-    transition: 'transition-all duration-200 ease-out',
+    transition:
+      'transition-[background-color,border-color,color,box-shadow,transform] duration-200 ease-out',
     focus:
       'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
     disabled: 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
@@ -1162,9 +1412,9 @@ export const buttonTokens = {
   variants: {
     /** 主要按鈕 - 高視覺權重 */
     primary: {
-      default: 'bg-primary text-white',
-      hover: 'hover:bg-primary-hover hover:shadow-lg hover:-translate-y-0.5',
-      active: 'active:translate-y-0 active:shadow-md',
+      default: 'bg-primary text-primary-foreground',
+      hover: 'hover:bg-primary-hover hover:shadow-floating hover:-translate-y-0.5',
+      active: 'active:translate-y-0 active:shadow-soft',
     },
     /** 次要按鈕 - 中視覺權重 */
     secondary: {
@@ -1180,25 +1430,38 @@ export const buttonTokens = {
     },
     /** 危險按鈕 - 警示操作 */
     danger: {
-      default: 'bg-destructive text-white',
-      hover: 'hover:bg-destructive-hover hover:shadow-lg hover:-translate-y-0.5',
-      active: 'active:translate-y-0 active:shadow-md',
+      default: 'bg-destructive text-destructive-foreground',
+      hover: 'hover:bg-destructive-hover hover:shadow-floating hover:-translate-y-0.5',
+      active: 'active:translate-y-0 active:shadow-soft',
     },
   },
 
   /** 完整類別組合 - 直接複製使用 */
   patterns: {
     primaryMd:
-      'inline-flex items-center justify-center font-semibold rounded-2xl cursor-pointer transition-all duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none px-4 py-2 text-base h-10 gap-2 bg-primary text-white hover:bg-primary-hover hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:shadow-md',
+      'inline-flex items-center justify-center font-semibold rounded-control cursor-pointer transition-[background-color,border-color,color,box-shadow,transform] duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none px-4 py-2 text-base h-10 gap-2 bg-primary text-primary-foreground hover:bg-primary-hover hover:shadow-floating hover:-translate-y-0.5 active:translate-y-0 active:shadow-soft',
     secondaryMd:
-      'inline-flex items-center justify-center font-semibold rounded-2xl cursor-pointer transition-all duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none px-4 py-2 text-base h-10 gap-2 bg-surface-elevated text-text border border-border hover:bg-surface hover:border-primary/30 hover:text-primary active:bg-surface-sunken',
+      'inline-flex items-center justify-center font-semibold rounded-control cursor-pointer transition-[background-color,border-color,color,box-shadow,transform] duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none px-4 py-2 text-base h-10 gap-2 bg-surface-elevated text-text border border-border hover:bg-surface hover:border-primary/30 hover:text-primary active:bg-surface-sunken',
     ghostMd:
-      'inline-flex items-center justify-center font-semibold rounded-2xl cursor-pointer transition-all duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none px-4 py-2 text-base h-10 gap-2 bg-transparent text-text hover:bg-surface-elevated hover:text-primary active:bg-surface-sunken',
+      'inline-flex items-center justify-center font-semibold rounded-control cursor-pointer transition-[background-color,border-color,color,box-shadow,transform] duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none px-4 py-2 text-base h-10 gap-2 bg-transparent text-text hover:bg-surface-elevated hover:text-primary active:bg-surface-sunken',
     dangerMd:
-      'inline-flex items-center justify-center font-semibold rounded-2xl cursor-pointer transition-all duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none px-4 py-2 text-base h-10 gap-2 bg-destructive text-white hover:bg-destructive-hover hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:shadow-md',
+      'inline-flex items-center justify-center font-semibold rounded-control cursor-pointer transition-[background-color,border-color,color,box-shadow,transform] duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none px-4 py-2 text-base h-10 gap-2 bg-destructive text-destructive-foreground hover:bg-destructive-hover hover:shadow-floating hover:-translate-y-0.5 active:translate-y-0 active:shadow-soft',
   },
 } as const;
 
+export const feedbackSurfaceTokens = {
+  pageCenter: 'flex min-h-dvh items-center justify-center bg-background p-4 sm:p-6',
+  card: 'w-full max-w-lg rounded-card border border-border/70 bg-surface p-6 text-center shadow-floating sm:p-8',
+  icon: 'mx-auto text-destructive',
+  title: 'mt-4 text-2xl font-bold text-text',
+  description: 'mb-6 mt-2 text-text-muted',
+  actionButton:
+    'inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-control bg-primary px-4 py-3 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+  dangerActionButton:
+    'inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-control bg-destructive px-4 py-3 text-sm font-semibold text-destructive-foreground transition-colors hover:bg-destructive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+  detailsPanel: 'rounded-panel border border-danger-light bg-danger-bg p-3',
+} as const;
+
 /**
  * PWA 通知設計規範 (SSOT)
  *
@@ -1206,9 +1469,9 @@ export const buttonTokens = {
  * Material Design snackbar 風格，支援頂部與底部定位。
  *
  * 設計原則：
- * - 統一品牌漸變背景（藍-靛-紫）
- * - 透過圖標顏色區分狀態（更新=品牌色、離線=警告色）
- * - 一致的裝飾光暈、按鈕樣式、動畫效果
+ * - 使用安靜的 surface 浮層，避免品牌漸層背景
+ * - 透過圖標顏色區分狀態（更新=主色、離線=警告色）
+ * - 共享一致的動作、邊框與微弱裝飾語法
  *
  * @see src/components/UpdatePrompt.tsx
  * @see src/components/OfflineIndicator.tsx
@@ -1232,49 +1495,55 @@ export const notificationTokens = {
   /** 內距 */
   padding: 'px-6 py-3.5',
   /** 圓角（與 card / button 統一） */
-  borderRadius: 'rounded-2xl',
-  /** 陰影（統一 shadow-card token） */
-  shadow: 'shadow-card shadow-brand-shadow/20',
+  borderRadius: 'rounded-panel',
+  /** 陰影（統一較安靜的浮層語法） */
+  shadow: 'shadow-floating',
 
-  /** 背景漸變（統一品牌風格） */
+  /** 背景與邊框 */
   background: {
-    /** 品牌漸變 - 淡藍-淡靛-淡紫 */
-    brand: 'bg-gradient-to-r from-brand-from via-brand-via to-brand-to',
-    /** 邊框 - 品牌色 */
-    brandBorder: 'border border-brand-border/60',
+    brand: 'bg-surface',
+    brandBorder: 'border border-border/70',
   },
 
   /** 裝飾光暈 */
   decoration: {
-    size: 'w-16 h-16',
-    blur: 'blur-2xl',
+    size: 'w-14 h-14',
+    blur: 'blur-xl',
     /** 品牌色光暈（UpdatePrompt） */
-    topRight: 'bg-brand-icon-from/40',
-    bottomLeft: 'bg-brand-decoration/40',
+    topRight: 'bg-primary/10',
+    bottomLeft: 'bg-accent/10',
     /** 警告色光暈（OfflineIndicator） */
-    offlineTopRight: 'bg-warning/20',
-    offlineBottomLeft: 'bg-warning/10',
+    offlineTopRight: 'bg-warning/12',
+    offlineBottomLeft: 'bg-warning/8',
   },
 
   /** 狀態圖標 */
   icon: {
-    container: 'w-8 h-8 rounded-xl',
+    container: 'w-8 h-8 rounded-icon border border-border/60 bg-surface-elevated',
     svg: 'w-5 h-5',
     strokeWidth: 2.5,
-    /** 品牌漸變 - UpdatePrompt 圖標背景 */
-    brandGradient: 'bg-gradient-to-br from-brand-icon-from to-brand-icon-to',
-    /** 警告漸變 - OfflineIndicator 圖標背景 */
-    warningGradient: 'bg-gradient-to-br from-warning-light to-warning',
+    /** 品牌圖標底色（UpdatePrompt） */
+    brandGradient: 'bg-surface-elevated text-primary',
+    /** 警告圖標底色（OfflineIndicator） */
+    warningGradient: 'bg-warning/15 text-warning',
   },
 
   /** 文字顏色 */
   text: {
     /** 品牌色標題（UpdatePrompt） */
-    brandTitle: 'text-brand-text-dark',
-    brandDescription: 'text-brand-text',
+    brandTitle: 'text-text',
+    brandDescription: 'text-text-muted',
     /** 警告色標題（OfflineIndicator） */
     warningTitle: 'text-warning',
-    warningDescription: 'text-neutral-text-secondary',
+    warningDescription: 'text-text-muted',
+  },
+
+  /** 通知類操作按鈕 */
+  actions: {
+    primary:
+      'pointer-events-auto inline-flex items-center justify-center rounded-full border border-border/70 bg-surface-elevated px-3 py-1.5 text-xs font-medium text-text shadow-soft transition-[color,background-color,border-color,transform,opacity] duration-200 ease-out hover:border-primary/30 hover:bg-surface hover:text-primary active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+    text: 'inline-flex items-center rounded-compact px-1 text-xs text-text-muted transition-colors duration-150 hover:text-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+    icon: 'pointer-events-auto rounded-full border border-border/70 bg-surface-elevated p-1.5 text-text-muted transition-[color,background-color,border-color,transform] duration-200 ease-out hover:border-primary/20 hover:bg-surface hover:text-text active:scale-[0.95] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
   },
 
   /** 時序 */
diff --git a/apps/ratewise/src/config/generated/build-time-rates.json b/apps/ratewise/src/config/generated/build-time-rates.json
index bdaa7a205..a99909735 100644
--- a/apps/ratewise/src/config/generated/build-time-rates.json
+++ b/apps/ratewise/src/config/generated/build-time-rates.json
@@ -1,137 +1,137 @@
 {
-  "timestamp": "2026-05-10T20:33:05.631Z",
-  "updateTime": "2026/05/11 04:33:05",
+  "timestamp": "2026-05-13T05:36:09.837Z",
+  "updateTime": "2026/05/13 13:36:09",
   "source": "Taiwan Bank (臺灣銀行牌告匯率)",
   "sourceUrl": "https://rate.bot.com.tw/xrt",
   "base": "TWD",
   "rates": {
-    "USD": 31.695,
-    "HKD": 4.062,
-    "GBP": 43.69,
-    "AUD": 23.15,
-    "CAD": 23.41,
-    "SGD": 25.15,
-    "CHF": 40.84,
-    "JPY": 0.2045,
-    "NZD": 19.05,
-    "THB": 1.0373,
-    "PHP": 0.5855,
-    "IDR": 0.00218,
-    "EUR": 37.57,
-    "KRW": 0.02366,
-    "VND": 0.00136,
-    "MYR": 8.514,
-    "CNY": 4.691
+    "USD": 31.795,
+    "HKD": 4.074,
+    "GBP": 43.61,
+    "AUD": 23.2,
+    "CAD": 23.44,
+    "SGD": 25.12,
+    "CHF": 40.77,
+    "JPY": 0.2034,
+    "NZD": 19.1,
+    "THB": 1.0368,
+    "PHP": 0.5787,
+    "IDR": 0.00213,
+    "EUR": 37.52,
+    "KRW": 0.02327,
+    "VND": 0.00138,
+    "MYR": 8.528,
+    "CNY": 4.707
   },
   "details": {
     "USD": {
       "name": "美金",
       "spot": {
-        "buy": 31.35,
-        "sell": 31.5
+        "buy": 31.475,
+        "sell": 31.575
       },
       "cash": {
-        "buy": 31.025,
-        "sell": 31.695
+        "buy": 31.125,
+        "sell": 31.795
       }
     },
     "HKD": {
       "name": "港幣",
       "spot": {
-        "buy": 3.979,
-        "sell": 4.049
+        "buy": 3.996,
+        "sell": 4.056
       },
       "cash": {
-        "buy": 3.858,
-        "sell": 4.062
+        "buy": 3.87,
+        "sell": 4.074
       }
     },
     "GBP": {
       "name": "英鎊",
       "spot": {
-        "buy": 42.465,
-        "sell": 43.095
+        "buy": 42.5,
+        "sell": 42.9
       },
       "cash": {
-        "buy": 41.57,
-        "sell": 43.69
+        "buy": 41.49,
+        "sell": 43.61
       }
     },
     "AUD": {
       "name": "澳幣",
       "spot": {
-        "buy": 22.585,
-        "sell": 22.93
+        "buy": 22.71,
+        "sell": 22.91
       },
       "cash": {
-        "buy": 22.37,
-        "sell": 23.15
+        "buy": 22.42,
+        "sell": 23.2
       }
     },
     "CAD": {
       "name": "加拿大幣",
       "spot": {
-        "buy": 22.83,
-        "sell": 23.16
+        "buy": 22.93,
+        "sell": 23.13
       },
       "cash": {
-        "buy": 22.5,
-        "sell": 23.41
+        "buy": 22.53,
+        "sell": 23.44
       }
     },
     "SGD": {
       "name": "新加坡幣",
       "spot": {
-        "buy": 24.71,
-        "sell": 24.93
+        "buy": 24.7,
+        "sell": 24.88
       },
       "cash": {
-        "buy": 24.24,
-        "sell": 25.15
+        "buy": 24.21,
+        "sell": 25.12
       }
     },
     "CHF": {
       "name": "瑞士法郎",
       "spot": {
         "buy": 40.25,
-        "sell": 40.64
+        "sell": 40.5
       },
       "cash": {
-        "buy": 39.64,
-        "sell": 40.84
+        "buy": 39.57,
+        "sell": 40.77
       }
     },
     "JPY": {
       "name": "日圓",
       "spot": {
-        "buy": 0.1985,
-        "sell": 0.2035
+        "buy": 0.1979,
+        "sell": 0.2019
       },
       "cash": {
-        "buy": 0.1917,
-        "sell": 0.2045
+        "buy": 0.1906,
+        "sell": 0.2034
       }
     },
     "NZD": {
       "name": "紐元",
       "spot": {
-        "buy": 18.53,
+        "buy": 18.63,
         "sell": 18.83
       },
       "cash": {
-        "buy": 18.2,
-        "sell": 19.05
+        "buy": 18.25,
+        "sell": 19.1
       }
     },
     "THB": {
       "name": "泰銖",
       "spot": {
-        "buy": 0.9577,
-        "sell": 1.0037
+        "buy": 0.9602,
+        "sell": 1.0002
       },
       "cash": {
-        "buy": 0.8473,
-        "sell": 1.0373
+        "buy": 0.8468,
+        "sell": 1.0368
       }
     },
     "PHP": {
@@ -141,8 +141,8 @@
         "sell": null
       },
       "cash": {
-        "buy": 0.4535,
-        "sell": 0.5855
+        "buy": 0.4467,
+        "sell": 0.5787
       }
     },
     "IDR": {
@@ -152,19 +152,19 @@
         "sell": null
       },
       "cash": {
-        "buy": 0.00148,
-        "sell": 0.00218
+        "buy": 0.00143,
+        "sell": 0.00213
       }
     },
     "EUR": {
       "name": "歐元",
       "spot": {
-        "buy": 36.745,
-        "sell": 37.345
+        "buy": 36.8,
+        "sell": 37.2
       },
       "cash": {
-        "buy": 36.23,
-        "sell": 37.57
+        "buy": 36.18,
+        "sell": 37.52
       }
     },
     "KRW": {
@@ -174,8 +174,8 @@
         "sell": null
       },
       "cash": {
-        "buy": 0.01976,
-        "sell": 0.02366
+        "buy": 0.01937,
+        "sell": 0.02327
       }
     },
     "VND": {
@@ -185,8 +185,8 @@
         "sell": null
       },
       "cash": {
-        "buy": 0.00095,
-        "sell": 0.00136
+        "buy": 0.00097,
+        "sell": 0.00138
       }
     },
     "MYR": {
@@ -196,19 +196,19 @@
         "sell": null
       },
       "cash": {
-        "buy": 6.989,
-        "sell": 8.514
+        "buy": 7.003,
+        "sell": 8.528
       }
     },
     "CNY": {
       "name": "人民幣",
       "spot": {
-        "buy": 4.596,
-        "sell": 4.656
+        "buy": 4.617,
+        "sell": 4.667
       },
       "cash": {
-        "buy": 4.529,
-        "sell": 4.691
+        "buy": 4.545,
+        "sell": 4.707
       }
     }
   }
diff --git a/apps/ratewise/src/config/seo-metadata.ts b/apps/ratewise/src/config/seo-metadata.ts
index a50b9e5eb..8b6f92d3f 100644
--- a/apps/ratewise/src/config/seo-metadata.ts
+++ b/apps/ratewise/src/config/seo-metadata.ts
@@ -151,7 +151,7 @@ const ASSET_VERSION = `v=${BUILD_TIME.replace(/[-T:Z.]/g, '').slice(0, 8) || 'de
 export const DEFAULT_LOCALE = 'zh-TW' as const;
 export const SEO_INDEXABLE_LOCALES = [DEFAULT_LOCALE] as const;
 export const OG_IMAGE_ALT = `${APP_INFO.name} 匯率轉換器分享圖片` as const;
-export const DEFAULT_DESCRIPTION = `${APP_INFO.shortName} 是台灣最精準的匯率換算工具，顯示臺灣銀行牌告的實際買入賣出價（非中間價），讓你換匯前清楚知道要付多少台幣。支援 ${SUPPORTED_CURRENCY_COUNT} 種貨幣即時換算、現金/即期匯率切換、7-30 天歷史趨勢圖、PWA 離線使用，每 5 分鐘自動同步，免費無廣告無註冊。`;
+export const DEFAULT_DESCRIPTION = `${APP_INFO.shortName} 以臺灣銀行牌告買賣價為核心，顯示實際買入賣出價（非中間價），協助台灣用戶在換匯前參考估算接近臨櫃牌告的台幣成本。支援 ${SUPPORTED_CURRENCY_COUNT} 種貨幣換算、現金/即期匯率切換、7-30 天歷史趨勢圖、PWA 離線使用，約每 5 分鐘檢查更新，免費無廣告無註冊。`;
 export const DEFAULT_KEYWORDS = [
   APP_INFO.subtitle,
   APP_INFO.shortName,
@@ -199,10 +199,10 @@ export const SITE_SEO = {
     category: 'FinanceApplication',
     browserRequirements: 'Requires JavaScript',
     featureList: [
-      '顯示實際買賣價（非中間價）——換匯金額更精準',
+      '顯示實際買賣價（非中間價）——估算更接近牌告換匯成本',
       '即時匯率查詢（臺灣銀行牌告匯率）',
       '現金與即期匯率切換（適合不同換匯情境）',
-      '單幣別精準換算',
+      '單幣別情境換算',
       '多幣別同時比較',
       '計算機鍵盤快速輸入',
       '快速金額按鈕',
@@ -498,7 +498,7 @@ export function buildCurrencyConversionServiceJsonLd(): JsonLdBlock {
     featureList: [
       '台灣銀行牌告匯率（現金/即期四種報價）',
       `${SUPPORTED_CURRENCY_COUNT} 種貨幣即時換算`,
-      '每 5 分鐘自動同步',
+      '約每 5 分鐘檢查更新',
       'PWA 離線使用',
       '匯率歷史趨勢圖（7-30 天）',
     ],
@@ -828,7 +828,7 @@ export function buildFaqPageJsonLd(faqEntries: readonly FAQEntry[], maxItems = 5
 export const HOMEPAGE_FAQ_CONTENT = [
   {
     question: `${APP_INFO.shortName} 和其他匯率工具有什麼不同？`,
-    answer: `多數匯率工具顯示「中間價」（買賣均值），並非銀行實際換匯報價。${APP_INFO.shortName} 直接顯示臺灣銀行牌告的現金與即期買賣四種報價，讓您換匯前就知道真正要付多少台幣。以日圓為例，中間價與賣出價差約 1～3%，換 10 萬日圓大約差 1,500～3,000 元台幣。`,
+    answer: `多數匯率工具顯示「中間價」（買賣均值），並非銀行實際換匯報價。${APP_INFO.shortName} 直接顯示臺灣銀行牌告的現金與即期買賣四種報價，讓您換匯前先估算接近臨櫃牌告的台幣成本。以日圓為例，中間價與賣出價差約 1～3%，換 10 萬日圓大約差 1,500～3,000 元台幣。`,
   },
   {
     question: '支援哪些貨幣？',
@@ -841,12 +841,12 @@ export const HOMEPAGE_FAQ_CONTENT = [
   {
     question: '匯率多久更新一次？',
     answer:
-      '匯率數據每 5 分鐘自動同步臺灣銀行最新牌告匯率，畫面會顯示最近更新時間。您也可以在首頁下拉重新整理以手動同步。',
+      '匯率數據會排程檢查臺灣銀行最新牌告匯率並同步，畫面會顯示最近更新時間。您也可以在首頁下拉重新整理以手動同步。',
   },
   {
     question: '單幣別和多幣別模式有什麼差別？',
     answer:
-      '單幣別模式適合精準換算一組貨幣對，可查看詳細買賣價與趨勢圖。多幣別模式可同時查看一個基準貨幣對所有支援貨幣的即時換算結果，適合旅遊前快速比價。',
+      '單幣別模式適合換算一組貨幣對，可查看詳細買賣價與趨勢圖。多幣別模式可同時查看一個基準貨幣對所有支援貨幣的即時換算結果，適合旅遊前快速比價。',
   },
   {
     question: '支援哪些介面語言？',
@@ -901,7 +901,7 @@ export const HOMEPAGE_SEO = {
   answerCapsule: [
     {
       question: `${APP_INFO.shortName} 顯示的是台銀哪種匯率？`,
-      answer: `${APP_INFO.shortName} 顯示臺灣銀行牌告的實際買入與賣出價（現金與即期各兩種），不是銀行間中間價。你拿台幣換外幣時看「銀行賣出價」，把外幣換回台幣時看「銀行買入價」，每 5 分鐘自動同步。`,
+      answer: `${APP_INFO.shortName} 顯示臺灣銀行牌告的實際買入與賣出價（現金與即期各兩種），不是銀行間中間價。你拿台幣換外幣時看「銀行賣出價」，把外幣換回台幣時看「銀行買入價」；資料會排程檢查並同步，實際時間依來源與 CDN 而定。`,
     },
     {
       question: '換匯前為什麼要看賣出價，不看中間價？',
@@ -924,11 +924,11 @@ export const HOMEPAGE_SEO = {
     buildCurrencyConversionServiceJsonLd(),
   ],
   content: {
-    eyebrow: '臺灣銀行牌告匯率 · 每 5 分鐘同步 · 顯示實際買賣價',
+    eyebrow: '臺灣銀行牌告匯率 · 排程同步 · 顯示實際買賣價',
     heading: `${APP_INFO.name} 即時匯率換算`,
-    intro: `顯示臺灣銀行牌告的實際買入賣出價（不是中間價），讓你換匯前就知道真正要付多少台幣。支援台幣、美元、日圓、韓元、歐元等 ${SUPPORTED_CURRENCY_COUNT} 種貨幣，每 5 分鐘自動同步，適合出國旅遊、海外付款與跨境報價前快速比價。`,
+    intro: `顯示臺灣銀行牌告的實際買入賣出價（不是中間價），換匯前先參考估算接近臨櫃牌告的台幣成本。支援台幣、美元、日圓、韓元、歐元等 ${SUPPORTED_CURRENCY_COUNT} 種貨幣，約每 5 分鐘檢查更新，適合出國旅遊、海外付款與跨境報價前快速比價。`,
     highlights: [
-      '顯示實際買賣價：臺灣銀行牌告匯率的現金與即期買入賣出四種報價，不是中間價——換匯金額更精準。',
+      '顯示實際買賣價：臺灣銀行牌告匯率的現金與即期買入賣出四種報價，不是中間價，方便估算接近牌告的換匯成本。',
       `支援 ${SUPPORTED_CURRENCY_COUNT} 種貨幣，提供計算機快速輸入、收藏管理、拖曳排序與換算歷史。`,
       '6 種主題風格、4 語言介面（繁中／英／日／韓），PWA 可離線使用，重新連線自動同步。',
     ],
@@ -967,7 +967,7 @@ export const FAQ_PAGE_ENTRIES = [
   },
   {
     question: '匯率數據來源是什麼？',
-    answer: `${APP_INFO.shortName} 的匯率資料來源為臺灣銀行官方牌告匯率，每 5 分鐘自動同步一次，涵蓋現金與即期買入賣出價四種報價。`,
+    answer: `${APP_INFO.shortName} 的匯率資料來源為臺灣銀行官方牌告匯率，系統會排程檢查並同步，涵蓋現金與即期買入賣出價四種報價。實際更新時間依臺灣銀行資料、GitHub Actions 佇列與 CDN 快取而定。`,
   },
   {
     question: '現金匯率和即期匯率有什麼差別？',
@@ -1004,7 +1004,7 @@ export const FAQ_PAGE_ENTRIES = [
   {
     question: '匯率更新頻率如何？',
     answer:
-      '匯率數據每 5 分鐘自動更新一次，畫面會顯示最近更新時間。您也可以在首頁下拉重新整理（Pull to Refresh）以手動同步最新牌告資料。',
+      '匯率數據約每 5 分鐘檢查更新，畫面會顯示最近更新時間。您也可以在首頁下拉重新整理（Pull to Refresh）以手動同步最新牌告資料；實際新鮮度依來源與 CDN 而定。',
   },
   {
     question: `如何安裝 ${APP_INFO.shortName} 到手機桌面？`,
@@ -1026,7 +1026,7 @@ export const FAQ_PAGE_ENTRIES = [
   },
   {
     question: '刷卡匯率跟台銀牌告匯率一樣嗎？',
-    answer: `不一樣，兩者是完全不同的匯率體系。刷卡匯率由 Visa 或 Mastercard 等卡組織決定清算匯率，再加上發卡銀行收取的海外手續費（通常約 1.5%）；若商家啟用 DCC（動態貨幣轉換）還會再加 3～18% 匯差。台銀牌告匯率則是臺灣銀行每日公告的現金與即期買賣報價，適用於臨櫃換鈔或外幣帳戶匯款，與刷卡完全無關。${APP_INFO.shortName} 提供的是台銀牌告匯率，幫助您換匯前精確估算所需金額；刷卡費用估算建議參考您的發卡銀行公告的海外手續費率。`,
+    answer: `不一樣，兩者是完全不同的匯率體系。刷卡匯率由 Visa 或 Mastercard 等卡組織決定清算匯率，再加上發卡銀行收取的海外手續費（通常約 1.5%）；若商家啟用 DCC（動態貨幣轉換）還會再加 3～18% 匯差。台銀牌告匯率則是臺灣銀行每日公告的現金與即期買賣報價，適用於臨櫃換鈔或外幣帳戶匯款，與刷卡完全無關。${APP_INFO.shortName} 提供的是台銀牌告匯率，幫助您換匯前參考估算所需金額；刷卡費用估算建議參考您的發卡銀行公告的海外手續費率。`,
   },
   {
     question: '去韓國前要先換多少韓幣？',
@@ -1221,7 +1221,7 @@ export const OPEN_DATA_PAGE_FAQ = [
   },
   {
     question: 'jsDelivr CDN 和 GitHub Raw 端點有何差異？',
-    answer: `jsDelivr CDN（建議）：全球 PoP 節點加速，無明確請求上限，支援 ETag 條件式請求（瀏覽器可讀取 ETag，實作 If-None-Match 省流量）。GitHub Actions 每次推送 data 分支後自動呼叫 jsDelivr Purge API，CDN 快取立即失效，實際新鮮度約 5 分鐘。GitHub Raw（備援）：無快取，每次請求直接取得最新版本，但每小時限 60 次請求，CORS 不暴露 ETag，瀏覽器端無法使用條件式請求。`,
+    answer: `jsDelivr CDN（建議）：全球 PoP 節點加速，無明確請求上限；GitHub Actions 每次推送 data 分支後自動呼叫 jsDelivr Purge API，CDN 快取立即失效，實際新鮮度約 5 分鐘。GitHub Raw（備援）：無快取，每次請求直接取得最新版本，但每小時限 60 次請求。瀏覽器端建議以 HTTP cache 搭配 client 端 5 分鐘快取控制重複請求。`,
   },
   {
     question: '有備援端點嗎？',
@@ -1298,7 +1298,7 @@ export const OPEN_DATA_PAGE_SEO = {
           'curl',
           'fetch',
         ],
-        articleBody: `${APP_INFO.shortName} 提供台灣銀行牌告匯率的開放 JSON 資料，無需 API Key，免費使用。主要端點透過 jsDelivr CDN 加速，備援端點透過 GitHub Raw。支援最新匯率（每 5 分鐘更新）與歷史匯率查詢，涵蓋 ${SUPPORTED_CURRENCY_COUNT} 種貨幣的現金與即期四種報價。`,
+        articleBody: `${APP_INFO.shortName} 提供台灣銀行牌告匯率的開放 JSON 資料，無需 API Key，免費使用。主要端點透過 jsDelivr CDN 加速，備援端點透過 GitHub Raw。支援最新匯率（約每 5 分鐘檢查更新）與歷史匯率查詢，涵蓋 ${SUPPORTED_CURRENCY_COUNT} 種貨幣的現金與即期四種報價。`,
         speakableCssSelectors: ['h1', 'h3'],
         proficiencyLevel: 'Beginner',
         dependencies: ['HTTP', 'JSON', 'curl 或 fetch'],
@@ -1311,7 +1311,7 @@ export const ABOUT_PAGE_FAQ = [
   {
     question: '匯率數據來源是什麼？',
     answer:
-      '資料來源為臺灣銀行官方牌告匯率，每 5 分鐘自動同步，涵蓋現金買入、現金賣出、即期買入、即期賣出四種報價。',
+      '資料來源為臺灣銀行官方牌告匯率，系統排程檢查並同步，涵蓋現金買入、現金賣出、即期買入、即期賣出四種報價。',
   },
   {
     question: '免費使用嗎？需要帳號或有廣告嗎？',
@@ -1321,7 +1321,7 @@ export const ABOUT_PAGE_FAQ = [
   {
     question: '和一般匯率 App 有什麼不同？',
     answer:
-      '一般工具顯示中間價（買賣均值），本工具顯示臺灣銀行牌告的實際現金與即期四種報價，讓您換匯前就知道真正要付多少台幣。',
+      '一般工具顯示中間價（買賣均值），本工具顯示臺灣銀行牌告的實際現金與即期四種報價，讓您換匯前先估算接近臨櫃牌告的台幣成本。',
   },
   {
     question: '如何聯絡開發者？',
@@ -1339,7 +1339,7 @@ export const ABOUT_PAGE_FAQ = [
   {
     question: `${APP_INFO.shortName} 是否支援 AI 搜尋引擎與 LLM 引用？`,
     answer:
-      'robots.txt 明確允許 Googlebot 讀取；Googlebot 是 Google Search 與 AI Overviews 的主要爬取控制。AI crawler 分層另允許多種主流 AI 爬蟲（GPTBot、ClaudeBot、PerplexityBot、GrokBot、DeepSeekBot、MistralBot 等共 39+ 個）；Google-Extended 則作為 Gemini / Vertex 訓練與 grounding 的控制 token。站點另提供 llms.txt、llms-full.txt 與 openapi.json，讓 AI Agent 可理解頁面架構並呼叫即時匯率 API。FAQ 文案中的匯差數字採雙幣標示（外幣 + 台幣），針對 LLM 引用語意設計，確保 AI 回答換匯問題時能引用精確數字而非中間價。',
+      'robots.txt 明確允許 Googlebot 讀取；Googlebot 是 Google Search 與 AI Overviews 的主要爬取控制。AI crawler 分層另允許多種主流 AI 爬蟲（GPTBot、ClaudeBot、PerplexityBot、GrokBot、DeepSeekBot、MistralBot 等共 39+ 個）；Google-Extended 則作為 Gemini / Vertex 訓練與 grounding 的控制 token。站點另提供 llms.txt、llms-full.txt 與 openapi.json，讓 AI Agent 可理解頁面架構並呼叫即時匯率 API。FAQ 文案中的匯差數字採雙幣標示（外幣 + 台幣），降低回答時混用中間價與牌告價的風險。',
   },
 ] as const satisfies readonly FAQEntry[];
 
@@ -1385,7 +1385,7 @@ export const ABOUT_PAGE_SEO = {
           '匯差計算',
           'LLM 引用',
         ],
-        articleBody: `${APP_INFO.name}是專為台灣用戶設計的即時匯率 PWA 工具，資料來源為臺灣銀行官方牌告匯率，支援 ${SUPPORTED_CURRENCY_COUNT} 種貨幣換算與離線使用。完全免費、無廣告，資料每 5 分鐘自動同步，涵蓋現金買入、現金賣出、即期買入、即期賣出四種報價。各頁面部署 schema.org JSON-LD 結構化標記，採用 SSG 靜態預渲染確保爬蟲可讀性，匯差數據每日自動雙重驗證更新。`,
+        articleBody: `${APP_INFO.name}是專為台灣用戶設計的即時匯率 PWA 工具，資料來源為臺灣銀行官方牌告匯率，支援 ${SUPPORTED_CURRENCY_COUNT} 種貨幣換算與離線使用。完全免費、無廣告，資料排程檢查並同步，涵蓋現金買入、現金賣出、即期買入、即期賣出四種報價。各頁面部署 schema.org JSON-LD 結構化標記，採用 SSG 靜態預渲染提供爬蟲可讀內容，匯差數據每日自動驗證更新。`,
         speakableCssSelectors: ['h1', 'h3'],
       },
     ),
@@ -1451,7 +1451,7 @@ export const SELL_RATE_VS_MID_RATE_PAGE = {
     { name: `${APP_INFO.shortName} 首頁`, item: '/' },
     { name: '賣出價與中間價差異', item: '/sell-rate-vs-mid-rate/' },
   ],
-  heading: '賣出價比中間價更接近你真正要付的台幣',
+  heading: '賣出價比中間價更接近臨櫃換匯成本',
   intro:
     '多數匯率網站與金融 App 主打中間價，適合用來觀察市場方向，但不等於你去銀行買外幣時的實際成本。對台灣使用者來說，真正影響換匯預算的通常是銀行賣出價，尤其是臨櫃換現鈔時的現金賣出價。',
   highlights: [
@@ -1579,7 +1579,7 @@ export const CASH_VS_SPOT_RATE_PAGE = {
       title: `${APP_INFO.shortName} 為什麼要同時顯示兩種匯率`,
       paragraphs: [
         `同一組幣別在不同換匯方式下，成本可能差很多。${APP_INFO.shortName} 把現金與即期匯率分開顯示，讓你在同一頁面內對照情境，而不是只給一個模糊的單一價格。`,
-        '對旅遊用戶來說，這能避免出發前看錯欄位；對跨境付款或外幣帳戶使用者來說，也能更精準抓到匯款與換匯成本。',
+        '對旅遊用戶來說，這能避免出發前看錯欄位；對跨境付款或外幣帳戶使用者來說，也能更接近實際情境估算匯款與換匯成本。',
       ],
     },
   ],
@@ -1753,19 +1753,19 @@ export const APP_ONLY_PAGE_SEO = {
   multi: {
     title: `多幣別同時換算 - 一次比較 ${SUPPORTED_CURRENCY_COUNT} 種即時匯率`,
     description: `${APP_INFO.shortName} 多幣別同時換算功能，一次查看所有支援貨幣的即時匯率換算結果，適合旅遊換匯比價與跨境貿易報價。`,
-    pathname: '/multi',
+    pathname: '/multi/',
     robots: 'noindex, follow',
   },
   favorites: {
     title: '收藏貨幣與換算歷史記錄 - 快速存取常用匯率',
     description: `${APP_INFO.shortName} 收藏管理與換算歷史記錄頁面，支援快速回到主換算器並重新查看常用貨幣。`,
-    pathname: '/favorites',
+    pathname: '/favorites/',
     robots: 'noindex, follow',
   },
   settings: {
     title: '應用程式設定 - 介面風格切換與語言偏好管理',
     description: `${APP_INFO.shortName} 設定頁面，提供介面風格、語言偏好與資料管理等應用程式個人化選項。`,
-    pathname: '/settings',
+    pathname: '/settings/',
     robots: 'noindex, follow',
   },
   seoTech: {
@@ -1808,7 +1808,7 @@ export const APP_ONLY_PAGE_SEO = {
           '搜尋可見性',
           `${APP_INFO.shortName} 技術架構`,
         ],
-        articleBody: `${APP_INFO.shortName} 採用現代化 SEO 最佳實踐，包括預先渲染靜態 HTML（SSG）以提升首頁效能與可爬性、完整的 JSON-LD Schema 標記（涵蓋 Article、Organization、BreadcrumbList、FAQPage、SoftwareApplication 等多種類型）以強化搜尋引擎與 AI 系統的內容理解、優化的網站結構（${SEO_PATHS.length} 個索引路徑與 ${PRERENDER_PATHS.length} 個預渲染頁面）、自動化資料管線（每 5 分鐘從台灣銀行同步即時匯率）、與 PWA 離線支援以確保使用者體驗。技術實現包括使用 Vite + React 進行高效打包、Tailwind CSS 的原子類樣式、Workbox 的靜態資源快取策略、Cloudflare Worker 的邊緣安全標頭注入，以及搜尋可見性的完整監測與驗證流程。`,
+        articleBody: `${APP_INFO.shortName} 採用現代化 SEO 最佳實踐，包括預先渲染靜態 HTML（SSG）以提升首頁效能與可爬性、JSON-LD Schema 標記（涵蓋 Article、Organization、BreadcrumbList、FAQPage、SoftwareApplication 等多種類型）以協助搜尋引擎與 AI 系統理解內容、清楚的網站結構（${SEO_PATHS.length} 個索引路徑與 ${PRERENDER_PATHS.length} 個預渲染頁面）、自動化資料管線（每 5 分鐘從台灣銀行同步即時匯率），以及 PWA 離線支援。技術實現包括使用 Vite + React 進行打包、Tailwind CSS 的原子類樣式、Workbox 的靜態資源快取策略、Cloudflare Worker 的邊緣安全標頭注入，以及搜尋可見性的監測與驗證流程。`,
       },
     ),
   },
@@ -2032,7 +2032,7 @@ const CURRENCY_SPECIFIC_FAQ: Record<string, FAQEntry[]> = {
     {
       question: '去韓國換韓元，在台灣換還是到當地換？',
       answer:
-        '強烈建議到韓國當地換。以 10,000 台幣為例，台灣銀行約換 419,639 韓元，明洞換錢所約換 452,000 韓元，相差約 32,361 韓元（約台幣 770 元）。帶台幣千元鈔到明洞 Money Plant、大使館、一品香等換錢所換最划算。',
+        '若以旅遊現鈔為主，可把韓國當地換錢所列入比較。以 10,000 台幣為例，台灣銀行約換 419,639 韓元，明洞換錢所約換 452,000 韓元，相差約 32,361 韓元（約台幣 770 元）。實際仍以當日現場報價、鈔票面額與營業時間為準。',
     },
     {
       question: '首爾明洞哪家換錢所匯率最好？',
@@ -2095,7 +2095,7 @@ const CURRENCY_SPECIFIC_FAQ: Record<string, FAQEntry[]> = {
     {
       question: '去泰國換泰銖，在台灣換還是到當地換？',
       answer:
-        '強烈建議到泰國當地換。台灣銀行匯率約 1 TWD = 0.89-1.07 THB，曼谷 Super Rich 約 1 TWD = 1.115-1.135 THB，價差超過 10%。帶台幣到曼谷 Super Rich（綠標或橘標）換最划算。',
+        '若主要需求是旅遊現鈔，可比較泰國當地換匯所。台灣銀行匯率約 1 TWD = 0.89-1.07 THB，曼谷 Super Rich 約 1 TWD = 1.115-1.135 THB；實際差距會隨日期、分店與鈔票狀態變動。',
     },
     {
       question: '曼谷機場可以換泰銖嗎？',
@@ -2284,7 +2284,7 @@ const REVERSE_CURRENCY_SPECIFIC_FAQ: Record<string, FAQEntry[]> = {
     {
       question: '歐元在台灣哪裡換最划算？',
       answer:
-        '台銀、兆豐等大型銀行皆可換歐元，匯率差異不大。線上結匯通常比臨櫃優惠，可提前鎖定匯率，到機場或分行領取。建議提早 2-3 個工作天預約，確保有足夠庫存。',
+        '台銀、兆豐等大型銀行皆可換歐元，匯率差異不大。線上結匯通常比臨櫃優惠，可提前鎖定匯率，到機場或分行領取。若需要較大金額，建議提早 2-3 個工作天向分行確認庫存。',
     },
   ],
   HKD: [
@@ -2322,7 +2322,7 @@ const REVERSE_CURRENCY_SPECIFIC_FAQ: Record<string, FAQEntry[]> = {
     {
       question: '台幣換越南盾，在台灣換還是到當地換？',
       answer:
-        '強烈建議到越南當地換。台灣銀行匯率約 1:752，越南銀樓約 1:854，每 1 萬台幣相差超過 100 萬越盾。在台灣只需換少量（約 50-100 萬越盾）應急金即可。',
+        '若主要需求是旅遊現鈔，可比較越南當地銀行或合法換匯點。台灣銀行匯率約 1:752，越南銀樓約 1:854，每 1 萬台幣可能相差超過 100 萬越盾；實際以當日現場報價與安全性為準。',
     },
   ],
   SGD: [
@@ -2343,7 +2343,7 @@ const REVERSE_CURRENCY_SPECIFIC_FAQ: Record<string, FAQEntry[]> = {
     {
       question: '英鎊在台灣好換嗎？',
       answer:
-        '英鎊是主要貨幣，台灣大型銀行皆可換。玉山銀行通常提供較優惠的英鎊匯率。建議提前 1-2 天預約，確保有足夠庫存。',
+        '英鎊是主要貨幣，台灣大型銀行皆可換。玉山銀行通常提供較優惠的英鎊匯率。若需要較大金額，建議提前 1-2 天向分行確認庫存。',
     },
   ],
   CAD: [
@@ -2465,13 +2465,13 @@ export function buildPairAmountSeo(
   if (direction === 'twd-to-foreign') {
     return {
       title: `${formatted} 台幣換${currencyName}（TWD/${currencyCode}）— 台銀實際賣出價 | ${APP_INFO.shortName}`,
-      description: `${formatted} 台幣今日可換多少${currencyName}？${APP_INFO.shortName} 直接顯示台銀牌告現金賣出價（非中間價），資料每 5 分鐘自動更新，幫你出國換匯前精確估算可兌換的外幣金額，避免被中間價誤導。`,
+      description: `${formatted} 台幣今日可換多少${currencyName}？${APP_INFO.shortName} 直接顯示台銀牌告現金賣出價（非中間價），資料排程檢查更新，幫你出國換匯前參考估算可兌換的外幣金額，避免被中間價誤導。`,
     };
   }
 
   return {
     title: `買 ${formatted} ${currencyName}要多少新台幣（${currencyCode}/TWD）— 台銀實際賣出價 | ${APP_INFO.shortName}`,
-    description: `買 ${formatted} ${currencyName}今日要多少新台幣？${APP_INFO.shortName} 直接顯示台銀牌告現金賣出價（非中間價），資料每 5 分鐘自動更新，幫你出國換匯前精確估算所需台幣金額，避免被中間價誤導。`,
+    description: `買 ${formatted} ${currencyName}今日要多少新台幣？${APP_INFO.shortName} 直接顯示台銀牌告現金賣出價（非中間價），資料排程檢查更新，幫你出國換匯前參考估算所需台幣金額，避免被中間價誤導。`,
   };
 }
 
@@ -2526,7 +2526,7 @@ function buildCurrencyAnswerCapsule(
     return [
       {
         question: `買${displayName}今日台銀賣出價是多少？`,
-        answer: `台銀現金賣出價：1 ${code} = ${ex.cashSell} TWD（${SEO_RATE_EXAMPLES_DATE} 更新）。${APP_INFO.shortName} 直接顯示臺灣銀行牌告的實際賣出價，非中間價，換匯前可精準估算所需台幣。`,
+        answer: `台銀現金賣出價：1 ${code} = ${ex.cashSell} TWD（${SEO_RATE_EXAMPLES_DATE} 更新）。${APP_INFO.shortName} 直接顯示臺灣銀行牌告的實際賣出價，非中間價，換匯前可估算接近牌告的台幣成本。`,
       },
       {
         question: `為什麼 ${APP_INFO.shortName} 顯示的${displayName}匯率和 Google 不一樣？`,
@@ -2541,7 +2541,7 @@ function buildCurrencyAnswerCapsule(
   return [
     {
       question: `台幣換${displayName}今日匯率是多少？`,
-      answer: `台銀現金賣出價：1 ${code} = ${ex.cashSell} TWD（${SEO_RATE_EXAMPLES_DATE} 更新）。${formatAmount(exampleTwd)} 台幣約可換 ${formatAmount(foreignResult)} ${code}。${APP_INFO.shortName} 顯示臺灣銀行牌告實際賣出價，出國換匯前可精準估算。`,
+      answer: `台銀現金賣出價：1 ${code} = ${ex.cashSell} TWD（${SEO_RATE_EXAMPLES_DATE} 更新）。${formatAmount(exampleTwd)} 台幣約可換 ${formatAmount(foreignResult)} ${code}。${APP_INFO.shortName} 顯示臺灣銀行牌告實際賣出價，出國換匯前可作為預算參考。`,
     },
     {
       question: `出國前換${displayName}，該用哪個匯率？`,
@@ -2574,7 +2574,7 @@ export function getCurrencyLandingPageContent(
   const faqEntries: FAQEntry[] = [
     {
       question: `為什麼 Google、XE、Wise、Apple 計算機顯示的${displayName}換算金額，和台灣銀行臨櫃換匯的實際結果不同？`,
-      answer: `Google 匯率（資料來源：Morningstar）、XE、Wise 及 Apple 計算機（資料來源：Yahoo Finance）所顯示的匯率均為「市場中間價」（mid-market rate）——即全球銀行同業間批發交易的參考基準價，一般消費者無法直接以此價格換匯。這些工具本質上是匯率參考儀表板，並非反映實際臨櫃換匯成本。台灣銀行臨櫃現金換匯使用的是「現金賣出」牌告價，因需涵蓋現鈔保管、運送與保險成本，通常比市場中間價高出 1% 至 10% 以上（東南亞及非主流貨幣差距尤為顯著）。${buildRateExampleSentence(code, displayName)} ${APP_INFO.name}直接顯示臺灣銀行官方牌告的${spotAvailable ? '現金賣出與即期賣出價' : '現金賣出價'}，是專為台灣人設計的精準換匯工具，讓使用者出門換匯前即可掌握真實兌換金額，不被市場中間價誤導。`,
+      answer: `Google 匯率（資料來源：Morningstar）、XE、Wise 及 Apple 計算機（資料來源：Yahoo Finance）所顯示的匯率均為「市場中間價」（mid-market rate），也就是銀行同業間交易的參考價格，一般臨櫃換鈔不會直接用這個價格成交。台灣銀行臨櫃現金換匯使用的是「現金賣出」牌告價，會反映現鈔保管、運送與保險等成本；實際差距會依幣別與交易時間變動。${buildRateExampleSentence(code, displayName)} ${APP_INFO.name} 顯示臺灣銀行官方牌告的${spotAvailable ? '現金賣出與即期賣出價' : '現金賣出價'}，適合換匯前估算接近牌告的台幣成本。`,
     },
     // 幣別特化 FAQ：基於權威金融網站資訊，提供該幣別獨特的換匯知識
     ...(CURRENCY_SPECIFIC_FAQ[code] ?? []),
@@ -2609,8 +2609,8 @@ export function getCurrencyLandingPageContent(
     currencyName: displayName,
     title: `即時${displayName}匯率 — 台銀實際賣出價 | ${code}/TWD`,
     description: spotAvailable
-      ? `即時查看台銀${displayName}現金賣出價（非中間價），換匯前確認你真正要付多少台幣。資料來源臺灣銀行官方牌告，每 5 分鐘自動同步，支援現金與即期匯率切換，附快速金額按鈕與 7～30 天歷史趨勢圖。適合${override.region}費用估算使用。`
-      : `即時查看台銀${displayName}現金賣出價（非中間價），換匯前確認你真正要付多少台幣。資料來源臺灣銀行官方牌告，每 5 分鐘自動同步，附快速金額按鈕與 7～30 天歷史趨勢圖。適合${override.region}費用估算使用。`,
+      ? `即時查看台銀${displayName}現金賣出價（非中間價），換匯前參考估算接近臨櫃牌告的台幣成本。資料來源臺灣銀行官方牌告，排程檢查並同步，支援現金與即期匯率切換，附快速金額按鈕與 7～30 天歷史趨勢圖。適合${override.region}費用估算使用。`
+      : `即時查看台銀${displayName}現金賣出價（非中間價），換匯前參考估算接近臨櫃牌告的台幣成本。資料來源臺灣銀行官方牌告，排程檢查並同步，附快速金額按鈕與 7～30 天歷史趨勢圖。適合${override.region}費用估算使用。`,
     pathname,
     canonical: canonicalUrl,
     keywords: [
@@ -2666,12 +2666,12 @@ export function getCurrencyLandingPageContent(
     ],
     highlights: [
       spotAvailable
-        ? `精準賣出價：顯示臺灣銀行牌告的現金賣出與即期賣出實際報價，非中間價——換匯金額更精準，避免低估所需台幣。`
-        : `精準賣出價：顯示臺灣銀行牌告的現金賣出實際報價，非中間價——換匯金額更精準，避免低估所需台幣。`,
+        ? `牌告賣出價：顯示臺灣銀行牌告的現金賣出與即期賣出報價，非中間價，方便估算接近臨櫃牌告的台幣成本。`
+        : `牌告賣出價：顯示臺灣銀行牌告的現金賣出報價，非中間價，方便估算接近臨櫃牌告的台幣成本。`,
       spotAvailable
         ? `資料來源：臺灣銀行牌告匯率，現金與即期買入賣出四種報價完整呈現。`
         : `資料來源：臺灣銀行牌告匯率，頁面以該幣別可實際查得的現金買入賣出報價為準。`,
-      `更新頻率：每 5 分鐘自動同步，首頁顯示最近更新時間，亦可下拉手動重新整理。`,
+      `更新頻率：排程檢查並同步，首頁顯示最近更新時間，亦可下拉手動重新整理；實際新鮮度依臺灣銀行資料、GitHub Actions 佇列與 CDN 快取而定。`,
       `適用情境：${override.region}前快速查看 ${code}/TWD 即時換算與歷史趨勢。`,
       `${override.travelTip}`,
       `工具功能：計算機鍵盤快速輸入、快速金額按鈕、收藏管理與拖曳排序、換算歷史紀錄。`,
@@ -2874,8 +2874,8 @@ export function getReverseCurrencyLandingPageContent(
     currencyName: displayName,
     title: `台幣換${displayName}匯率 — 出國換匯實際費率 | TWD/${code}`,
     description: spotAvailable
-      ? `出國換${displayName}前，先用台銀實際現金賣出價（非中間價）確認你真正要付多少台幣。資料來源臺灣銀行官方牌告，每 5 分鐘自動同步，支援現金與即期匯率切換，附快速金額按鈕與 7～30 天歷史趨勢圖，幫助你合理規劃換匯預算。`
-      : `出國換${displayName}前，先用台銀實際現金賣出價（非中間價）確認你真正要付多少台幣。資料來源臺灣銀行官方牌告，每 5 分鐘自動同步，附快速金額按鈕與 7～30 天歷史趨勢圖，幫助你合理規劃換匯預算。`,
+      ? `出國換${displayName}前，先用台銀實際現金賣出價（非中間價）參考估算接近臨櫃牌告的台幣成本。資料來源臺灣銀行官方牌告，排程檢查並同步，支援現金與即期匯率切換，附快速金額按鈕與 7～30 天歷史趨勢圖，協助安排換匯預算。`
+      : `出國換${displayName}前，先用台銀實際現金賣出價（非中間價）參考估算接近臨櫃牌告的台幣成本。資料來源臺灣銀行官方牌告，排程檢查並同步，附快速金額按鈕與 7～30 天歷史趨勢圖，協助安排換匯預算。`,
     pathname,
     canonical: canonicalUrl,
     keywords: [
@@ -2931,11 +2931,11 @@ export function getReverseCurrencyLandingPageContent(
       },
     ],
     highlights: [
-      `精準費率：顯示台銀現金賣出價——這是你帶台幣換${displayName}現鈔的實際費率，非中間價。`,
+      `牌告賣出價：顯示台銀現金賣出價——這是你帶台幣換${displayName}現鈔時應參考的牌告費率，非中間價。`,
       spotAvailable
         ? `資料來源：臺灣銀行牌告匯率，現金與即期買入賣出四種報價完整呈現。`
         : `資料來源：臺灣銀行牌告匯率，頁面以該幣別可實際查得的現金買入賣出報價為準。`,
-      `更新頻率：每 5 分鐘自動同步，顯示最近更新時間，可手動重新整理。`,
+      `更新頻率：排程檢查並同步，顯示最近更新時間，可手動重新整理；實際新鮮度依臺灣銀行資料、GitHub Actions 佇列與 CDN 快取而定。`,
       `換匯估算：輸入台幣金額即時計算可換到的${displayName}，並附 7～30 天趨勢。`,
       `${override.travelTip}`,
       `工具功能：計算機鍵盤快速輸入、快速金額按鈕、收藏管理、換算歷史紀錄。`,
diff --git a/apps/ratewise/src/config/seo-paths.ts b/apps/ratewise/src/config/seo-paths.ts
index 3003f8791..2c4ed89fe 100644
--- a/apps/ratewise/src/config/seo-paths.ts
+++ b/apps/ratewise/src/config/seo-paths.ts
@@ -151,23 +151,20 @@ export const INDEXABLE_CANONICAL_PATHS = [
 /** 相容別名：公開可索引 SEO 路徑。 */
 export const SEO_PATHS = INDEXABLE_CANONICAL_PATHS;
 
-export const APP_ONLY_PATHS = [
-  '/multi/',
-  '/favorites/',
-  '/settings/',
+/** 使用者功能頁：允許爬取 + SEOHelmet noindex，但不納入 sitemap。 */
+export const APP_ONLY_NOINDEX_PATHS = ['/multi/', '/favorites/', '/settings/'] as const;
+
+/** 開發 / 展示頁：正式 build 不註冊、不預渲染；robots 仍明確 Disallow。 */
+export const DEV_ONLY_PATHS = [
   '/theme-showcase/',
   '/color-scheme/',
   '/update-prompt-test/',
   '/ui-showcase/',
 ] as const;
 
-/** 使用者功能頁子集（前 3）：允許爬取 + SEOHelmet noindex */
-export const APP_ONLY_NOINDEX_PATHS = APP_ONLY_PATHS.slice(0, 3);
-
-/** 開發 / 展示頁子集（後 4）：直接 Disallow 爬取 */
-export const DEV_ONLY_PATHS = APP_ONLY_PATHS.slice(3);
+export const APP_ONLY_PATHS = [...APP_ONLY_NOINDEX_PATHS] as const;
 
-export const APP_ONLY_PRERENDER_PATHS = [...APP_ONLY_PATHS] as const;
+export const APP_ONLY_PRERENDER_PATHS = [...APP_ONLY_NOINDEX_PATHS] as const;
 
 export const PRERENDER_PATHS = [
   ...SEO_PATHS,
@@ -216,8 +213,8 @@ export const IMAGE_RESOURCES = [
 export const SITE_CONFIG = {
   url: normalizeSiteUrl('https://app.haotool.org/ratewise/'),
   name: APP_INFO.name,
-  title: `${APP_INFO.shortName} — 台灣最精準匯率換算器`,
-  description: `${APP_INFO.shortName} 是台灣最精準的匯率換算工具，顯示臺灣銀行牌告的實際買入賣出價（非中間價），讓你換匯前清楚知道要付多少台幣。支援 18 種貨幣即時換算、現金/即期匯率切換、7-30 天歷史趨勢圖、PWA 離線使用，每 5 分鐘自動同步，免費無廣告無註冊。`,
+  title: `${APP_INFO.shortName} — 台銀牌告買賣價匯率換算器`,
+  description: `${APP_INFO.shortName} 以臺灣銀行牌告買賣價為核心，顯示實際買入賣出價（非中間價），協助換匯前參考估算台幣成本。支援 18 種貨幣換算、現金/即期匯率切換、7-30 天歷史趨勢圖、PWA 離線使用，約每 5 分鐘檢查更新，免費無廣告無註冊。`,
 } as const satisfies Readonly<{
   url: string;
   name: string;
diff --git a/apps/ratewise/src/config/seo-static.ts b/apps/ratewise/src/config/seo-static.ts
index 9207e5ee7..6c1c70fd3 100644
--- a/apps/ratewise/src/config/seo-static.ts
+++ b/apps/ratewise/src/config/seo-static.ts
@@ -1,7 +1,7 @@
 // 提供 plain Node 與 Vite 共用的靜態 SEO 文案。
 import { APP_INFO } from './app-info';
 
-export const DEFAULT_TITLE = `${APP_INFO.name} — 台灣最精準匯率換算器 | 顯示實際買賣價，不用中間價`;
+export const DEFAULT_TITLE = `${APP_INFO.name} — 台銀牌告買賣價匯率換算器 | 顯示實際買賣價，不用中間價`;
 
 export const GUIDE_PAGE_TITLE = `使用指南 — 如何使用 ${APP_INFO.name}換算匯率`;
 
diff --git a/apps/ratewise/src/config/themes.ts b/apps/ratewise/src/config/themes.ts
index 883080e34..86cca5fe4 100644
--- a/apps/ratewise/src/config/themes.ts
+++ b/apps/ratewise/src/config/themes.ts
@@ -5,7 +5,7 @@
  *              6 種風格（僅淺色模式）
  *
  * @styles
- * - Zen: 極簡專業 - Apple/Material Design 風格（預設）
+ * - Zen: 極簡專業 - violet/indigo 產品基準（預設）
  * - Nitro: 深色科技感 - 賽車儀表板、霓虹燈
  * - Kawaii: 可愛粉嫩 - 日系少女風、馬卡龍色系
  * - Classic: 復古書卷 - 古典圖書館、皮革裝幀
@@ -97,14 +97,24 @@ interface StyleDefinition {
   colors: SemanticColors;
 }
 
+export interface StyleOption {
+  value: ThemeStyle;
+  label: string;
+  labelEn: string;
+  description: string;
+  previewBg: string;
+  previewText: string;
+  previewAccent: string;
+}
+
 // ============================================================================
 // Style Definitions - 6 種風格
 // ============================================================================
 
 /**
  * Zen 風格 - 極簡專業（預設）
- * 特點：純淨白底、藍灰色調、科技感
- * 靈感：Apple Design、Material Design 3、專業金融 App
+ * 特點：純淨白底、violet/indigo 品牌層次、資訊優先
+ * 靈感：成熟金融工具、安靜的產品介面
  */
 const zenStyle: StyleDefinition = {
   name: 'zen',
@@ -119,19 +129,19 @@ const zenStyle: StyleDefinition = {
     surface: '255 255 255',
     text: '15 23 42', // slate-900
     textMuted: '100 116 139', // slate-500
-    primary: '99 102 241', // indigo-500 - 專業紫藍
-    secondary: '71 85 105', // slate-600
-    accent: '59 130 246', // blue-500
+    primary: '124 58 237', // violet-600
+    secondary: '99 102 241', // indigo-500
+    accent: '139 92 246', // violet-500
     border: '226 232 240', // slate-200
     // 狀態色彩
     info: '14 165 233', // sky-500
     success: '34 197 94', // green-500
     warning: '245 158 11', // amber-500
     error: '239 68 68', // red-500
-    // 圖表色彩 - 專業藍紫
-    chartLine: '99 102 241', // indigo-500
-    chartAreaTop: '99 102 241', // indigo-500 (40% opacity in CSS)
-    chartAreaBottom: '59 130 246', // blue-500 (10% opacity in CSS)
+    // 圖表色彩 - violet/blue 主支現代語言
+    chartLine: '139 92 246', // violet-500
+    chartAreaTop: '139 92 246', // violet-500
+    chartAreaBottom: '59 130 246', // blue-500
   },
 };
 
@@ -152,8 +162,8 @@ const nitroStyle: StyleDefinition = {
     background: '2 6 23', // slate-950
     surface: '15 23 42', // slate-900
     text: '255 255 255',
-    textMuted: '100 116 139', // slate-500
-    primary: '0 212 255', // cyan
+    textMuted: '203 213 225', // slate-300
+    primary: '0 150 230', // 霓虹藍（深電光，白字 3:1 AA）
     secondary: '129 140 248', // indigo-400
     accent: '0 255 136', // neon green
     border: '30 41 59', // slate-800
@@ -163,8 +173,8 @@ const nitroStyle: StyleDefinition = {
     warning: '251 191 36',
     error: '248 113 113',
     // 圖表色彩 - 霓虹藍綠
-    chartLine: '0 212 255',
-    chartAreaTop: '0 212 255',
+    chartLine: '103 232 249', // cyan-300
+    chartAreaTop: '103 232 249', // cyan-300
     chartAreaBottom: '0 255 136',
   },
 };
@@ -185,10 +195,10 @@ const kawaiiStyle: StyleDefinition = {
     // 溫暖粉嫩
     background: '255 250 244', // warm cream
     surface: '255 255 255',
-    text: '142 124 128', // muted pink-brown
-    textMuted: '180 160 165',
-    primary: '255 105 180', // hot pink
-    secondary: '236 72 153', // pink-500
+    text: '92 45 60', // accessible deep rose
+    textMuted: '102 65 76',
+    primary: '190 24 93', // pink-700
+    secondary: '190 24 93', // pink-700
     accent: '255 182 193', // light pink
     border: '255 228 225', // misty rose
     // 狀態色彩 - 柔和可愛風
@@ -197,9 +207,9 @@ const kawaiiStyle: StyleDefinition = {
     warning: '253 224 71', // yellow-300 - 檸檬黃
     error: '252 165 165', // red-300 - 珊瑚紅
     // 圖表色彩 - 粉紅漸變
-    chartLine: '255 105 180', // hot pink
-    chartAreaTop: '255 105 180',
-    chartAreaBottom: '255 182 193', // light pink
+    chartLine: '236 72 153', // pink-500
+    chartAreaTop: '236 72 153', // pink-500
+    chartAreaBottom: '244 114 182', // pink-400
   },
 };
 
@@ -231,9 +241,9 @@ const classicStyle: StyleDefinition = {
     warning: '180 83 9', // amber-700 - 琥珀警告
     error: '185 28 28', // red-700 - 磚紅
     // 圖表色彩 - 復古棕
-    chartLine: '139 69 19', // saddle brown
-    chartAreaTop: '180 120 80', // tan
-    chartAreaBottom: '245 230 220', // linen
+    chartLine: '180 83 9', // amber-700
+    chartAreaTop: '180 83 9', // amber-700
+    chartAreaBottom: '217 119 6', // amber-600
   },
 };
 
@@ -256,11 +266,11 @@ const oceanStyle: StyleDefinition = {
     text: '7 89 133', // cyan-800 - 深海藍
     textMuted: '22 78 99', // cyan-900 lightened
     primary: '6 182 212', // cyan-500 - 海水藍
-    secondary: '20 184 166', // teal-500 - 青綠
-    accent: '2 132 199', // sky-600 - 天空藍
+    secondary: '14 165 233', // sky-500 - 青藍
+    accent: '20 184 166', // teal-500 - 海水綠
     border: '186 230 253', // sky-200
     // 狀態色彩 - 海洋風格
-    info: '14 165 233', // sky-500
+    info: '56 189 248', // sky-400
     success: '20 184 166', // teal-500
     warning: '245 158 11', // amber-500
     error: '239 68 68', // red-500
@@ -289,9 +299,9 @@ const forestStyle: StyleDefinition = {
     surface: '255 255 255',
     text: '20 83 45', // green-800 - 深綠
     textMuted: '22 101 52', // green-700
-    primary: '34 197 94', // green-500 - 翠綠
-    secondary: '132 204 22', // lime-500 - 青檸
-    accent: '22 163 74', // green-600 - 森林綠
+    primary: '5 150 105', // emerald-600 - 森林主色
+    secondary: '22 163 74', // green-600 - 次要綠
+    accent: '101 163 13', // lime-600 - 青檸點綴
     border: '187 247 208', // green-200
     // 狀態色彩 - 自然風格
     info: '59 130 246', // blue-500
@@ -299,9 +309,9 @@ const forestStyle: StyleDefinition = {
     warning: '234 179 8', // yellow-500
     error: '239 68 68', // red-500
     // 圖表色彩 - 森林綠
-    chartLine: '34 197 94', // green-500
-    chartAreaTop: '34 197 94',
-    chartAreaBottom: '132 204 22', // lime-500
+    chartLine: '5 150 105', // emerald-600
+    chartAreaTop: '5 150 105', // emerald-600
+    chartAreaBottom: '34 197 94', // green-500
   },
 };
 
@@ -324,70 +334,29 @@ export const STYLE_DEFINITIONS: Record<ThemeStyle, StyleDefinition> = {
 /**
  * 風格選項（供 UI 選擇器使用）
  */
-export const STYLE_OPTIONS: {
-  value: ThemeStyle;
-  label: string;
-  labelEn: string;
-  description: string;
-  previewBg: string;
-  previewText: string;
-  previewAccent: string;
-}[] = [
-  {
-    value: 'zen',
-    label: 'Zen',
-    labelEn: 'Zen',
-    description: '極簡專業',
-    previewBg: 'rgb(248, 250, 252)',
-    previewText: 'rgb(15, 23, 42)',
-    previewAccent: 'rgb(99, 102, 241)',
-  },
-  {
-    value: 'nitro',
-    label: 'Nitro',
-    labelEn: 'Nitro',
-    description: '深色科技感',
-    previewBg: 'rgb(2, 6, 23)',
-    previewText: 'rgb(255, 255, 255)',
-    previewAccent: 'rgb(0, 212, 255)',
-  },
-  {
-    value: 'kawaii',
-    label: 'Kawaii',
-    labelEn: 'Kawaii',
-    description: '可愛粉嫩',
-    previewBg: 'rgb(255, 250, 244)',
-    previewText: 'rgb(142, 124, 128)',
-    previewAccent: 'rgb(255, 105, 180)',
-  },
-  {
-    value: 'classic',
-    label: 'Classic',
-    labelEn: 'Classic',
-    description: '復古書卷',
-    previewBg: 'rgb(255, 250, 251)',
-    previewText: 'rgb(67, 20, 7)',
-    previewAccent: 'rgb(139, 69, 19)',
-  },
-  {
-    value: 'ocean',
-    label: 'Ocean',
-    labelEn: 'Ocean',
-    description: '海洋深邃',
-    previewBg: 'rgb(240, 249, 255)',
-    previewText: 'rgb(7, 89, 133)',
-    previewAccent: 'rgb(6, 182, 212)',
-  },
-  {
-    value: 'forest',
-    label: 'Forest',
-    labelEn: 'Forest',
-    description: '自然森林',
-    previewBg: 'rgb(240, 253, 244)',
-    previewText: 'rgb(20, 83, 45)',
-    previewAccent: 'rgb(34, 197, 94)',
-  },
-];
+function toCommaSeparatedRgb(spaceDelimited: string): string {
+  return spaceDelimited.split(' ').join(', ');
+}
+
+function toRgbColor(spaceDelimited: string): string {
+  return `rgb(${toCommaSeparatedRgb(spaceDelimited)})`;
+}
+
+function buildStyleOption(value: ThemeStyle, definition: StyleDefinition): StyleOption {
+  return {
+    value,
+    label: definition.label,
+    labelEn: definition.labelEn,
+    description: definition.description,
+    previewBg: toRgbColor(definition.colors.background),
+    previewText: toRgbColor(definition.colors.text),
+    previewAccent: toRgbColor(definition.colors.primary),
+  };
+}
+
+export const STYLE_OPTIONS: StyleOption[] = (
+  Object.entries(STYLE_DEFINITIONS) as [ThemeStyle, StyleDefinition][]
+).map(([value, definition]) => buildStyleOption(value, definition));
 
 // ============================================================================
 // Theme Application
@@ -436,19 +405,6 @@ export function getStyleColors(style: ThemeStyle): SemanticColors {
   return STYLE_DEFINITIONS[style].colors;
 }
 
-/**
- * 將空格分隔的 RGB 值轉換為逗號分隔格式
- * CSS Variables 使用空格分隔（如 "99 102 241"）以支援 Tailwind 的 rgb(var(--color) / <alpha>) 語法
- * 但 Canvas API (lightweight-charts) 需要標準 rgba(r, g, b, a) 格式（逗號分隔）
- *
- * @param spaceDelimited - 空格分隔的 RGB 值，如 "99 102 241"
- * @returns 逗號分隔的 RGB 值，如 "99, 102, 241"
- *
- */
-function toCommaSeparatedRgb(spaceDelimited: string): string {
-  return spaceDelimited.split(' ').join(', ');
-}
-
 /**
  * 獲取當前主題的圖表顏色（供 MiniTrendChart 使用）
  *
@@ -461,13 +417,17 @@ export function getChartColors(): {
   lineColor: string;
   topColor: string;
   bottomColor: string;
+  markerBackground: string;
 } {
+  const fallbackColors = getStyleColors(DEFAULT_THEME_CONFIG.style);
+
   if (typeof window === 'undefined') {
-    // SSR fallback - 使用 Zen 預設值（高級金融風格）
+    // SSR fallback - 使用預設風格的圖表色彩
     return {
-      lineColor: 'rgb(99, 102, 241)',
-      topColor: 'rgba(99, 102, 241, 0.25)',
-      bottomColor: 'rgba(59, 130, 246, 0)',
+      lineColor: toRgbColor(fallbackColors.chartLine),
+      topColor: `rgba(${toCommaSeparatedRgb(fallbackColors.chartAreaTop)}, 0.25)`,
+      bottomColor: `rgba(${toCommaSeparatedRgb(fallbackColors.chartAreaBottom)}, 0)`,
+      markerBackground: 'rgb(255, 255, 255)',
     };
   }
 
@@ -475,15 +435,20 @@ export function getChartColors(): {
   const style = getComputedStyle(root);
 
   // CSS Variables 儲存空格分隔格式（Tailwind 相容）
-  const line = style.getPropertyValue('--color-chart-line').trim() || '99 102 241';
-  const top = style.getPropertyValue('--color-chart-area-top').trim() || '99 102 241';
-  const bottom = style.getPropertyValue('--color-chart-area-bottom').trim() || '59 130 246';
+  const line = style.getPropertyValue('--color-chart-line').trim() || fallbackColors.chartLine;
+  const top =
+    style.getPropertyValue('--color-chart-area-top').trim() || fallbackColors.chartAreaTop;
+  const bottom =
+    style.getPropertyValue('--color-chart-area-bottom').trim() || fallbackColors.chartAreaBottom;
+  // crosshair marker 背景跟隨 surface token（深色主題自動適配）
+  const surface = style.getPropertyValue('--color-surface').trim() || '255 255 255';
 
   // Convert to comma-separated format for Canvas/lightweight-charts
   return {
-    lineColor: `rgb(${toCommaSeparatedRgb(line)})`,
+    lineColor: toRgbColor(line),
     topColor: `rgba(${toCommaSeparatedRgb(top)}, 0.25)`,
     bottomColor: `rgba(${toCommaSeparatedRgb(bottom)}, 0)`,
+    markerBackground: toRgbColor(surface),
   };
 }
 
@@ -531,7 +496,7 @@ export interface SeasonalColors {
  * 獲取當前主題的季節性顏色（供 Easter Egg 組件使用）
  *
  * SSOT - 從 CSS Variables 獲取季節性配色
- * 用於 ChristmasTree、MiniChristmasTree、SnowAccumulation 等組件
+ * 用於 ChristmasTree、MiniChristmasTree 等組件
  *
  * @returns 季節性顏色配置，格式為標準 rgb(r, g, b)
  */
diff --git a/apps/ratewise/src/features/calculator/components/CalculatorKey.tsx b/apps/ratewise/src/features/calculator/components/CalculatorKey.tsx
index a8042a43f..646d61cbf 100644
--- a/apps/ratewise/src/features/calculator/components/CalculatorKey.tsx
+++ b/apps/ratewise/src/features/calculator/components/CalculatorKey.tsx
@@ -51,7 +51,7 @@ export function CalculatorKey({ keyDef, onClick, disabled = false }: CalculatorK
    * @see src/index.css - 6 種風格的 CSS Variables 定義
    * @see Apple Calculator、UX Collective 最佳實踐
    *
-   * 🐛 修復：移除 transition-all，避免與 Motion 動畫衝突
+   * 🐛 修復：移除通用 transition，避免與 Motion 動畫衝突
    * @see Bug Report 2025-11-19 - 按鈕放大動畫未顯現
    *
    * 🔄 重構 2026-01-23: 分離運算符與等號樣式
@@ -96,7 +96,7 @@ export function CalculatorKey({ keyDef, onClick, disabled = false }: CalculatorK
     }
 
     // 基礎樣式（應該不會到達這裡）
-    return 'calculator-key relative h-16 rounded-xl font-semibold select-none overflow-hidden';
+    return 'calculator-key relative h-16 rounded-control font-semibold select-none overflow-hidden';
   };
 
   /**
diff --git a/apps/ratewise/src/features/calculator/components/CalculatorKeyboard.tsx b/apps/ratewise/src/features/calculator/components/CalculatorKeyboard.tsx
index 84dfb4658..e82c50927 100644
--- a/apps/ratewise/src/features/calculator/components/CalculatorKeyboard.tsx
+++ b/apps/ratewise/src/features/calculator/components/CalculatorKeyboard.tsx
@@ -209,7 +209,7 @@ export function CalculatorKeyboard({
           <>
             {/* 背景遮罩 */}
             <motion.div
-              className="fixed inset-0 bg-black/40 z-40"
+              className="fixed inset-0 bg-overlay/40 z-40"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
@@ -219,7 +219,7 @@ export function CalculatorKeyboard({
 
             {/* Bottom Sheet 容器 */}
             <motion.div
-              className="fixed inset-x-0 bottom-0 z-50 bg-surface rounded-t-3xl shadow-2xl max-h-[80vh] overflow-hidden"
+              className="fixed inset-x-0 bottom-0 z-50 max-h-[80vh] overflow-hidden rounded-t-card bg-surface shadow-floating"
               initial={{ y: '100%' }}
               animate={{ y: 0 }}
               exit={{ y: '100%' }}
@@ -245,8 +245,9 @@ export function CalculatorKeyboard({
                     {t('calculator.title')}
                   </h2>
                   <button
+                    type="button"
                     onClick={onClose}
-                    className="text-neutral-text-muted hover:text-neutral-text-secondary transition-colors"
+                    className="flex h-11 w-11 items-center justify-center rounded-full text-neutral-text-muted transition-colors hover:text-neutral-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                     aria-label={t('calculator.close')}
                   >
                     <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/apps/ratewise/src/features/calculator/components/ExpressionDisplay.tsx b/apps/ratewise/src/features/calculator/components/ExpressionDisplay.tsx
index 0753a20b3..5b596dcf8 100644
--- a/apps/ratewise/src/features/calculator/components/ExpressionDisplay.tsx
+++ b/apps/ratewise/src/features/calculator/components/ExpressionDisplay.tsx
@@ -38,7 +38,7 @@ export function ExpressionDisplay({ expression, result, error, preview }: Expres
   return (
     <div className="mb-6 space-y-2">
       {/* 表達式顯示區（套用千位分隔符，提升 UX 可讀性） */}
-      <div className="min-h-[3rem] rounded-xl bg-neutral-bg px-4 py-3 relative">
+      <div className="relative min-h-[3rem] rounded-control bg-neutral-bg px-4 py-3">
         <div
           className="text-right text-2xl text-neutral-text-secondary font-mono tabular-nums overflow-x-auto scrollbar-hide"
           role="status"
@@ -75,7 +75,7 @@ export function ExpressionDisplay({ expression, result, error, preview }: Expres
       {/* 結果顯示區（含千位分隔符格式化） */}
       {result !== null && !error && (
         <motion.div
-          className="rounded-xl bg-primary-bg px-4 py-3"
+          className="rounded-control bg-primary-bg px-4 py-3"
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.15 }} // iOS 極速回饋：150ms
@@ -97,7 +97,7 @@ export function ExpressionDisplay({ expression, result, error, preview }: Expres
       {/* 錯誤訊息顯示區 */}
       {error && (
         <motion.div
-          className="rounded-xl bg-danger-bg px-4 py-3"
+          className="rounded-control bg-danger-bg px-4 py-3"
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.15 }} // iOS 極速回饋：150ms
diff --git a/apps/ratewise/src/features/calculator/components/__tests__/CalculatorKey.test.tsx b/apps/ratewise/src/features/calculator/components/__tests__/CalculatorKey.test.tsx
index fa999f9f0..6c93b05ff 100644
--- a/apps/ratewise/src/features/calculator/components/__tests__/CalculatorKey.test.tsx
+++ b/apps/ratewise/src/features/calculator/components/__tests__/CalculatorKey.test.tsx
@@ -217,8 +217,7 @@ describe('CalculatorKey Component - BDD Tests', () => {
    * When: 長按刪除鍵（≥500ms）
    * Then: 應該連續觸發 onClick 回調（間隔 150ms）
    *
-   * 注意：長按行為的完整測試已在 useLongPress.test.ts 覆蓋（10 個測試）
-   *       這裡只測試刪除鍵的基本渲染和點擊行為
+   * 注意：目前刪除鍵只保留基本渲染與短按行為，未啟用長按連續刪除。
    */
   describe('場景 4: 刪除鍵基本功能', () => {
     it('應該正確渲染刪除鍵', () => {
diff --git a/apps/ratewise/src/features/calculator/easter-eggs/ChristmasEasterEgg.tsx b/apps/ratewise/src/features/calculator/easter-eggs/ChristmasEasterEgg.tsx
index 61c844e7a..5da8c344b 100644
--- a/apps/ratewise/src/features/calculator/easter-eggs/ChristmasEasterEgg.tsx
+++ b/apps/ratewise/src/features/calculator/easter-eggs/ChristmasEasterEgg.tsx
@@ -97,10 +97,10 @@ export function ChristmasEasterEgg({ isVisible, onClose }: ChristmasEasterEggPro
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.6, duration: 0.8 }}
           >
-            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4 drop-shadow-lg">
+            <h1 className="christmas-greeting-title text-4xl md:text-5xl font-bold mb-4">
               Merry Christmas!
             </h1>
-            <p className="text-2xl md:text-3xl text-yellow-300 font-semibold drop-shadow-md">
+            <p className="christmas-greeting-year text-2xl md:text-3xl font-semibold">
               {BUILD_YEAR} 聖誕快樂
             </p>
             <p className="text-sm text-neutral-text-muted mt-6 opacity-70">點擊任意處關閉</p>
@@ -108,7 +108,7 @@ export function ChristmasEasterEgg({ isVisible, onClose }: ChristmasEasterEggPro
 
           {/* 底部裝飾 */}
           <motion.div
-            className="absolute bottom-8 text-white/50 text-sm"
+            className="christmas-equation absolute bottom-8 text-sm"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 1.2 }}
diff --git a/apps/ratewise/src/features/calculator/easter-eggs/SnowAccumulation.tsx b/apps/ratewise/src/features/calculator/easter-eggs/SnowAccumulation.tsx
deleted file mode 100644
index e406e3a72..000000000
--- a/apps/ratewise/src/features/calculator/easter-eggs/SnowAccumulation.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * Snow Accumulation Effect - Component
- * @file SnowAccumulation.tsx
- * @description 積雪效果組件 - 在 UI 元素頂部顯示浪漫的積雪曲線
- *
- * @design 使用 Design Token 系統支援 6 種主題風格
- *         顏色從 CSS Variables 動態讀取，確保主題一致性
- *
- * @tokens 使用 --color-seasonal-snow 系列 tokens
- *
- * @style 浪漫唯美派
- * - 柔和的白色積雪曲線（主題感知）
- * - 微妙的閃爍效果模擬雪花反光
- * - 自然的不規則雪堆形狀
- *
- * @created 2025-12-xx
- * @updated 2026-01-24 - 遷移至 Design Token 系統
- */
-
-import { useState, useEffect } from 'react';
-import { getSeasonalColors, type SeasonalColors } from '../../../config/themes';
-import './styles/december-theme.css';
-
-/* ------------------------------------------------------------------
- * Type Definitions
- * ------------------------------------------------------------------ */
-
-/**
- * 積雪效果 Props
- */
-export interface SnowAccumulationProps {
-  /** 積雪高度（預設 16px） */
-  height?: number;
-  /** 積雪樣式變體 */
-  variant?: 'default' | 'thick' | 'thin';
-  /** 自定義 className */
-  className?: string;
-}
-
-/* ------------------------------------------------------------------
- * Component
- * ------------------------------------------------------------------ */
-
-/**
- * 積雪效果組件
- * @description 在 UI 元素頂部顯示浪漫的積雪效果
- */
-export function SnowAccumulation({
-  height = 16,
-  variant = 'default',
-  className = '',
-}: SnowAccumulationProps) {
-  // 根據變體調整高度
-  const actualHeight =
-    variant === 'thick' ? height * 1.5 : variant === 'thin' ? height * 0.7 : height;
-
-  /* ------------------------------------------------------------------
-   * 主題顏色狀態 - 從 CSS Variables 動態讀取
-   * ------------------------------------------------------------------ */
-  const [colors, setColors] = useState<SeasonalColors>(() => getSeasonalColors());
-
-  /**
-   * 監聽主題變更並更新顏色
-   */
-  useEffect(() => {
-    const updateColors = () => {
-      setColors(getSeasonalColors());
-    };
-
-    // 初始化
-    updateColors();
-
-    // 監聽主題變更
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.attributeName === 'data-style') {
-          updateColors();
-          break;
-        }
-      }
-    });
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['data-style'],
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  /**
-   * 將 rgb(r, g, b) 格式轉換為可添加透明度的格式
-   * @param rgbColor rgb(r, g, b) 格式的顏色
-   * @param opacity 透明度 (0-1)
-   * @returns rgba(r, g, b, opacity) 格式
-   */
-  const toRgba = (rgbColor: string, opacity: number): string => {
-    // 從 rgb(r, g, b) 提取數值
-    const regex = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
-    const match = regex.exec(rgbColor);
-    if (match) {
-      return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${opacity})`;
-    }
-    // 如果是 hex 格式（fallback），直接返回帶透明度的白色
-    return `rgba(255, 255, 255, ${opacity})`;
-  };
-
-  return (
-    <div
-      className={`snow-accumulation snow-accumulation--${variant} ${className}`}
-      style={{ height: actualHeight }}
-      aria-hidden="true"
-    >
-      {/* 主積雪層 - SVG 自然曲線 - 使用 seasonal-snow token */}
-      <svg
-        className="snow-accumulation__main"
-        viewBox="0 0 200 20"
-        preserveAspectRatio="none"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        {/* 底層雪堆 - 較深的陰影 */}
-        <path
-          d="M0 20 L0 12 Q10 8 20 10 Q35 6 50 9 Q65 5 80 8 Q100 4 120 7 Q140 5 160 9 Q180 6 200 10 L200 20 Z"
-          fill={toRgba(colors.snow, 0.6)}
-        />
-        {/* 中層雪堆 */}
-        <path
-          d="M0 20 L0 14 Q15 10 30 12 Q50 8 70 11 Q90 7 110 10 Q130 6 150 11 Q170 8 190 12 L200 13 L200 20 Z"
-          fill={toRgba(colors.snow, 0.8)}
-        />
-        {/* 頂層雪堆 - 最亮 */}
-        <path
-          d="M0 20 L0 16 Q20 13 40 15 Q60 11 80 14 Q100 10 120 13 Q140 11 160 14 Q180 12 200 15 L200 20 Z"
-          fill={colors.snow}
-        />
-      </svg>
-
-      {/* 閃爍的雪花點綴 */}
-      <div className="snow-accumulation__sparkles">
-        <span className="snow-sparkle" style={{ left: '10%', animationDelay: '0s' }}>
-          ✦
-        </span>
-        <span className="snow-sparkle" style={{ left: '25%', animationDelay: '0.5s' }}>
-          ✧
-        </span>
-        <span className="snow-sparkle" style={{ left: '45%', animationDelay: '1s' }}>
-          ✦
-        </span>
-        <span className="snow-sparkle" style={{ left: '65%', animationDelay: '1.5s' }}>
-          ✧
-        </span>
-        <span className="snow-sparkle" style={{ left: '80%', animationDelay: '0.3s' }}>
-          ✦
-        </span>
-        <span className="snow-sparkle" style={{ left: '92%', animationDelay: '0.8s' }}>
-          ✧
-        </span>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/ratewise/src/features/calculator/easter-eggs/__tests__/DecemberTheme.test.tsx b/apps/ratewise/src/features/calculator/easter-eggs/__tests__/DecemberTheme.test.tsx
index 56b581e6f..8cf7af0de 100644
--- a/apps/ratewise/src/features/calculator/easter-eggs/__tests__/DecemberTheme.test.tsx
+++ b/apps/ratewise/src/features/calculator/easter-eggs/__tests__/DecemberTheme.test.tsx
@@ -8,7 +8,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, fireEvent, act } from '@testing-library/react';
 import { DecemberTheme } from '../DecemberTheme';
 import { DecemberSnowScene } from '../DecemberSnowScene';
-import { SnowAccumulation } from '../SnowAccumulation';
 import { MiniChristmasTree } from '../MiniChristmasTree';
 
 // Mock useDecemberTheme hook
@@ -140,37 +139,6 @@ describe('DecemberTheme Components', () => {
     });
   });
 
-  describe('SnowAccumulation', () => {
-    it('should render with default props', () => {
-      render(<SnowAccumulation />);
-
-      const accumulation = document.querySelector('.snow-accumulation');
-      expect(accumulation).toBeInTheDocument();
-      expect(accumulation).toHaveAttribute('aria-hidden', 'true');
-    });
-
-    it('should apply variant class', () => {
-      render(<SnowAccumulation variant="thick" />);
-
-      const accumulation = document.querySelector('.snow-accumulation--thick');
-      expect(accumulation).toBeInTheDocument();
-    });
-
-    it('should apply custom className', () => {
-      render(<SnowAccumulation className="custom-class" />);
-
-      const accumulation = document.querySelector('.custom-class');
-      expect(accumulation).toBeInTheDocument();
-    });
-
-    it('should render sparkles', () => {
-      render(<SnowAccumulation />);
-
-      const sparkles = document.querySelectorAll('.snow-sparkle');
-      expect(sparkles.length).toBe(6);
-    });
-  });
-
   describe('MiniChristmasTree', () => {
     it('should render with year prop', () => {
       act(() => {
diff --git a/apps/ratewise/src/features/calculator/easter-eggs/index.ts b/apps/ratewise/src/features/calculator/easter-eggs/index.ts
index 99a80b096..af69e9309 100644
--- a/apps/ratewise/src/features/calculator/easter-eggs/index.ts
+++ b/apps/ratewise/src/features/calculator/easter-eggs/index.ts
@@ -12,7 +12,6 @@ export { SnowAnimation } from './SnowAnimation';
 // 12 月常駐主題組件
 export { DecemberTheme } from './DecemberTheme';
 export { DecemberSnowScene } from './DecemberSnowScene';
-export { SnowAccumulation } from './SnowAccumulation';
 export { MiniChristmasTree } from './MiniChristmasTree';
 
 // 工具函數
@@ -32,5 +31,4 @@ export type {
   ChristmasTreeProps,
   SnowAnimationProps,
 } from './types';
-export type { SnowAccumulationProps } from './SnowAccumulation';
 export type { MiniChristmasTreeProps } from './MiniChristmasTree';
diff --git a/apps/ratewise/src/features/calculator/easter-eggs/styles/christmas.css b/apps/ratewise/src/features/calculator/easter-eggs/styles/christmas.css
index 2356e7aee..9fae64b89 100644
--- a/apps/ratewise/src/features/calculator/easter-eggs/styles/christmas.css
+++ b/apps/ratewise/src/features/calculator/easter-eggs/styles/christmas.css
@@ -113,6 +113,20 @@
   animation: fadeInUp 1s ease-out forwards;
 }
 
+.christmas-greeting-title {
+  color: rgb(var(--color-seasonal-snow));
+  text-shadow: 0 8px 24px rgb(var(--color-background) / 0.45);
+}
+
+.christmas-greeting-year {
+  color: rgb(var(--color-seasonal-star));
+  text-shadow: 0 4px 18px rgb(var(--color-background) / 0.4);
+}
+
+.christmas-equation {
+  color: rgb(var(--color-seasonal-snow) / 0.5);
+}
+
 /* ============================================
    彩蛋背景漸層 - 使用主題感知顏色
    深色主題（Nitro）時自動適配
diff --git a/apps/ratewise/src/features/calculator/hooks/__tests__/useLongPress.test.ts b/apps/ratewise/src/features/calculator/hooks/__tests__/useLongPress.test.ts
deleted file mode 100644
index 402675cb4..000000000
--- a/apps/ratewise/src/features/calculator/hooks/__tests__/useLongPress.test.ts
+++ /dev/null
@@ -1,384 +0,0 @@
-/**
- * useLongPress Hook - BDD Test Suite
- * @file useLongPress.test.ts
- * @description 行為驅動開發測試：長按刪除功能
- *
- * 🐛 修復驗證 2025-11-20：
- * - 確保 150ms 間隔（避免過快刪除）
- * - 確保短按不會雙重觸發
- * - 確保移動設備和桌面版一致
- *
- * BDD 格式：Given-When-Then
- * @see docs/prompt/BDD.md
- */
-
-import { renderHook, act } from '@testing-library/react';
-import { useLongPress } from '../useLongPress';
-import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
-
-/**
- * BDD 場景：長按刪除功能
- *
- * 核心行為：
- * 1. 短按（<500ms）：刪除一個字符
- * 2. 長按（≥500ms）：連續刪除，間隔 150ms
- * 3. 移動設備和桌面版行為一致
- */
-describe('useLongPress Hook - BDD Tests', () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    vi.useRealTimers();
-  });
-
-  /**
-   * 場景 1：短按刪除（單次觸發）
-   * Given: 用戶需要刪除單個字符
-   * When: 按下刪除鈕並在 500ms 內釋放
-   * Then: 只觸發一次刪除，不會雙重觸發
-   */
-  describe('場景 1: 短按刪除（單次觸發）', () => {
-    it('應該在短按時觸發 onClick 回調一次', () => {
-      // Given: 準備測試數據
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並模擬短按（桌面版）
-      const { result } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 500,
-          interval: 150,
-        }),
-      );
-
-      // 模擬按下（mouseDown）
-      act(() => {
-        result.current.onMouseDown();
-      });
-
-      // 模擬在 500ms 前釋放（mouseUp）- 短按
-      act(() => {
-        vi.advanceTimersByTime(300); // 只經過 300ms
-        result.current.onMouseUp();
-      });
-
-      // Then: 驗證結果
-      expect(onLongPressMock).not.toHaveBeenCalled(); // 長按不應觸發
-    });
-
-    it('應該在觸控設備短按時觸發 onClick 回調一次', () => {
-      // Given: 準備測試數據
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並模擬短按（移動版）
-      const { result } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 500,
-          interval: 150,
-        }),
-      );
-
-      // 模擬按下（touchStart）
-      act(() => {
-        result.current.onTouchStart();
-      });
-
-      // 模擬在 500ms 前釋放（touchEnd）- 短按
-      act(() => {
-        vi.advanceTimersByTime(300);
-        result.current.onTouchEnd();
-      });
-
-      // Then: 驗證結果
-      expect(onLongPressMock).not.toHaveBeenCalled(); // 長按不應觸發
-    });
-  });
-
-  /**
-   * 場景 2：長按連續刪除（150ms 間隔）
-   * Given: 用戶需要快速刪除多個字符
-   * When: 按住刪除鈕超過 500ms
-   * Then: 應該以 150ms 間隔連續觸發刪除
-   */
-  describe('場景 2: 長按連續刪除（150ms 間隔）', () => {
-    it('應該在長按時以 150ms 間隔連續觸發', () => {
-      // Given: 準備測試數據
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並模擬長按
-      const { result } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 500,
-          interval: 150,
-        }),
-      );
-
-      // 模擬按下
-      act(() => {
-        result.current.onMouseDown();
-      });
-
-      // 驗證：500ms 後第一次觸發
-      act(() => {
-        vi.advanceTimersByTime(500);
-      });
-      expect(onLongPressMock).toHaveBeenCalledTimes(1);
-
-      // 驗證：150ms 後第二次觸發
-      act(() => {
-        vi.advanceTimersByTime(150);
-      });
-      expect(onLongPressMock).toHaveBeenCalledTimes(2);
-
-      // 驗證：再 150ms 後第三次觸發
-      act(() => {
-        vi.advanceTimersByTime(150);
-      });
-      expect(onLongPressMock).toHaveBeenCalledTimes(3);
-
-      // 驗證：再 150ms 後第四次觸發
-      act(() => {
-        vi.advanceTimersByTime(150);
-      });
-      expect(onLongPressMock).toHaveBeenCalledTimes(4);
-
-      // Then: 驗證間隔正確（150ms，非 100ms）
-    });
-
-    it('應該在觸控設備長按時以 150ms 間隔連續觸發', () => {
-      // Given: 準備測試數據
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並模擬長按（觸控）
-      const { result } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 500,
-          interval: 150,
-        }),
-      );
-
-      // 模擬按下（touchStart）
-      act(() => {
-        result.current.onTouchStart();
-      });
-
-      // 驗證：500ms + 150ms * 3 = 950ms 後應觸發 4 次
-      act(() => {
-        vi.advanceTimersByTime(950);
-      });
-
-      // Then: 驗證觸發次數
-      expect(onLongPressMock).toHaveBeenCalledTimes(4);
-    });
-  });
-
-  /**
-   * 場景 3：中途釋放停止刪除
-   * Given: 用戶正在長按刪除
-   * When: 用戶釋放按鈕或移開游標
-   * Then: 應該立即停止刪除
-   */
-  describe('場景 3: 中途釋放停止刪除', () => {
-    it('應該在 mouseUp 時停止連續刪除', () => {
-      // Given: 準備測試數據
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並模擬長按後釋放
-      const { result } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 500,
-          interval: 150,
-        }),
-      );
-
-      // 模擬按下並觸發長按
-      act(() => {
-        result.current.onMouseDown();
-        vi.advanceTimersByTime(800); // 500ms + 150ms * 2
-      });
-
-      const callCountBefore = onLongPressMock.mock.calls.length;
-
-      // 模擬釋放
-      act(() => {
-        result.current.onMouseUp();
-        vi.advanceTimersByTime(1000); // 再過很久
-      });
-
-      // Then: 驗證釋放後不再觸發
-      expect(onLongPressMock).toHaveBeenCalledTimes(callCountBefore);
-    });
-
-    it('應該在 mouseLeave 時停止連續刪除', () => {
-      // Given: 準備測試數據
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並模擬長按後移開
-      const { result } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 500,
-          interval: 150,
-        }),
-      );
-
-      // 模擬按下並觸發長按
-      act(() => {
-        result.current.onMouseDown();
-        vi.advanceTimersByTime(800);
-      });
-
-      const callCountBefore = onLongPressMock.mock.calls.length;
-
-      // 模擬移開
-      act(() => {
-        result.current.onMouseLeave();
-        vi.advanceTimersByTime(1000);
-      });
-
-      // Then: 驗證移開後不再觸發
-      expect(onLongPressMock).toHaveBeenCalledTimes(callCountBefore);
-    });
-
-    it('應該在 touchEnd 時停止連續刪除', () => {
-      // Given: 準備測試數據
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並模擬長按後釋放（觸控）
-      const { result } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 500,
-          interval: 150,
-        }),
-      );
-
-      // 模擬按下並觸發長按
-      act(() => {
-        result.current.onTouchStart();
-        vi.advanceTimersByTime(800);
-      });
-
-      const callCountBefore = onLongPressMock.mock.calls.length;
-
-      // 模擬釋放
-      act(() => {
-        result.current.onTouchEnd();
-        vi.advanceTimersByTime(1000);
-      });
-
-      // Then: 驗證釋放後不再觸發
-      expect(onLongPressMock).toHaveBeenCalledTimes(callCountBefore);
-    });
-  });
-
-  /**
-   * 場景 4：自訂參數
-   * Given: 用戶需要自訂長按行為
-   * When: 傳入自訂 threshold 和 interval
-   * Then: 應該按照自訂參數運作
-   */
-  describe('場景 4: 自訂參數', () => {
-    it('應該支援自訂 threshold', () => {
-      // Given: 準備測試數據（自訂 threshold 為 1000ms）
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並模擬長按
-      const { result } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 1000,
-          interval: 150,
-        }),
-      );
-
-      act(() => {
-        result.current.onMouseDown();
-      });
-
-      // 驗證：500ms 不應觸發（threshold 為 1000ms）
-      act(() => {
-        vi.advanceTimersByTime(500);
-      });
-      expect(onLongPressMock).not.toHaveBeenCalled();
-
-      // 驗證：1000ms 應觸發
-      act(() => {
-        vi.advanceTimersByTime(500);
-      });
-      expect(onLongPressMock).toHaveBeenCalledTimes(1);
-    });
-
-    it('應該支援自訂 interval', () => {
-      // Given: 準備測試數據（自訂 interval 為 200ms）
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並模擬長按
-      const { result } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 500,
-          interval: 200,
-        }),
-      );
-
-      act(() => {
-        result.current.onMouseDown();
-        vi.advanceTimersByTime(500); // 第一次觸發
-      });
-      expect(onLongPressMock).toHaveBeenCalledTimes(1);
-
-      // 驗證：200ms 後第二次觸發（非 150ms）
-      act(() => {
-        vi.advanceTimersByTime(200);
-      });
-      expect(onLongPressMock).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  /**
-   * 場景 5：記憶體洩漏防護
-   * Given: 組件可能在長按期間被卸載
-   * When: 組件卸載時仍有計時器運行
-   * Then: 應該清理所有計時器，避免記憶體洩漏
-   */
-  describe('場景 5: 記憶體洩漏防護', () => {
-    it('應該在組件卸載時清理計時器', () => {
-      // Given: 準備測試數據
-      const onLongPressMock = vi.fn();
-
-      // When: 渲染 hook 並在長按期間卸載
-      const { result, unmount } = renderHook(() =>
-        useLongPress({
-          onLongPress: onLongPressMock,
-          threshold: 500,
-          interval: 150,
-        }),
-      );
-
-      // 模擬按下並開始長按
-      act(() => {
-        result.current.onMouseDown();
-        vi.advanceTimersByTime(300); // 還未觸發長按
-      });
-
-      // 卸載組件
-      unmount();
-
-      // 嘗試繼續計時
-      act(() => {
-        vi.advanceTimersByTime(1000);
-      });
-
-      // Then: 驗證卸載後不再觸發（計時器已清理）
-      expect(onLongPressMock).not.toHaveBeenCalled();
-    });
-  });
-});
diff --git a/apps/ratewise/src/features/calculator/hooks/useLongPress.ts b/apps/ratewise/src/features/calculator/hooks/useLongPress.ts
deleted file mode 100644
index d5c268659..000000000
--- a/apps/ratewise/src/features/calculator/hooks/useLongPress.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useRef, useCallback, useEffect } from 'react';
-
-/**
- * Long Press Hook - iOS Calculator Standard (Optimized)
- *
- * Features:
- * - Initial delay: 500ms (iOS 標準，防誤觸)
- * - Optimized interval: 150ms (人體工學優化，避免過快刪除)
- * - Memory safe: cleans up timers on unmount
- * - Simplified: 移除 onClick 處理，讓組件自己決定（Linus KISS 原則）
- *
- * @see Web Research 2025-11-19 - iOS backspace: 0.5s initial
- * @see Bug Fix 2025-11-20 - 150ms interval 避免點一下刪兩個
- *
- * @example
- * const longPressProps = useLongPress({
- *   onLongPress: handleDelete,
- *   threshold: 500,
- *   interval: 150
- * });
- *
- * <button
- *   {...longPressProps}
- *   onClick={handleSingleClick} // 組件自己處理短按
- * >Delete</button>
- */
-
-interface UseLongPressOptions {
-  /** Callback triggered repeatedly during long press */
-  onLongPress: () => void;
-  /** Initial delay before long press activates (default: 500ms) */
-  threshold?: number;
-  /** Repeat interval after threshold (default: 150ms，人體工學優化） */
-  interval?: number;
-}
-
-export function useLongPress({
-  onLongPress,
-  threshold = 500,
-  interval = 150, // 🔧 修復：100ms → 150ms（避免過快）
-}: UseLongPressOptions) {
-  const isLongPress = useRef(false);
-  const initialTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
-  const deleteIntervalRef = useRef<NodeJS.Timeout | undefined>(undefined);
-
-  const start = useCallback(() => {
-    isLongPress.current = false;
-
-    // Initial delay (iOS 標準：500ms) prevents accidental long press
-    initialTimerRef.current = setTimeout(() => {
-      isLongPress.current = true;
-      onLongPress();
-
-      // Start optimized interval deletion (150ms 人體工學優化)
-      const repeatDelete = () => {
-        deleteIntervalRef.current = setTimeout(() => {
-          onLongPress();
-          repeatDelete(); // Recursive call for continuous deletion
-        }, interval);
-      };
-
-      repeatDelete();
-    }, threshold);
-  }, [onLongPress, threshold, interval]);
-
-  const stop = useCallback(() => {
-    // Clean up all timers
-    if (initialTimerRef.current) {
-      clearTimeout(initialTimerRef.current);
-    }
-    if (deleteIntervalRef.current) {
-      clearTimeout(deleteIntervalRef.current);
-    }
-
-    // 🔧 修復：移除 onClick 處理，讓組件自己決定（消除特殊情況）
-    // 理由：hook 只專注長按功能，短按由組件的 onClick 處理
-  }, []);
-
-  // Clean up on unmount (prevent memory leaks)
-  useEffect(() => {
-    return () => {
-      if (initialTimerRef.current) clearTimeout(initialTimerRef.current);
-      if (deleteIntervalRef.current) clearTimeout(deleteIntervalRef.current);
-    };
-  }, []);
-
-  return {
-    onMouseDown: start,
-    onMouseUp: stop,
-    onMouseLeave: stop,
-    onTouchStart: start,
-    onTouchEnd: stop,
-  };
-}
diff --git a/apps/ratewise/src/features/ratewise/RateWise.test.tsx b/apps/ratewise/src/features/ratewise/RateWise.test.tsx
index 2ca585b74..a87fbe11f 100644
--- a/apps/ratewise/src/features/ratewise/RateWise.test.tsx
+++ b/apps/ratewise/src/features/ratewise/RateWise.test.tsx
@@ -400,11 +400,10 @@ describe('RateWise Component', () => {
       );
 
       expect(screen.queryByText('匯率載入失敗')).not.toBeInTheDocument();
-      expect(screen.getByTestId('ratewise-stale-rates-warning')).toHaveTextContent(
-        '目前使用上次可用的匯率資料',
-      );
+      expect(screen.queryByTestId('ratewise-stale-rates-warning')).not.toBeInTheDocument();
       expect(screen.queryByRole('button', { name: /重新整理頁面/i })).not.toBeInTheDocument();
       expect(screen.getByTestId('amount-output')).toBeInTheDocument();
+      expect(screen.getByTestId('ratewise-data-source')).toBeInTheDocument();
     });
 
     it('does not expose a fatal reload CTA when build-time rates cover a fetch failure', async () => {
diff --git a/apps/ratewise/src/features/ratewise/RateWise.tsx b/apps/ratewise/src/features/ratewise/RateWise.tsx
index 7d1efd9cf..c046fcc59 100644
--- a/apps/ratewise/src/features/ratewise/RateWise.tsx
+++ b/apps/ratewise/src/features/ratewise/RateWise.tsx
@@ -25,7 +25,7 @@ import { formatDisplayTime } from '../../utils/timeFormatter';
 import { performFullRefresh } from '../../utils/swUtils';
 import { logger } from '../../utils/logger';
 import { SkeletonLoader } from '../../components/SkeletonLoader';
-import { rateWiseLayoutTokens } from '../../config/design-tokens';
+import { feedbackSurfaceTokens, rateWiseLayoutTokens } from '../../config/design-tokens';
 import type { CurrencyCode, RateSource, RateType } from './types';
 import { CURRENCY_DEFINITIONS } from './constants';
 import { useConverterStore } from '../../stores/converterStore';
@@ -154,16 +154,15 @@ const RateWise = () => {
   // Error state UI
   if (ratesError) {
     return (
-      <div className="min-h-dvh bg-danger-bg flex items-center justify-center p-4">
-        <div className="bg-surface rounded-2xl shadow-xl p-8 max-w-md w-full text-center">
-          <AlertCircle className="text-danger" size={48} />
-          <h1 className="text-2xl font-bold text-neutral-text mt-4">
-            {t('errors.rateLoadFailed')}
-          </h1>
-          <p className="text-neutral-text-secondary mt-2 mb-6">{t('errors.rateLoadDescription')}</p>
+      <div className={feedbackSurfaceTokens.pageCenter}>
+        <div className={feedbackSurfaceTokens.card}>
+          <AlertCircle className={feedbackSurfaceTokens.icon} size={48} />
+          <h1 className={feedbackSurfaceTokens.title}>{t('errors.rateLoadFailed')}</h1>
+          <p className={feedbackSurfaceTokens.description}>{t('errors.rateLoadDescription')}</p>
           <button
+            type="button"
             onClick={() => window.location.reload()}
-            className="w-full flex items-center justify-center gap-2 py-3 bg-danger hover:bg-danger-hover text-white font-semibold rounded-xl shadow-lg transition"
+            className={feedbackSurfaceTokens.dangerActionButton}
           >
             <RefreshCw size={18} />
             {t('errors.reloadPage')}
@@ -184,109 +183,99 @@ const RateWise = () => {
         />
       )}
 
-      {/* 頁面主容器
-       *
-       * SSOT 頁面佈局規範（2026 最佳實踐）：
-       * - 外層容器：flex flex-col min-h-full（填滿可用空間）
-       * - 內容區域：flex-1 flex flex-col px-5 py-4 max-w-md mx-auto w-full
-       * - 滾動由 AppLayout 統一處理，避免嵌套滾動
-       *
-       * @see AppLayout.tsx - 外層滾動容器
-       * @see https://web.dev/viewport-units/ - 動態視口高度
-       */}
       <div ref={mainRef} className={rateWiseLayoutTokens.container}>
         <div className={rateWiseLayoutTokens.content.className}>
-          {/* H1 由 routes.tsx SEO wrapper 提供，此處不重複 */}
-          {/* 載入狀態提示 */}
-          {ratesLoading && (
-            <div className="text-center text-sm text-neutral-text-secondary py-2">
-              載入即時匯率中...
-            </div>
-          )}
+          <div className="flex flex-col gap-6 lg:grid lg:grid-cols-[minmax(0,1.35fr)_minmax(18rem,22rem)] lg:items-start xl:grid-cols-[minmax(0,1.4fr)_minmax(20rem,24rem)]">
+            <div className="min-w-0">
+              {/* H1 由 routes.tsx SEO wrapper 提供，此處不重複 */}
+              {/* 載入狀態提示 */}
+              {ratesLoading && (
+                <div className="py-2 text-center text-sm text-neutral-text-secondary">
+                  {t('app.loadingLiveRates')}
+                </div>
+              )}
 
-          {ratesWarning && (
-            <div
-              role="status"
-              data-testid="ratewise-stale-rates-warning"
-              className="mb-3 flex items-center gap-2 rounded-xl border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning-text"
-            >
-              <AlertCircle size={14} aria-hidden="true" />
-              <span>{t('errors.rateStaleWarning')}</span>
-            </div>
-          )}
+              {ratesWarning && (
+                <div
+                  role="status"
+                  data-testid="ratewise-stale-rates-warning"
+                  className="mb-3 flex items-center gap-2 rounded-control border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning-text"
+                >
+                  <AlertCircle size={14} aria-hidden="true" />
+                  <span>{t('errors.rateStaleWarning')}</span>
+                </div>
+              )}
 
-          {/* 單幣別轉換區塊 - RWD 全頁面佈局 */}
-          <section className={rateWiseLayoutTokens.section.className}>
-            <div className={rateWiseLayoutTokens.card.className}>
-              <SingleConverter
-                fromCurrency={fromCurrency}
-                toCurrency={toCurrency}
-                fromAmount={fromAmount}
-                toAmount={toAmount}
-                exchangeRates={exchangeRates}
-                details={details}
-                rateType={rateType}
-                rateSource={effectiveRateSource}
-                moneyBoxRate={moneyBoxRate}
-                exchangeShopCurrency={exchangeShopCurrency}
-                rateMode={rateMode}
-                rateTypeAvailability={rateTypeAvailability}
-                onFromCurrencyChange={setFromCurrency}
-                onToCurrencyChange={setToCurrency}
-                onFromAmountChange={handleFromAmountChange}
-                onToAmountChange={handleToAmountChange}
-                onQuickAmount={quickAmount}
-                onSwapCurrencies={swapCurrencies}
-                onAddToHistory={addToHistory}
-                onRateTypeChange={handleRateTypeChange}
-                onRateSourceChange={handleRateSourceChange}
-              />
+              {/* 單幣別轉換區塊 - RWD 全頁面佈局 */}
+              <section className={rateWiseLayoutTokens.section.className}>
+                <div className={rateWiseLayoutTokens.card.className}>
+                  <SingleConverter
+                    fromCurrency={fromCurrency}
+                    toCurrency={toCurrency}
+                    fromAmount={fromAmount}
+                    toAmount={toAmount}
+                    exchangeRates={exchangeRates}
+                    details={details}
+                    rateType={rateType}
+                    rateSource={effectiveRateSource}
+                    moneyBoxRate={moneyBoxRate}
+                    exchangeShopCurrency={exchangeShopCurrency}
+                    rateMode={rateMode}
+                    rateTypeAvailability={rateTypeAvailability}
+                    onFromCurrencyChange={setFromCurrency}
+                    onToCurrencyChange={setToCurrency}
+                    onFromAmountChange={handleFromAmountChange}
+                    onToAmountChange={handleToAmountChange}
+                    onQuickAmount={quickAmount}
+                    onSwapCurrencies={swapCurrencies}
+                    onAddToHistory={addToHistory}
+                    onRateTypeChange={handleRateTypeChange}
+                    onRateSourceChange={handleRateSourceChange}
+                  />
+                </div>
+              </section>
+
+              {!ratesLoading && lastUpdate && (
+                <section
+                  data-testid="ratewise-data-source"
+                  className={`${rateWiseLayoutTokens.info.base} ${rateWiseLayoutTokens.info.visibility}`}
+                >
+                  <AnimatePresence mode="wait">
+                    {effectiveRateSource === 'exchange-shop' &&
+                    moneyBoxRate?.currency === exchangeShopCurrency ? (
+                      <ExchangeShopBadge key="exchange-shop-badge" rate={moneyBoxRate} />
+                    ) : (
+                      <div
+                        key="bank-badge"
+                        className="inline-flex flex-wrap items-center gap-2 text-xs text-text-muted"
+                      >
+                        <a
+                          href="https://rate.bot.com.tw/xrt?Lang=zh-TW"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex min-h-11 items-center gap-1 rounded-control px-1 font-medium transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                        >
+                          <Landmark className="h-3.5 w-3.5 text-primary/70" aria-hidden="true" />
+                          {t('rateInfo.bankOfficialRates')}
+                        </a>
+                        <span>·</span>
+                        <span>{formattedLastUpdate}</span>
+                      </div>
+                    )}
+                  </AnimatePresence>
+                </section>
+              )}
             </div>
-          </section>
 
-          {/* 收藏與貨幣列表區塊（桌面版顯示於側欄） */}
-          <section className="mb-4 hidden md:block flex-shrink-0">
-            <div className="space-y-4">
+            <aside className="hidden lg:flex lg:flex-col lg:gap-4 lg:sticky lg:top-6">
               <FavoritesList favorites={favorites} exchangeRates={exchangeRates} />
               <CurrencyList
                 favorites={favorites}
                 exchangeRates={exchangeRates}
                 onToggleFavorite={toggleFavorite}
               />
-            </div>
-          </section>
-
-          {/* 資料來源與更新時間區塊 - 現代化精簡設計，固定在底部 */}
-          {!ratesLoading && lastUpdate && (
-            <section
-              data-testid="ratewise-data-source"
-              className={`${rateWiseLayoutTokens.info.base} ${rateWiseLayoutTokens.info.visibility}`}
-            >
-              <AnimatePresence mode="wait">
-                {effectiveRateSource === 'exchange-shop' &&
-                moneyBoxRate?.currency === exchangeShopCurrency ? (
-                  <ExchangeShopBadge key="exchange-shop-badge" rate={moneyBoxRate} />
-                ) : (
-                  <div
-                    key="bank-badge"
-                    className="inline-flex items-center gap-2 text-[10px] text-text-muted/60"
-                  >
-                    <a
-                      href="https://rate.bot.com.tw/xrt?Lang=zh-TW"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline-flex items-center gap-1 hover:text-primary transition-colors"
-                    >
-                      <Landmark className="h-3 w-3 text-primary/70" aria-hidden="true" />
-                      臺灣銀行牌告
-                    </a>
-                    <span>·</span>
-                    <span>{formattedLastUpdate}</span>
-                  </div>
-                )}
-              </AnimatePresence>
-            </section>
-          )}
+            </aside>
+          </div>
         </div>
       </div>
     </>
diff --git a/apps/ratewise/src/features/ratewise/__tests__/rateProviderRanking.test.ts b/apps/ratewise/src/features/ratewise/__tests__/rateProviderRanking.test.ts
index 22e1cd11d..0b2033c53 100644
--- a/apps/ratewise/src/features/ratewise/__tests__/rateProviderRanking.test.ts
+++ b/apps/ratewise/src/features/ratewise/__tests__/rateProviderRanking.test.ts
@@ -4,6 +4,7 @@ import type {
   RateProviderRef,
   ResolvedRateProvider,
 } from '../rateProviderTypes';
+import type * as RateProvidersModule from '../../../config/rateProviders';
 import {
   rankProviderQuotes,
   resolveProviderPreference,
@@ -322,7 +323,7 @@ describe('resolveProviderPreference - 退化情境（registry default 缺失）'
   it('當 getDefaultProvider("bank") 回 null 時，硬退回 {bot, bank}', async () => {
     vi.resetModules();
     vi.doMock('../../../config/rateProviders', async () => {
-      const actual = await vi.importActual<typeof import('../../../config/rateProviders')>(
+      const actual = await vi.importActual<typeof RateProvidersModule>(
         '../../../config/rateProviders',
       );
       return {
diff --git a/apps/ratewise/src/features/ratewise/__tests__/storage.test.ts b/apps/ratewise/src/features/ratewise/__tests__/storage.test.ts
deleted file mode 100644
index baeb3b085..000000000
--- a/apps/ratewise/src/features/ratewise/__tests__/storage.test.ts
+++ /dev/null
@@ -1,351 +0,0 @@
-/**
- * Storage Utilities - Unit Tests
- *
- * [BDD:2025-12-02] 測試 localStorage 存取工具函數
- * [Coverage:2025-12-02] 目標覆蓋率 82.6% → 90%
- *
- * 測試案例：
- * 1. readString - 正常讀取、fallback、SSR 環境
- * 2. writeString - 正常寫入、SSR 環境
- * 3. readJSON - 正常讀取、JSON 解析錯誤、fallback、SSR 環境
- * 4. writeJSON - 正常寫入、SSR 環境
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { readString, writeString, readJSON, writeJSON } from '../storage';
-
-// JSDOM 安全的記憶體 localStorage，用於缺少 localStorage 的情境
-const createMemoryStorage = () => {
-  const store = new Map<string, string>();
-  return {
-    get length() {
-      return store.size;
-    },
-    clear: () => store.clear(),
-    getItem: (key: string) => (store.has(key) ? store.get(key)! : null),
-    setItem: (key: string, value: string) => store.set(key, value),
-    removeItem: (key: string) => store.delete(key),
-    key: (index: number) => Array.from(store.keys())[index] ?? null,
-  } satisfies Storage;
-};
-
-describe('Storage Utilities', () => {
-  // 保存原始 localStorage（若環境缺少，提供記憶體實作以避免綁定 undefined）
-  const originalLocalStorage: Storage = window.localStorage ?? createMemoryStorage();
-  const fallbackLocalStorage: Storage = createMemoryStorage();
-  type BindableMethod = 'getItem' | 'setItem' | 'removeItem' | 'clear' | 'key';
-
-  const bindStorageMethod = (method: BindableMethod) => {
-    const candidate = originalLocalStorage[method];
-    if (typeof candidate === 'function') {
-      return (candidate as (...args: never[]) => unknown).bind(originalLocalStorage);
-    }
-    const fallback = fallbackLocalStorage[method];
-    return typeof fallback === 'function'
-      ? (fallback as (...args: never[]) => unknown).bind(fallbackLocalStorage)
-      : fallback;
-  };
-
-  // 確保測試環境始終有可用的 localStorage，避免在綁定時取到 undefined
-  if (!window.localStorage) {
-    Object.defineProperty(window, 'localStorage', {
-      value: originalLocalStorage,
-      writable: true,
-    });
-  }
-
-  beforeEach(() => {
-    // 清空 localStorage
-    window.localStorage.clear();
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    // 恢復原始 localStorage
-    Object.defineProperty(window, 'localStorage', {
-      value: originalLocalStorage,
-      writable: true,
-    });
-  });
-
-  describe('readString', () => {
-    it('應該正確讀取已存在的字串值', () => {
-      // Given: localStorage 中有一個值
-      window.localStorage.setItem('test-key', 'test-value');
-
-      // When: 讀取該值
-      const result = readString('test-key', 'fallback');
-
-      // Then: 應該返回存儲的值
-      expect(result).toBe('test-value');
-    });
-
-    it('應該在 key 不存在時返回 fallback', () => {
-      // Given: localStorage 中沒有該 key
-
-      // When: 讀取不存在的 key
-      const result = readString('non-existent-key', 'fallback-value');
-
-      // Then: 應該返回 fallback
-      expect(result).toBe('fallback-value');
-    });
-
-    it('應該處理空字串值', () => {
-      // Given: localStorage 中有空字串
-      window.localStorage.setItem('empty-key', '');
-
-      // When: 讀取該值
-      const result = readString('empty-key', 'fallback');
-
-      // Then: 應該返回空字串（不是 fallback）
-      expect(result).toBe('');
-    });
-  });
-
-  describe('writeString', () => {
-    it('應該正確寫入字串值', () => {
-      // When: 寫入一個值
-      writeString('write-key', 'write-value');
-
-      // Then: localStorage 應該有該值
-      expect(window.localStorage.getItem('write-key')).toBe('write-value');
-    });
-
-    it('應該覆蓋已存在的值', () => {
-      // Given: localStorage 中已有值
-      window.localStorage.setItem('overwrite-key', 'old-value');
-
-      // When: 寫入新值
-      writeString('overwrite-key', 'new-value');
-
-      // Then: 應該是新值
-      expect(window.localStorage.getItem('overwrite-key')).toBe('new-value');
-    });
-  });
-
-  describe('readJSON', () => {
-    it('應該正確讀取並解析 JSON 物件', () => {
-      // Given: localStorage 中有 JSON 物件
-      const testObject = { name: 'test', value: 123 };
-      window.localStorage.setItem('json-key', JSON.stringify(testObject));
-
-      // When: 讀取該值
-      const result = readJSON<typeof testObject>('json-key', { name: '', value: 0 });
-
-      // Then: 應該返回解析後的物件
-      expect(result).toEqual(testObject);
-    });
-
-    it('應該正確讀取並解析 JSON 陣列', () => {
-      // Given: localStorage 中有 JSON 陣列
-      const testArray = ['a', 'b', 'c'];
-      window.localStorage.setItem('array-key', JSON.stringify(testArray));
-
-      // When: 讀取該值
-      const result = readJSON<string[]>('array-key', []);
-
-      // Then: 應該返回解析後的陣列
-      expect(result).toEqual(testArray);
-    });
-
-    it('應該在 key 不存在時返回 fallback', () => {
-      // Given: localStorage 中沒有該 key
-      const fallback = { default: true };
-
-      // When: 讀取不存在的 key
-      const result = readJSON('non-existent-json', fallback);
-
-      // Then: 應該返回 fallback
-      expect(result).toEqual(fallback);
-    });
-
-    it('應該在 JSON 解析失敗時返回 fallback', () => {
-      // Given: localStorage 中有無效的 JSON
-      window.localStorage.setItem('invalid-json', 'not valid json {{{');
-
-      // When: 讀取該值
-      const fallback = { error: 'fallback' };
-      const result = readJSON('invalid-json', fallback);
-
-      // Then: 應該返回 fallback
-      expect(result).toEqual(fallback);
-    });
-
-    it('應該處理 null 值', () => {
-      // Given: localStorage 中有 null
-      window.localStorage.setItem('null-key', 'null');
-
-      // When: 讀取該值
-      const result = readJSON<string | null>('null-key', 'fallback');
-
-      // Then: 應該返回 null（JSON.parse('null') = null）
-      expect(result).toBeNull();
-    });
-  });
-
-  describe('writeJSON', () => {
-    it('應該正確序列化並寫入 JSON 物件', () => {
-      // Given: 一個物件
-      const testObject = { name: 'test', value: 123 };
-
-      // When: 寫入該物件
-      writeJSON('write-json-key', testObject);
-
-      // Then: localStorage 應該有序列化後的值
-      expect(window.localStorage.getItem('write-json-key')).toBe(JSON.stringify(testObject));
-    });
-
-    it('應該正確序列化並寫入 JSON 陣列', () => {
-      // Given: 一個陣列
-      const testArray = [1, 2, 3];
-
-      // When: 寫入該陣列
-      writeJSON('write-array-key', testArray);
-
-      // Then: localStorage 應該有序列化後的值
-      expect(window.localStorage.getItem('write-array-key')).toBe(JSON.stringify(testArray));
-    });
-
-    it('應該覆蓋已存在的 JSON 值', () => {
-      // Given: localStorage 中已有 JSON 值
-      window.localStorage.setItem('overwrite-json', JSON.stringify({ old: true }));
-
-      // When: 寫入新值
-      writeJSON('overwrite-json', { new: true });
-
-      // Then: 應該是新值
-      expect(JSON.parse(window.localStorage.getItem('overwrite-json') ?? '{}')).toEqual({
-        new: true,
-      });
-    });
-  });
-
-  describe('SSR 環境 (isBrowser = false)', () => {
-    // 注意：由於 isBrowser 是在模組載入時計算的，
-    // 我們無法在測試中直接模擬 SSR 環境。
-    // 這些測試驗證了在瀏覽器環境中的行為。
-    // SSR 環境的行為已在 Layout.tsx 測試中驗證。
-
-    it('應該在 localStorage 拋出異常時優雅處理', () => {
-      // Given: localStorage.setItem 拋出異常（如 QuotaExceededError）
-      const mockSetItem = vi.fn().mockImplementation(() => {
-        throw new Error('QuotaExceededError');
-      });
-
-      Object.defineProperty(window, 'localStorage', {
-        value: {
-          ...originalLocalStorage,
-          setItem: mockSetItem,
-          getItem: bindStorageMethod('getItem'),
-          removeItem: bindStorageMethod('removeItem'),
-          clear: bindStorageMethod('clear'),
-          length: originalLocalStorage.length ?? fallbackLocalStorage.length,
-          key: bindStorageMethod('key'),
-        },
-        writable: true,
-      });
-
-      // When & Then: 寫入應該拋出異常（由調用者處理）
-      expect(() => writeString('quota-key', 'value')).toThrow('QuotaExceededError');
-    });
-
-    it('應該在 localStorage.getItem 拋出異常時優雅處理', () => {
-      // Given: localStorage.getItem 拋出異常
-      const mockGetItem = vi.fn().mockImplementation(() => {
-        throw new Error('SecurityError');
-      });
-
-      Object.defineProperty(window, 'localStorage', {
-        value: {
-          ...originalLocalStorage,
-          getItem: mockGetItem,
-          setItem: bindStorageMethod('setItem'),
-          removeItem: bindStorageMethod('removeItem'),
-          clear: bindStorageMethod('clear'),
-          length: originalLocalStorage.length ?? fallbackLocalStorage.length,
-          key: bindStorageMethod('key'),
-        },
-        writable: true,
-      });
-
-      // When & Then: 讀取應該拋出異常（由調用者處理）
-      expect(() => readString('security-key', 'fallback')).toThrow('SecurityError');
-    });
-  });
-
-  describe('SSR 環境模擬 (動態重新載入模組)', () => {
-    /**
-     * [BDD:2025-12-03] SSR 環境測試
-     * [Context7:vitest-dev/vitest] 使用 vi.resetModules() + vi.stubGlobal()
-     *
-     * 目標：覆蓋 storage.ts 的 isBrowser 分支
-     * - Line 4: if (!isBrowser) return fallback; (readString)
-     * - Line 10: if (!isBrowser) return; (writeString)
-     * - Line 15: if (!isBrowser) return fallback; (readJSON)
-     * - Line 26: if (!isBrowser) return; (writeJSON)
-     */
-
-    it('readString 應在 SSR 環境返回 fallback', async () => {
-      // Given: 模擬 SSR 環境 (window undefined)
-      vi.resetModules();
-      vi.stubGlobal('window', undefined);
-
-      // When: 動態載入模組並呼叫 readString
-      const { readString: ssrReadString } = await import('../storage');
-      const result = ssrReadString('test-key', 'ssr-fallback');
-
-      // Then: 應返回 fallback
-      expect(result).toBe('ssr-fallback');
-
-      // Cleanup
-      vi.unstubAllGlobals();
-    });
-
-    it('writeString 應在 SSR 環境靜默返回', async () => {
-      // Given: 模擬 SSR 環境 (window undefined)
-      vi.resetModules();
-      vi.stubGlobal('window', undefined);
-
-      // When: 動態載入模組並呼叫 writeString
-      const { writeString: ssrWriteString } = await import('../storage');
-
-      // Then: 不應拋出錯誤
-      expect(() => ssrWriteString('test-key', 'test-value')).not.toThrow();
-
-      // Cleanup
-      vi.unstubAllGlobals();
-    });
-
-    it('readJSON 應在 SSR 環境返回 fallback', async () => {
-      // Given: 模擬 SSR 環境 (window undefined)
-      vi.resetModules();
-      vi.stubGlobal('window', undefined);
-
-      // When: 動態載入模組並呼叫 readJSON
-      const { readJSON: ssrReadJSON } = await import('../storage');
-      const fallback = { ssr: true };
-      const result = ssrReadJSON('test-key', fallback);
-
-      // Then: 應返回 fallback
-      expect(result).toEqual(fallback);
-
-      // Cleanup
-      vi.unstubAllGlobals();
-    });
-
-    it('writeJSON 應在 SSR 環境靜默返回', async () => {
-      // Given: 模擬 SSR 環境 (window undefined)
-      vi.resetModules();
-      vi.stubGlobal('window', undefined);
-
-      // When: 動態載入模組並呼叫 writeJSON
-      const { writeJSON: ssrWriteJSON } = await import('../storage');
-
-      // Then: 不應拋出錯誤
-      expect(() => ssrWriteJSON('test-key', { data: 'test' })).not.toThrow();
-
-      // Cleanup
-      vi.unstubAllGlobals();
-    });
-  });
-});
diff --git a/apps/ratewise/src/features/ratewise/components/ConversionHistory.tsx b/apps/ratewise/src/features/ratewise/components/ConversionHistory.tsx
index 68d302595..9cdb3f623 100644
--- a/apps/ratewise/src/features/ratewise/components/ConversionHistory.tsx
+++ b/apps/ratewise/src/features/ratewise/components/ConversionHistory.tsx
@@ -1,16 +1,3 @@
-/**
- * ConversionHistory Component - Conversion History List
- * 轉換歷史記錄組件 - 轉換歷史列表
- *
- * @description ParkKeeper styled conversion history list component.
- *              Click on flag area (left) to quickly reconvert with the same currencies.
- *              Click on result area (right) to copy conversion result.
- *              ParkKeeper 風格的轉換歷史列表組件。
- *              點擊國旗區域（左側）可快速帶入相同貨幣進行換算。
- *              點擊結果區域（右側）可複製轉換結果。
- * @version 4.0.0
- */
-
 import { ArrowRight, Copy } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useRef, useCallback } from 'react';
@@ -20,17 +7,9 @@ import { useToast } from '../../../components/Toast';
 import { CURRENCY_DEFINITIONS } from '../constants';
 import { categorizeHistoryEntry } from '../../../stores/converterStore';
 
-/**
- * Props for ConversionHistory component
- * ConversionHistory 組件的屬性
- */
 interface ConversionHistoryProps {
-  /** Array of conversion history entries / 轉換歷史記錄陣列 */
   history: ConversionHistoryEntry[];
-  /** Callback when user double-clicks to reconvert / 使用者雙擊重新轉換時的回調 */
   onReconvert?: (entry: ConversionHistoryEntry) => void;
-  /** Callback to clear all history / 清除所有歷史記錄的回調 */
-  onClearAll?: () => void;
 }
 
 export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryProps) => {
@@ -48,12 +27,6 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
     [t],
   );
 
-  /**
-   * Copy conversion result to clipboard
-   * 複製轉換結果到剪貼簿
-   *
-   * @param entry - Conversion history entry to copy / 要複製的轉換歷史記錄
-   */
   const handleCopy = useCallback(
     async (entry: ConversionHistoryEntry) => {
       const text = formatConversionForCopy(entry);
@@ -67,10 +40,6 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
     [showToast, t],
   );
 
-  /**
-   * Handle single click - copy to clipboard
-   * 處理單擊 - 複製到剪貼簿
-   */
   const handleClick = useCallback(
     (entry: ConversionHistoryEntry) => {
       if (!isLongPress.current) {
@@ -81,10 +50,6 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
     [handleCopy],
   );
 
-  /**
-   * Handle double click - reconvert
-   * 處理雙擊 - 重新轉換
-   */
   const handleDoubleClick = useCallback(
     (entry: ConversionHistoryEntry) => {
       onReconvert?.(entry);
@@ -92,10 +57,6 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
     [onReconvert],
   );
 
-  /**
-   * Handle touch start - start long press timer
-   * 處理觸控開始 - 啟動長按計時器
-   */
   const handleTouchStart = useCallback(
     (entry: ConversionHistoryEntry) => {
       isLongPress.current = false;
@@ -107,10 +68,6 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
     [onReconvert],
   );
 
-  /**
-   * Handle touch end - clear long press timer
-   * 處理觸控結束 - 清除長按計時器
-   */
   const handleTouchEnd = useCallback(() => {
     if (longPressTimer.current) {
       clearTimeout(longPressTimer.current);
@@ -118,13 +75,6 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
     }
   }, []);
 
-  /**
-   * Handle keyboard events for accessibility (Enter to copy, Shift+Enter to reconvert)
-   * 處理鍵盤事件以支援無障礙（Enter 複製，Shift+Enter 重新轉換）
-   *
-   * @param event - Keyboard event / 鍵盤事件
-   * @param entry - Conversion history entry / 轉換歷史記錄
-   */
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>, entry: ConversionHistoryEntry) => {
       if (event.key === 'Enter') {
@@ -156,8 +106,8 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
             onKeyDown={(e) => handleKeyDown(e, item)}
             role="group"
             tabIndex={0}
-            className="card p-4 flex items-center gap-3 group transition-all duration-200
-                     hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary/30"
+            className="card group flex items-center gap-3 p-4 transition-[box-shadow,transform] duration-200
+                     hover:shadow-soft focus:outline-none focus:ring-2 focus:ring-primary/30"
             aria-label={t('conversionHistory.entryAriaLabel', {
               from: item.from,
               to: item.to,
@@ -166,6 +116,7 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
             })}
           >
             <button
+              type="button"
               onClick={(e) => {
                 e.stopPropagation();
                 onReconvert?.(item);
@@ -173,8 +124,8 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
               onTouchStart={() => handleTouchStart(item)}
               onTouchEnd={handleTouchEnd}
               onTouchCancel={handleTouchEnd}
-              className="flex items-center -space-x-2 flex-shrink-0 p-1 -m-1 rounded-lg
-                       hover:bg-primary/10 active:scale-95 transition-all cursor-pointer"
+              className="-m-1 flex min-h-11 min-w-11 flex-shrink-0 cursor-pointer items-center justify-center -space-x-2 rounded-control p-2
+                       transition-[background-color,transform] hover:bg-primary/10 active:scale-95"
               aria-label={t('conversionHistory.reconvertAriaLabel', {
                 from: item.from,
                 to: item.to,
@@ -185,9 +136,10 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
             </button>
 
             <button
+              type="button"
               onClick={() => handleClick(item)}
               onDoubleClick={() => handleDoubleClick(item)}
-              className="flex-1 min-w-0 flex items-center justify-between cursor-pointer hover:opacity-80 transition-opacity"
+              className="flex min-h-11 min-w-0 flex-1 cursor-pointer items-center justify-between rounded-control hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
               aria-label={t('conversionHistory.copyAriaLabel')}
             >
               <div className="text-left">
@@ -198,7 +150,7 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
                   <span className="text-primary">{item.result}</span>
                   <span className="text-primary">{item.to}</span>
                 </div>
-                <span className="text-[10px] text-text-muted opacity-60 block mt-0.5">
+                <span className="mt-0.5 block text-xs text-text-muted opacity-60">
                   {item.time}
                   {categoryLabel ? ` · ${categoryLabel}` : ''}
                 </span>
@@ -206,7 +158,7 @@ export const ConversionHistory = ({ history, onReconvert }: ConversionHistoryPro
 
               <div className="flex items-center gap-1 text-text-muted opacity-40 group-hover:opacity-100 transition-opacity flex-shrink-0 ml-2">
                 <Copy size={14} />
-                <span className="hidden sm:inline text-[10px]">{t('common.copy')}</span>
+                <span className="hidden text-xs sm:inline">{t('common.copy')}</span>
               </div>
             </button>
           </div>
diff --git a/apps/ratewise/src/features/ratewise/components/CurrencyList.tsx b/apps/ratewise/src/features/ratewise/components/CurrencyList.tsx
index af47eefab..12c421c7f 100644
--- a/apps/ratewise/src/features/ratewise/components/CurrencyList.tsx
+++ b/apps/ratewise/src/features/ratewise/components/CurrencyList.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { CURRENCY_DEFINITIONS } from '../constants';
 import type { CurrencyCode } from '../types';
 import { formatExchangeRate } from '../../../utils/currencyFormatter';
+import { contentPageTokens } from '../../../config/design-tokens';
 
 const CURRENCY_CODES = Object.keys(CURRENCY_DEFINITIONS) as CurrencyCode[];
 
@@ -21,7 +22,7 @@ export const CurrencyList = ({ favorites, exchangeRates, onToggleFavorite }: Cur
   const { t } = useTranslation();
 
   return (
-    <div className="bg-surface rounded-3xl shadow-xl p-6 border border-border/30">
+    <div className={contentPageTokens.surfaces.panel}>
       <div className="mb-4">
         <h2 className="text-xl font-bold text-text">{t('currencyList.allCurrencies')}</h2>
       </div>
@@ -33,9 +34,10 @@ export const CurrencyList = ({ favorites, exchangeRates, onToggleFavorite }: Cur
         data-testid="currency-list"
       >
         {CURRENCY_CODES.map((code) => (
-          <div
+          <button
+            type="button"
             key={`list-${code}`}
-            className="group flex items-center justify-between p-2 hover:bg-primary/5 rounded-lg transition-colors duration-200 cursor-pointer"
+            className="group flex w-full cursor-pointer items-center justify-between rounded-control p-3 text-left transition-colors duration-200 hover:bg-surface-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
             onClick={() => onToggleFavorite(code)}
           >
             <div className="flex items-center gap-2">
@@ -50,12 +52,12 @@ export const CurrencyList = ({ favorites, exchangeRates, onToggleFavorite }: Cur
                 {formatExchangeRate(exchangeRates[code] ?? 0)}
               </span>
               <Star
-                className={`${favorites.includes(code) ? 'text-favorite' : 'text-text-muted/30 opacity-0 group-hover:opacity-100'} transition-opacity duration-200`}
+                className={`${favorites.includes(code) ? 'text-favorite' : 'text-text-muted/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100'}`}
                 size={14}
                 fill={favorites.includes(code) ? 'currentColor' : 'none'}
               />
             </div>
-          </div>
+          </button>
         ))}
       </div>
     </div>
diff --git a/apps/ratewise/src/features/ratewise/components/FavoritesList.tsx b/apps/ratewise/src/features/ratewise/components/FavoritesList.tsx
index 8cf1a1b07..bfb8a9dbc 100644
--- a/apps/ratewise/src/features/ratewise/components/FavoritesList.tsx
+++ b/apps/ratewise/src/features/ratewise/components/FavoritesList.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { CURRENCY_DEFINITIONS } from '../constants';
 import type { CurrencyCode } from '../types';
 import { formatExchangeRate } from '../../../utils/currencyFormatter';
+import { contentPageTokens } from '../../../config/design-tokens';
 
 interface FavoritesListProps {
   favorites: CurrencyCode[];
@@ -18,7 +19,7 @@ export const FavoritesList = ({ favorites, exchangeRates }: FavoritesListProps)
   const { t } = useTranslation();
 
   return (
-    <div className="bg-surface rounded-3xl shadow-xl p-6 border border-border/30">
+    <div className={contentPageTokens.surfaces.panel}>
       <div className="flex items-center gap-2 mb-4">
         <Star className="text-favorite" size={20} fill="currentColor" />
         <h2 className="text-xl font-bold text-text">{t('currencyList.favoriteCurrencies')}</h2>
@@ -27,7 +28,7 @@ export const FavoritesList = ({ favorites, exchangeRates }: FavoritesListProps)
         {favorites.map((code) => (
           <div
             key={`fav-${code}`}
-            className="flex items-center justify-between p-3 bg-gradient-to-r from-primary-bg/50 to-primary-light/30 rounded-xl border border-primary/10"
+            className="flex items-center justify-between rounded-control border border-border/70 bg-surface-elevated p-3"
           >
             <div className="flex items-center gap-3">
               <span className="text-2xl">{CURRENCY_DEFINITIONS[code].flag}</span>
diff --git a/apps/ratewise/src/features/ratewise/components/MiniTrendChart.tsx b/apps/ratewise/src/features/ratewise/components/MiniTrendChart.tsx
index 7039e3b57..68f27b2fd 100644
--- a/apps/ratewise/src/features/ratewise/components/MiniTrendChart.tsx
+++ b/apps/ratewise/src/features/ratewise/components/MiniTrendChart.tsx
@@ -1,8 +1,10 @@
 import { useEffect, useRef, useMemo, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import {
   createChart,
   ColorType,
   LineStyle,
+  CrosshairMode,
   AreaSeries,
   type IChartApi,
   type ISeriesApi,
@@ -32,36 +34,28 @@ interface TooltipData {
 }
 
 /**
- * 迷你趨勢圖組件 - 現代化高級 APP 風格
- * 使用 lightweight-charts 專業金融圖表庫
- * 特色：
- * - 左到右酷炫動畫
- * - Hover/Touch 互動顯示日期和價格
- * - 觸控長按滑動支援（行動裝置）
- * - 數據 ≥ 2 天時統一延伸到最寬
- * - 現代化配色與微互動
- * - **SSOT Design Token** - 圖表顏色從 CSS Variables 獲取
+ * 迷你趨勢圖 — lightweight-charts AreaSeries。
  *
- * @version 2.0.0 - 新增觸控長按滑動 Tooltip 支援
+ * 觸控追蹤採官方 tracking-without-long-press 做法：
+ * handleScroll/handleScale 已禁用，touchstart 直接啟動 crosshair，
+ * touchmove 以 setCrosshairPosition 程式化移動。
+ *
+ * @see https://tradingview.github.io/lightweight-charts/tutorials/how_to/set-crosshair-position
  */
 export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
-  // 使用真實數據（Safari 404 問題已透過 logger.debug 降級處理修復）
   const displayData = data;
   const chartContainerRef = useRef<HTMLDivElement>(null);
   const chartRef = useRef<IChartApi | null>(null);
   const seriesRef = useRef<ISeriesApi<'Area'> | null>(null);
   const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
   const [isTouching, setIsTouching] = useState(false);
-  const touchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // 追蹤主題變化 - 用於觸發圖表重建
   const [themeVersion, setThemeVersion] = useState(0);
 
-  // MutationObserver 監聽 <html> class 變化（主題切換）
   useEffect(() => {
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
-        if (mutation.attributeName === 'class') {
+        if (mutation.attributeName === 'class' || mutation.attributeName === 'data-style') {
           setThemeVersion((v) => v + 1);
         }
       }
@@ -69,13 +63,12 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
 
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ['class'],
+      attributeFilter: ['class', 'data-style'],
     });
 
     return () => observer.disconnect();
   }, []);
 
-  // 獲取主題色彩（SSOT from CSS Variables）- themeVersion 變化時重新獲取
   // eslint-disable-next-line react-hooks/exhaustive-deps -- themeVersion 是故意的依賴，用於觸發主題切換時重建圖表
   const getThemeColors = useCallback(() => getChartColors(), [themeVersion]);
 
@@ -90,7 +83,6 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
     const minIndex = rates.indexOf(min);
     const maxIndex = rates.indexOf(max);
 
-    // 計算24小時變化
     const currentRate = rates[rates.length - 1] ?? 0;
     const rate24hAgo = rates[0] ?? 0;
     const change24h = currentRate - rate24hAgo;
@@ -102,7 +94,6 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
   useEffect(() => {
     if (!chartContainerRef.current || displayData.length < 2) return;
 
-    // 從 SSOT 獲取圖表顏色
     const chartColors = getThemeColors();
 
     const chart = createChart(chartContainerRef.current, {
@@ -114,23 +105,17 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
         vertLines: { visible: false },
         horzLines: { visible: false },
       },
-      rightPriceScale: {
-        visible: false,
-      },
-      timeScale: {
-        visible: false,
-      },
+      rightPriceScale: { visible: false },
+      timeScale: { visible: false },
       crosshair: {
-        mode: 0, // CrosshairMode.Normal - 自由移動不吸附
+        mode: CrosshairMode.Magnet,
         vertLine: {
           width: 1,
-          color: chartColors.topColor, // SSOT: 使用主題色 (40% opacity)
+          color: chartColors.topColor,
           style: LineStyle.Solid,
           labelVisible: false,
         },
-        horzLine: {
-          visible: false,
-        },
+        horzLine: { visible: false },
       },
       handleScroll: false,
       handleScale: false,
@@ -140,20 +125,23 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
 
     chartRef.current = chart;
 
-    // SSOT: 從 CSS Variables 獲取圖表配色
     const series = chart.addSeries(AreaSeries, {
-      lineColor: chartColors.lineColor, // SSOT: --color-chart-line
+      lineColor: chartColors.lineColor,
       lineWidth: 2,
-      topColor: chartColors.topColor, // SSOT: --color-chart-area-top (40% opacity)
-      bottomColor: chartColors.bottomColor, // SSOT: --color-chart-area-bottom (10% opacity)
+      topColor: chartColors.topColor,
+      bottomColor: chartColors.bottomColor,
       lineStyle: LineStyle.Solid,
+      crosshairMarkerVisible: true,
+      crosshairMarkerRadius: 4,
+      crosshairMarkerBorderWidth: 2,
+      crosshairMarkerBorderColor: chartColors.lineColor,
+      crosshairMarkerBackgroundColor: chartColors.markerBackground,
       priceLineVisible: false,
       lastValueVisible: false,
     });
 
     seriesRef.current = series;
 
-    // 轉換數據格式為 lightweight-charts 格式
     const chartData = displayData.map((point) => ({
       time: point.date,
       value: point.rate,
@@ -162,20 +150,17 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
     series.setData(chartData);
     chart.timeScale().fitContent();
 
-    // Performance mark: 趨勢圖渲染完成
     if (typeof performance !== 'undefined' && performance.mark) {
       try {
         performance.mark('rw:chart-rendered');
-        // 嘗試量測從 fetch 到渲染的總時間
         if (performance.getEntriesByName('rw:chart-fetch-start').length > 0) {
           performance.measure('rw:chart-total-time', 'rw:chart-fetch-start', 'rw:chart-rendered');
         }
       } catch {
-        // Safari 可能拒絕某些 mark/measure
+        // Safari 可能拒絕某些 mark/measure。
       }
     }
 
-    // Crosshair 移動事件 - 顯示 tooltip
     chart.subscribeCrosshairMove((param) => {
       if (param.point === undefined || !param.time || param.point.x < 0 || param.point.y < 0) {
         setTooltipData(null);
@@ -189,14 +174,13 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
               date: param.time as string,
               rate: dataPoint.value,
               x: rect.left + param.point.x,
-              y: rect.top + param.point.y,
+              y: rect.top,
             });
           }
         }
       }
     });
 
-    // 處理視窗大小變化
     const handleResize = () => {
       if (chartContainerRef.current) {
         chart.applyOptions({
@@ -218,129 +202,57 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
   }, [displayData, stats.maxIndex, stats.minIndex, getThemeColors]);
 
   /**
-   * Touch event handler - Enables tooltip after 150ms long press
-   * 觸控事件處理 - 長按 150ms 後啟動 Tooltip 滑動模式
-   *
-   * Implementation based on lightweight-charts best practices:
-   * - Long press (150ms) activates tracking mode
-   * - Touch coordinates are converted to data points
-   * - Tooltip displays date and exchange rate
-   *
+   * 觸控追蹤（官方 tracking-without-long-press 做法）。
+   * handleScroll/handleScale 已禁用，touchstart 即刻啟動 crosshair 追蹤。
    * @see https://tradingview.github.io/lightweight-charts/tutorials/how_to/set-crosshair-position
    */
+  const updateCrosshairFromTouch = useCallback((clientX: number, clientY: number) => {
+    const container = chartContainerRef.current;
+    const chart = chartRef.current;
+    const series = seriesRef.current;
+    if (!container || !chart || !series) return;
+
+    const rect = container.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+
+    const price = series.coordinateToPrice(y);
+    const time = chart.timeScale().coordinateToTime(x);
+
+    if (price === null || time === null) return;
+    if (!Number.isFinite(price as number)) return;
+
+    chart.setCrosshairPosition(price as number, time, series);
+  }, []);
+
   const handleTouchStart = useCallback(
     (e: React.TouchEvent) => {
       const touch = e.touches[0];
-      if (!touch || !chartContainerRef.current || !chartRef.current || !seriesRef.current) return;
-
-      // Store initial touch position for use in timer callback
-      const initialClientX = touch.clientX;
-      const initialClientY = touch.clientY;
-
-      touchTimerRef.current = setTimeout(() => {
-        setIsTouching(true);
-
-        // Calculate tooltip data immediately when long press is detected
-        const container = chartContainerRef.current;
-        const chart = chartRef.current;
-        if (container && chart) {
-          const rect = container.getBoundingClientRect();
-          const x = initialClientX - rect.left;
-
-          // Convert screen coordinate to logical index
-          const timeScale = chart.timeScale();
-          const logical = timeScale.coordinateToLogical(x);
-
-          if (logical !== null && logical >= 0 && logical < displayData.length) {
-            const dataPoint = displayData[Math.round(logical)];
-            if (dataPoint) {
-              setTooltipData({
-                date: dataPoint.date,
-                rate: dataPoint.rate,
-                x: initialClientX,
-                y: initialClientY - 20,
-              });
-            }
-          }
-        }
-      }, 150); // 150ms long press threshold
+      if (!touch) return;
+
+      setIsTouching(true);
+      updateCrosshairFromTouch(touch.clientX, touch.clientY);
     },
-    [displayData],
+    [updateCrosshairFromTouch],
   );
 
-  /**
-   * Handle touch move event for tooltip tracking (native event handler)
-   * 處理觸控滑動事件以追蹤 Tooltip 位置（原生事件處理器）
-   *
-   * IMPORTANT: This is a native TouchEvent handler, NOT a React.TouchEvent handler.
-   * React's synthetic event handlers are passive by default, preventing preventDefault().
-   * We use useEffect to attach this handler with { passive: false } to enable preventDefault().
-   *
-   * Uses lightweight-charts API:
-   * - coordinateToLogical() converts x coordinate to data index
-   * - setCrosshairPosition() programmatically moves the crosshair
-   *
-   * @see https://tradingview.github.io/lightweight-charts/tutorials/how_to/set-crosshair-position
-   * @see https://stackoverflow.com/questions/63663025/react-onwheel-handler-cant-preventdefault-because-its-a-passive-event-listener
-   */
   const handleTouchMoveNative = useCallback(
     (e: TouchEvent) => {
       if (!isTouching) return;
-      e.preventDefault(); // Prevent page scrolling while tracking (works with passive: false)
+      e.preventDefault();
 
       const touch = e.touches[0];
-      if (!touch || !chartContainerRef.current || !chartRef.current || !seriesRef.current) return;
-
-      const container = chartContainerRef.current;
-      const rect = container.getBoundingClientRect();
-      const x = touch.clientX - rect.left;
-
-      // Convert screen coordinate to logical data index
-      const timeScale = chartRef.current.timeScale();
-      const logical = timeScale.coordinateToLogical(x);
-
-      if (logical !== null && logical >= 0 && logical < displayData.length) {
-        const index = Math.round(logical);
-        const dataPoint = displayData[index];
-        if (dataPoint) {
-          // Update tooltip data with touch position
-          setTooltipData({
-            date: dataPoint.date,
-            rate: dataPoint.rate,
-            x: touch.clientX,
-            y: touch.clientY - 20, // Position tooltip above finger
-          });
-
-          // Programmatically set crosshair position for visual feedback
-          try {
-            chartRef.current.setCrosshairPosition(
-              dataPoint.rate,
-              dataPoint.date,
-              seriesRef.current,
-            );
-          } catch {
-            // Silently fail if setCrosshairPosition is not supported
-          }
-        }
-      }
+      if (!touch) return;
+
+      updateCrosshairFromTouch(touch.clientX, touch.clientY);
     },
-    [isTouching, displayData],
+    [isTouching, updateCrosshairFromTouch],
   );
 
-  /**
-   * Attach touchmove event listener with passive: false
-   * 附加 touchmove 事件監聽器，設定 passive: false 以支援 preventDefault()
-   *
-   * React's synthetic events are passive by default for touch/wheel events.
-   * To call preventDefault(), we must use native addEventListener with { passive: false }.
-   *
-   * @see https://stackoverflow.com/questions/76406592/how-to-do-passivefalse-event-listeners-in-react
-   */
   useEffect(() => {
     const container = chartContainerRef.current;
     if (!container) return;
 
-    // Add non-passive touchmove listener to enable preventDefault()
     container.addEventListener('touchmove', handleTouchMoveNative, { passive: false });
 
     return () => {
@@ -348,29 +260,17 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
     };
   }, [handleTouchMoveNative]);
 
-  /**
-   * Handle touch end event to clean up tracking state
-   * 處理觸控結束事件以清理追蹤狀態
-   *
-   * @see https://tradingview.github.io/lightweight-charts/tutorials/how_to/set-crosshair-position
-   */
   const handleTouchEnd = useCallback(() => {
-    if (touchTimerRef.current) {
-      clearTimeout(touchTimerRef.current);
-      touchTimerRef.current = null;
-    }
     setIsTouching(false);
     setTooltipData(null);
 
-    // Clear crosshair position when touch ends
     try {
       chartRef.current?.clearCrosshairPosition();
     } catch {
-      // Silently fail if clearCrosshairPosition is not supported
+      // Silently fail。
     }
   }, []);
 
-  // 數據不足時不顯示圖表
   if (displayData.length < 2) {
     return null;
   }
@@ -384,8 +284,6 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
       transition={chartTransitions.fadeIn}
       whileHover={{ scale: 1.01, y: -2 }}
     >
-      {/* Lightweight Charts 趨勢圖 - 支援觸控 */}
-      {/* Note: touchmove handler attached via useEffect with { passive: false } */}
       <div
         ref={chartContainerRef}
         data-testid="mini-trend-chart-surface"
@@ -395,49 +293,42 @@ export function MiniTrendChart({ data, className = '' }: MiniTrendChartProps) {
         onTouchCancel={handleTouchEnd}
       />
 
-      {/* Hover Tooltip - SSOT 主題色設計 */}
-      <AnimatePresence>
-        {tooltipData && (
-          <motion.div
-            initial={{ opacity: 0, scale: 0.85, y: 8 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.85, y: 8 }}
-            transition={chartTransitions.tooltipBounce}
-            className="pointer-events-none"
-            style={{
-              position: 'fixed',
-              left: `${tooltipData.x}px`,
-              top: `${tooltipData.y - 55}px`,
-              zIndex: 99999,
-              transform: 'translateX(-50%)',
-            }}
-          >
-            {/* SSOT: 使用主題色 Tooltip (card/foreground/primary) */}
-            <div className="relative">
-              <div className="bg-card/98 backdrop-blur-md px-3 py-1.5 rounded-lg shadow-2xl border-2 border-border">
-                <div className="flex items-center gap-2.5 text-[11px] leading-tight whitespace-nowrap">
-                  <span className="text-primary font-semibold">{tooltipData.date}</span>
-                  <span className="text-foreground font-bold">
-                    {formatExchangeRate(tooltipData.rate)}
-                  </span>
+      {createPortal(
+        <AnimatePresence>
+          {tooltipData && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.85, y: 8 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.85, y: 8 }}
+              transition={chartTransitions.tooltipBounce}
+              className="pointer-events-none"
+              style={{
+                position: 'fixed',
+                left: `${tooltipData.x}px`,
+                top: `${tooltipData.y - 55}px`,
+                zIndex: 99999,
+                x: '-50%',
+              }}
+            >
+              <div className="relative">
+                <div className="rounded-control border border-border/70 bg-surface/95 px-3 py-1.5 shadow-floating backdrop-blur-sm">
+                  <div className="flex items-center gap-2.5 text-xs leading-tight whitespace-nowrap">
+                    <span className="text-primary font-semibold">{tooltipData.date}</span>
+                    <span className="text-text font-bold">
+                      {formatExchangeRate(tooltipData.rate)}
+                    </span>
+                  </div>
                 </div>
+                <div
+                  className="absolute -bottom-[5px] left-1/2 h-2.5 w-2.5 -translate-x-1/2 rotate-45 border-b border-r border-border/70 bg-surface/95"
+                  aria-hidden="true"
+                />
               </div>
-              {/* 小三角形指示器 - 使用 card 色 */}
-              <div
-                className="absolute left-1/2 -bottom-[5px] transform -translate-x-1/2"
-                style={{
-                  width: 0,
-                  height: 0,
-                  borderLeft: '5px solid transparent',
-                  borderRight: '5px solid transparent',
-                  borderTop: '5px solid rgb(var(--color-card) / 0.98)',
-                  filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))',
-                }}
-              />
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+            </motion.div>
+          )}
+        </AnimatePresence>,
+        document.body,
+      )}
     </motion.div>
   );
 }
diff --git a/apps/ratewise/src/features/ratewise/components/MultiConverter.tsx b/apps/ratewise/src/features/ratewise/components/MultiConverter.tsx
index ac0995a38..166473905 100644
--- a/apps/ratewise/src/features/ratewise/components/MultiConverter.tsx
+++ b/apps/ratewise/src/features/ratewise/components/MultiConverter.tsx
@@ -10,7 +10,8 @@ import { formatExchangeRate, formatAmountDisplay } from '../../../utils/currency
 import { RateTypeTooltip } from '../../../components/RateTypeTooltip';
 import { useCalculatorModal } from '../hooks/useCalculatorModal';
 import {
-  getCurrencyRateTypeAvailability,
+  getPairRateTypeAvailability,
+  resolveRateTypeByAvailability,
   getUnitExchangeRate,
 } from '../../../utils/exchangeRateCalculation';
 import {
@@ -18,6 +19,7 @@ import {
   type ExchangeShopRatesByCurrency,
 } from '../../../services/moneyboxRateService';
 import { CalculatorKeyboard } from '../../calculator/components/CalculatorKeyboard';
+import { quickAmountButtonTokens } from '../../../config/design-tokens';
 
 type UnifiedRateOption = 'spot' | 'cash' | 'exchange-shop';
 
@@ -31,7 +33,6 @@ interface MultiConverterProps {
   details?: Record<string, RateDetails>;
   exchangeShopRatesByCurrency?: ExchangeShopRatesByCurrency;
   favorites: CurrencyCode[];
-  exchangeShopCurrencies?: CurrencyCode[];
   onAmountChange: (code: CurrencyCode, value: string) => void;
   onQuickAmount: (amount: number) => void;
   onRateTypeChange: (type: RateType) => void;
@@ -50,7 +51,6 @@ export const MultiConverter = ({
   details,
   exchangeShopRatesByCurrency = {},
   favorites,
-  exchangeShopCurrencies = [],
   onAmountChange,
   onQuickAmount,
   onRateTypeChange,
@@ -81,13 +81,15 @@ export const MultiConverter = ({
     current: UnifiedRateOption;
     availableCount: number;
   } => {
-    const bankAvailability = getCurrencyRateTypeAvailability(currency, details);
-    const hasExchangeShop = exchangeShopCurrencies.includes(currency);
+    const bankAvailability = getPairRateTypeAvailability(baseCurrency, currency, details);
+    const hasExchangeShop =
+      getExchangeShopRateForPair(baseCurrency, currency, exchangeShopRatesByCurrency) !== null;
+    const resolvedRateType = resolveRateTypeByAvailability(rateType, bankAvailability);
 
     const current: UnifiedRateOption =
       rateSource === 'exchange-shop' && hasExchangeShop
         ? 'exchange-shop'
-        : rateType === 'spot' && bankAvailability.spot
+        : resolvedRateType === 'spot'
           ? 'spot'
           : 'cash';
 
@@ -186,6 +188,7 @@ export const MultiConverter = ({
         {(CURRENCY_QUICK_AMOUNTS[baseCurrency] || CURRENCY_QUICK_AMOUNTS.TWD).map(
           (amount: number) => (
             <button
+              type="button"
               key={amount}
               onClick={() => {
                 onQuickAmount(amount);
@@ -193,15 +196,7 @@ export const MultiConverter = ({
                   navigator.vibrate(30);
                 }
               }}
-              className="
-                flex-shrink-0 px-3 py-1.5 rounded-xl text-sm font-semibold
-                bg-surface-elevated text-text/70
-                hover:bg-primary/10 hover:text-primary
-                active:bg-primary/20 active:text-primary
-                transition-all duration-200 ease-out
-                hover:scale-[1.03] active:scale-[0.97]
-                hover:shadow-md active:shadow-sm
-              "
+              className={quickAmountButtonTokens.className}
             >
               {amount.toLocaleString()}
             </button>
@@ -222,11 +217,7 @@ export const MultiConverter = ({
             return (
               <div
                 key={code}
-                onClick={() => {
-                  if (!isBase) {
-                    onBaseCurrencyChange(code);
-                  }
-                }}
+                data-testid="multi-currency-row"
                 className={`${activeHighlight.itemBaseClass} transition-colors duration-200 ${
                   isBase ? activeHighlight.itemActiveClass : activeHighlight.itemInactiveClass
                 }`}
@@ -246,6 +237,7 @@ export const MultiConverter = ({
                       </div>
                     ) : favorites.includes(code) ? (
                       <button
+                        type="button"
                         onClick={(e) => {
                           e.stopPropagation();
                           onToggleFavorite(code);
@@ -257,6 +249,7 @@ export const MultiConverter = ({
                       </button>
                     ) : (
                       <button
+                        type="button"
                         onClick={(e) => {
                           e.stopPropagation();
                           onToggleFavorite(code);
@@ -271,21 +264,27 @@ export const MultiConverter = ({
                   <span className="text-xl flex-shrink-0 w-7 text-center leading-none">
                     {CURRENCY_DEFINITIONS[code].flag}
                   </span>
-                  <div className="min-w-0">
+                  <div
+                    className="min-w-0 cursor-pointer"
+                    onClick={() => {
+                      if (!isBase) {
+                        onBaseCurrencyChange(code);
+                      }
+                    }}
+                  >
                     <div className="font-semibold text-sm leading-tight">{code}</div>
-                    <div className="text-[11px] opacity-60 leading-tight truncate">
+                    <div className="text-[11px] font-medium text-text leading-tight truncate">
                       {t(`currencies.${code}`)}
                     </div>
                   </div>
                 </div>
 
                 <div className="relative z-10 flex-1 min-w-0 ml-2">
-                  <div
+                  <button
+                    type="button"
                     ref={(el) => {
-                      inputRefs.current[code] = el;
+                      inputRefs.current[code] = el as unknown as HTMLDivElement;
                     }}
-                    role="button"
-                    tabIndex={0}
                     onClick={(e) => {
                       e.stopPropagation();
                       calculator.openCalculator(code);
@@ -296,15 +295,15 @@ export const MultiConverter = ({
                         calculator.openCalculator(code);
                       }
                     }}
-                    className="text-right text-base font-bold leading-tight cursor-pointer transition hover:opacity-80"
+                    className="block w-full text-right text-base font-bold leading-tight cursor-pointer transition hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                     aria-label={t('multiConverter.amountClickCalculator', {
                       name: t(`currencies.${code}`),
                       code,
                     })}
                   >
                     {formatAmountDisplay(multiAmounts[code] ?? '', code) || '0.00'}
-                  </div>
-                  <div className="text-[11px] text-right leading-tight opacity-70 mt-0.5">
+                  </button>
+                  <div className="text-[11px] text-right leading-tight text-text mt-0.5">
                     {(() => {
                       const availability = getUnifiedRateAvailability(code);
                       const nextOption = getNextAvailableOption(availability);
@@ -312,11 +311,12 @@ export const MultiConverter = ({
 
                       return canToggle ? (
                         <button
+                          type="button"
                           onClick={(e) => {
                             e.stopPropagation();
                             handleUnifiedToggle(code);
                           }}
-                          className="font-semibold text-primary hover:text-primary-hover transition-colors"
+                          className="font-semibold text-primary-dark hover:text-primary-darker transition-colors"
                           aria-label={t('multiConverter.switchToNextRate', {
                             next: getOptionLabel(nextOption),
                           })}
@@ -329,7 +329,8 @@ export const MultiConverter = ({
                           isDisabled={true}
                         >
                           <button
-                            className="font-medium opacity-60 cursor-help hover:opacity-80 transition-opacity"
+                            type="button"
+                            className="font-medium text-text cursor-help"
                             aria-label={t('multiConverter.onlyOneRateAvailable')}
                           >
                             {getOptionLabel(availability.current)}
@@ -337,7 +338,7 @@ export const MultiConverter = ({
                         </RateTypeTooltip>
                       );
                     })()}
-                    <span className="opacity-80"> · {getRateDisplay(code)}</span>
+                    <span> · {getRateDisplay(code)}</span>
                   </div>
                 </div>
               </div>
diff --git a/apps/ratewise/src/features/ratewise/components/RateProviderMenu.tsx b/apps/ratewise/src/features/ratewise/components/RateProviderMenu.tsx
deleted file mode 100644
index 158156e92..000000000
--- a/apps/ratewise/src/features/ratewise/components/RateProviderMenu.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useMemo } from 'react';
-import {
-  getProvidersBySourceKind,
-  shouldEnableBankProviderChoice,
-  type RateProviderConfig,
-} from '../../../config/rateProviders';
-import type { ProviderSelectionMode, RateProviderRef, RateSourceKind } from '../rateProviderTypes';
-
-export interface RateProviderMenuProps {
-  selectedRef?: RateProviderRef;
-  selectionMode: ProviderSelectionMode;
-  onSelectBest?: () => void;
-  onSelectProvider?: (ref: RateProviderRef) => void;
-  labels?: {
-    bestRecommendation?: string;
-    menuAriaLabel?: string;
-  };
-}
-
-const DEFAULT_LABELS = {
-  bestRecommendation: '推薦最佳',
-  menuAriaLabel: '匯率來源 provider 選單',
-} as const;
-
-function renderProviderItems(args: {
-  providers: RateProviderConfig[];
-  sourceKind: RateSourceKind;
-  selectionMode: ProviderSelectionMode;
-  selectedRef?: RateProviderRef;
-  onSelectProvider?: (ref: RateProviderRef) => void;
-}) {
-  const { providers, sourceKind, selectionMode, selectedRef, onSelectProvider } = args;
-  return providers.map((provider) => {
-    const isChecked =
-      selectionMode === 'manual' &&
-      selectedRef?.sourceKind === sourceKind &&
-      selectedRef.providerId === provider.id;
-    return (
-      <button
-        key={provider.id}
-        type="button"
-        role="menuitemradio"
-        aria-checked={isChecked}
-        onClick={() => onSelectProvider?.({ sourceKind, providerId: provider.id })}
-        data-testid={`rate-provider-menu-item-${provider.id}`}
-      >
-        {provider.label}
-      </button>
-    );
-  });
-}
-
-export function RateProviderMenu({
-  selectedRef,
-  selectionMode,
-  onSelectBest,
-  onSelectProvider,
-  labels,
-}: RateProviderMenuProps) {
-  const isEnabled = shouldEnableBankProviderChoice();
-
-  const banks = useMemo(() => (isEnabled ? getProvidersBySourceKind('bank') : []), [isEnabled]);
-  const shops = useMemo(
-    () => (isEnabled ? getProvidersBySourceKind('exchange-shop') : []),
-    [isEnabled],
-  );
-
-  if (!isEnabled) return null;
-
-  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-
-  return (
-    <div role="menu" aria-label={resolvedLabels.menuAriaLabel} data-testid="rate-provider-menu">
-      <button
-        type="button"
-        role="menuitemradio"
-        aria-checked={selectionMode === 'best'}
-        onClick={() => onSelectBest?.()}
-        data-testid="rate-provider-menu-item-best"
-      >
-        {resolvedLabels.bestRecommendation}
-      </button>
-      {renderProviderItems({
-        providers: banks,
-        sourceKind: 'bank',
-        selectionMode,
-        selectedRef,
-        onSelectProvider,
-      })}
-      {renderProviderItems({
-        providers: shops,
-        sourceKind: 'exchange-shop',
-        selectionMode,
-        selectedRef,
-        onSelectProvider,
-      })}
-    </div>
-  );
-}
diff --git a/apps/ratewise/src/features/ratewise/components/RateSelector.tsx b/apps/ratewise/src/features/ratewise/components/RateSelector.tsx
index 20b540068..6e0c467a1 100644
--- a/apps/ratewise/src/features/ratewise/components/RateSelector.tsx
+++ b/apps/ratewise/src/features/ratewise/components/RateSelector.tsx
@@ -62,7 +62,7 @@ export const RateSelector = ({
       {isActive && (
         <motion.div
           layoutId="rate-selector-indicator"
-          className="absolute inset-0 rounded-full bg-primary shadow-md"
+          className="absolute inset-0 rounded-full bg-primary shadow-soft"
           transition={segmentedSwitch.indicator}
         />
       )}
@@ -71,7 +71,7 @@ export const RateSelector = ({
 
   return (
     <div
-      className={`grid h-7 ${optionCountClass} max-w-[calc(100%_-_1.5rem)] bg-background/80 backdrop-blur-md rounded-full p-0.5 shadow-sm border border-border/60 ${singleConverterLayoutTokens.rateCard.rateTypeContainer}`}
+      className={`grid h-7 ${optionCountClass} max-w-[calc(100%_-_1.5rem)] rounded-full border border-border/60 bg-background/80 p-0.5 shadow-soft backdrop-blur-md ${singleConverterLayoutTokens.rateCard.rateTypeContainer}`}
       role="group"
       aria-label={t('singleConverter.rateTypeGroup')}
     >
@@ -91,8 +91,8 @@ export const RateSelector = ({
             whileHover={isUnavailable ? undefined : segmentedSwitch.item.whileHover}
             whileTap={isUnavailable ? undefined : segmentedSwitch.item.whileTap}
             animate={{ opacity: isActive ? 1 : segmentedSwitch.inactiveOpacity }}
-            className={`flex h-6 min-h-0 min-w-0 items-center justify-center gap-0.5 whitespace-nowrap leading-none ${singleConverterLayoutTokens.rateCard.rateTypeButton} rounded-full font-semibold relative ${
-              isActive ? 'text-white' : 'text-text/70 hover:text-text'
+            className={`relative flex h-6 min-h-0 min-w-0 items-center justify-center gap-0.5 whitespace-nowrap leading-none after:absolute after:-inset-y-2.5 after:inset-x-0 after:content-[''] ${singleConverterLayoutTokens.rateCard.rateTypeButton} rounded-full font-semibold ${
+              isActive ? 'text-primary-foreground' : 'text-text/70 hover:text-text'
             } ${isUnavailable ? 'cursor-not-allowed' : ''}`}
             aria-label={option.ariaLabel}
             aria-pressed={isActive}
@@ -132,8 +132,10 @@ export const RateSelector = ({
           animate={{
             opacity: rateSource === 'exchange-shop' ? 1 : segmentedSwitch.inactiveOpacity,
           }}
-          className={`flex h-6 min-h-0 min-w-0 items-center justify-center gap-0.5 whitespace-nowrap leading-none ${singleConverterLayoutTokens.rateCard.rateTypeButton} rounded-full font-semibold relative ${
-            rateSource === 'exchange-shop' ? 'text-white' : 'text-text/70 hover:text-text'
+          className={`relative flex h-6 min-h-0 min-w-0 items-center justify-center gap-0.5 whitespace-nowrap leading-none after:absolute after:-inset-y-2.5 after:inset-x-0 after:content-[''] ${singleConverterLayoutTokens.rateCard.rateTypeButton} rounded-full font-semibold ${
+            rateSource === 'exchange-shop'
+              ? 'text-primary-foreground'
+              : 'text-text/70 hover:text-text'
           }`}
           aria-pressed={rateSource === 'exchange-shop'}
           aria-label={t('singleConverter.switchToExchangeShop')}
diff --git a/apps/ratewise/src/features/ratewise/components/SingleConverter.tsx b/apps/ratewise/src/features/ratewise/components/SingleConverter.tsx
index 272240b98..ef29b9881 100644
--- a/apps/ratewise/src/features/ratewise/components/SingleConverter.tsx
+++ b/apps/ratewise/src/features/ratewise/components/SingleConverter.tsx
@@ -33,7 +33,10 @@ import {
   fetchLatestRates,
 } from '../../../services/exchangeRateHistoryService';
 import { formatExchangeRate, formatAmountDisplay } from '../../../utils/currencyFormatter';
-import { singleConverterLayoutTokens } from '../../../config/design-tokens';
+import {
+  quickAmountButtonTokens,
+  singleConverterLayoutTokens,
+} from '../../../config/design-tokens';
 // 直接 import 以確保離線冷啟動可用
 import { CalculatorKeyboard } from '../../calculator/components/CalculatorKeyboard';
 import { logger } from '../../../utils/logger';
@@ -122,8 +125,8 @@ export const SingleConverter = ({
   const swapButtonRef = useRef<HTMLButtonElement>(null);
 
   // 輸入框 refs（用於焦點管理）
-  const fromInputRef = useRef<HTMLDivElement>(null);
-  const toInputRef = useRef<HTMLDivElement>(null);
+  const fromInputRef = useRef<HTMLButtonElement>(null);
+  const toInputRef = useRef<HTMLButtonElement>(null);
 
   // 計算機鍵盤狀態（使用統一的 Hook）
   const calculator = useCalculatorModal<'from' | 'to'>({
@@ -221,7 +224,7 @@ export const SingleConverter = ({
         if (!isMounted) return;
         setLoadingTrend(true);
         const exchangeShopLatestRate = moneyBoxRate
-          ? computeConverterRate(moneyBoxRate, fromCurrency, toCurrency)
+          ? computeConverterRate(moneyBoxRate, fromCurrency, toCurrency, rateMode)
           : null;
         const shouldUseExchangeShopTrend =
           rateSource === 'exchange-shop' &&
@@ -239,7 +242,7 @@ export const SingleConverter = ({
 
           const historyPoints = historicalRates
             .map(({ date, rate }) => {
-              const converterRate = computeConverterRate(rate, fromCurrency, toCurrency);
+              const converterRate = computeConverterRate(rate, fromCurrency, toCurrency, rateMode);
               return converterRate && Number.isFinite(converterRate) && converterRate > 0
                 ? { date, rate: converterRate }
                 : null;
@@ -364,7 +367,15 @@ export const SingleConverter = ({
         clearTimeout(idleHandle as ReturnType<typeof setTimeout>);
       }
     };
-  }, [fromCurrency, toCurrency, trendDateKey, rateSource, moneyBoxRate, exchangeShopCurrency]);
+  }, [
+    fromCurrency,
+    toCurrency,
+    trendDateKey,
+    rateSource,
+    rateMode,
+    moneyBoxRate,
+    exchangeShopCurrency,
+  ]);
 
   // 開發工具：強制觸發骨架屏效果（僅開發模式）
   /* v8 ignore next 22 */
@@ -405,7 +416,7 @@ export const SingleConverter = ({
           <select
             value={fromCurrency}
             onChange={(e) => onFromCurrencyChange(e.target.value as CurrencyCode)}
-            className="absolute left-3 top-1/2 -translate-y-1/2 bg-primary/10 text-text rounded-lg px-2 py-1.5 text-base font-semibold border border-primary/20 focus:outline-none focus:ring-2 focus:ring-primary/40 transition-all duration-200"
+            className="absolute left-3 top-1/2 min-h-11 -translate-y-1/2 rounded-control border border-border/80 bg-surface-elevated px-2 py-2 text-base font-semibold text-text shadow-soft transition-[border-color,box-shadow,color,background-color] duration-200 focus:outline-none focus:ring-2 focus:ring-primary/25"
             aria-label={t('singleConverter.selectFromCurrency')}
           >
             {CURRENCY_CODES.map((code) => (
@@ -415,10 +426,9 @@ export const SingleConverter = ({
             ))}
           </select>
           {/* 金額輸入框 - 點擊開啟計算機鍵盤 */}
-          <div
+          <button
+            type="button"
             ref={fromInputRef}
-            role="button"
-            tabIndex={0}
             data-testid="amount-input"
             onClick={() => calculator.openCalculator('from')}
             onKeyDown={(e) => {
@@ -427,11 +437,11 @@ export const SingleConverter = ({
                 calculator.openCalculator('from');
               }
             }}
-            className={`w-full pl-32 pr-4 ${singleConverterLayoutTokens.amountInput.className} font-bold text-right bg-surface border-2 border-border/60 rounded-2xl cursor-pointer hover:border-primary/60 focus:outline-none focus:border-primary focus:ring-4 focus:ring-primary/20 transition-[border-color,box-shadow] duration-300`}
+            className={`block w-full appearance-none rounded-control border-2 border-border/60 bg-surface pl-32 pr-4 ${singleConverterLayoutTokens.amountInput.className} cursor-pointer font-bold text-right text-text transition-[border-color,box-shadow,background-color] duration-300 hover:border-primary/60 focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/20`}
             aria-label={`${t('singleConverter.fromAmountLabel', { code: fromCurrency })}: ${formatAmountDisplay(fromAmount, fromCurrency) || '0.00'}`}
           >
             {formatAmountDisplay(fromAmount, fromCurrency) || '0.00'}
-          </div>
+          </button>
         </div>
         {/* 快速金額按鈕 - 來源貨幣
          *
@@ -458,6 +468,7 @@ export const SingleConverter = ({
         >
           {(CURRENCY_QUICK_AMOUNTS[fromCurrency] || CURRENCY_QUICK_AMOUNTS.TWD).map((amount) => (
             <button
+              type="button"
               key={amount}
               onClick={() => {
                 // 直接更新來源金額，繞過 mode 狀態依賴
@@ -467,15 +478,7 @@ export const SingleConverter = ({
                   navigator.vibrate(30);
                 }
               }}
-              className="
-                flex-shrink-0 px-3 py-1.5 rounded-xl text-sm font-semibold
-                bg-surface-elevated text-text/70
-                hover:bg-primary/10 hover:text-primary
-                active:bg-primary/20 active:text-primary
-                transition-all duration-200 ease-out
-                hover:scale-[1.03] active:scale-[0.97]
-                hover:shadow-md active:shadow-sm
-              "
+              className={quickAmountButtonTokens.className}
             >
               {amount.toLocaleString()}
             </button>
@@ -486,19 +489,11 @@ export const SingleConverter = ({
       <div className={singleConverterLayoutTokens.rateCard.section}>
         {/* 匯率卡片 - 一體化設計，無切分感 */}
         <div
-          className={`relative bg-gradient-to-b from-surface-card to-surface-elevated rounded-xl w-full group cursor-pointer hover:shadow-xl transition-all duration-500 border border-border/50 hover:border-primary/30 ${singleConverterLayoutTokens.rateCard.cardSpacing}`}
+          className={`group relative w-full rounded-card border border-border/80 bg-surface shadow-soft transition-[border-color,box-shadow] duration-300 hover:border-primary/20 hover:shadow-floating ${singleConverterLayoutTokens.rateCard.cardSpacing}`}
         >
-          {/*
-           * 微光效果 - 極淺的漸層覆蓋
-           * 使用 aspect-square + object-cover 確保等比例不變形
-           */}
-          <div className="absolute inset-0 overflow-hidden rounded-xl pointer-events-none">
-            <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-          </div>
-
           {/* 匯率資訊區塊 - 透明背景繼承父元素漸層 */}
           <div
-            className={`relative text-center px-4 flex flex-col items-center justify-center transition-transform duration-300 group-hover:scale-[1.02] rounded-t-xl overflow-hidden ${singleConverterLayoutTokens.rateCard.infoPadding}`}
+            className={`relative flex flex-col items-center justify-center overflow-hidden rounded-t-control px-4 text-center ${singleConverterLayoutTokens.rateCard.infoPadding}`}
           >
             <RateSelector
               rateType={rateType}
@@ -512,12 +507,12 @@ export const SingleConverter = ({
             {/* 匯率顯示 - 使用 SSOT text 色 */}
             <div className="w-full">
               <div
-                className={`${singleConverterLayoutTokens.rateCard.rateText} font-bold tabular-nums text-text mb-1 transition-transform duration-300 group-hover:scale-105`}
+                className={`${singleConverterLayoutTokens.rateCard.rateText} mb-1 font-semibold tabular-nums text-text`}
               >
                 1 {fromCurrency} = {formatExchangeRate(exchangeRate)} {toCurrency}
               </div>
               <div
-                className={`${singleConverterLayoutTokens.rateCard.rateSubText} tabular-nums text-text-muted font-semibold opacity-80 group-hover:opacity-95 transition-opacity`}
+                className={`${singleConverterLayoutTokens.rateCard.rateSubText} font-medium tabular-nums text-text-muted`}
               >
                 1 {toCurrency} = {formatExchangeRate(reverseRate)} {fromCurrency}
               </div>
@@ -527,15 +522,15 @@ export const SingleConverter = ({
           {/* 滿版趨勢圖 - 無獨立背景，繼承父元素漸層實現一體化 */}
           <div
             data-testid="trend-chart"
-            className={`relative w-full ${singleConverterLayoutTokens.rateCard.chartHeight} ${singleConverterLayoutTokens.rateCard.chartHoverHeight} transition-[height,opacity,transform] duration-500 will-change-[height,opacity,transform] overflow-hidden rounded-b-xl ${
+            className={`relative w-full ${singleConverterLayoutTokens.rateCard.chartHeight} ${singleConverterLayoutTokens.rateCard.chartHoverHeight} transition-[opacity,transform] duration-500 will-change-[opacity,transform] overflow-hidden rounded-b-card ${
               showTrend ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
             }`}
           >
-            <div className="absolute inset-0 transition-transform duration-500 group-hover:scale-105">
+            <div className="absolute inset-0">
               <ErrorBoundary
                 fallback={
                   <div className="flex items-center justify-center h-full text-xs text-danger">
-                    趨勢圖載入失敗
+                    {t('singleConverter.trendChartLoadFailed')}
                   </div>
                 }
                 onError={(error: unknown) => {
@@ -555,8 +550,10 @@ export const SingleConverter = ({
               </ErrorBoundary>
             </div>
             {/* 互動提示 - 與整體漸層融合 */}
-            <div className="absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-surface-elevated/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-1 pointer-events-none">
-              <span className="text-[10px] font-semibold text-text-muted">查看趨勢圖</span>
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 flex h-8 items-end justify-center bg-gradient-to-t from-surface/80 to-transparent pb-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <span className="text-xs font-medium text-text-muted">
+                {t('singleConverter.viewTrendChart')}
+              </span>
             </div>
           </div>
         </div>
@@ -573,40 +570,22 @@ export const SingleConverter = ({
           data-testid="swap-button"
           className={`${singleConverterLayoutTokens.swap.wrapper} ${singleConverterLayoutTokens.swap.visibility}`}
         >
-          {/* 外圍漸層光環 */}
-          <div
-            className={`absolute -inset-2 bg-gradient-to-r from-primary/40 via-accent/40 to-primary/40 rounded-full blur-xl transition-all duration-500 ${singleConverterLayoutTokens.swap.glowHidden} ${
-              isSwapping
-                ? 'opacity-80 scale-110'
-                : 'opacity-0 group-hover/swap:opacity-40 group-hover/swap:scale-100'
-            }`}
-          />
-
-          {/* 交換按鈕 - 玻璃擬態設計 */}
+          {/* 交換按鈕 - 收斂為清楚但安靜的工具按鈕 */}
           <button
+            type="button"
             ref={swapButtonRef}
             onClick={handleSwap}
             className={`
-              relative p-3.5
-              bg-gradient-to-br from-primary to-primary-hover
-              text-white rounded-full
-              shadow-lg shadow-primary/30
-              transition-all duration-300 ease-out
-              hover:shadow-xl hover:shadow-primary/40
-              hover:scale-110 active:scale-95
+              relative rounded-full border border-border bg-surface p-3.5 text-text shadow-soft
+              transition-[border-color,color,box-shadow,transform] duration-300 ease-out
+              hover:border-primary/25 hover:text-primary hover:shadow-card
+              hover:scale-105 active:scale-95
               ${isSwapping ? 'scale-90' : ''}
             `}
             aria-label={t('singleConverter.swapCurrencies')}
             title={t('singleConverter.swapCurrencies')}
             disabled={isSwapping}
           >
-            {/* 內部光暈效果 */}
-            <span
-              className={`absolute inset-0 rounded-full bg-white/20 transition-opacity duration-300 ${
-                isSwapping ? 'opacity-100' : 'opacity-0 group-hover/swap:opacity-30'
-              }`}
-            />
-
             {/* 雙箭頭圖示 - Y軸旋轉動畫 */}
             <svg
               className={`relative z-10 w-5 h-5 transition-transform duration-500 ${
@@ -628,8 +607,8 @@ export const SingleConverter = ({
           </button>
 
           {/* 懸停提示標籤 */}
-          <div className="absolute -bottom-9 left-1/2 -translate-x-1/2 opacity-0 group-hover/swap:opacity-100 transition-all duration-300 pointer-events-none">
-            <span className="text-[10px] font-semibold text-text-muted whitespace-nowrap bg-surface/90 backdrop-blur-sm px-2.5 py-1 rounded-full shadow-md border border-border/50">
+          <div className="pointer-events-none absolute -bottom-9 left-1/2 -translate-x-1/2 opacity-0 transition-[opacity,transform] duration-300 group-hover/swap:opacity-100">
+            <span className="whitespace-nowrap rounded-full border border-border/70 bg-surface px-2.5 py-1 text-xs font-medium text-text-muted shadow-soft">
               {t('singleConverter.clickToSwap')}
             </span>
           </div>
@@ -646,7 +625,7 @@ export const SingleConverter = ({
           <select
             value={toCurrency}
             onChange={(e) => onToCurrencyChange(e.target.value as CurrencyCode)}
-            className="absolute left-3 top-1/2 -translate-y-1/2 bg-primary/10 text-text rounded-lg px-2 py-1.5 text-base font-semibold border border-primary/20 focus:outline-none focus:ring-2 focus:ring-primary/40 transition-all duration-200"
+            className="absolute left-3 top-1/2 min-h-11 -translate-y-1/2 rounded-control border border-primary/20 bg-primary/10 px-2 py-2 text-base font-semibold text-text transition-[border-color,box-shadow,color,background-color] duration-200 focus:outline-none focus:ring-2 focus:ring-primary/40"
             aria-label={t('singleConverter.selectToCurrency')}
           >
             {CURRENCY_CODES.map((code) => (
@@ -656,10 +635,9 @@ export const SingleConverter = ({
             ))}
           </select>
           {/* 金額輸入框 - 點擊開啟計算機鍵盤 */}
-          <div
+          <button
+            type="button"
             ref={toInputRef}
-            role="button"
-            tabIndex={0}
             data-testid="amount-output"
             onClick={() => calculator.openCalculator('to')}
             onKeyDown={(e) => {
@@ -668,11 +646,11 @@ export const SingleConverter = ({
                 calculator.openCalculator('to');
               }
             }}
-            className={`w-full pl-32 pr-4 ${singleConverterLayoutTokens.amountInput.className} font-bold text-right bg-primary-bg/30 border-2 border-primary/30 rounded-2xl cursor-pointer hover:border-primary/60 focus:outline-none focus:border-primary focus:ring-4 focus:ring-primary/20 transition-[border-color,box-shadow] duration-300`}
+            className={`block w-full appearance-none rounded-control border-2 border-border/70 bg-surface-elevated pl-32 pr-4 ${singleConverterLayoutTokens.amountInput.className} cursor-pointer font-bold text-right text-text transition-[border-color,box-shadow,background-color] duration-300 hover:border-primary/35 focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15`}
             aria-label={`${t('singleConverter.toAmountLabel', { code: toCurrency })}: ${formatAmountDisplay(toAmount, toCurrency) || '0.00'}`}
           >
             {formatAmountDisplay(toAmount, toCurrency) || '0.00'}
-          </div>
+          </button>
         </div>
         {/* 快速金額按鈕 - 目標貨幣
          *
@@ -694,6 +672,7 @@ export const SingleConverter = ({
         >
           {quickAmounts.map((amount) => (
             <button
+              type="button"
               key={amount}
               onClick={() => {
                 const decimals = CURRENCY_DEFINITIONS[toCurrency].decimals;
@@ -702,15 +681,7 @@ export const SingleConverter = ({
                   navigator.vibrate(30);
                 }
               }}
-              className="
-                flex-shrink-0 px-3 py-1.5 rounded-xl text-sm font-semibold
-                bg-surface-elevated text-text/70
-                hover:bg-primary/10 hover:text-primary
-                active:bg-primary/20 active:text-primary
-                transition-all duration-200 ease-out
-                hover:scale-[1.03] active:scale-[0.97]
-                hover:shadow-md active:shadow-sm
-              "
+              className={quickAmountButtonTokens.className}
             >
               {amount.toLocaleString()}
             </button>
@@ -721,26 +692,24 @@ export const SingleConverter = ({
       {/* 加入歷史記錄按鈕 - 現代化微互動設計
        *
        * 設計規範：
-       * - 主色調漸層背景 (primary → primary-hover)
-       * - 玻璃擬態陰影效果 (shadow-xl shadow-primary/25)
+       * - 主色調實底背景 (primary → primary-hover)
+       * - hover 品牌陰影 (shadow-brand)
        * - 微互動：hover scale + 漣漪光暈
        * - 點擊縮放回饋 (active:scale-[0.98])
        */}
       <button
+        type="button"
         onClick={onAddToHistory}
         className={`
-          relative w-full overflow-hidden ${singleConverterLayoutTokens.addToHistory.className}
-          bg-gradient-to-r from-primary to-primary-hover
-          text-white font-bold rounded-2xl
-          shadow-xl shadow-primary/25
-          transition-all duration-300 ease-out
-          hover:shadow-2xl hover:shadow-primary/30
-          hover:scale-[1.02] active:scale-[0.98]
+          relative w-full ${singleConverterLayoutTokens.addToHistory.className}
+          rounded-control bg-primary text-primary-foreground font-semibold
+          shadow-soft
+          transition-[background-color,box-shadow,transform] duration-300 ease-out
+          hover:bg-primary-hover hover:shadow-brand
+          hover:scale-[1.01] active:scale-[0.98]
           group
         `}
       >
-        {/* 光暈效果 */}
-        <span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 ease-out" />
         <span className="relative z-10 flex items-center justify-center gap-2">
           <svg
             className="w-4 h-4"
diff --git a/apps/ratewise/src/features/ratewise/components/TrendChartSkeleton.tsx b/apps/ratewise/src/features/ratewise/components/TrendChartSkeleton.tsx
index 6f59aad50..cd3073aa7 100644
--- a/apps/ratewise/src/features/ratewise/components/TrendChartSkeleton.tsx
+++ b/apps/ratewise/src/features/ratewise/components/TrendChartSkeleton.tsx
@@ -17,7 +17,7 @@ export const TrendChartSkeleton: FC = () => {
     <div
       role="status"
       aria-live="polite"
-      className="w-full h-full flex items-center justify-center rounded-b-xl overflow-hidden relative skeleton-bg"
+      className="w-full h-full flex items-center justify-center rounded-b-card overflow-hidden relative skeleton-bg"
       data-testid="trend-chart-skeleton"
     >
       <svg className="w-full h-full px-4 py-3" viewBox="0 0 400 100" preserveAspectRatio="none">
diff --git a/apps/ratewise/src/features/ratewise/components/__tests__/ConversionHistory.enhanced.test.tsx b/apps/ratewise/src/features/ratewise/components/__tests__/ConversionHistory.enhanced.test.tsx
index 269b51712..fb341222f 100644
--- a/apps/ratewise/src/features/ratewise/components/__tests__/ConversionHistory.enhanced.test.tsx
+++ b/apps/ratewise/src/features/ratewise/components/__tests__/ConversionHistory.enhanced.test.tsx
@@ -3,8 +3,6 @@
 /**
  * ConversionHistory Enhanced Features Test Suite
  *
- * 🔴 RED Phase: 定義新功能的測試案例
- *
  * 測試範圍：
  * - 持久化存儲 (localStorage)
  * - 點擊重新轉換
@@ -14,7 +12,6 @@
  * - 7 天過期自動清理
  *
  * 建立時間: 2025-12-26
- * BDD 階段: 🔴 RED (預期所有測試失敗)
  */
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
@@ -220,9 +217,9 @@ describe('🔴 RED: ConversionHistory 增強功能', () => {
 
       render(<ConversionHistory history={mockHistory} onReconvert={onReconvert} />);
 
-      // 新 UI v4.0：卡片具有 hover:shadow-md 效果
+      // 新 UI v4.0：卡片具有 hover:shadow-soft 效果
       const firstCard = screen.getByText('1000').closest('div[role="group"]');
-      expect(firstCard).toHaveClass('hover:shadow-md');
+      expect(firstCard).toHaveClass('hover:shadow-soft');
     });
   });
 
@@ -381,7 +378,7 @@ describe('🔴 RED: ConversionHistory 增強功能', () => {
   });
 
   describe('UI/UX 設計一致性', () => {
-    it('應該使用 ParkKeeper 風格的卡片樣式', () => {
+    it('應該使用專案標準的卡片樣式', () => {
       const mockHistory = createMockHistory();
       const { container } = render(<ConversionHistory history={mockHistory} />);
 
@@ -412,7 +409,7 @@ describe('🔴 RED: ConversionHistory 增強功能', () => {
       const mockHistory = createMockHistory();
       const { container } = render(<ConversionHistory history={mockHistory} />);
 
-      const historyItem = container.querySelector('.transition-all');
+      const historyItem = container.querySelector('[class*="transition-[box-shadow,transform]"]');
       expect(historyItem).toBeInTheDocument();
     });
   });
diff --git a/apps/ratewise/src/features/ratewise/components/__tests__/CurrencyList.test.tsx b/apps/ratewise/src/features/ratewise/components/__tests__/CurrencyList.test.tsx
index 8e7da2e27..aef34a3ae 100644
--- a/apps/ratewise/src/features/ratewise/components/__tests__/CurrencyList.test.tsx
+++ b/apps/ratewise/src/features/ratewise/components/__tests__/CurrencyList.test.tsx
@@ -96,10 +96,8 @@ describe('CurrencyList Component', () => {
     render(<CurrencyList {...defaultProps} />);
 
     // 點擊 EUR 行
-    const eurRow = screen.getByText('EUR').closest('div[class*="group"]');
-    if (eurRow) {
-      fireEvent.click(eurRow);
-    }
+    const eurRow = screen.getByRole('button', { name: /EUR/ });
+    fireEvent.click(eurRow);
 
     expect(defaultProps.onToggleFavorite).toHaveBeenCalledWith('EUR');
   });
@@ -156,9 +154,9 @@ describe('CurrencyList Component', () => {
   it('applies hover styles on currency row', () => {
     render(<CurrencyList {...defaultProps} />);
 
-    const currencyRow = screen.getByText('USD').closest('div[class*="group"]');
-    // 使用 SSOT design token: hover:bg-primary/5
-    expect(currencyRow).toHaveClass('hover:bg-primary/5');
+    const currencyRow = screen.getByRole('button', { name: /USD/ });
+    // 使用目前主題的語義 surface token，避免 Nitro 繼承固定淺色 hover。
+    expect(currencyRow).toHaveClass('hover:bg-surface-elevated');
   });
 });
 
diff --git a/apps/ratewise/src/features/ratewise/components/__tests__/MiniTrendChart.test.tsx b/apps/ratewise/src/features/ratewise/components/__tests__/MiniTrendChart.test.tsx
index 4e5353cbd..f67dd64f6 100644
--- a/apps/ratewise/src/features/ratewise/components/__tests__/MiniTrendChart.test.tsx
+++ b/apps/ratewise/src/features/ratewise/components/__tests__/MiniTrendChart.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { MiniTrendChart, type MiniTrendDataPoint } from '../MiniTrendChart';
+import { createChart } from 'lightweight-charts';
 
 // Store crosshair callback for testing
 let crosshairCallback: ((param: unknown) => void) | null = null;
@@ -322,5 +323,26 @@ describe('MiniTrendChart', () => {
 
       removeEventListenerSpy.mockRestore();
     });
+
+    it('應該在 data-style 變更時重建圖表', async () => {
+      const testData: MiniTrendDataPoint[] = [
+        { date: '2025-10-14', rate: 31.0 },
+        { date: '2025-10-15', rate: 31.5 },
+      ];
+
+      render(<MiniTrendChart data={testData} currencyCode="USD" />);
+
+      await waitFor(() => {
+        expect(createChart).toHaveBeenCalledTimes(1);
+      });
+
+      act(() => {
+        document.documentElement.setAttribute('data-style', 'ocean');
+      });
+
+      await waitFor(() => {
+        expect(createChart).toHaveBeenCalledTimes(2);
+      });
+    });
   });
 });
diff --git a/apps/ratewise/src/features/ratewise/components/__tests__/MultiConverter.test.tsx b/apps/ratewise/src/features/ratewise/components/__tests__/MultiConverter.test.tsx
index a96bd0ecf..def2fb584 100644
--- a/apps/ratewise/src/features/ratewise/components/__tests__/MultiConverter.test.tsx
+++ b/apps/ratewise/src/features/ratewise/components/__tests__/MultiConverter.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { render, screen, fireEvent, cleanup, within } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { MultiConverter } from '../MultiConverter';
 import type { CurrencyCode, MultiAmountsState, RateMode, RateType } from '../../types';
@@ -18,6 +18,7 @@ const translations: Record<string, string> = {
   'favorites.removeFavorite': '移除常用貨幣',
   'multiConverter.amountClickCalculator': '{{name}} ({{code}}) 金額，點擊開啟計算機',
   'multiConverter.baseCurrency': '基準貨幣',
+  'multiConverter.setBaseCurrency': '將 {{name}} ({{code}}) 設為基準貨幣',
   'multiConverter.calculating': '計算中',
   'multiConverter.cashOnlyNote': '{{code}} 僅提供現金匯率',
   'multiConverter.cashRate': '現金',
@@ -157,19 +158,20 @@ describe('MultiConverter', () => {
     it('點擊非基準貨幣應該呼叫 onBaseCurrencyChange', () => {
       render(<MultiConverter {...defaultProps} />);
 
-      const usdRow = screen.getByText('美元').closest('div[class*="rounded-xl"]');
-      expect(usdRow).toBeTruthy();
-      fireEvent.click(usdRow!);
+      const usdRow = screen.getByText('USD').closest('[data-testid="multi-currency-row"]');
+      expect(usdRow).toBeDefined();
+      const currencyInfo = usdRow!.querySelector('.cursor-pointer');
+      expect(currencyInfo).toBeDefined();
+      fireEvent.click(currencyInfo!);
       expect(defaultProps.onBaseCurrencyChange).toHaveBeenCalledWith('USD');
     });
 
-    it('基準貨幣應該有特殊的樣式', () => {
+    it('基準貨幣列應該有特殊的樣式', () => {
       render(<MultiConverter {...defaultProps} />);
 
-      const twdRow = screen.getByText('TWD').closest('div[class*="rounded-xl"]');
+      const twdRow = screen.getByText('TWD').closest('[data-testid="multi-currency-row"]');
+      expect(twdRow).toBeDefined();
       expect(twdRow).toHaveClass('cursor-default');
-      const usdRow = screen.getByText('USD').closest('div[class*="rounded-xl"]');
-      expect(usdRow).toHaveClass('cursor-pointer');
     });
   });
 
@@ -341,6 +343,75 @@ describe('MultiConverter', () => {
       expect(screen.getByText(/1 TWD = 44\.9000 KRW/)).toBeInTheDocument();
       expect(screen.queryByText(/1 TWD = 42\.3729 KRW/)).not.toBeInTheDocument();
     });
+
+    it('基準幣是換錢所支援幣別時，TWD 列應顯示換錢所來源', () => {
+      const krwExchangeShopRate: ExchangeShopRate = {
+        currency: 'KRW',
+        sell: 44.9,
+        buy: 45.1,
+        updateTime: '2026/05/08 09:30:00',
+        source: 'MoneyBox',
+        sourceUrl: 'https://moneybox-exchange.com/zh-CHT/exchange',
+        providerName: '明洞換匯所',
+        isFallback: false,
+      };
+      const propsWithKrwBase = {
+        ...defaultProps,
+        sortedCurrencies: ['KRW', 'TWD'] as CurrencyCode[],
+        baseCurrency: 'KRW' as CurrencyCode,
+        rateType: 'cash' as RateType,
+        rateMode: 'sell' as RateMode,
+        rateSource: 'exchange-shop' as const,
+        exchangeShopRatesByCurrency: {
+          KRW: krwExchangeShopRate,
+        },
+        multiAmounts: {
+          KRW: '1000',
+          TWD: '22.17',
+        } as MultiAmountsState,
+      };
+
+      render(<MultiConverter {...propsWithKrwBase} />);
+
+      // sell 模式：1 KRW = 1/sell = 1/44.9 ≈ 0.0223 TWD（rateMode SSOT，非硬編碼 1/buy）
+      const twdRate = screen.getByText(/1 KRW = 0\.0223 TWD/);
+      const twdRow = twdRate.closest('[data-testid="multi-currency-row"]');
+      expect(twdRow).toBeTruthy();
+      expect(
+        within(twdRow as HTMLElement).getByRole('button', { name: /切換到/ }),
+      ).toHaveTextContent('換錢所');
+    });
+
+    it('現金不可用但即期可用時，匯率標籤應顯示實際使用的即期', () => {
+      const propsWithSpotOnlyJpy = {
+        ...defaultProps,
+        sortedCurrencies: ['TWD', 'JPY'] as CurrencyCode[],
+        rateType: 'cash' as RateType,
+        details: {
+          ...defaultProps.details,
+          JPY: {
+            name: '日圓',
+            spot: { sell: 0.204, buy: 0.2 },
+            cash: { sell: null, buy: null },
+          },
+        } as unknown as Record<string, RateDetails>,
+        multiAmounts: {
+          TWD: '1000',
+          JPY: '4902',
+        } as MultiAmountsState,
+      };
+
+      render(<MultiConverter {...propsWithSpotOnlyJpy} />);
+
+      const jpyRate = screen.getByText(/1 TWD = 4\.9020 JPY/);
+      const jpyRow = jpyRate.closest('[data-testid="multi-currency-row"]');
+      expect(jpyRow).toBeTruthy();
+      expect(
+        within(jpyRow as HTMLElement).getByRole('button', {
+          name: /此幣別僅有一種匯率可用/,
+        }),
+      ).toHaveTextContent('即期');
+    });
   });
 
   describe('只有單一匯率類型的貨幣', () => {
diff --git a/apps/ratewise/src/features/ratewise/components/__tests__/RateProviderMenu.test.tsx b/apps/ratewise/src/features/ratewise/components/__tests__/RateProviderMenu.test.tsx
deleted file mode 100644
index 1aee488d7..000000000
--- a/apps/ratewise/src/features/ratewise/components/__tests__/RateProviderMenu.test.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-// @vitest-environment jsdom
-
-import '@testing-library/jest-dom/vitest';
-import { render, screen, cleanup } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-afterEach(() => {
-  cleanup();
-  vi.resetModules();
-});
-
-describe('RateProviderMenu — 單銀行預設狀態', () => {
-  it('shouldEnableBankProviderChoice()===false 時，元件不渲染任何 DOM', async () => {
-    const { RateProviderMenu } = await import('../RateProviderMenu');
-    const { container } = render(
-      <RateProviderMenu selectionMode="manual" selectedRef={undefined} />,
-    );
-    expect(container.firstChild).toBeNull();
-    expect(screen.queryByTestId('rate-provider-menu')).toBeNull();
-  });
-});
-
-describe('RateProviderMenu — 多銀行 provider 模擬', () => {
-  it('啟用後渲染推薦最佳 + 銀行清單 + 換錢所清單', async () => {
-    vi.doMock('../../../../config/rateProviders', async () => {
-      const actual = await vi.importActual<typeof import('../../../../config/rateProviders')>(
-        '../../../../config/rateProviders',
-      );
-      const fakeBank2 = {
-        id: 'fake-bank',
-        sourceKind: 'bank',
-        label: '示範銀行',
-        shortLabel: '示銀',
-        supportedRateTypes: ['spot', 'cash'] as const,
-        supportedCurrencies: 'all' as const,
-        priority: 50,
-        isDefault: false,
-      };
-      return {
-        ...actual,
-        shouldEnableBankProviderChoice: () => true,
-        getProvidersBySourceKind: (kind: 'bank' | 'exchange-shop') => {
-          if (kind === 'bank') {
-            return [actual.RATE_PROVIDERS.bot, fakeBank2];
-          }
-          return [actual.RATE_PROVIDERS.moneybox];
-        },
-      };
-    });
-    const { RateProviderMenu } = await import('../RateProviderMenu');
-    render(<RateProviderMenu selectionMode="best" selectedRef={undefined} />);
-    expect(screen.getByTestId('rate-provider-menu')).toBeInTheDocument();
-    expect(screen.getByTestId('rate-provider-menu-item-best')).toHaveAttribute(
-      'aria-checked',
-      'true',
-    );
-    expect(screen.getByTestId('rate-provider-menu-item-bot')).toBeInTheDocument();
-    expect(screen.getByTestId('rate-provider-menu-item-fake-bank')).toBeInTheDocument();
-    expect(screen.getByTestId('rate-provider-menu-item-moneybox')).toBeInTheDocument();
-  });
-
-  it('manual 模式下，selectedRef 對應的 provider 應 aria-checked=true', async () => {
-    vi.doMock('../../../../config/rateProviders', async () => {
-      const actual = await vi.importActual<typeof import('../../../../config/rateProviders')>(
-        '../../../../config/rateProviders',
-      );
-      const fakeBank2 = {
-        id: 'fake-bank',
-        sourceKind: 'bank',
-        label: '示範銀行',
-        shortLabel: '示銀',
-        supportedRateTypes: ['spot', 'cash'] as const,
-        supportedCurrencies: 'all' as const,
-        priority: 50,
-        isDefault: false,
-      };
-      return {
-        ...actual,
-        shouldEnableBankProviderChoice: () => true,
-        getProvidersBySourceKind: (kind: 'bank' | 'exchange-shop') => {
-          if (kind === 'bank') {
-            return [actual.RATE_PROVIDERS.bot, fakeBank2];
-          }
-          return [actual.RATE_PROVIDERS.moneybox];
-        },
-      };
-    });
-    const { RateProviderMenu } = await import('../RateProviderMenu');
-    render(
-      <RateProviderMenu
-        selectionMode="manual"
-        selectedRef={{ sourceKind: 'bank', providerId: 'fake-bank' }}
-      />,
-    );
-    expect(screen.getByTestId('rate-provider-menu-item-fake-bank')).toHaveAttribute(
-      'aria-checked',
-      'true',
-    );
-    expect(screen.getByTestId('rate-provider-menu-item-bot')).toHaveAttribute(
-      'aria-checked',
-      'false',
-    );
-    expect(screen.getByTestId('rate-provider-menu-item-best')).toHaveAttribute(
-      'aria-checked',
-      'false',
-    );
-  });
-});
diff --git a/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.core.test.tsx b/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.core.test.tsx
index 8a6029fdf..eedce33b2 100644
--- a/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.core.test.tsx
+++ b/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.core.test.tsx
@@ -516,7 +516,7 @@ describe('SingleConverter - 核心功能測試', () => {
       expect(screen.getByText('1 TWD = 44.8500 KRW')).toBeInTheDocument();
     });
 
-    it('KRW→TWD 選擇換錢所時應顯示換錢所買入反向匯率', () => {
+    it('KRW→TWD 換錢所 sell 模式應顯示賣出反向匯率（rateMode SSOT）', () => {
       render(
         <SingleConverter
           {...mockProps}
@@ -528,7 +528,26 @@ describe('SingleConverter - 核心功能測試', () => {
         />,
       );
 
+      // sell 模式：1 KRW = 1/sell = 1/44.85 ≈ 0.0223 TWD
+      expect(screen.getByText('1 KRW = 0.0223 TWD')).toBeInTheDocument();
+    });
+
+    it('KRW→TWD 換錢所 mid 模式應以 (buy+sell)/2 中間價計算', () => {
+      render(
+        <SingleConverter
+          {...mockProps}
+          rateMode="mid"
+          fromCurrency="KRW"
+          toCurrency="TWD"
+          rateSource="exchange-shop"
+          moneyBoxRate={mockMoneyBoxRate}
+          exchangeShopCurrency="KRW"
+        />,
+      );
+
+      // mid = (45.1 + 44.85) / 2 = 44.975 → 1 KRW = 1/44.975 ≈ 0.0222 TWD
       expect(screen.getByText('1 KRW = 0.0222 TWD')).toBeInTheDocument();
+      expect(screen.getByText('1 TWD = 44.9750 KRW')).toBeInTheDocument();
     });
 
     it('auto 模式 KRW→TWD 時，副標應顯示主方向匯率的倒數', () => {
diff --git a/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.input.test.tsx b/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.input.test.tsx
index cc7570618..dbd258d67 100644
--- a/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.input.test.tsx
+++ b/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.input.test.tsx
@@ -159,8 +159,8 @@ describe('SingleConverter - 輸入框進階測試', () => {
 
       const toAmount = screen.getByTestId('amount-output');
 
-      expect(toAmount).toHaveAttribute('role', 'button');
-      expect(toAmount).toHaveAttribute('tabIndex', '0');
+      expect(toAmount.tagName).toBe('BUTTON');
+      expect(toAmount).toHaveAttribute('type', 'button');
     });
   });
 
diff --git a/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.trend.test.tsx b/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.trend.test.tsx
index ae444be39..a4b5bbad9 100644
--- a/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.trend.test.tsx
+++ b/apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.trend.test.tsx
@@ -6,6 +6,7 @@ import type { CurrencyCode } from '../../types';
 import * as historyService from '../../../../services/exchangeRateHistoryService';
 import type { RateSnapshot } from '../../../../services/exchangeRateHistoryService';
 import * as moneyboxRateService from '../../../../services/moneyboxRateService';
+import type * as MoneyboxRateServiceModule from '../../../../services/moneyboxRateService';
 import { TREND_CHART_DEFER_MS } from '../../../../config/performance';
 
 // Mock services with controllable responses
@@ -15,7 +16,7 @@ vi.mock('../../../../services/exchangeRateHistoryService', () => ({
 }));
 
 vi.mock('../../../../services/moneyboxRateService', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../../../services/moneyboxRateService')>();
+  const actual = await importOriginal<typeof MoneyboxRateServiceModule>();
 
   return {
     ...actual,
diff --git a/apps/ratewise/src/features/ratewise/rateProviderQuoteAdapters.ts b/apps/ratewise/src/features/ratewise/rateProviderQuoteAdapters.ts
index f7fed19f4..19621aaa6 100644
--- a/apps/ratewise/src/features/ratewise/rateProviderQuoteAdapters.ts
+++ b/apps/ratewise/src/features/ratewise/rateProviderQuoteAdapters.ts
@@ -50,8 +50,10 @@ const DEFAULT_ADAPTERS: RateProviderQuoteAdapters = {
       isAvailable: unitRate > 0,
     };
   },
-  moneybox: ({ provider, amount, from, to, exchangeShopRate }) => {
-    const unitRate = exchangeShopRate ? computeConverterRate(exchangeShopRate, from, to) : null;
+  moneybox: ({ provider, amount, from, to, rateMode, exchangeShopRate }) => {
+    const unitRate = exchangeShopRate
+      ? computeConverterRate(exchangeShopRate, from, to, rateMode)
+      : null;
 
     return {
       provider: { sourceKind: provider.sourceKind, providerId: provider.id },
diff --git a/apps/ratewise/src/features/ratewise/storage.ts b/apps/ratewise/src/features/ratewise/storage.ts
deleted file mode 100644
index 63cd45b04..000000000
--- a/apps/ratewise/src/features/ratewise/storage.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-const isBrowser = typeof window !== 'undefined';
-
-export const readString = (key: string, fallback: string): string => {
-  if (!isBrowser) return fallback;
-  const value = window.localStorage.getItem(key);
-  return value ?? fallback;
-};
-
-export const writeString = (key: string, value: string) => {
-  if (!isBrowser) return;
-  window.localStorage.setItem(key, value);
-};
-
-export const readJSON = <T>(key: string, fallback: T): T => {
-  if (!isBrowser) return fallback;
-  const raw = window.localStorage.getItem(key);
-  if (!raw) return fallback;
-  try {
-    return JSON.parse(raw) as T;
-  } catch {
-    return fallback;
-  }
-};
-
-export const writeJSON = <T>(key: string, value: T) => {
-  if (!isBrowser) return;
-  window.localStorage.setItem(key, JSON.stringify(value));
-};
diff --git a/apps/ratewise/src/hooks/useAppTheme.ts b/apps/ratewise/src/hooks/useAppTheme.ts
index 3028a2efe..668ba8792 100644
--- a/apps/ratewise/src/hooks/useAppTheme.ts
+++ b/apps/ratewise/src/hooks/useAppTheme.ts
@@ -4,7 +4,7 @@
  * @description 管理風格（Nitro/Kawaii/Zen/Classic/Ocean/Forest）的切換與持久化
  *              支援 SSR 安全的初始化，防止 FOUC（Flash of Unstyled Content）
  *
- * @reference ParkKeeper Design System
+ * @reference DESIGN.md, themes.ts
  *
  * @architecture
  * 1. index.html 中的同步腳本負責**首次繪製前**設置 data-style
diff --git a/apps/ratewise/src/i18n/__tests__/locales.test.ts b/apps/ratewise/src/i18n/__tests__/locales.test.ts
new file mode 100644
index 000000000..c75073d8f
--- /dev/null
+++ b/apps/ratewise/src/i18n/__tests__/locales.test.ts
@@ -0,0 +1,100 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import en from '../locales/en';
+import ja from '../locales/ja';
+import ko from '../locales/ko';
+import zhTW from '../locales/zh-TW';
+
+type TranslationTree = Record<string, unknown>;
+
+const locales = {
+  en,
+  ja,
+  ko,
+  'zh-TW': zhTW,
+} as const;
+
+const runtimeI18nGuardFiles = [
+  'src/components/OfflineIndicator.tsx',
+  'src/components/SkeletonLoader.tsx',
+  'src/components/SupportContactLinks.tsx',
+  'src/features/ratewise/RateWise.tsx',
+  'src/features/ratewise/components/SingleConverter.tsx',
+  'src/pages/OpenData.tsx',
+  'src/pages/NotFound.tsx',
+] as const;
+
+const forbiddenRuntimeTextPatterns = [
+  /t\('offline\.[^']+',\s*'[^']+'/,
+  /載入即時匯率中/,
+  /趨勢圖載入失敗/,
+  />查看趨勢圖</,
+  /aria-label=\{copied \? '已複製' : '複製'\}/,
+  /Support contact links/,
+  /推薦最佳/,
+  /匯率來源 provider 選單/,
+  /title="404 - 找不到頁面"/,
+  /頁面錯誤/,
+  /aria-label="404 錯誤"/,
+  /或許您想前往/,
+  /如果您認為這是一個錯誤，請/,
+] as const;
+
+function flattenKeys(tree: TranslationTree, prefix = ''): string[] {
+  return Object.entries(tree).flatMap(([key, value]) => {
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      return flattenKeys(value as TranslationTree, path);
+    }
+    return [path];
+  });
+}
+
+function getValue(tree: TranslationTree, path: string): unknown {
+  return path.split('.').reduce<unknown>((current, part) => {
+    if (!current || typeof current !== 'object') return undefined;
+    return (current as TranslationTree)[part];
+  }, tree);
+}
+
+function interpolationNames(value: string): string[] {
+  return [...value.matchAll(/{{\s*([\w.-]+)\s*}}/g)].map((match) => match[1] ?? '').sort();
+}
+
+describe('i18n locale coverage', () => {
+  const canonicalKeys = flattenKeys(zhTW).sort();
+
+  it('所有語系 key 必須與 zh-TW SSOT 完全一致', () => {
+    for (const [locale, messages] of Object.entries(locales)) {
+      expect(flattenKeys(messages).sort(), locale).toEqual(canonicalKeys);
+    }
+  });
+
+  it('所有語系的 interpolation placeholders 必須一致', () => {
+    for (const key of canonicalKeys) {
+      const canonicalValue = getValue(zhTW, key);
+      if (typeof canonicalValue !== 'string') continue;
+
+      const canonicalPlaceholders = interpolationNames(canonicalValue);
+
+      for (const [locale, messages] of Object.entries(locales)) {
+        const localizedValue = getValue(messages, key);
+        expect(typeof localizedValue, `${locale}.${key}`).toBe('string');
+        expect(interpolationNames(localizedValue as string), `${locale}.${key}`).toEqual(
+          canonicalPlaceholders,
+        );
+      }
+    }
+  });
+
+  it('runtime UI 元件不得保留本批已收斂的硬編中文或 fallback 字串', () => {
+    for (const filePath of runtimeI18nGuardFiles) {
+      const source = readFileSync(resolve(process.cwd(), filePath), 'utf8');
+
+      for (const pattern of forbiddenRuntimeTextPatterns) {
+        expect(source, `${filePath} still contains ${pattern}`).not.toMatch(pattern);
+      }
+    }
+  });
+});
diff --git a/apps/ratewise/src/i18n/index.ts b/apps/ratewise/src/i18n/index.ts
index 090d3d271..34a282784 100644
--- a/apps/ratewise/src/i18n/index.ts
+++ b/apps/ratewise/src/i18n/index.ts
@@ -52,8 +52,8 @@ const resources = {
   ko: { translation: ko },
 };
 
-const canUseBrowserLanguageStorage =
-  typeof window !== 'undefined' && import.meta.env.MODE !== 'test';
+const hasBrowserDocument = typeof window !== 'undefined' && typeof document !== 'undefined';
+const canUseBrowserLanguageStorage = hasBrowserDocument && import.meta.env.MODE !== 'test';
 
 /**
  * 正規化語系代碼
@@ -114,33 +114,37 @@ export function getResolvedLanguage(): SupportedLanguage {
   return normalizeLanguage(i18n.language);
 }
 
-void i18n
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    resources,
-    // 明確列出所有支援的語系代碼（包含 zh-Hant 因為 index.html lang="zh-Hant"）
-    supportedLngs: ['zh-TW', 'zh-Hant', 'en', 'ja', 'ko'],
-    // 語系 fallback 配置：zh-Hant → zh-TW
-    fallbackLng: {
-      'zh-Hant': ['zh-TW'],
-      zh: ['zh-TW'],
-      default: ['zh-TW'],
-    },
-    defaultNS: 'translation',
-    interpolation: {
-      escapeValue: false,
-    },
-    detection: {
-      order: canUseBrowserLanguageStorage
-        ? ['localStorage', 'htmlTag', 'navigator']
-        : ['htmlTag', 'navigator'],
-      caches: canUseBrowserLanguageStorage ? ['localStorage'] : [],
-      lookupLocalStorage: 'ratewise-language',
-    },
-    react: {
-      useSuspense: false,
-    },
-  });
+if (hasBrowserDocument) {
+  i18n.use(LanguageDetector);
+}
+
+void i18n.use(initReactI18next).init({
+  resources,
+  // 明確列出所有支援的語系代碼（包含 zh-Hant 因為 index.html lang="zh-Hant"）
+  supportedLngs: ['zh-TW', 'zh-Hant', 'en', 'ja', 'ko'],
+  // 語系 fallback 配置：zh-Hant → zh-TW
+  fallbackLng: {
+    'zh-Hant': ['zh-TW'],
+    zh: ['zh-TW'],
+    default: ['zh-TW'],
+  },
+  defaultNS: 'translation',
+  interpolation: {
+    escapeValue: false,
+  },
+  detection: {
+    order: canUseBrowserLanguageStorage
+      ? ['localStorage', 'htmlTag', 'navigator']
+      : hasBrowserDocument
+        ? ['htmlTag', 'navigator']
+        : [],
+    caches: canUseBrowserLanguageStorage ? ['localStorage'] : [],
+    lookupLocalStorage: 'ratewise-language',
+  },
+  ...(hasBrowserDocument ? {} : { lng: 'zh-TW' }),
+  react: {
+    useSuspense: false,
+  },
+});
 
 export default i18n;
diff --git a/apps/ratewise/src/i18n/locales/en.ts b/apps/ratewise/src/i18n/locales/en.ts
index 7729dc744..744982956 100644
--- a/apps/ratewise/src/i18n/locales/en.ts
+++ b/apps/ratewise/src/i18n/locales/en.ts
@@ -47,6 +47,7 @@ const en = {
     title: APP_INFO.shortName,
     subtitle: 'Exchange Rate Tool',
     version: 'Version',
+    loadingLiveRates: 'Loading live exchange rates...',
   },
 
   // Single Currency Converter
@@ -75,6 +76,7 @@ const en = {
     rateTypeUnavailableForCurrencies:
       '{{currencies}} does not provide {{rateType}} rate, switched to {{fallbackType}}',
     viewTrendChart: 'View trend chart',
+    trendChartLoadFailed: 'Trend chart failed to load',
     fromAmountLabel: 'Amount ({{code}})',
     toAmountLabel: 'Result ({{code}})',
     backToConverter: 'Back to Converter',
@@ -93,6 +95,7 @@ const en = {
     calculating: 'Calculating...',
     noData: 'No data',
     amountClickCalculator: '{{name}} ({{code}}) amount, click to open calculator',
+    setBaseCurrency: 'Set {{name}} ({{code}}) as base currency',
     currencyListLabel: 'Currency list',
     addFavorite: 'Add {{code}} to favorites',
     removeFavorite: 'Remove {{code}} from favorites',
@@ -131,6 +134,7 @@ const en = {
   // Settings
   settings: {
     title: 'Settings',
+    description: 'Adjust interface style, language, rate mode, and support links.',
     interfaceStyle: 'Interface Style',
     language: 'Language',
     storageCache: 'Storage & Cache',
@@ -140,7 +144,8 @@ const en = {
     taiwanBank: 'Taiwan Bank',
     updateFrequency: 'Update Frequency',
     fiveMinutes: '5 minutes',
-    updateNote: 'Exchange rates are updated every 5 minutes.',
+    updateNote:
+      'Exchange rates are checked about every 5 minutes; actual freshness depends on the source and CDN.',
     resetTheme: 'Reset Theme Settings',
     appVersion: 'App Version',
     designSystem: 'Design System',
@@ -234,6 +239,7 @@ const en = {
   // Rate Info
   rateInfo: {
     source: 'Taiwan Bank Rates',
+    bankOfficialRates: 'Taiwan Bank Rates',
     sourceTime: 'Source',
     refreshTime: 'Refresh',
     lastUpdate: 'Last updated',
@@ -312,26 +318,51 @@ const en = {
     updatingDescription: 'Please wait...',
     updateFailedTitle: 'Update Failed',
     updateFailedDescription: 'Please retry or check network',
-    registrationFailedTitle: 'Background updater failed to start',
-    registrationFailedDescription:
-      'The update worker could not start. Reload the page, and contact the author if it keeps happening.',
     actionRetry: 'Retry',
-    actionReload: 'Reload',
     releaseToRefresh: 'Release to refresh',
     refreshing: 'Refreshing...',
   },
 
   support: {
+    contactLinksAriaLabel: 'Support contact links',
+    contactTitle: 'If the problem persists, contact the author:',
     reportIssueLead: 'If this problem keeps happening, contact the author directly.',
     reportIssueHint:
       'Include the error screen, reproduction steps, and device details so the issue can be diagnosed quickly.',
   },
 
+  offline: {
+    title: 'Offline Mode',
+    description: 'Some features may be unavailable',
+    close: 'Close offline notice',
+  },
+
+  skeleton: {
+    appLoading: `${APP_INFO.name} is loading.`,
+    ratesLoading: 'Loading exchange rate data...',
+    settingsLoading: 'Loading settings...',
+    favoritesLoading: 'Loading favorites...',
+    multiConverterLoading: 'Loading multi-currency converter...',
+  },
+
+  rateProvider: {
+    bestRecommendation: 'Best recommendation',
+    menuAriaLabel: 'Rate provider menu',
+  },
+
   // 404
   notFound: {
+    metaTitle: '404 - Page Not Found',
+    metaDescription:
+      'Sorry, the page you are looking for does not exist. Return home or browse another page.',
+    eyebrow: 'Page error',
+    errorAria: '404 error',
     title: 'Page Not Found',
     message: 'The page you are looking for does not exist or has been removed.',
     goHome: 'Go Home',
+    suggestedPages: 'You may want to visit:',
+    reportIssuePrefix: 'If you think this is a mistake, please',
+    reportIssueLink: 'report the issue',
   },
 
   // Footer
@@ -345,7 +376,7 @@ const en = {
     disclaimer:
       'Exchange rates are based on Taiwan Bank official rates (cash and spot selling rates). Actual transaction rates may vary.',
     disclaimerDesktop:
-      'Exchange rates from Taiwan Bank, updated every 5 minutes. For reference only.',
+      'Exchange rates from Taiwan Bank are checked on a schedule. For reference only.',
     faq: 'FAQ',
     about: 'About Us',
     appName: APP_INFO.shortName,
diff --git a/apps/ratewise/src/i18n/locales/ja.ts b/apps/ratewise/src/i18n/locales/ja.ts
index 4b97cd629..0f1d56c67 100644
--- a/apps/ratewise/src/i18n/locales/ja.ts
+++ b/apps/ratewise/src/i18n/locales/ja.ts
@@ -47,6 +47,7 @@ const ja = {
     title: APP_INFO.shortName,
     subtitle: '為替レートツール',
     version: 'バージョン',
+    loadingLiveRates: '最新の為替レートを読み込み中...',
   },
 
   // Single Currency Converter
@@ -75,6 +76,7 @@ const ja = {
     rateTypeUnavailableForCurrencies:
       '{{currencies}} は {{rateType}} レート非対応のため、{{fallbackType}} を使用します',
     viewTrendChart: 'トレンドチャートを見る',
+    trendChartLoadFailed: 'トレンドチャートの読み込みに失敗しました',
     fromAmountLabel: '金額 ({{code}})',
     toAmountLabel: '結果 ({{code}})',
     backToConverter: 'コンバーターに戻る',
@@ -92,6 +94,7 @@ const ja = {
     calculating: '計算中...',
     noData: 'データなし',
     amountClickCalculator: '{{name}} ({{code}}) 金額、クリックして電卓を開く',
+    setBaseCurrency: '{{name}} ({{code}}) を基準通貨に設定',
     currencyListLabel: '通貨リスト',
     addFavorite: '{{code}} をお気に入りに追加',
     removeFavorite: '{{code}} をお気に入りから削除',
@@ -130,6 +133,7 @@ const ja = {
   // Settings
   settings: {
     title: '設定',
+    description: '表示スタイル、言語、レートモード、サポート情報を調整します。',
     interfaceStyle: 'インターフェーススタイル',
     language: '言語',
     storageCache: 'ストレージとキャッシュ',
@@ -139,7 +143,8 @@ const ja = {
     taiwanBank: '台湾銀行',
     updateFrequency: '更新頻度',
     fiveMinutes: '5分',
-    updateNote: '為替レートは5分ごとに更新されます。',
+    updateNote:
+      '為替レートは約5分ごとに確認されます。実際の反映時間はソースとCDNにより異なります。',
     resetTheme: 'テーマ設定をリセット',
     appVersion: 'アプリバージョン',
     designSystem: 'デザインシステム',
@@ -231,6 +236,7 @@ const ja = {
   // Rate Info
   rateInfo: {
     source: '台湾銀行レート',
+    bankOfficialRates: '台湾銀行レート',
     sourceTime: 'ソース',
     refreshTime: '更新',
     lastUpdate: '最終更新',
@@ -309,25 +315,50 @@ const ja = {
     updatingDescription: 'しばらくお待ちください...',
     updateFailedTitle: '更新に失敗しました',
     updateFailedDescription: '再試行するかネットワークを確認してください',
-    registrationFailedTitle: 'バックグラウンド更新の初期化に失敗しました',
-    registrationFailedDescription:
-      '更新ワーカーを起動できませんでした。ページを再読み込みし、続く場合は作者へ連絡してください。',
     actionRetry: '再試行',
-    actionReload: '再読み込み',
     releaseToRefresh: '離して更新',
     refreshing: '更新中...',
   },
 
   support: {
+    contactLinksAriaLabel: 'サポート連絡先',
+    contactTitle: '問題が続く場合は、作者へご連絡ください：',
     reportIssueLead: '問題が続く場合は、作者へ直接ご連絡ください。',
     reportIssueHint: 'エラー画面、再現手順、端末情報を添えると、原因の特定が早くなります。',
   },
 
+  offline: {
+    title: 'オフラインモード',
+    description: '一部の機能を利用できない場合があります',
+    close: 'オフライン通知を閉じる',
+  },
+
+  skeleton: {
+    appLoading: `${APP_INFO.name}を読み込み中です。`,
+    ratesLoading: '為替レートデータを読み込み中...',
+    settingsLoading: '設定を読み込み中...',
+    favoritesLoading: 'お気に入りを読み込み中...',
+    multiConverterLoading: '複数通貨換算を読み込み中...',
+  },
+
+  rateProvider: {
+    bestRecommendation: 'おすすめ',
+    menuAriaLabel: '為替レート提供元メニュー',
+  },
+
   // 404
   notFound: {
+    metaTitle: '404 - ページが見つかりません',
+    metaDescription:
+      '申し訳ありません。アクセスしたページは存在しません。ホームへ戻るか、別のページをご覧ください。',
+    eyebrow: 'ページエラー',
+    errorAria: '404 エラー',
     title: 'ページが見つかりません',
     message: 'お探しのページは存在しないか、削除されました。',
     goHome: 'ホームに戻る',
+    suggestedPages: 'こちらのページもご覧ください：',
+    reportIssuePrefix: '誤りと思われる場合は',
+    reportIssueLink: '問題を報告',
   },
 
   // Footer
@@ -340,7 +371,7 @@ const ja = {
     refresh: '更新',
     disclaimer:
       '為替レートは台湾銀行の公式レート（現金・直物売りレート）を参照しています。実際の取引レートは銀行の発表をご確認ください。',
-    disclaimerDesktop: '台湾銀行のレートを5分ごとに更新。参考用のみ。',
+    disclaimerDesktop: '台湾銀行のレートを定期的に確認。参考用のみ。',
     faq: 'よくある質問',
     about: '私たちについて',
     appName: APP_INFO.shortName,
diff --git a/apps/ratewise/src/i18n/locales/ko.ts b/apps/ratewise/src/i18n/locales/ko.ts
index 3692073ba..07afa9514 100644
--- a/apps/ratewise/src/i18n/locales/ko.ts
+++ b/apps/ratewise/src/i18n/locales/ko.ts
@@ -47,6 +47,7 @@ const ko = {
     title: APP_INFO.shortName,
     subtitle: '환율 계산 도구',
     version: '버전',
+    loadingLiveRates: '실시간 환율을 불러오는 중...',
   },
 
   // Single Currency Converter
@@ -75,6 +76,7 @@ const ko = {
     rateTypeUnavailableForCurrencies:
       '{{currencies}}는 {{rateType}} 환율을 지원하지 않아 {{fallbackType}}으로 전환되었습니다',
     viewTrendChart: '추세 차트 보기',
+    trendChartLoadFailed: '추세 차트를 불러오지 못했습니다',
     fromAmountLabel: '금액 ({{code}})',
     toAmountLabel: '결과 ({{code}})',
     backToConverter: '환산기로 돌아가기',
@@ -92,6 +94,7 @@ const ko = {
     calculating: '계산 중...',
     noData: '데이터 없음',
     amountClickCalculator: '{{name}} ({{code}}) 금액, 클릭하여 계산기 열기',
+    setBaseCurrency: '{{name}} ({{code}}) 기준 통화로 설정',
     currencyListLabel: '통화 목록',
     addFavorite: '{{code}} 즐겨찾기에 추가',
     removeFavorite: '{{code}} 즐겨찾기에서 제거',
@@ -130,6 +133,7 @@ const ko = {
   // Settings
   settings: {
     title: '설정',
+    description: '인터페이스 스타일, 언어, 환율 모드와 지원 정보를 조정합니다.',
     interfaceStyle: '인터페이스 스타일',
     language: '언어',
     storageCache: '저장소 및 캐시',
@@ -139,7 +143,8 @@ const ko = {
     taiwanBank: '대만 은행',
     updateFrequency: '업데이트 빈도',
     fiveMinutes: '5분',
-    updateNote: '환율 데이터는 5분마다 자동으로 업데이트됩니다.',
+    updateNote:
+      '환율 데이터는 약 5분마다 확인되며 실제 반영 시점은 원본과 CDN 상태에 따라 달라집니다.',
     resetTheme: '테마 설정 초기화',
     appVersion: '앱 버전',
     designSystem: '디자인 시스템',
@@ -231,6 +236,7 @@ const ko = {
   // Rate Info
   rateInfo: {
     source: '대만 은행 환율',
+    bankOfficialRates: '대만 은행 환율',
     sourceTime: '출처',
     refreshTime: '새로고침',
     lastUpdate: '마지막 업데이트',
@@ -307,25 +313,50 @@ const ko = {
     updatingDescription: '잠시 기다려 주세요...',
     updateFailedTitle: '업데이트 실패',
     updateFailedDescription: '다시 시도하거나 네트워크를 확인해 주세요',
-    registrationFailedTitle: '백그라운드 업데이트 초기화 실패',
-    registrationFailedDescription:
-      '업데이트 워커를 시작할 수 없습니다. 페이지를 새로고침하고 계속되면 작성자에게 문의해 주세요.',
     actionRetry: '재시도',
-    actionReload: '새로고침',
     releaseToRefresh: '놓아서 새로고침',
     refreshing: '새로고침 중...',
   },
 
   support: {
+    contactLinksAriaLabel: '지원 연락처',
+    contactTitle: '문제가 계속되면 작성자에게 문의해 주세요:',
     reportIssueLead: '문제가 계속되면 작성자에게 직접 연락해 주세요.',
     reportIssueHint: '오류 화면, 재현 단계, 기기 정보를 함께 보내주시면 빠른 해결에 도움이 됩니다.',
   },
 
+  offline: {
+    title: '오프라인 모드',
+    description: '일부 기능을 사용할 수 없을 수 있습니다',
+    close: '오프라인 알림 닫기',
+  },
+
+  skeleton: {
+    appLoading: `${APP_INFO.name} 로딩 중입니다.`,
+    ratesLoading: '환율 데이터를 불러오는 중...',
+    settingsLoading: '설정을 불러오는 중...',
+    favoritesLoading: '즐겨찾기를 불러오는 중...',
+    multiConverterLoading: '복수 통화 환산을 불러오는 중...',
+  },
+
+  rateProvider: {
+    bestRecommendation: '추천',
+    menuAriaLabel: '환율 제공자 메뉴',
+  },
+
   // 404
   notFound: {
+    metaTitle: '404 - 페이지를 찾을 수 없습니다',
+    metaDescription:
+      '죄송합니다. 방문하신 페이지가 존재하지 않습니다. 홈으로 돌아가거나 다른 페이지를 둘러보세요.',
+    eyebrow: '페이지 오류',
+    errorAria: '404 오류',
     title: '페이지를 찾을 수 없습니다',
     message: '찾으시는 페이지가 존재하지 않거나 삭제되었습니다.',
     goHome: '홈으로 이동',
+    suggestedPages: '다음 페이지를 확인해 보세요:',
+    reportIssuePrefix: '오류라고 생각되면',
+    reportIssueLink: '문제를 신고해 주세요',
   },
 
   // Footer
@@ -338,7 +369,7 @@ const ko = {
     refresh: '새로고침',
     disclaimer:
       '환율은 대만 은행 공식 환율(현금·전신환 매도 가격)을 참고합니다. 실제 거래 환율은 각 은행 공지를 확인하세요.',
-    disclaimerDesktop: '대만 은행 기준 환율, 5분마다 업데이트. 참고용으로만 사용하세요.',
+    disclaimerDesktop: '대만 은행 기준 환율을 정기적으로 확인합니다. 참고용으로만 사용하세요.',
     faq: '자주 묻는 질문',
     about: '소개',
     appName: APP_INFO.shortName,
diff --git a/apps/ratewise/src/i18n/locales/zh-TW.ts b/apps/ratewise/src/i18n/locales/zh-TW.ts
index 3542c2ca4..fd3e6c363 100644
--- a/apps/ratewise/src/i18n/locales/zh-TW.ts
+++ b/apps/ratewise/src/i18n/locales/zh-TW.ts
@@ -47,6 +47,7 @@ const zhTW = {
     title: APP_INFO.shortName,
     subtitle: '匯率換算工具',
     version: '版本',
+    loadingLiveRates: '載入即時匯率中...',
   },
 
   // Single Currency Converter
@@ -75,6 +76,7 @@ const zhTW = {
     rateTypeUnavailableForCurrencies:
       '{{currencies}} 不提供 {{rateType}} 匯率，已改用 {{fallbackType}}',
     viewTrendChart: '查看趨勢圖',
+    trendChartLoadFailed: '趨勢圖載入失敗',
     fromAmountLabel: '轉換金額 ({{code}})',
     toAmountLabel: '轉換結果 ({{code}})',
     backToConverter: '返回主換算器',
@@ -92,6 +94,7 @@ const zhTW = {
     calculating: '計算中...',
     noData: '無資料',
     amountClickCalculator: '{{name}} ({{code}}) 金額，點擊開啟計算機',
+    setBaseCurrency: '將 {{name}} ({{code}}) 設為基準貨幣',
     currencyListLabel: '貨幣列表',
     addFavorite: '加入常用貨幣 {{code}}',
     removeFavorite: '移除常用貨幣 {{code}}',
@@ -130,6 +133,7 @@ const zhTW = {
   // Settings
   settings: {
     title: '設定',
+    description: '調整介面風格、語言、匯率模式與支援資訊入口。',
     interfaceStyle: '介面風格',
     language: '語言',
     storageCache: '儲存與快取',
@@ -139,7 +143,7 @@ const zhTW = {
     taiwanBank: '台灣銀行',
     updateFrequency: '更新頻率',
     fiveMinutes: '5 分鐘',
-    updateNote: '匯率資料每 5 分鐘自動更新。',
+    updateNote: '匯率資料約每 5 分鐘檢查更新，實際時間依來源與 CDN 而定。',
     resetTheme: '重置主題設定',
     appVersion: '應用程式版本',
     designSystem: '設計系統',
@@ -231,6 +235,7 @@ const zhTW = {
   // Rate Info
   rateInfo: {
     source: '臺灣銀行牌告',
+    bankOfficialRates: '臺灣銀行牌告',
     sourceTime: '來源',
     refreshTime: '刷新',
     lastUpdate: '最後更新',
@@ -305,24 +310,49 @@ const zhTW = {
     updatingDescription: '請稍候...',
     updateFailedTitle: '更新失敗',
     updateFailedDescription: '請重試或檢查網路',
-    registrationFailedTitle: '背景更新初始化失敗',
-    registrationFailedDescription: '更新模組載入失敗，請重新載入；若仍持續發生，請直接聯繫作者。',
     actionRetry: '重試',
-    actionReload: '重新載入',
     releaseToRefresh: '放開以重新整理',
     refreshing: '重新整理中...',
   },
 
   support: {
+    contactLinksAriaLabel: '支援聯絡方式',
+    contactTitle: '若問題持續發生，請聯絡作者：',
     reportIssueLead: '若問題持續發生，請直接聯繫作者回報。',
     reportIssueHint: '建議附上錯誤畫面、操作步驟與裝置資訊，方便快速排查。',
   },
 
+  offline: {
+    title: '離線模式',
+    description: '部分功能可能無法使用',
+    close: '關閉離線提示',
+  },
+
+  skeleton: {
+    appLoading: `${APP_INFO.name} 載入中。`,
+    ratesLoading: '載入匯率資料中...',
+    settingsLoading: '載入設定中...',
+    favoritesLoading: '載入收藏中...',
+    multiConverterLoading: '載入多幣別換算中...',
+  },
+
+  rateProvider: {
+    bestRecommendation: '推薦最佳',
+    menuAriaLabel: '匯率來源 provider 選單',
+  },
+
   // 404
   notFound: {
+    metaTitle: '404 - 找不到頁面',
+    metaDescription: '很抱歉，您訪問的頁面不存在。請返回首頁或瀏覽其他頁面。',
+    eyebrow: '頁面錯誤',
+    errorAria: '404 錯誤',
     title: '頁面不存在',
     message: '您要找的頁面不存在或已被移除。',
     goHome: '返回首頁',
+    suggestedPages: '或許您想前往：',
+    reportIssuePrefix: '如果您認為這是一個錯誤，請',
+    reportIssueLink: '回報問題',
   },
 
   // Footer
@@ -336,7 +366,7 @@ const zhTW = {
     disclaimer:
       '本服務匯率資料參考臺灣銀行牌告匯率（現金與即期賣出價）· 實際交易匯率以各銀行公告為準',
     disclaimerDesktop:
-      '匯率數據參考臺灣銀行牌告匯率，每 5 分鐘更新。僅供參考，實際交易請以銀行公告為準。',
+      '匯率數據參考臺灣銀行牌告匯率，排程檢查更新。僅供參考，實際交易請以銀行公告為準。',
     faq: '常見問題',
     about: '關於我們',
     appName: APP_INFO.subtitle,
diff --git a/apps/ratewise/src/index.css b/apps/ratewise/src/index.css
index 281b9dfd6..3f9ae8eff 100644
--- a/apps/ratewise/src/index.css
+++ b/apps/ratewise/src/index.css
@@ -19,16 +19,10 @@
 }
 
 /**
- * Modern Design System - ParkKeeper Style (SSOT)
+ * RateWise Design System (SSOT)
  *
- * @description 現代化設計系統，參考 ParkKeeper 設計風格
- *              6 種風格（Zen/Nitro/Kawaii/Classic/Ocean/Forest）
- *              包含圖表專用 Design Token (SSOT for MiniTrendChart)
- *
- * @reference ParkKeeper UI Design, themes.ts SSOT
- * @created 2026-01-16
- * @updated 2026-01-17 - 移除深色模式，簡化為僅風格切換
- * @version 5.0.0
+ * @description 管理 6 種介面風格的 CSS Variables 與共用元件語法
+ * @reference DESIGN.md, themes.ts, design-tokens.ts
  */
 
 @layer base {
@@ -59,7 +53,7 @@
     /* Bottom Navigation Configuration */
     --nav-bottom-height: 56px;
     --nav-bottom-icon-size: 20px;
-    --nav-bottom-label-size: 8px;
+    --nav-bottom-label-size: 11px;
     --nav-bottom-indicator-width: 24px;
     --nav-bottom-indicator-height: 3px;
 
@@ -69,23 +63,41 @@
     /* Title Gradient Tokens (SSOT) */
     --color-title-gradient-from: var(--color-text);
     --color-title-gradient-to: var(--color-primary);
+
+    /* Radius Tokens (SSOT) - mirrored from design-tokens.ts */
+    --radius-card: 1.5rem;
+    --radius-panel: 1rem;
+    --radius-control: 1rem;
+    --radius-icon: 0.75rem;
+    --radius-compact: 0.5rem;
+
+    /* Shadow Tokens (SSOT) - mirrored from design-tokens.ts */
+    --shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 12px 32px -24px rgb(15 23 42 / 0.28);
+    --shadow-card-hover:
+      0 2px 6px -2px rgb(15 23 42 / 0.1), 0 22px 48px -28px rgb(var(--color-primary) / 0.3);
+    --shadow-soft: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 8px 24px -22px rgb(15 23 42 / 0.22);
+    --shadow-floating:
+      0 8px 28px -18px rgb(15 23 42 / 0.28), 0 16px 44px -28px rgb(var(--color-primary) / 0.24);
+    --shadow-brand: 0 8px 25px rgb(var(--color-primary) / 0.28);
   }
 
   /* ========================================
      Zen 風格 - 極簡專業（預設）
      禪意極簡，以 violet/blue 為圖表色調
      ======================================== */
-  /* 極簡風格：紫色為主色 */
+  /* 極簡風格：主支現代 violet/indigo 品牌語言 */
   :root,
   [data-style='zen'] {
     --color-background: 248 250 252;
     --color-surface: 255 255 255;
     --color-text: 15 23 42;
     --color-text-muted: 100 116 139;
-    --color-primary: 124 58 237; /* violet-600 - 紫色主色 */
-    --color-secondary: 99 102 241; /* indigo-500 - 靛藍輔色 */
+    --color-primary: 124 58 237; /* violet-600 */
+    --color-primary-foreground: 255 255 255;
+    --color-secondary: 99 102 241; /* indigo-500 */
     --color-accent: 139 92 246; /* violet-500 */
     --color-border: 226 232 240;
+    --color-overlay: 2 6 23;
     --color-info: 14 165 233;
 
     /* 圖表專用 Token (SSOT) */
@@ -94,8 +106,18 @@
     --color-chart-area-bottom: 59 130 246; /* blue-500 */
 
     /* 卡片層級區分 Token - 用於嵌套卡片視覺區分 */
-    --color-surface-elevated: 248 250 252; /* slate-50 - 微灰底色 */
-    --color-surface-sunken: 241 245 249; /* slate-100 - 下沉區域 */
+    --color-surface-elevated: 248 250 252; /* slate-50 */
+    --color-surface-sunken: 241 245 249; /* slate-100 */
+    --color-surface-soft: var(--color-surface-elevated);
+    --color-surface-border: var(--color-border);
+    --color-background-secondary: var(--color-surface);
+    --color-background-tertiary: var(--color-surface-elevated);
+    --color-border-secondary: var(--color-border);
+    --color-input: var(--color-surface);
+    --color-input-border: var(--color-border);
+    --color-sidebar: var(--color-surface);
+    --color-sidebar-foreground: var(--color-text);
+    --color-sidebar-active: var(--color-surface-elevated);
 
     /* 向後相容映射 */
     --color-foreground: var(--color-text);
@@ -128,13 +150,13 @@
     --color-primary-text: 124 58 237; /* violet-600 */
 
     /* 狀態色 */
-    --color-destructive: 239 68 68;
-    --color-destructive-hover: 220 38 38;
+    --color-destructive: 220 38 38;
+    --color-destructive-hover: 185 28 28;
     --color-destructive-foreground: 255 255 255;
     --color-success: 34 197 94;
-    --color-success-foreground: 255 255 255;
+    --color-success-foreground: 2 6 23;
     --color-warning: 245 158 11;
-    --color-warning-foreground: 255 255 255;
+    --color-warning-foreground: 2 6 23;
 
     /* 舊版 danger/success/warning 系列 */
     --color-danger-bg: 254 242 242;
@@ -267,11 +289,13 @@
     --color-background: 2 6 23; /* slate-950 */
     --color-surface: 15 23 42; /* slate-900 */
     --color-text: 255 255 255;
-    --color-text-muted: 100 116 139; /* slate-500 */
-    --color-primary: 0 212 255; /* 霓虹藍 */
+    --color-text-muted: 203 213 225; /* slate-300 */
+    --color-primary: 0 150 230; /* 霓虹藍（深電光，白字 3:1 AA） */
+    --color-primary-foreground: 255 255 255;
     --color-secondary: 129 140 248; /* indigo-400 */
     --color-accent: 0 255 136; /* 霓虹綠 */
     --color-border: 30 41 59; /* slate-800 */
+    --color-overlay: 0 0 0;
 
     /* 狀態語義色彩 - 霓虹風格 */
     --color-info: 56 189 248; /* sky-400 */
@@ -298,14 +322,47 @@
 
     /* 向後相容映射 */
     --color-foreground: var(--color-text);
+    --color-foreground-secondary: var(--color-text-muted);
+    --color-foreground-muted: var(--color-text-muted);
+    --color-card: var(--color-surface);
+    --color-card-foreground: var(--color-text);
+    --color-ring: var(--color-primary);
     --color-neutral-bg: var(--color-background);
     --color-neutral-light: var(--color-surface);
+    --color-neutral: 30 41 59;
+    --color-neutral-dark: 51 65 85;
+    --color-neutral-darker: 71 85 105;
     --color-neutral-text: var(--color-text);
     --color-neutral-text-secondary: 203 213 225; /* slate-300 - 算式文字高對比 */
-    --color-neutral-text-muted: 148 163 184; /* slate-400 - 預覽文字可讀 */
+    --color-neutral-text-muted: var(--color-text-muted);
+    --color-neutral-border: var(--color-border);
     --color-destructive: var(--color-error);
+    --color-destructive-hover: 239 68 68;
+    --color-destructive-foreground: 2 6 23;
+    --color-success-foreground: 2 44 34;
+    --color-warning-foreground: 2 6 23;
+    --color-danger-bg: 69 10 10;
+    --color-danger-light: 127 29 29;
+    --color-danger-hover: 239 68 68;
+    --color-danger-active: 248 113 113;
+    --color-danger-text: 252 165 165;
+    --color-danger: 248 113 113;
+    --color-success-bg: 6 78 59;
+    --color-success-light: 6 95 70;
+    --color-success-hover: 5 150 105;
+    --color-success-active: 16 185 129;
     --color-success-text: var(--color-success);
+    --color-warning-light: 120 53 15;
+    --color-warning-hover: 146 64 14;
+    --color-warning-active: 180 83 9;
     --color-warning-text: var(--color-warning);
+    --color-favorite-light: 120 53 15;
+    --color-favorite: 251 191 36;
+    --color-highlight-from: 15 23 42;
+    --color-highlight-to: 30 41 59;
+    --color-footer-from: var(--color-surface);
+    --color-footer-via: 30 41 59;
+    --color-footer-to: var(--color-background);
 
     /* Page Gradient Tokens - Nitro 深色科技漸層 */
     --color-page-gradient-from: 2 6 23; /* slate-950 */
@@ -402,12 +459,14 @@
     /* 核心語義色彩 */
     --color-background: 255 250 244; /* warm cream */
     --color-surface: 255 255 255;
-    --color-text: 142 124 128; /* muted pink-brown */
-    --color-text-muted: 180 160 165;
-    --color-primary: 255 105 180; /* hot pink */
-    --color-secondary: 236 72 153; /* pink-500 */
+    --color-text: 92 45 60; /* accessible deep rose */
+    --color-text-muted: 102 65 76;
+    --color-primary: 190 24 93; /* pink-700 */
+    --color-primary-foreground: 255 255 255;
+    --color-secondary: 190 24 93; /* pink-700 */
     --color-accent: 255 182 193; /* light pink */
     --color-border: 255 228 225; /* misty rose */
+    --color-overlay: 2 6 23;
 
     /* 狀態語義色彩 - 柔和可愛風 */
     --color-info: 147 197 253; /* blue-300 - 天空藍 */
@@ -428,14 +487,25 @@
     --color-primary-bg: 253 242 248; /* pink-50 */
     --color-primary-light: 252 231 243; /* pink-100 */
     --color-primary-hover: 219 39 119; /* pink-600 */
+    --color-primary-dark: 190 24 93; /* pink-700 */
+    --color-primary-darker: 157 23 77; /* pink-800 */
 
     /* 向後相容映射 */
     --color-foreground: var(--color-text);
+    --color-foreground-secondary: var(--color-text-muted);
+    --color-foreground-muted: var(--color-text-muted);
+    --color-card: var(--color-surface);
+    --color-card-foreground: var(--color-text);
+    --color-ring: var(--color-primary);
     --color-neutral-bg: var(--color-background);
     --color-neutral-light: var(--color-surface);
     --color-neutral-text: var(--color-text);
     --color-neutral-text-muted: var(--color-text-muted);
     --color-destructive: var(--color-error);
+    --color-destructive-hover: 248 113 113;
+    --color-destructive-foreground: 2 6 23;
+    --color-success-foreground: 2 6 23;
+    --color-warning-foreground: 2 6 23;
     --color-success-text: var(--color-success);
     --color-warning-text: var(--color-warning);
 
@@ -539,9 +609,11 @@
     --color-text: 67 20 7; /* dark brown - 深棕 */
     --color-text-muted: 120 80 60; /* 中棕 */
     --color-primary: 139 69 19; /* saddle brown - 馬鞍棕 */
+    --color-primary-foreground: 255 255 255;
     --color-secondary: 161 98 7; /* amber-700 - 琥珀 */
     --color-accent: 180 120 80; /* tan - 棕褐 */
     --color-border: 245 230 220; /* linen - 亞麻 */
+    --color-overlay: 67 20 7;
 
     /* 狀態語義色彩 - 復古調性 */
     --color-info: 59 130 246; /* blue-500 - 墨水藍 */
@@ -562,14 +634,25 @@
     --color-primary-bg: 254 243 199; /* amber-100 */
     --color-primary-light: 254 243 199; /* amber-100 */
     --color-primary-hover: 146 64 14; /* amber-800 */
+    --color-primary-dark: 120 53 15; /* amber-900 */
+    --color-primary-darker: 69 26 3; /* amber-950 */
 
     /* 向後相容映射 */
     --color-foreground: var(--color-text);
+    --color-foreground-secondary: var(--color-text-muted);
+    --color-foreground-muted: var(--color-text-muted);
+    --color-card: var(--color-surface);
+    --color-card-foreground: var(--color-text);
+    --color-ring: var(--color-primary);
     --color-neutral-bg: var(--color-background);
     --color-neutral-light: var(--color-surface);
     --color-neutral-text: var(--color-text);
     --color-neutral-text-muted: var(--color-text-muted);
     --color-destructive: var(--color-error);
+    --color-destructive-hover: 153 27 27;
+    --color-destructive-foreground: 255 255 255;
+    --color-success-foreground: 2 6 23;
+    --color-warning-foreground: 255 255 255;
     --color-success-text: var(--color-success);
     --color-warning-text: var(--color-warning);
 
@@ -673,9 +756,11 @@
     --color-text: 7 89 133; /* cyan-800 */
     --color-text-muted: 22 78 99; /* cyan-900 lighter */
     --color-primary: 6 182 212; /* cyan-500 */
+    --color-primary-foreground: 255 255 255;
     --color-secondary: 14 165 233; /* sky-500 */
     --color-accent: 20 184 166; /* teal-500 */
     --color-border: 186 230 253; /* sky-200 */
+    --color-overlay: 7 89 133;
 
     /* 狀態語義色彩 - 海洋調性 */
     --color-info: 56 189 248; /* sky-400 */
@@ -696,14 +781,25 @@
     --color-primary-bg: 207 250 254; /* cyan-100 */
     --color-primary-light: 207 250 254; /* cyan-100 */
     --color-primary-hover: 8 145 178; /* cyan-600 */
+    --color-primary-dark: 14 116 144; /* cyan-700 */
+    --color-primary-darker: 21 94 117; /* cyan-800 */
 
     /* 向後相容映射 */
     --color-foreground: var(--color-text);
+    --color-foreground-secondary: var(--color-text-muted);
+    --color-foreground-muted: var(--color-text-muted);
+    --color-card: var(--color-surface);
+    --color-card-foreground: var(--color-text);
+    --color-ring: var(--color-primary);
     --color-neutral-bg: var(--color-background);
     --color-neutral-light: var(--color-surface);
     --color-neutral-text: var(--color-text);
     --color-neutral-text-muted: var(--color-text-muted);
-    --color-destructive: var(--color-error);
+    --color-destructive: 220 38 38;
+    --color-destructive-hover: 185 28 28;
+    --color-destructive-foreground: 255 255 255;
+    --color-success-foreground: 2 6 23;
+    --color-warning-foreground: 2 6 23;
     --color-success-text: var(--color-success);
     --color-warning-text: var(--color-warning);
 
@@ -807,9 +903,11 @@
     --color-text: 20 83 45; /* green-800 */
     --color-text-muted: 22 101 52; /* green-700 */
     --color-primary: 5 150 105; /* emerald-600 */
+    --color-primary-foreground: 255 255 255;
     --color-secondary: 22 163 74; /* green-600 */
     --color-accent: 101 163 13; /* lime-600 */
     --color-border: 187 247 208; /* green-200 */
+    --color-overlay: 20 83 45;
 
     /* 狀態語義色彩 - 自然調性 */
     --color-info: 59 130 246; /* blue-500 */
@@ -830,14 +928,25 @@
     --color-primary-bg: 209 250 229; /* emerald-100 */
     --color-primary-light: 209 250 229; /* emerald-100 */
     --color-primary-hover: 4 120 87; /* emerald-700 */
+    --color-primary-dark: 6 95 70; /* emerald-800 */
+    --color-primary-darker: 6 78 59; /* emerald-900 */
 
     /* 向後相容映射 */
     --color-foreground: var(--color-text);
+    --color-foreground-secondary: var(--color-text-muted);
+    --color-foreground-muted: var(--color-text-muted);
+    --color-card: var(--color-surface);
+    --color-card-foreground: var(--color-text);
+    --color-ring: var(--color-primary);
     --color-neutral-bg: var(--color-background);
     --color-neutral-light: var(--color-surface);
     --color-neutral-text: var(--color-text);
     --color-neutral-text-muted: var(--color-text-muted);
     --color-destructive: var(--color-error);
+    --color-destructive-hover: 185 28 28;
+    --color-destructive-foreground: 255 255 255;
+    --color-success-foreground: 2 6 23;
+    --color-warning-foreground: 2 6 23;
     --color-success-text: var(--color-success);
     --color-warning-text: var(--color-warning);
 
@@ -1025,7 +1134,7 @@ body {
     min-height: 100dvh;
   }
 
-  /* 隱藏滾動條但保留滾動功能（ParkKeeper 風格） */
+  /* 隱藏滾動條但保留滾動功能 */
   .no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -1132,7 +1241,7 @@ body {
 }
 
 /**
- * 現代化元件樣式（ParkKeeper 風格）
+ * 共用元件樣式（RateWise SSOT）
  */
 @layer components {
   /* ========================================
@@ -1159,54 +1268,52 @@ body {
   /* 現代化卡片 */
   .card {
     background-color: rgb(var(--color-surface));
-    border-radius: 1.5rem;
+    border-radius: var(--radius-card);
     border: 1px solid rgb(var(--color-border) / 0.5);
-    box-shadow:
-      0 1px 2px 0 rgb(0 0 0 / 0.03),
-      0 1px 3px 0 rgb(0 0 0 / 0.05);
-    transition: all 0.2s ease;
+    box-shadow: var(--shadow-card);
+    transition:
+      border-color 0.2s ease,
+      box-shadow 0.2s ease,
+      transform 0.2s ease;
   }
 
   .card:hover {
-    box-shadow:
-      0 4px 6px -1px rgb(0 0 0 / 0.05),
-      0 2px 4px -2px rgb(0 0 0 / 0.05);
+    box-shadow: var(--shadow-card-hover);
   }
 
   /* 現代化按鈕 */
   .btn-primary {
     background-color: rgb(var(--color-primary));
     color: rgb(var(--color-background));
-    border-radius: 1rem;
+    border-radius: var(--radius-control);
     padding: 0.75rem 1.5rem;
     font-weight: 600;
-    transition: all 0.2s ease;
+    transition:
+      background-color 0.2s ease,
+      box-shadow 0.2s ease,
+      transform 0.2s ease;
   }
 
   .btn-primary:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgb(var(--color-primary) / 0.3);
+    box-shadow: var(--shadow-brand);
   }
 
   .btn-primary:active {
     transform: translateY(0);
   }
 
-  /* 陰影層級（ParkKeeper 風格） */
+  /* 陰影層級（產品殼層） */
   .shadow-elevation-1 {
-    box-shadow:
-      0 1px 2px 0 rgb(0 0 0 / 0.03),
-      0 1px 3px 0 rgb(0 0 0 / 0.05);
+    box-shadow: var(--shadow-soft);
   }
 
   .shadow-elevation-2 {
-    box-shadow:
-      0 4px 6px -1px rgb(0 0 0 / 0.05),
-      0 2px 4px -2px rgb(0 0 0 / 0.05);
+    box-shadow: var(--shadow-card-hover);
   }
 
   .shadow-elevation-3 {
-    box-shadow: 0 8px 25px rgb(var(--color-primary) / 0.4);
+    box-shadow: var(--shadow-floating);
   }
 
   /* 選中狀態的 ring */
@@ -1290,13 +1397,20 @@ body {
     min-height: 100vh;
   }
 
+  /* Lightweight Charts 會注入 TradingView attribution link；放大互動面但保留原圖示比例。 */
+  #tv-attr-logo {
+    align-items: center !important;
+    display: inline-flex !important;
+    justify-content: center !important;
+    min-height: 44px !important;
+    min-width: 44px !important;
+  }
+
   /* 骨架屏卡片容器 */
   .skeleton-card {
     background-color: rgb(var(--color-surface));
-    border-radius: 1.5rem;
+    border-radius: var(--radius-card);
     border: 1px solid rgb(var(--color-border) / 0.5);
-    box-shadow:
-      0 1px 2px 0 rgb(0 0 0 / 0.03),
-      0 1px 3px 0 rgb(0 0 0 / 0.05);
+    box-shadow: var(--shadow-card);
   }
 }
diff --git a/apps/ratewise/src/index.html.test.ts b/apps/ratewise/src/index.html.test.ts
index c14823b57..76e179c65 100644
--- a/apps/ratewise/src/index.html.test.ts
+++ b/apps/ratewise/src/index.html.test.ts
@@ -3,10 +3,40 @@
 import { describe, it, expect } from 'vitest';
 import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
+import { STYLE_DEFINITIONS, type ThemeStyle } from './config/themes';
 
 describe('index.html - Static Template (SEOHelmet Architecture)', () => {
   const indexHtmlPath = resolve(__dirname, '..', 'index.html');
   const indexHtmlContent = readFileSync(indexHtmlPath, 'utf-8');
+  const defaultThemeColor = toHexColor(STYLE_DEFINITIONS.zen.colors.primary).toUpperCase();
+  const skeletonTokenMap = {
+    background: '--sk-bg',
+    surface: '--sk-surface',
+    border: '--sk-border',
+    text: '--sk-text',
+    textMuted: '--sk-text-muted',
+  } as const;
+
+  function toHexColor(spaceDelimitedRgb: string): string {
+    return `#${spaceDelimitedRgb
+      .split(' ')
+      .map((channel) => Number(channel).toString(16).padStart(2, '0'))
+      .join('')}`;
+  }
+
+  function getStyleBlock(style: ThemeStyle): string {
+    const pattern =
+      style === 'zen'
+        ? /:root,\s*\[data-style='zen'\]\s*\{([\s\S]*?)\n\s*\}/
+        : new RegExp(`\\[data-style='${style}'\\]\\s*\\{([\\s\\S]*?)\\n\\s*\\}`);
+    const match = indexHtmlContent.match(pattern);
+
+    if (!match?.[1]) {
+      throw new Error(`找不到 ${style} 的 skeleton 樣式區塊`);
+    }
+
+    return match[1];
+  }
 
   describe('🟢 基礎設施 Meta Tags（保留）', () => {
     it('should have <html lang="zh-TW"> attribute', () => {
@@ -19,7 +49,7 @@ describe('index.html - Static Template (SEOHelmet Architecture)', () => {
     });
 
     it('should have theme-color meta tag', () => {
-      expect(indexHtmlContent).toContain('<meta name="theme-color" content="#8B5CF6"');
+      expect(indexHtmlContent).toContain(`<meta name="theme-color" content="${defaultThemeColor}"`);
     });
 
     it('should have Cloudflare Rocket Loader disabled', () => {
@@ -114,7 +144,7 @@ describe('index.html - Static Template (SEOHelmet Architecture)', () => {
 
   describe('🟢 PWA Meta Tags（保留）', () => {
     it('should retain PWA essential tags', () => {
-      expect(indexHtmlContent).toContain('<meta name="theme-color" content="#8B5CF6"');
+      expect(indexHtmlContent).toContain(`<meta name="theme-color" content="${defaultThemeColor}"`);
       expect(indexHtmlContent).toContain('<meta name="viewport"');
       expect(indexHtmlContent).toContain('<link rel="apple-touch-icon"');
       expect(indexHtmlContent).toContain('<link rel="icon"');
@@ -145,6 +175,27 @@ describe('index.html - Static Template (SEOHelmet Architecture)', () => {
     });
   });
 
+  describe('🟢 Skeleton Theme Tokens（保留）', () => {
+    it('should not pin body background to Zen before theme CSS loads', () => {
+      expect(indexHtmlContent).toContain('background: var(--sk-bg, #f8fafc);');
+      expect(indexHtmlContent).toContain('color: var(--sk-text, #0f172a);');
+      expect(indexHtmlContent).toContain('<body>');
+      expect(indexHtmlContent).not.toContain('<body class="bg-slate-50">');
+    });
+
+    it('should align skeleton semantic colors with style definitions', () => {
+      for (const style of Object.keys(STYLE_DEFINITIONS) as ThemeStyle[]) {
+        const block = getStyleBlock(style);
+
+        for (const token of Object.keys(skeletonTokenMap) as (keyof typeof skeletonTokenMap)[]) {
+          const cssVariable = skeletonTokenMap[token];
+          const expected = toHexColor(STYLE_DEFINITIONS[style].colors[token]);
+          expect(block).toContain(`${cssVariable}: ${expected};`);
+        }
+      }
+    });
+  });
+
   describe('🟢 Security: Theme Initialization Script', () => {
     // 壓縮後以行為驗證，不依賴變數名稱（ALLOWED_STYLES→A、getValidatedStyle→v 等）。
 
diff --git a/apps/ratewise/src/llms-txt.spec.ts b/apps/ratewise/src/llms-txt.spec.ts
index cc75fc040..907d242ee 100644
--- a/apps/ratewise/src/llms-txt.spec.ts
+++ b/apps/ratewise/src/llms-txt.spec.ts
@@ -14,7 +14,7 @@ describeIfGenerated('llms.txt structure (requires prebuild)', () => {
   it('includes required headings and answer capsule', () => {
     const content = readFileSync(llmsPath, 'utf-8');
     expect(content.startsWith(`# ${APP_INFO.name}`)).toBe(true);
-    expect(content).toContain('台灣最精準的匯率換算器');
+    expect(content).toContain('台銀牌告買賣價匯率換算器');
     expect(content).toContain('Answer Capsule (Quick Q&A)');
   });
 
@@ -120,7 +120,7 @@ describeIfGenerated('llms.txt structure (requires prebuild)', () => {
   });
 
   it('lists index.md homepage markdown mirror in Markdown Mirrors section', () => {
-    // index.md 是首頁最重要的 AI 友善鏡像，應讓 LLM agent 可透過 llms.txt 發現。
+    // index.md 是首頁最重要的機器可讀鏡像，應讓 LLM agent 可透過 llms.txt 發現。
     const content = readFileSync(llmsPath, 'utf-8');
     expect(content).toContain('index.md');
   });
diff --git a/apps/ratewise/src/main.tsx b/apps/ratewise/src/main.tsx
index bc35b412b..d004c8291 100644
--- a/apps/ratewise/src/main.tsx
+++ b/apps/ratewise/src/main.tsx
@@ -22,7 +22,12 @@ import { logger } from './utils/logger';
 import { initWebVitals } from './utils/webVitals';
 import { handleVersionUpdate } from './utils/versionManager';
 import { APP_VERSION, BUILD_TIME } from './config/version';
-import { isChunkLoadError, recoverFromChunkLoadError } from './utils/chunkLoadRecovery';
+import { recoverFromChunkLoadError } from './utils/chunkLoadRecovery';
+import {
+  classifyUnhandledRejection,
+  getUnhandledRejectionMessage,
+  toError,
+} from './utils/errorClassification';
 import { initPWAStorageManager, primePwaColdStartRecovery } from './utils/pwaStorageManager';
 import {
   clearPwaAppReadyMarker,
@@ -222,24 +227,13 @@ export const createRoot = ViteReactSSG(
       // [context7:googlechrome/lighthouse-ci:2025-10-20T04:10:04+08:00]
       // 主要用於處理歷史匯率 404 錯誤（正常現象，資料可能尚未生成）
       window.addEventListener('unhandledrejection', (event) => {
-        // 安全地提取錯誤訊息
         const reason: unknown = event.reason;
-        let errorMessage = '';
-
-        if (reason instanceof Error) {
-          errorMessage = reason.message;
-        } else if (typeof reason === 'string') {
-          errorMessage = reason;
-        } else if (reason && typeof reason === 'object' && 'message' in reason) {
-          const msg = (reason as { message: unknown }).message;
-          errorMessage = typeof msg === 'string' ? msg : JSON.stringify(reason);
-        }
-
-        const errorObject =
-          reason instanceof Error ? reason : new Error(errorMessage || 'Unhandled rejection');
+        const errorMessage = getUnhandledRejectionMessage(reason);
+        const errorObject = toError(reason);
+        const rejectionKind = classifyUnhandledRejection(reason);
 
         // 先處理 chunk 載入錯誤（避免被歷史匯率錯誤規則吞掉）
-        if (isChunkLoadError(errorObject)) {
+        if (rejectionKind === 'chunk-load') {
           logger.warn('Chunk load error captured by global handler', {
             reason: errorMessage,
           });
@@ -249,13 +243,7 @@ export const createRoot = ViteReactSSG(
           return;
         }
 
-        // 檢查是否為歷史匯率相關的網路錯誤
-        const isHistoricalRates404 =
-          errorMessage.includes('history') ||
-          errorMessage.includes('404') ||
-          errorMessage.includes('Failed to fetch');
-
-        if (isHistoricalRates404) {
+        if (rejectionKind === 'expected-history-miss') {
           // 這是預期的錯誤（歷史資料可能尚未生成），阻止顯示在 console
           logger.debug('Historical data fetch failed (expected)', {
             reason: errorMessage,
@@ -264,6 +252,14 @@ export const createRoot = ViteReactSSG(
           return;
         }
 
+        if (rejectionKind === 'generic-fetch-failure') {
+          logger.warn('Generic fetch failure captured by global handler', {
+            reason: errorMessage,
+          });
+          recordPwaDiagnostic('generic-fetch-failure', errorMessage, 'warn');
+          return;
+        }
+
         // 其他未處理的錯誤記錄但不阻止
         logger.error('Unhandled promise rejection', errorObject);
         recordPwaDiagnostic('unhandled-rejection', errorMessage || errorObject.message, 'error');
diff --git a/apps/ratewise/src/pages/About.tsx b/apps/ratewise/src/pages/About.tsx
index 862345860..436c8d026 100644
--- a/apps/ratewise/src/pages/About.tsx
+++ b/apps/ratewise/src/pages/About.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { SEOHelmet } from '../components/SEOHelmet';
 import { PageNavHeader } from '../components/PageNavHeader';
 import { AnswerCapsule } from '../components/AnswerCapsule';
+import { contentPageTokens } from '../config/design-tokens';
 import { getDisplayVersion } from '../config/version';
 import { APP_INFO, AUTHOR_PERSON, getCopyrightYears } from '../config/app-info';
 import { MailtoLink } from '../components/MailtoLink';
@@ -29,9 +30,10 @@ export default function About() {
         ogType="article"
       />
 
-      <div className="min-h-screen">
-        <div className="container mx-auto max-w-4xl px-4 py-8">
+      <div className="min-h-full">
+        <div className={contentPageTokens.shell}>
           <PageNavHeader
+            fallbackHref="/settings/"
             breadcrumbItems={[
               { label: t('nav.home'), href: '/' },
               { label: t('settings.aboutUs'), href: '/about/' },
@@ -39,11 +41,12 @@ export default function About() {
           />
 
           <div className="mb-8">
-            <h1 className="mb-2 text-3xl font-bold text-text">關於 {APP_INFO.name}</h1>
-            <p className="text-text-muted">
+            <p className={contentPageTokens.sectionHeader.eyebrow}>產品資訊</p>
+            <h1 className="mb-2 mt-2 text-3xl font-bold text-text">關於 {APP_INFO.name}</h1>
+            <p className={contentPageTokens.intro}>
               專注提供台灣用戶更接近實際換匯情境的匯率資訊，而不是只顯示中間價。
             </p>
-            <p className="mt-2 text-sm text-text-muted">
+            <p className={contentPageTokens.meta}>
               作者：
               <a
                 href={APP_INFO.threadsUrl}
@@ -99,26 +102,26 @@ export default function About() {
           <section className="card mb-6 p-6">
             <h2 className="mb-4 text-2xl font-bold text-text">技術與資料面能力</h2>
             <div className="grid gap-4 md:grid-cols-2">
-              <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
-                <h3 className="mb-2 text-lg font-semibold text-primary">精準換算</h3>
+              <div className={contentPageTokens.surfaces.quiet}>
+                <h3 className="mb-2 text-lg font-semibold text-primary">情境換算</h3>
                 <p className="text-sm leading-relaxed text-text-muted">
                   單幣別換算、快速金額按鈕、計算機鍵盤、現金與即期切換、7~30 天趨勢圖。
                 </p>
               </div>
-              <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
+              <div className={contentPageTokens.surfaces.quiet}>
                 <h3 className="mb-2 text-lg font-semibold text-primary">日常管理</h3>
                 <p className="text-sm leading-relaxed text-text-muted">
                   多幣別比較、收藏管理、拖曳排序、換算歷史、主題風格與三語介面設定。
                 </p>
               </div>
-              <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
+              <div className={contentPageTokens.surfaces.quiet}>
                 <h3 className="mb-2 text-lg font-semibold text-primary">可驗證資料面</h3>
                 <p className="text-sm leading-relaxed text-text-muted">
                   提供 `latest.json`、`openapi.json`、`llms.txt` 與 `llms-full.txt`，方便開發者與 AI
                   agent 使用。
                 </p>
               </div>
-              <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
+              <div className={contentPageTokens.surfaces.quiet}>
                 <h3 className="mb-2 text-lg font-semibold text-primary">PWA 能力</h3>
                 <p className="text-sm leading-relaxed text-text-muted">
                   可加入主畫面、支援離線讀取最近快取資料，重新連線後再同步最新匯率。
@@ -169,22 +172,22 @@ export default function About() {
                   href={APP_INFO.github}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="ml-1 text-primary underline"
+                  className={`ml-1 ${contentPageTokens.links.inline}`}
                 >
                   {APP_INFO.github}
                 </a>
               </p>
               <p>
                 <strong className="text-text">延伸閱讀：</strong>
-                <Link to="/faq/" className="ml-1 text-primary underline">
+                <Link to="/faq/" className={`ml-1 ${contentPageTokens.links.inline}`}>
                   常見問題
                 </Link>
                 <span className="mx-1">·</span>
-                <Link to="/guide/" className="text-primary underline">
+                <Link to="/guide/" className={contentPageTokens.links.inline}>
                   使用指南
                 </Link>
                 <span className="mx-1">·</span>
-                <Link to="/seo-tech/" className="text-primary underline">
+                <Link to="/seo-tech/" className={contentPageTokens.links.inline}>
                   SEO 技術揭露
                 </Link>
               </p>
diff --git a/apps/ratewise/src/pages/ColorSchemeComparison.tsx b/apps/ratewise/src/pages/ColorSchemeComparison.tsx
index 367c0f331..f63ebe6b3 100644
--- a/apps/ratewise/src/pages/ColorSchemeComparison.tsx
+++ b/apps/ratewise/src/pages/ColorSchemeComparison.tsx
@@ -1,226 +1,142 @@
-/**
- * 配色方案比較頁面
- * 用於展示和比較不同的通知視窗配色方案
- */
-
 import { Head } from 'vite-react-ssg';
+import { ArrowLeft, RefreshCw, X } from 'lucide-react';
+import { notificationTokens } from '../config/design-tokens';
 
 export default function ColorSchemeComparison() {
   const notificationVariants = [
     {
-      id: 'current',
-      name: '當前 - 棉花糖甜心',
-      description: '粉紅粉紫粉藍三色漸變',
-      containerBg: 'bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50',
-      containerBorder: 'border-purple-100',
-      iconBg: 'bg-gradient-to-br from-pink-200 via-purple-200 to-blue-200',
-      iconColor: 'text-purple-600',
-      titleColor: 'text-purple-700',
-      descColor: 'text-purple-500',
-      primaryBtn: 'bg-gradient-to-r from-pink-300 via-purple-300 to-blue-300',
-      primaryBtnHover: 'hover:from-pink-400 hover:via-purple-400 hover:to-blue-400',
-      secondaryBtn: 'bg-white/90 text-purple-600 border-purple-200',
-      bubbleTop: 'bg-purple-100/50',
-      bubbleBottom: 'bg-pink-100/50',
+      id: 'primary',
+      name: '方案 A · 品牌主色',
+      description: '以目前風格的主色建立更新提示層級',
+      containerBg: 'bg-primary/10',
+      iconBg: 'bg-primary/15',
+      iconColor: 'text-primary',
+      primaryBtn: 'bg-primary',
     },
     {
-      id: 'brand-aligned',
-      name: '方案 A - 品牌對齊',
-      description: '藍紫雙色漸變 (與主應用一致)',
-      containerBg: 'bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50',
-      containerBorder: 'border-indigo-100',
-      iconBg: 'bg-gradient-to-br from-blue-200 via-indigo-200 to-purple-200',
-      iconColor: 'text-indigo-600',
-      titleColor: 'text-indigo-700',
-      descColor: 'text-indigo-500',
-      primaryBtn: 'bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500',
-      primaryBtnHover: 'hover:from-blue-600 hover:via-indigo-600 hover:to-purple-600',
-      secondaryBtn: 'bg-white/90 text-indigo-600 border-indigo-200',
-      bubbleTop: 'bg-indigo-100/50',
-      bubbleBottom: 'bg-blue-100/50',
+      id: 'success',
+      name: '方案 B · 可用狀態',
+      description: '用於離線內容已準備完成的正向回饋',
+      containerBg: 'bg-success/10',
+      iconBg: 'bg-success/15',
+      iconColor: 'text-success',
+      primaryBtn: 'bg-success',
     },
     {
-      id: 'cool-tone',
-      name: '方案 B - 冷色調',
-      description: '藍紫色調 (專業穩重)',
-      containerBg: 'bg-gradient-to-br from-blue-50 via-violet-50 to-slate-50',
-      containerBorder: 'border-violet-100',
-      iconBg: 'bg-gradient-to-br from-blue-200 via-violet-200 to-slate-200',
-      iconColor: 'text-blue-600',
-      titleColor: 'text-blue-700',
-      descColor: 'text-blue-500',
-      primaryBtn: 'bg-gradient-to-r from-blue-500 via-violet-500 to-purple-500',
-      primaryBtnHover: 'hover:from-blue-600 hover:via-violet-600 hover:to-purple-600',
-      secondaryBtn: 'bg-white/90 text-blue-600 border-blue-200',
-      bubbleTop: 'bg-violet-100/50',
-      bubbleBottom: 'bg-blue-100/50',
+      id: 'warning',
+      name: '方案 C · 更新提醒',
+      description: '用於需要使用者注意但不阻斷操作的提示',
+      containerBg: 'bg-warning/10',
+      iconBg: 'bg-warning/15',
+      iconColor: 'text-warning',
+      primaryBtn: 'bg-warning',
     },
     {
-      id: 'vibrant',
-      name: '方案 C - 活力漸變',
-      description: '藍紫漸變 (年輕活潑)',
-      containerBg: 'bg-gradient-to-br from-cyan-50 via-blue-50 to-purple-50',
-      containerBorder: 'border-blue-100',
-      iconBg: 'bg-gradient-to-br from-cyan-200 via-blue-200 to-purple-200',
-      iconColor: 'text-blue-600',
-      titleColor: 'text-blue-700',
-      descColor: 'text-blue-500',
-      primaryBtn: 'bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-400',
-      primaryBtnHover: 'hover:from-cyan-500 hover:via-blue-500 hover:to-purple-500',
-      secondaryBtn: 'bg-white/90 text-blue-600 border-blue-200',
-      bubbleTop: 'bg-blue-100/50',
-      bubbleBottom: 'bg-cyan-100/50',
+      id: 'destructive',
+      name: '方案 D · 更新失敗',
+      description: '用於重試與錯誤狀態，保留明確警示感',
+      containerBg: 'bg-destructive/10',
+      iconBg: 'bg-destructive/15',
+      iconColor: 'text-destructive',
+      primaryBtn: 'bg-destructive',
     },
   ];
 
   const NotificationCard = ({ variant }: { variant: (typeof notificationVariants)[0] }) => {
     return (
       <div className="flex flex-col items-center">
-        {/* 方案名稱 */}
         <div className="mb-4 text-center">
-          <h3 className="text-lg font-bold text-slate-800 mb-1">{variant.name}</h3>
-          <p className="text-sm text-slate-500">{variant.description}</p>
+          <h3 className="mb-1 text-lg font-bold text-text">{variant.name}</h3>
+          <p className="text-sm text-text-muted">{variant.description}</p>
         </div>
 
-        {/* 通知視窗模擬 */}
         <div className="relative">
           <div
             className={`
-              relative overflow-hidden rounded-[32px]
+              relative overflow-hidden rounded-control
               w-80 max-w-[calc(100vw-2rem)]
-              ${variant.containerBg}
-              border-2 ${variant.containerBorder}
-              shadow-xl
-              transition-transform duration-300 hover:scale-105
+              border border-border/70 bg-surface
+              shadow-soft
             `}
           >
-            {/* 棉花糖泡泡裝飾 */}
-            <div
-              className={`absolute top-0 right-0 w-24 h-24 rounded-full ${variant.bubbleTop} blur-3xl`}
-              aria-hidden="true"
-            />
-            <div
-              className={`absolute bottom-0 left-0 w-24 h-24 rounded-full ${variant.bubbleBottom} blur-3xl`}
-              aria-hidden="true"
-            />
-
-            {/* 內容區域 */}
             <div className="relative p-6">
-              {/* 圖標區 */}
               <div className="flex justify-center mb-4">
-                <div className="relative">
-                  <div
-                    className={`absolute inset-0 rounded-full ${variant.iconBg.replace('bg-gradient-to-br', 'bg-purple-200')} blur-md opacity-50`}
-                  />
-                  <div
-                    className={`relative w-16 h-16 rounded-full ${variant.iconBg} flex items-center justify-center`}
-                  >
-                    <svg
-                      className={`w-8 h-8 ${variant.iconColor}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2.5}
-                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                      />
-                    </svg>
-                  </div>
+                <div
+                  className={`flex h-16 w-16 items-center justify-center rounded-full ${variant.iconBg}`}
+                >
+                  <RefreshCw className={`h-8 w-8 ${variant.iconColor}`} strokeWidth={2.5} />
                 </div>
               </div>
 
-              {/* 標題 */}
-              <h2 className={`text-xl font-bold ${variant.titleColor} mb-2 text-center`}>
-                🎉 發現新版本
-              </h2>
+              <h2 className="mb-2 text-center text-xl font-bold text-text">發現新版本</h2>
 
-              {/* 描述 */}
-              <p className={`text-sm ${variant.descColor} mb-5 leading-relaxed text-center px-2`}>
+              <p className="mb-5 px-2 text-center text-sm leading-relaxed text-text-muted">
                 新版本帶來更棒的體驗哦！
               </p>
 
-              {/* 按鈕 */}
               <div className="flex flex-col space-y-2">
                 <button
                   className={`
-                    w-full px-5 py-3 rounded-[20px]
-                    ${variant.primaryBtn}
-                    text-white text-sm font-bold
-                    shadow-lg
-                    ${variant.primaryBtnHover}
-                    active:scale-[0.98]
-                    transition-all duration-200
+                    inline-flex w-full items-center justify-center gap-2 rounded-control
+                    border border-border/70 bg-surface-elevated px-5 py-3
+                    text-sm font-bold text-text shadow-soft
+                    transition-colors duration-200 hover:border-primary/20 hover:bg-surface
                   `}
                   type="button"
                 >
+                  <span
+                    className={`h-2.5 w-2.5 rounded-full ${variant.primaryBtn}`}
+                    aria-hidden="true"
+                  />
                   馬上更新
                 </button>
 
                 <button
                   className={`
-                    w-full px-5 py-3 rounded-[20px]
-                    ${variant.secondaryBtn}
-                    backdrop-blur-sm
-                    text-sm font-semibold
-                    border-2
-                    hover:bg-white hover:border-opacity-100
-                    active:scale-[0.98]
-                    transition-all duration-200
+                    inline-flex w-full items-center justify-center gap-2 rounded-control
+                    border border-border/70 bg-surface px-5 py-3
+                    text-sm font-semibold text-text-muted
+                    transition-colors duration-200 hover:bg-surface-elevated hover:text-text
                   `}
                   type="button"
                 >
+                  <span
+                    className={`h-2.5 w-2.5 rounded-full ${variant.containerBg}`}
+                    aria-hidden="true"
+                  />
                   等等再說
                 </button>
               </div>
             </div>
 
-            {/* 關閉按鈕 */}
             <button
-              className={`
-                absolute top-4 right-4 p-2 rounded-full
-                bg-white/80 ${variant.titleColor.replace('text-', '').split('-')[0]}-400
-                hover:bg-white
-                transition-colors
-              `}
+              className={`absolute right-4 top-4 ${notificationTokens.actions.icon}`}
               type="button"
               aria-label="關閉通知"
             >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
+              <X className="h-4 w-4" aria-hidden="true" />
             </button>
           </div>
         </div>
 
-        {/* 配色說明 */}
-        <div className="mt-4 p-4 bg-white rounded-lg shadow-md w-80 max-w-[calc(100vw-2rem)]">
-          <h4 className="text-sm font-bold text-slate-700 mb-2">配色詳情</h4>
-          <div className="space-y-1 text-xs text-slate-600">
+        <div className="mt-4 w-80 max-w-[calc(100vw-2rem)] rounded-control border border-border/70 bg-surface-elevated p-4">
+          <h4 className="mb-2 text-sm font-bold text-text">配色詳情</h4>
+          <div className="space-y-1 text-xs text-text-muted">
             <div className="flex items-center gap-2">
-              <div className={`w-4 h-4 rounded ${variant.containerBg} border border-slate-200`} />
-              <span>背景漸變</span>
+              <div
+                className={`h-4 w-4 rounded-compact border border-border/70 ${variant.containerBg}`}
+              />
+              <span>提示背景</span>
             </div>
             <div className="flex items-center gap-2">
-              <div className={`w-4 h-4 rounded ${variant.primaryBtn}`} />
-              <span>主要按鈕</span>
+              <div className={`h-4 w-4 rounded-compact ${variant.primaryBtn}`} />
+              <span>狀態重點</span>
             </div>
             <div className="flex items-center gap-2">
-              <div className={`w-4 h-4 rounded ${variant.iconBg} border border-slate-200`} />
-              <span>圖標背景</span>
+              <div
+                className={`h-4 w-4 rounded-compact border border-border/70 ${variant.iconBg}`}
+              />
+              <span>圖示背景</span>
             </div>
           </div>
         </div>
@@ -229,42 +145,43 @@ export default function ColorSchemeComparison() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 p-8">
+    <div className="min-h-screen bg-background p-8">
       <Head>
         <meta name="robots" content="noindex, nofollow" />
       </Head>
       <div className="max-w-7xl mx-auto">
         <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 mb-3">
-            通知視窗配色方案比較
-          </h1>
-          <p className="text-slate-600 max-w-2xl mx-auto">
-            根據主應用的 <strong>藍紫色調</strong> 設計，以下是四種配色方案。
+          <h1 className="mb-3 text-4xl font-bold text-text">通知配色歷史比較</h1>
+          <p className="mx-auto max-w-2xl text-text-muted">
+            以下把通知狀態收斂成四種語義 tone，並以現行產品殼層比較其色彩傾向。
             <br />
-            請選擇最符合品牌風格且視覺舒適的方案。
+            比較重點是 token 層級與可讀性，而不是額外特效。
           </p>
         </div>
 
-        {/* 主應用配色參考 */}
-        <div className="mb-12 p-6 bg-white rounded-2xl shadow-lg">
-          <h2 className="text-xl font-bold text-slate-800 mb-4">📐 主應用配色參考</h2>
+        <div className="mb-12 rounded-control border border-border/70 bg-surface p-6 shadow-soft">
+          <h2 className="mb-4 text-xl font-bold text-text">現行產品語法參考</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             <div>
-              <p className="text-sm font-semibold text-slate-600 mb-2">主背景漸變</p>
-              <div className="h-16 rounded-lg bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 border border-slate-200" />
-              <code className="text-xs text-slate-500 mt-1 block">
-                from-blue-50 via-indigo-50 to-purple-50
+              <p className="mb-2 text-sm font-semibold text-text-muted">基礎表面</p>
+              <div className="h-16 rounded-control border border-border/70 bg-surface" />
+              <code className="mt-1 block text-xs text-text-muted">
+                bg-surface + border-border/70
               </code>
             </div>
             <div>
-              <p className="text-sm font-semibold text-slate-600 mb-2">標題漸變</p>
-              <div className="h-16 rounded-lg bg-gradient-to-r from-blue-600 to-purple-600" />
-              <code className="text-xs text-slate-500 mt-1 block">from-blue-600 to-purple-600</code>
+              <p className="mb-2 text-sm font-semibold text-text-muted">品牌重點</p>
+              <div className="h-16 rounded-control border border-primary/15 bg-primary/10" />
+              <code className="mt-1 block text-xs text-text-muted">
+                bg-primary/10 + border-primary/15
+              </code>
             </div>
             <div>
-              <p className="text-sm font-semibold text-slate-600 mb-2">按鈕漸變</p>
-              <div className="h-16 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500" />
-              <code className="text-xs text-slate-500 mt-1 block">from-blue-500 to-purple-500</code>
+              <p className="mb-2 text-sm font-semibold text-text-muted">互動層次</p>
+              <div className="h-16 rounded-control border border-border/70 bg-surface-elevated" />
+              <code className="mt-1 block text-xs text-text-muted">
+                bg-surface-elevated + shadow-soft
+              </code>
             </div>
           </div>
         </div>
@@ -280,16 +197,9 @@ export default function ColorSchemeComparison() {
         <div className="mt-12 text-center">
           <a
             href="/"
-            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-xl shadow-lg transition transform hover:scale-105"
+            className="inline-flex items-center gap-2 rounded-control border border-border/70 bg-surface-elevated px-6 py-3 font-semibold text-text transition-colors hover:border-primary/20 hover:bg-surface"
           >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M10 19l-7-7m0 0l7-7m-7 7h18"
-              />
-            </svg>
+            <ArrowLeft className="h-5 w-5" aria-hidden="true" />
             返回主頁
           </a>
         </div>
diff --git a/apps/ratewise/src/pages/FAQ.tsx b/apps/ratewise/src/pages/FAQ.tsx
index 0beab68df..dedfc3e51 100644
--- a/apps/ratewise/src/pages/FAQ.tsx
+++ b/apps/ratewise/src/pages/FAQ.tsx
@@ -6,6 +6,7 @@ import { PageNavHeader } from '../components/PageNavHeader';
 import { APP_INFO } from '../config/app-info';
 import { MailtoLink } from '../components/MailtoLink';
 import { AnswerCapsule } from '../components/AnswerCapsule';
+import { contentPageTokens } from '../config/design-tokens';
 import { FAQ_PAGE_SEO, SITE_SEO } from '../config/seo-metadata';
 
 // 將 FAQ 答案中的 email 位址替換為 MailtoLink，防止 CF Email Obfuscation 將其改寫為爬蟲不可讀的 /cdn-cgi/... 連結。
@@ -41,9 +42,10 @@ export default function FAQ() {
         ogType="article"
       />
 
-      <div className="min-h-screen">
-        <div className="container mx-auto max-w-4xl px-4 py-8">
+      <div className="min-h-full">
+        <div className={contentPageTokens.shell}>
           <PageNavHeader
+            fallbackHref="/settings/"
             breadcrumbItems={[
               { label: t('nav.home'), href: '/' },
               { label: t('settings.faq'), href: '/faq/' },
@@ -51,11 +53,12 @@ export default function FAQ() {
           />
 
           <div className="mb-8">
-            <h1 className="mb-2 text-4xl font-bold text-text">常見問題</h1>
-            <p className="text-text-muted">
+            <p className={contentPageTokens.sectionHeader.eyebrow}>支援文件</p>
+            <h1 className="mb-2 mt-2 text-4xl font-bold text-text">常見問題</h1>
+            <p className={contentPageTokens.intro}>
               集中整理台銀牌告匯率、買入賣出、現金與即期、刷卡匯率與 DCC 等核心問題。
             </p>
-            <p className="mt-2 text-sm text-text-muted">
+            <p className={contentPageTokens.meta}>
               作者：<span itemProp="author">{APP_INFO.author}</span> ・ 最後更新：
               <time dateTime={new Date(SITE_SEO.updatedTime).toISOString()} itemProp="dateModified">
                 {LAST_UPDATED}
@@ -88,7 +91,7 @@ export default function FAQ() {
             {FAQ_ENTRIES.map((entry) => (
               <details
                 key={entry.question}
-                className="group card p-0 hover:shadow-md transition-shadow"
+                className="group card p-0 hover:shadow-soft transition-shadow"
               >
                 <summary className="flex cursor-pointer list-none items-center justify-between p-6 transition-colors hover:text-primary">
                   <h2 className="text-lg font-semibold text-text group-hover:text-primary">
@@ -115,15 +118,15 @@ export default function FAQ() {
             ))}
           </div>
 
-          <section className="card mt-10 bg-primary/5 p-6 border-primary/20">
+          <section className="card mt-10 border border-border/70 bg-surface-elevated p-6">
             <h2 className="mb-2 text-xl font-semibold text-text">還需要更多幫助？</h2>
             <p className="text-text-muted">
               可先查看
-              <Link to="/guide/" className="mx-1 text-primary underline">
+              <Link to="/guide/" className={`mx-1 ${contentPageTokens.links.inline}`}>
                 使用指南
               </Link>
               與
-              <Link to="/about/" className="mx-1 text-primary underline">
+              <Link to="/about/" className={`mx-1 ${contentPageTokens.links.inline}`}>
                 關於頁面
               </Link>
               ，若仍有問題可直接寄信至
diff --git a/apps/ratewise/src/pages/Favorites.tsx b/apps/ratewise/src/pages/Favorites.tsx
index 6dfd16036..77c885dac 100644
--- a/apps/ratewise/src/pages/Favorites.tsx
+++ b/apps/ratewise/src/pages/Favorites.tsx
@@ -1,16 +1,3 @@
-/**
- * Favorites & History Page - ParkKeeper Design Style
- * 收藏與歷史記錄頁面 - ParkKeeper 設計風格
- *
- * @description Favorites and conversion history page with ParkKeeper design style.
- *              All currencies support drag-and-drop with smooth spring animations.
- *              Dragging a non-favorite currency automatically adds it to favorites.
- *              收藏與歷史記錄頁面，採用 ParkKeeper 設計風格。
- *              所有貨幣支援拖曳，具有流暢的彈簧動畫。
- *              拖曳非收藏貨幣時自動加入收藏。
- * @version 3.0.0
- */
-
 import { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -33,6 +20,7 @@ import { useExchangeRates } from '../features/ratewise/hooks/useExchangeRates';
 import { useCurrencyConverter } from '../features/ratewise/hooks/useCurrencyConverter';
 import { FavoritesSkeleton } from '../components/SkeletonLoader';
 import { APP_ONLY_PAGE_SEO } from '../config/seo-metadata';
+import { appPageTokens, contentPageTokens } from '../config/design-tokens';
 import { CURRENCY_DEFINITIONS } from '../features/ratewise/constants';
 import type { CurrencyCode, ConversionHistoryEntry } from '../features/ratewise/types';
 import { useConverterStore } from '../stores/converterStore';
@@ -71,28 +59,19 @@ export default function Favorites() {
     setToCurrency,
   } = useCurrencyConverter({ exchangeRates, details, rateType, mode: 'single' });
 
-  /** 取得所有貨幣列表（已收藏 + 未收藏） */
   const allCurrencies = getAllCurrenciesSorted(favorites);
+  const totalCurrencies = allCurrencies.length;
+  const historyCount = history.length;
 
-  /**
-   * 處理拖曳結束事件
-   *
-   * allCurrencies[0] 永遠是 TWD（isDragDisabled），
-   * 故 source/destination.index >= 1，需 -1 轉換成 favorites 陣列的索引。
-   *
-   * - 拖曳已收藏貨幣：重新排序
-   * - 拖曳未收藏貨幣：自動加入收藏並置於目標位置
-   */
   const handleDragEnd = useCallback(
     (result: DropResult) => {
       if (!result.destination) return;
       if (result.source.index === result.destination.index) return;
 
       const draggedCode = allCurrencies[result.source.index];
-      // TWD 不可拖曳（isDragDisabled），此處為防禦性檢查
       if (!draggedCode || draggedCode === 'TWD') return;
 
-      // allCurrencies 中 index 0 = TWD，favorites 索引 = allCurrencies 索引 - 1
+      // `allCurrencies` 的第 0 筆固定為 TWD，收藏索引需扣除該保留位。
       const destFavIndex = Math.max(0, result.destination.index - 1);
 
       const isFav = favorites.includes(draggedCode);
@@ -132,8 +111,6 @@ export default function Favorites() {
     [setFromCurrency, setToCurrency, navigate],
   );
 
-  // SSG Fix: SEOHelmet 必須在所有 early return 之前，確保 SSG 時能正確渲染 meta tags
-  // @see https://vite-react-ssg.netlify.app/docs/components — Head 獨立於渲染狀態
   const seoHelmet = (
     <SEOHelmet
       title={pageSeo.title}
@@ -168,13 +145,14 @@ export default function Favorites() {
       <>
         {seoHelmet}
         <div className="flex-1 flex items-center justify-center p-4">
-          <div className="card p-8 max-w-md w-full text-center">
+          <div className={`${contentPageTokens.article.cardLoose} w-full max-w-lg text-center`}>
             <AlertCircle className="text-destructive mx-auto" size={48} />
             <h1 className="text-2xl font-bold text-text mt-4">{t('errors.loadingFailed')}</h1>
             <p className="text-text-muted mt-2 mb-6">{t('errors.dataLoadFailed')}</p>
             <button
+              type="button"
               onClick={() => window.location.reload()}
-              className="w-full flex items-center justify-center gap-2 py-3 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl shadow-lg transition"
+              className={contentPageTokens.buttons.primaryWide}
             >
               <RefreshCw size={18} />
               {t('errors.reload')}
@@ -189,247 +167,305 @@ export default function Favorites() {
     <div className="flex flex-col min-h-full">
       {seoHelmet}
       <h1 className="sr-only">{pageSeo.title}</h1>
-      <div className="flex-1 px-3 sm:px-5 py-6 max-w-md mx-auto w-full">
-        {/* Tab 切換區塊 - Segmented Switch SSOT 動畫 */}
-        <section className="mb-6">
-          <div className={segmentedSwitch.containerClass}>
-            {(
-              [
-                { value: 'favorites' as const, icon: Star, label: t('favorites.title') },
-                { value: 'history' as const, icon: Clock, label: t('favorites.history') },
-              ] as const
-            ).map((tab) => {
-              const isActive = activeTab === tab.value;
-              const TabIcon = tab.icon;
-              return (
-                <motion.button
-                  key={tab.value}
-                  onClick={() => setActiveTab(tab.value)}
-                  whileHover={{ ...segmentedSwitch.item.whileHover, opacity: 1 }}
-                  whileTap={segmentedSwitch.item.whileTap}
-                  animate={{ opacity: isActive ? 1 : segmentedSwitch.inactiveOpacity }}
-                  transition={transitions.default}
-                  className={`${segmentedSwitch.itemBaseClass} flex-col gap-1`}
-                  aria-pressed={isActive}
-                >
-                  {isActive && (
-                    <motion.div
-                      layoutId="favorites-tab-indicator"
-                      className={segmentedSwitch.indicatorClass}
-                      transition={segmentedSwitch.indicator}
-                    />
-                  )}
-                  <motion.div
-                    animate={{ scale: isActive ? segmentedSwitch.activeIconScale : 1 }}
-                    transition={transitions.default}
-                  >
-                    <TabIcon size={18} className={isActive ? 'text-primary' : ''} />
-                  </motion.div>
-                  <span className="text-[10px] font-bold">{tab.label}</span>
-                </motion.button>
-              );
-            })}
-          </div>
-        </section>
-
-        {/* 所有貨幣區塊 - 收藏在上方，支援拖曳排序 */}
-        {activeTab === 'favorites' && (
-          <section>
-            <div className="flex items-center justify-between px-2 mb-3">
-              <div className="flex items-center gap-2 opacity-40">
-                <Star className="w-3.5 h-3.5" />
-                <h3 className="text-[10px] font-black uppercase tracking-[0.2em]">
-                  {t('favorites.allCurrencies')}
-                </h3>
+      <div className={`flex-1 ${contentPageTokens.shell}`}>
+        <div className="flex flex-col gap-6 lg:grid lg:grid-cols-[minmax(0,1fr)_minmax(18rem,20rem)] lg:items-start">
+          <div className="min-w-0">
+            <section className="mb-6">
+              <div className={segmentedSwitch.containerClass}>
+                {(
+                  [
+                    { value: 'favorites' as const, icon: Star, label: t('favorites.title') },
+                    { value: 'history' as const, icon: Clock, label: t('favorites.history') },
+                  ] as const
+                ).map((tab) => {
+                  const isActive = activeTab === tab.value;
+                  const TabIcon = tab.icon;
+                  return (
+                    <motion.button
+                      key={tab.value}
+                      type="button"
+                      onClick={() => setActiveTab(tab.value)}
+                      whileHover={{ ...segmentedSwitch.item.whileHover, opacity: 1 }}
+                      whileTap={segmentedSwitch.item.whileTap}
+                      animate={{ opacity: isActive ? 1 : segmentedSwitch.inactiveOpacity }}
+                      transition={transitions.default}
+                      className={`${segmentedSwitch.itemBaseClass} flex-col gap-1`}
+                      aria-pressed={isActive}
+                    >
+                      {isActive && (
+                        <motion.div
+                          layoutId="favorites-tab-indicator"
+                          className={segmentedSwitch.indicatorClass}
+                          transition={segmentedSwitch.indicator}
+                        />
+                      )}
+                      <motion.div
+                        animate={{ scale: isActive ? segmentedSwitch.activeIconScale : 1 }}
+                        transition={transitions.default}
+                      >
+                        <TabIcon size={18} className={isActive ? 'text-primary' : ''} />
+                      </motion.div>
+                      <span className="text-xs font-semibold">{tab.label}</span>
+                    </motion.button>
+                  );
+                })}
               </div>
-              {favorites.length > 0 && (
-                <span className="text-[10px] opacity-40 font-medium">
-                  {t('favorites.dragToReorder')}
-                </span>
-              )}
-            </div>
+            </section>
 
-            {/* 所有貨幣統一拖曳區域 */}
-            <DragDropContext onDragEnd={handleDragEnd}>
-              <Droppable droppableId="all-currencies-list">
-                {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
-                  <div
-                    ref={provided.innerRef}
-                    {...provided.droppableProps}
-                    className={`space-y-2 transition-colors duration-200 rounded-xl p-1 -m-1 ${
-                      snapshot.isDraggingOver ? 'bg-primary/5' : ''
-                    }`}
-                  >
-                    {allCurrencies.map((code, index) => {
-                      const isTWD = code === 'TWD';
-                      const isFavorite = favorites.includes(code);
-                      return (
-                        <Draggable
-                          key={code}
-                          draggableId={code}
-                          index={index}
-                          isDragDisabled={isTWD}
-                        >
-                          {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
-                            <div
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              style={provided.draggableProps.style}
-                              data-testid={`currency-row-${code}`}
-                              className={`card p-4 flex items-center gap-3 group ${
-                                snapshot.isDragging
-                                  ? 'shadow-2xl scale-[1.02] bg-surface ring-2 ring-primary/40 z-50'
-                                  : 'hover:shadow-md'
-                              }`}
+            {activeTab === 'favorites' && (
+              <section>
+                <div className="flex items-center justify-between px-2 mb-3">
+                  <div className={contentPageTokens.sectionHeader.row}>
+                    <Star className="w-3.5 h-3.5" />
+                    <h2 className={contentPageTokens.sectionHeader.eyebrow}>
+                      {t('favorites.allCurrencies')}
+                    </h2>
+                  </div>
+                  {favorites.length > 0 && (
+                    <span className="text-xs font-medium text-text-muted">
+                      {t('favorites.dragToReorder')}
+                    </span>
+                  )}
+                </div>
+
+                <DragDropContext onDragEnd={handleDragEnd}>
+                  <Droppable droppableId="all-currencies-list">
+                    {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
+                      <div
+                        ref={provided.innerRef}
+                        {...provided.droppableProps}
+                        className={`-m-1 space-y-2 rounded-control p-1 transition-colors duration-200 ${
+                          snapshot.isDraggingOver ? 'bg-surface-elevated' : ''
+                        }`}
+                      >
+                        {allCurrencies.map((code, index) => {
+                          const isTWD = code === 'TWD';
+                          const isFavorite = favorites.includes(code);
+                          return (
+                            <Draggable
+                              key={code}
+                              draggableId={code}
+                              index={index}
+                              isDragDisabled={isTWD}
                             >
-                              {/* 左側：星星欄位
-                               *
-                               * TWD  → 固定實心星（裝飾用，非互動元素）
-                               * 其他 → 可切換收藏的按鈕
-                               */}
-                              {isTWD ? (
+                              {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
                                 <div
-                                  className="w-7 flex-shrink-0 flex items-center justify-center"
-                                  aria-hidden="true"
-                                  data-testid="twd-star-fixed"
-                                >
-                                  <Star className="text-favorite" size={18} fill="currentColor" />
-                                </div>
-                              ) : (
-                                <button
-                                  className="w-7 flex-shrink-0 flex items-center justify-center p-0.5 hover:scale-110 transition"
-                                  onClick={() => toggleFavorite(code)}
-                                  aria-label={
-                                    isFavorite
-                                      ? `${t('favorites.removeFavorite')} ${code}`
-                                      : `${t('favorites.addFavorite')} ${code}`
-                                  }
-                                  data-testid={`star-toggle-${code}`}
+                                  ref={provided.innerRef}
+                                  {...provided.draggableProps}
+                                  style={provided.draggableProps.style}
+                                  data-testid={`currency-row-${code}`}
+                                  className={`${contentPageTokens.article.card} flex items-center gap-3 group ${
+                                    snapshot.isDragging
+                                      ? 'z-50 scale-[1.01] bg-surface shadow-floating ring-1 ring-primary/20'
+                                      : 'hover:shadow-soft'
+                                  }`}
                                 >
-                                  <Star
-                                    className={
-                                      isFavorite
-                                        ? 'text-favorite'
-                                        : 'text-text-muted opacity-30 hover:opacity-60 hover:text-favorite transition'
-                                    }
-                                    size={18}
-                                    fill={isFavorite ? 'currentColor' : 'none'}
-                                  />
-                                </button>
-                              )}
+                                  {isTWD ? (
+                                    <div
+                                      className="flex min-h-11 min-w-11 flex-shrink-0 items-center justify-center"
+                                      aria-hidden="true"
+                                      data-testid="twd-star-fixed"
+                                    >
+                                      <Star
+                                        className="text-favorite"
+                                        size={18}
+                                        fill="currentColor"
+                                      />
+                                    </div>
+                                  ) : (
+                                    <button
+                                      type="button"
+                                      className="flex min-h-11 min-w-11 flex-shrink-0 items-center justify-center rounded-control p-2 transition hover:scale-110 hover:bg-surface-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                                      onClick={() => toggleFavorite(code)}
+                                      aria-label={
+                                        isFavorite
+                                          ? `${t('favorites.removeFavorite')} ${code}`
+                                          : `${t('favorites.addFavorite')} ${code}`
+                                      }
+                                      data-testid={`star-toggle-${code}`}
+                                    >
+                                      <Star
+                                        className={
+                                          isFavorite
+                                            ? 'text-favorite'
+                                            : 'text-text-muted opacity-30 hover:opacity-60 hover:text-favorite transition'
+                                        }
+                                        size={18}
+                                        fill={isFavorite ? 'currentColor' : 'none'}
+                                      />
+                                    </button>
+                                  )}
 
-                              {/* 中間：貨幣資訊 + 拖曳區域
-                               *
-                               * TWD  → cursor-default（不可拖）
-                               * 其他 → dragHandleProps 套用於此區塊
-                               *        使用者在 [幣別名稱] 與 [換算] 之間的任意空白處拖曳
-                               *
-                               * IMPORTANT: 移除 touch-none 以允許頁面滾動
-                               * @hello-pangea/dnd 會自行處理觸控事件的區分（滾動 vs 拖曳）
-                               * 使用 touch-manipulation 啟用瀏覽器最佳化觸控處理
-                               *
-                               * @see https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-use-dom-events.md
-                               */}
-                              <div
-                                {...(isTWD ? {} : provided.dragHandleProps)}
-                                className={`flex items-center gap-3 flex-1 min-w-0 ${
-                                  isTWD
-                                    ? 'cursor-default'
-                                    : 'cursor-grab active:cursor-grabbing touch-manipulation'
-                                }`}
-                                aria-label={isTWD ? undefined : t('favorites.dragHandle')}
-                                data-testid={isTWD ? 'twd-info' : `drag-zone-${code}`}
-                              >
-                                {/* 國旗 */}
-                                <span className="text-2xl w-8 text-center leading-none flex-shrink-0">
-                                  {CURRENCY_DEFINITIONS[code]?.flag}
-                                </span>
-                                {/* 幣別名稱 */}
-                                <div className="min-w-0">
-                                  <div className="font-bold text-sm">{code}</div>
-                                  <div className="text-[10px] opacity-60">
-                                    {t(`currencies.${code}`) || CURRENCY_DEFINITIONS[code]?.name}
-                                    {isTWD && (
-                                      <span className="ml-1 opacity-50">
-                                        · {t('favorites.baseCurrency') || '基準幣'}
+                                  {isTWD ? (
+                                    <div
+                                      className="flex min-h-11 min-w-0 flex-1 cursor-default items-center gap-3"
+                                      data-testid="twd-info"
+                                    >
+                                      <span className="w-8 flex-shrink-0 text-center text-2xl leading-none">
+                                        {CURRENCY_DEFINITIONS[code]?.flag}
                                       </span>
-                                    )}
-                                  </div>
+                                      <div className="min-w-0 text-left">
+                                        <div className="text-sm font-bold">{code}</div>
+                                        <div className="text-xs text-text-muted">
+                                          {t(`currencies.${code}`) ||
+                                            CURRENCY_DEFINITIONS[code]?.name}
+                                          <span className="ml-1 text-text-muted">
+                                            · {t('multiConverter.baseCurrency')}
+                                          </span>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  ) : (
+                                    <button
+                                      {...(provided.dragHandleProps ?? {})}
+                                      type="button"
+                                      className="flex min-h-11 min-w-0 flex-1 cursor-grab touch-manipulation items-center gap-3 rounded-control text-left active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                                      aria-label={t('favorites.dragHandle')}
+                                      data-testid={`drag-zone-${code}`}
+                                    >
+                                      <span className="w-8 flex-shrink-0 text-center text-2xl leading-none">
+                                        {CURRENCY_DEFINITIONS[code]?.flag}
+                                      </span>
+                                      <div className="min-w-0">
+                                        <div className="text-sm font-bold">{code}</div>
+                                        <div className="text-xs text-text-muted">
+                                          {t(`currencies.${code}`) ||
+                                            CURRENCY_DEFINITIONS[code]?.name}
+                                        </div>
+                                      </div>
+                                    </button>
+                                  )}
+
+                                  <button
+                                    type="button"
+                                    className="mr-[-0.5rem] flex min-h-11 flex-shrink-0 cursor-pointer items-center gap-2 rounded-control px-3 py-2 transition-colors hover:bg-primary/10 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                                    onClick={() =>
+                                      !snapshot.isDragging && handleFavoriteClick(code)
+                                    }
+                                    aria-label={`${t('favorites.goToConvert')} ${code}`}
+                                  >
+                                    <span className="text-xs font-semibold opacity-60 group-hover:opacity-100 group-hover:text-primary transition">
+                                      {t('favorites.clickToConvert')}
+                                    </span>
+                                  </button>
                                 </div>
-                              </div>
+                              )}
+                            </Draggable>
+                          );
+                        })}
+                        {provided.placeholder}
+                      </div>
+                    )}
+                  </Droppable>
+                </DragDropContext>
+              </section>
+            )}
 
-                              {/* 右側：換算按鈕 → 進入單幣別換算頁 */}
-                              <div
-                                className="flex items-center gap-2 cursor-pointer px-2 py-1 -mr-2 rounded-lg hover:bg-primary/10 active:scale-[0.97] transition flex-shrink-0"
-                                onClick={() => !snapshot.isDragging && handleFavoriteClick(code)}
-                                role="button"
-                                tabIndex={0}
-                                onKeyDown={(e) => {
-                                  if (e.key === 'Enter' || e.key === ' ') handleFavoriteClick(code);
-                                }}
-                                aria-label={`${t('favorites.goToConvert')} ${code}`}
-                              >
-                                <span className="text-[10px] font-bold opacity-60 group-hover:opacity-100 group-hover:text-primary transition">
-                                  {t('favorites.clickToConvert')}
-                                </span>
-                              </div>
-                            </div>
-                          )}
-                        </Draggable>
-                      );
-                    })}
-                    {provided.placeholder}
+            {activeTab === 'history' && (
+              <section>
+                <div className="flex items-center justify-between px-2 mb-3">
+                  <div className={contentPageTokens.sectionHeader.row}>
+                    <Clock className="w-3.5 h-3.5" />
+                    <h2 className={contentPageTokens.sectionHeader.eyebrow}>
+                      {t('favorites.history')}
+                    </h2>
                   </div>
+                  {historyCount > 0 && (
+                    <button
+                      type="button"
+                      onClick={clearAllHistory}
+                      className="flex min-h-11 items-center gap-1 rounded-control px-3 py-2 text-xs font-semibold text-destructive transition hover:bg-destructive/10"
+                    >
+                      <Trash2 size={12} />
+                      {t('common.clearAll')}
+                    </button>
+                  )}
+                </div>
+
+                {historyCount === 0 ? (
+                  <div className={`${contentPageTokens.article.cardLoose} text-center`}>
+                    <Clock className="w-12 h-12 text-text-muted mx-auto mb-4 opacity-30" />
+                    <h2 className="text-sm font-bold text-text mb-2">{t('favorites.noHistory')}</h2>
+                    <p className="mb-4 text-xs text-text-muted opacity-60">
+                      {t('favorites.noHistoryHint')}
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() => navigate('/')}
+                      className={contentPageTokens.buttons.primary}
+                    >
+                      {t('favorites.goToConvert')}
+                    </button>
+                  </div>
+                ) : (
+                  <ConversionHistory history={history} onReconvert={handleReconvert} />
                 )}
-              </Droppable>
-            </DragDropContext>
-          </section>
-        )}
+              </section>
+            )}
+          </div>
 
-        {/* 轉換歷史區塊 */}
-        {activeTab === 'history' && (
-          <section>
-            <div className="flex items-center justify-between px-2 mb-3">
-              <div className="flex items-center gap-2 opacity-40">
-                <Clock className="w-3.5 h-3.5" />
-                <h3 className="text-[10px] font-black uppercase tracking-[0.2em]">
-                  {t('favorites.history')}
-                </h3>
+          <aside className="hidden lg:flex lg:flex-col lg:gap-4 lg:sticky lg:top-6">
+            <section className={appPageTokens.infoCard}>
+              <div className={`${contentPageTokens.sectionHeader.row} mb-0 px-0`}>
+                {activeTab === 'favorites' ? (
+                  <Star className="h-3.5 w-3.5" />
+                ) : (
+                  <Clock className="h-3.5 w-3.5" />
+                )}
+                <span className={contentPageTokens.sectionHeader.eyebrow}>
+                  {activeTab === 'favorites' ? t('favorites.title') : t('favorites.history')}
+                </span>
               </div>
-              {history.length > 0 && (
-                <button
-                  onClick={clearAllHistory}
-                  className="flex items-center gap-1 text-[10px] text-destructive hover:bg-destructive/10 px-2 py-1 rounded-lg transition font-bold"
-                >
-                  <Trash2 size={12} />
-                  {t('common.clearAll')}
-                </button>
-              )}
-            </div>
 
-            {history.length === 0 ? (
-              <div className="card p-8 text-center">
-                <Clock className="w-12 h-12 text-text-muted mx-auto mb-4 opacity-30" />
-                <h2 className="text-sm font-bold text-text mb-2">{t('favorites.noHistory')}</h2>
-                <p className="text-[10px] text-text-muted mb-4 opacity-60">
-                  {t('favorites.noHistoryHint')}
-                </p>
+              <div className="mt-4 space-y-3">
+                <div className={appPageTokens.statRow}>
+                  <span className={appPageTokens.tinyMeta}>
+                    {activeTab === 'favorites'
+                      ? t('favorites.allCurrencies')
+                      : t('favorites.history')}
+                  </span>
+                  <span className="text-lg font-semibold text-text">
+                    {activeTab === 'favorites' ? totalCurrencies : historyCount}
+                  </span>
+                </div>
+                <div className={appPageTokens.statRow}>
+                  <span className={appPageTokens.tinyMeta}>{t('favorites.title')}</span>
+                  <span className="text-lg font-semibold text-text">{favorites.length}</span>
+                </div>
+              </div>
+            </section>
+
+            <section className={appPageTokens.infoCard}>
+              <p className="text-xs leading-relaxed text-text-muted">
+                {activeTab === 'favorites'
+                  ? t('favorites.dragToReorder')
+                  : historyCount === 0
+                    ? t('favorites.noHistoryHint')
+                    : t('favorites.clickToConvert')}
+              </p>
+
+              <div className="mt-4 flex flex-col gap-2">
                 <button
+                  type="button"
                   onClick={() => navigate('/')}
-                  className="px-6 py-2.5 bg-primary text-white rounded-xl font-bold text-xs transition hover:bg-primary-hover active:scale-[0.98]"
+                  className={contentPageTokens.buttons.primaryWide}
                 >
                   {t('favorites.goToConvert')}
                 </button>
+
+                {activeTab === 'history' && historyCount > 0 && (
+                  <button
+                    type="button"
+                    onClick={clearAllHistory}
+                    className={contentPageTokens.buttons.dangerQuiet}
+                  >
+                    {t('common.clearAll')}
+                  </button>
+                )}
               </div>
-            ) : (
-              <ConversionHistory
-                history={history}
-                onReconvert={handleReconvert}
-                onClearAll={clearAllHistory}
-              />
-            )}
-          </section>
-        )}
+            </section>
+          </aside>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/ratewise/src/pages/Guide.test.tsx b/apps/ratewise/src/pages/Guide.test.tsx
index d9a768dbd..42652e349 100644
--- a/apps/ratewise/src/pages/Guide.test.tsx
+++ b/apps/ratewise/src/pages/Guide.test.tsx
@@ -38,7 +38,7 @@ describe('Guide Page - HowTo Schema', () => {
     it('renders introduction section', () => {
       renderGuide();
       // 檢查頁面包含介紹文字
-      const introText = screen.queryAllByText(/完整 8 步驟教學/i);
+      const introText = screen.queryAllByText(/常見換匯情境/i);
       expect(introText.length).toBeGreaterThanOrEqual(1);
     });
 
@@ -220,8 +220,7 @@ describe('Guide Page - HowTo Schema', () => {
   describe('FAQ Section', () => {
     it('renders FAQ section', () => {
       renderGuide();
-      // 使用 ❓ 常見問題 作為精確匹配
-      const faqHeading = screen.getByRole('heading', { name: /❓ 常見問題/i });
+      const faqHeading = screen.getByRole('heading', { name: /^常見問題$/i });
       expect(faqHeading).toBeInTheDocument();
     });
 
diff --git a/apps/ratewise/src/pages/Guide.tsx b/apps/ratewise/src/pages/Guide.tsx
index 696576528..c4656ef75 100644
--- a/apps/ratewise/src/pages/Guide.tsx
+++ b/apps/ratewise/src/pages/Guide.tsx
@@ -1,8 +1,10 @@
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { ArrowRight, Clock, HelpCircle, Lightbulb } from 'lucide-react';
 import { SEOHelmet } from '../components/SEOHelmet';
 import { PageNavHeader } from '../components/PageNavHeader';
 import { AnswerCapsule } from '../components/AnswerCapsule';
+import { contentPageTokens } from '../config/design-tokens';
 import { GUIDE_PAGE_SEO, SITE_SEO } from '../config/seo-metadata';
 import { APP_INFO } from '../config/app-info';
 
@@ -35,7 +37,7 @@ const RATE_READING_TIPS = [
 const FAQ_ITEMS = [
   {
     question: '匯率多久更新一次？',
-    answer: '匯率資料每 5 分鐘自動同步臺灣銀行牌告匯率，也可在首頁下拉手動更新。',
+    answer: '匯率資料會排程檢查並同步臺灣銀行牌告匯率，也可在首頁下拉手動更新。',
   },
   {
     question: '現金匯率和即期匯率有什麼差別？',
@@ -61,9 +63,10 @@ const Guide = () => {
         ogType="article"
       />
 
-      <div className="min-h-screen bg-page-gradient">
-        <div className="container mx-auto max-w-5xl px-4 py-8">
+      <div className="min-h-full">
+        <div className={contentPageTokens.shell}>
           <PageNavHeader
+            fallbackHref="/settings/"
             breadcrumbItems={[
               { label: t('nav.home'), href: '/' },
               { label: t('settings.usageGuide'), href: '/guide/' },
@@ -71,24 +74,18 @@ const Guide = () => {
           />
 
           <div className="mb-8">
+            <p className={contentPageTokens.sectionHeader.eyebrow}>使用指南</p>
             <h1 className="mb-2 text-4xl font-bold text-text">
               如何使用 {APP_INFO.shortName} 進行匯率換算
             </h1>
-            <p className="text-text-muted">
-              完整 8 步驟教學，快速學會使用 {APP_INFO.shortName} 進行單幣別和多幣別匯率換算。
+            <p className={contentPageTokens.intro}>
+              以常見換匯情境整理操作流程，從幣別選擇、金額輸入到現金與即期匯率判讀都可快速完成。
             </p>
             <div className="mt-2 flex items-center text-sm text-text-muted">
-              <svg className="mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
+              <Clock className="mr-1 h-4 w-4" aria-hidden="true" />
               預估完成時間：約 2 分鐘
             </div>
-            <p className="mt-2 text-sm text-text-muted">
+            <p className={contentPageTokens.meta}>
               作者：<span itemProp="author">{APP_INFO.author}</span> ・ 最後更新：
               <time dateTime={new Date(SITE_SEO.updatedTime).toISOString()} itemProp="dateModified">
                 {LAST_UPDATED}
@@ -121,10 +118,10 @@ const Guide = () => {
                 <div
                   key={step.position}
                   id={`step-${step.position}`}
-                  className="card scroll-mt-4 p-6 transition-shadow hover:shadow-md"
+                  className="card scroll-mt-4 p-6 transition-shadow hover:shadow-soft"
                 >
                   <div className="flex items-start">
-                    <div className="mr-4 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-primary text-lg font-bold text-white">
+                    <div className="mr-4 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-primary text-lg font-bold text-primary-foreground">
                       {step.position}
                     </div>
                     <div className="flex-1">
@@ -183,8 +180,11 @@ const Guide = () => {
                 </div>
               </div>
 
-              <div className="card border-primary/20 bg-primary/5 p-6">
-                <h2 className="mb-2 text-xl font-semibold text-text">💡 提示與技巧</h2>
+              <div className="card border border-border/70 bg-surface-elevated p-6">
+                <h2 className="mb-2 flex items-center gap-2 text-xl font-semibold text-text">
+                  <Lightbulb className="h-5 w-5 text-warning" aria-hidden="true" />
+                  提示與技巧
+                </h2>
                 <ul className="space-y-2 text-text-muted">
                   <li className="flex items-start">
                     <span className="mr-2 text-primary">•</span>
@@ -192,7 +192,7 @@ const Guide = () => {
                   </li>
                   <li className="flex items-start">
                     <span className="mr-2 text-primary">•</span>
-                    <span>快速金額按鈕適合旅遊與常見消費場景，可大幅減少重複輸入。</span>
+                    <span>快速金額按鈕適合旅遊與常見消費場景，可減少反覆輸入。</span>
                   </li>
                   <li className="flex items-start">
                     <span className="mr-2 text-primary">•</span>
@@ -202,7 +202,10 @@ const Guide = () => {
               </div>
 
               <div className="card p-6">
-                <h2 className="mb-4 text-xl font-semibold text-text">❓ 常見問題</h2>
+                <h2 className="mb-4 flex items-center gap-2 text-xl font-semibold text-text">
+                  <HelpCircle className="h-5 w-5 text-primary" aria-hidden="true" />
+                  常見問題
+                </h2>
                 <div className="space-y-4">
                   {FAQ_ITEMS.map((item) => (
                     <div key={item.question}>
@@ -214,7 +217,7 @@ const Guide = () => {
                 <div className="mt-4">
                   <Link
                     to="/faq/"
-                    className="text-sm font-medium text-primary hover:text-primary/80"
+                    className={`text-sm font-medium ${contentPageTokens.links.inline}`}
                   >
                     查看更多常見問題 →
                   </Link>
@@ -224,22 +227,10 @@ const Guide = () => {
               <div className="text-center">
                 <Link
                   to="/"
-                  className="inline-flex items-center rounded-lg bg-primary px-6 py-3 font-semibold text-white shadow-md transition-colors hover:bg-primary/90 hover:shadow-lg"
+                  className="inline-flex items-center rounded-control bg-primary px-6 py-3 font-semibold text-primary-foreground shadow-soft transition-colors hover:bg-primary/90 hover:shadow-floating"
                 >
                   開始使用 {APP_INFO.shortName}
-                  <svg
-                    className="ml-2 h-5 w-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M14 5l7 7m0 0l-7 7m7-7H3"
-                    />
-                  </svg>
+                  <ArrowRight className="ml-2 h-5 w-5" aria-hidden="true" />
                 </Link>
               </div>
             </div>
diff --git a/apps/ratewise/src/pages/MultiConverter.tsx b/apps/ratewise/src/pages/MultiConverter.tsx
index 9eee955dd..054a7263c 100644
--- a/apps/ratewise/src/pages/MultiConverter.tsx
+++ b/apps/ratewise/src/pages/MultiConverter.tsx
@@ -1,7 +1,7 @@
 /**
- * Multi-Currency Converter Page - ParkKeeper 風格
+ * Multi-Currency Converter Page
  *
- * @description 多幣別轉換器頁面，採用 ParkKeeper 設計風格
+ * @description 多幣別轉換器頁面，沿用 RateWise 產品殼層與共用設計 token
  *              SSOT: 設計來自 Settings.tsx 風格參考
  *              標題區塊已移除，由底部導航 Tab 識別頁面
  * @version 2.1.0
@@ -19,7 +19,7 @@ import { MultiConverterSkeleton } from '../components/SkeletonLoader';
 import { formatDisplayTime } from '../utils/timeFormatter';
 import { APP_ONLY_PAGE_SEO } from '../config/seo-metadata';
 import type { CurrencyCode } from '../features/ratewise/types';
-import { multiConverterLayoutTokens } from '../config/design-tokens';
+import { feedbackSurfaceTokens, multiConverterLayoutTokens } from '../config/design-tokens';
 import { useConverterStore } from '../stores/converterStore';
 
 export default function MultiConverter() {
@@ -52,7 +52,6 @@ export default function MultiConverter() {
     sortedCurrencies,
     rateMode,
     exchangeShopRatesByCurrency,
-    multiExchangeShopCurrencies,
     handleMultiAmountChange,
     quickAmount,
     setBaseCurrency,
@@ -114,14 +113,15 @@ export default function MultiConverter() {
     return (
       <>
         {seoHelmet}
-        <div className="flex-1 flex items-center justify-center p-4">
-          <div className="card p-8 max-w-md w-full text-center">
-            <AlertCircle className="text-destructive mx-auto" size={48} />
-            <h1 className="text-2xl font-bold text-text mt-4">{t('errors.rateLoadFailed')}</h1>
-            <p className="text-text-muted mt-2 mb-6">{t('errors.networkCheckRetry')}</p>
+        <div className={feedbackSurfaceTokens.pageCenter}>
+          <div className={feedbackSurfaceTokens.card}>
+            <AlertCircle className={feedbackSurfaceTokens.icon} size={48} />
+            <h1 className={feedbackSurfaceTokens.title}>{t('errors.rateLoadFailed')}</h1>
+            <p className={feedbackSurfaceTokens.description}>{t('errors.networkCheckRetry')}</p>
             <button
+              type="button"
               onClick={() => window.location.reload()}
-              className="w-full flex items-center justify-center gap-2 py-3 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl shadow-lg transition"
+              className={feedbackSurfaceTokens.actionButton}
             >
               <RefreshCw size={18} />
               {t('errors.reload')}
@@ -137,13 +137,6 @@ export default function MultiConverter() {
       {seoHelmet}
       <h1 className="sr-only">{pageSeo.title}</h1>
       <div className={multiConverterLayoutTokens.content.className}>
-        {/* 多幣別換算區塊 - 簡約風格（標題已移除，由底部導航識別）
-         *
-         * RWD 全頁面佈局：
-         * - flex-1：填滿可用垂直空間
-         * - flex flex-col：垂直佈局允許貨幣列表自適應擴展
-         * - 滾動由 AppLayout 統一處理，避免嵌套滾動
-         */}
         <section className={multiConverterLayoutTokens.section.className}>
           <div className={multiConverterLayoutTokens.card.className}>
             <MultiConverterComponent
@@ -156,7 +149,6 @@ export default function MultiConverter() {
               details={details}
               exchangeShopRatesByCurrency={exchangeShopRatesByCurrency}
               favorites={favorites}
-              exchangeShopCurrencies={multiExchangeShopCurrencies}
               onAmountChange={handleMultiAmountChange}
               onQuickAmount={handleQuickAmount}
               onRateTypeChange={setRateType}
@@ -172,9 +164,9 @@ export default function MultiConverter() {
           <section className={multiConverterLayoutTokens.info.wrapper}>
             <div className={multiConverterLayoutTokens.info.titleRow}>
               <Clock className="w-3.5 h-3.5" />
-              <h3 className={multiConverterLayoutTokens.info.titleText}>
+              <h2 className={multiConverterLayoutTokens.info.titleText}>
                 {t('footer.dataSource')}
-              </h3>
+              </h2>
             </div>
             <div className={multiConverterLayoutTokens.info.card}>
               <p className={multiConverterLayoutTokens.info.text}>
diff --git a/apps/ratewise/src/pages/NotFound.test.tsx b/apps/ratewise/src/pages/NotFound.test.tsx
index afd6f3e1a..eda939763 100644
--- a/apps/ratewise/src/pages/NotFound.test.tsx
+++ b/apps/ratewise/src/pages/NotFound.test.tsx
@@ -19,6 +19,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { MemoryRouter } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
+import zhTW from '../i18n/locales/zh-TW';
 
 // 🔴 RED: 這個 import 會失敗，因為 NotFound 元件尚未建立
 import NotFound from './NotFound';
@@ -111,8 +112,9 @@ describe('NotFound Component - 404 Page (BDD)', () => {
       const notFoundPath = path.resolve(__dirname, 'NotFound.tsx');
       const notFoundContent = await fs.readFile(notFoundPath, 'utf-8');
 
-      // 🔴 紅燈：確認 SEOHelmet 包含 404 相關標題
-      expect(notFoundContent).toMatch(/title.*404|找不到頁面/i);
+      // SEO title 由 i18n SSOT 提供，避免 noindex runtime 頁面殘留硬編中文。
+      expect(notFoundContent).toContain("title={t('notFound.metaTitle')}");
+      expect(zhTW.notFound.metaTitle).toMatch(/404|找不到頁面/i);
     });
   });
 
diff --git a/apps/ratewise/src/pages/NotFound.tsx b/apps/ratewise/src/pages/NotFound.tsx
index 9ce6e63a8..017f3b3e9 100644
--- a/apps/ratewise/src/pages/NotFound.tsx
+++ b/apps/ratewise/src/pages/NotFound.tsx
@@ -16,68 +16,61 @@
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { SEOHelmet } from '../components/SEOHelmet';
+import { contentPageTokens } from '../config/design-tokens';
 
 export default function NotFound() {
   const { t } = useTranslation();
   return (
-    <main className="min-h-screen flex items-center justify-center bg-page-gradient px-4">
-      {/* SEO Configuration: noindex to prevent 404 pages from being indexed */}
+    <main className="flex min-h-full items-center justify-center px-4 py-8 sm:px-6">
       <SEOHelmet
-        title="404 - 找不到頁面"
-        description="很抱歉，您訪問的頁面不存在。請返回首頁或瀏覽其他頁面。"
+        title={t('notFound.metaTitle')}
+        description={t('notFound.metaDescription')}
         pathname="/404"
         robots="noindex, follow"
       />
 
-      <div className="max-w-md w-full text-center">
-        {/* 404 Error Display */}
-        <div className="mb-8">
-          <h1 className="text-9xl font-bold text-primary mb-4" aria-label="404 錯誤">
+      <div className="card w-full max-w-xl p-6 text-center sm:p-8">
+        <p className={contentPageTokens.sectionHeader.eyebrow}>{t('notFound.eyebrow')}</p>
+        <div className="mt-3 mb-8">
+          <h1
+            className="text-6xl font-bold tracking-tight text-primary sm:text-7xl"
+            aria-label={t('notFound.errorAria')}
+          >
             404
           </h1>
-          <h2 className="text-2xl font-semibold text-text mb-2">{t('notFound.title')}</h2>
-          <p className="text-text-muted mb-6">{t('notFound.message')}</p>
+          <h2 className="mt-3 text-2xl font-semibold text-text">{t('notFound.title')}</h2>
+          <p className="mx-auto mt-2 max-w-md text-sm leading-6 text-text-muted sm:text-base">
+            {t('notFound.message')}
+          </p>
         </div>
 
-        {/* Primary Action: Return to Home */}
         <div className="mb-8">
-          <Link
-            to="/"
-            className="inline-flex items-center justify-center px-6 py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors"
-          >
+          <Link to="/" className={contentPageTokens.buttons.primary}>
             {t('notFound.goHome')}
           </Link>
         </div>
 
-        {/* Suggested Pages */}
         <div className="space-y-3">
-          <p className="text-sm text-text-muted mb-3">或許您想前往：</p>
+          <p className="mb-3 text-sm text-text-muted">{t('notFound.suggestedPages')}</p>
           <div className="flex flex-col sm:flex-row gap-3 justify-center">
-            <Link
-              to="/faq/"
-              className="px-4 py-2 text-primary hover:text-primary/80 hover:bg-primary/10 rounded-lg transition-colors font-medium"
-            >
+            <Link to="/faq/" className={contentPageTokens.links.ctaSecondary}>
               {t('settings.faq')}
             </Link>
-            <Link
-              to="/about/"
-              className="px-4 py-2 text-primary hover:text-primary/80 hover:bg-primary/10 rounded-lg transition-colors font-medium"
-            >
+            <Link to="/about/" className={contentPageTokens.links.ctaSecondary}>
               {t('settings.aboutUs')}
             </Link>
           </div>
         </div>
 
-        {/* Additional Help Text */}
         <p className="mt-8 text-xs text-text-muted">
-          如果您認為這是一個錯誤，請
+          {t('notFound.reportIssuePrefix')}
           <a
             href="https://github.com/haotool/app/issues"
             target="_blank"
             rel="noopener noreferrer"
             className="text-primary hover:text-primary/80 underline ml-1"
           >
-            回報問題
+            {t('notFound.reportIssueLink')}
           </a>
         </p>
       </div>
diff --git a/apps/ratewise/src/pages/OpenData.test.tsx b/apps/ratewise/src/pages/OpenData.test.tsx
index d84a19ea6..76c515944 100644
--- a/apps/ratewise/src/pages/OpenData.test.tsx
+++ b/apps/ratewise/src/pages/OpenData.test.tsx
@@ -69,19 +69,19 @@ describe('OpenData Page', () => {
   });
 
   describe('Accessibility (WCAG 2.1 AA)', () => {
-    it('renders tabbed code examples with 4 tab buttons and all code regions in DOM', () => {
+    it('renders tabbed code examples with 4 tabs and all tab panels in DOM', () => {
       const { container } = renderOpenData();
-      // 4 語言 tab 按鈕：cURL / JavaScript / Python / Deep Link
-      const tabButtons = screen.getAllByRole('button', {
+      // 4 語言 tabs：cURL / JavaScript / Python / Deep Link
+      const tabs = screen.getAllByRole('tab', {
         name: /cURL|JavaScript|Python|Deep Link/i,
       });
-      expect(tabButtons).toHaveLength(4);
+      expect(tabs).toHaveLength(4);
 
-      // 所有 tab panel 應存在於 DOM，確保 prerender HTML 保留完整語意內容。
-      const codeRegions = container.querySelectorAll('pre[role="region"]');
-      expect(codeRegions).toHaveLength(4);
-      expect(codeRegions[0]).toBeVisible();
-      expect(codeRegions[3]).not.toBeVisible();
+      // 所有 tabpanel 應存在於 DOM，確保 prerender HTML 保留完整語意內容。
+      const codePanels = container.querySelectorAll('pre[role="tabpanel"]');
+      expect(codePanels).toHaveLength(4);
+      expect(codePanels[0]).toBeVisible();
+      expect(codePanels[3]).not.toBeVisible();
     });
 
     it('all external links have rel=noopener noreferrer', () => {
@@ -106,6 +106,16 @@ describe('OpenData Page', () => {
       expect(html).not.toContain(APP_INFO.email);
       expect(html).not.toContain('/cdn-cgi/l/email-protection');
     });
+
+    it('端點路徑 code 標籤應可斷行，避免 320px 視口水平溢出', () => {
+      renderOpenData();
+
+      // 無空白的長路徑（如 /public/rates/history/{YYYY-MM-DD}.json）必須 break-all
+      const endpointPath = screen.getByText('/public/rates/history/{YYYY-MM-DD}.json');
+      expect(endpointPath.tagName).toBe('CODE');
+      expect(endpointPath.className).toContain('break-all');
+      expect(endpointPath.className).toContain('min-w-0');
+    });
   });
 
   describe('SSOT — URLs from api-endpoints.ts', () => {
@@ -126,15 +136,15 @@ describe('OpenData Page', () => {
     it('deep link example contains SITE_CONFIG.url after clicking Deep Link tab', () => {
       renderOpenData();
       // 點擊 Deep Link tab
-      fireEvent.click(screen.getByRole('button', { name: 'Deep Link' }));
-      const region = screen.getByRole('region', { name: /程式碼範例：Deep Link/i });
-      expect(region.querySelector('code')?.textContent).toContain(SITE_CONFIG.url);
+      fireEvent.click(screen.getByRole('tab', { name: 'Deep Link' }));
+      const panel = screen.getByRole('tabpanel', { name: /Deep Link/i });
+      expect(panel.querySelector('code')?.textContent).toContain(SITE_CONFIG.url);
     });
 
     it('應明確區分可索引金額頁與首頁 query deep link', () => {
       renderOpenData();
-      fireEvent.click(screen.getByRole('button', { name: 'Deep Link' }));
-      const content = screen.getByRole('region', { name: /程式碼範例：Deep Link/i }).textContent;
+      fireEvent.click(screen.getByRole('tab', { name: 'Deep Link' }));
+      const content = screen.getByRole('tabpanel', { name: /Deep Link/i }).textContent;
 
       expect(content).toContain(`${SITE_CONFIG.url}usd-twd/1000/`);
       expect(content).toContain('主要可索引 URL');
diff --git a/apps/ratewise/src/pages/OpenData.tsx b/apps/ratewise/src/pages/OpenData.tsx
index 704ef9c2d..c80b937de 100644
--- a/apps/ratewise/src/pages/OpenData.tsx
+++ b/apps/ratewise/src/pages/OpenData.tsx
@@ -1,12 +1,14 @@
-import { useState } from 'react';
+import { useState, type KeyboardEvent } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { AlertTriangle, ArrowRight, CheckCircle2, XCircle } from 'lucide-react';
 import { SEOHelmet } from '../components/SEOHelmet';
 import { PageNavHeader } from '../components/PageNavHeader';
 import { AnswerCapsule } from '../components/AnswerCapsule';
 import { MailtoLink } from '../components/MailtoLink';
 import { OPEN_DATA_PAGE_SEO } from '../config/seo-metadata';
 import { APP_INFO } from '../config/app-info';
+import { contentPageTokens } from '../config/design-tokens';
 import {
   CDN_DATA_BASE,
   PROVIDER_RATES_PATH,
@@ -37,13 +39,13 @@ const DATA_SOURCES = [
     label: '同步機制',
     name: 'GitHub Actions',
     url: RATES_API.actionsUrl,
-    note: '每 5 分鐘自動抓取台銀最新牌告，寫入 data 分支 JSON',
+    note: '約每 5 分鐘檢查台銀牌告更新，寫入 data 分支 JSON',
   },
   {
     label: '建議端點',
     name: 'jsDelivr CDN',
     url: 'https://cdn.jsdelivr.net',
-    note: '全球 PoP 加速，無請求上限，支援 ETag 條件式請求。data 分支推送後自動 Purge，新鮮度約 5 分鐘',
+    note: '全球 PoP 加速，無固定公開額度，請遵守 CDN fair use；支援 ETag 條件式請求。data 分支推送後自動 Purge，實際新鮮度依 CDN 而定',
   },
   {
     label: '備援端點',
@@ -62,7 +64,7 @@ const API_ENDPOINTS = [
     cdnUrl: RATES_API.latestCdn,
     rawUrl: RATES_API.latestRaw,
     description: '最新匯率',
-    badge: '每 5 分鐘更新',
+    badge: '約每 5 分鐘檢查',
     note: '包含 17 種外幣的現金與即期四種報價，TWD 為基準幣；App 匯率模式請依 rateModeStrategies 選取 buy / sell / mid 欄位。',
   },
   {
@@ -287,6 +289,7 @@ const PROVIDER_CONTRACT_ROWS = PUBLIC_PROVIDER_METADATA.providers.map((provider)
 // ─── 子元件 ────────────────────────────────────────────────────────────────────
 
 function CopyButton({ text, className = '' }: { text: string; className?: string }) {
+  const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
@@ -296,13 +299,16 @@ function CopyButton({ text, className = '' }: { text: string; className?: string
     });
   };
 
+  const label = copied ? t('common.copied') : t('common.copy');
+
   return (
     <button
+      type="button"
       onClick={handleCopy}
-      aria-label={copied ? '已複製' : '複製'}
-      className={`inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium transition-colors ${
+      aria-label={label}
+      className={`relative inline-flex items-center gap-1 rounded-compact px-2 py-0.5 text-xs font-medium transition-colors after:absolute after:-inset-x-1 after:-inset-y-3 after:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background ${
         copied
-          ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+          ? 'border border-success/20 bg-success/10 text-text'
           : 'bg-surface-elevated text-text-muted hover:text-text'
       } ${className}`}
     >
@@ -322,7 +328,7 @@ function CopyButton({ text, className = '' }: { text: string; className?: string
               d="M5 13l4 4L19 7"
             />
           </svg>
-          已複製
+          {t('common.copied')}
         </>
       ) : (
         <>
@@ -340,7 +346,7 @@ function CopyButton({ text, className = '' }: { text: string; className?: string
               d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
             />
           </svg>
-          複製
+          {t('common.copy')}
         </>
       )}
     </button>
@@ -349,15 +355,45 @@ function CopyButton({ text, className = '' }: { text: string; className?: string
 
 function TabbedCodeExamples() {
   const [activeId, setActiveId] = useState<string>(CODE_EXAMPLES[0].id);
+  const focusTab = (id: string) => {
+    window.requestAnimationFrame(() => document.getElementById(`code-tab-${id}`)?.focus());
+  };
+  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    const activeIndex = CODE_EXAMPLES.findIndex((example) => example.id === activeId);
+    const lastIndex = CODE_EXAMPLES.length - 1;
+    let nextIndex = activeIndex;
+
+    if (event.key === 'ArrowRight') nextIndex = activeIndex === lastIndex ? 0 : activeIndex + 1;
+    if (event.key === 'ArrowLeft') nextIndex = activeIndex === 0 ? lastIndex : activeIndex - 1;
+    if (event.key === 'Home') nextIndex = 0;
+    if (event.key === 'End') nextIndex = lastIndex;
+    if (nextIndex === activeIndex) return;
+
+    event.preventDefault();
+    const nextId = (CODE_EXAMPLES[nextIndex] ?? CODE_EXAMPLES[0]).id;
+    setActiveId(nextId);
+    focusTab(nextId);
+  };
 
   return (
-    <div className="max-w-full overflow-hidden rounded-xl border border-surface-border">
+    <div className={`${contentPageTokens.table.wrapper} overflow-hidden`}>
       {/* Tab bar */}
-      <div className="flex min-w-0 items-center gap-0 overflow-x-auto border-b border-surface-border bg-surface-elevated">
+      <div
+        role="tablist"
+        aria-label="程式碼範例"
+        className="flex min-w-0 items-center gap-0 overflow-x-auto border-b border-border/70 bg-surface-elevated"
+      >
         {CODE_EXAMPLES.map((ex) => (
           <button
             key={ex.id}
+            id={`code-tab-${ex.id}`}
+            type="button"
+            role="tab"
+            aria-selected={activeId === ex.id}
+            aria-controls={`code-panel-${ex.id}`}
+            tabIndex={activeId === ex.id ? 0 : -1}
             onClick={() => setActiveId(ex.id)}
+            onKeyDown={handleTabKeyDown}
             className={`shrink-0 px-4 py-2.5 text-sm font-medium transition-colors border-b-2 ${
               activeId === ex.id
                 ? 'border-primary text-primary'
@@ -381,8 +417,10 @@ function TabbedCodeExamples() {
         return (
           <pre
             key={example.id}
-            role="region"
-            aria-label={`程式碼範例：${example.label}`}
+            id={`code-panel-${example.id}`}
+            role="tabpanel"
+            aria-labelledby={`code-tab-${example.id}`}
+            tabIndex={isActive ? 0 : -1}
             hidden={!isActive}
             className="max-w-full overflow-x-auto bg-surface p-5 text-sm leading-relaxed text-text"
           >
@@ -410,12 +448,12 @@ function UrlCopyRow({
           {label}
         </span>
         {recommended && (
-          <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
+          <span className="rounded-compact bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
             建議
           </span>
         )}
       </div>
-      <div className="flex min-w-0 items-center gap-2 rounded bg-surface-elevated px-3 py-2">
+      <div className="flex min-w-0 items-center gap-2 rounded-compact bg-surface-elevated px-3 py-2">
         <a
           href={url}
           target="_blank"
@@ -440,7 +478,7 @@ interface ResourceCardItem {
 
 function ResourceCard({ item }: { item: ResourceCardItem }) {
   const className =
-    'group rounded-xl border border-surface-border bg-surface p-4 transition-colors hover:border-primary/40 hover:bg-surface-elevated';
+    'group rounded-control border border-border/70 bg-surface p-4 transition-colors hover:border-primary/40 hover:bg-surface-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background';
   const content = (
     <>
       <div className="mb-1 min-w-0 break-words font-semibold text-text group-hover:text-primary">
@@ -484,10 +522,11 @@ const OpenData = () => {
         ogType="article"
       />
 
-      <div className="min-h-screen bg-page-gradient">
-        <div className="container mx-auto max-w-5xl px-4 py-8">
+      <div className="min-h-full">
+        <div className={contentPageTokens.shell}>
           {/* 頁面頂部導航：返回 + 麵包屑（PageNavHeader SSOT 模組）。 */}
           <PageNavHeader
+            fallbackHref="/settings/"
             breadcrumbItems={[
               { label: t('nav.home'), href: '/' },
               { label: t('settings.openDataApi'), href: '/open-data/' },
@@ -495,23 +534,21 @@ const OpenData = () => {
           />
 
           {/* ── Hero ── */}
-          <div className="mb-10">
-            <h1 className="mb-3 text-4xl font-bold text-text">開放資料 API</h1>
-            <p className="mb-4 max-w-2xl text-lg text-text-muted">
+          <div className={contentPageTokens.hero.wrapper}>
+            <p className={contentPageTokens.sectionHeader.eyebrow}>開發者資源</p>
+            <h1 className={contentPageTokens.hero.title}>開放資料 API</h1>
+            <p className={contentPageTokens.intro}>
               台灣銀行牌告匯率 JSON 端點，免費、免 API Key、免帳號。
             </p>
-            <div className="flex flex-wrap gap-2">
+            <div className="mt-4 flex flex-wrap gap-2">
               {[
                 `${SUPPORTED_CURRENCIES.length} 種幣別`,
-                '每 5 分鐘更新',
+                '約每 5 分鐘檢查',
                 '無需 API Key',
                 'ETag 支援',
                 'CDN 全球加速',
               ].map((badge) => (
-                <span
-                  key={badge}
-                  className="rounded-full border border-surface-border bg-surface-elevated px-3 py-1 text-xs font-medium text-text-muted"
-                >
+                <span key={badge} className={contentPageTokens.badges.neutral}>
                   {badge}
                 </span>
               ))}
@@ -525,38 +562,37 @@ const OpenData = () => {
             <h2 className="mb-5 text-2xl font-semibold text-text">資料管線</h2>
 
             {/* 流程圖 */}
-            <div className="mb-5 max-w-full overflow-hidden rounded-xl border border-surface-border bg-surface p-5">
+            <div className={`${contentPageTokens.article.card} mb-5 max-w-full overflow-hidden`}>
               <div className="flex min-w-0 flex-col items-center gap-2 font-mono text-sm sm:flex-row sm:flex-wrap sm:justify-center sm:gap-0">
                 {[
                   {
                     label: '臺灣銀行',
                     sub: 'rate.bot.com.tw',
-                    color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+                    color: 'border border-primary/20 bg-primary/10 text-text',
                   },
                   null,
                   {
                     label: 'GitHub Actions',
                     sub: '每 5 分鐘',
-                    color: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
+                    color: 'border border-warning/25 bg-warning/10 text-text',
                   },
                   null,
                   {
                     label: 'data 分支',
                     sub: 'latest.json / history/',
-                    color:
-                      'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
+                    color: 'border border-border/70 bg-surface-elevated text-text',
                   },
                   null,
                   {
                     label: 'jsDelivr CDN',
                     sub: '全球加速',
-                    color: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
+                    color: 'border border-success/25 bg-success/10 text-text',
                   },
                   null,
                   {
                     label: '你的應用',
                     sub: 'fetch / curl',
-                    color: 'bg-surface-elevated border border-surface-border text-text',
+                    color: 'border border-border/70 bg-surface-elevated text-text',
                   },
                 ].map((item, i) =>
                   item === null ? (
@@ -566,7 +602,7 @@ const OpenData = () => {
                   ) : (
                     <div
                       key={i}
-                      className={`max-w-full rounded-lg px-3 py-2 text-center ${item.color}`}
+                      className={`max-w-full rounded-control px-3 py-2 text-center ${item.color}`}
                     >
                       <div className="font-semibold">{item.label}</div>
                       <div className="break-all text-xs opacity-75">{item.sub}</div>
@@ -578,10 +614,7 @@ const OpenData = () => {
 
             <div className="grid gap-4 sm:grid-cols-2">
               {DATA_SOURCES.map((src) => (
-                <div
-                  key={src.label}
-                  className="rounded-lg border border-surface-border bg-surface p-4"
-                >
+                <div key={src.label} className={contentPageTokens.article.card}>
                   <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-text-muted">
                     {src.label}
                   </div>
@@ -598,12 +631,16 @@ const OpenData = () => {
               ))}
             </div>
 
-            <div className="mt-4 min-w-0 break-words rounded-lg border border-surface-border bg-surface-elevated p-4 text-sm text-text-muted">
+            <div
+              className={`${contentPageTokens.callouts.elevated} mt-4 min-w-0 break-words text-sm text-text-muted`}
+            >
               <span className="font-semibold text-text">快取建議</span>
-              ：CDN 端點支援{' '}
-              <code className="rounded bg-surface px-1 font-mono text-xs">If-None-Match</code> ETag
-              條件式請求， 資料未變時回傳 304（零 body），可節省約 5 KB／次。建議 client 端快取 5
-              分鐘，避免無意義重複請求。
+              ：瀏覽器端建議直接依賴 HTTP cache 與 client 端 5 分鐘快取，避免無意義重複請求；跨域
+              CDN 請求不應主動附加
+              <code className="mx-1 rounded-compact bg-surface px-1 font-mono text-xs">
+                If-None-Match
+              </code>
+              之類非 safelisted 標頭，以免觸發預檢失敗。
             </div>
 
             {/* ── 資料新鮮度與時間戳記說明 ── */}
@@ -611,30 +648,30 @@ const OpenData = () => {
               <h3 className="mb-3 text-base font-semibold text-text">資料新鮮度與時間戳記說明</h3>
 
               {/* 兩個時間欄位對照 */}
-              <div className="mb-4 max-w-full overflow-x-auto rounded-xl border border-surface-border">
-                <table className="min-w-[42rem] text-sm" aria-label="時間戳記欄位說明">
+              <div className={`${contentPageTokens.table.wrapperBlock} mb-4`}>
+                <table className={contentPageTokens.table.table} aria-label="時間戳記欄位說明">
                   <thead>
-                    <tr className="border-b border-surface-border bg-surface-elevated">
-                      <th className="px-4 py-3 text-left font-semibold text-text">欄位</th>
-                      <th className="px-4 py-3 text-left font-semibold text-text">意義</th>
-                      <th className="px-4 py-3 text-left font-semibold text-text">更新時機</th>
+                    <tr className={contentPageTokens.table.headRow}>
+                      <th className={contentPageTokens.table.headCell}>欄位</th>
+                      <th className={contentPageTokens.table.headCell}>意義</th>
+                      <th className={contentPageTokens.table.headCell}>更新時機</th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-surface-border bg-surface">
+                  <tbody className={contentPageTokens.table.body}>
                     <tr>
-                      <td className="px-4 py-3 font-mono text-xs text-primary">updateTime</td>
-                      <td className="px-4 py-3 break-words text-text">
+                      <td className={contentPageTokens.table.monoCell}>updateTime</td>
+                      <td className={`${contentPageTokens.table.cell} break-words`}>
                         台銀匯率於本系統最後一次<strong>實際變動</strong>的時間（台灣時區）
                       </td>
-                      <td className="px-4 py-3 break-words text-text-muted">
+                      <td className={`${contentPageTokens.table.mutedCell} break-words`}>
                         僅在 GitHub Actions 偵測到匯率數值與前次不同時才更新；台銀未發布新牌告時即使
                         Actions 持續執行，此欄位也不會前進
                       </td>
                     </tr>
                     <tr>
-                      <td className="px-4 py-3 font-mono text-xs text-primary">timestamp</td>
-                      <td className="px-4 py-3 text-text">同上，UTC ISO 8601 格式</td>
-                      <td className="px-4 py-3 text-text-muted">與 updateTime 同步更新</td>
+                      <td className={contentPageTokens.table.monoCell}>timestamp</td>
+                      <td className={contentPageTokens.table.cell}>同上，UTC ISO 8601 格式</td>
+                      <td className={contentPageTokens.table.mutedCell}>與 updateTime 同步更新</td>
                     </tr>
                   </tbody>
                 </table>
@@ -642,59 +679,65 @@ const OpenData = () => {
 
               {/* 核心說明 */}
               <div className="space-y-3">
-                <div className="min-w-0 rounded-lg border border-surface-border bg-surface p-4 text-sm leading-relaxed">
+                <div
+                  className={`${contentPageTokens.article.card} min-w-0 text-sm leading-relaxed`}
+                >
                   <div className="mb-1 flex items-center gap-2">
-                    <span className="rounded bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
+                    <span className="rounded-compact border border-warning/25 bg-warning/10 px-2 py-0.5 text-xs font-semibold text-text">
                       變動偵測機制
                     </span>
                   </div>
                   <p className="break-words text-text">
                     GitHub Actions 每 5 分鐘抓取台銀 CSV 後，會將本次各幣別匯率與前次儲存的
-                    <code className="mx-1 rounded bg-surface-elevated px-1 font-mono text-xs">
+                    <code className="mx-1 rounded-compact bg-surface-elevated px-1 font-mono text-xs">
                       rates
                     </code>
                     物件進行 JSON 字串比對。若完全相同，腳本立即結束、不寫檔、不
                     commit；只有在至少一個幣別數值發生變化時，才會寫入新的
-                    <code className="mx-1 rounded bg-surface-elevated px-1 font-mono text-xs">
+                    <code className="mx-1 rounded-compact bg-surface-elevated px-1 font-mono text-xs">
                       latest.json
                     </code>
                     並更新
-                    <code className="mx-1 rounded bg-surface-elevated px-1 font-mono text-xs">
+                    <code className="mx-1 rounded-compact bg-surface-elevated px-1 font-mono text-xs">
                       updateTime
                     </code>
                     。
                   </p>
                 </div>
 
-                <div className="min-w-0 rounded-lg border border-surface-border bg-surface p-4 text-sm leading-relaxed">
+                <div
+                  className={`${contentPageTokens.article.card} min-w-0 text-sm leading-relaxed`}
+                >
                   <div className="mb-1 flex items-center gap-2">
-                    <span className="rounded bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
+                    <span className="rounded-compact border border-primary/20 bg-primary/10 px-2 py-0.5 text-xs font-semibold text-text">
                       為何來源時間與刷新時間差距較大？
                     </span>
                   </div>
                   <p className="break-words text-text">
                     應用介面顯示的「<strong>來源</strong>」時間對應
-                    <code className="mx-1 rounded bg-surface-elevated px-1 font-mono text-xs">
+                    <code className="mx-1 rounded-compact bg-surface-elevated px-1 font-mono text-xs">
                       updateTime
                     </code>
                     ，代表台銀牌告上次實際更新的時刻；「<strong>刷新</strong>
                     」時間則是用戶端瀏覽器本次成功取得資料的時刻。臺灣銀行通常每個交易日更新牌告數次（多集中於開盤後），非交易時段、例假日或銀行內部尚未發布新牌告時，
-                    <code className="mx-1 rounded bg-surface-elevated px-1 font-mono text-xs">
+                    <code className="mx-1 rounded-compact bg-surface-elevated px-1 font-mono text-xs">
                       updateTime
                     </code>
                     不會變動，因此兩者之間出現數小時乃至跨日的落差屬預期行為，並非資料延遲或系統異常。
                   </p>
                 </div>
 
-                <div className="min-w-0 rounded-lg border border-surface-border bg-surface p-4 text-sm leading-relaxed">
+                <div
+                  className={`${contentPageTokens.article.card} min-w-0 text-sm leading-relaxed`}
+                >
                   <div className="mb-1 flex items-center gap-2">
-                    <span className="rounded bg-purple-100 px-2 py-0.5 text-xs font-semibold text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">
+                    <span className="rounded-compact border border-success/20 bg-success/10 px-2 py-0.5 text-xs font-semibold text-text">
                       Actions 排程說明
                     </span>
                   </div>
                   <p className="break-words text-text">
                     排程使用標準 cron 語法{' '}
-                    <code className="rounded bg-surface-elevated px-1 font-mono text-xs">
+                    <code className="rounded-compact bg-surface-elevated px-1 font-mono text-xs">
                       */5 * * * *
                     </code>
                     ，理論間隔 5 分鐘。受 GitHub Actions 公共執行器佇列影響，實際觸發可能有 1–10
@@ -713,19 +756,16 @@ const OpenData = () => {
 
             <div className="space-y-5">
               {OPEN_DATA_API_ENDPOINTS.map((ep) => (
-                <div
-                  key={ep.path}
-                  className="rounded-xl border border-surface-border bg-surface p-5"
-                >
+                <div key={ep.path} className={contentPageTokens.article.card}>
                   <div className="mb-1 flex flex-wrap items-center gap-2">
-                    <span className="rounded bg-primary/10 px-2 py-0.5 text-xs font-bold text-primary">
+                    <span className="rounded-compact bg-primary/10 px-2 py-0.5 text-xs font-bold text-primary">
                       {ep.method}
                     </span>
-                    <code className="rounded bg-surface-elevated px-2 py-0.5 font-mono text-sm text-text">
+                    <code className="min-w-0 break-all rounded-compact bg-surface-elevated px-2 py-0.5 font-mono text-sm text-text">
                       {ep.path}
                     </code>
                     <span className="font-medium text-text">{ep.description}</span>
-                    <span className="rounded-full border border-surface-border px-2 py-0.5 text-xs text-text-muted">
+                    <span className="rounded-full border border-border/70 px-2 py-0.5 text-xs text-text-muted">
                       {ep.badge}
                     </span>
                   </div>
@@ -738,7 +778,9 @@ const OpenData = () => {
               ))}
             </div>
 
-            <div className="mt-4 min-w-0 break-words rounded-lg border border-primary/20 bg-primary/5 p-4 text-sm">
+            <div
+              className={`${contentPageTokens.callouts.elevated} mt-4 min-w-0 break-words text-sm`}
+            >
               完整 OpenAPI 3.1 規格：
               <a
                 href="/ratewise/openapi.json"
@@ -765,52 +807,55 @@ const OpenData = () => {
             <h2 className="mb-2 text-2xl font-semibold text-text">資料格式</h2>
             <p className="mb-5 text-sm text-text-muted">
               回應為 JSON，
-              <code className="rounded bg-surface-elevated px-1 font-mono">
+              <code className="rounded-compact bg-surface-elevated px-1 font-mono">
                 Content-Type: application/json
               </code>
               。
             </p>
 
-            <div className="mb-6 max-w-full overflow-x-auto rounded-xl border border-surface-border">
-              <table className="min-w-[44rem] text-sm" aria-label="資料格式欄位說明">
+            <div className={contentPageTokens.table.wrapperBlock}>
+              <table className={contentPageTokens.table.table} aria-label="資料格式欄位說明">
                 <thead>
-                  <tr className="border-b border-surface-border bg-surface-elevated">
-                    <th className="px-4 py-3 text-left font-semibold text-text">欄位</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">型別</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">說明</th>
+                  <tr className={contentPageTokens.table.headRow}>
+                    <th className={contentPageTokens.table.headCell}>欄位</th>
+                    <th className={contentPageTokens.table.headCell}>型別</th>
+                    <th className={contentPageTokens.table.headCell}>說明</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-surface-border bg-surface">
+                <tbody className={contentPageTokens.table.body}>
                   {SCHEMA_FIELDS.map((f) => (
                     <tr key={f.field}>
-                      <td className="px-4 py-3 break-all font-mono text-xs text-primary">
-                        {f.field}
-                      </td>
+                      <td className={`${contentPageTokens.table.monoCell} break-all`}>{f.field}</td>
                       <td className="whitespace-nowrap px-4 py-3 text-xs text-text-muted">
                         {f.type}
                       </td>
-                      <td className="px-4 py-3 break-words text-text">{f.description}</td>
+                      <td className={`${contentPageTokens.table.cell} break-words`}>
+                        {f.description}
+                      </td>
                     </tr>
                   ))}
                 </tbody>
               </table>
             </div>
 
-            <div className="mb-6 max-w-full overflow-x-auto rounded-xl border border-surface-border">
-              <table className="min-w-[52rem] text-sm" aria-label="App 匯率模式欄位對照">
+            <div className={contentPageTokens.table.wrapperBlock}>
+              <table
+                className={contentPageTokens.table.wideTable}
+                aria-label="App 匯率模式欄位對照"
+              >
                 <thead>
-                  <tr className="border-b border-surface-border bg-surface-elevated">
-                    <th className="px-4 py-3 text-left font-semibold text-text">App 模式</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">來源幣別欄位</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">目標幣別欄位</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">說明</th>
+                  <tr className={contentPageTokens.table.headRow}>
+                    <th className={contentPageTokens.table.headCell}>App 模式</th>
+                    <th className={contentPageTokens.table.headCell}>來源幣別欄位</th>
+                    <th className={contentPageTokens.table.headCell}>目標幣別欄位</th>
+                    <th className={contentPageTokens.table.headCell}>說明</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-surface-border bg-surface">
+                <tbody className={contentPageTokens.table.body}>
                   {RATE_MODE_STRATEGY_ROWS.map((strategy) => (
                     <tr key={strategy.mode}>
                       <td className="px-4 py-3">
-                        <code className="rounded bg-surface-elevated px-1 font-mono text-xs text-primary">
+                        <code className="rounded-compact bg-surface-elevated px-1 font-mono text-xs text-primary">
                           {strategy.mode}
                         </code>
                         <span className="ml-2 text-text">{strategy.name}</span>
@@ -821,35 +866,42 @@ const OpenData = () => {
                       <td className="px-4 py-3 break-all font-mono text-xs text-text-muted">
                         {strategy.to}
                       </td>
-                      <td className="px-4 py-3 break-words text-text">{strategy.description}</td>
+                      <td className={`${contentPageTokens.table.cell} break-words`}>
+                        {strategy.description}
+                      </td>
                     </tr>
                   ))}
                 </tbody>
               </table>
             </div>
 
-            <div className="mb-6 max-w-full overflow-x-auto rounded-xl border border-surface-border">
-              <table className="min-w-[54rem] text-sm" aria-label="匯率來源 provider 合約">
+            <div className={contentPageTokens.table.wrapperBlock}>
+              <table
+                className={contentPageTokens.table.wideTable}
+                aria-label="匯率來源 provider 合約"
+              >
                 <thead>
-                  <tr className="border-b border-surface-border bg-surface-elevated">
-                    <th className="px-4 py-3 text-left font-semibold text-text">providerId</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">sourceKind</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">來源</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">狀態</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">端點</th>
+                  <tr className={contentPageTokens.table.headRow}>
+                    <th className={contentPageTokens.table.headCell}>providerId</th>
+                    <th className={contentPageTokens.table.headCell}>sourceKind</th>
+                    <th className={contentPageTokens.table.headCell}>來源</th>
+                    <th className={contentPageTokens.table.headCell}>狀態</th>
+                    <th className={contentPageTokens.table.headCell}>端點</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-surface-border bg-surface">
+                <tbody className={contentPageTokens.table.body}>
                   {PROVIDER_CONTRACT_ROWS.map((provider) => (
                     <tr key={provider.providerId}>
-                      <td className="px-4 py-3 font-mono text-xs text-primary">
-                        {provider.providerId}
-                      </td>
+                      <td className={contentPageTokens.table.monoCell}>{provider.providerId}</td>
                       <td className="px-4 py-3 font-mono text-xs text-text-muted">
                         {provider.sourceKind}
                       </td>
-                      <td className="px-4 py-3 break-words text-text">{provider.name}</td>
-                      <td className="px-4 py-3 break-words text-text-muted">{provider.status}</td>
+                      <td className={`${contentPageTokens.table.cell} break-words`}>
+                        {provider.name}
+                      </td>
+                      <td className={`${contentPageTokens.table.mutedCell} break-words`}>
+                        {provider.status}
+                      </td>
                       <td className="px-4 py-3 break-all font-mono text-xs text-text-muted">
                         {provider.endpoints}
                       </td>
@@ -859,7 +911,9 @@ const OpenData = () => {
               </table>
             </div>
 
-            <div className="mb-6 rounded-lg border border-surface-border bg-surface-elevated p-4 text-sm leading-relaxed text-text-muted">
+            <div
+              className={`${contentPageTokens.callouts.elevated} mb-6 text-sm leading-relaxed text-text-muted`}
+            >
               <span className="font-semibold text-text">Provider selection contract：</span>
               歷史與未來篩選以 sourceKind + providerId 作為穩定資料鍵。現在只有台灣銀行一個 bank
               provider，因此銀行選單與最佳匯率推薦保持關閉；未來 {
@@ -879,7 +933,7 @@ const OpenData = () => {
                 {SUPPORTED_CURRENCIES.map((c) => (
                   <span
                     key={c.code}
-                    className="min-w-0 rounded-full border border-surface-border bg-surface-elevated px-3 py-1 text-sm"
+                    className="min-w-0 rounded-full border border-border/70 bg-surface-elevated px-3 py-1 text-sm"
                   >
                     <span className="font-mono font-semibold text-primary">{c.code}</span>
                     <span className="ml-1 break-words text-text-muted">{c.name}</span>
@@ -893,23 +947,25 @@ const OpenData = () => {
           <section className="mb-12">
             <h2 className="mb-5 text-2xl font-semibold text-text">速率限制</h2>
 
-            <div className="mb-5 max-w-full overflow-x-auto rounded-xl border border-surface-border">
-              <table className="min-w-[42rem] text-sm" aria-label="速率限制規則">
+            <div className={`${contentPageTokens.table.wrapperBlock} mb-5`}>
+              <table className={contentPageTokens.table.table} aria-label="速率限制規則">
                 <thead>
-                  <tr className="border-b border-surface-border bg-surface-elevated">
-                    <th className="px-4 py-3 text-left font-semibold text-text">來源</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">限制</th>
-                    <th className="px-4 py-3 text-left font-semibold text-text">備註</th>
+                  <tr className={contentPageTokens.table.headRow}>
+                    <th className={contentPageTokens.table.headCell}>來源</th>
+                    <th className={contentPageTokens.table.headCell}>限制</th>
+                    <th className={contentPageTokens.table.headCell}>備註</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-surface-border bg-surface">
+                <tbody className={contentPageTokens.table.body}>
                   {RATE_LIMIT_ITEMS.map((r) => (
                     <tr key={r.source}>
-                      <td className="px-4 py-3 font-medium text-text">{r.source}</td>
+                      <td className={`${contentPageTokens.table.cell} font-medium`}>{r.source}</td>
                       <td className="whitespace-nowrap px-4 py-3 font-mono text-xs text-primary">
                         {r.limit}
                       </td>
-                      <td className="px-4 py-3 break-words text-text-muted">{r.note}</td>
+                      <td className={`${contentPageTokens.table.mutedCell} break-words`}>
+                        {r.note}
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -918,10 +974,19 @@ const OpenData = () => {
 
             <div className="space-y-2">
               {[
-                { icon: '✅', content: '允許：個人專案、學術研究、非商業 App、教學、媒體引用' },
-                { icon: '✅', content: '允許：標示「資料來源：臺灣銀行牌告匯率」' },
                 {
-                  icon: '⚠️',
+                  icon: CheckCircle2,
+                  iconClass: 'text-success',
+                  content: '允許：個人專案、學術研究、非商業 App、教學、媒體引用',
+                },
+                {
+                  icon: CheckCircle2,
+                  iconClass: 'text-success',
+                  content: '允許：標示「資料來源：臺灣銀行牌告匯率」',
+                },
+                {
+                  icon: AlertTriangle,
+                  iconClass: 'text-warning',
                   content: (
                     <>
                       商業用途建議聯繫{' '}
@@ -930,14 +995,22 @@ const OpenData = () => {
                     </>
                   ),
                 },
-                { icon: '❌', content: '禁止：大量爬取歷史資料（對 CDN 或 GitHub 造成異常流量）' },
-                { icon: '❌', content: '禁止：宣稱為官方臺灣銀行 API' },
-              ].map(({ icon, content }, i) => (
+                {
+                  icon: XCircle,
+                  iconClass: 'text-destructive',
+                  content: '禁止：大量爬取歷史資料（對 CDN 或 GitHub 造成異常流量）',
+                },
+                {
+                  icon: XCircle,
+                  iconClass: 'text-destructive',
+                  content: '禁止：宣稱為官方臺灣銀行 API',
+                },
+              ].map(({ icon: Icon, iconClass, content }, i) => (
                 <div
                   key={i}
-                  className="flex min-w-0 items-start gap-3 rounded-lg bg-surface px-4 py-2.5 text-sm text-text"
+                  className="flex min-w-0 items-start gap-3 rounded-control bg-surface px-4 py-2.5 text-sm text-text"
                 >
-                  <span className="mt-0.5 shrink-0">{icon}</span>
+                  <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${iconClass}`} aria-hidden="true" />
                   <span className="min-w-0 break-words">{content}</span>
                 </div>
               ))}
@@ -947,7 +1020,9 @@ const OpenData = () => {
           {/* ── 授權聲明 ── */}
           <section className="mb-12">
             <h2 className="mb-4 text-2xl font-semibold text-text">授權聲明</h2>
-            <div className="min-w-0 space-y-3 rounded-xl border border-surface-border bg-surface p-5 text-sm leading-relaxed text-text-muted">
+            <div
+              className={`${contentPageTokens.article.card} min-w-0 space-y-3 text-sm leading-relaxed text-text-muted`}
+            >
               <p>
                 <span className="font-semibold text-text">程式碼</span>
                 ：以{' '}
@@ -1039,11 +1114,8 @@ const OpenData = () => {
             <h2 className="mb-5 text-2xl font-semibold text-text">常見問題</h2>
             <div className="space-y-3">
               {OPEN_DATA_PAGE_SEO.faqContent?.map((item) => (
-                <details
-                  key={item.question}
-                  className="group rounded-xl border border-surface-border bg-surface"
-                >
-                  <summary className="flex min-w-0 cursor-pointer items-center justify-between gap-3 px-5 py-4 font-medium text-text">
+                <details key={item.question} className={contentPageTokens.article.faqItem}>
+                  <summary className="flex min-w-0 cursor-pointer items-center justify-between gap-3 rounded-control px-5 py-4 font-medium text-text transition-colors hover:bg-surface-elevated">
                     <span className="min-w-0 break-words">{item.question}</span>
                     <svg
                       aria-hidden="true"
@@ -1060,7 +1132,7 @@ const OpenData = () => {
                       />
                     </svg>
                   </summary>
-                  <div className="break-words border-t border-surface-border px-5 py-4 text-sm leading-relaxed text-text-muted">
+                  <div className="break-words border-t border-border/70 px-5 py-4 text-sm leading-relaxed text-text-muted">
                     {item.answer}
                   </div>
                 </details>
@@ -1069,27 +1141,11 @@ const OpenData = () => {
           </section>
 
           {/* ── CTA ── */}
-          <div className="min-w-0 rounded-2xl border border-primary/20 bg-primary/5 p-6 text-center">
+          <div className="min-w-0 rounded-control border border-border/70 bg-surface-elevated p-6 text-center">
             <p className="mb-3 text-text-muted">不想呼叫 API？直接使用換算介面，免安裝、免帳號。</p>
-            <Link
-              to="/"
-              className="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-2.5 font-semibold text-white transition-colors hover:bg-primary-hover"
-            >
+            <Link to="/" className={contentPageTokens.buttons.primary}>
               開啟換算工具
-              <svg
-                aria-hidden="true"
-                className="h-4 w-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M14 5l7 7m0 0l-7 7m7-7H3"
-                />
-              </svg>
+              <ArrowRight className="h-4 w-4" aria-hidden="true" />
             </Link>
           </div>
         </div>
diff --git a/apps/ratewise/src/pages/Privacy.tsx b/apps/ratewise/src/pages/Privacy.tsx
index 9f1a297e4..7be4c0a9d 100644
--- a/apps/ratewise/src/pages/Privacy.tsx
+++ b/apps/ratewise/src/pages/Privacy.tsx
@@ -5,6 +5,7 @@ import { PageNavHeader } from '../components/PageNavHeader';
 import { APP_INFO, getCopyrightYears } from '../config/app-info';
 import { MailtoLink } from '../components/MailtoLink';
 import { PRIVACY_PAGE_SEO, SITE_SEO } from '../config/seo-metadata';
+import { contentPageTokens } from '../config/design-tokens';
 
 const LAST_UPDATED = new Date(SITE_SEO.updatedTime).toLocaleDateString('zh-TW', {
   year: 'numeric',
@@ -25,9 +26,10 @@ export default function Privacy() {
         robots={PRIVACY_PAGE_SEO.robots}
       />
 
-      <div className="min-h-screen">
-        <div className="container mx-auto max-w-4xl px-4 py-8">
+      <div className="min-h-full">
+        <div className={contentPageTokens.shell}>
           <PageNavHeader
+            fallbackHref="/settings/"
             breadcrumbItems={[
               { label: t('nav.home'), href: '/' },
               { label: t('footer.privacyPolicy'), href: '/privacy/' },
@@ -35,11 +37,12 @@ export default function Privacy() {
           />
 
           <div className="mb-8">
-            <h1 className="mb-2 text-3xl font-bold text-text">隱私政策</h1>
-            <p className="text-text-muted">最後更新：{LAST_UPDATED}</p>
+            <p className={contentPageTokens.sectionHeader.eyebrow}>資料與隱私</p>
+            <h1 className="mb-2 mt-2 text-3xl font-bold text-text">隱私政策</h1>
+            <p className={contentPageTokens.meta}>最後更新：{LAST_UPDATED}</p>
           </div>
 
-          <section className="card mb-6 p-6">
+          <section className={`mb-6 ${contentPageTokens.surfaces.panel}`}>
             <h2 className="mb-4 text-2xl font-bold text-text">概述</h2>
             <p className="mb-4 leading-relaxed text-text-muted">
               {APP_INFO.shortName}{' '}
@@ -50,7 +53,7 @@ export default function Privacy() {
             </p>
           </section>
 
-          <section className="card mb-6 p-6">
+          <section className={`mb-6 ${contentPageTokens.surfaces.panel}`}>
             <h2 className="mb-4 text-2xl font-bold text-text">本地儲存資料</h2>
             <ul className="list-inside list-disc space-y-2 text-text-muted">
               <li>收藏貨幣清單</li>
@@ -64,7 +67,7 @@ export default function Privacy() {
             </p>
           </section>
 
-          <section className="card mb-6 p-6">
+          <section className={`mb-6 ${contentPageTokens.surfaces.panel}`}>
             <h2 className="mb-4 text-2xl font-bold text-text">第三方服務</h2>
             <div className="space-y-4 text-text-muted">
               <p>
@@ -84,12 +87,12 @@ export default function Privacy() {
             </div>
           </section>
 
-          <section className="card mb-6 p-6">
+          <section className={`mb-6 ${contentPageTokens.surfaces.panel}`}>
             <h2 className="mb-4 text-2xl font-bold text-text">你可以怎麼管理資料</h2>
             <ul className="space-y-3 text-text-muted">
               <li>
                 你可以在
-                <Link to="/settings/" className="mx-1 text-primary underline">
+                <Link to="/settings/" className={`mx-1 ${contentPageTokens.links.inline}`}>
                   設定頁
                 </Link>
                 重設部分本地偏好與快取資料。
@@ -97,7 +100,10 @@ export default function Privacy() {
               <li>你也可以透過瀏覽器設定清除站點資料、Cookie 與本地儲存內容。</li>
               <li>
                 若對隱私有疑問，可來信
-                <MailtoLink email={APP_INFO.email} className="ml-1 text-primary underline" />。
+                <MailtoLink
+                  email={APP_INFO.email}
+                  className={`ml-1 ${contentPageTokens.links.inline}`}
+                />
               </li>
             </ul>
           </section>
diff --git a/apps/ratewise/src/pages/SeoTech.tsx b/apps/ratewise/src/pages/SeoTech.tsx
index dcd8b09c3..99a681a0e 100644
--- a/apps/ratewise/src/pages/SeoTech.tsx
+++ b/apps/ratewise/src/pages/SeoTech.tsx
@@ -11,7 +11,6 @@
 import { Link } from 'react-router-dom';
 import { motion } from 'motion/react';
 import {
-  ArrowLeft,
   Globe,
   FileJson,
   Search,
@@ -29,6 +28,7 @@ import {
   CheckCircle2,
 } from 'lucide-react';
 import { SEOHelmet } from '../components/SEOHelmet';
+import { PageNavHeader } from '../components/PageNavHeader';
 import { APP_ONLY_PAGE_SEO } from '../config/seo-metadata';
 import { SEO_SCHEMA_REGISTRY } from '../config/seo-schema-registry';
 import { SEO_BUILD_PIPELINE } from '../config/seo-build-pipeline';
@@ -43,6 +43,7 @@ import {
 import { RATES_API } from '../config/api-endpoints';
 import { APP_INFO } from '../config/app-info';
 import { staggerContainerVariants, staggerItemVariants, transitions } from '../config/animations';
+import { contentPageTokens } from '../config/design-tokens';
 
 // ─── SSOT 計算數據 ──────────────────────────────────────────────────────────────
 
@@ -53,9 +54,9 @@ const STATS = [
     label: '可索引 SEO 路徑',
     sub: 'Google 可爬取頁面',
     icon: Globe,
-    color: 'text-violet-600',
-    bg: 'bg-violet-50',
-    border: 'border-violet-200',
+    color: 'text-primary',
+    bg: 'bg-primary/10',
+    border: 'border-primary/20',
   },
   {
     value: PRERENDER_PATHS.length,
@@ -63,9 +64,9 @@ const STATS = [
     label: '靜態預渲染（SSG）',
     sub: '建置期 HTML 快照',
     icon: Layers,
-    color: 'text-blue-600',
-    bg: 'bg-blue-50',
-    border: 'border-blue-200',
+    color: 'text-primary',
+    bg: 'bg-primary/10',
+    border: 'border-primary/20',
   },
   {
     value: CURRENCY_SEO_PATHS.length + REVERSE_CURRENCY_SEO_PATHS.length,
@@ -73,9 +74,9 @@ const STATS = [
     label: '幣別落地頁',
     sub: '正向 + 反向匯率頁',
     icon: Link2,
-    color: 'text-emerald-600',
-    bg: 'bg-emerald-50',
-    border: 'border-emerald-200',
+    color: 'text-success',
+    bg: 'bg-success/10',
+    border: 'border-success/20',
   },
   {
     value: SEO_SCHEMA_REGISTRY.filter((schema) => schema.enabled).length,
@@ -83,9 +84,9 @@ const STATS = [
     label: 'JSON-LD Schema',
     sub: '結構化資料類型',
     icon: FileJson,
-    color: 'text-orange-600',
-    bg: 'bg-orange-50',
-    border: 'border-orange-200',
+    color: 'text-warning',
+    bg: 'bg-warning/10',
+    border: 'border-warning/20',
   },
 ] as const;
 
@@ -97,32 +98,32 @@ const PIPELINE_STEPS = [
     label: '臺灣銀行',
     sub: '官方牌告匯率來源',
     note: '現金 / 即期 四種報價',
-    color: 'text-red-600',
-    bg: 'bg-red-50',
+    color: 'text-destructive',
+    bg: 'bg-destructive/10',
   },
   {
     icon: RefreshCw,
     label: 'GitHub Actions',
     sub: '自動化抓取排程',
     note: '每 5 分鐘同步一次',
-    color: 'text-purple-600',
-    bg: 'bg-purple-50',
+    color: 'text-primary',
+    bg: 'bg-primary/10',
   },
   {
     icon: Zap,
     label: 'jsDelivr CDN',
     sub: '全球 PoP 加速分發',
     note: '無請求限制 · ETag 支援',
-    color: 'text-yellow-600',
-    bg: 'bg-yellow-50',
+    color: 'text-warning',
+    bg: 'bg-warning/10',
   },
   {
     icon: Globe,
     label: `${APP_INFO.shortName} App`,
     sub: 'SSG 預渲染 + PWA',
     note: '可離線使用 · 即時更新',
-    color: 'text-emerald-600',
-    bg: 'bg-emerald-50',
+    color: 'text-success',
+    bg: 'bg-success/10',
   },
 ] as const;
 
@@ -145,10 +146,10 @@ const MACHINE_READABLE_FILES = [
   },
   {
     name: 'llms.txt',
-    desc: 'AI 友善的純文字索引，供 LLM 爬蟲快速理解站點結構',
+    desc: '機器可讀的純文字索引，供爬蟲與 LLM 工具理解站點結構',
     url: `${SITE_CONFIG.url}llms.txt`,
     icon: Bot,
-    badge: 'AI-Ready',
+    badge: 'Readable',
   },
   {
     name: 'llms-full.txt',
@@ -183,9 +184,9 @@ const TECH_FEATURES = [
   },
   {
     icon: Search,
-    title: 'ETag 條件式請求',
-    desc: '匯率 API 支援 If-None-Match 標頭，相同資料回傳 304 Not Modified，省流量。',
-    tech: 'jsDelivr CDN',
+    title: '瀏覽器快取策略',
+    desc: '匯率資料以 HTTP cache 搭配 5 分鐘 client 快取控制重複請求，避免跨域預檢失敗。',
+    tech: 'jsDelivr CDN + localStorage TTL',
   },
   {
     icon: Globe,
@@ -226,22 +227,22 @@ const PATH_CATEGORIES = [
     label: '核心內容頁',
     count: CONTENT_SEO_PATHS.length,
     examples: ['/', '/faq/', '/about/', '/guide/', '/open-data/'],
-    color: 'bg-violet-100 text-violet-800',
-    bar: 'bg-violet-500',
+    color: 'border border-primary/20 bg-primary/10 text-text',
+    bar: 'bg-primary',
   },
   {
     label: '正向幣別頁（XXX→TWD）',
     count: CURRENCY_SEO_PATHS.length,
     examples: ['/usd-twd/', '/jpy-twd/', '/eur-twd/', '/hkd-twd/', '…'],
-    color: 'bg-blue-100 text-blue-800',
-    bar: 'bg-blue-500',
+    color: 'border border-warning/20 bg-warning/10 text-text',
+    bar: 'bg-warning',
   },
   {
     label: '反向幣別頁（TWD→XXX）',
     count: REVERSE_CURRENCY_SEO_PATHS.length,
     examples: ['/twd-usd/', '/twd-jpy/', '/twd-eur/', '/twd-hkd/', '…'],
-    color: 'bg-emerald-100 text-emerald-800',
-    bar: 'bg-emerald-500',
+    color: 'border border-success/20 bg-success/10 text-text',
+    bar: 'bg-success',
   },
 ] as const;
 
@@ -256,8 +257,8 @@ const EEAT_SIGNALS = [
       '技術透明：完整 SEO 技術揭露（本頁）',
     ],
     icon: Search,
-    color: 'text-blue-600',
-    bg: 'bg-blue-50',
+    color: 'text-primary',
+    bg: 'bg-primary/10',
   },
   {
     title: '權威性 (Authoritativeness)',
@@ -267,8 +268,8 @@ const EEAT_SIGNALS = [
       '機器可讀：sitemap.xml、robots.txt、llms.txt',
     ],
     icon: Shield,
-    color: 'text-purple-600',
-    bg: 'bg-purple-50',
+    color: 'text-primary',
+    bg: 'bg-primary/10',
   },
   {
     title: '可信度 (Trustworthiness)',
@@ -278,8 +279,8 @@ const EEAT_SIGNALS = [
       '透明營運：公開隱私政策、費用結構',
     ],
     icon: CheckCircle2,
-    color: 'text-green-600',
-    bg: 'bg-green-50',
+    color: 'text-success',
+    bg: 'bg-success/10',
   },
 ] as const;
 
@@ -298,7 +299,7 @@ export default function SeoTech() {
   const pageSeo = APP_ONLY_PAGE_SEO.seoTech;
 
   return (
-    <div className="min-h-screen bg-[rgb(var(--color-background))] text-[rgb(var(--color-text))]">
+    <div className="min-h-full bg-background text-text">
       <SEOHelmet
         title={pageSeo.title}
         description={pageSeo.description}
@@ -308,29 +309,19 @@ export default function SeoTech() {
         jsonLd={pageSeo.jsonLd}
       />
 
-      {/* ─── Hero ─────────────────────────────────────────────────────────── */}
-      <div className="relative overflow-hidden">
-        {/* 背景裝飾 */}
-        <div className="absolute inset-0 bg-gradient-to-br from-violet-600/8 via-transparent to-blue-600/8 pointer-events-none" />
-        <div className="absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 pointer-events-none" />
-        <div className="absolute bottom-0 left-0 w-64 h-64 bg-secondary/5 rounded-full blur-2xl translate-y-1/2 -translate-x-1/4 pointer-events-none" />
+      <div className={contentPageTokens.shell}>
+        <PageNavHeader
+          fallbackHref="/settings/"
+          breadcrumbItems={[
+            { label: '首頁', href: '/' },
+            { label: '設定', href: '/settings/' },
+            { label: 'SEO 技術揭露', href: '/seo-tech/' },
+          ]}
+        />
 
-        <div className="relative px-4 pt-6 pb-10">
-          {/* 返回按鈕 */}
-          <motion.div
-            initial={{ opacity: 0, x: -8 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={transitions.default}
-          >
-            <Link
-              to="/settings/"
-              className="inline-flex items-center gap-1.5 text-sm text-[rgb(var(--color-text-muted))] hover:text-[rgb(var(--color-text))] transition-colors mb-6"
-              aria-label="回到設定"
-            >
-              <ArrowLeft className="w-4 h-4" />
-              <span>設定</span>
-            </Link>
-          </motion.div>
+        {/* ─── Hero ─────────────────────────────────────────────────────────── */}
+        <div className="relative -mx-4 overflow-hidden rounded-card border border-border/70 bg-surface-elevated/60 px-4 pb-10 pt-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+          <div className="pointer-events-none absolute inset-0 bg-surface-elevated/60" />
 
           {/* 標題區 */}
           <motion.div
@@ -340,7 +331,7 @@ export default function SeoTech() {
             className="mb-8"
           >
             <div className="flex items-center gap-2 mb-2">
-              <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/10 text-primary text-xs font-semibold">
+              <span className={contentPageTokens.badges.subtle}>
                 <Search className="w-3 h-3" />
                 SEO 技術揭露
               </span>
@@ -348,7 +339,7 @@ export default function SeoTech() {
             <h1 className="text-2xl font-bold mb-2 tracking-tight">
               {APP_INFO.shortName} SEO 架構
             </h1>
-            <p className="text-sm text-[rgb(var(--color-text-muted))] leading-relaxed max-w-prose">
+            <p className="text-sm text-text-muted leading-relaxed max-w-prose">
               完整揭露 {APP_INFO.shortName} 所採用的所有搜尋引擎最佳化技術、資料架構與自動化流程。
               所有數字均從設定檔即時計算，永遠與實際部署狀態同步。
             </p>
@@ -368,464 +359,445 @@ export default function SeoTech() {
                   key={stat.label}
                   variants={staggerItemVariants}
                   transition={transitions.smooth}
-                  className={`rounded-2xl border p-4 ${stat.bg} ${stat.border}`}
+                  className={`rounded-card border p-4 ${stat.bg} ${stat.border}`}
                 >
                   <div
-                    className={`w-8 h-8 rounded-xl flex items-center justify-center mb-2 bg-white/70 ${stat.color}`}
+                    className={`mb-2 flex h-8 w-8 items-center justify-center rounded-icon bg-surface-elevated ${stat.color}`}
                   >
                     <Icon className="w-4 h-4" />
                   </div>
                   <div className="flex items-baseline gap-0.5 mb-0.5">
-                    <span className={`text-2xl font-bold tabular-nums ${stat.color}`}>
-                      {stat.value}
-                    </span>
-                    <span className={`text-sm font-medium ${stat.color}`}>{stat.unit}</span>
+                    <span className="text-2xl font-bold tabular-nums text-text">{stat.value}</span>
+                    <span className="text-sm font-medium text-text">{stat.unit}</span>
                   </div>
-                  <p className="text-xs font-semibold text-[rgb(var(--color-text))]">
-                    {stat.label}
-                  </p>
-                  <p className="text-xs text-[rgb(var(--color-text-muted))] mt-0.5">{stat.sub}</p>
+                  <p className="text-xs font-semibold text-text">{stat.label}</p>
+                  <p className="text-xs text-text mt-0.5">{stat.sub}</p>
                 </motion.div>
               );
             })}
           </motion.div>
         </div>
-      </div>
 
-      <div className="px-4 pb-16 space-y-8">
-        {/* ─── 資料管線 ─────────────────────────────────────────────────── */}
-        <motion.section
-          variants={fadeUp}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: '-40px' }}
-          transition={sectionTransition}
-        >
-          <SectionHeader icon={RefreshCw} title="資料管線" />
-          <div className="space-y-2">
-            {PIPELINE_STEPS.map((step, idx) => {
-              const Icon = step.icon;
-              return (
-                <motion.div
-                  key={step.label}
-                  initial={{ opacity: 0, x: -12 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ ...transitions.smooth, delay: idx * 0.07 }}
-                  className="flex items-center gap-3"
+        <div className="space-y-8 pb-16 pt-8">
+          {/* ─── 資料管線 ─────────────────────────────────────────────────── */}
+          <motion.section
+            variants={fadeUp}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-40px' }}
+            transition={sectionTransition}
+          >
+            <SectionHeader icon={RefreshCw} title="資料管線" />
+            <div className="space-y-2">
+              {PIPELINE_STEPS.map((step, idx) => {
+                const Icon = step.icon;
+                return (
+                  <motion.div
+                    key={step.label}
+                    initial={{ opacity: 0, x: -12 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ ...transitions.smooth, delay: idx * 0.07 }}
+                    className="flex items-center gap-3"
+                  >
+                    <div
+                      className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-icon ${step.bg}`}
+                    >
+                      <Icon className={`w-5 h-5 ${step.color}`} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-semibold">{step.label}</span>
+                        <span className="text-xs text-text truncate">{step.sub}</span>
+                      </div>
+                      <p className="text-xs text-text">{step.note}</p>
+                    </div>
+                    {idx < PIPELINE_STEPS.length - 1 && (
+                      <div className="flex-shrink-0 w-4 h-4 text-text-muted opacity-40">→</div>
+                    )}
+                  </motion.div>
+                );
+              })}
+            </div>
+            <div className={`mt-3 ${contentPageTokens.surfaces.quiet}`}>
+              <p className="text-xs text-text-muted leading-relaxed">
+                <span className="font-medium text-primary">CDN 端點：</span>{' '}
+                <a
+                  href={RATES_API.latestCdn}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex min-h-11 items-center rounded-panel font-mono text-xs break-all transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                 >
-                  <div
-                    className={`w-10 h-10 rounded-2xl flex items-center justify-center flex-shrink-0 ${step.bg}`}
+                  {RATES_API.latestCdn}
+                </a>
+              </p>
+            </div>
+          </motion.section>
+
+          {/* ─── SEO 路徑覆蓋 ─────────────────────────────────────────────── */}
+          <motion.section
+            variants={fadeUp}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-40px' }}
+            transition={sectionTransition}
+          >
+            <SectionHeader icon={Globe} title="SEO 路徑覆蓋" />
+            <div className="space-y-3">
+              {PATH_CATEGORIES.map((cat, idx) => {
+                const pct = Math.round((cat.count / SEO_PATHS.length) * 100);
+                return (
+                  <motion.div
+                    key={cat.label}
+                    initial={{ opacity: 0, y: 8 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ ...transitions.smooth, delay: idx * 0.08 }}
+                    className="rounded-card border border-border bg-surface p-4"
                   >
-                    <Icon className={`w-5 h-5 ${step.color}`} />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm font-semibold">{step.label}</span>
-                      <span className="text-xs text-[rgb(var(--color-text-muted))] truncate">
-                        {step.sub}
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm font-semibold">{cat.label}</span>
+                      <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${cat.color}`}>
+                        {cat.count} 頁
                       </span>
                     </div>
-                    <p className="text-xs text-[rgb(var(--color-text-muted))]">{step.note}</p>
-                  </div>
-                  {idx < PIPELINE_STEPS.length - 1 && (
-                    <div className="flex-shrink-0 w-4 h-4 text-[rgb(var(--color-text-muted))] opacity-40">
-                      →
+                    <div className="h-1.5 bg-border rounded-full mb-2 overflow-hidden">
+                      <motion.div
+                        className={`h-full rounded-full ${cat.bar}`}
+                        initial={{ width: 0 }}
+                        whileInView={{ width: `${pct}%` }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.6, ease: 'easeOut', delay: idx * 0.1 + 0.2 }}
+                      />
                     </div>
-                  )}
-                </motion.div>
-              );
-            })}
-          </div>
-          <div className="mt-3 p-3 rounded-xl bg-primary/5 border border-primary/10">
-            <p className="text-xs text-[rgb(var(--color-text-muted))] leading-relaxed">
-              <span className="font-medium text-primary">CDN 端點：</span>{' '}
-              <a
-                href={RATES_API.latestCdn}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="font-mono text-xs break-all hover:text-primary transition-colors"
-              >
-                {RATES_API.latestCdn}
-              </a>
+                    <div className="flex flex-wrap gap-1">
+                      {cat.examples.map((path) => (
+                        <span
+                          key={path}
+                          className="font-mono text-xs bg-surface-elevated px-1.5 py-0.5 rounded-panel text-text-muted"
+                        >
+                          {path}
+                        </span>
+                      ))}
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </div>
+            <p className="text-xs text-text-muted mt-2 pl-1">
+              合計 {SEO_PATHS.length} 個可索引路徑，全部收錄於 sitemap.xml
             </p>
-          </div>
-        </motion.section>
-
-        {/* ─── SEO 路徑覆蓋 ─────────────────────────────────────────────── */}
-        <motion.section
-          variants={fadeUp}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: '-40px' }}
-          transition={sectionTransition}
-        >
-          <SectionHeader icon={Globe} title="SEO 路徑覆蓋" />
-          <div className="space-y-3">
-            {PATH_CATEGORIES.map((cat, idx) => {
-              const pct = Math.round((cat.count / SEO_PATHS.length) * 100);
-              return (
-                <motion.div
-                  key={cat.label}
-                  initial={{ opacity: 0, y: 8 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ ...transitions.smooth, delay: idx * 0.08 }}
-                  className="rounded-2xl border border-[rgb(var(--color-border))] bg-[rgb(var(--color-surface))] p-4"
-                >
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm font-semibold">{cat.label}</span>
-                    <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${cat.color}`}>
-                      {cat.count} 頁
-                    </span>
-                  </div>
-                  <div className="h-1.5 bg-[rgb(var(--color-border))] rounded-full mb-2 overflow-hidden">
-                    <motion.div
-                      className={`h-full rounded-full ${cat.bar}`}
-                      initial={{ width: 0 }}
-                      whileInView={{ width: `${pct}%` }}
-                      viewport={{ once: true }}
-                      transition={{ duration: 0.6, ease: 'easeOut', delay: idx * 0.1 + 0.2 }}
-                    />
-                  </div>
-                  <div className="flex flex-wrap gap-1">
-                    {cat.examples.map((path) => (
-                      <span
-                        key={path}
-                        className="font-mono text-xs bg-[rgb(var(--color-background))] px-1.5 py-0.5 rounded-lg text-[rgb(var(--color-text-muted))]"
-                      >
-                        {path}
-                      </span>
-                    ))}
-                  </div>
-                </motion.div>
-              );
-            })}
-          </div>
-          <p className="text-xs text-[rgb(var(--color-text-muted))] mt-2 pl-1">
-            合計 {SEO_PATHS.length} 個可索引路徑，全部收錄於 sitemap.xml
-          </p>
-        </motion.section>
-
-        {/* ─── JSON-LD Schema ─────────────────────────────────────────────── */}
-        <motion.section
-          variants={fadeUp}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: '-40px' }}
-          transition={sectionTransition}
-        >
-          <SectionHeader icon={FileJson} title="JSON-LD 結構化資料" />
-          <motion.div
-            variants={staggerContainerVariants}
+          </motion.section>
+
+          {/* ─── JSON-LD Schema ─────────────────────────────────────────────── */}
+          <motion.section
+            variants={fadeUp}
             initial="hidden"
             whileInView="visible"
-            viewport={{ once: true }}
-            className="grid grid-cols-1 gap-2"
+            viewport={{ once: true, margin: '-40px' }}
+            transition={sectionTransition}
           >
-            {SEO_SCHEMA_REGISTRY.filter((schema) => schema.enabled).map((schema) => {
-              const Icon = schema.icon;
-              return (
-                <motion.div
-                  key={schema.type}
-                  variants={staggerItemVariants}
-                  transition={transitions.smooth}
-                  className="flex items-start gap-3 p-3 rounded-2xl border border-[rgb(var(--color-border))] bg-[rgb(var(--color-surface))]"
-                >
-                  <div className="w-8 h-8 rounded-xl bg-orange-50 flex items-center justify-center flex-shrink-0 mt-0.5">
-                    <Icon className="w-4 h-4 text-orange-600" />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <code className="text-xs font-mono font-bold text-orange-700 bg-orange-50 px-1.5 py-0.5 rounded-lg">
-                        {schema.type}
-                      </code>
-                      <span className="text-xs text-[rgb(var(--color-text-muted))]">
-                        {schema.pages}
-                      </span>
+            <SectionHeader icon={FileJson} title="JSON-LD 結構化資料" />
+            <motion.div
+              variants={staggerContainerVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              className="grid grid-cols-1 gap-2"
+            >
+              {SEO_SCHEMA_REGISTRY.filter((schema) => schema.enabled).map((schema) => {
+                const Icon = schema.icon;
+                return (
+                  <motion.div
+                    key={schema.type}
+                    variants={staggerItemVariants}
+                    transition={transitions.smooth}
+                    className="flex items-start gap-3 rounded-card border border-border bg-surface p-3"
+                  >
+                    <div className="mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-icon bg-warning/10">
+                      <Icon className="w-4 h-4 text-warning" />
                     </div>
-                    <p className="text-xs text-[rgb(var(--color-text-muted))] mt-1 leading-relaxed">
-                      {schema.desc}
-                    </p>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-        </motion.section>
-
-        {/* ─── 機器可讀檔案 ───────────────────────────────────────────────── */}
-        <motion.section
-          variants={fadeUp}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: '-40px' }}
-          transition={sectionTransition}
-        >
-          <SectionHeader icon={FileText} title="機器可讀檔案" />
-          <div className="space-y-2">
-            {MACHINE_READABLE_FILES.map((file, idx) => {
-              const Icon = file.icon;
-              return (
-                <motion.a
-                  key={file.name}
-                  href={file.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  initial={{ opacity: 0, y: 8 }}
-                  whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ ...transitions.smooth, delay: idx * 0.06 }}
-                  whileHover={{ scale: 1.01 }}
-                  whileTap={{ scale: 0.99 }}
-                  className="flex items-center gap-3 p-3.5 rounded-2xl border border-[rgb(var(--color-border))] bg-[rgb(var(--color-surface))] group cursor-pointer"
-                >
-                  <div className="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center flex-shrink-0">
-                    <Icon className="w-4.5 h-4.5 text-blue-600 w-[18px] h-[18px]" />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <code className="text-xs font-mono font-bold">{file.name}</code>
-                      <span className="text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded-full font-medium">
-                        {file.badge}
-                      </span>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <code className="text-xs font-mono font-bold text-text bg-warning/10 border border-warning/20 px-1.5 py-0.5 rounded-panel">
+                          {schema.type}
+                        </code>
+                        <span className="text-xs text-text-muted">{schema.pages}</span>
+                      </div>
+                      <p className="text-xs text-text-muted mt-1 leading-relaxed">{schema.desc}</p>
                     </div>
-                    <p className="text-xs text-[rgb(var(--color-text-muted))] mt-0.5 leading-relaxed line-clamp-2">
-                      {file.desc}
-                    </p>
-                  </div>
-                  <ExternalLink className="w-3.5 h-3.5 text-[rgb(var(--color-text-muted))] opacity-0 group-hover:opacity-60 transition-opacity flex-shrink-0" />
-                </motion.a>
-              );
-            })}
-          </div>
-        </motion.section>
-
-        {/* ─── 技術特性 ───────────────────────────────────────────────────── */}
-        <motion.section
-          variants={fadeUp}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: '-40px' }}
-          transition={sectionTransition}
-        >
-          <SectionHeader icon={Zap} title="核心技術特性" />
-          <motion.div
-            variants={staggerContainerVariants}
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+          </motion.section>
+
+          {/* ─── 機器可讀檔案 ───────────────────────────────────────────────── */}
+          <motion.section
+            variants={fadeUp}
             initial="hidden"
             whileInView="visible"
-            viewport={{ once: true }}
-            className="grid grid-cols-1 gap-3"
+            viewport={{ once: true, margin: '-40px' }}
+            transition={sectionTransition}
           >
-            {TECH_FEATURES.map((feat) => {
-              const Icon = feat.icon;
-              return (
-                <motion.div
-                  key={feat.title}
-                  variants={staggerItemVariants}
-                  transition={transitions.smooth}
-                  className="p-4 rounded-2xl border border-[rgb(var(--color-border))] bg-[rgb(var(--color-surface))]"
-                >
-                  <div className="flex items-start gap-3">
-                    <div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
-                      <Icon className="w-4 h-4 text-primary" />
+            <SectionHeader icon={FileText} title="機器可讀檔案" />
+            <div className="space-y-2">
+              {MACHINE_READABLE_FILES.map((file, idx) => {
+                const Icon = file.icon;
+                return (
+                  <motion.a
+                    key={file.name}
+                    href={file.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    initial={{ opacity: 0, y: 8 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ ...transitions.smooth, delay: idx * 0.06 }}
+                    whileHover={{ scale: 1.01 }}
+                    whileTap={{ scale: 0.99 }}
+                    className="group flex cursor-pointer items-center gap-3 rounded-card border border-border bg-surface p-3.5"
+                  >
+                    <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-icon bg-primary/10">
+                      <Icon className="w-[18px] h-[18px] text-primary" />
                     </div>
-                    <div className="flex-1">
-                      <div className="flex items-center gap-2 mb-1 flex-wrap">
-                        <h3 className="text-sm font-semibold">{feat.title}</h3>
-                        <span className="text-xs bg-[rgb(var(--color-background))] border border-[rgb(var(--color-border))] px-1.5 py-0.5 rounded-lg text-[rgb(var(--color-text-muted))] font-mono">
-                          {feat.tech}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <code className="text-xs font-mono font-bold">{file.name}</code>
+                        <span className="text-xs border border-primary/20 bg-primary/10 text-text px-1.5 py-0.5 rounded-full font-medium">
+                          {file.badge}
                         </span>
                       </div>
-                      <p className="text-xs text-[rgb(var(--color-text-muted))] leading-relaxed">
-                        {feat.desc}
+                      <p className="text-xs text-text mt-0.5 leading-relaxed line-clamp-2">
+                        {file.desc}
                       </p>
                     </div>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-        </motion.section>
-
-        {/* ─── E-E-A-T 信號（2026）─────────────────────────────────────── */}
-        <motion.section
-          variants={fadeUp}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: '-40px' }}
-          transition={sectionTransition}
-        >
-          <SectionHeader icon={Shield} title="E-E-A-T 信號強化（2026）" />
-          <motion.div
-            variants={staggerContainerVariants}
+                    <ExternalLink className="w-3.5 h-3.5 text-text-muted opacity-0 group-hover:opacity-60 transition-opacity flex-shrink-0" />
+                  </motion.a>
+                );
+              })}
+            </div>
+          </motion.section>
+
+          {/* ─── 技術特性 ───────────────────────────────────────────────────── */}
+          <motion.section
+            variants={fadeUp}
             initial="hidden"
             whileInView="visible"
-            viewport={{ once: true }}
-            className="grid grid-cols-1 md:grid-cols-3 gap-3"
+            viewport={{ once: true, margin: '-40px' }}
+            transition={sectionTransition}
           >
-            {EEAT_SIGNALS.map((signal) => {
-              const Icon = signal.icon;
-              return (
-                <motion.div
-                  key={signal.title}
-                  variants={staggerItemVariants}
-                  transition={transitions.smooth}
-                  className={`p-4 rounded-2xl border border-[rgb(var(--color-border))] ${signal.bg}`}
+            <SectionHeader icon={Zap} title="核心技術特性" />
+            <motion.div
+              variants={staggerContainerVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              className="grid grid-cols-1 gap-3"
+            >
+              {TECH_FEATURES.map((feat) => {
+                const Icon = feat.icon;
+                return (
+                  <motion.div
+                    key={feat.title}
+                    variants={staggerItemVariants}
+                    transition={transitions.smooth}
+                    className="rounded-card border border-border bg-surface p-4"
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className="mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-icon bg-primary/10">
+                        <Icon className="w-4 h-4 text-primary" />
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1 flex-wrap">
+                          <h3 className="text-sm font-semibold">{feat.title}</h3>
+                          <span className="text-xs bg-surface-elevated border border-border px-1.5 py-0.5 rounded-panel text-text font-mono">
+                            {feat.tech}
+                          </span>
+                        </div>
+                        <p className="text-xs text-text leading-relaxed">{feat.desc}</p>
+                      </div>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+          </motion.section>
+
+          {/* ─── E-E-A-T 信號（2026）─────────────────────────────────────── */}
+          <motion.section
+            variants={fadeUp}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-40px' }}
+            transition={sectionTransition}
+          >
+            <SectionHeader icon={Shield} title="E-E-A-T 信號強化（2026）" />
+            <motion.div
+              variants={staggerContainerVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              className="grid grid-cols-1 md:grid-cols-3 gap-3"
+            >
+              {EEAT_SIGNALS.map((signal) => {
+                const Icon = signal.icon;
+                return (
+                  <motion.div
+                    key={signal.title}
+                    variants={staggerItemVariants}
+                    transition={transitions.smooth}
+                    className={`rounded-card border border-border p-4 ${signal.bg}`}
+                  >
+                    <div className="flex items-center gap-2 mb-3">
+                      <Icon className={`w-5 h-5 ${signal.color}`} />
+                      <h3 className="text-sm font-semibold">{signal.title}</h3>
+                    </div>
+                    <ul className="space-y-2">
+                      {signal.items.map((item, idx) => (
+                        <li key={idx} className="text-xs text-text flex gap-2">
+                          <span className="flex-shrink-0">•</span>
+                          <span>{item}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+            <p className="text-xs text-text-muted mt-3 pl-1">
+              Google 搜尋品質評估指南強調 E-E-A-T（專業性、權威性、可信度）為
+              YMYL（您的錢或生活）內容評分的關鍵。{APP_INFO.shortName}{' '}
+              透過透明化揭露、官方資料來源與隱私優先設計強化信號。
+            </p>
+          </motion.section>
+
+          {/* ─── 建置腳本 ───────────────────────────────────────────────────── */}
+          <motion.section
+            variants={fadeUp}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-40px' }}
+            transition={sectionTransition}
+          >
+            <SectionHeader icon={Code2} title="Prebuild 自動化腳本" />
+            <p className="text-xs text-text-muted mb-3 leading-relaxed">
+              每次建置前依序執行 SEO / machine-readable 產線，產生所有必要靜態檔案並串上驗證 gate。
+            </p>
+            <div className="overflow-hidden rounded-panel border border-border">
+              {SEO_BUILD_PIPELINE.map((script, idx) => (
+                <div
+                  key={script.name}
+                  className={`flex items-center gap-3 px-4 py-3 ${
+                    idx < SEO_BUILD_PIPELINE.length - 1 ? 'border-b border-border' : ''
+                  }`}
                 >
-                  <div className="flex items-center gap-2 mb-3">
-                    <Icon className={`w-5 h-5 ${signal.color}`} />
-                    <h3 className="text-sm font-semibold">{signal.title}</h3>
+                  <span className="text-xs font-mono text-primary/60 w-4 text-right flex-shrink-0">
+                    {idx + 1}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <code className="text-xs font-mono text-text block truncate">
+                      {script.name}
+                    </code>
+                    <p className="text-xs text-text-muted">{script.desc}</p>
                   </div>
-                  <ul className="space-y-2">
-                    {signal.items.map((item, idx) => (
-                      <li
-                        key={idx}
-                        className="text-xs text-[rgb(var(--color-text-muted))] flex gap-2"
-                      >
-                        <span className="flex-shrink-0">•</span>
-                        <span>{item}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-          <p className="text-xs text-[rgb(var(--color-text-muted))] mt-3 pl-1">
-            Google 搜尋品質評估指南強調 E-E-A-T（專業性、權威性、可信度）為
-            YMYL（您的錢或生活）內容評分的關鍵。{APP_INFO.shortName}{' '}
-            透過透明化揭露、官方資料來源與隱私優先設計強化信號。
-          </p>
-        </motion.section>
-
-        {/* ─── 建置腳本 ───────────────────────────────────────────────────── */}
-        <motion.section
-          variants={fadeUp}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: '-40px' }}
-          transition={sectionTransition}
-        >
-          <SectionHeader icon={Code2} title="Prebuild 自動化腳本" />
-          <p className="text-xs text-[rgb(var(--color-text-muted))] mb-3 leading-relaxed">
-            每次建置前依序執行 SEO / machine-readable 產線，產生所有必要靜態檔案並串上驗證 gate。
-          </p>
-          <div className="rounded-2xl border border-[rgb(var(--color-border))] overflow-hidden">
-            {SEO_BUILD_PIPELINE.map((script, idx) => (
-              <div
-                key={script.name}
-                className={`flex items-center gap-3 px-4 py-3 ${
-                  idx < SEO_BUILD_PIPELINE.length - 1
-                    ? 'border-b border-[rgb(var(--color-border))]'
-                    : ''
-                }`}
-              >
-                <span className="text-xs font-mono text-primary/60 w-4 text-right flex-shrink-0">
-                  {idx + 1}
-                </span>
-                <div className="flex-1 min-w-0">
-                  <code className="text-xs font-mono text-[rgb(var(--color-text))] block truncate">
-                    {script.name}
+                  <code className="text-xs font-mono text-success flex-shrink-0 hidden sm:block">
+                    {script.output}
                   </code>
-                  <p className="text-xs text-[rgb(var(--color-text-muted))]">{script.desc}</p>
                 </div>
-                <code className="text-xs font-mono text-emerald-600 flex-shrink-0 hidden sm:block">
-                  {script.output}
-                </code>
-              </div>
-            ))}
-          </div>
-        </motion.section>
-
-        {/* ─── 狀態機架構 ─────────────────────────────────────────────────── */}
-        <motion.section
-          variants={fadeUp}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: '-40px' }}
-          transition={sectionTransition}
-        >
-          <SectionHeader icon={Layers} title="SEO 狀態機架構" />
-          <div className="rounded-2xl border border-[rgb(var(--color-border))] bg-[rgb(var(--color-surface))] p-4 space-y-4">
-            {/* SSOT 層 */}
-            <ArchLayer
-              label="SSOT 層"
-              color="bg-violet-500"
-              items={['seo-paths.ts', 'seo-metadata.ts', 'api-endpoints.ts', 'app-info.ts']}
-              desc="所有 SEO 資料的單一真相來源"
-            />
-            {/* Arrow */}
-            <div className="flex items-center gap-2 px-2">
-              <div className="flex-1 h-px bg-[rgb(var(--color-border))]" />
-              <span className="text-xs text-[rgb(var(--color-text-muted))]">生成</span>
-              <div className="flex-1 h-px bg-[rgb(var(--color-border))]" />
+              ))}
             </div>
-            {/* 建置層 */}
-            <ArchLayer
-              label="Prebuild 層"
-              color="bg-blue-500"
-              items={['sitemap.xml', 'robots.txt', 'llms.txt', 'openapi.json']}
-              desc="建置期自動生成靜態 SEO 檔案"
-            />
-            <div className="flex items-center gap-2 px-2">
-              <div className="flex-1 h-px bg-[rgb(var(--color-border))]" />
-              <span className="text-xs text-[rgb(var(--color-text-muted))]">渲染</span>
-              <div className="flex-1 h-px bg-[rgb(var(--color-border))]" />
+          </motion.section>
+
+          {/* ─── 狀態機架構 ─────────────────────────────────────────────────── */}
+          <motion.section
+            variants={fadeUp}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-40px' }}
+            transition={sectionTransition}
+          >
+            <SectionHeader icon={Layers} title="SEO 狀態機架構" />
+            <div className="space-y-4 rounded-card border border-border bg-surface p-4">
+              {/* SSOT 層 */}
+              <ArchLayer
+                label="SSOT 層"
+                color="bg-primary"
+                items={['seo-paths.ts', 'seo-metadata.ts', 'api-endpoints.ts', 'app-info.ts']}
+                desc="所有 SEO 資料的單一真相來源"
+              />
+              {/* Arrow */}
+              <div className="flex items-center gap-2 px-2">
+                <div className="flex-1 h-px bg-border" />
+                <span className="text-xs text-text-muted">生成</span>
+                <div className="flex-1 h-px bg-border" />
+              </div>
+              {/* 建置層 */}
+              <ArchLayer
+                label="Prebuild 層"
+                color="bg-warning"
+                items={['sitemap.xml', 'robots.txt', 'llms.txt', 'openapi.json']}
+                desc="建置期自動生成靜態 SEO 檔案"
+              />
+              <div className="flex items-center gap-2 px-2">
+                <div className="flex-1 h-px bg-border" />
+                <span className="text-xs text-text-muted">渲染</span>
+                <div className="flex-1 h-px bg-border" />
+              </div>
+              {/* SSG 層 */}
+              <ArchLayer
+                label="SSG 層"
+                color="bg-success"
+                items={[
+                  `${SEO_PATHS.length} SEO 頁面`,
+                  `${PRERENDER_PATHS.length} 預渲染`,
+                  'JSON-LD',
+                  'meta tags',
+                ]}
+                desc="靜態 HTML + 結構化資料注入"
+              />
+              <div className="flex items-center gap-2 px-2">
+                <div className="flex-1 h-px bg-border" />
+                <span className="text-xs text-text-muted">部署</span>
+                <div className="flex-1 h-px bg-border" />
+              </div>
+              {/* 邊緣層 */}
+              <ArchLayer
+                label="邊緣層"
+                color="bg-destructive"
+                items={['Cloudflare CDN', 'Security Headers', 'Cache-Control', 'CSP']}
+                desc="Cloudflare Workers 注入安全標頭"
+              />
             </div>
-            {/* SSG 層 */}
-            <ArchLayer
-              label="SSG 層"
-              color="bg-emerald-500"
-              items={[
-                `${SEO_PATHS.length} SEO 頁面`,
-                `${PRERENDER_PATHS.length} 預渲染`,
-                'JSON-LD',
-                'meta tags',
-              ]}
-              desc="靜態 HTML + 結構化資料注入"
-            />
-            <div className="flex items-center gap-2 px-2">
-              <div className="flex-1 h-px bg-[rgb(var(--color-border))]" />
-              <span className="text-xs text-[rgb(var(--color-text-muted))]">部署</span>
-              <div className="flex-1 h-px bg-[rgb(var(--color-border))]" />
+          </motion.section>
+
+          {/* ─── 相關資源 ───────────────────────────────────────────────────── */}
+          <motion.section
+            variants={fadeUp}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-40px' }}
+            transition={sectionTransition}
+          >
+            <SectionHeader icon={Link2} title="相關資源" />
+            <div className="space-y-2">
+              <ResourceLink href={APP_INFO.github} label="原始碼" sub="haotool/app" external />
+              <ResourceLink
+                href={`${SITE_CONFIG.url}openapi.json`}
+                label="OpenAPI 規格"
+                sub="openapi.json"
+                external
+              />
+              <ResourceLink
+                href={`${SITE_CONFIG.url}sitemap.xml`}
+                label="Sitemap"
+                sub="sitemap.xml"
+                external
+              />
+              <ResourceLink to="/open-data/" label="開放資料 API" sub="匯率資料開放 API 文件" />
             </div>
-            {/* 邊緣層 */}
-            <ArchLayer
-              label="邊緣層"
-              color="bg-orange-500"
-              items={['Cloudflare CDN', 'Security Headers', 'Cache-Control', 'CSP']}
-              desc="Cloudflare Workers 注入安全標頭"
-            />
-          </div>
-        </motion.section>
-
-        {/* ─── 相關資源 ───────────────────────────────────────────────────── */}
-        <motion.section
-          variants={fadeUp}
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: '-40px' }}
-          transition={sectionTransition}
-        >
-          <SectionHeader icon={Link2} title="相關資源" />
-          <div className="space-y-2">
-            <ResourceLink href={APP_INFO.github} label="原始碼" sub="haotool/app" external />
-            <ResourceLink
-              href={`${SITE_CONFIG.url}openapi.json`}
-              label="OpenAPI 規格"
-              sub="openapi.json"
-              external
-            />
-            <ResourceLink
-              href={`${SITE_CONFIG.url}sitemap.xml`}
-              label="Sitemap"
-              sub="sitemap.xml"
-              external
-            />
-            <ResourceLink to="/open-data/" label="開放資料 API" sub="匯率資料開放 API 文件" />
-          </div>
-        </motion.section>
+          </motion.section>
+        </div>
       </div>
     </div>
   );
@@ -842,7 +814,7 @@ function SectionHeader({
 }) {
   return (
     <div className="flex items-center gap-2 mb-3">
-      <div className="w-6 h-6 rounded-lg bg-primary/10 flex items-center justify-center">
+      <div className="w-6 h-6 rounded-icon bg-primary/10 flex items-center justify-center">
         <Icon className="w-3.5 h-3.5 text-primary" />
       </div>
       <h2 className="text-base font-bold">{title}</h2>
@@ -865,14 +837,14 @@ function ArchLayer({
     <div>
       <div className="flex items-center gap-2 mb-2">
         <div className={`w-2 h-2 rounded-full ${color}`} />
-        <span className="text-xs font-semibold text-[rgb(var(--color-text-muted))]">{label}</span>
-        <span className="text-xs text-[rgb(var(--color-text-muted))] opacity-60">— {desc}</span>
+        <span className="text-xs font-semibold text-text-muted">{label}</span>
+        <span className="text-xs text-text-muted opacity-60">— {desc}</span>
       </div>
       <div className="flex flex-wrap gap-1.5 pl-4">
         {items.map((item) => (
           <span
             key={item}
-            className="font-mono text-xs bg-[rgb(var(--color-background))] border border-[rgb(var(--color-border))] px-2 py-0.5 rounded-lg"
+            className="font-mono text-xs bg-surface-elevated border border-border px-2 py-0.5 rounded-panel"
           >
             {item}
           </span>
@@ -895,20 +867,19 @@ function ResourceLink({
   sub: string;
   external?: boolean;
 }) {
-  const cls =
-    'flex items-center justify-between px-4 py-3 rounded-2xl border border-[rgb(var(--color-border))] bg-[rgb(var(--color-surface))] group hover:bg-primary/5 transition-colors';
+  const cls = contentPageTokens.links.row;
 
   const content = (
     <>
       <div>
         <p className="text-sm font-medium">{label}</p>
-        <p className="text-xs text-[rgb(var(--color-text-muted))]">{sub}</p>
+        <p className="text-xs text-text-muted">{sub}</p>
       </div>
       {external ? (
-        <ExternalLink className="w-4 h-4 text-[rgb(var(--color-text-muted))] opacity-40 group-hover:opacity-100 transition-opacity" />
+        <ExternalLink className="w-4 h-4 text-text-muted opacity-40 group-hover:opacity-100 transition-opacity" />
       ) : (
         <svg
-          className="w-4 h-4 text-[rgb(var(--color-text-muted))] opacity-40 group-hover:opacity-100 transition-opacity"
+          className="w-4 h-4 text-text-muted opacity-40 group-hover:opacity-100 transition-opacity"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
diff --git a/apps/ratewise/src/pages/Settings.tsx b/apps/ratewise/src/pages/Settings.tsx
index dd6fdab3a..b6f466a71 100644
--- a/apps/ratewise/src/pages/Settings.tsx
+++ b/apps/ratewise/src/pages/Settings.tsx
@@ -1,24 +1,3 @@
-/**
- * Settings Page - ParkKeeper 風格設定頁面
- *
- * @description 應用程式設定頁面，支援 6 種風格切換
- *              採用 ParkKeeper 設計風格（圓潤卡片、風格預覽）
- *              SSOT: 風格定義來自 themes.ts
- *
- * 風格選項：
- * - Zen - 極簡專業（預設）
- * - Nitro - 深色科技感
- * - Kawaii - 可愛粉嫩
- * - Classic - 復古書卷
- * - Ocean - 海洋深邃
- * - Forest - 自然森林
- *
- * @reference ParkKeeper UI Design, themes.ts SSOT
- * @created 2026-01-15
- * @updated 2026-01-17 - 移除深色模式功能，簡化為僅風格切換
- * @version 4.0.0
- */
-
 import {
   Palette,
   Globe,
@@ -45,6 +24,7 @@ import { getDisplayVersion } from '../config/version';
 import { transitions, segmentedSwitch } from '../config/animations';
 import { APP_INFO } from '../config/app-info';
 import { APP_ONLY_PAGE_SEO } from '../config/seo-metadata';
+import { appPageTokens } from '../config/design-tokens';
 import type { RateMode } from '../features/ratewise/types';
 import { useConverterStore } from '../stores/converterStore';
 
@@ -80,8 +60,6 @@ export default function Settings() {
     },
   ];
 
-  // 使用正規化後的語系（zh-Hant → zh-TW）
-  // @see i18n/index.ts - getResolvedLanguage()
   const currentLanguage = getResolvedLanguage();
 
   const handleLanguageChange = (lang: SupportedLanguage) => {
@@ -97,29 +75,28 @@ export default function Settings() {
         robots={pageSeo.robots}
       />
       <h1 className="sr-only">{pageSeo.title}</h1>
-      <div className="px-3 sm:px-5 py-6 max-w-md mx-auto">
+      <div className={appPageTokens.narrowShell}>
         {/* 介面風格區塊 */}
         <section className="mb-8">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-            <Palette className="w-3.5 h-3.5" />
-            <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">
-              {t('settings.interfaceStyle')}
-            </h2>
+          <div className={appPageTokens.section.headerRow}>
+            <Palette className="h-3.5 w-3.5" />
+            <h2 className={appPageTokens.section.headerText}>{t('settings.interfaceStyle')}</h2>
           </div>
 
           <div className="grid grid-cols-2 gap-3">
             {STYLE_OPTIONS.map((option) => (
               <motion.button
                 key={option.value}
+                type="button"
                 onClick={() => setStyle(option.value)}
                 disabled={!isLoaded}
                 whileHover={segmentedSwitch.item.whileHover}
                 whileTap={segmentedSwitch.item.whileTap}
                 transition={transitions.instant}
                 className={`
-                  relative p-3 h-20 flex flex-col justify-end overflow-hidden rounded-xl
-                  shadow-sm disabled:opacity-50
-                  ${style === option.value ? 'ring-2 ring-offset-2 shadow-md' : ''}
+                  relative p-3 h-20 flex flex-col justify-end overflow-hidden rounded-control
+                  shadow-soft disabled:opacity-50
+                  ${style === option.value ? 'ring-2 ring-offset-2 shadow-soft' : ''}
                 `}
                 style={
                   {
@@ -132,15 +109,15 @@ export default function Settings() {
                 aria-pressed={style === option.value}
                 aria-label={`${t(`styles.${option.value}` as Parameters<typeof t>[0])} ${t(`styles.${option.value}Desc` as Parameters<typeof t>[0])}`}
               >
-                {/* 裝飾圓形 */}
                 <motion.div
                   className="absolute top-0 right-0 w-16 h-16 opacity-15 -mr-4 -mt-4 rounded-full"
                   style={{ backgroundColor: option.previewAccent }}
-                  animate={{ scale: style === option.value ? segmentedSwitch.activeIconScale : 1 }}
+                  animate={{
+                    scale: style === option.value ? segmentedSwitch.activeIconScale : 1,
+                  }}
                   transition={transitions.spring}
                 />
 
-                {/* 選中指示器 */}
                 {style === option.value && (
                   <motion.div
                     initial={{ scale: 0 }}
@@ -149,16 +126,15 @@ export default function Settings() {
                     className="absolute top-2 right-2 rounded-full p-0.5"
                     style={{ backgroundColor: option.previewAccent }}
                   >
-                    <Check className="w-3 h-3 text-white" />
+                    <Check className="w-3 h-3 text-primary-foreground" />
                   </motion.div>
                 )}
 
-                {/* 內容 */}
                 <div className="flex flex-col items-start w-full relative z-10">
                   <span className="font-bold text-sm leading-tight">
                     {t(`styles.${option.value}` as Parameters<typeof t>[0])}
                   </span>
-                  <span className="text-[10px] opacity-60 leading-tight">
+                  <span className="text-xs font-medium leading-tight">
                     {t(`styles.${option.value}Desc` as Parameters<typeof t>[0])}
                   </span>
                 </div>
@@ -167,13 +143,11 @@ export default function Settings() {
           </div>
         </section>
 
-        {/* 語言區塊 - SSOT 風格 */}
-        <section className="mb-6">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-            <Globe className="w-3.5 h-3.5" />
-            <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">
-              {t('settings.language')}
-            </h2>
+        {/* 語言區塊 */}
+        <section className={appPageTokens.section.wrapper}>
+          <div className={appPageTokens.section.headerRow}>
+            <Globe className="h-3.5 w-3.5" />
+            <h2 className={appPageTokens.section.headerText}>{t('settings.language')}</h2>
           </div>
 
           <div className={segmentedSwitch.containerClass}>
@@ -182,6 +156,7 @@ export default function Settings() {
               return (
                 <motion.button
                   key={option.value}
+                  type="button"
                   onClick={() => handleLanguageChange(option.value)}
                   whileHover={{ ...segmentedSwitch.item.whileHover, opacity: 1 }}
                   whileTap={segmentedSwitch.item.whileTap}
@@ -191,7 +166,6 @@ export default function Settings() {
                   aria-pressed={isActive}
                   aria-label={option.label}
                 >
-                  {/* 滑動背景指示器 - SSOT layoutId 動畫 */}
                   {isActive && (
                     <motion.div
                       layoutId="language-indicator"
@@ -202,12 +176,12 @@ export default function Settings() {
                   <motion.span
                     animate={{ scale: isActive ? segmentedSwitch.activeIconScale : 1 }}
                     transition={transitions.default}
-                    className="text-xl mb-1 filter drop-shadow-sm"
+                    className="text-xl mb-1 filter drop-shadow-soft"
                     aria-hidden="true"
                   >
                     {option.flag}
                   </motion.span>
-                  <span className="text-[10px] font-bold">{option.label}</span>
+                  <span className="text-xs font-bold">{option.label}</span>
                 </motion.button>
               );
             })}
@@ -215,12 +189,10 @@ export default function Settings() {
         </section>
 
         {/* 匯率模式區塊 */}
-        <section className="mb-6">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-            <TrendingUp className="w-3.5 h-3.5" />
-            <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">
-              {t('settings.rateMode')}
-            </h2>
+        <section className={appPageTokens.section.wrapper}>
+          <div className={appPageTokens.section.headerRow}>
+            <TrendingUp className="h-3.5 w-3.5" />
+            <h2 className={appPageTokens.section.headerText}>{t('settings.rateMode')}</h2>
           </div>
 
           <div className={segmentedSwitch.containerClass}>
@@ -229,6 +201,7 @@ export default function Settings() {
               return (
                 <motion.button
                   key={option.value}
+                  type="button"
                   onClick={() => setRateMode(option.value)}
                   whileHover={{ ...segmentedSwitch.item.whileHover, opacity: 1 }}
                   whileTap={segmentedSwitch.item.whileTap}
@@ -254,7 +227,7 @@ export default function Settings() {
                       strokeWidth={isActive ? 2.5 : 1.8}
                     />
                   </motion.span>
-                  <span className="text-[10px] font-bold relative z-10">
+                  <span className="relative z-10 text-xs font-bold">
                     {t(option.labelKey as Parameters<typeof t>[0])}
                   </span>
                 </motion.button>
@@ -262,10 +235,9 @@ export default function Settings() {
             })}
           </div>
 
-          {/* 說明文字 */}
-          <p className="text-[10px] opacity-50 mt-2 px-1 leading-relaxed">
+          <p className="mt-3 px-1 text-xs leading-relaxed font-medium text-center text-text-muted">
             {t(
-              RATE_MODE_OPTIONS.find((o) => o.value === rateMode)?.descKey as Parameters<
+              RATE_MODE_OPTIONS.find((option) => option.value === rateMode)?.descKey as Parameters<
                 typeof t
               >[0],
             )}
@@ -273,15 +245,13 @@ export default function Settings() {
         </section>
 
         {/* 儲存與快取區塊 */}
-        <section className="mb-6">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-            <Database className="w-3.5 h-3.5" />
-            <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">
-              {t('settings.storageCache')}
-            </h2>
+        <section className={appPageTokens.section.wrapper}>
+          <div className={appPageTokens.section.headerRow}>
+            <Database className="h-3.5 w-3.5" />
+            <h2 className={appPageTokens.section.headerText}>{t('settings.storageCache')}</h2>
           </div>
 
-          <div className="card p-5">
+          <div className={appPageTokens.infoCard}>
             <div className="flex justify-between items-center mb-4">
               <span className="text-xs font-bold opacity-60 uppercase tracking-wider">
                 {t('settings.dataSource')}
@@ -294,23 +264,22 @@ export default function Settings() {
               </span>
               <span className="text-lg font-black">{t('settings.fiveMinutes')}</span>
             </div>
-            <p className="text-[10px] mt-2 opacity-40 font-medium text-center">
+            <p className="text-xs mt-2 font-medium text-center text-text-muted">
               {t('settings.updateNote')}
             </p>
           </div>
         </section>
 
         {/* 資料管理區塊 */}
-        <section className="mb-6">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-            <ShieldAlert className="w-3.5 h-3.5" />
-            <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">
-              {t('settings.dataManagement')}
-            </h2>
+        <section className={appPageTokens.section.wrapper}>
+          <div className={appPageTokens.section.headerRow}>
+            <ShieldAlert className="h-3.5 w-3.5" />
+            <h2 className={appPageTokens.section.headerText}>{t('settings.dataManagement')}</h2>
           </div>
 
-          <div className="card overflow-hidden">
+          <div className={appPageTokens.listCard}>
             <motion.button
+              type="button"
               onClick={resetTheme}
               disabled={!isLoaded}
               whileHover={segmentedSwitch.item.whileHover}
@@ -327,54 +296,34 @@ export default function Settings() {
         </section>
 
         {/* 支援與資訊區塊 */}
-        <section className="mb-6">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-            <HelpCircle className="w-3.5 h-3.5" />
-            <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">
-              {t('settings.supportInfo')}
-            </h2>
+        <section className={appPageTokens.section.wrapper}>
+          <div className={appPageTokens.section.headerRow}>
+            <HelpCircle className="h-3.5 w-3.5" />
+            <h2 className={appPageTokens.section.headerText}>{t('settings.supportInfo')}</h2>
           </div>
 
-          <div className="card overflow-hidden divide-y divide-border">
-            <Link
-              to="/faq/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
+          <div className={`${appPageTokens.listCard} divide-y divide-border/50`}>
+            <Link to="/faq/" className={appPageTokens.linkRow}>
               <span className="text-sm font-medium">{t('settings.faq')}</span>
               <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
             </Link>
-            <Link
-              to="/guide/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
+            <Link to="/guide/" className={appPageTokens.linkRow}>
               <span className="text-sm font-medium">{t('settings.usageGuide')}</span>
               <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
             </Link>
-            <Link
-              to="/about/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
+            <Link to="/about/" className={appPageTokens.linkRow}>
               <span className="text-sm font-medium">{t('settings.aboutUs')}</span>
               <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
             </Link>
-            <Link
-              to="/privacy/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
+            <Link to="/privacy/" className={appPageTokens.linkRow}>
               <span className="text-sm font-medium">{t('settings.privacyPolicy')}</span>
               <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
             </Link>
-            <Link
-              to="/open-data/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
+            <Link to="/open-data/" className={appPageTokens.linkRow}>
               <span className="text-sm font-medium">{t('settings.openDataApi')}</span>
               <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
             </Link>
-            <Link
-              to="/seo-tech/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
+            <Link to="/seo-tech/" className={appPageTokens.linkRow}>
               <span className="text-sm font-medium">{t('settings.seoTech')}</span>
               <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
             </Link>
@@ -382,7 +331,7 @@ export default function Settings() {
               href={APP_INFO.github}
               target="_blank"
               rel="noopener noreferrer"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
+              className={appPageTokens.linkRow}
             >
               <span className="text-sm font-medium">{t('settings.openSource')}</span>
               <ExternalLink className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
@@ -390,11 +339,31 @@ export default function Settings() {
           </div>
         </section>
 
-        {/* 版本資訊 */}
-        <footer className="text-center mt-8 pb-4">
-          <p className="text-[10px] opacity-40">{t('settings.copyright')}</p>
-          <p className="text-xs font-mono opacity-60 mt-1">{getDisplayVersion()}</p>
-        </footer>
+        {/* 關於區塊 */}
+        <section className={appPageTokens.section.wrapper}>
+          <div className={appPageTokens.infoCard}>
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between items-center">
+                <span className="opacity-60">{t('settings.appVersion')}</span>
+                <span className="font-bold font-mono">{getDisplayVersion()}</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="opacity-60">{t('settings.designSystem')}</span>
+                <span className="font-bold">{t('settings.sixStylesSST')}</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="opacity-60">{t('settings.techStack')}</span>
+                <span className="font-bold">{t('settings.reactTailwind')}</span>
+              </div>
+            </div>
+
+            <div className="mt-4 border-t border-border/50 pt-4">
+              <p className="text-xs text-center font-medium text-text-muted">
+                {t('settings.copyright')}
+              </p>
+            </div>
+          </div>
+        </section>
       </div>
     </div>
   );
diff --git a/apps/ratewise/src/pages/ThemeShowcase.tsx b/apps/ratewise/src/pages/ThemeShowcase.tsx
index dcc3a3767..2508d5069 100644
--- a/apps/ratewise/src/pages/ThemeShowcase.tsx
+++ b/apps/ratewise/src/pages/ThemeShowcase.tsx
@@ -1,23 +1,9 @@
-/**
- * Theme Showcase 頁面 - ParkKeeper 風格主題展示
- *
- * @description 展示新主題系統的所有風格和元件
- *
- * 展示內容：
- * - 6 種風格預覽（Zen/Nitro/Kawaii/Classic/Ocean/Forest）
- * - 設計語彙（圓角、陰影、間距）
- * - 元件庫預覽（按鈕、卡片、輸入框）
- *
- * @reference ParkKeeper UI Design
- * @created 2026-01-16
- * @updated 2026-01-17 - 移除深色模式，簡化為僅風格展示
- */
-
 import { Link } from 'react-router-dom';
 import { ArrowLeft, Check, Palette, Box, Type } from 'lucide-react';
 import { Head } from 'vite-react-ssg';
 import { useAppTheme } from '../hooks/useAppTheme';
 import { STYLE_OPTIONS } from '../config/themes';
+import { contentPageTokens } from '../config/design-tokens';
 
 export default function ThemeShowcase() {
   const { style, setStyle, isLoaded } = useAppTheme();
@@ -28,7 +14,6 @@ export default function ThemeShowcase() {
         <meta name="robots" content="noindex, nofollow" />
       </Head>
       <div className="px-5 py-6 max-w-2xl mx-auto">
-        {/* 返回按鈕 */}
         <Link
           to="/settings/"
           className="inline-flex items-center gap-2 text-sm font-medium opacity-60 hover:opacity-100 transition-opacity mb-6"
@@ -37,17 +22,15 @@ export default function ThemeShowcase() {
           返回設定
         </Link>
 
-        {/* 標題區 */}
         <div className="mb-8">
-          <h1 className="text-3xl font-black tracking-tight mb-2">Theme Showcase</h1>
-          <p className="text-sm opacity-60">ParkKeeper 風格主題系統展示</p>
+          <h1 className="text-3xl font-black tracking-tight mb-2">風格展示</h1>
+          <p className="text-sm opacity-60">RateWise 風格系統展示</p>
         </div>
 
-        {/* 當前主題資訊 */}
         <section className="mb-8">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
+          <div className={`${contentPageTokens.sectionHeader.row} mb-3`}>
             <Palette className="w-3.5 h-3.5" />
-            <h3 className="text-[10px] font-black uppercase tracking-[0.2em]">當前主題</h3>
+            <h3 className={contentPageTokens.sectionHeader.eyebrow}>當前主題</h3>
           </div>
           <div className="card p-5">
             <div className="text-sm">
@@ -57,21 +40,21 @@ export default function ThemeShowcase() {
           </div>
         </section>
 
-        {/* 風格選擇器 */}
         <section className="mb-8">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
+          <div className={`${contentPageTokens.sectionHeader.row} mb-3`}>
             <Palette className="w-3.5 h-3.5" />
-            <h3 className="text-[10px] font-black uppercase tracking-[0.2em]">介面風格</h3>
+            <h3 className={contentPageTokens.sectionHeader.eyebrow}>介面風格</h3>
           </div>
           <div className="grid grid-cols-2 gap-4">
             {STYLE_OPTIONS.map((option) => (
               <button
+                type="button"
                 key={option.value}
                 onClick={() => setStyle(option.value)}
                 disabled={!isLoaded}
                 className={`
-                  relative p-4 h-28 flex flex-col justify-end overflow-hidden rounded-xl
-                  transition-all shadow-sm disabled:opacity-50
+                  relative flex h-28 flex-col justify-end overflow-hidden rounded-control p-4
+                  shadow-soft transition-[box-shadow,opacity,transform] disabled:opacity-50
                   ${style === option.value ? 'ring-2 ring-offset-2' : ''}
                 `}
                 style={
@@ -82,21 +65,19 @@ export default function ThemeShowcase() {
                   } as React.CSSProperties
                 }
               >
-                {/* 裝飾圓形 */}
                 <div
-                  className="absolute top-0 right-0 w-20 h-20 opacity-10 -mr-6 -mt-6 rounded-full"
+                  className="absolute -right-5 -top-5 h-16 w-16 rounded-full opacity-[0.08]"
                   style={{ backgroundColor: option.previewAccent }}
                 />
 
-                {/* 內容 */}
                 <div className="relative z-10">
                   <span className="font-bold text-lg">{option.label}</span>
                   <p className="text-xs opacity-70 mt-0.5">{option.description}</p>
                 </div>
 
                 {style === option.value && (
-                  <div className="absolute top-3 right-3 bg-green-500 rounded-full p-1">
-                    <Check className="w-3 h-3 text-white" />
+                  <div className="absolute top-3 right-3 rounded-full border border-current/15 bg-surface/85 p-1">
+                    <Check className="h-3 w-3" />
                   </div>
                 )}
               </button>
@@ -104,20 +85,21 @@ export default function ThemeShowcase() {
           </div>
         </section>
 
-        {/* 元件展示 */}
         <section className="mb-8">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
+          <div className={`${contentPageTokens.sectionHeader.row} mb-3`}>
             <Box className="w-3.5 h-3.5" />
-            <h3 className="text-[10px] font-black uppercase tracking-[0.2em]">元件庫</h3>
+            <h3 className={contentPageTokens.sectionHeader.eyebrow}>元件庫</h3>
           </div>
 
-          {/* 按鈕 */}
           <div className="card p-5 mb-4">
             <h4 className="text-sm font-bold mb-3">按鈕</h4>
             <div className="flex flex-wrap gap-3">
-              <button className="btn-primary">主要按鈕</button>
+              <button type="button" className="btn-primary">
+                主要按鈕
+              </button>
               <button
-                className="px-4 py-2 rounded-2xl border transition-colors"
+                type="button"
+                className="rounded-control border px-4 py-2 transition-colors"
                 style={{
                   borderColor: 'rgb(var(--color-border))',
                   color: 'rgb(var(--color-text))',
@@ -125,19 +107,21 @@ export default function ThemeShowcase() {
               >
                 次要按鈕
               </button>
-              <button className="px-4 py-2 rounded-2xl text-red-500 hover:bg-red-50 transition-colors">
+              <button
+                type="button"
+                className="rounded-control px-4 py-2 text-destructive transition-colors hover:bg-destructive/10"
+              >
                 危險按鈕
               </button>
             </div>
           </div>
 
-          {/* 卡片 */}
           <div className="card p-5 mb-4">
             <h4 className="text-sm font-bold mb-3">卡片樣式</h4>
             <div className="grid grid-cols-2 gap-3">
               <div className="card p-4">
                 <p className="font-bold">預設卡片</p>
-                <p className="text-xs opacity-60 mt-1">rounded-3xl</p>
+                <p className="text-xs opacity-60 mt-1">rounded-card</p>
               </div>
               <div className="card p-4 shadow-elevation-2">
                 <p className="font-bold">懸浮卡片</p>
@@ -146,32 +130,40 @@ export default function ThemeShowcase() {
             </div>
           </div>
 
-          {/* 輸入框 */}
           <div className="card p-5 mb-4">
             <h4 className="text-sm font-bold mb-3">輸入框</h4>
             <div className="space-y-3">
               <input
                 type="text"
                 placeholder="預設輸入框"
-                className="w-full px-4 py-3 rounded-2xl border transition-colors"
+                className="w-full rounded-control border px-4 py-3 transition-colors"
                 style={{
                   backgroundColor: 'rgb(var(--color-surface))',
                   borderColor: 'rgb(var(--color-border))',
                   color: 'rgb(var(--color-text))',
                 }}
               />
-              <div className="bg-black/5 rounded-[20px] p-1.5 flex gap-1 shadow-inner">
-                <button className="flex-1 py-2 rounded-2xl text-xs font-bold relative">
+              <div className="flex gap-1 rounded-control bg-surface-sunken/60 p-1.5 shadow-inner">
+                <button
+                  type="button"
+                  className="relative flex-1 rounded-control py-2 text-xs font-bold"
+                >
                   <div
-                    className="absolute inset-0 rounded-2xl shadow-sm z-[-1]"
+                    className="absolute inset-0 z-[-1] rounded-control shadow-soft"
                     style={{ backgroundColor: 'rgb(var(--color-surface))' }}
                   />
                   <span className="relative z-10">選項 1</span>
                 </button>
-                <button className="flex-1 py-2 rounded-2xl text-xs font-bold opacity-60">
+                <button
+                  type="button"
+                  className="flex-1 rounded-control py-2 text-xs font-bold opacity-60"
+                >
                   選項 2
                 </button>
-                <button className="flex-1 py-2 rounded-2xl text-xs font-bold opacity-60">
+                <button
+                  type="button"
+                  className="flex-1 rounded-control py-2 text-xs font-bold opacity-60"
+                >
                   選項 3
                 </button>
               </div>
@@ -179,14 +171,13 @@ export default function ThemeShowcase() {
           </div>
         </section>
 
-        {/* 排版展示 */}
         <section className="mb-8">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
+          <div className={`${contentPageTokens.sectionHeader.row} mb-3`}>
             <Type className="w-3.5 h-3.5" />
-            <h3 className="text-[10px] font-black uppercase tracking-[0.2em]">排版</h3>
+            <h3 className={contentPageTokens.sectionHeader.eyebrow}>排版</h3>
           </div>
           <div className="card p-5">
-            <p className="text-[9px] font-black uppercase tracking-[0.2em] opacity-40 mb-2">
+            <p className="mb-2 text-[11px] font-semibold uppercase tracking-[0.16em] opacity-50">
               標籤文字 LABEL
             </p>
             <h1 className="text-3xl font-black tracking-tight mb-1">大標題 H1</h1>
@@ -197,26 +188,25 @@ export default function ThemeShowcase() {
           </div>
         </section>
 
-        {/* 設計規格 */}
         <section className="mb-8">
           <div className="card p-5">
             <h4 className="text-sm font-bold mb-4">設計規格</h4>
             <div className="space-y-3 text-xs">
-              <div className="flex justify-between items-center py-2 border-b border-black/5">
+              <div className="flex justify-between items-center py-2 border-b border-border/60">
                 <span className="opacity-60">卡片圓角</span>
-                <code className="font-mono">rounded-3xl (1.5rem)</code>
+                <code className="font-mono">rounded-control (1rem token alias)</code>
               </div>
-              <div className="flex justify-between items-center py-2 border-b border-black/5">
+              <div className="flex justify-between items-center py-2 border-b border-border/60">
                 <span className="opacity-60">按鈕圓角</span>
-                <code className="font-mono">rounded-2xl (1rem)</code>
+                <code className="font-mono">rounded-control (1rem token alias)</code>
               </div>
-              <div className="flex justify-between items-center py-2 border-b border-black/5">
-                <span className="opacity-60">毛玻璃</span>
-                <code className="font-mono">backdrop-blur-xl</code>
+              <div className="flex justify-between items-center py-2 border-b border-border/60">
+                <span className="opacity-60">表面層次</span>
+                <code className="font-mono">bg-surface-elevated + shadow-soft</code>
               </div>
-              <div className="flex justify-between items-center py-2 border-b border-black/5">
+              <div className="flex justify-between items-center py-2 border-b border-border/60">
                 <span className="opacity-60">邊框透明度</span>
-                <code className="font-mono">border-black/[0.02~0.05]</code>
+                <code className="font-mono">border-border/60</code>
               </div>
               <div className="flex justify-between items-center py-2">
                 <span className="opacity-60">標籤文字</span>
@@ -226,10 +216,9 @@ export default function ThemeShowcase() {
           </div>
         </section>
 
-        {/* 參考來源 */}
         <section className="text-center opacity-40">
-          <p className="text-[10px] font-medium">Design Reference: ParkKeeper UI Style</p>
-          <p className="text-[10px] mt-1">Built with Tailwind CSS + CSS Variables</p>
+          <p className="text-[11px] font-medium">設計參考：RateWise DESIGN.md + themes.ts</p>
+          <p className="mt-1 text-[11px]">建構方式：Tailwind CSS + CSS Variables</p>
         </section>
       </div>
     </div>
diff --git a/apps/ratewise/src/pages/UIShowcase.tsx b/apps/ratewise/src/pages/UIShowcase.tsx
index 6bc8d365d..2d4189a7e 100644
--- a/apps/ratewise/src/pages/UIShowcase.tsx
+++ b/apps/ratewise/src/pages/UIShowcase.tsx
@@ -1,13 +1,3 @@
-/**
- * UI Showcase Page - Complete Component Gallery
- * UI 展示頁面 - 完整的組件庫
- *
- * @description Comprehensive showcase of all UI components,
- *              design tokens, and theme variations with live theme switching.
- *              完整展示所有 UI 組件、設計 Token 和主題變化，支援即時主題切換。
- * @version 3.0.0
- */
-
 import { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { Head } from 'vite-react-ssg';
@@ -52,10 +42,6 @@ import { getDisplayVersion } from '../config/version';
 import { APP_INFO } from '../config/app-info';
 import type { ConversionHistoryEntry } from '../features/ratewise/types';
 
-/**
- * Theme color swatch component
- * 主題色彩樣本組件
- */
 function ColorSwatch({
   name,
   cssVar,
@@ -66,24 +52,20 @@ function ColorSwatch({
   description: string;
 }) {
   return (
-    <div className="flex items-center gap-3 p-3 bg-surface rounded-xl border border-border">
+    <div className="flex items-center gap-3 rounded-control border border-border bg-surface p-3">
       <div
-        className="w-12 h-12 rounded-lg shadow-sm border border-border"
+        className="w-12 h-12 rounded-control shadow-soft border border-border"
         style={{ backgroundColor: `rgb(var(${cssVar}))` }}
       />
       <div className="flex-1 min-w-0">
         <div className="font-semibold text-text text-sm truncate">{name}</div>
         <div className="text-xs text-text-muted font-mono truncate">{cssVar}</div>
-        <div className="text-[10px] text-text-muted opacity-60 truncate">{description}</div>
+        <div className="truncate text-[11px] text-text-muted opacity-70">{description}</div>
       </div>
     </div>
   );
 }
 
-/**
- * Section wrapper component
- * 區塊包裝組件
- */
 function Section({
   title,
   icon: Icon,
@@ -104,10 +86,6 @@ function Section({
   );
 }
 
-/**
- * Theme style icons mapping
- * 主題風格圖示對應
- */
 const STYLE_ICONS: Record<ThemeStyle, React.ElementType> = {
   nitro: Zap,
   kawaii: Sparkles,
@@ -118,7 +96,7 @@ const STYLE_ICONS: Record<ThemeStyle, React.ElementType> = {
 };
 
 export default function UIShowcase() {
-  useTranslation(); // Initialize i18n context
+  useTranslation();
   const { showToast } = useToast();
   const { config, setStyle, isLoaded } = useAppTheme();
   const [activeTab, setActiveTab] = useState<'themes' | 'colors' | 'components' | 'skeletons'>(
@@ -129,7 +107,6 @@ export default function UIShowcase() {
     'offlineReady' | 'needRefresh' | 'isUpdating' | 'updateFailed' | null
   >(null);
 
-  // Sample history data for demo - using useMemo to avoid impure function calls during render
   const sampleHistory: ConversionHistoryEntry[] = useMemo(
     () => [
       {
@@ -138,7 +115,7 @@ export default function UIShowcase() {
         amount: '1000',
         result: '31.62',
         time: '今天 上午10:30',
-        timestamp: 1706140200000, // Fixed timestamp for demo
+        timestamp: 1706140200000,
       },
       {
         from: 'USD',
@@ -175,27 +152,24 @@ export default function UIShowcase() {
         }}
       />
 
-      {/* Offline Indicator - 真實固定定位（頂部） */}
       <OfflineIndicator forceOffline={forceOfflinePreview ? true : undefined} />
 
       <div className="max-w-4xl mx-auto space-y-6">
-        {/* Header */}
         <header className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <Link
               to="/"
-              className="p-2 rounded-xl bg-surface border border-border hover:bg-primary/10 transition-colors"
+              className="rounded-control border border-border bg-surface p-2 transition-colors hover:bg-surface-elevated"
             >
               <ArrowLeft size={20} className="text-text" />
             </Link>
             <div>
-              <h1 className="text-2xl font-black text-text">UI Showcase</h1>
+              <h1 className="text-2xl font-black text-text">介面展示</h1>
               <p className="text-sm text-text-muted">{APP_INFO.shortName} 組件庫展示</p>
             </div>
           </div>
         </header>
 
-        {/* Tab Navigation */}
         <nav className="card p-1.5">
           <div className="flex gap-1 overflow-x-auto">
             {[
@@ -205,11 +179,12 @@ export default function UIShowcase() {
               { id: 'skeletons' as const, label: '骨架屏', icon: Smartphone },
             ].map(({ id, label, icon: TabIcon }) => (
               <button
+                type="button"
                 key={id}
                 onClick={() => setActiveTab(id)}
-                className={`flex-1 flex items-center justify-center gap-2 py-3 px-3 rounded-xl font-semibold text-sm transition-all whitespace-nowrap ${
+                className={`flex-1 flex items-center justify-center gap-2 rounded-control px-3 py-3 text-sm font-semibold transition-[background-color,border-color,color,box-shadow] whitespace-nowrap ${
                   activeTab === id
-                    ? 'bg-primary text-white shadow-md'
+                    ? 'border border-border/70 bg-surface-elevated text-text shadow-soft'
                     : 'text-text-muted hover:bg-surface'
                 }`}
               >
@@ -220,7 +195,6 @@ export default function UIShowcase() {
           </div>
         </nav>
 
-        {/* Themes Tab - Live Theme Switching */}
         {activeTab === 'themes' && (
           <div className="space-y-6">
             <Section title="主題風格切換" icon={Palette}>
@@ -235,28 +209,31 @@ export default function UIShowcase() {
 
                   return (
                     <button
+                      type="button"
                       key={styleKey}
                       onClick={() => setStyle(styleKey)}
                       disabled={!isLoaded}
                       className={`
-                        relative p-4 rounded-2xl border-2 transition-all duration-200
+                        relative rounded-control border-2 p-4 transition-[background-color,border-color,box-shadow,transform] duration-200
                         ${
                           isActive
-                            ? 'border-primary bg-primary/10 shadow-lg scale-[1.02]'
-                            : 'border-border bg-surface hover:border-primary/50 hover:shadow-md'
+                            ? 'border-primary/30 bg-surface-elevated shadow-soft'
+                            : 'border-border bg-surface hover:border-primary/20 hover:bg-surface-elevated'
                         }
                         ${!isLoaded ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
                       `}
                     >
                       {isActive && (
-                        <div className="absolute -top-2 -right-2 w-6 h-6 bg-primary rounded-full flex items-center justify-center">
-                          <Check size={14} className="text-white" />
+                        <div className="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full border border-primary/20 bg-surface text-primary">
+                          <Check size={14} />
                         </div>
                       )}
                       <div className="flex flex-col items-center gap-2">
                         <div
-                          className={`w-12 h-12 rounded-xl flex items-center justify-center ${
-                            isActive ? 'bg-primary text-white' : 'bg-surface-elevated text-primary'
+                          className={`flex h-12 w-12 items-center justify-center rounded-control ${
+                            isActive
+                              ? 'bg-primary text-primary-foreground'
+                              : 'bg-surface-elevated text-primary'
                           }`}
                         >
                           <StyleIcon size={24} />
@@ -272,19 +249,18 @@ export default function UIShowcase() {
               </div>
             </Section>
 
-            {/* Current Theme Preview */}
             <Section title="當前主題預覽" icon={Star}>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-                <div className="p-4 rounded-xl bg-primary text-white text-center">
+                <div className="rounded-control bg-primary p-4 text-center text-primary-foreground">
                   <span className="text-sm font-bold">Primary</span>
                 </div>
-                <div className="p-4 rounded-xl bg-accent text-white text-center">
+                <div className="rounded-control bg-accent p-4 text-center text-primary-foreground">
                   <span className="text-sm font-bold">Accent</span>
                 </div>
-                <div className="p-4 rounded-xl bg-success text-white text-center">
+                <div className="rounded-control bg-success p-4 text-center text-success-foreground">
                   <span className="text-sm font-bold">Success</span>
                 </div>
-                <div className="p-4 rounded-xl bg-destructive text-white text-center">
+                <div className="rounded-control bg-destructive p-4 text-center text-destructive-foreground">
                   <span className="text-sm font-bold">Destructive</span>
                 </div>
               </div>
@@ -297,7 +273,6 @@ export default function UIShowcase() {
           </div>
         )}
 
-        {/* Colors Tab */}
         {activeTab === 'colors' && (
           <div className="space-y-6">
             <Section title="主要色彩" icon={Palette}>
@@ -338,13 +313,11 @@ export default function UIShowcase() {
           </div>
         )}
 
-        {/* Components Tab */}
         {activeTab === 'components' && (
           <div className="space-y-6">
-            {/* Update Prompt Preview */}
             <Section title="PWA 更新通知" icon={RefreshCw}>
               <p className="text-sm text-text-muted mb-3">
-                PWA 更新通知的四種狀態展示，統一品牌漸變設計。
+                PWA 更新通知的四種狀態展示，統一使用通知 shared token。
                 <br />
                 <strong className="text-warning">通知會顯示在頁面底部中央的真實位置</strong>
               </p>
@@ -392,7 +365,6 @@ export default function UIShowcase() {
               </div>
             </Section>
 
-            {/* Offline Indicator Preview */}
             <Section title="離線指示器" icon={Bell}>
               <p className="text-sm text-text-muted mb-3">
                 強制顯示離線指示器，方便設計檢視。未強制時會使用真實網路狀態。
@@ -409,7 +381,6 @@ export default function UIShowcase() {
               </div>
             </Section>
 
-            {/* Buttons */}
             <Section title="按鈕組件" icon={Layout}>
               <div className="space-y-4">
                 <div className="flex flex-wrap gap-3">
@@ -431,7 +402,6 @@ export default function UIShowcase() {
               </div>
             </Section>
 
-            {/* Toast Notifications */}
             <Section title="Toast 通知" icon={Bell}>
               <div className="flex flex-wrap gap-3">
                 <Button
@@ -465,7 +435,6 @@ export default function UIShowcase() {
               </div>
             </Section>
 
-            {/* Conversion History */}
             <Section title="轉換歷史" icon={Clock}>
               <p className="text-sm text-text-muted mb-3">
                 點擊卡片複製轉換結果，雙擊或長按重新轉換
@@ -478,7 +447,6 @@ export default function UIShowcase() {
               />
             </Section>
 
-            {/* Typography */}
             <Section title="文字排版" icon={Type}>
               <div className="space-y-3">
                 <h1 className="text-3xl font-black text-text">Heading 1 - 標題一</h1>
@@ -490,7 +458,6 @@ export default function UIShowcase() {
               </div>
             </Section>
 
-            {/* Cards */}
             <Section title="卡片樣式" icon={Layout}>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="card p-4">
@@ -504,7 +471,6 @@ export default function UIShowcase() {
               </div>
             </Section>
 
-            {/* Icons */}
             <Section title="圖示展示" icon={Star}>
               <div className="flex flex-wrap gap-4">
                 {[
@@ -519,7 +485,7 @@ export default function UIShowcase() {
                 ].map(({ icon: IconComponent, name, color }) => (
                   <div
                     key={name}
-                    className="flex flex-col items-center gap-1 p-3 rounded-xl bg-surface"
+                    className="flex flex-col items-center gap-1 rounded-control bg-surface p-3"
                   >
                     <IconComponent size={24} className={color} />
                     <span className="text-xs text-text-muted">{name}</span>
@@ -530,39 +496,37 @@ export default function UIShowcase() {
           </div>
         )}
 
-        {/* Skeletons Tab */}
         {activeTab === 'skeletons' && (
           <div className="space-y-6">
             <Section title="主頁面骨架屏" icon={Smartphone}>
-              <div className="border border-border rounded-xl overflow-hidden">
+              <div className="overflow-hidden rounded-control border border-border">
                 <SkeletonLoader />
               </div>
             </Section>
 
             <Section title="設定頁面骨架屏" icon={Settings}>
-              <div className="border border-border rounded-xl overflow-hidden">
+              <div className="overflow-hidden rounded-control border border-border">
                 <SettingsSkeleton />
               </div>
             </Section>
 
             <Section title="收藏頁面骨架屏" icon={Star}>
-              <div className="border border-border rounded-xl overflow-hidden">
+              <div className="overflow-hidden rounded-control border border-border">
                 <FavoritesSkeleton />
               </div>
             </Section>
 
             <Section title="多幣別頁面骨架屏" icon={RefreshCw}>
-              <div className="border border-border rounded-xl overflow-hidden">
+              <div className="overflow-hidden rounded-control border border-border">
                 <MultiConverterSkeleton />
               </div>
             </Section>
           </div>
         )}
 
-        {/* Footer */}
         <footer className="text-center py-6 text-sm text-text-muted">
           <p>
-            {APP_INFO.shortName} UI Showcase {getDisplayVersion()}
+            {APP_INFO.shortName} 介面展示 {getDisplayVersion()}
           </p>
           <p className="text-xs opacity-60 mt-1">使用 SSOT Design Token 系統 | 支援 6 種主題風格</p>
         </footer>
diff --git a/apps/ratewise/src/pages/UpdatePromptTest.tsx b/apps/ratewise/src/pages/UpdatePromptTest.tsx
index 49b83cae9..5be71f406 100644
--- a/apps/ratewise/src/pages/UpdatePromptTest.tsx
+++ b/apps/ratewise/src/pages/UpdatePromptTest.tsx
@@ -11,6 +11,7 @@
 
 import { Link } from 'react-router-dom';
 import { Head } from 'vite-react-ssg';
+import { notificationTokens } from '../config/design-tokens';
 
 const STYLES = ['zen', 'nitro', 'kawaii', 'classic', 'ocean', 'forest'] as const;
 
@@ -48,42 +49,46 @@ const STYLE_LABELS: Record<string, string> = {
 };
 
 /** CTA 按鈕共用樣式（與 UpdatePrompt 一致） */
-const CTA_CLASS =
-  'px-3 py-1.5 rounded-full text-xs font-medium bg-gradient-to-r from-brand-button-from to-brand-button-to text-white shadow-sm hover:from-brand-button-hover-from hover:to-brand-button-hover-to hover:scale-[1.02] active:scale-[0.98] transition-[color,background-color,border-color,transform] duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1';
+const CTA_CLASS = notificationTokens.actions.primary;
 
 /** 關閉按鈕樣式（與 UpdatePrompt 一致） */
-const CLOSE_CLASS =
-  'p-1.5 rounded-full bg-brand-icon-from/80 text-brand-text hover:text-brand-text-dark hover:bg-brand-icon-from hover:scale-[1.05] active:scale-[0.95] transition-[color,background-color,transform] duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-1';
+const CLOSE_CLASS = notificationTokens.actions.icon;
 
 function NotificationCard({ state }: { state: State }) {
   return (
-    <div className="relative overflow-hidden rounded-2xl w-full max-w-[344px] bg-gradient-to-r from-brand-from via-brand-via to-brand-to border border-brand-border/60 shadow-card shadow-brand-shadow/20">
+    <div
+      className={`relative w-full max-w-[344px] overflow-hidden ${notificationTokens.borderRadius} ${notificationTokens.background.brand} ${notificationTokens.background.brandBorder} ${notificationTokens.shadow}`}
+    >
       {/* 裝飾光暈 */}
       <div
-        className="absolute top-0 right-0 w-16 h-16 rounded-full bg-brand-icon-from/40 blur-2xl"
+        className={`absolute top-0 right-0 ${notificationTokens.decoration.size} rounded-full ${notificationTokens.decoration.topRight} ${notificationTokens.decoration.blur}`}
         aria-hidden="true"
       />
       <div
-        className="absolute bottom-0 left-0 w-16 h-16 rounded-full bg-brand-decoration/40 blur-2xl"
+        className={`absolute bottom-0 left-0 ${notificationTokens.decoration.size} rounded-full ${notificationTokens.decoration.bottomLeft} ${notificationTokens.decoration.blur}`}
         aria-hidden="true"
       />
 
       {/* 內容 */}
-      <div className="relative px-6 py-3.5">
+      <div className={`relative ${notificationTokens.padding}`}>
         <div className="flex items-center gap-3">
           {/* 狀態圖標 */}
           <div className="flex-shrink-0">
-            <div className="relative w-8 h-8 rounded-xl bg-gradient-to-br from-brand-icon-from to-brand-icon-to flex items-center justify-center shadow">
+            <div
+              className={`relative ${notificationTokens.icon.container} ${notificationTokens.icon.brandGradient} flex items-center justify-center shadow-soft`}
+            >
               <StateIcon state={state} />
             </div>
           </div>
 
           {/* 標題與描述 */}
           <div className="flex-1 min-w-0">
-            <h3 className="text-sm font-semibold text-brand-text-dark truncate">
+            <h3 className={`truncate text-sm font-semibold ${notificationTokens.text.brandTitle}`}>
               {STATE_TITLE[state]}
             </h3>
-            <p className="text-xs text-brand-text truncate">{STATE_DESC[state]}</p>
+            <p className={`truncate text-xs ${notificationTokens.text.brandDescription}`}>
+              {STATE_DESC[state]}
+            </p>
           </div>
 
           {/* 操作按鈕 */}
@@ -100,7 +105,7 @@ function StateIcon({ state }: { state: State }) {
   if (state === 'isUpdating') {
     return (
       <svg
-        className="w-5 h-5 text-brand-text animate-spin"
+        className="h-5 w-5 animate-spin text-primary"
         fill="none"
         viewBox="0 0 24 24"
         aria-hidden="true"
@@ -132,7 +137,7 @@ function StateIcon({ state }: { state: State }) {
 
   return (
     <svg
-      className="w-5 h-5 text-brand-text"
+      className="h-5 w-5 text-primary"
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"
@@ -180,7 +185,7 @@ function StateAction({ state }: { state: State }) {
 
 export default function UpdatePromptTest() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-neutral-light via-blue-50 to-purple-50 p-4 md:p-8">
+    <div className="min-h-screen bg-background p-4 md:p-8">
       <Head>
         <meta name="robots" content="noindex, nofollow" />
       </Head>
@@ -188,7 +193,7 @@ export default function UpdatePromptTest() {
         <div className="mb-8">
           <Link
             to="/"
-            className="inline-flex items-center gap-2 text-sm font-semibold text-blue-700 bg-white/80 px-4 py-2.5 rounded-full shadow border border-blue-100 hover:text-blue-900 hover:bg-white transition-colors mb-4"
+            className="mb-4 inline-flex items-center gap-2 rounded-full border border-border/70 bg-surface-elevated px-4 py-2.5 text-sm font-semibold text-text transition-colors hover:border-primary/20 hover:bg-surface"
           >
             <svg
               className="w-4 h-4"
@@ -206,8 +211,8 @@ export default function UpdatePromptTest() {
             </svg>
             返回主頁
           </Link>
-          <h1 className="text-3xl font-bold text-neutral-text mt-4">UpdatePrompt Brand 配色總覽</h1>
-          <p className="text-neutral-text-secondary mt-2">6 種風格 × 4 種狀態 = 24 種組合</p>
+          <h1 className="mt-4 text-3xl font-bold text-text">UpdatePrompt Token 總覽</h1>
+          <p className="mt-2 text-text-muted">6 種風格 × 4 種狀態 = 24 種組合</p>
         </div>
 
         {/* 欄標題（狀態） */}
@@ -216,7 +221,7 @@ export default function UpdatePromptTest() {
           {STATES.map((s) => (
             <div
               key={s}
-              className="text-center text-xs font-semibold text-neutral-text-secondary uppercase tracking-wide"
+              className="text-center text-xs font-semibold uppercase tracking-wide text-text-muted"
             >
               {STATE_LABELS[s]}
             </div>
@@ -233,7 +238,7 @@ export default function UpdatePromptTest() {
             >
               {/* 列標籤 */}
               <div className="mb-2 md:mb-0">
-                <span className="text-sm font-bold text-neutral-text">{STYLE_LABELS[style]}</span>
+                <span className="text-sm font-bold text-text">{STYLE_LABELS[style]}</span>
               </div>
 
               {/* 四種狀態 */}
diff --git a/apps/ratewise/src/prerender.test.ts b/apps/ratewise/src/prerender.test.ts
index 94ddc85bb..891096302 100644
--- a/apps/ratewise/src/prerender.test.ts
+++ b/apps/ratewise/src/prerender.test.ts
@@ -39,9 +39,9 @@ describe('Prerendering Static HTML Generation (SEOHelmet Architecture)', () => {
       expect(existsSync(notFoundHtml)).toBe(false);
     });
 
-    it('should generate color-scheme page as static HTML (app-only prerender)', () => {
+    it('should not generate color-scheme page as static HTML (internal-only route)', () => {
       const colorSchemeHtml = resolve(distPath, 'color-scheme/index.html');
-      expect(existsSync(colorSchemeHtml)).toBe(true);
+      expect(existsSync(colorSchemeHtml)).toBe(false);
     });
   });
 
@@ -366,6 +366,7 @@ describe('Prerendering Static HTML Generation (SEOHelmet Architecture)', () => {
       if (!existsSync(usdAmountHtml)) return;
 
       const content = readFileSync(usdAmountHtml, 'utf-8');
+      expect(content).toContain('id="ssg-amount-result"');
       expect(content).toContain('換算結果（台銀現金賣出參考）');
       expect(content).toContain('500 USD');
       expect(content).toContain('在換算器查看最新匯率');
diff --git a/apps/ratewise/src/pwa-offline.test.ts b/apps/ratewise/src/pwa-offline.test.ts
index d55ff6e58..3d27361d2 100644
--- a/apps/ratewise/src/pwa-offline.test.ts
+++ b/apps/ratewise/src/pwa-offline.test.ts
@@ -6,8 +6,14 @@ import { describe, it, expect, beforeAll } from 'vitest';
 import { readFileSync, existsSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { APP_INFO } from './config/app-info';
+import { STYLE_DEFINITIONS } from './config/themes';
 
 const ROOT_PATH = resolve(__dirname, '..');
+const defaultThemeColor = `#${STYLE_DEFINITIONS.zen.colors.primary
+  .split(' ')
+  .map((value) => Number.parseInt(value, 10).toString(16).padStart(2, '0'))
+  .join('')
+  .toUpperCase()}`;
 
 describe('PWA 離線功能測試', () => {
   describe('offline.html 配置', () => {
@@ -35,6 +41,33 @@ describe('PWA 離線功能測試', () => {
       expect(content).toContain("window.addEventListener('online'");
     });
 
+    it('should align offline theme-color with zen theme SSOT', () => {
+      const offlinePath = resolve(ROOT_PATH, 'public/offline.html');
+      const content = readFileSync(offlinePath, 'utf-8');
+
+      expect(content).toContain(`<meta name="theme-color" content="${defaultThemeColor}"`);
+    });
+
+    it('should preserve selected theme before offline shell paint', () => {
+      const offlinePath = resolve(ROOT_PATH, 'public/offline.html');
+      const content = readFileSync(offlinePath, 'utf-8');
+
+      expect(content).toContain('ratewise-theme');
+      expect(content).toContain('document.documentElement.dataset.style');
+      expect(content).toContain("html[data-style='nitro']");
+      expect(content).toContain('--offline-background');
+    });
+
+    it('should support iOS standalone safe-area and dynamic viewport units', () => {
+      const offlinePath = resolve(ROOT_PATH, 'public/offline.html');
+      const content = readFileSync(offlinePath, 'utf-8');
+
+      expect(content).toContain('viewport-fit=cover');
+      expect(content).toContain('apple-mobile-web-app-capable');
+      expect(content).toContain('env(safe-area-inset-top, 0px)');
+      expect(content).toContain('100dvh');
+    });
+
     it('should show cached data indicator', () => {
       const offlinePath = resolve(ROOT_PATH, 'public/offline.html');
       const content = readFileSync(offlinePath, 'utf-8');
@@ -43,6 +76,13 @@ describe('PWA 離線功能測試', () => {
       expect(content).toContain('cached-info');
       expect(content).toContain("localStorage.getItem('exchangeRates')");
     });
+
+    it('should align manifest theme-color with zen theme SSOT', () => {
+      const manifestPath = resolve(ROOT_PATH, 'public/manifest.webmanifest');
+      const manifest = JSON.parse(readFileSync(manifestPath, 'utf-8')) as { theme_color: string };
+
+      expect(manifest.theme_color).toBe(defaultThemeColor);
+    });
   });
 
   describe('vite.config.ts PWA 配置', () => {
@@ -117,9 +157,10 @@ describe('PWA 離線功能測試', () => {
       expect(swContent).toContain("const HTML_CACHE_NAME = 'html-cache'");
       expect(swContent).toContain('event.waitUntil(');
       expect(swContent).toContain('fetchAndCacheNavigation(request, cache)');
-      expect(swContent).toContain(
-        'event.waitUntil(networkResponse.then(() => undefined).catch(() => undefined))',
-      );
+      // SWR 背景 revalidate 模式：fetchAndCacheNavigation 直接傳入 event.waitUntil。
+      expect(swContent).toContain('fetchAndCacheNavigation(request, cache)');
+      expect(swContent).toContain('.then(() => undefined)');
+      expect(swContent).toContain('.catch(() => undefined)');
       // 防回歸：禁止把 NetworkFirst 重新引入 navigation 路徑（cold-start 白屏根因之一）。
       expect(swContent).not.toContain('new NetworkFirst(');
     });
@@ -128,8 +169,9 @@ describe('PWA 離線功能測試', () => {
       const swContent = readFileSync(resolve(ROOT_PATH, 'src/sw.ts'), 'utf-8');
       expect(swContent).toContain('clearNavigationHtmlCacheOnActivate');
       expect(swContent).toContain('caches.delete(HTML_CACHE_NAME)');
-      expect(swContent).toContain('const NAVIGATION_NETWORK_TIMEOUT_MS = 3000');
-      expect(swContent).toContain('Promise.race([networkResponse, timeoutFallback])');
+      // precache-first 方案：冷快取先嘗試 precache index.html，避免 timeout 在 iOS eviction 時誤回 offline.html。
+      expect(swContent).toContain("matchPrecache('index.html')");
+      expect(swContent).toContain('fetchAndCacheNavigation');
       expect(swContent).toContain('resolveNavigationFallback');
     });
 
@@ -158,6 +200,11 @@ describe('PWA 離線功能測試', () => {
       expect(fallbackContent).toContain('EMERGENCY_OFFLINE_HTML');
       expect(fallbackContent).toContain('createEmergencyOfflineResponse');
       expect(fallbackContent).toContain('data-ratewise-emergency-fallback="true"');
+      expect(fallbackContent).toContain("var K = 'ratewise-theme'");
+      expect(fallbackContent).toContain("[data-style='nitro']");
+      expect(fallbackContent).toContain(':root:not([data-style])');
+      expect(fallbackContent).not.toContain(':root { color-scheme: light; }');
+      expect(fallbackContent).not.toContain('background: #f8fafc');
       expect(fallbackContent).toContain("'X-RateWise-Offline-Fallback'");
       expect(swContent).toContain('emergency-document-fallback');
       expect(swContent).toContain('emergency-navigation-fallback');
diff --git a/apps/ratewise/src/routes.tsx b/apps/ratewise/src/routes.tsx
index 9a7969270..a42c2ce69 100644
--- a/apps/ratewise/src/routes.tsx
+++ b/apps/ratewise/src/routes.tsx
@@ -10,7 +10,6 @@
  *   - `/multi`: 多幣別轉換器
  *   - `/favorites`: 收藏與歷史
  *   - `/settings`: 應用程式設定
- *   - `/theme-showcase`: 主題展示
  *
  * - Layout 路由（SEO 落地頁，保留原有結構）：
  *   - `/faq`: FAQ 頁面 - 預渲染靜態 HTML
@@ -22,7 +21,8 @@
  *   - `/seo-tech`: SEO 技術揭露頁面
  *   - `/xxx-twd` / `/twd-xxx`: 17+17 個幣別落地頁 - 預渲染靜態 HTML
  *
- * - 工具頁面（不預渲染）：
+ * - 內部工具頁面（僅 dev 或 VITE_ENABLE_INTERNAL_ROUTES=true 註冊）：
+ *   - `/theme-showcase`: 主題展示
  *   - `/color-scheme`: 內部工具
  *   - `/update-prompt-test`: UpdatePrompt 測試
  *   - `/ui-showcase`: UI 元件展示
@@ -43,6 +43,7 @@ import {
   SettingsSkeleton,
 } from './components/SkeletonLoader';
 import { HOMEPAGE_SEO } from './config/seo-metadata';
+import { CURRENCY_LANDING_ROUTE_REGISTRY } from './config/currencyLandingRouteRegistry';
 import { logger } from './utils/logger';
 import { isChunkLoadError, recoverFromChunkLoadError } from './utils/chunkLoadRecovery';
 import { lazyWithRetry } from './utils/lazyWithRetry';
@@ -53,6 +54,46 @@ const MultiConverter = lazyWithRetry(() => import('./pages/MultiConverter'));
 const Favorites = lazyWithRetry(() => import('./pages/Favorites'));
 const Settings = lazyWithRetry(() => import('./pages/Settings'));
 
+const shouldEnableInternalRoutes =
+  import.meta.env.DEV || import.meta.env['VITE_ENABLE_INTERNAL_ROUTES'] === 'true';
+
+const currencyLandingPageImports = {
+  AUDToTWD: () => import('./pages/AUDToTWD'),
+  CADToTWD: () => import('./pages/CADToTWD'),
+  CHFToTWD: () => import('./pages/CHFToTWD'),
+  CNYToTWD: () => import('./pages/CNYToTWD'),
+  EURToTWD: () => import('./pages/EURToTWD'),
+  GBPToTWD: () => import('./pages/GBPToTWD'),
+  HKDToTWD: () => import('./pages/HKDToTWD'),
+  IDRToTWD: () => import('./pages/IDRToTWD'),
+  JPYToTWD: () => import('./pages/JPYToTWD'),
+  KRWToTWD: () => import('./pages/KRWToTWD'),
+  MYRToTWD: () => import('./pages/MYRToTWD'),
+  NZDToTWD: () => import('./pages/NZDToTWD'),
+  PHPToTWD: () => import('./pages/PHPToTWD'),
+  SGDToTWD: () => import('./pages/SGDToTWD'),
+  THBToTWD: () => import('./pages/THBToTWD'),
+  USDToTWD: () => import('./pages/USDToTWD'),
+  VNDToTWD: () => import('./pages/VNDToTWD'),
+  TWDToAUD: () => import('./pages/TWDToAUD'),
+  TWDToCAD: () => import('./pages/TWDToCAD'),
+  TWDToCHF: () => import('./pages/TWDToCHF'),
+  TWDToCNY: () => import('./pages/TWDToCNY'),
+  TWDToEUR: () => import('./pages/TWDToEUR'),
+  TWDToGBP: () => import('./pages/TWDToGBP'),
+  TWDToHKD: () => import('./pages/TWDToHKD'),
+  TWDToIDR: () => import('./pages/TWDToIDR'),
+  TWDToJPY: () => import('./pages/TWDToJPY'),
+  TWDToKRW: () => import('./pages/TWDToKRW'),
+  TWDToMYR: () => import('./pages/TWDToMYR'),
+  TWDToNZD: () => import('./pages/TWDToNZD'),
+  TWDToPHP: () => import('./pages/TWDToPHP'),
+  TWDToSGD: () => import('./pages/TWDToSGD'),
+  TWDToTHB: () => import('./pages/TWDToTHB'),
+  TWDToUSD: () => import('./pages/TWDToUSD'),
+  TWDToVND: () => import('./pages/TWDToVND'),
+} as const;
+
 /** 帶重試機制的動態 import */
 async function importWithRetry<T>(
   importFn: () => Promise<T>,
@@ -181,18 +222,21 @@ export const routes: RouteRecord[] = [
         ),
         entry: 'src/pages/Settings.tsx',
       },
-      // 主題展示頁面
-      {
-        path: 'theme-showcase',
-        lazy: async () => {
-          try {
-            const module = await import('./pages/ThemeShowcase');
-            return { Component: module.default };
-          } catch (error) {
-            return { Component: () => <OfflineAwareFallback error={error} /> };
-          }
-        },
-      },
+      ...(shouldEnableInternalRoutes
+        ? [
+            {
+              path: 'theme-showcase',
+              lazy: async () => {
+                try {
+                  const module = await import('./pages/ThemeShowcase');
+                  return { Component: module.default };
+                } catch (error) {
+                  return { Component: () => <OfflineAwareFallback error={error} /> };
+                }
+              },
+            },
+          ]
+        : []),
     ],
   },
 
@@ -218,93 +262,38 @@ export const routes: RouteRecord[] = [
   ),
   createLazyRoute('/open-data', () => import('./pages/OpenData'), 'src/pages/OpenData.tsx'),
 
-  // 17 個幣別落地頁（SEO 預渲染）+ 各自的金額子路由（/usd-twd/500/）
-  createLazyRoute('/usd-twd', () => import('./pages/USDToTWD'), 'src/pages/USDToTWD.tsx'),
-  createLazyRoute('/usd-twd/:amount', () => import('./pages/USDToTWD'), 'src/pages/USDToTWD.tsx'),
-  createLazyRoute('/jpy-twd', () => import('./pages/JPYToTWD'), 'src/pages/JPYToTWD.tsx'),
-  createLazyRoute('/jpy-twd/:amount', () => import('./pages/JPYToTWD'), 'src/pages/JPYToTWD.tsx'),
-  createLazyRoute('/eur-twd', () => import('./pages/EURToTWD'), 'src/pages/EURToTWD.tsx'),
-  createLazyRoute('/eur-twd/:amount', () => import('./pages/EURToTWD'), 'src/pages/EURToTWD.tsx'),
-  createLazyRoute('/gbp-twd', () => import('./pages/GBPToTWD'), 'src/pages/GBPToTWD.tsx'),
-  createLazyRoute('/gbp-twd/:amount', () => import('./pages/GBPToTWD'), 'src/pages/GBPToTWD.tsx'),
-  createLazyRoute('/cny-twd', () => import('./pages/CNYToTWD'), 'src/pages/CNYToTWD.tsx'),
-  createLazyRoute('/cny-twd/:amount', () => import('./pages/CNYToTWD'), 'src/pages/CNYToTWD.tsx'),
-  createLazyRoute('/krw-twd', () => import('./pages/KRWToTWD'), 'src/pages/KRWToTWD.tsx'),
-  createLazyRoute('/krw-twd/:amount', () => import('./pages/KRWToTWD'), 'src/pages/KRWToTWD.tsx'),
-  createLazyRoute('/hkd-twd', () => import('./pages/HKDToTWD'), 'src/pages/HKDToTWD.tsx'),
-  createLazyRoute('/hkd-twd/:amount', () => import('./pages/HKDToTWD'), 'src/pages/HKDToTWD.tsx'),
-  createLazyRoute('/aud-twd', () => import('./pages/AUDToTWD'), 'src/pages/AUDToTWD.tsx'),
-  createLazyRoute('/aud-twd/:amount', () => import('./pages/AUDToTWD'), 'src/pages/AUDToTWD.tsx'),
-  createLazyRoute('/cad-twd', () => import('./pages/CADToTWD'), 'src/pages/CADToTWD.tsx'),
-  createLazyRoute('/cad-twd/:amount', () => import('./pages/CADToTWD'), 'src/pages/CADToTWD.tsx'),
-  createLazyRoute('/sgd-twd', () => import('./pages/SGDToTWD'), 'src/pages/SGDToTWD.tsx'),
-  createLazyRoute('/sgd-twd/:amount', () => import('./pages/SGDToTWD'), 'src/pages/SGDToTWD.tsx'),
-  createLazyRoute('/thb-twd', () => import('./pages/THBToTWD'), 'src/pages/THBToTWD.tsx'),
-  createLazyRoute('/thb-twd/:amount', () => import('./pages/THBToTWD'), 'src/pages/THBToTWD.tsx'),
-  createLazyRoute('/nzd-twd', () => import('./pages/NZDToTWD'), 'src/pages/NZDToTWD.tsx'),
-  createLazyRoute('/nzd-twd/:amount', () => import('./pages/NZDToTWD'), 'src/pages/NZDToTWD.tsx'),
-  createLazyRoute('/chf-twd', () => import('./pages/CHFToTWD'), 'src/pages/CHFToTWD.tsx'),
-  createLazyRoute('/chf-twd/:amount', () => import('./pages/CHFToTWD'), 'src/pages/CHFToTWD.tsx'),
-  createLazyRoute('/vnd-twd', () => import('./pages/VNDToTWD'), 'src/pages/VNDToTWD.tsx'),
-  createLazyRoute('/vnd-twd/:amount', () => import('./pages/VNDToTWD'), 'src/pages/VNDToTWD.tsx'),
-  createLazyRoute('/php-twd', () => import('./pages/PHPToTWD'), 'src/pages/PHPToTWD.tsx'),
-  createLazyRoute('/php-twd/:amount', () => import('./pages/PHPToTWD'), 'src/pages/PHPToTWD.tsx'),
-  createLazyRoute('/idr-twd', () => import('./pages/IDRToTWD'), 'src/pages/IDRToTWD.tsx'),
-  createLazyRoute('/idr-twd/:amount', () => import('./pages/IDRToTWD'), 'src/pages/IDRToTWD.tsx'),
-  createLazyRoute('/myr-twd', () => import('./pages/MYRToTWD'), 'src/pages/MYRToTWD.tsx'),
-  createLazyRoute('/myr-twd/:amount', () => import('./pages/MYRToTWD'), 'src/pages/MYRToTWD.tsx'),
+  ...CURRENCY_LANDING_ROUTE_REGISTRY.flatMap((route) => {
+    const importPage =
+      currencyLandingPageImports[route.pageModule as keyof typeof currencyLandingPageImports];
 
-  // 17 個反向幣別落地頁（TWD→外幣，出國換匯場景，SEO 預渲染）+ 各自的金額子路由
-  createLazyRoute('/twd-usd', () => import('./pages/TWDToUSD'), 'src/pages/TWDToUSD.tsx'),
-  createLazyRoute('/twd-usd/:amount', () => import('./pages/TWDToUSD'), 'src/pages/TWDToUSD.tsx'),
-  createLazyRoute('/twd-jpy', () => import('./pages/TWDToJPY'), 'src/pages/TWDToJPY.tsx'),
-  createLazyRoute('/twd-jpy/:amount', () => import('./pages/TWDToJPY'), 'src/pages/TWDToJPY.tsx'),
-  createLazyRoute('/twd-eur', () => import('./pages/TWDToEUR'), 'src/pages/TWDToEUR.tsx'),
-  createLazyRoute('/twd-eur/:amount', () => import('./pages/TWDToEUR'), 'src/pages/TWDToEUR.tsx'),
-  createLazyRoute('/twd-gbp', () => import('./pages/TWDToGBP'), 'src/pages/TWDToGBP.tsx'),
-  createLazyRoute('/twd-gbp/:amount', () => import('./pages/TWDToGBP'), 'src/pages/TWDToGBP.tsx'),
-  createLazyRoute('/twd-aud', () => import('./pages/TWDToAUD'), 'src/pages/TWDToAUD.tsx'),
-  createLazyRoute('/twd-aud/:amount', () => import('./pages/TWDToAUD'), 'src/pages/TWDToAUD.tsx'),
-  createLazyRoute('/twd-cad', () => import('./pages/TWDToCAD'), 'src/pages/TWDToCAD.tsx'),
-  createLazyRoute('/twd-cad/:amount', () => import('./pages/TWDToCAD'), 'src/pages/TWDToCAD.tsx'),
-  createLazyRoute('/twd-cny', () => import('./pages/TWDToCNY'), 'src/pages/TWDToCNY.tsx'),
-  createLazyRoute('/twd-cny/:amount', () => import('./pages/TWDToCNY'), 'src/pages/TWDToCNY.tsx'),
-  createLazyRoute('/twd-hkd', () => import('./pages/TWDToHKD'), 'src/pages/TWDToHKD.tsx'),
-  createLazyRoute('/twd-hkd/:amount', () => import('./pages/TWDToHKD'), 'src/pages/TWDToHKD.tsx'),
-  createLazyRoute('/twd-krw', () => import('./pages/TWDToKRW'), 'src/pages/TWDToKRW.tsx'),
-  createLazyRoute('/twd-krw/:amount', () => import('./pages/TWDToKRW'), 'src/pages/TWDToKRW.tsx'),
-  createLazyRoute('/twd-sgd', () => import('./pages/TWDToSGD'), 'src/pages/TWDToSGD.tsx'),
-  createLazyRoute('/twd-sgd/:amount', () => import('./pages/TWDToSGD'), 'src/pages/TWDToSGD.tsx'),
-  createLazyRoute('/twd-thb', () => import('./pages/TWDToTHB'), 'src/pages/TWDToTHB.tsx'),
-  createLazyRoute('/twd-thb/:amount', () => import('./pages/TWDToTHB'), 'src/pages/TWDToTHB.tsx'),
-  createLazyRoute('/twd-nzd', () => import('./pages/TWDToNZD'), 'src/pages/TWDToNZD.tsx'),
-  createLazyRoute('/twd-nzd/:amount', () => import('./pages/TWDToNZD'), 'src/pages/TWDToNZD.tsx'),
-  createLazyRoute('/twd-chf', () => import('./pages/TWDToCHF'), 'src/pages/TWDToCHF.tsx'),
-  createLazyRoute('/twd-chf/:amount', () => import('./pages/TWDToCHF'), 'src/pages/TWDToCHF.tsx'),
-  createLazyRoute('/twd-vnd', () => import('./pages/TWDToVND'), 'src/pages/TWDToVND.tsx'),
-  createLazyRoute('/twd-vnd/:amount', () => import('./pages/TWDToVND'), 'src/pages/TWDToVND.tsx'),
-  createLazyRoute('/twd-php', () => import('./pages/TWDToPHP'), 'src/pages/TWDToPHP.tsx'),
-  createLazyRoute('/twd-php/:amount', () => import('./pages/TWDToPHP'), 'src/pages/TWDToPHP.tsx'),
-  createLazyRoute('/twd-idr', () => import('./pages/TWDToIDR'), 'src/pages/TWDToIDR.tsx'),
-  createLazyRoute('/twd-idr/:amount', () => import('./pages/TWDToIDR'), 'src/pages/TWDToIDR.tsx'),
-  createLazyRoute('/twd-myr', () => import('./pages/TWDToMYR'), 'src/pages/TWDToMYR.tsx'),
-  createLazyRoute('/twd-myr/:amount', () => import('./pages/TWDToMYR'), 'src/pages/TWDToMYR.tsx'),
+    return [
+      createLazyRoute(route.path.replace(/\/$/, ''), importPage, route.entry),
+      createLazyRoute(route.amountPathPattern, importPage, route.entry),
+    ];
+  }),
 
   // SEO 技術揭露頁面
   createLazyRoute('/seo-tech', () => import('./pages/SeoTech'), 'src/pages/SeoTech.tsx'),
 
-  // 不預渲染內部工具頁面
-  createLazyRoute(
-    '/color-scheme',
-    () => import('./pages/ColorSchemeComparison'),
-    'src/pages/ColorSchemeComparison.tsx',
-  ),
-  createLazyRoute(
-    '/update-prompt-test',
-    () => import('./pages/UpdatePromptTest'),
-    'src/pages/UpdatePromptTest.tsx',
-  ),
-  createLazyRoute('/ui-showcase', () => import('./pages/UIShowcase'), 'src/pages/UIShowcase.tsx'),
+  ...(shouldEnableInternalRoutes
+    ? [
+        createLazyRoute(
+          '/color-scheme',
+          () => import('./pages/ColorSchemeComparison'),
+          'src/pages/ColorSchemeComparison.tsx',
+        ),
+        createLazyRoute(
+          '/update-prompt-test',
+          () => import('./pages/UpdatePromptTest'),
+          'src/pages/UpdatePromptTest.tsx',
+        ),
+        createLazyRoute(
+          '/ui-showcase',
+          () => import('./pages/UIShowcase'),
+          'src/pages/UIShowcase.tsx',
+        ),
+      ]
+    : []),
 
   // 不預渲染 404 頁面（動態處理）
   createLazyRoute('*', () => import('./pages/NotFound'), 'src/pages/NotFound.tsx'),
@@ -314,7 +303,7 @@ export const routes: RouteRecord[] = [
  * 指定哪些路徑應該被預渲染為靜態 HTML
  *
  * 策略：
- * - 預渲染：首頁、FAQ、About、Guide + 13 個幣別落地頁
- * - 不預渲染：404、color-scheme（動態處理或內部工具）
+ * - 預渲染：首頁、FAQ、About、Guide + 34 個幣別落地頁
+ * - 不預渲染：404、內部工具頁（production 不註冊）
  */
 export { getIncludedRoutes } from './config/seo-paths';
diff --git a/apps/ratewise/src/seo-truthfulness.test.ts b/apps/ratewise/src/seo-truthfulness.test.ts
index 62d6dcfc8..f6935dede 100644
--- a/apps/ratewise/src/seo-truthfulness.test.ts
+++ b/apps/ratewise/src/seo-truthfulness.test.ts
@@ -69,6 +69,47 @@ describe('SEO 內容真實性與 SSOT', () => {
     expect(seoMetadata).not.toContain('均符合 Google Rich Results 規範');
   });
 
+  it('SEO 與機器可讀文案不得保留過度承諾或 AI-first 標語', () => {
+    const files = [
+      'src/config/seo-static.ts',
+      'src/config/seo-paths.ts',
+      'src/config/seo-metadata.ts',
+      'src/pages/OpenData.tsx',
+      'src/pages/SeoTech.tsx',
+      'src/pages/Guide.tsx',
+      'scripts/generate-llms-txt.mjs',
+      'scripts/generate-markdown-mirrors.mjs',
+      'scripts/generate-api-json.mjs',
+      'public/index.md',
+      'public/about.md',
+      'public/open-data.md',
+      'public/faq.md',
+      'public/llms.txt',
+      'public/llms-full.txt',
+      'public/api/latest.json',
+    ];
+
+    const riskyPatterns = [
+      /台灣最精準/,
+      /最精準/,
+      /精確估算/,
+      /無請求上限/,
+      /AI-Ready/,
+      /AI 友善/,
+      /每 5 分鐘自動同步/,
+      /每 5 分鐘自動更新/,
+      /每 5 分鐘自動抓取/,
+      /無速率限制/,
+    ];
+
+    for (const file of files) {
+      const content = read(file);
+      for (const pattern of riskyPatterns) {
+        expect(content, `${file} still contains ${pattern}`).not.toMatch(pattern);
+      }
+    }
+  });
+
   it('Google-Extended 說明應與 Google 官方 crawler 角色一致', () => {
     const seoMetadata = read('src/config/seo-metadata.ts');
     const aboutMarkdown = read('public/about.md');
diff --git a/apps/ratewise/src/services/__tests__/exchangeRateService.test.ts b/apps/ratewise/src/services/__tests__/exchangeRateService.test.ts
index a459557b2..ec8a1b4ba 100644
--- a/apps/ratewise/src/services/__tests__/exchangeRateService.test.ts
+++ b/apps/ratewise/src/services/__tests__/exchangeRateService.test.ts
@@ -249,32 +249,42 @@ describe('exchangeRateService', () => {
       );
     });
 
-    it('CDN 失敗且完全無快取時拋出錯誤', async () => {
+    it('CDN 失敗且完全無快取時使用 build-time fallback', async () => {
       // ✅ 完全無快取
       (global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
 
-      await expect(getExchangeRates()).rejects.toThrow('Network error');
+      const result = await getExchangeRates();
+
+      expect(result.source).toBe('fallback');
+      expect(result.updateTime).toBe('遠端匯率暫不可用 - 使用預設匯率');
+      expect(logger.logger.error).toHaveBeenCalled();
     });
 
-    it('CDN 返回 HTTP 錯誤時拋出異常', async () => {
+    it('CDN 返回 HTTP 錯誤時使用 build-time fallback', async () => {
       (global.fetch as any).mockResolvedValueOnce({
         ok: false,
         status: 500,
         statusText: 'Internal Server Error',
       });
 
-      await expect(getExchangeRates()).rejects.toThrow('Failed to fetch from all');
+      const result = await getExchangeRates();
+
+      expect(result.source).toBe('fallback');
+      expect(result.updateTime).toBe('遠端匯率暫不可用 - 使用預設匯率');
       expect(logger.logger.error).toHaveBeenCalled();
     });
 
-    it('CDN 返回無效資料格式時拋出異常', async () => {
+    it('CDN 返回無效資料格式時使用 build-time fallback', async () => {
       (global.fetch as any).mockResolvedValueOnce({
         ok: true,
         json: async () => ({ invalid: 'data' }), // ✅ Missing 'rates'
       });
 
-      await expect(getExchangeRates()).rejects.toThrow();
-      expect(logger.logger.warn).toHaveBeenCalledWith(
+      const result = await getExchangeRates();
+
+      expect(result.source).toBe('fallback');
+      expect(result.updateTime).toBe('遠端匯率暫不可用 - 使用預設匯率');
+      expect(logger.logger.debug).toHaveBeenCalledWith(
         expect.stringContaining('CDN #1 failed'),
         expect.any(Object),
       );
@@ -293,16 +303,22 @@ describe('exchangeRateService', () => {
       const result = await getExchangeRates();
 
       expect(result).toEqual(mockRateData);
-      expect(logger.logger.warn).toHaveBeenCalledWith(
+      expect(logger.logger.debug).toHaveBeenCalledWith(
         expect.stringContaining('CDN #1 failed'),
         expect.any(Object),
       );
     });
 
-    it('所有 CDN 失敗時拋出錯誤訊息', async () => {
+    it('所有 CDN 失敗時使用 build-time fallback', async () => {
       (global.fetch as any).mockRejectedValue(new Error('Network timeout'));
 
-      await expect(getExchangeRates()).rejects.toThrow(/Failed to fetch from all.*sources/);
+      const result = await getExchangeRates();
+
+      expect(result.source).toBe('fallback');
+      expect(result.updateTime).toBe('遠端匯率暫不可用 - 使用預設匯率');
+      expect(logger.logger.warn).toHaveBeenCalledWith(
+        'Remote rates unavailable and no cache available, using fallback rates',
+      );
     });
 
     it('快取損壞時從 CDN 獲取新資料', async () => {
@@ -596,8 +612,8 @@ describe('exchangeRateService', () => {
       expect(saved.etag).toBe('"v1-abc"');
     });
 
-    it('快取含 ETag 時，對 CDN_URLS[0]（jsDelivr）發送 If-None-Match 標頭', async () => {
-      // 過期快取含 ETag（SWR 路徑：立即返回 stale，背景 fetch 帶 If-None-Match）
+    it('即使快取存有 ETag，也不對 CDN 發送 If-None-Match（jsDelivr preflight 不允許）', async () => {
+      // 過期快取含 ETag（SWR 路徑：立即返回 stale，背景 fetch 觸發 CDN 請求）
       const cachedData = {
         data: mockRateData,
         timestamp: Date.now() - 10 * 60 * 1000,
@@ -620,37 +636,13 @@ describe('exchangeRateService', () => {
 
       // fetch 在 SWR 背景立即被呼叫（synchronous before return）
       expect(global.fetch).toHaveBeenCalled();
-      const sentHeaders = capturedInit?.headers as Record<string, string> | undefined;
-      expect(sentHeaders?.['If-None-Match']).toBe('"stored-etag-v1"');
-    });
-
-    it('快取無 ETag 時，不發送 If-None-Match 標頭', async () => {
-      // 過期快取，但沒有 ETag 欄位
-      const cachedData = {
-        data: mockRateData,
-        timestamp: Date.now() - 10 * 60 * 1000,
-        // 刻意省略 etag
-      };
-      mockLocalStorage.setItem('exchangeRates', JSON.stringify(cachedData));
-
-      let capturedInit: RequestInit | undefined;
-      (global.fetch as any).mockImplementation((_: unknown, init?: RequestInit) => {
-        capturedInit = init;
-        return Promise.resolve({
-          status: 200,
-          ok: true,
-          json: async () => mockRateData,
-          headers: { get: () => null },
-        });
-      });
-
-      await getExchangeRates();
-
-      const sentHeaders = capturedInit?.headers as Record<string, string> | undefined;
-      expect(sentHeaders?.['If-None-Match']).toBeUndefined();
+      const headerKeys = Object.keys((capturedInit?.headers ?? {}) as Record<string, string>).map(
+        (k) => k.toLowerCase(),
+      );
+      expect(headerKeys).not.toContain('if-none-match');
     });
 
-    it('CDN_URLS[1]（GitHub Raw 備援）不發送 If-None-Match 標頭', async () => {
+    it('CDN_URLS[1]（GitHub Raw 備援）即使快取有 ETag 也不發送 If-None-Match', async () => {
       // 過期快取含 ETag，CDN_URLS[0] 失敗 → 落到 CDN_URLS[1]
       const cachedData = {
         data: mockRateData,
@@ -677,41 +669,13 @@ describe('exchangeRateService', () => {
 
       await getExchangeRates();
 
-      // CDN_URLS[0]（jsDelivr）：應帶 If-None-Match
-      const firstHeaders = capturedInits[0]?.headers as Record<string, string> | undefined;
-      expect(firstHeaders?.['If-None-Match']).toBe('"v1"');
-
-      // CDN_URLS[1]（GitHub Raw）：不帶 If-None-Match
-      const secondHeaders = capturedInits[1]?.headers as Record<string, string> | undefined;
-      expect(secondHeaders?.['If-None-Match']).toBeUndefined();
-    });
-
-    it('CDN 返回 304 Not Modified 時，背景更新記錄 ETag 命中日誌', async () => {
-      // 過期快取含 ETag
-      const cachedData = {
-        data: { ...mockRateData, updateTime: '304-test-timestamp' },
-        timestamp: Date.now() - 10 * 60 * 1000,
-        etag: '"v1"',
-      };
-      mockLocalStorage.setItem('exchangeRates', JSON.stringify(cachedData));
-
-      (global.fetch as any).mockResolvedValueOnce({
-        status: 304,
-        ok: false, // 304 在 response.ok 為 false，但先被 status === 304 分支攔截
-        headers: { get: () => null },
-      });
-
-      // SWR：立即返回 stale 資料
-      const result = await getExchangeRates();
-      expect(result.updateTime).toBe('304-test-timestamp');
-
-      // 排空 microtask queue，讓背景 fetch 鏈完成（fetchWithTimeout → fetchFromCDN → .then）
-      for (let i = 0; i < 10; i++) await Promise.resolve();
-
-      expect(logger.logger.info).toHaveBeenCalledWith(
-        expect.stringContaining('ETag hit'),
-        expect.any(Object),
-      );
+      // CDN_URLS[0]（jsDelivr）與 CDN_URLS[1]（GitHub Raw）皆不帶 If-None-Match
+      for (const init of capturedInits) {
+        const headerKeys = Object.keys((init.headers ?? {}) as Record<string, string>).map((k) =>
+          k.toLowerCase(),
+        );
+        expect(headerKeys).not.toContain('if-none-match');
+      }
     });
   });
 
diff --git a/apps/ratewise/src/services/__tests__/moneyboxRateService.aggregate.test.ts b/apps/ratewise/src/services/__tests__/moneyboxRateService.aggregate.test.ts
new file mode 100644
index 000000000..2f6ab1079
--- /dev/null
+++ b/apps/ratewise/src/services/__tests__/moneyboxRateService.aggregate.test.ts
@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { fetchExchangeShopHistoricalRatesRange } from '../moneyboxRateService';
+
+const MOCK_DAILY_JSON = {
+  updateTime: '2026/05/14 10:00:00',
+  rates: {
+    TWD: { sell: 44.85, buy: 45.1 },
+  },
+};
+
+const MOCK_AGGREGATE = {
+  providerId: 'moneybox',
+  generatedAt: '2026-05-14T02:00:00Z',
+  snapshots: [
+    { date: '2026-05-14', raw: { ...MOCK_DAILY_JSON, updateTime: '2026/05/14 10:00:00' } },
+    {
+      date: '2026-05-13',
+      raw: {
+        ...MOCK_DAILY_JSON,
+        updateTime: '2026/05/13 10:00:00',
+        rates: { TWD: { sell: 44.7, buy: 44.95 } },
+      },
+    },
+    {
+      date: '2026-05-12',
+      raw: {
+        ...MOCK_DAILY_JSON,
+        updateTime: '2026/05/12 10:00:00',
+        rates: { TWD: { sell: 44.6, buy: 44.85 } },
+      },
+    },
+  ],
+};
+
+function mockJsonResponse(payload: unknown): Response {
+  return {
+    ok: true,
+    status: 200,
+    json: () => Promise.resolve(payload),
+    headers: { get: () => null },
+  } as unknown as Response;
+}
+
+function mock404(): Response {
+  return { ok: false, status: 404, json: () => Promise.resolve({}) } as unknown as Response;
+}
+
+describe('fetchExchangeShopHistoricalRatesRange - aggregate endpoint', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.stubGlobal('fetch', vi.fn());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it('aggregate 命中時只發一次 fetch（30→1）', async () => {
+    vi.mocked(fetch).mockResolvedValueOnce(mockJsonResponse(MOCK_AGGREGATE));
+
+    const result = await fetchExchangeShopHistoricalRatesRange('KRW', 30);
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    const requested = vi.mocked(fetch).mock.calls[0]?.[0];
+    expect(typeof requested === 'string' ? requested : '').toContain(
+      '/providers/moneybox/history-30d.json',
+    );
+    expect(result).toHaveLength(3);
+    expect(result[0]?.date).toBe('2026-05-14');
+    expect(result[0]?.rate.sell).toBe(44.85);
+  });
+
+  it('aggregate 404 時退回逐日 fetch（保留現有行為）', async () => {
+    vi.mocked(fetch).mockImplementation((input) => {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.href : '';
+      if (url.includes('history-30d.json')) {
+        return Promise.resolve(mock404());
+      }
+      return Promise.resolve(mockJsonResponse(MOCK_DAILY_JSON));
+    });
+
+    const result = await fetchExchangeShopHistoricalRatesRange('KRW', 5);
+
+    expect(fetch).toHaveBeenCalled();
+    expect(vi.mocked(fetch).mock.calls.length).toBeGreaterThan(1);
+    expect(result.length).toBeGreaterThan(0);
+  });
+
+  it('aggregate shape 不合法時退回逐日 fetch', async () => {
+    vi.mocked(fetch).mockImplementation((input) => {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.href : '';
+      if (url.includes('history-30d.json')) {
+        return Promise.resolve(mockJsonResponse({ providerId: 'moneybox' })); // 缺 snapshots
+      }
+      return Promise.resolve(mockJsonResponse(MOCK_DAILY_JSON));
+    });
+
+    const result = await fetchExchangeShopHistoricalRatesRange('KRW', 3);
+
+    expect(vi.mocked(fetch).mock.calls.length).toBeGreaterThan(1);
+    expect(result.length).toBeGreaterThan(0);
+  });
+
+  it('5 分鐘 TTL 內重複呼叫應走 memory cache，不再 fetch', async () => {
+    // maxDays 28 隔開其他 test 共享的 cache key
+    vi.mocked(fetch).mockResolvedValueOnce(mockJsonResponse(MOCK_AGGREGATE));
+
+    await fetchExchangeShopHistoricalRatesRange('KRW', 28);
+    await fetchExchangeShopHistoricalRatesRange('KRW', 28);
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/ratewise/src/services/__tests__/moneyboxRateService.test.ts b/apps/ratewise/src/services/__tests__/moneyboxRateService.test.ts
index 7825e1a73..db762a2bb 100644
--- a/apps/ratewise/src/services/__tests__/moneyboxRateService.test.ts
+++ b/apps/ratewise/src/services/__tests__/moneyboxRateService.test.ts
@@ -132,7 +132,7 @@ describe('fetchExchangeShopRate', () => {
     expect(result).toBeNull();
   });
 
-  it('returns cached rate when server responds with 304 Not Modified', async () => {
+  it('即使快取存有 ETag，也不對 CDN 發送 If-None-Match', async () => {
     // First call: warm the cache
     vi.mocked(fetch).mockResolvedValueOnce({
       ok: true,
@@ -147,18 +147,25 @@ describe('fetchExchangeShopRate', () => {
     const cached = JSON.parse(localStorage.getItem(key)!);
     localStorage.setItem(key, JSON.stringify({ ...cached, timestamp: 0 }));
 
-    // Second call: CDN returns 304
-    vi.mocked(fetch).mockResolvedValueOnce({
-      ok: true,
-      status: 304,
-      json: () => Promise.resolve(null),
-      headers: { get: () => null },
-    } as unknown as Response);
+    let capturedInit: RequestInit | undefined;
+    vi.mocked(fetch).mockImplementationOnce((_, init?: RequestInit) => {
+      capturedInit = init;
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(MOCK_MONEYBOX_JSON),
+        headers: { get: () => null },
+      } as unknown as Response);
+    });
 
     const result = await fetchExchangeShopRate('KRW');
     expect(result).not.toBeNull();
     expect(result!.sell).toBe(44.85);
     expect(result!.isFallback).toBe(false);
+    const headerKeys = Object.keys((capturedInit?.headers ?? {}) as Record<string, string>).map(
+      (key) => key.toLowerCase(),
+    );
+    expect(headerKeys).not.toContain('if-none-match');
   });
 
   it('falls back to secondary CDN URL when primary fails', async () => {
@@ -183,12 +190,23 @@ describe('fetchExchangeShopRate', () => {
   it('fetches MoneyBox history through provider metadata endpoints', async () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date('2026-05-10T12:00:00+08:00'));
-    vi.mocked(fetch).mockResolvedValueOnce({
-      ok: true,
-      status: 200,
-      json: () => Promise.resolve(MOCK_MONEYBOX_JSON),
-      headers: { get: () => null },
-    } as unknown as Response);
+    // aggregate endpoint 尚未發布時的 fallback 路徑
+    vi.mocked(fetch).mockImplementation((input) => {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.href : '';
+      if (url.includes('history-30d.json')) {
+        return Promise.resolve({
+          ok: false,
+          status: 404,
+          json: () => Promise.resolve({}),
+        } as unknown as Response);
+      }
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(MOCK_MONEYBOX_JSON),
+        headers: { get: () => null },
+      } as unknown as Response);
+    });
 
     const result = await fetchExchangeShopHistoricalRatesRange('KRW', 1);
 
@@ -232,6 +250,26 @@ describe('computeConverterRate', () => {
     expect(r).toBeCloseTo(1 / 45.1, 5);
   });
 
+  it('mid 模式：TWD→KRW 回傳 (buy+sell)/2 中間價', () => {
+    const mid = (45.1 + 44.85) / 2;
+    expect(computeConverterRate(rate, 'TWD', 'KRW', 'mid')).toBeCloseTo(mid, 5);
+  });
+
+  it('mid 模式：KRW→TWD 回傳 1/中間價', () => {
+    const mid = (45.1 + 44.85) / 2;
+    expect(computeConverterRate(rate, 'KRW', 'TWD', 'mid')).toBeCloseTo(1 / mid, 5);
+  });
+
+  it('sell 模式：雙向皆以 sell 價計算', () => {
+    expect(computeConverterRate(rate, 'TWD', 'KRW', 'sell')).toBeCloseTo(44.85, 5);
+    expect(computeConverterRate(rate, 'KRW', 'TWD', 'sell')).toBeCloseTo(1 / 44.85, 5);
+  });
+
+  it('未傳 rateMode 時維持 auto 客戶視角（向後相容）', () => {
+    expect(computeConverterRate(rate, 'TWD', 'KRW')).toBeCloseTo(44.85, 5);
+    expect(computeConverterRate(rate, 'KRW', 'TWD')).toBeCloseTo(1 / 45.1, 5);
+  });
+
   it('returns null for non-KRW pairs', () => {
     expect(computeConverterRate(rate, 'USD', 'KRW')).toBeNull();
     expect(computeConverterRate(rate, 'KRW', 'JPY')).toBeNull();
diff --git a/apps/ratewise/src/services/exchangeRateService.ts b/apps/ratewise/src/services/exchangeRateService.ts
index 4b3906854..f20524f58 100644
--- a/apps/ratewise/src/services/exchangeRateService.ts
+++ b/apps/ratewise/src/services/exchangeRateService.ts
@@ -16,44 +16,19 @@ import {
 } from '../utils/offlineStorage';
 import buildTimeRates from '../config/generated/build-time-rates.json';
 
-/**
- * 離線 fallback 預設匯率
- *
- * 當用戶首次離線訪問（無 localStorage 快取）時使用。
- * 數據來源: 台灣銀行牌告匯率（近似值）
- * 這確保 PWA 在任何情況下都能顯示 UI，而非 Safari 的「無法打開網頁」錯誤
- */
-const FALLBACK_RATES: Record<string, number> = {
-  TWD: 1,
-  USD: 32.5,
-  HKD: 4.18,
-  GBP: 41.0,
-  AUD: 20.5,
-  CAD: 22.8,
-  SGD: 24.0,
-  CHF: 36.5,
-  JPY: 0.21,
-  EUR: 33.8,
-  KRW: 0.023,
-  CNY: 4.45,
-  NZD: 18.8,
-  THB: 0.95,
-  PHP: 0.56,
-  IDR: 0.002,
-  VND: 0.0013,
-  MYR: 7.3,
-};
-
 // ExchangeRateData 類型從 offlineStorage.ts 導入，確保類型一致性
 
 // CDN URLs
 // 策略：jsDelivr CDN 為主要端點，GitHub Raw 為備援。
 // jsDelivr CDN edge 快取 12 小時（s-maxage=43200），但 update-latest-rates.yml 在每次
 // 推送 data 分支後自動呼叫 jsDelivr Purge API，使快取立即失效 → 實際新鮮度約 5 分鐘。
-// 優勢：全球 PoP 加速、無速率限制、支援 ETag 條件式請求（省頻寬）。
-// GitHub Raw 作為備援：無快取但每 IP 每小時限 60 次請求，無 CORS ETag 暴露。
+// 優勢：全球 PoP 加速、CDN 快取。
+// [2026-06-12] 不使用 ETag 條件式請求（If-None-Match 非 CORS safelisted，
+// jsDelivr preflight 會拒絕，導致主 CDN 永遠失敗並降級）；頻寬由瀏覽器 HTTP cache
+// 與 5 分鐘 localStorage TTL 控制。
+// GitHub Raw 作為備援：無快取但每 IP 每小時限 60 次請求。
 const CDN_URLS = [
-  // jsDelivr CDN（主要）- Purge 後立即最新，支援 ETag，全球加速
+  // jsDelivr CDN（主要）- Purge 後立即最新，全球加速
   'https://cdn.jsdelivr.net/gh/haotool/app@data/public/rates/latest.json',
   // GitHub Raw（備援）- 無快取，速率限制 60 req/hr/IP
   'https://raw.githubusercontent.com/haotool/app/data/public/rates/latest.json',
@@ -76,7 +51,7 @@ const IS_LHCI_OFFLINE = import.meta.env['VITE_LHCI_OFFLINE'] === 'true';
 interface CachedData {
   data: ExchangeRateData;
   timestamp: number;
-  etag?: string; // ETag 條件式請求（jsDelivr 支援 Access-Control-Expose-Headers: *）
+  etag?: string; // 保留回應 ETag 供未來 proxy/worker 路徑重新啟用條件式請求
 }
 
 interface FetchResult {
@@ -88,6 +63,19 @@ export function getBuildTimeExchangeRates(): ExchangeRateData {
   return buildTimeRates as ExchangeRateData;
 }
 
+function buildFallbackExchangeRates(updateTime: string): ExchangeRateData {
+  const fallbackRates = getBuildTimeExchangeRates();
+  return {
+    ...fallbackRates,
+    updateTime,
+    source: 'fallback',
+    rates: {
+      TWD: 1,
+      ...fallbackRates.rates,
+    },
+  };
+}
+
 /**
  * 讀取完整快取條目（含 ETag）；不捕獲例外，由呼叫端決定錯誤處理方式。
  */
@@ -161,10 +149,11 @@ function saveToCache(data: ExchangeRateData, etag?: string): void {
 /**
  * 從 CDN 獲取匯率資料（帶 fallback）
  *
- * ETag 條件式請求策略（僅適用 CDN_URLS[0] jsDelivr）：
- * - jsDelivr 回應包含 Access-Control-Expose-Headers: *，瀏覽器可讀取 ETag。
- * - 若快取中有 ETag，發送 If-None-Match header；304 時重置快取時間戳，省去 ~5 KB 下載。
- * - GitHub Raw（index > 0）不暴露 ETag，條件式請求不適用。
+ * [2026-06-12] 不發送 If-None-Match：該 header 非 CORS safelisted，jsDelivr 的
+ * Access-Control-Allow-Headers 不允許它，導致 preflight 被拒、主 CDN 永遠失敗並
+ * 降級到 GitHub Raw（每 IP 每小時 60 次限制）。回應 ETag 仍會讀取並存入快取
+ * （供未來改走自家 Worker proxy 時重新啟用條件請求），但不再用於後續請求。
+ * 頻寬由瀏覽器 HTTP cache 與 5 分鐘 localStorage TTL 控制。
  */
 async function fetchFromCDN(signal?: AbortSignal): Promise<FetchResult> {
   const errors: Error[] = [];
@@ -177,32 +166,15 @@ async function fetchFromCDN(signal?: AbortSignal): Promise<FetchResult> {
     try {
       logger.debug(`Trying CDN #${i + 1}/${CDN_URLS.length}`, { url: url.substring(0, 80) });
 
-      // ETag 條件式請求（僅 CDN_URLS[0] jsDelivr 支援 CORS 暴露 ETag）。
-      const cachedEntry = i === 0 ? getCachedEntry() : null;
-      const storedETag = cachedEntry?.etag;
-      const headers: Record<string, string> = {};
-      if (storedETag) {
-        headers['If-None-Match'] = storedETag;
-      }
-
-      // [2025-12-10] 使用 fetchWithRequestId 自動注入 X-Correlation-ID header
+      // [2026-06-12] 不發送 If-None-Match：該 header 非 CORS safelisted，
+      // jsDelivr preflight 不允許，會使主 CDN 永遠失敗並降級到 GitHub Raw(60 req/hr)。
+      // 頻寬由瀏覽器 HTTP cache 與 5 分鐘 localStorage TTL 控制。
       const fetchInit: RequestInit = {
         ...(signal ? { signal } : {}),
-        ...(Object.keys(headers).length > 0 ? { headers } : {}),
       };
-      const response = await fetchWithRequestId(url, fetchInit);
 
-      // 304 Not Modified：資料未變更，重置快取時間戳以延長 5 分鐘有效期。
-      if (response.status === 304) {
-        if (cachedEntry) {
-          logger.info('ETag hit: 304 Not Modified, refreshing cache timestamp', {
-            etag: storedETag,
-          });
-          return { data: cachedEntry.data, etag: cachedEntry.etag };
-        }
-        // 304 但無快取（不應發生，安全起見繼續嘗試下一個來源）
-        throw new Error('304 Not Modified but no cached data available');
-      }
+      // [2025-12-10] 使用 fetchWithRequestId 自動注入 X-Correlation-ID header
+      const response = await fetchWithRequestId(url, fetchInit);
 
       if (!response.ok) {
         throw new Error(`HTTP ${response.status}: ${response.statusText}`);
@@ -230,7 +202,11 @@ async function fetchFromCDN(signal?: AbortSignal): Promise<FetchResult> {
     } catch (error) {
       const elapsed = Date.now() - startTime;
       errors.push(error instanceof Error ? error : new Error(String(error)));
-      logger.warn(`CDN #${i + 1} failed`, { elapsedMs: elapsed, error });
+      const message =
+        i < CDN_URLS.length - 1
+          ? `CDN #${i + 1} failed, trying fallback source`
+          : `CDN #${i + 1} failed`;
+      logger.debug(message, { elapsedMs: elapsed, error });
       continue;
     }
   }
@@ -296,7 +272,7 @@ function getAnyCachedData(): ExchangeRateData | null {
  * 3. 網路失敗時使用任何可用快取（即使過期）
  *
  * Safari PWA 冷啟動離線優化：
- * 4. 增加 IndexedDB 作為第二層備援（localStorage → IndexedDB → FALLBACK_RATES）
+ * 4. 增加 IndexedDB 作為第二層備援（localStorage → IndexedDB → build-time snapshot）
  * 5. IndexedDB 有效期 7 天，比 localStorage (5 分鐘) 更持久
  */
 export async function getExchangeRates(): Promise<ExchangeRateData> {
@@ -331,7 +307,7 @@ export async function getExchangeRates(): Promise<ExchangeRateData> {
             ageDays: staleness.ageDays,
             message: staleness.message,
           });
-          // 超過 7 天，回落到 FALLBACK_RATES 避免誤導用戶
+          // 超過 7 天，回落到 build-time snapshot 避免誤導用戶
         } else {
           logger.info('Offline mode: using IndexedDB cache (Safari PWA fallback)', {
             updateTime: idbData.updateTime,
@@ -345,17 +321,9 @@ export async function getExchangeRates(): Promise<ExchangeRateData> {
       logger.warn('Offline mode: IndexedDB read failed', { error: idbError });
     }
 
-    // 第三層：使用硬編碼 fallback 數據
+    // 第三層：使用 build-time fallback snapshot
     logger.warn('Offline mode: no cache available, using fallback rates');
-    return {
-      timestamp: new Date().toISOString(),
-      updateTime: '離線模式 - 使用預設匯率',
-      source: 'fallback',
-      sourceUrl: '',
-      base: 'TWD',
-      rates: FALLBACK_RATES,
-      details: {},
-    };
+    return buildFallbackExchangeRates('離線模式 - 使用預設匯率');
   }
 
   // 1. 嘗試從快取讀取（getFromCache 只返回 5 分鐘內的新鮮資料）
@@ -408,7 +376,8 @@ export async function getExchangeRates(): Promise<ExchangeRateData> {
       logger.warn('IndexedDB fallback read failed', { error: idbError });
     }
 
-    throw error;
+    logger.warn('Remote rates unavailable and no cache available, using fallback rates');
+    return buildFallbackExchangeRates('遠端匯率暫不可用 - 使用預設匯率');
   }
 }
 
diff --git a/apps/ratewise/src/services/moneyboxRateService.ts b/apps/ratewise/src/services/moneyboxRateService.ts
index 4ef188f5a..fdc23522c 100644
--- a/apps/ratewise/src/services/moneyboxRateService.ts
+++ b/apps/ratewise/src/services/moneyboxRateService.ts
@@ -4,14 +4,17 @@ import {
   hasExchangeShopProvider,
   type ExchangeShopConfig,
 } from '../config/exchangeShopProviders';
-import { CDN_DATA_BASE, RAW_DATA_BASE } from '../config/api-endpoints';
+import { CDN_DATA_BASE, PROVIDER_RATES_PATH, RAW_DATA_BASE } from '../config/api-endpoints';
 import { buildPublicRateProviderMetadata } from '../config/rateProviderPublicMetadata';
 import { CURRENCY_DEFINITIONS } from '../features/ratewise/constants';
-import type { CurrencyCode } from '../features/ratewise/types';
+import type { CurrencyCode, RateMode } from '../features/ratewise/types';
 import { STORAGE_KEYS } from '../features/ratewise/storage-keys';
 
 const CACHE_DURATION_MS = 5 * 60 * 1000;
 const FETCH_TIMEOUT_MS = 8_000;
+const HISTORY_AGGREGATE_TTL_MS = 5 * 60 * 1000;
+const EXCHANGE_SHOP_PROVIDER_ID = 'moneybox';
+
 export interface ExchangeShopRate {
   currency: CurrencyCode;
   sell: number;
@@ -29,6 +32,22 @@ export interface ExchangeShopHistoricalRate {
   rate: ExchangeShopRate;
 }
 
+interface ExchangeShopAggregateSnapshot {
+  date: string;
+  raw: unknown;
+}
+
+interface ExchangeShopAggregateData {
+  providerId?: string;
+  generatedAt?: string;
+  snapshots: ExchangeShopAggregateSnapshot[];
+}
+
+const historyAggregateCache = new Map<
+  string,
+  { data: ExchangeShopHistoricalRate[]; timestamp: number }
+>();
+
 interface CacheEntry {
   rate: ExchangeShopRate;
   timestamp: number;
@@ -147,24 +166,12 @@ async function fetchWithTimeout(url: string, init?: RequestInit): Promise<Respon
   }
 }
 
-async function fetchFromCDN(
-  config: ExchangeShopConfig,
-  cachedEtag?: string,
-): Promise<{ raw: unknown; etag?: string; notModified: boolean }> {
+async function fetchFromCDN(config: ExchangeShopConfig): Promise<{ raw: unknown; etag?: string }> {
   const urls = [config.cdnUrl, config.cdnUrlFallback];
 
   for (const url of urls) {
     try {
-      const headers: Record<string, string> = {};
-      if (url === config.cdnUrl && cachedEtag) {
-        headers['If-None-Match'] = cachedEtag;
-      }
-
-      const res = await fetchWithTimeout(url, { headers });
-
-      if (res.status === 304) {
-        return { raw: null, notModified: true };
-      }
+      const res = await fetchWithTimeout(url);
 
       if (!res.ok) {
         logger.warn(`Exchange shop CDN returned ${res.status}`, { url });
@@ -173,7 +180,7 @@ async function fetchFromCDN(
 
       const raw: unknown = await res.json();
       const etag = res.headers.get('etag') ?? undefined;
-      return { raw, etag, notModified: false };
+      return { raw, etag };
     } catch (e) {
       logger.warn(`Exchange shop CDN fetch failed`, { url, error: e });
     }
@@ -197,12 +204,7 @@ export async function fetchExchangeShopRate(
   }
 
   try {
-    const { raw, etag, notModified } = await fetchFromCDN(config, cached?.etag);
-
-    if (notModified && cached) {
-      writeCache(currency, { ...cached, timestamp: Date.now() });
-      return cached.rate;
-    }
+    const { raw, etag } = await fetchFromCDN(config);
 
     const rate = parseExchangeShopRate(currency, config, raw);
 
@@ -219,16 +221,52 @@ export async function fetchExchangeShopRate(
   }
 }
 
-export async function fetchExchangeShopHistoricalRatesRange(
+function getExchangeShopAggregateUrls(): string[] {
+  const path = PROVIDER_RATES_PATH.aggregate(EXCHANGE_SHOP_PROVIDER_ID);
+  return [`${CDN_DATA_BASE}${path}`, `${RAW_DATA_BASE}${path}`];
+}
+
+function getAggregateCacheKey(currency: CurrencyCode, totalDays: number): string {
+  return `${EXCHANGE_SHOP_PROVIDER_ID}:${currency}:${totalDays}`;
+}
+
+async function tryFetchExchangeShopAggregate(
   currency: CurrencyCode,
-  maxDays = 30,
-): Promise<ExchangeShopHistoricalRate[]> {
-  if (!hasExchangeShopProvider(currency)) return [];
+  config: ExchangeShopConfig,
+  totalDays: number,
+): Promise<ExchangeShopHistoricalRate[] | null> {
+  for (const url of getExchangeShopAggregateUrls()) {
+    try {
+      const res = await fetchWithTimeout(url);
+      if (!res.ok) continue;
 
-  const config = getExchangeShopProvider(currency);
-  if (!config) return [];
+      const data = (await res.json()) as ExchangeShopAggregateData;
+      if (!data || !Array.isArray(data.snapshots)) {
+        logger.warn('Invalid exchange shop aggregate shape', { url });
+        continue;
+      }
 
-  const totalDays = Math.max(1, Math.floor(maxDays));
+      const points: ExchangeShopHistoricalRate[] = [];
+      for (const snapshot of data.snapshots) {
+        if (!snapshot?.date) continue;
+        const rate = parseExchangeShopRate(currency, config, snapshot.raw);
+        if (rate) points.push({ date: snapshot.date, rate });
+      }
+      if (points.length === 0) continue;
+
+      return points.sort((a, b) => b.date.localeCompare(a.date)).slice(0, totalDays);
+    } catch (e) {
+      logger.debug(`Exchange shop aggregate fetch failed for ${url}`, { error: e });
+    }
+  }
+  return null;
+}
+
+async function fetchExchangeShopHistoricalRatesFromDailyEndpoints(
+  currency: CurrencyCode,
+  config: ExchangeShopConfig,
+  totalDays: number,
+): Promise<ExchangeShopHistoricalRate[]> {
   const today = new Date();
   today.setHours(0, 0, 0, 0);
 
@@ -263,15 +301,58 @@ export async function fetchExchangeShopHistoricalRatesRange(
     .sort((a, b) => b.date.localeCompare(a.date));
 }
 
+export async function fetchExchangeShopHistoricalRatesRange(
+  currency: CurrencyCode,
+  maxDays = 30,
+): Promise<ExchangeShopHistoricalRate[]> {
+  if (!hasExchangeShopProvider(currency)) return [];
+
+  const config = getExchangeShopProvider(currency);
+  if (!config) return [];
+
+  const totalDays = Math.max(1, Math.floor(maxDays));
+  const cacheKey = getAggregateCacheKey(currency, totalDays);
+
+  const cached = historyAggregateCache.get(cacheKey);
+  if (cached && Date.now() - cached.timestamp < HISTORY_AGGREGATE_TTL_MS) {
+    return cached.data;
+  }
+
+  const result =
+    (await tryFetchExchangeShopAggregate(currency, config, totalDays)) ??
+    (await fetchExchangeShopHistoricalRatesFromDailyEndpoints(currency, config, totalDays));
+
+  if (result.length > 0) {
+    historyAggregateCache.set(cacheKey, { data: result, timestamp: Date.now() });
+  }
+
+  return result;
+}
+
+/**
+ * 換錢所單位匯率 SSOT：依 rateMode 選價，禁止在呼叫端硬編碼買賣價方向。
+ *
+ * | mode | TWD→外幣 | 外幣→TWD | 說明 |
+ * |------|---------|---------|------|
+ * | auto | sell    | 1/buy   | 客戶視角（預設，維持既有行為）|
+ * | sell | sell    | 1/sell  | 換錢所賣出牌價 |
+ * | mid  | (buy+sell)/2 | 1/mid | 市場參考中間價 |
+ */
 export function computeConverterRate(
   rate: ExchangeShopRate,
   from: CurrencyCode,
   to: CurrencyCode,
+  rateMode: RateMode = 'auto',
 ): number | null {
+  const midRate = (rate.buy + rate.sell) / 2;
+
   if (from === 'TWD' && to === rate.currency && hasExchangeShopProvider(to)) {
+    if (rateMode === 'mid') return midRate;
     return rate.sell;
   }
   if (to === 'TWD' && from === rate.currency && hasExchangeShopProvider(from)) {
+    if (rateMode === 'mid') return 1 / midRate;
+    if (rateMode === 'sell') return 1 / rate.sell;
     return 1 / rate.buy;
   }
   return null;
diff --git a/apps/ratewise/src/suppress-hydration-warning.ts b/apps/ratewise/src/suppress-hydration-warning.ts
index b05f7f655..d0edafd6b 100644
--- a/apps/ratewise/src/suppress-hydration-warning.ts
+++ b/apps/ratewise/src/suppress-hydration-warning.ts
@@ -1,21 +1,31 @@
 /**
- * Suppress React Hydration Warning (#418)
+ * Optional React Hydration Warning (#418) suppression
  *
  * This module MUST be imported FIRST in main.tsx (before any other imports)
- * to ensure the console.error override is set up before React loads.
+ * so the explicit non-production diagnostic suppression can run before React loads.
  *
- * React #418 (Hydration mismatch) is an expected error in SSG environments
- * with dynamic content like i18n language detection, timestamps, etc.
- *
- * The error is suppressed in console but React still recovers and re-renders
- * the correct content on the client.
+ * Production must not globally hide hydration errors. Known harmless mismatches
+ * should be handled at component level with local suppressHydrationWarning.
  *
  * @see https://react.dev/errors/418
  * @see docs/dev/002_development_reward_penalty_log.md
  * @created 2026-01-27
  */
 
-if (typeof window !== 'undefined') {
+import { isHydrationSuppressionEnabled } from './utils/errorClassification';
+
+const hydrationSuppressionFlag =
+  typeof import.meta.env['VITE_SUPPRESS_HYDRATION_WARNINGS'] === 'string'
+    ? import.meta.env['VITE_SUPPRESS_HYDRATION_WARNINGS']
+    : undefined;
+
+if (
+  typeof window !== 'undefined' &&
+  isHydrationSuppressionEnabled({
+    prod: import.meta.env.PROD,
+    flag: hydrationSuppressionFlag,
+  })
+) {
   const originalConsoleError = console.error;
 
   console.error = (...args: unknown[]) => {
diff --git a/apps/ratewise/src/sw.ts b/apps/ratewise/src/sw.ts
index daa95f259..d8475638a 100644
--- a/apps/ratewise/src/sw.ts
+++ b/apps/ratewise/src/sw.ts
@@ -28,7 +28,7 @@ self.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
 // 保存 manifest 供 VERIFY_AND_REPAIR_PRECACHE 使用。
 const WB_MANIFEST = self.__WB_MANIFEST;
 const HTML_CACHE_NAME = 'html-cache';
-const NAVIGATION_NETWORK_TIMEOUT_MS = 3000;
+const NAVIGATION_FETCH_TIMEOUT_MS = 8000;
 
 // 預快取 Vite 產出的靜態資源。
 precacheAndRoute(WB_MANIFEST);
@@ -44,24 +44,42 @@ precacheAndRoute(WB_MANIFEST);
  * 此機制在 SW activate 時直接用 bare URL（無 revision）快取 offline.html，
  * 確保 setCatchHandler 的 matchPrecache('offline.html') 或 caches.match() 一定能命中。
  */
+/**
+ * 確保關鍵文件存入 html-cache，對抗 iOS Safari precache 驅逐。
+ *
+ * 問題：iOS 在記憶體壓力下驅逐 Workbox precache（整個 cache 被砍），
+ * 造成 matchPrecache('index.html') 失敗，而 offline.html 若只在 html-cache
+ * 中備份則反而成為唯一可用文件，導致在線用戶看到離線頁面。
+ *
+ * 修法：offline.html 與 index.html 都備份到 html-cache，確保兩者具有
+ * 同等存活率。index.html 從 precache 複製（避免額外網路請求）。
+ */
 async function ensureOfflineHtmlCached(): Promise<void> {
   try {
-    // 先檢查是否已在任何快取中（precache 或 critical-launch-cache）
-    const existingResponse = await caches.match('offline.html');
-    if (existingResponse) {
-      return;
+    const scope = self.registration.scope;
+    const cache = await caches.open(HTML_CACHE_NAME);
+
+    // 備份 offline.html（從網路取得，確保最新版）
+    const existingOffline = await caches.match('offline.html');
+    if (!existingOffline) {
+      const offlineUrl = new URL('offline.html', scope).href;
+      const response = await fetch(offlineUrl, { cache: 'no-cache' });
+      if (response.ok) {
+        await cache.put(offlineUrl, response.clone());
+        await cache.put('offline.html', response);
+      }
     }
 
-    // 嘗試從網路取得並快取到 html-cache（setCatchHandler 可 match）
-    const scope = self.registration.scope;
-    const offlineUrl = new URL('offline.html', scope).href;
-
-    const response = await fetch(offlineUrl, { cache: 'no-cache' });
-    if (response.ok) {
-      const cache = await caches.open(HTML_CACHE_NAME);
-      await cache.put(offlineUrl, response.clone());
-      // 同時用相對路徑快取，讓 matchPrecache('offline.html') 也能命中
-      await cache.put('offline.html', response);
+    // 備份 index.html（從 precache 複製，避免額外網路請求）
+    // 使 index.html 與 offline.html 具有同等 iOS eviction 存活率。
+    const indexUrl = new URL('index.html', scope).href;
+    const existingIndex = await cache.match(indexUrl);
+    if (!existingIndex) {
+      const precachedIndex = await matchPrecache('index.html');
+      if (precachedIndex) {
+        await cache.put(indexUrl, precachedIndex.clone());
+        await cache.put('index.html', precachedIndex);
+      }
     }
   } catch {
     // 離線時無法 fetch 為正常現象，忽略錯誤。
@@ -252,23 +270,22 @@ setCatchHandler(async ({ event, request }): Promise<Response> => {
   return resolveOfflineDocumentFallback({
     emergencyReason: 'emergency-document-fallback',
     matchPrecache,
+    matchIndexHtmlInAnyCache: () => caches.match('index.html'),
     matchOfflineHtmlInAnyCache: () => caches.match('offline.html'),
   });
 });
 
 /**
- * SPA 導覽策略：bounded SWR-style navigation（installed PWA 與瀏覽器共用）
+ * SPA 導覽策略：hybrid SWR + precache-first navigation
  *
- * 業界最佳實踐（web.dev / Workbox docs）：
- * - 已 install 過的 PWA / 已 visited 的瀏覽器：cache hit 立即返回（零白屏冷啟動）
- * - 背景 revalidate 抓取最新 HTML 寫回 cache，下一次 navigation 自動拿到新版
- * - 新版本切換由既有 SW controllerchange + reload 機制處理（main.tsx）
- * - cache miss 導覽：網路最多等待 3s，再回 precache 三層 fallback
+ * - 暖快取（html-cache hit）：立即回傳已快取 HTML + 背景 revalidate（零白屏）
+ * - 冷快取（html-cache miss）：直接從 Workbox precache 取 index.html 回傳，
+ *   同時背景發網路請求更新 html-cache，下次導覽自動用最新版本
+ * - precache 也 miss（iOS eviction）：等網路回應，失敗才 fallback 到 offline.html
  *
- * 取代 NetworkFirst + 3s timeout 的理由：
- * - NetworkFirst 在慢網路下要等到 3s timeout 才 fallback → 感知白屏
- * - SWR-style cache hit 立即回應，把已暖機場景的感知白屏降為 0
- * - 對版本撕裂的防護：activate 時清掉舊 HTML runtime cache，避免新 SW 先回舊 HTML
+ * 為什麼不用 3s timeout：
+ * - timeout 命中時 precache 可能已被 iOS 驅逐，導致 offline.html 被服務給在線用戶
+ * - cold cache 用 precache 直接回傳，等同舊的 createHandlerBoundToURL 行為，無需等待
  *
  * @see https://developer.chrome.com/docs/workbox/modules/workbox-strategies#stale-while-revalidate
  */
@@ -276,6 +293,7 @@ function resolveNavigationFallback(): Promise<Response> {
   return resolveOfflineDocumentFallback({
     emergencyReason: 'emergency-navigation-fallback',
     matchPrecache,
+    matchIndexHtmlInAnyCache: () => caches.match('index.html'),
     matchOfflineHtmlInAnyCache: () => caches.match('offline.html'),
   });
 }
@@ -302,6 +320,7 @@ async function handleNavigationRequest({
   const cache = await caches.open(HTML_CACHE_NAME);
   const cached = await cache.match(request);
   if (cached) {
+    // 暖快取：SWR — 立即回傳 + 背景 revalidate
     event.waitUntil(
       fetchAndCacheNavigation(request, cache)
         .then(() => undefined)
@@ -310,17 +329,36 @@ async function handleNavigationRequest({
     return cached;
   }
 
-  const networkResponse = fetchAndCacheNavigation(request, cache).catch(() =>
-    resolveNavigationFallback(),
-  );
-  event.waitUntil(networkResponse.then(() => undefined).catch(() => undefined));
-  const timeoutFallback = new Promise<Response>((resolve) => {
-    setTimeout(() => {
-      resolve(resolveNavigationFallback());
-    }, NAVIGATION_NETWORK_TIMEOUT_MS);
-  });
+  // 冷快取：先嘗試 precache index.html（零延遲），再背景抓最新版本寫入 html-cache。
+  // 這避免了 3s timeout 在 iOS precache 被驅逐時錯誤回傳 offline.html 給在線用戶。
+  const precachedShell = await matchPrecache('index.html');
+  if (precachedShell) {
+    event.waitUntil(
+      fetchAndCacheNavigation(request, cache)
+        .then(() => undefined)
+        .catch(() => undefined),
+    );
+    return precachedShell;
+  }
 
-  return Promise.race([networkResponse, timeoutFallback]);
+  // precache 也 miss（iOS eviction）：等網路但設上限，避免連線掛住造成無限白屏。
+  // 此分支 precache 已確認不存在，timeout fallback 不會把 offline.html 誤送給 precache 仍在的在線用戶。
+  const networkFetch = fetchAndCacheNavigation(request, cache);
+  try {
+    return await Promise.race([
+      networkFetch,
+      new Promise<never>((_, reject) =>
+        setTimeout(
+          () => reject(new Error('navigation-fetch-timeout')),
+          NAVIGATION_FETCH_TIMEOUT_MS,
+        ),
+      ),
+    ]);
+  } catch {
+    // 讓 in-flight fetch 繼續，成功則寫入 html-cache 供下次導覽。
+    event.waitUntil(networkFetch.then(() => undefined).catch(() => undefined));
+    return resolveNavigationFallback();
+  }
 }
 
 registerRoute(new NavigationRoute(handleNavigationRequest));
@@ -329,10 +367,13 @@ registerRoute(new NavigationRoute(handleNavigationRequest));
 registerRoute(
   ({ url }: { url: URL }) =>
     url.pathname.includes('/public/rates/history-30d.json') ||
+    url.pathname.includes('/public/rates/providers/moneybox/history-30d.json') ||
     (url.origin === 'https://cdn.jsdelivr.net' &&
-      url.pathname.includes('/public/rates/history-30d.json')) ||
+      (url.pathname.includes('/public/rates/history-30d.json') ||
+        url.pathname.includes('/public/rates/providers/moneybox/history-30d.json'))) ||
     (url.origin === 'https://raw.githubusercontent.com' &&
-      url.pathname.includes('/public/rates/history-30d.json')),
+      (url.pathname.includes('/public/rates/history-30d.json') ||
+        url.pathname.includes('/public/rates/providers/moneybox/history-30d.json'))),
   new StaleWhileRevalidate({
     cacheName: 'history-aggregate-cache',
     plugins: [
diff --git a/apps/ratewise/src/utils/__tests__/errorClassification.test.ts b/apps/ratewise/src/utils/__tests__/errorClassification.test.ts
new file mode 100644
index 000000000..2e71feec7
--- /dev/null
+++ b/apps/ratewise/src/utils/__tests__/errorClassification.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest';
+import { classifyUnhandledRejection, isHydrationSuppressionEnabled } from '../errorClassification';
+
+describe('classifyUnhandledRejection', () => {
+  it('classifies chunk load errors before generic fetch errors', () => {
+    expect(
+      classifyUnhandledRejection(new TypeError('Failed to fetch dynamically imported module')),
+    ).toBe('chunk-load');
+  });
+
+  it('classifies verified history endpoint 404 as expected history miss', () => {
+    expect(
+      classifyUnhandledRejection(
+        new Error(
+          'GET https://cdn.jsdelivr.net/gh/haotool/app@data/public/rates/history/2026-05-12.json 404',
+        ),
+      ),
+    ).toBe('expected-history-miss');
+  });
+
+  it('does not classify generic Failed to fetch as expected history miss', () => {
+    expect(classifyUnhandledRejection(new TypeError('Failed to fetch'))).toBe(
+      'generic-fetch-failure',
+    );
+  });
+
+  it('classifies Firefox NetworkError as generic fetch failure', () => {
+    expect(
+      classifyUnhandledRejection(new TypeError('NetworkError when attempting to fetch resource.')),
+    ).toBe('generic-fetch-failure');
+  });
+
+  it('classifies iOS Safari offline message as generic fetch failure', () => {
+    expect(
+      classifyUnhandledRejection(new Error('The Internet connection appears to be offline.')),
+    ).toBe('generic-fetch-failure');
+  });
+
+  it.each([
+    'The network connection was lost.',
+    'A server with the specified hostname could not be found.',
+    'Could not connect to the server.',
+  ])('classifies Safari network failure "%s" as generic fetch failure', (message) => {
+    expect(classifyUnhandledRejection(new TypeError(message))).toBe('generic-fetch-failure');
+  });
+
+  it('keeps Safari TypeError("Load failed") on chunk-load so chunk recovery still fires', () => {
+    expect(classifyUnhandledRejection(new TypeError('Load failed'))).toBe('chunk-load');
+  });
+
+  it('classifies unrelated errors as unknown', () => {
+    expect(classifyUnhandledRejection(new Error('Unexpected application state'))).toBe('unknown');
+  });
+});
+
+describe('isHydrationSuppressionEnabled', () => {
+  it('only enables suppression for explicit non-production diagnostics', () => {
+    expect(isHydrationSuppressionEnabled({ prod: true, flag: 'true' })).toBe(false);
+    expect(isHydrationSuppressionEnabled({ prod: false, flag: 'true' })).toBe(true);
+    expect(isHydrationSuppressionEnabled({ prod: false, flag: undefined })).toBe(false);
+  });
+});
diff --git a/apps/ratewise/src/utils/__tests__/pwaOfflineFallback.test.ts b/apps/ratewise/src/utils/__tests__/pwaOfflineFallback.test.ts
index 55618984b..a50832d65 100644
--- a/apps/ratewise/src/utils/__tests__/pwaOfflineFallback.test.ts
+++ b/apps/ratewise/src/utils/__tests__/pwaOfflineFallback.test.ts
@@ -13,6 +13,7 @@ describe('pwaOfflineFallback', () => {
     const response = await resolveOfflineDocumentFallback({
       emergencyReason: 'emergency-navigation-fallback',
       matchPrecache,
+      matchIndexHtmlInAnyCache: () => null,
       matchOfflineHtmlInAnyCache,
     });
 
@@ -22,12 +23,26 @@ describe('pwaOfflineFallback', () => {
     expect(matchOfflineHtmlInAnyCache).not.toHaveBeenCalled();
   });
 
+  it('should fall back to index.html from any cache when precache is evicted', async () => {
+    const anyCacheIndexResponse = new Response('<html>index from html-cache</html>');
+
+    const response = await resolveOfflineDocumentFallback({
+      emergencyReason: 'emergency-navigation-fallback',
+      matchPrecache: () => null,
+      matchIndexHtmlInAnyCache: () => anyCacheIndexResponse,
+      matchOfflineHtmlInAnyCache: () => null,
+    });
+
+    expect(response).toBe(anyCacheIndexResponse);
+  });
+
   it('should use precached offline.html when index.html is unavailable', async () => {
     const offlineResponse = new Response('<html>offline</html>');
 
     const response = await resolveOfflineDocumentFallback({
       emergencyReason: 'emergency-navigation-fallback',
       matchPrecache: (url) => (url === 'offline.html' ? offlineResponse : null),
+      matchIndexHtmlInAnyCache: () => null,
       matchOfflineHtmlInAnyCache: () => null,
     });
 
@@ -40,6 +55,7 @@ describe('pwaOfflineFallback', () => {
     const response = await resolveOfflineDocumentFallback({
       emergencyReason: 'emergency-navigation-fallback',
       matchPrecache: () => null,
+      matchIndexHtmlInAnyCache: () => null,
       matchOfflineHtmlInAnyCache: () => anyCacheOfflineResponse,
     });
 
@@ -50,6 +66,7 @@ describe('pwaOfflineFallback', () => {
     const response = await resolveOfflineDocumentFallback({
       emergencyReason: 'emergency-navigation-fallback',
       matchPrecache: () => null,
+      matchIndexHtmlInAnyCache: () => null,
       matchOfflineHtmlInAnyCache: () => null,
     });
 
diff --git a/apps/ratewise/src/utils/classnames.ts b/apps/ratewise/src/utils/classnames.ts
index 9abcbb87d..97e8ce3a9 100644
--- a/apps/ratewise/src/utils/classnames.ts
+++ b/apps/ratewise/src/utils/classnames.ts
@@ -72,10 +72,10 @@ export const tokenClasses = {
    * 品牌主色組合（等號鍵）
    */
   primaryStrong: {
-    base: 'bg-primary text-white',
+    base: 'bg-primary text-primary-foreground',
     hover: 'hover:bg-primary-dark',
     active: 'active:bg-primary-darker',
-    all: 'bg-primary text-white hover:bg-primary-dark active:bg-primary-darker',
+    all: 'bg-primary text-primary-foreground hover:bg-primary-dark active:bg-primary-darker',
   },
 
   /**
@@ -186,7 +186,7 @@ export function getButtonClasses(
  * @example
  * ```typescript
  * getCalculatorKeyClasses('neutral', { size: 'text-2xl' })
- * // => 'calculator-key relative h-16 rounded-xl font-semibold select-none overflow-hidden bg-neutral-light text-neutral-text hover:bg-neutral active:bg-neutral-dark text-2xl'
+ * // => 'calculator-key relative h-16 rounded-compact font-semibold select-none overflow-hidden bg-neutral-light text-neutral-text hover:bg-neutral active:bg-neutral-dark text-2xl'
  * ```
  */
 export function getCalculatorKeyClasses(
@@ -200,7 +200,7 @@ export function getCalculatorKeyClasses(
   const { size = 'text-2xl', customClass = '', includeBase = true } = options;
 
   const baseStyles = includeBase
-    ? 'calculator-key relative h-16 rounded-xl font-semibold select-none overflow-hidden'
+    ? 'calculator-key relative h-16 rounded-compact font-semibold select-none overflow-hidden'
     : '';
 
   return cn(baseStyles, tokenClasses[variant].all, size, customClass);
diff --git a/apps/ratewise/src/utils/errorClassification.ts b/apps/ratewise/src/utils/errorClassification.ts
new file mode 100644
index 000000000..64ee81956
--- /dev/null
+++ b/apps/ratewise/src/utils/errorClassification.ts
@@ -0,0 +1,75 @@
+import { isChunkLoadError } from './chunkLoadRecovery';
+
+export type UnhandledRejectionKind =
+  | 'chunk-load'
+  | 'expected-history-miss'
+  | 'generic-fetch-failure'
+  | 'unknown';
+
+export function getUnhandledRejectionMessage(reason: unknown): string {
+  if (reason instanceof Error) {
+    return reason.message;
+  }
+
+  if (typeof reason === 'string') {
+    return reason;
+  }
+
+  if (reason && typeof reason === 'object' && 'message' in reason) {
+    const message = (reason as { message: unknown }).message;
+    return typeof message === 'string' ? message : JSON.stringify(reason);
+  }
+
+  return '';
+}
+
+export function toError(reason: unknown): Error {
+  return reason instanceof Error
+    ? reason
+    : new Error(getUnhandledRejectionMessage(reason) || 'Unhandled rejection');
+}
+
+function isVerifiedHistoryMiss(message: string): boolean {
+  return /\/rates\/history\/[^/\s]+\.json/i.test(message) && /\b404\b/.test(message);
+}
+
+// Safari 的 TypeError("Load failed") 由 isChunkLoadError 接手，這裡不再匹配，
+// 以免奪走 chunk recovery 路由。Safari 字面訊息為 WebKit 將 NSURLError 轉譯後暴露給 JS，須精確比對。
+const GENERIC_FETCH_FAILURE_PATTERNS: readonly RegExp[] = [
+  /Failed to fetch/i, // Chromium / Edge
+  /NetworkError when attempting to fetch resource/i, // Firefox
+  /The Internet connection appears to be offline/i, // Safari：離線
+  /The network connection was lost/i, // Safari：連線中斷
+  /A server with the specified hostname could not be found/i, // Safari：DNS 失敗
+  /Could not connect to the server/i, // Safari：無法連線
+];
+
+function isGenericFetchFailure(message: string): boolean {
+  return GENERIC_FETCH_FAILURE_PATTERNS.some((pattern) => pattern.test(message));
+}
+
+export function classifyUnhandledRejection(reason: unknown): UnhandledRejectionKind {
+  const error = toError(reason);
+  const message = getUnhandledRejectionMessage(reason);
+
+  if (isChunkLoadError(error)) {
+    return 'chunk-load';
+  }
+
+  if (isVerifiedHistoryMiss(message)) {
+    return 'expected-history-miss';
+  }
+
+  if (isGenericFetchFailure(message)) {
+    return 'generic-fetch-failure';
+  }
+
+  return 'unknown';
+}
+
+export function isHydrationSuppressionEnabled(input: {
+  prod: boolean;
+  flag: string | undefined;
+}): boolean {
+  return !input.prod && input.flag === 'true';
+}
diff --git a/apps/ratewise/src/utils/exchangeRateCalculation.ts b/apps/ratewise/src/utils/exchangeRateCalculation.ts
index 119d91507..914278012 100644
--- a/apps/ratewise/src/utils/exchangeRateCalculation.ts
+++ b/apps/ratewise/src/utils/exchangeRateCalculation.ts
@@ -404,7 +404,7 @@ export function getUnitExchangeRate(
   const { rateSource = DEFAULT_RATE_SOURCE, exchangeShopRate = null } = options;
 
   if (rateSource === 'exchange-shop' && exchangeShopRate) {
-    const shopRate = computeConverterRate(exchangeShopRate, fromCurrency, toCurrency);
+    const shopRate = computeConverterRate(exchangeShopRate, fromCurrency, toCurrency, rateMode);
     if (shopRate !== null) {
       return shopRate;
     }
diff --git a/apps/ratewise/src/utils/pwaOfflineFallback.ts b/apps/ratewise/src/utils/pwaOfflineFallback.ts
index f7288b395..be215b17f 100644
--- a/apps/ratewise/src/utils/pwaOfflineFallback.ts
+++ b/apps/ratewise/src/utils/pwaOfflineFallback.ts
@@ -11,8 +11,59 @@ export const EMERGENCY_OFFLINE_HTML = `<!doctype html>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>離線模式 - ${APP_INFO.name}</title>
     <meta name="robots" content="noindex,nofollow">
+    <script>
+      (function () {
+        var K = 'ratewise-theme';
+        var D = 'zen';
+        var A = ['zen', 'nitro', 'kawaii', 'classic', 'ocean', 'forest'];
+        function v(c) {
+          if (c === null || typeof c !== 'object' || Array.isArray(c) || c.constructor !== Object) return D;
+          if (!Object.prototype.hasOwnProperty.call(c, 'style')) return D;
+          var s = c.style;
+          return typeof s === 'string' && A.indexOf(s) !== -1 ? s : D;
+        }
+        try {
+          var t = localStorage.getItem(K);
+          document.documentElement.dataset.style = t ? v(JSON.parse(t)) : D;
+        } catch (e) {
+          document.documentElement.dataset.style = D;
+        }
+      })();
+    </script>
     <style>
-      :root { color-scheme: light; }
+      :root,
+      [data-style='zen'] {
+        color-scheme: light;
+        --rw-bg: 248 250 252;
+        --rw-surface: 255 255 255;
+        --rw-text: 15 23 42;
+        --rw-muted: 100 116 139;
+        --rw-border: 226 232 240;
+        --rw-primary: 124 58 237;
+        --rw-shadow: 15 23 42;
+      }
+      [data-style='nitro'] {
+        color-scheme: dark;
+        --rw-bg: 2 6 23;
+        --rw-surface: 15 23 42;
+        --rw-text: 255 255 255;
+        --rw-muted: 203 213 225;
+        --rw-border: 30 41 59;
+        --rw-primary: 103 232 249;
+        --rw-shadow: 0 0 0;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root:not([data-style]) {
+          color-scheme: dark;
+          --rw-bg: 2 6 23;
+          --rw-surface: 15 23 42;
+          --rw-text: 255 255 255;
+          --rw-muted: 203 213 225;
+          --rw-border: 30 41 59;
+          --rw-primary: 103 232 249;
+          --rw-shadow: 0 0 0;
+        }
+      }
       body {
         margin: 0;
         min-height: 100vh;
@@ -20,28 +71,28 @@ export const EMERGENCY_OFFLINE_HTML = `<!doctype html>
         align-items: center;
         justify-content: center;
         padding: 24px;
-        background: #f8fafc;
-        color: #0f172a;
+        background: rgb(var(--rw-bg));
+        color: rgb(var(--rw-text));
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       }
       .card {
         width: min(100%, 360px);
-        border: 1px solid #e2e8f0;
-        border-radius: 16px;
-        background: #fff;
-        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+        border: 1px solid rgb(var(--rw-border));
+        border-radius: 24px;
+        background: rgb(var(--rw-surface));
+        box-shadow: 0 1px 2px 0 rgb(var(--rw-shadow) / 0.04), 0 12px 32px -24px rgb(var(--rw-shadow) / 0.28);
         padding: 24px 20px;
         text-align: center;
       }
       .icon { font-size: 40px; line-height: 1; margin-bottom: 12px; }
       h1 { margin: 0 0 12px; font-size: 20px; }
-      p { margin: 0; line-height: 1.65; color: #475569; }
+      p { margin: 0; line-height: 1.65; color: rgb(var(--rw-muted)); }
       button {
         margin-top: 16px;
         border: 0;
         border-radius: 999px;
-        background: #0f172a;
-        color: #fff;
+        background: rgb(var(--rw-primary));
+        color: rgb(var(--rw-bg));
         font: inherit;
         padding: 10px 16px;
       }
@@ -73,6 +124,11 @@ interface ResolveOfflineDocumentFallbackOptions {
   matchPrecache: (
     url: 'index.html' | 'offline.html',
   ) => Response | undefined | null | Promise<Response | undefined | null>;
+  matchIndexHtmlInAnyCache: () =>
+    | Response
+    | undefined
+    | null
+    | Promise<Response | undefined | null>;
   matchOfflineHtmlInAnyCache: () =>
     | Response
     | undefined
@@ -83,11 +139,18 @@ interface ResolveOfflineDocumentFallbackOptions {
 export async function resolveOfflineDocumentFallback({
   emergencyReason,
   matchPrecache,
+  matchIndexHtmlInAnyCache,
   matchOfflineHtmlInAnyCache,
 }: ResolveOfflineDocumentFallbackOptions): Promise<Response> {
+  // 1. Workbox precache（正常情況）
   const precachedIndex = await matchPrecache('index.html');
   if (precachedIndex) return precachedIndex;
 
+  // 2. 任何快取中的 index.html（iOS eviction 後 html-cache 仍可能有備份）
+  const anyIndex = await matchIndexHtmlInAnyCache();
+  if (anyIndex) return anyIndex;
+
+  // 3. offline.html（precache 或 html-cache）
   const precachedOffline = await matchPrecache('offline.html');
   if (precachedOffline) return precachedOffline;
 
diff --git a/apps/ratewise/src/utils/pwaStorageManager.ts b/apps/ratewise/src/utils/pwaStorageManager.ts
index c3b3b7857..949adfe8f 100644
--- a/apps/ratewise/src/utils/pwaStorageManager.ts
+++ b/apps/ratewise/src/utils/pwaStorageManager.ts
@@ -97,7 +97,7 @@ export async function requestPersistentStorage(): Promise<boolean> {
       logger.info('Persistent storage granted');
       recordPwaDiagnostic('storage-persist-granted');
     } else {
-      logger.warn('Persistent storage denied - cache may be cleared by browser');
+      logger.info('Persistent storage not granted - cache may be cleared by browser');
       recordPwaDiagnostic('storage-persist-denied', undefined, 'warn');
     }
 
diff --git a/apps/ratewise/src/utils/sentry.ts b/apps/ratewise/src/utils/sentry.ts
index b45e90864..5d5edc56f 100644
--- a/apps/ratewise/src/utils/sentry.ts
+++ b/apps/ratewise/src/utils/sentry.ts
@@ -6,6 +6,7 @@
  *
  * @see https://web.dev/articles/optimize-lcp
  */
+import { classifyUnhandledRejection } from './errorClassification';
 import { logger } from './logger';
 
 const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN;
@@ -36,8 +37,8 @@ async function initializeSentryOnce(): Promise<void> {
         // Filter out expected/handled errors
         const error = hint.originalException;
         if (error instanceof Error) {
-          // Skip network errors that are already logged
-          if (error.message.includes('Failed to fetch')) {
+          // 已由 PwaDiagnostic 收錄的跨瀏覽器 fetch 失敗，不重複送 Sentry
+          if (classifyUnhandledRejection(error) === 'generic-fetch-failure') {
             return null;
           }
         }
diff --git a/apps/ratewise/tailwind.config.ts b/apps/ratewise/tailwind.config.ts
index 568936fc9..03614b87b 100644
--- a/apps/ratewise/tailwind.config.ts
+++ b/apps/ratewise/tailwind.config.ts
@@ -1,11 +1,20 @@
 import type { Config } from 'tailwindcss';
 import {
   generateTailwindThemeExtension,
-  spacingTokens,
   typographyTokens,
   breakpointTokens,
+  radiusTokens,
+  shadowTokens,
 } from './src/config/design-tokens';
 
+type TailwindColorRecord = Record<string, string | Record<string, string>>;
+
+const tailwindThemeExtension = generateTailwindThemeExtension() ?? {};
+const generatedColors = (tailwindThemeExtension.extend?.colors ?? {}) as TailwindColorRecord;
+const generatedPrimaryColors = (generatedColors['primary'] ?? {}) as Record<string, string>;
+const generatedSuccessColors = (generatedColors['success'] ?? {}) as Record<string, string>;
+const generatedWarningColors = (generatedColors['warning'] ?? {}) as Record<string, string>;
+
 /**
  * Tailwind CSS Configuration
  *
@@ -25,13 +34,13 @@ export default {
   content: ['./index.html', './src/**/*.{ts,tsx}'],
   darkMode: ['class', '[data-mode="dark"]'],
   theme: {
-    ...generateTailwindThemeExtension(),
+    ...tailwindThemeExtension,
     extend: {
-      ...generateTailwindThemeExtension().extend,
+      ...tailwindThemeExtension.extend,
       // 字型家族 - 使用 typographyTokens SSOT
       fontFamily: {
-        sans: typographyTokens.fontFamily.sans,
-        mono: typographyTokens.fontFamily.mono,
+        sans: [...typographyTokens.fontFamily.sans],
+        mono: [...typographyTokens.fontFamily.mono],
       },
       // 自定義間距 - 使用 spacingTokens SSOT 擴展
       spacing: {
@@ -41,14 +50,21 @@ export default {
       },
       // 現代化語義色彩（使用 CSS Variables）
       colors: {
+        // 保留舊版 token 向後相容
+        ...generatedColors,
         // 新版語義化 token（主要使用）
         // SSOT: 基礎語義色彩
         surface: {
           DEFAULT: 'rgb(var(--color-surface) / <alpha-value>)',
           elevated: 'rgb(var(--color-surface-elevated) / <alpha-value>)',
           sunken: 'rgb(var(--color-surface-sunken) / <alpha-value>)',
+          soft: 'rgb(var(--color-surface-soft) / <alpha-value>)',
+          border: 'rgb(var(--color-surface-border) / <alpha-value>)',
+        },
+        text: {
+          DEFAULT: 'rgb(var(--color-text) / <alpha-value>)',
+          muted: 'rgb(var(--color-text-muted) / <alpha-value>)',
         },
-        text: 'rgb(var(--color-text) / <alpha-value>)',
         background: 'rgb(var(--color-background) / <alpha-value>)',
         'background-secondary': 'rgb(var(--color-background-secondary) / <alpha-value>)',
         'background-tertiary': 'rgb(var(--color-background-tertiary) / <alpha-value>)',
@@ -57,7 +73,9 @@ export default {
         'foreground-muted': 'rgb(var(--color-foreground-muted) / <alpha-value>)',
         border: 'rgb(var(--color-border) / <alpha-value>)',
         'border-secondary': 'rgb(var(--color-border-secondary) / <alpha-value>)',
+        overlay: 'rgb(var(--color-overlay) / <alpha-value>)',
         primary: {
+          ...generatedPrimaryColors,
           DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
           hover: 'rgb(var(--color-primary-hover) / <alpha-value>)',
           foreground: 'rgb(var(--color-primary-foreground) / <alpha-value>)',
@@ -68,10 +86,12 @@ export default {
           foreground: 'rgb(var(--color-destructive-foreground) / <alpha-value>)',
         },
         success: {
+          ...generatedSuccessColors,
           DEFAULT: 'rgb(var(--color-success) / <alpha-value>)',
           foreground: 'rgb(var(--color-success-foreground) / <alpha-value>)',
         },
         warning: {
+          ...generatedWarningColors,
           DEFAULT: 'rgb(var(--color-warning) / <alpha-value>)',
           foreground: 'rgb(var(--color-warning-foreground) / <alpha-value>)',
         },
@@ -108,14 +128,17 @@ export default {
         'calc-equals-text': 'rgb(var(--color-calc-equals-text) / <alpha-value>)',
         'calc-equals-hover': 'rgb(var(--color-calc-equals-hover) / <alpha-value>)',
         'calc-equals-active': 'rgb(var(--color-calc-equals-active) / <alpha-value>)',
-        // 保留舊版 token 向後相容
-        ...generateTailwindThemeExtension().extend?.colors,
       },
       // 現代化圓角 - ParkKeeper 風格
       borderRadius: {
-        '4xl': '2rem', // 超大圓角
-        '3xl': '1.5rem', // 卡片預設
-        '2xl': '1rem', // 按鈕、輸入框
+        card: radiusTokens.values.card,
+        panel: radiusTokens.values.panel,
+        control: radiusTokens.values.control,
+        icon: radiusTokens.values.icon,
+        compact: radiusTokens.values.compact,
+        '4xl': '2rem',
+        '3xl': '1.5rem',
+        '2xl': '1rem',
         xl: '0.75rem',
         lg: '0.5rem',
         md: '0.375rem',
@@ -123,9 +146,15 @@ export default {
       },
       // 現代化陰影（微妙、扁平）
       boxShadow: {
-        card: '0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 3px 0 rgb(0 0 0 / 0.05)',
-        'card-hover': '0 2px 4px 0 rgb(0 0 0 / 0.04), 0 4px 8px 0 rgb(0 0 0 / 0.06)',
-        soft: '0 1px 3px 0 rgb(0 0 0 / 0.05)',
+        card: shadowTokens.values.card,
+        'card-hover': shadowTokens.values.cardHover,
+        soft: shadowTokens.values.soft,
+        floating: shadowTokens.values.floating,
+        brand: shadowTokens.values.brand,
+        sm: shadowTokens.values.sm,
+        md: shadowTokens.values.md,
+        lg: shadowTokens.values.lg,
+        xl: shadowTokens.values.xl,
       },
       // 現代化動畫
       animation: {
diff --git a/apps/ratewise/tests/e2e/README.md b/apps/ratewise/tests/e2e/README.md
index 305a8366e..cf93f27dd 100644
--- a/apps/ratewise/tests/e2e/README.md
+++ b/apps/ratewise/tests/e2e/README.md
@@ -50,20 +50,24 @@ pnpm --filter @app/ratewise exec playwright test --project=chromium-desktop
 ```
 tests/e2e/
 ├── README.md                  # 本文件
-├── ratewise.spec.ts          # 核心功能測試
-└── accessibility.spec.ts     # 無障礙性測試
+├── accessibility.spec.ts      # 無障礙性測試
+├── mobile-parity.spec.ts      # 桌面與行動版核心內容一致性
+├── pwa.spec.ts                # PWA 安裝與快取測試
+├── support-info.spec.ts       # 支援與資訊頁 desktop/mobile guardrail
+└── ratewise.spec.ts           # 核心功能測試
 ```
 
 ---
 
 ## 測試矩陣
 
-| 瀏覽器   | 裝置    | 視窗尺寸 | Project 名稱       |
-| -------- | ------- | -------- | ------------------ |
-| Chromium | Desktop | 1440×900 | `chromium-desktop` |
-| Chromium | Mobile  | 375×667  | `chromium-mobile`  |
-| Firefox  | Desktop | 1440×900 | `firefox-desktop`  |
-| Firefox  | Mobile  | 375×667  | `firefox-mobile`   |
+| 瀏覽器   | 裝置    | 視窗尺寸 | Project 名稱           |
+| -------- | ------- | -------- | ---------------------- |
+| Chromium | Desktop | 1440×900 | `chromium-desktop`     |
+| Chromium | Mobile  | 375×667  | `chromium-mobile`      |
+| Chromium | Desktop | 1440×900 | `pwa-chromium`         |
+| Chromium | Desktop | 1440×900 | `offline-pwa-chromium` |
+| Firefox  | Desktop | 1440×900 | `offline-pwa-firefox`  |
 
 ---
 
@@ -92,6 +96,13 @@ tests/e2e/
 - ✅ 鍵盤導航檢查
 - ✅ ARIA 屬性檢查
 
+### support-info.spec.ts（支援與資訊頁）
+
+- ✅ Settings / FAQ / Guide / About / Privacy / OpenData / SeoTech 路由載入
+- ✅ Desktop 與 Mobile 皆檢查 H1、main landmark、console error、pageerror
+- ✅ Body 級水平溢位檢查
+- ✅ OpenData 程式碼範例 tabs 語意檢查
+
 ---
 
 ## CI/CD 整合
diff --git a/apps/ratewise/tests/e2e/accessibility.spec.ts b/apps/ratewise/tests/e2e/accessibility.spec.ts
index 4ee2f78a2..68f72e969 100644
--- a/apps/ratewise/tests/e2e/accessibility.spec.ts
+++ b/apps/ratewise/tests/e2e/accessibility.spec.ts
@@ -42,11 +42,10 @@ test.describe('無障礙性掃描', () => {
     expect(criticalViolations).toHaveLength(0);
   });
 
-  // [fix:2026-01-31] 多幣別模式在 CI 環境不穩定，待 UI 統一後修復
-  test.fixme('多幣別模式應該通過無障礙性掃描', async ({ rateWisePage: page }) => {
+  test('多幣別模式應該通過無障礙性掃描', async ({ rateWisePage: page }) => {
     // 切換到多幣別模式
     await page.getByRole('link', { name: /多幣別/i }).click();
-    await page.waitForTimeout(500);
+    await expect(page.getByRole('main')).toBeVisible({ timeout: 10_000 });
 
     const accessibilityScanResults = await new AxeBuilder({ page })
       .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
@@ -68,6 +67,51 @@ test.describe('無障礙性掃描', () => {
     expect(criticalViolations).toHaveLength(0);
   });
 
+  test('收藏與設定頁應該通過無障礙性掃描', async ({ rateWisePage: page }) => {
+    const pages = [
+      {
+        name: '收藏頁',
+        open: async () =>
+          page
+            .getByRole('link', { name: /收藏|Favorites/i })
+            .first()
+            .click(),
+        ready: page.getByRole('heading', { name: '所有貨幣', exact: true }),
+      },
+      {
+        name: '設定頁',
+        open: async () =>
+          page
+            .getByRole('link', { name: /設定|Settings/i })
+            .first()
+            .click(),
+        ready: page.getByRole('heading', { name: '介面風格', exact: true }),
+      },
+    ] as const;
+
+    for (const target of pages) {
+      await target.open();
+      await expect(target.ready).toBeVisible({ timeout: 10_000 });
+
+      const accessibilityScanResults = await new AxeBuilder({ page })
+        .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+        .analyze();
+
+      const criticalViolations = accessibilityScanResults.violations.filter(
+        (violation) => violation.impact === 'critical' || violation.impact === 'serious',
+      );
+
+      if (criticalViolations.length > 0) {
+        console.log(`${target.name} 無障礙性違規項目：`);
+        criticalViolations.forEach((violation) => {
+          console.log(`- ${violation.id}: ${violation.description}`);
+        });
+      }
+
+      expect(criticalViolations, `${target.name} 不應有 critical 或 serious 違規`).toHaveLength(0);
+    }
+  });
+
   test('表單元素應該有適當的標籤', async ({ rateWisePage: page }) => {
     // 檢查所有輸入框是否有關聯的標籤或 aria-label
     const inputs = page.locator('input[type="text"]');
@@ -94,16 +138,14 @@ test.describe('無障礙性掃描', () => {
       // 輸入框應該有某種形式的標籤
       // 注意：如果設計上使用 placeholder 作為唯一提示，這裡會失敗
       // 這是預期的，因為這不符合無障礙性最佳實踐
-      if (!hasLabel) {
-        console.warn(`輸入框 ${i} 缺少明確的標籤（建議新增 aria-label 或 label 元素）`);
-      }
+      expect
+        .soft(hasLabel, `輸入框 ${i} 應有 aria-label、aria-labelledby 或 label[for]`)
+        .toBe(true);
     }
   });
 
-  test.skip('按鈕應該有可識別的文字或 aria-label (過於嚴格，跳過)', async ({
-    rateWisePage: page,
-  }) => {
-    const buttons = page.locator('button');
+  test('可見按鈕應該有可識別的文字或 aria-label', async ({ rateWisePage: page }) => {
+    const buttons = page.locator('button:visible');
     const buttonCount = await buttons.count();
 
     for (let i = 0; i < buttonCount; i++) {
@@ -113,16 +155,12 @@ test.describe('無障礙性掃描', () => {
       const ariaLabel = await button.getAttribute('aria-label');
       const ariaLabelledBy = await button.getAttribute('aria-labelledby');
 
-      const hasAccessibleName = Boolean(
-        (textContent && textContent.trim().length > 0) ?? ariaLabel ?? ariaLabelledBy,
-      );
-
-      if (!hasAccessibleName) {
-        console.warn(`按鈕 ${i} 缺少可識別的文字或 aria-label`);
-      }
+      const accessibleName = ariaLabel || ariaLabelledBy || textContent || '';
 
       // 至少應該有某種形式的可識別名稱
-      expect(hasAccessibleName).toBeTruthy();
+      expect
+        .soft(accessibleName.trim().length, `按鈕 ${i} 應有 accessible name`)
+        .toBeGreaterThan(0);
     }
   });
 
diff --git a/apps/ratewise/tests/e2e/ga-defer-lcp.spec.ts b/apps/ratewise/tests/e2e/ga-defer-lcp.spec.ts
index 88af25ede..49ef70ac2 100644
--- a/apps/ratewise/tests/e2e/ga-defer-lcp.spec.ts
+++ b/apps/ratewise/tests/e2e/ga-defer-lcp.spec.ts
@@ -39,11 +39,8 @@ function detectBuiltGaRuntime(): boolean {
       .filter((file) => file.endsWith('.js'))
       .some((file) => {
         const content = readFileSync(join(assetDir, file), 'utf-8');
-        return (
-          content.includes('googletagmanager.com/gtag/js?id=') ||
-          content.includes('send_page_view') ||
-          content.includes('transport_type')
-        );
+        const match = /VITE_GA_ID:\s*(["'`])([^"'`]*)\1/.exec(content);
+        return Boolean(match?.[2]);
       });
   } catch {
     return false;
@@ -171,7 +168,20 @@ test.describe('GA4 延後初始化 + LCP 效能', () => {
   test('實際應用頁面載入完成後 GA config 不應重複初始化', async ({ page }) => {
     await mockRatesApi(page);
     await page.goto(BASE, { waitUntil: 'load' });
-    await page.waitForTimeout(300);
+
+    if (HAS_BUILT_GA_RUNTIME) {
+      await page.waitForFunction(
+        () =>
+          window.dataLayer?.some((item) => {
+            if (!item || typeof item !== 'object') return false;
+            return (item as Record<number, unknown>)[0] === 'config';
+          }),
+        null,
+        { timeout: 10_000 },
+      );
+    } else {
+      await page.waitForTimeout(300);
+    }
 
     const analyticsState = await page.evaluate(() => {
       const configCalls = !window.dataLayer
diff --git a/apps/ratewise/tests/e2e/offline-pwa.spec.ts b/apps/ratewise/tests/e2e/offline-pwa.spec.ts
index f5ea30c78..fb553538a 100644
--- a/apps/ratewise/tests/e2e/offline-pwa.spec.ts
+++ b/apps/ratewise/tests/e2e/offline-pwa.spec.ts
@@ -151,14 +151,17 @@ class OfflinePWAPage {
     // Set network offline at browser context level first
     await this.context.setOffline(true);
 
-    // Use CDP to emulate network conditions - this makes navigator.onLine return false
-    const client = await this.context.newCDPSession(this.page);
-    await client.send('Network.emulateNetworkConditions', {
-      offline: true,
-      downloadThroughput: 0,
-      uploadThroughput: 0,
-      latency: 0,
-    });
+    try {
+      const client = await this.context.newCDPSession(this.page);
+      await client.send('Network.emulateNetworkConditions', {
+        offline: true,
+        downloadThroughput: 0,
+        uploadThroughput: 0,
+        latency: 0,
+      });
+    } catch {
+      // Firefox 不支援 CDP；保留 context.setOffline 與 offline event 作為跨瀏覽器路徑。
+    }
 
     // Dispatch offline event to trigger component's event listener
     await this.page.evaluate(() => {
@@ -174,14 +177,17 @@ class OfflinePWAPage {
    * Restore network connectivity
    */
   async goOnline(): Promise<void> {
-    // Use CDP to restore network conditions
-    const client = await this.context.newCDPSession(this.page);
-    await client.send('Network.emulateNetworkConditions', {
-      offline: false,
-      downloadThroughput: -1, // unlimited
-      uploadThroughput: -1, // unlimited
-      latency: 0,
-    });
+    try {
+      const client = await this.context.newCDPSession(this.page);
+      await client.send('Network.emulateNetworkConditions', {
+        offline: false,
+        downloadThroughput: -1,
+        uploadThroughput: -1,
+        latency: 0,
+      });
+    } catch {
+      // Firefox 不支援 CDP；保留 context.setOffline 與 online event 作為跨瀏覽器路徑。
+    }
 
     // Restore network at browser context level
     await this.context.setOffline(false);
@@ -291,11 +297,7 @@ test.describe('Offline Indicator Display/Hide', () => {
   // Use pwa-chromium project to allow Service Worker
   test.use({ serviceWorkers: 'allow' });
 
-  // SKIP: OfflineIndicator component not rendering in E2E environment
-  // Root cause: React component never called despite being in App.tsx
-  // Unit tests (11/11) all pass, proving component logic works
-  // E2E tests should focus on actual offline functionality instead
-  test.skip('should show offline indicator when network disconnects', async ({ page }) => {
+  test('should show offline indicator when network disconnects', async ({ page }) => {
     const offlinePage = new OfflinePWAPage(page);
     await offlinePage.goto();
     await offlinePage.waitForPrecache();
diff --git a/apps/ratewise/tests/e2e/pwa.spec.ts b/apps/ratewise/tests/e2e/pwa.spec.ts
index 8ef5036a8..2603964ce 100644
--- a/apps/ratewise/tests/e2e/pwa.spec.ts
+++ b/apps/ratewise/tests/e2e/pwa.spec.ts
@@ -17,6 +17,18 @@
 import type { Page, BrowserContext } from '@playwright/test';
 import { test, expect } from './fixtures/test';
 import { APP_INFO } from '../../src/config/app-info';
+import { STYLE_DEFINITIONS } from '../../src/config/themes';
+
+function toHexColor(rgbTriplet: string): string {
+  return `#${rgbTriplet
+    .trim()
+    .split(/\s+/)
+    .map((value) => Number.parseInt(value, 10).toString(16).padStart(2, '0'))
+    .join('')
+    .toUpperCase()}`;
+}
+
+const defaultThemeColor = toHexColor(STYLE_DEFINITIONS.zen.colors.primary);
 
 const getManifestBasePath = async (page: Page) => {
   const manifestLink = await page.locator('link[rel="manifest"]').getAttribute('href');
@@ -40,11 +52,13 @@ test.describe('PWA Features', () => {
     const manifest = (await manifestResponse.json()) as {
       name: string;
       short_name: string;
+      theme_color: string;
       display: string;
       icons: { sizes: string; purpose?: string }[];
     };
     expect(manifest.name).toBe(APP_INFO.name);
     expect(manifest.short_name).toBe(APP_INFO.shortName);
+    expect(manifest.theme_color).toBe(defaultThemeColor);
     expect(manifest.display).toBe('standalone');
     expect(manifest.icons.length).toBeGreaterThan(0);
 
@@ -123,7 +137,7 @@ test.describe('PWA Features', () => {
 
   test('should have theme color meta tag', async ({ rateWisePage: page }) => {
     const themeColor = await page.locator('meta[name="theme-color"]').getAttribute('content');
-    expect(themeColor).toBe('#8B5CF6');
+    expect(themeColor).toBe(defaultThemeColor);
   });
 
   test('should have viewport meta tag', async ({ rateWisePage: page }) => {
diff --git a/apps/ratewise/tests/e2e/ratewise.spec.ts b/apps/ratewise/tests/e2e/ratewise.spec.ts
index 3dc63208f..0dcd9fff0 100644
--- a/apps/ratewise/tests/e2e/ratewise.spec.ts
+++ b/apps/ratewise/tests/e2e/ratewise.spec.ts
@@ -152,6 +152,44 @@ test.describe('RateWise 核心功能測試', () => {
     await expect(getVisibleAppTitle(page)).toBeVisible();
   });
 
+  test('收藏頁：應該顯示摘要側欄並支援切換歷史分頁', async ({ rateWisePage: page }) => {
+    await page
+      .getByRole('link', { name: /收藏|Favorites/i })
+      .first()
+      .click();
+
+    await expect(page).toHaveURL(/\/favorites\/$/);
+    await expect(page.getByRole('heading', { name: '所有貨幣', exact: true })).toBeVisible();
+    await expect(page.locator('aside').getByRole('button', { name: '前往換算' })).toBeVisible();
+
+    await page.getByRole('button', { name: '轉換歷史', exact: true }).click();
+    await expect(page.getByRole('heading', { name: '尚無轉換記錄', exact: true })).toBeVisible();
+
+    await page.locator('aside').getByRole('button', { name: '前往換算' }).click();
+    await expect(page.getByTestId('amount-input')).toBeVisible();
+  });
+
+  test('設定頁：應該顯示分組設定並可切換匯率模式', async ({ rateWisePage: page }) => {
+    await page
+      .getByRole('link', { name: /設定|Settings/i })
+      .first()
+      .click();
+
+    await expect(page).toHaveURL(/\/settings\/$/);
+    await expect(page.getByRole('heading', { name: '介面風格', exact: true })).toBeVisible();
+    await expect(page.getByRole('heading', { name: '語言', exact: true })).toBeVisible();
+    await expect(page.getByRole('heading', { name: '匯率模式', exact: true })).toBeVisible();
+    await expect(page.getByRole('heading', { name: '儲存與快取', exact: true })).toBeVisible();
+
+    await page.getByRole('button', { name: '賣出價', exact: true }).click();
+    await expect(
+      page.getByText('全程以銀行賣出牌告計算；即期適用網銀換匯，現金適用臨櫃買外幣現鈔'),
+    ).toBeVisible();
+
+    await expect(page.getByRole('link', { name: '常見問題', exact: true })).toBeVisible();
+    await expect(page.getByRole('link', { name: '開放原始碼', exact: true })).toBeVisible();
+  });
+
   test('響應式設計：行動版應該正確顯示', async ({ rateWisePage: page, viewport }) => {
     // 僅在行動裝置尺寸執行
     if (viewport && viewport.width < 768) {
diff --git a/apps/ratewise/tests/e2e/support-info.spec.ts b/apps/ratewise/tests/e2e/support-info.spec.ts
new file mode 100644
index 000000000..c85531a04
--- /dev/null
+++ b/apps/ratewise/tests/e2e/support-info.spec.ts
@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test';
+
+const BASE_PATH =
+  process.env['E2E_BASE_PATH'] || process.env['VITE_RATEWISE_BASE_PATH'] || '/ratewise';
+const SUPPORT_INFO_ROUTES = [
+  { path: '/settings/', h1: '設定' },
+  { path: '/faq/', h1: '常見問題' },
+  { path: '/guide/', h1: /如何使用 .* 進行匯率換算/ },
+  { path: '/about/', h1: /關於 .* 匯率好工具/ },
+  { path: '/privacy/', h1: '隱私政策' },
+  { path: '/open-data/', h1: '開放資料 API' },
+  { path: '/seo-tech/', h1: /SEO 架構/ },
+] as const;
+
+function withBasePath(path: string): string {
+  if (BASE_PATH === '/') return path;
+  return `${BASE_PATH.replace(/\/$/, '')}${path}`;
+}
+
+test.describe('支援與資訊頁 mobile/desktop guardrail', () => {
+  for (const route of SUPPORT_INFO_ROUTES) {
+    test(`${route.path} 應穩定呈現且不造成頁面水平溢位`, async ({ page }) => {
+      const consoleErrors: string[] = [];
+      const pageErrors: string[] = [];
+
+      page.on('console', (message) => {
+        if (message.type() === 'error') consoleErrors.push(message.text());
+      });
+      page.on('pageerror', (error) => pageErrors.push(error.message));
+
+      await page.goto(withBasePath(route.path), { waitUntil: 'domcontentloaded' });
+      await expect(page.getByRole('main')).toBeVisible({ timeout: 10_000 });
+      await expect(page.getByRole('heading', { level: 1, name: route.h1 })).toBeVisible();
+
+      const layout = await page.evaluate(() => {
+        const doc = document.documentElement;
+        const body = document.body;
+        return {
+          viewportWidth: doc.clientWidth,
+          scrollWidth: Math.max(doc.scrollWidth, body.scrollWidth),
+        };
+      });
+
+      expect(layout.scrollWidth, `${route.path} 不應造成 body 級水平溢位`).toBeLessThanOrEqual(
+        layout.viewportWidth + 2,
+      );
+      expect(pageErrors, `${route.path} 不應有 pageerror`).toHaveLength(0);
+      expect(consoleErrors, `${route.path} 不應有 console error`).toHaveLength(0);
+    });
+  }
+
+  test('開放資料頁程式碼範例應提供 tab 語意', async ({ page }) => {
+    await page.goto(withBasePath('/open-data/'), { waitUntil: 'domcontentloaded' });
+
+    const tablist = page.getByRole('tablist', { name: '程式碼範例' });
+    await expect(tablist).toBeVisible();
+    await expect(tablist.getByRole('tab')).toHaveCount(4);
+    await expect(tablist.getByRole('tab', { selected: true })).toHaveCount(1);
+    await expect(page.getByRole('tabpanel')).toBeVisible();
+  });
+});
diff --git a/apps/ratewise/tests/e2e/trend-chart-latency.spec.ts b/apps/ratewise/tests/e2e/trend-chart-latency.spec.ts
index 7e7b5452f..e3876188e 100644
--- a/apps/ratewise/tests/e2e/trend-chart-latency.spec.ts
+++ b/apps/ratewise/tests/e2e/trend-chart-latency.spec.ts
@@ -21,6 +21,7 @@ const BASE_URL = process.env['PLAYWRIGHT_BASE_URL'] || 'http://localhost:4173';
 const BASE_PATH =
   process.env['E2E_BASE_PATH'] || process.env['VITE_RATEWISE_BASE_PATH'] || '/ratewise';
 const BASE = `${BASE_URL}${BASE_PATH}/`.replace(/\/+$/, '/');
+const isPerformanceGate = process.env['RUN_RATEWISE_PERFORMANCE_TESTS'] === 'true';
 
 // 效能門檻
 const TREND_CHART_VISIBLE_TIMEOUT_MS = 20_000; // 當前預期：10s defer + 2s idle + 3s fetch
@@ -286,8 +287,12 @@ test.describe('趨勢圖優化後驗證', () => {
   test.use({ serviceWorkers: 'block' });
   test.setTimeout(60_000);
 
-  test.skip('優化後：趨勢圖應在 2.5 秒內可見', async ({ page }) => {
-    // 此測試在 PR2（移除 10s defer）合併後啟用
+  test.skip(
+    !isPerformanceGate,
+    'Set RUN_RATEWISE_PERFORMANCE_TESTS=true to run trend latency budget',
+  );
+
+  test('優化後：趨勢圖應在 2.5 秒內可見', async ({ page }) => {
     await mockRatesApi(page);
 
     const navStart = Date.now();
diff --git a/apps/ratewise/tsconfig.node.tsbuildinfo b/apps/ratewise/tsconfig.node.tsbuildinfo
deleted file mode 100644
index a21e2e49f..000000000
--- a/apps/ratewise/tsconfig.node.tsbuildinfo
+++ /dev/null
@@ -1 +0,0 @@
-{"fileNames":["../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2023.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2024.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.iterable.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.asynciterable.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.webworker.importscripts.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.scripthost.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.date.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.number.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.array.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.error.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.object.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.regexp.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2023.array.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2023.collection.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2023.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2024.arraybuffer.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2024.collection.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2024.object.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2024.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2024.regexp.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2024.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2024.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.array.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.collection.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.disposable.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.decorators.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.iterator.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.float16.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.error.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.full.d.ts","../../node_modules/.pnpm/@types+react@19.2.9/node_modules/@types/react/global.d.ts","../../node_modules/.pnpm/csstype@3.2.3/node_modules/csstype/index.d.ts","../../node_modules/.pnpm/@types+react@19.2.9/node_modules/@types/react/index.d.ts","../../node_modules/.pnpm/@types+react@19.2.9/node_modules/@types/react/jsx-runtime.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/compatibility/iterators.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/globals.typedarray.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/buffer.buffer.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/globals.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/web-globals/abortcontroller.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/web-globals/crypto.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/web-globals/domexception.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/web-globals/events.d.ts","../../node_modules/.pnpm/buffer@6.0.3/node_modules/buffer/index.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/utility.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/header.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/readable.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/fetch.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/formdata.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/connector.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/client-stats.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/client.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/errors.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/dispatcher.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/global-dispatcher.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/global-origin.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/pool-stats.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/pool.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/handlers.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/balanced-pool.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/h2c-client.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/agent.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/mock-interceptor.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/mock-call-history.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/mock-agent.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/mock-client.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/mock-pool.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/snapshot-agent.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/mock-errors.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/proxy-agent.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/env-http-proxy-agent.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/retry-handler.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/retry-agent.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/api.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/cache-interceptor.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/interceptors.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/util.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/cookies.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/patch.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/websocket.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/eventsource.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/diagnostics-channel.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/content-type.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/cache.d.ts","../../node_modules/.pnpm/undici-types@7.16.0/node_modules/undici-types/index.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/web-globals/fetch.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/web-globals/navigator.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/web-globals/storage.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/web-globals/streams.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/assert.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/assert/strict.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/async_hooks.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/buffer.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/child_process.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/cluster.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/console.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/constants.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/crypto.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/dgram.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/diagnostics_channel.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/dns.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/dns/promises.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/domain.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/events.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/fs.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/fs/promises.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/http.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/http2.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/https.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/inspector.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/inspector.generated.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/module.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/net.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/os.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/path.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/perf_hooks.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/process.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/punycode.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/querystring.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/readline.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/readline/promises.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/repl.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/sea.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/sqlite.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/stream.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/stream/promises.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/stream/consumers.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/stream/web.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/string_decoder.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/test.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/timers.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/timers/promises.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/tls.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/trace_events.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/tty.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/url.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/util.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/v8.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/vm.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/wasi.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/worker_threads.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/zlib.d.ts","../../node_modules/.pnpm/@types+node@24.10.1/node_modules/@types/node/index.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/hmrPayload.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/dist/node/chunks/moduleRunnerTransport.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/customEvent.d.ts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/shared/logging-C6h4g8dA.d.mts","../../node_modules/.pnpm/@oxc-project+types@0.122.0/node_modules/@oxc-project/types/types.d.ts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/shared/binding-CYVfiOV3.d.mts","../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.12/node_modules/@rolldown/pluginutils/dist/filter/composable-filters.d.ts","../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.12/node_modules/@rolldown/pluginutils/dist/filter/filter-vite-plugins.d.ts","../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.12/node_modules/@rolldown/pluginutils/dist/filter/simple-filters.d.ts","../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.12/node_modules/@rolldown/pluginutils/dist/filter/index.d.ts","../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.12/node_modules/@rolldown/pluginutils/dist/index.d.ts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/shared/define-config-BkRKRADp.d.mts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/index.d.mts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/parse-ast-index.d.mts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/internal/rollupTypeCompat.d.ts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/shared/constructors-DRe7RuMC.d.mts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/plugins-index.d.mts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/shared/transform-C_gBfjMR.d.mts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/utils-index.d.mts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/hot.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/dist/node/module-runner.d.ts","../../node_modules/.pnpm/esbuild@0.27.2/node_modules/esbuild/lib/main.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/internal/esbuildOptions.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/metadata.d.ts","../../node_modules/.pnpm/@jridgewell+trace-mapping@0.3.31/node_modules/@jridgewell/trace-mapping/types/sourcemap-segment.d.mts","../../node_modules/.pnpm/@jridgewell+trace-mapping@0.3.31/node_modules/@jridgewell/trace-mapping/types/types.d.mts","../../node_modules/.pnpm/@jridgewell+trace-mapping@0.3.31/node_modules/@jridgewell/trace-mapping/types/flatten-map.d.mts","../../node_modules/.pnpm/@jridgewell+trace-mapping@0.3.31/node_modules/@jridgewell/trace-mapping/types/trace-mapping.d.mts","../../node_modules/.pnpm/@jridgewell+gen-mapping@0.3.13/node_modules/@jridgewell/gen-mapping/types/sourcemap-segment.d.mts","../../node_modules/.pnpm/@jridgewell+gen-mapping@0.3.13/node_modules/@jridgewell/gen-mapping/types/types.d.mts","../../node_modules/.pnpm/@jridgewell+gen-mapping@0.3.13/node_modules/@jridgewell/gen-mapping/types/gen-mapping.d.mts","../../node_modules/.pnpm/@jridgewell+source-map@0.3.11/node_modules/@jridgewell/source-map/types/source-map.d.mts","../../node_modules/.pnpm/terser@5.44.1/node_modules/terser/tools/terser.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/internal/terserOptions.d.ts","../../node_modules/.pnpm/source-map-js@1.2.1/node_modules/source-map-js/source-map.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/previous-map.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/input.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/css-syntax-error.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/declaration.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/root.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/warning.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/lazy-result.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/no-work-result.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/processor.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/result.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/document.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/rule.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/node.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/comment.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/container.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/at-rule.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/list.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/postcss.d.ts","../../node_modules/.pnpm/postcss@8.5.9/node_modules/postcss/lib/postcss.d.mts","../../node_modules/.pnpm/lightningcss@1.32.0/node_modules/lightningcss/node/ast.d.ts","../../node_modules/.pnpm/lightningcss@1.32.0/node_modules/lightningcss/node/targets.d.ts","../../node_modules/.pnpm/lightningcss@1.32.0/node_modules/lightningcss/node/index.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/internal/lightningcssOptions.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/internal/cssPreprocessorOptions.d.ts","../../node_modules/.pnpm/rolldown@1.0.0-rc.12/node_modules/rolldown/dist/filter-index.d.mts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/types/importGlob.d.ts","../../node_modules/.pnpm/vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3/node_modules/vite/dist/node/index.d.ts","../../node_modules/.pnpm/@swc+types@0.1.25/node_modules/@swc/types/assumptions.d.ts","../../node_modules/.pnpm/@swc+types@0.1.25/node_modules/@swc/types/index.d.ts","../../node_modules/.pnpm/@swc+core@1.15.3_@swc+helpers@0.5.17/node_modules/@swc/core/binding.d.ts","../../node_modules/.pnpm/@swc+core@1.15.3_@swc+helpers@0.5.17/node_modules/@swc/core/spack.d.ts","../../node_modules/.pnpm/@swc+core@1.15.3_@swc+helpers@0.5.17/node_modules/@swc/core/index.d.ts","../../node_modules/.pnpm/@vitejs+plugin-react-swc@4.2.2_@swc+helpers@0.5.17_vite@8.0.5_@types+node@24.10.1_esbuild@0.2_jupvxinbspxm4ekfvmss34wcza/node_modules/@vitejs/plugin-react-swc/index.d.ts","../../node_modules/.pnpm/@types+estree@1.0.8/node_modules/@types/estree/index.d.ts","../../node_modules/.pnpm/rollup@4.59.0/node_modules/rollup/dist/rollup.d.ts","../../node_modules/.pnpm/workbox-build@7.4.0/node_modules/workbox-build/build/lib/copy-workbox-libraries.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/basic.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/except.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/mutable.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/merge.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/merge-exclusive.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/require-at-least-one.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/require-exactly-one.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/partial-deep.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/readonly-deep.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/literal-union.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/promisable.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/opaque.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/set-optional.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/set-required.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/value-of.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/promise-value.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/async-return-type.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/conditional-keys.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/conditional-except.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/conditional-pick.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/union-to-intersection.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/stringified.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/package-json.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/source/tsconfig-json.d.ts","../../node_modules/.pnpm/type-fest@0.13.1/node_modules/type-fest/index.d.ts","../../node_modules/.pnpm/workbox-core@7.4.0/node_modules/workbox-core/_version.d.ts","../../node_modules/.pnpm/workbox-core@7.4.0/node_modules/workbox-core/types.d.ts","../../node_modules/.pnpm/workbox-broadcast-update@7.4.0/node_modules/workbox-broadcast-update/_version.d.ts","../../node_modules/.pnpm/workbox-broadcast-update@7.4.0/node_modules/workbox-broadcast-update/BroadcastCacheUpdate.d.ts","../../node_modules/.pnpm/workbox-google-analytics@7.4.0/node_modules/workbox-google-analytics/_version.d.ts","../../node_modules/.pnpm/workbox-google-analytics@7.4.0/node_modules/workbox-google-analytics/initialize.d.ts","../../node_modules/.pnpm/workbox-routing@7.4.0/node_modules/workbox-routing/_version.d.ts","../../node_modules/.pnpm/workbox-routing@7.4.0/node_modules/workbox-routing/utils/constants.d.ts","../../node_modules/.pnpm/workbox-background-sync@7.4.0/node_modules/workbox-background-sync/_version.d.ts","../../node_modules/.pnpm/workbox-background-sync@7.4.0/node_modules/workbox-background-sync/Queue.d.ts","../../node_modules/.pnpm/workbox-cacheable-response@7.4.0/node_modules/workbox-cacheable-response/_version.d.ts","../../node_modules/.pnpm/workbox-cacheable-response@7.4.0/node_modules/workbox-cacheable-response/CacheableResponse.d.ts","../../node_modules/.pnpm/workbox-expiration@7.4.0/node_modules/workbox-expiration/_version.d.ts","../../node_modules/.pnpm/workbox-expiration@7.4.0/node_modules/workbox-expiration/ExpirationPlugin.d.ts","../../node_modules/.pnpm/workbox-build@7.4.0/node_modules/workbox-build/build/types.d.ts","../../node_modules/.pnpm/workbox-build@7.4.0/node_modules/workbox-build/build/lib/cdn-utils.d.ts","../../node_modules/.pnpm/workbox-build@7.4.0/node_modules/workbox-build/build/generate-sw.d.ts","../../node_modules/.pnpm/workbox-build@7.4.0/node_modules/workbox-build/build/get-manifest.d.ts","../../node_modules/.pnpm/workbox-build@7.4.0/node_modules/workbox-build/build/inject-manifest.d.ts","../../node_modules/.pnpm/workbox-build@7.4.0/node_modules/workbox-build/build/index.d.ts","../../node_modules/.pnpm/vite-plugin-pwa@1.2.0_vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1__zdlkczwvskpy7bpr63xlmigoy4/node_modules/vite-plugin-pwa/dist/index.d.ts","../../node_modules/.pnpm/vite-plugin-compression@0.5.1_vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3_/node_modules/vite-plugin-compression/dist/index.d.ts","../../node_modules/.pnpm/open@11.0.0/node_modules/open/index.d.ts","../../node_modules/.pnpm/rollup-plugin-visualizer@7.0.1_rolldown@1.0.0-rc.12_rollup@4.59.0/node_modules/rollup-plugin-visualizer/dist/plugin/template-types.d.ts","../../node_modules/.pnpm/rollup-plugin-visualizer@7.0.1_rolldown@1.0.0-rc.12_rollup@4.59.0/node_modules/rollup-plugin-visualizer/dist/shared/create-filter.d.ts","../../node_modules/.pnpm/rollup-plugin-visualizer@7.0.1_rolldown@1.0.0-rc.12_rollup@4.59.0/node_modules/rollup-plugin-visualizer/dist/plugin/index.d.ts","../../node_modules/.pnpm/sharp@0.34.5/node_modules/sharp/lib/index.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/kernel.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/position.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/types.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/autoOrient.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/background.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/blur.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/effort.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/fit.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/flatten.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/flip.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/flop.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/format.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/grayscale.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/hsb.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/invert.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/lossless.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/median.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/normalize.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/progressive.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/quality.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/resize.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/rotate.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/transforms/tint.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/builtins.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/output-formats.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/lib/parse-url.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/lib/resolve-configs.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/lib/generate-transforms.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/lib/apply-transforms.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/lib/metadata.d.ts","../../node_modules/.pnpm/imagetools-core@9.1.0/node_modules/imagetools-core/dist/index.d.ts","../../node_modules/.pnpm/vite-imagetools@10.0.0_rollup@4.59.0_vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3_/node_modules/vite-imagetools/dist/types.d.ts","../../node_modules/.pnpm/vite-imagetools@10.0.0_rollup@4.59.0_vite@8.0.5_@types+node@24.10.1_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_yaml@2.8.3_/node_modules/vite-imagetools/dist/index.d.ts","./src/utils/version-build-utils.ts","./src/config/app-info.ts","./src/config/seo-paths.ts","./vite.config.ts"],"fileIdsList":[[90,93,148,165,166],[90,93,148,165,166,356],[90,93,148,149,153,156,160,165,166,170,191,260,266,315,316,320,354,355,356,357],[93,148,165,166,226,228],[93,148,165,166],[93,148,165,166,227],[93,148,165,166,226,229],[93,148,165,166,224,226],[93,148,165,166,223,224,225],[93,148,165,166,223,226],[93,148,165,166,205,206,207],[93,148,165,166,208],[93,148,165,166,198,262,263,264],[93,148,165,166,262],[93,148,165,166,261],[93,145,146,148,165,166],[93,147,148,165,166],[148,165,166],[93,148,153,165,166,183],[93,148,149,154,159,165,166,168,180,191],[93,148,149,150,159,165,166,168],[93,148,151,165,166,192],[93,148,152,153,160,165,166,169],[93,148,153,165,166,180,188],[93,148,154,156,159,165,166,168],[93,147,148,155,165,166],[93,148,156,157,165,166],[93,148,158,159,165,166],[93,147,148,159,165,166],[93,148,159,160,161,165,166,180,191],[93,148,159,160,161,165,166,175,180,183],[93,140,148,156,159,162,165,166,168,180,191],[93,148,159,160,162,163,165,166,168,180,188,191],[93,148,162,164,165,166,180,188,191],[91,92,93,94,95,96,97,98,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197],[93,148,159,165,166],[93,148,165,166,167,191],[93,148,156,159,165,166,168,180],[93,148,165,166,169],[93,148,165,166,170],[93,147,148,165,166,171],[93,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197],[93,148,165,166,173],[93,148,165,166,174],[93,148,159,165,166,175,176],[93,148,165,166,175,177,192,194],[93,148,160,165,166],[93,148,159,165,166,180,181,183],[93,148,165,166,182,183],[93,148,165,166,180,181],[93,148,165,166,183],[93,148,165,166,184],[93,145,148,165,166,180,185],[93,148,159,165,166,186,187],[93,148,165,166,186,187],[93,148,153,165,166,168,180,188],[93,148,165,166,189],[93,148,165,166,168,190],[93,148,162,165,166,174,191],[93,148,153,165,166,192],[93,148,165,166,180,193],[93,148,165,166,167,194],[93,148,165,166,195],[93,148,153,165,166],[93,140,148,165,166],[93,148,165,166,196],[93,140,148,159,161,165,166,171,180,183,191,193,194,196],[93,148,165,166,180,197],[87,88,93,148,165,166],[89,93,148,165,166],[93,148,165,166,260,265],[93,148,165,166,324,325,327,330,331,332,333,334,335,336,338,339,342,343,344],[93,148,165,166,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351],[93,148,165,166,321,324],[93,148,165,166,324],[93,148,165,166,352],[93,148,165,166,321,322,323],[93,148,165,166,253,254],[93,148,149,165,166],[93,148,165,166,248],[93,148,165,166,246,248],[93,148,165,166,237,245,246,247,249,251],[93,148,165,166,235],[93,148,165,166,238,243,248,251],[93,148,165,166,234,251],[93,148,165,166,238,239,242,243,244,251],[93,148,165,166,238,239,240,242,243,251],[93,148,165,166,235,236,237,238,239,243,244,245,247,248,249,251],[93,148,165,166,251],[93,148,165,166,233,235,236,237,238,239,240,242,243,244,245,246,247,248,249,250],[93,148,165,166,233,251],[93,148,165,166,238,240,241,243,244,251],[93,148,165,166,242,251],[93,148,165,166,243,244,248,251],[93,148,165,166,236,246],[93,148,165,166,210],[93,148,165,166,202,204,210],[93,148,165,166,203,204],[93,148,165,166,204,210,214],[93,148,165,166,203],[93,148,165,166,204,210],[93,148,165,166,202,203,204,209],[93,148,165,166,202,204],[93,148,165,166,203,204,216],[93,148,165,166,268,317,318,319],[93,148,165,166,267,268],[93,148,165,166,180,198],[93,148,165,166,230],[93,148,165,166,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293],[93,148,165,166,285],[93,148,165,166,271,287],[93,148,165,166,287],[93,148,165,166,270],[93,148,165,166,271],[93,148,165,166,294],[93,106,109,112,113,148,165,166,191],[93,109,148,165,166,180,191],[93,109,113,148,165,166,191],[93,148,165,166,180],[93,103,148,165,166],[93,107,148,165,166],[93,105,106,109,148,165,166,191],[93,148,165,166,168,188],[93,148,165,166,198],[93,103,148,165,166,198],[93,105,109,148,165,166,168,191],[93,100,101,102,104,108,148,159,165,166,180,191],[93,109,117,125,148,165,166],[93,101,107,148,165,166],[93,109,134,135,148,165,166],[93,101,104,109,148,165,166,183,191,198],[93,109,148,165,166],[93,105,109,148,165,166,191],[93,100,148,165,166],[93,103,104,105,107,108,109,110,111,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,135,136,137,138,139,148,165,166],[93,109,127,130,148,156,165,166],[93,109,117,118,119,148,165,166],[93,107,109,118,120,148,165,166],[93,108,148,165,166],[93,101,103,109,148,165,166],[93,109,113,118,120,148,165,166],[93,113,148,165,166],[93,107,109,112,148,165,166,191],[93,101,105,109,117,148,165,166],[93,109,127,148,165,166],[93,120,148,165,166],[93,103,109,134,148,165,166,183,196,198],[93,148,165,166,260,352,353],[93,148,165,166,321,352],[93,148,165,166,197,260],[93,148,165,166,260,268,314],[93,148,165,166,199],[93,148,159,160,162,163,164,165,166,168,180,188,191,197,198,199,200,201,211,212,213,215,217,219,221,222,232,252,256,257,258,259,260],[93,148,165,166,199,200,201,218],[93,148,165,166,201],[93,148,165,166,220],[93,148,165,166,255],[93,148,165,166,211,222,260],[93,148,165,166,231],[93,148,165,166,211,260],[93,148,165,166,296],[93,148,165,166,309],[93,148,165,166,269,309,310,311,312,313],[93,148,165,166,294,296,298,300,302,304,306,308]],"fileInfos":[{"version":"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","impliedFormat":1},{"version":"feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569","impliedFormat":1},{"version":"ee7bad0c15b58988daa84371e0b89d313b762ab83cb5b31b8a2d1162e8eb41c2","impliedFormat":1},{"version":"27bdc30a0e32783366a5abeda841bc22757c1797de8681bbe81fbc735eeb1c10","impliedFormat":1},{"version":"8fd575e12870e9944c7e1d62e1f5a73fcf23dd8d3a321f2a2c74c20d022283fe","impliedFormat":1},{"version":"2ab096661c711e4a81cc464fa1e6feb929a54f5340b46b0a07ac6bbf857471f0","impliedFormat":1},{"version":"080941d9f9ff9307f7e27a83bcd888b7c8270716c39af943532438932ec1d0b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"2e80ee7a49e8ac312cc11b77f1475804bee36b3b2bc896bead8b6e1266befb43","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7a3c8b952931daebdfc7a2897c53c0a1c73624593fa070e46bd537e64dcd20a","affectsGlobalScope":true,"impliedFormat":1},{"version":"80e18897e5884b6723488d4f5652167e7bb5024f946743134ecc4aa4ee731f89","affectsGlobalScope":true,"impliedFormat":1},{"version":"cd034f499c6cdca722b60c04b5b1b78e058487a7085a8e0d6fb50809947ee573","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df","affectsGlobalScope":true,"impliedFormat":1},{"version":"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab","affectsGlobalScope":true,"impliedFormat":1},{"version":"52ada8e0b6e0482b728070b7639ee42e83a9b1c22d205992756fe020fd9f4a47","affectsGlobalScope":true,"impliedFormat":1},{"version":"3bdefe1bfd4d6dee0e26f928f93ccc128f1b64d5d501ff4a8cf3c6371200e5e6","affectsGlobalScope":true,"impliedFormat":1},{"version":"59fb2c069260b4ba00b5643b907ef5d5341b167e7d1dbf58dfd895658bda2867","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true,"impliedFormat":1},{"version":"af3dd424cf267428f30ccfc376f47a2c0114546b55c44d8c0f1d57d841e28d74","affectsGlobalScope":true,"impliedFormat":1},{"version":"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399","affectsGlobalScope":true,"impliedFormat":1},{"version":"959d36cddf5e7d572a65045b876f2956c973a586da58e5d26cde519184fd9b8a","affectsGlobalScope":true,"impliedFormat":1},{"version":"965f36eae237dd74e6cca203a43e9ca801ce38824ead814728a2807b1910117d","affectsGlobalScope":true,"impliedFormat":1},{"version":"3925a6c820dcb1a06506c90b1577db1fdbf7705d65b62b99dce4be75c637e26b","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a3d63ef2b853447ec4f749d3f368ce642264246e02911fcb1590d8c161b8005","affectsGlobalScope":true,"impliedFormat":1},{"version":"8cdf8847677ac7d20486e54dd3fcf09eda95812ac8ace44b4418da1bbbab6eb8","affectsGlobalScope":true,"impliedFormat":1},{"version":"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a","affectsGlobalScope":true,"impliedFormat":1},{"version":"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004","affectsGlobalScope":true,"impliedFormat":1},{"version":"b4b67b1a91182421f5df999988c690f14d813b9850b40acd06ed44691f6727ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"df83c2a6c73228b625b0beb6669c7ee2a09c914637e2d35170723ad49c0f5cd4","affectsGlobalScope":true,"impliedFormat":1},{"version":"436aaf437562f276ec2ddbee2f2cdedac7664c1e4c1d2c36839ddd582eeb3d0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e3c06ea092138bf9fa5e874a1fdbc9d54805d074bee1de31b99a11e2fec239d","affectsGlobalScope":true,"impliedFormat":1},{"version":"87dc0f382502f5bbce5129bdc0aea21e19a3abbc19259e0b43ae038a9fc4e326","affectsGlobalScope":true,"impliedFormat":1},{"version":"b1cb28af0c891c8c96b2d6b7be76bd394fddcfdb4709a20ba05a7c1605eea0f9","affectsGlobalScope":true,"impliedFormat":1},{"version":"2fef54945a13095fdb9b84f705f2b5994597640c46afeb2ce78352fab4cb3279","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac77cb3e8c6d3565793eb90a8373ee8033146315a3dbead3bde8db5eaf5e5ec6","affectsGlobalScope":true,"impliedFormat":1},{"version":"56e4ed5aab5f5920980066a9409bfaf53e6d21d3f8d020c17e4de584d29600ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ece9f17b3866cc077099c73f4983bddbcb1dc7ddb943227f1ec070f529dedd1","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a6282c8827e4b9a95f4bf4f5c205673ada31b982f50572d27103df8ceb8013c","affectsGlobalScope":true,"impliedFormat":1},{"version":"1c9319a09485199c1f7b0498f2988d6d2249793ef67edda49d1e584746be9032","affectsGlobalScope":true,"impliedFormat":1},{"version":"e3a2a0cee0f03ffdde24d89660eba2685bfbdeae955a6c67e8c4c9fd28928eeb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811c71eee4aa0ac5f7adf713323a5c41b0cf6c4e17367a34fbce379e12bbf0a4","affectsGlobalScope":true,"impliedFormat":1},{"version":"51ad4c928303041605b4d7ae32e0c1ee387d43a24cd6f1ebf4a2699e1076d4fa","affectsGlobalScope":true,"impliedFormat":1},{"version":"60037901da1a425516449b9a20073aa03386cce92f7a1fd902d7602be3a7c2e9","affectsGlobalScope":true,"impliedFormat":1},{"version":"d4b1d2c51d058fc21ec2629fff7a76249dec2e36e12960ea056e3ef89174080f","affectsGlobalScope":true,"impliedFormat":1},{"version":"22adec94ef7047a6c9d1af3cb96be87a335908bf9ef386ae9fd50eeb37f44c47","affectsGlobalScope":true,"impliedFormat":1},{"version":"196cb558a13d4533a5163286f30b0509ce0210e4b316c56c38d4c0fd2fb38405","affectsGlobalScope":true,"impliedFormat":1},{"version":"73f78680d4c08509933daf80947902f6ff41b6230f94dd002ae372620adb0f60","affectsGlobalScope":true,"impliedFormat":1},{"version":"c5239f5c01bcfa9cd32f37c496cf19c61d69d37e48be9de612b541aac915805b","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"3cbad9a1ba4453443026ed38e4b8be018abb26565fa7c944376463ad9df07c41","impliedFormat":1},{"version":"170d4db14678c68178ee8a3d5a990d5afb759ecb6ec44dbd885c50f6da6204f6","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac51dd7d31333793807a6abaa5ae168512b6131bd41d9c5b98477fc3b7800f9f","impliedFormat":1},{"version":"cf8db38686dfd74567ea692266fe44fbb32fa0e25fc0888ad6fc40e65873607e","impliedFormat":1},{"version":"42c169fb8c2d42f4f668c624a9a11e719d5d07dacbebb63cbcf7ef365b0a75b3","impliedFormat":1},{"version":"d153a11543fd884b596587ccd97aebbeed950b26933ee000f94009f1ab142848","affectsGlobalScope":true,"impliedFormat":1},{"version":"378281aa35786c27d5811af7e6bcaa492eebd0c7013d48137c35bbc69a2b9751","affectsGlobalScope":true,"impliedFormat":1},{"version":"3af97acf03cc97de58a3a4bc91f8f616408099bc4233f6d0852e72a8ffb91ac9","affectsGlobalScope":true,"impliedFormat":1},{"version":"1b2dd1cbeb0cc6ae20795958ba5950395ebb2849b7c8326853dd15530c77ab0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"1db0b7dca579049ca4193d034d835f6bfe73096c73663e5ef9a0b5779939f3d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"387a023d363f755eb63450a66c28b14cdd7bc30a104565e2dbf0a8988bb4a56c","affectsGlobalScope":true,"impliedFormat":1},{"version":"9798340ffb0d067d69b1ae5b32faa17ab31b82466a3fc00d8f2f2df0c8554aaa","affectsGlobalScope":true,"impliedFormat":1},{"version":"f26b11d8d8e4b8028f1c7d618b22274c892e4b0ef5b3678a8ccbad85419aef43","affectsGlobalScope":true,"impliedFormat":1},{"version":"4967529644e391115ca5592184d4b63980569adf60ee685f968fd59ab1557188","impliedFormat":1},{"version":"cdcf9ea426ad970f96ac930cd176d5c69c6c24eebd9fc580e1572d6c6a88f62c","impliedFormat":1},{"version":"23cd712e2ce083d68afe69224587438e5914b457b8acf87073c22494d706a3d0","impliedFormat":1},{"version":"487b694c3de27ddf4ad107d4007ad304d29effccf9800c8ae23c2093638d906a","impliedFormat":1},{"version":"3a80bc85f38526ca3b08007ee80712e7bb0601df178b23fbf0bf87036fce40ce","impliedFormat":1},{"version":"ccf4552357ce3c159ef75f0f0114e80401702228f1898bdc9402214c9499e8c0","impliedFormat":1},{"version":"c6fd2c5a395f2432786c9cb8deb870b9b0e8ff7e22c029954fabdd692bff6195","impliedFormat":1},{"version":"68834d631c8838c715f225509cfc3927913b9cc7a4870460b5b60c8dbdb99baf","impliedFormat":1},{"version":"2931540c47ee0ff8a62860e61782eb17b155615db61e36986e54645ec67f67c2","impliedFormat":1},{"version":"ccab02f3920fc75c01174c47fcf67882a11daf16baf9e81701d0a94636e94556","impliedFormat":1},{"version":"f6faf5f74e4c4cc309a6c6a6c4da02dbb840be5d3e92905a23dcd7b2b0bd1986","impliedFormat":1},{"version":"ea6bc8de8b59f90a7a3960005fd01988f98fd0784e14bc6922dde2e93305ec7d","impliedFormat":1},{"version":"36107995674b29284a115e21a0618c4c2751b32a8766dd4cb3ba740308b16d59","impliedFormat":1},{"version":"914a0ae30d96d71915fc519ccb4efbf2b62c0ddfb3a3fc6129151076bc01dc60","impliedFormat":1},{"version":"33e981bf6376e939f99bd7f89abec757c64897d33c005036b9a10d9587d80187","impliedFormat":1},{"version":"7fd1b31fd35876b0aa650811c25ec2c97a3c6387e5473eb18004bed86cdd76b6","impliedFormat":1},{"version":"b41767d372275c154c7ea6c9d5449d9a741b8ce080f640155cc88ba1763e35b3","impliedFormat":1},{"version":"3bacf516d686d08682751a3bd2519ea3b8041a164bfb4f1d35728993e70a2426","impliedFormat":1},{"version":"7fb266686238369442bd1719bc0d7edd0199da4fb8540354e1ff7f16669b4323","impliedFormat":1},{"version":"0a60a292b89ca7218b8616f78e5bbd1c96b87e048849469cccb4355e98af959a","impliedFormat":1},{"version":"0b6e25234b4eec6ed96ab138d96eb70b135690d7dd01f3dd8a8ab291c35a683a","impliedFormat":1},{"version":"9666f2f84b985b62400d2e5ab0adae9ff44de9b2a34803c2c5bd3c8325b17dc0","impliedFormat":1},{"version":"40cd35c95e9cf22cfa5bd84e96408b6fcbca55295f4ff822390abb11afbc3dca","impliedFormat":1},{"version":"b1616b8959bf557feb16369c6124a97a0e74ed6f49d1df73bb4b9ddf68acf3f3","impliedFormat":1},{"version":"5b03a034c72146b61573aab280f295b015b9168470f2df05f6080a2122f9b4df","impliedFormat":1},{"version":"40b463c6766ca1b689bfcc46d26b5e295954f32ad43e37ee6953c0a677e4ae2b","impliedFormat":1},{"version":"249b9cab7f5d628b71308c7d9bb0a808b50b091e640ba3ed6e2d0516f4a8d91d","impliedFormat":1},{"version":"80aae6afc67faa5ac0b32b5b8bc8cc9f7fa299cff15cf09cc2e11fd28c6ae29e","impliedFormat":1},{"version":"f473cd2288991ff3221165dcf73cd5d24da30391f87e85b3dd4d0450c787a391","impliedFormat":1},{"version":"499e5b055a5aba1e1998f7311a6c441a369831c70905cc565ceac93c28083d53","impliedFormat":1},{"version":"54c3e2371e3d016469ad959697fd257e5621e16296fa67082c2575d0bf8eced0","impliedFormat":1},{"version":"beb8233b2c220cfa0feea31fbe9218d89fa02faa81ef744be8dce5acb89bb1fd","impliedFormat":1},{"version":"c183b931b68ad184bc8e8372bf663f3d33304772fb482f29fb91b3c391031f3e","impliedFormat":1},{"version":"5d0375ca7310efb77e3ef18d068d53784faf62705e0ad04569597ae0e755c401","impliedFormat":1},{"version":"59af37caec41ecf7b2e76059c9672a49e682c1a2aa6f9d7dc78878f53aa284d6","impliedFormat":1},{"version":"addf417b9eb3f938fddf8d81e96393a165e4be0d4a8b6402292f9c634b1cb00d","impliedFormat":1},{"version":"48cc3ec153b50985fb95153258a710782b25975b10dd4ac8a4f3920632d10790","impliedFormat":1},{"version":"adf27937dba6af9f08a68c5b1d3fce0ca7d4b960c57e6d6c844e7d1a8e53adae","impliedFormat":1},{"version":"e1528ca65ac90f6fa0e4a247eb656b4263c470bb22d9033e466463e13395e599","impliedFormat":1},{"version":"2e85db9e6fd73cfa3d7f28e0ab6b55417ea18931423bd47b409a96e4a169e8e6","impliedFormat":1},{"version":"c46e079fe54c76f95c67fb89081b3e399da2c7d109e7dca8e4b58d83e332e605","impliedFormat":1},{"version":"866078923a56d026e39243b4392e282c1c63159723996fa89243140e1388a98d","impliedFormat":1},{"version":"830171b27c5fdf9bcbe4cf7d428fcf3ae2c67780fb7fbdccdf70d1623d938bc4","affectsGlobalScope":true,"impliedFormat":1},{"version":"1cf059eaf468efcc649f8cf6075d3cb98e9a35a0fe9c44419ec3d2f5428d7123","affectsGlobalScope":true,"impliedFormat":1},{"version":"e7721c4f69f93c91360c26a0a84ee885997d748237ef78ef665b153e622b36c1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d97fb21da858fb18b8ae72c314e9743fd52f73ebe2764e12af1db32fc03f853f","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ea15fd99b2e34cb25fe8346c955000bb70c8b423ae4377a972ef46bfb37f595","impliedFormat":1},{"version":"7cf69dd5502c41644c9e5106210b5da7144800670cbe861f66726fa209e231c4","impliedFormat":1},{"version":"72c1f5e0a28e473026074817561d1bc9647909cf253c8d56c41d1df8d95b85f7","impliedFormat":1},{"version":"f9b4137a0d285bd77dba2e6e895530112264310ae47e07bf311feae428fb8b61","affectsGlobalScope":true,"impliedFormat":1},{"version":"8b21e13ed07d0df176ae31d6b7f01f7b17d66dbeb489c0d31d00de2ca14883da","impliedFormat":1},{"version":"51aecd2df90a3cffea1eb4696b33b2d78594ea2aa2138e6b9471ec4841c6c2ee","impliedFormat":1},{"version":"9d8f9e63e29a3396285620908e7f14d874d066caea747dc4b2c378f0599166b4","affectsGlobalScope":true,"impliedFormat":1},{"version":"5524481e56c48ff486f42926778c0a3cce1cc85dc46683b92b1271865bcf015a","impliedFormat":1},{"version":"f929f0b6b3421a2d34344b0f421f45aeb2c84ad365ebf29d04312023b3accc58","impliedFormat":1},{"version":"db9ada976f9e52e13f7ae8b9a320f4b67b87685938c5879187d8864b2fbe97f3","impliedFormat":1},{"version":"9f39e70a354d0fba29ac3cdf6eca00b7f9e96f64b2b2780c432e8ea27f133743","impliedFormat":1},{"version":"0dace96cc0f7bc6d0ee2044921bdf19fe42d16284dbcc8ae200800d1c9579335","impliedFormat":1},{"version":"a2e2bbde231b65c53c764c12313897ffdfb6c49183dd31823ee2405f2f7b5378","impliedFormat":1},{"version":"ad1cc0ed328f3f708771272021be61ab146b32ecf2b78f3224959ff1e2cd2a5c","impliedFormat":1},{"version":"c64e1888baaa3253ca4405b455e4bf44f76357868a1bd0a52998ade9a092ad78","affectsGlobalScope":true,"impliedFormat":1},{"version":"d8cf132379078d0974a59df26069689a2d33c7dc826b5be56231841cb2f32e58","impliedFormat":1},{"version":"fbf413fc617837453c878a9174a1f1b383616857a3f8366bc41cf30df4aea7d5","impliedFormat":1},{"version":"148c73ec11318850f571172ceae3e55ce479d850fe18ec8eae0abd99d9f6c319","impliedFormat":1},{"version":"230bdc111d7578276e4a3bb9d075d85c78c6b68f428c3a9935e2eaa10f4ae1f5","impliedFormat":1},{"version":"e8aabbee5e7b9101b03bb4222607d57f38859b8115a8050a4eb91b4ee43a3a73","impliedFormat":1},{"version":"bbf42f98a5819f4f06e18c8b669a994afe9a17fe520ae3454a195e6eabf7700d","impliedFormat":1},{"version":"c0bb1b65757c72bbf8ddf7eaa532223bacf58041ff16c883e76f45506596e925","impliedFormat":1},{"version":"c8b85f7aed29f8f52b813f800611406b0bfe5cf3224d20a4bdda7c7f73ce368e","affectsGlobalScope":true,"impliedFormat":1},{"version":"145dcf25fd4967c610c53d93d7bc4dce8fbb1b6dd7935362472d4ae49363c7ba","impliedFormat":1},{"version":"ff65b8a8bd380c6d129becc35de02f7c29ad7ce03300331ca91311fb4044d1a9","impliedFormat":1},{"version":"76957a6d92b94b9e2852cf527fea32ad2dc0ef50f67fe2b14bd027c9ceef2d86","impliedFormat":1},{"version":"9043daec15206650fa119bad6b8d70136021ea7d52673a71f79a87a42ee38d44","affectsGlobalScope":true,"impliedFormat":1},{"version":"4e2de7ab2f74e36d7078bccdf831585b10dc6330bab56054921531b03f9beaf3","affectsGlobalScope":true,"impliedFormat":1},{"version":"a58a15da4c5ba3df60c910a043281256fa52d36a0fcdef9b9100c646282e88dd","impliedFormat":1},{"version":"b36beffbf8acdc3ebc58c8bb4b75574b31a2169869c70fc03f82895b93950a12","impliedFormat":1},{"version":"de263f0089aefbfd73c89562fb7254a7468b1f33b61839aafc3f035d60766cb4","impliedFormat":1},{"version":"77fbe5eecb6fac4b6242bbf6eebfc43e98ce5ccba8fa44e0ef6a95c945ff4d98","impliedFormat":1},{"version":"8c81fd4a110490c43d7c578e8c6f69b3af01717189196899a6a44f93daa57a3a","impliedFormat":1},{"version":"5fb39858b2459864b139950a09adae4f38dad87c25bf572ce414f10e4bd7baab","impliedFormat":1},{"version":"65faec1b4bd63564aeec33eab9cacfaefd84ce2400f03903a71a1841fbce195f","impliedFormat":1},{"version":"b33b74b97952d9bf4fbd2951dcfbb5136656ddb310ce1c84518aaa77dbca9992","impliedFormat":1},{"version":"37ba7b45141a45ce6e80e66f2a96c8a5ab1bcef0fc2d0f56bb58df96ec67e972","impliedFormat":1},{"version":"45650f47bfb376c8a8ed39d4bcda5902ab899a3150029684ee4c10676d9fbaee","impliedFormat":1},{"version":"6b306cd4282bbb54d4a6bb23cfb7a271160983dfc38c67b5a132504cfcc34896","affectsGlobalScope":true,"impliedFormat":1},{"version":"c119835edf36415081dfd9ed15fc0cd37aaa28d232be029ad073f15f3d88c323","impliedFormat":1},{"version":"450172a56b944c2d83f45cc11c9a388ea967cd301a21202aa0a23c34c7506a18","impliedFormat":1},{"version":"9705cd157ffbb91c5cab48bdd2de5a437a372e63f870f8a8472e72ff634d47c1","affectsGlobalScope":true,"impliedFormat":1},{"version":"ae86f30d5d10e4f75ce8dcb6e1bd3a12ecec3d071a21e8f462c5c85c678efb41","impliedFormat":1},{"version":"72f8936aebf0c4a1adab767b97d34ba7d3a308afcf76de4417b9c16fb92ed548","impliedFormat":1},{"version":"e03460fe72b259f6d25ad029f085e4bedc3f90477da4401d8fbc1efa9793230e","impliedFormat":1},{"version":"4286a3a6619514fca656089aee160bb6f2e77f4dd53dc5a96b26a0b4fc778055","impliedFormat":1},{"version":"69e0a41d620fb678a899c65e073413b452f4db321b858fe422ad93fd686cd49a","affectsGlobalScope":true,"impliedFormat":1},{"version":"3585d6891e9ea18e07d0755a6d90d71331558ba5dc5561933553209f886db106","affectsGlobalScope":true,"impliedFormat":1},{"version":"86be71cbb0593468644932a6eb96d527cfa600cecfc0b698af5f52e51804451d","impliedFormat":1},{"version":"84dd6b0fd2505135692935599d6606f50a421389e8d4535194bcded307ee5cf2","impliedFormat":1},{"version":"0d5b085f36e6dc55bc6332ecb9c733be3a534958c238fb8d8d18d4a2b6f2a15a","impliedFormat":1},{"version":"db19ea066fdc5f97df3f769e582ae3000380ab7942e266654bdb1a4650d19eaf","affectsGlobalScope":true,"impliedFormat":1},{"version":"2a034894bf28c220a331c7a0229d33564803abe2ac1b9a5feee91b6b9b6e88ea","impliedFormat":1},{"version":"d7e9ab1b0996639047c61c1e62f85c620e4382206b3abb430d9a21fb7bc23c77","impliedFormat":1},{"version":"3b89216a7e38a454985ad17bb2ff85792837dc812f2a89fa5f60ad0a2e216fa7","impliedFormat":99},{"version":"16fe60bb544cfedfd2b5bb2f7d0b3957be7978706d57d9f06edc9c0c8dbdba23","impliedFormat":99},{"version":"82179358c2d9d7347f1602dc9300039a2250e483137b38ebf31d4d2e5519c181","impliedFormat":99},{"version":"c73fdf42528325dd17940937ed787b15ae3445c6a2dae1a2b74bc4d87d337ca2","impliedFormat":99},{"version":"e8e17dfef3cfa9f0847ac93dd535a9896af7fb57c1a1b164484bb1b0ee4a25d8","impliedFormat":99},{"version":"7fa4bb0fb2562e12042ee95fc94f6cdc23318a57b16c4fd7b2b655e1b629ac2f","impliedFormat":99},{"version":"148debd12783ded0a60d115daeacd8136f77757ae89a05c4e18de6dd77646fd2","impliedFormat":99},{"version":"0088b02dca63c47b273a140d0a3944bdc6dc2eb765fff0ca98e3c3a2786b3a5a","impliedFormat":99},{"version":"a651d06b780fa354231f19b040cbcde484bede3218885752b4f9e9a8f72d3b5f","impliedFormat":99},{"version":"06e26f75bed4c8389a8a63f0e6d6a9068038873dc95d8d1338e8c370a0ae8bc3","impliedFormat":99},{"version":"a2155e2675fd1af52b0b70779371c28611cdd1076b29d0f68bf93b983e5ddce0","impliedFormat":99},{"version":"fadf415615b2fb24ba25b7d30bbc34b2a6fafcf1dd2a41770225ddc321e25994","impliedFormat":99},{"version":"6c78f402ac22d1c4cb614f9a64d7b18ab069dca2ddfa67aae2c3d65f80feb879","impliedFormat":99},{"version":"634205f04f73d6f540690f4f90faf41cf84295042383da37b82808378ce8f3e4","impliedFormat":99},{"version":"7d3e062a778b8f5ea4f0cac7e925e31f88e6739812ebc5f827474324a4048f14","impliedFormat":99},{"version":"2977a62a7850809a1bd9c3521835b52c870310236d974b8f39d31486d9cf7c57","impliedFormat":99},{"version":"72debca346f16f5c708889f39db0d500f3e939399567693720155d667ac23aad","impliedFormat":99},{"version":"a98ab5a650a06e2c7d8989343253346a0916e9c979960191afe5ce4240dc6ecd","impliedFormat":99},{"version":"eec858dc8e5e2b1ccda9d3f3235801a13342ba90cb82af94fa60265639e5e060","impliedFormat":99},{"version":"4e003c868b0d8f8ad200b96cbc653e18e513fa23e1c19c4fe3cc25d4394efc47","impliedFormat":99},{"version":"091546ac9077cddcd7b9479cc2e0c677238bf13e39eab4b13e75046c3328df93","impliedFormat":99},{"version":"161c8e0690c46021506e32fda85956d785b70f309ae97011fd27374c065cac9b","affectsGlobalScope":true,"impliedFormat":1},{"version":"e0864480ea083087d705f9405bd6bf59b795e8474c3447f0d6413b2bce535a09","impliedFormat":99},{"version":"e67cbea16f1994af89efd700542dbf3828a46a52b29e4d67e801bd7869dc103c","impliedFormat":99},{"version":"971f12a5fc236419ced0b7b9f23a53c1758233713f565635bbf4b85e2b23f55a","impliedFormat":99},{"version":"76de3321ce519928f1ff7d7a30391c0dc7374af20f81d9167919f038895b5cb0","impliedFormat":99},{"version":"094b9210da23b8711709b0535c59841186267bf6b83c1609aa9b515f830ab274","impliedFormat":99},{"version":"fbfbb4e99c6259ff5ccc4a5a62b3b63c0c8cae6e84737786c4a4c761c9a9de91","impliedFormat":99},{"version":"604887bbd5b0a93234ce882543a465f008636185c52e0f0353330e2bc38b03b6","impliedFormat":99},{"version":"32bf912173e8a9533631f9e9d8dc90a2ac7b52c2355611ddd886beab24dfd182","impliedFormat":99},{"version":"82695324abf7f3278b6d9f0582f4a544e8f7055c8cbe1065ab5cbacde1719c4c","impliedFormat":99},{"version":"43bba542e50e19241ec64bc13cfc0d9273e6198f36563cecad1f4e4b78ad47f3","impliedFormat":99},{"version":"b8cb3b69c0e8114f758bb8ef8efeef1cc80f8911bfd21126def73d2174ce479e","impliedFormat":99},{"version":"f582b0fcbf1eea9b318ab92fb89ea9ab2ebb84f9b60af89328a91155e1afce72","impliedFormat":99},{"version":"402e5c534fb2b85fa771170595db3ac0dd532112c8fa44fc23f233bc6967488b","impliedFormat":1},{"version":"52dcc257df5119fb66d864625112ce5033ac51a4c2afe376a0b299d2f7f76e4a","impliedFormat":1},{"version":"e5bab5f871ef708d52d47b3e5d0aa72a08ee7a152f33931d9a60809711a2a9a3","impliedFormat":1},{"version":"e16dc2a81595736024a206c7d5c8a39bfe2e6039208ef29981d0d95434ba8fcf","impliedFormat":1},{"version":"cc4a4903fb698ca1d961d4c10dce658aa3a479faf40509d526f122b044eaf6a4","impliedFormat":1},{"version":"19ee8416e6473ed6c7adb868fa796b5653cf0fa2a337658e677eaa0d134388c3","impliedFormat":1},{"version":"1328ab4e442614b28cdb3d4b414cf68325c0da0dca07287a338d0654b7a00261","impliedFormat":1},{"version":"a039dc21f045919f3cbee2ec13812cc6cc3eebc99dae4be00973230f468d19a6","impliedFormat":1},{"version":"3fbe57af01460e49dcd29df55d6931e1672bc6f1be0fb073d11410bc16f9037d","impliedFormat":1},{"version":"f760be449e8562ec5c09bb5187e8e1eabf3c113c0c58cddda53ef8c69f3e2131","impliedFormat":1},{"version":"44325ed13294fce6ab825b82947bbeed2611db7dad9d9135260192f375e5a189","impliedFormat":1},{"version":"e392e8fb5b514eafc585601c1d781485aa6dd6a320e75daf1064a4c6918a1b45","impliedFormat":1},{"version":"46e4a36e8ddbdfb4e7330e11c81c970dc8b218611df9183d39c41c5f8c653b55","impliedFormat":1},{"version":"370bde134aa8c2abc926d0e99d3a4d5d5dba65c6ee65459137e4f02670cbf841","impliedFormat":1},{"version":"6332f565867cf4a740a70e30f31cefba37ef7cebcf74f22eab8d744fde6d193e","impliedFormat":1},{"version":"2977b7884aedc895a1d0c9c210c7cf3272c29d6959a08a6fa3ff71e0aff08175","impliedFormat":1},{"version":"17f2922d41ddd032830a91371c948cd9ce903b35c95adca72271a54584f19b0b","impliedFormat":1},{"version":"3eed76ede2a1a14d7c9bb0a642041282dcc264811139d3dd275c9fe14efc9840","impliedFormat":1},{"version":"00cf4001e0d9c6e5e036bc545b9d73e2b8b84cddb02e61ad05bab3752b1d4522","impliedFormat":1},{"version":"8d369483f0c2b9ee388129cfdb6a43bc8112b377e86a41884bd06e19ce04f4c1","impliedFormat":99},{"version":"3fd8a5aefd8c3feb3936ca66f5aa89dff7bf6e6537b4158dbd0f6e0d65ed3b9e","impliedFormat":1},{"version":"a18642ddf216f162052a16cba0944892c4c4c977d3306a87cb673d46abbb0cbf","impliedFormat":1},{"version":"41c41c6e90133bb2a14f7561f29944771886e5535945b2b372e2f6ed6987746e","impliedFormat":1},{"version":"4ec16d7a4e366c06a4573d299e15fe6207fc080f41beac5da06f4af33ea9761e","impliedFormat":99},{"version":"960bd764c62ac43edc24eaa2af958a4b4f1fa5d27df5237e176d0143b36a39c6","affectsGlobalScope":true,"impliedFormat":99},{"version":"e16005051e0583dbf82724a1ada339f6e814210471ace11ebad9c6e5a80603c0","impliedFormat":99},{"version":"59f8dc89b9e724a6a667f52cdf4b90b6816ae6c9842ce176d38fcc973669009e","affectsGlobalScope":true,"impliedFormat":99},{"version":"f3cb0eb6bbb80d5c035daa1a9a70842698d564ea917cf6c43c559f469c517894","impliedFormat":99},{"version":"7a0b3e902cabef41f2d37e5eb4dab644c5b8470594318810434df7cc547b0cf8","impliedFormat":1},{"version":"1ee702469d04572c1088f82c3016f1e5c39e08764c8c76a3a5f18d199ead432c","impliedFormat":1},{"version":"d7d1b49e0462eb979fd506c9667f1d4afbb0d39940ec9da5ef4473d1b952b0b6","impliedFormat":1},{"version":"136ac2fb228b2c64ad2d039eb4de311212505a20a91b9ba632bd6cfdc3b4126f","impliedFormat":1},{"version":"7d98e7acbe7ffe68b699bf7656af842f5d5efecd1df67800b92ed71ed60f2287","impliedFormat":1},{"version":"d89afb17f21a2289bc4de0ab4566edaaf7c9fde88ad479a103047d6c0f644d4b","impliedFormat":99},{"version":"151ff381ef9ff8da2da9b9663ebf657eac35c4c9a19183420c05728f31a6761d","impliedFormat":1},{"version":"ee70b8037ecdf0de6c04f35277f253663a536d7e38f1539d270e4e916d225a3f","affectsGlobalScope":true,"impliedFormat":1},{"version":"cd21651ff2dc71a2d2386cecd16eca9eed55064b792564c2ff09e9465f974521","impliedFormat":1},{"version":"f20c9c09c8a0fea4784952305a937bdb092417908bad669dc789d3e54d8a5386","affectsGlobalScope":true,"impliedFormat":1},{"version":"c58be3e560989a877531d3ff7c9e5db41c5dd9282480ccf197abfcc708a95b8d","impliedFormat":1},{"version":"91f23ddc3971b1c8938c638fb55601a339483953e1eb800675fa5b5e8113db72","impliedFormat":1},{"version":"50d22844db90a0dcd359afeb59dd1e9a384d977b4b363c880b4e65047237a29e","impliedFormat":1},{"version":"d33782b82eea0ee17b99ca563bd19b38259a3aaf096d306ceaf59cd4422629be","impliedFormat":1},{"version":"7f7f1420c69806e268ab7820cbe31a2dcb2f836f28b3d09132a2a95b4a454b80","impliedFormat":1},{"version":"2d14198b25428b7b8010a895085add8edfaae476ab863c0c15fe2867fc214fe4","impliedFormat":1},{"version":"61046f12c3cfafd353d2d03febc96b441c1a0e3bb82a5a88de78cc1be9e10520","impliedFormat":1},{"version":"f4e7f5824ac7b35539efc3bef36b3e6be89603b88224cb5c0ad3526a454fc895","impliedFormat":1},{"version":"091af8276fbc70609a00e296840bd284a2fe29df282f0e8dae2de9f0a706685f","impliedFormat":1},{"version":"537aff717746703d2157ec563b5de4f6393ce9f69a84ae62b49e9b6c80b6e587","impliedFormat":1},{"version":"d4220a16027ddf0cc7d105d80cbb01f5070ca7ddd8b2d007cfb024b27e22b912","impliedFormat":1},{"version":"fb3aa3fb5f4fcd0d57d389a566c962e92dbfdaea3c38e3eaf27d466e168871c6","impliedFormat":1},{"version":"0af1485d84516c1a080c1f4569fea672caac8051e29f33733bf8d01df718d213","impliedFormat":1},{"version":"69630ad0e50189fb7a6b8f138c5492450394cb45424a903c8b53b2d5dd1dbce2","impliedFormat":1},{"version":"c2d56efa50f7d0ac8e4e7125fe5e213c1f13228117a70c54e79d23d5529c3fc8","impliedFormat":1},{"version":"8e067d3c170e56dfe3502fc8ebd092ae76a5235baad6f825726f3bbcc8a3836a","impliedFormat":1},{"version":"ae7f57067310d6c4acbc4862b91b5799e88831f4ab77f865443a9bc5057b540a","impliedFormat":1},{"version":"955d0c60502897e9735fcd08d2c1ad484b6166786328b89386074aebcd735776","impliedFormat":1},{"version":"2fa69d202a513f2a6553f263d473cba85d598ce250261715d78e8aab42df6b93","impliedFormat":1},{"version":"c17d5f8e1f0d7cb88000577b29579e758d94fe2d655db41fed16183498860f60","impliedFormat":1},{"version":"3c19e77a05c092cab5f4fd57f6864aa2657f3ad524882f917a05fdb025905199","impliedFormat":1},{"version":"09759a6d77fcbbc42729c6ad12c78bd1603e7ef516fc2830b0f7900ae0c45293","impliedFormat":1},{"version":"8e358d80ac052e9f4e5cc16d06c946628834b47718a4bd101ef2087603b8e5c7","impliedFormat":1},{"version":"113ae3c00b4b6c8cede732e154504f5d265c7794d96440bbe81ca88473c60459","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"f0ae1ac99c66a4827469b8942101642ae65971e36db438afe67d4985caa31222","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"46b907ed13bd5023adeb5446ad96e9680b1a40d4e4288344d0d0e31d9034d20a","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"ea689c41691ac977c4cf2cfe7fc7de5136851730c9d4dbc97d76eb65df8ee461","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"8d0f0aa989374cc6c7bc141649a9ca7d76b221a39375c8b98b844c3ad8c9b090","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"72c62b406af19eca8080ea63f90f4c907ee5b8348152b75ba106395cd7514f54","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"be3d53a4a6cc2e67e4b4b09c46bffce6282585fe504f77839863c53cb378a47f","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"3199d552cbbbac5a3c6e1499c09acf672ae8c8c8687cf2a3dbfa7c8902cc7054","impliedFormat":1},{"version":"c82377c9ebc4d9788c743b6fba0661d1c34f39a7955476ac780039e120dc41fd","impliedFormat":1},{"version":"e3bf0a5aa199a4fc9f478808c7ffc2aa01411944594c2b305a43ede96e4a521d","impliedFormat":1},{"version":"3b0951ca295694b8d7b8139c1d69c1e6c2085e65fd86c8968eae8224f3bf5bfe","impliedFormat":1},{"version":"f2393e9e894511d174544b3319d5ed107753cc76548e590454024ccf2dedc881","impliedFormat":1},{"version":"83af0534774218e8d8205fb55df878c77e2471708a9d1435778aa69dabc24839","impliedFormat":1},{"version":"0013a72eaf0d971739705e72d2334e90973516c348f3b42a070ea5ec5563f502","impliedFormat":1},{"version":"fcb40edd4421643f11e2829aebe2d780e23a8ca3c77922d214bf709410dd4a38","impliedFormat":99},{"version":"a3f2bfcdcadac846411650d12cef112ca1e070c2a71413a185a5532aa4c1275d","impliedFormat":1},{"version":"e370dfb4db5a3da284d067bf54c03fb826c246e96780fe04385134594963cd97","impliedFormat":99},{"version":"1549cd8d8671643b22a557a301d4c6797bcbe26491ecd153d1320e470a9dfb8d","impliedFormat":99},{"version":"0eb1d2c95f6a0504d93e73d5352a5917ce9af4bdcfd1326d8ceeedca45a54206","impliedFormat":99},{"version":"54933a70391c42257d8c642f8fc6df8233f536a6e24557320cfc3042914245d9","impliedFormat":99},{"version":"1d879125d1ec570bf04bc1f362fdbe0cb538315c7ac4bcfcdf0c1e9670846aa6","impliedFormat":1},{"version":"f7e4383f98f1e5b68f8507236fbd60832d391666213bab3ede2dbe4b61417b9d","impliedFormat":99},{"version":"149be55faecff54f412f680211558227bf7dab9d3680f4deac6023fe7cbbd949","impliedFormat":99},{"version":"2ee6918826cb759305128f440bf200073fc0083d499a0c27c0bbdd50c812f53f","impliedFormat":99},{"version":"0488c8ef5e546f2230952237e48f1693ca6ccefe81ffa8dad27c652832013499","impliedFormat":99},{"version":"5b9d2fcfa745b4cb0750e99c340bccb3caedfbbf8e2d1fdcc1558e81d9723ccf","impliedFormat":99},{"version":"53977891ac6dd2f0999c1f87e563d1aaca36a42ed795b9ac8756ddae1220d885","impliedFormat":99},{"version":"18a17db365d40c4eeff41ff1886eaf56d9ca6b9f1c7ea4a7aeff0360a37cbeb9","impliedFormat":99},{"version":"facb3afc979337bc65dfee5aca99672debb63494d290a1a93de5ba0bfe2aaed6","impliedFormat":99},{"version":"4f4f4d55d5877e625861c64c2a36b24e3bc1c0664f0e24d4b4d7289e2af641d1","impliedFormat":99},{"version":"79d3757b73317c225b8378fd80bfa4f31af12ef75f72e344a5b3919fd95ce519","impliedFormat":99},{"version":"c538c581117291675fc3385f93d4eaea9fabac371659b2d5f33fbf1a7995057f","impliedFormat":99},{"version":"672ea9a6a8bc9a5e51e7cea23606a3faecaf720f3ddba23b8c2c91d816f2ffc7","impliedFormat":99},{"version":"870f295d1e4c7b53865a2bccd70acafd9c2bad99f8fa1bdd5e8d63fa79aa0ae3","impliedFormat":99},{"version":"a5c5c45f8479acb992d84421529bb51f57ce760d4a78feab65c4ec1fb26443a5","impliedFormat":99},{"version":"27f7f4347ba66354f67ddfd30477175d6f737e48aa410a66597351ee085d5897","impliedFormat":99},{"version":"9cab09d2fae1eb249a48f699d89164f164d47098bf0496ef48d819d954522be0","impliedFormat":99},{"version":"aed8fdfa1735772a71b641e8b67c5ff071a137d9ccccb3325619d8f3ace1e6b8","impliedFormat":99},{"version":"dcf1cb4cd3b27f0e108d001fc2fed0b8b5259cb35e1d235359b0d641be13110a","impliedFormat":99},{"version":"43ab854546749b24ed1a5c94660c1d4c1e057c7f054cb7ce55685219622a7738","impliedFormat":99},{"version":"ac1ea9507851331f3b2b675c59bc8592198a5cfa98cf074cae126f4cbe1e8527","impliedFormat":99},{"version":"347ac91dc251f916ed60c4359a7ebc7e0fa910bf128d0fd514dadc589a6beb3c","impliedFormat":99},{"version":"35430f542856fbf5d9f84644db699049c591e905c709bfa928f2094c5feb1f7d","impliedFormat":99},{"version":"4f4ca00be6361168ce482f1a8bfd44d37f35548cd7780384fbb0a6c9f25b5439","impliedFormat":99},{"version":"660e17a862d375ae05cee53600bc4e22289376e59a255d6de5ca1b53560ec8b5","impliedFormat":99},{"version":"e16d8f9bd6b01fdad145b7934cdf1b384fea92c0c7cca68776f12ca71feec266","impliedFormat":99},{"version":"f2b98fa6df7305499bf85c66887a3b4ebc0c9e73c24ecfa3ec2d448a02e208f6","impliedFormat":99},{"version":"0204dcd27fad4d0b803909b8c260b145cb947c11c29afe44ceca7a0214d818f1","impliedFormat":99},{"version":"72518f51a9de8d269fc06fe7e812b612fb84f748816fdb8492bcefc358a5a9d0","impliedFormat":99},{"version":"1b0d78ad9e5025e4f87e8f8b64c4ee5f7ab70fd62f4965e89c03a333996a5bdc","impliedFormat":99},{"version":"21a3170e605e532c3f685d0daa2589ca628890bd009c90425bd91e94f76d8513","impliedFormat":99},{"version":"1a516a7f4bc334d3ad0914f51f0b7438595f71e3979778f91fa98eeece210328","impliedFormat":99},{"version":"00a9f1b94a9cc1d0654bc0ba2ea6c802f59bbc7f81cedab9e352a7e114be232b","impliedFormat":99},{"version":"a6468e004cba50fb5150bfd71221031a521c1141b110fefebf01bb27a2a1eca0","impliedFormat":99},{"version":"0871baea3e43a43956bf0b16da20aee6cda9ea603d13fe2873ccc459ab678ec0","signature":"cedcca85bb12dd5b6ee93ef4065be160dddf502db2d24204bbcd157bc26ccc64"},{"version":"382abacd6f39aba659a62fbfafcf193b8bc45e20fd2c259f5d711c7988504ab6","signature":"8829ec6853540e2d4f2061a355b98f5fd7a57ae40ddd7be96ccd78c599cc0fa8"},{"version":"156c601e2753af96fbbe0b68dd18ab665959d7259ead021adc829930f834e9b7","signature":"cf8f950faa89fee7f7542922c717e0fe27e130efd5ce9356a13f68c30afc85ad"},{"version":"240261de76d4cb08b8e8073bb26966092f4225a81bba0f0af99a0f33675716a9","signature":"bdacc45c84c13a0de9b9fed5043145929ac06b96d901228bcfc050157c4b3570"}],"root":[358],"options":{"allowJs":false,"allowSyntheticDefaultImports":true,"composite":true,"esModuleInterop":true,"jsx":4,"module":99,"noFallthroughCasesInSwitch":true,"noImplicitOverride":true,"noImplicitReturns":true,"noPropertyAccessFromIndexSignature":true,"noUncheckedIndexedAccess":true,"noUnusedLocals":true,"noUnusedParameters":true,"skipLibCheck":true,"strict":true,"target":9},"referencedMap":[[356,1],[357,2],[355,1],[358,3],[229,4],[227,5],[228,6],[230,7],[225,8],[223,5],[226,9],[224,10],[203,5],[205,5],[206,5],[208,11],[207,5],[209,12],[263,5],[265,13],[264,14],[261,5],[262,15],[267,5],[145,16],[146,16],[147,17],[93,18],[148,19],[149,20],[150,21],[91,5],[151,22],[152,23],[153,24],[154,25],[155,26],[156,27],[157,27],[158,28],[159,29],[160,30],[161,31],[94,5],[92,5],[162,32],[163,33],[164,34],[198,35],[165,36],[166,5],[167,37],[168,38],[169,39],[170,40],[171,41],[172,42],[173,43],[174,44],[175,45],[176,45],[177,46],[178,5],[179,47],[180,48],[182,49],[181,50],[183,51],[184,52],[185,53],[186,54],[187,55],[188,56],[189,57],[190,58],[191,59],[192,60],[193,61],[194,62],[195,63],[95,5],[96,64],[97,5],[98,5],[141,65],[142,66],[143,5],[144,51],[196,67],[197,68],[87,5],[89,69],[90,70],[266,71],[99,5],[88,5],[220,5],[345,72],[352,73],[350,74],[349,75],[351,74],[347,5],[348,76],[346,75],[325,75],[326,75],[327,75],[328,75],[329,75],[330,75],[331,75],[332,75],[333,74],[334,75],[335,75],[336,75],[322,75],[337,75],[338,75],[339,75],[323,75],[340,75],[341,75],[342,75],[343,75],[344,75],[324,77],[253,5],[255,78],[254,5],[317,79],[249,80],[247,81],[248,82],[236,83],[237,81],[244,84],[235,85],[240,86],[250,5],[241,87],[246,88],[252,89],[251,90],[234,91],[242,92],[243,93],[238,94],[245,80],[239,95],[258,96],[211,97],[212,98],[215,99],[204,100],[214,101],[210,102],[202,5],[216,103],[217,104],[320,105],[318,5],[319,5],[268,106],[321,107],[233,5],[231,108],[294,109],[286,110],[270,5],[288,111],[287,5],[289,112],[271,5],[279,113],[274,5],[273,114],[272,5],[281,5],[292,115],[277,113],[280,5],[285,5],[278,113],[275,114],[276,5],[282,114],[283,114],[291,5],[293,5],[290,5],[284,5],[84,5],[85,5],[15,5],[13,5],[14,5],[19,5],[18,5],[2,5],[20,5],[21,5],[22,5],[23,5],[24,5],[25,5],[26,5],[27,5],[3,5],[28,5],[29,5],[4,5],[30,5],[34,5],[31,5],[32,5],[33,5],[35,5],[36,5],[37,5],[5,5],[38,5],[39,5],[40,5],[41,5],[6,5],[45,5],[42,5],[43,5],[44,5],[46,5],[7,5],[47,5],[52,5],[53,5],[48,5],[49,5],[50,5],[51,5],[8,5],[57,5],[54,5],[55,5],[56,5],[58,5],[9,5],[59,5],[86,5],[60,5],[61,5],[63,5],[62,5],[64,5],[65,5],[10,5],[66,5],[67,5],[68,5],[11,5],[69,5],[70,5],[71,5],[72,5],[73,5],[1,5],[74,5],[75,5],[12,5],[79,5],[77,5],[82,5],[81,5],[76,5],[80,5],[78,5],[83,5],[17,5],[16,5],[117,116],[129,117],[115,118],[130,119],[139,120],[106,121],[107,122],[105,123],[138,124],[133,125],[137,126],[109,127],[126,128],[108,129],[136,130],[103,131],[104,125],[110,132],[111,5],[116,133],[114,132],[101,134],[140,135],[131,136],[120,137],[119,132],[121,138],[124,139],[118,140],[122,141],[134,124],[112,142],[113,143],[125,144],[102,119],[128,145],[127,132],[123,146],[132,5],[100,5],[135,147],[354,148],[353,149],[316,150],[315,151],[200,152],[260,153],[219,154],[201,152],[199,5],[218,155],[259,5],[257,5],[221,156],[256,157],[213,158],[232,159],[222,160],[304,5],[303,5],[298,161],[297,5],[311,162],[312,162],[314,163],[313,162],[310,162],[269,5],[309,164],[306,5],[305,5],[295,5],[296,5],[308,161],[307,5],[299,5],[300,5],[301,5],[302,5]],"semanticDiagnosticsPerFile":[[358,[{"start":2494,"length":17,"messageText":"Object is possibly 'undefined'.","category":1,"code":2532},{"start":2514,"length":18,"messageText":"Object is possibly 'undefined'.","category":1,"code":2532},{"start":3731,"length":16,"messageText":"Property 'GIT_COMMIT_COUNT' comes from an index signature, so it must be accessed with ['GIT_COMMIT_COUNT'].","category":1,"code":4111},{"start":4081,"length":15,"messageText":"Property 'GIT_COMMIT_HASH' comes from an index signature, so it must be accessed with ['GIT_COMMIT_HASH'].","category":1,"code":4111},{"start":4588,"length":2,"messageText":"Property 'CI' comes from an index signature, so it must be accessed with ['CI'].","category":1,"code":4111},{"start":4606,"length":8,"messageText":"Property 'NODE_ENV' comes from an index signature, so it must be accessed with ['NODE_ENV'].","category":1,"code":4111},{"start":5408,"length":16,"messageText":"'normalizeSiteUrl' is declared but its value is never read.","category":1,"code":6133,"reportsUnnecessary":true},{"start":6056,"length":23,"messageText":"Property 'VITE_RATEWISE_BASE_PATH' comes from an index signature, so it must be accessed with ['VITE_RATEWISE_BASE_PATH'].","category":1,"code":4111},{"start":10034,"length":6,"code":2353,"category":1,"messageText":"Object literal may only specify known properties, and 'output' does not exist in type 'Omit<RollupOptions, \"plugins\" | \"output\">'."},{"start":10355,"length":11,"code":2339,"category":1,"messageText":"Property 'displayName' does not exist on type '{ readonly name: \"RateWise 匯率好工具\"; readonly shortName: \"RateWise\"; readonly subtitle: \"匯率好工具\"; readonly author: \"HaoTool\"; readonly email: \"haotool.org@gmail.com\"; readonly socialHandle: \"@azlife_1224\"; ... 7 more ...; readonly imageLicenseContactUrl: \"https://app.haotool.org/ratewise/about/\"; }'."},{"start":15854,"length":5,"messageText":"Parameter 'paths' implicitly has an 'any' type.","category":1,"code":7006},{"start":16429,"length":5,"messageText":"Parameter 'route' implicitly has an 'any' type.","category":1,"code":7006},{"start":16436,"length":9,"messageText":"Parameter 'indexHTML' implicitly has an 'any' type.","category":1,"code":7006},{"start":17513,"length":7,"messageText":"Property 'details' comes from an index signature, so it must be accessed with ['details'].","category":1,"code":4111},{"start":18401,"length":3,"messageText":"Parameter 'dir' implicitly has an 'any' type.","category":1,"code":7006}]]],"affectedFilesPendingEmit":[356,357,355,358],"emitSignatures":[355,356,357,[358,"4b96dd19fd2949d28ce80e913412b0026dc421e5bf6c31d87c7b5eb11b5753b4"]],"latestChangedDtsFile":"./vite.config.d.ts","version":"5.9.3"}
\ No newline at end of file
diff --git a/apps/ratewise/tsconfig.tsbuildinfo b/apps/ratewise/tsconfig.tsbuildinfo
deleted file mode 100644
index 0d5a1a314..000000000
--- a/apps/ratewise/tsconfig.tsbuildinfo
+++ /dev/null
@@ -1 +0,0 @@
-{"root":["./src/app.tsx","./src/main.tsx","./vite-env.d.ts","./env.d.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/apps/ratewise/vite.config.ts b/apps/ratewise/vite.config.ts
index 0df332fab..ae1c09cfe 100644
--- a/apps/ratewise/vite.config.ts
+++ b/apps/ratewise/vite.config.ts
@@ -508,14 +508,14 @@ export default defineConfig(({ mode }) => {
         const [, fromCode, toCode, amountStr] = amountRouteMatch;
         const amount = parseFloat(amountStr);
 
-        // 讀取預生成的匯率數據
+        // 讀取每日流程更新的 build-time fallback snapshot，避免 clean checkout 依賴 ignored cache。
         let rates: Record<string, any> = {};
         try {
-          const ratesPath = resolve(__dirname, 'public/rates.json');
+          const ratesPath = resolve(__dirname, 'src/config/generated/build-time-rates.json');
           const ratesJson = readFileSync(ratesPath, 'utf-8');
           rates = JSON.parse(ratesJson);
         } catch (error) {
-          console.warn(`⚠️ 無法讀取 rates.json：${error}`);
+          console.warn(`⚠️ 無法讀取 build-time-rates.json：${error}`);
           return indexHTML;
         }
 
diff --git a/apps/split-meow/index.html b/apps/split-meow/index.html
index adbab1861..704ef6b5d 100644
--- a/apps/split-meow/index.html
+++ b/apps/split-meow/index.html
@@ -2,7 +2,10 @@
 <html lang="zh-Hant">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-visual"
+    />
     <title>Split Meow</title>
     <meta name="theme-color" content="#fbf9f7" />
     <meta name="description" content="可愛又極簡的分帳工具，支援離線使用與安裝為 PWA。" />
diff --git a/apps/split-meow/src/App.tsx b/apps/split-meow/src/App.tsx
index 80582cdd5..bec73eef3 100644
--- a/apps/split-meow/src/App.tsx
+++ b/apps/split-meow/src/App.tsx
@@ -11,6 +11,7 @@ import { PayerSelector } from './components/PayerSelector';
 import { CatCompanion } from './components/CatCompanion';
 import { CatPlayLayer, type Particle } from './components/CatPlayLayer';
 import { makePawParticle, makeCelebrateParticles } from './lib/catPlay';
+import { useCurrencyAutoDetect } from './hooks/useCurrencyAutoDetect';
 
 function ShareButton() {
   const { t } = useTranslation();
@@ -61,6 +62,7 @@ export default function App() {
   const { activeTab, catPlayMode } = useStore();
   const { t } = useTranslation();
   const [particles, setParticles] = useState<Particle[]>([]);
+  useCurrencyAutoDetect();
   const prevTabRef = useRef(activeTab);
 
   // 儲存費用後 activeTab 切換到 history → 觸發慶祝動畫
diff --git a/apps/split-meow/src/components/HistoryTab.tsx b/apps/split-meow/src/components/HistoryTab.tsx
index d7c37b2a6..438605538 100644
--- a/apps/split-meow/src/components/HistoryTab.tsx
+++ b/apps/split-meow/src/components/HistoryTab.tsx
@@ -1,5 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useStore, type Member, type ExpenseRecord } from '../store/useStore';
+import { formatAmount, getCurrencySymbol, formatKrwAsTwd } from '../config/currencies';
+import type { CurrencyCode } from '../config/currencies';
 import { format } from 'date-fns';
 import { useRef, useState } from 'react';
 import { cn } from '../lib/utils';
@@ -121,6 +123,7 @@ export function HistoryTab() {
     updateExpense,
     settledPayments,
     toggleSettlement,
+    currency,
   } = useStore();
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [expandedMemberId, setExpandedMemberId] = useState<string | null>(null);
@@ -175,6 +178,12 @@ export function HistoryTab() {
     });
   const totalSpent = tripExpenses.reduce((sum, e) => sum + e.totalAmount, 0);
 
+  // trip 主導幣別：採用該行程最舊一筆記錄的幣別（trip 建立時的幣別），
+  // 舊資料無幣別時 fallback 至當前全域幣別。彙總與結算統一以此幣別顯示。
+  const tripCurrency: CurrencyCode = tripExpenses[tripExpenses.length - 1]?.currency ?? currency;
+  // 取得單筆記錄的顯示幣別（優先使用記帳當下快照，舊資料 fallback 主導幣別）。
+  const expenseCurrency = (exp: ExpenseRecord): CurrencyCode => exp.currency ?? tripCurrency;
+
   // 計算各人餘額
   const balances: Record<string, number> = {};
   tripExpenses.forEach((exp) => {
@@ -213,7 +222,7 @@ export function HistoryTab() {
     const lines: string[] = [
       `🐾 喵喵分帳 — ${tripName}`,
       `${'─'.repeat(24)}`,
-      `💰 總花費：NT$ ${Math.round(totalSpent).toLocaleString('zh-TW')}`,
+      `💰 總花費：${formatAmount(totalSpent, tripCurrency)}`,
       '',
     ];
     if (tripExpenses.length > 0) {
@@ -225,7 +234,7 @@ export function HistoryTab() {
           exp.note ||
           (exp.type === 'split_evenly' ? t('history.split_evenly') : t('history.itemized'));
         lines.push(
-          `${emoji} ${label}  NT$ ${Math.round(exp.totalAmount).toLocaleString('zh-TW')}（${payer} 付）`,
+          `${emoji} ${label}  ${formatAmount(exp.totalAmount, expenseCurrency(exp))}（${payer} 付）`,
         );
       });
       lines.push('');
@@ -235,7 +244,7 @@ export function HistoryTab() {
       settlements.forEach((s) => {
         const from = members.find((m) => m.id === s.from)?.name ?? s.from;
         const to = members.find((m) => m.id === s.to)?.name ?? s.to;
-        lines.push(`${from} → ${to}  NT$ ${Math.round(s.amount).toLocaleString('zh-TW')}`);
+        lines.push(`${from} → ${to}  ${formatAmount(s.amount, tripCurrency)}`);
       });
       lines.push('');
     }
@@ -273,7 +282,7 @@ export function HistoryTab() {
               {t('history.total_spent')}
             </span>
             <h2 className="text-4xl font-medium text-on-surface tracking-tight">
-              NT$ {Math.round(totalSpent).toLocaleString('zh-TW')}
+              {formatAmount(totalSpent, tripCurrency)}
             </h2>
           </div>
           <div className="mt-6 flex items-center justify-between gap-2">
@@ -376,7 +385,7 @@ export function HistoryTab() {
                           check_circle
                         </span>
                       ) : (
-                        `NT$ ${Math.round(s.amount).toLocaleString('zh-TW')}`
+                        formatAmount(s.amount, tripCurrency)
                       )}
                     </span>
                   </div>
@@ -450,7 +459,8 @@ export function HistoryTab() {
                               : 'bg-error-container text-on-error-container',
                           )}
                         >
-                          {isOwed ? '+' : '-'}NT$ {Math.round(Math.abs(amount)).toLocaleString()}
+                          {isOwed ? '+' : '-'}
+                          {formatAmount(Math.abs(amount), tripCurrency)}
                         </span>
                         <span
                           className="material-symbols-outlined text-on-surface-variant text-lg transition-transform duration-300"
@@ -512,7 +522,7 @@ export function HistoryTab() {
                                     {t('history.balance_paid')}
                                   </span>
                                   <span className="font-semibold text-secondary">
-                                    +NT$ {Math.round(exp.totalAmount).toLocaleString()}
+                                    +{formatAmount(exp.totalAmount, expenseCurrency(exp))}
                                   </span>
                                 </div>
                               )}
@@ -527,7 +537,7 @@ export function HistoryTab() {
                                     {t('history.balance_share')}
                                   </span>
                                   <span className="font-semibold text-error">
-                                    -NT$ {Math.round(share).toLocaleString()}
+                                    -{formatAmount(share, expenseCurrency(exp))}
                                   </span>
                                 </div>
                               )}
@@ -547,7 +557,8 @@ export function HistoryTab() {
                                         : 'text-on-surface-variant',
                                   )}
                                 >
-                                  {net > 0.01 ? '+' : ''}NT$ {Math.round(net).toLocaleString()}
+                                  {net > 0.01 ? '+' : net < -0.01 ? '-' : ''}
+                                  {formatAmount(Math.abs(net), expenseCurrency(exp))}
                                 </span>
                               </div>
                             </div>
@@ -565,7 +576,8 @@ export function HistoryTab() {
                               isOwed ? 'text-secondary' : 'text-error',
                             )}
                           >
-                            {isOwed ? '+' : ''}NT$ {Math.round(amount).toLocaleString()}
+                            {isOwed ? '+' : '-'}
+                            {formatAmount(Math.abs(amount), tripCurrency)}
                           </span>
                         </div>
                       </div>
@@ -705,8 +717,14 @@ export function HistoryTab() {
                       <div className="text-right flex items-center gap-2 sm:gap-3 shrink-0">
                         <div className="shrink-0">
                           <p className="font-bold text-on-surface whitespace-nowrap text-base sm:text-lg">
-                            NT$ {Math.round(exp.totalAmount).toLocaleString('zh-TW')}
+                            {formatAmount(exp.totalAmount, expenseCurrency(exp))}
                           </p>
+                          {expenseCurrency(exp) === 'KRW' &&
+                            formatKrwAsTwd(exp.totalAmount, exp.exchangeRateKrwPerTwd) && (
+                              <p className="text-[10px] font-medium text-on-surface-variant/70 whitespace-nowrap">
+                                ≈ {formatKrwAsTwd(exp.totalAmount, exp.exchangeRateKrwPerTwd)}
+                              </p>
+                            )}
                           <p className="text-[10px] font-medium text-secondary uppercase tracking-wider">
                             {t('history.participants', { count: exp.participantIds.length })}
                           </p>
@@ -827,7 +845,7 @@ export function HistoryTab() {
                                   <span className="font-medium text-on-surface">{m.name}</span>
                                 </div>
                                 <span className="font-semibold text-on-surface">
-                                  NT$ {Math.round(amt).toLocaleString('zh-TW')}
+                                  {formatAmount(amt, expenseCurrency(exp))}
                                 </span>
                               </div>
                             );
@@ -898,6 +916,7 @@ interface EditExpenseSheetProps {
 
 function EditExpenseSheet({ expense, members, onSave, onClose }: EditExpenseSheetProps) {
   const { t } = useTranslation();
+  const { currency } = useStore();
   const isEvenly = expense.type === 'split_evenly';
 
   const [totalInput, setTotalInput] = useState(
@@ -962,7 +981,9 @@ function EditExpenseSheet({ expense, members, onSave, onClose }: EditExpenseShee
 
         {isEvenly ? (
           <div className="flex items-center gap-3 bg-surface-container rounded-2xl px-4 py-3">
-            <span className="text-on-surface-variant text-sm font-medium shrink-0">NT$</span>
+            <span className="text-on-surface-variant text-sm font-medium shrink-0">
+              {getCurrencySymbol(currency)}
+            </span>
             <input
               type="number"
               inputMode="decimal"
@@ -986,7 +1007,9 @@ function EditExpenseSheet({ expense, members, onSave, onClose }: EditExpenseShee
                   <span className="flex-1 text-sm font-medium text-on-surface truncate">
                     {m.name}
                   </span>
-                  <span className="text-on-surface-variant text-sm shrink-0">NT$</span>
+                  <span className="text-on-surface-variant text-sm shrink-0">
+                    {getCurrencySymbol(currency)}
+                  </span>
                   <input
                     type="number"
                     inputMode="decimal"
diff --git a/apps/split-meow/src/components/HomeTab.tsx b/apps/split-meow/src/components/HomeTab.tsx
index 4e4150b45..c692ecac5 100644
--- a/apps/split-meow/src/components/HomeTab.tsx
+++ b/apps/split-meow/src/components/HomeTab.tsx
@@ -3,75 +3,10 @@ import { useStore } from '../store/useStore';
 import { evaluateExpression } from '../lib/evaluateExpression';
 import { Calculator } from './Calculator';
 import { MemberList } from './MemberList';
-import { BottomSheet } from './BottomSheet';
 import { MemberAvatar } from './MemberAvatar';
 import { cn } from '../lib/utils';
 import { useEffect, useRef, useState } from 'react';
-
-/**
- * BottomSheet の peek/expanded 高さを動的計算する。
- *
- * 考慮事項：
- * - iOS PWA では safe-area-inset-bottom（ホームバー）が追加される
- * - BottomNav の実際の高さは CSS 変数 --nav-h で動的に取得
- * - BottomNav ラッパーの bottom は 0.5rem(8px)
- * - navZone = 16 + navH + safeArea → BottomSheet の bottom と一致させる
- * - visualViewport.height を使うと iOS でキーボード表示時の高さも正確
- */
-function useResponsiveSheetHeight() {
-  const [vh, setVh] = useState(() => window.visualViewport?.height ?? window.innerHeight);
-  const [navH, setNavH] = useState(62);
-  const [sab, setSab] = useState(0);
-
-  useEffect(() => {
-    // safe-area-inset-bottom を CSS 変数経由で JS から読む
-    // :root { --sab: env(safe-area-inset-bottom, 0px); } が必要
-    const readSab = () => {
-      const val = getComputedStyle(document.documentElement).getPropertyValue('--sab').trim();
-      setSab(parseInt(val) || 0);
-    };
-
-    // --nav-h は BottomNav の ResizeObserver が inline style で設定する
-    const readNavH = () => {
-      const val = document.documentElement.style.getPropertyValue('--nav-h').trim();
-      const h = parseInt(val);
-      if (h > 0) setNavH(h);
-    };
-
-    const update = () => {
-      setVh(window.visualViewport?.height ?? window.innerHeight);
-      readNavH();
-    };
-
-    readSab();
-    readNavH();
-    update();
-
-    window.addEventListener('resize', update);
-    window.visualViewport?.addEventListener('resize', update);
-    return () => {
-      window.removeEventListener('resize', update);
-      window.visualViewport?.removeEventListener('resize', update);
-    };
-  }, []);
-
-  // BottomNav が占める底からの高さ = navWrapper.bottom(0.5rem=8px) + navHeight + safeArea
-  const navZone = 8 + navH + sab;
-
-  /**
-   * CALC_FULL_H: 計算機全行表示に必要な最低高さ
-   * 内訳: ドラッグハンドル(20) + メモ欄(48) + モード切替(44) + ヒント(28)
-   *      + 計算機5行 × (h-12=48px + gap-1.5=6px) - 最後のgap(6) + pb-2(8) = 416
-   */
-  const CALC_FULL_H = 416;
-
-  // peekHeight: 計算機コンテンツと完全一致させ余白ゼロにする
-  // 小画面では viewport に合わせてクリップ、通常は CALC_FULL_H ぴったり
-  const peekHeight = Math.min(CALC_FULL_H, vh - navZone - 80);
-  // expandedHeight: ヘッダー下 80px のバッファを確保して最大限展開
-  const expandedHeight = Math.min(560, vh - navZone - 80);
-  return { peekHeight, expandedHeight };
-}
+import { formatAmount } from '../config/currencies';
 
 interface HomeTabProps {
   onPawParticle?: (x: number, y: number) => void;
@@ -91,6 +26,8 @@ export function HomeTab({ onPawParticle }: HomeTabProps = {}) {
     setExpenseNote,
     expenseCategory,
     setExpenseCategory,
+    currency,
+    krwPerTwd,
   } = useStore();
 
   const CATEGORIES = [
@@ -104,9 +41,33 @@ export function HomeTab({ onPawParticle }: HomeTabProps = {}) {
 
   const [showCategoryPicker, setShowCategoryPicker] = useState(false);
   const noteInputRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [panelH, setPanelH] = useState(400);
+  const [keyboardH, setKeyboardH] = useState(0);
+
+  // Track panel height → drives content paddingBottom
+  useEffect(() => {
+    const el = panelRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) setPanelH(entry.contentRect.height);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // Detect system keyboard via visualViewport (iOS PWA / Android Chrome)
+  useEffect(() => {
+    const update = () => {
+      const vvh = window.visualViewport?.height ?? window.innerHeight;
+      setKeyboardH(Math.max(0, window.innerHeight - vvh));
+    };
+    update();
+    window.visualViewport?.addEventListener('resize', update);
+    return () => window.visualViewport?.removeEventListener('resize', update);
+  }, []);
 
   const activeMembers = members.filter((m) => m.isActive);
-  const { peekHeight, expandedHeight } = useResponsiveSheetHeight();
 
   // 個別輸入模式必須始終把焦點維持在有效成員上，避免鍵盤輸入寫入已停用對象。
   useEffect(() => {
@@ -131,10 +92,16 @@ export function HomeTab({ onPawParticle }: HomeTabProps = {}) {
 
   const splitAmount = activeMembers.length > 0 ? totalAmount / activeMembers.length : 0;
 
+  // 系統鍵盤開啟時：面板移至鍵盤上方；否則：固定在 BottomNav 上方
+  const isKeyboardOpen = keyboardH > 0;
+  const panelBottom = isKeyboardOpen
+    ? `${keyboardH}px`
+    : 'calc(0.5rem + var(--nav-h, 62px) + env(safe-area-inset-bottom, 0px))';
+
   return (
     <div
       className="animate-in fade-in slide-in-from-bottom-4 duration-500"
-      style={{ paddingBottom: expandedHeight + 24 }}
+      style={{ paddingBottom: panelH + 80 }}
     >
       {/* Amount Display Card */}
       <div className="relative overflow-hidden rounded-[2rem] bg-surface-container-lowest shadow-ambient px-6 py-5 mb-4 text-center">
@@ -164,13 +131,21 @@ export function HomeTab({ onPawParticle }: HomeTabProps = {}) {
               {splitMode === 'split_evenly' ? t('home.totalAmount') : t('home.totalItemized')}
             </span>
             <h1 className="text-4xl sm:text-5xl font-headline font-semibold tracking-tight text-on-surface leading-none break-all">
-              NT$ {Math.round(totalAmount).toLocaleString()}
+              {formatAmount(totalAmount, currency)}
             </h1>
+            {/* 換算提示：另一幣別的近似金額 */}
+            {krwPerTwd && totalAmount > 0 && (
+              <p className="text-xs text-on-surface-variant/50 mt-1">
+                {currency === 'KRW'
+                  ? `≈ NT$ ${Math.round(totalAmount / krwPerTwd).toLocaleString('zh-TW')}`
+                  : `≈ ₩${Math.round(totalAmount * krwPerTwd).toLocaleString('ko-KR')}`}
+              </p>
+            )}
             {splitMode === 'split_evenly' && activeMembers.length > 0 && (
               <p className="text-sm text-on-surface-variant mt-2">
                 {t('home.perPerson')}{' '}
                 <span className="font-semibold text-secondary">
-                  NT$ {Math.round(splitAmount).toLocaleString()}
+                  {formatAmount(splitAmount, currency)}
                 </span>{' '}
                 × {activeMembers.length} {t('home.people')}
               </p>
@@ -206,7 +181,7 @@ export function HomeTab({ onPawParticle }: HomeTabProps = {}) {
               </div>
               <div className="text-right">
                 <span className="text-xl font-medium">
-                  NT$ {Math.round(evaluateExpression(itemizedValues[m.id] ?? '0')).toLocaleString()}
+                  {formatAmount(evaluateExpression(itemizedValues[m.id] ?? '0'), currency)}
                 </span>
                 {itemizedValues[m.id] && focusedMemberId === m.id && (
                   <p className="text-xs opacity-70 font-mono mt-1">{itemizedValues[m.id]}</p>
@@ -217,13 +192,15 @@ export function HomeTab({ onPawParticle }: HomeTabProps = {}) {
         </div>
       )}
 
-      {/* Bottom Sheet: 計算機 + 模式切換；bottom-[72px] 確保浮動 BottomNav（~68px）不遮蓋 */}
-      <BottomSheet
-        isOpen={true}
-        onClose={() => undefined}
-        peekHeight={peekHeight}
-        expandedHeight={expandedHeight}
+      {/* Fixed Bottom Panel：取代 BottomSheet，避免系統鍵盤遮蓋計算機 */}
+      <div
+        ref={panelRef}
+        className="fixed inset-x-0 z-40 max-w-lg mx-auto rounded-t-[2rem] bg-surface shadow-[0_-4px_24px_-4px_rgba(0,0,0,0.10)] pt-2"
+        style={{ bottom: panelBottom, transition: 'bottom 0.15s ease-out' }}
       >
+        {/* 裝飾性把手（不可拖動） */}
+        <div className="w-10 h-1 rounded-full bg-on-surface/10 mx-auto mb-2" />
+
         {/* Note Input */}
         <div className="mx-4 mt-1 mb-2">
           <div className="flex items-center gap-2 bg-surface-container rounded-full px-4 py-2">
@@ -330,19 +307,24 @@ export function HomeTab({ onPawParticle }: HomeTabProps = {}) {
           </button>
         </div>
 
-        <DockInfo
-          splitMode={splitMode}
-          activeMembersCount={activeMembers.length}
-          totalAmount={totalAmount}
-          focusedMemberId={focusedMemberId}
-          focusedMemberAvatarUrl={members.find((m) => m.id === focusedMemberId)?.avatarUrl}
-          focusedMemberName={members.find((m) => m.id === focusedMemberId)?.name}
-        />
+        {/* 系統鍵盤開啟時只顯示備註列，隱藏計算機避免面板超出可視區域 */}
+        {!isKeyboardOpen && (
+          <>
+            <DockInfo
+              splitMode={splitMode}
+              activeMembersCount={activeMembers.length}
+              totalAmount={totalAmount}
+              focusedMemberId={focusedMemberId}
+              focusedMemberAvatarUrl={members.find((m) => m.id === focusedMemberId)?.avatarUrl}
+              focusedMemberName={members.find((m) => m.id === focusedMemberId)?.name}
+            />
 
-        <div className="px-1 pb-2 touch-manipulation">
-          <Calculator onPawParticle={onPawParticle} />
-        </div>
-      </BottomSheet>
+            <div className="px-1 pb-2 touch-manipulation">
+              <Calculator onPawParticle={onPawParticle} />
+            </div>
+          </>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/split-meow/src/components/SettingsTab.tsx b/apps/split-meow/src/components/SettingsTab.tsx
index 8ac22a3da..910999d50 100644
--- a/apps/split-meow/src/components/SettingsTab.tsx
+++ b/apps/split-meow/src/components/SettingsTab.tsx
@@ -5,6 +5,7 @@ import { MemberAvatar } from './MemberAvatar';
 import i18n, { type SupportedLanguage } from '../i18n';
 import { getDisplayVersion } from '../config/version';
 import { cn } from '../lib/utils';
+import { CURRENCIES, type CurrencyCode } from '../config/currencies';
 
 const LANGUAGES: { id: SupportedLanguage; flag: string; name: string }[] = [
   { id: 'zh-TW', flag: '🇹🇼', name: '繁中' },
@@ -23,6 +24,10 @@ export function SettingsTab() {
     addMember,
     catPlayMode,
     toggleCatPlayMode,
+    currency,
+    currencyManuallySet,
+    setCurrency,
+    rateUpdatedAt,
   } = useStore();
   const me = members.find((m) => m.id === 'me') ?? members[0] ?? null;
   const [isEditing, setIsEditing] = useState(false);
@@ -188,15 +193,48 @@ export function SettingsTab() {
               <div className="w-4 h-4 bg-on-primary rounded-full absolute right-1"></div>
             </div>
           </div>
-          <div className="flex items-center justify-between p-5 bg-surface-container-low rounded-[2rem] hover:bg-surface-container transition-colors">
-            <div className="flex items-center gap-4">
-              <span className="material-symbols-outlined text-primary">payments</span>
-              <span className="font-medium">{t('settings.default_currency')}</span>
-            </div>
-            <div className="flex items-center gap-1 text-on-surface-variant text-sm">
-              <span>TWD (NT$)</span>
-              <span className="material-symbols-outlined text-sm">chevron_right</span>
+          {/* Currency Selector */}
+          <div className="p-5 bg-surface-container-low rounded-[2rem] space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <span className="material-symbols-outlined text-primary">payments</span>
+                <div>
+                  <span className="font-medium">{t('settings.default_currency')}</span>
+                  {!currencyManuallySet && (
+                    <p className="text-xs text-tertiary mt-0.5 flex items-center gap-1">
+                      <span className="material-symbols-outlined text-[12px]">my_location</span>
+                      {t('settings.auto_detected')}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="flex gap-1 bg-surface-container rounded-full p-1">
+                {(['TWD', 'KRW'] as CurrencyCode[]).map((code) => {
+                  const info = CURRENCIES[code];
+                  const isActive = currency === code;
+                  return (
+                    <button
+                      key={code}
+                      onClick={() => setCurrency(code, true)}
+                      className={cn(
+                        'flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium transition-all cursor-pointer',
+                        isActive
+                          ? 'bg-primary-container text-on-primary-container shadow-ambient'
+                          : 'text-on-surface-variant hover:bg-surface-container-high',
+                      )}
+                    >
+                      <span>{info.flag}</span>
+                      <span>{info.symbol}</span>
+                    </button>
+                  );
+                })}
+              </div>
             </div>
+            {rateUpdatedAt && (
+              <p className="text-[11px] text-on-surface-variant/50 pl-10">
+                {t('settings.rate_updated', { time: rateUpdatedAt })}
+              </p>
+            )}
           </div>
           <button
             onClick={toggleCatPlayMode}
diff --git a/apps/split-meow/src/config/__tests__/currencies.test.ts b/apps/split-meow/src/config/__tests__/currencies.test.ts
new file mode 100644
index 000000000..8bb0c0a05
--- /dev/null
+++ b/apps/split-meow/src/config/__tests__/currencies.test.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { formatAmount, formatKrwAsTwd } from '../currencies';
+
+describe('formatAmount', () => {
+  it('KRW 使用 ₩ 符號並四捨五入', () => {
+    expect(formatAmount(30000.4, 'KRW')).toBe('₩30,000');
+  });
+
+  it('TWD 使用 NT$ 符號', () => {
+    expect(formatAmount(1234.6, 'TWD')).toBe('NT$ 1,235');
+  });
+});
+
+describe('formatKrwAsTwd', () => {
+  it('依匯率將 KRW 換算為 TWD 顯示字串', () => {
+    // 30000 KRW / 43.5 (KRW per TWD) ≈ 689.66 → NT$ 690
+    expect(formatKrwAsTwd(30000, 43.5)).toBe('NT$ 690');
+  });
+
+  it('匯率為 null 時回傳 null（無法換算）', () => {
+    expect(formatKrwAsTwd(30000, null)).toBeNull();
+  });
+
+  it('匯率為 0 或負值時回傳 null（避免除以零）', () => {
+    expect(formatKrwAsTwd(30000, 0)).toBeNull();
+    expect(formatKrwAsTwd(30000, -1)).toBeNull();
+  });
+
+  it('匯率為 undefined（舊資料）時回傳 null', () => {
+    expect(formatKrwAsTwd(30000, undefined)).toBeNull();
+  });
+});
diff --git a/apps/split-meow/src/config/currencies.ts b/apps/split-meow/src/config/currencies.ts
new file mode 100644
index 000000000..da2fc146e
--- /dev/null
+++ b/apps/split-meow/src/config/currencies.ts
@@ -0,0 +1,47 @@
+export type CurrencyCode = 'TWD' | 'KRW';
+
+export interface CurrencyInfo {
+  code: CurrencyCode;
+  symbol: string;
+  flag: string;
+  locale: string;
+}
+
+export const CURRENCIES: Record<CurrencyCode, CurrencyInfo> = {
+  TWD: { code: 'TWD', symbol: 'NT$', flag: '🇹🇼', locale: 'zh-TW' },
+  KRW: { code: 'KRW', symbol: '₩', flag: '🇰🇷', locale: 'ko-KR' },
+};
+
+const TIMEZONE_TO_CURRENCY: Record<string, CurrencyCode> = {
+  'Asia/Seoul': 'KRW',
+  'Asia/Busan': 'KRW',
+  'Asia/Taipei': 'TWD',
+};
+
+export function detectCurrencyFromTimezone(): CurrencyCode | null {
+  try {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return TIMEZONE_TO_CURRENCY[tz] ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function formatAmount(amount: number, currency: CurrencyCode): string {
+  const rounded = Math.round(amount);
+  if (currency === 'KRW') return `₩${rounded.toLocaleString('ko-KR')}`;
+  return `NT$ ${rounded.toLocaleString('zh-TW')}`;
+}
+
+export function getCurrencySymbol(currency: CurrencyCode): string {
+  return CURRENCIES[currency].symbol;
+}
+
+/**
+ * 將 KRW 金額依匯率快照換算為 TWD 顯示字串（用於 KRW 記帳時的副標）。
+ * rate 為 1 TWD = rate KRW（賣出價）；rate 無效時回傳 null 表示無法換算。
+ */
+export function formatKrwAsTwd(krwAmount: number, rate: number | null | undefined): string | null {
+  if (typeof rate !== 'number' || !Number.isFinite(rate) || rate <= 0) return null;
+  return formatAmount(krwAmount / rate, 'TWD');
+}
diff --git a/apps/split-meow/src/hooks/useCurrencyAutoDetect.ts b/apps/split-meow/src/hooks/useCurrencyAutoDetect.ts
new file mode 100644
index 000000000..c5e96c643
--- /dev/null
+++ b/apps/split-meow/src/hooks/useCurrencyAutoDetect.ts
@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { useStore } from '../store/useStore';
+import { detectCurrencyFromTimezone } from '../config/currencies';
+import { fetchMoneyboxRate } from '../lib/exchangeRate';
+
+/**
+ * App 啟動時執行一次：
+ * 1. 始終嘗試從 moneybox CDN 取得最新匯率（TWD 賣出價）
+ * 2. 若使用者未手動設定幣別，依時區自動切換
+ *    - Asia/Seoul → KRW
+ *    - Asia/Taipei → TWD
+ *    - 其他時區 → 保持預設（TWD）
+ */
+export function useCurrencyAutoDetect() {
+  useEffect(() => {
+    const { currencyManuallySet, setCurrency, setExchangeRate } = useStore.getState();
+
+    // 無論如何都更新匯率（供換算提示使用）
+    fetchMoneyboxRate()
+      .then(({ krwPerTwd, updatedAt }) => {
+        setExchangeRate(krwPerTwd, updatedAt);
+      })
+      .catch(() => {
+        // 靜默失敗：離線時沿用 persist 快取值
+      });
+
+    // 使用者手動選過幣別 → 尊重其選擇，不覆蓋
+    if (currencyManuallySet) return;
+
+    const detected = detectCurrencyFromTimezone();
+    if (detected) setCurrency(detected, false);
+  }, []); // 僅 mount 時執行一次
+}
diff --git a/apps/split-meow/src/i18n.ts b/apps/split-meow/src/i18n.ts
index 02de315bd..3fdaf5bf8 100644
--- a/apps/split-meow/src/i18n.ts
+++ b/apps/split-meow/src/i18n.ts
@@ -69,11 +69,13 @@ const resources = {
         delete_member: '刪除成員',
         app_settings: '應用程式設定',
         push_notifications: '推播通知',
-        default_currency: '預設幣別',
+        default_currency: '幣別',
         cat_play_mode: '貓咪遊玩模式',
         language: '語言',
         default_name: '使用者',
         version: '版本',
+        rate_updated: '換錢所匯率 · 更新 {{time}}',
+        auto_detected: '自動偵測',
       },
       trip: {
         placeholder: '選擇行程',
@@ -157,11 +159,13 @@ const resources = {
         delete_member: 'Remove member',
         app_settings: 'App Settings',
         push_notifications: 'Push Notifications',
-        default_currency: 'Default Currency',
+        default_currency: 'Currency',
         cat_play_mode: 'Cat Play Mode',
         language: 'Language',
         default_name: 'User',
         version: 'Version',
+        rate_updated: 'MoneyBox rate · Updated {{time}}',
+        auto_detected: 'Auto-detected',
       },
       trip: {
         placeholder: 'Select Trip',
@@ -245,11 +249,13 @@ const resources = {
         delete_member: '멤버 삭제',
         app_settings: '앱 설정',
         push_notifications: '푸시 알림',
-        default_currency: '기본 통화',
+        default_currency: '통화',
         cat_play_mode: '고양이 놀이 모드',
         language: '언어',
         default_name: '사용자',
         version: '버전',
+        rate_updated: '환전소 환율 · 업데이트 {{time}}',
+        auto_detected: '자동 감지',
       },
       trip: {
         placeholder: '여행 선택',
@@ -333,11 +339,13 @@ const resources = {
         delete_member: 'メンバー削除',
         app_settings: 'アプリ設定',
         push_notifications: 'プッシュ通知',
-        default_currency: 'デフォルト通貨',
+        default_currency: '通貨',
         cat_play_mode: 'にゃんこ遊びモード',
         language: '言語',
         default_name: 'ユーザー',
         version: 'バージョン',
+        rate_updated: '両替所レート · 更新 {{time}}',
+        auto_detected: '自動検出',
       },
       trip: {
         placeholder: '旅行を選択',
diff --git a/apps/split-meow/src/lib/exchangeRate.ts b/apps/split-meow/src/lib/exchangeRate.ts
new file mode 100644
index 000000000..5dcbb91fd
--- /dev/null
+++ b/apps/split-meow/src/lib/exchangeRate.ts
@@ -0,0 +1,22 @@
+const RATE_URL =
+  'https://cdn.jsdelivr.net/gh/haotool/app@data/public/rates/providers/moneybox/latest.json';
+
+export interface MoneyboxRate {
+  /** 賣出價：換匯所賣出 1 TWD 收取的 KRW 金額 */
+  krwPerTwd: number;
+  updatedAt: string;
+}
+
+interface MoneyboxResponse {
+  updateTime: string;
+  rates: Record<string, { buy: number; sell: number; base: number }>;
+}
+
+export async function fetchMoneyboxRate(): Promise<MoneyboxRate> {
+  const res = await fetch(RATE_URL);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const data = (await res.json()) as MoneyboxResponse;
+  const twd = data.rates['TWD'];
+  if (!twd?.sell) throw new Error('TWD sell rate missing');
+  return { krwPerTwd: twd.sell, updatedAt: data.updateTime };
+}
diff --git a/apps/split-meow/src/store/__tests__/useStore.test.ts b/apps/split-meow/src/store/__tests__/useStore.test.ts
index c41ebe0dc..40004e5d7 100644
--- a/apps/split-meow/src/store/__tests__/useStore.test.ts
+++ b/apps/split-meow/src/store/__tests__/useStore.test.ts
@@ -207,6 +207,23 @@ describe('useStore', () => {
       expect(useStore.getState().activeTab).toBe('history');
     });
 
+    it('保存記帳當下的幣別與匯率快照（KRW）', () => {
+      useStore.setState({ calculatorValue: '30000', currency: 'KRW', krwPerTwd: 43.5 });
+      act(() => useStore.getState().saveExpense());
+      const exp = useStore.getState().expenses[0]!;
+      expect(exp.currency).toBe('KRW');
+      expect(exp.exchangeRateKrwPerTwd).toBe(43.5);
+    });
+
+    it('幣別快照不受日後切換幣別影響', () => {
+      useStore.setState({ calculatorValue: '1000', currency: 'TWD', krwPerTwd: null });
+      act(() => useStore.getState().saveExpense());
+      // 記帳後切換全域幣別到 KRW
+      act(() => useStore.getState().setCurrency('KRW'));
+      const exp = useStore.getState().expenses[0]!;
+      expect(exp.currency).toBe('TWD');
+    });
+
     it('儲存後清空計算機', () => {
       useStore.setState({ calculatorValue: '100', expenseNote: '午餐' });
       act(() => useStore.getState().saveExpense());
diff --git a/apps/split-meow/src/store/useStore.ts b/apps/split-meow/src/store/useStore.ts
index 640f4e016..547dd0204 100644
--- a/apps/split-meow/src/store/useStore.ts
+++ b/apps/split-meow/src/store/useStore.ts
@@ -3,6 +3,7 @@ import { persist } from 'zustand/middleware';
 import { evaluateExpression } from '../lib/evaluateExpression';
 import { randomAvatarSeed } from '../lib/avatar';
 import i18n from '../i18n';
+import type { CurrencyCode } from '../config/currencies';
 
 export type SplitMode = 'split_evenly' | 'itemized';
 export type ExpenseCategory =
@@ -31,6 +32,10 @@ export interface ExpenseRecord {
   note: string;
   category?: ExpenseCategory;
   createdAt: number;
+  /** 記帳當下的幣別快照；舊資料缺此欄位時視為 TWD（記帳幣別於 KRW 上線前僅有 TWD）。 */
+  currency?: CurrencyCode;
+  /** 記帳當下的匯率快照（1 TWD = X KRW 賣出價）；供 KRW 金額回溯換算 TWD，舊資料為 null。 */
+  exchangeRateKrwPerTwd?: number | null;
 }
 
 export interface Trip {
@@ -83,6 +88,14 @@ interface AppState {
   toggleSettlement: (key: string) => void;
   catPlayMode: boolean;
   toggleCatPlayMode: () => void;
+
+  // 幣別
+  currency: CurrencyCode;
+  currencyManuallySet: boolean;
+  krwPerTwd: number | null;
+  rateUpdatedAt: string | null;
+  setCurrency: (code: CurrencyCode, manual?: boolean) => void;
+  setExchangeRate: (krwPerTwd: number, updatedAt: string) => void;
 }
 
 // 初始成員使用固定 seed，確保每次新安裝頭像一致（boring-avatars deterministic）
@@ -141,6 +154,10 @@ export const useStore = create<AppState>()(
       expenseCategory: null,
       settledPayments: [],
       catPlayMode: false,
+      currency: 'TWD',
+      currencyManuallySet: false,
+      krwPerTwd: null,
+      rateUpdatedAt: null,
 
       addTrip: (name) =>
         set((state) => {
@@ -253,6 +270,9 @@ export const useStore = create<AppState>()(
             note: state.expenseNote.trim(),
             ...(state.expenseCategory ? { category: state.expenseCategory } : {}),
             createdAt: Date.now(),
+            // 記帳當下的幣別與匯率快照，確保歷史金額不受日後切換幣別影響並可回溯換算
+            currency: state.currency,
+            exchangeRateKrwPerTwd: state.krwPerTwd,
           };
 
           return {
@@ -290,6 +310,10 @@ export const useStore = create<AppState>()(
         })),
 
       toggleCatPlayMode: () => set((state) => ({ catPlayMode: !state.catPlayMode })),
+
+      setCurrency: (code, manual = true) => set({ currency: code, currencyManuallySet: manual }),
+
+      setExchangeRate: (krwPerTwd, updatedAt) => set({ krwPerTwd, rateUpdatedAt: updatedAt }),
     }),
     {
       name: 'split-meow-storage',
diff --git a/docs/design/NOTIFICATION_DESIGN_SYSTEM.md b/docs/design/NOTIFICATION_DESIGN_SYSTEM.md
index dbc310687..f75d0ebc4 100644
--- a/docs/design/NOTIFICATION_DESIGN_SYSTEM.md
+++ b/docs/design/NOTIFICATION_DESIGN_SYSTEM.md
@@ -1,15 +1,17 @@
-# 通知視窗設計系統 - 品牌對齊風格 (Brand Aligned)
+# 通知視窗設計系統 - 品牌對齊風格（歷史版本）
+
+> 狀態：歷史設計參考。當前正式視覺 SSOT 以 root `DESIGN.md`、`apps/ratewise/src/config/design-tokens.ts` 與 `apps/ratewise/src/index.css` 為準。
 
 ## 1. 風格總覽 (Style Overview)
 
 **核心理念**: 品牌統一、專業可靠、現代簡約。旨在與主應用完美融合，營造一致的品牌體驗。
 
-**靈感來源**: 主應用的藍紫雙色漸變、現代 UI 設計趨勢、專業財金應用的可靠感。
+**靈感來源**: 2025-10 當時的主應用藍紫漸變方向與品牌一致性探索。
 
 **適用場景**: 適合財金、工具、專業服務等需要品牌統一性的應用程式。
 
 **更新時間**: 2025-10-22T19:00:00+08:00  
-**版本**: v2.0 (品牌對齊)
+**版本**: v2.0（歷史歸檔）
 
 ---
 
@@ -291,10 +293,10 @@ export function UpdatePrompt() {
 - **粉彩雲朵**: `docs/archive/designs/pastel-cloud-variant.md`
 - **霓虹賽博**: `docs/archive/designs/neon-cyber-variant.md`
 
-### 當前版本
+### 歸檔版本
 
-- **v2.0 - 品牌對齊** (2025-10-22) ⭐ 當前使用
-- 完整代碼: `apps/ratewise/src/components/UpdatePrompt.tsx`
+- **v2.0 - 品牌對齊** (2025-10-22) 已歸檔
+- 當時參考代碼: `apps/ratewise/src/components/UpdatePrompt.tsx`
 
 ---
 
@@ -324,7 +326,7 @@ export function UpdatePrompt() {
 ---
 
 **最後更新**: 2025-10-22  
-**當前風格**: Brand Aligned (品牌對齊) v2.0  
+**歸檔風格**: Brand Aligned (品牌對齊) v2.0
 **負責人**: RateWise Design Team  
 **審核**: Linus's Good Taste Review ✅
 
diff --git a/docs/dev/002_development_reward_penalty_log.md b/docs/dev/002_development_reward_penalty_log.md
index b918ae992..6274fff18 100644
--- a/docs/dev/002_development_reward_penalty_log.md
+++ b/docs/dev/002_development_reward_penalty_log.md
@@ -2,7 +2,7 @@
 
 > 版本：outline-v2-ultra
 > 原則：每筆只保留日期、ID、原因、解法。
-> 本次分數變化：+1（reward 1）｜累計總分：前次總分 +39
+> 本次分數變化：+1（reward 1、penalty 0）｜累計總分：+63
 
 ## 新增模板（4 行）
 
@@ -13,6 +13,126 @@
 
 ## 條目（新→舊）
 
+- 日期：2026-06-26
+- ID：reward-split-meow-expense-currency-rate-snapshot
+- 原因：split-meow 的 ExpenseRecord 只存裸數字、未保存記帳當下幣別；使用者先以 TWD 記帳後切換 KRW（或韓國時區自動偵測）時，歷史金額會被當前全域幣別重新格式化，NT$1,000 被誤顯示為 ₩1,000。
+- 解法：ExpenseRecord 增加 currency 與 exchangeRateKrwPerTwd 快照欄位，記帳時保存；HistoryTab 個別金額改用各筆快照幣別、KRW 副標即時換算 TWD、彙總/結算採 trip 主導幣別 fallback；補 store/currencies 單元測試與 Playwright 瀏覽器驗收（切回 TWD 後 KRW 記錄仍正確）。
+
+- 日期：2026-06-26
+- ID：reward-moneybox-history-snapshot-date-ssot
+- 原因：MoneyBox history 檔名用 runner 的 Asia/Taipei wall-clock，但 date-rollover 判斷 (extractSeoulSnapshotDate) 用首爾 snapshot date；cron 每 5 分鐘全天執行，UTC 15:00-15:59 視窗每日必觸發，首爾新一日資料會被寫進台北前一日檔名，趨勢日期錯標。
+- 解法：history 檔名改用資料本身宣告的首爾掛牌日（updateTime，與 rollover 判斷同源 SSOT），提取失敗時 fallback 至 Asia/Seoul wall-clock；以三組情境驗證（updateTime、UTC 跨日 timestamp、空資料 fallback）。
+
+- 日期：2026-06-12
+- ID：neutral-ratewise-2026-ux-product-spec
+- 原因：二十線 UX 審查（韓式 fintech 對標、單幣 Modal 摩擦、資訊重複）需可追溯設計 SSOT
+- 解法：新增 docs/superpowers/specs/2026-06-12-ratewise-2026-product-ux-spec.md 與 Phase 1 實作計畫
+
+- 日期：2026-06-12
+- ID：reward-ratewise-cdn-if-none-match-preflight
+- 原因：If-None-Match 非 CORS safelisted，jsDelivr preflight 拒絕導致主 CDN 永遠失敗並降級 GitHub Raw（60 req/hr/IP）
+- 解法：移除 CDN 條件式請求與 304 分支，保留 ETag 存入快取供未來 Worker proxy；同步更新 exchangeRateService 單測
+
+- 日期：2026-06-11
+- ID：reward-ratewise-responsive-320px-overflow-audit
+- 原因：以 Puppeteer 對正式站 320/768/1280 視口程式化掃描（getBoundingClientRect vs clientWidth），發現 open-data 頁端點路徑 `<code>` 無空白長字串（history/{YYYY-MM-DD}.json）未斷行，320px 下溢出至 right=449；其餘首頁/KRW 換錢所/multi/faq/guide/幣別金額頁皆零溢出
+- 解法：端點 code 標籤補 `min-w-0 break-all`，OpenData.test.tsx 新增 320px 防溢出守門測試；固定寬度掃描確認全站無 >320px 無上限寬度，5 個表格皆有 overflow-x-auto SSOT 包裹
+
+- 日期：2026-06-11
+- ID：reward-ratewise-radius-ssot-regression-guard
+- 原因：圓角僅有一次性清理而無防回歸守門（顏色有 regex 守門、圓角沒有），SkeletonLoader/ColorSchemeComparison/notificationTokens.actions.text 殘留 bare `rounded`，趨勢圖 `rounded-b-xl`（12px）與 `rounded-card`（24px）卡片底角不貼合
+- 解法：TDD 先建 `radius-ssot.test.ts` regex 守門（白名單語義 token + full/none 與方向變體，紅燈列出全部殘留）再全數收斂：skeleton/swatch/token 改 `rounded-compact`、趨勢圖改 `rounded-b-card` 對齊卡片外框，config 489 tests + typecheck + prettier 全綠
+
+- 日期：2026-06-11
+- ID：reward-ratewise-a11y-touch-target-focus-radius-convergence
+- 原因：UIUX 稽核發現 RatingModal 星星按鈕僅 32px 觸控目標、OpenData 複製鈕與 MailtoLink、計算機關閉鈕缺 focus-visible 指示，且 OpenData/Footer 多處 bare `rounded`（4px）偏離語義 radius token（小型元素應用 rounded-compact 8px）
+- 解法：TDD 新增 RatingModal 觸控目標守門測試後將星星升至 44px 圓形命中區；複製鈕以透明 after 命中區補 44px 並補 focus ring；MailtoLink 與計算機關閉鈕補 focus-visible 與 44px；OpenData/Footer bare rounded 全數收斂為 rounded-compact，typecheck/eslint/prettier/相關 Vitest 全綠
+
+- 日期：2026-06-11
+- ID：reward-ratewise-exchange-shop-ratemode-ssot-nav-header-deflake
+- 原因：換錢所 `computeConverterRate` 硬編碼買賣方向並忽略 rateMode（選中間價無效），內容頁 sticky header 的 safe-area hack 在 iOS PWA standalone 會遮擋頂部內容，且在途 UIUX 變更留有未同步測試（themes SSR fallback、換錢所匯率期望值鎖死舊 bug）
+- 解法：TDD 將換錢所選價收斂至 `computeConverterRate(rateMode)` 單一 SSOT（mid=(買+賣)/2、sell 雙向賣出、auto 維持客戶視角）並貫穿 getUnitExchangeRate/報價 adapter/趨勢圖；PageNavHeader 砍掉 sticky 改 in-flow pill 返回鈕並以測試禁止 sticky 回歸；RateSelector 以透明命中區補回 44px 觸控目標；同步修正在途測試與 gitignore，typecheck/lint/prettier/1800+ Vitest 全綠
+
+- 日期：2026-05-23
+- ID：reward-ratewise-uiux-token-ssot-convergence
+- 原因：RateWise UI shell、內容頁麵包屑與多處元件樣式存在 design token 漂移、死碼 UI 與 PWA/Chrome polish warning
+- 解法：以 Impeccable / SSOT audit 收斂 token、刪除未引用 UI shim、補 SPEC 與守門測試，並通過 full Vitest、typecheck、SSOT、Chrome console 與 build 驗證
+
+- 日期：2026-05-15
+- ID：reward-ratewise-moneybox-aggregate-trend
+- 原因：換錢所（KRW/MoneyBox）趨勢線在生產環境每次載入觸發 30 個 daily fetch，且大多數 ~30 天前的日檔 404，與台銀 history-30d.json aggregate SSOT 飄移
+- 解法：client 加 aggregate-first（與 PROVIDER_RATES_PATH.aggregate 對齊）+ 5 分鐘 memory cache + fallback 保留逐日；Playwright AB 量到 50→1 requests、~5049ms→~2ms（~2500x），單測覆蓋四種情境
+
+- 日期：2026-05-14
+- ID：reward-ratewise-sentry-fetch-filter-ssot
+- 原因：Sentry `beforeSend` 仍用 `'Failed to fetch'` 字面比對，與 errorClassification 跨瀏覽器 SSOT 飄移，Firefox / Safari 的 fetch 失敗會繞過過濾而重複送到 Sentry
+- 解法：改用 `classifyUnhandledRejection` 判斷 `generic-fetch-failure` 後 return null；以 Playwright AB test 在 dev runtime 確認 6 變體 + 1 control 路由正確
+
+- 日期：2026-05-14
+- ID：reward-ratewise-error-classification-cross-browser
+- 原因：errorClassification 僅匹配 Chromium 的 "Failed to fetch"，Firefox 與 iOS / macOS Safari 在離線、連線中斷、DNS 失敗、無法連線時的訊息會落入 unknown 觀測桶，干擾告警基線
+- 解法：補上 Firefox NetworkError 與 Safari 系列 NSURLError 訊息（offline / network lost / hostname not found / cannot connect）匹配，並補單元測試保護；順手統一 prebuild 刷新腳本 cache 分支幣別數量輸出單位
+
+- 日期：2026-05-13
+- ID：reward-ratewise-data-pr-governance
+- 原因：每日 SEO/fallback 資料 workflow 仍在建立 PR 後直接 merge，繞過最佳實踐中的 branch protection 決策邊界
+- 解法：移除 workflow 內直接 merge step，改由 required checks、review 或 GitHub auto-merge / merge queue 控制合併
+
+- 日期：2026-05-13
+- ID：reward-ratewise-fallback-snapshot-freshness
+- 原因：fallback snapshot 已導入每日刷新但分支仍落後最新台銀快照，刷新腳本輸出仍顯示錯誤幣別數
+- 解法：合併最新 main、更新 build-time fallback snapshot，並修正刷新腳本說明與匯率筆數輸出
+
+- 日期：2026-05-13
+- ID：reward-ratewise-multi-accessibility-contrast
+- 原因：多幣別 accessibility gate 啟用後揭露 11px 匯率資訊文字在淡底上對比不足
+- 解法：移除低對比 opacity 疊色，改用明確 text / primary-dark tokens 滿足 WCAG AA 對比
+
+- 日期：2026-05-13
+- ID：reward-ratewise-multi-rate-toggle-pair-availability
+- 原因：多幣別三態切換以列幣別而非實際 pair 判斷可用性，現金不可用時也可能顯示錯誤標籤
+- 解法：改用 pair-level availability 與 resolved rate type，並補 exchange-shop 反向 TWD 與 spot-only label 回歸測試
+
+- 日期：2026-05-13
+- ID：reward-ratewise-fallback-rate-snapshot-ssot
+- 原因：prebuild 仍刷新 tracked live rate data，且 runtime fallback 匯率另有硬編碼副本
+- 解法：將 tracked fallback snapshot 更新改為 explicit refresh，prebuild 回到 deterministic，runtime fallback 改讀 build-time snapshot SSOT
+
+- 日期：2026-05-12
+- ID：reward-ratewise-prerender-internal-route-contract
+- 原因：prerender 測試仍要求 internal-only color-scheme 頁進入 production 靜態輸出
+- 解法：將測試契約改為確認 internal-only route 不產生 static HTML
+
+- 日期：2026-05-12
+- ID：reward-ratewise-currency-route-registry
+- 原因：34 個幣別落地頁 route registration 與 SEO path/page entry 存在人工複製面
+- 解法：建立 currency route registry、由 routes 消費並補 parity guardrail tests
+
+- 日期：2026-05-12
+- ID：reward-ratewise-generated-artifact-ssot
+- 原因：build/generated/local QA artifacts 責任混雜且歷史產物污染追蹤
+- 解法：建立 artifact bucket scripts、移除本機產物追蹤並同步文件 SSOT
+
+- 日期：2026-05-12
+- ID：reward-ratewise-qa-gate-governance
+- 原因：核心 accessibility/offline/performance checks 仍含未收斂 skip 或手動流程
+- 解法：恢復可執行 accessibility/offline gate 並加入 scheduled production governance
+
+- 日期：2026-05-12
+- ID：reward-ratewise-error-observability
+- 原因：hydration 與 fetch 類錯誤被全域 suppression 遮蔽
+- 解法：集中錯誤分類並限制 production hydration suppression
+
+- 日期：2026-05-12
+- ID：reward-ratewise-public-surface-governance
+- 原因：內部展示與測試頁仍存在於正式路由與 prerender surface
+- 解法：將 internal-only routes 從 production route/prerender surface 移除並補測試
+
+- 日期：2026-05-12
+- ID：reward-ratewise-lint-baseline
+- 原因：RateWise lint gate 因 test type import warning 無法通過
+- 解法：修正測試檔 type-only import 寫法並恢復 0 warning baseline
+
 - 日期：2026-05-11
 - ID：multi-converter-exchange-shop-text-switch
 - 原因：MultiConverter 頁面沒有 UI 讓使用者切換銀行/換錢所匯率來源，只有 SingleConverter 有 RateSelector。
@@ -1114,3 +1234,8 @@
 - ID：ratewise-lhci-homepage-runtime-refresh-guard
 - 原因：PR #350 的 Lighthouse CI 在首頁 `/` 掉到 `0.87~0.88`，根因為 LHCI 離線模式下首頁仍執行 runtime 匯率 refresh，失敗後插入 stale warning 與額外背景工作，拉低首屏效能。
 - 解法：在 `exchangeRateService` 與 `useExchangeRates` 增加 `VITE_LHCI_OFFLINE` 穩定分支，LHCI 直接使用 build-time 匯率並跳過 runtime refresh / polling，另補 service 與 hook 回歸測試鎖住行為。
+
+- 日期：2026-05-30
+- ID：ratewise-tw-radius-defaults-restore
+- 原因：`tailwind.config.ts` 覆蓋標準 `lg`/`md`/`sm`/`xl` radius alias 為語義 token 值，第三方元件與未遷移路徑會隱性受影響，為生產級風險。
+- 解法：恢復 Tailwind 標準 radius 預設值，僅保留語義 token（`card`/`panel`/`control`/`icon`/`compact`）作為新增擴充；修正最後一個 `rounded-t-lg` → `rounded-t-control`；同步 `DESIGN.md` 與測試。
diff --git a/docs/dev/044_ratewise_uiux_token_refactor_spec.md b/docs/dev/044_ratewise_uiux_token_refactor_spec.md
new file mode 100644
index 000000000..c896d3c6a
--- /dev/null
+++ b/docs/dev/044_ratewise_uiux_token_refactor_spec.md
@@ -0,0 +1,159 @@
+# RateWise UIUX 與 Design Token 收斂 SPEC
+
+> 狀態：Active
+> 建立日期：2026-05-23
+> 負責範圍：`apps/ratewise/` UI shell、SEO 內容頁、幣別落地頁、設計 token 與 PWA 導覽體驗
+> 產品北極星：`DESIGN.md` 的 **The Quiet Exchange Desk**
+
+## 1. 目標
+
+本次重構的目標是將 RateWise 的 UIUX 收斂成可維護、可稽核、可在 PWA 與全裝置穩定呈現的 SSOT 設計系統。
+
+- 預設視覺以 `zen` 的冷靜金融工具語法為基準。
+- 所有正式頁面不得各自發明第二套色彩、間距、麵包屑、卡片或內容頁 shell。
+- 導覽、麵包屑、內容頁容器、互動卡片與正式內容頁表面語法必須從 `design-tokens.ts` 或 CSS variables 取得。
+- iOS PWA safe-area、sticky header、bottom navigation 與橫向 breadcrumb 不得靠個別 inline style 漂移。
+
+## 2. 目前頁面盤點
+
+### 2.1 AppLayout 產品頁
+
+共用：`AppLayout`、`SideNavigation`、`BottomNavigation`、`rateWiseLayoutTokens`、`multiConverterLayoutTokens`、`contentPageTokens`。
+
+| 路由          | 頁面                              | 目的                               |
+| ------------- | --------------------------------- | ---------------------------------- |
+| `/`           | `RateWise` + `HomepageSEOSection` | 單幣別換算首頁                     |
+| `/multi/`     | `MultiConverter`                  | 多幣別換算                         |
+| `/favorites/` | `Favorites`                       | 收藏與歷史                         |
+| `/settings/`  | `Settings`                        | 介面風格、語言、格式設定與支援入口 |
+
+### 2.2 Layout SEO / 內容頁
+
+共用：`Layout`、`contentPageTokens.shell`、`PageNavHeader`、`Breadcrumb`、`SEOHelmet`。
+
+| 路由                      | 頁面                 | 共用狀態                                                                                    |
+| ------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
+| `/faq/`                   | `FAQ`                | 已使用 `contentPageTokens` + `PageNavHeader`                                                |
+| `/about/`                 | `About`              | 已使用 `contentPageTokens` + `PageNavHeader`                                                |
+| `/privacy/`               | `Privacy`            | 已使用 `contentPageTokens` + `PageNavHeader`                                                |
+| `/guide/`                 | `Guide`              | 已使用 `contentPageTokens` + `PageNavHeader`                                                |
+| `/open-data/`             | `OpenData`           | 已使用 `contentPageTokens` + `PageNavHeader` + `contentPageTokens.table`                    |
+| `/seo-tech/`              | `SeoTech`            | 已移除主要任意 `rgb(var(...))` 類別與大圓角漂移，仍可後續拆 metric/timeline/pipeline 子元件 |
+| `/sell-rate-vs-mid-rate/` | `AuthorityGuidePage` | 共用工廠頁，已收斂 hero、section、FAQ、CTA 與相關連結 token                                 |
+| `/cash-vs-spot-rate/`     | `AuthorityGuidePage` | 同上                                                                                        |
+| `/card-rate-guide/`       | `AuthorityGuidePage` | 同上                                                                                        |
+
+### 2.3 幣別落地頁
+
+共用：`CurrencyLandingPage`、`contentPageTokens.shell`、`PageNavHeader`、`SEOHelmet`。
+
+- 幣別：`AUD`、`CAD`、`CHF`、`CNY`、`EUR`、`GBP`、`HKD`、`IDR`、`JPY`、`KRW`、`MYR`、`NZD`、`PHP`、`SGD`、`THB`、`USD`、`VND`
+- 路由型態：17 個 `/{currency}-twd/`、17 個 `/twd-{currency}/`
+- 金額路由：每個幣對另有 `/:amount` 版本，例如 `/usd-twd/:amount`
+
+### 2.4 內部 / 開發頁
+
+僅在 dev 或 `VITE_ENABLE_INTERNAL_ROUTES=true` 註冊：`/theme-showcase/`、`/color-scheme/`、`/update-prompt-test/`、`/ui-showcase/`。
+
+## 3. 未達生產標準問題
+
+| 優先級 | 問題                                                                               | 影響                                                | 重構方向                                                                                        |
+| ------ | ---------------------------------------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| P0     | `PageNavHeader` 原本用 inline safe-area padding 與元件內 hardcoded classes         | iOS PWA / sticky header 容易漂移                    | 已改由 `pageNavHeaderTokens` 管理                                                               |
+| P0     | 舊文件仍描述 `data-mode=dark` 與深色模式                                           | 文件與 runtime SSOT 不一致                          | 更新 `014_design_token_architecture.md`，明確只保留 `data-style`                                |
+| P1     | `pageLayoutTokens.content.maxWidth` 與 `max-w-5xl` 不一致                          | 設計尺寸不可稽核                                    | 已對齊 1024px 並拆出 padding / variant token                                                    |
+| P1     | `PageCard` 用 `div role="button"` 模擬按鈕                                         | 鍵盤語意與可及性不如原生控制                        | 已改為有 `onClick` 時輸出原生 `button`                                                          |
+| P1     | `AppLayout` / `SideNavigation` / `SeoTech` 有任意 `rgb(var(...))` class            | 色彩語法有兩套寫法                                  | 已改核心 shell 與 `SeoTech` 為 `bg-background`、`text-text`、`border-border` 等語義 class       |
+| P1     | `SeoTech` 是獨立堆出的資訊儀表頁                                                   | 與 FAQ / Guide / OpenData 的 section 語法不完全一致 | 已先收斂色彩、半徑與表面語法；後續可再拆 `contentPageTokens.metrics`、`pipelineRow`、`codeList` |
+| P2     | `AuthorityGuidePage` 與 `CurrencyLandingPage` 仍有大量 `card p-*` 與局部排版 class | 同類內容頁有相似但未命名的樣式                      | 已建立並套用 `contentPageTokens.article`、`result`、`callouts`、`buttons`                       |
+| P2     | `Favorites`、`Settings` 仍有局部 10px/11px、preview inline style 與 tab 語法       | 設定頁與收藏頁視覺密度未完全收斂                    | 已建立並套用 `appPageTokens`；動態 style preview 僅保留必要 CSS variable 例外                   |
+| P2     | `OpenData` 表格 min-width 與表格樣式分散                                           | 手機橫向表格體驗不可統一驗收                        | 已建立並套用 `contentPageTokens.table`                                                          |
+| P3     | dev showcase 與季節彩蛋仍有必要的展示 / SVG / canvas inline style                  | 不是正式頁主要風險，但會污染搜尋結果                | dev showcase 已收斂半徑與動畫；季節彩蛋維持隔離例外                                             |
+| P3     | `defaultTheme` / `darkTheme` 相容層仍保留歷史色票                                  | 容易被誤當 runtime 視覺 SSOT                        | 文件標註為 Tailwind legacy compatibility，不作產品決策來源                                      |
+
+## 4. 重構計畫
+
+### Phase 1：基礎 token 與導覽收斂
+
+- 將 `PageNavHeader`、`Breadcrumb`、`PageContainer` 改為 `design-tokens.ts` 驅動。
+- 移除 breadcrumb inline style，改用 token class 處理 `env(safe-area-inset-top)`。
+- 將返回按鈕保持 `min-h-11`、清楚 focus ring、可觸控與 basename-safe navigation。
+- 針對核心 shell 建立來源掃描：正式頁不得新增 `text-[rgb(...)]`、`bg-[rgb(...)]`、`border-[rgb(...)]`。
+
+### Phase 2：內容頁 family 統一
+
+- 把 FAQ、About、Privacy、Guide、OpenData、SeoTech、AuthorityGuidePage 統一成：
+  - `ContentPageShell`
+  - `ContentPageHero`
+  - `ContentSection`
+  - `ContentLinkRow`
+  - `ContentTable`
+- 所有內容頁只允許使用 `contentPageTokens` 或上述元件組合，不再直接堆 card / panel class。
+
+### Phase 3：幣別頁 family 統一
+
+- 把 `CurrencyLandingPage` 裡的結果面板、牌告解釋、比較卡、FAQ、相關連結抽成 tokens / components。
+- 金額路由與一般幣別路由使用同一個 hero、結果、說明順序，差別只在資料狀態。
+- 驗收所有 34 個幣別頁在 320px、390px、768px、1024px、1440px 不產生水平 overflow。
+
+### Phase 4：產品 app shell 統一
+
+- `RateWise`、`MultiConverter`、`Favorites`、`Settings` 使用同一套 app panel、tab、row、empty state、notification tokens。
+- 設定頁的 style preview inline color 保留為「動態 preview 例外」，但 wrapper、label、selected state 改為 token。
+- 收藏 / 歷史清單統一 row padding、label typography、danger action 與 empty state。
+
+### Phase 5：治理與驗證
+
+- 單元測試：`PageNavHeader`、`Breadcrumb`、`PageContainer`、`design-tokens`。
+- Source scan：正式頁禁止任意 `rgb(var(...))` Tailwind class，例外只允許 chart/SVG/canvas、theme preview、offline fallback。
+- Chrome / PWA QA：桌面、手機、PWA standalone safe-area；console error = 0。
+- 建置驗證：`pnpm --filter @app/ratewise typecheck`、targeted Vitest、UI 變更後至少 `pnpm --filter @app/ratewise build`。
+
+## 5. 麵包屑驗收標準
+
+- Header root 由 `pageNavHeaderTokens.root` 管理，無 inline `style`。
+- safe-area class 固定為 `pt-[calc(env(safe-area-inset-top,0px)+0.625rem)]`。
+- Header row 至少 `44px`，返回按鈕至少 `44px` 觸控高度。
+- Breadcrumb 容器 `min-w-0`，list 可水平捲動且保持單行。
+- 最後一個 breadcrumb 必須 `truncate`，不得把 sticky header 撐高。
+- Link / button 均有 `focus-visible:ring-2` 與 `aria-current="page"`。
+
+## 6. 參考依據
+
+- `DESIGN.md`：RateWise 產品視覺 SSOT
+- `PRODUCT.md`：RateWise 產品語氣與 anti-reference
+- `apps/ratewise/src/config/design-tokens.ts`：runtime layout / component token SSOT
+- Vercel Web Interface Guidelines：互動語意、focus、safe-area、motion 與 token hygiene
+
+## 7. 2026-05-23 執行紀錄
+
+- 已完成 `PageNavHeader` / `Breadcrumb` PWA safe-area 重構，導覽無 inline style，320px / 390px / 768px 實測無水平 overflow。
+- 已完成內容頁 family 第一輪收斂：`AuthorityGuidePage`、`CurrencyLandingPage`、`OpenData`、`SeoTech`、`AnswerCapsule`、首頁 SEO FAQ 均使用 8px 表面與語義色彩。
+- 已完成產品 app shell 第一輪收斂：`RateWise`、`MultiConverter`、`Favorites`、`Settings`、側欄、底部導覽、骨架屏、Toast、錯誤復原 UI、下拉刷新提示均移除大圓角與 `transition-all`。
+- 已完成互動語意修正：`PageCard`、單幣別金額輸入、多幣別金額輸入、多幣別基準貨幣選擇、收藏列表等改用原生 `button`；新增 source scan 確認沒有手動 `role="button"` 回歸。
+- Source scan 目前覆蓋正式頁與內部展示頁，禁止 `transition-all`、`transition: all`、`rounded-xl/2xl`、任意數字大圓角、`role="button"`、`border-surface-border` 與 `divide-surface-border`；季節彩蛋樣式維持隔離例外。
+- 已刪除 5 組 runtime 未引用的 UIUX 死碼 / shim，並修正測試中仍綁定舊樣式合約的斷言，避免舊 token 漂移被測試重新固定。
+- 已移除 `index.html` 全域 `logo.png` preload；該資源只在 App header 使用，SEO/content 路由會產生 Chrome unused-preload warning。
+
+## 8. 2026-05-23 Impeccable / Browser 驗證結果
+
+- `npx impeccable detect --json --fast apps/ratewise/src`：通過，回傳 `[]`。
+- `pnpm --filter @app/ratewise test -- run`：通過，141 檔 passed、1 檔 skipped；2381 tests passed、2 skipped。
+- `pnpm --filter @app/ratewise typecheck`：通過。
+- `node scripts/verify-ssot-sync.mjs`：通過，`themes.ts`、`index.css`、`index.html` skeleton、manifest、offline shell 與 `DESIGN.md` 同步。
+- 死碼回歸掃描：`PageContainer|PageSection|PageCard|RateProviderMenu|SnowAccumulation|useLongPress` 無正式 src/tests 引用。
+- Browser DOM / axe 驗證：`/`、`/multi/`、`/favorites/`、`/settings/`、`/seo-tech/` 在 390x844、768x1024、1440x900 共 15 組路由/視窗通過；console warning 0、horizontal overflow 0、44px 以下互動目標 0、12px 以下可見文字 0、axe violations 0。
+- Chrome/Playwright 現場回歸：`/seo-tech/?qa=preload-check` 390x844，console errors 0、warnings 0。
+- `pnpm build:ratewise`：通過。
+
+## 9. 死碼 UIUX 判定
+
+已刪除「正式 runtime 未引用，但仍被測試或展示出口引用」的候選，並同步移除測試、barrel export 與掃描清單，避免把測試覆蓋誤判為產品依賴。
+
+| 候選                                                       | 判定                                                                                  | 處置                                              |
+| ---------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `src/components/PageContainer.tsx`                         | 僅測試與 design-token scan 引用，正式頁面已改用 `contentPageTokens` / `appPageTokens` | 已刪除元件、測試與 scan 清單引用                  |
+| `src/features/ratewise/components/RateProviderMenu.tsx`    | 僅元件測試與 i18n scan 引用，正式換匯流程未渲染                                       | 已刪除元件、測試與 i18n guard 檔案引用            |
+| `src/features/calculator/easter-eggs/SnowAccumulation.tsx` | 由 easter-eggs barrel 與季節測試引用，正式聖誕入口未直接渲染                          | 已刪除元件、barrel export、type export 與測試段落 |
+| `src/features/calculator/hooks/useLongPress.ts`            | 目前只有 hook 測試與註解引用                                                          | 已刪除 hook 與測試，並更新 CalculatorKey 測試註解 |
+| `src/features/ratewise/storage.ts`                         | 僅 storage 測試引用，runtime 已轉向 `storage-keys.ts` 與 store/utils                  | 已刪除 shim 與測試                                |
diff --git a/docs/superpowers/plans/2026-05-12-ratewise-production-governance.md b/docs/superpowers/plans/2026-05-12-ratewise-production-governance.md
new file mode 100644
index 000000000..7d4f9e391
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-12-ratewise-production-governance.md
@@ -0,0 +1,1123 @@
+# RateWise Production Governance Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Bring RateWise back to a production-grade baseline by fixing delivery gates, removing internal production surface area, restoring error observability, tightening QA gates, clarifying build artifacts, and reducing route/SEO drift risk.
+
+**Architecture:** Execute in phases with minimal behavioral blast radius. Start with hard quality gates and public route surface, then improve error classification, QA coverage, artifact policy, and finally route registry convergence. Each phase should be independently reviewable and shippable.
+
+**Tech Stack:** React 19, TypeScript, Vite 8, vite-react-ssg, Vitest, Playwright, pnpm workspace, existing RateWise SEO/PWA scripts.
+
+---
+
+## File Map
+
+- Modify: `apps/ratewise/src/features/ratewise/__tests__/rateProviderRanking.test.ts`
+  - Fix ESLint `consistent-type-imports` warning.
+- Modify: `apps/ratewise/src/features/ratewise/components/__tests__/RateProviderMenu.test.tsx`
+  - Fix ESLint `consistent-type-imports` warnings in dynamic import mock typing.
+- Modify: `apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.trend.test.tsx`
+  - Fix ESLint `consistent-type-imports` warning around `importOriginal` typing.
+- Modify: `apps/ratewise/src/routes.tsx`
+  - Gate internal-only routes out of production route table.
+- Modify: `apps/ratewise/src/config/seo-paths.ts`
+  - Split app-only public noindex routes from internal-only routes, and remove internal-only routes from production prerender paths.
+- Modify or create: `apps/ratewise/src/config/__tests__/route-surface.test.ts`
+  - Assert internal-only routes are not in production public/prerender surface.
+- Modify: `apps/ratewise/src/main.tsx`
+  - Replace broad `Failed to fetch` suppression with precise error classification.
+- Modify: `apps/ratewise/src/suppress-hydration-warning.ts`
+  - Restrict or remove production global console monkey patch.
+- Create: `apps/ratewise/src/utils/errorClassification.ts`
+  - Centralize chunk/history/generic fetch classification helpers.
+- Create: `apps/ratewise/src/utils/__tests__/errorClassification.test.ts`
+  - Cover expected and non-expected rejection classification.
+- Modify: `apps/ratewise/tests/e2e/accessibility.spec.ts`
+  - Convert critical skipped/fixme accessibility checks into scoped assertions.
+- Modify: `apps/ratewise/tests/e2e/offline-pwa.spec.ts`
+  - Restore at least one reliable offline indicator scenario or explicitly move it into scheduled gate.
+- Modify: `apps/ratewise/tests/e2e/trend-chart-latency.spec.ts`
+  - Convert skipped trend latency test into a runnable scheduled/performance test or document gate ownership in config.
+- Modify: `apps/ratewise/tests/e2e/cloudflare-cache.spec.ts`
+  - Keep production guard but make it workflow-friendly.
+- Modify or create: `.github/workflows/ratewise-production-governance.yml`
+  - Scheduled/release gate for live production checks if no existing workflow owns this.
+- Modify: `apps/ratewise/package.json`
+  - Add explicit artifact/data refresh scripts only if needed.
+- Modify: `apps/ratewise/README.md`
+  - Align quality and artifact policy with actual gates.
+- Modify: `AGENTS.md`, `CLAUDE.md`
+  - Sync route, QA, and generated artifact policies if implementation changes those rules.
+- Modify: `docs/dev/002_development_reward_penalty_log.md`
+  - Required before any commit, per repo SOP.
+- Create later: `apps/ratewise/src/config/currencyLandingRouteRegistry.ts`
+  - Registry for currency landing route metadata.
+- Create later: `apps/ratewise/src/config/__tests__/currencyLandingRouteRegistry.test.ts`
+  - Consistency tests before route generation refactor.
+
+## Task 0: Baseline Cleanup
+
+**Files:**
+
+- Modify: `apps/ratewise/src/features/ratewise/__tests__/rateProviderRanking.test.ts`
+- Modify: `apps/ratewise/src/features/ratewise/components/__tests__/RateProviderMenu.test.tsx`
+- Modify: `apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.trend.test.tsx`
+- Modify: `docs/dev/002_development_reward_penalty_log.md` before commit
+
+- [ ] **Step 1: Reproduce the failing gate**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise lint
+```
+
+Expected: FAIL with 4 `@typescript-eslint/consistent-type-imports` warnings and exit status 1.
+
+- [ ] **Step 2: Fix dynamic import type annotations in tests**
+
+Replace inline `typeof import('...')` type annotations with top-level type-only aliases.
+
+For `RateProviderMenu.test.tsx`, add near imports:
+
+```ts
+import type * as RateProvidersModule from '../../../../config/rateProviders';
+```
+
+Then change mocked import blocks from:
+
+```ts
+const actual = await vi.importActual<typeof import('../../../../config/rateProviders')>(
+  '../../../../config/rateProviders',
+);
+```
+
+to:
+
+```ts
+const actual = await vi.importActual<typeof RateProvidersModule>(
+  '../../../../config/rateProviders',
+);
+```
+
+For `SingleConverter.trend.test.tsx`, add near imports:
+
+```ts
+import type * as MoneyboxRateServiceModule from '../../../../services/moneyboxRateService';
+```
+
+Then change:
+
+```ts
+const actual = await importOriginal<typeof import('../../../../services/moneyboxRateService')>();
+```
+
+to:
+
+```ts
+const actual = await importOriginal<typeof MoneyboxRateServiceModule>();
+```
+
+For `rateProviderRanking.test.ts`, locate the reported line and apply the same pattern: convert inline `typeof import('...')` to a top-level `import type * as ...Module from '...'`.
+
+- [ ] **Step 3: Verify lint is clean**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise lint
+```
+
+Expected: PASS with 0 warnings.
+
+- [ ] **Step 4: Verify typecheck still passes**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise typecheck
+```
+
+Expected: PASS.
+
+- [ ] **Step 5: Update 002 log for baseline cleanup**
+
+Append one neutral or reward entry using the current four-line format in `docs/dev/002_development_reward_penalty_log.md`.
+
+Entry content:
+
+```markdown
+- 日期：2026-05-12
+- ID：reward-ratewise-lint-baseline
+- 原因：RateWise lint gate 因 test type import warning 無法通過
+- 解法：修正測試檔 type-only import 寫法並恢復 0 warning baseline
+```
+
+Also update the file's score summary according to its current SSOT formula.
+
+- [ ] **Step 6: Commit baseline cleanup**
+
+Run:
+
+```bash
+git add apps/ratewise/src/features/ratewise/__tests__/rateProviderRanking.test.ts \
+  apps/ratewise/src/features/ratewise/components/__tests__/RateProviderMenu.test.tsx \
+  apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.trend.test.tsx \
+  docs/dev/002_development_reward_penalty_log.md
+git commit -m "fix(ratewise): 修復 lint 基線
+
+- 修正測試檔動態 import type annotation 警告
+- 恢復 RateWise lint 0 warning 品質閘門
+
+測試：pnpm --filter @app/ratewise lint；pnpm --filter @app/ratewise typecheck"
+```
+
+Expected: commit succeeds and commitlint passes.
+
+## Task 1: Product Surface Governance
+
+**Files:**
+
+- Modify: `apps/ratewise/src/routes.tsx`
+- Modify: `apps/ratewise/src/config/seo-paths.ts`
+- Create: `apps/ratewise/src/config/__tests__/route-surface.test.ts`
+- Modify: `docs/dev/002_development_reward_penalty_log.md` before commit
+
+- [ ] **Step 1: Write failing route surface tests**
+
+Create `apps/ratewise/src/config/__tests__/route-surface.test.ts`:
+
+```ts
+import { describe, expect, it } from 'vitest';
+import { APP_ONLY_NOINDEX_PATHS, DEV_ONLY_PATHS, PRERENDER_PATHS, APP_CONFIG } from '../seo-paths';
+
+const internalOnlyRoutes = [
+  '/theme-showcase/',
+  '/color-scheme/',
+  '/update-prompt-test/',
+  '/ui-showcase/',
+] as const;
+
+describe('RateWise public route surface', () => {
+  it('keeps only real user app routes in public noindex app paths', () => {
+    expect(APP_ONLY_NOINDEX_PATHS).toEqual(['/multi/', '/favorites/', '/settings/']);
+  });
+
+  it('keeps internal-only routes out of production prerender paths', () => {
+    for (const route of internalOnlyRoutes) {
+      expect(PRERENDER_PATHS).not.toContain(route);
+    }
+  });
+
+  it('keeps internal-only routes out of production app shell paths', () => {
+    for (const route of internalOnlyRoutes) {
+      expect(APP_CONFIG.appShellPaths).not.toContain(route);
+    }
+  });
+
+  it('tracks internal-only routes separately for development tooling', () => {
+    expect(DEV_ONLY_PATHS).toEqual([...internalOnlyRoutes]);
+  });
+});
+```
+
+- [ ] **Step 2: Run the new test and verify it fails**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise exec vitest run src/config/__tests__/route-surface.test.ts
+```
+
+Expected: FAIL because internal-only routes are currently included in `PRERENDER_PATHS` / `APP_CONFIG.appShellPaths`.
+
+- [ ] **Step 3: Split public app paths and internal paths**
+
+In `apps/ratewise/src/config/seo-paths.ts`, replace the current `APP_ONLY_PATHS` block with:
+
+```ts
+export const APP_ONLY_NOINDEX_PATHS = ['/multi/', '/favorites/', '/settings/'] as const;
+
+export const DEV_ONLY_PATHS = [
+  '/theme-showcase/',
+  '/color-scheme/',
+  '/update-prompt-test/',
+  '/ui-showcase/',
+] as const;
+
+export const APP_ONLY_PATHS = [...APP_ONLY_NOINDEX_PATHS] as const;
+
+export const APP_ONLY_PRERENDER_PATHS = [...APP_ONLY_NOINDEX_PATHS] as const;
+```
+
+Keep `DEV_ONLY_PATHS` exported so robots/dev tooling can still reference it.
+
+- [ ] **Step 4: Gate internal-only route records in `routes.tsx`**
+
+Add near route helpers:
+
+```ts
+const shouldEnableInternalRoutes =
+  import.meta.env.DEV || import.meta.env.VITE_ENABLE_INTERNAL_ROUTES === 'true';
+```
+
+Replace the internal route entries at the bottom with a spread:
+
+```tsx
+  ...(shouldEnableInternalRoutes
+    ? [
+        createLazyRoute(
+          '/color-scheme',
+          () => import('./pages/ColorSchemeComparison'),
+          'src/pages/ColorSchemeComparison.tsx',
+        ),
+        createLazyRoute(
+          '/update-prompt-test',
+          () => import('./pages/UpdatePromptTest'),
+          'src/pages/UpdatePromptTest.tsx',
+        ),
+        createLazyRoute('/ui-showcase', () => import('./pages/UIShowcase'), 'src/pages/UIShowcase.tsx'),
+      ]
+    : []),
+```
+
+Gate `theme-showcase` child route the same way inside `children`:
+
+```tsx
+      ...(shouldEnableInternalRoutes
+        ? [
+            {
+              path: 'theme-showcase',
+              lazy: async () => {
+                try {
+                  const module = await import('./pages/ThemeShowcase');
+                  return { Component: module.default };
+                } catch (error) {
+                  return { Component: () => <OfflineAwareFallback error={error} /> };
+                }
+              },
+            },
+          ]
+        : []),
+```
+
+- [ ] **Step 5: Run route surface tests**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise exec vitest run src/config/__tests__/route-surface.test.ts
+```
+
+Expected: PASS.
+
+- [ ] **Step 6: Run SEO surface tests**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise exec vitest run src/__tests__/seo-public-surface.test.ts src/prerender.test.ts
+```
+
+Expected: PASS. If a test expects internal routes to be prerendered, update that test to reflect this spec: production prerender excludes internal-only routes.
+
+- [ ] **Step 7: Build smoke**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise build
+```
+
+Expected: PASS. After build, inspect `git status --short`; only deterministic generated changes expected by build policy may appear.
+
+- [ ] **Step 8: Update 002 log and commit**
+
+Append:
+
+```markdown
+- 日期：2026-05-12
+- ID：reward-ratewise-public-surface-governance
+- 原因：內部展示與測試頁仍存在於正式路由與 prerender surface
+- 解法：將 internal-only routes 從 production route/prerender surface 移除並補測試
+```
+
+Commit:
+
+```bash
+git add apps/ratewise/src/routes.tsx \
+  apps/ratewise/src/config/seo-paths.ts \
+  apps/ratewise/src/config/__tests__/route-surface.test.ts \
+  docs/dev/002_development_reward_penalty_log.md
+git commit -m "fix(ratewise): 收斂正式公開路由表面
+
+- 將內部展示與測試頁排除於 production route surface
+- 補上 route surface 測試避免 prerender 與 app shell 漂移
+
+測試：pnpm --filter @app/ratewise exec vitest run src/config/__tests__/route-surface.test.ts src/__tests__/seo-public-surface.test.ts src/prerender.test.ts；pnpm --filter @app/ratewise build"
+```
+
+## Task 2: Error Observability And Hydration Policy
+
+**Files:**
+
+- Create: `apps/ratewise/src/utils/errorClassification.ts`
+- Create: `apps/ratewise/src/utils/__tests__/errorClassification.test.ts`
+- Modify: `apps/ratewise/src/main.tsx`
+- Modify: `apps/ratewise/src/suppress-hydration-warning.ts`
+- Modify: `docs/dev/002_development_reward_penalty_log.md` before commit
+
+- [ ] **Step 1: Write error classification helper tests**
+
+Create `apps/ratewise/src/utils/__tests__/errorClassification.test.ts`:
+
+```ts
+import { describe, expect, it } from 'vitest';
+import { classifyUnhandledRejection, isHydrationSuppressionEnabled } from '../errorClassification';
+
+describe('classifyUnhandledRejection', () => {
+  it('classifies chunk load errors before generic fetch errors', () => {
+    expect(
+      classifyUnhandledRejection(new TypeError('Failed to fetch dynamically imported module')),
+    ).toBe('chunk-load');
+  });
+
+  it('classifies verified history endpoint 404 as expected history miss', () => {
+    expect(
+      classifyUnhandledRejection(
+        new Error(
+          'GET https://cdn.jsdelivr.net/gh/haotool/app@data/public/rates/history/2026-05-12.json 404',
+        ),
+      ),
+    ).toBe('expected-history-miss');
+  });
+
+  it('does not classify generic Failed to fetch as expected history miss', () => {
+    expect(classifyUnhandledRejection(new TypeError('Failed to fetch'))).toBe(
+      'generic-fetch-failure',
+    );
+  });
+
+  it('classifies unrelated errors as unknown', () => {
+    expect(classifyUnhandledRejection(new Error('Unexpected application state'))).toBe('unknown');
+  });
+});
+
+describe('isHydrationSuppressionEnabled', () => {
+  it('only enables suppression for explicit non-production diagnostics', () => {
+    expect(isHydrationSuppressionEnabled({ prod: true, flag: 'true' })).toBe(false);
+    expect(isHydrationSuppressionEnabled({ prod: false, flag: 'true' })).toBe(true);
+    expect(isHydrationSuppressionEnabled({ prod: false, flag: undefined })).toBe(false);
+  });
+});
+```
+
+- [ ] **Step 2: Run the new tests and verify they fail**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise exec vitest run src/utils/__tests__/errorClassification.test.ts
+```
+
+Expected: FAIL because `errorClassification.ts` does not exist.
+
+- [ ] **Step 3: Implement `errorClassification.ts`**
+
+Create `apps/ratewise/src/utils/errorClassification.ts`:
+
+```ts
+import { isChunkLoadError } from './chunkLoadRecovery';
+
+export type UnhandledRejectionKind =
+  | 'chunk-load'
+  | 'expected-history-miss'
+  | 'generic-fetch-failure'
+  | 'unknown';
+
+function getErrorMessage(reason: unknown): string {
+  if (reason instanceof Error) {
+    return reason.message;
+  }
+  if (typeof reason === 'string') {
+    return reason;
+  }
+  if (reason && typeof reason === 'object' && 'message' in reason) {
+    const message = (reason as { message: unknown }).message;
+    return typeof message === 'string' ? message : JSON.stringify(reason);
+  }
+  return '';
+}
+
+function isVerifiedHistoryMiss(message: string): boolean {
+  return /\/rates\/history\/[^/\s]+\.json/i.test(message) && /\b404\b/.test(message);
+}
+
+export function classifyUnhandledRejection(reason: unknown): UnhandledRejectionKind {
+  const error = reason instanceof Error ? reason : new Error(getErrorMessage(reason));
+  const message = getErrorMessage(reason);
+
+  if (isChunkLoadError(error)) {
+    return 'chunk-load';
+  }
+
+  if (isVerifiedHistoryMiss(message)) {
+    return 'expected-history-miss';
+  }
+
+  if (message.includes('Failed to fetch')) {
+    return 'generic-fetch-failure';
+  }
+
+  return 'unknown';
+}
+
+export function getUnhandledRejectionMessage(reason: unknown): string {
+  return getErrorMessage(reason);
+}
+
+export function toError(reason: unknown): Error {
+  return reason instanceof Error
+    ? reason
+    : new Error(getErrorMessage(reason) || 'Unhandled rejection');
+}
+
+export function isHydrationSuppressionEnabled(input: {
+  prod: boolean;
+  flag: string | undefined;
+}): boolean {
+  return !input.prod && input.flag === 'true';
+}
+```
+
+- [ ] **Step 4: Replace broad classification in `main.tsx`**
+
+Import helpers:
+
+```ts
+import {
+  classifyUnhandledRejection,
+  getUnhandledRejectionMessage,
+  toError,
+} from './utils/errorClassification';
+```
+
+In the `unhandledrejection` listener, replace manual string classification with:
+
+```ts
+const reason: unknown = event.reason;
+const errorMessage = getUnhandledRejectionMessage(reason);
+const errorObject = toError(reason);
+const rejectionKind = classifyUnhandledRejection(reason);
+
+if (rejectionKind === 'chunk-load') {
+  logger.warn('Chunk load error captured by global handler', { reason: errorMessage });
+  recordPwaDiagnostic('chunk-load-error', errorMessage, 'error');
+  event.preventDefault();
+  void recoverFromChunkLoadError();
+  return;
+}
+
+if (rejectionKind === 'expected-history-miss') {
+  logger.debug('Historical data fetch failed (expected)', { reason: errorMessage });
+  event.preventDefault();
+  return;
+}
+
+if (rejectionKind === 'generic-fetch-failure') {
+  logger.warn('Generic fetch failure captured by global handler', { reason: errorMessage });
+  recordPwaDiagnostic('generic-fetch-failure', errorMessage, 'warn');
+  return;
+}
+
+logger.error('Unhandled promise rejection', errorObject);
+recordPwaDiagnostic('unhandled-rejection', errorMessage || errorObject.message, 'error');
+```
+
+- [ ] **Step 5: Restrict hydration suppression**
+
+In `apps/ratewise/src/suppress-hydration-warning.ts`, import:
+
+```ts
+import { isHydrationSuppressionEnabled } from './utils/errorClassification';
+```
+
+Wrap the existing suppression body:
+
+```ts
+if (
+  typeof window !== 'undefined' &&
+  isHydrationSuppressionEnabled({
+    prod: import.meta.env.PROD,
+    flag: import.meta.env.VITE_SUPPRESS_HYDRATION_WARNINGS,
+  })
+) {
+  // existing suppression body
+}
+```
+
+This keeps an explicit non-production diagnostic escape hatch but prevents production from hiding hydration errors.
+
+- [ ] **Step 6: Run focused tests**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise exec vitest run src/utils/__tests__/errorClassification.test.ts src/utils/__tests__/chunkLoadRecovery.test.ts
+```
+
+Expected: PASS.
+
+- [ ] **Step 7: Run broader app startup tests**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise typecheck
+pnpm --filter @app/ratewise exec vitest run src/__tests__/sw.test.ts src/bootstrap/pwa-recovery-bootstrap.test.ts
+```
+
+Expected: PASS.
+
+- [ ] **Step 8: Update 002 log and commit**
+
+Append:
+
+```markdown
+- 日期：2026-05-12
+- ID：reward-ratewise-error-observability
+- 原因：hydration 與 fetch 類錯誤被全域 suppression 遮蔽
+- 解法：集中錯誤分類並限制 production hydration suppression
+```
+
+Commit:
+
+```bash
+git add apps/ratewise/src/utils/errorClassification.ts \
+  apps/ratewise/src/utils/__tests__/errorClassification.test.ts \
+  apps/ratewise/src/main.tsx \
+  apps/ratewise/src/suppress-hydration-warning.ts \
+  docs/dev/002_development_reward_penalty_log.md
+git commit -m "fix(ratewise): 改善全域錯誤可觀測性
+
+- 將 unhandled rejection 改為集中分類
+- 限制 production hydration suppression 避免遮蔽真錯誤
+
+測試：pnpm --filter @app/ratewise exec vitest run src/utils/__tests__/errorClassification.test.ts src/utils/__tests__/chunkLoadRecovery.test.ts src/__tests__/sw.test.ts src/bootstrap/pwa-recovery-bootstrap.test.ts；pnpm --filter @app/ratewise typecheck"
+```
+
+## Task 3: QA Gate Governance
+
+**Files:**
+
+- Modify: `apps/ratewise/tests/e2e/accessibility.spec.ts`
+- Modify: `apps/ratewise/tests/e2e/offline-pwa.spec.ts`
+- Modify: `apps/ratewise/tests/e2e/trend-chart-latency.spec.ts`
+- Modify: `apps/ratewise/tests/e2e/cloudflare-cache.spec.ts`
+- Create or modify: `.github/workflows/ratewise-production-governance.yml`
+- Modify: `docs/dev/002_development_reward_penalty_log.md` before commit
+
+- [ ] **Step 1: Inventory active skips**
+
+Run:
+
+```bash
+rg -n "test\\.skip|test\\.fixme|describe\\.skip|describe\\.fixme|skipIf" apps/ratewise/tests/e2e apps/ratewise/src
+```
+
+Expected: list includes accessibility, offline PWA, trend latency, production Cloudflare checks, and generated-file conditional skips.
+
+- [ ] **Step 2: Convert accessibility checks from passive warnings to scoped assertions**
+
+In `apps/ratewise/tests/e2e/accessibility.spec.ts`, keep multi-currency scan either runnable or explicitly tagged for a dedicated project. Replace warning-only label check with assertion:
+
+```ts
+expect
+  .soft(hasLabel, `input ${i} should have aria-label, aria-labelledby, or label[for]`)
+  .toBe(true);
+```
+
+Replace skipped button name test with:
+
+```ts
+test('可見按鈕應該有 accessible name', async ({ rateWisePage: page }) => {
+  const buttons = page.locator('button:visible');
+  const buttonCount = await buttons.count();
+
+  for (let i = 0; i < buttonCount; i += 1) {
+    const button = buttons.nth(i);
+    const name = await button.evaluate(
+      (element) => element.getAttribute('aria-label') || element.textContent || '',
+    );
+    expect
+      .soft(name.trim().length, `button ${i} should expose an accessible name`)
+      .toBeGreaterThan(0);
+  }
+});
+```
+
+- [ ] **Step 3: Restore one offline indicator gate**
+
+In `apps/ratewise/tests/e2e/offline-pwa.spec.ts`, unskip the shortest indicator visibility test if it passes with current fixtures. If the existing PWA environment remains unstable, create a component-level Playwright route test instead and leave a comment pointing to the scheduled full PWA gate.
+
+Runnable minimum assertion:
+
+```ts
+test('should show offline indicator when network disconnects', async ({ page }) => {
+  const offlinePage = new OfflinePWAPage(page);
+  await offlinePage.goto();
+  await offlinePage.waitForPrecache();
+  await offlinePage.goOffline();
+  await expect(offlinePage.offlineIndicator).toBeVisible({ timeout: 10_000 });
+  await offlinePage.goOnline();
+});
+```
+
+- [ ] **Step 4: Move trend chart latency into an explicit performance gate**
+
+If the test is stable locally, remove `test.skip` from the trend latency test. If it is not stable in PR CI, keep it behind an env guard:
+
+```ts
+const isPerformanceGate = process.env['RUN_RATEWISE_PERFORMANCE_TESTS'] === 'true';
+
+test.skip(
+  !isPerformanceGate,
+  'Set RUN_RATEWISE_PERFORMANCE_TESTS=true to run trend latency budget',
+);
+```
+
+This is acceptable only if a workflow in this task runs it on schedule.
+
+- [ ] **Step 5: Add scheduled production governance workflow**
+
+Create `.github/workflows/ratewise-production-governance.yml` if no existing workflow owns these gates:
+
+```yaml
+name: RateWise Production Governance
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '17 20 * * *'
+
+jobs:
+  production-governance:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.10.0
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm --filter @app/ratewise exec playwright install --with-deps chromium
+      - run: RUN_PRODUCTION_TESTS=true pnpm --filter @app/ratewise exec playwright test tests/e2e/cloudflare-cache.spec.ts --project=chromium
+      - run: RUN_RATEWISE_PERFORMANCE_TESTS=true pnpm --filter @app/ratewise exec playwright test tests/e2e/trend-chart-latency.spec.ts --project=chromium
+```
+
+- [ ] **Step 6: Run local QA focused checks**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise exec playwright test tests/e2e/accessibility.spec.ts --project=chromium
+```
+
+Expected: PASS. If browser dependencies are missing locally, install with:
+
+```bash
+pnpm --filter @app/ratewise exec playwright install chromium
+```
+
+- [ ] **Step 7: Verify workflow YAML parses**
+
+Run:
+
+```bash
+pnpm exec prettier --check .github/workflows/ratewise-production-governance.yml
+```
+
+Expected: PASS.
+
+- [ ] **Step 8: Update 002 log and commit**
+
+Append:
+
+```markdown
+- 日期：2026-05-12
+- ID：reward-ratewise-qa-gate-governance
+- 原因：使用者可感知功能存在未追蹤 skip/fixme 與手動 production checks
+- 解法：恢復核心 accessibility/offline/performance gate 並加入 scheduled production governance
+```
+
+Commit:
+
+```bash
+git add apps/ratewise/tests/e2e/accessibility.spec.ts \
+  apps/ratewise/tests/e2e/offline-pwa.spec.ts \
+  apps/ratewise/tests/e2e/trend-chart-latency.spec.ts \
+  apps/ratewise/tests/e2e/cloudflare-cache.spec.ts \
+  .github/workflows/ratewise-production-governance.yml \
+  docs/dev/002_development_reward_penalty_log.md
+git commit -m "test(ratewise): 補強生產級 QA 閘門
+
+- 將核心無障礙與離線體驗納入可執行驗證
+- 加入 scheduled production governance workflow 覆蓋 live headers 與效能預算
+
+測試：pnpm --filter @app/ratewise exec playwright test tests/e2e/accessibility.spec.ts --project=chromium；pnpm exec prettier --check .github/workflows/ratewise-production-governance.yml"
+```
+
+## Task 4: Build Reproducibility And Artifact Hygiene
+
+**Files:**
+
+- Modify: `apps/ratewise/package.json`
+- Modify: `apps/ratewise/README.md`
+- Modify: `AGENTS.md`
+- Modify: `CLAUDE.md`
+- Possibly remove from tracking: `apps/ratewise/lighthouse-report.json`, `apps/ratewise/tsconfig.node.tsbuildinfo`, `apps/ratewise/tsconfig.tsbuildinfo`
+- Modify: `docs/dev/002_development_reward_penalty_log.md` before commit
+
+- [ ] **Step 1: Classify tracked artifacts**
+
+Run:
+
+```bash
+git ls-files apps/ratewise | rg '(^|/)(lighthouse-report|tsconfig.*tsbuildinfo|dist|coverage|playwright-report|test-results)'
+```
+
+Expected: currently shows tracked historical artifacts that should be reviewed.
+
+- [ ] **Step 2: Confirm ignored local artifacts**
+
+Run:
+
+```bash
+git status --ignored --short apps/ratewise | sed -n '1,160p'
+```
+
+Expected: local QA artifacts show as ignored, not tracked.
+
+- [ ] **Step 3: Add explicit scripts if missing**
+
+In `apps/ratewise/package.json`, add scripts only if they do not already exist:
+
+```json
+{
+  "scripts": {
+    "refresh:data": "node scripts/prebuild-fetch-rates.mjs && SEO_RATE_EXAMPLES_OPTIONAL=1 node scripts/update-seo-rate-examples.mjs && node scripts/fetch-rating-snapshot.mjs",
+    "generate:deterministic": "node ../../scripts/generate-sitemap-2026.mjs && node scripts/generate-robots-txt.mjs && node scripts/generate-manifest.mjs && node scripts/generate-offline-html.mjs && node scripts/generate-llms-txt.mjs && node scripts/generate-markdown-mirrors.mjs && node scripts/generate-api-json.mjs && node scripts/generate-pair-json.mjs && node scripts/generate-openapi.mjs",
+    "verify:artifacts": "node ../../scripts/verify-ssot-sync.mjs && node ../../scripts/verify-image-resources.mjs && node scripts/verify-seo-ssot.mjs"
+  }
+}
+```
+
+Do not change `prebuild` behavior in the same step unless tests prove the new scripts are equivalent.
+
+- [ ] **Step 4: Document generated artifact policy**
+
+Update `apps/ratewise/README.md` with a short section:
+
+```markdown
+## Generated Artifacts
+
+RateWise separates generated files into three buckets:
+
+- Deterministic generated artifacts: rebuilt from repo SSOT by `pnpm --filter @app/ratewise generate:deterministic`.
+- Live data snapshots: refreshed by `pnpm --filter @app/ratewise refresh:data` and committed only when the task explicitly updates data snapshots.
+- Local QA artifacts: `dist/`, `coverage/`, `playwright-report/`, `test-results/`, Lighthouse reports, and squirrel outputs are local verification outputs and must not be committed.
+```
+
+Mirror the same policy in `AGENTS.md` and `CLAUDE.md` if those files currently define build or artifact policy.
+
+- [ ] **Step 5: Remove historical local artifacts from tracking if approved**
+
+Only remove tracked artifacts that are not used by tests or docs. Use:
+
+```bash
+git rm --cached apps/ratewise/lighthouse-report.json apps/ratewise/tsconfig.node.tsbuildinfo apps/ratewise/tsconfig.tsbuildinfo
+```
+
+Expected: files remain locally if ignored, but are removed from source tracking.
+
+- [ ] **Step 6: Verify scripts**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise run verify:artifacts
+pnpm --filter @app/ratewise typecheck
+```
+
+Expected: PASS.
+
+- [ ] **Step 7: Update 002 log and commit**
+
+Append:
+
+```markdown
+- 日期：2026-05-12
+- ID：reward-ratewise-artifact-governance
+- 原因：build/generated/local QA artifacts 責任混雜且歷史產物污染追蹤
+- 解法：文件化 artifact 分類並建立明確 refresh/generate/verify 指令
+```
+
+Commit:
+
+```bash
+git add apps/ratewise/package.json apps/ratewise/README.md AGENTS.md CLAUDE.md \
+  docs/dev/002_development_reward_penalty_log.md
+git add -u apps/ratewise/lighthouse-report.json apps/ratewise/tsconfig.node.tsbuildinfo apps/ratewise/tsconfig.tsbuildinfo
+git commit -m "docs(ratewise): 建立生成產物治理規範
+
+- 區分 deterministic artifacts、live data snapshots 與 local QA artifacts
+- 補上明確 refresh/generate/verify 指令與文件同步
+
+測試：pnpm --filter @app/ratewise run verify:artifacts；pnpm --filter @app/ratewise typecheck"
+```
+
+## Task 5: Currency Route Architecture Convergence
+
+**Files:**
+
+- Create: `apps/ratewise/src/config/currencyLandingRouteRegistry.ts`
+- Create: `apps/ratewise/src/config/__tests__/currencyLandingRouteRegistry.test.ts`
+- Modify later: `apps/ratewise/src/routes.tsx`
+- Modify later: `apps/ratewise/src/config/seo-paths.ts`
+- Modify: `docs/dev/002_development_reward_penalty_log.md` before commit
+
+- [ ] **Step 1: Write registry consistency tests**
+
+Create `apps/ratewise/src/config/__tests__/currencyLandingRouteRegistry.test.ts`:
+
+```ts
+import { describe, expect, it } from 'vitest';
+import {
+  CURRENCY_LANDING_ROUTES,
+  FORWARD_CURRENCY_LANDING_ROUTES,
+  REVERSE_CURRENCY_LANDING_ROUTES,
+} from '../currencyLandingRouteRegistry';
+
+describe('currencyLandingRouteRegistry', () => {
+  it('contains 17 forward and 17 reverse currency landing routes', () => {
+    expect(FORWARD_CURRENCY_LANDING_ROUTES).toHaveLength(17);
+    expect(REVERSE_CURRENCY_LANDING_ROUTES).toHaveLength(17);
+    expect(CURRENCY_LANDING_ROUTES).toHaveLength(34);
+  });
+
+  it('uses canonical slash-wrapped paths', () => {
+    for (const route of CURRENCY_LANDING_ROUTES) {
+      expect(route.path).toMatch(/^\/[a-z]{3}-[a-z]{3}\/$/);
+      expect(route.amountPathPattern).toBe(`${route.path}:amount/`);
+    }
+  });
+
+  it('does not duplicate canonical paths', () => {
+    const paths = CURRENCY_LANDING_ROUTES.map((route) => route.path);
+    expect(new Set(paths).size).toBe(paths.length);
+  });
+});
+```
+
+- [ ] **Step 2: Run registry tests and verify they fail**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise exec vitest run src/config/__tests__/currencyLandingRouteRegistry.test.ts
+```
+
+Expected: FAIL because registry does not exist.
+
+- [ ] **Step 3: Create registry with existing route metadata**
+
+Create `apps/ratewise/src/config/currencyLandingRouteRegistry.ts`:
+
+```ts
+export type CurrencyLandingDirection = 'foreign-to-twd' | 'twd-to-foreign';
+
+export interface CurrencyLandingRouteDefinition {
+  direction: CurrencyLandingDirection;
+  from: string;
+  to: string;
+  path: `/${string}-${string}/`;
+  amountPathPattern: `/${string}-${string}/:amount/`;
+  entry: string;
+}
+
+const forwardCodes = [
+  'aud',
+  'cad',
+  'chf',
+  'cny',
+  'eur',
+  'gbp',
+  'hkd',
+  'idr',
+  'jpy',
+  'krw',
+  'myr',
+  'nzd',
+  'php',
+  'sgd',
+  'thb',
+  'usd',
+  'vnd',
+] as const;
+
+function pageName(from: string, to: string): string {
+  return `${from.toUpperCase()}To${to.toUpperCase()}`;
+}
+
+export const FORWARD_CURRENCY_LANDING_ROUTES = forwardCodes.map((code) => ({
+  direction: 'foreign-to-twd',
+  from: code.toUpperCase(),
+  to: 'TWD',
+  path: `/${code}-twd/`,
+  amountPathPattern: `/${code}-twd/:amount/`,
+  entry: `src/pages/${pageName(code, 'twd')}.tsx`,
+})) satisfies readonly CurrencyLandingRouteDefinition[];
+
+export const REVERSE_CURRENCY_LANDING_ROUTES = forwardCodes.map((code) => ({
+  direction: 'twd-to-foreign',
+  from: 'TWD',
+  to: code.toUpperCase(),
+  path: `/twd-${code}/`,
+  amountPathPattern: `/twd-${code}/:amount/`,
+  entry: `src/pages/${pageName('twd', code)}.tsx`,
+})) satisfies readonly CurrencyLandingRouteDefinition[];
+
+export const CURRENCY_LANDING_ROUTES = [
+  ...FORWARD_CURRENCY_LANDING_ROUTES,
+  ...REVERSE_CURRENCY_LANDING_ROUTES,
+] as const;
+```
+
+- [ ] **Step 4: Run registry tests**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise exec vitest run src/config/__tests__/currencyLandingRouteRegistry.test.ts
+```
+
+Expected: PASS.
+
+- [ ] **Step 5: Wire registry into tests before changing route generation**
+
+Add tests that compare registry paths to existing `CURRENCY_SEO_PATHS` and `REVERSE_CURRENCY_SEO_PATHS` in `seo-paths.ts`. This creates a safety net before replacing manual route lists.
+
+Test snippet:
+
+```ts
+import { CURRENCY_SEO_PATHS, REVERSE_CURRENCY_SEO_PATHS } from '../seo-paths';
+
+it('matches existing SEO currency paths', () => {
+  expect(FORWARD_CURRENCY_LANDING_ROUTES.map((route) => route.path)).toEqual([
+    ...CURRENCY_SEO_PATHS,
+  ]);
+  expect(REVERSE_CURRENCY_LANDING_ROUTES.map((route) => route.path)).toEqual([
+    ...REVERSE_CURRENCY_SEO_PATHS,
+  ]);
+});
+```
+
+- [ ] **Step 6: Defer route generation refactor to a separate PR**
+
+Do not replace all `routes.tsx` manual currency entries in the same commit. The first architecture commit only introduces the registry and parity tests. A later PR can change route generation with much lower risk.
+
+- [ ] **Step 7: Update 002 log and commit**
+
+Append:
+
+```markdown
+- 日期：2026-05-12
+- ID：reward-ratewise-currency-route-registry
+- 原因：幣別 landing routes 與 SEO paths 手寫展開造成長期漂移風險
+- 解法：建立 registry 與 parity tests，先保證既有 URL 不變
+```
+
+Commit:
+
+```bash
+git add apps/ratewise/src/config/currencyLandingRouteRegistry.ts \
+  apps/ratewise/src/config/__tests__/currencyLandingRouteRegistry.test.ts \
+  docs/dev/002_development_reward_penalty_log.md
+git commit -m "refactor(ratewise): 建立幣別路由 registry 基線
+
+- 新增幣別 landing route registry
+- 補上 SEO path parity tests 保證 canonical URL 不變
+
+測試：pnpm --filter @app/ratewise exec vitest run src/config/__tests__/currencyLandingRouteRegistry.test.ts"
+```
+
+## Final Verification
+
+- [ ] **Step 1: Run RateWise core gates**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise lint
+pnpm --filter @app/ratewise typecheck
+pnpm --filter @app/ratewise test
+pnpm --filter @app/ratewise build
+```
+
+Expected: all PASS.
+
+- [ ] **Step 2: Run changed E2E gates**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise exec playwright test tests/e2e/accessibility.spec.ts --project=chromium
+```
+
+Expected: PASS.
+
+- [ ] **Step 3: Check root hygiene**
+
+Run:
+
+```bash
+git status --short
+git status --ignored --short | sed -n '1,160p'
+```
+
+Expected: no root-level QA screenshots or unexpected tracked generated drift. Ignored QA artifacts may exist under ignored paths.
+
+- [ ] **Step 4: Confirm documentation sync**
+
+Run:
+
+```bash
+rg -n "internal route|generated artifact|QA gate|production governance|prebuild|refresh:data|generate:deterministic" README.md AGENTS.md CLAUDE.md apps/ratewise/README.md
+```
+
+Expected: route, QA, and generated artifact policies are documented consistently wherever changed.
+
+- [ ] **Step 5: Prepare PR summary**
+
+Use this PR summary structure:
+
+```markdown
+## Summary
+
+- Restores RateWise delivery baseline by fixing lint warnings.
+- Removes internal-only pages from production route/prerender surface.
+- Improves global error classification and production observability.
+- Adds or restores product-level QA gates for accessibility, offline, live headers, and performance.
+- Documents generated artifact policy and introduces currency route registry parity tests.
+
+## Tests
+
+- pnpm --filter @app/ratewise lint
+- pnpm --filter @app/ratewise typecheck
+- pnpm --filter @app/ratewise test
+- pnpm --filter @app/ratewise build
+- pnpm --filter @app/ratewise exec playwright test tests/e2e/accessibility.spec.ts --project=chromium
+```
diff --git a/docs/superpowers/plans/2026-05-13-ratewise-fallback-rate-snapshot.md b/docs/superpowers/plans/2026-05-13-ratewise-fallback-rate-snapshot.md
new file mode 100644
index 000000000..0e71da576
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-13-ratewise-fallback-rate-snapshot.md
@@ -0,0 +1,126 @@
+# RateWise Fallback Rate Snapshot Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 讓 RateWise build 保持可重現，同時用明確指令與排程持續更新 runtime fallback 匯率快照。
+
+**Architecture:** `prebuild` 只產生 deterministic artifacts，不抓取會漂移的 live market data。`refresh:fallback-rates` 才允許寫入 tracked `build-time-rates.json`，runtime 離線 fallback 讀同一份 generated snapshot，避免硬編碼匯率漂移。
+
+**Tech Stack:** pnpm scripts, Node.js 24 ESM scripts, Vitest, GitHub Actions.
+
+---
+
+### Task 1: 鎖定 package script 契約
+
+**Files:**
+
+- Modify: `apps/ratewise/src/config/__tests__/build-scripts.test.ts`
+- Modify: `apps/ratewise/package.json`
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+expect(packageJson.scripts?.['prebuild']).toBe(
+  'pnpm generate:deterministic && pnpm verify:artifacts && pnpm refresh:rating',
+);
+expect(packageJson.scripts?.['refresh:rates']).toBe('node scripts/prebuild-fetch-rates.mjs');
+expect(packageJson.scripts?.['refresh:fallback-rates']).toBe(
+  'RATEWISE_WRITE_FALLBACK_RATES=1 node scripts/prebuild-fetch-rates.mjs',
+);
+expect(packageJson.scripts?.['refresh:data']).toBe(
+  'pnpm refresh:fallback-rates && pnpm update:seo-examples && pnpm refresh:rating',
+);
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm --filter @app/ratewise vitest run src/config/__tests__/build-scripts.test.ts`
+
+- [ ] **Step 3: Write minimal implementation**
+
+Update `apps/ratewise/package.json` scripts only; do not add dependencies.
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm --filter @app/ratewise vitest run src/config/__tests__/build-scripts.test.ts`
+
+### Task 2: 讓 fallback snapshot 寫入變成顯式行為
+
+**Files:**
+
+- Modify: `apps/ratewise/scripts/prebuild-fetch-rates.mjs`
+- Modify: `apps/ratewise/src/config/__tests__/build-scripts.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+expect(prebuildRatesScript).toContain(
+  "const SHOULD_WRITE_FALLBACK_SNAPSHOT = process.env.RATEWISE_WRITE_FALLBACK_RATES === '1';",
+);
+expect(prebuildRatesScript).toContain('if (SHOULD_WRITE_FALLBACK_SNAPSHOT)');
+expect(prebuildRatesScript).toContain("rates.source === 'Default fallback rates'");
+expect(prebuildRatesScript).toContain("fs.writeFileSync(BUILD_TIME_RATES_PATH, payload, 'utf-8');");
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm --filter @app/ratewise vitest run src/config/__tests__/build-scripts.test.ts`
+
+- [ ] **Step 3: Write minimal implementation**
+
+Gate `BUILD_TIME_RATES_PATH` writes behind `RATEWISE_WRITE_FALLBACK_RATES=1` and fail snapshot updates when the data is script default fallback.
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm --filter @app/ratewise vitest run src/config/__tests__/build-scripts.test.ts`
+
+### Task 3: 收斂 runtime fallback SSOT
+
+**Files:**
+
+- Modify: `apps/ratewise/src/services/exchangeRateService.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+Extend the existing static build script test to assert `exchangeRateService.ts` no longer declares `const FALLBACK_RATES`.
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm --filter @app/ratewise vitest run src/config/__tests__/build-scripts.test.ts`
+
+- [ ] **Step 3: Write minimal implementation**
+
+Use `getBuildTimeExchangeRates()` for the final offline fallback response instead of the hardcoded rate map.
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm --filter @app/ratewise vitest run src/config/__tests__/build-scripts.test.ts`
+
+### Task 4: 同步排程與文件
+
+**Files:**
+
+- Modify: `.github/workflows/update-seo-rate-examples.yml`
+- Modify: `AGENTS.md`
+- Modify: `CLAUDE.md`
+- Modify: `apps/ratewise/README.md`
+- Modify: `docs/dev/002_development_reward_penalty_log.md`
+
+- [ ] **Step 1: Update the daily workflow**
+
+Run `pnpm --filter @app/ratewise refresh:fallback-rates` before `update-seo-rate-examples.mjs` and add `build-time-rates.json` to `add-paths`.
+
+- [ ] **Step 2: Update docs**
+
+Document that `prebuild` is deterministic, `refresh:data` is an explicit live-data refresh, and committed fallback snapshots are updated by `refresh:fallback-rates`.
+
+- [ ] **Step 3: Verify**
+
+Run:
+
+```bash
+pnpm --filter @app/ratewise vitest run src/config/__tests__/build-scripts.test.ts
+pnpm --filter @app/ratewise typecheck
+pnpm --filter @app/ratewise build
+git diff --check
+```
diff --git a/docs/superpowers/plans/2026-06-12-ratewise-ux-phase1.md b/docs/superpowers/plans/2026-06-12-ratewise-ux-phase1.md
new file mode 100644
index 000000000..e95080fee
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-12-ratewise-ux-phase1.md
@@ -0,0 +1,229 @@
+# RateWise 2026 UX Phase 1 實作計畫
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 將單幣別主流程收斂為 2026 Hero + inline numpad + Trust Line，消除 Modal 閘門與首屏資訊重複，使 TTTQ P75 ≤ 2.0s、MTTQ ≤ 3 taps。
+
+**Architecture:** 抽出 `CalculatorKeypad` 核心 → `InlineNumpad` 殼層錨定 BottomNav；`SingleConverter` 重排為 `ConversionHero`（HeroStory + Stack + ThumbBar）；`TrustLine` 合併資料來源；token 層移除 swap `micro:hidden` 與 trust `nano:hidden`。
+
+**Tech Stack:** React 19、TypeScript、Vitest、Playwright、`design-tokens.ts` SSOT、現有 `useCurrencyConverter` / `CalculatorKeyboard` 模式。
+
+**設計 SSOT:** `docs/superpowers/specs/2026-06-12-ratewise-2026-product-ux-spec.md`
+
+---
+
+### Task 1: 抽出 CalculatorKeypad 核心
+
+**Files:**
+
+- Create: `apps/ratewise/src/features/calculator/constants/keyboard-layout.ts`
+- Create: `apps/ratewise/src/features/calculator/components/CalculatorKeypad.tsx`
+- Modify: `apps/ratewise/src/features/calculator/components/CalculatorKeyboard.tsx`
+- Test: `apps/ratewise/src/features/calculator/components/__tests__/CalculatorKeypad.test.tsx`
+
+- [ ] **Step 1: 將 KEYBOARD_LAYOUT 移至 keyboard-layout.ts**
+
+從 `CalculatorKeyboard.tsx` 抽出 `KEYBOARD_LAYOUT` 常數至新檔並 export。
+
+- [ ] **Step 2: 建立 CalculatorKeypad（無 Portal / 無 backdrop）**
+
+實作 `CalculatorKeypadProps`：`isActive`, `initialValue`, `commitStrategy: 'confirm'`, `onCommit`, `displayMode`, `density`。
+
+- [ ] **Step 3: 重構 CalculatorKeyboard 為薄包裝**
+
+`CalculatorKeyboard` 僅保留 SheetShell + `CalculatorKeypad`；既有 E2E `calculator-fix-verification.spec.ts` 必須仍通過。
+
+- [ ] **Step 4: 執行測試**
+
+Run: `pnpm --filter @app/ratewise test -- CalculatorKeypad CalculatorKeyboard`
+Expected: PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/ratewise/src/features/calculator/
+git commit -m "refactor(ratewise): 抽出 CalculatorKeypad 供 inline numpad 共用"
+```
+
+---
+
+### Task 2: InlineNumpad + useAmountNumpad
+
+**Files:**
+
+- Create: `apps/ratewise/src/features/calculator/components/InlineNumpad.tsx`
+- Create: `apps/ratewise/src/features/ratewise/hooks/useAmountNumpad.ts`
+- Modify: `apps/ratewise/src/config/design-tokens.ts`（`inlineNumpadTokens`）
+- Modify: `apps/ratewise/src/features/ratewise/hooks/useCalculatorModal.ts`（re-export 別名）
+- Test: `apps/ratewise/src/features/ratewise/hooks/__tests__/useAmountNumpad.test.ts`
+
+- [ ] **Step 1: 新增 inlineNumpadTokens**
+
+```typescript
+export const inlineNumpadTokens = {
+  height: { default: 320, compact: 260 },
+  positionClass: 'fixed inset-x-0 z-20 md:static md:z-auto',
+  bottomOffset: 'bottom-[calc(56px+env(safe-area-inset-bottom,0px))]',
+  paddingBottom: 'pb-[env(safe-area-inset-bottom,0px)]',
+  contentPaddingActive: 'pb-[calc(320px+56px+env(safe-area-inset-bottom,0px))]',
+} as const;
+```
+
+- [ ] **Step 2: 實作 useAmountNumpad**
+
+升級 `useCalculatorModal` API：`activateField` / `deactivate` / `commit`；預設 `commitStrategy: 'confirm'`。
+
+- [ ] **Step 3: 實作 InlineNumpad**
+
+`fixed` 於 BottomNav 上方；無 `useBodyScrollLock`；`onDismiss` 關閉不寫回。
+
+- [ ] **Step 4: 撰寫 hook 測試**
+
+覆蓋 open → confirm → close 與 field 切換。
+
+- [ ] **Step 5: 執行測試**
+
+Run: `pnpm --filter @app/ratewise test -- useAmountNumpad InlineNumpad`
+Expected: PASS
+
+---
+
+### Task 3: ConversionHero 版面重排
+
+**Files:**
+
+- Create: `apps/ratewise/src/features/ratewise/components/ConversionHero.tsx`
+- Create: `apps/ratewise/src/features/ratewise/components/HeroStoryBand.tsx`
+- Create: `apps/ratewise/src/features/ratewise/components/TrustLine.tsx`
+- Create: `apps/ratewise/src/features/ratewise/components/ThumbActionBar.tsx`
+- Modify: `apps/ratewise/src/features/ratewise/RateWise.tsx`
+- Modify: `apps/ratewise/src/features/ratewise/components/SingleConverter.tsx`
+- Test: `apps/ratewise/src/features/ratewise/components/__tests__/SingleConverter.input.test.tsx`
+
+- [ ] **Step 1: 建立 TrustLine**
+
+合併台銀連結 + `formattedLastUpdate` + `ExchangeShopBadge` 條件分支；`data-testid="rate-trust-line"`。
+
+- [ ] **Step 2: 建立 HeroStoryBand**
+
+主匯率 + 倒數 + 可點 sparkline 摘要（Δ%）；點擊預留 `onOpenRateDetail` callback。
+
+- [ ] **Step 3: 建立 ThumbActionBar**
+
+三鍵：記錄、匯率來源、更多；取代 `SingleConverter` 全寬 `addToHistory`。
+
+- [ ] **Step 4: ConversionHero 組裝**
+
+props 與現有 `SingleConverter` 相同；`RateWise` 改渲染 `ConversionHero`。
+
+- [ ] **Step 5: 移除 RateWise 外層 data-source section**
+
+信任資訊僅經 `TrustLine` 輸出。
+
+- [ ] **Step 6: 執行測試與 build**
+
+Run: `pnpm --filter @app/ratewise test && pnpm build:ratewise`
+Expected: PASS
+
+---
+
+### Task 4: Swap 與 quick amount 斷點修復
+
+**Files:**
+
+- Modify: `apps/ratewise/src/config/design-tokens.ts`
+- Modify: `apps/ratewise/src/features/ratewise/components/SingleConverter.tsx`（或 ConversionHero）
+
+- [ ] **Step 1: 移除 swap micro:hidden**
+
+`singleConverterLayoutTokens.swap.visibility` 改為空字串或 `always:visible`。
+
+- [ ] **Step 2: 放寬 from quick amounts 隱藏**
+
+`fromVisibility` 改為摺疊進 MoreSheet 前，先改為全斷點可見（或僅 `nano` 改橫向捲動）。
+
+- [ ] **Step 3: E2E 驗證 390px swap 可見**
+
+Run: `pnpm --filter @app/ratewise test:e2e --grep swap`
+Expected: swap button visible on mobile viewport
+
+---
+
+### Task 5: 趨勢圖預設收合
+
+**Files:**
+
+- Modify: `apps/ratewise/src/features/ratewise/components/SingleConverter.tsx`
+- Test: 既有 trend chart 相關測試
+
+- [ ] **Step 1: 新增 `trendExpanded` state（預設 false）**
+
+Hero 僅顯示 `changePercent` 摘要行；展開才 mount lazy `MiniTrendChart`。
+
+- [ ] **Step 2: 確認 idle 載入僅在 expanded 時觸發**
+
+避免首屏 fetch 30 日資料。
+
+- [ ] **Step 3: 執行測試**
+
+Run: `pnpm --filter @app/ratewise test`
+Expected: PASS
+
+---
+
+### Task 6: 歷史自動記錄
+
+**Files:**
+
+- Modify: `apps/ratewise/src/features/ratewise/hooks/useCurrencyConverter.ts`
+- Modify: `apps/ratewise/src/i18n/locales/zh-TW.ts`（修正 `noHistoryHint` 與行為一致）
+
+- [ ] **Step 1: 實作 debounced auto-history（2.5s）**
+
+金額穩定且 `amount > 0` 時寫入；去重鍵 `(from, to, amount, rateType, sourceKind, providerId)`。
+
+- [ ] **Step 2: Thumb「＋記錄」改為手動立即寫入**
+
+保留 `addToHistory` 供顯式觸發。
+
+- [ ] **Step 3: 單元測試去重邏輯**
+
+---
+
+### Task 7: Changeset 與文件
+
+**Files:**
+
+- Create: `.changeset/ratewise-2026-ux-phase1.md`
+- Modify: `docs/dev/002_development_reward_penalty_log.md`（commit 時）
+
+- [ ] **Step 1: 建立 changeset**
+
+bump: **minor** — 使用者可感知的首屏換算與輸入體驗升級。
+
+- [ ] **Step 2: 更新 002 紀錄**
+
+---
+
+## 後續 Phase（見規格 §4，本計畫不展開逐步任務）
+
+- Task 8+: `CurrencyPickerSheet` + `recentCurrencies`
+- Task 9+: `HomepageSEOSection` 折疊收斂
+- Task 10+: `MultiConverter` description + 頁面級 RateSelector
+- Task 11+: i18n 術語口語化
+
+---
+
+## Self-Review（規格覆蓋）
+
+| 規格 ID              | 本計畫 Task |
+| -------------------- | ----------- |
+| P1-01 Inline Numpad  | Task 1–2    |
+| P1-03 Swap           | Task 4      |
+| P1-04 Hero + Trust   | Task 3      |
+| P1-06 趨勢收合       | Task 5      |
+| P1-07 歷史           | Task 6      |
+| P1-05 Currency Sheet | 後續 Phase  |
+| P1-08 SEO 去重       | 後續 Phase  |
+| P1-09 術語           | 後續 Phase  |
+| P1-10 多幣           | 後續 Phase  |
diff --git a/docs/superpowers/specs/2026-05-12-ratewise-production-governance-design.md b/docs/superpowers/specs/2026-05-12-ratewise-production-governance-design.md
new file mode 100644
index 000000000..76d78a570
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-12-ratewise-production-governance-design.md
@@ -0,0 +1,243 @@
+# RateWise Production Governance Design
+
+> **Status (2026-05-12):** Draft for review. This spec defines the governance blueprint only.
+> Implementation plans must be written after maintainer approval.
+
+## Goal
+
+把 RateWise 從「功能多、測試多，但仍有明顯產品治理缺口」收斂成可穩定交付的生產級前端產品。第一輪不追求大改版，而是先清掉會破壞交付信任的公開表面、錯誤遮蔽、QA gate、build drift 與架構漂移。
+
+## Current Evidence
+
+- `pnpm --filter @app/ratewise typecheck` 通過。
+- `pnpm --filter @app/ratewise lint` 失敗，因 4 個 warning 被 `--max-warnings 0` 擋下。
+- 公開路由含內部展示與測試頁：`/theme-showcase`、`/color-scheme`、`/update-prompt-test`、`/ui-showcase`。
+- `APP_ONLY_PRERENDER_PATHS` 目前包含所有 app-only paths，導致內部展示/測試頁也進入 prerender set。
+- `suppress-hydration-warning.ts` 全域覆寫 `console.error` 並壓制 hydration 類錯誤。
+- `main.tsx` 對 `history`、`404`、`Failed to fetch` 的 unhandled rejection 判斷過寬。
+- 多個使用者可感知 E2E 被 `skip` / `fixme`，包含多幣別 accessibility、button accessible name、offline indicator 與 trend chart latency。
+- Cloudflare production headers/cache 測試預設 skip，僅在 `RUN_PRODUCTION_TESTS=true` 時執行。
+- build/prebuild 同時負責抓資料、產 SEO 檔、產 API metadata、產 OpenAPI、抓 rating snapshot；目前工作區已有 generated data drift。
+- 幣別 landing page 與 route mapping 大量手寫，長期有 SEO / canonical / schema 漂移風險。
+
+## Design Principles
+
+- 先修交付信任，再修優雅性：lint、公開表面、錯誤可觀測性與 QA gate 優先於架構整理。
+- 生產產品不公開內部工具：展示頁、測試頁、設計比較頁不得直接出現在正式路由或 prerender set。
+- 不用「吞錯」換取乾淨 console：可預期錯誤要被分類、記錄與測試，不應全域遮蔽整類錯誤。
+- QA gate 必須覆蓋使用者可感知功能：離線、無障礙、趨勢圖載入、部署 headers/cache 都是產品行為，不是可永久跳過的測試。
+- build 必須可審核：生成檔要區分 deterministic artifact、live data snapshot 與本地暫存。
+- 架構收斂只服務明確風險：先資料化路由與幣別頁，避免一次性大重構。
+
+## Workstream 1: Product Surface Governance
+
+### Problem
+
+內部頁面目前存在於 production route table。雖然部分路徑被 robots disallow，但使用者仍可直接訪問，且 prerender path 把內部頁也納入建置輸出。這讓公開產品看起來像仍在開發中的 demo site。
+
+### Target Design
+
+把路由分成三類：
+
+- Public indexable routes：首頁、內容頁、幣別 landing pages、合法的金額 landing pages。
+- Public noindex app routes：`/multi/`、`/favorites/`、`/settings/`，這些是使用者功能頁，可訪問但不索引。
+- Internal-only routes：`/theme-showcase/`、`/color-scheme/`、`/update-prompt-test/`、`/ui-showcase/`，正式 build 不註冊、不 prerender、不出現在 known route set。
+
+Internal-only routes 的保留方式：
+
+- 開發環境可用，方便設計與 PWA prompt 驗證。
+- production build 預設不可訪問，直接落到 404。
+- 若未來需要 staging preview，可用明確 env flag 開啟，例如 `VITE_ENABLE_INTERNAL_ROUTES=true`，但 production env 不設定。
+
+### Acceptance Criteria
+
+- Production route table 不含 internal-only routes。
+- `PRERENDER_PATHS` 不含 internal-only routes。
+- robots/sitemap/known route tests 驗證 internal-only routes 不在公開 surface。
+- 開發模式仍可選擇性開啟內部工具，不影響設計工作。
+
+## Workstream 2: Error Observability And Hydration Policy
+
+### Problem
+
+目前全域 suppression 讓 hydration mismatch、部分 unhandled rejection 與 fetch failure 變得不可見。這能讓 console 看起來乾淨，但會讓真正的 UI mismatch、資料 API 故障或 chunk 問題更難被發現。
+
+### Target Design
+
+建立明確錯誤分類：
+
+- Hydration mismatch：只允許針對已知、可證明無害的位置用局部 `suppressHydrationWarning` 或修正 SSR/client data source。
+- Chunk load failure：維持現有 recovery，但要記錄 diagnostic event，且測試它不吞一般 fetch error。
+- Historical rate missing：只在錯誤來源可驗證為 history endpoint 且 HTTP status 符合預期時分類為 expected。
+- Generic fetch failure：不可被 `Failed to fetch` 字串直接吞掉，必須記錄為 warn/error。
+
+`suppress-hydration-warning.ts` 的目標狀態：
+
+- 移除全域 `console.error` 覆寫，或縮到只在 test/dev diagnostic mode 啟用。
+- production 不阻止 hydration error 上報。
+- 對已知 mismatch 改由元件層處理，例如 footer 年份、build time、使用者 locale。
+
+### Acceptance Criteria
+
+- 沒有 production-only 全域 `console.error` monkey patch。
+- `unhandledrejection` 測試覆蓋 chunk error、history 404、generic fetch failure 三類。
+- Generic `Failed to fetch` 不會被分類成 expected historical data error。
+- Sentry/diagnostics 能接到真正未處理錯誤，不被全域 suppression 攔截。
+
+## Workstream 3: QA Gates And Release Confidence
+
+### Problem
+
+目前 unit 覆蓋很多，但數個產品級 E2E 被 skip/fixme。這表示 CI 綠燈不等於使用者關鍵體驗可靠。
+
+### Target Design
+
+把 QA gate 分三層：
+
+- Fast local gate：`typecheck`、`lint`、核心 Vitest、受影響檔案 tests。
+- PR gate：RateWise build、核心 E2E smoke、accessibility smoke、PWA app shell smoke。
+- Scheduled / release gate：live production headers/cache、offline PWA full scenario、Lighthouse smoke、squirrel live audit。
+
+Skip/fixme 治理規則：
+
+- 任何 `test.skip` / `test.fixme` 必須有 issue 或 plan task 對應。
+- 使用者可感知功能不得永久 skip；若 CI 不穩，改成隔離 project、穩定 fixture 或 scheduled gate。
+- Accessibility 測試不能只 `console.warn`，核心規則要有 assertion。
+
+### Acceptance Criteria
+
+- `pnpm --filter @app/ratewise lint` 通過且 README 指標可信。
+- 多幣別 accessibility 不再是 untracked `fixme`。
+- Button accessible name 測試不是永久 skip；若規則過嚴，改成符合 WCAG 的 scoped assertion。
+- Offline indicator 至少有一條可跑的 E2E 或 component+browser integration gate。
+- Trend chart latency 有明確 performance budget test；若只適合 nightly，納入 scheduled gate。
+- Production headers/cache 測試有 release 或 scheduled workflow 執行，不只靠手動 env。
+
+## Workstream 4: Build Reproducibility And Artifact Hygiene
+
+### Problem
+
+`prebuild` 責任過重，混合 deterministic generation、live data fetch、SEO mirror、OpenAPI 與 rating snapshot。這讓 build 結果容易跟網路狀態、時間與資料源綁在一起，也讓 generated drift 常態化。
+
+### Target Design
+
+把產物分成三類：
+
+- Deterministic generated artifacts：manifest、offline HTML、llms text、markdown mirrors、OpenAPI、API metadata。這些應可由 repo SSOT 穩定重建。
+- Live data snapshots：build-time rates、SEO rate examples、rating snapshot。這些允許漂移，但必須有明確 refresh command 與 commit policy。
+- Local QA artifacts：dist、coverage、playwright-report、test-results、lighthouse reports、squirrel output。這些不應進入 source tracking。
+
+Build command 分層：
+
+- `prebuild` 只做 production build 必要的 deterministic steps。
+- `refresh:data` 或既有 schedule scripts 負責 live data snapshots。
+- `verify:artifacts` 檢查 deterministic generated artifacts 是否同步。
+- Release flow 明確說明哪些 generated drift 應 commit、哪些應 restore。
+
+### Acceptance Criteria
+
+- generated data drift 有明確來源與處理規則。
+- `prebuild` 不因可選外部 API 失敗造成不可預期 diff。
+- repo 不追蹤新的 local QA artifacts。
+- 已追蹤但不該追蹤的 historical artifacts 有清理 plan，例如 `lighthouse-report.json`、`tsconfig*.tsbuildinfo`。
+- README / AGENTS / CLAUDE 對 build 與 generated artifact policy 一致。
+
+## Workstream 5: Architecture Convergence
+
+### Problem
+
+幣別 landing pages、route records、SEO paths 與 amount paths 目前有大量手寫展開。這在小規模時可接受，但現在有 34 個幣別方向頁與大量金額路由，長期容易造成新增幣別時漏改頁面、sitemap、prerender、canonical 或 JSON-LD。
+
+### Target Design
+
+建立幣別頁 route registry 作為單一來源：
+
+- `currencyLandingRouteRegistry` 描述方向、from/to currency、page component import、entry path、canonical base path、indexable amounts。
+- `routes.tsx` 從 registry 生成 currency landing routes。
+- `seo-paths.ts` 從同一份 registry 或 shared config 產生 currency SEO paths 與 amount paths。
+- 單一 `CurrencyLandingPage` 承接大多數頁面內容；個別幣別只保留必要 copy override。
+
+收斂順序：
+
+- 第一階段只新增 registry 與 tests，不一次刪完所有頁面檔。
+- 第二階段把重複 route/path 生成改成 registry-driven。
+- 第三階段再評估是否移除 34 個 thin wrapper page files。
+
+### Acceptance Criteria
+
+- 新增幣別方向時只需改 registry 與必要文案，不需手動同步 3 到 5 個清單。
+- `routes.tsx` 不再手寫所有 `createLazyRoute('/xxx-twd')` 與 `:amount` 變體。
+- SEO path tests 保證 sitemap、prerender、known routes 與 route registry 一致。
+- 不改變既有 canonical URLs。
+
+## Rollout Strategy
+
+Phase 0：Baseline cleanup。
+
+- 修復現有 lint warnings。
+- 記錄並確認目前 generated drift 的處理方式。
+- 不改行為，只取得可交付 baseline。
+
+Phase 1：公開表面收斂。
+
+- 移除 production internal routes。
+- 調整 `APP_ONLY_PATHS` / `PRERENDER_PATHS`。
+- 補 route surface tests。
+
+Phase 2：錯誤可觀測性。
+
+- 收斂 hydration suppression。
+- 精準化 unhandled rejection 分類。
+- 補 diagnostics tests。
+
+Phase 3：QA gate 補強。
+
+- 處理 skip/fixme。
+- 將 live production tests 放入 scheduled 或 release gate。
+- 補 accessibility/offline/trend chart 可靠 gate。
+
+Phase 4：build artifact 治理。
+
+- 拆分 deterministic generation 與 live data refresh。
+- 清理 historical artifacts。
+- 同步 README / AGENTS / CLAUDE。
+
+Phase 5：架構收斂。
+
+- 建立 currency landing route registry。
+- route 與 SEO paths 逐步改為 registry-driven。
+- 視風險決定是否移除 thin wrapper page files。
+
+## Non-Goals
+
+- 不在第一輪重新設計 UI。
+- 不在第一輪改品牌、網域或資料來源策略。
+- 不在第一輪重寫 PWA/service worker 架構。
+- 不在第一輪引入新 framework。
+- 不為了架構漂亮而改動所有幣別頁文案。
+- 不在未確認 release policy 前刪除任何使用者可見公開 SEO URL。
+
+## Verification Matrix
+
+| Workstream               | Required Verification                                                               |
+| ------------------------ | ----------------------------------------------------------------------------------- |
+| Product surface          | route tests、sitemap/prerender tests、production build smoke                        |
+| Error observability      | Vitest for error classification、browser console smoke、diagnostic event assertions |
+| QA gates                 | lint、typecheck、targeted Vitest、targeted Playwright、scheduled live tests         |
+| Build reproducibility    | artifact sync tests、git status after build、generated drift policy check           |
+| Architecture convergence | registry consistency tests、canonical URL snapshot tests、route generation tests    |
+
+## Documentation Updates
+
+以下變更需要同步文件：
+
+- 公開路由與 internal route policy：`README.md`、`AGENTS.md`、`CLAUDE.md`。
+- QA gate 或 CI workflow 變更：`AGENTS.md`、`CLAUDE.md`、相關 workflow 註解。
+- generated artifact policy：`README.md`、`AGENTS.md`、`CLAUDE.md`。
+- 長期架構決策：本 spec 與後續 implementation plan。
+
+## Open Decision For Maintainer
+
+建議採用此順序：Phase 0 → Phase 1 → Phase 2 → Phase 3 → Phase 4 → Phase 5。
+
+理由是 Phase 0/1/2 直接影響交付可信度與公開產品面，風險最低、收益最高；Phase 5 屬長期維護收益，應等品質 gate 穩定後再做。
diff --git a/docs/superpowers/specs/2026-06-12-ratewise-2026-product-ux-spec.md b/docs/superpowers/specs/2026-06-12-ratewise-2026-product-ux-spec.md
new file mode 100644
index 000000000..7fec5d7dc
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-12-ratewise-2026-product-ux-spec.md
@@ -0,0 +1,322 @@
+# RateWise 2026 產品級 UX 規格（韓式 Fintech 對標）
+
+> **狀態**：Active（設計 SSOT）  
+> **建立日期**：2026-06-12  
+> **適用範圍**：`apps/ratewise/` 單幣別主流程、多幣別差異化、首頁 IA、Settings a11y  
+> **產品北極星**：`DESIGN.md` — **The Quiet Exchange Desk**  
+> **審查依據**：20 線並行 UX 審查（2026-06）、`docs/prompt/UIUX.md`、`docs/dev/044_ratewise_uiux_token_refactor_spec.md`  
+> **關聯實作計畫**：`docs/superpowers/plans/2026-06-12-ratewise-ux-phase1.md`（Phase 1 任務拆解）
+
+---
+
+## 0. 執行摘要
+
+### 現況定位
+
+RateWise 在**工程與資料 SSOT**（三態匯率、雙向換算、OpenData、PWA、design-tokens）上已達企業級，但使用者體感仍是「精緻 PWA 工具站」，尚未達 **Toss / Wowpass 級 native 產品感**。
+
+| 維度                 | 現況評分                 | 2026 目標      |
+| -------------------- | ------------------------ | -------------- |
+| 綜合韓式體驗         | **7.1–7.4 / 10**         | **≥ 8.5**      |
+| Toss「無需解釋」     | **5 / 10**               | **≥ 8**        |
+| 單幣輸入效率（手機） | **6+ tap**（Modal 路徑） | **≤ 3 tap**    |
+| 首屏資訊密度         | 過高、重複               | 7 項唯一資訊集 |
+| TDS / DS 一致性      | **62 / 100**             | **≥ 85**       |
+
+### 核心痛點（使用者主訴驗證）
+
+**單幣別主路徑過長**：金額欄為 `<button>` → 必開 `CalculatorKeyboard` Bottom Sheet → 按 `=` 才寫回 → 雖有 `useCurrencyConverter` 即時換算，**UI 被 Modal 閘門阻斷**。
+
+同時首屏資訊**重複雜亂**：雙輸入、雙 quick amounts、匯率卡（RateSelector + 雙向匯率 + 趨勢圖）、全寬「加入歷史」、SEO 區塊再三解釋台銀／現金／即期。
+
+### 設計一句話
+
+> **開屏即見匯率故事 → 同屏雙向金額 → 拇指區操作；次要一律 Bottom Sheet；SEO 教育內容折疊不刪 DOM。**
+
+---
+
+## 1. 2026 UX 與韓式 Fintech 設計原則
+
+### 1.1 全球 2026 Fintech UX（外部對照）
+
+| 原則                  | 含義                            | RateWise 落地                                 |
+| --------------------- | ------------------------------- | --------------------------------------------- |
+| **Thumb zone**        | 主互動在螢幕下 1/3              | Thumb CTA + inline numpad 錨定 BottomNav 上方 |
+| **Bottom sheet**      | 次要選擇不佔首屏                | 幣別、匯率三態詳情、完整趨勢                  |
+| **Data storytelling** | 先答「現在多少、走向如何」      | Hero Story Band（匯率 + Δ% + sparkline）      |
+| **Minimal steps**     | 每多 1 tap 流失                 | 打掉 Modal 閘門；quick chip 全斷點可見        |
+| **Proactive UX**      | 預測意圖、可關閉                | 收藏 chips、歷史續接、stale 分級（見 §8）     |
+| **Inclusive design**  | KWCAG 2.2：200% 字級、44px 觸控 | Settings 大字模式、focus trap（見 §7）        |
+
+### 1.2 韓式標竿對照
+
+| 標竿                                    | 可借鑑                                               | RateWise 不複製       |
+| --------------------------------------- | ---------------------------------------------------- | --------------------- |
+| **Toss** TDS「설명이 필요 없는 디자인」 | ListRow、segmented pill、大數字 hero、無邊框 surface | 預付卡、KYC、帳戶體系 |
+| **Wowpass**                             | 餘額 hero 語法、旅行情境、一鍵面額、比價一眼化       | 封閉錢包、儲值        |
+| **KakaoBank**                           | 任務清晰度優先於模組堆疊                             | —                     |
+
+### 1.3 產品不變式（MUST NOT 破壞）
+
+- Google 匯率模式：上原幣、下目標幣；雙向兩行；UI **不**標「買入／賣出」
+- 三態匯率（即期／現金／換錢所）+ 無資料灰顯 + fallback
+- `converterStore` 為 rateType / rateSource / favorites SSOT
+- 極簡 UI：卡片與主按鈕**無外框**；primary 前景 `text-primary-foreground`
+- SEO 文案 SSOT：`seo-metadata.ts`；首頁**不**輸出 `FAQPage` JSON-LD
+
+---
+
+## 2. 現況分析
+
+### 2.1 單幣別輸入漏斗（SSOT 行為）
+
+| 路徑                   | 互動次數             | 說明                                     |
+| ---------------------- | -------------------- | ---------------------------------------- |
+| 接受預設 TWD→JPY、1000 | **0 tap**            | 開頁即見匯率與結果                       |
+| 桌機 quick amount      | **1 tap**            | `fromVisibility: short:hidden` 僅 >700px |
+| 手機 Modal 輸入 1000   | **1 tap + 5 鍵 = 6** | 開 sheet → 4 鍵 → `=`                    |
+| Toss / Wowpass 理想    | **1–2**              | inline 或 chip                           |
+
+**根因錨點**：
+
+- `SingleConverter.tsx` L429–444、L638–653：金額為 `button` + `openCalculator`
+- `useCalculatorModal.ts`：僅 `handleConfirm` 寫回
+- `design-tokens.ts`：`fromVisibility: 'short:hidden'`、`swap.visibility: 'micro:hidden'`
+- `amountInput`：`nano:text-sm` 與 inclusive 方向相反
+
+### 2.2 資訊重複矩陣（首頁）
+
+| 資訊             | 重複次數   | 位置                                               |
+| ---------------- | ---------- | -------------------------------------------------- |
+| 台銀／買賣價敘述 | 5+         | SEO intro、highlights、AnswerCapsule、FAQ、eyebrow |
+| 現金／即期說明   | 3–4        | RateSelector + SEO howTo + AnswerCapsule           |
+| 匯率數字         | 2+         | 匯率卡 + toAmount + 趨勢 tooltip                   |
+| 資料來源／時間   | 卡外 + SEO | `RateWise` data-source（`nano:hidden`）            |
+| 收藏幣匯率       | ×2         | 桌機 `FavoritesList` + `CurrencyList`              |
+| 產品標題         | ×2         | sr-only h1 + SEO h2 同文                           |
+
+### 2.3 Toss「無需解釋」差距 Top 5
+
+1. 邊框堆疊（`border-2` 金額框、匯率卡、swap）
+2. from/to **label** + hover 才見提示（觸控無效）
+3. 原生 `<select>` 疊在金額列
+4. 金額欄無「可編輯」affordance
+5. `micro:hidden` 使 swap 在小屏消失
+
+---
+
+## 3. 目標資訊架構（2026 單屏）
+
+### 3.1 一屏唯一資訊集（7 項）
+
+離開前使用者必須能回答：
+
+1. 幣別對（A → B）
+2. 主匯率 `1 A = X B`
+3. 倒數匯率 `1 B = Y A`
+4. 輸入金額
+5. 換算結果
+6. 匯率語境（類型 + 來源 + 新鮮度）— **Trust Line**
+7. 走向暗示（sparkline + 可選 Δ%）
+
+**排除於一屏外**（sheet / 他頁）：完整趨勢圖、RateSelector 全展開、來源幣 quick、加入歷史全寬 CTA、桌機側欄列表。
+
+### 3.2 垂直結構（行動 · 390×760）
+
+```
+AppLayout Header (48px)
+├── ① Hero Story Band (~88px)
+│     主匯率 + 倒數 + sparkline + Trust Line
+├── ② Conversion Stack (~168px)
+│     From chip+金額 → Swap → To chip+金額 → To quick chips
+├── ③ Thumb Action Bar (~48px)
+│     ＋記錄 | 匯率來源 | 更多
+├── [編輯態] Inline Numpad (~260–320px，取代 thumb bar)
+BottomNavigation (56px + safe-area)
+```
+
+### 3.3 Sheet 分工
+
+| 觸發             | Sheet                      | 內容                               |
+| ---------------- | -------------------------- | ---------------------------------- |
+| 幣別 chip        | `CurrencyPickerSheet`      | 搜尋、最近、收藏、全列表           |
+| Hero / trust tap | `RateDetailSheet`          | RateSelector、完整趨勢、換錢所詳情 |
+| 金額 tap         | `InlineNumpad`（非 modal） | 共用 `CalculatorKeypad`            |
+| 更多             | `MoreSheet`                | 來源幣 quick、複製、分享連結       |
+
+### 3.4 漸進揭露三層
+
+| 層級      | 預設可見                                     | 摺疊                                    | 移出主流程                                         |
+| --------- | -------------------------------------------- | --------------------------------------- | -------------------------------------------------- |
+| Primary   | 雙向金額、主匯率、Trust Line、To quick chips | —                                       | —                                                  |
+| Secondary | sparkline 摘要                               | RateSelector 全展開、完整趨勢、加入歷史 | —                                                  |
+| Tertiary  | —                                            | 來源幣 quick                            | `rateMode`（Settings）、收藏全列表（`/favorites`） |
+
+---
+
+## 4. 功能規格（Phase 對照）
+
+### Phase 1 — MVP 韓式化（0–3 月）P0
+
+**目標**：TTTQ P75 ≤ 2.0s；MTTQ P50 ≤ 3 taps；K-UX ≥ 85。
+
+| ID    | 功能                        | 規格要點                                                                                                                             | 主要檔案                                                                    |
+| ----- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
+| P1-01 | **Inline Numpad**           | 抽出 `CalculatorKeypad`；`InlineNumpad` 固定於 nav 上；`commitStrategy: confirm`（單幣別）；桌面可保留 `CalculatorKeyboard` fallback | `calculator/*`, `SingleConverter.tsx`, `design-tokens` `inlineNumpadTokens` |
+| P1-02 | **零 Modal 快速路徑**       | 並行支援：`inputMode=decimal` 直寫 **或** chip 一鍵；移除手機 `short:hidden` 來源 quick                                              | `SingleConverter`, `singleConverterLayoutTokens`                            |
+| P1-03 | **Swap 全斷點**             | 移除 `micro:hidden`；內嵌中線 swap                                                                                                   | `design-tokens.ts` L1006–1011                                               |
+| P1-04 | **Hero Story + Trust Line** | 匯率敘事帶置頂；合併 `ratewise-data-source` + `ExchangeShopBadge` 為 `TrustLine`；取消 `nano:hidden` 藏信任訊息                      | 新 `HeroStoryBand.tsx`, `RateWise.tsx`                                      |
+| P1-05 | **Currency Bottom Sheet**   | 取代 `<select>`；搜尋 + 收藏 + `recentCurrencies`（store 新增）                                                                      | 新 `CurrencyPickerSheet.tsx`, `converterStore`                              |
+| P1-06 | **趨勢預設收合**            | Hero 僅 sparkline + Δ%；點擊才 lazy 載入 `MiniTrendChart`                                                                            | `SingleConverter` trend 區                                                  |
+| P1-07 | **歷史 CTA 降級**           | 全寬 primary → Thumb「＋記錄」；2–3s 去抖動自動記錄 + 去重                                                                           | `useCurrencyConverter`, `SingleConverter`                                   |
+| P1-08 | **資訊去重**                | 桌機 `FavoritesList`+`CurrencyList` 合併單一列表；SEO 區 howTo/FAQ 改 `<details>`                                                    | `RateWise.tsx`, `HomepageSEOSection.tsx`                                    |
+| P1-09 | **術語口語化**              | 即期→「匯款／網銀」、現金→「臨櫃現鈔」、自動方向→「依換算估算」                                                                      | `i18n/*`, `RateSelector`                                                    |
+| P1-10 | **多幣 description**        | 渲染 `multiConverter.description`；頁面級 `RateSelector`                                                                             | `MultiConverter.tsx`                                                        |
+
+### Phase 2 — 旅行與 Proactive（3–6 月）P1
+
+| ID    | 功能               | 規格要點                                       |
+| ----- | ------------------ | ---------------------------------------------- |
+| P2-01 | 旅行情境 Hero      | 「我要去日本」預設 JPY↔TWD + 現金              |
+| P2-02 | 多來源比價卡       | `rankProviderQuotes` 並排 UI                   |
+| P2-03 | 收藏 chips（手機） | 補 `hidden lg` 側欄缺口                        |
+| P2-04 | 歷史續接 chip      | 4h 內可關閉建議                                |
+| P2-05 | Stale 分級 L0–L3   | 擴展 `ratesWarning`                            |
+| P2-06 | 金額輸入帶 SSOT    | 單列 chip + 計算機入口；移除雙列 from/to quick |
+| P2-07 | Layout 行動底導    | FAQ 等內容頁共用 `BottomNavigation`            |
+| P2-08 | App 內匯率提醒     | localStorage 門檻                              |
+
+### Phase 3 — TDS 收斂與 a11y（6–12 月）P2
+
+| ID    | 功能                  | 規格要點                                         |
+| ----- | --------------------- | ------------------------------------------------ |
+| P3-01 | Settings 大字模式     | `data-text-scale`；停用 `nano:text-sm` 反向縮字  |
+| P3-02 | 44px 觸控 SSOT        | `quickAmountButtonTokens`、`RateSelector` 命中區 |
+| P3-03 | `useFocusTrap`        | `CalculatorKeyboard`、`RatingModal`、彩蛋        |
+| P3-04 | 單一 RootLayout       | 合併 AppLayout / Layout 路由樹                   |
+| P3-05 | GA4 漏斗事件          | `quote_view`、`quote_task_complete` 等（見 §6）  |
+| P3-06 | Web Push 匯率（選配） | VAPID + edge                                     |
+
+---
+
+## 5. 元件與檔案對應
+
+### 5.1 新建
+
+| 檔案                                                   | 職責                        |
+| ------------------------------------------------------ | --------------------------- |
+| `features/ratewise/components/ConversionHero.tsx`      | 單幣別 2026 版面殼          |
+| `features/ratewise/components/HeroStoryBand.tsx`       | 匯率敘事 + sparkline        |
+| `features/ratewise/components/TrustLine.tsx`           | 來源 + 時間 + fallback 標記 |
+| `features/ratewise/components/ThumbActionBar.tsx`      | 拇指 CTA 三鍵               |
+| `features/ratewise/components/CurrencyChip.tsx`        | 幣別觸發器                  |
+| `features/ratewise/components/CurrencyPickerSheet.tsx` | 幣別 bottom sheet           |
+| `features/ratewise/components/AmountFieldTrigger.tsx`  | 金額觸發 + active 態        |
+| `features/calculator/components/CalculatorKeypad.tsx`  | 無殼層鍵盤核心              |
+| `features/calculator/components/InlineNumpad.tsx`      | inline 殼層                 |
+| `features/ratewise/hooks/useAmountNumpad.ts`           | 升級 `useCalculatorModal`   |
+
+### 5.2 修改
+
+| 檔案                            | 變更                                                                               |
+| ------------------------------- | ---------------------------------------------------------------------------------- |
+| `SingleConverter.tsx`           | 重排為 ConversionHero 子樹或逐步替換                                               |
+| `RateWise.tsx`                  | 移除外層 data-source section                                                       |
+| `design-tokens.ts`              | `heroStoryTokens`, `thumbZoneTokens`, `inlineNumpadTokens`, 移除 swap micro:hidden |
+| `converterStore.ts`             | `recentCurrencies`                                                                 |
+| `HomepageSEOSection.tsx`        | 折疊 howTo/FAQ；精簡 content 面板                                                  |
+| `MultiConverter.tsx`            | description + 頁面級 RateSelector                                                  |
+| `Layout.tsx` 或 `AppLayout.tsx` | Phase 2 底導共用                                                                   |
+
+### 5.3 複用不變
+
+`useCurrencyConverter.ts`、`exchangeRateCalculation.ts`、`RateSelector.tsx`（移入 sheet）、`MiniTrendChart.tsx`、`CalculatorKey.tsx`、`useCalculator.ts`
+
+---
+
+## 6. 成功指標與驗收
+
+### 6.1 North Star：TTTQ（Time to Trusted Quote）
+
+進站至看見「正確幣對 + 金額 + 來源標示 + 結果」的 P75 時間。
+
+| 情境                              | 目標       |
+| --------------------------------- | ---------- |
+| 冷啟動                            | ≤ **2.0s** |
+| PWA 再訪                          | ≤ **0.8s** |
+| QSR（5s 內有效換算 session 比例） | ≥ **80%**  |
+
+### 6.2 任務 KPI（Phase 1 必驗）
+
+| 任務                    | Tap P50 | 時間 P75 |
+| ----------------------- | ------- | -------- |
+| T0 預設換算             | 0       | ≤ 2.0s   |
+| T1 快速金額             | 1       | ≤ 1.5s   |
+| T2 計算機（若保留算式） | ≤ 4     | ≤ 8s     |
+| T7 Swap                 | 1       | ≤ 0.5s   |
+
+### 6.3 K-UX Score（滿分 100，Ship ≥ 85）
+
+速度 30 + 效率 25 + 清晰 20 + 一致 15 + 信任 10
+
+### 6.4 GA4 核心事件（Phase 3 埋點）
+
+`quote_view`, `quote_task_complete`, `quick_amount_select`, `calculator_open`/`confirm`, `currency_change`, `rate_type_change`, `rate_source_change`, `trend_toggle`
+
+### 6.5 自動化閘門（不得退步）
+
+- `impeccable detect --fast`：0 issues
+- axe E2E：serious/critical = 0
+- Lighthouse a11y ≥ 0.95；LCP ≤ 2500ms
+- 390/768/1440：horizontal overflow = 0；互動目標 ≥ 44px
+
+### 6.6 人工驗收（無需解釋測試）
+
+未說明完成：改幣別 → 輸入金額 → 交換 → 讀懂匯率來源；**成功率 ≥ 90%**。
+
+---
+
+## 7. 無障礙（KWCAG 2.2 對齊）
+
+- **大字模式**：Settings 三態 `standard | large | xlarge`；`amountInput` 小視窗字級下限 `text-lg`
+- **44×44px**：`quickAmountButtonTokens`、`RateSelector` 擴大命中區、`notificationTokens` 關閉鈕
+- **Focus trap**：共用 `useFocusTrap`；modal 關閉 restore 至觸發金額欄
+- **Trust Line**：矮視窗仍顯示（廢除 `nano:hidden` 藏來源）
+
+---
+
+## 8. 內容與 SEO 收斂（不傷索引）
+
+- **首屏**：僅 `RateWise` 轉換器 + 一行信任 + AnswerCapsule + 熱門幣對內鏈
+- **折疊**：howTo + FAQ 用 `<details>`，全文留 DOM
+- **刪減**：`content.intro` + `highlights[0]` 與 AnswerCapsule 重疊句
+- **H1/H2**：可見 H2 改與 sr-only H1 **不同文案**
+
+---
+
+## 9. 風險與決策記錄
+
+| 決策     | 選擇                                         | 不採用                          |
+| -------- | -------------------------------------------- | ------------------------------- |
+| 金額輸入 | Inline numpad + chip + 可選 native decimal   | 僅保留 Modal                    |
+| 趨勢圖   | 預設收合                                     | 永久刪除（保留 SEO 二級頁能力） |
+| 歷史     | 自動記錄 + thumb 觸發                        | 全寬 primary CTA                |
+| 多幣     | 基準幣唯讀 + 頁面級 RateSelector             | 列級假切換                      |
+| SemVer   | Hero/numpad/sheet 為使用者可感知 → **minor** | —                               |
+
+---
+
+## 10. 參考來源
+
+- Toss TDS：<https://developers-apps-in-toss.toss.im/design/components.html>
+- 2026 Fintech UX：<https://fuselabcreative.com/fintech-ux-design-guide-2026-user-experience/>
+- 內部：`docs/prompt/UIUX.md`、`docs/dev/014_mobile_numeric_keypad_bdd_spec.md`、`docs/dev/044_ratewise_uiux_token_refactor_spec.md`
+- 並行審查：2026-06-12 二十線 agent 報告（單幣漏斗、資訊重複、Hero IA、inline numpad、韓式差距等）
+
+---
+
+## 11. 修訂紀錄
+
+| 日期       | 版本 | 變更                                                                  |
+| ---------- | ---- | --------------------------------------------------------------------- |
+| 2026-06-12 | v1.0 | 初版：整合 20 線 UX 審查、2026 原則、三階段路線圖、元件對應與驗收指標 |
diff --git a/scripts/__tests__/fetch-moneybox-rates.test.ts b/scripts/__tests__/fetch-moneybox-rates.test.ts
new file mode 100644
index 000000000..1bdbd7ba0
--- /dev/null
+++ b/scripts/__tests__/fetch-moneybox-rates.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest';
+
+import { shouldRefreshLatestSnapshot } from '../fetch-moneybox-rates.js';
+
+describe('fetch-moneybox-rates', () => {
+  it('跨到首爾新的一天時，即使牌價未變也會刷新 latest snapshot', () => {
+    const oldData = {
+      timestamp: '2026-05-31T11:56:44.177Z',
+      updateTime: '2026/05/31 20:56:44',
+      rates: {
+        TWD: { sell: 46.1, buy: 46.7, base: 47.95, spbuy: 54.23, spsell: 43.16 },
+      },
+    };
+    const newData = {
+      timestamp: '2026-05-31T16:36:06.583Z',
+      updateTime: '2026/06/01 01:36:06',
+      rates: {
+        TWD: { sell: 46.1, buy: 46.7, base: 47.95, spbuy: 54.23, spsell: 43.16 },
+      },
+    };
+
+    expect(shouldRefreshLatestSnapshot(oldData, newData)).toMatchObject({
+      shouldUpdate: true,
+      reason: 'date-rollover',
+      oldSnapshotDate: '2026-05-31',
+      newSnapshotDate: '2026-06-01',
+    });
+  });
+
+  it('同一天且牌價未變時不刷新 latest snapshot', () => {
+    const oldData = {
+      timestamp: '2026-05-31T11:56:44.177Z',
+      updateTime: '2026/05/31 20:56:44',
+      rates: {
+        TWD: { sell: 46.1, buy: 46.7, base: 47.95, spbuy: 54.23, spsell: 43.16 },
+      },
+    };
+    const newData = {
+      timestamp: '2026-05-31T12:01:44.177Z',
+      updateTime: '2026/05/31 21:01:44',
+      rates: {
+        TWD: { sell: 46.1, buy: 46.7, base: 47.95, spbuy: 54.23, spsell: 43.16 },
+      },
+    };
+
+    expect(shouldRefreshLatestSnapshot(oldData, newData)).toMatchObject({
+      shouldUpdate: false,
+      reason: 'unchanged',
+    });
+  });
+
+  it('牌價有變時照常刷新 latest snapshot', () => {
+    const oldData = {
+      timestamp: '2026-05-31T11:56:44.177Z',
+      updateTime: '2026/05/31 20:56:44',
+      rates: {
+        TWD: { sell: 45.9, buy: 47, base: 47.95, spbuy: 54.23, spsell: 43.16 },
+      },
+    };
+    const newData = {
+      timestamp: '2026-05-31T12:01:44.177Z',
+      updateTime: '2026/05/31 21:01:44',
+      rates: {
+        TWD: { sell: 46.1, buy: 46.7, base: 47.95, spbuy: 54.23, spsell: 43.16 },
+      },
+    };
+
+    expect(shouldRefreshLatestSnapshot(oldData, newData)).toMatchObject({
+      shouldUpdate: true,
+      reason: 'rate-changed',
+    });
+  });
+});
diff --git a/scripts/__tests__/lighthouse-production.test.ts b/scripts/__tests__/lighthouse-production.test.ts
index 2f7029db8..47310cbbd 100644
--- a/scripts/__tests__/lighthouse-production.test.ts
+++ b/scripts/__tests__/lighthouse-production.test.ts
@@ -67,7 +67,15 @@ describe('lighthouse-production SSOT controls', () => {
     );
     expect(source).toContain('absoluteChanged > absoluteTolerance');
     expect(source).toContain('lcpMs: 500');
+    expect(source).toContain('inpMs: 15');
     expect(source).toContain('driftAbsoluteTolerance: DRIFT_ABSOLUTE_TOLERANCE.inpMs');
     expect(source).toContain('actual: current');
   });
+
+  it('allows low-baseline INP jitter under the absolute tolerance floor', () => {
+    const source = readFileSync(SCRIPT_PATH, 'utf8');
+
+    expect(source).toContain('inpMs: 15');
+    expect(source).not.toContain('inpMs: 10');
+  });
 });
diff --git a/scripts/fetch-moneybox-rates.js b/scripts/fetch-moneybox-rates.js
index b714b2d9f..1439b7d43 100644
--- a/scripts/fetch-moneybox-rates.js
+++ b/scripts/fetch-moneybox-rates.js
@@ -35,6 +35,31 @@ const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 const MONEYBOX_API_URL =
   'https://cems.moneybox.or.kr/api/cmd.php?cmd=C011&key=U1D8I4W7V6S1L3U4F3I4';
 
+function extractSeoulSnapshotDate(snapshot) {
+  const updateTime = snapshot?.updateTime;
+  if (typeof updateTime === 'string') {
+    const match = updateTime.match(/^(\d{4})\/(\d{2})\/(\d{2})/);
+    if (match) {
+      return `${match[1]}-${match[2]}-${match[3]}`;
+    }
+  }
+
+  const timestamp = snapshot?.timestamp;
+  if (typeof timestamp === 'string') {
+    const parsed = new Date(timestamp);
+    if (!Number.isNaN(parsed.getTime())) {
+      return new Intl.DateTimeFormat('en-CA', {
+        timeZone: 'Asia/Seoul',
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      }).format(parsed);
+    }
+  }
+
+  return null;
+}
+
 function writeCurrentFetchSnapshot(ratesData) {
   const output = process.env.MONEYBOX_FETCH_OUTPUT_FILE;
   if (!output) return;
@@ -204,20 +229,55 @@ function listRateChanges(oldRates = {}, newRates = {}) {
   );
 }
 
+function shouldRefreshLatestSnapshot(oldData = {}, newData = {}) {
+  const rateChanges = listRateChanges(oldData.rates, newData.rates);
+  if (rateChanges.length > 0) {
+    return {
+      shouldUpdate: true,
+      reason: 'rate-changed',
+      rateChanges,
+    };
+  }
+
+  const oldSnapshotDate = extractSeoulSnapshotDate(oldData);
+  const newSnapshotDate = extractSeoulSnapshotDate(newData);
+  if (oldSnapshotDate && newSnapshotDate && oldSnapshotDate !== newSnapshotDate) {
+    return {
+      shouldUpdate: true,
+      reason: 'date-rollover',
+      oldSnapshotDate,
+      newSnapshotDate,
+      rateChanges,
+    };
+  }
+
+  return {
+    shouldUpdate: false,
+    reason: 'unchanged',
+    rateChanges,
+    oldSnapshotDate,
+    newSnapshotDate,
+  };
+}
+
 function hasRateChanges(newData) {
   try {
     const oldData = JSON.parse(readFileSync(OUTPUT_FILE, 'utf8'));
+    const decision = shouldRefreshLatestSnapshot(oldData, newData);
 
-    const rateChanges = listRateChanges(oldData.rates, newData.rates);
-    const hasChanges = rateChanges.length > 0;
-
-    if (hasChanges) {
+    if (decision.shouldUpdate && decision.reason === 'rate-changed') {
+      const { rateChanges } = decision;
       console.log(
         `🔄 Rate change detected: ${rateChanges.map(({ currency, field }) => `${currency}.${field}`).join(', ')}`,
       );
       for (const { currency, field, oldValue, newValue } of rateChanges) {
         console.log(`   ${currency}.${field}: ${oldValue} → ${newValue}`);
       }
+    } else if (decision.shouldUpdate && decision.reason === 'date-rollover') {
+      console.log(
+        `📅 Snapshot date rolled over: ${decision.oldSnapshotDate} → ${decision.newSnapshotDate}`,
+      );
+      console.log('   Refreshing latest.json to keep current snapshot aligned with daily history');
     } else {
       const currentCurrencies = Object.keys(newData.rates ?? {}).length;
       console.log('📊 Rates unchanged since last update');
@@ -225,7 +285,7 @@ function hasRateChanges(newData) {
       console.log(`   Currencies checked: ${currentCurrencies}`);
     }
 
-    return hasChanges;
+    return decision.shouldUpdate;
   } catch {
     console.log('📝 No previous data found, will create new file');
     return true;
@@ -308,3 +368,4 @@ if (import.meta.url === `file://${process.argv[1]}`) {
 
 export { fetchMoneyBoxRates };
 export { listRateChanges };
+export { extractSeoulSnapshotDate, shouldRefreshLatestSnapshot };
diff --git a/scripts/lighthouse-production.mjs b/scripts/lighthouse-production.mjs
index 3033f93aa..5266dd0fd 100644
--- a/scripts/lighthouse-production.mjs
+++ b/scripts/lighthouse-production.mjs
@@ -44,7 +44,7 @@ const LIGHTHOUSE_MAX_ATTEMPTS = Number.parseInt(process.env.LH_MAX_ATTEMPTS || '
 const DRIFT_ABSOLUTE_TOLERANCE = {
   performanceScore: 1,
   lcpMs: 500,
-  inpMs: 10,
+  inpMs: 15,
   cls: 0.01,
 };
 
diff --git a/scripts/update-release-metadata.js b/scripts/update-release-metadata.js
index 6f5651e0b..53096301e 100644
--- a/scripts/update-release-metadata.js
+++ b/scripts/update-release-metadata.js
@@ -8,7 +8,7 @@
  *   2. updateSitemap          — 更新 sitemap.xml lastmod
  *   3. runVersionEmbedScripts — 重新生成所有版本嵌入產出物（含 markdown mirrors）
  *   4. restoreGeneratedData   — restore live 市場資料（build-time-rates.json、seo-rate-examples.ts），
- *                               避免帶入 release commit；這些檔案由 prebuild / 每日 SEO 排程更新。
+ *                               避免帶入 release commit；這些檔案由明確 refresh 指令 / 每日 SEO 排程更新。
  */
 
 import { readFileSync, writeFileSync } from 'node:fs';
@@ -79,7 +79,7 @@ function runVersionEmbedScripts() {
 }
 
 /**
- * live 市場資料（build-time-rates.json、seo-rate-examples.ts）由 prebuild / 每日 SEO 排程更新，
+ * live 市場資料（build-time-rates.json、seo-rate-examples.ts）由明確 refresh 指令 / 每日 SEO 排程更新，
  * 不應進入 release commit（版本守門會擋：staged set 無 version bump 時不允許 src/ 變更）。
  * 在此自動 restore，避免手動操作遺漏。
  */
diff --git a/scripts/verify-ssot-sync.mjs b/scripts/verify-ssot-sync.mjs
index 60d6c5525..587c59e39 100755
--- a/scripts/verify-ssot-sync.mjs
+++ b/scripts/verify-ssot-sync.mjs
@@ -226,6 +226,538 @@ function comparePaths(tsPaths, mjsPaths) {
   return errors;
 }
 
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function rgbTripletToHex(rgbTriplet) {
+  const values = rgbTriplet
+    .trim()
+    .split(/\s+/)
+    .map((value) => Number.parseInt(value, 10));
+
+  if (values.length !== 3 || values.some((value) => Number.isNaN(value))) {
+    throw new Error(`無效的 RGB triplet: ${rgbTriplet}`);
+  }
+
+  return `#${values
+    .map((value) => value.toString(16).padStart(2, '0'))
+    .join('')
+    .toUpperCase()}`;
+}
+
+function rgbTripletToCssRgb(rgbTriplet) {
+  const values = rgbTriplet
+    .trim()
+    .split(/\s+/)
+    .map((value) => Number.parseInt(value, 10));
+
+  if (values.length !== 3 || values.some((value) => Number.isNaN(value))) {
+    throw new Error(`無效的 RGB triplet: ${rgbTriplet}`);
+  }
+
+  return `rgb(${values.join(', ')})`;
+}
+
+function extractFrontmatter(content) {
+  const match = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!match) {
+    throw new Error('DESIGN.md 缺少 YAML frontmatter');
+  }
+
+  return match[1];
+}
+
+function extractFrontmatterQuotedValue(frontmatter, keyPath) {
+  const match = frontmatter.match(
+    new RegExp(`^\\s*${escapeRegExp(keyPath)}:\\s*(?:"([^"]+)"|'([^']+)'|([^\\n]+))\\s*$`, 'm'),
+  );
+  return match?.[1] ?? match?.[2] ?? match?.[3]?.trim() ?? null;
+}
+
+function extractFrontmatterNumberValue(frontmatter, keyPath) {
+  const match = frontmatter.match(
+    new RegExp(`^\\s*${escapeRegExp(keyPath)}:\\s*(\\d+(?:\\.\\d+)?)\\s*$`, 'm'),
+  );
+  return match?.[1] ?? null;
+}
+
+function extractZenColorHexMap(cssContent) {
+  const zenBlockMatch = cssContent.match(/:root,\s*\[data-style='zen'\]\s*\{([\s\S]*?)\n\s*\}/);
+  if (!zenBlockMatch) {
+    throw new Error('無法從 index.css 提取 zen 基準色票');
+  }
+
+  const colorKeys = [
+    'background',
+    'surface',
+    'surface-elevated',
+    'surface-sunken',
+    'text',
+    'text-muted',
+    'primary',
+    'secondary',
+    'accent',
+    'border',
+    'info',
+    'success',
+    'warning',
+    'destructive',
+    'chart-line',
+    'chart-area-top',
+    'chart-area-bottom',
+  ];
+
+  return Object.fromEntries(
+    colorKeys.map((key) => {
+      const match = zenBlockMatch[1].match(
+        new RegExp(`--color-${escapeRegExp(key)}:\\s*(\\d+\\s+\\d+\\s+\\d+);`),
+      );
+      if (!match) {
+        throw new Error(`index.css 缺少 --color-${key}`);
+      }
+
+      return [key, rgbTripletToHex(match[1])];
+    }),
+  );
+}
+
+const THEME_STYLE_NAMES = ['zen', 'nitro', 'kawaii', 'classic', 'ocean', 'forest'];
+const CSS_THEME_COLOR_KEYS = [
+  'background',
+  'surface',
+  'text',
+  'text-muted',
+  'primary',
+  'secondary',
+  'accent',
+  'border',
+  'info',
+  'success',
+  'warning',
+  'chart-line',
+  'chart-area-top',
+  'chart-area-bottom',
+];
+const THEME_COLOR_KEY_MAP = {
+  background: 'background',
+  surface: 'surface',
+  text: 'text',
+  'text-muted': 'textMuted',
+  primary: 'primary',
+  secondary: 'secondary',
+  accent: 'accent',
+  border: 'border',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  'chart-line': 'chartLine',
+  'chart-area-top': 'chartAreaTop',
+  'chart-area-bottom': 'chartAreaBottom',
+};
+const SKELETON_THEME_KEY_MAP = {
+  '--sk-bg': 'background',
+  '--sk-surface': 'surface',
+  '--sk-border': 'border',
+  '--sk-text': 'text',
+  '--sk-text-muted': 'textMuted',
+};
+
+function normalizeHexColor(hexColor) {
+  return hexColor.toUpperCase();
+}
+
+function extractCssThemeColorMap(cssContent, styleName) {
+  const selector =
+    styleName === 'zen'
+      ? /:root,\s*\[data-style='zen'\]\s*\{([\s\S]*?)\n\s*\}/
+      : new RegExp(`\\[data-style='${escapeRegExp(styleName)}'\\]\\s*\\{([\\s\\S]*?)\\n\\s*\\}`);
+  const blockMatch = cssContent.match(selector);
+  if (!blockMatch) {
+    throw new Error(`無法從 index.css 提取 ${styleName} 色票`);
+  }
+
+  return Object.fromEntries(
+    CSS_THEME_COLOR_KEYS.map((key) => {
+      const match = blockMatch[1].match(
+        new RegExp(`--color-${escapeRegExp(key)}:\\s*(\\d+\\s+\\d+\\s+\\d+);`),
+      );
+      if (!match) {
+        throw new Error(`index.css 的 ${styleName} 缺少 --color-${key}`);
+      }
+
+      return [key, rgbTripletToHex(match[1])];
+    }),
+  );
+}
+
+function extractThemeDefinitionColorMap(themesContent, styleName) {
+  const definitionMatch = themesContent.match(
+    new RegExp(
+      `const\\s+${escapeRegExp(styleName)}Style:[\\s\\S]*?colors:\\s*\\{([\\s\\S]*?)\\n\\s*\\},\\n\\};`,
+    ),
+  );
+  if (!definitionMatch) {
+    throw new Error(`無法從 themes.ts 提取 ${styleName} 色票`);
+  }
+
+  return Object.fromEntries(
+    Object.values(THEME_COLOR_KEY_MAP).map((key) => {
+      const match = definitionMatch[1].match(new RegExp(`${escapeRegExp(key)}:\\s*'([^']+)'`));
+      if (!match) {
+        throw new Error(`themes.ts 的 ${styleName} 色票缺少 ${key}`);
+      }
+
+      return [key, match[1]];
+    }),
+  );
+}
+
+function extractIndexHtmlSkeletonColorMap(indexHtmlContent, styleName) {
+  const selector =
+    styleName === 'zen'
+      ? /:root,\s*\[data-style='zen'\]\s*\{([\s\S]*?)\n\s*\}/
+      : new RegExp(`\\[data-style='${escapeRegExp(styleName)}'\\]\\s*\\{([\\s\\S]*?)\\n\\s*\\}`);
+  const blockMatch = indexHtmlContent.match(selector);
+  if (!blockMatch) {
+    throw new Error(`無法從 index.html 提取 ${styleName} skeleton 色票`);
+  }
+
+  return Object.fromEntries(
+    Object.entries(SKELETON_THEME_KEY_MAP).map(([cssVariable, themeKey]) => {
+      const match = blockMatch[1].match(
+        new RegExp(`${escapeRegExp(cssVariable)}:\\s*(#[0-9A-Fa-f]{6});`),
+      );
+      if (!match) {
+        throw new Error(`index.html 的 ${styleName} skeleton 缺少 ${cssVariable}`);
+      }
+
+      return [themeKey, normalizeHexColor(match[1])];
+    }),
+  );
+}
+
+function extractIndexHtmlThemeColor(indexHtmlContent) {
+  const match = indexHtmlContent.match(
+    /<meta\s+name="theme-color"\s+content="(#[0-9A-Fa-f]{6})"\s*\/?>/,
+  );
+  if (!match) {
+    throw new Error('無法從 index.html 提取 theme-color meta');
+  }
+
+  return normalizeHexColor(match[1]);
+}
+
+function extractHtmlThemeColor(htmlContent, fileLabel) {
+  const match = htmlContent.match(
+    /<meta\s+name="theme-color"\s+content="(#[0-9A-Fa-f]{6})"\s*\/?>/,
+  );
+  if (!match) {
+    throw new Error(`無法從 ${fileLabel} 提取 theme-color meta`);
+  }
+
+  return normalizeHexColor(match[1]);
+}
+
+function extractStylePreviewMap(themesContent, styleName, themeColors) {
+  const previewMatch = themesContent.match(
+    new RegExp(
+      `value:\\s*'${escapeRegExp(styleName)}'[\\s\\S]*?previewBg:\\s*'([^']+)'[\\s\\S]*?previewText:\\s*'([^']+)'[\\s\\S]*?previewAccent:\\s*'([^']+)'`,
+    ),
+  );
+  if (!previewMatch) {
+    if (themesContent.includes('buildStyleOption') && themesContent.includes('STYLE_OPTIONS')) {
+      return {
+        previewBg: rgbTripletToCssRgb(themeColors.background),
+        previewText: rgbTripletToCssRgb(themeColors.text),
+        previewAccent: rgbTripletToCssRgb(themeColors.primary),
+      };
+    }
+
+    throw new Error(`無法從 themes.ts 提取 ${styleName} preview 色票`);
+  }
+
+  return {
+    previewBg: previewMatch[1],
+    previewText: previewMatch[2],
+    previewAccent: previewMatch[3],
+  };
+}
+
+function verifyThemeDefinitions(cssContent, themesContent) {
+  const errors = [];
+
+  for (const styleName of THEME_STYLE_NAMES) {
+    const cssColors = extractCssThemeColorMap(cssContent, styleName);
+    const themeColors = extractThemeDefinitionColorMap(themesContent, styleName);
+    const previewColors = extractStylePreviewMap(themesContent, styleName, themeColors);
+
+    for (const [cssKey, themeKey] of Object.entries(THEME_COLOR_KEY_MAP)) {
+      const expectedHex = cssColors[cssKey];
+      const themeHex = rgbTripletToHex(themeColors[themeKey]);
+      if (themeHex !== expectedHex) {
+        errors.push(
+          `[themes.ts] ${styleName}.colors.${themeKey}=${themeHex} 與 index.css 基準色 ${expectedHex} 不一致`,
+        );
+      }
+    }
+
+    const expectedPreview = {
+      previewBg: rgbTripletToCssRgb(themeColors.background),
+      previewText: rgbTripletToCssRgb(themeColors.text),
+      previewAccent: rgbTripletToCssRgb(themeColors.primary),
+    };
+    for (const [key, value] of Object.entries(expectedPreview)) {
+      if (previewColors[key] !== value) {
+        errors.push(`[themes.ts] ${styleName}.${key}=${previewColors[key]} 應為 ${value}`);
+      }
+    }
+  }
+
+  if (errors.length === 0) {
+    log(colors.green, '✓', `themes.ts 與 index.css 的 ${THEME_STYLE_NAMES.length} 種風格色票同步`);
+  }
+
+  return errors;
+}
+
+function verifySkeletonThemeDefinitions(indexHtmlContent, themesContent) {
+  const errors = [];
+
+  const zenThemeColor = rgbTripletToHex(
+    extractThemeDefinitionColorMap(themesContent, 'zen').primary,
+  );
+  const indexHtmlThemeColor = extractIndexHtmlThemeColor(indexHtmlContent);
+  if (indexHtmlThemeColor !== zenThemeColor) {
+    errors.push(`[index.html] theme-color=${indexHtmlThemeColor} 應為 ${zenThemeColor}`);
+  }
+
+  for (const styleName of THEME_STYLE_NAMES) {
+    const skeletonColors = extractIndexHtmlSkeletonColorMap(indexHtmlContent, styleName);
+    const themeColors = extractThemeDefinitionColorMap(themesContent, styleName);
+
+    for (const themeKey of Object.values(SKELETON_THEME_KEY_MAP)) {
+      const expectedHex = rgbTripletToHex(themeColors[themeKey]);
+      if (skeletonColors[themeKey] !== expectedHex) {
+        errors.push(
+          `[index.html] ${styleName} skeleton ${themeKey}=${skeletonColors[themeKey]} 應為 ${expectedHex}`,
+        );
+      }
+    }
+  }
+
+  if (errors.length === 0) {
+    log(
+      colors.green,
+      '✓',
+      `index.html skeleton 與 themes.ts 的 ${THEME_STYLE_NAMES.length} 種風格首屏色票同步`,
+    );
+  }
+
+  return errors;
+}
+
+function verifyPwaThemeArtifacts(manifestContent, offlineHtmlContent, themesContent) {
+  const errors = [];
+  const zenColors = extractThemeDefinitionColorMap(themesContent, 'zen');
+  const expectedThemeColor = rgbTripletToHex(zenColors.primary);
+  const expectedBackgroundColor = rgbTripletToHex(zenColors.background);
+
+  let manifest;
+  try {
+    manifest = JSON.parse(manifestContent);
+  } catch (error) {
+    throw new Error(`無法解析 manifest.webmanifest: ${error.message}`);
+  }
+
+  const manifestThemeColor = normalizeHexColor(manifest.theme_color ?? '');
+  if (manifestThemeColor !== expectedThemeColor) {
+    errors.push(
+      `[manifest.webmanifest] theme_color=${manifestThemeColor || '缺少'} 應為 ${expectedThemeColor}`,
+    );
+  }
+
+  const manifestBackgroundColor = normalizeHexColor(manifest.background_color ?? '');
+  if (manifestBackgroundColor !== expectedBackgroundColor) {
+    errors.push(
+      `[manifest.webmanifest] background_color=${manifestBackgroundColor || '缺少'} 應為 ${expectedBackgroundColor}`,
+    );
+  }
+
+  const offlineThemeColor = extractHtmlThemeColor(offlineHtmlContent, 'public/offline.html');
+  if (offlineThemeColor !== expectedThemeColor) {
+    errors.push(
+      `[public/offline.html] theme-color=${offlineThemeColor} 應為 ${expectedThemeColor}`,
+    );
+  }
+
+  if (errors.length === 0) {
+    log(colors.green, '✓', 'manifest.webmanifest 與 offline.html 的 PWA 色票同步');
+  }
+
+  return errors;
+}
+
+function normalizeFontFamily(fontFamily) {
+  return fontFamily
+    .replaceAll('"', '')
+    .split(',')
+    .map((token) => token.trim())
+    .filter(Boolean)
+    .join(', ');
+}
+
+function toFontFamilyTokens(fontFamily) {
+  return normalizeFontFamily(fontFamily)
+    .split(',')
+    .map((token) => token.trim())
+    .filter(Boolean);
+}
+
+function extractTypographySansFamily(tsContent) {
+  const match = tsContent.match(/sans:\s*\[([^\]]+)\]/);
+  if (!match) {
+    throw new Error('無法從 design-tokens.ts 提取 sans font family');
+  }
+
+  const parts = [...match[1].matchAll(/'([^']+)'|"([^"]+)"/g)].map(([, single, double]) =>
+    (single ?? double).trim(),
+  );
+  if (parts.length === 0) {
+    throw new Error('design-tokens.ts 的 sans font family 為空');
+  }
+
+  return normalizeFontFamily(parts.join(', '));
+}
+
+function extractDefaultThemeStyle(themesContent) {
+  const match = themesContent.match(/style:\s*'([^']+)'/);
+  if (!match) {
+    throw new Error('無法從 themes.ts 提取預設 style');
+  }
+
+  return match[1];
+}
+
+function verifyDesignDoc(
+  designPath,
+  cssPath,
+  typographyPath,
+  themesPath,
+  indexHtmlPath,
+  manifestPath,
+  offlineHtmlPath,
+) {
+  const errors = [];
+
+  if (!existsSync(designPath)) {
+    return ['[DESIGN.md] 檔案不存在'];
+  }
+
+  const designContent = readFileSync(designPath, 'utf-8');
+  const cssContent = readFileSync(cssPath, 'utf-8');
+  const typographyContent = readFileSync(typographyPath, 'utf-8');
+  const themesContent = readFileSync(themesPath, 'utf-8');
+  const indexHtmlContent = readFileSync(indexHtmlPath, 'utf-8');
+  const manifestContent = readFileSync(manifestPath, 'utf-8');
+  const offlineHtmlContent = readFileSync(offlineHtmlPath, 'utf-8');
+  const frontmatter = extractFrontmatter(designContent);
+
+  const requiredSections = [
+    '## Overview',
+    '## Colors',
+    '## Typography',
+    '## Elevation',
+    '## Components',
+    "## Do's and Don'ts",
+  ];
+
+  for (const section of requiredSections) {
+    if (!designContent.includes(section)) {
+      errors.push(`[DESIGN.md] 缺少必要章節: ${section}`);
+    }
+  }
+
+  if (!designContent.includes('The Quiet Exchange Desk')) {
+    errors.push('[DESIGN.md] 缺少 Creative North Star');
+  }
+
+  if (!designContent.includes('`zen`')) {
+    errors.push('[DESIGN.md] 未聲明 zen 為預設產品語法');
+  }
+
+  const expectedName = extractFrontmatterQuotedValue(frontmatter, 'name');
+  if (expectedName !== 'RateWise') {
+    errors.push(`[DESIGN.md] name 應為 "RateWise"，目前為 "${expectedName ?? '缺少'}"`);
+  }
+
+  const docColors = {
+    background: extractFrontmatterQuotedValue(frontmatter, 'background'),
+    surface: extractFrontmatterQuotedValue(frontmatter, 'surface'),
+    'surface-elevated': extractFrontmatterQuotedValue(frontmatter, 'surface-elevated'),
+    'surface-sunken': extractFrontmatterQuotedValue(frontmatter, 'surface-sunken'),
+    text: extractFrontmatterQuotedValue(frontmatter, 'text'),
+    'text-muted': extractFrontmatterQuotedValue(frontmatter, 'text-muted'),
+    primary: extractFrontmatterQuotedValue(frontmatter, 'primary'),
+    secondary: extractFrontmatterQuotedValue(frontmatter, 'secondary'),
+    accent: extractFrontmatterQuotedValue(frontmatter, 'accent'),
+    border: extractFrontmatterQuotedValue(frontmatter, 'border'),
+    info: extractFrontmatterQuotedValue(frontmatter, 'info'),
+    success: extractFrontmatterQuotedValue(frontmatter, 'success'),
+    warning: extractFrontmatterQuotedValue(frontmatter, 'warning'),
+    destructive: extractFrontmatterQuotedValue(frontmatter, 'destructive'),
+  };
+  const cssColors = extractZenColorHexMap(cssContent);
+
+  for (const [key, value] of Object.entries(docColors)) {
+    if (!value) {
+      errors.push(`[DESIGN.md] colors.${key} 缺少值`);
+      continue;
+    }
+
+    if (value !== cssColors[key]) {
+      errors.push(
+        `[DESIGN.md] colors.${key}=${value} 與 index.css 基準色 ${cssColors[key]} 不一致`,
+      );
+    }
+  }
+
+  const typographySans = extractTypographySansFamily(typographyContent);
+  const displayFontFamily = normalizeFontFamily(
+    extractFrontmatterQuotedValue(frontmatter, 'fontFamily') ?? '',
+  );
+  if (!displayFontFamily.includes('Inter') || !displayFontFamily.includes('Noto Sans TC')) {
+    errors.push('[DESIGN.md] typography.display.fontFamily 必須包含 Inter 與 Noto Sans TC');
+  }
+  const missingFontTokens = toFontFamilyTokens(typographySans).filter(
+    (token) => !toFontFamilyTokens(displayFontFamily).includes(token),
+  );
+  if (missingFontTokens.length > 0) {
+    errors.push(
+      `[DESIGN.md] typography.display.fontFamily 缺少 design-tokens sans family 項目: ${missingFontTokens.join(', ')}`,
+    );
+  }
+  const displayFontWeight = extractFrontmatterNumberValue(frontmatter, 'fontWeight');
+  if (!displayFontWeight) {
+    errors.push('[DESIGN.md] typography.display.fontWeight 缺少值');
+  }
+
+  const defaultStyle = extractDefaultThemeStyle(themesContent);
+  if (defaultStyle !== 'zen') {
+    errors.push(`[themes.ts] 預設 style 應為 "zen"，目前為 "${defaultStyle}"`);
+  }
+
+  errors.push(...verifyThemeDefinitions(cssContent, themesContent));
+  errors.push(...verifySkeletonThemeDefinitions(indexHtmlContent, themesContent));
+  errors.push(...verifyPwaThemeArtifacts(manifestContent, offlineHtmlContent, themesContent));
+
+  if (errors.length === 0) {
+    log(colors.green, '✓', 'DESIGN.md 與 zen 基準設計 token 同步');
+  }
+
+  return errors;
+}
+
 /**
  * 驗證 robots.txt 與 seo-paths.config.mjs 的 SSOT 一致性
  *
@@ -340,8 +872,16 @@ async function main() {
 
   const tsPath = join(__dirname, '../apps/ratewise/src/config/seo-paths.ts');
   const mjsPath = join(__dirname, '../apps/ratewise/seo-paths.config.mjs');
+  const designDocPath = join(__dirname, '../DESIGN.md');
+  const indexCssPath = join(__dirname, '../apps/ratewise/src/index.css');
+  const designTokensPath = join(__dirname, '../apps/ratewise/src/config/design-tokens.ts');
+  const themesPath = join(__dirname, '../apps/ratewise/src/config/themes.ts');
+  const indexHtmlPath = join(__dirname, '../apps/ratewise/index.html');
+  const manifestPath = join(__dirname, '../apps/ratewise/public/manifest.webmanifest');
+  const offlineHtmlPath = join(__dirname, '../apps/ratewise/public/offline.html');
 
   let hasErrors = false;
+  let shouldShowPathDetails = false;
 
   try {
     console.log('\n📂 讀取配置文件:');
@@ -363,6 +903,7 @@ async function main() {
       log(colors.red, '❌', 'INDEXABLE_CANONICAL_PATHS 不同步:');
       seoErrors.forEach((e) => log(colors.red, '  ✗', e));
       hasErrors = true;
+      shouldShowPathDetails = true;
     }
 
     console.log('\n🔄 比較動態金額路由規則:');
@@ -372,6 +913,7 @@ async function main() {
     if (dynamicErrors.length > 0) {
       dynamicErrors.forEach((e) => log(colors.red, '  ✗', e));
       hasErrors = true;
+      shouldShowPathDetails = true;
     }
 
     console.log('\n🔄 比較其他路徑群組:');
@@ -391,6 +933,7 @@ async function main() {
       if (groupErrors.length > 0) {
         groupErrors.forEach((e) => log(colors.red, '  ✗', e));
         hasErrors = true;
+        shouldShowPathDetails = true;
       }
     }
 
@@ -402,7 +945,22 @@ async function main() {
       hasErrors = true;
     }
 
-    if (hasErrors) {
+    console.log('\n🎨 DESIGN SSOT 驗證:');
+    const designErrors = verifyDesignDoc(
+      designDocPath,
+      indexCssPath,
+      designTokensPath,
+      themesPath,
+      indexHtmlPath,
+      manifestPath,
+      offlineHtmlPath,
+    );
+    if (designErrors.length > 0) {
+      designErrors.forEach((e) => log(colors.red, '  ✗', e));
+      hasErrors = true;
+    }
+
+    if (shouldShowPathDetails) {
       console.log('\n📋 詳細路徑列表:');
       console.log('\nTypeScript canonical paths:');
       tsPaths.forEach((p, i) => console.log(`  ${i + 1}. ${p}`));
@@ -427,6 +985,9 @@ async function main() {
     console.log(
       '  5. robots.txt 漂移：執行 node apps/ratewise/scripts/generate-robots-txt.mjs 重新生成\n',
     );
+    console.log(
+      '  6. DESIGN.md 漂移：同步 root DESIGN.md、src/index.css、design-tokens.ts 與 themes.ts\n',
+    );
     process.exit(1);
   } else {
     console.log('');