feat(player): 统一移动端主题样式并优化多页面视觉一致性

将玩家端组件与核心页面全面切换为统一主题变量，优化卡片、按钮、弹窗、列表和盘口相关模块的视觉表现，并补充多语言文案以匹配新的交互与布局风格。

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/player/src/views/MatchDetailView.vue

@@ -307,11 +307,11 @@ function onPickSelection(selId: string, marketId: string) {
             <svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
               <defs>
                 <linearGradient id="hzDetailGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-                  <stop offset="0%" stop-color="#5eb8ff" stop-opacity="0.2" />
-                  <stop offset="35%" stop-color="#b8ecff" stop-opacity="1" />
-                  <stop offset="50%" stop-color="#ffffff" stop-opacity="1" />
-                  <stop offset="65%" stop-color="#ffd080" stop-opacity="1" />
-                  <stop offset="100%" stop-color="#ff9040" stop-opacity="0.2" />
+                  <stop offset="0%" stop-color="#FFB980" stop-opacity="0.2" />
+                  <stop offset="35%" stop-color="#FFDDD2" stop-opacity="1" />
+                  <stop offset="50%" stop-color="#FFFFFF" stop-opacity="1" />
+                  <stop offset="65%" stop-color="#FFDDD2" stop-opacity="1" />
+                  <stop offset="100%" stop-color="#FFDDD2" stop-opacity="0.2" />
                 </linearGradient>
               </defs>
               <path
@@ -360,7 +360,7 @@ function onPickSelection(selId: string, marketId: string) {
 
       <!-- 我的投注 -->
       <section v-if="myBets.length" class="my-bets-section">
-        <h3 class="my-bets-title">{{ t('history.my_bets') || '我的投注' }}</h3>
+        <h3 class="my-bets-title">{{ t('history.my_bets') }}</h3>
         <div class="my-bets-list">
           <div v-for="bet in myBets" :key="bet.betNo" class="my-bet-card" @click="router.push(`/bets/${bet.betNo}`)">
             <div class="bet-header">
@@ -423,7 +423,7 @@ function onPickSelection(selId: string, marketId: string) {
 .detail-page {
   margin: 0 -16px;
   padding-bottom: 16px;
-  background: #E8EDF2;
+  background: var(--bg-body);
 }
 
 .pull-indicator {
@@ -444,8 +444,9 @@ function onPickSelection(selId: string, marketId: string) {
   top: -12px;
   z-index: 50;
   margin-top: -12px;
-  background: #FFFFFF;
-  border-bottom: 1px solid #CBD5E1;
+  background: var(--bg-glass);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(12px);
 }
 
 .toolbar-title {
@@ -453,7 +454,7 @@ function onPickSelection(selId: string, marketId: string) {
   text-align: center;
   font-size: 13px;
   font-weight: 700;
-  color: #003D6B;
+  color: var(--primary-light);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -471,9 +472,9 @@ function onPickSelection(selId: string, marketId: string) {
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  border: 1px solid #E5E7EB;
-  background: #F5F7FA;
-  color: #003D6B;
+  border: 1px solid var(--border);
+  background: var(--bg-body);
+  color: var(--primary-light);
   font-size: 16px;
   font-weight: 700;
   line-height: 1;
@@ -491,10 +492,10 @@ function onPickSelection(selId: string, marketId: string) {
   margin: 0 12px 10px;
   padding: 14px 12px 16px;
   overflow: hidden;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  border-radius: 8px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow);
 }
 
 .match-hero--phase {
@@ -516,17 +517,17 @@ function onPickSelection(selId: string, marketId: string) {
 }
 
 .status-tag--settled {
-  background: #E8EDF2;
-  color: #4B5563;
-  border-bottom: 1px solid #D1D5DB;
-  border-left: 1px solid #D1D5DB;
+  background: var(--secondary);
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+  border-left: 1px solid var(--border);
 }
 
 .status-tag--pending {
-  background: #FEF3C7;
-  color: #92400E;
-  border-bottom: 1px solid #FDE68A;
-  border-left: 1px solid #FDE68A;
+  background: rgba(255, 179, 0, 0.1);
+  color: #FFB300;
+  border-bottom: 1px solid rgba(255, 179, 0, 0.25);
+  border-left: 1px solid rgba(255, 179, 0, 0.25);
 }
 
 /* -- market panel smaller status tag -- */
@@ -544,17 +545,17 @@ function onPickSelection(selId: string, marketId: string) {
 }
 
 .market-status-tag--settled {
-  background: #E8EDF2;
-  color: #4B5563;
-  border-bottom: 1px solid #D1D5DB;
-  border-left: 1px solid #D1D5DB;
+  background: var(--secondary);
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+  border-left: 1px solid var(--border);
 }
 
 .market-status-tag--pending {
-  background: #FEF3C7;
-  color: #92400E;
-  border-bottom: 1px solid #FDE68A;
-  border-left: 1px solid #FDE68A;
+  background: rgba(255, 179, 0, 0.1);
+  color: #FFB300;
+  border-bottom: 1px solid rgba(255, 179, 0, 0.25);
+  border-left: 1px solid rgba(255, 179, 0, 0.25);
 }
 
 .market-panel-wrap {
@@ -570,7 +571,7 @@ function onPickSelection(selId: string, marketId: string) {
   position: relative;
   z-index: 1;
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   text-align: left;
   margin-top: 10px;
   padding-left: 2px;
@@ -582,17 +583,17 @@ function onPickSelection(selId: string, marketId: string) {
   margin: 8px 0 0;
   font-size: 28px;
   font-weight: 900;
-  color: #003D6B;
+  color: var(--primary-light);
   text-align: center;
 }
 
 .result-stats-section {
   margin: 0 10px 12px;
   padding: 12px;
-  border: 1px solid #CBD5E1;
-  border-radius: 8px;
-  background: #FFFFFF;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-card);
+  box-shadow: var(--shadow);
 }
 
 .result-stats-head {
@@ -608,7 +609,7 @@ function onPickSelection(selId: string, marketId: string) {
   font-size: 14px;
   line-height: 1.2;
   font-weight: 700;
-  color: #003D6B;
+  color: var(--primary-light);
 }
 
 .result-stats-head span {
@@ -618,7 +619,7 @@ function onPickSelection(selId: string, marketId: string) {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .result-stats-grid {
@@ -635,8 +636,8 @@ function onPickSelection(selId: string, marketId: string) {
   gap: 8px;
   padding: 8px 10px;
   border-radius: 6px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
 }
 
 .result-stat-label {
@@ -645,7 +646,7 @@ function onPickSelection(selId: string, marketId: string) {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .result-stat-value {
@@ -653,7 +654,7 @@ function onPickSelection(selId: string, marketId: string) {
   font-size: 14px;
   line-height: 1;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .hero-teams {
@@ -677,7 +678,7 @@ function onPickSelection(selId: string, marketId: string) {
 .hero-name {
   font-size: 13px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
   text-align: center;
   line-height: 1.25;
   white-space: nowrap;
@@ -712,7 +713,7 @@ function onPickSelection(selId: string, marketId: string) {
   stroke-width: 2.2;
   stroke-linecap: round;
   stroke-linejoin: round;
-  filter: drop-shadow(0 0 4px rgba(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
+  filter: drop-shadow(0 0 4px rgba(244, 162, 97, 0.6)) drop-shadow(0 0 8px rgba(255, 185, 128, 0.35));
   opacity: 0;
 }
 
@@ -737,11 +738,11 @@ function onPickSelection(selId: string, marketId: string) {
   z-index: 1;
   background: linear-gradient(
     90deg,
-    rgba(0, 91, 159, 0) 0%,
-    rgba(0, 102, 204, 0.7) 28%,
-    #0066CC 50%,
-    rgba(0, 91, 159, 0.7) 72%,
-    rgba(0, 61, 107, 0) 100%
+    rgba(255, 185, 128, 0) 0%,
+    rgba(244, 162, 97, 0.7) 28%,
+    #F4A261 50%,
+    rgba(255, 185, 128, 0.7) 72%,
+    rgba(109, 40, 217, 0) 100%
   );
   opacity: 0;
   filter: blur(0.4px);
@@ -783,11 +784,11 @@ function onPickSelection(selId: string, marketId: string) {
 @keyframes vs-glow {
   0%, 100% {
     opacity: 0.82;
-    filter: drop-shadow(0 0 2px rgba(0, 61, 107, 0.2));
+    filter: drop-shadow(0 0 2px rgba(244, 162, 97, 0.2));
   }
   50% {
     opacity: 1;
-    filter: drop-shadow(0 0 3px rgba(0, 102, 204, 0.5)) drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
+    filter: drop-shadow(0 0 3px rgba(244, 162, 97, 0.5)) drop-shadow(0 0 6px rgba(255, 185, 128, 0.25));
   }
 }
 
@@ -807,17 +808,17 @@ function onPickSelection(selId: string, marketId: string) {
 }
 
 .market-group {
-  border-radius: 8px;
-  border: 1px solid #CBD5E1;
-  background: #FFFFFF;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
   overflow: hidden;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow);
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .market-group.open {
-  border-color: #9CA3AF;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  border-color: var(--border);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 .market-group :deep(.row) {
@@ -834,9 +835,9 @@ function onPickSelection(selId: string, marketId: string) {
   margin: 0 8px 10px;
   padding: 9px;
   border-radius: 6px;
-  border: 1px solid #E5E7EB;
-  background: #F5F7FA;
-  color: #003D6B;
+  border: 1px solid var(--border);
+  background: var(--bg-body);
+  color: var(--primary-light);
   font-size: 13px;
   font-weight: 700;
 }
@@ -844,13 +845,13 @@ function onPickSelection(selId: string, marketId: string) {
 .state {
   text-align: center;
   padding: 48px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .cs-toast {
   text-align: center;
   font-size: 12px;
-  color: #003D6B;
+  color: var(--primary-light);
   padding: 2px 0 6px;
 }
 
@@ -863,7 +864,7 @@ function onPickSelection(selId: string, marketId: string) {
 .my-bets-title {
   font-size: 14px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
   margin: 0 0 8px;
 }
 
@@ -874,17 +875,17 @@ function onPickSelection(selId: string, marketId: string) {
 }
 
 .my-bet-card {
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  border-radius: 8px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
   padding: 10px 12px;
   cursor: pointer;
   transition: background 0.15s;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow);
 }
 
 .my-bet-card:active {
-  background: #F5F7FA;
+  background: var(--bg-body);
 }
 
 .bet-header {
@@ -897,7 +898,7 @@ function onPickSelection(selId: string, marketId: string) {
 .bet-type {
   font-size: 12px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -914,18 +915,18 @@ function onPickSelection(selId: string, marketId: string) {
 }
 
 .bet-status-won {
-  background: #E6F4EA;
-  color: #059669;
+  background: rgba(16, 185, 129, 0.1);
+  color: #10B981;
 }
 
 .bet-status-lost {
-  background: #FDE8E8;
-  color: #DC2626;
+  background: rgba(239, 68, 68, 0.1);
+  color: #EF4444;
 }
 
 .bet-status-pending {
-  background: #FEF3C7;
-  color: #D97706;
+  background: rgba(255, 179, 0, 0.1);
+  color: #FFB300;
 }
 
 .bet-footer {
@@ -936,7 +937,7 @@ function onPickSelection(selId: string, marketId: string) {
 
 .bet-stake {
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .bet-return {