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

将玩家端组件与核心页面全面切换为统一主题变量，优化卡片、按钮、弹窗、列表和盘口相关模块的视觉表现，并补充多语言文案以匹配新的交互与布局风格。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-16 15:55:28 +08:00
parent 4a93fcfce0
commit d2c0b575b7
51 changed files with 1539 additions and 1212 deletions
--- a/apps/player/src/views/BetDetailView.vue
+++ b/apps/player/src/views/BetDetailView.vue
@@ -275,7 +275,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .back-btn {
  background: none;
  border: none;
-  color: #003D6B;
+  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 0 8px;
@@ -288,12 +288,12 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .state {
  text-align: center;
  padding: 60px 20px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
 }

-/* ── hero ── */
+/* ─ hero ── */
 .hero {
  border-radius: 12px;
  padding: 20px 20px 18px;
@@ -305,10 +305,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  text-align: center;
 }

-.hero.won    { background: rgba(5, 150, 105, 0.08); border: 1px solid rgba(5, 150, 105, 0.2); }
-.hero.lost   { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.15); }
-.hero.pending { background: rgba(248, 151, 31, 0.06); border: 1px solid rgba(248, 151, 31, 0.18); }
-.hero.push   { background: #FFFFFF; border: 1px solid #E5E7EB; }
+.hero.won    { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); }
+.hero.lost   { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); }
+.hero.pending { background: rgba(255, 179, 0, 0.1); border: 1px solid rgba(255, 179, 0, 0.25); }
+.hero.push   { background: var(--bg-card); border: 1px solid var(--border); }

 .hero-status {
  font-size: 11px;
@@ -317,10 +317,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  text-transform: uppercase;
  opacity: 0.85;
 }
-.hero.won    .hero-status  { color: #059669; }
-.hero.lost   .hero-status  { color: #DC2626; }
-.hero.pending .hero-status { color: #F8971F; }
-.hero.push   .hero-status  { color: #6B7280; }
+.hero.won    .hero-status  { color: var(--success); }
+.hero.lost   .hero-status  { color: var(--danger); }
+.hero.pending .hero-status { color: var(--warning); }
+.hero.push   .hero-status  { color: var(--text-muted); }

 .hero-return {
  font-size: 36px;
@@ -328,26 +328,26 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  letter-spacing: -0.01em;
  line-height: 1.1;
 }
-.hero.won    .hero-return  { color: #059669; }
-.hero.lost   .hero-return  { color: #DC2626; }
-.hero.pending .hero-return { color: #F8971F; }
-.hero.push   .hero-return  { color: #6B7280; }
+.hero.won    .hero-return  { color: var(--success); }
+.hero.lost   .hero-return  { color: var(--danger); }
+.hero.pending .hero-return { color: var(--warning); }
+.hero.push   .hero-return  { color: var(--text-muted); }

 .hero-return-label {
  font-size: 10.5px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
 }

 /* ── sections ── */
 .section {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow);
 }

 .section-head {
@@ -359,20 +359,20 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));

 .league-tag {
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 700;
 }

 .placed-time {
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
 }

 .match-name {
  font-size: 17px;
  font-weight: 900;
-  color: #1A1A2E;
+  color: var(--text);
  line-height: 1.3;
  margin-bottom: 10px;
 }
@@ -399,18 +399,18 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));

 .row-label {
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
 }

 .row-val {
  font-size: 13px;
  font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
 }

 .row-val.pick {
-  color: #003D6B;
+  color: var(--primary);
 }

 .score-chips {
@@ -422,15 +422,15 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  display: flex;
  align-items: center;
  gap: 5px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
 }

 .score-period {
  font-size: 10px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
@@ -439,24 +439,24 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .score-value {
  font-size: 16px;
  font-weight: 900;
-  color: #1A1A2E;
+  color: var(--text);
 }

 .score-value.muted {
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 13px;
 }

 .no-score {
  font-size: 11.5px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-style: italic;
 }

 /* section title */
 .section-title {
  font-size: 10.5px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
@@ -475,14 +475,14 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
 }

-.leg-row.won  { border-color: rgba(5, 150, 105, 0.25); }
-.leg-row.lost { border-color: rgba(220, 38, 38, 0.2); }
+.leg-row.won  { border-color: rgba(16, 185, 129, 0.3); }
+.leg-row.lost { border-color: rgba(239, 68, 68, 0.3); }

 .leg-left {
  display: flex;
@@ -497,8 +497,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  width: 20px;
  height: 20px;
  border-radius: 50%;
-  background: #E8EDF2;
-  color: #6B7280;
+  background: var(--secondary);
+  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  display: flex;
@@ -507,8 +507,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  margin-top: 1px;
 }

-.leg-num.won  { background: rgba(5, 150, 105, 0.12); color: #059669; }
-.leg-num.lost { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
+.leg-num.won  { background: rgba(16, 185, 129, 0.15); color: var(--success); }
+.leg-num.lost { background: rgba(239, 68, 68, 0.15); color: var(--danger); }

 .leg-body {
  display: flex;
@@ -520,12 +520,12 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .leg-match {
  font-size: 12.5px;
  font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
 }

 .leg-pick-line {
  font-size: 11.5px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
 }

@@ -538,11 +538,11 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .leg-scores span {
  font-size: 11px;
  font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
 }

 .leg-scores .muted-score {
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .leg-right {
@@ -556,7 +556,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .leg-odds-val {
  font-size: 15px;
  font-weight: 900;
-  color: #003D6B;
+  color: var(--primary);
 }

 .leg-result-badge {
@@ -568,10 +568,10 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  border-radius: 10px;
 }

-.leg-result-badge.won   { color: #059669; background: rgba(5, 150, 105, 0.1); }
-.leg-result-badge.lost  { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
-.leg-result-badge.push  { color: #6B7280; background: #E8EDF2; }
-.leg-result-badge.pending { color: #6B7280; background: #F5F7FA; }
+.leg-result-badge.won   { color: var(--success); background: rgba(16, 185, 129, 0.12); }
+.leg-result-badge.lost  { color: var(--danger); background: rgba(239, 68, 68, 0.12); }
+.leg-result-badge.push  { color: var(--text-muted); background: var(--secondary); }
+.leg-result-badge.pending { color: var(--text-muted); background: var(--bg-body); }

 /* summary */
 .summary-rows {
@@ -585,9 +585,9 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
-  border-bottom: 1px solid #E5E7EB;
+  border-bottom: 1px solid var(--border);
  font-size: 13px;
-  color: #1A1A2E;
+  color: var(--text);
  font-weight: 600;
 }

@@ -596,28 +596,28 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 }

 .sum-row.muted {
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 11px;
 }

 .odds-val {
-  color: #F8971F;
+  color: var(--warning);
  font-weight: 800;
 }

 .amt-won {
-  color: #059669;
+  color: var(--success);
  font-weight: 900;
  font-size: 15px;
 }

 .amt-pending {
-  color: #F8971F;
+  color: var(--warning);
  font-weight: 900;
 }

 .amt-lost {
-  color: #DC2626;
+  color: var(--danger);
  font-weight: 900;
  font-size: 15px;
 }
@@ -625,5 +625,6 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .bet-no-val {
  font-family: monospace;
  letter-spacing: 0.04em;
+  color: var(--text-secondary);
 }
 </style>
--- a/apps/player/src/views/CashbackRecordsView.vue
+++ b/apps/player/src/views/CashbackRecordsView.vue
@@ -202,7 +202,7 @@ const pullIndicatorStyle = () => ({
 .back-btn {
  background: none;
  border: none;
-  color: #003D6B;
+  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 0 8px;
@@ -226,7 +226,7 @@ const pullIndicatorStyle = () => ({
  align-items: center;
  gap: 12px;
  text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
  padding: 56px 20px;
  font-weight: 600;
  font-size: 14px;
@@ -244,28 +244,28 @@ const pullIndicatorStyle = () => ({
  padding: 18px 16px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
-  background: linear-gradient(135deg, rgba(0, 61, 107, 0.06), #FFFFFF);
-  border: 1px solid #E5E7EB;
+  background: linear-gradient(135deg, rgba(244, 162, 97, 0.15), var(--bg-card));
+  border: 1px solid var(--border);
  text-align: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow);
 }

 .hero-amount {
  font-size: 28px;
  font-weight: 800;
-  color: #003D6B;
+  color: var(--primary);
  line-height: 1.2;
 }

 .hero-sub {
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
  line-height: 1.4;
 }

 .section-title {
  font-size: 10.5px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
@@ -273,16 +273,16 @@ const pullIndicatorStyle = () => ({
 }

 .list-card {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow);
 }

 .record-row {
  padding: 12px 16px;
-  border-bottom: 1px solid #E5E7EB;
+  border-bottom: 1px solid var(--border);
 }

 .record-row:last-child {
@@ -290,15 +290,15 @@ const pullIndicatorStyle = () => ({
 }

 .record-row--highlight {
-  background: rgba(0, 61, 107, 0.04);
-  box-shadow: inset 3px 0 0 #003D6B;
+  background: rgba(244, 162, 97, 0.1);
+  box-shadow: inset 3px 0 0 var(--primary);
 }

 .ledger-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .row-main {
@@ -318,12 +318,12 @@ const pullIndicatorStyle = () => ({
 .row-amount {
  font-size: 17px;
  font-weight: 800;
-  color: #003D6B;
+  color: var(--primary);
 }

 .row-period {
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
 }

@@ -331,9 +331,9 @@ const pullIndicatorStyle = () => ({
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
-  color: #F8971F;
-  background: rgba(248, 151, 31, 0.08);
-  border: 1px solid rgba(248, 151, 31, 0.22);
+  color: var(--warning);
+  background: rgba(255, 179, 0, 0.12);
+  border: 1px solid rgba(255, 179, 0, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
 }
@@ -344,7 +344,7 @@ const pullIndicatorStyle = () => ({
  gap: 8px 16px;
  margin-top: 8px;
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .row-foot {
@@ -354,9 +354,9 @@ const pullIndicatorStyle = () => ({
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
-  border-top: 1px dashed #E5E7EB;
+  border-top: 1px dashed var(--border);
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .row-batch {
@@ -380,14 +380,14 @@ const pullIndicatorStyle = () => ({
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .empty-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .sentinel {
@@ -403,7 +403,7 @@ const pullIndicatorStyle = () => ({
 .end-hint {
  text-align: center;
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  padding: 16px 0 4px;
  letter-spacing: 0.03em;
--- a/apps/player/src/views/FootballView.vue
+++ b/apps/player/src/views/FootballView.vue
@@ -16,7 +16,6 @@ import {
 } from '@thebet365/shared';

 type MainTab = 'matches' | 'outright';
-type TimeTab = 'today' | 'early';

 interface Match {
  id: string;
@@ -62,17 +61,16 @@ const { t } = useI18n();
 const router = useRouter();

 const mainTab = ref<MainTab>('matches');
-const timeTab = ref<TimeTab>('today');
-const showAll = ref(false);
+const filterState = ref({
+  time: 'all' as 'all' | 'today' | 'early',
+  status: 'open' as 'all' | 'open' | 'settled',
+  leagueIds: [] as string[]
+});
 const outrightActivated = ref(false);
 const filterNow = ref(new Date());
 const { summaryMatches, summaryLoading, loadSummary } = usePlayerMatches();
 const matches = summaryMatches;
 const loading = summaryLoading;
-const expandedLeagues = ref<Record<TimeTab, Set<string>>>({
-  today: new Set(),
-  early: new Set(),
-});

 async function loadMatches() {
  filterNow.value = new Date();
@@ -90,18 +88,73 @@ const pullIndicatorStyle = () => ({
  opacity: Math.min(pullDistance.value / 48, 1),
 });

-function filterMatchesForTab(tab: TimeTab) {
+const filteredMatches = computed(() => {
  if (mainTab.value !== 'matches') return [];
  const now = filterNow.value;
  return matches.value.filter((m) => {
-    const timeMatch =
-      tab === 'today'
-        ? isInTodayMatchWindow(m.startTime, now)
-        : isAfterTodayMatchWindow(m.startTime, now);
+    let timeMatch = true;
+    if (filterState.value.time === 'today') {
+      timeMatch = isInTodayMatchWindow(m.startTime, now);
+    } else if (filterState.value.time === 'early') {
+      timeMatch = isAfterTodayMatchWindow(m.startTime, now);
+    }
    if (!timeMatch) return false;
-    if (!showAll.value && m.matchPhase !== 'open' && m.matchPhase !== undefined) return false;
+    
+    if (filterState.value.status === 'open' && m.matchPhase !== 'open' && m.matchPhase !== undefined) return false;
+    if (filterState.value.status === 'settled' && m.matchPhase !== 'settled') return false;
+
+    if (filterState.value.leagueIds.length > 0) {
+      const id = m.leagueId ?? m.leagueName;
+      if (!filterState.value.leagueIds.includes(id)) return false;
+    }
+
    return true;
  });
+});
+
+const availableLeagues = computed(() => {
+  const map = new Map<string, { id: string, name: string }>();
+  for (const m of matches.value) {
+    let timeMatch = true;
+    if (filterState.value.time === 'today') {
+      timeMatch = isInTodayMatchWindow(m.startTime, filterNow.value);
+    } else if (filterState.value.time === 'early') {
+      timeMatch = isAfterTodayMatchWindow(m.startTime, filterNow.value);
+    }
+    if (!timeMatch) continue;
+    
+    const id = m.leagueId ?? m.leagueName;
+    if (!map.has(id)) {
+      map.set(id, { id, name: m.leagueName });
+    }
+  }
+  return [...map.values()].sort((a, b) => a.name.localeCompare(b.name));
+});
+
+watch(() => filterState.value.time, () => {
+  filterState.value.leagueIds = [];
+});
+
+const dropdownOpen = ref(false);
+
+const selectedLeagueName = computed(() => {
+  if (filterState.value.leagueIds.length === 0) return '';
+  const firstId = filterState.value.leagueIds[0];
+  const lg = availableLeagues.value.find(l => l.id === firstId);
+  return lg ? lg.name : '';
+});
+
+function selectLeague(id: string) {
+  if (id === '') {
+    filterState.value.leagueIds = [];
+  } else {
+    filterState.value.leagueIds = [id];
+  }
+  dropdownOpen.value = false;
+}
+
+function toggleStatusOpen() {
+  filterState.value.status = filterState.value.status === 'open' ? 'all' : 'open';
 }

 function buildLeagueGroups(source: Match[]): LeagueGroup[] {
@@ -133,32 +186,28 @@ function buildLeagueGroups(source: Match[]): LeagueGroup[] {
  );
 }

-const todayLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('today')));
-const earlyLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('early')));
+const leagueGroups = computed(() => buildLeagueGroups(filteredMatches.value));

-function syncExpandedLeagues(groups: LeagueGroup[], tab: TimeTab) {
-  const current = expandedLeagues.value[tab];
-  const ids = new Set(current);
+const expandedLeagues = ref(new Set<string>());
+
+watch(leagueGroups, (groups) => {
+  const ids = new Set(expandedLeagues.value);
  for (const id of [...ids]) {
    if (!groups.some((g) => g.leagueId === id)) ids.delete(id);
  }
  if (groups.length > 0 && ids.size === 0) {
    ids.add(groups[0].leagueId);
  }
-  if (ids.size !== current.size || [...ids].some((id) => !current.has(id))) {
-    expandedLeagues.value = { ...expandedLeagues.value, [tab]: ids };
+  if (ids.size !== expandedLeagues.value.size || [...ids].some((id) => !expandedLeagues.value.has(id))) {
+    expandedLeagues.value = ids;
  }
-}
-
-watch(todayLeagueGroups, (groups) => syncExpandedLeagues(groups, 'today'));
-watch(earlyLeagueGroups, (groups) => syncExpandedLeagues(groups, 'early'));
+});

 function toggleLeague(leagueId: string) {
-  const tab = timeTab.value;
-  const next = new Set(expandedLeagues.value[tab]);
+  const next = new Set(expandedLeagues.value);
  if (next.has(leagueId)) next.delete(leagueId);
  else next.add(leagueId);
-  expandedLeagues.value = { ...expandedLeagues.value, [tab]: next };
+  expandedLeagues.value = next;
 }

 function selectMainTab(tab: MainTab) {
@@ -168,7 +217,7 @@ function selectMainTab(tab: MainTab) {

 onActivated(() => {
  filterNow.value = new Date();
-  timeTab.value = 'today';
+  filterState.value.time = 'all';
  void loadSummary(true, true);
 });

@@ -208,72 +257,90 @@ function goMatch(id: string) {
    </div>

    <div :class="['tab-panel', { 'tab-panel--hidden': mainTab !== 'matches' }]">
-      <div class="time-tabs">
-        <button
-          type="button"
-          class="time-tab"
-          :class="{ active: timeTab === 'today', 'tab-gold-active': timeTab === 'today' }"
-          @click="timeTab = 'today'"
-        >
-          {{ t('bet.tab_today') }}
-        </button>
-        <button
-          type="button"
-          class="time-tab"
-          :class="{ active: timeTab === 'early', 'tab-gold-active': timeTab === 'early' }"
-          @click="timeTab = 'early'"
-        >
-          {{ t('bet.tab_early') }}
-        </button>
-      </div>
+      <div class="filters-bar">
+        <div class="phase-filter">
+          <div class="league-dropdown">
+            <button type="button" class="dropdown-trigger" @click="dropdownOpen = !dropdownOpen">
+              <span>{{ selectedLeagueName || t('bet.filter_leagues_all') }}</span>
+              <span class="arrow-icon" :class="{ open: dropdownOpen }">▼</span>
+            </button>
+            <div v-if="dropdownOpen" class="dropdown-backdrop" @click="dropdownOpen = false"></div>
+            <div v-if="dropdownOpen" class="dropdown-menu">
+              <div 
+                class="dropdown-item" 
+                :class="{ active: filterState.leagueIds.length === 0 }"
+                @click="selectLeague('')"
+              >
+                {{ t('bet.filter_leagues_all') }}
+              </div>
+              <div 
+                v-for="lg in availableLeagues" 
+                :key="lg.id"
+                class="dropdown-item" 
+                :class="{ active: filterState.leagueIds.includes(lg.id) }"
+                @click="selectLeague(lg.id)"
+              >
+                {{ lg.name }}
+              </div>
+            </div>
+          </div>
+        </div>

-      <div class="phase-filter">
-        <button
-          type="button"
-          class="phase-toggle"
-          :class="{ 'phase-toggle--active': !showAll }"
-          :aria-pressed="!showAll"
-          @click="showAll = !showAll"
-        >
-          <span class="phase-toggle-dot" />
-          {{ t('bet.show_open_only') }}
-        </button>
+        <div class="right-filters">
+          <div class="time-tabs">
+            <button 
+              type="button" 
+              class="time-tab" 
+              :class="{ active: filterState.time === 'all' }"
+              @click="filterState.time = 'all'"
+            >
+              {{ t('bet.filter_status_all') }}
+            </button>
+            <button 
+              type="button" 
+              class="time-tab" 
+              :class="{ active: filterState.time === 'today' }"
+              @click="filterState.time = 'today'"
+            >
+              {{ t('bet.tab_today') }}
+            </button>
+            <button 
+              type="button" 
+              class="time-tab" 
+              :class="{ active: filterState.time === 'early' }"
+              @click="filterState.time = 'early'"
+            >
+              {{ t('bet.tab_early') }}
+            </button>
+          </div>
+          
+          <div class="divider"></div>
+
+          <button
+            type="button"
+            class="status-toggle-btn"
+            :class="{ active: filterState.status === 'open' }"
+            @click="toggleStatusOpen"
+          >
+            {{ t('bet.filter_status_open') }}
+          </button>
+        </div>
      </div>

      <div v-if="loading" class="state">
        <GoldSpinner :size="36" />
      </div>
      <template v-else>
-        <div v-show="timeTab === 'today'">
-          <div v-if="todayLeagueGroups.length" class="league-list">
+        <div>
+          <div v-if="leagueGroups.length" class="league-list">
            <LeagueAccordionItem
-              v-for="group in todayLeagueGroups"
-              :key="`today-${group.leagueId}`"
+              v-for="group in leagueGroups"
+              :key="group.leagueId"
              :league-id="group.leagueId"
              :league-name="group.leagueName"
              :league-logo-url="group.leagueLogoUrl"
              :matches="group.matches"
-              :expanded="expandedLeagues.today.has(group.leagueId)"
-              @toggle="toggleLeague(group.leagueId)"
-              @bet="goMatch"
-            />
-          </div>
-          <div v-else class="empty">
-            <img :src="emptyMatchesImg" alt="" class="empty-icon" />
-            <p>{{ t('bet.no_matches') }}</p>
-          </div>
-        </div>
-
-        <div v-show="timeTab === 'early'">
-          <div v-if="earlyLeagueGroups.length" class="league-list">
-            <LeagueAccordionItem
-              v-for="group in earlyLeagueGroups"
-              :key="`early-${group.leagueId}`"
-              :league-id="group.leagueId"
-              :league-name="group.leagueName"
-              :league-logo-url="group.leagueLogoUrl"
-              :matches="group.matches"
-              :expanded="expandedLeagues.early.has(group.leagueId)"
+              :expanded="expandedLeagues.has(group.leagueId)"
              @toggle="toggleLeague(group.leagueId)"
              @bet="goMatch"
            />
@@ -292,6 +359,8 @@ function goMatch(id: string) {
      :activated="mainTab === 'outright'"
    />

+
+
  </div>
 </template>

@@ -307,7 +376,7 @@ function goMatch(id: string) {
 .bet-page {
  margin: 0 -16px;
  padding-bottom: 8px;
-  background: #E8EDF2;
+  background: var(--bg-body);
 }

 /* Tab panel toggle: avoid display:none to prevent browser releasing image resources */
@@ -341,22 +410,22 @@ function goMatch(id: string) {
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
-  border-radius: 8px;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  color: #6B7280;
+  border-radius: var(--radius-sm);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  position: relative;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
 }

 .main-tab.active {
  font-weight: 700;
-  background: #EBF3FB;
-  border-color: #003D6B;
-  color: #003D6B;
+  background: rgba(244, 162, 97, 0.1);
+  border-color: var(--primary);
+  color: var(--primary-light);
 }

 .tab-icon {
@@ -364,68 +433,166 @@ function goMatch(id: string) {
  line-height: 1;
 }

-.time-tabs {
+.filters-bar {
  display: flex;
-  gap: 10px;
-  padding: 0 12px 14px;
-}
-
-.time-tab {
-  flex: 1;
-  padding: 9px 16px;
-  border-radius: 999px;
-  font-size: 14px;
-  font-weight: 700;
-  color: #003D6B;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-
-.time-tab.active {
-  background: #003D6B !important;
-  border-color: #003D6B !important;
-  color: #FFFFFF !important;
-  font-weight: 700;
-  box-shadow: 0 2px 8px rgba(0, 61, 107, 0.25);
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 0 16px 12px;
 }

 .phase-filter {
-  padding: 0 12px 10px;
+  padding: 0;
+  display: flex;
+  align-items: center;
 }

-.phase-toggle {
+.right-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.time-tabs {
+  display: flex;
+  align-items: center;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 2px;
+  height: 24px;
+  box-sizing: border-box;
+}
+
+.time-tab {
+  padding: 0 8px;
+  height: 100%;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.time-tab.active {
+  color: var(--primary-light);
+  background: rgba(244, 162, 97, 0.15);
+  font-weight: 600;
+}
+
+.right-filters .divider {
+  width: 1px;
+  height: 12px;
+  background: var(--border);
+}
+
+.status-toggle-btn {
+  padding: 0 8px;
+  height: 24px;
+  box-sizing: border-box;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-toggle-btn.active {
+  color: var(--primary-light);
+  background: rgba(244, 162, 97, 0.15);
+  border-color: var(--primary);
+  font-weight: 600;
+}
+
+/* League Dropdown Selector */
+.league-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
-  padding: 6px 14px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #6B7280;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
  cursor: pointer;
-  transition: all 0.2s ease;
+  height: 24px;
+  box-sizing: border-box;
 }

-.phase-toggle--active {
-  color: #003D6B;
-  border-color: #003D6B;
-  background: rgba(0, 61, 107, 0.06);
+.dropdown-trigger .arrow-icon {
+  font-size: 8px;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+  display: inline-block;
+  transform: scale(0.8);
 }

-.phase-toggle-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #CBD5E1;
-  transition: background 0.2s ease;
+.dropdown-trigger .arrow-icon.open {
+  transform: scale(0.8) rotate(180deg);
 }

-.phase-toggle--active .phase-toggle-dot {
-  background: #003D6B;
+.dropdown-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 98;
+  background: transparent;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 99;
+  min-width: 140px;
+  max-width: 200px;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--bg-card-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+  padding: 4px 0;
+}
+
+.dropdown-item {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dropdown-item:hover,
+.dropdown-item:active {
+  background: var(--bg-body);
+}
+
+.dropdown-item.active {
+  color: var(--primary-light);
+  background: rgba(244, 162, 97, 0.1);
+  font-weight: 600;
 }

 .league-list {
@@ -436,7 +603,7 @@ function goMatch(id: string) {
 .placeholder,
 .empty {
  text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
  padding: 48px 20px;
  font-weight: 600;
 }
--- a/apps/player/src/views/ForgotPasswordView.vue
+++ b/apps/player/src/views/ForgotPasswordView.vue
@@ -197,30 +197,48 @@ function goLogin() {
  align-items: center;
  justify-content: flex-end;
  padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
-  background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
+  background-color: var(--bg-body);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
 }

+.login-page::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 32, 39, 0.7);
+  z-index: 0;
+}
+
+.login-page::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
+  z-index: 0;
+}
+
 .login-form {
+  position: relative;
+  z-index: 1;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }

 .form-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
  text-align: center;
 }

@@ -232,7 +250,7 @@ function goLogin() {

 label {
  font-size: 10px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
 }
@@ -241,22 +259,22 @@ label {
  width: 100%;
  height: 36px;
  padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
  border-radius: 6px;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  background: var(--bg-input);
+  color: var(--text);
  font-size: 14px;
  font-family: inherit;
 }

 .field-input::placeholder {
-  color: rgba(107, 114, 128, 0.6);
+  color: rgba(148, 163, 184, 0.6);
 }

 .field-input:focus {
  outline: none;
-  border-color: #0066CC;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
 }

 .inline-row {
@@ -274,10 +292,10 @@ label {
  flex-shrink: 0;
  height: 36px;
  padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
  border-radius: 6px;
-  background: #F5F7FA;
-  color: #003D6B;
+  background: var(--bg-elevated);
+  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
@@ -307,19 +325,19 @@ label {
  padding: 8px 14px;
  border: none;
  background: transparent;
-  color: #003D6B;
+  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
 }

 .btn-skip:active {
-  color: #005B9F;
+  color: var(--primary-light);
 }

 .error {
  margin: 0;
-  color: #DC2626;
+  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -49,32 +49,7 @@ function formatKickoff(startTime: string) {

    <BannerCarousel :banners="banners" />

-    <div class="quick-entries">
-      <button type="button" class="qe-item" @click="router.push('/bet')">
-        <span class="qe-icon qe-icon--bet">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 000 20 14.5 14.5 0 000-20M2 12h20"/></svg>
-        </span>
-        <span class="qe-label">{{ t('nav.bet') }}</span>
-      </button>
-      <button type="button" class="qe-item" @click="router.push('/wallet/recharge')">
-        <span class="qe-icon qe-icon--recharge">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M12 15h4"/></svg>
-        </span>
-        <span class="qe-label">{{ t('recharge.title') }}</span>
-      </button>
-      <button type="button" class="qe-item" @click="router.push('/wallet/detail')">
-        <span class="qe-icon qe-icon--bill">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><path d="M9 5H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V9"/><path d="M9 5a2 2 0 012-2h2a2 2 0 012 2v0M9 12h6M9 16h4"/></svg>
-        </span>
-        <span class="qe-label">{{ t('wallet.view_all') }}</span>
-      </button>
-      <button type="button" class="qe-item" @click="router.push('/bet')">
-        <span class="qe-icon qe-icon--promo">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-        </span>
-        <span class="qe-label">{{ t('home.hot_matches') || '热门赛事' }}</span>
-      </button>
-    </div>
+

    <h2 class="section-title">{{ t('home.hot_matches') }}</h2>
    <div
@@ -99,11 +74,11 @@ function formatKickoff(startTime: string) {
          <svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
            <defs>
              <linearGradient :id="`hzBoltGrad-${match.id}`" 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
@@ -148,8 +123,11 @@ function formatKickoff(startTime: string) {
 .quick-entries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
+  grid-template-areas:
+    "a a b b"
+    "c d e f";
  gap: 8px;
-  margin-bottom: 14px;
+  margin-bottom: 16px;
  padding: 0 2px;
 }

@@ -159,17 +137,44 @@ function formatKickoff(startTime: string) {
  align-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
-  border-radius: 10px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  border-radius: var(--radius-sm);
+  min-width: 0;
+  overflow: hidden;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
 }

 .qe-item:active {
  transform: scale(0.96);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.qe-item:nth-child(1) { grid-area: a; }
+.qe-item:nth-child(2) { grid-area: b; }
+.qe-item:nth-child(3) { grid-area: c; }
+.qe-item:nth-child(4) { grid-area: d; }
+.qe-item:nth-child(5) { grid-area: e; }
+.qe-item:nth-child(6) { grid-area: f; }
+
+.qe-item--wide {
+  flex-direction: row;
+  gap: 10px;
+  padding: 14px 12px;
+  justify-content: flex-start;
+}
+
+.qe-item.qe-item--wide .qe-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+}
+
+.qe-item.qe-item--wide .qe-label {
+  font-size: 13px;
+  font-weight: 700;
 }

 .qe-icon {
@@ -182,29 +187,29 @@ function formatKickoff(startTime: string) {
 }

 .qe-icon--bet {
-  background: rgba(0, 61, 107, 0.1);
-  color: #003D6B;
+  background: rgba(244, 162, 97, 0.15);
+  color: #FFB980;
 }

 .qe-icon--recharge {
-  background: rgba(5, 150, 105, 0.1);
-  color: #059669;
+  background: rgba(16, 185, 129, 0.15);
+  color: #10B981;
 }

 .qe-icon--bill {
-  background: rgba(248, 151, 31, 0.1);
-  color: #E8870A;
+  background: rgba(255, 179, 0, 0.15);
+  color: #FFB300;
 }

-.qe-icon--promo {
-  background: rgba(220, 38, 38, 0.08);
-  color: #DC2626;
+.qe-icon--history {
+  background: rgba(231, 111, 81, 0.15);
+  color: #E76F51;
 }

 .qe-label {
  font-size: 11px;
  font-weight: 600;
-  color: #1A1A2E;
+  color: var(--text);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
@@ -216,10 +221,10 @@ function formatKickoff(startTime: string) {
 .section-title {
  font-size: 15px;
  font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
  margin: 0 0 8px;
  padding-left: 10px;
-  border-left: 3px solid #003D6B;
+  border-left: 3px solid var(--primary);
  line-height: 1.3;
 }

@@ -233,10 +238,10 @@ function formatKickoff(startTime: string) {
  margin-bottom: 8px;
  padding: 10px 12px;
  min-height: 60px;
-  border: 1px solid #E5E7EB;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-  background: #FFFFFF;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow);
+  background: var(--bg-card);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
@@ -246,14 +251,14 @@ function formatKickoff(startTime: string) {
  content: '';
  position: absolute;
  inset: 0;
-  background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 60%);
+  background: linear-gradient(135deg, rgba(244, 162, 97, 0.06) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
 }

 .match-card:active {
  transform: scale(0.995);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 .match-info,
@@ -272,12 +277,12 @@ function formatKickoff(startTime: string) {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.3;
-  color: #1A1A2E;
+  color: var(--text);
 }

 .match-time {
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 500;
 }

@@ -314,7 +319,7 @@ function formatKickoff(startTime: 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;
 }

@@ -339,11 +344,11 @@ function formatKickoff(startTime: 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);
@@ -360,7 +365,7 @@ function formatKickoff(startTime: string) {
  width: 40px;
  height: auto;
  object-fit: contain;
-  filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
+  filter: drop-shadow(0 0 3px rgba(244, 162, 97, 0.25));
 }

 .match-card--live-anim .vs-img {
@@ -448,21 +453,21 @@ function formatKickoff(startTime: string) {
  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));
+      drop-shadow(0 0 3px rgba(244, 162, 97, 0.5))
+      drop-shadow(0 0 6px rgba(255, 185, 128, 0.25));
  }
 }

@media (prefers-reduced-motion: reduce) {
  .vs-img {
    animation: none;
-    filter: drop-shadow(0 0 3px rgba(0, 61, 107, 0.25));
+    filter: drop-shadow(0 0 3px rgba(244, 162, 97, 0.25));
  }

  .hz-path,
@@ -474,7 +479,7 @@ function formatKickoff(startTime: string) {

 .empty {
  text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
  padding: 28px 16px;
  font-weight: 600;
 }
--- a/apps/player/src/views/LoginView.vue
+++ b/apps/player/src/views/LoginView.vue
@@ -164,23 +164,41 @@ function goRegister() {
  align-items: center;
  justify-content: flex-end;
  padding: 34vh 20px calc(15vh + max(28px, env(safe-area-inset-bottom)));
-  background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
+  background-color: var(--bg-body);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
 }

+.login-page::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 32, 39, 0.7);
+  z-index: 0;
+}
+
+.login-page::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
+  z-index: 0;
+}
+
 .login-form {
+  position: relative;
+  z-index: 1;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }

 .field {
@@ -193,18 +211,18 @@ function goRegister() {
  width: 100%;
  height: 36px;
  padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
  border-radius: 6px;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  background: var(--bg-input);
+  color: var(--text);
  font-size: 14px;
  font-family: inherit;
 }

 .field-input:focus {
  outline: none;
-  border-color: #0066CC;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
 }

 .inline-row {
@@ -220,7 +238,7 @@ function goRegister() {

 label {
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
 }
@@ -231,7 +249,7 @@ label {
  padding: 0;
  border: none;
  background: transparent;
-  color: #005B9F;
+  color: var(--primary-light);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
@@ -243,18 +261,18 @@ label {
  padding: 0;
  border: none;
  background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
 }

 .btn-forgot:active {
-  color: #003D6B;
+  color: var(--primary);
 }

 .btn-mode-switch:active {
-  color: #003D6B;
+  color: var(--primary);
 }

 .btn-login {
@@ -276,14 +294,14 @@ label {
  padding: 8px 14px;
  border: none;
  background: transparent;
-  color: #003D6B;
+  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
 }

 .btn-skip:active {
-  color: #005B9F;
+  color: var(--primary-light);
 }

 .btn-skip-light {
@@ -291,10 +309,12 @@ label {
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
+  z-index: 1;
  padding: 8px 16px;
-  border: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
  background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
@@ -302,18 +322,18 @@ label {
 }

 .btn-skip-light:active {
-  color: #003D6B;
+  color: var(--primary);
 }

 .error {
-  color: #DC2626;
+  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
 }

 .success {
  margin: 0;
-  color: #059669;
+  color: var(--success);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
--- a/apps/player/src/views/MatchDetailView.vue
+++ b/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 {
--- a/apps/player/src/views/MyBetsView.vue
+++ b/apps/player/src/views/MyBetsView.vue
@@ -176,16 +176,16 @@ const pullIndicatorStyle = () => ({
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
-  color: #6B7280;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  color: var(--text-muted);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  transition: all 0.2s;
 }

 .filter-tab.active {
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.08);
-  border-color: #003D6B;
+  color: var(--primary);
+  background: rgba(244, 162, 97, 0.15);
+  border-color: var(--primary);
 }

 .state {
@@ -194,7 +194,7 @@ const pullIndicatorStyle = () => ({
  align-items: center;
  gap: 12px;
  text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
  padding: 56px 20px;
  font-weight: 600;
  font-size: 14px;
@@ -217,7 +217,7 @@ const pullIndicatorStyle = () => ({
 .end-hint {
  text-align: center;
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  padding: 16px 0 4px;
  letter-spacing: 0.03em;
--- a/apps/player/src/views/ProfileEditView.vue
+++ b/apps/player/src/views/ProfileEditView.vue
@@ -328,7 +328,7 @@ function back() {

 .back-btn {
  background: none;
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
@@ -338,14 +338,14 @@ function back() {
 .page-title {
  font-size: 16px;
  font-weight: 800;
-  color: #003D6B;
+  color: var(--primary);
  letter-spacing: 0.04em;
 }

 .avatar-card,
 .form-card {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 8px;
 }

@@ -361,12 +361,12 @@ function back() {
  width: 80px;
  height: 80px;
  border-radius: 50%;
-  border: 2px solid #E5E7EB;
+  border: 2px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
-  background: #E8EDF2;
+  background: var(--secondary);
 }

 .avatar-img {
@@ -379,9 +379,9 @@ function back() {
 .avatar-change-btn {
  padding: 7px 18px;
  border-radius: 999px;
-  border: 1px solid #003D6B;
-  background: rgba(0, 61, 107, 0.04);
-  color: #003D6B;
+  border: 1px solid var(--primary);
+  background: rgba(244, 162, 97, 0.1);
+  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
 }
@@ -396,12 +396,12 @@ function back() {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .section-divider {
  height: 1px;
-  background: #E5E7EB;
+  background: var(--border);
  margin: 6px 0 12px;
 }

@@ -412,13 +412,13 @@ function back() {
  justify-content: space-between;
  padding: 4px 0 12px;
  background: none;
-  color: #1A1A2E;
+  color: var(--text);
  font-size: 14px;
  font-weight: 700;
 }

 .chevron {
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.15s ease;
@@ -442,7 +442,7 @@ function back() {

 .field-hint {
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  margin: 6px 0 0;
  line-height: 1.45;
 }
@@ -469,10 +469,10 @@ function back() {
  min-width: 48px;
  padding: 0 10px;
  border: none;
-  border-left: 1px solid #E5E7EB;
+  border-left: 1px solid var(--border);
  border-radius: 0 6px 6px 0;
-  background: #F5F7FA;
-  color: #003D6B;
+  background: var(--bg-body);
+  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
@@ -491,7 +491,7 @@ function back() {
 label {
  display: block;
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
 }
@@ -504,28 +504,28 @@ label {
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
-  border: 1px solid #E5E7EB;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--text);
  transition: border-color 0.2s;
 }

 .field-input:focus {
  outline: none;
-  border-color: #0066CC;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
+  border-color: var(--border-active);
+  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.2);
 }

 .field-input:-webkit-autofill,
 .field-input:-webkit-autofill:hover,
 .field-input:-webkit-autofill:focus {
-  -webkit-text-fill-color: #1A1A2E;
-  box-shadow: 0 0 0 1000px #FFFFFF inset;
-  border: 1px solid #E5E7EB;
+  -webkit-text-fill-color: var(--text);
+  box-shadow: 0 0 0 1000px var(--bg-input) inset;
+  border: 1px solid var(--border);
 }

 .field-input::placeholder {
-  color: rgba(107, 114, 128, 0.6);
+  color: rgba(148, 163, 184, 0.5);
 }

 .readonly {
@@ -555,10 +555,10 @@ label {
 }

 .msg.ok {
-  color: #059669;
+  color: var(--success);
 }

 .msg.err {
-  color: #DC2626;
+  color: var(--danger);
 }
 </style>
--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -142,21 +142,21 @@ const balanceAmountClass = computed(() => {
        </div>

        <div class="bank-card-balance">
-          <span class="bank-card-label">当前余额</span>
+          <span class="bank-card-label">{{ t('wallet.balance') }}</span>
          <p class="bank-card-number balance-amount" :class="balanceAmountClass">{{ balanceDisplay }}</p>
        </div>

        <div class="bank-card-footer">
          <div class="bank-card-field">
-            <span class="bank-card-label">持卡人</span>
+            <span class="bank-card-label">{{ t('wallet.card_holder') }}</span>
            <span class="bank-card-holder">{{ profileRaw?.username }}</span>
          </div>
          <div class="bank-card-field bank-card-field--center">
-            <span class="bank-card-label">累计返水</span>
+            <span class="bank-card-label">{{ t('cashback.total_received') }}</span>
            <span class="bank-card-stat">{{ formatMoney(cashbackTotal, locale) }}</span>
          </div>
          <div class="bank-card-field bank-card-field--right">
-            <span class="bank-card-label">未结算</span>
+            <span class="bank-card-label">{{ t('wallet.unsettled') }}</span>
            <span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
          </div>
        </div>
@@ -288,7 +288,7 @@ const balanceAmountClass = computed(() => {
 }

 .error-text {
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
 }
@@ -296,16 +296,16 @@ const balanceAmountClass = computed(() => {
 .retry-btn {
  padding: 8px 24px;
  border-radius: 6px;
-  border: 1px solid #003D6B;
+  border: 1px solid var(--primary);
  background: transparent;
-  color: #005B9F;
+  color: var(--primary-light);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
 }

 .retry-btn:active {
-  background: rgba(0, 61, 107, 0.08);
+  background: rgba(244, 162, 97, 0.15);
 }

 .wallet-banner {
@@ -315,7 +315,7 @@ const balanceAmountClass = computed(() => {
  aspect-ratio: 1.75 / 1;
  border-radius: 12px;
  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow);
 }

 .wallet-banner::after {
@@ -346,9 +346,9 @@ const balanceAmountClass = computed(() => {
  pointer-events: none;
  background: linear-gradient(
    135deg,
-    #003D6B 0%,
-    #005B9F 50%,
-    #003D6B 100%
+    #0F2027 0%,
+    #F4A261 50%,
+    #203A43 100%
  );
 }

@@ -523,74 +523,84 @@ const balanceAmountClass = computed(() => {
 .quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
+  grid-template-areas:
+    "a a b b"
+    "c c d d";
  gap: 8px;
  margin-bottom: 10px;
 }

+.qa-item:nth-child(1) { grid-area: a; }
+.qa-item:nth-child(2) { grid-area: b; }
+.qa-item:nth-child(3) { grid-area: c; }
+.qa-item:nth-child(4) { grid-area: d; }
+
 .qa-item {
  display: flex;
-  flex-direction: column;
+  flex-direction: row;
  align-items: center;
-  gap: 6px;
-  padding: 14px 4px 12px;
-  border-radius: 10px;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  gap: 10px;
+  padding: 12px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
+  min-width: 0;
+  overflow: hidden;
 }

 .qa-item:active {
  transform: scale(0.96);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: none;
 }

 .qa-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
+  flex-shrink: 0;
 }

 .qa-icon--wallet {
-  background: rgba(0, 61, 107, 0.1);
-  color: #003D6B;
+  background: rgba(244, 162, 97, 0.15);
+  color: var(--primary);
 }

 .qa-icon--recharge {
-  background: rgba(5, 150, 105, 0.1);
-  color: #059669;
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--success);
 }

 .qa-icon--cashback {
-  background: rgba(248, 151, 31, 0.1);
-  color: #E8870A;
+  background: rgba(255, 179, 0, 0.15);
+  color: var(--warning);
 }

 .qa-icon--history {
-  background: rgba(99, 102, 241, 0.1);
-  color: #6366F1;
+  background: rgba(244, 162, 97, 0.15);
+  color: #F4A261;
 }

 .qa-label {
-  font-size: 11px;
+  font-size: 13px;
  font-weight: 600;
-  color: #1A1A2E;
-  text-align: center;
+  color: var(--text);
+  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
-  max-width: 100%;
+  min-width: 0;
 }

 .settings-group {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
 }
@@ -604,11 +614,11 @@ const balanceAmountClass = computed(() => {
  min-height: 42px;
  padding: 0 14px;
  background: none;
-  color: #1A1A2E;
+  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
-  border-bottom: 1px solid #E5E7EB;
+  border-bottom: 1px solid var(--border);
 }

 .settings-cell:last-child {
@@ -616,7 +626,7 @@ const balanceAmountClass = computed(() => {
 }

 .settings-cell:active {
-  background: #F5F7FA;
+  background: var(--bg-hover);
 }

 .settings-cell--stack {
@@ -639,7 +649,7 @@ const balanceAmountClass = computed(() => {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .cell-head {
@@ -649,11 +659,11 @@ const balanceAmountClass = computed(() => {
 }

 .cell-label {
-  color: #1A1A2E;
+  color: var(--text);
 }

 .cell-chevron {
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
@@ -672,7 +682,7 @@ const balanceAmountClass = computed(() => {

 .rules-cell .rules-body {
  padding: 0 14px 12px;
-  border-bottom: 1px solid #E5E7EB;
+  border-bottom: 1px solid var(--border);
 }

 .lang-segment {
@@ -687,19 +697,23 @@ const balanceAmountClass = computed(() => {
  justify-content: center;
  gap: 4px;
  min-height: 30px;
+  min-width: 0;
  padding: 0 5px;
  border-radius: 6px;
-  border: 1px solid #E5E7EB;
-  background: #FFFFFF;
-  color: #6B7280;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

 .lang-opt.active {
-  border-color: #003D6B;
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.06);
+  border-color: var(--primary);
+  color: var(--primary);
+  background: rgba(244, 162, 97, 0.12);
 }

 .logout-btn {
@@ -708,21 +722,21 @@ const balanceAmountClass = computed(() => {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
-  border: 1px solid #DC2626;
-  background: #FFFFFF;
-  color: #DC2626;
+  border: 1px solid var(--danger);
+  background: var(--bg-card);
+  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
 }

 .logout-btn:active {
-  background: rgba(220, 38, 38, 0.06);
+  background: rgba(239, 68, 68, 0.12);
 }

 .rules-body {
  font-size: 12px;
  line-height: 1.55;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .rules-body p {
--- a/apps/player/src/views/RechargeHistoryView.vue
+++ b/apps/player/src/views/RechargeHistoryView.vue
@@ -411,24 +411,24 @@ function auditStepCount(order: DepositOrder) {
 <style scoped>
 .recharge-history-page { padding: 0 16px 24px; }
 .page-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
-.page-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: #1A1A2E; }
-.back-btn { background: none; border: none; color: #003D6B; font-size: 24px; cursor: pointer; padding: 0 8px; }
-.recharge-btn { background: none; border: none; color: #003D6B; font-size: 13px; cursor: pointer; font-weight: 600; }
+.page-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
+.back-btn { background: none; border: none; color: var(--primary); font-size: 24px; cursor: pointer; padding: 0 8px; }
+.recharge-btn { background: none; border: none; color: var(--primary); font-size: 13px; cursor: pointer; font-weight: 600; }
 .state { display: flex; justify-content: center; padding: 48px; }
-.empty { text-align: center; color: #6B7280; padding: 48px 16px; font-weight: 600; }
+.empty { text-align: center; color: var(--text-muted); padding: 48px 16px; font-weight: 600; }
 .pull-indicator { display: flex; align-items: center; justify-content: center; overflow: hidden; transition: height 0.15s ease; }

 .order-list { display: flex; flex-direction: column; gap: 12px; }
 .order-card {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow);
 }
 .order-card:active {
  opacity: 0.92;
@@ -438,66 +438,66 @@ function auditStepCount(order: DepositOrder) {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
-  background: linear-gradient(90deg, transparent, #003D6B, transparent);
+  background: linear-gradient(90deg, transparent, #F4A261, transparent);
 }
 .order-card.rejected {
-  background: #FFFFFF;
-  border-color: rgba(220, 38, 38, 0.25);
+  background: var(--bg-card);
+  border-color: rgba(239, 68, 68, 0.3);
 }
 .order-card.rejected::before {
-  background: linear-gradient(90deg, transparent, #DC2626, transparent);
+  background: linear-gradient(90deg, transparent, #EF4444, transparent);
 }
 .order-card.rejected .order-amount {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 .order-card.rejected .info-label {
-  color: #6B7280;
+  color: var(--text-muted);
 }
 .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
 .method-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
-.method-badge.bank { background: rgba(0, 61, 107, 0.08); color: #005B9F; }
-.method-badge.usdt { background: rgba(5, 150, 105, 0.08); color: #059669; }
+.method-badge.bank { background: rgba(244, 162, 97, 0.15); color: var(--primary-light); }
+.method-badge.usdt { background: rgba(16, 185, 129, 0.15); color: var(--success); }
 .status-badge { font-size: 12px; font-weight: 700; }
-.status-pending { color: #F8971F; }
-.status-approved { color: #059669; }
-.status-rejected { color: #DC2626; }
+.status-pending { color: var(--warning); }
+.status-approved { color: var(--success); }
+.status-rejected { color: var(--danger); }
 .order-body { }
 .order-amount {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 4px;
-  color: #003D6B;
+  color: var(--primary);
 }
-.approved-amount { font-size: 12px; color: #059669; margin-bottom: 6px; font-weight: 600; }
+.approved-amount { font-size: 12px; color: var(--success); margin-bottom: 6px; font-weight: 600; }
 .order-info-row { margin-bottom: 8px; }
-.info-label { font-size: 13px; color: #003D6B; font-weight: 600; }
+.info-label { font-size: 13px; color: var(--primary); font-weight: 600; }
 .order-times { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
 .time-row { display: flex; justify-content: space-between; align-items: center; }
-.time-label { font-size: 11px; color: #6B7280; }
-.time-value { font-size: 11px; color: #1A1A2E; font-variant-numeric: tabular-nums; }
+.time-label { font-size: 11px; color: var(--text-muted); }
+.time-value { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
 .order-remark {
  font-size: 12px;
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.04);
+  color: var(--primary);
+  background: rgba(244, 162, 97, 0.08);
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 6px;
-  border-left: 2px solid #003D6B;
+  border-left: 2px solid var(--primary);
  line-height: 1.45;
  word-break: break-word;
 }
 .reject-reason {
  margin-top: 8px;
  font-size: 12px;
-  color: #DC2626;
+  color: var(--danger);
  background: transparent;
  padding: 6px 0 0;
  border-radius: 0;
  border: none;
-  border-top: 1px solid rgba(220, 38, 38, 0.18);
+  border-top: 1px solid rgba(239, 68, 68, 0.25);
  line-height: 1.45;
  word-break: break-word;
 }
@@ -508,16 +508,16 @@ function auditStepCount(order: DepositOrder) {
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
-  border-top: 1px solid #E5E7EB;
+  border-top: 1px solid var(--border);
 }
 .card-detail-summary {
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
 }
 .card-detail-link {
  font-size: 11px;
-  color: #003D6B;
+  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
 }
@@ -530,7 +530,7 @@ function auditStepCount(order: DepositOrder) {
  background: none;
  text-align: right;
  font-size: 11px;
-  color: #003D6B;
+  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
 }
@@ -548,7 +548,7 @@ function auditStepCount(order: DepositOrder) {
 .end-hint {
  text-align: center;
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  padding: 16px 0 4px;
  letter-spacing: 0.03em;
@@ -558,7 +558,7 @@ function auditStepCount(order: DepositOrder) {
  position: fixed;
  inset: 0;
  z-index: 200;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
@@ -571,12 +571,12 @@ function auditStepCount(order: DepositOrder) {
  max-width: 480px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
-  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
 }

 .detail-close {
@@ -588,7 +588,7 @@ function auditStepCount(order: DepositOrder) {
  border: none;
  border-radius: 50%;
  background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
@@ -598,15 +598,15 @@ function auditStepCount(order: DepositOrder) {
  margin: 0 28px 12px 0;
  font-size: 15px;
  font-weight: 600;
-  color: #1A1A2E;
+  color: var(--text);
 }

 .detail-summary {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 10px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
 }

 .detail-summary-head {
@@ -620,13 +620,13 @@ function auditStepCount(order: DepositOrder) {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
-  color: #003D6B;
+  color: var(--primary);
  letter-spacing: -0.02em;
 }

 .detail-method-name {
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
 }
@@ -641,13 +641,13 @@ function auditStepCount(order: DepositOrder) {

 .detail-label {
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
  flex-shrink: 0;
 }

 .detail-value {
  font-size: 12px;
-  color: #1A1A2E;
+  color: var(--text);
  text-align: right;
  word-break: break-word;
 }
@@ -655,12 +655,12 @@ function auditStepCount(order: DepositOrder) {
 .detail-summary .order-remark {
  margin-top: 8px;
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  background: transparent;
  padding: 6px 0 0;
  border-radius: 0;
  border: none;
-  border-top: 1px solid #E5E7EB;
+  border-top: 1px solid var(--border);
  line-height: 1.45;
  word-break: break-word;
 }
@@ -668,12 +668,12 @@ function auditStepCount(order: DepositOrder) {
 .detail-summary .reject-reason {
  margin-top: 8px;
  font-size: 11px;
-  color: #DC2626;
+  color: var(--danger);
  background: transparent;
  padding: 6px 0 0;
  border-radius: 0;
  border: none;
-  border-top: 1px solid rgba(220, 38, 38, 0.15);
+  border-top: 1px solid rgba(239, 68, 68, 0.2);
  line-height: 1.45;
  word-break: break-word;
 }
@@ -686,14 +686,14 @@ function auditStepCount(order: DepositOrder) {
 .detail-audit {
  margin-top: 2px;
  padding-top: 12px;
-  border-top: 1px solid #E5E7EB;
+  border-top: 1px solid var(--border);
 }

 .detail-audit-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
-  color: #6B7280;
+  color: var(--text-muted);
  letter-spacing: 0.02em;
 }

@@ -721,7 +721,7 @@ function auditStepCount(order: DepositOrder) {
  width: 5px;
  height: 5px;
  border-radius: 50%;
-  background: #E5E7EB;
+  background: var(--border);
  flex-shrink: 0;
 }

@@ -730,7 +730,7 @@ function auditStepCount(order: DepositOrder) {
  width: 1px;
  min-height: 10px;
  margin: 3px 0;
-  background: #E5E7EB;
+  background: var(--border);
 }

 .audit-step-body {
@@ -753,13 +753,13 @@ function auditStepCount(order: DepositOrder) {
 .audit-step-title {
  font-size: 12px;
  font-weight: 600;
-  color: #1A1A2E;
+  color: var(--text);
  line-height: 1.35;
 }

 .audit-step-time {
  font-size: 10px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
@@ -768,7 +768,7 @@ function auditStepCount(order: DepositOrder) {
 .audit-step-actor {
  margin: 2px 0 0;
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  line-height: 1.4;
 }

@@ -776,14 +776,14 @@ function auditStepCount(order: DepositOrder) {
  margin: 3px 0 0;
  font-size: 11px;
  font-weight: 500;
-  color: #059669;
+  color: var(--success);
  line-height: 1.4;
 }

 .audit-step-note {
  margin: 4px 0 0;
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  line-height: 1.45;
  word-break: break-word;
 }
@@ -801,35 +801,35 @@ function auditStepCount(order: DepositOrder) {

 .audit-step-box--reject {
  background: transparent;
-  border: 1px solid rgba(220, 38, 38, 0.22);
+  border: 1px solid rgba(239, 68, 68, 0.3);
 }

 .audit-step-box-label {
  font-size: 10px;
  font-weight: 500;
-  color: #DC2626;
+  color: var(--danger);
  letter-spacing: 0.01em;
 }

 .audit-step-box-text {
  font-size: 11px;
-  color: #DC2626;
+  color: var(--danger);
 }

 .audit-step--submitted .audit-dot {
-  background: #003D6B;
+  background: var(--primary);
 }
 .audit-step--approved .audit-dot {
-  background: #059669;
+  background: var(--success);
 }
 .audit-step--rejected .audit-dot {
-  background: #DC2626;
+  background: var(--danger);
 }
 .audit-step--revoked .audit-dot {
-  background: #6B7280;
+  background: var(--text-muted);
 }
 .audit-step--reopened .audit-dot {
-  background: #003D6B;
+  background: var(--primary);
 }

 .modal-reapply-btn {
--- a/apps/player/src/views/RechargeView.vue
+++ b/apps/player/src/views/RechargeView.vue
@@ -368,9 +368,9 @@ onMounted(fetchMethods);
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 12px;
 }
-.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1A1A2E; }
-.back-btn { background: none; border: none; color: #003D6B; font-size: 22px; cursor: pointer; padding: 0 6px; }
-.history-btn { background: none; border: none; color: #003D6B; font-size: 12px; cursor: pointer; font-weight: 600; }
+.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
+.back-btn { background: none; border: none; color: var(--primary); font-size: 22px; cursor: pointer; padding: 0 6px; }
+.history-btn { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; font-weight: 600; }

 .state { display: flex; justify-content: center; padding: 48px; }

@@ -380,24 +380,24 @@ onMounted(fetchMethods);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
-  color: #DC2626;
-  background: rgba(220, 38, 38, 0.06);
-  border: 1px solid rgba(220, 38, 38, 0.2);
+  color: var(--danger);
+  background: rgba(239, 68, 68, 0.12);
+  border: 1px solid rgba(239, 68, 68, 0.3);
 }

 .type-tabs {
  display: flex; margin-bottom: 12px;
  border-radius: 6px; overflow: hidden;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
 }
 .tab {
  flex: 1; padding: 8px; border: none;
-  background: #FFFFFF;
-  color: #6B7280; font-weight: 700; font-size: 13px;
+  background: var(--bg-card);
+  color: var(--text-muted); font-weight: 700; font-size: 13px;
  cursor: pointer; transition: all 0.2s;
 }
 .tab.active {
-  background: #003D6B; color: #FFFFFF;
+  background: var(--primary); color: #FFFFFF;
 }

 .methods-list {
@@ -405,19 +405,19 @@ onMounted(fetchMethods);
 }
 .method-pill {
  display: flex; flex-direction: column; gap: 1px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px;
  text-align: left; cursor: pointer;
  transition: border-color 0.15s;
 }
 .method-pill.selected {
-  border-color: #0066CC;
-  background: rgba(0, 102, 204, 0.04);
+  border-color: var(--border-active);
+  background: rgba(244, 162, 97, 0.1);
 }
-.pill-name { font-weight: 700; font-size: 12px; color: #1A1A2E; }
-.pill-sub { font-size: 10px; color: #6B7280; }
-.empty-methods { text-align: center; color: #6B7280; padding: 20px; font-size: 12px; }
+.pill-name { font-weight: 700; font-size: 12px; color: var(--text); }
+.pill-sub { font-size: 10px; color: var(--text-muted); }
+.empty-methods { text-align: center; color: var(--text-muted); padding: 20px; font-size: 12px; }

 .bank-card-wrap {
  margin-bottom: 16px;
@@ -433,9 +433,9 @@ onMounted(fetchMethods);
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
-  background: linear-gradient(135deg, #003D6B 0%, #005B9F 50%, #003D6B 100%);
+  background: linear-gradient(135deg, #0F2027 0%, #F4A261 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow);
 }

 .bank-card-shine {
@@ -464,7 +464,7 @@ onMounted(fetchMethods);
  height: 180px;
  right: -60px;
  bottom: -80px;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
+  background: radial-gradient(circle, rgba(255, 185, 128, 0.15), transparent 70%);
 }

 .bank-card-deco--2 {
@@ -472,7 +472,7 @@ onMounted(fetchMethods);
  height: 100px;
  right: 40px;
  bottom: 20px;
-  border-color: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 185, 128, 0.12);
 }

 .bank-card-top,
@@ -583,57 +583,57 @@ onMounted(fetchMethods);
 }

 .method-info {
-  background: #FFFFFF;
+  background: var(--bg-card);
  border-radius: 8px; padding: 10px 12px;
  margin-bottom: 12px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
 }
 .info-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
-  border-bottom: 1px solid #E5E7EB;
+  border-bottom: 1px solid var(--border);
 }
 .info-row:last-child { border-bottom: none; }
-.info-label { font-size: 11px; color: #6B7280; flex-shrink: 0; }
+.info-label { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
 .info-value {
  font-size: 13px; font-weight: 600;
  word-break: break-all; text-align: right;
  max-width: 60%;
-  color: #1A1A2E;
+  color: var(--text);
 }
 .copyable {
-  cursor: pointer; color: #0066CC;
+  cursor: pointer; color: var(--primary);
  display: inline-flex; align-items: center; gap: 4px;
 }
 .copyable:active { opacity: 0.6; }
 .copy-icon { width: 14px; height: 14px; flex-shrink: 0; }
 .qr-container { display: flex; justify-content: center; padding: 8px 0 4px; }
-.qr-image { width: 140px; height: 140px; object-fit: contain; border-radius: 6px; background: #fff; padding: 6px; border: 1px solid #E5E7EB; }
+.qr-image { width: 140px; height: 140px; object-fit: contain; border-radius: 6px; background: #fff; padding: 6px; border: 1px solid var(--border); }

 .form-section { margin-bottom: 12px; }
 .form-section label {
  display: block; font-size: 11px; font-weight: 700;
-  color: #6B7280; margin-bottom: 4px;
+  color: var(--text-muted); margin-bottom: 4px;
 }
 .amount-input {
-  width: 100%; padding: 10px; background: #FFFFFF;
-  border: 1px solid #E5E7EB; border-radius: 6px;
-  color: #1A1A2E; font-size: 16px; font-weight: 700;
+  width: 100%; padding: 10px; background: var(--bg-input);
+  border: 1px solid var(--border); border-radius: 6px;
+  color: var(--text); font-size: 16px; font-weight: 700;
  box-sizing: border-box;
 }
-.amount-input:focus { border-color: #0066CC; outline: none; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
+.amount-input:focus { border-color: var(--border-active); outline: none; box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.2); }

 .upload-area {
-  border: 1px dashed #0066CC;
+  border: 1px dashed var(--primary);
  border-radius: 6px; padding: 16px;
  text-align: center; position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
-  background: rgba(0, 102, 204, 0.02);
+  background: rgba(244, 162, 97, 0.06);
 }
 .upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
-.upload-hint { font-size: 12px; color: #6B7280; }
-.compress-hint { font-size: 12px; color: #003D6B; }
+.upload-hint { font-size: 12px; color: var(--text-muted); }
+.compress-hint { font-size: 12px; color: var(--primary); }
 .screenshot-preview { position: relative; display: inline-block; }
 .screenshot-preview img { max-width: 100%; max-height: 160px; border-radius: 6px; }
 .remove-btn {
@@ -645,21 +645,21 @@ onMounted(fetchMethods);

 .btn-submit {
  width: 100%; padding: 12px;
-  background: #003D6B;
+  background: var(--primary);
  color: #FFFFFF; border: none; border-radius: 6px;
  font-size: 14px; font-weight: 800;
  cursor: pointer; margin-top: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow-glow);
 }
 .btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }

 .success-state { text-align: center; padding: 40px 16px; }
-.success-icon { font-size: 40px; color: #059669; margin-bottom: 10px; }
-.success-state h3 { margin: 0 0 6px; font-size: 16px; color: #1A1A2E; }
-.order-no { font-family: monospace; color: #003D6B; font-size: 13px; margin: 4px 0; }
-.success-hint { font-size: 12px; color: #6B7280; margin-bottom: 20px; }
+.success-icon { font-size: 40px; color: var(--success); margin-bottom: 10px; }
+.success-state h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
+.order-no { font-family: monospace; color: var(--primary); font-size: 13px; margin: 4px 0; }
+.success-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
 .btn-primary {
-  background: #003D6B;
+  background: var(--primary);
  color: #FFFFFF; border: none; border-radius: 6px;
  padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
 }
--- a/apps/player/src/views/RegisterView.vue
+++ b/apps/player/src/views/RegisterView.vue
@@ -227,24 +227,41 @@ const fieldError = () => {
  align-items: center;
  justify-content: flex-end;
  padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
-  background: linear-gradient(160deg, #E8EDF2 0%, #F5F7FA 40%, #FFFFFF 100%);
+  background-color: var(--bg-body);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
 }

+.login-page::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 32, 39, 0.7);
+  z-index: 0;
+}
+
+.login-page::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(160deg, rgba(244, 162, 97, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%);
+  z-index: 0;
+}
+
 .login-form {
  position: relative;
+  z-index: 1;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }

 .login-form.is-busy {
@@ -261,8 +278,8 @@ const fieldError = () => {
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(2px);
+  background: rgba(15, 32, 39, 0.85);
+  backdrop-filter: blur(4px);
  pointer-events: all;
 }

@@ -270,7 +287,7 @@ const fieldError = () => {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
-  color: #003D6B;
+  color: var(--primary);
  letter-spacing: 0.04em;
 }

@@ -285,7 +302,7 @@ const fieldError = () => {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
  text-align: center;
 }

@@ -301,7 +318,7 @@ const fieldError = () => {

 label {
  font-size: 10px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
 }
@@ -309,29 +326,29 @@ label {
 .optional-tag {
  font-size: 10px;
  font-weight: 500;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .field-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
  border-radius: 6px;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  background: var(--bg-input);
+  color: var(--text);
  font-size: 14px;
  font-family: inherit;
 }

 .field-input::placeholder {
-  color: rgba(107, 114, 128, 0.6);
+  color: rgba(148, 163, 184, 0.6);
 }

 .field-input:focus {
  outline: none;
-  border-color: #0066CC;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
 }

 .inline-row {
@@ -349,10 +366,10 @@ label {
  flex-shrink: 0;
  height: 36px;
  padding: 0 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
  border-radius: 6px;
-  background: #F5F7FA;
-  color: #003D6B;
+  background: var(--bg-elevated);
+  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
@@ -386,14 +403,14 @@ label {
  padding: 8px 14px;
  border: none;
  background: transparent;
-  color: #003D6B;
+  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
 }

 .btn-skip:active {
-  color: #005B9F;
+  color: var(--primary-light);
 }

 .btn-skip-light {
@@ -401,10 +418,11 @@ label {
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
+  z-index: 1;
  padding: 8px 16px;
  border: none;
  background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
@@ -412,12 +430,12 @@ label {
 }

 .btn-skip-light:active {
-  color: #003D6B;
+  color: var(--primary);
 }

 .error {
  margin: 0;
-  color: #DC2626;
+  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
--- a/apps/player/src/views/WalletDetailView.vue
+++ b/apps/player/src/views/WalletDetailView.vue
@@ -238,7 +238,7 @@ const pullIndicatorStyle = () => ({
 .back-btn {
  background: none;
  border: none;
-  color: #003D6B;
+  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 0 8px;
@@ -273,16 +273,16 @@ const pullIndicatorStyle = () => ({
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
-  color: #6B7280;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  color: var(--text-muted);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  transition: all 0.2s;
 }

 .filter-tab.active {
  color: #FFFFFF;
-  background: #003D6B;
-  border-color: #003D6B;
+  background: var(--primary);
+  border-color: var(--primary);
 }

 .state {
@@ -291,7 +291,7 @@ const pullIndicatorStyle = () => ({
  align-items: center;
  gap: 12px;
  text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
  padding: 56px 20px;
  font-weight: 600;
  font-size: 14px;
@@ -312,8 +312,8 @@ const pullIndicatorStyle = () => ({
  font-size: 14px;
  padding: 12px 16px;
  border: none;
-  border-bottom: 1px solid #E5E7EB;
-  background: #FFFFFF;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
  cursor: pointer;
 }

@@ -322,7 +322,7 @@ const pullIndicatorStyle = () => ({
 }

 .tx-row:active {
-  background: #F5F7FA;
+  background: var(--bg-hover);
 }

 .tx-main {
@@ -341,7 +341,7 @@ const pullIndicatorStyle = () => ({

 .tx-summary {
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
@@ -355,11 +355,11 @@ const pullIndicatorStyle = () => ({
  margin-top: 4px;
 }

-.tx-type { font-weight: 700; color: #1A1A2E; }
-.pos { color: #003D6B; font-weight: 800; font-size: 15px; }
-.neg { color: #DC2626; font-weight: 700; }
-.tx-time { font-size: 11px; color: #6B7280; }
-.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
+.tx-type { font-weight: 700; color: var(--text); }
+.pos { color: var(--accent-light); font-weight: 800; font-size: 15px; }
+.neg { color: var(--danger); font-weight: 700; }
+.tx-time { font-size: 11px; color: var(--text-muted); }
+.tx-arrow { font-size: 16px; color: var(--text-muted); font-weight: 700; line-height: 1; }

 .sentinel {
  height: 1px;
@@ -374,11 +374,11 @@ const pullIndicatorStyle = () => ({
 .end-hint {
  text-align: center;
  font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  padding: 16px 0 4px;
  letter-spacing: 0.03em;
 }

-.empty { text-align: center; color: #6B7280; padding: 40px 16px; font-weight: 600; }
+.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
 </style>
--- a/apps/player/src/views/WalletTransactionDetailView.vue
+++ b/apps/player/src/views/WalletTransactionDetailView.vue
@@ -238,7 +238,7 @@ function goCashbackDetail() {
 .back-btn {
  background: none;
  border: none;
-  color: #003D6B;
+  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 0 8px;
@@ -251,7 +251,7 @@ function goCashbackDetail() {
 .state {
  text-align: center;
  padding: 60px 20px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
 }
@@ -265,19 +265,19 @@ function goCashbackDetail() {
  gap: 6px;
  margin-bottom: 12px;
  text-align: center;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
 }

 .hero.pos {
-  border-color: rgba(0, 61, 107, 0.2);
-  background: linear-gradient(135deg, rgba(0, 61, 107, 0.04), #FFFFFF);
+  border-color: rgba(244, 162, 97, 0.3);
+  background: linear-gradient(135deg, rgba(244, 162, 97, 0.15), var(--bg-card));
 }

 .hero.neg {
-  border-color: rgba(220, 38, 38, 0.2);
-  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04), #FFFFFF);
+  border-color: rgba(239, 68, 68, 0.3);
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), var(--bg-card));
 }

 .hero-type {
@@ -285,13 +285,13 @@ function goCashbackDetail() {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .hero-summary {
  font-size: 13px;
  font-weight: 600;
-  color: #6B7280;
+  color: var(--text-muted);
  max-width: 100%;
  word-break: break-all;
 }
@@ -302,28 +302,28 @@ function goCashbackDetail() {
  line-height: 1.1;
 }

-.hero.pos .hero-amount { color: #003D6B; }
-.hero.neg .hero-amount { color: #DC2626; }
+.hero.pos .hero-amount { color: var(--primary); }
+.hero.neg .hero-amount { color: var(--danger); }

 .hero-time {
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
 }

 .section {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow);
 }

 .section-title {
  font-size: 12px;
  font-weight: 800;
-  color: #6B7280;
+  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
 }
@@ -340,22 +340,23 @@ function goCashbackDetail() {
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
-  color: #6B7280;
+  color: var(--text-muted);
 }

 .sum-row span:last-child {
-  color: #1A1A2E;
+  color: var(--text);
  font-weight: 700;
  text-align: right;
  word-break: break-all;
 }

-.pos { color: #003D6B !important; }
-.neg { color: #DC2626 !important; }
+.pos { color: var(--primary) !important; }
+.neg { color: var(--danger) !important; }

 .mono {
  font-family: ui-monospace, monospace;
  font-size: 12px;
+  color: var(--text-secondary);
 }

 .remark {
@@ -368,9 +369,9 @@ function goCashbackDetail() {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
-  border: 1px solid #003D6B;
-  background: rgba(0, 61, 107, 0.04);
-  color: #003D6B;
+  border: 1px solid var(--primary);
+  background: rgba(244, 162, 97, 0.1);
+  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
@@ -379,7 +380,7 @@ function goCashbackDetail() {
 .tx-id {
  font-family: ui-monospace, monospace;
  font-size: 12px;
-  color: #1A1A2E;
+  color: var(--text-secondary);
  word-break: break-all;
  line-height: 1.5;
 }
--- a/apps/player/src/views/WalletView.vue
+++ b/apps/player/src/views/WalletView.vue
@@ -158,7 +158,7 @@ const pullIndicatorStyle = () => ({
  align-items: center;
  gap: 12px;
  text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
  padding: 56px 20px;
  font-weight: 600;
  font-size: 14px;
@@ -179,8 +179,8 @@ const pullIndicatorStyle = () => ({
  font-size: 13px;
  padding: 6px 10px;
  border: none;
-  border-bottom: 1px solid #E5E7EB;
-  background: #FFFFFF;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
  cursor: pointer;
 }

@@ -189,7 +189,7 @@ const pullIndicatorStyle = () => ({
 }

 .tx-row:active {
-  background: #F5F7FA;
+  background: var(--bg-hover);
 }

 .tx-main {
@@ -208,7 +208,7 @@ const pullIndicatorStyle = () => ({

 .tx-summary {
  font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
@@ -222,11 +222,11 @@ const pullIndicatorStyle = () => ({
  margin-top: 3px;
 }

-.tx-type { font-weight: 700; color: #1A1A2E; }
-.pos { color: #003D6B; font-weight: 800; font-size: 14px; }
-.neg { color: #DC2626; font-weight: 700; }
-.tx-time { font-size: 11px; color: #6B7280; }
-.tx-arrow { font-size: 16px; color: #6B7280; font-weight: 700; line-height: 1; }
+.tx-type { font-weight: 700; color: var(--text); }
+.pos { color: var(--accent-light); font-weight: 800; font-size: 14px; }
+.neg { color: var(--danger); font-weight: 700; }
+.tx-time { font-size: 11px; color: var(--text-muted); }
+.tx-arrow { font-size: 16px; color: var(--text-muted); font-weight: 700; line-height: 1; }

 .top-bar {
  display: flex;
@@ -237,13 +237,13 @@ const pullIndicatorStyle = () => ({
 }

 .top-bar .more-link.secondary {
-  color: #005B9F;
+  color: var(--accent);
 }

 .more-link {
  background: none;
  border: none;
-  color: #003D6B;
+  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
@@ -256,5 +256,5 @@ const pullIndicatorStyle = () => ({
  opacity: 1;
 }

-.empty { text-align: center; color: #6B7280; padding: 28px 14px; font-weight: 600; }
+.empty { text-align: center; color: var(--text-muted); padding: 28px 14px; font-weight: 600; }
 </style>