From 4d8389a7169bbb32192c860c497ce36ae0b0727a Mon Sep 17 00:00:00 2001
From: Mars <3361409208a@gmail.com>
Date: Tue, 30 Jun 2026 11:04:13 +0800
Subject: [PATCH] style(theme-2): replace gold components and colors with
 blue-white scheme on desktop

---
 .../src/components/desktop/AccountSideNav.vue |  4 +-
 .../src/components/desktop/BetSlipPanel.vue   | 64 +++++++++----------
 .../src/components/desktop/DataTable.vue      |  2 +-
 .../desktop/DesktopBanner3DCarousel.vue       | 28 ++++----
 .../desktop/DesktopOddsBetPopover.vue         | 20 +++---
 .../desktop/DesktopOutrightEventCard.vue      |  4 +-
 .../src/components/desktop/DesktopShell.vue   |  2 +-
 .../src/components/desktop/DesktopTopNav.vue  | 20 +++---
 .../desktop/DesktopWalletSubNav.vue           |  2 +-
 .../src/components/desktop/LeagueSidebar.vue  | 12 ++--
 .../src/components/desktop/MatchSidebar.vue   | 16 ++---
 .../src/components/desktop/Pagination.vue     |  8 +--
 .../components/desktop/SportsCategoryBar.vue  |  8 +--
 apps/player/src/layouts/MainLayout.vue        |  1 -
 .../desktop/DesktopAnnouncementDetailView.vue |  2 +-
 .../desktop/DesktopAnnouncementListView.vue   | 22 +++----
 .../desktop/DesktopAnnouncementsHubShell.vue  |  2 +-
 .../views/desktop/DesktopBetDetailView.vue    |  4 +-
 .../desktop/DesktopCashbackRecordsView.vue    |  6 +-
 .../src/views/desktop/DesktopFootballView.vue |  8 +--
 .../desktop/DesktopForgotPasswordView.vue     |  6 +-
 .../src/views/desktop/DesktopHomeView.vue     | 12 ++--
 .../src/views/desktop/DesktopInboxHubView.vue |  4 +-
 .../src/views/desktop/DesktopLoginView.vue    |  8 +--
 .../views/desktop/DesktopMatchDetailView.vue  | 10 +--
 .../views/desktop/DesktopMessagesHubShell.vue |  4 +-
 .../src/views/desktop/DesktopMyBetsView.vue   |  2 +-
 .../desktop/DesktopOutrightDetailView.vue     |  2 +-
 .../views/desktop/DesktopProfileEditView.vue  |  8 +--
 .../src/views/desktop/DesktopProfileView.vue  | 16 ++---
 .../desktop/DesktopRechargeHistoryView.vue    |  2 +-
 .../src/views/desktop/DesktopRechargeView.vue | 14 ++--
 .../src/views/desktop/DesktopRegisterView.vue |  6 +-
 .../views/desktop/DesktopWalletDetailView.vue |  4 +-
 .../DesktopWalletTransactionDetailView.vue    |  2 +-
 .../src/views/desktop/DesktopWalletView.vue   |  2 +-
 36 files changed, 168 insertions(+), 169 deletions(-)

diff --git a/apps/player/src/components/desktop/AccountSideNav.vue b/apps/player/src/components/desktop/AccountSideNav.vue
index 748611d..62e2759 100644
--- a/apps/player/src/components/desktop/AccountSideNav.vue
+++ b/apps/player/src/components/desktop/AccountSideNav.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -99,7 +99,7 @@ const menuItems = computed(() => {
 
 .nav-item.active {
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.08);
+  background: rgba(0, 102, 204, 0.08);
 }
 
 .nav-item.active .dot {
diff --git a/apps/player/src/components/desktop/BetSlipPanel.vue b/apps/player/src/components/desktop/BetSlipPanel.vue
index 6f364ec..c64b719 100644
--- a/apps/player/src/components/desktop/BetSlipPanel.vue
+++ b/apps/player/src/components/desktop/BetSlipPanel.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter, RouterLink } from 'vue-router';
@@ -1194,8 +1194,8 @@ onUnmounted(() => {
 
 .clear-slip-btn:hover {
   color: var(--primary-light);
-  border-color: var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.06);
+  border-color: var(--border-active);
+  background: rgba(0, 102, 204, 0.06);
 }
 
 .balance-info {
@@ -1262,8 +1262,8 @@ onUnmounted(() => {
 }
 
 .odds-warning {
-  background: rgba(212, 175, 55, 0.12);
-  border-bottom: 1px solid var(--border-gold-soft);
+  background: rgba(0, 102, 204, 0.12);
+  border-bottom: 1px solid var(--border-active);
   color: var(--primary-light);
   font-size: 11px;
   font-weight: 600;
@@ -1314,7 +1314,7 @@ onUnmounted(() => {
 }
 
 .slip-card:hover {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
 }
 
 .card-top {
@@ -1518,39 +1518,39 @@ onUnmounted(() => {
 }
 
 .card-single-btn {
-  border: 1px solid rgba(212, 175, 55, 0.55);
-  background: rgba(212, 175, 55, 0.14);
+  border: 1px solid rgba(0, 102, 204, 0.55);
+  background: rgba(0, 102, 204, 0.14);
   color: var(--primary-light);
 }
 
 .card-single-btn:hover:not(:disabled) {
-  background: rgba(212, 175, 55, 0.22);
-  border-color: var(--border-gold);
+  background: rgba(0, 102, 204, 0.22);
+  border-color: var(--border-active);
   color: #fff;
 }
 
 .card-parlay-btn {
-  border: 1px dashed rgba(212, 175, 55, 0.45);
-  background: rgba(212, 175, 55, 0.04);
+  border: 1px dashed rgba(0, 102, 204, 0.45);
+  background: rgba(0, 102, 204, 0.04);
   color: var(--primary-light);
 }
 
 .card-parlay-btn:hover:not(:disabled) {
-  background: rgba(212, 175, 55, 0.1);
-  border-color: var(--border-gold-soft);
+  background: rgba(0, 102, 204, 0.1);
+  border-color: var(--border-active);
   color: #fff;
 }
 
 .card-parlay-btn.active {
   border-style: solid;
-  border-color: rgba(212, 175, 55, 0.35);
+  border-color: rgba(0, 102, 204, 0.35);
   background: rgba(255, 255, 255, 0.03);
   color: var(--text-muted);
 }
 
 .card-parlay-btn.active:hover {
   color: var(--primary-light);
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
 }
 
 .card-parlay-btn-icon {
@@ -1560,7 +1560,7 @@ onUnmounted(() => {
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  background: rgba(212, 175, 55, 0.16);
+  background: rgba(0, 102, 204, 0.16);
   font-size: 11px;
   line-height: 1;
   font-weight: 800;
@@ -1590,8 +1590,8 @@ onUnmounted(() => {
 .panel-warning {
   font-size: 11px;
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.08);
-  border: 1px solid var(--border-gold-soft);
+  background: rgba(0, 102, 204, 0.08);
+  border: 1px solid var(--border-active);
   border-radius: 4px;
   padding: 8px;
   margin: 6px 0;
@@ -1679,7 +1679,7 @@ onUnmounted(() => {
 }
 
 .chip-btn:hover {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   color: #fff;
 }
 
@@ -1744,7 +1744,7 @@ onUnmounted(() => {
   width: 100%;
   padding: 8px;
   border-radius: 4px;
-  border: 1px solid var(--border-gold-soft);
+  border: 1px solid var(--border-active);
   background: transparent;
   color: var(--primary-light);
   font-size: 11px;
@@ -1753,7 +1753,7 @@ onUnmounted(() => {
 }
 
 .add-parlay-btn:hover {
-  background: rgba(212, 175, 55, 0.05);
+  background: rgba(0, 102, 204, 0.05);
   border-color: var(--primary);
 }
 
@@ -1762,8 +1762,8 @@ onUnmounted(() => {
   min-width: 0;
   padding: 10px;
   border-radius: 4px;
-  background: linear-gradient(180deg, #F0D875 0%, #D4AF37 100%);
-  color: #3D2800;
+  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
+  color: #FFFFFF;
   font-size: 13px;
   font-weight: 800;
   text-transform: uppercase;
@@ -1783,8 +1783,8 @@ onUnmounted(() => {
   width: 100%;
   padding: 10px;
   border-radius: 4px;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.08);
+  border: 1px solid var(--border-active);
+  background: rgba(0, 102, 204, 0.08);
   color: var(--primary-light);
   font-size: 13px;
   font-weight: 800;
@@ -1794,7 +1794,7 @@ onUnmounted(() => {
 }
 
 .history-view-all-btn:hover {
-  background: rgba(212, 175, 55, 0.14);
+  background: rgba(0, 102, 204, 0.14);
   border-color: var(--primary);
 }
 
@@ -1823,8 +1823,8 @@ onUnmounted(() => {
 
 .scope-chip.active {
   color: var(--primary-light);
-  border-color: var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.08);
+  border-color: var(--border-active);
+  background: rgba(0, 102, 204, 0.08);
 }
 
 .history-loading {
@@ -1851,8 +1851,8 @@ onUnmounted(() => {
 }
 
 .history-card:hover {
-  border-color: var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.04);
+  border-color: var(--border-active);
+  background: rgba(0, 102, 204, 0.04);
 }
 
 .history-card-top {
@@ -1896,7 +1896,7 @@ onUnmounted(() => {
 
 .history-status.hist-pending {
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.1);
+  background: rgba(0, 102, 204, 0.1);
 }
 
 .history-match {
diff --git a/apps/player/src/components/desktop/DataTable.vue b/apps/player/src/components/desktop/DataTable.vue
index 4df4261..743fb15 100644
--- a/apps/player/src/components/desktop/DataTable.vue
+++ b/apps/player/src/components/desktop/DataTable.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 defineProps<{
diff --git a/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue b/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue
index c03d518..599baf0 100644
--- a/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue
+++ b/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -276,8 +276,8 @@ onUnmounted(stopAutoPlay);
   filter: none;
   box-shadow:
     0 16px 40px rgba(0, 0, 0, 0.5),
-    0 0 28px rgba(212, 175, 55, 0.22),
-    0 0 56px rgba(212, 175, 55, 0.1);
+    0 0 28px rgba(0, 102, 204, 0.22),
+    0 0 56px rgba(0, 102, 204, 0.1);
   animation: banner-breathe 3s ease-in-out infinite;
 }
 
@@ -292,16 +292,16 @@ onUnmounted(stopAutoPlay);
     transform: scale(1);
     box-shadow:
       0 16px 40px rgba(0, 0, 0, 0.5),
-      0 0 22px rgba(212, 175, 55, 0.16),
-      0 0 48px rgba(212, 175, 55, 0.08);
+      0 0 22px rgba(0, 102, 204, 0.16),
+      0 0 48px rgba(0, 102, 204, 0.08);
   }
 
   50% {
     transform: scale(1.008);
     box-shadow:
       0 18px 44px rgba(0, 0, 0, 0.52),
-      0 0 32px rgba(212, 175, 55, 0.26),
-      0 0 60px rgba(212, 175, 55, 0.12);
+      0 0 32px rgba(0, 102, 204, 0.26),
+      0 0 60px rgba(0, 102, 204, 0.12);
   }
 }
 
@@ -320,13 +320,13 @@ onUnmounted(stopAutoPlay);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), #1a1a1a);
+  background: linear-gradient(135deg, rgba(0, 102, 204, 0.12), #1a1a1a);
 }
 
 .fallback-icon {
   width: 40px;
   height: 40px;
-  color: rgba(212, 175, 55, 0.35);
+  color: rgba(0, 102, 204, 0.35);
 }
 
 .click-hint {
@@ -348,7 +348,7 @@ onUnmounted(stopAutoPlay);
   position: absolute;
   inset: 0;
   border-radius: 50%;
-  border: 1px solid rgba(212, 175, 55, 0.45);
+  border: 1px solid rgba(0, 102, 204, 0.45);
   animation: click-ring-pulse 2.8s ease-out infinite;
 }
 
@@ -356,7 +356,7 @@ onUnmounted(stopAutoPlay);
   position: relative;
   width: 15px;
   height: 15px;
-  color: rgba(212, 175, 55, 0.88);
+  color: rgba(0, 102, 204, 0.88);
   animation: click-icon-bob 2.8s ease-in-out infinite;
 }
 
@@ -410,7 +410,7 @@ onUnmounted(stopAutoPlay);
   width: 36px;
   height: 36px;
   border-radius: 50%;
-  border: 1px solid rgba(212, 175, 55, 0.4);
+  border: 1px solid rgba(0, 102, 204, 0.4);
   background: rgba(10, 10, 10, 0.75);
   color: var(--primary-light);
   display: flex;
@@ -426,7 +426,7 @@ onUnmounted(stopAutoPlay);
 }
 
 .nav-btn:hover {
-  background: rgba(212, 175, 55, 0.2);
+  background: rgba(0, 102, 204, 0.2);
   border-color: var(--primary);
 }
 
@@ -459,7 +459,7 @@ onUnmounted(stopAutoPlay);
 .dot.active {
   width: 22px;
   border-radius: 4px;
-  background: var(--gradient-gold);
+  background: var(--primary);
 }
 
 .dot:hover:not(.active) {
diff --git a/apps/player/src/components/desktop/DesktopOddsBetPopover.vue b/apps/player/src/components/desktop/DesktopOddsBetPopover.vue
index c933bae..2c0cc8c 100644
--- a/apps/player/src/components/desktop/DesktopOddsBetPopover.vue
+++ b/apps/player/src/components/desktop/DesktopOddsBetPopover.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, ref, watch, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';
@@ -242,7 +242,7 @@ function addToParlayList() {
   width: 280px;
   padding: 12px 28px 12px 12px;
   border-radius: 8px;
-  border: 1px solid var(--border-gold-soft);
+  border: 1px solid var(--border-active);
   background: rgba(18, 18, 18, 0.98);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
 }
@@ -285,8 +285,8 @@ function addToParlayList() {
   padding: 6px 8px;
   margin-bottom: 10px;
   border-radius: 4px;
-  background: rgba(212, 175, 55, 0.06);
-  border: 1px solid var(--border-gold-soft);
+  background: rgba(0, 102, 204, 0.06);
+  border: 1px solid var(--border-active);
 }
 
 .pick {
@@ -321,7 +321,7 @@ function addToParlayList() {
 }
 
 .stake-input:focus {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   outline: none;
 }
 
@@ -366,8 +366,8 @@ function addToParlayList() {
   padding: 8px;
   border: none;
   border-radius: 4px;
-  background: linear-gradient(180deg, #f0d875 0%, #d4af37 100%);
-  color: #3d2800;
+  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
+  color: #FFFFFF;
   font-size: 12px;
   font-weight: 800;
   cursor: pointer;
@@ -386,8 +386,8 @@ function addToParlayList() {
   width: 100%;
   padding: 7px;
   border-radius: 4px;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.05);
+  border: 1px solid var(--border-active);
+  background: rgba(0, 102, 204, 0.05);
   color: var(--primary-light);
   font-size: 11px;
   font-weight: 700;
@@ -395,6 +395,6 @@ function addToParlayList() {
 }
 
 .btn-outline:hover {
-  background: rgba(212, 175, 55, 0.12);
+  background: rgba(0, 102, 204, 0.12);
 }
 </style>
diff --git a/apps/player/src/components/desktop/DesktopOutrightEventCard.vue b/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
index 9bc9501..d476490 100644
--- a/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
+++ b/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { OutrightEvent } from '../outright/OutrightEventSection.vue';
@@ -53,7 +53,7 @@ const isSettled = computed(
 }
 
 .outright-event-card:hover {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
 }
 
 .card-main {
diff --git a/apps/player/src/components/desktop/DesktopShell.vue b/apps/player/src/components/desktop/DesktopShell.vue
index 1ed6b87..42ce244 100644
--- a/apps/player/src/components/desktop/DesktopShell.vue
+++ b/apps/player/src/components/desktop/DesktopShell.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted, watch } from 'vue';
 import { useRoute, RouterView } from 'vue-router';
 import { useI18n } from 'vue-i18n';
diff --git a/apps/player/src/components/desktop/DesktopTopNav.vue b/apps/player/src/components/desktop/DesktopTopNav.vue
index fb4d940..f6e251f 100644
--- a/apps/player/src/components/desktop/DesktopTopNav.vue
+++ b/apps/player/src/components/desktop/DesktopTopNav.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -114,7 +114,7 @@ const activeTab = computed(() => {
   height: 38px;
   width: auto;
   display: block;
-  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.2));
+  filter: drop-shadow(0 0 4px rgba(0, 102, 204, 0.2));
 }
 
 .site-name {
@@ -122,10 +122,10 @@ const activeTab = computed(() => {
   font-weight: 800;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   letter-spacing: 0.5px;
-  background: var(--gradient-gold);
+  background: var(--primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  text-shadow: 0 0 8px rgba(212, 175, 55, 0.15);
+  text-shadow: 0 0 8px rgba(0, 102, 204, 0.15);
   transition: opacity 0.2s;
 }
 
@@ -169,7 +169,7 @@ const activeTab = computed(() => {
   height: 3px;
   background: var(--primary);
   border-radius: 3px 3px 0 0;
-  box-shadow: 0 -1px 8px rgba(212, 175, 55, 0.5);
+  box-shadow: 0 -1px 8px rgba(0, 102, 204, 0.5);
 }
 
 .badge {
@@ -203,8 +203,8 @@ const activeTab = computed(() => {
 .login-btn {
   padding: 6px 18px;
   border-radius: 4px;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.05);
+  border: 1px solid var(--border-active);
+  background: rgba(0, 102, 204, 0.05);
   color: var(--primary-light);
   font-size: 13px;
   font-weight: 700;
@@ -212,15 +212,15 @@ const activeTab = computed(() => {
 }
 
 .login-btn:hover {
-  background: rgba(212, 175, 55, 0.12);
+  background: rgba(0, 102, 204, 0.12);
   border-color: var(--primary);
 }
 
 .register-btn {
   padding: 7px 18px;
   border-radius: 4px;
-  background: linear-gradient(180deg, #F0D875 0%, #D4AF37 100%);
-  color: #3D2800;
+  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
+  color: #FFFFFF;
   font-size: 13px;
   font-weight: 800;
   transition: opacity 0.2s;
diff --git a/apps/player/src/components/desktop/DesktopWalletSubNav.vue b/apps/player/src/components/desktop/DesktopWalletSubNav.vue
index db241ef..78bf3c7 100644
--- a/apps/player/src/components/desktop/DesktopWalletSubNav.vue
+++ b/apps/player/src/components/desktop/DesktopWalletSubNav.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
diff --git a/apps/player/src/components/desktop/LeagueSidebar.vue b/apps/player/src/components/desktop/LeagueSidebar.vue
index fec7edf..ede00bc 100644
--- a/apps/player/src/components/desktop/LeagueSidebar.vue
+++ b/apps/player/src/components/desktop/LeagueSidebar.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMatchFilters } from '../../composables/useMatchFilters';
@@ -162,8 +162,8 @@ const isSelected = (leagueId: string) => filterState.value.leagueIds.includes(le
 }
 
 .sidebar-search-input:focus {
-  border-color: var(--border-gold-soft) !important;
-  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
+  border-color: var(--border-active) !important;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1) !important;
 }
 
 .sidebar-section {
@@ -199,12 +199,12 @@ const isSelected = (leagueId: string) => filterState.value.leagueIds.includes(le
 }
 
 .time-btn:hover {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   color: var(--text);
 }
 
 .time-btn.active {
-  background: rgba(212, 175, 55, 0.08);
+  background: rgba(0, 102, 204, 0.08);
   border-color: var(--primary);
   color: var(--primary-light);
 }
@@ -256,7 +256,7 @@ const isSelected = (leagueId: string) => filterState.value.leagueIds.includes(le
 }
 
 .league-item.active {
-  background: rgba(212, 175, 55, 0.04);
+  background: rgba(0, 102, 204, 0.04);
 }
 
 .checkbox {
diff --git a/apps/player/src/components/desktop/MatchSidebar.vue b/apps/player/src/components/desktop/MatchSidebar.vue
index 1a77efd..68a7e81 100644
--- a/apps/player/src/components/desktop/MatchSidebar.vue
+++ b/apps/player/src/components/desktop/MatchSidebar.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -169,8 +169,8 @@ watch(currentMatchId, scrollToActive);
 }
 
 .sidebar-search-input:focus {
-  border-color: var(--border-gold-soft) !important;
-  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
+  border-color: var(--border-active) !important;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1) !important;
 }
 
 .sidebar-section {
@@ -212,12 +212,12 @@ watch(currentMatchId, scrollToActive);
 }
 
 .time-btn:hover {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   color: var(--text);
 }
 
 .time-btn.active {
-  background: rgba(212, 175, 55, 0.08);
+  background: rgba(0, 102, 204, 0.08);
   border-color: var(--primary);
   color: var(--primary-light);
 }
@@ -330,13 +330,13 @@ watch(currentMatchId, scrollToActive);
 }
 
 .matches-list :deep(.match-card:hover) {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   background: var(--bg-hover) !important;
 }
 
 .matches-list :deep(.match-card.active) {
   border-color: var(--primary) !important;
-  background: rgba(212, 175, 55, 0.08) !important;
-  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
+  background: rgba(0, 102, 204, 0.08) !important;
+  box-shadow: 0 0 8px rgba(0, 102, 204, 0.25);
 }
 </style>
diff --git a/apps/player/src/components/desktop/Pagination.vue b/apps/player/src/components/desktop/Pagination.vue
index 253f4a9..044a134 100644
--- a/apps/player/src/components/desktop/Pagination.vue
+++ b/apps/player/src/components/desktop/Pagination.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -129,9 +129,9 @@ function onPageSizeChange(e: Event) {
 }
 
 .page-btn:hover:not(:disabled) {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   color: var(--text);
-  background: rgba(212, 175, 55, 0.05);
+  background: rgba(0, 102, 204, 0.05);
 }
 
 .page-btn.active {
@@ -166,7 +166,7 @@ function onPageSizeChange(e: Event) {
 }
 
 .page-size-select:hover {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   color: var(--text);
 }
 </style>
diff --git a/apps/player/src/components/desktop/SportsCategoryBar.vue b/apps/player/src/components/desktop/SportsCategoryBar.vue
index a48786e..9ffee85 100644
--- a/apps/player/src/components/desktop/SportsCategoryBar.vue
+++ b/apps/player/src/components/desktop/SportsCategoryBar.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -78,9 +78,9 @@ function selectSport(id: SportCategory, enabled: boolean) {
 
 .sport-category.active {
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.1);
-  border-color: var(--border-gold-soft);
-  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.08);
+  background: rgba(0, 102, 204, 0.1);
+  border-color: var(--border-active);
+  box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.08);
 }
 
 .sport-category.disabled {
diff --git a/apps/player/src/layouts/MainLayout.vue b/apps/player/src/layouts/MainLayout.vue
index 0ae8a4e..5c9be11 100644
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -42,7 +42,6 @@ const isDetailPage = computed(() => {
   );
 });
 
-const showHeader = computed(() => !isDetailPage.value);
 const showHeader = computed(() => !isDetailPage.value);
 const showAnnouncement = computed(
   () => !isDetailPage.value && !route.path.startsWith('/profile') && !route.path.startsWith('/announcements'),
diff --git a/apps/player/src/views/desktop/DesktopAnnouncementDetailView.vue b/apps/player/src/views/desktop/DesktopAnnouncementDetailView.vue
index 7e14209..3146f4a 100644
--- a/apps/player/src/views/desktop/DesktopAnnouncementDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopAnnouncementDetailView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 /**
  * Desktop Announcement Detail View
  * Reuses the existing AnnouncementDetailView component in a desktop shell wrapper.
diff --git a/apps/player/src/views/desktop/DesktopAnnouncementListView.vue b/apps/player/src/views/desktop/DesktopAnnouncementListView.vue
index 91a9bac..aec6551 100644
--- a/apps/player/src/views/desktop/DesktopAnnouncementListView.vue
+++ b/apps/player/src/views/desktop/DesktopAnnouncementListView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onActivated } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -135,7 +135,7 @@ onActivated(() => {
   padding: 18px 20px;
   border: 1px solid var(--border);
   border-radius: 10px;
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(18, 18, 18, 0.95) 42%);
+  background: linear-gradient(135deg, rgba(0, 102, 204, 0.08) 0%, rgba(18, 18, 18, 0.95) 42%);
 }
 
 .back-btn {
@@ -148,7 +148,7 @@ onActivated(() => {
   border: 1px solid var(--border);
   border-radius: 10px;
   background: #141414;
-  color: var(--gold);
+  color: var(--primary-light);
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
@@ -157,8 +157,8 @@ onActivated(() => {
 }
 
 .back-btn:hover {
-  border-color: var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.08);
+  border-color: var(--border-active);
+  background: rgba(0, 102, 204, 0.08);
 }
 
 .back-icon {
@@ -201,8 +201,8 @@ onActivated(() => {
   flex-shrink: 0;
   padding: 6px 10px;
   border-radius: 999px;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.08);
+  border: 1px solid var(--border-active);
+  background: rgba(0, 102, 204, 0.08);
   font-size: 12px;
   font-weight: 700;
   color: var(--primary-light);
@@ -244,7 +244,7 @@ onActivated(() => {
 }
 
 .announce-card:hover {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   transform: translateY(-2px);
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
 }
@@ -281,11 +281,11 @@ onActivated(() => {
   flex-shrink: 0;
   padding: 2px 7px;
   border-radius: 4px;
-  background: rgba(212, 175, 55, 0.12);
-  border: 1px solid rgba(212, 175, 55, 0.22);
+  background: rgba(0, 102, 204, 0.12);
+  border: 1px solid rgba(0, 102, 204, 0.22);
   font-size: 10px;
   font-weight: 700;
-  color: var(--gold);
+  color: var(--primary-light);
 }
 
 .card-date {
diff --git a/apps/player/src/views/desktop/DesktopAnnouncementsHubShell.vue b/apps/player/src/views/desktop/DesktopAnnouncementsHubShell.vue
index 52ff171..2043c5d 100644
--- a/apps/player/src/views/desktop/DesktopAnnouncementsHubShell.vue
+++ b/apps/player/src/views/desktop/DesktopAnnouncementsHubShell.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
diff --git a/apps/player/src/views/desktop/DesktopBetDetailView.vue b/apps/player/src/views/desktop/DesktopBetDetailView.vue
index b68236f..b981a47 100644
--- a/apps/player/src/views/desktop/DesktopBetDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopBetDetailView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter, RouterLink } from 'vue-router';
@@ -167,7 +167,7 @@ function statusLabel(status: string) {
 .status-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; align-self: flex-start; }
 .status-won { background: rgba(52,199,89,0.12); color: #4cd964; }
 .status-lost { background: rgba(255,69,58,0.12); color: #ff453a; }
-.status-pending { background: rgba(212,175,55,0.12); color: var(--primary-light); }
+.status-pending { background: rgba(0, 102, 204,0.12); color: var(--primary-light); }
 .status-push { background: rgba(100,100,100,0.12); color: #aaa; }
 .status-default { background: rgba(100,100,100,0.1); color: #888; }
 
diff --git a/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue b/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue
index 23d8827..c52292e 100644
--- a/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue
+++ b/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, ref, onMounted, onActivated, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../../api';
@@ -149,9 +149,9 @@ onActivated(loadData);
   align-items: baseline;
   gap: 8px;
   padding: 8px 14px;
-  border: 1px solid rgba(212, 175, 55, 0.22);
+  border: 1px solid rgba(0, 102, 204, 0.22);
   border-radius: 8px;
-  background: rgba(212, 175, 55, 0.08);
+  background: rgba(0, 102, 204, 0.08);
 }
 
 .summary-label {
diff --git a/apps/player/src/views/desktop/DesktopFootballView.vue b/apps/player/src/views/desktop/DesktopFootballView.vue
index 295f87b..1e8938e 100644
--- a/apps/player/src/views/desktop/DesktopFootballView.vue
+++ b/apps/player/src/views/desktop/DesktopFootballView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -250,8 +250,8 @@ void loadParlayMatches(true);
 
 .main-tab.active {
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.08);
-  border: 1px solid var(--border-gold-soft);
+  background: rgba(0, 102, 204, 0.08);
+  border: 1px solid var(--border-active);
 }
 
 .refresh-btn {
@@ -294,7 +294,7 @@ void loadParlayMatches(true);
   font-size: 12px;
   font-weight: 800;
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.06);
+  background: rgba(0, 102, 204, 0.06);
   border-left: 3px solid var(--primary);
   border-radius: 0 4px 4px 0;
 }
diff --git a/apps/player/src/views/desktop/DesktopForgotPasswordView.vue b/apps/player/src/views/desktop/DesktopForgotPasswordView.vue
index 349f769..df94bf4 100644
--- a/apps/player/src/views/desktop/DesktopForgotPasswordView.vue
+++ b/apps/player/src/views/desktop/DesktopForgotPasswordView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 /**
  * Desktop Forgot Password View
  */
@@ -44,7 +44,7 @@ import ForgotPasswordView from '../ForgotPasswordView.vue';
   content: '';
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212,175,55,0.06) 0%, transparent 70%);
+  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(0, 102, 204,0.06) 0%, transparent 70%);
   pointer-events: none;
 }
 
@@ -63,7 +63,7 @@ import ForgotPasswordView from '../ForgotPasswordView.vue';
   width: 64px;
   height: 64px;
   object-fit: contain;
-  filter: drop-shadow(0 4px 16px rgba(212,175,55,0.3));
+  filter: drop-shadow(0 4px 16px rgba(0, 102, 204,0.3));
 }
 
 .brand-name {
diff --git a/apps/player/src/views/desktop/DesktopHomeView.vue b/apps/player/src/views/desktop/DesktopHomeView.vue
index 6792a46..d60286e 100644
--- a/apps/player/src/views/desktop/DesktopHomeView.vue
+++ b/apps/player/src/views/desktop/DesktopHomeView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { onMounted, computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -253,8 +253,8 @@ function formatKickoff(startTime: string) {
 }
 
 .match-card:hover {
-  border-color: var(--border-gold-soft);
-  box-shadow: var(--shadow-gold);
+  border-color: var(--border-active);
+  box-shadow: var(--shadow);
 }
 
 .card-top {
@@ -267,7 +267,7 @@ function formatKickoff(startTime: string) {
   font-size: 11px;
   font-weight: 700;
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.08);
+  background: rgba(0, 102, 204, 0.08);
   padding: 2px 6px;
   border-radius: 4px;
   max-width: 100%;
@@ -339,7 +339,7 @@ function formatKickoff(startTime: string) {
 .bet-action-btn {
   padding: 4px 12px;
   border-radius: 4px;
-  border: 1px solid var(--border-gold-soft);
+  border: 1px solid var(--border-active);
   background: transparent;
   color: var(--primary-light);
   font-size: 11px;
@@ -349,7 +349,7 @@ function formatKickoff(startTime: string) {
 
 .match-card:hover .bet-action-btn {
   background: var(--primary);
-  color: #3D2800;
+  color: #FFFFFF;
   border-color: var(--primary);
 }
 </style>
diff --git a/apps/player/src/views/desktop/DesktopInboxHubView.vue b/apps/player/src/views/desktop/DesktopInboxHubView.vue
index a066ac0..e9c241a 100644
--- a/apps/player/src/views/desktop/DesktopInboxHubView.vue
+++ b/apps/player/src/views/desktop/DesktopInboxHubView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onActivated, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -185,7 +185,7 @@ onActivated(refreshUnreadCount);
 
 .hub-tab.active {
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.08);
+  background: rgba(0, 102, 204, 0.08);
 }
 
 .hub-tab.active .dot { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
diff --git a/apps/player/src/views/desktop/DesktopLoginView.vue b/apps/player/src/views/desktop/DesktopLoginView.vue
index 440440d..c7c3ca8 100644
--- a/apps/player/src/views/desktop/DesktopLoginView.vue
+++ b/apps/player/src/views/desktop/DesktopLoginView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 /**
  * Desktop Login View
  * Reuses the existing LoginView form in a centered two-column auth layout.
@@ -59,7 +59,7 @@ import LoginView from '../LoginView.vue';
   content: '';
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212,175,55,0.06) 0%, transparent 70%);
+  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(0, 102, 204,0.06) 0%, transparent 70%);
   pointer-events: none;
 }
 
@@ -78,7 +78,7 @@ import LoginView from '../LoginView.vue';
   width: 64px;
   height: 64px;
   object-fit: contain;
-  filter: drop-shadow(0 4px 16px rgba(212,175,55,0.3));
+  filter: drop-shadow(0 4px 16px rgba(0, 102, 204,0.3));
 }
 
 .brand-name {
@@ -87,7 +87,7 @@ import LoginView from '../LoginView.vue';
   letter-spacing: 0.12em;
   color: var(--primary-light);
   margin: 0;
-  text-shadow: 0 2px 12px rgba(212,175,55,0.25);
+  text-shadow: 0 2px 12px rgba(0, 102, 204,0.25);
 }
 
 .brand-tagline {
diff --git a/apps/player/src/views/desktop/DesktopMatchDetailView.vue b/apps/player/src/views/desktop/DesktopMatchDetailView.vue
index c16cf77..6c0b309 100644
--- a/apps/player/src/views/desktop/DesktopMatchDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopMatchDetailView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, computed, onMounted, watch, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -548,7 +548,7 @@ function toggleSelection(sel: Selection, market: Market, event?: MouseEvent) {
   font-size: 32px;
   font-weight: 900;
   color: var(--primary-light);
-  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
+  text-shadow: 0 0 10px rgba(0, 102, 204, 0.3);
 }
 
 .versus-row .divider {
@@ -658,9 +658,9 @@ function toggleSelection(sel: Selection, market: Market, event?: MouseEvent) {
 
 .market-filter-chip.active {
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.1);
-  border-color: var(--border-gold-soft);
-  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.08);
+  background: rgba(0, 102, 204, 0.1);
+  border-color: var(--border-active);
+  box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.08);
 }
 
 .markets-score-section {
diff --git a/apps/player/src/views/desktop/DesktopMessagesHubShell.vue b/apps/player/src/views/desktop/DesktopMessagesHubShell.vue
index 2b8f2d4..7ea4060 100644
--- a/apps/player/src/views/desktop/DesktopMessagesHubShell.vue
+++ b/apps/player/src/views/desktop/DesktopMessagesHubShell.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, onActivated, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -128,7 +128,7 @@ onActivated(refreshUnreadCount);
 
 .hub-tab.active {
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.08);
+  background: rgba(0, 102, 204, 0.08);
 }
 
 .hub-tab.active .dot {
diff --git a/apps/player/src/views/desktop/DesktopMyBetsView.vue b/apps/player/src/views/desktop/DesktopMyBetsView.vue
index 6e41db8..a2a260b 100644
--- a/apps/player/src/views/desktop/DesktopMyBetsView.vue
+++ b/apps/player/src/views/desktop/DesktopMyBetsView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onMounted, onActivated } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { RouterLink } from 'vue-router';
diff --git a/apps/player/src/views/desktop/DesktopOutrightDetailView.vue b/apps/player/src/views/desktop/DesktopOutrightDetailView.vue
index 4122aa0..b99c8f0 100644
--- a/apps/player/src/views/desktop/DesktopOutrightDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopOutrightDetailView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
diff --git a/apps/player/src/views/desktop/DesktopProfileEditView.vue b/apps/player/src/views/desktop/DesktopProfileEditView.vue
index 6694077..7a212c7 100644
--- a/apps/player/src/views/desktop/DesktopProfileEditView.vue
+++ b/apps/player/src/views/desktop/DesktopProfileEditView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -260,7 +260,7 @@ async function onAvatarSelect(key: string | null) {
   height: 64px;
   border-radius: 50%;
   object-fit: cover;
-  border: 2px solid var(--border-gold-soft);
+  border: 2px solid var(--border-active);
 }
 
 .avatar-placeholder {
@@ -287,7 +287,7 @@ async function onAvatarSelect(key: string | null) {
   transition: all 0.2s;
 }
 
-.change-avatar-btn:hover { border-color: var(--border-gold-soft); color: var(--primary-light); }
+.change-avatar-btn:hover { border-color: var(--border-active); color: var(--primary-light); }
 
 .field-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
 
@@ -313,7 +313,7 @@ async function onAvatarSelect(key: string | null) {
   transition: border-color 0.2s;
 }
 
-.field-input:focus { border-color: var(--border-gold-soft); }
+.field-input:focus { border-color: var(--border-active); }
 .field-input:disabled { opacity: 0.45; cursor: not-allowed; }
 
 .field-hint { font-size: 11px; color: var(--text-muted); margin: 0; }
diff --git a/apps/player/src/views/desktop/DesktopProfileView.vue b/apps/player/src/views/desktop/DesktopProfileView.vue
index 022aead..fc00c0a 100644
--- a/apps/player/src/views/desktop/DesktopProfileView.vue
+++ b/apps/player/src/views/desktop/DesktopProfileView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onMounted, onActivated, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -276,7 +276,7 @@ const balanceDisplay = computed(() =>
 .bank-card-type {
   font-size: 10px;
   font-weight: 800;
-  color: rgba(212, 175, 55, 0.8);
+  color: rgba(0, 102, 204, 0.8);
   font-style: italic;
 }
 
@@ -287,7 +287,7 @@ const balanceDisplay = computed(() =>
   padding: 8px 16px;
   border-radius: 14px;
   background: rgba(0, 0, 0, 0.45);
-  border: 1px solid rgba(212, 175, 55, 0.35);
+  border: 1px solid rgba(0, 102, 204, 0.35);
   color: var(--primary-light);
   font-size: 13px;
   font-weight: 600;
@@ -296,7 +296,7 @@ const balanceDisplay = computed(() =>
   transition: background 0.15s ease;
 }
 
-.recharge-btn:hover { background: rgba(212, 175, 55, 0.15); }
+.recharge-btn:hover { background: rgba(0, 102, 204, 0.15); }
 
 .bank-card-balance {
   flex: 1;
@@ -388,7 +388,7 @@ const balanceDisplay = computed(() =>
   align-items: center;
   padding: 7px 18px;
   border-radius: 6px;
-  border: 1px solid var(--border-gold-soft);
+  border: 1px solid var(--border-active);
   color: var(--primary-light);
   font-size: 13px;
   font-weight: 700;
@@ -396,7 +396,7 @@ const balanceDisplay = computed(() =>
   transition: background 0.2s;
 }
 
-.edit-btn:hover { background: rgba(212,175,55,0.08); }
+.edit-btn:hover { background: rgba(0, 102, 204,0.08); }
 
 .lang-group { display: flex; gap: 8px; flex-wrap: wrap; }
 
@@ -416,9 +416,9 @@ const balanceDisplay = computed(() =>
 }
 
 .lang-opt.active {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   color: var(--primary-light);
-  background: rgba(212,175,55,0.08);
+  background: rgba(0, 102, 204,0.08);
 }
 
 .logout-btn {
diff --git a/apps/player/src/views/desktop/DesktopRechargeHistoryView.vue b/apps/player/src/views/desktop/DesktopRechargeHistoryView.vue
index 6fef90b..1a41017 100644
--- a/apps/player/src/views/desktop/DesktopRechargeHistoryView.vue
+++ b/apps/player/src/views/desktop/DesktopRechargeHistoryView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onMounted, onActivated } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { RouterLink } from 'vue-router';
diff --git a/apps/player/src/views/desktop/DesktopRechargeView.vue b/apps/player/src/views/desktop/DesktopRechargeView.vue
index 568d804..5fd7e1d 100644
--- a/apps/player/src/views/desktop/DesktopRechargeView.vue
+++ b/apps/player/src/views/desktop/DesktopRechargeView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onMounted, onActivated, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
@@ -350,9 +350,9 @@ onActivated(fetchMethods);
 }
 
 .type-tab.active {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-active);
   color: var(--primary-light);
-  background: rgba(212,175,55,0.08);
+  background: rgba(0, 102, 204,0.08);
 }
 
 .recharge-cols {
@@ -401,8 +401,8 @@ onActivated(fetchMethods);
 .method-card:hover { border-color: rgba(255, 255, 255, 0.15); }
 
 .method-card.selected {
-  border-color: var(--border-gold-soft);
-  background: rgba(212,175,55,0.06);
+  border-color: var(--border-active);
+  background: rgba(0, 102, 204,0.06);
 }
 
 .method-name {
@@ -501,7 +501,7 @@ onActivated(fetchMethods);
   max-width: 320px;
 }
 
-.field-input:focus { border-color: var(--border-gold-soft); }
+.field-input:focus { border-color: var(--border-active); }
 
 .preview-wrap {
   position: relative;
@@ -548,7 +548,7 @@ onActivated(fetchMethods);
   transition: border-color 0.2s;
 }
 
-.upload-zone:hover { border-color: var(--border-gold-soft); }
+.upload-zone:hover { border-color: var(--border-active); }
 
 .hidden-input { display: none; }
 
diff --git a/apps/player/src/views/desktop/DesktopRegisterView.vue b/apps/player/src/views/desktop/DesktopRegisterView.vue
index 3df109b..89a00a7 100644
--- a/apps/player/src/views/desktop/DesktopRegisterView.vue
+++ b/apps/player/src/views/desktop/DesktopRegisterView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 /**
  * Desktop Register View
  * Reuses the existing RegisterView form in a centered desktop auth layout.
@@ -45,7 +45,7 @@ import RegisterView from '../RegisterView.vue';
   content: '';
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212,175,55,0.06) 0%, transparent 70%);
+  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(0, 102, 204,0.06) 0%, transparent 70%);
   pointer-events: none;
 }
 
@@ -64,7 +64,7 @@ import RegisterView from '../RegisterView.vue';
   width: 64px;
   height: 64px;
   object-fit: contain;
-  filter: drop-shadow(0 4px 16px rgba(212,175,55,0.3));
+  filter: drop-shadow(0 4px 16px rgba(0, 102, 204,0.3));
 }
 
 .brand-name {
diff --git a/apps/player/src/views/desktop/DesktopWalletDetailView.vue b/apps/player/src/views/desktop/DesktopWalletDetailView.vue
index cd85ee2..ec432e6 100644
--- a/apps/player/src/views/desktop/DesktopWalletDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopWalletDetailView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onMounted, onActivated } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -186,7 +186,7 @@ onActivated(() => loadPage(1));
 .zero { color: var(--text-muted); }
 .load-more { display: flex; justify-content: center; padding: 20px 0 8px; }
 .load-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 28px; border-radius: 6px; border: 1px solid var(--desktop-border); background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
-.load-more-btn:hover:not(:disabled) { border-color: var(--border-gold-soft); color: var(--primary-light); }
+.load-more-btn:hover:not(:disabled) { border-color: var(--border-active); color: var(--primary-light); }
 .load-more-btn:disabled { opacity: 0.5; cursor: default; }
 .end-hint { text-align: center; font-size: 12px; color: #444; padding: 16px 0 4px; }
 .empty-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 20px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
diff --git a/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
index 1dcaab4..bda37bd 100644
--- a/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
diff --git a/apps/player/src/views/desktop/DesktopWalletView.vue b/apps/player/src/views/desktop/DesktopWalletView.vue
index e1f267b..3f491b8 100644
--- a/apps/player/src/views/desktop/DesktopWalletView.vue
+++ b/apps/player/src/views/desktop/DesktopWalletView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { ref, onMounted, onActivated } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, RouterLink } from 'vue-router';