diff --git a/apps/player/src/components/AnnouncementMarquee.vue b/apps/player/src/components/AnnouncementMarquee.vue
index 9706329..b7821b1 100644
--- a/apps/player/src/components/AnnouncementMarquee.vue
+++ b/apps/player/src/components/AnnouncementMarquee.vue
@@ -35,11 +35,11 @@ const text = computed(() => {
   gap: 10px;
   margin: -4px -2px 14px;
   padding: 10px 12px;
-  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);
 }
 
 .marquee-bar.embedded {
@@ -47,8 +47,8 @@ const text = computed(() => {
   padding: 8px 12px;
   border: none;
   border-radius: 0;
-  border-bottom: 1px solid #E5E7EB;
-  background: #F5F7FA;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-body);
 }
 
 .marquee-bar.embedded .marquee-badge {
@@ -67,8 +67,8 @@ const text = computed(() => {
   font-weight: 800;
   letter-spacing: 0.12em;
   color: #FFFFFF;
-  background: #003D6B;
-  border: 1px solid #003D6B;
+  background: var(--gradient-primary);
+  border: none;
   border-radius: 4px;
 }
 
@@ -90,7 +90,7 @@ const text = computed(() => {
   padding-right: 80px;
   font-size: 13px;
   font-weight: 600;
-  color: #003D6B;
+  color: var(--text-secondary);
   white-space: nowrap;
 }
 
diff --git a/apps/player/src/components/BackToTopButton.vue b/apps/player/src/components/BackToTopButton.vue
index 77ff460..ade13c1 100644
--- a/apps/player/src/components/BackToTopButton.vue
+++ b/apps/player/src/components/BackToTopButton.vue
@@ -44,12 +44,12 @@ const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
   width: 44px;
   height: 44px;
   border-radius: 50%;
-  border: 1px solid #E5E7EB;
-  background: #FFFFFF;
-  color: #003D6B;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: none;
+  background: var(--gradient-primary);
+  color: #FFFFFF;
+  box-shadow: var(--shadow-glow), 0 2px 8px rgba(0, 0, 0, 0.3);
   cursor: pointer;
-  transition: background 0.2s, transform 0.2s;
+  transition: opacity 0.2s, transform 0.2s;
 }
 
 .back-top-btn.above-nav {
@@ -57,7 +57,7 @@ const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
 }
 
 .back-top-btn:active {
-  background: rgba(0, 61, 107, 0.06);
+  opacity: 0.9;
   transform: scale(0.96);
 }
 
diff --git a/apps/player/src/components/BannerCarousel.vue b/apps/player/src/components/BannerCarousel.vue
index 7fabf09..e4a84f6 100644
--- a/apps/player/src/components/BannerCarousel.vue
+++ b/apps/player/src/components/BannerCarousel.vue
@@ -173,7 +173,7 @@ onUnmounted(stopAutoPlay);
 .media {
   position: relative;
   overflow: hidden;
-  background: #E8EDF2;
+  background: var(--bg-card);
 }
 
 .viewport {
@@ -197,7 +197,7 @@ onUnmounted(stopAutoPlay);
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background: linear-gradient(135deg, #F5F7FA, #E8EDF2);
+  background: linear-gradient(135deg, #0B0F1A, #141B2D);
   cursor: pointer;
 }
 
@@ -207,8 +207,8 @@ onUnmounted(stopAutoPlay);
   inset: 0;
   z-index: 1;
   background:
-    linear-gradient(90deg, rgba(245, 247, 250, 0.12), rgba(255, 255, 255, 0.03) 48%, rgba(245, 247, 250, 0.12));
-  box-shadow: inset 0 -1px 0 rgba(0, 61, 107, 0.08);
+    linear-gradient(90deg, rgba(15, 32, 39, 0.12), rgba(15, 32, 39, 0.03) 48%, rgba(15, 32, 39, 0.12));
+  box-shadow: inset 0 -1px 0 rgba(244, 162, 97, 0.08);
   pointer-events: none;
 }
 
@@ -219,7 +219,7 @@ onUnmounted(stopAutoPlay);
   height: calc(100% + 36px);
   object-fit: cover;
   filter: blur(16px);
-  opacity: 0.3;
+  opacity: 0.2;
   transform: scale(1.04);
   pointer-events: none;
 }
@@ -242,10 +242,10 @@ onUnmounted(stopAutoPlay);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, rgba(0, 61, 107, 0.08), #E8EDF2);
+  background: linear-gradient(135deg, rgba(244, 162, 97, 0.08), #141B2D);
   font-size: 22px;
   font-weight: 700;
-  color: #003D6B;
+  color: var(--primary);
 }
 
 .media .nav {
@@ -255,9 +255,9 @@ onUnmounted(stopAutoPlay);
   width: 26px;
   height: 26px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.85);
-  color: #003D6B;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-glass);
+  color: var(--primary);
+  border: 1px solid var(--border);
   padding-bottom: 4px;
   font-size: 18px;
   line-height: 1;
@@ -265,7 +265,7 @@ onUnmounted(stopAutoPlay);
   align-items: center;
   justify-content: center;
   z-index: 2;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .nav.prev { left: 8px; }
@@ -286,7 +286,7 @@ onUnmounted(stopAutoPlay);
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: rgba(0, 61, 107, 0.2);
+  background: rgba(148, 163, 184, 0.3);
   border: 1.5px solid transparent;
   padding: 0;
   transition: all 0.25s ease;
@@ -295,8 +295,8 @@ onUnmounted(stopAutoPlay);
 .dot.active {
   width: 18px;
   border-radius: 5px;
-  background: #003D6B;
-  border-color: #003D6B;
-  box-shadow: none;
+  background: var(--gradient-primary);
+  border-color: var(--primary);
+  box-shadow: 0 0 8px rgba(244, 162, 97, 0.4);
 }
 </style>
diff --git a/apps/player/src/components/BetGuideHelp.vue b/apps/player/src/components/BetGuideHelp.vue
index 4e631bf..d597fcd 100644
--- a/apps/player/src/components/BetGuideHelp.vue
+++ b/apps/player/src/components/BetGuideHelp.vue
@@ -67,7 +67,7 @@ function close() {
   border-radius: 50%;
   border: 1px solid #E5E7EB;
   background: #FFFFFF;
-  color: #003D6B;
+  color: #0F2027;
   font-size: 14px;
   font-weight: 800;
   line-height: 1;
@@ -115,7 +115,7 @@ function close() {
 .title {
   font-size: 16px;
   font-weight: 800;
-  color: #003D6B;
+  color: #0F2027;
   text-align: center;
   margin-bottom: 12px;
   padding-right: 24px;
@@ -133,7 +133,7 @@ function close() {
 .guide-body :deep(.flow-name) {
   font-size: 13px;
   font-weight: 800;
-  color: #003D6B;
+  color: #0F2027;
   margin: 0 0 8px;
 }
 
@@ -168,7 +168,7 @@ function close() {
   border-radius: 8px;
   font-size: 14px;
   font-weight: 800;
-  background: #003D6B;
+  background: #F4A261;
   color: #FFFFFF;
   border: none;
 }
diff --git a/apps/player/src/components/BetHistoryCard.vue b/apps/player/src/components/BetHistoryCard.vue
index f56d9bd..fc1a031 100644
--- a/apps/player/src/components/BetHistoryCard.vue
+++ b/apps/player/src/components/BetHistoryCard.vue
@@ -149,19 +149,19 @@ function goDetail() {
   align-items: center;
   gap: 10px;
   padding: 14px 16px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   margin-bottom: 8px;
   cursor: pointer;
   transition: background 0.15s, box-shadow 0.15s;
   -webkit-tap-highlight-color: transparent;
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .bet-card:active {
-  background: #F5F7FA;
+  background: var(--bg-hover);
 }
 
 .card-body {
@@ -182,9 +182,9 @@ function goDetail() {
 .cashback-tag {
   font-size: 10px;
   font-weight: 700;
-  color: #F8971F;
-  background: rgba(248, 151, 31, 0.08);
-  border: 1px solid rgba(248, 151, 31, 0.2);
+  color: var(--accent);
+  background: rgba(244, 162, 97, 0.08);
+  border: 1px solid rgba(244, 162, 97, 0.2);
   border-radius: 4px;
   padding: 1px 6px;
 }
@@ -192,9 +192,9 @@ function goDetail() {
 .bet-type-tag {
   font-size: 10px;
   font-weight: 700;
-  color: #003D6B;
-  background: rgba(0, 61, 107, 0.06);
-  border: 1px solid rgba(0, 61, 107, 0.15);
+  color: var(--primary);
+  background: rgba(244, 162, 97, 0.06);
+  border: 1px solid rgba(244, 162, 97, 0.15);
   border-radius: 4px;
   padding: 1px 6px;
   letter-spacing: 0.02em;
@@ -202,7 +202,7 @@ function goDetail() {
 
 .card-date {
   font-size: 10px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   flex-shrink: 0;
   margin-left: auto;
@@ -211,7 +211,7 @@ function goDetail() {
 .title {
   font-size: 14px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -225,7 +225,7 @@ function goDetail() {
 
 .pick-label {
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -237,8 +237,8 @@ function goDetail() {
 .odds-badge {
   font-size: 11px;
   font-weight: 800;
-  color: #F8971F;
-  background: rgba(248, 151, 31, 0.08);
+  color: var(--warning);
+  background: rgba(255, 179, 0, 0.08);
   border-radius: 4px;
   padding: 1px 6px;
   flex-shrink: 0;
@@ -254,24 +254,24 @@ function goDetail() {
 
 .stake-amt {
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
 }
 
 .return-amt {
   font-size: 15px;
   font-weight: 900;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
-.return-amt.highlight { color: #059669; }
-.return-amt.pending   { color: #F8971F; }
-.return-amt.lost      { color: #DC2626; }
+.return-amt.highlight { color: var(--success); }
+.return-amt.pending   { color: var(--warning); }
+.return-amt.lost      { color: var(--danger); }
 
 .chevron {
   flex-shrink: 0;
   font-size: 18px;
-  color: #E5E7EB;
+  color: var(--border);
   margin-left: 2px;
   line-height: 1;
 }
diff --git a/apps/player/src/components/BetSlipDrawer.vue b/apps/player/src/components/BetSlipDrawer.vue
index 1c3b731..90b1e4b 100644
--- a/apps/player/src/components/BetSlipDrawer.vue
+++ b/apps/player/src/components/BetSlipDrawer.vue
@@ -457,7 +457,7 @@ watch(
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.5);
   z-index: 200;
   display: flex;
   align-items: flex-end;
@@ -466,13 +466,13 @@ watch(
 .drawer {
   width: 100%;
   max-height: 88vh;
-  background: #FFFFFF;
+  background: var(--bg-card);
   border-radius: 16px 16px 0 0;
-  border-top: 1px solid #E5E7EB;
+  border-top: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
 }
 
 .drawer-head {
@@ -484,14 +484,14 @@ watch(
   align-items: flex-start;
   gap: 12px;
   padding: 14px 14px 10px;
-  background: #FFFFFF;
-  border-bottom: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
 }
 
 .drawer-kicker {
   margin: 0 0 3px;
   font-size: 11px;
-  color: #003D6B;
+  color: var(--primary);
   font-weight: 800;
 }
 
@@ -499,7 +499,7 @@ watch(
   margin: 0;
   font-size: 17px;
   font-weight: 900;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .close-btn {
@@ -509,8 +509,8 @@ watch(
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: #F5F7FA;
-  color: #6B7280;
+  background: var(--bg-elevated);
+  color: var(--text-muted);
   font-size: 18px;
   padding: 0;
   pointer-events: auto;
@@ -523,15 +523,15 @@ watch(
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
-  background: rgba(0, 61, 107, 0.04);
-  border-bottom: 1px solid #E5E7EB;
-  color: #6B7280;
+  background: rgba(244, 162, 97, 0.04);
+  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
   font-size: 12px;
 }
 
 .balance-bar strong {
   justify-self: end;
-  color: #003D6B;
+  color: var(--primary);
   font-size: 16px;
   font-weight: 900;
 }
@@ -540,8 +540,8 @@ watch(
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  background: #F5F7FA;
-  color: #6B7280;
+  background: var(--bg-elevated);
+  color: var(--text-muted);
   padding: 0;
 }
 
@@ -550,23 +550,23 @@ watch(
   grid-template-columns: repeat(2, 1fr);
   padding: 8px 12px 0;
   gap: 6px;
-  background: #FFFFFF;
+  background: var(--bg-card);
 }
 
 .slip-tab {
   min-height: 38px;
   border-radius: 6px 6px 0 0;
-  border: 1px solid #E5E7EB;
-  background: #F5F7FA;
-  color: #6B7280;
+  border: 1px solid var(--border);
+  background: var(--bg-elevated);
+  color: var(--text-muted);
   font-size: 13px;
   font-weight: 800;
 }
 
 .slip-tab.active {
-  border-color: #003D6B;
-  background: rgba(0, 61, 107, 0.06);
-  color: #003D6B;
+  border-color: var(--primary);
+  background: rgba(244, 162, 97, 0.06);
+  color: var(--primary);
 }
 
 .tab-count {
@@ -577,7 +577,7 @@ watch(
   height: 18px;
   margin-left: 6px;
   border-radius: 9px;
-  background: #003D6B;
+  background: var(--primary);
   color: #FFFFFF;
   font-size: 11px;
   font-weight: 900;
@@ -592,7 +592,7 @@ watch(
 
 .empty {
   text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
   padding: 26px 12px;
   font-size: 13px;
 }
@@ -603,15 +603,15 @@ watch(
   gap: 10px;
   align-items: center;
   padding: 11px 12px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   margin-bottom: 8px;
 }
 
 .slip-item--single {
-  border-color: #003D6B;
-  background: rgba(0, 61, 107, 0.03);
+  border-color: var(--primary);
+  background: rgba(244, 162, 97, 0.03);
 }
 
 .item-main {
@@ -621,7 +621,7 @@ watch(
 .item-title {
   font-size: 13px;
   font-weight: 900;
-  color: #1A1A2E;
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -631,19 +631,19 @@ watch(
   margin-top: 4px;
   font-size: 12px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--primary);
 }
 
 .item-pick {
   margin-top: 3px;
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   line-height: 1.35;
 }
 
 .item-odds,
 .item-side strong {
-  color: #003D6B;
+  color: var(--primary);
   font-size: 22px;
   font-weight: 900;
 }
@@ -657,7 +657,7 @@ watch(
 
 .remove {
   background: none;
-  color: #DC2626;
+  color: var(--danger);
   font-size: 12px;
   font-weight: 800;
   padding: 0;
@@ -672,12 +672,12 @@ watch(
   min-height: 48px;
   padding: 0 14px;
   border-radius: 8px;
-  background: #FFFFFF;
-  border: 1px solid #003D6B;
-  color: #003D6B;
+  background: var(--bg-card);
+  border: 1px solid var(--primary);
+  color: var(--primary);
   font-size: 14px;
   font-weight: 900;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .btn-add-parlay span {
@@ -687,7 +687,7 @@ watch(
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #003D6B;
+  background: var(--primary);
   color: #FFFFFF;
   font-size: 14px;
   line-height: 1;
@@ -698,16 +698,16 @@ watch(
   margin: 0 0 10px;
   padding: 10px 11px;
   border-radius: 6px;
-  background: rgba(220, 38, 38, 0.06);
-  border: 1px solid rgba(220, 38, 38, 0.18);
-  color: #DC2626;
+  background: rgba(239, 68, 68, 0.06);
+  border: 1px solid rgba(239, 68, 68, 0.18);
+  color: var(--danger);
   font-size: 12px;
   line-height: 1.45;
 }
 
 .parlay-meta {
   margin: 8px 2px 10px;
-  color: #003D6B;
+  color: var(--primary);
   font-size: 12px;
   font-weight: 800;
 }
@@ -715,8 +715,8 @@ watch(
 .stake-area {
   margin: 12px 0 12px;
   padding: 12px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 8px;
 }
 
@@ -727,12 +727,12 @@ watch(
   justify-content: space-between;
   gap: 8px;
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .stake-head strong,
 .return strong {
-  color: #003D6B;
+  color: var(--primary);
   font-size: 16px;
   font-weight: 900;
 }
@@ -742,17 +742,17 @@ watch(
   grid-template-columns: auto 1fr auto;
   align-items: center;
   margin-top: 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 6px;
   overflow: hidden;
-  background: #F5F7FA;
+  background: var(--bg-input);
 }
 
 .currency {
   padding: 0 10px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 13px;
-  border-right: 1px solid #E5E7EB;
+  border-right: 1px solid var(--border);
 }
 
 .stake-input-row input {
@@ -760,7 +760,7 @@ watch(
   height: 42px;
   border: none;
   background: transparent;
-  color: #1A1A2E;
+  color: var(--text);
   font-size: 17px;
   font-weight: 800;
   padding: 0 10px;
@@ -779,7 +779,7 @@ watch(
   width: 38px;
   height: 42px;
   background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
   padding: 0;
   font-size: 15px;
 }
@@ -803,9 +803,9 @@ watch(
 .quick-stakes button {
   min-height: 52px;
   border-radius: 6px;
-  background: #F5F7FA;
-  color: #1A1A2E;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-elevated);
+  color: var(--text);
+  border: 1px solid var(--border);
   font-size: 26px;
   font-weight: 500;
 }
@@ -817,11 +817,11 @@ watch(
 
 .quick-stakes button {
   min-height: 50px;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  background: var(--bg-card-elevated);
+  color: var(--text);
   font-size: 20px;
   font-weight: 800;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
 }
 
 .return {
@@ -829,7 +829,7 @@ watch(
 }
 
 .success {
-  color: #059669;
+  color: var(--success);
   font-size: 13px;
   margin: 0 0 8px;
 }
@@ -840,9 +840,9 @@ watch(
   grid-template-columns: 1fr;
   gap: 10px;
   padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
-  background: #FFFFFF;
-  border-top: 1px solid #E5E7EB;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+  background: var(--bg-card);
+  border-top: 1px solid var(--border);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .drawer-foot--split {
@@ -853,7 +853,7 @@ watch(
   width: 100%;
   min-height: 48px;
   border-radius: 8px;
-  background: #003D6B;
+  background: var(--gradient-primary);
   color: #FFFFFF;
   font-size: 16px;
   font-weight: 900;
diff --git a/apps/player/src/components/BetStatsPanel.vue b/apps/player/src/components/BetStatsPanel.vue
index 9ec47e1..2d7c215 100644
--- a/apps/player/src/components/BetStatsPanel.vue
+++ b/apps/player/src/components/BetStatsPanel.vue
@@ -79,12 +79,12 @@ const stats = computed(() => {
 
 <style scoped>
 .stats-panel {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 14px 12px 10px;
   margin-bottom: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .stats-row {
@@ -110,28 +110,28 @@ const stats = computed(() => {
   font-size: 18px;
   font-weight: 900;
   font-variant-numeric: tabular-nums;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .stat-val.small {
   font-size: 14px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .stat-val.gold {
-  color: #003D6B;
+  color: var(--primary);
 }
 
-.stat-item.won .stat-val { color: #059669; }
-.stat-item.lost .stat-val { color: #DC2626; }
-.stat-item.pending .stat-val { color: #F8971F; }
-.stat-item.push .stat-val { color: #6B7280; }
+.stat-item.won .stat-val { color: var(--success); }
+.stat-item.lost .stat-val { color: var(--danger); }
+.stat-item.pending .stat-val { color: var(--warning); }
+.stat-item.push .stat-val { color: var(--text-muted); }
 
 .stat-label {
   display: block;
   font-size: 10px;
   font-weight: 700;
-  color: #6B7280;
+  color: var(--text-muted);
   letter-spacing: 0.04em;
   margin-top: 2px;
 }
@@ -145,7 +145,7 @@ const stats = computed(() => {
 }
 
 .stats-bar.empty {
-  background: #E8EDF2;
+  background: var(--bg-elevated);
 }
 
 .bar-seg {
@@ -153,8 +153,8 @@ const stats = computed(() => {
   transition: flex 0.3s ease;
 }
 
-.bar-seg.won { background: #059669; }
-.bar-seg.lost { background: #DC2626; }
-.bar-seg.pending { background: #F8971F; }
-.bar-seg.push { background: #6B7280; }
+.bar-seg.won { background: var(--success); }
+.bar-seg.lost { background: var(--danger); }
+.bar-seg.pending { background: var(--warning); }
+.bar-seg.push { background: var(--text-muted); }
 </style>
diff --git a/apps/player/src/components/BetSuccessOverlay.vue b/apps/player/src/components/BetSuccessOverlay.vue
index bee9922..5ae21d3 100644
--- a/apps/player/src/components/BetSuccessOverlay.vue
+++ b/apps/player/src/components/BetSuccessOverlay.vue
@@ -16,7 +16,7 @@ interface Particle {
   color: string; shape: number;
 }
 
-const COLORS = ['#003D6B', '#005B9F', '#0066CC', '#3388DD', '#1A5FA0', '#4499E0'];
+const COLORS = ['#F4A261', '#FFB980', '#FFDDD2', '#F4A261', '#E76F51', '#FFDDD2'];
 let w = 0;
 let h = 0;
 
@@ -111,8 +111,8 @@ onUnmounted(stop);
       <canvas ref="canvasRef" class="confetti-canvas" />
       <div class="success-card">
         <svg class="check" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
-          <circle class="check-circle" cx="26" cy="26" r="24" fill="none" stroke="#003D6B" stroke-width="3" />
-          <path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#003D6B" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
+          <circle class="check-circle" cx="26" cy="26" r="24" fill="none" stroke="#10B981" stroke-width="3" />
+          <path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#10B981" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
         <p class="success-text">{{ t('bet.place_success') }}</p>
       </div>
@@ -125,7 +125,7 @@ onUnmounted(stop);
   position: fixed;
   inset: 0;
   z-index: 300;
-  background: rgba(245, 247, 250, 0.88);
+  background: rgba(15, 32, 39, 0.88);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -166,11 +166,12 @@ onUnmounted(stop);
 }
 
 .success-text {
-  color: #003D6B;
+  color: var(--primary);
   font-size: 18px;
   font-weight: 800;
   letter-spacing: 0.04em;
   animation: text-up 0.4s 0.4s ease both;
+  text-shadow: 0 0 20px rgba(244, 162, 97, 0.4);
 }
 
 @keyframes card-pop {
diff --git a/apps/player/src/components/CashBalanceChip.vue b/apps/player/src/components/CashBalanceChip.vue
index 916d31e..d3888bf 100644
--- a/apps/player/src/components/CashBalanceChip.vue
+++ b/apps/player/src/components/CashBalanceChip.vue
@@ -115,11 +115,11 @@ onUnmounted(() => {
   padding: 0 8px 0 8px;
   min-width: 0;
   cursor: pointer;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #FFFFFF;
+  background: var(--bg-card);
   box-sizing: border-box;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow);
 }
 
 .chip-body {
@@ -131,7 +131,7 @@ onUnmounted(() => {
 
 .chip-label {
   font-size: 8px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   letter-spacing: 0.02em;
   white-space: nowrap;
@@ -144,14 +144,14 @@ onUnmounted(() => {
 .chip-amount {
   font-size: 11px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--accent-light);
   white-space: nowrap;
   line-height: 1.15;
 }
 
 .chevron {
   font-size: 10px;
-  color: #003D6B;
+  color: var(--primary-light);
   transition: transform 0.2s;
   margin-left: 0;
 }
@@ -167,10 +167,10 @@ onUnmounted(() => {
   width: min(260px, 78vw);
   padding: 12px 14px;
   z-index: 130;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: #FFFFFF;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: var(--bg-card-elevated);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
 .cash-panel::before {
@@ -184,22 +184,22 @@ onUnmounted(() => {
   font-size: 13px;
   font-weight: 600;
   padding: 6px 0;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .panel-row.muted {
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .panel-row.highlight {
-  color: #003D6B;
+  color: var(--accent-light);
   font-weight: 800;
   font-size: 14px;
 }
 
 .panel-divider {
   height: 1px;
-  background: #E5E7EB;
+  background: var(--border);
   margin: 4px 0;
 }
 
@@ -208,9 +208,9 @@ onUnmounted(() => {
   padding: 8px 0;
   margin-top: 4px;
   border-radius: 6px;
-  border: 1px solid #003D6B;
+  border: 1px solid var(--primary);
   background: transparent;
-  color: #003D6B;
+  color: var(--primary-light);
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
@@ -218,7 +218,7 @@ onUnmounted(() => {
 }
 
 .panel-recharge-btn:active {
-  background: rgba(0, 61, 107, 0.06);
+  background: rgba(244, 162, 97, 0.1);
 }
 
 .backdrop {
diff --git a/apps/player/src/components/CustomerServiceModal.vue b/apps/player/src/components/CustomerServiceModal.vue
index 30114d6..d582a17 100644
--- a/apps/player/src/components/CustomerServiceModal.vue
+++ b/apps/player/src/components/CustomerServiceModal.vue
@@ -77,7 +77,7 @@ function close() {
   align-items: center;
   justify-content: center;
   padding: 16px;
-  background: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }
@@ -87,11 +87,11 @@ function close() {
   flex-direction: column;
   width: min(100%, 420px);
   height: min(82vh, 680px);
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
 }
 
 .cs-header {
@@ -101,21 +101,21 @@ function close() {
   justify-content: space-between;
   gap: 12px;
   padding: 14px 16px;
-  border-bottom: 1px solid #E5E7EB;
-  background: #FFFFFF;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
 }
 
 .cs-title {
   margin: 0;
   font-size: 16px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--primary);
 }
 
 .close-btn {
   background: none;
   border: none;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 18px;
   cursor: pointer;
   padding: 4px;
@@ -123,13 +123,13 @@ function close() {
 }
 
 .close-btn:hover {
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .cs-body {
   flex: 1;
   min-height: 0;
-  background: #F5F7FA;
+  background: var(--bg-body);
 }
 
 .cs-frame {
@@ -137,7 +137,7 @@ function close() {
   width: 100%;
   height: 100%;
   border: 0;
-  background: #fff;
+  background: var(--bg-body);
 }
 
 .cs-empty {
@@ -150,7 +150,7 @@ function close() {
   text-align: center;
   font-size: 14px;
   line-height: 1.6;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .fade-enter-active,
diff --git a/apps/player/src/components/GoldSpinner.vue b/apps/player/src/components/GoldSpinner.vue
index 87799ed..2cc5718 100644
--- a/apps/player/src/components/GoldSpinner.vue
+++ b/apps/player/src/components/GoldSpinner.vue
@@ -29,16 +29,16 @@ const wrapperStyle = computed(() => {
   >
     <defs>
       <linearGradient id="sp-track" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="#003D6B" stop-opacity="0.15" />
-        <stop offset="50%" stop-color="#005B9F" stop-opacity="0.22" />
-        <stop offset="100%" stop-color="#003D6B" stop-opacity="0.15" />
+        <stop offset="0%" stop-color="#F4A261" stop-opacity="0.15" />
+        <stop offset="50%" stop-color="#FFB980" stop-opacity="0.22" />
+        <stop offset="100%" stop-color="#F4A261" stop-opacity="0.15" />
       </linearGradient>
       <linearGradient id="sp-arc" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="#E8F4FD" />
-        <stop offset="22%" stop-color="#7CB9E8" />
-        <stop offset="50%" stop-color="#005B9F" />
-        <stop offset="78%" stop-color="#003D6B" />
-        <stop offset="100%" stop-color="#002847" />
+        <stop offset="0%" stop-color="#FFDDD2" />
+        <stop offset="22%" stop-color="#FFB980" />
+        <stop offset="50%" stop-color="#F4A261" />
+        <stop offset="78%" stop-color="#E76F51" />
+        <stop offset="100%" stop-color="#F4A261" />
       </linearGradient>
       <filter id="sp-glow">
         <feGaussianBlur stdDeviation="1.2" result="blur" />
@@ -48,9 +48,9 @@ const wrapperStyle = computed(() => {
         </feMerge>
       </filter>
       <radialGradient id="sp-dot" cx="50%" cy="50%" r="50%">
-        <stop offset="0%" stop-color="#E8F4FD" />
-        <stop offset="60%" stop-color="#7CB9E8" />
-        <stop offset="100%" stop-color="#005B9F" />
+        <stop offset="0%" stop-color="#FFDDD2" />
+        <stop offset="60%" stop-color="#FFB980" />
+        <stop offset="100%" stop-color="#F4A261" />
       </radialGradient>
     </defs>
     <circle cx="24" cy="24" r="20" stroke="url(#sp-track)" stroke-width="3" fill="none" />
@@ -74,13 +74,13 @@ const wrapperStyle = computed(() => {
         repeatCount="indefinite"
       />
     </circle>
-    <circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#7CB9E8" opacity="0.6">
+    <circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#FFDDD2" opacity="0.6">
       <animate attributeName="opacity" values="0.6;0.15;0.6" dur="0.9s" repeatCount="indefinite" begin="0.15s" />
     </circle>
-    <circle v-if="active" cx="34" cy="34" r="1.5" fill="#005B9F" opacity="0.4">
+    <circle v-if="active" cx="34" cy="34" r="1.5" fill="#FFB980" opacity="0.4">
       <animate attributeName="opacity" values="0.4;0.1;0.4" dur="1.1s" repeatCount="indefinite" begin="0.35s" />
     </circle>
-    <circle v-if="active" cx="14" cy="34" r="1.5" fill="#005B9F" opacity="0.4">
+    <circle v-if="active" cx="14" cy="34" r="1.5" fill="#FFB980" opacity="0.4">
       <animate attributeName="opacity" values="0.4;0.1;0.4" dur="1s" repeatCount="indefinite" begin="0.55s" />
     </circle>
   </svg>
diff --git a/apps/player/src/components/LeagueAccordionItem.vue b/apps/player/src/components/LeagueAccordionItem.vue
index 3d77080..8baf9ea 100644
--- a/apps/player/src/components/LeagueAccordionItem.vue
+++ b/apps/player/src/components/LeagueAccordionItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import MatchBetCard from './MatchBetCard.vue';
 import saishiImg from '../assets/images/saishi.webp';
 import cardBg from '../assets/images/card-bg.webp';
@@ -40,6 +41,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
+const { t } = useI18n();
 
 const totalCount = computed(() => props.matches.length);
 const liveCount = computed(() => props.matches.filter(m => m.matchPhase === 'closed_pending').length);
@@ -55,9 +57,9 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
       <span class="league-info">
         <span class="league-title">*{{ leagueName }}</span>
         <span class="league-stats">
-          <span class="stat-item">{{ totalCount }}场</span>
-          <span v-if="liveCount > 0" class="stat-item stat-live">{{ liveCount }}进行中</span>
-          <span v-if="openCount > 0" class="stat-item stat-open">{{ openCount }}待开赛</span>
+          <span class="stat-item">{{ totalCount }}{{ t('bet.match_unit') }}</span>
+          <span v-if="liveCount > 0" class="stat-item stat-live">{{ liveCount }}{{ t('bet.status_live') }}</span>
+          <span v-if="openCount > 0" class="stat-item stat-open">{{ openCount }}{{ t('bet.status_open') }}</span>
         </span>
       </span>
       <img
@@ -87,11 +89,11 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
   position: relative;
   isolation: isolate;
   margin-bottom: 10px;
-  border: 1px solid #CBD5E1;
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: #FFFFFF;
+  background: var(--bg-card);
   overflow: hidden;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
 
 .league-row {
@@ -113,7 +115,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
   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.02) 0%, transparent 60%);
   z-index: -1;
   pointer-events: none;
 }
@@ -127,7 +129,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
   width: 26px;
   height: 26px;
   border-radius: 50%;
-  background: #003D6B;
+  background: var(--primary);
   border: none;
   display: flex;
   align-items: center;
@@ -153,7 +155,7 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
 .league-title {
   font-size: 13px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
   line-height: 1.35;
   min-width: 0;
 }
@@ -163,16 +165,16 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
   align-items: center;
   gap: 6px;
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   line-height: 1.2;
 }
 
 .stat-live {
-  color: #059669;
+  color: var(--success);
 }
 
 .stat-open {
-  color: #D97706;
+  color: var(--warning);
 }
 
 .league-saishi {
@@ -183,13 +185,13 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
   object-fit: contain;
   margin-left: 4px;
   padding-left: 10px;
-  border-left: 1px solid #CBD5E1;
+  border-left: 1px solid var(--border);
 }
 
 .match-panel {
   padding: 8px 0 4px;
-  background: #F0F2F6;
-  border-top: 1px solid #D1D5DB;
+  background: var(--bg-card-elevated);
+  border-top: 1px solid var(--border);
 }
 
 .match-grid {
diff --git a/apps/player/src/components/LocaleSwitcher.vue b/apps/player/src/components/LocaleSwitcher.vue
index ca97273..184fad1 100644
--- a/apps/player/src/components/LocaleSwitcher.vue
+++ b/apps/player/src/components/LocaleSwitcher.vue
@@ -79,17 +79,17 @@ onUnmounted(() => {
   width: 36px;
   height: 36px;
   padding: 0;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #FFFFFF;
-  color: #003D6B;
+  background: var(--bg-card-elevated);
+  color: var(--primary-light);
   font-size: 11px;
   font-weight: 700;
   font-family: inherit;
   cursor: pointer;
   box-sizing: border-box;
   flex-shrink: 0;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow);
 }
 
 .locale-switch.compact .locale-trigger {
@@ -106,10 +106,10 @@ onUnmounted(() => {
   margin: 0;
   padding: 4px;
   list-style: none;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card-elevated);
+  border: 1px solid var(--border);
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
 .locale-option {
@@ -118,7 +118,7 @@ onUnmounted(() => {
   gap: 8px;
   padding: 8px 10px;
   border-radius: 6px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
@@ -127,7 +127,7 @@ onUnmounted(() => {
 
 .locale-option:hover,
 .locale-option.active {
-  background: rgba(0, 61, 107, 0.06);
-  color: #003D6B;
+  background: rgba(244, 162, 97, 0.1);
+  color: var(--primary-light);
 }
 </style>
diff --git a/apps/player/src/components/LoginPromptModal.vue b/apps/player/src/components/LoginPromptModal.vue
index 96940cf..1733e9d 100644
--- a/apps/player/src/components/LoginPromptModal.vue
+++ b/apps/player/src/components/LoginPromptModal.vue
@@ -55,7 +55,7 @@ function continueBrowsing() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }
@@ -64,11 +64,11 @@ function continueBrowsing() {
   position: relative;
   width: 90%;
   max-width: 360px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card-elevated);
+  border: 1px solid var(--border);
   border-radius: 12px;
   padding: 28px 24px 24px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), var(--shadow-glow);
 }
 
 .close-btn {
@@ -77,7 +77,7 @@ function continueBrowsing() {
   right: 14px;
   background: none;
   border: none;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 18px;
   cursor: pointer;
   padding: 4px;
@@ -85,20 +85,20 @@ function continueBrowsing() {
 }
 
 .close-btn:hover {
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .login-title {
   font-size: 18px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--primary);
   margin: 0 0 6px;
   text-align: center;
 }
 
 .login-hint {
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   text-align: center;
   margin: 0 0 24px;
 }
@@ -113,7 +113,7 @@ function continueBrowsing() {
   padding: 12px;
   border-radius: 8px;
   border: none;
-  background: #003D6B;
+  background: var(--gradient-primary);
   color: #FFFFFF;
   font-size: 15px;
   font-weight: 800;
@@ -129,9 +129,9 @@ function continueBrowsing() {
 .login-secondary {
   padding: 10px;
   border-radius: 8px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   background: transparent;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
@@ -140,8 +140,8 @@ function continueBrowsing() {
 }
 
 .login-secondary:active {
-  color: #1A1A2E;
-  border-color: #003D6B;
+  color: var(--text);
+  border-color: var(--primary);
 }
 
 .fade-enter-active,
diff --git a/apps/player/src/components/MatchBetCard.vue b/apps/player/src/components/MatchBetCard.vue
index fa0e648..17578c9 100644
--- a/apps/player/src/components/MatchBetCard.vue
+++ b/apps/player/src/components/MatchBetCard.vue
@@ -78,7 +78,7 @@ const liveScoreText = computed(() => {
     :class="{ 'match-card--phase': phase !== 'open' }"
     @click="emit('bet', match.id)"
   >
-    <span v-if="phase === 'open'" class="status-tag status-tag--open">待开赛</span>
+    <span v-if="phase === 'open'" class="status-tag status-tag--open">{{ t('bet.status_open') }}</span>
     <span v-else-if="phase === 'settled'" class="status-tag status-tag--settled">{{ phaseLabel }}</span>
     <span v-else class="status-tag status-tag--pending">{{ phaseLabel }}</span>
 
@@ -130,8 +130,8 @@ const liveScoreText = computed(() => {
 <style scoped>
 .match-card {
   position: relative;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 8px 6px 8px;
   display: flex;
@@ -141,7 +141,7 @@ const liveScoreText = computed(() => {
   min-width: 0;
   overflow: hidden;
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transition: transform 0.15s, box-shadow 0.15s;
 }
 
@@ -149,7 +149,7 @@ const liveScoreText = computed(() => {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 50%, rgba(0, 91, 159, 0.02) 100%);
+  background: linear-gradient(135deg, rgba(244, 162, 97, 0.02) 0%, transparent 50%, rgba(59, 130, 246, 0.02) 100%);
   pointer-events: none;
   z-index: 0;
 }
@@ -184,7 +184,7 @@ const liveScoreText = computed(() => {
   justify-content: center;
   font-size: 14px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
   line-height: 1.2;
   word-break: break-word;
   text-align: center;
@@ -193,7 +193,7 @@ const liveScoreText = computed(() => {
 }
 
 .match-card--phase .team-name {
-  color: #4B5563;
+  color: var(--text-dim);
 }
 
 .team-flag {
@@ -223,7 +223,7 @@ const liveScoreText = computed(() => {
 .kickoff {
   font-size: 12px;
   font-weight: 600;
-  color: #1A1A2E;
+  color: var(--text);
   line-height: 1.15;
   white-space: normal;
   text-align: center;
@@ -234,14 +234,14 @@ const liveScoreText = computed(() => {
 .live-score {
   font-size: 18px;
   font-weight: 900;
-  color: #003D6B;
+  color: var(--primary);
   line-height: 1;
 }
 
 .vs {
   font-size: 18px;
   font-weight: 900;
-  color: #003D6B;
+  color: var(--primary);
   line-height: 1;
 }
 
@@ -259,24 +259,24 @@ const liveScoreText = computed(() => {
 }
 
 .status-tag--open {
-  background: #FEF3C7;
-  color: #92400E;
-  border-bottom: 1px solid #FDE68A;
-  border-left: 1px solid #FDE68A;
+  background: rgba(255, 179, 0, 0.15);
+  color: #FFB300;
+  border-bottom: 1px solid rgba(255, 179, 0, 0.3);
+  border-left: 1px solid rgba(255, 179, 0, 0.3);
 }
 
 .status-tag--settled {
-  background: #E8EDF2;
-  color: #4B5563;
-  border-bottom: 1px solid #D1D5DB;
-  border-left: 1px solid #D1D5DB;
+  background: var(--bg-elevated);
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+  border-left: 1px solid var(--border);
 }
 
 .status-tag--pending {
-  background: #FEF3C7;
-  color: #D97706;
-  border-bottom: 1px solid #FDE68A;
-  border-left: 1px solid #FDE68A;
+  background: rgba(255, 179, 0, 0.15);
+  color: #FFB300;
+  border-bottom: 1px solid rgba(255, 179, 0, 0.3);
+  border-left: 1px solid rgba(255, 179, 0, 0.3);
 }
 
 .bet-btn {
@@ -291,8 +291,8 @@ const liveScoreText = computed(() => {
 }
 
 .bet-btn--view {
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
-  color: #6B7280;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
 }
 </style>
diff --git a/apps/player/src/components/PhoneCountrySelect.vue b/apps/player/src/components/PhoneCountrySelect.vue
index 54b60b9..72424aa 100644
--- a/apps/player/src/components/PhoneCountrySelect.vue
+++ b/apps/player/src/components/PhoneCountrySelect.vue
@@ -129,20 +129,20 @@ onUnmounted(() => {
   gap: 3px;
   height: 36px;
   padding: 0 8px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #FFFFFF;
-  color: #1A1A2E;
+  background: var(--bg-input);
+  color: var(--text);
   font-family: inherit;
   font-size: 12px;
   line-height: 1;
   cursor: pointer;
   white-space: nowrap;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .country-trigger:active {
-  background: #F5F7FA;
+  background: var(--bg-hover);
 }
 
 .country-iso {
@@ -151,12 +151,12 @@ onUnmounted(() => {
 }
 
 .country-sep {
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 10px;
 }
 
 .country-dial {
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
 }
 
@@ -167,31 +167,31 @@ onUnmounted(() => {
   z-index: 60;
   width: min(260px, calc(100vw - 48px));
   padding: 4px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card-elevated);
+  border: 1px solid var(--border);
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 .country-search {
   width: 100%;
   margin-bottom: 4px;
   padding: 6px 8px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 4px;
-  background: #F5F7FA;
-  color: #1A1A2E;
+  background: var(--bg-input);
+  color: var(--text);
   font-size: 12px;
   font-family: inherit;
 }
 
 .country-search::placeholder {
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .country-search:focus {
   outline: none;
-  border-color: #003D6B;
+  border-color: var(--primary);
 }
 
 .country-menu {
@@ -214,20 +214,20 @@ onUnmounted(() => {
 
 .country-option:hover,
 .country-option.active {
-  background: #F5F7FA;
+  background: rgba(244, 162, 97, 0.08);
 }
 
 .country-option .country-iso {
   flex-shrink: 0;
   width: 26px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .country-option .country-dial {
   flex-shrink: 0;
   width: 38px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .country-name {
@@ -235,17 +235,17 @@ onUnmounted(() => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .country-option:hover .country-name,
 .country-option.active .country-name {
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .country-empty {
   padding: 10px 8px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 11px;
   text-align: center;
 }
diff --git a/apps/player/src/components/PlayerAvatarModal.vue b/apps/player/src/components/PlayerAvatarModal.vue
index 5b56e44..01dbad7 100644
--- a/apps/player/src/components/PlayerAvatarModal.vue
+++ b/apps/player/src/components/PlayerAvatarModal.vue
@@ -55,7 +55,7 @@ function confirm() {
   position: fixed;
   inset: 0;
   z-index: 210;
-  background: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -69,11 +69,11 @@ function confirm() {
   max-width: 360px;
   max-height: 85vh;
   overflow-y: auto;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card-elevated);
+  border: 1px solid var(--border);
   border-radius: 12px;
   padding: 16px 14px 14px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
 .close-x {
@@ -83,9 +83,9 @@ function confirm() {
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  border: 1px solid #E5E7EB;
-  background: #F5F7FA;
-  color: #6B7280;
+  border: 1px solid var(--border);
+  background: var(--bg-elevated);
+  color: var(--text-muted);
   font-size: 12px;
   line-height: 1;
   padding: 0;
@@ -95,7 +95,7 @@ function confirm() {
   margin: 0 28px 12px 0;
   font-size: 15px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--primary);
 }
 
 .actions {
@@ -114,14 +114,14 @@ function confirm() {
 }
 
 .btn-cancel {
-  border: 1px solid #E5E7EB;
-  background: #FFFFFF;
-  color: #6B7280;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-muted);
 }
 
 .btn-confirm {
   border: none;
-  background: #003D6B;
+  background: var(--gradient-primary);
   color: #FFFFFF;
 }
 </style>
diff --git a/apps/player/src/components/PlayerAvatarPicker.vue b/apps/player/src/components/PlayerAvatarPicker.vue
index 67bf893..f5ff145 100644
--- a/apps/player/src/components/PlayerAvatarPicker.vue
+++ b/apps/player/src/components/PlayerAvatarPicker.vue
@@ -78,7 +78,7 @@ function select(key: string) {
 .picker-label {
   display: block;
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   margin-bottom: 6px;
 }
@@ -87,15 +87,15 @@ function select(key: string) {
   width: 100%;
   padding: 8px 10px;
   border-radius: 6px;
-  border: 1px solid #E5E7EB;
-  background: #F5F7FA;
-  color: #1A1A2E;
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--text);
   font-size: 13px;
 }
 
 .picker-search:focus {
   outline: none;
-  border-color: #003D6B;
+  border-color: var(--primary);
 }
 
 .picker-grid {
@@ -114,16 +114,16 @@ function select(key: string) {
   gap: 4px;
   padding: 8px 4px 6px;
   border-radius: 8px;
-  border: 1px solid #E5E7EB;
-  background: #FFFFFF;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
   cursor: pointer;
   min-width: 0;
 }
 
 .picker-item.active {
-  border-color: #003D6B;
-  box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.18);
-  background: rgba(0, 61, 107, 0.04);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.18);
+  background: rgba(244, 162, 97, 0.04);
 }
 
 .picker-photo {
@@ -132,14 +132,14 @@ function select(key: string) {
   border-radius: 50%;
   object-fit: cover;
   object-position: top;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
 }
 
 .picker-name {
   width: 100%;
   font-size: 10px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
   text-align: center;
   line-height: 1.2;
   overflow: hidden;
@@ -150,7 +150,7 @@ function select(key: string) {
 .picker-meta {
   width: 100%;
   font-size: 9px;
-  color: #6B7280;
+  color: var(--text-muted);
   text-align: center;
   line-height: 1.2;
   overflow: hidden;
@@ -161,7 +161,7 @@ function select(key: string) {
 .picker-empty {
   margin: 8px 0 0;
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   text-align: center;
 }
 </style>
diff --git a/apps/player/src/components/RobotVerify.vue b/apps/player/src/components/RobotVerify.vue
index c30e3ea..8dc4324 100644
--- a/apps/player/src/components/RobotVerify.vue
+++ b/apps/player/src/components/RobotVerify.vue
@@ -139,14 +139,14 @@ defineExpose({ validate, refresh });
   display: flex;
   align-items: stretch;
   height: 36px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: #FFFFFF;
+  background: var(--bg-input);
   overflow: hidden;
 }
 
 .captcha-row:focus-within {
-  border-color: #003D6B;
+  border-color: var(--primary);
 }
 
 .hp-field {
@@ -164,7 +164,7 @@ defineExpose({ validate, refresh });
   padding: 0 10px;
   border: none;
   background: transparent;
-  color: #1A1A2E;
+  color: var(--text);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.12em;
@@ -174,7 +174,7 @@ defineExpose({ validate, refresh });
 }
 
 .captcha-input::placeholder {
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   letter-spacing: 0.02em;
   text-transform: none;
@@ -187,11 +187,11 @@ defineExpose({ validate, refresh });
   cursor: pointer;
   display: block;
   border: none;
-  border-left: 1px solid #E5E7EB;
+  border-left: 1px solid var(--border);
 }
 
 .captcha-error {
-  color: #DC2626;
+  color: var(--danger);
   font-size: 12px;
   font-weight: 600;
   margin: 4px 0 0;
diff --git a/apps/player/src/components/StatusWatermark.vue b/apps/player/src/components/StatusWatermark.vue
index b0dcd98..48ae0b6 100644
--- a/apps/player/src/components/StatusWatermark.vue
+++ b/apps/player/src/components/StatusWatermark.vue
@@ -43,26 +43,26 @@ withDefaults(
 }
 
 .status-watermark.won {
-  color: #059669;
+  color: rgba(16, 185, 129, 0.12);
 }
 
 .status-watermark.lost {
-  color: #DC2626;
+  color: rgba(239, 68, 68, 0.12);
 }
 
 .status-watermark.push {
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .status-watermark.pending {
-  color: #F8971F;
+  color: rgba(255, 179, 0, 0.12);
 }
 
 .status-watermark.closed {
-  color: #005B9F;
+  color: var(--primary-light);
 }
 
 .status-watermark.settled {
-  color: #0066CC;
+  color: var(--primary);
 }
 </style>
diff --git a/apps/player/src/components/UserAvatarMenu.vue b/apps/player/src/components/UserAvatarMenu.vue
index c4db867..66bb140 100644
--- a/apps/player/src/components/UserAvatarMenu.vue
+++ b/apps/player/src/components/UserAvatarMenu.vue
@@ -85,8 +85,8 @@ function logout() {
   height: 36px;
   box-sizing: border-box;
   border-radius: 50%;
-  border: 2px solid #003D6B;
-  background: linear-gradient(145deg, #003D6B, #005B9F);
+  border: 2px solid var(--primary-light);
+  background: linear-gradient(145deg, var(--primary-dark), var(--primary-light));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -94,6 +94,7 @@ function logout() {
   flex-shrink: 0;
   overflow: hidden;
   padding: 0;
+  box-shadow: 0 0 12px rgba(244, 162, 97, 0.3);
 }
 
 .avatar-img {
@@ -115,10 +116,12 @@ function logout() {
   right: 0;
   min-width: 168px;
   padding: 8px 0;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: #FFFFFF;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: var(--bg-card-elevated);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
   z-index: 140;
 }
 
@@ -126,8 +129,8 @@ function logout() {
   padding: 8px 14px 10px;
   font-size: 13px;
   font-weight: 800;
-  color: #003D6B;
-  border-bottom: 1px solid #E5E7EB;
+  color: var(--primary-light);
+  border-bottom: 1px solid var(--border);
   margin-bottom: 4px;
 }
 
@@ -136,22 +139,22 @@ function logout() {
   text-align: left;
   padding: 10px 14px;
   background: none;
-  color: #1A1A2E;
+  color: var(--text);
   font-size: 14px;
   font-weight: 600;
 }
 
 .menu-item:hover {
-  background: #F5F7FA;
+  background: var(--bg-hover);
 }
 
 .menu-item.recharge {
-  color: #003D6B;
+  color: var(--primary-light);
   font-weight: 700;
 }
 
 .menu-item.danger {
-  color: #DC2626;
+  color: var(--danger);
 }
 
 .backdrop {
diff --git a/apps/player/src/components/WalletStatsPanel.vue b/apps/player/src/components/WalletStatsPanel.vue
index 8554bfe..15ea90b 100644
--- a/apps/player/src/components/WalletStatsPanel.vue
+++ b/apps/player/src/components/WalletStatsPanel.vue
@@ -76,12 +76,12 @@ const stats = computed(() => {
 
 <style scoped>
 .wallet-stats-panel {
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .stats-row {
@@ -100,7 +100,7 @@ const stats = computed(() => {
   display: block;
   font-size: 11px;
   font-weight: 700;
-  color: #6B7280;
+  color: var(--text-muted);
   letter-spacing: 0.03em;
   margin-bottom: 2px;
 }
@@ -113,16 +113,16 @@ const stats = computed(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
-.stat-val.income { color: #059669; }
-.stat-val.expense { color: #DC2626; }
-.stat-val.cashback { color: #F8971F; }
+.stat-val.income { color: var(--success); }
+.stat-val.expense { color: var(--danger); }
+.stat-val.cashback { color: var(--warning); }
 
 .stats-divider {
   height: 1px;
   margin: 6px 8px;
-  background: #E5E7EB;
+  background: var(--border);
 }
 </style>
diff --git a/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue b/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue
index a9ae071..1ef95b2 100644
--- a/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue
+++ b/apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue
@@ -96,18 +96,18 @@ function formatOdds(odds: string) {
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.5);
   z-index: 210;
   display: flex;
   align-items: flex-end;
 }
 
 .drawer {
-  background: #FFFFFF;
+  background: var(--bg-card);
   width: 100%;
   max-height: 80vh;
   border-radius: 16px 16px 0 0;
-  border-top: 1px solid #E5E7EB;
+  border-top: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -123,9 +123,9 @@ function formatOdds(odds: string) {
 .drawer-foot {
   flex-shrink: 0;
   padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
-  background: #F5F7FA;
-  border-top: 1px solid #E5E7EB;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+  background: var(--bg-elevated);
+  border-top: 1px solid var(--border);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .drawer-header {
@@ -134,32 +134,32 @@ function formatOdds(odds: string) {
   align-items: center;
   padding: 14px 14px 12px;
   flex-shrink: 0;
-  background: #FFFFFF;
-  border-bottom: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
   z-index: 2;
 }
 
 .drawer-header h3 {
   font-size: 16px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .count {
-  color: #003D6B;
+  color: var(--primary);
 }
 
 .close-btn {
   background: none;
-  color: #6B7280;
+  color: var(--text-muted);
   font-size: 20px;
   padding: 4px;
 }
 
 .slip-item {
   padding: 10px 12px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
   border-radius: 8px;
   margin-bottom: 8px;
 }
@@ -167,17 +167,17 @@ function formatOdds(odds: string) {
 .item-name {
   font-size: 13px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .item-sel {
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   margin-top: 4px;
 }
 
 .odds {
-  color: #F8971F;
+  color: var(--warning);
   font-weight: 800;
 }
 
@@ -190,24 +190,24 @@ function formatOdds(odds: string) {
   justify-content: space-between;
   align-items: center;
   font-size: 13px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   margin-bottom: 8px;
 }
 
 .summary-row strong {
-  color: #003D6B;
+  color: var(--primary);
   font-size: 15px;
   font-weight: 800;
 }
 
 .return {
   font-size: 13px;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .return strong {
-  color: #003D6B;
+  color: var(--primary);
   font-size: 18px;
   font-weight: 800;
 }
diff --git a/apps/player/src/components/match-detail/CorrectScorePanel.vue b/apps/player/src/components/match-detail/CorrectScorePanel.vue
index 9b47bb5..b9e2391 100644
--- a/apps/player/src/components/match-detail/CorrectScorePanel.vue
+++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue
@@ -75,8 +75,8 @@ function formatOdds(odds: string) {
 <style scoped>
 .cs-panel {
   padding: 6px 8px 0;
-  background: #EDF0F4;
-  border-top: 1px solid #D1D5DB;
+  background: var(--bg-card-elevated);
+  border-top: 1px solid var(--border);
 }
 
 .cs-panel--locked {
@@ -95,7 +95,7 @@ function formatOdds(odds: string) {
   text-align: center;
   font-size: 10px;
   font-weight: 700;
-  color: #4B5563;
+  color: var(--text-secondary);
 }
 
 .cols-grid {
@@ -118,38 +118,38 @@ function formatOdds(odds: string) {
   gap: 3px;
   min-height: 42px;
   padding: 6px 3px;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   text-align: center;
   transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .score-card.selected {
-  border-color: #003D6B;
+  border-color: var(--primary);
   border-width: 2px;
-  background: rgba(0, 61, 107, 0.08);
+  background: rgba(244, 162, 97, 0.08);
 }
 
 .score-card--locked {
-  background: #E8EDF2;
-  border-color: #E5E7EB;
+  background: var(--bg-elevated);
+  border-color: var(--border);
 }
 
 .score-card--locked .score-line,
 .score-card--locked .odds {
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .score-line {
   font-size: 11px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
 }
 
 .odds {
   font-size: 10px;
   font-weight: 700;
-  color: #E8870A;
+  color: var(--warning);
 }
 </style>
diff --git a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
index be697bf..55a2510 100644
--- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
+++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
@@ -57,8 +57,8 @@ function onPick(id: string) {
 <style scoped>
 .wrap {
   padding: 6px 8px 8px;
-  background: #EDF0F4;
-  border-top: 1px solid #D1D5DB;
+  background: var(--bg-card-elevated);
+  border-top: 1px solid var(--border);
 }
 
 .wrap.locked {
@@ -80,32 +80,32 @@ function onPick(id: string) {
   min-height: 44px;
   padding: 6px 4px;
   border-radius: 8px;
-  background: #FFFFFF;
-  border: 1px solid #CBD5E1;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   text-align: center;
   transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .odds-btn.selected {
-  border-color: #003D6B;
+  border-color: var(--primary);
   border-width: 2px;
-  background: rgba(0, 61, 107, 0.08);
+  background: rgba(244, 162, 97, 0.08);
 }
 
 .odds-btn--locked {
-  background: #E8EDF2;
-  border-color: #E5E7EB;
+  background: var(--bg-elevated);
+  border-color: var(--border);
   cursor: not-allowed;
 }
 
 .odds-btn--locked .label,
 .odds-btn--locked .odds {
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .label {
   font-size: 10px;
-  color: #4B5563;
+  color: var(--text-secondary);
   line-height: 1.15;
   font-weight: 600;
 }
@@ -113,6 +113,6 @@ function onPick(id: string) {
 .odds {
   font-size: 15px;
   font-weight: 800;
-  color: #E8870A;
+  color: var(--warning);
 }
 </style>
diff --git a/apps/player/src/components/match-detail/MarketTypeTile.vue b/apps/player/src/components/match-detail/MarketTypeTile.vue
index e93ce0e..fe2fd35 100644
--- a/apps/player/src/components/match-detail/MarketTypeTile.vue
+++ b/apps/player/src/components/match-detail/MarketTypeTile.vue
@@ -44,11 +44,11 @@ const { t } = useI18n();
 }
 
 .row:not(.disabled):active {
-  background: rgba(0, 61, 107, 0.07);
+  background: rgba(244, 162, 97, 0.07);
 }
 
 .row.expanded {
-  background: rgba(0, 61, 107, 0.07);
+  background: rgba(244, 162, 97, 0.07);
 }
 
 .row.expanded::before {
@@ -58,7 +58,7 @@ const { t } = useI18n();
   left: 12px;
   right: 12px;
   height: 2.5px;
-  background: #003D6B;
+  background: var(--primary);
   opacity: 1;
 }
 
@@ -71,7 +71,7 @@ const { t } = useI18n();
   min-width: 0;
   font-size: 13px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--text);
   letter-spacing: 0.02em;
 }
 
@@ -79,32 +79,32 @@ const { t } = useI18n();
   flex-shrink: 0;
   font-size: 9px;
   font-weight: 700;
-  color: #F8971F;
+  color: var(--warning);
   padding: 2px 6px;
   border-radius: 3px;
-  background: rgba(248, 151, 31, 0.1);
-  border: 1px solid rgba(248, 151, 31, 0.3);
+  background: rgba(255, 179, 0, 0.1);
+  border: 1px solid rgba(255, 179, 0, 0.3);
 }
 
 .row.expanded .row-label {
-  color: #003D6B;
+  color: var(--primary);
 }
 
 .row-muted {
   font-size: 10px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
 }
 
 .row-chevron {
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
   flex-shrink: 0;
 }
 
 .row-chevron.open {
   transform: rotate(90deg);
-  color: #003D6B;
+  color: var(--primary);
 }
 </style>
diff --git a/apps/player/src/components/outright/OutrightBetModal.vue b/apps/player/src/components/outright/OutrightBetModal.vue
index d90955e..39953d3 100644
--- a/apps/player/src/components/outright/OutrightBetModal.vue
+++ b/apps/player/src/components/outright/OutrightBetModal.vue
@@ -221,7 +221,7 @@ function formatOdds(odds: string) {
   position: fixed;
   inset: 0;
   z-index: 200;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -233,12 +233,12 @@ function formatOdds(odds: string) {
   position: relative;
   width: 100%;
   max-width: 300px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 18px 16px 16px;
   text-align: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .close-x {
@@ -248,8 +248,8 @@ function formatOdds(odds: string) {
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  background: #F5F7FA;
-  color: #6B7280;
+  background: var(--bg-elevated);
+  color: var(--text-muted);
   font-size: 14px;
   line-height: 1;
 }
@@ -257,7 +257,7 @@ function formatOdds(odds: string) {
 .hint {
   font-size: 12px;
   font-weight: 600;
-  color: #6B7280;
+  color: var(--text-muted);
   margin-bottom: 12px;
   letter-spacing: 0.04em;
 }
@@ -280,21 +280,21 @@ function formatOdds(odds: string) {
   height: 32px;
   object-fit: cover;
   border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .team {
   font-size: 20px;
   font-weight: 900;
-  color: #1A1A2E;
+  color: var(--text);
   letter-spacing: 0.02em;
 }
 
 .odds-badge {
   display: inline-block;
   padding: 3px 10px;
-  background: #F8971F;
-  border: 1px solid rgba(248, 151, 31, 0.3);
+  background: var(--warning);
+  border: 1px solid rgba(255, 179, 0, 0.3);
   color: #FFFFFF;
   font-size: 13px;
   font-weight: 800;
@@ -303,7 +303,7 @@ function formatOdds(odds: string) {
 
 .event-title {
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   margin-bottom: 12px;
   line-height: 1.4;
   padding: 0 4px;
@@ -315,28 +315,28 @@ function formatOdds(odds: string) {
   align-items: center;
   padding: 8px 10px;
   margin-bottom: 12px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
   border-radius: 8px;
 }
 
 .balance-label {
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
 }
 
 .balance-value {
   font-size: 14px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--primary);
 }
 
 .stake-label {
   display: block;
   text-align: left;
   font-size: 11px;
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 600;
   margin-bottom: 6px;
 }
@@ -346,9 +346,9 @@ function formatOdds(odds: string) {
   padding: 11px 12px;
   margin-bottom: 8px;
   border-radius: 8px;
-  border: 1px solid #E5E7EB;
-  background: #F5F7FA;
-  color: #1A1A2E;
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--text);
   font-size: 18px;
   font-weight: 800;
   text-align: center;
@@ -356,12 +356,12 @@ function formatOdds(odds: string) {
 }
 
 .stake-input:focus {
-  border-color: #003D6B;
-  box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.15);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.15);
 }
 
 .stake-input::placeholder {
-  color: #6B7280;
+  color: var(--text-muted);
   font-weight: 500;
   font-size: 14px;
 }
@@ -376,33 +376,33 @@ function formatOdds(odds: string) {
   flex: 1;
   padding: 6px 4px;
   border-radius: 8px;
-  border: 1px solid #E5E7EB;
-  background: #FFFFFF;
-  color: #6B7280;
+  border: 1px solid var(--border);
+  background: var(--bg-card-elevated);
+  color: var(--text-muted);
   font-size: 11px;
   font-weight: 700;
   transition: border-color 0.15s ease, background 0.15s ease;
 }
 
 .chip: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.06);
 }
 
 .est-return {
   font-size: 12px;
-  color: #6B7280;
+  color: var(--text-muted);
   margin-bottom: 12px;
 }
 
 .est-value {
-  color: #003D6B;
+  color: var(--primary);
   font-weight: 800;
 }
 
 .error {
-  color: #DC2626;
+  color: var(--danger);
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 10px;
@@ -417,9 +417,9 @@ function formatOdds(odds: string) {
 .btn-cancel {
   padding: 10px;
   border-radius: 8px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
-  color: #6B7280;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
   font-size: 14px;
   font-weight: 700;
 }
@@ -429,7 +429,7 @@ function formatOdds(odds: string) {
   border-radius: 8px;
   font-size: 14px;
   font-weight: 800;
-  background: #003D6B;
+  background: var(--gradient-primary);
   color: #FFFFFF;
   border: none;
 }
@@ -443,9 +443,9 @@ function formatOdds(odds: string) {
   height: 44px;
   margin: 0 auto 8px;
   border-radius: 50%;
-  border: 2px solid #059669;
-  background: rgba(5, 150, 105, 0.1);
-  color: #059669;
+  border: 2px solid var(--success);
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--success);
   font-size: 24px;
   font-weight: 900;
   line-height: 40px;
@@ -454,15 +454,15 @@ function formatOdds(odds: string) {
 .success-title {
   font-size: 16px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
   margin-bottom: 10px;
 }
 
 .summary {
   margin: 12px 0 14px;
   padding: 10px;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
   border-radius: 8px;
 }
 
@@ -470,14 +470,14 @@ function formatOdds(odds: string) {
   display: flex;
   justify-content: space-between;
   font-size: 13px;
-  color: #6B7280;
+  color: var(--text-muted);
   padding: 4px 0;
 }
 
 .summary-row + .summary-row {
   margin-top: 4px;
   padding-top: 8px;
-  border-top: 1px solid #E5E7EB;
+  border-top: 1px solid var(--border);
 }
 
 .btn-done {
@@ -486,7 +486,7 @@ function formatOdds(odds: string) {
   border-radius: 8px;
   font-size: 14px;
   font-weight: 800;
-  background: #003D6B;
+  background: var(--gradient-primary);
   color: #FFFFFF;
   border: none;
 }
diff --git a/apps/player/src/components/outright/OutrightEventSection.vue b/apps/player/src/components/outright/OutrightEventSection.vue
index 42e42cc..1633006 100644
--- a/apps/player/src/components/outright/OutrightEventSection.vue
+++ b/apps/player/src/components/outright/OutrightEventSection.vue
@@ -86,11 +86,11 @@ const headMeta = computed(() => {
   position: relative;
   isolation: isolate;
   margin-bottom: 12px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: #FFFFFF;
+  background: var(--bg-card);
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .event-head {
@@ -113,7 +113,7 @@ const headMeta = computed(() => {
   position: absolute;
   inset: 0;
   background: v-bind(matchCardBg) center / 100% 100% no-repeat;
-  opacity: 0.08;
+  opacity: 0.04;
   z-index: -1;
   pointer-events: none;
 }
@@ -123,8 +123,8 @@ const headMeta = computed(() => {
   width: 26px;
   height: 26px;
   border-radius: 50%;
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -132,11 +132,11 @@ const headMeta = computed(() => {
 }
 
 .toggle-icon.open {
-  border-color: #003D6B;
+  border-color: var(--primary);
 }
 
 .toggle-mark {
-  color: #003D6B;
+  color: var(--primary);
   font-size: 17px;
   font-weight: 900;
   line-height: 1;
@@ -153,21 +153,21 @@ const headMeta = computed(() => {
 .event-title {
   font-size: 13px;
   font-weight: 800;
-  color: #003D6B;
+  color: var(--primary);
   line-height: 1.35;
 }
 
 .event-league {
   font-size: 11px;
   font-weight: 600;
-  color: #6B7280;
+  color: var(--text-muted);
   line-height: 1.3;
 }
 
 .event-meta {
   font-size: 11px;
   font-weight: 600;
-  color: #6B7280;
+  color: var(--text-muted);
 }
 
 .event-saishi {
@@ -177,7 +177,7 @@ const headMeta = computed(() => {
   max-width: 40px;
   object-fit: contain;
   padding-left: 8px;
-  border-left: 1px solid #E5E7EB;
+  border-left: 1px solid var(--border);
 }
 
 .options-scroll {
@@ -186,7 +186,7 @@ const headMeta = computed(() => {
   -webkit-overflow-scrolling: touch;
   padding: 8px 2px 2px;
   scrollbar-width: thin;
-  scrollbar-color: #E5E7EB transparent;
+  scrollbar-color: var(--border) transparent;
 }
 
 .options-grid {
diff --git a/apps/player/src/components/outright/OutrightOptionCard.vue b/apps/player/src/components/outright/OutrightOptionCard.vue
index 1b12c62..ef8118b 100644
--- a/apps/player/src/components/outright/OutrightOptionCard.vue
+++ b/apps/player/src/components/outright/OutrightOptionCard.vue
@@ -77,8 +77,8 @@ onUnmounted(() => {
   min-width: 0;
   padding: 8px 4px 6px;
   border-radius: 8px;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -89,8 +89,8 @@ onUnmounted(() => {
 }
 
 .option-card:active {
-  border-color: #003D6B;
-  box-shadow: 0 0 0 1px rgba(0, 61, 107, 0.12);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.12);
 }
 
 .flag {
@@ -113,7 +113,7 @@ onUnmounted(() => {
 .name {
   font-size: 11px;
   font-weight: 800;
-  color: #1A1A2E;
+  color: var(--text);
   line-height: 1.2;
   width: 100%;
   overflow: hidden;
@@ -124,6 +124,6 @@ onUnmounted(() => {
 .odds {
   font-size: 11px;
   font-weight: 800;
-  color: #F8971F;
+  color: var(--warning);
 }
 </style>
diff --git a/apps/player/src/components/outright/OutrightPanel.vue b/apps/player/src/components/outright/OutrightPanel.vue
index 4c779b8..de4ccd7 100644
--- a/apps/player/src/components/outright/OutrightPanel.vue
+++ b/apps/player/src/components/outright/OutrightPanel.vue
@@ -178,7 +178,7 @@ function closeModal() {
   padding: 0 4px;
   font-size: 12px;
   font-weight: 600;
-  color: #6B7280;
+  color: var(--text-muted);
   line-height: 1.4;
 }
 
@@ -189,7 +189,7 @@ function closeModal() {
 .state,
 .empty {
   text-align: center;
-  color: #6B7280;
+  color: var(--text-muted);
   padding: 48px 20px;
   font-weight: 600;
 }
diff --git a/apps/player/src/i18n/en-US.ts b/apps/player/src/i18n/en-US.ts
index 580607e..85c21f6 100644
--- a/apps/player/src/i18n/en-US.ts
+++ b/apps/player/src/i18n/en-US.ts
@@ -266,8 +266,21 @@ export default {
     tab_outright: 'Outright',
     tab_today: 'Today',
     tab_early: 'Early',
+    filter_time: 'Match Time',
     show_open_only: 'Open only',
+    filter: 'Filter',
+    filter_status: 'Status',
+    filter_leagues: 'Leagues',
+    filter_status_all: 'All',
+    filter_status_open: 'Open',
+    filter_status_settled: 'Settled',
+    filter_leagues_all: 'All Leagues',
+    filter_reset: 'Reset',
+    filter_apply: 'Apply',
     show_all_matches: 'Show all',
+    status_open: 'Upcoming',
+    status_live: 'Live',
+    match_unit: 'matches',
     today: 'Today',
     loading: 'Loading…',
     no_matches: 'No matches',
diff --git a/apps/player/src/i18n/ms-MY.ts b/apps/player/src/i18n/ms-MY.ts
index 3d5869b..2218ec5 100644
--- a/apps/player/src/i18n/ms-MY.ts
+++ b/apps/player/src/i18n/ms-MY.ts
@@ -272,8 +272,21 @@ export default {
     tab_outright: 'Juara',
     tab_today: 'Hari Ini',
     tab_early: 'Awal',
+    filter_time: 'Masa Perlawanan',
     show_open_only: 'Buka sahaja',
+    filter: 'Tapis',
+    filter_status: 'Status',
+    filter_leagues: 'Liga',
+    filter_status_all: 'Semua',
+    filter_status_open: 'Buka',
+    filter_status_settled: 'Selesai',
+    filter_leagues_all: 'Semua Liga',
+    filter_reset: 'Set Semula',
+    filter_apply: 'Sahkan',
     show_all_matches: 'Tunjuk semua',
+    status_open: 'Akan datang',
+    status_live: 'Langsung',
+    match_unit: 'perlawanan',
     today: 'Hari Ini',
     loading: 'Memuatkan…',
     no_matches: 'Tiada perlawanan',
diff --git a/apps/player/src/i18n/zh-CN.ts b/apps/player/src/i18n/zh-CN.ts
index f1646eb..3185b67 100644
--- a/apps/player/src/i18n/zh-CN.ts
+++ b/apps/player/src/i18n/zh-CN.ts
@@ -266,8 +266,21 @@ export default {
     tab_outright: '优胜冠军',
     tab_today: '今日',
     tab_early: '早盘',
+    filter_time: '比赛时间',
     show_open_only: '仅显示待开赛',
+    filter: '筛选',
+    filter_status: '状态',
+    filter_leagues: '联赛',
+    filter_status_all: '全部',
+    filter_status_open: '待开赛',
+    filter_status_settled: '已结束',
+    filter_leagues_all: '全部联赛',
+    filter_reset: '重置',
+    filter_apply: '确定',
     show_all_matches: '显示全部',
+    status_open: '待开赛',
+    status_live: '进行中',
+    match_unit: '场',
     today: '今日',
     loading: '加载中…',
     no_matches: '暂无赛事',
diff --git a/apps/player/src/layouts/MainLayout.vue b/apps/player/src/layouts/MainLayout.vue
index e2e80c7..2078ed5 100644
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -107,9 +107,9 @@ watch(
   <div class="layout">
     <header v-if="showHeader" class="header">
       <svg class="logo" viewBox="0 0 130 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="TheBet365">
-        <text x="0" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="11" font-weight="800" fill="#6B7280" letter-spacing="0.14em">THE</text>
-        <text x="32" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#003D6B" letter-spacing="0.01em">BET</text>
-        <text x="74" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#F8971F" letter-spacing="0.01em">365</text>
+        <text x="0" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="11" font-weight="800" fill="#94A3B8" letter-spacing="0.14em">THE</text>
+        <text x="32" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#FFB980" letter-spacing="0.01em">BET</text>
+        <text x="74" y="18" font-family="'Inter','SF Pro Display',system-ui,sans-serif" font-size="18" font-weight="900" fill="#FFDDD2" letter-spacing="0.01em">365</text>
       </svg>
       <div class="header-actions">
         <button
@@ -206,7 +206,9 @@ watch(
   align-items: center;
   padding: 0 12px;
   height: 48px;
-  background: #FFFFFF;
+  background: var(--bg-glass);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--border);
   z-index: 110;
 }
@@ -236,7 +238,7 @@ watch(
 .header-divider {
   width: 1px;
   height: 18px;
-  background: #E5E7EB;
+  background: var(--border);
   flex-shrink: 0;
   margin: 0 2px;
 }
@@ -251,8 +253,8 @@ watch(
   padding: 0;
   border-radius: 50%;
   border: 1px solid var(--border);
-  background: #F5F7FA;
-  color: var(--primary);
+  background: var(--bg-card-elevated);
+  color: var(--primary-light);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
@@ -277,22 +279,24 @@ watch(
 .login-btn {
   padding: 6px 18px;
   border-radius: var(--radius-sm);
-  border: 1px solid var(--primary);
-  background: var(--primary);
+  border: none;
+  background: var(--gradient-primary);
   color: #FFFFFF;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
-  transition: background 0.15s;
+  transition: opacity 0.15s, transform 0.15s;
+  box-shadow: var(--shadow-glow);
 }
 .login-btn:active {
-  background: var(--primary-dark);
+  opacity: 0.9;
+  transform: scale(0.98);
 }
 
 .announce-strip {
   flex-shrink: 0;
   z-index: 105;
-  background: #FFFFFF;
+  background: var(--bg-card);
   border-bottom: 1px solid var(--border);
 }
 
@@ -310,7 +314,9 @@ watch(
 
 .bottom-nav {
   display: flex;
-  background: #FFFFFF;
+  background: var(--bg-glass);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border-top: 1px solid var(--border);
   z-index: 100;
   padding-bottom: env(safe-area-inset-bottom, 0);
@@ -343,13 +349,14 @@ watch(
 }
 
 .nav-item.active {
-  color: var(--primary);
+  color: var(--primary-light);
   font-weight: 700;
+  text-shadow: 0 0 8px rgba(255, 185, 128, 0.4);
 }
 
 .nav-item.active :deep(.nav-icon) {
-  color: var(--primary);
-  filter: drop-shadow(0 1px 2px rgba(0, 61, 107, 0.2));
+  color: var(--primary-light);
+  filter: drop-shadow(0 0 6px rgba(255, 185, 128, 0.5));
 }
 
 .nav-item.active::after {
@@ -359,7 +366,7 @@ watch(
   left: 18%;
   right: 18%;
   height: 2.5px;
-  background: var(--primary);
+  background: var(--gradient-primary);
   border-radius: 0 0 3px 3px;
 }
 </style>
\ No newline at end of file
diff --git a/apps/player/src/styles.css b/apps/player/src/styles.css
index bef46b7..4842623 100644
--- a/apps/player/src/styles.css
+++ b/apps/player/src/styles.css
@@ -1,45 +1,68 @@
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
-  /* Pinnacle-inspired: Navy blue + clean white theme */
-  --primary: #003D6B;
-  --primary-dark: #002847;
-  --primary-light: #005B9F;
-  --secondary: #E8EDF2;
-  --tertiary: #F5F7FA;
-  --neutral: #6B7280;
-  --bg-body: #F5F7FA;
-  --bg-card: #FFFFFF;
-  --bg-hover: #F0F4F8;
-  --bg-elevated: #FFFFFF;
-  --text: #1A1A2E;
-  --text-muted: #6B7280;
-  --border: #E5E7EB;
-  --border-active: #0066CC;
+  /* ── 蓉色珊瑚 — Dusk Coral Theme ── */
+  --primary: #F4A261;
+  --primary-dark: #E76F51;
+  --primary-light: #FFB980;
+  --primary-glow: #FFDDD2;
+  --accent: #E76F51;
+  --accent-light: #FFDDD2;
+  --gradient-primary: linear-gradient(135deg, #E76F51, #F4A261);
+  --gradient-accent: linear-gradient(135deg, #F4A261, #FFDDD2);
+  --gradient-hot: linear-gradient(135deg, #E76F51, #F4A261, #FFDDD2);
+  --gradient-success: linear-gradient(135deg, #2C5364, #203A43);
+  --gradient-hero: linear-gradient(135deg, #0F2027, #203A43, #0F2027);
+
+  --secondary: #203A43;
+  --tertiary: #1A3038;
+  --neutral: #8FA3AD;
+
+  --bg-body: #0F2027;
+  --bg-card: #203A43;
+  --bg-card-elevated: #2C5364;
+  --bg-hover: #345E70;
+  --bg-elevated: #2C5364;
+  --bg-input: #162D36;
+  --bg-glass: rgba(15, 32, 39, 0.85);
+
+  --text: #FFFFFF;
+  --text-secondary: #D4E4EB;
+  --text-muted: #8FA3AD;
+  --text-dim: #5E7A86;
+
+  --border: rgba(255, 255, 255, 0.08);
+  --border-active: #F4A261;
   --border-w: 1px;
   --border-w-thick: 1px;
-  --danger: #DC2626;
-  --success: #059669;
-  --warning: #F8971F;
-  --radius: 8px;
-  --radius-sm: 6px;
-  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  --danger: #EF4444;
+  --success: #4ADE80;
+  --warning: #FBBF24;
+
+  --radius: 12px;
+  --radius-sm: 8px;
+  --radius-lg: 16px;
+
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
+  --shadow-glow: 0 0 20px rgba(244, 162, 97, 0.2);
+  --shadow-glow-accent: 0 0 20px rgba(231, 111, 81, 0.2);
 }
 
-/* Gold kept only for odds/betting accent as orange-amber */
+/* Odds / betting accent — coral orange */
 :root {
-  --odds-accent: #F8971F;
-  --odds-accent-light: #FBBF24;
-  --odds-accent-soft: rgba(248, 151, 31, 0.1);
+  --odds-accent: #F4A261;
+  --odds-accent-light: #FFB980;
+  --odds-accent-soft: rgba(244, 162, 97, 0.1);
 }
 
 /* ── Global resets ── */
 html, body, #app { height: 100%; }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   background-color: var(--bg-body);
   color: var(--text);
   overflow: hidden;
@@ -50,10 +73,16 @@ body {
 a { color: inherit; text-decoration: none; }
 button { cursor: pointer; border: none; font-family: inherit; }
 
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(244, 162, 97, 0.3); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(244, 162, 97, 0.5); }
+
 /* ── Input ── */
 input {
   font-family: inherit;
-  background: #FFFFFF;
+  background: var(--bg-input);
   border: 1px solid var(--border);
   color: var(--text);
   padding: 12px 14px;
@@ -63,10 +92,11 @@ input {
   font-weight: 500;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
+input::placeholder { color: var(--text-dim); }
 input:focus {
   outline: none;
-  border-color: var(--border-active);
-  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.15);
 }
 
 input:-webkit-autofill,
@@ -75,12 +105,12 @@ input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   -webkit-text-fill-color: var(--text);
   caret-color: var(--text);
-  box-shadow: 0 0 0 1000px #F0F4F8 inset;
+  box-shadow: 0 0 0 1000px var(--bg-input) inset;
   border: 1px solid var(--border);
   transition: background-color 99999s ease-out 0s;
 }
 
-/* ── Primary button (blue CTA) ── */
+/* ── Primary button (coral gradient CTA) ── */
 .btn-primary {
   display: inline-flex;
   align-items: center;
@@ -89,83 +119,83 @@ input:-webkit-autofill:active {
   padding: 12px 24px;
   border: none;
   border-radius: var(--radius-sm);
-  background: var(--primary);
+  background: var(--gradient-primary);
   color: #FFFFFF;
   font-weight: 700;
   font-size: 15px;
   letter-spacing: 0.02em;
   width: 100%;
-  transition: background 0.15s, transform 0.1s;
-  box-shadow: 0 2px 8px rgba(0, 61, 107, 0.2);
+  transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s;
+  box-shadow: 0 4px 15px rgba(231, 111, 81, 0.35);
 }
-.btn-primary:hover { background: var(--primary-light); }
+.btn-primary:hover { opacity: 0.9; box-shadow: 0 4px 20px rgba(244, 162, 97, 0.4); }
 .btn-primary:active:not(:disabled) {
-  background: var(--primary-dark);
   transform: scale(0.985);
 }
 .btn-primary:disabled {
-  opacity: 0.45;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
-/* ── Gold-outline (now blue outline) ── */
+/* ── Outline button ── */
 .btn-gold-outline {
-  background: #FFFFFF;
-  border: 1px solid var(--border-active);
-  color: var(--primary);
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary-light);
   font-weight: 700;
 }
 .btn-gold-outline:active:not(:disabled) {
-  background: rgba(0, 102, 204, 0.06);
-  border-color: var(--primary);
+  background: rgba(244, 162, 97, 0.08);
+  border-color: var(--primary-light);
 }
 
-/* ── Active tab: light blue ── */
+/* ── Active tab ── */
 .tab-gold-active {
-  background: rgba(0, 102, 204, 0.06) !important;
-  border-color: var(--border-active) !important;
-  color: var(--primary) !important;
+  background: rgba(244, 162, 97, 0.1) !important;
+  border-color: var(--primary) !important;
+  color: var(--primary-light) !important;
 }
 
-/* ── Gold frame (now light blue frame) ── */
+/* ── Card frame ── */
 .ps-gold-frame {
   position: relative;
   border: 1px solid var(--border) !important;
   border-radius: var(--radius);
-  background: #FFFFFF !important;
+  background: var(--bg-card) !important;
   box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
 }
 .ps-gold-frame::before,
 .ps-gold-frame::after { display: none; }
 
 .ps-gold-input {
-  background: #F9FAFB !important;
+  background: var(--bg-input) !important;
   border: 1px solid var(--border) !important;
   box-shadow: none;
   color: var(--text);
 }
-.ps-gold-input::placeholder { color: rgba(0, 0, 0, 0.3); }
+.ps-gold-input::placeholder { color: var(--text-dim); }
 .ps-gold-input:focus {
-  border-color: var(--border-active) !important;
-  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
+  border-color: var(--primary) !important;
+  box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.15) !important;
 }
 
 /* ── Odds button ── */
 .odds-btn {
-  background: #FFFFFF;
+  background: var(--bg-card-elevated);
   border: 1px solid var(--border);
   color: var(--text);
   padding: 12px 14px;
   border-radius: var(--radius-sm);
   text-align: center;
   min-width: 78px;
-  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
+  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s, background 0.2s;
 }
 .odds-btn:active { transform: scale(0.96); }
 .odds-btn.selected {
-  border: 1px solid var(--border-active);
-  background: rgba(0, 102, 204, 0.06);
-  box-shadow: none;
+  border: 1px solid var(--primary);
+  background: rgba(244, 162, 97, 0.1);
+  box-shadow: 0 0 12px rgba(244, 162, 97, 0.12);
 }
 .odds-btn.selected::before,
 .odds-btn.selected::after { display: none; }
@@ -217,4 +247,4 @@ input:-webkit-autofill:active {
   color: var(--text-muted);
   font-weight: 600;
   font-size: 14px;
-}
\ No newline at end of file
+}
diff --git a/apps/player/src/views/BetDetailView.vue b/apps/player/src/views/BetDetailView.vue
index 53e0b16..40b3b3a 100644
--- 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>
diff --git a/apps/player/src/views/CashbackRecordsView.vue b/apps/player/src/views/CashbackRecordsView.vue
index 17d67fa..d23b5c7 100644
--- 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;
diff --git a/apps/player/src/views/FootballView.vue b/apps/player/src/views/FootballView.vue
index 170bce9..880f46b 100644
--- 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;
 }
diff --git a/apps/player/src/views/ForgotPasswordView.vue b/apps/player/src/views/ForgotPasswordView.vue
index e07d995..a390e3b 100644
--- 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;
diff --git a/apps/player/src/views/HomeView.vue b/apps/player/src/views/HomeView.vue
index b3c4ec5..6f4df24 100644
--- 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;
 }
diff --git a/apps/player/src/views/LoginView.vue b/apps/player/src/views/LoginView.vue
index c87cda1..9792f3a 100644
--- 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;
diff --git a/apps/player/src/views/MatchDetailView.vue b/apps/player/src/views/MatchDetailView.vue
index fc5dd3c..92c959b 100644
--- 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 {
diff --git a/apps/player/src/views/MyBetsView.vue b/apps/player/src/views/MyBetsView.vue
index f0930cc..bd1e5f4 100644
--- 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;
diff --git a/apps/player/src/views/ProfileEditView.vue b/apps/player/src/views/ProfileEditView.vue
index 895f55a..8829b4d 100644
--- 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>
diff --git a/apps/player/src/views/ProfileView.vue b/apps/player/src/views/ProfileView.vue
index 838d026..1076d67 100644
--- 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 {
diff --git a/apps/player/src/views/RechargeHistoryView.vue b/apps/player/src/views/RechargeHistoryView.vue
index 085a779..d3430fd 100644
--- 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 {
diff --git a/apps/player/src/views/RechargeView.vue b/apps/player/src/views/RechargeView.vue
index e2d651c..0d16ac8 100644
--- 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;
 }
diff --git a/apps/player/src/views/RegisterView.vue b/apps/player/src/views/RegisterView.vue
index ec9c576..c7f36b2 100644
--- 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;
diff --git a/apps/player/src/views/WalletDetailView.vue b/apps/player/src/views/WalletDetailView.vue
index d43bd34..2d9e5b8 100644
--- 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>
diff --git a/apps/player/src/views/WalletTransactionDetailView.vue b/apps/player/src/views/WalletTransactionDetailView.vue
index 749c853..02a1175 100644
--- 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;
 }
diff --git a/apps/player/src/views/WalletView.vue b/apps/player/src/views/WalletView.vue
index b6bcc08..0bceddc 100644
--- 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>