feat(player): ui-ux-pro-max design system upgrade for desktop

apps/player/src/styles/desktop/layout.css

@@ -1,4 +1,8 @@
-/* Desktop Global layout structure */
+/* ═══════════════════════════════════════════════════════════
+   Desktop Global layout structure
+   Style: Modern Dark + Gold Accent — layered depth + glassmorphism
+   ═══════════════════════════════════════════════════════════ */
+
 .desktop-shell {
   position: fixed;
   inset: 0;
@@ -12,23 +16,38 @@
   overflow: hidden;
 }
 
+/* Subtle ambient overlay for depth */
+.desktop-shell::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 175, 55, 0.03) 0%, transparent 60%);
+  pointer-events: none;
+  z-index: 0;
+}
+
 .desktop-header-wrap {
   flex-shrink: 0;
   height: var(--desktop-header-h);
-  background: #111111;
+  background: rgba(14, 14, 14, 0.88);
+  backdrop-filter: var(--blur-md);
+  -webkit-backdrop-filter: var(--blur-md);
   border-bottom: 1px solid var(--border);
-  z-index: 120;
+  z-index: var(--z-header);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
+  transition: background var(--duration-normal) var(--ease-smooth);
 }
 
 .desktop-marquee-wrap {
   flex-shrink: 0;
-  z-index: 110;
+  z-index: var(--z-sticky);
   border-bottom: 1px solid var(--border);
-  background: #111;
+  background: rgba(14, 14, 14, 0.85);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
 }
 
 .desktop-shell.betslip-hidden {
@@ -44,6 +63,8 @@
   display: flex;
   min-height: 0;
   overflow: hidden;
+  position: relative;
+  z-index: var(--z-base);
 }
 
 .desktop-main-container {
@@ -55,7 +76,7 @@
   position: relative;
 }
 
-/* Betting Layout: Sports bar + Left Sidebar + Center View + Right Betslip */
+/* ── Betting Layout: Sports bar + Left Sidebar + Center View + Right Betslip ── */
 .desktop-layout-betting-wrap {
   display: flex;
   flex-direction: column;
@@ -70,6 +91,8 @@
   padding: 0 16px;
   border-bottom: 1px solid var(--border);
   background: rgba(14, 14, 14, 0.85);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
 }
 
 .desktop-layout-betting {
@@ -83,12 +106,14 @@
 .desktop-betting-left {
   border-right: 1px solid var(--border);
   background: rgba(14, 14, 14, 0.6);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
   overflow-y: auto;
 }
 
 .desktop-betting-center {
   overflow-y: auto;
-  padding: 14px 16px;
+  padding: var(--space-4);
   min-width: 0;
 }
 
@@ -96,7 +121,7 @@
   padding: 0;
 }
 
-/* Account Layout: full-width records center */
+/* ── Account Layout: full-width records center ── */
 .desktop-layout-account {
   display: flex;
   flex-direction: column;
@@ -112,7 +137,7 @@
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  padding: 28px 40px 40px;
+  padding: var(--space-7) var(--space-10) var(--space-10);
 }
 
 .desktop-account-center > .desktop-records-page {
@@ -141,7 +166,7 @@
   overflow: hidden;
 }
 
-/* Marketing / Home Layout: Single Column centered */
+/* ── Marketing / Home Layout: Single Column centered ── */
 .desktop-layout-marketing {
   display: flex;
   flex-direction: column;
@@ -149,7 +174,7 @@
   height: 100%;
   overflow-y: auto;
   align-items: center;
-  padding: 20px;
+  padding: var(--space-5);
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
 }
@@ -163,7 +188,7 @@
   max-width: 1400px;
 }
 
-/* Hub Layout: Left Sidebar (List) + Right Outlet (Detail) */
+/* ── Hub Layout: Left Sidebar (List) + Right Outlet (Detail) ── */
 .desktop-layout-hub {
   display: grid;
   grid-template-columns: 320px 1fr;
@@ -174,6 +199,8 @@
 .desktop-hub-left {
   border-right: 1px solid var(--border);
   background: var(--desktop-sidebar-panel-bg);
+  backdrop-filter: var(--blur-sm);
+  -webkit-backdrop-filter: var(--blur-sm);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -181,11 +208,11 @@
 
 .desktop-hub-right {
   overflow-y: auto;
-  padding: 20px;
+  padding: var(--space-5);
   background: rgba(10, 10, 10, 0.3);
 }
 
-/* Auth Layout: Centered container */
+/* ── Auth Layout: Centered container ── */
 .desktop-layout-auth {
   display: flex;
   align-items: center;
@@ -193,7 +220,7 @@
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  padding: 40px;
+  padding: var(--space-10);
 }
 
 .desktop-auth-card {
@@ -202,6 +229,6 @@
   padding: 30px;
   background: rgba(20, 20, 20, 0.95);
   border: 1px solid var(--border-gold-soft);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg), var(--glow-gold);
 }