feat(player): 全站 UI 主题重构与布局优化 — 从暗金奢华风格迁移至 Pinnacle 风格蓝白专业主题

一、全局主题重构（52 文件）
  - 设计体系从深色/金色奢华调性全面迁移至 Pinnacle 风格的清爽专业调性
  - 主色：深海蓝 #003D6B，辅色：橙色 #F8971F / #E8870A（赔率强调色）
  - 背景从纯黑/深灰改为白色/浅灰 (#F5F7FA, #E8EDF2)
  - 更新 CSS 变量设计令牌体系：--primary, --border, --text-muted, --bg-body, --bg-hover, --radius-sm 等
  - styles.css 全量重写，所有组件 scoped CSS 同步适配

二、紧凑布局优化
  - 首页：BannerCarousel 轮播高度缩减 (clamp 148→120px)，MatchBetCard 内边距/间距/字号全面收紧
  - 首页：赛事卡片 padding 14px→10px，队旗尺寸 72×48→56×38，VS 区域缩小
  - 个人中心：钱包横幅宽高比 2/1→1.75/1，设置单元格 min-height 48→42px
  - 钱包页：交易行 padding/字号收紧，金额字号 15→14px
  - MainLayout：顶栏高度 50→48px，底部导航间距微调

三、对比度与可读性增强
  - 赛事详情/投注页背景从透明加深至 #E8EDF2
  - 所有卡片边框从 #E5E7EB 加深至 #CBD5E1，阴影强度提升
  - 盘口选择面板背景 #F5F7FA→#EDF0F4，增加 border-top 分隔线
  - 赔率颜色从 #F8971F 加深至 #E8870A，选中态 border-width 加粗至 2px
  - 标签字号增大并加粗 (font-weight: 600)，颜色从 #6B7280 加深至 #4B5563

四、首页快捷入口 & 个人中心网格布局
  - 首页新增 4 宫格快捷入口（投注/充值/账单/活动），彩色图标区分功能
  - 个人中心重构为「4 宫格快捷操作 + 列表」结构：钱包/充值/返水/记录
  - 移除原个人中心金色入口列表项，精简设置列表为修改资料/投注规则/语言

五、顶部导航栏重设计
  - Logo 从 img 标签替换为内联 SVG 纯文字：THE(灰) + BET(深蓝) + 365(橙)
  - 客服按钮改为纯图标圆形按钮 (32×32px)，增加竖线分隔符
  - Chip 高度 34→32px，间距 8→6px
  - 底部导航激活态指示条加粗至 2.5px，左右缩进从 22% 调至 18%

六、SVG Favicon
  - 新增纯路径 SVG favicon（无 <text> 元素，确保浏览器 favicon 沙箱兼容）
  - 深蓝圆角方块 + 白色 "B" 字母路径 + 橙色圆点 + 白色 "365" 数字路径
  - index.html 更新 favicon 引用为 /favicon.svg

🤖 Generated with [Qoder][https://qoder.com]

apps/player/src/views/MatchDetailView.vue

@@ -423,6 +423,7 @@ function onPickSelection(selId: string, marketId: string) {
 .detail-page {
   margin: 0 -16px;
   padding-bottom: 16px;
+  background: #E8EDF2;
 }
 
 .pull-indicator {
@@ -443,16 +444,16 @@ function onPickSelection(selId: string, marketId: string) {
   top: -12px;
   z-index: 50;
   margin-top: -12px;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(4px);
+  background: #FFFFFF;
+  border-bottom: 1px solid #CBD5E1;
 }
 
 .toolbar-title {
   flex: 1;
   text-align: center;
   font-size: 13px;
-  font-weight: 800;
-  color: var(--primary-light);
+  font-weight: 700;
+  color: #003D6B;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -470,9 +471,9 @@ function onPickSelection(selId: string, marketId: string) {
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--primary-light);
+  border: 1px solid #E5E7EB;
+  background: #F5F7FA;
+  color: #003D6B;
   font-size: 16px;
   font-weight: 700;
   line-height: 1;
@@ -483,75 +484,77 @@ function onPickSelection(selId: string, marketId: string) {
   opacity: 0.45;
 }
 
-/* ── match hero ── */
+/* -- match hero -- */
 .match-hero {
   position: relative;
   isolation: isolate;
-  margin: 0 0 10px;
+  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);
 }
 
 .match-hero--phase {
   opacity: 0.98;
 }
 
-/* ── hero status tag (top-right corner) ── */
+/* -- hero status tag (top-right corner) -- */
 .status-tag {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 5;
   font-size: 11px;
-  font-weight: 800;
+  font-weight: 700;
   padding: 4px 14px;
   border-radius: 0 6px 0 10px;
   line-height: 1.3;
   white-space: nowrap;
-  letter-spacing: 0.02em;
 }
 
 .status-tag--settled {
-  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
-  color: #8a9ab8;
-  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
-  border-left: 1px solid rgba(120, 140, 180, 0.3);
+  background: #E8EDF2;
+  color: #4B5563;
+  border-bottom: 1px solid #D1D5DB;
+  border-left: 1px solid #D1D5DB;
 }
 
 .status-tag--pending {
-  background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
-  color: #c8a84e;
-  border-bottom: 1px solid rgba(200, 168, 78, 0.3);
-  border-left: 1px solid rgba(200, 168, 78, 0.3);
+  background: #FEF3C7;
+  color: #92400E;
+  border-bottom: 1px solid #FDE68A;
+  border-left: 1px solid #FDE68A;
 }
 
-/* ── market panel smaller status tag ── */
+/* -- market panel smaller status tag -- */
 .market-status-tag {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 5;
   font-size: 10px;
-  font-weight: 800;
+  font-weight: 700;
   padding: 3px 10px;
   border-radius: 0 4px 0 8px;
   line-height: 1.3;
   white-space: nowrap;
-  letter-spacing: 0.02em;
 }
 
 .market-status-tag--settled {
-  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
-  color: #8a9ab8;
-  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
-  border-left: 1px solid rgba(120, 140, 180, 0.3);
+  background: #E8EDF2;
+  color: #4B5563;
+  border-bottom: 1px solid #D1D5DB;
+  border-left: 1px solid #D1D5DB;
 }
 
 .market-status-tag--pending {
-  background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
-  color: #c8a84e;
-  border-bottom: 1px solid rgba(200, 168, 78, 0.3);
-  border-left: 1px solid rgba(200, 168, 78, 0.3);
+  background: #FEF3C7;
+  color: #92400E;
+  border-bottom: 1px solid #FDE68A;
+  border-left: 1px solid #FDE68A;
 }
 
 .market-panel-wrap {
@@ -567,7 +570,7 @@ function onPickSelection(selId: string, marketId: string) {
   position: relative;
   z-index: 1;
   font-size: 11px;
-  color: var(--text-muted);
+  color: #6B7280;
   text-align: left;
   margin-top: 10px;
   padding-left: 2px;
@@ -579,18 +582,17 @@ function onPickSelection(selId: string, marketId: string) {
   margin: 8px 0 0;
   font-size: 28px;
   font-weight: 900;
-  color: #fff;
+  color: #003D6B;
   text-align: center;
-  letter-spacing: 0.06em;
 }
 
 .result-stats-section {
   margin: 0 10px 12px;
   padding: 12px;
-  border: 1px solid rgba(212, 175, 55, 0.22);
+  border: 1px solid #CBD5E1;
   border-radius: 8px;
-  background: linear-gradient(180deg, #1b1b1b 0%, #121212 100%);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
+  background: #FFFFFF;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
 .result-stats-head {
@@ -605,8 +607,8 @@ function onPickSelection(selId: string, marketId: string) {
   margin: 0;
   font-size: 14px;
   line-height: 1.2;
-  font-weight: 900;
-  color: var(--primary-light);
+  font-weight: 700;
+  color: #003D6B;
 }
 
 .result-stats-head span {
@@ -616,7 +618,7 @@ function onPickSelection(selId: string, marketId: string) {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 11px;
-  color: var(--text-muted);
+  color: #6B7280;
 }
 
 .result-stats-grid {
@@ -633,8 +635,8 @@ function onPickSelection(selId: string, marketId: string) {
   gap: 8px;
   padding: 8px 10px;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.035);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: #F5F7FA;
+  border: 1px solid #E5E7EB;
 }
 
 .result-stat-label {
@@ -643,15 +645,15 @@ function onPickSelection(selId: string, marketId: string) {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 11px;
-  color: var(--text-muted);
+  color: #6B7280;
 }
 
 .result-stat-value {
   flex-shrink: 0;
   font-size: 14px;
   line-height: 1;
-  font-weight: 900;
-  color: #fff;
+  font-weight: 700;
+  color: #1A1A2E;
 }
 
 .hero-teams {
@@ -674,8 +676,8 @@ function onPickSelection(selId: string, marketId: string) {
 
 .hero-name {
   font-size: 13px;
-  font-weight: 800;
-  color: var(--primary-light);
+  font-weight: 700;
+  color: #1A1A2E;
   text-align: center;
   line-height: 1.25;
   white-space: nowrap;
@@ -684,7 +686,7 @@ function onPickSelection(selId: string, marketId: string) {
   max-width: 100%;
 }
 
-/* VS arena — same as HomeView */
+/* VS arena -- blue themed */
 .vs-arena {
   position: relative;
   flex-shrink: 0;
@@ -710,7 +712,7 @@ function onPickSelection(selId: string, marketId: string) {
   stroke-width: 2.2;
   stroke-linecap: round;
   stroke-linejoin: round;
-  filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
+  filter: drop-shadow(0 0 4px rgba(0, 102, 204, 0.6)) drop-shadow(0 0 8px rgba(0, 91, 159, 0.35));
   opacity: 0;
 }
 
@@ -735,11 +737,11 @@ function onPickSelection(selId: string, marketId: string) {
   z-index: 1;
   background: linear-gradient(
     90deg,
-    rgba(94, 184, 255, 0) 0%,
-    rgba(184, 236, 255, 0.95) 28%,
-    #fff 50%,
-    rgba(255, 208, 128, 0.95) 72%,
-    rgba(255, 144, 64, 0) 100%
+    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%
   );
   opacity: 0;
   filter: blur(0.4px);
@@ -781,11 +783,11 @@ function onPickSelection(selId: string, marketId: string) {
 @keyframes vs-glow {
   0%, 100% {
     opacity: 0.82;
-    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
+    filter: drop-shadow(0 0 2px rgba(0, 61, 107, 0.2));
   }
   50% {
     opacity: 1;
-    filter: drop-shadow(0 0 3px rgba(255, 230, 140, 0.7)) drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
+    filter: drop-shadow(0 0 3px rgba(0, 102, 204, 0.5)) drop-shadow(0 0 6px rgba(0, 61, 107, 0.25));
   }
 }
 
@@ -800,22 +802,22 @@ function onPickSelection(selId: string, marketId: string) {
 .market-list {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   padding: 4px 0;
 }
 
 .market-group {
   border-radius: 8px;
-  border: 1px solid #252525;
-  background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
+  border: 1px solid #CBD5E1;
+  background: #FFFFFF;
   overflow: hidden;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .market-group.open {
-  border-color: rgba(212, 175, 55, 0.25);
-  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.08);
+  border-color: #9CA3AF;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
 
 .market-group :deep(.row) {
@@ -831,28 +833,28 @@ function onPickSelection(selId: string, marketId: string) {
   width: calc(100% - 16px);
   margin: 0 8px 10px;
   padding: 9px;
-  border-radius: 4px;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.1);
-  color: var(--primary-light);
+  border-radius: 6px;
+  border: 1px solid #E5E7EB;
+  background: #F5F7FA;
+  color: #003D6B;
   font-size: 13px;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .state {
   text-align: center;
   padding: 48px;
-  color: var(--text-muted);
+  color: #6B7280;
 }
 
 .cs-toast {
   text-align: center;
   font-size: 12px;
-  color: var(--primary-light);
+  color: #003D6B;
   padding: 2px 0 6px;
 }
 
-/* ── 我的投注 ── */
+/* -- my bets -- */
 .my-bets-section {
   padding: 0 12px;
   margin-bottom: 12px;
@@ -861,7 +863,7 @@ function onPickSelection(selId: string, marketId: string) {
 .my-bets-title {
   font-size: 14px;
   font-weight: 700;
-  color: #ccc;
+  color: #1A1A2E;
   margin: 0 0 8px;
 }
 
@@ -872,16 +874,17 @@ function onPickSelection(selId: string, marketId: string) {
 }
 
 .my-bet-card {
-  background: #1c1c1c;
-  border: 1px solid #2e2e2e;
+  background: #FFFFFF;
+  border: 1px solid #CBD5E1;
   border-radius: 8px;
   padding: 10px 12px;
   cursor: pointer;
   transition: background 0.15s;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
 .my-bet-card:active {
-  background: #252525;
+  background: #F5F7FA;
 }
 
 .bet-header {
@@ -894,7 +897,7 @@ function onPickSelection(selId: string, marketId: string) {
 .bet-type {
   font-size: 12px;
   font-weight: 700;
-  color: #fff;
+  color: #1A1A2E;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -911,18 +914,18 @@ function onPickSelection(selId: string, marketId: string) {
 }
 
 .bet-status-won {
-  background: rgba(61, 184, 101, 0.15);
-  color: #3db865;
+  background: #E6F4EA;
+  color: #059669;
 }
 
 .bet-status-lost {
-  background: rgba(224, 80, 80, 0.15);
-  color: #e05050;
+  background: #FDE8E8;
+  color: #DC2626;
 }
 
 .bet-status-pending {
-  background: rgba(232, 200, 74, 0.15);
-  color: #e8c84a;
+  background: #FEF3C7;
+  color: #D97706;
 }
 
 .bet-footer {
@@ -933,12 +936,12 @@ function onPickSelection(selId: string, marketId: string) {
 
 .bet-stake {
   font-size: 11px;
-  color: #888;
+  color: #6B7280;
 }
 
 .bet-return {
   font-size: 13px;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 </style>