diff --git a/apps/api/src/applications/player/player.controller.ts b/apps/api/src/applications/player/player.controller.ts
index f2f52c4..ec16982 100644
--- a/apps/api/src/applications/player/player.controller.ts
+++ b/apps/api/src/applications/player/player.controller.ts
@@ -306,13 +306,14 @@ export class PlayerController {
     @CurrentUser('locale') locale: string,
     @Query('status') status?: string,
     @Query('page') page?: string,
+    @Query('pageSize') pageSize?: string,
     @Query('matchId') matchId?: string,
   ) {
     const result = await this.bets.getUserBets(
       userId,
       status,
       page ? parseInt(page, 10) : 1,
-      20,
+      pageSize ? parseInt(pageSize, 10) : 20,
       matchId ? BigInt(matchId) : undefined,
     );
     const items = await this.matches.enrichBetsForHistory(result.items, locale);
@@ -347,9 +348,10 @@ export class PlayerController {
   async transactions(
     @CurrentUser('id') userId: bigint,
     @Query('page') page?: string,
+    @Query('pageSize') pageSize?: string,
     @Query('type') type?: string,
   ) {
-    const result = await this.wallet.getTransactions(userId, page ? parseInt(page) : 1, 20, type);
+    const result = await this.wallet.getTransactions(userId, page ? parseInt(page) : 1, pageSize ? parseInt(pageSize) : 20, type);
     return jsonResponse(result);
   }
 
@@ -424,10 +426,12 @@ export class PlayerController {
   async myDepositOrders(
     @CurrentUser('id') userId: bigint,
     @Query('page') page?: string,
+    @Query('pageSize') pageSize?: string,
   ) {
     const result = await this.deposit.getPlayerDepositOrders(
       userId,
       page ? parseInt(page, 10) : 1,
+      pageSize ? parseInt(pageSize, 10) : 20,
     );
     return jsonResponse(result);
   }
diff --git a/apps/player/scripts/check-desktop-i18n.mjs b/apps/player/scripts/check-desktop-i18n.mjs
new file mode 100644
index 0000000..25c1455
--- /dev/null
+++ b/apps/player/scripts/check-desktop-i18n.mjs
@@ -0,0 +1,44 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.join(__dirname, '..');
+
+function flatten(obj, prefix = '') {
+  const out = {};
+  for (const [k, v] of Object.entries(obj)) {
+    const key = prefix ? `${prefix}.${k}` : k;
+    if (v && typeof v === 'object' && !Array.isArray(v)) Object.assign(out, flatten(v, key));
+    else out[key] = v;
+  }
+  return out;
+}
+
+function extractKeysFromDir(dir) {
+  const keys = new Set();
+  const re = /\bt\s*\(\s*['"`]([^'"`]+)['"`]/g;
+  function walk(d) {
+    for (const ent of fs.readdirSync(d, { withFileTypes: true })) {
+      const p = path.join(d, ent.name);
+      if (ent.isDirectory()) walk(p);
+      else if (ent.name.endsWith('.vue')) {
+        const src = fs.readFileSync(p, 'utf8');
+        let m;
+        while ((m = re.exec(src))) keys.add(m[1]);
+      }
+    }
+  }
+  walk(dir);
+  return keys;
+}
+
+const zhMod = await import('../src/i18n/zh-CN.ts');
+const zh = flatten(zhMod.default);
+const dirs = ['src/views/desktop', 'src/components/desktop'].map((d) => path.join(root, d));
+const used = new Set();
+for (const d of dirs) extractKeysFromDir(d).forEach((k) => used.add(k));
+
+const missing = [...used].filter((k) => !(k in zh)).sort();
+console.log(`Missing keys (${missing.length}):`);
+missing.forEach((k) => console.log(`  ${k}`));
diff --git a/apps/player/src/App.vue b/apps/player/src/App.vue
index f4ac569..4acb453 100644
--- a/apps/player/src/App.vue
+++ b/apps/player/src/App.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
 import LoginPromptModal from './components/LoginPromptModal.vue';
+import AppToast from './components/AppToast.vue';
 </script>
 <template>
   <RouterView />
   <LoginPromptModal />
+  <AppToast />
 </template>
diff --git a/apps/player/src/assets/images/pcbg.webp b/apps/player/src/assets/images/pcbg.webp
new file mode 100644
index 0000000..693abbc
Binary files /dev/null and b/apps/player/src/assets/images/pcbg.webp differ
diff --git a/apps/player/src/components/AppToast.vue b/apps/player/src/components/AppToast.vue
new file mode 100644
index 0000000..6b68d8c
--- /dev/null
+++ b/apps/player/src/components/AppToast.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useAppToast } from '../composables/useAppToast';
+
+const { visible, message } = useAppToast();
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="app-toast">
+      <div v-if="visible" class="app-toast" role="status" aria-live="polite">
+        {{ message }}
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.app-toast {
+  position: fixed;
+  top: calc(var(--desktop-header-h, 56px) + 16px);
+  left: 50%;
+  z-index: 5000;
+  transform: translateX(-50%);
+  max-width: min(90vw, 360px);
+  padding: 10px 18px;
+  border-radius: 8px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(22, 22, 22, 0.96);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 700;
+  text-align: center;
+  pointer-events: none;
+}
+
+.app-toast-enter-active,
+.app-toast-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.app-toast-enter-from,
+.app-toast-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -8px);
+}
+</style>
diff --git a/apps/player/src/components/BetSlipDrawer.vue b/apps/player/src/components/BetSlipDrawer.vue
index fe166bc..11d295d 100644
--- a/apps/player/src/components/BetSlipDrawer.vue
+++ b/apps/player/src/components/BetSlipDrawer.vue
@@ -11,8 +11,10 @@ import {
 import { useAuthStore } from '../stores/auth';
 import { formatMoney, parseAmount } from '../utils/localeDisplay';
 import BetSuccessOverlay from './BetSuccessOverlay.vue';
+import ConfirmDialog from './ConfirmDialog.vue';
 import api from '../api';
 import { usePlayerProfile } from '../composables/usePlayerProfile';
+import { buildBetPlaceConfirmMessage } from '../utils/betPlaceConfirmMessage';
 
 const props = defineProps<{ modelValue: boolean }>();
 const emit = defineEmits<{ 'update:modelValue': [boolean] }>();
@@ -33,6 +35,8 @@ const balance = ref<number | null>(null);
 const error = ref('');
 const success = ref('');
 const showSuccess = ref(false);
+const showPlaceConfirm = ref(false);
+const placeConfirmMessage = ref('');
 const MIN_STAKE = 5;
 const MAX_STAKE_INTEGER_LENGTH = 9;
 const stakeInput = ref('');
@@ -345,34 +349,54 @@ function oddsTrendClass(delta: OddsDelta) {
   return delta.newOdds >= delta.oldOdds ? 'odds-up' : 'odds-down';
 }
 
-async function placeBet() {
-  if (!activeItems.value.length) return;
+function validatePlaceBet(): boolean {
+  if (!activeItems.value.length) return false;
   if (!auth.token) {
     auth.showLoginPrompt();
-    return;
+    return false;
   }
   if (slip.stake < MIN_STAKE) {
     error.value = t('bet.slip_min_error', { amount: MIN_STAKE });
-    return;
+    return false;
   }
   if (balance.value != null && slip.stake > balance.value) {
     error.value = t('bet.outright_insufficient');
-    return;
+    return false;
   }
   if (activeTab.value === 'parlay' && !canSubmitActive.value) {
     error.value = slip.parlayItems.length > PARLAY_MAX_LEGS
       ? t('bet.parlay_max_legs')
       : t('bet.parlay_need_more');
-    return;
+    return false;
   }
   if (hasSuspendedSelections.value) {
     error.value = t('bet.odds_suspended');
-    return;
+    return false;
   }
+  return true;
+}
+
+function onPlaceBetClick() {
+  error.value = '';
+  if (!validatePlaceBet()) return;
   if (hasPendingOddsChanges.value) {
     acceptPendingOdds();
   }
+  const items = activeTab.value === 'parlay' ? [...slip.parlayItems] : activeItems.value;
+  placeConfirmMessage.value = buildBetPlaceConfirmMessage(t, {
+    mode: activeTab.value,
+    items,
+    totalStake: Number(slip.stake) || 0,
+    totalReturn: activeEstimatedReturn.value,
+    totalOdds: activeTab.value === 'parlay' ? activeTotalOdds.value : undefined,
+    formatMoney: (amount) => formatMoney(amount, locale.value),
+    getStake: () => Number(slip.stake) || 0,
+    getOdds: (item) => effectiveOdds(item),
+  });
+  showPlaceConfirm.value = true;
+}
 
+async function executePlaceBet() {
   loading.value = true;
   error.value = '';
   success.value = '';
@@ -414,6 +438,11 @@ async function placeBet() {
   }
 }
 
+async function confirmPlaceBet() {
+  showPlaceConfirm.value = false;
+  await executePlaceBet();
+}
+
 watch(
   () => props.modelValue,
   (open) => {
@@ -622,7 +651,7 @@ watch(
           type="button"
           class="btn-primary"
           :disabled="loading || !canSubmitWithOdds"
-          @click="placeBet"
+          @click="onPlaceBetClick"
         >
           {{ submitButtonLabel }}
         </button>
@@ -630,6 +659,16 @@ watch(
     </div>
   </div>
 
+  <ConfirmDialog
+    v-model:visible="showPlaceConfirm"
+    :title="t('bet.place_confirm_title')"
+    :message="placeConfirmMessage"
+    :confirm-text="t('bet.place_bet')"
+    :cancel-text="t('common.cancel')"
+    :loading="loading"
+    @confirm="confirmPlaceBet"
+  />
+
   <BetSuccessOverlay :show="showSuccess" @done="onSuccessDone" />
 </template>
 
diff --git a/apps/player/src/components/CashBalanceChip.vue b/apps/player/src/components/CashBalanceChip.vue
index d104b25..6a42e6f 100644
--- a/apps/player/src/components/CashBalanceChip.vue
+++ b/apps/player/src/components/CashBalanceChip.vue
@@ -76,6 +76,9 @@ onUnmounted(() => {
       </span>
       <span class="chevron" :class="{ open }">▾</span>
     </button>
+    <button type="button" class="direct-recharge-btn" @click="goRecharge">
+      {{ t('recharge.title') }}
+    </button>
 
     <div v-if="open" class="cash-panel">
       <div class="panel-row">
@@ -105,6 +108,32 @@ onUnmounted(() => {
 .cash-chip-wrap {
   position: relative;
   z-index: 120;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.direct-recharge-btn {
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 6px;
+  background: var(--primary);
+  color: var(--tertiary);
+  font-size: 13px;
+  font-weight: 700;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.direct-recharge-btn:active {
+  opacity: 0.8;
+}
+
+@media (max-width: 1023px) {
+  .direct-recharge-btn {
+    display: none;
+  }
 }
 
 .cash-chip {
diff --git a/apps/player/src/components/ConfirmDialog.vue b/apps/player/src/components/ConfirmDialog.vue
index 9dc1d3e..e2422ba 100644
--- a/apps/player/src/components/ConfirmDialog.vue
+++ b/apps/player/src/components/ConfirmDialog.vue
@@ -89,7 +89,7 @@ function onConfirm() {
 .confirm-overlay {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: 1100;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -125,6 +125,7 @@ function onConfirm() {
   line-height: 1.6;
   color: #c8c8c8;
   text-align: center;
+  white-space: pre-line;
 }
 
 .confirm-actions {
diff --git a/apps/player/src/components/FloatingMailbox.vue b/apps/player/src/components/FloatingMailbox.vue
new file mode 100644
index 0000000..331f457
--- /dev/null
+++ b/apps/player/src/components/FloatingMailbox.vue
@@ -0,0 +1,350 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import MessageListPanel from './MessageListPanel.vue';
+import CustomerServicePanel from './CustomerServicePanel.vue';
+import MobileMessageDetailView from '../views/MobileMessageDetailView.vue';
+import { useAuthStore } from '../stores/auth';
+import { usePlayerMessages } from '../composables/usePlayerMessages';
+import { useInboxFeature } from '../composables/useInboxFeature';
+import { useFloatingMailbox } from '../composables/useFloatingMailbox';
+import { useViewport } from '../composables/useViewport';
+import { useRoute } from 'vue-router';
+
+type HubTab = 'messages' | 'support';
+
+const { t } = useI18n();
+const route = useRoute();
+const { isDesktop } = useViewport();
+const auth = useAuthStore();
+const { inboxEnabled, hubTitleKey } = useInboxFeature();
+const { unreadCount, messages, listLoaded, refreshUnreadCount, markAllRead, deleteAllMessages } = usePlayerMessages();
+const { isOpen, toggle, close } = useFloatingMailbox();
+
+const markingAll = ref(false);
+const deletingAll = ref(false);
+const activeTab = ref<HubTab>('messages');
+const selectedMessageId = ref<string | null>(null);
+
+const unreadInList = computed(() => messages.value.filter((item) => !item.isRead).length);
+const hasMessages = computed(() => listLoaded.value && messages.value.length > 0);
+const showMessageActions = computed(
+  () => inboxEnabled.value && activeTab.value === 'messages' && auth.token && hasMessages.value && !selectedMessageId.value,
+);
+
+const isBettingDesktop = computed(() => {
+  if (!isDesktop.value) return false;
+  const p = route.path;
+  return p === '/bet' || p.startsWith('/match/') || p.startsWith('/outright/');
+});
+
+watch(isOpen, (opened) => {
+  if (opened) {
+    if (!inboxEnabled.value) activeTab.value = 'support';
+    refreshUnreadCount();
+  } else {
+    selectedMessageId.value = null;
+  }
+});
+
+function switchTab(tab: HubTab) {
+  if (!inboxEnabled.value || tab === activeTab.value) return;
+  activeTab.value = tab;
+  selectedMessageId.value = null;
+}
+
+async function onMarkAllRead() {
+  if (!unreadInList.value || markingAll.value) return;
+  markingAll.value = true;
+  try {
+    await markAllRead();
+    await refreshUnreadCount();
+  } finally {
+    markingAll.value = false;
+  }
+}
+
+async function onDeleteAll() {
+  if (deletingAll.value || !messages.value.length) return;
+  if (!confirm(t('messages.delete_all_confirm'))) return;
+  deletingAll.value = true;
+  try {
+    await deleteAllMessages();
+    await refreshUnreadCount();
+  } finally {
+    deletingAll.value = false;
+  }
+}
+
+function handleMessageClick(id: string) {
+  selectedMessageId.value = id;
+}
+
+onMounted(() => {
+  if (isOpen.value) refreshUnreadCount();
+});
+</script>
+
+<template>
+  <div class="floating-mailbox" :class="{ 'is-betting-desktop': isBettingDesktop }">
+    <!-- Floating Button -->
+    <button
+      type="button"
+      class="fab-btn"
+      :class="{ 'fab-active': isOpen }"
+      @click="toggle"
+      :aria-label="t(hubTitleKey)"
+    >
+      <svg class="fab-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <path
+          d="M12 3C7.03 3 3 6.58 3 11c0 2.02.9 3.86 2.38 5.24L4 21l4.2-1.02A10.8 10.8 0 0 0 12 19c4.97 0 9-3.58 9-8s-4.03-8-9-8Z"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linejoin="round"
+        />
+        <circle cx="9" cy="11" r="1" fill="currentColor" />
+        <circle cx="12" cy="11" r="1" fill="currentColor" />
+        <circle cx="15" cy="11" r="1" fill="currentColor" />
+      </svg>
+      <span v-if="auth.user && inboxEnabled && unreadCount > 0" class="badge">
+        {{ unreadCount > 99 ? '99+' : unreadCount }}
+      </span>
+    </button>
+
+    <!-- Popup Panel -->
+    <Transition name="fade-slide">
+      <div v-if="isOpen" class="popup-panel">
+        <div class="popup-header">
+          <div class="tabs">
+            <button
+              v-if="inboxEnabled"
+              type="button"
+              class="tab-btn"
+              :class="{ active: activeTab === 'messages' }"
+              @click="switchTab('messages')"
+            >
+              {{ t('messages.tab_inbox') }}
+              <span v-if="unreadInList > 0" class="tab-badge">{{ unreadInList }}</span>
+            </button>
+            <button
+              type="button"
+              class="tab-btn"
+              :class="{ active: activeTab === 'support' }"
+              @click="switchTab('support')"
+            >
+              {{ t('messages.tab_support') }}
+            </button>
+          </div>
+          
+          <div class="header-actions">
+            <button v-if="showMessageActions && unreadInList > 0" type="button" class="action-btn" @click="onMarkAllRead" :disabled="markingAll">
+              <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
+            </button>
+            <button v-if="showMessageActions" type="button" class="action-btn danger" @click="onDeleteAll" :disabled="deletingAll">
+              <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+            </button>
+            <button type="button" class="action-btn close" @click="close">
+              <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="popup-body">
+          <template v-if="activeTab === 'messages' && inboxEnabled">
+            <MobileMessageDetailView v-if="selectedMessageId" :id="selectedMessageId" embedded @back="selectedMessageId = null" />
+            <MessageListPanel v-else class="panel-content" @click-message="handleMessageClick" />
+          </template>
+          <CustomerServicePanel v-else class="panel-content" />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.floating-mailbox {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.fab-btn {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--primary);
+  color: #fff;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s, background 0.2s;
+  position: relative;
+}
+
+.fab-btn:hover {
+  transform: scale(1.05);
+  background: var(--primary-light);
+}
+
+.fab-active {
+  transform: scale(0.95);
+}
+
+.fab-icon {
+  width: 28px;
+  height: 28px;
+}
+
+.badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: var(--danger, #ff4d4f);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 10px;
+  border: 2px solid var(--bg-card);
+  line-height: 1;
+}
+
+.popup-panel {
+  position: absolute;
+  bottom: 76px;
+  right: 0;
+  width: 380px;
+  height: 600px;
+  max-height: calc(100vh - 120px);
+  background: var(--bg-card, #141414);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.02);
+  height: 48px;
+}
+
+.tabs {
+  display: flex;
+  height: 100%;
+}
+
+.tab-btn {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.2s;
+}
+
+.tab-btn:hover {
+  color: #fff;
+}
+
+.tab-btn.active {
+  color: var(--primary-light);
+  border-bottom-color: var(--primary);
+}
+
+.tab-badge {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+.tab-btn.active .tab-badge {
+  background: var(--primary);
+  color: #141414;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+}
+
+.action-btn.danger:hover {
+  color: var(--danger, #ff4d4f);
+  background: rgba(255, 77, 79, 0.1);
+}
+
+.action-btn.close:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.popup-body {
+  height: calc(100% - 48px);
+  position: relative;
+  background: #0f0f0f;
+  overflow-y: auto;
+}
+
+.panel-content {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Transitions */
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: bottom right;
+}
+
+.fade-slide-enter-from,
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: scale(0.9) translateY(20px);
+}
+
+.floating-mailbox.is-betting-desktop {
+  right: calc(var(--desktop-right-betslip-w, 288px) + 12px);
+  bottom: 24px;
+}
+</style>
diff --git a/apps/player/src/components/HomeAnnouncementCard.vue b/apps/player/src/components/HomeAnnouncementCard.vue
new file mode 100644
index 0000000..f7ef060
--- /dev/null
+++ b/apps/player/src/components/HomeAnnouncementCard.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { formatLocalMatchDateTime } from '@thebet365/shared';
+import { usePlayerHome } from '../composables/usePlayerHome';
+import { stripHtml } from '../utils/html';
+
+const AUTOPLAY_MS = 4000;
+
+const router = useRouter();
+const { t, locale } = useI18n();
+const { announcementItems } = usePlayerHome();
+
+const currentPage = ref(1);
+const paused = ref(false);
+const itemsPerPage = 3;
+
+let autoplayTimer = 0;
+
+const totalPages = computed(() => Math.max(1, Math.ceil(announcementItems.value.length / itemsPerPage)));
+
+const paginatedItems = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage;
+  return announcementItems.value.slice(start, start + itemsPerPage);
+});
+
+function openDetail(id: string) {
+  router.push(`/announcements/${id}`);
+}
+
+function formatDate(createdAt?: string) {
+  if (!createdAt) return '';
+  return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'compact' });
+}
+
+function itemTitle(item: (typeof announcementItems.value)[number]) {
+  const title = item.translation?.title?.trim();
+  if (title) return title;
+  return stripHtml(item.translation?.body ?? '') || t('home.announcement_badge');
+}
+
+function prevPage() {
+  currentPage.value = currentPage.value <= 1 ? totalPages.value : currentPage.value - 1;
+}
+
+function nextPage() {
+  currentPage.value = currentPage.value >= totalPages.value ? 1 : currentPage.value + 1;
+}
+
+function startAutoplay() {
+  window.clearInterval(autoplayTimer);
+  if (totalPages.value <= 1) return;
+  autoplayTimer = window.setInterval(() => {
+    if (paused.value) return;
+    nextPage();
+  }, AUTOPLAY_MS);
+}
+
+function stopAutoplay() {
+  window.clearInterval(autoplayTimer);
+  autoplayTimer = 0;
+}
+
+onMounted(startAutoplay);
+onUnmounted(stopAutoplay);
+
+watch(totalPages, () => {
+  if (currentPage.value > totalPages.value) {
+    currentPage.value = 1;
+  }
+  startAutoplay();
+});
+</script>
+
+<template>
+  <div
+    v-if="announcementItems.length > 0"
+    class="home-announce-card"
+    @mouseenter="paused = true"
+    @mouseleave="paused = false"
+  >
+    <div class="card-header">
+      <div class="header-title">
+        <svg class="announce-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path fill="currentColor" d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
+        </svg>
+        <span>{{ t('announcements.title') || '系统公告' }}</span>
+      </div>
+      <div v-if="totalPages > 1" class="pagination">
+        <button type="button" class="page-btn" aria-label="Previous" @click="prevPage">‹</button>
+        <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
+        <button type="button" class="page-btn" aria-label="Next" @click="nextPage">›</button>
+      </div>
+    </div>
+
+    <div class="card-body">
+      <Transition name="announce-carousel" mode="out-in">
+        <div :key="currentPage" class="carousel-slide">
+          <button
+            v-for="item in paginatedItems"
+            :key="item.id"
+            type="button"
+            class="announce-row"
+            @click="openDetail(item.id)"
+          >
+            <span class="row-main">
+              <span class="title">{{ itemTitle(item) }}</span>
+              <span v-if="item.createdAt" class="date">{{ formatDate(item.createdAt) }}</span>
+            </span>
+            <span class="chevron" aria-hidden="true">›</span>
+          </button>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-announce-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(201, 162, 39, 0.05);
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.announce-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-btn {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: #1a1a1a;
+  color: var(--gold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.page-info {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.card-body {
+  overflow: hidden;
+}
+
+.carousel-slide {
+  display: flex;
+  flex-direction: column;
+}
+
+.announce-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  transition: background 0.2s;
+}
+
+.announce-row:last-child {
+  border-bottom: none;
+}
+
+.announce-row:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.row-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.title {
+  flex: 1;
+  font-size: 13px;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.date {
+  font-size: 12px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.chevron {
+  color: var(--gold);
+  font-size: 18px;
+  font-family: monospace;
+}
+
+.announce-carousel-enter-active,
+.announce-carousel-leave-active {
+  transition: opacity 0.35s ease, transform 0.35s ease;
+}
+
+.announce-carousel-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.announce-carousel-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>
diff --git a/apps/player/src/components/MessageListPanel.vue b/apps/player/src/components/MessageListPanel.vue
index a93d947..5c65d25 100644
--- a/apps/player/src/components/MessageListPanel.vue
+++ b/apps/player/src/components/MessageListPanel.vue
@@ -12,6 +12,9 @@ import { stripHtml } from '../utils/html';
 const router = useRouter();
 const { t, locale } = useI18n();
 const auth = useAuthStore();
+const emit = defineEmits<{
+  (e: 'click-message', id: string): void;
+}>();
 const {
   messages,
   loading,
@@ -50,7 +53,7 @@ function messagePreview(item: PlayerMessage) {
 }
 
 function openDetail(id: string) {
-  router.push(`/messages/${id}`);
+  emit('click-message', id);
 }
 
 async function fetchPage(nextPage: number, append = false) {
@@ -178,8 +181,6 @@ onActivated(tryLoad);
 
 <style scoped>
 .message-list-panel {
-  flex: 1;
-  min-height: 0;
 }
 
 .guest-hint,
diff --git a/apps/player/src/components/TeamEmblem.vue b/apps/player/src/components/TeamEmblem.vue
index 06d5b70..d7b8690 100644
--- a/apps/player/src/components/TeamEmblem.vue
+++ b/apps/player/src/components/TeamEmblem.vue
@@ -7,7 +7,7 @@ const props = withDefaults(
     teamCode?: string;
     teamName?: string;
     logoUrl?: string | null;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
   }>(),
   { size: 'md' },
 );
@@ -80,6 +80,11 @@ watch(
   height: 52px;
 }
 
+.team-emblem--xl {
+  width: 72px;
+  height: 72px;
+}
+
 /* 国旗：横向比例 + 铺满 */
 .team-emblem:not(.team-emblem--logo) {
   object-fit: cover;
@@ -102,6 +107,11 @@ watch(
   height: 36px;
 }
 
+.team-emblem--xl:not(.team-emblem--logo) {
+  width: 80px;
+  height: 54px;
+}
+
 /* 队徽：正方形容器 + 完整显示 */
 .team-emblem--logo {
   object-fit: contain;
@@ -129,4 +139,8 @@ watch(
 .team-emblem--lg.team-emblem--placeholder {
   font-size: 22px;
 }
+
+.team-emblem--xl.team-emblem--placeholder {
+  font-size: 30px;
+}
 </style>
diff --git a/apps/player/src/components/desktop/AccountSideNav.vue b/apps/player/src/components/desktop/AccountSideNav.vue
new file mode 100644
index 0000000..748611d
--- /dev/null
+++ b/apps/player/src/components/desktop/AccountSideNav.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RouterLink, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const isWalletSection = computed(
+  () => route.path.startsWith('/wallet') || route.path === '/profile/cashbacks',
+);
+
+const hubTitleKey = computed(() => (isWalletSection.value ? 'nav.wallet' : 'nav.bet_history'));
+
+const menuItems = computed(() => {
+  if (isWalletSection.value) {
+    return [
+      {
+        path: '/wallet',
+        labelKey: 'nav.wallet',
+        match: (p: string) =>
+          p === '/wallet' ||
+          p === '/wallet/detail' ||
+          p === '/wallet/recharge' ||
+          p.startsWith('/wallet/transactions'),
+      },
+      {
+        path: '/wallet/recharge/history',
+        labelKey: 'wallet.recharge_history',
+        match: (p: string) => p.startsWith('/wallet/recharge/history'),
+      },
+      {
+        path: '/wallet/cashbacks',
+        labelKey: 'wallet.cashbacks_tab',
+        match: (p: string) => p === '/wallet/cashbacks' || p === '/profile/cashbacks',
+      },
+    ];
+  }
+
+  return [
+    {
+      path: '/bets',
+      labelKey: 'nav.bet_history',
+      match: (p: string) => p === '/bets' || p.startsWith('/bets/'),
+    },
+  ];
+});
+</script>
+
+<template>
+  <nav class="account-side-nav">
+    <div class="hub-nav-title">{{ t(hubTitleKey) }}</div>
+    <RouterLink
+      v-for="item in menuItems"
+      :key="item.path"
+      :to="item.path"
+      class="nav-item hover-bg"
+      :class="{ active: item.match(route.path) }"
+    >
+      <span class="dot"></span>
+      <span class="label">{{ t(item.labelKey) || item.path }}</span>
+    </RouterLink>
+  </nav>
+</template>
+
+<style scoped>
+.account-side-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px;
+}
+
+.hub-nav-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 6px 14px 10px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: 4px;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.nav-item:hover {
+  color: #fff;
+}
+
+.nav-item.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.nav-item.active .dot {
+  background: var(--primary);
+  box-shadow: 0 0 8px var(--primary);
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #333;
+  transition: all 0.2s;
+}
+
+.label {
+  line-height: 1;
+}
+</style>
diff --git a/apps/player/src/components/desktop/BetSlipPanel.vue b/apps/player/src/components/desktop/BetSlipPanel.vue
new file mode 100644
index 0000000..6f364ec
--- /dev/null
+++ b/apps/player/src/components/desktop/BetSlipPanel.vue
@@ -0,0 +1,1967 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter, RouterLink } from 'vue-router';
+import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
+import { useBetSlipStore, type ParlaySlipError, type SlipItem, type SlipMode } from '../../stores/betSlip';
+import { useAuthStore } from '../../stores/auth';
+import { formatMoney, parseAmount } from '../../utils/localeDisplay';
+import api from '../../api';
+import { usePlayerProfile } from '../../composables/usePlayerProfile';
+import BetSuccessOverlay from '../BetSuccessOverlay.vue';
+import ConfirmDialog from '../ConfirmDialog.vue';
+import GoldSpinner from '../GoldSpinner.vue';
+import { type BetHistoryItem } from '../BetHistoryCard.vue';
+import { buildBetPlaceConfirmMessage } from '../../utils/betPlaceConfirmMessage';
+import { useDesktopBetLocate } from '../../composables/useDesktopBetLocate';
+
+type PanelTab = SlipMode | 'history';
+
+const { t, locale } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+const { refreshProfile } = usePlayerProfile();
+const { requestLocate } = useDesktopBetLocate();
+
+const activeTab = ref<PanelTab>('single');
+const historyScope = ref<'all' | 'match'>('all');
+const historyItems = ref<BetHistoryItem[]>([]);
+const historyTotal = ref(0);
+const historyPage = ref(1);
+const historyPageSize = 15;
+const historyLoading = ref(false);
+const historyInitialLoading = ref(false);
+const loading = ref(false);
+const balanceLoading = ref(false);
+const balance = ref<number | null>(null);
+const error = ref('');
+const success = ref('');
+const showSuccess = ref(false);
+const showPlaceConfirm = ref(false);
+const placeConfirmMessage = ref('');
+const pendingSingleItem = ref<SlipItem | null>(null);
+const MIN_STAKE = 5;
+const MAX_STAKE_INTEGER_LENGTH = 9;
+const stakeInput = ref('');
+const itemStakeInputs = ref<Record<string, string>>({});
+const ODDS_POLL_MS = 5000;
+
+type OddsDelta = {
+  oldOdds: number;
+  newOdds: number;
+  newVersion: string;
+  suspended: boolean;
+};
+
+interface SelectionOddsRow {
+  id: string;
+  odds: string;
+  oddsVersion: string;
+  status: string;
+  marketStatus: string;
+  marketShowOnPlayer: boolean;
+  matchStatus: string;
+}
+
+const oddsDeltas = ref<Record<string, OddsDelta>>({});
+let oddsPollTimer: ReturnType<typeof setInterval> | null = null;
+
+const currentMatchId = computed(() => {
+  const match = route.path.match(/^\/match\/([^/]+)/);
+  if (match) return match[1];
+  const outright = route.path.match(/^\/outright\/([^/]+)/);
+  return outright ? outright[1] : '';
+});
+
+const showMatchHistoryFilter = computed(() => Boolean(currentMatchId.value));
+
+const singleSlipItems = computed<SlipItem[]>(() => {
+  if (slip.singleCartItems.length) return slip.singleCartItems;
+  return slip.singleItem ? [slip.singleItem] : [];
+});
+
+const activeItems = computed<SlipItem[]>(() => {
+  if (activeTab.value === 'history') return [];
+  if (activeTab.value === 'parlay') return slip.parlayItems;
+  return singleSlipItems.value;
+});
+
+const historyHasMore = computed(
+  () => historyItems.value.length < historyTotal.value,
+);
+
+const activeCount = computed(() => activeItems.value.length);
+
+function effectiveOdds(item: SlipItem) {
+  return oddsDeltas.value[item.selectionId]?.newOdds ?? item.odds;
+}
+
+const activeTotalOdds = computed(() =>
+  activeItems.value.reduce((acc, item) => acc * effectiveOdds(item), 1),
+);
+const activeEstimatedReturn = computed(() => {
+  if (!activeItems.value.length) return 0;
+  if (activeTab.value === 'parlay') {
+    if (!Number.isFinite(slip.stake) || slip.stake <= 0) return 0;
+    return slip.stake * activeTotalOdds.value;
+  }
+  return activeItems.value.reduce((acc, item) => {
+    const s = slip.getItemStake(item.selectionId);
+    if (!Number.isFinite(s) || s <= 0) return acc;
+    return acc + s * effectiveOdds(item);
+  }, 0);
+});
+
+const activeTotalStake = computed(() => {
+  if (activeTab.value === 'parlay') return Number(slip.stake) || 0;
+  if (activeTab.value !== 'single') return 0;
+  return singleSlipItems.value.reduce((acc, item) => acc + slip.getItemStake(item.selectionId), 0);
+});
+
+const hasSuspendedSelections = computed(() =>
+  Object.values(oddsDeltas.value).some((delta) => delta.suspended),
+);
+
+const hasPendingOddsChanges = computed(() =>
+  Object.values(oddsDeltas.value).some((delta) => !delta.suspended),
+);
+
+const oddsWarningText = computed(() => {
+  if (hasSuspendedSelections.value) return t('bet.odds_suspended');
+  if (hasPendingOddsChanges.value) return t('bet.odds_changed');
+  return '';
+});
+
+const submitButtonLabel = computed(() => {
+  if (loading.value) return t('bet.placing');
+  if (hasPendingOddsChanges.value) return t('bet.accept_changes_place');
+  if (activeTab.value === 'single') return t('bet.slip_place_all');
+  return t('bet.place_bet_short');
+});
+
+const canSubmitWithOdds = computed(() => canSubmitActive.value && !hasSuspendedSelections.value);
+
+const canSubmitActive = computed(() => {
+  if (activeTab.value === 'parlay') {
+    return slip.parlayItems.length >= PARLAY_MIN_LEGS && slip.parlayItems.length <= PARLAY_MAX_LEGS;
+  }
+  if (activeTab.value !== 'single') return false;
+  return singleSlipItems.value.length > 0 && singleSlipItems.value.every((item) => item.allowSingle !== false);
+});
+
+const singleParlayOnlyHint = computed(
+  () =>
+    slip.mode === 'single' &&
+    Boolean(slip.singleItem) &&
+    slip.singleItem!.allowSingle === false &&
+    slip.singleItem!.allowParlay !== false,
+);
+
+const balanceText = computed(() => {
+  if (balanceLoading.value) return t('bet.loading');
+  if (balance.value == null) return '--';
+  return formatMoney(balance.value, locale.value);
+});
+
+const stakeText = computed(() => formatMoney(activeTotalStake.value, locale.value));
+const estimatedReturnText = computed(() => formatMoney(activeEstimatedReturn.value, locale.value));
+const totalOddsText = computed(() => activeTotalOdds.value.toFixed(4).replace(/0+$/, '').replace(/\.$/, ''));
+
+const parlayWarning = computed(() => {
+  if (activeTab.value !== 'parlay') return '';
+  if (slip.lastParlayError) return parlayErrorMessage(slip.lastParlayError);
+  if (slip.parlayItems.length > 0 && slip.parlayItems.length < PARLAY_MIN_LEGS) {
+    return t('bet.parlay_need_more');
+  }
+  return '';
+});
+
+const singleInParlay = computed(() => {
+  const item = slip.singleItem;
+  return Boolean(item && slip.parlayItems.some((leg) => leg.selectionId === item.selectionId));
+});
+
+const showFooterParlayAction = computed(() => slip.mode === 'single' && Boolean(slip.singleItem));
+
+function genId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function selectTab(tab: PanelTab) {
+  activeTab.value = tab;
+  error.value = '';
+  if (tab === 'history') {
+    if (!auth.token) {
+      auth.showLoginPrompt(route.fullPath);
+      activeTab.value = slip.mode;
+      return;
+    }
+    if (showMatchHistoryFilter.value) {
+      historyScope.value = 'match';
+    }
+    void loadHistory(true);
+    return;
+  }
+  slip.setMode(tab);
+  syncStakeInputFromSlip();
+}
+
+function selectHistoryScope(scope: 'all' | 'match') {
+  if (historyScope.value === scope) return;
+  historyScope.value = scope;
+  void loadHistory(true);
+}
+
+async function loadHistory(reset = false) {
+  if (!auth.token || activeTab.value !== 'history') return;
+  if (historyLoading.value) return;
+  if (reset) {
+    historyPage.value = 1;
+    historyInitialLoading.value = true;
+  }
+  historyLoading.value = true;
+  try {
+    const params: Record<string, unknown> = {
+      page: historyPage.value,
+      pageSize: historyPageSize,
+    };
+    if (historyScope.value === 'match' && currentMatchId.value) {
+      params.matchId = currentMatchId.value;
+    }
+    const { data } = await api.get('/player/bets', { params });
+    const result = data.data ?? { items: [], total: 0 };
+    const items = (result.items ?? []) as BetHistoryItem[];
+    historyTotal.value = result.total ?? 0;
+    historyItems.value = reset ? items : [...historyItems.value, ...items];
+  } catch {
+    if (reset) {
+      historyItems.value = [];
+      historyTotal.value = 0;
+    }
+  } finally {
+    historyLoading.value = false;
+    historyInitialLoading.value = false;
+  }
+}
+
+function loadMoreHistory() {
+  if (!historyHasMore.value || historyLoading.value) return;
+  historyPage.value += 1;
+  void loadHistory(false);
+}
+
+function historyStatusLabel(status: string) {
+  const s = status.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return t('history.status_won');
+  if (s === 'LOST' || s === 'LOSE') return t('history.status_lost');
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return t('history.status_push');
+  return t('history.status_pending');
+}
+
+function historyStatusClass(status: string) {
+  const s = status.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'hist-won';
+  if (s === 'LOST' || s === 'LOSE') return 'hist-lost';
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'hist-push';
+  return 'hist-pending';
+}
+
+function historyPickLabel(bet: BetHistoryItem) {
+  if (bet.betType === 'PARLAY' || bet.isParlay) {
+    const n = bet.legCount ?? bet.legs?.length ?? 0;
+    return n > 0 ? t('history.parlay_title', { n }) : t('history.parlay_league');
+  }
+  return bet.pickLabel || bet.matchTitle || '-';
+}
+
+function removeItem(id: string) {
+  slip.removeItem(id);
+  error.value = '';
+}
+
+function locateSlipItem(item: SlipItem) {
+  const isOutright = item.marketType === 'OUTRIGHT_WINNER';
+  const targetPath = isOutright ? `/outright/${item.matchId}` : `/match/${item.matchId}`;
+  requestLocate({
+    matchId: item.matchId,
+    selectionId: item.selectionId,
+    marketId: item.marketId,
+    marketType: item.marketType,
+  });
+  if (route.path !== targetPath) {
+    void router.push(targetPath);
+  }
+}
+
+function clearActiveSlip() {
+  error.value = '';
+  oddsDeltas.value = {};
+  if (activeTab.value === 'parlay') {
+    slip.clearParlay();
+  } else if (activeTab.value === 'single') {
+    slip.clearSingle();
+  }
+  syncStakeInputFromSlip();
+}
+
+function stakeAmountToInput(amount: number) {
+  if (!Number.isFinite(amount) || amount <= 0) return '';
+  const rounded = Math.round(amount * 100) / 100;
+  return Number.isInteger(rounded)
+    ? String(rounded)
+    : rounded.toFixed(2).replace(/0+$/, '').replace(/\.$/, '');
+}
+
+function sanitizeStakeInput(raw: string) {
+  const onlyAmountChars = raw.replace(/[^\d.]/g, '');
+  const [integerRaw, ...fractionParts] = onlyAmountChars.split('.');
+  const integerPart = integerRaw.replace(/^0+(?=\d)/, '').slice(0, MAX_STAKE_INTEGER_LENGTH);
+  if (!fractionParts.length) return integerPart;
+  const fractionPart = fractionParts.join('').slice(0, 2);
+  return `${integerPart || '0'}.${fractionPart}`;
+}
+
+function commitStakeInput(raw: string) {
+  const clean = sanitizeStakeInput(raw);
+  stakeInput.value = clean;
+  const amount = Number.parseFloat(clean);
+  slip.stake = Number.isFinite(amount) ? amount : 0;
+}
+
+function syncItemStakeInputs(items: SlipItem[]) {
+  const next: Record<string, string> = {};
+  for (const item of items) {
+    slip.initItemStake(item.selectionId);
+    next[item.selectionId] = stakeAmountToInput(slip.getItemStake(item.selectionId));
+  }
+  itemStakeInputs.value = next;
+}
+
+function itemStakeInputValue(selectionId: string) {
+  if (!(selectionId in itemStakeInputs.value)) {
+    slip.initItemStake(selectionId);
+    itemStakeInputs.value = {
+      ...itemStakeInputs.value,
+      [selectionId]: stakeAmountToInput(slip.getItemStake(selectionId)),
+    };
+  }
+  return itemStakeInputs.value[selectionId];
+}
+
+function onItemStakeInput(selectionId: string, event: Event) {
+  const clean = sanitizeStakeInput((event.target as HTMLInputElement).value);
+  itemStakeInputs.value = { ...itemStakeInputs.value, [selectionId]: clean };
+  const amount = Number.parseFloat(clean);
+  slip.setItemStake(selectionId, Number.isFinite(amount) ? amount : 0);
+}
+
+function clearItemStakeInput(selectionId: string) {
+  itemStakeInputs.value = { ...itemStakeInputs.value, [selectionId]: '' };
+  slip.setItemStake(selectionId, 0);
+}
+
+function addItemStake(selectionId: string, amount: number) {
+  const next = (slip.getItemStake(selectionId) || 0) + amount;
+  const normalized = Math.round(Math.max(MIN_STAKE, next) * 100) / 100;
+  slip.setItemStake(selectionId, normalized);
+  itemStakeInputs.value = {
+    ...itemStakeInputs.value,
+    [selectionId]: stakeAmountToInput(normalized),
+  };
+}
+
+function setItemMaxStake(selectionId: string) {
+  if (balance.value == null || balance.value <= 0) return;
+  const normalized = Math.round(balance.value * 100) / 100;
+  slip.setItemStake(selectionId, normalized);
+  itemStakeInputs.value = {
+    ...itemStakeInputs.value,
+    [selectionId]: stakeAmountToInput(normalized),
+  };
+}
+
+function itemEstReturn(item: SlipItem) {
+  const s = slip.getItemStake(item.selectionId);
+  if (!Number.isFinite(s) || s <= 0) return 0;
+  return s * effectiveOdds(item);
+}
+
+function syncStakeInputFromSlip() {
+  stakeInput.value = stakeAmountToInput(Number(slip.stake) || 0);
+  if (activeTab.value === 'single') {
+    syncItemStakeInputs(singleSlipItems.value);
+  }
+}
+
+function onStakeInput(event: Event) {
+  commitStakeInput((event.target as HTMLInputElement).value);
+}
+
+function clearStakeInput() {
+  commitStakeInput('');
+}
+
+function setStake(amount: number, enforceMinimum = true) {
+  if (!Number.isFinite(amount)) return;
+  const normalized = Math.round((enforceMinimum ? Math.max(MIN_STAKE, amount) : amount) * 100) / 100;
+  slip.stake = normalized;
+  stakeInput.value = stakeAmountToInput(normalized);
+}
+
+function addStake(amount: number) {
+  setStake((Number(slip.stake) || 0) + amount);
+}
+
+function setMaxStake() {
+  if (balance.value != null && balance.value > 0) setStake(balance.value, false);
+}
+
+function stopOddsPolling() {
+  if (oddsPollTimer) {
+    clearInterval(oddsPollTimer);
+    oddsPollTimer = null;
+  }
+  oddsDeltas.value = {};
+}
+
+function acceptPendingOdds() {
+  for (const [selectionId, delta] of Object.entries(oddsDeltas.value)) {
+    if (!delta.suspended) {
+      slip.updateSelectionOdds(selectionId, delta.newOdds, delta.newVersion);
+    }
+  }
+  oddsDeltas.value = {};
+}
+
+function acceptPendingOddsForSelection(selectionId: string) {
+  const delta = oddsDeltas.value[selectionId];
+  if (!delta || delta.suspended) return;
+  slip.updateSelectionOdds(selectionId, delta.newOdds, delta.newVersion);
+  const next = { ...oddsDeltas.value };
+  delete next[selectionId];
+  oddsDeltas.value = next;
+}
+
+function isItemSuspended(item: SlipItem) {
+  return Boolean(oddsDeltaFor(item.selectionId)?.suspended);
+}
+
+function canPlaceSingleItem(item: SlipItem) {
+  if (item.allowSingle === false) return false;
+  if (isItemSuspended(item)) return false;
+  return slip.getItemStake(item.selectionId) >= MIN_STAKE;
+}
+
+function validateSingleItemPlace(item: SlipItem): boolean {
+  if (!auth.token) {
+    auth.showLoginPrompt();
+    return false;
+  }
+  if (item.allowSingle === false) {
+    error.value = t('bet.slip_parlay_only_hint');
+    return false;
+  }
+  const itemStake = slip.getItemStake(item.selectionId);
+  if (itemStake < MIN_STAKE) {
+    error.value = t('bet.slip_min_error', { amount: MIN_STAKE });
+    return false;
+  }
+  if (balance.value != null && itemStake > balance.value) {
+    error.value = t('bet.outright_insufficient');
+    return false;
+  }
+  if (isItemSuspended(item)) {
+    error.value = t('bet.odds_suspended');
+    return false;
+  }
+  return true;
+}
+
+function onPlaceSingleItemClick(item: SlipItem) {
+  error.value = '';
+  if (!validateSingleItemPlace(item)) return;
+  if (oddsDeltaFor(item.selectionId) && !isItemSuspended(item)) {
+    acceptPendingOddsForSelection(item.selectionId);
+  }
+  pendingSingleItem.value = item;
+  const stake = slip.getItemStake(item.selectionId);
+  placeConfirmMessage.value = buildBetPlaceConfirmMessage(t, {
+    mode: 'single',
+    items: [item],
+    totalStake: stake,
+    totalReturn: stake * effectiveOdds(item),
+    formatMoney: (amount) => formatMoney(amount, locale.value),
+    getStake: () => stake,
+    getOdds: () => effectiveOdds(item),
+  });
+  showPlaceConfirm.value = true;
+}
+
+async function pollSelectionsOdds() {
+  const items = activeItems.value;
+  if (!items.length) return;
+
+  try {
+    const ids = items.map((item) => item.selectionId).join(',');
+    const { data } = await api.get('/player/selections/odds', { params: { ids } });
+    const rows: SelectionOddsRow[] = data.data?.items ?? [];
+    const rowMap = new Map(rows.map((row) => [row.id, row]));
+    const next: Record<string, OddsDelta> = {};
+
+    for (const item of items) {
+      const row = rowMap.get(item.selectionId);
+      if (!row) continue;
+
+      const suspended =
+        row.status !== 'OPEN' ||
+        row.marketStatus !== 'OPEN' ||
+        row.marketShowOnPlayer === false ||
+        row.matchStatus !== 'PUBLISHED';
+      const newOdds = parseFloat(row.odds);
+      const versionChanged = row.oddsVersion !== item.oddsVersion;
+      const oddsChanged = Number.isFinite(newOdds) && Math.abs(newOdds - item.odds) > 0.0001;
+
+      if (suspended || versionChanged || oddsChanged) {
+        const existing = oddsDeltas.value[item.selectionId];
+        next[item.selectionId] = {
+          oldOdds: existing?.oldOdds ?? item.odds,
+          newOdds: Number.isFinite(newOdds) ? newOdds : item.odds,
+          newVersion: row.oddsVersion,
+          suspended,
+        };
+      }
+    }
+
+    oddsDeltas.value = next;
+  } catch {
+    /* silent retry */
+  }
+}
+
+function startOddsPolling() {
+  stopOddsPolling();
+  void pollSelectionsOdds();
+  oddsPollTimer = setInterval(() => {
+    void pollSelectionsOdds();
+  }, ODDS_POLL_MS);
+}
+
+function oddsDeltaFor(selectionId: string) {
+  return oddsDeltas.value[selectionId];
+}
+
+function oddsTrendClass(delta: OddsDelta) {
+  if (delta.suspended) return 'odds-suspended';
+  return delta.newOdds >= delta.oldOdds ? 'odds-up' : 'odds-down';
+}
+
+function singlesForSubmit() {
+  return [...singleSlipItems.value];
+}
+
+function validatePlaceBet(): boolean {
+  if (!activeItems.value.length) return false;
+  if (!auth.token) {
+    auth.showLoginPrompt();
+    return false;
+  }
+  if (activeTab.value === 'parlay') {
+    if (slip.stake < MIN_STAKE) {
+      error.value = t('bet.slip_min_error', { amount: MIN_STAKE });
+      return false;
+    }
+    if (balance.value != null && slip.stake > balance.value) {
+      error.value = t('bet.outright_insufficient');
+      return false;
+    }
+  } else {
+    const singles = singlesForSubmit();
+    let totalStake = 0;
+    for (const item of singles) {
+      const itemStake = slip.getItemStake(item.selectionId);
+      if (itemStake < MIN_STAKE) {
+        error.value = t('bet.slip_min_error', { amount: MIN_STAKE });
+        return false;
+      }
+      totalStake += itemStake;
+    }
+    if (balance.value != null && totalStake > balance.value) {
+      error.value = t('bet.outright_insufficient');
+      return false;
+    }
+  }
+  if (activeTab.value === 'parlay' && !canSubmitActive.value) {
+    error.value = slip.parlayItems.length > PARLAY_MAX_LEGS
+      ? t('bet.parlay_max_legs')
+      : t('bet.parlay_need_more');
+    return false;
+  }
+  if (hasSuspendedSelections.value) {
+    error.value = t('bet.odds_suspended');
+    return false;
+  }
+  return true;
+}
+
+function onPlaceBetClick() {
+  error.value = '';
+  if (!validatePlaceBet()) return;
+  if (hasPendingOddsChanges.value) {
+    acceptPendingOdds();
+  }
+  pendingSingleItem.value = null;
+  const singles = singlesForSubmit();
+  placeConfirmMessage.value = buildBetPlaceConfirmMessage(t, {
+    mode: activeTab.value === 'parlay' ? 'parlay' : 'single',
+    items: activeTab.value === 'parlay' ? [...slip.parlayItems] : singles,
+    totalStake: activeTotalStake.value,
+    totalReturn: activeEstimatedReturn.value,
+    totalOdds: activeTab.value === 'parlay' ? activeTotalOdds.value : undefined,
+    formatMoney: (amount) => formatMoney(amount, locale.value),
+    getStake: (item) => slip.getItemStake(item.selectionId),
+    getOdds: (item) => effectiveOdds(item),
+  });
+  showPlaceConfirm.value = true;
+}
+
+async function executePlaceSingleItem(item: SlipItem) {
+  loading.value = true;
+  error.value = '';
+  success.value = '';
+
+  try {
+    await api.post('/player/bets/single', {
+      selectionId: item.selectionId,
+      oddsVersion: item.oddsVersion,
+      stake: slip.getItemStake(item.selectionId),
+      requestId: genId(),
+    });
+    slip.removeItem(item.selectionId);
+    success.value = t('bet.place_success');
+    showSuccess.value = true;
+    await Promise.all([loadBalance(), refreshProfile()]);
+    setTimeout(() => {
+      if (showSuccess.value) onSuccessDone();
+    }, 2200);
+  } catch (e: unknown) {
+    error.value =
+      (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
+      t('bet.place_failed');
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function executePlaceBet() {
+  loading.value = true;
+  error.value = '';
+  success.value = '';
+
+  try {
+    if (activeTab.value === 'parlay') {
+      await api.post('/player/bets/parlay', {
+        legs: slip.parlayItems.map((item) => ({
+          selectionId: item.selectionId,
+          oddsVersion: item.oddsVersion,
+        })),
+        stake: slip.stake,
+        requestId: genId(),
+      });
+      slip.clearParlay();
+    } else {
+      for (const item of singlesForSubmit()) {
+        await api.post('/player/bets/single', {
+          selectionId: item.selectionId,
+          oddsVersion: item.oddsVersion,
+          stake: slip.getItemStake(item.selectionId),
+          requestId: genId(),
+        });
+      }
+      slip.clearSingle();
+    }
+    success.value = t('bet.place_success');
+    showSuccess.value = true;
+    if (activeTab.value === 'history') {
+      void loadHistory(true);
+    }
+    await Promise.all([loadBalance(), refreshProfile()]);
+    setTimeout(() => {
+      if (showSuccess.value) onSuccessDone();
+    }, 2200);
+  } catch (e: unknown) {
+    error.value =
+      (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
+      t('bet.place_failed');
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function confirmPlaceBet() {
+  showPlaceConfirm.value = false;
+  const singleItem = pendingSingleItem.value;
+  pendingSingleItem.value = null;
+  if (singleItem) {
+    await executePlaceSingleItem(singleItem);
+    return;
+  }
+  await executePlaceBet();
+}
+
+function onSuccessDone() {
+  showSuccess.value = false;
+  error.value = '';
+  success.value = '';
+  syncStakeInputFromSlip();
+}
+
+async function loadBalance() {
+  if (!auth.token) {
+    balance.value = null;
+    return;
+  }
+  balanceLoading.value = true;
+  try {
+    const { data } = await api.get('/player/profile');
+    balance.value = parseAmount(data.data?.wallet?.availableBalance);
+  } catch {
+    balance.value = null;
+  } finally {
+    balanceLoading.value = false;
+  }
+}
+
+function parlayErrorMessage(reason: ParlaySlipError) {
+  if (reason === 'MAX_LEGS') return t('bet.parlay_max_legs');
+  if (reason === 'QUARTER_LINE') return t('bet.parlay_block_quarter');
+  if (reason === 'OUTRIGHT') return t('bet.parlay_block_outright');
+  if (reason === 'NOT_ALLOWED') return t('bet.parlay_block_not_allowed');
+  if (reason === 'SAME_MATCH') return t('bet.slip_parlay_same_match');
+  return t('bet.parlay_block_not_allowed');
+}
+
+function addItemToParlay(item: SlipItem) {
+  if (!auth.token) {
+    auth.showLoginPrompt(route.fullPath);
+    return;
+  }
+  if (slip.parlayItems.some((leg) => leg.selectionId === item.selectionId)) {
+    activeTab.value = 'parlay';
+    slip.setMode('parlay');
+    error.value = '';
+    return;
+  }
+  const err = slip.addParlayLeg(item);
+  activeTab.value = 'parlay';
+  slip.setMode('parlay');
+  if (err) {
+    error.value = parlayErrorMessage(err);
+    return;
+  }
+  error.value = '';
+}
+
+function isItemInParlay(item: SlipItem) {
+  return slip.parlayItems.some((leg) => leg.selectionId === item.selectionId);
+}
+
+function parlayActionLabel(item: SlipItem) {
+  return isItemInParlay(item) ? t('bet.slip_parlay_added_short') : t('bet.add_to_parlay');
+}
+
+function addCurrentToParlay() {
+  if (singleInParlay.value) {
+    activeTab.value = 'parlay';
+    slip.setMode('parlay');
+    error.value = '';
+    return;
+  }
+  const err = slip.addSingleToParlay();
+  activeTab.value = 'parlay';
+  slip.setMode('parlay');
+  if (err) {
+    error.value = parlayErrorMessage(err);
+    return;
+  }
+  error.value = '';
+}
+
+watch(
+  () => activeItems.value.map((item) => item.selectionId).join(','),
+  (ids) => {
+    if (ids) {
+      if (activeTab.value === 'single') syncItemStakeInputs(singleSlipItems.value);
+      startOddsPolling();
+    } else {
+      itemStakeInputs.value = {};
+      stopOddsPolling();
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => slip.mode,
+  (mode) => {
+    if (activeTab.value !== 'history') activeTab.value = mode;
+  },
+);
+
+watch(showMatchHistoryFilter, (show) => {
+  if (!show && historyScope.value === 'match') {
+    historyScope.value = 'all';
+    if (activeTab.value === 'history') void loadHistory(true);
+  }
+});
+
+watch(currentMatchId, (id, prev) => {
+  if (activeTab.value !== 'history') return;
+  if (id && id !== prev && historyScope.value === 'match') {
+    void loadHistory(true);
+  }
+  if (!id && historyScope.value === 'match') {
+    historyScope.value = 'all';
+    void loadHistory(true);
+  }
+});
+
+watch(
+  () => auth.token,
+  (token) => {
+    if (!token && activeTab.value === 'history') {
+      activeTab.value = slip.mode;
+      historyItems.value = [];
+      historyTotal.value = 0;
+    }
+  },
+);
+
+onMounted(() => {
+  activeTab.value = slip.mode;
+  if (activeTab.value === 'single' && !slip.singleItem && slip.parlayItems.length) {
+    activeTab.value = 'parlay';
+    slip.setMode('parlay');
+  }
+  syncStakeInputFromSlip();
+  void loadBalance();
+});
+
+onUnmounted(() => {
+  stopOddsPolling();
+});
+</script>
+
+<template>
+  <div class="betslip-panel">
+    <div class="panel-head">
+      <h3>{{ t('bet.bet_slip') || '投注单' }}</h3>
+    </div>
+
+    <div class="panel-tabs">
+      <button
+        type="button"
+        class="tab-btn"
+        :class="{ active: activeTab === 'single' }"
+        @click="selectTab('single')"
+      >
+        {{ t('bet.slip_tab_single') }}
+        <span v-if="slip.singleCount" class="badge">{{ slip.singleCount }}</span>
+      </button>
+      <button
+        type="button"
+        class="tab-btn"
+        :class="{ active: activeTab === 'parlay' }"
+        @click="selectTab('parlay')"
+      >
+        {{ t('bet.slip_tab_parlay') }}
+        <span v-if="slip.parlayCount" class="badge">{{ slip.parlayCount }}</span>
+      </button>
+      <button
+        type="button"
+        class="tab-btn"
+        :class="{ active: activeTab === 'history' }"
+        @click="selectTab('history')"
+      >
+        {{ t('bet.slip_tab_history') }}
+      </button>
+    </div>
+
+    <div v-if="activeTab === 'history' && showMatchHistoryFilter" class="history-scope-bar">
+      <button
+        type="button"
+        class="scope-chip"
+        :class="{ active: historyScope === 'all' }"
+        @click="selectHistoryScope('all')"
+      >
+        {{ t('bet.slip_history_all') }}
+      </button>
+      <button
+        type="button"
+        class="scope-chip"
+        :class="{ active: historyScope === 'match' }"
+        @click="selectHistoryScope('match')"
+      >
+        {{ t('bet.slip_history_match') }}
+      </button>
+    </div>
+
+    <!-- Warnings -->
+    <p v-if="activeTab !== 'history' && oddsWarningText" class="odds-warning">{{ oddsWarningText }}</p>
+
+    <!-- Body -->
+    <div class="panel-body">
+      <template v-if="activeTab === 'history'">
+        <div v-if="historyInitialLoading" class="history-loading">
+          <GoldSpinner :size="28" />
+        </div>
+        <div v-else-if="!historyItems.length" class="empty-state">
+          <svg class="empty-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2zm0-4H7V7h10v2zm0 8H7v-2h10v2z" fill="currentColor"/>
+          </svg>
+          <p>{{ t('history.empty') }}</p>
+        </div>
+        <div v-else class="history-list">
+          <RouterLink
+            v-for="bet in historyItems"
+            :key="bet.betNo"
+            :to="`/bets/${bet.betNo}`"
+            class="history-card"
+          >
+            <div class="history-card-top">
+              <span class="history-pick">{{ historyPickLabel(bet) }}</span>
+              <span class="history-status" :class="historyStatusClass(bet.status)">
+                {{ historyStatusLabel(bet.status) }}
+              </span>
+            </div>
+            <div v-if="historyScope === 'all' && bet.matchTitle" class="history-match">
+              {{ bet.matchTitle }}
+            </div>
+            <div class="history-card-foot">
+              <span class="history-stake">{{ t('history.stake') }} {{ formatMoney(bet.stake, locale) }}</span>
+              <span class="history-return" :class="historyStatusClass(bet.status)">
+                {{ formatMoney(bet.actualReturn || bet.potentialReturn, locale) }}
+              </span>
+            </div>
+            <div class="history-meta">
+              <span>{{ bet.betNo }}</span>
+              <span>{{ bet.placedAt ? new Date(bet.placedAt).toLocaleString(locale) : '' }}</span>
+            </div>
+          </RouterLink>
+        </div>
+        <button
+          v-if="historyHasMore && !historyInitialLoading"
+          type="button"
+          class="history-load-more"
+          :disabled="historyLoading"
+          @click="loadMoreHistory"
+        >
+          {{ historyLoading ? t('bet.loading') : t('bet.slip_history_load_more') }}
+        </button>
+      </template>
+
+      <template v-else>
+      <div v-if="!activeItems.length" class="empty-state">
+        <svg class="empty-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2zm0-4H7V7h10v2zm0 8H7v-2h10v2z" fill="currentColor"/>
+        </svg>
+        <p>{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}</p>
+      </div>
+
+      <div v-else class="items-list">
+        <p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning">{{ parlayWarning }}</p>
+        <div
+          v-for="item in activeItems"
+          :key="item.selectionId"
+          class="slip-card"
+        >
+          <div class="card-top">
+            <div class="card-meta">
+              <span class="match-name">{{ item.matchName }}</span>
+              <span class="card-market">{{ item.marketName }}</span>
+            </div>
+            <div class="card-actions">
+              <button type="button" class="del-btn" @click="removeItem(item.selectionId)">✕</button>
+              <button
+                type="button"
+                class="locate-btn"
+                :title="t('bet.slip_locate')"
+                :aria-label="t('bet.slip_locate_aria')"
+                @click="locateSlipItem(item)"
+              >
+                <svg class="locate-icon" viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="card-selection-row">
+            <span class="selection-name">{{ item.selectionName }}</span>
+            <span class="odds-value">
+              <template v-if="oddsDeltaFor(item.selectionId)">
+                <span class="odds-change" :class="oddsTrendClass(oddsDeltaFor(item.selectionId)!)">
+                  {{ oddsDeltaFor(item.selectionId)!.oldOdds.toFixed(2) }} →
+                  {{ oddsDeltaFor(item.selectionId)!.newOdds.toFixed(2) }}
+                </span>
+              </template>
+              <template v-else>{{ item.odds.toFixed(2) }}</template>
+            </span>
+          </div>
+
+          <div v-if="activeTab === 'single'" class="card-stake-block">
+            <div class="card-stake-inline">
+              <div class="card-stake-input-box">
+                <input
+                  :value="itemStakeInputValue(item.selectionId)"
+                  type="number"
+                  class="card-stake-input"
+                  :placeholder="t('bet.stake_placeholder') || '金额'"
+                  @input="onItemStakeInput(item.selectionId, $event)"
+                />
+                <button
+                  v-if="itemStakeInputValue(item.selectionId)"
+                  type="button"
+                  class="clear-input-btn"
+                  @click="clearItemStakeInput(item.selectionId)"
+                >
+                  ✕
+                </button>
+              </div>
+              <button type="button" class="chip-btn mini" @click="addItemStake(item.selectionId, 50)">+50</button>
+              <button type="button" class="chip-btn mini" @click="addItemStake(item.selectionId, 100)">+100</button>
+              <button type="button" class="chip-btn mini" @click="setItemMaxStake(item.selectionId)">
+                {{ t('bet.stake_max') || '全' }}
+              </button>
+            </div>
+            <div
+              class="card-action-row"
+              :class="{
+                'card-action-row--single': item.allowParlay === false || item.allowSingle === false,
+              }"
+            >
+              <button
+                v-if="item.allowSingle !== false"
+                type="button"
+                class="card-action-btn card-single-btn"
+                :disabled="loading || !canPlaceSingleItem(item)"
+                @click="onPlaceSingleItemClick(item)"
+              >
+                {{ t('bet.slip_place_single') }}
+              </button>
+              <button
+                v-if="item.allowParlay !== false"
+                type="button"
+                class="card-action-btn card-parlay-btn"
+                :class="{ active: isItemInParlay(item) }"
+                @click="addItemToParlay(item)"
+              >
+                <span class="card-parlay-btn-icon" aria-hidden="true">{{ isItemInParlay(item) ? '✓' : '+' }}</span>
+                <span>{{ isItemInParlay(item) ? t('bet.slip_parlay_added_btn') : t('bet.add_to_parlay') }}</span>
+              </button>
+            </div>
+            <div class="card-est-row">
+              <span class="est-lbl">{{ t('bet.slip_est_return') }}</span>
+              <span class="est-val">{{ formatMoney(itemEstReturn(item), locale) }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="activeTab === 'parlay' && slip.parlayItems.length" class="parlay-summary">
+          <span>{{ t('bet.slip_parlay_count', { n: slip.parlayItems.length }) }}</span>
+          <span class="parlay-odds">{{ t('bet.slip_parlay_odds', { odds: totalOddsText }) }}</span>
+        </div>
+      </div>
+
+      <!-- Stake input (parlay only) -->
+      <div v-if="activeTab === 'parlay' && activeItems.length" class="stake-control">
+        <div class="stake-input-box">
+            <span class="currency">{{ t('bet.slip_currency') || 'CNY' }}</span>
+            <input
+              v-model="stakeInput"
+              type="number"
+              class="stake-input"
+              :placeholder="t('bet.stake') || '输入金额'"
+              @input="onStakeInput"
+            />
+            <button v-if="stakeInput" type="button" class="clear-input-btn" @click="clearStakeInput">✕</button>
+          </div>
+
+          <div class="quick-chips">
+            <button type="button" class="chip-btn" @click="addStake(50)">+50</button>
+            <button type="button" class="chip-btn" @click="addStake(100)">+100</button>
+            <button type="button" class="chip-btn" @click="addStake(500)">+500</button>
+            <button type="button" class="chip-btn" @click="setMaxStake">{{ t('bet.stake_max') || '最大' }}</button>
+          </div>
+      </div>
+
+      <p v-if="error" class="panel-error-msg">{{ error }}</p>
+      <p v-if="success" class="panel-success-msg">{{ success }}</p>
+      </template>
+    </div>
+
+    <div v-if="activeTab === 'history'" class="panel-bottom-fixed panel-bottom-history">
+      <RouterLink to="/bets" class="history-view-all-btn">
+        {{ t('bet.slip_history_view_all') }}
+      </RouterLink>
+    </div>
+
+    <div v-else-if="activeItems.length" class="panel-bottom-fixed">
+      <div class="panel-summary">
+        <div class="summary-row">
+          <span class="lbl">{{ t('bet.slip_total_stake') }}</span>
+          <span class="val">{{ stakeText }}</span>
+        </div>
+        <div class="summary-row est-return">
+          <span class="lbl">{{ t('bet.slip_est_return') }}</span>
+          <span class="val">{{ estimatedReturnText }}</span>
+        </div>
+      </div>
+      <div class="panel-foot">
+        <button type="button" class="clear-slip-btn foot-clear" @click="clearActiveSlip">
+          {{ t('bet.slip_clear') }}
+        </button>
+        <button
+          type="button"
+          class="submit-btn"
+          :disabled="loading || !canSubmitWithOdds"
+          @click="onPlaceBetClick"
+        >
+          {{ submitButtonLabel }}
+        </button>
+      </div>
+    </div>
+
+    <ConfirmDialog
+      v-model:visible="showPlaceConfirm"
+      :title="t('bet.place_confirm_title')"
+      :message="placeConfirmMessage"
+      :confirm-text="t('bet.place_bet')"
+      :cancel-text="t('common.cancel')"
+      :loading="loading"
+      @confirm="confirmPlaceBet"
+    />
+
+    <!-- Success Overlay -->
+    <BetSuccessOverlay :show="showSuccess" @done="onSuccessDone" />
+  </div>
+</template>
+
+<style scoped>
+.betslip-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgba(16, 16, 16, 0.95);
+}
+
+.panel-head {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.panel-head h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.clear-slip-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.clear-slip-btn.foot-clear {
+  flex: 0 0 20%;
+  min-width: 0;
+  padding: 10px 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.clear-slip-btn:hover {
+  color: var(--primary-light);
+  border-color: var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.06);
+}
+
+.balance-info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+}
+
+.balance-info .lbl {
+  color: var(--text-muted);
+}
+
+.balance-info .val {
+  color: var(--text);
+  font-weight: 700;
+}
+
+.refresh-btn {
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 12px;
+  line-height: 1;
+  padding: 0 2px;
+}
+
+.panel-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
+
+.tab-btn {
+  flex: 1;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px 4px;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.tab-btn:hover {
+  color: var(--text);
+}
+
+.tab-btn.active {
+  color: var(--primary-light);
+  border-bottom-color: var(--primary);
+}
+
+.badge {
+  background: var(--primary);
+  color: #111;
+  font-size: 9px;
+  font-weight: 800;
+  padding: 1px 4px;
+  border-radius: 6px;
+  line-height: 1;
+}
+
+.odds-warning {
+  background: rgba(212, 175, 55, 0.12);
+  border-bottom: 1px solid var(--border-gold-soft);
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 8px 16px;
+  margin: 0;
+  text-align: center;
+}
+
+.panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 12px;
+  min-height: 0;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60%;
+  color: var(--text-muted);
+  gap: 12px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.empty-icon {
+  width: 32px;
+  height: 32px;
+  opacity: 0.3;
+}
+
+.items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.slip-card {
+  background: #1e1e1e;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 7px 8px;
+  position: relative;
+  transition: border-color 0.2s;
+}
+
+.slip-card:hover {
+  border-color: var(--border-gold-soft);
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.card-meta {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.match-name {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-market {
+  font-size: 10px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.del-btn {
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 10px;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+.card-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.locate-btn {
+  background: transparent;
+  color: var(--text-muted);
+  padding: 0 2px;
+  line-height: 1;
+  display: flex;
+}
+
+.locate-btn:hover {
+  color: var(--primary-light);
+}
+
+.locate-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.del-btn:hover {
+  color: var(--danger);
+}
+
+.card-selection-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.selection-name {
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.odds-value {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+  flex-shrink: 0;
+}
+
+.odds-change {
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+
+.odds-up {
+  background: rgba(46, 204, 113, 0.15);
+  color: #2ecc71;
+}
+
+.odds-down {
+  background: rgba(231, 76, 60, 0.15);
+  color: #e74c3c;
+}
+
+.odds-suspended {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-muted);
+  text-decoration: line-through;
+}
+
+.card-stake-block {
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.card-stake-inline {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.card-stake-input-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background: #0d0d0d;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0 6px;
+  height: 26px;
+  min-width: 0;
+}
+
+.card-stake-input {
+  flex: 1;
+  background: transparent;
+  border: none !important;
+  color: #fff;
+  padding: 0;
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 0;
+}
+
+.card-stake-input::-webkit-outer-spin-button,
+.card-stake-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.chip-btn.mini {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  height: 26px;
+  font-size: 9px;
+  min-width: 32px;
+}
+
+.card-action-row {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.card-action-row--single .card-action-btn {
+  flex: 1 1 100%;
+}
+
+.card-action-btn {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.2;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
+}
+
+.card-action-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.card-single-btn {
+  border: 1px solid rgba(212, 175, 55, 0.55);
+  background: rgba(212, 175, 55, 0.14);
+  color: var(--primary-light);
+}
+
+.card-single-btn:hover:not(:disabled) {
+  background: rgba(212, 175, 55, 0.22);
+  border-color: var(--border-gold);
+  color: #fff;
+}
+
+.card-parlay-btn {
+  border: 1px dashed rgba(212, 175, 55, 0.45);
+  background: rgba(212, 175, 55, 0.04);
+  color: var(--primary-light);
+}
+
+.card-parlay-btn:hover:not(:disabled) {
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+  color: #fff;
+}
+
+.card-parlay-btn.active {
+  border-style: solid;
+  border-color: rgba(212, 175, 55, 0.35);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-muted);
+}
+
+.card-parlay-btn.active:hover {
+  color: var(--primary-light);
+  border-color: var(--border-gold-soft);
+}
+
+.card-parlay-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: rgba(212, 175, 55, 0.16);
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 800;
+}
+
+.card-parlay-btn.active .card-parlay-btn-icon {
+  background: rgba(46, 204, 113, 0.18);
+  color: #2ecc71;
+}
+
+.card-est-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 9px;
+  line-height: 1.2;
+}
+
+.card-est-row .est-lbl {
+  color: var(--text-muted);
+}
+
+.card-est-row .est-val {
+  color: var(--primary-light);
+  font-weight: 800;
+}
+
+.panel-warning {
+  font-size: 11px;
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
+  border: 1px solid var(--border-gold-soft);
+  border-radius: 4px;
+  padding: 8px;
+  margin: 6px 0;
+}
+
+.parlay-summary {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  padding: 4px 6px;
+  background: #141414;
+  border-radius: 4px;
+}
+
+.parlay-odds {
+  color: var(--primary-light);
+}
+
+.stake-control {
+  background: #141414;
+  border-radius: 4px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stake-input-box {
+  display: flex;
+  align-items: center;
+  background: #0d0d0d;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 36px;
+}
+
+.currency {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--primary-light);
+  margin-right: 6px;
+}
+
+.stake-input {
+  flex: 1;
+  background: transparent;
+  border: none !important;
+  color: #fff;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.stake-input::-webkit-outer-spin-button,
+.stake-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.clear-input-btn {
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 12px;
+  padding: 0 4px;
+}
+
+.quick-chips {
+  display: flex;
+  gap: 6px;
+}
+
+.chip-btn {
+  flex: 1;
+  background: #1e1e1e;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 700;
+  padding: 5px 0;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.chip-btn:hover {
+  border-color: var(--border-gold-soft);
+  color: #fff;
+}
+
+.panel-error-msg {
+  color: var(--danger);
+  font-size: 11px;
+  font-weight: 600;
+  margin-top: 8px;
+}
+
+.panel-success-msg {
+  color: #2ecc71;
+  font-size: 11px;
+  font-weight: 600;
+  margin-top: 8px;
+}
+
+.panel-bottom-fixed {
+  flex-shrink: 0;
+  border-top: 1px solid var(--border);
+  background: rgba(16, 16, 16, 0.98);
+}
+
+.panel-summary {
+  padding: 10px 16px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-bottom: 1px solid var(--border);
+}
+
+.summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+}
+
+.summary-row .lbl {
+  color: var(--text-muted);
+}
+
+.summary-row .val {
+  color: var(--text);
+  font-weight: 700;
+}
+
+.summary-row.est-return .val {
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.panel-foot {
+  padding: 10px 16px 12px;
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.add-parlay-btn {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.2s;
+}
+
+.add-parlay-btn:hover {
+  background: rgba(212, 175, 55, 0.05);
+  border-color: var(--primary);
+}
+
+.submit-btn {
+  flex: 1;
+  min-width: 0;
+  padding: 10px;
+  border-radius: 4px;
+  background: linear-gradient(180deg, #F0D875 0%, #D4AF37 100%);
+  color: #3D2800;
+  font-size: 13px;
+  font-weight: 800;
+  text-transform: uppercase;
+  transition: opacity 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.submit-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  filter: saturate(0.5);
+}
+
+.history-view-all-btn {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.08);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 800;
+  text-align: center;
+  text-decoration: none;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.history-view-all-btn:hover {
+  background: rgba(212, 175, 55, 0.14);
+  border-color: var(--primary);
+}
+
+.panel-bottom-history {
+  padding: 10px 16px 12px;
+}
+
+.history-scope-bar {
+  display: flex;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.scope-chip {
+  flex: 1;
+  padding: 5px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.15s;
+}
+
+.scope-chip.active {
+  color: var(--primary-light);
+  border-color: var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.history-loading {
+  display: flex;
+  justify-content: center;
+  padding: 32px 0;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.history-card {
+  display: block;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: #1e1e1e;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.history-card:hover {
+  border-color: var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.04);
+}
+
+.history-card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.history-pick {
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1.35;
+  min-width: 0;
+}
+
+.history-status {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 800;
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+.history-status.hist-won {
+  color: #2ecc71;
+  background: rgba(46, 204, 113, 0.12);
+}
+
+.history-status.hist-lost {
+  color: #e74c3c;
+  background: rgba(231, 76, 60, 0.12);
+}
+
+.history-status.hist-push {
+  color: #95a5a6;
+  background: rgba(149, 165, 166, 0.12);
+}
+
+.history-status.hist-pending {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+}
+
+.history-match {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-card-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.history-stake {
+  color: var(--text-muted);
+}
+
+.history-return {
+  font-weight: 800;
+}
+
+.history-return.hist-won {
+  color: #2ecc71;
+}
+
+.history-return.hist-lost {
+  color: #e74c3c;
+}
+
+.history-return.hist-push,
+.history-return.hist-pending {
+  color: var(--primary-light);
+}
+
+.history-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 9px;
+  color: var(--text-muted);
+  opacity: 0.85;
+}
+
+.history-load-more {
+  width: 100%;
+  margin-top: 8px;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.history-load-more:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
diff --git a/apps/player/src/components/desktop/DataTable.vue b/apps/player/src/components/desktop/DataTable.vue
new file mode 100644
index 0000000..4df4261
--- /dev/null
+++ b/apps/player/src/components/desktop/DataTable.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+defineProps<{
+  headers: { key: string; label: string; align?: 'left' | 'right' | 'center' }[];
+  items: any[];
+  loading?: boolean;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="data-table-container">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th
+            v-for="h in headers"
+            :key="h.key"
+            :class="[`align-${h.align || 'left'}`]"
+          >
+            {{ h.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="loading && !items.length">
+          <td :colspan="headers.length" class="loading-cell">
+            <div class="skeleton-row desktop-skeleton" v-for="i in 3" :key="i"></div>
+          </td>
+        </tr>
+        <tr v-else-if="!items.length">
+          <td :colspan="headers.length" class="empty-cell">
+            {{ t('common.no_data') || '暂无数据' }}
+          </td>
+        </tr>
+        <tr
+          v-else
+          v-for="(item, idx) in items"
+          :key="item.id || idx"
+          class="table-row hover-bg"
+        >
+          <td
+            v-for="h in headers"
+            :key="h.key"
+            :class="[`align-${h.align || 'left'}`]"
+          >
+            <slot :name="h.key" :item="item" :index="idx">
+              {{ item[h.key] }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.data-table-container {
+  width: 100%;
+  overflow-x: auto;
+  background: rgba(20, 20, 20, 0.95);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  color: #ddd;
+}
+
+th {
+  background: #141414;
+  color: var(--text-muted);
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 11px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  letter-spacing: 0.04em;
+}
+
+td {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.table-row:last-child td {
+  border-bottom: none;
+}
+
+.table-row {
+  transition: background-color 0.15s;
+}
+
+.align-left { text-align: left; }
+.align-right { text-align: right; }
+.align-center { text-align: center; }
+
+.loading-cell {
+  padding: 20px;
+}
+
+.skeleton-row {
+  height: 28px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+}
+
+.skeleton-row:last-child {
+  margin-bottom: 0;
+}
+
+.empty-cell {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+</style>
diff --git a/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue b/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue
new file mode 100644
index 0000000..c03d518
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopBanner3DCarousel.vue
@@ -0,0 +1,468 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import type { BannerItem } from '../BannerCarousel.vue';
+import defaultBannerImg from '../../assets/images/banner.webp';
+
+const props = defineProps<{
+  banners: BannerItem[];
+  fallbackTo?: string;
+}>();
+
+const { t } = useI18n();
+const router = useRouter();
+const active = ref(0);
+const timer = ref<ReturnType<typeof setInterval> | null>(null);
+const FALLBACK_IMG = '/uploads/banners/welcome.svg';
+
+const slideCount = computed(() => props.banners.length);
+const canLoop = computed(() => slideCount.value > 1);
+
+function imageUrl(banner: BannerItem) {
+  return banner.translation?.imageUrl || defaultBannerImg || FALLBACK_IMG;
+}
+
+function onImgError(e: Event) {
+  const img = e.target as HTMLImageElement;
+  if (img.dataset.fallbackApplied) return;
+  img.dataset.fallbackApplied = '1';
+  img.src = defaultBannerImg || FALLBACK_IMG;
+}
+
+function title(banner: BannerItem) {
+  return banner.translation?.title || t('home.banner_fallback');
+}
+
+function normalizeOffset(index: number) {
+  const len = slideCount.value;
+  if (!len) return 0;
+  let offset = index - active.value;
+  if (offset > len / 2) offset -= len;
+  if (offset < -len / 2) offset += len;
+  return offset;
+}
+
+/** Coverflow：略重叠，中间卡片置顶 */
+function slideLayout(index: number) {
+  const offset = normalizeOffset(index);
+  const abs = Math.abs(offset);
+
+  if (abs > 1) {
+    return { hidden: true, offset, active: false };
+  }
+
+  const slotX = 50 + offset * 26;
+  const scale = offset === 0 ? 1 : 0.9;
+  const rotateY = offset === 0 ? 0 : offset < 0 ? 12 : -12;
+  const zIndex = offset === 0 ? 10 : 5;
+
+  return {
+    hidden: false,
+    offset,
+    active: offset === 0,
+    slotX,
+    scale,
+    rotateY,
+    zIndex,
+  };
+}
+
+function slideStyle(index: number) {
+  const layout = slideLayout(index);
+  if (layout.hidden) {
+    return {
+      left: '50%',
+      transform: 'translate(-50%, -50%) scale(0.7)',
+      opacity: '0',
+      zIndex: '0',
+      pointerEvents: 'none' as const,
+    };
+  }
+
+  return {
+    left: `${layout.slotX}%`,
+    transform: `translate(-50%, -50%) scale(${layout.scale}) rotateY(${layout.rotateY}deg)`,
+    opacity: '1',
+    zIndex: String(layout.zIndex),
+    pointerEvents: 'auto' as const,
+  };
+}
+
+function goTo(index: number) {
+  if (!slideCount.value) return;
+  active.value = (index + slideCount.value) % slideCount.value;
+}
+
+function next() {
+  goTo(active.value + 1);
+}
+
+function prev() {
+  goTo(active.value - 1);
+}
+
+function onBannerClick(banner: BannerItem, index: number) {
+  if (normalizeOffset(index) !== 0) {
+    goTo(index);
+    return;
+  }
+  if (banner.id) {
+    void router.push(`/announcements/${banner.id}`);
+    return;
+  }
+  if (props.fallbackTo) {
+    void router.push(props.fallbackTo);
+  }
+}
+
+function startAutoPlay() {
+  stopAutoPlay();
+  if (!canLoop.value) return;
+  timer.value = setInterval(next, 5000);
+}
+
+function stopAutoPlay() {
+  if (timer.value) {
+    clearInterval(timer.value);
+    timer.value = null;
+  }
+}
+
+watch(
+  () => props.banners.length,
+  () => {
+    active.value = 0;
+    startAutoPlay();
+  },
+);
+
+onMounted(startAutoPlay);
+onUnmounted(stopAutoPlay);
+</script>
+
+<template>
+  <section
+    v-if="banners.length"
+    class="banner-coverflow"
+    @mouseenter="stopAutoPlay"
+    @mouseleave="startAutoPlay"
+  >
+    <div class="coverflow-stage">
+      <button
+        v-for="(banner, i) in banners"
+        :key="banner.id ?? i"
+        type="button"
+        class="coverflow-slide"
+        :class="{ 'is-active': slideLayout(i).active, 'is-side': Math.abs(slideLayout(i).offset) === 1 }"
+        :style="slideStyle(i)"
+        :aria-label="title(banner)"
+        @click="onBannerClick(banner, i)"
+      >
+        <div class="slide-card">
+          <img
+            v-if="imageUrl(banner)"
+            :src="imageUrl(banner)"
+            :alt="''"
+            class="slide-img"
+            :loading="i === 0 ? 'eager' : 'lazy'"
+            @error="onImgError"
+          />
+          <div v-else class="slide-fallback" aria-hidden="true">
+            <svg class="fallback-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+            </svg>
+          </div>
+          <div v-if="slideLayout(i).active" class="click-hint" aria-hidden="true">
+            <span class="click-ring" />
+            <svg class="click-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M9 11.24V7.5a2.5 2.5 0 0 1 5 0v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63-4.54-2.26a1.5 1.5 0 0 0-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72a1 1 0 0 0-.24-.03c-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27a1.5 1.5 0 0 0-.91-1.38z"
+              />
+            </svg>
+          </div>
+        </div>
+      </button>
+
+      <button
+        v-if="canLoop"
+        type="button"
+        class="nav-btn prev"
+        :aria-label="t('home.banner_prev')"
+        @click.stop="prev"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
+      </button>
+      <button
+        v-if="canLoop"
+        type="button"
+        class="nav-btn next"
+        :aria-label="t('home.banner_next')"
+        @click.stop="next"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+      </button>
+    </div>
+
+    <div v-if="canLoop" class="coverflow-dots">
+      <button
+        v-for="(_, i) in banners"
+        :key="i"
+        type="button"
+        class="dot"
+        :class="{ active: i === active }"
+        :aria-label="t('home.banner_slide', { n: i + 1 })"
+        @click.stop="goTo(i)"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.banner-coverflow {
+  width: 100%;
+  padding: 4px 0 0;
+}
+
+.coverflow-stage {
+  position: relative;
+  height: clamp(260px, 28vw, 360px);
+  perspective: 1000px;
+}
+
+.coverflow-slide {
+  position: absolute;
+  top: 50%;
+  width: 42%;
+  max-width: 560px;
+  height: 90%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition:
+    left 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
+    transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
+    opacity 0.4s ease;
+  transform-style: preserve-3d;
+  will-change: left, transform;
+}
+
+.slide-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 14px;
+  overflow: hidden;
+  background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
+  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
+  transition: box-shadow 0.35s ease, filter 0.35s ease, transform 0.25s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.coverflow-slide.is-side .slide-card {
+  filter: brightness(0.72) saturate(0.9);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+}
+
+.coverflow-slide.is-side:hover .slide-card {
+  filter: brightness(0.88) saturate(1);
+}
+
+.coverflow-slide.is-active .slide-card {
+  filter: none;
+  box-shadow:
+    0 16px 40px rgba(0, 0, 0, 0.5),
+    0 0 28px rgba(212, 175, 55, 0.22),
+    0 0 56px rgba(212, 175, 55, 0.1);
+  animation: banner-breathe 3s ease-in-out infinite;
+}
+
+.coverflow-slide.is-active:hover .slide-card {
+  animation: none;
+  transform: scale(1.018);
+}
+
+@keyframes banner-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow:
+      0 16px 40px rgba(0, 0, 0, 0.5),
+      0 0 22px rgba(212, 175, 55, 0.16),
+      0 0 48px rgba(212, 175, 55, 0.08);
+  }
+
+  50% {
+    transform: scale(1.008);
+    box-shadow:
+      0 18px 44px rgba(0, 0, 0, 0.52),
+      0 0 32px rgba(212, 175, 55, 0.26),
+      0 0 60px rgba(212, 175, 55, 0.12);
+  }
+}
+
+.slide-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  display: block;
+}
+
+.slide-fallback {
+  width: 100%;
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), #1a1a1a);
+}
+
+.fallback-icon {
+  width: 40px;
+  height: 40px;
+  color: rgba(212, 175, 55, 0.35);
+}
+
+.click-hint {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 2;
+  background: rgba(0, 0, 0, 0.35);
+  border-radius: 50%;
+}
+
+.click-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1px solid rgba(212, 175, 55, 0.45);
+  animation: click-ring-pulse 2.8s ease-out infinite;
+}
+
+.click-icon {
+  position: relative;
+  width: 15px;
+  height: 15px;
+  color: rgba(212, 175, 55, 0.88);
+  animation: click-icon-bob 2.8s ease-in-out infinite;
+}
+
+@keyframes click-ring-pulse {
+  0% {
+    transform: scale(0.9);
+    opacity: 0.55;
+  }
+
+  70% {
+    transform: scale(1.35);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1.35);
+    opacity: 0;
+  }
+}
+
+@keyframes click-icon-bob {
+  0%,
+  100% {
+    transform: translateY(1px) scale(1);
+    opacity: 0.65;
+  }
+
+  50% {
+    transform: translateY(-1px) scale(1.06);
+    opacity: 1;
+  }
+}
+
+.coverflow-slide.is-active:hover .click-hint {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .coverflow-slide.is-active .slide-card,
+  .click-ring,
+  .click-icon {
+    animation: none;
+  }
+}
+
+.nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid rgba(212, 175, 55, 0.4);
+  background: rgba(10, 10, 10, 0.75);
+  color: var(--primary-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.nav-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.nav-btn:hover {
+  background: rgba(212, 175, 55, 0.2);
+  border-color: var(--primary);
+}
+
+.nav-btn.prev {
+  left: 4px;
+}
+
+.nav-btn.next {
+  right: 4px;
+}
+
+.coverflow-dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.25);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.dot.active {
+  width: 22px;
+  border-radius: 4px;
+  background: var(--gradient-gold);
+}
+
+.dot:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.45);
+}
+</style>
diff --git a/apps/player/src/components/desktop/DesktopOddsBetPopover.vue b/apps/player/src/components/desktop/DesktopOddsBetPopover.vue
new file mode 100644
index 0000000..c933bae
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopOddsBetPopover.vue
@@ -0,0 +1,400 @@
+<script setup lang="ts">
+import { computed, ref, watch, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';
+import { useBetSlipStore, type ParlaySlipError } from '../../stores/betSlip';
+import { useAuthStore } from '../../stores/auth';
+import { formatMoney } from '../../utils/localeDisplay';
+import api from '../../api';
+import { usePlayerProfile } from '../../composables/usePlayerProfile';
+import ConfirmDialog from '../ConfirmDialog.vue';
+import { buildBetPlaceConfirmMessage } from '../../utils/betPlaceConfirmMessage';
+import { useAppToast } from '../../composables/useAppToast';
+
+const { t, locale } = useI18n();
+const { visible, anchorX, anchorY, pendingItem, close } = useDesktopBetPopover();
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+const { refreshProfile } = usePlayerProfile();
+const { showToast } = useAppToast();
+
+const popRef = ref<HTMLElement | null>(null);
+const stakeInput = ref('5');
+const loading = ref(false);
+const error = ref('');
+const showPlaceConfirm = ref(false);
+const placeConfirmMessage = ref('');
+const MIN_STAKE = 5;
+
+let outsideClickTimer = 0;
+
+const stake = computed(() => {
+  const n = Number.parseFloat(stakeInput.value);
+  return Number.isFinite(n) ? n : 0;
+});
+
+const estReturn = computed(() => {
+  if (!pendingItem.value || stake.value <= 0) return 0;
+  return stake.value * pendingItem.value.odds;
+});
+
+watch(visible, (open) => {
+  if (open) {
+    error.value = '';
+    stakeInput.value = String(Math.max(MIN_STAKE, slip.stake || MIN_STAKE));
+    window.clearTimeout(outsideClickTimer);
+    outsideClickTimer = window.setTimeout(() => {
+      document.addEventListener('click', onDocumentClick, true);
+    }, 0);
+  } else {
+    document.removeEventListener('click', onDocumentClick, true);
+  }
+});
+
+onUnmounted(() => {
+  window.clearTimeout(outsideClickTimer);
+  document.removeEventListener('click', onDocumentClick, true);
+});
+
+function onDocumentClick(event: MouseEvent) {
+  if (!visible.value || !popRef.value || showPlaceConfirm.value) return;
+  const target = event.target as Node;
+  if (target instanceof Element && target.closest('.confirm-overlay')) return;
+  if (!popRef.value.contains(target)) {
+    close();
+  }
+}
+
+function parlayErrorMessage(reason: ParlaySlipError) {
+  if (reason === 'MAX_LEGS') return t('bet.parlay_max_legs');
+  if (reason === 'QUARTER_LINE') return t('bet.parlay_block_quarter');
+  if (reason === 'OUTRIGHT') return t('bet.parlay_block_outright');
+  if (reason === 'NOT_ALLOWED') return t('bet.parlay_block_not_allowed');
+  if (reason === 'SAME_MATCH') return t('bet.slip_parlay_same_match');
+  return t('bet.parlay_block_not_allowed');
+}
+
+function validatePlaceNow(): boolean {
+  const item = pendingItem.value;
+  if (!item) return false;
+  if (!auth.token) {
+    auth.showLoginPrompt();
+    return false;
+  }
+  if (item.allowSingle === false) {
+    error.value = t('bet.slip_parlay_only_hint');
+    return false;
+  }
+  if (stake.value < MIN_STAKE) {
+    error.value = t('bet.slip_min_error', { amount: MIN_STAKE });
+    return false;
+  }
+  return true;
+}
+
+function onPlaceNowClick() {
+  if (!validatePlaceNow()) return;
+  const item = pendingItem.value!;
+  placeConfirmMessage.value = buildBetPlaceConfirmMessage(t, {
+    mode: 'single',
+    items: [item],
+    totalStake: stake.value,
+    totalReturn: estReturn.value,
+    formatMoney: (amount) => formatMoney(amount, locale.value),
+    getStake: () => stake.value,
+    getOdds: (row) => row.odds,
+  });
+  showPlaceConfirm.value = true;
+}
+
+async function executePlaceNow(item = pendingItem.value) {
+  if (!item) return;
+  loading.value = true;
+  error.value = '';
+  try {
+    await api.post('/player/bets/single', {
+      selectionId: item.selectionId,
+      oddsVersion: item.oddsVersion,
+      stake: stake.value,
+      requestId: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    });
+    slip.stake = stake.value;
+    await refreshProfile();
+    showPlaceConfirm.value = false;
+    close();
+    showToast(t('bet.place_success'));
+  } catch (e: unknown) {
+    error.value =
+      (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
+      t('bet.place_failed');
+    showToast(error.value);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function confirmPlaceNow() {
+  const item = pendingItem.value;
+  if (!item) return;
+  showPlaceConfirm.value = false;
+  await executePlaceNow(item);
+}
+
+function addToSingleList() {
+  const item = pendingItem.value;
+  if (!item) return;
+  if (!auth.token) {
+    auth.showLoginPrompt();
+    return;
+  }
+  if (item.allowSingle === false) {
+    error.value = t('bet.slip_parlay_only_hint');
+    return;
+  }
+  slip.stake = Math.max(MIN_STAKE, stake.value || MIN_STAKE);
+  const before = slip.singleCartItems.length;
+  slip.addToSingleCart(item);
+  close();
+  showToast(t(before < slip.singleCartItems.length ? 'bet.added_to_single' : 'bet.pick_added'));
+}
+
+function addToParlayList() {
+  const item = pendingItem.value;
+  if (!item) return;
+  if (!auth.token) {
+    auth.showLoginPrompt();
+    return;
+  }
+  slip.stake = Math.max(MIN_STAKE, stake.value || MIN_STAKE);
+  const before = slip.parlayItems.length;
+  const err = slip.addParlayLeg(item);
+  if (err) {
+    error.value = parlayErrorMessage(err);
+    showToast(error.value);
+    return;
+  }
+  close();
+  showToast(t(before < slip.parlayItems.length ? 'bet.added_to_parlay' : 'bet.pick_added'));
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible && pendingItem"
+      ref="popRef"
+      class="bet-popover"
+      tabindex="-1"
+      :style="{ left: `${anchorX}px`, top: `${anchorY}px` }"
+      @click.stop
+    >
+      <button type="button" class="pop-close" aria-label="Close" @click="close">✕</button>
+
+      <div class="pop-match">{{ pendingItem.matchName }}</div>
+        <div class="pop-market">{{ pendingItem.marketName }}</div>
+        <div class="pop-pick-row">
+          <span class="pick">{{ pendingItem.selectionName }}</span>
+          <span class="odds">@ {{ pendingItem.odds.toFixed(2) }}</span>
+        </div>
+
+        <label class="stake-label">{{ t('bet.stake') }}</label>
+        <input v-model="stakeInput" type="number" class="stake-input" min="5" step="1" />
+
+        <div class="est-row">
+          <span>{{ t('bet.slip_est_return') }}</span>
+          <span class="est-val">{{ formatMoney(estReturn, locale) }}</span>
+        </div>
+
+        <p v-if="error" class="pop-error">{{ error }}</p>
+
+        <div class="pop-actions">
+          <button type="button" class="btn-primary-gold" :disabled="loading" @click="onPlaceNowClick">
+            {{ loading ? t('bet.placing') : t('bet.place_now') }}
+          </button>
+          <div class="pop-actions-row">
+            <button type="button" class="btn-outline" @click="addToSingleList">
+              {{ t('bet.add_to_single') }}
+            </button>
+            <button type="button" class="btn-outline" @click="addToParlayList">
+              {{ t('bet.add_to_parlay') }}
+            </button>
+          </div>
+        </div>
+    </div>
+  </Teleport>
+
+  <ConfirmDialog
+    v-model:visible="showPlaceConfirm"
+    :title="t('bet.place_confirm_title')"
+    :message="placeConfirmMessage"
+    :confirm-text="t('bet.place_bet')"
+    :cancel-text="t('common.cancel')"
+    :loading="loading"
+    @confirm="confirmPlaceNow"
+  />
+
+</template>
+
+<style scoped>
+.bet-popover {
+  position: fixed;
+  z-index: 1000;
+  width: 280px;
+  padding: 12px 28px 12px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(18, 18, 18, 0.98);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
+}
+
+.pop-close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 2px 4px;
+}
+
+.pop-close:hover {
+  color: #fff;
+}
+
+.pop-match {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.35;
+  margin-bottom: 4px;
+}
+
+.pop-market {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.pop-pick-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  background: rgba(212, 175, 55, 0.06);
+  border: 1px solid var(--border-gold-soft);
+}
+
+.pick {
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.odds {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.stake-label {
+  display: block;
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+
+.stake-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: #0d0d0d;
+  color: #fff;
+  font-size: 12px;
+}
+
+.stake-input:focus {
+  border-color: var(--border-gold-soft);
+  outline: none;
+}
+
+.est-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-bottom: 10px;
+}
+
+.est-val {
+  color: var(--primary-light);
+  font-weight: 700;
+}
+
+.pop-error {
+  font-size: 10px;
+  color: var(--danger);
+  margin: 0 0 8px;
+}
+
+.pop-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.pop-actions-row {
+  display: flex;
+  gap: 6px;
+}
+
+.pop-actions-row .btn-outline {
+  flex: 1;
+  width: auto;
+  min-width: 0;
+}
+
+.btn-primary-gold {
+  width: 100%;
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  background: linear-gradient(180deg, #f0d875 0%, #d4af37 100%);
+  color: #3d2800;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.btn-primary-gold:hover:not(:disabled) {
+  opacity: 0.92;
+}
+
+.btn-primary-gold:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.btn-outline {
+  width: 100%;
+  padding: 7px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.05);
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.btn-outline:hover {
+  background: rgba(212, 175, 55, 0.12);
+}
+</style>
diff --git a/apps/player/src/components/desktop/DesktopOutrightEventCard.vue b/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
new file mode 100644
index 0000000..9bc9501
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopOutrightEventCard.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { OutrightEvent } from '../outright/OutrightEventSection.vue';
+import saishiImg from '../../assets/images/saishi.webp';
+
+const props = defineProps<{
+  event: OutrightEvent;
+}>();
+
+const emit = defineEmits<{ open: [] }>();
+
+const { t } = useI18n();
+
+const headTitle = computed(() => {
+  const raw = props.event.title.replace(/^\*+/, '').trim();
+  return raw || props.event.leagueName || t('bet.tab_outright');
+});
+
+const teamCount = computed(() => props.event.selectionCount ?? props.event.selections.length);
+
+const isSettled = computed(
+  () => props.event.bettingOpen === false || props.event.status === 'SETTLED',
+);
+</script>
+
+<template>
+  <button type="button" class="outright-event-card hover-bg" @click="emit('open')">
+    <div class="card-main">
+      <div class="title-row">
+        <span class="title">{{ headTitle }}</span>
+        <span v-if="isSettled" class="settled-tag">{{ t('bet.outright_settled') }}</span>
+      </div>
+      <p v-if="event.leagueName && event.leagueName !== headTitle" class="league">{{ event.leagueName }}</p>
+      <p class="meta">{{ t('bet.outright_teams_count', { n: teamCount }) }}</p>
+    </div>
+    <img :src="saishiImg" alt="" class="saishi" />
+  </button>
+</template>
+
+<style scoped>
+.outright-event-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: rgba(20, 20, 20, 0.95);
+  text-align: left;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.outright-event-card:hover {
+  border-color: var(--border-gold-soft);
+}
+
+.card-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.35;
+}
+
+.settled-tag {
+  font-size: 10px;
+  font-weight: 800;
+  color: #c9a227;
+  border: 1px solid rgba(201, 162, 39, 0.45);
+  border-radius: 999px;
+  padding: 1px 7px;
+}
+
+.league {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.meta {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: #666;
+}
+
+.saishi {
+  flex-shrink: 0;
+  height: 44px;
+  width: auto;
+  max-width: 40px;
+  object-fit: contain;
+  opacity: 0.85;
+}
+</style>
diff --git a/apps/player/src/components/desktop/DesktopShell.vue b/apps/player/src/components/desktop/DesktopShell.vue
new file mode 100644
index 0000000..1ed6b87
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopShell.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+import { useRoute, RouterView } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import DesktopTopNav from './DesktopTopNav.vue';
+import DesktopOddsBetPopover from './DesktopOddsBetPopover.vue';
+import SportsCategoryBar from './SportsCategoryBar.vue';
+import LeagueSidebar from './LeagueSidebar.vue';
+import MatchSidebar from './MatchSidebar.vue';
+import BetSlipPanel from './BetSlipPanel.vue';
+import FloatingMailbox from '../FloatingMailbox.vue';
+import { usePlayerHome } from '../../composables/usePlayerHome';
+import { useAuthStore } from '../../stores/auth';
+
+const route = useRoute();
+const { locale } = useI18n();
+const auth = useAuthStore();
+const { load: loadPlayerHome } = usePlayerHome();
+
+const layoutMode = computed<'betting' | 'account' | 'hub' | 'marketing'>(() => {
+  const p = route.path;
+  if (p === '/bet' || p.startsWith('/match/') || p.startsWith('/outright/')) {
+    return 'betting';
+  }
+  if (
+    p === '/bets' ||
+    p.startsWith('/bets/') ||
+    p.startsWith('/wallet') ||
+    p === '/profile/cashbacks'
+  ) {
+    return 'account';
+  }
+  if (p.startsWith('/announcements')) {
+    return 'hub';
+  }
+  if (p.startsWith('/messages')) {
+    return 'hub';
+  }
+  return 'marketing';
+});
+
+const isMatchDetail = computed(() => route.path.startsWith('/match/'));
+const isBettingDetail = computed(
+  () => route.path.startsWith('/match/') || route.path.startsWith('/outright/'),
+);
+
+onMounted(() => {
+  void loadPlayerHome(true);
+});
+
+watch(locale, (next, prev) => {
+  if (prev && next !== prev) void loadPlayerHome(true);
+});
+
+watch(
+  () => auth.token,
+  () => {
+    void loadPlayerHome(true);
+  },
+);
+</script>
+
+<template>
+  <div class="desktop-shell">
+    <header class="desktop-header-wrap">
+      <DesktopTopNav />
+    </header>
+
+    <div class="desktop-main-container">
+      <!-- Betting Layout -->
+      <div v-if="layoutMode === 'betting'" class="desktop-layout-betting-wrap">
+        <div class="desktop-betting-sports-row">
+          <SportsCategoryBar />
+        </div>
+        <div class="desktop-layout-betting">
+          <aside class="desktop-betting-left">
+            <LeagueSidebar v-if="!isMatchDetail" />
+            <MatchSidebar v-else />
+          </aside>
+          <main class="desktop-betting-center" :class="{ 'is-betting-detail': isBettingDetail }">
+            <RouterView v-slot="{ Component, route: viewRoute }">
+              <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
+                <component :is="Component" :key="viewRoute.path" />
+              </KeepAlive>
+              <component v-else :is="Component" :key="viewRoute.fullPath" />
+            </RouterView>
+          </main>
+          <aside class="desktop-betting-right">
+            <BetSlipPanel />
+          </aside>
+        </div>
+      </div>
+
+      <!-- Account Layout -->
+      <div v-else-if="layoutMode === 'account'" class="desktop-layout-account">
+        <main class="desktop-account-center">
+          <RouterView v-slot="{ Component, route: viewRoute }">
+            <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
+              <component :is="Component" :key="viewRoute.path" />
+            </KeepAlive>
+            <component v-else :is="Component" :key="viewRoute.fullPath" />
+          </RouterView>
+        </main>
+      </div>
+
+      <!-- Hub Layout: Messages / Announcements split pane -->
+      <div v-else-if="layoutMode === 'hub'" class="desktop-layout-hub-outer">
+        <RouterView v-slot="{ Component, route: viewRoute }">
+          <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
+            <component :is="Component" :key="viewRoute.path" />
+          </KeepAlive>
+          <component v-else :is="Component" :key="viewRoute.fullPath" />
+        </RouterView>
+      </div>
+
+      <!-- Marketing/Single Column Layout -->
+      <div v-else class="desktop-layout-marketing">
+        <main class="desktop-marketing-content">
+          <RouterView v-slot="{ Component, route: viewRoute }">
+            <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
+              <component :is="Component" :key="viewRoute.path" />
+            </KeepAlive>
+            <component v-else :is="Component" :key="viewRoute.fullPath" />
+          </RouterView>
+        </main>
+      </div>
+    </div>
+    <FloatingMailbox />
+    <DesktopOddsBetPopover />
+  </div>
+</template>
diff --git a/apps/player/src/components/desktop/DesktopTopNav.vue b/apps/player/src/components/desktop/DesktopTopNav.vue
new file mode 100644
index 0000000..fb4d940
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopTopNav.vue
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RouterLink, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAuthStore } from '../../stores/auth';
+import LocaleSwitcher from '../LocaleSwitcher.vue';
+import CashBalanceChip from '../CashBalanceChip.vue';
+import UserAvatarMenu from '../UserAvatarMenu.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const auth = useAuthStore();
+
+const activeTab = computed(() => {
+  const p = route.path;
+  if (p === '/') return 'home';
+  if (p === '/bet' || p.startsWith('/match/') || p.startsWith('/outright/')) return 'sports';
+  if (p === '/bets' || p.startsWith('/bets/')) return 'bet_history';
+  if (p.startsWith('/wallet') || p === '/profile/cashbacks') return 'wallet';
+  if (p.startsWith('/profile')) return 'profile';
+  if (p.startsWith('/messages')) return 'messages';
+  return '';
+});
+</script>
+
+<template>
+  <div class="desktop-top-nav">
+    <RouterLink to="/" class="logo-wrap">
+      <img src="/logo.png" alt="TheBet365" class="logo" />
+      <span class="site-name">TheBet365</span>
+    </RouterLink>
+    <nav class="nav-menu">
+      <RouterLink
+        to="/"
+        class="nav-link"
+        :class="{ active: activeTab === 'home' }"
+      >
+        {{ t('nav.home') }}
+      </RouterLink>
+
+      <RouterLink
+        to="/bet"
+        class="nav-link"
+        :class="{ active: activeTab === 'sports' }"
+      >
+        {{ t('nav.sports') }}
+      </RouterLink>
+
+      <RouterLink
+        to="/bets"
+        class="nav-link"
+        :class="{ active: activeTab === 'bet_history' }"
+      >
+        {{ t('nav.bet_history') }}
+      </RouterLink>
+
+      <RouterLink
+        to="/wallet"
+        class="nav-link"
+        :class="{ active: activeTab === 'wallet' }"
+      >
+        {{ t('nav.wallet') }}
+      </RouterLink>
+
+      <RouterLink
+        to="/profile"
+        class="nav-link"
+        :class="{ active: activeTab === 'profile' }"
+      >
+        {{ t('nav.profile') }}
+      </RouterLink>
+    </nav>
+
+    <div class="nav-right">
+      <LocaleSwitcher />
+      <template v-if="auth.user">
+        <CashBalanceChip />
+        <UserAvatarMenu />
+      </template>
+      <div v-else class="auth-buttons">
+        <button
+          type="button"
+          class="login-btn"
+          @click="auth.showLoginPrompt(route.fullPath)"
+        >
+          {{ t('auth.login') }}
+        </button>
+        <RouterLink to="/register" class="register-btn">
+          {{ t('auth.register') || '注册' }}
+        </RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-top-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.logo-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  flex: 1;
+}
+
+.logo {
+  height: 38px;
+  width: auto;
+  display: block;
+  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.2));
+}
+
+.site-name {
+  font-size: 20px;
+  font-weight: 800;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  letter-spacing: 0.5px;
+  background: var(--gradient-gold);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 8px rgba(212, 175, 55, 0.15);
+  transition: opacity 0.2s;
+}
+
+.logo-wrap:hover .site-name {
+  opacity: 0.85;
+}
+
+.nav-menu {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  justify-content: center;
+}
+
+.nav-link {
+  position: relative;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-muted);
+  padding: 18px 4px;
+  transition: color 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.nav-link:hover {
+  color: var(--primary-light);
+}
+
+.nav-link.active {
+  color: var(--primary-light);
+}
+
+.nav-link.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--primary);
+  border-radius: 3px 3px 0 0;
+  box-shadow: 0 -1px 8px rgba(212, 175, 55, 0.5);
+}
+
+.badge {
+  display: inline-block;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: #e74c3c;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 16px;
+  text-align: center;
+}
+
+.nav-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.auth-buttons {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.login-btn {
+  padding: 6px 18px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.05);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 700;
+  transition: all 0.2s;
+}
+
+.login-btn:hover {
+  background: rgba(212, 175, 55, 0.12);
+  border-color: var(--primary);
+}
+
+.register-btn {
+  padding: 7px 18px;
+  border-radius: 4px;
+  background: linear-gradient(180deg, #F0D875 0%, #D4AF37 100%);
+  color: #3D2800;
+  font-size: 13px;
+  font-weight: 800;
+  transition: opacity 0.2s;
+}
+
+.register-btn:hover {
+  opacity: 0.9;
+}
+
+/* Override locale switcher and other header action height */
+:deep(.locale-switch:not(.compact)),
+:deep(.cash-chip),
+:deep(.avatar-btn) {
+  height: 34px !important;
+  box-sizing: border-box;
+}
+:deep(.avatar-btn) {
+  width: 34px !important;
+}
+</style>
diff --git a/apps/player/src/components/desktop/DesktopWalletSubNav.vue b/apps/player/src/components/desktop/DesktopWalletSubNav.vue
new file mode 100644
index 0000000..db241ef
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopWalletSubNav.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RouterLink, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const tabs = [
+  {
+    path: '/wallet',
+    labelKey: 'nav.wallet',
+    match: (p: string) =>
+      p === '/wallet' ||
+      p === '/wallet/detail' ||
+      p === '/wallet/recharge' ||
+      p.startsWith('/wallet/transactions'),
+  },
+  {
+    path: '/wallet/recharge/history',
+    labelKey: 'wallet.recharge_history',
+    match: (p: string) => p.startsWith('/wallet/recharge/history'),
+  },
+  {
+    path: '/wallet/cashbacks',
+    labelKey: 'wallet.cashbacks_tab',
+    match: (p: string) => p === '/wallet/cashbacks' || p === '/profile/cashbacks',
+  },
+];
+
+const activePath = computed(() => route.path);
+</script>
+
+<template>
+  <nav class="desktop-wallet-subnav" :aria-label="t('nav.wallet')">
+    <RouterLink
+      v-for="tab in tabs"
+      :key="tab.path"
+      :to="tab.path"
+      class="desktop-wallet-subnav-link"
+      :class="{ active: tab.match(activePath) }"
+    >
+      {{ t(tab.labelKey) }}
+    </RouterLink>
+  </nav>
+</template>
diff --git a/apps/player/src/components/desktop/LeagueSidebar.vue b/apps/player/src/components/desktop/LeagueSidebar.vue
new file mode 100644
index 0000000..fec7edf
--- /dev/null
+++ b/apps/player/src/components/desktop/LeagueSidebar.vue
@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMatchFilters } from '../../composables/useMatchFilters';
+import { useDesktopParlayMatches } from '../../composables/useDesktopParlayMatches';
+import {
+  isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
+  isInLocalTodayMatchWindow as isInTodayMatchWindow,
+} from '@thebet365/shared';
+
+const { t } = useI18n();
+const { parlayMatches, loadParlayMatches } = useDesktopParlayMatches();
+const { searchQuery, filterState, toggleLeague, clearFilters } = useMatchFilters();
+
+onMounted(() => {
+  void loadParlayMatches();
+});
+
+function normalizeLeagueName(name: string): string {
+  return name
+    .replace(/\.unit$/i, '')
+    .replace(/[-_]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+const availableLeagues = computed(() => {
+  const map = new Map<string, { id: string; name: string; count: number }>();
+  const now = new Date();
+  const keyword = searchQuery.value.trim().toLowerCase();
+
+  for (const m of parlayMatches.value) {
+    if (keyword) {
+      const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
+      if (!haystack.includes(keyword)) continue;
+    }
+
+    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) continue;
+
+    if (filterState.value.status === 'open' && m.matchPhase !== 'open' && m.matchPhase !== undefined) continue;
+    if (filterState.value.status === 'settled' && m.matchPhase !== 'settled') continue;
+
+    const id = m.leagueId ?? m.leagueName;
+    const existing = map.get(id);
+    if (existing) {
+      existing.count += 1;
+    } else {
+      map.set(id, {
+        id,
+        name: normalizeLeagueName(m.leagueName),
+        count: 1,
+      });
+    }
+  }
+
+  return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name));
+});
+
+const isSelected = (leagueId: string) => filterState.value.leagueIds.includes(leagueId);
+</script>
+
+<template>
+  <div class="league-sidebar">
+    <div class="search-box">
+      <input
+        v-model="searchQuery"
+        type="text"
+        :placeholder="t('nav.search')"
+        class="sidebar-search-input"
+      />
+    </div>
+
+    <div class="sidebar-section">
+      <div class="section-hdr">{{ t('bet.filter_time') }}</div>
+      <div class="time-filters">
+        <button
+          type="button"
+          class="time-btn"
+          :class="{ active: filterState.time === 'all' }"
+          @click="filterState.time = 'all'"
+        >
+          {{ t('bet.time_all') }}
+        </button>
+        <button
+          type="button"
+          class="time-btn"
+          :class="{ active: filterState.time === 'today' }"
+          @click="filterState.time = 'today'"
+        >
+          {{ t('bet.time_today') }}
+        </button>
+        <button
+          type="button"
+          class="time-btn"
+          :class="{ active: filterState.time === 'early' }"
+          @click="filterState.time = 'early'"
+        >
+          {{ t('bet.time_early') }}
+        </button>
+      </div>
+    </div>
+
+    <div class="sidebar-section leagues-section">
+      <div class="section-hdr leagues-hdr">
+        <span>{{ t('bet.filter_league') }}</span>
+        <button
+          v-if="filterState.leagueIds.length > 0"
+          type="button"
+          class="clear-btn"
+          @click="clearFilters"
+        >
+          {{ t('common.clear') }}
+        </button>
+      </div>
+      <div class="leagues-list">
+        <div
+          v-for="lg in availableLeagues"
+          :key="lg.id"
+          class="league-item"
+          :class="{ active: isSelected(lg.id) }"
+          @click="toggleLeague(lg.id)"
+        >
+          <div class="checkbox" :class="{ checked: isSelected(lg.id) }"></div>
+          <span class="league-name" :title="lg.name">{{ lg.name }}</span>
+          <span class="league-count">{{ lg.count }}</span>
+        </div>
+        <div v-if="availableLeagues.length === 0" class="empty-leagues">
+          {{ t('bet.no_matches') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.league-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px 0;
+}
+
+.search-box {
+  padding: 0 12px 10px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sidebar-search-input {
+  width: 100%;
+  background: #0d0d0d !important;
+  border: 1px solid var(--border) !important;
+  color: var(--text);
+  padding: 6px 10px;
+  font-size: 11px;
+  border-radius: 4px;
+}
+
+.sidebar-search-input:focus {
+  border-color: var(--border-gold-soft) !important;
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
+}
+
+.sidebar-section {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.section-hdr {
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  margin-bottom: 8px;
+}
+
+.time-filters {
+  display: flex;
+  gap: 4px;
+}
+
+.time-btn {
+  flex: 1;
+  background: #141414;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  padding: 5px 2px;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 4px;
+  text-align: center;
+  transition: all 0.2s;
+}
+
+.time-btn:hover {
+  border-color: var(--border-gold-soft);
+  color: var(--text);
+}
+
+.time-btn.active {
+  background: rgba(212, 175, 55, 0.08);
+  border-color: var(--primary);
+  color: var(--primary-light);
+}
+
+.leagues-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.leagues-hdr {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.clear-btn {
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 10px;
+  font-weight: 700;
+  padding: 0;
+  text-transform: none;
+}
+
+.leagues-list {
+  flex: 1;
+  overflow-y: auto;
+  margin-right: -4px;
+  padding-right: 4px;
+}
+
+.league-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  margin-bottom: 2px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.league-item:hover {
+  background: var(--bg-hover);
+}
+
+.league-item.active {
+  background: rgba(212, 175, 55, 0.04);
+}
+
+.checkbox {
+  width: 12px;
+  height: 12px;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  position: relative;
+  flex-shrink: 0;
+  background: #0d0d0d;
+}
+
+.checkbox.checked {
+  border-color: var(--primary);
+  background: var(--primary);
+}
+
+.checkbox.checked::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  width: 3px;
+  height: 6px;
+  border: solid #111;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.league-name {
+  flex: 1;
+  font-size: 11px;
+  font-weight: 600;
+  color: #ddd;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.league-item.active .league-name {
+  color: var(--primary-light);
+  font-weight: 700;
+}
+
+.league-count {
+  font-size: 9px;
+  color: var(--text-muted);
+  font-weight: 700;
+  background: #181818;
+  padding: 1px 5px;
+  border-radius: 8px;
+}
+
+.empty-leagues {
+  padding: 16px 0;
+  text-align: center;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+</style>
diff --git a/apps/player/src/components/desktop/MatchSidebar.vue b/apps/player/src/components/desktop/MatchSidebar.vue
new file mode 100644
index 0000000..1a77efd
--- /dev/null
+++ b/apps/player/src/components/desktop/MatchSidebar.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useMatchFilters } from '../../composables/useMatchFilters';
+import { useDesktopParlayMatches } from '../../composables/useDesktopParlayMatches';
+import MatchBetCard from '../MatchBetCard.vue';
+import GoldSpinner from '../GoldSpinner.vue';
+import {
+  isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
+  isInLocalTodayMatchWindow as isInTodayMatchWindow,
+} from '@thebet365/shared';
+import { ref, watch, nextTick } from 'vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const { searchQuery, filterState } = useMatchFilters();
+const { parlayMatches, parlayLoading, loadParlayMatches } = useDesktopParlayMatches();
+
+const listRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  void loadParlayMatches().then(() => {
+    scrollToActive();
+  });
+});
+
+const currentMatchId = computed(() => {
+  const id = route.params.id;
+  return Array.isArray(id) ? id[0] : id;
+});
+
+function matchesSearchKeyword(m: any, keyword: string) {
+  if (!keyword) return true;
+  const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
+  return haystack.includes(keyword);
+}
+
+const filteredMatches = computed(() => {
+  const now = new Date();
+  const keyword = searchQuery.value.trim().toLowerCase();
+  return parlayMatches.value.filter((m) => {
+    const isCurrent = String(m.id) === String(currentMatchId.value);
+
+    // 封盘或已结算的不展示，除非是当前正在查看的赛事
+    if (!isCurrent && (m.bettingOpen === false || m.matchPhase === 'settled' || m.matchPhase === 'closed_pending')) {
+      return false;
+    }
+
+    if (!isCurrent && !matchesSearchKeyword(m, keyword)) return false;
+
+    let timeMatch = true;
+    if (!isCurrent) {
+      if (filterState.value.time === 'today') {
+        timeMatch = isInTodayMatchWindow(m.startTime, now);
+      } else if (filterState.value.time === 'early') {
+        timeMatch = isAfterTodayMatchWindow(m.startTime, now);
+      }
+    }
+    return isCurrent || timeMatch;
+  });
+});
+
+function goMatch(id: string) {
+  router.replace(`/match/${id}`);
+}
+
+function scrollToActive() {
+  nextTick(() => {
+    if (!listRef.value) return;
+    const activeEl = listRef.value.querySelector('.active') as HTMLElement;
+    if (activeEl) {
+      activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  });
+}
+
+watch(currentMatchId, scrollToActive);
+</script>
+
+<template>
+  <div class="match-sidebar">
+    <div class="search-box">
+      <input
+        v-model="searchQuery"
+        type="text"
+        :placeholder="t('nav.search')"
+        class="sidebar-search-input"
+      />
+    </div>
+
+    <div class="sidebar-section">
+      <div class="section-hdr">{{ t('bet.filter_time') }}</div>
+      <div class="time-filters">
+        <button
+          type="button"
+          class="time-btn"
+          :class="{ active: filterState.time === 'all' }"
+          @click="filterState.time = 'all'"
+        >
+          {{ t('bet.time_all') }}
+        </button>
+        <button
+          type="button"
+          class="time-btn"
+          :class="{ active: filterState.time === 'today' }"
+          @click="filterState.time = 'today'"
+        >
+          {{ t('bet.time_today') }}
+        </button>
+        <button
+          type="button"
+          class="time-btn"
+          :class="{ active: filterState.time === 'early' }"
+          @click="filterState.time = 'early'"
+        >
+          {{ t('bet.time_early') }}
+        </button>
+      </div>
+    </div>
+
+    <div class="sidebar-section matches-section">
+      <div class="section-hdr leagues-hdr">
+        <span>{{ t('bet.tab_matches') || '赛事' }}</span>
+      </div>
+      <div class="matches-list" ref="listRef">
+        <div v-if="parlayLoading && !filteredMatches.length" class="sidebar-loading">
+          <GoldSpinner :size="24" />
+        </div>
+        <template v-else>
+          <MatchBetCard
+            v-for="m in filteredMatches"
+            :key="m.id"
+            :match="m"
+            :class="{ active: String(m.id) === String(currentMatchId) }"
+            @bet="goMatch"
+          />
+          <div v-if="filteredMatches.length === 0 && !parlayLoading" class="empty-matches">
+            {{ t('bet.no_matches') }}
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.match-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px 0;
+}
+
+.search-box {
+  padding: 0 12px 10px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sidebar-search-input {
+  width: 100%;
+  background: #0d0d0d !important;
+  border: 1px solid var(--border) !important;
+  color: var(--text);
+  padding: 6px 10px;
+  font-size: 11px;
+  border-radius: 4px;
+}
+
+.sidebar-search-input:focus {
+  border-color: var(--border-gold-soft) !important;
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
+}
+
+.sidebar-section {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.section-hdr {
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  margin-bottom: 8px;
+}
+
+.leagues-hdr {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.time-filters {
+  display: flex;
+  gap: 4px;
+}
+
+.time-btn {
+  flex: 1;
+  background: #141414;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  padding: 5px 2px;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 4px;
+  text-align: center;
+  transition: all 0.2s;
+}
+
+.time-btn:hover {
+  border-color: var(--border-gold-soft);
+  color: var(--text);
+}
+
+.time-btn.active {
+  background: rgba(212, 175, 55, 0.08);
+  border-color: var(--primary);
+  color: var(--primary-light);
+}
+
+.matches-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.matches-list {
+  flex: 1;
+  overflow-y: auto;
+  margin-right: -4px;
+  padding-right: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sidebar-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30px 0;
+}
+
+.empty-matches {
+  padding: 16px 0;
+  text-align: center;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* Compact overrides for MatchBetCard inside sidebar */
+.matches-list :deep(.bet-btn),
+.matches-list :deep(.team-flag) {
+  display: none !important;
+}
+
+.matches-list :deep(.team) {
+  transform: none !important;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.matches-list :deep(.team-name) {
+  font-size: 12px;
+  font-weight: 700;
+  color: #ffffff;
+  text-align: center;
+  padding: 0 4px;
+  max-width: 80px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-shadow: none;
+  display: block;
+}
+
+.matches-list :deep(.center-col) {
+  min-width: 60px;
+  gap: 2px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.matches-list :deep(.kickoff) {
+  font-size: 9px;
+  color: var(--text-muted);
+  text-shadow: none;
+  white-space: nowrap;
+}
+
+.matches-list :deep(.vs) {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--primary-light);
+  text-shadow: none;
+}
+
+.matches-list :deep(.live-score) {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.matches-list :deep(.status-tag) {
+  font-size: 8px;
+  padding: 2px 6px;
+  border-radius: 0 4px 0 6px;
+}
+
+.matches-list :deep(.match-card) {
+  padding: 10px 8px;
+  min-height: unset;
+  background: #141414;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  gap: 6px;
+}
+
+.matches-list :deep(.match-card:hover) {
+  border-color: var(--border-gold-soft);
+  background: var(--bg-hover) !important;
+}
+
+.matches-list :deep(.match-card.active) {
+  border-color: var(--primary) !important;
+  background: rgba(212, 175, 55, 0.08) !important;
+  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
+}
+</style>
diff --git a/apps/player/src/components/desktop/Pagination.vue b/apps/player/src/components/desktop/Pagination.vue
new file mode 100644
index 0000000..253f4a9
--- /dev/null
+++ b/apps/player/src/components/desktop/Pagination.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  modelValue: { type: Number, required: true },
+  total: { type: Number, required: true },
+  pageSize: { type: Number, default: 20 },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:pageSize', 'change']);
+
+const { t } = useI18n();
+
+const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)));
+
+const pages = computed(() => {
+  const current = props.modelValue;
+  const max = totalPages.value;
+  if (max <= 7) {
+    return Array.from({ length: max }, (_, i) => i + 1);
+  }
+  if (current <= 4) {
+    return [1, 2, 3, 4, 5, '...', max];
+  }
+  if (current >= max - 3) {
+    return [1, '...', max - 4, max - 3, max - 2, max - 1, max];
+  }
+  return [1, '...', current - 1, current, current + 1, '...', max];
+});
+
+function goTo(page: number | string) {
+  if (typeof page === 'string') return;
+  if (page < 1 || page > totalPages.value) return;
+  if (page !== props.modelValue) {
+    emit('update:modelValue', page);
+    emit('change', page);
+  }
+}
+
+function onPageSizeChange(e: Event) {
+  const size = Number((e.target as HTMLSelectElement).value);
+  emit('update:pageSize', size);
+  emit('update:modelValue', 1);
+  emit('change', 1);
+}
+</script>
+
+<template>
+  <div v-if="total > 0" class="pagination">
+    <span class="page-total">{{ t('pagination.total', { total }) }}</span>
+    <div class="page-nav">
+      <button
+        type="button"
+        class="page-btn nav-btn"
+        :disabled="modelValue === 1"
+        @click="goTo(modelValue - 1)"
+      >
+        &lt;
+      </button>
+      <button
+        v-for="(p, idx) in pages"
+        :key="idx"
+        type="button"
+        class="page-btn"
+        :class="{ active: p === modelValue, ellipsis: typeof p === 'string' }"
+        :disabled="typeof p === 'string'"
+        @click="goTo(p)"
+      >
+        {{ p }}
+      </button>
+      <button
+        type="button"
+        class="page-btn nav-btn"
+        :disabled="modelValue === totalPages"
+        @click="goTo(modelValue + 1)"
+      >
+        &gt;
+      </button>
+    </div>
+    <div class="page-size-wrap">
+      <select :value="pageSize" class="page-size-select" @change="onPageSizeChange">
+        <option :value="10">{{ t('pagination.per_page', { size: 10 }) }}</option>
+        <option :value="20">{{ t('pagination.per_page', { size: 20 }) }}</option>
+        <option :value="50">{{ t('pagination.per_page', { size: 50 }) }}</option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.page-total {
+  margin-right: auto;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.page-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: #141414;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.page-btn:hover:not(:disabled) {
+  border-color: var(--border-gold-soft);
+  color: var(--text);
+  background: rgba(212, 175, 55, 0.05);
+}
+
+.page-btn.active {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #111;
+  font-weight: 800;
+}
+
+.page-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.page-btn.ellipsis {
+  border: none;
+  background: transparent;
+  cursor: default;
+}
+
+.page-size-select {
+  height: 32px;
+  background: #141414;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  border-radius: 6px;
+  padding: 0 10px;
+  font-size: 13px;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.page-size-select:hover {
+  border-color: var(--border-gold-soft);
+  color: var(--text);
+}
+</style>
diff --git a/apps/player/src/components/desktop/SportsCategoryBar.vue b/apps/player/src/components/desktop/SportsCategoryBar.vue
new file mode 100644
index 0000000..a48786e
--- /dev/null
+++ b/apps/player/src/components/desktop/SportsCategoryBar.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+type SportCategory = 'football' | 'basketball' | 'tennis';
+
+const SPORT_CATEGORIES = [
+  { id: 'football' as const, icon: '⚽', labelKey: 'bet.sport_football', enabled: true },
+  { id: 'basketball' as const, icon: '🏀', labelKey: 'bet.sport_basketball', enabled: false },
+  { id: 'tennis' as const, icon: '🎾', labelKey: 'bet.sport_tennis', enabled: false },
+] as const;
+
+const { t } = useI18n();
+const activeSport = ref<SportCategory>('football');
+
+function selectSport(id: SportCategory, enabled: boolean) {
+  if (!enabled) return;
+  activeSport.value = id;
+}
+</script>
+
+<template>
+  <div class="sports-category-bar">
+    <button
+      v-for="sport in SPORT_CATEGORIES"
+      :key="sport.id"
+      type="button"
+      class="sport-category"
+      :class="{
+        active: sport.enabled && activeSport === sport.id,
+        disabled: !sport.enabled,
+      }"
+      :disabled="!sport.enabled"
+      :aria-current="sport.enabled && activeSport === sport.id ? 'page' : undefined"
+      @click="selectSport(sport.id, sport.enabled)"
+    >
+      <span class="sport-category-icon" aria-hidden="true">{{ sport.icon }}</span>
+      <span class="sport-category-label">{{ t(sport.labelKey) }}</span>
+      <span v-if="!sport.enabled" class="sport-category-soon">{{ t('bet.sport_coming_soon') }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.sports-category-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.sports-category-bar::-webkit-scrollbar {
+  display: none;
+}
+
+.sport-category {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 7px 12px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  transition: background 0.18s, border-color 0.18s, color 0.18s;
+}
+
+.sport-category:hover:not(:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.sport-category.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.08);
+}
+
+.sport-category.disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.sport-category-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.sport-category-label {
+  line-height: 1.2;
+}
+
+.sport-category-soon {
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.06);
+  font-size: 10px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.45);
+}
+</style>
diff --git a/apps/player/src/components/match-detail/CorrectScorePanel.vue b/apps/player/src/components/match-detail/CorrectScorePanel.vue
index 5e38d01..ce07e18 100644
--- a/apps/player/src/components/match-detail/CorrectScorePanel.vue
+++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue
@@ -15,10 +15,12 @@ const props = defineProps<{
   }>;
   isSelected: (id: string) => boolean;
   locked?: boolean;
+  /** PC 全宽紧凑：更小单元格、三列均分 */
+  dense?: boolean;
 }>();
 
 const emit = defineEmits<{
-  pick: [id: string];
+  pick: [id: string, event?: MouseEvent];
 }>();
 
 const { t } = useI18n();
@@ -34,9 +36,9 @@ const columns = computed(() =>
   ),
 );
 
-function onPick(sel: CsSelection) {
+function onPick(sel: CsSelection, event?: MouseEvent) {
   if (props.locked) return;
-  emit('pick', sel.id);
+  emit('pick', sel.id, event);
 }
 
 function formatOdds(odds: string) {
@@ -46,7 +48,7 @@ function formatOdds(odds: string) {
 </script>
 
 <template>
-  <div class="cs-panel" :class="{ 'cs-panel--locked': locked }">
+  <div class="cs-panel" :class="{ 'cs-panel--locked': locked, 'cs-panel--dense': dense }">
     <div class="cols-head">
       <span>{{ t('bet.col_home') }}</span>
       <span>{{ t('bet.col_draw') }}</span>
@@ -61,8 +63,9 @@ function formatOdds(odds: string) {
           type="button"
           class="score-card"
           :class="{ selected: isSelected(sel.id), 'score-card--locked': locked }"
+          :data-bet-selection-id="sel.id"
           :disabled="locked"
-          @click="onPick(sel)"
+          @click="onPick(sel, $event)"
         >
           <span class="score-line">{{ sel.scoreDisplay }}</span>
           <span class="odds">{{ formatOdds(sel.odds) }}</span>
@@ -98,14 +101,16 @@ function formatOdds(odds: string) {
 
 .cols-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 4px;
+  align-items: start;
 }
 
 .col {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  align-self: start;
 }
 
 .score-card {
@@ -124,7 +129,16 @@ function formatOdds(odds: string) {
 
 .score-card.selected {
   border-color: var(--primary);
-  background: rgba(212, 175, 55, 0.1);
+  background: rgba(212, 175, 55, 0.14);
+  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 {
+  color: #e8d48a;
+}
+
+.score-card.selected .odds {
+  color: #f0d875;
 }
 
 .score-card--locked {
@@ -148,4 +162,35 @@ function formatOdds(odds: string) {
   font-weight: 700;
   color: var(--primary-light);
 }
+
+.cs-panel--dense {
+  padding: 4px 6px 6px;
+}
+
+.cs-panel--dense .cols-head {
+  font-size: 9px;
+  margin-bottom: 3px;
+}
+
+.cs-panel--dense .cols-grid {
+  gap: 3px;
+}
+
+.cs-panel--dense .col {
+  gap: 3px;
+}
+
+.cs-panel--dense .score-card {
+  min-height: 34px;
+  padding: 4px 2px;
+  gap: 2px;
+}
+
+.cs-panel--dense .score-line {
+  font-size: 10px;
+}
+
+.cs-panel--dense .odds {
+  font-size: 9px;
+}
 </style>
diff --git a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
index 0572e0a..4090eba 100644
--- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
+++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { resolveSelectionLabel } from '../../utils/selectionLabel';
 
@@ -12,11 +13,15 @@ const props = defineProps<{
   }[];
   isSelected: (id: string) => boolean;
   compact?: boolean;
+  /** PC 行内横排：左标签右赔率，适合详情页全宽行 */
+  horizontal?: boolean;
+  /** PC 卡片内：上标签下赔率，列数随选项数量 */
+  desktopCard?: boolean;
   locked?: boolean;
   lineValue?: string | number | null;
 }>();
 
-const emit = defineEmits<{ pick: [id: string] }>();
+const emit = defineEmits<{ pick: [id: string, event?: MouseEvent] }>();
 const { t } = useI18n();
 
 function label(sel: (typeof props.selections)[number]) {
@@ -29,23 +34,40 @@ function label(sel: (typeof props.selections)[number]) {
   return sel.selectionName;
 }
 
-function onPick(id: string) {
+function onPick(id: string, event?: MouseEvent) {
   if (props.locked) return;
-  emit('pick', id);
+  emit('pick', id, event);
 }
+
+const gridCols = computed(() => {
+  const n = props.selections.length;
+  if (n <= 1) return 1;
+  if (n === 2) return 2;
+  if (n === 3) return 3;
+  return 4;
+});
+
+const panelStyle = computed(() =>
+  props.desktopCard ? { '--market-cols': String(gridCols.value) } : undefined,
+);
 </script>
 
 <template>
-  <div class="wrap" :class="{ compact, locked }">
-    <div class="panel">
+  <div class="wrap" :class="{ compact, horizontal, desktopCard, locked }">
+    <div
+      class="panel"
+      :class="{ horizontal, 'desktop-card': desktopCard }"
+      :style="panelStyle"
+    >
       <button
         v-for="sel in selections"
         :key="sel.id"
         type="button"
         class="odds-btn"
         :class="{ selected: isSelected(sel.id), 'odds-btn--locked': locked }"
+        :data-bet-selection-id="sel.id"
         :disabled="locked"
-        @click="onPick(sel.id)"
+        @click="onPick(sel.id, $event)"
       >
         <span class="label">{{ label(sel) }}</span>
         <span class="odds">{{ sel.odds }}</span>
@@ -60,6 +82,90 @@ function onPick(id: string) {
   background: #0c0c0c;
 }
 
+.wrap.compact {
+  padding: 2px 4px 4px;
+}
+
+.wrap.compact:not(.horizontal) {
+  padding: 2px 4px 4px;
+}
+
+.wrap.horizontal {
+  padding: 0;
+  background: transparent;
+}
+
+.wrap.compact .panel:not(.horizontal) {
+  gap: 2px;
+}
+
+.wrap.compact:not(.horizontal) .odds-btn {
+  min-height: 30px;
+  padding: 3px 2px;
+  font-size: 10px;
+}
+
+.panel.horizontal {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+}
+
+.panel.horizontal .odds-btn {
+  flex: 1 1 72px;
+  min-width: 72px;
+  max-width: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 32px;
+  padding: 4px 10px;
+}
+
+.panel.horizontal .odds-btn .label {
+  font-size: 10px;
+  text-align: left;
+}
+
+.panel.horizontal .odds-btn .odds {
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.wrap.desktopCard {
+  padding: 0;
+  background: transparent;
+}
+
+.panel.desktop-card {
+  display: grid;
+  grid-template-columns: repeat(var(--market-cols, 3), minmax(0, 1fr));
+  gap: 4px;
+  width: 100%;
+}
+
+.panel.desktop-card .odds-btn {
+  min-height: 38px;
+  padding: 4px 6px;
+  gap: 2px;
+}
+
+.panel.desktop-card .odds-btn .label {
+  font-size: 9px;
+  line-height: 1.2;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.panel.desktop-card .odds-btn .odds {
+  font-size: 13px;
+  line-height: 1.1;
+}
+
 .wrap.locked {
   opacity: 0.78;
 }
@@ -86,7 +192,16 @@ function onPick(id: string) {
 
 .odds-btn.selected {
   border-color: var(--primary);
-  background: rgba(212, 175, 55, 0.1);
+  background: rgba(212, 175, 55, 0.14);
+  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 {
+  color: #e8d48a;
+}
+
+.odds-btn.selected .odds {
+  color: #f0d875;
 }
 
 .odds-btn--locked {
diff --git a/apps/player/src/components/outright/OutrightBetModal.vue b/apps/player/src/components/outright/OutrightBetModal.vue
index 059cf55..d9174b1 100644
--- a/apps/player/src/components/outright/OutrightBetModal.vue
+++ b/apps/player/src/components/outright/OutrightBetModal.vue
@@ -6,6 +6,8 @@ import { usePlayerProfile } from '../../composables/usePlayerProfile';
 import { formatMoney, parseAmount } from '../../utils/localeDisplay';
 import { teamFlagUrl } from '../../utils/teamFlag';
 import BetSuccessOverlay from '../BetSuccessOverlay.vue';
+import ConfirmDialog from '../ConfirmDialog.vue';
+import { buildBetPlaceConfirmMessage } from '../../utils/betPlaceConfirmMessage';
 
 export interface OutrightPick {
   selectionId: string;
@@ -51,6 +53,8 @@ const balance = ref(0);
 const successBalance = ref(0);
 const successStake = ref(0);
 const showSuccess = ref(false);
+const showPlaceConfirm = ref(false);
+const placeConfirmMessage = ref('');
 const currentOdds = ref('');
 const currentOddsVersion = ref('');
 const oddsDelta = ref<OddsDelta | null>(null);
@@ -209,19 +213,54 @@ function setMaxStake() {
   if (balance.value > 0) setStake(balance.value);
 }
 
-async function submit() {
-  if (!props.pick || stake.value <= 0) return;
+function validateSubmit(): boolean {
+  if (!props.pick || stake.value <= 0) return false;
   if (stake.value > balance.value) {
     error.value = t('bet.outright_insufficient');
-    return;
+    return false;
   }
   if (hasSuspendedSelection.value) {
     error.value = t('bet.odds_suspended');
-    return;
+    return false;
   }
+  return true;
+}
+
+function onSubmitClick() {
+  if (!props.pick) return;
+  if (!validateSubmit()) return;
   if (hasPendingOddsChanges.value) {
     acceptPendingOdds();
   }
+  placeConfirmMessage.value = buildBetPlaceConfirmMessage(t, {
+    mode: 'single',
+    items: [
+      {
+        selectionId: props.pick.selectionId,
+        oddsVersion: currentOddsVersion.value,
+        matchId: '',
+        matchName: props.pick.eventTitle,
+        marketId: '',
+        marketName: props.pick.eventTitle,
+        selectionName: `${props.pick.teamName} · ${props.pick.eventTitle}`,
+        odds: oddsNum.value,
+        marketType: 'OUTRIGHT',
+        lineValue: null,
+        allowSingle: true,
+        allowParlay: false,
+      },
+    ],
+    totalStake: stake.value,
+    totalReturn: estReturn.value,
+    formatMoney: (amount) => formatMoney(amount, locale.value),
+    getStake: () => stake.value,
+    getOdds: () => oddsNum.value,
+  });
+  showPlaceConfirm.value = true;
+}
+
+async function executeSubmit() {
+  if (!props.pick || stake.value <= 0) return;
 
   loading.value = true;
   error.value = '';
@@ -251,6 +290,11 @@ async function submit() {
   }
 }
 
+async function confirmSubmit() {
+  showPlaceConfirm.value = false;
+  await executeSubmit();
+}
+
 function formatOdds(odds: string) {
   const n = parseFloat(odds);
   return Number.isFinite(n) ? n.toFixed(2) : odds;
@@ -326,7 +370,7 @@ function formatOdds(odds: string) {
             type="button"
             class="btn-confirm btn-gold-outline"
             :disabled="loading || stake <= 0 || hasSuspendedSelection"
-            @click="submit"
+            @click="onSubmitClick"
           >
             {{ submitButtonLabel }}
           </button>
@@ -364,6 +408,16 @@ function formatOdds(odds: string) {
   </div>
 
   <BetSuccessOverlay :show="showSuccess" @done="showSuccess = false" />
+
+  <ConfirmDialog
+    v-model:visible="showPlaceConfirm"
+    :title="t('bet.place_confirm_title')"
+    :message="placeConfirmMessage"
+    :confirm-text="t('bet.place_bet')"
+    :cancel-text="t('common.cancel')"
+    :loading="loading"
+    @confirm="confirmSubmit"
+  />
 </template>
 
 <style scoped>
diff --git a/apps/player/src/components/outright/OutrightOptionCard.vue b/apps/player/src/components/outright/OutrightOptionCard.vue
index eb1ad12..d987974 100644
--- a/apps/player/src/components/outright/OutrightOptionCard.vue
+++ b/apps/player/src/components/outright/OutrightOptionCard.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   logoUrl?: string | null;
   disabled?: boolean;
   isWinner?: boolean;
+  selectionId?: string;
 }>();
 
 const emit = defineEmits<{ pick: [] }>();
@@ -63,6 +64,7 @@ onUnmounted(() => {
     type="button"
     class="option-card"
     :class="{ 'option-card--disabled': disabled, 'option-card--winner': isWinner }"
+    :data-bet-selection-id="selectionId || undefined"
     :disabled="disabled"
     @click="emit('pick')"
   >
diff --git a/apps/player/src/components/outright/OutrightPanel.vue b/apps/player/src/components/outright/OutrightPanel.vue
index 1afae97..db37c26 100644
--- a/apps/player/src/components/outright/OutrightPanel.vue
+++ b/apps/player/src/components/outright/OutrightPanel.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import api from '../../api';
 import OutrightEventSection, {
   type OutrightEvent,
   type OutrightSelection,
@@ -10,7 +9,7 @@ import OutrightBetModal, { type OutrightPick } from './OutrightBetModal.vue';
 import { useAuthStore } from '../../stores/auth';
 import emptyMatchesImg from '../../assets/images/empty-matches.svg';
 import GoldSpinner from '../../components/GoldSpinner.vue';
-import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
+import { useOutrightEvents } from '../../composables/useOutrightEvents';
 
 const props = defineProps<{
   activated?: boolean;
@@ -18,14 +17,12 @@ const props = defineProps<{
 
 const { t } = useI18n();
 const auth = useAuthStore();
+const { loading, loadError, events, load } = useOutrightEvents();
 
 function goLogin() {
   auth.showLoginPrompt('/bet');
 }
 
-const loading = ref(true);
-const loadError = ref('');
-const events = ref<OutrightEvent[]>([]);
 const expanded = ref<Set<string>>(new Set());
 const modalOpen = ref(false);
 const activePick = ref<OutrightPick | null>(null);
@@ -37,7 +34,6 @@ const totalSelections = computed(() =>
 
 function syncExpandedAfterLoad() {
   const ids = events.value.map((e) => e.id);
-  // 只保留仍然存在的 id，且最多保留 1 个
   const kept = [...expanded.value].filter((id) => ids.includes(id));
   if (kept.length > 0) {
     expanded.value = new Set([kept[0]]);
@@ -50,59 +46,18 @@ function syncExpandedAfterLoad() {
   }
 }
 
-async function load() {
-  const hadData = events.value.length > 0;
-  if (!hadData) loading.value = true;
-  loadError.value = '';
-  try {
-    const { data } = await api.get('/player/outrights');
-    const list = (data?.data ?? []) as OutrightEvent[];
-    const fresh = list.filter((e) => e.selections?.length > 0);
-    if (!hadData) {
-      events.value = fresh;
-      syncExpandedAfterLoad();
-    } else {
-      mergeOddsOnly(fresh);
-    }
-  } catch (e: unknown) {
-    if (!hadData) events.value = [];
-    const err = e as { response?: { status?: number; data?: { error?: string } } };
-    if (err.response?.status === 403) {
-      loadError.value = t('bet.outright_player_only');
-    } else {
-      loadError.value = err.response?.data?.error ?? t('bet.outright_load_failed');
-    }
-  } finally {
-    if (!hadData) loading.value = false;
-  }
-}
-
-function mergeOddsOnly(fresh: OutrightEvent[]) {
-  const freshMap = new Map<string, OutrightEvent>();
-  for (const e of fresh) freshMap.set(e.id, e);
-
-  for (const event of events.value) {
-    const freshEvent = freshMap.get(event.id);
-    if (!freshEvent) continue;
-    const selMap = new Map<string, OutrightSelection>();
-    for (const s of freshEvent.selections) selMap.set(s.id, s);
-    for (const sel of event.selections) {
-      const fs = selMap.get(sel.id);
-      if (fs) {
-        sel.odds = fs.odds;
-        sel.oddsVersion = fs.oddsVersion;
-      }
-    }
-  }
-}
-
-useOnLocaleChange(load);
+watch(
+  () => events.value.length,
+  (len, prev) => {
+    if (len > 0 && prev === 0) syncExpandedAfterLoad();
+  },
+);
 
 // 每次切回优胜冠军 Tab 时静默刷新赔率
 watch(
   () => props.activated,
   (active) => {
-    if (active && events.value.length > 0) void load();
+    if (active && events.value.length > 0) void load({ silent: true });
   },
 );
 
diff --git a/apps/player/src/composables/useAppToast.ts b/apps/player/src/composables/useAppToast.ts
new file mode 100644
index 0000000..85749f9
--- /dev/null
+++ b/apps/player/src/composables/useAppToast.ts
@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+
+const visible = ref(false);
+const message = ref('');
+
+let hideTimer = 0;
+
+export function useAppToast() {
+  function showToast(text: string, duration = 2200) {
+    message.value = text;
+    visible.value = true;
+    window.clearTimeout(hideTimer);
+    hideTimer = window.setTimeout(() => {
+      visible.value = false;
+    }, duration);
+  }
+
+  return {
+    visible,
+    message,
+    showToast,
+  };
+}
diff --git a/apps/player/src/composables/useDesktopBetLocate.ts b/apps/player/src/composables/useDesktopBetLocate.ts
new file mode 100644
index 0000000..71d4643
--- /dev/null
+++ b/apps/player/src/composables/useDesktopBetLocate.ts
@@ -0,0 +1,42 @@
+import { nextTick, ref } from 'vue';
+
+export interface BetLocateTarget {
+  matchId: string;
+  selectionId: string;
+  marketId?: string;
+  marketType: string;
+}
+
+const pendingLocate = ref<BetLocateTarget | null>(null);
+
+export function useDesktopBetLocate() {
+  function requestLocate(target: BetLocateTarget) {
+    pendingLocate.value = { ...target };
+  }
+
+  function clearLocate() {
+    pendingLocate.value = null;
+  }
+
+  return {
+    pendingLocate,
+    requestLocate,
+    clearLocate,
+  };
+}
+
+export async function scrollToBetSelection(selectionId: string) {
+  await nextTick();
+  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+
+  const escaped = typeof CSS !== 'undefined' && CSS.escape
+    ? CSS.escape(selectionId)
+    : selectionId.replace(/"/g, '\\"');
+  const el = document.querySelector(`[data-bet-selection-id="${escaped}"]`) as HTMLElement | null;
+  if (!el) return false;
+
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  el.classList.add('bet-locate-flash');
+  window.setTimeout(() => el.classList.remove('bet-locate-flash'), 2200);
+  return true;
+}
diff --git a/apps/player/src/composables/useDesktopBetPopover.ts b/apps/player/src/composables/useDesktopBetPopover.ts
new file mode 100644
index 0000000..982d634
--- /dev/null
+++ b/apps/player/src/composables/useDesktopBetPopover.ts
@@ -0,0 +1,39 @@
+import { ref } from 'vue';
+import type { SlipItem } from '../stores/betSlip';
+
+const visible = ref(false);
+const anchorX = ref(0);
+const anchorY = ref(0);
+const pendingItem = ref<SlipItem | null>(null);
+
+export function useDesktopBetPopover() {
+  function openAt(event: MouseEvent, item: SlipItem) {
+    const pad = 12;
+    const popW = 300;
+    const popH = 320;
+    let x = event.clientX + pad;
+    let y = event.clientY + pad;
+    if (typeof window !== 'undefined') {
+      x = Math.min(x, window.innerWidth - popW - pad);
+      y = Math.min(y, window.innerHeight - popH - pad);
+    }
+    anchorX.value = Math.max(pad, x);
+    anchorY.value = Math.max(pad, y);
+    pendingItem.value = item;
+    visible.value = true;
+  }
+
+  function close() {
+    visible.value = false;
+    pendingItem.value = null;
+  }
+
+  return {
+    visible,
+    anchorX,
+    anchorY,
+    pendingItem,
+    openAt,
+    close,
+  };
+}
diff --git a/apps/player/src/composables/useDesktopParlayMatches.ts b/apps/player/src/composables/useDesktopParlayMatches.ts
new file mode 100644
index 0000000..362c116
--- /dev/null
+++ b/apps/player/src/composables/useDesktopParlayMatches.ts
@@ -0,0 +1,67 @@
+import { ref } from 'vue';
+import api from '../api';
+import type { MatchPhase } from '../utils/matchPhase';
+
+export interface DesktopParlayMatch {
+  id: string;
+  leagueId?: string;
+  homeTeamName: string;
+  awayTeamName: string;
+  homeTeamCode?: string;
+  awayTeamCode?: string;
+  homeTeamLogoUrl?: string | null;
+  awayTeamLogoUrl?: string | null;
+  startTime: string;
+  leagueName: string;
+  leagueLogoUrl?: string | null;
+  status?: string;
+  bettingOpen?: boolean;
+  matchPhase?: MatchPhase;
+  score?: {
+    htHome: number | null;
+    htAway: number | null;
+    ftHome: number | null;
+    ftAway: number | null;
+    homeCorners?: number | null;
+    awayCorners?: number | null;
+    homeYellowCards?: number | null;
+    awayYellowCards?: number | null;
+    homeRedCards?: number | null;
+    awayRedCards?: number | null;
+    homeCards?: number | null;
+    awayCards?: number | null;
+  } | null;
+  markets?: unknown[];
+}
+
+const parlayMatches = ref<DesktopParlayMatch[]>([]);
+const parlayLoading = ref(false);
+let inflight: Promise<void> | null = null;
+
+async function loadParlayMatches(force = false): Promise<void> {
+  if (!force && parlayMatches.value.length > 0) return;
+  if (inflight) return inflight;
+
+  parlayLoading.value = true;
+  inflight = (async () => {
+    try {
+      const { data } = await api.get('/player/matches', { params: { scope: 'parlay' } });
+      parlayMatches.value = (data.data ?? []) as DesktopParlayMatch[];
+    } catch {
+      parlayMatches.value = [];
+    } finally {
+      parlayLoading.value = false;
+      inflight = null;
+    }
+  })();
+
+  return inflight;
+}
+
+export function useDesktopParlayMatches() {
+  return {
+    parlayMatches,
+    parlayLoading,
+    loadParlayMatches,
+  };
+}
diff --git a/apps/player/src/composables/useFloatingMailbox.ts b/apps/player/src/composables/useFloatingMailbox.ts
new file mode 100644
index 0000000..8ef4693
--- /dev/null
+++ b/apps/player/src/composables/useFloatingMailbox.ts
@@ -0,0 +1,24 @@
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+export function useFloatingMailbox() {
+  function toggle() {
+    isOpen.value = !isOpen.value;
+  }
+
+  function open() {
+    isOpen.value = true;
+  }
+
+  function close() {
+    isOpen.value = false;
+  }
+
+  return {
+    isOpen,
+    toggle,
+    open,
+    close,
+  };
+}
diff --git a/apps/player/src/composables/useMatchFilters.ts b/apps/player/src/composables/useMatchFilters.ts
new file mode 100644
index 0000000..5bea6a4
--- /dev/null
+++ b/apps/player/src/composables/useMatchFilters.ts
@@ -0,0 +1,33 @@
+import { ref } from 'vue';
+
+const searchQuery = ref('');
+const filterState = ref({
+  time: 'all' as 'all' | 'today' | 'early',
+  status: 'open' as 'all' | 'open' | 'settled',
+  leagueIds: [] as string[]
+});
+
+export function useMatchFilters() {
+  function clearFilters() {
+    searchQuery.value = '';
+    filterState.value.time = 'all';
+    filterState.value.status = 'open';
+    filterState.value.leagueIds = [];
+  }
+
+  function toggleLeague(leagueId: string) {
+    const idx = filterState.value.leagueIds.indexOf(leagueId);
+    if (idx > -1) {
+      filterState.value.leagueIds.splice(idx, 1);
+    } else {
+      filterState.value.leagueIds.push(leagueId);
+    }
+  }
+
+  return {
+    searchQuery,
+    filterState,
+    clearFilters,
+    toggleLeague,
+  };
+}
diff --git a/apps/player/src/composables/useOutrightEvents.ts b/apps/player/src/composables/useOutrightEvents.ts
new file mode 100644
index 0000000..f4d28fa
--- /dev/null
+++ b/apps/player/src/composables/useOutrightEvents.ts
@@ -0,0 +1,68 @@
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import type { OutrightEvent } from '../components/outright/OutrightEventSection.vue';
+import type { OutrightSelection } from '../components/outright/OutrightEventSection.vue';
+import { useOnLocaleChange } from './useOnLocaleChange';
+
+export function useOutrightEvents() {
+  const { t } = useI18n();
+  const loading = ref(true);
+  const loadError = ref('');
+  const events = ref<OutrightEvent[]>([]);
+
+  function mergeOddsOnly(fresh: OutrightEvent[]) {
+    const freshMap = new Map<string, OutrightEvent>();
+    for (const e of fresh) freshMap.set(e.id, e);
+
+    for (const event of events.value) {
+      const freshEvent = freshMap.get(event.id);
+      if (!freshEvent) continue;
+      const selMap = new Map<string, OutrightSelection>();
+      for (const s of freshEvent.selections) selMap.set(s.id, s);
+      for (const sel of event.selections) {
+        const fs = selMap.get(sel.id);
+        if (fs) {
+          sel.odds = fs.odds;
+          sel.oddsVersion = fs.oddsVersion;
+        }
+      }
+    }
+  }
+
+  async function load(options?: { silent?: boolean }) {
+    const hadData = events.value.length > 0;
+    if (!hadData && !options?.silent) loading.value = true;
+    loadError.value = '';
+    try {
+      const { data } = await api.get('/player/outrights');
+      const list = (data?.data ?? []) as OutrightEvent[];
+      const fresh = list.filter((e) => e.selections?.length > 0);
+      if (!hadData) {
+        events.value = fresh;
+      } else {
+        mergeOddsOnly(fresh);
+      }
+    } catch (e: unknown) {
+      if (!hadData) events.value = [];
+      const err = e as { response?: { status?: number; data?: { error?: string } } };
+      if (err.response?.status === 403) {
+        loadError.value = t('bet.outright_player_only');
+      } else {
+        loadError.value = err.response?.data?.error ?? t('bet.outright_load_failed');
+      }
+    } finally {
+      if (!hadData && !options?.silent) loading.value = false;
+    }
+  }
+
+  useOnLocaleChange(load);
+
+  return {
+    loading,
+    loadError,
+    events,
+    load,
+    mergeOddsOnly,
+  };
+}
diff --git a/apps/player/src/composables/usePlayerHome.ts b/apps/player/src/composables/usePlayerHome.ts
index a08f0c3..fdcf5aa 100644
--- a/apps/player/src/composables/usePlayerHome.ts
+++ b/apps/player/src/composables/usePlayerHome.ts
@@ -97,6 +97,41 @@ function collectAnnouncementItems(data: HomePayload | null): PlayerAnnouncementI
   return source.filter((item) => item.translation?.title || item.translation?.body);
 }
 
+function collectHubContentItems(data: HomePayload | null): PlayerContentItem[] {
+  if (!data) return [];
+  const seen = new Set<string>();
+  const merged: PlayerContentItem[] = [];
+
+  const pushItems = (items: PlayerContentItem[] | undefined, fallbackType?: string) => {
+    for (const item of items ?? []) {
+      if (!item?.id || seen.has(item.id)) continue;
+      const hasContent =
+        item.translation?.title?.trim() ||
+        item.translation?.body?.trim() ||
+        item.translation?.imageUrl?.trim();
+      if (!hasContent) continue;
+      seen.add(item.id);
+      merged.push({
+        ...item,
+        contentType: item.contentType || fallbackType,
+      });
+    }
+  };
+
+  pushItems(data.banners, 'BANNER');
+  pushItems(data.ticker, 'TICKER');
+  pushItems(data.notices, 'NOTICE');
+  pushItems(data.announcements);
+
+  merged.sort((a, b) => {
+    const timeA = a.createdAt ? Date.parse(a.createdAt) : 0;
+    const timeB = b.createdAt ? Date.parse(b.createdAt) : 0;
+    if (timeB !== timeA) return timeB - timeA;
+    return (a.sortOrder ?? 0) - (b.sortOrder ?? 0);
+  });
+  return merged;
+}
+
 /** 管理端公共内容 → 玩家端首页/跑马灯（单例，避免重复请求） */
 export function usePlayerHome() {
   const { t } = useI18n();
@@ -135,6 +170,7 @@ export function usePlayerHome() {
     resolveAnnouncements(collectAnnouncementLines(homeRaw.value), t('home.announcement_default')),
   );
   const announcementItems = computed(() => collectAnnouncementItems(homeRaw.value));
+  const hubContentItems = computed(() => collectHubContentItems(homeRaw.value));
   const hotMatches = computed(() => homeRaw.value?.hotMatches ?? []);
   const upcomingMatches = computed(() => homeRaw.value?.upcomingMatches ?? []);
 
@@ -146,6 +182,7 @@ export function usePlayerHome() {
     bannerItems,
     announcements,
     announcementItems,
+    hubContentItems,
     hotMatches,
     upcomingMatches,
   };
diff --git a/apps/player/src/composables/useViewport.ts b/apps/player/src/composables/useViewport.ts
new file mode 100644
index 0000000..5cd6722
--- /dev/null
+++ b/apps/player/src/composables/useViewport.ts
@@ -0,0 +1,28 @@
+import { ref, watch } from 'vue';
+
+const DESKTOP_MIN = 1024;
+const isDesktop = ref(typeof window !== 'undefined' ? window.innerWidth >= DESKTOP_MIN : false);
+
+function syncViewportClass(desktop: boolean) {
+  if (typeof document === 'undefined') return;
+  document.documentElement.classList.toggle('is-desktop', desktop);
+  document.documentElement.classList.toggle('is-mobile', !desktop);
+}
+
+function updateViewport() {
+  isDesktop.value = window.innerWidth >= DESKTOP_MIN;
+  syncViewportClass(isDesktop.value);
+}
+
+if (typeof window !== 'undefined') {
+  updateViewport();
+  window.addEventListener('resize', updateViewport);
+}
+
+watch(isDesktop, syncViewportClass, { immediate: true });
+
+export function useViewport() {
+  return {
+    isDesktop,
+  };
+}
diff --git a/apps/player/src/i18n/en-US.ts b/apps/player/src/i18n/en-US.ts
index 5dd5d6e..9e69320 100644
--- a/apps/player/src/i18n/en-US.ts
+++ b/apps/player/src/i18n/en-US.ts
@@ -10,8 +10,26 @@ export default {
     back_to_top: 'Back to top',
     cancel: 'Cancel',
     confirm: 'Confirm',
+    clear: 'Clear',
+    no_data: 'No data',
+    back: 'Back',
+    save: 'Save',
+    expand: 'Expand',
+    collapse: 'Collapse',
+    not_found: 'Not found',
+    load_more: 'Load more',
+    approved: 'Approved',
+    rejected: 'Rejected',
+    pending: 'Pending',
+    cancelled: 'Cancelled',
+    error: 'Something went wrong',
+    status: 'Status',
   },
-  nav: { home: 'Home', bet: 'Bet', bet_history: 'History', wallet: 'Wallet', profile: 'Profile' },
+  pagination: {
+    total: '{total} total',
+    per_page: '{size} / page',
+  },
+  nav: { home: 'Home', sports: 'Sports', football: 'Football', bet: 'Bet', bet_history: 'History', wallet: 'Transactions', account_hub: 'Bets & Wallet', profile: 'Profile', search: 'Search teams, leagues…', announcements: 'Announcements', sports_more_soon: 'More sports coming soon' },
   home: {
     hot_matches: 'Hot matches',
     hot_tab: 'Hot',
@@ -32,6 +50,7 @@ export default {
     empty: 'No announcements yet',
     not_found: 'This announcement is unavailable',
     view_all: 'View all announcements',
+    select_hint: 'Select an announcement to read',
     type_notice: 'Notice',
     type_ticker: 'Ticker',
     type_banner: 'Banner',
@@ -39,6 +58,9 @@ export default {
     go_link: 'Go to page',
     open_link: 'Open link',
     back: 'Back',
+    center_desc: 'Platform notices, promotions, and maintenance updates',
+    total_count: '{count} total',
+    read_more: 'Read more',
   },
   search: {
     placeholder: 'Search teams or leagues',
@@ -60,6 +82,7 @@ export default {
     not_found: 'Message not found',
     view_all: 'Back to inbox',
     back: 'Back',
+    select_hint: 'Select a message to read',
     mark_all_read: 'Mark all read',
     load_more: 'Load more',
     delete: 'Delete',
@@ -79,6 +102,8 @@ export default {
     view_recharge_history: 'View recharge history',
     unread_badge: '{count} unread',
     open_inbox: 'Open inbox',
+    tab_inbox: 'Inbox',
+    tab_support: 'Support',
   },
   inbox_hub: {
     title: 'Messages & Support',
@@ -116,6 +141,9 @@ export default {
     filter_lost: 'Lost',
     filter_pending: 'Pending',
     filter_push: 'Push',
+    filter_status_group: 'Settlement',
+    filter_push_group: 'Special',
+    filter_push_hint: 'Push: stake refunded on a draw line',
     stats_total: 'Total',
     stats_won: 'Won',
     stats_lost: 'Lost',
@@ -256,6 +284,20 @@ export default {
     cashback_filter_hint: 'This list shows wallet credits; see cashback details for period and rate.',
     ref_cashback: 'Cashback batch',
     detail_cashback_link: 'View cashback details',
+    frozen: 'Frozen',
+    cashback_total: 'Total cashback',
+    type: 'Type',
+    note: 'Note',
+    amount: 'Amount',
+    time: 'Time',
+    transaction_detail: 'Transaction details',
+    balance_before: 'Balance before',
+    balance_after: 'Balance after',
+    transaction_id: 'Transaction ID',
+    detail_title: 'Wallet details',
+    recharge_btn: 'Deposit',
+    recharge_history: 'Deposit history',
+    cashbacks_tab: 'Cashback',
   },
   recharge: {
     title: 'Recharge',
@@ -312,6 +354,15 @@ export default {
     reapply: 'Re-apply',
     reapply_hint: 'You are resubmitting this order. Transfer again and upload a new screenshot.',
     back_to_history: 'Back to history',
+    order_no: 'Order no.',
+    method: 'Method',
+    amount: 'Amount',
+    screenshot: 'Upload proof',
+    click_to_upload: 'Click to upload',
+    choose_method: 'Choose payment account',
+    success_title: 'Submitted',
+    success_hint: 'Please wait for review. You will be notified once credited.',
+    no_history: 'No deposit records',
   },
   cashback: {
     title: 'Cashback Details',
@@ -324,6 +375,10 @@ export default {
     empty: 'No cashback records yet',
     empty_hint: 'Cashback is issued by the platform after each settlement period.',
     ledger_hint: 'Matches wallet entries under the Cashback filter; amounts are the same.',
+    match: 'Match',
+    amount: 'Cashback amount',
+    rate: 'Cashback rate',
+    batch_no: 'Batch no.',
   },
   bet: {
     bet_slip: 'Bet Slip',
@@ -333,8 +388,30 @@ export default {
     parlay: 'Parlay',
     tab_matches: 'Matches',
     tab_outright: 'Outright',
+    sport_football: 'Football',
+    sport_basketball: 'Basketball',
+    sport_tennis: 'Tennis',
+    sport_coming_soon: 'Coming soon',
     tab_today: 'Today',
     tab_early: 'Early',
+    filter_time: 'Time',
+    filter_league: 'Leagues',
+    filter_market: 'Markets',
+    time_all: 'All',
+    time_today: 'Today',
+    time_early: 'Early',
+    market_all: 'All markets',
+    market_handicap_ou: 'Handicap / O-U',
+    correct_score: 'Correct score',
+    no_markets: 'No markets available',
+    no_markets_filtered: 'No markets match the current filter',
+    popover_title: 'Confirm bet',
+    place_now: 'Bet now',
+    add_to_single: 'Add to singles',
+    add_to_parlay: 'Add to parlay',
+    slip_parlay_added_short: 'In parlay · View',
+    add_to_single_list: 'Add to singles',
+    add_to_parlay_list: 'Add to parlay',
     filter_status_all: 'All',
     filter_status_open: 'Open',
     filter_status_settled: 'Settled',
@@ -446,24 +523,37 @@ export default {
     slip_pick_hint: 'Tap to add/remove from slip; gold border = selected',
     picked_tag: 'Selected',
     pick_added: 'Added to bet slip',
+    added_to_single: 'Added to singles list',
+    added_to_parlay: 'Added to parlay list',
     pick_removed: 'Removed from bet slip',
     slip_bar_ready: '1 selection',
     slip_bar_go: 'Bet slip',
     cs_top_hint: '① Enter stake  ② Tap Confirm bet above',
     slip_empty_hint: 'Tap odds to open the bet drawer',
+    slip_clear: 'Clear all',
     slip_remove: 'Remove',
+    slip_locate: 'Locate odds',
+    slip_locate_aria: 'Scroll to this selection in the odds list',
     slip_est_return: 'Est. max payout',
     slip_parlay_odds: 'Combined odds {odds}',
     slip_review_title: 'Review selection',
     slip_balance: 'Account balance',
     slip_tab_single: 'Single',
     slip_tab_parlay: 'Parlay',
+    slip_tab_history: 'History',
+    slip_history_all: 'All',
+    slip_history_match: 'This match',
+    slip_history_view_all: 'View all',
+    slip_history_load_more: 'Load more',
     slip_parlay_empty_hint: 'Pick a selection, then tap Add to parlay',
     slip_add_parlay: 'Add to parlay',
     slip_parlay_only_hint: 'This market is parlay-only. Tap Add to parlay to bet.',
     slip_parlay_same_match: 'Parlay selections cannot be from the same match. Remove the same-match leg first.',
     slip_parlay_count: '{n} parlay leg(s)',
     slip_total_stake: 'Total stake',
+    slip_place_single: 'Single bet',
+    slip_place_all: 'Bet all',
+    slip_parlay_added_btn: 'Added',
     slip_currency: 'Amount',
     slip_min: 'Min',
     slip_min_error: 'Minimum stake is {amount}',
@@ -472,11 +562,34 @@ export default {
     accept_changes_place: 'Accept changes & place bet',
     odds_was: 'Was',
     odds_now: 'Now',
+    place_confirm_title: 'Confirm bet',
+    place_confirm_single:
+      "Selection: {pick} ({'@'}{odds})\nStake: {stake}\nEst. return: {return}\n\nPlace this bet?",
+    place_confirm_singles:
+      '{count} single bet(s)\nTotal stake: {stake}\nEst. return: {return}\n\nPlace all?',
+    place_confirm_parlay:
+      'Parlay ({count} legs), total odds {odds}\nStake: {stake}\nEst. return: {return}\n\nPlace parlay?',
     place_success: 'Bet placed',
     place_failed: 'Bet failed',
+    bet_no: 'Bet no.',
+    match: 'Match',
+    selection: 'Selection',
+    odds: 'Odds',
+    potential_payout: 'Potential payout',
+    placed_at: 'Placed at',
+    detail_title: 'Bet details',
+    selections: 'Selections',
   },
   profile: {
     edit: 'Edit Profile',
+    edit_title: 'Edit profile',
+    save_success: 'Saved successfully',
+    basic_info: 'Basic info',
+    change_avatar: 'Change avatar',
+    username: 'Username',
+    username_locked: 'Username cannot be changed',
+    account: 'Account',
+    quick_nav: 'Quick links',
     language: 'Language',
     avatar: 'Avatar',
     avatar_change: 'Change avatar',
diff --git a/apps/player/src/i18n/ms-MY.ts b/apps/player/src/i18n/ms-MY.ts
index b57d83e..113e3b6 100644
--- a/apps/player/src/i18n/ms-MY.ts
+++ b/apps/player/src/i18n/ms-MY.ts
@@ -10,13 +10,37 @@ export default {
     back_to_top: 'Kembali ke atas',
     cancel: 'Batal',
     confirm: 'Sahkan',
+    clear: 'Kosongkan',
+    no_data: 'Tiada data',
+    back: 'Kembali',
+    save: 'Simpan',
+    expand: 'Kembangkan',
+    collapse: 'Runtuhkan',
+    not_found: 'Tidak dijumpai',
+    load_more: 'Muat lagi',
+    approved: 'Diluluskan',
+    rejected: 'Ditolak',
+    pending: 'Menunggu',
+    cancelled: 'Dibatalkan',
+    error: 'Operasi gagal',
+    status: 'Status',
+  },
+  pagination: {
+    total: '{total} jumlah',
+    per_page: '{size} / halaman',
   },
   nav: {
     home: 'Laman Utama',
+    sports: 'Sukan',
+    football: 'Bola Sepak',
     bet: 'Pertaruhan',
     bet_history: 'Sejarah',
-    wallet: 'Bil',
+    wallet: 'Transaksi',
+    account_hub: 'Pertaruhan & Bil',
     profile: 'Profil',
+    search: 'Cari pasukan, liga…',
+    announcements: 'Pengumuman',
+    sports_more_soon: 'Lebih banyak sukan akan datang',
   },
   home: {
     hot_matches: 'Perlawanan popular',
@@ -38,6 +62,7 @@ export default {
     empty: 'Tiada pengumuman',
     not_found: 'Pengumuman tidak tersedia',
     view_all: 'Lihat semua pengumuman',
+    select_hint: 'Pilih pengumuman untuk dibaca',
     type_notice: 'Notis',
     type_ticker: 'Ticker',
     type_banner: 'Banner',
@@ -45,6 +70,9 @@ export default {
     go_link: 'Pergi ke halaman',
     open_link: 'Buka pautan',
     back: 'Kembali',
+    center_desc: 'Notis platform, promosi dan penyelenggaraan',
+    total_count: '{count} jumlah',
+    read_more: 'Baca lagi',
   },
   search: {
     placeholder: 'Cari pasukan atau liga',
@@ -66,6 +94,7 @@ export default {
     not_found: 'Mesej tidak dijumpai',
     view_all: 'Kembali ke peti mesej',
     back: 'Kembali',
+    select_hint: 'Pilih mesej untuk dibaca',
     mark_all_read: 'Tanda semua dibaca',
     load_more: 'Muat lagi',
     delete: 'Padam',
@@ -85,6 +114,8 @@ export default {
     view_recharge_history: 'Lihat sejarah deposit',
     unread_badge: '{count} belum dibaca',
     open_inbox: 'Buka peti mesej',
+    tab_inbox: 'Peti masuk',
+    tab_support: 'Sokongan',
   },
   inbox_hub: {
     title: 'Mesej & Sokongan',
@@ -122,6 +153,9 @@ export default {
     filter_lost: 'Kalah',
     filter_pending: 'Menunggu',
     filter_push: 'Seri',
+    filter_status_group: 'Penyelesaian',
+    filter_push_group: 'Khas',
+    filter_push_hint: 'Seri: jumlah dikembalikan pada garis seri',
     stats_total: 'Jumlah',
     stats_won: 'Menang',
     stats_lost: 'Kalah',
@@ -262,6 +296,20 @@ export default {
     cashback_filter_hint: 'Senarai ini ialah kredit dompet; tempoh dan kadar ada di butiran rebat.',
     ref_cashback: 'Batch rebat',
     detail_cashback_link: 'Lihat butiran rebat',
+    frozen: 'Beku',
+    cashback_total: 'Jumlah rebat',
+    type: 'Jenis',
+    note: 'Nota',
+    amount: 'Amaun',
+    time: 'Masa',
+    transaction_detail: 'Butiran transaksi',
+    balance_before: 'Baki sebelum',
+    balance_after: 'Baki selepas',
+    transaction_id: 'ID transaksi',
+    detail_title: 'Butiran bil',
+    recharge_btn: 'Topup',
+    recharge_history: 'Sejarah topup',
+    cashbacks_tab: 'Rebat',
   },
   recharge: {
     title: 'Topup',
@@ -318,6 +366,15 @@ export default {
     reapply: 'Mohon semula',
     reapply_hint: 'Anda menghantar semula pesanan ini. Buat pindahan baharu dan muat naik tangkapan skrin baharu.',
     back_to_history: 'Kembali ke sejarah',
+    order_no: 'No. pesanan',
+    method: 'Kaedah',
+    amount: 'Amaun',
+    screenshot: 'Muat naik bukti',
+    click_to_upload: 'Klik untuk muat naik',
+    choose_method: 'Pilih akaun pembayaran',
+    success_title: 'Dihantar',
+    success_hint: 'Sila tunggu semakan. Anda akan dimaklumkan selepas dikreditkan.',
+    no_history: 'Tiada rekod topup',
   },
   cashback: {
     title: 'Butiran Rebat',
@@ -330,6 +387,10 @@ export default {
     empty: 'Tiada rekod rebat',
     empty_hint: 'Rebat dikeluarkan oleh platform mengikut kitaran penyelesaian.',
     ledger_hint: 'Sepadan dengan entri dompet di penapis Rebat; jumlah adalah sama.',
+    match: 'Perlawanan',
+    amount: 'Amaun rebat',
+    rate: 'Kadar rebat',
+    batch_no: 'No. kelompok',
   },
   bet: {
     bet_slip: 'Slip Pertaruhan',
@@ -339,8 +400,30 @@ export default {
     parlay: 'Berganda',
     tab_matches: 'Perlawanan',
     tab_outright: 'Juara',
+    sport_football: 'Bola Sepak',
+    sport_basketball: 'Bola Keranjang',
+    sport_tennis: 'Tenis',
+    sport_coming_soon: 'Akan datang',
     tab_today: 'Hari Ini',
     tab_early: 'Awal',
+    filter_time: 'Masa',
+    filter_league: 'Liga',
+    filter_market: 'Pasaran',
+    time_all: 'Semua',
+    time_today: 'Hari ini',
+    time_early: 'Awal',
+    market_all: 'Semua pasaran',
+    market_handicap_ou: 'Handicap / O-U',
+    correct_score: 'Skor tepat',
+    no_markets: 'Tiada pasaran tersedia',
+    no_markets_filtered: 'Tiada pasaran sepadan dengan penapis semasa',
+    popover_title: 'Sahkan pertaruhan',
+    place_now: 'Pertaruhan sekarang',
+    add_to_single: 'Tambah tunggal',
+    add_to_parlay: 'Tambah parlay',
+    slip_parlay_added_short: 'Dalam parlay · Lihat',
+    add_to_single_list: 'Tambah ke senarai tunggal',
+    add_to_parlay_list: 'Tambah ke berganda',
     filter_status_all: 'Semua',
     filter_status_open: 'Buka',
     filter_status_settled: 'Selesai',
@@ -452,24 +535,37 @@ export default {
     slip_pick_hint: 'Ketik untuk tambah/buang; sisi emas = dipilih',
     picked_tag: 'Dipilih',
     pick_added: 'Ditambah ke slip',
+    added_to_single: 'Ditambah ke senarai tunggal',
+    added_to_parlay: 'Ditambah ke senarai parlay',
     pick_removed: 'Dikeluarkan dari slip',
     slip_bar_ready: '1 pilihan',
     slip_bar_go: 'Buka slip',
     cs_top_hint: '① Isi jumlah  ② Ketik Sahkan di atas',
     slip_empty_hint: 'Ketik odds untuk buka laci pertaruhan',
+    slip_clear: 'Kosongkan semua',
     slip_remove: 'Buang',
+    slip_locate: 'Lokasi odds',
+    slip_locate_aria: 'Tatal ke pilihan ini dalam senarai odds',
     slip_est_return: 'Anggaran bayaran maksimum',
     slip_parlay_odds: 'Odds gabungan {odds}',
     slip_review_title: 'Semak pilihan',
     slip_balance: 'Baki akaun',
     slip_tab_single: 'Tunggal',
     slip_tab_parlay: 'Parlay',
+    slip_tab_history: 'Sejarah',
+    slip_history_all: 'Semua',
+    slip_history_match: 'Perlawanan ini',
+    slip_history_view_all: 'Lihat semua',
+    slip_history_load_more: 'Muat lagi',
     slip_parlay_empty_hint: 'Pilih satu odds, kemudian ketik Tambah ke parlay',
     slip_add_parlay: 'Tambah ke parlay',
     slip_parlay_only_hint: 'Pasaran ini hanya parlay. Ketik Tambah ke parlay untuk bertaruh.',
     slip_parlay_same_match: 'Pilihan parlay tidak boleh daripada perlawanan sama. Buang pilihan perlawanan sama dahulu.',
     slip_parlay_count: '{n} pilihan parlay',
     slip_total_stake: 'Jumlah pertaruhan',
+    slip_place_single: 'Taruhan tunggal',
+    slip_place_all: 'Taruhan semua',
+    slip_parlay_added_btn: 'Ditambah',
     slip_currency: 'Amaun',
     slip_min: 'Min',
     slip_min_error: 'Jumlah minimum ialah {amount}',
@@ -478,11 +574,34 @@ export default {
     accept_changes_place: 'Terima perubahan & pertaruh',
     odds_was: 'Asal',
     odds_now: 'Baharu',
+    place_confirm_title: 'Sahkan pertaruhan',
+    place_confirm_single:
+      "Pilihan: {pick} ({'@'}{odds})\nJumlah: {stake}\nAnggaran pulangan: {return}\n\nSahkan pertaruhan ini?",
+    place_confirm_singles:
+      '{count} pertaruhan tunggal\nJumlah keseluruhan: {stake}\nAnggaran pulangan: {return}\n\nSahkan semua?',
+    place_confirm_parlay:
+      'Parlay {count} perlawanan, odds {odds}\nJumlah: {stake}\nAnggaran pulangan: {return}\n\nSahkan parlay?',
     place_success: 'Pertaruhan berjaya',
     place_failed: 'Pertaruhan gagal',
+    bet_no: 'No. pertaruhan',
+    match: 'Perlawanan',
+    selection: 'Pilihan',
+    odds: 'Odds',
+    potential_payout: 'Bayaran anggaran',
+    placed_at: 'Masa pertaruhan',
+    detail_title: 'Butiran pertaruhan',
+    selections: 'Pilihan',
   },
   profile: {
     edit: 'Edit Profil',
+    edit_title: 'Edit profil',
+    save_success: 'Berjaya disimpan',
+    basic_info: 'Maklumat asas',
+    change_avatar: 'Tukar avatar',
+    username: 'Nama pengguna',
+    username_locked: 'Nama pengguna tidak boleh diubah',
+    account: 'Akaun',
+    quick_nav: 'Pautan pantas',
     language: 'Bahasa',
     avatar: 'Avatar',
     avatar_change: 'Tukar avatar',
diff --git a/apps/player/src/i18n/zh-CN.ts b/apps/player/src/i18n/zh-CN.ts
index 9b9f51d..29a56ca 100644
--- a/apps/player/src/i18n/zh-CN.ts
+++ b/apps/player/src/i18n/zh-CN.ts
@@ -10,8 +10,26 @@ export default {
     back_to_top: '回到顶部',
     cancel: '取消',
     confirm: '确定',
+    clear: '清除',
+    no_data: '暂无数据',
+    back: '返回',
+    save: '保存',
+    expand: '展开',
+    collapse: '收起',
+    not_found: '未找到',
+    load_more: '加载更多',
+    approved: '已通过',
+    rejected: '已拒绝',
+    pending: '待审核',
+    cancelled: '已取消',
+    error: '操作失败',
+    status: '状态',
   },
-  nav: { home: '主页', bet: '投注', bet_history: '历史投注', wallet: '账单', profile: '我的' },
+  pagination: {
+    total: '共 {total} 条',
+    per_page: '{size} / 页',
+  },
+  nav: { home: '主页', sports: '体育赛事', football: '足球', bet: '投注', bet_history: '历史投注', wallet: '资金明细', account_hub: '投注账单', profile: '我的', search: '搜索球队、联赛…', announcements: '公告', sports_more_soon: '更多体育，敬请期待' },
   home: {
     hot_matches: '热门赛事',
     hot_tab: '热门',
@@ -32,6 +50,7 @@ export default {
     empty: '暂无公告',
     not_found: '公告不存在或已下线',
     view_all: '查看全部公告',
+    select_hint: '请选择一条公告查看详情',
     type_notice: '公告',
     type_ticker: '跑马灯',
     type_banner: 'Banner',
@@ -39,6 +58,9 @@ export default {
     go_link: '前往页面',
     open_link: '打开链接',
     back: '返回',
+    center_desc: '平台公告、活动与维护通知一览',
+    total_count: '共 {count} 条',
+    read_more: '查看详情',
   },
   search: {
     placeholder: '搜索球队或联赛',
@@ -60,6 +82,7 @@ export default {
     not_found: '消息不存在',
     view_all: '返回消息列表',
     back: '返回',
+    select_hint: '请选择一条消息查看详情',
     mark_all_read: '全部已读',
     load_more: '加载更多',
     delete: '删除',
@@ -79,6 +102,8 @@ export default {
     view_recharge_history: '查看充值记录',
     unread_badge: '{count} 条未读',
     open_inbox: '打开消息中心',
+    tab_inbox: '收件箱',
+    tab_support: '客服',
   },
   inbox_hub: {
     title: '消息与客服',
@@ -115,7 +140,10 @@ export default {
     filter_won: '已赢',
     filter_lost: '已输',
     filter_pending: '待定',
-    filter_push: '走盘',
+    filter_push: '走水',
+    filter_status_group: '结算状态',
+    filter_push_group: '特殊结算',
+    filter_push_hint: '走水：盘口平局，本金退回',
     stats_total: '总投注',
     stats_won: '赢',
     stats_lost: '输',
@@ -256,6 +284,20 @@ export default {
     cashback_filter_hint: '此处为入账流水；周期、比例等详见返水明细。',
     detail_cashback_link: '查看返水明细',
     ref_cashback: '返水批次',
+    frozen: '冻结',
+    cashback_total: '累计返水',
+    type: '类型',
+    note: '备注',
+    amount: '金额',
+    time: '时间',
+    transaction_detail: '交易详情',
+    balance_before: '变动前余额',
+    balance_after: '变动后余额',
+    transaction_id: '流水号',
+    detail_title: '账单明细',
+    recharge_btn: '充值',
+    recharge_history: '充值记录',
+    cashbacks_tab: '返水明细',
   },
   recharge: {
     title: '充值',
@@ -312,6 +354,15 @@ export default {
     reapply: '重新申请',
     reapply_hint: '将在原订单上重新提交，请重新转账并上传新的截图。',
     back_to_history: '返回充值记录',
+    order_no: '订单号',
+    method: '方式',
+    amount: '充值金额',
+    screenshot: '上传凭证截图',
+    click_to_upload: '点击上传截图',
+    choose_method: '选择收款账户',
+    success_title: '提交成功',
+    success_hint: '请等待审核，到账后会通知您',
+    no_history: '暂无充值记录',
   },
   cashback: {
     title: '返水明细',
@@ -324,6 +375,10 @@ export default {
     empty: '暂无返水记录',
     empty_hint: '返水由后台按周期统计并发放，到账后可在此查看。',
     ledger_hint: '每笔返水确认后，账单中会有对应的「返水入账」流水，金额一致。',
+    match: '赛事',
+    amount: '返水金额',
+    rate: '返水比例',
+    batch_no: '批次号',
   },
   bet: {
     bet_slip: '投注单',
@@ -333,8 +388,30 @@ export default {
     parlay: '串关',
     tab_matches: '球赛',
     tab_outright: '优胜冠军',
+    sport_football: '足球',
+    sport_basketball: '篮球',
+    sport_tennis: '网球',
+    sport_coming_soon: '即将上线',
     tab_today: '今日',
     tab_early: '早盘',
+    filter_time: '时间筛选',
+    filter_league: '联赛',
+    filter_market: '玩法筛选',
+    time_all: '全部',
+    time_today: '今天',
+    time_early: '早盘',
+    market_all: '所有盘口',
+    market_handicap_ou: '让球 / 大小',
+    correct_score: '波胆',
+    no_markets: '暂无可用盘口',
+    no_markets_filtered: '当前筛选下暂无盘口',
+    popover_title: '确认投注',
+    place_now: '立即下注',
+    add_to_single: '加入单关',
+    add_to_parlay: '加入串关',
+    slip_parlay_added_short: '已加入串关 · 点击查看',
+    add_to_single_list: '加入单关列表',
+    add_to_parlay_list: '加入串关列表',
     filter_status_all: '全部',
     filter_status_open: '待开赛',
     filter_status_settled: '已结束',
@@ -446,24 +523,37 @@ export default {
     slip_pick_hint: '点选项加入投注单；金边表示已选，再点一次可取消',
     picked_tag: '已选',
     pick_added: '已加入投注单',
+    added_to_single: '已加入单关列表',
+    added_to_parlay: '已加入串关列表',
     pick_removed: '已从投注单移除',
     slip_bar_ready: '已选一项',
     slip_bar_go: '投注单',
     cs_top_hint: '① 在比分格填金额  ② 点上方「确认下注」',
-    slip_empty_hint: '点击赔率打开投注抽屉',
+    slip_empty_hint: '点击赔率加入单关或串关列表',
+    slip_clear: '清空',
     slip_remove: '移除',
+    slip_locate: '定位到盘口',
+    slip_locate_aria: '定位到该选项在盘口列表中的位置',
     slip_est_return: '预计最大领取金额',
     slip_parlay_odds: '组合赔率 {odds}',
     slip_review_title: '确认下注内容',
     slip_balance: '账户余额',
     slip_tab_single: '单注',
     slip_tab_parlay: '串关',
+    slip_tab_history: '历史',
+    slip_history_all: '全部',
+    slip_history_match: '本场赛事',
+    slip_history_view_all: '查看全部',
+    slip_history_load_more: '加载更多',
     slip_parlay_empty_hint: '先选择一个下注项，再点「加入串关」',
     slip_add_parlay: '加入串关',
     slip_parlay_only_hint: '此盘口不支持单关，请点「加入串关」后再投注',
     slip_parlay_same_match: '串关选项不得为同一场比赛，请先移除同场选项后再加入。',
     slip_parlay_count: '{n} 项串关',
     slip_total_stake: '总投注金额',
+    slip_place_single: '单独下注',
+    slip_place_all: '全部下注',
+    slip_parlay_added_btn: '已加入',
     slip_currency: '金额',
     slip_min: '最低',
     slip_min_error: '最低投注金额为 {amount}',
@@ -472,11 +562,34 @@ export default {
     accept_changes_place: '接受变更并下注',
     odds_was: '原赔率',
     odds_now: '新赔率',
+    place_confirm_title: '确认下注',
+    place_confirm_single:
+      "选项：{pick}（{'@'}{odds}）\n投注金额：{stake}\n预计派彩：{return}\n\n确认提交此注单？",
+    place_confirm_singles:
+      '共 {count} 笔单关\n总投注：{stake}\n预计派彩：{return}\n\n确认提交？',
+    place_confirm_parlay:
+      '串关 {count} 场，总赔率 {odds}\n投注金额：{stake}\n预计派彩：{return}\n\n确认提交？',
     place_success: '下注成功',
     place_failed: '下注失败',
+    bet_no: '注单号',
+    match: '比赛',
+    selection: '投注选项',
+    odds: '赔率',
+    potential_payout: '预计派彩',
+    placed_at: '下注时间',
+    detail_title: '注单详情',
+    selections: '投注选项',
   },
   profile: {
     edit: '修改资料',
+    edit_title: '修改资料',
+    save_success: '保存成功',
+    basic_info: '基础信息',
+    change_avatar: '更换头像',
+    username: '用户名',
+    username_locked: '用户名不可修改',
+    account: '账户信息',
+    quick_nav: '快捷入口',
     language: '语言',
     avatar: '选择头像',
     avatar_change: '修改头像',
diff --git a/apps/player/src/layouts/MainLayout.vue b/apps/player/src/layouts/MainLayout.vue
index 3e0008a..8448002 100644
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -7,10 +7,11 @@ import CashBalanceChip from '../components/CashBalanceChip.vue';
 import UserAvatarMenu from '../components/UserAvatarMenu.vue';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import { useAppLocale } from '../composables/useAppLocale';
-import AnnouncementMarquee from '../components/AnnouncementMarquee.vue';
 import BottomNavIcon from '../components/BottomNavIcon.vue';
 import BackToTopButton from '../components/BackToTopButton.vue';
 import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useViewport } from '../composables/useViewport';
+import DesktopShell from '../components/desktop/DesktopShell.vue';
 
 const BetSlipDrawer = defineAsyncComponent(() => import('../components/BetSlipDrawer.vue'));
 import { usePlayerHome } from '../composables/usePlayerHome';
@@ -20,6 +21,7 @@ import { useDepositNotifications } from '../composables/useDepositNotifications'
 import { usePlayerMessages } from '../composables/usePlayerMessages';
 import { startPresencePing, stopPresencePing } from '../composables/usePresencePing';
 
+const { isDesktop } = useViewport();
 const { t, locale } = useI18n();
 const auth = useAuthStore();
 const { initFromUser } = useAppLocale();
@@ -41,9 +43,6 @@ const isDetailPage = computed(() => {
 });
 
 const showHeader = computed(() => !isDetailPage.value);
-const showAnnouncement = computed(
-  () => !isDetailPage.value && !route.path.startsWith('/profile') && !route.path.startsWith('/announcements'),
-);
 
 const showBottomNav = computed(() => {
   const p = route.path;
@@ -61,8 +60,7 @@ const showBottomNav = computed(() => {
   if (!inboxEnabled.value && p === '/messages') return true;
   return false;
 });
-const { announcements, announcementItems, load: loadPlayerHome } = usePlayerHome();
-const primaryAnnouncementId = computed(() => announcementItems.value[0]?.id ?? '');
+const { load: loadPlayerHome } = usePlayerHome();
 const { loadProfile, refreshProfile, bindProfileVisibilityRefresh } = usePlayerProfile();
 const { startPolling, stopPolling } = useDepositNotifications();
 const { unreadCount, refreshUnreadCount, resetMessagesState } = usePlayerMessages();
@@ -159,7 +157,8 @@ watch(
 </script>
 
 <template>
-  <div class="layout">
+  <DesktopShell v-if="isDesktop" />
+  <div v-else class="layout">
     <header v-if="showHeader" class="header">
       <img src="/logo.png" alt="TheBet365" class="logo" />
       <div class="header-actions">
@@ -193,14 +192,6 @@ watch(
       </div>
     </header>
 
-    <div v-if="showAnnouncement" class="announce-strip">
-      <AnnouncementMarquee
-        :items="announcements"
-        :target-id="primaryAnnouncementId"
-        embedded
-      />
-    </div>
-
     <main ref="mainRef" :class="['main', { 'has-nav': showBottomNav }]">
       <RouterView v-slot="{ Component, route: viewRoute }">
         <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
diff --git a/apps/player/src/main.ts b/apps/player/src/main.ts
index c5cc64a..a80e3b7 100644
--- a/apps/player/src/main.ts
+++ b/apps/player/src/main.ts
@@ -4,6 +4,7 @@ import { createI18n } from 'vue-i18n';
 import App from './App.vue';
 import router from './router/index.ts';
 import './styles.css';
+import './styles/desktop/index.css';
 import {
   loadLocaleMessages,
   markLocaleLoaded,
diff --git a/apps/player/src/router/index.ts b/apps/player/src/router/index.ts
index f4be67c..f1bbbee 100644
--- a/apps/player/src/router/index.ts
+++ b/apps/player/src/router/index.ts
@@ -4,9 +4,9 @@ import { useAuthStore } from '../stores/auth.ts';
 const router = createRouter({
   history: createWebHistory(),
   routes: [
-    { path: '/login', component: () => import('../views/LoginView.vue') },
-    { path: '/register', component: () => import('../views/RegisterView.vue') },
-    { path: '/forgot-password', component: () => import('../views/ForgotPasswordView.vue') },
+    { path: '/login', component: () => import('../views/LoginWrapperView.vue') },
+    { path: '/register', component: () => import('../views/RegisterWrapperView.vue') },
+    { path: '/forgot-password', component: () => import('../views/ForgotPasswordWrapperView.vue') },
     {
       path: '/',
       component: () => import('../layouts/MainLayout.vue'),
@@ -15,11 +15,25 @@ const router = createRouter({
         { path: '', component: () => import('../views/HomeView.vue'), meta: { keepAlive: true } },
         { path: 'bet', component: () => import('../views/FootballView.vue'), meta: { keepAlive: true } },
         { path: 'football', redirect: '/bet' },
-        { path: 'announcements', component: () => import('../views/AnnouncementListView.vue') },
-        { path: 'announcements/:id', component: () => import('../views/AnnouncementDetailView.vue') },
-        { path: 'messages', component: () => import('../views/InboxHubView.vue'), meta: { keepAlive: true, requiresAuth: false } },
-        { path: 'messages/:id', component: () => import('../views/MessageDetailView.vue'), meta: { requiresAuth: true } },
-        { path: 'match/:id', component: () => import('../views/MatchDetailView.vue') },
+    {
+      path: 'announcements',
+      component: () => import('../views/AnnouncementsHubView.vue'),
+      children: [
+        { path: '', component: () => import('../views/AnnouncementListView.vue'), meta: { keepAlive: true } },
+        { path: ':id', component: () => import('../views/AnnouncementDetailView.vue') },
+      ],
+    },
+    {
+      path: 'messages',
+      component: () => import('../views/MessagesHubView.vue'),
+      meta: { keepAlive: true, requiresAuth: false },
+      children: [
+        { path: '', component: () => import('../views/InboxHubView.vue') },
+        { path: ':id', component: () => import('../views/MessageDetailView.vue'), meta: { requiresAuth: true } },
+      ],
+    },
+    { path: 'match/:id', component: () => import('../views/MatchDetailView.vue') },
+    { path: 'outright/:id', component: () => import('../views/OutrightDetailView.vue') },
         // 需要登录的页面
         { path: 'bets', component: () => import('../views/MyBetsView.vue'), meta: { keepAlive: true, requiresAuth: true } },
         { path: 'bets/:betNo', component: () => import('../views/BetDetailView.vue'), meta: { requiresAuth: true } },
diff --git a/apps/player/src/stores/betSlip.ts b/apps/player/src/stores/betSlip.ts
index 3bb8a2c..4470346 100644
--- a/apps/player/src/stores/betSlip.ts
+++ b/apps/player/src/stores/betSlip.ts
@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import {
   PARLAY_MIN_LEGS,
   PARLAY_MAX_LEGS,
   canSelectForParlay,
   type ParlayRejectReason,
 } from '@thebet365/shared';
+import { useAuthStore } from './auth';
 
 export interface SlipItem {
   selectionId: string;
@@ -25,26 +26,191 @@ export interface SlipItem {
 export type SlipMode = 'single' | 'parlay';
 export type ParlaySlipError = ParlayRejectReason | 'MAX_LEGS' | 'SAME_MATCH';
 
+const BET_SLIP_STORAGE_PREFIX = 'player:betSlip:v1';
+
+interface BetSlipPersisted {
+  singleItem: SlipItem | null;
+  singleCartItems: SlipItem[];
+  parlayItems: SlipItem[];
+  stake: number;
+  singleStakes: Record<string, number>;
+  mode: SlipMode;
+}
+
+function betSlipStorageKey(userId?: string | null) {
+  return userId ? `${BET_SLIP_STORAGE_PREFIX}:${userId}` : `${BET_SLIP_STORAGE_PREFIX}:guest`;
+}
+
+function isValidSlipItem(item: unknown): item is SlipItem {
+  if (!item || typeof item !== 'object') return false;
+  const row = item as SlipItem;
+  return Boolean(
+    row.selectionId &&
+      row.oddsVersion &&
+      row.matchId &&
+      row.matchName &&
+      row.selectionName &&
+      typeof row.odds === 'number' &&
+      Number.isFinite(row.odds),
+  );
+}
+
+function readPersisted(userId?: string | null): BetSlipPersisted | null {
+  try {
+    const raw = localStorage.getItem(betSlipStorageKey(userId));
+    if (!raw) return null;
+    return JSON.parse(raw) as BetSlipPersisted;
+  } catch {
+    return null;
+  }
+}
+
+function writePersisted(payload: BetSlipPersisted, userId?: string | null) {
+  try {
+    localStorage.setItem(betSlipStorageKey(userId), JSON.stringify(payload));
+  } catch {
+    // ignore quota / private mode errors
+  }
+}
+
+function removePersisted(userId?: string | null) {
+  localStorage.removeItem(betSlipStorageKey(userId));
+}
+
 export const useBetSlipStore = defineStore('betSlip', () => {
   const singleItem = ref<SlipItem | null>(null);
+  const singleCartItems = ref<SlipItem[]>([]);
   const parlayItems = ref<SlipItem[]>([]);
   const stake = ref<number>(5);
+  const singleStakes = ref<Record<string, number>>({});
   const mode = ref<SlipMode>('single');
   const lastParlayError = ref<ParlaySlipError | null>(null);
 
+  const auth = useAuthStore();
+  let persistPaused = false;
+
+  function slipSnapshot(): BetSlipPersisted {
+    return {
+      singleItem: singleItem.value,
+      singleCartItems: singleCartItems.value,
+      parlayItems: parlayItems.value,
+      stake: stake.value,
+      singleStakes: singleStakes.value,
+      mode: mode.value,
+    };
+  }
+
+  function hydrateFromStorage(userId?: string | null) {
+    persistPaused = true;
+    try {
+      const saved = readPersisted(userId);
+      if (!saved) {
+        singleItem.value = null;
+        singleCartItems.value = [];
+        parlayItems.value = [];
+        singleStakes.value = {};
+        stake.value = 5;
+        mode.value = 'single';
+        lastParlayError.value = null;
+        return;
+      }
+      singleItem.value = saved.singleItem && isValidSlipItem(saved.singleItem) ? saved.singleItem : null;
+      singleCartItems.value = (saved.singleCartItems ?? []).filter(isValidSlipItem);
+      parlayItems.value = (saved.parlayItems ?? []).filter(isValidSlipItem);
+      stake.value =
+        typeof saved.stake === 'number' && Number.isFinite(saved.stake) && saved.stake > 0
+          ? saved.stake
+          : 5;
+      singleStakes.value =
+        saved.singleStakes && typeof saved.singleStakes === 'object' ? { ...saved.singleStakes } : {};
+      mode.value = saved.mode === 'parlay' ? 'parlay' : 'single';
+      lastParlayError.value = null;
+    } finally {
+      persistPaused = false;
+    }
+  }
+
+  function persistToStorage() {
+    if (persistPaused) return;
+    const userId = auth.user?.id ?? null;
+    const snapshot = slipSnapshot();
+    const hasItems =
+      Boolean(snapshot.singleItem) ||
+      snapshot.singleCartItems.length > 0 ||
+      snapshot.parlayItems.length > 0;
+    if (!hasItems) {
+      removePersisted(userId);
+      return;
+    }
+    writePersisted(snapshot, userId);
+  }
+
+  hydrateFromStorage(auth.user?.id ?? null);
+
+  watch(
+    () => auth.user?.id ?? null,
+    (userId) => {
+      hydrateFromStorage(userId);
+    },
+  );
+
+  watch(
+    [singleItem, singleCartItems, parlayItems, stake, singleStakes, mode],
+    () => {
+      persistToStorage();
+    },
+    { deep: true },
+  );
+
   const items = computed(() =>
     mode.value === 'parlay'
       ? parlayItems.value
-      : singleItem.value
-        ? [singleItem.value]
-        : [],
+      : singleCartItems.value.length
+        ? singleCartItems.value
+        : singleItem.value
+          ? [singleItem.value]
+          : [],
   );
   const count = computed(() => items.value.length);
   const parlayCount = computed(() => parlayItems.value.length);
-  const singleCount = computed(() => (singleItem.value ? 1 : 0));
+  const singleCount = computed(() =>
+    singleCartItems.value.length || (singleItem.value ? 1 : 0),
+  );
   const totalCount = computed(() => singleCount.value + parlayCount.value);
   const isParlay = computed(() => mode.value === 'parlay' && parlayItems.value.length >= PARLAY_MIN_LEGS);
 
+  function defaultStakeAmount() {
+    const base = Number(stake.value);
+    return Number.isFinite(base) && base > 0 ? base : 5;
+  }
+
+  function initItemStake(selectionId: string) {
+    if (singleStakes.value[selectionId] == null) {
+      singleStakes.value = { ...singleStakes.value, [selectionId]: defaultStakeAmount() };
+    }
+  }
+
+  function getItemStake(selectionId: string) {
+    const v = singleStakes.value[selectionId];
+    if (v != null && Number.isFinite(v)) return v;
+    return defaultStakeAmount();
+  }
+
+  function setItemStake(selectionId: string, amount: number) {
+    singleStakes.value = { ...singleStakes.value, [selectionId]: amount };
+  }
+
+  function clearItemStake(selectionId: string) {
+    if (!(selectionId in singleStakes.value)) return;
+    const next = { ...singleStakes.value };
+    delete next[selectionId];
+    singleStakes.value = next;
+  }
+
+  function clearAllItemStakes() {
+    singleStakes.value = {};
+  }
+
   function parseLineValue(v: number | string | null | undefined): number | null {
     if (v == null || v === '') return null;
     const n = typeof v === 'number' ? v : parseFloat(String(v));
@@ -60,6 +226,7 @@ export const useBetSlipStore = defineStore('betSlip', () => {
   function setSingleItem(item: SlipItem) {
     mode.value = 'single';
     singleItem.value = item;
+    initItemStake(item.selectionId);
     lastParlayError.value = null;
   }
 
@@ -67,6 +234,23 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     setSingleItem(item);
   }
 
+  /** PC 单关购买列表 */
+  function addToSingleCart(item: SlipItem) {
+    mode.value = 'single';
+    if (singleCartItems.value.some((i) => i.selectionId === item.selectionId)) return;
+    singleCartItems.value.push(item);
+    initItemStake(item.selectionId);
+    lastParlayError.value = null;
+  }
+
+  function isInSlip(selectionId: string) {
+    return (
+      singleItem.value?.selectionId === selectionId ||
+      singleCartItems.value.some((i) => i.selectionId === selectionId) ||
+      parlayItems.value.some((i) => i.selectionId === selectionId)
+    );
+  }
+
   /** 串关：必须来自不同赛事，仍按盘口规则过滤不可串关项 */
   function addParlayLeg(item: SlipItem): ParlaySlipError | null {
     mode.value = 'parlay';
@@ -111,13 +295,19 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     if (singleItem.value?.selectionId === selectionId) {
       singleItem.value = null;
     }
+    singleCartItems.value = singleCartItems.value.filter((i) => i.selectionId !== selectionId);
     parlayItems.value = parlayItems.value.filter((i) => i.selectionId !== selectionId);
+    clearItemStake(selectionId);
     if (mode.value === 'parlay' && !parlayItems.value.length) mode.value = 'single';
     lastParlayError.value = null;
   }
 
   function clearSingle() {
+    const legacy = singleItem.value;
+    for (const item of singleCartItems.value) clearItemStake(item.selectionId);
+    if (legacy) clearItemStake(legacy.selectionId);
     singleItem.value = null;
+    singleCartItems.value = [];
     if (mode.value === 'single') lastParlayError.value = null;
   }
 
@@ -137,9 +327,12 @@ export const useBetSlipStore = defineStore('betSlip', () => {
 
   function clearAll() {
     singleItem.value = null;
+    singleCartItems.value = [];
     parlayItems.value = [];
+    clearAllItemStakes();
     mode.value = 'single';
     lastParlayError.value = null;
+    removePersisted(auth.user?.id ?? null);
   }
 
   const totalOdds = computed(() =>
@@ -151,9 +344,16 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     if (mode.value === 'parlay' && canPlaceParlay.value) {
       return stake.value * totalOdds.value;
     }
-    return items.value.reduce((acc, i) => acc + stake.value * i.odds, 0);
+    return items.value.reduce(
+      (acc, i) => acc + getItemStake(i.selectionId) * i.odds,
+      0,
+    );
   });
 
+  const totalSingleStake = computed(() =>
+    items.value.reduce((acc, i) => acc + getItemStake(i.selectionId), 0),
+  );
+
   const canPlaceParlay = computed(
     () =>
       mode.value === 'parlay' &&
@@ -162,7 +362,7 @@ export const useBetSlipStore = defineStore('betSlip', () => {
   );
 
   const canPlaceBatchSingles = computed(
-    () => mode.value === 'single' && singleItem.value != null,
+    () => mode.value === 'single' && (singleCartItems.value.length > 0 || singleItem.value != null),
   );
 
   const canSubmit = computed(
@@ -183,6 +383,10 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     if (singleItem.value?.selectionId === selectionId) {
       singleItem.value = { ...singleItem.value, odds, oddsVersion };
     }
+    const cartIdx = singleCartItems.value.findIndex((i) => i.selectionId === selectionId);
+    if (cartIdx >= 0) {
+      singleCartItems.value[cartIdx] = { ...singleCartItems.value[cartIdx], odds, oddsVersion };
+    }
     const idx = parlayItems.value.findIndex((i) => i.selectionId === selectionId);
     if (idx >= 0) {
       parlayItems.value[idx] = { ...parlayItems.value[idx], odds, oddsVersion };
@@ -191,7 +395,9 @@ export const useBetSlipStore = defineStore('betSlip', () => {
 
   return {
     singleItem,
+    singleCartItems,
     parlayItems,
+    singleStakes,
     items,
     stake,
     mode,
@@ -202,6 +408,7 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     isParlay,
     totalOdds,
     potentialReturn,
+    totalSingleStake,
     canPlaceParlay,
     canPlaceBatchSingles,
     canSubmit,
@@ -210,6 +417,8 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     setMode,
     setSingleItem,
     addItem,
+    addToSingleCart,
+    isInSlip,
     addParlayLeg,
     addSingleToParlay,
     removeItem,
@@ -220,5 +429,8 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     openDrawer,
     closeDrawer,
     updateSelectionOdds,
+    getItemStake,
+    setItemStake,
+    initItemStake,
   };
 });
diff --git a/apps/player/src/styles.css b/apps/player/src/styles.css
index 4e0be1c..85fd6c7 100644
--- a/apps/player/src/styles.css
+++ b/apps/player/src/styles.css
@@ -221,6 +221,13 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+@media (min-width: 1024px) {
+  body {
+    background-image: url('./assets/images/pcbg.webp');
+    background-attachment: fixed;
+  }
+}
+
 #app {
   min-height: 100%;
   min-height: -webkit-fill-available;
diff --git a/apps/player/src/styles/desktop/index.css b/apps/player/src/styles/desktop/index.css
new file mode 100644
index 0000000..f98869f
--- /dev/null
+++ b/apps/player/src/styles/desktop/index.css
@@ -0,0 +1,4 @@
+@import './tokens.css';
+@import './layout.css';
+@import './interaction.css';
+@import './records.css';
diff --git a/apps/player/src/styles/desktop/interaction.css b/apps/player/src/styles/desktop/interaction.css
new file mode 100644
index 0000000..b453f1b
--- /dev/null
+++ b/apps/player/src/styles/desktop/interaction.css
@@ -0,0 +1,102 @@
+/* Hover Cursors and active resets */
+.desktop-shell a,
+.desktop-shell button,
+.desktop-shell select,
+.desktop-shell [role="button"],
+.desktop-shell .clickable {
+  cursor: pointer;
+  touch-action: auto;
+}
+
+/* Scrollbar customizations */
+.desktop-shell ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.desktop-shell ::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+}
+.desktop-shell ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+.desktop-shell ::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-light);
+}
+
+/* Hover highlights */
+.desktop-shell .hover-bg:hover {
+  background-color: var(--bg-hover) !important;
+}
+
+.desktop-shell .hover-gold-soft:hover {
+  border-color: var(--border-gold) !important;
+  box-shadow: var(--glow-gold);
+}
+
+.desktop-shell .hover-gold-text:hover {
+  color: var(--primary-light) !important;
+}
+
+/* Form elements styling */
+.desktop-shell input {
+  padding: 10px 12px;
+  font-size: 13px;
+  border-radius: 4px;
+}
+
+.desktop-shell input:focus {
+  border-color: var(--border-gold) !important;
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
+}
+
+/* Button hover overrides */
+.desktop-shell .btn-gold-outline {
+  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);
+}
+.desktop-shell .btn-gold-outline:active {
+  transform: none; /* No mobile shrink on PC */
+}
+
+.desktop-shell .btn-primary {
+  transition: filter 0.2s, transform 0.1s;
+}
+.desktop-shell .btn-primary:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+.desktop-shell .btn-primary:active {
+  transform: translateY(1px);
+}
+
+/* Skeleton rows animation for high density PC loaders */
+@keyframes desktop-skeleton-glow {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.desktop-skeleton {
+  background: linear-gradient(90deg, #161616 25%, #222222 37%, #161616 63%);
+  background-size: 400% 100%;
+  animation: desktop-skeleton-glow 1.4s ease infinite;
+}
+
+@keyframes bet-locate-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
+  }
+  50% {
+    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.45);
+  }
+}
+
+.desktop-shell .bet-locate-flash {
+  animation: bet-locate-pulse 0.6s ease 3;
+  border-color: var(--border-gold) !important;
+  position: relative;
+  z-index: 1;
+}
diff --git a/apps/player/src/styles/desktop/layout.css b/apps/player/src/styles/desktop/layout.css
new file mode 100644
index 0000000..89a0b9b
--- /dev/null
+++ b/apps/player/src/styles/desktop/layout.css
@@ -0,0 +1,184 @@
+/* Desktop Global layout structure */
+.desktop-shell {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: #000;
+  background-image: url('../../assets/images/pcbg.webp');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  overflow: hidden;
+}
+
+.desktop-header-wrap {
+  flex-shrink: 0;
+  height: var(--desktop-header-h);
+  background: #111111;
+  border-bottom: 1px solid var(--border);
+  z-index: 120;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+
+.desktop-marquee-wrap {
+  flex-shrink: 0;
+  z-index: 110;
+  border-bottom: 1px solid var(--border);
+  background: #111;
+}
+
+.desktop-main-container {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Betting Layout: Sports bar + Left Sidebar + Center View + Right Betslip */
+.desktop-layout-betting-wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.desktop-betting-sports-row {
+  flex-shrink: 0;
+  width: 100%;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(14, 14, 14, 0.85);
+}
+
+.desktop-layout-betting {
+  display: grid;
+  grid-template-columns: var(--desktop-left-sidebar-w) 1fr var(--desktop-right-betslip-w);
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+}
+
+.desktop-betting-left {
+  border-right: 1px solid var(--border);
+  background: rgba(14, 14, 14, 0.6);
+  overflow-y: auto;
+}
+
+.desktop-betting-center {
+  overflow-y: auto;
+  padding: 14px 16px;
+  min-width: 0;
+}
+
+.desktop-betting-center.is-betting-detail {
+  padding: 0;
+}
+
+.desktop-betting-right {
+  border-left: 1px solid var(--border);
+  background: rgba(14, 14, 14, 0.85);
+  overflow-y: auto;
+}
+
+/* Account Layout: full-width records center */
+.desktop-layout-account {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.desktop-account-center {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding: 28px 40px 40px;
+}
+
+.desktop-account-center > .desktop-records-page {
+  flex: 1;
+  min-height: 0;
+}
+
+.desktop-account-center > .desktop-account-page {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.desktop-layout-hub-outer {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Marketing / Home Layout: Single Column centered */
+.desktop-layout-marketing {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  align-items: center;
+  padding: 20px;
+}
+
+.desktop-marketing-content {
+  width: 100%;
+  max-width: 1400px;
+}
+
+/* Hub Layout: Left Sidebar (List) + Right Outlet (Detail) */
+.desktop-layout-hub {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  width: 100%;
+  height: 100%;
+}
+
+.desktop-hub-left {
+  border-right: 1px solid var(--border);
+  background: rgba(14, 14, 14, 0.6);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.desktop-hub-right {
+  overflow-y: auto;
+  padding: 20px;
+  background: rgba(10, 10, 10, 0.3);
+}
+
+/* Auth Layout: Centered container */
+.desktop-layout-auth {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: 40px;
+}
+
+.desktop-auth-card {
+  width: 100%;
+  max-width: 440px;
+  padding: 30px;
+  background: rgba(20, 20, 20, 0.95);
+  border: 1px solid var(--border-gold-soft);
+  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
new file mode 100644
index 0000000..c2b98d7
--- /dev/null
+++ b/apps/player/src/styles/desktop/records.css
@@ -0,0 +1,309 @@
+/* PC account records: bets, wallet, recharge, cashbacks */
+.desktop-records-page {
+  width: 100%;
+  max-width: 1480px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.desktop-records-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px 32px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.desktop-records-header-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  flex: 1;
+}
+
+.desktop-records-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.desktop-records-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  border-radius: 6px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.08);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.desktop-records-action-btn:hover {
+  background: rgba(212, 175, 55, 0.14);
+  border-color: var(--border-gold);
+}
+
+.desktop-records-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.desktop-records-filter-groups {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 14px;
+}
+
+.desktop-records-filter-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.desktop-records-filter-group-label {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--text-muted);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.desktop-records-filter-divider {
+  width: 1px;
+  height: 22px;
+  background: rgba(255, 255, 255, 0.12);
+  flex-shrink: 0;
+}
+
+.desktop-records-filter-chip {
+  padding: 7px 16px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s, background 0.2s;
+  white-space: nowrap;
+}
+
+.desktop-records-filter-chip:hover {
+  color: #fff;
+  border-color: rgba(212, 175, 55, 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);
+}
+
+.desktop-wallet-subnav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.desktop-wallet-subnav-link {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-decoration: none;
+  border: 1px solid transparent;
+  transition: color 0.2s, background 0.2s, border-color 0.2s;
+}
+
+.desktop-wallet-subnav-link:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.desktop-wallet-subnav-link.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: rgba(212, 175, 55, 0.28);
+}
+
+.desktop-records-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  background: rgba(18, 18, 18, 0.94);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.desktop-records-table-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.desktop-records-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.desktop-records-table th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 12px 16px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--primary-light);
+  background: #121212;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.desktop-records-table th.num-th {
+  text-align: right;
+}
+
+.desktop-records-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  color: var(--text);
+  vertical-align: middle;
+}
+
+.desktop-records-table tbody tr:nth-child(even) {
+  background: rgba(255, 255, 255, 0.015);
+}
+
+.desktop-records-table tbody tr.hover-row {
+  transition: background 0.15s;
+}
+
+.desktop-records-table tbody tr.hover-row:hover {
+  background: rgba(212, 175, 55, 0.06);
+}
+
+.desktop-records-table .num-cell {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+.desktop-records-table .date-cell {
+  white-space: nowrap;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.desktop-records-table .link-cell {
+  color: var(--primary-light);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.desktop-records-table .link-cell:hover {
+  text-decoration: underline;
+}
+
+.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);
+}
+
+.desktop-records-loading,
+.desktop-records-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  flex: 1;
+  min-height: 0;
+  padding: 48px 24px;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.desktop-records-table .state-row td {
+  padding: 0;
+  border-bottom: none;
+  background: transparent !important;
+}
+
+.desktop-records-table-empty {
+  text-align: center;
+  padding: 56px 16px !important;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.desktop-records-table-empty .empty-hint {
+  margin: 8px 0 0;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.6;
+  color: var(--text-muted);
+}
+
+.desktop-records-loading-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  padding: 48px 24px;
+}
+
+.desktop-records-status {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+}
+
+.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-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; }
+
+.desktop-records-amount.pos { color: var(--primary-light); }
+.desktop-records-amount.neg { color: var(--danger); }
+.desktop-records-amount.zero { color: var(--text-muted); }
diff --git a/apps/player/src/styles/desktop/tokens.css b/apps/player/src/styles/desktop/tokens.css
new file mode 100644
index 0000000..3e34b5f
--- /dev/null
+++ b/apps/player/src/styles/desktop/tokens.css
@@ -0,0 +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);
+  --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);
+
+  /* PC Dimensioning */
+  --desktop-header-h: 56px;
+  --desktop-left-sidebar-w: 220px;
+  --desktop-right-betslip-w: 288px;
+  
+  /* Reset typography inside desktop */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--text);
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/apps/player/src/utils/betPlaceConfirmMessage.ts b/apps/player/src/utils/betPlaceConfirmMessage.ts
new file mode 100644
index 0000000..ec89fcf
--- /dev/null
+++ b/apps/player/src/utils/betPlaceConfirmMessage.ts
@@ -0,0 +1,49 @@
+import type { Composer } from 'vue-i18n';
+import type { SlipItem, SlipMode } from '../stores/betSlip';
+
+export interface BetPlaceConfirmContext {
+  mode: SlipMode;
+  items: SlipItem[];
+  totalStake: number;
+  totalReturn: number;
+  totalOdds?: number;
+  formatMoney: (amount: number) => string;
+  getStake: (item: SlipItem) => number;
+  getOdds: (item: SlipItem) => number;
+}
+
+export function buildBetPlaceConfirmMessage(
+  t: Composer['t'],
+  ctx: BetPlaceConfirmContext,
+): string {
+  if (ctx.mode === 'parlay') {
+    const odds =
+      ctx.totalOdds != null
+        ? String(ctx.totalOdds)
+            .replace(/0+$/, '')
+            .replace(/\.$/, '')
+        : '';
+    return t('bet.place_confirm_parlay', {
+      count: ctx.items.length,
+      stake: ctx.formatMoney(ctx.totalStake),
+      odds,
+      return: ctx.formatMoney(ctx.totalReturn),
+    });
+  }
+
+  if (ctx.items.length === 1) {
+    const item = ctx.items[0];
+    return t('bet.place_confirm_single', {
+      pick: item.selectionName,
+      odds: ctx.getOdds(item).toFixed(2),
+      stake: ctx.formatMoney(ctx.getStake(item)),
+      return: ctx.formatMoney(ctx.totalReturn),
+    });
+  }
+
+  return t('bet.place_confirm_singles', {
+    count: ctx.items.length,
+    stake: ctx.formatMoney(ctx.totalStake),
+    return: ctx.formatMoney(ctx.totalReturn),
+  });
+}
diff --git a/apps/player/src/views/AnnouncementDetailView.vue b/apps/player/src/views/AnnouncementDetailView.vue
index a7ee6ec..da846fb 100644
--- a/apps/player/src/views/AnnouncementDetailView.vue
+++ b/apps/player/src/views/AnnouncementDetailView.vue
@@ -1,320 +1,13 @@
 <script setup lang="ts">
-import { computed, onActivated, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { formatLocalMatchDateTime } from '@thebet365/shared';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import defaultBannerImg from '../assets/images/banner.webp';
-import { usePlayerHome, type PlayerContentItem } from '../composables/usePlayerHome';
-import { sanitizeAnnouncementHtml, stripHtml } from '../utils/html';
+import { useViewport } from '../composables/useViewport';
+import MobileAnnouncementDetailView from './MobileAnnouncementDetailView.vue';
 
-const FALLBACK_IMG = '/uploads/banners/welcome.svg';
+defineProps<{ embedded?: boolean }>();
 
-const route = useRoute();
-const router = useRouter();
-const { t, locale } = useI18n();
-const { announcementItems, bannerItems, loading, load } = usePlayerHome();
-
-const announcementId = computed(() => String(route.params.id ?? ''));
-
-const item = computed<PlayerContentItem | null>(() => {
-  const id = announcementId.value;
-  return (
-    bannerItems.value.find((entry) => entry.id === id) ??
-    announcementItems.value.find((entry) => entry.id === id) ??
-    null
-  );
-});
-
-const isBanner = computed(() => item.value?.contentType === 'BANNER');
-
-function goBack() {
-  router.back();
-}
-
-function goList() {
-  router.push('/announcements');
-}
-
-function formatDate(createdAt?: string) {
-  if (!createdAt) return '';
-  return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'full' });
-}
-
-function itemTitle(entry: PlayerContentItem) {
-  const title = entry.translation?.title?.trim();
-  if (title) return title;
-  const bodyText = stripHtml(entry.translation?.body ?? '');
-  return bodyText || t('home.announcement_badge');
-}
-
-function itemBodyHtml(entry: PlayerContentItem) {
-  const title = entry.translation?.title?.trim();
-  const body = entry.translation?.body?.trim();
-  if (!body) return '';
-  if (title && stripHtml(body) === title) return '';
-  return sanitizeAnnouncementHtml(body);
-}
-
-const heroImageUrl = computed(() => {
-  const url = item.value?.translation?.imageUrl?.trim();
-  if (url) return url;
-  if (isBanner.value) return defaultBannerImg || FALLBACK_IMG;
-  return '';
-});
-
-const linkTarget = computed(() => item.value?.linkTarget?.trim() ?? '');
-
-const externalLinkUrl = computed(() => {
-  if (item.value?.linkType !== 'URL' || !linkTarget.value) return '';
-  return /^https?:\/\//i.test(linkTarget.value)
-    ? linkTarget.value
-    : `https://${linkTarget.value}`;
-});
-
-function onHeroError(e: Event) {
-  const img = e.target as HTMLImageElement;
-  if (img.dataset.fallbackApplied) return;
-  img.dataset.fallbackApplied = '1';
-  img.src = defaultBannerImg || FALLBACK_IMG;
-}
-
-function followRouteLink() {
-  if (item.value?.linkType === 'ROUTE' && linkTarget.value) {
-    void router.push(linkTarget.value);
-  }
-}
-
-function openExternalLink() {
-  if (externalLinkUrl.value) {
-    window.open(externalLinkUrl.value, '_blank', 'noopener');
-  }
-}
-
-async function refresh() {
-  await load(true);
-}
-
-onActivated(() => {
-  void refresh();
-});
-
-watch(announcementId, () => {
-  if (!item.value && !loading.value) void refresh();
-});
+const { isDesktop } = useViewport();
 </script>
 
 <template>
-  <div class="announce-detail">
-    <header class="page-header">
-      <button type="button" class="back-btn" :aria-label="t('announcements.back')" @click="goBack">‹</button>
-      <h1>{{ t('announcements.detail_title') }}</h1>
-    </header>
-
-    <div v-if="loading && !item" class="state">
-      <GoldSpinner :size="36" />
-    </div>
-
-    <div v-else-if="!item" class="empty">
-      <p>{{ t('announcements.not_found') }}</p>
-      <button type="button" class="link-btn" @click="goList">{{ t('announcements.view_all') }}</button>
-    </div>
-
-    <article v-else class="detail-article">
-      <figure v-if="heroImageUrl" class="detail-hero">
-        <img :src="heroImageUrl" :alt="itemTitle(item)" loading="lazy" @error="onHeroError" />
-      </figure>
-
-      <div class="detail-body-wrap">
-        <p v-if="item.createdAt" class="detail-date">{{ formatDate(item.createdAt) }}</p>
-        <h2 class="detail-title">{{ itemTitle(item) }}</h2>
-        <div v-if="itemBodyHtml(item)" class="detail-body" v-html="itemBodyHtml(item)" />
-
-        <div v-if="item.linkType && linkTarget" class="detail-link">
-          <p class="link-label">{{ t('announcements.related_link') }}</p>
-          <p class="link-address">{{ linkTarget }}</p>
-          <button
-            v-if="item.linkType === 'ROUTE'"
-            type="button"
-            class="link-action"
-            @click="followRouteLink"
-          >
-            {{ t('announcements.go_link') }}
-          </button>
-          <button
-            v-else-if="item.linkType === 'URL'"
-            type="button"
-            class="link-action link-action--outline"
-            @click="openExternalLink"
-          >
-            {{ t('announcements.open_link') }}
-          </button>
-        </div>
-      </div>
-    </article>
-  </div>
+  <MobileAnnouncementDetailView v-if="isDesktop" embedded />
+  <MobileAnnouncementDetailView v-else :embedded="embedded" />
 </template>
-
-<style scoped>
-.announce-detail {
-  min-height: 100%;
-  padding: 0 0 24px;
-}
-
-.page-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0 0 14px;
-  margin-bottom: 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.back-btn {
-  width: 36px;
-  height: 36px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: #141414;
-  color: var(--gold);
-  font-size: 22px;
-  line-height: 1;
-}
-
-.page-header h1 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: #fff;
-}
-
-.state,
-.empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 48px 16px;
-  color: var(--text-muted);
-}
-
-.link-btn {
-  border: 1px solid var(--border-gold-soft);
-  border-radius: 8px;
-  padding: 8px 14px;
-  background: rgba(212, 175, 55, 0.1);
-  color: var(--gold);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.detail-article {
-  margin: 0;
-  padding: 0;
-}
-
-.detail-hero {
-  margin: 16px -16px 0;
-  padding: 0;
-  background: #080808;
-  line-height: 0;
-}
-
-.detail-hero img {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: contain;
-  object-position: center;
-}
-
-.detail-body-wrap {
-  padding: 18px 0 0;
-}
-
-.detail-date {
-  margin: 0 0 10px;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.detail-title {
-  margin: 0 0 12px;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1.45;
-  color: #fff;
-}
-
-.detail-body {
-  margin: 0;
-  font-size: 15px;
-  line-height: 1.75;
-  color: #d0d0d0;
-}
-
-.detail-body :deep(p) {
-  margin: 0 0 12px;
-}
-
-.detail-body :deep(p:last-child) {
-  margin-bottom: 0;
-}
-
-.detail-body :deep(img) {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 14px 0;
-  border-radius: 8px;
-}
-
-.detail-body :deep(ul),
-.detail-body :deep(ol) {
-  margin: 0 0 12px;
-  padding-left: 20px;
-}
-
-.detail-body :deep(a) {
-  color: var(--primary-light);
-  text-decoration: underline;
-}
-
-.detail-link {
-  margin-top: 24px;
-  padding-top: 18px;
-  border-top: 1px solid var(--border);
-}
-
-.link-label {
-  margin: 0 0 8px;
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.link-address {
-  margin: 0 0 14px;
-  font-size: 14px;
-  line-height: 1.55;
-  color: var(--primary-light);
-  word-break: break-all;
-}
-
-.link-action {
-  width: 100%;
-  padding: 11px 14px;
-  border: none;
-  border-radius: 8px;
-  background: var(--gradient-gold);
-  color: #1a1000;
-  font-size: 14px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.link-action--outline {
-  background: transparent;
-  border: 1px solid var(--border-gold-soft);
-  color: var(--gold);
-}
-</style>
diff --git a/apps/player/src/views/AnnouncementListView.vue b/apps/player/src/views/AnnouncementListView.vue
index 7bc0067..26fa6db 100644
--- a/apps/player/src/views/AnnouncementListView.vue
+++ b/apps/player/src/views/AnnouncementListView.vue
@@ -1,178 +1,15 @@
 <script setup lang="ts">
-import { computed, onActivated } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { formatLocalMatchDateTime } from '@thebet365/shared';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePlayerHome } from '../composables/usePlayerHome';
-import { stripHtml } from '../utils/html';
+import { useViewport } from '../composables/useViewport';
+import MobileAnnouncementListView from './MobileAnnouncementListView.vue';
 
-const router = useRouter();
-const { t, locale } = useI18n();
-const { announcementItems, loading, load } = usePlayerHome();
+const { embedded = false } = defineProps<{ embedded?: boolean }>();
 
-const items = computed(() => announcementItems.value);
-
-function goBack() {
-  router.back();
-}
-
-function openDetail(id: string) {
-  router.push(`/announcements/${id}`);
-}
-
-function formatDate(createdAt?: string) {
-  if (!createdAt) return '';
-  return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'full' });
-}
-
-function itemTitle(item: (typeof items.value)[number]) {
-  const title = item.translation?.title?.trim();
-  if (title) return title;
-  return stripHtml(item.translation?.body ?? '') || t('home.announcement_badge');
-}
-
-function itemPreview(item: (typeof items.value)[number]) {
-  const title = item.translation?.title?.trim();
-  const bodyText = stripHtml(item.translation?.body ?? '');
-  if (bodyText && bodyText !== title) return bodyText;
-  return '';
-}
-
-onActivated(() => {
-  void load(true);
-});
+const { isDesktop } = useViewport();
 </script>
 
 <template>
-  <div class="announce-page">
-    <header class="page-header">
-      <button type="button" class="back-btn" :aria-label="t('announcements.back')" @click="goBack">‹</button>
-      <h1>{{ t('announcements.title') }}</h1>
-    </header>
-
-    <div v-if="loading && !items.length" class="state">
-      <GoldSpinner :size="36" />
-    </div>
-
-    <div v-else-if="!items.length" class="empty">
-      <p>{{ t('announcements.empty') }}</p>
-    </div>
-
-    <div v-else class="list">
-      <button
-        v-for="item in items"
-        :key="item.id"
-        type="button"
-        class="list-row"
-        @click="openDetail(item.id)"
-      >
-        <span class="row-main">
-          <span class="title">{{ itemTitle(item) }}</span>
-          <span v-if="itemPreview(item)" class="preview">{{ itemPreview(item) }}</span>
-          <span v-if="item.createdAt" class="date">{{ formatDate(item.createdAt) }}</span>
-        </span>
-        <span class="chevron" aria-hidden="true">›</span>
-      </button>
-    </div>
-  </div>
+  <MobileAnnouncementListView
+    v-if="embedded || !isDesktop"
+    :embedded="embedded || isDesktop"
+  />
 </template>
-
-<style scoped>
-.announce-page {
-  min-height: 100%;
-  padding: 0 0 24px;
-}
-
-.page-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0 0 14px;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 0;
-}
-
-.back-btn {
-  width: 36px;
-  height: 36px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: #141414;
-  color: var(--gold);
-  font-size: 22px;
-  line-height: 1;
-}
-
-.page-header h1 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: #fff;
-}
-
-.state,
-.empty {
-  display: flex;
-  justify-content: center;
-  padding: 48px 16px;
-  color: var(--text-muted);
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-}
-
-.list-row {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 0;
-  border: none;
-  border-bottom: 1px solid var(--border);
-  background: transparent;
-  text-align: left;
-  color: inherit;
-  cursor: pointer;
-}
-
-.row-main {
-  flex: 1;
-  min-width: 0;
-}
-
-.title {
-  display: block;
-  font-size: 15px;
-  font-weight: 600;
-  color: #fff;
-  line-height: 1.4;
-}
-
-.preview {
-  display: block;
-  margin-top: 6px;
-  font-size: 13px;
-  line-height: 1.45;
-  color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.date {
-  display: block;
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.chevron {
-  flex-shrink: 0;
-  font-size: 20px;
-  color: var(--text-muted);
-  line-height: 1;
-}
-</style>
diff --git a/apps/player/src/views/AnnouncementsHubView.vue b/apps/player/src/views/AnnouncementsHubView.vue
new file mode 100644
index 0000000..11c740a
--- /dev/null
+++ b/apps/player/src/views/AnnouncementsHubView.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useViewport } from '../composables/useViewport';
+import DesktopAnnouncementsHubShell from './desktop/DesktopAnnouncementsHubShell.vue';
+
+const { isDesktop } = useViewport();
+</script>
+
+<template>
+  <DesktopAnnouncementsHubShell v-if="isDesktop">
+    <RouterView />
+  </DesktopAnnouncementsHubShell>
+  <RouterView v-else />
+</template>
diff --git a/apps/player/src/views/BetDetailView.vue b/apps/player/src/views/BetDetailView.vue
index ff8fb52..436662d 100644
--- a/apps/player/src/views/BetDetailView.vue
+++ b/apps/player/src/views/BetDetailView.vue
@@ -1,734 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import api from '../api';
-import { formatMoney, parseAmount } from '../utils/localeDisplay';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-import StatusWatermark from '../components/StatusWatermark.vue';
-import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';
-import type { BetHistoryItem } from '../components/BetHistoryCard.vue';
-
-const route = useRoute();
-const router = useRouter();
-const { t, locale } = useI18n();
-
-const bet = ref<BetHistoryItem | null>(null);
-const loading = ref(true);
-const notFound = ref(false);
-
-async function loadBet() {
-  loading.value = true;
-  try {
-    const { data } = await api.get(`/player/bets/${route.params.betNo}`);
-    if (!data.data) { notFound.value = true; return; }
-    bet.value = data.data;
-  } catch {
-    notFound.value = true;
-  } finally {
-    loading.value = false;
-  }
-}
-
-onMounted(loadBet);
-
-const { pullDistance, spinning, progress } = usePullToRefresh({
-  onRefresh: loadBet,
-});
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
-
-const statusKey = computed(() => {
-  const s = (bet.value?.status ?? '').toUpperCase();
-  if (s === 'WON' || s === 'WIN') return 'won';
-  if (s === 'LOST' || s === 'LOSE') return 'lost';
-  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'push';
-  return 'pending';
-});
-
-const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
-
-const isSettled = computed(() => statusKey.value !== 'pending');
-
-const placedDateTime = computed(() => {
-  if (!bet.value) return '';
-  const d = new Date(bet.value.placedAt);
-  const date = d.toLocaleDateString(locale.value, { year: 'numeric', month: 'short', day: 'numeric' });
-  const time = d.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
-  return `${date}  ${time}`;
-});
-
-const returnAmount = computed(() => {
-  if (!bet.value) return '';
-  if (statusKey.value === 'won') return formatMoney(bet.value.actualReturn, locale.value);
-  if (statusKey.value === 'pending') return formatMoney(bet.value.potentialReturn, locale.value);
-  if (statusKey.value === 'lost') return formatMoney(-parseAmount(bet.value.stake), locale.value);
-  return formatMoney(bet.value.actualReturn ?? bet.value.potentialReturn, locale.value);
-});
-
-const profitAmount = computed(() => {
-  if (!bet.value || statusKey.value !== 'won') return '';
-  const profit = parseAmount(bet.value.actualReturn) - parseAmount(bet.value.stake);
-  return `+${formatMoney(profit, locale.value)}`;
-});
-
-const heroAmount = computed(() => {
-  if (statusKey.value === 'won') return profitAmount.value;
-  return returnAmount.value;
-});
-
-const heroTitle = computed(() => {
-  if (statusKey.value === 'won') return t('history.profit');
-  if (statusKey.value === 'pending') return t('history.est_return');
-  return statusLabel.value;
-});
-
-const formulaText = computed(() => {
-  if (!bet.value || !oddsText.value || statusKey.value === 'pending') return '';
-  return t('history.stake_to_return', {
-    stake: stakeAmount.value,
-    odds: oddsText.value,
-    amount: returnAmount.value,
-  });
-});
-
-const stakeAmount = computed(() =>
-  bet.value ? formatMoney(bet.value.stake, locale.value) : '',
-);
-
-const oddsText = computed(() => {
-  const o = bet.value?.totalOdds;
-  if (o == null || o === '' || o === 0) return '';
-  const n = parseFloat(String(o));
-  return Number.isFinite(n) ? n.toFixed(2) : String(o);
-});
-
-const betTypeLabel = computed(() => {
-  if (!bet.value) return '';
-  if (bet.value.isParlay) return t('bet.parlay');
-  return bet.value.betType || '';
-});
-
-function formatOdds(v: unknown): string {
-  const n = parseFloat(String(v));
-  return isNaN(n) || n <= 0 ? '-' : n.toFixed(2);
-}
-
-const SEL_TRANS: Record<string, Record<string, string>> = {
-  '主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
-  '客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
-  '和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
-  '主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
-  '客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
-  '大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
-  '小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
-  '单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
-  '双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
-  '冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
-};
-
-function translateSel(name: string): string {
-  if (locale.value === 'zh-CN') return name;
-  const exact = SEL_TRANS[name];
-  if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
-  const sp = name.indexOf(' ');
-  if (sp > 0) {
-    const head = name.slice(0, sp);
-    const m = SEL_TRANS[head];
-    if (m) return (m[locale.value] ?? m['en-US'] ?? head) + name.slice(sp);
-  }
-  return name;
-}
-
-function legStatusKey(rs: string | null | undefined) {
-  if (!rs) return 'pending';
-  const s = rs.toUpperCase();
-  if (s === 'WON' || s === 'WIN') return 'won';
-  if (s === 'LOST' || s === 'LOSE') return 'lost';
-  return 'push';
-}
-
-const matchTitle = computed(() => {
-  if (!bet.value) return '';
-  if (bet.value.isParlay) {
-    const n = bet.value.legCount ?? bet.value.legs?.length ?? 0;
-    return t('history.parlay_title', { n });
-  }
-  return bet.value.matchTitle;
-});
-
-const pickMarket = computed(() => {
-  if (!bet.value || bet.value.isParlay) return '';
-  const raw = bet.value.pickLabel ?? '';
-  const ci = raw.indexOf(': ');
-  return ci >= 0 ? raw.slice(0, ci) : raw;
-});
-
-const pickSelection = computed(() => {
-  if (!bet.value || bet.value.isParlay) return '';
-  const raw = bet.value.pickLabel ?? '';
-  const ci = raw.indexOf(': ');
-  if (ci < 0) return '';
-  const sel = raw.slice(ci + 2);
-  return locale.value === 'zh-CN' ? sel : translateSel(sel);
-});
-
-const matchPhase = computed(
-  (): MatchPhase | null => bet.value?.matchPhase ?? null,
-);
-
-const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
-
-const showPhaseWatermark = computed(
-  () => !isSettled.value && matchPhase.value && matchPhase.value !== 'open',
-);
+import { useViewport } from '../composables/useViewport';
+import MobileBetDetailView from './MobileBetDetailView.vue';
+import DesktopBetDetailView from './desktop/DesktopBetDetailView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="detail-page">
-    <div class="pull-indicator" :style="pullIndicatorStyle()">
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <div class="top-bar">
-      <button type="button" class="back-btn" @click="router.back()">‹ {{ t('history.back') }}</button>
-    </div>
-
-    <div v-if="loading" class="state">
-      <GoldSpinner :size="36" />
-    </div>
-    <div v-else-if="notFound || !bet" class="state">{{ t('history.not_found') }}</div>
-
-    <article v-else class="receipt">
-      <!-- result strip -->
-      <div class="receipt-result" :class="statusKey">
-        <div class="result-icon" :class="statusKey">
-          <svg v-if="statusKey === 'won'" viewBox="0 0 24 24" aria-hidden="true">
-            <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="1.5" />
-            <path d="M7 12.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-          <svg v-else-if="statusKey === 'lost'" viewBox="0 0 24 24" aria-hidden="true">
-            <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="1.5" />
-            <path d="M8 8l8 8M16 8l-8 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-          </svg>
-          <svg v-else-if="statusKey === 'pending'" viewBox="0 0 24 24" aria-hidden="true">
-            <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="1.5" />
-            <path d="M12 7v5l3 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-          </svg>
-          <svg v-else viewBox="0 0 24 24" aria-hidden="true">
-            <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="1.5" />
-            <path d="M8 12h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-          </svg>
-        </div>
-        <div class="result-text">
-          <span class="result-label">{{ heroTitle }}</span>
-          <span class="result-amount">{{ heroAmount }}</span>
-          <span v-if="statusKey === 'won'" class="result-sub">
-            {{ t('history.return_incl_stake', { amount: returnAmount }) }}
-          </span>
-          <span v-else-if="formulaText && statusKey !== 'pending'" class="result-sub">{{ formulaText }}</span>
-          <span v-else-if="statusKey === 'pending' && oddsText" class="result-sub">
-            {{ stakeAmount }} × {{ oddsText }}
-          </span>
-        </div>
-      </div>
-
-      <div class="receipt-perforation" aria-hidden="true" />
-
-      <!-- body -->
-      <div class="receipt-body">
-        <div class="receipt-meta">
-          <div class="meta-tags">
-            <span v-if="betTypeLabel" class="meta-tag">{{ betTypeLabel }}</span>
-            <span v-if="oddsText" class="meta-tag dim">@{{ oddsText }}</span>
-            <span v-if="bet.isCashbacked" class="meta-tag cashback">{{ t('history.cashbacked') }}</span>
-          </div>
-          <span class="meta-time">{{ placedDateTime }}</span>
-        </div>
-
-        <h2 class="match-title">{{ matchTitle }}</h2>
-
-        <!-- single pick -->
-        <div v-if="!bet.isParlay" class="pick-block">
-          <StatusWatermark
-            v-if="showPhaseWatermark"
-            :label="matchPhaseText"
-            :variant="matchPhaseVariant(matchPhase!)"
-            size="md"
-          />
-          <span class="pick-market">{{ pickMarket }}</span>
-          <div class="pick-line">
-            <span class="pick-selection">{{ pickSelection }}</span>
-            <span v-if="oddsText" class="pick-odds">@{{ oddsText }}</span>
-          </div>
-          <div v-if="bet.matchScore?.ft || bet.matchScore?.ht" class="score-row">
-            <span v-if="bet.matchScore.ft" class="score-pill">
-              <em>{{ t('history.ft') }}</em>{{ bet.matchScore.ft }}
-            </span>
-            <span v-if="bet.matchScore.ht" class="score-pill dim">
-              <em>{{ t('history.ht') }}</em>{{ bet.matchScore.ht }}
-            </span>
-          </div>
-          <p v-else-if="statusKey === 'pending'" class="awaiting">{{ t('history.awaiting_result') }}</p>
-        </div>
-
-        <!-- parlay legs -->
-        <div v-if="bet.isParlay && bet.legs?.length" class="legs-list">
-          <div
-            v-for="(leg, i) in bet.legs"
-            :key="i"
-            class="leg-item"
-            :class="legStatusKey(leg.resultStatus)"
-          >
-            <div class="leg-status-dot" :class="legStatusKey(leg.resultStatus)">
-              <svg v-if="legStatusKey(leg.resultStatus) === 'won'" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
-              <svg v-else-if="legStatusKey(leg.resultStatus) === 'lost'" viewBox="0 0 12 12"><path d="M3 3l6 6M9 3l-6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
-              <span v-else>{{ i + 1 }}</span>
-            </div>
-            <div class="leg-content">
-              <div class="leg-head">
-                <span class="leg-match">{{ leg.matchTitle }}</span>
-                <span class="leg-odds">@{{ formatOdds(leg.odds) }}</span>
-              </div>
-              <span class="leg-pick">{{ leg.marketLabel }} · {{ translateSel(leg.selectionName) }}</span>
-              <div v-if="leg.score?.ft || leg.score?.ht" class="score-row compact">
-                <span v-if="leg.score.ft" class="score-pill sm"><em>{{ t('history.ft') }}</em>{{ leg.score.ft }}</span>
-                <span v-if="leg.score.ht" class="score-pill sm dim"><em>{{ t('history.ht') }}</em>{{ leg.score.ht }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="receipt-perforation" aria-hidden="true" />
-
-      <!-- footer -->
-      <div class="receipt-foot">
-        <div class="foot-row">
-          <span>{{ t('history.stake') }}</span>
-          <span>{{ stakeAmount }}</span>
-        </div>
-        <div v-if="bet.totalOdds" class="foot-row">
-          <span>{{ t('history.odds') }}</span>
-          <span class="gold">{{ formatOdds(bet.totalOdds) }}</span>
-        </div>
-        <div class="foot-row id">
-          <span>{{ t('history.bet_no') }}</span>
-          <span class="mono">{{ bet.betNo }}</span>
-        </div>
-      </div>
-    </article>
-  </div>
+  <DesktopBetDetailView v-if="isDesktop" />
+  <MobileBetDetailView v-else />
 </template>
-
-<style scoped>
-.detail-page {
-  padding-bottom: 36px;
-}
-
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.top-bar {
-  margin-bottom: 10px;
-}
-
-.back-btn {
-  background: none;
-  border: none;
-  color: var(--primary-light);
-  font-size: 15px;
-  font-weight: 700;
-  padding: 4px 0 8px;
-  cursor: pointer;
-}
-
-.state {
-  text-align: center;
-  padding: 60px 20px;
-  color: var(--text-muted);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-/* ── receipt ticket ── */
-.receipt {
-  position: relative;
-  border-radius: var(--radius);
-  background: rgba(18, 18, 18, 0.96);
-  border: 1px solid var(--border);
-  box-shadow: var(--shadow);
-  overflow: hidden;
-}
-
-/* result strip */
-.receipt-result {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 20px 18px 18px;
-}
-
-.receipt-result.won {
-  background: linear-gradient(135deg, rgba(52, 199, 89, 0.1) 0%, transparent 70%);
-}
-
-.receipt-result.lost {
-  background: linear-gradient(135deg, rgba(255, 69, 58, 0.08) 0%, transparent 70%);
-}
-
-.receipt-result.pending {
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
-}
-
-.result-icon {
-  flex-shrink: 0;
-  width: 48px;
-  height: 48px;
-}
-
-.result-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.result-icon.won { color: #34c759; }
-.result-icon.lost { color: var(--danger); }
-.result-icon.pending { color: var(--primary-light); }
-.result-icon.push { color: var(--text-muted); }
-
-.result-text {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.result-label {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--text-muted);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.result-amount {
-  font-size: 32px;
-  font-weight: 900;
-  letter-spacing: -0.02em;
-  line-height: 1.1;
-}
-
-.receipt-result.won .result-amount { color: #34c759; }
-.receipt-result.lost .result-amount { color: var(--danger); }
-.receipt-result.pending .result-amount { color: var(--primary-light); }
-.receipt-result.push .result-amount { color: var(--text-muted); }
-
-.result-sub {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-muted);
-  margin-top: 2px;
-}
-
-/* perforated divider */
-.receipt-perforation {
-  height: 1px;
-  margin: 0 14px;
-  background: repeating-linear-gradient(
-    90deg,
-    transparent 0,
-    transparent 4px,
-    rgba(255, 255, 255, 0.08) 4px,
-    rgba(255, 255, 255, 0.08) 8px
-  );
-  position: relative;
-}
-
-.receipt-perforation::before,
-.receipt-perforation::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--bg-body, #000);
-  transform: translateY(-50%);
-}
-
-.receipt-perforation::before { left: -20px; }
-.receipt-perforation::after { right: -20px; }
-
-/* body */
-.receipt-body {
-  padding: 16px 18px;
-}
-
-.receipt-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 10px;
-  margin-bottom: 10px;
-}
-
-.meta-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.meta-tag {
-  font-size: 10px;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  padding: 3px 8px;
-  border-radius: 4px;
-  color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.1);
-  border: 1px solid var(--border-gold-soft);
-}
-
-.meta-tag.dim {
-  color: var(--text-muted);
-  background: rgba(255, 255, 255, 0.04);
-  border-color: var(--border);
-}
-
-.meta-tag.cashback {
-  color: #f0b90b;
-  background: rgba(240, 185, 11, 0.1);
-  border-color: rgba(240, 185, 11, 0.25);
-}
-
-.meta-time {
-  flex-shrink: 0;
-  font-size: 11px;
-  color: #555;
-  font-weight: 600;
-}
-
-.match-title {
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--text);
-  line-height: 1.35;
-  margin-bottom: 14px;
-}
-
-/* pick block */
-.pick-block {
-  position: relative;
-  overflow: hidden;
-  padding: 14px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: var(--radius-sm);
-}
-
-.pick-market {
-  display: block;
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--text-muted);
-  letter-spacing: 0.04em;
-  margin-bottom: 6px;
-}
-
-.pick-line {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-}
-
-.pick-selection {
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--primary-light);
-}
-
-.pick-odds {
-  font-size: 14px;
-  font-weight: 900;
-  color: var(--text-muted);
-}
-
-.score-row {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.score-row.compact {
-  margin-top: 8px;
-}
-
-.score-pill {
-  font-size: 13px;
-  font-weight: 800;
-  color: var(--text);
-  padding: 5px 10px;
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 6px;
-}
-
-.score-pill em {
-  font-style: normal;
-  font-size: 9px;
-  font-weight: 800;
-  color: var(--text-muted);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  margin-right: 5px;
-}
-
-.score-pill.dim { color: var(--text-muted); }
-.score-pill.sm { font-size: 11px; padding: 3px 8px; }
-
-.awaiting {
-  margin-top: 10px;
-  font-size: 12px;
-  color: var(--text-muted);
-  font-style: italic;
-}
-
-/* parlay legs */
-.legs-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.leg-item {
-  display: flex;
-  gap: 12px;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.leg-item:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.leg-status-dot {
-  flex-shrink: 0;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 900;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1.5px solid var(--border);
-  color: var(--text-muted);
-  margin-top: 2px;
-}
-
-.leg-status-dot svg {
-  width: 12px;
-  height: 12px;
-}
-
-.leg-status-dot.won {
-  background: rgba(52, 199, 89, 0.12);
-  border-color: rgba(52, 199, 89, 0.45);
-  color: #34c759;
-}
-
-.leg-status-dot.lost {
-  background: rgba(255, 69, 58, 0.1);
-  border-color: rgba(255, 69, 58, 0.35);
-  color: var(--danger);
-}
-
-.leg-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.leg-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.leg-match {
-  font-size: 13px;
-  font-weight: 800;
-  color: var(--text);
-  line-height: 1.35;
-}
-
-.leg-odds {
-  flex-shrink: 0;
-  font-size: 13px;
-  font-weight: 900;
-  color: var(--text-muted);
-}
-
-.leg-pick {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-muted);
-}
-
-/* footer */
-.receipt-foot {
-  padding: 14px 18px 16px;
-}
-
-.foot-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 7px 0;
-  font-size: 13px;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-
-.foot-row span:last-child {
-  color: var(--text);
-  font-weight: 700;
-}
-
-.foot-row .gold {
-  color: var(--primary-light);
-  font-weight: 800;
-}
-
-.foot-row.id {
-  margin-top: 4px;
-  padding-top: 10px;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-  font-size: 11px;
-}
-
-.foot-row.id span:last-child {
-  color: #555;
-  font-weight: 600;
-}
-
-.mono {
-  font-family: ui-monospace, monospace;
-  letter-spacing: 0.02em;
-}
-</style>
diff --git a/apps/player/src/views/CashbackRecordsView.vue b/apps/player/src/views/CashbackRecordsView.vue
index 3559720..f310d3d 100644
--- a/apps/player/src/views/CashbackRecordsView.vue
+++ b/apps/player/src/views/CashbackRecordsView.vue
@@ -1,411 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import api from '../api';
-import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-import { useOnLocaleChange } from '../composables/useOnLocaleChange';
-
-import { parseCashbackApiData, type CashbackRecord } from '../utils/cashback';
-
-const route = useRoute();
-const router = useRouter();
-const { t, locale } = useI18n();
-
-const highlightBatchNo = computed(() => {
-  const q = route.query.batchNo;
-  return typeof q === 'string' ? q.trim() : '';
-});
-
-const items = ref<CashbackRecord[]>([]);
-const loading = ref(false);
-const initialLoading = ref(true);
-const page = ref(1);
-const hasMore = ref(true);
-
-const sentinel = ref<HTMLElement | null>(null);
-let observer: IntersectionObserver | null = null;
-
-const totalAmount = computed(() =>
-  items.value.reduce((sum, row) => sum + Math.abs(parseFloat(row.amount) || 0), 0),
-);
-
-function formatPeriod(start: string, end: string) {
-  const opts: Intl.DateTimeFormatOptions = { month: '2-digit', day: '2-digit' };
-  const s = new Date(start).toLocaleDateString(locale.value, opts);
-  const e = new Date(end).toLocaleDateString(locale.value, opts);
-  return `${s} – ${e}`;
-}
-
-function formatRate(rate: string) {
-  const n = parseFloat(rate);
-  if (!Number.isFinite(n)) return rate;
-  return `${(n * 100).toFixed(2)}%`;
-}
-
-function formatTime(v: string | null) {
-  if (!v) return '—';
-  return new Date(v).toLocaleString(locale.value, {
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  });
-}
-
-async function fetchRecords(p = 1) {
-  if (loading.value) return;
-  loading.value = true;
-  try {
-    const { data } = await api.get('/player/cashbacks', { params: { page: p } });
-    const newItems = parseCashbackApiData(data.data);
-    
-    if (p === 1) {
-      items.value = newItems;
-    } else {
-      items.value = [...items.value, ...newItems];
-    }
-    
-    const pageSize = 20;
-    hasMore.value = newItems.length >= pageSize;
-    page.value = p;
-  } catch {
-    if (p === 1) items.value = [];
-  } finally {
-    loading.value = false;
-    initialLoading.value = false;
-  }
-}
-
-useOnLocaleChange(() => {
-  items.value = [];
-  page.value = 1;
-  hasMore.value = true;
-  initialLoading.value = true;
-  fetchRecords(1);
-});
-
-const { pullDistance, spinning, progress } = usePullToRefresh({
-  onRefresh: async () => { await fetchRecords(1); },
-});
-
-onMounted(() => {
-  fetchRecords(1);
-  observer = new IntersectionObserver(
-    (entries) => {
-      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
-        fetchRecords(page.value + 1);
-      }
-    },
-    { rootMargin: '200px' },
-  );
-  if (sentinel.value) observer.observe(sentinel.value);
-});
-
-onUnmounted(() => {
-  observer?.disconnect();
-});
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
+import { useViewport } from '../composables/useViewport';
+import MobileCashbackRecordsView from './MobileCashbackRecordsView.vue';
+import DesktopCashbackRecordsView from './desktop/DesktopCashbackRecordsView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="cashback-page">
-    <div class="top-bar">
-      <button type="button" class="back-btn" @click="router.back()">
-        &#x2039; {{ t('history.back') }}
-      </button>
-    </div>
-
-    <div class="pull-indicator" :style="pullIndicatorStyle()">
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <div v-if="loading" class="state">
-      <GoldSpinner :size="36" />
-      <span class="loading-text">{{ t('bet.loading') }}</span>
-    </div>
-
-    <template v-else>
-      <div class="hero">
-        <span class="hero-amount">{{ formatMoney(totalAmount, locale) }}</span>
-        <span class="hero-sub">
-          {{ t('cashback.total_received') }}
-          <template v-if="items.length">
-            · {{ t('cashback.record_count', { n: items.length }) }}
-          </template>
-        </span>
-      </div>
-
-      <p class="ledger-hint">{{ t('cashback.ledger_hint') }}</p>
-
-      <p v-if="items.length" class="section-title">{{ t('cashback.list_title') }}</p>
-
-      <div v-if="items.length" class="list-card">
-        <article
-          v-for="row in items"
-          :key="row.id"
-          class="record-row"
-          :class="{ 'record-row--highlight': highlightBatchNo && row.batchNo === highlightBatchNo }"
-        >
-          <div class="row-main">
-            <div class="row-left">
-              <span class="row-amount">{{ formatMoney(row.amount, locale) }}</span>
-              <span class="row-period">{{ formatPeriod(row.periodStart, row.periodEnd) }}</span>
-            </div>
-            <span class="row-rate">{{ formatRate(row.rate) }}</span>
-          </div>
-          <div class="row-detail">
-            <span>{{ t('cashback.effective_stake') }} {{ formatMoneyCompact(row.effectiveStake, locale) }}</span>
-            <span>{{ t('cashback.bet_count', { n: row.betCount }) }}</span>
-          </div>
-          <div class="row-foot">
-            <span class="row-batch">{{ row.batchNo }}</span>
-            <span class="row-time">{{ formatTime(row.confirmedAt ?? row.createdAt) }}</span>
-          </div>
-        </article>
-      </div>
-
-      <div ref="sentinel" class="sentinel" />
-
-      <div v-if="loading && items.length > 0" class="load-more-spinner">
-        <GoldSpinner :size="24" />
-      </div>
-
-      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
-        {{ t('common.no_more') }}
-      </div>
-
-      <div v-else class="empty">
-        <p class="empty-title">{{ t('cashback.empty') }}</p>
-        <p class="empty-hint">{{ t('cashback.empty_hint') }}</p>
-      </div>
-    </template>
-  </div>
+  <DesktopCashbackRecordsView v-if="isDesktop" />
+  <MobileCashbackRecordsView v-else />
 </template>
-
-<style scoped>
-.cashback-page {
-  padding-bottom: 24px;
-}
-
-.top-bar {
-  margin-bottom: 4px;
-}
-
-.back-btn {
-  background: none;
-  border: none;
-  color: var(--primary-light, #d4af37);
-  font-size: 15px;
-  font-weight: 700;
-  padding: 4px 0 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-  color: var(--text-muted);
-  padding: 56px 20px;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.loading-text {
-  font-size: 13px;
-}
-
-.hero {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  padding: 18px 16px 16px;
-  margin-bottom: 14px;
-  border-radius: var(--radius, 12px);
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(26, 26, 26, 0.92));
-  border: 1px solid rgba(212, 175, 55, 0.28);
-  text-align: center;
-}
-
-.hero-amount {
-  font-size: 28px;
-  font-weight: 800;
-  color: #f0b90b;
-  line-height: 1.2;
-  text-shadow: 0 0 20px rgba(240, 185, 11, 0.2);
-}
-
-.hero-sub {
-  font-size: 12px;
-  color: var(--text-muted);
-  line-height: 1.4;
-}
-
-.section-title {
-  font-size: 10.5px;
-  color: #555;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 10px;
-}
-
-.list-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-  backdrop-filter: blur(10px);
-}
-
-.record-row {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
-}
-
-.record-row:last-child {
-  border-bottom: none;
-}
-
-.record-row--highlight {
-  background: rgba(212, 175, 55, 0.08);
-  box-shadow: inset 3px 0 0 #d4af37;
-}
-
-.ledger-hint {
-  margin: 0 0 12px;
-  font-size: 12px;
-  line-height: 1.5;
-  color: #666;
-}
-
-.row-main {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
-}
-
-.row-left {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.row-amount {
-  font-size: 17px;
-  font-weight: 800;
-  color: var(--primary-light);
-}
-
-.row-period {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-
-.row-rate {
-  flex-shrink: 0;
-  font-size: 12px;
-  font-weight: 700;
-  color: #f0b90b;
-  background: rgba(240, 185, 11, 0.1);
-  border: 1px solid rgba(240, 185, 11, 0.22);
-  border-radius: 999px;
-  padding: 3px 10px;
-}
-
-.row-detail {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.row-foot {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px dashed rgba(255, 255, 255, 0.06);
-  font-size: 11px;
-  color: #666;
-}
-
-.row-batch {
-  font-family: ui-monospace, monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 58%;
-}
-
-.row-time {
-  flex-shrink: 0;
-}
-
-.empty {
-  text-align: center;
-  padding: 48px 20px 32px;
-}
-
-.empty-title {
-  margin: 0 0 8px;
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--text-muted);
-}
-
-.empty-hint {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.5;
-  color: #666;
-}
-
-.sentinel {
-  height: 1px;
-}
-
-.load-more-spinner {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0 8px;
-}
-
-.end-hint {
-  text-align: center;
-  font-size: 12px;
-  color: #555;
-  font-weight: 600;
-  padding: 16px 0 4px;
-  letter-spacing: 0.03em;
-}
-</style>
diff --git a/apps/player/src/views/FootballView.vue b/apps/player/src/views/FootballView.vue
index 02b1bb3..ed3cc1f 100644
--- a/apps/player/src/views/FootballView.vue
+++ b/apps/player/src/views/FootballView.vue
@@ -1,784 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, onActivated, watch } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { usePlayerMatches } from '../composables/usePlayerMatches';
-import LeagueAccordionItem from '../components/LeagueAccordionItem.vue';
-import MatchBetCard from '../components/MatchBetCard.vue';
-import OutrightPanel from '../components/outright/OutrightPanel.vue';
-import emptyMatchesImg from '../assets/images/empty-matches.svg';
-import { useOnLocaleChange } from '../composables/useOnLocaleChange';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-import type { MatchPhase } from '../utils/matchPhase';
-import {
-  isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
-  isInLocalTodayMatchWindow as isInTodayMatchWindow,
-} from '@thebet365/shared';
+import { useViewport } from '../composables/useViewport';
+import MobileFootballView from './MobileFootballView.vue';
+import DesktopFootballView from './desktop/DesktopFootballView.vue';
 
-type MainTab = 'matches' | 'outright';
-
-interface Match {
-  id: string;
-  leagueId?: string;
-  homeTeamName: string;
-  awayTeamName: string;
-  homeTeamCode?: string;
-  awayTeamCode?: string;
-  homeTeamLogoUrl?: string | null;
-  awayTeamLogoUrl?: string | null;
-  startTime: string;
-  leagueName: string;
-  leagueLogoUrl?: string | null;
-  displayOrder?: number;
-  isHot?: boolean;
-  status?: string;
-  bettingOpen?: boolean;
-  matchPhase?: MatchPhase;
-  score?: {
-    htHome: number | null;
-    htAway: number | null;
-    ftHome: number | null;
-    ftAway: number | null;
-    homeCorners?: number | null;
-    awayCorners?: number | null;
-    homeYellowCards?: number | null;
-    awayYellowCards?: number | null;
-    homeRedCards?: number | null;
-    awayRedCards?: number | null;
-    homeCards?: number | null;
-    awayCards?: number | null;
-  } | null;
-}
-
-interface LeagueGroup {
-  leagueId: string;
-  leagueName: string;
-  leagueLogoUrl?: string | null;
-  matches: Match[];
-}
-
-const { t } = useI18n();
-const router = useRouter();
-const route = useRoute();
-
-const mainTab = ref<MainTab>('matches');
-const searchQuery = ref('');
-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;
-
-async function loadMatches() {
-  filterNow.value = new Date();
-  await loadSummary(true);
-}
-
-useOnLocaleChange(() => loadSummary(true));
-
-const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
-  onRefresh: async () => { await loadMatches(); },
-});
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
-
-function normalizeLeagueName(name: string): string {
-  return name
-    .replace(/\.unit$/i, '')
-    .replace(/[-_]+/g, ' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-}
-
-function syncSearchFromRoute() {
-  const q = route.query.search;
-  searchQuery.value = typeof q === 'string' ? q : '';
-}
-
-function matchesSearchKeyword(m: Match, keyword: string) {
-  if (!keyword) return true;
-  const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
-  return haystack.includes(keyword);
-}
-
-const filteredMatches = computed(() => {
-  if (mainTab.value !== 'matches') return [];
-  const now = filterNow.value;
-  const keyword = searchQuery.value.trim().toLowerCase();
-  return matches.value.filter((m) => {
-    if (!matchesSearchKeyword(m, keyword)) return false;
-    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 (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: normalizeLeagueName(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[] {
-  const map = new Map<string, LeagueGroup>();
-  for (const m of source) {
-    const id = m.leagueId ?? m.leagueName;
-    if (!map.has(id)) {
-      map.set(id, {
-        leagueId: id,
-        leagueName: normalizeLeagueName(m.leagueName),
-        leagueLogoUrl: m.leagueLogoUrl ?? null,
-        matches: [],
-      });
-    }
-    map.get(id)!.matches.push(m);
-  }
-  const groups = [...map.values()];
-  for (const g of groups) {
-    g.matches.sort(
-      (a, b) =>
-        (a.displayOrder ?? 0) - (b.displayOrder ?? 0) ||
-        new Date(a.startTime).getTime() - new Date(b.startTime).getTime(),
-    );
-  }
-  return groups.sort(
-    (a, b) =>
-      (a.matches[0]?.displayOrder ?? 0) - (b.matches[0]?.displayOrder ?? 0) ||
-      a.leagueName.localeCompare(b.leagueName),
-  );
-}
-
-const leagueGroups = computed(() => buildLeagueGroups(filteredMatches.value));
-
-const isSearchActive = computed(() => searchQuery.value.trim().length > 0);
-
-const sortedFilteredMatches = computed(() =>
-  [...filteredMatches.value].sort(
-    (a, b) =>
-      (a.displayOrder ?? 0) - (b.displayOrder ?? 0) ||
-      new Date(a.startTime).getTime() - new Date(b.startTime).getTime(),
-  ),
-);
-
-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 !== expandedLeagues.value.size || [...ids].some((id) => !expandedLeagues.value.has(id))) {
-    expandedLeagues.value = ids;
-  }
-});
-
-function toggleLeague(leagueId: string) {
-  const next = new Set(expandedLeagues.value);
-  if (next.has(leagueId)) next.delete(leagueId);
-  else next.add(leagueId);
-  expandedLeagues.value = next;
-}
-
-function selectMainTab(tab: MainTab) {
-  mainTab.value = tab;
-  if (tab === 'outright') outrightActivated.value = true;
-}
-
-onActivated(() => {
-  filterNow.value = new Date();
-  filterState.value.time = 'all';
-  syncSearchFromRoute();
-  void loadSummary(true, true);
-});
-
-watch(
-  () => route.query.search,
-  () => syncSearchFromRoute(),
-);
-
-function goMatch(id: string) {
-  router.push(`/match/${id}`);
-}
+const { isDesktop } = useViewport();
 </script>
 
 <template>
-  <div class="bet-page">
-    <div
-      class="pull-indicator"
-      :style="pullIndicatorStyle()"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <div class="main-tabs">
-      <button
-        type="button"
-        class="main-tab"
-        :class="{ active: mainTab === 'matches', 'tab-gold-active': mainTab === 'matches' }"
-        @click="selectMainTab('matches')"
-      >
-        <span class="tab-icon">⚽</span>
-        {{ t('bet.tab_matches') }}
-      </button>
-      <button
-        type="button"
-        class="main-tab"
-        :class="{ active: mainTab === 'outright', 'tab-gold-active': mainTab === 'outright' }"
-        @click="selectMainTab('outright')"
-      >
-        <span class="tab-icon">🏆</span>
-        {{ t('bet.tab_outright') }}
-      </button>
-    </div>
-
-    <div :class="['tab-panel', { 'tab-panel--hidden': mainTab !== 'matches' }]">
-      <div class="search-bar">
-        <span class="search-icon" aria-hidden="true">⌕</span>
-        <input
-          v-model="searchQuery"
-          type="search"
-          :placeholder="t('search.placeholder')"
-          enterkeyhint="search"
-          autocomplete="off"
-        />
-      </div>
-
-      <div class="filters-bar">
-        <div class="phase-filter">
-          <div class="league-dropdown">
-            <button type="button" class="dropdown-trigger" @click="dropdownOpen = !dropdownOpen">
-              <span class="dropdown-text">{{ 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="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>
-          <div v-if="isSearchActive && sortedFilteredMatches.length" class="search-results">
-            <p class="search-results-meta">
-              {{ t('search.results_count', { count: sortedFilteredMatches.length }) }}
-            </p>
-            <div class="search-match-list">
-              <article
-                v-for="match in sortedFilteredMatches"
-                :key="match.id"
-                class="search-result-item"
-              >
-                <p class="search-result-league">{{ normalizeLeagueName(match.leagueName) }}</p>
-                <MatchBetCard :match="match" @bet="goMatch" />
-              </article>
-            </div>
-          </div>
-          <div v-else-if="!isSearchActive && leagueGroups.length" class="league-list">
-            <LeagueAccordionItem
-              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.has(group.leagueId)"
-              @toggle="toggleLeague(group.leagueId)"
-              @bet="goMatch"
-            />
-          </div>
-          <div v-else class="empty">
-            <img :src="emptyMatchesImg" alt="" class="empty-icon" />
-            <p>{{ isSearchActive ? t('search.no_results') : t('bet.no_matches') }}</p>
-          </div>
-        </div>
-      </template>
-    </div>
-
-    <OutrightPanel
-      v-if="outrightActivated"
-      :class="['outright-tab', 'tab-panel', { 'tab-panel--hidden': mainTab !== 'outright' }]"
-      :activated="mainTab === 'outright'"
-    />
-
-
-
-  </div>
+  <DesktopFootballView v-if="isDesktop" />
+  <MobileFootballView v-else />
 </template>
-
-<style scoped>
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.bet-page {
-  margin: 0 -16px;
-  padding-bottom: 8px;
-  background: var(--bg-body);
-}
-
-/* Tab panel toggle: avoid display:none to prevent browser releasing image resources */
-.tab-panel {
-  display: block;
-}
-.tab-panel--hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.main-tabs {
-  display: flex;
-  gap: 8px;
-  padding: 0 12px 12px;
-}
-
-.main-tab {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 10px 8px;
-  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: var(--shadow);
-  transition: background 0.2s, border-color 0.2s, color 0.2s;
-}
-
-.main-tab.active {
-  font-weight: 700;
-  background: rgba(244, 162, 97, 0.1);
-  border-color: var(--primary);
-  color: var(--primary-light);
-}
-
-.tab-icon {
-  font-size: 16px;
-  line-height: 1;
-}
-
-.search-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 12px 8px;
-  padding: 0 10px;
-  height: 32px;
-  box-sizing: border-box;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-card);
-}
-
-.search-icon {
-  color: var(--gold);
-  font-size: 14px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.search-bar input {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  border: none;
-  background: transparent;
-  color: #fff;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.2;
-  outline: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.search-bar input::placeholder {
-  color: var(--text-muted);
-}
-
-.filters-bar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  padding: 0 12px 12px;
-}
-
-.phase-filter {
-  padding: 0;
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-}
-
-.right-filters {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.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;
-  flex-shrink: 0;
-}
-
-.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;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.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;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.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;
-  width: 100%;
-}
-
-.dropdown-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  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;
-  height: 24px;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-}
-
-.dropdown-text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dropdown-trigger .arrow-icon {
-  font-size: 8px;
-  color: var(--text-muted);
-  transition: transform 0.2s ease;
-  display: inline-block;
-  transform: scale(0.8);
-}
-
-.dropdown-trigger .arrow-icon.open {
-  transform: scale(0.8) rotate(180deg);
-}
-
-.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: 170px;
-  max-width: 240px;
-  max-height: 200px;
-  overflow-y: auto;
-  background: #0f1217;
-  border: 1px solid #2a3240;
-  border-radius: 8px;
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65);
-  padding: 6px 0;
-}
-
-.dropdown-item {
-  padding: 8px 14px;
-  font-size: 13px;
-  color: #e5e7eb;
-  cursor: pointer;
-  transition: background 0.2s;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border-bottom: 1px solid #1f2937;
-}
-
-.dropdown-item:last-child {
-  border-bottom: none;
-}
-
-.dropdown-item:hover,
-.dropdown-item:active {
-  background: #1b2330;
-}
-
-.dropdown-item.active {
-  color: #f4d06f;
-  background: #242f42;
-  font-weight: 700;
-}
-
-.league-list {
-  padding: 4px 12px 0;
-}
-
-.search-results {
-  padding: 0 12px;
-}
-
-.search-results-meta {
-  margin: 0 0 8px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted);
-}
-
-.search-match-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.search-result-item {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.search-result-league {
-  margin: 0;
-  padding: 0 2px;
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--primary-light);
-  line-height: 1.3;
-}
-
-.state,
-.placeholder,
-.empty {
-  text-align: center;
-  color: var(--text-muted);
-  padding: 48px 20px;
-  font-weight: 600;
-}
-
-.empty-icon {
-  width: 96px;
-  height: 96px;
-  margin-bottom: 14px;
-}
-
-.placeholder {
-  padding: 80px 20px;
-}
-
-.outright-tab {
-  min-height: 0;
-}
-</style>
diff --git a/apps/player/src/views/ForgotPasswordWrapperView.vue b/apps/player/src/views/ForgotPasswordWrapperView.vue
new file mode 100644
index 0000000..aaadb56
--- /dev/null
+++ b/apps/player/src/views/ForgotPasswordWrapperView.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useViewport } from '../composables/useViewport';
+import ForgotPasswordView from './ForgotPasswordView.vue';
+import DesktopForgotPasswordView from './desktop/DesktopForgotPasswordView.vue';
+const { isDesktop } = useViewport();
+</script>
+<template>
+  <DesktopForgotPasswordView v-if="isDesktop" />
+  <ForgotPasswordView v-else />
+</template>
diff --git a/apps/player/src/views/HomeView.vue b/apps/player/src/views/HomeView.vue
index 1e77905..95fe20b 100644
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -1,450 +1,12 @@
 <script setup lang="ts">
-import { onActivated, computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import emptyMatchesImg from '../assets/images/empty-matches.svg';
-import vsImg from '../assets/images/vs.png';
-import cardBg from '../assets/images/card-bg.webp';
-import BannerCarousel from '../components/BannerCarousel.vue';
-import { usePlayerHome } from '../composables/usePlayerHome';
-import TeamEmblem from '../components/TeamEmblem.vue';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-import { formatLocalMatchDateTime } from '@thebet365/shared';
-import type { PlayerHomeMatch } from '../composables/usePlayerHome';
-
-type HotTab = 'hot' | 'upcoming';
-
-const matchCardBg = `url(${cardBg})`;
-const { t, locale } = useI18n();
-const router = useRouter();
-const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
-const activeTab = ref<HotTab>('hot');
-
-const bannerFallbackTo = computed(() => {
-  const id = announcementItems.value[0]?.id;
-  return id ? `/announcements/${id}` : '/announcements';
-});
-
-const displayedMatches = computed<PlayerHomeMatch[]>(() =>
-  activeTab.value === 'hot' ? hotMatches.value : upcomingMatches.value,
-);
-
-const emptyMessage = computed(() =>
-  activeTab.value === 'hot' ? t('home.no_matches') : t('home.upcoming_empty'),
-);
-
-const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
-  onRefresh: async () => { await load(true); },
-});
-
-onActivated(() => { void load(true); });
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
-
-function goMatch(id: string) {
-  router.push(`/match/${id}`);
-}
-
-function formatKickoff(startTime: string) {
-  return formatLocalMatchDateTime(startTime, locale.value, { variant: 'full' });
-}
+import { useViewport } from '../composables/useViewport';
+import MobileHomeView from './MobileHomeView.vue';
+import DesktopHomeView from './desktop/DesktopHomeView.vue';
 
+const { isDesktop } = useViewport();
 </script>
 
 <template>
-  <div>
-    <div
-      class="pull-indicator"
-      :style="pullIndicatorStyle()"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <BannerCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
-
-    <div class="hot-tabs" role="tablist" :aria-label="t('home.hot_matches')">
-      <button
-        type="button"
-        role="tab"
-        class="hot-tab"
-        :class="{ active: activeTab === 'hot' }"
-        :aria-selected="activeTab === 'hot'"
-        @click="activeTab = 'hot'"
-      >
-        {{ t('home.hot_tab') }}
-      </button>
-      <button
-        type="button"
-        role="tab"
-        class="hot-tab"
-        :class="{ active: activeTab === 'upcoming' }"
-        :aria-selected="activeTab === 'upcoming'"
-        @click="activeTab = 'upcoming'"
-      >
-        {{ t('home.upcoming_tab') }}
-      </button>
-    </div>
-    <div
-      v-for="(match, index) in displayedMatches"
-      :key="match.id"
-      class="match-card"
-      :class="{ 'match-card--live-anim': activeTab === 'hot' && index < 3 }"
-      @click="goMatch(match.id)"
-    >
-      <div class="match-info">
-        <div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
-        <div class="match-time">{{ formatKickoff(match.startTime) }}</div>
-      </div>
-      <div class="match-flags" aria-hidden="true">
-        <TeamEmblem
-          size="md"
-          :team-code="match.homeTeamCode"
-          :team-name="match.homeTeamName"
-          :logo-url="match.homeTeamLogoUrl"
-        />
-        <div class="vs-arena">
-          <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" />
-              </linearGradient>
-            </defs>
-            <path
-              class="hz-path hz-path-main"
-              :stroke="`url(#hzBoltGrad-${match.id})`"
-              d="M1 14 H16 L20 5 L24 23 L28 9 L32 14 H40 L44 6 L48 22 L52 12 L56 14 H71"
-            />
-            <path
-              class="hz-path hz-path-sub"
-              :stroke="`url(#hzBoltGrad-${match.id})`"
-              d="M3 19 H14 L18 15 L22 19 H50 L54 16 L58 19 H69"
-            />
-          </svg>
-          <span class="hz-beam" aria-hidden="true" />
-          <img :src="vsImg" alt="" class="vs-img" />
-        </div>
-        <TeamEmblem
-          size="md"
-          :team-code="match.awayTeamCode"
-          :team-name="match.awayTeamName"
-          :logo-url="match.awayTeamLogoUrl"
-        />
-      </div>
-    </div>
-
-    <div v-if="!loading && !displayedMatches.length" class="empty">
-      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
-      <p>{{ emptyMessage }}</p>
-    </div>
-  </div>
+  <DesktopHomeView v-if="isDesktop" />
+  <MobileHomeView v-else />
 </template>
-
-<style scoped>
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.hot-tabs {
-  display: flex;
-  gap: 8px;
-  margin: 14px 0;
-}
-
-.hot-tab {
-  flex: 1;
-  min-height: 36px;
-  padding: 0 12px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border);
-  background: var(--bg-card);
-  color: var(--text-muted);
-  font-size: 13px;
-  font-weight: 600;
-  transition: background 0.2s, border-color 0.2s, color 0.2s;
-}
-
-.hot-tab.active {
-  font-weight: 700;
-  background: rgba(244, 162, 97, 0.1);
-  border-color: var(--primary);
-  color: var(--primary-light);
-}
-
-.hot-tab:active {
-  opacity: 0.92;
-}
-
-.match-card {
-  position: relative;
-  isolation: isolate;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-  padding: 14px 16px;
-  min-height: 72px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: none;
-  background: var(--bg-card);
-  cursor: pointer;
-  transition: opacity 0.2s, transform 0.2s;
-  overflow: hidden;
-}
-
-.match-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: v-bind(matchCardBg) center / 100% 100% no-repeat;
-  opacity: 0.25;
-  z-index: 0;
-  pointer-events: none;
-}
-
-.match-card:active {
-  opacity: 0.92;
-  transform: scale(0.995);
-}
-
-.match-info,
-.match-flags {
-  position: relative;
-  z-index: 1;
-}
-
-.match-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.match-teams {
-  font-weight: 800;
-  margin-bottom: 8px;
-  font-size: 16px;
-  line-height: 1.3;
-}
-
-.match-time {
-  font-size: 13px;
-  color: var(--text-muted);
-  font-weight: 500;
-}
-
-.match-flags {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 46%;
-}
-
-.vs-arena {
-  position: relative;
-  flex-shrink: 0;
-  width: 64px;
-  height: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hz-lightning {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  pointer-events: none;
-  overflow: visible;
-}
-
-.hz-path {
-  fill: none;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
-  opacity: 0;
-}
-
-.match-card--live-anim .hz-path-main {
-  animation: hz-strike-main 2.6s ease-in-out infinite;
-}
-
-.match-card--live-anim .hz-path-sub {
-  stroke-width: 1.6;
-  animation: hz-strike-sub 2.6s ease-in-out infinite;
-  animation-delay: 0.12s;
-}
-
-.match-card--live-anim .hz-beam {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  height: 2px;
-  transform: translateY(-50%);
-  pointer-events: none;
-  z-index: 1;
-  background: linear-gradient(
-    90deg,
-    rgba(94, 184, 255, 0) 0%,
-    rgba(184, 236, 255, 0.95) 28%,
-    #fff 50%,
-    rgba(255, 208, 128, 0.95) 72%,
-    rgba(255, 144, 64, 0) 100%
-  );
-  opacity: 0;
-  filter: blur(0.4px);
-  animation: hz-beam-flash 2.6s ease-in-out infinite;
-}
-
-.hz-beam {
-  display: none;
-}
-
-.vs-img {
-  position: relative;
-  z-index: 0;
-  width: 48px;
-  height: auto;
-  object-fit: contain;
-  filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
-}
-
-.match-card--live-anim .vs-img {
-  animation: vs-glow 2.4s ease-in-out infinite;
-}
-
-@keyframes hz-strike-main {
-  0%,
-  72%,
-  100% {
-    opacity: 0;
-  }
-
-  74% {
-    opacity: 1;
-  }
-
-  75% {
-    opacity: 0.25;
-  }
-
-  76% {
-    opacity: 0.95;
-  }
-
-  78% {
-    opacity: 0;
-  }
-}
-
-@keyframes hz-strike-sub {
-  0%,
-  74%,
-  100% {
-    opacity: 0;
-  }
-
-  76% {
-    opacity: 0.85;
-  }
-
-  77% {
-    opacity: 0.2;
-  }
-
-  78% {
-    opacity: 0.7;
-  }
-
-  80% {
-    opacity: 0;
-  }
-}
-
-@keyframes hz-beam-flash {
-  0%,
-  71%,
-  100% {
-    opacity: 0;
-    transform: translateY(-50%) scaleX(0.6);
-  }
-
-  73% {
-    opacity: 0.85;
-    transform: translateY(-50%) scaleX(1);
-  }
-
-  75% {
-    opacity: 0.15;
-    transform: translateY(-50%) scaleX(0.95);
-  }
-
-  76% {
-    opacity: 0.75;
-    transform: translateY(-50%) scaleX(1);
-  }
-
-  78% {
-    opacity: 0;
-    transform: translateY(-50%) scaleX(1.05);
-  }
-}
-
-@keyframes vs-glow {
-  0%,
-  100% {
-    opacity: 0.82;
-    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
-  }
-
-  50% {
-    opacity: 1;
-    filter:
-      drop-shadow(0 0 3px rgba(255, 230, 140, 0.7))
-      drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .vs-img {
-    animation: none;
-    filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
-  }
-
-  .hz-path,
-  .hz-beam {
-    animation: none;
-    opacity: 0;
-  }
-}
-
-.empty {
-  text-align: center;
-  color: var(--text-muted);
-  padding: 40px 20px;
-  font-weight: 600;
-}
-
-.empty-icon {
-  width: 96px;
-  height: 96px;
-  margin-bottom: 14px;
-}
-</style>
diff --git a/apps/player/src/views/InboxHubView.vue b/apps/player/src/views/InboxHubView.vue
index c2cf47e..135acdc 100644
--- a/apps/player/src/views/InboxHubView.vue
+++ b/apps/player/src/views/InboxHubView.vue
@@ -1,299 +1,10 @@
 <script setup lang="ts">
-import { computed, onActivated, onMounted, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import MessageListPanel from '../components/MessageListPanel.vue';
-import CustomerServicePanel from '../components/CustomerServicePanel.vue';
-import ConfirmDialog from '../components/ConfirmDialog.vue';
-import { useAuthStore } from '../stores/auth';
-import { usePlayerMessages } from '../composables/usePlayerMessages';
-import { useInboxFeature } from '../composables/useInboxFeature';
+import { useViewport } from '../composables/useViewport';
+import MobileInboxHubView from './MobileInboxHubView.vue';
 
-type HubTab = 'messages' | 'support';
-
-const route = useRoute();
-const router = useRouter();
-const { t } = useI18n();
-const auth = useAuthStore();
-const { inboxEnabled, hubTitleKey } = useInboxFeature();
-const {
-  unreadCount,
-  messages,
-  listLoaded,
-  refreshUnreadCount,
-  markAllRead,
-  deleteAllMessages,
-} = usePlayerMessages();
-
-const markingAll = ref(false);
-const deletingAll = ref(false);
-const deleteAllConfirmVisible = ref(false);
-
-const activeTab = computed<HubTab>(() => {
-  if (!inboxEnabled.value) return 'support';
-  return route.query.tab === 'support' ? 'support' : 'messages';
-});
-
-const unreadInList = computed(() => messages.value.filter((item) => !item.isRead).length);
-const hasMessages = computed(() => listLoaded.value && messages.value.length > 0);
-const showMessageActions = computed(
-  () => inboxEnabled.value && activeTab.value === 'messages' && auth.token && hasMessages.value,
-);
-
-function switchTab(tab: HubTab) {
-  if (!inboxEnabled.value || tab === activeTab.value) return;
-  router.replace({ path: '/messages', query: tab === 'support' ? { tab: 'support' } : {} });
-}
-
-async function onMarkAllRead() {
-  if (!unreadInList.value || markingAll.value) return;
-  markingAll.value = true;
-  try {
-    await markAllRead();
-    await refreshUnreadCount();
-  } finally {
-    markingAll.value = false;
-  }
-}
-
-function onDeleteAll() {
-  if (deletingAll.value || !messages.value.length) return;
-  deleteAllConfirmVisible.value = true;
-}
-
-async function confirmDeleteAll() {
-  if (deletingAll.value || !messages.value.length) return;
-  deletingAll.value = true;
-  try {
-    await deleteAllMessages();
-    await refreshUnreadCount();
-    deleteAllConfirmVisible.value = false;
-  } finally {
-    deletingAll.value = false;
-  }
-}
-
-function ensureSupportTabWhenDisabled() {
-  if (inboxEnabled.value || route.path !== '/messages') return;
-  if (route.query.tab === 'support') return;
-  void router.replace({ path: '/messages', query: { tab: 'support' } });
-}
-
-function goBack() {
-  router.back();
-}
-
-watch(inboxEnabled, (enabled, prev) => {
-  if (prev && !enabled) ensureSupportTabWhenDisabled();
-});
-
-watch(
-  () => route.query.tab,
-  () => {
-    if (inboxEnabled.value && activeTab.value === 'messages') void refreshUnreadCount();
-  },
-);
-
-onMounted(ensureSupportTabWhenDisabled);
-
-onActivated(() => {
-  if (inboxEnabled.value) {
-    void refreshUnreadCount();
-    return;
-  }
-  ensureSupportTabWhenDisabled();
-});
+const { isDesktop } = useViewport();
 </script>
 
 <template>
-  <div class="inbox-hub" :class="{ 'inbox-hub--tabs': inboxEnabled }">
-    <header class="page-header">
-      <button type="button" class="back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
-      <h1>{{ t(hubTitleKey) }}</h1>
-    </header>
-
-    <div v-if="inboxEnabled" class="hub-top-bar">
-      <nav class="hub-tabs" role="tablist">
-        <button
-          type="button"
-          role="tab"
-          class="hub-tab"
-          :class="{ active: activeTab === 'messages' }"
-          :aria-selected="activeTab === 'messages'"
-          @click="switchTab('messages')"
-        >
-          <span class="hub-tab-label">{{ t('inbox_hub.tab_messages') }}</span>
-          <span v-if="auth.token && unreadCount > 0" class="hub-tab-badge">
-            {{ unreadCount > 99 ? '99+' : unreadCount }}
-          </span>
-        </button>
-        <button
-          type="button"
-          role="tab"
-          class="hub-tab"
-          :class="{ active: activeTab === 'support' }"
-          :aria-selected="activeTab === 'support'"
-          @click="switchTab('support')"
-        >
-          {{ t('inbox_hub.tab_support') }}
-        </button>
-      </nav>
-    </div>
-
-    <div v-if="showMessageActions" class="message-actions">
-      <button
-        type="button"
-        class="action-btn"
-        :disabled="!unreadInList || markingAll"
-        @click="onMarkAllRead"
-      >
-        {{ t('messages.mark_all_read') }}
-      </button>
-      <button
-        type="button"
-        class="action-btn danger"
-        :disabled="deletingAll"
-        @click="onDeleteAll"
-      >
-        {{ t('messages.delete_all') }}
-      </button>
-    </div>
-
-    <MessageListPanel v-if="inboxEnabled" v-show="activeTab === 'messages'" />
-    <CustomerServicePanel v-if="activeTab === 'support'" />
-
-    <ConfirmDialog
-      v-model:visible="deleteAllConfirmVisible"
-      :title="t('messages.delete_all')"
-      :message="t('messages.delete_all_confirm')"
-      :confirm-text="t('messages.delete_all')"
-      danger
-      :loading="deletingAll"
-      @confirm="confirmDeleteAll"
-    />
-  </div>
+  <MobileInboxHubView v-if="!isDesktop" />
 </template>
-
-<style scoped>
-.inbox-hub {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  padding: 0 0 24px;
-}
-
-.inbox-hub--tabs {
-  margin: -12px -16px 0;
-  padding: max(12px, env(safe-area-inset-top, 0px)) 16px 0;
-}
-
-.page-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0 0 14px;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 0;
-}
-
-.back-btn {
-  width: 36px;
-  height: 36px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: #141414;
-  color: var(--gold);
-  font-size: 22px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.page-header h1 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: #fff;
-}
-
-.hub-top-bar {
-  margin: 0;
-  border-bottom: 1px solid var(--border);
-}
-
-
-
-.hub-tabs {
-  flex: 1;
-  display: flex;
-  gap: 0;
-  margin: 0;
-  min-width: 0;
-}
-
-.hub-tab {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 10px 8px;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: transparent;
-  color: var(--text-muted);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
-}
-
-.hub-tab.active {
-  color: var(--gold);
-  border-bottom-color: var(--gold);
-}
-
-.hub-tab-label {
-  line-height: 1.2;
-}
-
-.hub-tab-badge {
-  min-width: 18px;
-  padding: 0 5px;
-  border-radius: 9px;
-  background: var(--gold);
-  color: #111;
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 18px;
-  text-align: center;
-}
-
-.message-actions {
-  display: flex;
-  gap: 8px;
-  padding: 10px 0 4px;
-}
-
-.action-btn {
-  flex: 1;
-  padding: 8px 10px;
-  border: 1px solid var(--border-gold-soft);
-  border-radius: 8px;
-  background: rgba(212, 175, 55, 0.08);
-  color: var(--gold);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.action-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.action-btn.danger {
-  border-color: rgba(255, 80, 80, 0.35);
-  background: rgba(255, 80, 80, 0.08);
-  color: #f88;
-}
-</style>
diff --git a/apps/player/src/views/LoginWrapperView.vue b/apps/player/src/views/LoginWrapperView.vue
new file mode 100644
index 0000000..0ddd32e
--- /dev/null
+++ b/apps/player/src/views/LoginWrapperView.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useViewport } from '../composables/useViewport';
+import LoginView from './LoginView.vue';
+import DesktopLoginView from './desktop/DesktopLoginView.vue';
+const { isDesktop } = useViewport();
+</script>
+<template>
+  <DesktopLoginView v-if="isDesktop" />
+  <LoginView v-else />
+</template>
diff --git a/apps/player/src/views/MatchDetailView.vue b/apps/player/src/views/MatchDetailView.vue
index eaccd87..25530f9 100644
--- a/apps/player/src/views/MatchDetailView.vue
+++ b/apps/player/src/views/MatchDetailView.vue
@@ -1,989 +1,12 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import api from '../api';
-import { formatMoney } from '../utils/localeDisplay';
-import { useBetSlipStore } from '../stores/betSlip';
-import { useAuthStore } from '../stores/auth';
-import TeamEmblem from '../components/TeamEmblem.vue';
-import MatchBetGuide from '../components/match-detail/MatchBetGuide.vue';
-import MarketTypeTile from '../components/match-detail/MarketTypeTile.vue';
-import MarketSelectionsPanel from '../components/match-detail/MarketSelectionsPanel.vue';
-import CorrectScorePanel from '../components/match-detail/CorrectScorePanel.vue';
-import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
-import { useOnLocaleChange } from '../composables/useOnLocaleChange';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-import vsImg from '../assets/images/vs.png';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { matchPhaseLabel, type MatchPhase } from '../utils/matchPhase';
-import { formatLocalMatchDateTime } from '@thebet365/shared';
+import { useViewport } from '../composables/useViewport';
+import MobileMatchDetailView from './MobileMatchDetailView.vue';
+import DesktopMatchDetailView from './desktop/DesktopMatchDetailView.vue';
 
-const route = useRoute();
-const router = useRouter();
-const { t, locale } = useI18n();
-const slip = useBetSlipStore();
-const auth = useAuthStore();
-
-function goLogin() {
-  auth.showLoginPrompt(route.fullPath);
-}
-
-interface Market {
-  id: string;
-  marketType: string;
-  marketDisplayName?: string;
-  lineKey?: string | null;
-  period: string;
-  lineValue?: string | number | null;
-  status?: string;
-  allowSingle?: boolean;
-  allowParlay?: boolean;
-  promoLabel?: string | null;
-  selections: Selection[];
-}
-
-interface Selection {
-  id: string;
-  selectionCode: string;
-  selectionName: string;
-  selectionDisplayName?: string;
-  odds: string;
-  oddsVersion: string;
-}
-
-interface MatchDetail {
-  id: string;
-  leagueName?: string;
-  leagueLogoUrl?: string | null;
-  homeTeamName: string;
-  awayTeamName: string;
-  homeTeamCode?: string;
-  awayTeamCode?: string;
-  homeTeamLogoUrl?: string | null;
-  awayTeamLogoUrl?: string | null;
-  startTime: string;
-  stage?: string | null;
-  groupName?: string | null;
-  status?: string;
-  bettingOpen?: boolean;
-  matchPhase?: MatchPhase;
-  score?: {
-    htHome: number | null;
-    htAway: number | null;
-    ftHome: number | null;
-    ftAway: number | null;
-    homeCorners?: number | null;
-    awayCorners?: number | null;
-    homeYellowCards?: number | null;
-    awayYellowCards?: number | null;
-    homeRedCards?: number | null;
-    awayRedCards?: number | null;
-    homeCards?: number | null;
-    awayCards?: number | null;
-  } | null;
-  markets: Market[];
-}
-
-const match = ref<MatchDetail | null>(null);
-const loading = ref(true);
-
-interface MyBet {
-  betNo: string;
-  betType: string;
-  stake: string;
-  totalOdds: string;
-  potentialReturn: string;
-  actualReturn: string;
-  status: string;
-  placedAt: string;
-  pickLabel: string;
-  matchTitle: string;
-}
-const myBets = ref<MyBet[]>([]);
-const loadingMyBets = ref(false);
-
-async function loadMyBets() {
-  if (!match.value || !auth.token) return;
-  loadingMyBets.value = true;
-  try {
-    const { data } = await api.get('/player/bets', {
-      params: { page: 1, matchId: match.value.id },
-    });
-    myBets.value = (data.data?.items ?? data.data ?? []) as MyBet[];
-  } catch {
-    myBets.value = [];
-  } finally {
-    loadingMyBets.value = false;
-  }
-}
-
-const statusLabel = (status: string) => {
-  const s = status.toUpperCase();
-  if (s === 'WON' || s === 'WIN') return t('history.status_won');
-  if (s === 'LOST' || s === 'LOSE') return t('history.status_lost');
-  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return t('history.status_push');
-  return t('history.status_pending');
-};
-
-const statusClass = (status: string) => {
-  const s = status.toUpperCase();
-  if (s === 'WON' || s === 'WIN') return 'bet-status-won';
-  if (s === 'LOST' || s === 'LOSE') return 'bet-status-lost';
-  return 'bet-status-pending';
-};
-const marketsById = computed(() => {
-  const map = new Map<string, Market>();
-  for (const m of match.value?.markets ?? []) {
-    map.set(m.id, m);
-  }
-  return map;
-});
-
-const visibleMarkets = computed(() => match.value?.markets ?? []);
-
-const kickoff = computed(() => {
-  if (!match.value) return '';
-  return formatLocalMatchDateTime(match.value.startTime, locale.value, { variant: 'full' });
-});
-
-const bettingOpen = computed(() => match.value?.bettingOpen !== false);
-
-const matchPhase = computed(
-  (): MatchPhase =>
-    match.value?.matchPhase ?? (bettingOpen.value ? 'open' : 'closed_pending'),
-);
-
-const phaseLabel = computed(() => matchPhaseLabel(t, matchPhase.value));
-
-const liveScoreText = computed(() => {
-  const s = match.value?.score;
-  if (!s || s.ftHome == null || s.ftAway == null) return '';
-  return `${s.ftHome} - ${s.ftAway}`;
-});
-
-function statValue(value: number | null | undefined) {
-  return value == null ? '-' : String(value);
-}
-
-function statPair(home: number | null | undefined, away: number | null | undefined) {
-  return `${statValue(home)} - ${statValue(away)}`;
-}
-
-const resultStats = computed(() => {
-  const s = match.value?.score;
-  if (!s || matchPhase.value !== 'settled') return [];
-  return [
-    { key: 'ht', label: t('bet.result_ht'), value: statPair(s.htHome, s.htAway) },
-    { key: 'ft', label: t('bet.result_ft'), value: statPair(s.ftHome, s.ftAway) },
-    { key: 'corners', label: t('bet.result_corners'), value: statPair(s.homeCorners, s.awayCorners) },
-    {
-      key: 'yellow',
-      label: t('bet.result_yellow_cards'),
-      value: statPair(s.homeYellowCards, s.awayYellowCards),
-    },
-    { key: 'red', label: t('bet.result_red_cards'), value: statPair(s.homeRedCards, s.awayRedCards) },
-  ];
-});
-
-const showResultStats = computed(() => resultStats.value.length > 0);
-
-function marketLabel(market: Market | null | undefined) {
-  return market?.marketDisplayName?.trim() || market?.marketType || '';
-}
-
-function normalizeMarketStatus(status?: string) {
-  return (status ?? 'OPEN').toUpperCase();
-}
-
-function isMarketOpen(market: Market) {
-  return normalizeMarketStatus(market.status) === 'OPEN';
-}
-
-function marketStatusLabel(status?: string) {
-  const normalized = normalizeMarketStatus(status);
-  if (normalized === 'SUSPENDED') return t('bet.market_status_suspended');
-  if (normalized === 'CLOSED') return t('bet.market_status_closed');
-  return '';
-}
-
-function isMarketLocked(market: Market) {
-  if (!bettingOpen.value || !isMarketOpen(market)) return true;
-  const singleOk = market.allowSingle !== false;
-  const parlayOk = market.allowParlay !== false;
-  return !singleOk && !parlayOk;
-}
-
-function selectionLabel(sel: Selection) {
-  const parsedScore = parseScoreCode(sel.selectionCode, t);
-  if (parsedScore) return parsedScore.display;
-  return sel.selectionDisplayName?.trim() || sel.selectionName;
-}
-
-async function loadMatch() {
-  loading.value = true;
-  try {
-    const { data } = await api.get(`/player/matches/${route.params.id}`);
-    match.value = data.data;
-  } finally {
-    loading.value = false;
-  }
-  loadMyBets();
-}
-
-useOnLocaleChange(loadMatch);
-
-const { pullDistance, spinning, progress } = usePullToRefresh({
-  onRefresh: loadMatch,
-});
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
-
-function isSelected(id: string) {
-  return slip.singleItem?.selectionId === id || slip.parlayItems.some((i) => i.selectionId === id);
-}
-
-function toggleSelection(sel: Selection, market: Market) {
-  if (!match.value || isMarketLocked(market)) return;
-  if (!auth.token) {
-    goLogin();
-    return;
-  }
-  slip.addItem({
-    selectionId: sel.id,
-    oddsVersion: String(sel.oddsVersion),
-    matchId: match.value.id,
-    matchName: `${match.value.homeTeamName} vs ${match.value.awayTeamName}`,
-    marketId: market.id,
-    marketName: marketLabel(market),
-    selectionName: selectionLabel(sel),
-    odds: parseFloat(sel.odds),
-    marketType: market.marketType,
-    lineValue:
-      market.lineValue != null && market.lineValue !== ''
-        ? parseFloat(String(market.lineValue))
-        : null,
-    allowSingle: market.allowSingle,
-    allowParlay: market.allowParlay,
-  });
-  slip.openDrawer();
-}
-
-function onPickSelection(selId: string, marketId: string) {
-  const market = marketsById.value.get(marketId);
-  const sel = market?.selections.find((s) => s.id === selId);
-  if (!market || !sel) return;
-  toggleSelection(sel, market);
-}
+const { isDesktop } = useViewport();
 </script>
 
 <template>
-  <div class="detail-page">
-    <div
-      class="pull-indicator"
-      :style="pullIndicatorStyle()"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <header class="toolbar">
-      <button type="button" class="icon-btn" :aria-label="t('bet.back')" @click="router.back()">←</button>
-      <span class="toolbar-title">{{ match?.leagueName ?? '' }}</span>
-      <div class="toolbar-actions">
-        <MatchBetGuide />
-        <button
-          type="button"
-          class="icon-btn"
-          :aria-label="t('bet.refresh')"
-          :disabled="loading"
-          @click="loadMatch"
-        >
-          ↻
-        </button>
-      </div>
-    </header>
-
-    <div v-if="loading" class="state">
-      <GoldSpinner :size="36" />
-    </div>
-    <template v-else-if="match">
-      <section class="match-hero" :class="{ 'match-hero--phase': matchPhase !== 'open' }">
-        <span v-if="matchPhase === 'settled'" class="status-tag status-tag--settled">{{ phaseLabel }}</span>
-        <span v-else-if="matchPhase === 'closed_pending'" class="status-tag status-tag--pending">{{ phaseLabel }}</span>
-        <div class="hero-teams">
-          <!-- home -->
-          <div class="hero-team">
-            <TeamEmblem
-              size="lg"
-              :team-code="match.homeTeamCode"
-              :team-name="match.homeTeamName"
-              :logo-url="match.homeTeamLogoUrl"
-            />
-            <span class="hero-name">{{ match.homeTeamName }}</span>
-          </div>
-
-          <!-- VS arena with lightning -->
-          <div class="vs-arena">
-            <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" />
-                </linearGradient>
-              </defs>
-              <path
-                class="hz-path hz-path-main"
-                stroke="url(#hzDetailGrad)"
-                d="M1 14 H16 L20 5 L24 23 L28 9 L32 14 H40 L44 6 L48 22 L52 12 L56 14 H71"
-              />
-              <path
-                class="hz-path hz-path-sub"
-                stroke="url(#hzDetailGrad)"
-                d="M3 19 H14 L18 15 L22 19 H50 L54 16 L58 19 H69"
-              />
-            </svg>
-            <span class="hz-beam" aria-hidden="true" />
-            <img :src="vsImg" alt="" class="vs-img" />
-          </div>
-
-          <!-- away -->
-          <div class="hero-team">
-            <TeamEmblem
-              size="lg"
-              :team-code="match.awayTeamCode"
-              :team-name="match.awayTeamName"
-              :logo-url="match.awayTeamLogoUrl"
-            />
-            <span class="hero-name">{{ match.awayTeamName }}</span>
-          </div>
-        </div>
-
-        <p class="kickoff">{{ t('bet.kickoff_time') }}{{ kickoff }}</p>
-        <p v-if="liveScoreText" class="live-score">{{ liveScoreText }}</p>
-      </section>
-
-      <section v-if="showResultStats" class="result-stats-section">
-        <div class="result-stats-head">
-          <h3>{{ t('bet.result_stats_title') }}</h3>
-          <span>{{ match.homeTeamName }} / {{ match.awayTeamName }}</span>
-        </div>
-        <div class="result-stats-grid">
-          <div v-for="item in resultStats" :key="item.key" class="result-stat-item">
-            <span class="result-stat-label">{{ item.label }}</span>
-            <span class="result-stat-value">{{ item.value }}</span>
-          </div>
-        </div>
-      </section>
-
-      <!-- 我的投注 -->
-      <section v-if="myBets.length" class="my-bets-section">
-        <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">
-              <span class="bet-type">{{ bet.betType === 'PARLAY' ? t('history.parlay_league') : bet.pickLabel }}</span>
-              <span class="bet-status" :class="statusClass(bet.status)">{{ statusLabel(bet.status) }}</span>
-            </div>
-            <div class="bet-footer">
-              <span class="bet-stake">{{ t('history.stake') }} {{ formatMoney(bet.stake, locale) }}</span>
-              <span class="bet-return" :class="statusClass(bet.status)">
-                {{ statusClass(bet.status) === 'bet-status-won' ? '+' : '' }}{{ formatMoney(bet.actualReturn || bet.potentialReturn, locale) }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section class="markets-section">
-        <div class="market-list">
-          <div
-            v-for="market in visibleMarkets"
-            :key="market.id"
-            class="market-group"
-            :class="{ open: true }"
-          >
-            <MarketTypeTile
-              :label="marketLabel(market)"
-              :promo-label="market.promoLabel?.trim() || ''"
-              :status-label="bettingOpen && !isMarketOpen(market) ? marketStatusLabel(market.status) : ''"
-              :has-market="true"
-              :expanded="true"
-            />
-            <div class="market-panel-wrap" :class="{ locked: isMarketLocked(market) }">
-              <span v-if="!bettingOpen && matchPhase === 'settled'" class="market-status-tag market-status-tag--settled">{{ phaseLabel }}</span>
-              <span v-else-if="!bettingOpen" class="market-status-tag market-status-tag--pending">{{ phaseLabel }}</span>
-              <span
-                v-else-if="!isMarketOpen(market)"
-                class="market-status-tag"
-                :class="normalizeMarketStatus(market.status) === 'CLOSED' ? 'market-status-tag--closed' : 'market-status-tag--suspended'"
-              >
-                {{ marketStatusLabel(market.status) }}
-              </span>
-              <CorrectScorePanel
-                v-if="isCorrectScoreMarket(market.marketType)"
-                :market-type="market.marketType"
-                :selections="market.selections"
-                :locked="isMarketLocked(market)"
-                :is-selected="isSelected"
-                @pick="onPickSelection($event, market.id)"
-              />
-              <MarketSelectionsPanel
-                v-else
-                compact
-                :locked="isMarketLocked(market)"
-                :line-value="market.lineValue"
-                :selections="market.selections"
-                :is-selected="isSelected"
-                @pick="onPickSelection($event, market.id)"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-    </template>
-  </div>
+  <DesktopMatchDetailView v-if="isDesktop" />
+  <MobileMatchDetailView v-else />
 </template>
-
-<style scoped>
-.detail-page {
-  margin: 0 -16px;
-  padding-bottom: 16px;
-}
-
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 12px 8px;
-  gap: 8px;
-  position: sticky;
-  top: -12px;
-  z-index: 50;
-  margin-top: -12px;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(4px);
-}
-
-.toolbar-title {
-  flex: 1;
-  text-align: center;
-  font-size: 13px;
-  font-weight: 800;
-  color: var(--primary-light);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 4px;
-}
-
-.toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.icon-btn {
-  flex-shrink: 0;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--primary-light);
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 0;
-}
-
-.icon-btn:disabled {
-  opacity: 0.45;
-}
-
-/* ── match hero ── */
-.match-hero {
-  position: relative;
-  isolation: isolate;
-  margin: 0 0 10px;
-  padding: 14px 12px 16px;
-  overflow: hidden;
-}
-
-.match-hero--phase {
-  opacity: 0.98;
-}
-
-/* ── hero status tag (top-right corner) ── */
-.status-tag {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 5;
-  font-size: 11px;
-  font-weight: 800;
-  padding: 4px 14px;
-  border-radius: 0 6px 0 10px;
-  line-height: 1.3;
-  white-space: nowrap;
-  letter-spacing: 0.02em;
-}
-
-.status-tag--settled {
-  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
-  color: #8a9ab8;
-  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
-  border-left: 1px solid rgba(120, 140, 180, 0.3);
-}
-
-.status-tag--pending {
-  background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
-  color: #c8a84e;
-  border-bottom: 1px solid rgba(200, 168, 78, 0.3);
-  border-left: 1px solid rgba(200, 168, 78, 0.3);
-}
-
-/* ── market panel smaller status tag ── */
-.market-status-tag {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 5;
-  font-size: 10px;
-  font-weight: 800;
-  padding: 3px 10px;
-  border-radius: 0 4px 0 8px;
-  line-height: 1.3;
-  white-space: nowrap;
-  letter-spacing: 0.02em;
-}
-
-.market-status-tag--settled {
-  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
-  color: #8a9ab8;
-  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
-  border-left: 1px solid rgba(120, 140, 180, 0.3);
-}
-
-.market-status-tag--pending {
-  background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
-  color: #c8a84e;
-  border-bottom: 1px solid rgba(200, 168, 78, 0.3);
-  border-left: 1px solid rgba(200, 168, 78, 0.3);
-}
-
-.market-status-tag--suspended {
-  background: linear-gradient(180deg, rgba(240, 180, 41, 0.28) 0%, rgba(120, 80, 10, 0.92) 100%);
-  color: #ffe08a;
-  border-bottom: 1px solid rgba(240, 180, 41, 0.45);
-  border-left: 1px solid rgba(240, 180, 41, 0.45);
-}
-
-.market-status-tag--closed {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(40, 40, 55, 0.95) 100%);
-  color: #8a9ab8;
-  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
-  border-left: 1px solid rgba(120, 140, 180, 0.3);
-}
-
-.market-panel-wrap {
-  position: relative;
-  overflow: hidden;
-}
-
-.market-panel-wrap.locked {
-  opacity: 0.82;
-}
-
-.kickoff {
-  position: relative;
-  z-index: 1;
-  font-size: 11px;
-  color: var(--text-muted);
-  text-align: left;
-  margin-top: 10px;
-  padding-left: 2px;
-}
-
-.live-score {
-  position: relative;
-  z-index: 2;
-  margin: 8px 0 0;
-  font-size: 28px;
-  font-weight: 900;
-  color: #fff;
-  text-align: center;
-  letter-spacing: 0.06em;
-}
-
-.result-stats-section {
-  margin: 0 10px 12px;
-  padding: 12px;
-  border: 1px solid rgba(212, 175, 55, 0.22);
-  border-radius: 8px;
-  background: linear-gradient(180deg, #1b1b1b 0%, #121212 100%);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
-}
-
-.result-stats-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 10px;
-}
-
-.result-stats-head h3 {
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.2;
-  font-weight: 900;
-  color: var(--primary-light);
-}
-
-.result-stats-head span {
-  min-width: 0;
-  max-width: 58%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-.result-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.result-stat-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 38px;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.035);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.result-stat-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-.result-stat-value {
-  flex-shrink: 0;
-  font-size: 14px;
-  line-height: 1;
-  font-weight: 900;
-  color: #fff;
-}
-
-.hero-teams {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.hero-team {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-  min-width: 0;
-}
-
-.hero-name {
-  font-size: 13px;
-  font-weight: 800;
-  color: var(--primary-light);
-  text-align: center;
-  line-height: 1.25;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-
-/* VS arena — same as HomeView */
-.vs-arena {
-  position: relative;
-  flex-shrink: 0;
-  width: 140px;
-  height: 126px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hz-lightning {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  pointer-events: none;
-  overflow: visible;
-}
-
-.hz-path {
-  fill: none;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
-  opacity: 0;
-}
-
-.hz-path-main {
-  animation: hz-strike-main 2.6s ease-in-out infinite;
-}
-
-.hz-path-sub {
-  stroke-width: 1.6;
-  animation: hz-strike-sub 2.6s ease-in-out infinite;
-  animation-delay: 0.12s;
-}
-
-.hz-beam {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  height: 2px;
-  transform: translateY(-50%);
-  pointer-events: none;
-  z-index: 1;
-  background: linear-gradient(
-    90deg,
-    rgba(94, 184, 255, 0) 0%,
-    rgba(184, 236, 255, 0.95) 28%,
-    #fff 50%,
-    rgba(255, 208, 128, 0.95) 72%,
-    rgba(255, 144, 64, 0) 100%
-  );
-  opacity: 0;
-  filter: blur(0.4px);
-  animation: hz-beam-flash 2.6s ease-in-out infinite;
-}
-
-.vs-img {
-  position: relative;
-  z-index: 0;
-  width: 126px;
-  height: auto;
-  object-fit: contain;
-}
-
-@keyframes hz-strike-main {
-  0%, 72%, 100% { opacity: 0; }
-  74% { opacity: 1; }
-  75% { opacity: 0.25; }
-  76% { opacity: 0.95; }
-  78% { opacity: 0; }
-}
-
-@keyframes hz-strike-sub {
-  0%, 74%, 100% { opacity: 0; }
-  76% { opacity: 0.85; }
-  77% { opacity: 0.2; }
-  78% { opacity: 0.7; }
-  80% { opacity: 0; }
-}
-
-@keyframes hz-beam-flash {
-  0%, 71%, 100% { opacity: 0; transform: translateY(-50%) scaleX(0.6); }
-  73% { opacity: 0.85; transform: translateY(-50%) scaleX(1); }
-  75% { opacity: 0.15; transform: translateY(-50%) scaleX(0.95); }
-  76% { opacity: 0.75; transform: translateY(-50%) scaleX(1); }
-  78% { opacity: 0; transform: translateY(-50%) scaleX(1.05); }
-}
-
-@keyframes vs-glow {
-  0%, 100% {
-    opacity: 0.82;
-    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
-  }
-  50% {
-    opacity: 1;
-    filter: drop-shadow(0 0 3px rgba(255, 230, 140, 0.7)) drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hz-path, .hz-beam { animation: none; opacity: 0; }
-}
-
-.markets-section {
-  padding: 0 10px 8px;
-}
-
-.market-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 4px 0;
-}
-
-.market-group {
-  border-radius: 8px;
-  border: 1px solid #252525;
-  background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
-  overflow: hidden;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.market-group.open {
-  border-color: rgba(212, 175, 55, 0.25);
-  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.08);
-}
-
-.market-group :deep(.row) {
-  border-radius: 8px;
-}
-
-.market-group.open :deep(.row) {
-  border-radius: 0;
-}
-
-.market-foot-btn {
-  display: block;
-  width: calc(100% - 16px);
-  margin: 0 8px 10px;
-  padding: 9px;
-  border-radius: 4px;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.1);
-  color: var(--primary-light);
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.state {
-  text-align: center;
-  padding: 48px;
-  color: var(--text-muted);
-}
-
-.cs-toast {
-  text-align: center;
-  font-size: 12px;
-  color: var(--primary-light);
-  padding: 2px 0 6px;
-}
-
-/* ── 我的投注 ── */
-.my-bets-section {
-  padding: 0 12px;
-  margin-bottom: 12px;
-}
-
-.my-bets-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: #ccc;
-  margin: 0 0 8px;
-}
-
-.my-bets-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.my-bet-card {
-  background: #1c1c1c;
-  border: 1px solid #2e2e2e;
-  border-radius: 8px;
-  padding: 10px 12px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.my-bet-card:active {
-  background: #252525;
-}
-
-.bet-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 6px;
-}
-
-.bet-type {
-  font-size: 12px;
-  font-weight: 700;
-  color: #fff;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  margin-right: 8px;
-}
-
-.bet-status {
-  font-size: 11px;
-  font-weight: 700;
-  padding: 2px 8px;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-
-.bet-status-won {
-  background: rgba(61, 184, 101, 0.15);
-  color: #3db865;
-}
-
-.bet-status-lost {
-  background: rgba(224, 80, 80, 0.15);
-  color: #e05050;
-}
-
-.bet-status-pending {
-  background: rgba(232, 200, 74, 0.15);
-  color: #e8c84a;
-}
-
-.bet-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.bet-stake {
-  font-size: 11px;
-  color: #888;
-}
-
-.bet-return {
-  font-size: 13px;
-  font-weight: 800;
-}
-
-</style>
diff --git a/apps/player/src/views/MessageDetailView.vue b/apps/player/src/views/MessageDetailView.vue
index dce932f..ef59a90 100644
--- a/apps/player/src/views/MessageDetailView.vue
+++ b/apps/player/src/views/MessageDetailView.vue
@@ -1,392 +1,10 @@
 <script setup lang="ts">
-import { computed, onActivated, onMounted, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { formatLocalMatchDateTime } from '@thebet365/shared';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import ConfirmDialog from '../components/ConfirmDialog.vue';
-import { sanitizeAnnouncementHtml } from '../utils/html';
-import { formatMoney } from '../utils/localeDisplay';
-import {
-  usePlayerMessages,
-  type DepositMessagePayload,
-  type BannerPromoPayload,
-  type PlayerMessage,
-} from '../composables/usePlayerMessages';
-import { useInboxFeature } from '../composables/useInboxFeature';
+import { useViewport } from '../composables/useViewport';
+import MobileMessageDetailView from './MobileMessageDetailView.vue';
 
-const route = useRoute();
-const router = useRouter();
-const { t, locale } = useI18n();
-const { loadMessageDetail, markMessageRead, deleteMessage } = usePlayerMessages();
-const { hubRoute } = useInboxFeature();
-
-const messageId = computed(() => String(route.params.id ?? ''));
-const message = ref<PlayerMessage | null>(null);
-const loading = ref(false);
-const error = ref(false);
-const deleting = ref(false);
-const deleteConfirmVisible = ref(false);
-
-const depositPayload = computed(() => {
-  if (
-    !message.value ||
-    message.value.type === 'BANNER_PROMO' ||
-    message.value.type === 'ANNOUNCEMENT_PROMO'
-  ) {
-    return null;
-  }
-  return (message.value.payload ?? null) as DepositMessagePayload | null;
-});
-const contentPromoId = computed(() => {
-  if (
-    message.value?.type !== 'BANNER_PROMO' &&
-    message.value?.type !== 'ANNOUNCEMENT_PROMO'
-  ) {
-    return undefined;
-  }
-  return (message.value.payload as BannerPromoPayload | null)?.contentId;
-});
-
-function goBack() {
-  router.back();
-}
-
-function goList() {
-  router.push(hubRoute.value);
-}
-
-function viewContentPromo() {
-  if (!contentPromoId.value) return;
-  router.push(`/announcements/${contentPromoId.value}`);
-}
-
-function formatDate(createdAt?: string) {
-  if (!createdAt) return '';
-  return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'full' });
-}
-
-function messageTitle(item: PlayerMessage) {
-  if (item.type === 'DEPOSIT_APPROVED') return t('messages.deposit_approved_title');
-  if (item.type === 'DEPOSIT_REJECTED') return t('messages.deposit_rejected_title');
-  if (item.type === 'BANNER_PROMO' || item.type === 'ANNOUNCEMENT_PROMO') return item.title;
-  return item.title;
-}
-
-function messageBody(item: PlayerMessage) {
-  const deposit = depositPayload.value;
-  if (item.type === 'DEPOSIT_APPROVED' && deposit?.orderNo) {
-    return t('messages.deposit_approved_body', {
-      orderNo: deposit.orderNo,
-      amount: formatMoney(deposit.amount ?? '0', locale.value),
-      approvedAmount: formatMoney(
-        deposit.approvedAmount ?? deposit.amount ?? '0',
-        locale.value,
-      ),
-    });
-  }
-  if (item.type === 'DEPOSIT_REJECTED' && deposit?.orderNo) {
-    return t('messages.deposit_rejected_body', {
-      orderNo: deposit.orderNo,
-      amount: formatMoney(deposit.amount ?? '0', locale.value),
-      reason: deposit.rejectReason?.trim() || t('messages.no_reason'),
-    });
-  }
-  return item.body;
-}
-
-async function fetchDetail() {
-  if (!messageId.value) return;
-  loading.value = true;
-  error.value = false;
-  try {
-    message.value = await loadMessageDetail(messageId.value);
-    if (message.value && !message.value.isRead) {
-      await markMessageRead(messageId.value);
-      message.value = { ...message.value, isRead: true };
-    }
-  } catch {
-    error.value = true;
-    message.value = null;
-  } finally {
-    loading.value = false;
-  }
-}
-
-function onDelete() {
-  if (!messageId.value || deleting.value) return;
-  deleteConfirmVisible.value = true;
-}
-
-async function confirmDelete() {
-  if (!messageId.value || deleting.value) return;
-  deleting.value = true;
-  try {
-    await deleteMessage(messageId.value);
-    deleteConfirmVisible.value = false;
-    router.replace(hubRoute.value);
-  } finally {
-    deleting.value = false;
-  }
-}
-
-onMounted(() => {
-  void fetchDetail();
-});
-
-onActivated(() => {
-  void fetchDetail();
-});
-
-watch(messageId, () => {
-  void fetchDetail();
-});
+const { isDesktop } = useViewport();
 </script>
 
 <template>
-  <div class="message-detail">
-    <header class="page-header">
-      <button type="button" class="back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
-      <h1>{{ t('messages.detail_title') }}</h1>
-      <button
-        v-if="message"
-        type="button"
-        class="delete-header-btn"
-        :aria-label="t('messages.delete')"
-        :disabled="deleting"
-        @click="onDelete"
-      >
-        {{ t('messages.delete') }}
-      </button>
-    </header>
-
-    <div v-if="loading && !message" class="state">
-      <GoldSpinner :size="36" />
-    </div>
-
-    <div v-else-if="error || !message" class="empty">
-      <p>{{ t('messages.not_found') }}</p>
-      <button type="button" class="link-btn" @click="goList">{{ t('messages.view_all') }}</button>
-    </div>
-
-    <article v-else class="detail-article">
-      <span class="status-badge" :class="{ unread: !message.isRead }">
-        {{ message.isRead ? t('messages.status_read') : t('messages.status_unread') }}
-      </span>
-      <p v-if="message.createdAt" class="detail-date">{{ formatDate(message.createdAt) }}</p>
-      <h2 class="detail-title">{{ messageTitle(message) }}</h2>
-      <div
-        v-if="message.type === 'ADMIN_CUSTOM'"
-        class="detail-body rich-body"
-        v-html="sanitizeAnnouncementHtml(message.body)"
-      />
-      <p v-else class="detail-body">{{ messageBody(message) }}</p>
-
-      <div
-        v-if="message.type === 'DEPOSIT_REJECTED' && depositPayload?.rejectReason?.trim()"
-        class="reason-box"
-      >
-        <p class="reason-label">{{ t('messages.reject_reason') }}</p>
-        <p class="reason-text">{{ depositPayload.rejectReason }}</p>
-      </div>
-
-      <button
-        v-if="contentPromoId"
-        type="button"
-        class="action-btn"
-        @click="viewContentPromo"
-      >
-        {{ t('messages.content_promo_view') }}
-      </button>
-
-      <button
-        v-if="depositPayload?.depositOrderId"
-        type="button"
-        class="action-btn"
-        @click="router.push('/wallet/recharge/history')"
-      >
-        {{ t('messages.view_recharge_history') }}
-      </button>
-    </article>
-
-    <ConfirmDialog
-      v-model:visible="deleteConfirmVisible"
-      :title="t('messages.delete')"
-      :message="t('messages.delete_confirm')"
-      :confirm-text="t('messages.delete')"
-      danger
-      :loading="deleting"
-      @confirm="confirmDelete"
-    />
-  </div>
+  <MobileMessageDetailView :embedded="isDesktop" />
 </template>
-
-<style scoped>
-.message-detail {
-  min-height: 100%;
-  padding: 0 0 24px;
-}
-
-.page-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0 0 14px;
-  border-bottom: 1px solid var(--border);
-}
-
-.back-btn {
-  width: 36px;
-  height: 36px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: #141414;
-  color: var(--gold);
-  font-size: 22px;
-  line-height: 1;
-}
-
-.page-header h1 {
-  margin: 0;
-  flex: 1;
-  font-size: 18px;
-  font-weight: 700;
-  color: #fff;
-}
-
-.delete-header-btn {
-  border: 1px solid rgba(255, 80, 80, 0.35);
-  border-radius: 8px;
-  padding: 6px 10px;
-  background: rgba(255, 80, 80, 0.08);
-  color: #f88;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.delete-header-btn:disabled {
-  opacity: 0.45;
-}
-
-.status-badge {
-  display: inline-block;
-  margin-bottom: 8px;
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  color: #888;
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.status-badge.unread {
-  color: var(--gold);
-  background: rgba(212, 175, 55, 0.12);
-}
-
-.state,
-.empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 48px 16px;
-  color: var(--text-muted);
-}
-
-.link-btn {
-  border: 1px solid var(--border-gold-soft);
-  border-radius: 8px;
-  padding: 8px 14px;
-  background: rgba(212, 175, 55, 0.1);
-  color: var(--gold);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.detail-article {
-  padding: 18px 0 0;
-}
-
-.detail-date {
-  margin: 0 0 10px;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.detail-title {
-  margin: 0 0 12px;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1.45;
-  color: #fff;
-}
-
-.detail-body {
-  margin: 0;
-  font-size: 15px;
-  line-height: 1.75;
-  color: #d0d0d0;
-}
-
-.rich-body :deep(p) {
-  margin: 0 0 12px;
-}
-
-.rich-body :deep(p:last-child) {
-  margin-bottom: 0;
-}
-
-.rich-body :deep(img) {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: 12px 0;
-  border-radius: 8px;
-}
-
-.rich-body :deep(ul),
-.rich-body :deep(ol) {
-  margin: 0 0 12px;
-  padding-left: 20px;
-}
-
-.rich-body :deep(a) {
-  color: var(--gold);
-}
-
-.reason-box {
-  margin-top: 18px;
-  padding: 14px;
-  border-radius: 10px;
-  border: 1px solid rgba(255, 107, 107, 0.25);
-  background: rgba(255, 107, 107, 0.08);
-}
-
-.reason-label {
-  margin: 0 0 8px;
-  font-size: 12px;
-  color: #ffb4b4;
-  font-weight: 700;
-}
-
-.reason-text {
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.55;
-  color: #ffe0e0;
-}
-
-.action-btn {
-  margin-top: 24px;
-  width: 100%;
-  padding: 11px 14px;
-  border: 1px solid var(--border-gold-soft);
-  border-radius: 8px;
-  background: rgba(212, 175, 55, 0.1);
-  color: var(--gold);
-  font-size: 14px;
-  font-weight: 700;
-  cursor: pointer;
-}
-</style>
diff --git a/apps/player/src/views/MessagesHubView.vue b/apps/player/src/views/MessagesHubView.vue
new file mode 100644
index 0000000..99bb078
--- /dev/null
+++ b/apps/player/src/views/MessagesHubView.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useViewport } from '../composables/useViewport';
+import DesktopMessagesHubShell from './desktop/DesktopMessagesHubShell.vue';
+
+const { isDesktop } = useViewport();
+</script>
+
+<template>
+  <DesktopMessagesHubShell v-if="isDesktop">
+    <RouterView />
+  </DesktopMessagesHubShell>
+  <RouterView v-else />
+</template>
diff --git a/apps/player/src/views/MobileAnnouncementDetailView.vue b/apps/player/src/views/MobileAnnouncementDetailView.vue
new file mode 100644
index 0000000..823105b
--- /dev/null
+++ b/apps/player/src/views/MobileAnnouncementDetailView.vue
@@ -0,0 +1,440 @@
+<script setup lang="ts">
+import { computed, onActivated, watch } from 'vue';
+
+const { embedded = false, desktop = false } = defineProps<{ embedded?: boolean; desktop?: boolean }>();
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { formatLocalMatchDateTime } from '@thebet365/shared';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import defaultBannerImg from '../assets/images/banner.webp';
+import { usePlayerHome, type PlayerContentItem } from '../composables/usePlayerHome';
+import { sanitizeAnnouncementHtml, stripHtml } from '../utils/html';
+
+const FALLBACK_IMG = '/uploads/banners/welcome.svg';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+const { hubContentItems, loading, load } = usePlayerHome();
+
+const announcementId = computed(() => String(route.params.id ?? ''));
+
+const item = computed<PlayerContentItem | null>(() => {
+  const id = announcementId.value;
+  return hubContentItems.value.find((entry) => entry.id === id) ?? null;
+});
+
+const isBanner = computed(() => item.value?.contentType === 'BANNER');
+
+function goBack() {
+  if (embedded) return;
+  if (window.history.length > 1) {
+    router.back();
+    return;
+  }
+  router.push('/announcements');
+}
+
+function goList() {
+  router.push('/announcements');
+}
+
+function formatDate(createdAt?: string) {
+  if (!createdAt) return '';
+  return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'full' });
+}
+
+function itemTitle(entry: PlayerContentItem) {
+  const title = entry.translation?.title?.trim();
+  if (title) return title;
+  const bodyText = stripHtml(entry.translation?.body ?? '');
+  return bodyText || t('home.announcement_badge');
+}
+
+function itemBodyHtml(entry: PlayerContentItem) {
+  const title = entry.translation?.title?.trim();
+  const body = entry.translation?.body?.trim();
+  if (!body) return '';
+  if (title && stripHtml(body) === title) return '';
+  return sanitizeAnnouncementHtml(body);
+}
+
+const heroImageUrl = computed(() => {
+  const url = item.value?.translation?.imageUrl?.trim();
+  if (url) return url;
+  if (isBanner.value) return defaultBannerImg || FALLBACK_IMG;
+  return '';
+});
+
+const linkTarget = computed(() => item.value?.linkTarget?.trim() ?? '');
+
+const externalLinkUrl = computed(() => {
+  if (item.value?.linkType !== 'URL' || !linkTarget.value) return '';
+  return /^https?:\/\//i.test(linkTarget.value)
+    ? linkTarget.value
+    : `https://${linkTarget.value}`;
+});
+
+function onHeroError(e: Event) {
+  const img = e.target as HTMLImageElement;
+  if (img.dataset.fallbackApplied) return;
+  img.dataset.fallbackApplied = '1';
+  img.src = defaultBannerImg || FALLBACK_IMG;
+}
+
+function followRouteLink() {
+  if (item.value?.linkType === 'ROUTE' && linkTarget.value) {
+    void router.push(linkTarget.value);
+  }
+}
+
+function openExternalLink() {
+  if (externalLinkUrl.value) {
+    window.open(externalLinkUrl.value, '_blank', 'noopener');
+  }
+}
+
+async function refresh() {
+  await load(true);
+}
+
+onActivated(() => {
+  void refresh();
+});
+
+watch(announcementId, () => {
+  if (!item.value && !loading.value) void refresh();
+});
+</script>
+
+<template>
+  <div class="announce-detail" :class="{ 'announce-detail--embedded': embedded, 'announce-detail--desktop': desktop }">
+    <header v-if="embedded" class="page-header page-header--embedded-detail">
+      <h1>{{ t('announcements.detail_title') }}</h1>
+    </header>
+
+    <header v-else-if="desktop" class="page-header page-header--desktop">
+      <button type="button" class="back-btn" @click="goBack">
+        <span class="back-icon" aria-hidden="true">‹</span>
+        {{ t('announcements.back') }}
+      </button>
+      <h1>{{ t('announcements.detail_title') }}</h1>
+    </header>
+
+    <header v-else class="page-header">
+      <button type="button" class="back-btn back-btn--icon" :aria-label="t('announcements.back')" @click="goBack">‹</button>
+      <h1>{{ t('announcements.detail_title') }}</h1>
+    </header>
+
+    <div v-if="loading && !item" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+
+    <div v-else-if="!item" class="empty">
+      <p>{{ t('announcements.not_found') }}</p>
+      <button type="button" class="link-btn" @click="goList">{{ t('announcements.view_all') }}</button>
+    </div>
+
+    <article v-else class="detail-article">
+      <figure v-if="heroImageUrl" class="detail-hero">
+        <img :src="heroImageUrl" :alt="itemTitle(item)" loading="lazy" @error="onHeroError" />
+      </figure>
+
+      <div class="detail-body-wrap">
+        <p v-if="item.createdAt" class="detail-date">{{ formatDate(item.createdAt) }}</p>
+        <h2 class="detail-title">{{ itemTitle(item) }}</h2>
+        <div v-if="itemBodyHtml(item)" class="detail-body" v-html="itemBodyHtml(item)" />
+
+        <div v-if="item.linkType && linkTarget" class="detail-link">
+          <p class="link-label">{{ t('announcements.related_link') }}</p>
+          <p class="link-address">{{ linkTarget }}</p>
+          <button
+            v-if="item.linkType === 'ROUTE'"
+            type="button"
+            class="link-action"
+            @click="followRouteLink"
+          >
+            {{ t('announcements.go_link') }}
+          </button>
+          <button
+            v-else-if="item.linkType === 'URL'"
+            type="button"
+            class="link-action link-action--outline"
+            @click="openExternalLink"
+          >
+            {{ t('announcements.open_link') }}
+          </button>
+        </div>
+      </div>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.announce-detail {
+  min-height: 100%;
+  padding: 0 0 24px;
+}
+
+.announce-detail--embedded {
+  padding: 0;
+  min-height: 0;
+}
+
+.announce-detail--desktop {
+  padding: 0;
+  min-height: 0;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 0 14px;
+  margin-bottom: 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.page-header--desktop {
+  padding: 0 0 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.page-header--embedded-detail {
+  padding: 0 0 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.page-header--embedded-detail h1 {
+  font-size: 16px;
+  color: var(--primary-light);
+}
+
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #141414;
+  color: var(--gold);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.back-btn:hover {
+  border-color: var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.back-btn--icon {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  justify-content: center;
+  font-size: 22px;
+}
+
+.back-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.page-header--desktop h1 {
+  font-size: 16px;
+  color: var(--primary-light);
+}
+
+.state,
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px 16px;
+  color: var(--text-muted);
+}
+
+.link-btn {
+  border: 1px solid var(--border-gold-soft);
+  border-radius: 8px;
+  padding: 8px 14px;
+  background: rgba(212, 175, 55, 0.1);
+  color: var(--gold);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.detail-article {
+  margin: 0;
+  padding: 0;
+}
+
+.announce-detail--embedded .detail-article,
+.announce-detail--desktop .detail-article {
+  background: rgba(18, 18, 18, 0.92);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 20px 24px 24px;
+}
+
+.detail-hero {
+  margin: 16px -16px 0;
+  padding: 0;
+  background: #080808;
+  line-height: 0;
+}
+
+.announce-detail--embedded .detail-hero,
+.announce-detail--desktop .detail-hero {
+  margin: 0 0 18px;
+  max-height: min(280px, 36vh);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: #0a0a0a;
+}
+
+.detail-hero img {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: contain;
+  object-position: center;
+}
+
+.announce-detail--embedded .detail-hero img,
+.announce-detail--desktop .detail-hero img {
+  max-height: min(280px, 36vh);
+  width: auto;
+  max-width: 100%;
+}
+
+.detail-body-wrap {
+  padding: 18px 0 0;
+}
+
+.announce-detail--embedded .detail-body-wrap,
+.announce-detail--desktop .detail-body-wrap {
+  padding: 0;
+}
+
+.detail-date {
+  margin: 0 0 10px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.detail-title {
+  margin: 0 0 12px;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.45;
+  color: #fff;
+}
+
+.announce-detail--embedded .detail-title,
+.announce-detail--desktop .detail-title {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.detail-body {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.75;
+  color: #d0d0d0;
+}
+
+.detail-body :deep(p) {
+  margin: 0 0 12px;
+}
+
+.detail-body :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.detail-body :deep(img) {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 14px 0;
+  border-radius: 8px;
+}
+
+.announce-detail--embedded .detail-body :deep(img),
+.announce-detail--desktop .detail-body :deep(img) {
+  max-height: min(320px, 40vh);
+  width: auto;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
+}
+
+.detail-body :deep(ul),
+.detail-body :deep(ol) {
+  margin: 0 0 12px;
+  padding-left: 20px;
+}
+
+.detail-body :deep(a) {
+  color: var(--primary-light);
+  text-decoration: underline;
+}
+
+.detail-link {
+  margin-top: 24px;
+  padding-top: 18px;
+  border-top: 1px solid var(--border);
+}
+
+.link-label {
+  margin: 0 0 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.link-address {
+  margin: 0 0 14px;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--primary-light);
+  word-break: break-all;
+}
+
+.link-action {
+  width: 100%;
+  padding: 11px 14px;
+  border: none;
+  border-radius: 8px;
+  background: var(--gradient-gold);
+  color: #1a1000;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.link-action--outline {
+  background: transparent;
+  border: 1px solid var(--border-gold-soft);
+  color: var(--gold);
+}
+</style>
diff --git a/apps/player/src/views/MobileAnnouncementListView.vue b/apps/player/src/views/MobileAnnouncementListView.vue
new file mode 100644
index 0000000..b8dc37e
--- /dev/null
+++ b/apps/player/src/views/MobileAnnouncementListView.vue
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { computed, onActivated } from 'vue';
+
+const { embedded = false } = defineProps<{ embedded?: boolean }>();
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { formatLocalMatchDateTime } from '@thebet365/shared';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePlayerHome, type PlayerContentItem } from '../composables/usePlayerHome';
+import { stripHtml } from '../utils/html';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+const { hubContentItems, loading, load } = usePlayerHome();
+
+const items = computed(() => hubContentItems.value);
+const activeId = computed(() => String(route.params.id ?? ''));
+
+function leaveAnnouncementHub() {
+  const prev = (window.history.state as { back?: string } | null)?.back;
+  if (prev && !prev.startsWith('/announcements')) {
+    router.back();
+    return;
+  }
+  router.push('/');
+}
+
+function goBack() {
+  if (embedded) {
+    leaveAnnouncementHub();
+    return;
+  }
+  if (window.history.length > 1) {
+    router.back();
+    return;
+  }
+  router.push('/');
+}
+
+function openDetail(id: string) {
+  router.push(`/announcements/${id}`);
+}
+
+function formatDate(createdAt?: string) {
+  if (!createdAt) return '';
+  return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'full' });
+}
+
+function itemTitle(item: PlayerContentItem) {
+  const title = item.translation?.title?.trim();
+  if (title) return title;
+  return stripHtml(item.translation?.body ?? '') || t('home.announcement_badge');
+}
+
+function itemPreview(item: PlayerContentItem) {
+  const title = item.translation?.title?.trim();
+  const bodyText = stripHtml(item.translation?.body ?? '');
+  if (bodyText && bodyText !== title) return bodyText;
+  return '';
+}
+
+function typeLabel(item: PlayerContentItem) {
+  switch (item.contentType) {
+    case 'BANNER':
+      return t('announcements.type_banner');
+    case 'TICKER':
+      return t('announcements.type_ticker');
+    default:
+      return t('announcements.type_notice');
+  }
+}
+
+onActivated(() => {
+  void load(true);
+});
+</script>
+
+<template>
+  <div class="announce-page" :class="{ 'announce-page--embedded': embedded }">
+    <header v-if="!embedded" class="page-header">
+      <button type="button" class="back-btn" :aria-label="t('announcements.back')" @click="goBack">‹</button>
+      <h1>{{ t('announcements.title') }}</h1>
+    </header>
+    <header v-else class="embedded-header">
+      <button type="button" class="back-btn" @click="goBack">
+        <span class="back-icon" aria-hidden="true">‹</span>
+        <span class="back-label">{{ t('announcements.back') }}</span>
+      </button>
+      <span class="embedded-title">{{ t('announcements.title') }}</span>
+    </header>
+
+    <div v-if="loading && !items.length" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+
+    <div v-else-if="!items.length" class="empty">
+      <p>{{ t('announcements.empty') }}</p>
+    </div>
+
+    <div v-else class="list">
+      <button
+        v-for="item in items"
+        :key="item.id"
+        type="button"
+        class="list-row"
+        :class="{ 'list-row--active': embedded && activeId === item.id }"
+        @click="openDetail(item.id)"
+      >
+        <span class="row-main">
+          <span class="row-top">
+            <span class="type-badge">{{ typeLabel(item) }}</span>
+            <span class="title">{{ itemTitle(item) }}</span>
+          </span>
+          <span v-if="itemPreview(item)" class="preview">{{ itemPreview(item) }}</span>
+          <span v-if="item.createdAt" class="date">{{ formatDate(item.createdAt) }}</span>
+        </span>
+        <span class="chevron" aria-hidden="true">›</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.announce-page {
+  min-height: 100%;
+  padding: 0 0 24px;
+}
+
+.announce-page--embedded {
+  padding: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.announce-page--embedded .list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.embedded-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.embedded-header .back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #141414;
+  color: var(--gold);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  width: auto;
+  height: auto;
+  min-width: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.embedded-header .back-btn:hover {
+  border-color: var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.back-icon {
+  font-size: 18px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.back-label {
+  line-height: 1.2;
+}
+
+.embedded-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.announce-page--embedded .list-row {
+  padding: 12px 16px;
+}
+
+.announce-page--embedded .list-row:hover {
+  background: var(--bg-hover);
+}
+
+.list-row--active {
+  background: rgba(212, 175, 55, 0.08);
+  box-shadow: inset 3px 0 0 var(--gold);
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 0 14px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0;
+}
+
+.page-header .back-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #141414;
+  color: var(--gold);
+  font-size: 22px;
+  line-height: 1;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.state,
+.empty {
+  display: flex;
+  justify-content: center;
+  padding: 48px 16px;
+  color: var(--text-muted);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+}
+
+.list-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 0;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
+  text-align: left;
+  color: inherit;
+  cursor: pointer;
+}
+
+.row-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.row-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.type-badge {
+  flex-shrink: 0;
+  margin-top: 2px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(212, 175, 55, 0.12);
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--gold);
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.preview {
+  display: block;
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.date {
+  display: block;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.chevron {
+  flex-shrink: 0;
+  font-size: 20px;
+  color: var(--text-muted);
+  line-height: 1;
+}
+</style>
diff --git a/apps/player/src/views/MobileBetDetailView.vue b/apps/player/src/views/MobileBetDetailView.vue
new file mode 100644
index 0000000..ff8fb52
--- /dev/null
+++ b/apps/player/src/views/MobileBetDetailView.vue
@@ -0,0 +1,734 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney, parseAmount } from '../utils/localeDisplay';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+import StatusWatermark from '../components/StatusWatermark.vue';
+import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';
+import type { BetHistoryItem } from '../components/BetHistoryCard.vue';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+
+const bet = ref<BetHistoryItem | null>(null);
+const loading = ref(true);
+const notFound = ref(false);
+
+async function loadBet() {
+  loading.value = true;
+  try {
+    const { data } = await api.get(`/player/bets/${route.params.betNo}`);
+    if (!data.data) { notFound.value = true; return; }
+    bet.value = data.data;
+  } catch {
+    notFound.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadBet);
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: loadBet,
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
+const statusKey = computed(() => {
+  const s = (bet.value?.status ?? '').toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'won';
+  if (s === 'LOST' || s === 'LOSE') return 'lost';
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'push';
+  return 'pending';
+});
+
+const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
+
+const isSettled = computed(() => statusKey.value !== 'pending');
+
+const placedDateTime = computed(() => {
+  if (!bet.value) return '';
+  const d = new Date(bet.value.placedAt);
+  const date = d.toLocaleDateString(locale.value, { year: 'numeric', month: 'short', day: 'numeric' });
+  const time = d.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
+  return `${date}  ${time}`;
+});
+
+const returnAmount = computed(() => {
+  if (!bet.value) return '';
+  if (statusKey.value === 'won') return formatMoney(bet.value.actualReturn, locale.value);
+  if (statusKey.value === 'pending') return formatMoney(bet.value.potentialReturn, locale.value);
+  if (statusKey.value === 'lost') return formatMoney(-parseAmount(bet.value.stake), locale.value);
+  return formatMoney(bet.value.actualReturn ?? bet.value.potentialReturn, locale.value);
+});
+
+const profitAmount = computed(() => {
+  if (!bet.value || statusKey.value !== 'won') return '';
+  const profit = parseAmount(bet.value.actualReturn) - parseAmount(bet.value.stake);
+  return `+${formatMoney(profit, locale.value)}`;
+});
+
+const heroAmount = computed(() => {
+  if (statusKey.value === 'won') return profitAmount.value;
+  return returnAmount.value;
+});
+
+const heroTitle = computed(() => {
+  if (statusKey.value === 'won') return t('history.profit');
+  if (statusKey.value === 'pending') return t('history.est_return');
+  return statusLabel.value;
+});
+
+const formulaText = computed(() => {
+  if (!bet.value || !oddsText.value || statusKey.value === 'pending') return '';
+  return t('history.stake_to_return', {
+    stake: stakeAmount.value,
+    odds: oddsText.value,
+    amount: returnAmount.value,
+  });
+});
+
+const stakeAmount = computed(() =>
+  bet.value ? formatMoney(bet.value.stake, locale.value) : '',
+);
+
+const oddsText = computed(() => {
+  const o = bet.value?.totalOdds;
+  if (o == null || o === '' || o === 0) return '';
+  const n = parseFloat(String(o));
+  return Number.isFinite(n) ? n.toFixed(2) : String(o);
+});
+
+const betTypeLabel = computed(() => {
+  if (!bet.value) return '';
+  if (bet.value.isParlay) return t('bet.parlay');
+  return bet.value.betType || '';
+});
+
+function formatOdds(v: unknown): string {
+  const n = parseFloat(String(v));
+  return isNaN(n) || n <= 0 ? '-' : n.toFixed(2);
+}
+
+const SEL_TRANS: Record<string, Record<string, string>> = {
+  '主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
+  '客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
+  '和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
+  '主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
+  '客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
+  '大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
+  '小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
+  '单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
+  '双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
+  '冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
+};
+
+function translateSel(name: string): string {
+  if (locale.value === 'zh-CN') return name;
+  const exact = SEL_TRANS[name];
+  if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
+  const sp = name.indexOf(' ');
+  if (sp > 0) {
+    const head = name.slice(0, sp);
+    const m = SEL_TRANS[head];
+    if (m) return (m[locale.value] ?? m['en-US'] ?? head) + name.slice(sp);
+  }
+  return name;
+}
+
+function legStatusKey(rs: string | null | undefined) {
+  if (!rs) return 'pending';
+  const s = rs.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'won';
+  if (s === 'LOST' || s === 'LOSE') return 'lost';
+  return 'push';
+}
+
+const matchTitle = computed(() => {
+  if (!bet.value) return '';
+  if (bet.value.isParlay) {
+    const n = bet.value.legCount ?? bet.value.legs?.length ?? 0;
+    return t('history.parlay_title', { n });
+  }
+  return bet.value.matchTitle;
+});
+
+const pickMarket = computed(() => {
+  if (!bet.value || bet.value.isParlay) return '';
+  const raw = bet.value.pickLabel ?? '';
+  const ci = raw.indexOf(': ');
+  return ci >= 0 ? raw.slice(0, ci) : raw;
+});
+
+const pickSelection = computed(() => {
+  if (!bet.value || bet.value.isParlay) return '';
+  const raw = bet.value.pickLabel ?? '';
+  const ci = raw.indexOf(': ');
+  if (ci < 0) return '';
+  const sel = raw.slice(ci + 2);
+  return locale.value === 'zh-CN' ? sel : translateSel(sel);
+});
+
+const matchPhase = computed(
+  (): MatchPhase | null => bet.value?.matchPhase ?? null,
+);
+
+const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
+
+const showPhaseWatermark = computed(
+  () => !isSettled.value && matchPhase.value && matchPhase.value !== 'open',
+);
+</script>
+
+<template>
+  <div class="detail-page">
+    <div class="pull-indicator" :style="pullIndicatorStyle()">
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <div class="top-bar">
+      <button type="button" class="back-btn" @click="router.back()">‹ {{ t('history.back') }}</button>
+    </div>
+
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+    <div v-else-if="notFound || !bet" class="state">{{ t('history.not_found') }}</div>
+
+    <article v-else class="receipt">
+      <!-- result strip -->
+      <div class="receipt-result" :class="statusKey">
+        <div class="result-icon" :class="statusKey">
+          <svg v-if="statusKey === 'won'" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="1.5" />
+            <path d="M7 12.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+          <svg v-else-if="statusKey === 'lost'" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="1.5" />
+            <path d="M8 8l8 8M16 8l-8 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+          <svg v-else-if="statusKey === 'pending'" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="1.5" />
+            <path d="M12 7v5l3 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+          <svg v-else viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="1.5" />
+            <path d="M8 12h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </div>
+        <div class="result-text">
+          <span class="result-label">{{ heroTitle }}</span>
+          <span class="result-amount">{{ heroAmount }}</span>
+          <span v-if="statusKey === 'won'" class="result-sub">
+            {{ t('history.return_incl_stake', { amount: returnAmount }) }}
+          </span>
+          <span v-else-if="formulaText && statusKey !== 'pending'" class="result-sub">{{ formulaText }}</span>
+          <span v-else-if="statusKey === 'pending' && oddsText" class="result-sub">
+            {{ stakeAmount }} × {{ oddsText }}
+          </span>
+        </div>
+      </div>
+
+      <div class="receipt-perforation" aria-hidden="true" />
+
+      <!-- body -->
+      <div class="receipt-body">
+        <div class="receipt-meta">
+          <div class="meta-tags">
+            <span v-if="betTypeLabel" class="meta-tag">{{ betTypeLabel }}</span>
+            <span v-if="oddsText" class="meta-tag dim">@{{ oddsText }}</span>
+            <span v-if="bet.isCashbacked" class="meta-tag cashback">{{ t('history.cashbacked') }}</span>
+          </div>
+          <span class="meta-time">{{ placedDateTime }}</span>
+        </div>
+
+        <h2 class="match-title">{{ matchTitle }}</h2>
+
+        <!-- single pick -->
+        <div v-if="!bet.isParlay" class="pick-block">
+          <StatusWatermark
+            v-if="showPhaseWatermark"
+            :label="matchPhaseText"
+            :variant="matchPhaseVariant(matchPhase!)"
+            size="md"
+          />
+          <span class="pick-market">{{ pickMarket }}</span>
+          <div class="pick-line">
+            <span class="pick-selection">{{ pickSelection }}</span>
+            <span v-if="oddsText" class="pick-odds">@{{ oddsText }}</span>
+          </div>
+          <div v-if="bet.matchScore?.ft || bet.matchScore?.ht" class="score-row">
+            <span v-if="bet.matchScore.ft" class="score-pill">
+              <em>{{ t('history.ft') }}</em>{{ bet.matchScore.ft }}
+            </span>
+            <span v-if="bet.matchScore.ht" class="score-pill dim">
+              <em>{{ t('history.ht') }}</em>{{ bet.matchScore.ht }}
+            </span>
+          </div>
+          <p v-else-if="statusKey === 'pending'" class="awaiting">{{ t('history.awaiting_result') }}</p>
+        </div>
+
+        <!-- parlay legs -->
+        <div v-if="bet.isParlay && bet.legs?.length" class="legs-list">
+          <div
+            v-for="(leg, i) in bet.legs"
+            :key="i"
+            class="leg-item"
+            :class="legStatusKey(leg.resultStatus)"
+          >
+            <div class="leg-status-dot" :class="legStatusKey(leg.resultStatus)">
+              <svg v-if="legStatusKey(leg.resultStatus) === 'won'" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
+              <svg v-else-if="legStatusKey(leg.resultStatus) === 'lost'" viewBox="0 0 12 12"><path d="M3 3l6 6M9 3l-6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
+              <span v-else>{{ i + 1 }}</span>
+            </div>
+            <div class="leg-content">
+              <div class="leg-head">
+                <span class="leg-match">{{ leg.matchTitle }}</span>
+                <span class="leg-odds">@{{ formatOdds(leg.odds) }}</span>
+              </div>
+              <span class="leg-pick">{{ leg.marketLabel }} · {{ translateSel(leg.selectionName) }}</span>
+              <div v-if="leg.score?.ft || leg.score?.ht" class="score-row compact">
+                <span v-if="leg.score.ft" class="score-pill sm"><em>{{ t('history.ft') }}</em>{{ leg.score.ft }}</span>
+                <span v-if="leg.score.ht" class="score-pill sm dim"><em>{{ t('history.ht') }}</em>{{ leg.score.ht }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="receipt-perforation" aria-hidden="true" />
+
+      <!-- footer -->
+      <div class="receipt-foot">
+        <div class="foot-row">
+          <span>{{ t('history.stake') }}</span>
+          <span>{{ stakeAmount }}</span>
+        </div>
+        <div v-if="bet.totalOdds" class="foot-row">
+          <span>{{ t('history.odds') }}</span>
+          <span class="gold">{{ formatOdds(bet.totalOdds) }}</span>
+        </div>
+        <div class="foot-row id">
+          <span>{{ t('history.bet_no') }}</span>
+          <span class="mono">{{ bet.betNo }}</span>
+        </div>
+      </div>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.detail-page {
+  padding-bottom: 36px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.top-bar {
+  margin-bottom: 10px;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: var(--primary-light);
+  font-size: 15px;
+  font-weight: 700;
+  padding: 4px 0 8px;
+  cursor: pointer;
+}
+
+.state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* ── receipt ticket ── */
+.receipt {
+  position: relative;
+  border-radius: var(--radius);
+  background: rgba(18, 18, 18, 0.96);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+/* result strip */
+.receipt-result {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 18px 18px;
+}
+
+.receipt-result.won {
+  background: linear-gradient(135deg, rgba(52, 199, 89, 0.1) 0%, transparent 70%);
+}
+
+.receipt-result.lost {
+  background: linear-gradient(135deg, rgba(255, 69, 58, 0.08) 0%, transparent 70%);
+}
+
+.receipt-result.pending {
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
+}
+
+.result-icon {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+}
+
+.result-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.result-icon.won { color: #34c759; }
+.result-icon.lost { color: var(--danger); }
+.result-icon.pending { color: var(--primary-light); }
+.result-icon.push { color: var(--text-muted); }
+
+.result-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.result-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.result-amount {
+  font-size: 32px;
+  font-weight: 900;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.receipt-result.won .result-amount { color: #34c759; }
+.receipt-result.lost .result-amount { color: var(--danger); }
+.receipt-result.pending .result-amount { color: var(--primary-light); }
+.receipt-result.push .result-amount { color: var(--text-muted); }
+
+.result-sub {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* perforated divider */
+.receipt-perforation {
+  height: 1px;
+  margin: 0 14px;
+  background: repeating-linear-gradient(
+    90deg,
+    transparent 0,
+    transparent 4px,
+    rgba(255, 255, 255, 0.08) 4px,
+    rgba(255, 255, 255, 0.08) 8px
+  );
+  position: relative;
+}
+
+.receipt-perforation::before,
+.receipt-perforation::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--bg-body, #000);
+  transform: translateY(-50%);
+}
+
+.receipt-perforation::before { left: -20px; }
+.receipt-perforation::after { right: -20px; }
+
+/* body */
+.receipt-body {
+  padding: 16px 18px;
+}
+
+.receipt-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.meta-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.meta-tag {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 3px 8px;
+  border-radius: 4px;
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border: 1px solid var(--border-gold-soft);
+}
+
+.meta-tag.dim {
+  color: var(--text-muted);
+  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--border);
+}
+
+.meta-tag.cashback {
+  color: #f0b90b;
+  background: rgba(240, 185, 11, 0.1);
+  border-color: rgba(240, 185, 11, 0.25);
+}
+
+.meta-time {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: #555;
+  font-weight: 600;
+}
+
+.match-title {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--text);
+  line-height: 1.35;
+  margin-bottom: 14px;
+}
+
+/* pick block */
+.pick-block {
+  position: relative;
+  overflow: hidden;
+  padding: 14px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-sm);
+}
+
+.pick-market {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+  margin-bottom: 6px;
+}
+
+.pick-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.pick-selection {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.pick-odds {
+  font-size: 14px;
+  font-weight: 900;
+  color: var(--text-muted);
+}
+
+.score-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.score-row.compact {
+  margin-top: 8px;
+}
+
+.score-pill {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--text);
+  padding: 5px 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 6px;
+}
+
+.score-pill em {
+  font-style: normal;
+  font-size: 9px;
+  font-weight: 800;
+  color: var(--text-muted);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-right: 5px;
+}
+
+.score-pill.dim { color: var(--text-muted); }
+.score-pill.sm { font-size: 11px; padding: 3px 8px; }
+
+.awaiting {
+  margin-top: 10px;
+  font-size: 12px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* parlay legs */
+.legs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.leg-item {
+  display: flex;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.leg-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.leg-status-dot {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 900;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1.5px solid var(--border);
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.leg-status-dot svg {
+  width: 12px;
+  height: 12px;
+}
+
+.leg-status-dot.won {
+  background: rgba(52, 199, 89, 0.12);
+  border-color: rgba(52, 199, 89, 0.45);
+  color: #34c759;
+}
+
+.leg-status-dot.lost {
+  background: rgba(255, 69, 58, 0.1);
+  border-color: rgba(255, 69, 58, 0.35);
+  color: var(--danger);
+}
+
+.leg-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.leg-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.leg-match {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--text);
+  line-height: 1.35;
+}
+
+.leg-odds {
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 900;
+  color: var(--text-muted);
+}
+
+.leg-pick {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+/* footer */
+.receipt-foot {
+  padding: 14px 18px 16px;
+}
+
+.foot-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 7px 0;
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.foot-row span:last-child {
+  color: var(--text);
+  font-weight: 700;
+}
+
+.foot-row .gold {
+  color: var(--primary-light);
+  font-weight: 800;
+}
+
+.foot-row.id {
+  margin-top: 4px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 11px;
+}
+
+.foot-row.id span:last-child {
+  color: #555;
+  font-weight: 600;
+}
+
+.mono {
+  font-family: ui-monospace, monospace;
+  letter-spacing: 0.02em;
+}
+</style>
diff --git a/apps/player/src/views/MobileCashbackRecordsView.vue b/apps/player/src/views/MobileCashbackRecordsView.vue
new file mode 100644
index 0000000..3559720
--- /dev/null
+++ b/apps/player/src/views/MobileCashbackRecordsView.vue
@@ -0,0 +1,411 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+
+import { parseCashbackApiData, type CashbackRecord } from '../utils/cashback';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+
+const highlightBatchNo = computed(() => {
+  const q = route.query.batchNo;
+  return typeof q === 'string' ? q.trim() : '';
+});
+
+const items = ref<CashbackRecord[]>([]);
+const loading = ref(false);
+const initialLoading = ref(true);
+const page = ref(1);
+const hasMore = ref(true);
+
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+const totalAmount = computed(() =>
+  items.value.reduce((sum, row) => sum + Math.abs(parseFloat(row.amount) || 0), 0),
+);
+
+function formatPeriod(start: string, end: string) {
+  const opts: Intl.DateTimeFormatOptions = { month: '2-digit', day: '2-digit' };
+  const s = new Date(start).toLocaleDateString(locale.value, opts);
+  const e = new Date(end).toLocaleDateString(locale.value, opts);
+  return `${s} – ${e}`;
+}
+
+function formatRate(rate: string) {
+  const n = parseFloat(rate);
+  if (!Number.isFinite(n)) return rate;
+  return `${(n * 100).toFixed(2)}%`;
+}
+
+function formatTime(v: string | null) {
+  if (!v) return '—';
+  return new Date(v).toLocaleString(locale.value, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+}
+
+async function fetchRecords(p = 1) {
+  if (loading.value) return;
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/cashbacks', { params: { page: p } });
+    const newItems = parseCashbackApiData(data.data);
+    
+    if (p === 1) {
+      items.value = newItems;
+    } else {
+      items.value = [...items.value, ...newItems];
+    }
+    
+    const pageSize = 20;
+    hasMore.value = newItems.length >= pageSize;
+    page.value = p;
+  } catch {
+    if (p === 1) items.value = [];
+  } finally {
+    loading.value = false;
+    initialLoading.value = false;
+  }
+}
+
+useOnLocaleChange(() => {
+  items.value = [];
+  page.value = 1;
+  hasMore.value = true;
+  initialLoading.value = true;
+  fetchRecords(1);
+});
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await fetchRecords(1); },
+});
+
+onMounted(() => {
+  fetchRecords(1);
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
+        fetchRecords(page.value + 1);
+      }
+    },
+    { rootMargin: '200px' },
+  );
+  if (sentinel.value) observer.observe(sentinel.value);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+</script>
+
+<template>
+  <div class="cashback-page">
+    <div class="top-bar">
+      <button type="button" class="back-btn" @click="router.back()">
+        &#x2039; {{ t('history.back') }}
+      </button>
+    </div>
+
+    <div class="pull-indicator" :style="pullIndicatorStyle()">
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+      <span class="loading-text">{{ t('bet.loading') }}</span>
+    </div>
+
+    <template v-else>
+      <div class="hero">
+        <span class="hero-amount">{{ formatMoney(totalAmount, locale) }}</span>
+        <span class="hero-sub">
+          {{ t('cashback.total_received') }}
+          <template v-if="items.length">
+            · {{ t('cashback.record_count', { n: items.length }) }}
+          </template>
+        </span>
+      </div>
+
+      <p class="ledger-hint">{{ t('cashback.ledger_hint') }}</p>
+
+      <p v-if="items.length" class="section-title">{{ t('cashback.list_title') }}</p>
+
+      <div v-if="items.length" class="list-card">
+        <article
+          v-for="row in items"
+          :key="row.id"
+          class="record-row"
+          :class="{ 'record-row--highlight': highlightBatchNo && row.batchNo === highlightBatchNo }"
+        >
+          <div class="row-main">
+            <div class="row-left">
+              <span class="row-amount">{{ formatMoney(row.amount, locale) }}</span>
+              <span class="row-period">{{ formatPeriod(row.periodStart, row.periodEnd) }}</span>
+            </div>
+            <span class="row-rate">{{ formatRate(row.rate) }}</span>
+          </div>
+          <div class="row-detail">
+            <span>{{ t('cashback.effective_stake') }} {{ formatMoneyCompact(row.effectiveStake, locale) }}</span>
+            <span>{{ t('cashback.bet_count', { n: row.betCount }) }}</span>
+          </div>
+          <div class="row-foot">
+            <span class="row-batch">{{ row.batchNo }}</span>
+            <span class="row-time">{{ formatTime(row.confirmedAt ?? row.createdAt) }}</span>
+          </div>
+        </article>
+      </div>
+
+      <div ref="sentinel" class="sentinel" />
+
+      <div v-if="loading && items.length > 0" class="load-more-spinner">
+        <GoldSpinner :size="24" />
+      </div>
+
+      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+        {{ t('common.no_more') }}
+      </div>
+
+      <div v-else class="empty">
+        <p class="empty-title">{{ t('cashback.empty') }}</p>
+        <p class="empty-hint">{{ t('cashback.empty_hint') }}</p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.cashback-page {
+  padding-bottom: 24px;
+}
+
+.top-bar {
+  margin-bottom: 4px;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: var(--primary-light, #d4af37);
+  font-size: 15px;
+  font-weight: 700;
+  padding: 4px 0 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--text-muted);
+  padding: 56px 20px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.loading-text {
+  font-size: 13px;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 18px 16px 16px;
+  margin-bottom: 14px;
+  border-radius: var(--radius, 12px);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(26, 26, 26, 0.92));
+  border: 1px solid rgba(212, 175, 55, 0.28);
+  text-align: center;
+}
+
+.hero-amount {
+  font-size: 28px;
+  font-weight: 800;
+  color: #f0b90b;
+  line-height: 1.2;
+  text-shadow: 0 0 20px rgba(240, 185, 11, 0.2);
+}
+
+.hero-sub {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.section-title {
+  font-size: 10.5px;
+  color: #555;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 10px;
+}
+
+.list-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.record-row {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.record-row:last-child {
+  border-bottom: none;
+}
+
+.record-row--highlight {
+  background: rgba(212, 175, 55, 0.08);
+  box-shadow: inset 3px 0 0 #d4af37;
+}
+
+.ledger-hint {
+  margin: 0 0 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #666;
+}
+
+.row-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.row-left {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.row-amount {
+  font-size: 17px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.row-period {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.row-rate {
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 700;
+  color: #f0b90b;
+  background: rgba(240, 185, 11, 0.1);
+  border: 1px solid rgba(240, 185, 11, 0.22);
+  border-radius: 999px;
+  padding: 3px 10px;
+}
+
+.row-detail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.row-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed rgba(255, 255, 255, 0.06);
+  font-size: 11px;
+  color: #666;
+}
+
+.row-batch {
+  font-family: ui-monospace, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 58%;
+}
+
+.row-time {
+  flex-shrink: 0;
+}
+
+.empty {
+  text-align: center;
+  padding: 48px 20px 32px;
+}
+
+.empty-title {
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+
+.empty-hint {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #666;
+}
+
+.sentinel {
+  height: 1px;
+}
+
+.load-more-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0 8px;
+}
+
+.end-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #555;
+  font-weight: 600;
+  padding: 16px 0 4px;
+  letter-spacing: 0.03em;
+}
+</style>
diff --git a/apps/player/src/views/MobileFootballView.vue b/apps/player/src/views/MobileFootballView.vue
new file mode 100644
index 0000000..dd53356
--- /dev/null
+++ b/apps/player/src/views/MobileFootballView.vue
@@ -0,0 +1,794 @@
+<script setup lang="ts">
+import { ref, computed, onActivated, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { usePlayerMatches } from '../composables/usePlayerMatches';
+import LeagueAccordionItem from '../components/LeagueAccordionItem.vue';
+import MatchBetCard from '../components/MatchBetCard.vue';
+import OutrightPanel from '../components/outright/OutrightPanel.vue';
+import emptyMatchesImg from '../assets/images/empty-matches.svg';
+import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+import type { MatchPhase } from '../utils/matchPhase';
+import {
+  isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
+  isInLocalTodayMatchWindow as isInTodayMatchWindow,
+} from '@thebet365/shared';
+
+type MainTab = 'matches' | 'outright';
+
+interface Match {
+  id: string;
+  leagueId?: string;
+  homeTeamName: string;
+  awayTeamName: string;
+  homeTeamCode?: string;
+  awayTeamCode?: string;
+  homeTeamLogoUrl?: string | null;
+  awayTeamLogoUrl?: string | null;
+  startTime: string;
+  leagueName: string;
+  leagueLogoUrl?: string | null;
+  displayOrder?: number;
+  isHot?: boolean;
+  status?: string;
+  bettingOpen?: boolean;
+  matchPhase?: MatchPhase;
+  score?: {
+    htHome: number | null;
+    htAway: number | null;
+    ftHome: number | null;
+    ftAway: number | null;
+    homeCorners?: number | null;
+    awayCorners?: number | null;
+    homeYellowCards?: number | null;
+    awayYellowCards?: number | null;
+    homeRedCards?: number | null;
+    awayRedCards?: number | null;
+    homeCards?: number | null;
+    awayCards?: number | null;
+  } | null;
+}
+
+interface LeagueGroup {
+  leagueId: string;
+  leagueName: string;
+  leagueLogoUrl?: string | null;
+  matches: Match[];
+}
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+const mainTab = ref<MainTab>('matches');
+const searchQuery = ref('');
+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;
+
+async function loadMatches() {
+  filterNow.value = new Date();
+  await loadSummary(true);
+}
+
+useOnLocaleChange(() => loadSummary(true));
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadMatches(); },
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
+function normalizeLeagueName(name: string): string {
+  return name
+    .replace(/\.unit$/i, '')
+    .replace(/[-_]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function syncSearchFromRoute() {
+  const q = route.query.search;
+  searchQuery.value = typeof q === 'string' ? q : '';
+}
+
+function matchesSearchKeyword(m: Match, keyword: string) {
+  if (!keyword) return true;
+  const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
+  return haystack.includes(keyword);
+}
+
+const filteredMatches = computed(() => {
+  if (mainTab.value !== 'matches') return [];
+  const now = filterNow.value;
+  const keyword = searchQuery.value.trim().toLowerCase();
+  return matches.value.filter((m) => {
+    if (!matchesSearchKeyword(m, keyword)) return false;
+    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 (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;
+
+    if (filterState.value.status === 'open' && m.matchPhase !== 'open' && m.matchPhase !== undefined) continue;
+    if (filterState.value.status === 'settled' && m.matchPhase !== 'settled') continue;
+    
+    const id = m.leagueId ?? m.leagueName;
+    if (!map.has(id)) {
+      map.set(id, { id, name: normalizeLeagueName(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[] {
+  const map = new Map<string, LeagueGroup>();
+  for (const m of source) {
+    const id = m.leagueId ?? m.leagueName;
+    if (!map.has(id)) {
+      map.set(id, {
+        leagueId: id,
+        leagueName: normalizeLeagueName(m.leagueName),
+        leagueLogoUrl: m.leagueLogoUrl ?? null,
+        matches: [],
+      });
+    }
+    map.get(id)!.matches.push(m);
+  }
+  const groups = [...map.values()];
+  for (const g of groups) {
+    g.matches.sort(
+      (a, b) =>
+        (a.displayOrder ?? 0) - (b.displayOrder ?? 0) ||
+        new Date(a.startTime).getTime() - new Date(b.startTime).getTime(),
+    );
+  }
+  return groups.sort(
+    (a, b) =>
+      (a.matches[0]?.displayOrder ?? 0) - (b.matches[0]?.displayOrder ?? 0) ||
+      a.leagueName.localeCompare(b.leagueName),
+  );
+}
+
+const leagueGroups = computed(() => buildLeagueGroups(filteredMatches.value));
+
+const isSearchActive = computed(() => searchQuery.value.trim().length > 0);
+
+const sortedFilteredMatches = computed(() =>
+  [...filteredMatches.value].sort(
+    (a, b) =>
+      (a.displayOrder ?? 0) - (b.displayOrder ?? 0) ||
+      new Date(a.startTime).getTime() - new Date(b.startTime).getTime(),
+  ),
+);
+
+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 !== expandedLeagues.value.size || [...ids].some((id) => !expandedLeagues.value.has(id))) {
+    expandedLeagues.value = ids;
+  }
+});
+
+function toggleLeague(leagueId: string) {
+  const next = new Set(expandedLeagues.value);
+  if (next.has(leagueId)) next.delete(leagueId);
+  else next.add(leagueId);
+  expandedLeagues.value = next;
+}
+
+function selectMainTab(tab: MainTab) {
+  mainTab.value = tab;
+  if (tab === 'outright') outrightActivated.value = true;
+}
+
+onActivated(() => {
+  filterNow.value = new Date();
+  filterState.value.time = 'all';
+  syncSearchFromRoute();
+  
+  if (route.query.tab === 'outright') {
+    selectMainTab('outright');
+  } else {
+    selectMainTab('matches');
+  }
+
+  void loadSummary(true, true);
+});
+
+watch(
+  () => route.query.search,
+  () => syncSearchFromRoute(),
+);
+
+function goMatch(id: string) {
+  router.push(`/match/${id}`);
+}
+</script>
+
+<template>
+  <div class="bet-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <div class="main-tabs">
+      <button
+        type="button"
+        class="main-tab"
+        :class="{ active: mainTab === 'matches', 'tab-gold-active': mainTab === 'matches' }"
+        @click="selectMainTab('matches')"
+      >
+        <span class="tab-icon">⚽</span>
+        {{ t('bet.tab_matches') }}
+      </button>
+      <button
+        type="button"
+        class="main-tab"
+        :class="{ active: mainTab === 'outright', 'tab-gold-active': mainTab === 'outright' }"
+        @click="selectMainTab('outright')"
+      >
+        <span class="tab-icon">🏆</span>
+        {{ t('bet.tab_outright') }}
+      </button>
+    </div>
+
+    <div :class="['tab-panel', { 'tab-panel--hidden': mainTab !== 'matches' }]">
+      <div class="search-bar">
+        <span class="search-icon" aria-hidden="true">⌕</span>
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="t('search.placeholder')"
+          enterkeyhint="search"
+          autocomplete="off"
+        />
+      </div>
+
+      <div class="filters-bar">
+        <div class="phase-filter">
+          <div class="league-dropdown">
+            <button type="button" class="dropdown-trigger" @click="dropdownOpen = !dropdownOpen">
+              <span class="dropdown-text">{{ 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="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>
+          <div v-if="isSearchActive && sortedFilteredMatches.length" class="search-results">
+            <p class="search-results-meta">
+              {{ t('search.results_count', { count: sortedFilteredMatches.length }) }}
+            </p>
+            <div class="search-match-list">
+              <article
+                v-for="match in sortedFilteredMatches"
+                :key="match.id"
+                class="search-result-item"
+              >
+                <p class="search-result-league">{{ normalizeLeagueName(match.leagueName) }}</p>
+                <MatchBetCard :match="match" @bet="goMatch" />
+              </article>
+            </div>
+          </div>
+          <div v-else-if="!isSearchActive && leagueGroups.length" class="league-list">
+            <LeagueAccordionItem
+              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.has(group.leagueId)"
+              @toggle="toggleLeague(group.leagueId)"
+              @bet="goMatch"
+            />
+          </div>
+          <div v-else class="empty">
+            <img :src="emptyMatchesImg" alt="" class="empty-icon" />
+            <p>{{ isSearchActive ? t('search.no_results') : t('bet.no_matches') }}</p>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <OutrightPanel
+      v-if="outrightActivated"
+      :class="['outright-tab', 'tab-panel', { 'tab-panel--hidden': mainTab !== 'outright' }]"
+      :activated="mainTab === 'outright'"
+    />
+
+
+
+  </div>
+</template>
+
+<style scoped>
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.bet-page {
+  margin: 0 -16px;
+  padding-bottom: 8px;
+  background: var(--bg-body);
+}
+
+/* Tab panel toggle: avoid display:none to prevent browser releasing image resources */
+.tab-panel {
+  display: block;
+}
+.tab-panel--hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.main-tabs {
+  display: flex;
+  gap: 8px;
+  padding: 0 12px 12px;
+}
+
+.main-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 8px;
+  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: var(--shadow);
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.main-tab.active {
+  font-weight: 700;
+  background: rgba(244, 162, 97, 0.1);
+  border-color: var(--primary);
+  color: var(--primary-light);
+}
+
+.tab-icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 12px 8px;
+  padding: 0 10px;
+  height: 32px;
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-card);
+}
+
+.search-icon {
+  color: var(--gold);
+  font-size: 14px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.search-bar input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.search-bar input::placeholder {
+  color: var(--text-muted);
+}
+
+.filters-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 0 12px 12px;
+}
+
+.phase-filter {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.right-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.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;
+  flex-shrink: 0;
+}
+
+.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;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.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;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.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;
+  width: 100%;
+}
+
+.dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  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;
+  height: 24px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+}
+
+.dropdown-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-trigger .arrow-icon {
+  font-size: 8px;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+  display: inline-block;
+  transform: scale(0.8);
+}
+
+.dropdown-trigger .arrow-icon.open {
+  transform: scale(0.8) rotate(180deg);
+}
+
+.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: 170px;
+  max-width: 240px;
+  max-height: 200px;
+  overflow-y: auto;
+  background: #0f1217;
+  border: 1px solid #2a3240;
+  border-radius: 8px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65);
+  padding: 6px 0;
+}
+
+.dropdown-item {
+  padding: 8px 14px;
+  font-size: 13px;
+  color: #e5e7eb;
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid #1f2937;
+}
+
+.dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.dropdown-item:hover,
+.dropdown-item:active {
+  background: #1b2330;
+}
+
+.dropdown-item.active {
+  color: #f4d06f;
+  background: #242f42;
+  font-weight: 700;
+}
+
+.league-list {
+  padding: 4px 12px 0;
+}
+
+.search-results {
+  padding: 0 12px;
+}
+
+.search-results-meta {
+  margin: 0 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.search-match-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.search-result-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.search-result-league {
+  margin: 0;
+  padding: 0 2px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--primary-light);
+  line-height: 1.3;
+}
+
+.state,
+.placeholder,
+.empty {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 48px 20px;
+  font-weight: 600;
+}
+
+.empty-icon {
+  width: 96px;
+  height: 96px;
+  margin-bottom: 14px;
+}
+
+.placeholder {
+  padding: 80px 20px;
+}
+
+.outright-tab {
+  min-height: 0;
+}
+</style>
diff --git a/apps/player/src/views/MobileHomeView.vue b/apps/player/src/views/MobileHomeView.vue
new file mode 100644
index 0000000..5ed7fa0
--- /dev/null
+++ b/apps/player/src/views/MobileHomeView.vue
@@ -0,0 +1,459 @@
+<script setup lang="ts">
+import { onActivated, computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import emptyMatchesImg from '../assets/images/empty-matches.svg';
+import vsImg from '../assets/images/vs.png';
+import cardBg from '../assets/images/card-bg.webp';
+import BannerCarousel from '../components/BannerCarousel.vue';
+import HomeAnnouncementCard from '../components/HomeAnnouncementCard.vue';
+import { usePlayerHome } from '../composables/usePlayerHome';
+import TeamEmblem from '../components/TeamEmblem.vue';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+import { formatLocalMatchDateTime } from '@thebet365/shared';
+import type { PlayerHomeMatch } from '../composables/usePlayerHome';
+
+type HotTab = 'hot' | 'upcoming';
+
+const matchCardBg = `url(${cardBg})`;
+const { t, locale } = useI18n();
+const router = useRouter();
+const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
+const activeTab = ref<HotTab>('hot');
+
+const bannerFallbackTo = computed(() => {
+  const id = announcementItems.value[0]?.id;
+  return id ? `/announcements/${id}` : '/announcements';
+});
+
+const displayedMatches = computed<PlayerHomeMatch[]>(() =>
+  activeTab.value === 'hot' ? hotMatches.value : upcomingMatches.value,
+);
+
+const emptyMessage = computed(() =>
+  activeTab.value === 'hot' ? t('home.no_matches') : t('home.upcoming_empty'),
+);
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await load(true); },
+});
+
+onActivated(() => { void load(true); });
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
+function goMatch(id: string) {
+  router.push(`/match/${id}`);
+}
+
+function formatKickoff(startTime: string) {
+  return formatLocalMatchDateTime(startTime, locale.value, { variant: 'full' });
+}
+
+</script>
+
+<template>
+  <div>
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <BannerCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
+
+    <div class="home-card-wrapper">
+      <HomeAnnouncementCard />
+    </div>
+
+    <div class="hot-tabs" role="tablist" :aria-label="t('home.hot_matches')">
+      <button
+        type="button"
+        role="tab"
+        class="hot-tab"
+        :class="{ active: activeTab === 'hot' }"
+        :aria-selected="activeTab === 'hot'"
+        @click="activeTab = 'hot'"
+      >
+        {{ t('home.hot_tab') }}
+      </button>
+      <button
+        type="button"
+        role="tab"
+        class="hot-tab"
+        :class="{ active: activeTab === 'upcoming' }"
+        :aria-selected="activeTab === 'upcoming'"
+        @click="activeTab = 'upcoming'"
+      >
+        {{ t('home.upcoming_tab') }}
+      </button>
+    </div>
+    <div
+      v-for="(match, index) in displayedMatches"
+      :key="match.id"
+      class="match-card"
+      :class="{ 'match-card--live-anim': activeTab === 'hot' && index < 3 }"
+      @click="goMatch(match.id)"
+    >
+      <div class="match-info">
+        <div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
+        <div class="match-time">{{ formatKickoff(match.startTime) }}</div>
+      </div>
+      <div class="match-flags" aria-hidden="true">
+        <TeamEmblem
+          size="md"
+          :team-code="match.homeTeamCode"
+          :team-name="match.homeTeamName"
+          :logo-url="match.homeTeamLogoUrl"
+        />
+        <div class="vs-arena">
+          <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" />
+              </linearGradient>
+            </defs>
+            <path
+              class="hz-path hz-path-main"
+              :stroke="`url(#hzBoltGrad-${match.id})`"
+              d="M1 14 H16 L20 5 L24 23 L28 9 L32 14 H40 L44 6 L48 22 L52 12 L56 14 H71"
+            />
+            <path
+              class="hz-path hz-path-sub"
+              :stroke="`url(#hzBoltGrad-${match.id})`"
+              d="M3 19 H14 L18 15 L22 19 H50 L54 16 L58 19 H69"
+            />
+          </svg>
+          <span class="hz-beam" aria-hidden="true" />
+          <img :src="vsImg" alt="" class="vs-img" />
+        </div>
+        <TeamEmblem
+          size="md"
+          :team-code="match.awayTeamCode"
+          :team-name="match.awayTeamName"
+          :logo-url="match.awayTeamLogoUrl"
+        />
+      </div>
+    </div>
+
+    <div v-if="!loading && !displayedMatches.length" class="empty">
+      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
+      <p>{{ emptyMessage }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-card-wrapper {
+  margin: 12px 16px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.hot-tabs {
+  display: flex;
+  gap: 8px;
+  margin: 14px 0;
+}
+
+.hot-tab {
+  flex: 1;
+  min-height: 36px;
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.hot-tab.active {
+  font-weight: 700;
+  background: rgba(244, 162, 97, 0.1);
+  border-color: var(--primary);
+  color: var(--primary-light);
+}
+
+.hot-tab:active {
+  opacity: 0.92;
+}
+
+.match-card {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 14px 16px;
+  min-height: 72px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: none;
+  background: var(--bg-card);
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.2s;
+  overflow: hidden;
+}
+
+.match-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: v-bind(matchCardBg) center / 100% 100% no-repeat;
+  opacity: 0.25;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.match-card:active {
+  opacity: 0.92;
+  transform: scale(0.995);
+}
+
+.match-info,
+.match-flags {
+  position: relative;
+  z-index: 1;
+}
+
+.match-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.match-teams {
+  font-weight: 800;
+  margin-bottom: 8px;
+  font-size: 16px;
+  line-height: 1.3;
+}
+
+.match-time {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.match-flags {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 46%;
+}
+
+.vs-arena {
+  position: relative;
+  flex-shrink: 0;
+  width: 64px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hz-lightning {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.hz-path {
+  fill: none;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
+  opacity: 0;
+}
+
+.match-card--live-anim .hz-path-main {
+  animation: hz-strike-main 2.6s ease-in-out infinite;
+}
+
+.match-card--live-anim .hz-path-sub {
+  stroke-width: 1.6;
+  animation: hz-strike-sub 2.6s ease-in-out infinite;
+  animation-delay: 0.12s;
+}
+
+.match-card--live-anim .hz-beam {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 1;
+  background: linear-gradient(
+    90deg,
+    rgba(94, 184, 255, 0) 0%,
+    rgba(184, 236, 255, 0.95) 28%,
+    #fff 50%,
+    rgba(255, 208, 128, 0.95) 72%,
+    rgba(255, 144, 64, 0) 100%
+  );
+  opacity: 0;
+  filter: blur(0.4px);
+  animation: hz-beam-flash 2.6s ease-in-out infinite;
+}
+
+.hz-beam {
+  display: none;
+}
+
+.vs-img {
+  position: relative;
+  z-index: 0;
+  width: 48px;
+  height: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
+}
+
+.match-card--live-anim .vs-img {
+  animation: vs-glow 2.4s ease-in-out infinite;
+}
+
+@keyframes hz-strike-main {
+  0%,
+  72%,
+  100% {
+    opacity: 0;
+  }
+
+  74% {
+    opacity: 1;
+  }
+
+  75% {
+    opacity: 0.25;
+  }
+
+  76% {
+    opacity: 0.95;
+  }
+
+  78% {
+    opacity: 0;
+  }
+}
+
+@keyframes hz-strike-sub {
+  0%,
+  74%,
+  100% {
+    opacity: 0;
+  }
+
+  76% {
+    opacity: 0.85;
+  }
+
+  77% {
+    opacity: 0.2;
+  }
+
+  78% {
+    opacity: 0.7;
+  }
+
+  80% {
+    opacity: 0;
+  }
+}
+
+@keyframes hz-beam-flash {
+  0%,
+  71%,
+  100% {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(0.6);
+  }
+
+  73% {
+    opacity: 0.85;
+    transform: translateY(-50%) scaleX(1);
+  }
+
+  75% {
+    opacity: 0.15;
+    transform: translateY(-50%) scaleX(0.95);
+  }
+
+  76% {
+    opacity: 0.75;
+    transform: translateY(-50%) scaleX(1);
+  }
+
+  78% {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(1.05);
+  }
+}
+
+@keyframes vs-glow {
+  0%,
+  100% {
+    opacity: 0.82;
+    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
+  }
+
+  50% {
+    opacity: 1;
+    filter:
+      drop-shadow(0 0 3px rgba(255, 230, 140, 0.7))
+      drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vs-img {
+    animation: none;
+    filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
+  }
+
+  .hz-path,
+  .hz-beam {
+    animation: none;
+    opacity: 0;
+  }
+}
+
+.empty {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 40px 20px;
+  font-weight: 600;
+}
+
+.empty-icon {
+  width: 96px;
+  height: 96px;
+  margin-bottom: 14px;
+}
+</style>
diff --git a/apps/player/src/views/MobileInboxHubView.vue b/apps/player/src/views/MobileInboxHubView.vue
new file mode 100644
index 0000000..e92a001
--- /dev/null
+++ b/apps/player/src/views/MobileInboxHubView.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import { computed, onActivated, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import MessageListPanel from '../components/MessageListPanel.vue';
+import CustomerServicePanel from '../components/CustomerServicePanel.vue';
+import ConfirmDialog from '../components/ConfirmDialog.vue';
+import { useAuthStore } from '../stores/auth';
+import { usePlayerMessages } from '../composables/usePlayerMessages';
+import { useInboxFeature } from '../composables/useInboxFeature';
+
+type HubTab = 'messages' | 'support';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const auth = useAuthStore();
+const { inboxEnabled, hubTitleKey } = useInboxFeature();
+const {
+  unreadCount,
+  messages,
+  listLoaded,
+  refreshUnreadCount,
+  markAllRead,
+  deleteAllMessages,
+} = usePlayerMessages();
+
+const markingAll = ref(false);
+const deletingAll = ref(false);
+const deleteAllConfirmVisible = ref(false);
+
+const activeTab = computed<HubTab>(() => {
+  if (!inboxEnabled.value) return 'support';
+  return route.query.tab === 'support' ? 'support' : 'messages';
+});
+
+const unreadInList = computed(() => messages.value.filter((item) => !item.isRead).length);
+const hasMessages = computed(() => listLoaded.value && messages.value.length > 0);
+const showMessageActions = computed(
+  () => inboxEnabled.value && activeTab.value === 'messages' && auth.token && hasMessages.value,
+);
+
+function switchTab(tab: HubTab) {
+  if (!inboxEnabled.value || tab === activeTab.value) return;
+  router.replace({ path: '/messages', query: tab === 'support' ? { tab: 'support' } : {} });
+}
+
+async function onMarkAllRead() {
+  if (!unreadInList.value || markingAll.value) return;
+  markingAll.value = true;
+  try {
+    await markAllRead();
+    await refreshUnreadCount();
+  } finally {
+    markingAll.value = false;
+  }
+}
+
+function onDeleteAll() {
+  if (deletingAll.value || !messages.value.length) return;
+  deleteAllConfirmVisible.value = true;
+}
+
+async function confirmDeleteAll() {
+  if (deletingAll.value || !messages.value.length) return;
+  deletingAll.value = true;
+  try {
+    await deleteAllMessages();
+    await refreshUnreadCount();
+    deleteAllConfirmVisible.value = false;
+  } finally {
+    deletingAll.value = false;
+  }
+}
+
+function ensureSupportTabWhenDisabled() {
+  if (inboxEnabled.value || route.path !== '/messages') return;
+  if (route.query.tab === 'support') return;
+  void router.replace({ path: '/messages', query: { tab: 'support' } });
+}
+
+function goBack() {
+  router.back();
+}
+
+watch(inboxEnabled, (enabled, prev) => {
+  if (prev && !enabled) ensureSupportTabWhenDisabled();
+});
+
+watch(
+  () => route.query.tab,
+  () => {
+    if (inboxEnabled.value && activeTab.value === 'messages') void refreshUnreadCount();
+  },
+);
+
+onMounted(ensureSupportTabWhenDisabled);
+
+onActivated(() => {
+  if (inboxEnabled.value) {
+    void refreshUnreadCount();
+    return;
+  }
+  ensureSupportTabWhenDisabled();
+});
+</script>
+
+<template>
+  <div class="inbox-hub" :class="{ 'inbox-hub--tabs': inboxEnabled }">
+    <header class="page-header">
+      <button type="button" class="back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
+      <h1>{{ t(hubTitleKey) }}</h1>
+    </header>
+
+    <div v-if="inboxEnabled" class="hub-top-bar">
+      <nav class="hub-tabs" role="tablist">
+        <button
+          type="button"
+          role="tab"
+          class="hub-tab"
+          :class="{ active: activeTab === 'messages' }"
+          :aria-selected="activeTab === 'messages'"
+          @click="switchTab('messages')"
+        >
+          <span class="hub-tab-label">{{ t('inbox_hub.tab_messages') }}</span>
+          <span v-if="auth.token && unreadCount > 0" class="hub-tab-badge">
+            {{ unreadCount > 99 ? '99+' : unreadCount }}
+          </span>
+        </button>
+        <button
+          type="button"
+          role="tab"
+          class="hub-tab"
+          :class="{ active: activeTab === 'support' }"
+          :aria-selected="activeTab === 'support'"
+          @click="switchTab('support')"
+        >
+          {{ t('inbox_hub.tab_support') }}
+        </button>
+      </nav>
+    </div>
+
+    <div v-if="showMessageActions" class="message-actions">
+      <button
+        type="button"
+        class="action-btn"
+        :disabled="!unreadInList || markingAll"
+        @click="onMarkAllRead"
+      >
+        {{ t('messages.mark_all_read') }}
+      </button>
+      <button
+        type="button"
+        class="action-btn danger"
+        :disabled="deletingAll"
+        @click="onDeleteAll"
+      >
+        {{ t('messages.delete_all') }}
+      </button>
+    </div>
+
+    <MessageListPanel v-if="inboxEnabled" v-show="activeTab === 'messages'" @click-message="id => $router.push('/messages/' + id)" />
+    <CustomerServicePanel v-if="activeTab === 'support'" />
+
+    <ConfirmDialog
+      v-model:visible="deleteAllConfirmVisible"
+      :title="t('messages.delete_all')"
+      :message="t('messages.delete_all_confirm')"
+      :confirm-text="t('messages.delete_all')"
+      danger
+      :loading="deletingAll"
+      @confirm="confirmDeleteAll"
+    />
+  </div>
+</template>
+
+<style scoped>
+.inbox-hub {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding: 0 0 24px;
+}
+
+.inbox-hub--tabs {
+  margin: -12px -16px 0;
+  padding: max(12px, env(safe-area-inset-top, 0px)) 16px 0;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 0 14px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0;
+}
+
+.back-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #141414;
+  color: var(--gold);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.hub-top-bar {
+  margin: 0;
+  border-bottom: 1px solid var(--border);
+}
+
+
+
+.hub-tabs {
+  flex: 1;
+  display: flex;
+  gap: 0;
+  margin: 0;
+  min-width: 0;
+}
+
+.hub-tab {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 8px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.hub-tab.active {
+  color: var(--gold);
+  border-bottom-color: var(--gold);
+}
+
+.hub-tab-label {
+  line-height: 1.2;
+}
+
+.hub-tab-badge {
+  min-width: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--gold);
+  color: #111;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+}
+
+.message-actions {
+  display: flex;
+  gap: 8px;
+  padding: 10px 0 4px;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 8px 10px;
+  border: 1px solid var(--border-gold-soft);
+  border-radius: 8px;
+  background: rgba(212, 175, 55, 0.08);
+  color: var(--gold);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.action-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.action-btn.danger {
+  border-color: rgba(255, 80, 80, 0.35);
+  background: rgba(255, 80, 80, 0.08);
+  color: #f88;
+}
+</style>
diff --git a/apps/player/src/views/MobileMatchDetailView.vue b/apps/player/src/views/MobileMatchDetailView.vue
new file mode 100644
index 0000000..eaccd87
--- /dev/null
+++ b/apps/player/src/views/MobileMatchDetailView.vue
@@ -0,0 +1,989 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+import { useBetSlipStore } from '../stores/betSlip';
+import { useAuthStore } from '../stores/auth';
+import TeamEmblem from '../components/TeamEmblem.vue';
+import MatchBetGuide from '../components/match-detail/MatchBetGuide.vue';
+import MarketTypeTile from '../components/match-detail/MarketTypeTile.vue';
+import MarketSelectionsPanel from '../components/match-detail/MarketSelectionsPanel.vue';
+import CorrectScorePanel from '../components/match-detail/CorrectScorePanel.vue';
+import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
+import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+import vsImg from '../assets/images/vs.png';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { matchPhaseLabel, type MatchPhase } from '../utils/matchPhase';
+import { formatLocalMatchDateTime } from '@thebet365/shared';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+
+function goLogin() {
+  auth.showLoginPrompt(route.fullPath);
+}
+
+interface Market {
+  id: string;
+  marketType: string;
+  marketDisplayName?: string;
+  lineKey?: string | null;
+  period: string;
+  lineValue?: string | number | null;
+  status?: string;
+  allowSingle?: boolean;
+  allowParlay?: boolean;
+  promoLabel?: string | null;
+  selections: Selection[];
+}
+
+interface Selection {
+  id: string;
+  selectionCode: string;
+  selectionName: string;
+  selectionDisplayName?: string;
+  odds: string;
+  oddsVersion: string;
+}
+
+interface MatchDetail {
+  id: string;
+  leagueName?: string;
+  leagueLogoUrl?: string | null;
+  homeTeamName: string;
+  awayTeamName: string;
+  homeTeamCode?: string;
+  awayTeamCode?: string;
+  homeTeamLogoUrl?: string | null;
+  awayTeamLogoUrl?: string | null;
+  startTime: string;
+  stage?: string | null;
+  groupName?: string | null;
+  status?: string;
+  bettingOpen?: boolean;
+  matchPhase?: MatchPhase;
+  score?: {
+    htHome: number | null;
+    htAway: number | null;
+    ftHome: number | null;
+    ftAway: number | null;
+    homeCorners?: number | null;
+    awayCorners?: number | null;
+    homeYellowCards?: number | null;
+    awayYellowCards?: number | null;
+    homeRedCards?: number | null;
+    awayRedCards?: number | null;
+    homeCards?: number | null;
+    awayCards?: number | null;
+  } | null;
+  markets: Market[];
+}
+
+const match = ref<MatchDetail | null>(null);
+const loading = ref(true);
+
+interface MyBet {
+  betNo: string;
+  betType: string;
+  stake: string;
+  totalOdds: string;
+  potentialReturn: string;
+  actualReturn: string;
+  status: string;
+  placedAt: string;
+  pickLabel: string;
+  matchTitle: string;
+}
+const myBets = ref<MyBet[]>([]);
+const loadingMyBets = ref(false);
+
+async function loadMyBets() {
+  if (!match.value || !auth.token) return;
+  loadingMyBets.value = true;
+  try {
+    const { data } = await api.get('/player/bets', {
+      params: { page: 1, matchId: match.value.id },
+    });
+    myBets.value = (data.data?.items ?? data.data ?? []) as MyBet[];
+  } catch {
+    myBets.value = [];
+  } finally {
+    loadingMyBets.value = false;
+  }
+}
+
+const statusLabel = (status: string) => {
+  const s = status.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return t('history.status_won');
+  if (s === 'LOST' || s === 'LOSE') return t('history.status_lost');
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return t('history.status_push');
+  return t('history.status_pending');
+};
+
+const statusClass = (status: string) => {
+  const s = status.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'bet-status-won';
+  if (s === 'LOST' || s === 'LOSE') return 'bet-status-lost';
+  return 'bet-status-pending';
+};
+const marketsById = computed(() => {
+  const map = new Map<string, Market>();
+  for (const m of match.value?.markets ?? []) {
+    map.set(m.id, m);
+  }
+  return map;
+});
+
+const visibleMarkets = computed(() => match.value?.markets ?? []);
+
+const kickoff = computed(() => {
+  if (!match.value) return '';
+  return formatLocalMatchDateTime(match.value.startTime, locale.value, { variant: 'full' });
+});
+
+const bettingOpen = computed(() => match.value?.bettingOpen !== false);
+
+const matchPhase = computed(
+  (): MatchPhase =>
+    match.value?.matchPhase ?? (bettingOpen.value ? 'open' : 'closed_pending'),
+);
+
+const phaseLabel = computed(() => matchPhaseLabel(t, matchPhase.value));
+
+const liveScoreText = computed(() => {
+  const s = match.value?.score;
+  if (!s || s.ftHome == null || s.ftAway == null) return '';
+  return `${s.ftHome} - ${s.ftAway}`;
+});
+
+function statValue(value: number | null | undefined) {
+  return value == null ? '-' : String(value);
+}
+
+function statPair(home: number | null | undefined, away: number | null | undefined) {
+  return `${statValue(home)} - ${statValue(away)}`;
+}
+
+const resultStats = computed(() => {
+  const s = match.value?.score;
+  if (!s || matchPhase.value !== 'settled') return [];
+  return [
+    { key: 'ht', label: t('bet.result_ht'), value: statPair(s.htHome, s.htAway) },
+    { key: 'ft', label: t('bet.result_ft'), value: statPair(s.ftHome, s.ftAway) },
+    { key: 'corners', label: t('bet.result_corners'), value: statPair(s.homeCorners, s.awayCorners) },
+    {
+      key: 'yellow',
+      label: t('bet.result_yellow_cards'),
+      value: statPair(s.homeYellowCards, s.awayYellowCards),
+    },
+    { key: 'red', label: t('bet.result_red_cards'), value: statPair(s.homeRedCards, s.awayRedCards) },
+  ];
+});
+
+const showResultStats = computed(() => resultStats.value.length > 0);
+
+function marketLabel(market: Market | null | undefined) {
+  return market?.marketDisplayName?.trim() || market?.marketType || '';
+}
+
+function normalizeMarketStatus(status?: string) {
+  return (status ?? 'OPEN').toUpperCase();
+}
+
+function isMarketOpen(market: Market) {
+  return normalizeMarketStatus(market.status) === 'OPEN';
+}
+
+function marketStatusLabel(status?: string) {
+  const normalized = normalizeMarketStatus(status);
+  if (normalized === 'SUSPENDED') return t('bet.market_status_suspended');
+  if (normalized === 'CLOSED') return t('bet.market_status_closed');
+  return '';
+}
+
+function isMarketLocked(market: Market) {
+  if (!bettingOpen.value || !isMarketOpen(market)) return true;
+  const singleOk = market.allowSingle !== false;
+  const parlayOk = market.allowParlay !== false;
+  return !singleOk && !parlayOk;
+}
+
+function selectionLabel(sel: Selection) {
+  const parsedScore = parseScoreCode(sel.selectionCode, t);
+  if (parsedScore) return parsedScore.display;
+  return sel.selectionDisplayName?.trim() || sel.selectionName;
+}
+
+async function loadMatch() {
+  loading.value = true;
+  try {
+    const { data } = await api.get(`/player/matches/${route.params.id}`);
+    match.value = data.data;
+  } finally {
+    loading.value = false;
+  }
+  loadMyBets();
+}
+
+useOnLocaleChange(loadMatch);
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: loadMatch,
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
+function isSelected(id: string) {
+  return slip.singleItem?.selectionId === id || slip.parlayItems.some((i) => i.selectionId === id);
+}
+
+function toggleSelection(sel: Selection, market: Market) {
+  if (!match.value || isMarketLocked(market)) return;
+  if (!auth.token) {
+    goLogin();
+    return;
+  }
+  slip.addItem({
+    selectionId: sel.id,
+    oddsVersion: String(sel.oddsVersion),
+    matchId: match.value.id,
+    matchName: `${match.value.homeTeamName} vs ${match.value.awayTeamName}`,
+    marketId: market.id,
+    marketName: marketLabel(market),
+    selectionName: selectionLabel(sel),
+    odds: parseFloat(sel.odds),
+    marketType: market.marketType,
+    lineValue:
+      market.lineValue != null && market.lineValue !== ''
+        ? parseFloat(String(market.lineValue))
+        : null,
+    allowSingle: market.allowSingle,
+    allowParlay: market.allowParlay,
+  });
+  slip.openDrawer();
+}
+
+function onPickSelection(selId: string, marketId: string) {
+  const market = marketsById.value.get(marketId);
+  const sel = market?.selections.find((s) => s.id === selId);
+  if (!market || !sel) return;
+  toggleSelection(sel, market);
+}
+</script>
+
+<template>
+  <div class="detail-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <header class="toolbar">
+      <button type="button" class="icon-btn" :aria-label="t('bet.back')" @click="router.back()">←</button>
+      <span class="toolbar-title">{{ match?.leagueName ?? '' }}</span>
+      <div class="toolbar-actions">
+        <MatchBetGuide />
+        <button
+          type="button"
+          class="icon-btn"
+          :aria-label="t('bet.refresh')"
+          :disabled="loading"
+          @click="loadMatch"
+        >
+          ↻
+        </button>
+      </div>
+    </header>
+
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+    <template v-else-if="match">
+      <section class="match-hero" :class="{ 'match-hero--phase': matchPhase !== 'open' }">
+        <span v-if="matchPhase === 'settled'" class="status-tag status-tag--settled">{{ phaseLabel }}</span>
+        <span v-else-if="matchPhase === 'closed_pending'" class="status-tag status-tag--pending">{{ phaseLabel }}</span>
+        <div class="hero-teams">
+          <!-- home -->
+          <div class="hero-team">
+            <TeamEmblem
+              size="lg"
+              :team-code="match.homeTeamCode"
+              :team-name="match.homeTeamName"
+              :logo-url="match.homeTeamLogoUrl"
+            />
+            <span class="hero-name">{{ match.homeTeamName }}</span>
+          </div>
+
+          <!-- VS arena with lightning -->
+          <div class="vs-arena">
+            <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" />
+                </linearGradient>
+              </defs>
+              <path
+                class="hz-path hz-path-main"
+                stroke="url(#hzDetailGrad)"
+                d="M1 14 H16 L20 5 L24 23 L28 9 L32 14 H40 L44 6 L48 22 L52 12 L56 14 H71"
+              />
+              <path
+                class="hz-path hz-path-sub"
+                stroke="url(#hzDetailGrad)"
+                d="M3 19 H14 L18 15 L22 19 H50 L54 16 L58 19 H69"
+              />
+            </svg>
+            <span class="hz-beam" aria-hidden="true" />
+            <img :src="vsImg" alt="" class="vs-img" />
+          </div>
+
+          <!-- away -->
+          <div class="hero-team">
+            <TeamEmblem
+              size="lg"
+              :team-code="match.awayTeamCode"
+              :team-name="match.awayTeamName"
+              :logo-url="match.awayTeamLogoUrl"
+            />
+            <span class="hero-name">{{ match.awayTeamName }}</span>
+          </div>
+        </div>
+
+        <p class="kickoff">{{ t('bet.kickoff_time') }}{{ kickoff }}</p>
+        <p v-if="liveScoreText" class="live-score">{{ liveScoreText }}</p>
+      </section>
+
+      <section v-if="showResultStats" class="result-stats-section">
+        <div class="result-stats-head">
+          <h3>{{ t('bet.result_stats_title') }}</h3>
+          <span>{{ match.homeTeamName }} / {{ match.awayTeamName }}</span>
+        </div>
+        <div class="result-stats-grid">
+          <div v-for="item in resultStats" :key="item.key" class="result-stat-item">
+            <span class="result-stat-label">{{ item.label }}</span>
+            <span class="result-stat-value">{{ item.value }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 我的投注 -->
+      <section v-if="myBets.length" class="my-bets-section">
+        <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">
+              <span class="bet-type">{{ bet.betType === 'PARLAY' ? t('history.parlay_league') : bet.pickLabel }}</span>
+              <span class="bet-status" :class="statusClass(bet.status)">{{ statusLabel(bet.status) }}</span>
+            </div>
+            <div class="bet-footer">
+              <span class="bet-stake">{{ t('history.stake') }} {{ formatMoney(bet.stake, locale) }}</span>
+              <span class="bet-return" :class="statusClass(bet.status)">
+                {{ statusClass(bet.status) === 'bet-status-won' ? '+' : '' }}{{ formatMoney(bet.actualReturn || bet.potentialReturn, locale) }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="markets-section">
+        <div class="market-list">
+          <div
+            v-for="market in visibleMarkets"
+            :key="market.id"
+            class="market-group"
+            :class="{ open: true }"
+          >
+            <MarketTypeTile
+              :label="marketLabel(market)"
+              :promo-label="market.promoLabel?.trim() || ''"
+              :status-label="bettingOpen && !isMarketOpen(market) ? marketStatusLabel(market.status) : ''"
+              :has-market="true"
+              :expanded="true"
+            />
+            <div class="market-panel-wrap" :class="{ locked: isMarketLocked(market) }">
+              <span v-if="!bettingOpen && matchPhase === 'settled'" class="market-status-tag market-status-tag--settled">{{ phaseLabel }}</span>
+              <span v-else-if="!bettingOpen" class="market-status-tag market-status-tag--pending">{{ phaseLabel }}</span>
+              <span
+                v-else-if="!isMarketOpen(market)"
+                class="market-status-tag"
+                :class="normalizeMarketStatus(market.status) === 'CLOSED' ? 'market-status-tag--closed' : 'market-status-tag--suspended'"
+              >
+                {{ marketStatusLabel(market.status) }}
+              </span>
+              <CorrectScorePanel
+                v-if="isCorrectScoreMarket(market.marketType)"
+                :market-type="market.marketType"
+                :selections="market.selections"
+                :locked="isMarketLocked(market)"
+                :is-selected="isSelected"
+                @pick="onPickSelection($event, market.id)"
+              />
+              <MarketSelectionsPanel
+                v-else
+                compact
+                :locked="isMarketLocked(market)"
+                :line-value="market.lineValue"
+                :selections="market.selections"
+                :is-selected="isSelected"
+                @pick="onPickSelection($event, market.id)"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.detail-page {
+  margin: 0 -16px;
+  padding-bottom: 16px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 12px 8px;
+  gap: 8px;
+  position: sticky;
+  top: -12px;
+  z-index: 50;
+  margin-top: -12px;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+}
+
+.toolbar-title {
+  flex: 1;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 4px;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.icon-btn {
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--primary-light);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 0;
+}
+
+.icon-btn:disabled {
+  opacity: 0.45;
+}
+
+/* ── match hero ── */
+.match-hero {
+  position: relative;
+  isolation: isolate;
+  margin: 0 0 10px;
+  padding: 14px 12px 16px;
+  overflow: hidden;
+}
+
+.match-hero--phase {
+  opacity: 0.98;
+}
+
+/* ── hero status tag (top-right corner) ── */
+.status-tag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 5;
+  font-size: 11px;
+  font-weight: 800;
+  padding: 4px 14px;
+  border-radius: 0 6px 0 10px;
+  line-height: 1.3;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.status-tag--settled {
+  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
+  color: #8a9ab8;
+  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
+  border-left: 1px solid rgba(120, 140, 180, 0.3);
+}
+
+.status-tag--pending {
+  background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
+  color: #c8a84e;
+  border-bottom: 1px solid rgba(200, 168, 78, 0.3);
+  border-left: 1px solid rgba(200, 168, 78, 0.3);
+}
+
+/* ── market panel smaller status tag ── */
+.market-status-tag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 5;
+  font-size: 10px;
+  font-weight: 800;
+  padding: 3px 10px;
+  border-radius: 0 4px 0 8px;
+  line-height: 1.3;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.market-status-tag--settled {
+  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
+  color: #8a9ab8;
+  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
+  border-left: 1px solid rgba(120, 140, 180, 0.3);
+}
+
+.market-status-tag--pending {
+  background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
+  color: #c8a84e;
+  border-bottom: 1px solid rgba(200, 168, 78, 0.3);
+  border-left: 1px solid rgba(200, 168, 78, 0.3);
+}
+
+.market-status-tag--suspended {
+  background: linear-gradient(180deg, rgba(240, 180, 41, 0.28) 0%, rgba(120, 80, 10, 0.92) 100%);
+  color: #ffe08a;
+  border-bottom: 1px solid rgba(240, 180, 41, 0.45);
+  border-left: 1px solid rgba(240, 180, 41, 0.45);
+}
+
+.market-status-tag--closed {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(40, 40, 55, 0.95) 100%);
+  color: #8a9ab8;
+  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
+  border-left: 1px solid rgba(120, 140, 180, 0.3);
+}
+
+.market-panel-wrap {
+  position: relative;
+  overflow: hidden;
+}
+
+.market-panel-wrap.locked {
+  opacity: 0.82;
+}
+
+.kickoff {
+  position: relative;
+  z-index: 1;
+  font-size: 11px;
+  color: var(--text-muted);
+  text-align: left;
+  margin-top: 10px;
+  padding-left: 2px;
+}
+
+.live-score {
+  position: relative;
+  z-index: 2;
+  margin: 8px 0 0;
+  font-size: 28px;
+  font-weight: 900;
+  color: #fff;
+  text-align: center;
+  letter-spacing: 0.06em;
+}
+
+.result-stats-section {
+  margin: 0 10px 12px;
+  padding: 12px;
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  border-radius: 8px;
+  background: linear-gradient(180deg, #1b1b1b 0%, #121212 100%);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
+}
+
+.result-stats-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.result-stats-head h3 {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.2;
+  font-weight: 900;
+  color: var(--primary-light);
+}
+
+.result-stats-head span {
+  min-width: 0;
+  max-width: 58%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.result-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.result-stat-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 38px;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.035);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.result-stat-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.result-stat-value {
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 900;
+  color: #fff;
+}
+
+.hero-teams {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.hero-team {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.hero-name {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  text-align: center;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* VS arena — same as HomeView */
+.vs-arena {
+  position: relative;
+  flex-shrink: 0;
+  width: 140px;
+  height: 126px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hz-lightning {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.hz-path {
+  fill: none;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
+  opacity: 0;
+}
+
+.hz-path-main {
+  animation: hz-strike-main 2.6s ease-in-out infinite;
+}
+
+.hz-path-sub {
+  stroke-width: 1.6;
+  animation: hz-strike-sub 2.6s ease-in-out infinite;
+  animation-delay: 0.12s;
+}
+
+.hz-beam {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 1;
+  background: linear-gradient(
+    90deg,
+    rgba(94, 184, 255, 0) 0%,
+    rgba(184, 236, 255, 0.95) 28%,
+    #fff 50%,
+    rgba(255, 208, 128, 0.95) 72%,
+    rgba(255, 144, 64, 0) 100%
+  );
+  opacity: 0;
+  filter: blur(0.4px);
+  animation: hz-beam-flash 2.6s ease-in-out infinite;
+}
+
+.vs-img {
+  position: relative;
+  z-index: 0;
+  width: 126px;
+  height: auto;
+  object-fit: contain;
+}
+
+@keyframes hz-strike-main {
+  0%, 72%, 100% { opacity: 0; }
+  74% { opacity: 1; }
+  75% { opacity: 0.25; }
+  76% { opacity: 0.95; }
+  78% { opacity: 0; }
+}
+
+@keyframes hz-strike-sub {
+  0%, 74%, 100% { opacity: 0; }
+  76% { opacity: 0.85; }
+  77% { opacity: 0.2; }
+  78% { opacity: 0.7; }
+  80% { opacity: 0; }
+}
+
+@keyframes hz-beam-flash {
+  0%, 71%, 100% { opacity: 0; transform: translateY(-50%) scaleX(0.6); }
+  73% { opacity: 0.85; transform: translateY(-50%) scaleX(1); }
+  75% { opacity: 0.15; transform: translateY(-50%) scaleX(0.95); }
+  76% { opacity: 0.75; transform: translateY(-50%) scaleX(1); }
+  78% { opacity: 0; transform: translateY(-50%) scaleX(1.05); }
+}
+
+@keyframes vs-glow {
+  0%, 100% {
+    opacity: 0.82;
+    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
+  }
+  50% {
+    opacity: 1;
+    filter: drop-shadow(0 0 3px rgba(255, 230, 140, 0.7)) drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-path, .hz-beam { animation: none; opacity: 0; }
+}
+
+.markets-section {
+  padding: 0 10px 8px;
+}
+
+.market-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 0;
+}
+
+.market-group {
+  border-radius: 8px;
+  border: 1px solid #252525;
+  background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.market-group.open {
+  border-color: rgba(212, 175, 55, 0.25);
+  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.08);
+}
+
+.market-group :deep(.row) {
+  border-radius: 8px;
+}
+
+.market-group.open :deep(.row) {
+  border-radius: 0;
+}
+
+.market-foot-btn {
+  display: block;
+  width: calc(100% - 16px);
+  margin: 0 8px 10px;
+  padding: 9px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.1);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.state {
+  text-align: center;
+  padding: 48px;
+  color: var(--text-muted);
+}
+
+.cs-toast {
+  text-align: center;
+  font-size: 12px;
+  color: var(--primary-light);
+  padding: 2px 0 6px;
+}
+
+/* ── 我的投注 ── */
+.my-bets-section {
+  padding: 0 12px;
+  margin-bottom: 12px;
+}
+
+.my-bets-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #ccc;
+  margin: 0 0 8px;
+}
+
+.my-bets-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.my-bet-card {
+  background: #1c1c1c;
+  border: 1px solid #2e2e2e;
+  border-radius: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.my-bet-card:active {
+  background: #252525;
+}
+
+.bet-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.bet-type {
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.bet-status {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.bet-status-won {
+  background: rgba(61, 184, 101, 0.15);
+  color: #3db865;
+}
+
+.bet-status-lost {
+  background: rgba(224, 80, 80, 0.15);
+  color: #e05050;
+}
+
+.bet-status-pending {
+  background: rgba(232, 200, 74, 0.15);
+  color: #e8c84a;
+}
+
+.bet-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bet-stake {
+  font-size: 11px;
+  color: #888;
+}
+
+.bet-return {
+  font-size: 13px;
+  font-weight: 800;
+}
+
+</style>
diff --git a/apps/player/src/views/MobileMessageDetailView.vue b/apps/player/src/views/MobileMessageDetailView.vue
new file mode 100644
index 0000000..8035418
--- /dev/null
+++ b/apps/player/src/views/MobileMessageDetailView.vue
@@ -0,0 +1,454 @@
+<script setup lang="ts">
+import { computed, onActivated, onMounted, ref, watch } from 'vue';
+
+const props = defineProps<{ embedded?: boolean; id?: string }>();
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { formatLocalMatchDateTime } from '@thebet365/shared';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import ConfirmDialog from '../components/ConfirmDialog.vue';
+import { sanitizeAnnouncementHtml } from '../utils/html';
+import { formatMoney } from '../utils/localeDisplay';
+import {
+  usePlayerMessages,
+  type DepositMessagePayload,
+  type BannerPromoPayload,
+  type PlayerMessage,
+} from '../composables/usePlayerMessages';
+import { useInboxFeature } from '../composables/useInboxFeature';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+const { loadMessageDetail, markMessageRead, deleteMessage } = usePlayerMessages();
+const { hubRoute } = useInboxFeature();
+const emit = defineEmits<{ (e: 'back'): void }>();
+
+const messageId = computed(() => props.id || String(route.params.id ?? ''));
+const message = ref<PlayerMessage | null>(null);
+const loading = ref(false);
+const error = ref(false);
+const deleting = ref(false);
+const deleteConfirmVisible = ref(false);
+
+const depositPayload = computed(() => {
+  if (
+    !message.value ||
+    message.value.type === 'BANNER_PROMO' ||
+    message.value.type === 'ANNOUNCEMENT_PROMO'
+  ) {
+    return null;
+  }
+  return (message.value.payload ?? null) as DepositMessagePayload | null;
+});
+const contentPromoId = computed(() => {
+  if (
+    message.value?.type !== 'BANNER_PROMO' &&
+    message.value?.type !== 'ANNOUNCEMENT_PROMO'
+  ) {
+    return undefined;
+  }
+  return (message.value.payload as BannerPromoPayload | null)?.contentId;
+});
+
+function goBack() {
+  if (props.embedded) {
+    emit('back');
+  } else {
+    router.back();
+  }
+}
+
+function goList() {
+  router.push(hubRoute.value);
+}
+
+function viewContentPromo() {
+  if (!contentPromoId.value) return;
+  router.push(`/announcements/${contentPromoId.value}`);
+}
+
+function formatDate(createdAt?: string) {
+  if (!createdAt) return '';
+  return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'full' });
+}
+
+function messageTitle(item: PlayerMessage) {
+  if (item.type === 'DEPOSIT_APPROVED') return t('messages.deposit_approved_title');
+  if (item.type === 'DEPOSIT_REJECTED') return t('messages.deposit_rejected_title');
+  if (item.type === 'BANNER_PROMO' || item.type === 'ANNOUNCEMENT_PROMO') return item.title;
+  return item.title;
+}
+
+function messageBody(item: PlayerMessage) {
+  const deposit = depositPayload.value;
+  if (item.type === 'DEPOSIT_APPROVED' && deposit?.orderNo) {
+    return t('messages.deposit_approved_body', {
+      orderNo: deposit.orderNo,
+      amount: formatMoney(deposit.amount ?? '0', locale.value),
+      approvedAmount: formatMoney(
+        deposit.approvedAmount ?? deposit.amount ?? '0',
+        locale.value,
+      ),
+    });
+  }
+  if (item.type === 'DEPOSIT_REJECTED' && deposit?.orderNo) {
+    return t('messages.deposit_rejected_body', {
+      orderNo: deposit.orderNo,
+      amount: formatMoney(deposit.amount ?? '0', locale.value),
+      reason: deposit.rejectReason?.trim() || t('messages.no_reason'),
+    });
+  }
+  return item.body;
+}
+
+async function fetchDetail() {
+  if (!messageId.value) return;
+  loading.value = true;
+  error.value = false;
+  try {
+    message.value = await loadMessageDetail(messageId.value);
+    if (message.value && !message.value.isRead) {
+      await markMessageRead(messageId.value);
+      message.value = { ...message.value, isRead: true };
+    }
+  } catch {
+    error.value = true;
+    message.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function onDelete() {
+  if (!messageId.value || deleting.value) return;
+  deleteConfirmVisible.value = true;
+}
+
+async function confirmDelete() {
+  if (!messageId.value || deleting.value) return;
+  deleting.value = true;
+  try {
+    await deleteMessage(messageId.value);
+    deleteConfirmVisible.value = false;
+    if (props.embedded) {
+      emit('back');
+    } else {
+      router.replace(hubRoute.value);
+    }
+  } finally {
+    deleting.value = false;
+  }
+}
+
+onMounted(() => {
+  void fetchDetail();
+});
+
+onActivated(() => {
+  void fetchDetail();
+});
+
+watch(messageId, () => {
+  void fetchDetail();
+});
+</script>
+
+<template>
+  <div class="message-detail" :class="{ 'message-detail--embedded': embedded }">
+    <header v-if="!embedded" class="page-header">
+      <button type="button" class="back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
+      <h1>{{ t('messages.detail_title') }}</h1>
+      <button
+        v-if="message"
+        type="button"
+        class="delete-header-btn"
+        :aria-label="t('messages.delete')"
+        :disabled="deleting"
+        @click="onDelete"
+      >
+        {{ t('messages.delete') }}
+      </button>
+    </header>
+    <div v-else-if="message" class="embedded-actions">
+      <button type="button" class="back-btn embedded-back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
+      <h1 class="embedded-title">{{ t('messages.detail_title') }}</h1>
+      <button
+        type="button"
+        class="delete-header-btn"
+        :aria-label="t('messages.delete')"
+        :disabled="deleting"
+        @click="onDelete"
+      >
+        {{ t('messages.delete') }}
+      </button>
+    </div>
+
+    <div v-if="loading && !message" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+
+    <div v-else-if="error || !message" class="empty">
+      <p>{{ t('messages.not_found') }}</p>
+      <button type="button" class="link-btn" @click="goList">{{ t('messages.view_all') }}</button>
+    </div>
+
+    <article v-else class="detail-article">
+      <span class="status-badge" :class="{ unread: !message.isRead }">
+        {{ message.isRead ? t('messages.status_read') : t('messages.status_unread') }}
+      </span>
+      <p v-if="message.createdAt" class="detail-date">{{ formatDate(message.createdAt) }}</p>
+      <h2 class="detail-title">{{ messageTitle(message) }}</h2>
+      <div
+        v-if="message.type === 'ADMIN_CUSTOM'"
+        class="detail-body rich-body"
+        v-html="sanitizeAnnouncementHtml(message.body)"
+      />
+      <p v-else class="detail-body">{{ messageBody(message) }}</p>
+
+      <div
+        v-if="message.type === 'DEPOSIT_REJECTED' && depositPayload?.rejectReason?.trim()"
+        class="reason-box"
+      >
+        <p class="reason-label">{{ t('messages.reject_reason') }}</p>
+        <p class="reason-text">{{ depositPayload.rejectReason }}</p>
+      </div>
+
+      <button
+        v-if="contentPromoId"
+        type="button"
+        class="action-btn"
+        @click="viewContentPromo"
+      >
+        {{ t('messages.content_promo_view') }}
+      </button>
+
+      <button
+        v-if="depositPayload?.depositOrderId"
+        type="button"
+        class="action-btn"
+        @click="router.push('/wallet/recharge/history')"
+      >
+        {{ t('messages.view_recharge_history') }}
+      </button>
+    </article>
+
+    <ConfirmDialog
+      v-model:visible="deleteConfirmVisible"
+      :title="t('messages.delete')"
+      :message="t('messages.delete_confirm')"
+      :confirm-text="t('messages.delete')"
+      danger
+      :loading="deleting"
+      @confirm="confirmDelete"
+    />
+  </div>
+</template>
+
+<style scoped>
+.message-detail {
+  min-height: 100%;
+  padding: 0 0 24px;
+}
+
+.message-detail--embedded {
+  padding: 0 24px 24px;
+  min-height: 0;
+}
+
+.embedded-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 0 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.embedded-title {
+  margin: 0;
+  flex: 1;
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 0 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.back-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #141414;
+  color: var(--text-muted);
+  font-size: 20px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s, background 0.2s;
+}
+
+.back-btn:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.embedded-back-btn {
+  border: none;
+  background: transparent;
+  width: 28px;
+  height: 28px;
+  margin-right: -4px;
+}
+
+.page-header h1 {
+  margin: 0;
+  flex: 1;
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.delete-header-btn {
+  border: 1px solid rgba(255, 80, 80, 0.35);
+  border-radius: 8px;
+  padding: 6px 10px;
+  background: rgba(255, 80, 80, 0.08);
+  color: #f88;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.delete-header-btn:disabled {
+  opacity: 0.45;
+}
+
+.status-badge {
+  display: inline-block;
+  margin-bottom: 8px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #888;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.status-badge.unread {
+  color: var(--gold);
+  background: rgba(212, 175, 55, 0.12);
+}
+
+.state,
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px 16px;
+  color: var(--text-muted);
+}
+
+.link-btn {
+  border: 1px solid var(--border-gold-soft);
+  border-radius: 8px;
+  padding: 8px 14px;
+  background: rgba(212, 175, 55, 0.1);
+  color: var(--gold);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.detail-article {
+  padding: 18px 0 0;
+}
+
+.detail-date {
+  margin: 0 0 10px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.detail-title {
+  margin: 0 0 12px;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.45;
+  color: #fff;
+}
+
+.detail-body {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.75;
+  color: #d0d0d0;
+}
+
+.rich-body :deep(p) {
+  margin: 0 0 12px;
+}
+
+.rich-body :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.rich-body :deep(img) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 12px 0;
+  border-radius: 8px;
+}
+
+.rich-body :deep(ul),
+.rich-body :deep(ol) {
+  margin: 0 0 12px;
+  padding-left: 20px;
+}
+
+.rich-body :deep(a) {
+  color: var(--gold);
+}
+
+.reason-box {
+  margin-top: 18px;
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 107, 107, 0.25);
+  background: rgba(255, 107, 107, 0.08);
+}
+
+.reason-label {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: #ffb4b4;
+  font-weight: 700;
+}
+
+.reason-text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: #ffe0e0;
+}
+
+.action-btn {
+  margin-top: 24px;
+  width: 100%;
+  padding: 11px 14px;
+  border: 1px solid var(--border-gold-soft);
+  border-radius: 8px;
+  background: rgba(212, 175, 55, 0.1);
+  color: var(--gold);
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+</style>
diff --git a/apps/player/src/views/MobileMyBetsView.vue b/apps/player/src/views/MobileMyBetsView.vue
new file mode 100644
index 0000000..40bf2c6
--- /dev/null
+++ b/apps/player/src/views/MobileMyBetsView.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { ref, onActivated, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
+import BetStatsPanel from '../components/BetStatsPanel.vue';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+
+const { t } = useI18n();
+
+const items = ref<BetHistoryItem[]>([]);
+const total = ref(0);
+const page = ref(1);
+const loading = ref(false);
+const initialLoading = ref(true);
+const hasMore = ref(true);
+const statusFilter = ref('');
+
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+const STATUS_FILTERS = [
+  { key: '', label: 'history.filter_all' },
+  { key: 'WON', label: 'history.filter_won' },
+  { key: 'LOST', label: 'history.filter_lost' },
+  { key: 'PENDING', label: 'history.filter_pending' },
+] as const;
+
+const PUSH_FILTER = { key: 'PUSH', label: 'history.filter_push' } as const;
+
+async function loadPage(p: number) {
+  if (loading.value) return;
+  loading.value = true;
+  try {
+    const params: Record<string, unknown> = { page: p };
+    if (statusFilter.value) params.status = statusFilter.value;
+    const { data } = await api.get('/player/bets', { params });
+    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
+    total.value = result.total ?? 0;
+    const pageSize = result.pageSize ?? 20;
+    if (p === 1) {
+      items.value = result.items ?? [];
+    } else {
+      items.value = [...items.value, ...(result.items ?? [])];
+    }
+    hasMore.value = items.value.length < total.value && (result.items?.length ?? 0) >= pageSize;
+    page.value = p;
+  } finally {
+    loading.value = false;
+    initialLoading.value = false;
+  }
+}
+
+async function reset() {
+  items.value = [];
+  total.value = 0;
+  page.value = 1;
+  hasMore.value = true;
+  initialLoading.value = true;
+  loadPage(1);
+}
+
+function changeFilter(key: string) {
+  if (statusFilter.value === key) return;
+  statusFilter.value = key;
+  reset();
+}
+
+useOnLocaleChange(reset);
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadPage(1); },
+});
+
+onActivated(() => { void loadPage(1); });
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
+        loadPage(page.value + 1);
+      }
+    },
+    { rootMargin: '200px' },
+  );
+  if (sentinel.value) observer.observe(sentinel.value);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+</script>
+
+<template>
+  <div class="history-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <div v-if="initialLoading" class="state">
+      <GoldSpinner :size="36" />
+      <span class="loading-text">{{ t('bet.loading') }}</span>
+    </div>
+
+    <template v-else>
+      <BetStatsPanel :items="items" />
+
+      <div class="filter-tabs">
+        <button
+          v-for="f in STATUS_FILTERS"
+          :key="f.key"
+          type="button"
+          class="filter-tab"
+          :class="{ active: statusFilter === f.key }"
+          @click="changeFilter(f.key)"
+        >
+          {{ t(f.label) }}
+        </button>
+        <span class="filter-divider" aria-hidden="true" />
+        <button
+          type="button"
+          class="filter-tab filter-tab--push"
+          :class="{ active: statusFilter === PUSH_FILTER.key }"
+          :title="t('history.filter_push_hint')"
+          @click="changeFilter(PUSH_FILTER.key)"
+        >
+          {{ t(PUSH_FILTER.label) }}
+        </button>
+      </div>
+
+      <template v-if="items.length">
+        <BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
+
+        <div ref="sentinel" class="sentinel" />
+
+        <div v-if="loading" class="load-more-spinner">
+          <GoldSpinner :size="24" />
+        </div>
+
+        <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+          {{ t('common.no_more') }}
+        </div>
+      </template>
+
+      <div v-else class="state">{{ t('history.empty') }}</div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.history-page {
+  padding-bottom: 24px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  align-items: center;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.filter-divider {
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.14);
+  flex-shrink: 0;
+  margin: 0 2px;
+}
+
+.filter-tab--push {
+  border-style: dashed;
+}
+
+.filter-tabs::-webkit-scrollbar { display: none; }
+
+.filter-tab {
+  flex-shrink: 0;
+  padding: 7px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  transition: all 0.2s;
+}
+
+.filter-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--text-muted);
+  padding: 56px 20px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.loading-text {
+  font-size: 13px;
+}
+
+.sentinel {
+  height: 1px;
+}
+
+.load-more-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0 8px;
+}
+
+.end-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #555;
+  font-weight: 600;
+  padding: 16px 0 4px;
+  letter-spacing: 0.03em;
+}
+</style>
diff --git a/apps/player/src/views/MobileOutrightDetailView.vue b/apps/player/src/views/MobileOutrightDetailView.vue
new file mode 100644
index 0000000..8e55099
--- /dev/null
+++ b/apps/player/src/views/MobileOutrightDetailView.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useOutrightEvents } from '../composables/useOutrightEvents';
+import type { OutrightSelection } from '../components/outright/OutrightEventSection.vue';
+import OutrightOptionCard from '../components/outright/OutrightOptionCard.vue';
+import OutrightBetModal, { type OutrightPick } from '../components/outright/OutrightBetModal.vue';
+import { useAuthStore } from '../stores/auth';
+import GoldSpinner from '../components/GoldSpinner.vue';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const auth = useAuthStore();
+const { loading, loadError, events, load } = useOutrightEvents();
+
+const modalOpen = ref(false);
+const activePick = ref<OutrightPick | null>(null);
+
+const event = computed(() => events.value.find((e) => e.id === String(route.params.id)) ?? null);
+
+const headTitle = computed(() => {
+  if (!event.value) return '';
+  const raw = event.value.title.replace(/^\*+/, '').trim();
+  return raw || event.value.leagueName || t('bet.tab_outright');
+});
+
+const isSettled = computed(
+  () => event.value?.bettingOpen === false || event.value?.status === 'SETTLED',
+);
+
+function goBack() {
+  router.push({ path: '/bet', query: { tab: 'outright' } });
+}
+
+function openBet(sel: OutrightSelection) {
+  if (!event.value || isSettled.value) return;
+  if (!auth.token) {
+    auth.showLoginPrompt(route.fullPath);
+    return;
+  }
+  activePick.value = {
+    selectionId: sel.id,
+    oddsVersion: sel.oddsVersion,
+    teamCode: sel.teamCode,
+    teamName: sel.teamName,
+    odds: sel.odds,
+    eventTitle: event.value.title,
+  };
+  modalOpen.value = true;
+}
+
+function closeModal() {
+  modalOpen.value = false;
+  activePick.value = null;
+}
+
+let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+watch(
+  () => event.value?.id,
+  (id) => {
+    if (pollTimer) clearInterval(pollTimer);
+    if (id) {
+      pollTimer = setInterval(() => void load({ silent: true }), 15000);
+    }
+  },
+);
+
+onMounted(() => {
+  if (event.value) {
+    pollTimer = setInterval(() => void load({ silent: true }), 15000);
+  }
+});
+
+onUnmounted(() => {
+  if (pollTimer) clearInterval(pollTimer);
+});
+</script>
+
+<template>
+  <div class="mobile-outright-detail">
+    <header class="top-bar">
+      <button type="button" class="back-btn" @click="goBack">← {{ t('bet.back') }}</button>
+      <h1>{{ headTitle || t('bet.tab_outright') }}</h1>
+    </header>
+
+    <div v-if="loading && !event" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+
+    <template v-else-if="event">
+      <p v-if="isSettled" class="settled-hint">{{ t('bet.outright_settled_hint') }}</p>
+      <div class="teams-grid">
+        <OutrightOptionCard
+          v-for="sel in event.selections"
+          :key="sel.id"
+          :team-code="sel.teamCode"
+          :team-name="sel.teamName"
+          :logo-url="sel.logoUrl"
+          :odds="sel.odds"
+          :disabled="isSettled"
+          :is-winner="Boolean(sel.isWinner)"
+          @pick="openBet(sel)"
+        />
+      </div>
+    </template>
+
+    <div v-else class="state">
+      <p>{{ loadError || t('bet.no_outright') }}</p>
+    </div>
+
+    <OutrightBetModal :open="modalOpen" :pick="activePick" @close="closeModal" />
+  </div>
+</template>
+
+<style scoped>
+.mobile-outright-detail {
+  padding: 12px;
+}
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.top-bar h1 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.back-btn {
+  background: transparent;
+  color: var(--primary-light);
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.settled-hint {
+  margin: 0 0 12px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(201, 162, 39, 0.08);
+  border: 1px solid rgba(201, 162, 39, 0.22);
+  font-size: 12px;
+  font-weight: 600;
+  color: #c9a227;
+}
+
+.teams-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.state {
+  text-align: center;
+  padding: 40px 16px;
+  color: var(--text-muted);
+}
+</style>
diff --git a/apps/player/src/views/MobileProfileEditView.vue b/apps/player/src/views/MobileProfileEditView.vue
new file mode 100644
index 0000000..4b98dbc
--- /dev/null
+++ b/apps/player/src/views/MobileProfileEditView.vue
@@ -0,0 +1,564 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
+import api from '../api';
+import PlayerAvatarModal from '../components/PlayerAvatarModal.vue';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePlayerProfile } from '../composables/usePlayerProfile';
+import { useAuthStore } from '../stores/auth';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+
+const { t } = useI18n();
+const router = useRouter();
+const auth = useAuthStore();
+const { loadProfile, setAvatarKey, profileRaw, avatarUrl, avatarKey } = usePlayerProfile();
+
+const username = ref('');
+const viewablePassword = ref('');
+const passwordVisible = ref(false);
+const phone = ref('');
+const email = ref('');
+const avatarModalOpen = ref(false);
+const passwordChangeOpen = ref(false);
+const oldPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const message = ref('');
+const error = ref('');
+const saving = ref(false);
+
+const allowPasswordChange = computed(
+  () => profileRaw.value?.preferences?.allowPasswordChange ?? true,
+);
+const allowUsernameChange = computed(
+  () => profileRaw.value?.preferences?.allowUsernameChange ?? false,
+);
+
+const passwordDisplay = computed(() => viewablePassword.value || '');
+const canTogglePassword = computed(() => !!viewablePassword.value);
+const passwordInputType = computed(() =>
+  passwordVisible.value && canTogglePassword.value ? 'text' : 'password',
+);
+
+const displayAvatarUrl = computed(() => {
+  if (avatarUrl.value) return avatarUrl.value;
+  const seed = profileRaw.value?.username ?? auth.user?.username;
+  return seed ? playerAvatarUrl(randomAvatarKey(seed)) : null;
+});
+
+function syncFromProfile() {
+  const user = profileRaw.value;
+  username.value = user?.username ?? auth.user?.username ?? '';
+  viewablePassword.value = user?.preferences?.viewablePassword ?? '';
+  phone.value = user?.preferences?.phone ?? '';
+  email.value = user?.preferences?.email ?? '';
+}
+
+function togglePasswordVisible() {
+  if (!canTogglePassword.value) return;
+  passwordVisible.value = !passwordVisible.value;
+}
+
+async function loadEditData() {
+  await loadProfile(true);
+  syncFromProfile();
+}
+
+onMounted(loadEditData);
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: loadEditData,
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
+function openAvatarModal() {
+  avatarModalOpen.value = true;
+}
+
+async function confirmAvatar(key: string | null) {
+  avatarModalOpen.value = false;
+  try {
+    await api.patch('/player/profile', { avatarKey: key });
+    setAvatarKey(key);
+  } catch (e: unknown) {
+    setAvatarKey(key);
+    error.value =
+      (e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+      t('profile.save_failed');
+  }
+}
+
+function wantsPasswordChange() {
+  return !!(oldPassword.value || newPassword.value || confirmPassword.value);
+}
+
+async function saveAll() {
+  error.value = '';
+  message.value = '';
+
+  if (wantsPasswordChange()) {
+    if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
+      error.value = t('profile.password_incomplete');
+      return;
+    }
+    if (newPassword.value !== confirmPassword.value) {
+      error.value = t('profile.password_mismatch');
+      return;
+    }
+  }
+
+  saving.value = true;
+  const parts: string[] = [];
+
+  try {
+    const profilePayload: { phone?: string; email?: string; username?: string } = {
+      phone: phone.value.trim() || undefined,
+      email: email.value.trim() || undefined,
+    };
+    if (allowUsernameChange.value) {
+      profilePayload.username = username.value.trim();
+    }
+    await api.patch('/player/profile', profilePayload);
+    if (allowUsernameChange.value && username.value.trim() && auth.user) {
+      auth.user.username = username.value.trim();
+    }
+    parts.push(t('profile.saved'));
+    if (allowUsernameChange.value && profilePayload.username) {
+      parts.push(t('profile.username_updated'));
+    }
+  } catch (e: unknown) {
+    error.value =
+      (e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+      t('profile.save_failed');
+    saving.value = false;
+    return;
+  }
+
+  if (wantsPasswordChange()) {
+    if (!allowPasswordChange.value) {
+      error.value = t('profile.password_disabled');
+      saving.value = false;
+      return;
+    }
+    try {
+      await api.post('/player/auth/change-password', {
+        oldPassword: oldPassword.value,
+        newPassword: newPassword.value,
+      });
+      viewablePassword.value = newPassword.value;
+      passwordVisible.value = false;
+      oldPassword.value = '';
+      newPassword.value = '';
+      confirmPassword.value = '';
+      passwordChangeOpen.value = false;
+      parts.push(t('profile.password_changed'));
+    } catch (e: unknown) {
+      error.value =
+        (e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+        t('profile.password_failed');
+      saving.value = false;
+      return;
+    }
+  }
+
+  message.value = parts.join(' · ');
+  saving.value = false;
+}
+
+function back() {
+  router.push('/profile');
+}
+</script>
+
+<template>
+  <div class="edit-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <header class="page-head">
+      <button type="button" class="back-btn" @click="back">← {{ t('profile.back') }}</button>
+      <h2 class="page-title">{{ t('profile.edit') }}</h2>
+    </header>
+
+    <section class="avatar-card">
+      <div class="avatar-circle">
+        <img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="avatar-img" />
+      </div>
+      <button type="button" class="avatar-change-btn" @click="openAvatarModal">
+        {{ t('profile.avatar_change') }}
+      </button>
+    </section>
+
+    <form class="form-card" @submit.prevent="saveAll">
+      <h3 class="section-title">{{ t('profile.section_account') }}</h3>
+
+      <div class="field">
+        <label>{{ t('auth.username') }}</label>
+        <input
+          v-model="username"
+          class="field-input"
+          :class="{ readonly: !allowUsernameChange }"
+          :disabled="!allowUsernameChange"
+          :placeholder="t('profile.username_placeholder')"
+        />
+        <p v-if="!allowUsernameChange" class="field-hint inline-hint">{{ t('profile.username_readonly_hint') }}</p>
+      </div>
+
+      <div class="field">
+        <label>{{ t('auth.password') }}</label>
+        <div class="input-eye-wrap">
+          <input
+            :type="passwordInputType"
+            :value="passwordDisplay"
+            class="field-input input-with-eye"
+            readonly
+            :placeholder="canTogglePassword ? '' : t('profile.password_unavailable')"
+          />
+          <button
+            type="button"
+            class="eye-btn"
+            :disabled="!canTogglePassword"
+            :aria-label="passwordVisible ? t('profile.hide_password') : t('profile.show_password')"
+            @click="togglePasswordVisible"
+          >
+            {{ passwordVisible ? t('profile.hide_password') : t('profile.show_password') }}
+          </button>
+        </div>
+        <p v-if="!canTogglePassword" class="field-hint inline-hint">{{ t('profile.password_unavailable_hint') }}</p>
+      </div>
+
+      <template v-if="allowPasswordChange">
+        <button type="button" class="section-toggle compact-toggle" @click="passwordChangeOpen = !passwordChangeOpen">
+          <span>{{ t('profile.change_password') }}</span>
+          <span class="chevron" :class="{ open: passwordChangeOpen }">›</span>
+        </button>
+        <div v-show="passwordChangeOpen" class="password-block">
+          <div class="field">
+            <label>{{ t('profile.old_password') }}</label>
+            <input
+              v-model="oldPassword"
+              type="password"
+              class="field-input"
+              autocomplete="current-password"
+              :placeholder="t('profile.old_password_placeholder')"
+            />
+          </div>
+          <div class="field">
+            <label>{{ t('profile.new_password') }}</label>
+            <input
+              v-model="newPassword"
+              type="password"
+              class="field-input"
+              autocomplete="new-password"
+              :placeholder="t('profile.new_password_placeholder')"
+            />
+          </div>
+          <div class="field">
+            <label>{{ t('profile.confirm_password') }}</label>
+            <input
+              v-model="confirmPassword"
+              type="password"
+              class="field-input"
+              autocomplete="new-password"
+              :placeholder="t('profile.confirm_password_placeholder')"
+            />
+          </div>
+        </div>
+      </template>
+
+      <div class="section-divider" />
+
+      <h3 class="section-title">{{ t('profile.section_contact') }}</h3>
+
+      <div class="field">
+        <label>{{ t('profile.phone') }}</label>
+        <input v-model="phone" type="tel" class="field-input" :placeholder="t('profile.phone_placeholder')" />
+      </div>
+      <div class="field field-last">
+        <label>{{ t('profile.email') }}</label>
+        <input v-model="email" type="email" class="field-input" :placeholder="t('profile.email_placeholder')" />
+      </div>
+
+      <button type="submit" class="btn-action btn-gold-outline" :disabled="saving">
+        {{ t('profile.save') }}
+      </button>
+    </form>
+
+    <PlayerAvatarModal
+      :open="avatarModalOpen"
+      :model-value="avatarKey"
+      @close="avatarModalOpen = false"
+      @confirm="confirmAvatar"
+    />
+
+    <p v-if="message" class="msg ok">{{ message }}</p>
+    <p v-if="error" class="msg err">{{ error }}</p>
+  </div>
+</template>
+
+<style scoped>
+.edit-page {
+  padding: 8px 0 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.page-head {
+  margin-bottom: 0;
+}
+
+.back-btn {
+  background: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  padding: 0;
+}
+
+.page-title {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--primary-light);
+  letter-spacing: 0.04em;
+}
+
+.avatar-card,
+.form-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.avatar-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 16px;
+}
+
+.avatar-circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border: 2px solid var(--border-gold-soft);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(145deg, #2a2210, #141008);
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}
+
+.avatar-change-btn {
+  padding: 7px 18px;
+  border-radius: 999px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.08);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.form-card {
+  padding: 16px;
+}
+
+.section-title {
+  margin: 0 0 14px;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.section-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 6px 0 12px;
+}
+
+.section-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0 12px;
+  background: none;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.chevron {
+  color: var(--text-muted);
+  font-size: 20px;
+  line-height: 1;
+  transition: transform 0.15s ease;
+}
+
+.chevron.open {
+  transform: rotate(90deg);
+}
+
+.password-block {
+  padding-bottom: 4px;
+}
+
+.field {
+  margin-bottom: 14px;
+}
+
+.field-last {
+  margin-bottom: 18px;
+}
+
+.field-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin: 6px 0 0;
+  line-height: 1.45;
+}
+
+.inline-hint {
+  margin-bottom: 0;
+}
+
+.input-eye-wrap {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.input-with-eye {
+  padding-right: 52px;
+}
+
+.eye-btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  min-width: 48px;
+  padding: 0 10px;
+  border: none;
+  border-left: 1px solid var(--border);
+  border-radius: 0 6px 6px 0;
+  background: rgba(212, 175, 55, 0.06);
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.eye-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.compact-toggle {
+  padding: 2px 0 10px;
+  font-size: 13px;
+}
+
+label {
+  display: block;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.field-input,
+.readonly {
+  display: block;
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: #0a0a0a;
+  color: var(--text);
+  transition: border-color 0.2s;
+}
+
+.field-input:focus {
+  outline: none;
+  border-color: var(--border-gold-soft);
+  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
+}
+
+.field-input:-webkit-autofill,
+.field-input:-webkit-autofill:hover,
+.field-input:-webkit-autofill:focus {
+  -webkit-text-fill-color: var(--text);
+  box-shadow: 0 0 0 1000px #0a0a0a inset;
+  border: 1px solid var(--border);
+}
+
+.field-input::placeholder {
+  color: #555;
+}
+
+.readonly {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.btn-action {
+  width: 100%;
+  margin-top: 4px;
+  padding: 12px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+.btn-action:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.msg {
+  margin-top: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.msg.ok {
+  color: var(--primary-light);
+}
+
+.msg.err {
+  color: var(--danger);
+}
+</style>
diff --git a/apps/player/src/views/MobileProfileView.vue b/apps/player/src/views/MobileProfileView.vue
new file mode 100644
index 0000000..d4cab80
--- /dev/null
+++ b/apps/player/src/views/MobileProfileView.vue
@@ -0,0 +1,728 @@
+<script setup lang="ts">
+import { ref, onMounted, onActivated, computed } from 'vue';
+import { useRouter, RouterLink } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+import LocaleFlag from '../components/LocaleFlag.vue';
+import { useAuthStore } from '../stores/auth';
+import { useAppLocale } from '../composables/useAppLocale';
+import { usePlayerProfile } from '../composables/usePlayerProfile';
+import { useInboxFeature } from '../composables/useInboxFeature';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
+import walletBg from '../assets/images/wallet-bg.webp';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+const auth = useAuthStore();
+const { locales, setLocale, initFromUser } = useAppLocale();
+const { profileRaw, refreshProfile } = usePlayerProfile();
+const { hubRoute } = useInboxFeature();
+
+const loading = ref(true);
+const error = ref(false);
+const rulesExpanded = ref(false);
+const cashbackTotal = ref('0');
+
+const displayAmount = ref(0);
+const animating = ref(false);
+
+async function fetchProfile() {
+  loading.value = true;
+  error.value = false;
+  try {
+    await refreshProfile();
+    initFromUser(profileRaw.value?.locale);
+    void fetchCashbackTotal();
+  } catch {
+    error.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function fetchCashbackTotal() {
+  try {
+    const { data } = await api.get('/player/cashbacks');
+    cashbackTotal.value = sumCashbackAmount(parseCashbackApiData(data.data)).toString();
+  } catch {
+    // Fallback: sum wallet cashback credits when batch detail API is unavailable.
+    try {
+      const { data } = await api.get('/player/wallet/transactions/stats');
+      const byType = data.data?.byType ?? [];
+      let sum = 0;
+      for (const g of byType) {
+        if (['CASHBACK', 'CASHBACK_DEPOSIT'].includes(g.transactionType?.toUpperCase())) {
+          sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
+        }
+      }
+      cashbackTotal.value = sum.toString();
+    } catch {
+      // Keep default value
+    }
+  }
+}
+
+onMounted(() => {
+  void fetchProfile();
+});
+
+onActivated(() => {
+  void fetchProfile();
+});
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await fetchProfile(); },
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
+async function changeLocale(code: string) {
+  await setLocale(code);
+}
+
+function logout() {
+  auth.logout();
+  router.push('/');
+}
+
+const balanceDisplay = computed(() =>
+  formatMoney(profileRaw.value?.wallet?.availableBalance, locale.value),
+);
+
+const balanceAmountClass = computed(() => {
+  const len = balanceDisplay.value.length;
+  if (len <= 10) return 'balance-amount--xl';
+  if (len <= 13) return 'balance-amount--lg';
+  if (len <= 16) return 'balance-amount--md';
+  if (len <= 19) return 'balance-amount--sm';
+  return 'balance-amount--xs';
+});
+</script>
+
+<template>
+  <div class="profile-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <div v-if="loading" class="loading-state">
+      <GoldSpinner :size="36" :active="true" />
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      <p class="error-text">{{ t('common.load_failed') }}</p>
+      <button type="button" class="retry-btn" @click="fetchProfile">{{ t('common.retry') }}</button>
+    </div>
+
+    <template v-else>
+    <div class="wallet-banner">
+      <img class="wallet-banner-img" :src="walletBg" alt="" />
+      <div class="wallet-banner-scrim" aria-hidden="true" />
+
+      <div class="card-overlay">
+        <div class="bank-card-top">
+          <div class="bank-card-top-left">
+            <img src="/logo.png" alt="TheBet365" class="brand-logo" />
+            <div class="bank-card-brand-text">
+              <span class="brand-name">THEBET365</span>
+              <span class="bank-card-type">MEMBER</span>
+            </div>
+          </div>
+          <RouterLink to="/wallet/recharge" class="recharge-btn">
+            <span class="recharge-icon">+</span>
+            <span>{{ t('recharge.title') }}</span>
+          </RouterLink>
+        </div>
+
+        <div class="bank-card-balance">
+          <span class="bank-card-label">当前余额</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-holder">{{ profileRaw?.username }}</span>
+          </div>
+          <div class="bank-card-field bank-card-field--center">
+            <span class="bank-card-label">累计返水</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-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <section class="settings-group">
+      <RouterLink to="/wallet/detail" class="settings-cell settings-cell--gold-entry">
+        <span class="cell-main">
+          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+            <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 class="cell-label">{{ t('wallet.view_all') }}</span>
+        </span>
+        <span class="cell-chevron" aria-hidden="true">›</span>
+      </RouterLink>
+
+      <RouterLink to="/profile/cashbacks" class="settings-cell settings-cell--gold-entry">
+        <span class="cell-main">
+          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+            <circle cx="12" cy="12" r="8" />
+            <path d="M12 8v4l2.5 2.5" />
+          </svg>
+          <span class="cell-label">{{ t('wallet.view_cashbacks') }}</span>
+        </span>
+        <span class="cell-chevron" aria-hidden="true">›</span>
+      </RouterLink>
+
+      <RouterLink :to="hubRoute" class="settings-cell settings-cell--gold-entry">
+        <span class="cell-main">
+          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+            <path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11A2.5 2.5 0 0 1 17.5 20H6.5A2.5 2.5 0 0 1 4 17.5v-11Z" />
+            <path d="m4 7 8 5.5L20 7" />
+          </svg>
+          <span class="cell-label">{{ t('messages.title') }}</span>
+        </span>
+        <span class="cell-chevron" aria-hidden="true">›</span>
+      </RouterLink>
+
+      <RouterLink to="/wallet/recharge/history" class="settings-cell settings-cell--gold-entry">
+        <span class="cell-main">
+          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+            <path d="M12 8v8M8 12h8" />
+            <circle cx="12" cy="12" r="8" />
+          </svg>
+          <span class="cell-label">{{ t('recharge.history_title') }}</span>
+        </span>
+        <span class="cell-chevron" aria-hidden="true">›</span>
+      </RouterLink>
+
+      <RouterLink to="/profile/edit" class="settings-cell">
+        <span class="cell-main">
+          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+            <circle cx="12" cy="8" r="3.5" />
+            <path d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6" />
+          </svg>
+          <span class="cell-label">{{ t('profile.edit') }}</span>
+        </span>
+        <span class="cell-chevron" aria-hidden="true">›</span>
+      </RouterLink>
+
+      <div class="rules-cell">
+        <button
+          type="button"
+          class="settings-cell rules-toggle"
+          :aria-expanded="rulesExpanded"
+          @click="rulesExpanded = !rulesExpanded"
+        >
+          <span class="cell-main">
+            <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+              <path d="M7 4h10v16H7z" />
+              <path d="M10 8h6M10 12h6M10 16h4" />
+            </svg>
+            <span class="cell-label">{{ t('profile.rules_title') }}</span>
+          </span>
+          <span class="cell-chevron" :class="{ open: rulesExpanded }" aria-hidden="true">›</span>
+        </button>
+        <div v-show="rulesExpanded" class="rules-body">
+          <p>{{ t('profile.rules_p1') }}</p>
+          <p>{{ t('profile.rules_p2') }}</p>
+          <p>{{ t('profile.rules_p3') }}</p>
+          <p>{{ t('profile.rules_p4') }}</p>
+          <p>{{ t('profile.rules_p5') }}</p>
+        </div>
+      </div>
+
+      <div class="settings-cell settings-cell--stack">
+        <div class="cell-head">
+          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M3 12h18M12 3c2.5 2.8 4 6 4 9s-1.5 6.2-4 9M12 3c-2.5 2.8-4 6-4 9s1.5 6.2 4 9" />
+          </svg>
+          <span class="cell-label">{{ t('profile.language') }}</span>
+        </div>
+        <div class="lang-segment" role="group" :aria-label="t('profile.language')">
+          <button
+            v-for="item in locales"
+            :key="item.code"
+            type="button"
+            class="lang-opt"
+            :class="{ active: locale === item.code }"
+            @click="changeLocale(item.code)"
+          >
+            <LocaleFlag :locale="item.code" :size="14" />
+            <span>{{ item.label }}</span>
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <button type="button" class="logout-btn" @click="logout">
+      {{ t('auth.logout') }}
+    </button>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.profile-page {
+  padding: 8px 0 12px;
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+}
+
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 60vh;
+}
+
+.error-text {
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.retry-btn {
+  padding: 8px 24px;
+  border-radius: 6px;
+  border: 1px solid var(--primary);
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.retry-btn:active {
+  background: rgba(200, 168, 78, 0.15);
+}
+
+.wallet-banner {
+  position: relative;
+  width: 100%;
+  margin-bottom: 12px;
+  aspect-ratio: 2 / 1;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow:
+    0 3px 10px rgba(0, 0, 0, 0.28),
+    0 1px 3px rgba(0, 0, 0, 0.18);
+}
+
+.wallet-banner::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.22);
+  pointer-events: none;
+}
+
+.wallet-banner-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center center;
+  transform: scale(1.12);
+  transform-origin: center center;
+  filter: brightness(0.86);
+  pointer-events: none;
+  user-select: none;
+}
+
+.wallet-banner-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.18) 42%,
+    rgba(0, 0, 0, 0.46) 100%
+  );
+}
+
+.card-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  padding: 14px 16px 12px;
+  line-height: 1.3;
+  -webkit-font-smoothing: antialiased;
+}
+
+.bank-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.bank-card-top-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.brand-logo {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
+.bank-card-brand-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.brand-name {
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 0.14em;
+  line-height: 1;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.bank-card-type {
+  font-size: 8px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  color: rgba(212, 175, 55, 0.65);
+  font-style: italic;
+  line-height: 1;
+}
+
+.bank-card-label {
+  display: block;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.82);
+  line-height: 1.3;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
+}
+
+.recharge-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 5px 10px;
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0.45);
+  border: 1px solid rgba(212, 175, 55, 0.35);
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  text-decoration: none;
+  backdrop-filter: blur(6px);
+  transition: background 0.15s ease;
+}
+
+.recharge-btn:active {
+  background: rgba(212, 175, 55, 0.15);
+}
+
+.recharge-icon {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.bank-card-balance {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 0;
+  padding: 2px 0;
+  gap: 5px;
+}
+
+.bank-card-number {
+  margin: 0;
+  font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
+  font-weight: 700;
+  font-style: normal;
+  font-variant-numeric: tabular-nums;
+  color: var(--primary-light);
+  line-height: 1.1;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
+}
+
+.balance-amount {
+  margin: 0;
+}
+
+.balance-amount--xl { font-size: clamp(24px, 6.2vw, 30px); }
+.balance-amount--lg { font-size: clamp(21px, 5.6vw, 26px); }
+.balance-amount--md { font-size: clamp(18px, 4.9vw, 22px); }
+.balance-amount--sm { font-size: clamp(16px, 4.2vw, 19px); }
+.balance-amount--xs { font-size: clamp(14px, 3.6vw, 16px); }
+
+.bank-card-footer {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.bank-card-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.bank-card-field--center { text-align: center; }
+.bank-card-field--right { text-align: right; }
+
+.bank-card-holder {
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1.2;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+  word-break: break-all;
+}
+
+.bank-card-stat {
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: #fff;
+  line-height: 1.2;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+}
+
+
+.settings-group {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.settings-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 16px;
+  background: none;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  border-bottom: 1px solid var(--border);
+}
+
+.settings-cell:last-child {
+  border-bottom: none;
+}
+
+.settings-cell:active {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.settings-cell--gold-entry {
+  position: relative;
+  min-height: 50px;
+  border-color: rgba(212, 175, 55, 0.18);
+  border-bottom-color: rgba(212, 175, 55, 0.18);
+  background:
+    linear-gradient(90deg, rgba(212, 175, 55, 0.08), rgba(20, 20, 20, 0.65) 46%, rgba(212, 175, 55, 0.04));
+  box-shadow:
+    inset 1px 0 0 rgba(212, 175, 55, 0.22),
+    inset 0 1px 0 rgba(255, 244, 200, 0.05);
+}
+
+.settings-cell--gold-entry:active {
+  background:
+    linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(20, 20, 20, 0.74) 46%, rgba(212, 175, 55, 0.06));
+}
+
+.settings-cell--gold-entry .cell-label {
+  color: #f4dc8b;
+  font-weight: 800;
+}
+
+.settings-cell--gold-entry .cell-chevron {
+  color: rgba(240, 216, 117, 0.78);
+}
+
+.settings-cell--stack {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 16px 14px;
+  min-height: auto;
+}
+
+.cell-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.cell-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.settings-cell--gold-entry .cell-icon {
+  color: var(--primary-light);
+}
+
+.cell-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cell-label {
+  color: var(--text);
+}
+
+.cell-chevron {
+  color: var(--text-muted);
+  font-size: 20px;
+  line-height: 1;
+  font-weight: 300;
+  transition: transform 0.15s ease;
+}
+
+.cell-chevron.open {
+  transform: rotate(90deg);
+}
+
+.rules-toggle {
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.rules-cell .rules-body {
+  padding: 0 16px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.lang-segment {
+  display: flex;
+  gap: 6px;
+}
+
+.lang-opt {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 34px;
+  padding: 0 6px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: #0a0a0a;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.lang-opt.active {
+  border-color: var(--border-gold-soft);
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+}
+
+.logout-btn {
+  width: 100%;
+  margin-top: 12px;
+  min-height: 44px;
+  padding: 0 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--danger);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.logout-btn:active {
+  background: rgba(255, 69, 58, 0.08);
+}
+
+.rules-body {
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--text-muted);
+}
+
+.rules-body p {
+  margin: 0 0 8px;
+}
+
+.rules-body p:last-child {
+  margin-bottom: 0;
+}
+</style>
diff --git a/apps/player/src/views/MobileRechargeHistoryView.vue b/apps/player/src/views/MobileRechargeHistoryView.vue
new file mode 100644
index 0000000..e035e03
--- /dev/null
+++ b/apps/player/src/views/MobileRechargeHistoryView.vue
@@ -0,0 +1,851 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+import { formatMoney } from '../utils/localeDisplay';
+import {
+  auditActionTone,
+  auditActorSecondary,
+  formatDepositAuditRemark,
+  shouldShowAuditRejectInTimeline,
+} from '../utils/depositAuditDisplay';
+import { useDepositNotifications } from '../composables/useDepositNotifications';
+
+const router = useRouter();
+const { t, locale } = useI18n();
+const { trackPendingOrder, pollOnce } = useDepositNotifications();
+
+interface DepositAuditLog {
+  id: string;
+  action: string;
+  actorType: string;
+  statusBefore: string | null;
+  statusAfter: string;
+  amount: string | null;
+  approvedAmount: string | null;
+  remark: string | null;
+  createdAt: string;
+}
+
+interface DepositOrder {
+  id: string;
+  orderNo: string;
+  paymentMethodId?: string;
+  methodType: string;
+  amount: string;
+  status: string;
+  approvedAmount: string | null;
+  rejectReason: string | null;
+  remark: string | null;
+  createdAt: string;
+  reviewedAt: string | null;
+  paymentMethodName: string | null;
+  auditLogs?: DepositAuditLog[];
+}
+
+const items = ref<DepositOrder[]>([]);
+const loading = ref(false);
+const initialLoading = ref(true);
+const page = ref(1);
+const total = ref(0);
+const hasMore = ref(true);
+
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+const selectedOrder = ref<DepositOrder | null>(null);
+
+async function fetchOrders(p = 1) {
+  if (loading.value) return;
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/deposit-orders', { params: { page: p } });
+    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
+    const newItems = result.items ?? [];
+
+    if (p === 1) {
+      items.value = newItems;
+      for (const order of newItems) {
+        if (order.status === 'PENDING') trackPendingOrder(order.id);
+      }
+      void pollOnce();
+    } else {
+      items.value = [...items.value, ...newItems];
+    }
+
+    total.value = result.total ?? 0;
+    const pageSize = result.pageSize ?? 20;
+    hasMore.value = newItems.length >= pageSize && items.value.length < total.value;
+    page.value = p;
+  } catch { /* */ } finally {
+    loading.value = false;
+    initialLoading.value = false;
+  }
+}
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await fetchOrders(1); },
+});
+
+onMounted(() => {
+  fetchOrders(1);
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
+        fetchOrders(page.value + 1);
+      }
+    },
+    { rootMargin: '200px' },
+  );
+  if (sentinel.value) observer.observe(sentinel.value);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
+
+function statusClass(s: string) {
+  if (s === 'APPROVED') return 'status-approved';
+  if (s === 'REJECTED') return 'status-rejected';
+  return 'status-pending';
+}
+
+function statusLabel(s: string) {
+  if (s === 'APPROVED') return t('recharge.status_approved');
+  if (s === 'REJECTED') return t('recharge.status_rejected');
+  return t('recharge.status_pending');
+}
+
+function goBack() {
+  router.push('/wallet');
+}
+
+function goRecharge() {
+  router.push('/wallet/recharge');
+}
+
+function openDetail(order: DepositOrder) {
+  selectedOrder.value = order;
+}
+
+function closeDetail() {
+  selectedOrder.value = null;
+}
+
+function reapply(order: DepositOrder) {
+  const query: Record<string, string> = {
+    orderId: order.id,
+    methodType: order.methodType,
+    amount: order.amount,
+  };
+  if (order.paymentMethodId) {
+    query.methodId = order.paymentMethodId;
+  }
+  router.push({ path: '/wallet/recharge', query });
+}
+
+function normalizeText(value: string | null | undefined) {
+  return value?.trim() ?? '';
+}
+
+/** Backend sets remark = rejectReason on reject; show one line only. */
+function orderNote(order: DepositOrder): { label: string; text: string } | null {
+  const rejectReason = normalizeText(order.rejectReason);
+  const remark = normalizeText(order.remark);
+
+  if (order.status === 'REJECTED') {
+    const text = rejectReason || remark;
+    if (!text) return null;
+    return { label: t('recharge.reject_reason'), text };
+  }
+
+  if (remark) {
+    return { label: t('recharge.remark'), text: remark };
+  }
+
+  return null;
+}
+
+function orderNoteLine(order: DepositOrder) {
+  const note = orderNote(order);
+  return note ? `${note.label}: ${note.text}` : null;
+}
+
+function auditActionLabel(action: string) {
+  const key = `recharge.audit_${action.toLowerCase()}` as const;
+  const translated = t(key);
+  return translated !== key ? translated : action;
+}
+
+function auditStepClass(action: string) {
+  return `audit-step--${auditActionTone(action)}`;
+}
+
+function formatAuditTime(iso: string) {
+  return new Date(iso).toLocaleString(undefined, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function formatOrderTime(iso: string) {
+  return new Date(iso).toLocaleString();
+}
+
+function auditRemarkForTimeline(log: DepositAuditLog, order: DepositOrder) {
+  if (log.action === 'REJECTED' && !shouldShowAuditRejectInTimeline(log, order.rejectReason)) {
+    return null;
+  }
+  return formatDepositAuditRemark(log, t);
+}
+
+function auditLogsForDisplay(order: DepositOrder) {
+  return [...(order.auditLogs ?? [])]
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+    .map((log) => ({
+      log,
+      actor: auditActorSecondary(log, t),
+      remark: auditRemarkForTimeline(log, order),
+    }));
+}
+
+function auditNoteLine(text: string) {
+  return `${t('recharge.audit_remark_label')}: ${text}`;
+}
+
+function auditNoteDisplayText(remark: { kind: 'note'; text: string }) {
+  if (remark.text === t('wallet.remark_deposit_revoke_generic')) {
+    return remark.text;
+  }
+  return auditNoteLine(remark.text);
+}
+
+function auditStepCount(order: DepositOrder) {
+  return order.auditLogs?.length ?? 0;
+}
+</script>
+
+<template>
+  <div class="recharge-history-page">
+    <div class="page-header">
+      <button class="back-btn" @click="goBack">‹</button>
+      <h2>{{ t('recharge.history_title') }}</h2>
+      <button class="recharge-btn" @click="goRecharge">+ {{ t('recharge.title') }}</button>
+    </div>
+
+    <div
+      class="pull-indicator"
+      :style="{ height: `${pullDistance}px`, opacity: Math.min(pullDistance / 48, 1) }"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <div v-if="initialLoading && loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+
+    <template v-else>
+      <div v-if="!items.length" class="empty">{{ t('recharge.no_orders') }}</div>
+
+      <div v-else class="order-list">
+        <div
+          v-for="order in items"
+          :key="order.id"
+          class="order-card"
+          :class="{ rejected: order.status === 'REJECTED' }"
+          role="button"
+          tabindex="0"
+          @click="openDetail(order)"
+          @keydown.enter="openDetail(order)"
+        >
+          <div class="order-header">
+            <span class="method-badge" :class="order.methodType === 'BANK' ? 'bank' : 'usdt'">{{ order.methodType }}</span>
+            <span :class="['status-badge', statusClass(order.status)]">{{ statusLabel(order.status) }}</span>
+          </div>
+          <div class="order-body">
+            <div class="order-amount">{{ formatMoney(order.amount, locale) }}</div>
+            <div v-if="order.approvedAmount && order.approvedAmount !== order.amount" class="approved-amount">
+              {{ t('recharge.credited') }}: {{ formatMoney(order.approvedAmount, locale) }}
+            </div>
+            <div class="order-info-row">
+              <span class="info-label">{{ order.paymentMethodName || '-' }}</span>
+            </div>
+            <div class="order-times">
+              <div class="time-row">
+                <span class="time-label">{{ t('recharge.apply_time') }}</span>
+                <span class="time-value">{{ formatOrderTime(order.createdAt) }}</span>
+              </div>
+              <div v-if="order.reviewedAt" class="time-row">
+                <span class="time-label">{{ t('recharge.review_time') }}</span>
+                <span class="time-value">{{ formatOrderTime(order.reviewedAt) }}</span>
+              </div>
+            </div>
+            <div
+              v-if="orderNoteLine(order)"
+              :class="order.status === 'REJECTED' ? 'reject-reason' : 'order-remark'"
+            >
+              {{ orderNoteLine(order) }}
+            </div>
+            <div v-if="auditStepCount(order)" class="card-detail-hint">
+              <span class="card-detail-summary">
+                {{ t('recharge.audit_summary', { count: auditStepCount(order) }) }}
+              </span>
+              <span class="card-detail-link">{{ t('recharge.view_detail') }} ›</span>
+            </div>
+            <button
+              v-else
+              type="button"
+              class="card-detail-link-only"
+              @click.stop="openDetail(order)"
+            >
+              {{ t('recharge.view_detail') }} ›
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div ref="sentinel" class="sentinel" />
+
+      <div v-if="loading && items.length > 0" class="load-more-spinner">
+        <GoldSpinner :size="24" />
+      </div>
+
+      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+        {{ t('common.no_more') }}
+      </div>
+    </template>
+
+    <Teleport to="body">
+      <div v-if="selectedOrder" class="detail-overlay" @click.self="closeDetail">
+        <div class="detail-modal" role="dialog" aria-modal="true" :aria-label="t('recharge.audit_title')">
+          <button type="button" class="detail-close" :aria-label="t('common.close')" @click="closeDetail">✕</button>
+
+          <h3 class="detail-title">{{ t('recharge.audit_title') }}</h3>
+
+          <div class="detail-summary">
+            <div class="detail-summary-head">
+              <span class="method-badge" :class="selectedOrder.methodType === 'BANK' ? 'bank' : 'usdt'">
+                {{ selectedOrder.methodType }}
+              </span>
+              <span :class="['status-badge', statusClass(selectedOrder.status)]">
+                {{ statusLabel(selectedOrder.status) }}
+              </span>
+            </div>
+            <div class="detail-amount">{{ formatMoney(selectedOrder.amount, locale) }}</div>
+            <div
+              v-if="selectedOrder.approvedAmount && selectedOrder.approvedAmount !== selectedOrder.amount"
+              class="approved-amount"
+            >
+              {{ t('recharge.credited') }}: {{ formatMoney(selectedOrder.approvedAmount, locale) }}
+            </div>
+            <div class="detail-method-name">{{ selectedOrder.paymentMethodName || '-' }}</div>
+            <div class="detail-row">
+              <span class="detail-label">{{ t('recharge.apply_time') }}</span>
+              <span class="detail-value">{{ formatOrderTime(selectedOrder.createdAt) }}</span>
+            </div>
+            <div v-if="selectedOrder.reviewedAt" class="detail-row">
+              <span class="detail-label">{{ t('recharge.review_time') }}</span>
+              <span class="detail-value">{{ formatOrderTime(selectedOrder.reviewedAt) }}</span>
+            </div>
+            <div
+              v-if="orderNoteLine(selectedOrder)"
+              :class="selectedOrder.status === 'REJECTED' ? 'reject-reason' : 'order-remark'"
+            >
+              {{ orderNoteLine(selectedOrder) }}
+            </div>
+          </div>
+
+          <div v-if="selectedOrder.auditLogs?.length" class="detail-audit">
+            <h4 class="detail-audit-title">{{ t('recharge.audit_title') }}</h4>
+            <div class="audit-track">
+              <div
+                v-for="(entry, logIdx) in auditLogsForDisplay(selectedOrder)"
+                :key="entry.log.id"
+                class="audit-step"
+                :class="auditStepClass(entry.log.action)"
+              >
+                <div class="audit-step-rail" aria-hidden="true">
+                  <span class="audit-dot" />
+                  <span v-if="logIdx < auditLogsForDisplay(selectedOrder).length - 1" class="audit-line" />
+                </div>
+                <div class="audit-step-body">
+                  <div class="audit-step-head">
+                    <span class="audit-step-title">{{ auditActionLabel(entry.log.action) }}</span>
+                    <time class="audit-step-time">{{ formatAuditTime(entry.log.createdAt) }}</time>
+                  </div>
+                  <p v-if="entry.actor" class="audit-step-actor">{{ entry.actor }}</p>
+                  <p
+                    v-if="entry.log.approvedAmount && entry.log.action === 'APPROVED'"
+                    class="audit-step-credited"
+                  >
+                    {{ t('recharge.audit_credited') }} {{ formatMoney(entry.log.approvedAmount, locale) }}
+                  </p>
+                  <div
+                    v-if="entry.remark?.kind === 'reject'"
+                    class="audit-step-box audit-step-box--reject"
+                  >
+                    <span class="audit-step-box-label">{{ t('recharge.reject_reason') }}</span>
+                    <span class="audit-step-box-text">{{ entry.remark.text }}</span>
+                  </div>
+                  <p v-else-if="entry.remark?.kind === 'note'" class="audit-step-note">
+                    {{ auditNoteDisplayText(entry.remark) }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <button
+            v-if="selectedOrder.status === 'REJECTED'"
+            type="button"
+            class="modal-reapply-btn btn-gold-outline"
+            @click.stop="reapply(selectedOrder)"
+          >
+            {{ t('recharge.reapply') }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.recharge-history-page { padding: 0 0 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; }
+.back-btn { background: none; border: none; color: var(--primary-light); font-size: 24px; cursor: pointer; padding: 0 8px; }
+.recharge-btn { background: none; border: none; color: var(--primary-light); font-size: 13px; cursor: pointer; font-weight: 600; }
+.state { display: flex; justify-content: center; padding: 48px; }
+.empty { text-align: center; color: #666; 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: linear-gradient(135deg, #1a1810 0%, #1f1b0e 40%, #16140c 100%);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 12px;
+  padding: 16px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.order-card:active {
+  opacity: 0.92;
+}
+.order-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
+}
+.order-card.rejected {
+  background: #141414;
+  border-color: rgba(245, 108, 108, 0.22);
+}
+.order-card.rejected::before {
+  background: linear-gradient(90deg, transparent, rgba(245, 108, 108, 0.35), transparent);
+}
+.order-card.rejected .order-amount {
+  background: none;
+  -webkit-background-clip: unset;
+  background-clip: unset;
+  color: #bbb;
+}
+.order-card.rejected .info-label {
+  color: #888;
+}
+.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(30, 58, 95, 0.6); color: #66b1ff; }
+.method-badge.usdt { background: rgba(26, 58, 42, 0.6); color: #67c23a; }
+.status-badge { font-size: 12px; font-weight: 700; }
+.status-pending { color: #e6a23c; }
+.status-approved { color: #67c23a; }
+.status-rejected { color: #f56c6c; }
+.order-body { }
+.order-amount {
+  font-size: 22px;
+  font-weight: 900;
+  margin-bottom: 4px;
+  background: linear-gradient(135deg, #f0d060, #d4a830);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.approved-amount { font-size: 12px; color: #67c23a; margin-bottom: 6px; font-weight: 600; }
+.order-info-row { margin-bottom: 8px; }
+.info-label { font-size: 13px; color: rgba(212, 175, 55, 0.7); 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: #888; }
+.time-value { font-size: 11px; color: #aaa; font-variant-numeric: tabular-nums; }
+.order-remark {
+  font-size: 12px;
+  color: rgba(212, 175, 55, 0.8);
+  background: rgba(212, 175, 55, 0.06);
+  padding: 6px 10px;
+  border-radius: 6px;
+  margin-top: 6px;
+  border-left: 2px solid rgba(212, 175, 55, 0.3);
+  line-height: 1.45;
+  word-break: break-word;
+}
+.reject-reason {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #c07070;
+  background: transparent;
+  padding: 6px 0 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid rgba(245, 108, 108, 0.18);
+  line-height: 1.45;
+  word-break: break-word;
+}
+.card-detail-hint {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(212, 175, 55, 0.12);
+}
+.card-detail-summary {
+  font-size: 11px;
+  color: rgba(212, 175, 55, 0.65);
+  font-weight: 600;
+}
+.card-detail-link {
+  font-size: 11px;
+  color: var(--primary-light);
+  font-weight: 700;
+  white-space: nowrap;
+}
+.card-detail-link-only {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: right;
+  font-size: 11px;
+  color: var(--primary-light);
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.sentinel {
+  height: 1px;
+}
+
+.load-more-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0 8px;
+}
+
+.end-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #555;
+  font-weight: 600;
+  padding: 16px 0 4px;
+  letter-spacing: 0.03em;
+}
+
+.detail-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.48);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0;
+}
+
+.detail-modal {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  max-height: min(88vh, 720px);
+  overflow-y: auto;
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  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.28);
+}
+
+.detail-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: #777;
+  font-size: 13px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.detail-title {
+  margin: 0 28px 12px 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #e8e8e8;
+}
+
+.detail-summary {
+  margin-bottom: 14px;
+  padding: 12px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid #222;
+}
+
+.detail-summary-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.detail-amount {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 4px;
+  color: var(--primary-light, #d4af37);
+  letter-spacing: -0.02em;
+}
+
+.detail-method-name {
+  font-size: 12px;
+  color: #999;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.detail-label {
+  font-size: 12px;
+  color: #888;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  font-size: 12px;
+  color: #ccc;
+  text-align: right;
+  word-break: break-word;
+}
+
+.detail-summary .order-remark {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #999;
+  background: transparent;
+  padding: 6px 0 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid #222;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.detail-summary .reject-reason {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #b08888;
+  background: transparent;
+  padding: 6px 0 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid rgba(245, 108, 108, 0.15);
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.detail-summary .approved-amount {
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.detail-audit {
+  margin-top: 2px;
+  padding-top: 12px;
+  border-top: 1px solid #222;
+}
+
+.detail-audit-title {
+  margin: 0 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #888;
+  letter-spacing: 0.02em;
+}
+
+.audit-track {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.audit-step {
+  display: flex;
+  gap: 8px;
+  min-height: 0;
+}
+
+.audit-step-rail {
+  flex: 0 0 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 4px;
+}
+
+.audit-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #555;
+  flex-shrink: 0;
+}
+
+.audit-line {
+  flex: 1;
+  width: 1px;
+  min-height: 10px;
+  margin: 3px 0;
+  background: #2a2a2a;
+}
+
+.audit-step-body {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: 12px;
+}
+
+.audit-step:last-child .audit-step-body {
+  padding-bottom: 0;
+}
+
+.audit-step-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.audit-step-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #ccc;
+  line-height: 1.35;
+}
+
+.audit-step-time {
+  font-size: 10px;
+  color: #666;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.audit-step-actor {
+  margin: 2px 0 0;
+  font-size: 11px;
+  color: #999;
+  line-height: 1.4;
+}
+
+.audit-step-credited {
+  margin: 3px 0 0;
+  font-size: 11px;
+  font-weight: 500;
+  color: #7eb87a;
+  line-height: 1.4;
+}
+
+.audit-step-note {
+  margin: 4px 0 0;
+  font-size: 11px;
+  color: #888;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.audit-step-box {
+  margin-top: 4px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.audit-step-box--reject {
+  background: transparent;
+  border: 1px solid rgba(245, 108, 108, 0.22);
+}
+
+.audit-step-box-label {
+  font-size: 10px;
+  font-weight: 500;
+  color: #c07070;
+  letter-spacing: 0.01em;
+}
+
+.audit-step-box-text {
+  font-size: 11px;
+  color: #b08888;
+}
+
+.audit-step--submitted .audit-dot {
+  background: #c9a227;
+}
+.audit-step--approved .audit-dot {
+  background: #5fad5a;
+}
+.audit-step--rejected .audit-dot {
+  background: #d06060;
+}
+.audit-step--revoked .audit-dot {
+  background: #777;
+}
+.audit-step--reopened .audit-dot {
+  background: #c9a227;
+}
+
+.modal-reapply-btn {
+  width: 100%;
+  margin-top: 14px;
+  padding: 11px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+</style>
diff --git a/apps/player/src/views/MobileRechargeView.vue b/apps/player/src/views/MobileRechargeView.vue
new file mode 100644
index 0000000..850b9c4
--- /dev/null
+++ b/apps/player/src/views/MobileRechargeView.vue
@@ -0,0 +1,691 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import imageCompression from 'browser-image-compression';
+import api from '../api';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { useDepositNotifications } from '../composables/useDepositNotifications';
+
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+const { trackPendingOrder } = useDepositNotifications();
+
+const reapplyOrderId = computed(() => {
+  const id = route.query.orderId;
+  return typeof id === 'string' && id ? id : '';
+});
+const isReapply = computed(() => !!reapplyOrderId.value);
+
+interface PaymentMethod {
+  id: string;
+  methodType: string;
+  bankName: string | null;
+  accountHolder: string | null;
+  accountNumber: string | null;
+  usdtAddress: string | null;
+  qrCodeUrl: string | null;
+  displayName: string | null;
+}
+
+const methodType = ref<'BANK' | 'USDT'>('BANK');
+const methods = ref<PaymentMethod[]>([]);
+const selectedMethod = ref<PaymentMethod | null>(null);
+const amount = ref<string>('');
+const screenshotFile = ref<File | null>(null);
+const screenshotPreview = ref<string>('');
+const loading = ref(true);
+const submitting = ref(false);
+const success = ref(false);
+const orderNo = ref('');
+const compressing = ref(false);
+
+const bankMethods = computed(() => methods.value.filter((m) => m.methodType === 'BANK'));
+const usdtMethods = computed(() => methods.value.filter((m) => m.methodType === 'USDT'));
+const currentMethods = computed(() => methodType.value === 'BANK' ? bankMethods.value : usdtMethods.value);
+
+function applyReapplyQuery() {
+  const type = route.query.methodType;
+  if (type === 'BANK' || type === 'USDT') {
+    methodType.value = type;
+  }
+
+  const methodId = typeof route.query.methodId === 'string' ? route.query.methodId : '';
+  if (methodId) {
+    const match = methods.value.find((m) => m.id === methodId);
+    if (match) {
+      selectedMethod.value = match;
+    }
+  }
+
+  if (!selectedMethod.value && currentMethods.value.length) {
+    selectedMethod.value = currentMethods.value[0];
+  }
+
+  const amountQuery = typeof route.query.amount === 'string' ? route.query.amount : '';
+  const parsedAmount = parseFloat(amountQuery);
+  if (amountQuery && parsedAmount > 0) {
+    amount.value = amountQuery;
+  }
+}
+
+async function fetchMethods() {
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/payment-methods');
+    methods.value = (data.data ?? []).map((m: any) => ({ ...m, id: String(m.id) }));
+    if (isReapply.value) {
+      applyReapplyQuery();
+    } else if (currentMethods.value.length) {
+      selectedMethod.value = currentMethods.value[0];
+    }
+  } catch { /* */ } finally {
+    loading.value = false;
+  }
+}
+
+function switchType(type: 'BANK' | 'USDT') {
+  methodType.value = type;
+  selectedMethod.value = currentMethods.value.length ? currentMethods.value[0] : null;
+}
+
+function selectMethod(m: PaymentMethod) {
+  selectedMethod.value = m;
+}
+
+const MAX_ORIGINAL_BYTES = 10 * 1024 * 1024;
+const MAX_SCREENSHOT_BYTES = 300 * 1024;
+
+async function compressScreenshot(file: File): Promise<File> {
+  const baseOptions = {
+    maxSizeMB: 0.3,
+    maxWidthOrHeight: 1200,
+    useWebWorker: true,
+    maxIteration: 10,
+    fileType: 'image/webp',
+  } as const;
+
+  const attempts = [
+    { ...baseOptions, initialQuality: 0.8 },
+    { ...baseOptions, initialQuality: 0.6, maxWidthOrHeight: 1000 },
+  ];
+
+  let compressed: File | null = null;
+  for (const options of attempts) {
+    try {
+      compressed = (await imageCompression(file, options)) as File;
+      if (compressed.size <= MAX_SCREENSHOT_BYTES) {
+        break;
+      }
+    } catch (err) {
+      console.error('Compression attempt failed:', err);
+    }
+  }
+
+  if (!compressed) {
+    throw new Error('COMPRESS_FAILED');
+  }
+
+  // 重命名文件后缀为 .webp
+  const name = file.name.replace(/\.[^/.]+$/, "") + '.webp';
+  return new File([compressed], name, {
+    type: 'image/webp',
+    lastModified: Date.now(),
+  });
+}
+
+async function handleFileChange(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+
+  if (!file.type.startsWith('image/')) {
+    alert(t('recharge.file_must_be_image'));
+    input.value = '';
+    return;
+  }
+
+  if (file.size > MAX_ORIGINAL_BYTES) {
+    alert(t('recharge.file_too_large'));
+    input.value = '';
+    return;
+  }
+
+  compressing.value = true;
+  try {
+    const compressed = await compressScreenshot(file);
+    screenshotFile.value = compressed;
+    screenshotPreview.value = URL.createObjectURL(compressed);
+  } catch {
+    alert(t('recharge.compress_failed'));
+    screenshotFile.value = null;
+    screenshotPreview.value = '';
+    input.value = '';
+  } finally {
+    compressing.value = false;
+  }
+}
+
+function removeScreenshot() {
+  screenshotFile.value = null;
+  screenshotPreview.value = '';
+}
+
+async function handleSubmit() {
+  if (!selectedMethod.value) {
+    alert(t('recharge.select_method'));
+    return;
+  }
+  const amt = parseFloat(amount.value);
+  if (!amt || amt <= 0) {
+    alert(t('recharge.enter_amount'));
+    return;
+  }
+  if (!screenshotFile.value) {
+    alert(t('recharge.upload_screenshot'));
+    return;
+  }
+  if (screenshotFile.value.size > MAX_SCREENSHOT_BYTES) {
+    alert(t('recharge.compress_failed'));
+    return;
+  }
+
+  submitting.value = true;
+  try {
+    const fd = new FormData();
+    fd.append('amount', String(amt));
+    fd.append('screenshot', screenshotFile.value);
+
+    if (isReapply.value) {
+      fd.append('paymentMethodId', selectedMethod.value.id);
+      const { data } = await api.post(`/player/deposit-orders/${reapplyOrderId.value}/reapply`, fd);
+      const result = data.data;
+      orderNo.value = result?.orderNo ?? '';
+      if (result?.id) trackPendingOrder(String(result.id));
+      success.value = true;
+      return;
+    }
+
+    fd.append('paymentMethodId', selectedMethod.value.id);
+    const { data } = await api.post('/player/deposit-orders', fd);
+    const result = data.data;
+    orderNo.value = result?.orderNo ?? '';
+    if (result?.id) trackPendingOrder(String(result.id));
+    success.value = true;
+  } catch (e: any) {
+    alert(e.response?.data?.message || t('recharge.submit_failed'));
+  } finally {
+    submitting.value = false;
+  }
+}
+
+function goHistory() {
+  router.push('/wallet/recharge/history');
+}
+
+function goBack() {
+  router.back();
+}
+
+function resetForm() {
+  success.value = false;
+  amount.value = '';
+  screenshotFile.value = null;
+  screenshotPreview.value = '';
+  orderNo.value = '';
+}
+
+function copyText(text: string) {
+  navigator.clipboard?.writeText(text);
+}
+
+function formatCardNumber(num: string | null): string {
+  if (!num) return '—';
+  const digits = num.replace(/\s/g, '');
+  return digits.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
+}
+
+onMounted(fetchMethods);
+</script>
+
+<template>
+  <div class="recharge-page">
+    <div class="page-header">
+      <button class="back-btn" @click="goBack">‹</button>
+      <h2>{{ t('recharge.title') }}</h2>
+      <button class="history-btn" @click="goHistory">{{ t('recharge.history') }}</button>
+    </div>
+
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+
+    <div v-else-if="success" class="success-state">
+      <div class="success-icon">✓</div>
+      <h3>{{ t('recharge.submitted') }}</h3>
+      <p class="order-no">{{ orderNo }}</p>
+      <p class="success-hint">{{ t('recharge.pending_review') }}</p>
+      <button v-if="isReapply" class="btn-primary" @click="goHistory">{{ t('recharge.back_to_history') }}</button>
+      <button v-else class="btn-primary" @click="resetForm">{{ t('recharge.new_recharge') }}</button>
+    </div>
+
+    <template v-else>
+      <div v-if="isReapply" class="reapply-banner">{{ t('recharge.reapply_hint') }}</div>
+      <div class="type-tabs">
+        <button
+          :class="['tab', methodType === 'BANK' && 'active']"
+          @click="switchType('BANK')"
+        >{{ t('recharge.bank_transfer') }}</button>
+        <button
+          :class="['tab', methodType === 'USDT' && 'active']"
+          @click="switchType('USDT')"
+        >USDT</button>
+      </div>
+
+      <div v-if="currentMethods.length" class="methods-list">
+        <button
+          v-for="m in currentMethods"
+          :key="m.id"
+          :class="['method-pill', selectedMethod?.id === m.id && 'selected']"
+          @click="selectMethod(m)"
+        >
+          <span class="pill-name">{{ m.displayName || m.bankName || m.usdtAddress }}</span>
+          <span v-if="m.methodType === 'BANK'" class="pill-sub">{{ m.accountHolder }}</span>
+        </button>
+      </div>
+      <div v-else class="empty-methods">{{ t('recharge.no_methods') }}</div>
+
+      <div v-if="selectedMethod && selectedMethod.methodType === 'BANK'" class="bank-card-wrap">
+        <div class="bank-card-face">
+          <div class="bank-card-shine" aria-hidden="true" />
+          <div class="bank-card-deco bank-card-deco--1" aria-hidden="true" />
+          <div class="bank-card-deco bank-card-deco--2" aria-hidden="true" />
+          <div class="bank-card-top">
+            <div class="bank-card-bank">{{ selectedMethod.bankName }}</div>
+          </div>
+          <div class="bank-card-number-row">
+            <span class="bank-card-number">{{ formatCardNumber(selectedMethod.accountNumber) }}</span>
+            <button
+              type="button"
+              class="bank-card-copy"
+              :aria-label="t('recharge.account_number')"
+              @click="copyText(selectedMethod.accountNumber || '')"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="9" y="9" width="13" height="13" rx="2" />
+                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+              </svg>
+            </button>
+          </div>
+          <div class="bank-card-bottom">
+            <div class="bank-card-holder">
+              <span class="bank-card-holder-label">{{ t('recharge.account_holder') }}</span>
+              <span class="bank-card-holder-name">{{ selectedMethod.accountHolder }}</span>
+            </div>
+            <div class="bank-card-type">DEBIT</div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="selectedMethod" class="method-info">
+        <template v-if="selectedMethod.methodType !== 'BANK'">
+          <div class="info-row">
+            <span class="info-label">{{ t('recharge.usdt_address') }}</span>
+            <span class="info-value copyable" @click="copyText(selectedMethod!.usdtAddress || '')">
+              {{ selectedMethod.usdtAddress }}
+              <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+            </span>
+          </div>
+          <div v-if="selectedMethod.qrCodeUrl" class="qr-container">
+            <img :src="selectedMethod.qrCodeUrl" class="qr-image" />
+          </div>
+        </template>
+      </div>
+
+      <div class="form-section">
+        <label>{{ t('recharge.amount_label') }}</label>
+        <input
+          v-model="amount"
+          type="number"
+          inputmode="decimal"
+          :placeholder="t('recharge.amount_placeholder')"
+          class="amount-input"
+        />
+      </div>
+
+      <div class="form-section">
+        <label>{{ t('recharge.screenshot_label') }}</label>
+        <div v-if="screenshotPreview" class="screenshot-preview">
+          <img :src="screenshotPreview" />
+          <button class="remove-btn" @click="removeScreenshot">✕</button>
+        </div>
+        <label v-else class="upload-area">
+          <input type="file" accept="image/*" @change="handleFileChange" :disabled="compressing" />
+          <div v-if="compressing" class="compress-hint">{{ t('recharge.compressing') }}...</div>
+          <div v-else class="upload-hint">{{ t('recharge.upload_hint') }}</div>
+        </label>
+      </div>
+
+      <button
+        class="btn-submit"
+        :disabled="submitting || !selectedMethod || !amount || !screenshotFile"
+        @click="handleSubmit"
+      >
+        <span v-if="submitting">{{ t('recharge.submitting') }}...</span>
+        <span v-else>{{ t('recharge.submit') }}</span>
+      </button>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.recharge-page { padding: 0 0 24px; }
+
+.page-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 0 12px;
+}
+.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; }
+.back-btn { background: none; border: none; color: var(--primary-light); font-size: 22px; cursor: pointer; padding: 0 6px; }
+.history-btn { background: none; border: none; color: var(--primary-light); font-size: 12px; cursor: pointer; font-weight: 600; }
+
+.state { display: flex; justify-content: center; padding: 48px; }
+
+.reapply-banner {
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: #ffd0d0;
+  background: rgba(245, 108, 108, 0.12);
+  border: 1px solid rgba(245, 108, 108, 0.25);
+}
+
+.type-tabs {
+  display: flex; margin-bottom: 12px;
+  border-radius: 6px; overflow: hidden;
+  border: 1px solid rgba(212, 175, 55, 0.2);
+}
+.tab {
+  flex: 1; padding: 8px; border: none;
+  background: rgba(20, 20, 20, 0.8);
+  color: var(--text-muted); font-weight: 700; font-size: 13px;
+  cursor: pointer; transition: all 0.2s;
+}
+.tab.active {
+  background: var(--primary-light); color: #000;
+}
+
+.methods-list {
+  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
+}
+.method-pill {
+  display: flex; flex-direction: column; gap: 1px;
+  background: rgba(20, 20, 20, 0.8);
+  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: var(--primary-light);
+  background: rgba(212, 175, 55, 0.06);
+}
+.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;
+  perspective: 800px;
+}
+
+.bank-card-face {
+  position: relative;
+  aspect-ratio: 2 / 1;
+  border-radius: 14px;
+  padding: 14px 18px 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  background:
+    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(212, 175, 55, 0.22), transparent 55%),
+    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(212, 175, 55, 0.1), transparent 50%),
+    linear-gradient(135deg, #2a2218 0%, #1a1610 35%, #12100c 70%, #0a0908 100%);
+  border: 1px solid rgba(212, 175, 55, 0.35);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.55),
+    0 2px 8px rgba(212, 175, 55, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.bank-card-shine {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    115deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.04) 45%,
+    rgba(255, 255, 255, 0.08) 50%,
+    rgba(255, 255, 255, 0.04) 55%,
+    transparent 70%
+  );
+  pointer-events: none;
+}
+
+.bank-card-deco {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid rgba(212, 175, 55, 0.12);
+  pointer-events: none;
+}
+
+.bank-card-deco--1 {
+  width: 180px;
+  height: 180px;
+  right: -60px;
+  bottom: -80px;
+  background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 70%);
+}
+
+.bank-card-deco--2 {
+  width: 100px;
+  height: 100px;
+  right: 40px;
+  bottom: 20px;
+  border-color: rgba(212, 175, 55, 0.08);
+}
+
+.bank-card-top,
+.bank-card-number-row,
+.bank-card-bottom {
+  position: relative;
+  z-index: 1;
+}
+
+.bank-card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.bank-card-bank {
+  font-size: 15px;
+  font-weight: 800;
+  color: #fff;
+  text-align: right;
+  letter-spacing: 0.5px;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  line-height: 1.3;
+  max-width: 58%;
+  word-break: break-all;
+}
+
+.bank-card-number-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 4px 0 2px;
+}
+
+.bank-card-number {
+  font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
+  font-size: clamp(15px, 4.2vw, 19px);
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  color: var(--primary-light);
+  text-shadow: 0 0 12px rgba(240, 216, 117, 0.25);
+  word-break: break-all;
+  line-height: 1.3;
+}
+
+.bank-card-copy {
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  border: 1px solid rgba(212, 175, 55, 0.35);
+  background: rgba(0, 0, 0, 0.25);
+  color: var(--primary-light);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.bank-card-copy svg {
+  width: 16px;
+  height: 16px;
+}
+
+.bank-card-copy:active {
+  opacity: 0.65;
+  background: rgba(212, 175, 55, 0.12);
+}
+
+.bank-card-bottom {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.bank-card-holder {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.bank-card-holder-label {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.bank-card-holder-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 0.04em;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+  word-break: break-all;
+}
+
+.bank-card-type {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.18em;
+  color: rgba(212, 175, 55, 0.55);
+  font-style: italic;
+}
+
+.method-info {
+  background: rgba(17, 17, 17, 0.9);
+  border-radius: 8px; padding: 10px 12px;
+  margin-bottom: 12px;
+  border: 1px solid var(--border);
+}
+.info-row {
+  display: flex; justify-content: space-between; align-items: baseline;
+  padding: 6px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+.info-row:last-child { border-bottom: none; }
+.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%;
+}
+.copyable {
+  cursor: pointer; color: var(--primary-light);
+  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; }
+
+.form-section { margin-bottom: 12px; }
+.form-section label {
+  display: block; font-size: 11px; font-weight: 700;
+  color: var(--text-muted); margin-bottom: 4px;
+}
+.amount-input {
+  width: 100%; padding: 10px; background: #111;
+  border: 1px solid var(--border); border-radius: 6px;
+  color: #fff; font-size: 16px; font-weight: 700;
+  box-sizing: border-box;
+}
+.amount-input:focus { border-color: var(--primary-light); outline: none; }
+
+.upload-area {
+  border: 1px dashed rgba(212, 175, 55, 0.3);
+  border-radius: 6px; padding: 16px;
+  text-align: center; position: relative;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+}
+.upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.upload-hint { font-size: 12px; color: var(--text-muted); }
+.compress-hint { font-size: 12px; color: var(--primary-light); }
+.screenshot-preview { position: relative; display: inline-block; }
+.screenshot-preview img { max-width: 100%; max-height: 160px; border-radius: 6px; }
+.remove-btn {
+  position: absolute; top: 4px; right: 4px;
+  background: rgba(0,0,0,0.7); border: none; color: #fff;
+  width: 20px; height: 20px; border-radius: 50%;
+  cursor: pointer; font-size: 11px;
+}
+
+.btn-submit {
+  width: 100%; padding: 12px;
+  background: linear-gradient(135deg, #f0d060, #d4a830);
+  color: #000; border: none; border-radius: 6px;
+  font-size: 14px; font-weight: 800;
+  cursor: pointer; margin-top: 8px;
+  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
+}
+.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.success-state { text-align: center; padding: 40px 16px; }
+.success-icon { font-size: 40px; color: #67c23a; margin-bottom: 10px; }
+.success-state h3 { margin: 0 0 6px; font-size: 16px; }
+.order-no { font-family: monospace; color: var(--primary-light); font-size: 13px; margin: 4px 0; }
+.success-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
+.btn-primary {
+  background: linear-gradient(135deg, #f0d060, #d4a830);
+  color: #000; border: none; border-radius: 6px;
+  padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
+}
+</style>
diff --git a/apps/player/src/views/MobileWalletDetailView.vue b/apps/player/src/views/MobileWalletDetailView.vue
new file mode 100644
index 0000000..53d47ab
--- /dev/null
+++ b/apps/player/src/views/MobileWalletDetailView.vue
@@ -0,0 +1,387 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+import { isBetType, isDepositType, isWithdrawType, isCashbackType, txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../utils/walletTx';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import WalletStatsPanel from '../components/WalletStatsPanel.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+
+const router = useRouter();
+const { t, locale } = useI18n();
+
+type Transaction = {
+  transactionType: string;
+  displayType?: string;
+  summary?: string | null;
+  summaryKind?: 'opening_bonus' | null;
+  referenceType?: string | null;
+  amount: string;
+  frozenBefore?: string;
+  frozenAfter?: string;
+  createdAt: string;
+  transactionId: string;
+};
+
+const items = ref<Transaction[]>([]);
+const total = ref(0);
+const page = ref(1);
+const loading = ref(false);
+const initialLoading = ref(true);
+const hasMore = ref(true);
+const typeFilter = ref('');
+const cashbackTotal = ref('0');
+
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+const FILTERS = [
+  { key: '', label: 'wallet.filter_all' },
+  { key: 'deposit', label: 'wallet.filter_deposit' },
+  { key: 'withdraw', label: 'wallet.filter_withdraw' },
+  { key: 'bet', label: 'wallet.filter_bet' },
+  { key: 'cashback', label: 'wallet.filter_cashback' },
+];
+
+const CASHBACK_TYPES = new Set(['CASHBACK', 'CASHBACK_DEPOSIT']);
+
+async function fetchCashbackTotal() {
+  try {
+    const { data } = await api.get('/player/wallet/transactions/stats');
+    const byType = data.data?.byType ?? [];
+    let sum = 0;
+    for (const g of byType) {
+      if (CASHBACK_TYPES.has(g.transactionType?.toUpperCase())) {
+        sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
+      }
+    }
+    cashbackTotal.value = sum.toString();
+  } catch {
+    /* ignore */
+  }
+}
+
+function txLabel(tx: Transaction): string {
+  const key = txTypeKey(txDisplayType(tx));
+  if (key) {
+    const translated = t(key);
+    if (translated !== key) return translated;
+  }
+  return tx.transactionType;
+}
+
+function txSubtitle(tx: Transaction): string {
+  return txSummaryLabel(tx, t);
+}
+
+function goDetail(tx: Transaction) {
+  if (!tx.transactionId) return;
+  router.push(`/wallet/transactions/${tx.transactionId}`);
+}
+
+async function loadPage(p: number) {
+  if (loading.value) return;
+  loading.value = true;
+  const filterAtRequest = typeFilter.value;
+  try {
+    const params: Record<string, unknown> = { page: p };
+    if (typeFilter.value) params.type = typeFilter.value;
+    const { data } = await api.get('/player/wallet/transactions', { params });
+    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
+    if (filterAtRequest !== typeFilter.value) return;
+    total.value = result.total ?? 0;
+    const pageSize = result.pageSize ?? 20;
+    const newItems = result.items ?? [];
+    if (p === 1) {
+      items.value = newItems;
+    } else {
+      items.value = [...items.value, ...newItems];
+    }
+    hasMore.value = (result.items?.length ?? 0) >= pageSize;
+    page.value = p;
+  } finally {
+    if (filterAtRequest === typeFilter.value) {
+      loading.value = false;
+      initialLoading.value = false;
+    }
+  }
+}
+
+async function reset() {
+  items.value = [];
+  total.value = 0;
+  page.value = 1;
+  hasMore.value = true;
+  initialLoading.value = true;
+  loading.value = false;
+  loadPage(1);
+}
+
+function changeFilter(key: string) {
+  if (typeFilter.value === key) return;
+  typeFilter.value = key;
+  reset();
+}
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadPage(1); await fetchCashbackTotal(); },
+});
+
+onMounted(() => {
+  loadPage(1);
+  fetchCashbackTotal();
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
+        loadPage(page.value + 1);
+      }
+    },
+    { rootMargin: '200px' },
+  );
+  if (sentinel.value) observer.observe(sentinel.value);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+</script>
+
+<template>
+  <div class="wallet-detail-page">
+    <div class="top-bar">
+      <button class="back-btn" type="button" @click="router.back()">&#x2039; {{ t('history.back') }}</button>
+    </div>
+
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <div v-if="initialLoading" class="state">
+      <GoldSpinner :size="36" />
+      <span class="loading-text">{{ t('bet.loading') }}</span>
+    </div>
+
+    <template v-else>
+      <WalletStatsPanel :items="items" :cashback-total="cashbackTotal" />
+
+      <div class="filter-tabs">
+        <button
+          v-for="f in FILTERS"
+          :key="f.key"
+          type="button"
+          class="filter-tab"
+          :class="{ active: typeFilter === f.key }"
+          @click="changeFilter(f.key)"
+        >
+          {{ t(f.label) }}
+        </button>
+      </div>
+
+      <div v-if="items.length" class="tx-list">
+        <button
+          v-for="tx in items"
+          :key="tx.transactionId"
+          type="button"
+          class="tx-row"
+          @click="goDetail(tx)"
+        >
+          <div class="tx-main">
+            <div class="tx-text">
+              <span class="tx-type">{{ txLabel(tx) }}</span>
+              <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
+            </div>
+            <span :class="txAmountClass(tx.amount)">
+              {{ formatMoney(tx.amount, locale) }}
+            </span>
+          </div>
+          <div class="tx-meta">
+            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+            <span class="tx-arrow">&#x203A;</span>
+          </div>
+        </button>
+      </div>
+
+      <div ref="sentinel" class="sentinel" />
+
+      <div v-if="loading" class="load-more-spinner">
+        <GoldSpinner :size="24" />
+      </div>
+
+      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+        {{ t('common.no_more') }}
+      </div>
+
+      <div v-if="!items.length && !initialLoading" class="empty">
+        {{ t('wallet.no_records') }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.wallet-detail-page {
+  padding-bottom: 24px;
+}
+
+.top-bar {
+  margin-bottom: 4px;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: var(--primary-light, #d4af37);
+  font-size: 15px;
+  font-weight: 700;
+  padding: 4px 0 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.filter-tabs::-webkit-scrollbar { display: none; }
+
+.filter-tab {
+  flex-shrink: 0;
+  padding: 7px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  transition: all 0.2s;
+}
+
+.filter-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--text-muted);
+  padding: 56px 20px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.loading-text {
+  font-size: 13px;
+}
+
+.tx-list {
+  margin-bottom: 0;
+}
+
+.tx-row {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font-size: 14px;
+  padding: 12px 16px;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
+  cursor: pointer;
+}
+
+.tx-row:last-child {
+  border-bottom: none;
+}
+
+.tx-row:active {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.tx-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.tx-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.tx-summary {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tx-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.tx-type { font-weight: 700; color: var(--text); }
+.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
+.neg { color: var(--danger); font-weight: 700; }
+.zero { color: var(--text-muted); font-weight: 700; font-size: 15px; }
+.tx-time { font-size: 11px; color: var(--text-muted); }
+.tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
+
+.sentinel {
+  height: 1px;
+}
+
+.load-more-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0 8px;
+}
+
+.end-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #555;
+  font-weight: 600;
+  padding: 16px 0 4px;
+  letter-spacing: 0.03em;
+}
+
+.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
+</style>
diff --git a/apps/player/src/views/MobileWalletTransactionDetailView.vue b/apps/player/src/views/MobileWalletTransactionDetailView.vue
new file mode 100644
index 0000000..eb8e194
--- /dev/null
+++ b/apps/player/src/views/MobileWalletTransactionDetailView.vue
@@ -0,0 +1,388 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+import { txTypeKey, isCashbackType, txDisplayType, txAmountClass, txSummaryLabel, txRemarkLabel, isDepositReversalType } from '../utils/walletTx';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+
+type TransactionDetail = {
+  transactionId: string;
+  transactionType: string;
+  displayType?: string;
+  summary?: string | null;
+  summaryKind?: 'opening_bonus' | null;
+  amount: string;
+  balanceBefore: string;
+  balanceAfter: string;
+  frozenBefore: string;
+  frozenAfter: string;
+  referenceType: string | null;
+  referenceId: string | null;
+  remark: string | null;
+  createdAt: string;
+  betNo: string | null;
+  cashbackBatchNo?: string | null;
+};
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+
+const tx = ref<TransactionDetail | null>(null);
+const loading = ref(true);
+const notFound = ref(false);
+
+async function loadTransaction() {
+  loading.value = true;
+  try {
+    const { data } = await api.get(`/player/wallet/transactions/${route.params.transactionId}`);
+    if (!data.data) {
+      notFound.value = true;
+      return;
+    }
+    tx.value = data.data;
+  } catch {
+    notFound.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadTransaction);
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: loadTransaction,
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
+function txLabel(type: string): string {
+  const key = txTypeKey(type);
+  if (key) {
+    const translated = t(key);
+    if (translated !== key) return translated;
+  }
+  return type;
+}
+
+const displayTypeLabel = computed(() => {
+  if (!tx.value) return '';
+  return txLabel(txDisplayType(tx.value));
+});
+
+const summaryText = computed(() => {
+  if (!tx.value) return '';
+  return txSummaryLabel(tx.value, t);
+});
+
+const amountClass = computed(() => (tx.value ? txAmountClass(tx.value.amount) : 'zero'));
+
+const formattedTime = computed(() => {
+  if (!tx.value) return '';
+  return new Date(tx.value.createdAt).toLocaleString(locale.value);
+});
+
+const frozenChanged = computed(() => {
+  if (!tx.value) return false;
+  return tx.value.frozenBefore !== tx.value.frozenAfter;
+});
+
+const isCashbackTx = computed(
+  () => !!tx.value && isCashbackType(tx.value.transactionType),
+);
+
+const cashbackBatchNo = computed(() => {
+  if (!isCashbackTx.value) return null;
+  return tx.value?.cashbackBatchNo ?? tx.value?.referenceId ?? null;
+});
+
+const referenceLabel = computed(() => {
+  if (isCashbackTx.value) return t('wallet.ref_cashback');
+  if (!tx.value?.referenceType) return '';
+  if (isDepositReversalType(tx.value.transactionType)) return t('wallet.ref_deposit');
+  const rt = tx.value.referenceType.toUpperCase();
+  if (rt === 'BET') return t('wallet.ref_bet');
+  if (rt === 'DEPOSIT') return t('wallet.ref_deposit');
+  if (rt === 'WITHDRAW') return t('wallet.ref_withdraw');
+  return tx.value.referenceType;
+});
+
+const remarkText = computed(() => {
+  if (!tx.value) return '';
+  return txRemarkLabel(tx.value, t);
+});
+
+function goBetDetail() {
+  if (!tx.value?.betNo) return;
+  router.push(`/bets/${tx.value.betNo}`);
+}
+
+function goCashbackDetail() {
+  if (!cashbackBatchNo.value) return;
+  router.push({ path: '/wallet/cashbacks', query: { batchNo: cashbackBatchNo.value } });
+}
+</script>
+
+<template>
+  <div class="detail-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <div class="top-bar">
+      <button class="back-btn" type="button" @click="router.back()">‹ {{ t('history.back') }}</button>
+    </div>
+
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+    <div v-else-if="notFound || !tx" class="state">{{ t('wallet.detail_not_found') }}</div>
+
+    <template v-else>
+      <div class="hero" :class="amountClass">
+        <span class="hero-type">{{ displayTypeLabel }}</span>
+        <span v-if="summaryText" class="hero-summary">{{ summaryText }}</span>
+        <span class="hero-amount">{{ formatMoney(tx.amount, locale) }}</span>
+        <span class="hero-time">{{ formattedTime }}</span>
+      </div>
+
+      <section class="section">
+        <div class="section-title">{{ t('wallet.detail_summary') }}</div>
+        <div class="summary-rows">
+          <div class="sum-row">
+            <span>{{ t('wallet.detail_amount') }}</span>
+            <span :class="amountClass">{{ formatMoney(tx.amount, locale) }}</span>
+          </div>
+          <div class="sum-row">
+            <span>{{ t('wallet.detail_balance_before') }}</span>
+            <span>{{ formatMoney(tx.balanceBefore, locale) }}</span>
+          </div>
+          <div class="sum-row">
+            <span>{{ t('wallet.detail_balance_after') }}</span>
+            <span>{{ formatMoney(tx.balanceAfter, locale) }}</span>
+          </div>
+          <template v-if="frozenChanged">
+            <div class="sum-row">
+              <span>{{ t('wallet.detail_frozen_before') }}</span>
+              <span>{{ formatMoney(tx.frozenBefore, locale) }}</span>
+            </div>
+            <div class="sum-row">
+              <span>{{ t('wallet.detail_frozen_after') }}</span>
+              <span>{{ formatMoney(tx.frozenAfter, locale) }}</span>
+            </div>
+          </template>
+        </div>
+      </section>
+
+      <section v-if="tx.referenceType || remarkText" class="section">
+        <div class="section-title">{{ t('wallet.detail_reference') }}</div>
+        <div class="summary-rows">
+          <div v-if="tx.referenceType" class="sum-row">
+            <span>{{ t('wallet.detail_reference_type') }}</span>
+            <span>{{ referenceLabel }}</span>
+          </div>
+          <div v-if="tx.referenceId && !tx.betNo" class="sum-row">
+            <span>{{ t('wallet.detail_reference_id') }}</span>
+            <span class="mono">{{ tx.referenceId }}</span>
+          </div>
+          <div v-if="remarkText" class="sum-row">
+            <span>{{ t('wallet.detail_remark') }}</span>
+            <span class="remark">{{ remarkText }}</span>
+          </div>
+        </div>
+        <button v-if="tx.betNo" type="button" class="bet-link" @click="goBetDetail">
+          {{ t('wallet.detail_bet_link') }} · {{ tx.betNo }}
+        </button>
+        <button v-if="cashbackBatchNo" type="button" class="bet-link" @click="goCashbackDetail">
+          {{ t('wallet.detail_cashback_link') }} · {{ cashbackBatchNo }}
+        </button>
+      </section>
+
+      <section class="section">
+        <div class="section-title">{{ t('wallet.detail_tx_id') }}</div>
+        <div class="tx-id">{{ tx.transactionId }}</div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.detail-page {
+  padding-bottom: 32px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.top-bar {
+  margin-bottom: 4px;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: var(--primary-light, #d4af37);
+  font-size: 15px;
+  font-weight: 700;
+  padding: 4px 0 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.state {
+  text-align: center;
+  padding: 60px 20px;
+  color: #666;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hero {
+  border-radius: 14px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  text-align: center;
+  background: #141414;
+  border: 1px solid #222;
+}
+
+.hero.pos {
+  border-color: rgba(212, 175, 55, 0.25);
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.03));
+}
+
+.hero.neg {
+  border-color: rgba(224, 80, 80, 0.2);
+  background: linear-gradient(135deg, rgba(224, 80, 80, 0.1), rgba(224, 80, 80, 0.03));
+}
+
+.hero.zero {
+  border-color: rgba(255, 255, 255, 0.08);
+  background: #141414;
+}
+
+.hero-type {
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #888;
+}
+
+.hero-summary {
+  font-size: 13px;
+  font-weight: 600;
+  color: #bbb;
+  max-width: 100%;
+  word-break: break-all;
+}
+
+.hero-amount {
+  font-size: 34px;
+  font-weight: 900;
+  line-height: 1.1;
+}
+
+.hero.pos .hero-amount { color: var(--primary-light); }
+.hero.neg .hero-amount { color: var(--danger); }
+.hero.zero .hero-amount { color: var(--text-muted, #888); }
+
+.hero-time {
+  font-size: 11px;
+  color: #555;
+  font-weight: 600;
+}
+
+.section {
+  background: #141414;
+  border: 1px solid #222;
+  border-radius: 12px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+}
+
+.section-title {
+  font-size: 12px;
+  font-weight: 800;
+  color: #888;
+  letter-spacing: 0.04em;
+  margin-bottom: 10px;
+}
+
+.summary-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.sum-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  font-size: 13px;
+  color: #aaa;
+}
+
+.sum-row span:last-child {
+  color: #f0f0f0;
+  font-weight: 700;
+  text-align: right;
+  word-break: break-all;
+}
+
+.pos { color: var(--primary-light) !important; }
+.neg { color: var(--danger) !important; }
+.zero { color: var(--text-muted, #888) !important; }
+
+.mono {
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+.remark {
+  max-width: 60%;
+  line-height: 1.4;
+}
+
+.bet-link {
+  width: 100%;
+  margin-top: 12px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border-gold-soft, rgba(212, 175, 55, 0.35));
+  background: rgba(212, 175, 55, 0.08);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.tx-id {
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  color: #ccc;
+  word-break: break-all;
+  line-height: 1.5;
+}
+</style>
diff --git a/apps/player/src/views/MobileWalletView.vue b/apps/player/src/views/MobileWalletView.vue
new file mode 100644
index 0000000..45e2cf9
--- /dev/null
+++ b/apps/player/src/views/MobileWalletView.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { ref, onActivated, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
+import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../utils/walletTx';
+import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+
+const router = useRouter();
+const { t, locale } = useI18n();
+
+type Transaction = {
+  transactionType: string;
+  displayType?: string;
+  summary?: string | null;
+  summaryKind?: 'opening_bonus' | null;
+  referenceType?: string | null;
+  amount: string;
+  frozenBefore?: string;
+  frozenAfter?: string;
+  createdAt: string;
+  transactionId: string;
+};
+
+const items = ref<Transaction[]>([]);
+const cashbackTotal = ref<string>('0');
+const loading = ref(true);
+const PREVIEW_COUNT = 15;
+
+function txLabel(tx: Transaction): string {
+  const key = txTypeKey(txDisplayType(tx));
+  if (key) {
+    const translated = t(key);
+    if (translated !== key) return translated;
+  }
+  return tx.transactionType;
+}
+
+function txSubtitle(tx: Transaction): string {
+  return txSummaryLabel(tx, t);
+}
+
+function goDetail(tx: Transaction) {
+  if (!tx.transactionId) return;
+  router.push(`/wallet/transactions/${tx.transactionId}`);
+}
+
+function goCashbacks() {
+  router.push('/wallet/cashbacks');
+}
+
+async function fetchData() {
+  loading.value = true;
+  try {
+    const [txRes, cbRes] = await Promise.all([
+      api.get('/player/wallet/transactions', { params: { page: 1 } }),
+      api.get('/player/cashbacks').catch(() => ({ data: { data: [] } })),
+    ]);
+    const result = txRes.data.data ?? { items: [] };
+    items.value = (result.items ?? []).slice(0, PREVIEW_COUNT);
+    const cbRows = parseCashbackApiData(cbRes.data?.data);
+    cashbackTotal.value = sumCashbackAmount(cbRows).toString();
+  } catch {
+    /* ignore */
+  } finally {
+    loading.value = false;
+  }
+}
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: fetchData,
+});
+
+onMounted(fetchData);
+onActivated(fetchData);
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+</script>
+
+<template>
+  <div class="wallet-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+      <span class="loading-text">{{ t('bet.loading') }}</span>
+    </div>
+
+    <template v-else>
+      <div class="top-bar">
+        <button type="button" class="more-link secondary" @click="goCashbacks">
+          {{ t('wallet.view_cashbacks_detail') }} &#x203A;
+        </button>
+        <button
+          v-if="items.length"
+          type="button"
+          class="more-link"
+          @click="router.push('/wallet/detail')"
+        >{{ t('wallet.view_all') }} &#x203A;</button>
+      </div>
+
+      <div v-if="items.length" class="tx-list">
+        <button
+          v-for="tx in items"
+          :key="tx.transactionId"
+          type="button"
+          class="tx-row"
+          @click="goDetail(tx)"
+        >
+          <div class="tx-main">
+            <div class="tx-text">
+              <span class="tx-type">{{ txLabel(tx) }}</span>
+              <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
+            </div>
+            <span :class="txAmountClass(tx.amount)">
+              {{ formatMoney(tx.amount, locale) }}
+            </span>
+          </div>
+          <div class="tx-meta">
+            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+            <span class="tx-arrow">&#x203A;</span>
+          </div>
+        </button>
+      </div>
+
+      <div v-if="!items.length" class="empty">
+        {{ t('wallet.no_records') }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.wallet-page {
+  padding-bottom: 24px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--text-muted);
+  padding: 56px 20px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.loading-text {
+  font-size: 13px;
+}
+
+.tx-list {
+  margin-bottom: 0;
+}
+
+.tx-row {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font-size: 14px;
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
+  cursor: pointer;
+}
+
+.tx-row:last-child {
+  border-bottom: none;
+}
+
+.tx-row:active {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.tx-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.tx-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.tx-summary {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tx-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.tx-type { font-weight: 700; color: var(--text); }
+.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
+.neg { color: var(--danger); font-weight: 700; }
+.zero { color: var(--text-muted); font-weight: 700; font-size: 15px; }
+.tx-time { font-size: 11px; color: var(--text-muted); }
+.tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 4px 2px;
+  margin-top: -8px;
+}
+
+.top-bar .more-link.secondary {
+  color: #f0b90b;
+}
+
+.more-link {
+  background: none;
+  border: none;
+  color: var(--primary-light);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 6px;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+}
+
+.more-link:active {
+  opacity: 1;
+}
+
+.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
+</style>
diff --git a/apps/player/src/views/MyBetsView.vue b/apps/player/src/views/MyBetsView.vue
index 775296a..84273e6 100644
--- a/apps/player/src/views/MyBetsView.vue
+++ b/apps/player/src/views/MyBetsView.vue
@@ -1,225 +1,10 @@
 <script setup lang="ts">
-import { ref, onActivated, onMounted, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import api from '../api';
-import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
-import BetStatsPanel from '../components/BetStatsPanel.vue';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { useOnLocaleChange } from '../composables/useOnLocaleChange';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-
-const { t } = useI18n();
-
-const items = ref<BetHistoryItem[]>([]);
-const total = ref(0);
-const page = ref(1);
-const loading = ref(false);
-const initialLoading = ref(true);
-const hasMore = ref(true);
-const statusFilter = ref('');
-
-const sentinel = ref<HTMLElement | null>(null);
-let observer: IntersectionObserver | null = null;
-
-const FILTERS = [
-  { key: '', label: 'history.filter_all' },
-  { key: 'WON', label: 'history.filter_won' },
-  { key: 'LOST', label: 'history.filter_lost' },
-  { key: 'PENDING', label: 'history.filter_pending' },
-  { key: 'PUSH', label: 'history.filter_push' },
-];
-
-async function loadPage(p: number) {
-  if (loading.value) return;
-  loading.value = true;
-  try {
-    const params: Record<string, unknown> = { page: p };
-    if (statusFilter.value) params.status = statusFilter.value;
-    const { data } = await api.get('/player/bets', { params });
-    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
-    total.value = result.total ?? 0;
-    const pageSize = result.pageSize ?? 20;
-    if (p === 1) {
-      items.value = result.items ?? [];
-    } else {
-      items.value = [...items.value, ...(result.items ?? [])];
-    }
-    hasMore.value = items.value.length < total.value && (result.items?.length ?? 0) >= pageSize;
-    page.value = p;
-  } finally {
-    loading.value = false;
-    initialLoading.value = false;
-  }
-}
-
-async function reset() {
-  items.value = [];
-  total.value = 0;
-  page.value = 1;
-  hasMore.value = true;
-  initialLoading.value = true;
-  loadPage(1);
-}
-
-function changeFilter(key: string) {
-  if (statusFilter.value === key) return;
-  statusFilter.value = key;
-  reset();
-}
-
-useOnLocaleChange(reset);
-
-const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
-  onRefresh: async () => { await loadPage(1); },
-});
-
-onActivated(() => { void loadPage(1); });
-
-onMounted(() => {
-  observer = new IntersectionObserver(
-    (entries) => {
-      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
-        loadPage(page.value + 1);
-      }
-    },
-    { rootMargin: '200px' },
-  );
-  if (sentinel.value) observer.observe(sentinel.value);
-});
-
-onUnmounted(() => {
-  observer?.disconnect();
-});
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
+import { useViewport } from '../composables/useViewport';
+import MobileMyBetsView from './MobileMyBetsView.vue';
+import DesktopMyBetsView from './desktop/DesktopMyBetsView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="history-page">
-    <div
-      class="pull-indicator"
-      :style="pullIndicatorStyle()"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <div v-if="initialLoading" class="state">
-      <GoldSpinner :size="36" />
-      <span class="loading-text">{{ t('bet.loading') }}</span>
-    </div>
-
-    <template v-else>
-      <BetStatsPanel :items="items" />
-
-      <div class="filter-tabs">
-        <button
-          v-for="f in FILTERS"
-          :key="f.key"
-          type="button"
-          class="filter-tab"
-          :class="{ active: statusFilter === f.key }"
-          @click="changeFilter(f.key)"
-        >
-          {{ t(f.label) }}
-        </button>
-      </div>
-
-      <template v-if="items.length">
-        <BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
-
-        <div ref="sentinel" class="sentinel" />
-
-        <div v-if="loading" class="load-more-spinner">
-          <GoldSpinner :size="24" />
-        </div>
-
-        <div v-else-if="!hasMore && items.length > 0" class="end-hint">
-          {{ t('common.no_more') }}
-        </div>
-      </template>
-
-      <div v-else class="state">{{ t('history.empty') }}</div>
-    </template>
-  </div>
+  <DesktopMyBetsView v-if="isDesktop" />
+  <MobileMyBetsView v-else />
 </template>
-
-<style scoped>
-.history-page {
-  padding-bottom: 24px;
-}
-
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.filter-tabs {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 12px;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-
-.filter-tabs::-webkit-scrollbar { display: none; }
-
-.filter-tab {
-  flex-shrink: 0;
-  padding: 7px 14px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--text-muted);
-  background: #141414;
-  border: 1px solid #2a2a2a;
-  transition: all 0.2s;
-}
-
-.filter-tab.active {
-  color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.1);
-  border-color: var(--border-gold-soft);
-}
-
-.state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-  color: var(--text-muted);
-  padding: 56px 20px;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.loading-text {
-  font-size: 13px;
-}
-
-.sentinel {
-  height: 1px;
-}
-
-.load-more-spinner {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0 8px;
-}
-
-.end-hint {
-  text-align: center;
-  font-size: 12px;
-  color: #555;
-  font-weight: 600;
-  padding: 16px 0 4px;
-  letter-spacing: 0.03em;
-}
-</style>
diff --git a/apps/player/src/views/OutrightDetailView.vue b/apps/player/src/views/OutrightDetailView.vue
new file mode 100644
index 0000000..3208a44
--- /dev/null
+++ b/apps/player/src/views/OutrightDetailView.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useViewport } from '../composables/useViewport';
+import MobileOutrightDetailView from './MobileOutrightDetailView.vue';
+import DesktopOutrightDetailView from './desktop/DesktopOutrightDetailView.vue';
+
+const { isDesktop } = useViewport();
+</script>
+
+<template>
+  <DesktopOutrightDetailView v-if="isDesktop" />
+  <MobileOutrightDetailView v-else />
+</template>
diff --git a/apps/player/src/views/ProfileEditView.vue b/apps/player/src/views/ProfileEditView.vue
index 4b98dbc..ade1308 100644
--- a/apps/player/src/views/ProfileEditView.vue
+++ b/apps/player/src/views/ProfileEditView.vue
@@ -1,564 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
-import api from '../api';
-import PlayerAvatarModal from '../components/PlayerAvatarModal.vue';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePlayerProfile } from '../composables/usePlayerProfile';
-import { useAuthStore } from '../stores/auth';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-
-const { t } = useI18n();
-const router = useRouter();
-const auth = useAuthStore();
-const { loadProfile, setAvatarKey, profileRaw, avatarUrl, avatarKey } = usePlayerProfile();
-
-const username = ref('');
-const viewablePassword = ref('');
-const passwordVisible = ref(false);
-const phone = ref('');
-const email = ref('');
-const avatarModalOpen = ref(false);
-const passwordChangeOpen = ref(false);
-const oldPassword = ref('');
-const newPassword = ref('');
-const confirmPassword = ref('');
-const message = ref('');
-const error = ref('');
-const saving = ref(false);
-
-const allowPasswordChange = computed(
-  () => profileRaw.value?.preferences?.allowPasswordChange ?? true,
-);
-const allowUsernameChange = computed(
-  () => profileRaw.value?.preferences?.allowUsernameChange ?? false,
-);
-
-const passwordDisplay = computed(() => viewablePassword.value || '');
-const canTogglePassword = computed(() => !!viewablePassword.value);
-const passwordInputType = computed(() =>
-  passwordVisible.value && canTogglePassword.value ? 'text' : 'password',
-);
-
-const displayAvatarUrl = computed(() => {
-  if (avatarUrl.value) return avatarUrl.value;
-  const seed = profileRaw.value?.username ?? auth.user?.username;
-  return seed ? playerAvatarUrl(randomAvatarKey(seed)) : null;
-});
-
-function syncFromProfile() {
-  const user = profileRaw.value;
-  username.value = user?.username ?? auth.user?.username ?? '';
-  viewablePassword.value = user?.preferences?.viewablePassword ?? '';
-  phone.value = user?.preferences?.phone ?? '';
-  email.value = user?.preferences?.email ?? '';
-}
-
-function togglePasswordVisible() {
-  if (!canTogglePassword.value) return;
-  passwordVisible.value = !passwordVisible.value;
-}
-
-async function loadEditData() {
-  await loadProfile(true);
-  syncFromProfile();
-}
-
-onMounted(loadEditData);
-
-const { pullDistance, spinning, progress } = usePullToRefresh({
-  onRefresh: loadEditData,
-});
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
-
-function openAvatarModal() {
-  avatarModalOpen.value = true;
-}
-
-async function confirmAvatar(key: string | null) {
-  avatarModalOpen.value = false;
-  try {
-    await api.patch('/player/profile', { avatarKey: key });
-    setAvatarKey(key);
-  } catch (e: unknown) {
-    setAvatarKey(key);
-    error.value =
-      (e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
-      t('profile.save_failed');
-  }
-}
-
-function wantsPasswordChange() {
-  return !!(oldPassword.value || newPassword.value || confirmPassword.value);
-}
-
-async function saveAll() {
-  error.value = '';
-  message.value = '';
-
-  if (wantsPasswordChange()) {
-    if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
-      error.value = t('profile.password_incomplete');
-      return;
-    }
-    if (newPassword.value !== confirmPassword.value) {
-      error.value = t('profile.password_mismatch');
-      return;
-    }
-  }
-
-  saving.value = true;
-  const parts: string[] = [];
-
-  try {
-    const profilePayload: { phone?: string; email?: string; username?: string } = {
-      phone: phone.value.trim() || undefined,
-      email: email.value.trim() || undefined,
-    };
-    if (allowUsernameChange.value) {
-      profilePayload.username = username.value.trim();
-    }
-    await api.patch('/player/profile', profilePayload);
-    if (allowUsernameChange.value && username.value.trim() && auth.user) {
-      auth.user.username = username.value.trim();
-    }
-    parts.push(t('profile.saved'));
-    if (allowUsernameChange.value && profilePayload.username) {
-      parts.push(t('profile.username_updated'));
-    }
-  } catch (e: unknown) {
-    error.value =
-      (e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
-      t('profile.save_failed');
-    saving.value = false;
-    return;
-  }
-
-  if (wantsPasswordChange()) {
-    if (!allowPasswordChange.value) {
-      error.value = t('profile.password_disabled');
-      saving.value = false;
-      return;
-    }
-    try {
-      await api.post('/player/auth/change-password', {
-        oldPassword: oldPassword.value,
-        newPassword: newPassword.value,
-      });
-      viewablePassword.value = newPassword.value;
-      passwordVisible.value = false;
-      oldPassword.value = '';
-      newPassword.value = '';
-      confirmPassword.value = '';
-      passwordChangeOpen.value = false;
-      parts.push(t('profile.password_changed'));
-    } catch (e: unknown) {
-      error.value =
-        (e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
-        t('profile.password_failed');
-      saving.value = false;
-      return;
-    }
-  }
-
-  message.value = parts.join(' · ');
-  saving.value = false;
-}
-
-function back() {
-  router.push('/profile');
-}
+import { useViewport } from '../composables/useViewport';
+import MobileProfileEditView from './MobileProfileEditView.vue';
+import DesktopProfileEditView from './desktop/DesktopProfileEditView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="edit-page">
-    <div
-      class="pull-indicator"
-      :style="pullIndicatorStyle()"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <header class="page-head">
-      <button type="button" class="back-btn" @click="back">← {{ t('profile.back') }}</button>
-      <h2 class="page-title">{{ t('profile.edit') }}</h2>
-    </header>
-
-    <section class="avatar-card">
-      <div class="avatar-circle">
-        <img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="avatar-img" />
-      </div>
-      <button type="button" class="avatar-change-btn" @click="openAvatarModal">
-        {{ t('profile.avatar_change') }}
-      </button>
-    </section>
-
-    <form class="form-card" @submit.prevent="saveAll">
-      <h3 class="section-title">{{ t('profile.section_account') }}</h3>
-
-      <div class="field">
-        <label>{{ t('auth.username') }}</label>
-        <input
-          v-model="username"
-          class="field-input"
-          :class="{ readonly: !allowUsernameChange }"
-          :disabled="!allowUsernameChange"
-          :placeholder="t('profile.username_placeholder')"
-        />
-        <p v-if="!allowUsernameChange" class="field-hint inline-hint">{{ t('profile.username_readonly_hint') }}</p>
-      </div>
-
-      <div class="field">
-        <label>{{ t('auth.password') }}</label>
-        <div class="input-eye-wrap">
-          <input
-            :type="passwordInputType"
-            :value="passwordDisplay"
-            class="field-input input-with-eye"
-            readonly
-            :placeholder="canTogglePassword ? '' : t('profile.password_unavailable')"
-          />
-          <button
-            type="button"
-            class="eye-btn"
-            :disabled="!canTogglePassword"
-            :aria-label="passwordVisible ? t('profile.hide_password') : t('profile.show_password')"
-            @click="togglePasswordVisible"
-          >
-            {{ passwordVisible ? t('profile.hide_password') : t('profile.show_password') }}
-          </button>
-        </div>
-        <p v-if="!canTogglePassword" class="field-hint inline-hint">{{ t('profile.password_unavailable_hint') }}</p>
-      </div>
-
-      <template v-if="allowPasswordChange">
-        <button type="button" class="section-toggle compact-toggle" @click="passwordChangeOpen = !passwordChangeOpen">
-          <span>{{ t('profile.change_password') }}</span>
-          <span class="chevron" :class="{ open: passwordChangeOpen }">›</span>
-        </button>
-        <div v-show="passwordChangeOpen" class="password-block">
-          <div class="field">
-            <label>{{ t('profile.old_password') }}</label>
-            <input
-              v-model="oldPassword"
-              type="password"
-              class="field-input"
-              autocomplete="current-password"
-              :placeholder="t('profile.old_password_placeholder')"
-            />
-          </div>
-          <div class="field">
-            <label>{{ t('profile.new_password') }}</label>
-            <input
-              v-model="newPassword"
-              type="password"
-              class="field-input"
-              autocomplete="new-password"
-              :placeholder="t('profile.new_password_placeholder')"
-            />
-          </div>
-          <div class="field">
-            <label>{{ t('profile.confirm_password') }}</label>
-            <input
-              v-model="confirmPassword"
-              type="password"
-              class="field-input"
-              autocomplete="new-password"
-              :placeholder="t('profile.confirm_password_placeholder')"
-            />
-          </div>
-        </div>
-      </template>
-
-      <div class="section-divider" />
-
-      <h3 class="section-title">{{ t('profile.section_contact') }}</h3>
-
-      <div class="field">
-        <label>{{ t('profile.phone') }}</label>
-        <input v-model="phone" type="tel" class="field-input" :placeholder="t('profile.phone_placeholder')" />
-      </div>
-      <div class="field field-last">
-        <label>{{ t('profile.email') }}</label>
-        <input v-model="email" type="email" class="field-input" :placeholder="t('profile.email_placeholder')" />
-      </div>
-
-      <button type="submit" class="btn-action btn-gold-outline" :disabled="saving">
-        {{ t('profile.save') }}
-      </button>
-    </form>
-
-    <PlayerAvatarModal
-      :open="avatarModalOpen"
-      :model-value="avatarKey"
-      @close="avatarModalOpen = false"
-      @confirm="confirmAvatar"
-    />
-
-    <p v-if="message" class="msg ok">{{ message }}</p>
-    <p v-if="error" class="msg err">{{ error }}</p>
-  </div>
+  <DesktopProfileEditView v-if="isDesktop" />
+  <MobileProfileEditView v-else />
 </template>
-
-<style scoped>
-.edit-page {
-  padding: 8px 0 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.page-head {
-  margin-bottom: 0;
-}
-
-.back-btn {
-  background: none;
-  color: var(--text-muted);
-  font-size: 13px;
-  font-weight: 600;
-  margin-bottom: 6px;
-  padding: 0;
-}
-
-.page-title {
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--primary-light);
-  letter-spacing: 0.04em;
-}
-
-.avatar-card,
-.form-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-}
-
-.avatar-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 20px 16px;
-}
-
-.avatar-circle {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  border: 2px solid var(--border-gold-soft);
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(145deg, #2a2210, #141008);
-}
-
-.avatar-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: top;
-}
-
-.avatar-change-btn {
-  padding: 7px 18px;
-  border-radius: 999px;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(212, 175, 55, 0.08);
-  color: var(--primary-light);
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.form-card {
-  padding: 16px;
-}
-
-.section-title {
-  margin: 0 0 14px;
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-}
-
-.section-divider {
-  height: 1px;
-  background: var(--border);
-  margin: 6px 0 12px;
-}
-
-.section-toggle {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 0 12px;
-  background: none;
-  color: var(--text);
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.chevron {
-  color: var(--text-muted);
-  font-size: 20px;
-  line-height: 1;
-  transition: transform 0.15s ease;
-}
-
-.chevron.open {
-  transform: rotate(90deg);
-}
-
-.password-block {
-  padding-bottom: 4px;
-}
-
-.field {
-  margin-bottom: 14px;
-}
-
-.field-last {
-  margin-bottom: 18px;
-}
-
-.field-hint {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin: 6px 0 0;
-  line-height: 1.45;
-}
-
-.inline-hint {
-  margin-bottom: 0;
-}
-
-.input-eye-wrap {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-}
-
-.input-with-eye {
-  padding-right: 52px;
-}
-
-.eye-btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  min-width: 48px;
-  padding: 0 10px;
-  border: none;
-  border-left: 1px solid var(--border);
-  border-radius: 0 6px 6px 0;
-  background: rgba(212, 175, 55, 0.06);
-  color: var(--primary-light);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-}
-
-.eye-btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-.compact-toggle {
-  padding: 2px 0 10px;
-  font-size: 13px;
-}
-
-label {
-  display: block;
-  font-size: 11px;
-  color: var(--text-muted);
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.field-input,
-.readonly {
-  display: block;
-  width: 100%;
-  padding: 10px 12px;
-  font-size: 14px;
-  font-weight: 500;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: #0a0a0a;
-  color: var(--text);
-  transition: border-color 0.2s;
-}
-
-.field-input:focus {
-  outline: none;
-  border-color: var(--border-gold-soft);
-  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
-}
-
-.field-input:-webkit-autofill,
-.field-input:-webkit-autofill:hover,
-.field-input:-webkit-autofill:focus {
-  -webkit-text-fill-color: var(--text);
-  box-shadow: 0 0 0 1000px #0a0a0a inset;
-  border: 1px solid var(--border);
-}
-
-.field-input::placeholder {
-  color: #555;
-}
-
-.readonly {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.btn-action {
-  width: 100%;
-  margin-top: 4px;
-  padding: 12px 14px;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-}
-
-.btn-action:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.msg {
-  margin-top: 0;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.msg.ok {
-  color: var(--primary-light);
-}
-
-.msg.err {
-  color: var(--danger);
-}
-</style>
diff --git a/apps/player/src/views/ProfileView.vue b/apps/player/src/views/ProfileView.vue
index d4cab80..c738428 100644
--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -1,728 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, onActivated, computed } from 'vue';
-import { useRouter, RouterLink } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import api from '../api';
-import { formatMoney } from '../utils/localeDisplay';
-import LocaleFlag from '../components/LocaleFlag.vue';
-import { useAuthStore } from '../stores/auth';
-import { useAppLocale } from '../composables/useAppLocale';
-import { usePlayerProfile } from '../composables/usePlayerProfile';
-import { useInboxFeature } from '../composables/useInboxFeature';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
-import walletBg from '../assets/images/wallet-bg.webp';
-
-const { t, locale } = useI18n();
-const router = useRouter();
-const auth = useAuthStore();
-const { locales, setLocale, initFromUser } = useAppLocale();
-const { profileRaw, refreshProfile } = usePlayerProfile();
-const { hubRoute } = useInboxFeature();
-
-const loading = ref(true);
-const error = ref(false);
-const rulesExpanded = ref(false);
-const cashbackTotal = ref('0');
-
-const displayAmount = ref(0);
-const animating = ref(false);
-
-async function fetchProfile() {
-  loading.value = true;
-  error.value = false;
-  try {
-    await refreshProfile();
-    initFromUser(profileRaw.value?.locale);
-    void fetchCashbackTotal();
-  } catch {
-    error.value = true;
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function fetchCashbackTotal() {
-  try {
-    const { data } = await api.get('/player/cashbacks');
-    cashbackTotal.value = sumCashbackAmount(parseCashbackApiData(data.data)).toString();
-  } catch {
-    // Fallback: sum wallet cashback credits when batch detail API is unavailable.
-    try {
-      const { data } = await api.get('/player/wallet/transactions/stats');
-      const byType = data.data?.byType ?? [];
-      let sum = 0;
-      for (const g of byType) {
-        if (['CASHBACK', 'CASHBACK_DEPOSIT'].includes(g.transactionType?.toUpperCase())) {
-          sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
-        }
-      }
-      cashbackTotal.value = sum.toString();
-    } catch {
-      // Keep default value
-    }
-  }
-}
-
-onMounted(() => {
-  void fetchProfile();
-});
-
-onActivated(() => {
-  void fetchProfile();
-});
-
-const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
-  onRefresh: async () => { await fetchProfile(); },
-});
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
-
-async function changeLocale(code: string) {
-  await setLocale(code);
-}
-
-function logout() {
-  auth.logout();
-  router.push('/');
-}
-
-const balanceDisplay = computed(() =>
-  formatMoney(profileRaw.value?.wallet?.availableBalance, locale.value),
-);
-
-const balanceAmountClass = computed(() => {
-  const len = balanceDisplay.value.length;
-  if (len <= 10) return 'balance-amount--xl';
-  if (len <= 13) return 'balance-amount--lg';
-  if (len <= 16) return 'balance-amount--md';
-  if (len <= 19) return 'balance-amount--sm';
-  return 'balance-amount--xs';
-});
+import { useViewport } from '../composables/useViewport';
+import MobileProfileView from './MobileProfileView.vue';
+import DesktopProfileView from './desktop/DesktopProfileView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="profile-page">
-    <div
-      class="pull-indicator"
-      :style="pullIndicatorStyle()"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <div v-if="loading" class="loading-state">
-      <GoldSpinner :size="36" :active="true" />
-    </div>
-
-    <div v-else-if="error" class="error-state">
-      <p class="error-text">{{ t('common.load_failed') }}</p>
-      <button type="button" class="retry-btn" @click="fetchProfile">{{ t('common.retry') }}</button>
-    </div>
-
-    <template v-else>
-    <div class="wallet-banner">
-      <img class="wallet-banner-img" :src="walletBg" alt="" />
-      <div class="wallet-banner-scrim" aria-hidden="true" />
-
-      <div class="card-overlay">
-        <div class="bank-card-top">
-          <div class="bank-card-top-left">
-            <img src="/logo.png" alt="TheBet365" class="brand-logo" />
-            <div class="bank-card-brand-text">
-              <span class="brand-name">THEBET365</span>
-              <span class="bank-card-type">MEMBER</span>
-            </div>
-          </div>
-          <RouterLink to="/wallet/recharge" class="recharge-btn">
-            <span class="recharge-icon">+</span>
-            <span>{{ t('recharge.title') }}</span>
-          </RouterLink>
-        </div>
-
-        <div class="bank-card-balance">
-          <span class="bank-card-label">当前余额</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-holder">{{ profileRaw?.username }}</span>
-          </div>
-          <div class="bank-card-field bank-card-field--center">
-            <span class="bank-card-label">累计返水</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-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <section class="settings-group">
-      <RouterLink to="/wallet/detail" class="settings-cell settings-cell--gold-entry">
-        <span class="cell-main">
-          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-            <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 class="cell-label">{{ t('wallet.view_all') }}</span>
-        </span>
-        <span class="cell-chevron" aria-hidden="true">›</span>
-      </RouterLink>
-
-      <RouterLink to="/profile/cashbacks" class="settings-cell settings-cell--gold-entry">
-        <span class="cell-main">
-          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-            <circle cx="12" cy="12" r="8" />
-            <path d="M12 8v4l2.5 2.5" />
-          </svg>
-          <span class="cell-label">{{ t('wallet.view_cashbacks') }}</span>
-        </span>
-        <span class="cell-chevron" aria-hidden="true">›</span>
-      </RouterLink>
-
-      <RouterLink :to="hubRoute" class="settings-cell settings-cell--gold-entry">
-        <span class="cell-main">
-          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-            <path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11A2.5 2.5 0 0 1 17.5 20H6.5A2.5 2.5 0 0 1 4 17.5v-11Z" />
-            <path d="m4 7 8 5.5L20 7" />
-          </svg>
-          <span class="cell-label">{{ t('messages.title') }}</span>
-        </span>
-        <span class="cell-chevron" aria-hidden="true">›</span>
-      </RouterLink>
-
-      <RouterLink to="/wallet/recharge/history" class="settings-cell settings-cell--gold-entry">
-        <span class="cell-main">
-          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-            <path d="M12 8v8M8 12h8" />
-            <circle cx="12" cy="12" r="8" />
-          </svg>
-          <span class="cell-label">{{ t('recharge.history_title') }}</span>
-        </span>
-        <span class="cell-chevron" aria-hidden="true">›</span>
-      </RouterLink>
-
-      <RouterLink to="/profile/edit" class="settings-cell">
-        <span class="cell-main">
-          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-            <circle cx="12" cy="8" r="3.5" />
-            <path d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6" />
-          </svg>
-          <span class="cell-label">{{ t('profile.edit') }}</span>
-        </span>
-        <span class="cell-chevron" aria-hidden="true">›</span>
-      </RouterLink>
-
-      <div class="rules-cell">
-        <button
-          type="button"
-          class="settings-cell rules-toggle"
-          :aria-expanded="rulesExpanded"
-          @click="rulesExpanded = !rulesExpanded"
-        >
-          <span class="cell-main">
-            <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-              <path d="M7 4h10v16H7z" />
-              <path d="M10 8h6M10 12h6M10 16h4" />
-            </svg>
-            <span class="cell-label">{{ t('profile.rules_title') }}</span>
-          </span>
-          <span class="cell-chevron" :class="{ open: rulesExpanded }" aria-hidden="true">›</span>
-        </button>
-        <div v-show="rulesExpanded" class="rules-body">
-          <p>{{ t('profile.rules_p1') }}</p>
-          <p>{{ t('profile.rules_p2') }}</p>
-          <p>{{ t('profile.rules_p3') }}</p>
-          <p>{{ t('profile.rules_p4') }}</p>
-          <p>{{ t('profile.rules_p5') }}</p>
-        </div>
-      </div>
-
-      <div class="settings-cell settings-cell--stack">
-        <div class="cell-head">
-          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-            <circle cx="12" cy="12" r="9" />
-            <path d="M3 12h18M12 3c2.5 2.8 4 6 4 9s-1.5 6.2-4 9M12 3c-2.5 2.8-4 6-4 9s1.5 6.2 4 9" />
-          </svg>
-          <span class="cell-label">{{ t('profile.language') }}</span>
-        </div>
-        <div class="lang-segment" role="group" :aria-label="t('profile.language')">
-          <button
-            v-for="item in locales"
-            :key="item.code"
-            type="button"
-            class="lang-opt"
-            :class="{ active: locale === item.code }"
-            @click="changeLocale(item.code)"
-          >
-            <LocaleFlag :locale="item.code" :size="14" />
-            <span>{{ item.label }}</span>
-          </button>
-        </div>
-      </div>
-    </section>
-
-    <button type="button" class="logout-btn" @click="logout">
-      {{ t('auth.logout') }}
-    </button>
-    </template>
-  </div>
+  <DesktopProfileView v-if="isDesktop" />
+  <MobileProfileView v-else />
 </template>
-
-<style scoped>
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.profile-page {
-  padding: 8px 0 12px;
-}
-
-.loading-state {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 60vh;
-}
-
-.error-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  min-height: 60vh;
-}
-
-.error-text {
-  color: var(--text-muted);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.retry-btn {
-  padding: 8px 24px;
-  border-radius: 6px;
-  border: 1px solid var(--primary);
-  background: transparent;
-  color: var(--primary-light);
-  font-size: 13px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.retry-btn:active {
-  background: rgba(200, 168, 78, 0.15);
-}
-
-.wallet-banner {
-  position: relative;
-  width: 100%;
-  margin-bottom: 12px;
-  aspect-ratio: 2 / 1;
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow:
-    0 3px 10px rgba(0, 0, 0, 0.28),
-    0 1px 3px rgba(0, 0, 0, 0.18);
-}
-
-.wallet-banner::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  border-radius: inherit;
-  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.22);
-  pointer-events: none;
-}
-
-.wallet-banner-img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-  object-position: center center;
-  transform: scale(1.12);
-  transform-origin: center center;
-  filter: brightness(0.86);
-  pointer-events: none;
-  user-select: none;
-}
-
-.wallet-banner-scrim {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  pointer-events: none;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.4) 0%,
-    rgba(0, 0, 0, 0.18) 42%,
-    rgba(0, 0, 0, 0.46) 100%
-  );
-}
-
-.card-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 3;
-  display: flex;
-  flex-direction: column;
-  padding: 14px 16px 12px;
-  line-height: 1.3;
-  -webkit-font-smoothing: antialiased;
-}
-
-.bank-card-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  flex-shrink: 0;
-}
-
-.bank-card-top-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.brand-logo {
-  width: 22px;
-  height: 22px;
-  flex-shrink: 0;
-  object-fit: contain;
-}
-
-.bank-card-brand-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.brand-name {
-  font-size: 11px;
-  font-weight: 700;
-  color: #fff;
-  letter-spacing: 0.14em;
-  line-height: 1;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-}
-
-.bank-card-type {
-  font-size: 8px;
-  font-weight: 800;
-  letter-spacing: 0.14em;
-  color: rgba(212, 175, 55, 0.65);
-  font-style: italic;
-  line-height: 1;
-}
-
-.bank-card-label {
-  display: block;
-  font-size: 9px;
-  font-weight: 600;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.82);
-  line-height: 1.3;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
-}
-
-.recharge-btn {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 5px 10px;
-  border-radius: 14px;
-  background: rgba(0, 0, 0, 0.45);
-  border: 1px solid rgba(212, 175, 55, 0.35);
-  color: var(--primary-light);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  text-decoration: none;
-  backdrop-filter: blur(6px);
-  transition: background 0.15s ease;
-}
-
-.recharge-btn:active {
-  background: rgba(212, 175, 55, 0.15);
-}
-
-.recharge-icon {
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.bank-card-balance {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 0;
-  padding: 2px 0;
-  gap: 5px;
-}
-
-.bank-card-number {
-  margin: 0;
-  font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
-  font-weight: 700;
-  font-style: normal;
-  font-variant-numeric: tabular-nums;
-  color: var(--primary-light);
-  line-height: 1.1;
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
-}
-
-.balance-amount {
-  margin: 0;
-}
-
-.balance-amount--xl { font-size: clamp(24px, 6.2vw, 30px); }
-.balance-amount--lg { font-size: clamp(21px, 5.6vw, 26px); }
-.balance-amount--md { font-size: clamp(18px, 4.9vw, 22px); }
-.balance-amount--sm { font-size: clamp(16px, 4.2vw, 19px); }
-.balance-amount--xs { font-size: clamp(14px, 3.6vw, 16px); }
-
-.bank-card-footer {
-  flex-shrink: 0;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.bank-card-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-
-.bank-card-field--center { text-align: center; }
-.bank-card-field--right { text-align: right; }
-
-.bank-card-holder {
-  font-size: 12px;
-  font-weight: 700;
-  color: #fff;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  line-height: 1.2;
-  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-  word-break: break-all;
-}
-
-.bank-card-stat {
-  font-size: 12px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: #fff;
-  line-height: 1.2;
-  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-}
-
-
-.settings-group {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-
-.settings-cell {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  min-height: 48px;
-  padding: 0 16px;
-  background: none;
-  color: var(--text);
-  font-size: 14px;
-  font-weight: 600;
-  text-decoration: none;
-  border-bottom: 1px solid var(--border);
-}
-
-.settings-cell:last-child {
-  border-bottom: none;
-}
-
-.settings-cell:active {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.settings-cell--gold-entry {
-  position: relative;
-  min-height: 50px;
-  border-color: rgba(212, 175, 55, 0.18);
-  border-bottom-color: rgba(212, 175, 55, 0.18);
-  background:
-    linear-gradient(90deg, rgba(212, 175, 55, 0.08), rgba(20, 20, 20, 0.65) 46%, rgba(212, 175, 55, 0.04));
-  box-shadow:
-    inset 1px 0 0 rgba(212, 175, 55, 0.22),
-    inset 0 1px 0 rgba(255, 244, 200, 0.05);
-}
-
-.settings-cell--gold-entry:active {
-  background:
-    linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(20, 20, 20, 0.74) 46%, rgba(212, 175, 55, 0.06));
-}
-
-.settings-cell--gold-entry .cell-label {
-  color: #f4dc8b;
-  font-weight: 800;
-}
-
-.settings-cell--gold-entry .cell-chevron {
-  color: rgba(240, 216, 117, 0.78);
-}
-
-.settings-cell--stack {
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
-  gap: 10px;
-  padding: 12px 16px 14px;
-  min-height: auto;
-}
-
-.cell-main {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.cell-icon {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-  color: var(--text-muted);
-}
-
-.settings-cell--gold-entry .cell-icon {
-  color: var(--primary-light);
-}
-
-.cell-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.cell-label {
-  color: var(--text);
-}
-
-.cell-chevron {
-  color: var(--text-muted);
-  font-size: 20px;
-  line-height: 1;
-  font-weight: 300;
-  transition: transform 0.15s ease;
-}
-
-.cell-chevron.open {
-  transform: rotate(90deg);
-}
-
-.rules-toggle {
-  border: none;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.rules-cell .rules-body {
-  padding: 0 16px 14px;
-  border-bottom: 1px solid var(--border);
-}
-
-.lang-segment {
-  display: flex;
-  gap: 6px;
-}
-
-.lang-opt {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  min-height: 34px;
-  padding: 0 6px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: #0a0a0a;
-  color: var(--text-muted);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.lang-opt.active {
-  border-color: var(--border-gold-soft);
-  color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.1);
-}
-
-.logout-btn {
-  width: 100%;
-  margin-top: 12px;
-  min-height: 44px;
-  padding: 0 16px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: var(--bg-card);
-  color: var(--danger);
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.logout-btn:active {
-  background: rgba(255, 69, 58, 0.08);
-}
-
-.rules-body {
-  font-size: 12px;
-  line-height: 1.55;
-  color: var(--text-muted);
-}
-
-.rules-body p {
-  margin: 0 0 8px;
-}
-
-.rules-body p:last-child {
-  margin-bottom: 0;
-}
-</style>
diff --git a/apps/player/src/views/RechargeHistoryView.vue b/apps/player/src/views/RechargeHistoryView.vue
index e035e03..a71b00c 100644
--- a/apps/player/src/views/RechargeHistoryView.vue
+++ b/apps/player/src/views/RechargeHistoryView.vue
@@ -1,851 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import api from '../api';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-import { formatMoney } from '../utils/localeDisplay';
-import {
-  auditActionTone,
-  auditActorSecondary,
-  formatDepositAuditRemark,
-  shouldShowAuditRejectInTimeline,
-} from '../utils/depositAuditDisplay';
-import { useDepositNotifications } from '../composables/useDepositNotifications';
-
-const router = useRouter();
-const { t, locale } = useI18n();
-const { trackPendingOrder, pollOnce } = useDepositNotifications();
-
-interface DepositAuditLog {
-  id: string;
-  action: string;
-  actorType: string;
-  statusBefore: string | null;
-  statusAfter: string;
-  amount: string | null;
-  approvedAmount: string | null;
-  remark: string | null;
-  createdAt: string;
-}
-
-interface DepositOrder {
-  id: string;
-  orderNo: string;
-  paymentMethodId?: string;
-  methodType: string;
-  amount: string;
-  status: string;
-  approvedAmount: string | null;
-  rejectReason: string | null;
-  remark: string | null;
-  createdAt: string;
-  reviewedAt: string | null;
-  paymentMethodName: string | null;
-  auditLogs?: DepositAuditLog[];
-}
-
-const items = ref<DepositOrder[]>([]);
-const loading = ref(false);
-const initialLoading = ref(true);
-const page = ref(1);
-const total = ref(0);
-const hasMore = ref(true);
-
-const sentinel = ref<HTMLElement | null>(null);
-let observer: IntersectionObserver | null = null;
-
-const selectedOrder = ref<DepositOrder | null>(null);
-
-async function fetchOrders(p = 1) {
-  if (loading.value) return;
-  loading.value = true;
-  try {
-    const { data } = await api.get('/player/deposit-orders', { params: { page: p } });
-    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
-    const newItems = result.items ?? [];
-
-    if (p === 1) {
-      items.value = newItems;
-      for (const order of newItems) {
-        if (order.status === 'PENDING') trackPendingOrder(order.id);
-      }
-      void pollOnce();
-    } else {
-      items.value = [...items.value, ...newItems];
-    }
-
-    total.value = result.total ?? 0;
-    const pageSize = result.pageSize ?? 20;
-    hasMore.value = newItems.length >= pageSize && items.value.length < total.value;
-    page.value = p;
-  } catch { /* */ } finally {
-    loading.value = false;
-    initialLoading.value = false;
-  }
-}
-
-const { pullDistance, spinning, progress } = usePullToRefresh({
-  onRefresh: async () => { await fetchOrders(1); },
-});
-
-onMounted(() => {
-  fetchOrders(1);
-  observer = new IntersectionObserver(
-    (entries) => {
-      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
-        fetchOrders(page.value + 1);
-      }
-    },
-    { rootMargin: '200px' },
-  );
-  if (sentinel.value) observer.observe(sentinel.value);
-});
-
-onUnmounted(() => {
-  observer?.disconnect();
-});
-
-function statusClass(s: string) {
-  if (s === 'APPROVED') return 'status-approved';
-  if (s === 'REJECTED') return 'status-rejected';
-  return 'status-pending';
-}
-
-function statusLabel(s: string) {
-  if (s === 'APPROVED') return t('recharge.status_approved');
-  if (s === 'REJECTED') return t('recharge.status_rejected');
-  return t('recharge.status_pending');
-}
-
-function goBack() {
-  router.push('/wallet');
-}
-
-function goRecharge() {
-  router.push('/wallet/recharge');
-}
-
-function openDetail(order: DepositOrder) {
-  selectedOrder.value = order;
-}
-
-function closeDetail() {
-  selectedOrder.value = null;
-}
-
-function reapply(order: DepositOrder) {
-  const query: Record<string, string> = {
-    orderId: order.id,
-    methodType: order.methodType,
-    amount: order.amount,
-  };
-  if (order.paymentMethodId) {
-    query.methodId = order.paymentMethodId;
-  }
-  router.push({ path: '/wallet/recharge', query });
-}
-
-function normalizeText(value: string | null | undefined) {
-  return value?.trim() ?? '';
-}
-
-/** Backend sets remark = rejectReason on reject; show one line only. */
-function orderNote(order: DepositOrder): { label: string; text: string } | null {
-  const rejectReason = normalizeText(order.rejectReason);
-  const remark = normalizeText(order.remark);
-
-  if (order.status === 'REJECTED') {
-    const text = rejectReason || remark;
-    if (!text) return null;
-    return { label: t('recharge.reject_reason'), text };
-  }
-
-  if (remark) {
-    return { label: t('recharge.remark'), text: remark };
-  }
-
-  return null;
-}
-
-function orderNoteLine(order: DepositOrder) {
-  const note = orderNote(order);
-  return note ? `${note.label}: ${note.text}` : null;
-}
-
-function auditActionLabel(action: string) {
-  const key = `recharge.audit_${action.toLowerCase()}` as const;
-  const translated = t(key);
-  return translated !== key ? translated : action;
-}
-
-function auditStepClass(action: string) {
-  return `audit-step--${auditActionTone(action)}`;
-}
-
-function formatAuditTime(iso: string) {
-  return new Date(iso).toLocaleString(undefined, {
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
-function formatOrderTime(iso: string) {
-  return new Date(iso).toLocaleString();
-}
-
-function auditRemarkForTimeline(log: DepositAuditLog, order: DepositOrder) {
-  if (log.action === 'REJECTED' && !shouldShowAuditRejectInTimeline(log, order.rejectReason)) {
-    return null;
-  }
-  return formatDepositAuditRemark(log, t);
-}
-
-function auditLogsForDisplay(order: DepositOrder) {
-  return [...(order.auditLogs ?? [])]
-    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-    .map((log) => ({
-      log,
-      actor: auditActorSecondary(log, t),
-      remark: auditRemarkForTimeline(log, order),
-    }));
-}
-
-function auditNoteLine(text: string) {
-  return `${t('recharge.audit_remark_label')}: ${text}`;
-}
-
-function auditNoteDisplayText(remark: { kind: 'note'; text: string }) {
-  if (remark.text === t('wallet.remark_deposit_revoke_generic')) {
-    return remark.text;
-  }
-  return auditNoteLine(remark.text);
-}
-
-function auditStepCount(order: DepositOrder) {
-  return order.auditLogs?.length ?? 0;
-}
+import { useViewport } from '../composables/useViewport';
+import MobileRechargeHistoryView from './MobileRechargeHistoryView.vue';
+import DesktopRechargeHistoryView from './desktop/DesktopRechargeHistoryView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="recharge-history-page">
-    <div class="page-header">
-      <button class="back-btn" @click="goBack">‹</button>
-      <h2>{{ t('recharge.history_title') }}</h2>
-      <button class="recharge-btn" @click="goRecharge">+ {{ t('recharge.title') }}</button>
-    </div>
-
-    <div
-      class="pull-indicator"
-      :style="{ height: `${pullDistance}px`, opacity: Math.min(pullDistance / 48, 1) }"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <div v-if="initialLoading && loading" class="state">
-      <GoldSpinner :size="36" />
-    </div>
-
-    <template v-else>
-      <div v-if="!items.length" class="empty">{{ t('recharge.no_orders') }}</div>
-
-      <div v-else class="order-list">
-        <div
-          v-for="order in items"
-          :key="order.id"
-          class="order-card"
-          :class="{ rejected: order.status === 'REJECTED' }"
-          role="button"
-          tabindex="0"
-          @click="openDetail(order)"
-          @keydown.enter="openDetail(order)"
-        >
-          <div class="order-header">
-            <span class="method-badge" :class="order.methodType === 'BANK' ? 'bank' : 'usdt'">{{ order.methodType }}</span>
-            <span :class="['status-badge', statusClass(order.status)]">{{ statusLabel(order.status) }}</span>
-          </div>
-          <div class="order-body">
-            <div class="order-amount">{{ formatMoney(order.amount, locale) }}</div>
-            <div v-if="order.approvedAmount && order.approvedAmount !== order.amount" class="approved-amount">
-              {{ t('recharge.credited') }}: {{ formatMoney(order.approvedAmount, locale) }}
-            </div>
-            <div class="order-info-row">
-              <span class="info-label">{{ order.paymentMethodName || '-' }}</span>
-            </div>
-            <div class="order-times">
-              <div class="time-row">
-                <span class="time-label">{{ t('recharge.apply_time') }}</span>
-                <span class="time-value">{{ formatOrderTime(order.createdAt) }}</span>
-              </div>
-              <div v-if="order.reviewedAt" class="time-row">
-                <span class="time-label">{{ t('recharge.review_time') }}</span>
-                <span class="time-value">{{ formatOrderTime(order.reviewedAt) }}</span>
-              </div>
-            </div>
-            <div
-              v-if="orderNoteLine(order)"
-              :class="order.status === 'REJECTED' ? 'reject-reason' : 'order-remark'"
-            >
-              {{ orderNoteLine(order) }}
-            </div>
-            <div v-if="auditStepCount(order)" class="card-detail-hint">
-              <span class="card-detail-summary">
-                {{ t('recharge.audit_summary', { count: auditStepCount(order) }) }}
-              </span>
-              <span class="card-detail-link">{{ t('recharge.view_detail') }} ›</span>
-            </div>
-            <button
-              v-else
-              type="button"
-              class="card-detail-link-only"
-              @click.stop="openDetail(order)"
-            >
-              {{ t('recharge.view_detail') }} ›
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div ref="sentinel" class="sentinel" />
-
-      <div v-if="loading && items.length > 0" class="load-more-spinner">
-        <GoldSpinner :size="24" />
-      </div>
-
-      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
-        {{ t('common.no_more') }}
-      </div>
-    </template>
-
-    <Teleport to="body">
-      <div v-if="selectedOrder" class="detail-overlay" @click.self="closeDetail">
-        <div class="detail-modal" role="dialog" aria-modal="true" :aria-label="t('recharge.audit_title')">
-          <button type="button" class="detail-close" :aria-label="t('common.close')" @click="closeDetail">✕</button>
-
-          <h3 class="detail-title">{{ t('recharge.audit_title') }}</h3>
-
-          <div class="detail-summary">
-            <div class="detail-summary-head">
-              <span class="method-badge" :class="selectedOrder.methodType === 'BANK' ? 'bank' : 'usdt'">
-                {{ selectedOrder.methodType }}
-              </span>
-              <span :class="['status-badge', statusClass(selectedOrder.status)]">
-                {{ statusLabel(selectedOrder.status) }}
-              </span>
-            </div>
-            <div class="detail-amount">{{ formatMoney(selectedOrder.amount, locale) }}</div>
-            <div
-              v-if="selectedOrder.approvedAmount && selectedOrder.approvedAmount !== selectedOrder.amount"
-              class="approved-amount"
-            >
-              {{ t('recharge.credited') }}: {{ formatMoney(selectedOrder.approvedAmount, locale) }}
-            </div>
-            <div class="detail-method-name">{{ selectedOrder.paymentMethodName || '-' }}</div>
-            <div class="detail-row">
-              <span class="detail-label">{{ t('recharge.apply_time') }}</span>
-              <span class="detail-value">{{ formatOrderTime(selectedOrder.createdAt) }}</span>
-            </div>
-            <div v-if="selectedOrder.reviewedAt" class="detail-row">
-              <span class="detail-label">{{ t('recharge.review_time') }}</span>
-              <span class="detail-value">{{ formatOrderTime(selectedOrder.reviewedAt) }}</span>
-            </div>
-            <div
-              v-if="orderNoteLine(selectedOrder)"
-              :class="selectedOrder.status === 'REJECTED' ? 'reject-reason' : 'order-remark'"
-            >
-              {{ orderNoteLine(selectedOrder) }}
-            </div>
-          </div>
-
-          <div v-if="selectedOrder.auditLogs?.length" class="detail-audit">
-            <h4 class="detail-audit-title">{{ t('recharge.audit_title') }}</h4>
-            <div class="audit-track">
-              <div
-                v-for="(entry, logIdx) in auditLogsForDisplay(selectedOrder)"
-                :key="entry.log.id"
-                class="audit-step"
-                :class="auditStepClass(entry.log.action)"
-              >
-                <div class="audit-step-rail" aria-hidden="true">
-                  <span class="audit-dot" />
-                  <span v-if="logIdx < auditLogsForDisplay(selectedOrder).length - 1" class="audit-line" />
-                </div>
-                <div class="audit-step-body">
-                  <div class="audit-step-head">
-                    <span class="audit-step-title">{{ auditActionLabel(entry.log.action) }}</span>
-                    <time class="audit-step-time">{{ formatAuditTime(entry.log.createdAt) }}</time>
-                  </div>
-                  <p v-if="entry.actor" class="audit-step-actor">{{ entry.actor }}</p>
-                  <p
-                    v-if="entry.log.approvedAmount && entry.log.action === 'APPROVED'"
-                    class="audit-step-credited"
-                  >
-                    {{ t('recharge.audit_credited') }} {{ formatMoney(entry.log.approvedAmount, locale) }}
-                  </p>
-                  <div
-                    v-if="entry.remark?.kind === 'reject'"
-                    class="audit-step-box audit-step-box--reject"
-                  >
-                    <span class="audit-step-box-label">{{ t('recharge.reject_reason') }}</span>
-                    <span class="audit-step-box-text">{{ entry.remark.text }}</span>
-                  </div>
-                  <p v-else-if="entry.remark?.kind === 'note'" class="audit-step-note">
-                    {{ auditNoteDisplayText(entry.remark) }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <button
-            v-if="selectedOrder.status === 'REJECTED'"
-            type="button"
-            class="modal-reapply-btn btn-gold-outline"
-            @click.stop="reapply(selectedOrder)"
-          >
-            {{ t('recharge.reapply') }}
-          </button>
-        </div>
-      </div>
-    </Teleport>
-  </div>
+  <DesktopRechargeHistoryView v-if="isDesktop" />
+  <MobileRechargeHistoryView v-else />
 </template>
-
-<style scoped>
-.recharge-history-page { padding: 0 0 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; }
-.back-btn { background: none; border: none; color: var(--primary-light); font-size: 24px; cursor: pointer; padding: 0 8px; }
-.recharge-btn { background: none; border: none; color: var(--primary-light); font-size: 13px; cursor: pointer; font-weight: 600; }
-.state { display: flex; justify-content: center; padding: 48px; }
-.empty { text-align: center; color: #666; 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: linear-gradient(135deg, #1a1810 0%, #1f1b0e 40%, #16140c 100%);
-  border: 1px solid rgba(212, 175, 55, 0.2);
-  border-radius: 12px;
-  padding: 16px;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-.order-card:active {
-  opacity: 0.92;
-}
-.order-card::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
-}
-.order-card.rejected {
-  background: #141414;
-  border-color: rgba(245, 108, 108, 0.22);
-}
-.order-card.rejected::before {
-  background: linear-gradient(90deg, transparent, rgba(245, 108, 108, 0.35), transparent);
-}
-.order-card.rejected .order-amount {
-  background: none;
-  -webkit-background-clip: unset;
-  background-clip: unset;
-  color: #bbb;
-}
-.order-card.rejected .info-label {
-  color: #888;
-}
-.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(30, 58, 95, 0.6); color: #66b1ff; }
-.method-badge.usdt { background: rgba(26, 58, 42, 0.6); color: #67c23a; }
-.status-badge { font-size: 12px; font-weight: 700; }
-.status-pending { color: #e6a23c; }
-.status-approved { color: #67c23a; }
-.status-rejected { color: #f56c6c; }
-.order-body { }
-.order-amount {
-  font-size: 22px;
-  font-weight: 900;
-  margin-bottom: 4px;
-  background: linear-gradient(135deg, #f0d060, #d4a830);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-.approved-amount { font-size: 12px; color: #67c23a; margin-bottom: 6px; font-weight: 600; }
-.order-info-row { margin-bottom: 8px; }
-.info-label { font-size: 13px; color: rgba(212, 175, 55, 0.7); 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: #888; }
-.time-value { font-size: 11px; color: #aaa; font-variant-numeric: tabular-nums; }
-.order-remark {
-  font-size: 12px;
-  color: rgba(212, 175, 55, 0.8);
-  background: rgba(212, 175, 55, 0.06);
-  padding: 6px 10px;
-  border-radius: 6px;
-  margin-top: 6px;
-  border-left: 2px solid rgba(212, 175, 55, 0.3);
-  line-height: 1.45;
-  word-break: break-word;
-}
-.reject-reason {
-  margin-top: 8px;
-  font-size: 12px;
-  color: #c07070;
-  background: transparent;
-  padding: 6px 0 0;
-  border-radius: 0;
-  border: none;
-  border-top: 1px solid rgba(245, 108, 108, 0.18);
-  line-height: 1.45;
-  word-break: break-word;
-}
-.card-detail-hint {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid rgba(212, 175, 55, 0.12);
-}
-.card-detail-summary {
-  font-size: 11px;
-  color: rgba(212, 175, 55, 0.65);
-  font-weight: 600;
-}
-.card-detail-link {
-  font-size: 11px;
-  color: var(--primary-light);
-  font-weight: 700;
-  white-space: nowrap;
-}
-.card-detail-link-only {
-  display: block;
-  width: 100%;
-  margin-top: 10px;
-  padding: 0;
-  border: none;
-  background: none;
-  text-align: right;
-  font-size: 11px;
-  color: var(--primary-light);
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.sentinel {
-  height: 1px;
-}
-
-.load-more-spinner {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0 8px;
-}
-
-.end-hint {
-  text-align: center;
-  font-size: 12px;
-  color: #555;
-  font-weight: 600;
-  padding: 16px 0 4px;
-  letter-spacing: 0.03em;
-}
-
-.detail-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: rgba(0, 0, 0, 0.48);
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 0;
-}
-
-.detail-modal {
-  position: relative;
-  width: 100%;
-  max-width: 480px;
-  max-height: min(88vh, 720px);
-  overflow-y: auto;
-  background: #141414;
-  border: 1px solid #2a2a2a;
-  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.28);
-}
-
-.detail-close {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 50%;
-  background: transparent;
-  color: #777;
-  font-size: 13px;
-  cursor: pointer;
-  line-height: 1;
-}
-
-.detail-title {
-  margin: 0 28px 12px 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: #e8e8e8;
-}
-
-.detail-summary {
-  margin-bottom: 14px;
-  padding: 12px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid #222;
-}
-
-.detail-summary-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.detail-amount {
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 4px;
-  color: var(--primary-light, #d4af37);
-  letter-spacing: -0.02em;
-}
-
-.detail-method-name {
-  font-size: 12px;
-  color: #999;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
-  margin-bottom: 6px;
-}
-
-.detail-label {
-  font-size: 12px;
-  color: #888;
-  flex-shrink: 0;
-}
-
-.detail-value {
-  font-size: 12px;
-  color: #ccc;
-  text-align: right;
-  word-break: break-word;
-}
-
-.detail-summary .order-remark {
-  margin-top: 8px;
-  font-size: 11px;
-  color: #999;
-  background: transparent;
-  padding: 6px 0 0;
-  border-radius: 0;
-  border: none;
-  border-top: 1px solid #222;
-  line-height: 1.45;
-  word-break: break-word;
-}
-
-.detail-summary .reject-reason {
-  margin-top: 8px;
-  font-size: 11px;
-  color: #b08888;
-  background: transparent;
-  padding: 6px 0 0;
-  border-radius: 0;
-  border: none;
-  border-top: 1px solid rgba(245, 108, 108, 0.15);
-  line-height: 1.45;
-  word-break: break-word;
-}
-
-.detail-summary .approved-amount {
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.detail-audit {
-  margin-top: 2px;
-  padding-top: 12px;
-  border-top: 1px solid #222;
-}
-
-.detail-audit-title {
-  margin: 0 0 10px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #888;
-  letter-spacing: 0.02em;
-}
-
-.audit-track {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.audit-step {
-  display: flex;
-  gap: 8px;
-  min-height: 0;
-}
-
-.audit-step-rail {
-  flex: 0 0 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 4px;
-}
-
-.audit-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: #555;
-  flex-shrink: 0;
-}
-
-.audit-line {
-  flex: 1;
-  width: 1px;
-  min-height: 10px;
-  margin: 3px 0;
-  background: #2a2a2a;
-}
-
-.audit-step-body {
-  flex: 1;
-  min-width: 0;
-  padding-bottom: 12px;
-}
-
-.audit-step:last-child .audit-step-body {
-  padding-bottom: 0;
-}
-
-.audit-step-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.audit-step-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: #ccc;
-  line-height: 1.35;
-}
-
-.audit-step-time {
-  font-size: 10px;
-  color: #666;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.audit-step-actor {
-  margin: 2px 0 0;
-  font-size: 11px;
-  color: #999;
-  line-height: 1.4;
-}
-
-.audit-step-credited {
-  margin: 3px 0 0;
-  font-size: 11px;
-  font-weight: 500;
-  color: #7eb87a;
-  line-height: 1.4;
-}
-
-.audit-step-note {
-  margin: 4px 0 0;
-  font-size: 11px;
-  color: #888;
-  line-height: 1.45;
-  word-break: break-word;
-}
-
-.audit-step-box {
-  margin-top: 4px;
-  padding: 6px 8px;
-  border-radius: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  line-height: 1.4;
-  word-break: break-word;
-}
-
-.audit-step-box--reject {
-  background: transparent;
-  border: 1px solid rgba(245, 108, 108, 0.22);
-}
-
-.audit-step-box-label {
-  font-size: 10px;
-  font-weight: 500;
-  color: #c07070;
-  letter-spacing: 0.01em;
-}
-
-.audit-step-box-text {
-  font-size: 11px;
-  color: #b08888;
-}
-
-.audit-step--submitted .audit-dot {
-  background: #c9a227;
-}
-.audit-step--approved .audit-dot {
-  background: #5fad5a;
-}
-.audit-step--rejected .audit-dot {
-  background: #d06060;
-}
-.audit-step--revoked .audit-dot {
-  background: #777;
-}
-.audit-step--reopened .audit-dot {
-  background: #c9a227;
-}
-
-.modal-reapply-btn {
-  width: 100%;
-  margin-top: 14px;
-  padding: 11px 16px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-</style>
diff --git a/apps/player/src/views/RechargeView.vue b/apps/player/src/views/RechargeView.vue
index 850b9c4..8c97723 100644
--- a/apps/player/src/views/RechargeView.vue
+++ b/apps/player/src/views/RechargeView.vue
@@ -1,691 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import imageCompression from 'browser-image-compression';
-import api from '../api';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { useDepositNotifications } from '../composables/useDepositNotifications';
-
-const router = useRouter();
-const route = useRoute();
-const { t } = useI18n();
-const { trackPendingOrder } = useDepositNotifications();
-
-const reapplyOrderId = computed(() => {
-  const id = route.query.orderId;
-  return typeof id === 'string' && id ? id : '';
-});
-const isReapply = computed(() => !!reapplyOrderId.value);
-
-interface PaymentMethod {
-  id: string;
-  methodType: string;
-  bankName: string | null;
-  accountHolder: string | null;
-  accountNumber: string | null;
-  usdtAddress: string | null;
-  qrCodeUrl: string | null;
-  displayName: string | null;
-}
-
-const methodType = ref<'BANK' | 'USDT'>('BANK');
-const methods = ref<PaymentMethod[]>([]);
-const selectedMethod = ref<PaymentMethod | null>(null);
-const amount = ref<string>('');
-const screenshotFile = ref<File | null>(null);
-const screenshotPreview = ref<string>('');
-const loading = ref(true);
-const submitting = ref(false);
-const success = ref(false);
-const orderNo = ref('');
-const compressing = ref(false);
-
-const bankMethods = computed(() => methods.value.filter((m) => m.methodType === 'BANK'));
-const usdtMethods = computed(() => methods.value.filter((m) => m.methodType === 'USDT'));
-const currentMethods = computed(() => methodType.value === 'BANK' ? bankMethods.value : usdtMethods.value);
-
-function applyReapplyQuery() {
-  const type = route.query.methodType;
-  if (type === 'BANK' || type === 'USDT') {
-    methodType.value = type;
-  }
-
-  const methodId = typeof route.query.methodId === 'string' ? route.query.methodId : '';
-  if (methodId) {
-    const match = methods.value.find((m) => m.id === methodId);
-    if (match) {
-      selectedMethod.value = match;
-    }
-  }
-
-  if (!selectedMethod.value && currentMethods.value.length) {
-    selectedMethod.value = currentMethods.value[0];
-  }
-
-  const amountQuery = typeof route.query.amount === 'string' ? route.query.amount : '';
-  const parsedAmount = parseFloat(amountQuery);
-  if (amountQuery && parsedAmount > 0) {
-    amount.value = amountQuery;
-  }
-}
-
-async function fetchMethods() {
-  loading.value = true;
-  try {
-    const { data } = await api.get('/player/payment-methods');
-    methods.value = (data.data ?? []).map((m: any) => ({ ...m, id: String(m.id) }));
-    if (isReapply.value) {
-      applyReapplyQuery();
-    } else if (currentMethods.value.length) {
-      selectedMethod.value = currentMethods.value[0];
-    }
-  } catch { /* */ } finally {
-    loading.value = false;
-  }
-}
-
-function switchType(type: 'BANK' | 'USDT') {
-  methodType.value = type;
-  selectedMethod.value = currentMethods.value.length ? currentMethods.value[0] : null;
-}
-
-function selectMethod(m: PaymentMethod) {
-  selectedMethod.value = m;
-}
-
-const MAX_ORIGINAL_BYTES = 10 * 1024 * 1024;
-const MAX_SCREENSHOT_BYTES = 300 * 1024;
-
-async function compressScreenshot(file: File): Promise<File> {
-  const baseOptions = {
-    maxSizeMB: 0.3,
-    maxWidthOrHeight: 1200,
-    useWebWorker: true,
-    maxIteration: 10,
-    fileType: 'image/webp',
-  } as const;
-
-  const attempts = [
-    { ...baseOptions, initialQuality: 0.8 },
-    { ...baseOptions, initialQuality: 0.6, maxWidthOrHeight: 1000 },
-  ];
-
-  let compressed: File | null = null;
-  for (const options of attempts) {
-    try {
-      compressed = (await imageCompression(file, options)) as File;
-      if (compressed.size <= MAX_SCREENSHOT_BYTES) {
-        break;
-      }
-    } catch (err) {
-      console.error('Compression attempt failed:', err);
-    }
-  }
-
-  if (!compressed) {
-    throw new Error('COMPRESS_FAILED');
-  }
-
-  // 重命名文件后缀为 .webp
-  const name = file.name.replace(/\.[^/.]+$/, "") + '.webp';
-  return new File([compressed], name, {
-    type: 'image/webp',
-    lastModified: Date.now(),
-  });
-}
-
-async function handleFileChange(event: Event) {
-  const input = event.target as HTMLInputElement;
-  const file = input.files?.[0];
-  if (!file) return;
-
-  if (!file.type.startsWith('image/')) {
-    alert(t('recharge.file_must_be_image'));
-    input.value = '';
-    return;
-  }
-
-  if (file.size > MAX_ORIGINAL_BYTES) {
-    alert(t('recharge.file_too_large'));
-    input.value = '';
-    return;
-  }
-
-  compressing.value = true;
-  try {
-    const compressed = await compressScreenshot(file);
-    screenshotFile.value = compressed;
-    screenshotPreview.value = URL.createObjectURL(compressed);
-  } catch {
-    alert(t('recharge.compress_failed'));
-    screenshotFile.value = null;
-    screenshotPreview.value = '';
-    input.value = '';
-  } finally {
-    compressing.value = false;
-  }
-}
-
-function removeScreenshot() {
-  screenshotFile.value = null;
-  screenshotPreview.value = '';
-}
-
-async function handleSubmit() {
-  if (!selectedMethod.value) {
-    alert(t('recharge.select_method'));
-    return;
-  }
-  const amt = parseFloat(amount.value);
-  if (!amt || amt <= 0) {
-    alert(t('recharge.enter_amount'));
-    return;
-  }
-  if (!screenshotFile.value) {
-    alert(t('recharge.upload_screenshot'));
-    return;
-  }
-  if (screenshotFile.value.size > MAX_SCREENSHOT_BYTES) {
-    alert(t('recharge.compress_failed'));
-    return;
-  }
-
-  submitting.value = true;
-  try {
-    const fd = new FormData();
-    fd.append('amount', String(amt));
-    fd.append('screenshot', screenshotFile.value);
-
-    if (isReapply.value) {
-      fd.append('paymentMethodId', selectedMethod.value.id);
-      const { data } = await api.post(`/player/deposit-orders/${reapplyOrderId.value}/reapply`, fd);
-      const result = data.data;
-      orderNo.value = result?.orderNo ?? '';
-      if (result?.id) trackPendingOrder(String(result.id));
-      success.value = true;
-      return;
-    }
-
-    fd.append('paymentMethodId', selectedMethod.value.id);
-    const { data } = await api.post('/player/deposit-orders', fd);
-    const result = data.data;
-    orderNo.value = result?.orderNo ?? '';
-    if (result?.id) trackPendingOrder(String(result.id));
-    success.value = true;
-  } catch (e: any) {
-    alert(e.response?.data?.message || t('recharge.submit_failed'));
-  } finally {
-    submitting.value = false;
-  }
-}
-
-function goHistory() {
-  router.push('/wallet/recharge/history');
-}
-
-function goBack() {
-  router.back();
-}
-
-function resetForm() {
-  success.value = false;
-  amount.value = '';
-  screenshotFile.value = null;
-  screenshotPreview.value = '';
-  orderNo.value = '';
-}
-
-function copyText(text: string) {
-  navigator.clipboard?.writeText(text);
-}
-
-function formatCardNumber(num: string | null): string {
-  if (!num) return '—';
-  const digits = num.replace(/\s/g, '');
-  return digits.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
-}
-
-onMounted(fetchMethods);
+import { useViewport } from '../composables/useViewport';
+import MobileRechargeView from './MobileRechargeView.vue';
+import DesktopRechargeView from './desktop/DesktopRechargeView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="recharge-page">
-    <div class="page-header">
-      <button class="back-btn" @click="goBack">‹</button>
-      <h2>{{ t('recharge.title') }}</h2>
-      <button class="history-btn" @click="goHistory">{{ t('recharge.history') }}</button>
-    </div>
-
-    <div v-if="loading" class="state">
-      <GoldSpinner :size="36" />
-    </div>
-
-    <div v-else-if="success" class="success-state">
-      <div class="success-icon">✓</div>
-      <h3>{{ t('recharge.submitted') }}</h3>
-      <p class="order-no">{{ orderNo }}</p>
-      <p class="success-hint">{{ t('recharge.pending_review') }}</p>
-      <button v-if="isReapply" class="btn-primary" @click="goHistory">{{ t('recharge.back_to_history') }}</button>
-      <button v-else class="btn-primary" @click="resetForm">{{ t('recharge.new_recharge') }}</button>
-    </div>
-
-    <template v-else>
-      <div v-if="isReapply" class="reapply-banner">{{ t('recharge.reapply_hint') }}</div>
-      <div class="type-tabs">
-        <button
-          :class="['tab', methodType === 'BANK' && 'active']"
-          @click="switchType('BANK')"
-        >{{ t('recharge.bank_transfer') }}</button>
-        <button
-          :class="['tab', methodType === 'USDT' && 'active']"
-          @click="switchType('USDT')"
-        >USDT</button>
-      </div>
-
-      <div v-if="currentMethods.length" class="methods-list">
-        <button
-          v-for="m in currentMethods"
-          :key="m.id"
-          :class="['method-pill', selectedMethod?.id === m.id && 'selected']"
-          @click="selectMethod(m)"
-        >
-          <span class="pill-name">{{ m.displayName || m.bankName || m.usdtAddress }}</span>
-          <span v-if="m.methodType === 'BANK'" class="pill-sub">{{ m.accountHolder }}</span>
-        </button>
-      </div>
-      <div v-else class="empty-methods">{{ t('recharge.no_methods') }}</div>
-
-      <div v-if="selectedMethod && selectedMethod.methodType === 'BANK'" class="bank-card-wrap">
-        <div class="bank-card-face">
-          <div class="bank-card-shine" aria-hidden="true" />
-          <div class="bank-card-deco bank-card-deco--1" aria-hidden="true" />
-          <div class="bank-card-deco bank-card-deco--2" aria-hidden="true" />
-          <div class="bank-card-top">
-            <div class="bank-card-bank">{{ selectedMethod.bankName }}</div>
-          </div>
-          <div class="bank-card-number-row">
-            <span class="bank-card-number">{{ formatCardNumber(selectedMethod.accountNumber) }}</span>
-            <button
-              type="button"
-              class="bank-card-copy"
-              :aria-label="t('recharge.account_number')"
-              @click="copyText(selectedMethod.accountNumber || '')"
-            >
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="9" y="9" width="13" height="13" rx="2" />
-                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
-              </svg>
-            </button>
-          </div>
-          <div class="bank-card-bottom">
-            <div class="bank-card-holder">
-              <span class="bank-card-holder-label">{{ t('recharge.account_holder') }}</span>
-              <span class="bank-card-holder-name">{{ selectedMethod.accountHolder }}</span>
-            </div>
-            <div class="bank-card-type">DEBIT</div>
-          </div>
-        </div>
-      </div>
-
-      <div v-else-if="selectedMethod" class="method-info">
-        <template v-if="selectedMethod.methodType !== 'BANK'">
-          <div class="info-row">
-            <span class="info-label">{{ t('recharge.usdt_address') }}</span>
-            <span class="info-value copyable" @click="copyText(selectedMethod!.usdtAddress || '')">
-              {{ selectedMethod.usdtAddress }}
-              <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
-            </span>
-          </div>
-          <div v-if="selectedMethod.qrCodeUrl" class="qr-container">
-            <img :src="selectedMethod.qrCodeUrl" class="qr-image" />
-          </div>
-        </template>
-      </div>
-
-      <div class="form-section">
-        <label>{{ t('recharge.amount_label') }}</label>
-        <input
-          v-model="amount"
-          type="number"
-          inputmode="decimal"
-          :placeholder="t('recharge.amount_placeholder')"
-          class="amount-input"
-        />
-      </div>
-
-      <div class="form-section">
-        <label>{{ t('recharge.screenshot_label') }}</label>
-        <div v-if="screenshotPreview" class="screenshot-preview">
-          <img :src="screenshotPreview" />
-          <button class="remove-btn" @click="removeScreenshot">✕</button>
-        </div>
-        <label v-else class="upload-area">
-          <input type="file" accept="image/*" @change="handleFileChange" :disabled="compressing" />
-          <div v-if="compressing" class="compress-hint">{{ t('recharge.compressing') }}...</div>
-          <div v-else class="upload-hint">{{ t('recharge.upload_hint') }}</div>
-        </label>
-      </div>
-
-      <button
-        class="btn-submit"
-        :disabled="submitting || !selectedMethod || !amount || !screenshotFile"
-        @click="handleSubmit"
-      >
-        <span v-if="submitting">{{ t('recharge.submitting') }}...</span>
-        <span v-else>{{ t('recharge.submit') }}</span>
-      </button>
-    </template>
-  </div>
+  <DesktopRechargeView v-if="isDesktop" />
+  <MobileRechargeView v-else />
 </template>
-
-<style scoped>
-.recharge-page { padding: 0 0 24px; }
-
-.page-header {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 8px 0 12px;
-}
-.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; }
-.back-btn { background: none; border: none; color: var(--primary-light); font-size: 22px; cursor: pointer; padding: 0 6px; }
-.history-btn { background: none; border: none; color: var(--primary-light); font-size: 12px; cursor: pointer; font-weight: 600; }
-
-.state { display: flex; justify-content: center; padding: 48px; }
-
-.reapply-banner {
-  margin-bottom: 12px;
-  padding: 10px 12px;
-  border-radius: 8px;
-  font-size: 12px;
-  line-height: 1.45;
-  color: #ffd0d0;
-  background: rgba(245, 108, 108, 0.12);
-  border: 1px solid rgba(245, 108, 108, 0.25);
-}
-
-.type-tabs {
-  display: flex; margin-bottom: 12px;
-  border-radius: 6px; overflow: hidden;
-  border: 1px solid rgba(212, 175, 55, 0.2);
-}
-.tab {
-  flex: 1; padding: 8px; border: none;
-  background: rgba(20, 20, 20, 0.8);
-  color: var(--text-muted); font-weight: 700; font-size: 13px;
-  cursor: pointer; transition: all 0.2s;
-}
-.tab.active {
-  background: var(--primary-light); color: #000;
-}
-
-.methods-list {
-  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
-}
-.method-pill {
-  display: flex; flex-direction: column; gap: 1px;
-  background: rgba(20, 20, 20, 0.8);
-  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: var(--primary-light);
-  background: rgba(212, 175, 55, 0.06);
-}
-.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;
-  perspective: 800px;
-}
-
-.bank-card-face {
-  position: relative;
-  aspect-ratio: 2 / 1;
-  border-radius: 14px;
-  padding: 14px 18px 12px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: hidden;
-  background:
-    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(212, 175, 55, 0.22), transparent 55%),
-    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(212, 175, 55, 0.1), transparent 50%),
-    linear-gradient(135deg, #2a2218 0%, #1a1610 35%, #12100c 70%, #0a0908 100%);
-  border: 1px solid rgba(212, 175, 55, 0.35);
-  box-shadow:
-    0 8px 24px rgba(0, 0, 0, 0.55),
-    0 2px 8px rgba(212, 175, 55, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-.bank-card-shine {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    115deg,
-    transparent 30%,
-    rgba(255, 255, 255, 0.04) 45%,
-    rgba(255, 255, 255, 0.08) 50%,
-    rgba(255, 255, 255, 0.04) 55%,
-    transparent 70%
-  );
-  pointer-events: none;
-}
-
-.bank-card-deco {
-  position: absolute;
-  border-radius: 50%;
-  border: 1px solid rgba(212, 175, 55, 0.12);
-  pointer-events: none;
-}
-
-.bank-card-deco--1 {
-  width: 180px;
-  height: 180px;
-  right: -60px;
-  bottom: -80px;
-  background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 70%);
-}
-
-.bank-card-deco--2 {
-  width: 100px;
-  height: 100px;
-  right: 40px;
-  bottom: 20px;
-  border-color: rgba(212, 175, 55, 0.08);
-}
-
-.bank-card-top,
-.bank-card-number-row,
-.bank-card-bottom {
-  position: relative;
-  z-index: 1;
-}
-
-.bank-card-top {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.bank-card-bank {
-  font-size: 15px;
-  font-weight: 800;
-  color: #fff;
-  text-align: right;
-  letter-spacing: 0.5px;
-  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-  line-height: 1.3;
-  max-width: 58%;
-  word-break: break-all;
-}
-
-.bank-card-number-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin: 4px 0 2px;
-}
-
-.bank-card-number {
-  font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
-  font-size: clamp(15px, 4.2vw, 19px);
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  color: var(--primary-light);
-  text-shadow: 0 0 12px rgba(240, 216, 117, 0.25);
-  word-break: break-all;
-  line-height: 1.3;
-}
-
-.bank-card-copy {
-  flex-shrink: 0;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  border: 1px solid rgba(212, 175, 55, 0.35);
-  background: rgba(0, 0, 0, 0.25);
-  color: var(--primary-light);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background 0.15s, opacity 0.15s;
-}
-
-.bank-card-copy svg {
-  width: 16px;
-  height: 16px;
-}
-
-.bank-card-copy:active {
-  opacity: 0.65;
-  background: rgba(212, 175, 55, 0.12);
-}
-
-.bank-card-bottom {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.bank-card-holder {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-}
-
-.bank-card-holder-label {
-  font-size: 9px;
-  font-weight: 600;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.45);
-}
-
-.bank-card-holder-name {
-  font-size: 14px;
-  font-weight: 700;
-  color: #fff;
-  letter-spacing: 0.04em;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-  word-break: break-all;
-}
-
-.bank-card-type {
-  flex-shrink: 0;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.18em;
-  color: rgba(212, 175, 55, 0.55);
-  font-style: italic;
-}
-
-.method-info {
-  background: rgba(17, 17, 17, 0.9);
-  border-radius: 8px; padding: 10px 12px;
-  margin-bottom: 12px;
-  border: 1px solid var(--border);
-}
-.info-row {
-  display: flex; justify-content: space-between; align-items: baseline;
-  padding: 6px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-}
-.info-row:last-child { border-bottom: none; }
-.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%;
-}
-.copyable {
-  cursor: pointer; color: var(--primary-light);
-  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; }
-
-.form-section { margin-bottom: 12px; }
-.form-section label {
-  display: block; font-size: 11px; font-weight: 700;
-  color: var(--text-muted); margin-bottom: 4px;
-}
-.amount-input {
-  width: 100%; padding: 10px; background: #111;
-  border: 1px solid var(--border); border-radius: 6px;
-  color: #fff; font-size: 16px; font-weight: 700;
-  box-sizing: border-box;
-}
-.amount-input:focus { border-color: var(--primary-light); outline: none; }
-
-.upload-area {
-  border: 1px dashed rgba(212, 175, 55, 0.3);
-  border-radius: 6px; padding: 16px;
-  text-align: center; position: relative;
-  display: flex; align-items: center; justify-content: center;
-  cursor: pointer;
-}
-.upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
-.upload-hint { font-size: 12px; color: var(--text-muted); }
-.compress-hint { font-size: 12px; color: var(--primary-light); }
-.screenshot-preview { position: relative; display: inline-block; }
-.screenshot-preview img { max-width: 100%; max-height: 160px; border-radius: 6px; }
-.remove-btn {
-  position: absolute; top: 4px; right: 4px;
-  background: rgba(0,0,0,0.7); border: none; color: #fff;
-  width: 20px; height: 20px; border-radius: 50%;
-  cursor: pointer; font-size: 11px;
-}
-
-.btn-submit {
-  width: 100%; padding: 12px;
-  background: linear-gradient(135deg, #f0d060, #d4a830);
-  color: #000; border: none; border-radius: 6px;
-  font-size: 14px; font-weight: 800;
-  cursor: pointer; margin-top: 8px;
-  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
-}
-.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }
-
-.success-state { text-align: center; padding: 40px 16px; }
-.success-icon { font-size: 40px; color: #67c23a; margin-bottom: 10px; }
-.success-state h3 { margin: 0 0 6px; font-size: 16px; }
-.order-no { font-family: monospace; color: var(--primary-light); font-size: 13px; margin: 4px 0; }
-.success-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
-.btn-primary {
-  background: linear-gradient(135deg, #f0d060, #d4a830);
-  color: #000; border: none; border-radius: 6px;
-  padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
-}
-</style>
diff --git a/apps/player/src/views/RegisterWrapperView.vue b/apps/player/src/views/RegisterWrapperView.vue
new file mode 100644
index 0000000..eacf3de
--- /dev/null
+++ b/apps/player/src/views/RegisterWrapperView.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useViewport } from '../composables/useViewport';
+import RegisterView from './RegisterView.vue';
+import DesktopRegisterView from './desktop/DesktopRegisterView.vue';
+const { isDesktop } = useViewport();
+</script>
+<template>
+  <DesktopRegisterView v-if="isDesktop" />
+  <RegisterView v-else />
+</template>
diff --git a/apps/player/src/views/WalletDetailView.vue b/apps/player/src/views/WalletDetailView.vue
index 53d47ab..81ef4a5 100644
--- a/apps/player/src/views/WalletDetailView.vue
+++ b/apps/player/src/views/WalletDetailView.vue
@@ -1,387 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import api from '../api';
-import { formatMoney } from '../utils/localeDisplay';
-import { isBetType, isDepositType, isWithdrawType, isCashbackType, txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../utils/walletTx';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import WalletStatsPanel from '../components/WalletStatsPanel.vue';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-
-const router = useRouter();
-const { t, locale } = useI18n();
-
-type Transaction = {
-  transactionType: string;
-  displayType?: string;
-  summary?: string | null;
-  summaryKind?: 'opening_bonus' | null;
-  referenceType?: string | null;
-  amount: string;
-  frozenBefore?: string;
-  frozenAfter?: string;
-  createdAt: string;
-  transactionId: string;
-};
-
-const items = ref<Transaction[]>([]);
-const total = ref(0);
-const page = ref(1);
-const loading = ref(false);
-const initialLoading = ref(true);
-const hasMore = ref(true);
-const typeFilter = ref('');
-const cashbackTotal = ref('0');
-
-const sentinel = ref<HTMLElement | null>(null);
-let observer: IntersectionObserver | null = null;
-
-const FILTERS = [
-  { key: '', label: 'wallet.filter_all' },
-  { key: 'deposit', label: 'wallet.filter_deposit' },
-  { key: 'withdraw', label: 'wallet.filter_withdraw' },
-  { key: 'bet', label: 'wallet.filter_bet' },
-  { key: 'cashback', label: 'wallet.filter_cashback' },
-];
-
-const CASHBACK_TYPES = new Set(['CASHBACK', 'CASHBACK_DEPOSIT']);
-
-async function fetchCashbackTotal() {
-  try {
-    const { data } = await api.get('/player/wallet/transactions/stats');
-    const byType = data.data?.byType ?? [];
-    let sum = 0;
-    for (const g of byType) {
-      if (CASHBACK_TYPES.has(g.transactionType?.toUpperCase())) {
-        sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
-      }
-    }
-    cashbackTotal.value = sum.toString();
-  } catch {
-    /* ignore */
-  }
-}
-
-function txLabel(tx: Transaction): string {
-  const key = txTypeKey(txDisplayType(tx));
-  if (key) {
-    const translated = t(key);
-    if (translated !== key) return translated;
-  }
-  return tx.transactionType;
-}
-
-function txSubtitle(tx: Transaction): string {
-  return txSummaryLabel(tx, t);
-}
-
-function goDetail(tx: Transaction) {
-  if (!tx.transactionId) return;
-  router.push(`/wallet/transactions/${tx.transactionId}`);
-}
-
-async function loadPage(p: number) {
-  if (loading.value) return;
-  loading.value = true;
-  const filterAtRequest = typeFilter.value;
-  try {
-    const params: Record<string, unknown> = { page: p };
-    if (typeFilter.value) params.type = typeFilter.value;
-    const { data } = await api.get('/player/wallet/transactions', { params });
-    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
-    if (filterAtRequest !== typeFilter.value) return;
-    total.value = result.total ?? 0;
-    const pageSize = result.pageSize ?? 20;
-    const newItems = result.items ?? [];
-    if (p === 1) {
-      items.value = newItems;
-    } else {
-      items.value = [...items.value, ...newItems];
-    }
-    hasMore.value = (result.items?.length ?? 0) >= pageSize;
-    page.value = p;
-  } finally {
-    if (filterAtRequest === typeFilter.value) {
-      loading.value = false;
-      initialLoading.value = false;
-    }
-  }
-}
-
-async function reset() {
-  items.value = [];
-  total.value = 0;
-  page.value = 1;
-  hasMore.value = true;
-  initialLoading.value = true;
-  loading.value = false;
-  loadPage(1);
-}
-
-function changeFilter(key: string) {
-  if (typeFilter.value === key) return;
-  typeFilter.value = key;
-  reset();
-}
-
-const { pullDistance, spinning, progress } = usePullToRefresh({
-  onRefresh: async () => { await loadPage(1); await fetchCashbackTotal(); },
-});
-
-onMounted(() => {
-  loadPage(1);
-  fetchCashbackTotal();
-  observer = new IntersectionObserver(
-    (entries) => {
-      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
-        loadPage(page.value + 1);
-      }
-    },
-    { rootMargin: '200px' },
-  );
-  if (sentinel.value) observer.observe(sentinel.value);
-});
-
-onUnmounted(() => {
-  observer?.disconnect();
-});
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
+import { useViewport } from '../composables/useViewport';
+import MobileWalletDetailView from './MobileWalletDetailView.vue';
+import DesktopWalletDetailView from './desktop/DesktopWalletDetailView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="wallet-detail-page">
-    <div class="top-bar">
-      <button class="back-btn" type="button" @click="router.back()">&#x2039; {{ t('history.back') }}</button>
-    </div>
-
-    <div
-      class="pull-indicator"
-      :style="pullIndicatorStyle()"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <div v-if="initialLoading" class="state">
-      <GoldSpinner :size="36" />
-      <span class="loading-text">{{ t('bet.loading') }}</span>
-    </div>
-
-    <template v-else>
-      <WalletStatsPanel :items="items" :cashback-total="cashbackTotal" />
-
-      <div class="filter-tabs">
-        <button
-          v-for="f in FILTERS"
-          :key="f.key"
-          type="button"
-          class="filter-tab"
-          :class="{ active: typeFilter === f.key }"
-          @click="changeFilter(f.key)"
-        >
-          {{ t(f.label) }}
-        </button>
-      </div>
-
-      <div v-if="items.length" class="tx-list">
-        <button
-          v-for="tx in items"
-          :key="tx.transactionId"
-          type="button"
-          class="tx-row"
-          @click="goDetail(tx)"
-        >
-          <div class="tx-main">
-            <div class="tx-text">
-              <span class="tx-type">{{ txLabel(tx) }}</span>
-              <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
-            </div>
-            <span :class="txAmountClass(tx.amount)">
-              {{ formatMoney(tx.amount, locale) }}
-            </span>
-          </div>
-          <div class="tx-meta">
-            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
-            <span class="tx-arrow">&#x203A;</span>
-          </div>
-        </button>
-      </div>
-
-      <div ref="sentinel" class="sentinel" />
-
-      <div v-if="loading" class="load-more-spinner">
-        <GoldSpinner :size="24" />
-      </div>
-
-      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
-        {{ t('common.no_more') }}
-      </div>
-
-      <div v-if="!items.length && !initialLoading" class="empty">
-        {{ t('wallet.no_records') }}
-      </div>
-    </template>
-  </div>
+  <DesktopWalletDetailView v-if="isDesktop" />
+  <MobileWalletDetailView v-else />
 </template>
-
-<style scoped>
-.wallet-detail-page {
-  padding-bottom: 24px;
-}
-
-.top-bar {
-  margin-bottom: 4px;
-}
-
-.back-btn {
-  background: none;
-  border: none;
-  color: var(--primary-light, #d4af37);
-  font-size: 15px;
-  font-weight: 700;
-  padding: 4px 0 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.filter-tabs {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 12px;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-
-.filter-tabs::-webkit-scrollbar { display: none; }
-
-.filter-tab {
-  flex-shrink: 0;
-  padding: 7px 14px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--text-muted);
-  background: #141414;
-  border: 1px solid #2a2a2a;
-  transition: all 0.2s;
-}
-
-.filter-tab.active {
-  color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.1);
-  border-color: var(--border-gold-soft);
-}
-
-.state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-  color: var(--text-muted);
-  padding: 56px 20px;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.loading-text {
-  font-size: 13px;
-}
-
-.tx-list {
-  margin-bottom: 0;
-}
-
-.tx-row {
-  display: block;
-  width: 100%;
-  text-align: left;
-  font-size: 14px;
-  padding: 12px 16px;
-  border: none;
-  border-bottom: 1px solid var(--border);
-  background: transparent;
-  cursor: pointer;
-}
-
-.tx-row:last-child {
-  border-bottom: none;
-}
-
-.tx-row:active {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.tx-main {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
-
-.tx-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.tx-summary {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tx-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.tx-type { font-weight: 700; color: var(--text); }
-.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
-.neg { color: var(--danger); font-weight: 700; }
-.zero { color: var(--text-muted); font-weight: 700; font-size: 15px; }
-.tx-time { font-size: 11px; color: var(--text-muted); }
-.tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
-
-.sentinel {
-  height: 1px;
-}
-
-.load-more-spinner {
-  display: flex;
-  justify-content: center;
-  padding: 20px 0 8px;
-}
-
-.end-hint {
-  text-align: center;
-  font-size: 12px;
-  color: #555;
-  font-weight: 600;
-  padding: 16px 0 4px;
-  letter-spacing: 0.03em;
-}
-
-.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 eb8e194..d2616df 100644
--- a/apps/player/src/views/WalletTransactionDetailView.vue
+++ b/apps/player/src/views/WalletTransactionDetailView.vue
@@ -1,388 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import api from '../api';
-import { formatMoney } from '../utils/localeDisplay';
-import { txTypeKey, isCashbackType, txDisplayType, txAmountClass, txSummaryLabel, txRemarkLabel, isDepositReversalType } from '../utils/walletTx';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-
-type TransactionDetail = {
-  transactionId: string;
-  transactionType: string;
-  displayType?: string;
-  summary?: string | null;
-  summaryKind?: 'opening_bonus' | null;
-  amount: string;
-  balanceBefore: string;
-  balanceAfter: string;
-  frozenBefore: string;
-  frozenAfter: string;
-  referenceType: string | null;
-  referenceId: string | null;
-  remark: string | null;
-  createdAt: string;
-  betNo: string | null;
-  cashbackBatchNo?: string | null;
-};
-
-const route = useRoute();
-const router = useRouter();
-const { t, locale } = useI18n();
-
-const tx = ref<TransactionDetail | null>(null);
-const loading = ref(true);
-const notFound = ref(false);
-
-async function loadTransaction() {
-  loading.value = true;
-  try {
-    const { data } = await api.get(`/player/wallet/transactions/${route.params.transactionId}`);
-    if (!data.data) {
-      notFound.value = true;
-      return;
-    }
-    tx.value = data.data;
-  } catch {
-    notFound.value = true;
-  } finally {
-    loading.value = false;
-  }
-}
-
-onMounted(loadTransaction);
-
-const { pullDistance, spinning, progress } = usePullToRefresh({
-  onRefresh: loadTransaction,
-});
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
-
-function txLabel(type: string): string {
-  const key = txTypeKey(type);
-  if (key) {
-    const translated = t(key);
-    if (translated !== key) return translated;
-  }
-  return type;
-}
-
-const displayTypeLabel = computed(() => {
-  if (!tx.value) return '';
-  return txLabel(txDisplayType(tx.value));
-});
-
-const summaryText = computed(() => {
-  if (!tx.value) return '';
-  return txSummaryLabel(tx.value, t);
-});
-
-const amountClass = computed(() => (tx.value ? txAmountClass(tx.value.amount) : 'zero'));
-
-const formattedTime = computed(() => {
-  if (!tx.value) return '';
-  return new Date(tx.value.createdAt).toLocaleString(locale.value);
-});
-
-const frozenChanged = computed(() => {
-  if (!tx.value) return false;
-  return tx.value.frozenBefore !== tx.value.frozenAfter;
-});
-
-const isCashbackTx = computed(
-  () => !!tx.value && isCashbackType(tx.value.transactionType),
-);
-
-const cashbackBatchNo = computed(() => {
-  if (!isCashbackTx.value) return null;
-  return tx.value?.cashbackBatchNo ?? tx.value?.referenceId ?? null;
-});
-
-const referenceLabel = computed(() => {
-  if (isCashbackTx.value) return t('wallet.ref_cashback');
-  if (!tx.value?.referenceType) return '';
-  if (isDepositReversalType(tx.value.transactionType)) return t('wallet.ref_deposit');
-  const rt = tx.value.referenceType.toUpperCase();
-  if (rt === 'BET') return t('wallet.ref_bet');
-  if (rt === 'DEPOSIT') return t('wallet.ref_deposit');
-  if (rt === 'WITHDRAW') return t('wallet.ref_withdraw');
-  return tx.value.referenceType;
-});
-
-const remarkText = computed(() => {
-  if (!tx.value) return '';
-  return txRemarkLabel(tx.value, t);
-});
-
-function goBetDetail() {
-  if (!tx.value?.betNo) return;
-  router.push(`/bets/${tx.value.betNo}`);
-}
-
-function goCashbackDetail() {
-  if (!cashbackBatchNo.value) return;
-  router.push({ path: '/wallet/cashbacks', query: { batchNo: cashbackBatchNo.value } });
-}
+import { useViewport } from '../composables/useViewport';
+import MobileWalletTransactionDetailView from './MobileWalletTransactionDetailView.vue';
+import DesktopWalletTransactionDetailView from './desktop/DesktopWalletTransactionDetailView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="detail-page">
-    <div
-      class="pull-indicator"
-      :style="pullIndicatorStyle()"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <div class="top-bar">
-      <button class="back-btn" type="button" @click="router.back()">‹ {{ t('history.back') }}</button>
-    </div>
-
-    <div v-if="loading" class="state">
-      <GoldSpinner :size="36" />
-    </div>
-    <div v-else-if="notFound || !tx" class="state">{{ t('wallet.detail_not_found') }}</div>
-
-    <template v-else>
-      <div class="hero" :class="amountClass">
-        <span class="hero-type">{{ displayTypeLabel }}</span>
-        <span v-if="summaryText" class="hero-summary">{{ summaryText }}</span>
-        <span class="hero-amount">{{ formatMoney(tx.amount, locale) }}</span>
-        <span class="hero-time">{{ formattedTime }}</span>
-      </div>
-
-      <section class="section">
-        <div class="section-title">{{ t('wallet.detail_summary') }}</div>
-        <div class="summary-rows">
-          <div class="sum-row">
-            <span>{{ t('wallet.detail_amount') }}</span>
-            <span :class="amountClass">{{ formatMoney(tx.amount, locale) }}</span>
-          </div>
-          <div class="sum-row">
-            <span>{{ t('wallet.detail_balance_before') }}</span>
-            <span>{{ formatMoney(tx.balanceBefore, locale) }}</span>
-          </div>
-          <div class="sum-row">
-            <span>{{ t('wallet.detail_balance_after') }}</span>
-            <span>{{ formatMoney(tx.balanceAfter, locale) }}</span>
-          </div>
-          <template v-if="frozenChanged">
-            <div class="sum-row">
-              <span>{{ t('wallet.detail_frozen_before') }}</span>
-              <span>{{ formatMoney(tx.frozenBefore, locale) }}</span>
-            </div>
-            <div class="sum-row">
-              <span>{{ t('wallet.detail_frozen_after') }}</span>
-              <span>{{ formatMoney(tx.frozenAfter, locale) }}</span>
-            </div>
-          </template>
-        </div>
-      </section>
-
-      <section v-if="tx.referenceType || remarkText" class="section">
-        <div class="section-title">{{ t('wallet.detail_reference') }}</div>
-        <div class="summary-rows">
-          <div v-if="tx.referenceType" class="sum-row">
-            <span>{{ t('wallet.detail_reference_type') }}</span>
-            <span>{{ referenceLabel }}</span>
-          </div>
-          <div v-if="tx.referenceId && !tx.betNo" class="sum-row">
-            <span>{{ t('wallet.detail_reference_id') }}</span>
-            <span class="mono">{{ tx.referenceId }}</span>
-          </div>
-          <div v-if="remarkText" class="sum-row">
-            <span>{{ t('wallet.detail_remark') }}</span>
-            <span class="remark">{{ remarkText }}</span>
-          </div>
-        </div>
-        <button v-if="tx.betNo" type="button" class="bet-link" @click="goBetDetail">
-          {{ t('wallet.detail_bet_link') }} · {{ tx.betNo }}
-        </button>
-        <button v-if="cashbackBatchNo" type="button" class="bet-link" @click="goCashbackDetail">
-          {{ t('wallet.detail_cashback_link') }} · {{ cashbackBatchNo }}
-        </button>
-      </section>
-
-      <section class="section">
-        <div class="section-title">{{ t('wallet.detail_tx_id') }}</div>
-        <div class="tx-id">{{ tx.transactionId }}</div>
-      </section>
-    </template>
-  </div>
+  <DesktopWalletTransactionDetailView v-if="isDesktop" />
+  <MobileWalletTransactionDetailView v-else />
 </template>
-
-<style scoped>
-.detail-page {
-  padding-bottom: 32px;
-}
-
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.top-bar {
-  margin-bottom: 4px;
-}
-
-.back-btn {
-  background: none;
-  border: none;
-  color: var(--primary-light, #d4af37);
-  font-size: 15px;
-  font-weight: 700;
-  padding: 4px 0 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.state {
-  text-align: center;
-  padding: 60px 20px;
-  color: #666;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.hero {
-  border-radius: 14px;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 12px;
-  text-align: center;
-  background: #141414;
-  border: 1px solid #222;
-}
-
-.hero.pos {
-  border-color: rgba(212, 175, 55, 0.25);
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.03));
-}
-
-.hero.neg {
-  border-color: rgba(224, 80, 80, 0.2);
-  background: linear-gradient(135deg, rgba(224, 80, 80, 0.1), rgba(224, 80, 80, 0.03));
-}
-
-.hero.zero {
-  border-color: rgba(255, 255, 255, 0.08);
-  background: #141414;
-}
-
-.hero-type {
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: #888;
-}
-
-.hero-summary {
-  font-size: 13px;
-  font-weight: 600;
-  color: #bbb;
-  max-width: 100%;
-  word-break: break-all;
-}
-
-.hero-amount {
-  font-size: 34px;
-  font-weight: 900;
-  line-height: 1.1;
-}
-
-.hero.pos .hero-amount { color: var(--primary-light); }
-.hero.neg .hero-amount { color: var(--danger); }
-.hero.zero .hero-amount { color: var(--text-muted, #888); }
-
-.hero-time {
-  font-size: 11px;
-  color: #555;
-  font-weight: 600;
-}
-
-.section {
-  background: #141414;
-  border: 1px solid #222;
-  border-radius: 12px;
-  padding: 14px 16px;
-  margin-bottom: 10px;
-}
-
-.section-title {
-  font-size: 12px;
-  font-weight: 800;
-  color: #888;
-  letter-spacing: 0.04em;
-  margin-bottom: 10px;
-}
-
-.summary-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.sum-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
-  font-size: 13px;
-  color: #aaa;
-}
-
-.sum-row span:last-child {
-  color: #f0f0f0;
-  font-weight: 700;
-  text-align: right;
-  word-break: break-all;
-}
-
-.pos { color: var(--primary-light) !important; }
-.neg { color: var(--danger) !important; }
-.zero { color: var(--text-muted, #888) !important; }
-
-.mono {
-  font-family: ui-monospace, monospace;
-  font-size: 12px;
-}
-
-.remark {
-  max-width: 60%;
-  line-height: 1.4;
-}
-
-.bet-link {
-  width: 100%;
-  margin-top: 12px;
-  padding: 10px 14px;
-  border-radius: 10px;
-  border: 1px solid var(--border-gold-soft, rgba(212, 175, 55, 0.35));
-  background: rgba(212, 175, 55, 0.08);
-  color: var(--primary-light);
-  font-size: 13px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.tx-id {
-  font-family: ui-monospace, monospace;
-  font-size: 12px;
-  color: #ccc;
-  word-break: break-all;
-  line-height: 1.5;
-}
-</style>
diff --git a/apps/player/src/views/WalletView.vue b/apps/player/src/views/WalletView.vue
index 45e2cf9..39a6ffc 100644
--- a/apps/player/src/views/WalletView.vue
+++ b/apps/player/src/views/WalletView.vue
@@ -1,263 +1,10 @@
 <script setup lang="ts">
-import { ref, onActivated, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import api from '../api';
-import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
-import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../utils/walletTx';
-import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
-import GoldSpinner from '../components/GoldSpinner.vue';
-import { usePullToRefresh } from '../composables/usePullToRefresh';
-
-const router = useRouter();
-const { t, locale } = useI18n();
-
-type Transaction = {
-  transactionType: string;
-  displayType?: string;
-  summary?: string | null;
-  summaryKind?: 'opening_bonus' | null;
-  referenceType?: string | null;
-  amount: string;
-  frozenBefore?: string;
-  frozenAfter?: string;
-  createdAt: string;
-  transactionId: string;
-};
-
-const items = ref<Transaction[]>([]);
-const cashbackTotal = ref<string>('0');
-const loading = ref(true);
-const PREVIEW_COUNT = 15;
-
-function txLabel(tx: Transaction): string {
-  const key = txTypeKey(txDisplayType(tx));
-  if (key) {
-    const translated = t(key);
-    if (translated !== key) return translated;
-  }
-  return tx.transactionType;
-}
-
-function txSubtitle(tx: Transaction): string {
-  return txSummaryLabel(tx, t);
-}
-
-function goDetail(tx: Transaction) {
-  if (!tx.transactionId) return;
-  router.push(`/wallet/transactions/${tx.transactionId}`);
-}
-
-function goCashbacks() {
-  router.push('/wallet/cashbacks');
-}
-
-async function fetchData() {
-  loading.value = true;
-  try {
-    const [txRes, cbRes] = await Promise.all([
-      api.get('/player/wallet/transactions', { params: { page: 1 } }),
-      api.get('/player/cashbacks').catch(() => ({ data: { data: [] } })),
-    ]);
-    const result = txRes.data.data ?? { items: [] };
-    items.value = (result.items ?? []).slice(0, PREVIEW_COUNT);
-    const cbRows = parseCashbackApiData(cbRes.data?.data);
-    cashbackTotal.value = sumCashbackAmount(cbRows).toString();
-  } catch {
-    /* ignore */
-  } finally {
-    loading.value = false;
-  }
-}
-
-const { pullDistance, spinning, progress } = usePullToRefresh({
-  onRefresh: fetchData,
-});
-
-onMounted(fetchData);
-onActivated(fetchData);
-
-const pullIndicatorStyle = () => ({
-  height: `${pullDistance.value}px`,
-  opacity: Math.min(pullDistance.value / 48, 1),
-});
+import { useViewport } from '../composables/useViewport';
+import MobileWalletView from './MobileWalletView.vue';
+import DesktopWalletView from './desktop/DesktopWalletView.vue';
+const { isDesktop } = useViewport();
 </script>
-
 <template>
-  <div class="wallet-page">
-    <div
-      class="pull-indicator"
-      :style="pullIndicatorStyle()"
-    >
-      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
-    </div>
-
-    <div v-if="loading" class="state">
-      <GoldSpinner :size="36" />
-      <span class="loading-text">{{ t('bet.loading') }}</span>
-    </div>
-
-    <template v-else>
-      <div class="top-bar">
-        <button type="button" class="more-link secondary" @click="goCashbacks">
-          {{ t('wallet.view_cashbacks_detail') }} &#x203A;
-        </button>
-        <button
-          v-if="items.length"
-          type="button"
-          class="more-link"
-          @click="router.push('/wallet/detail')"
-        >{{ t('wallet.view_all') }} &#x203A;</button>
-      </div>
-
-      <div v-if="items.length" class="tx-list">
-        <button
-          v-for="tx in items"
-          :key="tx.transactionId"
-          type="button"
-          class="tx-row"
-          @click="goDetail(tx)"
-        >
-          <div class="tx-main">
-            <div class="tx-text">
-              <span class="tx-type">{{ txLabel(tx) }}</span>
-              <span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
-            </div>
-            <span :class="txAmountClass(tx.amount)">
-              {{ formatMoney(tx.amount, locale) }}
-            </span>
-          </div>
-          <div class="tx-meta">
-            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
-            <span class="tx-arrow">&#x203A;</span>
-          </div>
-        </button>
-      </div>
-
-      <div v-if="!items.length" class="empty">
-        {{ t('wallet.no_records') }}
-      </div>
-    </template>
-  </div>
+  <DesktopWalletView v-if="isDesktop" />
+  <MobileWalletView v-else />
 </template>
-
-<style scoped>
-.wallet-page {
-  padding-bottom: 24px;
-}
-
-.pull-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-
-.state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-  color: var(--text-muted);
-  padding: 56px 20px;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.loading-text {
-  font-size: 13px;
-}
-
-.tx-list {
-  margin-bottom: 0;
-}
-
-.tx-row {
-  display: block;
-  width: 100%;
-  text-align: left;
-  font-size: 14px;
-  padding: 8px 12px;
-  border: none;
-  border-bottom: 1px solid var(--border);
-  background: transparent;
-  cursor: pointer;
-}
-
-.tx-row:last-child {
-  border-bottom: none;
-}
-
-.tx-row:active {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.tx-main {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
-
-.tx-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.tx-summary {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tx-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.tx-type { font-weight: 700; color: var(--text); }
-.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
-.neg { color: var(--danger); font-weight: 700; }
-.zero { color: var(--text-muted); font-weight: 700; font-size: 15px; }
-.tx-time { font-size: 11px; color: var(--text-muted); }
-.tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
-
-.top-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 4px 2px;
-  margin-top: -8px;
-}
-
-.top-bar .more-link.secondary {
-  color: #f0b90b;
-}
-
-.more-link {
-  background: none;
-  border: none;
-  color: var(--primary-light);
-  font-size: 12px;
-  font-weight: 600;
-  padding: 2px 6px;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: opacity 0.2s;
-}
-
-.more-link:active {
-  opacity: 1;
-}
-
-.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
-</style>
diff --git a/apps/player/src/views/desktop/DesktopAnnouncementDetailView.vue b/apps/player/src/views/desktop/DesktopAnnouncementDetailView.vue
new file mode 100644
index 0000000..7e14209
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopAnnouncementDetailView.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * Desktop Announcement Detail View
+ * Reuses the existing AnnouncementDetailView component in a desktop shell wrapper.
+ */
+import AnnouncementDetailView from '../AnnouncementDetailView.vue';
+</script>
+
+<template>
+  <div class="desktop-content-shell">
+    <div class="content-main">
+      <AnnouncementDetailView />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-content-shell {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.content-main {
+  flex: 1;
+  min-width: 0;
+  padding: 20px 24px 28px;
+  overflow-y: auto;
+  max-width: 760px;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopAnnouncementListView.vue b/apps/player/src/views/desktop/DesktopAnnouncementListView.vue
new file mode 100644
index 0000000..91a9bac
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopAnnouncementListView.vue
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { computed, onActivated } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { formatLocalMatchDateTime } from '@thebet365/shared';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import defaultBannerImg from '../../assets/images/banner.webp';
+import { usePlayerHome, type PlayerContentItem } from '../../composables/usePlayerHome';
+import { stripHtml } from '../../utils/html';
+
+const router = useRouter();
+const { t, locale } = useI18n();
+const { hubContentItems, loading, load } = usePlayerHome();
+
+const items = computed(() => hubContentItems.value);
+
+function goBack() {
+  if (window.history.length > 1) {
+    router.back();
+    return;
+  }
+  router.push('/');
+}
+
+function openDetail(id: string) {
+  router.push(`/announcements/${id}`);
+}
+
+function formatDate(createdAt?: string) {
+  if (!createdAt) return '';
+  return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'full' });
+}
+
+function itemTitle(item: PlayerContentItem) {
+  const title = item.translation?.title?.trim();
+  if (title) return title;
+  return stripHtml(item.translation?.body ?? '') || t('home.announcement_badge');
+}
+
+function itemPreview(item: PlayerContentItem) {
+  const title = item.translation?.title?.trim();
+  const bodyText = stripHtml(item.translation?.body ?? '');
+  if (bodyText && bodyText !== title) return bodyText;
+  return '';
+}
+
+function typeLabel(item: PlayerContentItem) {
+  switch (item.contentType) {
+    case 'BANNER':
+      return t('announcements.type_banner');
+    case 'TICKER':
+      return t('announcements.type_ticker');
+    default:
+      return t('announcements.type_notice');
+  }
+}
+
+function coverUrl(item: PlayerContentItem) {
+  const url = item.translation?.imageUrl?.trim();
+  if (url) return url;
+  if (item.contentType === 'BANNER') return defaultBannerImg;
+  return '';
+}
+
+onActivated(() => {
+  void load(true);
+});
+</script>
+
+<template>
+  <div class="desktop-announce-center">
+    <header class="center-hero">
+      <button type="button" class="back-btn" @click="goBack">
+        <span class="back-icon" aria-hidden="true">‹</span>
+        {{ t('announcements.back') }}
+      </button>
+      <div class="hero-main">
+        <div class="hero-title-row">
+          <svg class="hero-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path fill="currentColor" d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
+          </svg>
+          <h1>{{ t('announcements.title') }}</h1>
+        </div>
+        <p class="hero-sub">{{ t('announcements.center_desc') }}</p>
+      </div>
+      <div v-if="items.length" class="hero-count">{{ t('announcements.total_count', { count: items.length }) }}</div>
+    </header>
+
+    <div v-if="loading && !items.length" class="state-wrap">
+      <GoldSpinner :size="40" />
+    </div>
+
+    <div v-else-if="!items.length" class="empty-wrap">
+      <p>{{ t('announcements.empty') }}</p>
+    </div>
+
+    <div v-else class="announce-grid">
+      <button
+        v-for="item in items"
+        :key="item.id"
+        type="button"
+        class="announce-card"
+        @click="openDetail(item.id)"
+      >
+        <div v-if="coverUrl(item)" class="card-cover">
+          <img :src="coverUrl(item)" :alt="itemTitle(item)" loading="lazy" />
+        </div>
+        <div class="card-body">
+          <div class="card-top">
+            <span class="type-badge">{{ typeLabel(item) }}</span>
+            <span v-if="item.createdAt" class="card-date">{{ formatDate(item.createdAt) }}</span>
+          </div>
+          <h2 class="card-title">{{ itemTitle(item) }}</h2>
+          <p v-if="itemPreview(item)" class="card-preview">{{ itemPreview(item) }}</p>
+          <span class="card-more">{{ t('announcements.read_more') }} ›</span>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-announce-center {
+  width: 100%;
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 8px 0 40px;
+}
+
+.center-hero {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 24px;
+  padding: 18px 20px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(18, 18, 18, 0.95) 42%);
+}
+
+.back-btn {
+  flex-shrink: 0;
+  margin-top: 2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #141414;
+  color: var(--gold);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.back-btn:hover {
+  border-color: var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.back-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.hero-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.hero-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.hero-icon {
+  width: 22px;
+  height: 22px;
+  color: var(--primary-light);
+}
+
+.center-hero h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.hero-sub {
+  margin: 8px 0 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+.hero-count {
+  flex-shrink: 0;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.08);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--primary-light);
+  white-space: nowrap;
+}
+
+.state-wrap,
+.empty-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 240px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.announce-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+@media (max-width: 1100px) {
+  .announce-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.announce-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  background: rgba(18, 18, 18, 0.96);
+  text-align: left;
+  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
+}
+
+.announce-card:hover {
+  border-color: var(--border-gold-soft);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
+}
+
+.card-cover {
+  aspect-ratio: 16 / 7;
+  background: #0a0a0a;
+  overflow: hidden;
+}
+
+.card-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 14px 16px;
+  flex: 1;
+}
+
+.card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.type-badge {
+  flex-shrink: 0;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: rgba(212, 175, 55, 0.12);
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--gold);
+}
+
+.card-date {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1.45;
+  color: #fff;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-preview {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--text-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-more {
+  margin-top: auto;
+  padding-top: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--primary-light);
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopAnnouncementsHubShell.vue b/apps/player/src/views/desktop/DesktopAnnouncementsHubShell.vue
new file mode 100644
index 0000000..52ff171
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopAnnouncementsHubShell.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import AnnouncementListView from '../AnnouncementListView.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const isDetailRoute = computed(
+  () => route.path.startsWith('/announcements/') && Boolean(route.params.id),
+);
+</script>
+
+<template>
+  <div class="desktop-layout-hub desktop-hub-page">
+    <aside class="desktop-hub-left">
+      <AnnouncementListView embedded />
+    </aside>
+    <main class="desktop-hub-right">
+      <slot v-if="isDetailRoute" />
+      <div v-else class="hub-placeholder">
+        {{ t('announcements.select_hint') }}
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.desktop-hub-page {
+  flex: 1;
+  min-height: 0;
+}
+
+.hub-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopBetDetailView.vue b/apps/player/src/views/desktop/DesktopBetDetailView.vue
new file mode 100644
index 0000000..b68236f
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopBetDetailView.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter, RouterLink } from 'vue-router';
+import api from '../../api';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+function goBack() {
+  if (window.history.state && window.history.state.back) {
+    router.back();
+  } else {
+    router.push('/bets');
+  }
+}
+
+type BetDetail = {
+  betNo: string;
+  stake: string;
+  potentialPayout?: string;
+  status: string;
+  createdAt: string;
+  selections: Array<{
+    matchName?: string;
+    selectionName?: string;
+    odds?: number;
+    market?: string;
+    homeScore?: number;
+    awayScore?: number;
+    matchStatus?: string;
+    [key: string]: any;
+  }>;
+  [key: string]: any;
+};
+
+const detail = ref<BetDetail | null>(null);
+const loading = ref(true);
+const error = ref(false);
+
+async function loadDetail() {
+  const betNo = route.params.betNo as string;
+  if (!betNo) return;
+  loading.value = true;
+  error.value = false;
+  try {
+    const { data } = await api.get(`/player/bets/${betNo}`);
+    detail.value = data.data ?? null;
+  } catch {
+    error.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadDetail);
+
+function statusClass(status: string) {
+  const map: Record<string, string> = { WON: 'status-won', LOST: 'status-lost', PENDING: 'status-pending', PUSH: 'status-push' };
+  return map[status?.toUpperCase()] ?? 'status-default';
+}
+
+function statusLabel(status: string) {
+  const map: Record<string, string> = {
+    WON: t('history.filter_won'),
+    LOST: t('history.filter_lost'),
+    PENDING: t('history.filter_pending'),
+    PUSH: t('history.filter_push'),
+  };
+  return map[status?.toUpperCase()] ?? status;
+}
+</script>
+
+<template>
+  <div class="desktop-account-page">
+    <main class="account-main">
+      <div class="page-header">
+        <button type="button" class="back-btn" @click="goBack">
+          ‹ {{ t('common.back') || '返回' }}
+        </button>
+        <h1 class="page-title">{{ t('bet.detail_title') || '注单详情' }}</h1>
+      </div>
+
+      <div v-if="loading" class="loading-state">
+        <GoldSpinner :size="36" />
+      </div>
+
+      <div v-else-if="error" class="error-state">
+        <p>{{ t('common.load_failed') }}</p>
+        <button type="button" class="retry-btn" @click="loadDetail">{{ t('common.retry') }}</button>
+      </div>
+
+      <div v-else-if="detail" class="detail-layout">
+        <!-- Header info -->
+        <div class="detail-card header-card">
+          <div class="bet-no">{{ detail.betNo }}</div>
+          <span class="status-badge" :class="statusClass(detail.status)">{{ statusLabel(detail.status) }}</span>
+          <div class="amount-row">
+            <div class="amount-item">
+              <span class="amount-label">{{ t('bet.stake') || '投注额' }}</span>
+              <span class="amount-val">{{ detail.stake }}</span>
+            </div>
+            <div class="amount-item">
+              <span class="amount-label">{{ t('bet.potential_payout') || '预计派彩' }}</span>
+              <span class="amount-val gold">{{ detail.potentialPayout || '-' }}</span>
+            </div>
+            <div class="amount-item">
+              <span class="amount-label">{{ t('bet.placed_at') || '下注时间' }}</span>
+              <span class="amount-val date">{{ new Date(detail.createdAt).toLocaleString() }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Selections -->
+        <div class="detail-card">
+          <div class="card-title">{{ t('bet.selections') || '投注选项' }}</div>
+          <div v-for="(sel, idx) in detail.selections" :key="idx" class="sel-row">
+            <div class="sel-match">{{ sel.matchName || t('bet.match') }}</div>
+            <div class="sel-meta">
+              <span class="sel-market">{{ sel.market || sel.marketName || '' }}</span>
+              <span class="sel-name">{{ sel.selectionName || '' }}</span>
+              <span class="sel-odds">@{{ sel.odds }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="empty-state">{{ t('common.not_found') || '未找到记录' }}</div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.desktop-account-page { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
+
+.account-main { flex: 1; min-width: 0; padding: 24px 28px; overflow-y: auto; }
+.page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
+.back-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
+.back-btn:hover { color: var(--text); }
+.page-title { font-size: 18px; font-weight: 800; color: var(--primary-light); margin: 0; }
+.loading-state { display: flex; justify-content: center; align-items: center; padding: 80px 0; }
+.error-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 20px; color: var(--text-muted); }
+.retry-btn { padding: 8px 24px; border-radius: 6px; border: 1px solid var(--primary); background: transparent; color: var(--primary-light); font-size: 13px; font-weight: 700; cursor: pointer; }
+.empty-state { display: flex; align-items: center; justify-content: center; padding: 80px 20px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
+
+.detail-layout { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
+
+.detail-card {
+  background: var(--desktop-sidebar-bg);
+  border: 1px solid var(--desktop-border);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.header-card { display: flex; flex-direction: column; gap: 12px; }
+
+.bet-no {
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+}
+
+.status-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; align-self: flex-start; }
+.status-won { background: rgba(52,199,89,0.12); color: #4cd964; }
+.status-lost { background: rgba(255,69,58,0.12); color: #ff453a; }
+.status-pending { background: rgba(212,175,55,0.12); color: var(--primary-light); }
+.status-push { background: rgba(100,100,100,0.12); color: #aaa; }
+.status-default { background: rgba(100,100,100,0.1); color: #888; }
+
+.amount-row { display: flex; gap: 32px; padding-top: 4px; flex-wrap: wrap; }
+.amount-item { display: flex; flex-direction: column; gap: 4px; }
+.amount-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+.amount-val { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
+.amount-val.gold { color: var(--primary-light); }
+.amount-val.date { font-size: 13px; color: var(--text-muted); font-weight: 600; }
+
+.card-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--desktop-border); }
+
+.sel-row { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
+.sel-row:last-child { border-bottom: none; }
+.sel-match { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
+.sel-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-muted); }
+.sel-name { color: var(--text); font-weight: 700; }
+.sel-odds { color: var(--primary-light); font-weight: 800; margin-left: auto; }
+</style>
diff --git a/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue b/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue
new file mode 100644
index 0000000..23d8827
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopCashbackRecordsView.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onActivated, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import api from '../../api';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import Pagination from '../../components/desktop/Pagination.vue';
+import DesktopWalletSubNav from '../../components/desktop/DesktopWalletSubNav.vue';
+import { formatMoney, formatMoneyCompact } from '../../utils/localeDisplay';
+import { parseCashbackApiData, type CashbackRecord } from '../../utils/cashback';
+
+const COL_COUNT = 6;
+
+const { t, locale } = useI18n();
+
+const allItems = ref<CashbackRecord[]>([]);
+const loading = ref(true);
+const page = ref(1);
+const pageSize = ref(20);
+
+const total = computed(() => allItems.value.length);
+
+const items = computed(() => {
+  const start = (page.value - 1) * pageSize.value;
+  return allItems.value.slice(start, start + pageSize.value);
+});
+
+const totalAmount = computed(() =>
+  allItems.value.reduce((sum, row) => sum + Math.abs(parseFloat(row.amount) || 0), 0),
+);
+
+function formatPeriod(start: string, end: string) {
+  const opts: Intl.DateTimeFormatOptions = { month: '2-digit', day: '2-digit' };
+  const s = new Date(start).toLocaleDateString(locale.value, opts);
+  const e = new Date(end).toLocaleDateString(locale.value, opts);
+  return `${s} – ${e}`;
+}
+
+function formatRate(rate: string) {
+  const n = parseFloat(rate);
+  if (!Number.isFinite(n)) return rate;
+  return `${(n * 100).toFixed(2)}%`;
+}
+
+function formatTime(value: string | null) {
+  if (!value) return '—';
+  return new Date(value).toLocaleString(locale.value, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+}
+
+async function loadData() {
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/cashbacks');
+    allItems.value = parseCashbackApiData(data.data);
+    const maxPage = Math.max(1, Math.ceil(allItems.value.length / pageSize.value));
+    if (page.value > maxPage) page.value = maxPage;
+  } catch {
+    allItems.value = [];
+    page.value = 1;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function onPageChange(p: number) {
+  page.value = p;
+}
+
+watch(pageSize, () => {
+  page.value = 1;
+});
+
+onMounted(loadData);
+onActivated(loadData);
+</script>
+
+<template>
+  <div class="desktop-records-page">
+    <header class="desktop-records-header">
+      <div class="desktop-records-header-main">
+        <DesktopWalletSubNav />
+      </div>
+      <div v-if="!loading && allItems.length" class="desktop-records-actions summary-chip">
+        <span class="summary-label">{{ t('cashback.total_received') }}</span>
+        <span class="summary-value">{{ formatMoney(totalAmount, locale) }}</span>
+      </div>
+    </header>
+
+    <section class="desktop-records-panel">
+      <div class="desktop-records-table-wrap">
+        <table class="desktop-records-table">
+          <thead>
+            <tr>
+              <th>{{ t('cashback.period') }}</th>
+              <th>{{ t('cashback.effective_stake') }}</th>
+              <th>{{ t('cashback.rate') }}</th>
+              <th class="num-th">{{ t('cashback.amount') }}</th>
+              <th>{{ t('cashback.batch_no') }}</th>
+              <th>{{ t('wallet.time') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="loading" class="state-row">
+              <td :colspan="COL_COUNT">
+                <div class="desktop-records-loading-cell">
+                  <GoldSpinner :size="36" />
+                </div>
+              </td>
+            </tr>
+            <template v-else-if="items.length">
+              <tr v-for="row in items" :key="row.id" class="hover-row">
+                <td>{{ formatPeriod(row.periodStart, row.periodEnd) }}</td>
+                <td>{{ formatMoneyCompact(row.effectiveStake, locale) }}</td>
+                <td>{{ formatRate(row.rate) }}</td>
+                <td class="num-cell desktop-records-amount pos">{{ formatMoney(row.amount, locale) }}</td>
+                <td class="batch-cell">{{ row.batchNo }}</td>
+                <td class="date-cell">{{ formatTime(row.confirmedAt ?? row.createdAt) }}</td>
+              </tr>
+            </template>
+            <tr v-else class="state-row">
+              <td :colspan="COL_COUNT" class="desktop-records-table-empty">
+                <div>{{ t('cashback.empty') }}</div>
+                <p class="empty-hint">{{ t('cashback.empty_hint') }}</p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-if="!loading && total > 0" class="desktop-records-pagination">
+        <Pagination
+          v-model="page"
+          v-model:pageSize="pageSize"
+          :total="total"
+          @change="onPageChange"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.summary-chip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 14px;
+  border: 1px solid rgba(212, 175, 55, 0.22);
+  border-radius: 8px;
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.summary-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 700;
+}
+
+.summary-value {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--primary-light);
+  font-variant-numeric: tabular-nums;
+}
+
+.batch-cell {
+  font-family: 'SF Mono', Consolas, monospace;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.empty-hint {
+  margin: 8px 0 0;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.6;
+  color: var(--text-muted);
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopFootballView.vue b/apps/player/src/views/desktop/DesktopFootballView.vue
new file mode 100644
index 0000000..295f87b
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopFootballView.vue
@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useMatchFilters } from '../../composables/useMatchFilters';
+import { useDesktopParlayMatches, type DesktopParlayMatch } from '../../composables/useDesktopParlayMatches';
+import { useOutrightEvents } from '../../composables/useOutrightEvents';
+import MatchBetCard from '../../components/MatchBetCard.vue';
+import DesktopOutrightEventCard from '../../components/desktop/DesktopOutrightEventCard.vue';
+import {
+  isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
+  isInLocalTodayMatchWindow as isInTodayMatchWindow,
+} from '@thebet365/shared';
+
+type MainTab = 'matches' | 'outright';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const { parlayMatches, parlayLoading, loadParlayMatches } = useDesktopParlayMatches();
+const { searchQuery, filterState } = useMatchFilters();
+const { loading: outrightLoading, loadError: outrightError, events: outrightEvents, load: loadOutrights } =
+  useOutrightEvents();
+
+const mainTab = ref<MainTab>('matches');
+
+watch(
+  () => route.query.tab,
+  (tab) => {
+    mainTab.value = tab === 'outright' ? 'outright' : 'matches';
+  },
+  { immediate: true },
+);
+
+function setMainTab(tab: MainTab) {
+  if (mainTab.value === tab && (tab === 'outright') === (route.query.tab === 'outright')) {
+    return;
+  }
+  mainTab.value = tab;
+  const query = { ...route.query };
+  if (tab === 'outright') query.tab = 'outright';
+  else delete query.tab;
+  router.replace({ path: route.path, query });
+}
+
+watch(mainTab, (tab) => {
+  if (tab === 'outright') {
+    void loadOutrights({ silent: outrightEvents.value.length > 0 });
+  }
+});
+
+function normalizeLeagueName(name: string): string {
+  return name
+    .replace(/\.unit$/i, '')
+    .replace(/[-_]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function matchesSearchKeyword(m: DesktopParlayMatch, keyword: string) {
+  if (!keyword) return true;
+  const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
+  return haystack.includes(keyword);
+}
+
+const filteredMatches = computed(() => {
+  if (mainTab.value !== 'matches') return [];
+  const now = new Date();
+  const keyword = searchQuery.value.trim().toLowerCase();
+  return parlayMatches.value.filter((m) => {
+    if (!matchesSearchKeyword(m, keyword)) return false;
+
+    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 (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 leagueGroups = computed(() => {
+  const groups: Record<string, { leagueName: string; matches: DesktopParlayMatch[] }> = {};
+  for (const m of filteredMatches.value) {
+    const id = m.leagueId ?? m.leagueName;
+    if (!groups[id]) {
+      groups[id] = { leagueName: normalizeLeagueName(m.leagueName), matches: [] };
+    }
+    groups[id].matches.push(m);
+  }
+  return Object.values(groups).sort((a, b) => a.leagueName.localeCompare(b.leagueName));
+});
+
+function goMatch(id: string) {
+  router.push(`/match/${id}`);
+}
+
+function goOutright(id: string) {
+  router.push(`/outright/${id}`);
+}
+
+async function refresh() {
+  if (mainTab.value === 'outright') {
+    await loadOutrights({ silent: false });
+    return;
+  }
+  await loadParlayMatches(true);
+}
+
+void loadParlayMatches(true);
+</script>
+
+<template>
+  <div class="desktop-football-view">
+    <div class="view-header">
+      <div class="main-tabs">
+        <button
+          type="button"
+          class="main-tab"
+          :class="{ active: mainTab === 'matches' }"
+          @click="setMainTab('matches')"
+        >
+          ⚽ {{ t('bet.tab_matches') }}
+        </button>
+        <button
+          type="button"
+          class="main-tab"
+          :class="{ active: mainTab === 'outright' }"
+          @click="setMainTab('outright')"
+        >
+          🏆 {{ t('bet.tab_outright') }}
+        </button>
+      </div>
+      <button
+        type="button"
+        class="refresh-btn"
+        :disabled="mainTab === 'matches' ? parlayLoading : outrightLoading"
+        @click="refresh"
+      >
+        <span v-if="(mainTab === 'matches' ? parlayLoading : outrightLoading)" class="spin">↻</span>
+        <span v-else>↻ {{ t('bet.refresh') }}</span>
+      </button>
+    </div>
+
+    <div v-if="mainTab === 'matches'" class="matches-list-panel">
+      <div v-if="parlayLoading && !leagueGroups.length" class="skeleton-container">
+        <div v-for="i in 6" :key="i" class="skeleton-card desktop-skeleton"></div>
+      </div>
+
+      <template v-else-if="leagueGroups.length">
+        <section v-for="lg in leagueGroups" :key="lg.leagueName" class="league-section">
+          <h2 class="league-title">{{ lg.leagueName }}</h2>
+          <div class="match-grid">
+            <MatchBetCard
+              v-for="m in lg.matches"
+              :key="m.id"
+              class="match-card-dense"
+              :match="m"
+              @bet="goMatch"
+            />
+          </div>
+        </section>
+      </template>
+
+      <div v-else class="empty-state">
+        <p>{{ t('bet.no_matches') }}</p>
+      </div>
+    </div>
+
+    <div v-else class="outright-panel-wrap">
+      <div v-if="outrightLoading && !outrightEvents.length" class="skeleton-container">
+        <div v-for="i in 4" :key="i" class="skeleton-card desktop-skeleton"></div>
+      </div>
+
+      <template v-else-if="outrightEvents.length">
+        <p v-if="outrightEvents.length > 1" class="outright-summary">
+          {{
+            t('bet.outright_events_summary', {
+              events: outrightEvents.length,
+              teams: outrightEvents.reduce((n, e) => n + e.selections.length, 0),
+            })
+          }}
+        </p>
+        <div class="outright-event-grid">
+          <DesktopOutrightEventCard
+            v-for="event in outrightEvents"
+            :key="event.id"
+            :event="event"
+            @open="goOutright(event.id)"
+          />
+        </div>
+      </template>
+
+      <div v-else class="empty-state">
+        <p>{{ outrightError || t('bet.no_outright') }}</p>
+        <p v-if="!outrightError" class="empty-hint">{{ t('bet.no_outright_hint') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-football-view {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 16px;
+  box-sizing: border-box;
+  min-height: 100%;
+}
+
+.view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 8px;
+}
+
+.main-tabs {
+  display: flex;
+  gap: 10px;
+}
+
+.main-tab {
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  padding: 5px 10px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.main-tab:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.main-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
+  border: 1px solid var(--border-gold-soft);
+}
+
+.refresh-btn {
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.spin {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  100% { transform: rotate(360deg); }
+}
+
+.skeleton-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 8px;
+}
+
+.skeleton-card {
+  height: 120px;
+  border-radius: 6px;
+}
+
+.league-section + .league-section {
+  margin-top: 14px;
+}
+
+.league-title {
+  margin: 0 0 8px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.06);
+  border-left: 3px solid var(--primary);
+  border-radius: 0 4px 4px 0;
+}
+
+.match-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 8px;
+}
+
+.match-grid :deep(.match-card) {
+  padding: 8px 6px;
+  gap: 6px;
+}
+
+.match-grid :deep(.team-name) {
+  font-size: 13px;
+}
+
+.match-grid :deep(.team-flag) {
+  width: 56px;
+  height: 38px;
+}
+
+.match-grid :deep(.team-flag.flag-logo) {
+  width: 44px;
+  height: 44px;
+  object-fit: contain;
+}
+
+.match-grid :deep(.kickoff) {
+  font-size: 10px;
+}
+
+.match-grid :deep(.vs) {
+  font-size: 11px;
+}
+
+.match-grid :deep(.bet-btn) {
+  font-size: 11px;
+  padding: 5px 10px;
+  min-height: 28px;
+}
+
+.match-grid :deep(.status-tag) {
+  font-size: 9px;
+  padding: 2px 6px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 16px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.empty-hint {
+  margin-top: 8px;
+  font-size: 12px;
+  opacity: 0.85;
+}
+
+.outright-summary {
+  margin: 0 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.outright-event-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 8px;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopForgotPasswordView.vue b/apps/player/src/views/desktop/DesktopForgotPasswordView.vue
new file mode 100644
index 0000000..349f769
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopForgotPasswordView.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+/**
+ * Desktop Forgot Password View
+ */
+import ForgotPasswordView from '../ForgotPasswordView.vue';
+</script>
+
+<template>
+  <div class="desktop-auth-shell">
+    <div class="auth-brand">
+      <div class="brand-inner">
+        <img src="/logo.png" alt="TheBet365" class="brand-logo" />
+        <h1 class="brand-name">THEBET365</h1>
+        <p class="brand-tagline">重置您的登录密码</p>
+      </div>
+    </div>
+    <div class="auth-card-wrap">
+      <div class="auth-card">
+        <ForgotPasswordView />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-auth-shell {
+  display: flex;
+  min-height: 100vh;
+  background: var(--desktop-bg);
+}
+
+.auth-brand {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0d0d0d 100%);
+  border-right: 1px solid var(--desktop-border);
+  position: relative;
+  overflow: hidden;
+}
+
+.auth-brand::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212,175,55,0.06) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.brand-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  padding: 40px;
+}
+
+.brand-logo {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  filter: drop-shadow(0 4px 16px rgba(212,175,55,0.3));
+}
+
+.brand-name {
+  font-size: 28px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  color: var(--primary-light);
+  margin: 0;
+}
+
+.brand-tagline {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin: 0;
+  font-weight: 600;
+}
+
+.auth-card-wrap {
+  width: 480px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  background: var(--desktop-bg);
+  overflow-y: auto;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 380px;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopHomeView.vue b/apps/player/src/views/desktop/DesktopHomeView.vue
new file mode 100644
index 0000000..6792a46
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopHomeView.vue
@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import { onMounted, computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import DesktopBanner3DCarousel from '../../components/desktop/DesktopBanner3DCarousel.vue';
+import HomeAnnouncementCard from '../../components/HomeAnnouncementCard.vue';
+import { usePlayerHome } from '../../composables/usePlayerHome';
+import TeamEmblem from '../../components/TeamEmblem.vue';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import { formatLocalMatchDateTime } from '@thebet365/shared';
+import type { PlayerHomeMatch } from '../../composables/usePlayerHome';
+
+type HotTab = 'hot' | 'upcoming';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
+const activeTab = ref<HotTab>('hot');
+
+const bannerFallbackTo = computed(() => {
+  const id = announcementItems.value[0]?.id;
+  return id ? `/announcements/${id}` : '/announcements';
+});
+
+const displayedMatches = computed<PlayerHomeMatch[]>(() =>
+  activeTab.value === 'hot' ? hotMatches.value : upcomingMatches.value,
+);
+
+const emptyMessage = computed(() =>
+  activeTab.value === 'hot' ? t('home.no_matches') : t('home.upcoming_empty'),
+);
+
+onMounted(() => {
+  void load(true);
+});
+
+function goMatch(id: string) {
+  router.push(`/match/${id}`);
+}
+
+function formatKickoff(startTime: string) {
+  return formatLocalMatchDateTime(startTime, locale.value, { variant: 'full' });
+}
+</script>
+
+<template>
+  <div class="desktop-home-view">
+    <section class="hero-banner-full">
+      <DesktopBanner3DCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
+    </section>
+
+    <div class="content-row">
+      <div class="matches-hub">
+        <div class="hub-header">
+          <div class="tabs-list" role="tablist">
+            <button
+              type="button"
+              role="tab"
+              class="hub-tab"
+              :class="{ active: activeTab === 'hot' }"
+              :aria-selected="activeTab === 'hot'"
+              @click="activeTab = 'hot'"
+            >
+              {{ t('home.hot_tab') || '热门赛事' }}
+            </button>
+            <button
+              type="button"
+              role="tab"
+              class="hub-tab"
+              :class="{ active: activeTab === 'upcoming' }"
+              :aria-selected="activeTab === 'upcoming'"
+              @click="activeTab = 'upcoming'"
+            >
+              {{ t('home.upcoming_tab') || '即将开赛' }}
+            </button>
+          </div>
+          <button type="button" class="refresh-btn" :disabled="loading" @click="load(true)">
+            <span v-if="loading" class="spin">↻</span>
+            <span v-else>↻ {{ t('bet.refresh') || '刷新' }}</span>
+          </button>
+        </div>
+
+        <!-- Loading State -->
+        <div v-if="loading && !displayedMatches.length" class="loading-state">
+          <GoldSpinner :active="true" />
+        </div>
+
+        <!-- Matches Grid -->
+        <div v-else-if="displayedMatches.length" class="matches-grid">
+          <div
+            v-for="match in displayedMatches"
+            :key="match.id"
+            class="match-card clickable"
+            @click="goMatch(match.id)"
+          >
+            <div class="card-top">
+              <span class="league-tag">{{ match.leagueName }}</span>
+              <span class="live-indicator" v-if="(match as any).status === 'LIVE'">LIVE</span>
+            </div>
+
+            <div class="teams-versus">
+              <div class="team-side home">
+                <TeamEmblem
+                  size="md"
+                  :team-code="match.homeTeamCode"
+                  :team-name="match.homeTeamName"
+                  :logo-url="match.homeTeamLogoUrl"
+                />
+                <span class="team-name">{{ match.homeTeamName }}</span>
+              </div>
+              <div class="vs-divider">VS</div>
+              <div class="team-side away">
+                <TeamEmblem
+                  size="md"
+                  :team-code="match.awayTeamCode"
+                  :team-name="match.awayTeamName"
+                  :logo-url="match.awayTeamLogoUrl"
+                />
+                <span class="team-name">{{ match.awayTeamName }}</span>
+              </div>
+            </div>
+
+            <div class="card-footer">
+              <span class="match-time">{{ formatKickoff(match.startTime) }}</span>
+              <button type="button" class="bet-action-btn">{{ t('nav.bet') || '投注' }}</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else class="empty-state">
+          <p>{{ emptyMessage }}</p>
+        </div>
+      </div>
+
+      <aside class="home-sidebar">
+        <HomeAnnouncementCard />
+      </aside>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-home-view {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.hero-banner-full {
+  width: 100%;
+}
+
+.content-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 16px;
+  align-items: start;
+}
+
+.home-sidebar {
+  min-width: 0;
+}
+
+.home-sidebar :deep(.home-announce-card) {
+  border-radius: 12px;
+}
+
+.matches-hub {
+  background: rgba(20, 20, 20, 0.85);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.hub-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+}
+
+.tabs-list {
+  display: flex;
+  gap: 16px;
+}
+
+.hub-tab {
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 700;
+  padding: 8px 4px;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+
+.hub-tab:hover {
+  color: #fff;
+}
+
+.hub-tab.active {
+  color: var(--primary-light);
+  border-bottom-color: var(--primary);
+}
+
+.refresh-btn {
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.spin {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  100% { transform: rotate(360deg); }
+}
+
+.loading-state,
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  color: var(--text-muted);
+}
+
+.matches-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 14px;
+}
+
+.match-card {
+  background: #141414;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: all 0.2s;
+}
+
+.match-card:hover {
+  border-color: var(--border-gold-soft);
+  box-shadow: var(--shadow-gold);
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.league-tag {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
+  padding: 2px 6px;
+  border-radius: 4px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.live-indicator {
+  font-size: 10px;
+  font-weight: 800;
+  background: var(--danger);
+  color: #fff;
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+
+.teams-versus {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.team-side {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+}
+
+.team-name {
+  font-size: 12px;
+  font-weight: 700;
+  color: #eee;
+  text-align: center;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vs-divider {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--text-muted);
+  background: #222;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.match-time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.bet-action-btn {
+  padding: 4px 12px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: transparent;
+  color: var(--primary-light);
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.2s;
+}
+
+.match-card:hover .bet-action-btn {
+  background: var(--primary);
+  color: #3D2800;
+  border-color: var(--primary);
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopInboxHubView.vue b/apps/player/src/views/desktop/DesktopInboxHubView.vue
new file mode 100644
index 0000000..a066ac0
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopInboxHubView.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, onActivated, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import MessageListPanel from '../../components/MessageListPanel.vue';
+import CustomerServicePanel from '../../components/CustomerServicePanel.vue';
+import ConfirmDialog from '../../components/ConfirmDialog.vue';
+import { useAuthStore } from '../../stores/auth';
+import { usePlayerMessages } from '../../composables/usePlayerMessages';
+import { useInboxFeature } from '../../composables/useInboxFeature';
+
+type HubTab = 'messages' | 'support';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const auth = useAuthStore();
+const { inboxEnabled, hubTitleKey } = useInboxFeature();
+const { unreadCount, messages, listLoaded, refreshUnreadCount, markAllRead, deleteAllMessages } = usePlayerMessages();
+
+const markingAll = ref(false);
+const deletingAll = ref(false);
+const deleteAllConfirmVisible = ref(false);
+
+const activeTab = computed<HubTab>(() => {
+  if (!inboxEnabled.value) return 'support';
+  return route.query.tab === 'support' ? 'support' : 'messages';
+});
+
+const unreadInList = computed(() => messages.value.filter((item) => !item.isRead).length);
+const hasMessages = computed(() => listLoaded.value && messages.value.length > 0);
+const showMessageActions = computed(
+  () => inboxEnabled.value && activeTab.value === 'messages' && auth.token && hasMessages.value,
+);
+
+function switchTab(tab: HubTab) {
+  if (!inboxEnabled.value || tab === activeTab.value) return;
+  router.replace({ path: '/messages', query: tab === 'support' ? { tab: 'support' } : {} });
+}
+
+async function onMarkAllRead() {
+  if (!unreadInList.value || markingAll.value) return;
+  markingAll.value = true;
+  try {
+    await markAllRead();
+    await refreshUnreadCount();
+  } finally {
+    markingAll.value = false;
+  }
+}
+
+function onDeleteAll() {
+  if (deletingAll.value || !messages.value.length) return;
+  deleteAllConfirmVisible.value = true;
+}
+
+async function confirmDeleteAll() {
+  deletingAll.value = true;
+  deleteAllConfirmVisible.value = false;
+  try {
+    await deleteAllMessages();
+    await refreshUnreadCount();
+  } finally {
+    deletingAll.value = false;
+  }
+}
+
+onMounted(refreshUnreadCount);
+onActivated(refreshUnreadCount);
+</script>
+
+<template>
+  <div class="desktop-hub-shell">
+    <!-- Sidebar: tabs -->
+    <aside class="hub-aside">
+      <nav class="hub-nav">
+        <div class="hub-nav-title">{{ t(hubTitleKey) }}</div>
+        <button
+          v-if="inboxEnabled"
+          type="button"
+          class="hub-tab hover-bg"
+          :class="{ active: activeTab === 'messages' }"
+          @click="switchTab('messages')"
+        >
+          <span class="dot" />
+          <span>{{ t('messages.tab_inbox') }}</span>
+          <span v-if="unreadInList > 0" class="badge">{{ unreadInList }}</span>
+        </button>
+        <button
+          type="button"
+          class="hub-tab hover-bg"
+          :class="{ active: activeTab === 'support' }"
+          @click="switchTab('support')"
+        >
+          <span class="dot" />
+          <span>{{ t('messages.tab_support') }}</span>
+        </button>
+      </nav>
+    </aside>
+
+    <!-- Main content -->
+    <main class="hub-main">
+      <div class="hub-header">
+        <h1 class="hub-title">
+          {{ activeTab === 'messages' ? t('messages.tab_inbox') : t('messages.tab_support') }}
+        </h1>
+        <div v-if="showMessageActions" class="hub-actions">
+          <button
+            v-if="unreadInList > 0"
+            type="button"
+            class="action-link"
+            :disabled="markingAll"
+            @click="onMarkAllRead"
+          >
+            {{ t('messages.mark_all_read') }}
+          </button>
+          <button
+            type="button"
+            class="action-link danger"
+            :disabled="deletingAll"
+            @click="onDeleteAll"
+          >
+            {{ t('messages.delete_all') }}
+          </button>
+        </div>
+      </div>
+
+      <MessageListPanel v-if="activeTab === 'messages' && inboxEnabled" class="hub-panel" @click-message="id => $router.push('/messages/' + id)" />
+      <CustomerServicePanel v-else class="hub-panel" />
+    </main>
+
+    <ConfirmDialog
+      v-if="deleteAllConfirmVisible"
+      :visible="deleteAllConfirmVisible"
+      :message="t('messages.delete_all_confirm')"
+      @confirm="confirmDeleteAll"
+      @cancel="deleteAllConfirmVisible = false"
+    />
+  </div>
+</template>
+
+<style scoped>
+.desktop-hub-shell {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+}
+
+.hub-aside {
+  width: 220px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--desktop-border);
+  background: var(--desktop-sidebar-bg);
+  padding: 10px;
+}
+
+.hub-nav-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 6px 14px 10px;
+}
+
+.hub-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border-radius: 4px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.hub-tab:hover { color: #fff; }
+
+.hub-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.hub-tab.active .dot { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #333;
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+
+.badge {
+  margin-left: auto;
+  background: rgba(255, 69, 58, 0.85);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}
+
+.hub-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.hub-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid var(--desktop-border);
+}
+
+.hub-title {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--primary-light);
+  margin: 0;
+  flex: 1;
+}
+
+.hub-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.action-link {
+  background: none;
+  border: none;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.2s;
+  padding: 0;
+}
+
+.action-link:hover:not(:disabled) { color: var(--primary-light); }
+.action-link.danger:hover:not(:disabled) { color: var(--danger); }
+.action-link:disabled { opacity: 0.4; cursor: default; }
+
+.hub-panel {
+  flex: 1;
+  overflow-y: auto;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopLoginView.vue b/apps/player/src/views/desktop/DesktopLoginView.vue
new file mode 100644
index 0000000..440440d
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopLoginView.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+/**
+ * Desktop Login View
+ * Reuses the existing LoginView form in a centered two-column auth layout.
+ */
+import LoginView from '../LoginView.vue';
+</script>
+
+<template>
+  <div class="desktop-auth-shell">
+    <div class="auth-brand">
+      <div class="brand-inner">
+        <img src="/logo.png" alt="TheBet365" class="brand-logo" />
+        <h1 class="brand-name">THEBET365</h1>
+        <p class="brand-tagline">专业体育赛事投注平台</p>
+        <div class="brand-features">
+          <div class="feature-item">
+            <span class="feature-icon">⚡</span>
+            <span>实时赔率更新</span>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">🔒</span>
+            <span>安全稳定平台</span>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">💰</span>
+            <span>快速充值提款</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="auth-card-wrap">
+      <div class="auth-card">
+        <LoginView />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-auth-shell {
+  display: flex;
+  min-height: 100vh;
+  background: var(--desktop-bg);
+}
+
+.auth-brand {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0d0d0d 100%);
+  border-right: 1px solid var(--desktop-border);
+  position: relative;
+  overflow: hidden;
+}
+
+.auth-brand::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212,175,55,0.06) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.brand-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  padding: 40px;
+}
+
+.brand-logo {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  filter: drop-shadow(0 4px 16px rgba(212,175,55,0.3));
+}
+
+.brand-name {
+  font-size: 28px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  color: var(--primary-light);
+  margin: 0;
+  text-shadow: 0 2px 12px rgba(212,175,55,0.25);
+}
+
+.brand-tagline {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin: 0;
+  font-weight: 600;
+}
+
+.brand-features {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.feature-icon {
+  font-size: 16px;
+}
+
+.auth-card-wrap {
+  width: 480px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  background: var(--desktop-bg);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 380px;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopMatchDetailView.vue b/apps/player/src/views/desktop/DesktopMatchDetailView.vue
new file mode 100644
index 0000000..c16cf77
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopMatchDetailView.vue
@@ -0,0 +1,771 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../../api';
+import { useBetSlipStore } from '../../stores/betSlip';
+import { useAuthStore } from '../../stores/auth';
+import TeamEmblem from '../../components/TeamEmblem.vue';
+import MatchBetGuide from '../../components/match-detail/MatchBetGuide.vue';
+import MarketSelectionsPanel from '../../components/match-detail/MarketSelectionsPanel.vue';
+import CorrectScorePanel from '../../components/match-detail/CorrectScorePanel.vue';
+import { isCorrectScoreMarket, parseScoreCode } from '../../utils/correctScoreLayout';
+import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import { matchPhaseLabel } from '../../utils/matchPhase';
+import { formatLocalMatchDateTime, defaultMarketName, DETAIL_MARKET_TYPES } from '@thebet365/shared';
+import { resolveSelectionLabel } from '../../utils/selectionLabel';
+import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';
+import { useDesktopBetLocate, scrollToBetSelection } from '../../composables/useDesktopBetLocate';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+const { openAt, visible: popoverVisible, pendingItem: popoverItem } = useDesktopBetPopover();
+const { pendingLocate, clearLocate } = useDesktopBetLocate();
+
+function goBack() {
+  if (window.history.state && window.history.state.back) {
+    router.back();
+  } else {
+    router.push('/bet');
+  }
+}
+
+interface Selection {
+  id: string;
+  selectionCode: string;
+  selectionName: string;
+  selectionDisplayName?: string;
+  odds: string;
+  oddsVersion: string;
+}
+
+interface Market {
+  id: string;
+  marketType: string;
+  marketDisplayName?: string;
+  lineValue?: string | number | null;
+  status: string;
+  allowSingle?: boolean;
+  allowParlay?: boolean;
+  promoLabel?: string | null;
+  selections: Selection[];
+}
+
+interface MatchDetail {
+  id: string;
+  leagueName?: string;
+  leagueLogoUrl?: string | null;
+  homeTeamName: string;
+  awayTeamName: string;
+  homeTeamCode?: string;
+  awayTeamCode?: string;
+  homeTeamLogoUrl?: string | null;
+  awayTeamLogoUrl?: string | null;
+  startTime: string;
+  status?: string;
+  bettingOpen?: boolean;
+  matchPhase?: string;
+  score?: {
+    htHome: number | null;
+    htAway: number | null;
+    ftHome: number | null;
+    ftAway: number | null;
+    homeCorners?: number | null;
+    awayCorners?: number | null;
+    homeYellowCards?: number | null;
+    awayYellowCards?: number | null;
+    homeRedCards?: number | null;
+    awayRedCards?: number | null;
+  } | null;
+  markets: Market[];
+}
+
+const match = ref<MatchDetail | null>(null);
+const loading = ref(true);
+const selectedMarketTypes = ref<Set<string>>(new Set());
+
+async function loadMatch() {
+  loading.value = true;
+  try {
+    const { data } = await api.get(`/player/matches/${route.params.id}`);
+    match.value = data.data;
+    selectedMarketTypes.value = new Set();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  void loadMatch();
+});
+
+useOnLocaleChange(loadMatch);
+
+const kickoff = computed(() => {
+  if (!match.value) return '';
+  return formatLocalMatchDateTime(match.value.startTime, locale.value, { variant: 'full' });
+});
+
+const bettingOpen = computed(() => match.value?.bettingOpen !== false);
+const matchPhase = computed<import('../../utils/matchPhase').MatchPhase | null>(() => (match.value?.matchPhase ?? (bettingOpen.value ? 'open' : 'closed_pending')) as import('../../utils/matchPhase').MatchPhase);
+const phaseLabel = computed(() => matchPhaseLabel(t, matchPhase.value));
+
+const liveScoreText = computed(() => {
+  const s = match.value?.score;
+  if (!s || s.ftHome == null || s.ftAway == null) return '';
+  return `${s.ftHome} - ${s.ftAway}`;
+});
+
+const resultStats = computed(() => {
+  const s = match.value?.score;
+  if (!s || matchPhase.value !== 'settled') return [];
+  
+  const statVal = (val: number | null | undefined) => val == null ? '-' : String(val);
+  const pair = (h: number | null | undefined, a: number | null | undefined) => `${statVal(h)} - ${statVal(a)}`;
+
+  return [
+    { key: 'ht', label: t('bet.result_ht'), value: pair(s.htHome, s.htAway) },
+    { key: 'ft', label: t('bet.result_ft'), value: pair(s.ftHome, s.ftAway) },
+    { key: 'corners', label: t('bet.result_corners'), value: pair(s.homeCorners, s.awayCorners) },
+    { key: 'yellow', label: t('bet.result_yellow_cards'), value: pair(s.homeYellowCards, s.awayYellowCards) },
+    { key: 'red', label: t('bet.result_red_cards'), value: pair(s.homeRedCards, s.awayRedCards) },
+  ];
+});
+
+const showResultStats = computed(() => resultStats.value.length > 0);
+
+const allMarkets = computed(() => match.value?.markets ?? []);
+
+const compactMarkets = computed(() =>
+  allMarkets.value.filter((m) => !isCorrectScoreMarket(m.marketType)),
+);
+
+const scoreMarkets = computed(() =>
+  allMarkets.value.filter((m) => isCorrectScoreMarket(m.marketType)),
+);
+
+const marketFilterOptions = computed(() => {
+  const labels = new Map<string, string>();
+  for (const market of allMarkets.value) {
+    if (labels.has(market.marketType)) continue;
+    labels.set(
+      market.marketType,
+      market.marketDisplayName?.trim() || defaultMarketName(market.marketType, locale.value),
+    );
+  }
+  return Array.from(labels.entries())
+    .map(([type, label]) => ({ type, label }))
+    .sort((a, b) => marketTypeSortIndex(a.type) - marketTypeSortIndex(b.type));
+});
+
+const hasMarketFilter = computed(() => selectedMarketTypes.value.size > 0);
+
+const filteredCompactMarkets = computed(() =>
+  compactMarkets.value.filter((market) => matchesMarketFilter(market.marketType)),
+);
+
+const filteredScoreMarkets = computed(() =>
+  scoreMarkets.value.filter((market) => matchesMarketFilter(market.marketType)),
+);
+
+function marketTypeSortIndex(marketType: string) {
+  const idx = (DETAIL_MARKET_TYPES as readonly string[]).indexOf(marketType);
+  return idx >= 0 ? idx : 999;
+}
+
+function matchesMarketFilter(marketType: string) {
+  if (!hasMarketFilter.value) return true;
+  return selectedMarketTypes.value.has(marketType);
+}
+
+function isMarketFilterActive(marketType: string) {
+  return selectedMarketTypes.value.has(marketType);
+}
+
+function isAllMarketFilterActive() {
+  return !hasMarketFilter.value;
+}
+
+function selectAllMarketFilters() {
+  selectedMarketTypes.value = new Set();
+}
+
+function toggleMarketFilter(marketType: string) {
+  const next = new Set(selectedMarketTypes.value);
+  if (next.has(marketType)) next.delete(marketType);
+  else next.add(marketType);
+  selectedMarketTypes.value = next;
+}
+
+function ensureMarketVisibleForLocate(target: { marketId?: string; selectionId: string }) {
+  const market =
+    allMarkets.value.find((m) => m.id === target.marketId) ??
+    allMarkets.value.find((m) => m.selections.some((s) => s.id === target.selectionId));
+  if (!market) return;
+  if (hasMarketFilter.value && !matchesMarketFilter(market.marketType)) {
+    selectedMarketTypes.value = new Set();
+  }
+}
+
+watch(
+  [pendingLocate, () => match.value?.id, loading],
+  async ([target, matchId, isLoading]) => {
+    if (!target || isLoading || !matchId) return;
+    if (String(matchId) !== String(target.matchId)) return;
+    ensureMarketVisibleForLocate(target);
+    await nextTick();
+    const found = await scrollToBetSelection(target.selectionId);
+    if (found) clearLocate();
+  },
+  { flush: 'post' },
+);
+
+watch(
+  () => route.params.id,
+  () => {
+    selectedMarketTypes.value = new Set();
+  },
+);
+
+function marketLabel(market: Market) {
+  return market.marketDisplayName?.trim() || market.marketType || '';
+}
+
+function normalizeMarketStatus(status?: string) {
+  return (status ?? 'OPEN').toUpperCase();
+}
+
+function isMarketOpen(market: Market) {
+  return normalizeMarketStatus(market.status) === 'OPEN';
+}
+
+function marketStatusLabel(status?: string) {
+  const normalized = normalizeMarketStatus(status);
+  if (normalized === 'SUSPENDED') return t('bet.market_status_suspended');
+  if (normalized === 'CLOSED') return t('bet.market_status_closed');
+  return '';
+}
+
+function isMarketLocked(market: Market) {
+  if (!bettingOpen.value || !isMarketOpen(market)) return true;
+  return market.allowSingle !== true && market.allowParlay !== true;
+}
+
+function selectionLabel(sel: Selection, market: Market) {
+  const parsedScore = parseScoreCode(sel.selectionCode, t);
+  if (parsedScore) return parsedScore.display;
+  return resolveSelectionLabel(t, sel.selectionCode, sel.selectionName, {
+    lineValue: market.lineValue,
+  });
+}
+
+function isSelected(id: string) {
+  if (slip.isInSlip(id)) return true;
+  return popoverVisible.value && popoverItem.value?.selectionId === id;
+}
+
+function buildSlipItem(sel: Selection, market: Market) {
+  if (!match.value) return null;
+  return {
+    selectionId: sel.id,
+    oddsVersion: String(sel.oddsVersion),
+    matchId: match.value.id,
+    matchName: `${match.value.homeTeamName} vs ${match.value.awayTeamName}`,
+    marketId: market.id,
+    marketName: marketLabel(market),
+    selectionName: selectionLabel(sel, market),
+    odds: parseFloat(sel.odds),
+    marketType: market.marketType,
+    lineValue:
+      market.lineValue != null && market.lineValue !== ''
+        ? parseFloat(String(market.lineValue))
+        : null,
+    allowSingle: market.allowSingle,
+    allowParlay: market.allowParlay,
+  };
+}
+
+function toggleSelection(sel: Selection, market: Market, event?: MouseEvent) {
+  if (!match.value || isMarketLocked(market)) return;
+  if (!auth.token) {
+    auth.showLoginPrompt(route.fullPath);
+    return;
+  }
+  const item = buildSlipItem(sel, market);
+  if (!item || !event) return;
+  openAt(event, item);
+}
+</script>
+
+<template>
+  <div class="desktop-match-detail">
+    <!-- Fixed Header Breadcrumb -->
+    <div class="detail-breadcrumbs">
+      <button type="button" class="back-btn" @click="goBack">← {{ t('bet.back') || '返回' }}</button>
+      <span class="sep">/</span>
+      <span class="curr">{{ match?.leagueName }}</span>
+    </div>
+
+    <div class="detail-main">
+    <!-- Loading -->
+    <div v-if="loading" class="loading-state">
+      <GoldSpinner :active="true" />
+    </div>
+
+    <template v-else-if="match">
+      <!-- High Density Score Band -->
+      <div class="match-score-band" :class="{ 'phase-settled': matchPhase === 'settled' }">
+        <div class="team-side home">
+          <TeamEmblem size="xl" :team-code="match.homeTeamCode" :team-name="match.homeTeamName" :logo-url="match.homeTeamLogoUrl" />
+          <span class="name">{{ match.homeTeamName }}</span>
+        </div>
+
+        <div class="score-arena">
+          <div class="versus-row" v-if="liveScoreText">
+            <span class="score">{{ match.score?.ftHome }}</span>
+            <span class="divider">-</span>
+            <span class="score">{{ match.score?.ftAway }}</span>
+          </div>
+          <div class="versus-row vs" v-else>VS</div>
+          <span class="kickoff-time">{{ kickoff }}</span>
+        </div>
+
+        <div class="team-side away">
+          <TeamEmblem size="xl" :team-code="match.awayTeamCode" :team-name="match.awayTeamName" :logo-url="match.awayTeamLogoUrl" />
+          <span class="name">{{ match.awayTeamName }}</span>
+        </div>
+      </div>
+
+      <!-- Result Stats -->
+      <div v-if="showResultStats" class="result-stats-card">
+        <h4>{{ t('bet.result_stats_title') || '赛果数据' }}</h4>
+        <div class="stats-row">
+          <div v-for="item in resultStats" :key="item.key" class="stat-pill">
+            <span class="lbl">{{ item.label }}</span>
+            <span class="val">{{ item.value }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="marketFilterOptions.length" class="market-filter-bar">
+        <span class="market-filter-label">{{ t('bet.filter_market') }}</span>
+        <div class="market-filter-chips">
+          <button
+            type="button"
+            class="market-filter-chip"
+            :class="{ active: isAllMarketFilterActive() }"
+            @click="selectAllMarketFilters"
+          >
+            {{ t('bet.time_all') }}
+          </button>
+          <button
+            v-for="option in marketFilterOptions"
+            :key="option.type"
+            type="button"
+            class="market-filter-chip"
+            :class="{ active: isMarketFilterActive(option.type) }"
+            @click="toggleMarketFilter(option.type)"
+          >
+            {{ option.label }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Standard markets: 2-col card grid -->
+      <div v-if="filteredCompactMarkets.length" class="markets-compact-grid">
+        <div
+          v-for="market in filteredCompactMarkets"
+          :key="market.id"
+          class="market-card"
+          :class="{ locked: isMarketLocked(market) }"
+        >
+          <div class="market-hdr">
+            <span class="market-title">{{ marketLabel(market) }}</span>
+            <span v-if="isMarketLocked(market)" class="locked-lbl">{{ t('bet.market_status_closed') }}</span>
+          </div>
+          <div class="market-body">
+            <MarketSelectionsPanel
+              desktop-card
+              compact
+              :locked="isMarketLocked(market)"
+              :line-value="market.lineValue"
+              :selections="market.selections"
+              :is-selected="isSelected"
+              @pick="(id, ev) => toggleSelection(market.selections.find(s => s.id === id)!, market, ev)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Correct score -->
+      <div v-if="filteredScoreMarkets.length" class="markets-score-section">
+        <h4 class="score-section-title">{{ t('bet.correct_score') }}</h4>
+        <div class="markets-score-grid">
+          <div
+            v-for="market in filteredScoreMarkets"
+            :key="market.id"
+            class="score-block"
+            :class="{ locked: isMarketLocked(market) }"
+          >
+            <div class="score-block-hdr">
+              <span>{{ marketLabel(market) }}</span>
+              <span v-if="isMarketLocked(market)" class="locked-lbl">{{ t('bet.market_status_closed') }}</span>
+            </div>
+            <CorrectScorePanel
+              dense
+              :market-type="market.marketType"
+              :selections="market.selections"
+              :locked="isMarketLocked(market)"
+              :is-selected="isSelected"
+              @pick="(id, ev) => toggleSelection(market.selections.find(s => s.id === id)!, market, ev)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="!filteredCompactMarkets.length && !filteredScoreMarkets.length"
+        class="markets-empty"
+      >
+        <p>{{ hasMarketFilter ? t('bet.no_markets_filtered') : (t('bet.no_markets') || '暂无可用盘口') }}</p>
+      </div>
+    </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-match-detail {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  min-height: 100%;
+}
+
+.detail-breadcrumbs {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  font-size: 12px;
+  color: var(--text-muted);
+  background: #0c0c0c;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.detail-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px 16px 14px;
+}
+
+.detail-breadcrumbs .sep {
+  flex-shrink: 0;
+}
+
+.detail-breadcrumbs .curr {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+  font-weight: 700;
+}
+
+.back-btn {
+  flex-shrink: 0;
+  background: transparent;
+  color: var(--primary-light);
+  font-weight: 700;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.back-btn:hover {
+  text-decoration: underline;
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+.match-score-band {
+  background: linear-gradient(180deg, #181818 0%, #111 100%);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.team-side {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.team-side.away {
+  flex-direction: row-reverse;
+}
+
+.team-side .name {
+  font-size: 13px;
+  font-weight: 800;
+  color: #fff;
+}
+
+.score-arena {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 240px;
+}
+
+.versus-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.versus-row .score {
+  font-size: 32px;
+  font-weight: 900;
+  color: var(--primary-light);
+  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
+}
+
+.versus-row .divider {
+  font-size: 24px;
+  color: var(--text-muted);
+}
+
+.versus-row.vs {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--text-muted);
+}
+
+.kickoff-time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.result-stats-card {
+  background: rgba(20, 20, 20, 0.8);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 16px;
+}
+
+.result-stats-card h4 {
+  margin: 0 0 12px;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+  text-transform: uppercase;
+}
+
+.stats-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.stat-pill {
+  background: #141414;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px 12px;
+  display: flex;
+  gap: 10px;
+  font-size: 11px;
+}
+
+.stat-pill .lbl { color: var(--text-muted); }
+.stat-pill .val { color: #fff; font-weight: 700; }
+
+.market-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: rgba(18, 18, 18, 0.85);
+  min-width: 0;
+}
+
+.market-filter-label {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--primary-light);
+  white-space: nowrap;
+}
+
+.market-filter-chips {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.market-filter-chips::-webkit-scrollbar {
+  display: none;
+}
+
+.market-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 3px 7px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  transition: background 0.18s, border-color 0.18s, color 0.18s;
+}
+
+.market-filter-chip:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.market-filter-chip.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.08);
+}
+
+.markets-score-section {
+  margin-top: 4px;
+}
+
+.score-section-title {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.markets-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 120px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.markets-compact-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  align-items: start;
+}
+
+@media (min-width: 1360px) {
+  .markets-compact-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.market-card {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+  background: rgba(18, 18, 18, 0.98);
+  align-self: start;
+}
+
+.market-card.locked {
+  opacity: 0.55;
+}
+
+.market-hdr {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 10px;
+  background: #141414;
+  border-bottom: 1px solid var(--border);
+}
+
+.market-title {
+  font-size: 11px;
+  font-weight: 800;
+  color: #eee;
+  line-height: 1.25;
+}
+
+.market-body {
+  padding: 6px;
+}
+
+.markets-score-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 8px;
+  align-items: start;
+  margin-top: 4px;
+}
+
+.score-block {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+  background: rgba(18, 18, 18, 0.98);
+  align-self: start;
+}
+
+.score-block.locked {
+  opacity: 0.55;
+}
+
+.score-block-hdr {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 10px;
+  background: #141414;
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  font-weight: 800;
+  color: #eee;
+}
+
+.locked-lbl {
+  font-size: 10px;
+  color: var(--danger);
+  font-weight: 700;
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopMessagesHubShell.vue b/apps/player/src/views/desktop/DesktopMessagesHubShell.vue
new file mode 100644
index 0000000..2b8f2d4
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopMessagesHubShell.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computed, onActivated, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import MessageListPanel from '../../components/MessageListPanel.vue';
+import CustomerServicePanel from '../../components/CustomerServicePanel.vue';
+import { usePlayerMessages } from '../../composables/usePlayerMessages';
+import { useInboxFeature } from '../../composables/useInboxFeature';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { inboxEnabled, hubTitleKey } = useInboxFeature();
+const { messages, refreshUnreadCount } = usePlayerMessages();
+
+type HubTab = 'messages' | 'support';
+
+const activeTab = computed<HubTab>(() => {
+  if (!inboxEnabled.value) return 'support';
+  return route.query.tab === 'support' ? 'support' : 'messages';
+});
+
+const unreadInList = computed(() => messages.value.filter((item) => !item.isRead).length);
+const isDetailRoute = computed(() => route.path.startsWith('/messages/') && route.params.id);
+const showPlaceholder = computed(
+  () => !isDetailRoute.value && activeTab.value === 'messages' && inboxEnabled.value,
+);
+const showSupportPanel = computed(() => !isDetailRoute.value && activeTab.value === 'support');
+
+function switchTab(tab: HubTab) {
+  if (!inboxEnabled.value || tab === activeTab.value) return;
+  router.replace({ path: '/messages', query: tab === 'support' ? { tab: 'support' } : {} });
+}
+
+onMounted(refreshUnreadCount);
+onActivated(refreshUnreadCount);
+</script>
+
+<template>
+  <div class="desktop-layout-hub desktop-hub-page">
+    <aside class="desktop-hub-left hub-aside">
+      <nav class="hub-nav">
+        <div class="hub-nav-title">{{ t(hubTitleKey) }}</div>
+        <button
+          v-if="inboxEnabled"
+          type="button"
+          class="hub-tab hover-bg"
+          :class="{ active: activeTab === 'messages' }"
+          @click="switchTab('messages')"
+        >
+          <span class="dot" />
+          <span>{{ t('messages.tab_inbox') }}</span>
+          <span v-if="unreadInList > 0" class="badge">{{ unreadInList }}</span>
+        </button>
+        <button
+          type="button"
+          class="hub-tab hover-bg"
+          :class="{ active: activeTab === 'support' }"
+          @click="switchTab('support')"
+        >
+          <span class="dot" />
+          <span>{{ t('messages.tab_support') }}
+          </span>
+        </button>
+      </nav>
+      <MessageListPanel v-if="activeTab === 'messages' && inboxEnabled" class="hub-list" @click-message="id => $router.push('/messages/' + id)" />
+    </aside>
+
+    <main class="desktop-hub-right">
+      <slot v-if="isDetailRoute" />
+      <CustomerServicePanel v-else-if="showSupportPanel" class="hub-support" />
+      <div v-else-if="showPlaceholder" class="hub-placeholder">
+        {{ t('messages.select_hint') }}
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.desktop-hub-page {
+  flex: 1;
+  min-height: 0;
+}
+
+.hub-aside {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  height: 100%;
+}
+
+.hub-nav {
+  flex-shrink: 0;
+  padding: 10px;
+  border-bottom: 1px solid var(--desktop-border);
+}
+
+.hub-nav-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 6px 14px 10px;
+}
+
+.hub-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border-radius: 4px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  text-align: left;
+  transition: color 0.2s, background 0.2s;
+}
+
+.hub-tab:hover {
+  color: #fff;
+}
+
+.hub-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.hub-tab.active .dot {
+  background: var(--primary);
+  box-shadow: 0 0 8px var(--primary);
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #333;
+  flex-shrink: 0;
+}
+
+.badge {
+  margin-left: auto;
+  background: rgba(255, 69, 58, 0.85);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}
+
+.hub-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.hub-support {
+  flex: 1;
+  min-height: 0;
+}
+
+.hub-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopMyBetsView.vue b/apps/player/src/views/desktop/DesktopMyBetsView.vue
new file mode 100644
index 0000000..6e41db8
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopMyBetsView.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { ref, onMounted, onActivated } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { RouterLink } from 'vue-router';
+import api from '../../api';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import Pagination from '../../components/desktop/Pagination.vue';
+import { type BetHistoryItem } from '../../components/BetHistoryCard.vue';
+import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
+
+const COL_COUNT = 8;
+
+const { t } = useI18n();
+
+const items = ref<BetHistoryItem[]>([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(20);
+const loading = ref(false);
+const initialLoading = ref(true);
+const statusFilter = ref('');
+
+const STATUS_FILTERS = [
+  { key: '', label: 'history.filter_all' },
+  { key: 'WON', label: 'history.filter_won' },
+  { key: 'LOST', label: 'history.filter_lost' },
+  { key: 'PENDING', label: 'history.filter_pending' },
+] as const;
+
+const PUSH_FILTER = { key: 'PUSH', label: 'history.filter_push' } as const;
+
+async function loadPage(p: number) {
+  if (loading.value) return;
+  loading.value = true;
+  try {
+    const params: Record<string, unknown> = { page: p, pageSize: pageSize.value };
+    if (statusFilter.value) params.status = statusFilter.value;
+    const { data } = await api.get('/player/bets', { params });
+    const result = data.data ?? { items: [], total: 0, pageSize: pageSize.value };
+    total.value = result.total ?? 0;
+    items.value = result.items ?? [];
+    page.value = p;
+  } finally {
+    loading.value = false;
+    initialLoading.value = false;
+  }
+}
+
+function changeFilter(key: string) {
+  if (statusFilter.value === key) return;
+  statusFilter.value = key;
+  page.value = 1;
+  initialLoading.value = true;
+  void loadPage(1);
+}
+
+useOnLocaleChange(() => {
+  page.value = 1;
+  initialLoading.value = true;
+  void loadPage(1);
+});
+
+onActivated(() => { void loadPage(page.value); });
+onMounted(() => { void loadPage(1); });
+
+function statusClass(status: string) {
+  const map: Record<string, string> = {
+    WON: 'status-won',
+    LOST: 'status-lost',
+    PENDING: 'status-pending',
+    PUSH: 'status-push',
+    CANCELLED: 'status-cancelled',
+  };
+  return map[status?.toUpperCase()] ?? 'status-default';
+}
+
+function statusLabel(status: string) {
+  const map: Record<string, string> = {
+    WON: t('history.filter_won'),
+    LOST: t('history.filter_lost'),
+    PENDING: t('history.filter_pending'),
+    PUSH: t('history.filter_push'),
+    CANCELLED: t('common.cancelled'),
+  };
+  return map[status?.toUpperCase()] ?? status;
+}
+</script>
+
+<template>
+  <div class="desktop-records-page">
+    <header class="desktop-records-header">
+      <div class="desktop-records-header-main">
+        <div class="desktop-records-filter-groups">
+          <div class="desktop-records-filter-group">
+            <span class="desktop-records-filter-group-label">{{ t('history.filter_status_group') }}</span>
+            <div class="desktop-records-filter-bar">
+              <button
+                v-for="f in STATUS_FILTERS"
+                :key="f.key"
+                type="button"
+                class="desktop-records-filter-chip"
+                :class="{ active: statusFilter === f.key }"
+                @click="changeFilter(f.key)"
+              >
+                {{ t(f.label) }}
+              </button>
+            </div>
+          </div>
+          <span class="desktop-records-filter-divider" aria-hidden="true" />
+          <div class="desktop-records-filter-group">
+            <span class="desktop-records-filter-group-label">{{ t('history.filter_push_group') }}</span>
+            <div class="desktop-records-filter-bar">
+              <button
+                type="button"
+                class="desktop-records-filter-chip"
+                :class="{ active: statusFilter === PUSH_FILTER.key }"
+                :title="t('history.filter_push_hint')"
+                @click="changeFilter(PUSH_FILTER.key)"
+              >
+                {{ t(PUSH_FILTER.label) }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <section class="desktop-records-panel">
+      <div class="desktop-records-table-wrap">
+        <table class="desktop-records-table">
+          <thead>
+            <tr>
+              <th>{{ t('bet.bet_no') }}</th>
+              <th>{{ t('bet.match') }}</th>
+              <th>{{ t('bet.selection') }}</th>
+              <th class="num-th">{{ t('bet.odds') }}</th>
+              <th class="num-th">{{ t('bet.stake') }}</th>
+              <th class="num-th">{{ t('bet.potential_payout') }}</th>
+              <th>{{ t('common.status') }}</th>
+              <th>{{ t('bet.placed_at') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="initialLoading || loading" class="state-row">
+              <td :colspan="COL_COUNT">
+                <div class="desktop-records-loading-cell">
+                  <GoldSpinner :size="36" />
+                </div>
+              </td>
+            </tr>
+            <template v-else-if="items.length">
+              <tr v-for="bet in items" :key="bet.betNo" class="hover-row">
+                <td>
+                  <RouterLink :to="`/bets/${bet.betNo}`" class="link-cell">{{ bet.betNo }}</RouterLink>
+                </td>
+                <td>{{ bet.matchTitle || '-' }}</td>
+                <td class="muted-cell">{{ bet.pickLabel || '-' }}</td>
+                <td class="num-cell">{{ bet.totalOdds ?? '-' }}</td>
+                <td class="num-cell">{{ bet.stake }}</td>
+                <td class="num-cell">{{ bet.potentialReturn ?? '-' }}</td>
+                <td>
+                  <span class="desktop-records-status" :class="statusClass(bet.status)">
+                    {{ statusLabel(bet.status) }}
+                  </span>
+                </td>
+                <td class="date-cell">{{ bet.placedAt ? new Date(bet.placedAt).toLocaleString() : '-' }}</td>
+              </tr>
+            </template>
+            <tr v-else class="state-row">
+              <td :colspan="COL_COUNT" class="desktop-records-table-empty">
+                {{ t('history.empty') }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-if="!initialLoading && !loading && total > 0" class="desktop-records-pagination">
+        <Pagination
+          v-model="page"
+          v-model:pageSize="pageSize"
+          :total="total"
+          @change="loadPage"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.muted-cell {
+  color: var(--text-muted);
+  max-width: 280px;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopOutrightDetailView.vue b/apps/player/src/views/desktop/DesktopOutrightDetailView.vue
new file mode 100644
index 0000000..4122aa0
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopOutrightDetailView.vue
@@ -0,0 +1,334 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useOutrightEvents } from '../../composables/useOutrightEvents';
+import type { OutrightEvent, OutrightSelection } from '../../components/outright/OutrightEventSection.vue';
+import OutrightOptionCard from '../../components/outright/OutrightOptionCard.vue';
+import OutrightBetModal, { type OutrightPick } from '../../components/outright/OutrightBetModal.vue';
+import { useAuthStore } from '../../stores/auth';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import saishiImg from '../../assets/images/saishi.webp';
+import cardBg from '../../assets/images/card-bg.webp';
+import { useDesktopBetLocate, scrollToBetSelection } from '../../composables/useDesktopBetLocate';
+
+const matchCardBg = `url(${cardBg})`;
+const ODDS_POLL_MS = 15000;
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const auth = useAuthStore();
+const { loading, loadError, events, load } = useOutrightEvents();
+const { pendingLocate, clearLocate } = useDesktopBetLocate();
+
+const modalOpen = ref(false);
+const activePick = ref<OutrightPick | null>(null);
+let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+const event = computed<OutrightEvent | null>(() =>
+  events.value.find((e) => e.id === String(route.params.id)) ?? null,
+);
+
+const headTitle = computed(() => {
+  if (!event.value) return '';
+  const raw = event.value.title.replace(/^\*+/, '').trim();
+  return raw || event.value.leagueName || t('bet.tab_outright');
+});
+
+const teamCount = computed(() =>
+  event.value ? (event.value.selectionCount ?? event.value.selections.length) : 0,
+);
+
+const isSettled = computed(
+  () => event.value?.bettingOpen === false || event.value?.status === 'SETTLED',
+);
+
+function goBack() {
+  router.push({ path: '/bet', query: { tab: 'outright' } });
+}
+
+function openBet(sel: OutrightSelection) {
+  if (!event.value || isSettled.value) return;
+  if (!auth.token) {
+    auth.showLoginPrompt(route.fullPath);
+    return;
+  }
+  activePick.value = {
+    selectionId: sel.id,
+    oddsVersion: sel.oddsVersion,
+    teamCode: sel.teamCode,
+    teamName: sel.teamName,
+    odds: sel.odds,
+    eventTitle: event.value.title,
+  };
+  modalOpen.value = true;
+}
+
+function closeModal() {
+  modalOpen.value = false;
+  activePick.value = null;
+}
+
+function startPolling() {
+  stopPolling();
+  pollTimer = setInterval(() => {
+    void load({ silent: true });
+  }, ODDS_POLL_MS);
+}
+
+function stopPolling() {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+    pollTimer = null;
+  }
+}
+
+watch(
+  () => event.value?.id,
+  (id) => {
+    if (id) startPolling();
+    else stopPolling();
+  },
+);
+
+watch(
+  [pendingLocate, () => event.value?.id, loading],
+  async ([target, eventId, isLoading]) => {
+    if (!target || isLoading || !eventId) return;
+    if (String(eventId) !== String(target.matchId)) return;
+    const found = await scrollToBetSelection(target.selectionId);
+    if (found) clearLocate();
+  },
+  { flush: 'post' },
+);
+
+onMounted(() => {
+  if (event.value) startPolling();
+});
+
+onUnmounted(stopPolling);
+</script>
+
+<template>
+  <div class="desktop-outright-detail">
+    <div class="detail-breadcrumbs">
+      <button type="button" class="back-btn" @click="goBack">← {{ t('bet.back') }}</button>
+      <span class="sep">/</span>
+      <span class="curr">{{ t('bet.tab_outright') }}</span>
+    </div>
+
+    <div class="detail-main">
+    <div v-if="loading && !event" class="loading-state">
+      <GoldSpinner :active="true" />
+    </div>
+
+    <template v-else-if="event">
+      <header class="event-hero" :class="{ settled: isSettled }">
+        <div class="hero-text">
+          <div class="title-row">
+            <h1 class="hero-title">{{ headTitle }}</h1>
+            <span v-if="isSettled" class="settled-tag">{{ t('bet.outright_settled') }}</span>
+          </div>
+          <p v-if="event.leagueName && event.leagueName !== headTitle" class="hero-league">
+            {{ event.leagueName }}
+          </p>
+          <p class="hero-meta">{{ t('bet.outright_teams_count', { n: teamCount }) }}</p>
+          <p v-if="isSettled" class="hero-hint">{{ t('bet.outright_settled_hint') }}</p>
+        </div>
+        <img :src="saishiImg" alt="" class="hero-icon" />
+      </header>
+
+      <div class="teams-grid">
+        <OutrightOptionCard
+          v-for="sel in event.selections"
+          :key="sel.id"
+          :team-code="sel.teamCode"
+          :team-name="sel.teamName"
+          :logo-url="sel.logoUrl"
+          :odds="sel.odds"
+          :selection-id="sel.id"
+          :disabled="isSettled"
+          :is-winner="Boolean(sel.isWinner)"
+          @pick="openBet(sel)"
+        />
+      </div>
+    </template>
+
+    <div v-else class="empty-state">
+      <p>{{ loadError || t('bet.no_outright') }}</p>
+      <button type="button" class="back-link" @click="goBack">{{ t('bet.back') }}</button>
+    </div>
+    </div>
+
+    <OutrightBetModal :open="modalOpen" :pick="activePick" @close="closeModal" />
+  </div>
+</template>
+
+<style scoped>
+.desktop-outright-detail {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.detail-breadcrumbs {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  font-size: 12px;
+  color: var(--text-muted);
+  background: #0c0c0c;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.detail-main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 16px 14px;
+}
+
+.detail-breadcrumbs .sep {
+  flex-shrink: 0;
+}
+
+.detail-breadcrumbs .curr {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+  font-weight: 700;
+}
+
+.back-btn {
+  flex-shrink: 0;
+  background: transparent;
+  color: var(--primary-light);
+  font-weight: 700;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.back-btn:hover {
+  text-decoration: underline;
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 240px;
+}
+
+.event-hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: rgba(18, 18, 18, 0.98);
+  overflow: hidden;
+}
+
+.event-hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: v-bind(matchCardBg) center / 100% 100% no-repeat;
+  opacity: 0.22;
+  pointer-events: none;
+}
+
+.hero-text {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+}
+
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.hero-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.35;
+}
+
+.settled-tag {
+  font-size: 10px;
+  font-weight: 800;
+  color: #c9a227;
+  border: 1px solid rgba(201, 162, 39, 0.45);
+  border-radius: 999px;
+  padding: 1px 7px;
+}
+
+.hero-league {
+  margin: 4px 0 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.hero-meta {
+  margin: 4px 0 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: #666;
+}
+
+.hero-hint {
+  margin: 8px 0 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: #c9a227;
+  line-height: 1.45;
+}
+
+.hero-icon {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  height: 48px;
+  width: auto;
+  max-width: 44px;
+  object-fit: contain;
+}
+
+.teams-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 10px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 48px 16px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.back-link {
+  margin-top: 12px;
+  background: transparent;
+  color: var(--primary-light);
+  font-weight: 700;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopProfileEditView.vue b/apps/player/src/views/desktop/DesktopProfileEditView.vue
new file mode 100644
index 0000000..6694077
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopProfileEditView.vue
@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
+import api from '../../api';
+import PlayerAvatarModal from '../../components/PlayerAvatarModal.vue';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import { usePlayerProfile } from '../../composables/usePlayerProfile';
+import { useAuthStore } from '../../stores/auth';
+
+const { t } = useI18n();
+const router = useRouter();
+const auth = useAuthStore();
+const { loadProfile, setAvatarKey, profileRaw, avatarUrl } = usePlayerProfile();
+
+const username = ref('');
+const viewablePassword = ref('');
+const passwordVisible = ref(false);
+const phone = ref('');
+const email = ref('');
+const avatarModalOpen = ref(false);
+const passwordChangeOpen = ref(false);
+const oldPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const message = ref('');
+const error = ref('');
+const saving = ref(false);
+
+const allowPasswordChange = computed(
+  () => profileRaw.value?.preferences?.allowPasswordChange ?? true,
+);
+const allowUsernameChange = computed(
+  () => profileRaw.value?.preferences?.allowUsernameChange ?? false,
+);
+
+const canTogglePassword = computed(() => !!viewablePassword.value);
+const passwordInputType = computed(() =>
+  passwordVisible.value && canTogglePassword.value ? 'text' : 'password',
+);
+
+const displayAvatarUrl = computed(() => {
+  if (avatarUrl.value) return avatarUrl.value;
+  const seed = profileRaw.value?.username ?? auth.user?.username;
+  return seed ? playerAvatarUrl(randomAvatarKey(seed)) : null;
+});
+
+function syncFromProfile() {
+  const user = profileRaw.value;
+  username.value = user?.username ?? auth.user?.username ?? '';
+  viewablePassword.value = user?.preferences?.viewablePassword ?? '';
+  phone.value = user?.preferences?.phone ?? '';
+  email.value = user?.preferences?.email ?? '';
+}
+
+async function loadEditData() {
+  await loadProfile(true);
+  syncFromProfile();
+}
+
+onMounted(loadEditData);
+
+async function saveProfile() {
+  saving.value = true;
+  error.value = '';
+  message.value = '';
+  try {
+    await api.patch('/player/profile', { username: username.value, phone: phone.value, email: email.value });
+    message.value = t('profile.save_success') || '保存成功';
+    await loadProfile(true);
+    syncFromProfile();
+  } catch (e: any) {
+    error.value = e?.response?.data?.message ?? t('common.error');
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function savePassword() {
+  if (newPassword.value !== confirmPassword.value) {
+    error.value = t('profile.password_mismatch') || '两次密码不一致';
+    return;
+  }
+  saving.value = true;
+  error.value = '';
+  message.value = '';
+  try {
+    await api.post('/player/profile/change-password', { oldPassword: oldPassword.value, newPassword: newPassword.value });
+    message.value = t('profile.password_changed') || '密码修改成功';
+    passwordChangeOpen.value = false;
+    oldPassword.value = '';
+    newPassword.value = '';
+    confirmPassword.value = '';
+  } catch (e: any) {
+    error.value = e?.response?.data?.message ?? t('common.error');
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function onAvatarSelect(key: string | null) {
+  avatarModalOpen.value = false;
+  await setAvatarKey(key);
+}
+</script>
+
+<template>
+  <div class="desktop-account-page">
+    <main class="account-main">
+      <div class="edit-layout">
+        <div class="page-header">
+          <h1 class="page-title">{{ t('profile.edit_title') }}</h1>
+        </div>
+
+        <!-- Avatar section -->
+        <div class="edit-card">
+          <div class="card-title">{{ t('profile.avatar') || '头像' }}</div>
+          <div class="avatar-row">
+            <img
+              v-if="displayAvatarUrl"
+              :src="displayAvatarUrl"
+              alt="avatar"
+              class="avatar-img"
+            />
+            <div v-else class="avatar-placeholder">
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
+            </div>
+            <button type="button" class="change-avatar-btn" @click="avatarModalOpen = true">
+              {{ t('profile.change_avatar') || '更换头像' }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Basic info -->
+        <div class="edit-card">
+          <div class="card-title">{{ t('profile.basic_info') || '基础信息' }}</div>
+
+          <div v-if="message" class="success-msg">{{ message }}</div>
+          <div v-if="error" class="error-msg">{{ error }}</div>
+
+          <div class="field-group">
+            <div class="field">
+              <label class="field-label">{{ t('profile.username') || '用户名' }}</label>
+              <input
+                v-model="username"
+                type="text"
+                class="field-input"
+                :disabled="!allowUsernameChange"
+              />
+              <p v-if="!allowUsernameChange" class="field-hint">{{ t('profile.username_locked') || '用户名不可修改' }}</p>
+            </div>
+
+            <div class="field">
+              <label class="field-label">{{ t('profile.phone') || '手机号' }}</label>
+              <input v-model="phone" type="text" class="field-input" />
+            </div>
+
+            <div class="field">
+              <label class="field-label">Email</label>
+              <input v-model="email" type="email" class="field-input" />
+            </div>
+          </div>
+
+          <button type="button" class="save-btn" :disabled="saving" @click="saveProfile">
+            <GoldSpinner v-if="saving" :size="18" />
+            <span v-else>{{ t('common.save') || '保存' }}</span>
+          </button>
+        </div>
+
+        <!-- Password change -->
+        <div v-if="allowPasswordChange" class="edit-card">
+          <div class="card-title">
+            {{ t('profile.change_password') || '修改密码' }}
+            <button
+              type="button"
+              class="toggle-btn"
+              @click="passwordChangeOpen = !passwordChangeOpen"
+            >
+              {{ passwordChangeOpen ? (t('common.collapse') || '收起') : (t('common.expand') || '展开') }}
+            </button>
+          </div>
+
+          <div v-show="passwordChangeOpen" class="field-group">
+            <div class="field">
+              <label class="field-label">{{ t('profile.old_password') || '当前密码' }}</label>
+              <input v-model="oldPassword" type="password" class="field-input" autocomplete="current-password" />
+            </div>
+            <div class="field">
+              <label class="field-label">{{ t('profile.new_password') || '新密码' }}</label>
+              <input v-model="newPassword" type="password" class="field-input" autocomplete="new-password" />
+            </div>
+            <div class="field">
+              <label class="field-label">{{ t('profile.confirm_password') || '确认密码' }}</label>
+              <input v-model="confirmPassword" type="password" class="field-input" autocomplete="new-password" />
+            </div>
+            <button type="button" class="save-btn" :disabled="saving" @click="savePassword">
+              <GoldSpinner v-if="saving" :size="18" />
+              <span v-else>{{ t('profile.change_password') || '修改密码' }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <PlayerAvatarModal
+        :open="avatarModalOpen"
+        :model-value="profileRaw?.preferences?.avatarKey ?? null"
+        @close="avatarModalOpen = false"
+        @confirm="(key) => { avatarModalOpen = false; if (key !== undefined) setAvatarKey(key); }"
+      />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.desktop-account-page { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
+
+.account-main { flex: 1; min-width: 0; padding: 24px 28px; overflow-y: auto; }
+.page-header { margin-bottom: 24px; }
+.page-title { font-size: 18px; font-weight: 800; color: var(--primary-light); margin: 0; }
+
+.edit-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.edit-card {
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  padding: 20px;
+}
+
+.card-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--desktop-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.avatar-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.avatar-img {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--border-gold-soft);
+}
+
+.avatar-placeholder {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  border: 2px solid var(--desktop-border);
+}
+
+.change-avatar-btn {
+  padding: 7px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--desktop-border);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.change-avatar-btn:hover { border-color: var(--border-gold-soft); color: var(--primary-light); }
+
+.field-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
+
+.field { display: flex; flex-direction: column; gap: 6px; }
+
+.field-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.field-input {
+  padding: 10px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--desktop-border);
+  background: #111;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 600;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.field-input:focus { border-color: var(--border-gold-soft); }
+.field-input:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.field-hint { font-size: 11px; color: var(--text-muted); margin: 0; }
+
+.success-msg { padding: 10px 14px; border-radius: 6px; background: rgba(52,199,89,0.1); color: #4cd964; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
+.error-msg { padding: 10px 14px; border-radius: 6px; background: rgba(255,69,58,0.1); color: #ff453a; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
+
+.save-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 9px 24px;
+  border-radius: 6px;
+  background: var(--primary);
+  color: #111;
+  font-size: 13px;
+  font-weight: 800;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.save-btn:hover:not(:disabled) { opacity: 0.88; }
+.save-btn:disabled { opacity: 0.45; cursor: default; }
+
+.toggle-btn {
+  background: none;
+  border: none;
+  color: var(--primary-light);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  text-transform: none;
+  letter-spacing: 0;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopProfileView.vue b/apps/player/src/views/desktop/DesktopProfileView.vue
new file mode 100644
index 0000000..022aead
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopProfileView.vue
@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import { ref, onMounted, onActivated, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import api from '../../api';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import LocaleFlag from '../../components/LocaleFlag.vue';
+import { useAuthStore } from '../../stores/auth';
+import { useAppLocale } from '../../composables/useAppLocale';
+import { usePlayerProfile } from '../../composables/usePlayerProfile';
+import { useInboxFeature } from '../../composables/useInboxFeature';
+import { formatMoney } from '../../utils/localeDisplay';
+import { parseCashbackApiData, sumCashbackAmount } from '../../utils/cashback';
+import walletBg from '../../assets/images/wallet-bg.webp';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+const auth = useAuthStore();
+const { locales, setLocale, initFromUser } = useAppLocale();
+const { profileRaw, refreshProfile } = usePlayerProfile();
+const { hubRoute } = useInboxFeature();
+
+const loading = ref(true);
+const error = ref(false);
+const cashbackTotal = ref('0');
+
+async function fetchProfile() {
+  loading.value = true;
+  error.value = false;
+  try {
+    await refreshProfile();
+    initFromUser(profileRaw.value?.locale);
+    void fetchCashbackTotal();
+  } catch {
+    error.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function fetchCashbackTotal() {
+  try {
+    const { data } = await api.get('/player/cashbacks');
+    cashbackTotal.value = sumCashbackAmount(parseCashbackApiData(data.data)).toString();
+  } catch {
+    try {
+      const { data } = await api.get('/player/wallet/transactions/stats');
+      const byType = data.data?.byType ?? [];
+      let sum = 0;
+      for (const g of byType) {
+        if (['CASHBACK', 'CASHBACK_DEPOSIT'].includes(g.transactionType?.toUpperCase())) {
+          sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
+        }
+      }
+      cashbackTotal.value = sum.toString();
+    } catch { /* ignore */ }
+  }
+}
+
+onMounted(fetchProfile);
+onActivated(fetchProfile);
+
+function logout() {
+  auth.logout();
+  router.push('/');
+}
+
+const balanceDisplay = computed(() =>
+  formatMoney(profileRaw.value?.wallet?.availableBalance, locale.value),
+);
+
+</script>
+
+<template>
+  <div class="desktop-account-page">
+    <main class="account-main">
+      <div class="profile-layout">
+        <div class="page-header">
+          <h1 class="page-title">{{ t('nav.profile') }}</h1>
+        </div>
+
+        <div v-if="loading" class="loading-state">
+          <GoldSpinner :size="36" />
+        </div>
+
+        <div v-else-if="error" class="error-state">
+          <p>{{ t('common.load_failed') }}</p>
+          <button type="button" class="retry-btn" @click="fetchProfile">{{ t('common.retry') }}</button>
+        </div>
+
+        <template v-else>
+          <!-- Wallet Banner -->
+          <div class="wallet-banner">
+            <img class="wallet-banner-img" :src="walletBg" alt="" />
+            <div class="wallet-banner-scrim" aria-hidden="true" />
+            
+            <div class="card-overlay">
+              <div class="bank-card-top">
+                <div class="bank-card-top-left">
+                  <img src="/logo.png" alt="TheBet365" class="brand-logo" />
+                  <div class="bank-card-brand-text">
+                    <span class="brand-name">THEBET365</span>
+                    <span class="bank-card-type">MEMBER</span>
+                  </div>
+                </div>
+                <router-link to="/wallet/recharge" class="recharge-btn">
+                  <span class="recharge-icon">+</span>
+                  <span>{{ t('recharge.title') }}</span>
+                </router-link>
+              </div>
+
+              <div class="bank-card-balance">
+                <span class="bank-card-label">{{ t('wallet.available') || '可用余额' }}</span>
+                <p class="bank-card-number">{{ balanceDisplay }}</p>
+              </div>
+
+              <div class="bank-card-footer">
+                <div class="bank-card-field">
+                  <span class="bank-card-label">{{ t('profile.username') || '持卡人' }}</span>
+                  <span class="bank-card-holder">{{ profileRaw?.username }}</span>
+                </div>
+                <div class="bank-card-field bank-card-field--center">
+                  <span class="bank-card-label">{{ t('wallet.cashback_total') || '累计返水' }}</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">{{ t('wallet.frozen') || '冻结' }}</span>
+                  <span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Account info -->
+          <div class="info-card">
+            <div class="info-header">{{ t('profile.account') || '账户信息' }}</div>
+            <div class="info-row">
+              <span class="info-label">{{ t('profile.username') || '用户名' }}</span>
+              <span class="info-val">{{ profileRaw?.username }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">{{ t('profile.phone') || '手机号' }}</span>
+              <span class="info-val">{{ profileRaw?.preferences?.phone || '-' }}</span>
+            </div>
+            <div class="info-actions">
+              <router-link to="/profile/edit" class="edit-btn">{{ t('profile.edit') }}</router-link>
+            </div>
+          </div>
+
+          <!-- Language -->
+          <div class="lang-card">
+            <div class="info-header">{{ t('profile.language') }}</div>
+            <div class="lang-group">
+              <button
+                v-for="item in locales"
+                :key="item.code"
+                type="button"
+                class="lang-opt"
+                :class="{ active: locale === item.code }"
+                @click="setLocale(item.code)"
+              >
+                <LocaleFlag :locale="item.code" :size="14" />
+                <span>{{ item.label }}</span>
+              </button>
+            </div>
+          </div>
+
+          <!-- Logout -->
+          <button type="button" class="logout-btn" @click="logout">
+            {{ t('auth.logout') }}
+          </button>
+        </template>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.desktop-account-page { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
+
+.account-main { flex: 1; min-width: 0; padding: 24px 28px; overflow-y: auto; }
+.page-header { margin-bottom: 24px; }
+.page-title { font-size: 18px; font-weight: 800; color: var(--primary-light); margin: 0; }
+.loading-state { display: flex; justify-content: center; align-items: center; padding: 80px 0; }
+.error-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 20px; color: var(--text-muted); }
+.retry-btn { padding: 8px 24px; border-radius: 6px; border: 1px solid var(--primary); background: transparent; color: var(--primary-light); font-size: 13px; font-weight: 700; cursor: pointer; }
+
+.profile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.wallet-banner {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 21 / 9;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.wallet-banner::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.22);
+  pointer-events: none;
+}
+
+.wallet-banner-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  transform: scale(1.05);
+  filter: brightness(0.86);
+  pointer-events: none;
+  user-select: none;
+}
+
+.wallet-banner-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.46) 100%);
+}
+
+.card-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+}
+
+.bank-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bank-card-top-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.brand-logo {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.bank-card-brand-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.brand-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 0.14em;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.bank-card-type {
+  font-size: 10px;
+  font-weight: 800;
+  color: rgba(212, 175, 55, 0.8);
+  font-style: italic;
+}
+
+.recharge-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0.45);
+  border: 1px solid rgba(212, 175, 55, 0.35);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  backdrop-filter: blur(6px);
+  transition: background 0.15s ease;
+}
+
+.recharge-btn:hover { background: rgba(212, 175, 55, 0.15); }
+
+.bank-card-balance {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+}
+
+.bank-card-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.82);
+}
+
+.bank-card-number {
+  margin: 0;
+  font-family: 'SF Mono', 'Consolas', monospace;
+  font-weight: 700;
+  color: var(--primary-light);
+  font-size: 38px;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
+}
+
+.bank-card-footer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.bank-card-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bank-card-field--center { text-align: center; }
+.bank-card-field--right { text-align: right; }
+
+.bank-card-holder {
+  font-size: 14px;
+  font-weight: 700;
+  color: #fff;
+  text-transform: uppercase;
+}
+
+.bank-card-stat {
+  font-size: 14px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.info-card, .lang-card {
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  padding: 20px;
+}
+
+.info-header {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 14px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--desktop-border);
+}
+
+.info-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+
+.info-label { width: 80px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); font-weight: 600; }
+.info-val { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
+.info-actions { padding-top: 14px; }
+
+.edit-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px 18px;
+  border-radius: 6px;
+  border: 1px solid var(--border-gold-soft);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: background 0.2s;
+}
+
+.edit-btn:hover { background: rgba(212,175,55,0.08); }
+
+.lang-group { display: flex; gap: 8px; flex-wrap: wrap; }
+
+.lang-opt {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--desktop-border);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.lang-opt.active {
+  border-color: var(--border-gold-soft);
+  color: var(--primary-light);
+  background: rgba(212,175,55,0.08);
+}
+
+.logout-btn {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid var(--desktop-border);
+  background: transparent;
+  color: var(--danger);
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.logout-btn:hover { background: rgba(255,69,58,0.06); }
+</style>
diff --git a/apps/player/src/views/desktop/DesktopRechargeHistoryView.vue b/apps/player/src/views/desktop/DesktopRechargeHistoryView.vue
new file mode 100644
index 0000000..6fef90b
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopRechargeHistoryView.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { ref, onMounted, onActivated } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { RouterLink } from 'vue-router';
+import api from '../../api';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import Pagination from '../../components/desktop/Pagination.vue';
+import DesktopWalletSubNav from '../../components/desktop/DesktopWalletSubNav.vue';
+import { formatMoney } from '../../utils/localeDisplay';
+
+const COL_COUNT = 5;
+
+const { t, locale } = useI18n();
+
+type RechargeOrder = {
+  id: string;
+  orderNo: string;
+  amount: string;
+  status: string;
+  methodType?: string;
+  bankName?: string | null;
+  paymentMethodName?: string | null;
+  approvedAmount?: string | null;
+  createdAt: string;
+};
+
+const items = ref<RechargeOrder[]>([]);
+const loading = ref(true);
+const page = ref(1);
+const pageSize = ref(20);
+const total = ref(0);
+
+async function loadPage(p: number) {
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/deposit-orders', { params: { page: p, pageSize: pageSize.value } });
+    const result = data.data ?? { items: [], total: 0, pageSize: pageSize.value };
+    total.value = result.total ?? 0;
+    items.value = result.items ?? [];
+    page.value = p;
+  } catch {
+    if (p === 1) items.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => loadPage(1));
+onActivated(() => loadPage(page.value));
+
+function methodLabel(order: RechargeOrder) {
+  if (order.methodType === 'USDT') return 'USDT';
+  return order.paymentMethodName || order.bankName || order.methodType || '-';
+}
+
+function statusClass(status: string) {
+  const map: Record<string, string> = {
+    APPROVED: 'status-won',
+    REJECTED: 'status-lost',
+    PENDING: 'status-pending',
+  };
+  return map[status?.toUpperCase()] ?? 'status-default';
+}
+
+function statusLabel(status: string) {
+  const s = status?.toUpperCase();
+  if (s === 'APPROVED') return t('recharge.status_approved');
+  if (s === 'REJECTED') return t('recharge.status_rejected');
+  return t('recharge.status_pending');
+}
+</script>
+
+<template>
+  <div class="desktop-records-page">
+    <header class="desktop-records-header">
+      <div class="desktop-records-header-main">
+        <DesktopWalletSubNav />
+      </div>
+      <div class="desktop-records-actions">
+        <RouterLink to="/wallet/recharge" class="desktop-records-action-btn">
+          {{ t('wallet.recharge_btn') }}
+        </RouterLink>
+      </div>
+    </header>
+
+    <section class="desktop-records-panel">
+      <div class="desktop-records-table-wrap">
+        <table class="desktop-records-table">
+          <thead>
+            <tr>
+              <th>{{ t('recharge.order_no') }}</th>
+              <th>{{ t('recharge.method') }}</th>
+              <th class="num-th">{{ t('wallet.amount') }}</th>
+              <th>{{ t('common.status') }}</th>
+              <th>{{ t('wallet.time') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="loading" class="state-row">
+              <td :colspan="COL_COUNT">
+                <div class="desktop-records-loading-cell">
+                  <GoldSpinner :size="36" />
+                </div>
+              </td>
+            </tr>
+            <template v-else-if="items.length">
+              <tr v-for="order in items" :key="order.id" class="hover-row">
+                <td class="order-no">{{ order.orderNo || order.id }}</td>
+                <td>{{ methodLabel(order) }}</td>
+                <td class="num-cell">{{ formatMoney(order.amount, locale) }}</td>
+                <td>
+                  <span class="desktop-records-status" :class="statusClass(order.status)">
+                    {{ statusLabel(order.status) }}
+                  </span>
+                </td>
+                <td class="date-cell">{{ new Date(order.createdAt).toLocaleString() }}</td>
+              </tr>
+            </template>
+            <tr v-else class="state-row">
+              <td :colspan="COL_COUNT" class="desktop-records-table-empty">
+                {{ t('recharge.no_orders') }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-if="!loading && total > 0" class="desktop-records-pagination">
+        <Pagination
+          v-model="page"
+          v-model:pageSize="pageSize"
+          :total="total"
+          @change="loadPage"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.order-no {
+  font-weight: 700;
+  color: var(--primary-light);
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopRechargeView.vue b/apps/player/src/views/desktop/DesktopRechargeView.vue
new file mode 100644
index 0000000..568d804
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopRechargeView.vue
@@ -0,0 +1,580 @@
+<script setup lang="ts">
+import { ref, onMounted, onActivated, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import imageCompression from 'browser-image-compression';
+import api from '../../api';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import { useDepositNotifications } from '../../composables/useDepositNotifications';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const { trackPendingOrder } = useDepositNotifications();
+
+const reapplyOrderId = computed(() => {
+  const id = route.query.orderId;
+  return typeof id === 'string' && id ? id : '';
+});
+const isReapply = computed(() => !!reapplyOrderId.value);
+
+interface PaymentMethod {
+  id: string;
+  methodType: string;
+  bankName: string | null;
+  accountHolder: string | null;
+  accountNumber: string | null;
+  usdtAddress: string | null;
+  qrCodeUrl: string | null;
+  displayName: string | null;
+}
+
+const methodType = ref<'BANK' | 'USDT'>('BANK');
+const methods = ref<PaymentMethod[]>([]);
+const selectedMethod = ref<PaymentMethod | null>(null);
+const amount = ref<string>('');
+const screenshotFile = ref<File | null>(null);
+const screenshotPreview = ref<string>('');
+const loading = ref(true);
+const submitting = ref(false);
+const success = ref(false);
+const orderNo = ref('');
+const compressing = ref(false);
+
+const bankMethods = computed(() => methods.value.filter((m) => m.methodType === 'BANK'));
+const usdtMethods = computed(() => methods.value.filter((m) => m.methodType === 'USDT'));
+const currentMethods = computed(() => methodType.value === 'BANK' ? bankMethods.value : usdtMethods.value);
+
+function applyReapplyQuery() {
+  const type = route.query.methodType;
+  if (type === 'BANK' || type === 'USDT') methodType.value = type;
+  const methodId = typeof route.query.methodId === 'string' ? route.query.methodId : '';
+  if (methodId) {
+    const match = methods.value.find((m) => m.id === methodId);
+    if (match) selectedMethod.value = match;
+  }
+  if (!selectedMethod.value && currentMethods.value.length) selectedMethod.value = currentMethods.value[0];
+  const amountQuery = typeof route.query.amount === 'string' ? route.query.amount : '';
+  const parsedAmount = parseFloat(amountQuery);
+  if (amountQuery && parsedAmount > 0) amount.value = amountQuery;
+}
+
+async function fetchMethods() {
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/payment-methods');
+    methods.value = (data.data ?? []).map((m: any) => ({ ...m, id: String(m.id) }));
+    if (isReapply.value) {
+      applyReapplyQuery();
+    } else if (currentMethods.value.length) {
+      selectedMethod.value = currentMethods.value[0];
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+function selectMethod(m: PaymentMethod) { selectedMethod.value = m; }
+
+function switchType(type: 'BANK' | 'USDT') {
+  methodType.value = type;
+  selectedMethod.value = currentMethods.value[0] ?? null;
+}
+
+async function handleFileChange(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  try {
+    compressing.value = true;
+    const compressed = await imageCompression(file, { maxSizeMB: 0.8, maxWidthOrHeight: 1200 });
+    screenshotFile.value = compressed;
+    screenshotPreview.value = URL.createObjectURL(compressed);
+  } catch {
+    screenshotFile.value = file;
+    screenshotPreview.value = URL.createObjectURL(file);
+  } finally {
+    compressing.value = false;
+  }
+}
+
+function clearFile() { screenshotFile.value = null; screenshotPreview.value = ''; }
+
+async function submit() {
+  if (!selectedMethod.value || !amount.value || !screenshotFile.value) return;
+  submitting.value = true;
+  try {
+    const fd = new FormData();
+    fd.append('paymentMethodId', selectedMethod.value.id);
+    fd.append('amount', amount.value);
+    fd.append('screenshot', screenshotFile.value);
+    if (isReapply.value) fd.append('originalOrderId', reapplyOrderId.value);
+    const { data } = await api.post('/player/deposits', fd, { headers: { 'Content-Type': 'multipart/form-data' } });
+    orderNo.value = data.data?.orderNo ?? '';
+    if (data.data?.id) trackPendingOrder(String(data.data.id));
+    success.value = true;
+  } catch {
+    /* error handled by axios interceptor */
+  } finally {
+    submitting.value = false;
+  }
+}
+
+onMounted(fetchMethods);
+onActivated(fetchMethods);
+</script>
+
+<template>
+  <div class="desktop-account-page">
+    <main class="account-main">
+      <div class="recharge-layout">
+        <div class="page-header">
+          <h1 class="page-title">{{ t('recharge.title') }}</h1>
+        </div>
+
+        <div v-if="loading" class="loading-state">
+          <GoldSpinner :size="36" />
+        </div>
+
+        <div v-else-if="success" class="success-card">
+          <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-5"/></svg>
+          <h2>{{ t('recharge.success_title') }}</h2>
+          <p class="order-no">{{ t('recharge.order_no') }}: {{ orderNo }}</p>
+          <p class="success-hint">{{ t('recharge.success_hint') }}</p>
+          <button type="button" class="action-btn" @click="router.push('/wallet/recharge/history')">
+            {{ t('recharge.history_title') }}
+          </button>
+        </div>
+
+        <template v-else>
+          <!-- Method type tabs -->
+          <div class="type-tabs">
+            <button type="button" class="type-tab" :class="{ active: methodType === 'BANK' }" @click="switchType('BANK')">
+              {{ t('recharge.bank_transfer') || '银行转账' }}
+            </button>
+            <button type="button" class="type-tab" :class="{ active: methodType === 'USDT' }" @click="switchType('USDT')">
+              USDT
+            </button>
+          </div>
+
+          <div class="recharge-cols">
+          <!-- Method list -->
+          <div class="method-list">
+            <p class="section-label">{{ t('recharge.choose_method') || '选择收款账户' }}</p>
+            <div v-if="currentMethods.length === 0" class="no-methods">
+              {{ t('recharge.no_methods') || '暂无可用收款账户' }}
+            </div>
+            <button
+              v-for="m in currentMethods"
+              :key="m.id"
+              type="button"
+              class="method-card"
+              :class="{ selected: selectedMethod?.id === m.id }"
+              @click="selectMethod(m)"
+            >
+              <span class="method-name">{{ m.displayName || m.bankName || 'USDT' }}</span>
+              <span class="method-account">{{ m.accountNumber || m.usdtAddress || '' }}</span>
+            </button>
+          </div>
+
+          <!-- Form -->
+          <div v-if="selectedMethod" class="recharge-form">
+            <!-- Bank details -->
+            <div v-if="methodType === 'BANK'" class="bank-detail-card">
+              <div class="detail-row">
+                <span class="detail-label">{{ t('recharge.bank_name') || '银行名称' }}</span>
+                <span class="detail-val">{{ selectedMethod.bankName }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">{{ t('recharge.account_holder') || '持卡人' }}</span>
+                <span class="detail-val">{{ selectedMethod.accountHolder }}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">{{ t('recharge.account_number') || '账号' }}</span>
+                <span class="detail-val mono">{{ selectedMethod.accountNumber }}</span>
+              </div>
+            </div>
+
+            <!-- USDT QR -->
+            <div v-if="methodType === 'USDT' && selectedMethod.qrCodeUrl" class="qr-wrap">
+              <img :src="selectedMethod.qrCodeUrl" alt="USDT QR" class="qr-img" />
+            </div>
+            <div v-if="methodType === 'USDT'" class="detail-row">
+              <span class="detail-label">{{ t('recharge.usdt_address') || 'USDT地址' }}</span>
+              <span class="detail-val mono break-all">{{ selectedMethod.usdtAddress }}</span>
+            </div>
+
+            <!-- Amount input -->
+            <div class="field">
+              <label class="field-label">{{ t('recharge.amount') || '充值金额' }}</label>
+              <input
+                v-model="amount"
+                type="number"
+                min="0"
+                class="field-input"
+                :placeholder="t('recharge.amount_placeholder') || '请输入金额'"
+              />
+            </div>
+
+            <!-- Screenshot upload -->
+            <div class="field">
+              <label class="field-label">{{ t('recharge.screenshot') || '上传凭证截图' }}</label>
+              <div v-if="screenshotPreview" class="preview-wrap">
+                <img :src="screenshotPreview" alt="preview" class="preview-img" />
+                <button type="button" class="clear-btn" @click="clearFile">✕</button>
+              </div>
+              <label v-else class="upload-zone">
+                <input type="file" accept="image/*" class="hidden-input" @change="handleFileChange" />
+                <GoldSpinner v-if="compressing" :size="24" />
+                <template v-else>
+                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.5"><path d="M4 17v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 3v12M8 7l4-4 4 4"/></svg>
+                  <span class="upload-hint">{{ t('recharge.click_to_upload') || '点击上传截图' }}</span>
+                </template>
+              </label>
+            </div>
+
+            <button
+              type="button"
+              class="submit-btn"
+              :disabled="submitting || !amount || !screenshotFile"
+              @click="submit"
+            >
+              <GoldSpinner v-if="submitting" :size="18" />
+              <span v-else>{{ t('recharge.submit') || '提交充值' }}</span>
+            </button>
+          </div>
+        </div>
+      </template>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.desktop-account-page { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
+
+.recharge-layout {
+  display: flex;
+  flex-direction: column;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.account-main {
+  flex: 1;
+  min-width: 0;
+  padding: 24px 28px;
+  overflow-y: auto;
+}
+
+.page-header {
+  margin-bottom: 20px;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--primary-light);
+  margin: 0;
+  letter-spacing: 0.02em;
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 80px 0;
+}
+
+.success-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.success-card h2 {
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--primary-light);
+  margin: 0;
+}
+
+.order-no {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin: 0;
+  font-weight: 700;
+}
+
+.success-hint {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.action-btn {
+  padding: 9px 24px;
+  border-radius: 6px;
+  background: var(--primary);
+  color: #111;
+  font-size: 13px;
+  font-weight: 800;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.action-btn:hover { opacity: 0.88; }
+
+.type-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.type-tab {
+  padding: 6px 20px;
+  border-radius: 6px;
+  border: 1px solid var(--desktop-border);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.type-tab.active {
+  border-color: var(--border-gold-soft);
+  color: var(--primary-light);
+  background: rgba(212,175,55,0.08);
+}
+
+.recharge-cols {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 24px;
+  align-items: start;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.section-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin: 0 0 10px;
+}
+
+.no-methods {
+  font-size: 13px;
+  color: var(--text-muted);
+  padding: 12px 0;
+}
+
+.method-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.method-card {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 1px solid var(--desktop-border);
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  cursor: pointer;
+  margin-bottom: 8px;
+  text-align: left;
+  transition: all 0.2s;
+}
+
+.method-card:hover { border-color: rgba(255, 255, 255, 0.15); }
+
+.method-card.selected {
+  border-color: var(--border-gold-soft);
+  background: rgba(212,175,55,0.06);
+}
+
+.method-name {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--text);
+}
+
+.method-account {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.recharge-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.bank-detail-card {
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.detail-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.detail-label {
+  width: 80px;
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding-top: 1px;
+}
+
+.detail-val {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.mono { font-family: 'SF Mono', 'Consolas', monospace; letter-spacing: 0.04em; }
+.break-all { word-break: break-all; }
+
+.qr-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 12px 0;
+}
+
+.qr-img {
+  width: 140px;
+  height: 140px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid var(--desktop-border);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.field-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.field-input {
+  padding: 10px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--desktop-border);
+  background: #111;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 700;
+  outline: none;
+  transition: border-color 0.2s;
+  max-width: 320px;
+}
+
+.field-input:focus { border-color: var(--border-gold-soft); }
+
+.preview-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.preview-img {
+  max-width: 180px;
+  max-height: 180px;
+  border-radius: 8px;
+  border: 1px solid var(--desktop-border);
+  object-fit: cover;
+  display: block;
+}
+
+.clear-btn {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #333;
+  border: none;
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 180px;
+  height: 120px;
+  border: 2px dashed var(--desktop-border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.upload-zone:hover { border-color: var(--border-gold-soft); }
+
+.hidden-input { display: none; }
+
+.upload-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.submit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 11px 32px;
+  border-radius: 6px;
+  background: var(--primary);
+  color: #111;
+  font-size: 14px;
+  font-weight: 800;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  align-self: flex-start;
+}
+
+.submit-btn:hover:not(:disabled) { opacity: 0.88; }
+.submit-btn:disabled { opacity: 0.45; cursor: default; }
+</style>
diff --git a/apps/player/src/views/desktop/DesktopRegisterView.vue b/apps/player/src/views/desktop/DesktopRegisterView.vue
new file mode 100644
index 0000000..3df109b
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopRegisterView.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * Desktop Register View
+ * Reuses the existing RegisterView form in a centered desktop auth layout.
+ */
+import RegisterView from '../RegisterView.vue';
+</script>
+
+<template>
+  <div class="desktop-auth-shell">
+    <div class="auth-brand">
+      <div class="brand-inner">
+        <img src="/logo.png" alt="TheBet365" class="brand-logo" />
+        <h1 class="brand-name">THEBET365</h1>
+        <p class="brand-tagline">加入我们，开始精彩体育投注</p>
+      </div>
+    </div>
+    <div class="auth-card-wrap">
+      <div class="auth-card">
+        <RegisterView />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-auth-shell {
+  display: flex;
+  min-height: 100vh;
+  background: var(--desktop-bg);
+}
+
+.auth-brand {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0d0d0d 100%);
+  border-right: 1px solid var(--desktop-border);
+  position: relative;
+  overflow: hidden;
+}
+
+.auth-brand::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212,175,55,0.06) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.brand-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  padding: 40px;
+}
+
+.brand-logo {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  filter: drop-shadow(0 4px 16px rgba(212,175,55,0.3));
+}
+
+.brand-name {
+  font-size: 28px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  color: var(--primary-light);
+  margin: 0;
+}
+
+.brand-tagline {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin: 0;
+  font-weight: 600;
+}
+
+.auth-card-wrap {
+  width: 520px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  background: var(--desktop-bg);
+  overflow-y: auto;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 420px;
+}
+</style>
diff --git a/apps/player/src/views/desktop/DesktopWalletDetailView.vue b/apps/player/src/views/desktop/DesktopWalletDetailView.vue
new file mode 100644
index 0000000..cd85ee2
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopWalletDetailView.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref, onMounted, onActivated } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import api from '../../api';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import { formatMoney } from '../../utils/localeDisplay';
+import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../../utils/walletTx';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+
+function goBack() {
+  if (window.history.state && window.history.state.back) {
+    router.back();
+  } else {
+    router.push('/wallet');
+  }
+}
+
+type Transaction = {
+  transactionType: string;
+  displayType?: string;
+  summary?: string | null;
+  referenceType?: string | null;
+  amount: string;
+  createdAt: string;
+  transactionId: string;
+};
+
+const items = ref<Transaction[]>([]);
+const loading = ref(true);
+const page = ref(1);
+const hasMore = ref(true);
+
+function txLabel(tx: Transaction): string {
+  const key = txTypeKey(txDisplayType(tx));
+  if (key) {
+    const translated = t(key);
+    if (translated !== key) return translated;
+  }
+  return tx.transactionType;
+}
+
+async function loadPage(p: number) {
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/wallet/transactions', { params: { page: p } });
+    const result = data.data ?? { items: [], total: 0 };
+    if (p === 1) {
+      items.value = result.items ?? [];
+    } else {
+      items.value = [...items.value, ...(result.items ?? [])];
+    }
+    hasMore.value = items.value.length < (result.total ?? 0);
+    page.value = p;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => loadPage(1));
+onActivated(() => loadPage(1));
+</script>
+
+<template>
+  <div class="desktop-account-page">
+    <main class="account-main">
+      <div class="records-layout">
+        <div class="page-header">
+          <button type="button" class="back-btn" @click="router.back()">‹ {{ t('common.back') }}</button>
+          <h1 class="page-title">{{ t('wallet.all_records') }}</h1>
+        </div>
+
+        <div v-if="loading && items.length === 0" class="loading-state">
+          <GoldSpinner :size="36" />
+        </div>
+
+        <template v-else>
+          <div v-if="items.length" class="table-container">
+            <div class="table-wrap">
+              <table class="dt">
+                <thead>
+                  <tr>
+                    <th>{{ t('wallet.type') || '类型' }}</th>
+                    <th>{{ t('wallet.note') || '备注' }}</th>
+                    <th class="num-th">{{ t('wallet.amount') || '金额' }}</th>
+                    <th>{{ t('wallet.time') || '时间' }}</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="tx in items"
+                    :key="tx.transactionId"
+                    class="hover-row"
+                    style="cursor:pointer"
+                    @click="router.push(`/wallet/transactions/${tx.transactionId}`)"
+                  >
+                    <td class="type-cell">{{ txLabel(tx) }}</td>
+                    <td class="note-cell">{{ txSummaryLabel(tx, t) || '-' }}</td>
+                    <td :class="['num-cell', txAmountClass(tx.amount)]">{{ formatMoney(tx.amount, locale) }}</td>
+                    <td class="date-cell">{{ new Date(tx.createdAt).toLocaleString() }}</td>
+                    <td class="arrow-cell">›</td>
+                  </tr>
+                </tbody>
+              </table>
+
+              <div v-if="hasMore" class="load-more">
+                <button type="button" class="load-more-btn" :disabled="loading" @click="loadPage(page + 1)">
+                  <GoldSpinner v-if="loading" :size="18" />
+                  <span v-else>{{ t('common.load_more') || '加载更多' }}</span>
+                </button>
+              </div>
+              <p v-else class="end-hint">{{ t('common.no_more') }}</p>
+            </div>
+          </div>
+          <div v-else class="empty-state">{{ t('wallet.no_records') }}</div>
+        </template>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.desktop-account-page { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
+
+.account-main { flex: 1; min-width: 0; padding: 24px 28px; display: flex; flex-direction: column; overflow: hidden; }
+
+.records-layout {
+  display: flex;
+  flex-direction: column;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  flex: 0 1 auto;
+  min-height: 0;
+}
+
+.page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
+.back-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
+.back-btn:hover { color: var(--text); }
+.page-title { font-size: 18px; font-weight: 800; color: var(--primary-light); margin: 0; }
+.loading-state { display: flex; justify-content: center; align-items: center; padding: 80px 0; }
+.table-container {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  min-height: 0;
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.table-wrap { flex: 1; overflow-x: auto; overflow-y: auto; }
+.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
+.dt th {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: 9px 12px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: #141414;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--desktop-border);
+  white-space: nowrap;
+}
+.dt th:first-child { border-top-left-radius: 8px; }
+.dt th:last-child { border-top-right-radius: 8px; }
+.num-th { text-align: right; }
+.dt td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); vertical-align: middle; }
+.hover-row { transition: background 0.15s; }
+.hover-row:hover { background: rgba(255,255,255,0.03); }
+.type-cell { font-weight: 700; }
+.note-cell { color: var(--text-muted); font-size: 12px; max-width: 220px; }
+.num-cell { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
+.date-cell { white-space: nowrap; color: var(--text-muted); font-size: 12px; }
+.arrow-cell { color: #555; font-size: 18px; font-weight: 300; text-align: right; width: 24px; }
+.pos { color: var(--primary-light); }
+.neg { color: var(--danger); }
+.zero { color: var(--text-muted); }
+.load-more { display: flex; justify-content: center; padding: 20px 0 8px; }
+.load-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 28px; border-radius: 6px; border: 1px solid var(--desktop-border); background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
+.load-more-btn:hover:not(:disabled) { border-color: var(--border-gold-soft); color: var(--primary-light); }
+.load-more-btn:disabled { opacity: 0.5; cursor: default; }
+.end-hint { text-align: center; font-size: 12px; color: #444; padding: 16px 0 4px; }
+.empty-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 20px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
+</style>
diff --git a/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
new file mode 100644
index 0000000..1dcaab4
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopWalletTransactionDetailView.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import api from '../../api';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import { formatMoney } from '../../utils/localeDisplay';
+import { txTypeKey, txDisplayType, txSummaryLabel } from '../../utils/walletTx';
+
+const { t, locale } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+function goBack() {
+  if (window.history.state && window.history.state.back) {
+    router.back();
+  } else {
+    router.push('/wallet');
+  }
+}
+
+type TxDetail = {
+  transactionId: string;
+  transactionType: string;
+  displayType?: string;
+  summary?: string | null;
+  amount: string;
+  balanceBefore?: string;
+  balanceAfter?: string;
+  frozenBefore?: string;
+  frozenAfter?: string;
+  createdAt: string;
+  referenceType?: string | null;
+  [key: string]: any;
+};
+
+const detail = ref<TxDetail | null>(null);
+const loading = ref(true);
+const error = ref(false);
+
+async function loadDetail() {
+  const id = route.params.transactionId as string;
+  if (!id) return;
+  loading.value = true;
+  error.value = false;
+  try {
+    const { data } = await api.get(`/player/wallet/transactions/${id}`);
+    detail.value = data.data ?? null;
+  } catch {
+    error.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadDetail);
+
+function txLabel(tx: TxDetail): string {
+  const key = txTypeKey(txDisplayType(tx));
+  if (key) {
+    const translated = t(key);
+    if (translated !== key) return translated;
+  }
+  return tx.transactionType;
+}
+</script>
+
+<template>
+  <div class="desktop-account-page">
+    <main class="account-main">
+      <div class="detail-layout">
+        <div class="page-header">
+          <button type="button" class="back-btn" @click="goBack">
+            ‹ {{ t('common.back') || '返回' }}
+          </button>
+          <h1 class="page-title">{{ t('wallet.transaction_detail') || '交易详情' }}</h1>
+        </div>
+
+        <div v-if="loading" class="loading-state">
+          <GoldSpinner :size="36" />
+        </div>
+
+        <div v-else-if="error" class="error-state">
+          <p>{{ t('common.load_failed') }}</p>
+          <button type="button" class="retry-btn" @click="loadDetail">{{ t('common.retry') }}</button>
+        </div>
+
+        <div v-else-if="detail" class="detail-card">
+          <div class="amount-hero" :class="parseFloat(detail.amount) >= 0 ? 'pos' : 'neg'">
+            {{ formatMoney(detail.amount, locale) }}
+          </div>
+          <div class="type-label">{{ txLabel(detail) }}</div>
+
+          <div class="detail-rows">
+            <div class="detail-row">
+              <span class="row-label">{{ t('wallet.type') || '类型' }}</span>
+              <span class="row-val">{{ txLabel(detail) }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="row-label">{{ t('wallet.note') || '备注' }}</span>
+              <span class="row-val">{{ txSummaryLabel(detail, t) || '-' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="row-label">{{ t('wallet.balance_before') || '变动前余额' }}</span>
+              <span class="row-val mono">{{ formatMoney(detail.balanceBefore, locale) }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="row-label">{{ t('wallet.balance_after') || '变动后余额' }}</span>
+              <span class="row-val mono">{{ formatMoney(detail.balanceAfter, locale) }}</span>
+            </div>
+            <div v-if="parseFloat(detail.frozenBefore || '0') > 0 || parseFloat(detail.frozenAfter || '0') > 0" class="detail-row">
+              <span class="row-label">{{ t('wallet.frozen_before') || '冻结前' }}</span>
+              <span class="row-val mono">{{ formatMoney(detail.frozenBefore, locale) }}</span>
+            </div>
+            <div v-if="parseFloat(detail.frozenBefore || '0') > 0 || parseFloat(detail.frozenAfter || '0') > 0" class="detail-row">
+              <span class="row-label">{{ t('wallet.frozen_after') || '冻结后' }}</span>
+              <span class="row-val mono">{{ formatMoney(detail.frozenAfter, locale) }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="row-label">{{ t('wallet.time') || '时间' }}</span>
+              <span class="row-val">{{ new Date(detail.createdAt).toLocaleString() }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="row-label">{{ t('wallet.transaction_id') || '流水号' }}</span>
+              <span class="row-val mono">{{ detail.transactionId }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="empty-state">{{ t('common.not_found') || '未找到记录' }}</div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.desktop-account-page { display: flex; flex-direction: column; min-height: 0; flex: 1; width: 100%; }
+
+.account-main { flex: 1; min-width: 0; padding: 24px 28px; overflow-y: auto; }
+
+.detail-layout {
+  display: flex;
+  flex-direction: column;
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
+.back-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
+.back-btn:hover { color: var(--text); }
+.page-title { font-size: 18px; font-weight: 800; color: var(--primary-light); margin: 0; }
+.loading-state { display: flex; justify-content: center; align-items: center; padding: 80px 0; }
+.error-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 20px; color: var(--text-muted); }
+.retry-btn { padding: 8px 24px; border-radius: 6px; border: 1px solid var(--primary); background: transparent; color: var(--primary-light); font-size: 13px; font-weight: 700; cursor: pointer; }
+.empty-state { display: flex; align-items: center; justify-content: center; padding: 80px 20px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
+
+.detail-card {
+  background: var(--desktop-sidebar-bg);
+  border: 1px solid var(--desktop-border);
+  border-radius: 12px;
+  padding: 28px;
+}
+
+.amount-hero {
+  font-size: 36px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  font-family: 'SF Mono', 'Consolas', monospace;
+  line-height: 1.1;
+  margin-bottom: 6px;
+}
+
+.amount-hero.pos { color: var(--primary-light); }
+.amount-hero.neg { color: var(--danger); }
+
+.type-label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-muted);
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--desktop-border);
+}
+
+.detail-rows { display: flex; flex-direction: column; gap: 0; }
+
+.detail-row {
+  display: flex;
+  gap: 16px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+
+.detail-row:last-child { border-bottom: none; }
+
+.row-label { width: 120px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); font-weight: 600; }
+.row-val { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); word-break: break-all; }
+.row-val.pos { color: var(--primary-light); }
+.row-val.neg { color: var(--danger); }
+.mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; letter-spacing: 0.03em; }
+</style>
diff --git a/apps/player/src/views/desktop/DesktopWalletView.vue b/apps/player/src/views/desktop/DesktopWalletView.vue
new file mode 100644
index 0000000..e1f267b
--- /dev/null
+++ b/apps/player/src/views/desktop/DesktopWalletView.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, onMounted, onActivated } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter, RouterLink } from 'vue-router';
+import api from '../../api';
+import GoldSpinner from '../../components/GoldSpinner.vue';
+import Pagination from '../../components/desktop/Pagination.vue';
+import DesktopWalletSubNav from '../../components/desktop/DesktopWalletSubNav.vue';
+import { formatMoney } from '../../utils/localeDisplay';
+import { txTypeKey, txDisplayType, txAmountClass, txSummaryLabel } from '../../utils/walletTx';
+import { parseCashbackApiData, sumCashbackAmount } from '../../utils/cashback';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+
+type Transaction = {
+  transactionType: string;
+  displayType?: string;
+  summary?: string | null;
+  summaryKind?: 'opening_bonus' | null;
+  referenceType?: string | null;
+  amount: string;
+  frozenBefore?: string;
+  frozenAfter?: string;
+  createdAt: string;
+  transactionId: string;
+};
+
+const items = ref<Transaction[]>([]);
+const cashbackTotal = ref('0');
+const loading = ref(true);
+const page = ref(1);
+const pageSize = ref(20);
+const total = ref(0);
+
+function txLabel(tx: Transaction): string {
+  const key = txTypeKey(txDisplayType(tx));
+  if (key) {
+    const translated = t(key);
+    if (translated !== key) return translated;
+  }
+  return tx.transactionType;
+}
+
+function txSubtitle(tx: Transaction): string {
+  return txSummaryLabel(tx, t);
+}
+
+function amountClass(amount: string) {
+  return `desktop-records-amount ${txAmountClass(amount)}`;
+}
+
+async function fetchData(p = 1) {
+  loading.value = true;
+  try {
+    const [txRes, cbRes] = await Promise.all([
+      api.get('/player/wallet/transactions', { params: { page: p, pageSize: pageSize.value } }),
+      p === 1 ? api.get('/player/cashbacks').catch(() => ({ data: { data: [] } })) : Promise.resolve(null),
+    ]);
+    const result = txRes.data.data ?? { items: [], total: 0, pageSize: pageSize.value };
+    total.value = result.total ?? 0;
+    if (p === 1) {
+      items.value = result.items ?? [];
+      const cbRows = parseCashbackApiData(cbRes?.data?.data);
+      cashbackTotal.value = sumCashbackAmount(cbRows).toString();
+    } else {
+      items.value = result.items ?? [];
+    }
+    page.value = p;
+  } catch {
+    /* ignore */
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => fetchData(1));
+onActivated(() => fetchData(1));
+</script>
+
+<template>
+  <div class="desktop-records-page">
+    <header class="desktop-records-header">
+      <div class="desktop-records-header-main">
+        <DesktopWalletSubNav />
+      </div>
+      <div class="desktop-records-actions">
+        <RouterLink to="/wallet/recharge" class="desktop-records-action-btn">
+          {{ t('wallet.recharge_btn') }}
+        </RouterLink>
+      </div>
+    </header>
+
+    <section v-if="loading && !items.length" class="desktop-records-panel">
+      <div class="desktop-records-loading">
+        <GoldSpinner :size="36" />
+      </div>
+    </section>
+
+    <section v-else-if="items.length" class="desktop-records-panel">
+      <div class="desktop-records-table-wrap">
+        <table class="desktop-records-table">
+          <thead>
+            <tr>
+              <th>{{ t('wallet.type') || '类型' }}</th>
+              <th>{{ t('wallet.note') || '备注' }}</th>
+              <th class="num-th">{{ t('wallet.amount') || '金额' }}</th>
+              <th>{{ t('wallet.time') || '时间' }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="tx in items"
+              :key="tx.transactionId"
+              class="hover-row"
+              style="cursor: pointer"
+              @click="router.push(`/wallet/transactions/${tx.transactionId}`)"
+            >
+              <td class="type-cell">{{ txLabel(tx) }}</td>
+              <td class="muted-cell">{{ txSubtitle(tx) || '-' }}</td>
+              <td :class="['num-cell', amountClass(tx.amount)]">{{ formatMoney(tx.amount, locale) }}</td>
+              <td class="date-cell">{{ new Date(tx.createdAt).toLocaleString() }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="desktop-records-pagination">
+        <Pagination
+          v-if="total > 0"
+          v-model="page"
+          v-model:pageSize="pageSize"
+          :total="total"
+          @change="fetchData"
+        />
+      </div>
+    </section>
+
+    <section v-else class="desktop-records-panel">
+      <div class="desktop-records-empty">
+        <span>{{ t('wallet.no_records') }}</span>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.type-cell {
+  font-weight: 700;
+}
+
+.muted-cell {
+  color: var(--text-muted);
+  max-width: 420px;
+}
+</style>