diff --git a/apps/player/src/assets/images/generated/auth-panel-bg-v1.webp b/apps/player/src/assets/images/generated/auth-panel-bg-v1.webp
new file mode 100644
index 0000000..f04525c
Binary files /dev/null and b/apps/player/src/assets/images/generated/auth-panel-bg-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/empty-bets-ticket-v1.webp b/apps/player/src/assets/images/generated/empty-bets-ticket-v1.webp
new file mode 100644
index 0000000..ac91a5e
Binary files /dev/null and b/apps/player/src/assets/images/generated/empty-bets-ticket-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/empty-inbox-envelope-v1.webp b/apps/player/src/assets/images/generated/empty-inbox-envelope-v1.webp
new file mode 100644
index 0000000..46685e5
Binary files /dev/null and b/apps/player/src/assets/images/generated/empty-inbox-envelope-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/empty-wallet-ledger-v1.webp b/apps/player/src/assets/images/generated/empty-wallet-ledger-v1.webp
new file mode 100644
index 0000000..0c26ba8
Binary files /dev/null and b/apps/player/src/assets/images/generated/empty-wallet-ledger-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/h5-recharge-detail-panel-v1.webp b/apps/player/src/assets/images/generated/h5-recharge-detail-panel-v1.webp
new file mode 100644
index 0000000..96a4314
Binary files /dev/null and b/apps/player/src/assets/images/generated/h5-recharge-detail-panel-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/match-card-bg-gold-arena-v1.webp b/apps/player/src/assets/images/generated/match-card-bg-gold-arena-v1.webp
deleted file mode 100644
index 1338bf6..0000000
Binary files a/apps/player/src/assets/images/generated/match-card-bg-gold-arena-v1.webp and /dev/null differ
diff --git a/apps/player/src/assets/images/generated/modal-close-gold-pressed-v1.webp b/apps/player/src/assets/images/generated/modal-close-gold-pressed-v1.webp
new file mode 100644
index 0000000..e4b0e50
Binary files /dev/null and b/apps/player/src/assets/images/generated/modal-close-gold-pressed-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/modal-close-gold-v1.webp b/apps/player/src/assets/images/generated/modal-close-gold-v1.webp
new file mode 100644
index 0000000..aa0fe38
Binary files /dev/null and b/apps/player/src/assets/images/generated/modal-close-gold-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/modal-gold-frame-v1.webp b/apps/player/src/assets/images/generated/modal-gold-frame-v1.webp
deleted file mode 100644
index 8f1bd51..0000000
Binary files a/apps/player/src/assets/images/generated/modal-gold-frame-v1.webp and /dev/null differ
diff --git a/apps/player/src/assets/images/generated/modal-gold-frame-v2.webp b/apps/player/src/assets/images/generated/modal-gold-frame-v2.webp
deleted file mode 100644
index ab0a52e..0000000
Binary files a/apps/player/src/assets/images/generated/modal-gold-frame-v2.webp and /dev/null differ
diff --git a/apps/player/src/assets/images/generated/modal-gold-frame-v3.webp b/apps/player/src/assets/images/generated/modal-gold-frame-v3.webp
deleted file mode 100644
index 021e3e3..0000000
Binary files a/apps/player/src/assets/images/generated/modal-gold-frame-v3.webp and /dev/null differ
diff --git a/apps/player/src/assets/images/generated/odds-button-disabled-v1.webp b/apps/player/src/assets/images/generated/odds-button-disabled-v1.webp
new file mode 100644
index 0000000..e3ef829
Binary files /dev/null and b/apps/player/src/assets/images/generated/odds-button-disabled-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/odds-button-normal-v1.webp b/apps/player/src/assets/images/generated/odds-button-normal-v1.webp
new file mode 100644
index 0000000..d467f47
Binary files /dev/null and b/apps/player/src/assets/images/generated/odds-button-normal-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/odds-button-selected-v1.webp b/apps/player/src/assets/images/generated/odds-button-selected-v1.webp
new file mode 100644
index 0000000..b180e3b
Binary files /dev/null and b/apps/player/src/assets/images/generated/odds-button-selected-v1.webp differ
diff --git a/apps/player/src/assets/images/generated/outright-bet-modal-frame-v1.webp b/apps/player/src/assets/images/generated/outright-bet-modal-frame-v1.webp
deleted file mode 100644
index 9b7f987..0000000
Binary files a/apps/player/src/assets/images/generated/outright-bet-modal-frame-v1.webp and /dev/null differ
diff --git a/apps/player/src/assets/images/generated/pc-match-detail-bg-v1.webp b/apps/player/src/assets/images/generated/pc-match-detail-bg-v1.webp
deleted file mode 100644
index 116f3fa..0000000
Binary files a/apps/player/src/assets/images/generated/pc-match-detail-bg-v1.webp and /dev/null differ
diff --git a/apps/player/src/assets/images/generated/pc-outright-list-card-bg-v1.webp b/apps/player/src/assets/images/generated/pc-outright-list-card-bg-v1.webp
deleted file mode 100644
index a3ad37b..0000000
Binary files a/apps/player/src/assets/images/generated/pc-outright-list-card-bg-v1.webp and /dev/null differ
diff --git a/apps/player/src/components/BetGuideHelp.vue b/apps/player/src/components/BetGuideHelp.vue
index cde07d2..f8a1b94 100644
--- a/apps/player/src/components/BetGuideHelp.vue
+++ b/apps/player/src/components/BetGuideHelp.vue
@@ -102,14 +102,19 @@ function close() {
 
 .close-x {
   position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-muted);
-  font-size: 14px;
+  top: 8px;
+  right: 8px;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: 0;
+  background: url('../assets/images/generated/modal-close-gold-v1.webp') center / contain no-repeat;
+  color: transparent;
+  font-size: 0;
+}
+
+.close-x:active {
+  background-image: url('../assets/images/generated/modal-close-gold-pressed-v1.webp');
 }
 
 .title {
diff --git a/apps/player/src/components/BetSlipDrawer.vue b/apps/player/src/components/BetSlipDrawer.vue
index 11d295d..0710aa4 100644
--- a/apps/player/src/components/BetSlipDrawer.vue
+++ b/apps/player/src/components/BetSlipDrawer.vue
@@ -685,9 +685,11 @@ watch(
 .drawer {
   width: 100%;
   max-height: 88vh;
-  background: #101010;
+  background:
+    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 22%),
+    rgba(14, 14, 12, 0.98);
   border-radius: 16px 16px 0 0;
-  border-top: 1px solid var(--border-gold-soft);
+  border-top: 1px solid rgba(255, 226, 156, 0.22);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -703,7 +705,7 @@ watch(
   align-items: flex-start;
   gap: 12px;
   padding: 14px 14px 10px;
-  background: linear-gradient(180deg, #1d1d1d 0%, #111 100%);
+  background: rgba(12, 12, 11, 0.72);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
@@ -769,7 +771,7 @@ watch(
   grid-template-columns: repeat(2, 1fr);
   padding: 8px 12px 0;
   gap: 6px;
-  background: #101010;
+  background: transparent;
 }
 
 .slip-tab {
@@ -1087,7 +1089,7 @@ watch(
   grid-template-columns: 1fr;
   gap: 10px;
   padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
-  background: rgba(14, 14, 14, 0.98);
+  background: rgba(10, 10, 9, 0.84);
   border-top: 1px solid var(--border-gold-soft);
   box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
 }
diff --git a/apps/player/src/components/LoginPromptModal.vue b/apps/player/src/components/LoginPromptModal.vue
index 881993f..b59ef99 100644
--- a/apps/player/src/components/LoginPromptModal.vue
+++ b/apps/player/src/components/LoginPromptModal.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth';
@@ -28,8 +28,7 @@ function continueBrowsing() {
       <div v-if="auth.loginPromptVisible" class="login-overlay" @click.self="continueBrowsing">
         <div class="login-modal">
           <button type="button" class="close-btn" :aria-label="t('auth.continue_browsing')" @click="continueBrowsing">
-            �
-          </button>
+            &times;</button>
           <h2 class="login-title">{{ t('auth.login_required') }}</h2>
           <p class="login-hint">{{ t('auth.login_hint') }}</p>
 
@@ -65,12 +64,12 @@ function continueBrowsing() {
   width: 90%;
   max-width: 360px;
   background:
-    linear-gradient(rgba(16, 14, 10, 0.12), rgba(16, 14, 10, 0.16)),
-    url('../assets/images/generated/modal-gold-frame-v4.webp') center / 102% 102% no-repeat;
-  border: 0;
-  border-radius: 0;
+    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 36%),
+    rgba(14, 14, 12, 0.96);
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  border-radius: 10px;
   padding: 36px 30px 30px;
-  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(212, 175, 55, 0.1);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
 }
 
 .close-btn {
diff --git a/apps/player/src/components/MessageListPanel.vue b/apps/player/src/components/MessageListPanel.vue
index 5c65d25..fe9a849 100644
--- a/apps/player/src/components/MessageListPanel.vue
+++ b/apps/player/src/components/MessageListPanel.vue
@@ -8,6 +8,7 @@ import ConfirmDialog from './ConfirmDialog.vue';
 import { useAuthStore } from '../stores/auth';
 import { usePlayerMessages, type DepositMessagePayload, type PlayerMessage } from '../composables/usePlayerMessages';
 import { stripHtml } from '../utils/html';
+import emptyInboxImg from '../assets/images/generated/empty-inbox-envelope-v1.webp';
 
 const router = useRouter();
 const { t, locale } = useI18n();
@@ -116,6 +117,7 @@ onActivated(tryLoad);
       </div>
 
       <div v-else-if="!messages.length" class="empty">
+        <img :src="emptyInboxImg" alt="" class="empty-img" />
         <p>{{ t('messages.empty') }}</p>
       </div>
 
@@ -194,6 +196,17 @@ onActivated(tryLoad);
   color: var(--text-muted);
 }
 
+.empty-img {
+  width: min(320px, 86vw);
+  aspect-ratio: 16 / 9;
+  height: auto;
+  object-fit: cover;
+  border-radius: 8px;
+  opacity: 0.9;
+  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
+}
+
 .login-link {
   border: 1px solid var(--border-gold-soft);
   border-radius: 8px;
diff --git a/apps/player/src/components/PlayerAvatarModal.vue b/apps/player/src/components/PlayerAvatarModal.vue
index 5f8cdf3..cdf8ee0 100644
--- a/apps/player/src/components/PlayerAvatarModal.vue
+++ b/apps/player/src/components/PlayerAvatarModal.vue
@@ -41,7 +41,7 @@ function confirm() {
         <PlayerAvatarPicker v-model="draft" />
         <div class="actions">
           <button type="button" class="btn-cancel" @click="close">{{ t('bet.cancel') }}</button>
-          <button type="button" class="btn-confirm btn-gold-outline" @click="confirm">
+          <button type="button" class="btn-confirm" @click="confirm">
             {{ t('profile.avatar_confirm') }}
           </button>
         </div>
@@ -70,29 +70,33 @@ function confirm() {
   max-height: 85vh;
   overflow-y: auto;
   background:
-    linear-gradient(rgba(16, 14, 10, 0.12), rgba(16, 14, 10, 0.16)),
-    url('../assets/images/generated/modal-gold-frame-v4.webp') center / 102% 102% no-repeat;
-  border: 0;
-  border-radius: 0;
-  padding: 28px 24px 22px;
-  box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.12);
+    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 36%),
+    rgba(14, 14, 12, 0.96);
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  border-radius: 10px;
+  padding: 26px 24px 22px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58);
 }
 
 .close-x {
   position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  border: 1px solid var(--border);
-  background: rgba(0, 0, 0, 0.35);
-  color: var(--text-muted);
-  font-size: 12px;
+  top: 8px;
+  right: 8px;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: 0;
+  background: url('../assets/images/generated/modal-close-gold-v1.webp') center / contain no-repeat;
+  color: transparent;
+  font-size: 0;
   line-height: 1;
   padding: 0;
 }
 
+.close-x:active {
+  background-image: url('../assets/images/generated/modal-close-gold-pressed-v1.webp');
+}
+
 .title {
   margin: 0 28px 12px 0;
   font-size: 15px;
@@ -110,18 +114,31 @@ function confirm() {
 .btn-confirm {
   flex: 1;
   min-height: 40px;
-  border-radius: 6px;
+  border: 0;
+  border-radius: 0;
   font-size: 13px;
   font-weight: 800;
+  background-color: transparent;
+  background-position: center;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
 
 .btn-cancel {
-  border: 1px solid var(--border);
-  background: #0a0a0a;
-  color: var(--text-muted);
+  background-image: url('../assets/images/generated/pc-betslip-btn-secondary-v1.webp');
+  color: #f3e7c5;
+}
+
+.btn-cancel:active {
+  background-image: url('../assets/images/generated/pc-betslip-btn-secondary-pressed-v1.webp');
 }
 
 .btn-confirm {
-  border: none;
+  background-image: url('../assets/images/generated/pc-betslip-btn-primary-v1.webp');
+  color: #1d1300;
+}
+
+.btn-confirm:active {
+  background-image: url('../assets/images/generated/pc-betslip-btn-primary-pressed-v1.webp');
 }
 </style>
diff --git a/apps/player/src/components/desktop/DesktopAuthLayout.vue b/apps/player/src/components/desktop/DesktopAuthLayout.vue
index e2d0072..a0fc389 100644
--- a/apps/player/src/components/desktop/DesktopAuthLayout.vue
+++ b/apps/player/src/components/desktop/DesktopAuthLayout.vue
@@ -114,12 +114,14 @@ withDefaults(
 .auth-card {
   width: 100%;
   max-width: 720px;
-  background: rgba(14, 14, 14, 0.92);
+  background:
+    linear-gradient(rgba(8, 8, 7, 0.18), rgba(8, 8, 7, 0.24)),
+    url('../../assets/images/generated/auth-panel-bg-v1.webp') center / 100% 100% no-repeat;
   backdrop-filter: var(--blur-lg);
   -webkit-backdrop-filter: var(--blur-lg);
-  border: 1px solid rgba(212, 175, 55, 0.28);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg), var(--glow-gold-md);
+  border: 0;
+  border-radius: 0;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
   overflow: hidden;
 }
 
@@ -145,7 +147,7 @@ withDefaults(
   align-items: center;
   justify-content: center;
   padding: var(--space-6) var(--space-5);
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, 0.18);
   border-right: 1px solid rgba(212, 175, 55, 0.15);
 }
 
diff --git a/apps/player/src/components/desktop/DesktopBetDetailModal.vue b/apps/player/src/components/desktop/DesktopBetDetailModal.vue
index 47a7cbf..4eb66d8 100644
--- a/apps/player/src/components/desktop/DesktopBetDetailModal.vue
+++ b/apps/player/src/components/desktop/DesktopBetDetailModal.vue
@@ -199,11 +199,11 @@ function translateSel(name: string): string {
   flex-direction: column;
   padding: 20px 22px 22px;
   background:
-    linear-gradient(rgba(15, 14, 11, 0.18), rgba(15, 14, 11, 0.2)),
-    url('../../assets/images/generated/modal-gold-frame-v4.webp') center / 102% 102% no-repeat;
-  border: 0;
-  border-radius: 0;
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58), 0 0 28px rgba(212, 175, 55, 0.12);
+    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 36%),
+    rgba(14, 14, 12, 0.96);
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  border-radius: 10px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58);
   overflow: hidden;
 }
 
diff --git a/apps/player/src/components/desktop/DesktopOutrightEventCard.vue b/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
index d403c61..d05ea50 100644
--- a/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
+++ b/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
@@ -273,18 +273,17 @@ const topSelections = computed(() => {
   flex: 1;         /* equal share of available width */
   gap: 1px;
   padding: 2px 4px;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 0;
+  border-radius: 0;
+  background: url('../../assets/images/generated/odds-button-normal-v1.webp') center / 100% 100% no-repeat;
   cursor: pointer;
   min-height: 32px;
-  transition: all 0.2s ease;
+  transition: filter 0.2s ease;
 }
 
 .odds-btn:hover {
-  background: var(--border-gold-soft);
-  border-color: var(--border-gold);
-  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
+  filter: brightness(1.08);
 }
 
 .selection-name {
diff --git a/apps/player/src/components/desktop/DesktopTxDetailModal.vue b/apps/player/src/components/desktop/DesktopTxDetailModal.vue
index 791c677..5f806bd 100644
--- a/apps/player/src/components/desktop/DesktopTxDetailModal.vue
+++ b/apps/player/src/components/desktop/DesktopTxDetailModal.vue
@@ -166,11 +166,11 @@ function txLabel(tx: TxDetail): string {
   flex-direction: column;
   padding: 20px 22px 22px;
   background:
-    linear-gradient(rgba(15, 14, 11, 0.18), rgba(15, 14, 11, 0.2)),
-    url('../../assets/images/generated/modal-gold-frame-v4.webp') center / 102% 102% no-repeat;
-  border: 0;
-  border-radius: 0;
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58), 0 0 28px rgba(212, 175, 55, 0.12);
+    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 36%),
+    rgba(14, 14, 12, 0.96);
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  border-radius: 10px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58);
   overflow: hidden;
 }
 
diff --git a/apps/player/src/components/match-detail/CorrectScorePanel.vue b/apps/player/src/components/match-detail/CorrectScorePanel.vue
index aff7c4b..6651462 100644
--- a/apps/player/src/components/match-detail/CorrectScorePanel.vue
+++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue
@@ -129,16 +129,14 @@ function formatOdds(odds: string) {
   gap: 3px;
   min-height: 42px;
   padding: 6px 3px;
-  background: #161616;
-  border: 1px solid #282828;
-  border-radius: 3px;
+  background: url('../../assets/images/generated/odds-button-normal-v1.webp') center / 100% 100% no-repeat;
+  border: 0;
+  border-radius: 0;
   text-align: center;
 }
 
 .score-card.selected {
-  border-color: var(--primary);
-  background: #2d281a;
-  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.2);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
 }
 
 .score-card.selected .score-line {
@@ -150,8 +148,7 @@ function formatOdds(odds: string) {
 }
 
 .score-card--locked {
-  background: #111;
-  border-color: #333;
+  background-image: url('../../assets/images/generated/odds-button-disabled-v1.webp');
 }
 
 .score-card--locked .score-line,
diff --git a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
index 4a350cb..2f6edbf 100644
--- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
+++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
@@ -188,21 +188,18 @@ const panelStyle = computed(() =>
   gap: 2px;
   min-height: 44px;
   padding: 6px 4px;
-  border-radius: 4px;
-  background: #141414;
-  border: 1px solid #262626;
+  border: 0;
+  border-radius: 0;
+  background: url('../../assets/images/generated/odds-button-normal-v1.webp') center / 100% 100% no-repeat;
   text-align: center;
 }
 
 .odds-btn:hover:not(.odds-btn--locked) {
-  border-color: var(--primary);
-  background: rgba(255, 255, 255, 0.05);
+  filter: brightness(1.12);
 }
 
 .odds-btn.selected {
-  border-color: var(--primary);
-  background: #2f2a19;
-  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.2);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
 }
 
 .odds-btn.selected .label {
@@ -214,8 +211,7 @@ const panelStyle = computed(() =>
 }
 
 .odds-btn--locked {
-  background: #111;
-  border-color: #333;
+  background-image: url('../../assets/images/generated/odds-button-disabled-v1.webp');
   cursor: not-allowed;
 }
 
diff --git a/apps/player/src/components/outright/OutrightBetModal.vue b/apps/player/src/components/outright/OutrightBetModal.vue
index 661e5a7..524cf07 100644
--- a/apps/player/src/components/outright/OutrightBetModal.vue
+++ b/apps/player/src/components/outright/OutrightBetModal.vue
@@ -447,17 +447,22 @@ function formatOdds(odds: string) {
 
 .close-x {
   position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-muted);
-  font-size: 14px;
+  top: 8px;
+  right: 8px;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  border-radius: 0;
+  background: url('../../assets/images/generated/modal-close-gold-v1.webp') center / contain no-repeat;
+  color: transparent;
+  font-size: 0;
   line-height: 1;
 }
 
+.close-x:active {
+  background-image: url('../../assets/images/generated/modal-close-gold-pressed-v1.webp');
+}
+
 .hint {
   font-size: 12px;
   font-weight: 600;
diff --git a/apps/player/src/components/outright/OutrightOptionCard.vue b/apps/player/src/components/outright/OutrightOptionCard.vue
index f826674..31f4c0f 100644
--- a/apps/player/src/components/outright/OutrightOptionCard.vue
+++ b/apps/player/src/components/outright/OutrightOptionCard.vue
@@ -87,9 +87,9 @@ onUnmounted(() => {
   width: 100%;
   min-width: 0;
   padding: 8px 4px 6px;
-  border-radius: 6px;
-  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
-  border: 1px solid rgba(140, 140, 140, 0.35);
+  border: 0;
+  border-radius: 0;
+  background: url('../../assets/images/generated/odds-button-normal-v1.webp') center / 100% 100% no-repeat;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -99,15 +99,11 @@ onUnmounted(() => {
 }
 
 .option-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
-  pointer-events: none;
+  display: none;
 }
 
 .option-card:active {
-  border-color: var(--border-gold-soft);
+  filter: brightness(1.12);
 }
 
 .option-card--disabled {
@@ -116,12 +112,15 @@ onUnmounted(() => {
 }
 
 .option-card--disabled:active {
-  border-color: rgba(140, 140, 140, 0.35);
+  filter: none;
 }
 
 .option-card--winner {
-  border-color: rgba(201, 162, 39, 0.75);
-  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.25);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
+}
+
+.option-card--disabled {
+  background-image: url('../../assets/images/generated/odds-button-disabled-v1.webp');
 }
 
 .flag {
diff --git a/apps/player/src/views/MobileBetDetailView.vue b/apps/player/src/views/MobileBetDetailView.vue
index e3fac80..5740f7e 100644
--- a/apps/player/src/views/MobileBetDetailView.vue
+++ b/apps/player/src/views/MobileBetDetailView.vue
@@ -365,8 +365,8 @@ const showPhaseWatermark = computed(
   position: relative;
   border-radius: var(--radius);
   background:
-    linear-gradient(rgba(18, 16, 12, 0.78), rgba(16, 14, 10, 0.86)),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    linear-gradient(180deg, rgba(212, 175, 55, 0.07), transparent 30%),
+    rgba(18, 17, 14, 0.92);
   border: 1px solid var(--border);
   box-shadow: var(--shadow);
   overflow: hidden;
diff --git a/apps/player/src/views/MobileMyBetsView.vue b/apps/player/src/views/MobileMyBetsView.vue
index 40bf2c6..f05a15c 100644
--- a/apps/player/src/views/MobileMyBetsView.vue
+++ b/apps/player/src/views/MobileMyBetsView.vue
@@ -7,6 +7,7 @@ import BetStatsPanel from '../components/BetStatsPanel.vue';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
+import emptyBetsImg from '../assets/images/generated/empty-bets-ticket-v1.webp';
 
 const { t } = useI18n();
 
@@ -152,7 +153,10 @@ const pullIndicatorStyle = () => ({
         </div>
       </template>
 
-      <div v-else class="state">{{ t('history.empty') }}</div>
+      <div v-else class="state empty-state">
+        <img :src="emptyBetsImg" alt="" class="empty-img" />
+        <span>{{ t('history.empty') }}</span>
+      </div>
     </template>
   </div>
 </template>
@@ -224,6 +228,21 @@ const pullIndicatorStyle = () => ({
   font-size: 14px;
 }
 
+.empty-state {
+  padding-top: 28px;
+}
+
+.empty-img {
+  width: min(320px, 86vw);
+  aspect-ratio: 16 / 9;
+  height: auto;
+  object-fit: cover;
+  border-radius: 8px;
+  opacity: 0.92;
+  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
+}
+
 .loading-text {
   font-size: 13px;
 }
diff --git a/apps/player/src/views/MobileRechargeDetailView.vue b/apps/player/src/views/MobileRechargeDetailView.vue
index 83f8e2d..9fbeece 100644
--- a/apps/player/src/views/MobileRechargeDetailView.vue
+++ b/apps/player/src/views/MobileRechargeDetailView.vue
@@ -285,7 +285,7 @@ function auditNoteDisplayText(remark: { kind: 'note'; text: string }) {
   overflow: hidden;
   background:
     linear-gradient(rgba(22, 20, 15, 0.74), rgba(18, 16, 12, 0.84)),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    url('../assets/images/generated/h5-recharge-detail-panel-v1.webp') center / 100% 100% no-repeat;
   border: 1px solid rgba(212, 175, 55, 0.2);
   border-radius: 12px;
   padding: 16px;
diff --git a/apps/player/src/views/MobileWalletDetailView.vue b/apps/player/src/views/MobileWalletDetailView.vue
index 53d47ab..a25dfcc 100644
--- a/apps/player/src/views/MobileWalletDetailView.vue
+++ b/apps/player/src/views/MobileWalletDetailView.vue
@@ -8,6 +8,7 @@ import { isBetType, isDepositType, isWithdrawType, isCashbackType, txTypeKey, tx
 import GoldSpinner from '../components/GoldSpinner.vue';
 import WalletStatsPanel from '../components/WalletStatsPanel.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
+import emptyWalletImg from '../assets/images/generated/empty-wallet-ledger-v1.webp';
 
 const router = useRouter();
 const { t, locale } = useI18n();
@@ -222,7 +223,8 @@ const pullIndicatorStyle = () => ({
       </div>
 
       <div v-if="!items.length && !initialLoading" class="empty">
-        {{ t('wallet.no_records') }}
+        <img :src="emptyWalletImg" alt="" class="empty-img" />
+        <span>{{ t('wallet.no_records') }}</span>
       </div>
     </template>
   </div>
@@ -383,5 +385,25 @@ const pullIndicatorStyle = () => ({
   letter-spacing: 0.03em;
 }
 
-.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--text-muted);
+  padding: 28px 16px 40px;
+  font-weight: 600;
+}
+
+.empty-img {
+  width: min(320px, 86vw);
+  aspect-ratio: 16 / 9;
+  height: auto;
+  object-fit: cover;
+  border-radius: 8px;
+  opacity: 0.9;
+  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
+}
 </style>
diff --git a/apps/player/src/views/MobileWalletTransactionDetailView.vue b/apps/player/src/views/MobileWalletTransactionDetailView.vue
index a2f33bc..530d439 100644
--- a/apps/player/src/views/MobileWalletTransactionDetailView.vue
+++ b/apps/player/src/views/MobileWalletTransactionDetailView.vue
@@ -263,30 +263,30 @@ function goCashbackDetail() {
   margin-bottom: 12px;
   text-align: center;
   background:
-    linear-gradient(rgba(22, 20, 15, 0.74), rgba(18, 16, 12, 0.84)),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
-  border: 1px solid #222;
+    linear-gradient(180deg, rgba(212, 175, 55, 0.07), transparent 34%),
+    rgba(18, 17, 14, 0.92);
+  border: 1px solid rgba(255, 226, 156, 0.12);
 }
 
 .hero.pos {
   border-color: rgba(212, 175, 55, 0.25);
   background:
-    linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(20, 16, 8, 0.76)),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    linear-gradient(135deg, rgba(212, 175, 55, 0.12), transparent 46%),
+    rgba(18, 17, 14, 0.92);
 }
 
 .hero.neg {
   border-color: rgba(224, 80, 80, 0.2);
   background:
-    linear-gradient(135deg, rgba(224, 80, 80, 0.1), rgba(20, 12, 10, 0.78)),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    linear-gradient(135deg, rgba(224, 80, 80, 0.12), transparent 46%),
+    rgba(18, 14, 13, 0.92);
 }
 
 .hero.zero {
   border-color: rgba(255, 255, 255, 0.08);
   background:
-    linear-gradient(rgba(22, 20, 15, 0.76), rgba(18, 16, 12, 0.84)),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%),
+    rgba(18, 17, 14, 0.92);
 }
 
 .hero-type {
@@ -325,9 +325,9 @@ function goCashbackDetail() {
   position: relative;
   overflow: hidden;
   background:
-    linear-gradient(rgba(22, 20, 15, 0.78), rgba(18, 16, 12, 0.86)),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
-  border: 1px solid #222;
+    linear-gradient(180deg, rgba(212, 175, 55, 0.04), transparent 28%),
+    rgba(18, 17, 14, 0.9);
+  border: 1px solid rgba(255, 226, 156, 0.1);
   border-radius: 12px;
   padding: 14px 16px;
   margin-bottom: 10px;
diff --git a/apps/player/src/views/MobileWalletView.vue b/apps/player/src/views/MobileWalletView.vue
index 45e2cf9..2830c23 100644
--- a/apps/player/src/views/MobileWalletView.vue
+++ b/apps/player/src/views/MobileWalletView.vue
@@ -8,6 +8,7 @@ import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../util
 import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
+import emptyWalletImg from '../assets/images/generated/empty-wallet-ledger-v1.webp';
 
 const router = useRouter();
 const { t, locale } = useI18n();
@@ -135,7 +136,8 @@ const pullIndicatorStyle = () => ({
       </div>
 
       <div v-if="!items.length" class="empty">
-        {{ t('wallet.no_records') }}
+        <img :src="emptyWalletImg" alt="" class="empty-img" />
+        <span>{{ t('wallet.no_records') }}</span>
       </div>
     </template>
   </div>
@@ -259,5 +261,25 @@ const pullIndicatorStyle = () => ({
   opacity: 1;
 }
 
-.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--text-muted);
+  padding: 28px 16px 40px;
+  font-weight: 600;
+}
+
+.empty-img {
+  width: min(320px, 86vw);
+  aspect-ratio: 16 / 9;
+  height: auto;
+  object-fit: cover;
+  border-radius: 8px;
+  opacity: 0.9;
+  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
+}
 </style>
diff --git a/apps/player/src/views/desktop/DesktopHomeView.vue b/apps/player/src/views/desktop/DesktopHomeView.vue
index 161d940..3491751 100644
--- a/apps/player/src/views/desktop/DesktopHomeView.vue
+++ b/apps/player/src/views/desktop/DesktopHomeView.vue
@@ -1598,21 +1598,19 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: strin
   align-items: center;
   gap: 2px;
   padding: 5px 4px;
-  border-radius: 6px;
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
+  border: 0;
+  border-radius: 0;
+  background: url('../../assets/images/generated/odds-button-normal-v1.webp') center / 100% 100% no-repeat;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
+  transition: filter 0.15s;
 }
 
 .sri-preview-odd-btn:hover {
-  background: var(--border-gold-soft);
-  border-color: var(--border-gold);
+  filter: brightness(1.1);
 }
 
 .sri-preview-odd-btn.selected {
-  background: var(--border-gold-soft);
-  border-color: var(--primary-light);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
 }
 
 .sri-odd-label {
diff --git a/apps/player/src/views/desktop/DesktopProfileEditView.vue b/apps/player/src/views/desktop/DesktopProfileEditView.vue
index 3f324c2..fc36c17 100644
--- a/apps/player/src/views/desktop/DesktopProfileEditView.vue
+++ b/apps/player/src/views/desktop/DesktopProfileEditView.vue
@@ -217,6 +217,9 @@ async function savePassword() {
   overflow-y: auto;
   height: auto;
   max-height: 100%;
+  max-width: 980px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .header-row {
@@ -263,8 +266,8 @@ async function savePassword() {
 
 .edit-grid {
   display: grid;
-  grid-template-columns: 320px 1fr;
-  gap: 16px;
+  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
+  gap: 18px;
   align-items: start;
 }
 
@@ -276,7 +279,16 @@ async function savePassword() {
 }
 
 .edit-card--span {
-  grid-column: 1 / -1;
+  grid-column: auto;
+}
+
+.edit-grid > .edit-card:nth-of-type(2) {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+}
+
+.edit-grid > .edit-card:nth-of-type(3) {
+  grid-column: 1;
 }
 
 .card-title {
@@ -295,19 +307,21 @@ async function savePassword() {
 
 .avatar-row {
   display: flex;
-  align-items: center;
-  gap: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 14px;
 }
 
 .avatar-meta {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 100%;
 }
 
 .avatar-img {
-  width: 72px;
-  height: 72px;
+  width: 88px;
+  height: 88px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid var(--border-gold-soft);
@@ -315,8 +329,8 @@ async function savePassword() {
 }
 
 .avatar-placeholder {
-  width: 72px;
-  height: 72px;
+  width: 88px;
+  height: 88px;
   border-radius: 50%;
   background: #1a1a1a;
   display: flex;
@@ -328,7 +342,8 @@ async function savePassword() {
 }
 
 .change-avatar-btn {
-  align-self: flex-start;
+  align-self: stretch;
+  justify-content: center;
   padding: 7px 16px;
   border-radius: 6px;
   border: 1px solid var(--desktop-border);
@@ -347,11 +362,19 @@ async function savePassword() {
 
 .field-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px 20px;
   margin-bottom: 16px;
 }
 
+.edit-grid > .edit-card:nth-of-type(2) .field:first-child {
+  grid-column: 1 / -1;
+}
+
+.edit-grid > .edit-card:nth-of-type(3) .field-grid {
+  grid-template-columns: 1fr;
+}
+
 .field {
   display: flex;
   flex-direction: column;
@@ -460,6 +483,12 @@ async function savePassword() {
     grid-template-columns: 1fr;
   }
 
+  .edit-grid > .edit-card:nth-of-type(2),
+  .edit-grid > .edit-card:nth-of-type(3) {
+    grid-column: auto;
+    grid-row: auto;
+  }
+
   .field-grid {
     grid-template-columns: 1fr 1fr;
   }
diff --git a/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
index 3c0ddf5..b13624a 100644
--- a/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
+++ b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
@@ -169,10 +169,10 @@ function txLabel(tx: TxDetail): string {
   position: relative;
   overflow: hidden;
   background:
-    linear-gradient(rgba(22, 20, 15, 0.76), rgba(18, 16, 12, 0.82)),
-    url('../../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
-  border: 1px solid var(--desktop-border);
-  border-radius: 12px;
+    linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent 42%),
+    rgba(18, 17, 14, 0.9);
+  border: 1px solid rgba(255, 226, 156, 0.16);
+  border-radius: 10px;
   padding: 28px;
 }