优化玩家端暗金主题资源并清理未引用图片

apps/player/src/components/BetGuideHelp.vue

@@ -102,14 +102,19 @@ function close() {
 
 .close-x {
   position: absolute;
-  top: 10px;
+  top: 8px;
-  right: 10px;
+  right: 8px;
-  width: 28px;
+  width: 36px;
-  height: 28px;
+  height: 36px;
-  border-radius: 50%;
+  border: 0;
-  background: rgba(255, 255, 255, 0.06);
+  border-radius: 0;
-  color: var(--text-muted);
+  background: url('../assets/images/generated/modal-close-gold-v1.webp') center / contain no-repeat;
-  font-size: 14px;
+  color: transparent;
+  font-size: 0;
+}
+
+.close-x:active {
+  background-image: url('../assets/images/generated/modal-close-gold-pressed-v1.webp');
 }
 
 .title {

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);
 }

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">
-            �
+            &times;</button>
-          </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)),
+    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 36%),
-    url('../assets/images/generated/modal-gold-frame-v4.webp') center / 102% 102% no-repeat;
+    rgba(14, 14, 12, 0.96);
-  border: 0;
+  border: 1px solid rgba(212, 175, 55, 0.22);
-  border-radius: 0;
+  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 {

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;

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)),
+    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 36%),
-    url('../assets/images/generated/modal-gold-frame-v4.webp') center / 102% 102% no-repeat;
+    rgba(14, 14, 12, 0.96);
-  border: 0;
+  border: 1px solid rgba(212, 175, 55, 0.22);
-  border-radius: 0;
+  border-radius: 10px;
-  padding: 28px 24px 22px;
+  padding: 26px 24px 22px;
-  box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.12);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58);
 }
 
 .close-x {
   position: absolute;
-  top: 10px;
+  top: 8px;
-  right: 10px;
+  right: 8px;
-  width: 28px;
+  width: 36px;
-  height: 28px;
+  height: 36px;
-  border-radius: 50%;
+  border: 0;
-  border: 1px solid var(--border);
+  border-radius: 0;
-  background: rgba(0, 0, 0, 0.35);
+  background: url('../assets/images/generated/modal-close-gold-v1.webp') center / contain no-repeat;
-  color: var(--text-muted);
+  color: transparent;
-  font-size: 12px;
+  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-image: url('../assets/images/generated/pc-betslip-btn-secondary-v1.webp');
-  background: #0a0a0a;
+  color: #f3e7c5;
-  color: var(--text-muted);
+}
+
+.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>

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: 0;
-  border-radius: var(--radius-lg);
+  border-radius: 0;
-  box-shadow: var(--shadow-lg), var(--glow-gold-md);
+  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);
 }
 

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)),
+    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 36%),
-    url('../../assets/images/generated/modal-gold-frame-v4.webp') center / 102% 102% no-repeat;
+    rgba(14, 14, 12, 0.96);
-  border: 0;
+  border: 1px solid rgba(212, 175, 55, 0.22);
-  border-radius: 0;
+  border-radius: 10px;
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58), 0 0 28px rgba(212, 175, 55, 0.12);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58);
   overflow: hidden;
 }
 

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;
+  border: 0;
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  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);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
-  border-color: var(--border-gold);
+  filter: brightness(1.08);
-  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
 }
 
 .selection-name {

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)),
+    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 36%),
-    url('../../assets/images/generated/modal-gold-frame-v4.webp') center / 102% 102% no-repeat;
+    rgba(14, 14, 12, 0.96);
-  border: 0;
+  border: 1px solid rgba(212, 175, 55, 0.22);
-  border-radius: 0;
+  border-radius: 10px;
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58), 0 0 28px rgba(212, 175, 55, 0.12);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58);
   overflow: hidden;
 }
 

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;
+  background: url('../../assets/images/generated/odds-button-normal-v1.webp') center / 100% 100% no-repeat;
-  border: 1px solid #282828;
+  border: 0;
-  border-radius: 3px;
+  border-radius: 0;
   text-align: center;
 }
 
 .score-card.selected {
-  border-color: var(--primary);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
-  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);
 }
 
 .score-card.selected .score-line {
@@ -150,8 +148,7 @@ function formatOdds(odds: string) {
 }
 
 .score-card--locked {
-  background: #111;
+  background-image: url('../../assets/images/generated/odds-button-disabled-v1.webp');
-  border-color: #333;
 }
 
 .score-card--locked .score-line,

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;
+  border: 0;
-  background: #141414;
+  border-radius: 0;
-  border: 1px solid #262626;
+  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);
+  filter: brightness(1.12);
-  background: rgba(255, 255, 255, 0.05);
 }
 
 .odds-btn.selected {
-  border-color: var(--primary);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
-  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);
 }
 
 .odds-btn.selected .label {
@@ -214,8 +211,7 @@ const panelStyle = computed(() =>
 }
 
 .odds-btn--locked {
-  background: #111;
+  background-image: url('../../assets/images/generated/odds-button-disabled-v1.webp');
-  border-color: #333;
   cursor: not-allowed;
 }
 

apps/player/src/components/outright/OutrightBetModal.vue

@@ -447,17 +447,22 @@ function formatOdds(odds: string) {
 
 .close-x {
   position: absolute;
-  top: 10px;
+  top: 8px;
-  right: 10px;
+  right: 8px;
-  width: 28px;
+  width: 36px;
-  height: 28px;
+  height: 36px;
-  border-radius: 50%;
+  border: 0;
-  background: rgba(255, 255, 255, 0.06);
+  border-radius: 0;
-  color: var(--text-muted);
+  background: url('../../assets/images/generated/modal-close-gold-v1.webp') center / contain no-repeat;
-  font-size: 14px;
+  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;

apps/player/src/components/outright/OutrightOptionCard.vue

@@ -87,9 +87,9 @@ onUnmounted(() => {
   width: 100%;
   min-width: 0;
   padding: 8px 4px 6px;
-  border-radius: 6px;
+  border: 0;
-  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
+  border-radius: 0;
-  border: 1px solid rgba(140, 140, 140, 0.35);
+  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: '';
+  display: none;
-  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;
 }
 
 .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);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
-  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.25);
+}
+
+.option-card--disabled {
+  background-image: url('../../assets/images/generated/odds-button-disabled-v1.webp');
 }
 
 .flag {

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)),
+    linear-gradient(180deg, rgba(212, 175, 55, 0.07), transparent 30%),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    rgba(18, 17, 14, 0.92);
   border: 1px solid var(--border);
   box-shadow: var(--shadow);
   overflow: hidden;

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;
 }

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;

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>

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)),
+    linear-gradient(180deg, rgba(212, 175, 55, 0.07), transparent 34%),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    rgba(18, 17, 14, 0.92);
-  border: 1px solid #222;
+  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)),
+    linear-gradient(135deg, rgba(212, 175, 55, 0.12), transparent 46%),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    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)),
+    linear-gradient(135deg, rgba(224, 80, 80, 0.12), transparent 46%),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    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)),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    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)),
+    linear-gradient(180deg, rgba(212, 175, 55, 0.04), transparent 28%),
-    url('../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    rgba(18, 17, 14, 0.9);
-  border: 1px solid #222;
+  border: 1px solid rgba(255, 226, 156, 0.1);
   border-radius: 12px;
   padding: 14px 16px;
   margin-bottom: 10px;

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>

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;
+  border: 0;
-  background: var(--bg-hover);
+  border-radius: 0;
-  border: 1px solid var(--border);
+  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);
+  filter: brightness(1.1);
-  border-color: var(--border-gold);
 }
 
 .sri-preview-odd-btn.selected {
-  background: var(--border-gold-soft);
+  background-image: url('../../assets/images/generated/odds-button-selected-v1.webp');
-  border-color: var(--primary-light);
 }
 
 .sri-odd-label {

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;
+  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
-  gap: 16px;
+  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;
+  flex-direction: column;
-  gap: 16px;
+  align-items: flex-start;
+  gap: 14px;
 }
 
 .avatar-meta {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 100%;
 }
 
 .avatar-img {
-  width: 72px;
+  width: 88px;
-  height: 72px;
+  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;
+  width: 88px;
-  height: 72px;
+  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;
   }

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)),
+    linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent 42%),
-    url('../../assets/images/generated/detail-ledger-ticket-bg-v1.webp') center / cover no-repeat;
+    rgba(18, 17, 14, 0.9);
-  border: 1px solid var(--desktop-border);
+  border: 1px solid rgba(255, 226, 156, 0.16);
-  border-radius: 12px;
+  border-radius: 10px;
   padding: 28px;
 }