diff --git a/apps/player/src/styles/desktop/interaction.css b/apps/player/src/styles/desktop/interaction.css
index b453f1b..6758544 100644
--- a/apps/player/src/styles/desktop/interaction.css
+++ b/apps/player/src/styles/desktop/interaction.css
@@ -17,11 +17,11 @@
   background: rgba(0, 0, 0, 0.1);
 }
 .desktop-shell ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba(0, 61, 107, 0.2);
   border-radius: 3px;
 }
 .desktop-shell ::-webkit-scrollbar-thumb:hover {
-  background: var(--primary-light);
+  background: rgba(0, 61, 107, 0.4);
 }
 
 /* Hover highlights */
@@ -47,7 +47,7 @@
 
 .desktop-shell input:focus {
   border-color: var(--border-gold) !important;
-  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12) !important;
 }
 
 /* Button hover overrides */
@@ -55,8 +55,8 @@
   transition: background-color 0.2s, border-color 0.2s;
 }
 .desktop-shell .btn-gold-outline:hover:not(:disabled) {
-  background: rgba(212, 175, 55, 0.08);
-  border-color: var(--border-gold);
+  background: rgba(0, 102, 204, 0.06);
+  border-color: var(--border-active);
 }
 .desktop-shell .btn-gold-outline:active {
   transform: none; /* No mobile shrink on PC */
@@ -79,7 +79,7 @@
 }
 
 .desktop-skeleton {
-  background: linear-gradient(90deg, #161616 25%, #222222 37%, #161616 63%);
+  background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 37%, #E5E7EB 63%);
   background-size: 400% 100%;
   animation: desktop-skeleton-glow 1.4s ease infinite;
 }
@@ -87,10 +87,10 @@
 @keyframes bet-locate-pulse {
   0%,
   100% {
-    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
+    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
   }
   50% {
-    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.45);
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.45);
   }
 }
 
diff --git a/apps/player/src/styles/desktop/layout.css b/apps/player/src/styles/desktop/layout.css
index 89a0b9b..f9d0012 100644
--- a/apps/player/src/styles/desktop/layout.css
+++ b/apps/player/src/styles/desktop/layout.css
@@ -4,8 +4,8 @@
   inset: 0;
   display: flex;
   flex-direction: column;
-  background-color: #000;
-  background-image: url('../../assets/images/pcbg.webp');
+  background-color: var(--desktop-bg);
+  background-image: url('../../assets/images/pcbg-light.webp');
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
@@ -15,7 +15,7 @@
 .desktop-header-wrap {
   flex-shrink: 0;
   height: var(--desktop-header-h);
-  background: #111111;
+  background: var(--bg-card);
   border-bottom: 1px solid var(--border);
   z-index: 120;
   display: flex;
@@ -28,7 +28,7 @@
   flex-shrink: 0;
   z-index: 110;
   border-bottom: 1px solid var(--border);
-  background: #111;
+  background: var(--bg-card);
 }
 
 .desktop-main-container {
@@ -53,7 +53,7 @@
   width: 100%;
   padding: 0 16px;
   border-bottom: 1px solid var(--border);
-  background: rgba(14, 14, 14, 0.85);
+  background: var(--bg-card);
 }
 
 .desktop-layout-betting {
@@ -66,7 +66,7 @@
 
 .desktop-betting-left {
   border-right: 1px solid var(--border);
-  background: rgba(14, 14, 14, 0.6);
+  background: var(--desktop-sidebar-bg);
   overflow-y: auto;
 }
 
@@ -82,7 +82,7 @@
 
 .desktop-betting-right {
   border-left: 1px solid var(--border);
-  background: rgba(14, 14, 14, 0.85);
+  background: var(--bg-card);
   overflow-y: auto;
 }
 
@@ -150,7 +150,7 @@
 
 .desktop-hub-left {
   border-right: 1px solid var(--border);
-  background: rgba(14, 14, 14, 0.6);
+  background: var(--desktop-sidebar-bg);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -159,7 +159,7 @@
 .desktop-hub-right {
   overflow-y: auto;
   padding: 20px;
-  background: rgba(10, 10, 10, 0.3);
+  background: var(--desktop-bg);
 }
 
 /* Auth Layout: Centered container */
@@ -177,8 +177,8 @@
   width: 100%;
   max-width: 440px;
   padding: 30px;
-  background: rgba(20, 20, 20, 0.95);
-  border: 1px solid var(--border-gold-soft);
+  background: var(--bg-card);
+  border: 1px solid var(--border-active);
   border-radius: 8px;
   box-shadow: var(--shadow);
 }
diff --git a/apps/player/src/styles/desktop/records.css b/apps/player/src/styles/desktop/records.css
index c2b98d7..a4b55b5 100644
--- a/apps/player/src/styles/desktop/records.css
+++ b/apps/player/src/styles/desktop/records.css
@@ -44,8 +44,8 @@
   justify-content: center;
   padding: 8px 18px;
   border-radius: 6px;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.08);
+  border: 1px solid var(--border-active);
+  background: rgba(0, 102, 204, 0.08);
   color: var(--primary-light);
   font-size: 13px;
   font-weight: 700;
@@ -55,8 +55,8 @@
 }
 
 .desktop-records-action-btn:hover {
-  background: rgba(212, 175, 55, 0.14);
-  border-color: var(--border-gold);
+  background: rgba(0, 102, 204, 0.14);
+  border-color: var(--border-active);
 }
 
 .desktop-records-filter-bar {
@@ -92,7 +92,7 @@
 .desktop-records-filter-divider {
   width: 1px;
   height: 22px;
-  background: rgba(255, 255, 255, 0.12);
+  background: var(--border);
   flex-shrink: 0;
 }
 
@@ -102,7 +102,7 @@
   font-size: 12px;
   font-weight: 700;
   color: var(--text-muted);
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--bg-hover);
   border: 1px solid transparent;
   cursor: pointer;
   transition: color 0.2s, border-color 0.2s, background 0.2s;
@@ -110,14 +110,14 @@
 }
 
 .desktop-records-filter-chip:hover {
-  color: #fff;
-  border-color: rgba(212, 175, 55, 0.25);
+  color: var(--text);
+  border-color: rgba(0, 102, 204, 0.25);
 }
 
 .desktop-records-filter-chip.active {
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.1);
-  border-color: rgba(212, 175, 55, 0.35);
+  background: rgba(0, 102, 204, 0.1);
+  border-color: rgba(0, 102, 204, 0.35);
 }
 
 .desktop-wallet-subnav {
@@ -140,14 +140,14 @@
 }
 
 .desktop-wallet-subnav-link:hover {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+  background: var(--bg-hover);
 }
 
 .desktop-wallet-subnav-link.active {
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.1);
-  border-color: rgba(212, 175, 55, 0.28);
+  background: rgba(0, 102, 204, 0.1);
+  border-color: rgba(0, 102, 204, 0.28);
 }
 
 .desktop-records-panel {
@@ -155,7 +155,7 @@
   flex-direction: column;
   flex: 1;
   min-height: 0;
-  background: rgba(18, 18, 18, 0.94);
+  background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 10px;
   overflow: hidden;
@@ -182,7 +182,7 @@
   font-size: 11px;
   font-weight: 800;
   color: var(--primary-light);
-  background: #121212;
+  background: var(--desktop-bg);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   border-bottom: 1px solid var(--border);
@@ -195,13 +195,13 @@
 
 .desktop-records-table td {
   padding: 12px 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  border-bottom: 1px solid var(--border);
   color: var(--text);
   vertical-align: middle;
 }
 
 .desktop-records-table tbody tr:nth-child(even) {
-  background: rgba(255, 255, 255, 0.015);
+  background: var(--bg-hover);
 }
 
 .desktop-records-table tbody tr.hover-row {
@@ -209,7 +209,7 @@
 }
 
 .desktop-records-table tbody tr.hover-row:hover {
-  background: rgba(212, 175, 55, 0.06);
+  background: rgba(0, 102, 204, 0.06);
 }
 
 .desktop-records-table .num-cell {
@@ -237,8 +237,8 @@
 .desktop-records-pagination {
   flex-shrink: 0;
   padding: 12px 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(10, 10, 10, 0.35);
+  border-top: 1px solid var(--border);
+  background: var(--desktop-bg);
 }
 
 .desktop-records-loading,
@@ -299,7 +299,7 @@
 
 .desktop-records-status.status-won { background: rgba(52, 199, 89, 0.12); color: #4cd964; }
 .desktop-records-status.status-lost { background: rgba(255, 69, 58, 0.12); color: #ff453a; }
-.desktop-records-status.status-pending { background: rgba(212, 175, 55, 0.12); color: var(--primary-light); }
+.desktop-records-status.status-pending { background: rgba(0, 102, 204, 0.12); color: var(--primary-light); }
 .desktop-records-status.status-push { background: rgba(100, 100, 100, 0.12); color: #aaa; }
 .desktop-records-status.status-cancelled { background: rgba(100, 100, 100, 0.1); color: #777; }
 .desktop-records-status.status-default { background: rgba(100, 100, 100, 0.1); color: #888; }
diff --git a/apps/player/src/styles/desktop/tokens.css b/apps/player/src/styles/desktop/tokens.css
index 3e34b5f..741709c 100644
--- a/apps/player/src/styles/desktop/tokens.css
+++ b/apps/player/src/styles/desktop/tokens.css
@@ -1,28 +1,38 @@
 .desktop-shell {
-  /* Color Palette overrides */
-  --primary: #D4AF37;
-  --primary-dark: #A8841F;
-  --primary-light: #F0D875;
-  --secondary: #141414;
-  --tertiary: #0A0A0A;
-  --neutral: #8E8E93;
-  --bg-body: #050505;
-  --bg-card: rgba(20, 20, 20, 0.95);
-  --bg-hover: rgba(38, 38, 38, 0.95);
-  --bg-elevated: rgba(45, 45, 45, 0.95);
-  --text: #FFFFFF;
-  --text-muted: #8E8E93;
-  --border: #262626;
-  --border-gold: #D4AF37;
-  --border-gold-soft: rgba(212, 175, 55, 0.25);
+  /* Color Palette overrides (theme-2 Pinnacle style) */
+  --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;
+  
+  /* Map gold tokens to theme blue/orange */
+  --border-gold: #0066CC;
+  --border-gold-soft: rgba(0, 102, 204, 0.2);
+  --shadow-gold: 0 2px 12px rgba(0, 61, 107, 0.1);
+  --glow-gold: 0 0 6px rgba(0, 102, 204, 0.12);
+  --odds-accent: #F8971F;
+
+  /* Desktop specific added vars */
+  --desktop-bg: #F5F7FA;
+  --desktop-border: #E5E7EB;
+  --desktop-sidebar-bg: #FFFFFF;
+
   --border-w: 1px;
   --border-w-thick: 1px;
-  --danger: #FF453A;
-  --radius: 4px;
-  --radius-sm: 2px;
-  --shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
-  --shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.15);
-  --glow-gold: 0 0 6px rgba(212, 175, 55, 0.15);
+  --danger: #DC2626;
+  --radius: 8px;
+  --radius-sm: 6px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
 
   /* PC Dimensioning */
   --desktop-header-h: 56px;