From 5a6a8195f855621ea7f4864c0351c62b96963d7f Mon Sep 17 00:00:00 2001
From: mars <3361409208@qq.com>
Date: Mon, 13 Jul 2026 09:55:26 +0800
Subject: [PATCH] fix(player): apply heading/data font tokens globally across
 all desktop components

---
 .../desktop/DesktopBetDetailModal.vue         | 22 ++---
 .../desktop/DesktopCashbackDetailModal.vue    | 10 +--
 .../desktop/DesktopRechargeDetailModal.vue    |  6 +-
 .../src/components/desktop/DesktopTopNav.vue  |  2 +-
 .../desktop/DesktopTxDetailModal.vue          |  6 +-
 .../player/src/styles/desktop/interaction.css | 84 ++++++++++++++++++-
 .../views/desktop/DesktopBetDetailView.vue    | 20 ++---
 .../desktop/DesktopCashbackRecordsView.vue    |  6 +-
 .../src/views/desktop/DesktopProfileView.vue  |  8 +-
 .../src/views/desktop/DesktopRechargeView.vue | 12 +--
 .../DesktopWalletTransactionDetailView.vue    | 18 ++--
 11 files changed, 138 insertions(+), 56 deletions(-)

diff --git a/apps/player/src/components/desktop/DesktopBetDetailModal.vue b/apps/player/src/components/desktop/DesktopBetDetailModal.vue
index 28e5f67..f8f6ab9 100644
--- a/apps/player/src/components/desktop/DesktopBetDetailModal.vue
+++ b/apps/player/src/components/desktop/DesktopBetDetailModal.vue
@@ -85,12 +85,12 @@ const SEL_TRANS: Record<string, Record<string, string>> = {
   '主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
   '客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
   '和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
-  '主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
-  '客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
-  '大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
-  '小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
-  '单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
-  '双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
+  '�?: { 'en-US': 'Home', 'ms-MY': 'Rumah' },
+  '�?: { 'en-US': 'Away', 'ms-MY': 'Tandang' },
+  '�?: { 'en-US': 'Over', 'ms-MY': 'Atas' },
+  '�?: { 'en-US': 'Under', 'ms-MY': 'Bawah' },
+  '�?: { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
+  '�?: { 'en-US': 'Even', 'ms-MY': 'Genap' },
   '冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
 };
 
@@ -109,8 +109,8 @@ function translateSel(name: string): string {
 
 function legResultIcon(status?: string | null) {
   switch (status?.toUpperCase()) {
-    case 'WON': return '✓';
-    case 'LOST': return '✗';
+    case 'WON': return '�?;
+    case 'LOST': return '�?;
     case 'PUSH': return '=';
     default: return '';
   }
@@ -147,7 +147,7 @@ const displayLegs = computed(() => {
         <div class="modal-container" role="dialog" aria-modal="true" :aria-label="t('bet.detail_title')">
           <div class="modal-header">
             <span class="modal-title">{{ t('bet.detail_title') }}</span>
-            <button type="button" class="modal-close" :aria-label="t('support.close')" @click="close">✕</button>
+            <button type="button" class="modal-close" :aria-label="t('support.close')" @click="close">�?/button>
           </div>
 
           <div class="modal-body">
@@ -364,7 +364,7 @@ const displayLegs = computed(() => {
 }
 
 .mono {
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
 }
 
 .st-badge {
@@ -465,7 +465,7 @@ const displayLegs = computed(() => {
   font-size: 13px;
   font-weight: 800;
   color: var(--primary);
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
 }
 
 .leg-result {
diff --git a/apps/player/src/components/desktop/DesktopCashbackDetailModal.vue b/apps/player/src/components/desktop/DesktopCashbackDetailModal.vue
index b578746..981acd3 100644
--- a/apps/player/src/components/desktop/DesktopCashbackDetailModal.vue
+++ b/apps/player/src/components/desktop/DesktopCashbackDetailModal.vue
@@ -30,7 +30,7 @@ function formatPeriod(start: string, end: string) {
   const opts: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
   const s = new Date(start).toLocaleDateString(locale.value, opts);
   const e = new Date(end).toLocaleDateString(locale.value, opts);
-  return `${s} – ${e}`;
+  return `${s} �?${e}`;
 }
 
 function formatRate(rate: string) {
@@ -40,7 +40,7 @@ function formatRate(rate: string) {
 }
 
 function formatTime(value: string | null) {
-  if (!value) return '—';
+  if (!value) return '�?;
   return new Date(value).toLocaleString(locale.value);
 }
 </script>
@@ -52,7 +52,7 @@ function formatTime(value: string | null) {
         <div class="modal-container" role="dialog" aria-modal="true" :aria-label="t('cashback.title')">
           <div class="modal-header">
             <span class="modal-title">{{ t('cashback.title') }}</span>
-            <button type="button" class="modal-close" :aria-label="t('support.close')" @click="close">✕</button>
+            <button type="button" class="modal-close" :aria-label="t('support.close')" @click="close">�?/button>
           </div>
 
           <div v-if="record" class="modal-body">
@@ -164,7 +164,7 @@ function formatTime(value: string | null) {
   font-size: 32px;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   line-height: 1.1;
 }
 
@@ -218,7 +218,7 @@ function formatTime(value: string | null) {
 }
 
 .mono {
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
 }
 
diff --git a/apps/player/src/components/desktop/DesktopRechargeDetailModal.vue b/apps/player/src/components/desktop/DesktopRechargeDetailModal.vue
index 885a8a1..18c1862 100644
--- a/apps/player/src/components/desktop/DesktopRechargeDetailModal.vue
+++ b/apps/player/src/components/desktop/DesktopRechargeDetailModal.vue
@@ -135,7 +135,7 @@ function auditNoteDisplayText(remark: { kind: 'note'; text: string }) {
         <div class="modal-container" role="dialog" aria-modal="true" :aria-label="t('recharge.order_detail')">
           <div class="modal-header">
             <span class="modal-title">{{ t('recharge.order_detail') }}</span>
-            <button type="button" class="modal-close" :aria-label="t('support.close')" @click="close">✕</button>
+            <button type="button" class="modal-close" :aria-label="t('support.close')" @click="close">�?/button>
           </div>
 
           <div class="modal-body">
@@ -333,7 +333,7 @@ function auditNoteDisplayText(remark: { kind: 'note'; text: string }) {
   font-size: 30px;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   color: var(--text);
   line-height: 1.1;
   margin-bottom: 4px;
@@ -346,7 +346,7 @@ function auditNoteDisplayText(remark: { kind: 'note'; text: string }) {
 }
 
 .mono {
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
 }
 
 .st-badge {
diff --git a/apps/player/src/components/desktop/DesktopTopNav.vue b/apps/player/src/components/desktop/DesktopTopNav.vue
index afd0600..98a3ff8 100644
--- a/apps/player/src/components/desktop/DesktopTopNav.vue
+++ b/apps/player/src/components/desktop/DesktopTopNav.vue
@@ -111,7 +111,7 @@ const activeTab = computed(() => {
 .site-name {
   font-size: 20px;
   font-weight: 800;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: var(--font-heading);
   letter-spacing: 0.5px;
   background: var(--primary);
   -webkit-background-clip: text;
diff --git a/apps/player/src/components/desktop/DesktopTxDetailModal.vue b/apps/player/src/components/desktop/DesktopTxDetailModal.vue
index 62973be..5bc2399 100644
--- a/apps/player/src/components/desktop/DesktopTxDetailModal.vue
+++ b/apps/player/src/components/desktop/DesktopTxDetailModal.vue
@@ -119,7 +119,7 @@ function goCashbackDetail() {
         <div class="modal-container" role="dialog" aria-modal="true" :aria-label="t('wallet.transaction_detail')">
           <div class="modal-header">
             <span class="modal-title">{{ t('wallet.transaction_detail') }}</span>
-            <button type="button" class="modal-close" :aria-label="t('support.close')" @click="close">✕</button>
+            <button type="button" class="modal-close" :aria-label="t('support.close')" @click="close">�?/button>
           </div>
 
           <div class="modal-body">
@@ -279,7 +279,7 @@ function goCashbackDetail() {
   font-size: 32px;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   line-height: 1.1;
 }
 
@@ -337,7 +337,7 @@ function goCashbackDetail() {
 }
 
 .mono {
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
 }
 
diff --git a/apps/player/src/styles/desktop/interaction.css b/apps/player/src/styles/desktop/interaction.css
index 7850263..3c54edc 100644
--- a/apps/player/src/styles/desktop/interaction.css
+++ b/apps/player/src/styles/desktop/interaction.css
@@ -2,7 +2,89 @@
    Desktop Interaction System — Theme-2 Blue-White
    ════════════════════════════════════════════════════════════ */
 
-/* ── Hover Cursors and active resets ── */
+/* ── Global Font System ── */
+/* Heading font: Russo One — titles, labels, headings, status badges, nav, section names */
+.desktop-shell h1,
+.desktop-shell h2,
+.desktop-shell h3,
+.desktop-shell h4,
+.desktop-shell h5,
+.desktop-shell h6,
+.desktop-shell .page-title,
+.desktop-shell [class*="-title"]:not(input),
+.desktop-shell [class*="-header"]:not(input),
+.desktop-shell [class*="-label"]:not(input),
+.desktop-shell [class*="-lbl"]:not(input),
+.desktop-shell [class*="-badge"]:not(input),
+.desktop-shell [class*="-meta"]:not(input),
+.desktop-shell [class*="-name"]:not(input),
+.desktop-shell [class*="-status"]:not(input),
+.desktop-shell [class*="-pick"]:not(input),
+.desktop-shell [class*="-section"]:not(input),
+.desktop-shell [class*="-heading"]:not(input),
+.desktop-shell [class*="-nav"]:not(input),
+.desktop-shell [class*="-tab"]:not(input),
+.desktop-shell [class*="-tag"]:not(input),
+.desktop-shell [class*="-brand"]:not(input),
+.desktop-shell [class*="-league"]:not(input),
+.desktop-shell [class*="-action"]:not(input),
+.desktop-shell [class*="-chip"]:not(input),
+.desktop-shell [class*="-scope"]:not(input),
+.desktop-shell .site-name,
+.desktop-shell .market-title,
+.desktop-shell .market-hdr,
+.desktop-shell .market-filter-label,
+.desktop-shell .market-filter-chip,
+.desktop-shell .score-section-title,
+.desktop-shell .panel-head,
+.desktop-shell .versus-row,
+.desktop-shell .kickoff-time,
+.desktop-shell .locked-lbl,
+.desktop-shell .lbl,
+.desktop-shell .label,
+.desktop-shell .section-hdr,
+.desktop-shell .leagues-hdr,
+.desktop-shell .time-btn,
+.desktop-shell .hero-sub,
+.desktop-shell .lang-opt,
+.desktop-shell .hero-caption,
+.desktop-shell .title,
+.desktop-shell .saishi,
+.desktop-shell .desktop-records-status,
+.desktop-shell .desktop-records-filter-group-label,
+.desktop-shell .desktop-records-table th,
+.desktop-shell .data-table th,
+.desktop-shell .desktop-wallet-subnav-link,
+.desktop-shell .desktop-records-action-btn {
+  font-family: var(--font-heading);
+}
+
+/* Data font: Chakra Petch / SF Mono — odds, amounts, balances, stakes, returns, numbers */
+.desktop-shell [class*="odds"]:not(input),
+.desktop-shell [class*="amount"]:not(input),
+.desktop-shell [class*="balance"]:not(input),
+.desktop-shell [class*="stat-"]:not(input),
+.desktop-shell [class*="-val"]:not(input),
+.desktop-shell [class*="-value"]:not(input),
+.desktop-shell [class*="stake"]:not(input),
+.desktop-shell [class*="return"]:not(input),
+.desktop-shell [class*="-num"]:not(input),
+.desktop-shell [class*="-price"]:not(input),
+.desktop-shell [class*="-payout"]:not(input),
+.desktop-shell [class*="-win"]:not(input),
+.desktop-shell .num-cell,
+.desktop-shell .id-cell,
+.desktop-shell .mono,
+.desktop-shell .currency,
+.desktop-shell .score,
+.desktop-shell .val,
+.desktop-shell .order-no,
+.desktop-shell .bank-card-number,
+.desktop-shell .hero-counter {
+  font-family: var(--font-mono);
+}
+
+/* Hover Cursors and active resets ── */
 .desktop-shell a,
 .desktop-shell button,
 .desktop-shell select,
diff --git a/apps/player/src/views/desktop/DesktopBetDetailView.vue b/apps/player/src/views/desktop/DesktopBetDetailView.vue
index 0c37af4..be90083 100644
--- a/apps/player/src/views/desktop/DesktopBetDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopBetDetailView.vue
@@ -66,12 +66,12 @@ const SEL_TRANS: Record<string, Record<string, string>> = {
   '主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
   '客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
   '和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
-  '主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
-  '客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
-  '大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
-  '小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
-  '单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
-  '双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
+  '�?: { 'en-US': 'Home', 'ms-MY': 'Rumah' },
+  '�?: { 'en-US': 'Away', 'ms-MY': 'Tandang' },
+  '�?: { 'en-US': 'Over', 'ms-MY': 'Atas' },
+  '�?: { 'en-US': 'Under', 'ms-MY': 'Bawah' },
+  '�?: { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
+  '�?: { 'en-US': 'Even', 'ms-MY': 'Genap' },
   '冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
 };
 
@@ -90,8 +90,8 @@ function translateSel(name: string): string {
 
 function legResultIcon(status?: string | null) {
   switch (status?.toUpperCase()) {
-    case 'WON': return '✓';
-    case 'LOST': return '✗';
+    case 'WON': return '�?;
+    case 'LOST': return '�?;
     case 'PUSH': return '=';
     default: return '';
   }
@@ -125,7 +125,7 @@ const displayLegs = computed(() => {
     <main class="account-main">
       <div class="page-header">
         <button type="button" class="back-btn" @click="goBack">
-          ‹ {{ t('common.back') }}
+          �?{{ t('common.back') }}
         </button>
         <h1 class="page-title">{{ t('bet.detail_title') }}</h1>
       </div>
@@ -304,7 +304,7 @@ const displayLegs = computed(() => {
 .summary-bet-no { display: flex; flex-direction: column; gap: 4px; }
 .summary-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
 .summary-value { font-size: 14px; font-weight: 700; color: var(--text); }
-.mono { font-family: 'SF Mono', 'Consolas', monospace; letter-spacing: 0.03em; }
+.mono { font-family: var(--font-mono); letter-spacing: 0.03em; }
 
 .summary-status { display: flex; }
 
diff --git a/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue b/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue
index 07de694..999ede5 100644
--- a/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue
+++ b/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue
@@ -58,7 +58,7 @@ function formatPeriod(start: string, end: string) {
   const opts: Intl.DateTimeFormatOptions = { month: '2-digit', day: '2-digit' };
   const s = new Date(start).toLocaleDateString(locale.value, opts);
   const e = new Date(end).toLocaleDateString(locale.value, opts);
-  return `${s} – ${e}`;
+  return `${s} �?${e}`;
 }
 
 function formatRate(rate: string) {
@@ -68,7 +68,7 @@ function formatRate(rate: string) {
 }
 
 function formatTime(value: string | null) {
-  if (!value) return '—';
+  if (!value) return '�?;
   return new Date(value).toLocaleString(locale.value, {
     month: '2-digit',
     day: '2-digit',
@@ -206,7 +206,7 @@ onActivated(async () => {
 }
 
 .batch-cell {
-  font-family: 'SF Mono', Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   color: var(--text-muted);
 }
diff --git a/apps/player/src/views/desktop/DesktopProfileView.vue b/apps/player/src/views/desktop/DesktopProfileView.vue
index 3e5336f..a88ffb3 100644
--- a/apps/player/src/views/desktop/DesktopProfileView.vue
+++ b/apps/player/src/views/desktop/DesktopProfileView.vue
@@ -112,7 +112,7 @@ const balanceDisplay = computed(() =>
 
               <div class="bank-card-footer">
                 <div class="bank-card-field">
-                  <span class="bank-card-label">{{ t('profile.username') || '持卡人' }}</span>
+                  <span class="bank-card-label">{{ t('profile.username') || '持卡�? }}</span>
                   <span class="bank-card-holder">{{ profileRaw?.username }}</span>
                 </div>
                 <div class="bank-card-field bank-card-field--center">
@@ -131,11 +131,11 @@ const balanceDisplay = computed(() =>
           <div class="info-card">
             <div class="info-header">{{ t('profile.account') || '账户信息' }}</div>
             <div class="info-row">
-              <span class="info-label">{{ t('profile.username') || '用户名' }}</span>
+              <span class="info-label">{{ t('profile.username') || '用户�? }}</span>
               <span class="info-val">{{ profileRaw?.username }}</span>
             </div>
             <div class="info-row">
-              <span class="info-label">{{ t('profile.phone') || '手机号' }}</span>
+              <span class="info-label">{{ t('profile.phone') || '手机�? }}</span>
               <span class="info-val">{{ profileRaw?.preferences?.phone || '-' }}</span>
             </div>
             <div class="info-actions">
@@ -280,7 +280,7 @@ const balanceDisplay = computed(() =>
 
 .bank-card-number {
   margin: 0;
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   font-weight: 700;
   color: #fff;
   font-size: 38px;
diff --git a/apps/player/src/views/desktop/DesktopRechargeView.vue b/apps/player/src/views/desktop/DesktopRechargeView.vue
index e8b0883..cb43755 100644
--- a/apps/player/src/views/desktop/DesktopRechargeView.vue
+++ b/apps/player/src/views/desktop/DesktopRechargeView.vue
@@ -187,7 +187,7 @@ onActivated(fetchMethods);
                 <span class="detail-val">{{ selectedMethod.bankName }}</span>
               </div>
               <div class="detail-row">
-                <span class="detail-label">{{ t('recharge.account_holder') || '持卡人' }}</span>
+                <span class="detail-label">{{ t('recharge.account_holder') || '持卡�? }}</span>
                 <span class="detail-val">{{ selectedMethod.accountHolder }}</span>
               </div>
               <div class="detail-row">
@@ -207,13 +207,13 @@ onActivated(fetchMethods);
 
             <!-- Amount input -->
             <div class="field">
-              <label class="field-label">{{ t('recharge.amount') || '充值金额' }}</label>
+              <label class="field-label">{{ t('recharge.amount') || '充值金�? }}</label>
               <input
                 v-model="amount"
                 type="number"
                 min="0"
                 class="field-input"
-                :placeholder="t('recharge.amount_placeholder') || '请输入金额'"
+                :placeholder="t('recharge.amount_placeholder') || '请输入金�?"
               />
             </div>
 
@@ -222,7 +222,7 @@ onActivated(fetchMethods);
               <label class="field-label">{{ t('recharge.screenshot') || '上传凭证截图' }}</label>
               <div v-if="screenshotPreview" class="preview-wrap">
                 <img :src="screenshotPreview" alt="preview" class="preview-img" />
-                <button type="button" class="clear-btn" @click="clearFile">✕</button>
+                <button type="button" class="clear-btn" @click="clearFile">�?/button>
               </div>
               <label v-else class="upload-zone">
                 <input type="file" accept="image/*" class="hidden-input" @change="handleFileChange" />
@@ -241,7 +241,7 @@ onActivated(fetchMethods);
               @click="submit"
             >
               <GoldSpinner v-if="submitting" :size="18" />
-              <span v-else>{{ t('recharge.submit') || '提交充值' }}</span>
+              <span v-else>{{ t('recharge.submit') || '提交充�? }}</span>
             </button>
           </div>
         </div>
@@ -462,7 +462,7 @@ onActivated(fetchMethods);
   color: var(--text);
 }
 
-.mono { font-family: 'SF Mono', 'Consolas', monospace; letter-spacing: 0.04em; }
+.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
 .break-all { word-break: break-all; }
 
 .qr-wrap {
diff --git a/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
index 695718f..9dbb7bf 100644
--- a/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
@@ -71,7 +71,7 @@ function txLabel(tx: TxDetail): string {
       <div class="detail-layout">
         <div class="page-header">
           <button type="button" class="back-btn" @click="goBack">
-            ‹ {{ t('common.back') || '返回' }}
+            �?{{ t('common.back') || '返回' }}
           </button>
           <h1 class="page-title">{{ t('wallet.transaction_detail') || '交易详情' }}</h1>
         </div>
@@ -101,19 +101,19 @@ function txLabel(tx: TxDetail): string {
               <span class="row-val">{{ txSummaryLabel(detail, t) || '-' }}</span>
             </div>
             <div class="detail-row">
-              <span class="row-label">{{ t('wallet.balance_before') || '变动前余额' }}</span>
+              <span class="row-label">{{ t('wallet.balance_before') || '变动前余�? }}</span>
               <span class="row-val mono">{{ formatMoney(detail.balanceBefore, locale) }}</span>
             </div>
             <div class="detail-row">
-              <span class="row-label">{{ t('wallet.balance_after') || '变动后余额' }}</span>
+              <span class="row-label">{{ t('wallet.balance_after') || '变动后余�? }}</span>
               <span class="row-val mono">{{ formatMoney(detail.balanceAfter, locale) }}</span>
             </div>
             <div v-if="parseFloat(detail.frozenBefore || '0') > 0 || parseFloat(detail.frozenAfter || '0') > 0" class="detail-row">
-              <span class="row-label">{{ t('wallet.frozen_before') || '冻结前' }}</span>
+              <span class="row-label">{{ t('wallet.frozen_before') || '冻结�? }}</span>
               <span class="row-val mono">{{ formatMoney(detail.frozenBefore, locale) }}</span>
             </div>
             <div v-if="parseFloat(detail.frozenBefore || '0') > 0 || parseFloat(detail.frozenAfter || '0') > 0" class="detail-row">
-              <span class="row-label">{{ t('wallet.frozen_after') || '冻结后' }}</span>
+              <span class="row-label">{{ t('wallet.frozen_after') || '冻结�? }}</span>
               <span class="row-val mono">{{ formatMoney(detail.frozenAfter, locale) }}</span>
             </div>
             <div class="detail-row">
@@ -121,13 +121,13 @@ function txLabel(tx: TxDetail): string {
               <span class="row-val">{{ new Date(detail.createdAt).toLocaleString() }}</span>
             </div>
             <div class="detail-row">
-              <span class="row-label">{{ t('wallet.transaction_id') || '流水号' }}</span>
+              <span class="row-label">{{ t('wallet.transaction_id') || '流水�? }}</span>
               <span class="row-val mono">{{ detail.transactionId }}</span>
             </div>
           </div>
         </div>
 
-        <div v-else class="empty-state">{{ t('common.not_found') || '未找到记录' }}</div>
+        <div v-else class="empty-state">{{ t('common.not_found') || '未找到记�? }}</div>
       </div>
     </main>
   </div>
@@ -165,7 +165,7 @@ function txLabel(tx: TxDetail): string {
   font-size: 36px;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   line-height: 1.1;
   margin-bottom: 6px;
 }
@@ -197,5 +197,5 @@ function txLabel(tx: TxDetail): string {
 .row-val { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); word-break: break-all; }
 .row-val.pos { color: var(--primary-light); }
 .row-val.neg { color: var(--danger); }
-.mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; letter-spacing: 0.03em; }
+.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; }
 </style>